.offcanvas
{
    margin-top: 60px;
}
.modal{
    background-color: rgb(0 0 0 / 70%)
}
.passcode-area {
    text-align: center;
}
.passcode-area > input {
    background-color: @bone;
    border          : 2px solid #d6d6d6;
    border-radius   : 4px;
    padding         : 0;
    margin          : 5px 6px 0;
    width           : 40px;
    height          : 55px;
    text-align      : center;
    font-size       : 32px;
    line-height     : 1.29;
    text-transform  : uppercase;
    background-clip : padding-box;
    &               : nth-child(3) {
        margin-right: 25px;
        @media only screen and (max-width: @breakpoint-mobile) {
        margin-right: 6px;
        }
    }
    &:focus {
        -webkit-appearance: none;
        border: 2px solid skyblue;
        outline: 0;
        box-shadow: 0px 0px 3px rgba(131, 192, 253, 0.5);
    }
}
.cropperjs-sweetalert .swal2-html-container
{
    max-height: 500px !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
.swal2-container.no-max-height .swal2-html-container
{
    max-height: none;
}
.swal2-html-container.alertForm-height
{
    max-height: 90vh !important;
}
.inputUppercase
{
    text-transform:uppercase;
}
.modal { padding: 80px 0; }
.swal2-container { z-index: 9999; }
.swal2-container .select2-container { z-index: 10000 }
/* [data-kt-app-header-fixed=true] .app-header{ z-index: 9999; } */
.page-loader { z-index: 99999999 }
.daterangepicker { z-index: 100000 !important; }
.air-datepicker-global-container { z-index: 10001 !important; }

.colored-toast.swal2-icon-success { background-color: var(--bs-success) !important; }
.colored-toast.swal2-icon-error { background-color: var(--bs-error) !important; }
.colored-toast.swal2-icon-warning { background-color: var(--bs-warning) !important; }
.colored-toast.swal2-icon-info { background-color: var(--bs-info) !important; }
.colored-toast.swal2-icon-question { background-color: #87adbd !important; }
.colored-toast .swal2-title { color: white; }
.colored-toast .swal2-close { color: white; }
.colored-toast .swal2-html-container { color: white; }
.datepicker-container.datepicker-dropdown { z-index: 10000 !important; }
.offcanvas-xxl { z-index: 9999; }
.app-header{
    position: sticky;
    top     : 0px;
}
.input-group .select2-container
{
    min-width  : 0 !important;
    margin-left: 0 !important;
    flex-grow  : 1 !important;
}
.input-group .select2-selection
{
    border-radius: 0 !important;
}
.input-group .border-input
{
    border: 1px solid var(--bs-gray-300) !important;
}
.image-tips .tooltip-inner
{
    max-width: 50vh !important;
}
.border-end-1
{
    border-right: 1px solid;
}
.swal2-container.fullscreen {
    padding: 0 !important;
}
.swal2-container.fullscreen .swal2-popup {
    width        : 100vw !important;
    height       : 100vh !important;
    padding      : 0 !important;
    box-shadow   : none !important;
    border-radius: 0 !important;
    max-width    : 100% !important;
    box-sizing   : border-box;
}
.swal2-container.fullscreen .swal2-popup .swal2-header,
.swal2-container.fullscreen .swal2-popup .swal2-content,
.swal2-container.fullscreen .swal2-popup .swal2-footer {
    padding: 0 !important;
}
.swal2-container.fullscreen .swal2-popup .swal2-title,
.swal2-container.fullscreen .swal2-popup .swal2-html-container {
    margin     : 0 !important;
    padding    : 0;
    text-align : center;
    height     : 90vh;
    max-height : none;
    /* display    : flex !important;
    align-items: center; */
}
.swal2-container.fullscreen .swal2-popup .swal2-close {
    top  : 10px;
    right: 10px;
}

/**
 * Progress bar
 */
.progress-bar {
    width           : 80%;
    max-width       : 400px;
    background-color: #e0e0e0;
    border-radius   : 8px;
    overflow        : hidden;
    box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.1);
    margin          : 10px auto 0 auto;
}
.progress {
    height          : 10px;
    background-color: var(--bs-primary);
    width           : 0;                /* Width is controlled via inline style or JS */
    text-align      : center;
    color           : white;
    line-height     : 10px;             /* Center the text vertically */
    border-radius   : 8px 0 0 8px;
    transition      : width 0.3s ease;
}