:root {
 --fontSizeXS:11px;
 --fontSizeS:12px;
 --fontSizeM:13px;
 --fontSizeL:14px;
 --fontSizeXL:15px;
 --fontSizeXXL:18px;
 
 --fileListItemWidth:100%;
 
 /* 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;
 --ctlBackColX:#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);
 --hoverColX:rgba(22,133,255,0.15)|rgba(22,133,255,0.3);
}

html, body {
 background:var(--ctlBackCol);
 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[type="submit"], input[type="button"], button, label, img, hr, video {
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

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

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

textarea {
 background-color:var(--ctlLighterCol);
 color:var(--fontCol);
}

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

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

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:var(--ctlBackCol);
 background-image:url('../img/menu-arrow.svg');
 background-position:right 7px 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;
 width:310px;
 outline:0;
}

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

#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:10px;
 /*font-weight:500; messes up appearance in Safari */
}

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

.greyBg {
 background-color:#EEEFF2;
}

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

button:not(:disabled) {
 cursor:pointer;
}

#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;
}

.toggleButton {
 height:26px;
 font-size:var(--fontSizeL);
 border-radius:1px;
 vertical-align:middle;
 line-height:18px;
 margin:0px;
 border:1px solid var(--ctlLighterCol);
 background-color:var(--CtlLighterCol);
 color:var(--fontCol);
 box-sizing:border-box;
 font-weight:500;
 width:130px;
 box-shadow:var(--ctlBoxShadow);
 cursor:pointer;
}

.toggleButton[aria-pressed="true"] {
 border:1px solid orange;
 background-color:orange;
 color:white;
}

.regButton, .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;
}

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

.shortButton, .triggerAddButton {
 height:20px;
 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;
}

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

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

#ssPresetContainer button {
 display:block;
 width:100%;
 margin-top:6px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 color:var(--fontCol);
 border:1px solid var(--ctlLighterCol);
 background-color:var(--ctlLighterCol);
}

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

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

.previewImg {
 border:0 !important;
 margin:0 !important;
}

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

.regButton:active:not(:disabled), .shortButton:active:not(:disabled) {
 background-color:#999;
}

#sideButtonWrapper {
 display:flex;
 justify-content:space-between;
}

#sideButtonWrapper button {
 height:26px;;
 line-height:18px;
 border:1px solid var(--ctlBorderDarkCol);
 background-color:transparent;
 border-radius:6px;
 box-sizing:border-box;
 flex:1;
}

#sideButtonWrapper button:not(:last-child) {
 margin-right:8px;
}

#sideButtonWrapper 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="file"] {
 width:100%;
 margin-bottom:4px;
}

.setBody 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;
}

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

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

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

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

.setBody 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);
}

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

.setBody 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 10px;
 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:10px;
 /*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-radius:0 0 6px 6px;
}

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

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

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

#capFilter {
 margin-bottom:10px;
}

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

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

.fileListItem {
 position:relative;
 box-sizing:border-box;
 display:inline-flex;
 align-items:flex-start;
 cursor:pointer;
 border-bottom:1px solid var(--ctlBorderCol);
 width:var(--fileListItemWidth);
}

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

.fileListItem.fileListItemSelected {
 background-color:var(--hoverCol);
}

.capThumbS, capThumbM, capThumbL {
 vertical-align:top;
 object-fit:cover;
}

.capThumbS {
 width:146px;
 height:82px;
}

.capThumbM {
 width:220px;
 height:120px;
}

.capThumbL {
 width:292px;
 height:164px;
}

.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;
}

.capInfo {
 padding:5px 0 0 8px;
 line-height:16px;
 font-size:12px;
 overflow:hidden;
}

.capInfo button {
 margin-top:2px;
 width:26px;
 height:24px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background-color:transparent;
 border:0;
 border-radius:6px;
}

.capInfo button:not(:first-of-type) {
 opacity:0.5;
}

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

.capInfo button img {
 height:16px;
 width:16px;
}

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

#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;
 text-align:center;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

#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;
}

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

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

#ptzDiv > button > img {
 width:14px;
 height:14px;
}

.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 10px;
 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:10px;
}

#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 {
 outline:none;
 display:none;
}

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

.multiSelectDiv {
 flex-grow:1;
 box-sizing:border-box;
 min-height:60px;
 width:100%;
 color:var(--fontCol);
 background-color:var(--ctlBackCol);
 overflow-x:hidden;
 overflow-y:auto;
 padding:3px;
}

.multiSelectDiv > div {
 display:flex;
 height:24px;
 padding:0 5px 0 8px;
 border-radius:6px;
 margin:1px;
}

.multiSelectDiv > div > span:nth-child(1) { /* Name */
 flex:1;
 height:24px;
 line-height:24px;
 user-select:none;
 overflow:hidden;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

.multiSelectDiv > div > span:nth-child(2) { /* Icon */
 height:24px;
 line-height:24px;
 width:14px;
 margin-left:4px;
 text-align:center;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

.multiSelectDiv > div[data-selected="true"] {
 background-color:var(--ctlBackHiliteCol) !important;
 color:#fff;
}

.multiSelectDiv > div:hover {
 background-color:var(--hoverCol);
 cursor:pointer;
}

#ddnsName {
 padding-right:1px;
 width:100px !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):not(#capGroup) {
 margin-top:5px !important;
}

#purchaseButton {
 margin-top:5px;
}

#regRefresh {
 margin-left:0 !important;
}

#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 {
 background:var(--ctlLightCol);
 overflow-x:hidden;
 overflow-y:hidden;
 line-height:0;
}

#capContent > span {
 display:inline-block;
 width:100%;
 margin:100px 20px;
 line-height:var(--fontSizeL);
 color:var(--fontCol);
 font-size:var(--fontSizeL);
 text-align:center;
}

#capContent .fileListItem:last-child {
 border-right:1px solid var(--ctlBorderCol);
}

#mediaContainer {
 display:none;
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 z-index:3;
 background:black;
}

#mediaContent {
 width:100%;
 height:100%;
 line-height:0;
}

#mediaContainer > button {
 position:absolute;
 left:8px;
 top:8px;
 background:none;
 border:none;
 padding:0;
 margin:0;
 cursor:pointer;
 z-index:4;
}

#mediaContainer > button > img {
 width:28px;
 height:28px;
}

#capVideo {
 width:100%;
 height:calc(100% - 28px);
}

#capImg {
 width:100%;
 height:100%;
}

#capImg {
 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;
}

.previewImageDiv {
 position:relative;
 display:flex;
 justify-content:center;
 align-items:center;
 width:310px;
 height:240px;
 margin:0 0 8px 0;
 background-color:var(--ctlBorderCol);
 border-radius:3px;
 overflow:hidden;
 background-color:#222;
}

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

.playerDiv > p, .previewImageDiv > p { /* error message */
 line-height:24px;
 text-align:center;
 color:white;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

.playerDiv > p > img, .previewImageDiv > p > img {
 border:0;
 margin: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:11px;
 overflow:hidden;
 color:white;
 box-sizing:border-box;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

.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;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

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

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

.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;
}

.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, .setBody select, .setBody img {
 vertical-align:middle;
 margin-right:6px;
 font-size:var(--fontSizeL);
}

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

#listSel {
 display:block;
 margin-bottom:12px;
}

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;
}

.infoCell {
 vertical-align:top;
 padding-left:15px !important;
}

.infoCell span {
 margin-left:0;
 margin-bottom:20px;
 display:inline-block;
}

.infoCell button {
 margin-left:0 !important;
 margin-bottom:5px !important;
 width:180px;
}

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

.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;
}

#accessInfoBody {
 max-width:480px;
}

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

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

.boxSelect {
 outline:none;
 height:200px;
}

.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;
 width:310px;
}

.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;
 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;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

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

input[type="text"], input[type="password"], #aOtherCams, #groupCams, #shareCams, #shareAgreement {
 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;
 min-height:26px;
}

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

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

#groupCams, #shareCams {
 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;
}

.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), .panelContent > .panelPanel > 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, .panelContent > .panelPanel > 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;
 margin-bottom:10px;
}

.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;
}

.compSelect {
 margin-right:10px !important;
}

#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:3px;
 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:var(--ctlBackCol);
 border:1px solid var(--ctlBorderDarkCol);
 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 4px;
 background-repeat:no-repeat;
 background-size:18px 18px;
 line-height:18px;
 min-height:26px;
 min-width:310px;
 max-width:400px;
 padding:4px 5px 4px 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;
 word-break:break-word;
 vertical-align:middle;
}

.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;
}

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

/*#recompressWarning, #transWarning, #overlayWarning, #recompressWarning, #overlayWarning, #capDestWarning, #portHttpWarning, #portHttpsWarning, #samePortWarning*/
.warning {
 margin-left:6px;
}

#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;
}

#accountTable label {
 display:block;
}

#accountTable input[type="checkbox"] {
 vertical-align:bottom !important;
 margin-right:4px !important;
}

@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);
}

#reorderBody {
 max-height:calc(100vh - 210px);
}

.sortable-fallback {
 -webkit-user-select:none;
 user-select:none;
}

.reorderList {
 display:block;
 list-style-type:none;
 padding:0;
 width:100%;
 height:100%;
 overflow:auto;
 margin:0;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-drag:none;
 -webkit-user-drag:none;
 -moz-user-drag:none;
}

.reorderList li {
 height:20px;
 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;
 user-select:none;
 -webkit-user-select:none;
 -moz-user-select:none;
}

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

.reorderList > .sortable-chosen {
 background-color:var(--hoverCol);
 /*border:1px solid red;*/
}

.reorderList > .selected {
 background-color:var(--hoverCol);
 /*border:1px solid red;*/
}

#videoQualityText, #audioQualityText, #jpegQualityText, #audioDeviceVolText, #brightnessText, #contrastText {
 display:inline-block;
 width:24px;
}

.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:right 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;
}

#soundButtonMac, #soundButtonCam {
 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);
}

#soundButtonMac img, #soundButtonCam 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);
}

#versSelect {
 display:block;
 margin-top:10px;
}

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

#optionsInfo {
 display:block;
 padding-top:15px;
 max-width:440px;
 font-style:italic;
}

#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;
}

#newFeatures {
 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;
}

#diskProgress {
 width:100px;
 margin-right:10px;
}

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;
}

#liveCamBody {
 width:100vw;
 height:100vh;
 margin:0;
 box-sizing:border-box;
 background:black;
 overflow:hidden;
}

#liveCamDiv {
 position:relative;
 width:100%;
 height:100%;
 background:black;
 overflow:hidden;
}

#liveCamDiv > span {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 text-align:center;
 color:white;
 font-size:1.2em;
}

#endTime {
 margin-left:0 !important;
}

#infoBarOptions {
 margin-left:8px !important;
}

#pushInfo {
 margin: 0 24px 0 24px;
}

.datePicker {
 background-image:url('../img/calendar.png') !important;
 background-position:right 9px top 5px !important;
 background-repeat:no-repeat !important;
 background-size:12px 14px !important;
 width:100%;
}

#capDate {
 margin-bottom:10px;
}

#scheduleGui {
 position:relative;
 width:740px;
 height:340px;
}

#scheduleGui > img {
 position:absolute;
 top:28px;
 left:12px;
 width:722px;
 height:229px;
 user-select:none;
 -webkit-user-drag:none;
}

#scheduleGui > canvas {
 position:absolute;
 left:13px;
 top:40px;
 width:720px;
 height:216px;
 outline:none;
 cursor:grab;
}

#scheduleGui > span {
 position:absolute;
 user-select:none;
 -webkit-user-drag:none;
}

#scheduleToggle {
 position:absolute;
 top:14px;
 right:14px;
 width:40px;
}

#scheduleCode {
 display:none;
 flex-direction:column;
}

#scheduleCode > p {
 margin-top:0;
 width:720px;
}

#scheduleText {
 flex:1;
 width:720px;
 height:216px;
 resize:none;
}