/* Generell stil */
body {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 20px;
    color: #6b6b6b; /* Nøytral grå farge */
    margin: 20px;
}

/* Konteiner for spørsmålet */
.question-container {
    text-align: center;
    margin: 40px auto;
    font-family: 'Roboto', sans-serif;
    max-width: 800px;
}

/* Tekst for spørsmålet */
.question-text {
    font-size: 28px;
    margin-bottom: 30px;
    color: #6b6b6b;
    font-weight: 500;
    margin-top: 50px;
}

/* Skalaen */
.scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

/* Merkene for skalaen */
.label {
    font-size: 20px;
    font-weight: 500;
}

.label.agree {
    color: #4caf50; /* Grønn */
}

.label.disagree {
    color: #9c27b0; /* Lilla */
}

/* Gruppe for radioknappene */
.radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Skillelinje */
.divider {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 40px 0;
}

/* Individuelle radioknapp-beholdere */
.radio-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Skjul standard radioknapper */
.radio-wrapper input {
    display: none;
}

/* Sirklene for radioknappene */
.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.circle.large {
    width: 80px;
    height: 80px;
    border-width: 5px;
}

.circle.medium {
    width: 60px;
    height: 60px;
    border-width: 5px;
}

.circle.small {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.circle.neutral {
    background-color: #e0e0e0;
}

/* Fargeendringer når valgt */
.radio-wrapper input:checked + .circle {
    background-color: #4caf50; /* Grønn for valg på venstre side */
    border-color: #4caf50;
}

.radio-wrapper input[value="0"]:checked + .circle {
    background-color: #00bcd4; /* Lyseblå */
    border-color: #00bcd4;
}

.radio-wrapper input[value="1"]:checked + .circle,
.radio-wrapper input[value="2"]:checked + .circle,
.radio-wrapper input[value="3"]:checked + .circle {
    background-color: #9c27b0; /* Lilla */
    border-color: #9c27b0;
}

/* Container for Next-knappen */
.button-container {
    margin-top: 70px;
    display: flex;
    justify-content: center;  /* Sentrerer knappen horisontalt */
    width: 100%;
}

/* Stil for Next-knappen */
.next-button {
    font-size: 20px;              /* Størrelse på teksten */
    font-weight: bold;            /* Fet tekst */
    padding: 10px 40px;           /* Polstring for rund form */
    background-color: #8662C7;    /* Lilla bakgrunnsfarge */
    color: white;                 /* Hvit tekst */
    border: none;                 /* Ingen kantlinje */
    border-radius: 50px;          /* Gjør knappen rund */
    cursor: pointer;              /* Markør til hånd */
    display: flex;                /* Flex for å plassere tekst og pil */
    align-items: center;          /* Sentrerer innholdet vertikalt */
    justify-content: center;      /* Sentrerer innholdet horisontalt */
    gap: 10px;                    /* Avstand mellom tekst og pil */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Enkel skygge */
    margin-bottom: 30px;
    width: 300px;
    height: 50px;
}

/* Pil-ikon til høyre */
.next-button::after {
    content: '→';                /* Legger til pilen */
    font-size: 18px;             /* Størrelse på pilen */
}


.next-button:hover {
    background-color: #7a4bd1;
}

/* Mobiltilpasning */
@media (max-width: 768px) {
    .question-container {
        margin: 20px;
        max-width: 100%; /* Full bredde for mobil */
    }

    .question-text {
        font-size: 20px; /* Mindre tekst for mobil */
    }

    .scale {
        flex-wrap: wrap; /* Bryt linjen for å unngå overlapp */
    }

    .radio-group {
        gap: 10px; /* Mindre mellomrom mellom sirklene */
    }

    .circle.large {
        width: 60px; /* Juster størrelse for mobil */
        height: 60px;
    }

    .circle.medium {
        width: 50px;
        height: 50px;
    }

    .circle.small {
        width: 30px;
        height: 30px;
    }

    .label.agree,
    .label.disagree {
        position: absolute;
        font-size: 18px;
        margin-top: 10px; /* Flytt under knappen */
        margin-left: 50px;
        margin-right: 50px;
    }

    .label.agree {
        top: 100%; /* Under største sirkel på venstre side */
        left: -60px; /* Juster posisjon til venstre */
    }

    .label.disagree {
        top: 100%; /* Under største sirkel på høyre side */
        right: -60px; /* Juster posisjon til høyre */
    }

    .next-button {
        font-size: 20px;
        padding: 8px 16px;
    }
}


.navbar{border-bottom:none}body.has--stickysubnav .navbar{border-bottom:1px solid #EEEFF1}.navbar:has(~main .tools__progressbar.is--stuck){border-bottom:1px solid #EEEFF1}main.q-pt header{background-color:#33a474;position:relative;padding:5px 15px 15px}main.q-pt header h1{text-align:center;color:#fff;margin-bottom:10px;font-size:var(--font-h2-size-bp-sm);line-height:var(--font-h2-line-height-bp-sm);letter-spacing:var(--font-h2-spacing-bp-sm)}main.q-pt header .trademark{font-size:var(--font-p-md-size-bp-sm);line-height:var(--font-p-md-line-height-bp-sm);letter-spacing:var(--font-p-md-spacing-bp-sm);text-align:center;color:#fff}main.q-pt .tips{display:flex;align-items:center;justify-content:space-between;flex-direction:column;position:relative;padding:15px;overflow:hidden;background-color:#33a474}main.q-pt .tips .tip-highlight{display:none;position:absolute;top:70px;height:240px;width:370px;z-index:3;border-radius:10px;mix-blend-mode:hue}main.q-pt .tips .tip-highlight.first{inset-inline-start:calc(50% - 470px);background-color:#4298b4}main.q-pt .tips .tip-highlight.second{inset-inline-start:calc(50% - 150px);background-color:#e4ae3a}main.q-pt .tips .tip-highlight.third{background-color:#583f64;inset-inline-start:calc(50% + 170px)}main.q-pt .tips .tip{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;flex:0 0 100%;width:100%;max-width:550px;margin-bottom:10px;padding:10px;background-color:rgba(255,255,255,.8);border-radius:10px;position:relative;z-index:4}main.q-pt .tips .tip.last{margin-bottom:0}main.q-pt .tips .tip img{height:30px;width:30px}main.q-pt .tips .tip .text{padding-inline-start:10px;max-width:100%}main.q-pt .tips .tip .text .title{display:none;font-family:var(--font-family-titles);font-weight:var(--font-titles-weight);font-size:var(--font-p-lg-size-bp-sm);line-height:var(--font-p-lg-line-height-bp-sm);letter-spacing:var(--font-p-lg-spacing-bp-sm);margin-bottom:5px}main.q-pt .tips .tip .text .subtitle{font-size:var(--font-p-sm-size-bp-sm);line-height:var(--font-p-sm-line-height-bp-sm);letter-spacing:var(--font-p-sm-spacing-bp-sm)}main.q-pt .tips .shape{display:none;background-color:#33a474;position:absolute;left:0;right:0;top:-1px;bottom:0;z-index:2;width:100%;height:230px;clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),81% 100%,46% calc(100% - 32px),19% 100%,0 calc(100% - 15px))}main.q-pt .tips .shadow{display:none;position:absolute;left:0;right:0;top:95px;bottom:0;z-index:1;background-color:#f9f9f9}main.q-pt .progress-wrapper{position:fixed;bottom:0;left:0;right:0;z-index:11;display:flex;align-items:center;justify-content:center;background-color:#576071;padding:15px 0}main.q-pt .progress-wrapper .percentage{font-size:.8em;color:#fff;width:30px;flex:0 0 30px;text-align:end}main.q-pt .progress-wrapper .progress-bar{flex:0 0 calc(100% - 75px);height:4px;border-radius:10px;max-width:1000px;background-color:#fff;margin-inline-start:15px;position:relative;overflow:hidden}main.q-pt .progress-wrapper .progress-bar .filler{position:absolute;left:0;top:0;bottom:0;background-color:#33a474;transition:all .2s ease-in-out}main.q-pt .quiz-wrapper{min-height:600px}main.q-pt .gender.sp-select{margin:20px auto;width:100%;max-width:460px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 15px}main.q-pt .gender.sp-select .input__label{order:0;color:#343c4b;font-weight:var(--font-text-semibold-weight);text-align:center;line-height:1.5;margin-bottom:15px;font-size:1.125rem}main.q-pt .gender.sp-select .input__label span{color:rgb(var(--rgb-gray-10))}main.q-pt .gender.sp-select .input__note{order:1;color:rgb(var(--rgb-gray-10));text-align:center;margin-bottom:17px;margin-top:0;font-size:var(--font-p-md-size-bp-sm);line-height:var(--font-p-md-line-height-bp-sm);letter-spacing:var(--font-p-md-spacing-bp-sm)}main.q-pt .gender.sp-select .group__options{order:3;width:100%;max-width:300px}main.q-pt .action-row{display:flex;align-items:center;justify-content:center;padding:15px 0 90px;margin:0 auto;width:100%;max-width:700px;border-bottom:1px solid #DDDFE2}main.q-pt .action-row .sp-button{width:100%;max-width:300px}@media (min-width: 400px){main.q-pt header{padding:15px 30px}}@media (min-width: 460px){main.q-pt .tips{padding-top:20px}main.q-pt .tips .tip{padding:15px}main.q-pt .tips .tip img{height:40px;width:40px}main.q-pt .tips .tip .text{padding-inline-start:15px}}@media (min-width: 768px){main.q-pt header h1{margin-bottom:20px;font-size:var(--font-h1-size-bp-md);line-height:var(--font-h1-line-height-bp-md);letter-spacing:var(--font-h1-spacing-bp-md)}main.q-pt header .trademark{font-size:var(--font-p-md-size-bp-md);line-height:var(--font-p-md-line-height-bp-md)}main.q-pt header .trademark{font-size:var(--font-p-lg-size-bp-md);line-height:var(--font-p-lg-line-height-bp-md);letter-spacing:var(--font-p-lg-spacing-bp-md)}main.q-pt .tips{flex-direction:row;align-items:stretch;justify-content:center;margin-top:-1px;padding:20px 10px 30px;clip-path:polygon(0 0,100% 0,100% 100%,70% calc(100% - 15px),25% 100%,0 calc(100% - 10px))}main.q-pt .tips .tip{flex-direction:column;flex:0 0 calc(100% / 3 - 20px);width:calc(100% / 3 - 20px);max-width:unset;margin:10px 10px 0;padding:25px 0}main.q-pt .tips .tip img{height:75px;width:75px;margin-bottom:15px}main.q-pt .tips .tip .text{padding:0 15px}main.q-pt .tips .tip .text .title{font-size:var(--font-p-lg-size-bp-md);line-height:var(--font-p-lg-line-height-bp-md);letter-spacing:var(--font-p-lg-spacing-bp-md)}main.q-pt .tips .tip .text .title{margin-bottom:10px;display:block;text-align:center}main.q-pt .tips .tip .text .subtitle{font-size:var(--font-p-sm-size-bp-md);line-height:var(--font-p-sm-line-height-bp-md);letter-spacing:var(--font-p-sm-spacing-bp-md);text-align:center}main.q-pt .gender.sp-select .input__label{font-size:1.2em}main.q-pt .gender.sp-select .input__note{font-size:var(--font-p-md-size-bp-md);line-height:var(--font-p-md-line-height-bp-md)}}@media (min-width: 850px){main.q-pt .tips .tip .text{padding:0 30px}}@media (min-width: 992px){main.q-pt header{padding:25px 0}main.q-pt .tips{background-color:#fff;clip-path:none;overflow:unset;padding:0 0 30px}main.q-pt .tips .tip-highlight{display:block;width:300px;top:10px}main.q-pt .tips .tip{width:300px;flex:0 0 300px;margin:10px 10px 0;padding:20px 0}main.q-pt .tips .tip img{margin-bottom:30px;height:60px;width:60px}main.q-pt .tips .tip .text{padding:0 20px}main.q-pt .tips .shape{display:block;height:110px;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(50% + 320px) 100%,35% calc(100% - 15px),calc(50% - 310px) 100%,0 calc(100% - 15px))}main.q-pt .tips .shadow{display:block;box-shadow:none;bottom:0}main.q-pt .progress-wrapper.initial{padding:15px 0}main.q-pt .progress-wrapper.initial .percentage,main.q-pt .progress-wrapper.initial .progress-bar{display:none}main.q-pt .progress-wrapper{position:relative;margin-top:-30px;padding:25px 0;z-index:4;background-color:#f9f9f9}main.q-pt .progress-wrapper .percentage{color:rgb(var(--rgb-gray-10));font-size:1.2em;width:auto;flex:unset}main.q-pt .progress-wrapper .progress-bar{height:5px;flex:0 0 60%;background-color:#ddd}main.q-pt .gender.sp-select .input__label{font-size:1.3em}main.q-pt .gender.sp-select .group__options{max-width:350px}main.q-pt .action-row{padding:15px 0 60px;max-width:870px}main.q-pt .action-row .sp-button{min-width:350px}}@media (min-width: 992px) and (min-height: 900px){main.q-pt .tips{padding:20px 0 30px}main.q-pt .tips .tip-highlight{top:30px;height:260px}main.q-pt .tips .tip{padding:25px 0}main.q-pt .tips .tip img{height:75px;width:75px}main.q-pt .tips .tip .text{padding:0 30px}main.q-pt .tips .shape{height:140px;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(50% + 320px) 100%,40% calc(100% - 40px),calc(50% - 310px) 100%,0 calc(100% - 30px))}main.q-pt .progress-wrapper.initial{padding:25px 0}main.q-pt .progress-wrapper{padding:40px 0}main.q-pt .gender.sp-select{padding-right:0;padding-left:0;margin-top:45px;margin-bottom:30px;max-width:900px}main.q-pt .gender.sp-select .input__label{font-size:1.4em}main.q-pt .action-row{padding-bottom:160px}}@media (min-width: 1200px){main.q-pt header{padding:40px 30px}main.q-pt header h1{font-size:var(--font-h1-size-bp-lg);line-height:var(--font-h1-line-height-bp-lg);letter-spacing:var(--font-h1-spacing-bp-lg)}main.q-pt header .trademark{font-size:var(--font-p-md-size-bp-lg);line-height:var(--font-p-md-line-height-bp-lg)}main.q-pt header .trademark{line-height:var(--font-p-lg-line-height-bp-lg)}main.q-pt .tips .tip-highlight{width:350px}main.q-pt .tips .tip-highlight.first{inset-inline-start:calc(50% - 545px)}main.q-pt .tips .tip-highlight.second{inset-inline-start:calc(50% - 175px)}main.q-pt .tips .tip-highlight.third{inset-inline-start:calc(50% + 195px)}main.q-pt .tips .tip{width:350px;flex:0 0 350px}main.q-pt .tips .tip .text .title{line-height:var(--font-p-lg-line-height-bp-lg)}main.q-pt .tips .shape{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(50% + 320px) 100%,47% calc(100% - 15px),calc(50% - 310px) 100%,0 calc(100% - 15px))}main.q-pt .gender.sp-select .input__note{font-size:var(--font-p-md-size-bp-lg);line-height:var(--font-p-md-line-height-bp-lg)}}@media (min-width: 1200px) and (min-height: 900px){main.q-pt .tips .tip img{height:90px;width:90px;margin-bottom:35px}main.q-pt .tips .shape{height:155px;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(50% + 370px) 100%,47% calc(100% - 27px),calc(50% - 370px) 100%,0 calc(100% - 30px))}}@media (min-width: 1400px){main.q-pt .tips .tip .text{padding:0 20px}}