/*----------------------------------------------------------------------------*/
/*#region Root and Custom Variables */
/*----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* colors */
    --primary-color: #DA2128;
    --secondary-color: #191A37;
    --ix-white: #FFFFFF;
    --ix-black: #000000;
    --ix-grey: #DCDDDE;
    --ix-dark-grey: #9D9FA2;
    --header-footer-text-color: var(--ix-grey);
    --link-text-color: #191A37;
    --body-text-color: var(--ix-white);
    --input-text-color: var(--secondary-color);
    --dropdown-bg-color: var(--ix-grey);
    --dropdown-hover-bg-color: var(--primary-color);
    --dropdown-hover-text-color: var(--ix-white);
    --option-hover-bg-color: color-mix(in srgb, var(--primary-color), var(--ix-white) 90%);
    --option-selected-bg-color: var(--primary-color);
    --border-color: var(--ix-grey);
    --social-media-bg-color: var(--ix-dark-grey);
    --social-media-hover-bg-color: var(--ix-white);
    --social-media-hover-icon-color: var(--primary-color);
    --body-bg-color: linear-gradient(180deg, var(--secondary-color) 20%, #535797 50%, #E99A9B 100%);
    /* font related */
    --font-family: Poppins, Sans-serif; /* !!!!: "Century Gothic", Sans-serif;*/
    --font-family-ja-JP: "Noto Sans JP", sans-serif;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-tiny: 14px;
    --fs-small: 16px;
    --fs-normal: 18px;
    --fs-medium: 22px;
    --fs-large: 30px;
    --fs-xlarge: 40px;
    --lh-nano: 21px;
    --lh-tiny: 22px;
    --lh-small: 24px;
    --lh-normal: 27px;
    --lh-medium: 33px;
    --lh-large: 36px;
    --lh-xlarge: 48px;
    --ls-normal: 0.45px;
    /* width and height */
    --max-width: 1200px;
    --min-width: 300px;
    --header-height-desktop: calc(var(--logo-height) + (2 * var(--padding-normal)));
    --header-height-mobile: calc(var(--logo-height) + (2 * var(--padding-small)));
    --footer-height-desktop: calc(var(--logo-height) + (2 * var(--padding-normal)));
    --footer-height-mobile: calc(var(--logo-height) + (2 * var(--padding-small)));
    --logo-width: 138px;
    --logo-height: 49px;
    --banner-height: 317px;
    --btn-height: 46px;
    --input-height: 52px;
    /* padding and margin */
    --padding-tiny: 8px;
    --padding-small: 10.5px;
    --padding-normal: 16px;
    --padding-large: 24px;
    --padding-xlarge: 36px;
    --padding-xxlarge: 48px;
    /* overriding Bootstrap */
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: var(--fs-normal);
    --bs-body-font-weight: var(--fw-normal);
    --bs-body-line-height: var(--lh-normal);
    /* box shadow */
    --card-box-shadow: 0px 0px 30px 0px rgba(220, 221, 222, 1);
    --assessment-category-box-shadow: 0px 0px 30px 0px rgba(220, 221, 222, 0.2);
    /* variables for assessment overview page */
    --assessment-progress-ring-bg: rgba(157, 159, 162, 0.1);
    --assessment-red-point: #DA2128;
    --assessment-yellow-point: #FF4F00;
    --assessment-green-point: #3DDA21;
    --assessment-red: linear-gradient(243.58deg, #B11B21 35.69%, #ae1a1f 68.89%);
    --assessment-yellow: linear-gradient(122.82deg, #CC5F00 30.39%, #cc5f00 69.61%);
    --assessment-green: linear-gradient(360deg, #3DDA21 0%, #258514 100%);
    --assessment-subcategory-bg-color: rgba(255, 255, 255, 0.2);
    --assessment-red-chart: linear-gradient(166.6deg, #741215 -0.85%, #DA2128 43.69%);
    --assessment-wrapper-bg: linear-gradient(180deg, rgba(157, 159, 162, 0.1) 0%, rgba(157, 159, 162, 0.2) 100%);
    --assessment-border-radius: 6px;
}
/*----------------------------------------------------------------------------*/
/*#endregion Root*/
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region General Overriding */
/*----------------------------------------------------------------------------*/
body {
    font-family: var(--font-family);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100vh;
    position: relative;
    padding-top: var(--header-height-desktop);
}

body, p {
    /*font-family: var(--font-family);*/
    font-size: var(--fs-normal);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    color: var(--body-text-color);
}

.jp-font {
    font-family: var(--font-family-ja-JP) !important;
}

body main div.content-wrapper, header nav, .header {
    max-width: var(--max-width);
    min-width: var(--min-width);
    margin: 0 auto;
    width: 100%;
}

div.wrapper {
    min-height: calc(100vh - var(--header-height-desktop));
    display: flex;
    flex-direction: column;
    overflow : hidden;
}

div.wrapper main {
    flex: 1;
    background: var(--body-bg-color);
}

div.content-wrapper {
    padding: var(--padding-xxlarge) var(--padding-normal);
}

.banner-wrapper {
    height: var(--banner-height);
    object-fit: cover;
    max-width: var(--banner-max-width);
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.banner-wrapper img {
    height: var(--banner-height);
    width: 100%;
    object-fit: cover;
}

/* !!!!: The text inside the banner, the style is not confirmed by Jelly and client yet */
.banner-wrapper h2 {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    padding: var(--padding-large);
    width: 100%;
}

.row {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

a, a:focus, a:hover {
    color: var(--link-text-color);
    text-decoration: none;
    cursor: pointer;
}

#loadingindicator{
    top: 0;
}

@media screen and (max-width: 768px) {
    body {
        padding-top: var(--header-height-mobile);
    }

    div.wrapper {
        min-height: calc(100vh - var(--header-height-mobile));
    }

    div.content-wrapper {
        padding: var(--padding-xxlarge) var(--padding-large);
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion  General Overriding */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Component - Header */
/*----------------------------------------------------------------------------*/
header, .header {
    background: var(--secondary-color);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

header nav, .header {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    padding: var(--padding-normal);
}

header a {
    color: var(--ix-white);
    padding: 16px 16px 16px 16px !important;
}

header a:hover, header a:focus {
    color: var(--ix-white);
}

header a.dropdown-toggle, header a.dropdown-toggle:focus, header a.dropdown-toggle:hover {
    color: var(--header-footer-text-color);
}

header .dropdown-item {
    color: var(--link-text-color);
}

header nav .dropdown-menu {
    padding: 0;
    background-color: var(--dropdown-bg-color);
    border: none;
    border-radius: 0;
    min-width: 134px;
}

header nav .dropdown-menu a {
    padding: 8px;
}

header .dropdown-item:focus, header .dropdown-item:hover, header .dropdown-item.active, header .dropdown-item:active {
    color: var(--dropdown-hover-text-color);
    background-color: var(--dropdown-hover-bg-color);
}

.dropdown-toggle {
    padding-right: 24px !important;
}

.dropdown-toggle::after {
    display: block;
    border: none;
    background-image: url("/assets/icons/dropdown.svg");
    background-repeat: no-repeat;
    height: 27px;
    width: 16px;
    position: absolute;
    top: 0;
    right: 0;
    background-position: center;
}

a.logo {
    padding: 0 !important;
}

.logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    object-fit: fill;
}

header .mobile-menu {
    background-image: url("/assets/icons/menu.svg");
    background-repeat: no-repeat;
    height: calc(27px + (2 * var(--padding-small)));
    width: calc(24px + (2 * var(--padding-large)));
    background-position: center;
}

header .offcanvas-end {
    top: var(--header-height-mobile);
}

header .offcanvas-body {
    margin: 0 var(--padding-normal);
    overflow: hidden;
}

header .offcanvas-body, header .accordion-body {
    padding: 0;
    font-size: var(--fs-normal);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tiny);
}

header .accordion-body a.dropdown-item {
    padding: var(--padding-tiny) !important;
    border-bottom: 1px solid var(--border-color);
}

header .accordion-flush .accordion-item .accordion-button {
    background: none;
    color: var(--link-text-color);
    box-shadow: none;
    padding: var(--padding-tiny) 0;
    font-size: var(--fs-normal);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tiny);
    border-bottom: 1px solid var(--border-color);
}

header .accordion-button:focus {
    border-color: none;
    box-shadow: none;
}

header .accordion-button:not(.collapsed)::after {
    background-image: url("/assets/icons/dropdown-black.svg");
}

header .accordion-button::after {
    background-image: url("/assets/icons/dropdown-black.svg");
}

@media screen and (max-width: 768px) {
    header nav {
        padding: var(--padding-small) 0 var(--padding-small) var(--padding-large);
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion Component - Header */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Component - Footer */
/*----------------------------------------------------------------------------*/
footer {
    background-color: var(--secondary-color);
    color: var(--header-footer-text-color);
    padding: var(--padding-xlarge) var(--padding-normal) 50px var(--padding-normal);
}

footer p {
    color: var(--header-footer-text-color);
    font-weight: var(--fw-normal);
    font-size: 13px;
    line-height: var(--fs-small);
}

.footer-wrapper {
    max-width: var(--max-width);
    min-width: var(--min-width);
    margin: 0 auto;
}

footer .company-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0;
}

.social-media-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 10px;
    align-items: center;
}

.social-media-wrapper a {
    background: var(--social-media-bg-color);
}

.social-media-wrapper a:hover {
    background: var(--social-media-hover-bg-color);
}

i.social-media {
    display: block;
    background-repeat: no-repeat;
    height: 32px;
    width: 35px;
    background-position: center;
}

i.social-media.linkedin {
    background-image: url("/assets/social-media-icons/Linkedin.svg");
    -webkit-mask-image: url('/assets/social-media-icons/Linkedin.svg');
    mask-image: url('/assets/social-media-icons/Linkedin.svg');
}

i.social-media.wechat {
    background-image: url("/assets/social-media-icons/WeChat.svg");
    -webkit-mask-image: url('/assets/social-media-icons/WeChat.svg');
    mask-image: url('/assets/social-media-icons/WeChat.svg');
}

i.social-media.instagram {
    background-image: url("/assets/social-media-icons/Instagram.svg");
    -webkit-mask-image: url('/assets/social-media-icons/Instagram.svg');
    mask-image: url('/assets/social-media-icons/Instagram.svg');
}

i.social-media.youtube {
    background-image: url("/assets/social-media-icons/Youtube.svg");
    -webkit-mask-image: url('/assets/social-media-icons/Youtube.svg');
    mask-image: url('/assets/social-media-icons/Youtube.svg');
}

.social-media-wrapper a:hover i.social-media {
    background: var(--social-media-hover-icon-color);
}

@media screen and (max-width: 768px) {
    footer {
        padding: var(--padding-xlarge) var(--padding-large) 50px var(--padding-large);
    }

    footer .company-info {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 36px;
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion Component - Footer */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Component - Heading, Label, Text related */
/*----------------------------------------------------------------------------*/
h2 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xlarge);
    line-height: var(--lh-xlarge);
    letter-spacing: var(--ls-normal);
    margin-bottom: 8px;
}

h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-large);
    line-height: var(--lh-large);
    letter-spacing: var(--ls-normal);
}

p {
    margin-bottom: var(--padding-large);
}

label, .form-label, .text-danger.field-validation-error {
    color: var(--input-text-color);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-bold);
    line-height: var(--lh-nano);
}

.form-label {
    margin-bottom: 4px;
}

label.required::after {
    content: " *";
    color: var(--primary-color);
}

.form-control, select, .form-select {
    height: var(--input-height);
    color: var(--input-text-color);
}

select option {
    color: var(--input-text-color);
}

.form-control, select, .form-select, textarea {
    border-radius: 0;
    border-color: var(--border-color);
}

.form-control:focus, input:focus, select:focus, .form-select:focus, textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: none;
}

.disclaimer {
    line-height: 16px;
    margin-top : 24px;
    font-size: 12px;
    font-style: italic
}

@media screen and (max-width: 768px) {
    .disclaimer {
        line-height: 16px;
        margin-top: 24px;
        font-size: 10px;
        font-style: italic
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion Component - Heading, Label, Text related */
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
/*#region Component - Form */
/*----------------------------------------------------------------------------*/
.phone-code {
    padding-left: 16px;
    flex: 0 0 auto !important;
    width: 20% !important;
    text-align: center;
}

.ix-card {
    background: var(--ix-white);
    box-shadow: var(--card-box-shadow);
    margin-bottom: var(--padding-large);
    padding: var(--padding-large) calc(var(--padding-large) - var(--padding-tiny));
}
.ix-card#user-info {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--padding-normal);
}

.ix-card .ix-input {
    padding: 0 var(--padding-tiny);
}

.question-progress {
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: var(--padding-xlarge);
    display: none;
}

.question-progress .progress {
    width: calc(100% - 40px - 16px);
    height: 10.01px;
    border-radius: 0;
}

.question-progress .progress-bar {
    background: var(--primary-color);
}

.question-progress #progressPercentage {
    font-size: var(--fs-normal);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    color: var(--ix-grey);
    text-align: right;
    margin-left: 16px;
}

.question-container {
    display: none;
}

.question-container.active {
    display: block;
}

#quiz .question-container {
    margin-bottom: var(--padding-xlarge);
}
#quiz .ix-btn#submit-btn, #quiz .ix-btn#back-btn, #quiz .ix-btn#next-btn {
    display: none;
}

.question {
    padding: 24px !important;
}

    .question > *, .options label, .options .option-label div {
        font-size: var(--fs-normal);
        font-weight: var(--fw-normal);
        line-height: var(--lh-normal);
        letter-spacing: var(--ls-normal);
        color: var(--input-text-color);
    }

.question div {
    font-size: 30px;
    font-weight: var(--fs-normal);
    line-height: 72px;
    color: var(--ix-dark-grey);
    height: 72px;
    margin-bottom: var(--padding-normal);
}

.question p {
    margin-bottom: 0;
}

.question span#currentQuestion {
    font-size: 60px;
    font-weight: var(--fw-bold);
    line-height: 72px;
    color: var(--primary-color);
}

.options label {
    display: flex;
    background: var(--ix-white);
    padding: 8.5px;
    margin: 5px 0;
    cursor: pointer;
    border: 1px solid var(--border-color);
    color: var(--input-text-color);
    column-gap: 12px;
    cursor: pointer;
}

.options label span {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-tiny);
    line-height: 34px;
    background: var(--ix-grey);
    color: var(--input-text-color);
}

.options input {
    display: none;
}

.options label:hover {
    background: var(--option-hover-bg-color);
    border-color: var(--option-hover-bg-color);
}

.options label:hover span {
    background: var(--ix-white);
    color: var(--option-selected-bg-color);
}

.options input:checked + label {
    background: var(--option-selected-bg-color);
    border-color: var(--option-selected-bg-color);
    color: var(--ix-white);
}

    .options input:checked + label span {
        background: var(--ix-white);
        color: var(--option-selected-bg-color);
    }

@media screen and (max-width: 768px) {
    .ix-card {
        padding: 12px calc(12px - var(--padding-tiny));
    }

    .question > *, .options label {
        font-size: var(--fs-tiny);
        font-weight: var(--fw-normal);
        line-height: 17px;
    }

    .question div {
        font-size: var(--fs-normal);
        line-height: var(--lh-normal);
        height: 49px;
    }

    .question span#currentQuestion {
        font-size: var(--fs-xlarge);
        line-height: 49px;
    }

    .phone-code {
        min-width: 30% !important;
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion Component - Form */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Component - Button */
/*----------------------------------------------------------------------------*/
.ix-btn, .ix-btn:focus {
    height: var(--btn-height);
    display: inline-block;
    padding: 14.5px 18px;
    font-size: var(--fs-tiny);
    font-weight: var(--fw-bold);
    line-height: 17px;
    letter-spacing: var(--ls-normal);
    border: none;
    color: var(--ix-white);
    background: none;
    position: relative;
    text-transform: uppercase;
    margin: 0;
}

.ix-btn:hover {
    color: var(--primary-color);
}

.ix-btn.disabled {
    pointer-events: none;
    color: var(--ix-dark-grey);
    background-color: var(--ix-grey) !important;
}

.ix-btn.btn-primary::after {
    border: none;
    content: "";
    -webkit-mask-image: url('/assets/icons/arrow-right.svg');
    mask-image: url('/assets/icons/arrow-right.svg');
    background-repeat: no-repeat;
    height: 18px;
    width: 27px;
    position: absolute;
    right: 18px;
    background-position: center;
    background: var(--ix-white);
}
.ix-btn.btn-primary, .ix-btn.btn-primary:hover, .ix-btn.btn-primary:focus {
    background-color: var(--primary-color);
    box-shadow: none;
    padding: 14.5px 60px 14.5px 18px;
}

.ix-btn.btn-primary::after {
    border: none;
    content: "";
    -webkit-mask-image: url('/assets/icons/arrow-right.svg');
    mask-image: url('/assets/icons/arrow-right.svg');
    background-repeat: no-repeat;
    height: 18px;
    width: 27px;
    position: absolute;
    right: 18px;
    background-position: center;
    background: var(--ix-white);
}

.ix-btn.btn-primary:hover {
    color: var(--ix-black);
}

    .ix-btn.btn-primary:hover::after {
        background: var(--ix-black);
    }

.ix-btn.btn-primary.disabled::after {
    background: var(--ix-dark-grey) !important;
}

.ix-card .ix-btn {
    margin-right: var(--padding-tiny);
}

.btn-container {
    display: flex;
    gap: var(--padding-normal);
    justify-content: flex-end
}

/*----------------------------------------------------------------------------*/
/*#endregion Component - Button */
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*#region Page - Summary */
/*----------------------------------------------------------------------------*/
.assessment-wrapper {
    background: var(--assessment-wrapper-bg);
    padding: var(--padding-large);
    display: flex;
    flex-direction: row;
    column-gap: var(--padding-large);
    row-gap: var(--padding-large);
}


div.progress-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: calc(100% - 350px - var(--padding-large));
    background: var(--assessment-progress-ring-bg);
}

.outer {
    margin: 0;
    padding: 0;
    width: 400px;
    height: 400px;
    padding: 20px;
    border-radius: 50%;
}

.inner {
    margin: 0;
    padding: 0;
    height: 360px;
    width: 360px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.inner > * {
    font-size: var(--fs-normal);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    color: var(--ix-grey);
}

.inner div {
    font-size: var(--lh-small);
}

.inner span {
    font-weight: var(--fw-bold);
    color: var(--assessment-red-point);
    font-size: 90px;
    line-height: 109px;
    font-family: "Inter";
}

.inner p {
    margin: 0;
    margin-top: calc(6px - 22px);
}

circle {
    stroke-dashoffset: 1257;
    background: url(#GradientColorRed);
}

@keyframes progressAnim {
    100% {
        stroke-dashoffset: var(--overall-score); 
    }
}

@keyframes progress-animation {
    100% {
        -webkit-mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black, transparent var(--progress-degree));
        mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black var(--progress-degree), transparent var(--progress-degree));
        -webkit-mask-composite: intersect;
        mask-composite: intersect;
    }

    75% {
        -webkit-mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.75), transparent calc(var(--progress-degree) * 0.75));
        mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.75), transparent calc(var(--progress-degree) * 0.75));
        -webkit-mask-composite: intersect;
        mask-composite: intersect;
    }

    50% {
        -webkit-mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.5), transparent calc(var(--progress-degree) * 0.5));
        mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.5), transparent calc(var(--progress-degree) * 0.5));
        -webkit-mask-composite: intersect;
        mask-composite: intersect;
    }

    20% {
        -webkit-mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.25), transparent calc(var(--progress-degree) * 0.25));
        mask: radial-gradient(closest-side, transparent 70%, black 70%), conic-gradient(black 0deg, black calc(var(--progress-degree) * 0.25), transparent calc(var(--progress-degree) * 0.25));
        -webkit-mask-composite: intersect;
        mask-composite: intersect;
    }
}

.progress {
    animation: progressAnim 0.4s ease-in forwards;
}

.progress-ring.red circle.progress {
    stroke: url(#GradientColorRed);
}

.progress-ring.red .inner span {
    color: var(--assessment-red-point);
}
.progress-ring.yellow circle.progress {
    stroke: url(#GradientColorYellow);
}

.progress-ring.yellow .inner span {
    color: var(--assessment-yellow-point);
}

.progress-ring.green circle.progress {
    stroke: url(#GradientColorGreen);
}

.progress-ring.green .inner span {
    color: var(--assessment-green-point);
}

.progress-ring svg {
    position: absolute;
    top: 0;
    left: 0;
}

.score-category {
    display: flex;
    column-gap: 78px;
    margin-top: 48px;
}

.score-category p {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-normal);
    line-height: var(--lh-small);
}

.score-category p:first-child:before {
    content: "";
    display: inline-block;
    width: 11.5px;
    height: 11.5px;
    border-radius: 50%;
    margin-right: 9.2px;
}

.score-category .red p:first-child:before {
    background: var(--assessment-red-point);
}

.score-category .yellow p:first-child:before {
    background: var(--assessment-yellow-point);
}

.score-category .green p:first-child:before {
    background: var(--assessment-green-point);
}

.score-category p:last-child {
    padding-left: calc(11.5px + 9.2px);
}

.assessment-categories {
    display: flex;
    flex-direction: column;
    row-gap: var(--padding-large);
}

.assessment-category {
    border-radius: var(--assessment-border-radius);
    width: 350px;
    max-width: 350px;
    box-shadow: var(--assessment-category-box-shadow);
    border: 1px solid var(--ix-dark-grey);
}

.assessment-category div:last-of-type {
    border-bottom-left-radius: calc(var(--assessment-border-radius) - 2px);
    border-bottom-right-radius: calc(var(--assessment-border-radius) - 2px);
}

.assessment-category.red {
    background: var(--assessment-red);
}

.assessment-category.yellow {
    background: var(--assessment-yellow);
}

.assessment-category.green {
    background: var(--assessment-green);
}

.assessment-category h4 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-normal);
    line-height: 19.2px;
    padding: var(--padding-normal);
    text-align: center;
    margin: 0;
}

.assessment-category div {
    background: var(--assessment-subcategory-bg-color);
    font-weight: var(--fw-normal);
    font-size: var(--fs-normal);
    line-height: 19.2px;
    text-align: center;
    margin-top: var(--padding-tiny);
    padding: var(--padding-tiny) 12px;
}

.assessment-report-wrapper {
    margin-top: var(--padding-large);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.assessment-report-wrapper .mask-report, .assessment-report-wrapper .report {
    box-shadow: 0px 0px 30px 0px rgba(220, 221, 222, 1);
    width: 1168px;
    height: 420px;
    background: var(--ix-white);
    filter: blur(34px)
}

.assessment-report-wrapper .mask-report {
    user-select: none; /* Prevent text selection */
    pointer-events: none; /* Disable interactions */
}

.assessment-report-wrapper .mask-report .section-head {
    width: 100%;
    height: 104px;
}

.assessment-report-wrapper .mask-report .section-head.red {
    background: var(--assessment-red-point);
}

.assessment-report-wrapper .mask-report .section-head.yellow {
    background: var(--assessment-yellow-point);
}

.assessment-report-wrapper .mask-report .section-head.green {
    background: var(--assessment-green-point);
}

.assessment-report-wrapper form {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    margin: 0 auto;
}

.assessment-report-wrapper p, .assessment-report-wrapper h3 {
    color: var(--input-text-color);
    padding-left: var(--padding-tiny);
    padding-right: var(--padding-tiny);
}
    .assessment-report-wrapper div.ix-card {
        max-width: 569px;
        margin: 0 auto;
    }

@media screen and (max-width: 1200px) {
    .assessment-wrapper {
        flex-direction: column;
        justify-content: center;
        min-width: 327px;
    }

    div.progress-ring {
        width: 100%;
    }

    .score-category {
        margin-top: var(--padding-large);
        margin-bottom: var(--padding-large);
    }

    .assessment-categories {
        flex-direction: row;
        column-gap: var(--padding-large);
    }

    .assessment-report-wrapper .mask-report, .assessment-report-wrapper .report {
        width: 100%;
    }
}

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

    .content-wrapper:has(.assessment-wrapper), .assessment-wrapper {
        padding-left: var(--padding-normal);
        padding-right: var(--padding-normal);
    }

    div.progress-ring {
        background: none;
    }

    .score-category {
        flex-direction: column;
        row-gap: var(--padding-large);
        align-items: flex-start;
        width: 100%;
        padding-left: var(--padding-large);
        padding-right: var(--padding-large);
    }

    .assessment-categories {
        flex-direction: column;
    }

    .assessment-category {
        width: 100%;
        max-width: unset;
        min-width: calc(var(--min-width) - var(--padding-normal));
    }

    .assessment-report-wrapper div.ix-card {
        padding: var(--padding-large) var(--padding-normal);
    }

}

@media screen and (max-width: 576px) {
    .progress-ring svg, .inner, .outer {
        height: 280px;
        width: 280px;
        padding: 0;
    }

    .progress-ring circle {
        transform: scale(0.7);
        stroke-width: 35px;
    }

        .progress-ring circle.progress {
            transform-origin: 132px 188px;
            transform: rotate(-90deg) scale(0.7);
            stroke-width: 37px;
        }

    .inner div {
        font-size: 16.8px;
        line-height: 20px;
        letter-spacing: 0.31px;
    }

    .inner span {
        font-size: 60px;
        line-height: 76px;
        letter-spacing: 0.31px;
    }

    .inner p {
        font-size: 12.6px;
        line-height: 15px;
        letter-spacing: 0.31px;
        margin-top: calc(3.8px - 15px);
    }
    
}

.summary-title {
    font-size: 40px;
}

.summary-end {
    margin-top: 24px;
    color: black;
    font-style: italic;
}

.assessment-categories h4,
.assessment-categories div {
    font-size: 16px;
}

.ix-card h3 {
    font-size: 30px;
}

.ix-card p {
    font-size: 18px;
}

@media screen and (max-width: 768px) {
    .summary-title {
        font-size: 24px;
    }

    .ix-card h3 {
        font-size: 24px;
    }

    .ix-card p {
        font-size: 14px;
    }
}
/*----------------------------------------------------------------------------*/
/*#endregion Page - Summary */
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
/*#region Component - HomePage */
/*----------------------------------------------------------------------------*/
.Home-Title {
    font-size: 34px;
}

.Home-Description {
    font-size: 18px;
}

.Home-List {
    font-size: 18px;
    margin-bottom: 0px;
}

.banner-desktop {
    display: block;
}

.banner-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .Home-Title {
        font-size: 24px;
    }

    .Home-Description {
        font-size: 14px;
    }

    .Home-List {
        font-size: 14px;
        margin-bottom: 0px;
    }

    .banner-desktop {
        display: none;
    }

    .banner-mobile {
        display: block;
    }
}

/*----------------------------------------------------------------------------*/
/*#endregion Component - HomePage */
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
/*#region Component - Question */
/*----------------------------------------------------------------------------*/
.question-container h2{
    font-size: 40px;
}

.question-container p {
    font-size: 18px;
}

@media screen and (max-width: 768px) {
    .question-container h2 {
        font-size: 24px;
    }

    .question-container p {
        font-size: 14px;
    }
}

/*----------------------------------------------------------------------------*/
/*#endregion Component - Question */
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
/*#region Component - Template */
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
/*#endregion Component - Template */
/*----------------------------------------------------------------------------*/