:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/logo_skj_bpsw.png");
    --logo-alt: url("../../custom/theme/assets/images/logo_skj_bpsw.png"); 
    
    /***Header Image***/
     /* --header-image: url("../../../../custom/theme/assets/images/DvdJ_2024_header.jpg");  */

    /***Brand Colors***/
    --color-brand-primary: #303440;
    --color-brand-primary-rgb: 22, 66, 115;
    --color-brand-secondary: #262956;
    --color-brand-tertiary: #7984AA;
    --color-brand-light: #DAA5F3;
    --color-brand-dark: #000000; 
    --color-brand-taupe: #FAF6F1;

    --border-radius: 8px;

    --activity-layout-gap: 16px;
    --activity-column-count: 3;
    --activity-item--min-width: 50px;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}


.menu-items li .menu-item {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-brand-dark);
    font-size: var(--font-size-xs);
}
.menu-items .menu-active-border {
    border-bottom: 2px solid var(--color-brand-tertiary);
    width: 100%;
    margin: 0 auto;
    bottom: 0;
}
button, .button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-title);
    padding: 0.8rem 1.6rem 0.4rem;
}
.program-table .program-day .program-date .program-date-container {
    color: var(--color-brand-light);
}

iframe { 
    width: 100%;
    aspect-ratio: 16 / 9;
  }


h4 {
    font-weight: bold;
    letter-spacing: normal;
}


ul {
    font-size: var(--font-size-s);
}
body.layout-header-small .header_visual{
    margin-top: var(--menu-height);
}
a.infomarkt_link {
    color: var(--color-brand-primary);
    font-weight: bold;
    height: auto;
    display: block;
}
.infomarkt_logos {
    max-width: 100%;
    height: auto;
    display: block;
}
.speakers-holder .speaker-name{
    margin-bottom: 0.8rem;
    color: var(--color-neutral-white);
}
.speaker-item {
    background-color: var(--color-brand-tertiary);
    color: var(--color-neutral-white);
    display: flex;
    flex-direction: column;
}
.toggle-text-container + .toggle-button {
    display: flex;
    align-items: center;
    color: var(--color-neutral-white);
    background-color: var(--color-brand-secondary);
    height: 3.2rem;
    width: max-content;
    border-radius: 32px;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
    text-align: center;
    padding: 0 0.8rem 0 1.6rem;
    margin-top: auto;
    margin-bottom: 1.6rem;
    font-weight: bold;
}

label.checkbox-toggle-button {
    background: #ff0000
}

input.checkbox-toggle:checked + label.checkbox-toggle-button {
    background: #109010;
}


body.layout-header-small footer .footer_bar {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-white);
}

body.layout-header-small footer {
    background-color: var(--color-brand-secondary);
}
.footer_cta p{
    color: var(--color-brand-light);
}
body.layout-header-small footer hr {
    border-color: var(--color-brand-tertiary);
}
body.layout-header-small .footer_bar .poweredby a {
    color: var(--color-brand-light);
}

.footer_cta a {
    color: #ffffff
}
.toggle-text-container{
    height: unset;
    max-height: unset;
    max-height: unset;
    position: relative;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: unset;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    -webkit-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.toggle-text-container-closed {
    overflow: unset;
    max-height: unset;
    line-clamp: unset;
    -webkit-line-clamp: unset;
}
.toggle-text-container .description {
    height: fit-content;
    max-height: -moz-fit-content;
    max-height: 9999px;
    position: relative;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-clamp: initial;
    -webkit-line-clamp: initial;
    -webkit-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    margin-bottom: 1.6rem;
}
.toggle-text-container-closed .description {
    overflow: hidden;
    max-height: 4.2rem;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.page-nominate .mainform {
    margin: 0.8rem 0 3.2rem 0;
}


/* Activities */



.activity-item {
    background: var(--color-brand-activity);
    position: relative;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}
.activity-item:has(.activity-input:checked) {
    background: var(--color-brand-primary);
}
.activity-item:has(.activity-input:checked) .footer:after {
    font-family: 'Material Icons';
    font-size: 32px;
    content: "check_circle";
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    color: var(--color-brand-activity);
    position: absolute;
    right: 16px;
    bottom: 22px
}
.activity-item:has(.activity-input:checked) .activity-button {
    background-color: var(--color-brand-activity);
}


.activity-item:has(.activity-input:disabled) {
    background: var(--color-neutral-gray-02);
    opacity: 0.7;
}
button, .button{
    font-family: var(--font-family-medium);
}
.activity-button{
   border-radius: 30px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   -ms-border-radius: 30px;
   -o-border-radius: 30px;
   background-color: var(--color-brand-secondary);
   color: var(--color-neutral-white);
   padding: 0 12px;
}
.activity-button:hover{
    background-color: var(--color-brand-light);
    color: var(--color-brand-secondary);
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: var(--color-neutral-white);
    overflow: auto;
}
.button--dark {
    position: relative;
    background-color: var(--color-brand-dark);
}
 .button--warning:hover, .button--info:hover, .button--light:hover, .button--dark:hover {
    background-color: var(--color-brand-secondary);
    color: var(--color-brand-dark);
}
.button--dark[disabled], label[disabled] {
    cursor: not-allowed;
    background-color: var(--color-neutral-gray-03);
    color: var(--color-neutral-gray-05);
}
.button--secondary{
    position: relative;
    color: var(--color-neutral-white);
}
.button--secondary:hover {
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark);
}
.activity-modal .button--secondary:after,
.activity-modal .button--dark:after {
    content: "";
    position: absolute;
    display: block;
    left: 0.5em;
    height: 100%;
    outline: 1em dotted var(--color-brand-activity);
    top: 0;
    width: 87%;

}
.activity-item .activity-input {
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
}


.activity-item .footer {
    padding: 1.6rem 1.6rem 3.2rem 0;
    margin-top: auto;
}

.activity-item .header h4 {
    margin: unset;
    color: var(--color-brand-dark);
    font-size: var(--font-size-m);
}

.activity-item .content > *,
.activity-modal .content > * {
    display: block;
}
.activity-item .content .speaker::before,
.activity-modal .content .speaker::before {
    display: inline-block;
    content: "apartment";
    font-family: 'Material Icons';
    font-size: var(--font-size-s);
}
.activity-item .content .min_age::before,
.activity-modal .content .min_age::before {
    display: inline-block;
    content: "cake";
    font-family: 'Material Icons';
    font-size: var(--font-size-s);
}
.ui-widget.ui-widget-content{
    border: 0;
}
.activity-modal-container .description {
    /* font-size: var(--font-size-s); */
}
.activity-modal .sidebar::after {
    content: "";
    position: absolute;
    display: block;
    right: -0.5em;
    height: 100%;
    outline: 1em dotted var(--color-brand-activity);
    top: 0;
}
.activity-modal .content{
    padding: 0em 3.2rem 1.6rem 1.6rem;

}


.activity-modal-container {
    background: var(--color-brand-activity);
}
.activity-modal-container,
.activity-modal-container .activity-modal {
    padding: unset !important;
}

.activity-modal-container .ui-dialog-titlebar {
    display: none;
}



.activity-modal .header {
    display: flex;
    justify-content: flex-end;
}

.activity-modal .header .button {
    height: max-content;
    margin: 0.5em;
    padding: 0;
    background-color: transparent;
    color: var(--color-brand-dark);
    font-size: 24px;
}
.activity-modal .content{
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.activity-modal h3{
    color: var(--color-brand-dark);
    margin-top: 0;
    /* word-wrap: break-word; */
}
.activity-item .content{
    margin-top: 0.8rem;
}
.description{
    margin-top: 0.8rem;
    /* font-size: var(--font-size-xs); */
}
.ui-widget-overlay {
    background: #fff;
    opacity: 0.5;
}
.activity-modal-container, .activity-modal-container .activity-modal {
    padding: unset !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.layout-login {
    background-color: var(--color-brand-taupe);
}
.round-item .round-item-selector {
    padding-right: 1.6rem;
    padding-top: 5px;
}
.round-item .round-item-description.closed {
    height: 0;
    max-height: 0;
}
body.indevelopment .container-fluid .sidebar {
    min-height: unset;
}
*:has(>.background-image-container) {
    position: unset; 
    overflow: unset; 
}
.background-image-container {
    height: 100%;
}
figure {
margin:0; 
}

@media  (min-width: 425px) {
    .page-infomarkt .col-sm-3 {
        grid-column: span 6;
    }
}
@media  (min-width: 600px) {
    .page-infomarkt .col-sm-3 {
        grid-column: span 3;
    }
}
@media  (min-width: 768px) {
.row-center .col-sm-8{
    grid-column-start: 3;
    grid-column-end: 11;
}
.speakers-holder .background-image-container{
    aspect-ratio: 1;
}
.page-nominate .col-form {
    grid-column: span 10 / 12;
}
.activities {
    /**
    * Calculated values.
    */
    --gap-count: calc(var(--activity-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--activity-layout-gap));
    --activity-item--max-width: calc((100% - var(--total-gap-width)) / var(--activity-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--activity-item--min-width), var(--activity-item--max-width)), 1fr));
    grid-gap: var(--activity-layout-gap);
}

.activity-item .footer {
    padding: 1.6rem 0 3.2rem 0;
    margin-top: auto;
}

}
@media (min-width: 992px) {
    .layout-header-small .content-container .container, body.layout-header-full-width .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .page-nominate .col-form {
        grid-column: span 6 / 10;
    }
}