:root {
    --secondary-color-default: #3a6e32; /* Darker shade of your green for headers */
    --secondary-hover-color-default: #4a8040; /* Slightly lighter for hover states */
    --primary-color-default: #519546; /* Your core green */
    --text-color-default: #ffffff;
    --theme-background-color-default: #303030;
    --theme-text-color-default: #f5f5f5;
    --theme-border-top-default: #494949;
    --wipe-color-default: #111111;
    --secondary-color: var(--secondary-color-default);
    --secondary-hover-color: var(--secondary-hover-color-default);
    --primary-color: var(--primary-color-default);
    --text-color: var(--text-color-default);
    --theme-background-color: var(--theme-background-color-default);
    --theme-text-color: var(--theme-text-color-default);
    --theme-border-top: var(--theme-border-top-default);
    --wipe-color: var(--wipe-color-default);
}
html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
}
.whcurrent > img {
    display: none;
}
.whcurrent > span {
    color: var(--secondary-hover-color);
}
#wizardsectionheaders img[src="images/buttons/arrow-up-lightgrey.gif"] {
    display: none;
}
img[src="images/checkbox_on.png"] {
    background-color: var(--primary-color);
    height: 17px;
    width: 16px;
    border-radius: 3px;
}
ul.dropdown ul li a {
    line-height: 28px;
    height: 28px;
	padding:7px;
}
#listcontents > a > i {
    position: absolute;
    top: 5px;
    right: 5px;
}
.dark {
    background-color: #303030;
    color: #f5f5f5;
}
#icon-toggle-themes {
    color: var(--primary-color);
    font-size: 3em;
    background-color: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    line-height: 25px;
}
.theme-switch {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
#pageheader {
    position: fixed;
    background-color: var(--primary-color);
    color: var(--text-color);
    font-size: 14px;
    vertical-align: top;
    top: 50px;
    height: 82px;
    left: 0;
    width: 100%;
    z-index: 9000;
    min-width: 1300px;
}
#headerbar {
    font-family: Roboto-Medium;
    font-size: 18px !important; /* Increased from 14px */
    vertical-align: top;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    background-color: #3d3d3d; /* Changed to match dark grey background */
    z-index: 10001;
    min-width: 1300px;
}

#headerbar ul.dropdown {
	font-size: 16px !important;

}

.material-icons-palette {
    color: var(--text-color);
    font-size: 19px;
    font-family: "MaterialIcons-Regular";
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    position: relative;
    cursor: pointer;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "clig", "calt";
    margin-left: 1px;
}
html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
}
optgroup[label] {
    font-weight: 300;
}
::-moz-selection {
    background-color: rgba(225, 225, 225, 0.5);
}
::selection {
    background-color: rgba(225, 225, 225, 0.5);
}
#policytable td {
    padding: 0 2em 0 1em;
}
table.DTFC_Cloned thead,
table.DTFC_Cloned tfoot {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
table.dataTable thead {
    background-color: var(--secondary-color);
    color: #fff !important;
}
table.dataTable select {
    background-color: var(--secondary-color) !important;
}
.headerright {
    float: right;
    font-size: 10px;
}
.headerright .fullline {
    height: 24px;
    line-height: 24px;
}
.sitename {
    width: 150px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color) !important;
    cursor: pointer;
    padding-top: 1px;
}
#headertime {
    color: var(--text-color);
    float: right;
    text-align: right;
}
.helplink {
    padding: 7px 10px 5px;
    float: right;
}
.helplink:hover {
    background-color: var(--secondary-hover-color);
}
.helplink a:hover {
    text-decoration: none;
}
#headerbar .helplink a {
    color: var(--text-color) !important;
}
.caption {
    font-family: Roboto-Bold;
	line-height:48px;
	font-size:16px;
}
#detaillist input.narrowpin {
    width: 73px;
    margin-right: 7px !important;
}
#detaillist select.pin {
    width: 115px;
}
#ResetPIN {
    width: 57px;
    margin: 0 17px 0 22px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: Roboto-Medium;
}
.height14 {
    height: 14px;
}
.threeDots {
    font-size: 25px !important;
    line-height: 5px !important;
    padding: 0 0 5px !important;
    letter-spacing: -2px !important;
    width: 24px !important;
    min-width: 24px !important;
}
::-webkit-scrollbar {
    width: 17px;
}
::-webkit-scrollbar-track {
    background: #ffffff;
}
::-webkit-scrollbar-thumb {
    background: #dedede;
}
::-webkit-scrollbar-button {
    background: #dedede;
}
::-webkit-scrollbar-button:vertical:start:decrement {
    background: url("../images/arrow_up.png") no-repeat center;
    background-color: #dedede;
}
::-webkit-scrollbar-button:vertical:end:increment {
    background: url("../images/arrow_down.png") no-repeat center;
    background-color: #dedede;
}
::-webkit-scrollbar-button:horizontal:end:increment {
    background: url("../images/arrow_right.png") no-repeat center;
    background-color: #dedede;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
    background: url("../images/arrow_left.png") no-repeat center;
    background-color: #dedede;
}
.cpdouble input[type="text"] {
    border: none;
}
::-webkit-file-upload-button {
    width: auto;
    min-width: 75px;
    height: 24px !important;
    color: #fff !important;
    background-color: var(--primary-color);
    padding: 0 12px 2px 12px;
    border-radius: 3px;
    outline: none;
    font-family: Roboto-Medium;
    box-shadow: 0px 1px 1px #636363;
    border: 2px solid var(--primary-color);
}
br {
    font-family: initial !important;
}
@font-face {
    font-family: "MaterialIcons-Regular";
    src: url("../images/fonts/MaterialIcons-Regular.woff2") format("woff2"), url("../images/fonts/MaterialIcons-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto-Bold";
    src: url("../images/fonts/Roboto-Bold.woff2") format("woff2"), url("../images/fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto-Medium";
    src: url("../images/fonts/Roboto-Medium.woff2") format("woff2"), url("../images/fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto-Regular";
    src: url("../images/fonts/Roboto-Regular.woff2") format("woff2"), url("../images/fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
.material-icons,
.material-icons-disabled {
    font-family: "MaterialIcons-Regular";
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    position: relative;
    cursor: pointer;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "clig", "calt";
}
.material-icons,
.material-icons-disabled {
    color: var(--text-color);
    font-size: 19px;
    padding: 3px 4px;
    margin: 0 1px 1px 0px;
    vertical-align: bottom;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
#detaillist .material-icons:hover,
#fullscreen .material-icons:hover,
#messagefg .material-icons:hover {
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
span.clockButton:before,
span.clockButton-disabled:before {
    position: relative;
    content: "\e8ae";
    font-family: MaterialIcons-Regular;
    font-size: 19px;
    color: var(--text-color);
    cursor: pointer;
    padding: 3px 4px;
    margin: 0 2px;
    vertical-align: text-bottom;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
span.clockButton:hover::before {
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
.material-icons-disabled,
.clockButton-disabled {
    opacity: 0.5;
    box-shadow: none;
    pointer-events: none;
}
#mddtp-date__cancel.mddtp-button,
#mddtp-date__ok.mddtp-button {
    color: var(--text-color);
    background-color: var(--primary-color);
    height: 24px;
    text-transform: capitalize;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
a.cplink {
    width: auto;
    min-width: 75px;
    height: 24px;
    line-height: 24px;
    color: var(--text-color) !important;
    background-color: var(--primary-color);
    padding: 5px 12px;
    border-radius: 3px;
    margin: 5px;
    outline: none;
    font-family: Roboto-Medium;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
a.cplink:hover {
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 3px -1px rgba(0, 0, 0, 0.42);
}
ul.dropdown ul {
    background-color: #2d5528; /* Even darker green for dropdown menus */
}
ul.dropdown ul li a:hover {
    background-color: #4a8040; /* Lighter green on hover */
}
li .tiptext,
.sliderp .tiptext {
    visibility: hidden;
    min-width: 50px;
    background-color: #757575;
    color: var(--text-color);
    text-align: center;
    border-radius: 10px; /* Add or increase this value */
    padding: 4px 2px;
    font-family: Roboto-Regular;
    font-weight: normal;
    font-size: 13px;
}
li .tiptext {
    position: fixed;
    display: block;
    opacity: 0;
    transition: opacity 1s;
    z-index: 9000;
}
.sliderp .tiptext {
    position: relative;
    top: 25px;
}
li:hover .tiptext,
.sliderp:hover .tiptext {
    visibility: visible;
    opacity: 1;
    text-decoration: none !important;
}
body {
    font-family: Roboto-Regular;
    font-size: 13px;
    display: none;
    margin: 0;
}
input,
select {
    font-family: Roboto-Regular;
}
select,
input:not([type="file"]):not([type="button"]):not([type="submit"]) {
    background-color: transparent !important;
}
a {
    color: #000000;
    text-decoration: none;
    outline: none;
}
.dark a {
    color: #fafafa;
    text-decoration: none;
    outline: none;
}
a:hover {
    text-decoration: underline;
}
a > span {
    text-decoration: none !important;
}
h1 {
    font-size: 24px;
    font-weight: normal;
    margin: 10px 0 5px 0;
    width: auto;
}
#HomePage {
    position: relative;
    margin: 110px 0 5px 0;
}
h2 {
    font-size: 13px;
    padding: 0 0 5px 5px;
}
h3 {
    font-size: 13px;
    padding: 0 0 10px 0;
    margin: 0;
    font-weight: 400;
    font-family: Roboto-Medium;
}
img {
    border: none;
}
th {
    height: 30px;
    text-align: left;
    padding-left: 9px;
    font-family: Roboto-Regular;
    font-weight: normal;
}
.reporttable td {
    padding-left: 9px;
}
#container {
    height: 98%;
    text-align: left;
    margin: 118px 10px 0 0;
    min-width: 1300px;
}
.number-wrapper {
    position: relative;
}
#alertbox {
    min-height: 15px;
    border-radius: 3px;
    margin-top: 15px;
    padding: 8px 5px;
    text-align: left;
}
.alert-danger {
    border: 1px solid #dc0a0a;
    background: #fceae7;
    color: #dc0a0a;
}
.alert-success {
    border: 1px solid #32ad3c;
    background: #ecf7fc;
    color: #32ad3c;
}
#headertop {
    background: var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px #303030;
    z-index: 100000;
    height: 64px;
}
#headertop img {
    display: inline-block;
    padding: 8px 8px;
}
#headertop p {
    margin: 0;
    padding: 25px 0 0 0;
    color: var(--secondary-color);
    font-family: Roboto-Bold;
    float: right;
}
#headertop p a {
    color: #303030;
    margin-right: 20px;
}
#headertop-title {
    display: inline-block;
    padding-left: 16px;
}
#headertop-title img {
    background-color: #fff;
}
#username-icon {
    background-color: #fff !important;
    padding: 0 !important;
    margin: 0 4px 0 10px;
    display: inline !important;
    height: auto !important;
    vertical-align: top;
}
p#sitenameleft {
    margin-left: 2px;
}
#headerlogo {

    padding-top: 9px;
}
#headerbar a.arrowlogo {
    display: none;
}
#headertime.findreminder {
    color: var(--text-color);
}
#gxloginl,
#gxloginr {
    width: 380px;
}
#gxloginl {
    padding-top: 100px;
    height: 215px;
    word-wrap: break-word;
}
#gxloginr span {
    position: relative;
    top: 320px;
    left: -25px;
}
#gxloginl input,
#gxloginl select {
    display: block;
    width: 300px;
    margin: 0 0 10px 35px;
    border: none;
    border-bottom: 1px solid #767676 !important;
    padding: 5px 3px 5px 7px;
    color: #ffffff;
}
#gxloginl input:not([type="submit"]) {
    height: 15px;
}
#gxloginl input[type="submit"] {
    width: 310px;
    box-shadow: 0px 1px 1px #191919 !important;
    border-bottom: none !important;
}
#gxloginl input[type="submit"]:hover {
    box-shadow: 0px 1px 4px #191919 !important;
}
#gxloginl select {
    width: 310px;
}
#gxloginl option {
    background-color: #303030;
}
#gxloginl select:hover,
#gxloginl input:hover {
    border-bottom: 1px solid var(--primary-color-default) !important;
}
#gxloginl select:focus,
#gxloginl input:focus {
    border-bottom: 2px solid var(--primary-color-default) !important;
}
#gxloginl input#loginbutton {
    background-color: var(--primary-color-default) !important;
    width: 310px;
    cursor: pointer;
}
#gxloginl input:-webkit-autofill,
#gxloginl input:-webkit-autofill:hover,
#gxloginl input:-webkit-autofill:focus,
#gxloginl select:-webkit-autofill,
#gxloginl select:-webkit-autofill:hover,
#gxloginl select:-webkit-autofill:focus,
.dark #gxloginl input:-webkit-autofill,
.dark #gxloginl input:-webkit-autofill:hover,
.dark #gxloginl input:-webkit-autofill:focus,
.dark #gxloginl select:-webkit-autofill,
.dark #gxloginl select:-webkit-autofill:hover,
.dark #gxloginl select:-webkit-autofill:focus,
#Tat #gxloginl input:-webkit-autofill,
#Tat #gxloginl input:-webkit-autofill:hover,
#Tat #gxloginl input:-webkit-autofill:focus,
.dark #gxloginl select:-webkit-autofill,
.dark #gxloginl select:-webkit-autofill:hover,
.dark #gxloginl select:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    border: none;
    -webkit-box-shadow: 0 0 0 1000px #303030 inset !important;
}
.dark #gxloginl input#uname {
    background-color: #303030 !important;
}
#logintxt {
    float: left;
    position: relative;
    left: 60px;
    top: -43px;
    color: #fff;
    text-transform: uppercase;
    font-family: Roboto-Bold;
    white-space: nowrap;
}
#alertwin {
    clear: both;
    width: 100%;
    display: none;
    font-family: Roboto-Bold;
    font-size: 21px;
    text-align: center;
}
#loginfooter {
    clear: left;
    height: 5px;
    background: url(../images/footer-fade-dark.jpg) no-repeat;
}
#topfade {
    height: 3px;
    background-size: cover;
}
#footer {
    clear: both;
    height: 20px;
    background-size: cover;
}
#dashboardlist,
#listblock {
    float: left;
}
#dashboardlist {
    width: 265px;
}
.hiddentab {
    display: none;
}
#pageheader h1 {
    position: relative;
    float: left;
    padding-left: 15px;
}
#pageheader .detailtab,
.dt-buttons {
    position: fixed;
    float: left;
    top: 97px;
    padding-left: 15px;
    color: var(--text-color) !important;
    z-index: 9000;
    min-width: 1300px;
}
#calendarheading .detailtab {
    float: left;
}
#buttonbar {
    float: right;
	margin-top:18px;
}
#buttonbar option {
    background-color: var(--primary-color) !important;
}
#buttonbar ul,
#buttonbar li {
    margin: 0;
    padding: 0;
    float: left;
    list-style-type: none;
	border-radius:10px;
}
#listview p,
#groupview p,
#doorsstatuslist p {
    padding-left: 7px;
}
#buttonbar a:hover {
    background-color: var(--secondary-color);
}
#buttonbar ul li.controllerselect {
    margin: 15px 25px 0 0;
}
#buttonbar select {
    border-bottom: 1px solid var(--text-color) !important;
    border-color: var(--primary-color);
    color: var(--text-color) !important;
    background-color: var(--primary-color) !important;
    width: 150px;
}
#buttonbar img {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    display: none;
}
#UseWinAuth {
    margin-top: 20px;
}
#UseWinAuth img {
    height: 15px;
}
#UseWinAuth a {
    margin-left: 10px;
}
#listview,
#groupview {
    height: 815px;
    border-right: 1px solid #e0e0e0;
}
.dark #listview,
.dark #groupview {
    border-right: 1px solid #494949;
}
#listcontents,
#groupcontents {
    overflow: auto;
    word-wrap: break-word;
}
#dashboardlist,
#listcontents,
#groupcontents {
    clear: left;
    overflow-y: auto;
    overflow-x: hidden;
}
#listblock {
    padding-top: 15px;
    padding-right: 1%;
    position: fixed;
}
#detailblock {
    width: 74%;
    padding-top: 19px;
    padding-left: 24.7%;
    float: left;
}
#dashboardlist a,
#listcontents a,
#groupcontents a {
    display: block;
    padding: 8.61px 15px 8px 15px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    z-index: 1000;
}
#dashboardlist a:hover,
#listcontents a:hover,
#listcontents a.selected,
#groupcontents a:hover,
#groupcontents a.selected,
td.selected {
    text-decoration: none;
    background: #dedede;
}
.reporttable tr:hover td,
.selectableTable tr:hover td {
    background-color: #dedede;
}
#eventtable tr:hover td {
    background-color: #dedede;
    color: #505559;
}
#listcontents a img {
    height: 20px;
    position: absolute;
    z-index: 2000;
    display: none;
}
#listcontents a:hover img {
    display: inline;
    right: 10px;
}
#listcontents a i,
#groupcontents a i {
    display: none;
}
#listcontents a:hover i,
#groupcontents a:hover i {
    display: inline;
}
.cpicon {
    float: right;
    font-size: 1.15em;
    color: var(--text-color);
    background-color: var(--primary-color);
}
.detailtab a,
.dt-buttons a {
    border-radius: 3px 3px 0 0;
    margin: 0 2px 2px 0;
    padding: 7px 10px 2px 10px !important;
    color: var(--text-color);
    float: left;
    height: 22px;
    text-align: center;
    font-family: Roboto-Medium;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: unset;
    background: transparent !important;
}
#listblock .listtab a:hover,
.detailtab a:hover,
.dt-buttons a:hover {
    text-decoration: none !important;
}
.detailtab a:hover,
.dt-buttons a:hover,
.detailtab .selected,
.dt-buttons .selected {
    border-bottom: 2px solid var(--text-color) !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    color: var(--text-color);
}
#listsearch {
    clear: left;
    height: 24px;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
#listsearch input {
    margin: 0;
    padding: 4px 0 2px 15px;
    width: calc(100% - 15px);
    border: none;
    color: #a0a0a0;
}
#fullscreen {
    width: 100%;
    min-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0 0;
    margin: 0px auto;
}
#accessdetails,
#optionsdetails {
    display: none;
}
#detaillist {
    clear: left;
    min-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 10px;
}
p.layered,
#detaillist p.layered,
#fullscreen p.layered {
    border-top: 1px solid #e0e0e0;
    padding: 15px 0 20px 10px;
}
#detaillist p.layered label {
    width: 500px;
}
#detaillist p.layered,
#fullscreen p.layered {
    margin-top: 20px;
    width: 100%;
    font-size: 15px;
}
#fullscreen td p.layered {
    padding: 0;
}
#detaillist p,
#fullscreen p {
    clear: left;
    padding: 0 0 0px 10px;
    margin: 0;
    font-size: 13px;
}
#detaillist p.noborder {
    background: none;
}
#detaillist p.sliderp input,
#fullscreen p.sliderp input,
#detaillist p.sliderp select {
    display: inline-block;
    width: 10%;
}
#detaillist p.sliderp #DefaultLanguage {
    width: calc(10% + 10px);
}
#detaillist input:not([type="file"]):not([type="button"]):not([type="submit"]),
#detaillist select,
#fullscreen input:not([type="file"]):not([type="button"]):not([type="submit"]),
#fullscreen select,
#messagefg input:not([type="file"]):not([type="button"]):not([type="submit"]),
#messagefg select {
    border: none;
    border-bottom: 1px solid #767676;
    padding-left: 10px;
    margin: 0 0 1px;
}
#detaillist input:not([type="file"]):not([type="button"]):not([type="submit"]):disabled,
#fullscreen input:not([type="file"]):not([type="button"]):not([type="submit"]):disabled,
#messagefg input:not([type="file"]):not([type="button"]):not([type="submit"]):disabled,
input:not([readonly]) {
    color: #7f7f7f;
    border-bottom: 1px dashed #7f7f7f;
}
input[readonly] {
    color: #7f7f7f;
    border-bottom: 1px dashed #7f7f7f !important;
}
#detaillist input[type="button"],
#detaillist input[type="submit"],
#fullscreen input[type="button"],
#fullscreen input[type="submit"],
#messagefg input[type="button"],
#messagefg input[type="submit"] {
    border: none;
    outline: none;
    padding-left: 10px;
    margin: 0 5px 3px 0;
    background-color: var(--primary-color) !important;
}
#detaillist input,
#fullscreen input,
#messagefg input {
    height: 20px;
}
#detaillist input[type="checkbox"]:not([disabled]):hover,
#detaillist input[type="text"]:not([disabled]):hover,
#detaillist input[type="password"]:not([disabled]):hover,
#detaillist select:not([disabled]):hover,
#fullscreen input:not([type="button"]):not([type="submit"]):not([disabled]):hover,
#fullscreen select:not([disabled]):hover,
#messagefg input:not([type="button"]):not([type="submit"]):not([disabled]):hover,
#messagefg select:not([disabled]):hover {
    border-bottom: 1px solid var(--primary-color);
    outline: none;
}
#detaillist input[type="checkbox"]:focus,
#detaillist input[type="text"]:focus,
#detaillist input[type="password"]:focus,
#detaillist select:focus,
#fullscreen input:not([type="button"]):not([type="submit"]):not([type="radio"]):focus,
#fullscreen select:focus,
#messagefg input:focus,
#messagefg select:focus {
    box-shadow: inset 0 -1px 0 0 var(--primary-color);
    border-bottom: 1px solid var(--primary-color) !important;
    outline: none;
}
#messagefg input[type="checkbox"] {
    border: none;
    height: 15px;
    width: 15px;
}
#detaillist input.noborder,
#detaillist select.noborder {
    border: none;
    background-color: #f5f5f5;
}
#detaillist input {
    width: 35%;
}
#detaillist input.pinrand {
    width: 2em;
    border-bottom: none !important;
    margin: 0;
    padding: 0;
    min-width: 2em;
}
#fullscreen input[type="text"],
#fullscreen input[type="password"] {
    width: 300px;
}
#detaillist select {
    width: calc(35% + 10px);
}
#detaillist select.ninetypercent {
    width: 90%;
}
#detaillist select.scheduleOptionShortList {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#detaillist p.widelabel label {
    width: 280px;
}
#detaillist p.widelabel select {
    width: 360px;
}
#fullscreen select {
    width: 720px;
}
#fullscreen select.regular {
    width: 250px;
}
#fullscreen select.vnarrow,
#detaillist select.vnarrow {
    width: 100px;
}
#fullscreen select.narrow {
    width: 200px;
}
#fullscreen select.narrow2 {
    width: 175px;
}
#fullscreen table input.colsearch {
    width: 75px;
    color: var(--text-color);
}
#fullscreen table select.colsearch {
    width: 100px;
    color: var(--text-color);
}
#detaillist input.buttonreg {
    width: 100px;
}
#detaillist input.narrow,
#fullscreen input.narrow,
#messagefg input {
    width: auto;
    min-width: 75px;
}
#detaillist select.narrow {
    width: 15%;
    height: 23px;
}
#detaillist select.dsregular {
    width: 36.7%;
}
#detaillist input.autosize {
    width: 63px;
}
#detaillist p.widelabel.jump select {
    width: 345px;
}
#detaillist p.jump input[type="button"] {
    min-width: 30px;
    width: 30px;
    border: none;
    background-color: var(--primary-color);
}
#detaillist input.arrowbutton {
    width: 75px;
}
#detaillist input.arrowbutton:disabled {
    color: #c0c0c0;
}
#fullscreen input.vnarrow {
    width: 40px;
}
#detaillist input.regular,
#fullscreen input.regular,
#fullscreen input.wider {
    background: transparent !important;
}
#detaillist input.regular,
#fullscreen input.regular {
    width: 123px;
}
#detaillist input.wider,
#fullscreen input.wider {
    width: 225px;
}
#detaillist input.wide200 {
    width: 200px;
}
#fullscreen select.narrowmultiple {
    height: 85px;
    width: 150px;
    border: 1px solid #b2b3b5;
    background-color: #fff;
}
#detaillist input.rightbutton {
    min-width: 85px;
    margin-left: 170px;
}
#fullscreen #entrytable input,
#entrytable select,
#entrytable textarea {
    background: #fff;
}
#messagefg input {
    margin-right: 15px;
}
#detaillist select.autosize {
    width: auto;
}
#detaillist select.schedulewidth {
    width: 190px;
    background: transparent;
}
#detaillist input.datewidth,
#detaillist input.timewidth {
    width: 80px;
}
#detaillist input.datewidth:disabled,
#detaillist input.timewidth:disabled {
    background-color: transparent;
    color: #7f7f7f;
    border-bottom: 1px dashed #7f7f7f !important;
}
#detaillist input.timewidth {
    border: none;
}
#detaillist input.checkbox {
    width: 10px;
    margin: 0 20px 0 0;
    position: relative;
    top: 5px;
    border: none;
}
#detaillist input:focus,
#detaillist select:focus,
#fullscreen select:focus,
#fullscreen input:focus {
    background-color: transparent;
}
#detaillist input[type="submit"]:focus,
#detaillist input[type="button"]:focus,
#fullscreen input[type="submit"]:focus,
#fullscreen input[type="button"]:focus {
    background-color: var(--primary-color);
}
#detaillist p textarea {
    width: 420px;
    outline: none;
}
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
}
.upload-btn-wrapper input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}
.upload-btn-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    cursor: pointer;
}
.upload-btn-wrapper input[type="button"] {
    width: auto !important;
}
#detaillist #submit {
    width: 100px;
    height: 30px;
    border-radius: 5px;
    float: right;
    margin-top: 15px;
}
.IPtable {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-collapse: collapse;
    margin: 5px 0 15px 0;
}
.IPtable th {
    padding-left: 10px;
}
.IPtable td.txt {
    padding-left: 5px;
}
.IPtable td input {
    width: 100px !important;
}
#fullscreen td input:disabled {
    color: #7f7f7f;
    border-bottom: 1px dashed #7f7f7f !important;
    background-color: transparent;
}
#fullscreen #loadingmore {
    padding: 10px 0 20px 7px;
    background: none;
}
p.disabled,
p.checkboxp.disabled {
    color: #c0c0c0;
}
p.checkboxp.on:before {
    content: "\e";
}
#buttonlist input:disabled,
#alertcontainer input:disabled {
    color: #c0c0c0;
    opacity: 0.5;
}
#DatabaseId:disabled {
    background-color: transparent;
}
tr.odd {
    background-color: #f0f0f0;
}
td.disabled {
    color: #7f7f7f;
}
#policyform td.disabled {
    color: #7f7f7f;
}
form p a {
    margin-right: 10px;
}
form p img {
    position: relative;
    top: 4px;
}
table.userevents {
    width: 100%;
    font-size: 11px;
}
table.gxevents {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table.gxevents tr {
    border: 1px solid #c0c0c0;
    height: 2em;
}
table.gxevents td {
    font-size: 11px;
}
#fullscreen table.gxevents input.narrow,
#fullscreen table.gxevents input.narrower {
    padding: 0 0 0 5px;
    border: 1px solid #c0c0c0 !important;
    font-size: 11px;
    height: 15px;
}
#fullscreen table.gxevents input.narrower {
    width: 90px;
}
th.gxeventid,
th.gxeventfield,
th.gxeventlog {
    text-align: center;
}
th.gxeventid,
th.gxeventfield {
    width: 100px;
}
th.gxeventlog {
    width: 120px;
}
th.gxeventname {
    width: 150px;
}
th.gxeventdoor {
    width: 150px;
}
#detaillist p.noevents {
    padding: 25px 0 25px 5px;
}
.grouplist {
    margin-bottom: 10px;
    display: none;
}
#detaillist select.multipleaccess {
    width: 200px;
    height: 200px;
    border: 1px solid #b2b3b5;
}
.tablescroll {
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}
.selectableTable {
    width: auto;
    table-layout: fixed;
}
#UserTagExpiresTd {
    width: 70px;
}
#UserTagStartDateTd,
#UserTagExpiryDateTd {
    width: 240px;
}
#eventfg > div > div table.selectableTable {
    width: 595px;
}
.wideTable {
    width: 1000px;
}
.selectableTable tr,
.selectableTable td {
    padding-left: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.selectableTable tr.cursorauto td {
    cursor: auto;
}
.selectableTable tr.newmodule td {
    font-family: Roboto-Bold;
    font-weight: normal;
}
.selectableTable tr.newmodule td input {
    font-family: Roboto-Bold;
    font-weight: normal;
    padding-left: 3px;
}
#eventfg > div > div table.selectableTable td {
    font-weight: normal;
    font-size: 13px;
}
table.selectableTable tr.buttonrow {
    height: 25px;
}
#scheduleday p {
    background: none;
    padding: 2px;
    height: 22px;
}
#scheduleday div,
#scheduleday span {
    border: 1px solid #c0c0c0;
    height: 16px;
    width: 480px;
    float: left;
}
#iconsTable1 {
    position: relative;
    left: 152px;
    height: 22px;
    width: 482px;
}
#iconsTable1 td {
    border-left: 1px solid #c0c0c0;
    width: 4.1666%;
}
#lastColumn {
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
}
#iconsTable {
    text-align: center;
    position: relative;
    left: 121px;
    width: 545px;
}
#iconsTable td {
    width: 11%;
}
#iconsTable img {
    width: 30px;
    height: 30px;
}
#scheduleday .hourblock {
    border: none;
    width: 20px;
    float: left;
    background: #b2b3b5;
    position: absolute;
    z-index: 100;
    display: none;
    background: green;
}
#alertcontainer {
    display: none;
    z-index: 8000;
}
#alertbg,
#eventbg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: black;
    filter: alpha(opacity=50);
    opacity: 0.25;
}
#alertbg {
    z-index: 9000;
}
#eventbg {
    display: none;
    z-index: 9000;
}
#alertfg,
#messagefg,
#eventfg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
}
#alertfg {
    z-index: 11000;
}
#messagefg {
    z-index: 10000;
}
#eventfg {
    z-index: 9000;
}
#alertfg > div > div,
#messagefg > div > div,
#eventfg > div > div {
    width: 500px;
    min-height: 70px;
    background: #fff;
    position: fixed;
    top: 30%;
    left: calc(50% - 260px);
    margin-left: 10px;
    font-size: 15px;
    color: #505050;
    font-family: Roboto-Regular;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.2), -2px -2px 7px rgba(0, 0, 0, 0.2);
}
#messagefg > div > div {
    min-height: 110px;
    text-align: left;
    border-radius: 2px;
}
#eventfg > div > div {
    width: 600px;
    padding: 0 10px 0 0;
    top: 12%;
    text-align: left;
    min-height: 360px;
}
#messagefg > div > div.eventreport {
    width: 80%;
    position: fixed;
    top: 90px;
    left: 10%;
    margin-left: -15px;
    text-align: left;
    padding: 0;
}
#messagefg > div > div > div.reporttablecontainer {
    overflow: auto;
    max-height: 600px;
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
}
.reporttablecontainer .reporttablefull tr th {
    color: var(--text-color) !important;
    background-color: var(--secondary-color);
}
.reporttable,
.reporttablefull {
    width: 100%;
    background-color: #fff;
    color: #505559;
    font-weight: normal;
    padding-bottom: 10px;
}
.reporttable {
    font-size: 13px;
}
.reporttablefull {
    font-size: 13px;
}
img.cameraicon {
    padding: 0 2px 0 2px;
}
#messagefg > div > div p {
}
#messagefg > div > div p.selectp {
    padding-top: 60px;
}
#messagefg > div > div p.narrowtop {
    padding-top: 5px;
    clear: left;
}
#messagefg > div > div p.widebottom {
    padding: 0 0 15px 0;
    clear: left;
}
#messagefg > div > div p.nomarg {
    padding: 0px;
}
#messagefg > div > div p.redalert {
    font-size: 115%;
}
#messagefg > div > div span.userapprovetext p {
    padding-top: 10px;
}
#messagefg > div > div p.userapprovebuttons,
#eventfg > div > div p.userapprovebuttons {
    clear: both;
    margin: 30px 0 10px 0;
    padding: 0;
    text-align: right;
}
#messagefg > div > div label,
#eventfg > div > div label {
    width: 150px;
}
#messagefg > div > div input.regular {
    width: 320px;
}
#messagefg > div > div input.datewidth {
    width: 150px;
}
#messagefg > div > div input.timewidth {
    width: 50px;
}
#messagefg > div > div label.seclevel {
    width: 185px;
    vertical-align: top;
}
#messagefg > div > div p.mtop {
    position: absolute;
    margin-top: 80px;
}
#CSVImportform input {
    border: none;
}
#messagefg > div > div select {
    height: 186px;
    width: 300px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-top: 0px solid #909090;
    border-right: 0px solid #fff;
    border-left: 0px solid #909090;
}
#messagefg > div > div option {
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0 10px 0;
}
#messagefg > div > div select:hover,
#messagefg > div > div input:hover,
#eventfg > div > div select:hover,
#eventfg > div > div input:hover {
}
#messagefg > div > div select:focus,
#messagefg > div > div input:focus,
#eventfg > div > div select:focus,
#eventfg > div > div input:focus {
    outline: none;
}
#messagefg > div > div select.multiplesel {
    float: left;
}
#messagefg > div > div select.fullwidth {
    width: 485px;
}
#messagefg > div > div select.narrow,
#messagefg > div > div select.vnarrow {
    height: auto;
}
#messagefg > div > div select.vnarrow {
    width: 50px;
    float: none;
    margin: 0;
    border: none;
}
#messagefg > div > div input.narrow {
    width: 290px;
    background: transparent;
    border-top: 0px solid #909090;
    border-right: 0px solid #fff;
    border-bottom: 1px solid #000;
    border-left: 0px solid #909090;
    color: black;
    padding: 0 3px;
}
#messagefg > div > div p.rgb {
    padding: 0 !important;
}
#messagefg > div > div p.rgb label {
    width: 75px;
}
#messagefg > div > div p.rgb input {
    width: 30px;
    min-width: 30px;
    font-size: 11px;
    height: 16px;
}
#messagefg > div > div p input.csvnarrow,
#messagefg > div > div p select.csvnarrow {
    min-width: 40px;
    height: auto;
    background-color: #fff;
}
#messagefg > div > div p input.csvnarrow {
    width: 40px;
}
#messagefg > div > div p select.csvnarrow {
    width: 50px;
}
#messagefg > div > div p textarea.csvdisplay {
    width: 500px;
    height: 100px;
}
#alertfg #alerttitle {
    color: darkred;
    margin-right: 5px;
}
#calendarheading {
    width: 600px;
    float: left;
    padding-left: 10px;
    background: var(--primary-color);
    color: var(--text-color);
    border-radius: 2px 2px 0 0;
}
#popdetails {
    padding: 0 0 0 10px;
    position: relative;
    top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
}
#popdetails select {
    width: 480px !important;
}
#popheading {
    width: 490px;
    float: left;
    padding-left: 10px;
    background: var(--primary-color);
    color: var(--text-color);
    border-radius: 2px 2px 0 0;
}
#calendarheading h1 {
    float: left;
    width: 400px;
    text-align: left;
}
#popheading h1 {
    float: left;
    width: 480px;
    text-align: left;
}
#eventfg #detaillist p {
    width: 595px;
    background: none;
    font-weight: normal;
}
#eventfg #buttonbar ul li {
    float: right;
    margin-top: 2px;
}
#eventfg #detaillist p.layered {
    width: 585px;
    background: #d5d5d5;
    padding-top: 5px;
    font-family: Roboto-Regular;
}
#eventfg #detaillist p input,
#eventfg #detaillist p select {
    background: transparent;
    border-bottom: 1px solid #c0c0c0;
}
#eventfg #detaillist p input.highlight {
    background-color: var(--secondary-color);
}
#eventfg #detaillist p input {
    width: 423px;
}
#eventfg #detaillist p select {
    width: 434px;
}
#eventfg #detaillist select.schedulewidth {
    width: 160px;
}
#eventfg #detaillist p input.hasDatepicker {
    width: 125px;
}
#eventfg #detaillist p input.hasTimeEntry {
    min-width: initial;
    width: 125px;
    margin-left: 10px;
}
#eventfg #detaillist input.inlinefield,
#detaillist select.inlinefield {
    margin: 0 0 0 10px;
}
#eventfg #detaillist input.noleft {
    margin-left: 0;
}
#eventfg #detaillist input.inlinefield {
    width: 30px;
}
#eventfg #detaillist select.inlinefield {
    width: auto;
}
.loading-placeholder {
    display: block;
    border-radius: 5px;
    margin: 10% 0 0 42%;
    padding: 10px;
    background-color: #fff;
}
.pleasewait {
    height: 64px;
    float: right;
    margin-right: 20px;
    border-radius: 5px;
}
.rssi {
    margin-top: 70px;
}
#msgbox {
    width: 500px;
    height: 55px;
    border: 2px solid white;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    color: white;
    font-family: Roboto-Bold;
    box-shadow: 2px 2px 5px #888;
    padding-top: 40px;
    margin-top: 75px;
}
#msgbox p {
    background: none;
}
span#progresscontainer {
    height: 15px;
    width: 380px;
    border: 1px solid #c0c0c0;
    float: left;
    margin: 10px;
}
span#progressbar {
    height: 15px;
    float: left;
    background: url(../images/menu-tab-background.jpg) repeat-x;
    background-position: 0 -7px;
    width: 0;
}
#processingdetail {
    margin: 10px;
}
input[type="button"],
input[type="submit"],
#eventfg #detaillist p input[type="button"] {
    width: auto;
    min-width: 75px;
    height: 24px !important;
    color: var(--text-color);
    background-color: var(--primary-color);
    padding: 0 12px 0px 12px;
    border-radius: 3px;
    outline: none;
    font-family: Roboto-Medium;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
#eventfg #detaillist p input[type="button"]:disabled,
.button-disabled,
a.disabled {
    opacity: 0.5;
    pointer-events: none;
}
input[type="button"]:hover,
input[type="submit"]:hover {
    cursor: pointer;
    border-bottom: 1px solid var(--primary-color);
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
.raised {
    position: relative;
    top: -5px;
    margin-left: 5px;
}
#graphicviewtable {
    width: 800px;
    font-size: 11px;
    margin-top: 15px;
}
#graphicviewtable th.au {
    width: 80px;
    text-align: center;
}
#graphicviewtable tr {
    height: 21px;
}
#graphicviewtable tr#hrow th {
}
#graphicviewtable td {
    position: relative;
}
#graphicviewtable td.odd {
    background: url(../images/graphicview-background.png);
}
#graphicviewtable td.even {
    background: #efefef url(../images/graphicview-background.png);
}
#graphicviewtable td.odd,
#graphicviewtable td.even {
    background-size: 100%;
}
#graphicviewtable td span {
    background-color: green;
    display: block;
    position: absolute;
    top: 0;
    height: 20px;
}
#cpcontainer {
    display: none;
    z-index: 4000;
}
#cpbg {
    position: fixed;
    z-index: 4500;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.cpfg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5000;
}
.doorcp {
    width: auto;
    height: auto;
}
.cpfg > div {
    width: 355px;
    background: #fff;
    position: fixed;
    top: 25%;
    left: 42%;
    border-radius: 3px;
    text-align: center;
    font-size: 13px;
    box-shadow: 2px 2px 7px rgba(00, 00, 00, 0.2), -2px -2px 7px rgba(0, 0, 0, 0.2);
    padding: 0;
}
.cpfg div div {
    padding: 5px 10px;
}
.paddingzero {
    padding: 0 !important;
}
.cpfg div div.cpsingle,
.cpfg div div.cpdouble {
    display: flex;
    flex-flow: wrap;
}
.cpfg div div.cpdouble input {
    width: 100px;
    max-width: 100px;
    text-align: center;
    color: #606060;
    margin-top: 2px;
    height: 17px;
}
.cpfg div div.cptitle {
    border-radius: 3px 3px 0 0;
    background-color: var(--secondary-color);
    text-align: left;
    cursor: move;
    color: var(--text-color);
    height: 2.2em;
    line-height: 2.2em;
    vertical-align: middle;
    box-shadow: 0 0, inset 0 -1px 2px rgba(0, 0, 0, 0.5);
    margin: 0 0 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cpfg div div.cptitle a {
    float: right;
}
.cpfg div div.cptitle a:hover {
    text-decoration: none;
}
.cpfg div div.cpheading {
    clear: both;
    margin: 10px 0 2px 0;
    background-color: var(--primary-color);
    text-align: center;
    color: var(--text-color);
}
.cpfg div span {
    width: 49%;
    margin: 0 1px 5px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--primary-color);
    border-radius: 3px;
    box-shadow: 0 1px 1px #636363;
}
.cpfg div span:hover {
    text-decoration: none;
    box-shadow: 0 1px 4px #636363;
}
.cpfg div span.cpfull {
    width: 100%;
}
.cpfg div div.cpdouble div.timerdiv span {
    width: 49%;
    background: none;
    cursor: default;
    margin: 0;
}
#ColourGroupName {
    margin-top: 3px;
}
p.rgb label {
    margin-top: 2px;
    font-weight: normal !important;
}
#FOCColour,
#BOCColour {
    height: 20px;
    width: 325px;
    border: 1px solid #e0e0e0;
    float: left;
}
#SwatchList {
    padding: 0 !important;
    width: 140px;
    height: 140px;
    float: left;
    margin-right: 100px;
}
.swatch {
    height: 20px;
    width: 20px;
    float: left;
    margin: 0 5px 5px 0;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    box-shadow: 2px 2px 5px #c0c0c0;
}
#curCol {
    float: right;
    width: 100px;
    margin-right: 15px;
    height: 80px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #c0c0c0;
}
#cameralens,
img.photothumb {
    height: 320px;
    width: 240px;
    margin: 10px 0 20px 0;
    padding: 2px;
    border-radius: 5px;
    border: 2px solid white;
}
img.photothumb {
    float: left;
    margin-right: 50px;
}
#ImageCamera {
    float: left;
}
#detaillist form {
    margin-bottom: 10px;
}
label {
    display: inline-block;
    width: 25%;
    margin-top: 5px;
}
#fullscreen p label {
    width: 220px;
}
#scheduleday p label {
    width: 150px;
    float: left;
}
p label.wide {
    width: 230px;
}
optgroup {
    margin-top: 15px;
}
#reportform {
    margin-bottom: 20px;
}
#Licenseform input,
#Photoform input[type="submit"] {
    width: 150px;
}
#Licenseform input[type="file"],
#Photoform input[type="file"] {
    width: auto;
    height: 30px;
}
#detaillist input[type="file"],
Qsettingsform {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.dashboarddetaill,
.dashboarddetailr {
    min-height: 250px;
    max-height: 400px;
    width: 20%;
    float: left;
    padding: 10px 20px 20px 20px;
}
.dashboarddetaill {
    background-position: 0px 60px;
    background-repeat: repeat-x;
}
.dashboarddetailr {
    background-position: top left, 0px 60px;
    background-repeat: no-repeat, repeat-x;
}
#fullscreen .dashboarddetaill p,
#fullscreen .dashboarddetailr p {
    background: none;
    font-size: 11px;
}
#fullhealthdisplay,
#fullhealthreflection {
    margin-left: 25px;
}
.displaybg,
.displayfg,
.displaymemory,
.reflectionfg {
    position: absolute;
}
.displayfg {
    margin: 12px 0 0 10px;
}
.displaymemory div {
    float: left;
    height: 50px;
    width: 0;
    box-shadow: inset 0 2px 2px #a7a6a7;
}
#memorykey,
#healthstatus,
#controllerstatus {
    font-size: 11px;
    position: relative;
    min-height: 200px;
    max-height: 300px;
    overflow: auto;
}
#healthstatus,
#controllerstatus {
    margin-top: 16px;
}
#healthstatus p,
#controllerstatus p {
    margin: 0;
    padding: 3px 0 3px 0;
    border-bottom: 1px solid #e0e0e0;
    width: 175px;
}
#controllerstatus input.wizardlink {
    margin-top: 30px;
}
#memorykey div {
    margin: 2px 0 0 0;
    padding: 0;
}
#memorykey > div > div {
    height: 10px;
    width: 10px;
    float: left;
    margin: 2px 10px 0 0;
}
div.reflection {
    width: 102px;
    height: 50px;
    position: relative;
    top: 50px;
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: alpha(opacity=30);
    opacity: 0.2;
}
#memoryreflection .displaymemory div {
    filter: alpha(opacity=20);
}
.reflectionfg {
    width: 102px;
    height: 50px;
}
.sigon,
.sigoff {
    width: 20px;
    float: left;
    margin-right: 7px;
    border-radius: 7px;
}
.sigon {
    background: -webkit-linear-gradient(bottom right, #0c6428, white);
    background: -o-linear-gradient(top left, #0c6428, white);
    background: -moz-linear-gradient(top left, #0c6428, white);
    background: linear-gradient(to top left, #0c9928, white);
    border: 1px solid green;
}
.sigoff {
    background: -webkit-linear-gradient(bottom right, #494949, white);
    background: -o-linear-gradient(top left, #494949, white);
    background: -moz-linear-gradient(top left, #494949, white);
    background: linear-gradient(to top left, #494949, white);
    border: 1px solid #909090;
}
#fullscreen .padded,
#generaldetails .padded {
    margin: 10px 0 20px 0;
}
#fullscreen .paddedtxt,
#detailblock .paddedtxt {
    margin: 15px 0 15px 0;
    background: none;
    font-family: Roboto-Regular;
    font-weight: 400;
}
#detaillist p.sectiontxt {
    padding: 10px 0 15px 0;
}
#fullscreen select.tiny {
    font-size: 11px;
    width: 50px;
}
tr.even {
    background-color: #f7f7f7;
}
tr.accessgrant {
    background-color: #90ff90;
}
tr.accessdeny {
    background-color: #ff9090;
}
tr.accessgrant,
tr.accessdeny {
    color: #909090;
}
#notfound h1 {
    color: #606060;
}
#notfound p {
    color: #707070;
    margin: 5px 5px 0 0;
}
#notfound img {
    float: right;
    margin-top: 10px;
    height: 40px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
#dhcpoptions label {
    width: 200px !important;
    margin-left: 20px;
}
span.required {
    height: 10px;
    color: var(--secondary-color);
    font-size: 21px;
    padding-left: 10px;
}
label span.required {
    padding-right: 10px;
    float: right;
}
#eventdetails,
#userdetails {
    overflow: auto;
    padding-left: 7px;
	height:90% !important;
}
#buttonlist {
    margin-top: 10px;
    text-align: right;
}
#buttonlist input {
    margin-left: 25px;
    width: 100px;
}
#detaillist input.highlight,
#detaillist select.highlight,
#fullscreen select.highlight,
#fullscreen input.highlight,
#fullscreen #entrytable input.highlight,
#messagefg select.highlight,
#messagefg input.highlight {
    background-color: rgb(204, 178, 178) !important;
    color: #8b0000 !important;
}
#ServiceTypeContainer {
    line-height: 25px;
}
.ServerOption,
.ControllerOption,
.WXpert,
.WXAutomation,
.WXCredential {
    display: none !important;
}
.disclaimer {
    color: orangered;
    margin-top: 15px;
}
#RecordHistory {
    display: none;
}
table#recordhistorytable {
    width: 100%;
    margin-top: 15px;
}
table#recordhistorytable td {
    font-weight: normal;
    font-size: 13px;
}
#ControllerRegistered.highlight {
    font-size: large;
    font-family: Roboto-Bold;
    padding: 3px 0 2px 0;
    width: 200px;
    white-space: nowrap;
}
#Registered.highlight {
}
#exporteventalert {
    float: left;
    color: var(--secondary-color);
    font-size: 13px;
    margin-bottom: 5px;
}
.scrollable {
    overflow: auto;
    overflow-y: hidden;
    padding-bottom: 50px;
}
#licenseupdatedetails p {
    width: 980px;
}
.inset {
    margin: 0 0 0 20px;
}
.easyread {
    color: var(--secondary-color);
    background: none;
    font-size: 15px;
    margin: 0;
}
.addspace {
    margin: 20px 0 0 0;
    padding-left: 10%;
    width: 80%;
}
.camerafeedcontainer {
    height: 245px;
    min-width: 325px;
    float: right;
    margin: 0;
    padding: 0 !important;
}
.camerapreviewcontainer {
    height: 245px;
    min-width: 325px;
    margin: 15px 0 0 0;
}
.camerafeed {
    height: 245px;
    min-width: 325px;
    border-radius: 5px;
    border: 2px solid white;
    box-shadow: 5px 5px 10px #c0c0c0;
}
.pinrand {
    padding: 4px 8px 4px 8px;
    margin: 0;
    border-radius: 3px;
    color: var(--text-color);
    background-color: var(--primary-color);
    box-shadow: 0 1px 1px #636363;
}
.pinrand:hover,
.pinrand:focus {
    text-decoration: none;
    box-shadow: 0 1px 4px #636363;
}
#signalcontainer {
    background-color: green;
}
#signalImg {
    width: 160px;
    height: 70px;
    float: right;
    position: relative;
    top: -45px;
}
#signalImg img {
    position: relative;
    top: -30px;
    margin-left: 25px;
}
.statustable {
    width: 100% !important;
    overflow: hidden;
    padding-left: 7px;
}
.statustable tr td {
    white-space: nowrap;
    overflow: hidden;
}
.statustable > tbody > tr > td {
    border: 1px solid #000;
}
.statustable td div.cell1 {
    height: 300px;
	width:100%;
}
.statustable td div.cell2 {
    height: 595px;
	width:100%;
}
.statustable td div.cell3 {
    height: 910px;
	width:100%;
}
.statustable td div.cell1,
.statustable td div.cell2,
.statustable td div.cell3 {
    font-size: 11px;
    overflow: scroll;
    margin-bottom: 5px;
}
.statustable td div.fullheightcell {
    height: auto;
    max-height: auto;
    font-size: 11px;
    overflow-x: auto;
    margin-bottom: 5px;
}
.statustable td div table td {
    padding-right: 10px;
}
.statustable td div table.innertable {
    width: 1200px;
}
.statustable td div table.alarmtable tr,
.statustable td div table.alarmtable td {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
#historydetails .reporttable tr {
    cursor: pointer;
}
#historydetails .reporttable tr#hrow {
    cursor: default;
}
#servicestatuslist table {
    width: 100%;
}
#fullscreen input.forceupdate {
    float: right;
    margin:10px;
    font-size: 11px;
    min-width: auto;
    padding: 0 8px;
    height: 18px;
}
#messagefg > div > div.dvrview {
    height: 710px;
    width: 860px;
    position: fixed;
    top: 80px;
    left: 50%;
    text-align: left;
    padding: 0 10px 20px 10px;
    margin: 0 0 0 -430px;
}
iframe.camview {
    margin: 0 0 10px 0;
    height: 660px;
    width: 850px;
    overflow: hidden;
    display: block;
    border: none;
}
#newcardlist {
    width: 500px;
}
#newcardlist td {
    font-weight: normal;
}
img.addCardIcon {
    height: 12px;
    margin-left: 5px;
}
#csvtable {
    width: 100%;
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 11px;
    font-family: monospace;
}
#csvtable td {
    font-weight: normal;
}
#messagefg > div > div select#csvcolselect {
    width: 150px;
}
#messagefg > div > div select#csvmapselect {
    width: 320px;
}
#messagefg > div > div select#csvcolselect,
#messagefg > div > div select#csvmapselect {
    height: 100px;
}
#fullscreen p#dategeneratedtext {
    font-size: 11px;
    text-align: right;
    margin-top: 10px;
    background: none;
}
tr.attusertotal {
    background-color: #e7e7e7;
    line-height: 21px;
}
tr.attusertotal td {
    font-size: 13px;
    font-family: Roboto-Bold;
    color: #707070;
}
#KeypadUpdateOptions input[type="radio"] {
    position: relative;
    top: 4px;
    margin-right: 5px;
}
#addresscheckboxlist div {
    width: 65px;
    display: inline-block;
    padding-right: 15px;
}
#addresscheckboxlist input {
    width: 15px;
    min-width: 15px;
    float: right;
}
.multiselect,
#detaillist select.multiselect {
    box-shadow: 0px 1px 2px 1px var(--primary-color) !important;
}
#timeperiods {
    max-width: 1000px;
}
select:focus,
input:focus {
    outline: none;
}
#ToggleDisplayTheme {
    position: relative;
    top: 8px;
    margin: 0 5px;
}
.borderLTR,
.borderLR,
.borderLRB {
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
}
.borderLTR {
    border-top: 1px solid #c0c0c0;
    min-width: 27px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.borderLRB {
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
span.clockButton:hover {
    color: var(--primary-color);
    font-family: Roboto-Bold;
}
.numberUp:after:hover,
.numberUp:after:focus {
    text-decoration: none;
    box-shadow: 2px 2px 7px #636363;
}
.numberUp:after,
.numberDown:before {
    position: absolute;
    height: 12px;
    font-size: 19px;
    line-height: 12px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-family: MaterialIcons-Regular;
    border-radius: 3px;
    overflow: hidden;
}
.numberUp:after {
    content: "\e5ce";
}
.numberDown:before {
    content: "\e5cf";
}
.numberUp {
    position: relative;
    top: 1px;
    left: 5px;
    height: 1.5em;
    display: inline-block;
}
.numberDown {
    position: relative;
    top: 1px;
    height: 0.5em;
    left: -5px;
    display: inline-block;
    padding-right: 5px;
}
.timeEntry_wrap_div {
    min-width: 100px;
    display: inline;
}
#listtab:before {
    content: "\e896";
}
#grouptab:before {
    content: "\e16d";
}
#alink:before {
    content: "\e146";
}
#cancellink:before {
    content: "\e5c9";
}
#clink:before {
    content: "\e14d";
}
#CSVilink:before {
    content: "\e0b5";
}
#CSVlink:before {
    content: "\e0b2";
}
#dlink:before {
    content: "\e92b";
}
#flink:before {
    content: "\e880";
}
#PDFlink:before {
    content: "\e0b2";
}
#plink:before {
    content: "\e8ad";
}
#rlink:before {
    content: "\e5d5";
}
#rplink:before {
    content: "\e0b2";
}
#rslink:before {
    content: "\e863";
}
#slink:before {
    content: "\e161";
}
#sllink:before {
    content: "\eaee";
}
#vlink:before {
    content: "\e880";
}
#buttonbar a {
    display: block;
    min-width: 50px;
    height: 40px;
    padding: 8px 2px 0 2px;
    text-align: center;
    color: var(--text-color);
    font-size: 25px;
    background-color: transparent;
    font-family: MaterialIcons-Regular;
}
#buttonbar a.disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}
#oplang select {
    height: 40px;
    width: 451px;
    text-align: left;
    color: #333333 !important;
    background-color: #fff !important;
    padding: 0 12px 2px 12px;
    border: 1px solid #cbcbcb !important;
    border-radius: 3px;
    outline: none;
    margin-bottom: 20px;
    font-size: 18px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: Roboto-Bold;
    font-weight: normal;
    background: var(--primary-color);
    color: var(--text-color);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    font-family: Roboto-Bold;
    font-weight: normal;
    background: var(--primary-color);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-color);
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
#loginform .inputcontainer,
#signupform .inputcontainer {
    float: left;
}
#loginform .usernamecontainer input,
#loginform .passwordcontainer input,
#signupform .usernamecontainer input,
#signupform .passwordcontainer input {
    font-size: 18px;
    height: 46px;
    border: none;
    background-color: transparent;
    padding-left: 8px;
    color: #505050;
    outline: none;
    position: relative;
    top: 1px;
    left: 1px;
}
#product-logo {
    margin-bottom: 40px;
}
#company-logo {
    margin-top: 100px;
    width: 220px;
}
#logincontainer {
    height: 100%;
    width: 80%;
    min-width: 1000px;
    text-align: left;
    color: #fff;
}
#loginheadertop {
    height: 44px;
    text-align: right;
    display: flex;
    justify-content: space-between;
}
#loginform,
#signupform {
    position: relative;
    top: 35%;
}
#gxloginr {
    height: 185px;
	width:100%;
    background: url(../images/gxcore-logo.png) no-repeat;
    background-position: bottom 35px center;
    background-size: 60%;
    text-align: right;
    color: #fff;
}
.logincontainer {
    height: 90% !important;
    width: 100% !important;
    min-width: 800px !important;
}
.loginbody {
    height: 95%;
    margin: 8px;
}
.loginbackground {
    height: 100%;
    margin: 0;
}
.loginsubmit {
    border: none;
    text-align: left;
    outline: none;
    margin: 21px 0 15px 0;
    color: white;
    height: 37px;
    width: 318px;
    font-size: 18px;
    background-color: var(--primary-color-default);
    padding: 0 12px 0px 12px;
    border-radius: 3px;
    outline: none;
    font-family: Roboto-Medium;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
.loginsubmit:hover {
    cursor: pointer;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.55), 0px 2px 1px 0px rgba(0, 0, 0, 0.54), 0px 2px 3px -1px rgba(0, 0, 0, 0.82);
}
#logincontainer #headertime {
    color: #d50444;
    float: right;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}
#loginform input[type="text"],
#loginform input[type="password"],
#signupform input[type="text"],
#signupform input[type="password"] {
    border: none;
    border-bottom: 1px solid #767676;
}
#loginform input[type="text"]:hover,
#loginform input[type="password"]:hover,
#signupform input[type="text"]:hover,
#signupform input[type="password"]:hover {
    border-bottom: 1px solid var(--primary-color-default);
    outline: none;
}
.msg-danger {
    background: #fceae7;
    color: #dc0a0a;
    margin: 5px 0;
    line-height: 25px;
    text-indent: 15px;
    text-align: left;
}
.loginInputs {
    width: 308px;
    color: #767676;
}
#loginpage {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 20%;
}
#loginpagerightbox {
    background-image: url(/images/ict-wx.png);
    background-repeat: no-repeat;
    background-position: top right;
    width: 480px;
    height: 210px;
}
#loginheadertop {
    height: 44px;
    text-align: right;
}
#loginheaderbar {
    display: flex;
    justify-content: flex-end;
}
#loginheaderbar #sitenameleft,
#loginheaderbar #headertime {
    color: #767676;
    float: right;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}
.dark #listcontents a,
.dark input:not([disabled]):not([type="button"]):not([type="submit"]),
.dark input:not([disabled]):not([type="button"]):not([type="submit"]):focus,
.dark select:not([disabled]),
.dark .reporttable {
    color: #ffffff !important;
    background-color: #303030 !important;
}
.dark #listcontents a,
.dark .reporttable,
.dark option,
.dark .mdtp__clock_holder,
.dark .mddtp-picker .mddtp-picker__body,
.dark table.dataTable tbody tr {
    background-color: #303030 !important;
}
.dark optgroup {
    background-color: #333333;
}
.dark tr.odd,
.dark table.dataTable tbody tr.odd {
    background-color: #2a2a2a !important;
}
.dark #dashboardlist a:hover,
.dark #listcontents a:hover,
.dark #groupcontents a:hover {
    background: #494949 !important;
}
.dark #listcontents a.selected,
.dark #groupcontents a.selected,
.dark td.selected {
    background: #757575 !important;
}
.dark #fullscreen td input:disabled {
    background-color: transparent !important;
}
.dark #detaillist input.datewidth:disabled,
.dark #detaillist input.timewidth:disabled {
    background-color: transparent !important;
}
.dark #detaillist p textarea {
    color: #ffffff;
    background-color: #303030;
}
.dark .statustable > tbody > tr > td {
    border: 1px solid #fff;
}
.dark ::-webkit-scrollbar-track {
    background: #303030;
}
.dark ::-webkit-scrollbar-thumb {
    background: #757575;
}
.dark ::-webkit-scrollbar-button {
    background: #757575;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #494949;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #494949;
}
.dark ::-webkit-scrollbar-button:vertical:start:decrement {
    background: url("../images/arrow_up_dark.png") no-repeat center;
    background-color: #757575;
}
.dark ::-webkit-scrollbar-button:vertical:end:increment {
    background: url("../images/arrow_down_dark.png") no-repeat center;
    background-color: #757575;
}
.dark ::-webkit-scrollbar-button:horizontal:end:increment {
    background: url("../images/arrow_right_dark.png") no-repeat center;
    background-color: #757575;
}
.dark ::-webkit-scrollbar-button:horizontal:start:decrement {
    background: url("../images/arrow_left_dark.png") no-repeat center;
    background-color: #757575;
}
.dark ::-webkit-scrollbar-corner {
    background-color: #303030;
}
.dark input[type="button"],
.dark input[type="submit"],
body.dark::-webkit-file-upload-button,
.dark .cpfg div span {
    box-shadow: 0px 1px 1px #191919 !important;
}
.dark input[type="button"]:hover,
.dark input[type="submit"]:hover,
.dark .cpfg div span:hover {
    box-shadow: 0px 1px 4px #191919 !important;
}
body.dark::-webkit-file-upload-button:hover {
    box-shadow: 0px 1px 4px #191919 !important;
}
.dark .pinrand,
.dark .cpfg div span {
    box-shadow: 0px 1px 1px #191919;
}
.dark .pinrand:hover,
.dark .pinrand:focus,
.dark .cpfg div span:hover {
    box-shadow: 0px 1px 4px #191919;
}
.dark .fc-widget-header,
.dark .fc-today {
    color: #505559 !important;
}
.dark .mdtp__hour_holder,
.dark .mdtp__minute_holder {
    color: #505559;
}
.dark tr.even {
    background-color: #494949;
}
.dark #messagefg > div > div {
    color: #ffffff !important;
    background-color: #303030 !important;
}
.dark .cpfg > div {
    color: #ffffff !important;
    background-color: #303030 !important;
}
.dark #eventfg > div > div {
    color: #ffffff !important;
    background-color: #303030 !important;
}
.dark #eventfg #detaillist p.layered {
    color: #ffffff !important;
    background-color: #4c4c4c !important;
}
.dark p.layered,
.dark #detaillist p.layered,
.dark #fullscreen p.layered {
    border-top: 1px solid #494949;
}
.dark #detaillist input:not([type="file"]):not([type="button"]):not([type="submit"]),
.dark #detaillist select,
.dark #fullscreen input,
.dark #fullscreen select,
.dark #messagefg input {
}
.dark #dashboardlist a,
.dark #listcontents a,
.dark #groupcontents a,
.dark #listsearch {
    border-bottom: 1px solid #494949;
}
.dark #listsearch {
    border-left: 1px solid #494949;
}
.dark .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month,
.dark .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span,
.dark .mddtp-button,
.dark .mddtp-picker__th,
.dark .mddtp-picker__years li {
    color: #fff !important;
}
.dark .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__th span {
    color: #fff !important;
}
.dark .mddtp-picker__years .mddtp-picker__li--current {
    color: var(--primary-color) !important;
}
.dark table.dataTable tbody tr:hover {
    background-color: #383838 !important;
}
.dark table.dataTable.row-border tbody th,
.dark table.dataTable.row-border tbody td,
.dark table.dataTable.display tbody th,
.dark table.dataTable.display tbody td {
    border-top: 1px solid #494949;
}
.dark table.dataTable tbody tr:hover .sorting_1 {
    background-color: #383838 !important;
}
.dark .sorting_1 {
    background-color: #2b2b2b !important;
    color: #fff;
}
.dark tr.odd > .sorting_1 {
    background-color: #222222 !important;
}
.dark .reporttable tr:hover td,
.dark .selectableTable tr:hover td,
.dark #eventtable tr:hover td {
    background-color: #595959 !important;
    color: #fff !important;
}
.dark .inputcontainer input#uname,
.dark .inputcontainer input#pswd {
    color: #fff !important;
}
.dark .mdtp__hour_holder,
.dark .mdtp__minute_holder {
    color: black;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #fff !important;
}
.dark input:not(#uname):not(#pswd) {
    caret-color: #fff;
}
.dark input:not(#uname):not(#pswd):-webkit-autofill,
.dark input:not(#uname):not(#pswd):focus:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 100px rgb(48, 48, 48) inset;
}
.dark ::-moz-selection {
    background-color: rgba(117, 117, 117, 0.5);
}
.dark ::selection {
    background-color: rgba(117, 117, 117, 0.5);
}
.dark input[type="button"],
input[type="submit"],
#eventfg #detaillist p input[type="button"] {
    width: auto;
    min-width: 75px;
    height: 24px !important;
    color: var(--text-color);
    background-color: var(--primary-color) !important;
    padding: 0 12px 0px 12px;
    border-radius: 3px;
    outline: none;
    font-family: Roboto-Medium;
    transition: box-shadow 0.35s;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.24), 0px 2px 1px -1px rgba(0, 0, 0, 0.22);
}
.dark #healthstatus p,
.dark #controllerstatus p {
    border-bottom: 1px solid #494949;
}
dark p.layered,
dark #detaillist p.layered,
dark #fullscreen p.layered {
    border-top: 1px solid #494949;
}
.linear-wipe {
    text-align: center;
    background: linear-gradient(to right, var(--text-color) 0%, var(--wipe-color) 15%, var(--wipe-color) 20%, var(--text-color) 35%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
}
@keyframes shine {
    from {
        background-position: 200% center;
    }
}