@import url('https://fonts.googleapis.com/css?family=DM+Sans:300,400,500,700');


html {
    height: 100%;
}
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: #34364B;
    font-size: 13px;
    font-weight: 400;
    overflow: overlay;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}
body .navbar,
body #conference {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}
.d-flex {
    display: flex !important;
}
.navbar {
    min-height: 0 !important;
}
body #conference {
    overflow: hidden;
    overflow-y: scroll;
    flex-shrink: 1;
}
.navbar {
    flex-grow: 0 !important;
    width: 100%;
}
.navbar {
    background: linear-gradient(315deg, #0D1D4A 0%, #307892 100%);
    padding: 0;
    box-shadow: none;
}
.navbar-inner {
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    min-height: 80px !important;
    padding: 40px 0;
}
.navbar-inner h2 {
    text-align: center;
    color: white;
    padding-top: 0px;
    margin-top: 5px;
    font-size: 36px;
}
.navbar .brand img {
    max-width: 100%;
}
.container {
    width: 90%;
}
.container2 {
    padding: 0 20px;
}
.container2 .row.form {
    position: relative;
    flex: 1;
}
.conference_page {

}
.conference_page #youtube {
    margin: 20px 0;
}

#right {
    position: absolute;
    top: 0px;
    right: -20px;
    height: 100%;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#right > div {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}


#sondage {
    flex-grow: 0 !important;
}
#offre {
    flex-grow: 0 !important;
}
#offre #offrehtml {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.box-header #online {
    opacity: .7;
}
.box-header .break{
    display: none;
}
.box-header .box-icon {
    float:right;
    margin-top: -1px;
}
.box-header .box-icon i {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    opacity: .7;
    color: #162131;
}
.box-header .box-icon i:hover {
    opacity: 1;
}
.box-header .box-icon a {
    margin: 0px 5px;
}
#chat {
    height: calc(100% - 74px);
    display: flex;
    flex-direction: column;
}
.panel-default {
    border: none;
    box-shadow: none;
    border-radius: 0px;
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}
#broadcastRoom.auditeur .panel.question .panel-body {
    display: none !important;
}
.panel.question .panel-footer {
    margin-top: 0px;
    padding: 10px 20px 20px 20px;
    border: none;
    background: white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}
.panel.question .emojiPickerIconWrap {
    height: 100%;
}
.panel.question .form-group {
    flex-shrink: 0 !important;
}

.panel.chat .panel-body {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}
.panel.chat .panel-footer {
    margin-top: 0px;
    padding: 0 20px 20px 20px;
    border: none;
    background: white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    flex-grow: 0;
}
.panel.chat .emojiPickerIconWrap {
    width: 100%;
}
.panel.chat .form-group {
    flex-shrink: 0 !important;
}


.box-content.chat .panel-body {
    padding: 0;
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}
.box-content.chat .panel-footer {
    margin-top: 0px;
    padding: 0px;
    border: none;
    background: white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    flex-grow: 0;
}
.box-content.chat .form-group {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}
.box-content.chat .panel-footer .emojiPickerIconWrap {
    width: 100%;
}

#chat .box-header {
    display: none !important;
}
#chat-publique,
#chat-prive {
    display: flex;
    flex: 1;
    flex-direction: column;
}
#chat-prive {
    padding: 20px;
}
#chat-prive .box-no-content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    top: 0;
    left: 0;
    transform: none;
    padding: 0;
}
#chat-prive #addQuestionForm .confirmation {
    height: 50px;
    margin-bottom: 20px;
    display: none;
    padding: 0 25px;
}
.webinar-sidebar .tab-content #box-chat .box-header .chat-settings {
    font-size: 13px;
    color: #34364B;
}
.webinar-sidebar .tab-content #box-chat .box-header .chat-settings i {
    font-size: 16px;
    color: #A6AAAF;
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 4px;
}
#chat textarea {
    box-shadow: none;
    border: 1px solid rgba(81, 96, 115, 0.31);
    height: 100%;
}
#chat #addQuestionForm {
    display: flex;
    flex: 1;
    flex-direction: column;
}
#chat-prive #addQuestionForm {
    flex-grow: 0;
}
.webinar-sidebar .tab-content #chat-desactive .box-no-content .icon {
    margin-bottom: 30px;
}
#chat form .form-group {
    margin: 0;
    padding: 0;
    border: none;
}
#chat form .form-group input {
    padding: 10px 16px;
}

#chat form .emojiPickerIconWrap {
    width: 100%;
    height: 100%;
}
#chat form .form-group .controls {
    width: 100%;
}
#chat form .form-group .input-group {
    display: table;
}
#broadcastRoom.auditeur #box-chat #pinned_messages {
    margin: 0 !important;
}

#chat #addQuestionForm .form-group.form-group-submit {
    margin-bottom: 30px;
}
#box-chat .panel #addCommentForm .addCommentFormRow .avatar {
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    width: 58px;
    min-width: 58px;
    height: 58px;
    margin: 0;
}



.chat-prive-form,
.chat-public-form {
    position: relative;
    z-index: 2;
    background: var(--Background-Secondary);
    border-radius: 24px;
    box-shadow: 0 10px 10px 0 #F2F2F2;
    height: 140px;
    padding: 24px;
}
.chat-prive-form #addQuestionForm,
.chat-public-form #addCommentForm {
    display: flex;
    flex-direction: column;
    width: 100%;
    vertical-align: top;
    padding: 0;
    border: none;
    height: 92px;
}
.addCommentFormRow {
    display: flex;
    flex-direction: row;
    gap: 0;
}
@media (max-width: 767px) {
    .addCommentFormRow {
        width: 100%;
    }
}
.addCommentFormRow .avatar {
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    width: 48px;
    min-width: 48px;
    height: 48px;
}
.chat-prive-form #addQuestionForm .form-group-question {

}
#chat #addQuestionForm .form-group-question textarea {
    padding: 9px 16px;
    resize: none;
}
#chat #addQuestionForm .form-group-question.error textarea,
#chat #addCommentForm .form-group-message.error input {
    border-color: #ED3B51;
}

#comments-container {
    width: auto;
    overflow: scroll;
    overflow-x: hidden;
    display: block;
    flex: 1;
}
#comments_scroll {
    bottom: 80px !important;
}
.webinar-sidebar .tab-content #box-chat #comments_scroll .btn {
    background: var(--app-color-primary);
    border-color: var(--app-color-primary);
    color: #FFFFFF;
    opacity: 1;
    line-height: 24px;
}

#infoReloadPage {
    width: 100%;
    background: rgba(0,0,0,.7);
    position: fixed;
    left: 0;
    bottom: 0;
    color: white;
    text-align: center;
    display: none;
    padding: 10px;
    z-index: 1000;
}
#infoReloadPage a {
    color: white !important;
    margin-left: 10px;
}

#presenters .popover {
    max-width: 300px;
}
#presenters .popover-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#presenters .popover-content span.name {
    font-size: 16px;
    font-weight: 700;
}


.str_orders {
    position: absolute;
    background: white;
    padding: 11px;
    font-size: 13px;
    top: 20px;
    left: 20px;
    color: #90959A;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(20,27,58,0.14), 0 2px 16px 0 rgba(0,0,0,0.15);
    max-width: 300px;
}
.str_orders .prenom {
    color: #34364B;
    font-weight: 500;
}
.str_orders i {
    color: #34364B;
    margin-right: 5px;
}
#youtube {
    display: flex;
    flex-flow: wrap;
    align-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    flex: 1;
    position: relative;
}
#youtube #video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#youtube .youtube-overlay {
    height: 50px;
    width:175px;
    background:transparent;
    z-index:1000;
    position:absolute;
    right:10px;
    bottom:60px;
}
.str_chat {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: white;
    box-sizing: border-box;
    max-width: 500px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.60);
    display: flex;
    padding: 16px;
    padding-right: 40px;
    align-items: center;
    gap: 24px;
}
.str_chat .avatar {
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    margin: 0;
}
.str_chat .message-content {
    display: flex;
    flex-direction: column;
    position: relative;
}
.str_chat h4 {
    margin: 0;
    padding: 0;
    color: white !important;
    font-size: 14px;
    font-weight: 700;
}
.str_chat p {
    color: white !important;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
.str_chat .chat-notification-img {
    width: 73px;
    position: absolute;
    top: -30px;
    right: -20px;
    z-index: 2;
}

@media (max-width:480px) {
    .str_chat {
        width: 100%;
    }
}

.block-viewers {
    z-index: 1;
}


.videoWrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.modal {
    z-index: 10000;
}
/*.modal.in .modal-dialog {
    width: 500px;
}
.modal .modal-dialog .modal-header h4 {
    font-weight: normal;
}
.modal .modal-dialog .modal-body p {
    text-align: left;
    color: #34364B;
}
.modal .modal-dialog .modal-header + .modal-body {
    padding: 20px 30px;
}
.modal-footer {
    text-align: center;
}
.modal .modal-footer .btn {
    width: auto;
    min-width: 100px;
    margin-right: 0;
    font-size: 13px;
    padding: var(--app-btn-padding);
    height: var(--app-btn-height);
    line-height: var(--app-font-size);
}
.modal .modal-footer .btn.btn-primary {
    background: var(--app-color-primary) !important;
    color: white !important;
    border: none !important;
}*/

.btn-xlarge {
    width:100%;
    padding: 15px 19px;
    font-size: 24px;
    line-height: 28px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-sizing: border-box;
}


.gritter-error .gritter-item {
    background: #FA565D !important;
}



@media(max-width:767px) {
    body {
        display: block;
        overflow: hidden!important;
        max-height: 100%;
    }
    body > div {
        display: block;
        overflow: visible;
    }
    body #conference {
        overflow: visible;
    }
    #right {
        position: relative;
        right: 0;
    }
    #right > div {
        display: block;
    }
    #broadcastRoom {
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }
    #broadcastRoom .main-content {
        flex-direction: column;
        height: 100%;
        flex-grow: 0;
        gap: 8px;
    }
    .main-container-layout {
        flex: 1;
        height: auto;
        min-height: 250px;
    }
    #broadcastRoom .main-container {
        height: 100%;
        border-radius: 16px;
    }
    .videoWrapper {
        border-radius: 16px;
    }
    #broadcastRoom .webinar-sidebar {
        width: 100%;
        height: auto;
        flex: 0 1 auto;
        overflow: hidden;
        position: relative;
    }
    #broadcastRoom.is-full-width .main-container-layout {
        height: 100%;
        flex: 1;
    }
    #broadcastRoom.is-full-width .webinar-sidebar {
        height: 0;
        flex: 0;
    }
    #broadcastRoom .webinar-sidebar .tab-content #box-chat #comments-container #comments {
        padding: 5px;
    }
    /*#broadcastRoom .webinar-sidebar .tab-content #box-chat #addCommentForm {
        position: fixed!important;
        bottom: 0px!important;
    }*/
    #broadcastRoom .webinar-sidebar .sidebar-content {
    }
    .navbar .brand {
        display: block;
        text-align: center;
    }
    .topbar .main-actions-2 {
        display: none;
    }
    #youtube #video-container {
        min-height: 200px;
    }
    #chat .chat #comment_errors .alert {
        border-radius: 0px;
        margin-bottom: 0px;
    }
    #presenters-container .presenters-infos {
        padding-left: 0;
        padding-right: 14px;
    }
    .footer-actions {
        grid-template-columns: 1fr;
        height: 55px;
        min-height: 55px;
    }
    .presenters-nb {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    #chat-prive {
        overflow-y: scroll !important;
    }
}


#sondage {
    margin-bottom: 0px;
}
#sondage_resultats table {
    margin-bottom: 0;
}
#sondage .sondage {
    border-radius: 16px;
    background: var(--Background-Secondary, #FFF);
    box-shadow: 0 10px 25px 0 var(--Shadow-Color_shadow_beige, rgba(240, 230, 225, 0.43));
    display: flex;
    padding: 24px 36px;
    flex-direction: column;
}
#sondageform {

}
#sondageform p {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 40px;
}
#sondageform .control-group {
    font-size: 14px;
    font-weight: 300;
}
#sondageform .checkbox {
    margin-bottom: 16px;
}
#sondageform .checkbox label,
#sondageform .radio label {
    padding-left: 0;
}
#sondageform .checkbox,
#sondageform .radio {
    margin-right: 10px;
}
#sondageform .sondage-actions {
    margin-top: 24px;
    text-align: center;
}


#box-textes .box-content {
    padding: 0;
}
.conf_texte {
    border-radius: 16px;
    background: var(--Background-Secondary, #FFF);
    box-shadow: 0 10px 25px 0 var(--Shadow-Color_shadow_beige, rgba(240, 230, 225, 0.43));
    padding: 24px;
}

#texte-theme2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-neutral-white-20, rgba(255, 255, 255, 0.20));
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
#texte-theme2 .texte-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    animation: scroll-text 5s linear infinite;
}
#texte-theme2 .texte.theme2,
#box-textes .texte.theme2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
}
@keyframes scroll-text {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}
#texte-theme2 .texte-container:hover {
    animation-play-state: paused;
}
#texte-theme2 .texte.theme2 .texte-header-icon,
#box-textes .texte.theme2 .texte-header-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--common-primary-brand-coral-100, #FF7559);
}
#texte-theme2 .texte.theme2 .texte-header-icon i,
#box-textes .texte.theme2 .texte-header-icon i {
    color: #FFF;
    font-size: 16px;
}
#texte-theme2 .texte.theme2 .texte-header-image img,
#box-textes .texte.theme2 .texte-header-image img {
    width: 65px;
    height: 53px;
}
#texte-theme2 .texte.theme2 .texte-title,
#box-textes .texte.theme2 .texte-title {
    color: #FFF;
    font-size: 22px;
    font-weight: 800;
}
#texte-theme2 .texte.theme2 .texte-content,
#box-textes .texte.theme2 .texte-content {
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    gap: 16px;
}
#texte-theme2 .texte.theme2 .texte-content p,
#box-textes .texte.theme2 .texte-content p {
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    #texte-theme2 {
        display: none;
    }
    #box-textes .texte.theme2 {
        flex-direction: column;
        border-radius: 16px;
        background: var(--Background-Secondary, #FFF);
        box-shadow: 0 10px 25px 0 var(--Shadow-Color_shadow_beige, rgba(240, 230, 225, 0.43));
        padding: 24px;
        align-items: flex-start;
    }
    #box-textes .texte.theme2:nth-child(2) {
        display: none;
    }
    #box-textes .texte.theme2 .texte-title {
        color: var(--app-color-dark);
        font-size: 18px;
    }
    #box-textes .texte.theme2 .texte-content,
    #box-textes .texte.theme2 .texte-content p {
        color: var(--app-color-dark);
        font-size: 16px;
    }
}


.topbar .logo {
    padding: 10px;
}
.topbar .logo img {
    max-height: 50px;
}
.topbar .main-actions .btn-action {
    color: #34364B;
    outline: none;
}
.webinar-sidebar .nav-tabs > li:last-child {
    width: auto;
}
.topbar .conference-icon,
.page-container .topbar .conference-icon {
    padding: 10px;
}
.topbar .conference-icon i {
    transform: scale(.7);
}
.topbar .label-record .record-circle {
    border: none;
    width: 24px;
    height: 24px;
    padding: 4px;
}
.topbar .label-record .record-circle img {
    width: 16px;
    height: 16px;
    animation: loader 2s linear infinite;
}
.topbar .label-record .record-circle.ended img {
    animation: none;
}
.main-container {
    overflow: hidden;
    border-radius: 24px;
}


.topbar .logo {
    padding: 10px;
}
.topbar .logo img {
    max-height: 50px;
}
.topbar .main-actions .btn-action {
    color: #34364B;
}
.webinar-sidebar .nav-tabs > li:last-child {
    width: auto;
}
.topbar .conference-icon {
    padding: 10px;
}
.topbar .conference-icon i {
    transform: scale(.5);
}
.main-container {
    height: calc(100vh - 70px);
}

.webinar-sidebar .nav-tabs {
    width: auto;
    border-bottom: none;
    border-right: none;
}
.webinar-sidebar .nav-tabs > li > a {
    height: 69px;
}

.video-waiting {
    background: black;
    display: block;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}
.video-waiting .video-waiting-infos {
    text-align:center;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.video-waiting .video-waiting-infos h3 {
    color:white;
    font-weight: normal;
}
.video-waiting .img-container {
    margin: 30px auto;
    text-align: center;
}
.video-waiting img {
    width: 106px;
    animation: loader 2s linear infinite;
}
@-webkit-keyframes loader {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bloc-poweredby .conference-icon {
    margin-bottom: 0;
}
.bloc-poweredby .tooltip {
    margin-top: -15px;
    margin-left: -5px;
    opacity: 1;
}
.bloc-poweredby .tooltip .tooltip-inner {
    padding: 16px 25px;
    box-shadow: 0 1px 4px 0 rgba(20,27,58,0.14), 0 2px 16px 0 rgba(0,0,0,0.15);

}
.bloc-poweredby .tooltip .tooltip-arrow {
    top: -2px;
    border-width: 0 10px 10px;
}

/**** EDITOR ****/
.page-content #broadcastRoom,
.page-content .webinar-sidebar {
    height: calc(100vh - 58px);
}
.page-content .main-container {
    height: calc(100vh - 128px);
}
.editor-sidebar #accordionBgType,
.editor-sidebar #collapseLogo #logoSize,
.editor-sidebar #collapseLogo .mainColor {
    display: none;
}
#broadcastRoom .logo-container {
    padding: 10px;
    height: auto;
}
#broadcastRoom .logo-container img {
    max-height: 50px;
}

.logo-lb-container {
    height: 48px;
    line-height: 48px;
    font-weight: 300;
    font-size: 16px;
    padding: 0 10px;
    color: #FFF;
}
.logo-lb-container .conference {
    font-weight: 500;
    color: #FFF;
}


#modalEnterConference {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(28, 29, 35, 0.85);
    width: 100%;
    height: 100%;
    z-index: 10000;
    text-align: center;
}
#modalEnterConference .content {
    box-shadow: 0 4px 64px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: var(--app-modal-radius);
    border: none;
    background: var(--Background-Primary, #F9F5F1);
    padding: 50px;
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#modalEnterConference .content h2 {
    font-size: 18px;
    margin: 0 0 20px 0;
}
#modalEnterConference .content .avatar img {
    width: 72px;
    height: 72px;
    box-shadow: 0 2px 5px 0 rgba(52,54,75,0.2);
}
#modalEnterConference button {
    margin-top: 5px;
}
@media (max-width: 767px) {
    #modalEnterConference .content {
        width: 90%;
    }
}

#hackYt {
    height: 100px;
    width: 100%;
    background: transparent;
    z-index: 1000;
    position: absolute;
    right: 0;
    top: 0;
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
    display:none !important;
    -webkit-appearance: none;
}

.footer-poweredby {
    height: auto;
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: white;
}
.footer-poweredby p {
    color: white;
}


.chapter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-neutral-white-30, rgba(255, 255, 255, 0.30));
    box-shadow: 0 4px 20px 0 rgba(69, 66, 66, 0.18);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 68px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
.chapter.box {
    top: unset;
    bottom: 20px;
    left: 20px;
    width: auto;
    height: auto;
    padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.chapter.box img {
    width: 60px;
    height: 60px;
}
.chapter.box h3 {
    color: #FFF !important;
    font-size: 48px;
    font-weight: 900;
    line-height: 120%;
    letter-spacing: -1px;
}

.chapter.fullscreen img {
    width: 83px;
    height: 82px;
    position: absolute;
    left: -6px;
    bottom: -6px;
}
.chapter.fullscreen h3 {
    color: #FFF;
    font-size: 96px;
    font-weight: 900;
    line-height: 100%;
    letter-spacing: -2px;
}
@media (max-width: 767px) {
    .chapter {
        padding: 40px;
    }
    .chapter.fullscreen h3 {
        font-size: 32px;
    }
    .chapter.fullscreen img {
        width: 40px;
        height: 40px;
        left: -3px;
        bottom: -3px;
    }
    .chapter.box {
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 24px;
        gap: 12px;
    }
    .chapter.box img {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .chapter.box h3 {
        font-size: 32px;
    }
}