.compact-table-header {
    border-bottom: 1px solid gray !important;
    margin-top: 2px !important;
    color: white;
    background-color: #51a0df;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3px;
}
.compact-table-search {
    border-bottom: 1px solid gray !important;
    margin-top: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background-color: #DEE5ED;
}

.color-fade {
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 100%);
}

.lab-warning-large {
    font-size:20px;
    color:slategray;
    opacity:0.9;
}

.lab-warning{
    font-size: 16px;
    color: black;
    font-weight:normal;
   
}

.justified-video {
    text-align: center;
}

    .justified-video > * {
        display: inline-block;
        vertical-align: middle;
    }

    .justified-video::after {
        content: "";
        width: 100%;
        display: inline-block;
    }

.mirrored-vid {  
    /*Mirror code starts*/
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
    -moz-transform: rotateY(180deg); /* Firefox */
    /*Mirror code ends*/
}


.app-attended {
    color: lightseagreen !important;
}

.app-not-attended {
    color: orangered !important;
}

.red-timer {
    color: red;
}

.centering-outer-hor {
    display: table;
    margin: auto !important;
}

.centering-outer-ver {
    display: table-cell;
    vertical-align: middle;
}

.justified-adjustment {
    text-align: center;
}

    .justified-adjustment > * {
        display: inline-block;
        vertical-align: middle;
    }

    .justified-adjustment::after {
        content: "";
        width: 100%;
        display: inline-block;
    }

.btn-round {
    border-radius: 999px !important;
    padding: 4px 8px !important;
    margin-left: 2px !important;
}

.btn-toolbox {
    display: inline-block;
    margin: 3px auto !important;
    padding: 8px 14px;
}

.calender-day {
    border: solid 1px;
    border-color: cornflowerblue !important;
    background-color: #51A0DF35;
}

    .calender-day:hover {
        background-color: #51A0DF75;
    }

.cal-day-apps {
    color: darkorange !important;
    font-weight: bold;
}

.cal-day-disabled {
    color: gray;
    background-color: #51A0DF15;
}

.app-disabled {
    color: gray;
    background-color: #51A0DF15;
    text-decoration: line-through;
}

.cal-day-selected {
    background-color: #51A0DF;
    font-weight: bold;
}

.padding-top-zero {
    padding-top: 0px !important;
}

.padding-top-header {
    padding-top: 60px !important;
}

.btn-weekDay {
    background-color: lightgray !important;
    color: black;
    border-radius: 999px !important;
}

.btn-weekDay-selected {
    background-color: #1B9AC5 !important;
    color: white;
    border-radius: 999px !important;
}

.float-notch {
    position: absolute;
    top: 0px !important;
    left: 0px !important;
    width: auto;
    height: auto;
    z-index: 1000;
    /*background: rgba(0,191,255,1);*/
    background: rgba(120,181,242,0.5);
    text-align: left;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
}

.fontsize-calc-heading {
    font-size: calc(8px + 1vw) !important;
}

.link-heading-large {
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
}

.link-heading-small {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.link-heading-color {
    color: white;
}

.img-hzhm-small {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 45px;
}

.note-heading {
    color: black !important;
    font-size: 20px !important;
    text-align: left !important;
    white-space: pre-line !important;
    padding-left: 5px !important;
    font-weight: bold !important;
    display: inline-block !important;
    margin: 0px !important;
}

.note-content {
    color: black !important;
    font-size: 18px !important;
    text-align: left !important;
    white-space: pre-line !important;
    padding-left: 5px !important;
    font-weight: normal !important;
    margin-top: 10px !important;
}

.table-row-border {
    border-bottom: 1px solid gray !important;
}

.compact-table-row {
    border-bottom: 1px solid gray !important;
    margin-top: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background-color: white;
}

.td-notebook {
    background-color: white !important;
}

.compact-table-row > td {
    background-color: white !important;
    color: gray;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid gray !important;
}


.noborder-reg {
    border-right: none;
}

.border-reg {
    border-left: 2px solid dodgerblue;
}


.dragover {
    border: 2px dashed black;
    background-color: #a5a5a5;
}

.drag-drop {
    height: 100px;
    border-color: dodgerblue;
    border-radius: 7px;
    border-width: 5px;
    border-style: dashed;
}

.flex-centered-cont {
    display: flex;
    align-items: center;
}

.flex-centered-label {
    text-align: center !important;
    width: 100% !important;
}

.locations-list-gen {
    background-color: white;
    border-radius: 5px !important;
    padding: 15px !important;
    max-height: 200px !important;
    overflow-y: scroll;
}

.locations-list-home {
    background-color: white;
    border-radius: 5px !important;
    padding: 5px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
    max-height: 200px !important;
    overflow-y: scroll;
}

.eduItem-link-centered {
    color: dodgerblue !important;
    font-size: 14px !important;
    white-space: pre-line !important;
    text-decoration: underline;
    text-align: center !important;
    width: 100% !important;
    margin: 0px !important;
}

.eduItem-org-bold {
    color: gray !important;
    font-size: 14px !important;
    text-align: left !important;
    white-space: pre-line !important;
    padding-left: 5px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    margin: 0px !important;
}

.item-underline {
    text-decoration: underline;
}

.locations-list {
    background-color: white;
    border-radius: 5px !important;
    padding: 15px !important;
}

.locations-list-item {
    color: gray !important;
    font-size: 14px !important;
    text-align: left !important;
    padding-left: 5px !important;
    border-bottom: 1px solid gray;
    height: 30px !important;
    line-height: 22px;
}

.subtitle-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 5px 10px !important;
}

.important-label {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: red !important;
    margin: 5px 0px !important;
}

.main-sub {
    font-size: 26px !important;
    color: black;
    font-weight: 800 !important;
}

.main-row-sub {
    background-color: #DBEAFA;
    padding: 7px !important;
}

.float-print {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    width: 400px !important;
    height: auto !important;
    z-index: 500;
    padding: 5px !important;
    /*background: rgba(0,191,255,1);*/
    background: white;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
    /*padding:2%!important;*/
}

.float-print-big {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -30%);
    width: 500px !important;
    height: auto !important;
    z-index: 500;
    padding: 5px !important;
    /*background: rgba(0,191,255,1);*/
    background: white;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
    /*padding:2%!important;*/
}


.search-row {
    max-height: 500px !important;
    scroll-behavior: auto;
    overflow-y: scroll;
    box-shadow: -5px 5px 25px 0px gray !important;
    padding: 20px !important;
    background-color: white;
}

.search-active {
    background-color: #DBEAFA;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.search-background {
    background-color: #DBEAFA;
    padding-left: 10px !important;
    padding-right: 10px !important;
}


.search-heading {
    font-size: 22px !important;
    color: black;
    font-weight: 700 !important;
}

.search-subheading {
    font-size: 18px !important;
    color: black;
    font-weight: 700 !important;
    text-decoration: underline;
}

.search-message {
    font-size: 18px !important;
    color: black;
    font-weight: 600 !important;
}

.search-item {
    background-color: white !important;
    padding: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    height: auto;
}

.search-item-image {
    height: 50px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    width: 100% !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
}

.pad-search {
    padding: 3px !important;
}

.fa-size-00 {
    font-size: 22px !important;
}


@media (max-width: 1621px) {

    .hide-1600 {
        visibility: collapse;
        width: 0px !important;
    }
}


@media (min-width: 1622) {
    .hide-1600 {
        visibility: visible;
        width: 200px !important;
    }
}

@media (max-width: 992px) {
    .float-locationDetail {
        position: fixed;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -30%);
        z-index: 500;
        height: 80%;
        width: 100%;
    }

    .float-locations {
        position: absolute;
        top: 20px !important;
        right: 0px !important;
        width: 300px !important;
        height: auto !important;
        z-index: 100;
        padding: 5px !important;
        /*background: rgba(0,191,255,1);*/
        background: white;
        text-align: center;
        border-radius: 7px !important;
        box-shadow: -5px 5px 10px 0px gray;
        /*padding:2%!important;*/
    }
}

@media (min-width: 993px) {
    .float-locationDetail {
        position: fixed;
        left: 50%;
        top: 30%;
        transform: translate(-30%, -30%);
        z-index: 500;
        height: 50%;
        width: 50%;
    }

    .float-locations {
        position: absolute;
        top: 20px !important;
        left: 0px !important;
        width: 300px !important;
        height: auto !important;
        z-index: 100;
        padding: 5px !important;
        /*background: rgba(0,191,255,1);*/
        background: white;
        text-align: center;
        border-radius: 7px !important;
        box-shadow: -5px 5px 10px 0px gray;
        /*padding:2%!important;*/
    }
}

.height-100 {
    height: 92vH !important;
}


@media (min-width:1200px) {
    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: minmax(150px,280px);
    }

    .video-grid-spotlight {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        grid-auto-rows: minmax(380px,1fr);
    }

    .video-item {
        display: inline-block;
        margin: 3px auto !important;
        width: 33% !important;
        max-width: 300px !important;
        max-height: 270px !important;
        aspect-ratio:1/1 !important;
    }

/*    .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        width: 45% !important;
        max-width: 960px !important;
        max-height: 960px !important;
    }*/

    .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        height: 90% !important;
        width:45% !important;
    }

    .video-item-single {
        display: inline-block;
        margin: 3px auto !important;
        height: 90vH !important;
        /* width: 75% !important;
        max-width:1200px!important;
        max-height: 800px !important;*/
    }
}

@media (max-width:1199px) {
    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-rows: minmax(250px,1fr);
    }

    .video-grid-spotlight {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: minmax(250px,1fr);
    }

    .video-item {
        display: inline-block;
        margin: 3px auto !important;
        width: 33% !important;
        aspect-ratio: 1/1 !important;
    }

  /*  .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        width: 45% !important;
    }
*/

    .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        height: 90% !important;
        width: 45% !important;
    }

    .video-item-single {
        display: inline-block;
        margin: 3px auto !important;
        height: 90vH !important;
    }
}

@media (max-width:799px) {
    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        grid-auto-rows: minmax(165px,1fr);
    }

    .video-grid-spotlight {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
        grid-auto-rows: minmax(185px,1fr);
    }

    .video-item {
        display: inline-block;
        margin: 3px auto !important;
        width: 50% !important;
        aspect-ratio: 1/1 !important;
    }

 /*   .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        width: 45% !important;
    }*/


    .video-item-large {
        display: inline-block;
        margin: 3px auto !important;
        height: 50% !important;
        width: 90% !important;
    }

    .video-item-single {
        display: inline-block;
        margin: 3px auto !important;
        height: 90vH !important;
    }
}

.video-grid {
    background-color: black;
}

.video-grid-spotlight {
    background-color: black;
}



.img-mask-past {
    background: linear-gradient(to right, gray, black);
    height: 100%;
    border-radius: 5px !important;
}

.eduItem-image-past {
    object-fit: cover;
    height: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    width: 100% !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
}


.ribbon-container {
    height: 150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    width: 100% !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    position: relative;
}

.ribbon {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 60px solid transparent;
    border-top: 60px solid #757575;
    position: absolute;
    bottom: -46px;
    right: -66px;
    padding: 0 10px;
    width: 160px;
    color: white;
    font-family: Arial;
}

    .ribbon .txt {
        position: absolute;
        top: -58px;
        left: 0px;
    }

.timer-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
}

.background-blocker {
    position: fixed;
    left: 0px;
    width: 100vW;
    top: 0px;
    height: 100vH;
    background: rgba(0,0,0,0.15);
    z-index: 10000;
}

.timer-container {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -30%);
    width: 200px;
    height: 200px;
    z-index: 10001;
    /*background: rgba(245,165,3,0.7);*/
    /*background: rgba(0,0,0,0.15);*/
    border-radius: 50% !important;
    box-shadow: -5px 5px 25px 0px gray;
}

.timer-message {
    font-size: 1.0em;
    font-weight: normal;
    color: white;
    width: 60%;
    text-align: center;
}

.timer-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px !important;
}

/*.timer-circle {
    position: relative;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: dodgerblue;
    animation: fadeBackground 1s;
    animation-fill-mode: forwards;
}*/

@keyframes fadeBackground {
    from {
        background-color: rgba(0,0,0,0);
    }

    to {
        background-color: dodgerblue;
    }
}
/*
.timer-text span {
    position: absolute;
    left: 50%;
    font-size: 1.1em;
    font-weight: bold;
    transform-origin: 0 100px;
    color: white;    
}*/

.timer-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
   

.timer-text {
    position: absolute;
    inset: 0;
}

    .timer-text span {
        position: absolute;
        left: 50%;
        top: 50%;
        color: white;
        font-size: 1.1em;
        font-weight: bold;
        transform-origin: center center;
        white-space: pre;
    }



@keyframes rotateText {
    0% {
        transform: rotate(-360deg);
    }
}


.inp-table-compact {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 13px !important;
    height: 22px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.inp-table-name {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 13px !important;
    height: 22px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 140px !important;
}

.inp-table-mail {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 13px !important;
    height: 22px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 200px !important;
}

.inp-table-small {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 13px !important;
    height: 22px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 80px !important;
}

.blink-bg {
    animation: blinkingBackground 2s infinite;
}

@keyframes blinkingBackground {
    0% {
        background-color: #10c018 !important;
    }

    25% {
        background-color: #1056c0 !important;
    }

    50% {
        background-color: #ef0a1a !important;
    }

    75% {
        background-color: #254878 !important;
    }

    100% {
        background-color: #04a1d5 !important;
    }
}

.shaded-background {
    border-radius: 10px !important;
    background: rgba(108,103,108,0.4);
}

.ctx-menu-chat {
    padding: 1px !important;
    list-style-type: none !important;
}

.ctx-menu-item {
    text-align: right;
    color: white;
    padding: 5px !important;
    border-bottom: 1px solid white;
}

    .ctx-menu-item:hover {
        background-color: #286090;
    }

.context-menu-bottom {
    position: absolute;
    top: 40px !important;
    right: 15px !important;
    padding: 10px;
    width: auto;
    z-index: 10;
    text-align: left;
    background: rgba(120,181,242,1);
    border-radius: 7px !important;
    box-shadow: -5px 5px 25px 0px gray;
}


.message-count {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: auto;
    height: auto;
    background: orange;
    z-index: 10;
    border-radius: 999px !important;
    padding: 0px 7px;
}

.group-container-fixed {
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    width: 50%;
    height: auto;
    z-index: 10000;
    background-color: white;
    padding: 10px 15px !important;
    border-radius: 10px !important;
    border: 2px solid #1B9AC5;
    box-shadow: -5px 5px 25px 0px gray;
}

.notify-container-fixed {
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    width: auto;
    height: auto;
    z-index: 10000;
    /*background: rgba(245,165,3,0.7);*/
    background: rgba(0,191,255,0.8);
    padding: 20px 30px !important;
    border-radius: 10px !important;
}


.notify-message {
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    /* background: #1B9AC5;
    color: white;*/
    background: white;
    color: black;
}

.float-video-AltRight {
    position: absolute;
    top: 5px !important;
    right: 15px !important;
    width: 200px;
    height: auto;
    z-index: 10;
    /*background: rgba(0,191,255,1);*/
    background: rgba(120,181,242,0.5);
    text-align: left;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
}

.float-video-right {
    position: absolute;
    top: 5px !important;
    right: 5px !important;
    width: 150px;
    height: auto;
    z-index: 10;
    /*background: rgba(0,191,255,1);*/
    background: rgba(120,181,242,0.5);
    text-align: left;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
}

.float-video-left {
    position: absolute;
    top: 5px !important;
    left: 5px !important;
    width: 150px;
    height: auto;
    z-index: 100;
    /*background: rgba(0,191,255,1);*/
    background: rgba(120,181,242,0.5);
    text-align: left;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
}

.float-clock {
    position: absolute;
    top: 10px !important;
    right: 15px !important;
    width: 200px !important;
    height: 250px !important;
    z-index: 10;
    /*background: rgba(0,191,255,1);*/
    background: rgba(120,181,242,1);
    text-align: center;
    border-radius: 7px !important;
    box-shadow: -5px 5px 10px 0px gray;
    /*padding:2%!important;*/
}

.video-large {
    height: 700px !important;
}

.time-container-flex {
    position: absolute;
    width: 200px !important;
    height: 50px !important;
    align-items: center;
    justify-content: center;
    display: flex;
    bottom: 0px !important;
}

.time-text {
    text-align: center;
    font-size: 25px !important;
    font-weight: 500;
    color: mediumspringgreen;
}

.time-btn {
    background-color: white;
    color: dodgerblue;
    margin: 2px !important;
}

.container-flex {
    position: absolute;
    width: 200px !important;
    height: 200px !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

.clock-container {
    position: relative;
    display: inline-block;
    width: 80% !important;
    height: 80% !important;
}

.clock-container-inner {
    position: relative;
    display: inline-block;
    width: 50% !important;
    height: 50% !important;
}

.clock-button-min {
    position: absolute;
    width: 26px;
    height: 26px;
    text-align: center;
    align-content: center;
    border-radius: 15px;
    background-color: rgba(0,0,0,0);
    border: 0px;
}

.clock-text-min {
    font-size: 13px !important;
    font-weight: 400;
    color: white;
}

.clock-text-contaner {
    position: absolute;
    width: 70px !important;
    height: 38px !important;
    align-content: center;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.5);
}


.clock-button {
    position: absolute;
    width: 31px;
    height: 31px;
    text-align: center;
    align-content: center;
    border-radius: 16px;
    /*background-color: dodgerblue;*/
    background-color: rgba(0,0,0,0);
    border: 0px;
    z-index: 50;
}

.clock-text {
    font-size: 16px !important;
    font-weight: 600;
    color: white;
}

.floating-top {
    width: 100%;
    text-align: center;
}

.floating-toolbar {
    position: absolute;
    top: 2px !important;
    right: 0px !important;
    width: 90%;
    z-index: 900;
    text-align: center;
}

.floating-VOT {
    position: absolute;
    top: 0px !important;
    left: -2px !important;
    padding-bottom: 0px !important;
    width: 100%;
    z-index: 10;
    text-align: center;
}


.floating-bottom {
    position: absolute;
    bottom: 0px !important;
    left: -2px !important;
    padding-bottom: 0px !important;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.floating-bottom-alt {
    position: absolute;
    bottom: -10px !important;
    padding-bottom: 0px !important;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.contrast-frame {
    background: rgba(120,181,242,0.5);
    padding: 7px !important;
    border-radius: 10px !important;
}

.dashboard-table-row-midHeader {
    background: white;
    padding: 5px !important;
    padding-bottom: 2px !important;
    color: black;
    margin-bottom: 10px !important;
}

.dashboard-table-row {
    background-color: #1B9AC5;
    border-radius: 0px !important;
    border-width: 5px !important;
    border-color: #D3E3FD;
    border-top-color: #D3E3FD !important;
    color: white;
}

/*.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
    position: relative;   
}*/

/*.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(180px, 1fr));
    position: relative;   
}*/





.video-grid-screenshare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    position: relative;
    padding: 5px;
    max-height: 120px !important;
    background: rgba(120,181,242,0.5);
    border-radius: 10px !important;
    max-width: 1820px !important;
}

.speaker-border {
    border: 0.3em solid #24B276;
    border-radius: 16px !important;
}

.speaker-bck {
    background: rgba(0,167,177,0.5);
}

.raisehand-bck {
    background: rgba(237,160,23,0.5);
}

.raisehand-border {
    border: 0.3em solid orange;
    border-radius: 16px !important;
}


.icon-button {
    width: 18px !important;
    height: 18px !important;
}

.video-wrapper {
    position: relative;
    height: auto;
    padding: 2px !important;
    text-align: center;
}

.dimensions-5 {
    height: 100% !important;
    width: 100% !important;
}

.video-wrapper-screenshare {
    position: relative;
    height: 100px;
    width: 100px !important;
    padding: 10px;
    text-align: center;
}

.row-height-conference {
    max-height: 1000px !important;
}

.row-height-screenshare {
    max-height: 1200px !important;
}

.video-width {
    width: auto !important;
    /*max-width: 300px !important;*/
}

.video-wrapper-text {
    /*background-color: #1B9AC5;*/
    color: white;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    width: 125px !important;
    height: auto !important;
    z-index: 10;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 2px !important;
    text-shadow: -1px -1px 0 #1B9AC5, 1px -1px 0 #1B9AC5, -1px 1px 0 #1B9AC5, 1px 1px 0 #1B9AC5;
}

.video-wrapper-textHost {
    color: #20edc7;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    width: 125px !important;
    height: auto !important;
    z-index: 10;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 2px !important;
    text-shadow: -1px -1px 0 #4a4646, 1px -1px 0 #4a4646, -1px 1px 0 #4a4646, 1px 1px 0 #4a4646;
}


.nco {
    padding: 2px 6px;
    position: relative;
    width: 40px !important;
    height: 32px !important;
    z-index: 10;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.nmo {
    padding: 2px 6px;
    position: relative;
    width: 40px !important;
    height: 32px !important;
    z-index: 10;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    border-radius: 7px !important;
}

.desktop-video-large {
    width: 100%;
    height: 100%;
    /* max-width: 1820px !important;
    max-height: 900px !important;*/
    object-fit: fill;
    z-index: 5;
    border-radius: 7px !important;
}

.speaker-video-large {
    width: 100%;
    height: 100%;
    max-width: 1000px !important;
    max-height: 1000px !important;
    object-fit: cover;
    z-index: 5;
    border-radius: 7px !important;
}

.user-video-screenshare {
    width: 100%;
    height: 100%;
    max-width: 100px !important;
    object-fit: fill;
    z-index: 5;
    border-radius: 7px !important;
}

/* REGION CUSTOM COLORS */

.btn-main-color-01 {
    background-color: #F28103;
    color: white;
}

.btn-main-color-02 {
    background-color: #BB0C25;
}

.btn-main-color-03 {
    background-color: #C90B2C;
}

.btn-main-color-04 {
    background-color: #D00A2F;
}

.has-error {
    color: red !important;
}

.tableFixHead {
    overflow: auto;
    height: 500px;
}

    .tableFixHead th {
        position: sticky;
        top: 0;
    }

.btn-round-right {
    border-bottom-right-radius: 999px !important;
    border-top-right-radius: 999px !important;
}

.btn-round-left {
    border-bottom-left-radius: 999px !important;
    border-top-left-radius: 999px !important;
}

.btn-table-rect {
    width: 25px !important;
    height: 25px !important;
    padding: 3px !important
}

.fakeButton {
    padding: 7px 12px !important;
    background-color: #1B9AC5;
    color: white !important;
    display: normal !important;
    margin-bottom: 0px !important;
    font-weight: 400 !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    vertical-align: middle !important;
}

.has-error {
    border-color: red !important;
}

.lab-error {
    color: red !important;
    vertical-align: central;
}

.border-gradient {
    border-bottom-style: solid;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: 2px !important;
    border-image-slice: 1;
}

.mar-bot {
    margin-bottom: 5px !important;
}

.mar-top {
    margin-top: 5px !important;
}

.mar-side {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.mar-all {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.mar-side-zero {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.border-gradient-blue {
    border-image-source: linear-gradient(to right, #177FC3, #8DC1FC) !important;
}

.border-gradient-alt {
    border-image-source: linear-gradient(to right, #DBEAFA, dimgrey, #DBEAFA) !important;
}

.border-rounded-blue {
    border-radius: 999px !important;
    background-color: white;
    border: 1px solid #177FC3;
    padding: 5px !important;
}

.button-link {
    font-family: Arial;
    font-weight: 400;
    font-style: normal;
}

.container-access {
    z-index: 1000;
    position: fixed;
    bottom: 3vh;
    right: 2vw;
}

.row-access {
    background-color: white !important;
    border-radius: 999px !important;
    padding: 0px !important;
}

.icon-access {
    width: 40px;
    height: 40px;
    background-color: white !important;
    border-radius: 999px !important;
}

.btn-access {
    margin: 5px !important;
    border-radius: 999px !important;
    padding: 5px !important;
    background-color: white !important;
}

.padding-vert {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.ua-fade {
    transition: all linear 0.3s;
    opacity: 1;
}

    .ua-fade.ng-hide {
        opacity: 0;
    }

.ng-hide {
    opacity: 0;
    transition: none 0;
}


.bgr-svg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1600.00 500.69" xml:space="default"><linearGradient id="SVGID_Fill1_" gradientUnits="objectBoundingBox" x1="0" y1="0.104292" x2="1" y2="0.104292"><stop offset="0" stop-color="%23177FC3" stop-opacity="1" /><stop offset="1" stop-color="%238DC1FC" stop-opacity="1" /></linearGradient><path fill="url(%23SVGID_Fill1_)" stroke-width="2" stroke-linejoin="round" d="M 1600,477.155C 1508.2,464.068 1416.4,450.981 1211.17,458.77C 1005.94,466.56 687.271,495.227 466.503,499.985C 245.736,504.743 122.868,485.592 0,466.441L 0,14.4406C 122.868,32.1073 245.736,49.774 466.503,44.274C 687.271,38.774 1005.94,10.1073 1211.17,2.31754C 1416.4,-5.47226 1508.2,7.61487 1600,20.702L 1600,477.155 Z "/></svg>');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}


.text-area-fix {
    resize: none;
    overflow-x: auto;
    white-space: nowrap;
}

.line-height-00 {
    height: 50px !important;
    line-height: 55px !important;
}

.lab-main-00 {
    font-size: 26px !important;
    color: #222222;
}

.lab-main-head {
    font-size: 30px !important;
    color: #222222;
}

.lab-main-subhead {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #222222;
}

.lab-main-funding {
    font-size: 14px !important;
    font-weight: 400;
    color: #177FC3;
}

.nav-container {
    display: inline-block;
    cursor: grab !important;
}

    .nav-container .circleContainer {
        background: gray !important;
    }

    .nav-container:hover .circleContainer {
        background: blue !important;
    }


.circleContainer {
    display: inline-block;
    background: gray;
    border-radius: 999px !important;
    width: 20px !important;
    height: 20px !important;
    cursor: grab !important;
}

    .circleContainer > a {
        display: table-cell;
        font-size: 13px !important;
        color: white;
        width: 20px !important;
        text-align: center !important;
        vertical-align: central;
        cursor: grab !important;
    }

        .circleContainer > a > label {
            margin-top: 2px !important;
            cursor: grab !important;
        }

/*.circleContainer:hover {  
    background: blue;  
}*/

.shortcut-label {
    height: 20px !important;
    margin-bottom: 10px !important;
    text-align: left;
    vertical-align: middle;
    font-weight: 400 !important;
    color: black !important;
    cursor: grab !important;
}

.row-card {
    background-color: white !important;
    border-radius: 5px !important;
    padding: 10px !important;
}



.pro-input {
    height: 30px;
    display: block;
    margin-bottom: 10px !important;
}

.main-buttons {
    border-left: 1px solid #B9C2C9;
    height: 50px !important;
    display: inline-block !important;
}

.main-icons {
    font-size: 30px !important;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.header-gradient {
    background-image: linear-gradient(to right, #0974A0, #1B9AC5) !important;
}

.header-gradient-red {
    background-image: linear-gradient(to right, #CE2C2C, #C69090) !important;
}


.mar-zero {
    margin: 0px !important;
}

.pad-zero {
    padding: 0px !important;
}

.autoFitInput {
    width: 100% !important;
}

.width-13 {
    width: 13% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.width-22 {
    width: 22% !important;
}

.dragover {
    border: 2px dashed black;
    background-color: gainsboro;
}

md-input-container {
    width: 100% !important;
    margin: 4px 0 !important;
}

.ui-datepicker {
    z-index: 9999 !important;
}

.modal-xlg {
    width: 85% !important;
}

.home {
    background-color: white;
    width: 200px;
    display: inline-block;
    margin: 30px;
}
/* SPINNER EXTENSION */
.bvb-progress {
    display: none;
    max-width: 300px;
    margin: auto;
    margin-top: 50px;
    z-index: 20 !important;
}

.bvb-progress-active {
    display: block;
    position: absolute;
    width: 300px;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 20 !important;
}

.treasure-overlay-spinner-container {
    z-index: 10 !important;
}

/*WEBSHOP_FAST images EQUAL*/
.img-home {
    max-height: 100px;
}

@media (min-width: 768px) {
    .row.equal {
        display: flex;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        flex-wrap: wrap;
    }
}