/* font family css start  */

.popup__close img {
    width: 48px !important;
    height: 48px !important;
}

@font-face {

    font-family: regular;

    src: url(../font/montseraat/Montserrat-Regular.ttf);

}



@font-face {

    font-family: bold;

    src: url(../font/montseraat/Montserrat-Bold.ttf);

}



@font-face {

    font-family: extrabold;

    src: url(../font/montseraat/Montserrat-ExtraBold.ttf);

}



@font-face {

    font-family: medium;

    src: url(../font/montseraat/Montserrat-Medium.ttf);

}



@font-face {

    font-family: light;

    src: url(../font/montseraat/Montserrat-Light.ttf);

}



body {

    font-family: regular !important;

}



.bold {

    font-family: bold;

}



.extrabold {

    font-family: extrabold;

}



.medium {

    font-family: medium;

}



.light {

    font-family: light;

}





/*font family css end  */





/* each project common css start  */



body {

    font-family: regular !important;

    background: #f8f8f8 !important;

}



h1,

h2,

h3,

h4,

h5,

h6,

p,

a {

    margin: 0px !important;

}



a {

    text-decoration: none !important;

}



a:hover {

    text-decoration: none !important;

}





/* each project common  css end  */





/* remove css start  */



.question_single {

    padding: 70px 0px;

}





/* remove css end  */





/* each question common css */



.back_btn img {

    width: 80px;

    height: 25px;

    object-fit: contain;

}



.progress_bar .path {

    background: rgba(19, 159, 164, 0.1);

    border-radius: 15px;

}



.progress_bar {

    background: #ffffff;

    border-radius: 20px;

    padding: 22px;

    margin: 25px 0px;

}



.progress_bar .path {

    background: rgba(19, 159, 164, 0.1);

    border-radius: 15px;

    width: 100%;

    height: 12px;

}



.progress_bar .path_fill {

    background: #139fa4;

    border-radius: 15px;

    height: 12px;

}



.question_inner {

    padding: 22px;

    background: white;

    border-radius: 25px;

}



h3.question {

    color: #000000;

    font-size: 30px;

    font-family: "bold";

    font-weight: 700;

    padding-bottom: 15px;

}



.description p {

    font-size: 16px;

    font-family: medium;

    font-weight: 500;

    padding-bottom: 10px;

}



.description p:last-child {

    padding-bottom: 0px;

}



.option {

    text-align: center;

}



.next_btn {

    text-align: center;

}
 


.option a,

.next_btn span,

.next_btn a,

.option span {

    color: #000000;

    font-size: 20px;

    font-weight: 600;

    padding: 15px 40px;

    display: inline-block;

    border-radius: 15px;

}



.option a,

.option span {

    border: 1px solid #000000;

    margin-right: 10px !important;

    margin-top: 20px !important;

}



.option a:last-child,

.option span:last-child {

    margin-right: 0px !important;

}



.option a:hover,

.option span:hover {

    background: #139fa4;

    border: 1px solid #139fa4;

    color: white;

    cursor: pointer;

}



.next_btn a,

.next_btn span {

    background: linear-gradient(228.8deg, #fe6789 0%, #fe7d46 100.72%);

    color: white;

    margin-top: 20px !important;

}



.questions input {

    border: 1px solid #000000;

    border-radius: 12px;

    font-size: 16px;

    padding: 10px;

    margin-top: 20px;

    margin-right: 10px;

}



.questions input:last-child {

    margin-right: 0px;

}



h6.oi_short_desc {

    font-size: 12px;

}



.agree_bg {

    background: linear-gradient(228.8deg, #fe6789 0%, #fe7d46 100.72%);

    border: none !important;

}



a.agree_bg {

    color: white !important;

}



a.agree_bg:hover {

    background: linear-gradient(228.8deg, #fe6789 0%, #fe7d46 100.72%);

}





/* each question common end */





/* popup css start  */



.popup {

    display: flex;

    align-items: center;

    justify-content: center;

    position: fixed;

    width: 100vw;

    height: 100vh;

    bottom: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.8);

    z-index: 2;

    visibility: hidden;

    opacity: 0;

    overflow: hiden;

    transition: 0.64s ease-in-out;

}



.popup-inner {

    position: relative;

    bottom: -100vw;

    right: -100vh;

    max-width: 800px;

    max-height: 600px;

    text-align: center;

    width: 80%;

    height: 70%;

    background: #ffffff;

    border-radius: 25px;

    padding: 30px;

    transform: rotate(32deg);

    transition: 0.64s ease-in-out;

    overflow-y: auto;

}



.popup__photo img {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    object-fit: cover;

}



.popup__text p {

    font-size: 16px;

    color: #000000;

    line-height: 28px;

    font-weight: 500;

    padding: 8px 0px 0px 0px !important;

    margin: 0px !important;

    font-family: Montserrat, sans-serif !important;

}



.popup:target {

    visibility: visible;

    opacity: 1;

}



.popup:target .popup-inner {

    bottom: 0;

    right: 0;

    transform: rotate(0);

}



.popup__close {

    position: absolute;

    right: 25px;

    top: 18px;

    font-weight: 300;

    border-radius: 100%;

    z-index: 4;

    color: #000;

    text-align: center;

    cursor: pointer;

    text-decoration: none;

    font-size: 18px;

}



.popup-inner .button span {

    border-radius: 15px;

    color: rgb(0, 0, 0);

    font-size: 20px;

    font-family: Montserrat;

    font-weight: 600;

    padding: 15px 25px;

    text-transform: capitalize;

}



.popup-inner .button span.continue {

    background: linear-gradient(228.8deg, #fe6789 0%, #fe7d46 100.72%);

    color: white;

    margin-right: 15px;

}



.popup-inner .popup__text {

    margin: 10px 0px 25px 0px;

    line-height: 28px;

    font-size: 16px;

    font-weight: 500;

}



.popup-inner .button a {

    text-decoration: none !important;

    display: inline-flex;

}



.popup-inner .button span.stop {

    border: 1px solid #000000;

}



.quiz_section.qsm-question-wrapper a img {

    position: absolute;

    top: -16px;

    right: 0;

}



#continue_second .popup__text p {

    font-size: 18px;

    font-weight: 700;

}



.popup.complete_section.popup__text p {

    font-size: 18px;

    font-weight: 700;

}



.popup_question {

    font-size: 20px;

    font-weight: 600;
    margin-top: 38px;

}





/* popup css end  */





/* show result page css start  */



section.show_result {

    background: linear-gradient(180deg, #fe6789 0%, #fe7d46 100.72%);

    padding: 40px 0px;

    min-height: 100vh;

}



.show_result .page_header {

    text-align: center;

    color: white;

}



.show_result h4.page_title {

    font-size: 60px;

    font-weight: 700;

    padding-bottom: 15px;

}



.show_result h6.short_desc {

    font-size: 18px;

    font-weight: 500;

}



.show_result .result_single {

    background: white;

    border-radius: 20px;

    margin: 30px auto 0px auto;

}



.show_result h5.rs_title {

    font-size: 20px;

    color: #000000;

    font-family: bold;

    font-weight: 700;

    padding: 20px 20px 0px 20px;

}



.show_result .rsi_single {

    display: flex;

    align-items: center;

}



.show_result .rs_body {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-column-gap: 10px;

    padding: 0px 20px;

}



.show_result .rs_footer {

    display: flex;

    justify-content: space-between;

    background: #f2f2f2;

    border-radius: 0px 0px 20px 20px;

    padding: 20px;

}



.show_result .rs_body .rsi_single img {

    width: 36px;

    height: 36px;

    object-fit: contain;

}



.show_result .rs_footer .rsi_single img {

    width: 24px;

    height: 24px;

    object-fit: contain;

}



.show_result .rsi_single span {

    padding-left: 10px;

    font-size: 16px;

    font-weight: 400;

}



.show_result .view_detail a,

.show_result .download a,

.show_result a.view_detail {

    color: #fe7c48;

    font-weight: 600;

}



.rsi_single.add_remainder span {

    color: #2bc48a;

    font-weight: 600;

}



.rsi_single.download span {

    color: #fe7c48;

}



.result_single .form_field .send_icon {

    background: linear-gradient(228.8deg, #fe6789 0%, #fe7d46 100.72%);

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: -2px;

    right: -1px;

}



.rs_body .rsi_single:nth-child(even),

.rs_footer .rsi_single:last-child {

    justify-content: end;

}



.result_single .form_field input[type="email"] {

    width: 100%;

    padding: 10px 55px 10px 10px;

    border-radius: 25px;

    border: 1px solid #7e7e7e;

}



.result_single .form_field input[type="submit"] {

    position: absolute;

    top: 0;

    right: 0;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    border: none;

    z-index: 999;

    color: transparent;

    background: transparent;

}



.result_single .form_field {

    position: relative;

}



.get_test_report .signup_btn a {

    border-radius: 25px;

    padding: 10px;

    text-align: center;

    background: linear-gradient(228.8deg, #fe7363 0%, #fe7d46 100.72%);

    display: block;

    color: white;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 1px;

}



.gsr_inner h6 {

    font-size: 24px;

    font-family: bold;

    font-weight: 600;

}



.get_test_report .gsr_inner {

    padding: 20px;

    display: flex;

    height: 100%;

    align-items: center;

}



.get_test_report .gsr_inner form {

    width: 75%;

}



.get_test_report .gsr_inner .signup_btn {

    width: 15%;

}



.get_test_report .gsr_inner h6 {

    width: 10%;

    text-align: center;

    padding: 0px 10px;

}



.result_single .form_field input[type="email"]:focus {

    outline: none !important;

    border: 1px solid #fe7363;

}



@media only screen and (max-width: 575px) {

    .show_result .rs_footer {

        flex-wrap: wrap;

    }

    .rsi_single.add_remainder {

        width: 50%;

    }
    .popup_question {
    
        margin-top: 30px;
    
    }
    .popup__close img {
        width: 38px !important;
        height: 38px !important;
    }
    
    .rsi_single.download {

        width: 50%;

        justify-content: end;

    }

    .rsi_single.view_detail {

        width: 100%;

        padding-top: 16px;

    }

    .show_result h4.page_title {

        font-size: 32px;

    }
    #viewdetailaccordion button {
        font-size: 14px !important;
    }
    #viewdetailaccordion button i {
        font-size: 14px;
    }
    div#viewdetailaccordion p,
    div#viewdetailaccordion li {
        font-size: 14px;
    }

}



@media only screen and (max-width: 767px) {

    .get_test_report .gsr_inner {

        display: block;

    }

    .get_test_report .gsr_inner form {

        width: 100%;

    }

    .get_test_report .gsr_inner h6 {

        width: 100%;

        padding: 15px 0px;

    }

    .get_test_report .gsr_inner .signup_btn {

        width: 100%;

    }

}





/* show result page css end */





/* multiple select option css start  */



label.btn.toggle-checkbox>i.fa:before {

    content: "\f096";

}



label.btn.toggle-checkbox.active>i.fa:before {

    content: "\f046";

}



label.btn.active {

    box-shadow: none;

}



label.btn.primary.active {

    background-color: #337ab7;

    border-color: #2e6da4;

    color: #ffffff;

    box-shadow: none;

}



.option.mutliple_select .btn-lg {

    color: #000000;

    font-size: 20px;

    font-weight: 600;

    padding: 15px 35px;

    border-radius: 15px;

    border: 1px solid #000000;

    margin-top: 20px !important;

    margin-right: 10px;

}



.option.mutliple_select .form-group {

    margin-bottom: 0px;

}



.option.mutliple_select label.btn.primary.active {

    background-color: initial;

    background: linear-gradient(228.8deg, #fe7363 0%, #fe7d46 100.72%);

    border-color: initial;

    border: 1px solid grey !important;

    color: #ffffff;

    box-shadow: none;

}



.option.mutliple_select .btn:focus,

.option.mutliple_select .btn-active:focus,

.option.mutliple_select .btn.focus {

    background-color: initial;

    outline: none;

    outline: none !important;

    outline-offset: inherit;

    box-shadow: none !important;

}



.option.mutliple_select {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.dropdwnn {

    border: 1px solid #000000;

    border-radius: 12px;

    font-size: 16px;

    padding: 10px;

    margin-top: 20px;

    margin-right: 10px;

    background: rgb(255, 255, 255);

}





/* multiple select option css start  */





/* @media only screen and (min-width: 992px) { */



a.minheight {

    position: relative;

    top: -10px;

}





/* } */



/* accordion css start  */

.collapsible-link {
    width: 100%;
    position: relative;
    text-align: left;
}

div#viewdetailaccordion {
    width: 100%;
}

#viewdetailaccordion button {
    background: white;
    border-radius: 10px;
    margin-top: 25px !important;
    box-shadow: rgb(149 157 165 / 30%) 0px 8px 24px;
    font-size: 18px;
    color: black;
    font-weight: 600;
    font-family: 'bold';
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
}

#viewdetailaccordion button span {
    width: 97%;
}

#viewdetailaccordion button i {
    width: 2%;
    font-size: 20px;
    color: grey;
    transition: 0.5s;
}

#viewdetailaccordion button.collapsed i {
    transform: rotate(180deg);
    transition: 0.5s;
}

#viewdetailaccordion .btn-link:hover,
#viewdetailaccordion .btn-link:focus {
    text-decoration: none !important;
}

#viewdetailaccordion .btn:focus,
#viewdetailaccordion .btn:active:focus {
    outline: none !important;
}

#viewdetailaccordion .collapse {
    visibility: initial !important;
}

div#viewdetailaccordion p,
div#viewdetailaccordion li {
    font-size: 16px;
    color: black;
    font-weight: 500;
    font-family: medium;
}

#viewdetailaccordion .accrodion_inner {
    padding: 25px 0px 0px 0px;
}

#viewdetailaccordion .accrodion_inner p {
    padding-bottom: 25px;
}

#viewdetailaccordion .accrodion_inner p:last-child {
    padding: 0px !important;
}


/* accordion css start  */