.prompt-thin {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.prompt-extralight {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.prompt-light {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.prompt-regular {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.prompt-medium {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.prompt-semibold {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.prompt-bold {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.prompt-extrabold {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.prompt-black {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.prompt-thin-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.prompt-extralight-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.prompt-light-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.prompt-regular-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.prompt-medium-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.prompt-semibold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.prompt-bold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.prompt-extrabold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.prompt-black-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: italic;
}
.btn-upload{
  font-family: "Prompt", sans-serif !important;
  background-color:#00fe8a!important;
  font-size: 25px!important;
  font-weight: 700!important;
  color: #000!important;
}
.btn-upload:hover{
  opacity: 0.8;
}
.bottom-space{
  margin-bottom: 30px;

}
.form-switch {
  padding-left: 4.5em!important;
}
.h1-bold{
  font-weight: 800 !important;
  font-size: 35px!important;
}
.label-bold{
  font-weight: 700 !important;
}
body{
  font-family: "Prompt", sans-serif !important;
  font-style: medium !important;
  font-size: 20px!important;
}
label{
  font-style: bold !important;
}
a {
  color: #000!important;
  font-family: "Prompt", sans-serif !important;
  font-style: medium !important;
}
a:hover{
  color: #000!important;
  font-family: "Prompt", sans-serif !important;
  font-style: bold !important;
}
.nav-link a:active{
  color: #fff!important;
  font-family: "Prompt", sans-serif !important;
  font-style: bold !important;
}
a.nav-link {
  font-size: 20px;
  margin-right: 15px;
  font-family: "Prompt", sans-serif !important;
  font-style: bold !important;
}
.navbar{
background-color:rgb(0 255 139) !important;
}
.term-text{
  display: inline-block;
  font-size: 25px;
  margin-left: 30px;
  
  font-style: bold !important;
}
.custom-check{
  margin-top:11px!important;
}
.form-check-input:checked~.form-switch {
  background-color: #00ff6a !important;
}
.form-check-input:checked {
  background-color: #00ff6a !important;
  border: 1px solid #00ff6a !important;
}
a img {
    border: none!important;
    border-radius: 4px;
    width: 130px;
    height: auto;
    padding: 0px!important;
}
.logout-button{
  color: #fff!important;

}
.logout-button:hover{
  color: #fff!important;
  
}
th {
  font-size: 23px;
  text-align: center!important;
  font-family: "Prompt", sans-serif !important;
  font-style: bold;
}
.text-order{
  border:none!important;
  background-color: #00fe8a!important;
  color: #000!important;
  font-family: "Prompt", sans-serif !important;
  font-style: bold;
}
.text-order:hover{
  border:none!important;
  background-color: #00fe8a!important;
  color: #000!important;
  font-family: "Prompt", sans-serif !important;
  font-style: bold;
}
.button:hover{
  opacity: 0.8;
}


.order-image{
  width:100%;
  height:auto;
  max-width: 115px;
  
}

a img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}
.imageupload{
  padding:10px;
  border:1px solid #000;
}
.none{
  background-color: none;
}
.termimg{
  width:400px !important;
}
.photo-card {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 80px; 
  height:100px;
}

.photo-card-img {
  width: 100%;
  height:100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

.photo-card-size {
  display: block;
  margin-top: 2px;
  font-size: 15px; /* Increased font size for better visibility */
  font-weight: bold; /* Make text bold */
  color: #000; /* Darker color for better readability */
  padding: 3px 0; /* Add padding to create more space around text */
  background-color:#00ff6a;
  border-radius: 4px; /* Round the corners of the text background */
  font-family: "Prompt", sans-serif !important;
  font-style: bold;
}
.photo-card-attributes{
  display: block;
  margin-top: 2px;
  font-size: 15px; /* Increased font size for better visibility */
  font-weight: bold; /* Make text bold */
  color: #fff; /* Darker color for better readability */
  padding: 3px 0; /* Add padding to create more space around text */
  background-color:#000;
  border-radius: 4px; /* Round the corners of the text background */
  font-family: "Prompt", sans-serif !important;
  font-style: bold;
}

/***from upload htmll****/
.photo-section {
  margin-bottom: 20px;
position: relative;
padding-bottom: 30px;

}

.photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  margin-top: 10px;
}

.photo-preview img {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  border: 2px solid #00fe8a;
  padding: 5px;
  border-radius: 5px;
}
.counter-badge{
background: #000;
    color: #fff;
    padding: 10px;
    text-align: center;
}
.devider-hr{
border: 2px solid #000 !important;
    opacity: 1 !important;
}
.add-section {
  margin-top: 10px;
}

.remove-section {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.logo {
  width: 100%;
    max-width: 85px;
    height: auto;
    text-align: center;
    margin-right: 22px;
}

.form-container {
  background-color: #fff;
  border: 3px solid #000;
  padding: 80px!important;
  margin-bottom: 100px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-content {
  display: flex;
  gap: 20px;
}

.form-fields,
.term-image-container {
  flex: 1;
}

.term-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rgf-form{
  border: 1px solid #00ff6a !important;
}
.rgf-button{
  background-color:#00ff6a !important;
  border: 1px solid #00ff6a !important;
}
.rgf-button:hover{
  opacity: 0.8!important;
}
.term-image {
  width: 100%;
  max-width: 650px;
  height: auto;
  display: block;
  border-radius: 8px;
}
.label-channel{
  margin-right: 0px !important;
}
.button-sp{
  background-color:#e74c2b!important;
  color: #fff !important;
}
.button-laz{
  background-color:#000071 !important;
  color: #fff !important;
}
.button-tt{
  background-color:#010101!important;
  color: #fff !important;
}
.button-line{
  background-color:#06c052!important;
  color: #fff !important;
}
.h1-bold-bg {
  font-weight: 800 !important;
  font-size: 35px !important;
  background-color: #000;
  color: #fff;
  padding: 20px;
}
.remark{
  font-weight: 400 !important;
    font-size: medium!important;
}
.addmore{
  font-weight:700!important;
}
.btn-line{
  background-color:#00b900!important;
  color: #fff !important;
  line-height: 2!important;
}
.btn-line:hover{
  background-color:#009500!important;
 color: #fff !important;
}
.line-login img {
  width:40px!important;
  height: 40px!important;
  float: left!important;
  margin-right:5px!important;
}
.modal-dialog {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 100vh!important; /* Ensures it covers the screen height */
}

/* Increase the backdrop blur effect */
.modal-backdrop {
  background-color: hsl(0, 0, 0, 100%)!important; /* Adjust the blur intensity */
  box-shadow: #000;
}

/* Optional: Style the modal content */
.modal-content {
  border-radius: 15px!important;
  border: none!important;
}

.modal-footer{
  justify-content: center!important;
}
.large-checkbox {
  width: 25px; /* Adjust width as needed */
  height: 25px; /* Adjust height as needed */
  border-width: 2px; /* Adjust border width as needed */
}
.bg-progress{
  background-color:#00ff6a !important;
  color: #000!important;
}
.check-big{
  transform: scale(1.6);
  margin-right: 10px;
}
.form-check .form-check-input{
  float: none!important;
}
.channel-img{
  width: 85px;
}
.channel-line-img{
  width: 35px;
}
.error {
  border: 2px solid red;
  background-color: #ffe6e6; /* Light red background for visibility */
}
.navbar-text.ms-auto{
  padding: 10px !important;
  font-weight: 500;
  color: #000;
  background: #fff !important;
  /* background: border-box; */
  border: 3px solid #efefef !important;
}
.border-line{
  border:2px solid #000;
}
.main-container{
  border: solid 1px #000 !important;
}
.term-modal-body-unique {
  display: flex;
  justify-content: center;   /* Centers image horizontally */
  align-items: center;       /* Centers image vertically */
  height: 100%;              /* Full height of the container */
}

.term-modal-body-unique img {
  max-height: 100%;          /* Ensures the image doesn't exceed the container's height */
  max-width: 100%;           /* Ensures the image doesn't exceed the container's width */
  height: auto;              /* Maintain aspect ratio */
  width: auto;               /* Maintain aspect ratio */
  object-fit: contain;       /* Ensures the image scales within the container */
}

/* Bottom Nav for Mobile */
.mobile-bottom-nav {
  display: flex; /* Use flexbox for consistent layout */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; /* Increase height for better spacing */
  background-color: #fff;
  border-top: 1px solid #ddd;
  z-index: 999;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.mobile-bottom-nav a {
  flex: 1; /* Ensure equal width for all items */
  text-align: center;
  color: #333;
  font-size: 14px;
  font-weight: 600 !important;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-bottom-nav a .logout-icon-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px; /* Space between icon and username */
}

.mobile-bottom-nav a .username {
  font-size: 0.8rem; /* Adjust username size */
  color: #333;
  white-space: nowrap; /* Prevent wrapping */
}

.mobile-bottom-nav a .logout-text {
  font-size: 0.7rem; /* Slightly smaller for "ออกจากระบบ" */
  color: #333;
}

.mobile-bottom-nav a i {
  font-size: 18px; /* Adjust icon size */
  margin-bottom: 2px; /* Add spacing */
}

.mobile-bottom-nav a span {
  font-size: 0.8rem; /* General text size */
}

.mobile-bottom-nav a.active {
  background-color: #00ff6a !important;
  color: #000 !important;
  font-weight: bold;
  border-radius: 10px;
}
/* Hover effect */
.mobile-bottom-nav a:hover {
  background-color: #f0f0f0;
  color: #000;
  border-radius: 10px;
}

/* Media query for smaller screens */
@media (max-width: 360px) {
  .h1-bold-bg {
  
    font-size: 28px !important;
    
  }
  .mobile-bottom-nav a span {
    font-size: 0.7rem; /* Reduce text size */
  }
  .mobile-bottom-nav a i {
    font-size: 16px; /* Adjust icon size */
  }
}

@media (max-width: 768px) {
  .channel-img {
    width: 100px!important;
  }
  .bottom-space {
    margin-bottom: 10px;
}
  .mobile-bottom-nav {

display: flex;
}

.h1-bold-bg {
  
  font-size: 28px !important;
  
}
}

/* General Responsive Styles */
@media (max-width: 767px) {
  .bottom-space {
    margin-bottom: 10px;
}
  .h1-bold-bg {
  
    font-size: 28px !important;
    
  }
  .navbar{
    background-color:#efefef !important;
    }
  .text-order{
    font-size: 14px;
  }
  .navbar-brand img {
      width: 80px; /* Adjust as needed */
      height: auto;
  }

  .nav-underline {
      background-color: #efefef;
      flex-direction: column;
      align-items: left;

  }

  .nav-link {
      padding: 10px 0;
      margin-bottom: 15px;
  }

  .form-container {
      padding: 15px;
  }

  .card {
      width: 100%;
  }

  .slot {
      margin: 10px 0;
  }

  .photo-preview img {
      width: 100px; /* Adjust as needed */
      height: auto;
  }

  .term-image {
      width: 100%!important;
      max-width:500px!important;
      height: auto!important;
  }
  .modal-body {
    display: flex!important;
    justify-content: center!important; /* Horizontally centers the image */
    align-items: center!important;     /* Vertically centers the image */
    flex-direction: column!important;  /* Ensures the content stacks vertically */
    text-align: center!important;
  }
  .main-container {
    border: none!important;
}
.channel-img {
  width: 100px!important;
}
img.channel-img-shopee {
  width: 100px;
}
label {
    display: table-caption;
    font-size: 1.3rem;
}
.remark {
    font-weight: 400 !important;
    font-size: medium !important;
    display: grid !important;
}
    .form-check-label label {
        display: contents !important;
        font-size: 16px;
    }
.term-text {
    display: inline-block!important;
    font-size: 25px;
    margin-left: 23px !important;
    font-style: bold !important;
}
.form-check-inline {
  display: inline-block !important;
  
}
.form-check {
    display: block;
    padding-left: 0.5em;
    margin-bottom: .125rem;
}
.form-check-input {

  width: 0.8em!important;
  height: 0.8em!important;

}
.form-check-input {
  transform: scale(1); /* Adjust checkbox size for smaller screens */
}
.p-5{
  padding:0px!important;
}
}

@media (max-width: 576px) {
  .channel-img {
    width: 100px!important;
  }
.form-switch .form-check-input{
transform: scale(2) !important;
        width: 35px !important;
        height: 20px !important;
}
.form-check-input[type=radio] {
    border-radius: 50%;
    transform: scale(2.5) !important;
}
.form-check-input[type=checkbox] {
    border-radius: .25em;
    transform: scale(2);
}
.form-check .form-check-input {
    /* float: left !important; */
    margin-left: 0;
}
.form-switch {
    padding-left: 3.8em !important;
}
  .btn-lg {
      font-size: 14px; /* Adjust button text size */
      padding: 10px;
  }

  .logo {
      width: 50px; /* Adjust logo size */
  }

  .add-section button {
      width: 100%;
  }
}
.navbar-toggler{
  border:1px solid #000;
}