@import '../fonts/fonts.css';

*{margin: 0rem; padding: 0rem;}
body{ background-color: #F0F2FF;}

input:-internal-autofill-selected{ background-color: transparent !important;}

/* Login Page */
.cms_login_sec{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
.login_box{ margin: auto; width: 100%; max-width: 1170px;}
.myRightCtn{ position: relative; background-image: url(../images/cms_login_bg.svg); height: 100%; color: rgb(192, 192, 192); font-size: 12px; background-repeat: no-repeat; background-size: cover; background-position: bottom left;}
.myLeftCtn{ position: relative; background: #fff; height: 100%; padding: 3rem;}
.myLeftCtn header{ color: #1B72F8; font-size: 3rem; font-weight: 700; margin-bottom: 20px;}
.myCard{ position: relative; background: #fff; height: 100%;}
.myRightCtn header{ color: #fff; font-size: 44px;}
.box{ position: relative; margin: 20px; margin-bottom: 100px;}
.myLeftCtn .myInput{ width: 100%; border-radius: 0.5rem; padding: 10px; padding-left: 10px; border: none; -webkit-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7);}
.myLeftCtn .myInput:focus{ outline: none;}
.myForm{ position: relative; margin-top: 50px;}
.myLeftCtn .butt{ background: linear-gradient(85.21deg, #0D67F9 0.61%, #4DCBF3 104.97%); color: #fff; width: 230px; border: none; padding: 10px; -webkit-box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7); box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7);}
.myLeftCtn .butt:hover{ background:  linear-gradient(0deg, #0D67F9 0.61%, #4DCBF3 89.97%);}
.myLeftCtn .butt:focus{ outline: none;}
.myLeftCtn .fas{ position: relative; color: #1B72F8;}
.butt_out{ background: transparent; color: #fff; width: 120px; border: 2px solid #fff; padding: 10px; -webkit-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7);}
.login_img_box{ padding: 3.21rem 3.21rem;}
a.forget_pass{ color: #0d67f9;}
a.forget_pass:hover{ color: #0E1A6A}
.butt_out:hover{ border: 2px solid #1CDCE6;}
.butt_out:focus{ outline: none;}

/* From Custom  */
.form_heading{ font-family: 'inveslo-medium'; font-size: 2.29rem; color: #434552;}
.input_effects{ width: 100%; height: 4.58rem; position: relative; background-color: #ffffff; z-index: 1;}
.input_effects, .icon_with_field{ box-shadow: 0px 3px 4px rgb(0 0 0 / 10%) !important;}
.input_effect{ width: 100%; height: 100%; border: 1px solid transparent; background-color: transparent; padding: 1.43rem 1.43rem 5px;}
.input_effect ~ label{ width: calc(100% - 5rem); position: absolute; left: 1.3rem; top: 50%; transform: translate(0%, -50%); font-family: 'inveslo-medium'; font-size: 1.2rem; color: rgba(45, 46, 67, 0.7); transition: 0.3s; z-index: -1; letter-spacing: 0.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0rem 0rem;}
.form_block .form-group, .form_block .icon_with_field .input_effects{ background: transparent; box-shadow: 0px 2px 4px transparent;}
.form_block .form-group{ margin-bottom: 25px;}

.form-control:focus, .custom-select:focus{ outline: none; -webkit-box-shadow: 0rem 0rem 0rem transparent; box-shadow: 0rem 0rem 0rem transparent; border-color: #00eda4;}

/* Input Effects */
.input_effects{ width: 100%; height: 4.57rem; position: relative; background-color: #ffffff; z-index: 1; font-size: 1.21rem;}
.input_effects.textarea{ height: 8rem;}
.input_effect{ width: 100%; height: 100%; border: 1px solid transparent; background-color: transparent; padding: 1.43rem 1.43rem 5px;}
textarea.input_effect{ resize: none; padding: 1.28rem 1.43rem;}
.input_effect:focus, .has-content{ border-color: #803EFF;}
.input_effect ~ .focus-border{ position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input_effect:focus ~ .focus-border,
.has-content.input_effect ~ .focus-border{ width: 100%; transition: 0.4s;}
.input_effect ~ label{ width: calc(100% - 5rem); position: absolute; left: 1.43rem; top: 50%; transform: translate(0%, -50%); font-family: 'inveslo-medium'; font-size: 1.2rem; color: rgba(45, 46, 67, 0.7); transition: 0.3s; z-index: -1; letter-spacing: 0.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0rem 0rem;}
.input_effect:focus ~ label, .has-content.input_effect ~ label{ top: 1.35rem; font-family: 'inveslo-medium'; font-size: 12px; color: #9E9EA0; transition: 0.3s;}
/* Input Effects */

textarea.input_effect ~ label{ top: 1.8rem;}

.form_block .form-group{ background: #FFFFFF; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px;}
.flag_icon,
.country_code{ width: 4.5rem; height: 4.58rem; position: relative; left: 0%; top: 0%; display: flex; align-items: center; justify-content: center; background-color: #ffffff;}
.flag_icon::after,
.country_code:after{ width: 1px; height: 2rem; background-color: #D3E4F8; position: absolute; top: 50%; right: 0%; transform: translate(0%, -50%); content: '';}
.custom-select{ height: 4.58rem; border: 1px solid transparent; border-radius: 0rem; background-image: url(../img/custom_select_dark.svg); background-size: 0.8rem; font-family: 'inveslo-medium'; font-size: 1.2rem; color: rgba(45, 46, 67, 0.7); padding: 1.07rem 1.43rem;}
.icon_with_field .custom-select:focus,
.icon_with_field .input_effect:focus{ border-color: transparent;}
.right_icon,
.password_icon{ width: 3.5rem; height: 100%; cursor: pointer; position: absolute; top: 0%; right: 0rem; display: flex; align-items: center; justify-content: center;}
.password_icon i,
.password_icon span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.43rem; color: #1B1C29; line-height: 0; transition: all 0.5s ease-out;}
.password_icon.eye_visible i{ color: #1B1C29;}

.password_icon .bi-eye-fill,
.password_icon.eye_visible .bi-eye-slash-fill,
.password_icon .eyes_on,
.password_icon.eye_visible .eyes_off{ opacity: 0; visibility: hidden;}
.password_icon.eye_visible .bi-eye-fill,
.password_icon.eye_visible .eyes_on{ opacity: 1; visibility: visible;}
.right_icon_view .input_effect{ padding-right: 4rem;}

button:focus, input:focus, textarea:focus, select:focus { outline: none;}
.form_block .form-group { margin-bottom: 25px;}

.btn{ position: relative; overflow: hidden; background: linear-gradient(87.02deg, #501FF3 1%, #803EFF 100%); border-radius: 0px; box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15); font-family: 'inveslo-medium'; font-size: 1.28rem; color: #ffffff; border: 0px; cursor: pointer; -webkit-transform: rotate(0); transform: rotate(0); display: inline-flex; align-items: center; justify-content: center; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; padding: 1.07rem 2rem !important; min-width: 100%;}
.btn:hover .left_right_anim,
.banner_bottom_tab_sec li:hover .banner_bottom_tab_arrow{ transition: all 0.5s ease-out; position: relative; animation: imgmove 1.5s infinite;}
@keyframes imgmove{
    0%{ left: 0px; opacity: 1;}    
    100%{ left: 15px; opacity: 0;}
}
.top_bottom_anim{ transition: all 0.5s ease-out; position: relative; animation: top_bottom 1.5s infinite;}
@keyframes top_bottom{
    0%{ top: -15px; opacity: 1;}    
    100%{ top: 20px; opacity: 0;}
}

.btn::before{ width: 100%; height: 100%; background-color: #ed1c58; position: absolute; top: 0%; left: 0%; transform: translateY(-110%); transition: all 0.5s ease-out; content: ''; z-index: -1;}
.btn:hover::before{ transform: translateY(0%);}
.btn:hover{ color: #ffffff !important;}

.login_signup_btns .bi{font-size: 2.5rem;}

.checkbox label input:checked + .check, 
.checkbox label input:checked + div + .check{ background-color: #ffffff; display: none;}
.checkbox label{ display: flex; align-items: center; font-weight: 400; color: #062652; margin: 0rem 0rem; display: none;}
.checkbox label input{ width: 100%; height: 100%; position: absolute; top: 0%; right: 0%; opacity: 0; z-index: 2; display: none;}
.checkbox .check{ width: 1.43rem; height: 1.43rem; position: relative; display: inline-flex; border: 0; border-radius: 3px; background-color: #ffffff; box-shadow: 0px 2px 4px rgb(0 0 0 / 10%); display: none;}
.checkbox label input:checked + .check::before{ width: .43rem; height: .71rem; position: absolute; left: .5rem; top: .2rem; border: solid #ed1c58; border-width: 0px 2px 2px 0px; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; display: none;}
.remember_metext{ font-style: normal; font-weight: normal; font-size: 1.07rem; line-height: 1.5; color: #062652; display: none;}
.forget_pass a,
.already_account_text,
.already_account_text a{ font-family: 'inveslo-regular'; font-size: 1.07rem; color: #062652; line-height: 1.5; display: none;}
.already_account_text a{ font-family: 'inveslo-bold'; display: none;}

.error-field, .help-block{ color: red; font-size: 12px; position: relative; display: block;}
/* Error Validation in Field */
.error-field{color: red}
.help-block{color: red}
#password-error,
#email-error{ color: red; font-size: 12px; position: relative; display: block;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}