/*Wspolny CSS dla wszystkich kursow w playerze.*/

.DDcontainer{
	/*border : 0 !important;*/
	    border: 5px dashed #e0e0e0 !important;
	    background: white !important;
}
.DDelement{
	border : 0 !important;
	cursor: pointer;
}
.DDcontainer p{
	color: #e0e0e0;
}
.ui-state-active{
	background: #2196f3 !important;
	color: white !important;
}
.highlight{
	background-color : #82dbff !important;
}
/*collapsible element for old layout airplane:*/
ul.collapsible:not(.dark-layout):not(.lessons) .collapsible-header{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
	display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
}
ul.collapsible:not(.dark-layout):not(.lessons) .collapsible-body{
	/*display: none;*/
    border-bottom: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  /*   margin-top:2rem;*/
  /* 	padding-left: 2rem;
   	padding-right:2rem;*/
    font-size: 15px;
}
ul.collapsible:not(.dark-layout):not(.lessons) .collapsible-header h4{
	margin: 0px;
}
ul.collapsible:not(.dark-layout) > li{
	list-style-type: none !important;
}
ul.collapsible:not(.dark-layout):not(.lessons) .collapsible-body ul{
    padding-left: 2rem;
    padding-right: 2rem;
}
ul.collapsible:not(.dark-layout):not(.lessons){
	padding-left: 0;
    list-style-type: none !important;
   /* border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;*/
    margin: .5rem 0 1rem 0;
    display: block;
    list-style-type: disc;
}
.question .collapsible:not(.dark-layout):not(.lessons) li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  height: 30px;
}
.small-course-modal{
	width:500px;
}
span.modal-link {
	cursor: pointer;
}
#bad{
    font-size: 15px;
    font-weight: 400;
}
#good{
    font-size: 15px;
    font-weight: 400;
}
.item_card_dnd .card .card-title{
	color: #fff;
    font-size: 24px;
    font-weight: 300;
}
.container_card .card-title{
	color:#636363;
}
#flashcard .card .card-content .card-title{
	position: relative !important;
    color: #4A65EA !important;
    line-height: 23px !important;
    text-align: left !important;
    font-size: 23px !important;
}    
.collapsible:not(.dark-layout) > li > i {
	line-height: 30px;
	vertical-align: middle;
}

.collapsible-header > h4 {
	line-height: 30px;
	vertical-align: middle;
}
a.goto-link{
	cursor: pointer;
}
.collection-item span{
	line-height: 30px;
}


ul li {
    list-style-type: inherit !important;
}
.alert{
	margin-bottom: -10000px !important;
    padding-bottom: 10000px !important;
    padding-top: 10rem;
}
#sortable3, #sortable2,#sortable1 {
    min-height: 130px !important;
    padding: 2px;
}
#sortableStartContainer{
	min-height: 43px;
    border: 1px dashed #e0e0e0;
    padding: 2px;
}
.chip{
	cursor: pointer;
	word-break: break-word;
	min-height: 32px !important;
    height: auto  !important;
}
.sort-head{
	margin-bottom: 0.5rem !important;
}

@media screen and (max-width: 600px) {
	.small-course-modal{
		width:100% !important;
	}
	.small-course-modal p{
		font-size:12px;
	}
	#flashcard .card-content > div{
	    padding: 10px 0px !important;
	}
	.DDelement {
	    width: 80px;
    	height: 80px;
	}
	.DDcontainer {
    	height: 100px;
	}
	.DDelement p {
		margin-top:0rem;
		margin-bottom: 0rem;
	}
	.collection-item span{
		line-height: 15px;
	}
	
}
.lSPager.lSGallery{
	margin-left: auto !important;
    margin-right: auto !important;
}
#imageGallery .card {
	position: relative;
    border-radius: 5px;
    margin: 5px;
    font-size: 1.5rem;
}
@media screen and (max-width: 600px) {
	#imageGallery .card {
	    font-size: 12px;
	}
}
/*
@media screen and (max-width: 600px) {
	.question {
	    padding:0px
	}
	h4 {
	    font-size: 16px;
	}
	.collapsible-body p {
		padding: 0.2rem;
	}
	.collapsible-body ul{
    padding-left: 0rem;
    padding-right: 0rem;
}
}*/

/*dialogs bubbles:*/
.box3 {
  padding: 25px;
  margin: 50px auto;
  border-radius: 15px;

  color: #fff;
  padding: 20px;
  position: relative;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.box3.sb13{
	background: #39a132;
	text-align: right;
	display: inline-block;
    float: right;
    width: auto;
    max-width: 80%;
    font-size:15px;
    margin-bottom: 0px;
}
.box3.sb14{
	background: #0199d1;
	text-align: left;
	display: inline-block;
    float: left;
    width: auto;
    max-width: 80%;
    font-size:15px;
    margin-bottom: 0px;
}

/* speech bubble 13 */
.sb13 .arrow{
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #39a132;
  border-right: 15px solid transparent;
  border-top: 15px solid #39a132;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}
/* speech bubble 14 */
.sb14 .arrow {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #0199d1;
  border-top: 15px solid #0199d1;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}
.bubble-avatar{
	width:100px;
	height: 100px;
}
.bubble-avatar.right{
    float: right;
    text-align: right;
}
.bubble-avatar.left{
    float: left;
    text-align: left;
}
@media screen and (max-width: 600px) {
	.box3.sb13{
		margin-top:0px;
		font-size:12px;
		padding:10px;
		margin-bottom: 10px;
	}
	.sb13 .arrow{
		display:none
	}
	.sb14 .arrow{
		display:none
	}
	.box3.sb14{
		margin-top:0px;
		font-size:12px; 
		padding:10px;
		margin-bottom: 10px;
	}
	.bubble-avatar{
		width:40px;
		height:40px;
		margin: 5px
	}
}
/*dialogs bubbles END:*/
.tabs .indicator {
    background-color: #2196f3 !important;
}

#puzzles .DDcontainer .DDelement{
	margin: 0 !important;
	width:49%; /*szer obrazka*/
	height: 100%;
	display: inline-block;
	flex-grow: 1;
    height: 178px !important; /*wys obrazka*/
}
#puzzles .DDcontainer{
	width: 642px !important; /*2x obrazek*/
	height: 100%;
}


@media screen and (max-width: 600px) {
	#puzzles .DDcontainer .DDelement{
		margin: 0 !important;
		width:49% !important; /*szer obrazka*/
		height: 100%;
		display: inline-block;
		flex-grow: 1;
	    height: 81px !important; /*wys obrazka*/
	}
	#puzzles .DDcontainer{
		width: 280px !important; /*2x obrazek*/
		height: 100%;
	}
	#puzzles .DDelement{
		margin: 0 !important;
		width:20% !important; /*szer obrazka*/
		height: 100%;
		display: inline-block;
		flex-grow: 1;
	    height: 81px !important; /*wys obrazka*/
	}
	#rpl .card-content{
		font-size: small !important;
    	line-height: inherit !important;
	}
}

#rpl .collection a{
    cursor: pointer;
    color: #02B3E4 !important;
   
}
#rpl .card-content .card-title{
		font-size: 1.4rem;
    	line-height: 19px;
}
@media screen and (min-width: 992px) {
	 #rpl .collection a{
	 	font-size: medium;
	 }
	 #rpl .card-content{
		font-size: 2rem;
    	line-height: inherit;
	}
}
.small-course-modal ul li, .small-course-modal ol li{
	font-weight: 300 !important;
}
.modal.large-size{
	top: 0% !important;
	width: 100%;
	height: 100%;
	max-height: 100% !important;
}
.modal.mid-size{
	/*top: 10% !important;*/
	width: 80%;
	max-height: 80% !important;
}
@media screen and (max-width: 600px) {
	.scheme .element{
		width: calc(50% - 8px) !important;
	    margin: 0px 4px 0px 4px !important;
	}
	.scheme .element.s12{
		width: calc(100% - 8px) !important;
	    margin: 0px 4px 0px 4px !important;
	}
	
}
@media screen and (min-width: 600px){
	.scheme .element{
		width: calc(25% - 20px) !important;
	    margin: 0px 10px 0px 10px !important;
	}
	.scheme .element.l4.m4.s6{
		width: calc(33% - 20px) !important;
	    margin: 0px 10px 0px 10px !important;
	}
	.scheme .element.l6.m6.s6{
		width: calc(50% - 20px) !important;
	    margin: 0px 10px 0px 10px !important;
	}
	.scheme .element.s12{
		width: calc(100% - 20px) !important;
	    margin: 0px 10px 0px 10px !important;
	}
}
.border_color.element{
	border-style:solid;
	border-color: transparent;
	border-width:2px;
}
.border_color.structure{
	border-style:solid;
	border-color: transparent;
	border-width:2px;
}
.scheme h5{
	    margin-bottom: 0.565rem !important;
}
.flip_card .material-icons{
	font-size: 17px;
} 
.flip_card .card-content > div{
	padding-top: 5px;
	padding-bottom: 5px;
} 
.flip_card .front > div {
	 min-height: inherit !important;
}
.flip_card .back > div {
	 min-height: inherit !important;
}
.flip_card .back,.flip_card .front{
	 height: inherit !important;
	 width: 100%;
	 /* width: inherit !important; */
}
.flip_card .front{
	 position: initial;
}
.flip_card .card{
	 height: inherit !important;
	 width: inherit;
}
.flip_card{
	height: 300px;
	margin-top: 10px;
	margin-bottom: 10px;
	width:280px;
	margin: 0 auto;
}
.flip-card-component .flip_card{
	height: 350px !important;
}
.flip_card i{
	position: absolute;
    bottom: 5px;
    right: 10px;
}
.flip_card .vertical-content-container{
	width:100%;
}
.join_exercise .DDelement{
	width:unset;
	height:unset;
	padding:unset;
	float:unset;
	margin:20px;
	    width: 45%;
    float: left;
}
.join_exercise .DDcontainer{
	width:unset;
	height:unset;
	padding:unset;
	float:unset;
	margin:20px;
	width: 45%;
    float: left;
}
.fill_container{
	width: 100% !important;
	background-color: red !important;
}
.fill_element{
	margin-left: 25px;
	z-index: 1099;
}
.match_list{
	position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    margin-left: -1rem;
    margin-right: -1rem;
}
.match_container{
	margin-top:10px;
    width: 200px;
    height: 80px;
    position: relative;
    background: #e4e4e4;
    word-break: break-word;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,0.6);
    line-height: 50px;
    padding: 0 30px;
    background-color: #f3f3f3;
	line-height:16px;
    list-style-type: inherit !important;
    line-height:36px;
}
  .match_container:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
  }
  .match_item{
  	margin-top:10px;
  	position: relative;
  	background: #e4e4e4;
  	cursor: pointer;
  	word-break: break-word;
  	height: 80px !important;
  	font-size: 16px;
  	font-weight: 500;
  	color: rgba(0,0,0,0.6);
  	line-height: 50px;
  	padding: 0 30px;
  	background-color: #e4e4e4;
  	list-style-type: inherit !important;
  	line-height:36px;
}
  .match_container:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
  }
  .match_item:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #e4e4e4;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
  }
@media screen and (max-width: 992px) {
  .match_item{
  	height:80px !important;
  	font-size:14px;
  	line-height:20px;
  	padding:20px;
  }
  .match_item:before {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
  }
  .match_container{
  	height:80px !important;
  	font-size:14px;
  	line-height:20px;
  	padding:20px;
  }
  .match_container:after {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
  }
  .match_container span{
      margin-left: 10px;
  }
}
  @media screen and (max-width: 600px) {
  .match_item{
  	height:120px !important;
  	font-size:12px;
  	line-height:20px;
  	padding:20px;
  }
  .match_item:before {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
  }
  .match_container{
  	height:120px !important;
  	font-size:12px;
  	line-height:20px;
  	padding:20px;
  }
  .match_container:after {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
  }
  .match_container span{
      margin-left: 10px;
  }
}
.match-bar{
  	background-color:#ababab;
  	width: 7px;
  	height:100%;
  	position:absolute;
  	left:0px;
  	top:0px;
  }
    .match_icon{
  	width: 7px;
  	height: 100%;
  	position: absolute;
  	left: 10px;
  	top: 5px;
  }
  .match_icon:hover{
  	color:black;
  }
    .match_item span{
  	margin-left:5px;
  }

.fill_element .match-bar {
	background-color: black !important;
}

#quiz_match_list_containers {
	margin-right: 12px;
}

.match_item:hover {
	color: #333333;
}
/*
.divider_line {
	overflow: initial !important;
	height: 1px;
	background-color: rgb(2, 179, 228);
	margin: 30px;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.divider_item {
	min-height: 2em;
	min-width: 40px;
	text-align: center;
	line-height: 3em;
	border-radius: 2em;
	background-color: inherit !important;
	display: inline-block;
	color: white;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5px;
	padding-right: 5px;
	top: -15px;
}

.divider_item::before {
	content: '';
	position: absolute;
	top: .9em;
	left: -4em;
	width: 4em;
	height: .2em;
	background: dodgerblue;
	z-index: -1;
}

.divider_item:first-child::before {
	display: none;
}*/
.dnd_card{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 280px;
    margin: 0 auto;
}
.dnd_card .front .card.container_card{
	border: 2px dashed #cecece;
}
/*.container_card_dnd .card{
	    border: 5px dotted #e4e4e4 !important;
}*/

.dnd_card .material-icons{
	font-size: 17px;
} 
.dnd_card .card-content > div{
	padding-top: 5px;
	padding-bottom: 5px;
} 
.dnd_card .front > div {
	 min-height: inherit !important;
}
.dnd_card .back > div {
	 min-height: inherit !important;
}
.dnd_card .front{
	 height: 260px;
	 width: 100%;
}
.dnd_card .front{
	 position: initial;
}
.dnd_card .card{
	 height: inherit !important;
	 width: inherit;
}

.dnd_card i {
	position: absolute;
	bottom: 5px;
	right: 10px;
}

.dnd_card .vertical-content-container {
	width: 100%;
}

.item_card_dnd {
	cursor: pointer;
}

.container_card_dnd {
	z-index: 2;
}

.DDCards {
	margin-top: 30px;
	margin-bottom: 30px;
}
.refresh_dd_cards{
	color:#cccccc;
	display:none;
}
.refresh_dd_cards:hover{
	color:#5a5a5a !important;
	cursor:pointer;
}
.refresh_dd_cards h3{
    color: #8D8E94;
    font-size: 1.8rem;
    line-height: 0rem;
    text-align: center;
    font-weight: 300;
}
.show_answer_button:hover{
	filter: brightness(120%);
	transition: all 1s ease;
	cursor:pointer;
}
@media only screen and (min-width: 1201px) and (min-height: 831px) {
	.elementCenter {
		//position: relative;
		//top: 50%;
		//transform: translateY(-50%) !important;
	}
}/*
@media screen and (max-width: 600px) {
	.elementCenter{
	    top: 0% !important;
	    transform: translateY(0%) !important;
	}
}*/

/*link animations:*/
.coursePlayer_MainWindow span[id_modal]:not([id_modal=""]),span.dictionary_word,
a[href]:not([href=""]):not([data-portsize]):not(.tab-layout):not(#lg-download),
span[onclick]:not([onclick=""]){
	position: relative;
	text-decoration: none;
	display: inline-block;
	padding: 0 1px;
	cursor: pointer !important;
	transition: color ease 0.3s;
	z-index: 1; /*-*/
}


/*.coursePlayer_MainWindow span.dictionary_word::after,span[id_modal]:not([id_modal=""])::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 5%;
	left: 0;
	bottom: 0;
	background-color: #2196f3;
	transition: all ease 0.3s;
}*/

.coursePlayer_MainWindow span.dictionary_word {
	display: inline !important;
  	background-image: linear-gradient(#2196f3, #2196f3);
	background-repeat: no-repeat;
	background-position: 0% 100%;
	background-size: 100% 1px;
	transition: background-size ease .3s !important;
}

.coursePlayer_MainWindow span.dictionary_word:hover {
	background-size: 100% 100%;
}

btn.card-btn span[id_modal]:not([id_modal=""])::after{
		background-color: transparent !important;
}

.coursePlayer_MainWindow span.dictionary_word:hover,span[id_modal]:not([id_modal=""]):hover {
	color: white;
}

.coursePlayer_MainWindow span.dictionary_word:hover::after,span[id_modal]:not([id_modal=""]):hover::after {
	height: 100%;
}

.coursePlayer_MainWindow :not(btn) span[onclick]:not([onclick=""])::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 5%;
	left: 0;
	bottom: 0;
	background-color: #2196f3;
	transition: all ease 0.3s;
}

.coursePlayer_MainWindow btn span[onclick]:not([onclick=""])::after {
	background-color: transparent !important;
}

.coursePlayer_MainWindow span[onclick]:not([onclick=""]):hover {
	color: white;
}

.coursePlayer_MainWindow span[onclick]:not([onclick=""]):hover::after{
	height: 100%;
}

/*.coursePlayer_MainWindow a[href]:not([href=""]):not(.tab-layout)::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 5%;
	left: 0;
	bottom: 0;
	background-color: #039be5;
	transition: all ease 0.3s;
}*/

.coursePlayer_MainWindow btn.btn-large > a[href]:not([href=""]):not(.tab-layout)::after {
	background-color: transparent !important;
}

.coursePlayer_MainWindow a[href]:not([href=""]):hover {
	color: white;
}

.coursePlayer_MainWindow a[href]:not([href=""]):hover::after {
	height: 100%;
}
.slider_buttons {
    display: none;
}
.ppt_input_container, .pdf_input_container {
	display: none;
}