root {
	--primary-color: #2E3440;
	--secondary-color: #D8DEE9;
}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
@media only screen and (max-width: 1000px) { 
	/* For mobile phones: */ 
	table.center { 
		width: 90% !important; 
		border-radius: 30px !important;
		color: var(--secondary-color);
	} 
	.tableRow{
		border-radius: 30px !important;
	}

	#homeButton{
		max-width: 12% !important;
		margin-left: 8% !important;
		margin-right: 8% !important;

	}
	#kronosLogoBrov{
		width: 100% !important;
	}
	body{
	 	font-size: 200%; 
	} 
	#settingsPage{
		font-size: 75%;
	}
	.uploadButton{
		padding: 2% !important;
	}

	#settingsButton{
		max-width: 10% !important;
	}
	#timetableButton{
		max-width: 10% !important;
	}

	.centre1{
		margin-top: 5% !important;
		font-size: 55%;
	}
	.presetColors{
		padding: 1.5% 2.5% !important;
	}
	#timetableTd1{
		padding: 1% !important;
		max-width: 20% !important;
	}
	#startTimeTd{
		padding: 1% !important;
		max-width: 5% !important;
	}
}



body {
  font-family: 'Quicksand', sans-serif;
  font-size: 145%;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  text-align: center;
}
table.center {
	margin-left: auto; 
	margin-right: auto;
  	width: 40%;
	border-spacing: 0 15px;
	margin-top: 1%;
	color: var(--primary-color) !important;
}
.tableRow{
  outline: thick solid;
  border-radius: 5px !important;
  border-color: var(--secondary-color, #D8DEE9);
  text-align: left;
  background-color: var(--secondary-color, #D8DEE9);
}

table.center td{
  padding-top: 2%;
  padding-bottom: 2%;
  font-size: 125%;
}
#timetable{
  color: var(--secondary-color);
}

.smallFont{
  font-size: 70% !important;
  text-align: left !important;
  padding-left: 3% !important;
}
.smallColumn{
  width: 15%;
  text-align: center;
}
.alignRight{
  text-align: center;
  width: 7%;
  padding-left: 2% !important;
}
.headerText{
  color: var(--secondary-color, #D8DEE9);
  text-align: center;
}
#buttonText{
  color: var(--secondary-color, #D8DEE9);
  text-align: center;
}

table.centre {
  border-spacing:0.5em;
  width: 50%;
}

table.centre td{
  border: 2px solid;
  border-radius: 10px;
  padding: 0.5%;
  border-color: var(--secondary-color, #D8DEE9);
  text-align: center;
}

table.centre1 td{
  border: 2px solid;
  border-radius: 10px;
  padding: 0.5%;
  border-color: var(--secondary-color, #D8DEE9);
  text-align: left;
  vertical-align: top;
}
tr.topRow td{
  border: 0px solid;
}
td.firstCol {
  border: 0px solid;
}



/* top bar */
  /* Add a black background color to the top navigation */
  .topnav {
  overflow: hidden;
  zoom: 0.9;
  -moz-transform: scale(0.9);
  }

  /* Style the links inside the navigation bar */
  .topnav a {
  float: center;
  display: inline-block;
  color: var(--secondary-color, #D8DEE9);
  text-align: center;
  padding: 0.5% 2%;
  text-decoration: none;
  font-size: 175%;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
  background-color: var(--secondary-color, #D8DEE9);
  color: var(--primary-color, #D8DEE9);
  }

.UIButton{
  border-radius: 5px !important;
  border-color: var(--secondary-color, #D8DEE9);
  background-color: var(--secondary-color, #D8DEE9);
  font-family: 'Quicksand', sans-serif;

}

.uploadButton{
  outline: thin solid;
  color: var(--primary-color, #2E3440);
  padding: 0.75% 0.5%;
  font-size: 85%;
  text-align: center;
  border-radius: 5px !important;
  border-color: var(--secondary-color, #D8DEE9);
  background-color: var(--secondary-color, #D8DEE9);
  font-family: 'Quicksand', sans-serif;

}

.colorPicker{
  height: 1%;
}

.presetColors{
  padding: 0.75% 1%;
  font-size: 85%;
  text-align: center;
  border-radius: 7px !important;
  margin-left: 2%;

}


#HMS{
color: var(--secondary-color) !important;
font-size: 130%;
text-align: center;
margin: 0.5%;
} 

#KOH{
	color: var(--secondary-color) !important;
	font-size: 100%;
	text-align: center;
	margin: 0.5%;
} 

#bellTimesPage{
	  zoom: 0.95;
  -moz-transform: scale(0.95);

}

.feedback{
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}