/*공통*/
.wrap_bg{width: 100%;height: 100vh;position: relative;display: table;
    background:#F4F5F7;}
.mb_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px;
    max-width: 700px; width: 100%;}
.mb_wrap .box-white{width: 100%;position: relative;margin: 0 auto; padding:80px;}
.mb_wrap .logo{text-align: center; vertical-align: middle; padding: 50px 0;}
.mb_wrap .logo h1{margin-top: 20px;}
.mb_wrap .logo h1 img{height: 70px}
.mb_wrap h2{margin-bottom: 40px;}

/* 1.1 로그인 */
.mb_wrap.login{max-width: 700px; width: 100%;}
.login_form{max-width: 400px; margin: 0 auto;}
.login_form label{display: none;}
.login_password_lost{text-align: center;}
.login_ft{text-align: center; padding:28px 0; color:#000;}
.login_ft p{font-size: 0.9em; margin-bottom: 10px; opacity: 0.5;}

/* 1.2 회원가입 */
.mb_wrap.signup{display:table-cell;position: relative;transform: unset;left: auto;top: auto;vertical-align: middle;}
.mb_wrap.signup .box-white {max-width: 1200px;}
.mb_wrap.signup .box-gray{margin: 20px auto; gap: 80px; align-items: flex-start;padding: 20px}
.sign_form{width: 100%;}


/*메인상단*/
.page-wrapper header{padding-left: 70px; transition: all 0.3s ease;}
.page-wrapper footer{padding-left: 0px; transition: all 0.3s ease;}
.page-wrapper.toggled header,
.page-wrapper.toggled footer{padding-left: 290px; transition: all 0.3s ease;}

header{position: relative; background-color: #fff;}
.tnb{padding: 26px 42px; border-bottom: 1px solid #E4E4E4;}
.tnb:after{content: ''; clear: both; display: block}
.tnb a{/*display:inline-block;*/ color: #484951; vertical-align: middle; margin-right: 20px; font-size: 1.1em;}
.tnb a:last-child{margin-right: 0;}
.tnb a img{margin-right:6px; vertical-align: middle; margin-bottom: 2px;   max-width: 18px;}

/*카피라이터*/
footer{background-color: #F6F6F6; opacity: 0.5;}
footer .copy{padding: 26px 42px;}
footer h1{color: #78787B; font-weight: 600; margin-bottom: 6px;}
footer .copy li{display: inline-block; color: #78787B;;}


.title_wrap{margin-bottom: 30px;}
.title_wrap h2{cursor: pointer; width: max-content;}
.title_wrap .icon{margin-left: 10px; padding-left: 12px; padding-right: 12px;}
.title_wrap .txt-gray{margin: 0 10px;}
.title_wrap p > span:not(:last-child):after{content: ""; display: inline-block; width: 1px; height: 12px; background-color:#70707027 ; vertical-align: middle; margin: -1px 10px 1px 10px}
.box-line .box-hd{background: #DFE1E7; padding: 28px 36px;}
.box-line .box-hd strong{font-size: 1.2em; margin-right: 10px;}

.chart dl{display: grid; grid-template-columns: max-content 1fr 40px; margin-bottom: 15px; gap: 8px;}
.chart .bar_wrap{background-color:#F4F5F7}
.chart .bar {display: block;position: relative;height: 20px; background: #747474; overflow: hidden;}
.chart .percent {margin: 0;padding-left: 10px; color: #747474;font-weight: 600;}
.chart dl:last-child{margin-top: 20px;    margin-bottom: 0;}
.chart dl.blue .bar{background-color: #42ADD9}
.chart dl.blue .percent{color: #42ADD9}
.chart dl.darkblue .bar{background-color: #0046AC}
.chart dl.darkblue .percent{color: #0046AC}


.container-fluid .lnb{border-bottom: 1px solid #e4e4e4; margin: 0 -40px 40px; padding: 0 30px;}
.container-fluid .lnb ul{display: flex; align-items: center;}
.container-fluid .lnb a{display: block; padding: 10px 16px; font-size: 1.15em; color: #747474;}
.container-fluid .lnb a.active{border-bottom: 2px solid #405472; color: #405472; font-weight: 600;}

/*대시보드*/
.idx_status .box-line{padding: 52px 46px;margin-bottom: 25px}
.idx_status .box-line .grid{gap: 30px 100px;}
.idx_status .chart > p{margin-bottom: 27px;font-size: 1.2em; font-weight: 600;}

.idx_my .grid{grid-template-columns:1fr 2fr; gap: 20px;}
.idx_my .box-line > ul{padding: 20px 36px;}
.idx_my .box-line > ul > li{padding: 6px 0;}
.idx_my .nav-tabs{margin-bottom: 0; background-color: #F4F4F7; border-bottom: 0; padding: 0 20px}
.idx_my .nav-tabs>li>a{ font-size: 0.9em;}
.idx_my .nav-tabs>li.active>a,
.idx_my .nav-tabs>li.active>a:focus,
.idx_my .nav-tabs>li.active>a:hover{background-color: transparent;}
.idx_my .table{margin: 0; border: 0; border-radius: 0;}
.idx_my .table td:first-child{padding-left: 35px;}
.idx_my .table td{}

/*종합공정*/
.overall section{margin-bottom: 0;}
.overall section > .box-line{height: 100%;}
.overall .box-inr{padding: 20px 30px;}
.overall.grid{grid-template-columns: 3fr 1fr; align-items: normal; gap: 20px;}
.overall.grid > .grid{grid-template-columns: 1fr 2fr; gap: 15px;}
.overall.grid > .grid > section:nth-child(2){grid-row: span 2;}
.overall.grid > .grid > section:nth-child(4){grid-column: span 2;}

.overall_info .box-hd,
.overall_ana .box-hd{padding: 18px 30px}

.overall_info h4{margin: 0 0 4px 0;}
.overall_info h4 .icon{margin-right: 4px;}
.overall_info .chart{border-top: 1px solid #D9D9D9; padding: 20px 30px;}
.overall_info .chart dl{display: block; position: relative; margin: 0;}
.overall_info .chart dt{margin-bottom: 6px;}
.overall_info .chart .bar{height: 30px;}
.overall_info .chart .percent{position: absolute; bottom:0; right: 4px; line-height: 30px;}

.overall_ana .box-inr{padding-top:30px; padding-bottom: 30px;}
.overall_ana .chart:after{content: ""; display: block; clear: both;}
.overall_ana .chart > p{float: left; font-size: 1.2em; font-weight: 600; margin-top: 0px;}
.overall_ana .chart > p:last-of-type{margin-top: 35px;}
.overall_ana .chart dl{width: calc(100% - 60px); float: right;}
.overall_ana .chart dl:last-child{margin-top: 20px; margin-bottom: 0;}

.overall_chart .box-line{padding: 40px }
.overall_chart .box-line h4{margin-bottom: 40px;}

.overall_member dl{margin-bottom: 20px;}
.overall_member dt{font-size: 1.2em; font-weight: 600; margin-bottom: 10px;}
.overall_member dd{padding: 4px 0;}
.overall_member dd strong{color: #474747; font-size: 1.1em; display: inline-block; margin: 0 4px;}
.overall_member dd i{background-color: #F4F5F7; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; color: #747474; text-align: center;}

/*작업관리 > 계획공정표 */
.schedule-list > .flex{padding: 10px 10px 0;}
.schedule-list > .grid{gap: 0; grid-template-columns: 25% 75%; overflow-y: scroll;}

.schedule_task{box-shadow: 0 3px 6px #00000029;  margin: 0; border-right: 1px solid #ddd;}
.schedule_task i{width: 14px; text-align: center;}
.schedule_task input{border: 0; padding: 0; margin: 0 auto; height: auto; text-align: center; background-color: transparent;}
.schedule_task input::placeholder{font-size: 0.9em; letter-spacing: -0.5px; opacity: 0.5;}
.schedule_task .inputPm{padding: 0; cursor: pointer; border: 0; height: auto}
.statusSelect{padding: 5px 1px 4px 0; width: 35px; border: 0; line-height: 1.2em; height: auto; border-radius: 4px;
    text-align: center; margin: 0; font-weight: 500; font-size: 0.95em;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: #E4E4E4; color: #474747;}
.statusSelect.gray{background-color: #E4E4E4; color: #474747}
.statusSelect.green{background-color: #84B77F; color: #fff;}
.statusSelect.blue{background-color: #42ADD9; color: #fff;}
.statusSelect.black{background-color: #474747; color: #fff;}
.statusSelect.red{background-color: #FF6C61; color: #fff;}

.schedule_task .statusSelect{padding: 4px 5px; border-radius: 6px;}
.schedule_task .btn-mini{padding: 3px 5px 3px; border-radius: 6px; margin: 0}
.schedule_task .border{border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; width: 100%; height: 50px;box-sizing: border-box;; /*line-height:;*/ padding: 13px 3px;}
.schedule_task .border:last-of-type{border-right: 0;}
.task_header{display: grid!important; /*grid-template-columns: 1fr 60px 100px 100px 65px 100px 100px 50px; */align-items: center; justify-content: space-between;/* border-top: 1px solid #EEEEEE*/; position: sticky; top: 0; background-color: #fff; z-index: 9;}
.task_header{grid-template-columns: 1fr 100px 100px ; }
.task_header > div.border{border-top: 1px solid #EEEEEE;text-align: center; color: #74747485;  font-size: 0.9em; padding-top: 10px; padding-bottom: 10px; height: 68px;justify-content: center;display: flex;align-items: center;}

.gantt-container {height: auto!important;}
.weekly .gantt-container {overflow: hidden;}
.schedule_task .section_title{background-color:#EFF0F3; color: #474747; font-weight: 600; font-size: 1.15em; padding: 10px 20px; cursor: pointer; border-bottom: 1px solid #B3B4B656;}
.schedule_task .zone_title{cursor: pointer;background-color:#E4E4E4; color: #2A2B6A; font-weight: 600; padding: 13px 20px; padding-left: 5px; font-size: 1em; border-bottom: 1px dotted #ddd; height: 50px;box-sizing: border-box;}
.schedule_task .zone_title.c1{padding-left: 10px; background-color:#E4E4E498;}
.schedule_task .zone_title.c2{padding-left: 15px; background-color:#E4E4E476;}
.schedule_task .zone_title.c3{padding-left: 20px; background-color:#E4E4E454;}
.schedule_task .zone_title.c4{padding-left: 25px; background-color:#E4E4E432;}

.schedule_task .task_title{padding: 10px 20px; cursor: pointer; font-weight: 700; display: flex; align-items: center;}
.schedule_task .task_item{ font-size: 0.95em; display: grid!important; /*grid-template-columns: 1fr 60px 100px 100px 65px 100px 100px 50px;*/width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;}
.schedule_task .task_item{ grid-template-columns: 1fr 100px 100px ;}

.schedule_task .task_item .border {border:0;border-right: 1px solid #EEEEEE;border-bottom: 1px solid #EEEEEE; text-align: center}
.schedule_task .task_item .border:first-child {border-left: 1px solid #EEEEEE; text-align: left;padding-left: 5px;}
.schedule_task .task_item .border:first-child{background-color:#E4E4E454;}
.schedule_task .task_item .border:last-child {border-right: 0;}
.schedule_task .task_item .border span.down {padding: 0px 3px; background: #fff; border-radius: 50px; color: #2A2B6A; margin-left: 4px; font-size: 0.8em; font-weight: 800}
input.input_focus{text-align: left; padding: 4px 6px;}
input.input_focus:hover,
input.input_focus:focus{border: 1px solid #E1E1E1; background-color: #eeeeee56;}

.task_content_dl dt,
.task_content_dl dd{display: flex; align-items: center; justify-content: space-between; font-size: 0.95em;}

.task_content_dl dd{display: grid; grid-template-columns: 1fr 80px 72px 110px 110px 110px 110px; }
.task_content_dl dd input[type=date]{letter-spacing: -1px;}

.colgroup > div:nth-child(1) span{display: inline-block; margin-right: 2px;}


.schedule_gant {
    margin-bottom: 0;
    background-color: #DFE1E720;
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling */
    position: relative;
}
.gant_header{position: sticky; top: 0; display: flex; align-items: center;}
.gant_header .period_wrap{background-color: #fff;}
.gant_header .month{ padding: 0 8px; font-weight: 600; border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; position: relative;}
.gant_header .month > p {position: sticky; left: 0; top: 0;}
.gant_header .day ul{display: flex; align-items: center; border-bottom: 1px solid #EEEEEE;}
.gant_header .day ul li{border-right: 1px solid #EEEEEE;  width: 30px; text-align: center; font-size: 0.9em; color: #74747485;}
.gant_header .day ul li.weekend{background-color: #E8F8FF}

.gant_cont{display: flex; width: 100%; min-height: calc(100vh - 296px);}
.gant_cont .section_title{width: 100%; height: 40px; background-color: #EFF0F3;}
.gant_cont .zone_title{width: 100%; height: 32px; background-color: #E4E4E4;}
.column_wrap .day ul{display: flex;}
.column_wrap .day li{width: 30px; height: 40px;}
.column_wrap .day li.active{background-color: #0046AC;}
.column_wrap .day ul li.weekend{background-color: #E8F8FF}

.schedule .grid{gap: 0;}
.schedule > div > .flex{padding: 10px 10px 0;}
/*간트차트*/
section.any_gantt{margin: 0;}
.any_gantt #container{height: calc(100vh - 245px);}

.container-fluid:has(.week_task) .title_wrap h2{margin-bottom: 14px;}
.container-fluid:has(.schedule) .title_wrap{padding: 40px 40px 0; margin-bottom: 0;}
.container-fluid:has(.schedule) .title_wrap h2{margin-bottom: 14px;}
.container-fluid:has(.schedule) .schedule > .grid {height: auto}
.page-wrapper .page-content:has(.schedule) > div{padding: 0;}
.container-fluid:has(.schedule) .lnb{margin-bottom: 0;}
.page-content:has(.schedule) ~ footer{display: none;}

/*작업관리 > 금주작업*/
.progress_wrap { width: 100%; margin: 0px auto; background: #fff; padding: 0px; border-radius: 5px;  }
.progress_wrap .overall_progress { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.progress_wrap .day_buttons { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; }
.progress_wrap .day_buttons button { width: 100%; padding: 5px 8px; border: 1px solid #eee; color: #000; font-weight: 600; background: white; cursor: pointer; border-radius: 3px; font-size: 12px; }
.progress_wrap .day_buttons button:hover { background: #f8f8f8; }
.progress_wrap .day_section { display: none; padding: 10px; border-radius: 5px;  margin-top: 0px; }
.progress_wrap .days_container { background: #f8f8f8;  border-radius: 5px;  margin-top: 0px; }
.progress_wrap .days_container h3 { margin-bottom: 5px;}
.progress_wrap .progress_wrap { display: flex; align-items: center; gap: 5px; justify-content: center; margin-bottom: 8px; padding: 10px 20px }
.progress_wrap .progress_wrap input { width: 90%; padding: 0; margin: 0}
.progress_wrap .progress_wrap span { font-weight: bold; width: 40px; text-align: center; }
.progress_wrap .progress_wrap input[type="range"] {;-webkit-appearance: none;width: 100%;height: 10px;background: #ddd;border-radius: 5px;outline: none;transition: background 0.3s;}
.progress_wrap .progress_wrap input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 15px;height: 15px;background: #2a2b6a;border-radius: 50%;cursor: pointer;}
.progress_wrap .progress_value {display: block;ont-size: 16px;font-weight: bold;}
.progress_wrap .day_section {display: none;margin-bottom: 0px;}
.progress_wrap .total_progress {color: #2a2b6a;font-weight: bold;text-align: center;}
.progress_wrap .checkbox-wrap { margin-bottom: 8px; }
.progress_wrap .memo_wrap { display: flex; flex-direction: column; align-items: center; gap: 0px; }
.progress_wrap .memo_wrap textarea { width:100%; height: 50px; resize: none; padding: 5px; border: 1px solid #ccc; border-radius: 3px; }

.week_task .task_header{display: grid!important; grid-template-columns: 0.5fr 80px 72px 110px 110px 1fr}
.week_task .task_header > div.border{border-top: 0;}
.week_task .schedule_task .task_item{display: grid!important; grid-template-columns: 0.5fr 80px 72px 110px 110px 1fr;}
.week_task .schedule_task .border{height: auto}

.week_top h4{margin-bottom: 0; margin-right: 10px;}

.week_navigation .week_date{margin-right: 10px; display: flex; align-items: center;}
.week_navigation .week_date button{width: 20px; height: 20px; background-color: #707070; border: 0; border-radius: 4px; color: #fff; margin: 0 10px; }
.week_navigation .week_date + button{margin-bottom: 0!important;}
.week_navigation .week_date strong{font-size: 1.4em; margin-right: 10px;}

.week_wrap .border{border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; width: 100%; padding: 10px;}

.week_wrap{border-top: 1px solid #EEEEEE;}
.week_header{display: grid; grid-template-columns: 120px 1fr 4fr; color: #74747485;}
.week_content{}
.day_section{display: grid; grid-template-columns: 120px 1fr;}
.day_section dt{background-color: #EFF0F3; font-weight: 600; border-color:#DCDCDC!important; padding: 20px!important; text-align: center;}
.day_section dt p{margin-bottom: 10px;}
.day_content{display: grid; grid-template-columns: 1fr 4fr;}
.day_content .input_wrap > .flex button{margin-bottom: 10px;}


.day_content .task_item{display: flex; align-items: center;}
.day_content .task_item input{margin-bottom: 0; width: 300px; margin-right: 6px;}
.day_content .task_item .btn-blue{margin-right: 6px;}

.download_wrap ul{border-top: 1px solid #C0D0EA75; margin-top: 10px;}
.download_wrap li{border-bottom: 1px solid #C0D0EA75; padding: 6px 4px; display: flex; align-items: center; justify-content: space-between;}
.download_wrap li:hover {background-color: #F0F4FA;}
.download_wrap li span{display:inline-block; width:calc(100% - 80px);}
.download_wrap li span label{display:inline-block; width:calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;}

.schedule_weekly .day_section dt{padding: 16px!important; text-align:left;}
.schedule_weekly .day_content .task_item{display: block;}
.schedule_weekly .day_content .task_item > .flex{margin-bottom: 8px;}
.schedule_weekly .day_content .task_item input:last-of-type{width: 500px;}

.task .flex {gap: 15px}
.task .table-wrap {overflow-y: auto; width: 100%}
.task .table {border: 0; overflow-y: unset;margin-bottom: 15px}
.task .table table { border-radius: 10px;}
.task .table table h4 {margin: 0}
.task .table table thead tr th:first-child {border-top-left-radius: 5px}
.task .table table thead tr th:lastt-child {border-top-right-radius: 5px}
.task .table table td {border-bottom: 1px solid #D9D9D9; text-align: center}
.task .table table tbody tr > *  { padding: 5px 7.5px}
.task .table table tr th {white-space: nowrap}
.task .table table tr td:not(:last-child) {border-right: 1px dotted #D9D9D9;}
.task .table tbody tr:nth-child(even) td {background-color: #fff0;}
.task  .table table tbody td.empty { cursor: not-allowed;opacity: 0.3 ;background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), #adadad, transparent calc(50% + 1px));  background-size: 120% 120%;  background-position: center; }
.task .left {padding: 10px;background: #f9f9f9; min-width: 200px; position: relative; border-radius: 5px}
.task .left ul {max-height: 90vh;overflow-x: auto;}
.task .left li {}
.task .left li a {padding: 10px 5px ;border-bottom: 1px solid #eee; display: flex; align-items: center;}
.task .left li a button {margin-left: auto;}
.task .left .sticky {top: 20px}
.task .left .zone li.active {background: #fff}
.task .left .zone li.active a {color: #008bfb; font-weight: 700; background: #fff; }
.task .left .nested {display: none; }
.task .left .active > .nested {display: block;}
.task .left .toggle-icon {transition: transform 0.3s;}
.task .left .rotate {transform: rotate(90deg); color: #008bfb; }
.task .left li p {padding: 10px ;border-bottom: 1px solid #eee; display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 1.1em}
/*기성관리*/
.payment tbody th{cursor: pointer;}
.payment tbody th i{display: inline-block; align-items: center; border-radius: 4px; color: #0046ac; background-color: #0046ac23; font-weight: 500; margin-right: 4px; text-align: center; height: 16px; line-height: 18px; padding: 0px 4px;}
.payment tbody tr.sub-total th i{background-color: rgba(84, 84, 84, 0.14);}
.payment tbody tr.total th,
.payment tbody tr.total td{background-color: #fff!important; border-bottom:1px solid #EFEFEF80; font-weight: 600; font-size: 1.1em; vertical-align: baseline}
.payment tbody tr.detail th,
.payment tbody tr.detail td{background-color: #EFEFEF20!important; border-bottom:1px solid #fff;}
.payment tbody tr.detail{display: none;}
.payment tbody tr.sub-total{display: none;}
.payment tbody tr.sub-total th,
.payment tbody tr.sub-total td{background-color: #edeef1!important; border-bottom:1px solid #fff; font-weight: 600}
.payment tbody tr.total td > div.flex {flex-direction: column}
.payment tbody tr.total td > div.flex > * {margin: 0}
.payment tbody tr.total td details {padding: 0}
.payment tbody tr.total td details summary {padding: 0;flex-direction: row-reverse}
.payment tbody tr.total td details ul li {border-top: 1px dashed #00000050}
.payment tbody tr.total td details ul li p {text-align: right}
.payment tbody tr.total td details ul li span {display: flex; align-items: center; width: 100%; justify-content: space-between; color: #00000050; margin-top: -13px;flex-direction: row-reverse}
.payment tbody tr.total td details ul li span .btn-mini2 {padding: 0px 6px;}
.table tbody tr.sub-total + tr td {background-color: #eaeaee; font-weight: 600}
.payment .table thead:has(tr:nth-child(2)) th {padding: 5px 15px!important; }
.payment .table thead tr:nth-child(2) th {background: #dfe1e790; padding: 5px 15px!important; }
.payment_list table td{background-color: #fff!important; border-bottom:1px solid #EFEFEF80; font-weight: 600; font-size: 1.1em; vertical-align: baseline}

/**/
.invoice {position: relative}
.invoice #btnFixed {display: flex;position: fixed ;right: -45px;  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); transform-origin: center;will-change: transform; backface-visibility: visible; transform: matrix(0, -1, 1, 0, 0, 0);top: 280px;}
.invoice #btnFixed.flex {position: fixed ;right: -160px;  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); transform-origin: center;will-change: transform; backface-visibility: visible; transform: matrix(0, -1, 1, 0, 0, 0);top: 280px;}
.invoice .flex {gap: 15px}
.invoice .table-wrap {overflow-y: auto; width: 100%}
.invoice .table {border: 0; overflow-y: unset;margin-bottom: 15px}
.invoice .table table { border-radius: 10px;}
.invoice .table table h4 {margin: 0}
.invoice .table table thead tr th:first-child {border-top-left-radius: 5px}
.invoice .table table thead tr th:lastt-child {border-top-right-radius: 5px}
.invoice .table table td {border-bottom: 1px solid #D9D9D9;}
.invoice .table table tbody tr > *  { padding: 5px 7.5px}
.invoice .table table td input {min-width: 70px;}
.invoice .table table tr th {white-space: nowrap}
.invoice .table table tr td:not(:last-child) {border-right: 1px dotted #D9D9D9;}
.invoice .table input {margin: 0;height: auto;padding: 5px 10px;}
.invoice .table tbody tr:nth-child(even) td {background-color: #fff0;}
.invoice table thead th:first-child {position: sticky;z-index: 99;left: 0;}
.invoice table .third-total th,
.invoice table .third-total td{background: #31313185; color: #fff}
.invoice table .second-total th,
.invoice table .second-total td{background: #313131b8; color: #fff}
.invoice table .first-total th,
.invoice table .first-total td{background: #313131; color: #fff}
.invoice table .third-total h4,
.invoice table .second-total h4,
.invoice table .first-total h4 { color: #fff}
.invoice .left {padding: 10px;background: #f9f9f9; min-width: 200px; position: sticky; top: 20px; border-radius: 5px; margin-top: 10px; height: fit-content; }
.invoice .left > ul {max-height: 90vh;overflow-x: auto;}
.invoice .left li {}
.invoice .left li p {padding: 10px ;border-bottom: 1px solid #eee; display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 1.1em}
.invoice .left li a {padding: 10px ;border-bottom: 1px solid #eee; display: flex; align-items: center; background: #fff; border-radius: 5px; gap: 5px;font-weight: 600; font-size: 1.1em}
.invoice .left li a.first{background: #313131; color: #fff; font-weight: 600; font-size: 1.1em}
.invoice .left li a.second {background: rgba(245, 245, 245, 0.72); color: #000; font-weight: 600; font-size: 1.1em}
.invoice .left li a.second i {opacity: 0.3;font-size: 0.8em}
.invoice .left li a.third{background: #31313185; color: #fff; font-weight: 600; font-size: 1.1em}
.invoice .left li a button {margin-left: auto;}
.invoice .left .zone li.active {background: #fff}
.invoice .left .zone li.active a {color: #008bfb; font-weight: 700; background: #fff; }
.invoice .left .nested {display: none; }
.invoice .left .active > .nested {display: block;}
.invoice .left .toggle-icon {transition: transform 0.3s;}
.invoice .left .rotate {transform: rotate(90deg); color: #008bfb; }

.switch {position: relative;display: inline-block;width: 25px;height: 16px;}
.switch input {opacity: 0;width: 0;height: 0;}
.switch .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #008bfb;transition: 0.4s;border-radius: 34px;}
.switch .slider:before {position: absolute;content: "";height: 12px;width: 12px;left: 2px;bottom: 2px;background-color: #fff;transition: 0.4s;border-radius: 50%;}
.switch input:checked + .slider {background-color: #af4c4c;}
.switch input:checked + .slider:before {transform: translateX(9px);}


/**/
.zone .flex {gap: 15px}
.zone .flex.gap5 button {margin: 0}
.zone .table {margin-bottom: 0}
.zone .table table td {border-bottom: 1px solid #D9D9D9; vertical-align: text-top; min-height: 60px}
.zone .table table tr td:not(:last-child) {border-right: 1px dotted #D9D9D9;}
.zone .table input {margin: 0}
.zone .left {padding: 10px;background: #f9f9f9; min-width: 200px; position: relative; border-radius: 5px}
.zone .left ul {max-height: 90vh;overflow-x: auto;}
.zone .left li {}
.zone .left li a {padding: 10px 5px ;border-bottom: 1px solid #eee; display: flex; align-items: center;}
.zone .left li a button {margin-left: auto;}
.zone .left .sticky {top: 20px}
.zone .left li.active {background: #fff}
.zone .left li.active a {color: #008bfb; font-weight: 700; background: #fff; }
.zone input.txt-blue {font-size: 18px !important;padding: 10px; font-weight: 600}
.sectionModal .box-gray {padding: 5px; margin-top: 15px}

/**/
.schedule-list .grid2 {gap: 0}
.schedule-list .calendar {width: 100%;overflow-x: auto;position: relative;}
.schedule-list .schedule-wrapper {position: relative;}
.schedule-list .month-header {display: flex;position: sticky;top: 0;background-color: #fff;border-bottom: 1px solid #ccc;z-index: 1;width: fit-content;}
.month-label {padding: 5px;text-align: center;font-weight: bold;background-color: #f9f9f9;box-sizing: border-box;border-right: 1px solid #ccc;}
.schedule-list .schedule {display: flex;flex-direction: column;border: 0px solid #ccc;width: fit-content;border-bottom: 1px solid #ccc}
.schedule-list .schedule-row {display: flex;}
.schedule-list .day{width: 40px;padding: 7.5px 10px;text-align: center;border-right: 1px solid #ccc;box-sizing: border-box;position: relative; }
.schedule-list  .week {width: 80px;padding: 7.5px 10px;text-align: center;border-right: 1px solid #ccc;box-sizing: border-box;position: relative; }
.schedule-list .schedule-row:not(:first-child) > .day  {border-top: 1px solid #cccccc50; border-right: 1px solid #2121210d; height: 50px;box-sizing: border-box;}
.schedule-list .schedule-row:not(:first-child) > .day > .day  {border: 0;}
.schedule-list .schedule-row:not(:first-child) > .day:nth-child(even)  {background: #f8f8f8}
.schedule-list .schedule-row:not(:first-child) > .week  {border-top: 1px solid #cccccc50; border-right: 1px solid #2121210d; height: 50px;box-sizing: border-box;}
.schedule-list .schedule-row:not(:first-child) > .week > .week  {border: 0;}
.schedule-list .schedule-row:not(:first-child) > .week:nth-child(even)  {background: #f8f8f8}
.schedule-list .task {position: relative;z-index: 1;color: #fff; font-weight:600;background-color: #343434;border-radius: 3px;padding: 5px 5px;font-size: 14px;text-align: center;display: flex;justify-content: center;align-items: center;border: 1px solid #000;margin-top: 0px;}
.schedule-list .task.zone-title {color: #2A2B6A; background-color: #e3e3e3; border-color: #e3e3e3;}
.schedule-list .task.zone-title:before {position: absolute; top: 5px; left: 5px; content: "\e41e";  font-family: "Font Awesome 5 Pro";font-size: 8px; opacity: 0.2}
.schedule-list .task.zone-title:after {position: absolute; top: 5px; right: 5px; content: "\e444";  font-family: "Font Awesome 5 Pro";font-size: 8px; opacity: 0.2}
.schedule-list .task.zone-sub {color: #2A2B6A; background-color: #eeeeee; border-color: #eeeeee;}
.schedule-list .task.zone-sub:before {position: absolute; top: 5px; left: 10px; content: "\e41e";  font-family: "Font Awesome 5 Pro";}
.schedule-list .task.zone-sub:after {position: absolute; top: 5px; right: 10px; content: "\e444";  font-family: "Font Awesome 5 Pro";}
.schedule-list .task.gray {cursor: pointer; transition: all .3s ease}
.schedule-list .task.none {background: #fff;cursor: pointer; transition: all .3s ease}
.schedule-list .task.gray:hover {background-color: #000000; }
.schedule-list .task.red {color: #fff; background-color: #fd6c61; border-color: #fd6c61; cursor: pointer; transition: all .3s ease}
.schedule-list .task.red:hover {background-color: #ea564b; }
.schedule-list .task.blue {color: #fff; background-color: #42acd8; border-color: #42acd8; cursor: pointer; transition: all .3s ease}
.schedule-list .task.blue:hover {background-color: #288cb4; }
.schedule-list .task.green {color: #fff; background-color: #7aa837; border-color: #7AA837FF; cursor: pointer; transition: all .3s ease}
.schedule-list .task.green:hover {background-color: #526929; }
.schedule-list .today {background-color: rgba(255, 246, 203, 0.70) !important; font-weight: 600}
.schedule-list .today-line {position: absolute;width: 2px;background-color: #42acd8;height: 100%;top: 0;left: 50%;transform: translateX(-50%);    mix-blend-mode: darken;}
.schedule-list .view-btn.active { color: #2A2B6A !important;background: #f8f8f8;}
.schedule-list .hidden {display: none;}
/**/
.task-form .left {padding: 10px;background: #f9f9f9; min-width: 200px; position: relative; border-radius: 5px; margin-top: 5px}
.task-form .left ul.list {max-height: 60vh;overflow-x: auto;}
.task-form .left ul.list  li {}
.task-form .left ul.list  li a {padding: 10px ;border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; color: #2A2A2A; transition: all .3s ease}
.task-form .left ul.list  li a span {font-weight: 600}
.task-form .left .sticky {top: 20px}
.task-form .left ul.list  li.active {background: #fff}
.task-form .left ul.list  li.active a {color: #000; font-weight: 700; background: #eaeaea; }
.task-form .left ul.list  li:hover a {color: #000; font-weight: 700; background: #eaeaea; }
.task-form .table-wrap {overflow-y: auto;width: 100%;}
.task-form .table-wrap > div {margin-bottom: 10px;padding-bottom: 10px; border-bottom: 1px solid #eee}
.task-form .cont textarea {height: 540px; padding: 20px; font-size: 20px!important;}
.task-form .cont textarea:focus {border: 1px solid  #008bfb;}
/**/
#daily-schedule.three {overflow-x: hidden}
/**/
.record ul.flex li{display: inline-block;font-size: 12px; padding:4px 6px; font-weight: 700; letter-spacing: -0.5px; border: 1px solid #d3d3d3; color: #5e5e5e; line-height: 1em; height: fit-content; border-radius: 4px}
.record ul.flex li b{color: #008bfb;}

.price-list .nav-tabs {background: #f9f9f9; border-top: 1px solid #ddd;}
.price-list .table thead:has(tr:nth-child(2)) th {padding: 5px 15px!important; }
.price-list .table thead tr:nth-child(2) th {background: #dfe1e790; padding: 5px 15px!important; }

.optionSelect{cursor: pointer;padding: 5px 1px 4px 0; width: 50px; border: 0; line-height: 1.2em; height: auto; border-radius: 4px;text-align: center; margin: 0; font-weight: 500; font-size: 0.95em;-webkit-appearance: none; -moz-appearance: none; appearance: none;background-color: #E4E4E4; color: #474747;}
.optionSelect.green{background-color: #84B77F; color: #fff;}


#unitOptionModal div.flex {margin-top: 5px}
#unitOptionModal div.flex  > * {margin: 0px}
#groupPriceModal div.flex {margin-top: 5px}
#groupPriceModal div.flex  > * {margin: 0px}

.unit-list .table tbody tr.main th{background-color: #f3f4f6; border-bottom: 1px solid #fff; font-weight: 600}
.unit-list .table tbody tr.main td{background-color: #fff; border-bottom: 1px solid #eee; font-weight: 600}
.unit-list .toggle-btn {cursor: pointer}

body:has(#recordPopup) .title_wrap h2 {display: none}
body:has(#recordPopup) .container-fluid .lnb {display: none}
#recordPopup div.flex {margin-top: 10px!important;}
#recordPopup div.flex > * {margin: 0!important;}
.loader-wrap {width: 100%; height: 50vh; display: flex; align-items: center; justify-content: center}
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #2a2b69;
    --_m:
            conic-gradient(#0000 10%,#000),
            linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    margin: 15vh auto;
}
@keyframes l3 {to{transform: rotate(1turn)}}