@import url('dashboard.css');

/* these are used to resize font-icons when necessary */
.s24 { font-size: 24px; }
.s32 { font-size: 32px; }
.s48 { font-size: 48px; }
i.fa { font-size: 24px; }

html {
    /* font-size: 62.5%; */
    font-size:1em;
}

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

.navbar { border-radius:0; }
.nav.navbar-nav.navbar-right { margin-right: 8px; }

.main-menu { z-index: 10000; }
[@role="tooltip"] { z-index: 11000; }

.active { color: red; font-weight: bold }

.statevis {
  position: fixed;
  right: 2em;
  bottom: 2em;
  z-index: -1;
}

.flex-h {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.stdGrid {
  width: 800px;
  height: 250px;
}
.configurationsGrid { width: 800px; height: 600px; }

.grid .ui-grid-header-cell {
  height: 60px;
}

.bf-config-entry-array > md-toolbar { height: 48px; min-height: 48px; }
.bf-config-entry-object > md-toolbar { height: 48px; min-height: 48px; }
.bf-config-entry-timeseries > md-toolbar { height: 48px; min-height: 48px; }

.material-icons.md-18 { font-size: 18px; }

div.flash-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99998;
    background: rgba(0,0,0,0.1);
    border-radius: 0px;
}
div.flash-popup div.alert {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 20%;
    z-index: 99999;
    border-radius: 4px;
    /*
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.2);
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    */
}

/**********************
 * Map
 **********************/
.map-hint-control {
    padding:5px 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 5px;
}

.map-hint-control:empty {
    display: none;
}

.map-entity-control {
    padding:5px 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 5px;
}

.map-entity-control:empty {
    display: none;
}

img.leaflet-marker-draggable { opacity: 0.7; }
img.leaflet-marker-icon.hilight { opacity: 0.7; }
path.leaflet-interactive.hilight { stroke-width: 5; }

div.leaflet-labels-pane div.label {
    font-size: 11px;
    background: rgba(255,255,255,0.3);
    color: blue;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
    padding: 2px;
}

textarea.xsltCode {
    font-family: monospace;
    font-size: small;
    line-height: normal;
}

textarea.jsCode {
    font-family: monospace;
    font-size: small;
    line-height: normal;
}

textarea.jsonCode {
    font-family: monospace;
    font-size: small;
    line-height: normal;
    width: 100%;
}

td.numeric { text-align: right; }

/*table.registration { width: 50%; }*/
table.registration td { padding: 8px; border-top: thin solid gray; min-width: 30%; width: 30%; }
table.registration th { padding: 8px; border-top: thin solid gray; min-width: 10%; width: 10%; }

table.registrationSimple td { padding: 8px; border-top: thin solid gray; }
table.registrationSimple th { padding: 8px; border-top: thin solid gray; }

user-prefs-comp {
    height: 100%;
}


div.thumbnail.dashboard {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  min-width: calc(100% - 24px);
  min-height: calc(100% - 24px);
  overflow: hidden;
}
div.thumbnail.dashboard img {
  object-position: 50% 50%; /* default value: image is centered*/
  margin: 40px 20px 0px 20px;
  width: calc(100% - 40px);
}

.dashboard-thumbnail-heading {
    padding-top: 4px;
    color: black;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;     /* fallback */
    max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.dashboardThumbnailTile {
    background-color: #fff;
}
.dashboardTileHeader {
    padding: 8px;
}
.dashboard-thumbnail-caption {
    text-align: right;
}
.dashboardThumbnailTile md-grid-tile-header figcaption {
    width: 100%;
}

devices-comp {
    height: 100%;
}
devices-comp > div:nth-child(1) {
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  margin: 8px;
}
devices-comp.ng-scope > div:nth-child(1) > div:nth-child(2) {
  height: calc(100% - 52px);
}

flash-message .alert-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99998;
    background: rgba(0,0,0,0.1);
    border-radius: 0px;
}
flash-message .alert-container div.alert {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 20%;
    z-index: 99999;
    border-radius: 4px;
    /*
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.2);
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    */
}

mo-input {
    height: 100%;
}