/*
*  CSS TABLE OF CONTENTS
*
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Background-Colors
*    6.2 - Text Colors
*    6.3 - Side Bar
*    6.4 - Content
*    6.5 - Modal
*    6.6 - Grid
*  7.0 - Footer
*  8.0 - Media Queries
*/

/*** 1.0 - Reset ***/

.form-control:focus, .form-select:focus {
    border-color: var(--nc-verde);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:disabled, .form-control:read-only {
    background-color: var(--nc-disable) !important;
}

img {
    -webkit-user-drag: none;
    /* ReSharper disable once UnknownCssVendorExtension */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: none !important;
}


/*** 2.0 - Fonts ***/

/*----------------------- CINZEL -----------------------*/

@font-face {
    font-family: "Cinzel Black";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-Black.ttf');
}

@font-face {
    font-family: "Cinzel Bold";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-Bold.ttf');
}

@font-face {
    font-family: "Cinzel ExtraBold";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-ExtraBold.ttf');
}

@font-face {
    font-family: "Cinzel Medium";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-Medium.ttf');
}

@font-face {
    font-family: "Cinzel Regular";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-Regular.ttf');
}

@font-face {
    font-family: "Cinzel SemiBold";
    src: url('../Content/Fonts/Cinzel/static/Cinzel-SemiBold.ttf');
}

.cinzel-black {
    font-family: 'Cinzel Black', serif !important;
}

.cinzel-bold {
    font-family: 'Cinzel Bold', serif !important;
}

.cinzel-extraBold {
    font-family: 'Cinzel ExtraBold', serif !important;
}

.cinzel-medium {
    font-family: 'Cinzel Medium', serif !important;
}

.cinzel-regular {
    font-family: 'Cinzel Regular', serif !important;
}

.cinzel-semiBold {
    font-family: 'Cinzel SemiBold', serif !important;
}


/*-----------------------------------------------------------*/

/*----------------------- ROBOTO ----------------------------*/
@font-face {
    font-family: "Roboto Black";
    src: url('../Content/Fonts/Roboto/Roboto-Black.ttf');
}

@font-face {
    font-family: "Roboto BlackItalic";
    src: url('../Content/Fonts/Roboto/Roboto-BlackItalic.ttf');
}

@font-face {
    font-family: "Roboto Bold";
    src: url('../Content/Fonts/Roboto/Roboto-Bold.ttf');
}

@font-face {
    font-family: "Roboto BoldItalic";
    src: url('../Content/Fonts/Roboto/Roboto-BoldItalic.ttf');
}

@font-face {
    font-family: "Roboto Italic";
    src: url('../Content/Fonts/Roboto/Roboto-Italic.ttf');
}

@font-face {
    font-family: "Roboto Light";
    src: url('../Content/Fonts/Roboto/Roboto-Light.ttf');
}

@font-face {
    font-family: "Roboto LightItalic";
    src: url('../Content/Fonts/Roboto/Roboto-LightItalic.ttf');
}

@font-face {
    font-family: "Roboto Medium";
    src: url('../Content/Fonts/Roboto/Roboto-Medium.ttf');
}

@font-face {
    font-family: "Roboto MediumItalic";
    src: url('../Content/Fonts/Roboto/Roboto-MediumItalic.ttf');
}

@font-face {
    font-family: "Roboto Regular";
    src: url('../Content/Fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
    font-family: "Roboto Thin";
    src: url('../Content/Fonts/Roboto/Roboto-Thin.ttf');
}

@font-face {
    font-family: "Roboto ThinItalic";
    src: url('../Content/Fonts/Roboto/Roboto-ThinItalic.ttf');
}

.roboto-black {
    font-family: 'Roboto Black', serif !important;
}

.roboto-blackItalic {
    font-family: 'Roboto BlackItalic', serif !important;
}

.roboto-bold {
    font-family: 'Roboto Bold', serif !important;
}

.roboto-boldItalic {
    font-family: 'Roboto BoldItalic', serif !important;
}

.roboto-italic {
    font-family: 'Roboto Italic', serif !important;
}

.roboto-light {
    font-family: 'Roboto Light', serif !important;
}

.roboto-lightItalic {
    font-family: 'Roboto LightItalic', serif !important;
}

.roboto-medium {
    font-family: 'Roboto Medium', serif !important;
}

.roboto-mediumItalic {
    font-family: 'Roboto MediumItalic', serif !important;
}

.roboto-regular {
    font-family: 'Roboto Regular', serif !important;
}

.roboto-thin {
    font-family: 'Roboto Thin', serif !important;
}

.roboto-thinItalic {
    font-family: 'Roboto ThinItalic', serif !important;
}


/*-----------------------------------------------------------*/


/*** 3.0 - Globals ***/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    text-align: center;
    font-family: 'Cinzel Medium';
}

select, option {
    font: -moz-pull-down-menu;
}

.ReloadContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.LogoReaload {
    width: 30em;
}

#UpdtPanel {
    display:contents;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/*** 4.0 - Color Palette ***/
:root {
    --nc-vermelho: #a31a2c;
    --nc-verde-clarissimo: #F6F8F9;
    --nc-verde-claro: #919C9B;
    /*--nc-verde-claro: #d3d6d6;*/
    --nc-verde: #263c39;
    --nc-azul: #1d4e89;
    --nc-azul-escuro: #16304f;
    --nc-cinza: #F4F4F4;
    --nc-cinzento: #D5D5D5;
    --nc-amarelo: #FFC107;
    --nc-disable: #c5c2c2;
}

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
body {
    font-family: 'Roboto Regular' !important;
    height: 100vh;
}

/*** 6.0.1 - GridCSS ***/

/*#MasterMain {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "footer";
    grid-template-rows: auto 1fr auto;
}

    #MasterMain > #header {*/
        /*background-color: #7E57C2;*/
        /*grid-area: nav;
    }

    #MasterMain > #content2 {*/
        /*background-color: #F8BBD0;*/
        /*grid-area: main;
    }
    #MasterMain > #contentActions {*/
        /*background-color: #7E57C2;*/
        /*grid-area: footer;
    }*/


/*** 6.0.2 - FlexBox ***/
.flexboxbox {
    display: flex;
    flex-flow: column;
    height: 100%;
}

        .flexboxbox .row.flexboxHeader {
            flex: 0 1 auto;
            /* The above is shorthand for:
                flex-grow: 0,
                flex-shrink: 1,
                flex-basis: auto
            */
        }

        .flexboxbox .row.flexboxContent {
            flex: 1 1 auto;
        }

        .flexboxbox .row.flexboxActions {
            flex: 0 1 40px;
        }



/*** 6.1 - Background-Colors ***/
.bg-verde-claro {
    background-color: var(--nc-verde-claro) !important;
}

.bg-hover-verde-claro:hover {
    background-color: var(--nc-verde-claro) !important;
}

.bg-verde-clarissimo {
    background-color: var(--nc-verde-clarissimo) !important;
}

.bg-hover-verde-clarissimo:hover {
    background-color: var(--nc-verde-clarissimo) !important;
}

.bg-verde {
    background-color: var(--nc-verde) !important;
}

.bg-hover-verde:hover {
    background-color: var(--nc-verde) !important;
}

.bg-azul {
    background-color: var(--nc-azul) !important;
}

.bg-hover-azul:hover {
    background-color: var(--nc-azul) !important;
}

.bg-azul-escuro {
    background-color: var(--nc-azul-escuro) !important;
}

.bg-hover-azul-escuro:hover {
    background-color: var(--nc-azul-escuro) !important;
}

.bg-cinza {
    background-color: var(--nc-cinza) !important;
}

.bg-hover-cinza:hover {
    background-color: var(--nc-cinza) !important;
}

.alert-vermelho {
    color: white;
    font-weight: bold;
    background-color: var(--nc-vermelho);
}


.h-fit-content {
    height: fit-content;
}

/*** 6.2 - Text Colors ***/
.text-vermelho {
    color: var(--nc-vermelho) !important;
}

.text-hover-vermelho:hover {
    color: var(--nc-vermelho) !important;
}

.text-verde {
    color: var(--nc-verde) !important;
}

.text-hover-verde:hover {
    color: var(--nc-verde) !important;
}

.text-verde-escuro {
    color: #1e2625 !important;
}

.text-hover-verde-escuro:hover {
    color: #1e2625 !important;
}

.text-azul {
    color: var(--nc-azul) !important;
}

.text-verde-claro {
    color: var(--nc-verde-claro) !important;
}

.text-cinza {
    color: var(--nc-cinza) !important;
}

.text-hover-cinza:hover {
    color: var(--nc-cinza) !important;
}

.text-hover-white:hover {
    color: white !important;
}

.text-cinzento {
    color: var(--nc-cinzento) !important;
}

.text-hover-cinzento:hover {
    color: var(--nc-cinzento) !important;
}

.text-amarelo {
    color: var(--nc-amarelo) !important;
}

.text-hover-amarelo:hover {
    color: var(--nc-amarelo) !important;
}


/*** 6.3 - SideBar ***/

#sidebar #logoNaturalCarnes {
    width: 100% !important;
}

.div-ufpb-logo {
    padding: 1.2rem;
    margin: 0 auto;
    width: 90%;
}

.sidemenu-nav {
    list-style: none;
}

.sidemenu-item {
    width: 5rem;
    height: 3.5rem;
    margin: 5px auto;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    background-color: var(--nc-verde-claro);
}

    .sidemenu-item .sidemenu-item-icon, .sidemenu-item svg {
    font-size: 2.5rem;
    color: white;
    /* width: 2.5rem; */
    margin: 10% 0% 5% 22% !important;
    height: 70%;
    }

    .sidemenu-item:hover, .sidemenu-item:hover .sidemenu-item-icon {
        background-color: white;
        color: var(--nc-verde) !important;
    }

        .sidemenu-item:hover .sidemenu-item-icon path, .sidemenu-item:hover .sidemenu-item-icon ellipse, .sidemenu-item:hover .sidemenu-item-icon circle {
            fill: var(--nc-verde);
        }

.sidemenu-item-icon, .sidemenu-item-icon svg {
    padding: 0;
    width: 100%;
}

.sidemenu-logout {
    margin: auto;
    font-size: 1.5rem;
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    text-align: center;
}

    .sidemenu-logout .material-icons {
        font-size: 3rem;
    }

#wrapper {
    overflow-x: hidden;
}

#sidebar_wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
}

    #sidebar_wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    /*#sidebar_wrapper .list-group {
        width: 15rem;
    }*/

#page-content-wrapper {
    min-width: 100vw;
    min-height: 100vh;
}

#wrapper.toggled #sidebar_wrapper {
    margin-left: 0;
}

#menu_toggle {
    position: absolute;
    opacity: 1;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    transition: 1s;
}

    #menu_toggle:focus {
        box-shadow: none;
    }

    #menu_toggle span {
        width: 90%;
        height: 2px;
        margin: 3px auto;
        display: block;
        background: #555;
        transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    }

#wrapper.toggled #menu_toggle span {
    transform: none;
    /* all bars are visible */
    margin: 0 auto;
}

    #wrapper.toggled #menu_toggle span:first-of-type {
        /* rotate first one */
        transform: rotate(45deg) translate(2px, 2px);
    }

    #wrapper.toggled #menu_toggle span:nth-of-type(2) {
        /* second one is not visible */
        opacity: 0;
    }

    #wrapper.toggled #menu_toggle span:last-of-type {
        /* rotate third one */
        transform: rotate(-45deg) translate(1px, -1px);
    }

#logout_sidebar_button {
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 100%;
    background-color: #263c39;
}

.row-no-gutter {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.h-40 {
    height: 40% !important;
}

.h-60 {
    height: 60% !important;
}

/*** 6.4 - Content ***/
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

.fs-7 {
    font-size: 0.7rem !important;
}


.h-40 {
    height: 40% !important;
}

.h-60 {
    height: 60% !important;
}

.content-scroll-wrap {
    position: relative;
    height: 100%;
}

.content-scroll {
    direction: rtl;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

    .content-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .content-scroll::-webkit-scrollbar-button {
        width: 8px;
        height: 5px;
    }

    .content-scroll::-webkit-scrollbar-track {
        background: #eee;
        border: thin solid lightgray;
        box-shadow: 0px 0px 3px #dfdfdf inset;
        border-radius: 10px;
    }

    .content-scroll::-webkit-scrollbar-thumb {
        background: #999;
        border: thin solid gray;
        border-radius: 10px;
    }

        .content-scroll::-webkit-scrollbar-thumb:hover {
            background: #7d7d7d;
        }

.pager:nth-child(even) {
    background: transparent;
}

.pager table, .pager table td, .pager table th {
    border: none;
    margin: 0;
    background: transparent;
}

    .pager table td{
        margin-right: 3px;
    }

    .pager table tr:nth-child(odd), .pager table tr {
        background-color: transparent;
    }

    .pager span {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: white;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        background-color: var(--nc-azul);
    }

.pager a {
    color: var(--dark) !important;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: var(--nc-cinzento);
}

    .pager a:hover {
        color: white !important;
        background-color: var(--nc-verde-claro);
    }

.pager td{
    border: none;
}

/*** 6.4.1 - Menu Page  ***/
.containerMenu-item {
    padding: 5rem !important;
}

.menu-item {
    display: flex;
    align-items: center;
    text-align: center;
    background-color: var(--nc-cinza);
    color: var(--nc-verde);
    border-radius: 30px;
    height: 80%;
    transition: 0.1s;
    text-decoration: none;
}

.menu-item-icon {
    width: 100%;
    height: 100%;
}

.menu-item-text {
    font-size: 1rem;
}

.menu-item:hover {
    background-color: var(--nc-verde);
    color: white;
    transition: 0.1s;
}

.menu-item .menu-item-icon path, .menu-item .menu-item-icon ellipse, .menu-item .menu-item-icon circle {
    fill: var(--nc-verde);
    transition: 0.1s;
}

.menu-item:hover .menu-item-icon path, .menu-item:hover .menu-item-icon ellipse, .menu-item:hover .menu-item-icon circle {
    fill: white !important;
    transition: 0.1s;
}

/*** 6.5 - Modal  ***/


/*** 6.6 - Grid ***/

.table td, th {
    border: 5px solid white;
}

.table th {
    font-family: "Roboto Bold";
}

tr:nth-child(even) {
    background-color: #F6F8F9;
}

tr:nth-child(odd) {
    background-color: #E8EEF1;
}

.maxH {
    max-height: 80vh;
    overflow-y: auto;
}

.grid-svg {
    width: 60px;
}

    .grid-svg svg {
        fill: black;
        width: 2rem;
    }



/*** 7.0 - Footer ***/
/*** 8.0 - Media Queries ***/
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }

    #menu_toggle {
        display: none !important;
        opacity: 0;
        transition: 1s;
    }

    #sidebar_wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100% !important;
    }

    #wrapper.toggled #sidebar_wrapper {
        /* margin-left: -15rem; */
    }
}

@media only screen and (max-width: 960px) {
    .col-xs-12 {
        display: flex;
        flex-direction: column;
    }

    .Titulo {
        font-size: 25px !important;
    }


    .voltar_atras_tamanho {
        font-size: 40px !important;
    }

}

@media (min-width: 1500px) {
    .mx-not-xl-menu {
        margin-right: 5rem !important;
        margin-left: 5rem !important;
    }
    .mx-xxxl-4 {
        margin-right: 1.5rem!important;
        margin-left: 1.5rem!important;
    }
}

@media (min-width: 1800px) {
    .mx-xl-menu {
        margin-right: 15rem !important;
        margin-left: 15rem !important;
    }
}