.hide {
	display: none;
}
html, body {
	font-family: 'Montserrat', 'Segoe UI', Tahoma, Verdana, Arial, sans-serif;
	/* font-family: "Segoe UI",Verdana,sans-serif; */
	/* font-family: Verdana,sans-serif; */
	font-size: 15px;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', 'Segoe UI', Tahoma, Verdana, Arial, sans-serif;
}
p {
	font-family: 'Segoe UI', Tahoma, Verdana, Arial, sans-serif;
}

/* Google translate plug-in violating injected css */
#gtx-trans { display:none ! important}


/* ================================================== *
/* Specific items */
/* ================================================== */
#covid_intro{
	border-radius: 0px;
	border-style: solid;
  	border-width: 2px;
	border-color: #ffff00;
	background-color: rgba(255, 255, 0, 0);
}

#webNav{
	position: fixed;
	z-index: 100;
}


button:focus {
	/* background-image: linear-gradient(to bottom right, #23a6d5, #23d5ab); */
	border: solid 1px #23a6d5 !important;
}	


.dan-nested-table tr{
	padding: 0;
	margin: 0;
	border: 0;
}
.dan-nested-table td{
	padding: 0px 2px;
	margin: 0;
	border: 0;
}

/* ================================================== *
/* FAQ */
/* ================================================== */

.faq_q{
	cursor: pointer;
}
.faq_q:hover {
	color: #23a6d5;
}


/* ================================================== *
/* Ghost button */
/* ================================================== */

.ghostButton {
	background: none;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 200px;
	border-style: solid;
  	border-width: 1px;
	border-color: white;
	color: white;
	cursor: pointer;
	padding: 8px 24px;
	transition: all 0.3s ease-in-out;
} 
.ghostButton:hover {
	background-color: rgba(255, 255, 255, 0.5);
	/* transform: scale(1.1); */
}
.ghostButton:focus {
	outline: none;
}
.ghostButton:active {
	background-color: rgba(255, 255, 255, 0.1);
}

button:focus {
	outline: none;
}

a.noUnderline {
	text-decoration: none;
}


.ghostButton_dark {
	background: none;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 200px;
	border-style: solid;
  	border-width: 1px;
	border-color: black;
	color: black;
	cursor: pointer;
	padding: 8px 24px;
	transition: all 0.3s ease-in-out;
} 
.ghostButton_dark:hover {
	background-color: rgba(255, 255, 255, 1);
	/* transform: scale(1.1); */
}
.ghostButton_dark:focus {
	border-style: solid;
  	border-width: 1px;
	border-color: black;
}
.ghostButton_dark:active {
	background-color: rgba(255, 255, 255, 1);
}






/* ================================================== */
/* Filled areas & highlights */
/* ================================================== */
.dan_grad_purple_4 {
	background-image: linear-gradient(to bottom right,#4B1329,#0B3A42); 
	color: white;
}
.dan_grad_purple_3 {
	background-image: linear-gradient(to bottom right,#4B1329,#125B68); 
	color: white;
}
.dan_grad_purple_2 {
	background-image: linear-gradient(to bottom right,#b93065,#1c8ea2); 
	color: white;
}
.dan_grad_red {
	background-image: linear-gradient(to bottom right,#ee7752,#e73c7e); 
	color: white;
}
.dan_grad_purple {
	background-image: linear-gradient(to bottom right,#e73c7e,#23a6d5); 
	color: white;
}
.dan_grad_blue_4 {
	background-image: linear-gradient(to bottom right,#0B3A42,#0B4538); 
	color: white;
}
.dan_grad_blue_3 {
	background-image: linear-gradient(to bottom right,#125B68,#126D58); 
	color: white;
}
.dan_grad_blue_2 {
	background-image: linear-gradient(to bottom right,#1C8EA2,#1CAA89); 
	color: white;
}
.dan_grad_blue {
	background-image: linear-gradient(to bottom right,#23a6d5,#23d5ab); 
	color: white;
}
.dan_grad_palegreen {
	background-image: linear-gradient(to bottom right,#23d5ab,#38761d); 
	color: white;
}
.dan_grad_green {
	background-image: linear-gradient(to bottom right,#38761d,#6aa84f); 
	color: white;
}
.dan_grad_lime {
	background-image: linear-gradient(to bottom right,#6aa84f,#f1c232); 
	color: white;
}
.dan_grad_orange {
	background-image: linear-gradient(to bottom right,#f1c232,#ee7752); 
	color: white;
}

.dan_blue {
	background-color: #23a6d5;
}
.dan_green {
	background-color: #38761d;
}
.dan_yellow {
	background-color: #f1c232; 
	color: white;
}
.dan_orange {
	background-color: #ee7752; 
	color: white;
}
.dan_red {
	background-color: #e73c7e; 
	color: white;
}

.dan_text_red {
	color: #e73c7e;
}
.dan_text_green {
	color: #6aa84f;
}



/* ================================================== */
/* Form field styling */
/* ================================================== */
/* icon on RHS of input (e.g. password show toggle) */
.field-icon {
	float: right;
	margin-left: -50%;
	margin-top: -50%;
	position: relative;
	z-index: 2;
  }

/* Password Strength Meter */
meter {
	appearance: none;	
		-webkit-appearance: none;
		-moz-appearance: none;
	margin: 0;
	width: 100%;
	height: 5px;
	background: none;
  	background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
	background: none;
	background-color: rgba(0, 0, 0, 0.1);
}


meter[value="0"] { background: grey; } 
meter[value="1"] { background-image: linear-gradient(to right, #e73c7e,#ee7752); }
meter[value="2"] { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"] { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"] { background-image: linear-gradient(to right,#6aa84f,#38761d); }

meter[value="0"]::-moz-meter-bar { background: grey; } 
meter[value="1"]::-moz-meter-bar { background-image: linear-gradient(to right,#e73c7e,#ee7752); }
meter[value="2"]::-moz-meter-bar { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"]::-moz-meter-bar { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"]::-moz-meter-bar { background-image: linear-gradient(to right,#6aa84f,#38761d); }

meter[value="1"]::-webkit-meter-optimum-value { background: grey; } 
meter[value="1"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#e73c7e,#ee7752); }
meter[value="2"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#6aa84f,#38761d); }

/* Messages */
.warning {
	color: #e73c7e
}
.neutral {
	color: #23a6d5
}


/* ================================================== */
/* Play Page styling */
/* ================================================== */
/* Apply the following to .dan-button??*/
/* no!!, removed from DAN buttons on play page */
.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.center {
  margin: auto;
}

/* ================================================== */
/* Play page styling */
/* ================================================== */
.timeline {
	height: calc(100vh - 55px - 58px - 0px - 123px - 40px);
	display:flex;
	flex-flow: column nowrap;
}
.playbackControls {
	height: 100%;
}
/* ================================================== */
/* Split styling */
/* ================================================== */
* {
  box-sizing: border-box;
}
.bodyPlay {
  height: calc(100vh - 40px);
}
.splitContent {
	width: 100%;
	height: calc(100vh - 55px - 40px);
	display: flex;
	justify-items: center;
	align-items: center;
}
.split {
	width: 100%;
	height: 100%;
	padding: 0px;
	border: 1px  #eee solid;
	display: block;
	justify-items: center;
	align-items: center;
}
.gutter {
	cursor: e-resize;
	height: 100%;
	background: #eee;
}
.splitEast {
	background: #fff;
	overflow: auto;
}
.splitWest {
	background: #ccc;
	overflow: hidden;
}





/* ================================================== */
/* Navigation Bar Styling & priority navigation */
/*Based on: https://codepen.io/olach/pen/adeMzP */
/* ================================================== */

nav {
	height: 42px; /* Menu height */
	overflow: hidden; /* Don't show anything outside the nav */
}

nav ul {
	margin: 0;
	/* padding: 4; */
	list-style-type: none;
	max-height: 84px; /* Menu height x 2 */
	position: relative; /* Position the menu button relative to this item */
}

nav li {
	display: inline-block;
}

nav a {
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
}


nav li:last-child { /* The menu button */
	position: absolute; /* Move the menu button out of flow */
	right: 0;
	bottom: 48px; /* Move upwards, the same distance as the menu height */
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 2em);
	padding-left: 3em;
}

/* hides the close button */
nav li:nth-last-child(2) { /* The close button */
	display: none;
}

/* makes the open menu sit below the menu button */
nav#menu:target {
	height: 205px;
	padding: 0;
}

/* makes the open menu sit below the menu button */
nav#menu:target li {
	display: block;
}

nav#menu:target li:last-child { /* The menu button */
	display: none;
}

nav#menu:target li:nth-last-child(2) { /* The close button */
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	border-left: 1px solid #ccc;
}

.dan-button{
	border: none;
	background: none; 
	color: none;
	padding: 0px;
	outline: 0px;
	cursor: pointer;
}

.dan-button:focus {
	outline:0;
}

.webnav_selected {
	border-bottom: solid #23a6d5 !important;
	border-width: 2px !important;	
}

.dan-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.dan-bar-item-narrow{padding:8px 4px;float:left;width:auto;border:none;display:block;outline:0}


/* ================================================== */
/* Accordion styling */
/* ================================================== */
.accordionHeader {
  cursor: pointer;
}

.accordionActive, .accordionHeader:hover {
  background-color: #ccc;
}

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

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

.accordionContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* ================================================== */
/* Homepage styling */
/* ================================================== */
.justify {
	text-align: justify;
  	text-justify: auto;
}
.link-img img{
	transition: 0.5s;
}

.link-img:hover img {
	transform: scale(1.3);
} 

.grow {
	transition: 0.7s;
}
.grow:hover {
	transform: scale(1.1);
	transition: 0.2s;
	
}
.slide {
	transition: 0.7s;
}
.slide:hover {
	transform: scale(1.1) translateX(0.9em);
	transition: 0.2s;
}



/* ================================================== */
/* ScrollBar styling */
/* ================================================== */
.scrollBarStyle-1{
	overflow: auto;
}
.scrollBarStyle-1::-webkit-scrollbar
{
	width: 10px;
	height: 10px;
	background-color: #fff;
}

.scrollBarStyle-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #fff;
}

.scrollBarStyle-1::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ddd;
}
.scrollBarStyle-2{
	overflow: auto;
}
.scrollBarStyle-2::-webkit-scrollbar
{
	width: 10px;
	background-color: #555;
}

.scrollBarStyle-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #555;
}

.scrollBarStyle-2::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #303030;
}
.scrollBarStyle-3{
	overflow: auto;
}
.scrollBarStyle-3::-webkit-scrollbar
{
	width: 4px;
	background-color: #fff;
}

.scrollBarStyle-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	border-radius: 3px;
	background-color: #fff;
}

.scrollBarStyle-3::-webkit-scrollbar-thumb
{
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.3);
	background-color: #aaa;
}
.scrollBarStyle-4{
	overflow: auto;
}
.scrollBarStyle-4::-webkit-scrollbar
{
	width: 4px;
	background-color: #555;
}

.scrollBarStyle-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	border-radius: 3px;
	background-color: #555;
}

.scrollBarStyle-4::-webkit-scrollbar-thumb
{
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	background-color: #303030;
}

/* Gradient Text */
.animated_text {
	/* background: -webkit-linear-gradient(#1ba0d7, #002d3f); */
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%; 
	-webkit-background-clip: text;
			background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: animatedGradient 20s linear infinite;
	   -moz-animation: animatedGradient 20s linear infinite;
			animation: animatedGradient 20s linear infinite;
}
.animated_text_2 {
	/* background: -webkit-linear-gradient(#1ba0d7, #002d3f); */
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%; 
	-webkit-background-clip: text;
			background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: animatedGradient_2 20s linear infinite;
	   -moz-animation: animatedGradient_2 20s linear infinite;
			animation: animatedGradient_2 20s linear infinite;
}
.animated_text_3 {
	/* background: -webkit-linear-gradient(#1ba0d7, #002d3f); */
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%; 
	-webkit-background-clip: text;
			background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: animatedGradient_3 20s linear infinite;
	   -moz-animation: animatedGradient_3 20s linear infinite;
			animation: animatedGradient_3 20s linear infinite;
}
.animated_text_4 {
	/* background: -webkit-linear-gradient(#1ba0d7, #002d3f); */
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%; 
	-webkit-background-clip: text;
			background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: animatedGradient_4 20s linear infinite;
	   -moz-animation: animatedGradient_4 20s linear infinite;
			animation: animatedGradient_4 20s linear infinite;
}


/* =================================================*/
/* Animated Background and Border styling 			*/
/* =================================================*/


.animatedBG {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient 20s linear infinite;
	   -moz-animation: animatedGradient 20s linear infinite;
			animation: animatedGradient 20s linear infinite;
}
.animatedBG_blue {
	background: linear-gradient(-45deg, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient 20s linear infinite;
	   -moz-animation: animatedGradient 20s linear infinite;
			animation: animatedGradient 20s linear infinite;
}
.animatedBG_purple {
	background: linear-gradient(-45deg, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient 20s linear infinite;
	   -moz-animation: animatedGradient 20s linear infinite;
			animation: animatedGradient 20s linear infinite;
}
@-webkit-keyframes animatedGradient {
	0% 		{ background-position: 0% 50%;		}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 100% 50%;	}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 0% 50%;		}
}
@-moz-keyframes animatedGradient {
	0% 		{ background-position: 0% 50%;		}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 100% 50%;	}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 0% 50%;		}
}
@keyframes animatedGradient {
	0% 		{ background-position: 0% 50%;		}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 100% 50%;	}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 0% 50%;		}
}

.animatedBG_2 {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient_2 20s linear infinite;
	   -moz-animation: animatedGradient_2 20s linear infinite;
			animation: animatedGradient_2 20s linear infinite;
}
@-webkit-keyframes animatedGradient_2 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 0% 50%;		}
	50% 	{ background-position: 50% 50%;		}
	75% 	{ background-position: 100% 50%;	}
	100% 	{ background-position: 50% 50%;		}
}
@-moz-keyframes animatedGradient_2 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 0% 50%;		}
	50% 	{ background-position: 50% 50%;	    }
	75% 	{ background-position: 100% 50%;	}
	100% 	{ background-position: 50% 50%;     }
}
@keyframes animatedGradient_2 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 0% 50%;		}
	50% 	{ background-position: 50% 50%;		}
	75% 	{ background-position: 100% 50%;	}
	100% 	{ background-position: 50% 50%;		}
}

.animatedBG_3 {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient_3 20s linear infinite;
	   -moz-animation: animatedGradient_3 20s linear infinite;
			animation: animatedGradient_3 20s linear infinite;
}
@-webkit-keyframes animatedGradient_3 {
	0% 		{ background-position: 100% 50%;	}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 0% 50%;		}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 100% 50%;	}
}
@-moz-keyframes animatedGradient_3 {
	0% 		{ background-position: 100% 50%;	}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 0% 50%;		}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 100% 50%;	}
}
@keyframes animatedGradient_3 {
	0% 		{ background-position: 100% 50%;	}
	25% 	{ background-position: 50% 50%;		}
	50% 	{ background-position: 0% 50%;		}
	75% 	{ background-position: 50% 50%;		}
	100% 	{ background-position: 100% 50%;	}
}

.animatedBG_4 {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: animatedGradient_4 20s linear infinite;
	   -moz-animation: animatedGradient_4 20s linear infinite;
			animation: animatedGradient_4 20s linear infinite;
}
@-webkit-keyframes animatedGradient_4 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 100% 50%;	}
	50% 	{ background-position: 50% 50%;		}
	75% 	{ background-position: 0% 50%;		}
	100% 	{ background-position: 50% 50%;		}
}
@-moz-keyframes animatedGradient_4 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 100% 50%;	}
	50% 	{ background-position: 50% 50%;		}
	75% 	{ background-position: 0% 50%;		}
	100% 	{ background-position: 50% 50%;		}
}
@keyframes animatedGradient_4 {
	0% 		{ background-position: 50% 50%;		}
	25% 	{ background-position: 100% 50%;	}
	50% 	{ background-position: 50% 50%;		}
	75% 	{ background-position: 0% 50%;		}
	100% 	{ background-position: 50% 50%;		}
}

.animatedBorder {
  border: 1px solid #23a6d5;
  /* --borderWidth: 1px; */
  background: #fff;
  position: relative;
  border-radius: var(--borderWidth);
}
/* .animatedBorder:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  z-index: -1;
  -webkit-animation:   animatedGradient 10s linear infinite;
	   -moz-animation: animatedGradient 10s linear infinite;
			animation: animatedGradient 10s linear infinite;
  background-size: 400% 400%;
} */



/* Bouncing */
.bounce {
	animation-delay: 3s;
	animation-duration: 5s;
    animation-iteration-count: 5;
	animation-name: bounce-7;
	animation-timing-function: ease-in-out;
	/* animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1); */
}
@keyframes bounce-7 {
	0%   { transform: scale(1,1)      	translateY(0); }
	5%  { transform: scale(1.2,.9)   	translateY(0); }
	15%  { transform: scale(.9,1.1)   	translateY(14px); }
	25%  { transform: scale(1.05,.95) 	translateY(0); }
	29%  { transform: scale(.95,1.05)   translateY(7px); }
	32%  { transform: scale(1.03,.97)   translateY(0); }
	34%  { transform: scale(0.98,1.02)  translateY(2px); }
	35%  { transform: scale(1,1)      	translateY(0); }
	100% { transform: scale(1,1)      	translateY(0); }
}












	/* TEXT SLIDESHOW */
	/* https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp */
	/* Slideshow container */
  .slideshow-container {
	position: relative;
	/* background: #f1f1f1f1; */
	/* height: 40px; */
  }
  
  /* Slides */
  .mySlides {
	display: none;
	padding: 24px 80px;
	text-align: center;
  }
  
  /* Next & previous buttons */
  .prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -30px;
	padding: 16px;
	color: #888;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
	position: absolute;
	right: 0;
	border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
	color: white;
  }
  
  /* The dot/bullet/indicator container */
  .dot-container {
	text-align: center;
	padding: 6px;
	/* background: #ddd; */
  }
  
  /* The dots/bullets/indicators */
  .dot {
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
  }
  
  /* Add a background color to the active dot/circle */
  .active, .dot:hover {
	background-color: #717171;
  }
  
  /* Add an italic font style to all quotes */
  q {font-style: italic;}


.pricing_plan_code {
	border: 1px solid #666;
	background-color: #ccc;
	border-radius: 20px;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 8px;
}

.onboarding_section {
	display: block;
	position:relative;
	border-bottom: 1px solid #ccc;
}
.onboarding_section_a{
	display: inline-block;
	height: 36px;
	width: 36px;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
}
.onboarding_section_a.circle{
	border: 2px solid black;
	border-radius: 50%;
}
.onboarding_section_b{
	display: inline-block;
	padding-left:20px;
}
.onboarding_section_c{
	display: inline-block;
	padding-top: 6px;
	position: absolute;
	right: 0px;
}

/* SECTIONS  */

.section_title,
.f_section_title {
    cursor: pointer;
    padding: 8px 16px;
    vertical-align: middle;
}
.section_title_open > .section_arrow {
    transform: rotate(90deg);
}
.section_arrow {
    transition: transform 0.2s;
    margin-right: 8px;
}

#mfa_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 12px;

}
#mfa_table td {
	padding: 8px;
}
#mfa_table th {
	padding: 8px;
	/* background-color: #ddd; */
}
.controls_button {
	padding: 4px;
    min-width: 36px;
    border: 0px solid #fff;
	border-radius: 4px;
    margin-left: 8px;
	cursor: pointer;
	display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.controls_button_inline {
	padding: 4px;
    min-width: 36px;
    border: 0px solid #fff;
	border-radius: 4px;
    margin-left: 8px;
	cursor: pointer;
	font-size: 0.8em;
	display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.controls_button:hover,
.controls_button_small:hover {
	background-color: #ccc;
}
.controls_button_border {
	border: 1px solid #ccc;
}

.controls_message {
	font-size: 0.8em;
}

.controls_delete_confirm_span {
    border: 1px solid #e73c7e;
	border-radius: 4px;
    padding-left: 8px;
	color:#e73c7e;
	display: inline-block;
    vertical-align: middle;
	text-align: center;
	white-space: nowrap;
}
.controls_td {
	text-align: right;
}

.dan_tiny_id {
	font-family: monospace;
	font-size: 0.6em;
	opacity: 0.7;
}

#mfa_auth_app_container,
#mfa_auth_tel_container {
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 12px;
	margin: 12px;
}

#mfa_app_code_container {
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 12px;
	padding-bottom: 0px;
	margin: auto;
	max-width: 200px;
}
#input_mfa_app_code,
#input_mfa_auth_app_verify_code {
	font-size: 2em;
	text-align: center;
	width: 100%;
	border-bottom: hidden;
	letter-spacing: 0.2em;
}
.mfa_app_code_message_container {
	text-align: center;
}

.f_cqc_select {
	cursor: pointer;
	transition: all 0.2s ease-in;
	font-size: 0.8em;
	border:1px solid #fff;
	border-bottom: 1px solid #ccc;
	border-radius: 8px 8px 0px 0px;
	padding: 4px 8px;
}
.f_cqc_select:hover {
	font-size: 0.9em;
	border: 1px solid #23a6d5;
	border-radius: 8px;
}
#cqc_result_count {
	color: #6c276a;
}






/* ================================================== */
/* LANGUAGE */
/* .language_container {
	
} */

.language_list {
	border-radius: 8px;
	overflow-y: auto;
	max-height: 0px;
	transition: max-height 0.3s ease-in-out;
}
.language_container:hover .language_list {
	border: 1px solid #ccc;
	max-height: 400px;
}
.language_item {
	cursor: pointer;
	padding: 8px 16px;
	border-bottom: 1px solid #ccc;
}
.language_item:hover {
	background-color: #eee;
}
#language_selected_container .language_item {
	border: none;
}
#language_selected_container .language_label {
	font-size: 0.7em;
	display: none;
}
#language_selected_container:hover .language_label {
	display: inline;
}

.language_flag {
	max-height: 12px;
	border-radius: 4px;
	border: 1px solid #ccc;
}