:root {
    --opacidade: 0.3;
    --cor1: #afc837;
    --cor2: #007AFF;
    --cor3: #eb1e50;
    --cor4: #faa01e;
    --cor5: #10378F;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fa-classic, .fa-regular, .fa-solid, .far, .fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.clip {
    font-family: 'clip-font' !important;
}

.btn-icon [class^="fa-"], .btn-icon [class*=" fa-"], .btn-icon [class^="clip-"], .btn-icon [class*=" clip-"] {
    display: block !important;
}

i[class^="clip-"], i[class*=" clip-"] {
    font-family: 'clip-font' !important;
}

body {
    background-color: var(--cor2) !important;
    padding: 20px !important;
}

#geral {
    min-height: 90%;
    min-width: 90%;
    background-color: white;
    padding: 10px;
    border-radius: 42px;
    height: 100%;
}

.logo {
    margin-bottom: 95px;
}

/*************************************************/
/*************** MENU MOBILE *********************/
/*************************************************/

#mobile {
    height: 70px;
    display: none;
    align-items: center;
    background-color: #e3e3e3;
    width: 100%;
}

#mobile .itensmenu {
    display: none;
    background-color: #e3e3e3;
    width: 99%;
    position: absolute;
    left: 0;
    padding: 30px;
    z-index: 1000;
    top: 72px;
    border-top: 3px solid var(--cor2);
}

#btn-mobile {
    display: none;
}

#btn-mobile i {
    font-weight: 900 !important;
    font-size: 1.5em;
}

.itensmenu .campo {
    width: 98%;
    height: 30px;
    font-size: 1.4em;
    margin-bottom: 9%;
    border: 1px solid lightgrey;
    border-radius: 12px !important;
    outline: none;
    padding: 15px 20px;
    display: block;
    box-shadow: 0.5px 0.5px 0 black;
}

#mobile .btn-logar {
    width: 98%;
    padding: 2%;
    font-size: 1.2em;
    border-radius: 15px;
    margin-bottom: 5%;
}


/*************************************************/
/********************** MENU *********************/
/*************************************************/
#menu {
    width: 17%;
    min-height: 100%;
    background-color: #e3e3e3;
    border-radius: 42px;
    padding: 10px;
    float: left;
    margin-bottom: 10px;
    border-bottom: 150px solid var(--cor5);
}

.itensmenu .campo {
    width: 98%;
    height: 30px;
    padding: 3px 8px;
    font-size: 1.2em;
    border: 1px solid dimgrey;
    border-radius: 5px;
    margin-bottom: 9%;
}

.itensmenu .btn-logar {
    width: 98%;
    padding: 2%;
    font-size: 1.2em;
    border-radius: 15px;
    margin-bottom: 5%;
}

#menu .itensmenu {
    padding: 5px;
}

#menu .itemMenu {
    border-bottom: 0.5px solid var(--cor5);
}

#menu .sub-menu .item-sub, #mobile .sub-menu .item-sub {
    margin-left: 10%;
    background-color: #ccc;
    width: 80%;
    margin-bottom: 2px;
}

#menu .sub-menu .item-sub:last-child, #mobile .sub-menu .item-sub:last-child {
    border-bottom: 0.5px solid var(--cor5);
}

#menu .itensmenu a, #mobile .itensmenu a {
    text-decoration: none;
    width: 90%;
    display: inline-flex;
    padding: 12px;
    color: var(--cor5);
}

#menu .itensmenu li a, #mobile .itensmenu li a {
    width: 100% !important;
}

#menu .itensmenu a:hover, #mobile .itensmenu a:hover {
    background-color: var(--cor2);
    color: white;
}

#menu .itensmenu i, #mobile .itensmenu i {
    margin-right: 5px;
}

.figura {
    margin-top: 60px;
    width: 80%;
    margin-left: 10%;
    margin-bottom: -150px;
}

#menu_login {
    float: right;
}

#menu_login img {
    border-radius: 50%;
}

#cabecalho {
    border-bottom: 1px solid #10378F;
}

#cabecalho, #conteudoGeral {
    width: 81%;
    float: right;
}

#cabecalho #titulosite {
    width: 50%;
    float: left;
}

#cabecalho #titulosite h1 {
    letter-spacing: 0.1em;
}

#cabecalho .titulo_tela {
    font-size: 1.2em;
    font-weight: bolder;
}

#cabecalho #menu_login {
    width: 48%;
    text-align: right;
    margin-right: 2%;
}

#cabecalho #menu_login .nome_usuario {
    float: right;
}

#cabecalho #menu_login .img_login {
    margin-top: 10px;
}

#cabecalho #menu_login strong {
    display: block;
    font-size: 1.3em;
}

#cabecalho #menu_login .DeslogarSistema {
    margin-top: 15px;
    font-size: 1.1em;
    padding-top: 10px;
}

#cabecalho #menu_login .DeslogarSistema:hover {
    text-decoration: none;
    color: dimgrey;
    cursor: pointer;
}

#conteudoGeral {
    margin: 10px 0;
    padding-bottom: 5px;
}

.main-content {
    width: 81%;
    float: right;
    margin-left: 0;
}

.btn_calc {
    width: 46%;
    padding: 3%;
    margin-left: 2%;
    border-radius: 12px;
    float: left;
    margin-top: 12px;
    text-align: center;
    font-size: 2.3em;
    text-decoration: none;
    box-shadow: 0 0 3px black;
}

.btn_sim {
    width: 32%;
    padding: 3%;
    margin-left: 1%;
    border-radius: 12px;
    float: left;
    margin-top: 12px;
    text-align: center;
    font-size: 2.3em;
    text-decoration: none;
    box-shadow: 0 0 3px black;
}

.btn_sim .img-calc {
    clear: both;
    display: block;
    margin-bottom: 10px;
    width: 60%;
    margin-left: 20%;
}

.btn_sim:last-child {
    margin-right: 0;
}

.btn_calc:hover, .btn_sim:hover {
    box-shadow: 1px 1px 7px black;
}

.btn_calc .img-calc {
    clear: both;
    display: block;
    margin-bottom: 10px;
    width: 25%;
    margin-left: 35%;
}

.btn_calc:last-child {
    margin-right: 0;
}


.cor1 {
    background-color: var(--cor1) !important;
    border-color: var(--cor1) !important;
    color: #10378F !important;
}

.cor1:hover {
    background-color: var(--cor2) !important;
    border-color: var(--cor2) !important;
    color: white !important;
}

.cor2 {
    background-color: var(--cor2) !important;
    border-color: var(--cor2) !important;
    color: white;
}

.cor2:hover {
    background-color: var(--cor5) !important;
    border-color: var(--cor5) !important;
    color: white;
}

.cor3 {
    background-color: var(--cor3) !important;
    border-color: var(--cor3) !important;
    color: white;
}

.cor3:hover {
    background-color: var(--cor4) !important;
    border-color: var(--cor4) !important;
    color: var(--cor5) !important;
}

.cor4 {
    background-color: var(--cor4) !important;
    border-color: var(--cor4) !important;
    color: var(--cor5);
}

.cor4:hover {
    background-color: var(--cor3) !important;
    border-color: var(--cor3) !important;
    color: var(--cor5) !important;
}

.cor5 {
    background-color: var(--cor5) !important;
    border-color: var(--cor5) !important;
    color: white;
}

.cor5:hover {
    background-color: var(--cor1) !important;
    border-color: var(--cor1) !important;
    color: var(--cor5) !important;
}

.bg1 {
    background-color: var(--cor1);
    color: var(--cor5);
}

.bg2 {
    background-color: var(--cor2);
    color: white;
}

.bg3 {
    background-color: var(--cor3);
    color: white;
}

.bg4 {
    background-color: var(--cor4);
    color: var(--cor5);
}

.bg5 {
    background-color: var(--cor5);
    color: white;
}


.bgOpc1 {
    background-color: rgba(175, 200, 55, var(--opacidade));
}

.bgOpc2 {
    background-color: rgba(0, 122, 255, var(--opacidade));
}

.bgOpc3 {
    background-color: rgba(235, 30, 80, var(--opacidade));
}

.bgOpc4 {
    background-color: rgba(250, 160, 30, var(--opacidade));
}

#rodapeSite {
    content: ".";
    display: block;
    clear: both;
    padding: 15px;
    margin-top: 10px;
    width: 100%;
    color: #10378F;
    border-top: 1px solid #10378F;
    text-align: center;
    font-weight: bolder;
}


.texto-titulo {
    text-transform: uppercase;
}

/************************************************/
/**************   NOVA CALCULADORA  *************/
/************************************************/


.slidemenu {
    width: 100%;
    border-radius: 42px;
    padding: 30px 10px;
}

#menu_assistente {
    width: 100%;
    padding: 15px 5px;
    display: grid;
    overflow: auto;
}

#bolas_etapa {
    width: 98%;
    margin-left: 1%;
    display: flex;
    flex-wrap: nowrap;
}

#menu_assistente::-webkit-scrollbar {
    display: none;
}

#bolas_etapa li {
    width: 200px;
    height: 100px;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
}

#bolas_etapa .bola {
    width: 35%;
    height: 65%;
    padding: 7%;
    display: block;
    margin: 3% 0 1% 32.5%;
    border-radius: 100%;
    text-align: center;
    vert-align: middle;
    box-shadow: 1px 1px 2px black;
    opacity: 0.3;
    font-size: 1.1em;
    font-weight: bold;
}

#bolas_etapa .activa {
    opacity: 1;
}

.progress {
    height: 7px;
    font-weight: bolder;
    font-size: 1.5em !important;
    border-radius: 15px;
    width: 98%;
    margin-left: 1%;
    border: 0.5px solid #ccc;
    box-shadow: 0 0 2px black;
}

.dados-calc {
    padding: 20px;
}

.dados-calc .campos {
    margin-top: 20px;
    margin-left: 5%;
    width: 40%;
    display: block;
    float: left;
    font-size: 1.3em;
}

.select2-container {
    display: block;
}

.dados-calc .btn-prog {
    margin-top: 40px;
    margin-left: 33%;
    padding: 1%;
    width: 30%;
    border-radius: 12px;
}

.dados-calc .ultimo-btn {
    padding: 2%;
    width: 20%;
    font-weight: bolder;
    font-size: 1.5em;
    margin-left: 36%;
}

.dados-calc .input-form {
    border: 1px solid lightgrey;
    border-radius: 12px !important;
    outline: none;
    width: 90%;
    padding: 15px 20px;
    font-size: 1.1em;
    display: block;
    box-shadow: 0.5px 0.5px 0 black;
}

.dados-calc .has-switch {
    min-width: 200px !important;
    border-radius: 12px;
}

.dados-calc .has-switch span.switch-large, .dados-calc .has-switch label.switch-large {
    padding: 15px 20px !important;
    font-size: 1.1em;
}

.dados-calc .has-switch span.switch-success {
    background-color: var(--cor1);
    background-image: none !important;
}

.dados-calc .has-switch span.switch-danger {
    background-color: var(--cor3);
    background-image: none !important;
}

.etapas .box-resul {
    width: 23%;
    margin-right: 2%;
    height: 25%;
    float: left;
    margin-top: 10px;
    border-radius: 12px !important;
    padding: 30px;
    margin-bottom: 30px;
}

.etapas .box-resul:last-child {
    margin-right: 0;
}

.etapas .titulo_box {
    display: inline-block;
    font-size: 1.3em;
    font-weight: bolder;
}

.etapas .fa-xl {
    font-size: 3em;
    opacity: 0.3;
    vertical-align: -0.7em;
}

.etapas .nota_box {
    display: inline-block;
    font-size: 1.3em;
    margin-left: 18%;
}

.etapas .nota_box b {
    font-size: 1.5em;
    font-weight: bolder;
}

.etapas #mensagem {
    width: 100%;
    display: block;
    clear: both;
    font-size: 1.3em;
}

.dados-calc .table {
    background-color: white;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome !important;
}

.cursor {
    cursor: pointer;
}

.disabled {
    display: none !important;
}

.no-float {
    float: none !important;
}

.clearfix {
    clear: both;
}

.alert {
    border-radius: 12px;
}

.gritter-notice-wrapper {
    top: 20%;
    right: 35%;
    width: 30%;
    height: 30%;
    border-radius: 12px;
}

.gritter-item-wrapper {
    height: 100%;
    border-radius: 12px;
}

.gritter-item {
    padding: 5%;
    height: 86%;
    width: 100%;
}

.gritter-notice-wrapper .circle-img {
    width: 25%;
}

.gritter-notice-wrapper .gritter-close {
    width: 5%;
    height: 10%;
    padding: 5px 0 0 8px;
}

.gritter-with-image {
    width: 70%;
}

.gritter-title {
    font-size: 3em;
}

.mensagem-alerta-js {
    font-size: 1.8em;
}

.gritter-warning {
    background-color: var(--cor4) !important;
}

/****************************************************/
/********* TELA PRINCIPAL DOS LIVROS ****************/
/****************************************************/
.colecoes {
    background-color: var(--cor5);
    padding: 0 25px;
    border-radius: 12px;
    max-height: 750px;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.toda_colecao{
    position: relative;
}

.colecao {
    padding: 10px 0 5px;
    -ms-overflow-style: none;
    list-style: none;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    display: flex;
}

.colecoes .titulo_colecao{
    margin-bottom: -5px;
    color: white;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    font-weight: bolder;
}

.colecao::-webkit-scrollbar {
    display: none;
}

.colecao .livro_capa {
    float: left;
    margin-right: 15px;
}

/*.colecao .livro_capa img:hover {*/
/*    width: 234px;*/
/*    z-index: 9999;*/
/*    position: relative;*/
/*    padding: 10px;*/
/*}*/

.colecao .livro_capa img {
    border-radius: 12px;
    box-shadow: 1px 1px 3px white;
}

.setas {
    /*display: inline-block;*/
    font-weight: bolder;
    font-size: 3em;
    padding: 4% 1%;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    top: 25%;
    color: white;
    display: none;
}

.setas:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,0.8);
}

.seta_esquerda{
    left: 0;
}

.seta_direita{
    right: 0;
}