/*////////////***************New Backoffice login Design Start******************\\\\\\\\\\\\*/
.back_office_login { height: 100vh; }
.back_office_login .container-fluid { padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; width: 100%; height: 100%; }
.back_office_login .container-fluid .col-lg-7,
.back_office_login .container-fluid .col-lg-5 { padding-right: 0px; padding-left: 0px; height: 100%; }
.right_section_login { background: #FFFFFF; }
.right_section_login { position: relative; background: #F0F6FB; height: 100%; display: flex; align-items: center; justify-content: center; }
.form_backoffice .img_cl_sec {/* width: 335px;*/ height: 100px; margin: auto; }
.form_backoffice { margin: 0 70px; text-align: center; }
.form_backoffice .img_cl_sec img { /*width: 100%; height: auto;*/ max-height:100px; max-width:350px;}
.form_backoffice h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 36px; font-style: normal; font-weight: 700; line-height: 48px; }
.form_backoffice p { color: rgba(24, 24, 27, 0.60); font-family: Plus Jakarta Sans; font-size: 16px; font-style: normal; font-weight: 400; }
.login_field_back { margin-top: 40px; }
.login_field_back input { height: unset; margin-bottom: 0; width: 100%; outline: none; border-radius: 11px; border: 1px solid var(--grey, #E7E8EA); background: #FFF; padding: 18px 50px; font-size: 14px; }
.login_field_back input:focus { border: 1px solid #096BBA; }
.thunder_svg { display: flex; }
.login_field_back input::placeholder { color: #AFAFAF; font-family: Plus Jakarta Sans; font-size: 18px; font-style: normal; font-weight: 400; line-height: 16px; }
.login_field_back .icn_login { position: absolute; top: 19px; left: 30px; }
.password_sec_ { margin-top: 20px; }
.btn_top_signin { margin-top: 40px; }
.btn_sign_in { font-family: Plus Jakarta Sans; border-radius: 10px; background: #096BBA; width: 100%; color: #ffff; font-size: 16px; font-weight: 700; line-height: 28px; padding: 16px 0; outline: none; border: none; }
/************/
.left_section_login { display: flex; justify-content: center; flex-direction: column; top: 17%; position: relative; gap: 14rem; }
.container_circ { position: relative; background: #ffff; height: 100%; display: flex; align-items: center; justify-content: center; max-width: 575px; margin: 0 auto; }
.flippable-svg { transform-origin: center; transition: transform 0.3s ease-in-out; cursor: pointer; }
.flipped { transform: scaleX(-1); }
.shadow_img { position: absolute; top: 56px; }
.shadow_div { height: 250.7px; width: 250.7px; box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; border-radius: 50%; position: absolute; }
.grey_div { height: 255.7px; width: 257.7px; border: 15px solid #DCDCDC; border-radius: 50%; position: absolute; top: -1px; left: -2px; }
.outer_dash_circle { border-radius: 50%; border: 1px dashed #B9C0C4; height: 400px; width: 400px; }
.white_stripe { height: 276.7px; width: 276.7px; border: 10px solid #ffff; border-radius: 50%; position: absolute; top: -12px; left: -11px; }
.blaze_logo { position: absolute; top: 41%; left: 3%; right: 0; margin: 0 auto; width: 65%; }
.blaze_colorful { position: absolute; top: 17px; left: 15.5px; right: 0; margin: 0 auto; }
.inner_svg_icon { position: relative; margin: 0 auto; top: 9px; left: 10px; }
.inner_svg_icon_ins { position: relative; margin: 0 auto; top: 13px; left: 12px; }
.powered_by_bottom { display: flex; }
.powerd_by_item { display: flex; height: 26px; padding: 0px 10px; align-items: center; gap: 5px; border-radius: 160px; border: 1px solid #0C3076; }
.powered_by_bottom { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.comp_logo img { width: 190px; }

/* *****code*****  */
.new_container { position: relative; width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; }
.big-circle { width: 350px; height: 350px; border: 1px dashed #B9C0C4; border-radius: 50%; position: relative; }
.small-circle { position: absolute; width: 70px; height: 70px; border-radius: 50%; background-color: #fff; box-shadow: inset 0px 0px 0px 4px #DFDFDF; z-index: 1 !important; }
.child1 { transform: translate(143px, -104px); border: 7px solid #2196F3; }
.child2 { transform: translate(321px, -22px); border: 7px solid #FF9800; }
.child3 { transform: translate(382px, 131px); border: 7px solid #9C27B0; }
.child4 { transform: translate(330px, 290px); border: 7px solid #F44336; }
.child5 { transform: translate(144px, 382px); border: 7px solid #C140EA; }
.child6 { transform: translate(-40px, 302px); border: 7px solid #4CAF50; }
.child7 { transform: translate(-104px, 137px); border: 7px solid #B90005; }
.child8 { transform: translate(-42px, -25px); border: 7px solid #00BCD4; }
.content_login { position: absolute; width: 200px; height: 200px; top: 70px; left: 73px; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); }
.circle_line { position: relative; border-radius: 100%; width: 12px; height: 12px; text-align: center; margin-top: 50px; z-index: 2; background: #AFB7BC; margin: 0 auto; }
.circle:first-child { margin-top: 0; }
.circle_line:before { position: absolute; width: 1px; background: #AFB7BC; height: 28px; display: block; content: ''; left: 50%; z-index: -9; top: -50px; margin-left: -1px; top: -27px; }
.circle_first { margin: 0 auto; top: 92%; transform: rotate(360deg); }
.circle_first::before { width: 2px; }
.circle_second { right: 56px; top: 43%; transform: rotate(52deg); }
.circle_third { transform: rotate(90deg); left: -68.5px; top: -9px; }
.circle_four { transform: rotate(131deg); left: -52px; top: -60px; }
.circle_five { transform: rotate(180deg); left: 0; top: -84px; }
.circle_six { transform: rotate(225deg); right: -46px; top: -65px; }
.circle_seven { transform: rotate(270deg); right: -68px; top: -16px; }
.circle_eight { transform: rotate(311deg); right: -55px; top: 24px; }

/* code  Insurance*/
.text-Flight-first { position: absolute; top: -68px; /* left: 82px; */ }
.text-Flight-first h3 span { position: relative; color: #2196F3; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-Flight-first h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #2196F3; bottom: -7px; left: 0; }
.text-Flight-first h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #2196F3; bottom: -10px; right: -7px; }

/* code  flight*/
.text-hotel-second { position: absolute; top: -11px; left: 82px; }
.text-hotel-second h3 span { position: relative; color: #FF9800; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-hotel-second h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #FF9800; bottom: -7px; left: 0; }
.text-hotel-second h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #FF9800; bottom: -10px; right: -7px; }

/* code visa */
.text-visa-third { position: absolute; top: -11px; left: 82px; }
.text-visa-third h3 span { position: relative; color: #9C27B0; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-visa-third h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #9C27B0; bottom: -7px; left: 0; }
.text-visa-third h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #9C27B0; bottom: -10px; right: -7px; }

/* code car */
.text-car-four { position: absolute; top: -11px; left: 82px; }
.text-car-four h3 span { position: relative; color: #F44336; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-car-four h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #F44336; bottom: -7px; left: 0; }
.text-car-four h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #F44336; bottom: -10px; right: -7px; }


/* code Transfers */
.text-transfer-five { position: absolute; bottom: -47px; left: 0; }
.text-transfer-five h3 span { position: relative; color: #C140EA; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-transfer-five h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #C140EA; bottom: -7px; left: 0; }
.text-transfer-five h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #C140EA; bottom: -10px; right: -7px; }

/* code Hotel */
.text-hotel-six { position: absolute; top: -19px; left: -61px; }
.text-hotel-six h3 span { position: relative; color: #4CAF50; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-hotel-six h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #4CAF50; bottom: -7px; left: 0; }
.text-hotel-six h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #4CAF50; bottom: -10px; right: -7px; }

/* code Holidays */
.text-holidays-seven { position: absolute; top: -11px; left: -63px; }
.text-holidays-seven h3 span { position: relative; color: #B90005; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-holidays-seven h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #B90005; bottom: -7px; left: 0; }
.text-holidays-seven h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #B90005; bottom: -10px; right: -7px; }


/* code Cruice */
.text-cruise-eight { position: absolute; top: -11px; left: -84px; }
.text-cruise-eight h3 span { position: relative; color: #00BCD4; font-family: Plus Jakarta Sans; font-size: 16.743px; font-style: normal; font-weight: 700; line-height: normal; }
.text-cruise-eight h3 span::before { content: ""; height: 3px; width: 100%; position: absolute; background-color: #00BCD4; bottom: -7px; left: 0; }
.text-cruise-eight h3 span::after { content: ""; height: 10px; width: 10px; border-radius: 50%; position: absolute; background-color: #00BCD4; bottom: -10px; right: -7px; }

.btn_sign_in.btn-submit.btn-login:hover { color: #fff; }
.btn_sign_in.btn-submit.btn-login:focus { outline: none; color:#fff; }
.flippable-svg:hover { transform: scale(1.1); transition: transform 0.5s ease-in-out; }

/************MEDIA QUERIES FOR PAYMENT PAGE*************/
@media (max-width: 3840px) {
.left_section_login { top: unset; position: relative; gap: unset; }
.left_login_bkofc_section { display: flex; justify-content: center; }
.container_circ { height: unset; }
.powered_by_bottom { position: relative; top: 20rem; }
}


@media (max-width:1800px) {
.left_section_login { top: 17%; position: relative; gap: 14rem; }
.left_login_bkofc_section { display: block; }
.container_circ { height: 100%; }
.powered_by_bottom { position: unset; }
    .comp_logo img { width: 150px; }
    .powerd_by_item {  height: 24px; padding: 0px 8px;  gap: 4px; }
}


@media (max-width: 1400px) {
.white_stripe { top: -5px; height: 250.7px; width: 250.7px; border: 10px solid #fff; left: -5px; }
.left_section_login { top: 14%; gap: 9rem; }
.big-circle { width: 320px; height: 320px; }
.shadow_div { height: 240.7px; width: 240.7px; border-radius: 50%; }
.circle_line:before { top: -21px; }
.content_login { position: absolute; width: 190px; height: 180px; top: 68px; left: 65px; }
.child1 { transform: translate(135px, -78px); border: 3px solid #2196F3; }
.child2 { transform: translate(289px, -10px); border: 3px solid #FF9800; }
.child3 { transform: translate(345px, 131px); border: 3px solid #9C27B0; }
.child4 { transform: translate(299px, 269px); border: 3px solid #F44336; }
.child5 { transform: translate(133px, 345px); border: 3px solid #C140EA; }
.child6 { transform: translate(-22px, 276px); border: 3px solid #4CAF50; }
.child7 { transform: translate(-78px, 137px); border: 3px solid #B90005; }
.child8 { transform: translate(-16px, -14px); border: 3px solid #00BCD4; }
.inner_svg_icon { top: 5px; left: 8px; }
.circle_line { position: absolute; }
.circle_first { top: 67px; left: 15px; }
.circle_second { right: 55px; top: 111%; }
.circle_third { transform: rotate(90deg); left: -35px; top: 17px; }
.circle_four { transform: rotate(131deg); left: -23px; top: -19px; }
.circle_five { transform: rotate(180deg); left: 15px; top: -36px; }
.circle_six { transform: rotate(225deg); right: -17px; top: -25px; }
.circle_seven { transform: rotate(270deg); right: -36px; top: 13px; }
.circle_eight { transform: rotate(311deg); right: -24px; top: 47px; }
.small-circle { width: 50px; height: 50px; box-shadow: inset 0px 0px 0px 3px #DFDFDF; }
.inner_svg_icon svg { height: 30px; width: 30px; }
.inner_svg_icon_ins svg { height: 28px; width: 28px; }
.inner_svg_icon_ins { top: 10px; left: 9px; }
.text_side_cat h3 span { font-size: 13px !important; }
.text-transfer-five { bottom: -39px; }
.text-hotel-second, .text-visa-third, .text-car-four { top: -18px; left: 70px; }
.text-hotel-six { top: -18px; left: -50px; }
.text-Flight-first { position: absolute; top: -63px; }
.text-cruise-eight { top: -18px; left: -70px; }
.text-holidays-seven { top: -18px; left: -50px; }
/*.form_backoffice .img_cl_sec { width: 260px; }*/
.form_backoffice h2 { font-size: 30px; line-height: 30px; margin-top: 0; }
.login_field_back { margin-top: 20px; }
.login_field_back input { padding: 15px 45px; }
.login_field_back .icn_login { top: 15px; }
.login_field_back input::placeholder { font-size: 16px; }
.btn_sign_in { padding: 10px 0; }
.grey_div { height: 231.7px; width: 231.7px; position: absolute; top: 4px; left: 5px; border: 10px solid #DCDCDC; }
.blaze_colorful { position: absolute; top: 27px; left: 16.5px; right: 0; margin: 0 auto; }
.blaze_colorful svg { height: 200px; width: 210px; }
.btn_top_signin { margin-top: 20px; }
.blaze_logo { top: 40%; left: 0; }
}

@media (max-width: 1280px) {
    .comp_logo img { width: 120px; }
    .powerd_by_item { height: 20px; padding: 0px 5px; gap: 4px; }
    .thunder_svg svg{height:12px;}
    .powerd_by_item{font-size:9px;}
    .left_section_login { gap: 7rem; }
    .text-transfer-five { bottom: -32px; }
}


@media (max-width: 992px) {
.right_login_bkofc_sec { width: 100%; }
.left_login_bkofc_section { display: none; }
.login_field_back input { padding: 15px 65px; }
.poweredby_right { display: block !important; position: relative; top: 25rem; }
.res_login_section_bkofc { display: flex; flex-direction: column; gap: 0; }
.blaze_logo_res { margin-top: 15px; }
.blaze_logo_footer { width: 190px; }
.login_field_back { padding: 0 7rem; }
.powred_by_sec_btm_res { display: flex; justify-content: space-between; align-items: end; }
.powerd_by_item { display: unset; height: unset; padding: unset; align-items: unset; gap: unset; border-radius: unset; border: unset; font-size: 14px; }
.powered_by_bottom { flex-direction: column; gap: 3px; align-items: flex-start; }
}


@media(max-width:768px) {
.poweredby_right { top: 15rem; }
.password_sec_ { margin-top: 10px; }
.comp_logo img { width: 150px; }
}


@media (max-width: 767px) {
.form_backoffice h2 { font-size: 24px; line-height: 24px; }
.form_backoffice p { font-size: 12px; }
.login_field_back { padding: 0 !important; }
.login_field_back input { padding: 15px 54px; }
.comp_logo img { width: 120px; }
.blaze_logo_footer { width: 120px; }
.form_backoffice { margin: 0 30px; }
/*.form_backoffice .img_cl_sec img { width: 80%; height: auto; }*/
.form_backoffice .img_cl_sec img { max-height: 50px; max-width: 200px; }
.form_backoffice .img_cl_sec { height: 70px; }
.powerd_by_item { font-size: 12px; }
}


@media (max-width: 380px) {
.form_backoffice h2 { font-size: 20px; line-height: 20px; }
.form_backoffice { margin: 0 20px; }
.login_field_back input { padding: 13px 50px; }
.btn_sign_in { padding: 8px 0; }
.res_login_section_bkofc { gap: 0; }
.form_backoffice .img_cl_sec { height: 70px; }
.right_section_login { height: 100vh; }
.poweredby_right { top: 12rem; }
.powerd_by_item { font-size: 8px; }
}


@media (max-width: 376px) {
.poweredby_right { top: 8rem; }
.blaze_logo_footer { width: 90px; }
.comp_logo img { width: 90px; }
.password_sec_ { margin-top: 8px; }
.login_field_back input { padding: 14px 50px; }
.btn_sign_in { font-size: 15px; line-height: 24px; }
}
/*////////////***************New Backoffice login Design End******************\\\\\\\\\\\\*/