@font-face {
  font-family: "Noto";
  src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Noto";
  src: url("../fonts/NotoSans-Medium.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Noto";
  src: url("../fonts/NotoSans-SemiBold.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Noto";
  src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "NotoTH";
  src: url("../fonts/NotoSansThai-Regular.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "NotoTH";
  src: url("../fonts/NotoSansThai-Medium.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "NotoTH";
  src: url("../fonts/NotoSansThai-SemiBold.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "NotoTH";
  src: url("../fonts/NotoSansThai-Bold.ttf") format("truetype");
  font-weight: 600;
}


body {
  font-family: "Noto","NotoTH";
}

.container {
  margin: auto;
  width: 100%;
  min-height: calc(100dvh - 132px);
  max-width: 1368px;
  padding: 0 24px;
  margin-top: 84px;
  background: #FFFFFF;
}

.container-profile {
  display: flex;
  gap: 18px;
  margin: auto;
  max-width: 1600px;
  width: 100%;
  min-height: calc(100dvh - 84px);
  margin-top: 84px;
  background: #FFFFFF;
}

.container-margin {
  padding-top: 54px;
  width: 100%;
}

a {
  cursor: pointer;
}

.text-orange {
  color: #ff5722;
}

.text-orange:hover {
  color: #ff5722 !important;
}

.text-plain {
  text-decoration: none;
}

.wr42-text-input-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wr42-text-input-block-title {
  font-size: 16px;
  min-width: 72px;
}

.wr42-text-input-block input[type="text"] ,
.wr42-text-input-block input[type="password"] ,
.register-block input[type="text"] ,
.register-block input[type="password"]
{
  width: 100%;
  background: #f0f0f0;
  height: 36px;
  border-radius: 6px;
  border: none;
  padding: 4px 8px;
}

.wr42-text-input-block input[type="text"]:focus ,
.wr42-text-input-block input[type="password"]:focus ,
.register-block input[type="text"]:focus ,
.register-block input[type="password"]:focus
{
  border: none;
  outline: 3px solid #ff572230;
}

.wr42-text-input-block input[type="text"]::placeholder ,
.wr42-text-input-block input[type="password"]::placeholder ,
.register-block input[type="text"]::placeholder ,
.register-block input[type="password"]::placeholder
 {
  font-weight: 300;
  color: #d5d5d5;
}

.btn:focus ,
.btn:active {
  outline: 3px solid #ff572230 !important;
  box-shadow: 0 0 0 .25rem #ff572230 !important;
}

.btn-wr42-login ,
.btn-wr42-login:hover ,
.btn-wr42-action ,
.btn-wr42-action:hover {
  height: 36px;
  padding: 4px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  border-radius: 6px;
}

.btn-wr42-orange ,
.btn-wr42-orange:hover
{
  background: #ff5722;
  color: #ffffff;
}

.btn-wr42-orangeo ,
.btn-wr42-orangeo:hover
{
  border: 1px solid #ff5722;
  background: #ffffff;
  color: #ff5722;
}

.btn-wr42-social ,
.btn-wr42-social:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  height: 36px;
  padding: 4px;
  text-align: left;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
}

.btn-wr42-social div {
  width: 150px;
}

.btn-wr42-social:hover {
  background: #efefef70;
}

.btn-wr42-social img {
  width: 24px;
  height: 24px;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #FFFFFF;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: #000000;
  width: 18px;
  height: 18px;
  border: 1px solid #000000;
  border-radius: 5px;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  /* outline: max(2px, 0.15em) solid #ff5722; */
  /* outline-offset: max(2px, 0.15em); */
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.remark {
  color: #ff4400;
}

.btn-wr42-main ,
.btn-wr42-main:hover
{
  height: 36px;
  font-size: 12px;
  color: #ffffff;
  background: #FF5722;
  border: 1px solid #FF5722;
  border-radius: 10px;
}

.btn-wr42-maino ,
.btn-wr42-maino:hover
{
  height: 36px;
  font-size: 12px;
  color: #FF5722;
  border: 1px solid #FF5722;
  border-radius: 10px;
}

.outline-required {
  outline: 3px solid #ff000030;
}