/*Font declaration*/
@font-face{
  font-family:"Gadugi";
  /*
  src:url("https://www.myfontfree.com/data/541/g/gadugibold/gadugib.ttf");
  */
  src:url("../font/gadugib.ttf");
}

/* Modify color background for dashboard header */  

  /*Header title spécification*/
  #headPageTitle {
    color: #000000;
    font-size: xx-large;
    font-family: 'Gadugi', verdana;
    font-weight: bold;
    margin-right: 10px;
    text-align: left;
  }
  #headPageTitle:hover {
    color: #000000;
    font-size: xx-large;
    font-family: 'Gadugi', verdana;
    font-weight: bold;
    margin-right: 10px;
    text-align: left;

  }

  /*Header title spécification*/
  .redline{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #d10010;
    width: 100%;
    height: 5px;

  }

  /*.logo{
    border-right-color: #d10010;
  }

  /* background header color */
  .skin-red .main-header .logo {
    background-color: #ffffff ;
    margin-left: 0px;
  }
  .logo {
    border-right-color: #d10010;
    border-right-style: solid;
    border-right-width: 5px;
  }
  .sidebar-toggle{
    background-color: #ffffff ;
    color: #000000;
  }

  /* logo when hovered */
  .skin-red .main-header .logo:hover {
    background-color: #ececec;
  }
  /* navbar (rest of the header) */
  .skin-red .main-header .navbar {
    background-color: #ffffff;
  }        
  /* main sidebar */
  .skin-red .main-sidebar {
    background-color: #414141;
  }
  /* active selected tab in the sidebarmenu */
  .skin-black .main-sidebar .sidebar .sidebar-menu .active a{
    border-left-color:#bd0005;
  }
  /* other links in the sidebarmenu 
  .skin-red .main-sidebar .sidebar .sidebar-menu a{
    background-color: #00ff00;
    color: #000000;
  }
  */
  /* other links in the sidebarmenu when hovered */
   .skin-red .main-sidebar .sidebar .sidebar-menu a:hover{
     border-left-color: #000000;
    }
  
  /* toggle button when hovered */             
   .skin-red .main-header .navbar .sidebar-toggle:hover{
      background-color: #a60000;
  }

  .sidebar-toogle{
    color: #000000;
  }

/* Box Design modification for primary class */
  /* Top level border of box*/
  .skin-red .box.box-danger {
    border-top-color: #bd0005;
  }
  .skin-red .box.box-solid.box-danger > .box-header {
    color: #ffffff;
    background: #bd0005;
    background-color: #bd0005;
  }
  .skin-red .box.box-solid.box-danger {
  border: 1px solid #bd0005;
  }

/* color for datanot available */
.info-disable{
  opacity: 0.5;
}

/* Dygraph style CSS*/
.dygraph-title {
  font-weight: bold;
}

/*Instument table message*/
#instruMessage{
  font-weight: italic;
  color: #bd0005;
  text-align: center;
}
#chartMessage{
  font-weight: bold;
  color: #bd0005;
  text-align: center;
  font-size: 21px;
}

/*Button style*/
.dwlButton{
  text-align: center;
  width:98%; 
  margin-left: 5px;
  margin-right: 5px;
  float:right;
}

.container
{
    width: 100%;
}

.parameter_div{
  float: left;
  width: 200px;
  height: 100%;
}

.plot_output
{
    margin-left: 205px;
    margin-top: 0px;
    margin-right: 5px;
    width: 100%;
    height: 100%;
}

#FV_distPlot
{
    width: 100%;
    height: 100%;
}

/*outter style for the all page map*/
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}

@media all and (max-width:767px){
  /* for mobile */
  div.outer  {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    padding: 0;
  }
  .container
  {
      width: 100%;
  }

  .parameter_div{
    width: 100%;
    height: 100%;
  }

  .plot_output
  {
    margin-left: 0px;
    margin-top: 45px;
    width: 100%;
    height: 100%;
  }

}

#Sensor_panel {
  /* Appearance */
  background-color: white;
  padding: 0px 20px 20px 0px;
  cursor: move;

  /*Align option */
  text-align: center;

  /* Fade out while not hovering */
  opacity: 0.75;
  transition: opacity 500ms 1s;
}
#Sensor_panel:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

/*Cams image style*/
.add_space{
	padding-top: 15px
}

.cams_Img{
  max-width: 100%;
  max-height: auto;
  align-content: center;
}

.full-container{
  max-height: 100%;
  align-content: center;
  padding-left : 5px;
  padding-right : 5px;
}

.box-body {
	margin-right: 10px; 
	margin-left: 10px;
	margin-bottom: 5px;
}

.box_val_cont{
  max-height: 100%;
  align-content: center;
  margin-left : 5px;
  margin-right : 5px;
}

.row-norm{
  margin-top: 0px;
  margin-right: -5px;
  margin-left: -45px,
}

[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.center{
	text-align: center;
  align-content: center;
}
.button_player{
	margin-right: 4px; 
	margin-left: 4px;
}
.right_align{
	text-align: right;
}

.img_skyimager{
	align-content: center;
  padding: 2px;
	width: 95%;
	height: 95%;
	max-width: 300px;
	max-height: 300px;
  text-align: center;
}

.img_skyimager_dwl{
  align-content: center;
  padding: 2px;
  width: 95%;
	height: 95%;
	max-width: 300px;
	max-height: 300px;
  text-align: center;
}

/*@@media all and min-height: */
/*
@media all and (max-height: 789px){
  .boxright{
    height: 360px;
  }
  .plotheightdynamic{
    height: 250px;  
  }
  .boxplotheighdynamic{
    height: 380px;
  }
}
@media all and (min-height: 800px){
  .boxright{
    height:65vh;
  }
  .boxplotheighdynamic{
    height: 65vh;
  }
  .plotheightdynamic{
    height: 53vh;  
  }
}

@media all and (max-width: 882px){
.actionBttstyle{
    text-align: right;
    margin-top: 25px;
  }
}
*/

@media all and (max-width: 766px){
  .fillactionbox{
    margin-top: 22px;
  }

  .sideActionButton{
    color: #fff;
    background-color: #04bd00;
    border-color: #038c00;
    margin-top: 0px;
    margin-bottom: 0px;
    min-height: 25px;
  }
  .boxright{
    height: 380px;
  }
  .plotheightdynamic{
    height: 250px;  
  }
  .boxplotheighdynamic{
    height: 380px;
  }
}

@media all and (min-width: 767px){
  .fillactionbox{
    margin-top: 0px;
  }

  .sideActionButton{
    color: #fff;
    background-color: #04bd00;
    border-color: #038c00;
    margin-top: 0px;
    margin-bottom: 0px;
    min-height: 125px;
  }
  .boxright{
    height:65vh;
  }
  .boxplotheighdynamic{
    height: 65vh;
  }
  .plotheightdynamic{
    height: 53vh;  
  }
}