.main-color-50 {
 color: rgba(47, 47, 47, .5);
}
.main-color-60 {
 color: rgba(47, 47, 47, .6);
}
.cursor-pointer {
    cursor: pointer;
}
.error-msg {
    position: absolute;
    left: 0;
    bottom: -16px;
}
label {
    transition: all .5s ease;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}
input:-moz-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    color: #000 !important;
}
input[type="date"] {
    text-transform: uppercase;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none; /* remove default styling */
    cursor: default;           /* optional: prevent pointer cursor */
}
.invalid-input {
    border-color: #F70000 !important;
}
.invalid-label {
    color: #F70000;
}
.pass-err {
    position: absolute;
    color: #F70000;
    font-size: 13px;
    left: 5px;
    bottom: -22px;
}
#booking_rent_method_error_message {
    position: absolute;
    left: 30px;
    bottom: 84px;
    color: #F70000;
    font-size: 13px;
}
.payment-method-steps.error {
    border-color: #F70000;
}
.existing-booking {
    position: absolute;
    top: 120px;
    left: 0;
}
.existing-booking > :first-child{
    color: #F70000;;
}


.phone-codes-dropdown {
    color: var(--secondary-color) !important;
}
.error-icon {
    width: 15px;
    position: absolute;
    top: -20px;
    right: 5px;
}
#profile.error-icon {
    top: 2px !important;
}
#country-div .error-icon,
.year-of-study-main .error-icon{
    top: 5px !important;
}
.phone-country-codes-parent .error-icon {
    top: -33px !important;
}
.apartmentrental-header-image {
    padding-top: 35%;
    position: relative;
}
.apartmentrental-header-paragraph .highlight {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.apartmentrental-header-paragraph .highlight::after {
    content: "";
    position: absolute;
    bottom: 0.45em;
    left: 0;
    right: 0;
    border-bottom: 0.15em solid;
    z-index: -1;
}
.apartmentrental-header-paragraph .highlight.green::after {
    border-color: var(--website-green);
}
.apartmentrental-header-paragraph .highlight.yellow::after {
    border-color: var(--website-yellow);
}
.apartmentrental-header-paragraph .highlight.red::after {
    border-color: var(--website-red);
}
.apartmentrental-header-paragraph .highlight.blue::after {
    border-color: var(--website-blue);
}
.apartmentrental-header-paragraph .highlight.orange::after {
    border-color: var(--website-orange);
}
.apartmentrental-mission-image {
    padding-top: 120%;
    position: relative;
}

.phone-code-tenant-div {
    position: absolute;
    top: 2px;
    left: 0;
    color: rgba(0,0,0, .5);
    font-size: 14px;
}
#tenant_fields .tenant-phone-second-step .tenant-phone{
    padding-left: 30px !important;
}

/* booking procedure otp verification modals styling*/

.custom-modal-body {
    width: 827px;
    /*max-width: 90%;*/
    max-width: 94%;
    border-radius: 20px;
    background-color: white;
    position: relative;
    padding-left: 185px;
    padding-right: 185px;
}

/*.custom-modal-close-button {*/
/*    position: absolute;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    top: -5px;*/
/*    right: -10px;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    border-radius: 20px;*/
/*    background-color: #46B6AD;*/
/*    color: white;*/
/*    font-size: 20px;*/
/*    cursor: pointer;*/

/*}*/

.custom-modal-login-form {
    display: flex;
    justify-content: center;

}

.custom-modal-login-form-inside {
    width: 100%;
}
.modal-country {
    appearance: none;
    padding-right: 19px;
}
.modal-country-arrow {
    width: 13px;
    position: absolute;
    top: 42%;
    right: 0;
}
.custom-form-submit {
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 30px;
    text-align: center;
    width: 100%;
    height: 56px;
    background-color: white;
    cursor: pointer;
    transition: all .5s ease;
}
.custom-form-submit:hover:not(disabled) {
    border-color: transparent;
    background-color: var(--main-color);
    color: white;
}

.custom-register-button {
    width: 100%;
    border: 1px solid rgba(45, 45, 45, 0.3);
    border-radius: 30px;
    overflow: hidden;
}
.country-button{
    cursor: pointer;
    transition: all .5s ease;
}
.country-button:hover{
    background-color: rgba(211, 211, 211, 0.4);
}

.otp-inputs {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.otp-inputs input {
    appearance: textfield;
    -moz-appearance: textfield;
}
.otp-inputs input[type=number]::-webkit-inner-spin-button,
.otp-inputs input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#tenant_phone_invalid_otp {
    position: absolute;
    left: 0;
    bottom: -20px;
}

.otp-input {
    width: 57px;
    height: 57px;
    text-align: center;
    font-size: 20px;
    border: 1px solid rgba(47, 47, 47, .3);
    border-radius: 13px;
    outline: none;
    transition: all .5s ease;
}
.otp-input:focus {
    border-color: #46B6AD;
}
.otp-input:not(:placeholder-shown) {
    background-color: #EFEFEF;
    border-color: transparent !important;
}
.disabled_click {
    pointer-events: none;
}
/*payment*/
.booking-info-text {
    font-size: 25px;
    font-weight: 600;
}
.booking-info-apartment-box {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 20px;
    padding: 20px 20px 18px 20px;
}
.booking-info-tenant-box {
    border: 1px solid #46B6AD;
    border-radius: 25px;
    padding: 20px;
}
.booking-tenant-box-title {
    font-size: 20px;
    font-weight: 500;
}
.booking-info-tenant-box-info {
    font-size: 18px;
}
.booking-info-tenant-box-info-title {
    color: rgba(47, 47, 47, .5);
    font-weight: 700;
    margin-bottom: 8px;
}
.booking-info-tenant-box-info-title.last {
    margin-bottom: 0;
}
.booking-info-tenant-box.payment {
    border-radius: 31px;
}
.booking-info-tenant-box-info-field {
  font-weight: 400;
    color: var(--secondary-color);
}
.payment-complete-button{
    border: 1px solid #2D2D2D;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 20px;
    transition: all .5s ease;
}
.payment-complete-button:hover{
    background-color: var(--main-color);
    color: white;
    border-color: transparent;
}
.payment_tenant_edit_button ,
.payment_guarantor_edit_button{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -3px;
    right: -3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    /*background-color: #46B6AD;*/
    cursor: pointer;
}
.payment_tenant_edit_button img,
.payment_guarantor_edit_button img{
    width: 100%;
    transition: all .5s ease;
}
.payment_tenant_edit_button:hover img,
.payment_guarantor_edit_button:hover img{
    filter: grayscale(1) brightness(40%);
    -webkit-filter: grayscale(1) brightness(40%);
}
 /*for id images*/
 .file-input-hidden {
     display: none;
 }
.upload-label {
    cursor: pointer;
    color: #656565;
    /*text-decoration: underline;*/
    font-size: 14px;
}
.upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.id-uploads-container{
    position: relative;
    display: flex;
    justify-content: right;
}
.step-big-title {
    /*margin-top: 110px;*/
    margin-top: 118px;
}
.booking-step {
    padding-top: 34px;
    padding-bottom: 38px;
    color: rgba(47, 47, 47, 30%);
}

.booking-step.back-step {
    cursor: pointer;
}
.booking-step.back-step:hover {
    background-color: rgba(70, 182, 173, .05);
}

.booking-step.active {
    background-color: rgba(70, 182, 173, .1);
    color: var(--main-color);
}
.booking-step.active > div > :nth-child(2) {
    font-size: 20px !important;
}
.booking-steps{
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin-bottom: 82px;
}
.apartment_rental-publish-expertise-section {
    padding-left: 7%;
    padding-right: 8.5%;
    /*margin-bottom: 130px;*/
    margin-bottom: 178px;
}
.booking-steps .first:after,
.booking-steps .second:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 50%;
    width: 1px;
    background-color: rgba(0, 0, 0, .2);
}
.booking-steps .second > div {
    padding-left: 29%;
}
.booking-steps .third > div{
    padding-left: 23.8%;
}
.booking-info-apartment-box-left {
    padding-right: 96px !important;
}
.booking-info-apartment-box.payments-box {
    padding: 24px 0 26px 0 !important;
}
.booking-info-apartment-box .box-px {
    padding-left: 28px;
    padding-right: 28px;
}
.payment-method-steps {
    background-color: rgba(244, 244, 244, .6);
    color: rgba(47, 47, 47, .5);
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(63, 63, 63, .5);
    transition:  all .5s ease;
}
.payment-method-steps:hover {
    background-color: rgba(70, 182, 173, .2);
}
.payment-method-steps input[type=radio] {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    border: 1px solid rgba(47, 47, 47, .4);
    background: transparent;
}
.payment-method-steps input[type=radio]:checked {
    border-color: transparent;
    background: var(--main-color);
}
.step-first-continue {
    border: 1px solid #2D2D2D;
    padding-top: 13px;
    padding-bottom: 13px;
    transition: all .5s ease;
    cursor: pointer;
    border-radius: 50px;
}
.step-first-continue:hover {
   border-color: transparent;
    color: white;
    background-color: var(--main-color);
}
.step-delete-icon {
    width: 10px;
    filter: grayscale(1) brightness(40%);
    -webkit-filter: grayscale(1) brightness(40%);
    transition: all .5s ease;
}
.delete-icon-parent:hover img {
    filter: none;
    -webkit-filter: none;
}
.delete-icon-parent{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    cursor: pointer;
}
.add-icon-parent {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    cursor: pointer;
    width: 17px;
}
.add-icon-koinoxrista {
    width: 17px;
    transition: all .5s ease;
    filter: grayscale(1) brightness(20%);
    -webkit-filter: grayscale(1) brightness(20%);
}
.add-icon-parent:hover .add-icon-koinoxrista {
    filter: none;
    -webkit-filter: none;
}
.login-inputs.modal-inputs {
    border-color: rgba(46, 48, 53, .5) !important;
}
.toggle-eye {
    position: absolute;
    right: 0;
    top: 0;
}
.toggle-eye:before {
    content: "";
    position: absolute;
    top: 11.5px;
    right: -0.5px;
    transform: rotate(45deg);
    height: 1px;
    width: 15px;
    background-color: rgba(46, 48, 53, .4);
    transition: width .5s ease;
}
.toggle-eye.active:before {
    width: 0;
}
.toggle-eye img{
    width: 15px;
}
.modal-phone-title {
    margin-left: -10px;
    margin-right: -10px;
}
.modal-phone {
    padding-top: 10px;
    padding-bottom: 10px;
}
.custom-form-submit.phone {
    border-color: rgba(45, 45, 45, .3);
    opacity: 1;
    transition: all .5s ease;
}
.custom-form-submit.phone.disabled {
   pointer-events: none;
    opacity: .3 !important;
}
.custom-form-submit.phone:not(.disabled):hover {
    border-color: transparent;
    opacity: 1;
}
.already-account > :first-child:hover {
    border-bottom: 1px solid rgba(47, 47, 47, .5);
    color: rgba(47, 47, 47, .5);
}
.already-account > :first-child:hover {
    border-bottom: 1px solid var(--main-color);
    color: var(--main-color);
    cursor: pointer;
}
.already-account > :first-child {
    color: rgba(47, 47, 47,  .5);
}
.already-account:hover > :first-child {
    color: var(--main-color);
}
.already-account:hover > :first-child > :first-child {
    color: rgba(47, 47, 47,  .7);
}
.already-account:hover > :first-child > :first-child {
    color: var(--main-color);
}
.cy-icon img{
    width: 46px;
}
.gr-icon img{
    width: 32px;
}
#country_dropdown select {
    background: none;
    outline: none !important;
    cursor: pointer;
    border: none;
}
#phone_input::-webkit-inner-spin-button,
#phone_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#phone_input {
    -moz-appearance: textfield;
}
.gr-icon-select,
.cy-icon-select {
    width: 27px;
}

/**
payment step 2
*/
#tenant_fields {
    z-index: 10;
}

#tenant_fields input,
#tenant_fields select,
#guarantor_fields input,
#guarantor_fields select,
.tenant-password-div input{
  border: none !important;
  border-bottom: 1px solid rgba(47, 47, 47, .5) !important;
  border-radius: 0 !important;
  font-size: 14px;
  color: rgba(0, 0, 0, .5);
  padding-left: 0 !important;
  height: auto !important;
  padding-bottom: 5px;
  transition:  all .5s ease;
}
#tenant_fields input.invalid-input,
#guarantor_fields input.invalid-input,
#tenant_fields select.invalid-input,
#guarantor_fields select.invalid-input,
.tenant-password-div input.invalid-input{
    border-color: #F70000 !important;
}
#guarantor_fields .phone-input {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
}
#tenant_fields input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

#tenant_fields input[type="date"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

#tenant_fields label:not(.upload-label):not(.genders-label),
#guarantor_fields label:not(.upload-label):not(.genders-label){
    /*margin-bottom: 10px !important;*/
    margin-bottom: 3px !important;
}
.labels-upload-front {
    position: absolute;
    right: 125px;
    bottom: -20px;
    cursor: pointer;
    color: #656565;
    font-size: 14px;
    min-width: 125px;
}
.labels-upload-back {
    position: absolute;
    right:0;
    min-width: 100px;
    bottom: -20px;
    cursor: pointer;
    color: #656565;
    font-size: 14px;
}
#tenant_fields input::placeholder,
#tenant_fields select::placeholder,
#guarantor_fields input::placeholder,
#guarantor_fields select::placeholder,
.tenant-password-div input::placeholder{
  font-size: 14px;
  color: rgba(0, 0, 0, .5);
  padding-left: 0 !important;
}
#tenant_fields .form-row,
#guarantor_fields .form-row {
    margin-bottom: 48px;
    position: relative;
}
.year-of-study-div {
    z-index: 1000;
}
#tenant_fields input[type=radio] {
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(47, 47, 47, .7) !important;
    background: transparent !important;
    transition: all .5s ease !important;
}
#tenant_fields input[type=radio]:checked {
    background: var(--main-color) !important;
    border-color: transparent !important;
}
#tenant_fields input[type=text][readonly] {
    background: none !important;
}
#tenant_fields input[type=email][readonly] {
    background: none !important;
}
#tenant_fields input[type=number][readonly] {
    background: none !important;
}
#tenant_fields .genders > :nth-child(2) {
    padding-left: 30px;
    padding-right: 30px;
}

#tenant_fields .genders-label{
   margin-bottom: 26px !important;
}

.inputs-below-text {
    position: absolute;
    bottom: -25px;
    right: 4px;
    color: rgba(47, 47, 47, .5);
    font-size: 14px;
    line-height: 100%;
}
.inputs-below-text-verified {
    color: #1CA508;
    font-size: 12px;
    line-height: 100%;
    margin-top: 10px;
}
.inputs-below-text-not-verified {
    color: #F70000;
    font-size: 12px;
    line-height: 100%;
    margin-top: 10px;
}
#personal_details_form,
#dashboard_personal_details_form{
    padding-left: 8.3%;
    padding-right: 36%;
}
.personal-details-title {
    padding-left: 8.3%;
}
.otp-verify-text {
    color: rgba(47, 47, 47, .5);
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid rgba(47, 47, 47, .5);
    cursor: pointer;
    transition: all .5s ease;
}
.otp-verify-text:hover {
    color: var(--main-color) !important;
    border-color: var(--main-color);
}
.absolute-info {
    position: absolute;
    left: 0;
    bottom: -26px;
    padding-left: 43px;
    padding-right: 43px;
}
#guarantor_fields {
    margin-top: 30px;
    padding-top: 42px;
}
#guarantor_fields:before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    right: -82%;
    /*width: 100vw;*/
    height: 1px;
    background-color: rgba(70, 182, 173, .6);
    z-index: -1;
}
#guarantor_phone_code_container {
    position: absolute;
    right: 0;
    top: 0;
}
#booking_user_details_button , #dashboard_booking_user_details_button  {
  border: 1px solid rgba(45, 45, 45);
    transition: all .5s ease;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 50px;
}
#booking_user_details_button:hover , #dashboard_booking_user_details_button:hover {
  border-color: transparent;
    background: var(--main-color);
    color: white;
}
.country-arrow:after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 5px;
    transform: rotate(225deg);
    /*width: 10px;*/
    width: 9px;
    /*height: 10px;*/
    height: 9px;
    border-top: 2px solid var(--secondary-color);
    border-left: 2px solid var(--secondary-color);
    transition: all .5s ease;
}
.country-arrow.active:after{
    transform: rotate(45deg);
}
.country-custom-main{
    border-radius: 40px;
    border: 1px solid #707070;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 100;
}
.cy-dropdown,
.gr-dropdown {
    padding-top: 9px;
    padding-bottom: 9px;
    transition: all .5s ease;
    cursor: pointer;
    color: var(--secondary-color) !important;
}
.cy-dropdown {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
.gr-dropdown {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.cy-dropdown:hover,
.gr-dropdown:hover {
    background-color: rgba(45, 45, 45, 5%);
}
.cy-dropdown img{
    width: 46px;
}
.gr-dropdown img{
    width: 32px;
}
.country-input-name.active {
    opacity: 0;
}
.country-input-name {
    background: transparent !important;
    pointer-events: none !important;
}
.phone-country-codes-main {
    border-radius: 40px;
    border: 1px solid #707070;
    background: white;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
}
.phone-country-codes-main.active {
    top: 0;
}
.phone-codes-dropdown {
    position: absolute;
    right: 4px;
    top: 2px;
    width: 89px;
    cursor: pointer;
}

.phone-codes-dropdown .arrow:after{
    content: "";
    position: absolute;
    top: 1px;
    right: 3px;
    transform: rotate(225deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--secondary-color);
    border-left: 2px solid var(--secondary-color);
    transition: all .5s ease;
}
.phone-codes-dropdown .arrow.active:after {
    transform: rotate(45deg);
}
.phone-codes-dropdown .cy img,
.phone-codes-dropdown .gr img,
.phone-codes-dropdown .gr-flag img,
.phone-codes-dropdown .cy-flag img {
    width: 26px;
}
.phone-flags {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    z-index: 100;
}
/*.dropdown-flag {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 1px;*/
/*    height: 1px;*/
/*    opacity: 0;*/
/*    z-index: -1;*/
/*    visibility: hidden;*/
/*}*/
.phone-input {
    position: absolute;
    left: 6px;
    top: 41%;
    transform: translateY(-50%);
    z-index: 100;
}
.phone-flags div {
    transition:  all .5s ease;
}
.phone-flags div:hover {
 background-color: var(--main-color);
    color: white;
}
#guarantor_phone.guarantor-phone {
    padding-left: 42px !important;
}
#guarantor_phone {
    background: none !important;
}
.phone-codes-dropdown.verified {
    pointer-events: none;
}
.year-of-study-dropdown {
    border: 1px solid #707070;
    border-radius: 22px;
    padding-right: 7px;
    position: absolute;
    left: 0;
    right: 0;
    /*top: 10px;*/
    top: 4px;
    background-color: white;
    z-index: 100;
}
.year-of-study-dropdown li {
    transition: all .5s ease;
    cursor: pointer;
    padding-left: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: rgba(47, 47, 47, .7);
}
.year-of-study-dropdown li:hover {
    background-color: rgba(70, 182, 173, .2);
}
.year-of-study-dropdown .scroll{
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #46b6ad  rgba(47, 47, 47, .15);
    padding-right: 7px;
}
.year-of-study-dropdown .scroll::-webkit-scrollbar-thumb {
    background: #46b6ad;
}
.year-of-study-dropdown .scroll::-webkit-scrollbar-track {
    background: rgba(47, 47, 47, .15);
}
.year-of-study-dropdown .scroll::-webkit-scrollbar {
   height: 90%;
}
.year-of-study-dropdown .scroll::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}
.year-study-toggle.arrow:after{
    content: "";
    position: absolute;
    top: 1px;
    right: 3px;
    transform: rotate(225deg);
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--secondary-color);
    border-left: 2px solid var(--secondary-color);
    transition: all .5s ease;
}
.year-study-toggle.arrow.active:after {
    transform: rotate(45deg);
}
.year-of-study {
    pointer-events: none;
}
.year-of-study.active {
    opacity: 0;
}
.payment-line {
    width: 100%;
    margin-bottom: 70px;
    margin-top: 30px;
}
.payment-line:before {
    content: "";
    position: absolute;
    left: -30%;
    right: -82%;
    background-color: rgba(70, 182, 173, .6);
    height: 1px;
    /*width: 100vw;*/
    top: 0;
    /*transform: translateX(-13vw);*/
}
#otp_sent_email_div {
    margin-right: -60px;
    margin-left: -60px;
}
.spam-message {
    max-width: 94%;
    margin: auto;
    margin-bottom: 50px !important;
}
.email-otp {
    margin-bottom: 3px;
}

/**
Payment step 3
*/

.payment-extra-px {
    padding-left: 9%;
    padding-right: 11%;
}
.info-cards-step {
    padding-right: 23%;
}
.booking-info-tenant-box.right-side {
    border-radius: 50px;
    padding: 10px 17px 10px 17px;
}
.online_payment {
    accent-color: var(--main-color);
    appearance: none;
}
.checked-input-span {
    display: block;
    width: 20px;
    height: 10px;
    padding-right: 10px;
}
.checked-input-span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--main-color);
}
.checked-input-span:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--main-color);
    top: 13px;
    left: -2px;
}
.online_payment:hover {
    outline: none;
    box-shadow: none;
}
.booking-info-apartment-box.right-side {
    padding: 27px 27px 27px 27px;
}
.final-card > :nth-last-child(2) {
    margin-bottom: 27px !important;
}
.sk-square-check.payment {
    margin-right: 5px;
    width: 10px !important;
    height: 10px !important;
}
.invalid-feedback.payment {
    position: absolute;
    right: 0;
    bottom: -20px;
    color: #F70000 !important;
}
.sk-square-check.payment:after {
    margin-left: -2px !important;
    margin-top: -5px !important;
    width: 4px !important;
    height: 8px !important;
    border-color: var(--main-color) !important;
}
.rent-payment {
    position: absolute;
    top: 50%;
    right: -21px;
    transition: all .5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 201;
    transform: translateY(-50%);
}
.rent-payment img {
    width: 15px;
    transition: all .5s ease;
}
.rent-payment:hover img{
   filter: grayscale(1) brightness(40%);
    -webkit-filter: grayscale(1) brightness(40%);
}
.rent-choose-price {
    position: absolute;
    top: 4px;
    right: -17px;
    background-color: white;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 6px 6px 14px 0px rgba(0,0,0,0.24);
    -webkit-box-shadow: 6px 6px 14px 0px rgba(0,0,0,0.24);
    -moz-box-shadow: 6px 6px 14px 0px rgba(0,0,0,0.24);
    transition: all .5s ease;
}
.rent-choose-price input[type=radio] {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(47, 47, 47, .4);
    background: transparent;
    transition: all .5s ease;
}

.rent-choose-price input[type=radio]:checked {
    background: var(--main-color);
    border-color: var(--main-color);
}
.rent-choose-price.active {
    opacity: 1;
    z-index: 200;
    visibility: visible;
    pointer-events: all;
}
/*.koinoxrista {*/
/*    padding-right: 5px;*/
/*}*/
.i-koinoxrista {
    width: 15px;
}
.payment-icon.viva img {
    width: 66px;
}
.payment-icon.master img {
    width: 56px;
}
.payment-icon.visa img {
    width: 40px;
}
.delete-icon-payment {
    position: absolute;
    right: -15px;
    top: 45%;
    transform: translateY(-50%);
    cursor: pointer;
}
.delete-icon-payment img {
    filter: grayscale(1) brightness(40%);
    -webkit-filter: brightness(1) brightness(40%);
    transition: all .5s ease;
}
.delete-icon-payment:hover img {
    filter: none;
    -webkit-filter: none;
}
.add-icon-payment {
    cursor: pointer;
}
.delete-icon-payment img{
    width: 10px;
}
.payment-last-step-section {
    margin-bottom: 192px;
}
/**
edit modal payment step 3
*/

.user-edit-modal {
    position: fixed;
    top: 30px;
    bottom: 0;
    right: -523px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all .5s ease;
    width: 523px;
}
.user-edit-modal.active {
    right: 0;
    z-index: 7000;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.modals-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
    cursor: pointer;
}
.modals-backdrop.active {
    z-index: 6000;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.tenant-edit-modal,
.guarantor-edit-modal{
    height: 100%;
    width: 100%;
    background-color: white;
    position: relative;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
}
.tenant-edit-modal-close-button,
.guarantor-edit-modal-close-button{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -19px;
    left: -18px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    z-index: 6500;
}
.tenant-edit-modal-close-button img,
.guarantor-edit-modal-close-button img{
    width: 12px;
    transition: all .5s ease;
}
.tenant-edit-modal-close-button:hover img,
.guarantor-edit-modal-close-button:hover img {
    filter: grayscale(1) brightness(0);
    -webkit-filter: grayscale(1) brightness(0);
}
.tenant-update-button-div,
.guarantor-update-button-div{
    position: sticky;
    bottom:0;
    left:0;
    width: 100%;
    height: 100px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 1);
    padding: 20px;
    text-align: center;
}
.tenant-update-button,
.guarantor-update-button{
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    padding: 15px;
    transition: all .5s ease;
}
.tenant-update-button:hover,
.guarantor-update-button:hover{
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}
.edit-personal-details-title {
    background-color: var(--main-color);
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 50px;
    width: 100%;
}
.tenant-edit-modal-body,
.guarantor-edit-modal-body {
    padding-left: 50px;
    padding-right: 50px;
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
}
.tenant-edit-modal:before,
.guarantor-edit-modal:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 91px;
    height: 31px;
    background: linear-gradient(to bottom, transparent, white);
    z-index: 100;
}
.tenant-edit-modal-body::-webkit-scrollbar-track {
    background: var(--main-color) !important;
}
.tenant-edit-modal-body {
    scrollbar-color: var(--main-color) !important;
}
.tenant-update-button-div,
.guarantor-update-button-div {
    padding-left: 50px;
    padding-right: 50px;
}
#tenant-payment-edit-form,
#guarantor-payment-edit-form {
    padding-top: 27px;
}
#tenant-payment-edit-form .form-row,
#guarantor-payment-edit-form .form-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#tenant-payment-edit-form input,
#tenant-payment-edit-form select,
#guarantor-payment-edit-form input,
#guarantor-payment-edit-form select {
    border: none !important;
    border-bottom: 1px solid rgba(47, 47, 47, .5) !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    padding-left: 0 !important;
    height: auto !important;
    padding-bottom: 5px;
    transition:  all .5s ease;
}
#tenant-payment-edit-form input.invalid-input,
#guarantor-payment-edit-form input.invalid-input,
#tenant-payment-edit-form select.invalid-input,
#guarantor-payment-edit-form select.invalid-input{
    border-color: #F70000 !important;
}
#tenant-payment-edit-form input::placeholder,
#tenant-payment-edit-form select::placeholder,
#guarantor-payment-edit-form input::placeholder,
#guarantor-payment-edit-form select::placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    padding-left: 0 !important;
}
#tenant-payment-edit-form .form-row,
#guarantor-payment-edit-form .form-row {
    margin-bottom: 40px;
    position: relative;
}
#tenant-payment-edit-form input[type=radio],
#guarantor-payment-edit-form input[type=radio] {
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(47, 47, 47, .7) !important;
    background: transparent !important;
    transition: all .5s ease !important;
}
#tenant-payment-edit-form input[type=radio]:checked,
#guarantor-payment-edit-form input[type=radio]:checked {
    background: var(--main-color) !important;
    border-color: transparent !important;
}
#tenant-payment-edit-form input[type=text][readonly],
#guarantor-payment-edit-form input[type=text][readonly],
#tenant-payment-edit-form input[type=email][readonly],
#guarantor-payment-edit-form input[type=email][readonly] {
    background: none !important;
}
#tenant-payment-edit-form .genders > :nth-child(2),
#guarantor-payment-edit-form .genders > :nth-child(2) {
    padding-left: 10px;
    padding-right: 15px;
}
/*#tenant-payment-edit-form .genders-label,*/
/*#guarantor-payment-edit-form .genders-label{*/
/*    margin-bottom: 26px !important;*/
/*}*/
#tenant-payment-edit-form label:not(.upload-label):not(.genders-label):not(.genders-label-main),
#guarantor-payment-edit-form label:not(.upload-label):not(.genders-label):not(.genders-label-main){
    margin-bottom: 4px !important;
}
#tenant-payment-edit-form .form-row label:not(.upload-label):not(.genders-label),
#guarantor-payment-edit-form .form-row label:not(.upload-label):not(.genders-label){
    font-size: 18px;
}
#tenant-payment-edit-form .verified-text,
#guarantor-payment-edit-form .verified-text {
    position: absolute;
    left: 5px;
    bottom: -20px;
    font-size: 12px;
    color: #1CA508;
}
#tenant-payment-edit-form .id-text,
#guarantor-payment-edit-form .id-text {
    position: absolute;
    right: 20px;
    bottom: -20px;
    font-size: 14px;
}
#tenant-payment-edit-form .upload-front,
#guarantor-payment-edit-form .upload-front {
    position: absolute;
    right: 140px;
    bottom: -15px;
    font-size: 14px;
    width: 130px;
}
#tenant-payment-edit-form .upload-back,
#guarantor-payment-edit-form .upload-back {
    position: absolute;
    right: 20px;
    bottom: -15px;
    font-size: 14px;
    width: 100px;
}
.thank-you-message {
    margin-top: 103px;
    margin-bottom: 195px;
}
.tank-you-message-line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, .2);
    margin-bottom: 30px;
    margin-top: 65px;
}

@media (min-width: 768px) {
    .apartmentrental-mission-image {
        padding-top: 150%;
    }
}

@media (max-width: 1850px) {
    .payment-extra-px {
        padding-left: 5%;
        padding-right: 7%;
    }
}

@media(max-width: 1650px) {
    .apartment_rental-publish-expertise-section {
        padding-left: 3%;
        padding-right: 4.5%;
    }
}

@media(max-width: 1499.98px) {
    .modal-phone-title {
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    #personal_details_form,
    #dashboard_personal_details_form{
        padding-right: 28%;
    }
    #guarantor_fields::before {
        left: -16%;
    }
}

@media(max-width: 1400px) {
    .booking-steps .third > div {
        padding-left: 16.8%;
    }
    .booking-steps .second > div {
        padding-left: 21%;
    }
}

@media(max-width: 1350px) {
    .apartment_rental-publish-expertise-section {
        padding-left: 0;
        padding-right: 0;
    }

        .payment-extra-px {
            padding-left: 0;
            padding-right: 0;
        }
}

@media(max-width: 1300px) {
    #guarantor_fields::before {
        left: -13%;
    }
}

@media(max-width: 1199.98px) {
    .booking-info-apartment-box-left {
        padding-right: 0 !important;
        margin-bottom: 20px;
    }
    .step-big-title {
        margin-top: 40px;
    }
    .booking-steps {
        margin-bottom: 33px;
    }
    .booking-info-apartment-box {
        padding: 14px 13px 16px 13px;
    }
    .booking-steps .third > div {
        padding-left: 0;
        text-align: center !important;
    }
    .booking-steps .second > div {
        padding-left: 0;
        text-align: center !important;
    }
    .apartment_rental-publish-expertise-section {
        margin-bottom: 100px;
    }

    #personal_details_form,
    .complete-dashboard-booky{
        padding-left: 51px;
        padding-right: 51px;
    }
    #dashboard_personal_details_form {
        padding-left: 0;
        padding-right: 0;
    }

    #guarantor_fields::before {
        left: -36px;
    }

    /*.payment-line::before {*/
    /*    left: -1px;*/
    /*    right: 0;*/
    /*    transform: translateX(-3vw);*/
    /*}*/
}
@media(max-width: 991px) {
    .tenant-password-div > div > :first-child {
        margin-bottom: 30px !important;
    }

    #guarantor_fields .phone-row.phone-dropdown-parent {
        /*margin-bottom: 65px !important;*/
        margin-bottom: 60px !important;
    }

    .phone-country-codes-main {
        top: 2px;
    }

    .checked-input-span:before {
        top: 5px;
    }

    .booking-step {
        padding-top: 10px;
        padding-bottom: 11px;
    }

    .booking-steps .first > div,
    .booking-steps .second > div,
    .booking-steps .third > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .booking-info-apartment-box.payments-box {
        padding: 14px 0 14px 0 !important;
    }

    .booking-info-apartment-box .box-px {
        padding-left: 13px;
        padding-right: 13px;
    }

    .payment-method-steps input[type="radio"] {
        width: 10px;
        height: 10px;
    }

    .delete-icon-parent {
        right: -11px;
    }

    .apartment_rental-publish-expertise-section {
        margin-bottom: 0;
    }
    .apartment_rental-publish-expertise-section.first-step {
          margin-bottom: 50px;
    }

    .custom-modal-body {
        width: 88%;
        padding-left: 140px;
        padding-right: 140px;

    }

    #personal_details_form,
    .complete-dashboard-booky{
        padding-left: 35px;
        padding-right: 35px;
    }
    #dashboard_personal_details_form {
        padding-left: 0;
        padding-right: 0;
    }
    .personal-details-title {
        padding-left: 35px;
    }
    #tenant_fields .form-row,
    #guarantor_fields .form-row {
        margin-bottom: 30px;
    }
    .absolute-info {
        padding-left: 6px;
        padding-right: 6px;
    }
    #guarantor_fields::before {
        left: -20px;
    }
    .payment-line {;
        margin-bottom: 38px;
        margin-top: 25px;
    }
    .tenant-log-out-pass-div {
        margin-bottom: 47px;
    }
    .info-cards-step {
        padding-right: 0;
    }
    .booking-tenant-box-title {
        position: relative;
    }
    .booking-tenant-box-title span:after{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(231deg);
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--secondary-color);
        border-left: 2px solid var(--secondary-color);
        right: 0;
        transition: all .5s ease;
        cursor: pointer;
    }
    .booking-tenant-box-title span.active:after{
        transform: rotate(45deg);
    }
    .booking-tenant-box-title span{
        position: absolute;
        top: 50%;
        right: 0;
    }
    .booking-tenant-box-title {
        cursor: pointer;
    }
    .booking-info-tenant-box-info {
        display: none;
        margin-top: 11px;
    }
    .booking-info-tenant-box-info.active {
        display: block;
    }
    .booking-info-tenant-box {
        border-color: #2D2D2D;
        transition: all .5s ease;
    }
    .booking-info-tenant-box.active {
        border-color: var(--main-color);
    }
    .payment_tenant_edit_button,
    .payment_guarantor_edit_button{
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        pointer-events: none;
        transition: all .5s ease;
    }
    .payment_tenant_edit_button.active,
    .payment_guarantor_edit_button.active{
        opacity: 1;
        z-index: 100;
        visibility: visible;
        pointer-events: all;
    }
    .booking-info-apartment-box {
        padding: 11px 10px 16px 10px;
    }
    .booking-info-tenant-box {
        padding: 13px 22px 13px 22px;
    }
    .booking-info-tenant-box-info-title {
        margin-bottom: 0;
    }
    .payment_tenant_edit_button,
    .payment_guarantor_edit_button {
        top: -7px;
        right: 3px;
        width: 21px;
        height: 21px;
    }
    .payment-icon.viva img {
        width: 43px;
    }
    .payment-icon.master img {
        width: 36px;
    }
    .payment-icon.visa img {
        width: 25px;
    }
    .booking-info-tenant-box.right-side {
        margin-top: 20px;
    }
    .booking-info-apartment-box.right-side {
        padding: 19px 20px 18px 14px;
    }
    .final-card > :nth-last-child(2) {
        margin-bottom: 18px !important;
    }
    .payment-last-step-section {
        margin-bottom: 45px;
    }
    .booking-info-tenant-box.right-side {
        border-color: var(--main-color);
    }
    .thank-you-message br {
        display: none;
    }
    .thank-you-message {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .tank-you-message-line {
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

@media(max-width: 767.98px) {

    .cy-dropdown, .gr-dropdown {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    #tenant_fields  #country-div {
        margin-bottom: 25px !important;
    }

    .country-custom-main {
        top: 4px;
    }


    .phone-code-tenant-div {
        top: 0;
        font-size: 12px;
    }
    #tenant_fields .tenant-phone-second-step .tenant-phone{
        padding-left: 25px !important;
    }

    .checked-input-span:before {
        top: 6px;
    }
    .checked-input-span {
        width: 0;
    }

    .custom-modal-body {
        /*width: 90%;*/
        width: 94%;
        padding-left: 50px;
        padding-right: 50px;
    }
    .modal-phone-title {
        margin-left: 0;
        margin-right: 0;
    }
    #personal_details_form,
    .complete-dashboard-booky{
        padding-left: 13px;
        padding-right: 13px;
    }
    #dashboard_personal_details_form {
        padding-left: 0;
        padding-right: 0;
    }
    .personal-details-title {
        padding-left: 15px;
    }
    #tenant_fields input::placeholder,
    #tenant_fields select::placeholder,
    #guarantor_fields input::placeholder,
    #guarantor_fields select::placeholder,
    #tenant_fields input,
    #tenant_fields select,
    #guarantor_fields input,
    #guarantor_fields select,
    #guarantor_fields .phone-input,
    .tenant-password-div input::placeholder{
        font-size: 12px;
    }
    #tenant_fields label:not(.upload-label):not(.genders-label),
    #guarantor_fields label:not(.upload-label):not(.genders-label),
    .tenant-password-div label{
        margin-bottom: 0 !important;
    }
    #tenant_fields input,
    #tenant_fields select,
    #guarantor_fields input,
    #guarantor_fields select,
    .tenant-password-div input{
        padding-bottom: 0 !important;
    }
    #tenant_fields .form-row,
    #guarantor_fields .form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .inputs-below-text {
        font-size: 12px;
        bottom: -19px;
        right: -2px;
        left: -1.5px;
    }
    #tenant_fields .form-row,
    #guarantor_fields .form-row {
        margin-bottom: 31px;
    }
    .tenant-password-div .row .form-row {
        margin-bottom: 15px;
    }
    .upload-label {
        font-size: 12px;
    }
    .labels-upload-front {
        bottom: -10px;
        font-size: 12px;
        right: 95px;
        /*width: 110px;*/
    }
    .labels-upload-back {
        right: 0;
        min-width: 90px;
        bottom: -10px;
        font-size: 12px;
    }
    #tenant_fields .genders-label {
        margin-bottom: 6px !important;
    }
    #tenant_fields > :first-child > :nth-child(n+4),
    #guarantor_fields > :nth-child(2) > :nth-child(n+4):not(:nth-child(6)):not(:nth-child(7)){
        margin-bottom: 15px !important;
    }
    #guarantor_fields .phone-row,
    #guarantor_fields .email-row{
        margin-bottom: 27px !important;
    }
    #tenant_fields .genders > :nth-child(2) {
        padding-left: 0;
        padding-right: 0;
    }
    .inputs-below-text-verified {
        margin-top: 5px;
    }
    #guarantor_fields::before {
        left: 2px;
    }
    #guarantor_fields {
        padding-top: 13px;
    }
    .absolute-info {
        padding-left: 5px;
        padding-right: 5px;
    }
    .inputs-below-text-not-verified {
        line-height: 100%;
        margin-top: 0;
        padding-top: 4px;
    }
    .absolute-info {
        bottom: -17px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .otp-verify-text {
        font-size: 12px;
    }
    .country-arrow:after {
        right: 10px;
        width: 7px;
        height: 7px;
    }
    .phone-codes-dropdown .arrow:after{
        right: 10px;
        width: 7px;
        height: 7px;
    }
    .phone-country-codes-main {
        top: 5px;
    }
    #guarantor_fields .phone-row.phone-dropdown-parent {
        /*margin-bottom: 65px !important;*/
        margin-bottom: 50px !important;
    }
    .year-study-toggle.arrow:after{
        right: 3px;
        width: 7px;
        height: 7px;
    }
    .spam-message {
        max-width: 100%;
        margin: auto;
        margin-bottom: 15px !important;
    }
    #otp_sent_email_div {
        margin-right: 0;
        margin-left: 0;
    }
    #tenant-payment-edit-form .form-row label:not(.upload-label):not(.genders-label),
    #guarantor-payment-edit-form .form-row label:not(.upload-label):not(.genders-label){
        font-size: 16px;
    }
}

@media(max-width: 575.98px) {

    .pass-err {
        position: absolute;
        color: #F70000;
        font-size: 10px;
        left: 5px;
        bottom: -22px;
    }

    .tenant-password-div > div > :first-child {
        margin-bottom: 25px !important;
    }

    .modal-country-arrow {
        width: 11px;
        top: 40%;
    }

    .custom-modal-body {
        padding-left: 11px;
        padding-right: 11px;
        border-radius: 10px;
    }
    .modal-small-text br {
        display: none;
    }
    .custom-form-submit {
        height: 44px;
    }
    .acc-pass-links > * {
        display: inline-block;
    }
    .toggle-eye {
        top: -17px;
    }
    .toggle-eye::before {
        top: 9.5px;
    }
    .cy-icon img{
        width: 35px;
    }
    .gr-icon img{
        width: 27px;
    }
    .modal-phone-title {
        text-align: left;
    }
    #country_dropdown select {
        height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #phone_input::placeholder {
        opacity: 1 !important;
    }
    .otp-input {
        width: 41px;
        height: 41px;
        font-size: 15px;
    }
    .payment-complete-button {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 14px;
    }

    .user-edit-modal {
        top: 30px;
        right: -287px;
        width: 287px;
    }
    #tenant-payment-edit-form .form-row,
    #guarantor-payment-edit-form .form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #tenant-payment-edit-form .col-12,
    #tenant-payment-edit-form .col-sm-12,
    #guarantor-payment-edit-form .col-12,
    #guarantor-payment-edit-form .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #tenant-payment-edit-form .form-row label:not(.upload-label):not(.genders-label),
    #guarantor-payment-edit-form .form-row label:not(.upload-label):not(.genders-label){
        font-size: 13px;
    }
    #tenant-payment-edit-form input::placeholder,
    #tenant-payment-edit-form select::placeholder,
    #guarantor-payment-edit-form input::placeholder,
    #guarantor-payment-edit-form select::placeholder{
        font-size: 12px;
        color: rgba(0, 0, 0, .5);
        padding-left: 0 !important;
    }
    #tenant-payment-edit-form input,
    #tenant-payment-edit-form select,
    #guarantor-payment-edit-form input,
    #guarantor-payment-edit-form select {
        font-size: 12px;
    }
    .tenant-edit-modal-body,
    .guarantor-edit-modal-body {
        padding-left: 14px;
        padding-right: 14px;
        width: 100%;
    }
    #tenant-payment-edit-form .id-text,
    #guarantor-payment-edit-form .id-text {
        right: -13px;
        bottom: -18px;
        font-size: 11px;
        left: -5px;
    }
    #tenant-payment-edit-form label:not(.upload-label):not(.genders-label):not(.genders-label-main),
    #guarantor-payment-edit-form label:not(.upload-label):not(.genders-label):not(.genders-label-main) {
        margin-bottom: 0 !important;
    }
    #tenant-payment-edit-form input,
    #tenant-payment-edit-form select,
    #guarantor-payment-edit-form input,
    #guarantor-payment-edit-form select {
        padding-bottom: 0;
    }
    #tenant-payment-edit-form .form-row:not(.has-label-text),
    #guarantor-payment-edit-form .form-row:not(.has-label-text){
        margin-bottom: 18px;
    }
    #tenant-payment-edit-form .form-row.has-label-text,
    #guarantor-payment-edit-form .form-row.has-label-text{
        margin-bottom: 30px !important;
    }
    #tenant-payment-edit-form .upload-back,
    #guarantor-payment-edit-form .upload-back {
        right: 0;
        bottom: -10px;
        font-size: 11px;
        width: 88px;
    }
    #tenant-payment-edit-form .upload-front,
    #guarantor-payment-edit-form .upload-front {
        right: 100px;
        bottom: -10px;
        font-size: 11px;
        width: 109px;
    }
    .edit-personal-details-title {
        padding-top: 5px;
        padding-bottom: 5px;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        padding-left: 16px;
    }
    #tenant-payment-edit-form,
    #guarantor-payment-edit-for {
        padding-top: 22px;
    }
    .tenant-edit-modal-close-button img,
    .guarantor-edit-modal-close-button img{
        width: 8px;
        transition: all .5s ease;
    }
    .tenant-edit-modal-close-button,
    .guarantor-edit-modal-close-button {
        width: 32px;
        height: 32px;
    }
    .tenant-update-button-div,
    .guarantor-update-button-div {
        padding-left: 14px;
        padding-right: 14px;
        height: auto;
        padding: 10px;
    }
    .tenant-update-button {
        padding: 13px;
    }
    #tenant-payment-edit-form .verified-text,
    #guarantor-payment-edit-form .verified-text {
        left: 0;
    }
}

@media (max-width: 439px) {
    .sk-square-check.payment.last {
        position: relative;
        top: -8px;
    }
    .sk-checkbox.payment.last {
        text-align: left;
    }
    .invalid-feedback.payment {
        bottom: -33px;
        text-align: left !important;
    }
}

/*Responsive - Mobile First*/
/* md */