body {
  font-family: Arial, helvetica, sans-serif;
  height: 100%;
  overflow : auto; 
}

div#appBody {
  height: 100vh;
}



/*
 * a simple, CSS-based spinner
 */
@keyframes spinner {
  to {transform: rotate(360deg);}
}
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

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

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

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

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

/*
 * these are the same breakpoints used by material
 */
@media only screen and (max-width: 599px) {
    /* xs */
    md-grid-list.dossierList { width: 300px; }
    md-grid-list.batimentList { width: 300px; }
    md-grid-list.dashboardList { width: 300px; }
}
@media only screen and (min-width: 600px) {
    /* gt-xs */
}
@media only screen and (min-width: 600px) and (max-width: 959px) {
    /* sm */
    md-grid-list.dossierList { width: 600px; }
    md-grid-list.batimentList { width: 600px; }
    md-grid-list.dashboardList { width: 600px; }
}
@media only screen and (min-width: 960px) {
    /* gt-sm */
}
@media only screen and (min-width: 960px) and (max-width: 1279px) {
    /* md */
    md-grid-list.dossierList { width: 900px; }
    md-grid-list.batimentList { width: 900px; }
    md-grid-list.dashboardList { width: 900px; }
}
@media only screen and (min-width: 1280px) {
    /* gt-md */
}
@media only screen and (min-width: 1280px) and (max-width: 1919px) {
    /* lg */
    md-grid-list.dossierList { width: 1200px; }
    md-grid-list.batimentList { width: 1200px; }
    md-grid-list.dashboardList { width: 1200px; }
}
@media only screen and (min-width: 1920px) {
    /* gt-lg */
}
@media only screen and (min-width: 1920px) {
    /* xl */
    md-grid-list.dossierList { width: 1800px; }
    md-grid-list.batimentList { width: 1800px; }
    md-grid-list.dashboardList { width: 1800px; }
}

img.thumbnail {
    width: 96px;
    height: 96px;
    object-fit: scale-down;
}
.card-media img.thumbnail {
    width: 128px;
    height: 128px;
    object-fit: scale-down;
}

div.dossier {
    border-radius: 10px 10px 10px 10px;
    border: 2px solid black;
}

div.dossierPreview {
    width: 256px;
    height: 256px;
}
div.dossierPreview img.thumbnail {
    width: 128px;
    height: 128px;
    object-fit: scale-down;
}

div.buildingPreview {
    width: 128px;
    height: 128px;
}
div.buildingPreview img.thumbnail {
    object-fit: scale-down;
    width: 96px;
    height: 96px;
}

canvas#preview {
    display: none;
}

.hint {
  position: absolute;
  left: 5px;
  right: auto;
  bottom: -15px;
  font-size: 14px;
  line-height: 14px;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  color: grey; 
}


div.dossierList {
    height: 100%;
}
div.dossierList md-content[flex] {
    height: 100%;
}

.md-open-menu-container { z-index: 100000; }

.md-sidenav-left .preview {
    height: 196px;
    width: 196px;
    object-fit: scale-down;
}

.opIndex {
    padding-right: 16px;
}

/**********************
 * Flash messages
 **********************/
.alert {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    margin-left: 20%;
    margin-right: 20%;
}
.alertIn, .alertOut {
    -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.22s cubic-bezier(0.25, 0, 0.25, 1);
    -moz-transition:    -moz-transform 0.22s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.22s cubic-bezier(0.25, 0, 0.25, 1);
    -o-transition:      -o-transform 0.22s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.22s cubic-bezier(0.25, 0, 0.25, 1);
    transition:         transform 0.22s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.22s cubic-bezier(0.25, 0, 0.25, 1);
}
.alertIn.ng-hide-remove, .alertOut.ng-hide-add.ng-hide-add-active {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0px, 0px);
    transform: translate3d(100px, 0px, 0px);
    display: block !important;
}
.alertOut.ng-hide-add, .alertIn.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
    display: block !important;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}


/**********************
 * 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.jsonCode {
    font-family: monospace;
    font-size: small;
    line-height: normal;
    width: 100%;
}

div#images {
    width: 160px;
}
div#images img {
    width: 120px;
    height: auto;
}

md-grid-list img.preview {
    width: 200px;
    height: auto;
}

/*******************************************
 * fixing z-indexes of dialogs and sidenavs
 *******************************************/

/*** sidenav ***/
md-backdrop.md-sidenav-backdrop {
    z-index: 1899;
}
md-sidenav {
    z-index: 1900;
}
/** our main menu is a sidenav too so we need to bump it's z-index to be sure that it will be always over other sidenavs **/
.main-menu {
    z-index: 1910;
}

/*** generic dialogs ***/
md-backdrop.md-dialog-backdrop {
    z-index: 1999;
}
div.md-dialog-container {
    z-index: 2000;
}

/*** color picker dialog ***/
md-dialog.md-color-picker-dialog {
    z-index: 2001;
}

/*** various widgets that can be used in both dialogs and sidenavs ***/
md-backdrop.md-select-backdrop {
    z-index: 2002;
}
.md-select-menu-container {
    z-index: 2003;
}
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index: 2002 !important;
}
div.md-datepicker-calendar-pane {
    z-index: 2003;
}


[@role="tooltip"] {
    z-index: 11000;
}



/************************************************
 * dialog "device installation"
 ***********************************************/
.ac-devices li {
  border-bottom: 1px solid #ccc;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
}
.ac-devices li:last-child {
  border-bottom-width: 0;
}
.ac-devices .item-title,
.ac-devices .item-metadata {
  display: block;
  line-height: 2;
}
.ac-devices .item-title md-icon {
  height: 18px;
  width: 18px;
}

.md-datepicker-input-mask { overflow: hidden; }

/************************************************
 * editor area
 ***********************************************/
div#middleColumn { background-color: #f8f8f8 }
div#editArea {
    position: relative;
}

section.editorToolbar {
    display: block;
    position: absolute;
    top: 4px;
    left: 20px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    color: rgb(49, 46, 46);
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
    z-index: 1048;
}
md-tooltip { z-index: 1049; }
.md-panel.md-tooltip { opacity: 0.9; }

.editorToolbar.md-button {
    display: block;
    min-height: 48px;
    min-width: 48px;
    background-color: white;
    margin: 0px;
}

.editorToolbar.md-button.top {
    border-radius: 10px 10px 0 0;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.editorToolbar.md-button.middle {
    border-radius: 0;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.editorToolbar.md-button.bottom {
    border-radius: 0 0 10px 10px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

.editorToolbar.md-button.single {
    border-radius: 10px 10px 10px 10px;
    border: 1px solid black;
}

.editorToolbar.md-button:not([disabled]):hover {
    background-color: white;
    color: rgb(44, 65, 164);
    transition: 0.3s;
}
.editorToolbar.md-button:not([disabled]).md-focused {
    background-color: white;
    color: rgb(44, 65, 164);
    transition: 0.3s;
}

section.zoomToolbar {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    color: rgb(49, 46, 46);
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
    z-index: 1048;
}

md-grid-tile-footer > figcaption { width: 100%; min-width: 100%; }

section.zoneToolbar {
    display: block;
    position: absolute;
    top: calc(50% - 80px);
    left: 20px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    color: rgb(49, 46, 46);
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
    z-index: 1048;
}

section.editorHelp {
    display: block;
    position: absolute;
    top: 20px;
    left: calc(30% / 2);
    width: calc(70%);
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: white;
    color: rgb(49, 46, 46);
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
    z-index: 1048;
    border-radius: 5px;
    border: 1px solid black;
}

section.breadcrumb {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    margin: 0px;
    padding: 4px;
    background-color: white;
    color: rgb(49, 46, 46);
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
    z-index: 1048;
    border-radius: 5px;
    border: 1px solid black;
}

md-grid-tile-header figcaption, md-grid-tile-footer figcaption  {
    width: 100%;
}

md-dialog.observationPointDialog {
    min-height: 60vh;
    max-height: 85vh;
    min-width: 60vw;
    max-width: 85vw;
    width: 70vw;
}

md-dialog-actions.observationPointDialog {
    position: absolute;
    bottom: 0;
    right: 0;
}

.selected {
    color: red !important;
    font-weight: bold;
    font-style: italic;
}



/*
 * data editor observation point's popup
 */
div#editArea div.editorPopup {
    transform: translate(calc(24px - 50%), 54px);
    border-radius: 4px;
    box-sizing: border-box;
}
div.editorPopup:after, div.editorPopup:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
div.editorPopup:after {
    border-bottom-color: #fff; /*#fffbed;*/
    border-width: 20px;
    margin-left: -20px;
}
div.editorPopup:before {
    border-bottom-color: black; /* #f52c25; */
    border-width: 22px;
    margin-left: -22px;
}

div.editorPopup .opPopupValue {
    font-size: 14px;
}
div.opPopupEntry.horizEntry .opPopupValue {
    display: inline-block;
    margin: 4px;
}
div.opPopupEntry.horizEntry .opPopupLabel {
    display: inline-block;
    margin: 4px;
}
div.editorPopup .opPopupValue td {
    padding: 4px;
}
div.editorPopup .opPopupValue th {
    padding: 4px;
    /*background-color: #d3d7cf;*/
}
div.editorPopup .opPopupLabel {
    font-size: 14px;
    background-color: "#ddf"
}
div.editorPopup .opPopupEntry {
    font-size: 14px;
}

/*
 * Subject tree CSS
 */

bf-subject-tree div.bfTreeView > div ul.ivh-treeview { padding-left: 0; margin: 0px; }
bf-subject-tree div.bfTreeView ul.ivh-treeview {
    /*background-color: rgba(192,192,192,0.05);*/
    margin-bottom: 2px !important;
}
bf-subject-tree div.ivh-treeview-node-content div.nodeInfo {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
}
bf-subject-tree ul.ivh-treeview {
    padding-left: 20px;
}

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-fit: scale-down; */
    object-position: 50% 50%; /* default value: image is centered*/
    /* width: calc(100%);
    height: calc(100%); */
    margin: 40px 20px 0px 20px;
    width: calc(100% - 40px);
}

.dashboard-thumbnail-heading {
    color: black;
    font-weight: 800;
    font-size: 15px;
}