/* Font */
body {
	font-family: Segoe UI Semilight,sans-serif;
	font-size:0;
	margin:0;
	height:100vh;
	}

/* Navbar */
	h1 {
		font-family: Segoe Ui Semibold;
		font-size: 20px;
		color: white;
		padding: 4px 8px;
		margin: 0;
		text-align:center;  
		text-decoration: none;
		-webkit-user-select: none; /* Safari */        
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */
		user-select: none; /* Standard */
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #424242;
		text-align:center;
		box-shadow: 0px 0px 3px 3px grey;
	}

	li {
		float: right;
	}

	li a, .dropbtn {
		display: inline-block;
		font-family: Segoe UI Semibold;
		font-size: 16px;
		color: white;
		text-align: center;
		margin:0;
		padding: 8px 16px;
		text-decoration: none;
		-webkit-user-select: none; /* Safari */        
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */
		user-select: none; /* Standard */
	}

	li a:hover, .dropdown:hover .dropbtn {
		background-color: #FF4646;
	}

	li a.active {
		background-color: #45B537;
	}

	li a.active:after {
		content: '';
	}

/* Quiz */

	#title {
	font-family: Segoe Ui Semibold;	
	font-size: 48px;
	margin:8px;
	}

	#sub-title {
	font-size: 24px;
	margin:5px;
	}

	#answers {
	color: #3a3a3a;
	background-color: #bfbfbf;
	margin: 10px;
	padding: 4px 3px;
	text-align: center;
	text-decoration: none;
	border-radius: 10px 10px 10px 10px;
	box-shadow:2px 2px 7px #292929;
	z-index: 100;
	}

	.collapsible {
	background-color: #777;
	border-radius: 15px;
	font-family: Segoe Ui Semibold;
	color: white;
	cursor: pointer;
	padding: 8px;
	margin-top:4px;
	width: 100%;
	text-align: center;
	outline: 0;
	font-size: 24px;
	}

	#round1 {
	background-color: #45B537;
	color: #2a2a2a;
	}
	#round2 {
	background-color: #FF4646;
	color: #2a2a2a;
	}
	#round3 {
	background-color: #F8CD2E;
	color: #2a2a2a;
	}
	#round4 {
	background-color: #45B537;
	color: #2a2a2a;
	}
	#round5 {
	background-color: #FF4646;
	color: #2a2a2a;
	}
	#round6 {
	background-color: #F8CD2E;
	color: #2a2a2a;
	}
	#round7 {
	background-color: #45B537;
	color: #2a2a2a;
	}
		
	.active, .collapsible:hover {
	background-color: #555;
	}

	.name {
	text-align:center;	
	padding: 8px 0px;
	margin: 0;
	}

	#team_name {
	background-color: white;
	background-image: url('images/teamicon.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	transition: width 0.4s ease-in-out;
	}

	.content {
	width:99%;
	margin: 10px;
	text-align: center;
	display: none;
	overflow: hidden;
	}

	input[type=text], [type=number] {
	width:30%;
	min-width: 285px;
	font-size: 20px;
	text-align:center;
	padding: 8px 0px;
	margin:0;
	border: 3px solid #ccc;
	border-radius:10px 0px 0px 10px;
	}

	input { 
	-webkit-user-select:text;
	}

	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}

	/* Firefox */
	input[type=number] {
	  -moz-appearance: textfield;
	}
	  
	input[type=text],[type=number]:focus {
	border: 3px solid black;
	}

	input[type=submit] {
	background-color: black;
	color: white;
	font-size: 25px;
	text-align:center;
	padding: 3.9px 5px 8.5px 5px;
	border: none;
	border-radius:0px 10px 10px 0px;
	cursor:pointer;
	}


	#audio-container{
	width:99%;
	margin: 10px;
	text-align: center;
	}

	audio {
	width:80%;
	margin-top: 50px;
	text-align: center;
	-webkit-transition:all 0.5s linear;
	-moz-transition:all 0.5s linear;
	-o-transition:all 0.5s linear;
	transition:all 0.5s linear;
	-moz-box-shadow: 2px 2px 4px 0px #44bce4;
	-webkit-box-shadow:  2px 2px 4px 0px #44bce4 3;
	box-shadow: 2px 2px 4px 0px #006773;
	-moz-border-radius:7px 7px 7px 7px ;
	-webkit-border-radius:7px 7px 7px 7px ;
	border-radius:7px 7px 7px 7px ;
	}

	/* Leaderboard */
    table {
    border-collapse: collapse;
    width:100%;
    font-family:Segoe UI Semilight;
    font-size: 28px;
    text-align: center;
    }

    th {
    background-color: #424242;
    color: white;
    font-family: Segoe UI Semibold;
    font-size: 28px;
    padding:5px;
    border-bottom: 2px solid #535353;
    cursor:pointer;
    -webkit-user-select: none; /* Safari */        
	-moz-user-select: none;  /* Firefox */
	-ms-user-select: none;  /* IE10+/Edge */
	user-select: none; /* Standard */
    }

    tr {
    border-bottom:1px solid #adadad; 
    }

	tr:nth-child(2){
    background: #ffdb78;
	}

	tr:nth-child(3){
    background: #DBDBDB;
	}
	tr:nth-child(4){
    background: #F8CBAD;
	}

    tr:last-child { 
    background: #FF8F8F; 
    border-bottom:2px solid #535353; 
	}

	td {
	padding:5px;
	font-family: Segoe UI;
	}

	#results-title {
	background-color: #424242;
	color: #F8CD2E;
	font-family: Segoe UI Semibold;
	font-size: 36px;
	margin:0;
	text-align: center;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none;  /* Firefox */
	-ms-user-select: none;  /* IE10+/Edge */
	user-select: none; /* Standard */

	}
    .results-name {
    text-align:left;
    font-family: Segoe UI Semibold;
    padding-left: 8px;
    }
    .total {
    font-family: Segoe UI Semibold;
    font-size: 28px;
    border-left: 2px solid #535353;
    }

    #leaderboard.hide_bonus tr > *:nth-child(9) {
    display: none;
	}

	#leaderboard.hide_total tr > *:nth-child(12) {
    display: none;
	}

	#leaderboard.hide_rank tr > *:nth-child(13) {
    display: none;
	}