:root {
    --col-primary: #DAE343;
    --col-primary-dark: #9fa531;

    --col-default: #323E48;
    --col-default-light: #98a0ac;
    --col-default-opaque: rgba(50, 62, 72, 0.9);
    --col-default-contrast: #232d34;

    --col-grey-spacer: #EEE;
    --col-light-grey: #F4F4F4;
    --col-grey: #CCC;
    --col-dark-grey: #949494;
    --col-blue: #00AEEF;

    --container-width: 1644px;
}

body {
    padding-top: 97px;
    display: flex;
    flex-flow: column;
    height: auto;
    min-height: 100dvh;
}

html, body {
    font-size: 16px;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, li, a, span:not(.fa), strong, em, b, i:not([style*="FabricMDL2Icons"]):not([data-icon-name]), u, small, mark, del, ins, sub, sup, abbr, cite, code, pre, blockquote {
    font-family: "questa-sans", sans-serif !important;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6,
p, li, a, span, strong, em, b, i, u, small, mark, del, ins, sub, sup, abbr, cite, code, pre, blockquote, input, label {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

div :is(h1, h2, h3, h4, h5, h6, p) {
    margin-block: 0;
}

div :is(h1, h2, h3, h4, h5, h6, strong, b) {
    font-weight: 700;
}

div h1 {
    font-size: clamp(2.076rem, 2.076rem + ((1vw - 0.2rem) * 2.5), 2.75rem);
}

div h2 {
    font-size: clamp(1.976rem, 1.976rem + ((1vw - 0.2rem) * 2.04), 2.25rem);
}

div h3 {
    font-size: clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.663), 32px);
}

div h4 {
    font-size: clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);
}

div h5 {
    font-size: clamp(0.929rem, 0.929rem + ((1vw - 0.2rem) * 0.785), 1.4rem);
}

div h6 {
    font-size: calc(1rem);
}

[data-component-theme] .txt-default {
    color: var(--col-default);
}

[data-component-theme] .txt-primary {
    color: var(--col-primary);
}

.cl-layout-wrapper {
    display: flex;
    flex-flow: column;
    flex: 1;
}

.cl-flex-1 {
    flex: 1;
}

.cl-container {
    width: min(100%, var(--container-width));
    margin: 0 auto;
    padding-inline: 2rem;
}

.cl-callout {
    padding: 1rem;
    background: #00AEEF22;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;
    border-radius: 0.5rem;
}

.cl-callout > p {
    margin-right: auto;
}

/**************************************************/
/* Header */

.cl-logo {
    max-height: 24px;
    width: auto !important;
}

#navbar {
    position: fixed;
    background-color: var(--col-default-opaque);
    backdrop-filter: blur(16px);
    z-index: 100;
    padding: 0;
    top: 0;
}

#navbar li a.cl-navlink {
    padding: 0.75rem 1rem;
    margin: 0;
    line-height: 100%;
    font-weight: 700;
    font-size: 16px;
    transition: background 150ms ease-in-out;
}

#navbar li a.cl-navlink:hover {
    color: var(--col-primary) !important;
    background: none;
    text-decoration: none !important;
}
#navbar li a.cl-login-link {
    color: var(--col-default) !important;
    background: var(--col-primary) !important;
}

#navbar li a.cl-login-link:hover {
    color: white !important;
    background: var(--col-blue) !important;
}


#navbar .cl-nav-toggle {
    background: none;
    margin: 0;
    color: #fff;
    padding: 0;
}
#navbar .navbar-toggler.cl-nav-toggle[aria-expanded="true"] span:before {
    content: "\f00d";
}

#navbar .cl-nav-toggle-content.collapse.show {
    flex-basis: 100%;
    width: 100%;
    margin-inline: -2rem;
    padding: 1rem 1rem 0 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--col-primary);
}

/**************************************************/
/* Buttons */
a.cl-btn {
    display: inline-block;
    border: none;
    padding: 1rem;
    transition: background 150ms ease-in-out;
    font-weight: 700;
    text-decoration: none !important;
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.208), 1rem);
    border-radius: 2rem;
}

a.cl-btn:hover {
    text-decoration: none !important;
    background: var(--col-blue);
}

[data-component-theme="portalThemeColor1"] .cl-btn {
    background: var(--col-primary);
    color: var(--col-default);
}

.cl-btn.txt-default,
[data-component-theme="portalThemeColor4"] .cl-btn {
    background: var(--col-default);
    color: #fff
}

[data-component-theme="portalThemeColor8"] .cl-btn {
    background: var(--col-blue);
    color: #fff
}

:is(
    [data-component-theme="portalThemeColor1"],
    [data-component-theme="portalThemeColor4"],
    [data-component-theme="portalThemeColor8"]
)
button.cl-btn:hover {
    background: var(--col-blue);
    color: #fff;
}

/**************************************************/
/* Homepage */

.cl-hero-main {
    min-height: 28rem;
}

/**************************************************/
/* Layouts */
[data-component-theme="portalThemeColor8"] .cl-container,
.cl-container
:is([data-component-theme="portalThemeColor8"] :is(h1, h2, h3, h4, h5, h6, p, p.smallText)) {
    color : var(--col-default);
}

.cl-page-header {
    padding-block: 2rem;
    border-bottom: 1px solid var(--col-grey-spacer);
}

.cl-page-header .page-header {
    margin: 0;
    padding: 0;
}

.cl-page-content {
    padding-block: 2rem;
    flex-flow: column;
}

.cl-body-wrapper {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.cl-body-content {
    padding: 2rem;
    border: 1px solid var(--col-grey-spacer);
}

/**************************************************/
/* Footer */

.cl-breadcrumbs > .breadcrumb {
    margin: 0;
    display: flex;
    gap: 1rem;
}

.cl-breadcrumbs ul > li > a,
.cl-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    color: var(--col-grey);
    font-weight: 100;
    padding: 0;
}

.cl-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    margin-right: 1rem;
}

.cl-breadcrumbs ul > li > a:hover {
    color: var(--col-blue);
}

.cl-breadcrumbs ul li {
    font-size: 14px;
}
.cl-breadcrumbs ul li.active {
    font-weight: 700;
    color: var(--col-default);
    padding: 0;
}

#cl-feedback {
  position: relative;
}

#cl-feedback > div {
    position: relative;
    z-index: 1;
}

#cl-feedback > div :is(h3, p) {
    color: var(--col-default);
}

#cl-feedback::after {
  content: "";
  position: absolute;
  height: calc(50% - 1rem);
  width: 100%;
  bottom: 0;
  background: var(--col-default);
}

footer .cl-footer-links p {
    color: var(--col-grey);
}

.cl-footer-bar .cl-footer-contact {
    margin-block: -1.5rem 1rem;
    padding-bottom: 1rem;
    justify-content: space-between;
    border-bottom: 1px solid #59636b;
}

.cl-footer-bar .cl-footer-contact a {
    text-decoration: none;
    color: #fffc;
}

.cl-footer-bar .cl-footer-contact a:hover {
    color: #DAE343;
}

/**************************************************/
/* Profile */

body[data-sitemap-state*="profile"] form {
    display: flex;
    flex-flow: column;
    flex: 1;
    background: var(--col-default-contrast);
}

body[data-sitemap-state*="profile"] .container {
    width: min(100%, var(--container-width));
    margin: 0 auto;
    padding-inline: 2rem;
    max-width: 100%;
}

body[data-sitemap-state*="profile"] .page-header h2 {
    color: #fff;
}

body[data-sitemap-state*="profile"] .breadcrumb {
    margin: 0;
    display: flex;
    gap: 1rem;
}

body[data-sitemap-state*="profile"] ul.breadcrumb > li > a,
body[data-sitemap-state*="profile"] .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--col-grey);
    font-weight: 100;
    padding: 0;
}

body[data-sitemap-state*="profile"] .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    margin-right: 1rem;
}

body[data-sitemap-state*="profile"] ul.breadcrumb > li > a:hover {
    color: var(--col-blue);
}

body[data-sitemap-state*="profile"] ul.breadcrumb li {
    font-size: 14px;
}

body[data-sitemap-state*="profile"] ul.breadcrumb li.active {
    font-weight: 700;
    color: var(--col-white);
    padding: 0;
}

body[data-sitemap-state*="profile"] .profile-info,
body[data-sitemap-state*="profile"] .profile-info + div,
body[data-sitemap-state*="profile"] .actions{
    display: none !important;
}

body[data-sitemap-state*="profile"] .nav-profile {
    background: none;
    border: none;
    display: flex;
}

body[data-sitemap-state*="profile"] legend {
    border: none;
    font-weight: bold;
    font-size: 1.25rem;
    width: 100%;
    padding: 0 0 0.25rem 0;
    border-bottom: 1px solid #dae343;
    background: none;
    margin-bottom: 0.25rem !important;
    display: block;
    line-height: 150%;
}

body[data-sitemap-state*="profile"] legend .profile-page-heading {
    color: #fff;
    line-height: 2rem;
    margin-bottom: 0.5rem !important;
}

body[data-sitemap-state*="profile"] .nav-profile > div.card-header {
    padding: 0 0 0.25rem 0;
    border-bottom: 1px solid #dae343;
    background: none;
    margin-bottom: 0.25rem !important;
    color: #fff;
    line-height: 2rem;
}

body[data-sitemap-state*="profile"] .nav-profile > div.card-header .card-title {
    display: flex;
    gap: 0.5rem;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

body[data-sitemap-state*="profile"] .nav-profile a {
    background: none;
    border: none;
    padding: 0.25rem 0;
}

body[data-sitemap-state*="profile"] #ProfileFormView {background: none;border: none;}

body[data-sitemap-state*="profile"] #ProfileFormView td {
    padding: 1rem 0;
}

body[data-sitemap-state*="profile"] #ProfileFormView label {
    font-size: 1em;
    color: var(--col-light-grey);
}

body[data-sitemap-state*="profile"] #ProfileFormView label,
body[data-sitemap-state*="profile"] #ProfileFormView input {
    background: none !important;
}

body[data-sitemap-state*="profile"] #ProfileFormView input,
body[data-sitemap-state*="profile"] #ProfileFormView a {
    font-size: 1rem;
}