body{
    font-family: "Arvo","Kanit", sans-serif;
    background-color: #091117;
    color: white;
}

.img-top{
  max-width: 180px;
  height: 100%;
}
.flag{
  max-width: 24px;
  border-radius: 50%;
  border: 2px #ffffff solid;
  margin-right: 10px;
}

.product-img{
    max-width: 80px !important;
    width: 100%;
    border-radius: 50%;
    border: 3px #d9b862 solid;
}

#imgPreview{
  border-radius: 15px !important;
}

.modal-center{
    align-self: center;
    place-items: center;
}
.modal-content{
  border: 1px solid rgb(41 41 41 / 1);
}

.list-number{
  list-style-type: auto;
}
.list-style-none{
  list-style: none;
}

.golden-btn + .golden-btn { margin-top: 1em; }

.golden-btn {
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
  border: none;
  border-radius: .3em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px rgba(139,66,8,1),
              inset 0 -1px 1px 3px rgba(250,227,133,1);
  /* background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07); */
  border: 1px solid #a55d07;
  /* color: rgb(120,50,5); */
  color: white;
  /* text-shadow: 0 2px 2px rgba(250, 227, 133, 1); */
  cursor: pointer;
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;
}
.golden-btn:focus,
.golden-btn:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
  border: 1px solid rgba(165,93,7,.6);
  /* color: rgba(120,50,5,.8); */
  color: goldenrod;
}
.golden-btn:active {
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
}

.list-group-item{
  color: rgb(255, 226, 154);
}

.white-space-nowrap{
  white-space: nowrap;
}

.bg-darker{
  background-color: rgb(0,0,0,0.5);
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  left: calc(50% - 15px);
  display: none;
  opacity: 0.5;
}

.text-14{
  font-size: 14px;
}

.kanit-thin {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .kanit-extralight {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .kanit-light {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .kanit-medium {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .kanit-semibold {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .kanit-bold {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .kanit-extrabold {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .kanit-black {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .kanit-thin-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .kanit-extralight-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .kanit-light-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .kanit-regular-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .kanit-medium-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .kanit-semibold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .kanit-bold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .kanit-extrabold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .kanit-black-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  
  .arvo-regular {
    font-family: "Arvo", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .arvo-bold {
    font-family: "Arvo", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .arvo-regular-italic {
    font-family: "Arvo", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .arvo-bold-italic {
    font-family: "Arvo", serif;
    font-weight: 700;
    font-style: italic;
  }