@import '../css/font-poppins.css';

body { font-family:'Poppins'; background:#fafafa; color:#001241; }
a, a:hover, a:focus { color:inherit; text-decoration:none; transition:all 0.3s; }

.form-control::placeholder { color:#ced4da; opacity:1; }

.navbar { padding:15px 10px; background:#fff; border:none; border-radius:0; margin-bottom:18px; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.1); }

#waiting { position:absolute; left:0%; top:0%; z-index:9999; min-width:100%; min-height:100%; }
/*#waiting { position:absolute; left:-50%; top:-50%; z-index:9999; min-width:200%; min-height:200%; }*/
#waiting .spanner { position:absolute; top:50%; left:0; background:transparent; width:100%; display:block; text-align:center; height:300px; color:#FFF; transform:translateY(-50%); z-index:1000; visibility:hidden; }
#waiting .overlay { position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.49/*0.85*/); visibility:hidden; }
#waiting .loader,
#waiting .loader:before,
#waiting .loader:after { border-radius:50%; width:2.5em; height:2.5em; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation:loader 1.8s infinite ease-in-out; animation:loader 1.8s infinite ease-in-out; }
#waiting .loader { color:#ffffff; font-size:10px; margin:70px auto; position:relative; text-indent:-9999em; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation-delay:-0.16s; animation-delay:-0.16s; }
#waiting .loader:before,
#waiting .loader:after { content:''; position:absolute; top:0; }
#waiting .loader:before { left:-3.5em; -webkit-animation-delay:-0.32s; animation-delay:-0.32s; }
#waiting .loader:after { left:3.5em; }
#waiting .show { visibility:visible; }
#waiting .spanner, .overlay { opacity:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#waiting .spanner.show, .overlay.show { opacity:1; }
#waiting .progress { width:150px; height:15px; }
#waiting .progress-bar { background-color:#001241; }
@-webkit-keyframes loader { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } }
@keyframes loader { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } }

#container { display:flex; width:100%; align-items:stretch; }
#sidebar { min-width:200px; max-width:200px; background:#001241; color:#fff; transition:all 0.3s; }
#sidebar.active { margin-left:-200px; }
#sidebar .sidebar-header { height:100px; max-height:100px; padding:20px; background:#fafafa; background-image:url('../images/logo.png'); background-position:center; background-repeat:no-repeat; background-size:contain; border:0px solid #ffffff; }
#sidebar ul.components { padding:20px 0; border-bottom:1px solid #001241; }
#sidebar ul p { color:#fff; padding:10px; }
#sidebar ul li a { padding:3px 10px 3px 10px; font-size:1.1em; display:block; }

#sidebar ul.components > li > a { padding-top:10px; padding-bottom:10px; }
#sidebar ul > li > ul:not([flexible]) > li:first-of-type > a { padding-top:10px; }
#sidebar ul > li > ul:not([flexible]) > li:nth-last-of-type(1) > a { padding-bottom:10px; }
#sidebar ul > li > ul[flexible] > li:first-of-type > a { padding-top:10px; }
#sidebar ul > li > ul[flexible] > li:nth-last-of-type(2) > a { padding-bottom:10px; }

#sidebar ul > li > a:hover { color:#0090ff; background:#001241; }
#sidebar ul > li > ul { transition:all 0.3s; }
#sidebar ul > li > ul > li > a { color:#395382; background:black; }
#sidebar ul > li > ul > li > a:hover { color:#0090ff; background:black; }
#sidebar ul li.active>a { color:#0090ff; background:black; }
#sidebar a[aria-expanded='true'] { color:#fff; background:#001241; }
#sidebar a[data-toggle='collapse'] { position:relative; }
#sidebar .dropdown-toggle::after { display:block; position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:1.2rem; transform:rotate(180deg); transition-duration:300ms; transition-timing-function:linear; }
#sidebar .dropdown-toggle.collapsed::after { transform:rotate(0deg); }
#sidebar ul ul a { font-size:1.2em !important; padding-left:30px !important; background:black; }
#sidebar ul.CTAs { padding:20px; }
#sidebar ul.CTAs a { text-align:center; font-size:1.1em !important; display:block; border-radius:5px; margin-bottom:5px; }
#sidebar a.download { background:#fff; color:#7386D5; }
#sidebar a.article,
#sidebar a.article:hover { background:#00a5e5 !important; color:#fff !important; }
#content { width:100%; min-height:100vh; transition:all 0.3s; }

.hamburger { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 400ms; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
.hamburgerRotate.active { transform:rotate(45deg); }
.hamburgerRotate180.active { transform:rotate(180deg); }
.hamburger .line { fill:none; transition:stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#001241; stroke-width:5.5; stroke-linecap:round; }
.hamburger .top { stroke-dasharray:40 82; }
.hamburger .bottom { stroke-dasharray:40 82; }
.hamburger.active .top { stroke-dasharray:14 82; stroke-dashoffset:-72px; }
.hamburger.active .bottom { stroke-dasharray:14 82; stroke-dashoffset:-72px; }
.hamburger:hover .line { stroke:#0090ff; }

/* css 변수 정의 - getComputedStyle(document.documentElement).getPropertyValue('--scrollbar-height')로 스크립트에서 조회 */
:root { --scrollbar-width:10px; --scrollbar-height:10px; }

.overlay_scroll { overflow:overlay; }
.overlay_scroll.scroll_hide::-webkit-scrollbar { width:0px; }
::-webkit-scrollbar { width:var(--scrollbar-width); height:var(--scrollbar-height); }
::-webkit-scrollbar-thumb { background-color:hsla(0, 0%, 42%, 0.49); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
:not(:hover)::-webkit-scrollbar-thumb { background-color:hsla(0, 0%, 42%, 0.15); border:2px solid transparent; background-clip:content-box; }

.tooltip-inner { background-color:#001241; border:1px solid #001241; color:#f2f4f8; padding:7px 15px; text-align:center; max-width:unset; }
.tooltip { font-size:1em; z-index:9999; }
.tooltip-info { color:#8e8f92; transition:all 0.3s; }
.tooltip-info:hover { color:#001241; cursor:pointer; }

.dropdown-menu { border:1px solid #001241; margin:.125rem 0 .125rem; }
.dropdown-item { color:#001241; }
.dropdown-item:not(:disabled):not(.disabled):hover { background-color:#c3d7ee; color:#001241; }
.dropdown-item.selected { background-color:#c3d7ee; color:#001241; }
.dropdown-item:disabled,
.dropdown-item.disabled { background-color:#f2f4f8; border-color:#f2f4f8; color:#cbd2e3; }
.dropdown-item.small { font-size:0.875rem; padding-left:0px; padding-right:0px; text-align:center; }

.bootstrap-select { max-width:100%; }
.bootstrap-select { width:100%; vertical-align:middle; }
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:100%; }

table.table { border-collapse:separate; border-spacing:0; margin-bottom:unset; }
table.table thead { background-color:#f2f4f8; position:sticky; top:0px; z-index:2; }
table.table thead tr th { border:none !important; border-left:none !important; border-right:1px solid white !important; vertical-align:middle; }
table.table thead tr th:first-child { border-left:1px solid white !important; }
table.table tbody tr th,
table.table tbody tr td { border:none !important; border-left:none !important; border-right:1px solid white !important; border-bottom:1px solid #f2f4f8 !important; vertical-align:middle; }
table.table tbody tr th:first-child,
table.table tbody tr td:first-child { border-left:1px solid white !important; }

.custom-checkbox .custom-control-label { border:none; padding-top:0.16rem; }
.custom-checkbox .custom-control-label::after { left:-1.11rem/*-1.17rem*/; /*top:0.30rem;*/ }
.custom-checkbox .custom-control-input-normal~.custom-control-label::before { border-color:#001241 !important; border-radius:15%; box-shadow:0 0 0 0rem rgba(255, 0, 0, 0.25) !important; left:-1.25rem/*-1.3rem*/; top:0.2rem; width:1rem; height:1rem; transition:all 0.3s; }
.custom-checkbox .custom-control-input:checked~.custom-control-label::after { background-image:none; color:white; content:"\f00c" !important; font-family:FontAwesome; font-size:0.9em; text-align:left !important; }
.custom-checkbox .custom-control-input-normal:focus~.custom-control-label::before { border-color:#001241 !important; box-shadow:0 0 0 0rem rgba(255, 0, 0, 0.25) !important; }
.custom-checkbox .custom-control-input-normal:checked~.custom-control-label::before { background-color:#001241 !important; border-color:#001241 !important; }
.custom-checkbox .custom-control-input-normal:focus:not(:checked)~.custom-control-label::before { border-color:#001241 !important; }
.custom-checkbox .custom-control-input-normal:checked:active~.custom-control-label::before { background-color:#001241 !important; border-color:#001241 !important; }
.custom-checkbox .custom-control-input-normal:not(:checked):active~.custom-control-label::before { background-color:transparent !important; border-color:#001241 !important; }
.custom-checkbox .custom-control-input-normal:not(:disabled):checked:hover~.custom-control-label::before { background-color:#0090ff !important; border-color:#0090ff !important; }
.custom-checkbox .custom-control-input-normal:not(:disabled):not(:checked):hover~.custom-control-label::before { background-color:transparent !important; border-color:#0090ff !important; }
.custom-checkbox .custom-control-input-normal:not(:disabled):checked.hover~.custom-control-label::before { background-color:#0090ff !important; border-color:#0090ff !important; }
.custom-checkbox .custom-control-input-normal:not(:disabled):not(:checked).hover~.custom-control-label::before { background-color:transparent !important; border-color:#0090ff !important; }

.custom-radio .custom-control-label { border:none; padding-top:0.16rem; }
.custom-radio .custom-control-label::after { left:-1.2rem; top:-0rem;/*-1.17rem*/; /*top:0.30rem;*/ }
.custom-radio .custom-control-input-normal~.custom-control-label::before { border-color:#001241 !important; box-shadow:0 0 0 0rem rgba(255, 0, 0, 0.25) !important; left:-1.25rem/*-1.3rem*/; top:0.2rem; width:1rem; height:1rem; transition:all 0.3s; }
.custom-radio .custom-control-input:checked~.custom-control-label::after { background-image:none; color:#001241; content:"●" !important; font-family:FontAwesome; font-size:1.2em; text-align:left !important; }
.custom-radio .custom-control-input:hover:checked~.custom-control-label::after { color:#0090ff; }
.custom-radio .custom-control-input.hover:checked~.custom-control-label::after { color:#0090ff; }
.custom-radio .custom-control-input-normal:focus~.custom-control-label::before { border-color:#001241 !important; box-shadow:0 0 0 0rem rgba(255, 0, 0, 0.25) !important; }
.custom-radio .custom-control-input-normal:checked~.custom-control-label::before { background-color:white !important; border-color:#001241 !important; }
.custom-radio .custom-control-input-normal:focus:not(:checked)~.custom-control-label::before { border-color:#001241 !important; }
.custom-radio .custom-control-input-normal:checked:active~.custom-control-label::before { background-color:white !important; border-color:#001241 !important; }
.custom-radio .custom-control-input-normal:not(:checked):active~.custom-control-label::before { background-color:transparent !important; border-color:#001241 !important; }
.custom-radio .custom-control-input-normal:not(:disabled):checked:hover~.custom-control-label::before { background-color:white !important; border-color:#0090ff !important; }
.custom-radio .custom-control-input-normal:not(:disabled):not(:checked):hover~.custom-control-label::before { background-color:transparent !important; border-color:#0090ff !important; }
.custom-radio .custom-control-input-normal:not(:disabled):checked.hover~.custom-control-label::before { background-color:white !important; border-color:#0090ff !important; }
.custom-radio .custom-control-input-normal:not(:disabled):not(:checked).hover~.custom-control-label::before { background-color:transparent !important; border-color:#0090ff !important; }

.gj-picker-bootstrap { left:calc(50vw - 162px) !important; top:calc(50vh - 156px) !important; color:#001241; font-size:1.1em; }
.gj-picker-bootstrap table thead { background-color:transparent !important; }
.gj-picker-bootstrap table thead tr th:first-of-type div { color:#ff8800; }
.gj-picker-bootstrap table thead tr th:nth-child(n+2) div { color:#8e8f92; }
.gj-picker-bootstrap table tbody tr th,
.gj-picker-bootstrap table tbody tr td { border:none !important; }
.gj-picker-bootstrap table tr td.focused div,
.gj-picker-bootstrap table tbody tr th div:hover,
.gj-picker-bootstrap table tbody tr td div:hover { background-color:#0090ff !important; color:white !important; border-radius:5px !important; transition:all 0.3s; }
.gj-picker-bootstrap table tr td div,
.gj-picker-bootstrap table tr th div { width:40px !important; height:40px !important; line-height:40px !important; }
.gj-picker-bootstrap table tr td.disabled div,
.gj-picker-bootstrap table tr th.disabled div { cursor:default !important; }
.gj-picker-bootstrap table tr td.disabled div:hover,
.gj-picker-bootstrap table tr th.disabled div:hover { background-color:transparent !important; color:#777 !important; cursor:default !important; }
.gj-picker-bootstrap [role="navigator"] div:first-child.disabled,
.gj-picker-bootstrap [role="navigator"] div:last-child.disabled { color:#777; cursor:default; }
[type="year"],[type="decade"],[type="century"].gj-picker-bootstrap { left:calc(50vw - 100px) !important; /*top:calc(50vh - 94px) !important;*/ top:calc(50vh - 156px) !important; }
[type="month"].gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div { background-color:#001241 !important; }
[type="year"].gj-picker-bootstrap table tr td.selected div { background-color:#001241 !important; color:white !important; border-radius:5px !important; }

.line { width:100%; height:1px; border-bottom:1px solid #ddd; }

.input-outline-normal { background-color:transparent; border:1px solid #ced4da; box-shadow:none !important; color:#001241; transition:all 0.3s; }
.input-outline-normal:not(:disabled):not(.disabled):hover,
.input-outline-normal:not(:disabled):not(.disabled):focus,
.input-outline-normal:not(:disabled):not(.disabled).focus,
.show>.input-outline-normal:not(:disabled):not(.disabled).dropdown-toggle { background-color:white; border-color:#001241; color:#001241; }
.input-outline-normal:disabled,
.input-outline-normal.disabled { background-color:#f2f4f8; border-color:#f2f4f8; color:#cbd2e3; }

.label-outline-normal { background-color:transparent; border:1px solid #ced4da; color:#001241; transition:all 0.3s; }
.label-outline-normal.focus { background-color:white; border-color:#001241; color:#001241; }
.label-outline-normal.disabled { background-color:#f2f4f8; border-color:#f2f4f8; color:#cbd2e3; }

.btn-label { background-color:transparent; border:1px solid transparent; box-shadow:none !important; color:#001241 !important; cursor:default !important; transition:all 0.3s; }

.btn-text { background-color:transparent; border:1px solid transparent; box-shadow:none !important; color:#001241 !important; text-decoration:underline; transition:all 0.3s; }
.btn-text:hover { color:#0090ff !important; text-decoration:underline; }
.btn-text.selected { color:#0090ff !important; text-decoration:underline; }
.btn-text:focus { background-color:transparent; border:1px solid transparent; }
.btn-text:disabled { background-color:transparent; color:#cbd2e3 !important; }

.btn-positive { background-color:#001241; border:1px solid transparent; box-shadow:none !important; color:white; transition:all 0.3s; }
.btn-positive:not(:disabled):not(.disabled):hover,
.show>.btn-positive:not(:disabled):not(.disabled).dropdown-toggle { background-color:#0090ff; color:white; }
.btn-positive:not(:disabled):not(.disabled).active { background-color:#0090ff; color:white; }
.btn-positive:disabled,
.btn-positive.disabled { background-color:#f2f4f8; color:#cbd2e3; }

.btn-negative { background-color:#cbd2d3; border:1px solid transparent; box-shadow:none !important; color:#001241; transition:all 0.3s; }
.btn-negative:not(:disabled):not(.disabled):hover,
.show>.btn-negative:not(:disabled):not(.disabled).dropdown-toggle { background-color:#0090ff; color:white; }
.btn-negative:not(:disabled):not(.disabled).active { background-color:#0090ff; color:white; }
.btn-negative:disabled,
.btn-negative.disabled { background-color:#f2f4f8; color:#cbd2e3; }





.btn-process { background-color: #9ed244; border: 1px solid transparent; box-shadow: none !important; color: white; transition: all 0.3s; }
.btn-process:not(:disabled):not(.disabled):hover,
.show>.btn-process:not(:disabled):not(.disabled).dropdown-toggle { background-color: #0090ff; color: white; }
.btn-process:not(:disabled):not(.disabled).active { background-color: #0090ff; color: white; }
.btn-process:disabled,
.btn-process.disabled { background-color: #f2f4f8; color: #cbd2e3; }

.btn-discard { background-color: #8e8f92; border: 1px solid transparent; box-shadow: none !important; color: white; transition: all 0.3s; }
.btn-discard:not(:disabled):not(.disabled):hover,
.show>.btn-discard:not(:disabled):not(.disabled).dropdown-toggle { background-color: #0090ff; color: white; }
.btn-discard:not(:disabled):not(.disabled).active { background-color: #0090ff; color: white; }
.btn-discard:disabled,
.btn-discard.disabled { background-color: #f2f4f8; color: #cbd2e3; }

.plr-15px { padding-left:15px; padding-right:15px; }
.plrt-15px { padding-left:15px; padding-right:15px; padding-top:15px; }
.plrb-15px { padding-left:15px; padding-right:15px; padding-bottom:15px; }

.hidden-menu { color: gray; opacity: 0.2; transition: all 0.3s; }
.hidden-menu:hover { color: black; opacity: 1; cursor: pointer; }

.icon-menu { color: #001241; }
.icon-menu:hover { color: #0090ff; }

.디지털폰트 { font-family:'LABDigital-Regular'; }

.color-white { color:white; }
.color-black { color:black; }
.color-ff8800 { color: #ff8800; }

.bg-cbd2e3 { background-color:#cbd2e3; }
.bg-f2f4f8 { background-color:#f2f4f8; }
.bg-fafafa { background-color:#fafafa; }

.w-200px { width:200px; }
.w-2word { width: 60px; }