@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans/WorkSans-Regular.ttf");
}
/*///////////////////////////////////// buttons //////////////////////////////////////////////*/
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  font-size: 100%;
  cursor: pointer;
}
.button2 {
  border: 1px solid #999;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #f2f2f2;
  display: block;
}
.button3 {
  /*   border:solid 1px $buttons-border;
  background-color:#353535;
  border-radius:3px; */
  padding: 4px 8px;
  color: #B4B4B4;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 5px;
}
.button3:hover {
  background: #474747;
  color: #dedede;
  border-color: #222;
}
.propPanelBtn {
  padding: 6px 8px;
  color: #f1f1f1;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 5px;
  background: #0A0A0A;
  border: 1px solid #0A0A0A;
}
.button4 {
  cursor: pointer;
  background: #F0F0F0;
  border: 1px solid #8c8c8c;
  padding: 0 6px;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  line-height: 32px;
  padding: 0px 15px;
  box-shadow: 1px 1px 2px #dedede;
  text-shadow: 1px 1px #dedede;
  background: #dfdfdf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfdfdf), color-stop(100%, #b5b5b5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #dfdfdf 0%, #b5b5b5 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dfdfdf", endColorstr="#b5b5b5",GradientType=0);
  /* IE6-9 */
}
.disabled .button4:hover {
  background: #dfdfdf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfdfdf), color-stop(100%, #b5b5b5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #dfdfdf 0%, #b5b5b5 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #dfdfdf 0%, #b5b5b5 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dfdfdf", endColorstr="#b5b5b5",GradientType=0);
  /* IE6-9 */
}
.button5 {
  cursor: pointer;
  border-radius: 1px;
  color: #2280dd;
  padding: 20px;
  font-size: 16px;
  line-height: 14px;
  background: #0f0f0f;
  width: 312px;
  border: 1px solid;
}
.button5:hover {
  background: #092037;
  color: #2280dd;
  -webkit-transition: background 0.3s linear;
  transition: background 0.3s linear;
}
.button5:focus {
  box-shadow: 0px 0px 8px #3389df;
  outline: none;
  background: #092037;
  color: #3389df;
  -webkit-transition: background 0.3s linear;
  transition: background 0.3s linear;
}
.button6 {
  border: solid 1px #999;
  background-color: #bebebe;
  border-radius: 3px;
  padding: 6px 12px 6px 12px;
  color: #555;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 5px;
}
.button6.primary {
  background-color: #f3f3f3;
}
.button6:hover {
  background-color: #eee;
}
.button6:active {
  background-color: #fff;
}
.button6:focus {
  box-shadow: 0px 0pt 1pt 2pt #E6E6E6;
}
.button7 {
  background-color: #a5a5a5;
  width: 25px;
  height: 25px;
  color: #fff;
}
.button7:hover {
  background-color: #6b9aca;
}
.b7-text {
  width: 100px;
  text-align: left;
  background-repeat: no-repeat;
  background-position-x: 73px;
  padding-left: 10px;
}
.button8 {
  width: 26px;
  height: 26px;
  background-color: transparent;
  color: #838383;
  padding: 0px 4px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.button8:hover {
  background-color: #6b9aca;
  border-radius: 2px;
  color: #fff;
  background-position: 0 100%;
}
.button9 {
  width: 41px;
  height: 41px;
  background-color: #aaa;
  color: #666;
  padding: 0px;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  outline: 1px solid #999;
  border-radius: 2px;
  display: block;
  box-sizing: border-box;
}
.button9:hover {
  background-color: #666;
  color: #fff;
  background-position: 0 100%;
}
.button9.selected {
  background-color: #ddd;
  border: 1px solid #eee;
  color: #fff;
}
.button10 {
  background-color: transparent;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  color: #3389df;
  cursor: pointer;
  border-right: 1px solid #3389df;
  padding-right: 10px;
}
.button10:hover {
  text-decoration: underline;
}
.button10:focus {
  border-bottom: dashed 1px #3389df;
}
.button10:last-child {
  border: none;
  padding-right: 0px;
}
.buttonPrimAction {
  background: #8D3C3C;
  border: 1px solid #A94747;
  color: #FFEDED;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  font-weight: bold;
}
.buttonPrimAction:hover {
  background: #6b9aca;
  border-color: #F56060;
  transition: background 0.2s, border-color 0.2s;
}
.buttonPrimAction.disabled:hover {
  background: #8D3C3C;
  border-color: #A94747;
}
.buttonPrimAction:focus {
  box-shadow: 0px 0px 1pt 1pt #beabab;
}
.radioBtn {
  margin: 0 2px 0 10px;
}
.box {
  height: 20px;
  background: #f0f0f0;
  border: 1px solid #999;
  padding: 0 6px;
  text-align: center;
  border-radius: 2px;
}
.dropDown {
  background-image: url("./images/dropdownBtn.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #ccc;
}
.dropDown:hover {
  background-position: 0% 100%;
  background-color: #f0f0f0;
}
.Save, .Reboot, .Reset, #IPAddress, #DeviceName, .CSSBtn {
  position: relative;
  float: left;
  text-indent: 12px;
  height: 32px;
}
.CSSBtn {
  background: #474747;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  text-align: left;
  border-left: 4px solid #3389df;
  box-shadow: none;
  text-shadow: none;
  color: #dedede;
  margin-bottom: 5px;
  border-radius: 0px;
}
.CSSBtn:hover {
  background: #6b9aca;
}
.Save {
  background: url("./images/saveBtn.png"), #dfdfdf;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}
.Save:hover {
  background: url("./images/saveBtn.png"), #f0f0f0;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}
.Reboot {
  background: url("./images/rebootBtn.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
}
.Reboot:hover {
  background: url("./images/rebootBtn.png"), #3389df;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}
.Reset {
  background: url("./images/resetBtn.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
}
.Reset:hover {
  background: url("./images/resetBtn.png"), #3389df;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}
.moreBtn, .collapsedMoreBtn {
  height: 40px;
  width: 40px;
  position: absolute;
  right: 10px;
  top: 5px;
  border: 1px solid #1F1F1F;
  cursor: pointer;
  background: url("./images/switchControllerIcon-normal.png"), #474747;
  background-repeat: no-repeat;
  background-position: 10px;
}
.collapsedMoreBtn {
  background: url("./images/switchControllerIcon-normal.png"), #474747;
  background-repeat: no-repeat;
  background-position: 10px;
}
.moreBtn:hover, .collapsedMoreBtn:hover {
  background: url("./images/switchControllerIcon-hover.png"), #6b9aca;
  background-repeat: no-repeat;
  background-position: 10px;
}
/* High level UI */
/**/
.topNavButton-small, .topNavButton-selected {
  display: inline-block;
  color: #3389df;
  cursor: pointer;
  position: relative;
  margin-left: 10px;
  font-size: 24px !important;
  padding: 4px;
  text-align: center;
}
.topNavButton-small {
  width: 50px;
  height: 50px;
}
.topNavButton-selected {
  width: 48px;
  height: 48px;
}
.topNavButton-small:hover {
  color: #ffffff;
}
.topNavButton-selected {
  border: 1px solid #3389df;
  padding: 2px;
}
.topNavButton-selected:hover {
  background-color: #092037;
}
.topNavIcon {
  cursor: pointer;
  font-size: 24px;
  margin-top: 6px;
}
.topNavIcon img {
  width: 17px;
}
.squareBtn, .squareBtn-small {
  display: inline-block;
  background-color: #0f0f0f;
  box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.5);
  border-radius: 1px;
  color: #3389df;
  position: relative;
  cursor: pointer;
  border: 2px solid #3389df;
}
.squareBtn {
  margin: 12px;
  width: 140px;
  height: 140px;
  float: left;
}
.squareBtn-small {
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
.squareBtn:hover, .squareBtn:focus {
  background: #092037;
  color: #3389df;
  -webkit-transition: background 0.2s linear;
  transition: background 0.2s linear;
  box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.5);
  border-color: #3389df;
}
.squareBtn-small:first-child {
  margin-left: 0px;
}
.squareBtn-small:hover, .squareBtn-small:focus {
  background: #092037;
  color: #3389df;
  -webkit-transition: background 0.2s linear;
  transition: background 0.2s linear;
  box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.5);
  border-color: #6b9aca;
}
.network, .graphics {
  background-position: 0%, 0%;
  background-repeat: no-repeat;
}
.network {
  background-image: url("./images/networkBtn.png");
}
.graphics {
  background-image: url("./images/graphicsBtn.png");
}
.network:hover, .network:focus, .graphics:hover, .graphics:focus {
  background-position: 100%, 0%;
}
/*------------- menu manager--------------*/
.deleteIcon {
  background-image: url("./images/deleteIconLarge.png");
}
.cutIcon {
  background-image: url("./images/cutBtn.png");
}
.pasteIcon {
  background-image: url("./images/pasteBtn.png");
}
.copyIcon {
  background-image: url("./images/copy_icon.png");
}
.copyIcon {
  background-image: url("./images/copyIcon.png");
}
.addIcon {
  font-family: icon-font-5;
  display: inline-block;
  margin-right: 10px;
  /* vertical-align: middle; */
  color: #dedede;
}
.usersNameIcon {
  display: inline-block;
  margin-right: 15px;
}
.addBtn {
  background: #474747;
  border: 1px solid #0A0A0A;
  border-radius: 0px;
  padding: 5px 10px;
  color: #dedede;
  font-size: 14px;
  cursor: pointer;
}
.addBtn:hover {
  background: #4f4e4e;
}
.addBtn.smallBtn {
  padding: 3px 6px;
}
.addBtn.smallBtn .addIcon {
  font-size: 9px;
}
.saveIcon {
  background-image: url("./images/saveIcon.png");
}
.saveIcon_alt {
  background-image: url("./images/saveBtn2.png");
}
.saveAsIcon {
  background-image: url("./images/saveAsBtn.png");
}
.refreshIcon {
  background-image: url("./images/refreshBtn.png");
}
.refreshIcon_alt {
  background-image: url("./images/refreshBtn2.png");
}
.printIcon {
  background-image: url("./images/printIcon.png");
}
.downloadIcon {
  background-image: url("./images/exportIcon.png");
}
.closeBtn_alt {
  background-image: url("./images/closeBtn2.png");
}
.createFileIcon {
  background-image: url("./images/createFileIconLarge.png");
}
.createFolderIcon {
  background-image: url("./images/createFolderIconLarge.png");
}
.moveUpIcon {
  background-image: url("./images/moveUpIconLarge.png");
}
.moveDownIcon {
  background-image: url("./images/moveDownIconLarge.png");
}
.renameIcon {
  background-image: url("./images/renameBtn.png");
}
.backIcon {
  background-image: url("./images/backBtn.png");
  width: 22px;
  height: 22px;
  position: absolute;
  left: 10px;
  top: 10px;
}
/* nav bar  */
.navArrow-container {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 30px;
  border-left: 1px solid #313131;
}
.navArrow2 {
  font-family: icon-font-5;
  width: 100%;
  height: 100%;
  padding-left: 9px;
  box-sizing: border-box;
  transform: scaleY(-1) rotate(90deg);
  background-color: #525252;
}
.navArrow2-selected {
  background: #3389df;
}
.navArrow2:hover {
  color: #fff;
  background: #6b9aca;
  text-shadow: none;
  border: none;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}
.navArrow {
  position: absolute;
  right: 10px;
  font-family: icon-font-5;
  top: 5px;
  vertical-align: middle;
  font-size: 7px;
  height: 18px;
  width: 18px;
  border: 1px solid #313131;
  color: #313131;
  text-align: center;
  line-height: 20px;
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.navArrow-selected {
  color: #812414;
  border-left: 1px solid #812414;
}
.navItemRow {
  color: #E4ECD3;
  font-size: 12px;
  background: #525252;
  padding-left: 10px;
  height: 22px;
  line-height: 22px;
  box-sizing: border-box;
}
.navItemRow:hover {
  color: #fff;
  background: #6b9aca;
  text-shadow: none;
  border: none;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}
.rowSelected {
  color: #666;
  background: #CCC;
  text-shadow: none;
  border: 1px solid #0CF;
  box-sizing: border-box;
}
.navItem-option {
  background-color: #525252;
  color: #eee;
  text-shadow: none;
  border-top: 1px solid #5E5E5E;
  box-sizing: border-box;
}
.navItemRowLarge {
  color: #5d5d5d;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  background: #eee;
  padding-left: 10px;
  height: 40px;
  line-height: 40px;
  position: relative;
  margin-top: 1px;
}
.navItemRowLarge:hover {
  background-color: #B1C6E6;
  color: #2A6ACA;
  text-shadow: none;
  cursor: pointer;
}
.navSelected {
  color: #fff;
  background-color: #EC8E7D;
  text-shadow: none;
}
.navItemName {
  margin-left: 10px;
  position: relative;
  float: left;
}
.navFolderRow {
  color: #5d5d5d;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  text-indent: 30px;
  padding-left: 10px;
  height: 22px;
  line-height: 22px;
  background-color: #f0f0f0;
  background-image: url("./images/folderIcon.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-bottom: 1px;
}
.navFolderRow:hover {
  color: #fff;
  background-color: #6b9aca;
  background-position: 0% 100%;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.navItem {
  text-decoration: none;
  display: inline-block;
  border-radius: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 29px;
  padding-left: 10px;
  margin-top: 1px;
  color: #E4EED5;
  background: #525252;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  cursor: pointer;
  box-sizing: border-box;
  clear: both;
  position: relative;
  width: 100%;
  /*float: left;*/
}
.navItem:hover, .navSub .navItem:hover, .navSub .navSub .navItem:hover {
  background: #6b9aca;
}
.navItem:active {
  color: #3389df;
  background: #fff;
  text-shadow: none;
  background-image: url("./images/nav-indent_active.png");
  background-repeat: no-repeat;
}
.navItem.tabbedIn {
  padding-left: 25px;
}
.navItem.tabbedIn2 {
  padding-left: 40px;
}
.navItem.tabbedIn3 {
  padding-left: 55px;
}
.navItem-selected {
  background: #3389df;
  z-index: 11;
}
.navItem-selected:hover {
  background: #3389df;
}
.add-icon {
  width: 13px;
  height: 13px;
  background-image: url("./images/add-icon.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.add-icon:hover {
  background-position: 0px 13px;
}
.add-item {
  background-color: #195a99;
  border: dashed 1px #0e4275;
  color: #0c375e;
  text-shadow: none;
  font-weight: bold;
  margin-top: 4px;
  border-radius: 2px;
}
.add-item:hover {
  border-color: #808080;
  background-color: #ACA8A8;
  color: #333;
}
.dropdownArrowDown {
  float: right;
  height: 23px;
  width: 24px;
  margin-right: 5px;
  background-color: transparent;
  background-image: url("./images/dropdownArrows.png");
  background-position: 0 0;
}
.dropdownArrowDown:hover {
  background-position: 0 48px;
}
.dropdownArrowUp {
  float: right;
  height: 24px;
  width: 24px;
  margin-right: 5px;
  background-color: transparent;
  background-image: url("./images/dropdownArrows.png");
  background-position: 24px 0;
}
.dropdownArrowUp:hover {
  background-position: 24px 48px;
}
.menuOptions a .navSelected, .menuOptions li .navSelected {
  color: #ff0000;
  background: #fff;
}
.menuAction {
  position: relative;
  display: block;
  float: left;
  width: 100%;
}
.menuAction li {
  text-decoration: none;
  display: block;
  height: 24px;
  background: #ecccc7;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  margin-top: 2px;
}
.menuAction .menuDelete {
  display: block;
  background-image: url("./images/treeview/delete.gif");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  cursor: pointer;
}
.menuAction .menuDelete:hover {
  background-position: 0% 100%;
}
.delSpan {
  display: none;
}
.navEdit {
  border-left: 3px solid #3389df;
  background-color: #474747;
  position: relative;
  float: right;
  width: 100%;
  height: 30px;
  top: 1px;
  text-align: right;
  box-sizing: border-box;
  padding-left: 10px;
}
.templateNav {
  background-color: #474747;
  position: relative;
  width: 100%;
  height: 30px;
  top: 1px;
  text-align: left;
  box-sizing: border-box;
  padding-left: 10px;
  color: #E4EED5;
  font-size: 13px;
  line-height: 29px;
}
.templateIcon {
  display: inline-block;
  float: left;
  margin-right: 11px;
  font-family: icon-font-5;
}
.templateName {
  margin-left: 10px;
}
.templateEditIcon, .templateDeleteIcon {
  font-family: icon-font-5;
  float: right;
}
.templateEditIcon {
  margin-right: 30px;
}
.templateDeleteIcon {
  margin-right: -34px;
}
.templateEditIcon:hover, .templateDeleteIcon:hover {
  color: #1a1a1a;
}
.leftNavAction {
  cursor: pointer;
  width: 34px;
  display: inline-block;
  font-family: icon-font-5;
  font-size: 14px;
  color: #E4EED5;
  margin-left: -5px;
  line-height: 30px;
  float: left;
}
.leftNavAction:hover {
  color: #6b9aca;
  background-color: transparent !important;
}
.NavEditBtn {
  background-image: url("./images/editNavIcon.png");
  background-position: 0% 0%;
}
.NavEditBtn:hover {
  background-position: 100% 0%;
  background-color: #D34932;
}
.editBtn, .deleteBtn, .duplicateBtn {
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 18px;
  height: 18px;
  display: inline-block;
  padding: 0;
}
.deleteBtn {
  background-image: url("./images/deleteIcon.png");
  background-position: -1px -1px;
}
.duplicateBtn {
  background-image: url("./images/duplicateIcon.png");
}
.editBtn {
  background-image: url("./images/editIcon.png");
}
.navEdit .editBtn {
  background-position: 100% 0%;
  margin: 3px 0 0 3px;
  background-color: transparent;
}
.editBtn:hover, .deleteBtn:hover, .duplicateBtn:hover {
  background-position: 100% 0%;
}
.temptableBtn {
  background-image: url("./images/temptableBtn.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
.servicesBtn:hover, .settingsBtn:hover, .temptableBtn:hover {
  background-position: 0 50%;
}
.backupBtn {
  background-image: url("./images/backupBtn.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
.graphBtn {
  background-image: url("./images/graphBtn.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
.resyncBtn {
  background: url("./images/resync_icon.png");
  background-repeat: no-repeat;
  background-position: -1px 0px;
}
.resyncBtn:hover {
  background: url("./images/resync_icon.png"), #353535;
  background-position-y: -18px;
}
.linkBtn {
  background: url("./images/link_icon.png"), -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  background: url("./images/link_icon.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  /* FF3.6+ */
  background: url("./images/link_icon.png"), -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome,Safari4+ */
  background: url("./images/link_icon.png"), -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome10+,Safari5.1+ */
  background: url("./images/link_icon.png"), -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Opera 11.10+ */
  background: url("./images/link_icon.png"), linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  /* IE10+ */
  background-repeat: no-repeat;
  /* W3C */
  background-position: -1px 0px;
}
.linkBtn:hover {
  background: url("./images/link_icon.png"), #353535;
  background-position-y: -18px;
}
.defaultBtn {
  background: url("./images/default_icon.png"), -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  background: url("./images/default_icon.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  /* FF3.6+ */
  background: url("./images/default_icon.png"), -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome,Safari4+ */
  background: url("./images/default_icon.png"), -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome10+,Safari5.1+ */
  background: url("./images/default_icon.png"), -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Opera 11.10+ */
  background: url("./images/default_icon.png"), linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  /* IE10+ */
  background-repeat: no-repeat;
  /* W3C */
  background-position: -1px 0px;
}
.defaultBtn:hover {
  background: url("./images/default_icon.png"), #353535;
  background-position-y: -18px;
}
.editBtn-2 {
  background: url("./images/edit_icon.png"), -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  background: url("./images/edit_icon.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  /* FF3.6+ */
  background: url("./images/edit_icon.png"), -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome,Safari4+ */
  background: url("./images/edit_icon.png"), -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome10+,Safari5.1+ */
  background: url("./images/edit_icon.png"), -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Opera 11.10+ */
  background: url("./images/edit_icon.png"), linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  /* IE10+ */
  background-repeat: no-repeat;
  /* W3C */
  background-position: -1px 0px;
}
.editBtn-2:hover {
  background: url("./images/edit_icon.png"), #353535;
  background-position-y: -18px;
}
.deleteBtn-2 {
  background: url("./images/delete_icon2.png"), -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  background: url("./images/delete_icon2.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  /* FF3.6+ */
  background: url("./images/delete_icon2.png"), -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome,Safari4+ */
  background: url("./images/delete_icon2.png"), -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Chrome10+,Safari5.1+ */
  background: url("./images/delete_icon2.png"), -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  /* Opera 11.10+ */
  background: url("./images/delete_icon2.png"), linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  /* IE10+ */
  background-repeat: no-repeat;
  /* W3C */
  background-position: -1px 0px;
}
.deleteBtn-2:hover {
  background: url("./images/delete_icon2.png"), #353535;
  background-position-y: -18px;
}
.homeBtn {
  background: #eee;
  background-image: url("./images/homeBtn.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  display: inline-block;
  height: 24px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  box-sizing: border-box;
  clear: both;
  position: relative;
  float: left;
  width: 180px;
}
.closeBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 14px;
  height: 14px;
  background-image: url("./images/closeBtn.png");
  background-position: 0% 0%;
  cursor: pointer;
}
.closeBtn:hover {
  background-position: 0% 100%;
}
.globalSettingsIcon {
  display: inline-block;
  right: 12px;
  top: 6px;
  font-family: "icon-font-5";
  cursor: pointer;
  margin-top: 10px;
}
.globalItems {
  right: 30px;
  top: 30px;
  position: absolute;
}
/*---------------------- toogle ----------------------*/
.toogle-Bar {
  color: #A0A0A0;
  padding: 7px 0px 0px 0px;
  height: 32px;
  box-sizing: border-box;
  margin-right: 10px;
  float: right;
  line-height: 22px;
  font-size: 12px;
  margin-top: 0px;
  padding-left: 5px;
}
.toogle-Bar-propsheet {
  color: #A0A0A0;
  height: 32px;
  box-sizing: border-box;
  margin-right: 10px;
  float: right;
  line-height: 22px;
  font-size: 12px;
  margin-top: 0px;
}
.toogle-box {
  display: inline-block;
  float: left;
}
.toggle-zone {
  width: 60px;
  float: left;
  background: transparent;
  outline: 1px solid #EAEAEA;
  outline-offset: 1px;
}
.toggle-zone-propsheet {
  width: 60px;
  float: left;
  background: transparent;
  outline: 1px solid #EAEAEA;
  outline-offset: 3px;
}
.toggle {
  background-color: #DFDFDF;
  width: 28px;
  height: 20px;
  float: left;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}
.toggle-prop {
  background-color: #b5b4b4;
  width: 28px;
  height: 20px;
  float: left;
  box-sizing: border-box;
  padding-top: 2px;
}
.toggle-prop-on {
  float: left;
}
.toggle-prop-off {
  float: right;
}
.toggle-prop:hover {
  background-color: #DFDFDF;
}
.toggle-prop:active {
  background-color: #df4d33;
}
.toggle-text {
  float: left;
  color: #fff;
  text-shadow: 1px 1px #000;
  font-size: 9px;
  line-height: 20px;
  margin-left: 3px;
  width: 25px;
  text-align: center;
  margin-right: 4px;
}
.toggle-text-prop {
  float: left;
  color: #b5b4b4;
  font-size: 11px;
  line-height: 20px;
  margin-left: 3px;
  width: 25px;
  text-align: center;
  margin-right: 4px;
}
.navIcon {
  width: 11px;
  display: inline-block;
  margin-right: 15px;
  font-size: 14px;
  vertical-align: middle;
}
.h1Icon, .h1NetworkIcon {
  width: 6px;
  display: inline-block;
  font-size: 8px;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 3px;
  transform: rotate(180deg);
}
.h1IconRotate, .h1NetworkIconRotate {
  transform: rotate(360deg);
  transform-origin: center bottom;
}
.bcIcon {
  display: inline-block;
  color: #DFDFDF;
  margin-left: 10px;
  cursor: pointer;
}
.bcHomeIcon {
  display: inline-block;
  float: right;
  margin-right: 10px;
  color: #DFDFDF;
  cursor: pointer;
}
.bcHomeIcon:hover {
  color: var(--sideNav-hover);
}
.bcBackButton:hover {
  color: var(--sideNav-hover);
}
.edit {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  position: absolute;
  top: 8px;
  cursor: pointer;
  right: 10px;
}
.edit:hover {
  color: #E4EED5;
}
.navMoreBtn {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #0A0A0A;
  text-align: center;
  line-height: 25px;
  letter-spacing: 1.5px;
  color: #0A0A0A;
  font-weight: bold;
  cursor: pointer;
}
.prog_collapsedServicesBtn {
  height: 30px;
  width: 100%;
  border-bottom: 1px solid #0A0A0A;
  text-align: center;
  line-height: 30px;
  text-indent: 3.5px;
  cursor: pointer;
}
.prog_collapsedServicesBtn:hover, .prog_collapsedSettingsBtn:hover {
  background-color: #6b9aca;
}
.prog_collapsedSettingsBtn {
  height: 30px;
  width: 100%;
  text-align: center;
  line-height: 30px;
  text-indent: 3.5px;
  cursor: pointer;
}
/*//////////////////////////////////////////////////*/
.notificationIndicator {
  background-color: #3389df;
  color: #fff;
  border-radius: 100%;
  border: solid 1px #eee;
  position: absolute;
  top: 31px;
  right: 15px;
  height: 14px;
  text-align: center;
  line-height: 12px;
  font-size: 8px;
  box-sizing: border-box;
}
.notificationIndicator-large {
  background-color: #3389df;
  color: #fff;
  border-radius: 100%;
  position: relative;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  font-weight: bold;
  box-sizing: border-box;
  float: right;
  display: inline-block;
}
.historyIcon {
  background-image: url("./images/historyPoint.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}
.graphIcon {
  background-image: url("./images/graph.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}
.viewButt {
  font-family: icon-font-5;
  font-size: 20px;
  cursor: pointer;
  background: transparent;
  vertical-align: middle;
  float: right;
  color: #555;
}
.viewButt:hover {
  color: #000;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group > span {
  padding: 2px 10px;
  border: 1px solid #a1a1a1;
  background-color: #fff;
  color: #666;
  margin-left: 10px;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  min-width: 200px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  text-align: left;
}
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  font-size: 0;
}
.input-group .btn {
  display: inline-block;
  margin-bottom: 0;
  margin-left: -3px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #333;
  background-color: #ccc;
  border-color: #a1a1a1;
  text-shadow: 1px 1px 1px #dfdfdf;
}
.input-group .btn:hover {
  background-color: #efefef;
}
.accordion-container, .accordion-container.open {
  margin-bottom: 5px;
  font-size: 12px;
  height: 24px;
  cursor: pointer;
  background: url(./images/accordion-bg-down.png) no-repeat;
  background-position-x: 100%;
  background-position-y: -3px;
}
.accordion-container.open {
  background: url(./images/accordion-bg-up.png) no-repeat;
  background-position-x: 100%;
  background-position-y: -3px;
}
.accordion-container:hover, .accordion-container.open:hover {
  background-position-y: -33px;
  color: #fff;
}
.accordion-text {
  display: inline-block;
  float: left;
  height: 24px;
  line-height: 24px;
  padding-right: 10px;
}
.templateSearchBtn {
  width: auto !important;
}
.templateSearchBtn > .btnIcon {
  margin-right: 5px;
}
.moduleBtn {
  background: #525252;
  border: 1px solid #0A0A0A;
  width: 117px;
  padding: 5px 10px;
  color: #ffffff;
  margin-right: 20px;
  font-size: 12px;
}
.btnIcon {
  font-family: icon-font-5;
  float: left;
  margin-top: 2px;
}
.btnIcon img {
  width: 11px;
}
.deviceModalBtn {
  background: #8D3C3C;
  border: 1px solid #333333;
  padding: 5px 10px;
  color: #ffffff;
  font-size: 12px;
}
/*delete icon up the top*/
.moduleDeleteBtn {
  color: #fff;
  border: 1px solid #fff;
  padding: 5px 7px;
  vertical-align: middle;
  background: none;
  font-family: icon-font-5;
}
.moduleDeleteIcon {
  font-family: icon-font-5;
}
.doubleLeftArrow, .doubleRightArrow, .singleLeftArrow, .singleRightArrow {
  font-family: icon-font-5;
  background: none;
  color: #f1f1f1;
  height: 15px;
  vertical-align: middle;
}
.singleLeftArrow, .singleRightArrow {
  margin-left: 10px;
  margin-right: 10px;
  transform: rotate(90deg);
  font-size: 12px;
}
.scheduleBtn {
  float: right;
  color: #b4b4b4;
  background-color: black;
  padding: 5px;
  font-size: 12px;
}
.scheduleBtn:hover {
  background-color: #4a4a4a;
  color: white;
}
.dataInput {
  color: #C9C9C9 !important;
}