@font-face {
    font-family: leelawad;
    src: url('../font/leelawad.ttf') format("opentype");
    ;
}

@font-face {
    font-family: leelawad-bold;
    src: url('../font/leelawad.ttf') format("opentype");
    ;
}

@font-face {
    font-family: gothom-light;
    src: url('../font/gotham/GothamRounded-Light.otf') format("opentype");
    ;
}

@font-face {
    font-family: popines-medium;
    src: url('../font/poppins/poppins-Medium.ttf') format("opentype");
    ;
}

@font-face {
    font-family: poppins-light;
    src: url('../font/poppins/Poppins-Light.ttf') format("opentype");
    ;
}
@font-face {
    font-family: poppins-italic;
    src: url('../font/poppins/Poppins-MediumItalic.ttf') format("opentype");
    ;
}

* {
    font-family: poppins-light;
    letter-spacing: .6px;
}


* p {
    font-family: leelawad;
    font-size: 14px;
}

body {
    background-color: #004f70;

}

#login {
    position: relative;
}

.login-box::after {
    content: "";
    width: 100%;
    background-color: #004f70;
    position: absolute;
    left: 0px;
    opacity: 65%;
    right: 0px;
    top: 0px;
    height: 100%;
    z-index: 1;
}

.logo{
    width: 250px;
}

.login-box {
    height: 100vh;
    background-color: #004f70;
    background-image: url("../img/companyImage.webp");
    background-size: cover;
    background-position: center;
}

.login-box-inner h4 {
    color: #000000;
    font-weight: bold;
    font-family: leelawad-bold;
}

.login-heading {
    font-family: popines-medium;
    font-size: 18px;
    color: #999999;
}

.verification-img img{
    width: 50px!important;
}

.or-line {
    text-align: center;
    display: flex;
}

.or-line span {
    font-size: 10px;
    font-weight: bold;
    color: #999999;
}

.or-line hr {
    width: 43%;
    margin-bottom: 0px;
}

hr{
    margin: 8px 0px;
}

#form .input-text label{
    font-size: 16px;
    color: #000;
    margin-bottom: 6px;
}
.email-display-outer{
    border-bottom: 4px solid #008037;
    padding-bottom: 4px;
}

.small-text {
    font-size: 12px!important;
    color: #999999;
}

.login-box-inner {
    position: relative;
    padding: 0px;
    z-index: 2;
    border-radius: 0px;
}

.box-footer p {
    color: #747373;
    background: #e4e6e7;
    padding: 11px 10px;
    font-size: 12px;
}

.input-password input,
.input-text input {
    padding: 12px 20px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #B8B8B8;
}

.input-text{
    text-align: left;
}

.input-text label{
    font-size: 12px;
}

.remenber-box {
    color: #535353;
    font-size: 13px;
}

.forget-box button {
    font-size: 15px;
    text-decoration: none;
    color: #535353;
    outline: none;
}

.forget-box button:hover {
    color: #207AE1;
}

.dark-button {
    background-color: #0F1721;
    color: white;
    padding: 10px 35px;
}

.dark-btn {
    background-color: #008037;
    color: #fff;
    width: 100%;
}

.dark-btn:hover {
    background-color: #017433;
    color: #fff;
    width: 100%;
}

.links {
    color: #3564cf;
    text-decoration: none;
    font-weight: bold;
}

.color-858585 {
    color: rgb(217, 217, 217);
    font-size: 10px;
    font-family: poppins-italic;
}

.box-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.footer-nav {
    z-index: 3;
}

.footer-nav a {
    border-left: 1px solid rgb(190, 190, 190);
    text-decoration: none;
    padding: 0px 5px;
    color: #f1f1f1;
    font-size: 11px;
}


.iti{
    width: 100%;
}

.iti input{
    padding-left: 55px;
}

#result{
    margin-bottom: 0px;
}

.footer-nav a:hover {
    color: #fff;
}

.footer-nav p {
    font-size: 12px;
    color: #f1f1f1;
}

/* Login Css End 
.footer-nav{
	position: absolute;
	bottom: 0px;
	top: 100%;
	left: 50%;
	transform: translate(-50%,-50%);
}*/

.logo-box img {
    width: 130px
}

.logo-box p {
    font-size: 14px;
}

.left-side .offcanvas {
    position: relative;
}

.logo-box h4 {
    color: #000000;
    font-weight: bold;
    font-family: leelawad-bold;
}

.side-nav-bar .nav-link {
    border: 4px solid white;
    border-bottom: 1px solid #DFDFDF;
    padding: 13px 18px;
}

.login-box-inner .nav-item .nav-link{
    padding: 2px 0px;
}

.login-form-box{
    padding: 30px 35px;
    position: relative;
}

.login-form-outer{
    background-color: #fff;
    position: relative;
}

.login-form-box .input-password input,
.login-form-box .input-text input{
    padding: 9px 16px;
    font-size: 14px;
}
.login-form-box .input-password input::placeholder,
.login-form-box .input-text input::placeholder{
    font-size: 14px;
}

.login-box-inner .nav-item {
    width: 42%;
    margin: auto;
}

.login-box-inner .nav-item .nav-link {
    width: 100%;
    background: #fff;
    color: #000;
    border-radius: 0px;
    border-bottom: 3px solid #fff;
}

.login-box-inner .nav-item .nav-link.active,
.login-box-inner .nav-item .nav-link:hover {
    width: 100%;
    background: #fff;
    color: #000;
    border-bottom: 3px solid #008037;
}

#example_filter input::placeholder{
    font-size: 13px;
    color: rgb(187, 187, 187);
    font-style: italic;
}

@media only screen and (max-width: 425px) {
    .login-form-box{
        padding: 23px 11px;
    }

    .login-box-inner .nav-item .nav-link, .login-box-inner.nav-item .nav-link{
        font-size: 13px;
    }

    .footer-nav{
        background-color: #004f70;
    }

    .footer-nav p{
        margin-bottom: 17px;
    }

    .login-box {
        height: 100vh;
    }

    .login-box-inner {
        position: inherit;
        height: 100%;
        padding: 0px;
        border-radius: 0px;
    }

    .login-box-inner .nav-item .nav-link {
        padding: 7px 0px;
    }

    .box-footer {
        position: absolute;
        bottom: 0px;
        transform: none;
        width: 100%;
        left: 0%;
    }

    .footer-nav {
        margin-top: 15px;
    }

    .footer-nav .text-side {
        text-align: center;
        margin-top: 10px;
    }

    .footer-nav {
        padding: 0px;
    }

    .footer-nav .text-side p,
    .footer-nav .link-side a {
        font-size: 12px;
    }

    .footer-nav .link-side {
        justify-content: center;
        margin-top: 10px;
    }

    .login-box-inner img {
        width: 118px
    }
}