/* ----- VARIABLES ----- */
:root {
    --priColor: #ff6a00;
    --secColor: #808080;
    --bkgColor: #f2f2f2;
    --brdColor: #999900;
    --fontSize: .9rem;
    --txtColor: #696969;
}

/* ----- RESETS ----- */
body, p, a, ul, li {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

li {
    list-style-type: none;
}

::placeholder {
    color: #808080;
    font-style: italic;
}

:placeholder-shown {
    color: #808080;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: #808080;
    font-style: italic;
}

::-moz-placeholder {
    color: #808080;
    font-style: italic;
}

:-ms-input-placeholder {
    color: #808080;
    font-style: italic;
}

/* ----- NAVIGATION BAR STYLES ----- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: #fff;
}

.logo {
    font-size: 1.5rem;
    margin: 0.5rem;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-links li {
    list-style: none;
}

    .navbar-links li a {
        text-decoration: none;
        color: #fff;
        padding: 1rem;
        display: block;
        font-size: 1rem;
    }

    .navbar-links li:hover {
        background-color: #555;
    }

.toggle-button {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

    .toggle-button .bar {
        height: 3px;
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
    }

/* Navbar Media Query */

@media screen and (max-width: 619px) {
    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: right;
        /*Change this to left or center to show the menu item in a different place*/
    }

        .navbar-links li a {
            padding: 0.5rem 1rem;
        }

    .navbar-links.active {
        display: flex;
    }

    .navbar-links.close {
        display: none;
    }
}
/* ----- END OF NAVIGATION BAR STYLE ----- */

/* ----- BASE STYLES ----- */
* {
    box-sizing: border-box;
}

body {
    font-family: Rubik;
    background: var(--bkgColor);
    overflow-x: hidden;
}

/* ----- STYLES FOR CONTROLS ----- */
.btn {
    background: none;
    background-color: #FFF;
    border: .125rem solid var(--brdColor);
    color: #000;
    padding: 0.375rem 0.750rem;
    height: 2.875rem;
    width: 5.125rem;
    border-radius: .625rem;
    text-transform: uppercase;
    display: inline-block;
    outline: none;
    cursor: pointer;
}

    .btn:hover {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

    .btn:focus {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

.btn-lg {
    background: none;
    background-color: #FFF;
    border: .125rem solid var(--brdColor);
    color: #000;
    padding: 0.375rem 0.750rem;
    height: 2.875rem;
    width: 10.25rem;
    border-radius: .625rem;
    text-transform: uppercase;
    display: inline-block;
    outline: none;
    cursor: pointer;
}

    .btn-lg:hover {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

    .btn-lg:focus {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

.btn-sm {
    background: none;
    background-color: #FFF;
    border: 0.0625rem solid var(--brdColor);
    color: #000;
    padding: 0.375rem 0.250rem;
    height: 2.625rem;
    width: 2.625rem;
    border-radius: 0.500rem;
    text-transform: uppercase;
    display: inline-block;
    outline: none;
    cursor: pointer;
}

    .btn-sm:hover {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

    .btn-sm:focus {
        color: #FFF;
        background: var(--priColor);
        border-color: var(--priColor);
    }

.lbl {
    margin-top: var(--fontSize);
    font-family: "Rubik";
    color: var(--secColor);
    outline: none;
    font-size: var(--fontSize);
}

.txb {
    padding: 0.625rem 1rem;
    border-radius: 0.500rem;
    height: 2.625rem;
    border: 0.0625rem solid var(--brdColor);
    font-family: "Rubik";
    color: black;
    background-color: white;
    outline: none;
    font-size: var(--fontSize);
}

.txb-small {
    padding: 0.625rem 1rem;
    border-radius: 0.500rem;
    height: 2.625rem;
    border: 0.0625rem solid var(--brdColor);
    font-family: "Rubik";
    color: black;
    background-color: white;
    outline: none;
    font-size: var(--fontSize);
    width: 4rem;
}

    .txb-small:hover {
        border: 0.0625rem solid var(--priColor);
    }

    .txb-small:focus {
        box-shadow: 0 0 0.625rem black;
    }

.txb-error {
    padding: 0.625rem 1rem;
    border-radius: 0.500rem;
    height: 2.625rem;
    border: 0.0625rem solid #DB7791;
    font-family: "Rubik";
    color: #EBB8C4;
    background-color: #F9F2F4;
    font-size: var(--fontSize);
}

.txb:hover {
    border: 0.0625rem solid var(--priColor);
}

.txb:focus {
    box-shadow: 0 0 0.625rem black;
}

.txb-ml {
    padding: 0.625rem 1rem;
    border-radius: 0.500rem;
    height: 5.250rem;
    border: 0.0625rem solid var(--brdColor);
    font-family: "Rubik";
    color: black;
    background-color: white;
    outline: none;
    resize: none;
    font-size: var(--fontSize);
}

    .txb-ml:hover {
        border: 0.0625rem solid var(--priColor);
    }

    .txb-ml:focus {
        box-shadow: 0 0 0.625rem black;
    }

.text-right {
    text-align: right;
}


.ddl {
    padding: 0.625rem 1rem;
    border-radius: 0.500rem;
    height: 2.625rem;
    border: 0.0625rem solid var(--brdColor);
    font-family: "Rubik";
    color: black;
    background-color: white;
    outline: none;
    font-size: var(--fontSize);
    font-family: Rubik;
    cursor: pointer;
}

    .ddl:hover {
        border: 0.0625rem solid var(--priColor);
    }

    .ddl:focus {
        box-shadow: 0 0 0.625rem black;
    }

.lsb, .lsb-noScroll {
    padding: 0.625rem 1rem;
    display: inline-block;
    height: 5.250rem;
    border-radius: 0.500rem;
    border: 0.0625rem solid var(--brdColor);
    font-family: "Rubik";
    color: black;
    background-color: white;
    outline: none;
    font-size: var(--fontSize);
}

    .lsb:hover {
        border: 0.0625rem solid var(--priColor);
    }

.lsb-noScroll {
    width: 100%;
    height: 190px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-base-color: whitesmoke;
    scrollbar-3dlight-color: blue;
    scrollbar-arrow-color: red;
    scrollbar-track-color: whitesmoke;
    scrollbar-shadow-color: blue;
    scrollbar-face-color: whitesmoke;
}

.ckb-container {
    display: flex;
    align-items: center;
}

    .ckb-container label {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-family: "Rubik";
        font-size: var(--fontSize);
    }

    .ckb-container input[type='checkbox'] {
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .ckb-container label::before {
        content: '';
        width: 2rem;
        height: 2rem;
        border-radius: 0.500rem;
        margin-right: 0.500em;
        border: 0.0625rem solid var(--brdColor);
        background-color: #FFF;
    }

    .ckb-container label:hover::before {
        border: 0.0625rem solid var(--priColor);
    }

    .ckb-container input[type='checkbox']:hover + label::before {
        border: 0.0625rem solid var(--priColor);
    }

    .ckb-container input[type='checkbox']:focus + label::before {
        box-shadow: 0 0 0.625rem black;
    }

    .ckb-container input[type='checkbox']:checked + label::before {
        content: '\002714';
        font-size: 1.625rem;
        background-color: var(--priColor);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
    }

.pnl-categories {
    border: 0.0625rem solid var(--secColor);
    padding: 0.5rem 1rem;
    background-color: white;
}

    .pnl-categories .category-container {
        padding: 0.5rem 0;
    }

        .pnl-categories .category-container .category {
            color: var(--txtColor);
            /*padding: 0.5rem;*/
        }

/*.pnl-categories .category-container .category:hover {
                border: 1px solid var(--priColor);
            }

            .pnl-categories .category-container .category:focus {
                background-color: var(--priColor);
                color: white;
            }*/
.userActivityLink-container {
    padding: 0.5rem 0;
}
    .userActivityLink-container .link {
        color: var(--txtColor);
    }

.details-container {
    margin-top: 0.5rem;
    padding-left: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--secColor);
}
    .details-container .detail {
        color: var(--txtColor);
        font-size: 0.9rem;
    }

.pnl-questions {
    /*border: 0.0625rem solid var(--priColor);*/
    padding: 0.25rem 1rem;
}

.assessment-list {
}

    .assessment-list .assessment-container {
    }

        .assessment-list .assessment-container .assessment {
        }

/* VALIDATATION CONTROLS */
.validation {
    padding-top: 1rem;
    padding-left: 1rem;
    color: red;
    font-style: italic;
    font-size: var(--fontSize);
}

.validation-icon {
    color: red;
    vertical-align: middle;
    font-size: 2rem;
    margin-left: 0;
    padding-left: 0;
    /*display: none;*/
}

.validation-icon-none {
    display: none;
}

/* FONTS */
@font-face {
    font-family: "Rubik";
    src: url('Rubik.ttf')
}

h1, h2, h3, h4 {
    color: var(--txtColor);
    font-weight: normal;
    padding: 0;
    margin: 0;
    cursor: default;
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

p, a, li {
    color: var(--txtColor);
}

.leading {
    font-size: 1.1rem;
}

.header-area {
    padding: 0 0.5rem;
}

.lblInfo-line {
    padding: 0 0.5rem;
    color: var(--secColor);
    font-weight: lighter;
    font-style: italic;
    font-size: 0.9rem;
    cursor: default;
}

.footer {
    display: flex;
    padding: 0.5rem 0;
    color: var(--secColor);
    font-weight: lighter;
    font-style: italic;
    font-size: 0.8rem;
    align-items: center;
    justify-content: center;
}

.full-screen-container-login {
    background-image: url("/Images/loginBackground2.jpg");
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.full-screen-container-timeout {
    background-image: url("/Images/timer2.jpg");
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.full-screen-container-menu {
    background-image: url("/Images/menuBackground2.jpg");
    /*height: 100vh;*/
    height: 100%;
    width: 100vw;
    /*background-size: cover;*/
    background-position: center;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
}

.full-screen-container-help {
    background-image: url("/Images/cmmsWorkFlow.svg");
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timeout-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

    .timeout-group .lblMessage {
        font-size: 1rem;
        color: white;
        font-weight: 200;
        margin-bottom: 6px;
        text-align: center;
    }

.login-container {
    background-color: hsla(201,100%, 6%, 0.6);
    padding: 50px 30px;
    min-width: 400px;
    width: 50%;
    max-width: 600px;
}

.login-title {
    color: white;
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5em;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

    .input-group .lblLogin {
        font-size: 1rem;
        color: white;
        font-weight: 200;
        margin-bottom: 6px;
    }

    .input-group .txbLogin {
        font-size: 1.1rem;
        padding: 0.25rem 0.5rem;
        background-color: hsla(201,100%, 91%, 0.3);
        border: 1px solid hsl(201, 100%, 6%);
        outline: none;
        border-radius: 6px;
        color: white;
        font-weight: 200;
    }

        .input-group .txbLogin:focus {
            border: 1px solid hsl(201, 100%, 50%)
        }

.btn-login {
    padding: 10px 30px;
    width: 100%;
    border-radius: 6px;
    background: none;
    background-color: hsla(201,100%, 50%, 0.1);
    border: 1px solid hsl(201, 100%, 50%);
    outline: none;
    font-size: 1.1rem;
    color: white;
    font-weight: lighter;
    margin-top: 20px;
    cursor: pointer;
}

    .btn-login:hover {
        background-color: hsla(201,100%, 50%, 0.3);
    }

    .btn-login:focus {
        background-color: hsla(201,100%, 50%, 0.5);
    }


.menu-container {
    grid-column-start: 2;
    grid-column-end: 12;
}

    .menu-container .menu-group {
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

        .menu-container .menu-group .menu-link {
            border: 1px solid var(--secColor);
            padding: 1rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            background-color: white;
        }

            .menu-container .menu-group .menu-link:hover {
                border: 1px solid var(--priColor);
                background-color: var(--priColor);
                color: white;
            }

            .menu-container .menu-group .menu-link:focus {
                border: 1px solid var(--priColor);
            }

        .menu-container .menu-group .disabled {
            border: 1px solid var(--secColor);
            padding: 1rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            cursor: default;
        }

        .menu-container .menu-group .menu-label {
            color: var(--secColor);
            font-size: 0.9rem;
            font-style: italic;
            margin-left: 1rem;
            padding-top: 0.5rem;
            cursor: default;
        }

.assessment-container {
    grid-column-start: 2;
    grid-column-end: 12;
}

    .assessment-container .assessment-group {
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

        .assessment-container .assessment-group .assessment-link {
            padding: 0.5rem;
        }

            .assessment-container .assessment-group .assessment-link:hover {
                /*border: 1px solid var(--priColor);*/
                background-color: var(--priColor);
                color: white;
            }

            .assessment-container .assessment-group .assessment-link:focus {
                /*border: 1px solid var(--priColor);*/
                background-color: var(--priColor);
                color: white;
            }

        .assessment-container .assessment-group .disabled {
            border: 1px solid var(--secColor);
            padding: 1rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            cursor: default;
        }

        .assessment-container .assessment-group .assessment-label {
            color: var(--secColor);
            font-size: 0.9rem;
            font-style: italic;
            margin-left: 2rem;
            /*padding-top: 0.5rem;*/
            cursor: default;
        }


.error-container {
    grid-column: span 12;
}

    .error-container .error-group {
        display: flex;
        flex-direction: column;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

        .error-container .error-group .error-message {
            font-size: 0.9rem;
            padding: 0.5rem;
        }

        .error-container .error-group .error-date-page {
            font-size: 0.9rem;
            font-style: italic;
            margin-left: 2rem;
        }


.loginData-container {
    grid-column: span 12;
}

    .loginData-container .loginData-group {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
    }

        .loginData-container .loginData-group .loginData-message {
            font-size: 0.9rem;
            padding: 0.5rem;
        }

.adminHeadingLabel {
    padding-top: 0.5rem;
    margin-left: 1rem;
    color: var(--secColor)
}




/* MOBILE STYLES */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0.25em;
}

.user-area {
    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
    padding-top: 0.250rem;
}

    .user-area .user {
        color: var(--secColor);
        font-style: italic;
        font-size: .8rem;
        cursor: default;
    }

.input {
    padding: 0.5rem;
}

.assessment-container .assessment-group .assessment-label {
    display: none;
}

.pnl-questions .description {
    display: none;
}

.pnlCategoriesTitle, .pnlClientsTitle, .pnlUsersTitle {
    padding-bottom: 0.4rem;
    border-bottom: 0.0625rem solid var(--secColor);
}

    .pnlCategoriesTitle .title, .pnlCategoriesTitle .title, .pnlUsersTitle .title {
        font-size: 1.2rem;
        color: var(--secColor)
    }

.pnlUsersTitle {
    margin-bottom: 0.5rem;
}

.pnlQuestionsTitle, .pnlClientTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
}

    .pnlQuestionsTitle .title, .pnlClientTitle .title {
        font-size: 1rem;
        color: var(--secColor);
        cursor: default;
    }

.pnl-categories .category-container {
    padding: 0.25rem 0;
}

.red {
    color: red;
}

.question-container {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    align-items: center;
    border-top: 0.0625rem solid var(--secColor);
}

.question-containerLabel {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    align-items: center;
    border-top: 0.0625rem solid var(--secColor);
}

/*.numericAnswer-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}*/

.question-container .question {
    font-size: 1rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    width: 100%;
    cursor: default;
}

.question-containerLabel .questionLabel {
    font-size: 1rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    width: 75%;
    cursor: default;
}

.validation-icon {
}

.question-container .answer {
    margin-left: auto;
}

.question-containerLabel .answerLabel {
    margin-left: auto;
    width: 20%;
    text-align: right;
    cursor: default;
    padding-right: 1rem;
}

.question-containerLabel .scoreLabel {
    margin-left: auto;
    padding: 0;
    text-align: right;
}

.comment-container {
    padding-bottom: 0.5rem;
}

    .comment-container .comment {
        width: 100%;
    }

    .comment-container .commentViewOnly {
        width: 100%;
        color: var(--secColor);
        font-style: italic;
    }

.questionEdit-container, .clientEdit-container {
    padding: 0.5rem 0;
    align-items: center;
    border-top: 0.0625rem solid var(--secColor);
}

    .questionEdit-container .line1 {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
    }

    .questionEdit-container .line2 {
        display: flex;
        flex-direction: row;
        padding-left: 10%;
        margin: 0;
    }

    .questionEdit-container .line3 {
        padding-left: 10%;
        margin: 0;
        align-items: center;
    }

    .questionEdit-container .line4 {
        padding-left: 10%;
        margin: 0;
        align-items: center;
    }

    .questionEdit-container .line5 {
        padding-left: 10%;
        margin: 0;
        align-items: center;
    }

    .clientEdit-container .line {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
    }

        .clientEdit-container .line .Client-Name {
            width: 50%
        }

        .clientEdit-container .line .Client-Contact {
            width: 50%
        }

        .clientEdit-container .line .Client-Description {
            width: 100%
        }

        .clientEdit-container .line .Client-Industry {
            width: 100%
        }

        .clientEdit-container .line .Client-Country {
            width: 50%
        }

        .clientEdit-container .line .Client-Region {
            width: 50%
        }

        .clientEdit-container .line .Client-Address {
            width: 100%
        }

        .clientEdit-container .line .Client-City {
            width: 70%
        }

        .clientEdit-container .line .Client-Zip {
            width: 30%
        }

.questionEdit-number {
    width: 10%;
    font-size: 0.9rem;
}

.questionEdit {
    width: 90%;
}

.questionEdit-description {
    width: 100%;
}

.questionEdit-active {
    width: 25%;
}

.questionEdit-notes {
    margin-left: 2rem;
    width: 75%;
}

.pnl-questions .description {
    padding: 0.5rem 0;
    display: block;
    font-size: .9rem;
    color: var(--secColor);
    font-style: italic;
}

.btn-area {
    padding: 0.5rem;
    align-items: center;
}

    .btn-area .btn {
        justify-self: center;
        /*grid-column: span 3;*/
    }

/*.input .lbl {
    display: none;
}*/



.CMMS-Client {
    grid-column: span 11;
}

.CMMS-AssessmentDescription {
    grid-column: span 12;
}

.CMMS-AssessmentStartDate, .CMMS-AssessmentCompletedDate {
    grid-column: span 12;
}

.CMMS-CompletedCheck {
    grid-column: span 12;
}

.CMMS-Client-Label, .CMMS-AssessmentDescription-Label, .CMMS-AssessmentStartDate-Label, .CMMS-AssessmentCompletedDate-Label {
    grid-column: span 12;
}

.Client-Name-Label, .Client-Contact-Label, .Client-Description-Label, .Client-Industry-Label, .Client-Country-Label, .Client-Region-Label, .Client-Zip-Label, .Client-Address-Label, .Client-City-Label {
    grid-column: span 12;
}

.Client-Name, .Client-Contact, .Client-Description, .Client-Industry, .Client-Country, .Client-Region, .Client-Zip, .Client-Address, .Client-City {
    grid-column: span 12;
}



.categoryResult-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .categoryResult-Container .categoryTitle {
        margin-left: 2rem;
        width: 15rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
    }

    .categoryResult-Container .totalQuestionsTitle {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }

    .categoryResult-Container .totalScoreTitle {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }

    .categoryResult-Container .totalMaxScoreTitle {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }

    .categoryResult-Container .totalPercentageScoreTitle {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }

    .categoryResult-Container .commentTitle {
        margin-right: 2rem;
        padding: 0.25rem;
        color: red;
        flex-grow: 1;
    }


    .categoryResult-Container .category {
        margin-left: 2rem;
        width: 15rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
    }

    .categoryResult-Container .totalQuestions {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 2rem;
        text-align: right;
    }

    .categoryResult-Container .totalScore {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1.5rem;
        text-align: right;
    }

    .categoryResult-Container .totalMaxScore {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1.5rem;
        text-align: right;
    }

    .categoryResult-Container .totalPercentageScore {
        width: 7.5rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1.5rem;
        text-align: right;
    }

    .categoryResult-Container .comment {
        margin-right: 2rem;
        padding: 0.25rem;
        color: red;
        flex-grow: 1;
    }

.barChart-Container, .radarChart-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    padding: 1rem;
    justify-content: center;
    align-items: center;
}

    .barChart-Container .barChart {
    }

.calculations-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
    .calculations-Container .calculationTitle {
        margin-left: 2rem;
        width: 25rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
    }
    .calculations-Container .calculationDataTitle {
        width: 15rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }
    .calculations-Container .commentTitle {
        margin-right: 2rem;
        padding: 0.25rem;
        color: red;
        flex-grow: 1;
    }
    .calculations-Container .calculation {
        margin-left: 2rem;
        width: 25rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
    }
    .calculations-Container .calculationData {
        width: 15rem;
        padding: 0.25rem;
        border-bottom: 0.0625rem solid var(--secColor);
        padding-right: 1rem;
        text-align: right;
    }
    .calculations-Container .comment {
        margin-right: 2rem;
        padding: 0.25rem;
        color: red;
        flex-grow: 1;
    }

img[title$='Chart'] {
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
}

.answerCategory-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
    border-top: 0.0625rem solid var(--secColor);
}

    .answerCategory-Container .answerCategoryName {
        font-weight: bold;
    }

.answerQuestion-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    border-top: 0.0313rem solid var(--secColor);
    padding-top: 1rem;
}

    .answerQuestion-Container .questionLabel {
        font-size: 1rem;
        padding-bottom: 0.25rem;
        padding-right: 0.5rem;
        width: 75%;
        cursor: default;
    }


    .answerQuestion-Container .answerLabel {
        margin-left: auto;
        width: 20%;
        text-align: left;
        cursor: default;
        padding-right: 1rem;
    }

    .answerQuestion-Container .scoreLabel {
        margin-left: auto;
        padding: 0;
        text-align: right;
    }


.answerComment-Container {
    grid-column: span 12;
    display: flex;
    flex-direction: row;
}

    .answerComment-Container .commentViewOnly {
        width: 100%;
        color: var(--secColor);
        font-style: italic;
    }


.pnlUserData {
    grid-column-start: 3;
    grid-column: span 10;
}
.half {
    width: 45%;
}


.mob1 {
    grid-column: span 1;
}

.mob2 {
    grid-column: span 2;
}

.mob3 {
    grid-column: span 3;
}

.mob4 {
    grid-column: span 4;
}

.mob5 {
    grid-column: span 5;
}

.mob6 {
    grid-column: span 6;
}

.mob7 {
    grid-column: span 7;
}

.mob8 {
    grid-column: span 8;
}

.mob9 {
    grid-column: span 9;
}

.mob10 {
    grid-column: span 10;
}

.mob11 {
    grid-column: span 11;
}

.mob12 {
    grid-column: span 12;
}

/* SMALL TABLET SYTLES*/
@media screen and (min-width: 620px) {
    .CMMS-Client-Label {
        grid-column-start: 1;
        grid-column-end: span 7;
        grid-row-start: 1;
    }

    .CMMS-Client {
        grid-column-start: 1;
        grid-column-end: span 7;
        grid-row-start: 2;
    }

    .CMMS-AddClient {
        grid-column-start: 8;
        grid-column-end: span 1;
        grid-row-start: 2;
    }

    .CMMS-AssessmentDescription-Label {
        grid-column-start: 1;
        grid-column-end: span 12;
        grid-row-start: 3;
    }

    .CMMS-AssessmentDescription {
        grid-column-start: 1;
        grid-column-end: span 12;
        grid-row-start: 4;
    }

    .CMMS-AssessmentStartDate-Label {
        grid-column-start: 9;
        grid-column-end: span 4;
        grid-row-start: 1;
    }

    .CMMS-AssessmentStartDate {
        grid-column-start: 9;
        grid-column-end: span 4;
        grid-row-start: 2;
    }

    .CMMS-AssessmentCompletedDate-Label {
        grid-column-start: 9;
        grid-column-end: span 4;
        grid-row-start: 5;
    }

    .CMMS-AssessmentCompletedDate {
        grid-column-start: 9;
        grid-column-end: span 4;
        grid-row-start: 6;
    }

    .CMMS-CompletedCheck {
        grid-column-start: 5;
        grid-column-end: span 4;
        grid-row-start: 6;
    }

    .Client-Name-Label {
        grid-column-start: 1;
        grid-column-end: 8;
        grid-row-start: 1;
    }

    .Client-Contact-Label {
        grid-column-start: 8;
        grid-column-end: 13;
        grid-row-start: 1;
    }

    .Client-Description-Label, .Client-Industry-Label {
        grid-column: span 12;
    }

    .Client-Country-Label {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 7;
    }

    .Client-Region-Label {
        grid-column-start: 7;
        grid-column-end: 13;
        grid-row-start: 7;
    }

    .Client-Zip-Label {
        grid-column-start: 9;
        grid-column-end: 13;
        grid-row-start: 11;
    }

    .Client-Address-Label {
    }

    .Client-City-Label {
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row-start: 11;
    }

    .Client-Name {
        grid-column-start: 1;
        grid-column-end: 8;
        grid-row-start: 2;
    }

    .Client-Contact {
        grid-column-start: 8;
        grid-column-end: 13;
        grid-row-start: 2;
    }

    .Client-Description, .Client-Industry {
        grid-column: span 12;
    }

    .Client-Country {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 8;
    }

    .Client-Region {
        grid-column-start: 7;
        grid-column-end: 13;
        grid-row-start: 8;
    }

    .Client-Zip {
        grid-column-start: 9;
        grid-column-end: 13;
        grid-row-start: 12;
    }

    .Client-Address {
    }

    .Client-City {
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row-start: 12;
    }

    .assessment-container .assessment-group .assessment-label {
        display: block;
    }

    .pnlQuestionsTitle .title {
        font-size: 1.2rem;
    }

    .stb1 {
        grid-column: span 1;
    }

    .stb2 {
        grid-column: span 2;
    }

    .stb3 {
        grid-column: span 3;
    }

    .stb4 {
        grid-column: span 4;
    }

    .stb5 {
        grid-column: span 5;
    }

    .stb6 {
        grid-column: span 6;
    }

    .stb7 {
        grid-column: span 7;
    }

    .stb8 {
        grid-column: span 8;
    }

    .stb9 {
        grid-column: span 9;
    }

    .stb10 {
        grid-column: span 10;
    }

    .stb11 {
        grid-column: span 11;
    }

    .stb12 {
        grid-column: span 12;
    }
}

/* LARGE TABLETS AND LAPTOPS SYTLES */
@media screen and (min-width: 960px) {
    .btn-area {
        width: 75%
    }

    .btn {
        width: 6.250rem;
    }

    .input .lbl {
        display: inline-block;
    }

    .question-container {
        display: flex;
        flex-direction: row;
    }

        .question-container .question {
            width: 75%;
        }

        .question-container .questionLabel {
            width: 70%;
        }

        .question-container .answer {
            margin-left: auto;
        }

        .question-container .scoreLabel {
            margin-left: auto;
            padding: 0;
        }


    .pnl-categories .category-container {
        padding: 0.5rem 0;
    }

    .pnl-questions .description {
        padding: 0.5rem 0;
        display: block;
        font-size: .9rem;
        color: var(--secColor);
        font-style: italic;
    }

    .CMMS-Client-Label {
        grid-column-start: 2;
        grid-column-end: 8;
        grid-row-start: 1;
    }

    .CMMS-Client {
        grid-column-start: 2;
        grid-column-end: 8;
        grid-row-start: 2;
    }

    .CMMS-AddClient {
        grid-column-start: 9;
        grid-column-end: 8;
        grid-row-start: 2;
    }

    .CMMS-AssessmentDescription-Label {
        grid-column-start: 2;
        grid-column-end: 8;
        grid-row-start: 3;
    }

    .CMMS-AssessmentDescription {
        grid-column-start: 2;
        grid-column-end: 8;
        grid-row-start: 4;
    }

    .CMMS-AssessmentStartDate-Label {
        grid-column-start: 10;
        grid-column-end: span 2;
        grid-row-start: 1;
    }

    .CMMS-AssessmentStartDate {
        grid-column-start: 10;
        grid-column-end: span 2;
        grid-row-start: 2;
    }

    .CMMS-AssessmentCompletedDate-Label {
        grid-column-start: 10;
        grid-column-end: span 2;
        grid-row-start: 3
    }

    .CMMS-AssessmentCompletedDate {
        grid-column-start: 10;
        grid-column-end: span 2;
        grid-row-start: 4
    }

    .CMMS-CompletedCheck {
        grid-column-start: 8;
        grid-column-end: span 2;
        grid-row-start: 4;
        align-self: self-start;
        justify-self: self-end;
        padding-right: 1rem;
        padding-top: 0.25rem;
    }

    /* CSS Styles for newClient.aspx page */

    .Client-Name-Label {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
    }

    .Client-Contact-Label {
        grid-column-start: 5;
        grid-column-end: 8;
        grid-row-start: 1;
    }

    .Client-Description-Label, {
        grid-column: span 12;
    }

    .Client-Industry-Label {
        grid-column-start: 8;
        grid-column-end: 13;
        grid-row-start: 1;
    }

    .Client-Country-Label {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 7;
    }

    .Client-Region-Label {
        grid-column-start: 5;
        grid-column-end: 8;
        grid-row-start: 7;
    }

    .Client-Zip-Label {
        grid-column-start: 11;
        grid-column-end: 13;
        grid-row-start: 7;
    }

    .Client-City-Label {
        grid-column-start: 8;
        grid-column-end: 11;
        grid-row-start: 7;
    }

    .Client-Name {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 2;
    }

    .Client-Contact {
        grid-column-start: 5;
        grid-column-end: 8;
        grid-row-start: 2;
    }

    .Client-Description {
        grid-column-start: 1;
        grid-column-end: 13;
        grid-row-start: 4;
    }

    .Client-Industry {
        grid-column-start: 8;
        grid-column-end: 13;
        grid-row-start: 2;
    }

    .Client-Country {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 8;
    }

    .Client-Region {
        grid-column-start: 5;
        grid-column-end: 8;
        grid-row-start: 8;
    }

    .Client-Zip {
        grid-column-start: 11;
        grid-column-end: 13;
        grid-row-start: 8;
    }

    .Client-Address {
    }

    .Client-City {
        grid-column-start: 8;
        grid-column-end: 11;
        grid-row-start: 8;
    }


    .barChart-Container, .radarChart-Container {
        grid-column: span 6;
        display: flex;
        flex-direction: row;
        padding: 1rem;
        justify-content: center;
        align-items: center;
    }

    .lsb-noScroll {
        height: 388px;
    }

    .ltb1 {
        grid-column: span 1;
    }

    .ltb2 {
        grid-column: span 2;
    }

    .ltb3 {
        grid-column: span 3;
    }

    .ltb4 {
        grid-column: span 4;
    }

    .ltb5 {
        grid-column: span 5;
    }

    .ltb6 {
        grid-column: span 6;
    }

    .ltb7 {
        grid-column: span 7;
    }

    .ltb8 {
        grid-column: span 8;
    }

    .ltb9 {
        grid-column: span 9;
    }

    .ltb10 {
        grid-column: span 10;
    }

    .ltb11 {
        grid-column: span 11;
    }

    .ltb12 {
        grid-column: span 12;
    }
}

/* DESKTOP SYTLES */
@media screen and (min-width: 1200px) {
    .btn-area {
        width: 75%
    }

    .btn {
        width: 6.250rem;
    }


    .dkt1 {
        grid-column: span 1;
    }

    .dkt2 {
        grid-column: span 2;
    }

    .dkt3 {
        grid-column: span 3;
    }

    .dkt4 {
        grid-column: span 4;
    }

    .dkt5 {
        grid-column: span 5;
    }

    .dkt6 {
        grid-column: span 6;
    }

    .dkt7 {
        grid-column: span 7;
    }

    .dkt8 {
        grid-column: span 8;
    }

    .dkt9 {
        grid-column: span 9;
    }

    .dkt10 {
        grid-column: span 10;
    }

    .dkt11 {
        grid-column: span 11;
    }

    .dkt12 {
        grid-column: span 12;
    }
}