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

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

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

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

th {
  text-align: center;
  vertical-align: middle;
  background-color: #0075FF;
  color: white;
  font-size:16px;
}

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

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

.column.left {
    float: left;
    width: 25%;
}


table{
    margin-top: 12px;
}

.column.right {
    float: left;
    width: 75%;
}



/* Style the buttons */
.button {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px; 
}

/* 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: #059862;
    color: white;
}

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

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

.ui.dropdown {
    display: block;
    width: 100%;
    min-width: 0;
    padding-top: 0.22619em;
    padding-right: 2.1em;
    padding-bottom: 0.22619em;
    padding-left: 0.357143em;
}

.row {
  padding: 2px 2px 2px%;
  
}
.value_input { 
    border: 1px solid #CCCCCC;
    width: 20px;
}

div {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* SWITCH PARAMETERS | START */  

/* Adapted from https://www.w3schools.com/howto/howto_css_switch.asp */

:root {
  /* Variables to edit : */
  --switch_width: 40px;
  --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 PARAMETERS | END */


/**************************************************************************
ICONS | START
***************************************************************************/
.fa {
    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
***************************************************************************/