@charset "utf-8";
/* CSS Document */

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial,"sans-serif";
}

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

header {
	padding: 32px;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

footer {
	padding: 10px 10px;
	background-color: #cadde9;
}

body {
	margin-left: auto;
	margin-right: auto;
	width: 92%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	background: #d5e4ea;
}

.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 192px;
}

.style-glitch {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 140px;
}

.style-nav ul {
	list-style-type: none;
}

.style-nav ul li a {
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 8px;
}
 
.topnav {
  overflow: hidden;
  background-color: #609BD0;
  text-transform: uppercase;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4180B5;
  font-weight: bold;
  color: #000000;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: #000000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #8DB7DB;
  text-transform: uppercase;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.active {
  background-color: green;
  color: white;
}

.hide {
  display: none;
}
    
.hidemy:hover + .hide {
  display: block;
  color: red;
}

.sidebar {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #A7C6DA;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 10px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #908F8F;
  color: white;
}

div.content {
  margin-left: 250px;
  padding: 1px 16px;
}

div.contentlijst {
  margin-left: 25px;
  padding: 1px 16px;
}
div.contentsmal {
  margin-left: 50px;
  padding: 1px 16px;
}
div.lijstploegen {
  margin-left: 16px;
  padding: 16px;
}

div.factuurmaken {
	margin: auto;
	position: fixed; 
	top: 100px;
	left: 15px;
	width: 325px;
	bottom: 20px;
	border: 2px solid #020244;
}

div.factuurbewerken {
	margin: auto;
	padding: 10px;
	position: fixed; 
	top: 100px;
	left: 350px;
	width: 700px;
	bottom: 20px;
	border: 2px solid #020244;
}

div.factuurartikels {
	margin: auto;
	position: fixed; 
	top: 100px;
	left: 1060px;
	width: 525px;
	bottom: 20px;
	border: 2px solid #020244;
}

@media screen and (max-width: 375px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

@media screen and (max-width: 550px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
	.topnav a.icon {
    float: right;
    display: block;
  }
	.sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
	.sidebar a {float: left;}
	div.content {margin-left: 0;}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
	.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.right {
  float: right;
  padding: 10px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.Uitslagen {
	background-image: url("../Afbeeldingen/Uitslagen.jpg");
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #FFFFFF;
	text-align: center;
}

.Clubs {
	background-image: url("../Afbeeldingen/Clubs.png");
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Comite {
	background-image: url("../Afbeeldingen/Comite.png");
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Links {
	background-image: url("../Afbeeldingen/Links.png");
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Documenten {
	background-image: url("../Afbeeldingen/Documenten.png");
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Contact {
	background-image: url("../Afbeeldingen/Contact.png");
	background-size: 100% 100%;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.BasketVlaanderen {
	background-image: url("../Afbeeldingen/LogoBASKETVL.png");
	background-size: 100% 100%;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Bloso {
	background-image: url("../Afbeeldingen/LogoBLOSO.png");
	background-size: 100% 100%;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.Fros {
	background-image: url("../Afbeeldingen/LogoFROS.png");
	background-size: 100% 100%;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.VlaamseGemeenschap {
	background-image: url("../Afbeeldingen/LogoVlaamseGemeenschap.png");
	background-size: 100% 100%;
	padding: 20px 20px 50px 20px;
	color: #1400FF;
	text-align: center;
}

.VETROOD {
	font-weight: bold;
	color: #F00;
}

.Reglementen {
	background-size: 60% 60%;
	tab-size:16;
}

h1 {
	font-size: 57px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 60px;
}

h2 {
	font-size: 30px;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 23px;
	color: #06F;
}

h3 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 10px;
	color: #0044FF;
	text-align: center;
}

h4 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 20px;
	letter-spacing: 2px;
}

h5 {
	font-size: 12px;
	font-weight: 200;
	margin-bottom: 35px;
	text-align: right;
}

h6 {
	font-size: 30px;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 23px;
	color: #06F;
	text-align: center;
}






rood {
	color: #F00;
}

groen {
	color: #19BB00;
}

gewonnen {
	font-weight: bold;
}

groot {
	font-weight: bold;
	font-variant: small-caps;
	text-transform: uppercase;
}

klein {
	font-size: 12px;
	font-style: italic;
}

p {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 35px;
}

.button {
	border: 2px #FFFFFF solid;
	padding: 8px 30px;
	margin-left: auto;
    margin-right: auto;
	border-radius: 30px;
	color: white;
	box-shadow:0px 0px 10px 3px rgba(0,0,0,0.2);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;	
	cursor: pointer;
}
.button1 {
	border: 2px #1400FF solid;
	color: #1400FF;
}
.button2 {
	width: 100%; 
	height:35px;
	background-color: #4CAF50;
}





.button9 {
	width:50px;
	height:35px;
	color: red;}
.button10 {
	width:400px;
	height:35px;
	color: #1413EE;}

.button11 {
	width:400px;
	height:35px;
	background-color: #21FF05;}
.button12 {
	width:400px;
	height:35px;
	background-color: #00C0FF;}
.button13 {
	width:400px;
	height:35px;
	background-color: #0100FF;}
.button14 {
	width:400px;
	height:35px;
	background-color: #FB00FF;
	color: black;}
.button15 {
	width:400px;
	height:35px;
	background-color: #FC0006;}
.button16 {
	width:400px;
	height:35px;
	color: #0B0B0B;
	background-color: #FEFF09;}
.button17 {
	width:400px;
	height:35px;
	background-color: #0A5A00;}
.button18 {
	width:400px;
	height:35px;
	background-color: #0A66FE;}
.button19 {
	width:400px;
	height:35px;
	background-color: #6B00FE;}
.button20 {
	width:400px;
	height:35px;
	background-color: #D7005E;}
.button21 {
	width:400px;
	height:35px;
	background-color: #FC6B09;}
.button22 {
	width:400px;
	height:35px;
	background-color: #867B7B;}
.button23 {
	width:400px;
	height:35px;
	background-color: #0FC1BC;}
.button24 {
	width:400px;
	height:35px;
	background-color: #C444F0;}
.button25 {
	width:400px;
	height:35px;
	background-color: #E3A212;}


.info-box-tan {
	background-color: #b9a88e;
	color: #FFFFFF;
	padding: 30px 20px 60px;
	text-align: center;
}

.info-box-dark {
	background-color: #2D2D35;
	color: #FFFFFF;
	padding: 30px 20px 60px;
	text-align: center;
}

.footer-text {
	font-size: 13px;
	margin-bottom: 5px;
}

.col {
	width: 100%;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

/*Tablet View*/

@media (min-width: 768px){
	
	body {
		max-width: 778px;
	}
	
	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
		text-align: center;
	}
	
	h1 {
		font-size: 40px;
		margin-bottom: 90px;
	}
	
	h2 {
		margin-bottom: 16px;
	}
	
	.col-md-one-half {
		width: 50%;
	}
	
	.col {
		float: left;
		padding: 0px 7px 14px;
	}
}


/*Tabel opmaak*/

.spreadsheet {
    border: 1px solid #a6aac6;
}

.spreadsheet td, .spreadsheet th {
    border: 1px solid #a6aac6;
    border-collapse: collapse;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.spreadsheet caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: bottom;
}

.spreadsheet th {
    border: 1px solid #828282;
    background-color:#E0E0E0;
    font-weight: bold;
    text-align: center;
    padding:  0.2em;
}

.spreadsheet td {
    border: 1px solid #a6aac6;
    padding: 0.2em 0.4em;
}

.spreadsheet tbody tr:nth-child(2n) {
    background-color: #f0f8ff; /* Alice blue */
}
.spreadsheet tbody tr:nth-child(2n + 1) {
    background-color: #fff8e7; /* cosmic latte */
}


/*Desktop View*/

@media (min-width: 1024px){
	
	body {
		max-width: 1200px;
	}
	
	.style-logo {
		float: left;
	}
	
	.style-nav {
		float: right;
	}
	
	.col-lg-one-fourth {
		width: 25%;
	}
}


/*Tabel SPELERSLIJSTEN*/

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

.lijsten td, .lijsten th {
  border: 1px solid #ddd;
  padding: 8px;
}

.lijsten tr:nth-child(even){background-color: #f2f2f2;}

.lijsten tr:hover {background-color: #ddd;}

.lijsten th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.lijsten caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: top;
}

/*Tabel FACTUURLIJSTEN*/

.lijstenfactuur {
  table-layout:auto;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: smaller;
  border-collapse: collapse;
  padding: 5px;
  width: 100%;
  overflow-y: scroll;
}

.lijstenfactuur td, .lijstenfactuur th {
  border: 1px solid #ddd;
  padding: 4px;
}

.lijstenfactuur tr:nth-child(even){background-color: #f2f2f2;}

.lijstenfactuur tr:hover {background-color: #ddd;}

.lijstenfactuur th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.lijstenfactuur caption {
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    caption-side: top;
	padding:  0.2em 0 0.2em 0;
}

/*Tabel FACTUURARTIKEL*/

.lijstenfactuurartikel {
  margin: auto;
  display: inline-block;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: smaller;
  border-collapse: collapse;
  padding: 5px;
  width: 100%;
  overflow-y: scroll;
}

.lijstenfactuurartikel td, .lijstenfactuurartikel th {
  border: 1px solid #ddd;
  padding: 4px;
}

.lijstenfactuurartikel tr:nth-child(even){background-color: #f2f2f2;}

.lijstenfactuurartikel tr:hover {background-color: #ddd;}

.lijstenfactuurartikel th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.lijstenfactuurartikel caption {
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    caption-side: top;
	padding:  0.2em 0 0.2em 0;
}

/*Tabel KALENDER*/

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

.kalender tbody tr td:nth-last-child(-n + 2) {
    text-align: right;
}

.kalender td, .kalender th {
  border: 1px solid #ddd;
  padding: 3px;
}

.kalender tr:nth-child(even){background-color: #f2f2f2;}

.kalender tr:hover {background-color: #ddd;}

.kalender th {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: smaller;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.kalender caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: top;
}

/*Tabel RANGSCHIKKING*/

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

.rangschikking tbody tr td:nth-last-child(-n + 8) {
    text-align: right;
}

.rangschikking td, .kalender th {
  border: 1px solid #ddd;
  padding: 6px;
}

.rangschikking tr:nth-child(even){background-color: #f2f2f2;}

.rangschikking tr:hover {background-color: #ddd;}

.rangschikking th {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: smaller;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.rangschikking caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: top;
}

/*Tabel NEVENKLASSEMENT*/

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

.nevenklassement tbody tr td:nth-last-child(-n + 8) {
    text-align: center;
}

.nevenklassement td, .kalender th {
  border: 1px solid #ddd;
  padding: 6px;
}

.nevenklassement tr:nth-child(even){background-color: #f2f2f2;}

.nevenklassement tr:hover {background-color: #ddd;}

.nevenklassement th {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.nevenklassement caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: top;
}



/*Tabel DOCUMENT*/

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

.document tbody tr td:nth-last-child(-n + 8) {
    text-align: center;
}

.document td, .document th {
  border: 1px solid #ddd;
  padding: 6px;
}

.document tr:nth-child(even){background-color: #f2f2f2;}

.document tr:hover {background-color: #ddd;}

.document th {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.document caption {
    font-size: larger;
    font-weight: bold;
    background-color: #b0b0b0;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: top;
}

/*LOGIN FORM*/

.form-head {
    color: #191919;
    font-weight: normal;
    font-weight: 400;
    margin: 0;
    text-align: center;
    font-size: 1.8em;
}

.error-message {
    padding: 7px 10px;
    background: #fff1f2;
    border: #ffd5da 1px solid;
    color: #d6001c;
    border-radius: 4px;
    margin: 30px 10px 10px 10px;
}

.demo-table {
    background: #cadde9;
    border-spacing: initial;
    margin: 15px auto;
    word-break: break-word;
    table-layout: auto;
    line-height: 1.8em;
    color: #333;
    border-radius: 4px;
    padding: 30px;
    width: 450px;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.demo-tablebreed {
	background: #cadde9;
    border-spacing: initial;
    margin: 15px auto;
    word-break: break-word;
    table-layout: left;
    line-height: 1.8em;
    color: #333;
    border-radius: 4px;
    padding: 30px;
    width: 750px;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.demo-table .label {
    color: #888888;
}

.demo-table .field-column {
    padding: 15px 10px;
}

.demo-input-box {
    padding: 13px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 100%;
}

.demo-input-vak {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 100%;
}

.demo-input-vak-lid {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 150px;
}

.demo-input-vak-mini {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 35px;
}

.demo-input-vak-smal {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 125px;
}

.demo-input-vak-breed {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 250px;
}

.demo-input-vak-extrabreed {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 450px;
}

.demo-input-vak-score {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 50px;
}
.demo-input-vak-omschrijving {
    padding: 8px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 600px;
}



.btnLogin {
    padding: 13px;
    background-color: #5d9cec;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    border: #5791da 1px solid;
    font-size: 1.1em;
}

.btnLoginverplicht {
    padding: 13px;
    background-color: #EC5DD9;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 4px;
    width: 350px;
    border: #5791da 1px solid;
    font-size: 1.1em;
}

.response-text {
    max-width: 380px;
    font-size: 1.5em;
    text-align: center;
    background: #fff3de;
    padding: 42px;
    border-radius: 3px;
    border: #f5e9d4 1px solid;
    font-family: arial;
    line-height: 34px;
    margin: 15px auto;
}

.terms {
    margin-bottom: 5px;
}

.dashboard {
    background: #d2edd5;
    text-align: center;
    margin: 15px auto;
    line-height: 1.8em;
    color: #333;
    border-radius: 4px;
    padding: 30px;
    max-width: 400px;
    border: #c8e0cb 1px solid;
}
.error-info {
    color: #FF0000;
    margin-left: 10px;
}

.error p {
	color:#FF0000;
	font-size:20px;
	font-weight:bold;
	margin:50px;
	}

a.logout-button {
    color: #09f;
}

.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

.navtop {
	background-color: #2f3947;
	padding: 15px;
 	margin-top: 20px;
	text-align: center;
	height: 60px;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}
body.loggedin {
	background-color: #f3f4f7;
}
.content {
	width: 80%;
	margin: 0 auto;
    padding: 10px;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #d5e4ea;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

#showimg {background-color:grey;color:white;padding:2px;margin:5px;display:block;font-family:"Verdana";cursor:pointer;}
#showimg:hover {background-color:lightgrey;}
#showing:active {background-color:#1F1F1F;}

.image-container {
	border:2px solid black;
	padding: 10px;
	margin: 15px;
}

.image-container img {
	border:2px solid grey;
	padding: 10px;
	margin: 15px;
}

.image-box {
	border:2px solid black;
	padding: 5px;
	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;
}

.image-box img {
	padding: 5px;
	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;
}

#container {
    width: 100%;
    height: 2.5rem;
    font-family: Montserrat;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background: #000;
    color: #fff;
}
#container .scroll {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: fit-content;
    white-space: nowrap;
    animation: loop 30s linear infinite;
	position: fixed;
}

#container .scroll#scroll-two {
    transform: translateX(100%);
    animation-delay: 15s; 
}

.fade {
    width: 100%;
    position: absolute;
    background: linear-gradient(
        90deg,
        #000,
        transparent 30%,
        transparent 90%,
        #000
    );
    inset: 0;
    pointer-event: none;
}
@keyframes loop {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}
.item {
    display: flex;
    align-items: center;
    gap: 0 0.2rem;
    color: #e2e8f0;
    font-size: .9rem;
    background-color: #152c41;
    padding: 0.7rem 1rem;
    margin: 0rem 1rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    box-shadow:
    0 0.1rem 0.2rem #00000033,
    0 0.1rem 0.5rem #0000004d,
    0 0.2rem 01.5rem #00000066,
}