@charset 'utf-8';

:root{
    --bs-primary : #326d2d;
    --bs-border-color:rgba(203, 208, 221, 0.54);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
}


html, body {width:100%; font-size:14px; /*height:100%; height: var(--safe-vh);*/min-height:100svh; max-height:100lvh; overflow:hidden}
html {margin:0; padding:0}
body {font-family:'SUIT', '맑은 고딕', 'Gothic', '고딕'; width:100%}


a {display: inline-block; color:inherit}
a.link, a:hover {text-decoration:underline; text-underline-position:under}
img {width:100%}
ul, li {margin:0; padding:0}

input,
select,
button {height:40px}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible{background-color:var(--bs-primary)}

.btn-primary, 
.tox .tox-dialog__footer .tox-button:last-child, 
.tox .tox-button {--phoenix-btn-bg:var(--bs-primary); --phoenix-btn-disabled-bg::var(--bs-primary); --phoenix-btn-hover-bg:var(--bs-primary-active); --phoenix-btn-active-bg:var(--bs-primary-active)}

.form-check-input:checked {background-color:var(--bs-primary); border-color:var(--bs-primary)}

.wrap {width:calc(768px - 30px); height:100vh; background-color:var(--phoenix-body-bg); margin:0 auto; padding:0 15px; overflow:hidden auto; min-height: -webkit-fill-available; }
/*.wrap {width:calc(768px - 30px); height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:0 auto; padding:0 15px; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow:hidden auto; min-height: -webkit-fill-available}*/
.wrap header + .area {padding:75px 0 90px}


.wrap header,
.wrap .fnb {position:fixed; left:calc(50% - 350px); right:0; width:693px; background-color:var(--phoenix-white); z-index:999}
.wrap header {top:0; padding:10px 15px; border-bottom:1px solid var(--bs-border-color)}
.wrap header .logo {width:100px}
.wrap header .btn_logout {line-height:35px; margin-left:5px}
.wrap .fnb { bottom:0; box-shadow:rgba(0, 0, 0, 0.35) 0px 0px 5px; padding:7px}
.wrap .fnb a {width:25%; float:left; text-align:center}
.wrap .fnb a:hover {text-decoration:none}
.wrap .fnb i {font-size:24px}
.wrap .fnb p {margin:3px 0 0 0}



[name=frm_list] {display:block}
[name=frm_list] .src {width:calc(100% - 65px); padding-right:15px; float:left}
[name=frm_list] .src + button {width:65px; float:right}
[name=frm_list] .src {}

.date {position:relative}
.date input[type=date]::-webkit-calendar-picker-indicator {opacity:0}
.date input[type=date] + i {position:absolute; right:10px; top:10px}

.date_area .date{width:calc(50% - 15px); display:inline-block; position:relative}
.date_area .date:first-child:after {content:'\007e'; position:absolute; right:-20px; top:calc(50% - 10px)}
.date_area .date:last-child {float:right}

.nav-tabs li {border:1px solid var(--bs-border-color); border-radius:5px 5px 0 0; border-bottom:0; width:16.66% }
.nav-tabs .nav-link {font-weight:normal; color:var(--phoenix-emphasis-color); width:100%}
.nav-tabs .nav-link.active {color:var(--bs-primary); font-weight:bold; text-decoration:underline; text-underline-position:under; height:40px; background-color:#fff}
.nav-tabs + .tab-content {padding:10px; background-color:var(--phoenix-white); overflow:auto hidden}


.table {table-layout: fixed}

.table th{font-weight:normal}
.table a {width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.table tr.active td {background-color:rgba(var(--phoenix-primary-dark-rgb), 0.07)}
span.view {border-width:0 1px; border-style:solid; border-color:var(--bs-border-color); padding:0 10px; margin:0 10px}


.paging {width:100%; text-align:center; margin:15px 0 0 0}
.paging li {display:inline-block}
.paging li a {width:30px; height:30px; text-align:center; line-height:30px;}
.paging li a.active {color:var(--bs-primary); font-weight:bold}


.card .card-header {font-weight:bold}
.card .card-header i {vertical-align:top}
.card .card-header span {font-size:16px; padding-left:5px}

.intro {background-color:var(--bs-primary)}
.intro .logo {width:180px; margin:0 auto; position:fixed; left:calc(50% - 90px); top:calc(50% - 90px)}
.intro img {filter: brightness(0) invert(1)}
.login {padding-top:calc(50vh - 300px)}
.login .logo {width:200px; margin:0 auto 30px}
.login [for=id_save] {font-size:13px}
.login .btn-primary {height:40px}

.index p.fw-bold {font-size:24px; margin-bottom:5px; color:var(--bs-primary)}
.index #chart {width:300px; margin:0 auto}
.index .card-body > a {font-size:16px; font-weight:bold; margin-top:10px}


.area_03 .card_list {height:40vh; overflow:hidden}
.area_03 .card_list .tab-content {height:calc(100% - 40px); overflow:auto}
.area_03 #tab_cont_1 .table {width:100%}
.area_03 #tab_cont_2 .table {width:100%}
.area_03 #tab_cont_3 .table {width:800px}
.area_03 #tab_cont_4 .table {width:800px}
.area_03 #tab_cont_5 .table {width:950px}
.area_03 #tab_cont_6 .table {width:820px}

.area_03 .map_area {height:300px}

.area_04 .tab-content p.fw-bold {font-size:16px; padding:15px 10px; color:var(--bs-primary)}
.area_04 .chart_area {width:100%; overflow:auto hidden}
.area_04 canvas {height:300px; margin:0 auto}


.area_05 .nav-item {width:auto}
.area_05 .table {width:100%}
.area_05 .table td > * {padding:0 10px}
.area_05 .table td p {display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:100%}
.area_05 .table td span {font-size:12px}


.area_06 p.fw-bold {font-size:16px}
.area_06 .list_area {width:100%; overflow:auto hidden}
.area_06 .table {width:600px}


.modal-title {text-align:center}
.modal-title h1{font-size:18px; font-weight:bold}
.modal .modal-body {max-height:80vh}
.modal .modal-header .fw-bold {font-size:15px}
.modal .modal-header .fw-bold + div span {font-size:13px}

@media (max-width: 768px) {

    .wrap {width:100%}
    .wrap header,
    .wrap .fnb {left:0; width:100%}
    .login .logo {width:100px}

}

@media (max-width: 420px) {

    .login .logo + h3{font-size:16px}
    .date_area .date {width:calc(50% - 10px)}
    .date_area .date input {padding:0.5rem 0.5rem}

    .area_03 .cnt.row > div {padding-left:0px; padding-right:0px}
    .area_03 .cnt.row > div:nth-child(1),
    .area_03 .cnt.row > div:nth-child(4) {Padding-left:8px}
    .area_03 .cnt.row * {font-size:12px}

    .area_03 #tab_cont_1 .table {width:420px}
    .area_03 #tab_cont_2 .table {width:650px}


}

div.card-body .day{display:block}