*{
    font-family: Raleway,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
    text-rendering: optimizeLegibility;
}
.faixaTop{
    background-color: #fff;
    border-bottom: 8px solid #346786;
}
.logoUnesp{
    text-align: center;
    margin: 10px;
}
.logoUnesp img{
    width: 250px;
    margin: 20px;
}
.imgTop{
    height: 198px;
    padding: 3px;
}
#ImgETop{
    border-radius: 0 0 60% 0;
    border-right: 10px solid #bebebe;
}
#ImgDTop{
    border-radius: 0 0 0 60%;
    border-left: 10px solid #bebebe;
}
.CND-título{
    display: flex!important;
    justify-content: space-between!important;
}
.bg_cnd {
    background: #2ca7e3; /* fallback for old browsers */
    background: -webkit-radial-gradient(top left, #4de3fd, #36a2d8); /* Chrome 10-25, Safari 5.1-6 */
    background: -moz-radial-gradient(top left, #4de3fd, #36a2d8);
    background: radial-gradient(to bottom right, #4de3fd, #36a2d8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/*--------Button e Select--------*/
.btn-color {
    background: #000;
    color: #FFF;
    border: 5px solid #999;
    border-radius: 12px;
} 
.btn-color:hover {
    background: #244b64;
    color: #FFF;
}
.btn-info{
    align-items: center;
    background-color: #000;
    border: 5px solid #999;
    border-radius: 12px;
    /*display: flex;*/
    text-align: center;
    flex-shrink: 0;
    justify-content: center;
    color: #fff;
}
.btn-info:hover{
    background-color: #244b64;
    border-color: #999;
    color: #fff;
}
.btn-info:active{
    background-color: #1b384b;
    border-color: #fff;
}
.btn-radio{
    background-color: #fff;
    border: 5px solid #346786;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    margin: auto; 
}
.btn-radio h6{
    font-weight: bold;
    margin: auto;
    padding: 10px 10px 10px 25px;
}
.btn-radio:hover{
    background-color: #346786;
    color: #fff;
}
input:checked + .btn-radio{
    background-color: #000;
    color: #fff;
}
.btn-radio .fa-check{
    color:#fff;
    visibility: hidden;
}
input:checked + .btn-radio .fa-check{
    visibility: visible;
}
.faixa-prod .form-floating{
    border: 5px solid #999;
    border-radius: 12px;
    outline: 0;
}
.faixa-prod .form-floating .form-select{
    font-weight: bold;
    
}
.form-floating .select-floating{
    width: 100%;
    z-index: 0;
}
/*--------card--------*/
.card-sombra {
    box-shadow: 2px 2px 5px #346786;
    transition: .3s linear all;
}
.card-sombra:hover{
box-shadow: 3px 3px 10px #346786;
transition: .3s linear all;
cursor: pointer;
}
.card{
    border: 0;
}
.card-header-input, .card-header-output{
    background-color: #e2e2e2;
}
.card-body-input, .card-body-output{
    border-top: 15px solid #6c757d;
    border-bottom: 5px solid #bebebe;
    background-color: #fff;
}
.card-footer{
    background-color: #e2e2e2;
}
/*--------formulário--------*/
.formulario{
    background-color: #7ab6d4;
    padding: 30px;
    border: 8px solid #fff;
}
.form-campo{
    padding-bottom: 15px;
}
.label-form{
    font-weight: bold;
}
/*--------footer--------*/
.footer-area{
    color: #fff;
    /*background-color: #346786;*/

    background: #346786; /* fallback for old browsers */
    background: -webkit-radial-gradient(top left, #346786, #244b64); /* Chrome 10-25, Safari 5.1-6 */
    background: -moz-radial-gradient(top left, #346786, #244b64);
    background: radial-gradient(to bottom right, #346786, #244b64); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    display: flex;
    justify-content: center;
    padding: 20px;
}
.footer-area img{
    -webkit-filter: drop-shadow(5px 5px 5px #122531);
    filter: drop-shadow(5px 5px 5px #122531);
    height: auto;
    width: 150px;
}
/*-------gráficos-------*/
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.apexcharts-tooltip {
    display: none !important;
}

/*--------Índices--------*/
.índices-CND{ 
    display: grid;
    grid-gap: 15px;
    justify-content: center;
    padding: 30px 20px;
}
.gráficos-CND{
    padding: 0 40px;
}
.gráficos-CND #gRadar{
    width: 45%;
}
.gráficos-CND #gBarra{
    width: 53%;
}
.índice{
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
}
/*----IN----*/
.IN::before{ 
    color: #000; 
    content: "IN:";
    margin-right: 10px;
}
.IN{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 1;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IP----*/
.IP::before{ 
    color: #000; 
    content: "IP:"; 
    margin-right: 10px;
}
.IP{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 1;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IK----*/
.IK::before{ 
    color: #000; 
    content: "IK:"; 
    margin-right: 10px;
}
.IK{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 1;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----ICa----*/
.ICa::before{ 
    color: #000; 
    content: "ICa:"; 
    margin-right: 10px;
}
.ICa{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 1;
    grid-column: 4;
    justify-content: center;
    margin-right: 10px;
}
/*----IMg----*/
.IMg::before{ 
    color: #000; 
    content: "IMg:"; 
    margin-right: 10px;
}
.IMg{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IS----*/
.IS::before{ 
    color: #000; 
    content: "IS:"; 
    margin-right: 10px;
}
.IS{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 2;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IB----*/
.IB::before{ 
    color: #000; 
    content: "IB:"; 
    margin-right: 10px;
}
.IB{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 2;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----ICu----*/
.ICu::before{ 
    color: #000; 
    content: "ICu:"; 
    margin-right: 10px;
}
.ICu{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 2;
    grid-column: 4;
    justify-content: center;
    margin-right: 10px;
}
/*----IFe----*/
.IFe::before{ 
    color: #000; 
    content: "IFe:"; 
    margin-right: 10px;
}
.IFe{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 3;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IMn----*/
.IMn::before{ 
    color: #000; 
    content: "IMn:"; 
    margin-right: 10px;
}
.IMn{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 3;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IZn----*/
.IZn::before{ 
    color: #000; 
    content: "IZn:"; 
    margin-right: 10px;
}
.IZn{
    background-color: #e2e2e2;
    display: flex;
    font-size: 20px;
    grid-row: 3;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----CND----*/
.CND-r2::before{
    font-size: 20px;
    content: "CND-r²:";
}
.CND-r2{
    background-color: #1a4d6f;
    color: #fff;
    display:grid;
    font-size: 40px;
    grid-row: 1 / 4;
    grid-column: 5 / 7;
    justify-content: center;
}
.CND-r2::after{
    font-size: 16px;
    content: "(Compositional Nutrition Diagnosis)"
}
/*--------*/
.índice_negativo{
    color: #b80f29;
}
.índice_negativo::after{
    content: " ▼";
}

.índice_positivo{
    color: #0a4e10;
}
.índice_positivo::after{
    content: " ▲";
}

.índice_nulo::after{
    color: #000;
    content: " …";
}

/*--------Índices relatório--------*/
.índices-CND-l{ 
    display: grid;
    grid-gap: 15px;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}
/*----IN----*/
.IN-l::before{ 
    color: #000; 
    content: "IN:";
    font-weight: bold;
    margin-right: 10px;
}
.IN-l{
    display: flex;
    grid-row: 1;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IP----*/
.IP-l::before{ 
    color: #000; 
    content: "IP:"; 
    font-weight: bold;
    margin-right: 10px;
}
.IP-l{
    display: flex;
    grid-row: 1;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IK----*/
.IK-l::before{ 
    color: #000;
    content: "IK:";
    font-weight: bold; 
    margin-right: 10px;
}
.IK-l{
    display: flex;
    grid-row: 1;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----ICa----*/
.ICa-l::before{ 
    color: #000; 
    content: "ICa:";
    font-weight: bold;
    margin-right: 10px;
}
.ICa-l{
    display: flex;
    grid-row: 1;
    grid-column: 4;
    justify-content: center;
    margin-right: 10px;
}
/*----IMg----*/
.IMg-l::before{ 
    color: #000; 
    content: "IMg:";
    font-weight: bold; 
    margin-right: 10px;
}
.IMg-l{
    display: flex;
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IB----*/
.IB-l::before{ 
    color: #000; 
    content: "IB:";
    font-weight: bold; 
    margin-right: 10px;
}
.IB-l{
    display: flex;
    grid-row: 2;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IS----*/
.IS-l::before{ 
    color: #000; 
    content: "IS:";
    font-weight: bold; 
    margin-right: 10px;
}
.IS-l{
    display: flex;
    grid-row: 2;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----ICu----*/
.ICu-l::before{ 
    color: #000; 
    content: "ICu:";
    font-weight: bold;
    margin-right: 10px;
}
.ICu-l{
    display: flex;
    grid-row: 2;
    grid-column: 4;
    justify-content: center;
    margin-right: 10px;
}
/*----IFe----*/
.IFe-l::before{ 
    color: #000; 
    content: "IFe:";
    font-weight: bold;
    margin-right: 10px;
}
.IFe-l{
    display: flex;
    grid-row: 3;
    grid-column: 1;
    justify-content: center;
    margin-right: 10px;
}
/*----IMn----*/
.IMn-l::before{ 
    color: #000; 
    content: "IMn:";
    font-weight: bold;
    margin-right: 10px;
}
.IMn-l{
    display: flex;
    grid-row: 3;
    grid-column: 2;
    justify-content: center;
    margin-right: 10px;
}
/*----IZn----*/
.IZn-l::before{ 
    color: #000; 
    content: "IZn:";
    font-weight: bold;
    margin-right: 10px;
}
.IZn-l{
    display: flex;
    grid-row: 3;
    grid-column: 3;
    justify-content: center;
    margin-right: 10px;
}
/*----CND----*/
.CND-r2-l::before{
    font-size: 20px;
    content: "CND-r²:";
}
.CND-r2-l{
    background-color: #e3e3e3;
    border-color: 2px solid #999;
    color: #000;
    display:grid;
    font-size: 35px;
    font-weight: bold;
    grid-row: 1 / 4;
    grid-column: 5 / 7;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
}
.CND-r2-l::after{
    font-size: 12px;
    content: "(Compositional Nutrition Diagnosis)"
}

/*--------mensagens--------*/
.condição{
    background-color: #cad8e0;
    color: #305e7a;
    font-size: 20px;
    border-radius: 8px;
    font-weight: bold;
    padding: 20px;
    margin: 30px 20px;
}
.msg-att::before{
    content: "🌿☘️ ";
}
.msg-att{
    background-color: #d0f0d1;
    border-radius: 8px;
    color:#174926;
    font-weight: bold;
    font-size: 20px;
    margin: 30px 20px;
    padding: 20px;
}
.msg-att::after{
    content: " 🍃🍀";
}
/*------------------------*/
.msg-err::before{
    color: #b80f29;
    content: "⛔ Atenção: ";
}
.msg-err{
    background-color: #edc9c9;
    border-radius: 8px;
    font-weight: bold;
    font-size: 20px;
    margin: 30px 20px;
    padding: 20px;
}
/*------------------------*/
.msg-edit::before{
    content: "⚠️ ";
}
.msg-edit{
    background-color: #dad1b7;
    border-radius: 8px;
    color:#493e17;
    font-weight: bold;
    font-size: 20px;
    margin: 30px 20px;
    padding: 20px;
}
.msg-edit::after{
    content: " 📝";
}

/*--------referência--------*/
.referencia-grid{
    display: flex;
}
.referencia-img{
    height: 100px;
    width: auto;
}
.referencia{
    border-top: 8px solid #346786;
    text-align: center;
    color: #346786;
    padding: 20px;
    font-weight: bold;
}

/*--------table--------*/
.table-nutrientes{
    justify-content: center;
    text-align: center;
    /*margin: auto;*/
}
.table-nutrientes .macro{
    border: 9px solid #487172;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
}
.table-nutrientes .micro{
    border: 9px solid #78888c;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
}
.table-nutrientes .nutri{
    text-align: center;
    font-weight: bold;
    padding: 15px 0 5px 0;
}
.table-nutrientes div{
    padding: 0;
}
.table-nutrientes .form-control{
    text-align: center;
    font-weight: bold;
    font-size: large;
    outline: 4px solid #122531;
}
.table-nutrientes .form-control:focus{
    outline: 8px solid #122531;
}
.form-floating .nutri-floating{
    width: 100%;
    font-weight: bold;
    z-index: 0;
}
/*----------------------------------------------*/
/*-------------------Relatório------------------*/
/*----------------------------------------------*/
.relatório{
    overflow: auto;
}
.relatório-A4{
    width: 210mm;
    margin: 0;
}
.card-form{
    border: 2px solid #e3e3e3;
}
.relatório-h{
    height: 0;
    visibility: hidden;
    overflow-y: hidden;
}
.refer_rel{
    break-after: page;
}
#refer_rel{
    font-size: 10px;
}
@media screen {
    #printSection {
       display: none;
    }
}
@media print {
    body > *:not(#printSection) {
       display: none;
    }
    #printSection, #printSection * {
        visibility: visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}
/*----------------------------------------------*/
/*----------------Responsividade----------------*/
/*----------------------------------------------*/
@media only screen and (max-width: 1200px) {
    .índice{ padding: 15px 20px;}
    .gráficos-CND{
        padding: 0px;
    }
    .gráficos-CND #gRadar{
        width: 50%;
    }
    .gráficos-CND #gBarra{
        width: 50%;
    }
}

@media screen and (max-width: 993px) {
    #ImgETop, #ImgDTop {
        width: 0;
        visibility: hidden;
    }

    .gráficos-CND #gRadar{
        width: 100%;
    }
    .gráficos-CND #gBarra{
        width: 100%;
    }

    .faixa-prod{ padding-bottom: 15px; }
    .IN{ grid-row: 1; grid-column: 1; }
    .IP{ grid-row: 1; grid-column: 2; }
    .IK{ grid-row: 1; grid-column: 3; }
    .ICa{ grid-row: 2; grid-column: 1; }
    .IMg{ grid-row: 2; grid-column: 2; }
    .IS{ grid-row: 2; grid-column: 3; }
    .IB{ grid-row: 3; grid-column: 1; }
    .ICu{ grid-row: 3; grid-column: 2; }
    .IFe{ grid-row: 4; grid-column: 1; }
    .IMn{ grid-row: 4; grid-column: 2; }
    .IZn{ grid-row: 5; grid-column: 1; } 
    .CND-r2{ grid-row: 3 / 6; grid-column: 3; }

}

@media screen and (max-width: 770px) {
    .CND-título{
        display:block!important;
        text-align: center!important;
    }
    .CND-título .CND-nome{
        padding-bottom: 20px;
    }
    .btn1{ padding-bottom: 15px; }
    .btn2{ padding-top: 15px; }
    
    .IN{ grid-row: 1; grid-column: 1; }
    .IP{ grid-row: 1; grid-column: 2; }
    .IK{ grid-row: 2; grid-column: 1; }
    .ICa{ grid-row: 2; grid-column: 2; }
    .IMg{ grid-row: 3; grid-column: 1; }
    .IS{ grid-row: 3; grid-column: 2; }
    .IB{ grid-row: 4; grid-column: 1; }
    .ICu{ grid-row: 4; grid-column: 2; }
    .IFe{ grid-row: 5; grid-column: 1; }
    .IMn{ grid-row: 5; grid-column: 2; }
    .IZn{ grid-row: 6; grid-column: 1; } 
    .CND-r2{ grid-row: 7; grid-column: 1 / 3; }
    
    .card-footer{
        display:block!important;
        text-align: center;
    }
}