@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

:root {
    --bs-font-sans-serif: 'Inter', 'Helvetica', 'sans-serif';
    --bs-body-font-family: var(--bs-font-sans-serif);
    --customer-primary-color: #1d74bd;
    --customer-primary-color-rgb:rgba(0,102,178,1);
    --customer-secondery-color: #9d9fa1;
    --customer-secondery-color-rgb:rgba(157,159,161,1);
}

html, body {
    font-family: var(--bs-body-font-family);
}

.danger-alert-border-inside {
    animation: glowBorder 1s infinite; /* Glowing effect */
}

@keyframes glowBorder {
    0%, 100% {
        box-shadow: 0 0 60px 30px rgba(255, 0, 0, 0); /* Hide the glow */
    }
    50% {
        box-shadow: 0 0 60px 30px rgba(255, 0, 0, 0.5); /* Show the red glow */
    }
}

@keyframes innerGlow {
    0%, 100% {
        box-shadow: inset 0 0 100px 30px rgba(255, 0, 0, 0); /* Hide the inner glow */
    }
    50% {
        box-shadow: inset 0 0 100px 30px rgba(255, 0, 0, 0.8); /* Show the inner red glow */
    }
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 500;
}

.vertical-separator {
    background-color: var(--bs-border-color);
    border: 0;
    opacity: 1;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
}

.floating-button {
    z-index: 1000;
    opacity: 0.3;
    position: fixed;
    bottom: 30px;
    left: 30px;
    transition: opacity 0.4s, transform 0.4s;
}

.floating-button:hover {
    opacity: 1;
    transform: scale(1.3);
}


[data-kt-app-header-sticky=on] {
    --bs-app-header-height: 90px;
    --bs-app-header-height-actual: 90px;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background: #a2adb7;
    position: absolute;
    border-radius: 7px;
    opacity: 0;
    transition: opacity .2s linear;
}

.customer-background-color {
    background: var(--customer-primary-color-rgb);
    background: -moz-linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
    background: -webkit-linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
    background: linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
}

.customer-text-color {
    background: var(--customer-primary-color-rgb);
    background: -moz-linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
    background: -webkit-linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
    background: linear-gradient(85deg, var(--customer-secondery-color-rgb) 8%, var(--customer-primary-color-rgb) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}


.loader {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 10px solid  var(--customer-primary-color);
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 10px solid var(--customer-secondery-color);
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 10px solid var(--customer-primary-color);
}

.loader-small {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    perspective: 800px;
}

.loader-small .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 5px solid var(--customer-primary-color);
}

.loader-small .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 5px solid var(--customer-secondery-color);
}

.loader-small .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 5px solid var(--customer-primary-color);
}

.custom-tooltip {
    display: none;
    position: absolute;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.page-loader-basic {
    background-color: var(--bs-body-bg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
}

[data-kt-app-page-loading-basic=on] .page-loader-basic, .page-loading-basic .page-loader-basic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotate-demo {
    rotate: 45deg;
}

.fs-6x {
    font-size: 6rem !important;
}

.fs-7x {
    font-size: 7rem !important;
}

.fs-8x {
    font-size: 8rem !important;
}

.fs-9x {
    font-size: 9rem !important;
}

.fs-10x {
    font-size: 10rem !important;
}

.fs-15x {
    font-size: 15rem !important;
}

.fs-20x {
    font-size: 20rem !important;
}

.fs-25x {
    font-size: 25rem !important;
}

.fs-30x {
    font-size: 30rem !important;
}

.center-content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

#image-modal img {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overflow-break-word {
    overflow-wrap: break-word;
}

.lane-status {
    position: absolute;
    top: 0.1%;
    left: 0.1%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--bs-info);
}

#kt_modal_visit_details {
    z-index: 999; /* Set a lower z-index value for the modal */
}

.modal-image {
    z-index: 1000; /* Set a higher z-index value for the image */
}

.modal-backdrop {
    z-index: 998;
}

table.clickable-table tbody tr:hover {
    cursor: pointer;
}

.clickable-table-with-excluded-columns tbody tr td:first-child,
.clickable-table-with-excluded-columns tbody tr td:last-child {
    cursor: default; /* Default cursor for the first and last columns */
}

.clickable-table-with-excluded-columns tbody tr td {
    cursor: pointer; /* Clickable cursor for all other columns */
}

.modal {
    z-index: 999; /* Set a lower z-index value for the modal */
}
