@font-face {
  font-family: 'Tungsten';
  src: url('Tungsten-Semibold.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: 'Tungsten-Medium';
  src: url('Tungsten-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Vitesse-Light';
  src: url('Vitesse-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: 'VitesseSans-Thin';
  src: url('VitesseSans-Thin.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Vitesse-Black';
  src: url('Vitesse-Black.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: 'Vitesse-Medium';
  src: url('Vitesse-Medium.ttf')  format('woff2'); /* Safari, Android, iOS */
}
@font-face {
  font-family: "Roboto";
  src: url("roboto.ttf") format("truetype");
}
html{
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

#main {
  /*background-color: #FF6619; /* Black background color */
  font-family: 'Tungsten', sans-serif;
  /*font-family: 'Vitesse-Light', sans-serif;*/
  color: rgb(255, 255, 255);
  position: center;
  top: 0px;
  text-align: center;
  font-size: 30px;
  width: 100%;
  padding-bottom: 20px;
  margin-top: 10px;
}

#main2 {
  margin: auto;
  font-family: 'Tungsten', sans-serif;
  position: relative;
  color: #1a1a1a;
  top: 0px;
  text-align: center;
  font-size:  30px;
  width: 75%;
}
#cell_stats {
  margin: auto;
  font-family: 'Tungsten', sans-serif;
  position: relative;
  color: #1a1a1a;
  top: 0px;
  text-align: center;
  font-size:  30px;
  width: 75%;
}
#test3 {
  background-image:url('PI_Background04.png');
  font-family: 'Tungsten', sans-serif;
  color: #FFF;
  position: relative;
  top: 0px;
  text-align: center;
  font-size: 30px;
  margin-top: 20px;
  height: 95%;
  width: 50%;
  float: left;
  overflow: scroll;
  overflow: hidden; /* Hide scrollbars */
}

#test4 {
  background-image:url('PI_Background04.png');
  font-family: 'Tungsten', sans-serif;
  color: #FFF;
  position: relative;
  top: 0px;
  text-align: center;
  font-size: 30px;
  margin-top: 20px;
  height: 95%;
  width: 50%;
  overflow: scroll;
  overflow: hidden; /* Hide scrollbars */
}

#main3 {
  /*background-image:url('PI_Background03_blue_hd.png');*/
  background-image:url('PI_background_concrete.jpg');
  /*background-color: #FF6619; /* Black background color */
  font-family: 'Tungsten', sans-serif;
  /*font-family: 'Vitesse-Light', sans-serif;*/
  color: #FFF;
  position: center;
  top: 0px;
  text-align: center;
  font-size: 30px;
  width: 100%;
  padding-bottom: 20px;
  margin-top: 10px;
}
#secondary {
  margin: auto;
  font-family: 'Tungsten', sans-serif;
  position: relative;
  color: #696969;
  top: 0px;
  text-align: center;
  font-size:  50px;
  width: 75%;
}
#motdTxtBox {
  max-width: 600px;
  width: 600px;
}
#footer {
  /*background-color: #1a1a1a; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 2; /* Makes the navbar to appear on top*/
  padding-bottom: 12px;

}

#navbar {
  /*background-color: #1a1a1a; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  position: fixed; /* Make it stick/fixed */
  left:0px;
  top: 0px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 2; /* Makes the navbar to appear on top*/
  padding-bottom: 12px;

}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  /*text-decoration: none; */
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}


#login {
  font-size:  50px;
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  /*display: none;*/
  position: absolute; /* Make it stick/fixed */
  left: 10%;
  top: 40%; /* Hide the navbar 50 px outside of the top view */
  width: 80%; /* Full width */
  color: #FFFFFF;
  z-index: 3; /* Makes the navbar to appear on top*/
}
#login2 {
  font-size:  50px;
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  /*display: none;*/
  position: absolute; /* Make it stick/fixed */
  left: 10%;
  top: 30%; /* Hide the navbar 50 px outside of the top view */
  width: 80%; /* Full width */
  color: #FFFFFF;
  z-index: 3; /* Makes the navbar to appear on top*/
}


#team_create {
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  left: 25%; /**/
  display: none;
  position: fixed; /* Make it stick/fixed */
  top: -1000px; /* Hide the navbar 50 px outside of the top view */
  width: 50%; /* hald width */
  height: calc(100% - 50px);
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  color: #FFFFFF;
  z-index: 3; /* Makes the navbar to appear on top*/
  overflow-y: auto;
}



#group_create {
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  display: none;
  position: fixed; /* Make it stick/fixed */
  margin: auto;
  top: -1000px; /* Hide the navbar 50 px outside of the top view */
  left: 25%;
  height: calc(100% - 50px);
  width: 50%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  color: #FFFFFF;
  z-index: 3; /* Makes the navbar to appear on top*/
}

#team_score {
  /*background-color: #333; /* Black background color */
  overflow: scroll;
  display: none;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  background-image:url('PI_Iron_bg_light.png');
  left: 25%; /**/
  height: 100%;
  position: fixed; /* Make it stick/fixed */
  top: -1200px; /* Hide the navbar outside of the top view */
  width: 50%; /* half width */
  /*transition: top 0.3s; /* Transition effect when sliding down (and up) */
  color: #FFFFFF;
  z-index: 3; /* Makes the navbar to appear on top*/
}

/* Style the navbar links */
#team_create a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#team_create a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the navbar links */
#cell_configure{
  background-image:url('PI_Iron_bg_light.png');
  display: none;
  /*background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0px; /* Hide the navbar 50 px outside of the top view */
  right: -3000px; /* Hide the navbar 50 px outside of the top view */
  width: 30%; /* 30% width of screen */
  height: 100%; /* Full height */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 3; /* Makes the navbar to appear on top*/
}

#new_key {
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  display: none;
  left: 25%;
  position: fixed; /* Make it stick/fixed */
  top: -1000px; /* Hide the navbar 50 px outside of the top view */
  width: 50%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 3; /* Makes the navbar to appear on top*/
}

#alert_popup {
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  display: none;
  position: fixed; /* Make it stick/fixed */
  top: -1000px; /* Hide 50 px outside of the top view */
  left: 25%;
  color: #DDD;
  width: 50%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 3; /* Makes the navbar to appear on top*/
}
#dialog_popup {
  /*background-color: #333; /* Black background color */
  background-image:url('PI_Iron_bg_light.png');
  display: none;
  position: fixed; /* Make it stick/fixed */
  top: -1000px; /* Hide 50 px outside of the top view */
  left: 25%;
  color: #DDD;
  width: 50%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 3; /* Makes the navbar to appear on top*/
}
body {
  font-family: 'Vitesse-Medium', sans-serif;
  background-image:url('BG_Dive.png');
  background-repeat:repeat;
  background-size:100%;
  background-color: #000000;
  color: #000000;
  text-align: center;
  font-size: 50px;
}

img#logo {
    width:70%;
    position: absolute;
    top:10%;
    left:15%;
    z-index: 3;
}

img#logo-bot {
  width:60%;
  position: absolute;
  left:20%;
  bottom:30px;
  z-index: 3;
}

img#logo_text {
    width:8%;
    position: fixed;
    top:-35px;
    right:20px;
    z-index: 3;
}
h1 {
  font-family: "Tungsten-Medium", sans-serif;
  font-size: 100px;
  color:#FFF;
  /* color: #FF4019; */
  text-align: center;
  margin:0;
}

h2 {
  font-family: "Vitesse-Medium", sans-serif; 
  /* font-family: "Times New Roman", Times, serif; */
  /*font-family: "Verdana", Times, serif;*/
  font-weight: normal;
  font-size: 50px;
  color:#FFBB1A;
  /* color: #FF4019; */
  text-align: center;
  margin:0;
}

h3 {
  font-family: "Tungsten-Medium", sans-serif;
  font-size: 50px;
  color: #FF6619;
  text-align: left;
  width: 99%;
  margin:0;
  padding-left:50px;
}
h4 {
  /*font-family: "Times New Roman", Times, serif; */
  /*font-family: Verdana, serif;*/
  font-family: "Vitesse-Medium", sans-serif; 
  /* font-family: "Roboto"; */ 
  font-weight: normal;
  font-size: 50px;
  color: #FFBB1A;
  text-align: left;
  margin:0;
  text-size-adjust: 100%
}

table {
  border-collapse:collapse;
  border: none;
  background-color: #f7eedd;
  color: #ff4019;
  width: 100%;
  font-size: 70px;
}

th {
  height:50px;
  color: #a1005c;
  text-align: left;
  font-size: 16px;
  font-style: italic;
}

td {
  /*height:50px;*/
  border:  none;
  border-bottom:1px solid #a1005c;
  font-size: 16px;
  text-align: right;
}

p {
  margin:0;
  margin-top: 0px; /* Add a top margin */
  margin-bottom: 5px; /* Bottom margin */
  width: 100%; /* was 50% */
}

a {
  color:#FFBB1A;
  /*text-decoration: none;*/ 
} 

.button {
  font-family: "Vitesse-Medium", sans-serif;
  /*font-family: 'Tungsten-Medium', sans-serif;
  /* background-color: #FF6619; *//* Orange*/
  background-color: #000000; /* Orange*/
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.active {background-color: #FF6619;} /* Oranche */
.active:hover {background-color: #FF4019;}

.idle {background-color: #000000; } /* Blewck! */
.idle:hover {background-color: #FF4019;}

.special {background-color: #5e5e5e; } /* Blewck! */
.special:hover {background-color: #9e9e9e;}

.alert {background-color: #9E1A1A; } /* red! */
.alert:hover {background-color: #F00;}

.secondary {background-color: #000000; color: #FAE6B3; } /* white_brown! */
.secondary:hover {background-color: #222;}

.table_button {
  font-family: "Vitesse-Medium", sans-serif;
  border: none;
  background-color: #000000;
  color: white;
  padding: 7px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  font-family: "Vitesse-Medium", sans-serif;
  /*width: 450px; /* Full width */
  width: 100%; /* Full width */
  font-size: 60px;
  padding: 5px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 10px; /* Add a top margin */
  /*margin-bottom: 16px; /* Bottom margin */
  margin-bottom: 35px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  border-radius:8px;
}
/* Style inputs with type="text", select elements and textareas */
input[type=password], select, textarea {
  font-family: "Vitesse-Medium", sans-serif;
  width: 300px; /* Full width */
  font-size: 20px;
  padding: 5px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 0px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit] {
  /*font-family: "Verdana", sans-serif; */
  font-family: "Vitesse-Medium", sans-serif;
  font-weight: normal;
  /*font-family: 'Tungsten-Medium', sans-serif;
  /* background-color: #FF6619; *//* Orange*/
  background-color: #FFFFFF; /* Orange*/
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 50px;
  border-radius: 8px;
}
input[type=number] {
  font-family: "Vitesse-Medium", sans-serif;
  /*font-family: 'Tungsten-Medium', sans-serif;
  /* background-color: #FF6619; *//* Orange*/
  background-color: #000000; /* Orange*/
  border: none;
  color: white;
  /*padding: 15px 32px;*/
  text-align: center;
  text-decoration: none;
  /*display: inline-block;/**/
  font-size: 30px;
}
input[type=date] {
  font-family: "Vitesse-Medium", sans-serif;
  /*font-family: 'Tungsten-Medium', sans-serif;
  /* background-color: #FF6619; *//* Orange*/
  /*background-color: #000000; /* Orange*/
  border: none;
  color: black;
  /*padding: 15px 32px;*/
  text-align: center;
  text-decoration: none;
  /*display: inline-block;/**/
  font-size: 20px;
}
input[type=time] {
  font-family: "Vitesse-Medium", sans-serif;
  /*font-family: 'Tungsten-Medium', sans-serif;
  /* background-color: #FF6619; *//* Orange*/
  /*background-color: #000000; /* Orange*/
  border: none;
  color: black;
  /*padding: 15px 32px;*/
  text-align: center;
  text-decoration: none;
  /*display: inline-block;/**/
  font-size: 20px;
}
option { font-family: "Vitesse-Medium", sans-serif; }
select { font-family: "Vitesse-Medium", sans-serif; }

#teams {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;

}

#teams td, #teams th {
  border: 1px solid #ddd;
  padding: 4px;
  text-align: left;
  color: black;
  font-size: 15px;
}

#teams tr:nth-child(even){background-color: #f2f2f2;}
#teams tr:nth-child(odd){background-color: #FFF;}

#teams tr:hover {background-color: #FAE6B3;}

#teams th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #FF6619;
  color: white;
}

#groups {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#groups td, #groups th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  color: black;
}

#groups tr:nth-child(even){background-color: #f2f2f2;}
#groups tr:nth-child(odd){background-color: #FFF;}

#groups tr:hover {background-color: #FAE6B3;}

#groups th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #FF6619;
  color: white;
}

#teams_for_date {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#teams_for_date td, #teams_for_date th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  color: black;
}

#teams_for_date tr:nth-child(even){background-color: #f2f2f2;}
#teams_for_date tr:nth-child(odd){background-color: #FFF;}

#teams_for_date tr:hover {background-color: #FAE6B3;}

#teams_for_date th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #FF6619;
  color: white;
}

#table_team_score {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  left: 25%;
  margin: 0px auto;
}

#table_team_score td, #table_team_score th {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  color: black;
}

#table_team_score tr:nth-child(even){background-color: #f2f2f2;}
#table_team_score tr:nth-child(odd){background-color: #FFF;}

#table_team_score tr:hover {background-color: #FAE6B3;}

#table_team_score th {
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: left;
  background-color: #FF6619;
  color: white;
}