@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);

body {
	font-family: 'Titillium Web', sans-serif;
	color: #777;
}

.header {
	height: 0;
	border-bottom: 1px #000 solid;
	overflow: hidden;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.04),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.04),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);
}


.header center.logo {
	margin: 25px 0 0 0;
}

.header .machdenscheissverlaufjetzt {
	position: fixed;
	z-index: -999;
	top: 0;
	height: 100%;
	background: url(/assets/i/mrt_logo_bg.png) no-repeat center center, radial-gradient(ellipse at top, #000000b0 0, #111111b0 100%), radial-gradient(ellipse at top, #f3d569c2 0, #79651eb0 70%), url(/assets/i/binding-dark.png) repeat;
	width: 100%
}


.header .machdenscheissverlaufjetzt.jury{
	background: url(/assets/i/mrt_logo_bg.png) no-repeat center center,radial-gradient(ellipse at top, #000000a1 0, #111111a1 70%), radial-gradient(ellipse at top, #786fa6 0, #574b90 70%), url(/assets/i/binding-dark.png) repeat;
}

.header .machdenscheissverlaufjetzt.admin {
	background: url(/assets/i/mrt_logo_bg.png) no-repeat center center,radial-gradient(ellipse at top, #000000a1 0, #111111a1 70%), radial-gradient(ellipse at top, #ff7979 0, #eb4d4b 70%), url(/assets/i/binding-dark.png) repeat;
}


.nav {
	background-color: rgba(1, 1, 1, 0.95) !important;
	padding: 0;
	border-bottom: 1px #000 solid;
	box-shadow: 0 3px 2px 0 rgba(0,0,0,0.3);
}
.nav a.nav-link {
	margin: 10px 5px;
	color: #fff !important;
	text-transform: uppercase;
	border: 1px rgba(0,0,0,0) solid;
	transition: border .3s, box-shadow .3s;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}


.nav a img {
	border-radius: 100%;
	vertical-align: -9px;
	border-style: none;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.04),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);
	margin-right: 1px;
}

.nav a.nav-link.active, .nav a.nav-link:hover {
	border: 1px #F3D569 solid;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.04),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);
	box-shadow: 0 2px 3px 3px rgba(0,0,0,0.5),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);

}

.nav .nav-link {
	font-size: 20px;
	padding: 6px 10px 6px 10px
}

.navbar.nav {
	padding: 0;
	border-bottom: 1px #000 solid;
	box-shadow: 0 3px 2px 0 rgba(0,0,0,0.3);
	z-index: 1000;
	width: 100%;
}

.navbar .navbar-nav .nav-link {
	margin: 10px 5px;
	color: #fff !important;
	text-transform: uppercase;
	border: 1px rgba(0,0,0,0) solid;
	transition: border .3s, box-shadow .3s;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	font-size: 20px;
	padding: 6px 10px;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
	border: 1px #F3D569 solid;
	box-shadow: 0 2px 3px 3px rgba(0,0,0,0.5),0 3px 1px -2px rgba(0,0,0,0.02),0 1px 5px 0 rgba(0,0,0,0.1);
}


.subnav {
	z-index: 5;
	padding: 5px;
	background-color: #1a1a1a;
	border-bottom: 1px #000 solid;
}

.subnav .avatar {
	margin-right: 10px;
	border: 1px #000 solid;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);
}

.dropdown-menu-dark {
	border: 1px #000 solid;
	background-color: #121212;
	padding: 10px;
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.4);
}

/* Dropdown über Subnav */
.navbar .dropdown-menu{ z-index:1100; }



.dropdown-item.disabled, .dropdown-item:disabled {
	color: rgba(255,255,255,0.1)
}

.list-group-unvotedlist {
	border: 1px #000 solid;
	border-radius: 5px;
}

.list-group-unvotedlist a.list-group-item {
	background-color: #111;
	color: #eee;
	padding: 5px;
	border:0;
}

.list-group-unvotedlist a.list-group-item:nth-child(even) {
	background-color: #1a1a1a; /* dunkleres Grau oder was du möchtest */
}

.list-group-unvotedlist .list-group-item .info {
	border-radius: 5px;
	padding: 5px 10px;
}

.list-group-unvotedlist .list-group-item .info h5.title {
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	overflow: hidden !important;
}

#content {
	margin-top: 20px;
}

#content .table {
	--bs-table-bg: rgba(0,0,0,0);
	--bs-table-color: #eee;
	--bs-table-striped-color: #fff;
	--bs-table-hover-color: #F3D569;
	--bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.3);
}

#content .admin .status-eingegangen {
  background-color: #222;
}

#content .admin .status-heruntergeladen {
  background-color: #927c2c;
}

#content .admin .status-angenommen {
  background-color: #237629;
}

#content .admin .status-abgelehnt {
  background-color: #742323;
}



#content .box, #footer .box {
	color: #eee;
	border: 1px #000 solid;
	background-color: #121212;
	padding: 10px;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.23);
}

#content .box.discord, .btn-discord {
	background: linear-gradient(to left, rgb(40, 37, 138), rgb(88,101,242)	) !important;
	color: #fff;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}

#content .box.discord .btn {
	box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

#content .videobox {
	background-color: #111;
	padding: 0;
	transition: opacity .5s ease;
}

#content .videobox.infovideo {
	background: linear-gradient(to left, #ebebeb, #a7a8a8) !important;
}

#content .videobox.infovideo h3, #content .videobox.infovideo .info {
	color: #000 !important;
}

#content .videobox.bewertungsvideo {
	background: radial-gradient(ellipse at top, #F3D569 0, #79651E 70%);
}

#content .videobox.pinnedvideo {
	box-shadow: 0 0 10px 3px #EA2027;
}

#content .videobox .image, #content .videobox .image {
	height: 140px;
	width: 100%;
	padding: 10px;
	transition: background-position .5s ease, opacity .5s ease;
	background-position: center center;
}

#content #pagination-buttons, #content .paginationbtn {
	margin-bottom: 20px;
}

#content #pagination-buttons .btn, #content .paginationbtn .btn {
	border-radius: 100%;
	padding: 10px;
	box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.9);
}

#content .btn.btn-mortem, .bg-mortem, #content .nav-pills .nav-link.active, #content .nav-pills .show>.nav-link {
	color: #000 !important;
	background-color: #D6BC47 !important;
}

#content a:hover .videobox .image {
	background-position: center -80px;
}

#content a:hover .videobox  {
	opacity: .8;
}

#content .videobox .image .datum  {
	color: #fff;
	background-color: rgba(0,0,0,0.6);
	border-radius: 5px;
	padding: 5px 10px;
	float: right;
}

#content .videobox .info {
	font-size: 20px;
	color: #eee;
	width: 100%;
	display: inline-block;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	padding: 10px 10px 5px 10px;
	letter-spacing: -1px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden !important;
	text-align: left;
}

#content .videobox hr {
	margin: -10px 0;
	background-color: #2c2e3c;
}


#content a {
	text-decoration: none;
	color: none;
}

#content a:hover .newsbox {
	opacity: 0.8;
}

#content .bigavatar {
	margin-right: -80px;
	float: left;
	height: 75px;
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
	border-radius: 100%;
}

#content .list-group {
	border-radius: 5px;
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
}

#content .list-group .list-group-item {
	background-color: #212121;
	color: #777;
	border: 1px #000 solid;
}

#content .list-group .list-group-item:nth-child(even) {
	background-color: #151515;
	color: #777;
	border: 1px #000 solid;
}

#content .topf-bar-container {
	display: flex;
	width: 100%;
	height: 25px;
	margin-top: 10px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

#content .topf-segment {
	flex: 1;
	background: #D6BC47;
	position: relative;
}

#content .topf-fill {
	border-radius: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #000;
}

#content .topf-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-top: 3px;
}

#content .avatar-stack {
	display: flex;
	float: left;
	justify-content: center;
}
#content .avatar-stack img {
	margin-bottom: 0;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -12px;
	z-index: 1;
}
#content .avatar-stack img:first-child {
	margin-left: 0;
}

#footer {
	background-color: #141414;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
	padding: 20px;
}

#footer .footermenu ul {
	padding-left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
}

#footer .footermenu ul li {
	border-right: 1px #3e3e56 solid;
	margin-right: 10px;
	padding-right: 10px;
}

#footer .footermenu ul li:last-child {
	border-right: 0px;
}

#footer .footermenu ul li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	transition: color .3s;
}

#footer .footermenu ul li a:hover {
	color: #1e9af2;
}

#footer .rechts {
	opacity: 0.5;
	float: right;
	margin-top: -10px;
	transition: opacity 0.3s;
}

#footer .rechts:hover {
	opacity: 1;
}


#subfooter {
	background-color: #111;
	padding: 10px;
	font-size: 14px;
}


.alert {
	padding: 20px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.alert a {
	color: #fff;
	text-decoration: underline;
}

.alert-primary {
	background-color: #4b7bec;
	border-color: #3867d6;
	color: #fff;
}

.alert-success {
	background-color: #26de81;
	border-color: #20bf6b;
	text-shadow: none;
}

.alert-danger {
	background-color: #b00020;
	font-weight: 200;
	font-size: 18px;
	color: #fff;
	border-color: #cf6679;
}

.alert-danger .alert-link {
	font-weight: 400;
}

.alert-warning {
	background-color: #e6a823;
	border-color: #fed330;
	color: #fff;
}

.alert-info  {
	background-color: #45aaf2;
	color: #fff;
	border-color: #45aaf2;
}

.alert-light {
	background-color: #fff;
	border-color: #111;
	color: #000;
	text-shadow: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	color: #000;
}

.leaderboard-section {
	margin-bottom: 20px
}

.leaderboard-item {
	background-position: 900% 50%;
	background-repeat: no-repeat;
	background-size: 90%;
	color: #ccc !important;
	text-shadow: 1px 1px 3px 1px rgba(0,0,0,0.7);
}

.leaderboard-item:hover {
	background-color: rgba(0,0,0,0.9) !important;
	background-position: 400% center;
	transition: background-color 1s ease, background-position 0.6s;
}
.leaderboard-item .gold {
	background-color: #ffd700 !important;
	font-weight: bold;
 }
.leaderboard-item .silver {
	background-color: #c0c0c0 !important;
	font-weight: bold;
	color: #000;
}
.leaderboard-item .bronze {
	background-color: #cd7f32 !important;
	font-weight: bold;
	color: #000;
}
.leaderboard-item .text-bronze {
	color: #cd7f32 !important;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a32a3;
    --bs-btn-hover-border-color: #512a97;
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #512a97;
    --bs-btn-active-border-color: #482489;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6f42c1;
    --bs-btn-disabled-border-color: #6f42c1;
}

.form-control, .form-control:focus {
	background-color: #1a1a1a;
	color: #fff;
	border: 1px solid #333;
	box-shadow: none;
}

.form-control::placeholder {
  opacity: 0.7;
  color: #eee;
}

.box-silver {
  background-color: #c0c0c0 !important;
  color: #000 !important;
  overflow: visible;
}

.box-bronze {
  background-color: #CE8946 !important;
  color: #000 !important;
  overflow: visible;
}

.box-gold {
  overflow: visible;
}