/*
*   styles.css
*   Piano @ Home online piano lessons platform.
*   Copyright (c) 2020, C.J Cummins & M Cummins - All rights reserved.
*   Copying of any part of the code/script in this file without the
*   written permission of the copyright owners is illegal and
*   prohibited by international law.
*   Copyright owners are Colin & Mandy Cummins, VICTORIA, AUSTRALIA
*   Contact: admin@pianoathome.com.au
*/

:root {
    --margin: 5px;
    --padding: 5px;
    --main-border: 5px;
    --thumbnail-border: 0;
    --panel-height: 0;
    --base-font-size: 18px;
    --show-clock: block;
    --transition-time: 0;
    --thumbnail-size: 140px;
    --settings-size: 20px;
    --role-image-size: 60px;
    --button-size: 80px;
}

/* Small screen portrait */
@media only screen and (max-width: 600px) {
    :root {
        --panel-height: 0;
        --base-font-size: 14px;
        --show-clock: none;
        --thumbnail-border: 1px;
        --thumbnail-size: 100px;
        --settings-size: 16px;
        --role-image-size: 40px;
        --button-size: 60px;
    }
}

:root {
    --title-font-size: calc(var(--base-font-size) * 1.6);
    --clock-font-size: calc(var(--base-font-size) * 0.6);
    --button-font-size: calc(var(--base-font-size) * 0.8);
    --dark: mediumpurple;
    --medium: mediumpurple;
    --light: lavender;
    background-color: white;
}

mo-clock {
    font-size: var(--clock-font-size);
    display: var(--show-clock);
    text-align: center;
    font-weight: normal;
    color: lavender;
    padding: 0;
    margin: 0;
}

button {
    border: 0px;
    padding: 0;
    font-size: var(--button-font-size);
    font-weight: bold;
}

button:focus {
    outline: none;
}

button:active {
    opacity: 0.5;
}

.settings-button {
    position: absolute;
    width: var(--button-size);
    height: var(--button-size);
    top: var(--margin);
    right: var(--margin);
    color: black;
    z-index: 99;
    display: none;
    border-radius: var(--button-size);
    border: 3px solid mediumpurple;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%200%201%200%202.83%202%202%200%200%201-2.83%200l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-2%202%202%202%200%200%201-2-2v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%200%201-2.83%200%202%202%200%200%201%200-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201-2-2%202%202%200%200%201%202-2h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%200%201%200-2.83%202%202%200%200%201%202.83%200l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%202-2%202%202%200%200%201%202%202v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%200%201%202.83%200%202%202%200%200%201%200%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%202%202%202%202%200%200%201-2%202h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-color: white;
}

.make-primary-button {
    position: absolute;
    top: var(--margin);
    right: var(--margin);
    color: white;
    font-size: calc(var(--base-font-size) * 1.15);
    z-index: 99;
    display: none;
    border: 3px solid white;
    border-radius: 12px;
    background-color: mediumpurple;
    padding: calc(var(--padding) * 3) calc(var(--padding) * 3);
    cursor: pointer;
}

video.rotate0 {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

video.rotate90 {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

video.rotate180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

video.rotate270 {
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

/*
*   NOTE: Media
*/

.close {
    background-image: url(../img/close.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: red;
    border: 1px solid black;
}

.refresh {
    background-image: url(../img/refresh.png);
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
    background-color: yellow;
    border: 1px solid black;
}

.rotate {
    background-image: url(../img/rotate.png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    background-color: white;
    border: 1px solid black;
}

.teacher-primary-button {
    background-image: url(../img/teacher-primary.png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border: 1px solid black;
}

.teacher-secondary-button {
    background-image: url(../img/teacher-secondary.png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border: 1px solid black;
}

div.title-text {
    position: absolute;
    top: 0;
    left: 45px;
    display: flex;
    width: auto;
    height: 95%;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3em;
}

.role-teacher-primary {
    content: url(../img/teacher-primary.png);
}

.role-teacher-secondary {
    content: url(../img/teacher-secondary.png);
}

.role-student-primary {
    content: url(../img/student-primary.png);
}

.role-student-secondary {
    content: url(../img/student-secondary.png);
}

.role-icon {
    position: absolute;
    bottom: 3px;
    left: 3px;
    height: 34px;
    width: auto;
    z-index: 3;
    background-color: transparent;
}

.role-icon-local {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 50px;
    opacity: 1.0;
    width: auto;
    z-index: 3;
}

.date-time {
    position: absolute;
    top: 1px;
    right: 45px;
    height: auto;
    width: auto;
    font-weight: normal;
    font-size: 1.3em;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    object-fit: cover;
    overflow: hidden;
    box-sizing: border-box;
}

div.thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    background-color: transparent;
    border: var(--thumbnail-border) solid mediumpurple;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    z-index: 3;
}

div.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    z-index: 2;
}

/*
*   Connection status grid
*/

.connection-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    border-top: 3px solid mediumpurple;
    z-index: 90;
}

.connection-grid.visible {
    display: grid;
}

.connection-grid-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.connection-grid-title {
    flex: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--padding);
    font-size: var(--title-font-size);
    font-weight: bold;
    color: black;
    border: 1px solid black;
    padding: var(--padding);
}

.connection-grid-column.teacher .connection-grid-title {
    background-color: white;
}

.connection-grid-column.student .connection-grid-title {
    background-color: white;
}

.connection-grid-title-text {
    grid-column: 1;
    justify-self: start;
    text-align: left;
}

.connection-grid-swap {
    grid-column: 3;
    justify-self: end;
    width: 100%;
    max-width: 6.4em;
    font-size: calc(var(--title-font-size) * 0.6);
    line-height: 1.1;
    text-align: center;
    color: black;
    border: 2px solid black;
    border-radius: 8px;
    background-color: white;
    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 2);
    cursor: pointer;
}

.connection-grid-swap:disabled {
    opacity: 0.3;
    cursor: default;
}

.connection-grid-end {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
    font-size: var(--title-font-size);
    color: white;
    border: 2px solid black;
    border-radius: 8px;
    background-color: red;
    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 2);
    cursor: pointer;
}

.connection-cell {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--padding);
    padding: var(--padding);
    border: 1px solid black;
    overflow: hidden;
    box-sizing: border-box;
    background-color: white;
}

.connection-cell.connected {
    background-color: lightgreen;
}

.connection-cell.error {
    background-color: lightpink;
}

.connection-cell-role,
.connection-cell-media {
    flex: none;
}

.connection-cell-role {
    width: var(--role-image-size);
    height: var(--role-image-size);
    border: 1px solid black;
    border-radius: 6px;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    background-color: white;
    z-index: 2;
}

.connection-cell-role-row {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--padding);
    min-width: 0;
}

.connection-cell-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.connection-cell-description-title {
    font-size: calc(var(--button-font-size) * 1.98);
    font-weight: bold;
    color: black;
}

.connection-cell-description-subtitle {
    font-size: var(--button-font-size);
    font-weight: normal;
    color: black;
}

.connection-grid-column.student .connection-cell-role {
    background-color: aqua;
}

.connection-cell-text {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--padding);
    z-index: 2;
}

.connection-cell-state {
    font-size: calc(var(--base-font-size) * 1.3);
    color: black;
}

.connection-cell-error {
    font-size: calc(var(--base-font-size) * 1.5);
    color: black;
    /* Reserve room for the rotate/refresh/close buttons overhanging the
       media square, so the text stays clear of them. */
    margin-right: calc(var(--command-size, var(--role-image-size)) + var(--padding) * 2);
    overflow-wrap: break-word;
}

.connection-cell-device {
    margin-top: auto;
    font-size: calc(var(--base-font-size) * 0.8);
    color: gray;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-cell-media {
    position: relative;
    flex: none;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.connection-cell-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid black;
    border-radius: 6px;
    background-color: black;
    box-sizing: border-box;
}

.connection-cell-video-wrap.no-video {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22gray%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2016v1a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2h2m5.66%200H14a2%202%200%200%201%202%202v3.34l1%201L23%207v10%22/%3E%3Cline%20x1=%221%22%20y1=%221%22%20x2=%2223%22%20y2=%2223%22/%3E%3C/svg%3E");
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
}

.connection-cell-video-wrap.no-video .connection-cell-video {
    display: none;
}

.connection-cell-video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.connection-cell-rotate,
.connection-cell-refresh,
.connection-cell-close {
    position: absolute;
    left: 0;
    transform: translateX(calc(-100% - var(--padding)));
    width: var(--command-size, var(--role-image-size));
    height: var(--command-size, var(--role-image-size));
    border-radius: 6px;
    z-index: 3;
}

.connection-cell-rotate {
    top: 0;
}

.connection-cell-refresh {
    top: calc(var(--command-size, var(--role-image-size)) + var(--padding));
}

.connection-cell-close {
    top: calc((var(--command-size, var(--role-image-size)) + var(--padding)) * 2);
}

img.settings {
    position: absolute;
    top: 0;
    right: 0;
    margin: 2px;
    width: var(--settings-size);
    height: var(--settings-size);
    background-color: transparent;
    object-fit: fill;
    z-index: 9;
}

/* end */

/*
*   website.css (merged from publicsdk/css/website.css)
*/

:root {
    --padding: 5px;
    --border-width: 3px;
    --title-height: 50px;
    --nav-height: 50px;
}

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: lavender;
    border: var(--border-width) solid mediumpurple;
    box-sizing: border-box;
}

.website-flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.website-flex-row {
    display: flex;
    flex-direction: row;
    height: calc(var(--title-height) - var(--border-width) * 2);
    align-items: center;
}

.website-title-panel {
    position: relative;
    flex: 0;
    max-height: var(--title-height);
    background-color: mediumpurple;
    padding-bottom: var(--border-width);
}

.website-nav-title-panel {
    flex: 0;
    background-color: lavender;
    color: mediumpurple;
}

.website-nav-title-text {
    padding: 3px 2px 0 var(--padding);
}

.website-nav-subtitle-text {
    font-size: 0.6em;
}

.website-nav-panel {
    flex: 0;
}

.website-main-panel {
    position: relative;
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.website-copyright-panel {
    flex: 0;
}

.website-title {
    flex: 4;
    font-size: 20px;
    color: white;
    text-align: left;
    vertical-align: middle;
    padding: var(--padding);
}

.website-toolbar-item {
    flex: 1;
    margin: 0;
    vertical-align: middle;
    margin-left: 3px;
}

.website-copyright {
    width: 100%;
    font-size: 14px;
    color: white;
    text-align: center;
    padding-top:calc( var(--border-width) *2);
    background-color: mediumpurple;
}

.website-nav-button {
    position: absolute;
    top: var(--border-width);
    right: var(--border-width);
    width: 50px;
    height: 50px;
    border: 1px solid white;
    background-color: mediumpurple;
    color: white;
    border-radius: 5px;
}

.website-menu {
    display: row;
    flex-direction: column;
    height: 100%;
}

.website-menu-item {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: mediumpurple;
    color:white;
    margin: 2px;
    margin-right: 0;
    margin-bottom: 0;
    vertical-align: middle;
}

.website-menu-goback {
    display: inline-block;
    min-width: 60px;
    height: 50px;
    background-color: lightgray;
    color:black;
    border: 1px solid mediumpurple;
    margin: 2px;
    margin-right: 0;
    margin-bottom: 0;
    vertical-align: middle;
}

.website-page {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.connection-grid-start {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
    font-size: var(--title-font-size);
    color: white;
    border: 2px solid black;
    border-radius: 8px;
    background-color: green;
    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 2);
    cursor: pointer;
}

.waiting-indicator {
    position: absolute;
    top: calc(var(--margin) * 2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: 94%;
    box-sizing: border-box;
    text-align: center;
    color: white;
    background-color: mediumpurple;
    border: 2px solid white;
    border-radius: 16px;
    padding: calc(var(--padding) * 2) calc(var(--padding) * 4);
    cursor: move;
    user-select: none;
    touch-action: none;
}

.waiting-indicator h3 {
    font-size: calc(var(--base-font-size) * 1.2);
    margin: 0 0 calc(var(--padding) * 2) 0;
    color: white;
}

.waiting-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6);
}

.waiting-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: 94%;
    box-sizing: border-box;
    text-align: center;
    color: black;
    background-color: white;
    border: 4px solid mediumpurple;
    border-radius: 28px;
    padding: calc(var(--padding) * 6) calc(var(--padding) * 6);
}

.waiting-box h2 {
    font-size: calc(var(--title-font-size) * 1.5);
    margin-top: 0;
    margin-bottom: calc(var(--padding) * 4);
}

.waiting-box p {
    font-size: calc(var(--button-font-size) * 1.7);
    margin-bottom: calc(var(--padding) * 2);
}

.waiting-devices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(var(--padding) * 4);
    margin-top: calc(var(--padding) * 2);
}

.waiting-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--padding) * 1);
}

.waiting-device-icon {
    height: var(--role-image-size);
    width: var(--role-image-size);
    background-color: transparent;
}

.waiting-device-id {
    font-size: calc(var(--base-font-size) * 0.8);
    word-break: break-all;
}

.pending-join-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6);
}

.pending-join-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: 92%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: calc(var(--padding) * 2);
    text-align: center;
    color: black;
    background-color: white;
    border: 2px solid mediumpurple;
    border-radius: 20px;
    padding: calc(var(--padding) * 2) calc(var(--padding) * 4) calc(var(--padding) * 3);
}

.pending-join-box h2 {
    font-size: var(--title-font-size);
    margin: var(--padding) 0 0 0;
    color: mediumpurple;
}

.pending-join-box p {
    font-size: var(--button-font-size);
    margin: 0;
}

.pending-join-box .pending-join-question {
    font-size: calc(var(--base-font-size) * 1.15);
    font-weight: bold;
    color: mediumpurple;
}

.pending-join-device {
    font-size: var(--button-font-size);
    color: gray;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-join-box button {
    width: 100%;
    box-sizing: border-box;
    font-size: calc(var(--base-font-size) * 1.15);
    color: white;
    border: 2px solid black;
    border-radius: 12px;
    padding: calc(var(--padding) * 3) calc(var(--padding) * 3);
    cursor: pointer;
}

.pending-join-waiting {
    background-color: mediumpurple;
}

.pending-join-convert {
    background-color: green;
}

.pending-join-ignore {
    background-color: red;
}