:root {
    &[data-bs-theme="dark"] {
        --text-nav: white;
        --icon-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-sun-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
        --theme-filter: invert(1) hue-rotate(180deg);
        --main-container-background: linear-gradient(to bottom, #323232 0%, #202020 40%, #1C1C1C 150%), linear-gradient(to top, rgb(255 255 255 / 21%) 0%, rgb(0 0 0 / 62%) 200%);
        --main-container-blend-mode: multiply;
        --selected-row-bg: #0D6EFD;
        --nav-bg: #212529;
        --nav-item-hover-bg: rgba(255, 255, 255, 0.1);
    }

    &[data-bs-theme="light"] {
        --text-nav: #333;
        --icon-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-moon-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3C/svg%3E");
        --theme-filter: invert(0) hue-rotate(0deg);
        --main-container-background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
        --main-container-blend-mode: normal;
        --selected-row-bg: #0D6EFD;
        --nav-bg: #FFFFFF;
        --nav-item-hover-bg: rgba(0, 0, 0, 0.15);
    }
    &[data-navcollapsed="false"] {
        --tooltip-nav-display: none;
    }
    
}

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

.nav-backdrop {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    height: 100dvh;
    width: 100dvw;
    position: absolute;
    z-index: 2;
}

@media (max-width: 768px) {

    .btn-toggle-nav,
    .hide-nav-button {
        display: inline-flex !important;
    }

    .nav-container {
        display: none !important;
        z-index: 9999;
        position: absolute;
        width: 0;
        transition: all 0.3s ease-in-out;

        &.nav-open {
            display: flex !important;
            width: auto !important;
        }

        &>.talks-navbar>.text-nav {
            margin-bottom: 0 !important;

            &>.collapse-nav-button {
                display: none !important;
            }
        }
    }

    .row:has(>.page-title) {
        position: sticky;
        border-radius: 0 0 10px 10px;
    }

    .nav-backdrop:has(+.nav-open) {
        display: flex;
    }
}

.btn-toggle-nav,
.hide-nav-button {
    display: none;
}

.row:has(>.page-title) {
    border-radius: 0 0 10px 10px;
}

td,
th {
    vertical-align: middle !important;
}

.main-container {
    height: 100dvh;
    overflow-y: auto;
    background: var(--main-container-background);
    background-blend-mode: var(--main-container-blend-mode);
}

.page-title {
}

.nav-title,
.text-nav {
    white-space: nowrap;
}

.talks-navbar {
    height: 100%;
    width: 300px;
    transition: all 0.3s ease-in-out;
    background-color: var(--nav-bg) !important;

    &>*{
        transition: all 0.3s ease-in-out;
    }
    &>.text-nav {
        gap: 5px;
    }


}

@media (min-width: 768px) {
    .talks-navbar {
        &[data-collapsed="true"] {
            width: 80px;

            &>.text-nav {
                flex-direction: column;
                gap: 10px;

                &>img {
                    margin-right: 0 !important;
                }

                &>a>.nav-title {
                    display: none;
                }

                &>.collapse-nav-button>.collapse-nav-icon {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.796V3.204L11.481 8zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753'/%3E%3C/svg%3E");
                }
            }

            &>.nav>.nav-item>.text-nav {

                &>i {
                    margin-right: 0 !important;
                }

                &>.nav-item-name {
                    display: none;
                }
            }

            &>.dropdown {
                justify-content: center;

                &>.user-dropdown {
                    &>i {
                        margin-right: 0 !important;
                    }

                    &>.user-name {
                        display: none;
                    }
                }
            }
        }
    }
}

.collapse-nav-button {
    display: flex !important;
    padding: 5px !important;
}

.collapse-nav-icon {
    --size: 18px;
    height: var(--size);
    width: var(--size);

    background-size: var(--size) var(--size) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    display: inline-block !important;
    filter: var(--theme-filter);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-left' viewBox='0 0 16 16'%3E%3Cpath d='M10 12.796V3.204L4.519 8zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753'/%3E%3C/svg%3E");
}

input {
    &[type="password"]+.btn-show {
        &>.bi.bi-eye-slash {
            display: none;
        }
    }

    &[type="text"]+.btn-show {
        &>.bi.bi-eye {
            display: none;
        }
    }
}


.text-nav {
    color: var(--text-nav) !important;

    &.active {
        color: #fff !important;
    }
}

.icon-theme {
    background-image: var(--icon-theme) !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: var(--theme-filter);
    transition: filter 0.3s ease-in-out !important;

    display: inline-block !important;
    height: 16px !important;
    width: 16px !important;
}

.selected-row {
    &>* {
        background-color: var(--selected-row-bg) !important;
        color: white !important;
    }
}

.btn-icon {
    cursor: pointer;

    &:hover {
        filter: brightness(0.85);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.nav-item{
    border-radius: var(--bs-nav-pills-border-radius);
    &:hover {
        background-color: var(--nav-item-hover-bg) !important;
    }
}

.dropdown-toggle.show::after {
    transform: rotate(180deg);
}
.table-responsive {
    overflow-y: hidden;
}
table.loading {
    position: relative;
    margin-bottom: 20px;
    &::after {
        content: "carregando...";
        display: flex;
        justify-content: center;
        text-align: center;
        position: absolute;
        transform: translate(50%, 0px);
        right: 50%;
    }
}

.tooltip-nav {
    display: var(--tooltip-nav-display) !important;
}