/* Minification failed. Returning unminified contents.
(1342,23): run-time error CSS1039: Token not allowed after unary operator: '-vh'
 */
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.invalid {
    background-color: #E97D88;
}

input {
    line-height: 1.5rem;
}

    input[type="radio"] {
        margin: 0px;
    }

.container-padding {
    padding: 1rem;
}

img.disabled {
    opacity: 0.4;
    cursor: default;
}

.mex-label-container {
    display: flex;
    align-items: end;
    margin: auto 0px;
}

::placeholder {
    color: #a0a0a0;
}
/* FIXING KENDO SHIT */
.k-datepicker .k-picker-wrap.k-state-default .k-select,
.k-timepicker .k-picker-wrap.k-state-default .k-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.k-datepicker,
.k-datepicker .k-picker-wrap,
.k-datepicker .k-picker-wrap input,
.k-timepicker,
.k-timepicker .k-picker-wrap {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
}

.k-widget.k-dropdown {
    display: flex;
    min-width: 6rem;
}

    .k-widget.k-dropdown .k-dropdown-wrap {
        display: flex;
        flex-grow: 1;
        background-color: white;
    }

        .k-widget.k-dropdown .k-dropdown-wrap .k-input {
            margin: auto;
        }

.k-datepicker {
    width: auto;
}

.k-autocomplete {
    width: auto;
}
/* MEX INPUT CONTAINER */
.mex-input-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0.25rem 0rem;
    width: 100%;
    align-items: stretch;
}

    .mex-input-container .mex-label {
        margin-bottom: 0.25rem;
    }

    .mex-input-container .mex-textbox,
    .mex-input-container .mex-textarea {
        min-width: 0.1rem;
        border-radius: 5px;
        border: #dbdbdb 1px solid;
        outline: none;
        min-height: 1.6rem;
        transition: box-shadow .15s ease-out;
        color: #676767;
        flex-grow: 1;
    }

        .mex-input-container .mex-textbox:focus,
        .mex-input-container .mex-textarea:focus {
            border-color: #bdbdbd;
            box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
            border-color: #ccc;
        }

        .mex-input-container .mex-textbox:disabled,
        .mex-input-container .mex-textarea:disabled,
        input:disabled,
        textarea:disabled {
            opacity: 1;
            background-color: #efefef;
            color: #a0a0a0;
        }


        .mex-input-container .mex-textbox:enabled:hover:not([readonly]),
        .mex-input-container .mex-textarea:enabled:hover:not([readonly]) {
            border-color: #ccc;
        }

    .mex-input-container.mex-ellipse-container .mex-label-container {
        grid-column: auto / span 3;
    }

@media only screen and (min-width: 426px) {

    .mex-input-container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .mex-input-container .mex-textbox,
        .mex-input-container .mex-textarea {
            width: auto;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            padding-left: 0.5rem;
        }

        .mex-input-container .mex-label {
            text-align: right;
            -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
            margin-right: 0.5rem;
            margin-bottom: 0px;
        }

        .mex-input-container.mex-ellipse-container .mex-label-container {
            grid-column: 1;
        }
}

/* MEX TEXT BOX */
.mex-input-container.mex-textbox-container {
    min-height: 1.5rem;
    display: flex;
    min-width: 1rem;
}

    .mex-input-container.mex-textbox-container .mex-textarea {
        height: 3rem;
    }


/* MEX ELLIPSE */
.mex-input-container.mex-ellipse-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto auto;
    grid-template-columns: 1fr auto auto;
}

    .mex-input-container.mex-ellipse-container .mex-ellipse-autocomplete-container {
        display: flex;
        flex-grow: 1;
    }

    .mex-input-container.mex-ellipse-container .mex-label {
        grid-column: 1 / 3;
    }

    .mex-input-container.mex-ellipse-container .mex-ellipse-text {
        box-sizing: border-box;
        min-height: 28px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        opacity: 1;
    }

    .mex-input-container.mex-ellipse-container .mex-ellipse-button {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        margin-left: 0.5rem;
        padding: 0rem 0.5rem;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
        user-select: none;
        border-radius: 3px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(170, 170, 170);
    }

    .mex-input-container.mex-ellipse-container .mex-ellipse-barcode {
        width: 30px;
        height: 30px;
        margin-left: 0.5rem;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    }


@media only screen and (min-width: 426px) {
    .mex-input-container.mex-ellipse-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: start;
    }
}

/* MEX FILE SELECTOR */
.mex-input-container.mex-file-selector-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
}

    .mex-input-container.mex-file-selector-container .mex-label {
        grid-column: auto / span 2;
    }

    .mex-input-container.mex-file-selector-container .mex-ellipse-text {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .mex-input-container.mex-file-selector-container .mex-ellipse-button {
        margin-left: 0.5rem;
        padding: 0rem 0.5rem;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    }

@media only screen and (min-width: 426px) {
    .mex-input-container.mex-file-selector-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}


/* MEX CHECKBOX */
.mex-checkbox-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0.25rem 0rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .mex-checkbox-container .mex-label {
        margin-left: 0.25rem;
    }

/* MEX GROUP BOX */
.mex-groupbox {
    background-color: #f2f2f2;
    border: 1px solid #999;
    margin: 0.25rem 0rem;
}

    .mex-groupbox .mex-groupbox-header {
        background-color: white;
        border-bottom: 1px solid #999;
        padding: 0.5rem;
    }

    .mex-groupbox .mex-groupbox-content {
        padding: 0.5rem;
    }


/* MEX TABS */
.mex-tabs-container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0rem;
}

.mex-tab-container {
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.mex-tabs-container .mex-tab-header-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    list-style-type: none;
    padding: 0rem;
    margin: 0rem;
    background-color: white;
    border-bottom: 1px solid darkgray;
    border-top: 1px solid darkgray;
}

    .mex-tabs-container .mex-tab-header-bar .mex-tab-header-item {
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        cursor: pointer;
        user-select: none;
    }

        .mex-tabs-container .mex-tab-header-bar .mex-tab-header-item.disabled {
            opacity: 0.5;
            cursor: default;
            background-color: transparent !important;
        }

        .mex-tabs-container .mex-tab-header-bar .mex-tab-header-item:hover {
            background-color: rgba(58, 58, 58, 0.15)
        }

        .mex-tabs-container .mex-tab-header-bar .mex-tab-header-item.selected-tab {
            border: 1px solid blue;
        }

.mex-tabs-container .mex-tab-content {
    height: 100%;
    background-color: whitesmoke;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: auto;
}

/* GENERIC FORM CONTAINER */
.form-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

    .form-container > * {
        flex-shrink: 0;
    }

/* GENERIC FORM ROW */
.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
}

/* REQUEST DETAILS */
.request-details-container {
}

.request-details-tab-container {
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
    grid-template-rows: 1fr auto;
}

    .request-details-tab-container #request-details-tab-content {
        overflow-y: auto;
    }

    .request-details-tab-container .MEXButtonBar_Container {
        -ms-grid-row: 2;
    }

    .request-details-tab-container #request-details-tab-content #asset-image-container {
        align-items: center;
        justify-items: center;
        align-content: center;
        justify-content: center;
    }

        .request-details-tab-container #request-details-tab-content #asset-image-container > img {
            align-self: center;
            justify-self: center;
            max-width: 100%;
        }

.request-response-container {
    display: grid;
    grid-template-columns: 1fr 5rem;
    grid-template-rows: auto auto;
    display: -ms-grid;
    -ms-grid-columns: 1fr 5rem;
    -ms-grid-rows: auto auto;
}

    .request-response-container .response-textarea {
        grid-column: 1 / span 2;
        margin-bottom: 0px;
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

        .request-response-container .response-textarea .mex-textarea {
            border-radius: 5px 5px 0px 0px;
        }

    .request-response-container .post-response-input {
        margin: 0px;
        padding-left: 8.5rem;
        box-sizing: border-box;
        margin-top: -1px;
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

        .request-response-container .post-response-input .mex-textbox {
            border-radius: 0px 0px 0px 5px;
        }

    .request-response-container .mex-security-wrapper {
        margin-top: -1px;
        z-index: 5;
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

        .request-response-container .mex-security-wrapper .mex-button {
            height: 100%;
            border-radius: 0px 0px 5px 0px;
            width: 100%;
            border: 1px #dbdbdb solid;
            background-color: white;
            border-left-color: transparent;
        }

            .request-response-container .mex-security-wrapper .mex-button:hover {
                background-color: #aeaeae40;
            }

            .request-response-container .mex-security-wrapper .mex-button:focus {
                outline: none;
            }

            .request-response-container .mex-security-wrapper .mex-button:active {
                background-color: #6e6e6e40;
            }

#request-details-tab-content .custom-field-grid-container {
    grid-column: auto / span 3;
    -ms-grid-row: 6;
    -ms-grid-column-span: 5;
}

#txtJobDescription,
#txtResponse {
    height: 6rem;
}

#lblRequestedDateTime,
#lblRespondedDateTime {
    text-align: left;
}

@media only screen and (min-width: 426px) {
    #footer-details-container .mex-textbox {
        max-width: 20rem;
    }

    .footer-details-checkbox-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

@media only screen and (min-width: 768px) {
    #request-details-tab-content {
        display: -ms-grid;
        display: grid;
        grid-column-gap: 1rem;
        grid-template-areas: "contact-details extended-details" "response-details response-details" "asset-details asset-image" "work-order-details work-order-details" "footer-details footer-details";
        -ms-grid-rows: (min-content)[5];
        grid-template-rows: repeat(5, -webkit-min-content);
        grid-template-rows: repeat(5, min-content);
    }

    #contact-details-container {
        grid-area: contact-details;
    }

    #extended-details-container {
        grid-area: extended-details;
        max-width: 30rem;
    }

    #request-details-body {
        grid-area: response-details;
    }

    #grpAssetDetails {
        grid-area: asset-details;
    }

    #asset-image-container {
        grid-area: asset-image;
    }

    #grpWorkOrderDetails {
        grid-area: work-order-details;
    }

    #footer-details-container {
        grid-area: footer-details;
        display: flex; /* Fallback for IE because I don't wanna re-create the grid in IE */
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1rem;
    }
}

@media only screen and (min-width: 768px) {
    #contact-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #extended-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    #request-details-body {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    #grpAssetDetails {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    #asset-image-container {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    #grpWorkOrderDetails {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    #footer-details-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }
}

@media only screen and (min-width: 1000px) {
    #request-details-tab-content {
        grid-template-areas: "contact-details extended-details" "response-details response-details" "asset-details asset-image" "work-order-details work-order-details" "footer-details footer-details";
        grid-column-gap: 1rem;
        -ms-grid-columns: 2fr 1fr;
        grid-template-columns: 2fr 1fr;
    }

    #contact-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #extended-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    #request-details-body {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    #grpAssetDetails {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    #asset-image-container {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    #grpWorkOrderDetails {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    #footer-details-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }
}

@media only screen and (min-width: 1200px) {
    #request-details-tab-content {
        grid-template-areas: "contact-details contact-details extended-details" "response-details response-details response-details" "asset-details asset-image work-order-details" "footer-details footer-details footer-details";
        grid-column-gap: 1rem;
        -ms-grid-columns: 1fr 1rem minmax(0rem, 15rem) 1rem 1fr;
        grid-template-columns: 1fr minmax(0rem, 15rem) 1fr;
    }

    #contact-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }

    #extended-details-container {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    #request-details-body {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    #grpAssetDetails {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }

    #grpWorkOrderDetails {
        -ms-grid-row: 3;
        -ms-grid-column: 5;
        -ms-grid-column-span: 1;
    }

    #footer-details-container {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }
}


/* REQUEST LISTING */
.request-card-listing-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 100%;
    grid-template-rows: 1fr;
    max-height: 100%;
    height: 100%;
    background-color: whitesmoke;
}

    .request-card-listing-container > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .request-card-listing-container > * {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row: 1;
    }

.request-listing-items-container .scroller {
    padding-top: 1rem;
}

.request-card-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0rem 1rem;
    height: 5rem;
    background-color: white;
    border-radius: 5px;
    -ms-overflow-style: none;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    cursor: pointer;
    margin: 0.5rem;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -webkit-transition: -webkit-box-shadow 0.25s linear;
    transition: -webkit-box-shadow 0.25s linear;
    -o-transition: box-shadow 0.25s linear;
    transition: box-shadow 0.25s linear;
    transition: box-shadow 0.25s linear, -webkit-box-shadow 0.25s linear;
}

    .request-card-container.selected {
        background-color: #ebebeb;
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .request-card-container:hover {
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .request-card-container .request-card-details-container .request-description {
        color: dimgray;
    }

    .request-card-container .request-card-image-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 5rem;
        margin: auto 0.5rem;
        margin-right: 0.2rem;
        align-items: center;
    }

        .request-card-container .request-card-image-container img {
            max-width: 4.5rem;
            max-height: 100%;
        }

    .request-card-container .request-card-details-container {
        display: -ms-grid;
        display: grid;
        width: 100%;
        padding: 0.5rem;
        grid-template-areas: "request-number request-badges" "request-description request-description" "request-age request-status";
        -ms-grid-columns: minmax(min-content, 1fr) auto;
        grid-template-columns: minmax(-webkit-min-content, 1fr) minmax(auto, -webkit-max-content);
        grid-template-columns: minmax(min-content, 1fr) minmax(auto, max-content);
        -ms-grid-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
        grid-template-rows: minmax(1rem, -webkit-max-content) 1fr minmax(1rem, -webkit-max-content);
        grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
    }

        .request-card-container .request-card-details-container p {
            margin: 0px;
        }

        .request-card-container .request-card-details-container .request-number {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            grid-area: request-number;
            font-weight: bold;
        }

        .request-card-container .request-card-details-container .badge-container {
            -ms-grid-row: 1;
            -ms-grid-column: 3;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            grid-area: request-badges;
            text-align: center;
            color: white;
            -ms-grid-row: 1;
            -ms-grid-row-span: 1;
            grid-row: 1 / span 1;
            align-self: start;
            justify-self: end;
            overflow-x: auto;
            max-width: 100%;
        }

        .request-card-container .request-card-details-container .request-age {
            -ms-grid-row: 3;
            -ms-grid-column: 1;
            grid-area: request-age;
            color: #003366;
            white-space: nowrap;
            padding-top: 0.25rem;
            -ms-grid-row-align: end;
            align-self: end;
        }

        .request-card-container .request-card-details-container .request-status {
            -ms-grid-row: 3;
            -ms-grid-column: 3;
            grid-area: request-status;
            color: #003366;
            text-align: right;
            padding-top: 0.25rem;
            -ms-grid-row-align: end;
            align-self: end;
        }

            .request-card-container .request-card-details-container .request-status.approved {
                color: #28A745;
            }

            .request-card-container .request-card-details-container .request-status.declined {
                color: #DC3545;
            }

        .request-card-container .request-card-details-container .request-description {
            -ms-grid-row: 2;
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-area: request-description;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            -ms-overflow-style: none;
            overflow: hidden;
            white-space: nowrap;
            max-height: 2rem;
            -ms-grid-row-align: center;
            align-self: center;
            font-size: 1.15em;
        }

.badge-container > * {
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    white-space: nowrap;
}

.badge-container .request-priority {
    margin-left: 0.25rem !important;
}

.badge-container .work-order-status {
    background-color: #003366;
}

.request-card-listing-container .flyover-details-container {
    display: none;
    overflow-y: auto;
    padding: 10px;
    background-color: white;
    -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    z-index: 3;
}

    .request-card-listing-container .flyover-details-container.active {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.request-card-listing-container .request-listing-items-container {
    overflow: auto;
}

.request-listing-items-container .request-group-title:first-child {
    margin-top: 1rem;
}

.request-group-title {
    width: 90%;
    display: table;
    white-space: nowrap;
    margin: auto;
    margin-top: 3rem;
    text-align: center;
    user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

    .request-group-title:before,
    .request-group-title:after {
        border-top: 1px solid #000;
        content: '';
        display: table-cell;
        position: relative;
        top: 0.5em;
        width: 40%;
    }

    .request-group-title:before {
        right: 1.5%;
    }

    .request-group-title:after {
        left: 1.5%;
    }


.show-more-container {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .show-more-container .show-more-button {
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0.25rem 1rem;
    }

        .show-more-container .show-more-button:hover {
            background-color: #E8E8E8;
        }

        .show-more-container .show-more-button:active {
            background-color: gainsboro;
        }

@media only screen and (min-width: 526px) {
    .request-card-listing-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
    }

        .request-card-listing-container .request-listing-items-container {
            -ms-grid-column: 1;
            -ms-grid-column-span: 3;
            grid-column: 1 / span 3;
        }

        .request-card-listing-container .flyover-details-container {
            -ms-grid-column: 2;
            -ms-grid-column-span: 1;
            grid-column: 2 / span 1;
        }
}

@media only screen and (min-width: 768px) {
    .request-card-listing-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

        .request-card-listing-container .request-listing-items-container {
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1 / span 2;
        }

        .request-card-listing-container .flyover-details-container {
            -ms-grid-column: 2;
            -ms-grid-column-span: 1;
            grid-column: 2 / span 1;
        }
}

@media only screen and (min-width: 1024px) {
    .request-card-listing-container .request-listing-items-container {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / span 1;
    }

    .request-card-listing-container .flyover-details-container {
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.radio-button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .radio-button-group label {
        margin-left: 0.25rem;
        margin-right: 1rem;
    }

#new-request-fab {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    -ms-grid-column-align: end;
    justify-self: end;
    z-index: 2;
    margin: 2rem;
    width: 50px;
    height: 50px;
    position: relative;
}


    #new-request-fab.disabled {
        pointer-events: none;
        opacity: 0.7;
    }

.fab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #DC3545;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: 25px;
    color: white;
    text-align: center;
    cursor: pointer;
}

    .fab img {
        width: 65%;
        height: 65%;
    }

    .fab:hover {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }

@media only screen and (min-width: 526px) {
    #new-request-fab {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        -ms-grid-column-align: start;
        justify-self: start;
    }
}

.work-order-status-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 0.25rem;
    padding: 0rem 0.5rem;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.work-order-status-indicator-circle {
    width: 15px;
    min-width: 15px;
    height: 15px;
    margin-right: 0.75rem;
    border-radius: 50%;
    background-color: #003366;
    /*background-color: #28A745;*/
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}


.mex-document-carousel-buttons.disabled {
    opacity: 0.6;
    pointer-events: none;
}


/* Custom fields */

.custom-field-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

.custom-field-grid-cell {
    display: flex;
    margin: 0rem;
    /*border: 1px solid black;*/
}

    .custom-field-grid-cell .mex-input-container {
        margin: 0px;
        flex-direction: row;
    }

    .custom-field-grid-cell .mex-label-container {
        height: 100%;
        max-width: 100%;
        align-items: center;
        margin-bottom: 0px;
    }

    .custom-field-grid-cell .mex-label {
        max-height: 100%;
        overflow-y: auto;
        white-space: nowrap;
        margin-right: 0.5rem;
        margin-bottom: 0px;
    }

    .custom-field-grid-cell input {
        height: calc(100% - 4px);
    }

    .custom-field-grid-cell .custom-field-label .mex-label {
        white-space: normal;
    }

    .custom-field-grid-cell .mex-input-container.mex-textbox-container .mex-textarea {
        height: auto;
        align-self: stretch;
        resize: none;
    }

#custom-field-container {
    margin-top: 0.5rem;
}

.custom-field-image-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 0;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

    .custom-field-image-container .mex-label {
        margin-right: 0.5rem;
    }

    .custom-field-image-container .mex-image {
        max-height: 100%;
        max-width: 100%;
    }

.mex-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: white;
}

.mex-signature-container {
    height: 100%;
    margin: 0;
}

.mex-signature {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    border-radius: 10px;
    box-sizing: border-box;
}

    .mex-signature.disabled {
        background-color: #ebebeb
    }

.mex-input-container.mex-date-picker-container,
.mex-input-container.mex-time-picker-container {
    display: flex;
    align-items: stretch;
}

    .mex-input-container.mex-date-picker-container input,
    .mex-input-container.mex-time-picker-container input {
        height: 100%;
    }



.priority-selector-container {
    height: 100%;
    display: flex;
}

    .priority-selector-container .priority-listing-container,
    .priority-selector-container .priority-grid-container,
    .priority-selector-container .priority-matrix-container,
    .priority-selector-container .priority-matrix {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

.priority-matrix {
    padding: 1rem;
}

.priority-matrix-label {
    display: flex;
    flex-direction: row;
}

    .priority-matrix-label .priority-matrix-label-title {
        font-weight: bold;
        margin-right: 0.25rem;
    }

.priority-matrix-answer-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
}

.priority-matrix-score {
    max-width: 2.5rem;
    margin-left: 1rem;
}

.mex-security-wrapper {
}

    .mex-security-wrapper.disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.5;
        user-select: none;
    }

    .mex-security-wrapper.not-visible {
        pointer-events: none;
        cursor: default;
    }

.document-card-new-container .mex-label {
    user-select: none;
}


body {
    margin: 0px;
    font-size: 0.75rem;
    width: 100%;
}

#app {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    display: -ms-grid;
    display: grid;
    grid-template-rows: minmax(70px, auto) 1fr 40px;
    -ms-grid-rows: 70px 1fr 40px;
    -ms-grid-columns: 1fr;
}

.routerView {
    width: 100%;
    -ms-grid-row: 2;
    max-height: 100%;
    overflow-y: auto;
}

.bold {
    font-weight: bold;
}

.xxlarge {
    font-size: xx-large;
}

.center {
    text-align: center;
}

.hyperlink {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/*#region HEADER BAR*/
.MEXHeaderBar_Container {
    -ms-grid-row: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #3c444f;
}

.MEXHeaderBar_Grid {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0 1rem;
}

.MEXHeaderBar_Title {
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-align-content: center;
}

    .MEXHeaderBar_Title > .MEXHeaderBar_Title_Header {
        color: white;
        text-align: center;
        font-size: x-large;
    }

    .MEXHeaderBar_Title > .MEXHeaderBar_Title_Welcome {
        margin-top: 5px;
        color: white;
        text-align: center;
    }

.MEXHeaderBar_LeftActionContainer {
    display: flex;
    flex: 0 0 20%;
    justify-content: flex-start;
    align-content: flex-start;
}

.MEXHeaderBar_RightActionContainer {
    display: flex;
    flex: 0 0 20%;
    justify-content: flex-end;
    align-content: flex-end;
}

.MEXHeaderBar_CompanyDetailsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .MEXHeaderBar_CompanyDetailsContainer > img {
        max-height: 45px;
    }

    .MEXHeaderBar_CompanyDetailsContainer > label {
        color: white;
        margin-top: 3px;
        font-size: 10px;
    }

/*#endregion*/
/*#region FOOTER BAR*/
.MEXFooterBar_Container {
    -ms-grid-row: 3;
    display: flex;
    background-color: #3c444f;
}

.MEXFooterBar_Grid {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin: 5px;
    align-content: start;
}

.MEXFooterBar_BasicSwitch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    justify-self: end;
    margin-left: auto;
}

    .MEXFooterBar_BasicSwitch label {
        margin: 5px;
        color: white;
        font-size: 14px;
    }

    .MEXFooterBar_BasicSwitch .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
    }

        .MEXFooterBar_BasicSwitch .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .MEXFooterBar_BasicSwitch .switch .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            -o-transition: .4s;
            transition: .4s;
        }

            .MEXFooterBar_BasicSwitch .switch .slider:before {
                position: absolute;
                content: "";
                height: 13px;
                width: 13px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                -webkit-transition: .4s;
                -o-transition: .4s;
                transition: .4s;
            }

        .MEXFooterBar_BasicSwitch .switch input:checked + .slider {
            background-color: #2196F3;
        }

        .MEXFooterBar_BasicSwitch .switch input:focus + .slider {
            -webkit-box-shadow: 0 0 1px #2196F3;
            box-shadow: 0 0 1px #2196F3;
        }

        .MEXFooterBar_BasicSwitch .switch input:checked + .slider:before {
            -webkit-transform: translateX(13px);
            -ms-transform: translateX(13px);
            transform: translateX(13px);
        }

        .MEXFooterBar_BasicSwitch .switch .slider.round {
            border-radius: 17px;
        }

            .MEXFooterBar_BasicSwitch .switch .slider.round:before {
                border-radius: 50%;
            }

/*#endregion*/

/*#region MAIN MENU*/

.MainMenu_Header {
    display: flex;
    height: 12rem;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

    .MainMenu_Header > hr {
        height: 1px;
        width: 35%;
        background-color: black;
    }

.MainMenu_Grid {
    display: flex;
    justify-content: center;
}

.MainMenuOps_MainButton {
    margin: 1rem;
}

    .MainMenuOps_MainButton a {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: #3366cc;
        font-weight: bold;
        font-size: 1.1em;
    }

    .MainMenuOps_MainButton span {
        display: flex;
        justify-content: center;
        margin-top: 0.75rem;
    }

    .MainMenuOps_MainButton img {
    }

.MainMenu_Footer {
    margin-top: auto;
}

.MainMenu_Copyright {
}

.MainMenu_Settings {
    height: 40px;
    width: 40px;
    margin: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
}

/*#endregion*/

/*#region LOGIN*/
.Login_Grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.Login_Box {
    border: 1.5px solid black;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 30rem;
}

    .Login_Box .contact-name {
        padding: 0.25rem;
        padding-left: 5.6rem;
    }

@media only screen and (max-width: 526px) {
    .Login_Box .contact-name {
        padding: 0.25rem;
    }
}

.Login_UsernamePassword {
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.Login_PasswordOptions {
    padding: 0 10px 0 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .Login_PasswordOptions > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .Login_PasswordOptions > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .Login_PasswordOptions > .hyperlink {
        color: blue;
    }

.Login_Box > .mex-textbox {
}



/*#endregion*/

/*#region BUTTON BAR*/
.MEXButtonBar_Container {
    display: flex;
    background-color: whitesmoke;
    border-top: 1px solid black;
    width: 100%;
}

.MEXButtonBarButton_Container {
    padding: 0.25rem;
    user-select: none;
    cursor: pointer;
    border: solid 1px transparent;
}

    .MEXButtonBarButton_Container .mex-label {
        cursor: pointer;
    }

    .MEXButtonBarButton_Container.disabled * {
        cursor: default;
        opacity: 0.75;
    }

    .MEXButtonBarButton_Container.disabled:hover {
        background-color: transparent;
    }

    .MEXButtonBarButton_Container:hover {
        background-color: #cae4ed;
        border: solid 1px #a8dcee;
        border-radius: 2px;
    }

    .MEXButtonBarButton_Container img {
        width: 36px;
        height: 36px;
        margin-bottom: 3px;
    }

    .MEXButtonBarButton_Container .mex-label-container {
        font-size: 1.15em;
    }

    .MEXButtonBarButton_Container a {
        text-decoration: none;
        min-width: 50px;
        height: 58px;
        background-color: transparent;
        border-style: none;
        border: 0 none transparent;
        padding-left: 10px;
        padding-right: 10px;
        color: inherit;
        align-items: center;
    }

/*#endregion*/

/*#region MEX BUTTON*/

.mex-button-container {
}

    .mex-button-container > a {
        cursor: pointer;
    }

        .mex-button-container > a > img {
            max-height: 100%;
            max-width: 100%;
            max-height: 40px;
        }

    .mex-button-container span {
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

/*#endregion*/

/*#region REQUEST LISTING*/

.request-listing-container {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    max-height: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr auto;
    -ms-grid-columns: 1fr;
    grid-template-rows: auto 1fr auto;
}

    .request-listing-container .mex-grid-container {
        -ms-grid-row: 2;
    }

    .request-listing-container .MEXButtonBar_Container {
        -ms-grid-row: 3;
    }

/*#endregion*/

/*#region DOCUMENTS*/

/*#endregion*/

/*#region REQUEST DETAILS - SIMPLE*/

.request-details-simple-container {
    background-color: white;
    z-index: 1000;
}


    .request-details-simple-container #txtCommunication {
        height: 6rem;
    }

    .request-details-simple-container .communication-textbox {
        margin-bottom: 0;
    }

    .request-details-simple-container .communication-post-section {
        display: flex;
        background-color: #3c444f;
        padding: 2px 10px;
    }

        .request-details-simple-container .communication-post-section .communication-post-button {
            color: white;
            font-weight: bolder;
            -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
            text-align: center;
            cursor: pointer;
            margin: 0.4rem;
        }

    .request-details-simple-container .extended-details-holder {
        margin: 0rem 0.5rem;
    }

    .request-details-simple-container > mex-textbox {
        margin: 0 10px;
    }


.simple-header {
    display: -ms-grid;
    display: grid;
    height: 2.5rem;
    -ms-grid-columns: 30px 1fr 30px;
    grid-template-columns: 30px 1fr 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #3c444f;
    color: white;
    font-size: 16px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 0.5rem;
    -ms-grid-rows: 1fr;
}

label.simple-header {
    padding: 15px 10px;
}

.save-button {
    -ms-grid-column: 1;
    grid-column: 1;
}

.simple-header div, .simple-header span {
    -ms-grid-column: 2;
    grid-column: 2;
    display: flex;
    align-content: center;
    justify-content: center;
    line-height: 35px;
}

.mex-button-container.close-button {
    -ms-grid-column: 3;
    grid-column: 3;
}

.close-button {
    -ms-grid-column: 3;
    grid-column: 3;
}

.save-button, .close-button {
    height: 1.75rem;
    margin: auto;
    cursor: pointer;
}


/*#endregion*/
/*#region MEX GRID*/
.mex-grid-container {
    overflow: hidden;
    display: grid;
    display: -ms-grid;
    grid-template-rows: 1fr auto;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr auto;
    height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
}

.mex-grid {
    height: 100%;
    min-height: 0;
    min-width: 0;
    border: none;
}

.mex-grid-summary {
    display: flex;
    height: 20px;
}

    .mex-grid-summary > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.mex-grid-cell-readonly {
    background-color: gainsboro;
}

.mex-grid-cell {
    height: 30px;
    -ms-overflow-style: none;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .mex-grid-cell > img {
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -ms-overflow-style: none;
        overflow: hidden;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    }

    .mex-grid-cell > span {
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -ms-overflow-style: none;
        overflow: hidden;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    }

.mex-grid-cell-checkbox > input {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mex-grid-status-bar {
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-grid-row: 2;
    white-space: nowrap;
    overflow-x: auto;
}

    .mex-grid-status-bar > label {
        margin: 5px;
    }

    .mex-grid-status-bar > button {
        height: 25px;
        margin: 5px;
    }


/*#endregion*/


/*#region REQUEST RANGES*/
.request-ranges-container {
    display: flex;
    flex-direction: column;
}

.request-ranges-form {
    padding: 0.5rem;
    min-width: 20rem;
}

    .request-ranges-form .mex-label-container.start-end-label {
        flex: 1;
    }

.ranges-form-row {
    display: flex;
    white-space: nowrap;
    height: 2.3rem;
}

    .ranges-form-row > * {
        flex: 1;
        margin-right: 0.5rem;
    }

    .ranges-form-row > .mex-label-container {
    }

.request-ranges-container .request-ranges-form .start-end-label {
    text-align: left;
}

.request-ranges-form .mex-label {
    text-align: right;
}

.grid-column-span-2 {
    grid-column: auto / span 2;
}

.start-end-label .mex-label {
    text-align: center;
}

/*#endregion*/

/*#region REQUEST PRINT*/
.request-print-container {
    display: grid;
    grid-template-rows: 1fr auto;
}

.request-print-form {
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0.5rem;
    align-items: start;
}

    .request-print-form > * {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .request-print-form .to-label {
        width: 4rem;
        text-align: center;
        align-items: center;
    }

.mex-radio-button-container .mex-label-container {
    margin-left: 0.75rem;
}

.mex-radio-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}
/*#endregion*/
/*#region REPORT VIEWER*/
.report-viewer-container {
    height: 100%;
}

.report-viewer-form {
    height: 100%;
}

/*#endregion*/


/*#region ACCOUNT INFO*/
.account-info-container {
    height: 100%;
    margin: 0.75rem 0.5rem;
}

    .account-info-container .notification-settings-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 0.5rem;
    }

/*#endregion*/

/*#region ABOUT OPS*/
.about-ops-container {
    display: grid;
    grid-template-rows: 1fr auto;
}

    .about-ops-container .about-ops-form {
        display: grid;
        grid-row-gap: 1em;
        margin: 1em;
    }

    .about-ops-container .about-ops-contact-numbers {
        display: grid;
        grid-template-columns: auto auto;
    }

    .about-ops-container .about-ops-contact-emails {
        display: grid;
        grid-template-columns: auto auto auto;
        font-size: 11px;
    }

    .about-ops-container .about-ops-license {
        display: grid;
        grid-template-rows: auto auto;
        grid-row-gap: 1em;
    }

        .about-ops-container .about-ops-license .mex-textbox {
            margin-left: 1em;
        }

    .about-ops-container .about-ops-rego {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        grid-column-gap: 1em;
        margin-left: 1em;
    }

/*#endregion*/

/*#region LANGUAGE SELECTOR*/

.language-selector-container {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    display: -ms-grid;
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
}

    .language-selector-container .language-selector-list {
        -ms-grid-row: 1;
    }

    .language-selector-container .MEXButtonBar_Container {
        -ms-grid-row: 2;
    }

.language-selector-list {
    overflow-y: scroll;
}

.language-selector-item {
    display: flex;
    border-bottom: 1px black solid;
    height: 40px;
    align-content: center;
    align-items: center;
    font-size: 14px;
}

    .language-selector-item > div {
        justify-self: center;
        width: 50px;
        display: flex;
        justify-content: center;
    }

/*#endregion*/
/*#region ASSET SELECTOR*/
#grpSearch {
    box-sizing: border-box;
}

.asset-selector-container {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.asset-selector-search-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
}

    .asset-selector-search-grid > .search-text {
        grid-column: 1;
        grid-row: 1;
    }

    .asset-selector-search-grid > .search-asset-type {
        grid-column: 1;
        grid-row: 2;
    }

    .asset-selector-search-grid > #btnSearch {
        margin: 0 0 0 20px;
        height: 25px;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

/*#endregion*/
/*#region MEX ASSET TREE*/
.mex-asset-tree-container {
    -ms-overflow-style: none;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
}

.mex-asset-tree {
    height: 100%;
}

/*#endregion*/

/*#region SELECTOR*/
.selector-container {
    height: 100%;
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    -ms-grid-columns: 1fr;
    -ms-overflow-style: none;
    overflow: hidden;
}

    .selector-container .mex-grid-container {
        -ms-grid-row: 2;
    }

    .selector-container .MEXButtonBar_Container {
        -ms-grid-row: 3;
    }

/*#endregion*/


/*#region ADD LISTING COLUMNS */

.add-listing-column-container {
    height: 100%;
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr auto;
    grid-template-rows: 1fr auto;
    -ms-overflow-style: none;
    overflow: hidden;
}

.add-listing-column-selector-container {
    height: 100%;
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr auto;
    grid-template-rows: 1fr auto;
    -ms-overflow-style: none;
    overflow: hidden;
}

    .add-listing-column-selector-container .k-image {
        width: 15px;
        height: 15px;
    }

    .add-listing-column-selector-container .k-in {
        color: black !important;
    }

.custom-view-text-box {
    width: calc(100% - 5px);
    height: calc(100% - 20px);
}

#txtCustomView {
    width: 100%;
    height: 100%;
}

/*#endregion*/
/*#region MEX SEARCH BAR*/
.MEXSearchBar_Container {
    display: grid;
    grid-template-columns: 30px 1fr;
    max-width: 25rem;
    min-width: 5rem;
    margin: 0.25rem;
    /* IE stuff */
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr;
    -ms-grid-rows: auto;
}

    .MEXSearchBar_Container .MEXSearchBar_Textbox {
        margin: 0px;
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }

        .MEXSearchBar_Container .MEXSearchBar_Textbox input {
            border-radius: 0 5px 5px 0;
            margin: 0px;
        }

    .MEXSearchBar_Container .MEXSearchBar_SearchIcon_Container {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightgray;
        border-radius: 5px 0 0 5px;
        z-index: 1;
        user-select: none;
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

/*#endregion*/
/*#region MEX LOADING BAR*/
.MEXLoadingBar_Container {
    display: flex;
    align-items: center;
}

.MEXLoadingBar_Text {
    color: white;
    font-size: 12px;
    z-index: 1000000;
    margin-left: 0.75rem;
    overflow: hidden;
}

.loading-blocker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background-color: black;
    opacity: 0.1;
}

.loading-fade-enter-active {
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.loading-fade-leave-active {
    pointer-events: none; /* Allows users to still click even while it is animating out. Probably doesn't work in IE. */
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.loading-fade-enter, .loading-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.lds-dual-ring {
    margin-left: 10px;
    width: 15px;
    height: 15px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 10px;
        height: 10px;
        margin: -2px;
        border-radius: 50%;
        border: 5px solid #fff;
        border-color: #fff transparent #fff transparent;
        -webkit-animation: lds-dual-ring 1.2s linear infinite;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@-webkit-keyframes lds-dual-ring {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes lds-dual-ring {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*#endregion*/

/*#region MEX MESSAGE BOX*/

.MEXMessageBox_Container {
}

.MEXMessageBox_Grid {
    min-width: 320px;
    max-width: 670px;
    padding: 10px;
}

.MEXMessageBox_MessageSection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: start;
    align-content: start;
}

    .MEXMessageBox_MessageSection img {
        height: 30px;
        width: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .MEXMessageBox_MessageSection label {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        font-size: 14px;
        text-align: left !important;
    }

.MEXMessageBox_ButtonSection {
    text-align: center;
    margin-top: 15px;
}

    .MEXMessageBox_ButtonSection button {
        min-width: 75px;
    }

/*#endregion*/


/*#region MEX HAMBURGER MENU*/

.mex-hamburger-menu {
    position: absolute;
    right: 0px;
    top: 70px;
    z-index: 9999999;
}

.mex-hamburger-menu-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .mex-hamburger-menu-grid > .MEXMenuItem_Container {
        height: 40px;
        width: 150px;
        border-style: solid;
        border-width: 1px 0px 0px 1px;
        border-color: #e7e7e787;
        background-color: #3c444f;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: white;
    }

        .mex-hamburger-menu-grid > .MEXMenuItem_Container.disabled {
            background-color: #4c4e52;
            color: lightgray;
            cursor: default;
        }

    .mex-hamburger-menu-grid > li:hover {
        background-color: #DC3545;
    }


/*#endregion*/

/*#region TRANSITIONS*/

.fade-enter-active, .fade-leave-active {
    -webkit-transition: opacity 0.25s ease-out;
    -o-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

/*#endregion*/

/*#region MEX DOCUMENT CAROUSEL*/
.mex-document-carousel-listing {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 5px;
    background-color: gainsboro;
    box-shadow: 5px 3px 10px rgba(0,0,0,0.4);
}

.mex-document-carousel-item {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.mex-document-carousel-delete {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    z-index: 2;
}

.mex-document-carousel-image {
    max-height: 100%;
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .mex-document-carousel-image > img {
        max-height: 100%;
        max-width: 100%;
        width: auto;
    }

.mex-document-carousel-path {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.6);
    padding: 5px;
    max-width: 100%;
    max-height: 25%;
    text-align: center;
    -ms-overflow-style: none;
    overflow: hidden;
    cursor: pointer;
}

    .mex-document-carousel-path > label {
        width: 100%;
        height: calc(100% - 10px);
        font-family: Calibri;
        font-weight: bolder;
        color: white;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        cursor: pointer;
    }

.mex-document-carousel-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    user-select: none;
}

    .mex-document-carousel-buttons img {
        margin: 5px;
        height: 32px;
        width: 32px;
    }

.mex-slide {
    position: relative;
    margin: 5px auto;
}

    .mex-slide .mex-slide-next, .mex-slide .mex-slide-prev {
        position: absolute;
        top: 50%;
        width: 20px;
        height: 40px;
        margin-top: -20px;
        border-radius: 5px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background-color: #666;
        color: #fff;
        opacity: 0.7;
        -webkit-transition: all 0.6s;
        -o-transition: all 0.6s;
        transition: all 0.6s;
        font-size: 15px;
    }

        .mex-slide .mex-slide-next:hover, .mex-slide .mex-slide-prev:hover {
            opacity: 1;
            background-color: #444;
        }

    .mex-slide .mex-slide-prev {
        left: 0;
        z-index: 10;
    }

        .mex-slide .mex-slide-prev::before {
            content: '<';
        }

    .mex-slide .mex-slide-next {
        right: 0;
        z-index: 10;
    }

        .mex-slide .mex-slide-next::before {
            content: '>';
        }

    .mex-slide > ul {
        list-style: none;
        position: relative;
        height: 146px;
        margin: 0;
        padding: 0;
    }

        .mex-slide > ul > li {
            -ms-overflow-style: none;
            overflow: hidden;
            position: absolute;
            z-index: 0;
            left: 188px;
            top: 73px;
            width: 0;
            height: 0;
            margin: 0;
            padding: 0;
            border: 1px solid #333;
            border-radius: 5px;
            background-color: #fff;
            cursor: pointer;
        }
/*#endregion*/

/*#region MEX DOCUMENT CARD*/
.mex-document-card-container {
    height: 100%;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 3px;
}


.mex-document-card-details-container {
    height: 100%;
    position: relative;
}

.mex-document-card-delete {
    cursor: pointer;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.mex-document-card-image-holder {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.mex-document-card-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    vertical-align: middle;
    text-align: center;
}

.mex-document-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.6);
    padding: 5px;
    max-height: 33%;
    min-height: 30px;
    -ms-word-break: break-word;
    word-break: break-word;
    text-align: center;
}

    .mex-document-card-content > label {
        font-family: Calibri;
        font-weight: bolder;
        color: white;
    }

    .mex-document-card-content .comment {
        display: inline-block;
        max-height: 30px;
        overflow-y: auto;
        cursor: pointer;
        font-weight: normal;
        font-size: 12px;
    }

        .mex-document-card-content .comment:hover {
            text-decoration: underline !important;
        }

/*#endregion*/

/*#region DOCUMENTS*/

.mex-document-card {
    height: 100%;
}

.documents-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

    .documents-container .documents-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: start;
    }

.documents-grid-card {
    margin: 0.5rem;
    height: 14rem;
    width: 11rem;
}

.document-card-new-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11rem;
    margin: auto;
    border: 1px dashed lightgray;
    border-radius: 2px;
    background-color: white;
    cursor: pointer;
    user-select: none;
}

    .document-card-new-container > .mex-security-wrapper {
        width: 100%;
        border: 1px dashed lightgray;
        height: 7rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .document-card-new-container > .mex-security-wrapper:hover {
            border: 1px dashed gray;
            background-color: whitesmoke;
        }

.document-card-plus {
    font-weight: bolder;
    font-size: 2.5em;
}

.documents-new-container {
}

/*#endregion*/

/*#region FORM DETAILS*/

.form-details-container {
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr auto;
    -ms-grid-columns: 1fr;
    grid-template-rows: auto 1fr auto;
}

    .form-details-container .form-details-header {
        display: flex;
        padding: 5px 10px;
        border-bottom: 1px solid black;
    }

        .form-details-container .form-details-header .mex-label-container {
            flex-grow: 1;
        }

        .form-details-container .form-details-header .mex-checkbox-container {
            flex-shrink: 1;
        }

    .form-details-container .MEXButtonBar_Container {
        -ms-grid-row: 3;
    }

/*#endregion*/

/*#region FORM VIEW*/

.mex-form-view {
    background-color: gainsboro;
    -ms-grid-row: 2;
}

.mex-form-view-zoom-image {
    width: 32px;
    height: 32px;
    top: 65px;
    right: 30px;
    position: absolute;
    z-index: 11;
}

.mex-form-view button {
    width: 40px;
    height: 80px;
    top: 50%;
    position: absolute;
    z-index: 11;
    box-sizing: border-box;
}

.mex-form-view-left-button {
    left: 5px;
}

.mex-form-view-right-button {
    right: 30px;
}

.mex-form-view-surface {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: auto;
    position: relative;
}

    .mex-form-view-surface > img {
        margin: auto;
        left: 0px;
        right: 0px;
        position: absolute;
    }

    .mex-form-view-surface > canvas {
        margin: auto;
        left: 0px;
        right: 0px;
        position: absolute;
        z-index: 10;
    }

.form-field-container {
    height: 100%;
}

.form-field-entry {
    height: 100%;
}

.form-field-grid {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}

/*#endregion*/
/*#region MEX BAROCDE VIEW*/
.mex-barcode-view-container {
    border-radius: 5px;
    background-color: #000000AA;
    position: absolute;
    top: calc(50% - 20px);
    margin: 5px;
    z-index: 20;
    right: 0;
}

    .mex-barcode-view-container > .barcodeIcon {
        padding: 10px;
        height: 40px;
        width: 40px;
    }

@media only screen and (min-width: 526px) {
    .mex-barcode-view-container.simple-listing-barcode {
        left: 0;
        right: initial;
    }
}

.mex-barcode-view-display {
    background-color: black;
    height: 100%;
    width: 100%;
    position: relative;
}

.mex-barcode-view-display {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .mex-barcode-view-display .target {
        position: absolute;
        height: 100%;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

        .mex-barcode-view-display .target > div {
            background-color: red;
            height: 2px;
            width: 100%;
        }

    .mex-barcode-view-display > video {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .mex-barcode-view-display > canvas {
        display: none;
    }

/*#endregion*/