/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */

body {
	padding-top: 54px;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body, html {
	height: 100%;
}
.dudetypo {
    font-family: 'Teko', sans-serif;
	text-transform: uppercase;
	font-size: 42px;
	color:#fff;
	padding:0.3rem 0.6rem 0rem 0.6rem;
	line-height:3rem !important;
 /* text-shadow: 0 0 4px #981320, 0 0 5px #981320, 0 0 10px #981320, 0 0 15px #981320, 0 0 20px #981320 ; */
  text-shadow: 0 0 1px #666, 0 0 3px #666, 0 0 4px #666, 0 0 8px #666, 0 0 12px #666 ; 
	border:1px solid #888;
	border-radius: .6rem;
 	 }
.wmtypo {
    font-family: 'Skranji', sans-serif;
	text-transform: uppercase;
	font-size: 1.8rem;
	color:#ffc600;
    text-shadow: 2px 2px 2px #000;
 	padding-top:0.2rem;
	line-height: 2rem;
	margin-left:1rem;
	letter-spacing: 1px;
}
.wmtypo_desktop { display: inline-block;}
.wmtypo_mobile { display: none;}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255,255,255,.8); 
}
.navbar-dark .navbar-nav .nav-link:hover {
	color: rgba(255,255,255,1); 
}
.navbar-brand {
	margin-top:0;
	margin-bottom:0;
}
.red {color:red;}
.green {color:green;}
.tendenz {margin-left:5px; font-size: 0.8rem; color:grey;}

.bg {
	/* The image used */
    background-image: url("../images/bg1.jpg"); 
	background-color:#333;
    /* Full height */
	/* Center and scale the image nicely */
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.bgnav {
	/* The image used */
    background-image: url("../images/fifa_bg.jpg"); 
	/* Center and scale the image nicely */

	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
.bgnav2 {
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgfooter {
	background: -moz-linear-gradient(top, #000000 0%, #45484d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #000000 0%,#45484d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #000000 0%,#45484d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

footer {
	margin-top:2em;
}

h1, h2, h3, h4, h5 {
	font-family: "Merriweather"
}
.table {
	margin-bottom: 0;
}
.card {
	border-radius: .5rem;
}
.card-header {
	padding-left:0.7rem;
	
}
.jumbotron {
	padding:2rem;
}
.opacity {opacity: .9;}
.highlight {background-color:#000;}

.mouselink {cursor: pointer;}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
background-color: #bbc4cb
}
/* Points */
.p7 {
	background-color:#00FF66;
} 
.p5 {
	background-color:#00C957;
} 
.p4 {
	background-color:#34925E;
	color:#eee;
} 
.p3 {
	background-color:#426352;
	color:#eee;
} 
.p2 {
	background-color:#006633;
	color:#eee;
} 
.p0 {
		background-color:#000;
		color:#eee;
} 
/* Points */


/*  metrics */
.metric-label {
    font-size: .975rem;
    font-weight: 500;
    color: #686f76;
    white-space: nowrap;
 	font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.metric-value {
 	font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   margin-bottom: 0;
    line-height: 1;
    white-space: nowrap;
}
.metric-label > i {font-size:1.3em;}

span.metric-sub {font-size:0.85rem; display: block; color:grey; padding-top:0.4rem;}
/*metrics */



table {
	table-layout: fixed;
	word-wrap: break-word;
}

/* Rangliste Tabelle */
.rangliste_table {
	table-layout:auto !important;
}


.stats_table .col1 {width:5rem;}
/* Rangliste Tabelle */

 

/* Alle Tipps Tabelle */
.alletipps_table {
	table-layout:auto !important;
}
.alletipps_table th {
font-size:0.9rem;
}

.alletipps_table .col_erg {
	min-width:60px !important;
}
 
.fixed {
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
}
 
.fixed th,
.fixed td {
  text-align: left;
  min-width: 80px;
  padding: .60rem !important;
}


.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display:block;
  overflow: auto;
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}


th.vertical-text {
  writing-mode: tb-rl;
	font-weight: normal;
 }
th.rotate{  
  height: 115px;
  white-space: nowrap;
}
th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(38px, 0px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;

}
td.alletipps_usertipp {
	border-right:1px solid #999;
	
}
td.trenner {padding:0.1rem !important;}
 
.scrollgesture {
	
	z-index:100; 
	display:block; 
	position: relative; 
	top:30px; 
	left:10px; 
	height:30px; 
	opacity: 0.5;
}
/* Alle Tipps Tabelle */


/* Small Table */
#small table {
	font-size: 0.9em;
}
/* table input.form-control { font-size: 0.5em; } */
#small .daterow {
	display: table-row;
}
#small .daterow >th {
	padding: .25rem .75rem .25rem .75rem;
	color: #ccc;
	font-weight: normal;
	font-size: 0.8em;
}
#small .daterow >td {
	padding: .35rem .75rem .15rem 0.7rem;
	font-weight: normal;
	background-color:#111;
}
#small .daterow >td.heutemorgen {
	padding: .35rem .75rem .15rem 0.7rem;
	font-size: 1rem;
 }
#small .tipp-col1, #small .tipp-col5 {
	display: none;
}
#small td.heim, #small td.ausw, #small td.tipp, #small td.erg, #small td.pkte,  {
	border-top: none;
	/* padding-top: 0; */
}
#small td.erg {font-size:2.5rem;}
#small .tipp-col2, #small .tipp-col3 {
	width: 30%;
	padding-left:0.7rem !important;
}
#small .tipp-col4 {
	width: 24%;
}
#small .tipp-col6 {
	width: 16%
}
#small .row_erg {
	display: block
}
#small .col4_title_mobile {
	display: inline-block;
}

/* Small Table */


.msg_tipp_save {
	 position: absolute;
	/* position: relative; */
	width: 140px;
	border-radius: 5px;
	border: 1px solid #060;
	line-height: 1.2em;
	text-align: center;
	background-color: #090;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	padding: 6px;
	display: none;
	margin-top: -30px;
	z-index: 100000;
	margin-left: -20px;
}
.msg_tipp_save_err {
	position: absolute;
	width: 200px;
	border: 1px solid #981320;
	line-height: 1.2em;
	text-align: center;
	background-color: #990000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	padding: 6px;
	display: none;
	margin-top: -10px;
	z-index: 100000;
	margin-left: -200px;
}
.msg_tipp_save2 {
	position: absolute;
	width: 75px;
	height: 25px;
	border: 1px solid #060;
	text-align: center;
	background-color: #090;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #fff;
	padding: 1px;
	display: none;
}
.winnertip_selection {
	position: absolute;
	z-index: 1000;
	display: none;
	margin-top: 10px;
}
.winnertip_selection_inactive {
	display: none;
}
.winnertip_selection_active {
	display: block;
}
.sel_punkte_legende {
	
}
.sel_punkte_legende:hover {
	background-color: transparent;
	color: #000;
	border: 1px solid #999 !important;
	padding: 7px;
}
.punkte_legende {
	display: none;
	position: absolute;
	z-index: 1000;
	margin: 2px 0 0 206px;
}

.points-7 {
	background-color:#02B601; 
}
.points-5 {
	background-color:forestgreen; 
}
.points-4 {
	background-color:sandybrown; 
}
.points-3 {
	background-color:#02B601; 
}
.points-2 {
	background-color:#02B601; 
}
.points-0 {
 }

.carousel-item {
	height: 65vh;
	min-height: 300px;
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.portfolio-item {
	margin-bottom: 30px;
}

/* Tabelle Tippen */
.daterow {
	display: none;
}
.tbl_col_date {
	display: table-cell;
}
.tipp-col1 {
	width: 21%;
	display: table-cell;
}
.tipp-col2 {
	width: 23%;
		padding: .75rem .25rem !important;

}
.tipp-col3 {
	width: 23%;
		padding: .75rem .25rem !important;

}
.tipp-col4 {
	width: 14%;
	padding: .75rem .25rem !important;
}
.tipp-col5 {
	width: 9%;
}
.tipp-col6 {
	width: 10%;
	padding: .75rem .25rem !important;
}
.row_erg {
	display: none;
}
.col4_title_mobile {
	display: none;
}
.time {
	color: #ccc;
	font-weight: normal;
	font-size: 0.8em;
}
.form-control-sm {padding: .15rem .25rem; font-size:1.1rem;color:#000; font-weight: bold;}
.Punktegesamt {font-size:1.5rem; font-weight: bold;}
.live {
	background-color: #f9f25d;
	color:#000;
}
tr.live:hover {
	background-color: #e1d818 !important;


}
.live span{
	color:#000;
}
.livetext {
	text-transform: uppercase;
	font-size:0.7rem;
	font-weight: bold;
	color:red !important;
	letter-spacing: 0.05rem;
}

/* Tippen Tabelle */

/* Tabellen */

.tabelle-col1 {
	width: 4%;
}
.tabelle-col2 {
	width: 31%
}
.tabelle-col3 {
	width: 8%
}
.tabelle-col4 {
	width: 7%;
}
.tabelle-col5 {
	width: 7%
}
.tabelle-col6 {
	width: 7%
}
.tabelle-col7 {
	width: 8%
}
.tabelle-col8 {
	width: 8%
}
.tabelle-col9 {
	width: 8%
}
.tabelle-col10 {
	width: 12%
}
th.tabelle-col3, th.tabelle-col4, th.tabelle-col5, th.tabelle-col6, th.tabelle-col7, th.tabelle-col8, th.tabelle-col9, th.tabelle-col10 {
	font-size: 0.7rem;
}
td.tabelle-col4,td.tabelle-col5,td.tabelle-col6 {background-color:#333;
}
td.tabelle-col7,td.tabelle-col8,td.tabelle-col9 {background-color:#555;
}

/* Form signin */
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input {
	opacity: 1;
	background-color: #fff;

}
.form-signin input[type="username"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}



/************ MEDIA QUERIES ****************/
@media (min-width: 992px) {
	body {
		padding-top: 76px;
	}
}

/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 767px) {
	body:after{
		  content:"";
		  position:fixed; /* stretch a fixed position to the whole screen */
		  top:0;
		  height:100vh; /* fix for mobile browser address bar appearing disappearing */
		  left:0;
		  right:0;
		  z-index:-1; /* needed to keep in the background */
		  background: url("../images/bg1.jpg") center center;
		  -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}

.navbar-brand {margin-right:0;}	
.dudetypo {
	font-size: 30px;
	padding:0.2rem 0.6rem 0rem 0.6rem;
	line-height:2.3rem !important;
	/* text-shadow: 0 0 4px #981320, 0 0 5px #981320, 0 0 10px #981320, 0 0 15px #981320, 0 0 20px #981320 ; */
	text-shadow: none; 
	border-radius: .6rem;
 }

.wmtypo {
	font-size: 22px;
	padding-top:0.1rem;
	letter-spacing: 0;
	margin-left:15px;
	line-height: 1.1em;
}
.wmtypo_desktop { display: none;}
.wmtypo_mobile { display: inline-block;}

h1,h2 {font-size:1.3rem;}
.display-4 {font-size:2rem;}
.jumbotron {
    padding: 1rem .5rem;
    margin: .5rem .15rem;
	}
.j2 {text-align: left !important; font-size:0.8rem;} 
table {
	font-size: 0.9rem;
}
.tabellen-table {
	font-size: 0.8rem;
}
table.tipps-table th {
    padding: .25rem;
	border-top: none; 
}
table.tipps-table td{
    padding: .15rem .25rem 0 .25rem;
	border-top: none; 
}
.daterow {
	display: table-row;
}
.daterow >td {
	padding: .7rem .75rem .1rem .25rem !important;
	color: #ccc;
	font-weight: normal;
	font-size: 0.85em;
	border-top:1px solid #444;
	background-color: #111;
	
}
.tipp-col1, .tipp-col5 {
	display: none;
}
td.heim, td.ausw, td.erg, td.pkte {
	border-top: none;
	/* padding-top: 0; */
}
td.pkte {font-size:1.5rem;}
	
.tipp-col2, .tipp-col3 {
	width: 33%;
	padding-left:0.1rem;
	padding-right:0.1rem;
}
td.tipp-col2, td.tipp-col3 {
	padding-left:0.25rem !important;
	padding-right:0.1rem !important;
}

.tipp-col4 {
	width: 22%;
}
td.tipp-col4 {	
	padding-top:0 !important;
	padding-bottom: 0 !important;
}
.form-control-sm {
	padding:0.1rem 0.2rem;
	margin-top:0;
}
.tipp-col6 {
	width: 14%
}

/*	.tipps-table th {font-size: 0.7rem;}*/
.tipps-table th.tipp-col4, .tipps-table th.tipp-col6 {font-size: 0.7rem;}

	.row_erg {
	display: block;
}
.col4_title_mobile {
	display: inline-block;
}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
	body {
		padding-top: 76px !important;
	}
	body:after{
		  content:"";
		  position:fixed; /* stretch a fixed position to the whole screen */
		  top:0;
		  height:100vh; /* fix for mobile browser address bar appearing disappearing */
		  left:0;
		  right:0;
		  z-index:-1; /* needed to keep in the background */
		  background: url("../images/bg1.jpg") center center;
		  -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}
	.tipps-table th.tipp-col6 {font-size: 0.8rem;}
	.wmtypo { font-size:2.6rem;
	 	padding-top:0px;
		margin-left:20px;
	}

}




/* tablets/desktops and up ----------- */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* large desktops and up ----------- */
@media screen and (min-width: 1200px) {
}


/* iPad Landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  {
 
	body {
		padding-top: 76px !important;
	}
	body:after{
		  content:"";
		  position:fixed; /* stretch a fixed position to the whole screen */
		  top:0;
		  height:100vh; /* fix for mobile browser address bar appearing disappearing */
		  left:0;
		  right:0;
		  z-index:-1; /* needed to keep in the background */
		  background: url("../images/bg1.jpg") center center;
		  -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}
	.tipps-table th.tipp-col6 {font-size: 0.8rem;}
	.wmtypo { font-size:1.5rem;
	 	padding-top:0px;
		margin-left:10px;
}
	.nav-item a {font-size:0.8rem;}
	
	}

@media only screen 
and (min-width: 414px) 
and (max-width: 736px) 
and (orientation : landscape) {
	.container {
		max-width: 720px;
	} 
}
@media only screen 
and (min-width: 414px) 
and (max-width: 667px) 
and (orientation : landscape) {
	.container {
		max-width: 660px;
	} 
}