.choice-box input {
    opacity: 0;
    position: fixed;
    width: 0;
}

.positioned-container {
    position: relative;
}

.positioned-container div {
    position: absolute;
}

.column-holder {
    display: -ms-flex; display: -webkit-flex; display: flex;
}

.column {
    float:left;
}

.in-sentence {
    border: none;
    display: inline-block;
}

.input-line {
    border-top: none;
    border-left: none;
    border-right: none;
    border-color: black;
    border-width: 1px;
}

.horizontal-list * {
    display: inline-block;
}

.as-draggable {
    background-color: transparent;
    margin: 2px;
    border-radius: 4px;
    margin: 5px;
}

.draggable {
    background-color: lightgray;
    margin: 2px;
    border-radius: 4px;
    margin: 5px;
    white-space: nowrap;
}
.night .draggable { background-color:#314455; }

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khTMl-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}



/* Tables: https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/ */
/* Component styles */
[id^=U i] .component, [id^=samrad i] .component, [id^=znatiz i] .component, [id^=TM i] .component {
	line-height: 1.5em;
	margin: 0 auto;
	padding: 2em 0 3em;
	width: 90%;
	max-width: 1000px;
	overflow: hidden;
}
[id^=U i] .component .filler , [id^=samrad i] .component .filler , [id^=znatiz i] .component .filler, [id^=TM i] .component .filler {
	font-family: "Blokk", Arial, sans-serif;
	color: lightgray;
}

/*custom style for "Ishodi" tables */
.card-body table {
	border-collapse: collapse;
    width: 100%;
	margin-bottom: 0em;
    background: lightgray;
}


/* Custom Slides */
.slides-container{
	text-align: center;
	position: relative;
	min-height:80px;	
    overflow: hidden;
	padding-top: 8px;
	padding-bottom: 5px;
	height:400px;
}
.slides-resizeable-container
{	text-align: center;
	position: relative;
	padding-top: 8px;
	padding-bottom: 5px;
	min-height:80px;
}
.slides-colored{
	background-color:#eef5e180;
}
.night .slides-colored {
	background-color: #1101ef80;
}
.slides-container .answers label{
	display: block;
	margin-bottom: 10px;
}

.spell-check {
	word-wrap: break-word;
	word-break: break-all;
	min-height: 25px;
	overflow: hidden;
}

.slides-container .slide,
.slides-resizeable-container .slide{
	display: none;
	width: 100%;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s;
}

.slides-container .slide{
	position: absolute;
}

.slides-container .active-slide, .slides-resizeable-container .active-slide{
	opacity: 1;
	z-index: 2;
	display:inherit;
}


.slides-container .slide{
	height:100%;
}

.slides-btn-container{
	padding:4px;	
}

.slides-container ~ .slides-btn-container,
.slides-resizeable-container ~ .slides-btn-container
{
	background-color:#eef5e1;
}

/*The only ~ occurences */
.night .slides-container ~ .night .slides-btn-container,
.night .slides-resizeable-container ~ .night .slides-btn-container
{
	background-color:#213445;
}


.slides-btn-container button{
	min-width:120px;
	padding:5px;
}
.slides-header{
	background-color:#eef5e1;
	padding:4px;	
}

.night .slides-header{
	background-color:#213445;
}


.slides-header{
	font-size:x-large;
	text-align:center;
}
.slides-pagination{
	float:right;
}

/* Timer */

[id^=U i] time, [id^=samrad i] time, [id^=znatiz i] time, [id^=TM i] time {
	font-size:x-large;
}
/* Drag and drop */


/*Exo - Not inverted - green is visible on both light and dark mode - opposite is #630463 */
.night [id^=U i] .ui-droppable-hover, 
.night [id^=samrad i] .ui-droppable-hover, 
.night [id^=znatiz i] .ui-droppable-hover, 
.night [id^=TM i] .ui-droppable-hover {
	
    box-shadow: palegreen;
}

[id^=U i] .ui-draggable-dragging, [id^=samrad i] .ui-draggable-dragging, [id^=znatiz i] .ui-draggable-dragging, [id^=TM i] .ui-draggable-dragging {
    z-index: 10;
}

.crossword{
	box-sizing:content-box;
}
.crossword .puzzleSquare
{
	flex: 1;
    max-width: 7vw;
}
.crossword > #puzzle > div{
	flex: 1;
    display: flex;
    flex-flow: row;
}


p.correct + div.indicator-container, p.incorrect + div.indicator-container{
    float: right;
}
p.correct + div.indicator-container > span.indicator, p.incorrect + div.indicator-container > span.indicator{
    margin-top: -12px;
}
ul.horizontal-list + div.indicator-container{
	/*Unable to make style for this*/
	display: none!important;
}

/* Carousel */
.card-title-container{
	text-align: center;
    padding-bottom: 10px;
}
.card-content-container{
	text-align: center;
}

.bg-defaultbgColor{
	background-color:#314455;
}

.night .bg-defaultbgColor{
	background-color:#cebbaa;
}
.carousel.slide .carousel-indicators {
	position:relative;
	z-index: 5;
}

[id^=U i] .carousel-indicators li, [id^=samrad i] .carousel-indicators li, [id^=znatiz i] .carousel-indicators li, [id^=TM i] .carousel-indicators li{
	border-bottom: 0px;
	background-color:#314455;
}

/* Exo - Not inverted - green is visible on both light and dark mode - opposite is #d758ba */



/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
	.carousel p.card-text{
		font-size:0.95em;
	}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
	.carousel p.card-text{
		font-size:0.9em;
	}
}

/*Custom styles for interactions*/
/*used in: 1_n_M1_U4_I2*/
.c1-input-line-transparent_with_border {
	background-color: transparent;
	border: gray 3px solid;
	border-radius: 5px;
}

/*used in 1_p_M1_U4_I1*/
.c2-table-title{
	color: white;
	background-color: rgb(117, 186, 252);
}

/*used in 5_2_M1_U4_I2*/
.c3-label-transparent-bg{
	background-color: rgba(0, 0, 0, 0) !important;
}

.c3-label-transparent-bg * {
	background-color: rgba(0, 0, 0, 0) !important;
}

/*used in 5_5_M1_U1_I8*/
.c4-slot-familytree{	
	border: white 3px solid;
	border-radius: 5%;
}

/*used in 5_2_M1_U3_I2*/
.c5-slot-familytree2{
	border: white 3px solid;
	border-radius: 5%;
}

/*used in: 5_2_M2_U4_I4*/
.c6-puzzle-background{
	background-color:white;
}

/*used in: 1_n_M1_U6_I2*/
.c7-transparent-bg {
	background-color: transparent !important;
}

/*used in: 1_n_M1_U6_I2*/
.c8-transparent-bg-child-elements *{
	background-color: transparent !important;
}

/*used in: 1_n_M1_U6_I2*/
.c8-transparent-bg-child-elements:hover{
	background-color:rgba(255, 255, 255, 0.336);
}

/*used in: 5_5_M2_U6_I3*/
.c9-textbox-slot-on-image{
	background-color: rgba(255, 255, 255, 0.6);
	border: white 3px solid;
	border-radius: 5px;
}

/*used in: 5_5_M2_U1_I15*/
.c10-td-light1{
	background-color: white;
}

/*used in: 5_5_M2_U1_I15*/
.c10-td-light2{
	background-color: #f5f5f5;
}

/*used in: 5_5_M2_U1_I15*/
.night .c10-td-light1{
	background-color: black;
}

/*used in: 5_5_M2_U1_I15*/
.night .c10-td-light2{
	background-color: #0A0A0A;
}

/* Removed colors, no effective difference: */
/* used in 1_n_M1_U6_I1 in #U6_I1 label */
/* background-color:transparent;*/

/*click-and-slot - added to have spacing between draggable items on reset*/
.click-and-slot-draggable{
	margin: 1px;
	padding: 1px;
}

/*slides - added to preserve slide buttons visible on all resolutions*/
.carousel-item .justify-content-between {
	flex-wrap: wrap;
}

/*slides - added to preserve slide buttons visible on all resolutions*/
.carousel-item .justify-content-center {
	flex-wrap: wrap;
}

/*slides - added to allow wrapping int the input slides - in content labels*/
.carousel-item .input-group-text{
	white-space: normal;
}

/*slides - added for min text input width*/
.carousel-item .form-control{
	min-width: 150px;
}

/*slides - disable color change on hover on disabled buttons of class .btn-dark*/
.carousel-item .btn-dark:disabled{
	pointer-events: none;
}

.night .card {
	background-color: transparent;
}

.night .card, 
.night .card .card-header, 
.night .card .card-body, 
.night .card .card-footer {
	border-color: rgba(255,255,255,.125);
}

.night .btn-outline-secondary {
	color: #a7b6c2;
	border-color: #a7b6c2;
}

.night .input-group-prepend label, .night .input-group-append label {
	background-color: #213444;
    color: white;
    border-color: white;
}

.night .input-group input {
	background-color: #314455;
    color: white;
    border-color: white;
}

.night li.list-group-item {
	background-color: #314455;
}


/* Bootstrap override */
.carousel-indicators li {
	border-radius:6px;
	height:12px;
	width:12px;
	border-top:none;
    margin-top: 10px;
}






.spell-check>.correct {
	background-color: inherit !important;
}
.spell-check>.incorrect {
	background-color: inherit !important;
}










.hopa-container {
	position:relative;
	width:100%;
}
.hopa-item.not-found {
	position: absolute;
}
.hopa-item img {
	width:100%;
}
.hopa-highlight {
	background-color: white;
}



.card {
	border: none;
	border-radius: 0px;
	background-color:rgb(233, 236, 239);
}

.card .card-header, .card .card-body, .card .card-footer {
	border: none;
}

.card {
	color:#000000;
}
.night .card {
	color:white;
}

.card .input-group-text {
	background-color: #a9bbd0;
	border-radius: 0;
	color: #000000;
}
.input-group input {
	border:none;
}

.card .input-group {
	padding-bottom: 10px;
}

.card label {
	margin-bottom: 0;
}


.collapse .card, .collapsing .card {
	padding:0;
	border-radius: 0;
	border: none;
}

.content-text .btn-primary {
	margin: 0;
	border:none;
	border-radius: 0;
}

.interaction-card {
	border: none;
	border-radius: 0px;
	background-color:rgb(233, 236, 239);

	position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}




.radio-toolbar {
	display: inline-block;
}
.radio-toolbar input[type="radio"], .checkbox-toolbar input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}
.radio-toolbar label>span, .checkbox-toolbar label>span {
    display: inline-block;
	border-radius: 37px;
	color: #000000;
	padding: 6px 12px;
	transition: all .2s ease-in-out;
}
.radio-toolbar label.image-label>span, .checkbox-toolbar label.image-label>span {
	padding: 0;
}
.radio-toolbar label.image-label img, .checkbox-toolbar label.image-label img {
	border-radius: 37px;
}

.radio-toolbar label.in-sentence>span,
.checkbox-toolbar label.in-sentence>span {
	padding: 3px 12px;
}
.radio-toolbar label:hover>span,
.checkbox-toolbar label:hover>span {
	color: white;
}
.radio-toolbar input[type="radio"]:checked + label>span,
.checkbox-toolbar input[type="checkbox"]:checked + label>span {
	padding: 5px 12px;
	border-width: 3px;
	font-weight: bold;
	color: white;
}

.radio-toolbar input[type="radio"] + label.image-label>span,
.checkbox-toolbar input[type="checkbox"] + label.image-label>span {
	border-width: 5px;
}
.radio-toolbar input[type="radio"]:checked + label.image-label>span,
.checkbox-toolbar input[type="checkbox"]:checked + label.image-label>span {
	padding:0;
}

.radio-toolbar label.incorrect.image-label>span,
.checkbox-toolbar label.incorrect.image-label>span {
	border-color: #FD6861 !important;
}
.radio-toolbar label.correct.image-label>span,
.checkbox-toolbar label.correct.image-label>span {
	border-color: #77dd77 !important;
}


.radio-toolbar label.incorrect>span,
.checkbox-toolbar label.incorrect>span {
	color: #fff;
    background-color: #FD6861 !important;
    border-color: #314455;
}
.radio-toolbar label.correct>span,
.checkbox-toolbar label.correct>span {
	color: #fff;
    background-color: #77dd77 !important;
    border-color: #314455;
}

.radio-toolbar label,
.checkbox-toolbar label {
	background-color: inherit !important;
}


.radio-toolbar label.img-label > .indicator-container,
.checkbox-toolbar label.img-label > .indicator-container {
	position:absolute;
    top: -15px !important;
    right: -15px !important;
}
.night .radio-toolbar label.img-label > .indicator-container,
.night .checkbox-toolbar label.img-label > .indicator-container {
	background-color: transparent;
}

.radio-toolbar label.correct.img-label >span::after,
.checkbox-toolbar label.correct.img-label >span::after {
	content: '';
	display: block;
	height: 90%;
	position: absolute;
	top: 5%;
	width: 90%;
}
.radio-toolbar label.incorrect.img-label >span::after,
.checkbox-toolbar label.incorrect.img-label >span::after {
	content: '';
	display: block;
	height: 90%;
	position: absolute;
	top: 5%;
	width: 90%;
}



.correct-container + div.indicator-container, .incorrect-container + div.indicator-container,
.correct + div.indicator-container, .incorrect + div.indicator-container,
.correct div.indicator-container, .incorrect div.indicator-container{
	display: inline!important;
}

.correct-container + div.indicator-container, .incorrect-container + div.indicator-container{
	float: right;
}

.correct-container span.indicator, .incorrect-container span.indicator,
.correct span.indicator, .incorrect span.indicator {
	width:1.4em;
	height:1.4em;
	z-index:1;
	vertical-align: middle;
}
div.indicator-container{
	display: none;
}


.indicator-container > span.indicator {
	font-size: 1.4em;
    line-height: 1.4em;
    text-align: center;
}
.incorrect .indicator-container > span.indicator {
	color: #FD6861;
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
}
.incorrect .indicator-container > span.indicator::before {
    content: "\f00d"
}

.correct .indicator-container > span.indicator {
	color: #77dd77;
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
}
.correct .indicator-container > span.indicator::before {
    content: "\f00c"
}




.click-and-slot-holder.radio-toolbar label>span {
	border-radius: 0px;
	padding: 5px 12px;
	border: none;
}
.night .click-and-slot-holder.radio-toolbar label>span {
	background-color: transparent;
	box-shadow: none;
}

.click-and-slot-holder.radio-toolbar label:hover>span, .click-and-slot-holder.radio-toolbar input[type="radio"]:checked + label>span {
	color: inherit;
	background-color: #c2c9d0;
	transform: scale(1.05);
	font-weight: normal;
}


.ui-droppable-hover {
    box-shadow: 0 0 2pt 3pt #213445;
}
.night .ui-droppable-hover {
    box-shadow: 0 0 2pt 3pt white;
}


.ui-droppable {
	padding: 5px;
	margin-bottom: 5px;
	min-height:52px;
	background-color:white;
}

.night .ui-droppable {
	background-color:transparent;
}

.click-and-slot-interaction {
	/*background-color: #e9ecef;*/
	padding: 5px;
}
.night .click-and-slot-interaction {
	background-color: transparent;
}

.flex-column-margins>div {
	margin:10px;
}
.flex-column-margins>div:first-child {
	margin-left: 0;
}
.flex-column-margins>div:last-child {
	margin-right: 0;
}


.radio-toolbar .vertical-toolbar, .checkbox-toolbar .vertical-toolbar {
	display: block;
}

.flex-grow {
    flex: 1 0 auto;
}





/* below manual merge*/
.text-area-lines {
    background-attachment: local;
    background-image:
		linear-gradient(to right, transparent 10px, transparent 10px), 
		linear-gradient(to left, transparent 10px, transparent 10px), 
		repeating-linear-gradient(transparent, transparent 35px, #ccc 35px, #ccc 36px, transparent 35px);
	line-height: 36px;
	padding: 8px 10px;
	border-radius: 10px;
	background-color: transparent;
	border: 0px;
}
.night .text-area-lines {
	color:white;
}

.text-area-lines.white {
    background-image:
        linear-gradient(to right, #fff 10px, transparent 10px),
        linear-gradient(to left, #fff 10px, transparent 10px),
        repeating-linear-gradient(#fff, #fff 35px, #ccc 35px, #ccc 36px, #fff 35px);
}

.sorted-container {
	background-color: #ffffff;
    margin-top: 10px;
    border-radius: 10px;
	margin-bottom: 10px;
	padding: 5px;
}

.card-title {
	margin-bottom: .35rem;
}

p.card-text {
	padding-bottom: 5px;
	margin-bottom: 0;
}

.card-title-container {
	text-align: center;
	padding-bottom:0px;
}
.card-header {
	padding-top: 6px;
	padding-bottom: 6px;
}

.border-danger .sorted-container {
	border:0px solid #FD6861;
}

.border-success .sorted-container {
	border:0px solid #77dd77;
}

.bg-success {
	background-color: #77dd77 !important;
}
.bg-danger {
	background-color: #FD6861 !important;
}

.sorted-container>.btn, .sortable-container>.btn {
	/*display: inline-block;*/
	border-radius: 37px;
	color: #000000;
	padding: 6px 12px;
	transition: all .2s ease-in-out;
	padding: .175rem .35rem;
}
.sorted-container>.btn:hover, .sortable-container>.btn:hover {
	color: white;
}

.night .sorted-container>.btn, .night .sortable-container>.btn {
	/*background-color: transparent;*/
	color: white;
	border: 2px solid white;
}

.fa-check {
	color: #77dd77
}
.fa-times {
	color:#FD6861
}






.memory-game * {
	padding:0;
	margin:0;
	box-sizing: border-box;
}

.memory-game {
	/*height: 95vh;*/

	max-width: 720px;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	
	align-content:center;

	perspective: 1000px;
}

.memory-card {
	height:calc(95vh / 6);
	width:calc(33% - 10px);
	margin:5px;

	position:relative;
	align-content: center;
	vertical-align: middle;
	padding:5px;
	border-radius:5px;
	
	transition: transform .5s;
	transform-style: preserve-3d;

	font-weight: bold;
	overflow-wrap: break-word;
}
.night .memory-card {
	border: 2px solid;
	border-color: #e8ecef;
}


.memory-card.correct {
	background-color: #e8ecef !important;
	transform: scale(1.1);
}
.correct>.front-face, .correct.back-face {
	color: #d47729 !important;
}


.memory-card.flip {
	transform:	rotateY(-180deg);
	transition: transform .2s;
}

.memory-card p {
	padding-bottom:0;
}

.front-face,
.back-face {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;

	height:calc(100% - 10px);
	vertical-align:middle;
	position:absolute;
	width:calc(100% - 10px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: rotateX(0deg)
}

.front-face img, .back-face img {
	max-width:100%;
	max-height: 95%;
	vertical-align: middle;
}

.front-face {
	transform: rotateY(180deg) rotateX(0deg) translateZ(10px);
}

.front-face p, .back-face p {
	word-wrap: break-word;
	margin: auto; /* Important */ 
	text-align: center; 
}

.real-crossword .modal-content {
	background-color: #fff !important;
	border: 1px solid rgba(0,0,0,.2)  !important;
	border-radius: .3rem !important; 
}

.apostrophe-text span.apostrophe {
	font-weight: bold;
	font-size: larger;
}

.crossword .puzzleSquare {
	font-weight: bold !important;
	background-color: #e8ecef !important;
	color: #000000 !important;
	border-radius: 80px !important;
	font-size: 1.5rem !important;
	font-weight: bold !important;
}
.night .crossword .puzzleSquare {
	color:white !important;
	background-color: transparent !important;
}

.crossword .puzzleSquare.found {
	background-color: #000000 !important;
	color: white !important;
}
.night .crossword .puzzleSquare.found {
	color:#000000 !important;
	background-color: #e8ecef !important;
}

.crossword .puzzleSquare.selected {
	background-color: #a9bcd0 !important;
}
.night .crossword .puzzleSquare.selected {
	color:#000000 !important;
}

.night .crossword .word {
	background-color: transparent;
	color: white;
}

@media only screen and (max-width: 500px) {
	.real-crossword .letter-slot {
		font-size:1rem !important;
	}
}



.real-crossword .row {
	margin-right: 0;
	margin-left: 0;
}

.real-crossword .letter-slot {
	background-color: #e8ecef;
	border-radius: 18px;
	font-size: 1.5rem;
	text-align: center;
    font-weight: bold;
}

.night .real-crossword .letter-slot, .night .real-crossword .letter-slot.correct-slot {
	background-color: #e8ecef;
	color:#314253;
}
.night .real-crossword .focused-slot {
	background-color: #a9bbd0;
	color:#314253;
}

.real-crossword .letter-slot-modal-container {
	padding-top:0;
	align-content: stretch!important;
}

.real-crossword .letter-slot-modal {
	height: 50px;
	background-color: #e8ecef;
    border-radius: 7px;
    width: 10%;
    text-align: center;
    line-height: 3rem;
    font-weight: bold;
    flex-shrink: 1;
}
.night .real-crossword .letter-slot-modal {
	color:#314253
}
.night .real-crossword .letter-slot-modal-fixed {
	background-color: #e8ecef;
	color:#314253;
}
.real-crossword .w-100 .col-xs-1 {
	height:100%;
}

#card-fail, #card-success {
	margin-top: .5rem;
    margin: 2px;
}


button.close.fa.fa-times {
	background-color: transparent;
	font-size: medium;
	color:white;
	line-height: 1.4em;
}
.night .real-crossword .modal-content {
	background-color: #314455 !important;
}
.night button.close.fa.fa-times {
	color:#314455;
}
.modal-content button.close.fa.fa-times {
	color: #314455 !important;
}
.night .modal-content button.close.fa.fa-times {
	color: white !important;
}

button.close.fa.fa-times:hover {
	background-color: transparent;
	font-size: medium;
	box-shadow: none;
}

.content-container .content-text[data-spy="scroll"] {
	/*margin-top: 1.3rem;
    margin-bottom: 3rem;*/
    border-top: 4px solid rgb(225, 113, 115);
}



.close.fa.fa-times {
	opacity: 1;
}







/* Buttons https://www.fabriziovanmarciano.com/button-styles/*/

.btn-reset, .btn-check, .btn-dark, .btn-show-answers {
	color: #fff !important;
	text-transform: uppercase;
	text-decoration: none;
	background: #314455;
	display: inline-block;
	border: none;
	transition: all 0.1s ease 0s;
}
.night .btn-reset, .night .btn-check, .night .btn-dark, .night .btn-show-answers {
	color: #213445 !important;
	background: white;
}

.btn-reset:disabled, .btn-check:disabled, .btn-dark:disabled, .btn-show-answers:disabled {
	background-color:#1b1b1b4a;
}

.night .btn-reset:disabled, .night .btn-check:disabled, .night .btn-dark:disabled, .night .btn-show-answers:disabled {
	background-color:#ffffff4a;
}

.btn-reset, .btn-check, .btn-prev, .btn-next {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.2rem;
	margin: 2px;
}
.btn-show-answers, .btn-dark {
	height: 2.5rem;
}

.btn-check {
	margin-left:0;
}
.btn-reset::before {
	content: "\f2f1"
}
.btn-check::before {
	content: "\f00c"
}
.btn-prev:before {
	content: "\f060"
}
.btn-next:before {
	content: "\f061"
}

.btn-show-answers {
	margin: 2px;
	margin-left: 6px;
}

[id^=U i] button:not(.puzzleSquare) button:not(.btn), 
[id^=samrad i] button:not(.puzzleSquare) button:not(.btn), 
[id^=znatiz i] button:not(.puzzleSquare) button:not(.btn), 
[id^=TM i] button:not(.puzzleSquare) button:not(.btn) {
    padding-right: 6px;
    padding-left: 6px;
}

[id^=U i] button:focus:not(.btn), [id^=samrad i] button:focus:not(.btn), [id^=znatiz i] button:focus:not(.btn), [id^=TM i] button:focus:not(.btn) {
	outline: none;
}

.btn-reset {
	background-color:#e27173;
}


[id^=U i] button:disabled, [id^=U i] button[disabled],
[id^=samrad i] button:disabled,  [id^=samrad i]  button[disabled],
[id^=znatiz i] button:disabled, [id^=znatiz i] button[disabled],
[id^=TM i] button:disabled, [id^=TM i] button[disabled]{
	background-color: #1b1b1b4a;
}

.night [id^=U i] button:disabled, .night  [id^=U i] button[disabled],
.night [id^=samrad i] button:disabled, .night [id^=samrad i]  button[disabled],
.night [id^=znatiz i] button:disabled, .night [id^=znatiz i] button[disabled],
.night [id^=TM i] button:disabled, .night [id^=TM i] button[disabled]{
	background-color:#ffffff4a;
}



.carousel-prev {
	margin-left:4px;
}

.carousel-next {
	margin-left:4px;
}



.correct {
	font-weight: bold;
	color: white;
    background-color: #77dd77 !important;
}

.incorrect {
	font-weight: bold;
	color: white;
    background-color: #FD6861 !important;
}

span.apostrophe-text {
	color: inherit;
	background-color: inherit !important;
}

.spell-check>.incorrect, .spell-check>.correct {
	color: #213445;
	font-weight: bold;
}
.night .spell-check>.incorrect, .night .spell-check>.correct {
	color: inherit;
}

.correct>select {
	color: white;
	font-weight: bold;
	background-color: #77dd77;
}
.incorrect>select {
	color: white;
	font-weight: bold;
	background-color: #FD6861;
}

.text-input-line-container.correct,
.text-input-line-container.incorrect {
	color: inherit;
	background-color: inherit !important;
	font-weight: normal;
}




.night .radio-toolbar label>span,
.night .checkbox-toolbar label>span {
	background-color: transparent;
	border: 2px solid white;
	color: white;
}

.night .radio-toolbar label.correct>span,
.night .checkbox-toolbar label.correct>span {
	background-color: #77dd77;
}
.night .radio-toolbar label.incorrect>span,
.night .checkbox-toolbar label.incorrect>span {
	background-color: #FD6861;
}



.night .text-success {
	color: white !important;
}
.night .text-danger {
	color: white !important;
}





.night .carousel-indicators li {
	background-color:white;
}

.carousel-indicators li.indicator-correct {

	background-color:#77dd77;
}



.checklist-table table {
	table-layout: fixed;
	width: 100%;
}

.checklist-table.header-less-checklist-table table td {
	text-align: left;
}
.checklist-table.header-less-checklist-table .checklist-table-mobile table td {
	text-align: center;
}

.checklist-table table th {
	word-wrap: break-word;
	white-space: normal;
}

.checklist-table .first-column {
	text-align: left;
}






.card.text-white {
	text-align: center;
	font-weight: bold;
}
.card.text-white .card-body {
	padding: 0.5rem;
}

/*.card.text-white.bg-secondary {
	background-color: #314455 !important;
}*/


.carousel-indicators {
	color: black;
	font-weight: bold;
}
.night .carousel-indicators {
	color: white;
}




.card-content-container.card-content-container-align-left{
	text-align: left;
	justify-content: center;
	display:flex;
	flex-direction: column;
	align-items:center;
}

.input-line {
	padding-left: 5px;
	border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
    border-radius: 10px;
	background-attachment: local;
	line-height: 33px;
	min-height: 35px;
	background-image: 
		linear-gradient(to right, #e9ecef 10px, transparent 10px), 
		linear-gradient(to left, #e9ecef 10px, transparent 10px), 
		repeating-linear-gradient(#e9ecef, #e9ecef 25px, #ccc 25px, #ccc 26px, #e9ecef 25px);
}

.card-content-container .input-line {
	background-image: 
		linear-gradient(to right, #fff 10px, transparent 10px), 
		linear-gradient(to left, #fff 10px, transparent 10px), 
		repeating-linear-gradient(#fff, #fff 25px, #ccc 25px, #ccc 26px, #fff 25px);
}



.correct>.input-line, .card-content-container .input-line.correct {
	color: white;
	font-weight: 600;
	background-image: 
	linear-gradient(to right, #77dd77 10px, transparent 10px), 
	linear-gradient(to left, #77dd77 10px, transparent 10px), 
	repeating-linear-gradient(#77dd77, #77dd77 25px, #ccc 25px, #ccc 26px, #77dd77 25px) !important;
}
.incorrect>.input-line, .card-content-container .input-line.incorrect {
	color: white;
	font-weight: 600;
	background-image: 
	linear-gradient(to right, #FD6861 10px, transparent 10px), 
	linear-gradient(to left, #FD6861 10px, transparent 10px), 
	repeating-linear-gradient(#FD6861, #FD6861 25px, #ccc 25px, #ccc 26px, #FD6861 25px) !important;
}

.night .input-line {
	color: white;
	background-image: 
		linear-gradient(to right, transparent 10px, transparent 10px), 
		linear-gradient(to left, transparent 10px, transparent 10px), 
		repeating-linear-gradient(transparent, transparent 25px, #ccc 25px, #ccc 26px, transparent 25px);
	background-color: transparent;
}



 .fill-sentence-container>div {
	 padding-bottom: 5px;
 }


 /* MERGE */

 .carousel .card-title-container:empty {
	padding:0;
	margin:0;
	height:0;
}
.carousel .card-header,
.carousel .card-footer {
	padding: 0.25rem;
}



/* Carousel */
.card-title-container{
	text-align: center;
	padding-bottom: 10px;
}
.card-content-container {
	text-align: center;
}
.card-content-container.card-content-container-align-left{
	text-align: left;
	justify-content: center;
	display:flex;
	flex-direction: column;
	align-items:center;
}

.flex-content-centered {
	display:flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
}

.carousel-status.fa-check {
    color: #2a9641 !important;
}

.carousel-status.fa-times {
    color: #FD6861 !important;
}








.word-list * 
{
    margin: 5px;
	background-color: #314455;
	border: 0px solid white;
	border-radius: 10px;
	padding: 4px;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
}

.click-and-slot-holder {
	flex-wrap: wrap;
}

.carousel .btn-choice {
	max-width: 45%;
	position: relative;
}
@media only screen 
and (max-device-width : 480px) {
    /* Styles */
	.carousel .btn-choice {
		max-width: 90%;
	}
}



.text-input-line-container .generated {
	max-width:100%;
}


.carousel.slide .card-body {
	padding: 0.1rem;
}






.mail-field {
	border: gray solid 2px;
	border-radius: 5px;
	padding:0.25rem;
	margin-bottom:0.5rem;
	width:100% !important;
}

.mail-field>label {
	/*flex:1 1 auto;*/
	width: 100px;
}
.mail-field>.input-line, .mail-field>.text-input-line-container {
	flex:1 1 auto;
	width: 100%;
}
.mail-field>.text-input-line-container>.input-line {
	width:100%;
}





.code-block .card-body .card-content-container {
	max-height: 80vh;
}
@media only screen 
and (max-device-width : 350px) {
	.code-block .card-body .card-title {
		font-size: 1.1rem !important;
	}

	.indicator-container > span.indicator {
		font-size: 1em !important;
		width:1.05em !important;
	}
	.ui-draggable>.indicator-container>.indicator {
		display:none !important;
	}

	.btn-show-answers {
		font-size: 0.8em;
	}
}

@media only screen 
and (max-device-width : 600px) {
	.moduleItemWrapper.col-12 {
		padding: 0;
		padding-left: 60px;
		padding-right: 10px;
	}
}

@media only screen 
and (max-device-width : 500px) {
	.crossword .puzzleSquare {
		font-size: 0.8em !important;
	}
	.click-and-slot-holder label>span {
		padding: 3px 6px !important;
		font-size: 0.8em;
	}
    .code-block .card-body .card-content-container {
		max-height: 200vh !important;
	}
}

@media only screen and (max-width: 500px) and (min-width: 350px) {
	.real-crossword .letter-slot {
		font-size:1rem !important;
	}
}
@media only screen and (max-width: 350px) {
	.real-crossword .letter-slot {
		font-size:0.5rem !important;
	}
}



/* fixing dropdown leak*/
.card-generated-slide {
	max-width: 100%;
}
.carousel .card-generated-slide {
	padding: 0.2rem;
}
.carousel select {
	margin-left: 0.2rem;
	margin-right: 0.2rem;
}

table .input-line {
	max-width: 100%;
}

.btn-sort.btn-sort-image {
	padding:0;
}
.btn-sort-image>img {
	border-radius: 37px;
}




.low-res-split-small {
	display:none;
}
@media screen and (max-width: 500px){
	.low-res-split-small {
		display: table !important;
	}
	.low-res-split-large {
		display:none;
	}
}


/* used in 5_2_M1_U3_I2 */
.family-tree {
	max-width: 600px;
}
.family-tree .slot {
	position: absolute;
	padding: 0;
}

.family-tree .click-and-slot-holder {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
}

.family-tree .slot label {
	width: 100%;
}

.family-tree .slottables label {
	min-width: 76px;
	max-width: 30%;
}
#U3_I2_1 .family-tree .slot {
	width: 31%;
}

#U3_I2_2 .family-tree .slot {
	width: 31%;
}

#U3_I2_3 .family-tree .slot {
	width: 28%;
}

#U3_I2_4 .family-tree .slot {
	width: 23%;
}



.text-area-lines.fill-text-area {
	resize: none;
	border: none;
	overflow: auto;
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background-image: 
		linear-gradient(to right, transparent 10px, transparent 10px), 
		linear-gradient(to left, transparent 10px, transparent 10px), 
		repeating-linear-gradient(transparent, transparent 32px, #ccc 32px, #ccc 33px, transparent 32px);
	overflow: auto;
	overflow-x: hidden;
	color:black;

	border-radius: 10px;
	background-attachment: local;
	line-height: 33px;
	min-height: 45px;

	padding: 8px 10px;
}
.night .text-area-lines.fill-text-area {
	color: white;
}



.text-area-lines.fill-text-area.grey {
	background-image: 
		linear-gradient(to right, transparent 10px, transparent 10px), 
		linear-gradient(to left, transparent 10px, transparent 10px), 
		repeating-linear-gradient(transparent, transparent 32px, #ccc 32px, #ccc 33px, transparent 32px);
}
.night .text-area-lines.fill-text-area.grey {
	color: white;
}

.code-block tbody tr:nth-child(2n) .input-line.text-area-lines.fill-text-area {
	background-image: 
		linear-gradient(to right, #fff 10px, transparent 10px), 
		linear-gradient(to left, #fff 10px, transparent 10px), 
		repeating-linear-gradient(#fff, #fff 32px, #ccc 32px, #ccc 33px, #fff 32px);
}


.correct>.input-line.fill-text-area,
.input-line.fill-text-area.correct {
	background-image: 
	linear-gradient(to right, #77dd77 10px, transparent 10px), 
	linear-gradient(to left, #77dd77 10px, transparent 10px), 
	repeating-linear-gradient(#77dd77, #77dd77 32px, #ccc 32px, #ccc 33px, #77dd77 32px) !important;
}

.incorrect>.input-line.fill-text-area,
.input-line.fill-text-area.incorrect {
	background-image: 
	linear-gradient(to right, #FD6861 10px, transparent 10px), 
	linear-gradient(to left, #FD6861 10px, transparent 10px), 
	repeating-linear-gradient(#FD6861, #FD6861 32px, #ccc 32px, #ccc 33px, #FD6861 32px) !important;
}








/* TABLES */

.code-block table {	
	table-layout: fixed;
	width: 100%;
	background: #fff;
	border: 0px solid #fff;
	border-collapse: collapse;
}

.night .code-block table {
    background-color: transparent;
    color: white;
}

.code-block td, .code-block th {
    padding: 0.375em 12px;
	vertical-align: middle;
	word-wrap: break-word;
	
	border-bottom: #b0adb2 1px solid;
}

.code-block th {
	color: #fff;
	font-weight: bold;
}

.code-block tr:nth-child(2n-1) {
    background-color: white;
}
.night .code-block tr:nth-child(2n-1) {
	background-color: transparent;
}


.btn-reset:hover, .btn-check:hover, .btn-dark:hover, .btn-show-answers:hover {
	transition: all 0.1s ease 0s;
	color: #fff !important;
  }

  .btn-reset {
	background-color: #fff;
  }

  .btn-reset, .btn-check, .btn-dark, .btn-show-answers {
	text-transform: uppercase;
	text-decoration: none;
	background: #fff;
	display: inline-block;
	transition: all 0.1s ease 0s;
  }
  .carousel.slide .carousel-indicators {
	position: relative;
	z-index: 5;
	padding: 8px 0px 8px 0px;
  }
  .card {
	border: none;
	border-radius: 0px;
	background-color: #fff;
  }
  .carousel {
	position: relative;
  }
  .bg-danger {
	background-color: #FD6861!important;
  }

  /*
  .choice_border_incorrect {
	border: solid #FD6861 2px !important;
  }*/

  .radio-toolbar label.incorrect>span, .checkbox-toolbar label.incorrect>span {
	color: #fff;
	background-color: #FD6861!important;
	border-color: #FD6861;
  }
  .radio-toolbar label.correct>span, .checkbox-toolbar label.correct>span {
	color: #fff;
	background-color: #77dd77 !important;
	border-color: #77dd77;
  }
  .carousel-status.fa-check {
	color: #77dd77 !important;
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
  }
  .carousel-status.fa-times {
	color: #FD6861 !important;
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
  }
  


  /*MEMO BOX*/
  
/* MEMO BOX */
[id$="_rememberbox"] table,
[id$="_checklist"] table,
.ishodi-table table {
	table-layout: fixed;
	width: 100%;
	background: #fff;
	border: 0px solid #fff;
	border-collapse: collapse;
}

[id$="_rememberbox"] td, [id$="_rememberbox"] th,
[id$="_checklist"] td, [id$="_checklist"] th,
.ishodi-table td, .ishodi-table th {
    padding: 0.375em 12px;
    text-align: left;
	vertical-align: middle;
	word-wrap: break-word;
}

[id$="_rememberbox"] td,
[id$="_checklist"] td,
.ishodi-table td {
	border-bottom: #b0adb2 1px solid;
}

[id$="_rememberbox"] th,
[id$="_checklist"] th,
.ishodi-table th {
    color: #fff;
	font-weight: bold;
}

[id$="_rememberbox"] tr:nth-child(2n-1),
[id$="_checklist"] tr:nth-child(2n-1),
.ishodi-table tr:nth-child(2n-1) {
    background-color: white;
}

[id$="_rememberbox"] tbody tr:nth-child(2n) .input-line,
[id$="_checklist"] tbody tr:nth-child(2n) .input-line,
.ishodi-table tbody tr:nth-child(2n) .input-line {
	color:black;
	background-image: 
		linear-gradient(to right, #fff 10px, transparent 10px), 
		linear-gradient(to left, #fff 10px, transparent 10px), 
		repeating-linear-gradient(#fff, #fff 25px, #ccc 25px, #ccc 26px, #fff 25px);
}






.main-container-memo {
	background-color: #fff;
}
.night .main-container-memo {
	color: white;
}

.main-container-memo h2 {
	text-align: center;
	padding:15px;
}

.main-container-memo h4 {
	text-align: center;
	padding:15px;
	color:white;
}
.night .main-container-memo h4 {
	background-color: white;
}

.main-container-memo .sub-container {
	display: flex;
	flex-wrap: wrap;
	padding:5px;
	align-items: stretch;
} 
.main-container-memo .memo-card {
	text-align:center;
	margin: 5px;
	border-radius: 10px;
	padding: 5px;
	padding-top:20px;
	padding-bottom:20px;
	background-color: white;
	flex:1;

	display:flex;
	flex-direction:column;
	/*align-items: center;*/
}

.main-container-memo .memo-card tr {
	padding:10px;
}
.main-container-memo .memo-card td {
	padding:10px;
}

.main-container-memo .memo-card .small-title {
	padding-bottom: 5px;
}


[id$="_Results"] .card-header {
	background-color: transparent;
}

.code-block h5 {
	font-size: 1rem;
}




.radio-toolbar input[type="radio"] + label.image-label>span,
.checkbox-toolbar input[type="checkbox"] + label.image-label>span {
	background-color: white;
	border-color: white;
}

/*ENG5*/

.eng5 .sorted-container>.btn, 
.eng5 .sortable-container>.btn {
	border: 2px solid #d47729;
}
.eng5 .sorted-container>.btn:hover, 
.eng5 .sortable-container>.btn:hover {
	background-color: #d47729;
}

.eng5 .radio-toolbar input[type="radio"]:hover + label.image-label>span,
.eng5 .checkbox-toolbar input[type="checkbox"]:hover + label.image-label>span {
	background-color: #541b56;
	border-color: #541b56;
}
.eng5 .radio-toolbar input[type="radio"]:checked + label.image-label>span,
.eng5 .checkbox-toolbar input[type="checkbox"]:checked + label.image-label>span {
	background-color: #d47729;
	border-color: #d47729;
}

.eng5 .radio-toolbar label>span, 
.eng5 .checkbox-toolbar label>span {
	border: 2px solid #d47729;
}
.eng5 .radio-toolbar label:hover>span,
.eng5 .checkbox-toolbar label:hover>span,
.eng5 .radio-toolbar input[type="radio"]:checked + label>span,
.eng5 .checkbox-toolbar input[type="checkbox"]:checked + label>span{
	background-color: #d47729;
}

.eng5 .real-crossword .letter-slot.focused-slot,
.eng5 .real-crossword .letter-slot-modal.focused-slot,
.eng5 .code-block th,
.eng5 [id$="_rememberbox"] th,
.eng5 [id$="_checklist"] th,
.eng5 .checklist-table th,
.eng5 .ishodi-table th
{
	background-color: #d37729;
}

.eng5 .main-container-memo h4 {
	background-color: #d37729;
}

.eng5.night .main-container-memo,
.eng5.night .main-container-memo .memo-card {
	background-color: #541b56;
}

.eng1 .real-crossword .letter-slot.focused-slot,
.eng1 .real-crossword .letter-slot-modal.focused-slot {
	background-color: #BAAD21;
}

.eng1 .main-container-memo h4 {
	background-color: #8b1839;
}

.eng1.night .main-container-memo,
.eng1.night .main-container-memo .memo-card {
	background-color: #314455;
}

.eng5 .ui-droppable {
	border: solid 2px #541b56;
}
.eng5.night .ui-droppable.ui-droppable-image {
	background-color: #541b56;
}

.eng5 .real-crossword .letter-slot-modal-fixed
.eng5 .real-crossword .letter-slot.correct-slot {
	background-color: #541b56;
	color:white;
}

.eng5 .front-face,
.eng5 .back-face {
	color: #541b56;
}

.eng5 .btn-reset, 
.eng5 .btn-check, 
.eng5 .btn-dark, 
.eng5 .btn-show-answers {
	color: #541b56 !important;
	border: solid 2px #541b56;
}

.eng5 .btn-reset:hover, 
.eng5 .btn-check:hover, 
.eng5 .btn-dark:hover, 
.eng5 .btn-show-answers:hover {
	background: #d47729;
}

.eng5 .btn-reset:active, 
.eng5 .btn-check:active, 
.eng5 .btn-dark:active, 
.eng5 .btn-show-answers:active {
    color: #d37729 !important;
    background: #551a57 !important;
    transition: all 0.1s ease 0s;
}

.eng5 .carousel {
	border: solid #541b56;
}

.eng5 .btn-dark.btn-procijeni-znanje {
	color: white !important;
	background-color: #d47729;
}

.eng5.night select {
    background-color: transparent;
    color: white;
    border-color: #d47729;
}
.eng5 .memory-card {
	background-color: #d47729;
}

/*ENG1*/

.eng1 .sorted-container>.btn, 
.eng1 .sortable-container>.btn {
	border: 2px solid #BAAD21;
}
.eng1 .sorted-container>.btn:hover, 
.eng1 .sortable-container>.btn:hover {
	background-color: #BAAD21;
}

.eng1 .radio-toolbar input[type="radio"]:hover + label.image-label>span,
.eng1 .checkbox-toolbar input[type="checkbox"]:hover + label.image-label>span {
	background-color: #8b1839;
	border-color: #8b1839;
}
.eng1 .radio-toolbar input[type="radio"]:checked + label.image-label>span,
.eng1 .checkbox-toolbar input[type="checkbox"]:checked + label.image-label>span {
	background-color: #BAAD21;
	border-color: #BAAD21;
}

.eng1 .radio-toolbar label>span, 
.eng1 .checkbox-toolbar label>span {
	border: 2px solid #BAAD21;
}
.eng1 .radio-toolbar label:hover>span,
.eng1 .checkbox-toolbar label:hover>span,
.eng1 .radio-toolbar input[type="radio"]:checked + label>span,
.eng1 .checkbox-toolbar input[type="checkbox"]:checked + label>span{
	background-color: #BAAD21;
}

.eng1 .real-crossword .letter-slot.focused-slot,
.eng1 .real-crossword .letter-slot-modal.focused-slot {
	background-color: #BAAD21;
}

.eng1 .main-container-memo h4 {
	background-color: #8b1839;
}

.eng1.night .main-container-memo,
.eng1.night .main-container-memo .memo-card {
	background-color: #314455;
}

.eng1 .code-block th,
.eng1 [id$="_rememberbox"] th,
.eng1 [id$="_checklist"] th,
.eng1 .checklist-table th,
.eng1 .ishodi-table th {
	background-color: #8b1839;
}

.eng1 .ui-droppable {
	border: solid 2px #314455;
}
.eng1.night .ui-droppable.ui-droppable-image {
	background-color: #314455;
}

.eng1 .real-crossword .letter-slot-modal-fixed
.eng1 .real-crossword .letter-slot.correct-slot {
	background-color: #314455 ;
	color:white;
}

.eng1 .front-face,
.eng1 .back-face {
	color: #314455 ;
}

.eng1 .btn-reset, 
.eng1 .btn-check, 
.eng1 .btn-dark, 
.eng1 .btn-show-answers {
	color: black  !important;
	border: solid 2px #314455 ;
}

.eng1 .btn-reset:hover, 
.eng1 .btn-check:hover, 
.eng1 .btn-dark:hover, 
.eng1 .btn-show-answers:hover {
	background: #BAAD21;
}

.eng1 .btn-reset:active, 
.eng1 .btn-check:active, 
.eng1 .btn-dark:active, 
.eng1 .btn-show-answers:active {
    color: #baad21 !important;
    background: #06243B !important;
    transition: all 0.1s ease 0s;
}

.eng1 .carousel {
	border: solid #314455 ;
}

.eng1 .btn-dark.btn-procijeni-znanje {
	color: white !important;
	background-color: #BAAD21;
}

.eng1.night select {
    background-color: transparent;
    color: white;
    border-color: #BAAD21;
}


.eng1 .memory-card {
	background-color: #baad21;
}

 /* ####### RANGE SLIDERS */


/* chrome */
input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}




/* firefox */

input[type=range]{
    /*required for proper track sizing in FF*/
    width: 300px;
}

input[type=range]::-moz-range-track {
    height: 5px;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline-offset: -1px;
}

/* ie */
input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
}


/* COLORS */

/* ENG1 */
.eng1 .code-block input[type=range]::-webkit-slider-runnable-track {
    background: #314455;
}

.eng1 .code-block input[type=range]::-webkit-slider-thumb {
    background: #BAAD21;
}

.eng1 .code-block input[type=range]:focus::-webkit-slider-runnable-track {
    background: #314455;
}

.eng1 .code-block input[type=range]::-moz-range-track {
    background: #314455;
}

.eng1 .code-block input[type=range]::-moz-range-thumb {
    background: #BAAD21;
}

.eng1 .code-block input[type=range]:-moz-focusring{
    outline: 1px solid #314455;
}

.eng1 .code-block input[type=range]:focus::-moz-range-track {
    background: #314455;
}

.eng1 .code-block input[type=range]::-ms-fill-lower {
    background: #314455;
}
.eng1 .code-block input[type=range]::-ms-fill-upper {
    background: #314455;
}
.eng1 .code-block input[type=range]::-ms-thumb {
    background: #BAAD21;
}
.eng1 .code-block input[type=range]:focus::-ms-fill-lower {
    background: #314455;
}
.eng1 .code-block input[type=range]:focus::-ms-fill-upper {
    background: #314455;
}
.eng1.night .memory-card {
	background-color: #BAAD21;
}

/* eng5 */
.eng5 .code-block input[type=range]::-webkit-slider-runnable-track {
    background:  #551A57;
}

.eng5 .code-block input[type=range]::-webkit-slider-thumb {
    background: #D37729;
}

.eng5 .code-block input[type=range]:focus::-webkit-slider-runnable-track {
    background:  #551A57;
}

.eng5 .code-block input[type=range]::-moz-range-track {
    background:  #551A57;
}

.eng5 .code-block input[type=range]::-moz-range-thumb {
    background: #D37729;
}

.eng5 .code-block input[type=range]:-moz-focusring{
    outline: 1px solid  #551A57;
}

.eng5 .code-block input[type=range]:focus::-moz-range-track {
    background:  #551A57;
}

.eng5 .code-block input[type=range]::-ms-fill-lower {
    background:  #551A57;
}
.eng5 .code-block input[type=range]::-ms-fill-upper {
    background:  #551A57;
}
.eng5 .code-block input[type=range]::-ms-thumb {
    background: #D37729;
}
.eng5 .code-block input[type=range]:focus::-ms-fill-lower {
    background:  #551A57;
}
.eng5 .code-block input[type=range]:focus::-ms-fill-upper {
    background:  #551A57;
}

.eng5.night .memory-card {
	background-color: #D37729;
}


 /* ####### END RANGE SLIDERS */

 .hint.btn-dark {
    margin-top: 5px;
}

.night .front-face,
.night .back-face {
	color: white !important;
}

.eng5.night .memory-card.correct .front-face,
.eng5.night .memory-card.correct .back-face
{
	color: #551A57 !important;
}

.eng1.night .memory-card.correct .front-face,
.eng1.night .memory-card.correct .back-face
{
	color: #314455 !important;
}

.night .sorted-container {
	background-color: transparent;
	border: solid white;
}


.eng5 .code-block .btn-dark:not(:disabled):not(.disabled).active, 
.eng5 .code-block .btn-dark:not(:disabled):not(.disabled):active, 
.eng5 .code-block .show>.btn-dark.dropdown-toggle {
    color: #541b56;
    background-color: transparent;
	border-color: #541b56;
}

.eng1 .code-block .btn-dark:not(:disabled):not(.disabled).active, 
.eng1 .code-block .btn-dark:not(:disabled):not(.disabled):active, 
.eng1 .code-block .show>.btn-dark.dropdown-toggle {
    color: #314455;
    background-color: transparent;
	border-color: #314455;
}





.code-block .row {
	margin-left: 0px;
	margin-right: 0px;
}
.code-block .row .col {
	padding-left: 30px;
}



/* MAKE PLACEHOLDER TEXT WHITE */

/*for contenteditable placeholders - adds functionality
	<div contenteditable="true" placeholder="some placeholder text"></div>

used mainly for spellcheck regions
*/
[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

.night [contenteditable][placeholder]:empty:before {
	color:white;
}

.code-block .slide label {
	margin-bottom: 0.5rem;
}

.code-block select,
.code-block .slide select {
	margin-bottom: 0.2rem;
}

.code-block select option {
    color: black;
}