:root {  
    color-scheme: light dark;
   
    --color-dark-bg: #141414;
    --color-dark-grey: #282828;
    --color-mid-grey: #3c3c3c;
    --color-light-grey: #949494;
    --color-light-white: #e0e0e0;
    --color-light-bg: #f0f0f0;
    --color-red: #be0000;
    
    --radius-big: 10px;
    --radius-small: 5px;
    --button-height: 40px;
    --button-width: 60px;
    --button-wide-width: 80px;
    --border-width: 1px;
    --toolbarheight: 50px;

    --shadows: 0px 0px 40px 0px rgba(0,0,0,.25);
}
* {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    border: 0px;
    box-sizing: border-box;
}
*:focus {
    outline: none;
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 300;
    font-style: normal;
    font-size: 30px;  /* Preferred icon size */
}
a {
    text-decoration: none;
    color: light-dark(var(--color-light-grey), var(--color-light-grey)); 
}
a:hover {
    color: light-dark(var(--color-dark-bg), var(--color-light-bg)); 
}

body {
    margin: 0px;
    background-color: var(--color-mid-grey);
    background-attachment: fixed ;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
}
/* @media (prefers-color-scheme: dark) {
    body {
        background-image: url(../images/background-dark.jpg); 
    }
}
@media (prefers-color-scheme: light) {
    body {
        background-image: url(../images/background-light.jpg);
    }
} */

hr {
    margin: 10px 0px;
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-mid-grey));
}
h2 {
    position: relative;
    display: inline-flex;
    margin:0px;
    font-weight: 400;
    font-style: normal;
    color: light-dark(var(--color-dark-bg), var(--color-light-bg)); 
}
h3 {
    font-size: 16px;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
}

/*dialog boxes shared settings*/
dialog {
    /* transition: all 200ms allow-discrete; */
    position: absolute;
    display: block;
    left: 0px;
    width: fit-content;
    height: fit-content;
    justify-items: center;
    text-align: center;
    padding: 20px!important;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
    background-color: light-dark(var(--color-light-bg), var(--color-dark-grey));
    border-radius: var(--radius-big);
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-dark-grey));
    z-index: 10;
    box-shadow: var(--shadows);
    transition: opacity 0.3s ease;
} 
dialog::backdrop {
  background: var(--color-mid-grey);
}
dialog:open {
  opacity: 1;
}
@starting-style {
  dialog:open {
    opacity: 0;
  }
}
/*table styles shared*/
.table {
    position: relative;
    display: grid;
    /* grid-template-columns: auto auto auto auto; */
    column-gap: 5px;
    row-gap: 5px;
    width: 100%;
}
.table > div {
    flex: 1; /* makes both columns flexible */
    text-align: left;
    align-content: center;
}

.meter{
    position: absolute;
    display: inline-block;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
    background-color: dodgerblue;
    left:0px;
    width: 100%;
    height: 0px;
    bottom:0px;
    transition: height 0.05s ease;
}

/*Iframe settings for the main content area*/
iframe {
	width: 100%;
	height: calc(100% - var(--toolbarheight)*2);
    top: var(--toolbarheight);
    margin: 0px;
	padding: 0px;
	position: fixed;
    /* border:5px solid red; */
}
.mainstreamiframe {
    /* top: 5px; */
    top: 5px;
    height: calc(100% - 10px);
    display: block;
    position: absolute;
	z-index: 0;
    /* border:5px solid green; */
}
.viewersiframe {
	width:100px;
	left:0px;
	overflow-y: auto;
    overflow-x: hidden;
    z-index:1;
}
.viewersiframe:hover {
	width:300px;
	box-shadow: 0 0 100px 0px rgba(0, 0, 0, 0.5);
    transition-timing-function: ease;
    transition: 150ms;
}

/*remove system highlight around forms etc */
[contenteditable] {
    outline: 0px solid transparent;
}
.textinput {
    position: relative;
    width: 200px;
    padding: 5px 15px;
    height: var(--button-height);
    border-radius: var(--radius-big);
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-dark-grey));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}

/*botton styles, including red / blue and more settings*/
button {
    position: relative;
    height: var(--button-height);
    width: fit-content;
    margin-left:auto;
    margin-right:auto;
    display: block;
    border-radius: var(--radius-big);
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-mid-grey));
    cursor: pointer;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
    background-color: light-dark(var(--color-light-bg), var(--color-dark-grey));
}
.selected, .buttonmoresettings:hover {
    color: light-dark(var(--color-dark-grey), var(--color-light-white))!important;
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey))!important;
}
.selectedred {
    color: light-dark(var(--color-light-bg), var(--color-light-white))!important;
    background-color: var(--color-red)!important;
}
.buttonblue:hover {
    color: light-dark(var(--color-light-bg), var(--color-light-white));
    background-color: dodgerblue;
}
.buttonWider {
      width:240px;  
    /* padding: 0px 80px 0px 80px; */
}

/*custom dropdown selector*/
select { 
    appearance: none;
    width: 200px;
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-dark-grey));
    border-radius: var(--radius-big);
    padding: 8px 10px 8px 20px;
    color: light-dark(var(--color-light-grey), var(--color-light-grey)); 
    cursor: pointer;
}
.custom-select {
    position: relative;
    display: inline-block;
    width: 200px;
    height: var(--button-height);
    border-radius: var(--radius-big);
}

select:hover, select:active{
    color: light-dark(var(--color-dark-bg), var(--color-light-white));
}
/*add divider before dropdown arrow*/
.custom-select::before, .buttonmoresettings::before {
    position: absolute;
    content: "";
    top: 1px;
    right: 0px;
    width: 28px;
    height: calc(var(--button-height) - 4px);
    border:0px;
    border-left: 1px solid light-dark(var(--color-light-bg), var(--color-dark-grey));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
    border-top-right-radius: var(--radius-big);
    border-bottom-right-radius: var(--radius-big);;
    pointer-events: none;
}
/*add dropdown arrow*/
.custom-select::after, .buttonmoresettings::after {
    position: absolute;
    content: "";
    right: 9px;
    top: 16px;
    border: 6px solid transparent;
    border-color: light-dark(var(--color-mid-grey), var(--color-light-grey)) transparent transparent transparent;
    pointer-events: none;
    transition: transform ease-in-out 0.3s;
}
.hideoption { 
    display:none; 
    visibility:hidden; 
    height:0; 
    font-size:0; 
}
/*radio button customization*/
.radioset {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width:200px;
    height: var(--button-height);
    border-radius: var(--radius-big);
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-mid-grey));
}
label:has([type=radio]) {
    display: inline-flex;
    align-items: center;
    width: 100px;
    height: var(--button-height);
    justify-content: center;
    padding: 10px;
}
label:has([type=radio]:not(:disabled)) {
    cursor: pointer;
}
[type=radio] {
    appearance: none;
    display:none;
    width: 0px;
    height: 0px;
}
label:has([type=radio]:not(:disabled):hover) {
    color: light-dark(var(--color-dark-grey), var(--color-light-white));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
label:has([type=radio]:checked) {
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
    color: light-dark(var(--color-dark-grey), var(--color-light-white));
}
label:has([type=colorpot]:not(:disabled):hover) {
    color: light-dark(var(--color-dark-grey), var(--color-light-white));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
label:has([type=colorpot]:checked) {
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
    color: light-dark(var(--color-dark-grey), var(--color-light-white));
}

/*toolbars, top and bottom and tool sets (groups)*/
.toolbar {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: calc(var(--button-height) + 10px);
    margin: 0px;
    padding: 0px;
    z-index: 1;
    background-color: light-dark(var(--color-light-bg), var(--color-dark-grey)); 
}
.toolbar.top {
    top: 0px;
}
.toolbar.bottom {
    bottom: 0px;
    /* padding-bottom: env(safe-area-inset-bottom); */
}
.toolset {
    border-radius: var(--radius-big);
    outline: var(--border-width) solid light-dark(var(--color-light-white), var(--color-mid-grey));
    overflow: hidden;
    width: fit-content;
    height: var(--button-height);
    margin: 5px;
}

/*flexible spacer for gaps between tool sets*/
.toolspacer {
    margin-right:auto;
}

/*tool buttons*/
.tool {  
    border-radius: 0px;
    width: var(--button-width);
    height: var(--button-height);
    float: left;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    cursor: pointer;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
    background-color: light-dark(var(--color-light-bg), var(--color-dark-grey));
}
.tool:hover {
    color: light-dark(var(--color-dark-grey), var(--color-light-bg));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}

.toolred:hover {
    color: light-dark(var(--color-light-bg), var(--color-light-bg));
    background-color: var(--color-red);
}
.toolblue:hover {
    color: light-dark(var(--color-light-bg), var(--color-light-bg));
    background-color: dodgerblue;
}
/*add divider for tool buttons that show popup windows*/
.toolmoresettings {
    width: calc(var(--button-width) + 30px);
    justify-content: center;
    padding-right:30px;
}
.toolmoresettings[aria-expanded="true"] {
    color: light-dark(var(--color-dark-grey), var(--color-light-bg));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
.toolmoresettings::before {
    position: absolute;
    content: "";
    top: 1px;
    right: 0px;
    width: 28px;
    height: calc(var(--button-height) - 4px);
    border:0px;
    border-left: 1px solid light-dark(var(--color-light-white), var(--color-mid-grey));
    pointer-events: none;
}
.toolmoresettings[aria-expanded="true"]::before{
    border-left: 1px solid light-dark(var(--color-light-bg), var(--color-dark-grey));
}
 /*add dropdown arrow*/
.toolmoresettings::after {
    position: absolute;
    content: "";
    right: 9px;
    top: 16px;
    border: 6px solid transparent;
    border-color: light-dark(var(--color-light-grey), var(--color-light-grey)) transparent transparent transparent;
    pointer-events: none;
    transition: transform ease-in-out 0.3s;
}
.disable, .disable:hover, .disable::after {
    opacity: 0.5;
    color: light-dark(var(--color-light-grey), var(--color-mid-grey));
    background-color: light-dark(var(--color-light-bg), var(--color-dark-grey));
    cursor: default;
}
.toolmoresettings[aria-expanded="true"]::after {
    transform: rotate(180deg) translateY(50%);
}
/*volume slider*/
input[type="range"] {
    appearance: none; 
    width: 120px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 10px;
    margin-top:16px;
    height:7px;
    background-color:  light-dark(var(--color-light-grey), var(--color-light-grey));
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 7px;
    background: light-dark(var(--color-light-white), var(--color-mid-grey));
    border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none; 
    height: 6px;
    color: light-dark(var(--color-light-grey), var(--color-light-grey));
    width: 10px;
    background-color:  light-dark(var(--color-light-grey), var(--color-light-grey));
    border-radius: 50%;
    box-shadow: -120px 0px 0px 120px light-dark(var(--color-light-grey), var(--color-light-grey));
    
}
.volume {
    width: 120px;
    height: var(--button-height);
    margin-left: 20px;
    margin-right:20px;
}

/*background object for popup windows*/
.popupBG {
    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: 9;
}

/*popup windows for setting, share and color palette*/
.toolpopup {
    position: absolute;
    margin: 0px;
    z-index: 10;
} 
.toolpopup.top {
    top: calc(15px + var(--button-height));
}
.toolpopup.bottom {
    bottom: calc(15px + var(--button-height));
}
.toolpopup.right {
    right: 5px;
}
.toolpopup.left {
    position: fixed;
    left: 5px!important;
}
.toolpopup.middle {
    left: 50%;
    transform: translateX(-50%);
    padding:20px;
}
.toolpopup.bottom::after {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-color: light-dark(var(--color-light-bg), var(--color-dark-grey)) transparent transparent transparent;
}
.toolpopup.right::after {
    right: 40px;
    bottom: -20px;
}
.toolpopup.left::after {
    left: 25px;
    bottom: -20px;
}
.toolpopup.middle::after {
    left: 50%;
    transform: translate(-50%, 0px);
    bottom: -20px;
}
.toolpopup.top.left::before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-color: transparent transparent light-dark(var(--color-light-bg), var(--color-dark-grey)) transparent;
    left: 25px;
    top: -20px;
}
.toolpopup.top.right::before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-color: transparent transparent light-dark(var(--color-light-bg), var(--color-dark-grey)) transparent;
    right: 20px;
    top: -20px;
}
.colorpot{
    display: inline-flex;
    position: relative;
    padding: 0px;
    width: 30px;
    height: 30px;
    margin: 5px;
    border-radius: var(--radius-small);
    cursor: pointer;
}
.selectedcolorpot, .colorpot:hover  {
    outline: var(--border-width) solid light-dark(var(--color-light-grey), var(--color-mid-grey));
    outline-offset: 5px;
}
.share {
  padding: 5px;
  border: 0px;
} 
.link {
    position: relative;
    text-align: left;
    margin: 0px;
    padding: 15px;
    border:0px;
    width: 100%;
    height: fit-content;
}
.link:hover {
    color: light-dark(var(--color-dark-grey), var(--color-light-grey));
    background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
.warning {
    position:relative!important;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border:0px solid var(--color-light-bg);
    padding:10px 60px;
    background-color: var(--color-red);
}
.notification {
    position:relative!important;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border:0px solid var(--color-light-bg);
    padding:10px 60px;
}
/*for tool tips use  data-tooltip="Generate new random ID" in HTML tag, not currently active*/
[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    width:400px;
    content: attr(data-tooltip);
    background: light-dark(var(--color-light-white), var(--color-mid-grey));
    padding: 10px;
    border-radius: var(--radius-big);
    border: var(--border-width) solid light-dark(var(--color-light-white), var(--color-dark-grey));
    z-index:10;
  }

/* Zoom popup when zooming stream */
#zoom-popup {
    position: fixed;
    top: calc(var(--toolbarheight) + 15px);
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
#zoom-popup.visible {
  opacity: 0.75;
}
.mainZoom {
    position:fixed;
	height: calc(100% - var(--toolbarheight)*2);
    top: var(--toolbarheight);
    width: calc(100% - 105px);
    left:100px;
    overflow:auto;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
    will-change: transform;
    /* z-index: 80; */
    /* border:5px solid red; */
}
/*canvas settings for annotations (drawing)*/
.annotationsCanvas {
    position: absolute;
    display: block;
    border: 1px solid transparent;
    top: 0px;
    width: 0px;
    height: 0px;
    cursor: default;
    /* border: 1px solid blue; */
}

/* hide elements - must be last to over ride other styles*/
.hidden {
    display:none;
}
canvas, .mainZoom {
  touch-action: none;
}
/*animations*/  
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 var(--color-red); }
    100% {  box-shadow: 0 0 0 10px rgba(200, 60, 60, 0); }
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}