/*** 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;
}


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

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

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

/*** 6.0 - Body ***/

body {
    font-family: 'Roboto Regular' !important;
}
/*** 6.1 - Background-Colors ***/

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

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

.bg-hover-vermelho-escuro:hover {
    background-color: #650f1a !important;
}

.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;
}

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

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

.bg-opacity{
    background-color: rgba(0,0,0,0.1);
}

.alert-vermelho {
    color: white;
    background-color: var(--nc-vermelho);
    border: none;
}

.alert-verde {
    color: white;
    background-color: #04AA6D;
    border: none;
}

.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 - Button Colors ***/
.btn-vermelho {
    color: #fff;
    background-color: var(--nc-vermelho);
    border-color: var(--nc-vermelho);
}

.btn-check:active + .btn-vermelho, .btn-check:checked + .btn-vermelho, .btn-vermelho.active, .btn-vermelho:active, .show > .btn-vermelho.dropdown-toggle {
    color: #fff;
    background-color: var(--nc-vermelho);
    border-color: var(--nc-vermelho);
}

.btn-vermelho:hover {
    color: #fff;
    background-color: #650f1a;
    border-color: var(--nc-vermelho);
}

    .btn-check:focus + .btn-vermelho, .btn-vermelho:focus {
        box-shadow: 0 0 0 0.25rem rgb(163 26 44 / 50%);
    }


/*** 6.4 - 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;
    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, .menu-item .menu-item-icon polygon {
    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, .menu-item:hover .menu-item-icon polygon {
    fill: white !important;
    transition: 0.1s;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

    /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + .content {
        padding-top: 60px;
    }

.transicao{
    transition: 0.5s;
}

/* Alerts darkColors */

.alert-primary {
    color: #738ca5;
    background-color: #1c2d40;
    border-color: #21364c;
}

.alert-secondary {
    color: #919191;
    background-color: #313131;
    border-color: #3b3b3b;
}

.alert-success {
    color: #4dd0af;
    background-color: #005e46;
    border-color: #007154;
}

.alert-danger {
    color: #ee8277;
    background-color: #74261e;
    border-color: #8b2e24;
}

.alert-warning {
    color: #f7ba59;
    background-color: #7a4e09;
    border-color: #925e0b;
}

.alert-info {
    color: #5dbecd;
    background-color: #0c515c;
    border-color: #0e616e;
}

.alert-light {
    color: #bbbbbb;
    background-color: #4f4f4f;
    border-color: #5f5f5f;
}

.alert-dark {
    color: #767676;
    background-color: #1e1e1e;
    border-color: #232323;
}

.textTransparente{
    color: transparent !important;
}

div#updatePanelBTNLicitacoes {
    display: contents !important;
}

@keyframes loadingDot1 {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    5% {
        opacity: 1;
        transform: translateX(0px);
    }

    70% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loadingDot2 {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    10% {
        opacity: 0;
        transform: translateX(-10px);
    }

    15% {
        opacity: 1;
        transform: translateX(0px);
    }

    70% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loadingDot3 {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    20% {
        opacity: 0;
        transform: translateX(-10px);
    }

    25% {
        opacity: 1;
        transform: translateX(0px);
    }

    70% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

    #loading-line-1 {
        animation: loadingDot1 2s ease-in-out infinite;
    }

    #loading-line-2 {
        animation: loadingDot2 2s ease-in-out infinite;
    }

    #loading-line-3 {
        animation: loadingDot3 2s ease-in-out infinite;
    }

/*** 99 - @media querys ***/
/* *************

    MIN-WIDTH

************** */
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*******************************
    * MODAL AS LEFT/RIGHT SIDEBAR
    * Add "left" or "right" in modal parent div, after class="modal".
    *******************************/
    .modal.left .modal-dialog {
        width: 500px;
        position: fixed;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

    .modal.right.fade .modal-dialog {
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.right.fade.show .modal-dialog {
        right: 0;
    }

    /* ----- MODAL STYLE ----- */
    .modal-content-side {
        border-radius: 0;
        border: none;
    }

    .modal-header-side {
        border-bottom-color: #eeeeee;
        background-color: #fafafa;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .divCenter {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent !important;
    }

    .textTitulo {
        font-size: 80px;
    }

    span.material-icons.iconLogin {
        font-size: 60px;
    }

    .textLogin {
        font-size: 30px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}

/* *************

    MAX-WIDTH

************** */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {


}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

    /* Login */
    .divCenter {
        background-color: var(--nc-cinzaLogin);
    }

    /* Footer */
    .divAltyra {
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: white;
    }

    /* Tittle */
    .textTitulo {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .textLogin, span.material-icons.iconLogin {
        font-size: 30px;
    }

    #rowOfBtns {
        display: flex;
        flex-flow: row;
        flex-direction: row-reverse;
    }

    .btnVerLicitacoes {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-family: 'Roboto Bold', serif !important;
    }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */