:root {
    --coolgray-cg-900: #12161A;
    --coolgray-cg-800: #292E33;
    --coolgray-cg-700: #3D454D;
    --coolgray-cg-600: #525C66;
    --coolgray-cg-500: #6C7680;
    --coolgray-cg-400: #828D99;
    --coolgray-cg-300: #98A5B3;
    --coolgray-cg-200: #B8C2CC;
    --coolgray-cg-100: #DAE0E6;
    --coolgray-cg-60: #E4EAF0;
    --coolgray-cg-40: #EDF1F5;
    --coolgray-cg-20: #F7F9FA;
    --coolgray-cg-00: #ffffff;

    --main-bg-color: #F4F5FA;

    --main-color: #0080FF;
    --main-color-16: #0080FF29;
    --main-darken-1: #0060E5;

    --sub-main-color: #149FE6;
    --sub-main-color-hover: #128fce;
    --sub-main-color-16: #16B1FF29;

    --orange-darken-2: #CC4400;
    --orange-darken-3: #B22D00;

    --warning-main: #FFB400;
    --warning-main-16: #FFB40029;
    --warning-dark: #E6A200;

    --secondary-main: #8A8D93;
}

html, body {
    background-color: var(--main-bg-color) !important;
}

/* 버튼 색상 */
.main-btn {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.main-btn:hover {
    color: white;
    background-color: var(--main-darken-1);
    border-color: var(--main-darken-1);
}

/* ------------ 메뉴바 영역 ----------- */

.over {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.menu-right-border {
    border-right: 1px solid var(--coolgray-cg-200);
}

.info-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    max-height: 68px;
}

.menu-theme {
    background-color: var(--main-bg-color) !important;
    color: #433c50;
}

.divider {
    width: 1px;
    height: 14px;
    background-color: var(--coolgray-cg-700);
}

.home-info {
    background-color: var(--coolgray-cg-700);
    padding: 12px 16px;
    width: 100%;
}

.menu-box {
    padding: 10px 0 10px 55px;
}

.info-button::-webkit-scrollbar{
    display:none;
}

.admin-theme {
    background-color: #2972BA !important;
    color: var(--coolgray-cg-00);
}

.admin-info {
    background-color: #214D79;
    padding: 20px 22px;
    width: 100%;
}

.admin-text {
    overflow: hidden;
    max-height: 22px;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    background: rgba(33, 77, 121, 0.59);
}

.menu-vertical .menu-item .menu-toggle::after {
    color: var(--coolgray-cg-00);
}

.menu-toggle::after {
    color: var(--coolgray-cg-00);
}

.light-style .menu-vertical .menu-item.open > .menu-toggle {
    background: rgba(33, 77, 121, 0.59);
    box-shadow: 0 0.1875rem 0.375rem rgba(46, 38, 61, 0.18);
}

.light-style .menu-vertical .menu-item.open .menu-link:hover {
    background: rgba(33, 77, 121, 0.59) !important
}

.light-style .menu-vertical .menu-item.open > .menu-sub > .menu-item.active .menu-link:hover {
    background: rgba(33, 77, 121, 0.59) !important
}

.light-style .menu-vertical .menu-item.open > .menu-sub > .menu-item .menu-link:hover {
    background: rgba(33, 77, 121, 0.31) !important;
}


.light-style .menu-vertical .menu-item .menu-link:hover {
    background: rgba(33, 77, 121, 0.31) !important;
}

.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item > .menu-sub > .menu-item > .menu-link {
    padding-left: 2rem !important;
}

.logout {
    color: var(--coolgray-cg-900) !important;
    width: 196px;
    background-color: #E9F4FF !important;
    border-color: #E9F4FF !important;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
}

.logout:hover {
    color: var(--coolgray-cg-900) !important;
    background-color: #CBD7E1FF !important;
    border-color: #CBD7E1FF !important;
}

.logout-wrapper {
    margin-top: 2rem;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
}

/* ------------ input box 영역 ----------- */
.form-floating-outline .form-control:focus {
    border-color: var(--main-color) !important;
}

.form-control:focus {
    border-color: var(--main-color) !important;
}

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

.form-floating-outline .form-control:focus {
    border-color: var(--main-color) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    background: url("../custom/calendar-icon.svg") no-repeat;
    width: 25px;
    height: 25px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

.form-style {
    display: block;
    width: 100%;
    padding: 0.8555rem 1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.375;
    color: #433c50;
    appearance: unset !important;
    background-color: #ffffff !important;
    background-clip: padding-box;
    border-radius: 0.375rem;
}

/* ------------ 뱃지 영역 ----------- */
/* 오늘 뱃지 */
/* <span class="badge rounded-pill bg-danger px-4 today-badge">오늘</span> */
.today-badge {
    background-color: var(--orange-darken-3) !important;
}

/* 전체 뱃지 */
/* <span class="badge rounded-pill px-4 all-badge">전체</span> */
.all-badge {
    color: var(--sub-main-color);
    background-color: var(--sub-main-color-16);
}

/* 정산완료 뱃지 */
/* <span class="badge rounded-pill px-4 finish-badge">정산완료</span> */
.finish-badge {
    color: white;
    background-color: var(--sub-main-color);
}

/* 메인컬러 뱃지 */
/* <span class="badge rounded-pill px-4 main-badge">완료</span> */
.main-badge {
    color: white;
    background-color: var(--main-color);
}

/* 노란 뱃지 */
/* <span class="badge rounded-pill px-4 yellow-badge">어제</span> */
.yellow-badge {
    color: var(--warning-main);
    background-color: var(--warning-main-16);
}

/* ------------ 페이지네이션 영역 ----------- */
.page-item.active .page-link {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}

.page-item.active .page-link:hover {
    border-color: var(--main-darken-1);
    background-color: var(--main-darken-1);
}

.page-item.active .page-link:focus {
    border-color: var(--main-darken-1);
    background-color: var(--main-darken-1);
}

.page-item .page-link:hover {
    background-color: var(--main-color-16);
    color: var(--main-color);
}

.page-item .page-link:focus {
    background-color: var(--main-color-16);
    color: var(--main-color);
}

.form-select:focus {
    border-color: var(--main-color) !important;
}

@media screen and (max-width: 992px) {
    .custom-pagination {
        justify-content: unset !important;
    }
}

/* ------------ 테이블 영역 ----------- */
.text-main-color {
    color: var(--main-color) !important;
}

.text-yellow-color {
    color: var(--warning-dark) !important;
}

/* ------------ 버튼 영역 ----------- */

.apply-btn {
    min-width: 142px;
    height: 100%;
    min-height: 38px;
    padding: 0;
    color: var(--coolgray-cg-00);
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.apply-btn:hover {
    color: var(--coolgray-cg-00);
    background-color: var(--main-darken-1) !important;
    border-color: var(--main-darken-1) !important;
}

.table-btn {
    color: var(--coolgray-cg-00);
    background-color: var(--coolgray-cg-600) !important;
    border-color: var(--coolgray-cg-600) !important;
}

.table-btn:hover {
    color: var(--coolgray-cg-00);
    background-color: var(--coolgray-cg-800) !important;
    border-color: var(--coolgray-cg-800) !important;
}

.badge-outline {
    outline: none;
    border: none;
}

.setting-btn {
    background-color: var(--coolgray-cg-200);
    border: none;
    margin-left: 24px;
    width: 100% !important;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}

.setting-btn:focus, .btn-secondary:focus  {
    color: #fff;
    background-color: #7c7f84;
    border-color: #7c7f84;
}

/* ------------ 모달창 영역 ----------- */

.modal-title-style {
    padding: 9px 8px 17px 8px !important;
    border-bottom: 2px solid #2E263D38;
}

.domain-info {
    padding-top: 32px 0 0 0;
}