/* Fix: Accordion menu icon and arrow always visible in show/here state (dark-sidebar) */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.show>.menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.show>.menu-link .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.here>.menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.here>.menu-link .menu-icon i {
    color: gray !important;
    opacity: 1 !important;
    visibility: visible !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.show>.menu-link .menu-arrow,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.here>.menu-link .menu-arrow {
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: auto;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.show>.menu-link .menu-arrow::after,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu-item.menu-accordion.here>.menu-link .menu-arrow::after {
    background-color: gray !important;
}

:root {
    --variant-teal: #30C336;
    --variant-teal-light: #EAF9EB;
    --variant-blue: #239FE7;
    --variant-blue-light: #D8F6FF;
    --variant-red: #E22C2C;
    --variant-red-light: #FCEAEA;
    --variant-yellow: #FFA800;
    --variant-yellow-light: #FCF1CA;
}

/* Reusable action button utilities using the color variables */
.btn-action-teal {
    background-color: var(--variant-teal-light);
    color: var(--variant-teal);
    border: 1px solid rgba(48, 195, 54, 0.18);
}

.btn-action-teal:hover {
    background-color: rgba(48, 195, 54, 0.16);
}

.btn-action-blue {
    background-color: var(--variant-blue-light);
    color: var(--variant-blue);
    border: 1px solid rgba(35, 159, 231, 0.18);
}

.btn-action-blue:hover {
    background-color: rgba(35, 159, 231, 0.16);
}

.btn-action-red {
    background-color: var(--variant-red-light);
    color: var(--variant-red);
    border: 1px solid rgba(226, 44, 44, 0.18);
}

.btn-action-red:hover {
    background-color: rgba(226, 44, 44, 0.16);
}

.btn-action-yellow {
    background-color: var(--variant-yellow-light);
    color: var(--variant-yellow);
    border: 1px solid rgba(255, 168, 0, 0.18);
}

.btn-action-yellow:hover {
    background-color: rgba(255, 168, 0, 0.16);
}

.btn-action-disabled {
    background-color: #E3E3E4;
    color: #98979A;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.btn.btn-action-disabled:disabled,
.btn.btn-action-disabled.disabled {
    background-color: #E3E3E4;
    color: #98979A;
    border-color: rgba(0, 0, 0, 0.04);
    opacity: 1;
}

.action-buttons {
    display: flex;
    gap: 0.375rem;
}

/* Ensure icons inside action buttons inherit and apply the color variable (covers <i> and SVG) */
.btn-action-teal i,
.btn-action-teal svg,
.btn-action-teal .svg-inline--fa {
    color: var(--variant-teal) !important;
    fill: var(--variant-teal) !important;
}

/* Header shadow when scrolled */
.app-header {
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

.app-header.header-scrolled {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

.app-header.header-scrolled #kt_app_header_container {
    background-color: #FFFFFF;
}

.btn-action-blue i,
.btn-action-blue svg,
.btn-action-blue .svg-inline--fa {
    color: var(--variant-blue) !important;
    fill: var(--variant-blue) !important;
}

.btn-action-red i,
.btn-action-red svg,
.btn-action-red .svg-inline--fa {
    color: var(--variant-red) !important;
    fill: var(--variant-red) !important;
}

.btn-action-disabled i,
.btn-action-disabled svg,
.btn-action-disabled .svg-inline--fa {
    color: #98979A !important;
    fill: #98979A !important;
}

.btn-action-yellow i,
.btn-action-yellow svg,
.btn-action-yellow .svg-inline--fa {
    color: var(--variant-yellow) !important;
    fill: var(--variant-yellow) !important;
}

/* Shared role permission checkbox marker inset for create/edit pages */
.permission-checkbox,
.group-all-checkbox,
#selectAll {
    background-size: 60% 60%;
}

body {
    font-family: "Rubik", sans-serif !important;
}

.button-komatsu {
    line-height: 50px;
    height: 50px;
    text-align: center;
    width: 250px;
    cursor: pointer;
    border: none;
    background-color: #FFFFFF;
    /* Adding a background color for better visibility */
    color: white;
    /* Ensuring text color is white for visibility */
    font-size: 16px;
    /* Adjust font size as needed */
    position: relative;
    /* Required for the pseudo-elements to position correctly */
    overflow: hidden;
    /* Ensures pseudo-elements are contained within the button */
}

.button-animation {
    transition: all 0.5s;
    background-color: #18A4F5;
}

.button-animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.button-animation:hover::before {
    opacity: 0;
    transform: scale(0.5, 0.5);
}

.button-animation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid red;
    transform: scale(1.2, 1.2);
}

.button-animation:hover::after {
    opacity: 1;
    transform: scale(1, 1);
}

.btn {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Initially display both icon and text */
    /* On hover, hide the text */
}

.btn>i {
    padding-right: 0;
}

.btn.btn-hover-icon {
    display: flex;
    position: relative;
    align-items: center;
    overflow: hidden;
    /* Ensure no overflow when sliding */
}

.btn.btn-hover-icon .btn-text {
    display: inline-block;
    padding-left: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn.btn-hover-icon i {
    position: absolute;
    left: 15px;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
}

.btn.btn-hover-icon:hover .btn-text {
    transform: translateX(100%);
    opacity: 0;
}

.btn.btn-hover-icon:hover i {
    left: 50%;
    transition: left 0.3s ease-in-out;
}

.btn.button-animation-1 {
    position: relative;
    background-color: #FFFFFF;
    /* Adding a background color for better visibility */
    color: white;
    /* Ensuring text color is white for visibility */
    font-size: 16px;
    /* Adjust font size as needed */
    overflow: hidden;
    /* Ensures pseudo-elements are contained within the button */
}

.btn.button-animation-1::before,
.btn.button-animation-1::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn.button-animation-1.button-upAndDown {
    background-color: #18A4F5;
    font-weight: bold;
    position: relative;
}

.btn.button-animation-1.button-upAndDown span {
    display: block;
    position: relative;
}

.btn.button-animation-1.button-upAndDown::before {
    content: "";
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);
    transition: clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), -webkit-clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), transform 0.3s ease;
}

.btn.button-animation-1.button-upAndDown::before:hover {
    opacity: 0;
    transform: scale(0.5, 0.5);
}

.btn.button-animation-1.button-upAndDown:hover {
    background-color: #1694dc;
}

.btn.button-animation-1.button-upAndDown:hover::before {
    transform: translate3d(0, -10px, 0);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%);
}

.btn.button-animation-1.button-upAndDown:hover span {
    transition: transform 0.3s;
    z-index: 1;
    overflow: hidden;
}

.btn.button-animation-1.button-upAndDown:hover>span>span {
    animation: MoveUpInitial 0.15s forwards, MoveUpEnd 0.15s forwards 0.15s;
}

.btn.button-animation-2 {
    position: relative;
    overflow: hidden;
    /* Ensures pseudo-elements are contained within the button */
}

.btn.button-animation-2::before,
.btn.button-animation-2::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn.button-animation-2.button-resize {
    background: none;
    padding: 1.5rem 3rem;
}

.btn.button-animation-2.button-resize span {
    display: inline-block;
    position: relative;
    color: #fff;
}

.btn.button-animation-2.button-resize::before {
    content: "";
    background: #18A4F5;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.7, 1);
}

.btn.button-animation-2.button-resize::after {
    content: "";
    border: 1px solid #18A4F5;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.7, 1);
    border-radius: 10px;
    transform: scale3d(0.85, 0.65, 1);
}

.btn.button-animation-2.button-resize:hover::before {
    background: #1694dc;
    transform: scale3d(0.9, 0.8, 1);
    border-radius: 10px;
}

.btn.button-animation-2.button-resize:hover::after {
    transform: scale3d(1, 1, 1);
}

.btn.button-animation-3 {
    position: relative;
    background-color: #18A4F5;
    /* Adding a background color for better visibility */
    color: #FFFFFF;
    /* Ensuring text color is white for visibility */
    font-size: 16px;
    /* Adjust font size as needed */
    overflow: hidden;
}

.btn.button-animation-3::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.btn.button-animation-3:hover {
    background: #1694dc;
}

.btn.button-animation-3.button-shine::before {
    left: -100%;
    transition: all 0.65s ease-in-out;
}

.btn.button-animation-3.button-shine:hover::before {
    left: 100%;
}

.btn.button-primary {
    background-color: #18A4F5;
    color: #FFFFFF;
}

.btn.button-primary i {
    color: #FFFFFF;
}

.btn.button-primary span {
    color: #FFFFFF !important;
}

.btn.button-primary:hover,
.btn.button-primary:focus {
    background-color: #1694dc;
}

.btn.button-primary:disabled {
    background-color: #E3E3E4;
    cursor: not-allowed;
}

.btn.button-primary:disabled span,
.btn.button-primary:disabled span.btn-text {
    color: #98979A !important;
}

.btn.button-primary:disabled i {
    color: #98979A !important;
}

.btn.btn-outline-blue {
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #18A4F5 !important;
    color: #18A4F5;
    height: 43px;
    position: relative;
    overflow: hidden;
}

.btn.btn-outline-blue i {
    position: relative;
    transition: all 0.25s ease;
    color: #18A4F5 !important;
}

.btn.btn-outline-blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.25s ease;
    border-radius: 0;
    margin-left: -100%;
    box-shadow: inset 0 0 0 60px #18A4F5;
}

.btn.btn-outline-blue::after {
    box-shadow: inset 0 0 0 1px #18A4F5;
}

.btn.btn-outline-blue:hover span,
.btn.btn-outline-blue:focus span {
    color: #FFFFFF;
    z-index: 10;
}

.btn.btn-outline-blue:hover::before,
.btn.btn-outline-blue:focus::before {
    margin-left: 0;
}

.btn.btn-outline-blue:hover i,
.btn.btn-outline-blue:focus i {
    color: #FFFFFF !important;
}

.btn.button-outline-error {
    border: 1px solid #E22C2C !important;
    background-color: transparent;
    color: #E22C2C;
}

.btn.button-outline-error i {
    color: #E22C2C;
}

.btn.button-outline-error:hover {
    background-color: rgba(226, 44, 44, 0.1019607843);
    text-decoration: none;
}

.btn.button-outline-blue-komatsu {
    border: 1px solid #18A4F5 !important;
    background-color: transparent;
    color: #18A4F5;
}

.btn.button-outline-blue-komatsu:hover {
    background-color: rgba(24, 164, 245, 0.1019607843);
    text-decoration: none;
}

.btn:disabled {
    cursor: not-allowed;
}

.btn-icon-table {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    cursor: pointer;
    border: none;
}

.btn-icon-table.button-icon-animation-shake:hover i {
    animation: tilt-shaking 0.25s infinite;
}

.btn-icon-table.no-border {
    border: none;
}

.btn-icon-table.button-icon-animation-1 {
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
}

.btn-icon-table.button-icon-animation-1 i {
    position: relative;
    color: #E22C2C;
    font-size: 60px/2;
    margin-top: 60px/4;
    transition: all 0.4s ease;
}

.btn-icon-table.button-icon-animation-1::after {
    box-shadow: inset 0 0 0 0 #FFC4BD;
}

.btn-icon-table.button-icon-animation-1::before {
    background: #FFC4BD;
    box-shadow: inset 0 0 0 30px #FCEAEA;
}

.btn-icon-table.button-icon-animation-1:hover::before {
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #FCEAEA;
}

.btn-icon-table.button-icon-animation-1::before,
.btn-icon-table.button-icon-animation-1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease;
}

.btn-icon-table.button-icon-primary {
    background-color: #E8F6FE;
}

.btn-icon-table.button-icon-primary i {
    color: #18A4F5;
}

.btn-icon-table.button-icon-warning {
    background-color: #FFF3CD;
}

.btn-icon-table.button-icon-warning i {
    color: #f6c83b;
}

.btn-icon-table.button-icon-success {
    background-color: #EAF9EB;
}

.btn-icon-table.button-icon-success i {
    color: #30C336;
}

.btn-icon-table.button-icon-error {
    background-color: #FCEAEA;
}

.btn-icon-table.button-icon-error i {
    color: #E22C2C;
}

.btn-icon-table.button-icon-detail {
    background-color: #F3EAFC;
}

.btn-icon-table.button-icon-detail i {
    color: #A82CE2;
}

.btn-icon-table.btn-delete-all {
    background-color: #E22C2C;
    width: 37px;
    height: 37px;
    border-radius: 8px;
    margin-left: 10px;
}

.btn-icon-table.btn-delete-all:disabled {
    background-color: #E3E3E4;
    cursor: not-allowed;
}

.btn-icon-table.btn-delete-all:disabled i {
    color: #98979A;
}

.btn-icon-table.btn-delete-all i {
    color: #FFFFFF;
    font-size: 18px;
}

.btn-icon-table:hover {
    transition: all 0.5s ease;
}

.btn-icon-table:hover.button-icon-primary {
    background-color: #BDE3FF;
}

.btn-icon-table:hover.button-icon-warning {
    background-color: #fcdf89bf;
}

.btn-icon-table:hover.button-icon-success {
    background-color: #B8FFB1;
}

.btn-icon-table:hover.button-icon-error {
    background-color: #FFC4BD;
}

.btn-icon-table:hover.button-icon-detail {
    background-color: #E6BDFF;
}

.btn-icon-table:disabled {
    background-color: #E3E3E4;
    color: #98979A;
    cursor: not-allowed;
}

.btn-icon-table:disabled i {
    color: #98979A;
}

.btn-icon-table:disabled:hover {
    background-color: #E3E3E4;
}

.badge.badge-success {
    background-color: #30C336;
}

.badge.badge-danger {
    background-color: #E22C2C;
}

.text-status {
    font-weight: 500;
}

.text-status.status-draft {
    color: #656565;
}

.text-status.status-prepare-data {
    color: #140A9A;
}

.text-status.status-upload-data {
    color: #DA2BC8;
}

.text-status.status-processing {
    color: #0087C1;
}

.text-status.status-approved {
    color: #2BB673;
}

.text-status.status-revised {
    color: #F37021;
}

.text-status.status-rejected {
    color: #FF0000;
}

.text-status.status-data-ready {
    color: #1A6B1E;
}

.cbx.cbx-komatsu {
    position: relative;
    background-color: #DBDBDB;
    width: 20px;
    /* Adjust the size as needed */
    height: 20px;
    /* Adjust the size as needed */
    border: 1px solid #A9A9A9;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cbx.cbx-komatsu:checked {
    background-color: #18A4F5;
}

.cbx.cbx-komatsu:checked::before {
    content: "\f00c";
    /* Font Awesome unicode for check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    /* Adjust size as needed */
}

#kt_app_sidebar {
    background-color: #FFFFFF !important;
}

#kt_app_sidebar #kt_app_sidebar_logo {
    padding: 20px 0 20px 25px;
    border-bottom: none;
}

#kt_app_sidebar .menu.menu-rounded .menu-link {
    border-radius: 15px;
    padding: 15px 10px 15px 15px;
}

#kt_app_sidebar .menu.menu-rounded .menu-link .menu-title {
    color: #656565;
    font-weight: normal;
}

#kt_app_sidebar .menu.menu-rounded .menu-link .menu-icon {
    color: #656565;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active {
    background-color: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active .menu-title {
    color: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active .menu-icon {
    color: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-title {
    color: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-icon i {
    color: #FFFFFF;
}

/* SVG icon color when not active */
#kt_app_sidebar .menu.menu-rounded .menu-link .menu-icon svg [fill]:not([fill="none"]) {
    fill: #656565;
    transition: fill 0.3s ease;
}

#kt_app_sidebar .menu.menu-rounded .menu-link .menu-icon svg [stroke]:not([stroke="none"]) {
    stroke: #656565;
    transition: stroke 0.3s ease;
}

/* SVG icon color when active */
#kt_app_sidebar .menu.menu-rounded .menu-link.active .menu-icon svg [fill]:not([fill="none"]) {
    fill: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active .menu-icon svg [stroke]:not([stroke="none"]) {
    stroke: #FFFFFF;
}

/* Active state SVG hover (keep white) */
#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-icon svg [fill]:not([fill="none"]) {
    fill: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link:hover .menu-icon svg [fill]:not([fill="none"]) {
    fill: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-icon svg [stroke]:not([stroke="none"]) {
    stroke: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-arrow:after {
    background-color: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link.active:hover .menu-bullet .bullet {
    background-color: #FFFFFF;
}

#kt_app_sidebar .menu.menu-rounded .menu-link:hover .menu-title {
    color: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link:hover .menu-icon i {
    color: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link:hover .menu-arrow:after {
    background-color: #18A4F5;
}

#kt_app_sidebar .menu.menu-rounded .menu-link:hover .menu-bullet .bullet {
    background-color: #18A4F5;
}

.app-container {
    background-color: #FFFFFF;
}

.app-container h1.header-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0;
}

#kt_app_toolbar {
    background-color: #F6F6F6;
    padding: 20px 30px 20px 30px;
}

#kt_app_toolbar #kt_app_toolbar_container {
    padding-bottom: 20px;
    padding-top: 20px;
}

#kt_app_toolbar #kt_app_toolbar_container .back-button {
    border-radius: 100px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 1px solid #BCBCBC;
    background-color: #FFFFFF;
}

#kt_app_toolbar #kt_app_toolbar_container .back-button i {
    font-size: 20px;
    padding-left: 4px;
}

#kt_app_toolbar #kt_app_toolbar_container .page-title {
    gap: 8px;
}

#kt_app_toolbar #kt_app_toolbar_container .page-title h1.page-heading {
    font-size: 18px;
}

#kt_app_toolbar #kt_app_toolbar_container .page-title .breadcrumb-item {
    font-size: 14px;
}

#kt_app_toolbar #kt_app_toolbar_container .page-title .breadcrumb-item.active {
    color: #18A4F5 !important;
}

#kt_app_content_container {
    background-color: #F6F6F6;
    padding-bottom: 20px;
    height: 100%;
    /* min-height: 100vh; */
}

#kt_app_content_container .card {
    box-shadow: none;
    border: none;
    padding: 0 20px 0 20px;
}

#kt_app_content_container .card .card-header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #A5A5A5;
}

#kt_app_content_container .card .card-body {
    padding-left: 0;
    padding-right: 0;
}

#kt_app_content_container .card .card-body #GeneralSearch {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    /* For Mozilla Firefox, Internet Explorer, Edge */
}

#kt_app_content_container .card .card-body #GeneralSearch::placeholder {
    color: #949494;
    font-size: 14px;
    font-weight: 400;
}

#kt_app_content_container .card .card-body #GeneralSearch::-moz-placeholder,
#kt_app_content_container .card .card-body #GeneralSearch:-ms-input-placeholder,
#kt_app_content_container .card .card-body #GeneralSearch::-ms-input-placeholder {
    color: #949494;
    font-size: 14px;
    font-weight: 400;
}

#kt_app_content_container #custom-search-container {
    display: flex;
}

#kt_app_content_container .custom-search-filter {
    flex-direction: row-reverse;
    gap: 10px;
    justify-content: start;
    align-items: center;
}

#kt_app_content_container .card-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #D1C1C1;
    border-radius: 5px;
    margin-bottom: 30px;
}

#kt_app_content_container .card-summary .summary-header {
    border-bottom: 1px solid #D1C1C1;
    min-height: auto;
    padding-bottom: 20px;
}

#kt_app_content_container .card-summary .summary-header h1 {
    font-size: 18px;
    font-weight: 700;
}

#kt_app_content_container .card-summary .summary-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#kt_app_content_container .card-summary .summary-container .summary-group h2 {
    color: #848484;
    font-size: 14px;
    font-weight: 300;
}

#kt_app_content_container .card-summary .summary-container .summary-group p {
    color: #121212;
    font-size: 16px;
    font-weight: 400;
}

#kt_app_content_container .card-summary .summary-container .summary-group .badge {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 15px;
    border-radius: 10px;
    text-transform: capitalize;
    line-height: 16px;
    letter-spacing: 0.06px;
}

#kt_app_content_container .card-summary .summary-container .summary-group .badge.badge-success {
    background-color: #30C336;
}

#kt_app_content_container .card-summary .summary-container .summary-group .badge.badge-danger {
    background-color: #E22C2C;
}

#kt_app_content_container .card-summary .summary-footer {
    border-top: 1px solid #D1C1C1;
    padding-top: 20px;
}

table.table.table-komatsu {
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

table.table.table-komatsu thead {
    border-bottom: 2px solid #18A4F5;
}

table.table.table-komatsu thead th {
    color: #000000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.17px;
    padding-bottom: 20px;
}

table.table.table-komatsu tbody tr {
    border-bottom: 1px #E3E3E3;
}

table.table.table-komatsu tbody tr td {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #E3E3E3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reusable scrollable table with frozen right column
   ───────────────────────────────────────────────────────────────────────────
   Combine two classes on the wrapper div:

     .table-responsive   Bootstrap — adds overflow-x: auto
     .table-scroll       Our modifier — stops cells from wrapping so the table
                         can grow wider than its container and trigger the
                         horizontal scrollbar.

   Mark any th / td that should stay frozen on the right edge:

     .action-column      Sticks the column to the right during horizontal scroll.

   Full usage example:

     <div class="table-responsive table-scroll">
       <table class="table table-hover gs-0 gy-4 fs-6 align-middle">
         <thead class="fw-semibold border-bottom-3 border-gray-200 align-middle">
           <tr>
             <th style="width: 5%; min-width: 60px">No</th>
             ...
             <th class="text-center action-column" style="min-width: 128px">Action</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>...</td>
             ...
             <td class="text-center action-column">...</td>
           </tr>
         </tbody>
       </table>
     </div>

   IMPORTANT — remove these two classes from <table> when using .table-scroll:
     ✗  border        — its right edge is at the physical table end and scrolls
                        out of view; .table-scroll puts the border on the wrapper
                        instead so all four edges are always visible.
     ✗  table-rounded — border-radius is also moved to the wrapper.

   For columns that declare style="width: x%":
     Always pair them with a min-width in px.
     Without min-width, the browser ignores the percentage hint once the table
     overflows (it falls back to minimum-content-width, collapsing the column
     to the width of its text).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper carries the border and radius so the right edge is always visible
   regardless of horizontal scroll position.
   overflow-y: hidden is required for border-radius to clip the table corners. */
.table-responsive.table-scroll {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.95rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Bootstrap sets margin-bottom: 1rem on .table. Inside .table-scroll the border
   is on the *wrapper*, not the table element, so that margin creates a visible
   gap between the last row's cell borders and the wrapper's bottom border —
   making the vertical column dividers look disconnected at the bottom.
   Zeroing it makes the table flush with the wrapper's inner bottom edge. */
.table-responsive.table-scroll>.table {
    margin-bottom: 0;
}

/* .table-scroll: prevent text wrapping in every cell */
.table-responsive.table-scroll th,
.table-responsive.table-scroll td {
    white-space: nowrap;
}

/* Sticky / fixed action column when table scrolls horizontally */
.table-responsive {
    position: relative;
}

.table-responsive table th.action-column,
.table-responsive table td.action-column {
    position: sticky;
    right: 0;
    z-index: 4;
    background-color: #FFFFFF;
}

.table-responsive table thead th.action-column {
    z-index: 6;
}

/* The separator line and shadow are rendered via ::before, NOT via border-left
   or box-shadow on the sticky element itself.

   Why: border-left and box-shadow applied directly to a sticky element live in
   the element's own paint record. Browsers cache that record in a compositor
   layer and can desync it from the scroll position by a frame, making the line
   flicker or disappear mid-scroll.

   A ::before pseudo-element is a child of the sticky cell, so it is always
   composited and painted inside the sticky cell's own layer — it moves with
   the frozen column perfectly and is immune to the desync glitch. */
.table-responsive table th.action-column::before,
.table-responsive table td.action-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: #E3E3E3;
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.10);
}

table.table.table-komatsu tbody tr td p {
    font-size: 14px;
    font-weight: 300;
}

.table-main .top {
    display: flex;
    margin-bottom: 20px;
}

.table-main .dataTables_length {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 !important;
}

.table-main .dataTables_length span {
    color: #576B7E;
}

.table-main .dataTables_length select {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
    font-size: 14px;
    color: #576B7E;
    font-weight: 400;
    height: 40px;
}

.table-main .dataTables_length select:focus {
    background-color: #FFFFFF;
    border-color: #BCBCBC !important;
}

/* Search input with embedded icon (toolbar) */
.search-input {
    position: relative;
    display: inline-block;
}

.search-input .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9AAAB2;
    font-size: 14px;
    pointer-events: none;
}

.search-input input[type="search"],
.search-input input {
    padding-left: 36px;
}

.table-main .dataTables_filter {
    padding: 0 !important;
}

.table-main .dataTables_filter input {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzQ0ODUiICAgdmlld0JveD0iMCAwIDIxLjk5OTk5OSAyMS45OTk5OTkiICAgaGVpZ2h0PSIyMiIgICB3aWR0aD0iMjIiPiAgPGRlZnMgICAgIGlkPSJkZWZzNDQ4NyIgLz4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhNDQ5MCI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xMDMwLjM2MjIpIiAgICAgaWQ9ImxheWVyMSI+ICAgIDxnICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuNSIgICAgICAgaWQ9ImcxNyIgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAuNCw4NjYuMjQxMzQpIj4gICAgICA8cGF0aCAgICAgICAgIGlkPSJwYXRoMTkiICAgICAgICAgZD0ibSAtNTAuNSwxNzkuMSBjIC0yLjcsMCAtNC45LC0yLjIgLTQuOSwtNC45IDAsLTIuNyAyLjIsLTQuOSA0LjksLTQuOSAyLjcsMCA0LjksMi4yIDQuOSw0LjkgMCwyLjcgLTIuMiw0LjkgLTQuOSw0LjkgeiBtIDAsLTguOCBjIC0yLjIsMCAtMy45LDEuNyAtMy45LDMuOSAwLDIuMiAxLjcsMy45IDMuOSwzLjkgMi4yLDAgMy45LC0xLjcgMy45LC0zLjkgMCwtMi4yIC0xLjcsLTMuOSAtMy45LC0zLjkgeiIgICAgICAgICBjbGFzcz0ic3Q0IiAvPiAgICAgIDxyZWN0ICAgICAgICAgaWQ9InJlY3QyMSIgICAgICAgICBoZWlnaHQ9IjUiICAgICAgICAgd2lkdGg9IjAuODk5OTk5OTgiICAgICAgICAgY2xhc3M9InN0NCIgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjY5NjQsLTAuNzE3NiwwLjcxNzYsMC42OTY0LC0xNDIuMzkzOCwyMS41MDE1KSIgICAgICAgICB5PSIxNzYuNjAwMDEiICAgICAgICAgeD0iLTQ2LjIwMDAwMSIgLz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px 7px !important;
    padding-left: 30px;
    width: 400px !important;
    height: 40px;
}

.table-main .dataTables_filter input::placeholder {
    color: #949494;
    font-size: 14px;
    font-weight: 400;
}

.table-main .dataTables_filter input:focus {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
    font-size: 14px;
    font-weight: 400;
}

.table-main .dataTables_scroll {
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner {
    border-bottom: 2px solid #18A4F5;
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner table th {
    color: #000000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.17px;
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner table th .cbx-all {
    position: relative;
    background-color: #DBDBDB;
    width: 20px;
    /* Adjust the size as needed */
    height: 20px;
    /* Adjust the size as needed */
    border: 1px solid #A9A9A9;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner table th .cbx-all:disabled {
    cursor: not-allowed;
    background-color: #a9a9a9;
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner table th .cbx-all:checked {
    background-color: #18A4F5;
}

.table-main .dataTables_scroll .dataTables_scrollHeadInner table th .cbx-all:checked::before {
    content: "\f00c";
    /* Font Awesome unicode for check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    /* Adjust size as needed */
}

.table-main .dataTables_scroll table tbody td {
    font-size: 14px;
    font-weight: 300;
}

.table-main .dataTables_scroll table tbody td span.badge {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
    letter-spacing: 0.06px;
    padding: 5px 15px 5px 15px;
    border-radius: 10px;
}

.table-main .dataTables_scroll table tbody td .cbx-item {
    position: relative;
    background-color: #DBDBDB;
    width: 20px;
    /* Adjust the size as needed */
    height: 20px;
    /* Adjust the size as needed */
    border: 1px solid #A9A9A9;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.table-main .dataTables_scroll table tbody td .cbx-item:disabled {
    cursor: not-allowed;
    background-color: #a9a9a9;
}

.table-main .dataTables_scroll table tbody td .cbx-item:checked {
    background-color: #18A4F5;
}

.table-main .dataTables_scroll table tbody td .cbx-item:checked::before {
    content: "\f00c";
    /* Font Awesome unicode for check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    /* Adjust size as needed */
}

.table-main .dataTables_info {
    color: #576B7E;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table-main .dataTables_paginate li.paginate_button a.page-link {
    color: #576B7E;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table-main .dataTables_paginate li.paginate_button.active a.page-link {
    color: #FFFFFF;
}

.form-group.required .control-label {
    position: relative;
}

.form-group.required .control-label:after {
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 3px;
    top: 0;
}

.form-group.required:after {
    content: none;
}

.modal .modal-header {
    padding: 1.75rem 0;
    margin: 0 1.75rem;
    border-bottom: 1px solid #A5A5A5;
}

.modal .modal-footer {
    padding: 1.75rem 0;
    margin: 0 1.75rem;
    border-top: 1px solid #A5A5A5;
}

.modal .modal-footer .button-close {
    border: 1px solid #E22C2C !important;
    color: #E22C2C;
    background-color: #FFFFFF;
}

.modal .modal-footer .button-close:hover {
    color: #E22C2C;
    background-color: #FFFFFF;
    text-decoration: underline;
}

.modal .modal-footer .btn:disabled {
    cursor: not-allowed;
}

.form-control {
    font-weight: 400;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    color: #121212;
    font-weight: 600;
    margin-bottom: 7px;
    padding-bottom: 0;
}

.form-group input.form-control {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
}

.form-group input.form-control::placeholder {
    color: #949494;
    font-size: 14px;
    font-weight: 400;
}

/* Override Select2 selected item font weight */
.select2-search__field,
.select2-selection__choice__display {
    font-weight: 400 !important;
    padding: 0px 4px;
}

.nav .nav-item .nav-link {
    color: #000000;
}

.nav .nav-item .nav-link.active {
    color: #18A4F5;
    border-bottom: 2px solid #18A4F5;
}

.nav .nav-item .nav-link.active:hover {
    border-bottom: 2px solid #18A4F5;
}

.nav .nav-item .nav-link:hover {
    border-bottom: 2px solid #18A4F5 !important;
}

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

.jstree .jstree-container-ul .jstree-node .jstree-ocl {
    display: none;
}

.jstree .jstree-container-ul .jstree-node .jstree-wholerow {
    display: none;
}

.jstree .jstree-container-ul ul.jstree-children {
    position: relative;
    display: flex;
    margin-left: 60px;
}

.jstree .jstree-container-ul ul.jstree-children::before {
    content: "";
    position: absolute;
    top: 24%;
    left: -48px;
    width: 60px;
    height: 1px;
    background-color: #000000;
}

.jstree .jstree-container-ul ul.jstree-children::after {
    content: "";
    position: absolute;
    top: -15px;
    left: -49px;
    width: 1px;
    height: 27px;
    background-color: #000000;
}

.jstree .jstree-container-ul .jstree-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.jstree .jstree-container-ul .jstree-anchor .jstree-icon.jstree-checkbox {
    position: relative;
    background-color: #DBDBDB;
    width: 20px;
    height: 20px;
    border: 1px solid #A9A9A9;
    border-radius: 5px;
    cursor: pointer;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.jstree .jstree-container-ul .jstree-anchor.jstree-clicked .jstree-icon.jstree-checkbox {
    background-color: #18A4F5;
}

.jstree .jstree-container-ul .jstree-anchor.jstree-clicked .jstree-icon.jstree-checkbox::before {
    content: "\f00c";
    /* Font Awesome unicode for check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    position: absolute;
    top: 55%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    /* Adjust size as needed */
}

.quicksand-default {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.quicksand-bold {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.rubik-light {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.rubik-default {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.rubik-Medium {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.rubik-semiBold {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.rubik-bold {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

@keyframes MoveUpInitial {
    to {
        transform: translate3d(0, -105%, 0);
    }
}

@keyframes MoveUpEnd {
    from {
        transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.card .card-header.customer-filter {
    flex-direction: column;
    gap: 13px;
    padding-top: 20px;
    padding-bottom: 23px;
}

.card .card-header.customer-filter .select-status {
    display: flex;
    gap: 10px;
}

.card .card-header.customer-filter .select-status .select2 .select2-selection {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
}

.card .card-header.customer-filter .select-status .select2 .select2-selection .select2-selection__placeholder {
    color: #949494;
    font-size: 14px;
    font-weight: 400;
}

.card .card-header.customer-filter .select-status .select2 .select2-selection .select2-selection__rendered {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}

#kt_modal_add_permission_form input.select-date {
    background-color: #FFFFFF;
    border-color: #BCBCBC;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    height: 37px;
}

.details-machine {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.details-machine .detail-wrapper {
    display: flex;
    gap: 20px;
}

.details-machine .detail-wrapper .detail-group {
    max-width: 500px;
    width: 100%;
    flex-direction: column;
}

.details-machine .detail-wrapper .detail-group p {
    margin-bottom: 6px;
}

.details-machine .detail-wrapper .detail-group .detail-label {
    color: #949494;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
}

.details-machine .detail-wrapper .detail-group .detail-text {
    color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

#Datatables .dt-buttons {
    align-items: center;
    gap: 10px;
}

#Datatables .dt-buttons .btn-download-template {
    border-radius: 10px;
    background-color: transparent !important;
    color: #18A4F5 !important;
}

#Datatables .dt-buttons .btn-download-template i {
    color: #18A4F5 !important;
}

#Datatables .dt-buttons .btn-download-template:hover,
#Datatables .dt-buttons .btn-download-template:focus {
    background-color: #E8F6FE !important;
}

#Datatables .dt-buttons .btn-upload-data {
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #18A4F5;
    color: #18A4F5;
    height: 43px;
}

#Datatables .dt-buttons .btn-upload-data:hover,
#Datatables .dt-buttons .btn-upload-data:focus {
    background-color: #E8F6FE !important;
}

#Datatables .dt-buttons .btn-download-data {
    border-radius: 10px;
    background-color: #18A4F5 !important;
    color: #FFFFFF !important;
}

#Datatables .dt-buttons .btn-download-data span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

#Datatables .dt-buttons .btn-download-data i {
    color: #FFFFFF !important;
}

#Datatables .dt-buttons .btn-download-data:hover,
#Datatables .dt-buttons .btn-download-data:focus {
    background-color: #1694dc !important;
}

.dropdown-menu-download {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    will-change: transform;
    background-color: #FFFFFF;
    list-style-type: none;
    border-radius: 10px;
    z-index: 100;
    width: 195px;
    top: 80px;
    right: 20px;
    padding-left: 0;
    transform: translate3d(0px, 0px, 0px);
    border: 1px solid #18A4F5;
}

.dropdown-menu-download li a {
    padding: 5px 10px;
    color: #848484;
}

.dropdown-menu-download li a:hover {
    color: #000000;
    background-color: #BDE3FF;
}

.status-machine {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start !important;
}

.status-machine h1 {
    color: #848484;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: 0.014px;
}

.action-buttons {
    display: flex;
    gap: 4px;
    /* lebih kecil dari gap-4 bootstrap */
    justify-content: center;
    align-items: center;
}

/*# sourceMappingURL=style_pmp.css.map */

/* Notification Styles */
.notification-item {
    border-bottom: 1px solid #f1f1f2;
    transition: background-color 0.2s ease;
}

.notification-item:hover {
    background-color: #f8f9fa !important;
}

.notification-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#notificationDetailModal .modal-content {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#notificationDetailModal .modal-header {
    padding: 1.5rem 1.5rem 0.5rem;
}

#notificationDetailModal .modal-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

#notificationDetailModal .modal-footer {
    padding: 0.5rem 1.5rem 1.5rem;
    justify-content: flex-start;
}

#notificationDetailModal .notification-message-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

#notificationDetailModal .notification-message-content ul {
    padding-left: 1.5rem;
}

#notificationDetailModal .notification-message-content li {
    margin-bottom: 0.5rem;
}

#notificationDetailModal .notification-message-content strong {
    color: #252525;
}

#notificationDetailModal .btn-primary {
    background-color: #4a90e2;
    border-color: #4a90e2;
    padding: 0.5rem 1.5rem;
}

#notificationDetailModal .btn-primary:hover {
    background-color: #3a7bc8;
    border-color: #3a7bc8;
}


/* ============================================================================
   Programme Request Validation Styles
   ============================================================================ */

/* Invalid field styling for regular inputs */
.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Invalid styling for Select2 dropdowns */
.is-invalid-select2 .select2-selection {
    border-color: #dc3545 !important;
}

.is-invalid-select2 .select2-selection:focus,
.is-invalid-select2 .select2-selection:focus-within {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Invalid feedback message */
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Table row with invalid fields */
#modelSupportTable tr.has-error {
    background-color: rgba(220, 53, 69, 0.05);
}

/* Support container with invalid fields */
.supportContainer.has-error {
    border-left: 3px solid #dc3545;
    padding-left: 15px;
    background-color: rgba(220, 53, 69, 0.02);
}

/* Animation for validation errors */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.validation-shake {
    animation: shake 0.5s;
}

/* Validation error list in SweetAlert */
.swal2-html-container ul {
    text-align: left;
    margin: 0;
    padding-left: 20px;
}

.swal2-html-container li {
    margin-bottom: 5px;
}