/* ------------------
 	DIV Styling
   ------------------   */
#wrapper {
width: 1024px;
margin: 0 auto;
text-align: left;
}

#content {
padding:10px; 
margin: 10px 0px 0px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #E7E7E7;
background-color:#ffffff;
}

#header { 
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #E7E7E7;
padding: 10px;
background-color:#ffffff;
}

#panel {
/* margin-right:10px; */
float:right;
}

#logo {
float:left;
with:185px;	
height:165px;
}

#navigation {
height:165px;	
position: relative;
width:75%;
}

#Account-Nav {
float:left;
width:180px;
height:400px;
}

#Account-Content {
/*height:400px;*/
float:left;
}

#your-profile {
/*height:400px;*/
}

#Profile-Validation {
height:auto;
width:550px;
/* position: absolute; */
}

#Login {
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 350px;
  height: 400px;
  border-radius: 5px;
  background: #87CEFA;
  /* border: 3px solid #73AD21; */
  padding: 10px;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.login-header {
	
  /* margin: auto; */
  width: 200px;
  height: 40px;
  border-radius: 5px;
  background: #45a049;
  /* border: 1px solid #73AD21; */
  text-align: center;
  position: absolute;
  top: -20px;
  right: 85px;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.login-form {
  margin: 50px 60px 20px 20px;
  /* margin-left: 20px; */
} 
.login-input {
  margin-top: 3px;
  margin-bottom: 15px;
}

.grid-container-2-columns {
  display: grid;
  grid-template-columns: 180px auto;
  grid-column-gap: 20px;
}

.grid-container-3-columns {
  display: grid;
  grid-column-gap: 10px;
  margin-bottom: 10px;
}

.form-split {
  grid-template-columns: 120px 220px 300px;
}

.validation-split {
 grid-template-columns: 80px 350px auto;
}

.vertical-nav {
  height:400px;
}

.label-align {
  padding: 13px 0;
}

.login-label {
 text-align: bottom;
 font-size: 16px;
}

input[type=text], input[type=password], input[type=email], input[type=date], select {
  /* width: 100%; */
  padding: 8px 5px;
  margin: 4px 0;
  /* display: inline-block; */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: auto;
  padding: 8px 10px;
  margin: 4px 0;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #4CAF50;	/* #ccc */
  outline: none;
}

input[type=checkbox], input[type=radio] {
  padding: 8px 5px;
  margin: 12px 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

input[type=submit]:hover {
  background-color: #45a049;
}

textarea {
  resize: none;
}

.hundred-pct {
 width: 100%;
}

/* ------------------
 	Content Styling
   ------------------   */

html {
overflow:scroll;	
font-family:Arial, Helvetica, sans-serif;	
font-size: 12px;
color:#666;
}

.euromillions {
	background-color:#000066;
    /* background:#005d9f; */
    /* background:-moz-linear-gradient(-45deg, #005d9f 0%, #1e7bba 100%); */
    /* background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #005d9f), color-stop(100%, #1e7bba)); */
    /* background:-webkit-linear-gradient(-45deg, #005d9f 0%, #1e7bba 100%); */
    /* background:-o-linear-gradient(-45deg, #005d9f 0%, #1e7bba 100%); */
    /* background:-ms-linear-gradient(-45deg, #005d9f 0%, #1e7bba 100%); */
    /* background:linear-gradient(135deg, #005d9f 0%, #1e7bba 100%); */
    /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d9f', endColorstr='#1e7bba', GradientType=1); */
}

h2
{
color:#ff0000;
margin:0px;
}

#panel li
{
list-style-type:none;
display:inline;	
padding: 0px 3px 0px 0px;
}

#Account-Nav ul {
/* margin:20px 0px 0px 0px; */
padding:0px;
}

#Account-Nav li {
list-style-type:none;
/* margin:5px 0px 0px 0px; */
/* padding:0px 0px 0px 10px; */
}

#navigation ul {
position:absolute;
bottom:0;
/* padding: 0px 0px 0px 185px; */
margin-left: 185px;
margin-bottom: 0;
padding: 0;
height: 40px;
background-color: #f1f1f1;
list-style-type:none;
overflow:hidden;
}

#navigation li {
 float:left;
}

#navigation li a {
/* list-style-type:none; */
display:block;
font-weight:bold;
padding: 10px 0;
font-size:16px;
color: #000;
width: 120px;
text-align: center;
text-decoration: none;
float:left;
}

#navigation li a.active {
  background-color: #00509d;		/* #004a99;  #04AA6D; */
  color: white; 
}

#navigation li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#login-nav ul {
/* position:absolute; */
bottom:0;
padding: 0px 0px 0px 0px;
}

#login-nav li {
list-style-type:none;
display:inline;
/* padding: 0px 10px 0px 0px; */
}

A:link {
color: #666; 
text-decoration: none;
}

A:visited {
color: #666; 
text-decoration: none;
}

A:hover {
color: #ff0000; 
text-decoration: none;
}

.textbaseline {
vertical-align:middle;
padding-right:10px;
}

.negative {
	color:red;
	text-align:right !important;
}

.positive {
	color:green;
	text-align:right !important;
}

.vertical-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 180px;
  background-color: #f1f1f1;
}

.vertical-nav li a {
  display: block;
  color: #000;
  padding: 8px 10px;
  text-decoration: none;
}

.vertical-nav li a.active {
  background-color: #00509d;		/*#004a99;  #04AA6D; */
  color: white;
}

.vertical-nav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* ------------------
 styling for the tables 
   ------------------   */
#Gewinnquote, #Tipps, #Tipps2, #Transactions, #members, #Wins {
width: 550px;
display: table;	
color:#666;
border-collapse: collapse;
}

#Transactions, #Wins, #members {
tr:nth-child(even) {background-color: #f2f2f2;}
}

#Gewinnquote th, #Tipps th, #Tipps2 th, #Transactions th, #Wins th {
font-size: 14px;
font-weight: normal;
border-bottom: 2px solid #666;
padding: 10px 8px;
}

#members th  {
font-size: 12px;
font-weight: normal;
border-bottom: 2px solid #666;
padding: 10px 8px;
}

#Tipps td, #Tipps2 td, #Gewinnquote td, #Transactions td, #Wins td {
border-bottom: 1px solid #ccc;
padding: 6px 8px;
text-align:center;
}

#members td {
border-bottom: 1px solid #ccc;
padding: 6px 8px;
text-align:left;
}

.search-form {
 width: 550px;
}

.ul_none {
  list-style-type: none;margin:0;padding:0;
}

.li_number {
  margin:3px;
  width:44px; 
  height:44px;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center;   */
  /* float:left; */
  /* text-align: center; */
}

.text-center {
  display: flex;
  justify-content: center;
  align-items: center;  
  float:left;
  text-align: center;
}

.msg-box {
	
  /* margin: auto; */
  width: 100%;
  height: 40px;
  border-radius: 3px;
  background: #ffe6e6;
  /* border: 1px solid #73AD21; */
  text-align: center;
}

.ball {
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  box-shadow: 0 3px 4px 0 rgba(177, 31, 31, 0.1);
  background-image: -webkit-radial-gradient(38% 30%, ellipse, #ffffff 0%, #ffffff 20%, #d0d0d0 90%);
  background-image: radial-gradient(  ellipse at 38% 30%, #ffffff 0%, #ffffff 20%, #d0d0d0 90%); 
}

.lucky {
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  background-image: -webkit-radial-gradient(38% 30%, ellipse, #f7d461 0%, #f7d461 20%, #c2970a 90%);
  background-image: radial-gradient(  ellipse at 38% 30%, #f7d461 0%, #f7d461 20%, #c2970a 90%); 
  color: #694409;
  margin-left: 20px;
}

.replay {
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  background-image: -webkit-radial-gradient(38% 30%, ellipse, #cc0000 0%, #cc0000 20%, #990000 90%);
  background-image: radial-gradient(  ellipse at 38% 30%, #cc0000 0%, #cc0000 20%, #990000 90%);
  color: #ffffff;
  margin-left: 20px;
}

.star {
  position: relative;
}

.star_number_middle {
  position:absolute;
}

.p_font {
  font-weight: bold;
  font-size: 14px;  
}

.tdright
{
text-align:right !important;
}

.tdleft
{
text-align:left !important;
}

.matched
{
/* background-color:#DDD9DC; */
background-color:#C6E0B4;
}

#dotted-left
{
	border-left:dotted thin;
}

#dotted-right
{
	border-right:dotted thin;
}
	
/* ------------------
 styling for DataTable
   ------------------   */
/*.dataTables_wrapper*/

#Tipps_wrapper, #Tipps2_wrapper, #members_wrapper, #Transactions_wrapper, #Wins_wrapper
{
width: 550px;
}

/*.dataTables_filter*/
#Tipps_filter, #Tipps2_filter, #members_filter, #Transactions_filter, #Wins_filter
{
float:right;
margin:0px 2px 0px 0px;
}

/*.dataTables_length */
#Tipps_length, #Tipps2_length, #members_length, #Transactions_length, #Wins_length

{
display:inline-block; 
}

/*.dataTables_info*/
#Tipps_info, #Tipps2_info, #members_info, #Transactions_info, #Wins_info
{
float:left;
margin: 10px 0px 10px 0px;
}

/*.dataTables_paginate */
#Tipps_paginate, #Tipps2_paginate, #members_paginate, #Transactions_paginate, #Wins_paginate 
{
float:right;
margin: 10px 0px 10px 0px;
}

 /*.paginate_disabled_previous, .paginate_enabled_previous */
#Tipps_previous, #Tipps2_previous, #Tipps_next, #Tipps2_next, #members_previous, #members_next, #Transactions_next, #Transactions_previous, #Wins_next, #Wins_previous
{
margin-right: 10px;
}

/* -------------------
   CSS spinning loader
   -------------------  */
   
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}