@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Sarabun', Sarabun;
}

body{
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 50%);
font-family: 'Sarabun', Sarabun;
}

/* สไตล์ของ scrollbar ใน Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 12px; /* กว้างของ scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #9d8cea; /* สีของ thumb */
  border-radius: 10px; /* ขอบโค้งของ thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #390291; /* สีของ thumb เมื่อ hover */
}


body {
  scrollbar-color: #9d8cea #390291; /* สีของ thumb และ track */
}

body::-webkit-scrollbar {
  width: 12px; /* กว้างของ scrollbar */
}

body::-webkit-scrollbar-thumb {
  background-color: #9d8cea; /* สีของ thumb */
  border-radius: 10px; /* ขอบโค้งของ thumb */
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #390291; /* สีของ thumb เมื่อ hover */
}


/* Add this style to create a white background for the navbar */
.navbar {
  background-color: #ffffff; /* Set the background color to white */
  font-family: 'Sarabun', Sarabun;
  font-size: 14px;
}

/* Customize other styles as needed */
.navbar-brand {
  color: #3763f4; /* Set the text color of the navbar brand */
}

.nav-link {
  color: #3763f4; /* Set the text color of the nav links */
}

.rounded-form {
border-radius: 5px; /* Set border-radius for rounded corners */
padding: 20px; /* Add some padding for better aesthetics */
}

#error_message{
  margin-bottom: 10px;
  color:red;
  padding: 0px;
  text-align: center;
  font-size: 14px;
  transition: all 0.5s ease;
}

  footer {
    text-align: center;
    margin-top: 5px;
  }

  a {
    text-decoration: none;
  }

  /* CSS */
.button-29 {
  appearance: button;
  background-color: #4D4AE8;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
  border: 1px solid #4D4AE8;
  border-radius: 1rem;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset,rgba(46, 54, 80, 0.075) 0 1px 1px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: 'Sarabun', Sarabun;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: .5rem 1rem;
  text-align: center;
  text-transform: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-29:focus:not(:focus-visible),
.button-29:focus {
  outline: 0;
}

.button-29:hover {
  background-color: #3733E5;
  border-color: #3733E5;
}

.button-29:focus {
  background-color: #413FC5;
  border-color: #3E3BBA;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(46, 54, 80, 0.075) 0 1px 1px, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
}

.button-29:active {
  background-color: #3E3BBA;
  background-image: none;
  border-color: #3A38AE;
  box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset;
}

.button-29:active:focus {
  box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
}

.button-29:disabled {
  background-image: none;
  box-shadow: none;
  opacity: .65;
  pointer-events: none;
}

/* Check box*/

  .checkbox-group {
    display: flex;
    flex-direction: column;
    border-radius: 150px;
}


.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    border-radius: 150px;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    border-radius: 150px;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 150px;
}

.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}