﻿

@media screen and (min-width:768px) {


    .smallOnly {
        visibility: hidden;
    }

    .bigOnly {
        visibility: visible;
    }




    /*******************************************Single question ****************************************/




    .singleQuestion.qPreviews {
        min-width: 0px;
    }

    .singleQuestion {
        background: #fff;
        /*border-radius: 16px;*/
        color: #000000;
        box-shadow: 0px 5px 5px #888888;
        clear: both;
        height: auto;
        width: 100%;
        min-height: 200px;
        margin-bottom: 2.3vh;
        overflow: hidden;
        padding-bottom: 1.25vh;
        border: 1px solid #666;
        position: relative;
    }
        .singleQuestion.Instruction {
            min-height: unset;
            padding-bottom: 0px;
        }

    .singleQuestion .questionBody {
        background: #E8F0EC;
        /*background: #ccc;*/
        /*padding: 10px;*/
        /*min-height: 85px;*/
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
        min-height: 8vh;
        position: relative;
        display: block;
        /*border-bottom: 1px solid #808080;*/
        border-bottom: 1px solid #666;
    }
        .singleQuestion.Instruction .questionBody {
            margin-bottom: 0px;
        }
            .singleQuestion .questionBody .questionText {
                background: #E8F0EC;
                display: block;
                /*margin: 10px;*/
                padding: 1vh;
                height: 100%;
                /*padding-bottom: 20px;*/
                line-height: 1.65;
                letter-spacing: 1px;
                /*border-top-left-radius: 8px;
                border-top-right-radius: 8px;*/
                /*border-radius: 8px;*/
            }

                .singleQuestion .questionBody .questionText p {
                    margin: 1vh;
                }


    #pnlSingleQuestion {
        overflow: hidden;
        width: 100%;
        min-height: 200px;
        min-width: 680px;
    }

        #pnlSingleQuestion .singleQuestion {
            width: 100%;
            min-height: 200px;
            min-width: 680px;
            display: inline-block !important;
            float: left !important;
            clear: none !important;
            margin: 0px;
        }

    .highlight {
        background: #ffed95 !important;
        background: -webkit-radial-gradient(#fbfe00,#ffffff) !important; /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(#fbfe00,#ffffff) !important; /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(#fbfe00,#ffffff) !important; /* For Firefox 3.6 to 15 */
        background: radial-gradient(#fbfe00,#ffffff) !important; /* Standard syntax */
    }

    .singleQuestion .editBar {
        height: 40px;
        border-bottom: 1px solid #E5EAED;
        margin-bottom: 10px;
    }

    .singleQuestion input[type='checkbox'] {
        width: 1.25vw;
        min-width: 18px;
        transform: scale(1.25);
        margin-right: .25rem;
    }

    .singleQuestion input[type='radio'] {
        width: 1.25vw;
        min-width: 18px;
        transform: scale(1.25);
        margin-right: .25rem;
    }

    .singleQuestion .answerSpace .cbList span input[type='checkbox'] {
        display: block;
        float: left;
    }

    .singleQuestion .answerSpace .cbList span label {
        display: block;
        display: inline;
    }

    .singleQuestion .answerSpace label {
        font-weight: normal;
    }


    .answerSpace {
        padding: 10px;
        margin: auto 0;
    }
    .flexLeft .answerSpace {
        width: 50%;
    }
    .flexLeft .flexcenterRight img {
        margin-right: 25px;
        margin-left: 25px;
    }
        .flexLeft .answerSpace .rbList li, .flexLeft .answerSpace .cbList li {
            width: 100%
        }

        .answerSpace input {
            border-radius: 4px;
            /*color: #808080;*/
        }

            .answerSpace input[type='text'], .answerSpace input[type='url'] {
                width: 95%;
                border-radius: 4px;
                padding-left: 16px;
            }

        .answerSpace textarea {
            width: 95%;
            outline: none;
            padding-left: 16px;
        }

        .answerSpace input[type='email'] {
            width: 400px;
            border-radius: 4px;
            padding-left: 16px;
        }



        .answerSpace input[type='date'], .answerSpace input[type='email'], .answerSpace input[type='Number'], .answerSpace input[type='decimal'], .answerSpace input[type='text'], .answerSpace input[type='url'] {
            float: left;
            min-height: 40px;
            margin-left: 25px;
            border: 1px solid #3B6176;
            padding-left: 1rem;
        }

            .answerSpace input[type='date']:focus, .answerSpace input[type='email']:focus, .answerSpace input[type='Number']:focus, .answerSpace input[type='text']:focus, .answerSpace input[type='url']:focus, .answerSpace textarea:focus {
                outline: none;
                border: 1px solid #d421cb;
                /*color: #808080;*/
                border-radius: 4px;
                min-height: 45px;
            }

        .answerSpace textarea:focus {
            outline: none;
            border: 1px solid #d421cb;
            border-radius: 8px;
        }

        .answerSpace input[type='radio']:focus {
            outline: none;
        }

        .answerSpace .cbList {
            display: block;
            margin: 0 auto;
            width: 90%;
            min-height: 75px;
            text-align: left;
        }

            .answerSpace .cbList li, .answerSpace .cbList td {
                min-height: 35px;
                padding-bottom: .5rem;
            }

        .answerSpace .rbList {
            display: block;
            margin: 0 auto;
            min-height: 75px;
            text-align: left;
            float: none;
        }

            .answerSpace .rbList.vertical li {
                width: 100%;
                display: block;
                clear: both;
                margin-bottom: 1vh;
            }

            .answerSpace .rbList input {
                vertical-align: top;
            }

            .answerSpace .rbList label {
                max-width: 90%;
                /*display: inline-block;*/
            }






    /*****************************Survey page objects*******************************/



    #assessmentPanel, #pnlAssessment {
        padding-top: 2vh;
        padding-bottom: 2vh;
        position: relative;
        margin-top: 2vh;
        /*top: 2em;*/
        bottom: 2vh;
        width: 80%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        min-width: 640px;
    }

    .assessmentTitleBar {
        display: block;
        clear: both;
        height: 4vh;
    }

        .assessmentTitleBar .progress {
            margin-top: 1vh;
            height: 1vh;
            margin-bottom: 1px;
        }

    .surveyContainer {
        height: 96vh;
        display: block;
        clear: both;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pageText {
        display: block;
        clear: both;
        min-height: 6vh;
        background-color: #fff;
        width: 80%;
        padding: 3vh;
        margin-bottom: 3vh;
        margin-top: 3vh;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        /*font-weight: 700;*/
        box-shadow: 0 0 10px #888888;
        visibility: visible;
    }

        .pageText.faded {
            color: #d421cb !important;
        }

        .pageText.hiddenPageText {
            visibility: hidden;
            min-height: 0px;
            margin-top: 50px;
            background-color: #fff;
            padding: 0px;
            width: 80%;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            /*font-weight: 700;*/
            box-shadow: 0 0 10px #888888;
        }


    /***************************multiLikert*****************************************/
    .answerSpace .multiLikertColumnBackground {
        /*overflow: hidden;*/
        width: 100%;
        min-height: 7vh;
        height: auto;
        margin: 0px;
        padding: 0px;
        float: left;
    }



    .answerSpace .multiLikert_first {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: auto;
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        /*border:1px solid #666;*/
    }


    .answerSpace ul.multiLikert_first {
        max-height: 150px;
    }
    .answerSpace ul.multiLikert_first.angle45 {
        border-right: 1px solid #666;
    }

        .answerSpace .multiLikert_first li {
            flex-basis: 20;
            flex-grow: 100;
            flex-direction: column;
            /*padding: 0px;*/
            /*padding:4px;*/
            min-width: 0;
            min-height: 7vh;
            height: auto;
            float: left;
            text-align: center;
            position: relative;
            /*overflow: hidden;*/
            /*width: 3.75vw;*/
            width: 40%;
            margin: 0px;
            /*background: #eee;*/
        }

    .answerSpace .multiLikertHeader {
     /*   background: #eee;*/
        color: black;
        margin: 0px;
    }

    .answerSpace .multiLikertColumnHeader {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        font-size: .90rem;
        color: black;
        margin: 0px;
        text-align: center;
        padding-top: 4px;
    }

    .answerSpace .multiLikertRow.oddrow li {
        background: #eee;
    }

        .answerSpace .multiLikertColumnHeader span {
            text-align: center;
            /*padding: 4px !important;*/
            word-wrap: break-word;
            padding-top: 10px;
            font-weight: 700;
            min-width: 0;
        }


    .answerSpace .multiLikertRow {
        display: flex;
        flex-direction: row;
        width: 100%;
        list-style: none;
        margin: 0px;
        padding: 0px;
        /*min-height: 50px;*/
        clear: both;
        border-top: 1px solid #666;
    }

    .answerSpace .multiLikertLastRow {
        border-bottom: 1px solid #666;
    }

    /*.answerSpace .multiLikertRow .multiLikertRowHeader*/

    .answerSpace .multiLikertRow li:first-of-type {
        flex-basis: 100;
        flex-direction: column;
        /*background: #eee;*/
        color: black;
        margin: 0px;
        width: 40%;
        min-height: 5vh;
        height: auto;
        float: left;
        border-left: 1px solid #666 !important;
        padding: 10px;
        text-align: left;
    }

        .answerSpace .multiLikertRow li:first-of-type input[type=radio] {
            display: none;
        }



    .answerSpace .multiLikertRow li {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        float: left;
        zoom: 1;
        text-align: center;
        position: relative;
        /*overflow: hidden;*/
        width: 3.75vw;
        margin: 0px;
        background: #fff;
        box-sizing: border-box;
    }

    .answerSpace :not(.angle45).multiLikertRow li {
        border-right: 1px solid #666;
    }
    .answerSpace .multiLikert_first.angle45 span {
        bottom: 3px;
        right: 50%;
        position: absolute;
        transform: rotate(+45deg);
        transform-origin: center right;
        white-space: normal;
        width: 150px;
        text-align: right;
    }
        .answerSpace .multiLikertRow li input[type="radio"] {
        display: inline-block;
        margin-top: 50%;
        float: none;
        width: auto;
        margin: 0 auto;
        transform: translate(-50%, -50%);
        transform: translateY(100%);
    }

        .answerSpace .multiLikertRow li label {
        }


    /*******************************************************************/

    .multiLikertScale {
        display: flex;
        list-style: none;
        padding: 0px;
        margin: 0px;
        border: 1px dashed #666;
    }

        .multiLikertScale li {
            display: block;
            flex-basis: 20;
            flex-grow: 100;
            text-align: center;
            border-right: 1px dashed #666;
            /*border-bottom: 1px dashed #666;*/
        }

            .multiLikertScale li:last-child {
                border-right: none;
            }


    .matrixSelected {
        background: #ddd !important;
        color: #ddd !important;
    }

        .matrixSelected label {
            color: #ddd !important;
        }

    .matrixCell {
    }

        .matrixCell span {
        }


    /*****************LIKERT********************/

    .answerSpace .likertColumnBackground {
        /*overflow: hidden;*/
        width: 100%;
        min-height: 7vh;
        height: auto;
        margin: 0px;
        padding: 0px;
        float: left;
    }



    .answerSpace .likert_first {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: auto;
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
        border-bottom: 1px solid #666;
        /*border:1px solid #666;*/
    }


        .answerSpace .likert_first li {
            flex-basis: 20;
            flex-grow: 100;
            flex-direction: column;
            padding: 0px;
            font-size: 1.0rem;
            min-height: 7vh;
            height: auto;
            float: left;
            text-align: center;
            position: relative;
            overflow: hidden;
            width: 3.75vw;
            margin: 0px;
            /*background: #eee;*/
            border-right: 1px solid #666;
        }

            .answerSpace .likert_first li span {
            }

    .answerSpace .likertHeader {
        /*background: #eee;*/
        color: black;
        margin: 0px;
    }

    .answerSpace .likertColumnHeader {
        font-size: .75rem;
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        color: black;
        margin: 0px;
        text-align: center;
        /*padding-bottom:.5rem !important;*/
        padding-bottom: 10px !important;
    }


        .answerSpace .likertColumnHeader span {
            display: block;
            /*padding-top: .5rem;*/
            padding-top: 10px;
            font-weight: 700;
        }


    .answerSpace .likertRow {
        display: flex;
        flex-direction: row;
        width: 100%;
        list-style: none;
        margin: 0px;
        padding: 0px;
        /*min-height: 50px;*/
        clear: both;
        border-bottom: 1px solid #666;
        border-left: 1px solid #666;
    }

    .answerSpace .likertLastRow {
        border-bottom: 1px solid #666;
    }


    .answerSpace .likertRow li {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        float: left;
        zoom: 1;
        border-right: 1px solid #666;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 3.75vw;
        margin: 0px;
        background: #fff;
        box-sizing: border-box;
        height: 6vh;
    }




        .answerSpace .likertRow li input[type="radio"] {
            display: inline-block;
            margin-top: 50%;
            float: none;
            width: auto;
            margin: 0 auto;
            transform: translate(-50%, -50%);
            transform: translateY(100%);
        }

        .answerSpace .likertRow li label {
            display: none;
        }

        .answerSpace .likertRow li label {
        }


    /*************************************vertical Likert**************************************/

    .vLikert {
        list-style: none;
        /*background: #d421cb;*/
        text-align: left;
    }

        .vLikert li, .vLikertItem {
            height: 4vh;
            clear: both;
        }





    /******************survey navigation*********************************************/


    .assessmentNavBar {
        /*height: 6vh;*/
        padding-top: 1vh;
        line-height: 6vh;
    }
    .assessmentNavBar .btn-lg {
        margin-left: auto;
        margin-right: auto;
    }
     

    .btnSurveyNav {
        display: inline-block;
        background-color: hsl(196, 48%, 55%);
        color: #f6f6f6;
        border: 1px solid #f6f6f6;
        border-radius: 100px;
        height: 4vh;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }



        .btnSurveyNav .glyphicon {
            float: left;
            display: inline;
            margin: 0px;
            clear: none;
            top: 0px;
        }



        .btnSurveyNav:hover {
            color: #fff;
            text-decoration: none;
            box-shadow: 2px 2px #666;
        }


        .btnSurveyNav span.btnText {
            display: inline-block;
            padding-left: .5vw;
            padding-right: .5vw;
            height: 4vh;
            line-height: 4vh;
        }


        .btnSurveyNav div.btnText {
            padding-left: .5vw;
            padding-right: .5vw;
            height: 4vh;
            line-height: 4vh;
        }

        .btnSurveyNav .navIcon {
            font-size: 4vh;
            color: #f6f6f6;
        }

            .btnSurveyNav .navIcon.lefty, .btnSurveyNav .btnText.lefty {
                float: left;
            }

            .btnSurveyNav .navIcon.righty, .btnSurveyNav .btnText.righty {
                float: right;
            }

            .btnSurveyNav .navIcon.small {
                font-size: 3vh;
            }

    .importantMessage {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100vw;
        height: 100vh;
        background-color: rgba(100,100,100,0.75);
        z-index: 1500;
    }

        .importantMessage .messageBox {
            position: relative;
            width: 75vw;
            height: 75vh;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            background: #E5EAED;
            border: 2px solid #666;
        }

            .importantMessage .messageBox .messageText {
                overflow-x: hidden;
                overflow-y: auto;
                padding: 2vh;
                height: 75vh;
            }


            .importantMessage .messageBox .messageBtnRow {
                position: absolute;
                bottom: 0px;
                height: 10vh;
                width: 100%;
                text-align: center;
            }

        .importantMessage .messageOK {
            position: absolute;
            bottom: 3vh;
            left: 50%;
            transform: translate(-50%);
        }
          .messageBox .messageText .flex-medium {
            font-size: 3.5vh;
        }
        .messageBox .messageText .flex-small {
            font-size: 2.5vh;
        }
}


@media print {
    @page {
        size: Auto;

    }
    .printPage {
      /*  width: 190.5mm !important;
        height: 254mm !important;
        margin-left: 25mm 25mm 25mm 25mm;
        page-break-before: always !important;
        page-break-after: always !important;*/
        /*page-break-inside: avoid !important;*/
    }

    div.singleQuestion:has(div[qtype="MULTI_LIKERT"]) {
        page-break-after:always !important;
    }
    .answerSpace ul:nth-child(13) {
        page-break-after: always !important;
    }
    .hidden {
        display: block !important;
    }
    .assessmentNavBar {
        display: none !important;
    }
    ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: transparent;
    }

    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }

    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: transparent;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: transparent;
    }

    input::placeholder {
        color: transparent;
    }

    textarea::-webkit-input-placeholder {
        /* WebKit browsers */
        color: transparent;
    }

    textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }

    textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: transparent;
    }

    textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: transparent;
    }

    textarea::placeholder {
        color: transparent;
    }
    .smallOnly {
        visibility: hidden;
    }

    .bigOnly {
        visibility: visible;
    }




    /*******************************************Single question ****************************************/




    .singleQuestion.qPreviews {
        min-width: 0px;
    }



    .singleQuestion .questionBody {
        background: #ffffff;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
        min-height: 8vh;
        position: relative;
        display: block;
        /*border-bottom: 1px solid #808080;*/
        border-bottom: 1px solid #666;
    }

        .singleQuestion .questionBody .questionText {
            background: #E8F0EC;
            display: block;
            /*margin: 10px;*/
            padding: 1vh;
            height: 100%;
            /*padding-bottom: 20px;*/
            line-height: 1.65;
            letter-spacing: 1px;
            /*border-top-left-radius: 8px;
                border-top-right-radius: 8px;*/
            /*border-radius: 8px;*/
        }

            .singleQuestion .questionBody .questionText p {
                margin: 1vh;
            }

    .highlight {
        background: #ffed95 !important;
        background: -webkit-radial-gradient(#fbfe00,#ffffff) !important; /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(#fbfe00,#ffffff) !important; /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(#fbfe00,#ffffff) !important; /* For Firefox 3.6 to 15 */
        background: radial-gradient(#fbfe00,#ffffff) !important; /* Standard syntax */
    }

    .singleQuestion .editBar {
        height: 40px;
        border-bottom: 1px solid #E5EAED;
        margin-bottom: 10px;
    }

    .singleQuestion input[type='checkbox'] {
        width: 1.25vw;
        min-width: 18px;
        transform: scale(1.25);
        margin-right: .25rem;
    }

    .singleQuestion input[type='radio'] {
        width: 1.25vw;
        min-width: 18px;
        transform: scale(1.25);
        margin-right: .25rem;
    }

    .singleQuestion .answerSpace .cbList span input[type='checkbox'] {
        display: block;
        float: left;
    }

    .singleQuestion .answerSpace .cbList span label {
        display: block;
        display: inline;
    }

    .singleQuestion .answerSpace label {
        font-weight: normal;
    }


    .answerSpace {
        padding: 10px;
        margin: auto 0;
    }



        .answerSpace input {
            border-radius: 4px;
            /*color: #808080;*/
        }

            .answerSpace input[type='text'], .answerSpace input[type='url'] {
                width: 95%;
                border-radius: 4px;
                padding-left: 16px;
            }

        .answerSpace textarea {
            width: 95%;
            border: none;
            outline: none;
            padding-left: 16px;
        }

        .answerSpace input[type='email'] {
            width: 400px;
            border-radius: 4px;
            padding-left: 16px;
        }



        .answerSpace input[type='date'], .answerSpace input[type='email'], .answerSpace input[type='Number'], .answerSpace input[type='text'], .answerSpace input[type='url'] {
            float: left;
            min-height: 40px;
            margin-left: 25px;
            border: 1px solid #3B6176;
            padding-left: 1rem;
        }

            .answerSpace input[type='date']:focus, .answerSpace input[type='email']:focus, .answerSpace input[type='Number']:focus, .answerSpace input[type='text']:focus, .answerSpace input[type='url']:focus, .answerSpace textarea:focus {
                outline: none;
                border: 1px solid #d421cb;
                /*color: #808080;*/
                border-radius: 4px;
                min-height: 45px;
            }

        .answerSpace textarea:focus {
            outline: none;
            border: 1px solid #d421cb;
            border-radius: 8px;
        }

        .answerSpace input[type='radio']:focus {
            outline: none;
        }

        .answerSpace .cbList {
            display: block;
            margin: 0 auto;
            width: 90%;
            min-height: 75px;
            text-align: left;
        }

            .answerSpace .cbList li, .answerSpace .cbList td {
                min-height: 35px;
                padding-bottom: .5rem;
            }

        .answerSpace .rbList {
            display: block;
            margin: 0 auto;
            min-height: 75px;
            text-align: left;
            float: none;
        }

            .answerSpace .rbList.vertical li {
                width: 100%;
                display: block;
                clear: both;
                margin-bottom: 1vh;
            }

            .answerSpace .rbList input {
            }

            .answerSpace .rbList label {
                display: inline-block;
            }






    /*****************************Survey page objects*******************************/



    #assessmentPanel, #pnlAssessment {
        padding-top: 2vh;
        padding-bottom: 2vh;
        position: relative;
        margin-top: 2vh;
        /*top: 2em;*/
        bottom: 2vh;
        width: 80%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        min-width: 640px;
    }




    .assessmentTitleBar {
        display: block;
        clear: both;
        height: 4vh;
    }

        .assessmentTitleBar .progress {
            margin-top: 1vh;
            height: 1vh;
            margin-bottom: 1px;
        }




    .surveyContainer {
        margin-top: 4vh;
        height: 96vh;
        display: block;
        clear: both;
        overflow: visible !important;
    }



    .pageText {
        display: block;
        clear: both;
        min-height: 6vh;
        background-color: #fff;
        width: 80%;
        padding: 3vh;
        margin-bottom: 3vh;
        margin-top: 3vh;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        /*font-weight: 700;*/
        box-shadow: 0 0 10px #888888;
        visibility: visible;
    }

        .pageText.faded {
            color: #d421cb !important;
        }

        .pageText.hiddenPageText {
            visibility: hidden;
            min-height: 0px;
            margin-top: 50px;
            background-color: #fff;
            padding: 0px;
            width: 80%;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            /*font-weight: 700;*/
            box-shadow: 0 0 10px #888888;
        }

    .singleQuestion {
        border: 1px solid #666;
        margin-bottom: 2.3vh;
        overflow: hidden;
        padding-bottom: 1.25vh;
    }
    /***************************multiLikert*****************************************/
    .answerSpace .multiLikertColumnBackground {
        /*overflow: hidden;*/
        width: 100%;
        min-height: 7vh;
        height: auto;
        margin: 0px;
        padding: 0px;
        float: left;
    }



    .answerSpace .multiLikert_first {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: auto;
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        /*border:1px solid #666;*/
    }


        .answerSpace .multiLikert_first .topLeftMultiLikert {
            /*width: 50%;
            border-left:none;*/
        }

        .answerSpace .multiLikert_first li {
            flex-basis: 20;
            flex-grow: 100;
            flex-direction: column;
            /*padding: 0px;*/
            /*padding:4px;*/
            min-width: 0;
            min-height: 7vh;
            height: auto;
            float: left;
            text-align: center;
            position: relative;
            overflow: hidden;
            /*width: 3.75vw;*/
            width: 40%;
            margin: 0px;
            /*background: #eee;*/
        }

    .answerSpace .multiLikertHeader {
        /*background: #eee;*/
        color: black;
        margin: 0px;
    }

    .answerSpace .multiLikertColumnHeader {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
      /*  font-size: .70rem;*/
        color: black;
        margin: 0px;
        text-align: center;
        padding-top: 4px;
    }


        .answerSpace .multiLikertColumnHeader span {
            text-align: center;
            /*padding: 4px !important;*/
            word-wrap: break-word;
            padding-top: 10px;
            font-weight: 700;
            min-width: 0;
        }


    .answerSpace .multiLikertRow {
        display: flex;
        flex-direction: row;
        width: 100%;
        list-style: none;
        margin: 0px;
        padding: 0px;
        /*min-height: 50px;*/
        clear: both;
        border-top: 1px solid #666;
    }

    .answerSpace .multiLikertLastRow {
        border-bottom: 1px solid #666;
    }
  
    .answerSpace .multiLikertRow .multiLikertRowHeader {
        flex-basis: 100;
        flex-direction: column;
        /*background: #eee;*/
        color: black;
        margin: 0px;
        /*width: 40%;*/
        min-height: 5vh;
        height: auto;
        float: left;
        border-left: 1px solid #666 !important;
        padding: 10px;
        text-align: left;
    }


    .answerSpace .multiLikertRow li:nth-child(1) {
        width: 40%;
    }
            .answerSpace .multiLikertRow li {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        float: left;
        zoom: 1;
        border-right: 1px solid #666;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 3.75vw;
        margin: 0px;
        background: #fff;
        box-sizing: border-box;
    }


        .answerSpace .multiLikertRow li:first-of-type input[type="radio"] {
            display: none;
        }

        .answerSpace .multiLikertRow li input[type="radio"] {
            display: inline-block;
            margin-top: 50%;
            float: none;
            width: auto;
            margin: 0 auto;
            transform: translate(-50%, -50%);
            transform: translateY(100%);
        }

        .answerSpace .multiLikertRow li label {
        }


    /*******************************************************************/

    .multiLikertScale {
        display: flex;
        list-style: none;
        padding: 0px;
        margin: 0px;
        border: 1px dashed #666;
    }

        .multiLikertScale li {
            display: block;
            flex-basis: 20;
            flex-grow: 100;
            text-align: center;
            border-right: 1px dashed #666;
            /*border-bottom: 1px dashed #666;*/
        }

            .multiLikertScale li:last-child {
                border-right: none;
            }


    .matrixSelected {
        background: #ddd !important;
        color: #ddd !important;
    }

        .matrixSelected label {
            color: #ddd !important;
        }

    .matrixCell {
    }

        .matrixCell span {
        }


    /*****************LIKERT********************/

    .answerSpace .likertColumnBackground {
        /*overflow: hidden;*/
        width: 100%;
        min-height: 7vh;
        height: auto;
        margin: 0px;
        padding: 0px;
        float: left;
    }



    .answerSpace .likert_first {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: auto;
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
        border-bottom: 1px solid #666;
        /*border:1px solid #666;*/
    }


        .answerSpace .likert_first li {
            flex-basis: 20;
            flex-grow: 100;
            flex-direction: column;
            padding: 0px;
            font-size: .75rem;
            min-height: 7vh;
            height: auto;
            float: left;
            text-align: center;
            position: relative;
            overflow: hidden;
            width: 3.75vw;
            margin: 0px;
            /*background: #eee;*/
            border-right: 1px solid #666;
        }

            .answerSpace .likert_first li span {
            }

    .answerSpace .likertHeader {
        /*background: #eee;*/
        color: #666;
        margin: 0px;
    }

    .answerSpace .likertColumnHeader {
        font-size: .75rem;
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        color: black;
        margin: 0px;
        text-align: center;
        /*padding-bottom:.5rem !important;*/
        padding-bottom: 10px !important;
    }


        .answerSpace .likertColumnHeader span {
            display: block;
            /*padding-top: .5rem;*/
            padding-top: 10px;
            font-weight: 700;
        }


    .answerSpace .likertRow {
        display: flex;
        flex-direction: row;
        width: 100%;
        list-style: none;
        margin: 0px;
        padding: 0px;
        /*min-height: 50px;*/
        clear: both;
        border-bottom: 1px solid #666;
        border-left: 1px solid #666;
    }

    .answerSpace .likertLastRow {
        border-bottom: 1px solid #666;
    }


    .answerSpace .likertRow li {
        flex-basis: 20;
        flex-grow: 100;
        flex-direction: column;
        float: left;
        zoom: 1;
        border-right: 1px solid #666;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 3.75vw;
        margin: 0px;
        background: #fff;
        box-sizing: border-box;
        height: 6vh;
    }




        .answerSpace .likertRow li input[type="radio"] {
            display: inline-block;
            margin-top: 50%;
            float: none;
            width: auto;
            margin: 0 auto;
            transform: translate(-50%, -50%);
            transform: translateY(100%);
        }

        .answerSpace .likertRow li label {
            display: none;
        }

        .answerSpace .likertRow li label {
        }


    /******************survey navigation*********************************************/


    .assessmentNavBar {
        /*height: 6vh;*/
        padding-top: 1vh;
        line-height: 6vh;
    }
   .assessmentNavBar .btn-lg {
        margin-left: auto;
        margin-right: auto;
    }
    .btnSurveyNav {
        display: inline-block;
        background-color: hsl(196, 48%, 55%);
        color: #f6f6f6;
        border: 1px solid #f6f6f6;
        border-radius: 100px;
        height: 4vh;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }



        .btnSurveyNav .glyphicon {
            float: left;
            display: inline;
            margin: 0px;
            clear: none;
            top: 0px;
        }



        .btnSurveyNav:hover {
            color: #fff;
            text-decoration: none;
            box-shadow: 2px 2px #666;
        }


        .btnSurveyNav span.btnText {
            display: inline-block;
            padding-left: .5vw;
            padding-right: .5vw;
            height: 4vh;
            line-height: 4vh;
        }


        .btnSurveyNav div.btnText {
            padding-left: .5vw;
            padding-right: .5vw;
            height: 4vh;
            line-height: 4vh;
        }

        .btnSurveyNav .navIcon {
            font-size: 4vh;
            color: #f6f6f6;
        }

            .btnSurveyNav .navIcon.lefty, .btnSurveyNav .btnText.lefty {
                float: left;
            }

            .btnSurveyNav .navIcon.righty, .btnSurveyNav .btnText.righty {
                float: right;
            }

            .btnSurveyNav .navIcon.small {
                font-size: 3vh;
            }

    .importantMessage {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100vw;
        height: 100vh;
        background-color: rgba(100,100,100,0.75);
        z-index: 150;
    }

        .importantMessage .messageBox {
            position: relative;
            width: 50vw;
            height: 95vh;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            background: #fff;
            border: 2px solid #666;
        }

            .importantMessage .messageBox .messageText {
                overflow-x: hidden;
                overflow-y: auto;
                padding: 2vh;
                height: 85vh;
            }


            .importantMessage .messageBox .messageBtnRow {
                position: absolute;
                bottom: 0px;
                height: 10vh;
                width: 100%;
                text-align: center;
            }

        .importantMessage .messageOK {
            position: absolute;
            bottom: 3vh;
            left: 50%;
            transform: translate(-50%);
        }

 
}/*End of @media print */
