:root {
  --secondary-color-default: #D50A44;
  --secondary-hover-color-default: #DA2A5C;
  --primary-color-default: #971039;
  --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
}

#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 { /* Hides the radio buttons */
  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: 24px;
  height: 82px;
  left: 0;
  width: 100%;
  z-index: 9000;
  min-width: 1300px;
}

#headerbar {
  font-family: Roboto-Medium;
  font-size: 14px;
  vertical-align: top;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  background-color: var(--secondary-color);
  z-index: 10001;
  min-width: 1300px;
}

.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;
}
/* fix for Mobile style */
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 {
  color: var(--text-color);
  padding: 7px 10px 5px;
  float: right;
}

.helplink:hover {
   background-color: var(--secondary-hover-color);
   cursor: pointer;
}

.caption {
  font-family: Roboto-Bold;
}

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

/* Handle */
::-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);
}
/*
::-ms-browse {
  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: 1px 1px 5px #636363;
  border: 2px solid var(--primary-color);
}
  */
br {
  font-family: initial !important; /* Fix error on Edge (br render a Latin space character) */
}

@font-face {
  font-family: "MaterialIcons-Regular";
  src: url("../images/fonts/MaterialIcons-Regular.woff2") format("woff2"), /* Modern Browsers */
  url("../images/fonts/MaterialIcons-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("../images/fonts/Roboto-Bold.woff2") format("woff2"), /* Modern Browsers */
  url("../images/fonts/Roboto-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("../images/fonts/Roboto-Medium.woff2") format("woff2"), /* Modern Browsers */
  url("../images/fonts/Roboto-Medium.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("../images/fonts/Roboto-Regular.woff2") format("woff2"), /* Modern Browsers */
  url("../images/fonts/Roboto-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  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"; /* icons for Edge and IE */
}

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

li .tiptext, .sliderp .tiptext {
  visibility: hidden;
  min-width: 50px;
  background-color: #757575;
  color: var(--text-color);
  text-align: center;
  border-radius: 2px;
  padding: 4px 2px;
  font-family: Roboto-Regular;
  font-weight: normal;
  font-size: 13px;
}

li .tiptext {
  position: fixed;
  /*top: 3px;*/
  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;
  /*color: #505559;*/
  display: none;
  margin: 0;
  /*height:100% */
}

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

.dark a:hover, a:hover {
  cursor: pointer;
}

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: 100%;
  text-align: left;
  margin: 92px 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 {
  height: 15px;
  padding-top: 3px;
}

#headerbar a.arrowlogo {
  display: none;
}

  #headertime.findreminder {
    color: var(--text-color);
  }

#gxloginl, #gxloginr {
  width: 380px;
  float: left;
}

#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 50px;
  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: 310px;
  display: none;
  font-family: Roboto-Bold;
  font-size: 21px;
  text-align: left;
}

#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: 71px;
  padding-left: 15px;
  color: var(--text-color) !important;
  /*background-color: #971039 !important;*/
  z-index: 9000;
  min-width: 1300px;
}

#calendarheading .detailtab {
  float: left;
}

#buttonbar {
  float: right;
}

  #buttonbar option {
    background-color: var(--primary-color) !important;
  }

#buttonbar ul, #buttonbar li {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}

#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;
  /*border-radius: 3px 3px 0 0; */
}

.dark #listview, .dark #groupview {
  border-right: 1px solid #494949;
  /*border-radius: 3px 3px 0 0; */
}


#listcontents, #groupcontents {
  /*height: 758px !important;*/
  overflow: auto;
  word-wrap: break-word;
}

#dashboardlist, #listcontents, #groupcontents {
  clear: left;
  overflow-y: auto;
  overflow-x: hidden;
}

#listblock {
  /*width: 24%;*/
  padding-top: 10px;
  padding-right: 1%;
  position: fixed;
  /*min-width: 220px;*/
}

#detailblock {
  width: 74%;
  padding-top: 10px;
  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;
  /*color: #303030;*/
  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;
  /*max-height: 880px;*/
  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 10px 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 {
  /*color: #c0c0c0;*/
  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;
  display: inline-block;
}

.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;
  margin: 0px !important;
  min-width: 160px;
}

#detaillist #submit {
  width: 100px;
  height: 30px;
  /*background: url(../images/header-gradient-background.jpg);*/
  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: #c0c0c0;*/
  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.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;
}

/*#scheduleday span#icons {*/
/*  border: none;*/
/*  height: 53px;*/
/*  width: 480px;*/
/*  background: url(../images/hours-in-day.png) no-repeat;*/
/*  padding: 0 0 5px 0;*/
/*}*/

#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;
  /*border: 2px solid white;*/
  /*border-radius: 5px;*/
  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);
  /*padding-top: 25px;*/
}

#messagefg > div > div {
  min-height: 110px;
  text-align: left;
  /*padding: 0 25px 25px 25px;*/
  border-radius: 2px;
}

#eventfg > div > div {
  width: 600px;
  /*margin-left: -300px;*/
  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 {
  /*padding: 0px;*/
}

#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;
  /*height: 2em;*/
  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 {
  /*border-bottom: 1px solid #971039;*/
}

#messagefg > div > div select:focus, #messagefg > div > div input:focus, #eventfg > div > div select:focus, #eventfg > div > div input:focus {
  /*border-bottom: 2px solid #971039;*/
  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: #971039;*/
  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 .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);
    /*box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.95), 0px 1px 1px 0px rgba(0,0,0,0.74), 0px 2px 1px -2px rgba(0,0,0,0.92); for Dark theme*/
  }

.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 {
  /*background: url(../images/table-gradient.jpg) repeat-x;*/
}

#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;
  /*box-shadow: 5px 5px 10px #c0c0c0;*/
}

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

#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 {
  /*color: var(--secondary-color);*/
  font-size: large;
  font-family: Roboto-Bold;
  /*background-color: #ffbb33; */
  padding: 3px 0 2px 0;
  width: 200px;
  white-space: nowrap;
}

#Registered.highlight {
 /* color:  var(--secondary-color);*/
  /*font-size: 14px; */
}

#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;
  /*max-height: 300px;*/
}

.statustable td div.cell2 {
  height: 595px;
  /*max-height: 595px;*/
}

.statustable td div.cell3 {
  height: 910px;
  /*max-height: 910px;*/
}

.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-right: 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;
  /*box-shadow: 1px 1px 5px #636363;*/
  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"; /*list*/
}

#grouptab:before {
  content: "\e16d"; /*low_priority*/
}

#alink:before { /*Add*/
  content: "\e146"; /*add_box*/
}

#cancellink:before {
  content: "\e5c9"; /*cancel*/
}

#clink:before { /*copy*/
  content: "\e14d"; /*content_copy*/
}

#CSVilink:before { /*TagCSVA*/
  content: "\e0b5"; /*call_received*/
}

#CSVlink:before { /*TagReportCSVA*/
  content: "\e0b2"; /*call_made*/
}

#dlink:before { /*delete*/
  content: "\e92b"; /*delete_forever*/
}

#flink:before { /*find*/
  content: "\e880"; /*find_in_page*/
}

#PDFlink:before { /*ReportPDFA*/
  content: "\e0b2"; /*call_made*/
}

#plink:before { /*print*/
  content: "\e8ad"; /*print*/
}

#rlink:before { /*TagRefreshA*/
  content: "\e5d5"; /*refresh*/
}

#rplink:before { /*TagReportA*/
  content: "\e0b2"; /*call_made*/
}

#rslink:before { /*restart*/
  content: "\e863"; /*autorenew*/
}

#slink:before { /*save*/
  content: "\e161"; /*save*/
}

#sllink:before { /*sync_lock*/
    content: "\eaee"; /*sync_lock*/
}

#vlink:before { /*TagViewA*/
  content: "\e880"; /*find_in_page*/
}

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

#loginheadertop {
  height: 44px;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

#loginform, #signupform {
  position: relative;
  top: 35%;
}

#gxloginr {
  height: 325px;
  background: url(../images/protege-gx-large.svg) no-repeat;
  background-position: bottom 25px right 15px;
  background-size: 93%;
  text-align: right;
  color: #ffffff;
}

.logincontainer {
    height: 90% !important;
    width: 100% !important;
    min-width: 800px !important;
    color: #ffffff;
}

#logincontainer {
    height: 100%;
    width: 80%;
    min-width: 1000px;
    text-align: left;
    color: #fff;
}

.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;
    /*border-bottom: 1px solid var(--primary-color-default);*/
    transition: box-shadow .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);
    /*box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.95), 0px 1px 1px 0px rgba(0,0,0,0.74), 0px 2px 1px -2px rgba(0,0,0,0.92); for Dark theme*/
  }

#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);
    /*box-shadow: inset 0 -1px 0 0 rgba(151, 16, 57, 0.5)*/
    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;
}



/* ADD DARK THEME */

.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 select option:checked,
.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
}
/*
body.dark::-ms-browse {
  box-shadow: 0px 1px 1px #191919 !important;
}
  */
.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;
}
/*
body.dark::-ms-browse:hover {
  box-shadow: 0px 1px 4px #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 {
  /* border-bottom: 1px solid #9F9F9F*/
}

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

#groupcontents {
  padding: 15px 0 0 10px;
}

#pulsetimes {
  width: 98%
}

#TagRecentEvents > div {
  text-align: center;
  width: 70%;
  position: relative;
  top: -5px;
  left: 15%;
}

#NIC1_ENABLELink {
  pointer-events: none;
}

#eleatorScheduleArea .selectableTable tr:nth-child(1),
#eleatorScheduleArea .selectableTable th:nth-child(4),
#eleatorScheduleArea .selectableTable th:nth-child(5),
#eleatorScheduleArea .selectableTable th:nth-child(6),
#eleatorScheduleArea .selectableTable th:nth-child(7) {
  text-align: center;
  width: 90px;
}

#eventReportSelectableTable {
  max-height: calc(100vh - 255px);
  min-height: 80px;
  overflow-y: scroll;
  display: block;
  border: 1px solid rgba(102, 102, 102, 0.2);
}

#ReleaseDateContainer, #BinarySoftwareUpdate {
  display: none;
}

#SoftwareUpdateBinary, #FirmwareUpdateFirmware, #FirmwareModuleFirmware {
  margin-top: 50px;
}

#ReportPeriodTitle {
  font-size: 20px;
}

.gxevents > .ordertitle th:nth-child(n+6):nth-child(-n+4) {
  text-align: center;
}

exportToCSVButtonUserReport {
  display: none;
}

#loginbody {
  background-color: #303030;
  height: 100%;
}

#logintxt {
  cursor: pointer;
}

.logincontainer td:nth-child(2) {
  width: 780px;
}

#emptyformholder {
  margin-top: 0px;
  min-width: 320px;
}

#signupform {
  margin-top: 0px;
}

#loginpage > #loginform {
    margin-top: 50px;
}

#TagToggleLightTheme, #TagToggleDarkTheme{
  cursor: pointer;
}

#ControllerStatus {
  border: none !important;
  margin-top: 0px !important;
}

#TagToggleLightTheme + #icon-toggle-themes {
  box-shadow: none;
  line-height: 17px;
  padding: 0 7px;
}

#OperatorDetails + p {
  padding-bottom: 0;
}

#ChangeDisplayColor + p {
  padding-top: 20px;
}

#displayMemSystem, #keyMemSystem {
  background-color: #333238;
}

#displayMemEvents, #keyMemEvents {
  background-color: #45ac43;
}
#displayMemUsers, #keyMemUsers {
  background-color: #bc122f;
}
#displayMemAccessLevels, #keyMemAccessLevels {
  background-color: #73bed3
}
#displayMemProgramFunctions, #keyMemProgramFunctions {
  background-color: #7f7e8e
}
#displayMemOther, #keyMemOther {
  background-color: #b3ffb0
}
.holderHeaderLogo{height: 24px}

.wxLoginForm {
  margin-top: 50px
}
#TagUserDaysUntilPINExpiry {
  margin-left: 5% !important;
}
#UserDaysUntilPINExpiry{
  width:10% !important;
}
#AccessCards + p {
  background: none;
  display: inline;
}
#CardLastUsed {
  display: inline-block;
  width: 130px;
}
#ButtonShutter, #ButtonRetry {
  margin-right: 10px;
}
#ImageCamera {
  margin-bottom: 30px;
}
.gxwebButtonLogout-p {
  padding-top: 20px;
}
.eventserver-block-table {
  white-space: nowrap;
  table-layout: auto;
  width: 70%;
}
.eventserver-block-table td:nth-child(2),
.eventserver-block-table td:nth-child(4) {
  padding-left: 2em;
}

.eventserver-block-tr select {
  width: 220px !important;
}
#GX_SECURE_WEB_ENABLE_RADIO_CERT {
 width:20px !important;
}
#CellModemDetected, #CellSIMDetected, #CellInternet {
  pointer-events: none;
  cursor: default;
}

.tagSignalStrength-p {
  display: inline;
  float: left;
}
.tagSignalStrength-p lable {
  margin-top: 40px;
}
#indicatorSignalStrength {
  display: inline;
}


#listcontents > span> i {
  position: absolute;
  top: 5px;
  right: 5px
}

#RegisterThisController {
  width: 100%;
  margin-top: 0.5em !important;
  height: 35px !important;
}

.txtCenter {
  text-align: center
}

.addresingSelect {
  width: 90px !important;
  text-align: center;
}

#DisplaySiteNameLink {
  margin-left: 50px;
}

#ButtonApplyPCTime {
  margin-left: 100px;
}

#EventsReportsIds {
  min-width: 150px;
  width: auto;
}

#messageNSelectedRecords {
  padding: 0 1em;
  float: right;
}

.detailtab > a > span {
  cursor: pointer;
}

#newcardlist th:nth-child(3),
#programmablefunctionsstatuslist th:nth-child(3),
#inputsstatuslist th:nth-child(3),
#outputsstatuslist th:nth-child(3),
#areasstatuslist th:nth-child(3),
#floorsstatuslist th:nth-child(3),
#doorsstatuslist th:nth-child(3),
#servicesstatuslist th:nth-child(3) {
  text-align: center;
}

#areasstatuslist th:nth-child(4),
#doorsstatuslist th:nth-child(4) {
  text-align: center;
}

#holidaysdetailslist .selectableTable th:nth-child(2),
#servicestatuslist th:nth-child(2) {
  text-align: center;
}

.wideTable th:nth-child(n+4) {
  text-align: center;
  width: 90px;
}
.floatRight {
  float:right;
}
.floatLeft{
  float:left;
}
.textAlignCenter {
  text-align: center;
}

.signalNotMeasured {
  margin-left: 10px;
  margin-top: 40px;
  position: absolute;
}

.displayInLine {
  display: inline;
}
#groupview #groupcontents {
  padding: 15px 0 0 10px;
}
.wrapperUserPinCode {
  margin-bottom: 20px
}
#TagUserDaysUntilPINExpiry {
  margin-left: 5%;
}
#UserDaysUntilPINExpiry {
  width: 10%
}
.CardFacInput {
  margin-left: 36px !important;
}
#ImageCamera {
  float: left;
  margin-bottom: 30px;
}
#divTagLoadingEvents {
  text-align: center;
  width: 70%;
  position: relative;
  top: -5px;
  left: 15%;
}

#headerbar a > span {
  text-decoration: none !important;
  display: block;
}

.fontSmall {
  font-size: small;
}
#policytable {
  border-spacing: 18px 5px;
}

.marginBottom20{
  margin-bottom: 20px !important;
}

.ChangePasswordOperatorPBtn {
  margin-left: 10px !important;
  margin-top: -10px !important;
  position: absolute !important;
  z-index: 8000;
}

#ButtonLogout, #ButtonChangeOperatorPassword {
  width: 210px !important;
  height: 35px !important;
  position: relative;
}

#credentialsdetailslist .selectableTable tr > td:nth-child(3) > input {
  width: 150px;
}
  #credentialsdetailslist .selectableTable tr > th:nth-child(n+2):nth-child(-n+4),
  #credentialsdetailslist .selectableTable tr > td:nth-child(n+2):nth-child(-n+4) {
    text-align: center;
    white-space: nowrap
  }
#credentialsdetailslist .selectableTable tr > td:nth-child(6) > input {
  width: 10em
}
 #credentialsdetailslist tr > th:nth-child(7) {
  max-width: 240px !important;
}
#credentialsdetailslist input[id^='CredentialInactivityPeriodValue'] {
  width: 3em !important;
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #7f7f7f;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: var(--primary-color);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}/* settings Pairing Component */
input.ict-checkbox {
  width: 1.2rem !important;
  height: 1.2rem !important;
  accent-color: var(--primary-color) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  top: 6px; 
  box-shadow: revert !important;
  border-bottom: 0 !important;
}