@charset "utf-8";

html, body {
    font-family: Pretendard Variable,Pretendard,Avenir,Helvetica,Arial,sans-serif; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
	width: 100%;
    height: 100%;
    min-width: 360px;
}

html {overflow: hidden; overflow-y: auto; -webkit-text-size-adjust: none; text-size-adjust: none;}
body {background: #fff;padding: 0;margin: 0;position: relative;}

.beta_icon {position: relative;display: inline-block;height: 20px;line-height: 20px;vertical-align: middle;color: #9C27B0;border: 1px solid #9C27B0;border-radius: 30px;padding: 0 8px;font-style: italic;font-size: 13px;font-weight: bold;margin-top: -4px;align-self: center; margin-left: 5px;}
.beta_icon:before {content:"Beta"}


/*----------------------------------------------------------------
    해더
----------------------------------------------------------------*/

#hd {position: relative;background-color:#fff;height: 56px;border-bottom: 1px solid #ccc;}
#hd .hd_wr {display: flex; justify-content:space-between;}
#hd .leftmenu {display: block;width: 200px;text-align: left;line-height: 56px;padding: 0 20px;}

#hd .btn-back {display: inline-block;font-size: 2rem;text-align: center;line-height: 1.5rem;padding: 0;border: 0;}
#hd .logo {position: relative;margin: 0;width: auto;height:auto;max-height: 26px;line-height: 56px;vertical-align: middle;margin-right: 5px;align-self: center;}
/*
#hd .time {display: inline-block;vertical-align: middle;}
#hd .time i {display: inline-block;font-size: 1.2rem;color: #999;vertical-align: middle;margin-right: 5px;}
#hd .time #nowTime {display: inline-block;vertical-align: middle;font-size: 1.5rem;color: #999;}*/
#hd .title {display: flex;width: calc(100% - 400px);font-size:1.7rem;vertical-align: middle;line-height: 56px;white-space: nowrap;justify-content: center;padding: 0;}
#hd .title span {display: inline-block;height: 56px;}
#hd .title span.stName {color: #888;margin-right: 10px;height: 56px;display: block;}

#hd .rightmenu {display: block;width: 200px;text-align: right;}
#hd .rightmenu .btn_close {display: inline-block;width: auto;height: 56px;font-size: 1.2rem;text-align: center;line-height: 1.5rem;padding: 0 20px;border: 0;color: #999;font-weight: 300;}
 

@media (max-width:1204px) {
    #hd .logo {display: none;}
}

@media (max-width:768px) {    
}

@media (max-width:576px) {  
    #hd .title {position: absolute;left: 10px;width: calc(100% - 50px);font-size: 1.3em;overflow: hidden;text-overflow: ellipsis;justify-content: flex-start;white-space: nowrap;}
    #hd .title span {display: block; text-align: left;}
    #hd .leftmenu {padding: 0 10px;padding-left: 10px;width: 56px;}
    #hd .rightmenu {width: 56px;}
    #hd .rightmenu .btn_close {padding: 0; padding-right: 10px;}
    #hd .rightmenu .btn_close span {display: none;}
}


/*--------------------------------------------------------- 
    모달
---------------------------------------------------------*/
.modal {height: 100%;}
.modal-dialog {width: 100%;max-width: 100%;min-width: 320px;height: 100%;padding: 30px;margin: 0;}

.modal-header {padding: 10px 20px;}
.modal-header .modal-title {font-size: 1.6rem;}
.modal-header .btn-close {padding: 0;margin: 0;background-size: 1.3em;font-size: 1.8rem;}

.modal-body {padiing:30px;}
.modal-body > div {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));grid-gap: 10px;min-height: 45px;}

#classList {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
#conceptList {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
#studentList {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}

.modal_item {position: relative;}
.modal_item.modal_item label {display: flex;border: 2px solid #ccc;font-size: 1.3rem;border-radius: 5px;padding: 10px 15px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;color:#333;white-space: nowrap;display: list-item;line-height: 1.3;display: -webkit-box;}
.modal_item label span {display: inline-block;font-weight: 300;}

.shottime {position: absolute;width: auto;color: #d93d49;display: block;text-align: center;font-size: 11px;line-height: 16px;font-weight: 400;top: -8px;left: 50%;transform: translateX(-50%);white-space: nowrap;border-radius: 10px;background: #ffdfe1;margin: 0;min-width: 120px;}
.shottime.absent {width: 30px;min-width: 30px;height: 30px;line-height: 30px;border-radius: 50%;display: block;text-align: center;font-size: 13px;font-weight: 400;top: 10px;right: 10px;left: auto;transform: translate(0, 0);background: #673AB7;color: #fff;}
.shottime.transper {width: 30px;min-width: 30px;height: 30px;line-height: 30px;border-radius: 50%;display: block;text-align: center;font-size: 13px;font-weight: 400;top: 10px;right: 10px;left: auto;transform: translate(0, 0);background: #4CAF50;color: #fff;}

.list_empty {font-size: 1.1em;position: absolute;width: calc(100% - 30px);line-height:45px;color: #8b8b8b;}

@media (max-width:576px) { 
    .modal-dialog {padding: 10px;}

    .modal-header .modal-title {font-size: 1.3rem;white-space: nowrap;width: calc(100% - 30px);overflow: hidden;text-overflow: ellipsis;text-align: left;}
    .modal-header .btn-close {font-size: 1.3em;}
    .modal-header {padding:7px 10px;}
    .modal-body {padding: 10px;}
    .modal_item {grid-gap: 5px;}
}
@media (max-width:375px) {  
    .modal-body label {width: 100%;}
}