body{
    background-color: #F5F5F7 !important;
    font-family: "Sofia Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pagination a.active {
    border-color: rgb(8%, 4%, 41%);
}

.sidebar-pills {
    padding: 0 !important;
}


/*.live-conference-chat-msg {*/
/*    border-radius: 12px;*/
/*}*/

@media screen and (max-width: 1023px) {
    .live-conference-chat-msg {
        padding-top: 2em;
    }
}

iframe {
    border-radius: 10px;
}


@media (max-width: 640px) {
    iframe {
        width: 350px !important;
        height: 300px;
    }

    body > div > main > div.lg\:flex.pb-9 > div.flex-1.mx-auto.bg-white.rounded-lg.pt-4 {
        margin-top: 2em;
    }

    body > div > main > div:nth-child(3) {
        margin-top: 2em;
    }

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.bg-white.rounded-lg.flex-column.justify-between {
        height: 300px;
    }
}


@media (min-width: 768px) {

    iframe {
        width: 750px !important;
        height: 500px;
        margin-bottom: 2em;

    }

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.bg-white.rounded-lg.flex-column.justify-end {
        height: 500px;
    }

}


@media (min-width: 1024px) {
    iframe {
        width: 550px !important;
        height: 500px;

        margin-bottom: 2em;
    }

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.bg-white.rounded-lg.flex-column.justify-end {
        height: 530px;
    }
}


@media (min-width: 1280px) {
    iframe {
        width: 600px !important;
        height: 450px;
    }

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.bg-white.rounded-lg.flex-column.justify-end {
        height: 500px;
    }
}

@media (min-width: 1536px) {
    iframe {
        width: 700px !important;
        height: 455px;
    }

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.bg-white.rounded-lg.flex-column.justify-end {
        height: 500px;
    }
}



.tracking-wider{
    width: 16.66%;
}

.td-wider{
    width: 16.66%;
}

.td-wider-speaker{
    width: 33.33%;
}

.td-wider-name{
    width: 33.33%;
}

.td-wider-link{
    width: 10%;
}

.active-url{
    background-color: rgb(238 242 255 / 1) !important;
    border-color: #140968 !important;
    border-left-width: 4px !important;
}

.active-url svg{
    color: #140968 !important;
}

.app-footer{
    background: white;
}

.h2, h2 {
    font-size: 2rem !important;
}

.bg-primary{
    background-color: #140968 !important;
}

.btn-primary{
    background-color: #140968 !important;
}

.page-item.active .page-link{
    background-color: #140968 !important;
}

.btn-link{
    color: #140968 !important;
}

.btn-success{
    background-color: #140968 !important;
    border: none !important;
}

.app-header.bg-light .navbar-brand{
    opacity: 1 !important;
}


#crudTable tbody tr td span{
    font-size: 0.875rem;
    line-height: 1.25rem;
}


#crudTable .delete-btn-crud{
    border: 1px solid transparent !important;
}

a:hover {
    text-decoration: none !important;
}

.comment-background {
    background-color: white;
}


body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.rounded-lg.flex-column.justify-end.content-center {
    margin-left: 2em;
    margin-right: 2em;
}


@media (max-width: 768px) {

    body > div > main > div > div.lg\:flex > div.flex.flex-1.mx-auto.rounded-lg.flex-column.justify-end.content-center {
        margin-left: 0em;
        margin-right: 0em;
    }


    body > div > main > div > div.overflow-hidden.rounded-lg.mx-8.mt-8.bg-blue-50{
    margin-left: 0em;
    margin-right: 0em;
}


    body > div > main > div > span {
        margin-top: 2em;
    }


    iframe {
        margin-left: 2em;
        margin-right: 2em;
    }


}

.error-current{
    transform: translateY(2);
    opacity: 0;
}

.error-inactiv {
    transform: translateY(2px);
    opacity: 0;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    z-index: -1 !important;
}

.error-activ {
    opacity: 1;
    animation-name: errors-messages;
    animation-duration: 1s;
}

@keyframes errors-messages {
    from{
        transform: translateY(2);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;

    }
}

.success-container div.pointer-events-auto{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 500ms;
}