@import url('fhir.css');

body {
  background-color: lightblue /*rgb(220, 220, 220)  #b6dff1 */;
  height: 100%;
  min-width: 400px;
  /*background-image: url(../assets/background.png);*/
}

#mainIndex {
  /* background-color: rgb(220, 220, 220); */
  margin: 0px;
  padding-top: 15px;
  padding-bottom: 45px;
}

#mainFhir {
  /*background-color: rgb(220, 220, 220);*/
  margin: 0px;
  min-height: 100vh;
  padding-top: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 3.5em;
}

/* change the color of active or hovered links */
.nav-link {
  color: #d9534f;
}
.nav-link:hover {
  color: #428bca;
}

#about blockquote {
  color: #444444;
  font-weight: normal;
  font-size: 18px;
  text-justify: inter-word;
  text-align: center;
  margin: 12px;
}

/* Set navbar shadow */
#navbarTop {
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.16),
    1px 2px 5px 1px rgba(0, 0, 0, 0.26);
  background-image: linear-gradient(
    to bottom right,
    rgb(10, 200, 230),
    rgba(0, 150, 200)
  );

  /*   background-image: linear-gradient(
      141deg,
      rgb(251, 252, 243) 0%,
      rgb(49, 97, 71) 51%,
      rgb(29, 56, 54) 75%
    ); */
}

#emrLogin {
  max-width: 1000px;
}

#loginOptions {
  background: whitesmoke;
  min-width: 300px;
  max-width: 950px;
}

#epicPassword {
  display: none;
  font-size: 14px;
}

#noLogin {
  display: none;
  font-size: 14px;
}

#viewSampleData:hover #noLogin {
  display: block;
}

#epicLogin:hover #epicPassword {
  display: block;
}

hr.hr-text {
  position: relative;
  border: none;
  height: 1px;
  background: #999;
}

hr.hr-text::before {
  content: attr(data-content);
  display: inline-block;
  background: whitesmoke;
  font-size: 1rem;
  color: #999;
  border-radius: 30rem;
  padding: 0.2rem 0.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Remove the navbar's default margin-bottom and rounded borders */
/*
.navbar {
  margin-bottom: 1em;
} */

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
  height: 450px;
}

/* Set gray background color and 100% height */
.sidenav {
  padding-top: 20px;
  background-color: #f1f1f1;
  height: 100%;
}

/* Set black background color, white text and some padding  */
footer {
  margin: 0px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: grey;

  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.16),
    1px 2px 5px 1px rgba(0, 0, 0, 0.26);

  background-color: rgb(60, 60, 60);

  width: 100%;

  position: fixed;
  bottom: 0px;
  left: 0px;
}

footer i {
  color: grey;
}

.box {
  background-color: white;
  padding: 15px;
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.16),
    1px 2px 5px 1px rgba(0, 0, 0, 0.26);
  margin: 10px 0px 10px 0px;
}

th {
  text-align: left;
}

tbody {
  width: 100%;
  display: table;
}

.card-header {
  font-size: medium;
  font-weight: bold;
  color: black;
}

/* #summary .card-columns {
  column-count: 1;
} */

@media (max-width: 800px) {
  /*    .sidenav {
         height: auto;
         padding: 15px;
       }
       .row.content {height:auto;}
    */
  .card-columns {
    column-count: 1;
  }
}

@media (min-width: 801px) and (max-width: 1300px) {
  /*    .sidenav {
      height: auto;
      padding: 15px;
    }
    .row.content {height:auto;}
 */
  .card-columns {
    column-count: 2;
  }
}

@media (min-height: 1000px) {
  #mainIndex {
    min-height: 700px;
  }
}