@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

/*body { font-family: 'Nanum Gothic', sans-serif, Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }*/

/*.main-bg-color { background-color:#4e73df; }*/

.login-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-ok {
    color: #fff;
    background-color: #514674;
    border-color: #514674;
}

.fl-left { float:left; }
.fl-right { float:right; }


/*---------------------------------------------------------------------------------*/

.avatar {
    width: 100px;
    height: 100px;
    margin: 10px auto 30px;
    border-radius: 100%;
    border: 2px solid #aaa;
    background-size: cover;
    background-image: url("/img/logo.jpg");
}


/********************************************************************/
/*** Group Box ***/
div.groupbox {
    height: auto;
    margin: 2em 0 1em 0;		/* 박스 주위 여백 */
    border: 1px solid #999;		/* 박스 테두리 색 */
    padding: 0 8px;			/* 박스 여백(padding) */
}
div.groupbox h4 {
    line-height: 100%; 		/* 위쪽 테두리 선과 내용물 사이의 간격 */
    padding-left: 8px; 		/* 왼쪽 테두리 선과 라벨 사이의 간격 */
    font-size: 1em;			/* h4 태그의 텍스트 크기 지정 */
    font-weight: normal;		/* h4 태그의 텍스트 두께 지정 */
}
div.groupbox h4 span {
    background-color: #fff;		/* 배경색과 동일해야 함 */
    color: #333;			/* 라벨 텍스트 색 */
    padding: 0 4px;			/* 라벨과 좌우 선 사이의 간격 */
    position: relative;
    top: -0.5em;			/* 라벨의 상하 위치 조절 */
}
div.groupbox p {
    margin-bottom: 1em;
    line-height: 170%;
}
/*** Group Box ***/
/********************************************************************/


/********************************************************************/
/*** Schedule ***/
.schedule-warp{
    padding-right:20px;
    padding-left:20px;
    padding: 20px 20px;
    border: solid 1px #ddd;
    background-color: #f5f5f5;
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
}
.schedule{
    background-color:#fff;
}
.schedule-warp:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    border: solid 1px rgba(100,40,145,.97);
}
.schedule{
    padding:100px 0px;
    background-color: #ecedf0;
    font-family: 'Titillium Web';
}
.schedule-tag{
    color:#fff;
    background-color: #6164b2;
    padding:3px 8px;
    margin-right: 15px;
    font-family: 'Titillium Web';
    text-align: center;
}
.schedule-header span{
    display: inline-block;
    margin-right:25px;
}
.schedule-header{
    margin-bottom:80px;
}
.schedule-card{
    position: relative;
    margin-bottom: 0.7em;
}
.schedule-card:hover .insidebox {
    transform: scale(1.033);
    /* box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.schedule-card:hover:after {
    background: #8a56d1;
    width: 25px;
}
.schedule-card:after {
    height: 2px;
    width: 22px;
    background: #ddd;
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    transition: all 0.3s ease-in;
}
.insidebox {
    box-shadow: 0 0px 5px rgba(0,0,0,.07);
    background: #ffffff;
    width: 100%;
    height: auto;
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -o-flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 10px;
    color: #6164B2;
    transition: all 0.2s ease-in;
    /*justify-content: center;*/
}
.day-one{
    margin-bottom:20px;
    font-weight: bold;
    font-size: 20px;
    color: #6164B2;
}
/*** Schedule ***/
/********************************************************************/


/********************************************************************/
/*** tab ***/
.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
    border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
    margin-bottom: -1px;
}

.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
    background-color: #3071a9;
    border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
    color: #428bca;
    background-color: #fff;
    border-color: #428bca;
    border-bottom-color: transparent;
}
/*** tab ***/
/********************************************************************/


/********************************************************************/
/*** datetime ***/
.datetime {
    color: #666;
    background: #fff;
    font-family: "Segoe UI", sans-serif;
    width: 400px;
    padding: 5px 5px;
    border: 2px solid #2E94E3;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
}

.date{
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 3px;
    float: left;
    margin-left: 10px;
}

.ampm {
    color: #fff;
    background: #2E94E3;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 3px;
    padding: 0 5px;
    border-radius: 3px;
}

.arrow_button_box {
    border-radius: 4px;
    margin: 0 1em 0 1em;
    border-color: #9675ce;
    color: #9675ce;
    border: 1px solid;
    position: relative;
    display: inline-block;
    padding: 0 .6em;
    overflow: hidden;
    height: 1.9em;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.9em;
    vertical-align: top;
    font-weight: bold;
    font-family: 'Roboto', snas-serif;
}
/*** datetime ***/
/********************************************************************/


/********************************************************************/
/*** 학습관리 table ***/
#sailorTableArea {
    overflow: auto;
    height: 78vh;
}
#sailorTable {
    white-space:nowrap;
}
#sailorTable thead {
    top: 0;
    position: sticky;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}

table#evaluationTable {
    white-space:nowrap;
}
table#evaluationTable thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}

table#evaluationTable th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}
table#evaluationTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #2e94e3;
    color: #fff;
    text-align: center;
}

table#evaluationTable th:nth-child(2) {
    position: sticky;
    left: 66px;
    z-index: 1;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}
table#evaluationTable td:nth-child(2) {
    position: sticky;
    left: 66px;
    z-index: 1;
    background-color: #2e94e3;
    color: #fff;
    text-align: center;
}

table#evaluationTable th:nth-child(3) {
    position: sticky;
    left: 100px;
    z-index: 1;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}
table#evaluationTable td:nth-child(3) {
    position: sticky;
    left: 100px;
    z-index: 1;
    background-color: #2e94e3;
    color: #fff;
    text-align: center;
}

table#evaluationTable th:nth-child(4) {
    position: sticky;
    left: 165px;
    z-index: 1;
    background-color: #7ec314;
    color: #fff;
    text-align: center;
}
table#evaluationTable td:nth-child(4) {
    position: sticky;
    left: 165px;
    z-index: 1;
    background-color: #2e94e3;
    color: #fff;
    text-align: center;
}

table#evaluationTable th:nth-child(6) {
    position: sticky;
    left: 235px;
    z-index: 1;
}
table#evaluationTable td:nth-child(6) {
    position: sticky;
    left: 235px;
    z-index: 1;
    background-color: #00b0f0;
}

/*.eva_table {
    white-space: nowrap;
}

.eva_th {
    text-align: center;
    color: #FFF;
    background-color: #00b0f0;
}*/
/*** table ***/
/********************************************************************/


/********************************************************************/
/*** simple select/input ***/
.simpleSelect{
    padding: 5px 5px;
    color: #333333;
    backgroud-color: #eeeeee;
    border: 1px solid #dddddd;
    cursor: pointer;
    border-radius: 3px;
}
.simpleSelect:focus,
.simpleSelect:hover{
    outline: none;
    border: 1px solid #bbbbbb;
}
.simpleSelect option{
    background: #E9E9E9;
}

.simpleInput{
    border: 1px solid #aaa;
    border-radius: 3px;
    margin: 5px 0;
    outline: none;
    padding: 5px;
    box-sizing: border-box;
    transition: 0.3s;
}
.simpleInput:focus{
    border-color: dodgerBlue;
    box-shadow: 0 0 5px 0 dodgerBlue;
}

.evaInput {
    width: 120px;
}
/*** simple select/input ***/
/********************************************************************/


/********************************************************************/
/*** custom checkbox ***/
.lunch_bg {
    color: #fff;
    background-color: #df01d7;
}
.tui-grid-cell.lunch_bg {
    color: #fff;
    background-color: #df01d7;
}

.dinner_bg {
    color: #fff;
    background-color: #2e2efe;
}
.tui-grid-cell.dinner_bg {
    color: #fff;
    background-color: #2e2efe;
}

.lunch_checkbox div,
.dinner_checkbox div {
    margin: 2px;
    cursor: pointer;
}
.lunch_checkbox div label input[type="checkbox"],
.dinner_checkbox div label input[type="checkbox"] {
    display: none;
}
.lunch_checkbox div label span,
.dinner_checkbox div label span {
    position: relative;
    display: inline-block;
    background: #424242;
    padding: 2px 10px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    border-radius: 10px;
    font-size: 12px;
    transition: 0.5s;
    user-select: none;
    overflow: hidden;
}
.lunch_checkbox div label span:before,
.dinner_checkbox div label span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255,255,255,.1);
}
.lunch_checkbox div label input[type="checkbox"]:checked ~ span {
    color: #fff;
    background: #df01d7;
    box-shadow: 0 2px 10px #df01d7;
}
.dinner_checkbox div label input[type="checkbox"]:checked ~ span {
    color: #fff;
    background: #2e2efe;
    box-shadow: 0 2px 10px #2e2efe;
}
/*** custom checkbox ***/
/********************************************************************/



/********************************************************************/
/*** calendar number ***/
.calendar_number {
    font-size: 14px;
    margin: 0 5px 5px;
    min-width: 20px;
    padding: 2px;
    text-align: center;
    width: 25px;
    height: 25px;
}
.calendar_number .calendar_today {
    background-color: #0EB6EC;
    color: #fff;
    font-weight: 600;
    border-radius: 50%;
    padding: 2px;
}
.calendar_number .calendar_holiday {
    background-color: #ff3b30;
    color: #fff;
    border-radius: 20%;
    padding: 2px;
}
/*** calendar number ***/
/********************************************************************/

/********************************************************************/
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
    width: 27px;
    color: #337ab7;
    background-color: #fff;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */

    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
    text-indent: 0;
}
/* Hiding the checkbox, but allowing it to be focused */
/********************************************************************/

/********************************************************************/
/* 변경된 데이터 표시하기 */
.DataChanged
{
    border-color: #ff0000;
}
/********************************************************************/

/********************************************************************/
/* 형태에 따른 배경색 변경 (학습 평가 화면) */

/* 학원시간 */
.AcademyTime
{
    background-color: #ffd4f0;
}
.tui-grid-cell.AcademyTime
{
    background-color: #ffd4f0;
}

/* 등원전 */
.BeforeCome
{
    background-color: #edffd1
}
.tui-grid-cell.BeforeCome
{
    background-color: #edffd1
}

/* 미등원 */
.NotCome
{
    background-color: #ffe578;
}
.tui-grid-cell.NotCome
{
    background-color: #ffe578;
}

/* 조퇴 */
.Leave
{
    background-color: #b9beff
}
.tui-grid-cell.Leave
{
    background-color: #b9beff
}

/* 지각 */
.Late
{
    background-color: #d4f7ff;
}
.tui-grid-cell.Late
{
    background-color: #d4f7ff;
}

/* 퇴원생 */
.AOut
{
    background-color: #dddddd;
}
.tui-grid-cell.AOut
{
    background-color: #dddddd;
}
/********************************************************************/


/********************************************************************/
/* 인쇄 화면 스타일 */
@media only print {
    .no-print, .no-print * {
        display: none !important;
    }
    @page {
        margin-top: 0;
        margin-bottom: 0;
    }
    body {
        width: 210mm;
        height: 297mm;
        margin: 10mm 15mm 10mm 15mm; /* margin: auto auto; 로 자동 여백 설정도 가능 */
        -webkit-print-color-adjust: exact !important;
    }
}
/********************************************************************/


/********************************************************************/
/* 다이얼로그 팝업 스타일 */
div.Dialog {
    display:-ms-flexbox;
    display:flex;
    position:fixed;
    flex-direction:column;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1000;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    align-items:center;
    justify-content:center
}
div.Dialog.off {
    animation:dialogBackFadeOut .3s forwards
}
div.Dialog.on {
    animation:dialogBackFadeIn .3s forwards
}
div.Dialog form.dialog.lg {
    width: 90%;
}
div.Dialog form.dialog.on {
    animation: dialogFadeIn .3s forwards;
}
div.Dialog form.dialog {
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%;
    overflow-y: auto;
    border-radius: 8px;
}
div.Dialog form.dialog .header {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eceef2;
}
div.Dialog form.dialog .header .header-close, div.Dialog form.dialog .header .header-hint {
    width: 48px;
    white-space: nowrap;
}
div.Dialog form.dialog .header .header-title {
    flex: 1;
    text-align: center;
    font-size: 12px;
    min-height: 47px;
    line-height: 1.67;
    letter-spacing: -.2px;
    color: #212329;
    padding: 14px 0 5px;
}
div.Dialog form.dialog .header .header-hint {
    text-align: right;
}
div.Dialog form.dialog .header button.close {
    background-color: transparent;
    border: none;
    padding-left: 16px;
    height: 40px;
    margin-top: 3px;
    font-size: 12px;
    color: #797d8a;
    font-weight: 700;
}
div.Dialog form.dialog .wrap {
    overflow-y: auto;
    overflow-x: hidden;
    width: auto;
    position: relative;
    flex: 1;
}
div.Dialog form.dialog .footer {
    min-height: 64px;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #eceef2;
}
.Dialog .dialog .footer {
    padding: 0;
}
div.Dialog form.dialog .footer a, div.Dialog form.dialog .footer button {
    -ms-flex: 1;
    flex: 1;
}
div.Dialog form.dialog .wrap .content {
    width: auto;
    min-width: 288px;
    min-height: 120px;
    -ms-flex: 1;
    flex: 1;
    padding: 24px;
    box-sizing: border-box;
    font-size: 16px;
    display: block;
}
/********************************************************************/


/********************************************************************/
/* Toast UI Grid */
.multi-line-css {
    white-space: pre;
}
/********************************************************************/


/*******************************
* MODAL AS LEFT SIDEBAR (MENU)
*******************************/
.modal.left .modal-dialog {
    position: fixed;
    margin: auto;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left.fade .modal-dialog {
    left: 0px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

/*.modal.left.fade.in .modal-dialog {
    left: 0;
}*/
/********************************************************************/




/********************************************************************/
/* placeholder group */
.placeholder-group {
    position: relative;
}
.placeholder-input {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.placeholder-input:focus {
    color: #6e707e;
    background-color: #fff;
    border-color: #bac8f3;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(78,115,223,.25)
}
.placeholder-label {
    position: absolute;
    top: 10px;
    left: 8px;
    font-size: 14px;
    padding: 0px 5px;
    color: #666;
    transition: 0.3s;
    pointer-events: none;
}
.placeholder-input:focus + .placeholder-label,
.placeholder-input:valid + .placeholder-label {
    top: -10px;
    color: #04AA6D;
    background-color: #fff;
}