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

/*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: 10px 10px 0px 0px !important;
}
.coluna-valor-inferior {
    border-radius: 0px 0px 10px 10px !important;
}

/*CARD TEMPERATURAS*/
.small-box {
    width: 250px;
}

.widget-user-header {
 	height: 2rem !important;
 	padding: 0rem !important;
 	border-radius: 25px 25px 0px 0px !important;
}
 
.card-footer {
 	padding: 0px !important;
 	border-radius: 0px 0px 25px 25px !important;
 	height: 7rem !important;
}

.fonte10 {
	font-size: 10px;
}

.fonte14 {
    font-size: 18px;
}

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

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

.fonte11 {
	font-size: 0.90em; 
}

#radioOptions .form-check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.5rem 1.5rem;
}

.form-check-input {
    margin: 0;
}

.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;
    transition: border-color .15s ease-in-out;
    outline: none;
}

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

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

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

.carousel-item {
    box-shadow: none;
}

.controle-carrossel .carousel-control-prev-icon {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23012e4d' 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: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23012e4d' 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: 14px !important;
    height: 14px !important;
    border-radius: 100%;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #012e4d;
}

/* Restringir a área de clique do controle do carrossel apenas ao ícone */
#carouselExampleIndicators .carousel-control-prev,
#carouselExampleIndicators .carousel-control-next {
    width: auto; /* don't stretch full height */
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem; 
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
}

/* Reativar os eventos de ponteiro apenas no elemento do ícone. */
#carouselExampleIndicators .carousel-control-prev-icon,
#carouselExampleIndicators .carousel-control-next-icon {
    pointer-events: auto;
    width: 2rem;
    height: 2rem;
}

/* Garantir tamanho adequado da área de toque em dispositivos móveis, mesmo quando visualmente pequeno */
@media (pointer: coarse) {
    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        width: 3rem;
        height: 3rem;
    }
}

.breaking_news {
    float: left;
    width: 100%;
    font-size: 16px;
}

marquee {
    height: 50px;
    border-radius: 5px;
}

.alert {
    color: #000;
    float: left;
    width: 900px;
}

/* Permite a rolagem horizontal */
.tabela-rolavel {
  overflow-x: auto;
}

/*
.controle-carrossel .carousel-control-prev {
    left: -110px;
    border-bottom: 0;
    font-size: 40px;
    color: #444;
}
 
.controle-carrossel .carousel-control-next {
    right: -110px;
    border-bottom: 0;
    font-size: 40px;
    color: #444;
}

*/
.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: 2800px) {
    .justify-desktop-responsive {
        text-align: center !important;
    }
}

@media only screen and (max-width: 992px) {
    .small-box {
        width: 200px;
    }
    .small-box h3 {
        font-size: 1.6rem;
    }
    .carousel-control-prev {
        left: -30px;
    } 
    .carousel-control-next {
        right: -30px;
    }
    .margin-estatistica {
        margin-left: 1.5rem !important;
    }
    .col-media-mensais {
        -webkit-flex: 0 0 90%;
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }
}

@media only screen and (max-width: 767px) {
    .small-box .icon {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    .pt-4 {
        padding-top: 1rem !important;
    }
    p {
        justify-content: center;
        font-size: 12px;
    }
    .titulo-principal {
        font-size: 14px;
    }
    .linhas {
        justify-content: center;
    }
    .titulo-valores-extremos {
        font-size: 14px;
    }
    .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 !important;
    }
    #textAverage {
        margin-top: 5px;
    }
    .carousel-control-prev {
        left: -35px;
        top: 280px;
    } 
    .carousel-control-next {
        right: -35px;
        top: 280px;
    }
    .controle-carrossel .carousel-control-prev-icon {
        width: 25px;
        height: 25px;
    }
    .controle-carrossel .carousel-control-next-icon {
        width: 25px;
        height: 25px;
    }
}

@media only screen and (max-width: 2000px) { 
    .table {
        font-size: 13px;
    }
}

@media only screen and (max-width: 586px) {
    .small-box {
        width: 250px
    }
    .justify-content-between {
        justify-content: center !important;
    }
    .carousel-control-prev {
        left: -30px;
        top: 350px;
    } 
    .carousel-control-next {
        right: -30px;
        top: 350px;
    }
    .card-grafico {
        box-shadow: none;
    }
}

@media only screen and (max-width: 562px) {
    #radioOptions {
        display: grid;
        justify-content: center; /* Centraliza os itens horizontalmente */
        grid-gap: 10px; /* Adiciona espaço entre os itens */
    }
    .fonte11 {
        font-size: 0.9rem;
    }
    .ml-4 {
        margin-left: 0.5rem !important;
    }
    .mr-4 {
        margin-right: 0.5rem !important;
    }
    .m-3 {
        margin: 1rem 0rem !important;
    }
    .controle-carrossel .carousel-indicators li {
        width: 10px !important;
        height: 10px !important;
    }
    .carousel-indicators {
        margin-left: 0;
        margin-right: 0;
    }
    .col-text-estatistica {
        -webkit-flex: 0 0 100% !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 430px) {
    .col-valores-extremos,
    .col-elemento-meteorologico-mobile {
        -webkit-flex: 0 0 91.666667% !important;
        -ms-flex: 0 0 91.666667% !important;
        flex: 0 0 91.666667% !important;
        max-width: 91.666667% !important;
    }
}