@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url("https://fonts.googleapis.com/css?family=Inter:var(--heading-h2-font-weight),var(--action-a1-font-weight),var(--action-a2-font-weight),500,var(--body-p2-font-weight),var(--heading-h1-font-weight),var(--body-p3-font-weight)");
:root { --backgroundcolored: rgba(247, 246, 251, 1); --brandprimary: rgba(56, 89, 255, 1); --brandlight: rgba(232, 235, 255, 1); --neutralwhite: rgba(255, 255, 255, 1); --neutralstroke: rgba(233, 233, 233, 1); --neutralsuccess: rgba(2, 165, 59, 1); --neutralorange: rgba(242, 83, 0, 1); --neutralyellow: rgba(254, 187, 12, 1); --neutralred: rgba(250, 25, 29, 1); --neutrallight-blue: rgba(56, 159, 253, 1); --darkblack: rgba(0, 25, 49, 1); --darkgray-dark: rgba(52, 72, 90, 1); --darkgray-light: rgba(214, 215, 220, 1); --darkgray-regular: rgba(152, 158, 163, 1); --white: rgba(255, 255, 255, 1); --heading-h1-font-family: "Inter", Helvetica; --heading-h1-font-weight: 600; --heading-h1-font-size: 40px; --heading-h1-letter-spacing: 0px; --heading-h1-line-height: 48px; --heading-h1-font-style: normal; --heading-h2-font-family: "Inter", Helvetica; --heading-h2-font-weight: 600; --heading-h2-font-size: 32px; --heading-h2-letter-spacing: -0.64px; --heading-h2-line-height: 40px; --heading-h2-font-style: normal; --heading-h3-font-family: "Inter", Helvetica; --heading-h3-font-weight: 600; --heading-h3-font-size: 24px; --heading-h3-letter-spacing: -0.48px; --heading-h3-line-height: 30px; --heading-h3-font-style: normal; --heading-h4-font-family: "Inter", Helvetica; --heading-h4-font-weight: 600; --heading-h4-font-size: 20px; --heading-h4-letter-spacing: -0.4px; --heading-h4-line-height: 26px; --heading-h4-font-style: normal; --body-p1-font-family: "Inter", Helvetica; --body-p1-font-weight: 400; --body-p1-font-size: 20px; --body-p1-letter-spacing: 0px; --body-p1-line-height: 30px; --body-p1-font-style: normal; --body-p2-font-family: "Inter", Helvetica; --body-p2-font-weight: 400; --body-p2-font-size: 18px; --body-p2-letter-spacing: 0px; --body-p2-line-height: 26px; --body-p2-font-style: normal; --body-p3-font-family: "Inter", Helvetica; --body-p3-font-weight: 400; --body-p3-font-size: 16px; --body-p3-letter-spacing: 0px; --body-p3-line-height: 22px; --body-p3-font-style: normal; --body-p4-font-family: "Inter", Helvetica; --body-p4-font-weight: 400; --body-p4-font-size: 14px; --body-p4-letter-spacing: 0px; --body-p4-line-height: 18px; --body-p4-font-style: normal; --action-a1-font-family: "Inter", Helvetica; --action-a1-font-weight: 500; --action-a1-font-size: 16px; --action-a1-letter-spacing: 0px; --action-a1-line-height: 22px; --action-a1-font-style: normal; --action-a2-font-family: "Inter", Helvetica; --action-a2-font-weight: 500; --action-a2-font-size: 18px; --action-a2-letter-spacing: 0px; --action-a2-line-height: 26px; --action-a2-font-style: normal; --shadow-light: 0px 1px 1px 0px rgba(0, 0, 0, 0.08); --shadows-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); --shadows-shadow-lg: 0px 2px 2px -1px rgba(10, 13, 18, 0.04), 0px 4px 6px -2px rgba( 10, 13, 18, 0.03 ), 0px 12px 16px -4px rgba(10, 13, 18, 0.08); --2-spacing-spacing-md: 8px; --2-spacing-spacing-sm: 6px; }


#cover_all { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; padding-top: 18%; }
.fa-spin { -webkit-animation: fa-spin 2s linear infinite; animation: fa-spin 2s linear infinite; }
i.cover_all_in { top: calc(50% - 35px); left: calc(50% - 35px); position: absolute; font-size: 50px; }
.fa-sync::before { font-weight: 400 !important; color: lightgray !important }
body { margin: 0; padding: 0; background-color: #f7f6fb }
* { box-sizing: border-box; }
a { text-decoration: none; color: #3D69D3 }
input { outline: none !important; }
.hidden { display: none !important }
.top_bar { height: 78px; width: 100%; border-bottom: 1px solid lightgray; display: flex; align-items: center; padding-right: 60px; padding-left: 30px; background-color: white }
.bottom_bar { height: 100px; width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; }
.bottom_bar_companies_wrapper { width: 100%; display: flex; justify-content: center; align-items: center }
.company_logo { height: 51px; background-repeat: no-repeat; background-size: contain; background-position-y: center; margin-left: 80px; }
.company_logo.komatsu { background-image: url("../my_images/registration/Komatsu_company_logos.png"); width: 245px; }
.company_logo.ventia { background-image: url("../my_images/registration/Ventia_logo_BW.png"); width: 160px; }
.company_logo.wattwatchers { background-image: url("../my_images/registration/wattwatchers_logo.png"); width: 269px; }
.company_logo.viva { background-image: url("../my_images/registration/Viva_Energy_logo_BW.png"); width: 100px; }
.company_logo.vodafone { background-image: url("../my_images/registration/Vodafone_logo_2017_BW.png"); width: 189px; }
.bottom_bar_title { font-family: var(--heading-h2-font-family); font-weight: var(--heading-h2-font-weight); color: var(--darkgray-dark); font-size: var(--heading-h2-font-size); text-align: center; letter-spacing: var(--heading-h2-letter-spacing); line-height: var(--heading-h2-line-height); font-style: var(--heading-h2-font-style);; margin-bottom: 19px; }
.whole_page { position: relative; padding: 50px 0; display: flex; }
.whole_page.table_templates_page { height: unset }
.whole_page.reg2 { height: 100vh }
.whole_page .left_side { padding-right: 42px; width: 50%; height: 50%;padding-top:5%; display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: end; }
.whole_page .left_side .feature_wrapper { margin-bottom: 26px; height: 30px; display: flex; align-items: center }
.whole_page .left_side .feature_text { font: normal normal normal 24px Open Sans; letter-spacing: -0.2px; color: #34373A; opacity: 1; font-weight: 500 }
.whole_page .left_side .v_sign_img { height: 23px; width: 23px; margin-right: 15px; background-image: url("../my_images/registration/check-2.svg?x=1"); background-repeat: no-repeat; background-size: cover; margin-top: 3px; } }
.whole_page .left_side .i1 { position: absolute; height: auto; right: 0; left: 0; margin: auto; top: 33%; width: 40%; }
.whole_page .left_side .i2 { height: 100vh; display: flex }
.whole_page .left_side .big_text { width: 560px; margin-bottom: 40px; font-family: var(--heading-h1-font-family); font-weight: var(--heading-h1-font-weight); font-size: var(--heading-h1-font-size); letter-spacing: var(--heading-h1-letter-spacing); line-height: 46px; font-style: var(--heading-h1-font-style); }
.whole_page .left_side .big_text span { color: rgb(56, 89, 255); }
.whole_page .left_side .featurs_wrapper { width: 560px; }

.whole_page .right_side { padding-left: 50px; /*flex: 1 1 auto;*/ display: flex;flex-direction:column }
.whole_page .side_margins { width: 600px; margin: auto; padding: 32px; background-color: var(--neutralwhite); border-radius: 8px; border-top-width: 5px; border-top-style: solid; border-color: var(--brandprimary); box-shadow: 0px 2px 8px #00000014; }
.whole_page .side_margins.side_margins_login_page { margin:auto;position:relative}
.whole_page .main_title { font: normal normal bold 23px/41px Open Sans; letter-spacing: -0.28px; color: #3D69D3; opacity: 1; text-align: center; }
.whole_page .sub_title { font: normal normal normal 16px/41px Open Sans; letter-spacing: -0.19px; color: #34373A; opacity: 1; text-align: center; }
.user-login-info { /*height: 270px;*/ }
.user-login-info label { padding-bottom: 5px; display: block; font-family: var(--action-a2-font-family); font-weight: var(--action-a2-font-weight); color: var(--darkblack); font-size: 16px; letter-spacing: var(--action-a2-letter-spacing); line-height: var(--action-a2-line-height); font-style: var(--action-a2-font-style); }
.user-login-info .fn_names { display: flex; gap: 15px }
.user-login-info .fn_names > div { flex: 1 }
.external_login_options { /*height: 100px; background-color: lightcyan*/ /*margin-top: 25px;*/ }
#or_devider { height: 1px; background-color: #DEE0E4; position: relative; margin-top: 37px; margin-bottom: 10px; }
#or_devider span { position: absolute; top: -11px; left: 49%; background-color: white; padding-left: 5px; padding-right: 5px; font-size: 16px; letter-spacing: -0.19px; color: #34373A; opacity: 1; font-family: Open Sans; }
input.form-control { width: 100%; font-style: var(--body-p3-font-style); padding: 16px; border-width: 2px; border-style: solid; border-image: initial; border-color: var(--neutralstroke); border-radius: 8px; margin-bottom: 12px; font-size: 15px; padding-top:14px;padding-bottom:14px;}
input.form-control:focus, input.form-control:focus-visible { border-color: black }

.rm_fp { display: flex; justify-content:space-between }
#remember_me_wrapper { display: flex; align-items: center; cursor: pointer; margin-bottom: 10px; margin-top: 5px; }

#agreement_wrapper { display: flex; align-items: center; cursor: pointer }
#agreement_text { color: #34373A; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; }
#agreement_wrapper .agreement_checkbox, #remember_me_wrapper .remember_me_checkbox { background: url("../my_images/cb_unselected.svg") no-repeat; height: 16px; width: 16px; margin-right: 10px; }
#agreement_wrapper.selected .agreement_checkbox, #remember_me_wrapper.selected .remember_me_checkbox { background: url("../my_images/cb_selected.svg") no-repeat; }
.main_btn { margin-top: 10px; width: 100%; height: 40px; /* UI Properties */ background: #3D69D3 0% 0% no-repeat padding-box; border: 1px solid #3D69D3; border-radius: 4px; color: white; margin-bottom: 15px; cursor: pointer; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--neutralwhite); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); font-style: var(--action-a1-font-style); }
.white_text, .start_free { letter-spacing: -0.16px; color: #34373A; text-align: center; font: normal normal normal 12.5px Open Sans; opacity: 1; font-size: 17px; }
.start_free { width: 600px; margin: auto; margin-bottom: auto; display: flex; justify-content: center; margin-bottom: 27px; }
#myModalWrong { display: none; }
.ui-dialog { border: none; box-shadow: 0px 3px 10px #0000003B; }
.modal-title { font: normal normal bold 23px/41px Open Sans; letter-spacing: -0.28px; color: #3D69D3; text-align: center }
/*.ui-dialog .ui-dialog-content { margin-top: -20px; }*/
.ui-draggable .ui-dialog-titlebar { background-color: white }
.ui-widget input.main_btn { font-size: 13px; font-family: Open Sans; text-align: center }
.modal-body { line-height: 24px; margin-bottom: 30px; }
.ui-widget { font-family: Open Sans; }
.ui-button { border: none }
.ui-button:hover { background: white; border: none; }
.ui-widget.ui-widget-content { border: 1px solid #3D69D3; border-radius: 6px; }
.q_page .ui-widget.ui-widget-content { border: 0 none; background-color: transparent; box-shadow: none; }
.ui-dialog-titlebar { display: none }
.ui-widget-header { border: none; border-bottom: 1px solid #DEE0E4; color: #333333; font-weight: bold; background: #FAFAFA }
.reg3_content { display: flex; align-items: center; }
.reg2_content { /* text-align: center; width: 415px; margin-top: -200px;*/ }
.reg2_content.forgot2 { display: flex; flex-direction: column; align-items: center; }
.reg2_main_title { text-align: center; font: normal normal bold 23px/41px Open Sans; letter-spacing: -0.28px; color: #3D69D3; width:100%}
.reg2_sub_title { text-align: center; font: normal normal normal 16px/41px Open Sans; letter-spacing: -0.19px; color: #34373A; }
#go_to_login_button { width: 100%; height: 32px; background: #3D69D3 0% 0% no-repeat padding-box; border-radius: 4px; opacity: 1; text-align: center; font: normal normal normal 13px/18px Open Sans; letter-spacing: 0px; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 25px; }
.user-login-info.login_screen { margin-top: 40px; }
#forget_password_wrapper { font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; color: #34373A }
#dont_have_account_wrapper { font: normal normal normal 16px/41px Open Sans; letter-spacing: -0.19px; color: #34373A;  }

#forget_password_wrapper a:hover, #dont_have_account_wrapper a:hover { text-decoration: underline }
/*external logins*/
.external_logins { display: flex;flex-direction:column; gap: 16px; align-items:center}
.external_logins iframe { margin: auto !important }
.external_logins .g_id_signin { }

.external_logins .ms_and_github { cursor: pointer; width: 70%; display: flex; align-items: center; justify-content: center; position: relative; border-width: 1px; border-style: solid; border-image: initial; border-color: var(--brandprimary); border-radius: 8px; padding: 11px 24px; }
.external_logins .ms_and_github a { text-decoration: none; display: flex; justify-content: center; align-items: center; }

.external_logins .ms_and_github .login_option_name { width: fit-content; margin-top: -2px; font-weight: var(--action-a2-font-weight); color: var(--darkblack); font-size: 15px; line-height: var(--action-a2-line-height); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; position: relative; font-family: var(--action-a2-font-family); letter-spacing: var(--action-a2-letter-spacing); font-style: var(--action-a2-font-style); white-space: nowrap; overflow: hidden; }
.external_logins .ms_and_github:hover { background-color: #f9f9f9 }

/*.external_logins .ms_and_github.ms { border-width: 1px; border-style: solid; border-image: initial; border-color: var(--brandprimary); border-radius: 8px; padding: 16px 24px;  }*/

.external_logins .ms_and_github .tt { display: none; position: absolute; top: -30px; color: white; background-color: black; padding: 6px 11px; border-radius: 3px; left: 50%; transform: translateX(-50%); }
.external_logins .ms_and_github .tt .tip { position: absolute; background-image: url("/my_images/registration/tooltip_tip.svg"); width: 16px; height: 8.51px; bottom: -8.51px; left: 50%; transform: translateX(-50%); }
.external_logins .ms_and_github:hover .tt { display: block }

.extra_fields { display:none}

.external_logins_or { text-align: center; font-weight: bold; padding-top: 20px; }

.login_btn { color: #34373A; opacity: 1; float: right; padding: 9px 18px; border-radius: 6px; border-width: 1px; border-style: solid; border-image: initial; border-color: var(--neutralstroke); font-family: "Inter", Helvetica; }
.login_btn:hover { background-color: #f7f6fb }
.rayven_logo_wrapper, .login_btn_wrapper { width: 50% }
.rayven_logo_wrapper { display: flex; align-items: center; background-image: url("../my_images/black_logo_new.png"); height: 55px; background-size: contain; background-repeat: no-repeat; }
.question_title { text-align: center; font: normal normal bold 23px/41px Open Sans; letter-spacing: -0.28px; color: #3D69D3; }
.question_sub_title, .application_sub_title, .templates_sub_title { text-align: center; font: normal normal normal 16px/41px Open Sans; letter-spacing: -0.19px; color: #34373A; margin-bottom: 30px; }
.templates_sub_title { margin-bottom: 20px; }
.content_wrapper { width: 819px; margin: auto }
.connectors_content_wrapper.content_wrapper { width: 732px; margin: auto }
.table_templates_content_wrapper { width: unset; margin-left: auto; margin-right: auto }

.select_connector_wrapper { display: flex; justify-content: center; flex-direction: column; position: relative }
.application_types_wrapper { width: 819px; display: flex; height: 100%; flex-wrap: wrap; row-gap: 15px; justify-content: center; }
.application_type { cursor: pointer; margin-right: 15px; height: 40px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #B5B5B5; border-radius: 20px; text-align: center; font: normal normal normal 14px/19px Open Sans; letter-spacing: 0px; color: #34373A; padding-top: 10px; padding-bottom: 10px; padding-right: 25px; padding-left: 25px; }
.next_btn { width: 378px; height: 40px; background: #3D69D3 0% 0% no-repeat padding-box; border: 1px solid #3D69D3; border-radius: 4px; text-align: center; font: normal normal 600 13px/25px Open Sans; letter-spacing: 0px; color: #FFFFFF; display: flex; vertical-align: middle; justify-content: center; align-items: center; cursor: pointer }
.not_active_next_btn { background-color: #B5B5B5; border-color: #B5B5B5; cursor: text }
.skip_it { text-align: center; text-decoration: underline; font: normal normal normal 13px Open Sans; letter-spacing: -0.16px; color: #34373A; cursor: pointer }
.application_type.selected_type { border: 1px solid #3D69D3; }
.custom_application_wrapper, .create_application_wrapper { margin-top: 15px; display: flex; justify-content: center; flex-direction: column; align-items: center; }
.connector_types_wrapper { width: 732px; height: 240px; border: 1px solid #B5B5B5; border-radius: 4px; padding: 15px; display: flex; flex-wrap: wrap; }
.connector_name_search { margin-bottom: 15px; width: 732px; height: 40px; border: 1px solid #B5B5B5; border-radius: 4px; font: normal normal normal 13px/25px Open Sans; letter-spacing: 0px; color: #34373A; text-indent: 16px; margin-top: 15px; }
.connector_type_icon_wrapper { height: 67px; width: 67px; border: 0.5px solid #B5B5B56E; border-radius: 4px; background-position: center; background-repeat: no-repeat; background-size: 45px 45px; }
.custom_application, .application_name { width: 378px; height: 40px; border: 1px solid #B5B5B5; border-radius: 4px; font: normal normal normal 13px/25px Open Sans; letter-spacing: 0px; color: #34373A; text-indent: 16px; }
.connector { display: flex; flex-direction: column; align-items: center; width: 67px; margin-right: 20px; cursor: pointer; height: 93px; }
.connector_name { width: 60px; justify-content: center; font: normal normal normal 12px/25px Open Sans; letter-spacing: 0px; color: #34373ACF; white-space: nowrap; text-overflow: ellipsis; text-align: center; overflow: hidden }
.selected_connector .connector_type_icon_wrapper { border: 1px solid #3D69D3 }
.selected_connectors { width: 732px; display: flex }
.selected_connector_bottom { border: 1px solid #B5B5B56E; border-radius: 20px; height: 40px; padding: 15px; display: flex; justify-content: center; align-items: center; width: fit-content; margin-right: 15px; margin-top: 15px; }
.selected_connecotr_bottom_name { margin-right: 15px; font: normal normal normal 14px/19px Open Sans; letter-spacing: 0px; color: #3D69D3; }
.selected_connecotr_bottom_deselect { width: 10px; height: 10px; background-image: url('../my_images/c.png'); background-size: contain; margin-top: 1px; cursor: pointer }
.application_sub_title { margin-bottom: 5px; }
#mag_glass { position: absolute; right: 16px; color: gray; top: 26px; cursor: pointer; }
.loader,
.loader:after { border-radius: 50%; width: 45px; height: 45px; }
.loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(112,112,112, 0.2); border-right: 1.1em solid rgba(112,112,112, 0.2); border-bottom: 1.1em solid rgba(112,112,112, 0.2); border-left: 1.1em solid #707070; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; z-index: 10 }
.radio_button_grp_ctl { display: inline-block; padding-top: 10px; }
.radio_button_grp_ctl .form_radio_button { display: inline-block; position: relative; }
.radio_button_grp_ctl .form_radio_button .label { vertical-align: top; padding-left: 25px; }
.radio_button_grp_ctl .form_radio_button .label:before { position: absolute; content: " "; display: inline-block; width: 22px; height: 22px; background-image: url("../my_images/cb_unselect.svg"); left: 0px; cursor: pointer }
.radio_button_grp_ctl .form_radio_button.cb_select .label:before { background-color: var(--c0); -webkit-mask-image: url("../my_images/cb_select.svg"); }
.radio_button_grp_ctl .form_radio_button { display: inline-block; position: relative; font: normal normal normal 13px/23px Open Sans; }
#tabs_wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.table_templates_wrapper { width: 1340px; display: flex; flex-wrap: wrap }
.temp_tab { height: 22px; font: normal normal normal 16px Open Sans; letter-spacing: -0.19px; padding-bottom: 28px; cursor: pointer; opacity: 0.6; }
.temp_tab:first-child { margin-right: 20px; }
.temp_tab.temp_tab_selected { border-bottom: 2px solid #3D69D3; opacity: 1 }
.table_template { width: 320px; height: 170px; border: 1px solid #DEE0E4; border-radius: 10px; margin-right: 15px; margin-bottom: 15px; padding: 15px; padding-right: 13px; position: relative }
.table_template_title { font: normal normal bold 16px/22px Lato; letter-spacing: 0.16px; color: #333333E6; margin-bottom2px; }
.table_template_description { font: normal normal normal 14px/22px Lato; letter-spacing: 0.14px; color: #333333E6; }
.table_template_select_button { cursor: pointer; position: absolute; bottom: 15px; width: 290px; height: 40px; border-radius: 20px; font: normal normal 600 14px Open Sans; border: 0.800000011920929px solid #2455CB80; color: #3D69D3; display: flex; justify-content: center; align-items: center; }
.table_template_select_button:hover { background-color: #3D69D3; color: white; }
.create_your_own_template_wrapper { display: flex; flex-direction: column; align-items: center }
#custom_template_name { width: 732px; height: 40px; border: 1px solid #B5B5B5; border-radius: 4px; margin-bottom: 15px; text-indent: 16px; font: normal normal normal 13px Open Sans; }
#custom_template_description { outline: none !important; width: 732px; border: 1px solid #B5B5B5; border-radius: 4px; text-indent: 16px; padding-top: 11px; font: normal normal normal 13px Open Sans; }
#custom_template_description::placeholder, #custom_template_description::placeholder { font: normal normal normal 13px Open Sans; }
#create_table_button { cursor: pointer; width: 378px; height: 40px; background: #3D69D3 0% 0% no-repeat padding-box; border: 1px solid #3D69D3; border-radius: 4px; font: normal normal 600 13px Open Sans; letter-spacing: 0px; color: #FFFFFF; margin-top: 20px; display: flex; justify-content: center; align-items: center; }

.login_page_wrapper {display:flex;flex-direction:column;height:100vh }
.login_page_wrapper .whole_page { flex:1;padding:0 0 50px 0 }

.q_page_wrapper {display:flex;flex-direction:column;height:100vh }
.q_page_wrapper .whole_page { flex:1;padding:0 0 50px 0 }
.q_page_wrapper .q_box {  margin: auto }
.q_page_wrapper .tell_us { margin-bottom: 55px; font-family: var(--heading-h3-font-family); font-weight: var(--heading-h3-font-weight); color: var(--darkblack); font-size: var(--heading-h3-font-size); letter-spacing: var(--heading-h3-letter-spacing); line-height: var(--heading-h3-line-height); font-style: var(--heading-h3-font-style); }
.q_page_wrapper .tell_us_div { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page_wrapper .i-work-at { position: relative; width: fit-content; margin-top: -1.00px; margin-bottom: 0px; font-family: "Inter", Helvetica; font-weight: 400; color: transparent; font-size: 48px; letter-spacing: 0; line-height: 48px; white-space: nowrap; }
.q_page_wrapper .tell_us_div .span { font-weight: 500; color: #001931; letter-spacing: -2px; }
.q_page_wrapper .tell_us_div .text-wrapper-2 { font-weight: 700; color: #989fac; background-color: transparent; border: 0 none; font-size: 48px; font-family: "Inter", Helvetica; }
.q_page_wrapper .tell_us_div .text-wrapper-2:hover{text-decoration:underline}
.q_page_wrapper .tell_us_div .text-wrapper-2:focus { color: var(--brandprimary) }

.q_page_wrapper .frame-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; width: 100%; margin-top: 50px }
.q_page_wrapper .frame-2 .text-wrapper-4 { position: relative; align-self: stretch; margin-top: -1.00px; margin-bottom:2px; font-family: "Inter", Helvetica; font-weight: 500; color: var(--darkblack); font-size: 24px; letter-spacing: -0.48px; line-height: 30px; }
.q_page_wrapper .frame-2 .input-with-label { display: flex; flex-direction: column; width: 800px; height: 200px; align-items: flex-start; gap: var(--2-spacing-spacing-sm); position: relative; }
.q_page_wrapper .frame-2 textarea { border-radius: 8px; border: 1px solid #fff; padding: 10px; position: relative; flex: 1; align-self: stretch; margin-top: -1.00px; font-family: var(--body-p2-font-family); font-weight: var(--body-p2-font-weight); color: var(--darkgray-dark); font-size: var(--body-p2-font-size); letter-spacing: var(--body-p2-letter-spacing); line-height: var(--body-p2-line-height); font-style: var(--body-p2-font-style); }
.q_page_wrapper .frame-2 .input {width:1000px; display: flex; padding: 40px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px;border-radius:16px;height:unset }
.q_page_wrapper .frame-2 .q_title_wrapper {width:100% }
.q_page_wrapper .frame-2 .size_option, .q_page_wrapper .frame-2 .role_option { cursor: pointer; display: flex; width: 120px; padding: 12px 16px; justify-content: center; align-items: center; gap: 12px; border-radius: 6px; border: 1px solid var(--Dark-Gray-Light, #D6D7DC); color: var(--Dark-Gray-Semi-Light, #627382); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 22px; }
.q_page_wrapper .frame-2 .size_option:hover, .q_page_wrapper .frame-2 .role_option:hover { border-color: var(--brandprimary) }
.q_page_wrapper .frame-3 { display: inline-flex; align-items: center; gap: 16px; position: relative; margin-top: 50px; }
.q_page_wrapper .frame-3 .navigation-item { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; flex: 0 0 auto; background-color: var(--neutralwhite); border-radius: 6px; border: 1px solid; border-color: var(--neutralstroke); cursor:pointer}
.q_page_wrapper .frame-3 .navigation-item:hover { background-color: #f7f6fb; }
.q_page_wrapper .frame-3 .content { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
.q_page_wrapper .frame-3 .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--brandprimary); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style); }
.q_page_wrapper .frame-3 .content-wrapper { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; flex: 0 0 auto; background-color: var(--brandprimary); border-radius: 6px; cursor:pointer}
.q_page_wrapper .frame-3 .text-wrapper-6 { position: relative; margin-top: 60px; width: fit-content; margin-top: -1.00px; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--neutralwhite); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style); }
.q_page_wrapper .section_wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page_wrapper .section_options_wrapper { flex-wrap: wrap; display: inline-flex; align-items: flex-start; gap: 16px; position: relative; flex: 0 0 auto; }
.q_page_wrapper .section_option { display: flex; width: 120px; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; position: relative; border-radius: 6px; border: 1px solid; border-color: var(--darkgray-light); font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: rgba(98, 115, 130, 1); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style); }
.q_page_wrapper .section_option.role { width:unset}
.q_page_wrapper .section_option.chosen { border-color: var(--brandprimary); background-color: #f7f6fb; }
.q_page_wrapper .section_option:hover { cursor: pointer; background-color: #f7f6fb; }
.q_page_wrapper .section_title { display: flex; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page_wrapper .login_btn_wrapper { display:none}

.hidden-span { visibility: hidden; white-space: pre; }

.app_making { display: flex; padding: 80px; justify-content: center; align-items: center; gap: 60px; align-self: stretch; border-radius: 0px 0px 12px 12px; background: var(--Neutral-White, #FFF); /* Shadow Light */ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08); }
.app_making_bar { display: flex; padding: 24px 32px; justify-content: center; align-items: center; gap: 40px; align-self: stretch; border-radius: 12px 12px 0px 0px; background: var(--Dark-Black, #001931); }
.app_making_bar .aa { flex: 1 0 0; color: var(--Neutral-White, #FFF); /* Heading/H3 */ font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600; line-height: 30px; /* 125% */ letter-spacing: -0.48px; }
.q_page .ui-widget-overlay { opacity: 0.3; background-color: black; }
/*.app_making .aa { display: flex; flex-direction: column; align-items: center; gap: 32px; flex: 1 0 0; align-self: stretch; color: var(--Dark-Black, #001931); text-align: center; font-family: Inter; font-size: 32px; font-style: normal; font-weight: 500; line-height: 40px;*/ /* 125% */ /*letter-spacing: -0.64px; }
.app_making .bb { display: flex;  justify-content: center; align-items: center; gap: 60px; align-self: stretch; border-radius: 0px 0px 12px 12px; background: var(--Neutral-White, #FFF);*/ /* Shadow Light */ /*box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08); }
.app_making .cc { display: flex; width: 388px; flex-direction: column; align-items: flex-start; gap: 32px; }
.app_making .cc .stage_working { display: flex; }
.app_making .cc .stage_working .stage_check { width: 10.667px; height: 10.667px; flex-shrink: 0; fill: var(--Neutral-Success, #02A53B); }
.app_making .cc .stage_working .stage_icon { width: 60px; height: 60px; flex-shrink: 0; fill: var(--Background-Colored, #F7F6FB); width: 60px; height: 60px; flex-shrink: 0; fill: var(--Background-Colored, #F7F6FB); }
.app_making .cc .stage_working .stage_text { width: 276px; color: var(--Dark-Gray-Dark, #34485A);*/ /* Heading/H3 */ /*font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600; line-height: 30px;*/ /* 125% */ /*letter-spacing: -0.48px; }*/

.q_page .overlap-group { position: relative; height: 1080px; background-image: url(./img/background.svg); background-size: 100% 100%; }
.q_page .top-navigation { display: flex; width: 1920px; height: 78px; align-items: center; justify-content: space-between; padding: 16px 32px; position: absolute; top: 0; left: 0; background-color: var(--white); border-bottom-width: 1px; border-bottom-style: solid; border-color: var(--neutralstroke); }
.q_page .image { position: relative; width: 189.77px; height: 50px; margin-top: -2.00px; margin-bottom: -2.00px; }
.q_page .sign-in { display: inline-flex; align-items: flex-start; gap: 10px; padding: 9px 18px; position: relative; flex: 0 0 auto; border-radius: 6px; border: 1px solid; border-color: var(--neutralstroke); }
.q_page .text-wrapper { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--darkblack); font-size: var(--action-a1-font-size); text-align: right; letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style);  }
.q_page .frame { display: flex; flex-direction: column; width: 1290px; align-items: flex-start; gap: 60px; position: absolute; top: 193px; left: 315px; }
.q_page .tell-us-a-bit-about { position: relative; align-self: stretch; margin-top: -1.00px; font-family: var(--heading-h3-font-family); font-weight: var(--heading-h3-font-weight); color: var(--darkblack); font-size: var(--heading-h3-font-size); letter-spacing: var(--heading-h3-letter-spacing); line-height: var(--heading-h3-line-height); font-style: var(--heading-h3-font-style); }
.q_page .div { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page .i-work-at { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Inter", Helvetica; font-weight: 400; color: transparent; font-size: 48px; letter-spacing: 0; line-height: 48px; white-space: nowrap; }
.q_page .span { font-weight: 500; color: #001931; }
.q_page .text-wrapper-2 { font-weight: 700; color: #989fac; }
.q_page .p { position: relative; align-self: stretch; font-family: "Inter", Helvetica; font-weight: 400; color: transparent; font-size: 48px; letter-spacing: 0; line-height: 48px; }
.q_page .text-wrapper-3 { font-weight: 800; color: #989fac; }
.q_page .frame-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page .text-wrapper-4 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Inter", Helvetica; font-weight: 500; color: var(--darkblack); font-size: 24px; letter-spacing: -0.48px; line-height: 30px; }
.q_page .input-with-label { display: flex; flex-direction: column; width: 800px; height: 200px; align-items: flex-start; gap: var(--2-spacing-spacing-sm); position: relative; }
.q_page .input { width: 1020px; margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; padding: 40px; position: relative; flex: 0 0 auto; background-color: var(--neutralwhite); border-radius: 16px; overflow: hidden; }
.q_page .text { position: relative; flex: 1; align-self: stretch; margin-top: -1.00px; font-family: var(--body-p2-font-family); font-weight: var(--body-p2-font-weight); color: var(--darkgray-dark); font-size: var(--body-p2-font-size); letter-spacing: var(--body-p2-letter-spacing); line-height: var(--body-p2-line-height); font-style: var(--body-p2-font-style); }
.q_page .rectangle { position: relative; width: 2px; height: 52px; }
.q_page .resize-handle { position: absolute; width: 12px; height: 12px; top: 182px; left: 782px; }
.q_page .frame-3 { display: inline-flex; align-items: center; gap: 16px; position: relative; flex: 0 0 auto; }
.q_page .navigation-item { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; flex: 0 0 auto; background-color: var(--neutralwhite); border-radius: 6px; border: 1px solid; border-color: var(--neutralstroke); }
.q_page .content { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
.q_page .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--brandprimary); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style); }
.q_page .content-wrapper { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; flex: 0 0 auto; background-color: var(--brandprimary); border-radius: 6px; }
.q_page .text-wrapper-6 { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--action-a1-font-family); font-weight: var(--action-a1-font-weight); color: var(--neutralwhite); font-size: var(--action-a1-font-size); letter-spacing: var(--action-a1-letter-spacing); line-height: var(--action-a1-line-height); white-space: nowrap; font-style: var(--action-a1-font-style); }
.q_page .rectangle-2 { position: absolute; width: 1920px; height: 1080px; top: 0; left: 0; background-color: var(--darkblack); opacity: 0.6; }
.q_page .frame-4 { display: flex; flex-direction: column; width: 1200px; align-items: flex-start; position: absolute; top: 252px; left: 360px; }
.q_page .frame-5 { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 24px 32px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: var(--darkblack); border-radius: 12px 12px 0px 0px; }
.q_page .text-wrapper-7 { position: relative; flex: 1; font-family: var(--heading-h3-font-family); font-weight: var(--heading-h3-font-weight); color: var(--neutralwhite); font-size: var(--heading-h3-font-size); letter-spacing: var(--heading-h3-letter-spacing); line-height: var(--heading-h3-line-height); font-style: var(--heading-h3-font-style); }
.q_page .x-close { position: relative; width: 32px; height: 32px; }
.q_page .frame-6 { display: flex; align-items: center; justify-content: center; gap: 60px; padding: 80px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: var(--neutralwhite); border-radius: 0px 0px 12px 12px; box-shadow: var(--shadow-light); }
.q_page .line { position: absolute; width: 1px; height: 274px; top: 111px; left: 703px; object-fit: cover; }
.q_page .frame-7 { display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; flex: 1; flex-grow: 1; }
.q_page .hold-tight-we-re { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Inter", Helvetica; font-weight: 500; color: var(--darkblack); font-size: 32px; text-align: center; letter-spacing: -0.64px; line-height: 40px; }
.q_page .uiw-loading { position: relative; width: 40px; height: 40px; }
.q_page .section_wrapper .img { position: relative; width: 24px; height: 24px; }
.q_page .section_wrapper .text { position: relative; flex: 1; margin-top: -1.00px; font-family: var(--heading-h4-font-family); font-weight: var(--heading-h4-font-weight); color: var(--darkgray-dark); font-size: var(--heading-h4-font-size); letter-spacing: var(--heading-h4-letter-spacing); line-height: var(--heading-h4-line-height); font-style: var(--heading-h4-font-style); }
.q_page .frame-8 { display: flex; flex-direction: column; width: 388px; align-items: flex-start; gap: 32px; position: relative; }
.q_page .frame-9 { display: flex; align-items: center; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
.q_page .group { visibility: hidden; position: relative; width: 20px; height: 20px; background-color: var(--neutralsuccess); border-radius: 10px; }
.q_page .check { position: absolute; width: 11px; height: 11px; top: 5px; left: 5px; }
.q_page .frame-10 { display: inline-flex; align-items: center; gap: 12px; position: relative; flex: 0 0 auto; }
.q_page .img-wrapper { position: relative; width: 60px; height: 60px; background-color: var(--backgroundcolored); border-radius: 30px; }
.q_page .img-2 { position: absolute; width: 32px; height: 32px; top: 14px; left: 14px; }
.q_page .text-wrapper-8 { position: relative; width: 276px; font-family: var(--heading-h3-font-family); font-weight: var(--heading-h3-font-weight); color: var(--darkgray-dark); font-size: var(--heading-h3-font-size); letter-spacing: var(--heading-h3-letter-spacing); line-height: var(--heading-h3-line-height); font-style: var(--heading-h3-font-style); }
.q_page .uiw-loading_done,.q_page .uiw-loading_done_2 { display:none;text-align:center}
#pending_msg { position: absolute; top: -32px; right: 50%; transform: translateX(50%); width: 118%%; width: 400px; font: normal normal normal 15px Open Sans; letter-spacing: -0.19px; color: #34373A; }
#oops_msg,#reg_msg { position: fixed; display: none; background-color: white; letter-spacing: var(--heading-h3-letter-spacing); line-height: var(--heading-h3-line-height); font-style: var(--heading-h3-font-style); font-family: var(--heading-h3-font-family); top: 37%; left: 50%; z-index: 1000000000; padding: 16px 32px; border-radius: 12px; transform: translateX(-50%); box-shadow: 1px 1px 15px #0000001a; opacity: 0.8; color:red}
#reg_msg { color: blue; top: 15%; }
#pass_indicator_wrapper { position: relative; opacity: 0; }
#pass_progress_bar { width: 100%; height: 7px; background-color: #ebe7e7; border-radius: 5px; }
#pass_progress_bar .progress-bar { position: absolute; left: 0; height: 7px; border-radius: 5px; width: 0; transition: 0.5s all }
#pass_progress_bar .progress-bar.bg-danger { background-color: rgba(250, 25, 29, 1); width: 40%; transition: 0.5s all }
#pass_progress_bar .progress-bar.bg-warning { background-color: rgba(254, 187, 12, 1); width: 60%; transition: 0.5s all }
#pass_progress_bar .progress-bar.bg-success { background-color: rgb(8, 188, 71); width: 100%; transition: 0.5s all }
#pass_strength_indicator { float: right; font-size: 13px; letter-spacing: var(--action-a2-letter-spacing);  font-style: var(--action-a2-font-style); font-family: var(--action-a2-font-family); }
#pass_strength_indicator.bg-danger { color: rgba(250, 25, 29, 1); }
#pass_strength_indicator.bg-warning { color: rgba(254, 187, 12, 1) }
#pass_strength_indicator.bg-success { color:green}
#txtPW, #txtEmail, #txtClient, #txtFirstName, #txtLastName { margin-bottom: 5px; }
.pass_requirments { cursor: pointer; color: var(--brandprimary); }
#invalidEmail, #mandatoryCompany, #mandatoryLN, #mandatoryFN, #mandatoryPass,#login_error { opacity: 0; color: red; font-size: 13px; font-family: var(--action-a2-font-family); }


@keyframes rotate { from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotating { animation: rotate 1s infinite linear; }

@keyframes throb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.8); }
}
.throbbing { animation: throb 1s infinite ease-in-out; }


@media screen and (max-height: 850px) { .whole_page .left_side img { height: 850px; }
}

@media screen and (max-width: 1100px) {
    .whole_page .left_side { display: none; }
    .whole_page .right_side { width: 100%; }
}