@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;700;800;900&display=swap");

:root {
    --liberal-blue: #032D67;
    --liberal-yellow: #FFE000;
    --liberal-cyan: #00A7E7;
    --liberal-black: #000000;
    --liberal-white: #FFFFFF;
    --liberal-blue-soft: #E8F0FA;
    --liberal-cyan-soft: #EAF8FE;
    --liberal-border: #D8E1EC;
    --liberal-text: #071B33;
    --liberal-muted: #5E7088;
    --liberal-radius: 6px;
    --liberal-shadow: 0 18px 45px rgba(3, 45, 103, 0.12);
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Public Sans", Arial, Helvetica, sans-serif;
}

body {
    color: var(--liberal-text);
    background:
        linear-gradient(180deg, rgba(0, 167, 231, 0.13) 0, rgba(255, 255, 255, 0) 340px),
        linear-gradient(90deg, var(--liberal-yellow) 0 34%, var(--liberal-cyan) 34% 62%, var(--liberal-blue) 62% 100%) top / 100% 10px no-repeat,
        var(--liberal-white);
    letter-spacing: 0;
}

a {
    color: var(--liberal-blue);
    font-weight: 700;
}

a:hover,
a:focus {
    color: var(--liberal-black);
    text-decoration-color: var(--liberal-cyan);
}

.navbar-default,
.navbar {
    background: var(--liberal-white);
    border: 0;
    border-bottom: 4px solid var(--liberal-yellow);
    box-shadow: 0 10px 28px rgba(3, 45, 103, 0.10);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--liberal-blue);
    font-weight: 800;
}

.navbar-default .navbar-brand {
    letter-spacing: 0;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--liberal-black);
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-decoration-color: var(--liberal-yellow);
    text-underline-offset: 5px;
}

.top-container {
    background: transparent;
}

.top-container .top-content,
.group-title-container,
.question-container {
    border-radius: var(--liberal-radius);
}

.top-container .top-content {
    color: var(--liberal-white);
    background: var(--liberal-blue);
    box-shadow: var(--liberal-shadow);
}

.survey-name,
.survey-title,
.group-title,
.question-title-container,
h1,
h2,
h3,
h4 {
    color: var(--liberal-blue);
    font-family: "Public Sans", Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.top-content .survey-name,
.top-content .survey-title,
.top-content h1,
.top-content h2,
.top-content h3 {
    color: var(--liberal-white);
}

.survey-name:after,
.survey-title:after,
.group-title:after {
    content: "";
    display: block;
    width: 5.5rem;
    max-width: 42%;
    height: 0.34em;
    min-height: 6px;
    margin-top: 0.28em;
    background: var(--liberal-yellow);
}

.top-content .survey-name:after,
.top-content .survey-title:after {
    background: var(--liberal-cyan);
}

.group-description,
.question-help-container,
.ls-questionhelp,
.text-info {
    color: var(--liberal-muted);
}

.question-container {
    overflow: hidden;
    border: 1px solid var(--liberal-border);
    background: var(--liberal-white);
    box-shadow: 0 12px 34px rgba(3, 45, 103, 0.08);
}

.question-title-container {
    position: relative;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--liberal-border);
    background: var(--liberal-blue-soft);
}

.question-title-container:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background: var(--liberal-cyan);
}

.question-number,
.question-code,
.asterisk {
    color: var(--liberal-blue);
    font-weight: 900;
}

.answer-container,
.question-help-container {
    border-color: var(--liberal-border);
}

.ls-answers {
    padding: 1.25rem 1.5rem;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    color: var(--liberal-text);
    border-color: var(--liberal-border);
    border-radius: var(--liberal-radius);
    box-shadow: none;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--liberal-cyan);
    box-shadow: 0 0 0 3px rgba(0, 167, 231, 0.20);
}

.btn,
button,
input[type="button"],
input[type="submit"] {
    border-radius: var(--liberal-radius);
    font-weight: 800;
    letter-spacing: 0;
}

.btn-primary,
.btn-success,
.button-item.btn-primary,
#ls-button-submit,
#ls-button-next {
    color: var(--liberal-white);
    border-color: var(--liberal-blue);
    background: var(--liberal-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.button-item.btn-primary:hover,
.button-item.btn-primary:focus,
#ls-button-submit:hover,
#ls-button-submit:focus,
#ls-button-next:hover,
#ls-button-next:focus {
    color: var(--liberal-black);
    border-color: var(--liberal-yellow);
    background: var(--liberal-yellow);
}

.btn-default,
.btn-secondary,
#ls-button-previous {
    color: var(--liberal-blue);
    border-color: var(--liberal-blue);
    background: var(--liberal-white);
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
#ls-button-previous:hover,
#ls-button-previous:focus {
    color: var(--liberal-white);
    border-color: var(--liberal-blue);
    background: var(--liberal-blue);
}

.progress {
    height: 14px;
    border-radius: 999px;
    background: var(--liberal-blue-soft);
    box-shadow: none;
}

.progress .progress-bar,
.progress-bar {
    background-color: var(--liberal-cyan);
    box-shadow: none;
}

.alert-info {
    color: var(--liberal-blue);
    border-color: var(--liberal-cyan);
    background: var(--liberal-cyan-soft);
}

.alert-warning {
    color: var(--liberal-black);
    border-color: var(--liberal-yellow);
    background: #FFF7B8;
}

.alert-danger,
.text-danger,
.em_num_answers.good,
.em_sq_validation.good {
    color: #9D003F;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--liberal-border);
}

.table > thead > tr > th {
    color: var(--liberal-white);
    border-color: var(--liberal-blue);
    background: var(--liberal-blue);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    color: var(--liberal-white);
    border-color: var(--liberal-blue);
    background: var(--liberal-blue);
}

.radio-item input[type="radio"]:checked + label:before,
.checkbox-item input[type="checkbox"]:checked + label:before {
    border-color: var(--liberal-blue);
    background-color: var(--liberal-yellow);
}

#navigator-container {
    border-top: 4px solid var(--liberal-yellow);
    padding-top: 1.25rem;
}

.footer,
.privacy,
.privacy-policy {
    color: var(--liberal-muted);
}

@media (max-width: 767px) {
    body {
        background:
            linear-gradient(180deg, rgba(0, 167, 231, 0.11) 0, rgba(255, 255, 255, 0) 260px),
            linear-gradient(90deg, var(--liberal-yellow) 0 38%, var(--liberal-cyan) 38% 70%, var(--liberal-blue) 70% 100%) top / 100% 8px no-repeat,
            var(--liberal-white);
    }

    .question-title-container,
    .ls-answers {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}