/* vietnamese */
/*@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}*/
/* latin-ext */
/*@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}*/
/* latin */
/*@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/* Geral */

body {
    margin: 0;
    padding: 0;
    background-color: rgb(245, 245, 245);
    font-family: Nunito, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    overflow-x: hidden;
}

input, select, textarea {
    padding: 4px;
    height: 18px;
    background-color: rgb(245, 245, 245);
    border: 1px solid gray;
    border-radius: 10px;
    font-size: 16px;
    vertical-align: top;
}

    input:focus[type=text],
    input:hover[type=text],
    input:focus[type=password],
    input:hover[type=password],
    input:focus[type=date],
    input:hover[type=date],
    input:focus[type=number],
    input:hover[type=number],
    select:focus,
    select:hover,
    textarea:focus,
    textarea:hover {
        background-color: rgb(235, 235, 235);
        outline: none;
    }

    input:read-only,
    input:disabled,
    select:disabled,
    textarea:read-only,
    textarea:disabled {
        background-color: rgb(245, 235, 235);
    }

        input:read-only:focus,
        input:read-only:hover,
        input:disabled:focus,
        input:disabled:hover,
        select:disabled:focus,
        select:disabled:hover,
        textarea:read-only:focus,
        textarea:read-only:hover,
        textarea:disabled:focus,
        textarea:disabled:hover {
            background-color: rgb(245, 225, 225);
        }

select {
    height: 28px;
}

textarea {
    height: 80px;
}

button {
    background-color: rgb(245, 245, 245);
    border: 1px solid gray;
    border-radius: 10px;
}

    button:focus, button:hover {
        background-color: rgb(235, 235, 235);
        outline: none;
        cursor: pointer;
    }

    button:active {
        background-color: rgb(225, 225, 225);
        outline: none;
    }

    button[disabled],
    button:disabled,
    button:disabled:hover {
        background-color: rgb(245, 235, 235);
        cursor: default;
    }

input[type="checkbox"] {
    transform: scale(2);
    margin-left: 6px;
}

a {
    color: rgb(20, 70, 115);
}

/* Login */

.loginTopo {
    padding-top: 1px;
    height: 160px;
    /*background-color: transparent rgb(50, 142, 239);*/
    background-image: linear-gradient(rgb(50, 142, 239), rgb(30, 112, 200));
    text-align: center;
}

    .loginTopo p {
        font-size: 32px;
        color: white;
        font-weight: bolder;
    }

.loginCorpo {
    padding-top: 8px;
    background-color: white;
    height: calc(100vh - 170px);
}

.loginForm {
    margin: -48px auto 0 auto;
    padding: 16px;
    width: 280px;
    height: auto;
    /*background-color: rgb(245, 245, 245);*/
    background-image: linear-gradient(rgb(245, 245, 245), rgb(205, 215, 225));
    border-radius: 30px;
}

    .loginForm > img {
        display: block;
        margin-right: auto;
        margin-left: auto;
        width: 48px;
        margin-top: -48px;
    }

    .loginForm input, .loginForm select {
        margin-bottom: 16px;
        margin-right: auto;
        margin-left: auto;
        width: 270px;
    }

.loginRodape {
    margin: 48px 0 8px 0;
    width: 100%;
    text-align: center;
}

.botaoOK {
    width: 154px;
    height: 48px;
    /*background-color: rgb(36, 224, 147);*/
    background-image: linear-gradient(rgb(36, 224, 147), rgb(16, 194, 107));
    color: white;
    border: 1px solid rgb(20, 210, 130);
    border-radius: 20px;
    font-size: 16px;
    font-family: Nunito, Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
}

    .botaoOK:focus, .botaoOK:hover {
        /*background-color: rgb(20, 210, 130);*/
        background-image: linear-gradient(rgb(20, 210, 130), rgb(0, 190, 90));
    }

    .botaoOK:active {
        /*background-color: rgb(10, 200, 120);*/
        background-image: linear-gradient(rgb(10, 200, 120), rgb(0, 170, 80));
    }

    .botaoOK[disabled],
    .botaoOK:disabled,
    .botaoOK:disabled:hover {
        /*background-color: rgb(85, 194, 149);*/
        background-image: linear-gradient(rgb(85, 194, 149), rgb(65, 164, 109));
    }

.botaoCancelar {
    /*background-color: rgb(255, 0, 68);*/
    background-image: linear-gradient(rgb(255, 0, 68), rgb(215, 0, 8));
    border: 1px solid rgb(240, 0, 50);
}

    .botaoCancelar:focus, .botaoCancelar:hover {
        /*background-color: rgb(240, 0, 50);*/
        background-image: linear-gradient(rgb(240, 0, 50), rgb(200, 0, 0));
    }

    .botaoCancelar:active {
        /*background-color: rgb(230, 0, 40);*/
        background-image: linear-gradient(rgb(230, 0, 40), rgb(180, 0, 0));
    }

    .botaoCancelar[disabled],
    .botaoCancelar:disabled,
    .botaoCancelar:disabled:hover {
        /*background-color: rgb(229, 112, 143);*/
        background-image: linear-gradient(rgb(229, 112, 143), rgb(209, 82, 103))
    }

.botaoPequeno {
    height: 24px;
    width: auto;
    padding: 0 10px 0 10px;
    font-size: 14px;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 10px;
}

/* Principal */

.cabecalho {
    position: fixed;
    top: 0;
    display: table;
    width: 100%;
    /*background-color: rgb(245, 245, 245);*/
    background-image: linear-gradient(rgb(245, 245, 245), rgb(205, 215, 225));
    text-align: center;
    z-index: 900;
}

    .cabecalho div {
        display: table-cell;
        padding: 8px;
    }

/* viabiliza a animação */
.cabecalhoIcone {
    float: left;
    width: 40px;
    height: 48px;
}

.cabecalhoFaixa {
    position: fixed;
    display: table;
    top: 69px;
    padding: 8px;
    width: calc(100% - 16px);
    height: 24px;
    /*background-color: rgb(50, 142, 239);*/
    background-image: linear-gradient(rgb(50, 142, 239), rgb(30, 112, 200));
    z-index: 900;
}

    .cabecalhoFaixa div {
        display: table-cell;
    }

        .cabecalhoFaixa div img {
            height: 16px;
        }

        .cabecalhoFaixa div span {
            color: white;
        }

.corpo {
    margin-top: calc(69px + 24px + 16px);
    padding: 8px;
    background-color: rgb(245, 245, 245);
    padding-bottom: 64px;
}

.rodape {
    /*background-color: white;*/
    position: fixed;
    display: table;
    padding: 0;
    bottom: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    opacity: 0.3;
}

    .rodape img {
        height: 64px;
        /*opacity: 0.3;*/
    }

/*.rodapeImagem {
    width: 80%;
    position: fixed;
    left: 10%;
    bottom: 8px;
    opacity: 0.3;
    z-index: 0;
}*/

/* Menu Principal */

.menu {
    text-align: center;
}

    .menu p {
        font-size: 24px;
        color: dimgray;
    }

    .menu button {
        margin: 0 8px 16px 8px;
        width: 130px;
        height: 130px;
        /*background-color: rgb(245, 245, 245);*/
        /*background-color: rgba(50, 50, 100, 1);*/
        border: 1px solid rgb(20, 210, 130);
        border-radius: 20px;
        font-family: Nunito, Tahoma, Geneva, Verdana, sans-serif;
    }

        .menu button:focus, .menu button:hover {
            /*background-color: rgb(36, 224, 147);*/
            background-image: linear-gradient(rgb(36, 224, 147), rgb(16, 194, 107));
        }

        .menu button:active {
            /*background-color: rgb(20, 210, 130);*/
            background-image: linear-gradient(rgb(20, 210, 130), rgb(0, 180, 90));
        }

        .menu button img {
            width: 80px;
        }

        .menu button span {
            display: inline-block;
            font-size: 12px;
            font-weight: bolder;
            color: rgb(20, 70, 115);
        }

/* Barra de Ferramentas */

.ferramentas {
    position: fixed;
    padding-top: 8px;
    padding-bottom: 8px;
    bottom: 0;
    width: 100%;
    height: 40px;
    /*background-color: rgb(20, 70, 115);*/
    background-image: linear-gradient(rgb(20, 70, 115), rgb(0, 40, 75));
    text-align: center;
}

    .ferramentas img {
        width: 40px;
        margin-left: 8px;
        margin-right: 8px;
    }

    .ferramentas .acima {
        position: fixed;
        bottom: 50px;
        height: 40px;
    }

    .ferramentas .desativado {
        opacity: 0.2;
    }

/* Variados */

.icone12 {
    height: 12px;
}

.icone16 {
    height: 16px;
}

.icone32 {
    height: 32px;
}

.icone48 {
    height: 48px;
}

.logo {
    height: 48px;
    max-width: 100%;
}

.icone64 {
    height: 64px;
}

.destaque {
    /*color: rgb(255, 0, 68) !important;*/
    color: rgb(0, 68, 255) !important;
}

.vermelho {
    color: rgb(255, 0, 68) !important;
}

.branco {
    color: white !important;
}

#logo {
    max-width: 200px;
}

#local {
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    height: 16px;
    vertical-align: sub;
}

/*.azul {
    color: rgb(0, 68, 255);
}*/

.espaco4 {
    display: block;
    margin-bottom: 4px;
}

.espaco8 {
    display: block;
    margin-bottom: 8px;
}

.espaco16 {
    display: block;
    margin-bottom: 16px;
}

.espaco32 {
    display: block;
    margin-bottom: 32px;
}

.invisivel {
    display: none;
}

.visivel {
    display: block;
}

.meio {
    vertical-align: middle;
}

.terco {
    width: 33%;
}

.metade {
    width: 50%;
}

.celula {
    display: table-cell;
    vertical-align: middle;
}

.clicavel:hover {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
}

/* Formulário */

.campoRotulo {
    font-size: 14px;
    color: black;
    font-weight: bolder;
}

.rotulo {
    line-height: 14px;
    display: inline-block;
    margin: 0 4px 0 4px;
    width: 85px;
    color: rgb(20, 70, 115);
    text-align: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bolder;
}

.rotuloMenor {
    width: 75px;
}

.rotuloEstreito {
    width: auto;
    text-align: center;
    letter-spacing: -0.5px;
}

.campoGrupo {
    /*display: inline-block;*/
    margin: 0 4px 4px 0;
}

.campoGrupoGrande {
    padding-top: 4px;
    padding-bottom: 1px;
    margin-bottom: 4px;
    background-color: rgb(225, 225, 225);
    border-radius: 10px 10px 10px 10px;
}

/*.campoGrupoGrande table {
        margin-left: 0;
        width: calc(100% + 4px);
    }*/

.campoPequenino {
    width: 40px !important;
    font-size: 10px !important;
}

select[class=campoPequenino] {
    width: 50px !important;
    font-size: 10px !important;
}

.campoPequeno {
    width: 65px !important;
    font-size: 10px !important;
}

select[class=campoPequeno] {
    width: 75px !important;
    font-size: 10px !important;
}

.campoMedio {
    width: 90px !important;
    font-size: 11px !important;
}

select[class=campoMedio] {
    width: 100px !important;
    font-size: 11px !important;
}

.campoMediano {
    width: 115px !important;
    font-size: 11px !important;
}

select[class=campoMediano] {
    width: 125px !important;
    font-size: 11px !important;
}

.campoGrande {
    width: 150px !important;
    font-size: 11px !important;
}

select[class=campoGrande] {
    width: 160px !important;
    font-size: 11px !important;
}

.campoGrandao {
    width: 200px !important;
    font-size: 11px !important;
}

.campoImagem {
    max-width: 300px;
    max-height: 300px;
}

select[class=campoGrandao] {
    width: 210px !important;
}

.formCabecalho {
    padding: 8px 8px 2px 8px;
    margin: -8px -8px 4px -8px;
    /*background-color: rgb(225, 225, 225);*/
    background-image: linear-gradient(rgb(225, 225, 225), rgb(185, 195, 205));
    border-radius: 0 0 20px 20px;
}

    .formCabecalho div > img {
        float: left;
        width: 40px;
    }

.pedidoIcone {
    position: absolute;
    top: 0;
    left: 0;
}

.titulo {
    font-size: 20px;
    color: rgb(20, 70, 115);
    font-weight: bolder;
}

.tituloSub {
    font-size: 16px;
    color: rgb(20, 70, 115);
    font-weight: bolder;
}

.campoJunto {
    display: inline-block;
}

    .campoJunto > :first-child {
        border-radius: 10px 0 0 10px;
        font-size: 13px !important;
    }

    .campoJunto input.campoGrandao {
        width: 170px !important;
    }

    .campoJunto select.campoGrandao {
        width: 180px !important;
    }

    .campoJunto img {
        width: 16px;
        border-radius: 0;
    }

    .campoJunto button {
        height: 28px;
        width: 30px;
        border-left: 0;
        border-radius: 0;
    }

    .campoJunto > :last-child {
        height: 28px;
        width: 30px;
        border-left: 0;
        border-radius: 0 10px 10px 0;
        /*vertical-align: top;*/
    }

.direita {
    text-align: right;
}

.esquerda {
    text-align: left;
}

.centro {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.textoGrande {
    font-size: 16px;
}

/* Tabela */

table {
    margin-top: 8px;
    margin-left: -4px;
    width: calc(100% + 8px);
    border: 1px solid gray;
    border-spacing: 0;
    border-radius: 10px;
    padding: 8px 0 8px 0;
}

    /*table tbody tr:nth-child(2n) {
        background-color: rgb(235, 235, 235);
    }*/

    table thead th {
        font-size: 10px;
        color: rgb(20, 70, 115);
        /*position: sticky;
        top: 0;*/ /*necessário para position sticky*/
        background-color: rgb(245, 245, 245);
    }

    table tbody td {
        font-size: 9px;
        text-align: center;
    }

    table .linhaA {
        /*background-color: rgb(255, 255, 255);*/
    }

    table .linhaB {
        background-color: rgb(235, 235, 235);
    }

.tabelaRolagem, .tabelaRolagem2, .tabelaRolagem3 {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    margin-left: -4px;
    width: calc(100% + 8px);
    margin-top: 8px;
}

    .tabelaRolagem table, .tabelaRolagem2 table {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

.tabelaRolagem2 {
    max-height: 200px;
}

.tabelaRolagem3 {
    max-height: 200px;
    margin-left: 0;
    width: 100%;
}

    .tabelaRolagem3 table {
        margin-left: 4px;
        width: calc(100% - 8px);
    }

        .tabelaRolagem3 table thead th {
            background-color: rgb(225, 225, 225);
        }

@media screen and (max-width: 450px) {
}

@media screen and (min-width: 450px) {
    table thead th {
        font-size: 14px;
    }

    table tbody td {
        font-size: 13px;
    }

    #local {
        max-width: 120px;
    }
}

@media screen and (min-width: 600px) {
    #local {
        max-width: 300px;
    }

    #logo {
        max-width: 300px;
    }
}

/* Splash */
.splash {
}

    .splash iframe {
        position: fixed;
        width: 100%;
        height: 100%;
        border: none;
    }

    .splash div {
        position: fixed;
        left: 10px;
        bottom: 10px;
        color: white;
        font-family: Nunito, Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30px;
        opacity: 0.1;
    }

/* Animações */

@keyframes carregando {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-90deg);
    }
}

.carregando {
    animation-name: carregando;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes giradinha {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-15deg);
    }

    10% {
        transform: rotate(0deg);
    }
}

.giradinha {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
}

.giradinha2 {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0.5s;
}

.giradinha3 {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
}

.giradinha4 {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.5s;
}

.giradinha5 {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
}

.giradinha6 {
    animation-name: giradinha;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
}

@keyframes correndo {
    0% {
        transform: rotate(-20deg);
        margin-left: 0;
    }

    80% {
        transform: rotate(-20deg);
        margin-left: 100vw;
    }

    90% {
        transform: rotate(-20deg);
        margin-left: -32px;
    }

    100% {
        transform: rotate(0deg);
        margin-left: 0;
    }
}

.correndo {
    animation-name: correndo;
    animation-duration: 2s;
    animation-timing-function: ease;
}

@keyframes piscando {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}

.piscando {
    /*background-color: red;*/
    animation-name: piscando;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.barraCarregando {
    position: fixed;
    top: 105px;
    height: 4px;
    width: 10%;
    /*background-color: rgb(20, 210, 130);*/
    /*background-image: linear-gradient(rgb(50, 142, 239), rgb(30, 112, 200));*/
    background-image: linear-gradient(to right, rgb(20, 210, 130), green, rgb(255, 0, 68));
    z-index: 900;
    left: 0;
    right: 0;
    /*margin-right: auto;
    margin-left: auto;*/
    animation-name: barraCarregando;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

@keyframes barraCarregando {
    0% {
        left: 0;
        width: 0;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 100%;
    }
}

/* quotation */

.salvando {
    background-color: rgb(50, 142, 239);
}

.cotacaoFaixa {
    width: 100%;
    height: 8px;
    /*background-color: rgb(50, 142, 239);*/
    background-image: linear-gradient(rgb(50, 142, 239), rgb(30, 112, 200));
}

.modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

    .modal > div {
        position: fixed;
        left: 10%;
        right: 10%;
        top: 10%;
        bottom: 10%;
        background-color: white;
        padding: 16px;
        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
    }

        .modal > div > img {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 96%;
            max-height: 96%;
        }

.cotacaoLogoDiv {
    height: 32px;
    width: 100%;
}

.cotacaoLogo {
    height: 32px;
    max-width: 200px;
}

.impressao {
    position: absolute;
    top: -110px; /* diferença do corpo */
    left: 0;
    right: 0;
    /*bottom: 0;*/
    z-index: 901;
}

.impressaoRotulo {
    display: inline-block;
    width: 100px;
    color: rgb(20, 70, 115);
}

.impressaoTexto {
    display: inline-block;
    width: 100px;
}

.blocos {
    display: block;
    width: 100%;
}

.bloco {
    display: inline-table;
    width: 340px;
}