/***** Top content *****/
.fields_box_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    
}
.fields_set_parent {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    justify-content: space-between;
}
.fields_block {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
}

.date_select{
    padding: 0 40px;
    margin-bottom: 40px;
}

button#datepicker-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 48px;
    border: 0.506px solid #959494;
    border-radius: 10px;
}


.fieldset_wrapper{
    margin-top: 40px;
}

.patient_data_block {
    margin-bottom: 59px;
}
.dualsetps .f1-step {
    
    width: 50%;
}
.dualsetps .f2step:before {
    display: none;
}
.dualsetps .f2step:after {
    
    right: -50px;
    
}


.f2step:after {
    background: rgba(149, 148, 148, 0.30);
    height: 1.5px;
    content: "";
    width: 100px;
    position: absolute;
    right: -84px;
    top: 18px;
}
.f2step:before {
    background: rgba(149, 148, 148, 0.30);
    height: 1.5px;
    content: "";
    width: 100px;
    position: absolute;
    left: -94px;
    top: 18px;
}

.f1-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.f1-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}
.f1-step-icon {
    color: #313131;
    text-align: center;
    font-family: "circular_stdmedium";
    font-size: 16px;
    font-style: normal;
    width: 36px;
    font-weight: 500;
    line-height: normal;
    border: 2px solid rgba(149, 148, 148, 0.30);
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f1-step.active .f1-step-icon {
	color: #19B3B5;
    border: 2px solid #19B3B5;


}
.f1-step.activated .f1-step-icon {
    background: #19B3B5;
    color: #fff;
}


.f1-step.active p {
    color: #19B3B5;
    
}
.f1-step.activated .f1-step-icon {
    background: #19B3B5;
    color: #fff;
}

.f1-step.activated p {
    color: #19B3B5;
}
.f1-step p {
    color: #313131;
    
text-align: center;
font-family: "circular_stdbook";
font-size: 16px;
font-style: normal;
font-weight: 450;
line-height: normal;
}


.f1 fieldset { display: none; text-align: left; }
.fields_labels {
    color: #313131;
font-family: "circular_stdlight";
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
}


.next_log_button, .next_log_button:hover
{
display: flex;
width: 100%;
height: 55px;
padding: 15px 121px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 12px;
background: #19B3B5;
color: #FFF;
text-align: center;
font-family: "circular_stdbook";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.9px;
}
.fields_dropdowns.inline_select_box {

    width: 50%;
}
.fileds_blocks_inline {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
}
.f1-buttons.log_buttons {
    width: 100%;
}
/***** Media queries *****/




h1, h2, h3, h4, h5, h6{
    margin: 0;
}
.bor-26{
    border-radius: 20px;

}
.mb-50
{
    margin-bottom: 50px;
}
.mb-30
{
    margin-bottom: 30px;
}

.mt-120
{
    margin-top: 120px;
}
.mtb-120
{
    margin-top: 120px;
    margin-bottom: 120px;
}
.logo_web {
    max-width: 240px;
}
.logo_container.merisehatlogo {
    padding: 20px 0;
    margin-bottom: 80px;
}



.ccm_form_body{
    background: #F5F7FB;
}


.dailylog_form_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dailylog_form_block {
    width: 100%;
    max-width: 546px;
    border-radius: 20px;
    padding: 57px;
    background: #FFF;
    box-shadow: 0px 20px 40px 0px rgba(245, 247, 251, 0.60);
}
.daily_log_side_image {
    max-width: 500px;
}



.patient_name_heading{
    color: #313131;
text-align: center;
font-family: Nunito-m;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 44.8px */
}

.patient_name_desc
{
color: #313131;
text-align: center;
font-family: "circular_stdlight";
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 140%; /* 28px */
letter-spacing: 0.2px;
}


.styledSelect, .fields_dropdowns {
    border-radius: 10px;
    border: 0.506px solid #959494;
    background: #FFF;
    color: #9B9B9B;
    font-family: "circular_stdlight";
    font-size: 16px;
    font-style: normal;
    height: 48px;
    font-weight: 300;
    line-height: normal;
    padding: 11px 20px;
    
}
/* select.fields_dropdowns{
appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../img/dropvector.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
} */

.options li
{
    color: rgba(49, 49, 49, 0.80);
font-family: "circular_stdlight";
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
padding: 10px 20px;

}

.s-hidden {
    visibility: hidden;
    padding-right: 10px;
    display: none;
}
.select {
    cursor: pointer;
    display: flex;
    position: relative;
    flex-direction: column;
}
/* .styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    
} */
.styledSelect:after {
    content: "";
    background-image: url(../img/dropvector.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 13px;
    height: 8px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding: 0;
    list-style:none;
    
    
    

    border-radius: 8px;
background: #FFF;
box-shadow: 0px 2px 4px 2px rgba(238, 238, 238, 0.60);
}

.options li:hover {
    background-color:#19B3B5;
    color:#fff;
    
}
.fileds_blocks_inline .select, .fileds_blocks_inline  .fields_dropdowns{
    width: 50%;
}

p{
    margin: 0;
}
.fields_dropdowns.input-error {border-color: red;}
.errorMessage {
    display: none;
    color: red;
    font-size: 12px;
}

.input-error ~ .errorMessage {
    display: block !important;
}
.thankyou-block {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconsuccess {
    text-align: center;
    margin-bottom: 30px;
}

.thankyou-block .patient_name {
    margin-bottom: 20px;
}
.multistepbutton {
    display: flex;
    gap: 20px;
}

.multistepbutton button {
    width: 50% !important;
    padding: 0 !important;
}
.radio_labels {
    font-family: "circular_stdlight";
    font-size: 16px;
    color: #313131;
    font-weight: 300;
}

.input_radio_select {
    margin-bottom: 7px;
    width: 50%;
}

.radio_selections {
    margin-bottom: 20px;
}

.radio_selections {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
p.errorMessage.radioErrorMessage {
    position: absolute;
    top: 0;
    right: 0;
}

.fields_block.radiofields {
    position: relative;
}
@media (max-width: 767px) {
    .dailylog_form_block {
        width: 100%;
        max-width: none;
        border-radius: 0;
        padding: 0 12px;
        background: none;
        box-shadow: none;
    }   
    
    .daily_log_side_image {
    
        display: none;
    }

    .patient_name_heading {
                font-size: 20px;
        
    }
    .patient_name_desc {
        
        font-size: 14px;

    }
    .patient_data_block {
        margin-bottom: 20px;
    }
    .f1-steps {
        border-radius: 15px;
        background: #FFF;
        box-shadow: 0px 0px 20px 2px rgba(238, 238, 238, 0.60);
        padding: 14px 20px;
    }
    .fieldset_wrapper {
        border-radius: 15px;
        background: #FFF;
        box-shadow: 0px 0px 20px 2px rgba(238, 238, 238, 0.60);
        margin-top: 20px;
        overflow: scroll;
        padding: 20px 20px;
        
    }
    .fields_set_parent {
        display: flex;
        flex-direction: column;
        padding: 0;
        min-height: unset;
    }
    .f1-step p {
    
    font-size: 12px;
    
    }
    .dualsetps .f2step:after {
        right: -39px;
    }
    .f1-step-icon {
    
        font-size: 12px;
        width: 24px;
        height: 24px;
    }
    .f1-buttons.log_buttons {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 20px;
        border-radius: 15px 15px 0px 0px;
        background: #FFF;
        box-shadow: 0px -4px 20px 0px rgba(142, 142, 142, 0.25);
    }
    .f2step:before {
        
        width: 80px;
        
        left: -64px;
        top: 13px;
    }
    .f2step:after {
        
        width: 70px;
        
        right: -52px;
        top: 13px;
    }
    .logo_container.merisehatlogo {
        margin-bottom: 30px;
        text-align: center;
        background: #FFF;
        box-shadow: 0px 3.995px 7.99px 0px rgba(0, 0, 0, 0.05);
        padding: 20px 0px;
    }
    .next_log_button, .next_log_button:hover {
        
        height: 45px;
        font-size: 14px;
        
    }

    .styledSelect, .fields_dropdowns {
        
        font-size: 12px;
        
        height: 40px;
        
    }
    .styledSelect:after {
        
        top: 16px;
    }
    .fields_labels {

        font-size: 12px;
        
    }
    .radio_labels {
        font-size: 12px;
        position: relative;
        top: -2px;
    }
    .fields_block {
        
        position: relative;
    }
    .input-error ~ .errorMessage {
        
        position: absolute;
        right: 0;
        top: 0;
    }
    button#datepicker-toggle {
        
        min-height: 40px;
    }
    
    form#form {
        min-height: 660px;
        overflow: scroll;
    }
}