/**
 * Programmübersicht Block Template.
 * mit Kalender und Listenansicht
 * Version/Revision 4
 */


.col-program {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid #D2D2D2;
}

.element_container--no-title .col-program:not(:first-child) {
    border-left: none;
}

/* Listenansicht
-- weiteres von der Listenansicht ist unten reingemischt */
.list_container.row {
    height: auto;
}

.list_container .smk-heading .program_item__title {
    max-width: 100vw;
    margin-top: 0;
    margin-bottom: 0;
}

.list_container .smk-heading .program_item__title.title__grey {
    color: #78797b;
}


/*
color inactive on version 4, keep code for later
.list_container .smk-heading .program_item__title.program_item__title--color {
    position: relative;
    padding-left: 3.6rem;
    line-height: 1;
}

.list_container .smk-heading .program_item__title--color::before {
    content: '';
    width: 3rem;
    height: 0.16666rem;
    position: absolute;
    left: 0;
    top: 0.8rem;
}


.list_container .smk-heading h4.program_item__title--color::before {
    top: 0.5rem;
}

/* unten bei .dialog__cat
.list_container  .program_item__title--color--*::before {
    background-color: #008DC3;
} 
* /

*/

/* Kalender ansicht */
.calendar_program_container.row {
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3rem;
}

/* Abstand am Schluss */
.calendar_program_container > div:last-child {
    background-color: white;
    z-index: 1;
}

.calendar_program_container .col-program__title {
    height: 2rem;
    display: flex;
    align-items: center;
    margin: 1.5rem 0 1rem 0;
    justify-content: center;
    text-align: center;
}

.calendar_program_container .col-program__title.col-program__title--time {
    text-align: left;
    justify-content: left;
}

.hour_height {
    position: relative;
    line-height: 1;
    font-size: 0.625rem;
    color: #9A9B9C;
    font-weight: 900;
}

.hour_height::before {
    content: "";
    width: 100vw;
    height: 1px;
    background-color: #D2D2D2;
    position: absolute;
    left: calc(100% - 1.7vw);
    top: 0;
}


.calendar_program_container .element_container {
    position: relative;
}

/* Programm von Kalender und Liste */

.program_container .element_container__inside {
    width: 100%;
    height: 100%;
    display: flex;
}

.calendar_program_container .element_container__inside {
    min-width: 850px;
}

.list_container .element_container__inside {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: auto;
    width: auto;
}

.program_container .program_items_wrapper {
    position: relative;
}

.program_container .program_item {
    position: absolute;
    left: 0;
}

.list_container .program_item {
    position: relative;
    height: 5rem;
}

.list_container .program_item.size__small {
    height: 5rem;
}

.list_container .program_item.size__middle {
    height: 7rem;
}

.list_container .program_item.size__big {
    height: 9rem;
}

.program_item {
    width: 100%;
    border-radius: 0.2rem;
    color: white;
}

.program_item--color--light, .program_item--color--yellow {
    color: var(--smk--color--normal);
}

.program_item--details {
    cursor: pointer;
}

.program_item--details:hover {
    /* footer element wird darübergelegt, wenn das z-index unter 99 ist! */
    /* z-index: 10; */
    z-index: 100;
}

.program_item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.2rem;
    transition: all ease-out 0.1s;
}

.list_container  .program_item__title--color--red::before,
.program_item--color--red::before, 
.program_item--color--red .dialog__cat::before {
    background: #ED6F77;
}

.list_container  .program_item__title--color--yellow::before,
.program_item--color--yellow::before, 
.program_item--color--yellow .dialog__cat::before {
    background: #FDC533;
    color: var(--smk--color--normal);
}

.list_container  .program_item__title--color--blue::before,
.program_item--color--blue::before, 
.program_item--color--blue .dialog__cat::before {
    background: #008DC3;
}

.list_container  .program_item__title--color--violet::before,
.program_item--color--violet::before, 
.program_item--color--violet .dialog__cat::before {
    background: #7857B1;
}

.list_container  .program_item__title--color--green::before,
.program_item--color--green::before, 
.program_item--color--green .dialog__cat::before {
    background: #83BE26;
}

.list_container  .program_item__title--color--dark::before,
.program_item--color--dark::before, 
.program_item--color--dark .dialog__cat::before{
    background: #56585A;
}

.list_container  .program_item__title--color--light::before,
.program_item--color--light::before, 
.program_item--color--light .dialog__cat::before {
    background: #EDEDED;
}

.program_item .program_popup_button {
    padding: 0.3rem 0.3rem;
    height: 100%;
    position: relative;
}

.list_container .program_item .program_popup_button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.program_item .program_popup_button.center_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.list_container .program_item .program_popup_button.top_content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
}


.list_container .program_item.size__small .program_popup_button.center_content {
    gap: 0;
}

.program_item--details:hover::before {
    /* opacity: 0.85; */
    transform: scale(1.015);
    box-shadow: 0 0 8px 3px rgba(0,0,0,0.1);
    opacity: 0.95;
}

#dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}

#dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}

.dialog-backdrop, .popup {
    z-index: 99999999;
}


.program_item__time {
    font-size: 12px;
    display: block;
    width: 100%;
    opacity: .77;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.list_container .program_text_normal,
.list_container .program_item__speaker span.program_text_normal {
    opacity: 1;
    /* neu identische Schriftgrösse mit dem Titel */
    font-size: clamp(13px, 0.7rem, 16px);
}

.calendar_program_container .program_item__time {
    text-align: right;
}

/* .bg_yellow .program_item__time {
    opacity: .53;
} */


.program_item .program_popup_button .program_item__title {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    letter-spacing: 0.15px;
}

.list_container .program_item .program_popup_button .program_item__title {
    margin-bottom: 0;
}
.list_container .program_item .program_popup_button .program_item__speaker {
    margin-top: 0.5rem;
}
.list_container .program_item .program_popup_button .program_item__speaker.big_portrait_img {
    margin-top: 0.2rem;
}



.list_container .program_item .program_popup_button .program_item__title { 
    font-size: clamp(13px, 0.7rem, 16px); 
}

.col-program--cats--1 .program_item .program_popup_button .program_item__title {
    font-size: 15px;
}

.program_item__speaker {
    display: flex;
    align-items: center;
}

.container-col.center-xs .list_container .program_item__speaker,
.container-col.center-xs .list_container .smk-heading {
    display: flex;
    justify-content: center;
}


.program_item__title + .program_item__speaker img {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
}

.list_container .program_item__title + .program_item__speaker.big_portrait_img img {
    width: 1.7rem;
    height: 1.7rem;
}

.list_container .program_item__title + .program_item__speaker img {
    width: 1.1rem;
    height: 1.1rem;
}

.program_item__title + .program_item__speaker span {
    font-size: 11px;
    /* macht gar nichts: */
    /* margin-left: 0.2; */
}

.program_item__speaker {
    gap: 0.9rem;
}

.program_item__speaker .speaker {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

 .program_item--small .program_popup_button {
     display: flex;
     align-content: center;
     align-items: center;
     flex-wrap: wrap;
     flex-direction: row-reverse;
     justify-content: space-between;
 }

.program_item--small .program_item__time {
    width: auto;
}

.program_item--small .program_popup_button .program_item__time, .program_item--small .program_popup_button .program_item__title {
    margin-bottom: 0;
}

.dialog__cat {
    font-size: 0.5rem;
    font-weight: bold;
    position: relative;
    padding-left: 3.4rem;
    display: block;
    line-height: 1;
    margin-bottom: 1.291666rem;
}

.dialog__cat::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15rem;
    width: 3rem;
    height: 0.16666rem;
    background: var(--dialog-cat-bg-color);
}

.default_dialog {
    color: var(--smk--color--normal);
    z-index: 100000;
}

.default_dialog span.program_item__title {
    display: block;
    margin-top: 0;
}

.default_dialog .program_item__speakers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-top: 2rem;
    margin-bottom: -2.5rem;
    column-gap: 1.5rem;
}

.default_dialog p + .program_item__speakers {
    margin-top: 3.58333rem;
}

.default_dialog .program_item__speakers > a {
    flex: 1;
    /* new */
    min-width: 250px;
}

.default_dialog .program_item__speaker {
    margin-bottom: 2rem;
}

.default_dialog .program_item__speaker img {
    width: 4.2916666rem;
    height: 4.2916666rem;
    border-radius: 100%;
    margin-right: 1rem;
}

.default_dialog .program_item__speakers .program_item__speaker .program_item__speaker_desc {
    font-size: 0.6666rem;
    display: block;
    color: var(--smk--color--primary);
}

.default_dialog .program_item__speaker__name {
    color: #56585A;
    font-size: 1rem;
    line-height: 1.267;
    font-weight: 900;
    display: block;
    margin-bottom: 0.15rem;
}

.default_dialog .program_item__speaker__position_company {
    font-size: 0.83333rem;
    color: #56585A;
    line-height: 1.5;
    display: block;
    max-width: 600px;
}

.default_dialog .button--arrow {
    font-size: 0.66667rem;
    margin-top: 0.4rem;
}

.default_dialog .button--arrow span  {
    color: #9A9B9C;
    position: relative;
    padding-right: 20px;
    transition: all 200ms ease-out;
}

.default_dialog .button--arrow span::after {
    content: "";
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: var(--smk--icon--button-arrow);
    -webkit-mask-image: var(--smk--icon--button-arrow);
    width: 14px;
    height: 16px;
    position: absolute;
    right: 0;
    bottom: 1px;
    transition: all 200ms ease-out;
    background-color: #9A9B9C;
    /* program popup */
    bottom: 0.2rem;
}

.default_dialog .program_item__speaker:hover .button--arrow span {
    padding-right: 28px;
    color: var(--smk--color--primary);
}

.default_dialog .program_item__speaker:hover .button--arrow span::after {
    background-color: var(--smk--color--primary);
}

@media screen and (max-width:1599px) {
    .dialog__cat::before {
        bottom: 0.2rem;
    }

    /* < 1600px */
    /*
    only backup in version 4
    .list_container .smk-heading h3.program_item__title--color::before {
        top: 0.5rem;
    }

    .list_container .smk-heading h4.program_item__title--color::before {
        top: 0.45rem;
    }
    */
}

@media screen and (max-width:1399px) {

    .dialog__cat {
        font-size: 11px;
    }
}

@media screen and (max-width:1199px) {
    
    .calendar_program_container.row {
        overflow-x: scroll;
    }
    
    .calendar_program_container::after {
        content: "";
        position: absolute;
        height: calc(100% - 4.5rem - 90px + 18px);
        width: 1.5rem;
        background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0.991353) 6.67%, rgba(255, 255, 255, 0.96449) 13.33%, rgba(255, 255, 255, 0.91834) 20%, rgba(255, 255, 255, 0.852589) 26.67%, rgba(255, 255, 255, 0.768225) 33.33%, rgba(255, 255, 255, 0.668116) 40%, rgba(255, 255, 255, 0.557309) 46.67%, rgba(255, 255, 255, 0.442691) 53.33%, rgba(255, 255, 255, 0.331884) 60%, rgba(255, 255, 255, 0.231775) 66.67%, rgba(255, 255, 255, 0.147411) 73.33%, rgba(255, 255, 255, 0.0816599) 80%, rgba(255, 255, 255, 0.03551) 86.67%, rgba(255, 255, 255, 0.0086472) 93.33%, rgba(255, 255, 255, 0) 100%);
        right: 8.33333333333%;
        top: 4.5rem;
        pointer-events: none;
    }

    .program_item__time {
        text-align: left;
        margin-bottom: 0.3rem;
    }

    .program_item--small .program_popup_button {
        justify-content: flex-end;
        gap: 0.7rem;
    }

}

@media screen and (max-width:1023px) {
 
    .calendar_program_container::after {
        right: 0;
    }

    .default_dialog span.program_item__title {
        padding-right: 4rem;
    }

    .default_dialog .dialog__cat+span.program_item__title {
        padding-right: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .default_dialog span.program_item__title {
        padding-right: 5rem;
    }

    .default_dialog span.program_item__title {
        padding-right: 3rem;
    }

    .default_dialog .program_item__speakers>a {
        flex-basis: 100%;
    }


    .list_container .program_item__title + .program_item__speaker.big_portrait_img img {
        width: 1.1rem;
        height: 1.1rem;
    }


    .default_dialog .button--arrow span::after {
        /* programm popup */
        bottom: 0.1rem;
    }

    /* < 768px */
    /* only keep backup in version 4
    .list_container .smk-heading h3.program_item__title--color::before {
        top: 10px;
    }
    .list_container .smk-heading h4.program_item__title--color::before {
        top: 6px;
    } */

    /* .list_container .program_item .program_popup_button .program_item__speaker,
    .list_container .program_item .program_popup_button .program_item__speaker.big_portrait_img {
        margin-top: 0;
    } */


    .list_container .program_item,
    .list_container .program_item.size__middle {
        height: 10rem;
    }

    .list_container .program_item.size__big {
        height: 12rem;
    }
}