/* Smartphones antigos em modo retrato */
@media only screen and (max-width: 359px) {
    .navbar-custom .navbar-brand img {
        height: 24px !important;
    }
    .navbar-custom {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        height: 80px !important;
    }
    .search-bar {
        top: calc(5.5rem - 20px) !important;
    }
    .information-container,
    .information-full-container {
        top: 80px !important;
        height: calc(100% - 80px) !important;
    }
    .information-container-quiz {
        height: calc(100dvh - 80px) !important;
        top: 80px !important;
    }
    .tip-title {
        width: 70% !important;
        left: 60% !important;
    }
    .svg-container {
        top: 55% !important;
    }
}
/* Smartphones em modo retrato */
@media only screen and (max-width: 600px) {
    body {
        overflow: auto;
    }

    .px-sm-4-custom {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-custom {
        height: 100px;
    }

    .navbar-routes {
        display: none;
    }

    .navbar-custom .navbar-brand img {
        height: 30px;
        margin: 0;
        padding: 0;
    }

    .navbar-custom {
        padding: 0.8rem;
        padding-top: 0;
    }

    .navbar-brand {
        margin-right: 0.5rem;
    }

    .offcanvas-start {
        max-width: 94%;
    }

    .offcanvas-menu,
    .mobile-close {
        display: block;
    }

    .offcanvas-menu .icon-navbar {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .offcanvas-menu .anos300-dropdown-menu {
        border: 0;
        margin-top: 0.5rem;
        padding: 0 0 0 1.8rem;
        position: static !important;
        transform: none !important;
    }

    .offcanvas-menu .anos300-dropdown-menu .dropdown-item {
        font-size: 1.1rem;
        padding: 0.35rem 0;
        white-space: normal;
    }

    .district-title.big-margin .btn-close {
        position: absolute;
        top: 90px;
        right: 20px;
    }

    .btn-pair .btn-district {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }


    .list-toggle {
        display: block;
        font-size: 1.7rem;
        color: var(--color-district-secondary);
    }

    .search-bar {
        width: 100%;
        top: 5.5rem;
        right: 0;
        margin-top: -10px;
    }

    .search-result {
        width: 100%;
        right: 0;
    }

    #home300 {
        padding-top: 100px;
        padding-bottom: 0;
    }

    .home300-title {
        max-width: none;
        font-size: 2.15rem;
        line-height: 1.1;
    }

    .home300-description {
        font-size: 1rem;
    }

    .home300-logo {
        width: min(85%, 330px);
    }

    .home300-contact {
        padding-top: 2rem !important;
    }

    .home300-section-title h2 {
        font-size: 1.8rem;
    }

    .home300-contact-card {
        border-radius: 14px;
        padding: 1rem;
    }

    .svg-container {
        width: 20rem;
    }

    .footer-custom span {
        font-size: 0.6rem;
    }


    .district-sidebar {
        display: none !important;
    }

    .information-container,
    .information-full-container {
        top: 100px;
        bottom: unset;
        height: calc(100% - 100px);
        width: auto;
        overflow: scroll;
    }

    .district-box {
        height: auto;
        overflow: hidden;
    }

    .navbar-routes .navbar-nav {
        flex-direction: row;
    }

    .border-box.left,
    .border-box.right {
        border-left: none;
        border-right: none;
    }

    .p-5 {
        padding: 1rem !important;
    }

    .big-margin {
        margin-top: 4.5rem !important;
    }

    #content_section_map {
        margin-bottom: 80px;
    }

    .district-mobile-navbar {
        display: flex!important;
        position: absolute;
        width: 100%;
        height: 22rem;
        left: 0;
        margin: 0px;
        padding: 0px;
    }

    .first-box {
        margin-top: 18rem;
    }

    .district-mobile-navbar .district-title-container {
        position: relative;
        width: 100%;
        height: 100px;
        top: -40px;
        margin: 0;
    }

    .align-box{
        position: relative;
        bottom: unset;
    }

    .btn-district.absolute {
        top: -26px;
    }

    .page-title {
        z-index: 1019;
        height: 120px;
    }
    .page-title .title-main {
        padding-top: 20px;
        font-size: 32px;
        margin-bottom: 6px;
    }
    .page-title .crossbar-call {

    }
    .page-title.quiz-title .title-main {
        padding-top: 12px;
        font-size: 28px;
    }


    .crossbar {
        width: 100%;
        top: 98px;
        left: 0;
        margin-left: 20px;
        margin-right: 20px;
    }
    .crossbar .theme-bar {
        width: 75%;
        padding: 8px 20px !important;
        border-radius: 25px;
        font-size: 15px;
        margin-right: 15px; 
        position: relative;
    }
    .crossbar::after {
        right: 29%;
    }

    .crossbar .btn-circle {
        right: 38px;
        position: absolute;
    }

    .crossbar-call {
        top: 4px;
        opacity: .5;
    }

    .information-container-quiz {
        height: calc(100dvh - 100px);
        top: 100px;
        overflow: auto;
    }

    .answer-pack {
        width: 100%;
        top: 58%;
    }
    .answer-pack .unit-value .indicator-value {
        font-size: 32px;
    }
    .answer-pack .indicator-label {
        font-size: 14px;
    }
    .answer-pack .indicator-label hr {
        margin: 0.5rem 20px;
    }
    .answer-pack .unit-value .indicator-unit {
        font-size: 14px;
        line-height: 50px;
    }
    .quiz-img-container .text-overlay {
        font-size: 14px;
    }

    .hide-story {
        font-size: 18px;
        font-weight: 500;
        text-align: justify;
        margin-left: 12px;
        margin-right: 12px;
    }
    .tip-title {
        display: inherit;
    }
}

/* Smartphones em modo paisagem */
@media only screen and (min-width: 601px) and (max-width: 767px) {
    /* Estilos para telas entre 601 e 768 pixels de largura */

    
    .search-bar {
        width: 50%;
        top: 5.5rem;
        right: 0;
    }
    .search-result {
        right: 0;
        width: 50%;
    }
    .tip-title {
        display: inherit;
    }
}

/* Tablets em modo retrato */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    .navbar-custom {
        padding: 1rem;
    }
    .navbar-custom .navbar-brand img {
        height: 55px;
    }

    .svg-container {
        width: 42rem;
        top: 57%;
        touch-action: pan-y pinch-zoom;
    }

    .svg-container-relative {
        width: 15rem;
        margin-top: 0;
    }

    .district-title-container {
        width: 18rem;
    }

    .district-title {
        font-size: 1.5rem;
    }

    .district-info-box {
        font-size: 1rem;
    }

    .big-margin {
        margin-top: 2rem !important;
    }

    .indicator-value {
        font-size: 2rem;
    }

    .indicator-label {
        font-size: 1rem;
    }

    .btn-district {
        font-size: 0.8rem;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    #search_input::placeholder {
        font-size: 0.8rem;
    }

    .search-result {
        top: 117px;
        width: max(30%, 465px);
        right: 0;
    }


    .m-d-top {
        margin-top: 2rem;
    }

    .m-d-bottom {
        margin-bottom: 2rem;
    }

    .search-bar {
        width: 75%;
        top: 5.5rem;
        right: 0;
        width: max(30%, 500px);
        max-width: 60%;
    }
    .list-toggle {
        display: block;
        font-size: 1.7rem;
        color: var(--color-district-secondary);
    }
    .offcanvas-menu, .mobile-close {
        display: block;
    }
    .offcanvas-menu .icon-navbar {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .navbar-custom {
        padding: 1rem;
    }
    .tip-title {
        display: inherit;
    }

}

/* Tablets em modo paisagem */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    .navbar-custom {
        padding: 1rem;
    }

    .list-toggle {
        display: block;
        font-size: 1.7rem;
        color: var(--color-district-secondary);
    }
    .offcanvas-menu, .mobile-close {
        display: block;
    }
    .offcanvas-menu .icon-navbar {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .offcanvas-menu .icon-navbar {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .navbar-custom {
        padding: 1rem;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1440px) {

    .navbar-brand {
        margin-right: 0.8rem;
    }
    .navbar-custom .navbar-brand img {
        height: 60px;
    }

    .icon-navbar,
    .icon-navbar a {
        font-size: 0.8rem;
    }

    .svg-container {
        width: 32rem;
        top: 57%;
    }

    .svg-container-relative {
        width: 15rem;
        margin-top: 0;
    }

    .district-title-container {
        height: 7rem;
        top: 5rem;
    }

    .big-margin {
        margin-top: 3.5rem !important;
    }

    .district-title {
        font-size: 2rem;
    }

    .m-d-top {
        margin-top: 2rem;
    }

    .m-d-bottom {
        margin-bottom: 2rem;
    }

    .indicator-value {
        font-size: 2rem;
    }

    .indicator-label {
        font-size: 1rem;
    }

    .btn-district {
        font-size: 0.8rem;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    #search_input::placeholder {
        font-size: 0.8rem;
    }
}

/* Desktops maiores */
@media only screen and (min-width: 1441px) and (max-width: 1600px) {
    .svg-container {
        width: 35rem;
        top: 55%;
    }

    .big-margin {
        margin-top: 4.2rem !important;
    }

    .svg-container-relative {
        width: 22rem;
    }

    .district-title {
        font-size: 2.2rem;
    }

    .district-title-container {
        height: 5rem;
        top: 5rem;
        
    }
}

@media only screen and (min-width: 1601px) {
    .svg-container {
        width: 45rem;
        left: 50%;
    }
}

/* Qualquer dispositivo abaixo do notebook HD (1366px) */
@media only screen and (max-width: 1365px) {

    .btn-pair .btn-district {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}