html {
    -webkit-tap-highlight-color: transparent;
}

body {
    background: #fff !important;
    direction: ltr;
    font-size: 14px;
    line-height: 1.4286;
    margin: 0;
    padding: 0;
    color: #202124;
    font-family: roboto, "Noto Sans Myanmar UI", arial, sans-serif;
}

.singinForm {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    display: block;
    flex-shrink: 0;
    margin: 0 auto;
    width: 450px !important;
    height: auto;
    /*min-height: 500px;*/
    padding: 48px 40px 36px;
    transition: .2s;
    box-sizing: inherit;
    text-align: center;
}

.logo-form {
    width: 150px;
    height: auto;
}

h2.form-signin-heading {
    padding-bottom: 0;
    padding-top: 16px;
    color: #202124;
    font-size: 24px;
    font-family: "Google Sans", "Noto Sans Myanmar UI", arial, sans-serif;
    font-weight: 400;
    line-height: 1.3333;
    margin-bottom: 24px !important;
    margin-top: 0;
    word-break: break-word;
}

span.et-block {
    display: block;
    padding-bottom: 1px;
    padding-top: 7px;
    color: #202124;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 1.5;
}

.form-signin {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto;
}

.input {

}

.form-wrapper-outer {
    width: 450px !important;
    padding: 40px;
    border-radius: 8px;
    margin: auto;
    border: 1px solid #DADCE0;
    margin-top: 7%;
}

.form-wrapper-outer .form-logo {
    margin: 0px auto 15px;
    width: 100px;
}

.form-wrapper-outer .form-logo img {
    width: 100%;
}

.form-greeting {
    text-align: center;
    font-size: 25px;
    margin-bottom: 15px;
}

.form-button {
    text-align: right;
}

.field-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.field-wrapper input {
    border: 1px solid #DADCE0;
    padding: 15px;
    border-radius: 4px;
    width: 100%;
}

.field-wrapper .field-placeholder {
    font-size: 16px;
    position: absolute;
    bottom: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #80868b;
    padding: 0 8px;
    -webkit-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    text-align: left;
    width: 100%;
}

form.form-signin {
    padding: 0 20px !important;
}

.field-wrapper .field-placeholder span {
    background: #ffffff;
    padding: 0px 8px;
}

.field-wrapper input:not([disabled]):focus ~ .field-placeholder {
    color: #1A73E8;
}

.field-wrapper input:not([disabled]):focus ~ .field-placeholder,
.field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder {
    -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
    transform: scale(.75) translateY(-39px) translateX(-60px);

}

button.btn.btn-lg.btn-primary.btn-block {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    cursor: pointer;
    margin-top: 25px;
    /*float: right;*/
    /*max-width: 33%;*/
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-size: .875rem;
    letter-spacing: .0107142857em;
    font-weight: 500;
    text-transform: none;
    transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

button.btn.btn-lg.btn-primary.btn-block:hover {
    background-color: #0069d9;
    border-color: #0062cc;
    -webkit-transition: background-color 0.1s cubic-bezier(0.4, 0, 1, 1);
    transition: background-color 0.1s cubic-bezier(0.4, 0, 1, 1);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.form-signin .form-control {
    position: unset !important;
    box-sizing: border-box;
    height: auto;
    padding: 15px !important;
    font-size: 16px;
    line-height: inherit !important;
}

.form-control:focus {
    border: 2px solid #1a73e8 !important;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    margin-top: -35px;
}

.textfield {
    position: relative;
    padding: 10px 15px;
    border: 1px solid #e3f2fd;
    border-radius: 5px;
    box-shadow: none;
}

.centered span {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    top: 13px;
    left: 15px;
    color: #A9A9A9;
    padding: 0 5px;
}

.textfield:focus {
    border: 1px solid #0d47a1;
}

input:focus ~ span,
input:not(:focus):valid ~ span {
    top: -8px;
}

.textfield, span {
    transition: ease-in-out 0.2s all;
    -webkit-transition: ease-in-out 0.2s all;
    -moz-transition: ease-in-out 0.2s all;
    -o-transition: ease-in-out 0.2s all;
}

@media only screen and (max-width: 500px) {
    .form-wrapper-outer {
        border: none !important;
    }

    .form-wrapper-outer {
        width: 100% !important;
    }

    .singinForm {
        width: 100% !important;
    }
}

.hidden {
    display: none !important;
}

.error {
    border: 1px solid #d93025 !important;
}

.field-wrapper input.error:not([disabled]):focus ~ .field-placeholder {
    color: #d93025;
}

.form-control.error:focus {
    border: 2px solid #d93025 !important;
}

.error-msg {
    color: #d93025;
    line-height: normal;
    margin-top: 2px;
    font: 400 12px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}

span.jibhHc {
    color: #d93025;
    position: relative;
    top: 3px;
}

#error-box {
    display: inline-block;
    text-align: left;
    width: 100%;
}

a.lang.forgetPassword {
    color: #80868b;
    font-size: 16px;
    text-decoration: underline;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a.lang.forgetPassword:hover {
    color: #007bff;
    -webkit-transition: color 0.1s ease-in;
    /* Safari */
    transition: color 0.1s ease-in;
    -webkit-transition-delay: 0.1s;
    /* Safari */
    transition-delay: 0.1s;
}