/* Optional: Makes the sample page fill the window. */
  /* @font-face {
    font-family: MitrFont;
    src: url(../fonts/Mitr/Mitr-Light.ttf);
  }
  @font-face {
    font-family: MitrSemiBoldFont;
    src: url(../fonts/Mitr/Mitr-SemiBold.ttf);
  } */

  @font-face {
    font-family: IBMPlexSansThaiFont;
    src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Medium.ttf);
  }
  @font-face {
    font-family: IBMPlexSansThaiSemiBoldFont;
    src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-SemiBold.ttf);
  }

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: IBMPlexSansThaiFont;
    color: #4D4D4D;
  }

#map{
  height: 95%;
  position:absolute;
}
#over{
    position: absolute;
}

#tab-overlay-map {
  margin: 1%;
  background-color: aqua;
}

a:hover, a:visited, a:link, a:active {
  text-decoration: none!important;
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  color:#FFFF;
}

.btn-primary.custom-btn {
	background-color: #FFFF;
  color: #201c51;
	border-color: #201c51;
}

.text-style {
  font-family: MitrFont;
  color: #4D4D4D;
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.badge-state-start {
  background-color: transparent;
  color: #ed2010;
  border: 1px solid #ed2010;
}

.badge-state-inprogress {
  background-color: transparent;
  color: #f6b900;
  border: 1px solid #f6b900;
}

.badge-state-forward {
  background-color: transparent;
  color: #3D62E4;
  border: 1px solid #3D62E4;
}

.badge-state-finish {
  background-color: transparent;
  color: #58b42c;
  border: 1px solid #58b42c;
}


.sign-state-start {
  background-color: #ed2010;
  color: #fff;
  /* border: 1px solid #ffb42c; */
}

.sign-state-inprogress {
  background-color: #f6b900;
  color: #fff;
  /* border: 1px solid #0884dc; */
}

.sign-stat-forward {
  background-color: #3D62E4;
  color: #fff;
  /* border: 1px solid #0884dc; */
}

.sign-state-finish {
  background-color: #61d637;
  color: #fff;
  /* border: 1px solid #58b42c; */
}

.sign-state-total {
  background-color: #5e5e5e;
  color: #fff;
  /* border: 1px solid #f15f42; */
}

.margin-stat-state {
  margin-top: 4px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 4px;
}

.select-li-active {
  color: #0d6efd;
  text-decoration: underline;
}

.hover-li-filter:hover {
  color: #0d6efd;
  text-decoration: underline;
}


.demo-container {
  width: auto;
  margin: auto;
}

.progress-bar {
  height: 4px;
  background-color: rgb(34,34,81);
  width: 100%;
  overflow: hidden;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(34,34,81);
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

.thumb-no-click{
  font-size: 20px;
  z-index: -1;
}

.thumb-no-click-marker{
  font-size: 18px;
  z-index: -1;
}

.thumb-font{
  font-size: 13px;
}

.thumb-font-marker{
  font-size: 11px;
}

.thumb-click{
  font-size: 20px;
  z-index: -1;
  color:rgb(90, 100, 255)
}

.thumb-click-marker{
  font-size: 18px;
  z-index: -1;
  color:rgb(90, 100, 255)
}

.thumb-font-color{
  font-size: 13px;
  color:rgb(90, 100, 255)
}

.thumb-font-color-marker{
  font-size: 11px;
  color:rgb(90, 100, 255)
}

.font-stat{
  font-size: 10px;
  color:white;
}

.font-mini-gray{
  font-size: 12px;
  color:gray;
}

.font-time{
  line-height: 1.4;
  padding: 0.35em 0.65em;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color:black;
}
@keyframes indeterminateAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}

.gm-style-iw{
  max-width: 50vw;
}

/* Style the Image Used to Trigger the Modal */
#image1 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#image1:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999999; /* Sit on top */
  padding-top: 65px; /* Location of the box */
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  left: 0;
  top: 0;
  align-items: center;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /* overflow: auto; Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content1 {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content1, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 5px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.chip{
  display: inline-flex;
  flex-direction: row;
  background-color: #eff0fa;
  border-width: 1px;
  border-style: solid;
  border-color: #4c589e;
  color: #4c589e;
  cursor: default;
  height: 32px;
  outline: none;
  padding: 0;
  font-size: 14px;
  font-family: IBMPlexSansThaiFont;
  white-space: nowrap;
  align-items: center;
  border-radius: 12px;
  vertical-align: middle;
  text-decoration: none;
  justify-content: center;
}

.chip:hover {
  background-color: #c6c7c7;
  cursor: pointer;
}

.chip-content{
  cursor: inherit;
  display: flex;
  align-items: center;
  user-select: none;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}

/* 100% Image Width on Smaller Screens */
/* @media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
} */