.status-breakdown
{
    display: flex;
    margin: 1rem;
    max-width: 100%;
    gap: 0.25rem;
}
.status-breakdown-item
{
    flex-grow: 1;
    flex-basis: 20%;
    /* max-width: 20%; */
    padding: 1rem 0;
    border-radius: 0.5rem;
    background-color: #007393;
    width: calc((100% / 5) - 0.25rem);
}
.status-breakdown-item p
{
    color: white;
    font-size: 0.6rem;
    margin-bottom: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-breakdown-item img {
    max-width: 100%;
}
.status-split-box{
    display: flex;
    gap: 1rem;
}
.status-filled-box-splitter
{
    flex: 1 0;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.status-filled-box-splitter .status-filled-box-title
{
    font-size: 0.75rem;
}
.status-filled-box-splitter ul {
    margin: 0;
}
.status-filled-box-splitter li {
    font-size: 0.75rem;
}
.status-filled-box-splitter .status-filled-box-content
{
    flex: 1;
    padding-left: 0.2rem;
}
.params-overview {
    font-size: 0.8rem;
    font-family: "Norms";
    margin-top: 1.5rem;
    margin-bottom: 0;
    position: relative;
    z-index: 9;
}
.start-menu-guide-wardah
{
    background-color: #2B7F87;
    width: 240px;
    height: 80px;
    max-width: 8rem;
    margin-bottom: initial;
    max-height: 4rem;
    mask-size: contain;
}
.start-menu-title img, .start-menu-subtitle img
{
    width: 70%;
    max-width: 400px;
}
.start-menu-subtitle img
{
    width: 80%;
    max-width: 480px;
}
.start-menu-subtitle--top
{
    margin-bottom: 1.5rem;
}
.start-menu-subtitle--bottom
{
    font-family: "Montserrat";
    font-weight: 500;
    font-size: 0.6rem;
    background: none;
    color: #2B7F87;
}
.start-menu
{
    background: url("../design/images/analyzer/skin_analyzer/Wardah Skinverse - Vertical FINAL 2A 1.png");
    background-size: cover;
}
.loader, .start-menu, .questionnaire-menu
{
    max-width: 820px;
}

.start-menu-content
{
    position: absolute;
    height: auto;
    width: 100%;
}

#question_extra .bottom-button, .bottom-button
{
    height: initial;
    background-color: #2B7F87;
    color: #ffffff;
    border-radius: 0.75rem;
    width: auto;
    margin: 0.5rem auto 0;
    padding: 0.75rem 1rem;
}

#save_result_btn{
    color: #2B7F87;
    border: 1px solid #2B7F87;
    background-color: #ffffff;
    position: relative;
}
#save_result_btn.done::before
{
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../design/images/analyzer/check_save.png);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background-size: 16px;
}
.qrcode{
    display: none;
    width: 50%;
    max-width: 240px;
    margin: auto;
    border: 1px solid #2B7F87;
    border-radius: 0.5rem;
    border-top: 0;
}
#qr_image img, #qr_image canvas
{
    width: 140px;
    height: 140px;
    margin: auto;
}
#qr_image{
    position: relative;
    /* width: 180px;
    height: 180px; */
    margin: auto;
    padding: 20px;
}
.start-menu #questionnaireButton{
    margin-bottom: 4rem;
}
.wardah-orb
{
    position: absolute;
    top: 1rem;
    width: 100%;
    min-width: 360px;
    max-width: 640px;
    left: 50%;
    transform: translateX(-50%);
}
.face_questionnaire .start-menu-content
{
    position: absolute;
    bottom: 0;
}
.bottom-button, #question_extra .bottom-button
{
    margin: 0.5rem auto 0;
    display: block;
    font-family: "Transducer";
    font-weight: 500;
    font-size: 0.6rem;
    width: 50%;
    max-width: 240px;
    text-transform: uppercase;
}

#questionExtraBack, #questionBackButton
{
    color: #2B7F87;
    border-color: #2B7F87;
}
#skinType.questionnaire-block label small, #skinConcern.questionnaire-block label small
{
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 0.5rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
#skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p
{
    position: absolute;
    /* bottom: 1.5rem; */
    font-family: "Transducer";
    font-size: 0.8rem;
    left: 1rem;
    right: 1rem;
    bottom: 3rem
}
.questionnaire-block label
{
    padding: 12px;
}
#skinConcern.questionnaire-block label p
{
    font-size: 0.5rem;
    bottom: 1rem;
}

.bottom-button:disabled, #questionExtraNext:disabled{
    background-color: #606060;
}
.questionnaire-query, #question_extra .questionnaire-query
{
    font-family: "Transducer";
    font-weight: 500;
    color: #ffffff;
    font-style: initial;
    font-size: 1rem;
}
.questionnaire-menu, #question_extra, .loader{
    background: url("../design/images/analyzer/skin_analyzer/Wardah Skinverse - Vertical FINAL 2A 1.png");
    background-size: auto 150%;
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: top center;
}
.questionnaire-sub-query
{
    font-family: "Montserrat";
    color: #ffffff;
}
.questionnaire-block#genderSelect label
{
    border-radius: 0.5rem;
    font-family: "Montserrat";
    font-weight: 600;
}

#question_extra #questionExtraBack
{
    background-color: transparent;
    color: #2B7F87;
}

.questionnaire-skin-photo
{
    height: 14rem;
    padding: 0.75rem;
    background-color: #ffffff90;
    border: 1px solid #C2C2C296;
}

.questionnaire-skin-photo img
{
    border-radius: 0.75rem;
    width: 100%;
    height: initial;
    min-width: 100%;
    border-radius: 0 0 1rem 1rem;
    object-fit: cover;
    aspect-ratio: 1;
}
.questionnaire-block label p
{
    font-family: "Montserrat";
}

.questionnaire-skin-type
{
    font-family: "Transducer";
    padding: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: #226B69;
    font-size: 1rem;
    padding: 1.5rem;
}
.questionnaire-skin-desc
{
    background: none;
    color: #226B69;
    font-family: "Transducer";
    font-size: 0.6rem;
    font-weight: 500;
}
#question_extra .questionnaire-skin-result .questionnaire-query
{
    text-transform: uppercase;
}
#question_3.questionnaire-item .questionnaire-query, #question_4.questionnaire-item .questionnaire-query
{
    position: absolute;
    top: 6rem
}

#ageSelect input[name='user_phone'] ~ div
{
    border-right: 1px solid #007393;
    height: 1.5rem;
    background-color: transparent;
}
#ageSelect input[name='user_phone']:focus ~ div
{
    color: #007393;
}

#ageSelect input, #geoLocation input:active, #geoLocation input:focus, #ageSelect input:active, #ageSelect input:focus {
    background: #ffffff;
    color: #2B7F87;
    outline: none;
}

.questionnaire-guide {
    color: #ffffff;
    text-align: center;
    font-size: 0.8rem;
    top: 2rem;
    position: relative;
    font-family: 'Montserrat';
    font-weight: 500;
}
#face_analyzer
{
    background-size: 170%;
    background-position: top center;
}
#face_analyzer .start-menu-title
{
    font-family: "Transducer";
    font-weight: 500;
    color: #ffffff;
    font-style: normal;
    padding: 1rem;
    font-size: 1rem;
}
.guide-item p
{
    font-family: "Montserrat";
    color: #ffffff;
    font-weight: 500;
}
.wardah-loader-text
{
    font-family: "Transducer";
    font-weight: 700;
    color: #226B69;
    text-align: center;
    font-size: 1.5rem;
    font-style: initial;
}
.loader{
    background-size: cover
}
.wardah-loader-content
{
    margin-top: initial;
}
.loading-spinner-wardah
{
    margin: 2rem auto
}
.container{
    max-width: 820px;
}

.guidance-text
{
    font-size: 0.6rem;
    font-family: "Transducer";
    font-weight: 500;
    color: #ffffff;
}
.wardah-loader-content small
{
    color: #226B69;
}

.status-container{
    background: #ffffff;
}
.result-logo-title img
{
    max-height: 2rem;
}
.result-logo-wardah
{
    height: 2.5rem;
    width: 7rem;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}
.status-data-user-skin-details::before{
    height: 1px;
}
.status-photo img
{
    aspect-ratio: 3 / 4;
    /* handle weird behavior in safari */
    max-height: 40vh;
}

.result-logo-container
{
    padding: 2rem 2rem 1rem;
}
.result-logo-title
{position: relative;}

.status-data-user-name
{
    width: 70%;
}

.status-data-user-detail, .status-data-user-complement
{
    font-family: "Transducer";
    font-weight: 500;
    color: #2B7F87;
}

.status-data-user--phone, .status-data-user--datetime
{
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-data-user-skin-type
{
    background-color: #2B7F87;
}
.status-data-user-skin
{
    border: 1px solid #C2C2C296;
}

.status-main-data
{
    border:1px solid #2B7F87
}
.status-data-user-skin-title, .status-data-user-skin-type
{
    font-family: "Transducer";
    font-weight: 500;
    font-size: 0.75rem;
}
.status-data-user-skin-type
{
    word-break: break-word;
    white-space: break-spaces;
    font-weight: 700;
    font-style: initial;
}
.status-main--age
{
    position: relative;
    transform: initial;
    /* border: 1px solid #C2C2C296; */
    color: #007393;
    box-sizing: border-box;
    top: initial;
    left: initial;
    padding: 0.1rem 0.5rem;

}
.status-main--age-container
{
    font-family: "Transducer";
    font-weight: 500;
    width: initial;
    height: initial;
    right: -0.5rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #C2C2C296;
    padding: 0.2rem 1rem;
}
.status-main--age p
{
    font-size: 1.5rem;
    line-height: 1;
}

.status-data-user-download--dropdown
{
    appearance: none;
    border:none;
    background:none;
    display: block;
    font-family: "Transducer";
    border: 1px solid #cccccc90;
    border-radius: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    color: #2B7F87;
    font-weight: 500;
}
.status-data-user-download-diary
{
    display: none;
    font-family: "Transducer";
    width: 100%;
    padding: 0.75rem 0.25rem 0.5rem;
    color: #2B7F87;
    font-weight: 500;
    text-align: center;
    font-size: 0.8rem;
    border: 1px solid #cccccc90;
    box-sizing: border-box;
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
}
.status-data-user-download-diary a {
    color: #2B7F87;
    display: block;
    width: 100%;
    appearance: none;
    padding: 0.25rem 0;
}
.status-data-user-download--list
{
    position: relative;
    top: -0.3rem;
    margin-bottom: 0.5rem;
}
.button--arrow
{
    border-bottom: solid 12px #2B7F87;
    display: inline-block;
    border-right: solid 12px transparent;
    border-left: solid 12px transparent;
    margin-left: .5rem;
    transform: rotate(180deg);
    transition: transform 0.5s;
}
.button--arrow.toggled
{
    transform: rotate(0deg);
}

.status-box-title
{
    background-color: transparent;
    font-size: 1rem;
    font-family: "Transducer";
    font-weight: 700;
}
.status-detail-text ~p
{
    font-family: "Transducer";
    font-weight: 700;
    font-size: 0.6rem;
    color: #2B7F87;
}

.status-bar
{
    height: 1rem;
    border: 0px solid transparent;
    max-height: initial;
    border-radius: 0;
}
.status-fill
{
    border-radius: 1rem;
}

.status-fill--Medium
{
    background-color: #F08521;
}

.status-fill--None, .status-fill--Minimal{
    background-color: #88D1D4;
}
.status-fill--High
{
    background-color: #F04E4F;
}

.status-box-par, .status-box-fit
{
    text-align: center;
    font-family: "Montserrat";
    font-weight: 600;
}
.status-box::after
{
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, #ffffff,#007393,#ffffff);
}

.status-box:nth-last-child(1)::after
{
    display: none;
}

.status-fill
{
    font-family: "Transducer";
    font-weight: 500;
    min-width: 1%;
}
.status-fill p
{
    width: 100%;
    margin: 0;
    color: #ffffff;
    min-width: 2rem;
    padding-right: 0.2rem;
    box-sizing: border-box;
    line-height: 1rem;
    font-size: .6rem;
    text-align: right;
    min-width: 2rem;
}

.status-tab-item, .status-subtab-item
{
    font-family: "Transducer";
    font-size: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.status-tab-item.status-tab-item--active, .status-subtab-item.status-subtab-item--active
{
    background-color: #2B7F87;
}
.status-subtab-item
{
    border: 1px solid #C2C2C296;
}

.status-container.show-status button {
    pointer-events: initial;
    border: 1px solid #C2C2C296;
    flex: 1 0 33%;
    font-family: "Transducer";
    font-size: 0.6rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.status-breakdown-item
{
    flex: 0 0 auto;
    padding: 0.5rem 0;
    background-color: #2B7F87;
    width: 30%;
}
.status-breakdown
{
    flex-wrap: wrap;
    justify-content: center;
    width: initial;
}
.status-breakdown-item p
{
    font-family: "Transducer";
    font-weight: 500;
    padding: 0 0.5rem;
}

.status-subtab-items{
    gap: 0.5rem 0.5rem;
    padding:  0 1rem;
}

.colour-bar
{
    height: 1rem;
    border: 0;
}
.colour-selector
{
    width: calc(8% + 2px);
    padding-bottom: 8%;
    border: 1px solid #007393;
}
.colour-bar::before
{
    background: none;
}
.colour-names li
{
    color: #000000;
    font-family: "Montserrat";
    font-weight: 600;
}
.status-subtab-item--active::before, .status-subtab-item--active::after, .status-box-title::before, .status-box-title::after
{
    display: none;
}
.status-data-user--phone, .status-data-user--datetime
{
    line-height: 1rem;
}
.status-data-user--datetime
{
    padding-right: 0;
}

.status-subtab-item--active::after, .status-box-title::after
{
    display: none;
}

.status-box-title
{
    color: #2B7F87;
}
.start-menu-option {
    margin: auto;
    max-width: 440px;
    padding: 0;
    text-align: center;
    flex: 1 0 100%;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 0.6rem;
    line-height: 0.8rem;
}
.start-menu-options
{
    max-width: 440px;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}
#email_agree_chk, #whatsapp_agree_chk
{
    display: none
}
#whatsapp_agree_chk + label, #email_agree_chk + label{
    width: 50%;
    position: relative;
    display: inline-block;
    flex: 1 0 50%;
    padding-left: 1.5rem;
    text-align: left;
}
#whatsapp_agree_chk + label::before, #email_agree_chk + label::before
{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    content: "";
    background-color: white;
    border-radius: 4px;
    /* left: 0; */
    /* top: 0.2rem; */
    transition: 0.2s;
    box-shadow: inset 0 4px 4px #00739370;
    /* transform: translateX(-50%); */
    display: inline-block;
    top: 50%;
    transform: translateY(-50%)
}
#whatsapp_agree_chk + label::after, #email_agree_chk + label::after
{
    content: "";
    opacity: 0;
    border: 3px solid #347171;
    height: 8px;
    width: 18px;
    border-top: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    transform: rotate(-45deg);
    box-sizing: border-box;
    bottom: 0.5rem;
    left: 0;
    position: absolute;
}
#whatsapp_agree_chk:checked + label::after, #email_agree_chk:checked + label::after {
    opacity: 1;
}
#content{
    margin: auto;
}
.consent
{
    width: 100%;
    max-width: 180px;
    display: flex;
    flex-wrap: nowrap;
    margin: auto;
    color: #007393;
    font-family: "Montserrat";
    font-weight: 600;
    margin-top: 1rem;
    font-size: 0.6rem;
    line-height: 1rem;
    text-align: center;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],input[type="name"], .weather-data-item, .weather-data-item-key
{
    font-family: "Montserrat"!important;
    font-size: 16px!important;
    font-weight: 500;
}
.questionnaire-block#ageSelect, #geoLocation
{
    max-width: 360px;
    margin: auto;
    width: 100%;
}

.status-container.show-status .bottom-button-container button.status-cta {
    background-color: #2B7F87;
    color: #ffffff;
}

@media (max-height: 880px) and (min-width: 640px){

  .wardah-orb
  {
    height: 100vh;
    max-height: 360px;
    width: auto;
  }
}

@media (max-height:640px)
{
    #question_3.questionnaire-item .questionnaire-query, #question_4.questionnaire-item .questionnaire-query
    {
        top: 1rem;
    }
}

@media (min-width:640px) {

    #skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p
    {
        font-size: 0.8rem;
    }
    #skinType.questionnaire-block label small, #skinConcern.questionnaire-block label small
    {
        font-size: 0.5rem;
    }
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="name"], .weather-data-item, .weather-data-item-key
    {
        font-size: 24px!important;
    }
}
@media(max-width:480px)
{
    .bottom-button, .qrcode
    {
        width: 80%;
        max-width: 300px;
    }
}