@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/******************************************************************/
/* Variables */

:root {
    /* Main container */
    --desktop-width: 980px;
    /* Font family */
    --main-font-family: 'Fira Sans';
    /* Colors */
    --progress-bg-color: #ebeff2;
    --progress-color: #496773;
    --main-bg-color: #ebeff2;
    --button-bg-color: #c5d1d9;
    --button-hover-bg-color: #496773c2;
    --button-selected-bg-color: #496773;
    --button-selected-color: #fff;
    --navbutton-color: #fff;
    --navbutton-bg-color: #496773;
    --navbutton-hover-bg-color: #283940;
    --userbutton-hover-bg-color: #3857611A;
    --footer-bg-color: #595959;
    --footer-color: #a6a6a6;
    --selection-bg-color: #496773;
    --selection-color: #fff;
    --invalid-input-color: tomato;
    /* Font sizes */
    --main-font-size: 14pt;
    --larger-font-size: 17pt;
    --largest-font-size: 20pt;
    --question-text-size: 1.7em;
    --instruction-text-size: 1.2em;
    --category-label-size: 1em;
    --navbutton-text-size: 1em;
    --input-text-size: 1em;
    /* Font weights */
    --question-text-weight: 600;
    --instruction-text-weight: 400;
}

@media only screen and (max-width:768px) {
    :root {
        /* Font sizes */
        --main-font-size: 12pt;
        --larger-font-size: 15pt;
        --largest-font-size: 18pt;
    }
}

@media only screen and (max-width:550px) {
    :root {
        /* Font sizes */
        --main-font-size: 10pt;
        --larger-font-size: 13pt;
        --largest-font-size: 16pt;
    }
}

/******************************************************************/

/* General */
* {
    font-family: var(--main-font-family), sans-serif;
    box-sizing: border-box;
    line-height: 1;
    /* PBI #165892 */
    word-wrap: break-word;
    overflow: visible; /* Allows text to extend the container */
    white-space: normal; /* Ensures text wraps properly */
    /* END PBI #165892 */
}

    *::selection {
        background: var(--selection-bg-color);
        color: var(--selection-color);
    }

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--main-bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--button-hover-bg-color);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--button-selected-bg-color);
        cursor: pointer;
    }


html.fz-default {
    font-size: var(--main-font-size);
}

html.fz-larger {
    font-size: var(--larger-font-size);
}

html.fz-largest {
    font-size: var(--largest-font-size);
}

body {
    opacity: 0;
    transition: 0.3s opacity;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

    body.loaded {
        opacity: 1;
    }

/* Header */

#header {
    width: var(--desktop-width);
    max-width: 100%;
    margin: 0px auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

@media only screen and (max-width: 980px) {
    #header {
        padding: 10px 10px 0;
    }
}

div#logoContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

    div#logoContainer img {
        max-width: 48%;
        display: block;
    }

div#progress {
    width: 100%;
    margin: auto;
    height: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--progress-bg-color);
}

@media only screen and (max-width: 980px) {
    div#progress {
        width: 95%;
    }
}

div#progress-bar {
    background: var(--progress-color);
    width: 0%;
    height: 100%;
    transition: 0.4s width;
}

/* Main container */

#interview-screen {
    width: var(--desktop-width);
    max-width: 100%;
    padding: 60px;
    margin: 30px auto 60px;
    transform: translateY(-80px);
    transition: 0.2s transform;
    background: var(--main-bg-color);
    border-radius: 20px;
    position: relative;
    z-index: 10;
}

body.loaded #interview-screen {
    transform: translateY(0);
}

@media screen and (max-width:980px) {
    #interview-screen {
        margin: 20px auto 60px;
        padding: 10px;
    }
}

.segment {
    position: relative;
}

/* Question text */
.group.text:not(.matrix .group.text) {
    font-size: var(--question-text-size);
    font-weight: var(--question-text-weight);
    text-align: center;
    display: block;
}

    .group.text:not(.matrix .group.text) p {
        margin: 0 auto 0.5em;
        line-height: 1.2;
    }

.group.text img {
    max-width: 100%;
}

.group.text.welcome-page {
    text-align: right !important;
    font-weight: normal !important;
}

h1.welcome-title {
    text-align: left;
    margin: 0;
}

h2.welcome-salutation {
    text-align: right;
    font-weight: normal;
    margin: 0;
}


/* Instruction */

.instruction {
    font-size: var(--instruction-text-size);
    text-align: center;
    font-weight: var(--instruction-text-weight);
}

    .instruction.shown {
        display: block;
    }

@media only screen and (min-width:1280px) and (hover) {
    .segment[data-popover="customized"] .instruction.shown {
        position: absolute;
        left: calc(100% + 80px);
        width: 9.5vw;
        max-width: 200px;
        background: var(--main-bg-color);
        padding: 10px;
        font-size: 12pt;
        min-height: 200px;
        border-radius: 10px;
        text-align: left;
    }

        .segment[data-popover="customized"] .instruction.shown:before {
            content: 'TIPS';
            position: absolute;
            top: -30px;
            color: var(--button-selected-bg-color);
            font-weight: bold;
            font-size: 14pt;
        }
}

/* Containers */
.segment > .group {
    margin-top: 20px;
}

/* Single response */

.category.single {
    margin: 10px 0;
    border-radius: 10px;
    background: var(--button-bg-color);
    transition: background 0.2s, color 0.2s;
    font-size: var(--category-label-size);
    width: 100%;
}

    .category.single.selected {
        background: var(--button-selected-bg-color);
        color: var(--button-selected-color);
    }

@media only screen and (hover) {
    .category.single:hover {
        background: var(--button-hover-bg-color);
        color: var(--button-selected-color);
    }

    .category.single.selected:hover {
        background: var(--button-selected-bg-color);
    }
}

.category.single .category-padding {
    padding: 20px;
}

.category.single .category-input {
    visibility: hidden;
    position: absolute;
    z-index: -9999;
}

.category.single .category-label {
    font-size: var(--category-label-size);
}

.categorylist select {
    margin: 10px 0;
    border-radius: 10px;
    background: var(--button-bg-color);
    transition: background 0.2s, color 0.2s;
    font-size: var(--category-label-size);
    width: 100%;
    padding: 5px;
}

    .categorylist select + .categorylist {
        display: none;
    }

/* Autocomplete */

.segment[data-autocomplete] .categorygroup {
    height: 0;
    overflow: hidden;
}

.ui-menu {
    padding: 0;
    margin-top: 5px;
    max-height: 44vh;
    overflow: auto;
    max-width: calc(100% - 20px);
}

    .ui-menu .ui-menu-item a {
        padding: 2px 15px;
        font-size: 1em;
        transition: padding 0.2s;
    }

        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-widget-header .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus,
        .ui-widget-header .ui-state-focus,
        .ui-menu .ui-menu-item a.ui-state-focus,
        .ui-menu .ui-menu-item a.ui-state-active {
            border: 0;
            background: var(--button-hover-bg-color);
            margin: 0;
        }

        .ui-menu .ui-menu-item a.ui-state-focus,
        .ui-menu .ui-menu-item a.ui-state-active {
            padding-left: 25px;
            padding-right: 5px;
        }



/* Multiple response */

.category.multi {
    margin: 10px 0;
    border-radius: 10px;
    background: var(--button-bg-color);
    transition: background 0.2s, color 0.2s;
    width: 100%;
}

    .category.multi.selected {
        background: var(--button-selected-bg-color);
        color: var(--button-selected-color);
    }

@media only screen and (hover) {
    .category.multi:hover {
        background: var(--button-hover-bg-color);
        color: var(--button-selected-color);
    }

    .category.multi.selected:hover {
        background: var(--button-selected-bg-color);
    }
}

.category.multi .category-padding {
    padding: 20px;
}

.category.multi .category-input {
    visibility: hidden;
    position: absolute;
    z-index: -9999;
}

.category.multi .category-label {
    font-size: var(--category-label-size);
}

/* Both single and multi */

.segment[data-columns] .categorylist > .categorygroup {
    display: flex;
    flex-wrap: wrap;
}

    .segment[data-columns] .categorylist > .categorygroup > .category {
        margin: 5px;
    }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-1 {
            width: 100%;
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-2 {
            width: calc(50% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-3 {
            width: calc(33.33% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-4 {
            width: calc(25% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-5 {
            width: calc(20% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-6 {
            width: calc(16.66% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-7 {
            width: calc(14.28% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-8 {
            width: calc(12.5% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-9 {
            width: calc(11.11% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-10 {
            width: calc(10% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-11 {
            width: calc(9.09% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-12 {
            width: calc(8.33% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-13 {
            width: calc(7.69% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-14 {
            width: calc(7.14% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-15 {
            width: calc(6.66% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-16 {
            width: calc(6.25% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-17 {
            width: calc(5.88% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-18 {
            width: calc(5.55% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-19 {
            width: calc(5.26% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-20 {
            width: calc(5% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-21 {
            width: calc(4.76% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-22 {
            width: calc(4.54% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-23 {
            width: calc(4.34% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-24 {
            width: calc(4.16% - 10px);
        }

        .segment[data-columns] .categorylist > .categorygroup > .category.col-25 {
            width: calc(4% - 10px);
        }

.categorygroup .category {
    position: relative;
}

    .categorygroup .category .category-label.center-label {
        text-align: center;
        display: block;
    }

    .categorygroup .category .category-label img {
        display: block;
        margin: auto;
        margin-bottom: 15px;
        max-width: 100%;
    }

        .categorygroup .category .category-label img.broken {
            display: inline-block;
            position: relative;
            top: 30px;
            right: 30px;
            font-style: italic;
            color: var(--button-selected-bg-color);
        }

    .categorygroup .category.selected .category-label img.broken {
        color: var(--button-bg-color);
    }

    .categorygroup .category span.zoomIcon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20pt;
    }

        .categorygroup .category span.zoomIcon a {
            text-decoration: none;
        }

.subhead .group.text,
.categorygroup .category {
    padding: 0px;
}


/* Open question */

textarea.open {
    width: 100%;
    border: 0;
    border-radius: 7px;
    margin: 8px 0;
    min-height: calc(1em * 5 + 20px);
    resize: vertical;
    padding: 10px;
    font-size: var(--input-text-size);
    max-width: 100%;
}

/* Number question */
.open.number {
    border: 0;
    border-radius: 7px;
    margin: 5px 0;
    padding: 10px;
    box-shadow: inset 0px 0px 1px 2px #a6a4a4;
    font-size: var(--input-text-size);
    max-width: 100%;
}

/* Alpha question */
.open.alpha {
    border: 0;
    border-radius: 7px;
    margin: 5px 0;
    padding: 10px;
    box-shadow: inset 0px 0px 1px 2px #a6a4a4;
    font-size: var(--input-text-size);
    max-width: 100%;
}

.open.container .pretext {
    margin-right: 10px;
}

.open.container .posttext {
    margin-left: 10px;
}

.open.container .counter {
    margin-left: 10px;
}

/* Form */

.segment.form .group.open-group {
    display: table;
}

.segment.form .container.open {
    display: table-row;
}

.segment.form .open-label.before {
    display: table-cell;
    padding-right: 15px;
}

@media only screen and (max-width: 768px) {
    .segment.form .open-label.before {
        display: block;
    }
}

/* Matrix question */

/* General */
table.matrix {
    width: 100%;
    margin-top: 20px;
}

    table.matrix.table-bordered.table-striped {
        border: 0;
    }

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 0;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background: 0;
}

.matrix .category-label {
    display: block;
}

.matrix .category.single,
.matrix .subhead .group.text {
    margin: 10px;
    display: inline-block;
}

.matrix:not(.new-layout) .category.single {
    width: auto !important;
}

.matrix .category.single .category-padding,
.matrix .category.multi .category-padding {
    padding: 10px 15px;
}

.matrix .group.text {
    text-align: left;
    display: flex;
}

.matrix .categorygroup,
.matrix .subhead .segment {
    display: flex;
}

@media only screen and (max-width: 700px) and (orientation: portrait) {
    .matrix tbody tr {
        box-shadow: inset 0px 2px 0px -1px #496773;
    }
}

/* New layout */

.matrix.new-layout tbody {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.matrix.new-layout .group.text {
    text-align: center;
}


.matrix.new-layout tbody tr {
    display: block;
    margin-bottom: 20px;
    box-shadow: none;
}

    .matrix.new-layout tbody tr td {
        display: block;
    }

.matrix.new-layout .group.categorylist {
    display: block;
}

.matrix.new-layout .categorygroup,
.matrix.new-layout .subhead .segment {
    justify-content: center;
}

@media only screen and (max-width: 700px) and (orientation: portrait) {
    .matrix.new-layout .categorygroup,
    .matrix.new-layout .subhead .segment {
        flex-wrap: wrap;
    }
}


.matrix.new-layout thead {
    /* display: none; */
    visibility: hidden;
}

.matrix.new-layout .category.single,
.matrix.new-layout .subhead .group.text {
    display: block;
}

.matrix.new-layout .category.single,
.matrix.new-layout .category.multi {
    margin: 10px;
    width: 100% !important;
}

    .matrix.new-layout .category.single .category-padding,
    .matrix.new-layout .category.multi .category-padding {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.matrix.new-layout tbody .segment .group.text {
    font-size: 1.3em;
    font-weight: 500;
    display: flex;
    flex-direction: row; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center; /* Ensures inline elements are centered */
}

/* overflowed matrix rows turning into blocks */

.matrix.overflowed .category.single,
.matrix.overflowed .subhead .group.text {
    flex-basis: auto !important;
    margin: 10px 0;
}

.matrix.overflowed .categorygroup {
    flex-direction: column;
}

.drop-list {
    display: flex;
    flex-direction: row;
}

    .drop-list.vertical {
        flex-direction: column;
    }

        .drop-list.vertical .droppable {
            display: flex;
            /* PBI #165892 */
            flex-wrap: wrap;
            /* END PBI #165892 */
        }

.drag-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

.droppableWrapper {
    width: 100%;
}

.droppable {
    min-height: 140px;
    border: 1px dashed #c1c1c1;
    margin: 5px;
    padding: 5px;
    /* PBI #165892 */
    height: auto;
    overflow: auto;
    /* END PBI #165892 */
}

.droppable-label {
    text-align: center;
    padding: 5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* PBI #165892 */
    flex-wrap: wrap;
    word-wrap: break-word;
    height: auto;
    /* END PBI #165892 */
}

.draggable {
    border: 1px solid #c1c1c1;
    text-align: center;
    background: #fff;
    padding: 10px;
    margin: 5px;
    min-width: 110px;
    max-width: 110px;
    width: 110px;
    cursor: move;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

    .draggable:hover {
        background: var(--selection-bg-color);
        color: var(--selection-color);
    }

    .draggable img {
        max-width: 100%;
        width: 100%;
    }

    .draggable.ui-draggable-dragging {
        z-index: 9999;
        max-width: 160px;
        border-color: #808080;
    }

.mixed-matrix-wrapper {
    overflow: auto;
}

.matrix.mixed-matrix thead tr.subhead {
    display: none;
}

.matrix.mixed-matrix thead .group.text {
    text-align: center;
}

.matrix.mixed-matrix .group.categorylist {
    display: block;
}

/* Date/time picker */
.segment[data-datetimepicker] .xdsoft_datetimepicker {
    opacity: 0;
    transition: 0.3s opacity;
}

    .segment[data-datetimepicker] .xdsoft_datetimepicker.loaded {
        opacity: 1;
    }

    .segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_noselect.xdsoft_dark.xdsoft_inline {
        background: var(--selection-bg-color);
    }


    .segment[data-datetimepicker] .xdsoft_datetimepicker .xdsoft_datepicker {
        max-width: 100%;
    }

@media (min-width: 1024px) {
    .segment[data-datetimepicker] .xdsoft_datetimepicker .xdsoft_datepicker {
        width: 600px;
        max-width: 100%;
    }
}

.segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
.segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th,
.segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div,
.segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
    background: var(--navbutton-hover-bg-color);
    color: #ddd;
}

    .segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
    .segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
    .segment[data-datetimepicker] .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
        background: #c50;
    }

/* star rating */
.star {
    cursor: pointer;
    font-size: 60pt;
    color: #ccc;
    transition: .2s color;
}

@media only screen and (max-width: 768px) {
    .star {
        font-size: 40pt;
    }
}

.star.selected {
    color: #f90;
}

/* User buttons */
#user-buttons {
    margin-top: 40px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}





    #user-buttons input.button {
        max-height: 42px;
        padding: 10px 20px;
        font-size: var(--button-text-size);
        cursor: pointer;
        width: 150px;
        box-sizing: border-box;
        margin-bottom: 8px;
        margin-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
    }

        #user-buttons input.button:not(.button-clear) {
            background: transparent;
            border-radius: 7px;
            border: 2px solid var(--navbutton-bg-color);
            color: var(--navbutton-bg-color);
            transition: background 0.2s;
        }

        #user-buttons input.button:hover:not(.button-clear) {
            background: var(--userbutton-hover-bg-color);
        }

        #user-buttons input.button:last-child {
            margin-right: 0px !important;
        }

        #user-buttons input.button:nth-of-type(5n) {
            margin-right: 0px !important;
        }

    #user-buttons .button-clear {
        background: var(--navbutton-bg-color);
        border: 0;
        padding: 10px 20px;
        border-radius: 7px;
        margin: 0;
        font-size: var(--navbutton-text-size);
        color: var(--navbutton-color);
        cursor: pointer;
        transition: background 0.2s;
        margin-left: auto !important;
    }

@media only screen and (max-width: 810px) {
    #user-buttons input.button {
        max-width: 100%;
        padding: 10px 0;
        flex: 0 0 calc(100% - 1px); /* 5 per row (100% / 5) */
    }
}
/* Navigation */

#navigation-container {
    margin-top: 40px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

body.mobile #navigation-container {
    margin-top: 15px;
}

#navigation-container input.button {
    background: var(--navbutton-bg-color);
    border: 0;
    padding: 10px 20px;
    border-radius: 7px;
    margin: 0;
    font-size: var(--navbutton-text-size);
    color: var(--navbutton-color);
    cursor: pointer;
    transition: background 0.2s;
    width: 150px;
    max-width: 24%;
}

#navigation-container input.button.button-back {
    order: -1;
}

#navigation-container input.button.button-next {
    order: 2;
}

#navigation-container input.button:hover {
    background: var(--navbutton-hover-bg-color);
}

#navigation-container.noback {
    justify-content: flex-end;
}


@media only screen and (max-width: 810px) {
    #navigation-container input.button {
        width: 30%;
        max-width: 100%;
        margin: 5px 5px 5px 0;
        padding: 10px 0;
    }
}
/* WCAG extra */

body.wcag-on * {
    -webkit-tap-highlight-color: initial;
}

    body.wcag-on *:focus,
    body.wcag-on *.focus {
        outline: 2px #000 dotted;
        outline-offset: 2px;
    }
/* WCAG top bar */
body.wcag-on div#wcag {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

    body.wcag-on div#wcag #fontSizeSelector span {
        display: flex;
        padding: 4px 10px;
        background: #000;
        color: #fff;
        margin: 0 1px;
        align-items: center;
        cursor: pointer;
    }

        body.wcag-on div#wcag #fontSizeSelector span.clicked {
            animation: fontSizeSelectAnim 0.2s;
        }

        body.wcag-on div#wcag #fontSizeSelector span.inactive {
            background: #aaa;
            color: #eee;
        }

    body.wcag-on div#wcag div#fontSizeSelector {
        display: flex;
        align-items: stretch;
        align-content: center;
        flex-direction: row;
    }

    body.wcag-on div#wcag span#wcag-fz-smaller {
        border-radius: 15px 0 0 15px;
        font-size: 8pt;
    }

    body.wcag-on div#wcag span#wcag-fz-larger {
        border-radius: 0 15px 15px 0;
        font-size: 13pt;
    }
/* Validation */

.validation-message.error {
    margin: 10px 0;
    background: #f6e4c0;
    color: #000;
    font-style: normal;
    padding: 14px;
    border-radius: 10px;
    font-size: .9em;
}

    .validation-message.error:before {
        content: '\f06a';
        display: inline-block;
        margin-right: 5px;
        font-size: 1.2em;
        font-family: 'Font Awesome 6 Free';
        vertical-align: middle;
    }

.validation-message {
    transition: 0.3s;
}

input.invalid {
    color: var(--invalid-input-color);
}
/* Footer */

#footer {
    background: var(--footer-bg-color);
    color: var(--footer-color);
    display: flex;
    justify-content: center;
    padding: 20px 0;
    font-size: 0.6em;
    margin-top: auto;
}

@media only screen and (max-width: 980px) {
    #footer {
        padding: 20px;
    }
}

#copy {
    width: var(--desktop-width);
}
/* Extra */

@keyframes fontSizeSelectAnim {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}
/* RTL adjustments */

html[dir="RTL"] div#wcag span#wcag-fz-larger {
    border-radius: 15px 0 0 15px;
}

html[dir="RTL"] div#wcag span#wcag-fz-smaller {
    border-radius: 0 15px 15px 0;
}

html[dir="RTL"] #user-buttons input.button {
    margin-right: 0;
    margin-left: 10px;
}
/* audio/video tags */
.video-js {
    background: #333;
    max-width: 100%;
}

.segment[data-media] .video-js {
    margin: auto;
}

.category-label .video-js {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
    display: none;
}

.vjs-progress-control.vjs-control {
    display: none !important;
}

.vjs-remaining-time.vjs-time-control.vjs-control {
    display: none;
}

.vjs-has-started .vjs-control-bar, .vjs-audio-only-mode .vjs-control-bar {
    justify-content: center;
}

.video-js .vjs-big-play-button {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    border: 0;
}

    .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
        display: flex;
        align-items: center;
        justify-content: center;
    }
/* Customization */
/* PBI 166915 */
.green-check {
    color: #00a79d;
    margin-right: 5px;
    visibility: hidden; /* Reserves space but keeps it hidden */
}

.disabled-td {
    opacity: 0.5; /* Makes it visually distinct but retains original color */
    pointer-events: none; /* Prevents interaction */
}

.button-next[disabled] {
    opacity: 0.5;
    pointer-events: none;
}
/* END PBI 166915 */