.h-custom {

height: calc(100% - 73px);

}

@media (max-width: 450px) {

.h-custom {

height: 100%;

}

}

.login-page{

    background-image: linear-gradient(left, transparent, transparent 50%, #F3F4F6 50%, #F3F4F6 100%);

    background-image: -webkit-linear-gradient(left, transparent, transparent 50%, #F3F4F6 50%, #F3F4F6 100%);

}

.box-image {

    text-align: center;

}

.box-image {

    padding: 70px 0px 0px 100px;

    position: relative;

}

.form-login-box {

   padding: 70px 100px 0px 0px;

}

.title-login {

    font-size: 30px;

    text-align: center;

    margin-bottom: 30px;

}

input.form-control {

    color: #3E4A59;

    font-size: 16px;

    font-weight: 400;

}

.form-login-box .form-outline {

    margin-bottom: 15px;

}

.form-login-box input.form-control {

    color: #3E4A59;

    font-size: 16px;

    font-weight: 400;

    border: 1px solid #3E4A59;

    padding: 11px 12px;

    height: auto;

}

.form-login-box input.btn.btn-primary.btn-lg {

    width: 100%;

    background: #1EA19A;

    border: 1px solid #1EA19A;

    font-size: 18px;

    font-weight: 600;

    padding: 12px 0px;

}

.form-login-box input.btn.btn-primary.btn-lg:hover

{

	background: #3E4A59;

    border: 1px solid #3E4A59;

}

.form-login-box .link-forget {

    color: #3E4A59;

    font-size: 14px;

}

.box-image .bx img {

    float: left;

}

.box-image .bx p {

    overflow: hidden;

    padding-left: 10px;

    font-size: 14px;

    color: #404755;

    text-align: left;

    margin-bottom: 0px;

    font-weight: 600;

    line-height: 17px;

}

.box-image .bx p span{

color: #1EA19A;

}

.box-image .bx {

    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;

    padding: 12px 20px;

    border-radius: 13px;

    max-width: 55%;

    background: #fff;

}

.list-info {

    position: absolute;

    top: 52%;

    left: 7%;

}

@media (max-width: 767px)

{

	.login-page {

    background-image: none;

}

    .box-image {

        background: #f3f4f6;

        padding: 30px;

    }

    .form-login-box {

    padding: 30px;

}

.list-info {

    position: absolute;

    top: 60%;

    left: -5%;

}

.box-image .bx {

    max-width: 70%;

}

}







.textfield {

	 position: relative;

	 box-sizing: border-box;

	 min-width: 300px;

	 margin: 0;

	 padding: 0;

	 border: none;

}

 .textfield__label {

	 position: absolute;

	 top: 12px;

	 left: 15px;

	 display: block;

	 font-size: 16px;

	 line-height: 24px;

	 color: rgba(77, 77, 77, 0.5);

	 user-select: none;

	 cursor: text;

}

 .textfield__label::after {

	 position: relative;

	 top: -3px;

	 left: 1px;

	 display: inline-block;

	 content: "*";

	 color: #d0011b;

}

.textfield__input {

    display: block;

    box-sizing: border-box;

    height: 48px;

    width: 100%;

    padding: 11px 14px;

    border: 1px solid #3E4A59;

    border-radius: 5px;

    background: #fff;

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    outline: none;

    transition: all 0.25s linear;

    color: #3E4A59;

}

 .textfield__input:disabled {

	 border-color: #e6e6e6;

	 background: #f9fafb;

}

 .textfield__input::placeholder {

	 color: transparent;

}

 .textfield__input:focus + .textfield__label, .textfield__input:valid + .textfield__label, .textfield__input:disabled + .textfield__label {

	 display: none;

}

.error{

    color: #cc3300;

}

.loader {

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    background: rgba(255, 255, 255, 0.9);

    height: 100%;

    text-align: center;

    font-weight: bold;

    color: #3E4A59;

    display: none;

    padding-top: 5%;

}