:root {
 --fontSizeXS:11px;
 --fontSizeS:12px;
 --fontSizeM:13px;
 --fontSizeL:14px;
 --fontSizeXL:15px;
 --fontSizeXXL:18px;
 
 /* Following "X" variables specified as "Light,Dark" - see DetectDarkMode() */
 --fontColX:#222,#DDD;
 --fontHighlightColorX:#000,#fff;
 --fontColHighlightX:#000,#FFF;
 --ctlSidebarColX: #fff, #282628;
 --ctlLighterColX: #fff,#636263;
 --ctlLightColX:#F6F7FA,#2f2d2f;
 --ctlBackHiliteColX:#1685FF,#1685FF;
 --ctlBorderColX:#E0E8F5,#474747;
 --ctlBorderDarkColX:#C0C7D1,#5a585b;
 --ctlLightBackColX: #F6F7FA,#282628;
 --imgFilterX:none,invert(1); /* Inverts dark-on-transparent images */
 --colSchemeX: light,dark;
 --ctlBoxShadow: 0 1px 1.5px rgba(0,0,0,0.3);
 --hoverCol: rgba(22, 133, 255, 0.1);
}

html, body {
 background: var(--ctlLightBackCol);
 color:var(--fontCol);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 font-size:var(--fontSizeL);
 line-height: var(--fontSizeXXL);
}

body, div {
 padding:0;
 margin:0;
}

select, input, button, label, img, hr, video {
 user-select:none;
 user-drag:none;
}

a {
 color: var(--fontCol);
}

h3 {
 margin-top: 0;
 font-weight: 500;
 margin-bottom: 10px;
 font-size: 15px;
 line-height: 20px;
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

select:-internal-list-box option:checked {
 background-color: var(--ctlLightBackCol);
}

select:not([size]):not([multiple]) {
 appearance:none;
 -webkit-appearance:none;
 -moz-appearance:none;
 box-sizing:border-box;
 color:var(--fontCol);
 border:1px solid var(--ctlBorderDarkCol);
 border-radius:6px;
 height:26px;
 font-size:var(--fontSizeL);
 line-height:24px;
 outline:none;
 padding:0 30px 0 10px;
 background-color: transparent;
 background-image:url('../img/menu-arrow.svg');
 background-position: calc(100% - 8px) center;
 background-repeat:no-repeat;
 background-size:18px 18px;
 box-shadow: none;
 cursor: pointer;
}

select[size] {
 border:1px solid var(--ctlBorderCol);
 background-color:var(--ctlLightCol);
 color:var(--fontCol);
 box-sizing:border-box;
 border-radius:0;
 min-width: 310px;
 outline: 0;
}

select[multiple] {
 border:1px solid var(--ctlBorderCol);
 background-color:var(--ctlLightCol);
 color:var(--fontCol);
 border-radius:6px;
 outline: 0;
}

button:disabled, input:disabled {
 opacity:50%;
}

.greyBg {
 background-color:#EEEFF2;
}

button {
 cursor: pointer;
 color: var(--fontCol);
}

#fileInputLabel {
 display:inline-block;
 width:100%;
 box-sizing:border-box;
 color:var(--fontCol);
 border:1px solid var(--ctlBorderDarkCol);
 border-radius:6px;
 min-height:26px;
 font-size:var(--fontSizeL);
 line-height:24px;
 outline:none;
 padding:0 30px 0 10px;
 cursor:pointer;
 margin:0;
 word-wrap:normal;
 margin-bottom:3px;
}

#fileInput {
 display:none;
}

.regButtonQ, .regButtonH, .saveButton {
 height:26px;
 font-size:var(--fontSizeL);
 border-radius:6px;
 vertical-align:middle;
 line-height:18px;
 margin-right:6px;
 border: 1px solid var(--ctlBackHiliteCol);
 background-color: var(--ctlBackHiliteCol);
 color: #fff;
 box-sizing:border-box;
 font-weight: 500;
 width: 130px;
 box-shadow: var(--ctlBoxShadow);
 cursor: pointer;
}

.regButtonQ:active, .regButtonH:not(.panelContent > .panelFooter > button:not(:last-of-type)):active, .saveButton:active {
 border-color: #1066c4 !important;
 background-color: #1066c4 !important;
}

.shortButtonQ, .shortButtonH, .triggerAddButton {
 height: 26px;
 border-radius: 6px;
 font-size: var(--fontSizeL);
 margin-right: 3px;
 margin-left: 3px;
 border: 1px solid var(--ctlLighterCol);
 background-color: var(--ctlLighterCol);
 color: var(--fontCol);
 vertical-align:middle;
 line-height:12px;
 box-sizing:border-box;
 font-weight: 500;
 box-shadow: var(--ctlBoxShadow);
 white-space: nowrap;
 min-width: 90px;
 padding: 0 15px;
}

.shortButtonQ:active, .shortButtonH:active, .triggerAddButton:active {
 border-color: #1066c4 !important;
 background-color: #1066c4 !important;
}

.shortButtonQ:first-child, .shortButtonH:first-child, .triggerAddButton:first-of-type {
 margin-left: 0;
}

.shortButtonH ~ .shortButtonH {
 margin-top: 5px;
}

.triggerAddButton {
 width: 26px;
 min-width: auto;
 padding: 0;
 margin-top: 2px;
}

.triggerAddButton > img {
 margin-right: 0 !important;
}

#advSchedButton {
 margin-left:15px !important;
}

.shortButtonQ:active, .shortButtonH:active, .triggerAddButton:active {
 border: 1px solid var(--ctlBorderCol) !important;
 background-color: var(--ctlBorderCol) !important;
}

.regButtonQ:active:not(:disabled), .regButtonH:active:not(:disabled), .shortButtonQ:active:not(:disabled), .shortButtonH:active:not(:disabled) {
 background-color:#999;
}

.sideGearButton {
 width:100%;
 height:26px;;
 line-height:18px;
 background-image:url('../img/gear.png');
 background-position:center center;
 background-repeat:no-repeat;
 background-size:16px 16px;
 border:1px solid var(--ctlBorderDarkCol);
 background-color:transparent;
 border-radius:6px;
 box-sizing:border-box;
 flex-shrink: 0;
}

.sideGearButton > img {
 height: 21px;
 width: 21px;
}

#loginDiv {
 width:100vw;
 height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
 font-size:var(--fontSizeL);
 background-color: var(--ctlSidebarCol);
}

#loginDiv form {
 background-color: var(--ctlLightCol);
 border-radius: 6px;
 padding: 20px;
 border: 1px solid var(--ctlBorderCol);
}

#loginDiv span {
 display: block;
}

#loginDiv span:first-of-type {
 margin-bottom: 10px;
 font-size: var(--fontSizeXL);
 font-weight: 500;
 color: var(--fontColHighlight);
}

#loginDiv input[type="submit"] {
 margin-top: 20px;
 width: 100%;
}

#regFeedback {
 margin-bottom:18px;
}

#feedbackDiv {
 text-align:center;
 color:red;
 margin-top: 20px;
}

.feedback {
 display:block;
 color:red;
 margin-top:10px;
 max-width:500px;
}

.feedback:empty {
 display:none;
}

#screenSidebar > .controlDiv {
 margin-bottom:20px;
}

.controlDiv {
 width:100%;
 box-sizing:border-box;
 margin-bottom:10px;
}

.controlDiv h1 {
 width:100%;
 font-size:var(--fontSizeM);
 font-weight:500;
 margin:0 0 5px 0;
}

.controlDiv select {
 width:100%;
 margin-bottom:4px;
}

.controlDiv input[type="date"] {
 margin-bottom:4px;
}

.controlDiv input[type="file"] {
 width:100%;
 margin-bottom:4px;
}

input[type="date"] {
 height:26px;
 min-height:26px;
 border: 1px solid var(--ctlBorderDarkCol);
 border-width: 1px;
 margin-bottom: 10px;
 padding-left: 12px;
 padding-right: 12px;
 border-radius: 6px;
 box-sizing: border-box;
 width: 100%;
 background-color: transparent;
 outline: 0;
 color: var(--fontCol);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color-scheme: var(--colScheme);
 font-size: var(--fontSizeL);
}

input[type="range"] {
 height: 3px;
 cursor: pointer;
 margin-left: 0;
 background: linear-gradient(to right, var(--ctlBackHiliteCol) calc(75% - 1px), var(--ctlBackHiliteCol) 1px, var(--ctlBorderCol) 1px, var(--ctlBorderCol) 25%);
 border-radius: 3px;
 -webkit-appearance: none;
}

input[type="range"]::-moz-range-track {
 border-radius: 2px;
 height: 3px;
}

input[type="range"]::-ms-fill-upper {
 background-color: var(--ctlBorderCol);
 border-radius: 8px;
}

input[type="range"]::-ms-fill-lower {
 background-color: var(--ctlBackHiliteCol);
 border-radius: 8px;
}

input[type="range"]::-ms-track {
 border: none;
 height: 3px;
 color: transparent;
}

input[type="range"]::-moz-range-thumb {
 background-color: var(--ctlLighterCol);
 border-radius: 0;
 height: 18px;
 width: 18px;
 border-radius: 9px;
 border: 1px solid var(--ctlBorderCol);
}

input[type="range"]::-ms-thumb {
 width: 18px;
 height: 18px;
 background-color: var(--ctlLighterCol);
 border-radius: 9px;
 border: 1px solid var(--ctlBorderCol);
}

input[type="range"]::-webkit-slider-thumb {
 background-color: var(--ctlLighterCol);
 border-radius: 9px;
 height: 18px;
 width: 18px;
 -webkit-appearance: none;
 border: 1px solid var(--ctlBorderCol);
}


::-ms-tooltip {
 display: none;
}

::-ms-tooltip {
 display: none;
}

.controlDiv input[type="range"] {
 width:196px;
 margin:0;
 vertical-align:middle;
}

.controlDiv span {
 margin:0;
 vertical-align:middle;
}

.controlDiv button {
 display:block;
 width:100px;
 margin-bottom:1px;
}

#sidebarBoxWrapper {
 border-bottom: 1px solid var(--ctlBorderCol);
 padding-left: 5px;
 padding-right: 5px;
}

.sidebarBox {
 position:relative;
 width:100%;
 color:var(--fontCol);
 box-sizing:border-box;
 background-color: transparent;
}

.sidebarBox label {
 display: flex;
 padding: 0 15px;
 height: 26px;
 line-height: 26px;
 cursor: pointer;
 align-items: center;
 gap: 4px;
 white-space:nowrap;
 overflow:hidden;
}

.sidebarBox label:hover {
 background-color: var(--hoverCol);
}

.sidebarBox br {
 display: none;
}

#mainMenu {
 height:40px;
 min-height:40px;
 border: 0;
 margin:0;
 font-size: var(--fontSizeXL);
 background-color: transparent;
 border-radius: 0;
 box-shadow: none;
 padding-left:15px;
 /*font-weight: 500; messes up appearance in Safari */
}

#liveGroup, #capGroup {
 font-size: var(--fontSizeL);
 border-radius: 6px 6px 0 0;
}

#liveCamSelectDiv {
 flex-grow:1;
 overflow:auto;
 border: 1px solid var(--ctlBorderDarkCol);
 border-top-width: 0;
 border-bottom-width: 0;
}

#liveCamSelectDiv > span {
 display:block;
 padding:8px;
}

#capCamSelectDiv {
 height:160px;
 min-height:160px;
 overflow:auto;
 border-radius:0 0 5px 5px;
 border: 1px solid var(--ctlBorderDarkCol);
 border-top-width: 0;
}

#capCamSelectDiv > span {
 display:block;
 padding:8px;
}

#capDate {
 margin:0;
 border: 1px solid var(--ctlBorderDarkCol);
 border-width: 1px;
 margin-bottom: 10px;
 padding-left: 10px;
 padding-right: 10px;
}

#capFilter {
 margin-bottom: 10px;
}

#filesDiv {
 flex-grow:1;
 overflow-x:hidden;
 overflow-y:auto;
 margin-top:15px;
 margin-left: -15px;
 margin-right: -15px;
 width: calc(100% + 30px);
 border-top: 1px solid var(--ctlBorderCol);
}

#filesDiv > .fileListItem {
 position:relative;
 display: flex;
 align-items: flex-start;
 cursor:pointer;
 border-bottom: 1px solid var(--ctlBorderCol);
}

#filesDiv > .fileListItem:not(.fileListItemSelected):hover {
 background-color: var(--hoverCol);
}

#filesDiv > .fileListItem.fileListItemSelected {
 background-color: var(--ctlLightCol);
}

#filesDiv > span {
 display: block;
 padding: 15px;
}

#filesDiv > .fileListItem > img {
 width:146px;
 height:82px;
 vertical-align:top;
 object-fit:cover;
}

#filesDiv .capDuration {
 position: absolute;
 left: 5px;
 bottom: 5px;
 background-color: rgba(0,0,0,0.7);
 color: white;
 padding: 2px 3px;
 font-size: 10px;
 border-radius: 2px;
 font-weight: 600;
 line-height: 12px;
}

#filesDiv .capInfo .capTime {
 margin-bottom: 3px;
 font-size: 12px;
 line-height: 14px;
}

#filesDiv .capInfo .capFormat {
 display: inline-block;
 font-size: 12px;
 line-height: 14px;
 opacity: 0.5;
 overflow:hidden;
}

#filesDiv .capInfo .capSize {
 display: inline-block;
 font-size: 12px;
 line-height: 14px;
 margin-left: 13px;
 opacity: 0.5;
 position: relative;
}

#filesDiv .capInfo .capSize:before {
 content: '';
 height: 2px;
 width: 2px;
 position: absolute;
 left: -7px;
 background-color: var(--fontCol);
 top: 6px;
 border-radius: 50%;
}

#filesDiv .capInfo {
 padding: 10px 0 0 8px;
 flex-grow: 1;
}

#filesDiv .capActions {
 display: flex;
 margin-top: 6px;
 gap: 1px;
}

#filesDiv .capActions button {
 width: 26px;
 height: 26px;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: transparent;
 border: 0;
 border-radius: 6px;
}

#filesDiv .capActions button:not(:first-of-type) {
 opacity: 0.5;
}

#filesDiv .capActions button:hover {
 background-color: var(--ctlLighterCol);
 color: var(--fontHighlightColor);
 opacity: 1;
}

#filesDiv .capActions button img {
 height: 16px;
 width: 16px;
}

#ptzDivWrapper {
 margin:auto 0 10px 0;
 border-radius: 0 0 6px 6px;
 border: 1px solid var(--ctlBorderDarkCol);
 padding: 8px 15px;
}

#ptzDiv {
 height:210px;
 min-height:210px;
 max-height:210px;
}

#ptzDiv > span {
 display:inline-block;
 position:relative;
 left:-8px;
 top:0;
 width:100%;
 height:18px;
 overflow:hidden;
 pointer-events:none;
 user-select:none;
 user-drag:none;
 text-align:center;
}

#ptzDiv > button {
 position:absolute;
 width:29px;
 height:16px;
 border:1px solid var(--ctlBorderCol);
 background-color:var(--ctlLightCol);
 font-size:var(--fontSizeS);
 line-height:var(--fontSizeS);
 padding:1px;
 user-select:none;
 user-drag:none;
}

#ptzDiv > button:active:not(:disabled) {
 background-color:#999;
}

#ptzDiv > img {
 position:absolute;
 user-select:none;
 user-drag:none;
 pointer-events:none;
}

#ptzDiv > button > img {
 width:14px;
 height:14px;
 user-select:none;
 user-drag:none;
}

.menuDivider {
 height:1px;
 background-color:#ccc;
 margin:5px 0;
}

.divLabel {
 position:absolute;
 top:1px;
 left:5px;
}

.inlineLabelContainer {
 position:relative;
 padding:10px 0 2px 0;
}

.inlineLabelContainer label {
 position:absolute;
 bottom:5px;
 left:5px;
 color:#888;
}

.inlineLabelContainer input[type="text"]:valid + label, .inlineLabelContainer input[type="password"]:valid + label {
 display:none;
}

#brandTableWrapper {
 padding: 10px 15px;
 border-bottom: 1px solid var(--ctlBorderCol);
}

#brandTable {
 border-collapse:collapse;
 padding:0;
 width: 100%;
}

#brandTable tr {
 margin:0;
 padding:0;
}

#brandTable td {
 margin:0;
 line-height:13px;
 vertical-align:middle;
 overflow:hidden;
 font-weight: 500;
 font-size: var(--fontSizeXL);
}

#brandTable tr:nth-child(1) td:nth-child(1) img {
 width:40px;
 height: 40px;
}

#brandTable tr:nth-child(1) td:nth-child(1) {
 width:55px;
}

#brandTable tr:nth-child(1) td:nth-child(3) {
 width:26px;
}

#sysName {
 font-weight: 400;
 margin-top: 5px;
 display: block;
 opacity: 0.6;
 font-size:var(--fontSizeXS);
}

#indexBody {
 height:100vh;
 margin:0;
 overflow:hidden;
}

#sidebarContainer {
 display:flex;
 flex-direction:column;
 width:250px;
 height:100vh;
 background: var(--ctlSidebarCol);
 border-right: 1px solid var(--ctlBorderCol);
 padding:0;
 box-sizing:border-box;
 overflow:hidden;
}

.sidebarDiv {
 display:none;
 flex-direction:column;
 width:100%;
 box-sizing:border-box;
 flex-grow:1;
 overflow:hidden;
 padding: 15px;
}

#capSidebar {
 padding-bottom:0;
}

.sidebarImg {
 cursor:pointer;
 width:24px;
 height:24px;
 opacity: 0.5;
}
.sidebarImg:hover {
 opacity: 1;
}

.vTab {
 position:relative;
}

.vTab:not(:last-child) {
 margin-bottom: 3px;
}

.vTab > input[type="radio"] {
 display:none;
}

.vTab > label {
 display:flex;
 flex-direction: row-reverse;
 font-weight:normal;
 height:34px;
 margin:0;
 cursor:pointer;
 box-sizing:border-box;
 align-items: center;
 justify-content: flex-end;
 padding: 0 12px;
 border: 1px solid transparent;
 border-radius: 6px;
 font-weight: 500;
}

.vTab > label > span {
 line-height: 14px;
}

.vTab > label:hover {
 color: var(--fontColHighlight);
}

.vTab > input[type="radio"]:checked + label {
 position: relative;
 z-index: 1;
 color: #1685FF;
 background-color: var(--hoverCol);
}

.vTab > label > img:first-of-type,
.vTab > label > .setTabCamerasCaption > img:first-of-type {
 width:20px;
 height:20px;
 margin-right: 10px;
 filter: grayscale(1);
}

.vTab > input[type="radio"]:checked + label > img:first-of-type,
.vTab > input[type="radio"]:checked + label > .setTabCamerasCaption > img:first-of-type {
 filter: grayscale(0);
}

#setCamMenu {
 display: none;
}

.vTab > input[type="radio"]:checked + label > #setCamMenu {
 display: inline-block;
}

.vTab select {
 display:inline-block;
 box-sizing:border-box;
 min-height:60px;
 width:100%;
 height:calc(100vh - 520px);
 color:var(--fontCol);
 border: 0;
 border-top:1px solid var(--ctlBorderCol);
 border-radius:0;
 margin-top:8px;
}

.vTab select:focus {
 outline:none;
}

#ddnsName {
 padding-right:1px;
 width:100px !important;
}

#openInBrowser {
 margin-top:0 !important;
}

.setTabCamerasCaption {
 width: 100%;
 display: flex;
 flex-direction: row-reverse;
 justify-content: flex-end;
 height: 34px;
 min-height: 34px;
 align-items: center;
 padding: 0 12px;
 box-sizing: border-box;
}

#vTabCameras {
 display:flex;
 flex-direction:column;
 flex-grow:1;
}

#vTabCameras > label {
 display:flex;
 flex-direction:column;
 flex-grow:1;
 padding: 0;
 justify-content: flex-start;
}

#vTabCameras > label > select {
 flex-grow:1;
 overflow-x:hidden;
 overflow-y:auto;
 margin-top: 0;
}

select {
 padding: 5px;
 font-size: var(--fontSizeL);
}

select ~ select:not(.widthH) {
 margin-top: 5px !important;
}

select > option {
 height: 24px;
 display: flex;
 align-items: center;
 padding: 0 12px;
 border-radius: 6px;
 margin: 1px 0;
}

select > option:checked {
 background-color: var(--ctlBackHiliteCol) !important;
 color: #fff;
}

select > option:hover {
 background-color: var(--hoverCol);
 cursor: pointer;
}

#purchaseButton {
 margin-top:5px;
}

#regRefresh {
 margin-left:0;
}

#regRedDot {
 display:none;
 position:absolute;
 top:5px;
 right:5px;
 width:14px;
 height:14px;
}

#purchaseInfo
{
 text-align:left;
 margin-bottom:20px;
}

#updateRedDot, #storeRedDot {
 display:none;
 width:12px;
 height:12px;
 vertical-align:middle;
 margin-left:5px;
}

#newCamButton {
 width:113px;
}

#delCamButton {
 position:relative;
 left:6px;
 width:113px;
}

#contentContainer {
 position:absolute;
 top:0px;
 left:250px;
 width:calc(100vw - 250px);
 min-height:100%;
}

#screenCanvas {
 max-width:100%;
 max-height:100%;
}

.contentDiv {
 width: 100%;
 display:none;
 position:absolute;
 left:0;
 top:0;
 height:100%;
 background-color: var(--ctlLightCol);
}

#setContent {
 overflow:auto;
}

#setContent > .topTabs {
 border: 1px solid var(--ctlBorderCol);
 margin-top: 20px;
 margin-bottom: 20px;
}

#liveContent {
 line-height:100vh;
 text-align:center;
 background:var(--ctlLightCol);
 overflow:hidden;
}

#liveContent > span {
 display:inline-block;
 width:80%;
 line-height:var(--fontSizeL);
 color:var(--fontCol);
 font-size:var(--fontSizeL);
}

#capContent {
 line-height:100vh;
 text-align:center;
 background:var(--ctlLightCol);
 overflow:hidden;
}

#capContent > span {
 display:inline-block;
 width:80%;
 line-height:var(--fontSizeL);
 color:var(--fontCol);
 font-size:var(--fontSizeL);
}

#capContent video, #capContent img {
 width:100%;
 height:100%;
}

#capContent img {
 object-fit:contain;
}

#screenContent {
 text-align:center;
}

#dashImg {
 object-fit:fill;
 width:100%;
 height:100%;
}

#dashItem1, #dashItem2 {
 display:none;
}

#showSidebarDiv {
 display:none;
 position:absolute;
 left:0;
 top:18px;
 width:32px;
 height:32px;
 background: var(--ctlSidebarCol);
 box-sizing:border-box;
 z-index:2;
 border-width: 1px 1px 1px 0;
 border-style: solid;
 border-color: var(--ctlBorderDarkCol);
 border-radius: 0 6px 6px 0;
 text-align: center;
 padding: 3px 0;
}

.playerDiv {
 position:absolute;
 display:flex;
 justify-content:center;
 align-items:center;
 background-color: #222;
 box-sizing:border-box;
 overflow:hidden;
}

.playerDiv > p { /* error message */
 line-height:var(--fontSizeL);
 text-align:center;
 color:white;
}

.playerDiv > p > img {
 border:0;
 width:32px;
 height:32px;
}

.playerDiv > video {
 border:0;
 position:absolute;
 bottom:0;
 left:0;
}

.playerDiv > img {
 border:0;
 position:absolute;
 bottom:0;
 left:0;
}

.playerDiv > span { /* Info bar at top */
 display:block;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:13px;
 padding:1px;
 font-size:var(--fontSizeS);
 line-height:13px;
 overflow:hidden;
 color:white;
 box-sizing:border-box;
}

.playerDiv > span > div { /* CMA boxes */
 display:none;
 position:absolute;
 top:0;
 width:18px;
 height:13px;
 font-size:var(--fontSizeS);
 line-height:14px;
 text-align:center;
 border-left:1px solid #222;
 background-color:#777;
 box-sizing:border-box;
 cursor:pointer;
 user-select:none;
 user-drag:none;
}

.playerDiv > span > img { /* audio button */
 position:absolute;
 top:0;
 width:9px;
 height:13px;
 cursor:pointer;
 user-select:none;
 user-drag:none;
}

.speakerCheck {
 appearance:none;
 -webkit-appearance:none;
 -moz-appearance:none;
 position:absolute;
 width:32px;
 height:32px;
 right:8px;
 top:8px;
}

.speakerCheck::before {
 width:32px;
 height:32px;
 content:"";
 display:inline-block;
 background-image: url('../img/speaker-off.png');
}

.speakerCheck:checked::before {
 background-image: url('../img/speaker-on.png');
}

.setBodyContainer { /*For stacking multiple .setBody elements vertically */
 text-align:center;
 margin-bottom:10px;
}

.setBody {
 display:inline-block;
 position:relative;
 text-align:left;
 border-collapse:collapse;
 /*width: 100%;*/
}

.setBody > tr > td:nth-child(1) > span, .setBody > tbody > tr > td:nth-child(1) > span {
 display:inline-block;
 width:100%;
 text-align:right;
 padding-right:20px;
 margin:0;
 box-sizing:border-box;
}

.setBody > tr > td, .setBody > tbody > tr > td {
 position:relative;
 padding:0 0 8px 0;
}

.setBody > tr > td.center, .setBody > tbody > tr > td.center {
 text-align:center;
}

.setBody > tr.padding0 > td, .setBody > tbody > tr.padding0 > td {
 padding:0;
}

.setBody > tr.paddingL > td, .setBody > tbody > tr.paddingL > td {
 padding:0 0 10px 0;
}

.setBody > tr.paddingXL > td, .setBody > tbody > tr.paddingXL > td {
 padding:0 0 32px 0;
}

.setBody input:not([type="checkbox"]):not([type="radio"]), .setBody span:not(.infoText), .setBody select, .setBody img {
 vertical-align:middle;
 margin-right:6px;
 font-size:var(--fontSizeL);
}

.setBody select {
 border-radius: 6px 6px 0 0;
 margin: 0;
}

input[type="checkbox"] {
 margin-left: 0;
}

@media (prefers-color-scheme: dark) {
 input[type="checkbox"]:not(.toggleCheck) {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(#555, #666);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: 1em;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  margin: 3px 3px 0px 0;
 }
 
 input[type="checkbox"]:not(.toggleCheck)::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 60%, 45% 100%, 95% 16%, 80% 5%, 40% 70%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #fff;
  background-color: #fff;
 }
 input[type="checkbox"]:not(.toggleCheck):checked {
  background-color: #1685FF;
  background-image: none;
 }
 
 input[type="checkbox"]:not(.toggleCheck):checked::before {
  transform: scale(1);
 }
 
 input[type="checkbox"]:not(.toggleCheck):disabled {
  cursor: not-allowed;
 }
 
 input[type="radio"]:not([name="setTab"]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(#555, #666);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  margin: 3px 2px 0px 4px;
 }
 
 input[type="radio"]:not([name="setTab"])::before {
  content: "";
  height: 0.4em;
  width: 0.4em;
  border-radius: 0.2em;
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  background-color: #fff;
 }
 
 input[type="radio"]:not([name="setTab"]):checked {
  background-color: #1685FF;
  background-image: none;
 }
 
 input[type="radio"]:not([name="setTab"]):checked::before {
  transform: scale(1);
 }
 
 input[type="radio"]:not([name="setTab"]):disabled {
  cursor: not-allowed;
 }
}

.setBody label, .checkLabel {
 display:inline-flex;
 align-items:flex-start;
 vertical-align:middle;
 font-size:var(--fontSizeL);
 padding: 2px 0;
 gap: 2px;
}

.setBody button {
 vertical-align:middle;
}

.top {
 vertical-align:top;
}

hr {
 position:relative;
 margin:0 0 10px 0;
 border:none;
 background: var(--ctlBorderCol);
 height:1px;
}

.infoText {
 vertical-align:top;
 display:inline-block;
 margin-bottom:20px;
 margin-left: 15px;
}

.hrTitle {
 text-align:left !important;
 display:inline-block;
 vertical-align:middle;
 font-weight:600;
 color: var(--fontColHighlight);
}

#sunriseInfo {
 text-align:left;
 max-width:280px;
}

.panelContainer { /* Note: set this to display:flex to show */
 display:none;
 position:fixed;
 justify-content: center;
 align-items: center;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background-color:rgba(0,0,0,0.6);
 text-align:center;
 z-index:3;
 overflow-y: auto;
 padding: 30px 0;
 box-sizing: border-box;
 animation: fadeIn 0.2s;
}

.panelContent {
 display:inline-block;
 position:relative;
 border-radius:10px;
 border:1px solid var(--ctlBorderDarkCol);
 background-color: var(--ctlLightCol);
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 box-sizing:border-box;
}

.panelContent > h1  {
 display:inline-block;
 text-align:center;
 width:400px;
 margin:4px 0 18px 0;
 font-size:var(--fontSizeXL);
 color: var(--fontColHighlight);
}

.panelContent .panelTitle {
 display: block;
 text-align:left;
 font-size: 15px;
 font-weight: 500;
 line-height: 20px;
 color: var(--fontHighlightColor);
 margin-left: auto;
 margin-right: auto;
 padding: 10px 20px;
 border-bottom: 1px solid var(--ctlBorderCol);
}

.panelContent .panelBody {
 max-height: calc(100vh - 150px);
 overflow-y: auto;
 padding: 15px 20px;
}

.panelContent > table {
 display:inline-block;
 margin:0;
 padding:10px 20px;
 border:0;
 border-collapse:collapse;
}

.panelContent > table td {
 padding:0;
}

#folderPicker select:not([size]) {
 margin-bottom: 10px;
 display: block;
 width:100%;
}

#folderPicker select[size] {
 height:400px;
 border-radius: 6px;
}

.boxSelect {
 height:200px;
}

.boxSelect:focus {
 outline:none;
}

.segControlV {
 width:100%;
 border-top: 1px solid var(--ctlBorderCol);
 display: none;
 background-color: var(--ctlLightCol);
}

.vTab > input[type="radio"]:checked + label > .segControlV {
 display: block;
}

.segControlL {
 background-color: transparent;
 border-width: 0 1px 1px;
 border-style: solid;
 border-color: var(--ctlBorderCol);
 box-sizing: border-box;
}

.segControlV, .segControlL {
 position:relative;
 height:26px;
 border-radius:0;
}

.segControlV > button, .segControlL > button {
 width:25px;
 height:25px;
 border:0;
 padding: 0;
 border-radius:0;
 box-sizing:border-box;
 cursor:pointer;
 background-color: transparent;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.segControlV > button:nth-child(2), .segControlL > button:nth-child(2) {
 border-left:0;
 left:34px;
}

.segControlV > button:nth-child(3), .segControlL > button:nth-child(3) {
 border-left:0;
 left:68px;
}

.segControlV > button > img, .segControlL > button > img {
 margin: 0;
}

.setBody span, label {
 user-select:none; /* makes clicking checkboxes cleaner */
}

label ~ input, label ~ button.shortButtonQ {
 margin-left: 10px;
}

input[type="text"], input[type="password"], #aOtherCams, #groupCams, #mingCams, #mingAgreement {
 border: 1px solid var(--ctlBorderDarkCol);
 background: transparent;
 box-sizing:border-box;
 border-radius: 6px;
 padding: 0 10px;
 color: var(--fontCol);
 outline: 0;
 font-size: var(--fontSizeL);
}

input[type="text"]::-webkit-input-placeholder, input[type="text"]:-moz-placeholder, input[type="text"]::-ms-input-placeholder, input[type="text"]::placeholder,
input[type="password"]::-webkit-input-placeholder, input[type="password"]:-moz-placeholder, input[type="password"]::-ms-input-placeholder, input[type="password"]::placeholder {
 padding: 0 15px !important;
}

input[type="text"], input[type="password"] {
 height: 26px;
 line-height: 26px;
}

input[type="text"]:focus, input[type="password"]:focus {
 background-color: var(--ctlLightCol);
}

#aOtherCams, #mingAgreement {
 overflow:auto;
 padding:2px 10px;
 max-height:160px;
}

#groupCams, #mingCams {
 overflow:auto;
 padding:2px 12px;
 max-height:400px;
}

.widthT { /* thumbnail */
 width:20px !important;
 box-sizing:border-box;
}

.widthQ { /* quarter width */
 width:75px !important;
 box-sizing:border-box;
 margin-right:6px;
}

.widthH { /* half width */
 width:157px !important;
 box-sizing:border-box;
 margin-right:6px;
}

.width3Q { /* 3/4 width */
 width:240px;
 box-sizing:border-box;
}

.widthF { /* full width */
 width:310px;
 box-sizing:border-box;
}

.widthX { /* extra width */
 width:500px;
 box-sizing:border-box;
}

.previewImageDiv {
 position:relative;
 width:310px;
 height:240px;
 margin:0 20px 10px 0;
 background-color: var(--ctlBorderCol);
 border-radius: 3px;
 overflow: hidden;
}

.saveButtonContainer {
 position:relative;
 text-align:center;
 margin-left: auto;
 margin-right: auto;
 padding-top: 10px;
 border-top: 1px solid var(--ctlBorderCol);
}

.saveButtonContainer > button {
 position:relative;
 background-color:#1685FF;
 color:white;
}

.saveButtonContainer > button > img {
 display:none;
 position:absolute;
 top:3px;
 right:10px;
}

.panelContent > .panelFooter {
 text-align:center;
 padding: 10px 20px;
 border-top: 1px solid var(--ctlBorderCol);
}

.panelContent > .panelFooter > button:not(:last-of-type) {
 border: 1px solid var(--ctlLighterCol);
 background-color: var(--ctlLighterCol) !important;
 color: var(--fontCol);
 margin-right:10px;
}

.panelContent > .panelFooter > button:not(:last-of-type):active {
 border: 1px solid var(--ctlBorderCol);
 background-color: var(--ctlBorderCol) !important;
}

#setForm {
 width: 680px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 10px;
 border: 1px solid var(--ctlBorderCol);
 margin-top: 20px;
}

.topTabs {
 width: 680px;
 padding:15px 20px;
 position:relative;
 border-radius:6px;
 box-sizing:border-box;
 text-align:center;
 margin-left: auto;
 margin-right: auto;
}

.topTabs > .topTabsInnerWrapper {
 display: inline-flex;
 box-shadow: 0 0px 1px rgba(0,0,0,0.3) inset;
 border-radius: 7px;
 background-color: var(--ctlBorderCol);
 padding: 2px;
 margin-bottom: 20px;
 align-items: center;
}

.topTabs > .topTabsInnerWrapper > input[type="radio"] {
 display:none;
}

.topTabs > .topTabsInnerWrapper > label {
 position:relative;
 display:inline-block;
 padding:0 10px;
 margin:0;
 height: 26px;
 line-height: 26px;
 cursor:pointer;
 color:var(--fontCol);
 box-sizing:border-box;
}

.topTabs > .topTabsInnerWrapper > input[type="radio"]:checked + label {
 border: 0;
 box-shadow:var(--ctlBoxShadow);
 background-color: var(--ctlLighterCol);
 border-radius:5px;
 height: 26px;
 line-height: 26px;
 color: var(--fontHighlightColor);
}

.topTabContent {
 position:relative;
 display:none;
 text-align:center;
}

#deviceVolText {
 display:inline-block;
 width:30px;
}

.compSlider, .compSelect {
 width:310px;
}

#pricingTable {
 border-collapse:collapse;
 margin-bottom:18px;
}

#pricingTable td {
 text-align:left;
 border:1px solid var(--ctlBorderDarkCol);
 padding:5px;
}

#presetTable {
 margin:0 0 10px 0;
 border-collapse:collapse;
 border:1px solid var(--ctlBorderCol);
}

#presetTable th {
 padding:8px 2px 8px 15px;
 text-align:left;
 font-weight: 600;
}

#presetTable td {
 padding:5px 0;
 text-align:left;
}

#presetTable tr td:first-child, #presetTable tr th:first-child {
 padding-left: 10px;
}

#presetTable tr td:last-child, #presetTable tr th:last-child {
 padding-right: 10px;
}

#presetTable th:nth-child(1) {
 width:22%;
}

#presetTable th:nth-child(2), #presetTable th:nth-child(3), #presetTable th:nth-child(4) {
 width:26%;
}

#presetTable tr:last-child td:first-child {
 border-top-left-radius: 6px;
}

#presetTable tr:last-child td:last-child {
 border-top-right-radius: 6px;
}

#presetTable tr {
 border-top: 1px solid var(--ctlBorderCol);
}

#presetTable tr:hover td {
 background-color: var(--ctlBorderCol);
}

#presetTable tr:not(:hover) select {
 background-color: transparent;
 box-shadow: none;
 border-color: transparent;
 background-image: none;
}

.popBox {
 position:absolute;
 background-color:#f9f9f9;
 border:1px solid #ccc;
 padding:8px;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 width:280px;
 border-radius:5px;
 z-index:4;
 box-sizing:border-box;
}

#pathDiv {
 display:inline-block;
 background-image:url('../img/folder.png');
 background-position:10px 5px;
 background-repeat:no-repeat;
 background-size:18px 18px;
 line-height:18px;
 min-height:26px;
 min-width: 310px;
 max-width:400px;
 padding: 5px 15px 5px 34px;
 margin-right:6px;
 background-color: transparent;
 border: 1px solid var(--ctlBorderDarkCol);
 vertical-align:top;
 border-radius: 6px;
 box-sizing: border-box;
 display: inline-block;
}

.toggleCheck {
 display:none;
}

.toggleLabel {
 position:relative;
 width:32px;
 height:32px;
 display:inline-block;
 border:1px solid transparent;
 cursor:pointer;
 margin:0;
 border-radius: 6px;
 box-sizing:border-box;
 margin-right: 5px;
}

.toggleCheck:checked + .toggleLabel {
 background-color: var(--ctlLighterCol);
 border-color: var(--ctlBorderDarkCol);
}

.toggleLabel img {
 position:absolute;
 left:6px;
 top:6px;
 width:18px;
 height:18px;
 user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

#setErr {
 display:block;
 margin-top:10px;
 color:red;
}

#storeWarning {
 display:block;
 margin-bottom:18px;
 color:red;
}

#warningSpan {
 margin-top:16px;
 color:red;
 font-weight:bold;
}

#uploadTable tr td:nth-child(1), #uploadTable tbody tr td:nth-child(1) {
 min-width:160px;
}

#uploadTable tr td:nth-child(2), #uploadTable tdoby tr td:nth-child(2) {
 min-width:420px;
}

#testResult {
 max-width:310px;
}

#screens {
 display:inline-block;
 width:310px;
 border-radius: 6px;
 padding:2px 3px 3px 3px;
 border:1px solid var(--ctlBorderCol);
 box-sizing:border-box;
 border-collapse:collapse;
}

#accountTable select {
 width:220px;
 height:310px;
 margin-right:18px;
}

@keyframes spin {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(360deg);}
}

.popMenu {
 position:absolute;
 border:1px solid var(--ctlBorderDarkCol);
 background-color: var(--ctlLightCol);
 border-radius:5px;
 z-index:4;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 overflow-x:hidden;
 overflow-y:auto;
 box-sizing:border-box;
 padding: 5px;
}

.popMenu button {
 display:block;
 height:26px;
 font-size:var(--fontSizeM);
 width:100%;
 padding:0 12px;
 box-sizing:border-box;
 border:0;
 margin:0;
 text-align:left;
 border-radius:6px;
 white-space:nowrap;
 background-color: transparent;
 color: var(--colFont);
 cursor: pointer;
}

.popMenu button[value="1"] {
 padding-left: 28px;
}

.popMenu button[value="2"] {
 background-position: 10px center;
 background-repeat:no-repeat;
 background-size:14px 14px;
 padding-left: 28px;
}

@media (prefers-color-scheme: light) {
 .popMenu button[value="2"] {
  background-image:url('../img/tick-menu.png');
 }
}

@media (prefers-color-scheme: dark) {
 .popMenu button[value="2"] {
  background-image:url('../img/tick-menu-white.png');
 }
}

.popMenu button:hover {
 background-color: var(--ctlBackHiliteCol);
 color: #fff;
}

.popMenu button[value="2"]:hover {
 background-image:url('../img/tick-menu-white.png');
}

.popMenu hr {
 margin:4px 16px;
 border:none;
 background: var(--ctlBorderCol);
 height:1px;
}

.popMenu h1 {
 display:block;
 width:100%;
 padding:7px;
 margin:0;
 font-weight:bold;
 font-size:var(--fontSizeXL);
}

.alertContainer {
 position:absolute;
 left:0;
 top:0;
 display:flex;
 align-items: center;
 justify-content: center;
 width:100vw;
 height:100vh;
 background-color:rgba(0,0,0,0.4);
 z-index:4;
}

.alertContainer table {
 position:absolute;
 padding:8px 8px 2px 8px;
 width:260px;
 background-color: var(--ctlLightCol);
 box-shadow: 0 0 20px rgba(0,0,0,0.3);
 border-radius:10px;
 text-align:center;
 line-height:16px;
}

.alertContainer td {
 padding:8px;
}

.alertContainer tr:first-child td {
 font-weight: 500 !important;
}

.alertContainer button {
 display:block;
 width:100%;
 height:28px;
 margin-bottom:8px;
 border:0;
 border-radius:5px;
 box-sizing:border-box;
 font-size:var(--fontSizeL);
}

.alertContainer button:nth-child(1) {
 background-color:#1685FF;
 box-shadow:var(--ctlBoxShadow);
 color:white;
}

.alertContainer button:nth-child(2), .alertContainer button:nth-child(3) {
 background-color: var(--ctlLighterCol);
 box-shadow: var(--ctlBoxShadow);
}

.reorderList {
 display:block;
 list-style-type:none;
 padding:0;
 width:300px;
 max-height:calc(100vh - 210px);
 overflow:auto;
 margin-bottom: 0;
}

.reorderList li {
 height: 26px;
 border:1px solid var(--ctlBorderCol);
 cursor:move;
 text-align:left;
 box-sizing:border-box;
 border-radius: 6px;
 margin-bottom: 3px;
 display: flex;
 align-items: center;
 padding: 0 15px;
}

.reorderList li:hover {
 background-color: var(--hoverCol);
}

#videoQualityText, #audioQualityText, #jpegQualityText, #webQualityText, #audioDeviceVolText {
 display:inline-block;
 width:20px;
}

.triggersDiv {
 display:inline-block;
 position:relative;
 width:340px;
 min-height:26px;
 border:1px solid var(--ctlBorderDarkCol);
 vertical-align:top;
 margin-right:5px;
 border-radius:6px;
 padding: 0 3px;
}

.triggersDiv > div {
 display:inline-flex;
 align-items:center;
 position:relative;
 height:22px;
 border-radius:26px;
 border:1px solid var(--ctlBorderCol);
 margin:2px;
 padding:0 10px 0 24px;
}

.triggersDiv > div > span:first-of-type {
 font-weight:500;
 margin-right: 15px;
}

.triggersDiv > div > input:first-of-type {
 display:none;
}

#mcTriggerHomeId, #aTriggerHomeId {
 appearance:none;
 -webkit-appearance:none;
 -moz-appearance:none;
 font-size:var(--fontSizeL);
 color:var(--fontCol);
 height:26px;
 line-height:24px;
 border:none;
 outline:none;
 margin:0;
 padding:1px 24px 0 5px;
 border-radius:16px;
 background-color: transparent;
 background-image:url('../img/menu-arrow.svg');
 background-position: 100% center;
 background-repeat:no-repeat;
 background-size:18px 18px;
 opacity:90%;
}

.triggersDiv img {
 position:absolute;
 left:4px;
 top:4px;
 width:14px;
 height:14px;
 cursor:pointer;
 opacity:70%;
}

.triggersDiv img:hover {
 opacity:100%;
}

.triggersDiv label {
 padding: 0;
 margin-right: 8px;
}

#configureHome {
 margin-left:10px;
}

#playSoundButton {
 position:relative;
 width:30px;
 height:26px;
 border-radius:6px;
 border: 1px solid var(--ctlLighterCol);
 background-color: var(--ctlLighterCol);
 margin-left: 10px;
 box-shadow: var(--ctlBoxShadow);
}

#playSoundButton:disabled {
 opacity:50%;
}

#playSoundButton img {
 width:16px;
 height:16px;
 margin: 0;
 filter: var(--imgFilter);
}

.spinner {
 display:none;
 animation:spin 1s linear infinite;
 vertical-align:middle;
}

.invertableImg { /* Inverts for dark mode */
 filter:var(--imgFilter);
}

#updateButton {
 display:block;
 margin:14px 0 0 0;
}

#regInfoDiv, #storeInfoDiv, #updateInfoDiv, #regRefreshDiv {
 display:inline-block;
 width:500px;
 text-align:left;
}

#regInfoDiv, #storeInfoDiv, #updateInfoDiv {
 margin-bottom:30px;
}

#regInfoDiv hr, #storeInfoDiv hr, #regRefreshDiv hr, #updateInfoDiv hr {
 margin-top: 10px;
}

#updateInfoDiv > textArea {
 display:block;
 font-size:var(--fontSizeXS);
 border:1px solid var(--ctlBorderCol);
 width:100%;
 max-height:240px;
 margin:14px 0 10px 0;
 overflow:scroll;
 white-space: pre;
 resize:none;
 outline:none;
}

.storeProduct {
 display: block;
 border-radius: 10px;
 padding: 4px;
 border: 1px solid var(--ctlBorderCol);
 padding: 6px 12px;
}

#storeInfoDiv td {
 vertical-align: middle;
 padding-bottom: 3px;
}

#storeInfoDiv table {
 margin-bottom: 8px;
}

#termsPanel > div, #buyPanel > div {
 max-width: 600px;
}

#termsPanel p {
 margin-top: 0;
 text-align: left;
}

#termsPanel p:last-of-type {
 margin-bottom: 0;
}

#updateProgressDiv {
 margin-top:8px;
 display:none;
}

#updateProgressDiv progress {
 width:300px;
 vertical-align:middle;
}

#updateProgressDiv img {
 margin-left: 8px;
 vertical-align: middle;
}

input[type="time"] {
 border: 1px solid var(--ctlBorderDarkCol);
 background: transparent;
 box-sizing: border-box;
 border-radius: 6px;
 padding: 0 6px;
 color: var(--fontCol);
 outline: 0;
 color-scheme: var(--colScheme);
}

#recompressWarning, #transWarning, #overlayWarning, #ccFpsWarning, #timelapseWarning, #mcFpsWarning, #mcMoviePostWarning,  {
 margin-left: 10px;
}