@font-face {
    font-family: 'Sarabun_Regular';
    src: url('../fonts/Sarabun/Sarabun-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Roboto_bold';
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
	font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: 'Sarabun_Light';
    src: url('../fonts/Sarabun/Sarabun-Light.ttf');
	font-weight: normal;
	font-style: italic;
}
@font-face {
    font-family: 'Sarabun_LightItalic';
    src: url('../fonts/Sarabun/Sarabun-LightItalic.ttf');
	font-weight: 500;
	font-style: italic;
}


body
{
    font-family:  'Sarabun', sans-serif !important; 
	font-weight: normal;
    font-size: 1.2rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', 'Sarabun', sans-serif !important; 
}
.form-control {
    border-radius: 30px;
    border: 1px solid var(--bs-gray-dark) !important;
    background-color: var(--bs-white);
}
span.eye-icon {
    color: #B7B7B7;
}
.logo-login{
    width: 300px;
}
.title-header-show
{
    font-family: 'FC_Iconic_Bold';
}
.btn:hover{
	opacity: 0.9;
}
/* a:hover{
    color: #0e8d76;
    opacity: 0.9;
} */
.btn-login{
    background-color: var(--bs-secondary) !important;
    border-radius: 30px;
    padding: 0.6rem 4rem;
    color: white;
}
.img-login{
    width: 450px;
}
.show-line-header{
    height: 1rem;
    background: linear-gradient(to right, #166BB2 , #289C8D); 
}
.show-line-header-register{
    height: 15px;
    top: -76px;
    background: linear-gradient(to right, #166BB2 , #289C8D); 
}
.top-login{
    top: -140px;
}
  /* .top-register
    {
        top: -120px;
    } */

@media (max-width: 900px) {
    .img-login{
        width: 300px;
    }
    .show-line-header{
        top: -66px;
    }
    .top-login{
        top: -50px;
    }
    .show-line-header-register{
        height: 15px;
        top: -17px;
        background: linear-gradient(to right, #4BD8CD , #0670B6); 
    }
    /* .top-register
    {
        top: -20px;
    } */
}
@media (max-width:576px) {
    .logo-login{
        width: 250px;
    }
}
.color-main{
    color: var(--bs-primary);
}
.fw-700{
    font-weight: 700;
}
.form-control::placeholder{
    color: #B7B7B7;
}
select:required:invalid {
    color: #B7B7B7 !important;
}
.text-green{
    color: #1b9b83;
}


 /*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/
.text-primary{
    color: var(--bs-primary)!important;
}
.text-secondary{
    color: var(--bs-secondary) !important;
}
.text-grey{
    color: var(--bs-grey);
}
.text-dark{
    color: var(--bs-grey);
}
.text-black {
    color: #000 !important;
}


 /*
|--------------------------------------------------------------------------
| underline at Login page 
|--------------------------------------------------------------------------
*/
div.login-underline {
    display: flex;
    flex-direction: row;
    color: #e1e1e6;
}
div.login-underline:before, div.slogin-underline::after {
    content: "";
    flex: 1 1;
    border-bottom: 2px solid #e1e1e6;
    margin: auto;
}
div.login-underline:before, div.login-underline::after {
    content: "";
    flex: 1 1;
    border-bottom: 2px solid #e1e1e6;
    margin: auto;
}

 /*
|--------------------------------------------------------------------------
| btn login social
|--------------------------------------------------------------------------
*/
.btn:not([class*=btn-outline]) {
    border-color:unset !important;
}

.btn-facebook{
    text-align: center;
    border-radius: 30px !important;
    border: none !important;
    color: white !important;
    /* font-size: 1.5rem !important; */
    align-items: center;
    padding: 0.6rem 4rem;
    background-color: #5971BF;
}
.btn-google{
    text-align: center;
    border-radius:30px !important;
    border: none !important;
    color: white !important;
    /* font-size: 1.5rem !important; */
    align-items: center;
    padding: 0.6rem 4rem;
    background-color: #FB4C4C;
}