* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: 'IBM Plex Sans Thai Looped', sans-serif;
  font-family: 'Noto Sans Thai', sans-serif;
  overflow-x: hidden;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
}

.header a {
  color: black;
  text-align: center;
  text-decoration: none;
  padding: 2px;
  font-size: 2em; 
  line-height: 25px;
  font-weight: bold;
}

.header2{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgb(130, 130, 130);
  color: white;
  padding: 3px;

}

.textHeader{
  background-color: rgb(130,130,130); 
  color: white;
  font-size: 32px; 
  padding-right:50px;
  padding-left:20px;
}


/* .maptoggle{
  display: block;
} */

.dropbtn {
  color: white;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
  font-weight: 550;
}

.dropbtn::before {
  margin-left: auto;
  color: rgb(234,115,55);
}

.dropbtn::after, .dropbtn::before {
  content: '';
  width: 0%;
  height: 4px;
  background: rgb(234,115,55);
  color: rgb(234,115,55);
  display: block;
  transition: 0.5s;
}

.dropbtn:hover::after, .dropbtn:hover::before {
  width: 100%;
  cursor: pointer;
  
}

.dropbtn:hover{
  color: black;
}



.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

.logo img{
  float: left;
  margin: 10px;
}

.search-container {
  display:flex;
  position: sticky;
  align-items: center;
  width: 100%;
}

#clearButton {
  width: 50px; 
  /* height: 50px;  */
  font-size: 20px; 
  border: none;
  background: none;
  cursor: pointer;
  display: none;
  text-decoration: none;
}


.zoneTab{
  background-color:transparent;
  position: absolute;
  text-align: left;
  height: 63%;
  width: 100%;
  top: 22.1%;
  left: 0%;
}

.zoneA{
  background-color: whitesmoke;
  position: absolute;
  text-align: left;
  height: max(500px,77.5%);
  min-height: 500px;
  width: 35%;
  margin-top: 5%;
  right: -35%;
  overflow: hidden;
  display: none;
  overflow-y: scroll;
  /* padding-top: 1%; */
}

.zoneB{
  background-color: whitesmoke;
  position: absolute;
  text-align: left;
  height: max(500px,77.5%);
  min-height: 500px;
  width: 35%;
  margin-top: 5%;
  left: -35%;
  overflow-y: scroll;
}

.zoneC{
  background-color: whitesmoke;
  position: absolute;
  text-align: left;
  height: max(500px,77.5%);
  min-height: 500px;
  width: 35%;
  margin-top: 5%;
  left: -35%;
  overflow-y: scroll;
}

.zoneD{
  background-color: whitesmoke;
  position: absolute;
  text-align: left;
  height: max(500px,77.5%);
  min-height: 500px;
  width: 35%;
  margin-top: 5%;
  right: -35%;
  overflow: hidden;
  display: none;
  overflow-y: scroll;
}

.navbaroptionsA:hover{
  color: orange;
  cursor: pointer;
}

.navbaroptionsB:hover{
  color: orange;
  cursor: pointer;
}

.navbaroptionsC:hover{
  color: orange;
  cursor: pointer;
}

.navbaroptionsD:hover{
  color: orange;
  cursor: pointer;
}

.navbaroptionsA{
  height: 6%; 
  width: 100%;
  display: inline-block;
  font-size: 1.07em;
  padding-left: 5%;
  padding-top: 3%;
  padding-right: 3%;
  overflow-x: break-word;
  word-wrap: break-word;
  hyphens: auto;
  color: black;
  /* text-decoration: underline; */
}

.navbaroptionsB{
  height: 6.5%; 
  width: 100%;
  display: inline-block;
  font-size: 1.07em;
  padding-left: 5%;
  padding-top: 3%;
  padding-right: 3%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  color: black;
  /* text-decoration: underline; */
}

.navbaroptionsC{
  height: 14%; 
  width: 100%;
  display: inline-block;
  font-size: 1.2em;
  padding-left: 5%;
  padding-top: 6%;
  padding-right: 3%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  color: black;
  /* text-decoration: underline; */
}

.navbaroptionsD{
  height: 6.15%; 
  width: 100%;
  display: inline-block;
  font-size: 1.07em;
  padding-left: 5%;
  padding-top: 3%;
  padding-right: 3%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  color: black;
  /* text-decoration: underline; */
}


/* .dropbtn {
  background-color: rgb(130,130,130);
  color: white;
  font-size: 30px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: rgb(130,130,130);
} */

#myInput {
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
  padding: 14px 20px 12px 20px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  /* left: 65%; */
  /* position: absolute; */
  display: block;
  /* padding-right:10px; */
  /* top: 17.5%; */
  /* right: 30%; */
}

.dropdown-content{
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 500px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  overflow-x: hidden;
}

.dropdown-content input[type="text"] {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f6f6f6;
}

.dropdown-content a{
  color: black;
  padding: 1% 1.5%;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.dropdown-items-container {
  max-height: 400px; 
  overflow-y: auto; 
}


.show {
  display: block;
}

#pointname{
  position: absolute;
  top: 155px;
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}



.popup1, .popup2, .popup3, .popup4, .popup5, .popup6, .popup7, .popup8, .popup9, .popup10{
  background: transparent;
  width: 100%;
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  border-color:black
}

.popupbuilding1, .popupbuilding2, .popupbuilding3, .popupbuilding4, .popupbuilding5, .popupbuilding6
, .popupbuilding7, .popupbuilding8, .popupbuilding9, .popupbuilding10, .popupbuilding11, .popupbuilding12
, .popupbuilding13, .popupbuilding14, .popupbuilding15, .popupbuilding16, .popupbuilding17, .popupbuilding18
, .popupbuilding19, .popupbuilding20, .popupbuilding21, .popupbuilding22, .popupbuilding23, .popupbuilding24
, .popupbuilding25, .popupbuilding26, .popupbuilding27, .popupbuilding28, .popupbuilding29, .popupbuilding30
, .popupbuilding31, .popupbuilding32, .popupbuilding33, .popupbuilding34, .popupbuilding35, .popupbuilding36
, .popupbuilding37, .popupbuilding38, .popupbuilding39, .popupbuilding40, .popupbuilding41, .popupbuilding42
, .popupbuilding43, .popupbuilding44, .popupbuilding45, .popupbuilding46, .popupbuilding47, .popupbuilding48
, .popupbuilding49, .popupbuilding50, .popupbuilding51, .popupbuilding52, .popupbuilding53, .popupbuilding54{
  background: transparent;
  width: 100%;
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  border-color:black;
}

.popup-content{
  height: 65%;
  width: 75%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-top: 4.5%;
  position: relative;
  align-items: center;
  border: 3px solid black;
}

.popup-shortcontent{
  height: 65%;
  width: 75%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-top: 4.5%;
  position: relative;
  align-items: center;
  border: 3px solid black;

}

.popup-namecontent{
  height: 65%;
  width: 75%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-top: 4.5%;
  position: relative;
  align-items: center;
  border: 3px solid black;
}

.popup-pic{
  display: block;
  height: 68vh;
  width: 80%;
  margin: auto;
  background: lightslategray;
}

/* CSS */
.button-toggle {
  appearance: none;
  background-color: transparent;
  border: 2px solid #1A1A1A;
  border-radius: 15px;
  box-sizing: border-box;
  color: #3B3B3B;
  cursor: pointer;
  display: inline-block; 
  font-family: Roobert, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-width: auto; 
  outline: none;
  padding: 0; 
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
}

.button-toggle:disabled {
  pointer-events: none;
}

.button-toggle:hover {
  color: black;
  background-color: #ADD8E6;
  box-shadow: rgba(0, 0, 255, 0.5) 0 8px 15px;
  transform: translateY(-2px);
}

.button-toggle:active{
  box-shadow: none;
  transform: translateY(0);
}

.mapframe{
  height: 68vh;
  width: 80%;
  margin: auto;
  background: lightslategray;
}

.info-content{
  height: 290px;
  width: 100%;
  left: 5%;
  right: 5%;
  margin: auto;
  /* background-color: lightgoldenrodyellow; */
}

.info-shortcontent{
  height: 50px;
  width: 100%;
  left: 5%;
  right: 5%;
  margin: auto;
  /* background-color: lightgoldenrodyellow; */
}

.info-shortcontent {
  display: flex;
  align-items: center; /* Centers items vertically */
  margin: auto;
}

.title-info {
  flex-grow: 1; /* Allow the title-info to occupy remaining space */
}

.info-namecontent{
  height: 115px;
  width: 90%;
  left: 5%;
  right: 5%;
  margin: auto;
  /* background-color: lightgoldenrodyellow; */
}

.title-info{
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

.sub-info{
  width: 100%;
  height: 85%;
  text-align: left;
  font-size: 24px;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  overflow-x: hidden;
  padding: 1.5%;
  margin: auto;
}

.sub2-info{
  width: 100%;
  height: 85%;
  text-align: center;
  font-size: 24px;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  overflow-x: hidden;
  padding: 1.5%;
  margin: auto;
}

.sub4-info{
  width: 100%;
  height: 85%;
  text-align: center;
  font-size: 24px;
  /* background-color: azure; */
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 1.5%;
  margin: auto;
}

.close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9{
  position: absolute;
  top: 0px;
  right: 0px;
  background: gray;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: 6px 6px 29px -4px black;
  cursor: pointer;
}

.closebuilding1, .closebuilding2, .closebuilding3, .closebuilding4, .closebuilding5, .closebuilding6, 
.closebuilding7, .closebuilding8, .closebuilding9,.closebuilding10, .closebuilding11, .closebuilding12, 
.closebuilding13, .closebuilding14, .closebuilding15,.closebuilding16, .closebuilding17, .closebuilding18,
.closebuilding19, .closebuilding20, .closebuilding21,.closebuilding22, .closebuilding23, .closebuilding24, 
.closebuilding25, .closebuilding26, .closebuilding27,.closebuilding28, .closebuilding29, .closebuilding30,
.closebuilding31,.closebuilding32, .closebuilding33, .closebuilding34, .closebuilding35, .closebuilding36, 
.closebuilding37,.closebuilding38, .closebuilding39, .closebuilding40,.closebuilding41, .closebuilding42, 
.closebuilding43,.closebuilding44, .closebuilding45, .closebuilding46, .closebuilding47, .closebuilding48, 
.closebuilding49,.closebuilding50, .closebuilding51, .closebuilding52, .closebuilding53, .closebuilding54{
  position: absolute;
  top: 0px;
  right: 0px;
  background: gray;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: 6px 6px 29px -4px black;
  cursor: pointer;
}

.grid-container{
    display: grid;
    grid-row-gap: 5px;
    /* position: relative; */
    width: 100%; 
    /* padding-bottom: 45.57%; */
}

.responsive-svg {
  /* position: absolute; */
  width: 100%;
  height: 100%;
} 

.grid-item{
  /*border: 1px solid black;*/
  text-align: center;
  font-size: 20px;
  height: 50px;
}

#mainmap{
  height: 500px;
}

/* .map{
  filter: grayscale(0%);
      transition: filter 0.5s;
} */

#grid-item-1{
  /*background-color: rgb(175, 255, 175);*/
  background-color: white;
  height: 1300px;
}
#grid-item-2{
  /*background-color: rgb(175, 175, 255);*/
  background-color: white;
  height: 1300px;
}
#grid-item-3{
  /*background-color: rgb(255, 255, 175);*/
  background-color: white;
  height: 1300px;
}
#grid-item-4{
  /*background-color: rgb(255, 215, 140);*/
  background-color: white;
  height: 1300px;
}

#navigate{
  grid-template-columns: auto auto auto auto;
  height: 1300px;
}

#routes{
  grid-template-columns: auto auto auto auto ;
  grid-row-gap: 1px;
  height: 100%;
}

.zoneNameA, .zoneNameB, .zoneNameC, .zoneNameD{
  background-color: #C8DC74;
  height: 100%;
  width: 100%;
  font-size: 3em;
  font-weight: bold;
  color:black
}

#route1, #route2, #route3, #route4, #route5, #route6, #route7, #route8{
  cursor: pointer;
  height: 100%;
  border: 3px solid black;
}


#subnavigate1{
  grid-template-columns: auto;
  height: 1200px;
  border: none;
}

#subnavigate2{
  grid-template-columns: auto;
  height: 1200px;
  border: none;
}

#subnavigate3{
  grid-template-columns: auto;
  height: 680px;
  border: none;
}

#subnavigate4{
  grid-template-columns: auto;
  height: 1250px;
  border: none;
}

#buildinglistzone{
  height: 100%;
  font-size: 16px;
  text-align: center;
  background-color: rgb(255,229,204);
  border: 2px solid black;
  padding-top: 5px;
  border-radius: 15px;
  margin-left: 10px;
  margin-right: 10px;
}

#buildinglist{
  height: 100%;
  font-size: 10px;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  background-color: rgb(241,240,240);
  border: 2px solid black;
  border-radius: 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.pin{
  -webkit-filter: drop-shadow(1px 1px 0 black)
    drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px -1px 0 black);

  filter: grayscale(0%);
      transition: filter 2s;
}

.pin_statue{
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  display: none;
  animation: fading 3s normal;
  animation-iteration-count: 1;
  -webkit-filter: drop-shadow(4px 3.5px 1.5px yellow)
                  drop-shadow(-4px -3.5px 1.5px orange)
                  drop-shadow(-4px 3.5px 1.5px yellow) 
                  drop-shadow(4px -3.5px 1.5px orange);
  filter: drop-shadow(4px 3.5px 1.5px yellow) 
          drop-shadow(-4px -3.5px 1.5px orange)
          drop-shadow(-4px 3.5px 1.5px yellow) 
          drop-shadow(4px -3.5px 1.5px orange);
}


.pin_food_active{
 
  -webkit-filter: drop-shadow(4px 3.5px 1.5px rgba(178, 34, 34, 0.7))
                  drop-shadow(-4px -3.5px 1.5px rgba(255, 165, 0, 0.7))
                  drop-shadow(-4px 3.5px 1.5px rgba(178, 34, 34, 0.7)) 
                  drop-shadow(4px -3.5px 1.5px rgba(255, 165, 0, 0.7));
  filter: drop-shadow(4px 3.5px 1.5px rgba(178, 34, 34, 0.7)) 
          drop-shadow(-4px -3.5px 1.5px rgba(255, 165, 0, 0.7))
          drop-shadow(-4px 3.5px 1.5px rgba(178, 34, 34, 0.7)) 
          drop-shadow(4px -3.5px 1.5px rgba(255, 165, 0, 0.7));

}

.pin_car_active{
  -webkit-filter: 
  drop-shadow(4px 3.5px 1.5px rgba(0, 0, 139, 0.7))
  drop-shadow(-4px -3.5px 1.5px rgba(238, 192, 198, 0.9))
  drop-shadow(-4px 3.5px 1.5px rgba(0, 0, 139, 0.7))
  drop-shadow(4px -3.5px 1.5px rgba(238, 192, 198, 0.9));
filter: 
  drop-shadow(4px 3.5px 1.5px rgba(0, 0, 139, 0.7))
  drop-shadow(-4px -3.5px 1.5px rgba(238, 192, 198, 0.9))
  drop-shadow(-4px 3.5px 1.5px rgba(0, 0, 139, 0.7))
  drop-shadow(4px -3.5px 1.5px rgba(238, 192, 198, 0.9)); 
}

.pin_train_active{
  -webkit-filter: 
    drop-shadow(4px 3.5px 1.5px rgba(48, 242, 255, 0.5))
    drop-shadow(-4px -3.5px 1.5px rgba(255, 165, 0, 0.7))
    drop-shadow(-4px 3.5px 1.5px rgba(48, 242, 255, 0.5))
    drop-shadow(4px -3.5px 1.5px rgba(255, 165, 0, 0.7));
  filter: 
    drop-shadow(4px 3.5px 1.5px rgba(48, 242, 255, 0.5))
    drop-shadow(-4px -3.5px 1.5px rgba(255, 165, 0, 0.7))
    drop-shadow(-4px 3.5px 1.5px rgba(48, 242, 255, 0.5))
    drop-shadow(4px -3.5px 1.5px rgba(255, 165, 0, 0.7)); 
}
.pin_statue:hover{
  cursor: pointer;
}

.pin{
  cursor: pointer;
}

.pin_car{
  cursor: pointer;
}
.pin_food{
  cursor: pointer;
}

.pin_train{
  cursor: pointer;
}



.building{
  -webkit-filter: drop-shadow(1px 1px 0 black)
    drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px -1px 0 black);

  filter: grayscale(0%);
      transition: filter 2s;
}

#treeFull{
  -webkit-filter: drop-shadow(0.05px 0.05px 0 black)
    drop-shadow(-0.05px -0.05px 0 black);
  filter: drop-shadow(0.05px 0.05px 0 black) 
    drop-shadow(-0.05px -0.05px 0 black);
}

@keyframes fading {
  0% {
      opacity: 0;
  }
  20% {
      opacity: 1;
  }
  40% {
      opacity: 0;
  }
  60% {
      opacity: 1;
  }
  80%{
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}



.popupBox {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.popupText {
  /* Additional styling for the text inside the popup if needed */
  color: black;
}

#campusMap{
  width: 100%;
  height: 80vh;
  position: fixed;
  z-index: 1; 
  display:none;
}


#floating-panel {
  position: relative;
  top: 10px;
  /* left: 25%; */
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
  display: none;
}


#qrCodeCanvas{
  border-radius: 5px;
  border: 3px solid black;
  padding: 5px; 
  background: white;
  display: none;
}

.closeQR{
  position: absolute;
  top: 0px;
  right: 0px;
  background: white;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: 6px 6px 29px -4px black;
  cursor: pointer;
}

.popupQR{
  background: white;
  height: 500px;
  width: 500px;
  position: absolute;
  /* top: -300%; */
  left: 35%;
  /* top: 22.5%; */
  display: none;
  justify-content: center;
  align-items: center;
  border-color:black;
  z-index: 9999;
  padding: 5px; 
  margin: 5px; 
  border-radius: 5px;
  border: 3px solid black;
}

.btn-googleMap {
  width: 150px;
  height: 40px;
  border: 1px solid black;
  border-radius: 30px;
  transition: all 0.3s;
  cursor: pointer;
  background: white;
  font-size: 12px;
  font-weight: 550;
  font-family: 'Montserrat', sans-serif;
}

.btn-googleMap:hover {
  background: orange;
  border: 1px solid black;
  color: white;
  font-size: 12px;
}


#start{
  height: 35px; 
  font-size: 14px; 
  /* line-height: 1; */
}

#end{
  height: 35px; 
  font-size: 14px; 
  /* line-height: 1; */
}

@media only screen and (max-width: 1920px){
  .zoneA, .zoneB, .zoneC, .zoneD{
    height: 62.6%;
    margin-top: 4.5%;
  }
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}