:root {
    --base-body-font-family: 'InterVariable',system-ui,sans-serif;
}

@supports (font-variation-settings: normal) {
    :root {
        --base-body-font-family: 'InterVariable',system-ui,sans-serif;
    }
}

body {
    font-family: var(--base-body-font-family);
}

/* .portable {
    overflow: auto;
    height: 100px;
}
.portable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
} */

* {
    scrollbar-color: rgb(131, 129, 149, 0.6) transparent;
    scrollbar-width: auto;
}

label {
    font-size: 14px;
}

.pt-sm-80 {
    margin-top: 0;
}

.rounded {
    border-radius: 0.5rem !important;
}

.form-control-sm {
    border-radius: 0.5rem !important;
}

.form-select-sm {
    border-radius: 0.5rem !important;
}

.input-group .form-control-sm {
    border-radius: 0.5rem 0 0 0.5rem !important;
}

.input-group-text {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

.select2-selection {
    border-radius: 0.5rem !important;
}

.select2-search__field {
    height: 31px !important;
    border-radius: 0.5rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: 0.5rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search {
    padding: 0.75rem 0.75rem !important;
}

.btn-sm {
    border-radius: 0.5rem !important;
}

.nav-link {
    border-radius: 0.5rem !important;
    font-size: 14px !important;
}

.nav-link-active-bg {
    background-color: #408dfb !important;
    color: #fff !important;
}

.accordion-button {
    border-radius: 0.5rem !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

.accordion-button::after {
    background-size: 15px !important;
    width: 16px !important;
    height: 16px !important;
}

.accordion-button:not(.collapsed) {
    
}

/* Ensure the second <a> tag is hidden by default */
li .nav-link + a {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: absolute; /* Ensure it's positioned relative to the list item */
    padding: 12px 0;
    right: 9px;
    top: 0;
    bottom: 0;
    z-index: 10; /* Place it above the first <a> */
}

/* Show the second <a> tag when the first <a> or second <a> is hovered */
li:hover .nav-link + a {
    opacity: 1;
    visibility: visible;
}

li .nav-link.active + a {
    opacity: 1;
    visibility: visible;
}

/* Ensure the second <a> tag stays visible on hover */
li .nav-link + a:hover {
    opacity: 1;
    visibility: visible;
}

li .nav-link + a > div {
    color: white !important;
}

li .nav-link.active + a > div {
    background-color: white !important;
    color: #408dfb !important;
}

#portable_filter > label > input[type=search], #budget_table_filter > label > input[type=search], #transaction_table_filter > label > input[type=search], #account_control_filter > label > input[type=search] {
    border-radius: 0.5rem !important;
}

#portable_length > label > select, #budget_table_length > label > select, #transaction_table_length > label > select, #account_control_length > label > select {
    border-radius: 0.5rem !important;
}

#portable_paginate > span > a.paginate_button, #budget_table_paginate > span > a.paginate_button, #transaction_table_paginate > span > a.paginate_button, #account_control_paginate > span > a.paginate_button {
    border-radius: 0.5rem !important;
}

#portable_paginate > .paginate_button, #budget_table_paginate > .paginate_button, #transaction_table_paginate > .paginate_button, #account_control_paginate > .paginate_button {
    border-radius: 0.5rem !important;
}

.card {
    border-radius: 0.5rem !important;
}

.toast {
    border-radius: 0.5rem !important;
}

.modal-dialog {
    border-radius: 0.5rem !important;
}

.modal-header {
    padding: 12px 16px !important;
}

.alert {
    padding: 8px 16px !important;
    border-radius: 0.5rem !important;
}

.alert-dismissible .btn-close {
    padding: 12px 16px !important;
}

.custom-bg-primary {
    background-color: #408dfb !important;
}

.btn-bg-primary {
    background-color: #408dfb !important;
    border-color: #408dfb !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
}

.bg-color-blue-gradient {
    background: linear-gradient(45deg, #4099ff, #73b4ff) !important;
}

.bg-color-green-gradient {
    background: linear-gradient(45deg, #28bea0, #51dbc0) !important;
}

.bg-color-yellow-gradient {
    background: linear-gradient(45deg, #ffb041, #ffc470) !important;
}

.bg-color-pink-gradient {
    background: linear-gradient(45deg, #FF5370, #ff8095) !important;
}

.bg-color-purple-gradient {
    background: linear-gradient(45deg, #845ef7, #b47cff) !important;
}

.bg-color-orange-gradient {
    background: linear-gradient(45deg, #FFB64D, #ffcb80) !important;
}

.bg-color-red-gradient {
    background: linear-gradient(45deg, #fc2549, #fc5c77) !important;
}



.bg-color-blue {
    background-color: #c2e2ff !important;
}

.bg-color-blue > div {
    color: #4099ff !important;
}

.bg-color-green {
    background-color: #c2f7e8 !important;
}

.bg-color-green > div {
    color: #28bea0 !important;
}

.bg-color-yellow {
    background-color: #fff3c0 !important;
}

.bg-color-yellow > div {
    color: #ffb041 !important;
}

.bg-color-pink {
    background-color: #ffd6e5 !important;
}

.bg-color-pink > div {
    color: #db2777 !important;
}

.bg-color-purple {
    background-color: #f0e6ff !important;
}

.bg-color-purple > div {
    color: #845ef7 !important;
}

.bg-color-orange {
    background-color: #fff0c2 !important;
}

.bg-color-orange > div {
    color: #FFB64D !important;
}

.bg-color-red {
    background-color: #ffd6e5 !important;
}

.bg-color-red > div {
    color: #fc2549 !important;
}

@media screen and (min-width: 576px) {
    .pt-sm-80 {
        margin-top: 80px;
    }
}

#contact_form_action_container {
position: fixed;
bottom: 0;
left: 200px;
width: 100%;
max-width: calc(100vw - 200px);
z-index: 10;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
}

@media only screen and (max-width: 992px) {
    #contact_form_action_container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        min-width: 100%;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
    }
}