.join-flow {
    height: 100vh;
}
.join-flow .join-flow-inside {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-flow .join-flow-inside .join-flow-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    width: 410px;
}
.join-flow .join-flow-inside .join-flow-content .join-flow-form {
max-width: 410px;
}
.join-flow .join-flow-inside .join-flow-content h2.title {
    color:  #1E1F22;
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    margin: 20px 0 30px;
}
.join-flow .join-flow-inside .join-flow-content .join-flow-inside-img{
display: flex;
justify-content: center;
}
.join-flow .join-flow-inside .join-flow-content .form-group {
    margin-bottom: 20px;
    margin-left: 12px;
    margin-right: 12px;
}

.join-flow .join-flow-inside .join-flow-content .option,
.join-flow .join-flow-inside .join-flow-content .option2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    cursor: pointer;
    text-align: left;
    width: 100%;
    height: 80px;
}
.join-flow .join-flow-inside .join-flow-content .option .option-wrap,
.join-flow .join-flow-inside .join-flow-content .option2 .option-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 7px;
    cursor: pointer;
    width: 100%;
    height: 78px;
}
.join-flow .join-flow-inside .join-flow-content .option.selected .option-wrap,
.join-flow .join-flow-inside .join-flow-content .option2.selected .option-wrap {
    background: #FFF;
    width: 100%;
    height: 100%;
}
.join-flow .join-flow-inside .join-flow-content .option.selected,
.join-flow .join-flow-inside .join-flow-content .option2.selected {
    background: linear-gradient(90deg, #F5286E 0%, #FC6D43 100%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    border: 0;
}
/* .join-flow .join-flow-inside .join-flow-content .option:hover {
    border-color: #ff4757;
    background-color: #fef7f7;
} */

.join-flow .join-flow-inside .join-flow-content .option-text {
    color: #1E1F22;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.join-flow .join-flow-inside .join-flow-content .radio-button,
.join-flow .join-flow-inside .join-flow-content .radio-button2 {
    width: 16px;
    height: 16px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.join-flow .join-flow-inside .join-flow-content .radio-button.selected,
.join-flow .join-flow-inside .join-flow-content .radio-button2.selected {
    border-color: #1E1F22;
}

.join-flow .join-flow-inside .join-flow-content .radio-button.selected::after,
.join-flow .join-flow-inside .join-flow-content .radio-button2.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #1E1F22;
    border-radius: 50%;
}

.join-flow .join-flow-inside .join-flow-content .continue-btn {
    width: 100%;
    height: 48px;
    border: none;
    font-family: Montserrat !important;
    font-style: normal;
    font-weight: bold !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-align: center;
    color: #ffffff !important;
    border-radius: 6px !important;
    background: linear-gradient(90deg, #f5286e 0%, #fc6d43 100%) !important;
    box-shadow: 0px 5px 15px rgba(245, 40, 110, 0.35) !important;
    opacity: 0.2;
    cursor: pointer;
    outline: none;
    border: 0;
    max-width: 385px;
    margin: 0 auto;
}
.join-flow .join-flow-inside .join-flow-content .continue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.join-flow .join-flow-inside .join-flow-content .un-login-policy-member-container {
    margin: 20px auto;
}
.join-flow .join-flow-inside .join-flow-content .un-login-policy-member-container .un-login-member {
    color: #1E1F22;
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 20px;
}
.join-flow .join-flow-inside .join-flow-content .un-login-policy-member-container .un-login-policy {
    color: #78818B;
    text-align: center;
    font-family: Lato;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; 
}
.join-flow .join-flow-inside .join-flow-content .un-login-policy-member-container .un-login-member a {
    font-weight: 400 !important;
    background-image: linear-gradient(90deg, #f5286e 0%, #fc6d43 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-left: 6px;
}

.join-flow .join-flow-inside .join-flow-content input[type="radio"] {
    display: none;
}
.city-guide-user-wrapper {
    display: none;
}
.city-guide-user-wrapper .city-guide-user {
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    margin-bottom: 30px;
    margin-left: 12px;
    margin-right: 12px;
}
.city-guide-user-wrapper .city-guide-user p {
    color: #1E1F22;
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}
.city-guide-user-wrapper .city-guide-user .btn-wrap .btn {
    padding: 0;
    
}
.city-guide-user-wrapper .city-guide-user .user-guide-text {
    padding: 30px 50px;
}
.city-guide-user-wrapper .btn-go-back {
    background-image: linear-gradient(90deg, #f5286e 0%, #fc6d43 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    border-bottom: 1px solid #f84959;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 000;
    padding: 0;
}
#login-id-screen, .un-join-input-container {
    display: none;
}
.join-flow .join-flow-inside .un-login-form {
padding-top: 0;
}
#un-email2.d-block {
    display: block !important;
}
.un-login-pass-container  img.checked-tick
 {
    width: auto;
    height: auto;
}
.form-step .un-login-form .un-login-input-container .un-login-submit-btn

 {
    width: 100%;
}
.un-login-input-container input:not(input[type="checkbox"]) {
    box-shadow: none !important;
}
.city-guide-user-wrapper .city-guide-user .user-guide-text .btn-wrap.flex {
    justify-content: space-evenly;
}
.form-step  .un-input.input-card {
    max-width: 100%;
    width: 100%;
}
.pass-hidden2 .eyeopen {
    display: none;
  }
  .pass-visible2 .eyeclose {
    display: none;
  }
  .form-step .un-login-input-container .un-login-email-container.un-input.input-card {
margin-bottom: 15px;
  }
  .form-step .un-login-submit-btn {
    max-width: 100%;
  }
  .un-login-policy a, .join-flow .join-flow-inside .join-flow-content .un-login-policy-member-container .un-login-member a {
    border-bottom: 1px solid #f94b58;
  }
  .un-login-input-container .input-card input:read-only {
    background-color: #efefef !important;
  }
  #joinFlowForm .alert-msg.loading, #joinFlowForm .instruction.loading {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    text-align: left;
    color: rgba(120, 129, 139, 1) !important;
    font-style: normal;
}
#joinFlowForm .alert-msg, #joinFlowForm .instruction {
    margin-bottom: 12px;
}
.page-template-wp-register footer.un-footer {
    display: none !important;
}
.pass-visible2 .eyeopen {
    display: block !important;
}
.pass-hidden2 .eyeopen {
    display: none !important;
}
.un-back-btn {
    opacity: 0.2;
}
.un-back-btn a span.icon {
    margin-right: 8px;
}
.un-back-btn a span.back-text {
    color: #1E1F22;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.form-step#step2, .form-step#step3 {
    margin: 0 12px;
}
@media screen and (max-width: 767px) {
    .join-flow .join-flow-inside .join-flow-content .form-group {
        margin-left: 0px;
        margin-right: 0px;
    }
    .join-flow .join-flow-inside .join-flow-content .continue-btn {
        max-width: 100%;
    }
    .city-guide-user-wrapper .city-guide-user {
        margin-left: 0;
        margin-right: 0;
    }
    .form-step#step2, .form-step#step3 {
        margin: 0;
    }
}