.placement {
    transform: translateX(-15rem);
    background-color: var(--dark-blue);
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    width: calc(100% + 30rem);
    padding: 150px 15rem;
}

.placement-wrapper_header {
    display: flex;
    flex-direction: column;
    color: white;
    font-family: 'Rubik', sans-serif;
}

.placement-wrapper_header h1 {
    font-family: 'Circular', sans-serif;
    font-size: 52pt;
}

.placement-wrapper_header h2 {
    margin-top: 0.1rem;
    font-weight: 400;
    font-size: 22pt;
}

.placement-wrapper_header span {
    font-weight: 200;
    font-size: 12pt;
}

.placement hr {
    margin-top: 3.5rem;
}

.placement-wrapper_test {
    margin-top: 3.5rem;
}

#questions {
    color: white;
    font-family: 'Rubik', sans-serif;
    font-size: 18pt;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    scroll-margin-top: 28rem;
}

#question-header,
#question-id {
    font-weight: 500;
    margin-bottom: 1.2rem;
}

#question-options {
    display: flex;
    flex-direction: column;
}

#questions input[type="radio"] {
    display: none;
}

.question-option {
    color: #494949;
    font-weight: 400;
    background-color: var(--light-blue);
    border: 1px var(--blue) solid;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.question-option:hover, .selected-option {
    color: white;
    background-color: var(--blue);
    border: 1px white solid;
}

.placement-btns {
    display: flex;
    justify-content: space-between;
}

#next-btn, #previous-btn {
    font-size: 12pt;
    align-self: flex-end;
    margin-top: 1rem;
    padding: 10px 20px;
    color: white;
    background-color: var(--blue);
    border: 1px var(--light-blue) solid;
    border-radius: 10px;
    cursor: pointer;
}

#next-btn:hover {
    background-color: var(--dark-blue);
}

#question-info {
    display: flex;
    gap: 1rem;
    align-items: end;
}

#question-id {
    font-size: 18pt;
}

#questions > span {
    margin-top: 1rem;
    text-align: end;
}

#next-error-disabled {
    visibility: hidden;
}

#next-error-enabled {
    visibility: visible;
}

.warning-icon {
    fill: #F51400;
    transform: translateY(5px);
}

.invisible {
    visibility: hidden;
    opacity: 0;
}