@font-face {
    font-family: myFirstFont;
    src: url("../font/Sarabun-Medium.ttf");
}
body {
    font-family: myFirstFont;
}

/* ส่วน scrollbar */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.00);
}
::-webkit-scrollbar-thumb {
background: rgba(47, 71, 147, 0.80);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(47, 71, 147, 0.80);
}


/* ส่วน slide slow div */
.slideanim {
    visibility: hidden;
}
.slidenim {
    animation-name: slidenim;
    -webkit-animation-name: slidenim;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slidenim {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slidenim {
0% {
opacity: 0;
-webkit-transform: translateY(10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}

/* ส่วน face slow div */
.faceanim {
    visibility: hidden;
}
.facenim {
    animation-name: facenim;
    -webkit-animation-name: facenim;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    visibility: visible;
}
@keyframes facenim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes facenim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.linePreloader {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #157A7F, #189DEF, #157A7F);
    background-color: linear-gradient(to right, rgba(225,238,238,0.4), rgba(209,219,220,0.4), rgba(225,238,238,0.4));
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 15px;
    background-size: 20%;
    background-repeat: repeat-y;
    background-position: -25% 0;
    animation: scroll 4s ease-in-out infinite;
}
@keyframes scroll {
50% {
background-size: 80%
}
100% {
background-position: 125% 0;
}
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
        
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 250px;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100vh;
    margin-left: -250px;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
}
#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media(min-width:768px) {
#wrapper {
    padding-left: 250px;
}
#wrapper.toggled {
    padding-left: 0;
}
#sidebar-wrapper {
    width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
    width: 0;
}
#page-content-wrapper {
    position: relative;
}
#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
}
}