/* last update 2 sept 2024 */
:root {
    --padding-field: 6.958vh;
    --border-radius-12px: 1.546vh;
  }

.forgot-userid {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    letter-spacing: 0.0644vh;
}
html, body {
    height: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}

@font-face {
    font-family: 'Inter reg';
    font-style: normal;
    font-weight: 400;
    src: url('font/InterRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'inter med';
    font-style: normal;
    font-weight: 500;
    src: url('font/InterMedium.ttf') format('truetype');
}
@font-face {
    font-family: 'inter bold';
    font-style: normal;
    font-weight: 600;
    src: url('font/InterSemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'password';
    src: url('font/password.eot');
    src: url('font/password.eot?#iefix') format('embedded-opentype'),
         url('font/password.woff') format('woff'),
         url('font/password.ttf') format('truetype'),
         url('font/password.svg#password') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
  display: inline-block;
   font-family: 'password';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 2.27vh;
}
.icon-eye-open:before{content:'\0041';}
.icon-eye-close:before{content:'\0042';}
.icon-user:before{content:'\0043';}
.icon-unlock:before{content:'\0044';}
.icon-call:before{content:'\0045';}
.icon-warn:before{content:'\0046';}
.icon-user-alt:before{content: '\0047';}
.icon-lock:before{content: '\0048';}
#eye {
	position: absolute;
	top: 2.7vh;
	right: 4.9vh;
	color: #667085;
	padding: .63vh 3.15vh;
	cursor: pointer;
}
#eye:hover {
	color: #898a8b;
}
#eye:before {
    font-size: 2.27vh;
}

.field.password {
    position: relative;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0vh 0.515vh  1.546vh 0vh #00000014;
            box-shadow: 0vh 0.515vh  1.546vh 0vh #00000014;
}
.sign-in {
    font-weight: 500;
    font-size: 2.577vh;
    font-family: 'Inter med';
    margin-top:  3.092vh;
}
#sidePanel img {
    border-top-left-radius: var(--border-radius-12px);
    border-bottom-left-radius: var(--border-radius-12px);
    height: 100%;
    width: 100%;
}
.remember-me {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    margin-bottom: 0;
}
.remember-me-input {
    margin-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.remember-me-input input[type="checkbox"] {
    padding: 0;
    text-align: left;
    width: 2.99vh;
}
.remember-me-input label {
    margin-bottom: 0;
    font-size: 1.52vh;
    color: #202020;
    letter-spacing: -0.05vh;
}
.container {
    display: block;
    position: relative;
    padding-left: 3.14vh;
    margin-bottom: 1.79vh;
    cursor: pointer;
    font-size: 3.29vh;
}
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: -0.27vh;
    left: 0;
    height: 2.24vh;
    width: 2.24vh;
    background-color: #fff;
    border:  0.14vh solid #dfdfdf;
    border-radius:  0.29vh;
}
  
.container:hover input ~ .checkmark {
    background-color: #ccc;
}
  
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}
  
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  .container input:checked ~ .checkmark:after {
    display: block;
}
.container .checkmark:after {
    left: 0.72vh; /* 4px */
    top: -0.14vh; /*-1px */
    width:  0.44vh; /* 3px */
    height: 1.49vh; /* 10px */
    border: solid white;
    border-width: 0 0.29vh 0.29vh 0; /* 0 2px 2px 0; */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#mainBody > .field {
    padding: 0px 6.958vh;
    margin-bottom: 1.546vh;
}
#submitButton {
    padding: 3.092vh 6.958vh 1.546vh 6.958vh;
}
.open-new-account {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.902vh;
    font-size: 1.417vh;
}
#createAccountButton {
    color: #4796e7;
    font-weight: 600;
    font-family: 'inter bold';
	cursor: pointer;
}
a:hover,
#createAccountButton:hover {
	color: #0a57a5;
}
#submitButton > input, #submitButton > button {
    cursor: pointer;
}
#sidePanel {width: 56.443vh;}
#logo,
#logoSyariah {width: 39.94vh;}
/* #sidePanel {
    min-height: 600px;
} */
body {  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
}
@media only screen and (max-width: 114.690vh) {
	#sidePanel { display: none}
    #mainPanel {
        border-radius: 1.546vh;
    }
    #mainHead {
        padding-top: 0;
    }
}

@media only screen and (max-width:  59.278vh) {
	body {background-color: #fff !important}
    #logo,
    #logoSyariah {width: 100%}
	.row {
		-webkit-box-shadow: none;
		        box-shadow: none;
	}
    #mainBody > .field { padding: 0px 3.092vh;}
    #mainPanel {
        border-radius: 1.546vh;
		width: 41.237vh !important;
    }
    #mainHead {
        padding-top: 0;
    }
    #eye {
        right: 1.5vh;
    }
}

.field.reset-password {
    position: relative;
}

.field.reset-password > span {
	position: absolute;
	top: 25px !important;
	right: 58px !important;
}
.field.reset-password > span i {
    cursor: pointer;
    padding: 4px 6.5px;
    color: rgba(0, 0, 0, .3);
}
.field.reset-password > span i:hover {
    color: #333;
}
.log-reg, .log-syariah {display: inline-block}
#logoSyariah,
.log-syariah,
.isSyariah #logo,
.isSyariah .log-reg {
    display:none;
}
.isSyariah #logoSyariah,
.isSyariah .log-syariah {
    display:inline-block;
}
.alert.alert-success,
.isSyariah #submitButton > input {
    background: #058956
}
.isSyariah img.banner-regular,
img.banner-syariah  {
    display: none;
}
.isSyariah img.banner-syariah {
    display: inline-block;
}
#footer {
    margin-top: 4.409vh;
}
#footer p {
    font-size: 0.98vh;
    font-weight: 500;
    margin-top: 0.54vh;
}