/* edited by Matej @ 19.08.2020 - 14:45 */

section .dd-sort-elements li {
	display: block;
	touch-action: none;
	/*background: #3f2e5a;
	color: #fff;
	font-weight: 700;
	padding: 8px 15px;
	margin: auto;
	text-align: center;
	width:80%;*/
}
section.the-test .test-controls .btn-hint, section.the-test .test-controls .btn-solution, section.the-test .test-controls .btn-repeat {
	border: 0;
}

section blockquote {
	display: inherit!important;
}

.homepage .module-header {
	min-height: inherit!important;
}

.homepage section.all-modules .col-5, .dot-nav {
	height: inherit!important;
}

#search-results ul {
	list-style-type: none;
}

#search-results a {
	color: white;
}

.danger {
	border-color: #cb3c2b!important;
	background: #ffc5bf!important;
	color: #000000!important;
}
.success {
	border-color: #45bb63;
	background: #d2f9dc!important;
	color: #000000!important;
}

section .dd-solution .danger {
	background: #ffc5bf;
}

section figure.center-block {
	text-align: center;
}

ul.ui-sortable {
	/*overflow: auto;*/
}

div.drop-target {
	border: 3px solid black!important;
	padding: 0px;
}

[data-question-type="Razvrstavanje elemenata"] div.drop-target {
	border: 1px solid black!important;
	padding: 0px;
}


/* uz pretpostavku da ima max 10 grupa */
div.pill-sorting div.pill[data-dragged-group-value="0"], div.pill-sorting div.pill[data-dragged-group-value="1"],
div.pill-sorting div.pill[data-dragged-group-value="2"], div.pill-sorting div.pill[data-dragged-group-value="3"],
div.pill-sorting div.pill[data-dragged-group-value="4"], div.pill-sorting div.pill[data-dragged-group-value="5"],
div.pill-sorting div.pill[data-dragged-group-value="6"], div.pill-sorting div.pill[data-dragged-group-value="7"],
div.pill-sorting div.pill[data-dragged-group-value="8"], div.pill-sorting div.pill[data-dragged-group-value="9"] {
	display: inline-block;
}

div.pill-sorting div.pill[data-dragged-group-value="-1"] {
	display: none;
	position: absolute;
}

div.pill-sorting div.pill[data-dragged-group-value="-1"]:first-child{
	display:block;
	position:absolute;
}

section.the-test .pill-sorting .pill {
	/*max-width:225px;*/
	max-width:100%;
}

.sortheader {
	min-height: 40px;
}

@media (max-width: 600px) {
	.sortheader {
		height: 40px;
	}
}
/* overflow prevents D'n'D - override property from main_* CSS files until it is removed from there */
section.the-test .connect-pairs ul {
	overflow: visible;
}
.pair{
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;

}
.over{
	background-color: #ff891c !important;
}

table.question-body.select-answer td {
	padding: 20px;
	display: inline-block;
	border: none;
}
.mathoverflow{
	display: block; /* this container is rendered as SPAN element to prevent browser from ejecting it from parent P, thus we have to make it a block this way */
	overflow:hidden;
	overflow-x:auto;
}


/** ----- These classes give space to mathml to render properly. Classes are removed from elements once math is rendered. */

/* in order to render properly, math requires rendered container (ie. NOT display:none), but also, to prevent FOUC, it's container should be hidden until rendering is done */
/* other loadingMath-* classes should be ported to this solution? */
.loadingMath-container, .loadingMath-collectionContainer,
	/* remove specialized classes (solution, result) after they are removed from HTML; container class should be applied to every math loading container */
.loadingMath-solution, .loadingMath-result {
	display: block !important; /* force initial display to override possible display:none etc. */
	visibility: hidden;
	/* reduce vertical height to 0 */
	height: 0!important;
	padding-top: 0!important;
	padding-bottom: 0!important;
	margin-top: 0!important;
	margin-bottom: 0!important;
}
.loadingMath-questionHelp{
	visibility:hidden;

	position:absolute!important;
	right:5000px!important;
	width:99%!important;
}
.loadingMath-owl{
	visibility:hidden!important;
	display:block!important;
	position:absolute!important;
	top:-15000px!important;
}
.loadingMath-knowledgeAssesment{
	display:block!important;
}
.loadingMath-ZadaciGroup{
	visibility:visible!important;
	display:block!important;
	position:absolute!important;
	top:-25000px!important;
}

/* this class causes problems with formuals longer than 200px, and since it's applied to table cells
 * they will (probably) keep their width enough to render math
 * this is manipulated on the code (fe, be) so should be remove from them as well after this has been proved to work
.loadingMath-td{
	width: 200px!important;
	display: block!important;
}
*/
.loadingMath-WordDrag{
	width: 200px;
}

.custom-ordering-placeholder{
	visibility:hidden;
}


.question-help, .question-result {
	/*font-size: 14px;*/
}

.question-help span[class^="mjx"], .question-result span[class^="mjx"] {
	/*font-size: 100%!important;*/
}
.pair-draggable{
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor: move;
	/*touch-action none will ensure that the page is not scrolled while dragging*/
	touch-action: none;
}

/* active draggable elemet */
.draggable.draggable-active, .pair-draggable.draggable-active, .draggable-restricted.draggable-active {
	z-index: 10009 !important; /* keep dragged elements above "world" */
}


/* Allow centered formulas in "paired" questions. */
.pair .mjx-full-width {
	text-align: center;
	display: inline-block!important;
	width: inherit;
}

/* Temporary override of prospekt's class that messes formulas with large fraction. */
section.the-test .pill-sorting .pill .mjx-chtml {
	line-height: 0px;
}

/* Memory game. */
.memory {
	margin: 0;
	padding: 0;
}

.game-holder {
	width: 480px;
	height: 480px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	perspective: 1000px;
}

.card-holder {
	width: calc(25% - 10px);
	height: calc(25% - 10px);
	margin: 5px;
	position: relative;
	transform-style: preserve-3d;
	transition: transform .5s;
	box-shadow: 0px 1px 1px 1px rgba(0,0,0,.3);
}

.card-holder.flip {
	transform: rotateY(180deg);
}

.cover,
.card {
	width: 100%;
	height: 100%;
	position: absolute;
}

.card {
	transform: rotateY(180deg);
	visibility: hidden;
}

.card.visible {
	visibility: visible;
}

.cover.hidden {
	visibility: hidden;
}

.memory-tooltip {
	text-align: center;
}

.keyboard_container {
	position: relative;
	display: inline-block;
}

.keyboard {
	display: none;
	margin: 0.1em;
	padding: 0.5em;
	position: absolute;
	text-align: center;
	z-index: 1;
	background-color: rgb(255, 255, 255);
	box-shadow: 3px 3px 2px rgba(100, 100, 100, 25%);
	width: 25em;
	border: 1px solid rgb(200, 200, 200);
	border-radius: 5px;
}

.keyboard button {
	margin: 0.25em;
	height: 2em;
	width: 2em;
	text-align: center;
}

.keyboard button.capslock {
	width: 10em;
	font-weight: bold;
}

.keyboard button.capslock.active {
	background-color: green;
	color: white;
}

.keyboard.open {
	display: block;
}

.inline-input, .inline-select {
	display: inline-block;
}

.pair.pair-draggable div {
	display: inline-block;
}

div.interaction-resize-container iframe {
	width: 100%;
	min-height: 300px;
}

.fancybox-is-open .fancybox-stage {
	margin-top: 0!important;
}

.fancybox-is-open .fancybox-stage img.fancybox-image {
	padding-top: 60px;
}

.fancybox-is-open .fancybox-stage iframe {
	padding-top: 60px;
}

@media only screen and (max-width: 767px) {
	.inline-input, .inline-select {
		display: inline;
	}
}