:root {
    --bg-color: #ebeff2;
    --card-background-color: #ebeff2;

    --text-box-color: #f5f5f5;
    --deeper-text-box-color: #d4d9de;
    --deeper-background-color: #e8e3ea;

    --gray-bg-bx-color: #f6f6f6;
    --font-color-deep: #3e3e3e;
    /* 버튼 관련 */
    --button-disable-color: #d5d5d5;
    /* 버튼 관련 */
    /* 탭 관련*/
    --tab-txt-color-check: #ffffff;
    --tab-txt-color-hover: #ffffff;
    --tab-uncheck-color: #ffffff;
    /* /탭 관련*/
    --option-button-active-color: var(--main-color);
    --option-button-default-color: var(--main-card-color);

    --switch-color: var(--main-color);
    --text-default-color: #ffffff;

    /* 글씨체 관련 */
    --page-name-ft-color: #534a99;
    --point-ft-color: #1f1b51;

    --important-font-color: #111111;
    --font-color: #333333;
    --less-important-color: #666666;
    --least-important-color: #888888;

    --safe-font-color: #51a2f9;
    --caution-font-color: #f5c34e;
    --warning-font-color: #f98d62;
    --danger-font-color: #df3838;
    --safe-zone-font-color: #51f9519d;

    --title-font-color: var(--important-font-color);

    --safe-color: #849ff9;
    --attention-color: #549e46;
    --caution-color: #fbce65;
    --warning-color: #ffb488;
    --danger-color: #f82e2e;
    --solution-color: #549e46;
    --safe-zone-color: #549e46;

    --gray-box-color: #f2f2f2a1;

    /* 사이드바 관련 */

    --navibar-width: 65px;

    /* /사이드바 관련 */

    /* 로그인 버튼 관련 */
    --lgbt-basic-color: #00aaea;
    --lgbt-deeper-color: #008fcc;
    --lgbt-hover-basic-color: #0096d1;
    --lgbt-hover-deeper-color: #007bb3;
    --lgbt-font-color: #ffffff;
    /* /로그인 버튼 관련 */

    /* 체크박스 관련 */

    --hr-color: #777777;
    --row-selected-color: #f5f5f5;
    /* //f5f5f5 */

    /* 경계선 색깔 */
    --gray-border-color: rgba(0, 0, 0, 0.3);
    /* /경계선 색깔 */

    /* cctv 리모컨 관련 */
    --remocon-btn-color: #f0f0f0;
    --remocon-bg-color: #f9f9f9;
    --remocon-point-color: #777777;
    --remocon-border-color: #e6e6e6;

    --dbutton-color: #ff5a5a;
    --dbutton-hover-color: #e43a3a;
}

[data-theme='purple'] {
    --main-color: #796397;
    --main-mid-color: rgb(73, 67, 121);
    /* --main-card-color: #f9f8fc; */
    --main-card-color: #f3f2f8;
    --main-deeper-color: #050e2c;
    --point-color: #5e536e;
    --point-light-color: #6f6383;
    --sidebar-item-hover: #43395376;
    --sidebar-item-selected: rgba(227, 221, 245, 0.2);
    --button-hover-color: #3e3749;
    --mbutton-hover-color: #6a4f90;
    /* 버튼 호버 색상 */
    --tab-hover-color: #9584ae;
    --main-chartB-color: #ffffff;
    /* chart 배경색 */
    --main-chartL-color: #747474;
    /* chart 라벨색 */

    --content-card-hearder-background-color: var(--main-color);
    --content-card-background-color: var(--main-card-color);
    --content-card-line-color: var(--main-card-color);
    --button-color: var(--point-color);
    --mbutton-color: var(--main-color);
    --tab-txt-color-uncheck: var(--font-color);
    --tab-color: var(--button-color);
    --navibar-basic-color: var(--main-color);
    --navibar-mid-color: var(--main-mid-color);
    --navibar-deeper-color: var(--main-deeper-color);
    --sub-navbar-basic-color: var(--point-color);
    --subsub-light-color: var(--point-light-color);
    --mobile-menubar-color: var(--point-color);
    --checked-color: var(--point-color);
}

[data-theme='green'] {
    --main-color: #457a82;
    /* 채도 있는 진한 터콰이즈 그린 */
    --main-mid-color: #457a82;
    /* 중간톤의 밝은 청록색 */
    --main-card-color: #dfeaee;
    /* 유지: 연한 청록 카드 배경 */
    --main-deeper-color: #457a82;
    /* 유지 */
    --point-color: #457a82;
    /* 유지 */
    --point-light-color: #457a82;
    /* 밝고 채도 높은 민트빛 */
    --sidebar-item-hover: #457a82;
    /* 밝은 청록 hover 반투명 */
    --sidebar-item-selected: #457a82;
    /* 청록 계열 선택 배경 */
    --button-hover-color: #457a82;
    /* 진한 청록 hover */
    --mbutton-hover-color: #457a82;
    /* 모바일 hover 밝은 톤 */
    --tab-hover-color: #457a82;
    /* 산뜻한 민트 hover */
    --main-chartB-color: #ffffff;
    /* chart 배경색 */
    --main-chartL-color: #747474;
    /* chart 라벨색 */

    --content-card-hearder-background-color: var(--main-color);
    --content-card-background-color: var(--main-card-color);
    --content-card-line-color: var(--main-card-color);
    --button-color: var(--point-color);
    --mbutton-color: var(--main-color);
    --tab-txt-color-uncheck: var(--font-color);
    --tab-color: var(--button-color);
    --navibar-basic-color: var(--main-color);
    --navibar-mid-color: var(--main-mid-color);
    --navibar-deeper-color: var(--main-deeper-color);
    --sub-navbar-basic-color: var(--point-color);
    --subsub-light-color: var(--point-light-color);
    --mobile-menubar-color: var(--point-color);
    --checked-color: var(--point-color);
}

[data-theme='blue'] {
    --main-color: #77a9d6;
    /* 메인 색상 (밝은 파란색) */
    --main-mid-color: #3c5a8b;
    /* 더 어두운 파란색 */
    --main-card-color: #eff9fc;
    --main-deeper-color: #001a42;
    /* 가장 어두운 파란색 */
    --sidebar-item-hover: rgba(60, 90, 139, 0.5);
    /* 사이드바 아이템 호버 색상 */
    --sidebar-item-selected: rgba(200, 220, 245, 0.2);
    /* 사이드바 아이템 선택 색상 */
    --point-color: #536b8f;
    /* 포인트 색상 */
    --point-light-color: #6e8ebc;
    --button-hover-color: #385174;
    /* 버튼 호버 색상 */
    --mbutton-hover-color: #719abd;
    /* 버튼 호버 색상 */
    --tab-hover-color: #ebf1f7;
    /* 탭 호버 색상 */
    --main-chartB-color: #ffffff;
    /* chart 배경색 */
    --main-chartL-color: #747474;
    /* chart 라벨색 */

    --content-card-hearder-background-color: var(--main-color);
    --content-card-background-color: var(--main-card-color);
    --button-color: var(--point-color);
    --mbutton-color: var(--main-color);
    --tab-txt-color-uncheck: var(--font-color);
    --tab-color: var(--button-color);
    --navibar-basic-color: var(--main-color);
    --navibar-mid-color: var(--main-mid-color);
    --navibar-deeper-color: var(--main-deeper-color);
    --sub-navbar-basic-color: var(--point-color);
    --subsub-light-color: var(--point-light-color);
    --mobile-menubar-color: var(--point-color);
    --checked-color: var(--point-color);
}

/* 로그인 버튼 */
.login-btn-custom {
    --bs-btn-color: var(--lgbt-font-color);
    --bs-btn-border-color: var(--lgbt-basic-color);
    --bs-btn-hover-color: var(--lgbt-font-color);
    --bs-btn-hover-bg: var(--lgbt-deeper-color);
    --bs-btn-hover-border-color: var(--lgbt-basic-color);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: var(--lgbt-font-color);
    --bs-btn-active-bg: var(--lgbt-basic-color);
    --bs-btn-active-border-color: var(--lgbt-basic-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--lgbt-font-color);
    --bs-btn-disabled-bg: var(--lgbt-basic-color);
    --bs-btn-disabled-border-color: var(--lgbt-basic-color);

    background-color: var(--lgbt-basic-color);
    /* ✅ 단색 배경 */
    box-shadow: 2px 3px 5px rgba(107, 107, 107, 0.1) !important;
    font-family: 'NanumSquareRegular';
    border: 1px solid var(--lgbt-basic-color);
}

.login-btn-custom:hover {
    background-color: var(--lgbt-hover-basic-color);
    /* ✅ hover 시 단색 */
    box-shadow: 2px 3px 5px rgba(107, 107, 107, 0.1) !important;
}

/* /로그인 버튼 */

.overlay {
    border: none !important;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 60px;
    left: calc(var(--navibar-width));
    /* left: calc(var(--navibar-width) - 10px); */

    background-image: linear-gradient(180deg, var(--navibar-basic-color), var(--navibar-deeper-color));

    overflow-x: hidden;
    transition: width 0.3s;
    color: #ffffff;
}

/* /네비바 커스텀 */

/* 배경에 깔리는 가장 큰 카드 */
.bg-card-custom {
    position: relative;
    /* 추가 */
    width: 100% !important;
    max-width: none !important;
    border-radius: 20px;
    border: none;
    background-color: var(--card-background-color);
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); */
    /* overflow-y: auto; */
    margin: 0 !important;
    padding: 0 !important;
    /* border: 3px solid #4bde11 !important; */
}

/* .bg-card-custom::before {
    content: '';
    position: absolute;
    left: -15px; 
    top: 20px; 
    width: 10;
    height: 10;
 
} */
/* /배경에 깔리는 가장 큰 카드 */

/* .page-name-custom {
    font-size: 23px !important;
    color: var(--page-name-ft-color) !important;
    font-weight: 700;
} */

/* 대시보드 내부 카드 */
.inner-card-custom {
    height: 95%;
    border-radius: 15px !important;
    max-width: none !important;
    border: none;
    background-color: #ffffff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0) !important;
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);  */
}

.inner-card-header-custom {
    border-radius: 10px;
    background-color: transparent;
    border: none;
    color: var(--important-font-color);
    font-family: 'NanumSquareBold';
}

/* /대시보드 내부 카드 */

/* 텍스트관련 */
.cardtext-custom-sm {
    font-size: 14px !important;
    color: var(--font-color) !important;
}

.less-important-text {
    font-size: 16px;
    color: var(--less-important-color) !important;
}

/* /텍스트관련 */

/* 박스 */
.row-box {
    background-color: var(--text-box-color);
    border-radius: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* 200% 이상여기서부터 md 그리고 모바일임 */
@media (max-width: 991px) {
    .nanum-regular {
        font-size: 8px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .worker-status-img {
        width: 50px !important;
    }

    .worker-status-card .flex-grow-1 {
        padding: 1rem 0 !important;
        /* 박스 안 여백 줄이기 */
        font-size: 1rem !important;
        /* 텍스트 크기 조정 */
    }

    .worker-status-card .fs-2 {
        font-size: 1.25rem !important;
        /* value 크기 약간 줄임 */
    }

    .db-icon-mb-style {
        height: 25px !important;
    }

    .margin-top-custom {
        margin-top: -20px;
    }

    .rec-btn-mb-mg {
        margin-top: 10px !important;
    }

    /* .custom-mg-remocon-under {
        margin-top: -30px;
    } */
    .remocon-col-height {
        height: 100% !important;
    }

    .remocon-mb-mg {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .map-ratio {
        aspect-ratio: 5/3 !important;
    }

    .ratio-custom {
        aspect-ratio: 5/3 !important;
    }

    .option-btn-height {
        height: 20px;
    }

    .circle-tri-custom-height {
        height: 15px;
    }

    .tri-custom-height {
        height: 12px;
    }

    .rac-icon-height {
        height: 18px;
    }

    .center-circle-wh-custom {
        width: 30px;
        height: 30px;
    }

    .pushMsg {
        background-color: white;
        padding: 10px;
        border-radius: 15px;
        width: 90% !important;
        padding-inline: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .pushMsg-contents {
        color: var(--font-color);
        font-family: 'NanumSquareBold';
        font-size: 15px !important;
    }

    .siren-height {
        height: 17px !important;
    }

    .monitor-icon-height {
        height: 40px;
    }

    .micon-col-mg {
        margin-right: 0px;
    }

    .health-info-row {
        margin-right: 0px !important;
    }

    .vertical-line-xl {
        border-right: 0px solid rgba(0, 0, 0, 0.2) !important;
    }

    .br-custom {
        margin-top: 10px !important;
        margin-left: -40px !important;
        margin-right: 0px !important;
    }

    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 60px;
    }

    .cardtext-custom-bg {
        font-size: 15px !important;
        color: var(--font-color) !important;
    }

    .width-custom {
        width: 100%;
    }

    .safety-chart-height {
        height: 50%;
    }

    .pin-icon-size {
        height: 25px;
        width: 30px;
    }

    /* .flatpickr-day {
        font-size: 9px;
        height: 25px !important;
        display: flex;
        justify-content: center; 
        align-items: center; 
    } */
    .custom-justify {
        justify-content: flex-start !important;
    }

    .small-font {
        font-size: 11px;
    }

    .medium-font {
        font-size: 12px;
        font-family: 'NanumSquareRegular';
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 13px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 13px !important;
    }

    .semi-big-font {
        font-size: 15px !important;
    }

    .big-font {
        font-size: 16px !important;
    }

    .large-font {
        font-size: 18px;
    }

    .xlarge-font {
        font-size: 22px;
    }

    .user-icon {
        height: 60px !important;
    }

    .title-custom {
        font-size: 18px;
        color: var(--font-color);
        font-weight: bold;
        /* 글씨를 굵게 설정 */
    }

    .date-text {
        font-size: 30px;
    }

    .chart-map-row {
        height: 400px;
    }

    .big-important-text {
        font-size: 20px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 5%;
        border: none !important;
    }

    .iconHeight {
        height: 55px;
    }

    .monitoring-icon {
        height: 18px;
    }

    .custom-margin {
        margin-top: 15px;
    }

    .small-sky-icon {
        height: 30px;
    }

    /* .donut-chart-height {
        height: 45%;
    } */
}

/* 175% 이하 여기서부터 lg */
@media (min-width: 992px) and (max-width: 1199px) {
    .nanum-regular {
        font-size: 8px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .worker-status-card .flex-grow-1 {
        padding: 1rem 0 !important;
        /* 박스 안 여백 줄이기 */
        font-size: 1rem !important;
        /* 텍스트 크기 조정 */
    }

    .worker-status-card .fs-2 {
        font-size: 1.25rem !important;
        /* value 크기 약간 줄임 */
    }

    .db-icon-mb-style {
        height: 25px !important;
    }

    .mg-hr-donut {
        margin-top: 130px !important;
    }

    .mg-hr-donut2 {
        margin-top: 130px !important;
    }

    .option-btn-height {
        height: 18px;
    }

    .ratio-custom {
        aspect-ratio: 2/5 !important;
    }

    .custom-mg-remocon-under {
        margin-top: -30px;
    }

    .circle-tri-custom-height {
        height: 10px;
    }

    .tri-custom-height {
        height: 9px;
    }

    .rac-icon-height {
        height: 13px;
    }

    .center-circle-wh-custom {
        width: 20px;
        height: 20px;
    }

    .custom-justify {
        justify-content: flex-start !important;
    }

    .micon-col-mg {
        margin-right: -15px;
    }

    .monitor-icon-height {
        height: 25px;
    }

    .health-info-row {
        margin-right: 50px !important;
    }

    .vertical-line-xl {
        border-right: 0px solid rgba(234, 15, 15, 0.2) !important;
    }

    .br-custom {
        margin-top: 15px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .tab-font-custom {
        font-size: 5px !important;
    }

    /* 폰트크기 */
    .small-font {
        font-size: 7px;
    }

    .medium-font {
        font-size: 8px !important;
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 10px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 10px !important;
    }

    .semi-big-font {
        font-size: 12px !important;
    }

    .big-font {
        font-size: 14px !important;
    }

    .cardtext-custom-bg {
        font-size: 15px !important;
        color: var(--font-color) !important;
    }

    .large-font {
        font-size: 16px;
    }

    .xlarge-font {
        font-size: 20px;
    }

    .title-custom {
        font-size: 18px;
        color: var(--font-color);
        font-weight: bold;
        /* 글씨를 굵게 설정 */
    }

    .date-text {
        font-size: 23px;
    }

    .big-important-text {
        font-size: 20px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    /* /폰트크기 */
    /* 무사고 대시보드 스케일링 */
    .custom-padding {
        padding-inline: 10px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .siren-height {
        height: 12px !important;
    }

    .user-margin-custom {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 0px !important;
    }

    .margin-top-custom3 {
        margin-top: -10px;
    }

    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 37px;
    }

    .safety-chart-height {
        height: 90%;
    }

    .pin-icon-size {
        height: 11px;
        width: 16px;
        margin-bottom: 0px;
    }

    .margin-top-custom {
        margin-top: -130px;
    }

    .flatpickr-weekday {
        font-size: 8px !important;
    }

    .flatpickr-day {
        font-size: 8px;
        height: 17px !important;
        display: flex;
        justify-content: center;
        /* 가로 정렬 (수평 중앙) */
        align-items: center;
        /* 세로 정렬 (수직 중앙) */
    }

    .weather-card-text {
        font-size: 8px;
        font-family: 'NanumSquareRegular';
        color: #666666;
    }

    .user-icon {
        height: 50px !important;
    }

    .chart-map-row {
        height: 400px;
    }

    .list-col {
        width: 28%;
    }

    .detail-col {
        width: 72%;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 10%;
        border: none !important;
    }

    .iconHeight {
        height: 55px;
    }

    .monitoring-icon {
        height: 16px;
    }

    .small-sky-icon {
        height: 30px;
    }

    .donut-chart-height {
        height: 55%;
    }

    .margin-top-custom2 {
        margin-top: -45px;
    }


}

/* 150%  여기서부터 xl */
@media (min-width: 1200px) and (max-width: 1399px) {
    .nanum-regular {
        font-size: 8px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .worker-status-card .flex-grow-1 {
        padding: 1rem 0 !important;
        /* 박스 안 여백 줄이기 */
        font-size: 1rem !important;
        /* 텍스트 크기 조정 */
    }

    .worker-status-card .fs-2 {
        font-size: 1.25rem !important;
        /* value 크기 약간 줄임 */
    }

    .mg-hr-donut {
        margin-top: 100px !important;
    }

    .mg-hr-donut2 {
        margin-top: 120px !important;
    }

    .option-btn-height {
        height: 20px;
    }

    .ratio-custom {
        aspect-ratio: 2/5 !important;
    }

    .custom-mg-remocon-under {
        margin-top: -30px;
    }

    .circle-tri-custom-height {
        height: 15px;
    }

    .tri-custom-height {
        height: 13px;
    }

    .rac-icon-height {
        height: 20px;
    }

    .center-circle-wh-custom {
        width: 30px;
        height: 30px;
    }

    .monitor-icon-height {
        height: 27px;
    }

    .health-info-row {
        margin-right: 60px !important;
    }

    .vertical-line-xl {
        border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    /* 폰트크기 */
    .small-font {
        font-size: 7px;
    }

    .medium-font {
        font-size: 9px !important;
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 11px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 11px !important;
    }

    .semi-big-font {
        font-size: 14px !important;
    }

    .big-font {
        font-size: 16px !important;
    }

    .cardtext-custom-bg {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .large-font {
        font-size: 18px;
    }

    .xlarge-font {
        font-size: 22px;
    }

    .title-custom {
        font-size: 17px;
        color: var(--font-color);
        font-weight: bold;
        /* 글씨를 굵게 설정 */
    }

    .date-text {
        font-size: 25px;
    }

    .big-important-text {
        font-size: 22px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    /* /폰트크기 */
    /* 무사고 대시보드 스케일링 */
    .custom-padding {
        padding-inline: 15px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .siren-height {
        height: 12px !important;
    }

    .user-margin-custom {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 10px !important;
    }

    .margin-top-custom3 {
        margin-top: -20px;
    }

    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 40px;
    }

    .safety-chart-height {
        height: 80%;
    }

    .pin-icon-size {
        height: 13px;
        width: 18px;
        margin-bottom: 0px;
    }

    .margin-top-custom {
        margin-top: -130px;
    }

    .flatpickr-weekday {
        font-size: 10px !important;
    }

    .flatpickr-day {
        font-size: 10px;
        height: 25px !important;
        display: flex;
        justify-content: center;
        /* 가로 정렬 (수평 중앙) */
        align-items: center;
        /* 세로 정렬 (수직 중앙) */
    }

    .weather-card-text {
        font-size: 10px;
        font-family: 'NanumSquareRegular';
        color: #666666;
    }

    .user-icon {
        height: 60px !important;
    }

    .chart-map-row {
        height: 400px;
    }

    .list-col {
        width: 25%;
    }

    .detail-col {
        width: 75%;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 10%;
        border: none !important;
    }

    .iconHeight {
        height: 55px;
    }

    .monitoring-icon {
        height: 16px;
    }

    .small-sky-icon {
        height: 18px;
    }

    .donut-chart-height {
        height: 60%;
    }

    .margin-top-custom2 {
        margin-top: -45px;
    }

    /* /무사고 대시보드 스케일링 */
}

/* 125% xxl */
@media (min-width: 1400px) and (max-width: 1599px) {
    #barChartHuTempBar {
        height: 300px !important;
        /* 좀 더 크게 */
    }

    .img-box {
        margin-bottom: 0 !important;
        /* mb-3 제거 효과 */
    }

    .mb-3 img {
        height: 20px !important;
        /* 이미지 높이 줄이기 */
    }

    .worker-status-img {
        width: 60px !important;
    }

    .worker-detail-card .fs-5 {
        font-size: 0.75rem !important;
        /* 제목 크기 줄임 */
    }

    .worker-detail-card .flex-fill {
        padding: 0.3rem !important;
        /* 박스 안쪽 여백 축소 */
        margin: 0 0.20rem !important;
        /* 좌우 간격 줄임 */
    }

    .nanum-extra-bold-wind {
        font-size: 13px !important;
        color: #777777;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-regular-wind {
        font-size: 11px !important;
        color: #777777;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-regular {
        font-size: 10px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-bold_title {
        font-size: 17px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-bold_title_d {
        font-size: 18px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-regular-hu {
        font-size: 8px !important;
        color: #696767;
        font-family: 'NanumSquareRegular' !important;
    }
.nanum-bold-hu {
        font-size: 15px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }
    .nanum-extra-bold-hu {
        font-size: 14px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .hutemp-solution {
        width: 110px !important;
        height: 23px !important;

    }

    .rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .worker-status-card .fs-2 {
        font-size: 1.25rem !important;
        /* value 크기 약간 줄임 */
    }

    .mg-hr-donut {
        margin-top: 60px !important;
    }

    .mg-hr-donut2 {
        margin-top: 80px !important;
    }

    .option-btn-height {
        height: 25px;
    }

    .custom-mg-remocon-under {
        margin-top: -20px;
    }

    .circle-tri-custom-height {
        height: 20px;
    }

    .tri-custom-height {
        height: 18px;
    }

    .rac-icon-height {
        height: 25px;
    }

    .center-circle-wh-custom {
        width: 40px;
        height: 40px;
    }

    .monitor-icon-height {
        height: 30px;
    }

    .health-info-row {
        margin-right: 60px !important;
    }

    .vertical-line-xl {
        border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    .custom-padding {
        padding-inline: 20px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .siren-height {
        height: 17px !important;
    }

    .user-margin-custom {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .margin-top-custom3 {
        margin-top: -15px;
    }

    /* 날씨 관련 */
    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 10px;
        padding-bottom: 13px;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 55px;
    }

    .safety-chart-height {
        height: 80%;
    }

    .pin-icon-size {
        height: 15px;
        width: 20px;
        margin-bottom: 0px;
    }

    .margin-top-custom {
        margin-top: -75px;
    }

    .flatpickr-day {
        font-size: 12px;
        height: 35px !important;
        display: flex;
        justify-content: center;
        /* 가로 정렬 (수평 중앙) */
        align-items: center;
        /* 세로 정렬 (수직 중앙) */
    }

    .small-font {
        font-size: 8px;
    }

    .medium-font {
        font-size: 12px;
        font-family: NanumSquareRegula;
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 13px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 13px !important;
    }

    .cardtext-custom-bg {
        font-size: 18px !important;
        color: var(--font-color) !important;
    }

    .semi-big-font {
        font-size: 16px !important;
    }

    .big-font {
        font-size: 18px !important;
    }

    .weather-card-text {
        font-size: 12px;
        font-family: 'NanumSquareRegular';
        color: #666666;
    }

    .large-font {
        font-size: 20px;
    }

    .xlarge-font {
        font-size: 25px;
    }

    .user-icon {
        height: 75px !important;
    }

    .title-custom {
        font-size: 18px;
        color: var(--font-color);
        font-weight: bold;
        /* 글씨를 굵게 설정 */
    }

    .date-text {
        font-size: 34px;
    }

    .chart-map-row {
        height: 420px;
    }

    .list-col {
        width: 22%;
    }

    .detail-col {
        width: 78%;
    }

    .big-important-text {
        font-size: 23px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 9%;
        border: none !important;
    }

    .iconHeight {
        height: 65px;
    }

    .monitoring-icon {
        height: 18px;
    }

    .small-sky-icon {
        height: 20px;
    }

    .donut-chart-height {
        height: 75%;
    }

    .margin-top-custom2 {
        margin-top: -40px;
    }
}

/* 110% xxl */
@media (min-width: 1600px) and (max-width: 1799px) {


    .worker-status-img {
        width: 70px !important;
    }

    .worker-detail-card .fs-5 {
        font-size: 1rem !important;
        /* 제목 크기 줄임 */
    }

    .worker-detail-card .flex-fill {
        padding: 0.5rem !important;
        /* 박스 안쪽 여백 축소 */
        margin: 0 0.25rem !important;
        /* 좌우 간격 줄임 */
    }

    .nanum-extra-bold-wind {
        font-size: 18px !important;
        color: #777777;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-regular-wind {
        font-size: 11px !important;
        color: #777777;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-bold_title_d {
        font-size: 20px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-regular {
        font-size: 12px !important;
        font-family: 'NanumSquareRegular' !important;
    }
    .nanum-bold-hu {
        font-size: 20px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }
    .nanum-regular-hu {
        font-size: 10px !important;
        color: #696767;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-bold_title {
        font-size: 17px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-extra-bold-hu {
        font-size: 15px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }



    .worker-status-card .fs-2 {
        font-size: 1.25rem !important;
        /* value 크기 약간 줄임 */
    }

    .mg-hr-donut {
        margin-top: 40px !important;
    }

    .mg-hr-donut2 {
        margin-top: 50px !important;
    }

    .option-btn-height {
        height: 28px;
    }

    .circle-tri-custom-height {
        height: 25px;
    }

    .tri-custom-height {
        height: 23px;
    }

    .rac-icon-height {
        height: 30px;
    }

    .center-circle-wh-custom {
        width: 45px;
        height: 45px;
    }

    .siren-height {
        height: 19px !important;
    }

    .monitor-icon-height {
        height: 33px;
    }

    .health-info-row {
        margin-right: 60px !important;
    }

    .vertical-line-xl {
        border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    .user-margin-custom {
        margin-left: 20px !important;
        margin-right: 10px !important;
    }

    .margin-top-custom3 {
        /* margin-top: -5px; */
    }

    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 12px !important;
        padding-bottom: 15px !important;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 70px !important;
    }

    .safety-chart-height {
        height: 85%;
    }

    .pin-icon-size {
        height: 18px;
        width: 25px;
        margin-bottom: 5px;
    }

    .flatpickr-day {
        font-size: 13px;
        height: 40px !important;
        display: flex;
        justify-content: center;
        /* 가로 정렬 (수평 중앙) */
        align-items: center;
        /* 세로 정렬 (수직 중앙) */
    }

    .small-font {
        font-size: 10px;
    }

    .medium-font {
        font-size: 12px;
        font-family: NanumSquareRegula;
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 16px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 16px !important;
    }

    .semi-big-font {
        font-size: 16px !important;
    }

    .big-font {
        font-size: 20px !important;
    }

    .cardtext-custom-bg {
        font-size: 25px !important;
        color: var(--font-color) !important;
    }

    .weather-card-text {
        font-size: 14px;
        font-family: 'NanumSquareRegular';
        color: #666666;
    }

    .large-font {
        font-size: 23px;
    }

    .xlarge-font {
        font-size: 28px;
    }

    .user-icon {
        height: 85px !important;
        /* margin-right: 25px !important; */
    }

    .title-custom {
        font-size: 19px;
        color: var(--font-color);
        font-weight: bold;
    }

    .date-text {
        font-size: 37px;
    }

    .chart-map-row {
        height: 450px;
    }

    .list-col {
        width: 22%;
    }

    .detail-col {
        width: 78%;
    }

    .big-important-text {
        font-size: 25px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 8%;
        border: none !important;
    }

    .iconHeight {
        height: 70px;
    }

    /* .card-name-text {
        font-size: 20px !important;
    } */
    .monitoring-icon {
        height: 20px;
    }

    .small-sky-icon {
        height: 28px;
    }

    .donut-chart-height {
        height: 90%;
    }

    .margin-top-custom {
        margin-top: -35px;
    }

    .margin-top-custom2 {
        /* margin-top: -10px; */
    }
}

/* 100% 이하 xxl */
@media (min-width: 1800px) {
    .nanum-extra-bold-wind {
        font-size: 22px !important;
        color: #777777;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-regular-wind {
        font-size: 13px !important;
        color: #777777;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-regular-hu {
        font-size: 15px !important;
        color: #696767;
        font-family: 'NanumSquareRegular' !important;
    }

    .nanum-extra-bold-hu {
        font-size: 20px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }

    .nanum-bold_title_d {
        font-size: 22px !important;
        font-family: 'NanumSquareRegular' !important;
    }
.nanum-bold-hu {
        font-size: 23px !important;
        font-family: 'NanumSquareExtraBold' !important;
    }
    .nanum-regular {
        font-size: 15px !important;
        font-family: 'NanumSquareRegular' !important;
    }

    .mg-hr-donut2 {
        margin-top: 30px !important;
    }

    .circle-tri-custom-height {
        height: 30px;
    }

    .tri-custom-height {
        height: 25px;
    }

    .rac-icon-height {
        height: 35px;
    }

    .option-btn-height {
        height: 30px;
    }

    .center-circle-wh-custom {
        width: 45px;
        height: 45px;
    }

    .siren-height {
        height: 20px !important;
    }

    .monitor-icon-height {
        height: 37px;
    }

    .health-info-row {
        margin-right: 60px !important;
    }

    .vertical-line-xl {
        border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    .user-margin-custom {
        margin-left: 25px !important;
        margin-right: 10px !important;
    }

    .margin-top-custom3 {
        /* margin-top: -5px; */
    }

    /* 날씨 */
    .threeDayBox {
        background-color: var(--content-card-background-color) !important;
        /* 변수로 변경 */
        border-radius: 10px;
        padding-top: 15px !important;
        padding-bottom: 20px !important;
        padding-inline: 0;
    }

    .td-sky-icon-height {
        height: 90px !important;
    }

    .small-sky-icon {
        height: 30px;
    }

    .weather-card-text {
        font-size: 14px;
        font-family: 'NanumSquareRegular';
        color: #666666;
    }

    /* /날씨 */
    .safety-chart-height {
        height: 85%;
    }

    .first-row-height {
        height: 60%;
    }

    .second-row-height {
        height: 40%;
    }

    .pin-icon-size {
        height: 20px;
        width: 25px;
        margin-bottom: 5px;
    }

    .flatpickr-day {
        font-size: 13px;
        height: 45px !important;
        display: flex;
        justify-content: center;
        /* 가로 정렬 (수평 중앙) */
        align-items: center;
        /* 세로 정렬 (수직 중앙) */
    }

    .small-font {
        font-size: 10px;
        font-weight: bold;
        color: #797979;
    }

    .medium-font {
        font-size: 12px;
        font-family: NanumSquareRegula;
    }

    .cardtext-custom3 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom3-nc {
        font-size: 17px !important;
    }

    .cardtext-custom2 {
        font-size: 17px !important;
        color: var(--font-color) !important;
    }

    .cardtext-custom2-nc {
        font-size: 17px !important;
    }

    .semi-big-font {
        font-size: 17px !important;
    }

    .big-font {
        font-size: 20px !important;
    }

    .cardtext-custom-bg {
        font-size: 25px !important;
        color: var(--font-color) !important;
    }

    .large-font {
        font-size: 23px;
    }

    .xlarge-font {
        font-size: 28px;
    }

    .user-icon {
        height: 95px !important;
    }

    .title-custom {
        font-size: 20px;
        color: var(--font-color);
        font-weight: bold;
    }

    .date-text {
        font-size: 40px;
    }

    .chart-map-row {
        height: 450px;
    }

    .list-col {
        width: 22%;
    }

    .detail-col {
        width: 78%;
    }

    .big-important-text {
        font-size: 25px;
        color: var(--important-font-color);
        font-weight: 500;
    }

    .checkbox-td {
        background-color: var(--main-card-color) !important;
        width: 8%;
        border: none !important;
    }

    .iconHeight {
        height: 70px;
    }

    /* .card-name-text {
        font-size: 20px !important;
    } */
    .monitoring-icon {
        height: 20px;
    }

    .donut-chart-height {
        height: 95%;
    }

    .margin-top-custom {
        margin-top: -10px;
    }

    .margin-top-custom2 {
        /* margin-top: -10px; */
    }
}

.twelve-font {
    font-size: 11px;
}

.twotwo-font {
    font-size: 22px;
}

.lightgray-box {
    background-color: var(--text-box-color);
    border-radius: 15px;
}

.custom-marker {
    width: 100px;
    height: 20px;
    /* padding-inline: 15px; */
    /* background-color: rgb(255, 255, 255);*/
    border: 2px solid;
    /* 경계선의 두께와 스타일, 색상 지정 */
    /* color: rgb(0, 0, 0); 글자 색깔을 검정색으로 설정 */
    border-radius: 15px;
    /* 
    display: inline-block; */
}

.custom-tooltip {
    width: 200px;
    height: 100px;
    /* padding-inline: 15px; */
    /* background-color: rgb(255, 255, 255);*/
    border: 2px solid;
    /* 경계선의 두께와 스타일, 색상 지정 */
    /* color: rgb(0, 0, 0); 글자 색깔을 검정색으로 설정 */
    border-radius: 15px;
}

.arrow_box {
    position: relative;
    background: #ffffff;
    border: 1px solid #b8b8b8;
    padding: 5px;
    border-radius: 5px;
}

.btn-custom {
    --bs-btn-color: #ffffff;
    /*버튼 안의 글짜 색상*/
    /* --bs-btn-bg: #326abc; */
    --bs-btn-border-color: #326abc;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e3e6e;
    --bs-btn-hover-border-color: #2f64b1;
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2f64b1;
    --bs-btn-active-border-color: #2c5ea6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3b7ddd;
    --bs-btn-disabled-border-color: #3b7ddd;
    background-image: linear-gradient(45deg, #326abc, #1e3e6e);
}

/* Hover 상태에서 그라데이션 대신 단색 배경 적용 */
.btn-custom:hover {
    background-image: linear-gradient(45deg, #2c5ea7, #19335a);
    /* 기존 그라데이션 제거 */
    /*background-color: var(--bs-btn-hover-bg); /*--bs-btn-hover-bg의 색상 적용*/
}

.login-font {
    font-size: 16px;
    color: rgb(125, 125, 125);
}

.card-custom {
    border-radius: 15px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

.practice-custm {
    margin-bottom: 100px;
}

.round-custom-box {
    background-color: rgb(231, 228, 228);
    border-radius: 15px;
    display: flex;
    align-items: center;
}

.dummy-custom {
    background: #f16849;
    color: #fff2f2;
}

.safe_box {
    border: 3px solid #319d41;
    color: #319d41;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.caution_box {
    border: 3px solid #eeae60;
    color: #eeae60;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.danger_box {
    border: 3px solid #c92121;
    color: #c92121;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.box-custom {
    background-color: #f3f2f2;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 5px;

    /* padding-inline: 15px;
            padding-top: 8px;
            padding-bottom: 8px; */
}

/* 삼천리 파쿠리 */

.contents-card-custom {
    border-radius: 5px;
    max-width: none !important;
    border: none;
    background-color: var(--card-background-color);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    /* 오른쪽 아래에 그림자 */
}

.card-header-custom {
    border-radius: 5px;
    background-color: var(--content-card-hearder-background-color);
    border: none;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    /* 글씨를 굵게 설정 */
}

.card-header-custom-order {
    border-radius: 5px;
    background-color: var(--content-card-hearder-background-color);
    border: none;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    /* 글씨를 굵게 설정 */
}

.status-img {
    width: 100%;
    height: auto;
    max-width: 90px;
    /* 최대 너비를 제한하여 이미지가 너무 커지지 않도록 */
}

.table-header-text-custom {
    font-size: 18px !important;
    color: var(--font-color-deep) !important;
}

/* 작업 허가서 승인 or 반려 선택하는 옵션 버튼 */
/* 기본 스타일 */
.option-bubuton {
    border-radius: 30px;
    border: none;
    background-color: var(--option-button-default-color);
    /* 기본 배경색 */
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* 활성화된 버튼 (선택됨) */
.option-bubuton.active {
    background-color: var(--option-button-active-color);
    /* 선택된 배경색 */
    transform: scale(1.05);
    /* 선택 시 살짝 커지기 */
    color: #ffffff;
    /* 필요하면 그림자 효과 추가 */
    /* box-shadow: 0 0 10px rgba(50, 188, 165, 0.5); */
}

/* hover 효과 (선택 여부와 무관하게 적용됨) */
.option-bubuton:hover {
    background-color: var(--button-hover-color);
    color: #ffffff;
}

/*탭 커스텀*/
/* 커스텀 탭 그룹 스타일 */
.custom-tab-group {
    /* border-radius: 10px; */
    /* overflow: hidden; */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.custom-tab {
    color: var(--tab-txt-color-uncheck);
    background-color: var(--tab-color);
    font-weight: bold;
    font-size: 16px;
    padding: 10px 20px;
    transition: background-color 0.3s, color 0.3s;
    border: none;
    border-top-left-radius: 20px !important;
    /* 왼쪽 위 모서리 둥글게 */
    border-top-right-radius: 20px !important;
    /* 오른쪽 위 모서리 둥글게 */
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* 선택된 상태 커스텀 스타일 */
.custom-tab-group .btn-check:checked+.custom-tab {
    background-color: var(--deeper-background-color);
    color: var(--tab-txt-color-check);
}

.custom-tab-group .btn-check#btnradio2:checked+.custom-tab {
    background-color: var(--deeper-background-color);
    color: var(--tab-txt-color-check);
}

.custom-tab-group .btn-check#btnradio3:checked+.custom-tab {
    background-color: var(--deeper-background-color);
    color: var(--tab-txt-color-check);
}

/* 호버 스타일 */
.custom-tab:hover {
    background-color: var(--tab-hover-color) !important;
    color: var(--tab-txt-color-check) !important;
    border: none !important;
}

/* /탭 커스텀 */

/* 스위치 버튼 커스텀 */
/* .form-check-input {
    transition: background-color 0.2s, border-color 0.2s;
}

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

.form-check-input::before {
    background-color: var(--button-color) !important;
} */

.form-check-input-custom {
    background-color: #ffffff;
    border-color: var(--button-disable-color);
    transition: background-color 0.2s, border-color 0.2s;
    /* 토글 스위치 모양 만들기 */
    appearance: none;
    width: 40px;
    /* height: 100%; */
    background-color: #ffffff;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    height: 20px !important;
    width: 45px !important;
}

/* 체크되었을 때 (토글 ON 상태), 배경 및 테두리 색상 변경 */
.form-check-input-custom:checked {
    background-color: #ffffff;
    border-color: var(--button-color);
}

/* 동그란 내부 (토글 안의 원) */
.form-check-input-custom::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    background-color: var(--button-disable-color);
    /* 원의 기본 색상 */
    border-radius: 50%;
    transition: background-color 0.2s, transform 0.2s;
}

/* 체크되었을 때 원 색상 */
.form-check-input-custom:checked::before {
    background-color: var(--button-color);
    /* 체크 상태일 때 원 색상 */
    transform: translateX(23px);
    /* 원이 오른쪽으로 이동 */
}

/* /스위치 버튼 커스텀 */

/* p요소에 적용할거임 */

/*  */

.dissensor-table-box {
    background-color: #ffffff;
    max-width: none;
    /* border-radius: 10px !important; */
    /* border-left: 10px solid #abd0f8; */
    /* padding-top: 7px;
    padding-bottom: 7px; */
    /* box-shadow: 3px 3px 3px rgba(83, 83, 83, 0.2); */
    width: 100%;
}

.no-border-td {
    /* padding-top: 0; */
    background-color: transparent !important;
    border: none !important;
}

.chart-box {
    background-color: var(--text-box-color);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 12px;
    /* border-left: 10px solid #abd0f8; */
    /* padding-top: 7px;
    padding-bottom: 7px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    width: 100%; */
}

.sos-button-custom {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: none;
    /* 경계선을 없앱니다 */
    --bs-btn-hover-border-color: none;
    --bs-btn-active-border-color: none;
    --bs-btn-disabled-border-color: none;
    border: none;
    /* 전체적으로 경계선을 제거 */
    background-image: linear-gradient(0deg, #527ac3, #527ac3);
}

.sos-button-custom:hover {
    --bs-btn-color: #ffffff;
    background-image: linear-gradient(0deg, #41609a, #41609a);
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: none;
    /* 경계선을 없앱니다 */
    --bs-btn-hover-border-color: none;
    --bs-btn-active-border-color: none;
    --bs-btn-disabled-border-color: none;
    border: none;
    /* 전체적으로 경계선을 제거 */
    background-image: linear-gradient(180deg, #be77c6e6, #704074);
}

/* 범례 버튼 커스텀 */
.customLegend {
    color: rgb(255, 255, 255) !important;
    border: none;
    padding: 5px 10px;
    border-radius: 15px;
}

/* /범례 버튼 커스텀 */

.weather-table-box {
    background-color: #ffffff;
    border-radius: 12px;
    /* border-left: 10px solid #abd0f8; */
    /* padding-top: 7px;
    padding-bottom: 7px; */
    /* width: 100%; */
}

.vertical-line {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.page-name-custom {
    color: var(--important-font-color) !important;
    /* font-weight: 700; */
    font-family: 'NanumSquareBold';
    /* font-family: 'NanumSquareExtraBold'; */
}

/* 체크박스 커스텀 */
.custom-check-box {
    appearance: none;
    /* 기본 체크박스 스타일 제거 */
    width: 15px;
    height: 15px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    /* 체크박스 테두리 */
    border-radius: 50% !important;
    cursor: pointer;
    display: inline-block;
    position: relative;
    background-color: white;
    /* 체크되지 않은 상태의 배경색 */
}

/* 체크된 상태 스타일 */
.custom-check-box:checked {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: var(--checked-color) !important;
    /* 체크된 상태의 배경색 */
}

/* 체크된 상태에서 내부 아이콘을 없애기 위해 outline, shadow 등 추가 제거 */
.custom-check-box:checked::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--checked-color) !important;
    border-radius: 50%;
    /* 동그란 모양 유지 */
}

/* /체크박스 커스텀 */

.contents {
    color: var(--font-color) !important;
    font-family: 'NanumSquareBold';
    /* font-weight: 500 !important; */
}

.label {
    color: var(--less-important-color) !important;
    font-family: 'NanumSquareBold';
}

.object-name {
    color: var(--font-color);
    font-weight: 700;
}

/* 스크롤 커스텀 */
/* 크롬, 엣지, 사파리 */
::-webkit-scrollbar {
    width: 5px;
    /* 스크롤바 너비 */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(176, 175, 175, 0.5);
    /* 반투명 효과 */
    border-radius: 10px;
    /* 둥근 모서리 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.8);
    /* 호버 시 색상 */
}

::-webkit-scrollbar-track {
    background-color: rgba(185, 184, 184, 0.3);
    /* 트랙 색상 */
}

/* placeholder 커스텀 */
input::placeholder {
    color: #cccccc !important;
    /* 연한 회색 */
    opacity: 1;
    /* 투명도 설정 */
}

input:focus::placeholder {
    color: #aaaaaa;
    /* 포커스 시 placeholder 색상 */
}

/* placeholder 커스텀 */

.input-bg-gray-color {
    background-color: #f5f5f5;
    border: none;
}

.input-bg-gray-color:disabled {
    background-color: #f5f5f5 !important;
    color: #000;
    /* 텍스트 흐려짐 방지용 (필요 시) */
    opacity: 1;
    /* 흐려 보이지 않게 설정 */
}

/* 사이드바 커스텀 */
.js-sidebar {
    height: 100%;
}

.sidebar-content {
    display: flex;
    width: 65px;
    flex-direction: column;
    align-items: center;
    transition: width 0.3s;
    background-image: linear-gradient(180deg,
            var(--navibar-basic-color) 0%,
            var(--navibar-mid-color) 65%,
            var(--navibar-deeper-color) 100%);
}

.sidebar-nav {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.textLink {
    font-size: 16px;
    margin-left: 35px;
    color: #ffffff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* 천천히 사라짐 */
}

.textLink.hidden {
    opacity: 0;
    visibility: hidden;
}

.textLink-sub {
    font-size: 15px;
    margin-left: 20px;
    color: #ffffff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* 천천히 사라짐 */
}

.textLink-sub-sub {
    font-size: 13px;
    margin-left: 20px;
    color: #ffffff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* 천천히 사라짐 */
}

a.no-underline {
    text-decoration: none;
    /* 밑줄 제거 */
    color: inherit;
    /* 텍스트 색상 상속 */
}

a.no-underline:hover,
a.no-underline:focus {
    text-decoration: none;
}

.sidebar-item {
    display: flex;
    align-items: center;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    height: 50px;
    margin-left: 0;
}

.sidebar-item.hover {
    background-color: var(--sidebar-item-hover) !important;
    transition: background-color 0.6s ease !important;
}

.hidden-menu {
    height: 0;
    /* 초기 상태: 높이 0 */
    overflow: hidden;
    /* 높이가 0일 때 내용 숨기기 */
    transition: height 0.3s ease;
    /* 부드러운 전환 효과 */
}

.sidebar-selected {
    background-color: var(--sidebar-item-selected) !important;
    /* 원하는 배경색 */
    color: white !important;
    /* border-left: 5px solid rgba(44, 25, 60, 1); */
    /* 텍스트 색상 */
}

.selected {
    /* 원하는 배경색 */
    color: white !important;
    /* 텍스트 색상 */
}

/* /사이드바 커스텀 */
.wrapper {
    height: 100%;
}

/* 스피너 커스텀 */
.spinner-custom-bg {
    width: 6rem;
    height: 6rem;
    border-width: 1rem;
    border-color: var(--bg-color);
    border-right-color: transparent;
}

.spinner-custom-md {
    width: 4rem;
    height: 4rem;
    border-width: 0.5rem;
    border-color: var(--bg-color);
    border-right-color: transparent;
}

/* /스피너 커스텀 */
.stpBtn-tap-size {
    width: 120px;
}

/* .border-test {
    border: 3px solid rgb(199, 21, 21);
} */
/* .border-test2 {
    border: 3px solid rgb(21, 122, 199) !important;
}
.border-test3 {
    border: 3px solid rgb(21, 199, 36) !important;
}
.border-test4 {
    border: 3px solid rgb(199, 122, 21) !important;
} */
.modify-mode {
    border: 1px solid rgb(118, 119, 120, 0.5) !important;
    border-radius: 15px;
}

/* 글꼴 */
body {
    /* width: 100%;
    height: 100%; */
    font-family: 'NanumSquare';
    /* font-family: 'NanumSquare'; */
    /* font-family: 'NanumSquareLight';
    font-family: 'NanumSquare';
    font-family: 'NanumSquareBold';
    font-family: 'NanumSquareExtraBold';
    font-family: 'NanumSquareAcb';
    font-family: 'NanumSquareAceb';
    font-family: 'NanumSquareAcl';
    font-family: 'NanumSquareAcr'; */
}

/* /글꼴 */

.flatpickr-calendar {
    /* height: 300px !important; 
    overflow: auto;  */
}

/* 캘린더 전체 글씨 크기 줄이기 */
.flatpickr-calendar {
    /* font-size: 5px; */
}

/* 요일 글씨 크기 */
.flatpickr-weekday {
    /* font-size: 5px; */
}

/* 날짜 글씨 크기 */

/* 월/연도 선택 부분 */
.flatpickr-month {
    /* font-size: 5px !important; */
}

/* 네비게이션 버튼 크기 */
.flatpickr-prev-month,
.flatpickr-next-month {
    /* font-size: 5px;  */
}

/* 모달 커스텀 */
/* .custom-modal {
    background-color: white;
    padding: 10px;
    border-radius: 15px;
    width: 500px;
    height: 70%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
} */

.custom-modal {
    background-color: white;
    padding: 10px;
    border-radius: 15px;
    width: auto;
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.custom-modal.show {
    opacity: 1;
    /* 완전히 보이도록 설정 */
    visibility: visible;
    /* 화면에 보이도록 설정 */
    transform: translateX(-50%) scale(1);
    /* 크기 원래대로 */
}

.custom-modal-header {
    border-bottom: 1px solid #000000;
}

.custom-modal-body {
    max-height: 500px;
    overflow-y: auto;
}

/* /모달 커스텀 */

.pushMsg {
    background-color: white;
    padding: 10px;
    border-radius: 15px;
    width: 500px;
    /* padding-inline: 15px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pushMsg-header {
    color: rgba(61, 144, 245, 0.813);
    font-weight: 600 !important;
    font-family: 'NanumSquareBold';
    margin-left: 10px;
    font-size: 20px;
}

.pushMsg-contents {
    color: var(--font-color);
    font-family: 'NanumSquareBold';
    font-size: 18px;
}

.pushMsg-checkBtn-custom {
    border-radius: 20px !important;
    border: none;
    background-color: rgba(22, 97, 196, 0.813);
    --bs-btn-color: #ffffff;
    /*버튼 안의 글짜 색상*/
    /* --bs-btn-bg: #326abc; */
    --bs-btn-border-color: rgba(22, 97, 196, 0.813);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(15, 64, 128, 0.813);
    --bs-btn-hover-border-color: rgba(22, 97, 196, 0.813);
    --bs-btn-focus-shadow-rgb: 88, 145, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(22, 97, 196, 0.813);
    --bs-btn-active-border-color: rgba(22, 97, 196, 0.813);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(180, 202, 232, 0.813);
    --bs-btn-disabled-border-color: rgba(15, 64, 128, 0.813);
    /* background-image: linear-gradient(45deg, #326abc, #1e3e6e); */
}

.pushMsg-checkBtn-custom:hover {
    background-color: rgba(15, 64, 128, 0.813);
    color: #ffffff;
}

/* /푸시메시지 커스텀 */
.companyLogo-custom {
    height: 30px;
    margin-left: 20px;
    margin-bottom: 1px;
}

.unvalid-input {
    border: 2px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
    transition: box-shadow 0.3s ease;
}

/* 최상단 바 커스텀 */
.high-bar {
    height: 40px !important;
}

/* /최상단 바 커스텀 */

/* 상단 네비바 커스텀 */
.main-navbar-custom {
    /* height: 100px !important; */
    background-color: #ffffff;
    padding: 0;
    box-shadow: none !important;

    max-height: 500px;
    /* 충분히 큰 예상값 */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.main-navbar-custom.close {
    max-height: 0px;
}

.sub-menu {
    border-top: 1px solid #ddd;

    max-height: 500px;
    /* 충분히 큰 예상값 */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sub-menu.close {
    max-height: 0px;
    /* 메뉴바 높이 (필요 시 조정) */

    /* 내용 표시 */
    /* overflow-x: auto !important; */
    /* overflow-y: hidden !important; */
}

.navbar-custom {
    /* height: 100px !important; */
    background-color: #ffffff;
    padding: 0;
    box-shadow: none !important;
}

.navbar-inner-custom {
    margin-left: 20px;
    margin-top: 0px;
}

/* .navbar-parent-text-custom {
    font-size: 15px;
    color: #ffffff;
} */
.main-menu-text-custom {
    font-size: 18px;
    color: var(--font-color-deep);
}

.main-menu-text-custom.active {
    font-size: 18px;
    color: var(--main-color);
}

.navbar-text-custom {
    font-size: 16px;
    color: var(--least-important-color);
}

.navbar-text-custom.active {
    font-size: 16px;
    color: var(--main-color);
    font-family: 'NanumSquareExtraBold' !important;
}

.navbar-arrow-custom {
    height: 16px;
}

.main-nav-link-custom {
    padding-inline: 15px !important;
    /* text-decoration: none !important; */
    color: rgba(255, 255, 255, 0.8) !important;
}

.main-nav-link-custom.active {
    font-family: 'NanumSquareBold' !important;
    border-bottom: 5px solid var(--main-color) !important;
}

.main-nav-link-custom:hover {
    /* text-decoration: none !important; */
    color: rgba(255, 255, 255, 0.5) !important;
}

.nav-link-custom {
    padding-inline: 15px !important;
    /* text-decoration: none !important; */
    color: rgba(255, 255, 255, 0.8) !important;
}

.nav-link-custom.active {
    margin-top: 2px;
    font-family: 'NanumSquareBold' !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.8) !important;
}

.nav-link-custom:hover {
    /* text-decoration: none !important; */
    color: rgba(255, 255, 255, 0.5) !important;
}

.nav-link-nosub-custom {
    color: rgba(255, 255, 255, 0.5) !important;
}

.nav-link-custom-no-underbar.active {
    margin-top: -2px;
    border-bottom: transparent !important;
}

.nav-link-custom-no-arrow.active {
    /* margin-top: -2px; */
    margin-bottom: 3px !important;
    border-bottom: transparent !important;
}

/* /상단 서브 네비바 커스텀 */

/* 통합관리에서의 subsubbar 커스텀 */

.subsubbar-custom {
    position: fixed;
    /* 화면에 고정 */
    top: 150px;
    left: 40;
    /* 왼쪽 정렬 */
    width: 100%;
    /* 화면 너비 전체를 차지 */
    height: 0;
    /* 초기 높이 */
    overflow: hidden;
    /* 내용 숨김 */

    /* overflow-x: auto !important;
    overflow-y: hidden !important; */
    /* background-color: rgba(102, 87, 102, 0.9); 5e536e*/
    /* background-color: #5e536e; */
    background: #ffffff;
    /* background: linear-gradient(to bottom, var(--point-color), var(--subsub-light-color)); */
    /* 수평 방향 그라데이션 */
    z-index: 1000;
    /* 다른 요소 위에 표시 */
    transition: height 0.2s ease;
    /* 부드러운 전환 효과 */
    box-shadow: none;
    /* box-shadow: 0px 10px 6px -4px rgba(0, 0, 0, 0.3); */
}

.subsubbar-custom.open {
    height: 60px;
    /* 메뉴바 높이 (필요 시 조정) */
    overflow: visible;
    /* 내용 표시 */
    overflow-x: auto !important;
    /* overflow-y: hidden !important; */
}

.main-nav {
    padding-inline: 15px;
}

.sub-nav {
    padding-inline: 15px;
}

.sub-custom {
    padding-inline: 15px;
    /* padding-top: 15px;
    padding-bottom: 15px; */
}

/*/ 통합관리에서의 subsubbar 커스텀 */

/* 요소 숨김 */
.hidden-custom {
    visibility: hidden;
    /* 요소 숨김 */
    opacity: 0;
    /* 투명도 0 */
    transition: visibility 0.2s, opacity 0.2s ease;
}

/* 요소 드러냄 */
.visible-custom {
    visibility: visible;
    /* 요소 표시 */
    opacity: 1;
    /* 투명도 1 */
}

/* .active-custom {
    border-bottom: 4px solid white !important;
} */

/* .login-input-custom {
    box-shadow: 2px 3px 5px rgba(107, 107, 107, 0.1);
    height: 50px !important;

    font-family: 'NanumSquareRegular';
} */
.login-input-custom {
    background-color: #ffffff;
    border-color: #ccc;
    height: 50px !important;
    /* //box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); */
    font-family: 'NanumSquareRegular';
    border-radius: 8px;
    padding: 0.75rem 1rem;

    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

.login-input-custom:focus {
    background-color: #ffffff;
    border-color: #00aaea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 170, 234, 0.2);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    background-color: white !important;
    color: #000 !important;
}

.white-bg {
    background-color: white;
}

button[data-bs-toggle='dropdown'] {
    border: transparent !important;
}

.custom-pagination-top-right {
    position: absolute;
    top: 10px;
    right: 6px;
    z-index: 10;
    display: flex;
    gap: 6px;
}