body {
    font-family: Sarabun, sans-serif
}

.bg-gradient-primary {
    /* background-image: url(/images/login_bg.jpg) */
    background-color: #4e73df;
    background-image: linear-gradient(90deg, #f36f2f, rgb(243 111 47 / 50%)) !important;
}

.singin-label {
    color: #fff
}

.card {
    background-color: transparent
}

.bg-login-image {
    background: url(/logo512.jpg);
    background-position: 50%;
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #111
}

.btn-primary:not(:disabled):not(.disabled):active {
    color: #f36f2f;
    background-color: #fff;
    border-color: #f36f2f
}

.login-logo {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px
}

.btn-primary {
    color: #fff;
    background-color: #f36f2f;
    border-color: #f36f2f;
    border-width: 2px;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(243 111 47 / 25%)
}

.btn-primary:hover,
.btn-primary:hover:enabled {
    color: #f36f2f;
    background-color: #fff;
    border-color: #f36f2f
}

.btn-primary:disabled {
    color: #fff;
    background-color: #f36f2f;
    border-color: #f36f2f;
    opacity: 0.75;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #f36f2f;
    background-color: #fff;
    border-color: #f36f2f
}



.btn-primary-reverse {
    color: #f36f2f;
    background-color: #fff;
    border-color: #f36f2f;
    border-width: 2px;
}


.btn-primary-reverse:not(:disabled):not(.disabled).active:focus,
.btn-primary-reverse:not(:disabled):not(.disabled):active:focus,
.btn-primary-reverse:focus {
    box-shadow: 0 0 0 0.2rem rgb(243 111 47 / 25%)
}

.btn-primary-reverse:hover,
.btn-primary-reverse:hover:enabled {
    color: #fff;
    background-color: #f36f2f;
    border-color: #f36f2f;
}

.btn-primary-reverse:disabled {
    color: #f36f2f;
    background-color: #fff;
    border-color: #f36f2f;
    opacity: 0.75;
}

.btn-primary-reverse:not(:disabled):not(.disabled).active,
.btn-primary-reverse:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #f36f2f;
    border-color: #f36f2f;
}

.tsn-login-container, .tsn-login-container *, .tsn-login-form {
  font-size: 1rem !important;
}


.tsn-login-form input {
    border-radius: 10rem;
    padding: 1.5rem 1rem;
    color: #000;
    height: calc(1.5em + 0.75rem + 2px);
}

.tsn-login-form input:focus {
    color: #000;
    border-color: #f36f2f;
    box-shadow: 0 0 0 0.2rem rgb(243 111 47 / 25%)
}

.tsn-login-form button,
.tsn-login-form .btn {
    border-radius: 10rem;
    padding: 0.75rem 1rem;
}

.tsn-login-button {
    border-radius: 10rem;
    padding: 0.75rem 1rem;
}

.tsn-hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5em;
    opacity: .5;
}

.tsn-hr-text::before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

.tsn-hr-text::after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa;
}

.tsn-text-primary {
    color: #f36f2f !important;
}

.tsn-language-primary {
    color: #f36f2f !important;
    background-color: #fff;
    padding: 10px;
    border-radius: 3px;
}

.tsn-language-white {
    color: #fff;
    padding: 10px;
    border-radius: 3px;
}

.tsn-language-white:hover {
    color: #f36f2f;
    background-color: #fff;
    padding: 10px;
    border-radius: 3px;
}

.cursor-pointer {
    cursor: pointer;
}

.tsn-link {
    text-decoration: none !important;
}


@media (max-width: 413px) {
    .tsn-login-card {
        min-width: 95% !important;
        width: 95% !important;
    }
}


.font-size-16 {
    font-size: 16px !important;
}

.tsn-login-container .nav-tabs .nav-link.active {
    color: #f36f2f !important;
    font-weight: bold;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff;
}

.tsn-login-container .nav-tabs .nav-link {
    border-radius: 0 !important;
    
}

.tsn-login-container .nav-tabs .nav-item:first-child .nav-link.active {
    border-color: transparent #dee2e6 transparent transparent !important; 
}

.tsn-login-container .nav-tabs .nav-item:last-child .nav-link.active {
    border-color: transparent transparent transparent #dee2e6 !important; 
}