@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
}

body {
    display: flex;
    flex-direction: column;
}

.back-image {
    position: absolute;
    background-image: url('/assets/images/display/backfiber.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

body::-webkit-scrollbar{
    display: none;
}

.main_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
}


/*@media (max-width: 576px) {*/
/*    .main_container {*/
/*        font-size: 8px !important;*/
/*        overflow: visible !important;*/
/*    }*/
/*}*/
@media only screen and (max-width: 600px) {
    .main_container {
        font-size: 9px;
    }
}

/*ROOM CSS*/


.header {
    display: flex;
}

.room_header_box {
    margin: 0.833em;/*10px;*/
    padding: 0.417em;/*5px;*/
    border-radius: 0.833em;/*10px;*/
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    /*background-color: rgba(16, 100, 196, 0.82);*/
}

.room_name {
    padding: 0 0.417em;/*0px 5px;*/
    display: flex;
    flex-grow: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3em;
    color: #fff;
}

.clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.date_row {
    padding: 0 0.417em 0 0.417em;/*0px 5px 0px 5px;*/
    margin: 0;
    display: flex;
    align-items: center;
}

.warning-image {
    margin: 0 0.333em 0.167em 0.333em;/*0px 4px 2px 4px;*/
    background-image: url('/assets/images/display/warning.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 1.25em;
    height: 1.25em;
}

.date {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
    line-height: 1em;
    color: #fff;
}

.time {
    padding: 0 0.417em 0 0.417em;/*0px 5px 0px 5px;*/
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.8em;
    line-height: 1em;
    color: #fff;
}

@media (orientation: landscape) {
    .main {
        display: flex;
        flex: auto;
        flex-direction: row;
        width: 100%;
        height: 100%;
    }
    .current_session_box {
        display: flex;
        flex-direction: column;
        flex: 1 0;
        margin: 0 0.417em 0.833em 0.833em;/*0px 5px 10px 10px;*/
        border-radius: 0.417em;/*5px;*/
        background-color: #555;
        background-color:rgba(85, 85, 85, 0.55);
    }
    .sessions_box {
        display: flex;
        flex-direction: column;
        flex: 1 0;
        margin: 0 0.833em 0.833em 0.417em;/*0px 10px 10px 5px;*/
        border-radius: 0.417em;/*5px;*/
        background-color:rgba(85, 85, 85, 0.55);
    }
}

@media (orientation: portrait) {
    .main {
        display: flex;
        flex: auto;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .current_session_box {
        display: flex;
        flex-direction: column;
        flex: 1 0;
        margin: 0 0.833em 0.833em 0.833em;/*0px 5px 10px 10px;*/
        border-radius: 0.417em;/*5px;*/
        background-color: #555;
        background-color:rgba(85, 85, 85, 0.55);
    }
    .sessions_box {
        display: flex;
        flex-direction: column;
        flex: 1 0;
        margin: 0 0.833em 0.833em 0.833em;/*0px 10px 10px 5px;*/
        border-radius: 0.417em;/*5px;*/
        background-color:rgba(85, 85, 85, 0.55);
    }
}

.left_column {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
}





.right_column {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;

}

.sessions_header {
    display: flex;
    justify-content: space-between;
    padding: 0.167em 0.833em; /*2px 10px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: #4E5A78;
    align-items: center;
}

.current_session_header {
    display: flex;
    justify-content: space-between;
    padding: 0.167em 0.833em; /*2px 10px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: #4E5A78;
    align-items: center;

}

.header_text_sessioni {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    color: #fff;
}

.header_text_current_session {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    color: #fff;
}

.paging_sessions {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
    color: Orange;
}

.paging_current_session {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
    color: Orange;
}

.right_header {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    color: #fff;
    margin: 0.833em;/*10px;*/
    padding: 0.417em;/*5px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: #4E5A78;
}

.sessions_container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.sessionsPage {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.session_box {
    margin: 0.833em 0.833em 0 0.833em;/*10px 10px 0px 10px;*/
    padding: 0.333em 0.667em; /*4px 8px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: #737D95;
    color: #fff;
}

.session_time {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    margin: 0;
}

.session_title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    margin: -0.333em 0 0.333em 0;/*-4px 0px 4px 0px;*/
}

.session_chairs {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.0em;
    line-height: 1.2em;
    margin-top: 0.2em;
    color: #ffd36b;
}

.session_chairs_label {
    font-weight: 600;
    margin-right: 0.25em;
}

.speeches_container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.paging_speeches {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
    color: Orange;
}

.speech_box {
    margin: 0.833em 0.833em 0 0.833em;/*10px 10px 0px 10px;*/
    border-radius: 0.833em;/*10px;*/
    background-color: #B8C5D5;
    padding: 0.417em;/*5px;*/
    display: flex;
    flex-direction: row;
    color: #fff;

}

.speech_right_column {
    display: flex;
    flex-direction: column;
    margin: 0.333em; /*4px;*/
    flex-grow: 1;
}

.speaker_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    /*flex-grow: 1;*/

}

.speech_time {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 0.9em;
    color: #fff;
    background-color: #0352c6;
    border-radius: 0.333em; /*4px;*/
    padding: 0.167em 0.333em 0 0.333em;/*2px 4px 0px 4px;*/
    margin-top: 0.083em;/*1px;*/
    margin-bottom: 0.5em;/*6px;*/
}

.speech_speaker {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    line-height: 1.3em;
}

.speech_title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    max-height: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speech_left_column {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.167em;/*2px;*/
}

.timer_badge {
    margin-top: 0.167em;/*2px;*/
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: bold;
    background-color: Green;
    color: #fff;
    text-align: center;
    border-radius: 0.417em;/*5px;*/
    width: 100%;
}

.speech-elapsed-time {
    overflow: hidden;
    margin-top: 0.167em;/*2px;*/
    width: 5em;/*60px;*/
    height: 1.667em;/*20px;*/
    /*filter: drop-shadow(0.2rem 0.2rem 0.15rem rgba(0, 0, 0, 0.5));*/
}

.timer-green {
    position: absolute;
    background: linear-gradient(90deg, #009a00 100%, #005400 100%);
    border-radius: 0.417em;/*5px;*/
    width: 5em;/*60px;*/
    height: 1.667em;/*20px;*/
}

.timer-red {
    position: absolute;
    border-radius: 0.417em;/*5px;*/
    width: 5em;/*60px;*/
    height: 1.667em;/*20px;*/
    background-color: #dc0000;
    animation-name: color;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes color {
    0% {
        background-color: #dc0000;
    }
    50% {
        background-color: #7a0000;
    }
    100% {
        background-color: #dc0000;
    }
}

.timer-text {
    position: absolute;
    margin-top: 0.167em;/*2px;*/
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    width: 5em;/*60px;*/
}

.circle {
    display: flex;
    flex-shrink: 0;
    margin: 0.333em;/*4px;*/
    background-image: url('');
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    width: 5em;
    height: 5em;
    border: 0.25em solid #fff;/*3px*/
    background-color: rgba(93, 88, 88, 0.44);
}

/*ROOMS CSS*/
/*------------------------------------------------------------------------------------------------------------------------------------------*/


.flexContainer {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.rooms_header {
    display: flex;
    /*height: 8.5em;*/
}

.rooms_header_box {
    margin: 0.833em;/*10px;*/
    padding: 0.417em;/*5px;*/
    border-radius: 0.833em;/*10px;*/
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    /*check Compatibility for old browsers eg Chrome 57*/
    background-color: rgba(16, 100, 196, 0.82);
}

.rooms_rooms_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 1 0;
    margin: 0 0.833em 0.833em 0.833em;/*0px 10px 10px 10px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: rgba(85, 85, 85, 0.55);
    padding-top: 0.833em;/*10px;*/
}

@media (orientation: landscape) {
    .rooms_room_main_container {
        width: 50%  !important;;
    }
}

@media (orientation: portrait) {
    .rooms_room_main_container {
        width: 100%  !important;;
    }
}

/*.rooms_room_main_container {*/
/*    width: 100%;*/
/*}*/

.rooms_room_container {
    display: flex;
    flex-direction: row;
    margin: 0 0.833em 0.833em 0.833em;/*0px 10px 10px 10px;*/
}

.rooms_room_box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.roomsContainerColumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 1 0;
    margin: 0 0.833em 0.833em 0.833em;/*0px 10px 10px 10px;*/
    border-radius: 0.417em;/*5px;*/
    background-color: rgba(85, 85, 85, 0.55);
    padding-top: 0.833em;/*10px;*/
}

.rooms_speech_box {
    border-radius: 0.833em;/*10px;*/
    /*background: rgb(56, 68, 80);*/
    background: #737D95;
    display: flex;
    flex-direction: row;
    color: #fff;
    flex-grow: 1;
    justify-content: space-between;
    /*height: 8.5em;*/
    min-height: 8.5em;
}

.rooms_bar_box {
    border-radius: 0.833em;/*10px;*/
    /*background: rgb(56, 68, 80);*/
    background-color: #737D95;
    display: flex;
    flex-direction: row;
    color: #fff;
    flex-grow: 1;
    justify-content: space-between;
    /*height: 8.5em;*/
    min-height: 8.5em;
}

.rooms_session_box {
    border-radius: 0.833em;/*10px;*/
    /*background: rgb(56, 68, 80);*/
    background: #737D95;
    display: flex;
    flex-direction: row;
    color: #fff;
    flex-grow: 1;
    justify-content: space-between;
    /*height: 8.5em;*/
    min-height: 8.5em;
}

.rooms_first_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    /*background-color: rgba(255, 0, 0, 0.41);*/
}

.rooms_column_left {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
}

.rooms_speakerLayer {
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

.rooms_event_name {
    padding: 0 0.417em;/*0px 5px;*/
    display: flex;
    flex-grow: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3em;
    color: #fff;
}

.rooms_room_name {
    padding: 0 0.333em;/*0px 4px;*/
    display: flex;
    /*font-family: 'Staatliches', sans-serif;*/
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3em;
    line-height: 1.2em;
    text-align: right;
    /*color: #ffc761;*/
}

.rooms_slotID {
    padding: 0 0.833em;/*0px 5px;*/
    display: flex;
    flex-grow: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.5em;
    justify-content: start;
}

.rooms_clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rooms_date {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5em;
    line-height: 1em;
    /*color: #fff;*/
}

.rooms_time {
    padding: 0 0.417em 0 0.417em;/*0px 5px 0px 5px;*/
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.8em;
    line-height: 1em;
    /*color: #fff;*/
}

.rooms_speech_time {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 0.9em;
    /*color: #fff;*/
    /*background-color: #0352c6;*/
    border-radius: 0.333em;/*4px;*/
    padding: 0.167em 0.333em 0 0.333em;/*2px 4px 0px 4px;*/
    margin-top: 0.083em;/*1px;*/
    margin-bottom: 0.5em;/*6px;*/
}

.rooms_speech_speaker {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    line-height: 1.3em;
}

.rooms_session_time {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    line-height: 1.3em;
}

.rooms_session_label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    /*color: #eee;*/
}

.rooms_session_title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    /*color: #eee;*/
}

.rooms_speech_title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    max-height: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rooms_image_timer {
    display: flex;
    flex-direction: column;
    padding: 0.333em 0.667em;/*4px 8px;*/
}

.rooms_speech_left_column {
    display: flex;
    flex-direction: row;
    padding: 0.333em 0.667em;/*4px 8px;*/
}

.rooms_speech_right_column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0.333em 0.667em;/*4px 8px;*/
}

.rooms_timer_badge {
    margin-top: 0.5em;/*6px;*/
    margin-bottom: 0.167em;/*2px;*/
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: bold;
    background-color: Green;
    color: #ffffff;
    text-align: center;
    border-radius: 0.417em;/*5px;*/
    width: 100%;
    padding: 0.083em;/*1px;*/
}

.rooms_circle {
    display: flex;
    flex-shrink: 0;
    margin: 0.333em;/*4px;*/
    background-image: url('');
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    width: 5em;
    height: 5em;
    border: 0.25em solid #fff;/*3px*/
    background-color: rgba(93, 88, 88, 0.44);
}

.fillWidth {
    width: 100% !important;
    height: auto !important;
}

.fillHeight {
    height: 100% !important;
    width: auto !important;
}

.video {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.web {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*!* eventuale z-index se serve stare sopra ad altri elementi *!*/
    /*z-index: 9999;*/
}
#web-iframe {
    width: 100%;
    height: 100%;
    display: block; /* evita spazi bianchi sotto l’iframe */
    border: none;
    margin: 0;
    padding: 0;
}

/*#iframe-content {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.iframe-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    display:block;

}
.iframe-content iframe {
    border: none;
}