﻿@media only screen and (max-width: 1575px) {
    .form-container {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 376px) {
    .selected-culture > a {
        width: 45px;
    }
}

@media only screen and (max-width: 800px) {
    .phone-container {
        grid-column: span 16 !important;
    }
}

@media only screen and (min-width:751px) and (max-width: 1400px) {

    .page {
        margin: 0;
    }

    .no-truncate {
        white-space: break-spaces !important;
    }

    .form-container {
        margin: 0 !important;
        padding: 50px;
    }

    .sm-grid-item {
        grid-column: span 8;
    }

    .small-grid-item {
        grid-column: span 8 !important;
    }

    .medium-grid-item {
        grid-column: span 8;
    }

    .larger-grid-item {
        grid-column: span 8;
    }

    .large-grid-item {
        grid-column: span 8;
        width: 100%;
    }

    .l-grid-item {
        grid-column: span 8;
        width: 100%;
    }

    .xl-grid-item {
        grid-column: span 16;
        width: 100%;
    }

    .xxl-grid-item {
        grid-column: span 16;
        width: 100%;
    }

    .tablet-full-row {
        grid-column: span 16 !important;
    }

    .form-section-header {
        margin-right: 10px;
        word-wrap: break-word;
    }

    .form-header {
        justify-content: center;
        margin: 0;
        flex-direction: column;
    }

        .form-header h1 {
            margin-top: 35px;
        }
}

@media only screen and (max-width: 550px) {
    .button-container {
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }

    .button-container > button {
        width:175px;
    }

    .button-container > button:nth-child(2) {
        margin-left: 0 !important;
    }
}


@media only screen and (max-width: 750px) {

    .checkbox-options-list {
        column-count: 1 !important;
    }

    .other-reason-container > div {
        width: 100% !important;
    }

    .container-fluid > div > a > img {
        height: 35px;
    }

    .termination-reason-option-container {
        flex-direction: column;
    }

        .termination-reason-option-container div {
            width: 100% !important;
        }

    .tenant-text-area-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        width: 100%;
    }

        .tenant-text-area-container > div.validation-message {
            margin-left: 50px;
        }

    .form-header {
        flex-direction: column;
        margin-top: 0 !important;
    }

        .form-header > h1 {
            text-align: center !important;
            margin-top: 50px;
        }

    .page {
        margin: 0;
    }

    .form-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 25px;
    }

    .form-confirmation-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-add-section {
        flex-direction: column;
    }

        .form-add-section > button {
            margin-top: 15px;
        }

    .text-area-container {
        width: 100% !important;
    }

    .form-section-container {
        display: flex;
        flex-direction: column;
    }

    .small-grid-item {
        grid-column: span 16 !important;
    }

    .sm-grid-item {
        grid-column: span 16 !important;
    }

    .medium-grid-item {
        grid-column: span 16 !important;
    }

    .larger-grid-item {
        grid-column: span 16 !important;
    }

    .large-grid-item {
        grid-column: span 16 !important;
        width: 100%;
    }

    .l-grid-item {
        grid-column: span 16 !important;
        width: 100%;
    }

    .xl-grid-item {
        grid-column: span 16 !important;
        width: 100%;
    }

    .xxl-grid-item {
        grid-column: span 16 !important;
        width: 100%;
    }

    .full-grid-item {
        grid-column: span 16 !important;
        width: 100%;
    }

    .input-label {
        white-space: inherit !important;
    }

    .subsection-header {
        margin-bottom: 25px;
    }

    .modal-dialog {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .modal-content {
        width: 65% !important;
    }

    .modal-body {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 90px !important;
    }

    .validation-modal-body {
        align-items: center;
        justify-content: center;
        height: 200px;
        padding: 0px 75px !important;
    }

    .validation-modal-body > .loading-modal-text > p {
        margin-left: 0 !important;
        font-size: 14px !important;
    }

    .indicator-container {
        align-items: center !important;
    }

    .modal-success-footer {
        margin-top: 90px !important;
    }

    .loading-modal-text {
        margin-left: 0 !important;
    }

    .form-section-header {
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    .form-field-grid {
        display: flex !important;
        flex-direction: column;
    }

    .submit-button {
        padding: 10px !important;
    }
}

@media only screen and (min-width:641px) and (max-width: 1240px) {
    .small-grid-item {
        grid-column: span 8;
    }

    .page {
        margin: 0;
    }

    .form-container {
        margin: 0;
    }

    .sm-grid-item {
        grid-column: span 8;
    }

    .medium-grid-item {
        grid-column: span 8;
    }

    .larger-grid-item {
        grid-column: span 8;
    }

    .large-grid-item {
        grid-column: span 8;
        width: 100%;
    }

    .l-grid-item {
        grid-column: span 8;
        width: 100%;
    }

    .xl-grid-item {
        grid-column: span 16;
        width: 100%;
    }

    .xxl-grid-item {
        grid-column: span 16;
        width: 100%;
    }

    .tablet-full-row {
        grid-column: span 16 !important;
    }

    .form-section-header {
        margin-right: 10px;
        word-wrap: break-word;
        overflow: auto;
        text-overflow: initial;
        white-space: initial;
        max-width: 125px;
    }

    .form-header {
        justify-content: center;
        margin: 0;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 1.5rem;
    }
}
