.context-nav form {
  position: relative;
}

.navSelect {
  position: absolute;
  right: 0;
  top: 4rem;
  padding: .5rem;
  font-size: 1rem;
  background: #ddd;  
  box-shadow: 0 0 .1rem #444;
  z-index: 1;
}

.ns-ul {
  position: absolute;
  margin-top: 1rem;  
  width: 30rem;  
  right: 0;
  box-shadow: 0 0 .1rem #444;
  background: #ddd;  
}

.ns-ul li span {
  vertical-align: middle;
  margin-right: 1rem;
}

tr {
  position: relative;
}

td {
  position: relative;
}

.img-checkbox {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 2rem;
  height: 2rem;  
  margin: auto;
  opacity: .8;
}

.img-checkbox:hover {
  opacity: 1;
}

#Clientexec-sticker {
  position: absolute;  
  top: 0;
  right: 0;  
  background: none;
}

#Clientexec-sticker .card-contents {
  position: relative;
  z-index: 10000;
  margin: auto;
  width: auto;
  background: #444;
  max-height: 100%;
  padding: .5rem;
  overflow: auto;
}


.ces {
  display: bloxk;
  text-align: center;
  padding: .2rem;
  font-weight: bold;
}

.status-paid {
  background: #28a745;
  color: #fff;
}

.status-sent {
  background: #eee;
  color: #456;
}

.status-draft {
  background: #ddd;
  color: #111;
}

.status-void {
  background: #999;
  color: #fff;
}

.status-refunded {
  background: #268;
  color: #fff;
}

.tbox {
  width: 100%;
}

.tbox-label {
  width: 40%;
}

.tbox-value {
  width: 60%;
}

#EditUPSScript {
  width: 80rem;
  height: 60rem;
}

tr.checked {
  opacity: .4;
  font-weight: bold;
}

tr.checked .action-group i {
  opacity: 0;
  pointer-events: none;
}

#ModalConfirm input {
  width: 100%;
}

#EditQueues {
  height: 55rem;
}

#ModalConfirm textarea {
  border: none;
  width: 100%;
  height: 20rem;
}

#beMapPreview {
  height: 100%;
}

#BulkEndpoint {
  width: 110rem;
  height: 60rem;
}


#calendar {  
  max-height: 100%;
  height: 100rem;
}


#calendar .cal-contact div:hover i {
  color: #484;  
  cursor: pointer;
}

.h-50 textarea {
  height: 20rem !important;
}

.sms-dropdown-container {
  display: none;
  position: absolute;
  z-index: 200;
  width: 100%;
  top: 2.1rem;
  height: 20rem;
  background: #fff;
  overflow-y: auto;  
  margin: .1rem;
  box-shadow: 0 0 .2rem #111;
}

.sms-dropdown-container .hip-btn {
  position: absolute;
  z-index: 201;
  right: .5rem;
  top: .2rem;
}

.sms-dropdown .list-group-item {
  padding: .5rem;
}

.sms-dropdown .list-group-item:hover {
  background: #ddd;
  cursor: pointer;
}


.nav-result.num {
  width: 5rem;
}

.color-preview {
  padding: .5rem;
}

.color-preview [data-key=colorpreview] {
  padding: 1rem;  
  font-size: 1.2rem;
  border-left: .3rem solid;
}


#AddJobs {
  width: 90rem;
  height: 60rem;
}

#P2PSetup-saved {
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 100;
}

.n-map {
  position: absolute;
  height: 50rem;
  width: 60rem;
  right: 30rem;
  background: #333;
  border: .1rem solid #444;
}

#EditEpIface {
  height: 55rem;
  width: 20rem;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;  
}

#EditBookmark {
  width: 120rem;
  height: 50rem;
}


.input-group.error {
  box-shadow: 0rem 0rem .4rem red;
}

#P2PSetup-subnets {
  display: none;
  background: #fff;
  position: absolute;
  width: 70%;
  z-index: 100;
  left: 15%;
  bottom: 0;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: .1rem .1rem 1rem;
  padding: .5rem;
}


#P2PSetup {
  height: 70rem;  
  width: 50rem;
  
}

#AddInterface {
  width: 80rem;
  height: 50rem;
}

.fileman-image.port {
  max-width: 30rem;
  max-height: 15rem;
}

#torchDropdown {
  position: absolute;
  max-width: 50%;
  min-width: 20rem;
  background: #fff;
  z-index: 1;
  left: 6.5rem;
  top: 2.5rem;;
  height: 30rem;  
  overflow-y: auto;
  border: .1rem solid #aaa;
  box-shadow: .1rem .1rem .3rem #444;
}

.list-group-item.selected {
  background: #ddd;
}

.radio-select.locked {
  opacity: .8;
  cursor: none;
  pointer-events: none;
}

.fm-tags {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  opacity: .9;  
  min-width: 20rem !important;
}

.fm-tags > * {
  height: 2.5rem;
  background: #333;
  min-width: 20rem !important;
  z-index: 1000000;
  box-shadow: .1rem .1rem .2rem solid;
}

.fm-tag i {
  position: absolute;
  right: 0rem;  
  margin: .5rem;
}
.fm-tag i:hover {
  cursor: pointer;
  color: #dff;  
}

.globalSearch .input-group{
  background: #ddd;
  position: relative;    
}

.global-list {
  position: fixed;
  right: 0;
  top: 2.9rem;
  overflow-x: hidden;
  overflow-y: auto; 
  bottom: 1rem;
  display: none;
  background: #fff;
  z-index: 1;
  padding: 0;
}

.globalSearch .input-group-prepend {
  padding: .5rem;
}

.global-list .hardware {
  max-height: 2rem;
  max-width: 5rem;
  margin-right: 1rem;  
}


div[data-key=remotes] img {
  height: 2rem;
}

#EditImages {
  height: 55rem;
  width: 130rem;
}

#EditSensor, #EditScript {
  height: 71rem;  
}

#EditSensor { 
  width: 80rem;
}

#EditScript textarea:not([data-key=comment]) {
  height: 20rem;
}

#EditSensor textarea {
  height: 30rem;
}

.product-image .hardware {
  max-height: 10rem;
  max-width: 10rem;
}

.code {
  color: #cda !important;
  background: #111 !important;
}

.rssiBad {
  color: red;
}

.rssiNotGood {
  color: orange;
}

.rssiExcellent {
  color: blue;
}

.rssiGreat {
  color: green;
}

.rssiOk {
  color: yellowgreen;
}


.map-menu-textarea {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 1rem .5rem;
  border: 0;
  color: #246;
}

.site-label {
  background: #efe;  
  color: #367;
  padding: .1rem;
  text-align: center;
  box-shadow: 0 0 .1rem;
}

.contentwrapper {
  position: absolute;
  left: 11rem !important;
  /*! margin-right: 10rem !important; */   
  margin-left: 0rem;
  width: calc(100% - 11rem) !important;  
  /*! padding-right: 11.5em !important; */
  padding-block: 5rem;
}

.contentwrapper .panel {
  position: relative;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;  
  padding-bottom: 5rem;
}

#site-map,
#backhaul-map,
#endpoint-map,
#traceroute-map {
  height: calc(100% - 5rem);  
  position: relative;  
}

.map-area,
#site-map .map-area,
#backhaul-map .map-area,
#endpoint-map .map-area,
#traceroute-map .map-area {
  position: relative;
  min-height: 57rem !important;
  max-height: calc(100% - 5rem) !important;
}

.los-panel .view {
  position: absolute;
  top: 0;
  right: 1rem;  
}

.los-terrain {  
  position: absolute;  
  right: 0;
  left: 0;
  height: 25rem;
  bottom: 0;  
  z-index: 10;
  box-shadow: -.1rem -.1rem .1rem #111;
  padding: 1rem;
  background: #75b5ca;
  cursor: pointer;
}

.los-terrain.min {
  bottom: -25rem
}

#los-terrain {
  z-index: 1;
  height: 100%;
}

.los-panel {  
  position: relative;  
}

.los-panel.selected {
  background: #c0ecfd;
 
}

.los-panel.selected .h4 {
  color: #ac0909;
}

.wafer {
	position: absolute;
	left: 45%;
  width: 10%;
  text-align: center;
	padding: 1rem 1.5rem;	
  color: #000;
	top: -3.6rem;
	background: #75b5ca;	
  border-radius: 2rem 2rem 0rem 0rem; 
  opacity: .6;  
}

.wafer:hover {
  opacity: 1;
  box-shadow: 0rem -.1rem .1rem #444;
}

.dropdown-container {
  position: absolute;  
  right: 0;  
  padding: .3rem;
  text-align: center;  
  background: #ddd;
  box-shadow: 0 0 .1rem #ddd;
}

.dropdown-container .list-group-item {
  padding: .3rem 2rem;
  background: #efefef;
  color: #262;    
  z-index: 1;  
}

.pop-content {
  display: block !important;  
  background: #fff;
  padding: 1rem;
  border: .1rem solid #a44;    
  text-align: left;
  position: absolute;
  bottom: 0; 
  
}

.pop-content div {
  color: #2a5;
}

.pop-content label {
  width: 10rem;  
}

.ping-icon {
  padding: .5rem;
  vertical-align: middle;
  color: #ddd;  
}

.ping-icon i {
  font-size: 1.5rem;
}

.ping-icon.up {
  color: #1f3;
}

.ping-icon.warning {
  color: orange;
}

.ping-icon.down {
  color: red;
}

.ping-icon.unknown {
  color: grey;
}

.ping-icon.paused {
  color: #57dbf0;
}

.shadow-red {
  box-shadow: 0 0 .2rem #f00;
}

.shadow-blue {
  box-shadow: 0 0 .2rem #04f;
}

.dashboard-title {
  background: #def;
  padding: .2rem;
  font-size: 1.1rem;
  color: #444;
}

.box {
  width: 20rem;
  display: inline-block;
  box-shadow: 0 0 .1rem #455;
  margin: .15em;
  padding: .5rem;
  cursor: pointer;
}

.box:hover {
  color: #2a6;
  background: #eee;
}

.n-item .table-link-editor {
  background: #aaa; 
}

#EditBackupConfig {
  width: 110rem;
  height: 60rem;
}

#SiteSurvey {
  width: 120rem;
  height: 60rem;
}

#siteSurveyChart {
  height: 15rem;
  width: 100%;
}

#EditAlerting {
  width: 80rem;
  height: 40rem;  
}

#EditAlerting textarea[data-key=data] {
  height: 25rem;
}

.t-min {
  box-shadow: 0 0 .1rem #ddd;
  margin: .1rem;
}

.t-min .card-header {
  background: #dae8f7;
  color: #0d2825;
}

.t-min .todo-area .input-group, 
.t-min .todo-complete .input-group {
  margin: .1rem !important;    
}

.mini-port-wrapper {
  display: inline-flex;
  max-width: 40rem;
  overflow: auto;
}

.mini-port-wrapper .port {
  width: 7rem;
  display: inline-block;
  padding: .1rem 1rem;  
  border: .1rem solid;
  background: #eca68a;
  color: #252;
  cursor: pointer;
}

.port.plugged {
  background: #a0ffbc;
  color: #252;
}

#MikroDash .table-link-editor {
  max-width: 17rem;
  color: #4edeff; 
}

.dataTables_filter {
  display: none;
}

.st {
  width: 10rem;
  padding: 1rem; 
  position: relative;
  color: #bff;
}

.st i {
  position: absolute;
  right: 1rem;
  top: 1.2rem;
  color: #fff;
}

.st-tx {
  background: #068406;
}

.st-rx {
  background: #2664df;
}

.pt-err {
  background: #a6a;
}

.pt-res {
  background: #3d508a;
}

.todo-area {
  min-height: 10rem;
}

.todo-checkbox {
  position: absolute;
  top: 2rem;  
  margin: 1rem;
}

div.clients {
  color: #820d0d;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
}

.modal-content {
  box-shadow: 0 0 3rem #111;
}

#AddEquipment {
  width: 110rem;
  height: 65rem;
}

#ab-ubiquiti .s-line,
#ab-metrolinq .s-line,
.wls-canvas .s-line {
  width: 30rem;
  border-bottom: .1rem solid #465;
  padding-bottom: .3rem;    
}

#ViewW5G,
#ViewAF24G,
#ViewW60G {
  width: 110rem;
  height: 60rem;  
}

.w-status .s-line {
  width: 25rem;
}

.w5g-remote,
.af24g-remote,
.w60g-remote{
  display: inline-block;
}

.w5g-remote .ni-s,
.af24g-remote .ni-s,
.w60g-remote .ni-s {
  display: inline-block;
}

.gm-style-iw {
  padding: .5rem !important;
  padding-top: 2rem !important;
  border-radius: .1rem !important;
  background: #fff !important;  
}

.ni-c {
  display: inline-flex;
}

.ni-s {
  margin: .1rem;  
}

.ni-i {
  text-align: center;  
  border: .1rem solid #dedede;
  padding: 1rem;
}


.hw-icon {
  height: 5rem;
}

.gm-style-iw-d .s-line {
  width: 20rem !important;  
}

.pop .text-bubble {
  display: none;
}

.pop:hover .text-bubble {
  display: block;
  position: absolute;
  z-index: 1;
  background: #fff;
  padding: 2rem;  
  color: #752525;
  border: .2rem solid #0aa40a;  
  font-size: 1rem;  
}

.tab-content {
  position: relative;
  padding-bottom: 2rem;
  height: 100%;
}

.panel-left .tab-content {
  margin-bottom: 5rem; 
}

#import-map {
  position: relative;
  height: 50rem;
  width: 100%;    
}

#formImportSite option.indb {
  color: #cde;
  background: #777;
}


.radio-select {
  overflow: auto;
  display: inline-block !important;
}

#EditUPS,
#EditSite,
#EditArea,
#EditCommercial {
  width: 120rem;
  height: 60rem;
}

#EditUPS [data-key=logdata] {  
  min-height: 40rem;
  max-height: 100% !important;
}

#EditProduct {
  width: 101rem;
  height: 60rem;
}


#EditMap,
#EditMapLayer {
  width: 100rem;
  height: 60rem;
}

#EditMap .panel-left {
  width: 50rem;
  max-width: 50%;
}

.map-area {
  position: relative;
  height: calc(100% - 4rem);  
  width: calc(100% - 3rem);    
}

#EditArea .map-area {
  height: 40rem;
}

#ImportSite .map-area { 
  height: 40rem;
}

.ping-arp-message {
  margin: auto;
}

#EditEpClientRules {
  height: 40rem;
  width: 80rem;
}

.label-heading {
  font-size: 1rem;
  padding: .5rem;
  color: #555;
}

#ImportEndpoint {
  height: 50rem;
}


#FindSubnet {
  width: 55rem;
}
#EditEpClient {
  width: 100rem;  
  height: 60rem;
}

#epClientTrafficChart {
  height: 20rem;
}

#AddAlertOption {
  height: 48rem;
}

#PingTest .card-header,
#Traceroute .card-header 
{
  background: #fff;
  padding: 0 1rem;
}

.form-group .select2 {
  width: 100% !important;    
}

.select2-container li {
  position: relative;
  height: 3.2rem;  
}

.fm-tags .select2-container li {
  height: 100%;
}

.select2-container .hardware {
  max-height: 3rem;
  max-width: 10rem;
  margin-left: auto !important;   
  text-align: right;
  position: absolute;
  right: 0;
}

.nav-down {
  position: absolute;
  right: 0rem;
  top: 0;
}

.nav-down i {
  padding: 0.75rem 1rem 0.95rem 1.5rem;
}

.nav-down:hover {
  color: #4df;
}

.list-group.pl-2 .list-group-item {
  border-left: .1rem solid #444;
}

#PingTest {
  width: 40rem;
  height: 36rem;
}

#Traceroute {
  width: 120rem;
  height: 60rem;
}

#ClientBW {
  width: 100rem;
  height: 50rem;
}

#EditEpdefault {
  width: 76rem;
  height: 50rem;
}

#EditEpIface .panel-right {
  min-width: 66rem !important;
}


.table-link-group .dropdown {
  position: absolute;
  right: 0;
  top: 0;  
}

.table-link-group .span:hover {  
  color: #4df;
  font-size: 1.2rem;
  right: -.1rem;
  top: -.05rem;
}

.table-link-group .dropdown i {
  padding: .3rem .6rem;
}

#AddBackhaul,
#EditBackhaul {
  width: 94rem;
  height: 67rem;
}

#AddBackhaul .hardware,
#EditBackhaul .hardware,
#EditEpdefault .hardware {
  max-height: 10rem;
  max-width: 10rem;
}

.list-group-item .hardware {
  max-height: 2rem !important;
  max-width: 2rem !important;
}

.nms-config {
  position: absolute;
  top: 2.9rem;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1130;
  padding: 1rem;  
}

.list-group-item.disabled {  
  opacity: .5;  
}

.disabled .btn,
i.disabled {
  cursor: none;
  pointer-events: none;
  opacity: .5;  
}

.tool-help {
  margin-left: 1rem;
  padding: .5rem 1rem;  
  color: #068;
  font-style: italic;
}

.tool-last-value {
  margin-top: .5rem;
  padding: .5rem;
  border: .1rem solid #eee;
  background: #eefefe;
}

.tool-label {
  font-weight: bold;
  color: #449;
  padding: .5rem;
}

.tool-value {
  color: #236;
}

.tool-btn {
  width: 7rem;
}

.tab-wrapper {
  display: table;  
  width: 100%;  
}

.graph-wrapper {  
  display: inline-flex;  
  position: relative;
}

.graph-container .title {
  display: block;
  background: #3d3d5a;
  color: #4f4;
  font-weight: bold;
  padding: .2rem;  
  text-align: center;
}

.graph-container {  
  position: relative;
  margin: .1rem;
  border: .1rem solid #adadaa;
  border-radius: .2rem;  
}

.graph-dropdown {
  position: absolute;
  color: #fff;
  right: 0;
  z-index: 1;
  padding: 0;  
  margin: -.2rem;
  height: 2.2rem;
}

.graph-wrapper .checkbox {
  position: absolute;
  top: 0;
  z-index: 1;
  margin: .5rem;
}

.graph-wrapper .panel {
  display: none; 
}

.graph-wrapper.opened .panel {
  display: block;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 2.5rem;
  z-index: 1;
}

.graph-dropdown:hover {
  background: #667;
}

.graph-dropdown i:hover {
  color: #afa;  
}

.graph-time-container {
  position: relative !important;
  display: flex;
}

.graph-time-container input {
  line-height: 1.5rem;
  padding: .2rem;
  border: .1rem solid #ddd;
  border-radius: .1rem;
  background: #fafafa;
}

.graph-time-group {
  margin: .3rem;
}

.form-inline {
  border: .1rem solid #eee;
}

.form-inline:hover {
  border: .1rem solid #ddd;
  box-shadow: 0 0 .1rem #4af;  
}

select.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

#Speedtest {
  width: 120rem;
  height: 60rem;
}

#speedtest-graph {
  height: 8rem;
  padding: 1rem 0;
}

.speedWrapper .status {
  width: 100%;
  text-align: center;
  background: #eee;
  padding: .5rem;
  font-weight: bold;  
}

.speedWrapper .current,
.speedWrapper .avg {
  display: inline-flex;
  width: 100%;
  text-align: center;  
  background: #eee;
  padding: .5rem;
  font-weight: bold;
}

.speedWrapper .avg {
  background: #ceeee0;
}

.speedWrapper .current > *,
.speedWrapper .avg > * {
  width: 100%;
}

.current-rx {
  color: blue;
}

.current-tx {
  color: green;
}

.btn.nav-search {
  user-select: auto;
}

.radio-box {
  display: inline-flex;
}

#crumbs {
  display: inline-block;
}

.no-cmtik {
  color: #a25;
}


.traffic div {
  display: inline-block;
  font-weight: bold;
  padding: .5rem;  
  width: 50%;
  text-align: center;  
}


.traffic .rx {
  color: #2790D1;  
}

.traffic .tx {  
  color: #136222;  
}

#Settings .tab-content {
  padding-bottom: 2rem;  
  border-bottom: .1rem solid #eee;
}

.footer {
  position: fixed;
  bottom: 0;
  z-index: 1;
  padding: .2rem;
  background: #eee;
  left: 0;
  right: 0rem;
  border-top: .1rem solid #ccc;
}

.footer div {
  color: #44a;
  text-align: right;  
}

.nav-result {
  width: 6rem;
}

.remote-lan {
  position: relative;
}

.noserver {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;  
  
}

#endpointTrafficChart,
#serverTrafficChart {
  height: 14rem;
}

#endpointTrafficChart .highcharts-container,
#serverTrafficChart .highcharts-container {
  height: 100% !important;
}


.card.task .modal-header {
  cursor: move;
}

.loading {
  position: fixed;  
  top: 1rem;
  left: 0;
  right: 0;
  padding: 0 40%;
  z-index: 10000;
}

.loading .bl {
  opacity: 0;
}

.loading .loading-icon {
  position: relative;
  width: 100%;
  margin: auto;
  vertical-align: middle;  
  color: #fff;
}

.loading-icon i {  
  font-size: 2rem;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#Pinger {
  height: 51rem;
  width: 54rem;
}

#AddAddress {
  height: 50rem;
  width: 80rem;
}

#ViewOrphan {
  height: 33rem;
}

.visible-admin,
.visible-network {
  display: none;
}

.halted {
  display: none;
  position: fixed;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;  
  z-index: 20000;   
}

.halted .shade {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #444;
  opacity: .5
}

.halt-msg {
  position: absolute;  
  background: #eee;
  width: 20rem;
  height: 15rem;
  top: calc(50% - 7.5rem);
  left: calc(50% - 10rem);
  font-size: 2rem;
  font-weight: bold;
  box-shadow: 0 0 1rem;
  text-align: center;
  border-radius: 1rem;
}

.halt-msg .msg {
  position: relative;
  top: 4rem;
}

.blank {
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  z-index: 1000;
  cursor: not-allowed;  
  text-align: center;  
  color: #d33;
}

.blank .h3 {
  margin: 10rem auto;
  width: 25rem;
}

.visible-admin,
.visible-network {
  display: none;
}

.pointer {
  cursor: pointer;
}

.sidenav a i {
  width: 1rem;
  text-align: center;
}

#EditEpLan {
  height: 37rem;
  width: 33rem;
}

#EditServer,
#EditEndpoint {
  width: 91rem;
  height: 45rem;
}

#AddEquipment .dataTable {
  min-width: 90% !important;  
}

.dataTable {
  max-width: 100% !important;  
}

.bottom {
  position: fixed !important;
  height: 100%;
  bottom: 0 !important;
}

.top {
  position: fixed !important;
  height: 100%;
  top: 0 !important;
}

.right {
  position: fixed !important;
  width: 100%;
  right: 0 !important;
}

.left {
  position: fixed !important;
  width: 100%;
  left: 0 !important;
}


.dataTable tr.disabled {
  color: #ccc;
}

.w-100 {
  position: relative;
}

#MikroViewer {
  min-width: 750px !important;  
  width: 1200px;
}

#MVtab {
  border-bottom: .1rem solid #aaa;
}

#MVtab .nav-link.active:not(:hover) {
  color: #4af !important;
  background: #cfffd8;
  box-shadow: 0 0 .2rem;
}

#MVtab .nav-link:hover {
  /*! position: absolute; */
  /*! margin: 0 auto; */  
  /*! width: 100%; */
}

.panel {
  position: absolute;
  margin: 0 auto;  
  width: 100%;
}

.dataTable {
  position: relative !important;
  margin: 0 auto !important;  
  width: 100% !important;
}

.dataTables_info {
  display: none;
}

#navbar {
  z-index: 1000;
}

#navbar > * {
  font-size: .9rem !important;
}

body.task-open .header {
  top: 3rem;
}

body.task-open .sidenav {
  top: 12rem;
}

body.task-open .navbar:not(.graph-time-container) {
  top: 9rem;
}

body.task-open .contentwrapper {
  top: 3.1rem;
}

#taskBar {  
  position: absolute;
  padding: .2rem .4rem;
  height: 3.3rem;
  top: 0;
  z-index: 1230;
  background: #444;  
  width: 100%;
  display: flex;
}

.taskBarItem {
  box-shadow: 0 0 .3rem #ddd;  
  background: #ccc;
}

.taskBarItem:hover {
  color: #888;
  box-shadow: 0 0 1rem #aaa !important;
}

.taskBarItem.running {
  box-shadow: 0 0 .3rem #ccc;
  background: #ddd;
}

.taskBarItem.opened {
  box-shadow: 0 0 .3rem #1edd1e;
  background: #ded;
}

.taskBarItem.minimized {
  box-shadow: 0 0 .3rem #fef192;  
  background: #d0d0d0;
}

.taskBarItem.closed {
  box-shadow: none;  
  background: none;
}

#singleActionMenu {
  padding-top: 0;
  box-shadow: 0 0 .7rem #185d16;
  z-index: 1050;
}

#singleActionMenu .dropdown-header {
  background: #3bb638;  
  font-weight: bold;
  color: #fff;
}

#singleActionList a:hover {
  background: #bbecba99;
}

#singleActionMenu .close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: .1rem 1rem;
}

.cmtik-logo {
  position: relative;
  height: 5rem;
  width: 5rem;  
}

.cmtik-logo .image {  
  background-image: url("/images/cmtik.png");  
  background-repeat: no-repeat;
  background-position: center;  
  background-size: 10rem;
  position: relative;
  height: 5rem;
  width: 10rem;
}

body {
  margin: 0;  
  font-family: Arial, Helvetica, sans-serif;
}

html {
  font-size: .75rem;
}

.content {
  padding: 0.1rem .1rem 0 0;
  margin-left: 0rem;
  min-height: 40rem;
  margin-bottom: 20rem;
  top: 9rem;
  position: relative;
}

.sticky {
  position: fixed !important;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 3.5rem;
}

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

.btn-breadcrumb .btn {
  padding: .5rem 1rem .5rem 1rem;  
}
.btn-breadcrumb .btn:hover {
  background: #eee;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

.sidenav {  
  position: fixed;
  width: 11rem;
  z-index: 999;    
  left: 0;
  background: #fcfcfc;  
  padding: .5rem .5rem 15rem .5rem;
  height: calc(100% - 11.1rem);  
  top: 9rem;
  overflow: auto;
  margin-bottom: 5rem;
}

.sidenav .list-group-item {
  padding: .5rem !important;
}

.content .panel {
  padding: .2rem;
  display: none; 
}

.content .panel.opened {
  display: block;
}

#Contacts {
  padding: .5rem;
}

.form-group label.help,
.form-group label.tiny {
  min-width: 2rem !important;
}

.form-group textarea {
  height: 5rem;
  min-height: 2.4rem;
}

select.form-control[multiple] {  
  min-height: 15rem;  
}

.helpDiv {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1.4rem;
  box-shadow: 0 0 .5rem #4fa546;
  z-index: 10;
  background: #f6f6f6;  
  color: #55a;
  width: 30rem;  
  height: 10rem;
  min-width: 15rem;
  max-width: 90%;
  border-radius: .3rem;
  display: none;
  border: .1rem solid #bbb;
}

.helpDiv.max {
  height: 25rem;
}


.helpDiv .helpContent {
  position: relative;
  word-wrap: normal !important;
  width: 100% !important;
  height: calc(100% - 1.5rem);
  border: none;
  background: none;
  resize: none;
}

.helpDiv.editing {
  box-shadow: 0 0 1rem #4b7aff;
  background: #f1fff5;
}

.helpDiv .helpMax {
  position: absolute;
  right: 0;
  padding: 0 .5rem;
}

.noclick {
  pointer-events: none;
}

.clickable {
  cursor: pointer;
  color: green;
}

.clickable:hover {  
  color: #00AEEF;
}

.header {
  position: fixed;
  background-color: #3A3A3B;
  height: 6rem;
  display: inline-flex;
  width: 100%;
  padding: .4rem 0rem 0rem 0rem;    
  z-index: 1100;
}


.user-btn {
  height: 3.5rem;    
  cursor: pointer;    
  font-size: 3rem;
  padding: 0 1rem 0 1rem;
  margin-top: -1rem;  
  color: #8DC63F;
}

.user-btn:hover {
  color: #00AEEF;  
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  transition-duration: .1s;  
}

.user-name {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  color: #def;  
}

.user-type {
  text-align: center;
  color: #8DC63F !important;
}

#accountDropdown .dropdown-menu {
  border-radius: 0rem 0rem .5rem .5rem;
  margin-top: 1.6rem;
  box-shadow: 0 .2rem 1rem;
  padding: .5rem;
  background: #3A3A3B;
  right: 0;
  
}

.alertBox {
  width: 50%;
  z-index: 60000;  
  top: .1rem;
  background: #a7adbe;
  display: none;
  padding: .2rem 0;
}

.alertBox:hover {
  height: 20rem;
  background: #444;
}

#alertBox {  
  padding: 0 .2rem;
  position: relative;
  height: 100%;
  overflow: auto; 
  width: 100%;
  margin: 0 auto;
}

#alertBox .alert {
  margin-bottom: .2rem;  
  box-shadow: 0 0 1rem;  
  padding: .4rem 2rem 1rem .4rem;
  
  width: 100%;
  -webkit-transition: opacity 2s; /* Safari */
  transition: opacity 2s;
}

#alertBox .alert .close {  
  padding: .3rem .5rem;
}

#alertBox .timeout {
  position: absolute;
  right: 2rem;  
}

.modal {
  padding-top: 6rem !important;
}

#ModalConfirm {
  z-index: 1281;
}

.modal-backdrop {
  z-index: 1250 !important;
}

.navbar:not(.graph-time-container) {
  z-index: 1000;  
  border-bottom: .1rem solid #2e7b99;    
  background: #fefefe;  
  padding: .2rem !important;
  top: 6rem;
  right: 0;
  left: 0;
  position: fixed !important;
}

.navbar > * {
  padding: 0;
}

.time:not(.form-control) {
  font-size: .8rem;
  opacity: .8;
  position: absolute;
  right: 2rem;
  bottom: -1rem;
}

.sidebar {
  display: none;
  position: absolute !important;  
  margin-top: 3.4rem;
  padding-bottom: 1rem;  
  background: #eee;
  top: 0;
  left: calc(50% - 310px);
  min-height: 35rem;  
  min-width: 520px;
  z-index: 1291;  
  box-shadow: -.1rem 0 1rem #222;
}

.highcharts-container {
  width: 100%;
}

.sidebar.show {
  display: block;
}

.sidebar .modal-body {
  position: relative;
  height: calc(100% - 1.3rem);  
  overflow: auto;
  width: 100% !important;
  padding: 1rem;
}

.sidebar .modal-header {
  background-color: #504e4e;
  color: white;  
  height: 2.7rem;
  padding: 0;
  border-radius: 0;  
}

.sidebar .modal-header .close {
  margin: 0rem;
  padding: .5rem;
}

.sidebar .modal-header .btn-toolbar > * {
  margin-right: .5rem;
  margin-left: .5rem;
}

.sidebar .modal-title {  
  font-size: 1.5rem;
  margin: auto;
}

.sidebar-header {
  padding: .2rem;
}

.ui-resizable-handle:hover {  
  transition-duration: .4s;
  box-shadow: 0px 0px 4px #2d5be0;
  background: #0c2f7533;
}

.pos-relative {
  position: relative; 
}

#Settings .modal-body {
  height: calc(100% - 1rem);
}

.invalid-feedback {
  background: #fff7f7;
  padding: .2rem .5rem 0rem .5rem;
  border: .1rem solid #ddd;
  position: absolute;  
  top: 1.2rem;
  left: 0rem;
  min-width: 18rem !important;  
  max-width: 50%;
  z-index: 4;  
}

.form-control:hover {
  z-index: 50;
}

.invalid-feedback .list-unstyled {
  font-size: .8rem;
  margin-bottom: 0;  
}

.btn-panel button.selected {
  border-color: #337ab7;
  border-top: none;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  color: #337ab7;
}

.btn-panel > .btn, .chat-toolbar > .btn, .chat-toolbar .dropdown .btn {
  color:#66949e;
  transition: 0.2s all ease-in-out;
  line-height: 1.2rem;  
}

.btn-panel .btn:hover, .chat-toolbar .btn:hover {
  color:#0fb71d;
  background: #f8f8f8;
}

.btn-panel .btn:active {
  background: #f8f8f8;
  box-shadow: 0 0 1px #ddd;
}

.btn-panel-conversation .btn,.btn-panel-msg .btn {
  background: #f8f8f8;
}

.btn-panel-conversation .btn:first-child {
  border-right: 1px solid #ddd;
}

.btn-group button.selected {
  border-color: #aaa;
  border-top: 1px solid;
  border-bottom: none;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  border-top-right-radius:7px;
  border-top-left-radius:7px;
}

.chat-toolbar {
  margin-top: 0px;
  margin-bottom: 10px;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.panel-overlay  {
  position: absolute;
  left: 0px;
  right: 0;
  height: 160px;
  background: #ffffff;
  padding: 20px;
  z-index: 200;
}

.panel-overlay-up {
  bottom: calc(0% + 57px);
  box-shadow: 0px -1px 4px #6f6f6f;
}

.panel-overlay-down {
  margin: 0.8rem;
  background: #fff;
  top: 5rem;
  box-shadow: 0 0 .8rem #6f6f6f;
  height: 30rem;
}

.panel-overlay .header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 0;
  background: #fff;
  color: #868686;
  border-bottom: 1px solid #efefef;
}

.panel-overlay .body {  
  top: 7rem;
  position:  absolute;
  padding: 1.5rem;
  left: 0;
  right: 0;
  width: 100%;
}

.panel-overlay .body.scroll {
  overflow-y: auto;
}


.no-border {
  border: none;
}

.input-group-btn .list-group-item .badge{
  position: absolute;
  right: 10px;
}

.collapsing {
    -webkit-transition: none !important;
    transition: none !important;
    display: none !important;
}

#authUsers > .list-group-item > p {
  margin: 0;
  font-size: 1rem;
}

.green {
  color: #2f752f;
}

.red {
  color: red !important;
}

.yellow {
  color: #da0000;
}

.orange {
  color: #ffbc35;  
}

.purple {
  color: purple;
}

.switchContainer {
  position: relative;
  width: 100%;
  padding: 0 .5rem;
}

.portWrapper {
	width: 7rem;  
	display: inline-block;
	vertical-align: top;
	border: 2px solid #ddd;    
	height: 8.6rem;
	position: relative;
  cursor: pointer;
}

.portWrapper .ipaddress {
  font-size: .8rem;
}

.portWrapper > .title {
	font-size-adjust: .6;  
}

.portWrapper > * {
	height: 1.4rem;
	text-align: center;
}

.portWrapper.blue {
	border-color: #29298d;	
	color: #29298d;
  background: #b0edc0;
}

.portWrapper.yellow {
	border-color: #c8d409;	
	color: #233;
  background: #c3f8c1;
}

.portWrapper.unplugged {
  opacity: .5;
  background: #444;
  color: #fff;
}


.input-group-prepend label {  
  width: 8rem;
  font-size: .8rem;
}

#deviceTrafficChart,
#serverTrafficChart {
  margin: 1rem 0;
  height: 15rem;
  width: 100%;
  box-shadow: 0 .1rem .1rem #888;  
}

.checkbox-subset {
  display: inline-flex;
  width: 100%;  
  margin-bottom: .5rem;
  padding: .1rem;
  box-shadow: 0 0 .1rem;
  background: #eee;  
}

.checkbox-subset > *:not(:last-child) {
  margin-right: .5rem;
}

#asAuto .auto-status,
#asAuto .auto-message {
  display: none;
}


.card.task {
  position: fixed;
  top: 6rem;
  display: none;
  box-shadow: .1rem .1rem 1rem #151515;  
  margin: 0 5%;
  min-height: 20rem;
  height: 37rem;  
  min-width: 35rem;  
  z-index: 1101;
}

.card.task .card-body {
  overflow: auto;    
}

.card.task .card-footer {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.card.task.maximized {
  position: fixed;
  top: 3.3rem !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;  
  margin: 0 !important;
  height: auto !important;
  width: auto !important;    
  z-index: 1100 !important;
}

.card.task .modal-header .close {	
	margin: -1rem 0;
}

.card.task.focused .modal-header {
  background: #2e7b99;
}

.card.task .modal-header,
.card.task .detail-header {
  padding: .5rem 1rem;
  margin: -.1rem;
  background: #d0d0d0;
  border: .12rem solid #696969;
  color: #fff; 
}

#map-address {
  color: #222;
}

.detail-header {
  background: #2e7b99 !important;
}

.list-group-item .task-body {
  max-height: 20rem;
  overflow-y: auto;
}

.script-area {
  width: 100% !important;
  height: 100% !important;  
}

.dataTable th {
  text-align: center;
}

.dataTable th,
.dataTable td {
  border-left: 1px solid #ddd;
  vertical-align: middle !important;
}

.dataTable td {
  border-bottom: .1rem solid #fff !important;  
}

.dataTable tr:hover td {
  border-bottom: .1rem solid #448 !important;
}

.dataTable thead {
  background: #d5d5d5;
  color: #425090;
}

.dataTable {  
  border-bottom: .1rem solid #ddd;
  border-right: .1rem solid #ddd;  
}

#ipTable {
  font-size: .9rem;
}

.dataTable .checkbox {  
  max-width: 40px;
}

.dataTable .actions {
  max-width: 50px;
}

table.compact th {
  padding: 5px;
}

table.compact td {
  padding: .2rem;
}

#ipTable td {
  padding: 0 .2rem;
}

table.compact tr.me td:first-child {
  background: #188dcc;
  color: #fff;
}

.dataTable tr.opened {
  background: #0047a433 !important;  
}

.dataTable tr.opened td {
  border-bottom: 1px solid #aaa;
}

#endpointAllTrafficChart,
#serverAllTrafficChart {
  width: 100%;
  height: 15rem;
}


#subnetviewer-graph .wrapper {  
  width: 100%;
  text-align: center;
}

#subnetGraphCanvas {  
  display: inline-block;
  max-width: 42rem;
  margin: auto;
}

.addressWrapper {
  display: inline-block;
  margin: -.2rem;  
  padding: .2rem;
  width: 3rem;
  text-align: center;
}

.addressWrapper .title {
  padding: .3rem;
  border: .1rem solid #999;    
  background: #aaa;
  color: #bee;
}

.addressWrapper.inuse .title{
  background: #585;
  color: #eee;
  cursor: pointer;
}

.addressWrapper.inuse.serverIp .title {
  background: #bdd;
}

.addressWrapper.inuse.network .title {
  background: #5bc;
}

.addressWrapper.inuse.broadcast .title {
  background: #4ab;
}

.addressWrapper.inuse.routed .title {
  background: #6aa;
}

.addressWrapper.highlight .title {
  border: .1rem solid #cff;    
}

.sidenav-btn {
  display: none !important;
}

.ip-manual {
  background: #67d0e1 !important;
  font-weight: bold;
}


.ip-network {
  background: #cccccc !important;
  font-weight: bold;
}

.ip-broadcast {
  background: #999999 !important;
  font-weight: bold;
}

.ip-assigned {
  background: #6fa8dc !important;
  font-weight: bold;
}

.ip-neighbour {
  background: #d9d8ff !important;
  font-weight: bold;
}


.pingable {
  display: inline-flex;
  position: relative;  
  width: 100%;
}

.pingable .action-pingable {  
  position: absolute;
  display: none;    
}

.pingable:hover span {
  color: #33f;
}

.pingable:hover .action-pingable {
  display: inline-flex;  
}

#EditUPS .hardware {
  max-width: 15rem;
  max-height: 15rem;
}


.action-group,
.pinger-summary {
  display: inline-flex;    
  width: 100%;  
  padding-right: 1rem;
  font-size: 1.2rem;  
}

.iconAction {
  display: block;
  max-width: 22rem;
  text-align: center;
}

.iconAction .action-group {
  display: inline-block;
  white-space: normal !important;
}

.action-group i:first-child,
.pinger-summary i:first-child {
  margin-left: auto;
}

.action-group i,
.action-pingable i,
.pinger-summary i {  
  margin: 0;
  cursor: pointer;  
  padding: .5rem;
  color: #777;
}

.action-group i:hover,
.action-pingable i:hover,
.pinger-summary i:hover {      
  color: #00AEEF;
}

td.editable {
  cursor: pointer;  
}

.table-editing {  
  border-bottom: .1rem solid #44d !important;
  border-right: .1rem solid #44d !important;  
}

.table-editing > div {
  width: 100%;
  height: 1rem;
  position: relative;
}

.table-editing input {  
  margin: 0;
  padding-top: 0;
  padding-right: 2rem;
  border: 0;
  width: 100% !important;
  background: 0;
  line-height: 1rem;
  position: relative;
}

.table-editing .btn-group {   
  padding: 0;
  position: absolute;
  z-index: 1;  
  color: #777; 
  right: -1rem;
  top: -.7rem;
  margin: 0;
}

.table-editing .btn-group i {
  margin: 0 .1rem;
}

.table-editing .btn-group i:hover {
  color: #1cad32;
}

.reditable {
  display: inline-block;    
  position: relative;
  min-width: 5rem !important;
  line-height: 1.2rem;
  text-align: left;
}

.reditable:hover{
  box-shadow: 0 0 .1rem #444;
}

.reditable .btn-group {
  width: 5rem !important;
}

.context-nav form {
  display: none;
}

.task-loading-icon {
  display: none;
}

.task.task-loading {
  box-shadow: 0px 0px 1rem green !important;
}

.task.task-loading .task-loading-icon {
  display: block;  
}

.card.task.focused {
  z-index: 1236 !important;
  box-shadow: .1rem .1rem 1rem #003971;
}

.card.task.focused.maximized {
  z-index: 1248 !important;
}

.appCanvas {
  position: static;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow: auto;
  z-index: 1100;
}

.appCanvas.novis {
  display: none;
}


.form-control {
  padding: 0rem .5rem !important;
}

.card.task .card-header {
  padding: .1rem;
  padding-bottom: 0;
  margin: 0 auto !important;
  position: relative !important;
}

.form-group,
.tikDetails,
.ubntDetails,
.metroDetails,
.form-check-list,
.sayHelloContainer,
.group-box {
  margin: .2rem auto !important;  
  max-width: 500px;  
}

.group-box {
  position: relative;
  border: .1rem solid #aaa;
  border-radius: .5rem;
  margin-top: 1.5rem;    
  padding-top: .75rem;
}

.group-box-label {
  position: absolute;
  top: -.75rem;
  left: .5rem;
  padding: 0 .5rem;
  border: .1rem solid #aaa;
  background: #eee;
}

.nav-link.has-error,
button.has-error {
  background-image: url("/images/form-invalid.png");
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: right .3rem center;  
  padding-left: .5em;
  padding-right: 1.5rem;
}

.history-dropdown {  
  position: absolute;
  display: none;  
  top: 2.3rem;
  background: #fdfdfd;
  border: .1rem solid #446;
  z-index: 100;
  max-height: 12rem;
  overflow: auto;
}

.history-dropdown ul,
.table-link-list {
  padding: 0;
  margin: 0;
  min-width: 10rem;
}

.history-item,
.table-link-list .table-link-editor {
  list-style: none;
  margin: 0;
  padding: .2rem .5rem; 
  color: #668;
}

.history-item:not(:last-child),
.table-link-list .table-link-editor:not(:last-child) {
   border-bottom: .1rem solid #aaa;  
}

.history-item:hover {
  background-color: #eee;
  color: #44d;
  cursor: pointer;
  border-color: #844;
}

.history-item.highlight,
.sms-item.higlight {
  background: #cdd;
  color: #66f;
  border-color: #456;
}

.table-link-editor,
.table-link-group,
.p2padd {
  cursor: pointer;
  font-style: italic;
  color: #272768;
  padding: .2rem;
  line-height: 1rem;
  position: relative;
}

#ipTable .table-link-editor,
#ipTable .table-link-group {
  line-height: .8rem;
  padding: 0;
}

.table-link-editor:hover,
.table-link-group .dropdown i:hover,
.table-link-group:hover span,
td.editable:hover,
.p2padd:hover {  
  color: #00AEEF;
}

.table-link-editor label {
  margin: 0;
  cursor: pointer;
  padding: 0rem 1rem 0rem 0rem;
}

.table-link-editor i:not(.static) {
  position: absolute;
  display: none;
  right: 0;
}

.table-link-editor:hover i:not(.static) {
  display: inline-block;  
}

.table-link-list {  
  display: none;
  cursor: pointer;
}

.table-link-group > .table-link-list {
  display: none;
  position: relative;
  z-index: 1000;
  background: #fdfdfd;
  border: .1rem solid #446;
  z-index: 100;
  max-height: 12rem;
  margin-top: -1rem;
  box-shadow: 0 0 .2rem #444;  
  overflow-y: auto;
  overflow-x: hidden;
}

.control-box i {
  color: #002e8d;
}

.control-box i:hover {
  color: #f7f7f7;
}

.pwd-reveal {
  position: relative;
  width: 100%;
}

.pwd-reveal input {
  width: 100%;
  padding-right: 2rem;  
  color: #444; 
}

.pwd-reveal:not(.input-group) input {
  border: none;
  background: none;
  padding-right: 1rem;  
}

.pwd-reveal > i {
  display: none;
  position: absolute;
  right: .3rem;
  top: 25%;
  color: #666;
  z-index: 100000;
}

.input-group.pwd-reveal > i {
  right: 2.6rem;
}

.pwd-reveal:hover > i {
  display: block;
}

.pwd-reveal > i:hover {
  color: #0ba733;
}

.nav-link:not(.active) {
  cursor: pointer;
}

.form-group.is-invalid{
  box-shadow: 0 0 .5rem #f66;
  border-radius: .3rem;  
}

.input-group.has-error input {
  color: #d22;
}

#MTAddGroup {
  min-height: 630px;  
}

#MTAddUser {
  min-height: 550px;
}

.policies {
  padding: 1rem;
  margin: 0 !important;
  border: .1rem solid #ddd;
}

.policies > div label {
  display: block;
  margin: .2rem;
}

.form-group-heading {
  display: inline-flex;
  width: 100%;
  vertical-align: middle;
}

.form-check {
  padding: 0rem 0rem 0rem 1.4rem !important;  
  margin: 0 !important;
  display: block;  
  font-size: .9rem;
}

.form-check-row {
  display: inline-flex;
  width: 100%;
  margin-bottom: .5rem;
}

.form-check-row .btn-group {
  top: .5rem;
}

.tabclick {
  color: #44f !important;  
  cursor: pointer;
  padding: .3rem 1rem 0 1rem !important;
  margin: .1rem .3rem .6rem .3rem;
}

.tabclick:hover {
  box-shadow: 0 0 .1rem #444 !important;
  color: #44f;
}

.form-check-row .btn.help {
  background: none;    
  box-shadow: none !important;
}

.custom-file-input ~ .custom-file-label::after {
    content: "Select";
}

.form-check:first-of-type {
  margin-top: .5rem !important;  
  padding-top: .5rem !important;
}

.form-check:nth-last-of-type(1) {
  color: #444;
  font-size: .9rem;
  margin-bottom: 1rem !important;
}

.form-check .btn-group {
  margin-top: -.7rem !important;
}

#MTAddSkin {
  height: 600px;
}

#MTAddSkin .form-control[data-key=contents] {
  max-height: 100% !important;
}

i.modified {
  color: #ff9140;  
}

i.modified.fa-minus {
  color: #f44;
  cursor: pointer;
}

i.modified.fa-plus {
  color: #2d2;
}

.input-group.used i.fa-check {
  color: #08d508;
  display: block !important;
}


.form-group {
  position: relative;
}

.input-group-nav-controlbox {
  display: inline-flex;  
  padding: 0rem;
  height: 2.2rem;
  margin: -.3rem -.6rem -.3rem -.3rem;
}

.input-group-nav-item:not(:last-child) {
  /*! display: none; */
}

.input-group-nav-item:last-child {
  display: inline-flex;
}

.input-group-nav-controlbox:hover .input-group-nav-item {
  display: inline-flex;
}


.input-group label {  
  background: #fff !important;  
}

.input-group-append label,
.hip-btn {
  color: #777 !important;
}

.input-group-append:hover label,
.hip-btn:hover,
.form-check-row .btn.help:hover,
.helpMax:hover {
  color: #00AEEF !important;
}

.input-group input[readonly],
.input-group.readonly select {
  background: #fafafa !important;
}

.input-group.readonly select {
  pointer-events: none;
  cursor: none;  
}

.rtcWrapper .rtcEnabled {
  display: inline-flex;
}

.rtcWrapper .form-control-sm {
  height: 2rem;
  padding: 0 .2rem;
  width: 50%;
}

/* horizontal panel*/

.panel-container {
  position: relative;
  display: flex;
  flex-direction: row;    
  overflow: hidden;
  padding: 0;
  height: 100%;
  /* avoid browser level touch actions */
  touch-action: none;
}

.panel-left {
  position: relative;
  flex: 0 0 auto;  
  /* only manually resize */
  padding: 1rem 1rem 22rem 0 !important;
  width: 400px;  
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 300px !important;    
  height: 100%;
  min-width: 150px;    
  margin-top: 2rem;  
  margin-bottom: 32rem !important;
}

.panel-left form:not(.form-inline) {
  padding-bottom: 5rem;
}

.panel-right .graph-history {
  margin-bottom: 5rem;
}

.panel-right {
  position: relative;
  flex: 1 1 auto;
  /* resizable */
  display: block;
  padding: 0rem .5rem 0rem .5rem;
  width: calc(100% - 3rem);
  overflow-x: auto;
  overflow-y: auto;
  height: calc(100% - 3rem);
  min-height: 200px;
  min-width: 200px !important;
  border-left: .1rem solid #ccc;
  margin-top: 1rem !important;
  margin-bottom: 10rem !important;
}

.panel-hide {
  position: absolute;
  left: 0rem !important;
  margin: 0 !important;
  top: -.2rem;
  padding: .7rem;
  z-index: 1000;
  background: #fff;  
  color: #456;
}

.panel-hide:hover {
  color: #00AEEF !important;
}

.panel-left.hidden {  
  display: none !important;
}

.vendor-logo {
  display: inline-block;  
  margin: auto;
}


.vendor-logo img {
  max-height: 2.4rem; 
  max-width: 12rem;
  padding-left: 1rem;
}

.dataTable td img:not(.fileman-image) {
  max-height: 1.4rem !important;
  max-width: 4.5rem !important;
}

#mapItemsTable td img {
  max-height: 4rem;
}

.dataTable td img.full {
  max-height: 8rem !important;
  max-width: 15rem !important;
}

.equip {
  
}

.equip-up {
  color: green;
}

.equip-down {
  color: #444;
}

.equip-new {
  color: orange;
}

.pingResults .list-group-item {
  padding: .3rem .7rem;
}

.scroll {
  display: block;
  position: relative;
  height: 100%;
  overflow: auto;
}


.input-group > div > *,
.input-group > .form-control {
  border: none !important;
  border-bottom: .1rem solid #ddd !important;  
  margin-right: 0;  
  line-height: 1.2rem;
}

.form-control {
  margin-right: .1rem;          
  background: #fafafa;
}

.context-nav .form-control {
  padding: .5rem !important;
}

.card.task select {
  height: 1.9rem !important;
}

.input-group-nav-controlbox {
  padding: 0 .3rem;
}

.input-group-nav-controlbox > div {
  padding: .3rem 0 !important;  
}

.input-group-nav-btn:hover {
  cursor: pointer;
}

.input-group {  
  border-bottom: .1rem solid #fff !important;  
  border-radius: .3rem;
}

.input-group:hover {  
  border-bottom: .1rem solid #aaa !important;  
}

.input-group:hover > .form-control {
  color: #22d;
  background: #fafaff;
}

.dataTable td,
.dataTable th {
  white-space: nowrap;
  /*! overflow: hidden; */  
}

.context-nav select {
  max-width: 10rem;
}

.tik-toolbar > .btn-group i {
  color: #666 !important;  
}

.tik-toolbar .btn-group > * {
  background: #fcfcfc;
}

.tik-toolbar .form-control {
  height: 100%;  
}

.search {
  position: relative;
  border: .1rem solid #23f;
  border-radius: .1rem;
  padding: .2rem;
  
}

.search:hover {
  box-shadow: 0 0 .5rem #444;  
}

.search input {
  margin-right: 3rem !important;  
}

.search i {
  position: absolute;
  top: 0;
  right: 0;
  opacity: .3;
  padding: .75rem .4rem;
}

.search:hover i {
  opacity: 1;
  color: #6a7;
}

.search i:hover {
  box-shadow: 0 0 .2rem;  
}


@media screen and (max-width: 600px) {
  .fileman-preview {
    max-width: 10rem;
  }
  
  .dataTable td {
    white-space: normal !important;
    overflow: visible !important;      
    
  }
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
  html {
    font-size: .75rem;
  }
  .panel-container {
    display: inline-block !important;
  }
  .panel-left {
    min-width: 300px;
  }
  .task-open .globalSearch .input-group{
    display: none;
  }
  .navtool-pre {
    display: none;
  }
  .task-open .pingMonitor {
    display: none !important;
  }
  .task-open .notification-center {
    display: none !important;
  }
}

.input-group-append .help:not(.static) {  
  border-bottom: none !important;
  /*! left: 0; */
  height: 100%;
}

.help.static {
  position: absolute;
  background: none;
  border: none;
  right: 0 !important;
}

.container-fluid {
  padding-left: 0 !important;  
  
}

.address-pingable {
  cursor: pointer;
  color: #44f;
}

.address-pingable:hover {
  background: #ada;
}

.pingable {
  display: inline-flex;
  position: relative;  
  width: 100%;
  padding-right: 4rem;
}

.pingable .action-pingable {
  cursor: pointer;
  position: absolute;
  display: none;  
  right: .5rem;
  top: .2rem;  
}

.pingable:hover .action-pingable {
  display: inline-flex;  
}


.ip-pingable {
  position: relative !important;  
  display: block;  
}

.ip-pingable > * {
  display: inline-flex;
  margin:  0 !important;
  padding: 0;
}

.ip-pingable .ip-actions {
  position: absolute !important;
  display: none;
  right: 0;
  top: 0;
}

.ip-pingable .ip-actions i {
  margin: 0 !important;  
  padding: 0 .2rem !important;
}

.ip-pingable:hover {
  color: #00AEEF;
}

.ip-pingable:hover .ip-actions {
  display: block;
}


.item-upgrading td:first-child {
  border-left: .3rem solid #a21fec !important;    
}
.item-upgrading td {
  border-bottom: .1rem solid #a21fec !important;    
}


.item-online td:first-child {
  border-left: .3rem solid #2f752f !important;    
}
.item-online td {
  border-bottom: .1rem solid #2f752f !important;    
}

.blocked td:first-child,
.item-offline td:first-child {
  border-left: .3rem solid #da0000 !important;    
}
.blocked td,
.item-offline td {
  border-bottom: .1rem solid #da0000 !important;    
}


.item-new td:first-child {
  border-left: .3rem solid #ffbc35 !important;    
}
.item-new td {
  border-bottom: .1rem solid #ffbc35 !important;    
}

.item-spare td:first-child {
  border-left: .3rem solid #96a5e4 !important;    
}
.item-spare td{
  border-bottom: .1rem solid #96a5e4 !important;    
}

div.item-online {
  color: #2f752f;
}

div.item-offline {
  color: #da0000;
}

div.item-spare {
  color: #96a5e4;
}

div.item-new {
  color: #ffbc35;
}


.modal-header.item-online {
  background-color: #2f752f !important;
}

.modal-header.item-offline {
  background-color: #da0000 !important;
}

.modal-header.item-spare {
  background-color: #96a5e4 !important;
}

.modal-header.item-new {
  background-color: #ffbc35 !important;
}

.a-type-updown td {  
  border-bottom: .1rem solid #881D1D !important; 
  color: #822c12;
}
.a-type-bandwidth td {  
  border-bottom: .1rem solid #FFA500 !important; 
  color: #ca1616;
}
.a-type-dhcpnew td {  
  border-bottom: .1rem solid #FFA500 !important; 
  color: #4a775a;
}
.a-type-dhcp td {  
  border-bottom: .1rem solid #FFD700 !important; 
  color: #3c552c;
}


tr td {
  border-top: none !important;
  /*! opacity: .9; */
}

tr td:last-child {
  border-right: .1rem solid #eee !important;
}

tr:hover td {
  opacity: 1;
  border-bottom: .1rem solid #fdf !important;
}

tr:hover td:last-child {
  border-right: .1rem solid #4af !important;  
}

.notification-center {
  padding: .3rem;
  position: relative;  
}

.notification-wrapper {
  height: 2rem; 
  z-index: 1240 !important;
  
}

.notification-icon {
  padding: .4rem;
  color: #cbcbcb;
  position: relative;
  
}

.notification-icon:hover,
.notification-box .n-control i:hover,
.ni-control i:hover  {  
  color: #6d6;
}

.notification-box.opened {
  display: block;
  z-index: 1234 !important;
}

.n-refresh .notification-box {
  display: none !important;
}

.notification-box {
  top: 2rem;
  display: none;
  /*position: absolute !important;*/
  width: 30rem;
  height: 70rem;
  max-height: 60% !important;
  right: 0;  
  background: #3a3a3b;
  z-index: 1368 !important;
  box-shadow: 0 .2rem .2rem;
  color: #aaf0de;
  padding: .5rem;
  border-radius: .3rem;
  padding-bottom: 2rem;
}

.alerts .notification-box {
  color: #fd8e00;
}

.alerts .ni-header {
  color: #310202;
  background: #e3b1b1;
  
}

.notification-icon .counter {
  display: none;
  position: absolute;
  z-index: 1;  
  right: -.1rem;
  top: -.7rem;
  color: #fff;
  font-size: .9rem;
  font-weight: bold;
  background: #824;
  border-radius: 1rem;
  padding: .1rem .2rem .2rem .2rem;
}

.notification-box .n-header {
  position: relative;
  display: inline-flex;
  width: 100%;
}


.notification-box .n-title {  
  font-size: 1.2rem;
  margin-right: auto;
}

.notification-box .n-control i,
.ni-control i {
  padding: .3rem;
}

.n-item {  
  padding: 0 .2rem;
  margin: .1rem 0 .5rem .2rem;
  width: calc(100% - .4rem);
  display: block;
}

.ni-content .alert {
  padding-bottom: 2rem;  
}

.ni-content .alert .time {
  bottom: 0;
  font-size: .7rem;
  opacity: .7;
}

.ni-content .hardware {
  max-height: 3rem;
  max-width: 3rem;
}

.ni-header {
  display: inline-flex;
  position: relative;
  width: 100%;  
  background: #232;
}

.n-item:hover {  
  box-shadow: 0 0 .1rem #fff;
}

.ni-control {
  margin-left: auto;
}

.n-ts {
  margin-right: 1rem;
}

.ni-title {
  padding: .1rem .2rem;
  font-size: 1rem; 
  cursor: pointer;  
}

.ni-title:hover {
  color: #0ef;
}

div[data-key=resources] {
  position: relative;
  display: inline-flex;  
  width: 100%;  
}

.s-title {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-transform: capitalize;  
}

.s-line {
  display: flex;  
  width: 17rem;
  font-size: .9rem;
  padding: .1rem;
  line-height: 1rem;
}

.s-line > div {
  margin: 0 .2rem;
  width:  55%;
}

.s-line .s-label {
  width: 45%;
}

.radio-box .s-line > div:first-child {
  width: 20%;
}

.radio-box .s-line > div:last-child {
  width: 80%;
}

.s-line .s-value {
  text-align: right;    
}

.s-info,
.port-info {
  display: inline-block;
  position: relative;
  padding: .5rem;
  margin: .2rem;
  box-shadow: 0 0 .2rem #222;
  background: #3d3d5a;  
  word-break: break-all;
}

.s-label {
  color: #cff;
  text-align: left;
  height: 1rem;
}

.s-value {
  color: #4f4;
  text-align: center;    
  height: 1rem;
}

.port-label {
  font-weight: bold;
}

.port-info {  
  padding: 0;
  min-width: 5rem;
  text-align: center;
}

.port-info:not(.running),
.graph-wrapper:not(.running){
  opacity: .6;
  box-shadow: 0 0 .2rem #fff;
}

.port-info.running,
.graph-wrapper.running {
  box-shadow: 0 0 .2rem green;
}

.port-info.power {
  box-shadow: 0 0 .3rem red;
}


.port-title {  
  display: block;    
  padding: 0;
  color: #cff;
  padding: 0.2rem;
  background: #3d3d5a;
}

.port-content {
  background: #dedede;
  display: block;    
  color: #0b0074;
  padding: .1rem;
}

.list-group-item.active {
	color: #002e72 !important;
	background-color: #d5d5d5 !important;
	border-color: #9b9b9b !important;
}

.taskBar {
  position: fixed;
  display: inline-flex;
  top: 0;
  background: #555 !important;
  z-index: 1249;
}

.iface-container {
  display: block;
  width: 100%;
  height: 8rem;
  padding: 1rem 0 1rem 0;  
}

.iface {  
  margin-left: 1.5rem;
  padding-left: 1.5rem;
  color: #33f;
  display: block;
  
}


.image-preview {
  height: 15rem;
  margin: .4rem;
  border: .2rem solid #444;
  border-radius: .1rem;
}

.image-preview.selected {
  border-color: #468;
  box-shadow: 0 0 1rem #468;
}

td .image-preview {
  max-height: 6rem !important;  
  width: auto !important;
  max-width: initial !important;
}

.task-right {
  right: 0 !important;
  width: 75%;
}

@media screen and (max-width: 1200px) {  
  table {
    font-size: .85rem;
    width: 100% !important;
  }
  #subnetGraphCanvas {
    max-width: 91rem;
  }
}

@media screen and (max-width: 900px) {  
  table  {
    font-size: .8rem;     
  }
  .context-nav.active {
    display: inline-flex !important;
  }
  #subnetGraphCanvas {
    max-width: 23rem;
  }
  .sidenav.hiding {
    display: none;
  }
  .content {
    margin-left: .5rem;
    top: 12rem;
  }  
  .contentwrapper {
    left: 0 !important;
    margin-right: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .panel {
    width: 100% !important;
    right: 0 !important;
  }
  .sidenav-btn {
    display: block !important;
  }
}

@media screen and (max-width: 750px) {
  
  .notification-box {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: 3rem !important;
    bottom: 0 !important;
    overflow: auto !important;
  }
  
  #subnetGraphCanvas {
    max-width: 23rem;
  }
  
  .sidebar {       
    left: .1rem !important;
    top: 2rem !important;
    width: 99% !important;
    min-width: 99% !important;
    right: 0 !important;
    margin-left: 0;
  }
    
  .dataTable td {
    overflow: auto;
    white-space: normal;
  }
  .panel-container {
    display: inline-block !important;    
  }
  .panel-right {
    border: none !important;
  }
  .panel-container {
    overflow-y: auto !important;
  }
  .panel-container > div {
    display: inline !important;
    position: relative !important;
  }
}

@media (max-width: 750px) {    
  .appCanvas:not(.novis) {
    /*! position: fixed; */
    display: inline-block !important;
    z-index: 1100;
  }
  .content {
    top: 14rem;
  }
  .appCanvas:not(.novis) .spacer {
    height: 15rem;
    background: #ddd;
  }
  .card.task {    
    position: fixed;
    left: 0 !important;
    top: 3rem !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    margin-left: 0 !important;       
    box-shadow: none !important;
    z-index: 1100 !important;
    border-bottom: .2rem solid #777;
  }  
  
  .context-nav .active input.nav-result {
    max-width: 20%;
  }
  body .form-control:not(textarea) {
    padding: 0 .2rem !important;
    height: 2.5rem !important;
  }
  .card.task [data-action=maximize] {
    display: none;
  }
  .card.task.focused {
    z-index: 1101 !important;
  }
  .form-group {
    margin-bottom: .1rem;
  }
  .sidenav {
    position: fixed;
    top: 9.2rem !important;
    bottom: 0 !important;
    height: 100%;
    width: 100%;
    padding-top: 5rem;
    overflow: auto !important;
    z-index: 1000;
    box-shadow: .1rem .1rem 1rem #444;
  }
  .sidenav .list-group {
    display: inline-block;
    width: 100%;    
  }
  .sidenav .list-group-item {
    width: 32%;
    font-size: 1.2rem;
    text-align: center;
    padding: 3rem 1rem !important;    
    display: inline-block;
  }
  
  .panel-container {
    overflow-y: auto !important;
    width: 100%;
    margin-bottom: 50rem !important;
  }
  .panel-container > div {
    display: inline !important;
    position: relative !important;
  }
}


.card.task.right {  
  left: unset !important;
  right: 0 !important;
  margin: 0;
  bottom: 0 !important;
  height: unset !important;
}

.input-group .select2-container {
  width: 30rem !important;
}

.cal-i {
  padding: .1rem;
  border-bottom: .1rem solid;
}

.cal-desc {
  color: #535247;
  background: #dbe8d6;  
}

.cal-note {
  color: #024f9b;
  background: #dadbc6;
}
.cal-comment {
  color: #172c42;
  background: #f9e187;
}
.cal-type {
  color: #130a12;
  background: #dfc4b6;
}
.cal-status {
  color: #003a75;
  background: #ccce92;
}
.cal-contact {
  color: #000;
  background: #9fce92;
}