/* ------------------------------------------------ */
/* VARIABLES */
/* ------------------------------------------------ */
:root {
    /* free version*/
    --watermark: none;

    /* base */
    --box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
    --background-color: #19293a;
    --text-color: #ffffff;

    /* button */
    --button-border-radius: 5px;
    --button-tooltip-border-radius: 5px;
    --button-edge-length: 22px;
    --button-margin-right: 5px;
    --button-background-color: #051721;
    --button-foreground-color: #ffffff;
    --button-disabled-background-color: #bf3c47;
    --button-level-up-down-background-color: #293b4e;
    --button-text-touch-device: #ffffff;

    /* tiles pinned/unpinned */
    --tiles-pinned-wrapper-width: 0;
    --tiles-unpinned-wrapper-width: 100%;
    --tiles-pinned-height: calc(100% - var(--tile-padding) * 2);
    --tiles-pinned-area-background-color: var(--tile-background-color);
    --tiles-pinned-area-text-color: var(--text-color);
    --tiles-pinned-area-padding: 25px;
    --tiles-pinned-area-border-radius: var(--tile-border-radius);

    /* tile */
    --tiles-pinned-border-radius: 5px;
    --tile-width: 250px;
    --tile-height: 178px;
    --tile-border-radius: 5px;
    --tile-username-border-radius: 5px;
    --tile-background-color: #051721;
    --tile-control-panel-background-color: var(--tile-background-color);
    --tile-padding: 12px;
    
    --tile-mirroring-user: initial;
}

/* ------------------------------------------------ */
/* BASE */
/* ------------------------------------------------ */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('./styles/open-sans/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Light'), local('OpenSans-Light'),
        url('./open-sans/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./open-sans/open-sans-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
        url('./open-sans/open-sans-v18-latin-300.woff') format('woff'), /* Modern Browsers */
        url('./open-sans/open-sans-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('./open-sans/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    background: var(--background-color);
}

::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

/* ------------------------------------------------ */
/* INTRO */
/* ------------------------------------------------ */
.intro-wrapper {
    z-index: 9999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: : 100vw;
    height: 100vh;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    overflow: hidden;
}

.intro-wrapper.hide {
    display: none;
}

.intro {
    width: 70%;
    max-width: 230px;
    text-align: center;
    display: block;
}

.intro .headline {
    font-size: 18px;
    margin: 0;
    padding: 0;
    display: block;
}

.intro .room-id,
.intro .room-id:focus,
.intro .room-id:active,
.intro .username:focus,
.intro .username:active,
.intro .username {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 0;
    outline: 0;
    background: var(--background-color);
    color: var(--text-color);
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--button-background-color);
    border-radius: var(--button-border-radius);
    padding: 10px 15px;
    width: 180px;
}

.intro .room-name-wrapper,
.intro .room-id-wrapper,
.intro .username-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
}

.intro .room-name-wrapper {
    margin-top: -20px;
}

.intro .room-name-wrapper.hide,
.intro .room-id-wrapper.hide,
.intro .username-wrapper.hide {
    display: none;
}

.intro .room-id-generate {
    user-select: none;
    font-size: 12px;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    background: var(--button-background-color);
    border-radius: var(--button-border-radius);
    padding: 5px 7px 5px 7px;
    opacity: 0.6;
    color: var(--button-foreground-color);
}

.intro .room-id-generate:hover {
    cursor: pointer;
    opacity: 1;
}

.intro .room-id-generate .icon {
    margin-left: 3px;
    font-size: 12px;
}

.intro .button {
    margin-top: 20px;
    margin-bottom: 20px;
    width: initial;
    min-width: 180px;
    border-radius: var(--button-border-radius);
}

.intro .button:hover {
    opacity: 0.8;
}

/* ------------------------------------------------ */
/* HELP */
/* ------------------------------------------------ */
.help-wrapper {
    z-index: 9999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: : 100vw;
    height: 100vh;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    overflow: hidden;
    overflow-y: auto;
}

.help-wrapper.hide {
    display: none;
}

.help {
    width: 70%;
    max-width: 400px;
    text-align: center;
    display: block;
    font-size: 13px;
}

.help .headline {
    font-size: 16px;
    margin: 4px;
    padding: 0;
    display: block;
    text-align: center;
    width: 100%;
}

.help .hide {
    display: none;
}

.help-item {
    border: 1px solid var(--button-background-color);
    border-radius: var(--button-border-radius);
    padding: 7px;
    margin-top: 15px;
    opacity: 1;
}

.help-item:hover {
    opacity: 0.8;
    cursor: pointer;
}

.help .button {
    width: 100%;
    max-width: 140px;
    margin-top: 20px;
    font-size: 16px;
}

.help .button:hover {
    opacity: 0.8;
}

.intro .help-open {
    user-select: none;
    font-size: 12px;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    background: var(--button-background-color);
    border-radius: var(--button-border-radius);
    padding: 5px 7px 5px 7px;
    opacity: 0.6;
    color: var(--button-foreground-color);
}

.intro .help-open:hover {
    cursor: pointer;
    opacity: 1;
}

.intro .help-open .icon {
    margin-left: 3px;
    font-size: 12px;
}

/* ------------------------------------------------ */
/* TILES */
/* ------------------------------------------------ */
.tiles-wrapper {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.tiles {
    display: block;
    text-align: center;
    overflow: auto;
}

.tiles.pinned {
    position: relative;
    width: var(--tiles-pinned-wrapper-width);
    height: 100vh;
    float: left;
    box-shadow: inset 0 0 4px var(--tile-background-color);
    background: rgba(255,255,255,0.01);
}

.tiles.unpinned {
    width: var(--tiles-unpinned-wrapper-width);
    height: 100vh;
}

.tiles.pinned.dad-active {
    transition: width 0.3s ease-in-out;
    /*background: rgba(255,255,255,0.0);*/
}

.tiles.pinned.dad-active:after {
    content: 'Kachel hier ablegen & anpinnen';
    text-align: center;
    color: var(--tiles-pinned-area-text-color);
    position: absolute;
    top: 45%;
    right: var(--tile-padding);
    left: var(--tile-padding);
    z-index: -1;
    opacity: 0.8;
}

.tiles.pinned .tile {
    width: calc(100% - var(--tile-padding) * 2 - 17px);
    height: var(--tiles-pinned-height);
}

.tiles.pinned .tile video {
    object-fit: contain;
}

.tiles-pinned-drag-handler.active:after {
    position: fixed;
    background: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    content: ' ';
}

.tiles-pinned-drag-handler {
    cursor: pointer;
    width: 17px;
    height: 50px;
    background: var(--button-background-color);
    color: var(--button-foreground-color);
    position: absolute;
    top: calc(50% - 25px);
    right: 0;
    border-top-left-radius: var(--button-border-radius);
    border-bottom-left-radius: var(--button-border-radius);
    box-shadow: var(--box-shadow);
    letter-spacing: -4px;
    line-height: 49px;
    text-align: center;
    padding-right: 3px;
}

.tile {
    outline: 0;
    border-radius: var(--tile-border-radius);
    position: relative;
    float: left;
    background: var(--tile-background-color);
    width: var(--tile-width);
    height: var(--tile-height);
    box-shadow: var(--box-shadow);
    text-align: center;
    background-position: 50% 50%;
    background-image: url(../images/icons/user.svg);
    background-size: 25% 25%;
    background-repeat: no-repeat;
    margin: var(--tile-padding) 0 0 var(--tile-padding);
}

.tile.cam:before {
    display: var(--watermark);
    width: calc(var(--button-edge-length) + 13px);
    height: calc(var(--button-edge-length) + 13px);
    position: absolute;
    right: 7px;
    bottom: 7px;
    content: ' ';
    background-image: url(../images/logo.svg);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.4;
}

.tile.hide {
    display: none;
}

.tile.mywin-sharing,
.tile.screen-sharing {
    background-image: url(../images/icons/loader.svg);
}

.tile.mywin-iframe {
    background-image: none;
}

.tile.mywin-sharing .username,
.tile.mywin-iframe .username {
    display: none;
}

.tile.mic-off:after,
.tile.cam-off:after,
.tile.cam-and-mic-off:after {
    font-family: "feather";
    content: "\e8eb";
    color: #cc2d43;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    background-repeat: no-repeat;
}

.tile.mic-off:after {
    content: "\e893";
}

.tile.cam-and-mic-off:after {
    content: "\e893  \e8eb";
}

.tile .username .icon {
    display: none;
}

.tile.active-speaker .username .icon {
    background: #25903b;
    display: inline-flex;
    border-radius: var(--tile-username-border-radius);
    color: #ffffff;
    font-size: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 5px;
    margin-right: 5px;
    margin-left: -2px;
    position: absolute;
    top: -2px;
    left: 2px;
    bottom: 0;
    transition: opacity .2s ease-in-out;
}

.tile.active-speaker .username .icon:hover {
    opacity: 1 !important;
}

.tile.active-speaker .username .icon:after {
    display: none;
    font-family: 'Open Sans', sans-serif;
    content: 'Aktiv...';
    font-size: 13px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 23px;
    background: #25903b;
    border-radius: var(--tile-username-border-radius);
    width: 100vw;
    max-width: 44px;
    padding-top: 2px;
    padding-left: 7px;
    text-align: left;
}

.tile.active-speaker .username .icon:hover:after {
    display: block;
}

.tile.is-maximized,
.tiles.pinned .tile.is-maximized {
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px) !important;
    height: calc(100% - 19px) !important;
    z-index: 9999;
    margin: 0;
}

.tile .username {
    overflow: hidden;
    position: absolute;
    top: 7px;
    max-width: calc(76% - 24px);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    display: inline-block;
    padding: 2px 5px;
    border-radius: var(--tile-username-border-radius);
    left: 7px;
    outline: 0;
}

.tile.active-speaker .username {
    padding-left: 32px;
}

.tile .video-js,
.tile video,
.tile iframe {
    outline: 0;
    border-radius: var(--tile-border-radius);
    width: 100%; 
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.tile iframe {
    overflow: auto;
}

.tile.myself video {
    transform: var(--tile-mirroring-user);
}

.tile.mywin-sharing video,
.tile.mywin-sharing .video-js,
.tile.mywin-iframe iframe,
.tile.screen-sharing video {
    object-fit: fill;
}

.tile-control-panel {
    border-bottom-left-radius: var(--tile-border-radius);
    border-bottom-right-radius: var(--tile-border-radius);
    justify-content: flex-end; 
    align-items: bottom;
    height: calc(var(--button-edge-length) + 30px);
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    display: none;
    padding: 3px 0;
}

.tile:focus .tile-control-panel,
.tile:hover .tile-control-panel {
    display: flex;
}

.tile-control-panel .button {
    box-shadow: none;
    width: var(--button-edge-length);
    height: var(--button-edge-length);
}

.tile-control-panel .button.close-screen-sharing {
    /*display: none;*/
}

.tile.mywin-sharing .tile-control-panel .button.close-screen-sharing {
    display: block;
    margin-left: var(--button-margin-right);
    margin-right: 0;
}

.tile.is-maximized .tile-control-panel {
    display: flex;
    top: initial;
    height: calc(var(--button-edge-length) + 30px);
}

.tile.is-maximized .video-js,
.tile.is-maximized video,
.tile.is-maximized iframe {
    height: 100%;
    margin-bottom: 0;
    border-radius: var(--tile-border-radius);
}

.tile.is-maximized .item {
    display: none !important;
}

.tile.is-maximized .item.maximize {
    display: block !important;
}

/* ------------------------------------------------ */
/* DRAGABLE */
/* ------------------------------------------------ */
.dad-placeholder {
    border: 1px dashed var(--tile-background-color);
    border-radius: var(--tile-border-radius);
}

.tile.dad-clone {
    background-image: url(../images/icons/move.svg);
    opacity: 0.9;
    cursor: move;
    width: var(--tiles-pinned-wrapper-width);
}

/* ------------------------------------------------ */
/* BUTTONS */
/* ------------------------------------------------ */
.button {
    position: relative;
    box-shadow: var(--box-shadow);
    display: inline-block;
    width: var(--button-edge-length);
    height: var(--button-edge-length);
    background: var(--button-background-color);
    color: var(--button-foreground-color);
    padding: 15px;
    margin-right: var(--button-margin-right);
    border-radius: var(--button-border-radius);
    text-align: center;
}

.button:hover {
    cursor: pointer;
}

.button.disabled {
    background: var(--button-disabled-background-color);
}

/*.button.blocked {
    opacity: 0.5;
}*/

.button.tiles-level-auto {
    margin-left: 30px;
}

.button.tiles-level-auto,
.button.tiles-level-up,
.button.tiles-level-down {
    background: var(--button-level-up-down-background-color);
}

/* ------------------------------------------------ */
/* ICONS */
/* ------------------------------------------------ */
.icon > i {
    display: block;
    filter: var(--button-foreground-color);
    width: 100%;
    height: 100%;
}

.icon {
    color: var(--button-foreground-color);
    font-size: 22px;
}

.control-panel .button .icon-mic {
    display: block;
}

.control-panel .button.disabled .icon-mic {
    display: none;
}

.control-panel .button .icon-mic-off {
    display: none;
}

.control-panel .button.disabled > .icon-mic-off {
    display: block;
}

.button .icon-video {
    display: block;
}

.button.disabled .icon-video {
    display: none;
}

.button .icon-video-off {
    display: none;
}

.button.disabled > .icon-video-off {
    display: block;
}

/* ------------------------------------------------ */
/* CONTROL PANEL */
/* ------------------------------------------------ */
.control-panel {
    padding: 0;
    margin: 0;
    position: fixed;
    display: none;
    z-index: 998;
    bottom: 10px;
    right: 0;
    width: var(--tiles-unpinned-wrapper-width);
    min-width: 450px;
    display: none; 
    justify-content: center; 
    align-items: center;
}

.control-panel .button {
    float: left;
}

html:hover .control-panel {
    display: flex;
}

.control-panel.top-right {
    top: 15px;
    right: 15px;
}

/* ------------------------------------------------ */
/* TOOLTIP */
/* ------------------------------------------------ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:after {
    border-radius: var(--button-tooltip-border-radius);
    box-shadow: var(--box-shadow);
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    background: var(--button-background-color);
    color: var(--button-foreground-color);
    white-space: nowrap;
    display: none;
    transition: all 0.4s ease;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
}

[data-tooltip]:before {
    content: "";
    position: absolute;
    transition : all 0.4s ease;
    opacity: 0;
    bottom: 90%;
}

[data-tooltip]:hover:after {
    bottom: calc(100% + var(--button-margin-right));
}

[data-tooltip]:hover:before {
    bottom: 100%;
}

[data-tooltip]:hover:after {
    display: block;
}

/* ------------------------------------------------ */
/* DROPUP MENU */
/* ------------------------------------------------ */
.dropup-menu {
    display: none;
    position: absolute;
    bottom: calc(var(--button-edge-length) + 30px);
    min-width: 180px;
    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    height: auto;
    z-index: 1;
    color: var(--button-foreground-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.4s ease;
    padding-bottom: var(--button-margin-right);
    right: 0;
}

.control-panel .dropup-menu {
    left: 50%;
    transform: translateX(-50%);
}

.dropup-menu .dropup-menu-inner .item {
    border-radius: var(--button-border-radius);
    box-shadow: var(--box-shadow);
    background: var(--button-background-color);
    border-bottom:  1px solid var(--background-color);
    padding: 8px 8px;
    display: block;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.dropup-menu .item .icon {
    display: inline-block !important;
    font-size: 15px;
    margin-right: 3px;
}

.dropup-menu .item:hover {
    opacity: 0.95;
    cursor: pointer;
}

.dropup-menu .item:last-child {
    border: 0;
}

.dropup-menu .item.hide {
    display: none;
}

.dropup-menu .item .next-sources {
    font-size: 12px;
    opacity: 0.7;
    list-style: none;
    margin-left: 22px;
}

.dropup-menu .item .next-sources li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    text-align: left;
}

.dropup-menu .item .next-sources li.active {
    text-decoration: underline;
}

/* ------------------------------------------------ */
/* DROPUP MENU MIC, CAM, SHARING, SETTINGS, ... */
/* ------------------------------------------------ */
.button.mic:hover .dropup-menu,
.button.cam:hover .dropup-menu,
.button.sharing:hover .dropup-menu,
.button.close:hover .dropup-menu,
.button.more:hover .dropup-menu,
.button.tiles-level-auto:hover .dropup-menu {
    display: block;
}

/* ------------------------------------------------ */
/* RESPONSIVE */
/* ------------------------------------------------ */
/* DESKTOPS */
@media (min-width: 1281px) {
}

/* LAPTOPS, DESKTOPS */
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* TABLETS (PORTRAIT) */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* TABLETS (LANDSCAPE) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* TABLETS, MOBILES (LANDSCAPE AND LOW RESOLUTION) */
@media (min-width: 481px) and (max-width: 767px) {

    .control-panel {
        min-width: auto;
        transform: scale(0.85);
    }
    
    .control-panel .button {
        margin-right: calc(var(--button-margin-right) + 2px);
    }
}

/* SMARTPHONES (PORTRAIT) */
@media (min-width: 320px) and (max-width: 480px) {

    .control-panel {
        min-width: auto;
        transform: scale(0.85);
    }
    
    .control-panel .button {
        margin-right: calc(var(--button-margin-right) + 2px);
    }
}

/* ------------------------------------------------ */
/* TOUCH DEVICE */
/* ------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {

    .control-panel {
        display: flex;
    }

    [data-tooltip]:hover:after {
        opacity: 0;
        outline: 0;
    }
}