/*
 * Responsive adjustments for the legacy Bootstrap 3 layout.
 * Desktop remains controlled by the original stylesheets and inline styles.
 */

img,
video,
canvas,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}

.gm-style img {
    max-width: none;
}

.form-control {
    max-width: 100%;
}

.ocorrencia-imagem-popover {
    width: 276px;
    max-width: calc(100vw - 30px);
}

.ocorrencia-imagem-popover .popover-content img {
    position: static !important;
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
    }

    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .panel-body > [class*="col-md-"],
    .panel-body > [class*="col-lg-"] {
        height: auto !important;
        max-height: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .navbar-fixed-top .navbar-collapse {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }

    .dropdown-submenu > .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin: 0 0 0 15px;
        background-color: #222;
        border: 0;
        box-shadow: none;
    }

    .dropdown-submenu > .dropdown-menu > li > a {
        color: #ddd;
        white-space: normal;
    }

    #rootwizard > .navbar {
        min-height: 0;
        margin-bottom: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #rootwizard > .navbar .navbar-inner {
        min-width: max-content;
    }

    #rootwizard > .navbar ul {
        display: flex;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    #rootwizard > .navbar li {
        flex: 0 0 160px;
        width: 160px !important;
    }

    #rootwizard > .navbar li > a {
        min-height: 80px;
        padding: 14px 12px !important;
        white-space: normal;
    }

    .table.table-condensed,
    .table.table-striped {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table.table-condensed > thead,
    .table.table-condensed > tbody,
    .table.table-condensed > tfoot,
    .table.table-striped > thead,
    .table.table-striped > tbody,
    .table.table-striped > tfoot {
        width: max-content;
        min-width: 100%;
    }

    .table th,
    .table td {
        overflow-wrap: normal;
        word-break: normal;
    }

    .input-daterange.input-group {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }

    .input-daterange.input-group .form-control {
        flex: 1 1 120px;
        width: auto;
    }

    .input-daterange.input-group .input-group-addon {
        display: flex;
        align-items: center;
        width: auto;
    }

    div[id^="resultReport"],
    div[id^="resultResumo"],
    div[id^="divResumo"],
    div[id*="Grafic"],
    div[id*="grafic"] {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #setenderecoMaps,
    #setenderecoMapsCalor,
    #setenderecoMapsCritico,
    #mapsacidente,
    #mapsbenefix {
        width: 100% !important;
        height: 50vh !important;
        min-height: 280px !important;
        max-height: 480px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .modal-dialog,
    .modal-lg,
    .modal-sm {
        width: auto;
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        white-space: normal;
    }

    .pagination > li > a,
    .pagination > li > span {
        margin-bottom: 4px;
    }

    .acessarDLL {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 50px !important;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 21px;
    }

    h3 {
        font-size: 19px;
    }

    .container[style*="padding: 40px 0"],
    .container[style*="padding: 10px 0"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .container > [class*="col-"][style*="padding: 40px"],
    .container > [class*="col-"][style*="padding: 20px"] {
        padding: 20px 15px !important;
    }

    .row > [class*="col-sm-"],
    .panel-body > [class*="col-sm-"] {
        height: auto !important;
        max-height: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .navbar-brand {
        max-width: calc(100% - 65px);
    }

    .navbar-brand img {
        max-width: 180px;
    }

    .btn,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 40px;
        white-space: normal;
    }

    .form-control {
        min-height: 40px;
        font-size: 16px;
    }

    .table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table > thead,
    .table > tbody,
    .table > tfoot {
        width: max-content;
        min-width: 100%;
    }

    textarea.form-control {
        height: auto;
    }

    .btn-toolbar,
    .form-actions,
    .modal-footer {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-toolbar .btn,
    .form-actions .btn,
    .modal-footer .btn {
        flex: 1 1 auto;
        margin: 0 !important;
    }

    .route-home .row-eq-height,
    .route-home .row {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .route-home [style*="height: 250px"],
    .route-home [style*="height: 275px"],
    .route-home [style*="max-height: 250px"],
    .route-home [style*="max-height: 350px"],
    .route-home [style*="min-height: 350px"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 20px;
    }

    .route-login .container > .col-md-6 {
        padding: 25px 20px !important;
    }

    .route-login #resultLoaderCaptcha {
        padding-top: 15px !important;
        text-align: center;
    }

    #rootwizard > .navbar {
        overflow: visible;
    }

    #rootwizard > .navbar .navbar-inner {
        min-width: 0;
        width: 100%;
    }

    #rootwizard > .navbar ul {
        width: 100%;
        counter-reset: wizard-step;
        white-space: normal;
    }

    #rootwizard > .navbar li {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        counter-increment: wizard-step;
    }

    #rootwizard > .navbar li > a {
        display: block;
        min-height: 88px;
        padding: 9px 2px 7px !important;
        font-size: 10px !important;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
    }

    #rootwizard > .navbar li > a .wizard-step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: 0 auto 6px;
        border: 2px solid #ffcc00;
        border-radius: 50%;
        color: #222;
        background: #ffcc00;
        font-size: 0 !important;
        font-weight: bold;
        line-height: 1;
    }

    #rootwizard > .navbar li > a .wizard-step-number::before {
        content: counter(wizard-step);
        font-size: 16px;
    }

    #rootwizard > .navbar li > a .wizard-step-label {
        display: block;
        font-size: 0;
        line-height: 1.1;
    }

    #rootwizard > .navbar li > a .wizard-step-label::after {
        content: attr(data-mobile-label);
        font-size: 10px;
    }

    #rootwizard .tab-pane > .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #rootwizard .tab-pane table.table-bordered:not(.table-condensed),
    #rootwizard .tab-pane table.table-bordered:not(.table-condensed) > tbody,
    #rootwizard .tab-pane table.table-bordered:not(.table-condensed) > tbody > tr {
        display: block;
        width: 100% !important;
        min-width: 0;
        overflow: visible;
    }

    #rootwizard .tab-pane table.table-bordered:not(.table-condensed) > tbody > tr > td,
    #rootwizard .tab-pane table.table-bordered:not(.table-condensed) > tbody > tr > th {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        text-align: left !important;
    }

    #rootwizard .tab-pane .form-control[style] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    #rootwizard .tab-pane [class*="col-"] {
        height: auto !important;
        max-height: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    #rootwizard .tab-pane [class*="col-"] + [class*="col-"] {
        margin-top: 8px;
    }

    .panel-body {
        padding: 15px 0;
    }

    .panel-body > [class*="col-"] {
        margin-bottom: 15px;
        padding-top: 0 !important;
        text-align: left !important;
    }

    .panel-body .btn {
        width: 100%;
    }
}

@media print {
    .table {
        display: table;
        overflow: visible;
    }

    .table > thead,
    .table > tbody,
    .table > tfoot {
        width: auto;
        min-width: 0;
    }
}