@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

body {
	min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #17141d;
    color: white;
    font-family: 'DM Mono', monospace;
}

.headings {
	color: #fdc105;
	display: flex;
	justify-content: center;
}

.input_container {
	padding: 30px 30px;
	display: flex;
	justify-content: center;
}

.forms_container {
	display: flex;
	justify-content: around;
	align-items: center;
	flex-direction: column;
	padding: 75px 250px;
	color: #fff;
	background-image: url(/static/background/cool-background-trianglify.png);
	/* background: linear-gradient(to bottom right, red, yellow); */
	border: 0;
	transition: 0.2s;
	overflow: hidden;
}

.input_form {
	padding: 5px 5px;
	display: flex;
}

.upload_form {
	padding: 5px 5px;
	display: flex;
}

.btn-warning {
		position: relative;
		padding: 11px 16px;
		font-size: 15px;
		line-height: 1.5;
		border-radius: 3px;
		color: #000000;
		background-color: #ffc100;
		border: 0;
		transition: 0.2s;
	        opacity: 50;
		overflow: hidden;
	}

.btn-warning input[type="file"] {
	color: transparent;
		cursor: pointer;
		position: absolute;
		left: 0%;
		top: 0%;
		transform: scale(3);
		opacity: 50;
	        transition: 0.2s;
	}
.btn-warning:hover {
	background-color: #eed519;
	}

.submit-button {
		position: relative;
		padding: 11px 16px;
		font-size: 15px;
		line-height: 1.5;
		border-radius: 3px;
		color: #000000;
		background-color: #ffc100;
		border: 0;
		transition: 0.2s;
	        opacity: 50;
		overflow: hidden;
}

.submit-button:hover {
	background-color: #eed519;
}

.table-container {
	padding: 50px 50px;
	border-radius: 3px;
}

.errors-container {
	display: flex;
	justify-content: center;
	padding: 10px 10px;
	border-radius: 3px;

}

.results-table {
	padding: 50px 50px;
	border-radius: 3px;
}

#myTable {
	background-color: #fad253;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 14px;
}

#myTable th {
	background-color: #fad253;
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

/*#myTable tr.header,*/ #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #ec974f;
}

#myTable td[colspan] {
	padding-top: 0; padding-bottom: 0;
}

#myTable td[colspan] p {
	padding-top: 12px; padding-bottom: 12px;
}

/* TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST */


#data {
	background-color: #fad253;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 14px;
}

#data th {
	background-color: #fad253;
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#data tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

/*#myTable tr.header,*/ #data tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #ec974f;
}

#data td[colspan] {
	padding-top: 0; padding-bottom: 0;
}

#data td[colspan] p {
	padding-top: 12px; padding-bottom: 12px;
}