#collapseExample {
    position: absolute;
    margin-bottom: 20px;
	margin-left: 140px;
	margin-top: -275px;
}
#diagram-controls .form-check {
    margin-bottom: 10px;
}

/* This is necessary to make sure that the table in "who gets the data"
takes the full width of the container. Without this rule it would be
limited to several hundred pixels. */
#table-who-gets-data2 {
	width: 100% !important;
}

#table-who-gets-data-all {
	width: 100% !important;
}


.container-main-center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

mark {
  background-color: rgba(255, 255, 255, 0);
  //background-color: white;
  color: black;
  /*The rules below are used to make a smooth transition of
  states when the colour changes, so it fades in and out,
  see https://stackoverflow.com/a/6951169*/
  -webkit-transition: background-color 0.9s ease;
  -moz-transition: background-color 0.9s ease;
  -o-transition: background-color 0.9s ease;
  transition: background-color 0.9s ease;
}

/* these are customized buttons that I use in the header of the
   comparison table */
.btn-comparison-title {
	font-weight: bold;
    background-color: #e5e5e5;
    /*border-color: #6c757d;*/
}

.btn-comparison-title:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}
/****************************************************/


/*This is used to keep the alert (that shows up when a device is removed
from the comparison table) at the bottom of the page*/
.myAlert-bottom{
    position: fixed;
    bottom: 5px;
    left:2%;
    width: 96%;
}


/******************************************************/
.box-out {
  background: #F2F2F2;
  height: 440px;
  width: 200px;
  position: fixed;
  top: 90px;
  left: 0px;
  margin: 0;
  -webkit-transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -o-transition: .5s ease-out;
  -ms-transition: .5s ease-out;
  transition: .5s ease-out;
}

.box-in {
  margin: 0 0 0 -174px;
}

/*
This is not used at the moment, it was an attempt to add a text label
on top of the sidebar, to be used instead of an arrow icon.

.menu-label {
  position: absolute;
  top: 190px;
  left: 184px;
  width: 30px;
  height: 30px;
  background-color: gray;
  background-size: cover;
  cursor: pointer;
  transform: rotate(90deg);
}
*/



.menu-btn {
  position: absolute;
  top: 190px;
  left: 184px;
  width: 30px;
  height: 30px;
  background: url(http://www.movingpixelsdesign.com/codepen/Chevron_btn-left.png) no-repeat;
  background-size: cover;
  cursor: pointer;
}

.menu-btn:hover {
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.menu-btn-left {
  background: url(http://www.movingpixelsdesign.com/codepen/Chevron_btn-right.png) no-repeat;
}



/*This one is used to highlight the first column*/
col {
	display: table-column;
}


.tableToolbar{
	background-color: darkgray;
	height: 35px;
}


.legend {
	//background-color: lightgray;
}

.legend ul {
	//background: gray;
	margin-left: -36px;
	margin-right: -100px;
}

.legend ul li {
  //background: blue;
  margin: 2px;
  margin-left: -5px;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #fff;
	background-color: royalblue;
	border-color: #dee2e6 #dee2e6;
	border-bottom: none;
}

.nav-tabs .nav-link {
	/* border: 1px solid transparent; */
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
}



#table-who-gets-data-all_wrapper div.dt-buttons.btn-group button.btn.btn-secondary.buttons-columnVisibility.active{
  background-color: #899dd7;
  color: white;
}

#table-who-gets-data-all_wrapper div.dt-buttons.btn-group button.btn.btn-secondary.buttons-columnVisibility{
  //background-color: #cad2e9;
  background-color: white;
  color: #0056b3;
}

#table-who-gets-data-all_wrapper div.dt-buttons.btn-group button.btn.btn-secondary.buttons-columnVisibility:hover{
  background-color: #cad2e9;
  color: #0056b3;
}


/* Better contrast in the flow vide mode selector */
label.btn-secondary{
  background-color: white;
  color: #0056b3;
	
}

label.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
  background-color: #899dd7;
  color: white;
}

label.btn-secondary.dropdown-toggle:hover {
  background-color: #green;
  color: white;
}


.lifecycle-subheader{
	display: inline-block;
	color: #6c757d;
	font-size: 90%;
	font-weight: normal;
	font-style: italic;
	
}


/*Make the tabs dark on hover, to indicate clickability, like
	other clickable elements*/
.nav-link:hover{
	background-color: #5a6268;
	color: white;
}

/*Change the font inside this table, so that the flags look good
on Windows*/
#table-who-gets-data-all{
	font-family: "Segoe UI";
	
}
#table-who-gets-data2{
	font-family: "Segoe UI";
	
}



/////////////////////////////////////
//
// doesn't work
// https://datatables.net/forums/discussion/31433/how-to-add-checkboxes-to-items-in-the-buttons-colvis-drop-down-menu
// an attempt to display checkboxes next to column names in the column toggler
/*
dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
display:block;
position:absolute;
top:1.2em;
left:0;
width:12px;
height:12px;
box-sizing:border-box;
}

.dt-button-collection a.buttons-columnVisibility:before {
content:' ';
margin-top:-6px;
margin-left:5px;
border:1px solid black;
border-radius:0px;
}

.dt-button-collection a.buttons-columnVisibility.active span:before {
content:'\2714';
margin-top:-11px;
margin-left:8px;
text-align:center;
text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}

.dt-button-collection a.buttons-columnVisibility span {
margin-left:8px;
}
*/
/////////////////////////////////////////////////