body {
background:#121212;
font-size: 15px;
color:white;
font-family:Roboto
}

a {
color:white	
}

a:hover {
	color:#ef7d1f
}


.bingo {
	margin-left: auto;
	margin-right: auto;
	display: table;
}  

.inner {
	background:#1d1d1d;
	padding:30px;
	border-radius:5px;
	width:856px;
}

h1 {
	font-family: Bebas Neue;
    font-size: 38px;
	margin: 0px;
    padding: 0px;
}

h2 {
	font-family: Bebas Neue;
    font-size: 24px;
	margin: 0px;
    padding: 0px;
	margin-top:20px;
	margin-bottom: 5px;
}

button {
	width: 100%;
    color: white;
    background: #ef7d1f;
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 15px;
    text-transform: uppercase;
	font-family: Bebas Neue;
    font-size: 24px;
}	

button:hover {
	background: #bc6320;
}

label {
	display: block;
    float: left;
    width: 220px;
}

#wordCount {
		float:right;
		font-size:12px
}

input {
background:#2a2a2a;
	color:white;
	border:1px solid white;
	height: 20px;
    text-align: right;
    border-radius: 5px;
}

.coordinate {
    font-size: 16px; /* Standardgröße für die Koordinaten */
	cursor: default;
	border:0px;
	color:#ef7d1f;
	font-family: Bebas Neue
}

.unten, .oben {
	height:15px
}

td.coordinate {
	width:15px
}

.coordinate:hover {
    background:none!important
}

textarea {
	background:#2a2a2a;
	color:white;
	resize: none;
	padding: 10px;
    border-radius: 5px;
	width: -webkit-fill-available;
	width: -moz-available;
}

.card {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
    margin-right: auto;
	border: 0px;
}

tr {
	height:164px
}	

td {
	width:123px
}

td:hover {
	background: #bc6320;
}	

.slider {
-webkit-appearance: none;
    appearance: none;
    background: #2a2a2a;
    height: 3px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
border-radius:10px;
  background: #ef7d1f; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #ef7d1f; /* Green background */
border-radius:10px;
  cursor: pointer; /* Cursor on hover */
}

.settings {
	margin-bottom:15px
}

[type="checkbox"] {
  z-index: 0;
  -webkit-appearance: none;
}

[type="checkbox"]::before {
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked::before {
  box-shadow: inset 0px 0px 0px 3px #1d1d1d;
  background-color: #ef7d1f;
}

input#showCoordinates {
border:none	
}	


.error-popup {
    display: <?php echo empty($error) ? 'none' : 'block'; ?>;
    position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: red;
            color: white!important;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
.error-popup button {
            margin-top: 10px;
            padding: 5px;
            background-color: white;
            border: none;
            cursor: pointer;
			color:black
        }