/*
 * Datenbankvorlage Lerntempoduett
* Version 0.1
 * @Autor 2021 Florian Dagner
 * @license CC0 Public Domain Dedication
 */

/* Text bei fertiger Partnerarbeit */
.einzelansichtfertigja::after
{
	content:"Toll! Du bist fertig und kannst nun anderen bei der Aufgabe helfen!"
}

/* Kopf */
.lerntempoheader
{
	background-color:#F5F5F5;
	padding:8px;
	border-radius:20px;
	margin-bottom:12px;
padding: 5px 0px 2px 14px;
}

.flex-lerntempooben
{
	display:flex;
	max-width:1200px;
	margin:0 auto;
	flex-wrap:wrap-reverse;
	row-gap:32px;
	column-gap:4px;
	text-align:center;
	margin-bottom:20px;
	color:#5f5f5f
}

/* Fuß */
.lerntempofooter
{
	background-color:#F5F5F5;
	border-radius:20px;
	margin-top:12px
}

/* Anzeige in der Mitte */
.flex-lerntempo
{
	display:flex;
	max-width:1200px;
	margin:0 auto;
	flex-wrap:wrap-reverse;
	row-gap:16px;
	column-gap:4px
}

.flex-lerntempo > div
{
	text-align:center
}

.flex-lerntempo > div:nth-child(4n + 1),.flex-lerntempo > div:nth-child(4n + 2)
{
	background-color:#b3d9ff
}

.flex-lerntempo > div:nth-child(4n + 3),.flex-lerntempo > div:nth-child(4n + 4)
{
	background-color:#df9
}

.flex-item-lerntempo {
font-size:calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
border-radius: 5px;
}

@media only screen and (max-width: 599px) {
	.flex-item-lerntempo
	{
		flex:1 100%;
		max-width:100%
	}
}

@media only screen and (min-width: 601px) {
	.flex-item-lerntempo
	{
		flex:1 45%;
		max-width:49%;
	}
}

.cardlerntempo
{
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
	transition:.3s;
	min-height:35px;
	padding:4px;
        border-radius: 5px;
}

.fertigja .userpicture img
{
	border:2px solid #f909ec
}

.fertigja .userpicture::after
{
	content:"\f19d";
	font:normal normal normal 18px/1 FontAwesome;
	vertical-align:top
}

.userpicture
{
	margin:4px
}

.cardcontainer
{
	padding:1px 16px;
	background-color:#fff;
	font-size:calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
       border-radius: 5px;
}

/* Sortierung ausblenden */
 .datapreferences #pref_sortby, #pref_order, label[for="pref_order"], label[for="pref_sortby"], #advancedcheckbox, label[for="advancedcheckbox"] {
    display: none!important;
  }

/* Animation */
.warten
{
	text-align:center;
	font-size:calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
	color:#000;
	margin-top:12px;
	animation:blink 3s linear infinite
}

@keyframes blink {
	0%
	{
		opacity:0
	}
	
	50%
	{
		opacity:1
	}
	
	100%
	{
		opacity:0
	}
}

/* Blinkender Pfeil  */
.nav-tabs a[href*="edit"]::before {
  content: "  ▶ ";
  animation: opacity 1s ease-in-out infinite;
  opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}