/*
* Campaign TH co.,ltd.
* https://campaign.co.th/
******************************************************************************/

@charset "UTF-8";
:root {
  --bs-font-sans-serif: 'Noto Sans Thai', sans-serif !important;
  --bs-font-monospace: 'Noto Sans Thai', monospace !important;
}


:root, [data-bs-theme=light] {
    /* --bs-heading-color:#000000; */
}

body {
  font-family: 'Noto Sans Thai', sans-serif;
  /* background-color: #efefef5f !important; */
}

.font-oswald {
  font-family: "Oswald", serif;
}


.bg-body-img {
  background-repeat: repeat;
  background-position: center bottom;
  background-size: cover ;
}
.bg-img-darkblue {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover ;
}
.bg-darkblue {
  background-color: #102A45;
}

.text-black {
  color: #000000 !important;
}
.text-darkblue {
  color: #102A45;
}

.btn-next-bottom-right {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.bg-stmn-gradient {
  background: linear-gradient(143.57deg, #1A5AFA 21.23%, #0A90FD 81.39%, #00B3FF 120.66%);
  border-radius: 20px;
}  

.flag-right {
  position: absolute;
  top: 0px;
  right: 10px;
  padding: 3px 12px;
  text-transform: uppercase;
  border-radius: 0px 0px 10px 10px;
  font-size: 0.7rem;
  color: white;
  box-shadow: 0 0.6rem 1rem #0000003b !important;
}

/* button */
      .btn-darkblue {
        color: #fff;
        background-color: #102A45;
        border-color: #102A45;
      }
      .btn-darkblue:hover {
        color: #fff !important;
        background-color: #0d233b !important;
        border-color: #0d233b !important;
      }
      .btn-check:focus + .btn-darkblue, .btn-darkblue:focus, .btn-darkblue.focus {
        color: #fff;
        background-color: #0d233b;
        border-color: #0d233b;
        box-shadow: none;
      }
      .btn-check:checked + .btn-darkblue, .btn-check:active + .btn-darkblue, .btn-darkblue:active, .btn-darkblue.active, .btn-darkblue.show.dropdown-toggle, .show > .btn-darkblue.dropdown-toggle {
        color: #fff !important;
        background-color: #0d233b !important;
        border-color: #0d233b !important;
      }
      .btn-darkblue.disabled, .btn-darkblue:disabled {
        color: #fff !important;
        background-color: #102A45 !important;
        border-color: #102A45 !important;
        box-shadow: none !important;
      }

      .btn-group .btn-darkblue,
      .input-group .btn-darkblue {
        border-right: var(--bs-border-width) solid #0d233b;
        border-left: var(--bs-border-width) solid #0d233b;
      }

      .btn-group-vertical .btn-darkblue {
        border-top-color: #0d233b;
        border-bottom-color: #0d233b;
      }
/* /button */


/* card member */
      .card-member {
        border: 1px solid #dbdade !important;
        border-radius: 0.5rem !important;
        position: relative !important;
        box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45) !important;
        background: rgb(4,15,27);
        background: linear-gradient(40deg, rgba(4,15,27,1) 0%, rgba(16,42,69,1) 63%, rgba(94,112,131,1) 64%, rgba(16,42,69,1) 100%);
      }
      .card-member-photo {
        position: absolute;
        top:3.2rem; 
        left:0.8rem;  
      }
      .card-member-name {
        position: absolute;
        color: white;
        font-weight: 600;
        top:5rem; 
        left:8.3rem;
      }
      .card-member-number {
        position: absolute;
        color: white;
        top:0.8rem; 
        right:1rem;
      }
      .card-member-logo {
        position: absolute;
        max-width: 100px;
        top:0.8rem; 
        left:1rem;
      }
      .card-member-underline {
        box-shadow: var(--tw-shadow);
        --tw-shadow: inset 0 -0.2em 0 0 #ef9295 !important;
        --tw-shadow-colored: inset 0 -0.2em 0 0 #ef9295 !important;
      }

/* /card member */


/* animaiton */
.fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

.swing-in-top-fwd{-webkit-animation:swing-in-top-fwd 1.5s cubic-bezier(.68,-.55,.265,1.55) both;animation:swing-in-top-fwd 1.5s cubic-bezier(.68,-.55,.265,1.55) both}
@-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}