[data-bs-theme=dark] {

    color-scheme: dark;

    .offcanvas {
        background: linear-gradient(to top right, rgba(61, 40, 96, 1), #00082cff);
    }

    .offcanvas .list-group-item {
        border: 1px solid hsla(0, 0%, 100%, 0.568);
    }
    
    /* ajuste para o sweetalert aparecer acima dos offcanvas do boostrap */
    .swal2-container {
        z-index: 1100 !important;
    }
    .swal2-toast {
        z-index: 1100 !important;
    }
    
    body {
        margin: 0;
        min-height: 100vh;
        background-color: #020a21;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .layout-navbar-full.layout-horizontal .layout-navbar {
        background-color: #020a21ff;
    }
 
    .card {
        background-color: #020a21ff;
        box-shadow: 0 20px 60px -30px rgba(130, 90, 255, .6);
        border: 1px solid hsla(0, 0%, 100%, 0.12);
        border-radius: 1em;
    }

    .card li {
        list-style: none;
    }

       .card-shadow {
        background-color: #2b2d42;
        box-shadow: 0 20px 60px -30px rgba(130, 90, 255, .6);
        border: 1px solid hsla(0, 0%, 100%, 0.12);
        border-radius: 1em;
    }

    .scrollable-container {
        max-height: 300px;
        overflow-y: auto;
    }

    input.form-control {
        background-color: #1a1d2dff;
        color: #fff;
    }

    .input-group-text {
        background-color: #1a1d2dff;
    }

    h4 {
        color: #fff;
    }

    #country-code {
        background-color: #1a1d2dff;
        color: #fff;
    }

    .nav-link.active {
        background: linear-gradient(to right, #7b2cbaff, #2e5eebff);
        color: #fff;
    }

    #btn-transfer-money,
    #btn-add-money {
        background: linear-gradient(to right, #7b2cbaff, #2e5eebff);
        color: #fff;   
    }
}

[data-bs-theme=light] {

    .card {
        border: 1px solid rgba(130, 90, 255, .6)
    }

    #country-code {
        background-color: #F2F2F2;
        color: #3a4a4a;
    }

    #btn-transfer-money,
    #btn-add-money {
        background-color: #020a21ff;
        color: #fff;   
    }
}

.btn.btn-primary {
    background: linear-gradient(to right, #7b2cbaff, #2e5eebff);
    color: #fff;
    border: none;
    transition: background .3s ease-in-out;

    &:hover {
        background: linear-gradient(to right, rgb(103, 35, 158), #1e4eebff);
    }
}

.layout-navbar-full.layout-horizontal .layout-navbar {
    box-shadow: none;
}

#password-criteria li {
    list-style: none;
}