.field {
    --uiFieldPaddingTop: var(--fieldPaddingTop, 0px);
    --uiFieldPaddingRight: var(--fieldPaddingRight, 0px);
    --uiFieldPaddingBottom: var(--fieldPaddingBottom, 0px);
    --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);
    --uiFieldBorderColor: var(--fieldBorderColor, transpatent);
    --uiFieldBorderTop: var(--fieldBorderTop, 0px);
    --uiFieldBorderRight: var(--fieldBorderRight, 0px);
    --uiFieldBorderBottom: var(--fieldBorderBottom, 0px);
    --uiFieldBorderLeft: var(--fieldBorderLeft, 0px);
    --uiFieldBgColor: var(--fieldBgColor, transpatent);
    --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
    --uiFieldAnimationDuration: var(--fieldAnimationDuration, .3s);
    --uiFieldFonstSize: var(--fieldFontSize, 16px);
    position: relative;
    display: block;
}

.field__input {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--uiFieldBgColor);
    /* for iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border-style: solid;
    border-color: var(--uiFieldBorderColor);
    border-top-width: var(--uiFieldBorderTop);
    border-right-width: var(--uiFieldBorderRight);
    border-bottom-width: var(--uiFieldBorderBottom);
    border-left-width: var(--uiFieldBorderLeft);
    padding-top: var(--uiFieldPaddingTop);
    padding-right: var(--uiFieldPaddingRight);
    padding-bottom: var(--uiFieldPaddingBottom);
    padding-left: var(--uiFieldPaddingLeft);
    font-family: inherit;
    font-size: 100%;
    color: inherit;
    border-color: #e2dad9;
}

.field__input::-webkit-input-placeholder {
    color: var(--uiFieldPlaceholderColor);
    opacity: 0;
}

.field__input::-moz-placeholder {
    color: var(--uiFieldPlaceholderColor);
    opacity: 0;
}

.field__input:focus {
    outline: none;
}

.field__input:focus::-webkit-input-placeholder {
    transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
    opacity: 1;
}

.field__input:focus::-moz-placeholder {
    transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
    opacity: 1;
}

.field__label-wrap {
    height: 100%;
    display: block;
}

.field__label {
    position: absolute;
    top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
    left: calc(0px + var(--uiFieldPaddingLeft) + var(--uiFieldBorderLeft));
    pointer-events: none;
    font-size: 15px;
    transition: top var(--uiFieldAnimationDuration) cubic-bezier(0.9, -0.15, 0.1, 1.15), opacity var(--uiFieldAnimationDuration) ease-out;
    will-change: top, opacity;
    text-transform: capitalize;
    padding-left: 26px;
}

.field__input:not(:placeholder-shown)~.field__label-wrap .field__label {
    opacity: 0;
    top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
}

.field__input:focus~.field__label-wrap .field__label {
    opacity: 1;
    top: calc(-1 * calc(var(--uiFieldPaddingTop) + var(--uiFieldBorderTop) + 15px));
}


/* type 2 */

.field_type1 {
    --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
    --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
    --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
    --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
    --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);
}

.field_type1 .field__label-wrap:after {
    content: "";
    width: 0;
    height: var(--uiFieldBorderBottom);
    background-color: var(--fieldBorderColorActive);
    position: absolute;
    bottom: 0;
    left: 0;
    will-change: width;
    transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type1 .field__input:focus~.field__label-wrap:after {
    width: 100%;
}

form .form-group {
    margin-top: 40px;
}

form .form-group:first-child {
    margin-top: 0;
}

input[type="submit"] {
    background-color: red;
    background: #28a8df;
    background: -moz-linear-gradient(left, #28a8df 0%, #59c5df 0%, #4ca2ef 100%);
    background: -webkit-linear-gradient(left, #28a8df 0%,#59c5df 0%,#4ca2ef 100%);
    background: linear-gradient(to right, #28a8df 0%,#59c5df 0%,#4ca2ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a8df', endColorstr='#4ca2ef',GradientType=1 );
    border: 0;
    color: #fff;
    padding: 11px 40px;
    font-size: 16px;
    border-radius: 3px;
    float: right;
}

.logo.text-uppercase .text-primary {
    color: #26abe2 !important;
    font-size: 40px;
    margin-bottom: 20px;
    display: inline-block;
}

input.user-image {
    background-image: url(../images/user.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 50px;
}

input.pass-image {
    background-image: url(../images/password.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 50px;
}

.forget-lft {
    /* border: 1px solid red; */
    float: right;
}

.forget-lft a {
    color: #79d4b1 !important;
}

/* .page.login-page:after {
    position: absolute;
    content: "";
    width: 369px;
    height: 100%;
    background-color: #254f79;
    top: 0;
    z-index: 1;
    transform: rotate(162deg);
    left: -146px;
}
 */

/* 
.logo.text-uppercase img {
    width: 450px;
    position: absolute;
    left: -34px;
    top: 46%;
    transform: translateY(-50%);
    z-index: 9;
} */

.login-right {
    background-image: url(../images/hexline.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 505px;
    background-position: 149% -38%;
    background-color: white;
}

.logo.text-uppercase {
    max-width: 200px;
    /* margin: auto; */
}

.col-md-6.login-left {
    border-right: 1px solid #e0dede;
    background-size: cover;
    background-position: left center;
}
.container-fluid {
    padding: 0;
}