/* Others */
h1:focus {
    outline: none;
}

#blazor-error-ui {
    display: none;
    position: absolute;
    top: 1em;
    z-index: 1;
    left: 40%;
}


body {
    overflow-x: hidden
}

/* FONT */
* {
    font-family: "Manrope", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* CODE CUSTOM */
#dropdown-nav-user {
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dropdown-nav-user > button {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dropdown-nav-user > button > span {
    width: 100%;
    aspect-ratio: 1 / 1;
}

main.dark #dropdown-nav-user > button > span {
    border-radius: 100%;
    background: white;
}

.b-bar-dropdown-menu {
    border-radius: 3px;
    overflow: hidden;
}

.b-bar-dropdown-item {
    /*background: white;*/
}

.b-bar-dropdown-item:hover {
    background: white;
    color: #263238;
    cursor: pointer;
}

main.dark .b-bar-dropdown-item {
    background: rgb(55, 65, 81);
    color: white;
    cursor: pointer;
}

main.dark .b-bar-dropdown-item:hover {
    background: rgb(71, 85, 105);
}

.bar-dropdown-menu-toggle {
    padding: 0.375rem !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-dropdown-menu-toggle i {
    font-size: 20px;
    padding: 0 4px 0 4px;
}

.bar-dropdown-menu-toggle img {
    width: 24px;
}

main.dark .bar-dropdown-menu-toggle {
    background: rgba(1,1,1,0.5);
}

.bar-dropdown-menu-toggle:hover {
    background: rgb(241, 245, 249) !important;
}

main.dark .bar-dropdown-menu-toggle:hover {
    background: rgb(71, 85, 105) !important;
}

.bar-dropdown-item {
    cursor: pointer;
}

@media (width <= 48rem) {
    .bar-dropdown-menu-toggle img {
        height: 1.5rem;
    }
    .bar-dropdown-menu-toggle > button {
        width: 2rem;
    }
}

.pagination {
    margin-top : 1rem;
}

.pagination-item .pagination-link > i {
    color: #2ab3bd !important;
}

main.dark .pagination-item .text-primary-600 {
    border-color: rgb(55,65,81);
}

@keyframes new-fade {
    0% {
        background: none;
    }
    20% {
        background: #c5eff2;
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: new-fade 1s ease-in 1;
}

@keyframes focus-fade {
    0% {
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0);
    }
    20% {
        box-shadow: 0 0 0 4px rgb(197, 239, 242);
    }
}

.focus-form {
    animation: focus-fade 1s ease-in-out 3;
}

@keyframes err-fade {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.error-anim {
    animation: err-fade 250ms ease-in-out 1;
}

@keyframes dropdown-fade {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dropdown-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.b-dropdown-menu {
    border-radius: 3px;
    overflow: hidden;
}

main.dark .b-dropdown-menu {
    color: white;
}

.b-dropdown-menu-show {
    animation: dropdown-fade 150ms ease-in-out 1;
}

.b-bar-dropdown-menu-show {
    animation: dropdown-fade 150ms ease-in-out 1;
}

.b-toast {
    border-color: rgb(203, 213, 225);
    border-width: 1px;
}

main.dark .b-toast {
    border-color: rgb(156, 163, 175);
    border-width: 1px;
}

.filter-status {
    background: rgb(203, 213, 225);
}

main.dark .filter-status {
    background: rgb(55, 65, 81);
}

main.dark .b-is-autocomplete input {
    color: white !important;
}