/* button */
.btn-cnt {margin-top: 3rem; display: flex; justify-content: center; align-items: center; gap: 0 1.2rem;}
a[class^="bt-"], button[class^="bt-"] {padding: var(--btn-py) var(--btn-px); display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); border-radius: var(--radius-6); font-weight: 500; border: 1px solid; line-height: 1;}
a[class^="bt-"] i[class^="ico-"], button[class^="bt-"] i[class^="ico-"] {width: 2rem; height: 2rem;}
a[class^="bt-"]:hover {text-decoration: none;}
/* button : color */
.col-bl {--btn-c: var(--btn-bl); --btn-bg: var(--btn-bl-bg); --btn-h: var(--btn-bl-hover); --btn-br: var(--btn-bl);}
.col-pink {--btn-c: var(--btn-pk); --btn-bg: var(--btn-pk-bg); --btn-h: var(--btn-pk-hover); --btn-br: var(--btn-pk);}
.col-green {--btn-c: var(--btn-gn); --btn-bg: var(--btn-gn-bg); --btn-h: var(--btn-gn-hover); --btn-br: var(--btn-gn);}
.col-gr {--btn-c: var(--btn-gr); --btn-bg: var(--btn-gr-bg); --btn-h: var(--btn-gr-hover); --btn-br: var(--btn-gr);}
.col-dg {--btn-c: white; --btn-bg: var(--btn-gr-dark-bg); --btn-h: var(--btn-gr-dark-hover); --btn-br: transparent;}
.col-db {--btn-c: white; --btn-bg: var(--btn-bl); --btn-h: var(--btn-bl-dark); --btn-br: transparent;}
/* button : style */
a[class*="-line"], button[class*="-line"] {color: var(--btn-c); background-color: var(--btn-bg); border: 1px solid var(--btn-br);}
a[class*="-line"]:hover, button[class*="-line"]:hover {background-color: var(--btn-h);}
a[class*="-fill"], button[class*="-fill"] {color: var(--btn-c); background-color: var(--btn-bg); border: 1px solid var(--btn-br);}
a[class*="-fill"]:hover, button[class*="-fill"]:hover {background-color: var(--btn-h);}
/* button : size */
a[class*="-lg"], button[class*="-lg"] {width: 18rem; height: var(--btn-h60); font-size: var(--fs20);}
a[class*="-mid"], button[class*="-mid"] {height: var(--btn-h36); font-size: var(--fs16);}
a[class*="-sm"], button[class*="-sm"] {height: var(--btn-h32); font-size: var(--fs15);}
/* button : icon */
a[class^="bt-"] .ico-plus, button[class^="bt-"] .ico-plus {width: 2.1rem; height: 2.1rem; background-image: url(/images/dgedu/template/TI01/common/ico_plus_white.png);}
a[class^="bt-"] .ico-check, button[class^="bt-"] .ico-check {background-image: url(/images/dgedu/template/TI01/common/ico_check.png);}
a[class^="bt-"] .ico-arr-right, button[class^="bt-"] .ico-arr-right {background-image: url(/images/dgedu/template/TI01/common/ico_arrow_right.png);}
a[class^="bt-"] .ico-clock, button[class^="bt-"] .ico-clock {background-image: url(/images/dgedu/template/TI01/common/ico_clock.png);}
a[class^="bt-"] .ico-checkit, button[class^="bt-"] .ico-checkit {background-image: url(/images/dgedu/template/TI01/common/ico_checkit.png);}
a[class^="bt-"] .ico-down, button[class^="bt-"] .ico-down {background-image: url(/images/dgedu/template/TI01/common/ico_down.png);}
a[class^="bt-"] .ico-upload, button[class^="bt-"] .ico-upload {background-image: url(/images/dgedu/template/TI01/common/ico_upload.png);}
a[class^="bt-"] .ico-monitor, button[class^="bt-"] .ico-monitor {background-image: url(/images/dgedu/template/TI01/common/ico_monitor.png);}
a[class^="bt-"] .ico-power, button[class^="bt-"] .ico-power {background-image: url(/images/dgedu/template/TI01/common/ico_power.png);}
a[class^="bt-"] .ico-print, button[class^="bt-"] .ico-print {background-image: url(/images/dgedu/template/TI01/common/ico_print_b.png);}

@media (max-width: 767px) { 
    a[class*="-lg"], button[class*="-lg"] {width: 50%; height: 4.8rem; font-size: var(--fs16);}
    a[class*="-mid"], button[class*="-mid"] {width: 100%; height: 4rem;}
    a[class*="-sm"], button[class*="-sm"] {width: 50%; height: 4rem;}
}

/* site link : dropdown */
.siteLink .wrap {position: relative; width: 100%;}
.siteLink .wrap button {padding: 0 4rem 0 2rem; color: #333; background-color: white; background-image: url(/images/dgedu/template/TI01/form/ico_arrow_select_up.png); background-position: right 10px center; background-repeat: no-repeat; background-size: 15px; appearance: none; border-radius: var(--radius-6); border: 1px solid; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left;}
.siteLink .lst {display: none; width: 100%; border: 1px solid; border-radius: var(--radius-6); background-color: white; position: absolute; left: 0; z-index: 99;}
.siteLink .lst ul {max-height: 320px; padding: .5rem 0; overflow-y: auto;}
.siteLink .lst ul li a {display: block; padding: .5rem 2rem;}
.siteLink .lst ul li a:hover {color: var(--hover-color);}

/* table */
.ilt-tbl-rw, .ilt-tbl-cont {width: 100%; overflow-x: auto;}
.ilt-tbl, table[class^="cont-tbl"] {width: 100%; white-space: nowrap; border-top: 1px solid var(--tbl-top);}
.ilt-tbl th, .ilt-tbl td {padding: 1.2rem 2.4rem;}
.ilt-tbl th, table[class^="cont-tbl"] thead th {border-bottom: 1px solid var(--tbl-btm);}
.ilt-tbl td, table[class^="cont-tbl"] tbody td {border-left: 1px solid var(--tbl-body); border-bottom: 1px solid var(--tbl-body); color: var(--text-color);}
.ilt-tbl td.last {border-bottom: 1px solid var(--tbl-btm);}
.ilt-tbl b, .ilt-tbl-cont b {font-weight: 500;}

.ilt-tbl-cont {margin-top: 1rem;}
table[class^="cont-tbl"] {white-space: normal;}
table[class^="cont-tbl"] th, table[class^="cont-tbl"] td {padding: 1.2rem 1.6rem;}
table[class^="cont-tbl"] thead th {background-color: var(--tbl-thead);}
table[class^="cont-tbl"] tbody th {border-bottom: 1px solid var(--tbl-body); color: var(--primary-color);}
table[class^="cont-tbl"] tbody td {text-align: center;}
table[class^="cont-tbl"] tbody td ul {text-align: left; margin-top: 0 !important;}
table[class^="cont-tbl"] tfoot th {border-bottom: 1px solid var(--tbl-btm); color: var(--primary-color);}
table[class^="cont-tbl"] tfoot td {border-left: 1px solid var(--tbl-body); border-bottom: 1px solid var(--tbl-btm); text-align: center;}
table[class^="cont-tbl"] .last {border-bottom: 1px solid var(--tbl-btm);}
table[class^="cont-tbl"] .bg-yew {background-color: var(--tbl-yellow);}
.cont-tbl-bl tbody th {background-color: var(--tbl-tby-th); color: var(--primary-color);}
.cont-tbl-yew tbody th {background-color: var(--tbl-yellow); color: var(--text-color) !important;}

@media (max-width: 1024px) { 
    table[class^="cont-tbl"] {width: 1024px;}
}
@media (max-width: 768px) { 
    .ilt-tbl-rw .group-desktop {display: none;}
    .ilt-tbl-rw table * {display: block;}
    .ilt-tbl-rw table caption {display: none;}
    .ilt-tbl tr {overflow: hidden;}
    .ilt-tbl td {text-align: left; display: flex; border-left: 0;}
    .ilt-tbl td[data-label]::before {content:attr(data-label); display: inline-block;}
}

/* div type table */
.div-table {width: 100%; height: auto; margin-bottom: 1rem; display: flex; border-top: 1px solid var(--tbl-top); border-bottom: 1px solid var(--tbl-btm);}
.div-table .tbl-head {padding: 0 2.4rem; place-content: center; text-align: center; background-color: var(--tbl-tby-th); border-right: 1px solid var(--tbl-body); color: var(--primary-color); font-size: var(--fs20);}
.div-table .tbl-head .title {font-weight: 600;}
.div-table .tbl-body {flex: 1; width: 100%;}
.div-table .tbl-body div[class^="tbl-th"] {padding: 1.2rem 2.4rem; color: #33363d; background-color: var(--tbl-tby-th); text-align: center; font-size: var(--fs17);}
.div-table .tbl-body div[class^="tbl-td"] {padding: 1.2rem 2.4rem; color: #33363d;}
.div-table .tbl-foot {padding: 0 2.4rem; place-content: center; text-align: center; border-left: 1px solid var(--tbl-body);}
.div-table .tbl-foot .total {font-weight: 500; color: #1e2124;}
.div-table .tbl-foot .total .number {color: var(--hover-color);}
.div-table .tbl-foot.bg-yellow {background-color: var(--tbl-yellow);}

@media (max-width: 1024px) {
    .div-table {flex-wrap: wrap;}
    .div-table .tbl-head {width: 100% !important; padding: 1.2rem 0; display: flex; gap: 0 1rem; border-right: 0; border-bottom: 1px solid var(--tbl-body);}
}
@media (max-width: 768px) {
    .div-table .tbl-body div[class^="tbl-td"] {padding: 1.2rem 1.6rem;}
    .div-table .tbl-foot {width: 100% !important; padding: 1.2rem 0; border-left: 0; border-top: 1px solid var(--tbl-body);}
}

/* exam & board bar */
[class$="_bar"] {width: 100%; height: auto; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between;}
[class$="_bar"] p {font-weight: 500; font-size: var(--fs18); color: #052561;}
.exam_bar {align-items: flex-end;}
.exam_bar select, .schedule_bar select {order: 2;}
.write_bar {position: relative;}
.write_bar .bo-align {margin-right: 15rem;}
.write_bar .bt-write {position: absolute; top: 0; right: 0; padding: 0 var(--btn-px) 0 var(--btn-py);}
.schedule_bar p {font-weight: 600; font-size: var(--fs22);}

@media (max-width: 767px) { 
    .exam_bar, .schedule_bar {flex-direction: column; align-items: flex-start;}
    .exam_bar select, .schedule_bar select {width: 100%; margin-bottom: 1rem;}
    .exam_bar p, .schedule_bar p {order: 2;}
    .write_bar {flex-wrap: wrap;}
    .write_bar .bo-align {margin-right: 0;}
    .write_bar .bt-write {position: static; margin-top: 1rem;}
}

/* modal layer */
body.modal-open::before {content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); z-index: 999; pointer-events: auto;}
body.modal-open {overflow: hidden;}

.modal-layer {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; overflow-y: auto; background: white; border-radius: var(--radius-10); box-shadow: 0 0 2.7rem rgba(88, 88, 88, .3);}
.modal-layer .modal-cont {width: 100%; height: 100%;}
.modal-layer .md-tit {padding: 1.2rem 4rem; border-bottom: 1px solid var(--gray-200); font-weight: 600; font-size: var(--fs26);}
.modal-layer .modal-body {padding: 4rem;}
.modal-layer .bt-close {width: 4.8rem; height: 4.8rem; background: url(/images/dgedu/template/TI01/form/ico_close.png) center no-repeat; position: absolute; top: .8rem; right: 3rem; border: 0;}

@media (max-width: 768px) { 
    .modal-layer {width: 90%;}
}
@media (max-width: 767px) {
    .modal-layer .md-tit {font-size: var(--fs24); padding: 2rem 2.4rem; padding-right: 6rem;}
    .modal-layer .modal-body {padding: 2.4rem;}
    .modal-layer .bt-close {right: 1.5rem;}
}

/* form : input */
.inp {display: block; width: 100%; height: 4.8rem; padding: 1.2rem; font: var(--fs17); appearance:none; border: 1px solid var(--gray-900); border-radius: var(--radius-6);}
.inp[disabled] {background-color: #efefef; border: 1px solid #bdc3c8; color: var(--text-color);}

/* form : input : checkbox */
.it-check {position:relative;}
.it-check input[type="checkbox"], 
.it-radio input[type="radio"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.it-check input[type="checkbox"] + label, 
.it-radio input[type="radio"] + label {display: inline-block; position:relative; cursor: pointer; font-size:0;}
.it-check input[type="checkbox"] + label:before, 
.it-radio input[type="radio"] + label:before {content:''; display:inline-block; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; margin: -2px 8px 0 0; text-align:center; vertical-align:middle; background:url(/images/dgedu/template/TI01/form/input-checked.png) center no-repeat #fff; border: 1px solid var(--gray-900);}
.it-check input[type="checkbox"]:checked + label:before, 
.it-radio input[type="radio"]:checked + label:before {background-color:#256ef4; border-color: #256ef4;}
.it-check.check-label input[type="checkbox"] + label, 
.it-radio.radio-label input[type="radio"] + label {font-size: var(--fs17); color: var(--text-color);}
.it-check input[type="checkbox"] + label:before {border-radius: .4rem;}
.it-radio input[type="radio"] + label:before {border-radius: 100%;}

/* form : input : select */
.select {height: 4.8rem; padding: 0 4rem 0 2rem; color: #333; background-color: white; background-image: url(/images/dgedu/template/TI01/form/ico_arrow_select_down.png); background-position: right 10px center; background-repeat: no-repeat; background-size: 15px; appearance: none; border-radius: var(--radius-6); border: 1px solid var(--gray-900); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: var(--fs17);}
.select[disabled] {background-color: #efefef; border: 1px solid #bdc3c8; background-image: url(/images/dgedu/template/TI01/form/ico_arrow_select_disabled.png);}

/* form : basic */
.form-group {display: grid; row-gap: 1rem;}
div[class^="frm"], ul[class^="frm-"] {width: 100%; display: flex; align-items: center; gap: 0 .6rem; position: relative;}
div[class^="frm"] > label {flex-shrink: 0; width: 12rem; font-size: var(--fs17); color: var(--text-color);}
ul[class^="frm-"] {width: 100%; flex-wrap: wrap; gap: 1rem 2rem;}

/* form : basic : search */
.frm-sch .inp-area {width: 100%; height: 4.8rem; border: 1px solid var(--gray-900); border-radius: var(--radius-6); display: flex; align-items: center;  overflow: hidden;}
.frm-sch .inp-area input[type="text"] {flex: 1; border: 0; padding: 0 2rem; width: 100%; height: 4.8rem;}
.frm-sch .inp-area button[type="button"] {flex-shrink: 0; width: 4.8rem; height: 4.8rem; background: url(/images/dgedu/template/TI01/form/ico_sch.png) center no-repeat;}

/* form : file upload */
.file-upload {width: 100%; display: flex;}
.file-upload input[type="text"] {width: calc(100% - 9.5rem); height: 4.8rem; padding: 0 2rem; border: 1px solid var(--gray-900); border-radius: var(--radius-6) 0 0 var(--radius-6);}
.file-upload .inp-label {flex-shrink: 0; width: 9.5rem; height: 4.8rem; background-color: #6d7882; color: white; border-radius: 0 var(--radius-6) var(--radius-6) 0; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: var(--fs17);}

@media (max-width: 768px) { 
    div[class^="frm"], ul[class^="frm-"] {flex-direction: column; align-items: flex-start; gap: .6rem 0;}
}

/* form : date */
.frm-date .label {flex-shrink: 0; width: 12rem; font-size: var(--fs17); color: var(--text-color);}
.frm-date .date-group {display: flex; align-items: center; gap: 0 1rem;}
.frm-date .date-group .inp-date {display: block; width: 100%; height: 4.8rem; padding: 1.2rem; font: var(--fs17); appearance:none; border: 1px solid var(--gray-900); border-radius: var(--radius-6); background: url(/images/dgedu/template/TI01/form/ico_date.png) 95% 50% no-repeat;}

/* chips */
[class^="chips-"] {/*width: 8.5rem;*/ height: 3.6rem; padding: 0 1.8rem; display: inline-flex; align-items: center; justify-content: center;  border: 1px solid currentColor; border-radius: var(--radius-50); font-weight: 500; font-size: var(--fs16);}
.chips-uninit {color: var(--text-color);}
.chips-complet {color: var(--hover-color); background-color: var(--blue-50);}