/*
* Layout
*/
/* Table adjust */
.table-obj{overflow: auto;}
.table-plot{table-layout: auto; width: 40px;}

/*
* Framework
*/
.bullet-style-disc{ list-style-type: disc;}
.bullet-disc ul{ list-style-type: circle; padding:0px 20px; margin:0px;}
.bullet-disc ul ul{ list-style-type: disc; padding:0px 20px; margin:0px;}

/*
* Graph properties in QC pages
*/
.graph {
  height: "250px";
  width: 100%;
}

.button_equipment{
  background-color: #ccc!important;
  border: none;
  color: white;
  padding: 36px 5px;
  margin: 8px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  font-size: 15px;
  width: 110px;
  height: 110px;
  opacity: 1;
}

.button_equipment:hover{
  opacity: 0.7;
  background-size: 140px auto;
}

.button_equipment:active {
  transform: translateY(4px);
}

.analyser_but{
  background-image: url("images/button_analyser.png");
  background-size: 130px auto;
}

.sorter_but{
  background-image: url("images/button_sorter.png");
  background-size: 130px auto;
}

.counter_but{
  background-image: url("images/button_counter.png");
  background-size: 130px auto;
}

.multiplex_but{
  background-image: url("images/button_magpix.png");
  background-size: 130px auto;
}

.workstation_but{
  background-image: url("images/button_workstation.png");
  background-size: 130px auto;
}

/*orange button that leads to agendo for reservations*/
.button_reservation{
  background-color: #F29456!important;
  border: none;
  color: white!important;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  font-size: 15px;
  width: auto;
  height: auto;
  opacity: 1;
  margin: 8px;
}

.button_reservation:hover{
  opacity: 0.7;
}

.button_reservation:active {
  transform: translateY(4px);
}

/*division with a border to show the pricing list*/
.div_price{
    width: 400px;
    height: 100px;
    border: 2px solid #F29456;
    padding: 25px 25px;
    margin: 8px;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
    display: inline-block;
}

/* table in equipments page*/
.te-h1{padding:5px 5px; background-color:#ffffff;border-color:#ffffff!important;;text-align:center;color:black; vertical-align: middle; min-width: 80px;}
.te-han{padding:5px 5px; background-color:#F29456;border-color:#F29456;text-align:center;color:white; vertical-align: middle; min-width: 80px;}
.te-hso{padding:5px 5px; background-color:#ed8440;border-color:#ed8440;text-align:center;color:white; vertical-align: middle; min-width: 80px;}
.te-b1{padding:5px 5px; background-color:#ffffff;border-color:#ffffff!important;;text-align:center;color:#000000; vertical-align: middle!important;: middle; min-width: 80px;}
.te-b2{padding:5px 5px; background-color:#f1f1f1;border-color:#f1f1f1!important;;text-align:center;color:#000000; vertical-align: middle!important;: middle; min-width: 80px;}

/*table in training page*/
/* .tt-h{font-weigth:bold;font-size:14px; background-color:#F29456; text-align:center;color:white}
.tt-b{font-weigth:bold;font-size:14px; background-color:#fff; text-align:center}
.tt-b_past{font-weigth:bold;font-size:14px; background-color:#fff; text-align:center; text-decoration: line-through;} */

/*price tables in equipment pages*/
.tp-h{font-weigth:bold;font-size:14px; background-color:#F29456; text-align:center;color:white}
.tp-b{font-weigth:bold;font-size:14px; background-color:#fff; text-align:center}


/*Image links in related websites*/
.polaroid_websites {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
  margin-bottom:25px;
}

.polaroid_websites:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25), 0 5px 15px 0 rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

.polaroid_websites:active{
  transform: translateY(4px);
}

.container_websites {
  padding: 5px;
  text-align:center;
}

/* Accordion */
/* .accordion {
    background-color: #fbfbfb;
    color: #666;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #eee;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 10px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
} */

/*For the new users page ot have gifs that only mov when mouse is over the figure*/
.gif_division {
  position: relative;
  top: 0;
  left: 0;
  margin:30px;
}
.static_fig {
  position: relative;
  top: 0;
  left: 0;
}
.static_fig:hover{
  opacity: 0;
}
.animated_fig {
  position: absolute;
  top: 0;
  left: 0;
}

/*To have checkboxes inline with their labels*/
.inline-field input,
.inline-field label {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  white-space: nowrap;
}

/*Buttons in the protocols page*/
/* Container needed to position the button. Adjust the width as needed */
/* .container_protocol_img {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 10px 10px;
} */

/* Make the image responsive */
/* .container_protocol_img img {
  width: 100%;
  height: auto;
} */

/* Style the button and place it in the middle of the container/image */
/* .container_protocol_img .button_protocols {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #F29456!important;;
  color: white;
  font-size: 12px;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container_protocol_img .button_protocols:hover {
  background-color: #f7b183!important;;
}

.container_protocol_img .button_protocols:active {
  transform: translate(-50%, -40%);
} */

/* .flow_tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #ddd;
}

.flow_tooltip .flow_tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    position: absolute;
    min-height: 30px;
    z-index: 10000000000;
    top: 130%;
    left: 50%;
    margin-left: -90px;
    opacity: 0;
    transition: opacity 0.4s;
}

.flow_tooltip .flow_tooltiptext::after {
    content: "";
    position: absolute;
    z-index: 10000000000;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
    transition: opacity 0.4s;
}

.flow_tooltip:hover .flow_tooltiptext {
    visibility: visible;
    opacity: 1;
} */

.button_dye_app{
  background-color: #F29456!important;
  border: none;
  color: white!important;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  font-size: 15px;
  width: auto;
  height: auto;
  opacity: 1;
  margin: 8px;
}

.button_dye_app:hover{
  opacity: 0.7;
}

.button_dye_app:active {
  transform: translateY(4px);
}

.button-disable{
  cursor: not-allowed;
  pointer-events: none;
  color: #fff;
  background-color: #eee!important;
}

.instr_square{
  height: 64px;
  width: 64px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  padding: 2px;
  margin: 2px;
  display: inline-block;
  opacity: 0.8;
  background-color: #6176b5;
}

.instr_square:hover{
  opacity: 0.7;
  height: 72px;
  width: 72px;
  margin: -2px;
}

.instr_text{
  position: relative;
  top: 40%;
}

/* .color_aria{
  background-color: #f7717d;
}
.color_moflo{
  background-color: #ffd166;
}
.color_x20{
  background-color: #9ebc9e;
} */
/* .color_fortessa{
  background-color: #6176b5;
} */
/* .color_calibur{
  background-color: #8782bc;
} */