.detector {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas:
/*    "head head"*/
    "histos values"
    "time alarms";
/*    "foot foot";
  grid-template-rows: 1fr 3fr 3fr 0.5fr; */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 3fr 1fr;
  grid-gap: 10px;
}

.alarms {
  /*background-color: lightblue;*/
  grid-area: alarms;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.values {
  grid-area: values;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.histos {
  grid-area: histos;
  display: block;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.timeCharts {
  grid-area: time;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}
.btn{
  border-color: #FFFFFF;
}
.card {
    min-height: 600px;
    border-width: 3px;
    border-color: #1E90FF;
    margin-left: 3px;
    margin-bottom: 3px;
    width: 33%;
}
.card-header{
   font-size: 20px;
   font-weight: bold;
}

.card-footer{
   font-size: 12px;
}

.form-control{
   font-size: 12px;
}

.btn-group-vertical{
 width: 100%;
}
.btn-details{
  float: right;
}

.btn-coll{
  float: right;
}

/* THIS IS FOR THE EXPERT PAGE */
.expert{
/*  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;*/
  display: block;
  width: 100%;
/*  height: 100%;
  z-index: 1;*/
}

.expertHisto{
  display: inline-block;
  width: 25%;
  height: 46%;
}