/* Universal Overrides for Egret */

.hidden{
  display:none;
}

.invisible{
  opacity:0;
}

/* Navigation shorter and fixed to Top */
topbar, app-breadcrumb{
  position:fixed;
  width:100%;
  z-index:3;
}

topbar{
  top:0;
}

div.mat-toolbar{
  min-height:64px;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px;
  flex-direction: column;
}

.mat-toolbar-row{
  height:48px !important;
}

.branding{
  height:48px;
}

app-breadcrumb{
  top:48px;
}

.rightside-content-hold {
  padding: 14px .03rem 15px .03rem !important;
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  position: absolute;
  top: 90px;
  height: calc(100% - 90px);
  width: 100%;
}

.rightside-content-hold.has-footer {
  padding: 104px .03rem 5%;
  height: calc(100% - 135px);
}

@-webkit-keyframes silde_to_top {
  0% {
    bottom: -60px;
  }
  100% {
    bottom: 0px;
    z-index: 1000000;
  }
}

.footer-console-bar {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 45px;
  background-color: #000;
  z-index: 10;

  /* -webkit-animation-name: silde_to_top;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards; */
}

.footer-console-bar .message {
  font-family: monospace,Courier New,Courier;
  font-size: 9pt;
  color: #00FF00;
  padding: 3px 20px 0px;
  background-color: #000;
  border: 1px solid #222;
  height: 39px;
  white-space: pre-wrap;
  max-height: 42px;
  overflow: hidden;
  margin: 0px;
  line-height: 1;
}

/* Tabbed navigation is fixed too */
.tab-header-fixed .mat-tab-header{
  overflow: hidden;
  position: fixed !important;
  top:104px;
  flex-shrink: 0;
  z-index: 2;
  background:#efefef;
  width: 100%;
}
/*--- Data table ---*/
.datatable-checkbox input[type='checkbox'] {
  margin-top: -10px;
  margin-left: -3px;
}
.mat-tab-body-wrapper{
  padding:64px 16px 16px;
}

/* Cards & Tables */
.mat-card{
  margin:24px;/* This will be deprecated once Grid System is implemented*/
}

.mat-card-table{
  padding:0 !important;
}

.mat-card-table .ngx-datatable{
  margin:0 !important;
}

ngx-datatable .mat-box-shadow{
  box-shadow:none;
}

.mat-card-title-text{
  margin:16px;
}

/* vm-cards */
vm-cards md-card{
  padding:0 !important;
}

.vm-card-edit div.md-content{
  width: 100% !important;
  height: 100% !important;
  position:absolute;
}

/* mat-sidenav */
mat-sidenav-content.fn-maincontent {
  transform: translate3d(0px, 0px, 0px);
}

body.collapsed-menu mat-sidenav.mat-sidenav-closed mat-sidenav-content.fn-maincontent {
  margin-left: 48px !important;
  margin-right: 0px !important;
  transform: translate3d(0px, 0px, 0px);
}

body.collapsed-menu mat-sidenav-container.mat-drawer-opened mat-sidenav-content.fn-maincontent {
  margin-left: 48px !important;
  margin-right: 0px !important;
  transform: translate3d(0px, 0px, 0px);
}

.mat-sidenav.mat-sidenav-opened,
.mat-sidenav.mat-sidenav-opening {
  transform: translate3d(0,0,0);
}

/* side menu*/
.mat-nav-list .mat-list-item {
  display: block;
  height: auto !important;
}

/* Widget Cards */
.widget{
  position:relative;
  perspective: 1520px !important;
  perspective-origin: 50% 50% !important;
}

.widget .card-container{
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
}

.widget .card-container.vertical .back {
  transform: rotateX(-180deg);
}

.widget .card-container.horizontal .back {
  transform: rotateY(-180deg);
}

.widget-lg .mat-card,
.widget-lg, .widget-lg.card-container{
  height:720px;
}

.widget-md .mat-card,
.widget-md, .widget-md .card-container{
  height:480px;
}

.widget-sm .mat-card,
.widget-sm, .widget-sm .card-container{
  height:240px;
}


.xs .widget.splitv.double-height .mat-card,
.xs .widget.splitv.double-height, 
.xs .widget.splitv.double-height .card-container{
  height:840px;
}

.widget .mat-card{
  /*position:absolute;*/
  left:0;
  right:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  overflow:hidden;
}

.widget.splitv .mat-card .mat-toolbar-row,
.widget.splith .mat-card .mat-toolbar-row{
  padding:0 !important;
}

.widget .mat-card,
.widget .mat-raised-button,
.widget .mat-button{
  backface-visibility: hidden;

}

.widget .mat-button{
  text-transform:uppercase !important;
  font-weight:500 !important;
}

.widget-fullscreen .mat-card,
.widget-fullscreen, .widget-fullscreen .card-container{
  width:100%;
  margin:0;
  min-height:100%;
}

.widget-fullscreen .mat-card{
  border:0;
  box-shadow:none;
}

.widget .mat-card .widget-footer {
  /*background-color:#fff;*/
  position: absolute;
  width: 100%;
  bottom: 0px;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding:16px 0;
}

.widget .mat-card-content{
  text-align:center;
}

.report .card-title-text{
  font-size:20px;
}

.widget .mat-card.back{
  display:none;
}

.legend-item-time{
  height:82px;
}

.c3 .tick text,
.c3 text.c3-axis-y-label{
  fill: var(--fg2);
  font-weight: 500;
  opacity: 0.8;
}

.c3 text.c3-axis-y-label{
  font-size:22px;
}

.widget .c3 g.c3-axis{
  opacity:0.75;
}

.widget .c3 g.c3-axis-y g.tick:first-child{
  opacity:0;
  visibility:hidden;
}

/* Max Y axis*/
.widget .c3 g.c3-axis-y g.tick tspan{
  font-family:Roboto;
  font-weight:500;
}

/* Split Layout Widgets */
.widget.splitv, .widget.splith, .widget.stats-widget{
  width:600px;
  height:400px;
}

/* New Rules */
.widget mat-card-content{
  /*background: rgba(0,0,0,0.05);*/
}

.widget mat-toolbar-row{
  background: var(--bg2);
}

/* MOBILE */
.xs.widget{
  min-width:320px;
  overflow-x: auto;
}
