.form-floating>.form-control~label {
    transition: transform .2s !important;
}

i.bi {
    line-height: 0.7 !important;
}

.btn {
    height: 40px !important;
}

.card {
    background-color: var(--theme-color) !important;
    border: none !important;
    width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #adb5bd !important;
    margin-top: 15px;
    overflow: hidden;
    transition: height .2s !important;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 15.3px 13.9px rgba(0, 0, 0, 0.072) !important;
}

.card-body {
    overflow-y: auto;
    overflow-x: auto;
    transition: height .2s !important;
}

.form-check.both-sides {
    display: flex;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding-left: 0px !important;

    & > .form-check-input {
        padding: 0 !important;
        margin-top: 0px !important;
        margin-left: 0px;
        width: 60px;
        height: 25px;

        transition: background-position .2s, background-color .2s !important;
    }

    & > label {
        padding: 0 !important;
    }
}

.form-floating>.form-control:disabled~label::after {
    background-color: transparent !important;
}

.form-control, .form-floating>input, .form-floating>select, .form-floating>textarea {
    color: var(--text-color) !important;
    border-radius: 10px;
}

.form-control[type="file"] {
    background-color: transparent !important;
}

.form-floating>.form-control:disabled~label {
    color: rgb(173, 173, 173);
    background-color: transparent !important;
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent !important;
}

.form-floating>input:not(:disabled),.form-floating>input:not(:read-only),
.form-floating>input:not([disabled]),.form-floating>input:not([readonly]),
.form-floating:has(>input:not(:disabled)),.form-floating:has(>input:not(:read-only)),
.form-floating:has(>input:not([disabled])),.form-floating:has(>input:not([readonly])) {
    cursor: text !important;

    &.custom-select {
        cursor: pointer !important; 
    }
}

.form-floating>select:not(:disabled),.form-floating>select:not(:read-only),
.form-floating>select:not([disabled]),.form-floating>select:not([readonly]),
.form-floating:has(>select:not(:disabled)),.form-floating:has(>select:not(:read-only)),
.form-floating:has(>select:not([disabled])),.form-floating:has(>select:not([readonly])) {
    cursor: pointer !important; 
}

.form-floating {
    overflow: hidden !important;
    border-radius: 0px;
    transition: border-color .4s, box-shadow .4s;
    border: none !important;
    position: relative;
    border-radius: 15px !important;
    border: 2px solid var(--border-subtle) !important;
    color: var(--primary);

    &:disabled, &:read-only, &[readonly], &[disabled] {
        cursor: not-allowed !important;
    }

    &:has(i.bi) {
        display: flex;
        align-items: center;

        & > i.bi {
            font-size: 20px;
            color: var(--text-muted);
            padding: 0px 5px 0px 10px;
        }

        /* &:has(.form-control:focus), &:has(.form-control:active) {
            & > i.bi {
                color: inherit !important;
            }
        } */

        /* &:has(.form-control:not(:placeholder-shown)) > i.bi {
            color: inherit !important;
        } */

        & > label {
            padding-left: calc(10px + 10px + 20px);
        }

        & > .form-control:placeholder-shown:read-only ~ label,
        & > .form-control:placeholder-shown:disabled ~ label,
        & > .form-control:placeholder-shown:read-only ~ label::after,
        & > .form-control:placeholder-shown:disabled ~ label::after {
            transform: none !important;
            color: var(--text-muted) !important;
            font-size: 14px !important;
            transform: scale(.80) translateY(-.5rem) translateX(1.1rem) !important;
        }

        & > .form-control:read-only ~ label,
        & > .form-control:disabled ~ label,
        & > .form-control:read-only ~ label::after,
        & > .form-control:disabled ~ label::after {
            transform: scale(.80) translateY(-.5rem) translateX(1.1rem) !important;
        }

        & > .form-control:focus:not(:read-only):not(:disabled) ~ label,
        & > .form-control:not(:placeholder-shown):not(:read-only):not(:disabled) ~ label,
        & > .form-select:not(:read-only):not(:disabled) ~ label {
            transform: scale(.80) translateY(-.5rem) translateX(1.1rem) !important;
        }

        & > .form-control {
            flex-grow: 1;
        }   
    }

    & > label {
        font-weight: bold !important;
        font-size: 14px;
        color: var(--text-muted) !important;
        transition: transform .3s !important;
        /* color: var(--primary) !important; */
        
    }

    & > input {
        height: calc(3.5rem + 3px) !important;
        color: var(--primary) !important;
    }

    &:has(.form-control:focus), &:has(.form-control:active)  {
        border-color: var(--primary) !important;
        box-shadow: 0px 0px 10px 0px var(--badge-bg);
    }

    & > .form-control:focus~label,
    & > input:focus~label, & > select:focus~label, & > textarea:focus~label, 
    & > input:active~label, & > select:active~label, & > textarea:active~label {
        font-size: 12px;
        color: var(--primary) !important;
        opacity: 1 !important;
        text-transform: uppercase;
    }

    & .form-control:not(:placeholder-shown)~label {
        font-size: 14px;
        /* color: #009245 !important; */
        opacity: 1 !important;
        text-transform: uppercase;
    }

    & .form-control:focus, & .form-select~label, & .form-control:not(:placeholder-shown)~label {
        opacity: .90 !important;
    }

    & > a, & > button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary);
        transition: filter .2s;
        text-decoration: none;
        list-style: none;
        width: fit-content;

        & > i {
            color: var(--primary);
        }

        &:hover {
            cursor: pointer;
            filter: brightness(140%);
        }
    }

    & > a.left, & > button.left {
        left: 12px;
        transform: translateY(calc(-50% + 8px));
    }

    & input:disabled:hover, & input[readonly]:hover, & input:read-only:hover,
    & select:disabled:hover, & select[readonly]:hover, & select:read-only:hover {
        cursor: not-allowed;
    }

    & input, & select.form-select {
        background-color: var(--input-bg) !important;
    }

    &:has(a:not(.left)), &:has(button:not(.left)) {
        & > input {
            padding-right: 30px !important;
        }
    }

    &:has(a.left), &:has(button.left) {
        & > input {
            padding-left: 80px !important;
        }
    }
/* 
    &:has(a), &:has(button) {
        & > label {
            opacity: .90 !important;
        }
    } */
}

.form-floating:has(input:focus), .form-floating:has(select:focus) {
    border-color: #e48436;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--primary);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--input-bg);
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

input:-webkit-autofill{
    -webkit-text-fill-color: var(--primary) !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
    background-color: var(--primary) !important;
    text-decoration: none;
}

.modal-footer, .modal-body, .modal-header {
    background-color: var(--card-bg) !important;
}

.form-control {
    background-color: var(--input-bg) !important;
    border: none;
}

.table-responsive.vertical {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.table-responsive.horizontal {
    overflow-y: hidden !important;
    overflow-x: auto !important;
}

.table-responsive.both {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.form-floating>input:disabled, .form-floating>select:disabled, .form-floating>input[readonly], .form-floating>select[readonly], .form-select[readonly], .form-select:disabled,
.form-floating:disabled, .form-floating.disabled {
    /* background-color: #b5ffd8b4 !important; */
    background-color: var(--input-disabled) !important;
    cursor: not-allowed !important;

    & > * {
        cursor: not-allowed !important;
    }
}

.form-control:disabled, .form-control[readonly], .form-floating:has(.form-control:disabled), .form-floating:has(.form-control[readonly]) {
    /* background-color: #b5ffd8b4 !important; */
    background-color: var(--input-disabled) !important;
    cursor: not-allowed !important;

    & > * {
        cursor: not-allowed !important;
    }
}

.form-floating label:disabled::after,
.form-floating label[readonly]::after {
    background-color: transparent !important;
    color: rgb(255, 255, 255);
}

.form-floating>.form-select>option {
    color: var(--primary) !important;
}

.dropdown-item>* {
    pointer-events: none;
}

.card-title {
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    color: rgb(200, 200, 200) !important;
    letter-spacing: 1px;
}

.btn {
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color .2s;
}

.btn>* {
    pointer-events: none;
}

.modal {
    z-index: 1002 !important;
}

.modal-backdrop {
    z-index: 999 !important;
}

.modal-body {
    max-height: 600px !important;
    overflow-y: auto !important;
}

@keyframes modal-open {
    0% {
        transform: translateY(-200%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes modal-close {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(-200%);
        opacity: 0;
    }
}

/* Quando o modal está sendo mostrado */
.modal.show:not(.hiding) .modal-dialog {
    animation: modal-open 0.8s ease-out forwards !important;
}

/* Quando o modal está sendo fechado */
.modal.hiding .modal-dialog {
    animation: modal-close 0.8s ease-in forwards !important;
}

@media screen and (max-width: 768px) {
    @keyframes modal-open {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }
        100% {
            transform: translateY(-50%);
            opacity: 1;
        }
    }
}

.modal-content {
    border: none;
    margin-top: 0%;
    background-color: var(--card-bg) !important;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 15.3px 13.9px rgba(0, 0, 0, 0.072) !important;
}

/* .modal.show>.modal-dialog>.modal-content {
    margin-top: 50% !important;
    z-index: 1000 !important;
} */

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 10px 15px 10px 15px !important;
    font-weight: bold;
    border-radius: 8px !important;
    width: fit-content !important;

    & > * {
        font-weight: bold;
    }

    &.bg-danger {
        background-color: var(--danger-color) !important;
        color: white !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-danger-light {
        background-color: var(--danger-color-light) !important;
        color: var(--danger-color) !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-success {
        background-color: var(--success-color) !important;
        color: white !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-success-light {
        background-color: var(--success-color-light) !important;
        color: var(--success-color) !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-warning {
        background-color: var(--warning-color) !important;
        color: white !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-warning-light {
        background-color: var(--warning-color-light) !important;
        color: var(--warning-color) !important;

        & > * {
            color: inherit !important;
        }
    }

    &.bg-light {
        background-color: var(--card-bg) !important;
        color: var(--text-muted) !important;

        & > * {
            color: inherit !important;
        }
    }
}

.btn {
    transition: transform .2s ease, filter .2s ease !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content !important;
    padding: 15px 25px 15px 25px;

    & > * {
        color: var(--bs-btn-color) !important;
        pointer-events: none;
    }

    &.p-equal {
        padding: 15px 15px 15px 15px;
    }

    &:hover {
        cursor: pointer;
        background-color: var(--bs-btn-hover-bg) !important;
        color: var(--bs-btn-hover-color) !important;
        border-color: var(--bs-btn-hover-border-color) !important;
        transform: translateY(-2px);

        & > * {
            color: var(--bs-btn-hover-color) !important;
        }
    }

    &:focus {
        box-shadow: none !important;
    }

    &:active {
        background-color: var(--bs-btn-active-bg) !important;
        border-color: var(--bs-btn-active-border-color) !important;
        transform: scale(.95);
    }

    &.round {
        padding: 0px !important;
        border-radius: 50%;
        width: 40px !important;
        height: 40px !important;
    }

    &.btn-large {
        padding: 30px 50px 30px 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.btn-theme-dark {
        --bs-btn-bg: var(--primary) !important;
        --bs-btn-hover-bg: var(--primary-hover) !important;
        --bs-btn-hover-color: var(--btn-hover-color) !important;
        --bs-btn-color: black !important;
        --bs-btn-border-color: var(--primary) !important;
        --bs-btn-hover-border-color: var(--primary-hover) !important;
        --bs-btn-active-bg: var(--primary-dark, #35ac6c) !important;
    }

    &.btn-outline-theme-dark {
        --bs-btn-bg: transparent !important;
        --bs-btn-hover-bg: var(--primary) !important;
        --bs-btn-hover-color: var(--btn-hover-color) !important;
        --bs-btn-color: var(--primary) !important;
        --bs-btn-border-color: var(--primary) !important;
        --bs-btn-hover-border-color: var(--primary) !important;
        --bs-btn-active-bg: var(--primary-dark, #35ac6c) !important;
    }

    &.btn-theme {
        --bs-btn-bg: #3cff98 !important;
        --bs-btn-hover-bg: #2acf77 !important;
        --bs-btn-hover-color: #000  !important;
        --bs-btn-color: #000 !important;
        --bs-btn-border-color: #3cff98 !important;
        --bs-btn-hover-border-color: #2acf77 !important;
        --bs-btn-active-bg: #099e4f !important;
    }

    &.btn-outline-theme {
        --bs-btn-bg: transparent !important;
        --bs-btn-hover-bg: #3cff98 !important;
        --bs-btn-hover-color: #000 !important;
        --bs-btn-color: #3cff98 !important;
        --bs-btn-border-color: #3cff98 !important;
        --bs-btn-hover-border-color: #2acf77 !important;
        --bs-btn-active-bg: #099e4f !important;
    }

    &.btn-white {
        --bs-btn-bg: #fff !important;
        --bs-btn-hover-bg: #f8f9fa !important;
        --bs-btn-border-color: #eee !important;
        --bs-btn-hover-border-color: #eee !important;
        --bs-btn-active-bg: #f8f9fa !important;
        --bs-btn-color: #555 !important;
        --bs-btn-active-border-color: #eee !important;
    }

    &.btn-primary {
        --bs-btn-active-bg: #003e9b !important;
        --bs-btn-hover-color: #3385ff !important;
    }

    &.btn-secondary {
        --bs-btn-active-bg: #383d41 !important;
        --bs-btn-hover-bg: #8a939b !important;
    }

    &.btn-success {
        --bs-btn-active-bg: #0f5a37 !important;
        --bs-btn-hover-bg: #31a06c !important;
    }

    &.btn-danger {
        --bs-btn-active-bg: #af2432 !important;
        --bs-btn-hover-bg: #f55262 !important;
    }

    &.btn-warning {
        --bs-btn-active-bg: #ca9903 !important;
        --bs-btn-hover-bg: #ffd453 !important;
    }

    &.btn-info {
        --bs-btn-active-bg: #0b98b4 !important;
        --bs-btn-hover-bg: #4ed3ee !important;
    }
    
    &.btn-light {
        --bs-btn-bg: #ececec !important;
        --bs-btn-active-bg: #b1b1b1 !important;
        --bs-btn-hover-bg: #e6e6e6 !important;
    }

    &.btn-outline-primary {
        border-color: #0d6efd !important;
    }

    &.btn-outline-secondary {
        border-color: #6c757d !important;
    }

    &.btn-outline-success {
        border-color: #198754 !important;
    }

    &.btn-outline-danger {
        border-color: #dc3545 !important;
    }

    &.btn-outline-warning {
        border-color: #ffc107 !important;
    }

    &.btn-outline-info {
        border-color: #0dcaf0 !important;
    }
    
    &.btn-outline-light {
        border-color: #f8f9fa !important;
    }

    /* &.btn-theme {
        background-color: #7AC943; 
        border-color: transparent; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        width: fit-content;
        transition: background-color .2s;
        color: white;

        &:focus {
            box-shadow: none !important;
        }

        &.btn-large {
            padding: 30px 50px 30px 50px;
            font-size: 18px;
        }

        &:hover {
            background-color: #539127;
            cursor: pointer;
            border-color: transparent;
        }
    }

    &.btn-outline-theme {
        background-color: transparent; 
        border-color: #7AC943; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        width: fit-content;
        transition: background-color .2s;
        color: #7AC943;

        &:focus {
            box-shadow: none !important;
        }

        &.btn-large {
            padding: 30px 50px 30px 50px;
            font-size: 18px;
        }

        &:hover {
            background-color: #42791b;
            cursor: pointer;
            border-color: transparent;
        }
    } */
}

[data-bs-theme=dark] .btn-close {
    filter: none !important;
    opacity: 1 !important;
    color: black !important;

    &:hover {
        color: red !important;
    }
}

.modal-header {
    border: none !important;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 10px;
    justify-content: center;
    background-color: var(--card-bg) !important;

    --title-color: var(--text-heading);

    & > .modal-title, & > .btn-close {
        color: var(--title-color) !important;
    }
}

.modal-body {
    background-color: var(--card-bg) !important;
    border: none !important;
}

.modal-footer {
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    background-color: var(--card-bg) !important;
}

.modal-title {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-color);
}

@media screen and (max-width: 468px) {
    div:where(.swal2-container) div:where(.swal2-popup) {
        width: 90% !important;
    }
}

.tooltip-box {
    width: fit-content !important;
    max-width: 450px !important;
    text-align: left !important;
    margin-left: 10px !important;
}

.tooltip-box>.tooltip-inner {
    width: fit-content !important;
    max-width: 450px !important;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 15px 15px 15px 15px;
    background: #1ed4735e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.05);
    backdrop-filter: blur(15px) !important;
    color: #000000 !important;
    border-radius: 10px;
}

/* .tooltip-box>.tooltip-arrow::after {
    border-right-color: #ffa257 !important;
} */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.form-switch>.form-check-input {
    transition: background-position .2s, background-color .2s !important;
    background-color: #61c991 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch>.form-check-input:checked {
    background-color: #009245 !important;
}

.nav-tabs {
    border-bottom: 1px solid #212141;
}

.nav-item2 {
    padding: 0px 10px 10px 10px !important;
    margin: none !important;
}

.nav-link2 {
    font-size: 16px !important;
    color: white !important;
    pointer-events: all !important;
    padding: 10px 20px 10px 20px;
    transition: background-color .2s;
    border-radius: 10px !important;
    border: none !important;
    margin: none !important;
}

.nav-link2.active {
    color: #6b6bbe !important;
    border-radius: 10px !important;
    background-color: #212141 !important;   
}

.nav-link2:hover {
    color: #6b6bbe !important;
    border-radius: 10px !important;
    background-color: #212141 !important;
}

.nav-item2:hover {
    background-color: transparent !important;
}

.tab-pane {
    padding: 20px 15px 15px 15px;
    border-top: none;
}

.btn.btn-outline-themecolor {
    border: 1px solid #ffa257;
    border-radius: 5px !important;
    background-color: transparent !important;
    color: #616161 !important;

    &:hover{
        cursor: pointer;
        background-color: #ffa257 !important;
        color: #616161 !important;
    }
}

select.form-select, select.form-select {
    border: none !important;
}

.form-check.form-switch>.form-check-input {
    margin-top: 5px;
}

.btn {
    resize: none !important;
    flex: 0 0 auto !important;
}

.dropdown-menu {
    overflow: auto !important;
}

.modal-backdrop.fade.show {
    background-color: rgb(0, 0, 0, .3) !important;
}

/* select.form-select { 
    
    &, &::picker(select) {
        appearance: base-select;
    }

    font-size: var(--font-size-1);
    
    background: none;
    padding: 0;
    
    &::picker(select) {
        transition: 
        opacity .2s ease,
        transform .2s var(--ease-out-3), 
        display .2s allow-discrete, 
        overlay .2s allow-discrete
        ;
    }
    
    &::picker-icon {
        display: none;
    }
    
    &:not(:open)::picker(select) {
        opacity: 0;
        transform: scale(.95);
    }
    
    &:open::picker(select) {
        opacity: 1;
        transform: scale(1);
    }
    
    &:open > button svg {
        transform: rotate(.5turn);
    }
    
    &::picker(select) {
        background: light-dark(white, var(--surface-2));
        border-radius: var(--radius-2);
        padding: 0;
        margin-block: 5px;
        box-shadow: var(--shadow-5);
        
        @media (forced-colors: none) {
            border: none;
        }
    }
    
    > div {
        min-inline-size: calc(anchor-size(self-inline) + 20px);
        scroll-behavior: smooth;
        
        &.scrollable {
            max-block-size: 20lh;
            scrollbar-width: thin;
        }

        & hr {
            margin-block: var(--size-2);
        }

        & label {
            display: block;
            position: sticky;
            top: 0;
            z-index: 1;
            background: var(--surface-3);
            font-size: var(--font-size-0);
            color: var(--text-2);
            font-weight: var(--font-weight-7);
            padding-block: var(--size-1);
            padding-inline: var(--size-3);
        }

        & option {
            display: flex;
            align-items: center;
            gap: var(--size-3);
            padding-block: var(--size-2);
            padding-inline: var(--size-3);
            font-size: var(--font-size-1);

            cursor: pointer;
            outline-offset: -1px;
            
            &::checkmark {
                font-weight: var(--font-weight-8);
            }

            &:focus-visible {
                outline-offset: -1px;
            }

            &:is(:focus, :hover) {
                background: oklch(from var(--link) l c h / 25%);
                color: inherit;
            }

            &:is(:checked) {
                background: var(--link);
                color: var(--surface-1);
                font-weight: var(--font-weight-8);
            }
        }
    }
}

.custom-option {
    display: flex;
    gap: var(--size-3);
    align-items: center;
    justify-content: space-between;

    .primary & {
        display: grid;
        gap: var(--size-1);
    }

    &:has(.description) {
        display: grid;
        justify-items: start;
        gap: var(--size-2);
        padding-block: var(--size-2);
        text-shadow: none;

        & .description {
        color: var(--text-2);
        }
    }

    option:is(:checked) & .description {
        font-weight: normal;
        color: var(--surface-2);
    }

    selectedcontent & .description {
        display: none;
    }
} */