 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        .container{
            width: 100%;
            height: 100vh;
            background: #f2f2f2;
            display: flex;

        }
        .map{

            display: block;

        }

        .image_box{
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .extent-image {
             display: flex;

        }

        .floating-menu1 {
            font-family: sans-serif;
             background: white;

            padding: 5px;;

            z-index: 101;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 50px;
            width: 250px;
            border-radius: 20px;
        }
        /*width: 450px; */

        .floating-menu2 {
            font-family: sans-serif;
            position:fixed;
            width:20%;
            height:50px;
            margin-left:-15%;
            background: white;
            bottom:0px;
            left:50%;
            z-index: 110;
            border-radius: 20px;
            display: none;
            opacity: .5; 
        }



        /* Maintain form  */
        .floating-menu5 {
            font-family: sans-serif;
            background-color: white;
            padding: 5px;
            width: 500px;
            z-index: 100;
            position: fixed;
            top: 0px;
            right: 5px;
            height: 500px;
            border-radius: 20px;
            display: none;

        }

        /* file select */
        .floating-menu6 {
            font-family: sans-serif;
            background-color: white;
            padding: 10px;
            width: 450px;
            z-index: 100;
            position: fixed;
            top: 510px;
            right: 5px;
            height: 50px;
            border-radius: 20px;
            display: none;

        }

        .labelInput2 Label{
           margin-left: 10px;
           font-size: 14px;
        }
        .labelInput2 Input{
            margin-bottom: 10px;
            width: 100px;
        }

        .labelInput Input{
        margin-bottom: 10px;
        width: 250px;
      }
       .labelInput Select{
        font-size: 14px;
      }
       .labelInput Option{
        font-size: 14px;
      }
      .labelInput Label {
        display: inline-block;
        width: 120px;
        vertical-align: top;
        font-size: 14px;
         margin-left: 10px;
      }
      .labelInput Button{
        width: 80px;
      }

      .center {
        margin: 0;
        position: absolute;
        top: 420px;
        right: 110px;

        }
        .center2 {
        margin: 0;
        position: absolute;
        top: 450px;
        right: 195px;

        }
        .Pwll {
            display: block;
            position: absolute;
            width: 30px;
            height: 30px;
        }

            .labelInput TextArea {
                height: 100px;
                width: 335px;
            }

        .btn{
            padding: 10px 60px;
            background: #fff;
            border: 0;
            outline: none;
            cursor: pointer;
            font-size: 22px;
            font-weight: 500;
            border-radius: 30px;
        }
        .divPopup {
            display: block;
            position: absolute;
            top: 150px;
            left: 500px;
            z-index: 99;
            background: white;
        }

        div.scroll {
                margin:4px, 4px;
                padding:10px;


                overflow-x: hidden;
                overflow-y: hidden;
                text-align: justify;
                font-size: 14px;
                color: brown;
        }
        .popup{
            text-align: center;
            align-items: center;


        }
        /*padding 30px 30px*/
        .open-popup{
            visibility: visible;
        }
        .popup img{
            height: 200px;
            display: flex;
            justify-content: middle;
            border-radius: 10%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            margin-left: auto;
            margin-right: auto;
            margin-top: 2em;
        }
        .popup h2{
            font-size: 24px;
            font-weight: 1000;
            margin: 5px;
        }
        .popup p{
            font-size: 20px;
            font-weight: 250;
            margin: 5px;
        }
        .popup button{
            position: relative; /* or position: absolute; */
            top: 0;
            right: 0;
            margin: auto;
            border-radius: 10%;
            padding: 5px;
            color: brown;
            font-weight: bold;

            vertical-align: bottom;

            width: 50px;
        }
        .popup textarea{
            background: white;
            font-size: 18px;
            color: brown;
            width: 300px;
            height: 100px;
            margin-bottom: 1em;
            display: block;
            margin-left:auto;
            margin-right:auto;
            resize: none;
            padding: 3px;

        }
        .popup label{
            font-size: 18px;
            text-align: center;
            padding: 3px;
        }
        .popup a{

            font-size: 18px;


            margin-top: 2em;
            display: block;
            margin-left:auto;
            margin-right:auto;

            padding: 3px;

        }

        .popupA {

        padding: 100px;
        background-color: blue;

        }




        .content {
            padding: 16px;
        }

        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }

        .sticky + .content {
            padding-top: 60px;
        }

         /* The container must be positioned relative: */
        .custom-select {
          position: relative;
          font-family: Arial;

        }

        .custom-select select {
          /*display: none;*/ /*hide original SELECT element: */
        }

        .select-selected {
          background-color: brown;

        }

        /* Style the arrow inside the select element: */
        .select-selected:after {
          position: absolute;
          content: '';
          top: 14px;
          right: 10px;
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-color: #fff transparent transparent transparent;
        }

        /* Point the arrow upwards when the select box is open (active): */
        .select-selected.select-arrow-active:after {
          border-color: transparent transparent #fff transparent;
          top: 7px;
        }

        /* style the items (options), including the selected item: */
        .select-items div,.select-selected {
          color: #ffffff;
          padding: 8px 16px;
          border: 1px solid transparent;

          cursor: pointer;
          border-radius: 15px;
        }



        /* Style items (options): */
        .select-items {
          position: absolute;
          background-color: brown;
          top: 100%;
          left: 0;
          right: 0;
          z-index: 99;


        }
        caption { text-align: left; }

        /* Hide the items when the select box is closed: */
        .select-hide {
          display: none;
        }

        .select-items div:hover, .same-as-selected {
          background-color: rgba(0, 0, 0, 0.1);
        }
        .containerZoom{

            padding: 10px;
        }


            /* The containerCheckbox */
        .containerCheckbox {
            display: block;
            position: relative;

            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            user-select: none;
            border: 3px;
            border-radius: 10px;
        }
        .menuButton{
            font-size: 20px;
            color: brown;
            width: 80px;
            height: 30px;
            margin: 5px;
            border: none;
            border-radius: 10%;
        }

        /* Hide the browser's default checkbox */
        .containerCheckbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .containerCheckbox:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .containerCheckbox input:checked ~ .checkmark {
            background-color: brown;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: '';
            position: absolute;

        }
        /* display: none; */

        /* Show the checkmark when checked */
        .containerCheckbox input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .containerCheckbox .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .image_hide {
                    visibility: hidden;
        }
        .checksWrapper {
            position: fixed;
            display: none;
            left: 0px;
            top: 20px;
            opacity: 1.0;
            background: white;
            width: 100px;

        }
        /*grid-template-columns: repeat(3, 120px); */

        .zoomWrapper{
           font-size: 18px;
            position: fixed;
            display: block;
            left: 100px;
            top: 12px;
            opacity: 1.0;
            background: white;

        }
        .divLegend {
            position: absolute;
            left: 200px;
            top: 50px;
            z-index: 112;
            width: 400px;
            height:620px;

            background-color: white;


            color: brown;
            display: none;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
        }

        label{
             font-size: 22px;
             color: brown;
        }


        option {
            background-color: brown;
            color: white;
            font-size: 18px;
        }
        select{
            background-color: brown;
            color: white;
            font-size: 18px
        }
        .sliderContainer {
             margin: 15px;
             display: grid;
             grid-template-columns: 60px  60px 1fr;


        }

        /*repeat(2, 120px)  */

        .slider {
            -webkit-appearance: none;
            width: 220px;
            height: 30px;
            background: #FFF8DC;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
            border-radius: 5px;


        }

        .slider:hover {
            opacity: 1;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            background: brown;
            cursor: pointer;
            border-radius: 5px;

        }

        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            background: brown;
            cursor: pointer;

        }
        .range_value {

           color: brown;
           font-size: 24px;
           font-weight: bold;
           width: 50px;
           text-align: center;

        }



       /* The container */
        .containerCheckmark {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

        }

        /* Hide the browser's default checkbox */
        .containerCheckmark input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .sliderCheckmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }
        /* On mouse-over, add a grey background color */
        .containerCheckmark:hover input ~ .sliderCheckmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .containerCheckmark input:checked ~ .sliderCheckmark {
            background-color: brown;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .sliderCheckmark:after {
            content: '';
            position: absolute;

        }

        /* Show the checkmark when checked */
        .containerCheckmark input:checked ~ .sliderCheckmark:after {

        }

        /* Style the checkmark/indicator */
        .containerCheckmark .sliderCheckmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .imgPhoto{

            border: solid 0px;
            border-radius:30px;
            border-color: brown;
            box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        .photoTitle{
             color: brown;
             font-weight: bold;
             background-color: white;
             padding: 5px;
             border: solid 5px;
             border-radius: 3px;
             border-color: brown;
        }
        .divPhoto {

            position: fixed;
            left: 500px;
            top: 50px;
             z-index: 99;
            margin: 0 auto;
            align-items: center;
            width: auto;
            height: auto;
            padding: 0px;
            -webkit-border-radius: 3px;
            -webkit-box-orient: vertical;
            -webkit-transition: 200ms -webkit-transform;
            display: grid;
        }

        #x {
            position: absolute;
            background: transparent;
            color: white;
            font-weight: bold;
            top: 4px;
            right: 5px;
            border: transparent 0px;
        }

        .labelName{
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 100;

            padding: 5px;
            background-color: #fff9e6;
            border: solid 3px;
            border-radius: 3px;
            border-color: brown;

            color: brown;
            display: none;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
        }

        .selectTable{
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 100;

            padding: 5px;
            background-color: #fff9e6;
            border: solid 3px;
            border-radius: 3px;
            border-color: brown;

            color: brown;
            display: none;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
        }

        .icon {
               display: flex;
               margin: 10px;
            justify-content: center;

        }
         /*width:20px;
            height:20px;
            padding: 0px;
            margin: 20px 0px 20px 0px;
             */
         .iconName {
            width:200px;
            height:25px;
            padding: 0px;
            color: brown;


        }
        .name {
            width:200px;
            height:25px;
            padding: 0px;
            color: brown;
            border: 1px solid black;

        }
        .id{
            width:50px;
            height:25px;
            padding: 10px;
            color: brown;
            border: 1px solid black;
            display: none;
        }
        .from {
            width:50px;
            height:25px;
            padding: 10px;
            color: brown;
            border: 1px solid black;
        }
        .to {
            width:50px;
            height:25px;
            padding: 10px;
            color: brown;
            border: 1px solid black;
        }
        .selectRow{

            height: 30px;
        }
         .selectImg{


         }

        .legendRow{

            height: 20px;
        }

        .sectionTop{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
            top: 0px;
            left: 0px;
           /*background-image: url('./Images/StDogmaelsHistory0.png'); */
            background-repeat: no-repeat;
            background-size: cover;
            animation: slide 10s;
            z-index: 10;
        }
        /*@keyframes slide {
            0%{
               background-image: url('./Images/StDogmaelsHistory67.png');
            }
            30%{
               background-image: url('./Images/StDogmaelsHistory33.png');
            }
            60%{
               background-image: url('./Images/StDogmaelsHistory0.png');
            }

        }*/

       ::placeholder {
            color: brown;
            opacity: 1; /* Firefox */
        }

        #searchInput {
            /*background-image: url('.//searchicon.png');*/
            background-position: 0px 0px;
            background-repeat: no-repeat;
            width: 300px;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid brown;
            margin-bottom: 0px;
            color: brown;
            position: absolute;
            top: 3px;
            left: 450px;
            border-radius: 30px;
        }

        #searchUL {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: none;
            position: absolute;
            width: 300px;
            top: 50px;
            left: 450px;
        }

        #searchUL li {
            border: 1px solid brown;
            margin-top: -1px; /* Prevent double borders */
            color: brown;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;

            display: block;
            width: 300px;
            font-family: sans-serif;
            background-color: #fff2e6;
        }

         /*background-color: #f6f6f6;     */

        #searchUL li:hover {
            background-color: #ff8000;
            width: 300px;
        }


    </style>