html, body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    height: 100% !important;
    width: 100% !important;
}

/************* Utility Classes *****************/
.bg-logo {
    background-image: url("../img/logo-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
}

.full-screen {
    width: 100%;
    height: 100vh;
}

hr {
    margin: 0px !important;
}

/************* Containers *****************/
.main-container {
    position: relative !important;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.background,
.background-iframe,
.login-background,
.register-background {
    position: absolute !important;
    background-color: whitesmoke;
    opacity: 0.1;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url("../img/logo-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
}

.background,
.background-iframe {
    width: 100%;
    height: 100vh;
}

.background-iframe {
    height: calc(100vh - 100px) !important;
}

.login-background,
.register-background {
    background-color: rgba(245, 245, 245, 0.6);
}

.iframe-container {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

.banner-header {
    position: absolute !important;
    background-color: transparent !important;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url("../img/logo-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 180px;
}

.banner-body {
    position: absolute !important;
    background-color: transparent !important;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url("../img/banner-body.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0.35 !important;
}

/************* Containers *****************/

/************* Shadows ********************/
.shadow {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2) !important;
}

.shadow-left {
    box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2) !important;
}

.shadow-right {
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2) !important;
}

.text-shadow {
    text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.2) !important;
}

.text-thin-shadow {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/************* Shadows ********************/

/********** Loading Screen *********/
.hidden {
    display: none !important;
}

.loader-wrapper {
    position: relative !important;
}

.loader-image { 
    background-image: url("../img/loading.gif"); 
    background-attachment: absolute;
    background-repeat: no-repeat; 
    background-color: transparent; 
    background-position: center; 
    background-size: 32px auto; 
}

.loader,
.loader-text,
.loader-image {
    position: absolute !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999;
}

.loader > div,
.loader-text > div { 
    position: absolute !important;
    width: max-content !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    color: black !important;
}

.loader-text > div {
    height: 16px !important;
}

.loader-text > div > span {
    margin-left: 4px !important;
    font-size: 12px;
    line-height: 15px;
    float: right !important;
}

.loader-text > div > [class^="fa-"],
.loader-text > div > .fa {
    float: left !important;
    font-size: 16px !important;
    width: 16px !important;
}

.loader > div > [class^="fa-"],
.loader > div > .fa {
    font-size: 24px !important;
}

/********** Loading Screen *********/

/******* Input Append/Prepend *********/

/* Label Styling */
.validate-group {
    position: relative !important;
}
.validate-group label {
    font-size: 0.7em !important;
    margin-bottom: -10px;
}

/* Input Group Styling */
.input-append,
.input-prepend {
    width: 100%;
    height: 45px; /* Adjustable height */
    border: 1px solid gainsboro !important; /* Default border */
    background-color: white !important;
    padding: 0 !important;
    border-radius: 8px; /* Slightly rounded edges */
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Input Field */
.input-append input,
.input-prepend input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 10px;
    font-size: 16px;
    background: white;
    height: 100%; /* Ensures input matches container */
}

/* Icon Container - Square */
.input-group-append {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 45px;
    min-width: 45px; /* Prevent shrinking */
    position: relative; /* Needed for the separator */
}

/* Separator (Shorter Border Between Input & Icon) */
.input-group-append::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;  /* Adjusted to not touch top */
    bottom: 10%; /* Adjusted to not touch bottom */
    width: 1px;
    background-color: gainsboro; /* Default separator color */
    z-index: 10; /* Ensure it's above input field */
}

/* Keep Separator Visible on Focus, Valid, or Invalid */
.input-append:focus-within .input-group-append::before,
.input-prepend:focus-within .input-group-append::before,
.was-validated .validate-group .input-append .input-group-append::before,
.was-validated .validate-group .input-prepend .input-group-append::before {
    background-color: gainsboro !important; /* Prevent it from disappearing */
}

/* Icon Styling */
.input-group-text {
    border: none !important;
    background: white;
    color: gray;
    display: flex;
    align-items: center;
    font-size: 18px;
}

/* Light blue border when focused */
.input-append:focus-within,
.input-prepend:focus-within {
    border-color: rgba(0, 133, 255, 0.9) !important;
    box-shadow: 0px 0px 4px 2px rgba(0, 133, 255, 0.3);
}

/* Validation - Invalid (Red border, separator stays gray) */
.was-validated .validate-group .input-append,
.was-validated .validate-group .input-prepend {
    border-color: rgba(220, 53, 69, 1) !important; /* Red border */
    box-shadow: 0px 0px 4px 2px rgba(220, 53, 69, 0.3);
}

/* Validation - Valid (Green border, separator stays gray) */
.was-validated .validate-group .input-append:has(input:valid),
.was-validated .validate-group .input-prepend:has(input:valid) {
    border-color: rgba(40, 167, 69, 1) !important; /* Green border */
    box-shadow: 0px 0px 4px 2px rgba(40, 167, 69, 0.3);
}

/* Validation Feedback */
.was-validated .validate-group .invalid-feedback,
.was-validated .validate-group:has(select:invalid) .invalid-feedback {
    display: block !important;
}

.was-validated .validate-group:has(input:valid) .invalid-feedback,
.was-validated .validate-group:has(select:valid) .invalid-feedback {
    display: none !important;
}

.invalid-feedback {
    color: red;
} 
.valid-feedback {
    color: green !important;
}
.invalid-feedback,
.valid-feedback {
    position: absolute;
    font-size: 12px !important;
    margin-top: 2px !important;
    display: none !important;
}

/******* Input Append/Prepend *********/

/********** Label / Text / Font Style *********/
/* Center alignment */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Label Background Styles */
[class^="lbl-bg-"] {
    border-radius: 25px !important;
    padding: 2px 15px !important;
}

.lbl-bg-primary { color: #fff !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-secondary { color: #fff !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-success { color: #fff !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-danger { color: #fff !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-dark { color: #fff !important; background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }

.lbl-bg-info { color: #000 !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-warning { color: #000 !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.lbl-bg-light { color: #000 !important; background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font Weights */
.text-lighter { font-weight: lighter !important; }
.text-normal { font-weight: normal !important; }
.text-medium { font-weight: 500 !important; }
.text-semibold { font-weight: 600 !important; }
.text-bold { font-weight: bold !important; }
.text-bolder { font-weight: bolder !important; }

/* Font Styles */
.font-italic { font-style: italic !important; }
.font-normal { font-style: normal !important; }

/* Font Sizes */
.font-xx-small { font-size: xx-small !important; }
.font-x-small { font-size: x-small !important; }
.font-smaller { font-size: smaller !important; }
.font-small { font-size: small !important; }
.font-x-medium { font-size: 0.7em !important; }
.font-medium { font-size: medium !important; }
.font-large { font-size: large !important; }
.font-x-large { font-size: x-large !important; }
.font-xx-large { font-size: xx-large !important; }

/* Text Decorations and Transformations */
.notext-decoration { text-decoration: none !important; }
.notext-transform { text-transform: none !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* Misc */
textarea { resize: none; }

/* Cursor Styles */
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-none { cursor: none !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/********** Label / Text / Font Style *********/

/* Text and Background Colors */
:root {
    --lightgreen: rgb(0, 179, 0);
    --darkgreen: rgb(0, 53, 0);
    --alert: rgb(148, 0, 0);
    --dirtywhite: rgb(255, 255, 235);
    --darkyellow: rgb(235, 235, 29);
    --lightgreen-bg: rgb(0, 216, 0);
    --emeraldgreen: #20c997;
    --light-warning: #fff3cd;
    --lendify: rgb(0, 71, 171);
    --lendify-dark: rgb(0, 52, 126);
    --lendify-darker: #001d3f;
    --lendify-light: rgb(0, 106, 255);
    --lendify-lighter: rgb(77, 151, 255);
    --lendify-login: #82beff;
}

.text-transparent { color: transparent !important; }
.text-white { color: white !important; }
.text-black { color: black !important; }
.text-lightblue { color: lightblue !important; }
.text-blue { color: blue !important; }
.text-mediumblue { color: mediumblue !important; }
.text-navy { color: navy !important; }
.text-silver { color: silver !important; }
.text-whitesmoke { color: whitesmoke !important; }
.text-gainsboro { color: gainsboro !important; }
.text-lightgray { color: lightgray !important; }
.text-gray { color: gray !important; }
.text-darkgray { color: darkgray !important; }
.text-dimgray { color: dimgray !important; }
.text-red, .text-error { color: red !important; }
.text-lightgreen { color: var(--lightgreen) !important; }
.text-green { color: green !important; }
.text-darkgreen { color: var(--darkgreen) !important; }
.text-yellow { color: yellow !important; }
.text-lime { color: lime !important; }
.text-orange { color: orange !important; }
.text-orangered { color: orangered !important; }
.text-darkorange { color: darkorange !important; }
.text-alert { color: var(--alert) !important; }
.text-magenta { color: magenta !important; }
.text-brightyellow { color: #FFD700 !important; }
.text-light-warning { color: var(--light-warning) !important; }
.text-lightcyan { color: #00E1FF !important; }
.text-lendify { color: var(--lendify) !important; }
.text-lendify-dark { color: var(--lendify-dark) !important; }
.text-lendify-darker { color: var(--lendify-darker) !important; }
.text-lendify-light { color: var(--lendify-light) !important; }
.text-lendify-lighter { color: var(--lendify-lighter) !important; }
.text-lendify-login { color: var(--lendify-login) !important; }

.text-outline-black {
    text-shadow:
      -1px -1px 0 black,  
       1px -1px 0 black,
      -1px  1px 0 black,
       1px  1px 0 black;
}
.text-outline-white {
    text-shadow:
      -1px -1px 0 white,  
       1px -1px 0 white,
      -1px  1px 0 white,
       1px  1px 0 white;
}

.text-error {
    animation: blink 1s linear infinite;
}

.text-blink {
    animation: blink 5s linear infinite;
    will-change: opacity, transform;
}

@keyframes blink {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: white !important; }
.bg-black { background-color: black !important; }
.bg-lightblue { background-color: lightblue !important; }
.bg-blue { background-color: blue !important; }
.bg-mediumblue { background-color: mediumblue !important; }
.bg-navy { background-color: navy !important; }
.bg-silver { background-color: silver !important; }
.bg-dirtywhite { background-color: var(--dirtywhite) !important; }
.bg-whitesmoke { background-color: whitesmoke !important; }
.bg-gainsboro { background-color: gainsboro !important; }
.bg-lightgray { background-color: lightgray !important; }
.bg-gray { background-color: gray !important; }
.bg-darkgray { background-color: darkgray !important; }
.bg-dimgray { background-color: dimgray !important; }
.bg-red { background-color: red !important; }
.bg-green { background-color: green !important; }
.bg-lightgreen { background-color: var(--lightgreen-bg) !important; }
.bg-orange { background-color: orange !important; }
.bg-orangered { background-color: orangered !important; }
.bg-pink { background-color: pink !important; }
.bg-yellow { background-color: yellow !important; }
.bg-darkyellow { background-color: var(--darkyellow) !important; }
.bg-yellowgreen { background-color: yellowgreen !important; }
.bg-teal { background-color: teal !important; }
.bg-gold { background-color: gold !important; }
.bg-emeraldgreen { background-color: var(--emeraldgreen) !important; }
.bg-limegreen { background-color: limegreen !important; }
.bg-light-warning { background-color: var(--light-warning) !important; }
.bg-skyblue { background-color: skyblue !important; }
.bg-lendify { background-color: var(--lendify) !important; }
.bg-lendify-dark { background-color: var(--lendify-dark) !important; }
.bg-lendify-darker { background-color: var(--lendify-darker) !important; }
.bg-lendify-light { background-color: var(--lendify-light) !important; }
.bg-lendify-lighter { background-color: var(--lendify-lighter) !important; }
.bg-lendify-login { background-color: var(--lendify-login) !important; }

/* Text and Background Colors */

.border-lendify {
    border: 1px var(--lendify) solid !important;
    border-radius: 0px !important;
}

.border-lendify-dark {
    border: 1px var(--lendify-dark) solid !important;
    border-radius: 0px !important;
}

.border-lendify-darker {
    border: 1px var(--lendify-darker) solid !important;
    border-radius: 0px !important;
}

.border-lendify-light {
    border: 1px var(--lendify-light) solid !important;
    border-radius: 0px !important;
}

.border-lendify-lighter {
    border: 1px var(--lendify-ligher) solid !important;
    border-radius: 0px !important;
}

/* Width / Inline */

[class^="w-"] {
    width: var(--w-size, auto) !important;
}
.w-500 { --w-size: 500px; }
.w-300 { --w-size: 300px; }
.w-250 { --w-size: 250px; }
.w-200 { --w-size: 200px; }
.w-150 { --w-size: 150px; }
.w-100 { --w-size: 100px; }
.w-75 { --w-size: 75px; }
.w-50 { --w-size: 50px; }
.w-25 { --w-size: 25px; }

.inline { display: inline !important; }
.inline-box { display: inline-block !important; }

/* Alert / Notification */

#alert.alert {
    position: absolute !important;
    width: 100%;
    height: 100% !important;
    text-align: center;
    top: 0;
    left: 0;
    padding-top: calc(45vh + 12px);
    z-index: 99999;
}
#alert.alert-danger {
    background-color: rgba(255, 0, 0, 0.1) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: red !important;
    -webkit-text-stroke: 1px white;
}

.toast, .toast * {
    position: relative !important;
    border-radius: 0;
    box-shadow: none !important;
    background-image: none;
}

.notify {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-width: 300px !important;
    position: fixed !important;
    padding: 1rem !important;
    z-index: 999999;
}

.notify[class*="notify-"] {
    position: fixed !important;
}
.notify-topleft { left: 0; top: 0; }
.notify-topright { right: 0; top: 0; }
.notify-bottomleft { left: 0; bottom: 0; }
.notify-bottomright { right: 0; bottom: 0; }

.notify-topcenter, .notify-bottomcenter {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    left: calc(50% - 150px);
}
.notify-topcenter { top: 0; }
.notify-bottomcenter { bottom: 0; }

.notify-danger, .notify-success, .notify-info, .notify-warning {
    border-style: solid;
}
.notify-danger {
    color: #B94A48;
    background: #F2DEDE;
    border-color: #EED3D7;
}
.notify-success {
    color: #468847;
    background: #DFF0D8;
    border-color: #D6E9C6;
}
.notify-info {
    color: #3A87AD;
    background: #D9EDF7;
    border-color: #BCE8F1;
}
.notify-warning {
    color: #C09853;
    background: #FCF8E3;
    border-color: #FBEED5;
}

.notify-danger i, .notify-danger h1 { color: #882c2a; }
.notify-success i, .notify-success h1 { color: #276328; }
.notify-info i, .notify-info h1 { color: #255c77; }
.notify-warning i, .notify-warning h1 { color: rgb(160, 123, 55); }

.toast-body {
    position: relative;
    width: 100% !important;
    height: inherit !important;
    padding-bottom: 1px !important;
}
.toast-body i {
    position: absolute;
    margin-top: 5px;
    width: 2.75rem;
    font-size: 2.25rem;
}
.toast-body .toast-content {
    margin-left: calc(2.75em + 10px);
    margin-top: -2.4rem;
}
.toast-body .toast-content h1 {
    font-size: 0.85rem;
    font-weight: bold;
}
.toast-body .toast-content p {
    font-size: 0.75rem;
    margin-top: -5px;
}

/* Alert / Notification */

/* Button & Badge */
.btn {
    box-shadow: none !important;
    outline: none !important;
}
.btn .badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.75em;
}

/* btn-xs */
/*.btn-xs {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.2rem;
}*/

.btn-xs, .btn-group-xs > .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.748rem !important;
    line-height: 1;
    border-radius: 0.2rem;
}
.btn-xs span i, .btn-group-xs > .btn span i {
    font-size: 0.748rem !important;
    transform: none !important;
}
.btn-xs + .dropdown-toggle-split, .btn-group-xs > .btn + .dropdown-toggle-split {
    padding: 0.375rem;
}

/* Absolute Positioning for btn-xs */
.btn.top, .btn.bottom, .btn-group-xs.top, .btn-group-xs.bottom {
    position: absolute !important;
    left: 0;
    z-index: 999;
    border-radius: 0;
}
.btn.top, .btn-group-xs.top { top: 4px; }
.btn.bottom, .btn-group-xs.bottom { bottom: 0; }

/* btn-transparent */
.btn.btn-transparent {
    width: fit-content;
    background-color: transparent;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
}
.btn.btn-transparent:disabled { 
    color: rgba(0, 0, 0, 0.3); 
    pointer-events: none !important;
}
.btn.btn-transparent:hover { 
    color: rgba(0, 0, 0, 1); 
    font-weight: 600;
}

.btn.btn-icons {
    width: fit-content;
    background-color: transparent !important;
    font-size: 16px;
    font-weight: 600;
    color: rgb(68, 68, 68);
    border: none;
}
.btn.btn-icons:disabled { 
    color: rgb(184, 184, 184); 
    font-weight: 600;
}
.btn.btn-icons:hover { 
    color: rgb(0, 0, 0); 
    font-weight: 600;
}

.btn.btn-icons-white {
    width: fit-content;
    background-color: transparent !important;
    font-size: 16px;
    font-weight: 600;
    color: rgb(189, 189, 189);
    border: none;
}
.btn.btn-icons-white:disabled { 
    color: rgb(124, 124, 124); 
    font-weight: 600;
}
.btn.btn-icons-white:hover { 
    color: rgb(255, 255, 255); 
    font-weight: 600;
}

/* Outline Buttons */
.btn.btn-outline-black, .btn.btn-outline-white,
.btn.btn-outline-muted, .btn.btn-outline-silver {
    background-color: transparent;
    border: 1px solid darkgray;
    color: darkgray;
}

.btn.btn-outline-muted, .btn.btn-outline-silver {
    border-color: silver;
    color: silver;
}

.btn.btn-outline-black:hover,
.btn.btn-outline-white:hover,
.btn.btn-outline-muted:hover,
.btn.btn-outline-silver:hover {
    border-color: black;
    color: black;
}

.btn.btn-outline-white:hover { border-color: white; color: white; }
.btn.btn-outline-white:hover > .fa, .btn.btn-outline-black:hover > .fa { color: green; }
.btn.btn-outline-silver:hover { border-color: gray; color: gray; }

/* Disabled Outline Buttons */
.btn.btn-outline-black:disabled, .btn.btn-outline-white:disabled,
.btn.btn-outline-muted:disabled, .btn.btn-outline-silver:disabled {
    border-color: gainsboro;
    color: gainsboro;
    cursor: none;
    pointer-events: none;
}

/* Active/Focus States */
.btn.btn-outline-black:active, .btn.btn-outline-white:active,
.btn.btn-outline-muted:active, .btn.btn-outline-silver:active,
.btn.btn-outline-silver:focus {
    border-color: silver;
    color: silver;
    outline: none !important;
    box-shadow: none !important;
}

/* Input / Select */
::placeholder, ::-moz-placeholder, ::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
    font-size: 14px !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    text-transform: none !important;
}

input, select, textarea {
    font-size: 14px !important;
    line-height: 30px !important;
    height: 36px !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    border-radius: 4px !important;
}
input:read-only, input:disabled, input.disabled, 
select:read-only, select:disabled, select.disabled, 
textarea:read-only, textarea:disabled, textarea.disabled, 
.disabled + .select2-container {
    background-color: white !important;
    cursor: default !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
    appearance: textfield;
}

textarea.no-resize {
    resize: none;
}
button.disabled {
    margin-top: 7px !important;
    margin-left: -7px !important;
    background-color: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    color: black !important;
    font-size: 14px !important;
}

/* Vertical Separator */
.vertical-separator {
    width: 1px;
    height: 32px;
    border: 1px inset gray;
    margin: -1px 5px 0 7px;
    pointer-events: none;
}

/* Pointer Events and Cursors */
.pointer-events-none {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}
.cursor-not-allowed {
    cursor: pointer !important;
}
.non-editable {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* No Outline and Box-Shadow */
input, textarea, select, .date.default, .date.shortdate, .date.longdate, .date.fulldate, .date.month, .date.year, .date.monthYear, 
.time.timedefault, .time.timemilitary, .select2-container--focus .select2-selection, .select2-container .select2-selection {
    outline: none !important;
    box-shadow: none !important;
}

/* Step */
.step {
    width: 360px; 
    text-align: center; 
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -10px auto;
}
.step-body {
    position: relative;
    width: 120px;
}
.step-number {
    width: 30px;
    height: 30px;
    background-color: #0056b3;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin: 0 auto;
    z-index: 9999 !important;
}
.step-text {
    margin-top: 5px;
    font-size: 12px;
}
.step-line-left, .step-line-right {
    position: absolute;
    top: 15px;
    width: 50px;  
    height: 2px;
    background-color: #0056b3;
    z-index: 0 !important;
}
.step-line-left { left: 0; }
.step-line-right { right: 0; }

@media (max-width: 576px) {
    .step {
        width: 100%;  
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap; /* Ensures items stay in a row */
        font-size: 9px !important;
    }
    .step-body {
        width: 80px;
        position: relative;
        text-align: center;
    }
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .step-text {
        margin-top: 5px;
        font-size: 9px;
    }
    .step-line-left, .step-line-right {
        width: 30px;  /* Adjust the line width */
        position: absolute;
        top: 15px; /* Adjust to keep it vertically centered */
        background-color: #0056b3;
        height: 2px;
    }
    .step-line-left {
        left: 0px;
    }
    .step-line-right {
        right: 0px;
    }
}

/* Step */

/********* override *************/
.nav-header {
    font-weight: bold !important;
}

@media screen and (max-width: 767px) {
    .user-footer {
        display: none !important;
    }
}

.app-content {
    margin-top: 15px !important;
    overflow-y: auto; 
    height: calc(100vh - 160px);
}
.flex-title {
    height: 60px !important;
    background-color: rgb(0, 71, 171, 0.2) !important;
    border: none !important;
}
@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
}

.modal-dialog-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
  
.modal-dialog-right {
    position: absolute;
    right: 0;
    top: 14%;
    transform: translateY(-50%);
    margin: 0;
}

@media (max-width: 768px) {
    .modal-dialog-right {
        top: 15%;
    }
}
/* hr */
hr.double-line {
    border: none;
    border-top: 5px double #000;
    color: #000;
    height: 0;
    margin: 10px 0;
}
hr.single-line {
    border: none;
    border-top: 2px solid #000;
    color: #000;
    height: 0;
    margin: 10px 0;
}

/* Card Width */
.card.card-xl {
    max-width: 1140px !important;
    width: 90% !important;
    margin: auto;
    background: white;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
}

.card.card-lg {
    max-width: 800px !important;
    width: 90% !important;
    margin: auto;
    background: white;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
}

.card.card-md {
    max-width: 500px !important;
    width: 90% !important;
    margin: auto;
    background: white;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
}

.card.card-sm {
    max-width: 360px !important;
    width: 90% !important;
    margin: auto;
    background: white;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
}