.box {
    display: flex;
}

.vertical_filler {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.vertical_filler.vertical_box {
    background-color: #F2F2F2;
    height: 100%;
    flex: 1;
}

#rules_metrics_container, #sort_ascending_container {
    margin-left: 7%;
}


/***************************************************************************
HEADER | START
***************************************************************************/

.app_text {
    color: #000000;
    background-color: #FFFFFF;
    height: 100%;
}

.header_text {
    height: 2em;
    font: "Source Sans Pro";
    font-size: medium;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 0.25em;
}

.header_tier_1 {
    flex: 1;
}

.header_tier_2 {
    flex: 1;
}

.header_tier_3 {
    /*display:right;*/
    flex: 1;
        
}


/***************************************************************************
HEADER | END
***************************************************************************/




.app_content {
    background-color: #F2F2F2;
}

.display_left {
    float: left;
    height: 7%;
    width: 25%;
    border: 1px solid #CCCCCC;
}

.display_right {
    float: left;
    height: 7%;
    width: 75%;
    border: 1px solid #CCCCCC;
    
}


/***************************************************************************
BUTTONS | START
***************************************************************************/
.button {
    border: none;
    outline: none;
    height: 75%;
    font-size: small;
    width: 49%;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #CCCCCC;/*#f1f1f1;*/
    cursor: pointer;
}

.button.download {
    width: 30%;
}

/* Add a light grey background on mouse-over */
.button:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.button.active {
  background-color: #0075FF;
  color: white;
}

.button.download {
    background-color: #C0DEAB;
    color: white;
}

.button_text {
    font: "Source Sans Pro";
    font-size: medium;
}


/***************************************************************************
BUTTONS | END
***************************************************************************/

.results_labels {
    font-size:medium;
    font-weight:bold;
    color:#0075FF;
}

.metrics_values {
    font-weight:bold;
    color:#0075FF;
}


.ui.dropdown {
    display: block;
    width: 100%;
    min-width: 0;
}

.dropdown_container{
    /*padding-top: 0.1em;*/
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

/***************************************************************************
TABLE | START
***************************************************************************/

#dynamic_html_table {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#dynamic_html_table th, #dynamic_html_table td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#dynamic_html_table tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#dynamic_html_table tr.header, #dynamic_html_table tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

table {
    margin-top: 12px;
}

th {
  text-align: center;
  vertical-align: middle;
  background-color: #F2F2F2;
  color: #222222;
  font-size:16px;
}

td {
  text-align: center;
  vertical-align: middle;
  font-size:14px;
  width:12.5%;
}

tr:hover {
    background-color: #f5f5f5;
}

/***************************************************************************
TABLE | END
***************************************************************************/

/***************************************************************************
METRICS | START
***************************************************************************/
.bad_metric {
    color: #CE1228;
}
.medium_metric {
    color: #F28C38;
}
.good_metric {
    color: #70BE1C;
}
.really_good_metric {
    color: #1E8546;
}

.excellent_metric {
    color: #3675FF;
}
/*
METRICS | END
*/


/***************************************************************************
TOOLTIPS | START
***************************************************************************/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/***************************************************************************
TOOLTTIPS | END
***************************************************************************/

/**************************************************************************
SWITCH SLIDER | START
***************************************************************************/
:root {
  /* Variables to edit : */
  --switch_width: 50px;
  --switch_color: white;
  --switch_slider_color: #ccc;
  --switch_checked_slider_color: #2196F3;
    
 /* Variables to not touch (static or computed) */
  --all_axis: 100%;
  --height_width_ratio: 0.50;
  --switch_height: calc(var(--height_width_ratio)*var(--switch_width));  
}

.switch_container {
    width: var(--switch_width);
    height: var(--switch_height);
}


/* The switch - the box around the switch_slider */
.switch {
  position: relative;
  display: inline-block;
  width: var(--switch_width);
  height: var(--all_axis);
}


/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The switch_slider */
.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch_slider_color);
  -webkit-transition: .4s;
  transition: .4s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  width: calc(0.95*var(--height_width_ratio)*var(--all_axis));
  height: 95%;
  left: 2.5%;
  bottom: 2.5%;
  background-color: var(--switch_color);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switch_slider {
  background-color: var(--switch_checked_slider_color);
}

input:focus + .switch_slider {
  box-shadow: 0 0 1px var(--switch_checked_slider_color);
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(99%);
  -ms-transform: translateX(99%);
  transform: translateX(99%);
}

/* Rounded switch_slider */
.switch_slider.round {
  border-radius: 34px;
}

.switch_slider.round:before {
  border-radius: 50%;
}
/**************************************************************************
SWITCH SLIDER | END
***************************************************************************/

/**************************************************************************
ICONS | START
***************************************************************************/
.fa.helper_icon {
    color: #0075FF;
}
/**************************************************************************
ICONS | END
***************************************************************************/


/**************************************************************************
HELPERS | START
***************************************************************************/
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  height: flex;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

.app_title {
    height: flex;
    font-size: xx-large;
}

.app_helper_title {
    font-size: large;
}

.app_helper_section {
    font-size: small;
}

/* Style the collapsible content. Note: hidden by default */
.helper_content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #FFFFFF;
  font-style: italic;
   font-size: small;
}
/**************************************************************************
HELPERS | END
***************************************************************************/
