:root{
    --primary-blue: #5bb4ff;
    --primary-blue-shadow: #5bb4ff80;
    --background-login: oklch(1 0 0);
    --background-feed: #F4F2EE;
    --background-search: oklch(1 0 0);
    --post-boxshadow-color: #cecece90;
    --background-light: oklch(1 0 0);
    --color-menu: #fff;
    --color-text-post: oklch(0 0 0);
    --container-screen: var(--background-feed);
    --color-input: oklch(0 0 0) !important;
    --background-item: #F5F5F5;
    --background-livro: #F5F5F5;
    --small-menu-top: #fff;
    --background-input-search: #5bb4ff;
    --background-input: #F7F8F9!important;
    --background-input-login: #F7F8F9 !important;
    --textarea-color-text: oklch(0 0 0)c4;
    --textarea-background-color: #fff;
    --textarea-borer-color: #dee2e6;

    --input-border-color: #dee2e6;

    --modal-background-color: #fff;
    --shadow-see-more-color: rgb(255 255 255 / 85%);
    --see-more-color: rgb(255 255 255);

    --screen-background-color: #fff;

    --svg-icons-color: oklch(0 0 0);

    --menu-icons-color: rgba(255, 255, 255, 0.55);
    --menu-icons-active-color: rgba(255, 255, 255, 255);
    --filter-invert-color: 0;
    --background-menu-right: #fff;
    --background-dropdown: #fff;
    --background-404: #fff;
    --background-root: #fff;
    --shadow-color-dropdown: rgba(0,0,0,.12);
    --dropdown-hover-background: #68686812;
    --btn-light-background: #f8f9fa;
    --background-notification-open: #F5F5F5;
    --btn-light-color: oklch(0 0 0);
    --background-modal: #3434345e;
    --card-game: #fff;

    --input-color-text: oklch(0 0 0);
}


.dark{
    --color-menu: oklch(0 0 0);
    --azul-principal: #5bb4ff;
    --background-feed: oklch(0.145 0 0);
    --background-login: oklch(0.145 0 0);
    --post-border-color: oklch(0 0 0);
    --post-boxshadow-color: oklch(0 0 0);
    --background-input: oklch(0 0 0) !important;
    --background-livro: oklch(0.200 0 0) ;
    --background-input-login: oklch(0 0 0) !important;
    --background-dropdown: oklch(0.269 0 0);
    --color-input: #fff !important;
    --background-search: oklch(0.145 0 0);
    --background-light: #fff;
    --color-text-post: #ffffffdc;
    --background-item: oklch(0.145 0 0);
    --container-screen: oklch(0.145 0 0);
    --small-menu-top: oklch(0 0 0);
    --background-input-search: #5bb4ff;

    --textarea-color-text: #ffffffa8;
    --textarea-background-color: oklch(0 0 0);
    --textarea-borer-color: #dee2e6;

    --input-border-color: oklch(0.200 0 0);
    
    --modal-background-color: oklch(0 0 0);

    --screen-background-color: oklch(0 0 0);

    --svg-icons-color: #fff;
    --background-modal: #fff;
    --dropdown-hover-background: #222121;
    --menu-icons-color: rgba(0, 0, 0, 0.55);
    --menu-icons-active-color: rgb(0, 0, 0);
    --filter-invert-color: 1;
    --background-menu-right: oklch(0 0 0);
    --background-404: oklch(0 0 0);
    --background-root: oklch(0 0 0);
    --shadow-color-dropdown: rgb(65 65 65 / 12%);
    --bs-dropdown-link-hover-color: #ffffffcd;
    --btn-light-background: #96939326;
    --background-notification-open: #96939326;
    --btn-light-color: #fff;
    --shadow-see-more-color: rgb(0 0 0 / 85%);
    --see-more-color: rgb(0 0 0);
    --background-modal: #ffffff0d;
    --card-game: #96939326;

    --input-color-text: #fff;
    --red: #dc3545;
}

.dark body, .dark html{
    background-color: var(--background-login)!important;
}


.dark .card-teams *{
    color: oklch(0.300 0 0);
}
.dark .navbar-brand{
    filter: invert(1);
}
.dark .navbar-brand, .dark .text-menu{
    color: #000!important;
}

.dark .container-livro p{
    color: #fff;
}

.dark img.img-escolher-capa{
    /* background-color: oklch(0.145 0 0)!important; */
    color: #fff!important;
    border-color: var(--input-border-color)!important;
    box-shadow: 0 0 0!important;
}

.dark div.img-escolher-capa{
    box-shadow: 0 0 0!important;
    color: #fff!important;
    background-color: oklch(0.145 0 0)!important;
}

.dark .livro-outro h1{
    filter: invert(1);
}

.dark  .btn-adicionar-livro svg, .dark  .btn-adicionar-livro svg path{
    color: #000;
}

.dark .space-view-post-dark{
    height: 20px;
}