/*
======================================================================================
* 퍼블리싱 할 때 dist > custom_css 안에서만 사용
* dist > app.css는 건들지 말것
* 전체 테마 color변경을 원할 경우
    초기 순서 : yarn install > yarn run watch 후 src > _color.css 에서 컬러테마 변경
    작업 중간 수정 : yarn run watch 후 src > _color.css 에서 컬러테마 변경
======================================================================================
*/


/*
#=========================================#
        reset
#=========================================#
*/
html,body {min-width:1720px; line-height:1.375rem !important; color:rgb(var(--color-slate-900) / var(--tw-bg-opacity)); font-family: "Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
body {background-color:#F6FAFD; }
a,button,label {cursor:pointer; }
.login_body {min-width:100%; }

/* maxOS 에서만 */
.is-mac {zoom:0.9; height:111.111dvh; }
.is-mac .side-nav {height:calc(111.111dvh - 78px); }

.text-2xl5 {font-size: 1.625rem; line-height: 2rem; }
.text-2xl {letter-spacing:-0.18px; }
.text-lg {line-height:1.625rem; letter-spacing: -0.09px; }
.lucide {stroke-width:1px; }
.\!stroke-3 {stroke-width:3px; }

.leading-20 {line-height:20px !important; }
.leading-26 {line-height:26px !important; }

.spacing-09 {letter-spacing:-0.09px; }
.spacing-24 {letter-spacing:0.24px; }

/* scrollbar */
::-webkit-scrollbar {width:6px; height:6px; }
::-webkit-scrollbar-thumb {background:rgb(var(--color-slate-600) / 1 );; border-radius:4px; }
::-webkit-scrollbar-thumb:hover {background:rgb(var(--color-slate-500) / 1 ); }
::-webkit-scrollbar-track {background: rgb(var(--color-slate-200) / 1 ); }

/*
#=========================================#
        content
#=========================================#
*/
.content_wrap {position:relative; display:flex; min-height:calc(100% - 78px);}

.content {padding:32px 24px; background-color:#F6FAFD; }
.content.detail_content {background-color:#fff; }

.tab-content > div {width:100% !important; }

.top-bar {height:78px; }

/* 
#=========================================#
        버튼
#=========================================#
*/
button:disabled svg {color:rgb(var(--color-slate-300) / 1 ) !important; }
.btn {box-shadow:none; font-weight:600;  }
.btn.btn-sm {padding-top:5px; padding-bottom:5px; line-height:20px; font-weight:400; }
.btn[disabled],
.btn:disabled {opacity:1; border-color:rgb(var(--color-slate-100) / var(--tw-bg-opacity)); color:rgb(var(--color-slate-300) / var(--tw-border-opacity)); background-color:rgb(var(--color-slate-100) / var(--tw-bg-opacity));  }
.btn[disabled] {pointer-events: none; cursor: not-allowed;}
.btn:focus {box-shadow:none; }

.btn-primary:hover:not(:disabled):not(:focus) {border-color:rgb(var(--color-point-600) / 1); background-color:rgb(var(--color-point-600) / 1); }
.btn-primary:active {border-color:rgb(var(--color-point-700) / 1) !important; background-color:rgb(var(--color-point-700) / 1) !important; }

.btn-primary-soft {border-color:rgb(var(--color-point-75) / 1); background-color:rgb(var(--color-point-75) / 1); }
.btn-primary-soft:hover:not(:disabled):not(:focus) {border-color:rgb(var(--color-point-100) / 1); background-color:rgb(var(--color-point-100) / 1); }
.btn-primary-soft:active {border-color:rgb(var(--color-point-200) / 1) !important; background-color:rgb(var(--color-point-200) / 1) !important; }

.btn-outline-secondary {color:rgb(var(--color-dark) / 1 ); background-color:#fff; }
.btn-outline-secondary:hover:not(:disabled):not(:focus) {background-color:rgb(var(--color-slate-75) / 1 );}
.btn-outline-secondary:active {background-color:rgb(var(--color-slate-100) / 1 ) !important;}
.btn-outline-secondary:disabled {background-color:rgb(var(--color-slate-100) / 1 );}

.btn-danger-soft {background-color:rgb(var(--color-sred-100) / 1 ); border-color:rgb(var(--color-sred-100) / 1 );}
.btn-danger-soft:hover:not(:disabled):not(:focus) {background-color:rgb(var(--color-sred-200) / 1 ); border-color:rgb(var(--color-sred-200) / 1 ); }
.btn-danger-soft:active {background-color:rgb(var(--color-sred-300) / 1 ) !important; border-color:rgb(var(--color-sred-300) / 1 ) !important; }

.btn-outline-danger:hover:not(:disabled):not(:focus) {background-color:rgb(var(--color-sred-50) / 1); }
.btn-outline-danger:active {background-color:rgb(var(--color-sred-100) / 1) !important; }

.btn-outline-primary:hover:not(:disabled):not(:focus) {background-color:rgb(var(--color-point-75) / 1); }
.btn-outline-primary:active {background-color:rgb(var(--color-point-100) / 1) !important; }

/*
#=========================================#
        로딩
#=========================================#
*/
#loadingContainer{ display: flex; position: fixed; width: 100%;height: 100%; top: 0; left: 0; background: #00000047; z-index: 99999; justify-content: center; align-items: center; }

/*
#=========================================#
        form 
#=========================================#
*/
.form-control {border:1px solid rgb(var(--color-slate-100) / 1 ); background-color:#fff; box-shadow:none; }
.form-control:focus {border-color:rgb(var(--color-primary) / 1); box-shadow:none; }
.form-control.error {border-color:rgb(var(--color-danger) / 1 ); }
.form-control.error:focus {border-color:rgb(var(--color-primary) / 1); box-shadow:none; }
.form-control::placeholder {color:rgb(var(--color-slate-300) / 1); }
.form-control:disabled, .form-control:not(.noonly)[readonly] {border:1px solid rgb(var(--color-slate-200) / 1); color:rgb(var(--color-slate-300) / 1); background-color:rgb(var(--color-slate-100) / 1); }
.form-control.noonly[readonly] {background-color:#fff; }

.table .form-control:disabled {border:1px solid rgb(var(--color-slate-100) / 1); background-color:rgb(var(--color-slate-100) / 1);}

.form-control-lg {padding-top:9px; padding-bottom:9px; font-size:16px; }

[type="file"].form-control {padding:5px 8px; border:1px solid rgb(var(--color-slate-200) / var(--tw-border-opacity)); }

[type='checkbox']{width:13px; height:13px; background-position: 0 30px;--tw-border-opacity: 0.5!important;border-color:rgb(var(--color-slate-500) / var(--tw-bg-opacity))!important; border-radius:2px !important; background-color:transparent; }
[type='checkbox']:disabled {border-color:rgb(var(--color-slate-300) / var(--tw-bg-opacity))!important; background-color:rgb(var(--color-slate-100) / var(--tw-bg-opacity)) !important;}

[type='radio']{width:13px; height:13px; background-position: 0 30px;--tw-border-opacity: 0.5!important;border-color:rgb(var(--color-slate-500) / var(--tw-bg-opacity))!important; border-radius:50% !important; background-color:transparent; }
[type='radio']:disabled {border-color:rgb(var(--color-slate-300) / var(--tw-bg-opacity))!important; background-color:rgb(var(--color-slate-100) / var(--tw-bg-opacity)) !important;}


[type='checkbox']:checked, [type='radio']:checked{border-color:rgb(var(--color-primary) / 1) !important; background-position: 0 0px;}
[type='checkbox']:focus,
[type='radio']:focus {box-shadow:none !important; }


/* 톰셀렉트 커스텀 */
.tom-select .ts-input {height:38px; min-height:38px; padding:7px 36px 7px 12px; box-shadow:none; border:1px solid rgb(var(--color-slate-100) / 1 ); color:#363a44; cursor:pointer; border-radius:6px; background-size:16px; background-position:center right 11px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206L8%2010L12%206%22%20stroke%3D%22%23464D5E%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); }
.tom-select .ts-input:hover {background-color:rgb(var(--color-slate-75) / 1 )}
.tom-select .ts-input input::placeholder {color:rgb(var(--color-slate-300) / 1); }
.tom-select .ts-input.has-items input {display:none !important; }
.tom-select .ts-input .item {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tom-select .ts-input.focus {border-color:rgb(var(--color-primary) / 1); }
/* .tom-select .ts-input.focus .item {color:rgb(var(--color-primary) / 1); } */
.tom-select.tom-select-lg .ts-input {height:48px; min-height:48px; padding:12px 36px 12px 16px; font-size:16px; font-weight:300; }
.tom-select.tom-select-lg .ts-input input {font-size:16px; font-weight:300; }

.ts-dropdown {z-index:99999; width:max-content; border:0 none; padding:8px; margin-top:8px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06); border-radius:8px; }
.ts-dropdown .option {padding:8px; font-size:12px; line-height:20px; color:#363A44; border-radius:8px; }
.ts-dropdown .option:hover:not(.active) {color:#363A44; background-color:rgb(var(--color-point-75) / 1 ); }
.ts-dropdown .option.active {font-weight:600; letter-spacing:0.24px; color:#363A44; background-color:rgb(var(--color-primary) / 0.15 ); }
.ts-dropdown-content {max-height:272px; }

.custom_form .tom-select .ts-input {position:relative; left:1px; min-width:100px; border-radius:6px 0 0 6px; }
.custom_form > div:last-of-type {z-index:2; position:relative; }

.switch_check input {display:none; }
.switch_check label {position:relative; display:block; width:76px; height:30px; padding:4px 8px; border-radius:6px; background-color:#EDEEF1; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) inset; transition:all 0.3s; }
.switch_check label:before {content:''; position:absolute; top:5px; left:4px; width:16px; height:20px; background-color:#fff; border-radius:6px; transition:all 0.3s; }
.switch_check label:after {content:'OFF'; display:block; width:40px; height:22px; margin-left:auto; text-align:center; line-height:22px; color:rgb(var(--color-slate-300) / 1); transition:all 0.3s; }
.switch_check input:checked + label {background-color:#21B2C2; }
.switch_check input:checked + label:before {left:53px; }
.switch_check input:checked + label:after {content:'스케줄'; margin-left:0; color:#fff; }

.device_btn {display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:6px; background-color:#EDEEF1; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) inset; }
.device_btn input {display:none; }
.device_btn label {padding:0px 8px; height:22px; line-height:22px; border-radius:4px; color:#B3B9C6; cursor:pointer; transition:all 0.3s; }
.device_btn input:checked + label {background-color:#5993FF; color:#fff; }   

.dropdown-menu {padding-top:8px; }
.dropdown-menu .dropdown-content {margin-top:0 !important; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04); border-radius:8px; }
.dropdown-menu .dropdown-content a {font-size:12px; line-height:20px; border-radius:8px; }
.dropdown-menu .dropdown-content a:hover {color:#363A44; font-weight:400; background-color:rgb(var(--color-point-75) / 1 ); }

/*
#=========================================#
        테이블 상태
#=========================================#
*/
.table th {position:relative; padding:14px 16px; border-bottom-width:0px; }
.table td {padding:21px 16px; border-bottom-width:0px; }
.table tr.type02 td {padding:17px 16px; }
.table td.nodata {padding:25px 16px; }
.table.table_padtype02 td {padding:25px 16px; }
.table.table_padtype04 td {padding:17px 16px; }
.table.table-hover td {cursor:pointer; }
.table.table-striped tr:nth-of-type(even) td {background-color:rgb(var(--color-slate-50) / 1 ); }
.table.table-striped tr:nth-of-type(odd) td {background-color:#fff; }
.table.table-hover tr:nth-of-type(even):hover td,
.table.table-hover tr:nth-of-type(odd):hover td {background-color:rgb(var(--color-point-75) / 0.3 ); }
.table.table-border td {border-bottom:0.5px solid rgb(var(--color-slate-100) / 1 ); }

.table.table-sm th {padding:12px 16px; }
.table.table-sm td {padding:16px; }
.table.table_padtype03 td {padding:15px 16px; }

.table .sort {display:inline-flex; vertical-align:middle; width:16px; height:16px; margin-left:8px; background:url('../images/updown.svg') no-repeat center center; }
.table .sort.up {background:url('../images/up.svg?11') no-repeat center center; }
.table .sort.down {background:url('../images/down.svg?11') no-repeat center center; }

.table .allset {position:absolute; right:16px; top:14px; padding:1px; }

.link_table {border-collapse:separate; border-spacing:0 8px; }
.link_table td {padding:24px 0; }
.link_table td:first-of-type {padding-left:8px; }
.link_table td:nth-of-type(2) {padding:24px; }
.link_table td:last-of-type {padding-right:8px; }


.detail_table {border-collapse:separate; border-spacing:0; width:100%; }
.detail_table tr:first-of-type th:first-of-type {border-radius:8px 0 0 0; }
.detail_table tr:last-of-type th:first-of-type {border-radius:0 0 0 8px; }
.detail_table tr:first-of-type td:last-of-type {border-radius:0 8px 0 0; }
.detail_table tr:last-of-type td:last-of-type {border-radius:0 0 8px 0; }
.detail_table tr:last-of-type th,
.detail_table tr:last-of-type td {border-top:0 none; }
.detail_table tr th,
.detail_table tr td:not(:last-of-type) {border-right:0 none; }
.detail_table th ,
.detail_table td {height:62px; padding:12px 16px; text-align:left; border:0.5px solid rgb(var(--color-slate-100) / 1 ); }
.detail_table th {font-weight:400; color:rgb(var(--color-slate-600) / 1 ); background-color:rgb(var(--color-slate-50) / 1 );}
.detail_table td {font-weight:600; background-color:#fff; }
.detail_table td input,
.detail_table td .tom-select .ts-input {font-weight:400; }

.schedule_table th {padding:12px 16px; border-bottom:0.5px solid #EEF0F2; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.24px; color:rgb(var(--color-slate-600) / 1 ); background-color:rgb(var(--color-point-50) / 1 ); text-align:center; }
.schedule_table th.text-primary {color:rgb(var(--color-point-500) / 1 ); }
.schedule_table tbody th {height:72px; padding:27px 0; }
.schedule_table td {position:relative; padding:0; cursor:pointer; }
.schedule_table td:before {content:''; z-index:1; position:absolute; right:0; top:0; width:100%; height:100%; border:0.5px solid #F6F7F9; }
.schedule_table td:hover,
.schedule_table td.on {background:rgb(var(--color-slate-50) / 1 ) url('../images/+.svg') no-repeat center center; }

.schedule_data {z-index:5; position:relative; display:flex; flex-direction:column; gap:4px; width:100%; height:72px; padding:12px 16px; border:1px solid rgb(var(--color-sgreen-200) / 1 ); background-color:rgb(var(--color-sgreen-50) / 1 ); cursor:pointer; }
.schedule_data .top {display:flex; align-items:center; justify-content:space-between; }
.schedule_data .top .rank {display:flex; align-items:center; gap:4px; font-weight:600; }
.schedule_data .top .rank svg {color:rgb(var(--color-sgreen-500) / 1 ); }
.schedule_data .top .rank svg.monitor {color:rgb(var(--color-point-500) / 1 ); }
.schedule_data .top .amount {font-size:12px; font-weight:500; letter-spacing:0.24px; color:rgb(var(--color-sgreen-600) / 1 ); }
.schedule_data .bot {display:flex; align-items:center; justify-content:flex-end; gap:0 4px; flex-wrap:wrap; }
.schedule_data .bot span {font-size:12px; line-height:20px; color:rgb(var(--color-slate-200) / 1)}
.schedule_data .bot b {font-size:12px; line-height:20px; font-weight:400; color:rgb(var(--color-slate-600) / 1 ); }
.schedule_data .bot i {font-size:12px; line-height:20px; color:rgb(var(--color-sgreen-100) / 1 ); font-style:normal; }

.schedule_data.active {border:2px solid rgb(var(--color-point-500) / 1 ); background-color:#fff; }
.schedule_data.active .top .rank svg {color:rgb(var(--color-slate-500) / 1 ); }
.schedule_data.active .top .amount {color:rgb(var(--color-slate-900) / 1 ); }
.schedule_data.active .bot i {color:rgb(var(--color-slate-100) / 1 ); }

.schedule_popover {z-index:10; position:absolute; left:0; top:0; display:none; width:341px;  border:1px solid rgb(var(--color-slate-100) / 1 ); background-color:#fff; border-radius:8px; }
.schedule_popover:before {content:''; position:absolute; left:-12px; top:calc(50% - 11px); width:12px; height:22px; background:url('../images/popover_arrow.svg') no-repeat center center / 100% 100%; }


/*
#=========================================#
        툴팁
#=========================================#
*/
.tippy-box {color:rgb(var(--color-dark) / 1 ); border:1px solid #EDEEF1; background-color:#FCFCFC; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06); }
.tippy-box .tippy-content {padding:16px; }
.tippy-svg-arrow {display:none; }

.custom_hover {position:relative; height:16px; }
.custom_hover .hover_box {z-index:-999; opacity:0; position:absolute; bottom:100%; left:0; width:450px; padding:8px 16px; color:#fff; background-color:rgb(var(--color-slate-400) / 1); border-radius:8px; transition:opacity 0.3s; }
.custom_hover:hover .hover_box {z-index:10; opacity:1; }

/*
#=========================================#
        shadow
#=========================================#
*/
.shadow {box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); }
.shadow-md {box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04); }
.shadow-lg {box-shadow: 0 4px 24px 0 rgba(55, 110, 255, 0.12); }

/*
#=========================================#
        라이트피커 커스텀
#=========================================#
*/
.nav.nav-boxed-tabs .nav-item .nav-link {background-color:#F8FAFF; border-radius:0; }
.nav.nav-boxed-tabs .nav-item .nav-link.active {border-radius:4px; }


/*
#=========================================#
        pagina
#=========================================#
*/
.pagination .page-item .page-link {min-width:32px; min-height:32px; padding:0; }
.pagination .page-item .page-link:focus {box-shadow:none; }
.pagination .page-item .page-link:not(.num) {border:1px solid rgb(var(--color-slate-100) / 1 ); color:rgb(var(--color-slate-700) / 1 );}
.pagination .page-item .page-link:not(.num):hover {background-color:rgb(var(--color-slate-75) / 1); }
.pagination .page-item .page-link:not(.num):active {background-color:rgb(var(--color-slate-200) / 1); }
.pagination .page-item .page-link.num {box-shadow:none; }
.pagination .page-item.active .page-link.num {border:0 none; color:#fff; font-weight:600; background-color:rgb(var(--color-primary) / 1); }
.pagination .page-item .page-link.num:hover {background-color:rgb(var(--color-point-100) / 1); }
.pagination .page-item .page-link.num:active {background-color:rgb(var(--color-point-200) / 1); }
.pagination .page-item .page-link[aria-disabled="true"],
.pagination .page-item .page-link[disabled] {color:rgb(var(--color-slate-300) / 1 ); background-color:rgb(var(--color-slate-100) / 1 ); }
.pagination .page-item .page-link[aria-disabled="true"],
.pagination .page-item .page-link[disabled] {pointer-events: none; cursor: not-allowed;}
/*
#=========================================#
        login 페이지 커스텀
#=========================================#
*/
.login_wrap {min-height:100dvh; background: url('../images/login_bg.png') no-repeat center top , linear-gradient(180deg, var(--Color-Sources-Primary-100, #D9E6FF) 0%, var(--Color-Sources-Primary-50, #EEF4FF) 100%); }

/*
#=========================================#
        모달 커스텀
#=========================================#
*/
.modal .modal-dialog {display:flex; align-items:center; width:420px; height:100%; }
.modal.show > .modal-dialog {margin-top:0; }
.modal .modal-dialog.modal-sm {width:300px; }
.modal .modal-dialog.modal-sm2 {width:420px; }
.modal .modal-dialog.modal-md {width:520px; }
.modal .modal-dialog.modal-lg {width:700px; }
.modal .modal-dialog.modal-2lg {width:720px; }
.modal .modal-dialog.modal-xl {width:960px; }
.modal .modal-dialog.modal-2xl {width:940px; }

.modal-content {border-radius:8px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04); }
.modal-header {justify-content:space-between; height:62px; padding:18px 24px; border:0 none; letter-spacing:-0.09px; line-height:26px; }
.modal-body {line-height:1.375rem; }
.modal-footer {border:0 none; }

/*
#=========================================#
        hover 커스텀
#=========================================#
*/
.custom_hover {position:relative; }
.custom_hover .hover_item {z-index:-999; opacity:0; position:absolute; top:50%; left:28px; padding:8px 16px; color:#fff; background-color:rgb(var(--color-slate-400) / 1); border-radius:8px; transform:translateY(-50%); transition:opacity 0.3s; }
.custom_hover:hover .hover_item {z-index:10; opacity:1; }


.schedule_form_1 {width:calc(40% - 154px); }
.schedule_form_2 {width:calc(60% - 154px); }
.schedule_form_3 {width:218px; }

/*
#=========================================#
        tab
#=========================================#
*/
.tab-content a:hover {background-color:rgb(var(--color-point-75) / 1 ) !important; }
.tab-content a:active {background-color:rgb(var(--color-point-100) / 1 ) !important; }
.btn-tab .btn:not(.btn-primary):hover {background-color:rgb(var(--color-point-75) / 1 ) !important; }
.btn-tab .btn:not(.btn-primary):active {background-color:rgb(var(--color-point-100) / 1 ) !important; }

/*
#=========================================#
        기타
#=========================================#
*/
.top-bar .ts-control .has-items {font-weight:600; color:#363A44; }