/* 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;
            }
            .leaflet-container.leaflet-grab {
                cursor: crosshair;
            }
            #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%;
                min-width: 900px;
                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: 900px;
                height: 100%;
            }




            .incomments-card-outer {
            position: relative;
            filter: drop-shadow(0 0 5px rgba(114, 114, 114, 0.65));
            }

            .incomments-card {
            position: relative;
            width: 100%;
            height: 229px;
            background: #ffffff;
            border-radius: 7px;
                display: flex;
                justify-content: center;
            }

            .incomments-card::before {
            content: '';
            position: absolute;
            top: -16px;
            right: 34px;
            width: 32px;
            height: 32px;
            background: #ffffff;
            transform: rotate(45deg);
            }
            .incomments-card-inner {
                width: 100%;
                height: 100%;
                display:flex;
                justify-content: center;
                align-items: center;
            }

            .incomments-bubble {
            display: flex;
            width: 141px;
            height: 157px;
            margin-right:20px;
            margin-left:20px;
            justify-content: center;
            align-items: center;
            }



            .incomments-plus-h {
            position: absolute;
            left: 32px;
            top: 37px;
            width: 30px;
            height: 6px;
            background: #ffffff;
            border-radius: 3px;
            }

            .incomments-plus-v {
            position: absolute;
            left: 46px;
            top: 22px;
            width: 6px;
            height: 30px;
            background: #ffffff;
            border-radius: 3px;
            }

            .incomments-text-area {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                gap: 12px;
                max-width:75%;
                margin-right:20px;
                z-index:2000;
            }

            .incomments-text-line {
                text-align: left;
                font-family: Work Sans, sans-serif;
                font-size: 36px;
                line-height: normal;
                font-weight: 600;
                color: #1a1a1a;
                margin: 0;
            }



            .inpin-card-outer {
            position: relative;
            filter: drop-shadow(0 0 5px rgba(114, 114, 114, 0.65));
            }

            .inpin-card {
            position: relative;
            width: 100%;
            height: 300px;
            background: #ffffff;
            border-radius: 7px;
                display: flex;
                justify-content: center;
            }

            /* Rotated square at bottom center */
            .inpin-card::before {
            content: '';
            position: absolute;
            bottom: -16px;
            left: calc(50% - 16px);
            width: 32px;
            height: 32px;
            background: #ffffff;
            transform: rotate(45deg);
            }

            .inpin-card-inner {
                width: 100%;
                height: 100%;
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }



            .inpin-header {
            height: 100px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000000;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
            }

            .inpin-header-text {
                font-family: Work Sans, sans-serif;
                font-size: 24pt;
                color: #ffffff;
                line-height: normal;
                font-weight: 600;
                margin: 0;
            }

            .inpin-card-footer {
                width: 100%;
                height: 200px;
                display:flex;
                justify-content: center;
                align-items: center;
            }

            .inpin-bubble {
            display: flex;
            width: 86px;
            height: 116px;
            margin-right:20px;
            margin-left: 20px;
            justify-content: center;
            align-items: center;
            }


            .inpin-plus-h {
            position: absolute;
            left: 32px;
            top: 37px;
            width: 30px;
            height: 6px;
            background: #ffffff;
            border-radius: 3px;
            }

            .inpin-plus-v {
            position: absolute;
            left: 46px;
            top: 22px;
            width: 6px;
            height: 30px;
            background: #ffffff;
            border-radius: 3px;
            }

            .inpin-text-area {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                gap: 12px;
                max-width:75%;
                margin-right:20px;
                z-index:2000;
            }

            .inpin-text-line {
                text-align: left;
                font-family: Work Sans, sans-serif;
                font-size: 36px;
                line-height: normal;
                font-weight: 600;
                color: #1a1a1a;
                margin: 0;
            }


            

            .inpath-card-outer {
            position: relative;
            filter: drop-shadow(0 0 5px rgba(114, 114, 114, 0.65));
            }

            .inpath-card {
            position: relative;
            width: 100%;
            height: 200px;
            background: #ffffff;
            border-radius: 7px;
                display: flex;
                justify-content: center;
            }

            /* Rotated square at bottom center */
            .inpath-card::before {
            content: '';
            position: absolute;
            bottom: -16px;
            left: calc(50% - 16px);
            width: 32px;
            height: 32px;
            background: #ffffff;
            transform: rotate(45deg);
            }

            .inpath-card-inner {
                width: 100%;
                height: 100%;
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }



            .inpath-card-footer {
                width: 100%;
                height: 200px;
                display:flex;
                justify-content: center;
                align-items: center;
            }

            .inpath-bubble {
                display: flex;
                width: 200px;
                height: 200px;
                margin-right:20px;
                margin-left: 20px;
                justify-content: center;
                align-items: center;
            }


            .inpath-plus-h {
                position: absolute;
                left: 32px;
                top: 37px;
                width: 30px;
                height: 6px;
                background: #ffffff;
                border-radius: 3px;
            }

            .inpath-plus-v {
                position: absolute;
                left: 46px;
                top: 22px;
                width: 6px;
                height: 30px;
                background: #ffffff;
                border-radius: 3px;
            }

            .inpath-text-area {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                gap: 12px;
                max-width:75%;
                margin-right:20px;
                z-index:2000;
            }

            .inpath-text-line {
                text-align: left;
                font-family: Work Sans, sans-serif;
                font-size: 36px;
                line-height: normal;
                font-weight: 600;
                color: #1a1a1a;
                margin: 0;
            }

            @media screen and (max-width: 991px) {
                #instructionsholder {
                  width: stretch;
                  max-width: 728px;
                }
              }
              
              @media screen and (max-width: 767px) {
                #instructionsholder {
                  width:stretch;
                }
                .incomments-text-line {
                    font-size: 28px;
                }
                .inpin-header-text {
                    font-size: 20px;
                }
                .inpin-text-line {
                    font-size: 28px;
                }
                .inpath-text-line {
                    font-size: 28px;
                }
              }
              @media screen and (max-width: 479px) {
                #instructionsholder {
                  width:stretch;
                }
                .incomments-text-line {
                    font-size: 24px;
                }
                .inpin-header-text {
                    font-size: 18px;
                }
                .inpin-text-line {
                    font-size: 24px;
                }
                .inpath-text-line {
                    font-size: 24px;
                }
              }


            #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;
                }
            }