/* styling for page and controls */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                font-family: 'Karla',Arial, Helvetica, sans-serif;
                color: #434142;

            }
            .easy-button-button {
                width: auto !important;
            }
            .leaflet-left {
                padding-bottom: 25px;
            }
            #xheaderwrapperinside {
                padding-top:5px;
                padding-left:20px;
                padding-right:20px;
            }
            #xheaderwrapper {
                height: 150px;
                background-color: #FFF;
                position: fixed;
                top: 0px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
            }
            #pagewrapper {
                width:100vw;
                height: 100vh;
                height: -webkit-fill-available;

                text-align: center;
            }
            #xtoolwrapper {
                width: 100vw;
                max-width: 800px;
                display: inline-block;
                text-align: left;
                margin: 0 auto;
                padding: 0px;
                background-color: #FFF;
            }
            #xstartsurvey {
                width: 100vw;
                max-width: 800px;
                display: inline-block;
                text-align: left;
                margin: 0 auto;
                padding: 0px;
                background-color: #FFF;
                height: 100%;
                height: 100vh;
                height: -webkit-fill-available;

            }
            #xstartsurveyheader {
                padding-left: 10px;
                padding-right: 10px;
            }
            #xoptionalsurvey {
                width: 100vw;
                max-width: 800px;
                display: inline-block;
                text-align: left;
                margin: 0 auto;
                padding: 0px;
                background-color: #FFF;
                height: 100%;
                height: 100vh;
            }
            #xextrasurvey {
                width: 100vw;
                max-width: 800px;
                display: inline-block;
                text-align: left;
                margin: 0 auto;
                padding: 0px;
                background-color: #FFF;
                height: 100%;
                height: 100vh;
            }
            #surveyheader {
                background-color: #FFF;
                padding-top:5px;
                padding-left:20px;
                padding-right:20px;
            }
            #xoptionalsurveyheader {
                background-color: #FFF;
                padding-top:5px;
                padding-left:20px;
                padding-right:20px;
            }
            #xextrasurveyheader {
                background-color: #FFF;
                padding-top:5px;
                padding-left:20px;
                padding-right:20px;
            }
            .extraquestions {
                margin-bottom: 5px;
            }
            .extraquestionstable {
                border:0px;
                padding: 5px;
            }
            #xstartwrapper {
                background-color: #FFFFFF;
                font-family: 'Open Sans',Arial, Helvetica, sans-serif;
                width: 100%;
                max-width: 800px;
                display: inline-block;
                height: 80vh;
                height: -webkit-fill-available;
                height: fill-available;
                text-align: center;
            }
            #xstartbuttonwrapper {
                background-color: #FFFFFF;
            }
            #xendwrapper {
                background-color: #FFFFFF;
                font-family: 'Open Sans',Arial, Helvetica, sans-serif;
                width: 100%;
                max-width: 800px;

                height: 80vh;
                height: -webkit-fill-available;
                height: fill-available;
                text-align: center;
            }
            #xmapid {
                position: fixed;
                top: 330px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
                height: 100%;
                height: -webkit-calc(100% - 330px);
                height: -moz-calc(100% - 330px);
                height: calc(100% - 330px);
            }
            .topbar {
                padding: 0px;
                margin: 0px;
                height: 45px;
                width: 100%;
            }
            .textbar {
                padding: 0px;
                margin: 0px;
                width: 100%;
            }
            .controlsbar {
                padding: 0px;
                margin: 0px;
                height: 40px;
                width: 100%;
                float: left;
            }
            .progresstext {
                float: left;
                font-weight: 600;
                font-family: 'Karla',Arial, Helvetica, sans-serif;
                color: #434142;
                font-size: 16pt;
            }
            .question {
                float: left;
                font-weight: 400;
                font-family: 'Karla',Arial, Helvetica, sans-serif;
                color: #434142;
                font-size: 14pt;
                line-height:14pt;
            }
            .button {
                color: #000001;
                cursor: pointer;
                border:1px #000001 solid;
                padding: 5px;
                padding-right: 20px;
                padding-left: 20px;
                margin: 0px;
                height: 20px;
            }
            .startbuttonwrapper {
                position: fixed;
                height: 60px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                width: 100%;
                text-align: center;
                
            }
            .xstartbuttonwrapper {
                position: absolute;
                bottom: 10px;
                width: 100%;
                max-width: 800px;
            }
            #xstartbuttoninnerwrapper {
                margin-left: 10px;
                margin-right: 10px;
            }
            .startbutton {
                color: #231f21;
                font-family: 'Karla',Arial, Helvetica, sans-serif;
                cursor: pointer;
                border:2px #231f21 solid;
                padding: 5px;
                padding-right: 20px;
                padding-left: 20px;
                margin: 10px;
                height: 24px;
                font-size: 16pt;
                max-width: 800px;
                margin-left: auto;
                margin-right: auto;
            }
            .nextbutton {
                float: left;
                padding-right:12px;
                padding-left:15px;
            } 
            .backbutton {
                float: left;
                margin-right:5px;
                padding-left:6px;
                padding-right:7px;
            }
            .undobutton {
                display: none;
                float: right;
                margin-right:0px;
                margin-left:5px;
                padding-left:8px;
                padding-right:8px;
            } 
            #xnextbutton2 {
                margin-bottom:5px;
            }
            .savebutton {
                float: right;
                margin-top:10px
            } 
            .closebutton {
                float: right;
                padding: 0px;
                margin:0px;
                margin-top:-10px;
                text-align: center;
                font-size: 24px;
                cursor: pointer;
                color: #000001;
                font-weight: 400;
            } 
            .xcommentbutton {
                float: right;
                margin-left:5px;
                padding-left:7px;
                padding-right:7px;
                width: 20px;
            }
            .xcommentsavebutton {
                float: right;
                margin-left:10px;
                padding-left:7px;
                padding-right:7px;
                width: 20px;
            }
            .xcommenticon {
                width: 20px;
                vertical-align:middle;
            }

            .surveybutton {
                float: right;
                margin-left:5px;
                padding-left:7px;
                padding-right:7px;
                width: 20px;
            }
            .surveysavebutton {
                float: right;
                margin-left:10px;
                padding-left:7px;
                padding-right:7px;
                width: 20px;
            }
            .surveyicon {
                width: 20px;
                vertical-align:middle;
            }

            .backicon {
                height: 18px;;
                width: 10px;
                vertical-align:middle;
            }
            .nexticon {
                height: 18px;;
                width: 10px;
                vertical-align:middle;
            }
            .nextbuttontext {
                padding-right:5px;
            }
            .undoicon {
                width: 13px;
                vertical-align:middle;
            }
            .undopathbutton {
                display:none;
                float: right;
            }
            #xinputfield {
                display: none;
                float: left;
            }
            #xtextQuestion {
                margin: 0px;
                margin-right:5px;
                width: 150px;
                height: 26px;
                padding-left: 5px;
            }
            #xprofilequestions {
                padding-left:20px;
                padding-right:20px;
                background-color: #FFF;
            }
            #xoptionalquestions {
                padding-left:20px;
                padding-right:20px;
                background-color: #FFF;
            }
            #xextraquestions {
                padding-left:20px;
                padding-right:20px;
                background-color: #FFF;
            }
            .extratabletd {
                text-align: center;
                width: 20%;
                padding-right:10px;
            }
            #xinstructionsholder {
                z-index:11000;
                text-align: center;
                display: none;
                position: fixed;
                top: 3300px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
                height: 100%;
                height: -webkit-calc(100% - 150px);
                height: -moz-calc(100% - 150px);
                height: calc(100% - 150px);
                background-color: rgba(255,255,255,0.6);
            }

            
            #instructionsholder {
                z-index:11000;
                text-align: center;
                display: none;
                position: fixed;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 900px;
            }

            @media screen and (max-width: 991px) {
                #instructionsholder {
                  max-width: 700px;
                }
              }
              
              @media screen and (max-width: 767px) {
                #instructionsholder {
                  max-width: 90%;
                }
              }
              @media screen and (max-width: 479px) {
                #instructionsholder {
                  max-width: 90%;
                }
              }


            #instructionscontents {
                margin:15%;
                padding:0px;
                height:150px;
                width:auto;
                text-align: center;
            }
            #commentboxholder {
                z-index:10000;
                display:none;
            }
            @media screen and (max-width: 991px) {
                #commentboxholder {
                  max-width: 700px;
                  top:200px;
                }
            }
            @media screen and (max-width: 767px) {
                #commentboxholder {
                    max-width: 90%;
                    top:180px;
                }
            }
            @media screen and (max-width: 479px) {
                #commentboxholder {
                    max-width: 90%;
                }
            }


            #xcommentboxholder {
                position: fixed;
                top: 330px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
                height:250px;
                background-color: #FFF;
                z-index:10000;
                display:none;
            }
            #xcommentbox {
                margin:0px;
                padding:0px;
                padding-bottom:25px;
                height:250px;
                width:auto;
                background-color: #FFF;
                border: #000 solid thin;
            }
            #xcommentcontents {
                margin:10px;
            }
            #xcommenttitle {
                font-weight: 600;
                margin: 0px;
                padding: 0px;
                padding-bottom: 10px;
                width: 100%;
            }
            #xcommenttext {
                width: 100%;
                margin-top:10px;
            }
            #xcommentholder {
                width:98%;
                height:120px;
                margin: 0px;
                padding: 0px;
            }

  
            #xurveyboxholder {
                z-index:9000;
                text-align: left;
                display: none;
                position: fixed;
                top: 150px;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
                height: 100%;
                height: -webkit-calc(100% - 150px);
                height: -moz-calc(100% - 150px);
                height: calc(100% - 150px);
                background-color: rgba(255,255,255,0.6);
            }
  
            #surveyboxholder {
                text-align: left;
                display: none;
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 800px;
                height: 100%;
                height: -webkit-calc(100% - 150px);
                height: -moz-calc(100% - 150px);
                height: calc(100% - 150px);
            }
             #surveycontents {
                margin:0px;
                background-color: #FFF;
                padding-top:5px;
                padding-left:15px;
                padding-right:10px;
                padding-bottom:20px;
            }
            #surveytitle {
                font-weight: 600;
                margin: 0px;
                padding: 0px;
                padding-bottom: 10px;
                width: 100%;
            }
            #surveytext {
                width: 100%;
                margin-top:10px;
            }
            #surveyholder {
                width:98%;
                height:120px;
                margin: 0px;
                padding: 0px;
            }
            .selectpulldown {
                max-width: 95%;
            }


            .title {
                font-weight: 600;
                color: #434142;
            }
            .subtitle {
                font-weight: 400;
                color: #434142;
            }

            @media screen and (max-width: 375px) {
                .question {
                    font-size: 10pt;
                }
            }

            @media screen and (min-width: 460px) {
                #textQuestion{
                    width:300px;
                }
            }