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

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Flama Texto" !important;
}

.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(--cor5) !important;
    padding: 20px !important;
}

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

.logo {
    margin-bottom: 50px;
}

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

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

#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: 50px;
    margin-bottom: -150px;
}

#menu_login {
    float: right;
}

#menu_login img, #mobile .circle-img {
    border-radius: 50%;
    margin-right: 5px;
    border: 0.5px solid gray;
    padding: 2px;
    box-shadow: 1px 1px 2px gray;
}

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

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

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

#cabecalho .titulo_tela {
    font-size: 1.1em;
}

#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: 24%;
    margin-right: 1%;
    padding: 20px;
    border-radius: 10px;
    float: left;
    margin-top: 8px;
    text-align: center;
    font-size: 1.5em;
    text-decoration: none;
    box-shadow: 0 0 3px black;
}

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

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

.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: white !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 {
    font-family: "Flama Titulo" !important;
    text-transform: uppercase;
}


/************************************************/
/**************   FONTS  ***************/
/************************************************/

@font-face {
    font-family: 'Flama Texto';
    src: url('../fonts/leo_texto/Flama.ttf');
    src: url('../fonts/leo_texto/Flama.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Flama Titulo';
    src: url('../fonts/leo_titulo/Flama Condensed Basic.otf');
    src: url('../fonts/leo_titulo/Flama Condensed Basic.otf') format('truetype');
    font-weight: bold;
    font-style: normal
}

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

#conteudoGeral .box-resul2 {
    width: 32%;
    margin-right: 1%;
    float: left;
    margin-top: 10px;
    border-radius: 12px !important;
    padding: 30px;
    box-shadow: 0 0 5px black;
}

#conteudoGeral .box-resul2:hover {
    box-shadow: 1px 1px 25px black;
}

#conteudoGeral .box-resul2:nth-child(3n) {
    margin-right: 0;
}

#conteudoGeral .box-resul2 .box_desc {
    width: 68%;
    float: right;
}

#conteudoGeral .box-resul2 .titulo_box {
    display: inline-block;
    font-size: 1.5em;
    font-weight: 900;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    letter-spacing: 0.05em;
}

#conteudoGeral .box-resul2 .img-calc {
    width: 30%;
    float: left;
    margin-top: 7%;
}

#conteudoGeral .box-resul2 .nota_box {
    display: inline-block;
    font-size: 1.3em;
    text-align: justify;
}

#conteudoGeral .box-resul2 .nota_box b {
    font-size: 1.5em;
    font-weight: bolder;
}

.cursor {
    cursor: pointer;
}

.disabled {
    display: none !important;
}

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

.clearfix {
    clear: both;
}

.alert {
    border-radius: 12px;
}

.select2-container .select2-choice .select2-arrow {
    border-left: 1.5px solid #aaa !important;
}

.select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
    background: none !important;
}

#conteudoGeral .formulario .col-md-12 div:last-child {
    clear: both;
}

.btn{
    box-shadow: 1px 1px 3px black;
}

.btn:hover{
    box-shadow: none;
}