/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url('./fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: calc(1em + 1vw);

}



body {
    background-color: black;
    color: blanchedalmond;
    font-family: 'Roboto', sans-serif;
    word-break: break-word;
    height: 100%;
    width: 100%;
    font-size: 0.8em;
}

div#container {
    width: 100%;
    height: 100%;
}

div#menubar {
    border: 1px solid #5f62b8;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: mediumpurple;
    padding: 4px 0px 4px 0px;
    text-align: center;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: auto;
    align-content: start;    
    z-index: 999;
}

div#menubar .splitter {
    line-height: 38px;
    border-left: 1px solid silver;
    margin: 0px 4px 0px 4px;
}

div#toolbar {
    border: 1px solid #5f62b8;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: mediumpurple;
    padding: 2px;
    font-size: 0.7em;
}

#toolbarLeft {
    float: left;
}

#toolbarRight {
    float: right;
    padding-right: 4px;
}


.menu-item {
    flex: 0 0 auto;
    margin: 4px;
}

.menu-item-container {
    border: 1px solid lightgray;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 24px;
    display: inline-block;      
}

.menu-item-text {
    padding-left: 4px;
}

#remoteV {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

#remoteS {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.remoteV-receivedScreen {
    position: absolute;
    width: 5em !important;
    height: 5em !important;
    top: 5em;
}

.remoteS-receivedScreen {
    display: inline !important;
}

#localV {
    width: 5em;
    height: 5em;
    object-fit: cover;
    position: absolute;
    z-index: 999;
    /*border: 1px solid black;*/
    right: 0.2em;
    bottom: 1.2em;    

    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */

}



/**settings dialog**/
.settingsDialog {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
}

.settingsDialog .previewContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    margin: auto;
    flex: 0 0 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;

    flex: 1 1 auto;
    margin: 1px;
}

.settingsDialog .previewControls {
    flex: 1 1 auto;
    margin: 1px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

.settingsDialog .previewContainer .previewMessage {
    position: absolute;
    width: 70%;
    display: block;
    text-align: center;
    bottom: 34%;


}

.settingsDialog .previewContainer  {
    border: 1px dashed silver;
    padding: 4px;
    border-radius: 12px;
    max-height: 50%;
    height: 50%;
}

#previewV {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid silver;

    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */

}

#prevPlayBtn {
    position: absolute;
    display: block;
    text-align: center;
    font-size: 4em;
    display: none; 
    cursor: pointer;
}

.setupContainer {
    width: 100%;
    margin: auto;
    height: 100%;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
}
.setupLine {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.setupIcon {
    font-size: 1.2em;
    width: 1.2em;
    padding: 0px 0px 0px 0px;

    display: flex;
    justify-items: center;
    align-items: center;

}
.setupSwitch {
    padding: 0px 0px 0px 4px;
}
.setupChoice {
    text-align: left;
    padding: 0px 0px 0px 6px;
}


/*device choose btn*/
.deviceChooseBtn {
    white-space: nowrap;
    vertical-align: middle;
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:13px;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    line-height: 1em;
} 
.deviceChooseBtn:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.deviceChooseBtn:active {
	position:relative;
	top:1px;
}

.btnDisabled {
    opacity: 0.3;
    cursor: not-allowed;
}



/*device choose btn*/
.deviceChooserBtn {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:13px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    line-height: 1em;
} 
.deviceChooserBtn:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.deviceChooserBtn:active {
	position:relative;
	top:1px;
}

/*readybtn*/
.readyBtn {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:13px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    width: 70vw;
    max-width: 500px;
    height: 24px;
    line-height: 1.6em;
}

.readyBtn:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.readyBtn:active {
	position:relative;
	top:1px;
}


/*camlist*/
.camList {
    display: flex;
    flex-direction: column;
    width: 70vw;
    max-width: 500px;
}

.camList span {
    display: flex;
    margin: 10px;
}

.camList span span{
    width: 100%;
    display: block;
}


svg#visualizer {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}


svg#visualizer path {
    stroke-linecap: square;
    stroke: white;
    stroke-width: 0.5px;
}

#pMicLevelDiv {
    position: absolute;
    display: none;
    top: 12px;
    width: 94%;
    text-align: right;
    padding: 10px;

    background-color: #AB47BC;
    opacity: 0.75;
    margin: auto;
    font-size: 0.8em;

}

#spectrumContainer {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 100%;
}

.tryitBtn {
    display: block;
    width: 90%;
    margin: auto;
}

.hangup-btn {
    position: absolute;
    display: none;
    bottom: 1.2rem;
    left: 10px;
    padding: .8em;
    background-color: crimson;
    border-radius: 1em;
    font-size: 1em;
    cursor: pointer;
}

.shoot-btn {
    position: absolute;
    display: none;
    bottom: 4%;
    left: 4%;
    padding: 1.2em;
    background-color: forestgreen;
    border-radius: 2.2em;
    font-size: 1.2em;
    cursor: pointer;
}

.chat-icon {
    /*display: none;*/
}

.message-ruler {
    position: absolute;
/*    width: 100%;*/
    background-color: bisque;
    top: 100px;
    opacity: 0.8;
    color: black;
    font-weight: bold;
    line-height: 2em;
    padding: 4px;
    text-align: center;
    display: none;
    z-index: 999999;
}

.message-title {
    bottom: auto;
    left: auto;
    right: 0;
    position: absolute;
    z-index: 999;
    border: 1px dashed white;
    padding: 2px;
    margin: 2px;
    background-color: bisque;
    color: black;
    font-weight: bold;
    display: none;
	padding: 10px;
    border-radius: 10px;
}