/* CSS VARIABLES / TOKENS */
:root {
    /* Colors */
    --color-clovergreen: #3DA655;
    --color-black-seanight: #092562;
    --color-greek-blue: #069cbb;
    --color-dovegrey: #6D6D6D;
    --color-lavendermist: #E2E8F0;
    --color-silver-sand: #C1C1C1;
    --color-catskillwhite: #F1F5F9;
    --color-balticsea: #22282B;

    --color-hover-white: var(--color-dovegrey);

    --box-shadow-default: 10px 40px 50px 0px rgba(229, 233, 246, 0.40);
    --border-radius-default: .5rem;

    /* Z Index */
    --z-index-header-dropdown: 1000;
}

.border-radius-default img {
    border-radius: var(--border-radius-default);
}

/* OVERWRITE VARIABLES */
/* FORMS */
:root {
    --slds-c-input-color-border: var(--color-lavendermist);
    --slds-c-input-spacing-horizontal-start: 1rem;
    --sds-c-checkbox-radius-border: 2px;
    --sds-c-checkbox-mark-color-foreground: var(--color-greek-blue);
}

/* GENERAL */
.clickable {
    cursor: pointer;
}

/* HEADING */
.text-heading-x-small,
.text-heading-xx-small {
    font-family: var(--dxp-s-text-heading-small-font-family,var(--dxp-g-heading-font-family));
    color: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
}

/* heading h5 */
.text-heading-x-small {
    font-size: 1.5rem;
    font-weight: var(--dxp-s-text-heading-small-font-weight);
}

/* heading h6 */
.text-heading-xx-small {
    font-size: 1.125rem;
}

/* HEADER  */
.custom-header .component-wrapper-spacer {
    margin: 0;
}

.header-nav .slds-item:before, 
.header-user-nav .slds-item:before {
    width: 1px;
    height: 25px;
    border-radius: 0;
}

.header-user-nav .slds-item:before {
    background-color: var(--color-greek-blue);
}

.header-nav .slds-item:before {
    background-color: var(--dxp-g-brand);
}


.header-nav__menu-button--close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.header-nav__dropdown.slds-dropdown {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: var(--z-index-header-dropdown, 1000);
    padding: 40px 20px 20px 20px;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
    max-width: none;
}

.header-nav.slds-list_horizontal {
    flex-direction: column;
}

.header-nav.slds-has-dividers_left>.slds-item::before {  
    display: none;
}

/* Language Selector */
.lang-selector .slds-button{
    line-height: 32px;
}

.lang-selector .slds-dropdown {
    border: 1px solid var(--color-black-seanight);
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
}

.lang-selector .slds-dropdown__item>a:focus {
    box-shadow: none;
}

@media only screen and (min-width: 768px) {
    .header-nav__dropdown.slds-dropdown, 
    .slds-dropdown-trigger:hover .header-nav__dropdown.slds-dropdown {
        position: static;
        padding: 0;
        display: block;
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .header-nav__menu-button, 
    .header-nav__menu-button--close {
        display: none;
    }

    .header-nav.slds-has-dividers_left>.slds-item::before {  
        display: block;
    }

    .header-nav.slds-list_horizontal {
        flex-direction: row;
    }
}

.header-user-nav__user-button {
    color: var(--color-greek-blue);
    --sds-c-button-text-color-hover: var(--color-greek-blue);
}

.header-user-nav__user-icon {
    fill: var(--dxp-g-brand);
    --dxp-s-button-font-size: auto;
}

.header-nav__user-icon .slds-icon,
.header-user-nav__user-icon .slds-icon {
    fill: var(--dxp-g-brand);
    width: 1.25rem;
    height: 1.25rem;
}

.header-user-nav .header-user-nav__dropdown {
    border-radius: var(--border-radius-default);
}

.header-user-nav .header-user-nav__dropdown-list {
    padding: 8px 24px;
    font-size: 1rem;
}

.header-user-nav .header-user-nav__dropdown-list__item>a:focus, 
.header-user-nav .header-user-nav__dropdown-list__item>a:hover {
    background: none;
}

/* FOOTER */
a.footer-navigation__link, 
a.footer-navigation__link:link:not(.slds-button, .slds-dropdown__item>a), 
a.footer-navigation__link:visited:not(.slds-button, .slds-dropdown__item>a) {
    color: #fff;
    padding: 12px 0;
    display: inline-block;
}

/* TITLE SEPARATOR */
.title-separator--center::after,
.title-separator--left:after,
.title-separator--right:after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    border-radius: 5px;
    background: var(--dxp-g-brand, #092562);
    margin: .5rem auto 0;
}

.title-separator--left::after {
    margin-left: 0;
}

.title-separator--right::after {
    margin-right: 0;
}


/* COLUMNS */
.column--vertical-centered [slot="columns"] {
    margin-top: auto;
    margin-bottom: auto;
}

/* BUTTONS & LINKS */
a.link-secondary, 
a.link-secondary:link:not(.slds-button,.slds-dropdown__item>a), 
a.link-secondary:visited:not(.slds-button,.slds-dropdown__item>a) {
    color: var(--color-greek-blue);
}

a.link-content, 
a.link-content:link:not(.slds-button,.slds-dropdown__item>a), 
a.link-content:visited:not(.slds-button,.slds-dropdown__item>a) {
    color: var(--color-greek-blue);
    text-decoration: underline;
}

a.link-text-default--underlined, 
a.link-text-default--underlined:link:not(.slds-button,.slds-dropdown__item>a), 
a.link-text-default--underlined:visited:not(.slds-button,.slds-dropdown__item>a) {
    color: var(--dxp-g-root-contrast);
    text-decoration: underline;
}

.link--action .slds-button {
    font-weight: 500;
}

.link--action .slds-button::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="icon / jam-icons / outline &%2338; logos / arrow-right"><path id="Vector" d="M15.586 11.157L11.636 7.20704C11.4538 7.01844 11.353 6.76584 11.3553 6.50364C11.3576 6.24144 11.4628 5.99063 11.6482 5.80522C11.8336 5.61981 12.0844 5.51465 12.3466 5.51237C12.6088 5.51009 12.8614 5.61088 13.05 5.79304L18.707 11.45C18.8002 11.5427 18.8741 11.6529 18.9246 11.7742C18.9751 11.8955 19.001 12.0256 19.001 12.157C19.001 12.2884 18.9751 12.4186 18.9246 12.5399C18.8741 12.6612 18.8002 12.7714 18.707 12.864L13.05 18.521C12.9578 18.6166 12.8474 18.6927 12.7254 18.7451C12.6034 18.7976 12.4722 18.8251 12.3394 18.8263C12.2066 18.8274 12.0749 18.8021 11.952 18.7519C11.8291 18.7016 11.7175 18.6273 11.6236 18.5334C11.5297 18.4395 11.4555 18.3279 11.4052 18.205C11.3549 18.0821 11.3296 17.9504 11.3307 17.8176C11.3319 17.6849 11.3595 17.5536 11.4119 17.4316C11.4643 17.3096 11.5405 17.1993 11.636 17.107L15.586 13.157H6C5.73478 13.157 5.48043 13.0517 5.29289 12.8641C5.10536 12.6766 5 12.4223 5 12.157C5 11.8918 5.10536 11.6375 5.29289 11.4499C5.48043 11.2624 5.73478 11.157 6 11.157H15.586Z" fill="%23092562"/></g></svg>');
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center center;
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    margin-left: 0.75rem;
}

.button--ghost .slds-button,
.button--ghost-white .slds-button,
.button--ghost-grey .slds-button {
    background: none;
}

.button--ghost .slds-button {
    border-color: var(--color-black-seanight);
    color: var(--color-black-seanight);
}

.button--ghost a:focus,
.button--ghost a:hover, 
.button--ghost a:focus, 
.button--ghost a:hover {
    color: var(--color-black-seanight);
}

.button--ghost-white .slds-button {
    border-color: #fff;
    color: #fff;
}

.button--ghost-grey .slds-button {
    border-color: var(--color-lavendermist);
    color: var(--color-dovegrey);
}

.slds-current-color .slds-button.slds-button_icon {
    color: currentColor;
}

/* FORM ELEMENTS */
.slds-form-element__label:empty {
    display: none;
}

.slds-form-element {
    margin-bottom: var(--dxp-g-spacing-small);
}

.slds-input {
    padding: 0.625rem 1rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}

.slds-input_faux {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.slds-input_faux.slds-combobox__input  {
    font-size: 14px;
}

.file-uploader {
    font-size: 14px;
}

.checkbox-content {
    font-size: 14px;
    color: var(--color-dovegrey);
}

.slds-file-selector__button.slds-button {
    font-size: 14px;
    color: var(--color-dovegrey);
}

/* TEXT INFO */
.text--brand {
    color: var(--color-black-seanight);
}

.text--info {
    color: var(--color-greek-blue);
}

.text--success,
.text--done {
    color: var(--color-clovergreen);
}

.text--warning,
.text--progress {
    color: var(--color-greek-blue);
}

/* VOTE STARS */
.vote-stars {
    position: relative;
    width: 80px;
}

.vote-stars__full {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.vote-stars-icon {
    width: 80px;
    min-width: 80px;
}

/* BREADCRUMB */
.breadcrumb {
    font-size: 0.875rem;
}

.breadcrumb a,
.breadcrumb a:link:not(.slds-button,.slds-dropdown__item>a), 
.breadcrumb a:visited:not(.slds-button,.slds-dropdown__item>a) {
    color: var(--color-balticsea);
}

.breadcrumb .slds-breadcrumb .slds-breadcrumb__item:before, 
.breadcrumb .slds-breadcrumb .slds-list__item:before {
    font-family: Poppins;
    font-weight: 700;
    color: var(--color-balticsea);
}

.breadcrumb .slds-breadcrumb .slds-breadcrumb__item:last-child a {
    color: var(--color-dovegrey);
}

/* PAGES */
/* Login */
.comm-login-form__link-section {
    justify-content: center;
}

.comm-login-form__container {
    border: 0;
    box-shadow: none;
}

/* CARD BOARD */
.card--board {
    padding: 1.5rem;
    background-color: #fff;
    box-shadow: var(--box-shadow-default);
    border-radius: var(--border-radius-deafult);
    position: relative;
}

.card--board__person {
    font-size: 18px;
    color: var(--color-balticsea);
    margin-bottom: 1rem;
}

.card-board__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* we prefer to use site spacing in experience builder so set padding 0 for full-width */
.full-width-no-padding {
    padding: 0 !important;
}

.tab--active svg.slds-icon.slds-icon-text-default {
    fill: var(--color-black-seanight);
}

.sort-combobox .fix-slds-input_faux {
    line-height: var(--dxp-s-form-element-text-line-height,var(--dxp-s-body-line-height)) !important;
}

/* Accordion */
.slds-accordion__summary-heading .slds-button:focus {
    box-shadow: none;
}

.slds-accordion__summary {
    border-radius: 8px;
}