﻿
.register,
.register-stage-one-ctrl,
.register-stage-two-ctrl,
.register-stage-three-ctrl,
.register-success { position: relative; flex: 1; display: flex; flex-direction: column; }

.register-login-to-ctrl,
.register-bussiness-or-private-ctrl,
.register-bussiness-upload-ctrl,
.register-bussiness-contact-ctrl { position: relative; }

/*************** Generics ******************/

/* Generic Prev Btn */
.btn-prev-view { position: absolute; top: 0; right: 0; font-size: 14px; font-weight: bold; padding-right: 9px; align-self: flex-start; z-index: 1; }
.btn-prev-view::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 4px; height: 8px; background: url('../img/icons/backArrow.svg') no-repeat; }

/* Generic Form */
.form-wrapper { flex: 1; width: 100%; height: 100%; display: flex; flex-direction: column; }
.form-wrapper .form-container { position: relative; flex: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 40px; }
.form-wrapper .form-container .primary-btn { width: 347px; }

.form-wrapper .form-container .primary-btn:disabled,
.form-wrapper .form-container .primary-btn.primary-btn-disabled { color: #262626; background-color: #DCDCDC; }

.form-wrapper .form-container .primary-btn:disabled { cursor: not-allowed; }

.form-wrapper .form { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 15px; }
.form-wrapper .form-title { display: flex; flex-direction: column; gap: 5px; }
.form-wrapper .form-fields { display: flex; flex: 1; width: 100%; }
.form-wrapper .form-fields-container { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.form-wrapper .form-textarea-control { flex: 1; display: flex; align-items: center; flex-direction: column; gap: 15px; }
.form-wrapper .form-textarea-control textarea { flex: 1; width: 100%; }
.form-wrapper .form-control { flex: 1; display: flex; align-items: center; gap: 15px; }
.form-wrapper .form-control > .input-field,
.form-wrapper .form-control > .tel-field,
.form-wrapper .form-control > .input-placeholder { width: 100%; }
.form-wrapper .form-control > .tel-field .tel-field-number { flex: 1; width: 100%; }
.form-wrapper .form-control-additional-fields { display: flex; flex-direction: column; gap: 15px; }

.form-wrapper .form-control-hide { display: none; }
.form-wrapper .form-control-group { display: flex; align-items: center; gap: 15px; }
.form-wrapper .form-control-field { position: relative; }
.form-wrapper .form-control-field-error { display: flex; align-items: center; position: absolute; top: 116px; right: 0; color: var(--error); font-size: 14px; line-height: 16px; user-select: none; }
.form-wrapper .form-control-field-error::before { content: ''; display: inline-block; margin-left: 4px; width: 14px; height: 14px; background: url('../img/icons/warning.svg') no-repeat; }

/*************** Register.aspx ******************/

.register .register-wrapper { flex: 1; background-image: url('../img/register/register-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top; }
.register .register-wrapper:has(.register-bussiness-or-private-wrapper.bussiness-client),
.register .register-wrapper:has(.business-container.bussiness-client) { background-image: url('../img/register/register-bg.jpg'); }
.register .register-container { padding: 35px 0; }
.register .registration-form-wrapper { width: 100%; }
.register .registration-form-container { width: 100%; display: flex; gap: 120px; }
.register .private-or-business-wrapper { max-width: 800px; width: 100%; height: 100%; background-color: var(--white); border-radius: 10px; display: flex; flex-direction: column; }
.page-wrapper-settelment .register .private-or-business-wrapper { max-width: 900px; }

.register .private-or-business-wrapper:has(.bus-or-pri-selection-wrapper) { min-height: 545px; }
.register .private-wrapper,
.register .business-wrapper,
.register .bus-or-pri-selection-wrapper { flex: 1; position: relative; display: flex; flex-direction: column; border-radius: 10px; }

.register .private-container,
.register .business-container,
.register .bus-or-pri-selection-container { flex: 1; position: relative; padding: 40px 0; width: 90%; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 30px; }

.register .settlement-wrapper .private-container { gap: 0; }
.register .settlement-wrapper .private-container .title { margin-top: 30px; }
.settlement-subtext { margin-top: 10px; margin-bottom: 30px; }

.register .private-container.private-container-car { min-height: 800px; }

.register .private-container > h1 { text-align: center; font-size: 24px; line-height: 32px; }
.register .private-container .btn-prev-view,
.register .business-container .btn-prev-view { top: 40px; }

/*************** Stages.aspx ******************/

.stepper { width: 100%; display: flex; justify-content: space-between; }
.stepper .step-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.stepper .step-item:not(:last-child)::before { position: absolute; content: ""; border-bottom: 5px solid var(--gray); width: 100%; top: 9px; left: -50%; z-index: 2; }
.stepper .step-item:not(:first-child)::after { position: absolute; content: ""; border-bottom: 5px solid var(--gray); width: 100%; top: 9px; left: 50%; z-index: 2; }
.stepper .step-item .step-counter { position: relative; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--gray); margin-bottom: 8px; user-select: none; z-index: 5; }
.stepper .step-item .step-title { font-weight: 400; font-size: 16px; line-height: 22px; }
.stepper .step-item.active-step .step-title { font-weight: 700; }
.stepper .step-item.active-step .step-counter,
.stepper .step-item.completed-step .step-counter { background-color: var(--teal); color: var(--white); }
.stepper .step-item.completed-step::after { position: absolute; content: ""; border-bottom: 5px solid var(--teal); width: 100%; top: 9px; right: 50%; z-index: 3; }
.stepper .step-item.completed-step .step-counter { font: 0/0 "a"; border: 0; cursor: pointer; }
.stepper .step-item.completed-step .step-counter:after { content: '\2713'; font: 18px/24px "a"; }

/*************** Driver.aspx ******************/

.register-stage-one-ctrl.register-stage-one-wrapper { width: 100%; }
.register-stage-one-ctrl .register-stage-one-container { width: 100%; display: flex; flex-direction: column; flex: 1; }
.register-stage-one-ctrl .add-phone-btn,
.register-stage-one-ctrl .closeAdditionalField,
.register-stage-one-ctrl .add-contact-btn { cursor: pointer; font-size: 16px; line-height: 22px; }
.register-stage-one-ctrl .form-control-additional-fields .form-title { flex-direction: row; justify-content: space-between; }
.register-stage-one-ctrl .approval-criteria { display: flex; flex-direction: column; gap: 15px; }
.register-stage-one-ctrl .checkbox-control { display: flex; align-items: center; gap: 10px; }
.register-stage-one-ctrl .checkbox-control > a { font-size: 16px; margin: 1px -5px 0 0; }

.register-stage-one-ctrl .checkbox-control .privacyPolicyParagraph {padding-right:27px;padding-top:0;}

.register-stage-one-ctrl .checkbox-control .privacyPolicyParagraph,
.register-stage-one-ctrl .checkbox-control .privacyPolicyParagraph .link {font-size:16px;}

/*************** Cars.aspx ******************/

.register-stage-two-ctrl.register-stage-two-wrapper { width: 100%; }
.register-stage-two-ctrl .register-stage-two-container { width: 100%; display: flex; flex-direction: column; flex: 1; }

.form-wrapper.form-wrapper-cars .form-container { flex: 0; }
.form-wrapper.form-wrapper-cars .form-container .form { min-height: 485px; }
.form-wrapper.form-wrapper-cars .form-fields { padding-bottom: 10px; flex: 0; }
.form-wrapper.form-wrapper-cars .form-fields-container { align-self: flex-start; }
.form-wrapper.form-wrapper-cars .form-fields-container .input-field { padding: 11px 11px; }
.form-wrapper.form-wrapper-cars .form-fields-container .primary-btn { padding: 8px 0; }
.form-wrapper.form-wrapper-cars .btn-container { width: 100%; }
.form-wrapper.form-wrapper-cars .btn-container .primary-btn { display: block; width: 100%; }

.register-stage-two-ctrl .form-add-cars-wrapper { flex: 0; border-top: 1px solid var(--gray-light); padding-top: 25px; }
.register-stage-two-ctrl .form-add-cars-container { display: flex; flex-direction: column; gap: 15px; }

.register-stage-two-ctrl .form-add-cars-container > span { font-size: 14px; line-height: 16px; }
.register-stage-two-ctrl .form-cb-control { display: flex; align-items: center; gap: 5px; }

.register-stage-two-ctrl .search { align-self: flex-end; width: 50%; position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--white); border-radius: 15px; background-color: var(--gray); overflow: hidden; padding: 12.5px 15px; margin-bottom: -10px; }
.register-stage-two-ctrl .search .search-term { width: 100%; color: var(--primary); border: none; outline: none; background-color: inherit; }

.register-stage-two-ctrl .common-table tbody tr .car-count { display: flex; align-items: center; gap: 20px; }
.register-stage-two-ctrl .common-table tbody tr .car-count > img { width: 22px; height: 22px; }
.register-stage-two-ctrl .common-table tbody tr .car-number { font-weight: 700; }
.register-stage-two-ctrl .common-table tbody tr .remove-car { width: 19px; height: 18px; cursor: pointer; user-select: none; }
.register-stage-two-ctrl .common-table thead tr th:last-child { padding: 0 20px 0 0; }

/*************** CreditCard.aspx ******************/

.register-stage-three-ctrl.register-stage-three-wrapper { width: 100%; }
.register-stage-three-ctrl .register-stage-three-container { width: 100%; display: flex; flex-direction: column; flex: 1; }

/*************** Login.aspx ******************/

.register-login-to-ctrl.register-login-to-wrapper { flex: 1; width: 100%; height: 100%; background-color: var(--white); border-radius: 10px; }
.register-login-to-ctrl .register-login-to-container { padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.register-login-to-ctrl .register-login-to-container > img { width: 45px; height: 45px; }

/*************** BusinessOrPrivate.aspx ******************/

.register-bussiness-or-private-ctrl.register-bussiness-or-private-wrapper { display: flex; flex: 1; width: 85%; }
.register-bussiness-or-private-ctrl .register-bussiness-or-private-container { width: 100%; display: flex; }
.register-bussiness-or-private-ctrl .form-wrapper .btn-prev-view { right: -9%; }
.register-bussiness-or-private-ctrl .form-wrapper .form { justify-content: center; align-items: center; }
.register-bussiness-or-private-ctrl .form-wrapper .form-title { align-items: center; gap: 15px; }
.register-bussiness-or-private-ctrl .form-wrapper .form-title > img { width: 45px; height: 45px; }
.register-bussiness-or-private-ctrl .bussinessTitle > h2 { font-weight: 400; }
.register-bussiness-or-private-ctrl .bussinessTitle > span { font-weight: 700; }
.register-bussiness-or-private-ctrl .selection-cards { width: 100%; display: flex; justify-content: space-between; gap: 15px; }
.register-bussiness-or-private-ctrl .selection-cards .selection-card { padding: 48px 20px; width: 100%; background-color: var(--white); border: 1px solid var(--orange); border-radius: 10px; }
.register-bussiness-or-private-ctrl .selection-card:hover { background-color: var(--orange); }
.register-bussiness-or-private-ctrl .selection-card-container { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.register-bussiness-or-private-ctrl .selection-cards .selection-card:is(:hover) .selection-card-container > img { filter: brightness(0) saturate(100%) }
.register-bussiness-or-private-ctrl .selection-cards .selection-card .selection-card-container > img { width: 40px; height: 40px; }
.register-bussiness-or-private-ctrl .selection-cards .selection-card .selection-card-container > h2,
.register-bussiness-or-private-ctrl .selection-cards .selection-card .selection-card-container > span { display: block; font-size: 18px; line-height: 24px; font-weight: 700; }
.register-bussiness-or-private-ctrl .selection-cards .selection-card .selection-card-container > p { font-size: 14px; line-height: 16px; }
.register-bussiness-or-private-ctrl .client-selection-description { display: flex; flex-direction: column; gap: 15px; }
.register-bussiness-or-private-ctrl .client-selection-description > p { font-weight: 700; }

/*************** BusinessUpload.aspx ******************/

.register-bussiness-upload-ctrl.register-bussiness-upload-wrapper { display: flex; justify-content: center; flex: 1; width: 100%; }
.register-bussiness-upload-ctrl .register-bussiness-upload-container { width: 75%; display: flex; }
.register-bussiness-upload-ctrl .form-wrapper .form-title { align-items: center; }

.register-bussiness-upload-ctrl .stage-wrapper,
.settlement-file-wrapper { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.register-bussiness-upload-ctrl .stage-container,
.settlement-file-container { display: flex; flex-direction: column; gap: 5px; padding-top: 20px; }

.settlement-file-container .stage-container { display: flex; flex-direction: row; gap: 10px; }
.settlement-file-container .stage-container h2 { width: 215px; }
.settlement-file-container .stage-container .upload-form { width: 100%; }
.settlement-file-container .file-emphasis { font-size: 16px; }

.register-bussiness-upload-ctrl .stage-container > p,
.settlement-file-container .stage-container > p { font-weight: 700; }

.settlement-file-container .uploaded-files { width: 100%; }

.register-bussiness-upload-ctrl .agreement-form-wrapper { background-color: var(--gray); border-radius: 10px; }
.register-bussiness-upload-ctrl .agreement-form-container { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; width: 90%; margin: 0 auto; max-height: 58px; min-height: 58px; }
.register-bussiness-upload-ctrl .file-title { display: flex; align-items: center; gap: 10px; }
.register-bussiness-upload-ctrl .file-title > h3 { font-size: 16px; line-height: 22px; font-weight: 400; }
.register-bussiness-upload-ctrl .download-btn { padding: 6px 23px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--teal); border-radius: 10px; }
.register-bussiness-upload-ctrl .file-emphasis { font-size: 14px; line-height: 16px; }
.register-bussiness-upload-ctrl .form-wrapper .form-container .primary-btn { width: 100%; }

/*************** BusinessContact.aspx ******************/

.register-bussiness-contact-ctrl.register-bussiness-contact-wrapper { display: flex; flex: 1; width: 100%; }
.register-bussiness-contact-ctrl .register-bussiness-contact-container { width: 100%; display: flex; }
.register-bussiness-contact-ctrl .form-header { align-items: center; }
.register-bussiness-contact-ctrl .form-header > p { width: 60%; text-align: center; }
.register-bussiness-contact-ctrl .form-wrapper .form-fields-container > .form-control { flex: 0; }

/*************** RegisterSuccess.aspx ******************/

.register-success .register-success-wrapper { flex: 1; background-image: url(../img/register/register-bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: bottom; }
.register-success .register-success-container { padding: 35px 0; }
.register-success .content-wrapper { max-width: 800px; background-color: var(--white); border-radius: 10px; display: flex; flex-direction: column; }
.register-success.register-success-has-ivs .content-wrapper { max-width: 1260px; }

.register-success .content-container { flex: 1; padding: 50px 0; width: 90%; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 30px; }
.register-success .content-container .content-description { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.register-success .content-container .content-description > h1 { text-align: center; }
.register-success .content-container .content-description .email { font-weight: 700; margin-top: 5px; margin-bottom: 10px; }
.register-success .content-container .content-description .reminder { font-size: 14px; line-height: 16px; }

.register-success .content-container .primary-btn,
.register-success .content-container .primary-outlined-btn { margin-top: 7px; width: 300px; }

.register-success .text { margin-top: 20px; }
.register-success .text.not-paid-ivs {  border: 3px solid #FF6C0E; padding: 20px;font-size:20px!important; text-align:center; }
.register-success .text.no-ivs { width: 450px; }

.register-success.register-business-success .content-container { padding: 80px 0; }
.register-success.register-business-success .content-container .content-description { gap: 5px; }

.register-success.register-business-success p { width: 300px; }

/*************** BusinessTitle.ascx ******************/

.register-bussiness-form-title-ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 0; background-color: var(--gray); border-top-left-radius: 10px; border-top-right-radius: 10px; }
.register-bussiness-form-title-ctrl > img { width: 22px; height: 22px; }
.register-bussiness-form-title-ctrl > h2 { font-size: 18px; line-height: 24px; }

@media (max-width: 1400px) {
    .register .register-bussiness-or-private-container,
    .register .registration-form-container { gap: 60px; }
}

@media (max-width: 1300px) {
    .register .register-bussiness-or-private-container,
    .register .registration-form-container { justify-content: center; gap: 0; }

    .register-login-to-ctrl.register-login-to-wrapper { display: none; }

    .register-success.register-success-has-ivs .content-wrapper { max-width: initial; }
}

@media (max-width: 1200px) {
    .register-success.register-success-has-ivs .page-width { width: 96%; }
}

@media (max-width: 1024px) {

    .register-success.register-success-has-ivs .content-container { width: 96%; }
}

@media (max-width: 850px) {
    .register .private-or-business-wrapper,
    .register-success .content-wrapper { max-width: 750px; }

    .form-wrapper.form-wrapper-cars .form-fields-container .primary-btn { width: 250px; }
}

@media (max-width: 800px) {
    .btn-prev-view { display: none; }

    .stepper .step-item:not(:last-child)::before,
    .stepper .step-item:not(:first-child)::after { border-bottom: 5px solid var(--white); }
    .stepper .step-item .step-counter { background-color: var(--white); }
    .stepper .step-item:not(:first-child)::after { border-bottom: 5px solid var(--white); }
    .stepper .step-item.completed-step::after { border-bottom: 5px solid var(--teal); }

    .form-wrapper .form-container { gap: 30px; }
    .form-wrapper .form-control { flex-direction: column; width: 100%; }
    .form-wrapper .form-control > .input-placeholder { display: none; }
    .form-wrapper .form-control-field-error { top: 113px; }

    .register .private-container.private-container-car { min-height: 715px; }
    .form-wrapper.form-wrapper-cars .form-container .form { min-height: auto; }

    .form-wrapper .form-container .primary-btn,
    .form-wrapper.form-wrapper-cars .form-fields-container .primary-btn { width: 100%; }

    .form-wrapper .form-control-group { flex-direction: column; }
    .form-wrapper .form-control-field,
    .form-wrapper .form-control-field > .input-field { width: 100%; }

    .register .register-wrapper,
    .register .register-wrapper:has(.register-bussiness-or-private-wrapper.bussiness-client),
    .register .register-wrapper:has(.business-container.bussiness-client) { background-image: none; background-color: var(--gray); }
    .register .register-container { padding: 0; }
    .register .private-or-business-wrapper,
    .register .private-or-business-wrapper:has(.bus-or-pri-selection-wrapper),
    .register-success .content-wrapper { max-width: initial; min-height: 100%; }
    .register .register-bussiness-or-private-container,
    .register .registration-form-container { flex-direction: column; }
    .register .register-bussiness-or-private-container:has(.register-login-to-ctrl),
    .register .registration-form-container:has(.register-login-to-ctrl) { padding: 0 0 30px 0; }
    .register .private-wrapper,
    .register .business-wrapper,
    .register .bus-or-pri-selection-wrapper { background-color: var(--gray); border-radius: initial; }
    .register .private-container,
    .register .business-container,
    .register .bus-or-pri-selection-container { padding: 30px 0; }

    .register-stage-one-ctrl .form-control.divided { flex-direction: row; gap: 10px; }

    .register-stage-two-ctrl .search { width: 100%; background-color: var(--white); }
    .register-stage-two-ctrl .search .search-btn { background-color: transparent; }

    .register-stage-two-ctrl .common-table thead tr th:last-child { display: block; padding: 0; width: 100%; }
    .register-stage-two-ctrl .add-car-btn { width: 100%; }

    .register-bussiness-or-private-ctrl.register-bussiness-or-private-wrapper { width: 100%; }
    .register-bussiness-or-private-ctrl .form-wrapper .form-title { text-align: center; }
    .register-bussiness-or-private-ctrl .selection-cards:not(.selection-cards-count) { flex-direction: column; }
    .register-bussiness-or-private-ctrl .selection-cards .selection-card { background-color: transparent; }

    .register-bussiness-contact-ctrl .form-wrapper .form-title { align-items: flex-start; }
    .register-bussiness-contact-ctrl .form-wrapper .form-title > p { width: 100%; text-align: right; }

    .register-bussiness-upload-ctrl .register-bussiness-upload-container { width: 100%; }
    .register-bussiness-upload-ctrl .form-wrapper .form-title { align-items: flex-start; }
    .register-bussiness-upload-ctrl .agreement-form-wrapper { background-color: var(--white); }

    .register-bussiness-form-title-ctrl { background-color: var(--white); border-radius: 0; }

    .register-login-to-ctrl.register-login-to-wrapper { display: block; background-color: var(--gray); border-radius: 0; }
    .register-login-to-ctrl .register-login-to-container { position: relative; width: 90%; margin: 0 auto; }
    .register-login-to-ctrl .register-login-to-container:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../img/register/forest-road.webp); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--white); border-radius: 10px; opacity: 0.10; }
    .register-login-to-ctrl .register-login-to-container > img { display: none; }

    .register-success .register-success-wrapper { background-image: none; background-color: var(--white); }
    .register-success .register-success-container { padding: 0; }

    .register-success .content-container .primary-btn,
    .register-success .content-container .primary-outlined-btn { width: 100%; }
}

@media (max-width: 500px) {
    .register-success .text.no-ivs { width: auto; }
}

@media (max-width: 450px) {
    .stepper .step-item:not(:first-child)::after { border-bottom: 3px solid var(--white); top: 11px; }
    .stepper .step-item.completed-step::after { border-bottom: 3px solid var(--teal); top: 11px; }

    .register-bussiness-form-title-ctrl > img { width: 18px; height: 18px; }
    .register-bussiness-form-title-ctrl > h2 { font-size: 14px; line-height: 16px; }

    .register-success.register-success-has-ivs .page-width,
    .register-success.register-success-has-ivs .content-container { width: 100%; }

    .register-success .content-container .content-description { gap: 10px; width: 90%; }
    .register-success .content-container .content-description > h1 { font-size: 20px; line-height: 24px; }
    .register-success .content-container .content-description > h1 > br { margin-top: 10px; }

    .settlement-file-container .stage-container { flex-direction: column; }
    .settlement-file-container .stage-container h2 { width: auto; text-align: center; }
}

@media (max-width: 400px) {
    .register-success .content-container .content-description { gap: 0; }
    p.pConfirmationOfYourJoining { font-size: 14px; line-height: 14px; padding-top: 20px; }
    .register-success .content-container .content-description .email { margin-bottom: 20px; }
}

@media (max-width: 340px) {
    .register-success .text.not-paid-ivs,
    .register-success .text.no-ivs,
    .register-success.register-business-success p,
    .register-success .content-container .primary-btn { width: 96%; }
}
