:root {
    --rowHeight: 65px;
    --colWidth: 98vw;
    --maxVideoWidth: 320px;
    --maxVideoHeight: 480px;
    --marginTop: 4px;
    --marginSide: 10px;
    --gridTemplateColumns: '';
    --autoFlow: row;
    --logoHeight: 250px;
    --paddingTop: 500px;
    --paddingRoot: 15px;
    --labelBackground: rgba(0, 0, 0, 0.55);

    font: 22px Arial, Sans-Serif;
    color: cadetblue;
    padding: var(--paddingRoot);
}

body {
    background: #e0ffff;

    overflow: hidden; /* Hide scrollbars */
}

#canvas {
    display:none;
}

.maintext {
    width: 500px;

    color: rgba(83, 112, 113, 0.8);
    font: 20px Arial, Sans-Serif;

    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -0%);

}

#peerScreen {
    position: fixed;
    left: 0;
    top: 0;

    min-width: 100%;
    min-height: 100%;
}

#controls {
    display: none;

    width: 600px;
    height: 100px;

    border-radius: 50px;
    background: #b0c4de;
    border-color: cadetblue;
    border-style: dotted;

    outline: none;
    opacity: 0.75;

    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, -109px);
    z-index: 1;
}

#mode {
    display: none;

    overflow: hidden;

    width: 220px;
    height: 100px;
    border-radius: 50px;
    background: lightsteelblue;
    border-color: cadetblue;
    border-style: dotted;

    outline: none;
    opacity: 0.95;

    position: absolute;
    left: 50%;
    top: 5px;
    transform: translate(-50%, -0%);
}

#delay {
    display: none;

    width: 460px;
    height: 100px;
    border-radius: 50px;
    background: lightsteelblue;
    border-color: cadetblue;
    border-style: dotted;

    outline: none;
    opacity: 0.95;

    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translate(-400px, -0%);

    z-index: 1;
}

#balance {
    display: none;

    width: 330px;       /*  330px   */
    height: 100px;
    border-radius: 50px;
    background: #b0c4de;
    border-color: #5f9ea0;
    border-style: dotted;

    outline: none;
    opacity: 0.95;

    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translate(67px, -0%);

    z-index: 1;
}

#effects {
    color: cadetblue;
    font: bold 18px Arial, Sans-Serif;
    line-height: 20px;
    height: 20px;

    position: absolute;
    left: 0%;
    top: 0%;
    transform: translate(-0%, -0%);

    display: none;
}

#places {
    color: cadetblue;
    font: bold 18px Arial, Sans-Serif;
    line-height: 20px;
    height: 20px;

    position: absolute;
    right: 0%;
    top: 0%;
    transform: translate(-0%, -0%);

    display: none;
}

#playAudio {

    display: none;
}

.textbox {
    width: 250px;
    height: 40px;

    color: cadetblue;
    font: bold 30px Arial, Sans-Serif;
    line-height: 32px;

    padding: 10px;
    border-radius: 5px;
    border-color: cadetblue;
    border-style: dotted;
}

.linkbox {
    width: 500px;
    height: 40px;

    color: cadetblue;
    font: bold 30px Arial, Sans-Serif;
    line-height: 32px;

    padding: 10px;
    border-radius: 5px;
    border-color: cadetblue;
    border-style: dotted;
}

.directorlink {
    font-weight: bold;
    color: darkcyan;
}

.videos {

    display: none;
    grid-gap: 5px;
    grid-auto-flow: var(--autoFlow);

    grid-template-columns: var(--gridTemplateColumns);

}

.performers {

    width: var(--maxVideoWidth);
    height: 100%;

    position: absolute;
    left: var(--marginSide);


}

.overflow {

    width: var(--maxVideoWidth);
    height: 100%;

    position: absolute;
    right: var(--marginSide);

}

.settings {

    display: none;

    box-sizing: border-box;
    border: dotted lightsteelblue;
    overflow: hidden;

    width: 250px;
    height: 100%;

    background-color: slategray;

    position: absolute;
    top: 0px;
    right: 0px;

    z-index: 4;
}

#connectivity {

    font: 16px Arial, Sans-Serif;
    color: white;
    line-height: 1.4;

    padding: 0px;

    position: absolute;
    left: 10px;
}

.chat {

    box-sizing: border-box;
    border: dotted lightsteelblue;
    border-radius: 12px;
    overflow: hidden;

    width: 0vw;
    height: 100%;

    background-color: whitesmoke;

    position: absolute;
    right: 0px;
    top: 0px;

    z-index: 0;
}

.chatFeed {
    box-sizing: border-box;

    width: 100%;
    height: 90%;

    border: 15px solid whitesmoke;
    background-color: whitesmoke;

    z-index: 2;
}

.history {

    display: inline-block;

    font: 16px Arial, Sans-Serif;
    color: cadetblue;
    line-height: 1.4;

    padding: 0px;

    position: absolute;
    left: 10px;
    bottom: 110px;

}

.entry {

    box-sizing: border-box;

    width: 100%;
    height: 100px;

    border: 10px solid white;
    background-color: white;

    position: absolute;
    right: 0px;
    bottom: 0px;

    z-index: 2;
}


.links {
    display: block;

    color: rgba(83, 112, 113, 0.8);
    font: 18px Arial, Sans-Serif;

    position: relative;
    top: 5px;
    horiz-align: center;

    z-index: 1;

}

.linkstop {
    display: none;

    color: rgba(83, 112, 113, 0.8);
    font: 18px Arial, Sans-Serif;

    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%, -0%);

    z-index: 1;
}

.linksfooter {
    display: block;

    color: rgba(83, 112, 113, 0.8);
    font: 18px Arial, Sans-Serif;

    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -0%);

    overflow: hidden;
    white-space: nowrap;
}

/* unvisited link */
a:link {
    color: rgba(83, 112, 113, 0.8);
}

/* visited link */
a:visited {
    color: rgba(83, 112, 113, 0.8);
}

/* mouse over link */
a:hover {
    color: cadetblue;
}


#peerScreen {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


.videoContainer {

    position: relative;
    overflow: hidden;

    max-width: var(--maxVideoWidth);
    max-height: var(--maxVideoHeight);

    height: var(--rowHeight);
    width: var(--colWidth);

    background-color: black;
    border-radius: 12px;

    z-index: 2;
}

/*
.videoContainer {
    position: relative;
    margin-top: 24px;
    overflow: hidden;

    max-width: 320px;
    max-height: fit-content;

    background-color: honeydew;
    border-radius: 12px;

}
*/
/*
.videoContainer video {

    position: absolute;

    left: 0;
    top: 0;

    height: auto;
    width: 100%;
}
*/
.videoContainer video {

    position: absolute;

    left: 0;
    top: 0;

    height: auto;
    width: 100%;

}

.videoLabel {
    color: white;
    font: bold 20px Arial, Sans-Serif;
    line-height: 20px;
    height: 20px;
    width: 100%;
    text-align: left;

    background: var(--labelBackground);

    position: absolute;
    left: 0;
    top: 0;

    padding: 8px;

    z-index: 3;
}

.muteLabel {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 18px;
    height: 18px;

    background: rgba(0, 0, 0, 0.55);

    position: absolute;
    bottom: 0;
    right: 0;
}

.muteIcon {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 32px;
    height: 32px;

    background: rgba(255, 255, 255, 0.55);

    position: absolute;
    bottom: 0;
    right: 0;

    z-index: 3;
}
.muteIcon:hover .volumeControl {
    display: block;
 }

.videoIcon {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 32px;
    height: 32px;

    background: rgba(0, 0, 0, 0.55);

    position: absolute;
    top: 32px;
    right: 0;
}

.chatIcon {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 32px;
    height: 32px;

    background: rgba(255, 255, 255, 0.55);

    position: absolute;
    bottom: 0px;

    z-index: 3;
}
.chatIcon:hover {
    background: rgba(255, 255, 255, 0.75);
}

.settingsIcon {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 32px;
    height: 32px;

    background: rgba(255, 255, 255, 0.55);

    position: absolute;
    bottom: 0px;
    left: 32px;

    z-index: 3;
}
.settingsIcon:hover {
    background: rgba(255, 255, 255, 0.75);
}

.screenShareIcon {
    color: white;
    font: bold 18px Arial, Sans-Serif;
    line-height: 32px;
    height: 32px;

    background: rgba(255, 255, 255, 0.55);

    position: absolute;
    bottom: 0px;
    left: 64px;

    z-index: 3;
}
.screenShareIcon:hover {
    background: rgba(255, 255, 255, 0.75);
}

.hideWindowIcon {
    line-height: 28px;
    height: 28px;


    position: absolute;
    top: 0px;
    right: 0px;

    z-index: 0;
}
.hideWindowIcon:hover {
    background: rgba(0, 0, 0, 0.2);
}


.volumeControl {
    display: block;

    width: 90%;

    position: absolute;
    bottom: 6px;
    right: 20px;

    z-index: 3;
}

.volumeSlider {
    -webkit-appearance: none;
    width: 90%;
    height: 15px;
    border-radius: 5px;
    background: honeydew;
    outline: none;
    opacity: 0.35;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.volumeSlider:hover {
    opacity: 1;
}

.volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: cadetblue;
    cursor: pointer;
}

.volumeSlider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: cadetblue;
    cursor: pointer;
}

.timelineSlider {
    width: 260px;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-90px, 50%);
}

.balanceSlider {
    width: 115px;     /*  125px;  */
    position: absolute;
    left: 52%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}

.delaySlider {
    width: 275px;     /*  125px;  */
    position: absolute;
    left: 54%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}

.audioControls {
    display: block;
}

.loadButton {
    height: 65px;

    position: absolute;
    left: 25px;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.audioButton {
    height: 65px;

    position: absolute;
    left: 125px;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.performLabel {
    width: 110px;

    position: absolute;
    top: 0;
    left: 0;
}
.performLabel:hover {
    -webkit-filter: brightness(108%); /* Safari 6.0 - 9.0 */
    filter: brightness(108%);
}

.listenLabel {
    width: 110px;

    position: absolute;
    top: 0;
    right: 0;
}
.listenLabel:hover {
    -webkit-filter: brightness(108%); /* Safari 6.0 - 9.0 */
    filter: brightness(108%);
}

.singerLabel {
    height: 65px;

    position: absolute;
    left: 25px;
    bottom: 50%;
    transform: translate(0%, 50%);
}


.pianoLabel {
    height: 65px;

    position: absolute;
    right: 25px;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.audioLabel {
    color: black;
    font: 18px Arial, Sans-Serif;
    line-height: 20px;
    height: 20px;

    position: absolute;
    right: 35px;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.delayLabel {
    color: black;
    font: 18px Arial, Sans-Serif;
    line-height: 20px;
    height: 20px;

    position: absolute;
    right: 22px;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.share {
    padding-top: 10px;

    opacity: 100%;

    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);

    z-index: 3;
    display: none;

}

.decal {
    height: 450px;
    padding-top: 40px;

    opacity: 90%;

    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);

    z-index: 3;

}

.decal-small {
    height: var(--logoHeight);

    opacity: 90%;

    position: relative;
    horiz-align: center;


}

.imgtutorial {
    position: relative;

    border: 2px solid #c0dfdf;
    border-radius: 9px;
}


.inputbutton {
    font: 20px Arial, Sans-Serif;

    padding: 15px 32px;

    background-color: cadetblue;
    color: white;
    border: none;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;

    transition-duration: 0.4s;

    position: relative;
    horiz-align: center;
    bottom: 0px;
}

.inputbutton:hover {
    background-color: teal;
    color: white;
}

.inputbuttonpair {
    font: 18px Arial, Sans-Serif;

    padding: 15px 32px;

    background-color: cadetblue;
    color: white;
    border: none;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;

    transition-duration: 0.4s;

    position: relative;
    horiz-align: center;
    bottom: 0px;
}

.inputbuttonpair:hover {
    background-color: teal;
    color: white;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#intro {
    display: none;
    text-align: center;

    color: rgba(83, 112, 113, 0.8);
    font: 20px Arial, Sans-Serif;
    height: 100px;

    white-space: nowrap;

    padding-top: var(--paddingTop);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);

}
#roomname {
    display: none;
    text-align: center;

    color: rgba(83, 112, 113, 0.8);
    font: 20px Arial, Sans-Serif;
    height: 250px;

    padding-top: var(--paddingTop);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);

}

#screenname {
    display: none;
    text-align: center;

    color: rgba(83, 112, 113, 0.8);
    font: 20px Arial, Sans-Serif;
    height: 150px;

    padding-top: var(--paddingTop);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);

}

#songname {
    display: none;
    text-align: center;

    color: rgba(83, 112, 113, 0.8);
    font: 20px Arial, Sans-Serif;
    height: 150px;

    padding-top: var(--paddingTop);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);
}

.photo {
    padding:    20px;
    border-radius: 35px;
    float:  left;
    opacity: 95%;

}

textarea {
    resize: none;
}

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

/*
#localCanvas {
    display: none;
}

#localVideo {
    display: block;
}
 */