@media (max-width: 992px) {

    :root {
        --sidebar-width: 300px;
    }

    aside.sidebar {
        top: 7rem;
        left: 0;
        width: 2.5rem;
        height: 2rem;
    }

    .sidebar.open {
        width: calc(var(--sidebar-width) + 2rem);
        height: calc(100vh - 9rem);
    }

    @media (max-width: 480px) {

        aside.sidebar.open {
            height: calc(100vh - 11rem);
        }
    }

    @media (min-width: 481px) and (max-width: 800px) {

        aside.sidebar.open {
            height: calc(100vh - 10rem);
        }
    }

    .sidebar-toggle {
        position: fixed;
        top: 7.5rem;
        left: 0.5rem;
        display: block;
        background: rgba(255, 255, 255, 0.9) !important;
        border: solid 1px #eee !important;
    }

    .sidebar-toggle {
        padding: 0.15rem 0.3rem 0.2rem !important;
    }

    .sidebar-toggle span.material-icons-sharp {
        padding-right: 1px;
        margin-left: -1px;
    }

    .sidebar.open .sidebar-toggle {
        color: white;
        background: transparent !important;
        border-color: transparent !important;
        z-index: 1;
    }

    .sidebar .sidebar-container {
        display: none;
        height: 100%;
    }

    .sidebar.open .sidebar-container {
        display: block;
    }

    .sidebar.open .sidebar-container {
        display: block;
    }

    .sidebar-titlebar, .sidebar-content {
        padding: 0.6rem 1rem 0.6rem 2.5rem !important;
    }

    .sidebar-content .sidebar-titlebar {
        margin: -.5rem -1rem 0 -2.5rem !important;
    }

    .sidebar .nav-link {
        margin: 0 -1rem 0 -3rem;
        padding: .4rem 0 0.4rem 3rem;
    }

    section.content {
        padding: 2.5rem 0;
        background: white;
    }

    aside.sidebar ~ section.content .content-container {
        padding: 1rem;
    }

    th.column-text {
        width: auto !important;
    }

    .tire-grid {
        width: calc(100% + 1rem);
    }

    .tire-grid .tile-container {
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    .tire-page {
        width: 100%;
        padding-left: 1rem !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 481px) and (max-width: 800px) {

    main, section.content {
        bottom: 3rem;
    }

    footer {
        height: 3rem;
    }

    footer .block1, footer .block2 {
        display: block;
    }

    footer .separator2 {
        display: none;
    }
}

@media (max-width: 480px) {

    aside.sidebar ~ section.content .content-container {
        padding: 1rem 0.5rem;
    }

    main, section.content {
        bottom: 4rem;
    }

    footer {
        height: 4rem;
    }

    footer .block1, footer .block2, footer .block1-1, footer .block1-2 {
        display: block;
    }

    footer .separator1, footer .separator2, footer .separator3 {
        display: none;
    }

    .hide-mobile {
        display: none;
    }
}

@media (max-width: 699px) {
    form > div.row:not(.form-buttons), form > div.row:not(.form-buttons) > div[class^="col"] {
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    form > div.row:not(.form-buttons) {
        margin-bottom: 0 !important;
    }

    form > div.row:not(.form-buttons) > div[class^="col"] {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 419px) {
    form > div.row > div[class^="col"] > div.row, form > div.row > div > div.row > div[class^="col"] {
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    form > div.row > div[class^="col"] > div.row {
        margin-bottom: 0 !important;
    }

    form > div.row > div > div.row > div[class^="col"] {
        margin-bottom: 1rem !important;
    }

    div[class^="col"] {
        margin-top: 0 !important;
    }
}