body {
  background-image: url("../img/main_background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

label.aligned {
  float: left;
  clear: left;
  width: 250px;
  height: 30px;
  text-align: right;
  margin-right: 10px
}

input.aligned {
  float: left;
  width: 250px;
  height: 30px;
}

.aligned-end {
  clear: both;
  float: left;
  display: block;
  position: relative;
}


div.wholePage {
  height: 98%;
  width: 99%;
  position: absolute;
  top:0;
	bottom: 0;
	left: 0;
	right: 0;
}

div.center {
  margin: auto;
  height: 150px;
  width: 50%;
  text-align: center;
  position: absolute;
  top:0;
	bottom: 0;
	left: 0;
	right: 0;
}

div.center-horizontal {
  margin: auto;
  width: 50%;
  text-align: center;
  top:0;
	bottom: 0;
	left: 0;
	right: 0;
}

div.wholePageScroll {
  width: 100%;
  min-height: 150px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: None;
}

p.center-horizontal {
  margin: auto;
  text-align: center;
}

textarea.wholePage {
  overflow-y: scroll;
  height: 300px;
  resize: none; /* Remove this if you want the user to resize the textarea */
}

ul.centered {
    text-align: center;
    list-style-position: inside;
}

ul.noBullet {
  list-style-type: none;
  list-style-position: inside;
  margin-left: 45%;
  padding: 0;
  text-align: left;
}

li.staff:before { content: '\1F46E';}
li.player:before { content: '\1F52B';}
li.group:before { content: '\1F22F';}

a.noDecoration:link {
  text-decoration: none;
  color: red;
}

a.noDecoration:visited {
  text-decoration: none;
  color: red;
}

a.noDecoration:hover {
  text-decoration: underline;
  color: red;
}

a.noDecoration:active {
  text-decoration: underline;
  color: red;
}

table.twoTableSelection {
  float: left;
  background-color: white;
  width: 40%;
  margin-left: 1%;
  margin-right: 1%;
}

table.TableMultiSwitcher {
  background-color: white;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  border: solid black;
}

table.TableMultiSwitcher tr th{
  border: solid black;
  width: 25%;
}

button.twoTableSelection {
  float: left;
  width: 6%;
  margin-left: 1%;
  margin-right: 1%;
}

input.twoTableSelectionLeft {
  width: 38%;
  margin-left: 1%;
  margin-right: 9%;
  margin-bottom: 2px;
}

input.twoTableSelectionRight {
  width: 38%;
  margin-left: 9%;
  margin-right: 1%;
  margin-bottom: 2px;
}

select.twoTableSelectionLeft {
  width: 39%;
  margin-left: 1%;
  margin-right: 9%;
  margin-bottom: 2px;
}

select.twoTableSelectionRight {
  width: 39%;
  margin-left: 9%;
  margin-right: 1%;
  margin-bottom: 2px;
}

tr.selected {
  background-color: red;
}

.title {
  font-family: 'bebas_neueregular', Arial, sans-serif;
  font-weight: bolder;
  font-style: normal;
  font-size: 300%;
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

.button {
  transition-duration: 0.4s;
  font-family: 'bebas_neueregular', Arial, sans-serif;
  font-size: 200%;
  background-color: red;
  border-radius: 8px;
  color: white;
  border: 2px solid red;
}

.button-sized {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
}

.onLeft {
  float: left;
  margin-right: 2px;
}

.button:hover {
  background-color: green; /* Green */
  color: white;
}

.button:disabled {
  background-color: grey; /* Green */
  color: white;
}

.button:disabled:hover {
  background-color: grey; /* Green */
  color: white;
}

.white {
  color: white;
}

.largetxt {
  font-family: 'bebas_neueregular', Arial, sans-serif;
  font-size: 200%;
}

.txt {
  font-family: 'bebas_neueregular', Arial, sans-serif;
}

.centered {
  text-align: center;
}

.lefted {
  text-align: left;
}

.red {
  color: red;
}

.nobottomspace {
  margin-bottom: 0;
  padding-bottom: 0;
}

.blackshadow {
  text-shadow: 0 0 3px black, 0 0 5px black;
}

.whitebg {
  background-color: #dce3df;
}

.loader {
  margin: auto;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #ff0000;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@font-face {
    font-family: 'bebas_neueregular';
    src: url('../font/bebasneue-regular-webfont.woff2') format('woff2'),
         url('./font/bebasneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
