/*
  Genereted by Layoutit
*/
body {
  background-color: #F5F5F5;
  width: 100%;
  height: auto;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "header"
    "main";
}

@media (min-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas:
      "header"
      "main";
  }
}

.header {
  grid-area: header;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "header-top"
    "header-bottom";
}

.header-top {
  grid-area: header-top;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "header-logo"
    "header-title";
}

@media (min-width: 992px) {
  .header-top {
    grid-area: header-top;

    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas:
      "header-logo header-title";
  }
}

.header-logo {
  grid-area: header-logo;
}

.header-title {
  grid-area: header-title;
}

.header-bottom {
  grid-area: header-bottom;
}

.main {
  grid-area: main;
  width: 100%;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  gap: 1rem 1rem;
  grid-auto-flow: row;
  grid-template-areas:
    "sitebar"
    "content";
}

@media (min-width: 992px) {
  .main {
    grid-area: main;

    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr;
    gap: 0 1rem;
    grid-auto-flow: row;
    grid-template-areas:
      "sitebar content";
  }
}

.content {
  grid-area: content;
  width: 100%;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "tab-header"
    "tab-body";
}

.sitebar {
  grid-area: sitebar;
  width: 100%;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "section-header"
    "section-body";
}

.section .section-header {
  grid-area: section-header;
}

.section .section-body {
  grid-area: section-body;
}

/*
  Custom css
*/

.container {
  padding: 1rem;
  background-color: #ECF0F1;
  color: #42484B;
}

.header {
  height: auto;
}

.header .header-logo {
  margin-right: 4rem;
  margin-bottom: 1rem;
}

.section {
  width: 100%;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.section .section-header {
  background-color: #3DB7E4;
  color: rgba(255, 255, 255, 0.9);
  padding-top: 0.15rem;
  padding-left: 1rem;
  height: 2rem;
}

.section:first-child .section-header {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.section .section-body {
  background-color: white;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section:last-child .section-body {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.section .section-body .option {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}

.section .section-body .option:last-child {
  margin-bottom: 1.2rem;
}

.section .section-body .option label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.section.disclaimer .section-body {
  padding-top: 1rem;
}

.content {
  background-color: #BBCACF;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.content .nav-tabs {
  grid-area: tab-header;

  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0.4rem;
}

.content .nav-tabs .nav-link.active {
  color: #3DB7E4;
  background-color: white;
  border-bottom: 1px solid white;
}

.content .nav-tabs .nav-link {
  color: #42484B;
  background-color: #ECF0F1;
  margin-right: 1px;
  padding-top: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid #BBCACF;
}

@media (min-width: 992px) {
  .content .nav-tabs .nav-link {
    color: #42484B;
    background-color: #ECF0F1;
    margin-right: 1px;
    padding-top: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid #BBCACF;
    min-width: 10rem;
  }
}

.content .tab-pane {
  grid-area: tab-body;
  min-height: 32rem;
  background-color: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  padding: 2rem;
}

.content .tab-pane .statistic {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  .content .tab-pane .statistic {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto;
    gap: 2rem;
  }
  .risk-points {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
  .recurrence-risk {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  
  .chart {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
}

.content .tab-pane table {
  width: 100%;
  border-collapse: collapse;
}

.content .tab-pane table,
th,
td {
  border-bottom: 1px solid #dedede;
}

.content .tab-pane th,
td {
  padding: 8px;
  text-align: left;
}

.content .tab-pane .chart img {
  width: 100%;
  height: auto;
}

.content .tab-pane h3 {
  color: #42484B;
  font-size: 1.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #a9a9a9;  
}

h1 {
  color: #393939;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0;
}

h2 {
  color: #42484B;
  font-size: 1.3rem;
}