.step__1, .step__2, .step__3
,.step__4,  .step__6
, .step__7,  .step__8, .step__9
, .step__10, .step__11, .step__12, 
.step__13, .step__14, .step__15,
 .step__16, .step__17, .step__18, 
 .step__19, .step__20, .step__21,
 .step__22, .step__23, .step__24,
 .step__25, .new_step__1, .step__dob, .step__gender  {
	display:none;
}
.woocommerce-Button{
	cursor:pointer;
}
.btn-wrp a, .btn-wrp button {
    color: var(--white-color) !important;
}
#swal2-html-container a {
    color: var(--primary-color);
    text-decoration: none;
}
 
.transfer-prescription-step .btn-wrp a, .transfer-prescription-step .btn-wrp button {
    padding: 14px 22px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-img-wrp .item-delete, .circle .item-delete1 {
   right: 15px;
    top: 15px;
}
.circle {
    position: relative;
}
/*Progress Bar*/
.upload-prescription-inner-wrp .btn-wrp a, .upload-prescription-inner-wrp .btn-wrp button {
    padding: 14px 0;
    width: fit-content;
    display: flex;
    justify-content: center;
    width: 100%;
}
.pb-step-active::after {
    width: 100% !important;
	
}
.login-btn-2  {
    border: none !important;
}
.new-survey-wrp h3 {
    display: flex;
    gap: 20px;
}
.step_8 .continue-btn-wrp a span i {
    transform: rotate(45deg);
    position: relative;
    left: 5px;
}
.step_8 .ortakebtn {
    color: var(--accent-color) !important;
} 
.upload-prescription-step-5 {
    position: relative;
}
.option-btn:hover {
    background: var(--primary-color) !important;
}
.survey-top-wrp ul li {
    font-size: 18px;
    font-weight: 500;
}
.option-checkbox {
    width: 20px;
    height: 20px;
    margin: 0px 10px 0 0;
    cursor: pointer;
    position: relative;
    right: 4px;
    top: 3px;
    -webkit-appearance: none !important;
    border: 2px solid #000 !important;
    border-radius: 50%;
    outline: none !important;
	position: relative;
}
.option-checkbox:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.transfer-step-3 .medication-name-wrp .option-checkbox {
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    position: relative;
    right: 0px;
    top: 0px;
    border: none !important;
    border-radius: 50%;
    outline: none !important;
    -webkit-appearance: none !important;
	accent-color: var(--primary-color);
}
.transfer-step-3 .medication-name-wrp .option-checkbox:checked::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--black-color);
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'FontAwesome';
    color: var(--white-color);
    text-align: center;
    font-size: 15px;
    background-image: url(" data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\ <path d='M20.285 6.709l-11.04 11.04-5.53-5.53 1.415-1.414 4.115 4.114 9.626-9.626z'/>\ </svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
.radio-icon input {
    top: 3px;
}
.radio-btn.gender {
    width: 32px;
    height: 20px;
    cursor: pointer;
    right: 4px;
    top: 3px;
    -webkit-appearance: none !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    outline: none !important;
    position: relative;
}
.radio-btn.gender:checked::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.step-block {
    padding: 40px 30px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 4px #00000057;
    border-radius: 40px;
	font-family: var(--primary-font);
}
.agree-terms-box .option-checkbox {
    accent-color: var(--dark-green);
}
.province-wrp {
    margin: 25px 0 0;
}
.resent-txt {
    font-weight: 400 !important;
}
.step_9 .fixed-cost-txt {
    margin: 10px 0 !important;
}
.survey-top-inner-wrp {
    background:#e2ebe6;
    padding:10px 20px !important; 
}
.survey-top-inner-wrp li:nth-child(2) {
    float: right;
}
.skip-btn.secondary-btn {
    width: fit-content;
}
 
.transfer-input-wrp .floating-label {
    font-size: 18px;
	font-weight: 600;
}
.form-box label {
    font-weight: 600;
    margin: 0 0 12px;
    font-size: 18px;
}
.form-box label span {
    color: red;
}
.form-box input {
    width: 100%;
    outline: none;
    border-radius: 10px;
    border-color: #B6B6B6;
}
.form-password-box {
    position: relative;
}
.terms-txt a, .login-txt a {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
	transition:0.6s;
} 
.terms-txt a:hover, .login-txt a:hover{
	color:var(--secondary-color) !important;
}
.item-alternative {
    color: var(--black-color);
}
.province-txt {
    font-size: 18px;
    margin-bottom: 10px;
}
.phone-wrp .alert-note {
    margin: 0;
	    color: #818181;
    font-weight: 300;
    font-size: 14px;
}
 
.msp-number-step .secondary-btn {
    padding: 0 0 7px !important;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
	transition:0.6s;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
}
.msp-number-step .secondary-btn:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.step__4 .secondary-btn {
    width: min(100%, 220px);
}
 
.product-list .product-item span:nth-child(2) {
    width: 100%;
}
 
.roboto-p-grey {
	font-weight: 400 !important;
	color: var(--gray) !important;
	font-size: 16px;
	font-family: var(--roboto) !important;
	    font-style: normal;
}
.new-survey-content-wrp h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--primary-color);
}
.new-survey-content-wrp h4 span:first-child {
    width: 50px;
    height: 50px;
    display: flex;
    background: var(--accent-color);
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    color: var(--black-color);
	    flex-shrink: 0;
}
.btn-wrp {
    margin: 40px 0 0;
}
textarea {
    padding: 10px;
    font-family: var(--primary-font);
    border-radius: 10px;
    resize: none;
    border-color: var(--black-color);
    color: var(--black-color);
}
textarea::placeholder {
    color: var(--black-color);
}
 
.step_1, .step_2, .step__3 ,
.step__4, .step__5, .new-step-5, .step_7, .step_8, .step_9,
 .step_10, .step_11, .step_12, .step_14, .step__4-login
 , .step_13, .phonenumber-step
  , .otp-step, .transfer-step-login,  .transfer-new-step-5, 
  .msp-number-step, .rs_forgot-password, .tp_forgot-password, .up_forgot-password { 
    display: none;
}
.forgot-password, .login-again-wrp {
    text-align: center;
    margin: 15px 0 0;
}
.login-again-wrp a {
    text-decoration: none;
    color: var(--primary-color);
	transition:0.5s;
}
.login-again-wrp a:hover {
    color: var(--secondary-color);
}
.forgot-password a:hover {
    color: var(--primary-color);
}
.forgot-password a {
    text-decoration: none;
    color: var(--black-color);
	transition:0.5s;
}
.lost_reset_password p {
    font-size: 16px !important;
    font-weight: 400 !important;
}
.woocommerce-form-row--first.form-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.woocommerce-form-row--first.form-row input {
    padding: 12px 15px;
    border-radius: 10px;
    border-color: #B6B6B6;
}
.shiptodifferentaddress {
    accent-color: var(--primary-color);
}
/*Select Medication*/
.select-medication-wrp h4 {
    font-size: 20px;
    margin: 0 0 40px;
}
.codeverify input {
	width:100% !important;
    min-height: 60px !important;text-align: center;
}
 .survey-wrp.otp-verification h4 {
    margin: 0 0 24px;
}
.survey-wrp.otp-verification.new-survey-wrp p {
    font-size: 16px;
    font-family: var(--roboto) !important;
    font-weight: 400
}
.otp-verification .mobilenumber {
    font-weight: 600;
}
.codeverify.survey-form {
    text-align: center;
    margin: 10px 0 !important;
    display: flex;
    gap: 10px;
}
.activeotpfield {
    opacity: 1 !important;
}
.step-6 .btn_sec {
    margin-top: 0;
}
.step-6 #nextBtn {
    margin: 0 !important;
}
.resend a {
    color: var(--primary-color) !important;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 7px;
}
.survey-wrp.otp-verification p {
    font-weight: 500;
    font-size: 18px !important;
}
.resend {
    text-align: center;
    margin: 35px 0 0;
	color: var(--secondary-color);
}
.resent-txt:hover {
    color: var(--black-color) !important;
    transition: 0.5s;
	border-color:var(--black-color);
}
.step-6 #nextBtn {
    background: #54b3b3 !important;
    border-radius: 10px !important;
    padding: 15px !important;
}
.upload-prescription-step-1, .upload-prescription-step-login,  
.upload-prescription-step-2, .upload-prescription-step-3,
.upload-prescription-step-4, .upload-prescription-step-5,
.upload-prescription-step-6   {
    display: none;
}
.resend a {
    text-decoration: none;
}
.upload-photo-sec h4 {
    color: var(--primary-color);
}
 
.upload-prescription-step-5 .common-btn-wrp {
    justify-content: center;
}
.upload-prescription-inner-wrp {
    width: min(100%, 600px);
    margin: 0 auto;
}
.transfer-prescription-step .transfer-step-user-detials .new-survey-wrp {
    padding: 30px 20px 0 !important;
}
.swal2-cancel.swal2-styled.swal2-default-outline {
    color: #fff !important;
    border: none !important;
    padding: 8px !important;
}
/*Start Survey*/
 
.fixed-cost-txt {
    width: 100% !important;
    text-align: center;
}
.hairloss-start-survey-wrp h2 {
    font-weight: 400;
    margin-bottom: 20px;
}
.hairloss-start-survey-wrp p {
    font-weight: 400;
    color: var(--gray);
 
}
.hairloss-start-survey-wrp {
    display: flex;
    flex-direction: column;
    padding: 40px;
    transition: 0.5s;
    border: 0;
    background: #FAFAFA;
    border-radius: 20px;
    gap: 100px;
}
.survey-start-img-wrp img {
    width: min(100%,900px);
}
.hairloss-survey-start {
    margin: 0 0 5em;
}
.transfer-prescription-step .survey-wrp {
    padding: 20px 0;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0 20px;
}
.stepper .active img {
    filter: brightness(0.1);
}
.stepper-prev-wrp {
    margin:30px 0 0;
    text-align: center;
}
.stepper-prev-wrp a {
    text-decoration: none;
    color: #818181;
	transition:0.5s;
}
.stepper-prev-wrp a:hover {
    color: var(--primary-color);
}
.survey-top-wrp h4, .survey-top-wrp p {
    text-align: center;
}
.survey-top-wrp h4 {
    justify-content: center;
}
.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
}

.step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 24px;
	left: 50%;
	width: 50%;
	height: 2px;
	background: #e5e5e5;
}

.active:not(:last-child)::after {
    background: var(--primary-color);
}
.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #ddd;
}
.step-circle {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 600;
	color: #B0B0B0;
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
}

.step.active .step-circle {
    background: #F5EFE1;
    color: #ffffff;
}
.survey-top-wrp p {
    margin: 0;
}
.step-label {
	margin-top: 6px;
	font-size: 14px;
	color: #B0B0B0;
	text-align: center;
	font-family: var(--primary-font);
	white-space: nowrap;
}

.step.active .step-label {
	color: var(--primary-color);
}
.step-circle img {
    width: 16px;
    position: relative;
    top: -2px;
}

 



.step_8 .continue-btn-wrp li {
    margin: 25px auto 0 !important;
    text-align: center;
    width: min(100%, 250px);
}
.new-suvey-main-wrp {
    width: min(100%,600px);
    margin:0 auto 0;
}
.button-activated:hover {
    background: var(--primary-color) !important;
}
.password-icon-wrp {
    position: absolute;
    right: 10px;
    top: 10px;
}
.password-box {
    position: relative;
}
.password-show {
    position: absolute;
    display: none;
	right:1px;
}
.password-icon-wrp span {
    cursor: pointer;
	transition:0.5s;
}
.password-icon-wrp span:hover {
    color: var(--dark-green);
}
.product-options-wrp span input,
 .new-survey-content-wrp ul li input, .step__4 .option-checkbox, .product-item span input {
    border: none;
    outline: none;
}
.question-8, .leave-on-doctor{
	display:none;
} 
.question-1, .question-2, .question-3 {
    flex-direction: column;
}
.step_10 .continue-btn a, .step_11 .continue-btn a {
    background: #000 !important;
	cursor:pointer !important;
}
.step__5 .survey-form-wrp h3 {
    margin-bottom: 20px;
}
.radio-btn {
    accent-color: #000;
}
.instruction-wrp ul {
        margin: 0;
    padding-left: 0;
}
.fullname-wrp h4 {
    font-size: 20px;
} 
.nickname-txt {
    color: red;
}
.fullname-wrp p {
    font-size: 15px;
    margin:15px 0 30px;
}
 
.input-wrp {
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid #bbb;
}
.birth-wrp p {
    display: flex;
    flex-direction: column;
}
.form-box.survey-form-email-box {
    margin: 0 0 20px;
}
.new-survey-content-wrp p {
    font-weight: 500;
    font-size: 14px;
}
.birth-wrp span input {
    padding: 14px 10px;
    width: min(100%,150px);
}

.birth-wrp span {
    font-size: 20px;
}
.birth-wrp {
    display: flex;
}
 
.survey-form-email-box input {
    margin-bottom: 0 !important;
    padding: 10px;
    width: 100%;
}
.new-survey-content-wrp ul li a span:nth-child(1) {
    display: block;
    margin-right: 12px;
}
.login-txt {
    text-align: center;
    font-size: 18px;
    margin: 20px 0 0;
    font-weight: 400;
}
.agree-terms-box {
    align-items: center;
    margin: 30px 0 0;
    display: flex;
    justify-content: center;
}
.login-txt a {
    text-decoration: none;
    color: var(--dark-green);
    font-weight: 400;
}
.highlight-txt {
    color: var(--dark-green) !important;
    text-decoration: none;
	transition:0.5s;
}
.step_list {
    height: 80px;
    display: none;
    margin: 10px 0 0;
}
.highlight-txt:hover{
	color:var(--green);
}
.new-survey-content-wrp {
    margin: 0 0 1em;
}
.agree-terms-box span {
    font-size: 18px;
}
 
.new-survey-content-wrp ul li a {
    display: flex !important;
    align-items: center;
}
 .percentage-bar1 {
    display: flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: conic-gradient(#000000 var(--progress), #b5b5b5 0deg);
    font-size: 0;
    margin-right: 5px;
}
.percentage-bar1::after {
    content: attr(data-progress) '%';
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 4px;
    border-radius: 50%;
    background: white;
    font-size: 0;
    text-align: center;
}
 
.new-suvey-main-wrp .btn-wrp .primary-btn {
    width: 100%;
    justify-content: center;
} 
.nothing-txt {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--black) !important;
    font-weight: 500;
    font-family: var(--roboto);
}
 .selected-product-wrp h5 {
    margin: 15px 0 20px;
	    font-size: 20px;
}
.msp-select-province {
    width: 100% !important;
    padding: 10px !important;
}
.province-wrp {
    margin: 0 0 20px;
}
.loader_2, .loader {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 30px 0 0;
	width:100% !important;
}
.loader_2 img, .loader img {
    width: 20px;
}




/*Thank you*/
.calender-icon-wrp {
    text-align: center;
}
.close-survey-wrp {
    text-align: center;
}
.thank-you-cont-wrp {
    margin: 40px 0;
}
.close-survey-wrp a {
    text-align: center;
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding-bottom: 5px;
	transition:0.5s;
}
.close-survey-wrp a:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.thank-you-wrp {
    padding: 0 30px;
}

/*Transfer Prescription*/
.transfer-prescription-step {
    width: min(100%,600px);
    margin: 0 auto;
}
.transfer-step-2 .continue-btn a:hover {
    background: var(--primary-color) !important;
}
.transfer-prescription-step .new-survey-content-wrp {
    margin: 3em 0 15px;
}
.transfer-step-1, .transfer-step-user-detials, .transfer-step-create-account, .transfer-step-2, .transfer-step-3, .transfer-step-4{
	display:none;
}
.transfer-preview-wrp p {
    font-size: 16px;
}
.upguys-title {
    padding-bottom: 12px;
    border-bottom: 2px solid #008671;
}
.transfer-preview-wrp{
    box-shadow: 0px 0px 6px #bbbbbb87;
    padding: 20px;
    border-width: 10px;
    border-top: 8px solid var(--primary-color);
    
}

.address-txt, .phone-txt,  .name-txt {
        color: var(--dark-green) !important;
   
    font-weight: 600 !important;
}
 
.address-txt span, .phone-txt span, .name-txt span  {
    color: var(--black);
}
 
.medication-name-wrp {
    margin: 20px 0;
}
.medication-name-wrp select {
    width: 100%;
    padding: 10px;
}
.medication-name-wrp p {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 500;
}
.medication-name-wrp p {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 500;
    color: var(--dark-green);
}
.new-survey-content-wrp ul li {
    position: relative;
    margin: 0 25px;
}
.checkbox-icon {
    position: absolute;
    right: 15px;
}
.transfer-step-3 .new-survey-content-wrp ul {
    margin: 0;
}
.transfer-thank-you img {
    width: min(100%,100px);
}
.transfer-thank-you {
    text-align: center;
}
.transfer-thank-you h4 {
    margin: 20px 0 10px;
    font-size: 30px;
    color: var(--primary-color);
	    justify-content: center;
}
.transfer-prescription-step .new-survey-content-wrp h2 {
    font-size: 30px;
    font-weight: 400 !important;
}
.transfer-prescription-step .survey-wrp.otp-verification p {
     font-weight: 500 !important;
    font-size: 17px !important;
}
.transfer-prescription-step .new-survey-wrp {
    padding:0 20px;
}
.transfer-prescription-step .new-survey-content-wrp p {
        margin: 5px 0 30px;
    font-weight: 400;
    color: var(--gray);
    font-size: 16px;
}
.transfer-thank-you p {
    font-size: 20px;
    color: var(--dark-green);
    font-weight: 400;
}
.error-box {
    padding: 10px 10px;
    font-style: italic;
    font-size: 12px;
    display: none;
    background: red;
    color: #fff;
}
.error-box p {
    margin: 0;
}
.swal2-confirm {
	background: var(--primary-color) !important;
}
.swal2-container button {
    padding: 10px 28px;
    font-size: 20px !important;
	outline:none !important;
	border-radius:10px !important;
	transition:0.5s;
	font-family: var(--primary-font);
    font-weight: 400;
}
#up_Bar{
	background:var(--primary-color);
}
.swal2-confirm:hover {
    background: var(--secondary-color) !important;
}
.swal2-cancel:hover {
	background:var(--primary-color) !important;
}
.swal2-confirm:focus {
    box-shadow: none !important;;
}
#swal2-title {
    color: var(--black-color);
}
#swal2-html-container {
    color: var(--black-color);
    font-weight: 500;
}

/*Step 05*/
.step__5 .transfer-input-wrp .floating-label {
    top: 16px;
}
 
.step__5 .form-box {
    margin: 25px 0 !important;
}
 
[tooltip] {
  position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
.active-tolltip[tooltip]:hover::before,
.active-tolltip[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
.select-day, .select-month, .select-year {
    padding: 15px 20px;
    border: 1px solid #ececec;
    border-radius: 10px;
}
.survey-inner-box {
    display: flex;
    flex-direction: column;
}
.survey-form-title-wrp h5 {
    font-size: 20px;
    width: min(100%,400px);
    margin-bottom: 1em;
    font-weight: 400;
}
.otp[type=number]::-webkit-inner-spin-button, 
.otp[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.city-box {
    position: relative;
    top: 5px;
}
.survey-form-title-wrp:not(:first-child) {
    margin: 40px 0 0;
}
.survey-form-title-wrp p, .birth-wrp p, .phone-wrp p {
    font-size: 15px !important;
    font-weight: 400;
}
.survey-form-title-wrp h4 {
    font-size: 20px;
    font-weight: 600;
}
.survey-form input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #B6B6B6;
}

.survey-form {
    margin: 20px 0 0;
}
.form-title {
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 20px;
}
.survey-inner-box label {
    margin-bottom: 14px;
    font-weight: 600;
}
.survey-form input::placeholder {
    font-weight: 400;
    font-size: 20px;
    color: #B6B6B6;
}
.form-gender-wrp {
    display: flex;
    width: min(70%);
    align-items: center;
    padding: 15px 5px 10px;
    border-radius: 15px;
}
.form-gender-wrp span {
    width: min(100%,50px);
}
.form-gender-wrp span input {
    margin: 0 !important;
    height: 20px;
}
.form-gender-wrp span label {
    margin-left: 5px;
    font-size: 18px;
    vertical-align: top;
    font-weight: 500;
}
.birth-wrp {
    display: flex;
    flex-direction: column;
	padding-bottom: 25px;
}
.survey-form-select, .main-select-wrp select {
	 width: 100%;
    padding: 15px 15px;
    border-radius: 12px;
    appearance: none;  
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 20px !important;
    cursor: pointer;
}

.survey-inner-box .floating-label {
    margin-bottom: 5px;
    font-size: 18px;
}
.alert-note {
    color: red;
    font-size: 15px;
}
.phone-wrp p {
    margin-bottom: 20px;
}
#phoneNumber {
    margin-bottom: 10px;
}
.final-note {
    margin: 15px 0 0;
	    text-align: center;
    font-weight: 400;
}
.agree-wrp {
    display: flex;
	    justify-content: center;
}
.agree-wrp span h5 {
    font-size: 18px;
    margin: 5px 5px 0;
    font-weight: 500;
    color: #b2612e;
}
.agree-wrp {
    margin: 20px 0 0;
}
.agree-wrp span:nth-child(1) {
    width: 50px;
}
#agree-radio-btn {
        height: 25px;
    position: relative;
    top: 2px;
    accent-color: #b2612e;
}
.name-note {
    color: red;
}
 

/*Step 7*/
.step_7 .btn_sec .option-btn {
	cursor:pointer;
	    margin: auto;
	padding: 10px 20px;
	transition:0.5s;  
	text-transform: uppercase;
	width: 200px;
    text-align: center;
    background-color:var(--dark-green);
    color: var(--white);
    display: block;
}
.step_7 .common-btn-wrp {
        justify-content: center;
}
.instruction-wrp ul li:nth-child(1) {
    display: flex;
}
#imageUpload, .step_7 .confirm-btn{
    display: none;
}
#myProgress, #myProgress2 {
    position: absolute;
    top: 30%;
	left: 0;
	right: 0;
    width: 80% !important;
    margin: auto;
}
.loader-wrp {
    position: absolute;
    top: 0;
    width: 100%;
    background: #fff;
    height: 100%;
    left: 0;
    right: 0;
	display:none;
	z-index: 9;
	border-radius: 40px;
	    padding: 0 50px;
}
#myProgress:after {
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-weight: 500;
}
 .instruction-wrp ul li span {
    margin-left: 5px;
 }
 
.step_7 .btn_sec.panel {
    margin: 2em 0 0;
}
.avatar-upload {
    position: relative;
    max-width: min(100%,400px);
    margin: 50px auto;
}
.selected-image, .avatar-upload .avatar-edit input  {
    display: none;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
 
.common-btn-wrp {
    display: flex;
    align-items: center;
}
.common-btn-wrp span {
    margin: 0 5px;
}
.avatar-upload .avatar-preview {
    width: min(100%,800px);
    position: relative;
} 
.avatar-upload .avatar-preview > div {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#uploadimage {
    display: none;
}
.step_7 .upload-btn {
    padding: 15px 40px !important;
    position: relative;
    top: 16px;
}
.new-survey-wrp {
    padding:30px 20px 0;
}
.step__4-login .new-survey-wrp, .step__4 .new-survey-wrp {
    padding: 30px 20px 0;
}																		
 
 

/*Step 8*/
 
 
.instruction-wrp ul li span i {
    font-size: 10px;
    border: 1px solid;
    padding: 2px 3px;
    border-radius: 20px;
    position: relative;
    top: -1px;
}
.upload-btn {
    cursor: pointer !important;
}
.vedio-btn-wrp {
    display: flex;
    align-items: center;
}
 .instruc-wrp {
    text-align: center;
}
#video-btn {
    font-size: 25px;
    color: var(--black);
    display: none;
    position: absolute;
    right: 4em;
    bottom: 1em;
	cursor:pointer;
}
 .leave-on-doctor { 	
    padding-top: 20px;
}
.question-6 p, 
.question-6 span, 
.question-7 p,
.question-7 span {
display: block;
}
.inner-camera-btn {
    border:2px solid var(--white-color);
    height: 65px;
    width: 65px;
    display: block;
    margin: auto;
    border-radius: 50px;
}
#snapBtn:hover {
    background: #be0000 !important;
    transition: 0.5s;
}
.step_8 .continue-btn {
    display: none;
}
.continue-btn-wrp {
    position: relative;
}
.instruction-wrp {
        margin: 20px 0 0;
    font-size: 14px;
 
}
.file-support-txt {
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
    color: #B0B0B0;
}
.file-support-txt span {
    color: #DF0000;
}
 
.step_8 .instruction-wrp ul li {
    margin: 0 !important;
}
 .webcam{
    position:relative;
 }
 
#snapBtn {
    background: var(--black-color) !important;
    height: 80px;
    width: 80px !important;
    border-radius: 50px !important;
    position: absolute;
    left: 40%;
    right: 0;
    bottom: 7%;
	display:none;
	padding:0
}
#cam {
    border: none;
    width: 100%;
    display: none;
}
 
.step_8 .upload-btn {
    top: 0 !important;
    display: block !important;
}
#inputGroupFile01 {
    display: none;
} 
 .step_8, .step_7 {
    position: relative;
}
#photo {
    width: 100%;
    display: none;
}
 .animated.bounce {
    display: none;
}
.alternative-txt {
    text-transform: capitalize;
}
 
 .instruction-wrp ul li img {
    width: 20px;
}
 
.p-image {
    text-align: center;
    width: min(100%,200px);
    display: block;
    margin: 20px auto;
}
 
.instruction-wrp ul li {
    list-style: none;
    margin-bottom: 8px;font-size: 12px;
}
.upload-img-wrp {
    text-align: center;
    overflow: hidden;
    border-radius: 10px;    position: relative;
}
.upload-img-wrp .item-delete1 {
    top: 10px;
}
.upload-img-wrp img {
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
    object-fit: cover;
    border-radius: 10px;
}
.preview-txt img {
    width: 300px;
}
.upload-prescription-img, .upload-photo-img{
	margin: 10px 0;
    border: 1px dashed #ddd;
    padding: 0 10px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
}
.question-6 p {
    display: block !important;
}
.question-3.preview-txt, .question-7.preview-txt {
    border-bottom: 1px solid #818181;
    padding-bottom: 8px;
}
.personal-details-wrp {
    margin-bottom: 20px !important;
}
.medical-history-wrp {
    display: flex;
    justify-content: space-between;
    margin: 35px 0 0;
    align-items: center;
    border-bottom: 1px solid #B6B6B6;
    padding: 0 0 10px;
}
.medical-history-wrp h4 {
    font-size: 20px;
	 margin: 0;
}
 .medical-history-img-wrp img {
    width: 70%;
}
.preview-txt > span:first-child {
    margin: 0 0 10px;
}
 

/*Step 12*/
.question-1 p, .question-2 p, .question-3 p, .question-6 p{
    flex-direction: row !important;
}
.preview-txt {
    display: flex;
	flex-direction: column;
    font-size: 16px;
    padding:20px 0 0;
}
.shipping-address-wrp { 
    display: none;
    flex-direction: column;
}
b, strong { 
    font-size: 18px;
    font-weight: 500;
}
.preview-wrp {
    padding: 20px 30px;
}
.preview-txt p {
    display: flex;
    flex-direction: column;
    margin: 0;    font-size: 16px;
    position: relative;
}

/*Step 9*/
.survey-content-wrp ul li span img {
    width: min(100%,100px);
    float: right;
}
.product-item span select {
    width: 90%;
    padding: 5px;
}
.select-box {
    margin-bottom: 15px;
    display: block;
}
.product-item span label {
    font-weight: 400;
    margin-bottom: 5px;
}
.survey-content-wrp ul li span:nth-child(3) {
    width: 48%;
    align-items: center;
    display: flex;
    justify-content: right;
}
.step_9 ul li span img {
    width: 100% !important;
    margin: 10px 0;
}
.product-price {
    position: relative;
    top: 0;
    margin: 10px 0 0 4px;
    display: block;
    font-weight: 500;
}
.price-txt {
    margin: 14px 0;
    display: block;
    font-size: 18px;
}
 
.main-select-wrp {
    display: none;
	
}
.active-medication .main-select-wrp {
    display: block;
}
 
.product-list .product-item {
    border: 1px solid #B6B6B6;
    padding: 10px 20px;
    display: flex;
    border-radius: 0;
    margin-bottom: 20px;
    cursor: pointer;
    align-items: center;
}
.product-item input {
    width: 30px;
    height: 30px;
    cursor: pointer;
    right: 4px;
    top: 3px;
    -webkit-appearance: none !important;
    border: 2px solid #000 !important;
    border-radius: 50%;
    outline: none !important;
    position: relative;
}
.product-item input:checked::after {
    content: "";
    width: 17px;
    height: 17px;
    background: var(--black-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 .preview-wrp h2 {
    font-weight: 400;
}
.product-inner-list li {
    font-weight: 400 !important;
    font-size: 14px;
	list-style: none;
	margin: 5px 0 !important;
}
 
.product-price {
    width: auto !important;
}
.product-title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}
.product-list {
    margin: 0;
    padding: 0;
}
.product-item span input {
    margin-right: 15px;
}
.product-item ul {
    margin: 0;
    padding: 0;
}
.ship-city-box {
    margin:1em 0 2em;
    display: table;
}
.ship-city-box span:nth-child(2) {
    position: relative;
    top: -5px;
    left: 15px;
    font-size: 20px;
    font-weight: 500;
}
.shiptodifferentaddress {
    appearance: none;
    -webkit-appearance: none;
    width: 25px !important;
    height: 25px !important;
    border: 2px solid var(--black-color) !important;
    border-radius: 100% !important;
    cursor: pointer !important;
    position: relative;
    display: inline-block;
    padding: 0 !important;
}
.shiptodifferentaddress:checked::after {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--black-color);
    border-radius: 50%;
    position: absolute;
    top: 49.2%;
    left: 51.5%;
    transform: translate(-50%, -50%);
}
.note-wrp {
    text-align: left;
    margin: 30px 0 0;
}
/*Login Form*/
.continue-btn {
    text-align: center;
    display: flex;
    justify-content: center;
}
 
/*Step 7*/
 
.question-4 .gender {
    text-transform: capitalize;
}
 
.msp-number-sec .continue-btn-wrp li {
    text-align: center;
}
.msp-number-sec .continue-btn-wrp li:nth-child(2) {
    margin: 30px 0 0;
}
.msp-number::-webkit-inner-spin-button, 
.msp-number::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.msp-number-sec h4 {
    font-size: 22px;
}
.msp-number-sec p {
    font-size: 17px;
    font-weight: 400;
    color: var(--black-color);
	    margin-bottom: 25px;
}
.msp-card-btn {
    display: flex;
    justify-content: center;
    margin: 45px 0 0;
}
.msp-number {
    padding: 15px !important;
    width: 100%;
}
.msp-number::placeholder {
    font-weight: 500;
	color:#bbb;
}
.continue-btn-wrp li {
    list-style: none;
    margin: 20px 0 0; 
}
.msp-number {
    border: 1px solid #B6B6B6 !important;
    margin: 0;
	color:#B6B6B6 !important;
    border-radius: 10px !important;
	background:var(--white-color) !important;
	font-size: 18px;
}

.msp-number::placeholder{
	color:#B6B6B6;
}
.msp-img-wrp {
    border-radius: 20px;
    width: 40%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 100; 
    margin: auto;
    display: none;
    padding: 40px 20px;
    background: var(--white-color);
    height: fit-content;
}
.msp-img-wrp figure {
    text-align: center;
}
.msp-overlay {
    position: fixed;
    inset: 0;
    background: #0000007a;
    z-index: 99;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.close-msp {
    cursor: pointer;
}
.close-msp-wrp {
    text-align: right;
    position: absolute;
    top: -52px;
    right: -15px;
}
.msp-number-step {
    position: relative;
}
.show-msp {
    display: block !important;
}
.msp-img-wrp p {
    margin: 0;
} 
.msp-card-note-wrp {
    padding: 15px;
    background: #f0efef;
    border-radius: 10px;
    margin: 0 0 10px;
}
.Find-msp {
    cursor: pointer;
    transition: 0.6s;
    text-decoration: underline;
    color: var(--black-color);
}
.Find-msp:hover {
    color: var(--primary-color);
}
@media only screen and (max-width:1100px){
.msp-img-wrp {
    width: 70%;
}
}
@media only screen and (max-width:767px) {
.hairloss-start-survey-wrp { 
    margin-bottom: 2em;
}
.msp-img-wrp {
    width: 95%;
}
.close-msp-wrp {
    right: 0;
}
.step__4 .login-txt {
    margin:0;
}
.transfer-prescription-step .new-survey-wrp {
    padding: 0;
}
.agree-terms-box span {
    font-size: 14px;
}
.transfer-prescription-step .new-survey-content-wrp {
    margin: 0em 0 15px;
}
.login-txt {
    font-size: 15px;
}
.new-survey-content-wrp h4 span:first-child {
    width: 35px;
    height: 35px;
}
.step-label {
	font-size: 12px;
	margin-top: 12px;
}

.step-circle {
	width: 40px;
	height: 40px;
	font-size: 16px;
}
.new-survey-wrp {
    padding:  0;
}
.new-survey-content-wrp ul li a span:nth-child(1) {
    margin-right: 0;
}
.step-block {
    padding: 40px 25px;
	    border-radius: 30px;
}
.product-title {
    font-size: 15px;
}
.product-item input {
    width: 25px;
    height: 25px;
}
.product-item span input {
    margin-right: 10px;
}
.product-price h4 {
    font-size: 18px !important;
}
.product-price h4 strong {
    font-size: 20px;
}
.select-medication-wrp h4 {
    margin: 0 0 30px;
}
.preview-wrp {
    padding: 0;
}
#swal2-title {
    font-size: 20px;
}
.medical-history-wrp {
    margin: 25px 0 0;
}
.step__4-login .new-survey-wrp, .step__4 .new-survey-wrp,
.create-acc-box, .login-box {
    padding: 0;
}
}
@media (max-width: 480px) {
.stepper {
	margin-bottom: 40px;
}

.step-label {
	font-size: 11px;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.step-circle {
	width: 36px;
	height: 36px;
	font-size: 14px;
}
}
@media only screen and (max-width:600px){
.floating-label {
    font-size: 12px;
}
.product-inner-list li {
    font-size: 12px;
} 
.upload-photo-sec h4 {
    font-size: 20px;
}
.codeverify input {
    min-height: 60px;
}
.transfer-input-wrp input:focus ~ .floating-label, .transfer-input-wrp input:not(:focus):valid ~ .floating-label {
    top: -30px;
}
#video-btn {
    right: 2em;
}
 
.survey-inner-box .floating-label {
    font-size: 14px;
}
.doctorName {
    font-size: 15px;
}
.dname.small-label {
    font-size: 14px;
}
.survey-top-wrp ul li {
    font-size: 12px;
}
.survey-form-title-wrp h5 {
    font-size: 15px;
}
.form-title {
    font-size: 18px;
}
.form-gender-wrp span label {
    margin-left: 0;
    font-size: 15px;
}
.agree-wrp span h5 {
    font-size: 13px;
}
.survey-inner-box label {
    font-size: 15px;
}
}
@media only screen and (max-width:450px){
.transfer-input-wrp .floating-label, 
.transfer-input-wrp input:focus ~ .floating-label,
 .transfer-input-wrp input:not(:focus):valid ~ .floating-label {
    font-size: 10px !important;
}
.secondary-btn span {
    top: 0px;
}
}
@media only screen and (max-width:350px){
 
.survey-top-wrp ul li {
    font-size: 10px;
}
.survey-top-inner-wrp {
    padding: 10px 10px !important;
}
.new-survey-content-wrp ul li a {
    font-size: 12px;
	    padding: 10px 10px;
}
.roboto-p-grey {
    font-size: 10px !important;
}
.new-suvey-main-wrp h3 {
    font-size: 18px;
}
.percentage-bar1 {
    width: 18px;
    height: 18px;
}
}