@import url("https://fonts.googleapis.com/css2?family=Russo+One&family=Yellowtail&display=swap");

@font-face {
  font-family: 'AmericanTypewriter';
  src:  url('/media/AmericanTypewriter.woff2') format('woff2'),
        url('/media/AmericanTypewriter.woff') format('woff');
}


#top {
	height: 100%;
	background: linear-gradient(transparent 50%, hotpink 160%);
	box-shadow: 0 15px 50px 1px white;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
}
#sky {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;

	background: repeating-linear-gradient(
			pink 2px,
			transparent 3px,
			transparent 30px
		),
		repeating-linear-gradient(90deg, pink 2px, transparent 3px, transparent 30px)
			10px 0;
	/**filter: drop-shadow(0 0 1px magenta) drop-shadow(0 0 3px magenta)
		drop-shadow(0 0 7px cyan);**/
	animation: move 60s linear infinite;
	opacity: 0.2;
}


#bottom {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	transform: perspective(500px) rotateX(65deg);
	bottom: 0;
	background: linear-gradient(
		90deg,
		hotpink -60%,
		transparent 40%,
		transparent 60%,
		hotpink 140%
	);
	clip-path: polygon(0 100%, 0 55%, 100% 55%, 100% 100%);
}
/**
#ground {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 55%;
	background: repeating-linear-gradient(
			white 2px,
			transparent 3px,
			transparent 30px
		),
		repeating-linear-gradient(90deg, white 2px, transparent 3px, transparent 40px);
	filter: drop-shadow(0 0 1px cyan) drop-shadow(0 0 3px cyan)
		drop-shadow(0 0 7px cyan);
	animation: move 30s linear infinite;
}
**/

@keyframes move {
	to {
		background-position-y: 2000px;
	}
}

/**
    BASIC
**/

.russo-one {
    color: transparent;
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	font-size: 2.5em;
	background: linear-gradient(
		cornflowerblue 30%,
		white,
		darkmagenta 60%,
		cornflowerblue 100%
	);
	background-size: contain;
	-webkit-background-clip: text;
	-webkit-text-stroke: 1px silver;
	filter: drop-shadow(5px 5px 1px black) drop-shadow(1px 1px 1px magenta);
	animation: bg-shift 0.5s ease-in-out infinite alternate;
}

.logo-subtitle {
    font-size: 20px;
    position: absolute;
    bottom: -18px;
    transform: rotate(-9deg);
    white-space: nowrap;
}

html {
    height: 100%;
}

body {
    padding-bottom: 1.5rem;
    color: #fff;
    background: #1d4184;
    background: linear-gradient(270deg, #6C22A6 0%, #1d4184 100%);
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.body-lightgrey {
    background-color: #efefef;
}

body.events header {
    display: none;
}

.pixel-font {
    font-family: 'LLPixel', sans-serif;
}

h1 {
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: bold;
}

h2 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
}

a,
a:hover {
    color: #fff;
    text-decoration: none;
}

label {
    font-size: 0.75rem;
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 1px 2px 6px rgba(0,0,0,0.3) !important;
}

.btn-check:focus+.btn,
.btn:focus,
.btn-check:focus+.btn-primary,
.btn-primary:focus {
    box-shadow: 1px 2px 6px rgba(0,0,0,0.3) !important;
}

.btn-primary {
    background-color: #333333;
    border-color: #333333;
    /**padding: 10px 30px;**/
    box-shadow: none;
    text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #000000;
    border-color: #000000;
}

.btn-secondary {
    /**padding: 10px 30px;**/
    box-shadow: none;
    text-transform: uppercase;
}

.btn-check:active+.btn-outline-primary:focus,
.btn-check:checked+.btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus,
.btn-check:focus,
.btn-outline-primary:focus,
.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus,
button:focus {
    box-shadow: 0 0 0 0px white;
    outline-color: white;
}

.btn-outline-primary {
    color: #333333 !important;
    border-color: #333333 !important;
}

.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active,
.btn-outline-primary:hover {
    background-color: #cccccc !important;
}

.btn {
    padding: 0.75rem;
}

.btn-link {
    color: #FFFFFF;
    text-decoration: none;
}

.btn-link:hover,
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active  {
    color: #FFFFFF;
}

#player-tab {
    box-shadow: 0px -2px 6px 0px rgb(0 0 0 / 30%);
    background: #1d4184;
    /**height: 60px;**/
}

.points-badge {
    background-color: #ff00ff;
    color: #fff;
}

/**
.nav-justified .nav-item,
.nav-justified>.nav-link {
    background-image: url('media/vhs.png');
    background-size: 64px;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 27px;
}
**/

.nav-pills .nav-link {
    border-radius: 0;
    margin: 0;
}

.nav-pills .nav-link img {
    display: inline-block;
    width: 20px;
    margin-bottom: 6px;
}

.nav-link,
.nav-link:focus,
.nav-link:hover{
    color: #fff;
    font-size: 0.7rem;
    padding: .5rem .5rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #6C22A6;
    color: #fff !important;
}

.form-control {
    border-radius: 0;
}

#infoRegisteredText {
    padding: 2px 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 250px;
    z-index: 1;
    /**border-radius: 4px;**/
    transform: translate(-50%, -50%) rotate(-30deg);
}

#infoRegisteredText + img {
    opacity: 0.6;
}

.reset-ff {
    font-family: var(--bs-body-font-family);
}

.modal-title {
    color: #333333;
}

.opacity-50 {
    opacity: 0.5;
}

.font-american {
    color: white;
	font-family: "AmericanTypewriter";
	font-weight: bold;
	text-shadow: 0 0 3px magenta, 0 0 7px magenta, 0 0 15px black, 0 0 15px black;
}

.player-content {
    /**padding-top: 1rem;**/
    padding-bottom: 4rem;
}

.challenge {
    position: relative;
}

.quiz-item.done .card-background::after,
.challenge.registered .card-background::after {
    content: "Angemeldet";
    font-size: 14px;
    padding: 2px 4px;
    color: #ffffff;
    background: #198754;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
}

.quiz-item.done .card,
.challenge.registered .card {
    opacity: 0.6;
}

.quiz-item.done .card-background::after {
    content: "Beantwortet";
}

.card {
    margin-bottom: 0.75rem; 
    border: none;
    border-radius: 0.1rem;
    /** border-radius: 0.75rem;**/
    /**box-shadow: 1px 1px 4px rgba(0,0,0,0.3);**/
}

.card:hover {
    /**background-color: #eeeeee;
    box-shadow: 0px 0px 4px 0px #cccccc;**/
}

.card:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
}

.card-body {
    color: #333;
}

.card-body .info {
    font-size: 0.9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-background {
    background-repeat: no-repeat;
    background-position: center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 4rem;
    /**border-radius: 0.75rem;**/
    position: relative;
}

.rental-statistics .card-background {
    min-height: 12rem;   
}

.cover-card {
    margin-bottom: 0.75rem;
    border: none;
}

.cover-card .cover-background {
    min-height: 12rem;
    background-repeat: no-repeat;
    background-position: center; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    position: relative;
}

.cover-card .cover-title {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 33% 0;
    top: 0;
    vertical-align: middle;
    width: 100%;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    margin: 0 auto;
}

.cover-card .cover-title:empty {
    display: none;
}

.event-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.nav-registration .nav-link {
    border: 1px solid #bbb;
}

.nav-registration .nav-item:first-child .nav-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nav-registration .nav-item:last-child .nav-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nav-registration .nav-link {
    border-radius: 0.5rem;
}


/**
.bg-image-stretch {
    height: 30vh;
}

.bg-image-stretch .image {
    background-size: cover;
    background-position: center;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 80px;
    width: 100%;
    height: 30vh;
    opacity: 0.5;
}

@media screen and (min-width:720px) {
    .bg-image-stretch {
        height: 480px;
    }
    
    .bg-image-stretch .image {
        height: 480px;
    }
}
**/

.container-fluid {
    max-width: 1140px;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }
}

#progressContainer .title {
    line-height: 30px;
    left: 0;
    right: 0;
}

#progressContainer .max {
    border: 1px solid #ccc;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    /**padding: 1px;**/
}

#progressContainer .current {
    background-color: #bbb;
    height: 28px;
}

#saveModal {
    z-index: 999999;
}

.modal-content {
    color: #333;
}

#loginModal .modal-body,
#saveModal .modal-body {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.quiz-item {
    position: relative;
}

.no-wrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.img-responsive {
    width: 100%;
}

.content-page a {
    text-decoration: underline;
}

/**
.quiz-item.done::before {
    content: 'Beantwortet';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: green;
}
**/

body.admin {
    padding-top: 10px;
}

body.admin .btn {
    display: none;
}

body.admin h2 {
    display: none;
}

body.admin .challenge-image {
    display: none;
}

body.admin #registrations {
    list-style: none;
}

body.hide-buttons .btn {
    display: none;
}

ul#registrations.shuffle {
    padding-left: 2rem !important;
}

ul#registrations.shuffle li {
    list-style: decimal;
    font-size: 22px;
}

ul#summary {
    padding: 0;
    list-style: none;
}

ul#summary li {
    
}

ul#summary li span {
    
}

.player-item.answer-ok {
    background-color: #d1e7dd !important;   
}

.player-item.answer-nok {
    background-color: #f8d7da !important;
}


.form-check-input:checked {
    background-color: #333333;
    border-color: #333333;
}

#playerBattlefield {
    position: relative;
    height: 300px;
}

.battle-tank {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: red;
    -webkit-animation: animation-battle-tank 20s both infinite linear;
            animation: animation-battle-tank 20s both infinite linear;
}

.shot {
    position: absolute;
    bottom: 20px;
    height: 8px;
    width: 4px;
    background: black;
    -webkit-animation: animation-shot 5s both 1 linear;
            animation: animation-shot 5s both 1 linear;
}

@keyframes animation-battle-tank {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {  
    left: 0;
  }
}

@keyframes animation-shot {
  0% {
    bottom: 20px;
  }
  100% {  
    bottom: 110%;
  }
}


#modalAnimation {
    position: relative;
    height: 120px;
    overflow: hidden;
    width: 100%;
}

#modalAnimation .figure {
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-animation: run-fast 2s both infinite linear;
            animation: run-fast 2s both infinite linear;
}


/**
    HIDDEN
**/

#hiddenFigureContainer {
    position: relative;
    height: 60px;
    overflow: hidden;
}

.hidden-figure {
    display: none;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-animation: run 8s both infinite linear;
            animation: run 8s both infinite linear;
}

.hidden-figure img {
    height: 45px;
}

@-webkit-keyframes run{
    from { left: -200px; }
    to { left: 100%; }
}

@-webkit-keyframes run-fast{
    from { left: 0px; }
    to { left: 100%; }
}


/******
    RENTAL
**/
.rent-action {
    height: 34px;
}

.rental-full .btn-rent {
    display: none;
}

#pills-rented .rental .card-body {
    min-height: 80px;
}

.rental-admin .section-title {
    display: none;
}

.rental-admin .container-fluid {
    max-width: 100%;
    height: 100%;
}

.rental-admin .btn {
    padding: .25rem .5rem;
}

.rental-admin .card {
    margin-bottom: 0;
}

/**
.rental-admin .state-Broken .state-badge {
    background: red;
}

.rental-admin .state-Storage .state-badge {
    background: green;
}

.rental-admin .state-Room .state-badge {
    background: #000000;
}

.rental-admin .state-Field .state-badge {
    background: gray;
}
**/

.rental-admin .rental-item::before {
    position: absolute;
    content: "";
    left: 10px;
    top: 10px;
    z-index: 1;
    background: #000000;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 4px 8px;
}

.rental-admin .rental-item[data-room="Storage"]::before {
    content: "Im Lager";
    background: green;
}

.rental-admin .rental-item[data-room="Lounge"]::before {
    content: "Lounge";
}

.rental-admin .rental-item[data-room="Room"]::before {
    content: "Room";
}

.rental-admin .rental-item[data-room="Field"]::before {
    content: "Field";
}

.rental-admin .rental-item[data-room="Event"]::before {
    content: "Event";
}

.rental-admin .rental-item[data-room="Broken"]::before {
    content: "Defekt";
    background: red;
}


.rental-admin .rental-item[data-room="Storage"] .storage-button,
.rental-admin .rental-item[data-room="Lounge"] .broken-button,
.rental-admin .rental-item[data-room="Room"] .broken-button,
.rental-admin .rental-item[data-room="Field"] .broken-button,
.rental-admin .rental-item[data-room="Event"] .broken-button,
.rental-admin .rental-item[data-room="Broken"] .broken-button {
    display: none;
}


/**
.rental-admin .is-in-Room .state-badge,
.rental-admin .is-in-Field .state-badge,
.rental-admin .is-in-Lounge .state-badge,
.rental-admin .is-in-Event .state-badge {
    display: none;
}

.rental-admin .is-in-Room .storage-button,
.rental-admin .is-in-Field .storage-button,
.rental-admin .is-in-Lounge .storage-button,
.rental-admin .is-in-Event .storage-button {
    display: block !important;
}

.rental-admin .is-in-Room .broken-button,
.rental-admin .is-in-Field .broken-button,
.rental-admin .is-in-Lounge .broken-button,
.rental-admin .is-in-Event .broken-button {
    display: none !important;
}

.rental-admin .is-in-Room .room-badge {
    display: inline-block !important;
    background: #000000;
}

.rental-admin .is-in-Field .field-badge {
    display: inline-block !important;
}

.rental-admin .is-in-Lounge .lounge-badge {
    display: inline-block !important;
}

.rental-admin .is-in-Event .onevent-badge {
    display: inline-block !important;
}
**/

.rental-admin header {
    display: none;
}

.rental-admin .section-content {
    padding-top: 0 !important;
    height: 100%;
}

/**
.rental-admin .type-room .game-list {
    max-height: 300px;
    overflow-y: auto;
}

.rental-admin .type-lounge,
.rental-admin .type-lounge .room,
.rental-admin .type-field,
.rental-admin .type-field .room {
    display: flex;
    flex-direction: column-reverse !important;
}

.rental-admin .type-lounge .col {
    margin-bottom: 8px;
}

.rental-admin .type-lounge .button-group,
.rental-admin .type-lounge .button-group .timer {
    display: none;
}

.rental-admin .type-lounge .col {
    flex: 1 0 24%;
}

.rental-admin .type-lounge .room.selected {
    background: red !important;
}

.rental-admin .type-lounge .room.selected .button-group {
    display: block;
}
**/


.events-link {
    position: absolute;
    right: 20px;
    text-decoration: underline;
}

/******
    SLIDER
**/

.slideunlock-wrapper {
  position: relative;
  padding: 0;
  margin: 0;
  background-color: #ddd;
  border-radius: 26px;
}

.slideunlock-slider {
  padding: 12px 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 4px;
  border-radius: 26px;
}

.slideunlock-slider.success { background-color: #E5EE9F; }

.slideunlock-label {
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 20px;
  left: 0px;
  top: 4px;
  margin: 0;
  background: #333333;
  z-index: 999;
  cursor: pointer;
}

.slideToUnlock {   
    position:relative;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;  
}

.slideToUnlock .progressBar {
    position: absolute;
    left:0;
    top:0;
    width: 0;
    height: 100%; 
    border-radius: 25px;
}

.slideToUnlock .text {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%; 
    border-radius: 25px;
    background-color: #eee;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
} 

.slideToUnlock .drag {
    position: absolute;
    width:50px;
    height: 50px;
    left:0%;
    display: inline-block;
    line-height: 50px;
    border-radius: 25px;
    cursor: pointer;
    border: 1px solid #cccccc;
    background: #333;
    color: #692003;  
    text-align: center;
}

.main-filter .nav-link {
    font-size: 1rem;
    padding: 0.1rem 0.25rem;
}

.sub-filter .nav-link,
.sub-filter .nav-link:focus,
.sub-filter .nav-link:hover,
.main-filter .nav-link,
.main-filter .nav-link:focus,
.main-filter .nav-link:hover {
    color: #fff;
}

.main-filter.nav-pills .nav-link.active,
.main-filter.nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    border: 3px solid #ffffff
}

.sub-filter .nav-link {
    font-size: 0.8rem;
    padding: 0.1rem 0.25rem;
    margin: 4px 2px;
}

.sub-filter.nav-pills .nav-link.active,
.sub-filter.nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #ffffff
}

.no-list-style {
    list-style: none;
    padding: 0;
}

.rental-element.state-Storage .buttons-storage {
    display: block;
}

.rental-element.state-Broken .buttons-broken {
    display: block;
}

.rental-element.state-Room .buttons-room {
    display: block;
}

.rental-element.state-Field .buttons-field {
    display: block;
}



.content-page img {
    width: 75%;
    margin: 0 auto;
    display: block;
}

#registerButton {
    position: relative;
}

#registerButton.disabled::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #FFFFFF;
    z-index: 100;
    opacity: 0.8;
}

/******
    SPACE INVADERS
**/

#gameContainer {
    max-width: 100%;
}

#playerInfo {
    background-color: #333333;
    color: #ffffff;
}


#playerInfo ul {
    list-style: none;
    padding: 0;
    
}

#playerInfo ul li {
    margin: 0;
    padding: 0;
}

#playerBox {
    height: 200px;
    width: 200px;
}