@import url("https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  background: #68b8c4;
  font-family: "Prompt", sans-serif !important;
}

body,
button {
  font-family: "Prompt", sans-serif;
  color: black;
  -webkit-font-smoothing: antialiased;
}

/**
 * Form & Checkbox Styles
 */

h5 {
  font-weight: 600;
  margin: 0 0 0.5em 0.2em;
  color: white;
}
h6 {
  font-weight: 600;
  margin-bottom: 0.75em;
}

label {
  font-weight: 300;
}

button {
  display: inline-block;
  vertical-align: top;
  padding: 0.4em 0.8em;
  margin: 0;
  background: #68b8c4;
  border: 0;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}

button:focus {
  outline: 0 none;
}

.controls {
  background: #333;
  padding: 2%;
  border-radius: 10px;
}

.controls .toggleAble::selection {
  background-color: transparent;
}

fieldset {
  display: inline-block;
  vertical-align: top;
  margin: 0.5em 1em 0.5em 0;
  background: #fff;
  padding: 0.5em;
  border-radius: 3px;
  width: 100%;
}

.checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 8px;
  margin-left: 8px;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.checkbox label {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding-left: 1.5em;
}

.checkbox label:before,
.checkbox label:after {
  content: "";
  display: block;
  position: absolute;
}

.checkbox label:before {
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #ddd;
  border-radius: 3px;
}

.checkbox label:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #68b8c4;
  opacity: 0;
  pointer-events: none;
}

.checkbox input:checked ~ label:after {
  opacity: 1;
}

.checkbox input:focus ~ label:before {
  background: #ddd; /* Changed 16-1-66 from #eee*/
}

/**
 * Container/Target Styles
 */

.container {
  padding: 2%;
  min-height: 400px;
  text-align: justify;
  position: relative;
}

.container .mix,
.container .gap {
  width: 250px;
  display: inline-block;
  padding: 10px;
  height: auto;
}

.container .mix {
  width: 100%;
  height: auto;
  background: white;
  display: none;
  margin-bottom: 15px;
  border-radius: 10px;
}

/**
 * Fail message styles
 */

.container .fail-message {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;

  -webkit-transition: 150ms;
  -moz-transition: 150ms;
  transition: 150ms;
}

.container .fail-message:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.container .fail-message span {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 700;
}

.container.fail .fail-message {
  opacity: 1;
  pointer-events: auto;
}

/* Added 13/1022 */
#dsslogo {
  max-height: 75px;
  margin-right: 10px;
}
#dssheader {
  display: inline;
}
.dssheader {
  margin-bottom: 10px;
}
.not_found {
  margin-top: 20px;
}
.refill-item {
  max-width: 100%;
  height: auto;
}
img.refill {
  max-width: 100%;
  margin-top: 5px;
  height: auto;
  border-radius: 10px;
  /*    object-fit: cover;*/
}
.refill_text {
  max-width: 100%;
  height: auto;
  color: black;
}
.refill_title {
  margin-top: 5px;
  font-weight: bold;
}
.refill_desc {
  text-indent: 30px;
  margin-right: 10px;
  text-align: left;
}

/*field-set collapse*/
fieldset.toggleAble {
  height: 35px; /* for IE purposes, this can't be 0 */
  overflow: hidden;
  cursor: pointer;
}

/* 
<FirefoxHack>
Sometimes I really hate web development... hack below...
For Firefox need to do the below unfortunately as the frameset height was not being honored
see: https://bugzilla.mozilla.org/show_bug.cgi?id=261037
*/
@-moz-document url-prefix() {
  fieldset.toggleAble {
    overflow: -moz-hidden-unscrollable;
    padding: 2px;
  }
}
/*
</FirefoxHack>
*/

fieldset.toggleAble.expanded {
  height: auto; /* if it is active then make the height as big as it needs to be */
}

fieldset.toggleAble > h6 span:before {
  content: "+"; /* add a plus sign to indicate that it can be expanded still (since not active) */
  /*
  padding: 10px 10px 10px 10px; 
  margin: 10px 10px 10px 10px; 
*/
}

fieldset.toggleAble.expanded > h6 span:before {
  content: "-"; /* add a minus sign to indicate that it is already expanded */
  /*
  padding: 10px 10px 10px 0; 
  margin: 10px 10px 10px 10px; 
*/
}

fieldset.toggleAble > legend {
  cursor: pointer;
}

fieldset.toggleAble.expanded > legend {
  cursor: pointer;
}

/* #Reset {
  border-radius: 4px;
} */

/* 02-12-2025 */
/* =========================================
   1. GLOBAL VARIABLES & BASE STYLES 
   ========================================= */
:root {
  --top-space: 90px; /* ระยะห่างจากขอบบน (Navbar height + gap) */
  --nav-transition-time: 0.4s;
  --primary-color: #191d88;
  --primary-hover: #101256;
  --font-main: "Prompt", sans-serif;
}

.leaflet-top {
  top: var(--top-space) !important;
  transition: top var(--nav-transition-time) ease-in-out !important;
}

/* =========================================
   2. NAVBAR & NAVIGATION
   ========================================= */
#navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  transition: transform var(--nav-transition-time) ease-in-out;
}

#navbar-container.nav-collapsed {
  transform: translateY(-100%);
}

#navbar-toggler {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background-color: white;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-color);
  font-size: 14px;
  z-index: -1;
  border: 1px solid #eee;
  border-top: none;
}

#navbar-toggler:hover {
  background-color: #f8f9fa;
  color: var(--primary-hover);
}

#navbar-container nav a,
#navbar-container nav button {
  color: #333333 !important;
  text-decoration: none !important;
  font-weight: 500;
}

#navbar-container nav a:hover,
#navbar-container nav button:hover {
  color: #1e40af !important;
}

ul.dropdown-menu.show-dropdown {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

ul.dropdown-menu {
  z-index: 9999 !important;
}