input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

:root {
	--color-success: hsl(80,100%,35%);
	--color-hover: hsl(80,100%,25%);
	--color-hover-border: hsl(80,100%,23%);
	--color-focus-border-success: hsl(80,100%,10%);

	--color-info: hsl(280,60%,50%);
	--color-hover: hsl(280,60%,40%);
	--color-hover-border: hsl(280,60%,38%);
	--color-focus-border-info: hsl(280,60%,25%);

	--color-warning: hsl(32,100%,50%);
	--color-hover: hsl(32,100%,40%);
	--color-hover-border: hsl(32,100%,38%);
	--color-focus-border-warning: hsl(32,100%,25%);

	--color-danger: hsl(0,100%,40%);
	--color-hover: hsl(0,100%,30%);
	--color-hover-border: hsl(0,100%,28%);
	--color-focus-border-danger: hsl(0,100%,15%);

	--color-primary: hsl(199,68%,50%);
	--color-hover: hsl(199,68%,40%);
	--color-hover-border: hsl(199,68%,38%);
	--color-focus-border-primary: hsl(199,68%,25%);

	--color-extra1: hsl(302,80%,60%);
	--color-hover: hsl(302,80%,50%);
	--color-hover-border: hsl(302,80%,48%);
	--color-focus-border-extra1: hsl(302,80%,35%);

	--color-extra2: hsl(235,80%,50%);
	--color-hover: hsl(235,80%,40%);
	--color-hover-border: hsl(235,80%,38%);
	--color-focus-border-extra2: hsl(235,80%,25%);

	--color-extra3: hsl(125,70%,25%);
	--color-hover: hsl(125,70%,15%);
	--color-hover-border: hsl(125,70%,13%);
	--color-focus-border-extra3: hsl(125,70%,0%);

	--color-black: hsl(0,0%,5%);
	--color-hover: hsl(0,0%,-5%);
	--color-hover-border: hsl(0,0%,-7%);
	--color-focus-border-black: hsl(0,0%,-20%);

  --color-text: #888888;
}

html {
	background-color: black;
	transition: background-color .6s ease-in-out;
	height:100%;
}

body {
  padding-top: 20px;
  padding-bottom: 20px;	
  -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.navbar {
  margin-bottom: 20px;
}

.navbar li img.flag {
	height: 12px;
	position: relative;
	left: -1px;
	margin-right: -1px;
}

.text-nowrap,
.text-nobr {
	white-space: nowrap;
}

.dowrap {
	white-space: normal !important;
}

div.container-fluid {
	transition: opacity 1s ease-in-out;		
}

.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}

.sort-handle {
	position: relative;
	top: 10px;
	cursor: grab;
}

.sort-handle:active {
	cursor: grabbing !important;
}

.grabbing * {
	cursor: grabbing !important;
}

.panel-default .panel-title,
.panel-default h5 {
	color: #ccc;
}

/* ============================= GENERATE VIEW -==================================================== */
#intensity-slider .slider-track, #intensity-slider .slider-selection {
	background: black;
}

.slider-handle {
	background: var(--color-primary);
}

html.success,
.slider-rangeHighlight.success {
	background: var(--color-success) !important;
}

html.info,
.slider-rangeHighlight.info {
	background: var(--color-info) !important;
}

html.warning,
.slider-rangeHighlight.warning {
	background: var(--color-warning) !important;
}

html.danger,
.slider-rangeHighlight.danger {
	background: var(--color-danger) !important;
}

html.primary,
.slider-rangeHighlight.primary {
	background: var(--color-primary) !important;
}

html.extra1,
.slider-rangeHighlight.extra1 {
	background: var(--color-extra1) !important;
}

html.extra2,
.slider-rangeHighlight.extra2 {
	background: var(--color-extra2) !important;
}

html.extra3,
.slider-rangeHighlight.extra3 {
	background: var(--color-extra3) !important;
}

html.black,
.slider-rangeHighlight.black {
	background: var(--color-black) !important;
}

			
div.well > h2 {
	margin-top: 0px;
}

div.form-group h5 span {
	position: relative;
	top: -3px;
}


tr.ex-row td div.cont {
	min-height: 12px;
	display: flex;
	flex-flow: column;
 	justify-content: center;
	line-height: 15px;
	text-shadow: -1px 1px 0 rgba(0,0,0,.33), 1px 1px 0 rgba(0,0,0,.33), 1px -1px 0 rgba(0,0,0,.33), -1px -1px 0 rgba(0,0,0,.33);
}

tr.ex-row td div.cont.tight {
	line-height: 12px;
}

div.radio label, div.checkbox label {
	margin-right: 15px;
}

.selectize-dropdown {
	background-color: #222222 !important;
}

.selectize-dropdown-content {
	max-height: 300px !important;
	border: 1px solid;
	border-top-width: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 0;
}

.selectize-dropdown .dropdown-item h6 {
	margin-bottom: 2px;
	margin-top: 2px;
}

.selectize-dropdown .dropdown-item { 
	padding: 5px 10px;
}

.selectize-dropdown .dropdown-item h6,
.selectize-dropdown .dropdown-item small {
	color: #aaaaaa;
}

.selectize-dropdown .dropdown-item.active h6,
.selectize-dropdown .dropdown-item.active small {
	color: white;
}

.selectize-dropdown .highlight {
	color: white;
	background:rgba(255,237,40,.55) !important;
}

.selectize-dropdown .dropdown-item:not(:first-child) {
	border-top: 1px solid #555555;
}

#ex-sorter .list-group-item {
	background-color: #111111;
	color: var(--color-text);
}

.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
	box-shadow:inset 0 0 12px 4px #141414 !important;
}

div.selectize-input {
	background-color: #222222;
	border-color: #555555;
}

.selectize-input input {
	color: var(--color-text) !important;	
}

/* =============== ACTION VIEW ===========================*/
body.action {
  padding-top: 15px;
  padding-bottom: 15px;	
  height: 100%;
	background-color: transparent;
}

body.action .centering-container {
  display: flex;
 	justify-content: center;
	align-items: center;
	flex-flow: column;
	height: 100%;
}

body.action .container-fluid {
	opacity: 0;
	z-index: 3;
	width: 100%;
}

body.action * {
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.fit {
  display: inline-block;
  white-space: nowrap;
}

.carousel {
	cursor: pointer;
}

/* ================ CURRENT EX ======================= */
div.carousel-inner .item .alert {
	height: calc(90vh - 100px);
	max-height: 400px;
	border: none;
	display: flex;
	flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

@media (min-height: 700px) {
	div.carousel-inner .item .alert {
		height: calc(100vh - 80px);
	}
}

#next-ex div.carousel-inner {
	margin-top: 3px;
}

@media (max-width: 567px) {
	div.carousel-inner .item .alert {
		height: calc(50vh - 65px);
	}
	.carousel-inner .item .alert .timer {
		font-size: 80px;
		line-height: 80px;
	}	
}


#carousel div.carousel-inner {
	border: 3px solid white;
	border-radius: 4px;
}

.carousel-inner .item .alert .dummy { /* for flexbox spacing */
	height: 0;
}

.carousel-inner .item .alert {
	padding: 0;
}

@media (min-width: 568px) and (min-height: 400px) {
	.carousel-inner .item .alert {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}


.carousel-inner .item .alert .this-ex-text,
.carousel-inner .item .alert .next-ex-text {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	padding-left: 15px;
	padding-right: 15px;
	font-family: 'Roboto condensed', sans-serif;
}

@media (min-width: 1024px) {
	.carousel-inner .item .alert .this-ex-text,
	.carousel-inner .item .alert .next-ex-text {
/*		font-size: 35px;	*/
	}
}

.carousel-inner .item .alert .timer {
	font-size: 100px;
	line-height: 90px;
}


/* =============== CAROUSEL CONTROLS ================= */
.visible {                     /* animation doesnt work :( */
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear;
}
.hidden {                     /* animation doesnt work :( */
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.5s, opacity 0.5s linear;
}

a.carousel-control {
	padding-top: 110px;
	padding: 20px 15px 0;
	font-weight: bold;
	background: none !important;
	height: 100%;
}

a.carousel-control.left {
	margin-left: 5px;
}

a.carousel-control.right {
	margin-right: 5px;
}

/* ================ NEXT EX =======================*/
.next-ex-header,
.next-ex-footer {
	text-align: center;
	font-size: 25px;
	line-height: 50px;
}

/* ================= INFO ==========================*/
div.exercises .col-xs-12 {
	margin-bottom: 15px;
}

div.row.info h4 {
	margin: 0;
	white-space: nowrap;
}

/* =================== PAUSED ========================= */
.fullscreen-overlay {
	background-color: rgba(0,0,0,.85);
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 5;
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
	-webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
      -ms-transition: opacity 0.5s ease-in-out;
       -o-transition: opacity 0.5s ease-in-out;
          transition: opacity 0.5s ease-in-out;
}

#pause-overlay .button-container {
	margin-top: 50px;
	text-align: center;
}

#pause-overlay .button-container button,
#pause-overlay .button-container a {
	margin: 0 20px 30px;
	min-width: 200px;
}

#joke-body {
	text-align: center;
	padding: 20px;
}

/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

#preview-table td {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#preview-table td a {
	text-decoration: none;
}


/*!
 * Spinner
 */
 #loader-container {
	position: fixed;
	height: 0;
	width: 0;	 
	top: 50%;
	left: 50%;
	z-index: 999;
	-webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
      -ms-transition: opacity 0.5s ease-in-out;
       -o-transition: opacity 0.5s ease-in-out;
          transition: opacity 0.5s ease-in-out;
 }

 #loader-inner {
	position: relative;
	top: -80px;
	left: -80px;
	width: 160px;
	height: 160px;
	border-radius: 10px;
	background-color: rgba(0,0,0,.8);
 }
 
 #loader-inner div.text {
	text-align: center;
	padding-top: 25px;
	height: 10px;
	color: white; 
 }
 
.lds-hourglass {
  display: inline-block;
  position: relative;
  top: 20px;
  left: 40px;
  width: 80px;
  height: 80px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}


.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th,
.label-success,
.alert-success {
  background-color: hsl(80,100%,35%);
  color: white; 
}


.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th
{
  background-color: hsl(80,100%,25%);
}

.btn-success,
.selectize-success .selectize-input > div.item {
  color: white;
  background-color: hsl(80,100%,35%);
  border-color: hsl(80,100%,35%);
}

li.selectize-success .selectize-dropdown-content {
  border-color: hsl(80,100%,35%) !important;
}

li.selectize-success .selectize-input > div.active {
  background-color: hsl(80,100%,25%) !important;
  border-color:  hsl(80,100%,23%) !important;
}

.btn-success:focus,
.btn-success.focus {
  background-color: hsl(80,100%,25%);
  border-color:  hsl(80,100%,23%);
}

.btn-success:hover {
  background-color: hsl(80,100%,25%);
  border-color:  hsl(80,100%,23%);
}

.btn-success:active,
.btn-success.active
{
  background-color: hsl(80,100%,10%);
  background-image: none;
  border-color: hsl(80,100%,10%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-success .selectize-input.focus {
	outline: 0;
	border-color: hsl(80,100%,35%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(80,100%,25%);
}

li.selectize-success .dropdown-item.active {
	background-color: hsl(80,100%,35%);	
}


.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th,
.label-info,
.alert-info {
  background-color: hsl(280,60%,50%);
  color: white; 
}


.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th
{
  background-color: hsl(280,60%,40%);
}

.btn-info,
.selectize-info .selectize-input > div.item {
  color: white;
  background-color: hsl(280,60%,50%);
  border-color: hsl(280,60%,50%);
}

li.selectize-info .selectize-dropdown-content {
  border-color: hsl(280,60%,50%) !important;
}

li.selectize-info .selectize-input > div.active {
  background-color: hsl(280,60%,40%) !important;
  border-color:  hsl(280,60%,38%) !important;
}

.btn-info:focus,
.btn-info.focus {
  background-color: hsl(280,60%,40%);
  border-color:  hsl(280,60%,38%);
}

.btn-info:hover {
  background-color: hsl(280,60%,40%);
  border-color:  hsl(280,60%,38%);
}

.btn-info:active,
.btn-info.active
{
  background-color: hsl(280,60%,25%);
  background-image: none;
  border-color: hsl(280,60%,25%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-info .selectize-input.focus {
	outline: 0;
	border-color: hsl(280,60%,50%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(280,60%,40%);
}

li.selectize-info .dropdown-item.active {
	background-color: hsl(280,60%,50%);	
}


.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th,
.label-warning,
.alert-warning {
  background-color: hsl(32,100%,50%);
  color: white; 
}


.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th
{
  background-color: hsl(32,100%,40%);
}

.btn-warning,
.selectize-warning .selectize-input > div.item {
  color: white;
  background-color: hsl(32,100%,50%);
  border-color: hsl(32,100%,50%);
}

li.selectize-warning .selectize-dropdown-content {
  border-color: hsl(32,100%,50%) !important;
}

li.selectize-warning .selectize-input > div.active {
  background-color: hsl(32,100%,40%) !important;
  border-color:  hsl(32,100%,38%) !important;
}

.btn-warning:focus,
.btn-warning.focus {
  background-color: hsl(32,100%,40%);
  border-color:  hsl(32,100%,38%);
}

.btn-warning:hover {
  background-color: hsl(32,100%,40%);
  border-color:  hsl(32,100%,38%);
}

.btn-warning:active,
.btn-warning.active
{
  background-color: hsl(32,100%,25%);
  background-image: none;
  border-color: hsl(32,100%,25%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-warning .selectize-input.focus {
	outline: 0;
	border-color: hsl(32,100%,50%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(32,100%,40%);
}

li.selectize-warning .dropdown-item.active {
	background-color: hsl(32,100%,50%);	
}


.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th,
.label-danger,
.alert-danger {
  background-color: hsl(0,100%,40%);
  color: white; 
}


.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th
{
  background-color: hsl(0,100%,30%);
}

.btn-danger,
.selectize-danger .selectize-input > div.item {
  color: white;
  background-color: hsl(0,100%,40%);
  border-color: hsl(0,100%,40%);
}

li.selectize-danger .selectize-dropdown-content {
  border-color: hsl(0,100%,40%) !important;
}

li.selectize-danger .selectize-input > div.active {
  background-color: hsl(0,100%,30%) !important;
  border-color:  hsl(0,100%,28%) !important;
}

.btn-danger:focus,
.btn-danger.focus {
  background-color: hsl(0,100%,30%);
  border-color:  hsl(0,100%,28%);
}

.btn-danger:hover {
  background-color: hsl(0,100%,30%);
  border-color:  hsl(0,100%,28%);
}

.btn-danger:active,
.btn-danger.active
{
  background-color: hsl(0,100%,15%);
  background-image: none;
  border-color: hsl(0,100%,15%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-danger .selectize-input.focus {
	outline: 0;
	border-color: hsl(0,100%,40%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(0,100%,30%);
}

li.selectize-danger .dropdown-item.active {
	background-color: hsl(0,100%,40%);	
}


.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th,
.label-primary,
.alert-primary {
  background-color: hsl(199,68%,50%);
  color: white; 
}


.table-hover > tbody > tr > td.primary:hover,
.table-hover > tbody > tr > th.primary:hover,
.table-hover > tbody > tr.primary:hover > td,
.table-hover > tbody > tr:hover > .primary,
.table-hover > tbody > tr.primary:hover > th
{
  background-color: hsl(199,68%,40%);
}

.btn-primary,
.selectize-primary .selectize-input > div.item {
  color: white;
  background-color: hsl(199,68%,50%);
  border-color: hsl(199,68%,50%);
}

li.selectize-primary .selectize-dropdown-content {
  border-color: hsl(199,68%,50%) !important;
}

li.selectize-primary .selectize-input > div.active {
  background-color: hsl(199,68%,40%) !important;
  border-color:  hsl(199,68%,38%) !important;
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: hsl(199,68%,40%);
  border-color:  hsl(199,68%,38%);
}

.btn-primary:hover {
  background-color: hsl(199,68%,40%);
  border-color:  hsl(199,68%,38%);
}

.btn-primary:active,
.btn-primary.active
{
  background-color: hsl(199,68%,25%);
  background-image: none;
  border-color: hsl(199,68%,25%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-primary .selectize-input.focus {
	outline: 0;
	border-color: hsl(199,68%,50%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(199,68%,40%);
}

li.selectize-primary .dropdown-item.active {
	background-color: hsl(199,68%,50%);	
}


.table > thead > tr > td.extra1,
.table > tbody > tr > td.extra1,
.table > tfoot > tr > td.extra1,
.table > thead > tr > th.extra1,
.table > tbody > tr > th.extra1,
.table > tfoot > tr > th.extra1,
.table > thead > tr.extra1 > td,
.table > tbody > tr.extra1 > td,
.table > tfoot > tr.extra1 > td,
.table > thead > tr.extra1 > th,
.table > tbody > tr.extra1 > th,
.table > tfoot > tr.extra1 > th,
.label-extra1,
.alert-extra1 {
  background-color: hsl(302,80%,60%);
  color: white; 
}


.table-hover > tbody > tr > td.extra1:hover,
.table-hover > tbody > tr > th.extra1:hover,
.table-hover > tbody > tr.extra1:hover > td,
.table-hover > tbody > tr:hover > .extra1,
.table-hover > tbody > tr.extra1:hover > th
{
  background-color: hsl(302,80%,50%);
}

.btn-extra1,
.selectize-extra1 .selectize-input > div.item {
  color: white;
  background-color: hsl(302,80%,60%);
  border-color: hsl(302,80%,60%);
}

li.selectize-extra1 .selectize-dropdown-content {
  border-color: hsl(302,80%,60%) !important;
}

li.selectize-extra1 .selectize-input > div.active {
  background-color: hsl(302,80%,50%) !important;
  border-color:  hsl(302,80%,48%) !important;
}

.btn-extra1:focus,
.btn-extra1.focus {
  background-color: hsl(302,80%,50%);
  border-color:  hsl(302,80%,48%);
}

.btn-extra1:hover {
  background-color: hsl(302,80%,50%);
  border-color:  hsl(302,80%,48%);
}

.btn-extra1:active,
.btn-extra1.active
{
  background-color: hsl(302,80%,35%);
  background-image: none;
  border-color: hsl(302,80%,35%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-extra1 .selectize-input.focus {
	outline: 0;
	border-color: hsl(302,80%,60%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(302,80%,50%);
}

li.selectize-extra1 .dropdown-item.active {
	background-color: hsl(302,80%,60%);	
}


.table > thead > tr > td.extra2,
.table > tbody > tr > td.extra2,
.table > tfoot > tr > td.extra2,
.table > thead > tr > th.extra2,
.table > tbody > tr > th.extra2,
.table > tfoot > tr > th.extra2,
.table > thead > tr.extra2 > td,
.table > tbody > tr.extra2 > td,
.table > tfoot > tr.extra2 > td,
.table > thead > tr.extra2 > th,
.table > tbody > tr.extra2 > th,
.table > tfoot > tr.extra2 > th,
.label-extra2,
.alert-extra2 {
  background-color: hsl(235,80%,50%);
  color: white; 
}


.table-hover > tbody > tr > td.extra2:hover,
.table-hover > tbody > tr > th.extra2:hover,
.table-hover > tbody > tr.extra2:hover > td,
.table-hover > tbody > tr:hover > .extra2,
.table-hover > tbody > tr.extra2:hover > th
{
  background-color: hsl(235,80%,40%);
}

.btn-extra2,
.selectize-extra2 .selectize-input > div.item {
  color: white;
  background-color: hsl(235,80%,50%);
  border-color: hsl(235,80%,50%);
}

li.selectize-extra2 .selectize-dropdown-content {
  border-color: hsl(235,80%,50%) !important;
}

li.selectize-extra2 .selectize-input > div.active {
  background-color: hsl(235,80%,40%) !important;
  border-color:  hsl(235,80%,38%) !important;
}

.btn-extra2:focus,
.btn-extra2.focus {
  background-color: hsl(235,80%,40%);
  border-color:  hsl(235,80%,38%);
}

.btn-extra2:hover {
  background-color: hsl(235,80%,40%);
  border-color:  hsl(235,80%,38%);
}

.btn-extra2:active,
.btn-extra2.active
{
  background-color: hsl(235,80%,25%);
  background-image: none;
  border-color: hsl(235,80%,25%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-extra2 .selectize-input.focus {
	outline: 0;
	border-color: hsl(235,80%,50%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(235,80%,40%);
}

li.selectize-extra2 .dropdown-item.active {
	background-color: hsl(235,80%,50%);	
}


.table > thead > tr > td.extra3,
.table > tbody > tr > td.extra3,
.table > tfoot > tr > td.extra3,
.table > thead > tr > th.extra3,
.table > tbody > tr > th.extra3,
.table > tfoot > tr > th.extra3,
.table > thead > tr.extra3 > td,
.table > tbody > tr.extra3 > td,
.table > tfoot > tr.extra3 > td,
.table > thead > tr.extra3 > th,
.table > tbody > tr.extra3 > th,
.table > tfoot > tr.extra3 > th,
.label-extra3,
.alert-extra3 {
  background-color: hsl(125,70%,25%);
  color: white; 
}


.table-hover > tbody > tr > td.extra3:hover,
.table-hover > tbody > tr > th.extra3:hover,
.table-hover > tbody > tr.extra3:hover > td,
.table-hover > tbody > tr:hover > .extra3,
.table-hover > tbody > tr.extra3:hover > th
{
  background-color: hsl(125,70%,15%);
}

.btn-extra3,
.selectize-extra3 .selectize-input > div.item {
  color: white;
  background-color: hsl(125,70%,25%);
  border-color: hsl(125,70%,25%);
}

li.selectize-extra3 .selectize-dropdown-content {
  border-color: hsl(125,70%,25%) !important;
}

li.selectize-extra3 .selectize-input > div.active {
  background-color: hsl(125,70%,15%) !important;
  border-color:  hsl(125,70%,13%) !important;
}

.btn-extra3:focus,
.btn-extra3.focus {
  background-color: hsl(125,70%,15%);
  border-color:  hsl(125,70%,13%);
}

.btn-extra3:hover {
  background-color: hsl(125,70%,15%);
  border-color:  hsl(125,70%,13%);
}

.btn-extra3:active,
.btn-extra3.active
{
  background-color: hsl(125,70%,0%);
  background-image: none;
  border-color: hsl(125,70%,0%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
;

}

li.selectize-extra3 .selectize-input.focus {
	outline: 0;
	border-color: hsl(125,70%,25%);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px hsl(125,70%,15%);
}

li.selectize-extra3 .dropdown-item.active {
	background-color: hsl(125,70%,25%);	
}


.table > thead > tr > td.black,
.table > tbody > tr > td.black,
.table > tfoot > tr > td.black,
.table > thead > tr > th.black,
.table > tbody > tr > th.black,
.table > tfoot > tr > th.black,
.table > thead > tr.black > td,
.table > tbody > tr.black > td,
.table > tfoot > tr.black > td,
.table > thead > tr.black > th,
.table > tbody > tr.black > th,
.table > tfoot > tr.black > th,
.label-black,
.alert-black {
  background-color: hsl(0,0%,5%);
  color: white; 
}

.label-black,
.alert-black {
	box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.333);
}

.table-hover > tbody > tr > td.black:hover,
.table-hover > tbody > tr > th.black:hover,
.table-hover > tbody > tr.black:hover > td,
.table-hover > tbody > tr:hover > .black,
.table-hover > tbody > tr.black:hover > th
{
  background-color: hsl(0,0%,-5%);
}

.btn-black,
.selectize-black .selectize-input > div.item {
  color: white;
  background-color: hsl(0,0%,5%);
  border-color: hsl(0,0%,5%);
	box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.333);
}

li.selectize-black .selectize-dropdown-content {
  border-color: hsl(0,0%,5%) !important;
}

li.selectize-black .selectize-input > div.active {
  background-color: hsl(0,0%,-5%) !important;
  border-color:  hsl(0,0%,-7%) !important;
}

.btn-black:focus,
.btn-black.focus {
  background-color: hsl(0,0%,-5%);
  border-color:  hsl(0,0%,-7%);
}

.btn-black:hover {
  background-color: hsl(0,0%,-5%);
  border-color:  hsl(0,0%,-7%);
}

.btn-black:active,
.btn-black.active
{
  background-color: hsl(0,0%,-20%);
  background-image: none;
  border-color: hsl(0,0%,-20%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
	,inset 0px 0px 0px 1px rgba(255,255,255,0.2)
;

}

li.selectize-black .selectize-input.focus {
	outline: 0;
	border-color: #666666;
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px #666666;
}

li.selectize-black .dropdown-item.active {
	background-color: hsl(0,0%,5%);	
}


.btn-mixed {
	color: white;
	background: linear-gradient(120deg, hsl(80,100%,35%) 5%, hsl(280,60%,50%) 16%, hsl(32,100%,50%) 27%, hsl(0,100%,40%) 38%, hsl(199,68%,50%) 50%, hsl(302,80%,60%) 61%, hsl(235,80%,50%) 72%, hsl(125,70%,25%) 83%, hsl(0,0%,5%) 95%) !important;
}

.btn-custom {
	color: white;
}


.btn-custom:hover,
.btn-mixed:hover {
	opacity: .9 !important;
}

.btn-custom:active,
.btn-custom.active,
.btn-mixed:active,
.btn-mixed.active {
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}


/* https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin,latin-ext */
/* roboto-regular - roboto-700 - latin-ext_latin 
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('assets/fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'),       url('assets/fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('assets/fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), 
       url('assets/fonts/roboto-v20-latin-ext_latin-700.woff') format('woff');
}
*/