@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{height: 100%;font-family: 'Noto Sans KR', sans-serif;font-size: 14px;font-weight: 400;word-break: keep-all;}
body{margin: 0px;height: 100%;color: #5d5d5d;background-color: #f9f9f9;}

a {background-color: transparent;text-decoration: none;color: inherit;display: block;opacity: 1;transition: all 0.2s ease-in-out;}
a:active,
a:hover{outline: 0;text-decoration: none;}

a.common-01{color: #5d5d5d;text-decoration: underline;}
a.common-01:hover{opacity: 0.6;}

.preload-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/** helpers **/
.show{display: block;}
.hidden{display: none !important;}
.pull-left{float: left;}
.pull-right{float: right;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}
.block{display: block;}
.inline-block{display: inline-block;}
.clearfix:before,
.clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1; /* ie 6/7 */}

.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb40{margin-bottom: 40px;}

.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}

.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
/* helpers end  */

:root {
  --litepickerDayIsStartBg: #87c359 !important;
  --litepickerDayIsInRange: #d3e377 !important;
  --litepickerDayIsEndBg: #87c359 !important;
  --litepickerDayColorHover: #87c359 !important;
  --litepickerMonthButtonHover: #a2e270 !important;
}
.litepicker .container__months .month-item-header div>.month-item-year {
  padding: 5px 0px !important;
}
#litepicker{width: 200px;}
.date-picker{position: relative;}
.date-picker svg{
  position: absolute;
  top: 0px;
  right: 10px;
  width: 20px;
  height: 20px;
  fill: #5d5d5d;
}

/** common **/
.content{
  display: flex;
  flex-flow: column;
  position: relative;
  height: 100%;
  margin: 0 auto;
  padding: 40px 40px 40px 290px;
}
.content h2{
  margin: 0px 0px 40px;
  font-size: 35px;
  font-weight: 300;
  border-bottom: 1px solid #ccc;
}
.content h2.padded span{padding-left: 40px;}
.content .back-button{
  position: absolute;
  top: 40px;
  left: 290px;
}
.content .back-button svg{width: 16px;height: 25px;fill: #5d5d5d;transition: all 0.2s ease-in-out;}
.content .back-button:hover svg{opacity: 0.8;}

.scrollable{
  display: flex;
  flex-flow: column;
  max-width: 100%;
  height: 100%;
  margin-top: 20px;
  overflow: auto;
}
.scrollable::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
	border-radius: 0px;
	background-color: #F5F5F5;
}

.scrollable::-webkit-scrollbar{
  margin-top: 10px;
	width: 10px;
  height: 10px;
	background-color: #F5F5F5;
}

.scrollable::-webkit-scrollbar-thumb{
	border-radius: 0px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background: rgb(197,216,53);
	background: linear-gradient(135deg, #5d5d5d 0%,#a8a8a8 100%);
}

.form-error{margin-left: 120px;color: #ff4e4e;}

input{
  margin: 0px;
  padding: 5px 10px;
  font-family: 'Noto Sans KR', sans-serif;
  border: none;
  border-radius: 4px;
  border: 1px solid #ececec;
  outline: 0;
}

textarea{
  margin: 0px;
  padding: 5px 10px;
  font-family: 'Noto Sans KR', sans-serif;
  border: none;
  border-radius: 4px;
  border: 1px solid #ececec;
}

select{
  margin: 0px;
  padding: 5px 10px;
  font-family: 'Noto Sans KR', sans-serif;
  border: none;
  border-radius: 4px;
  border: 1px solid #ececec;
}
select::-ms-expand {background: none;border: none;}

.btn{text-align: center;}
.btn-default{
  border: none;
  padding: 8px 30px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #bde274;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.btn-default:hover{cursor: pointer;background: #dde69e;}
.btn-secondary{
  border: none;
  padding: 8px 30px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #5d5d5d;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.btn-secondary:hover{cursor: pointer;background: #757474;}
.btn-default.small{
  padding: 5px 25px;
  font-size: 14px;
  font-weight: 700;
}
.btn-secondary.small{
  padding: 5px 25px;
  font-size: 14px;
  font-weight: 700;
}

.form-label{
  display: inline-block;
  position: relative;
  width: 120px;
  font-weight: 700;
  vertical-align: middle;
}
.form-label.top{vertical-align: top;}
.form-label.required:before{
  content: '*';
  position: absolute;
  top: 0px;
  left: -10px;
  color:red;
}

.sbl-circ {
  height: 28px;
  width: 28px;
  margin: 0px 34px -8px;
  color: #5a5a5a;
  position: relative;
  display: inline-block;
  border: 3px solid;
  border-radius: 50%;
  border-top-color: #e0e0e0;
  animation: rotate 1s linear infinite; }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg);
  }
}

table#results{
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  border-collapse: collapse;
  border: 1px solid #5d5d5d;
}
table#results th{
  position: sticky;
  top: 0px;
  padding: 5px 10px;
  font-size: 12px;
  color: #5d5d5d;
  border: 1px solid #5d5d5d;
  background: #f3f3f3;
  white-space:nowrap;
}
table#results th:first-child{text-align: left;}
table#results td{
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid #000;
  background: #fff;
  white-space:nowrap;
  transition: background 0.2s ease-in-out;
}
table#results td.disabled{background: #c1c1c1;}
table#results tr.warning td{background: #e8c997;}

.overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.3);
  z-index: 1000;

  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.overlay.open{visibility: visible;opacity: 1;}
.overlay .popup{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  padding: 40px 50px 40px;
  border-radius: 4px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.overlay .popup .close{
  position: absolute;
  top: 20px;
  right: 20px;
}
.overlay .popup .close svg{width: 20px;height: 20px;transition: all 0.2s ease-in-out;}
.overlay .popup .close:hover svg{transform: scale(1.1);}
.overlay .popup p{margin: 30px 0px 30px;font-size: 16px;font-weight: 400;}
.overlay .popup .actions{text-align: center;}
/** common end **/

/* gnb */
.gnb{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 100%;
  background: rgb(197,216,53);
  background: linear-gradient(19deg, rgba(118,216,53, 0.7) 0%, rgba(197,216,53,0.6587009803921569) 100%);
  z-index: 100;
  box-shadow: 2px 2px 25px 2px rgba(0,0,0,0.08);
}
.gnb h1{
  margin: 20px 0px 0px;
  padding-left: 15px;
  font-family: 'Roboto';
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
}
.gnb h2{
  margin: 0px 0px 20px;
  padding-left: 20px;
  font-family: 'Roboto';
  font-size: 14px;
  font-weight: 900;
  color: #abb74e;
  text-transform: uppercase;
}
.gnb ul{
  margin: 0px;
  padding: 0px;
}
.gnb ul li{list-style-type: none;}
.gnb > ul.depth-1 > li{
  padding: 10px 0px 10px 20px;
  font-size: 22px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}
.gnb > ul.depth-1 > li.active{background: #cad66e;}
.gnb > ul.depth-1 > li svg{
  width: 20px;
  height: 20px;
  margin-right: 10px;
  fill: #5d5d5d;
}
.gnb > ul.depth-1 > li > ul.depth-2 > li{
  padding: 4px 0px 4px 20px;
  font-size: 16px;
  font-weight: 700;
  opacity: 0.35;
  transition: all 0.2s ease-in-out;
}
.gnb > ul.depth-1 > li > ul.depth-2 > li.active{opacity: 0.8;}
.gnb > ul.depth-1 > li > ul.depth-2 > li:hover{transform: translateX(5px);opacity: 0.8;}

.beaconStatus{
  position: absolute;
  left: 20px;
  bottom: 130px;
  font-size: .6rem;
}
.beaconStatus .status{
  fill: #000;
  transition: all 30s ease;
}
.beaconStatus .status.active{
  fill: #0f0;
  transition: all 0s ease;

}
.logout{
  position: absolute;
  left: 20px;
  bottom: 30px;
}
.logout a{
  display: inline-block;
  font-weight: 700;
  border-bottom: 1px solid #5d5d5d;
  opacity: 0.8;
}
.logout a:hover{opacity: 1;}
/* gnb hand */

/* manager login */
.manager-login{
  padding: 0px;
  color: #fff;
  text-align: center;
  background: rgb(197,216,53);
  background: linear-gradient(19deg, rgba(118,216,53, 0.7) 0%, rgba(197,216,53,0.6587009803921569) 100%);
}
.manager-login .box{
  position: absolute;
  top: 45%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.manager-login h2{
  margin: 0px 0px 10px;
  font-size: 50px;
  border: none;
}
.manager-login h3{
  margin: 0px 0px 80px;
}
.manager-login .form-group{
  width: 250px;
  margin: 0 auto;
}
.manager-login .form-group input{width: 100%;}
.manager-login .form-group button{width: 100%;}

.manager-login .error{
  display: none;
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: #e46e68;
}
/* manager login end */

/* manager list */
.manager-list .new-manager{
  margin: 0px 0px 20px auto;
  width: 150px;
}
/* manger list end */

/* member registration */
.new-member input{margin-right: 10px;}

.new-member .dob-extra input.year{width: 110px;}
.new-member .dob-extra input.month{width: 50px;}
.new-member .dob-extra input.day{width: 50px;}

.new-member .phone input{width: 100px;}
.new-member input.phone-area{width: 50px;}

.new-member .parent-phone input{width: 100px;}
.new-member input.parent-phone-area{width: 50px;}

.new-member .remark textarea{width: 270px;height: 100px;resize: none;}

.new-member input.school{width: 110px;}
.new-member input.grade{width: 50px;}
/* member registration end */

/* members list and data */
.members table#results td:first-child{width: 90px;text-align: center;}
.members table#results td:nth-child(4){width: 40px;text-align: center;}
.members table#results td:nth-child(5){width: 40px;text-align: center;}
.members table#results td:nth-child(6){width: 90px;}
.members table#results td:last-child{width: 100px;}

.members table#results td:not(.unselectable):hover{cursor: pointer;}
.members table#results tr:hover td{background: #ececec;}
/* members list and data end */

/* member detail */
.content.member-detail h2{
  margin: 0px 0px 40px;
  font-size: 35px;
  text-align: center;
  text-transform: uppercase;
  border: none;
}
.member-detail .info{
  display: inline-block;
  margin: 0px;
  font-size: 18px;
  font-weight: 400;
  color: #a0a0a0;
}
.member-detail .info span{margin: 0px 10px;}
.member-detail .overview{margin: 0px 0px 50px;text-align: center;}
.member-detail .overview .box{display: inline-block;margin: 0px 20px 0px;}
.member-detail .overview .box span{display: block;font-size: 14px;font-weight: 400;}

.member-detail .overview .box span.big{
  font-size: 30px;
  font-weight: 700;
  color: #bde274;
}
/* member detail end */

/* data overview */
.overview h3{
  margin: 20px 0px 10px;
  font-size: 25px;
}
.overview p.info{
  font-size: 16px;
  line-height: 40px;
}
.overview p.info span{
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid #ccc;
}
/* data overview end */

/* usage data */
.revisit-data{
  font-size: 18px;
  font-weight: 700;
  color: #a2a2a2;
}
.revisit-data .percentage{
  font-size: 22px;
  font-weight: 700;
  color: #5d5d5d;
}
/* usage data end */

/* ranking data */
.ranking table#results th:first-child {text-align: center;}
/* ranking data end */