@font-face {
    font-family: Eina01;
    src: url(/assets/fonts/eina/Eina01-Light.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de);
    src: url(/assets/fonts/eina/Eina01-Light.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de#iefix) format('embedded-opentype'), url(/assets/fonts/eina/Eina01-Light.woff?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('woff'), url(/assets/fonts/eina/Eina01-Light.ttf?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('truetype');
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: Eina01;
    src: url(/assets/fonts/eina/Eina01-Regular.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de);
    src: url(/assets/fonts/eina/Eina01-Regular.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de#iefix) format('embedded-opentype'), url(/assets/fonts/eina/Eina01-Regular.woff?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('woff'), url(/assets/fonts/eina/Eina01-Regular.ttf?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('truetype');
    font-style: normal;
    font-weight: 500
}

@font-face {
    font-family: Eina01;
    src: url(/assets/fonts/eina/Eina01-SemiBold.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de);
    src: url(/assets/fonts/eina/Eina01-SemiBold.eot?_ds=e7eb89ee16eb9575cefe3496d7214528013003de#iefix) format('embedded-opentype'), url(/assets/fonts/eina/Eina01-SemiBold.woff?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('woff'), url(/assets/fonts/eina/Eina01-SemiBold.ttf?_ds=e7eb89ee16eb9575cefe3496d7214528013003de) format('truetype');
    font-style: bold;
    font-weight: 700
}

/* ------ new line ------- */


:root {
    --border-radius: 4px;
    --border-radius-large: 12px;
    --content-width: 100%;
    --content-max-width: 375px;

    --font-size: 0.875em;
    --line-height: 1.375em;

    --primary-color: var(--flow-color-primary, #EC4A0A); /* NDR */
    --bg-color: white;
    --border-color: #D4D4D8;
    --text-color-header: #18181B;
    --text-color: #3F3F46;
    --text-color-muted: #71717A;
    --link-color: #1E40AF;
    --text-color-inverse: #E4E4E7;
    --text-color-inverse-muted: #A1A1AA;
    --text-color-inverse-disabled: #52525B;
    --text-color-inverse-contrast: #FAFAFA;
}

/* from style */

.core-container {

    font-family: 'Inter', sans-serif ;
    font-size: var(--font-size) ;
    color: var(--text-color);
    height: 100%;
    min-height: 100vh;
    width: 100vw;

    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;

    /* background: url('/assets/images/auth/background.png'); */
    background: var(--auth-background-img);

    -webkit-background-size: 128% 100%;
    -moz-background-size: 128% 100%;
    -o-background-size: 128% 100%;
    background-size: 128% 100%;
}

.auth-message {
    width: 418px;
    position: fixed;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #93312F;
    font-size: 14px;
    margin: auto;
    top:50px;
    left: 10%;
    right: 10%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .3);
}

.auth-btn-close-danger {
    width: 10px;
    margin-top: 3px;
    float: right;
    cursor: pointer;
}

.auth-hidden {
    display: none;
}

.auth-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    z-index: 9999;
}

.auth-overlay-redirect {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    z-index: 9999;
}

.login-container-base {
    position: absolute;
    margin: auto;
    width: 100%;
    display: block;
}

.login-container {
    z-index: 999;
    width: 600px;
    display: block;
    margin: auto;
    /* padding-top: 175px; */
    padding-top: 13%;
}

@media screen and (max-width: 480px) {
    .login-container {
      width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
}


/* custom form control */

.form-control.login-large-form-person {
    background: url('../../icons/ic_login_person.png') no-repeat 10px center;
    background-size: 22px;
    padding-left: 40px;
}

.form-control.login-large-form-lock {
    background: url('../../icons/ic_login_lock.png') no-repeat 10px center;
    background-size: 20px;
    padding-left: 40px;
}

.form-control.auth-otp{
    width: 25px!important; 
    padding: 5px 5px 5px 8px; 
    margin: 10px 10px 10px 12px; 
    float: left!important;
}

.auth-span-text {
    line-height: 20px;
    padding-left: 10px;
    font-size: 12px;
}

.preloader {
    margin-top: 25%;
    background: #FFFFFF;
    border-radius: 3px;
    text-align: center;
    padding: 8px;
    vertical-align: middle;
    display: inline-block;
}

.auth-loader-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* margin-top: 300px; */
    margin-top: 18%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: rgba(242, 75, 23, .0);
}

.auth-loader-content {
    width: 80px;
}

/* /////// new style ///////*/

label {
    font-weight: 500 !important; 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}
input {
    border: 1px solid var(--border-color);
    padding: 0.625rem 0.875rem;
    height: 38px;
}
p {
    line-height: var(--line-height);
}
.form-input input {
    border-radius: var(--border-radius);
    /* padding-left: 2.5rem;  */
    padding-left: 3.5rem;
}
.form-input :is(label, input) {
    display: block;
}
.form-input {
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem;
    position: relative;
}
.form-input-icon {
    position: absolute;
    bottom: 0.925rem;
    font-size: 1.5em;
    color: var(--text-color-muted);
    left: 0.5rem;
}
.button {
    display: block;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
}
.button-block {
    width: 100%;
}
.button-link {
    padding: 0;
    background: none;
    border: none;
    color: var(--link-color);
}
.button-primary {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
}
.button-secondary {
    /* background-color: var(--primary-color); */
    color: black;
    font-weight: 500;
}
header, .card, footer {
    width: var(--content-width);
    /* max-width: var(--content-max-width); */
    margin-left: auto;
    margin-right: auto;
}
header {
    text-align: center;   
}
.card {
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 1.6rem 2.4rem;
}
.card-header h1 {
    color: var(--text-color-header);
    font-size: 1.375em;
    font-weight: 500;
}
.card-header p {
    color: var(--text-color-muted);
}
footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 0.875em;
}
footer :is(.app-info, .build-info) {
    margin: 0;
    opacity: 0.8;
}
footer .copyright-info {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* Utilities */
.w-full { width: 100%; }
.my-2 { 
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-4 { 
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.form-otp {
   flex: 1;
   display: inline-block;
   width: 30px;
}

.auth-loader-content {
    width: 100px;
    height: 100px;
}

.auth-loader-container{
    margin: auto;
}

.auth-message {
    width: 418px;
    position: fixed;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #93312F;
    font-size: 14px;
    margin: auto;
    top:50px;
    left: 10%;
    right: 10%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .3);
}

.auth-btn-close-danger {
    width: 10px;
    margin-top: 3px;
    float: right;
    cursor: pointer;
}

.auth-overlay {
    display: flex;
    align-items: flex-start;
    /* width: 100%;
    height: 100%; */
}

.auth-otp{
    border-radius: 0px !important; 
    font-size: 20px; 
    padding: 10px 14px !important; 
    text-align: center;
}

.login-text-url-forgot-pass {
    text-decoration: none;
    color: #f24b17;
    font-weight: normal;
    font-size: 12px;
}

.login-text-url-refrsh-captcha {
    text-decoration: none;
    color: #1559BD;
    font-weight: normal;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    margin-left: 8px;
}

#loaderbar {
    animation: loaderbar 5s ease-in-out infinite;
    -webkit-animation: loaderbar 5s ease-in-out infinite;
}
@keyframes loaderbar {
    0% { width: 0%; }
    25% { width: 25%; }
    60% { width: 60%; }
    100% { width: 100%; }
}
@-webkit-keyframes loaderbar {
    0% { width: 0%; }
    25% { width: 25%; }
    60% { width: 60%; }
    100% { width: 100%; }
}

@keyframes vertical {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 0;
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    38% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    45% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.verticalflip span {
    animation: vertical 7.5s linear infinite 0s;
    -ms-animation: vertical 7.5s linear infinite 0s;
    -webkit-animation: vertical 7.5s linear infinite 0s;
    position: absolute;
    opacity: 0;
    background: #e3d6d64f;
    padding: 0px 5px;
    border-radius: 3px;
}

.verticalflip span:nth-child(2) {
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.verticalflip span:nth-child(3) {
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.enggano-auth-loader {
    background: #808080;
    height: 2px;
    position: absolute;
    left: 0%;
    -webkit-animation: enggano-form-loader 1.2s infinite ease-in-out;
    -moz-animation: enggano-form-loader 1.2s infinite ease-in-out;
    -o-animation: enggano-form-loader 1.2s infinite ease-in-out;
    animation: enggano-form-loader 1.2s infinite ease-in-out;
}

.enggano-auth-loader-overlay {
    /* position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    background: rgba(255, 255, 255, 0.55); */

    position: absolute;
    top: 120px;
    right: 0;
    bottom: 83px;
    left: 0;
    text-align: center;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--border-radius);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}
@-webkit-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%; 
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}



/* from style */

label {
    font-weight: 500 !important; 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}
input {
    border: 1px solid var(--border-color);
    padding: 0.625rem 0.875rem;
    height: 38px;
}
p {
    line-height: var(--line-height);
}
.form-input input {
    border-radius: var(--border-radius);
    /* padding-left: 2.5rem;  */
    padding-left: 3.5rem;
}
.form-input :is(label, input) {
    display: block;
}
.form-input {
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem;
    position: relative;
}
.form-input-icon {
    position: absolute;
    bottom: 0.925rem;
    font-size: 1.5em;
    color: var(--text-color-muted);
    left: 0.5rem;
}
.form-feedback-icon {
    width: 4rem;
    margin: 1rem 0 -1rem;
}
.form-feedback-icon path {
    fill: var(--primary-color);
}
.button {
    display: block;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
}
.button-block {
    width: 100%;
}
.button-link {
    padding: 0;
    background: none;
    border: none;
    color: var(--link-color);
}
.button-primary {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
}
.button-secondary {
    color: black;
    font-weight: 500;
}
.card, footer {
    width: var(--content-width);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}
header {
    text-align: center;   
}
header .header-brand-logo {
    height: 120px;
    background-image: var(--company-brand-logo);
    background-repeat: no-repeat;
    background-position: center;
}
.card {
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 1.6rem 2.4rem;
}
.card-header h1 {
    color: var(--text-color-header);
    font-size: 1.375em;
    font-weight: 500;
}
.card-header p {
    color: var(--text-color-muted);
}
footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 0.875em;
}
footer :is(.app-info, .build-info) {
    margin: 0;
    opacity: 0.8;
}
footer .copyright-info {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* Utilities */
.w-full { width: 100%; }
.my-2 { 
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-4 { 
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.form-otp {
   flex: 1;
   display: inline-block;
   width: 30px;
}

.auth-loader-content {
    width: 100px;
    height: 100px;
}

.auth-loader-container{
    margin: auto;
}

.auth-message {
    width: 418px;
    position: fixed;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #93312F;
    font-size: 14px;
    margin: auto;
    top:50px;
    left: 10%;
    right: 10%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .3);
}

.auth-btn-close-danger {
    width: 10px;
    margin-top: 3px;
    float: right;
    cursor: pointer;
}

.auth-overlay {
    display: flex;
    align-items: flex-start;
    /* width: 100%;
    height: 100%; */
}

.auth-otp{
    border-radius: 0px !important; 
    font-size: 20px; 
    padding: 10px 14px !important; 
    text-align: center;
}

.login-text-url-forgot-pass {
    text-decoration: none;
    color: #f24b17;
    font-weight: normal;
    font-size: 12px;
}

.login-text-url-refrsh-captcha {
    text-decoration: none;
    color: #1559BD;
    font-weight: normal;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    margin-left: 8px;
}

@keyframes vertical {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 0;
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    38% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    45% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.verticalflip span {
    animation: vertical 7.5s linear infinite 0s;
    -ms-animation: vertical 7.5s linear infinite 0s;
    -webkit-animation: vertical 7.5s linear infinite 0s;
    position: absolute;
    opacity: 0;
    background: #e3d6d64f;
    padding: 0px 5px;
    border-radius: 3px;
}

.verticalflip span:nth-child(2) {
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.verticalflip span:nth-child(3) {
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.enggano-auth-loader {
    background: #808080;
    height: 2px;
    position: absolute;
    left: 0%;
    -webkit-animation: enggano-form-loader 1.2s infinite ease-in-out;
    -moz-animation: enggano-form-loader 1.2s infinite ease-in-out;
    -o-animation: enggano-form-loader 1.2s infinite ease-in-out;
    animation: enggano-form-loader 1.2s infinite ease-in-out;
}

.enggano-auth-loader-overlay {
    /* position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    background: rgba(255, 255, 255, 0.55); */

    position: absolute;
    top: 120px;
    right: 0;
    bottom: 83px;
    left: 0;
    text-align: center;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--border-radius);
    /* max-width: var(--content-max-width); */
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}
@-webkit-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%;
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enggano-form-loader {
    0% {
        left: 0%;
        right: 100%;
    }

    25% {
        right: 0%;
    }

    50% {
        right: 0%; 
        left: 100%;
    }

    75% {
        left: 0%;
        right: 100%;
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

.enggano-progressbar {
    width: 150px;
    height: 5px;
    margin: auto;
    background-color: var(--loader-background-color, #02c39a26);
    box-shadow: none;
    border-radius: 0px;
    margin-top: 10px;
}

.loaderbar.progress-bar {
    width: 60%;
    background-color: var(--loader-progress-color, #ffffff);
    box-shadow: none;
}

.loaderbar.progress-bar {
    animation: loaderbar 5s ease-in-out infinite;
    -webkit-animation: loaderbar 5s ease-in-out infinite;
}

@keyframes loaderbar {
    0% { width: 0%; }
    25% { width: 25%; }
    60% { width: 60%; }
    100% { width: 100%; }
}
@-webkit-keyframes loaderbar {
    0% { width: 0%; }
    25% { width: 25%; }
    60% { width: 60%; }
    100% { width: 100%; }
}

.loader .header-brand-logo {
    display: block;
    width: 600px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    background-image: var(--company-brand-logo);
}