:root {
    --shadow-dark: rgb(46 42 37 / 0.8);
    --shadow: rgb(0 0 0 / 0.4);
    --shadow-light: rgb(0 0 0 / 0.25);
    --sapore-red: rgb(172 14 20);
    --sapore-red-08: rgb(172 14 20 / 0.8);
    --sapore-red-02: rgb(172 14 20 / 0.2);
}

* {
    font-size: small;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Aileron';
}

@font-face {
    font-family: 'Aileron';
    font-style: normal;
    src: local('Aileron'), url('/static/fonts/Aileron-Regular.otf') format('opentype');
}

body {
    overflow-y: hidden; 
    overflow-x: hidden;
}

main {
    flex-wrap: nowrap;
    min-height: -webkit-fill-available;
    flex-wrap: nowrap;
}

#loadingDiv {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: var(--shadow-dark);
    z-index: 99999 !important;
}

.bg-login {
    background-image: url('/static/images/bg_sapore.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}

#sapore_red_logo {
    height: 2.5rem;
}

#logo {
    height: 2rem;
    content: url('/static/images/logo_sapore.png');
}

.center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.bi {
    vertical-align: -.125em;
    pointer-events: none;
    fill: currentColor;
}

.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
    border-radius: 0;
}

.scrollarea {
    overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

.bg-primary-dark{
    background-blend-mode: darken;
    background-color: var(--shadow-light);
}

.no-bg{
    background-color: rgb(0 0 0 / 0);
    border-color: rgb(0 0 0 / 0);
}

.invisible {
    display: none;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.close-message{
    color: var(--bs-alert-color);
}

/* Alterar visibilidade por Tema */

html[data-theme="auto"] .theme-dark, 
html[data-theme="auto"] .theme-light{
    display: none;
    display: none;
}

html[data-theme="dark"] .theme-auto, 
html[data-theme="dark"] .theme-light{
    display: none;
    display: none;
}

html[data-theme="light"] .theme-dark, 
html[data-theme="light"] .theme-auto{
    display: none;
    display: none;
}

/* Congelar coluna de ações */

.tabela-acoes th:last-child,
.tabela-acoes td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
}

/* Tabela Responsiva */

.table-responsive td div {
    text-wrap: nowrap;
}

/* Mensagens */

.absolute-message{
    max-width: 15rem; 
    width: 15rem; 
    word-wrap: break-word; 
    left: -31rem; 
    top: 0rem;
    pointer-events: all;
    animation: ease-out .8s;
}

.hide-message{
    max-width: 15rem; 
    width: 15rem; 
    word-wrap: break-word; 
    left: -31rem; 
    top: -20rem;
    pointer-events: none;
    animation: ease-out .8s;
}

/* Sidebar */
/* https://getbootstrap.com/docs/5.0/examples/sidebars/ */
#navbar {
    overflow-y: hidden;
}

.right-bar {
    background-color: white;
    height: 100vh;
}

.content {
    flex-shrink: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(0 0 0 / .1);
    border: solid rgb(0 0 0 / .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgb(0 0 0 / .1), inset 0 .125em .5em rgb(0 0 0 / .15);
    overflow-y: auto;
}

@keyframes showNavbar {
    0%   {width:3rem;}
    30%   {width:3rem;}
    40%  {width:6rem;}
    50%  {width:12rem;}
    75%  {width:18rem;}
    100% {width:auto;}
}

@keyframes iconNavbar {
    0%   {content: url('/static/images/logo_s.png');}
    30%   {content: url('/static/images/logo_s.png');}
    60%   {content: url('/static/images/logo_sapore.png');}
}

@media screen and (min-width:300px) {
    *{
        font-size: small;
    }

    .hidden-mobile{
        visibility: hidden;
    }

    .absolute-message{
        max-width: 15rem; 
        width: 15rem;
        word-wrap: break-word; 
        left: -31rem; 
        top: 0rem;
        pointer-events: all;
        animation-name: showMessage;
        animation-duration: .8s;
    }
}

@media screen and (max-width:640px) {
    .selector {
        flex-flow: column;
    }

    .selector ul.selector-chooser {
        transform: rotate(90deg) !important;
    }
}

@media screen and (min-width:480px) {
    *{
        font-size: medium;
    }
}

@media screen and (min-width:992px) {
    main{
        display: flex;
    }

    *{
        font-size: medium;
    }

    .absolute-message{
        max-width: 30rem; 
        width: 30rem;
        word-wrap: break-word; 
        left: -31rem; 
        top: 0rem;
        pointer-events: all;
        animation-name: showMessage;
        animation-duration: .8s;
    }

    .hidden-mobile{
        visibility: visible;
    }

    .navbar-sapore .container-fluid, .navbar-expand-lg .navbar-collapse, .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-sapore, .navbar-sapore .container-fluid {
        height: 100vh;
        align-items: flex-start;
    }

    .navbar-sapore, #navbarCollapse{
        width: 3rem;
        overflow-x: hidden;
    }
    
    .navbar-sapore:hover, .navbar-sapore:hover #navbarCollapse, .navbar-sapore:hover #userLabel, .navbar-sapore:hover #navbarList{
        visibility: visible;
        width: auto;
        animation-name: showNavbar;
        position: relative;
        animation-duration: .4s;
    }

    .navbar-brand{
        margin-left: .5rem;
    }

    #logo {
        height: 2rem;
        content: url('/static/images/logo_s.png');
    }

    #userLabel, #navbarList{
        visibility: hidden;
    }

    .navbar-sapore:hover #logo {
        height: 2rem;
        content: url('/static/images/logo_sapore.png');
        animation-name: iconNavbar;
        animation-duration: .4s;
    }
}