@charset "utf-8";

/* admin 페이지에서 테마 컬러 쓸 수도 있으므로 대표 컬러 변수 부분 common.css로 이동
:root {
    --theme-main-color: rgb(95, 156, 248);
    --theme-main-bg: rgba(95, 156, 248, 0.12);
    --theme-main-box: rgba(95, 156, 248, 0.04);
    --theme-main-border: rgba(95, 156, 248, 0.4);
}
*/

/*테마 컬러 */
/* 민트 :root { --theme-main-color: rgb(0, 180, 184);  --theme-main-bg: rgba(0, 180, 184, 0.12);  --theme-main-box: rgba(0, 180, 184, 0.04); --theme-main-border: rgba(0, 180, 184, 0.4); } */
/* 퍼플 :root { --theme-main-color: rgb(132, 93, 249);  --theme-main-bg: rgba(132, 93, 249, 0.12);  --theme-main-box: rgba(132, 93, 249, 0.04); --theme-main-border: rgba(132, 93, 249, 0.4); } */
/* 레드 :root { --theme-main-color: rgb(188, 36, 74);  --theme-main-bg: rgba(188, 36, 74, 0.12);  --theme-main-box: rgba(188, 36, 74, 0.04); --theme-main-border: rgba(188, 36, 74, 0.4); } */
/* 네이비 :root { --theme-main-color: rgb(49, 46, 152);  --theme-main-bg: rgba(49, 46, 152, 0.12);  --theme-main-box: rgba(49, 46, 152, 0.04); --theme-main-border: rgba(49, 46, 152, 0.4); } */


body { background-color:#fff; }
.header { height: 80px; border-bottom: 1px solid var(--theme-main-color); }
.contents { border-radius: 0; }
.contents > .inner { background: #fff; }

/********************************************
	Header
********************************************/
.header .hd-logo { width: auto; display: inline-block; line-height: 80px; text-indent: 0; }
.header .hd-logo::before { display: none; }
.header .hd-logo a { display: flex; align-items: center; height: 100%; padding: 0 20px; }
.header .hd-logo a .logo-txt:not(img) { font-size: 1rem; line-height: 1.0em; display: inline-block; vertical-align: bottom; border-radius: 0.5em; padding: 0.6em 1em 0.4em; color: var(--theme-main-color); border: 1px solid var(--theme-main-border); border-bottom-width: 3px; }
.header .hd-logo a .logo-slogan { margin-left: 8px; }
.header .hd-logo a img { display: inline-block; vertical-align: bottom; max-width: auto; max-height: 45px; }
.header .btn-alarm { background-image: url(/img/theme/ico_bell.svg); }
.header .btn-alarm span { color:#fff; border-color: #fff; background-color: var(--theme-main-color);}
.hd-prof .logout { background: #343434; color:#fff; }
.hd-prof .logout::before { background-image: url(/img/theme/ico_logout.svg);}


/********************************************
	Left
********************************************/
.left-nav { background-color: var(--theme-main-color); }
.left-nav a { width:64px; height:64px; background-repeat: no-repeat; background-size: 100% auto; background-position: center center; }
.left-nav a.on,
.left-nav a.active { background-color: rgba(0,0,0,0.15); border-radius: 10px; }
.left-nav a:hover { background-color: rgba(255,255,255,0.15); border-radius: 10px; }
.left-nav a:before,
.left-nav a:after { display: none; }

.left-nav a.ico1 { background-image: url(/img/theme/lnb_icons_1.svg); }
.left-nav a.ico2 { background-image: url(/img/theme/lnb_icons_2.svg); }
.left-nav a.ico7 { background-image: url(/img/theme/lnb_icons_3.svg); }
.left-nav a.ico3 { background-image: url(/img/theme/lnb_icons_4.svg); }
.left-nav a.ico4 { background-image: url(/img/theme/lnb_icons_5.svg); }
.left-nav a.ico9 { background-image: url(/img/theme/lnb_icons_6.svg); }
.left-nav a.ico6 { background-image: url(/img/theme/lnb_icons_7.svg); }
.left-nav a.ico10 { background-image: url(/img/theme/lnb_icons_8.svg); }
.left-nav a.ico8 { background-image: url(/img/theme/lnb_icons_9.svg); }

.left-nav aside a { background-size: 50px auto; }
.left-nav aside a::before, .left-nav aside a::after { display: none; }
.left-nav aside a.ico-supervisor { background-image: url(/img/theme/ico_supervisor.svg); }
.left-nav aside a.ico-manual { background-image: url(/img/theme/ico_manual.svg); }
.left-nav aside a.ico-launcher { background-image: url(/img/theme/ico_launcher.svg); }

.left-nav .inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.left-nav .inner aside { position: relative; bottom: 0; margin-top: 50px;  }

@media (max-width: 740px) { 
	.control-lnb { background: var(--theme-main-color); width: 4rem; }
	.header { height: 4.7rem; }
	.header h1 { margin-left: 0; }
	.header .hd-btn { right: 4.2rem; }
	.header .hd-prof { background: var(--theme-main-color); height: 4.7rem; }
	.left-nav a { background-size: 64px auto; background-position: 3rem center; }
	.left-nav li a span { color:rgba(255,255,255,0.8);  }
	.left-nav li a.on span, .left-nav li a:hover span { color:#fff; font-weight: 800; }
	.left-nav a.on, .left-nav a.active { border-radius: 0; }
	.left-nav li + li { border-color: rgba(255,255,255,0.2); }
	.left-nav aside a.ico-supervisor { background-image: none; }
}



/********************************************
	login
********************************************/
.loginContWrap .loginArea .loginTit .logo-txt { border-color: var(--theme-main-border); color: var(--theme-main-color); }




/********************************************
	contents
********************************************/

.white-box::before { border: 1px solid #dedede; }
.tree-wrap.white-box .white-box::before { border: 0; box-shadow: none; background: none; }
.search-box .white-box select { border-radius: 10px; border: 1px solid #dedede; }

.search-box input[type="text"], 
.search-box input[type="number"], 
.search-box input[type="search"], 
.search-box input[type="password"] { border-radius: 9em; border: 1px solid #dedede; }

.search-box .white-box.inline { vertical-align: middle; }
.search-box .white-box.inline input, 
.search-box .white-box.inline select { border:0; margin-top: 1px; margin-left: 1px; width: calc(100% - 2px); }
.search-box .white-box.inline input { background-color:transparent; }

*[class^="btn"]:not(.btn-admin, .btn-home, .btn_st1, [class*="point"]) { border-color: var(--theme-main-color) !important; color: var(--theme-main-color); }
*[class^="btn"].point,
*[type="submit"][class^="btn"],
.btn_st1 { background-color: var(--theme-main-color); color:#fff; border-color: var(--theme-main-color) !important; }
.modal .modal-control .btn:not([class^="point"], .positive) { background-color: #fff; color: var(--theme-main-color); }
.modal .modal-control .btn.point { background-color: var(--theme-main-color); color:#fff; }
*[class^="btn"].black { background:#343434; border-color:#343434 !important; color:#fff; }
*[class^="btn"].blackline { color:#343434; border-color:#343434 !important; }

td .btn:not([class^="point"], .negative):hover { background-color: var(--theme-main-color); border-color: var(--theme-main-color); color:#fff; }

*.ico-doc { --theme-main-color: #343434; }
*.ico-doc:hover { background-color: var(--theme-main-color) !important; }
*.ico-doc::before { background-image: url(/img/theme/ico_doc.svg); }

*[class*="ico-"].btn.download.ico-excel {  background-color: var(--theme-main-color); color:#fff; border-color: var(--theme-main-color) !important; }
*[class*="ico-"].btn.download.ico-excel:before { background: url(/img/theme/ico_excel.svg) no-repeat right center/auto 100%;  }

.i-link { background-image: url(/img/theme/ico_link.svg); }
*[class^="btn"]:has(.i-link) { color:#343434; border-color:#343434 !important; }

.tbl-table thead,
.tbl-table thead th { background: #343434; }
.tbl-table thead .ico-check input[type="checkbox"] ~ label:before, .tbl-table thead .ico-check input[type="radio"] ~ label:before { background-color:#343434 !important; }
.tbl-table .ico-check input[type="checkbox"]:checked ~ label:before, .tbl-table .ico-check input[type="radio"]:checked ~ label:before { background-color: var(--theme-main-color) !important; border-color: var(--theme-main-color) !important; }

.schedule-tbl thead tr > th { background: #343434; }

.task-info dl,
.task-info-ty2 dl,
.task-time-box { background-color:#F5F6FA; color:#343434; }

.tab-menu a.active {  background-image:none; background: var(--theme-main-color); }

.button-group .btn { color:#343434 !important; border-color:#343434 !important; }
.button-group .btn.active,
.search-box .button-group .btn.active,
.search-option .button-group .btn.active,
.grid-group .button-group .btn.active { color:#fff !important; background-color: #343434 !important; }

.tabs-nav.level-1 { background-color:#F7F8FC; }
.tabs-nav.level-2 .tab-menu li { background-color: var(--theme-main-bg); margin-left:0;  }
.tabs-nav.level-2 .tab-menu a { color: var(--theme-main-color); opacity: 0.9; }
.tabs-nav.level-2 .tab-menu a.active { color: var(--theme-main-color); opacity: 1; }

.modal-inner-tab { border-bottom-color: var(--theme-main-color); }
.modal-inner-tab a { color:#8d97b7; }
.modal-inner-tab a.active { background: var(--theme-main-color); }

.gray-box { background: #F5F6FA; }

.my-state dl { color:#000; }
.my-state dl:first-of-type, .my-state dl:nth-of-type(2) { background: var(--theme-main-box);  }

.my-status dl { color:#000; background: #f5f6f9; /*background: var(--theme-main-box);*/ }

/* .statusList li a { color: var(--theme-main-color); background: var(--theme-main-box); border:0; } */
.statusList.gray li a { color:#000; }

.inner-menu .badge { background-color: var(--theme-main-color); }
.badge-num { background-color: var(--theme-main-color); }

.ico-check input[type="checkbox"]:checked ~ label:before,
.tree-wrap .jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:before, .tree-wrap .jstree-default .jstree-checked>.jstree-checkbox:before, .tree-wrap .tree-ty2 .jstree-default .jstree-clicked .jstree-themeicon:before { background-color:var(--theme-main-color); border-color: var(--theme-main-color); }

.label label { background: #ACB1BE; }
.label label + input[type="text"] { border-radius: 0 9em 9em 0; height: 40px; vertical-align: top; }

.search-detail .choose-btn input:checked ~ label { border-color: var(--theme-main-color); background-color: var(--theme-main-color); }
.search-detail .label label { background: #ACB1BE; border-color:#ACB1BE; line-height: 40px;  }


div[class*=shift-] .schedule-tab button.active { background-color: var(--theme-main-color); }


.schedule-range .ico-mine { background-color: var(--theme-main-color); color:#fff; }


.guideBox [class="ico"] { background:var(--theme-main-color) url(/img/ico/ico_guide_noBG.svg) no-repeat center; border-radius: 100%; }


/* 휴가선택 - 연차 및 휴가*/
.vacation-ty-list li.list-header { background: #333; }

/********************************************
	tree
********************************************/
.schedule-wrap .schedule-calendar { padding: 15px; border-radius: 15px; background: #F5F6FA; }


/********************************************
	schedule
********************************************/
.schedule-tbl tbody td.today { border-color: var(--theme-main-border); }
.schedule-tbl tbody td.today .num, .schedule-tbl.schedule tbody td.today a:first-of-type > p { background: var(--theme-main-color); }
#annualStatus .statusSection .contR .label-state { background: var(--theme-main-color); }

.schedule-type-filter .btn.ico-filter { border-color: #343434 !important; color: #343434; }
.schedule-type-filter .btn.ico-filter::before { background-image: url('/img/theme/ico_filter.svg');  }



@media all and (max-width:1024px) {
	.tab { margin-left: 1rem; }
	.tab.on:before,
	.tabs-nav.level-1 .tab-menu li a.active { background: var(--theme-main-color); }
}

@media (max-width: 740px) { 
	.tab { margin-left: 0; }
}