/*----VIDEOJS----*/
.vjs-button:hover,
.vjs-button:focus {
	color: #f5004a;
}

.video-js .vjs-play-progress:before,
.video-js .vjs-volume-level:before,
.vjs-icon-circle:before {
	color: #f5004a;
}

.video-js .vjs-play-progress {
	background-color: #f5004a !important;
}

.video-js .vjs-volume-level {
	background-color: #f5004a !important;
}

.vjs-big-play-button:hover,
.vjs-big-play-button:focus {
	color: #f5004a;
}

.video-js .vjs-load-progress div {
	background: rgba(184, 193, 207, .75) !important;
}

/*----Screen_Chart(bottom-right-progressbar)----*/
#Screen_Chart svg path:first-child,
#Screen_Chart .progressbar-text {
	/*circle*/
	stroke: #000000;
}


/*----Menu text color hover, progresscircle color-----s*/
#Menu_Side_Content li:hover,
#Menu_Side_Content li:hover:before,
#Screen_Chart svg path:nth-child(2),
.spanchart svg path:nth-child(2) {
	color: #f5004a;
	stroke: #f5004a;
}

#Menu_Side_Content li:focus,
#Menu_Side_Content li:focus:before,
#Screen_Chart svg path:nth-child(2),
.spanchart svg path:nth-child(2) {
	color: #f5004a;
	stroke: #f5004a;
}

/*----circles in TOC normal color-----*/
.spanchart svg path:first-child {
	stroke: rgb(204, 204, 204);
}

/*----Menu_Charts(menu progressbars)----*/
#Menu_Side_Content li {
	/*Menu text color*/
	color: rgb(204, 204, 204);
}

/*Menu Headline background color*/
#Menu_Side_Content>nav>h2 {
	background-color: #f5004a;
}

/*Menu Headline text color*/
#Menu_Side_Content nav h2 {
	color: #FFFFFF;
}

/*Info-Overlay-Close (X)*/
/* #Info_Closer:after {
  color: #000000;
} */
button#Info_Closer:hover svg,
button#Info_Closer:focus svg {
	fill: #f5004a;
}


.reveal h2 {
	color: #f5004a;
}

#startbutton {
	background-color: #f5004a;
}

.q3_drags:hover,
.q3_drags:focus {
	color: #f5004a;
}
.droppable:focus{
	/* background-color: #f5004a!important; */
	border: .1rem dashed rgba(0, 0, 0, 0.5)!important;	
	box-sizing: border-box;	
}

/*grey field around mcq/scq answers*/
.mc-answer:hover,
.sc-answer:hover,
.mc-answer:focus,
.sc-answer:focus {
	background-color: rgba(160, 160, 160, 0.4);
}

.reveal .feedbacks2 {
	background-color: #ffffff;
}


/*//////////////////////////////////////////////
  Upper left navigation elements 
 //////////////////////////////////////////////*/

nav#smar_sideElements button {
	fill: #f5004a;
}

nav#smar_sideElements button:hover,
nav#smar_sideElements button:focus,
nav#smar_sideElements button#smar_Eye:hover g#iris path,
nav#smar_sideElements button#smar_Eye:focus g#iris path {
	fill: #f5004a;
	stroke: #f5004a;
}


/*//////////////////////////////////////////////
  Main navigation elements 
 //////////////////////////////////////////////*/

nav#smar_mainElements button:hover,
nav#smar_mainElements button:focus {
	fill: #f5004a;
	stroke: #f5004a;
}


/*//////////////////////////////////////////////
	MCQ and SCQ button classes
 //////////////////////////////////////////////*/
li.mc-answer div.mcq-button svg rect:nth-of-type(2),
li.sc-answer div.scq-button svg circle:first-of-type {
	stroke: #f5004a; 
}

 li.mc-answer div.mcq-button svg rect:first-of-type,
li.sc-answer div.scq-button svg circle:nth-of-type(2){
	/* fill: #f5004a; */
	stroke: #f5004a; 
}

/* inner rectangle fill and stroke on hover */
li.mc-answer:hover div.mcq-button svg rect:first-of-type,
li.sc-answer:hover div.scq-button svg circle:nth-of-type(2),
li.mc-answer:focus div.mcq-button svg rect:first-of-type,
li.sc-answer:focus div.scq-button svg circle:nth-of-type(2) {
	fill: #f5004a;
	/* stroke: red;  */
}

/* outer rectangle stroke on hover */	
li.mc-answer:hover div.mcq-button svg rect:nth-of-type(2),
li.sc-answer:hover div.scq-button svg circle:first-of-type, 
li.mc-answer:focus div.mcq-button svg rect:nth-of-type(2),
li.sc-answer:focus div.scq-button svg circle:first-of-type {
	 /* stroke: red; */
}

/* class in smartin.js that keeps color changed for inner rectangle fill and stroke on click */
.button-down-color {
	fill: #f5004a;
	/* stroke: red!important; */
}

/*//////////////////////////////////////////////
	Start Arrow and 'Start' SVG
 //////////////////////////////////////////////*/

 #content:hover #mup_2>svg, #content:focus #mup_2>svg {
	fill: #f5004a;
}

#content:hover #mup_1>svg, #content:focus #mup_1>svg {
	fill: #f5004a;
}


.idbehold{
	background-color: rgb(3, 148, 153);
}

.sideNavHeader{
	background-color: #d37102;
}

.sideNavButton:hover{
    background-color: #b86e00;
}