/* Dashboards */
@import url('dashboard.css');

/* */
body {
  font-family: Arial, helvetica, sans-serif;
}

/* these are used to resize font-icons when necessary */
.s12 { font-size: 12px; }
.s16 { font-size: 16px; }
.s20 { font-size: 20px; }
.s24 { font-size: 24px; }
.s32 { font-size: 32px; }
.s48 { font-size: 48px; }

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

/* required to put dialogs over the map */
md-backdrop.md-dialog-backdrop { z-index: 999; }
.md-dialog-container { z-index: 1000; }

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

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

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

div.alert-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999; 
    border-radius: 0px
}

label { overflow: visible !important; }

div.tabContent {
    background-color: #f8f8f8;
}

md-sidenav {
  overflow: visible;
}

.md-toolbar-tools[draggable=true] {
    cursor: pointer;
}

md-backdrop.md-select-backdrop {
    z-index:1051;
}

.md-select-menu-container {
    z-index:1052;
}

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index:1051;
}

div.md-toolbar-tools md-input-container {
    background-color: rgb(255,255,255);
}
div.md-toolbar-tools md-input-container md-select-value .md-text {
    color: rgb(0,0,0);
}


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


search-people-comp,
locate-comp,
demo-comp {
    height: 100%;
}
locate-comp .viewBody,
demo-comp .viewBody {
    width: 100%;
}

bf-table .watermark {
    font-size: 12px;
}

.easy-button-button.selected {
    background-color: #c8c8ff;
}
.easy-button-button.selected:hover {
    background-color: #d8d8ff;
}
.md-sidenav-backdrop {
    z-index: 9999;
}

/* debug */
/*
locate-comp .layout-column,
locate-comp .layout-row {
    background-color: rgba(0,0,0,0.05);
}
*/

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

.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;
}
*:focus{
    border: none;
    outline: none;
}
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%;
}


:root{
    --c-building:#bcbcbc;
    --c-level:#b0b0cc;
    --c-zone:#a8caa8;
}

.butaBuilding{
    background: #bcbcbc;
    border-radius: 0.5em;
    padding:0.5em;
    margin: 0 0.5em;
}
.butaLevel{
    background: #b0b0cc;
    border-radius: 0.5em;
    padding:0.5em;
    margin: 0 0.5em;
}
.butaZone{
    background: #a8caa8;
    border-radius: 0.5em;
    padding:0.5em;
    margin: 0 0.5em;
}

.md-button.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-raised:not([disabled]):hover {
    background-color: rgb(250,250,250);
}
.md-button.md-raised:not([disabled]) {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

md-toolbar.mainToolbar, md-toolbar.mainToolbar md-icon {
    background-color: var(--c-bg-primary-dark)!important;
    color: var(--c-fg-primary-light)!important;
}
md-toolbar.v2:not(.mainToolbar) {
    background-color: #ffffff!important;
    color: var(--c-bg-primary-dark)!important;
    /* color: #dedede; */
    border-bottom: 1px solid var(--c-bg-primary-dark)!important;
}
/*---------------------------------------------------------------------------------------- Directives CSS */
/* @import url('../directives/index.css'); */ /* do not load, css link set in index.php */


md-toolbar{
    min-height: 48px;
    height: 48px;
}
md-toolbar h1{
    padding-left:1em;
    white-space:nowrap;
    text-overflow: ellipsis;
}


/* Params Panel */
.params{
    z-index:1100;
    position:relative
}
.params h3 {
    width: 80%;
    border-bottom: 1px solid;
}
.params md-input-container {
    margin: 0;
    text-align: left;
    width: 80%;
}
.params .md-button {
    margin: 0;
    text-align: left;
    width: 80%;
    border: 1px solid;
    background: #ffffff;
    color: #000000;
}
.params md-slider-container {
    margin: 0;
    text-align: left;
    width: 80%;
}
.params md-slider.md-default-theme.md-warn .md-track.md-track-fill, .params md-slider.md-warn .md-track.md-track-fill {
    background-color: rgb(250,250,250);
}
.params md-slider.md-default-theme.md-warn .md-thumb:after, .params md-slider.md-warn .md-thumb:after {
    border-color:  rgb(250,250,250);
    background-color:  rgb(250,250,250);
}
.params md-checkbox.md-default-theme.md-checked .md-icon, .params md-checkbox.md-checked .md-icon {
    background-color: rgb(250 250 250);
}
.params md-checkbox.md-default-theme.md-checked .md-icon:after, .params md-checkbox.md-checked .md-icon:after {
    border-color: rgb(69 90 100);
}
.params md-radio-button.md-default-theme .md-on, .params md-radio-button .md-on {
    background-color: rgb(250 250 250);
}
.params md-radio-button.md-default-theme.md-checked .md-off, .params md-radio-button.md-checked .md-off {
    border-color: rgb(250 250 250);
}

.params md-input-container.md-default-theme .md-input, .params md-input-container .md-input{
    color: rgb(250 250 250);
}
.params md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, .params md-input-container:not(.md-input-invalid).md-input-has-value label {
    color: rgb(250 250 250);
}
button.historyBackButton{
    border-radius: 0.5em!important;
    border: 1px solid #d0d0d0;
    background: #f0f0f0;
}
button.historyBackButton:hover{
    background: #808080;
    color: #ffffff;
}
button.historyBackButton md-icon {
    color: #3f51b5!important;
}
.md-panel-outer-wrapper{
    z-index:30000!important;
    font-size:   1.5em
}
.md-panel-outer-wrapper .md-panel.md-tooltip {
    opacity: 1;
    font-size: 0.5em;
    border: 1px solid #ffffff;
}

.titleContainer{
    display: flex;
    align-items: center;
}
.titleInfoContainer{
    font-size: 0.75em;
    text-align: right;
    padding-right: 2em;
    justify-content: flex-end;
}



/* ----- TMP / TEST - General quick UI adjustments */
/* Reduce entity forms */
/*
[item] > form > [block-ui] > [ng-include] {
    max-width: 75em;
    margin: 0 auto;
    border: 2px solid #d0d0d0;
    padding: 1em;
}
*/

/* Slider */

bf-geo-explorer .sideNavContainer  md-switch.md-default-theme.md-checked:not([disabled]) .md-thumb, md-switch.md-checked:not([disabled]) .md-thumb {
    /*background-color: #9ca7b8;*/
    background-color: #ffffff;
}
bf-geo-explorer .sideNavContainer  md-switch.md-default-theme.md-checked:not([disabled]) .md-bar, md-switch.md-checked:not([disabled]) .md-bar {
    background-color: rgba(156,167,184,0.5);
}
bf-geo-explorer .sideNavContainer  md-switch.md-default-theme .md-thumb, md-switch .md-thumb{
    background-color: rgb(156, 167,184);
}
bf-geo-explorer .sideNavContainer  md-slider.md-default-theme .md-sign:after, md-slider .md-sign:after {
    border-top-color: rgb(156, 167,184);
}
bf-geo-explorer .sideNavContainer  md-slider.md-default-theme .md-sign, md-slider .md-sign {
    background-color: rgb(40, 52, 69);
}
bf-geo-explorer .sideNavContainer  md-slider.md-default-theme .md-track.md-track-fill, md-slider .md-track.md-track-fill {
    background-color: rgb(156, 167,184);
}
bf-geo-explorer .sideNavContainer  md-slider.md-default-theme .md-focus-ring, md-slider .md-focus-ring {
    background-color: rgba(156, 167,184,0.2);
}
bf-geo-explorer .sideNavContainer  md-slider.md-default-theme .md-thumb:after, md-slider .md-thumb:after {
    border-color: rgb(156, 167,184);
    background-color: rgb(156, 167,184);
}