/* Include variables for LESS */
/* Import file styles */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap");
@import url(/plugins/jquery-ui/jquery-ui.min-70e1d3ed4887d5af797c0362e71fbea4.css);
@import url(/plugins/jquery-loading/dist/jquery.loading-21130e108106325bea3adb24943daea8.css);
@import url(/plugins/jquery-snow/css/jquery.fallingsnow-5a01949e724037d4d017403b2c9943e9.css);
@import url(/plugins/select2/select2.min-9f54e6414f87e0d14b9e966f19a174f9.css);
@import url(/plugins/font-awesome/css/all.min-6cb5a85b30082e3d59d7e371e002ce8d.css);
@import url(/plugins/bootstrap/css/bootstrap.min-025df1ec88740cad5ff14bb3380da6dd.css);
@import url(/plugins/bootstrap-drawer/css/bootstrap-drawer.min-a19055ef59839e5c1251e6a8f5d4cb10.css);
@import url(/plugins/daterangepicker/css/daterangepicker-681eaf47233303f4b7d36fcfada95016.css);
@import url(/plugins/highlight/styles/agate.min-c95b36b3bafbe00d45bedef8ef8c6239.css);

/* Vue.js */
[v-cloak] { display: none; }

* {
	font-family: 'Noto Sans KR', sans-serif;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	background-color: #6e6e6e;
}
::-webkit-scrollbar-track {
	background-color: #e6e6e6;
}

a, a:visited, a:hover, a:active {
	color: #212529;
	text-decoration: none;
}

.list-group-item input, .list-group-item textarea {
	font-size: .9rem !important;
}

.login-box {
	max-width: 500px;
}

.content {
	white-space: pre-wrap;
}

/* cast */
.cast .form-control, .cast .list-group-item {
	background: transparent !important;
}

.cast.bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.cast.sunny-day {
	animation: loading 0.6s 1 ease-out alternate;
	background: #aaeffa; /* For browsers that do not support gradients */
 	background: -webkit-linear-gradient(bottom, rgba(180,240,250,1), rgba(230,255,254,0.9)); /*Safari 5.1-6*/
 	background: -o-linear-gradient(bottom, rgba(180,240,250,1), rgba(230,255,254,0.9)); /*Opera 11.1-12*/
 	background: -moz-linear-gradient(bottom, rgba(180,240,250,1), rgba(230,255,254,0.9)); /*Fx 3.6-15*/
 	background: linear-gradient(to bottom, rgba(107,186,255,1), rgba(230,255,254,0.9)); /*Standard*/
}

.cast.cloudy-day {
	animation: loading 0.6s 1 ease-out alternate;
	background: gray; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(bottom, rgba(180,180,180,1), rgba(240,240,240,0.9)); /*Safari 5.1-6*/
	background: -o-linear-gradient(bottom, rgba(180,180,180,1), rgba(240,240,240,0.9)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(bottom, rgba(180,180,180,1), rgba(240,240,240,0.9)); /*Fx 3.6-15*/
	background: linear-gradient(to bottom, rgba(180,180,180,1), rgba(240,240,240,0.9)); /*Standard*/
}

.cast.cloudy-night {
	animation: loading 0.6s 1 ease-out alternate;
	background: gray; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(bottom, rgba(150,150,150,1), rgba(20,20,20,0.9)); /*Safari 5.1-6*/
	background: -o-linear-gradient(bottom, rgba(150,150,150,1), rgba(20,20,20,0.9)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(bottom, rgba(150,150,150,1), rgba(20,20,20,0.9)); /*Fx 3.6-15*/
	background: linear-gradient(to bottom, rgba(150,150,150,1), rgba(20,20,20,0.9)); /*Standard*/
}

.cast.sunny-night {
	animation: loading 0.6s 1 ease-out alternate;
	background: black; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(bottom, rgba(10,20,20,1), rgba(0,16,54,0.9)); /*Safari 5.1-6*/
	background: -o-linear-gradient(bottom, rgba(10,20,20,1), rgba(0,16,54,0.9)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(bottom, rgba(10,20,20,1), rgba(0,16,54,0.9)); /*Fx 3.6-15*/
	background: linear-gradient(to bottom, rgba(10,20,20,1), rgba(0,16,54,0.9)); /*Standard*/
}

.cast #mainVue {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cast .cloudLayer {
    position: absolute;
    left: 30%;
    top: 15%;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

/* board */
.slide-up, .slide-down {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.slide-down {            
    /*max-height: calc(100vh - 95px);*/
    max-height: 65vh;
    overflow-y: auto;
}
.board ul li {
	scroll-margin: 54px;
}

/* lotto */
.lotto .round-no {
	font-size: 1.5em;
}
.lotto .circle {
	display: inline-block;
	width: 38px;
	height: 38px;
}
.lotto .circle2 {
	font-size: 1.2em;
	display: block;
	width: 30px;
	height: 30px;
}
.lotto .circle3 {
	font-size: 1.2em;
	display: block;
	width: 35px;
	height: 35px;
}
.lotto .modal-body span input[type="checkbox"] {
	position: relative;
	top: 2px;
}
.lotto .lotto-crown {
	position: absolute;
	top: -5px;
	left: 3px;
	font-size: 1.0em;
	transform: rotate(-20deg);
}
.lotto .rank-box {
	position: absolute;
	left: -5px;
	top: 25px;
}
.lotto .custom-check {
	display: inline-block;
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
}
.lotto .custom-check input[type="checkbox"] {
	display: none;
}
.lotto .custom-check input[type="checkbox"]+label > span {
	border: 2px solid #fff;
}
.lotto .custom-check input[type="checkbox"]:checked+label > span {
	border: 2px solid #000;
}
.lotto .expect-check {
    position: relative;
    top: 4px;
    right: 6px;
    width: 20px;
    height: 20px;
}

/* memo */
.memo code > a {
	color: #bababa;
}
.memo .edit {
	height: 40vh !important;
}
.memo ul li {
	scroll-margin: 54px;
}
.memo pre:not(:last-of-type) {
	margin-bottom: -30px;
}

/* word */
.word .correct {
	position: absolute;
	width: 60px;
	top: -10px;
}
.word .word-list-scroll {
	height: 50vh;
	overflow-x: hidden;
	overflow-y: auto;  
}
.word .perfect-score {
	width: 50%;
}
.word .question {
	border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.bg-gray {
	background-color: #fafafa;
}
.scroll-gradient-white {
  background: 
    linear-gradient(#ffffff 33%, rgba(255,255,255, 0)),
    linear-gradient(rgba(255,255,255, 0), #ffffff 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}
.scroll-gradient-gray {
  background: 
    linear-gradient(#fafafa 33%, rgba(255,255,255, 0)),
    linear-gradient(rgba(250,250,250, 0), #fafafa 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
  background-color: #fafafa;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}