@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url(./fonts/HelveticaNeueLTStd-Roman.ttf);
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url(./fonts/HelveticaNeueLTStd-Bd.ttf);
  font-weight: 700;
}

@font-face {
  font-family: "FT System Mono";
  src: url(./fonts/FTSystemMono-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: "FT System Mono";
  src: url(./fonts/FTSystemMono-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: "FT System Mono";
  src: url(./fonts/FTSystemMono-Bold.ttf);
  font-weight: 700;
}


/* add custom font */
* { 
  margin: 0px; 
}

:root {
  --coal-100: #322C2E;
  --bright-wood: #F9F1E8;
  --bright-olive: #E2DCD2;
  --grey-olive: #B0B0A2;
  --coal-100-opac: #322C2E1A;
  --font-size-large: 55px;
  --font-size-medium: 32px;
  --font-size-small: 18px;

  /* Spacing */
  --spacing-section-h: max(1.25rem, 50vw - (var(--width-1880)) / 2);
  --spacing-box-h: 1.25rem;
  --spacing-box-v: 1.25rem;
  --spacing-copy-v: 7.5rem;

  /* box polygons */
  --box-clip-path: polygon(
      2px 1.25rem,
      0 1.25rem,
      0 calc(100% - 1.25rem),
      2px calc(100% - 1.25rem),
      1.25rem calc(100% - 2px),
      1.25rem 102%,
      calc(100% - 1.25rem) 102%,
      calc(100% - 1.25rem) calc(100% - 2px),
      calc(100% - 2px) calc(100% - 1.25rem),
      102% calc(100% - 1.25rem),
      102% 1.25rem,
      calc(100% - 2px) 1.25rem,
      calc(100% - 1.25rem) 2px,
      calc(100% - 1.25rem) 0,
      1.25rem 0,
      1.25rem 2px
    );
    --box-clip-path-upper-corners: polygon(
      2px 1.25rem,
      0 1.25rem,
      0 102%,
      102% 102%,
      102% 1.25rem,
      calc(100% - 2px) 1.25rem,
      calc(100% - 1.25rem) 2px,
      calc(100% - 1.25rem) 0,
      1.25rem 0,
      1.25rem 2px
    );
    --box-clip-path-lower-corners: polygon(
      0 0,
      102% 0,
      102% calc(100% - 1.25rem),
      calc(100% - 2px) calc(100% - 1.25rem),
      calc(100% - 1.25rem) calc(100% - 2px),
      calc(100% - 1.25rem) 102%,
      1.25rem 102%,
      1.25rem calc(100% - 2px),
      2px calc(100% - 1.25rem),
      0 calc(100% - 1.25rem)
    );
    --box-clip-path-lower-left-corner: polygon(
      0 0,
      102% 0,
      102% 102%,
      1.25rem 102%,
      1.25rem calc(100% - 2px),
      2px calc(100% - 1.25rem),
      0 calc(100% - 1.25rem)
    );
    --box-clip-path-lower-right-corner: polygon(
      0 0,
      102% 0,
      102% calc(100% - 1.25rem),
      calc(100% - 2px) calc(100% - 1.25rem),
      calc(100% - 1.25rem) calc(100% - 2px),
      calc(100% - 1.25rem) 102%,
      0 102%
    );
    --box-clip-path-right-corners: polygon(
      0 0,
      0 102%,
      calc(100% - 1.25rem) 102%,
      calc(100% - 1.25rem) calc(100% - 2px),
      calc(100% - 2px) calc(100% - 1.25rem),
      102% calc(100% - 1.25rem),
      102% 1.25rem,
      calc(100% - 2px) 1.25rem,
      calc(100% - 1.25rem) 2px,
      calc(100% - 1.25rem) 0
    );
    --box-clip-path-left-corners: polygon(
      2px 1.25rem,
      0 1.25rem,
      0 calc(100% - 1.25rem),
      2px calc(100% - 1.25rem),
      1.25rem calc(100% - 2px),
      1.25rem 102%,
      102% 102%,
      102% 0,
      1.25rem 0,
      1.25rem 2px
    );
}

/* general styles */
body {
  font-family: "FT System Mono";
  background-color: var(--bright-wood);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* styles for section titles */
.sectionTitle {
  font-size: var(--font-size-small);
  height: 50px;
  padding: var(--spacing-box-v) var(--spacing-box-h);
  border-bottom: solid var(--coal-100) 1px;
}

/* styles for section descriptions */
.sectionDescription {
  font-family: "Helvetica Neue LT Std";
  height: 200px;
  padding: var(--spacing-box-v) var(--spacing-box-h);
  clip-path: var(--box-clip-path);
}

h1 {
  margin: 0px;
  font-size: var(--font-size-large);
  font-weight: bold;
  color: var(--coal-100);
  position: relative;
}

/* styles for boxplot axis */
.textOutput {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  padding-right: 5px;
}

.shiny-text-output {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  text-align: end;
  height: 400px;
  font-size: var(--font-size-small);
  font-weight: bold;
}

/* styles for data output */
.output {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}

.dataOutput {
  min-width: 400px;
  padding-left: 5px;
  padding-right: 5px;
}

/** styles for filters **/

.form-group {
  display: flex;
  flex-direction: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 100%;
  border-bottom: 1px solid var(--coal-100);
}

.control-label {
  font-family: "Helvetica Neue LT Std";
  font-size: var(--font-size-medium); /* size of filter label */
}

span {
  font-size: var(--font-size-small); /* size of selection options */
}

/*** specific styles for radio buttons ***/

.radio-inline span {
  font-weight: bold;
}

/**** remove default radio buttons ****/
input[type="radio"] {
  -webkit-appearance: none; /* Add if not using autoprefixer */
  appearance: none; /* For iOS < 15 to remove gradient background */
  background-color: var(--bright-wood);
  margin: 0; /* Not removed via appearance */
}

/**** define unchcked radio button ****/
input[type="radio"] {
  appearance: none;
  background-color: var(--bright-wood);
  margin: 4px;
  font: inherit;
  color: var(--bright-wood);
  width: 16px;
  height: 16px;
  border: 1px solid var(--coal-100);
  border-radius: 50%;
  transform: translateY(2.5px);
  display: grid;
  place-content: center;
}

/**** define small circle inside radio button ****/
input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: var(--coal-100);
}

/**** make small circle appear upon clicking radio button ****/ 
input[type="radio"]:checked::before {
  transform: scale(1);
}

/**** define border color when radio button is checked ****/ 
input[type="radio"]:checked {
  border: 1.5px solid var(--coal-100);
}

/**** prevent special focus when radio button is selected ****/ 
input[type="radio"]:focus {
  outline: none;
}

/**** add hover effect ****/ 
input[type="radio"]:hover {
  border-width: 1.5px;
}

/*** specific styles for checkboxes ***/

/**** add custom checkboxes ****/

/**** disable default checkboxes ****/
input[type="checkbox"] {
  -webkit-appearance: none;  /* Add if not using autoprefixer */
  appearance: none; /* For iOS < 15 to remove gradient background */
  background-color: var(--bright-wood);
  margin: 0; /* Not removed via appearance */
}

/**** create custom checkbox ****/
input[type="checkbox"] {
  appearance: none;
  background-color: var(--bright-wood);
  margin: 4px;
  font: inherit;
  color: currentColor;
  width: 16px;
  height: 16px;
  border: 1px solid var(--coal-100);
  border-radius: 10%;
  transform: translateY(2.5px);
  display: grid;
  place-content: center;
}

/**** create sqaure inside checkbox ****/
input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  border-radius: 10%;
  transition: 120ms transform ease-in-out;
  background-color: var(--coal-100);
}

/**** make the sqaure appear upon clicking in box ****/
input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/**** define border color when checkbox is checked ****/ 
input[type="checkbox"]:checked {
  border: 1.5px solid var(--coal-100);
}

/**** prevent special focus when checkbox is selected ****/ 
input[type="checkbox"]:focus {
  outline: none;
}

.checkbox-inline span {
  font-weight: bold;
}

/*** specific styles for data tables ***/

/**** remove bottom border of header ****/
table.dataTable thead th,table.dataTable thead td { 
  border-bottom-style: none !important;
}

/**** table body text ****/
table.dataTable.row-border tbody th,
 table.dataTable.row-border tbody td,
  table.dataTable.display tbody th,
   table.dataTable.display tbody td { 

  color: var(--coal-100);
  font-size: var(--font-size-small);
  border-top: 0.5px solid var(--coal-100-opac) !important;

}

/**** color of even rows ****/
table.dataTable.stripe>tbody>tr.even>*,table.dataTable.display>tbody>tr.even>* { 
  box-shadow: inset 0 0 0 9999px var(--bright-wood) !important;
  border-bottom: 1px solid var(--coal-100-opac);
}

/**** color of odd rows ****/
table.dataTable.stripe>tbody>tr.odd>*,table.dataTable.display>tbody>tr.odd>* { 
  box-shadow: inset 0 0 0 9999px var(--bright-wood) !important;
  border-bottom: 1px solid var(--coal-100-opac);
}

/**** no bottom border for last row ****/
table.dataTable.stripe>tbody>tr:last-child.odd>*,
table.dataTable.display>tbody>tr:last-child.odd>*,
table.dataTable.stripe>tbody>tr:last-child.even>*,
table.dataTable.display>tbody>tr:last-child.even>*
 { 
  box-shadow: inset 0 0 0 9999px var(--bright-wood) !important;
  border-bottom-style: none !important;
}

/**** remove bottom border of table ****/
table.dataTable.no-footer {  
  border-bottom-style: none !important;
}


thead{
  display: none;
}

td {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/*** grid layout ***/

/**** remove all padding around boxes ****/
.col-sm-5, .col-sm-7, .textOutput, .dataOutput {
  padding: 0px;
}

/**** add grids around section titles ****/

.output .dataOutput:last-child .sectionTitle {
  clip-path: var(--box-clip-path-lower-right-corner);
}

.col-sm-5 .sectionTitle {
  clip-path: var(--box-clip-path-lower-left-corner);
}


/**** add grids around section decsriptions ****/
.col-sm-5 .sectionDescription {
  border: solid var(--coal-100) 1px;
  border-top-width: 0px;
}

.output .sectionDescription {
  border-color: var(--coal-100);
  border-style: solid;
  border-width: 1px;
  border-left-width: 0px;
  border-top-width: 0px;
}

/**** add grids around app contents ****/

.form-group, .control-label {
  margin: 0px;
}

.control-label {
  line-height: 1;
}

.form-group {
  padding: var(--spacing-box-v) var(--spacing-box-h);
  clip-path: var(--box-clip-path-lower-corners);
}

.col-sm-5 .appContent {
  height: 720px;
  border: solid var(--coal-100) 1px;
  border-top-width: 0px;
  clip-path: var(--box-clip-path);
}

.dataOutput .appContent {
  padding: var(--spacing-box-v) var(--spacing-box-h);
}

.output .appContent {
  border-color: var(--coal-100);
  border-style: solid;
  border-width: 1px;
  border-left-width: 0px;
  border-top-width: 0px;
  clip-path: var(--box-clip-path);
  height: 720px;
}

#boxplotLabelOutput {
  padding: var(--spacing-box-v) var(--spacing-box-h);
  border-color: var(--coal-100);
  border-style: solid;
  border-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  clip-path: var(--box-clip-path);
  height: 720px;
}

#woodConstructionBoxplotSummaryOutput, #massiveConstructionBoxplotSummaryOutput {
  border-top: solid var(--coal-100) 1px;
}


/* smartphone styles*/
@media (max-width: 768px) {
  :root {
    --font-size-large: 32px;
    --font-size-medium: 20px;
    --font-size-small: 14px;
  }

  .output {
    overflow-x: auto;
  }

  .sectionDescription {
    height: 80px;
  }

  input[type="checkbox"] {
    margin: 2px;
  }

  input[type="radio"] {
    margin: 1.5px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .col-sm-5 .appContent {
    height: auto;
    border-bottom-width: 0px;
  }

  #boxplotLabelOutput {
    padding: var(--spacing-box-v) var(--spacing-box-h);
    border-color: var(--coal-100);
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 0px;
    clip-path: var(--box-clip-path);
    height: 720px;
  }

  .output .textOutput .sectionTitle {
    clip-path: var(--box-clip-path-lower-left-corner);
  }

  .output .textOutput .sectionDescription {
    border-left: solid var(--coal-100) 1px;
  }
}