/***** main-con *****/
.card{background-color: #fff;border-radius: 5px;box-shadow: 0px 0px 12px -2px rgba(0, 0, 0, .1);}
.card-tab{margin: 0;padding: 0 15px;border-bottom: 1px solid rgba(0, 0, 0, .15) !important;}
.card-tab li{border: 0;}
.card-tab a{padding: 20px 0;border: 0 !important;background-color: transparent !important;}
.card-body > div{overflow: initial;}
.main-con{height: calc(100vh - 150px);}
.main-con .left-con, .main-con .right-con{height: calc(100vh - 190px);}

/*** left-con ***/
/* notifications */
.noti table{width: 100%;border-collapse: collapse;border-spacing: 0;table-layout: fixed;}
.noti table tr th, .noti table tr td{padding-bottom: 16px;}
.noti table tr:last-child th, .noti table tr:last-child td{padding-bottom: 0;}
.noti table a{display: block;}
.noti .day{padding: 5px 15px 10px;width: 70px;height: 70px;line-height: 35px;font-size: 35px;font-weight: 700;border: 1px solid #eee;border-radius: 5px;}
.noti .day span{display: block;margin-top: 3px;line-height: 15px;font-size: 10px;font-weight: 500;color: #242424;opacity: .5;}
.noti .tit{font-size: 18px;font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 5px;}
.noti .sub{font-size: 12px;font-weight: 500;opacity: .5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 2.4em;line-height: 1.2;}

/* milestone */
.ms .card-body{padding-right: 5px;height: calc(100% - 60px);}
.ms .fClr:first-child .fLeft:before{content: "";display: block;position: absolute;top: -20px;right: -1px;width: 1px;height: 285px;background-color: #eee;}
.ms .fClr:last-child .fRight:after{content: "";display: block;position: absolute;bottom: -20px;left: -1px;width: 1px;height: 20px;background-color: #eee;}
.ms .fLeft{position: relative;width: 80px;height: 30px;line-height: 30px;font-size: 20px;font-weight: 700;}
.ms ul{position: relative;padding-bottom: 30px;width: calc(100% - 80px);border-left: 1px solid #eee;}
.ms ul:before{content: "";display: block;position: absolute;bottom: 7px;left: -8px;width: 16px;height: 16px;border-radius: 50%;background-color: #fff;border: 2px solid #d3d3d0;box-sizing: border-box;}
.ms ul li{position: relative;padding-left: 30px;line-height: 30px;}
.ms ul li:before{content: "";display: block;position: absolute;top: 7px;left: -8px;width: 16px;height: 16px;border-radius: 50%;background-color: #d3d3d0;}
.ms ul li b{margin-right: 10px;font-weight: 700;color: #888;}
.ms ul li span{display: inline-block;line-height: initial;font-size: 12px;opacity: .5;}

/* calendar */
.cal .toolbar{display: flex;justify-content: space-between;padding: 0 40px;width: calc(100% - 150px);font-weight: 700;}
.cal .toolbar a, .cal .toolbar .date .year{color: #888;}
.cal .toolbar .btns a{margin-right: 30px;line-height: 30px;font-size: 14px;}
.cal .toolbar .btns a:last-child{margin-right: 0;}
.cal .toolbar .date{display: flex;height: 30px;}
.cal .toolbar .date p{margin: 0 15px;}
.cal .toolbar .date span{line-height: 26px;font-size: 22px;}
.cal .toolbar .date a{text-align: center;}
.cal .toolbar .date i{position: relative;font-size: 20px;color: #242424;}
.cal .toolbar .date i:before{content: "";display: block;position: absolute;top: 5px;left: 5px;width: 20px;height: 20px;border: 1px solid #242424;border-radius: 50%;}
.cal .card-body{padding: 0;height: calc(100% - 60px);}
.cal table{width: 100%;height: 100%;}
.cal tr th{height: 40px;background-color: #f9f9f9;}
.cal tr td{padding: 0;height: calc((100% - 40px) / 5);text-align: right;vertical-align: top;font-weight: 500;border-right: 2px solid #dedede;}
.cal tr th, .cal tr td{font-size: 12px;color: #19258d;border-bottom: 2px solid #dedede;}
.cal tr th:first-child, .cal tr td:first-child{color: #e35327;}
.cal tr th:last-child, .cal tr td:last-child{color: #0091fe;border-right: none;}
/* .cal tr:last-child td{border-bottom: none;} */
.cal table .relative{min-height: 100%;color: inherit;}
.cal table .day-top{padding: 5px 10px 2px;color: inherit;}
.cal table .day-event{left: 0;right: 0;margin: 0 5px;padding: 2px 5px;text-align: left;color: #fff;background-color: #d3d3d0;}
.cal table .blue{background-color: #0091fe;}
.cal table .green{background-color: #2aa433;}
.cal table .purple{background-color: #5333ae;}
.cal table .days2{width: calc(200% - 8px);}
.cal table .days3{width: calc(300% - 6px);}
.cal table .days4{width: calc(400% - 4px);}
.cal table .days5{width: calc(500% - 2px);}

/*** right-con ***/
/* my desk */
.mdsk .card-body div{width: calc(100% / 4);text-align: center;}
.mdsk .card-body div i{display: block;line-height: 25px;opacity: .5;}
.mdsk .card-body div b{line-height: 50px;font-size: 35px;font-weight: 700;}
.mdsk .card-body div p{line-height: 25px;font-size: 14px;font-weight: 500;opacity: .5;}

/* to do */
.todo{height: calc(100% - 220px);}
.todo .card-body{padding: 0;height: calc(100% - 60px);}
.todo ul li{position: relative;padding: 20px 5px 20px 35px;border-bottom: 1px solid #eee;}
.todo ul li:last-child{border-bottom: none;}
.todo ul li:before{content: "";display: block;position: absolute;top: 25px;left: 0;width: 12px;height: 20px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;}
.todo ul li.gray:before{background-color: #d3d3d0 !important;}
.todo ul li.pink:before{background-color: #ff8888 !important;}
.todo ul li.green:before{background-color: #94dd9e !important;}
.todo ul li.yellow:before{background-color: #f4e916 !important;}
/* //Customize the label (inp-check) */
.inp-check{display: block;position: relative;padding-left: 35px;margin-bottom: 4px;cursor: pointer;font-size: 18px;font-weight: 700;}
.inp-check input{position: absolute;top: 6px;left: 2px;height: 16px;width: 16px;}
.checkmark{position: absolute;top: 4px;left: 0;height: 20px;width: 20px;border-radius: 2px;background-color: #fff;}
.checkmark:after{content: "";position: absolute;display: none;}
.inp-check input:checked ~ .checkmark:after{display: block;}
.inp-check .checkmark:after{left: 5px;top: 0px;width: 7px;height: 12px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.inp-check input:disabled ~ .checkmark, .gray .checkmark{border:2px solid #d3d3d0;}
.inp-check input:disabled:checked ~ .checkmark, .gray .inp-check input:checked ~ .checkmark{background-color: #d3d3d0 !important;}
.gray .inp-check{color: #888;}
/* //inp-check */
.todo img{width: 40px;height: 40px;object-fit: cover;border-radius: 50%;}
.todo p{margin-bottom: 12px;padding-left: 35px;font-size: 12px;opacity: .5;}
.todo .flex{align-items: center;padding-left: 35px;}
.todo .flex span{display: inline-block;font-size: 14px;font-weight: 500;opacity: .5;}
.todo .flex span.name{margin-left: 10px;width: 60px;font-weight: 700;}
.todo .flex i{margin-right: 5px;opacity: .5;}

/* activities */
.act{background-color: #f9fafc;}
.act .card-header, .act .card-tab{background-color: #fff;}
.act .card-tab{padding: 0 30px;justify-content: space-between;}
.act .card-body{position: relative;padding-right: 5px;padding-bottom: 0;height: calc(100% - 120px);}
.act .card-body > div:before{content: "";display: block;position: absolute;top: 0;left: 38px;width: 4px;height: 20px;background-color: #eee;}
.act .log{position: relative;padding: 45px 0 20px;}
.act .log:before{content: "";display: block;position: absolute;top: 0;left: 18px;width: 4px;height: 100%;background-color: #eee;}
.act .log .day{display: inline-block;position: absolute;top: 0;left: 0;padding: 8px 15px;font-size: 14px;font-weight: 700;color: #fff;border-radius: 5px;}
.act .log .fClr{margin-top: 10px;}
.act .log img{position: absolute;left: 0;width: 40px;height: 40px;object-fit: cover;border-radius: 50%;}
.act .log i{opacity: .5;}
.act .log .fRight{padding-top: 20px;padding-bottom: 0;width: calc(100% - 50px);font-weight: 700;background-color: #fff;border-radius: 5px;box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.1);}
.act .log .fRight > p{padding: 0 20px;font-size: 14px;opacity: .5;}
.act .log .flex{align-items: flex-end;padding: 0 20px;margin-bottom: 20px;}
.act .log .file{display: flex;align-items: center;flex-flow:wrap;}
.act .log .file i{font-size: 22px;}
.act .log span{line-height: 30px;}
.act .log .tit{margin-right: 5px;font-size: 18px;}
.act .log .time{display: flex;align-items: center;margin-left: auto;font-size: 12px;opacity: .5;}
.act .log .time i{opacity: 1;}
.act .log .sub-box{padding: 20px;border-top: 1px solid #eee;}
.act .log .sub{font-size: 14px;font-weight: 500;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 2.4em;line-height: 1.2;}

/*** evaluation ***/
.card-body.eval{display: flex;padding: 10px;max-height: calc(100% - 60px);}
.tbl:has(.eval) .card-body .tb_stky{overflow: auto;}
.tbl:has(.eval) .card-body table.ico{height: 100%;min-height: 265px;}
.tbl:has(.eval) .card-body table.ico td{padding: 20px;height: 50%;}
.tbl:has(.eval):nth-child(2){height: calc(100vh - 570px);}
.eval .wp20, .eval .wp40{max-height: 280px;}
.eval .wp20 canvas{margin: 0 auto;max-width: 100%;/* border: 1px solid rgba(0, 0, 0, .15); */}
.eval progress{margin-top: 5px;width: 100%;height: 20px;appearance: none;}
.eval progress::-webkit-progress-bar{background-color: #eee;border-radius: 0;}
.eval progress::-webkit-progress-value{background-color: #1676da;}
.eval .ico p{padding-top:10px;font-size: 20px;}
.eval .ico strong{margin-right: 5px;line-height: 70px;font-size: 50px;}
.eval .ico i{padding: 25px;font-size: 50px;color: #2f93f2;background-color: #e6f5ff;border-radius: 50%;}

/***** login-con *****/
/*** container ***/
#wrap:has(.login-con){background: linear-gradient(to right, #033d6b 50%, #fff 50%);}
#wrap:has(.login-ctr){background-color: #273648;}
.container:has(.login-con){background: url(../images/ico_logo1.png) center 6% no-repeat;}
.container:has(.login-ctr){padding: 0;background: url(../images/ico_logo3.png) 20px 20px no-repeat;}
.circle{position: absolute;top: 25%;left: 50%;transform: translateX(-50%);padding-top: 70px;width: 190px !important;height: 190px;text-align: center;font-size: 32px;color: #fff;background-color: #273648;background-repeat: no-repeat;background-position: center 30%;border: 18px solid #fff;border-radius: 50%;z-index: 100;}
.circle.c1{background-image: url(../images/icon_log.png);}
.circle.c2{background-image: url(../images/icon_acc.png);font-size: 28px;}

/*** content ***/
.content.login-con{position: absolute;top: 40%;left: 50%;transform: translateX(-50%);margin-left: 0;padding: 0;max-width: 1440px;height: auto;min-height: unset;background-color: unset;}
.content.login-ctr{position: absolute;top: calc(25% + 95px);/* bottom: 40px; */transform: translateY(0);margin: 0;padding: 0;display: initial;width: 100%;max-width: unset;height: calc((100% / 5)*3);min-height: unset;background: #f4f4f4 url(../images/bg_login.png) no-repeat 50% 50%;}
.login-con .left-con, .login-con .right-con{max-width: 530px;}
.login-con .card{box-shadow: unset;}
.login-con .card, .login-con .card-header{background-color: unset;}
.login-con .card-header, .login-con .card-body{padding: 0;}
.login-con .card-header{border-bottom: 0;}
.login-con .card-header i{margin-right: 15px;width: 35px;line-height: 35px;background-color: #fff;border-radius: 50%;}
.login-con .card-header span{font-size: 35px;font-weight: 500;}

/*** left-con  ***/
.login-con .left-con .cols{margin: 20px 0;}
.login-con .left-con .rows:has(input){width: calc(100% - 140px);justify-content: space-between;}
.login-con .left-con i{line-height: inherit;}
.login-con .left-con p, .login-con .left-con span{color: #fff;}
.login-con .left-con .card-body p, .login-con .left-con .card-body span{line-height: 24px;}
.login-con .left-con .card-body span{display: inline-block;font-size: .75em;}
.login-con .left-con .card-body button[type="button"]{min-height: 24px;font-size: .75em;}
.login-con .left-con .card-body button.btn-login{width: 115px;height: 115px;font-size: 24px;color: #373737;background-color:#e8fbff;border: 0;border-radius: 50%;}
.login-con .left-con .card-body input{padding: 0 10px;width: 100%;height: 45px;font-size: 15px;background-color: #fff;border: 0;border-radius: 2px;}

/*** right-con  ***/
.login-con .right-con i{color: #fff;background-color: #033d6b;}
.login-con .right-con li{position: relative;margin-top: 20px;padding-left: 30px;width: 80%;line-height: 20px;font-size: 18px;color: #373737;}
.login-con .right-con li:before{content:"\ef71";display:block;position:absolute;top:50%;left:0;margin-top:-10px;font-family: 'Material Symbols Rounded';font-size: 20px;}

/*** center-con ***/
.login-ctr .center-con{margin: 160px auto 0;width: 490px;align-items: center;}
.login-ctr .center-con input, .login-ctr .center-con button{height: 48px;font-size: 20px;border-radius: 18px;}
.login-ctr .center-con input{position: relative;padding: 0 55px;background-color: #fff;background-repeat: no-repeat;background-position: 20px center;border: 1px solid #273648;}
.login-ctr .center-con input::placeholder{color: #aaa;}
.login-ctr .center-con input.inp_id{background-image: url(../images/icon_id.png);}
.login-ctr .center-con input.inp_pw{background-image: url(../images/icon_pw.png);}
.login-ctr .center-con input.inp_cd{background-image: url(../images/icon_cd.png);}
.login-ctr .center-con button.btn-login{color: #fff;background-color: #273648;border: 0;}
.login-ctr .center-con.rows{padding: 0 20px;}
.login-ctr .center-con.rows input{width: 100%;}
.login-ctr .center-con.rows button.btn-login{margin-top: 60px;width: 100%;}
.login-ctr .center-con.cols input{width: 300px;}
.login-ctr .center-con .pw_show, .login-ctr .center-con .pw_off{top: 9px;right: 15px;display: block;width: 20px;height: 20px;font-size: 0;background-repeat: no-repeat;background-position: center;border: 0;z-index: 10;}
.login-ctr .center-con .pw_show{background-image: url(../images/icon_eye.png);}
.login-ctr .center-con .pw_off{background-image: url(../images/icon_eye_off.png);}

/* scrollbar */
.card-body::-webkit-scrollbar{width: 15px;}
.card-body::-webkit-scrollbar-thumb{background-color: #d71a21;border-radius: 100px;background-clip: padding-box;border: 5px solid transparent;}
.card-body::-webkit-scrollbar-track{background-color: transparent;}