@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
    src: url(/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/fonts/Material-icons.woff2) format('woff2'),
    url(/fonts/Material-icons.woff) format('woff'),
    url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
    font-display: swap;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga'
}

.material-icons.menu {
	font-size: 18px;
	vertical-align: middle !important;
	padding-bottom: 3px
}

.material-icons.md-12 {
	font-size: 12px
}

.material-icons.md-18 {
	font-size: 18px
}

.material-icons.md-24 {
	font-size: 24px
}

.material-icons.md-36 {
	font-size: 36px
}

.material-icons.md-48 {
	font-size: 48px
}

.navbar-inverse {
	background-color: #00dcff;
	border-color: #00dcff
}

.navbar-custom {
	background-color: #00dcff !important
}

.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-text {
	color: #000
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus,
	.navbar-inverse .navbar-nav>.active>a:hover {
	color: #000;
	background-color: #00dcff
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: black;
	background-color: #00dcff;
}

.form-control, .form-control:valid, .form-control:disabled,
	.form-control[readonly] {
	background-color: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 15px;
}

.navbar-custom .navbar-nav.navbar-right:last-child {
	margin-right: -15px !important
}

.navbar-inverse .navbar-nav>li>a .active, .navbar-inverse .navbar-nav>.active>a:focus,
	.navbar-inverse .navbar-nav>.active>a:hover {
	color: #fff
}

.navbar-inverse .navbar-nav>li>a.active, .navbar-inverse .navbar-text {
	color: #fff;
}

table.dataTable>.sorting, table.dataTable>.sorting_asc, table.dataTable>.sorting_desc
	{
	background: 0 0
}

table.dataTable tbody td {
	vertical-align: middle
}

.navbar .navbar-collapse {
	text-align: center
}

.navbar-nav>li {
	padding-left: 10px;
	padding-right: 10px;
	background-color: #00dcff;
	border-color: #00dcff
}

.maincolor {
	color: #00dcff
}

.color_friendly {
	color: #009000
}

.small {
	font-size: 12px;
}

.smallest {
	font-size: 14px;
	vertical-align: bottom;
	font-weight: normal;
}

.bottom {
	vertical-align: bottom
}

body {
	font-family: Roboto, 'Open Sans', sans-serif;
	font-size: 22px;
	color: #ccc;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #000
}

.legend {
	display: block;
	width: 100%;
	margin-bottom: 22px;
	font-size: 21px;
	line-height: inherit;
	color: #00dcff !important;;
	text-align: right;
	padding-right: 3px;
	border-bottom: 1px solid #e5e5e5;
}

.myrow {
	background-image: url(cave_high.jpg);
	background-repeat: no-repeat;
	background-position: center -50px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	height: 100vh;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#contentIndex {
	font-size: 17px
}

#loginErrorContainer dt {
	color: #00dcff;
	padding: 0 3em .2em 0
}

#loginErrorContainer dd {
	color: #ccc;
	padding: 0 3em .5em 0
}

#loginErrorContainer dt.errorList {
	color: #00dcff;
	padding: 0 0 .2em 0
}

#loginErrorContainer dd.errorList {
	color: #eee;
	padding: 0 0 .5em 0
}

#loginErrorContainer #errorMessage {
	font-size: 22px;
	font-weight: 700
}

.mycontainer {
	width: auto;
	max-width: 1900px
}

.footercontainer {
	position: relative;
	z-index: 100;
	width: auto;
	max-width: 100%
}

hr {
	margin-top: 0;
	margin-bottom: 20px;
	border: 0;
	height: 1px;
	background-color: #fff
}

form {
	text-align: left
}

ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.logo {
	position: absolute;
	top: 60px;
	width: 15%;
	min-width: 200px;
	max-width: 370px;
	height: 80px
}

.logo_img {
	width: 100%
}

.footer_img {
	display: block;
	margin: auto;
	width: 100%;
	max-height: 550px
}

.content {
	width: 100%;
	max-width: 860px;
	text-align: center;
	padding-top: 5%;
	margin: auto;
	padding-right: 70px;
	padding-left: 70px;
	position: relative;
	z-index: 2
}

.textcenter {
	text-align: center
}

.bigcontent {
	width: 100%;
	max-width: 1020px;
	text-align: center;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	position: relative;
	z-index: 2;
	position: relative
}

.bigcontent_right {
	border: 5px solid #00dcff;
	font-size: 17px;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 25px;
	padding-top: 20px
}

.close {
	display: none
}

.text_box_right {
	font-size: calc(.7vw + .7vh + .5vmin)
}

.text_box_right_s {
	font-size: calc(.6vw + .5vh + .4vmin)
}

.content_right {
	font-size: 17px;
	padding-right: 7%
}

.panel_error {
	min-height:90px;
	margin-top:20px;
	/*min-height: 15vh*/
}

.new_middlecolumn {
	float: left;
	margin: 20px;
}

.middle_content_game {
	display: flex !important;
	border: solid 1px #373737;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, .6);
}

.center {
	width: 50%;
	float: left
}

.left {
	text-align: left
}

.parent {
	width: 25%;
	float: left;
	height: 500px
}

.play_now {
	margin: auto;
	max-width: 300px;
}

.play_now img {
	width: 100%
}

.play_now_footer {
	margin: auto;
	max-width: 300px;
	position: relative;
	bottom: 90px
}

.bigfont {
	font-size: 28px;
	letter-spacing: .3em
}

.text_box_right ul {
	text-align: left;
	padding-left: 30px;
	padding-right: 20px;
	list-style-position: inside;
	list-style: none
}

.padding_left {
	padding-left: 7%
}

.text_box_right li {
	text-align: left;
	padding-top: 10px;
	list-style: none
}

@font-face {
	src: local('Glyphicon Icons'), local('glyphicons-halflings-regular'),
		url(/fonts/glyphicons-halflings-regular.woff) format('woff'),
		url(/fonts/glyphicons-halflings-regular.svg) format('svg')
}

.carousel-caption {
	position: relative;
	left: auto;
	right: auto
}

.middlefont {
	font-size: 20px;
	letter-spacing: .3em
}

.navfont {
	font-size: .9em;
	letter-spacing: .1em
}

h3 {
	font-size: 20px;
	letter-spacing: .3em;
	padding-top: 10px
}

h4 {
	font-size: 20px;
	letter-spacing: .3em;
	padding-top: 10px;
	color: #00dcff
}

h5 {
	text-align: right;
	font-size: 20px;
	letter-spacing: .3em;
	padding-top: 10px;
	color: #00dcff
}

.btn-dark {
	color: #000;
	background-color: #00dcff;
	border-color: #00dcff
}

.no_padding {
	padding: 1px 5px 0 5px
}

.input_dark {
	padding: 8px 15px;
	box-shadow: 0 0 8px #888;
	-webkit-box-shadow: 0 0 8px #888;
	-moz-box-shadow: 0 0 8px #888;
	color: #dcdcdc;
	font-size: 16px;
	background-color: rgba(0, 0, 0, .6);
	padding: 8px 15px 8px 15px;
	border: solid #888 1px;
	text-decoration: none
}

.form_input_dark {
	margin: 2px;
	color: #dcdcdc;
	background-color: rgba(0, 0, 0, .6);
	padding: 1px 4px 1px 4px;
	border: solid #888 1px;
	text-decoration: none;
	border-radius: 5px
}

.input_small {
	padding: 0;
	margin: 0;
	font-size: 15px
}

.table-condensed_mini>tbody>tr>td, .table-condensed_mini>tbody>tr>th,
	.table-condensed_mini>tfoot>tr>td, .table-condensed_mini>tfoot>tr>th,
	.table-condensed_mini>thead>tr>td, .table-condensed_mini>thead>tr>th {
	padding: 2px
}

.panel-transparent {
	background: 0 0
}

.panel-transparent .panel-heading {
	background: rgba(0, 220, 255, .2) !important
}

.panel-transparent .panel-body {
	background: rgba(0, 0, 0, .6)
}

div.message {
	color: #dcdcdc;
	background-color: rgba(0, 0, 0, .6);
	margin-top: .5em;
	text-align: left
}

.msgcontent {
	margin-left: 0;
	margin-right: 1em;
	padding-left: 5em
}

#div.message input {
	margin-left: 1em
}

div.message span.headline {
	font-weight: 700;
	display: block;
	margin: .5em 0 .5em 0;
	padding-left: 1em
}

div.message span.date {
	color: #777;
	display: block;
	text-align: center
}

table.dataTable thead tr th {
	background-color: rgba(0, 0, 0, .4);
	border: none
}

.table-striped>tbody>tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0)
}

table.dataTable tbody tr, tfoot tr {
	background-color: rgba(0, 0, 0, .4)
}

.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate,
	.dataTables_wrapper .dataTables_processing {
	color: #ccc
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
	.table>thead>tr>td, .table>thead>tr>th {
	border-top: 0
}

.content_menu {
	height: 200px
}

.loginpane {
	/*padding-top: 20px*/
}

.mycont {
	width: 99%
}

.logintable {
	border-collapse: collapse
}

.logintable td {
	padding-top: .5em;
	padding-bottom: .5em
}

.registertable {
	width: 100%;
	margin: auto
}

.registertable tr td {
	padding-bottom: 5px
}

.hundred {
	width: 100%
}

label {
	font-weight: 400
}

.alignright {
	text-align: right;
	float: right
}

.outside_middle_content {
	text-align: left
}

img {
	max-width: 100%
}

.alert {
	border: 2px solid #00dcff
}

.centerimg {
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	display: block
}

.img_container {
	position: relative;
	text-align: center;
	display: block
}

.bottom_img_Text {
	background-color: rgba(0, 0, 0, .6);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px
}

.middle_img_text {
	position: absolute;
	bottom: 100px;
	left: 0;
	width: 100%;
	height: 200px
}

.automargin {
	margin: auto
}

.centerv {
	padding-top: 20px
}

.mini_icon {
	width: 50px;
	height: 50px;
	position: relative;
	bottom: 4px
}

.footer_bg {
	background: #191e25;
}

.footer_container {
	padding: 20px 0 20px 0;
	max-width: 1300px;
	border: medium none;
	margin: auto
}

.footer_block {
	padding-bottom: 10px
}

.maxwidth {
	max-width: 1400px;
	margin: auto
}

.bottom_footer {
	text-align: right;
	clear: left;
	background: #161a20;
	width: 100%;
	padding: 5px 10px 5px 0
}

#versionTitle {
	font-size: 17px;
	color: #777
}

.player a {
	color: #009000
}

.red {
	color: red
}

.orange {
	color: orange
}

.yellow {
	color: #ff0
}

.green {
	color: #0f0
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus {
	background-color: #00dcff
}

.nav-pills>li.active>a:hover {
	background-color: #00dcff
}

.nav>li>a:focus, .nav>li>a:hover {
	background-color: #00dcff
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover
	{
	color: #000
}

.modal-content {
	background-color: #000
}

.iconlink {
	vertical-align: bottom !important;
	cursor: pointer
}

.chart {
	width: 100%;
	min-height: 200px;
	height: 368px;
	max-height: 368px
}

.chartrow {
	margin: 0 !important
}

.google-visualization-tooltip {
	background-color: green !important
}

.google-visualization-tooltip-action: hover {
	background-color: green
}

.w30 {
	width: 30%
}

.w100 {
	width: 100%
}

div::-webkit-scrollbar {
	width: 10px
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

::-webkit-scrollbar-thumb {
	background-color: #a9a9a9;
	outline: 1px solid #708090
}

::-webkit-scrollbar-thumb:hover {
	width: 5px;
	background: #555
}

.scrolldiv {
	max-height: 400px;
	overflow: auto
}

#avatar-avatarbox {
	position: relative
}

.war_warning {
	font-size: 18px;
	text-align: center;
	margin: 0;
	display: block
}

.blink {
	animation: blinker 3s linear infinite
}

@keyframes blinker {
	50%{
	color: #f93
}

}
.etspanel {
	background-color: rgba(0, 0, 0, .6);
	border-bottom-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-top: 15px
}

.smallfont {
	font-size: 14px
}

@media ( max-width :1023px) {
	.chart {
		height: 200px
	}
	.text_box_right {
		font-size: calc(1vw + 2.5vh + 1vmin)
	}
	.text_box_right_s {
		font-size: 22px
	}
	.navbar-inverse {
		background-color: transparent;
		border-color: transparent
	}
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px
	}

}

@media only screen and (min-device-width :320px) and (max-device-width
	:568px) {
	body {
		font-size: 15px
	}
	.middle_content_game {
		display: block !important;
		margin-top: 0 !important;
	}
	.content_right {
		font-size: 15px
	}
	.bigfont {
		font-size: 20px
	}
	.middlefont {
		font-size: 16px
	}
	.smallfont {
		font-size: 10px
	}
	h1 {
		font-size: 20px
	}
	.content {
		padding: 0
	}
	.logo {
		top: 2px;
		left: 10px;
		min-width: 80px;
		height: auto
	}
	.text_box_right_s {
		font-size: 15px
	}
	.play_now {
		padding-top: 0
	}
	#contentIndex {
		font-size: 15px
	}
	#versionTitle {
		font-size: 15px
	}
	.btn {
		font-size: 15px
	}
	.scrolldiv {
		max-height: 100%;
		overflow: auto
	}
	.emptyereignisse {
		display: none
	}
	.mobilehide {
		display: none
	}
	.new_middlecolumn {
		float: none;
		border: 0;
		margin: 0;
		min-height: 0;
		max-width: 100%;
		margin-top: 70px;
		padding: 0;
	}
	.pagepic {
		height: 130px
	}
	.smallest {
		font-size: 10px;
		vertical-align: bottom;
		font-weight: normal;
	}
}

@media only screen and (min-width: 985px ) and (max-width
	: 999px) {
	.new_middlecolumn {
		width: 560px;
	}
	.nav-collapse.opened {
		width: 239px;
	}
}

@media only screen and (min-width: 1000px) and (max-width
	: 1199px) {
	.new_middlecolumn {
		width: 750px;
	}
}

@media only screen and (min-width: 1200px) and (max-width
	: 1366px) {
	.new_middlecolumn {
		width: 970px;
	}
}

@media only screen and (max-width: 1540px) {
	#right-column {
		display: none;
	}
	
}