:root{

    /* rgba(190, 145, 50, 1) */
    /* rgba(241,244,249,255) */
    /* rgba(245,248,255,255) */
    /* rgba(30,41,27,255) */
    /* #0f172a */

    --topbar-bg-color: rgba(241,244,249,255);
    --topbar-text-color: rgba(30,41,27,255);
    --topbar-text-color-hover: rgba(30,41,27,255);
    --topbar-text-color-active: rgba(30,41,27,255);
    --topbar-text-color-active-hover: rgba(30,41,27,255);

    --sidebar-bg-color: rgb(48 31 2);
    --sidebar-text-color: rgba(245,248,255,255);
    --sidebar-text-color-hover: rgba(245,248,255,255);
    --sidebar-text-color-active: rgba(245,248,255,255);
    --sidebar-text-color-active-hover: rgba(245,248,255,255);


    --btn-soft-green: #be9132 ;
    --btn-soft-green-hover: #4aae47;
    --btn-soft-green-light: #e6f4e6;

    --btn-green: rgba(190, 145, 50, 1);
    --btn-green-hover: rgba(190, 145, 50, 1);
    --btn-green-light: rgba(245,248,255,255);

    --btn-dark: #0f172a;
    --btn-dark-hover: #0f172a;
    --btn-dark-light: #0f172a;

    --vz-blue:#5892f6;
    --vz--red:#d34034;




    --green-color: #be9132 ;
    --dark-green: rgba(190, 145, 50, 1);
    --dark-color: #0f172a;


    --border-radius: 10px;

}

.card{
    padding: 15px !important;
}

.card,
.main-card{
    border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    opacity: 1;
    overflow: hidden;
}

.main-card{
    padding: 15px !important;
}

/**
* Colors
*/

.input-bg-color{
    background-color: var(--topbar-bg-color)!important;
    /* cursor: pointer !important; */
    border: 1px solid #ccc !important;
}
.text-dark-green{
    color: var(--dark-green);
}

.text-green{
    color: var(--green-color);
}

.text-dark{
    color: var(--dark-color);
}


.bg-dark-green{
    background-color: var(--dark-green);
}
.text-dark-green{
    color: var(--dark-green);
}
.text-blue{
    color: var(--vz-blue);
}
.text-red{
    color: var(--vz-red);
}



.nav-tabs-custom .nav-link {
    color: var(--dark-color)!important;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--dark-green)!important;
}

.nav-tabs-custom .nav-item .nav-link:after {
    background-color: var(--dark-green)!important;
}





.bg-green{
    background-color: var(--green-color);
}

.bg-dark{
    background-color: var(--dark-color);
}

.btn-soft:hover{
    background-color: var(--btn-green-hover);


}
.bg-white{
    background-color: var(--topbar-bg-color);
}

.topbar-bg-color{
    background-color: var(--topbar-bg-color)!important;
}



/**
* Topbar
*/

/**
* Sidebar
*/
/* .navbar-menu{
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
}

.navbar-menu .nav-link.menu-link{
    color: var(--sidebar-text-color);
}

.navbar-menu .nav-link.menu-link:hover{
    background-color: var(--dark-green);
    color: var(--sidebar-text-color);

} */

.flatpickr-months {
    display: flex!important;
    background-color: var(--dark-green)!important;
    border-radius: 5px 5px 0 0!important;
}
.flatpickr-weekdays{
    background-color: var(--dark-green)!important;

}.flatpickr-day.selected{
    background-color: var(--dark-green)!important;
    border: 1px solid var(--dark-green)!important;
}

.flatpickr-current-month .arrowUp,
.flatpickr-current-month .arrowDown {
    background-color: white!important;
    color: white!important;
}
    .btn-action {
        color: #212020;
        background-color: var(--topbar-bg-color);
        border-color: var(--topbar-bg-color);
        padding: 6px 8px 6px;
        font-size: 14px;
    }

    .btn-group {

    padding: 0px 7px 0px!important;
    height: 33px!important;
    }
    .btn-action:hover
    {
        color:#fff;
        background-color:var(--dark-green);
        border-color: var(--dark-green);


    }
    .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: var(--dark-green);
        border-color: var(--dark-green);
    }

    .select2-container .select2-selection--single {

        background-color: var(--topbar-bg-color)!important;
        border: 1px solid #ccc !important;

    }
    .select2 option:hover{
        background-color: var(--dark-green)!important;
        color: var(--sidebar-text-color)!important;
    }

    .form-check-input:checked {
        background-color: var(--dark-green)!important;
        border-color: var(--dark-green)!important;
    }


    .select2-container--default .select2-results__option:hover {
        background-color: var(--dark-green)!important;
        color: var(--sidebar-text-color)!important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {

        background-color: var(--dark-green)!important;
        color: var(--sidebar-text-color)!important;
    }

    .select2-dropdown{
        border: 1px solid #ccc !important;
    }

/**
* Buttons
*/


.dataTables_empty{
    padding: 10px !important;
}



.card-subscription{
    background-color: #ffffff;
    border: 1px solid var(--dark-color);
    padding:0;
    margin-bottom: 10px!important;
    border-radius: 5px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.card-subscription:hover{
    border-color: var(--green-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.card-subscription.active{
    border-color: var(--green-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.card-subscription .card-body{
    padding: 30px;
}


.modal-dialog.modal-md-2xl{
    max-width: 800px!important;
}

.btn-renew{
    background-color: var(--green-color);
    color: var(--btn-green-light);
    border: none!important;
    padding: 12px 24px!important;
    font-size: 13px!important;
    border-radius: 5px!important;
    display: block;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.btn-renew:hover,
.btn-renew:focus,
.btn-renew:active{
    background-color: var(--green-color);
    outline: none!important;
}

.btn-with-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    width: fit-content;
}

.btn-soft-action {
    color: #000000;
    background-color: var(--topbar-bg-color);
    border: 0;
}

.btn-soft-action:active,.btn-soft-action:focus,.btn-soft-action:hover {
    color: #fff;
    background-color: var(--btn-green)
}

/* Define the CSS animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Apply the animation to the element with class 'icon-spin' */
.icon-spin {
    display: inline-block;
    animation: spin 1s infinite linear; /* You can adjust the duration and animation-timing-function as needed */
}