body {
    font-family: 'Lato', sans-serif;

    background-image: url('/assets/img/qam_bg.jpg') !important;
    background-color: #fef9f3 !important;
    padding-top: 3rem;
    background-size: 100vh !important;
    background-repeat: no-repeat !important;
    background-position: 200px center !important;
}
.toast-info {
    background-color: #b43b2f !important; /* Warning color (yellow) */
}

.disableBtn{ 
    opacity: 0.5;
    pointer-events: none;
}
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.icon-filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

a {
    text-decoration: none;
}

.overlay {
    height: 100vh;
    width: 100vw;
    position: absolute;
    background: #0000001a;
}


.enable-method {
    cursor: pointer;
}

.enable-method:hover {
    background: #f1f1f1;
}

.disable-method {
    cursor: not-allowed;
    filter: contrast(0.8);
}

.otp-field {
    text-align: center !important;
    height: 50px !important;
    width: 50px !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.cursor-pointer {
    cursor: pointer !important;
}



@media only screen and (min-width:1180px) and (max-width:1280px) {}


@media only screen and (min-width:1024px) and (max-width:1366px) {}


@media only screen and (min-width: 640px) and (max-width: 767px) {

    body {
        background-color: #ffffff !important;
        padding-top: 0 !important;
    }

    .card-container {
        padding: 0 0 !important;
    }

    .login-card, .tfa-card {
        border-color: transparent !important;
    }

}

@media only screen and (min-width: 480px) and (max-width: 639px) {

    body {
        background-color: #ffffff !important;
        padding-top: 0 !important;
    }

    .card-container {
        padding: 0 0 !important;
    }

    .login-card, .tfa-card {
        border-color: transparent !important;
    }

}

@media only screen and (min-width: 320px) and (max-width: 479px) {

    body {
        background-color: #ffffff !important;
        padding-top: 0 !important;
    }

    .card-container {
        padding: 0 0 !important;
    }

    .login-card, .tfa-card {
        border-color: transparent !important;
    }
}