/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

.body-alertas {
    min-width: 390px;
    max-width: 100%;
    overflow-x: hidden !important;
}

.form-select-estacoes {
    margin-top: -2px;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .225rem 2.25rem .225rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem top .70rem;
    background-size: 16px 12px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    outline: none;
}

.form-select-estacoes:focus {
    box-shadow: none;
}

/*CORES*/
/* sensacao termica */
.heatIndexNenhum {
    background-color: #6c8953 !important;
    color: whitesmoke;
}

.heatIndexAtencao {
    background-color: #ffc73e !important;
    color: whitesmoke;
}

.heatIndexMAtencao {
    background-color: #e47200 !important;
    color: whitesmoke;
}

.heatIndexPerigo {
    background-color: #e71e24 !important;
    color: whitesmoke;
}

.heatIndexPExtremo {
    background-color: #810100 !important;
    color: whitesmoke;
}

/*geada*/
.frostFort {
    background-color: #22647e !important;
    color: whitesmoke;
}

.frostMedia {
    background-color: #4896b4 !important;
    color: whitesmoke;
}

.frostFraca {
    background-color: #9ab2c1 !important;
    color: whitesmoke;
}

/*baixa umidade*/
.humidityNenhum {
    background-color: #6c8953 !important;
    color: whitesmoke;
}

.humidityAtencao {
    background-color: #ffc73e !important;
    color: whitesmoke;
}

.humidityAlerta {
    background-color: #e47200 !important;
    color: whitesmoke;
}

.humidityEmergencia {
    background-color: #810100 !important;
    color: whitesmoke;
}

/*ventos*/
.wCalmo {
    background-color: #acc6dd !important;
    color: whitesmoke;
}

.wQCalmo {
    background-color: #95d5f0 !important;
    color: whitesmoke;
}

.wBrisa { 
    background-color: #00afef !important;
    color: whitesmoke;
}

.wLeve {
    background-color: #549fd1 !important;
    color: whitesmoke;
}

.wModerado {
    background-color: #0163a4 !important;
    color: whitesmoke;
}

.wForte {
    background-color: #f7c703 !important;
    color: whitesmoke;
}

.wMForte {
    background-color: #f57c4c!important;
    color: whitesmoke;
}

.wFortissimo {
    background-color: #e55e27!important;
    color: whitesmoke;
}

.wVentania {
    background-color: #fa2a0f!important;
    color: whitesmoke;
}

.wVendaval {
    background-color: #dd2027!important;
    color: whitesmoke;
}

.wTornado {
    background-color: #810100!important;
    color: whitesmoke;
}
/*fim cores*/

/*CONTAINER*/
.titulo-principal {
    font-size: 22.284px;
}

.tamanho-container {
    width: -webkit-fill-available !important;
}

.tamanho-fonte-titulo-estacao {
	font-size: 20px;
}

/* CARD VALORES EXTREMOS*/
.coluna-valor-superior {
    border-radius: 5px 5px 0px 0px !important;
}

.coluna-valor-inferior {
    border-radius: 0px 0px 10px 10px !important;
}

/*CARD ESCOLHA ALERTAS*/
.widget-user-header {
    height: 2rem !important;
    padding: 0rem !important;
    border-radius: 5px 5px 0px 0px !important;
}

.card-footer {
    padding: 0px !important;
    border-radius: 0px 0px 5px 5px !important;
    height: 7rem !important;
}

.card {
   border-color: #f8f8fc !important;
}

.radius-boletins-titulo {
    border-radius: 15px 22px 22px 15px !important;
}

.fonte10 {
   font-size: 10px;
}

.font-alert {
    font-size: 0.90em;
}

.fonte16 {
   font-size:22px !important;
}

.fonte-opacity-30 {
    opacity: 30%;
}

.text-grafh-end {
    font-size: 0.9rem;
}

/* CARD ELEMENTO METEOROLÓGICO */
.card-width {
	max-width: 60rem;
}

/* GRÁFICO */
.centralizar-texto-coluna {
    text-align: center !important;
    flex-direction: row !important;
}

.fonte-titulo-grafico{ 
    font-size: 25px;
}

.controle-carrossel .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
} 

.controle-carrossel .carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.controle-carrossel .carousel-indicators li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #c593d8;
    border-radius: 50%;
}

.resolucao-grafico {
    width: 100% !important;
    height: 30rem;
}

/* BUSCA ESTAÇÕES */
.borda-busca-estacoes {
    border-radius: 10px 10px 10px 10px;
    color: whitesmoke;
    font-size: 14px;
}

.radius-botao-busca {
    border-radius: 10px 10px 10px 10px;
    background: #3a74b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #293564, #3a74b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #293564, #3a74b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: rgb(13, 82, 4);
}

@media only screen and (min-width: 2200px) {
    #heatIndexInfo {
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1670px) {
    .card-width {
	    max-width: 69rem;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 2200px) {
    .col-desktop-alert {
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
}

@media only screen and (min-width: 1500px) {
    .radius-boletins-titulo {
        border-radius: 5px !important;
    }
}

@media (max-width: 992px) {
    #radioOptions {
        margin-left: 50px;
    }
    .col-8 {
        flex: 0 0 92% !important;
        max-width: 92% !important;
    }
}

@media only screen and (min-width: 768px) {
    .temp-mobile {
        display: none;
    }
    .geada-mobile {
        display: none;
    }
    .ar-mobile {
        display: none;
    }
    .ventos-mobile {
        display: none;
    }
    .row-alert {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -7.5px;
        margin-left: -7.5px;
    }
}

@media only screen and (max-width: 767px) {
    .temp-desktop {
        display: none;
    }
    .geada-desktop {
        display: none;
    }
    .ar-desktop {
        display: none;
    }
    .ventos-desktop {
        display: none;
    }
    #radioOptions {
        display: grid !important;
        justify-content: center !important;
    }
    .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    .fs-4 {
        font-size: 14px !important;
    }
    .imagem-sol {
        width: 20px;
        height: 20px;
    }
    .fonte-subtitulo {
        font-size: 13px;
    }
    .fonte11 {
        font-size: 12px !important; 
    }
    .font-alert {
        font-size: 0.9rem;
    }
    p {
        justify-content: center;
        font-size: 12px;
    }
    .titulo-principal {
        font-size: 14px;
    }
    .linhas {
        justify-content: center;
    }
    .alinhamento-card {
        font-size: 11px;
    }
    .titulo-cabecalho-grafico {
        font-size: 12px;
    }
    .borda-busca-estacoes {
        font-size: 11px;
    }
    .resolucao-grafico {
        height: 20rem;
    }
    table {
        font-size: 11px;
    }
    .radius-boletins-titulo { 
        border-radius: 10px 15px 15px 10px !important;
    }
    #radioOptions {
        margin-left: 0;
    }
}

@media only screen and (max-width: 440px) {
    .text-grafh-end {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 390px) {
    .body-alertas {
        overflow-x: auto !important;
    }
}

.tabelaTelaInteira {
    width: 100% !important;
}

.alertImg {
    width: 20px;
    height: 20px;
}

.fontAlert {
    font-weight: bold;
    opacity: 70%;
    font-size: 24px;   
}