@charset "utf-8";





button {
	padding: 10px;
	margin: 5px;
	background-color: #f8f9fa; /* light gray */
	border: 1px solid #ccc;
  }
  .active {
	background-color: #007bff; /* Bootstrap blue */
	color: white;
	border: 3px solid #ccc;
  }


/* CSS Document */


.slidecontainer {
	width:100%;
	
  }
  
  .slider {
	-webkit-appearance: none;
	width:200px;
	height: 25px;
	background: #ffffff;
	outline: 1px solid white;
	opacity: 0.9;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 1rem;
  outline-offset: 0.125rem;
  }
  
  .slider:hover {
	opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 1rem;
	width: 1rem;
	background: goldenrod;
	outline: 0.5px solid black;
	cursor: pointer;
	border-radius: 0.5rem;
	
  }
  
  .slider::-moz-range-thumb {
	height: 1rem;
	width: 1rem;
	background: #04AA6D;
	cursor: pointer;
  }


/* main intro page */


.splashHead{
    font-size: 100px;
    color:goldenrod;
    /*padding-top:5%;*/
    padding-left: 5%;
    padding-right: 5%;
}

/* the rest */

select{
	width:200px;
	margin-bottom: 15px;
	border: 2px solid goldenrod;
	border-radius: 2px;
	
}

h1{
    font-size: 50px;
    color:goldenrod;
    /*padding-top:5%;*/
    padding-left: 5%;
    padding-right: 5%;
	margin:5px;
}
input {
    margin-bottom: 15px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
	text-align: left;
	width:200px;

	border: 2px solid goldenrod;
	border-radius: 2px;
	
}
h2{
    font-size: 40px;
    color:goldenrod;
    /*padding-top:5%;*/
    padding-left: 5%;
    padding-right: 5%;
	margin:5px;
}
h3{
    font-size: 22px;
    color:white;
	padding-left: 15%;
    padding-right: 15%;

	margin:10px;
}
p{
    font-size:18px;
    color:white;
    padding-left: 10%;
    padding-right: 10%;
	text-align: justify;
}

p2{
    font-size:16px;
    color:white;
    padding-left: 10%;
    padding-right: 10%;
	text-align: center;
}

texty{
    font-size:18px;
    color:white;
	padding-right: 5px;
	text-align: justify;
}



.linky{
    font-size:18px;
    color:white;
    padding-left: 10%;
    padding-right: 10%;
	text-align: justify;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: gray;

}

label{
    display: inline-block; /* or block, depending on your layout needs */
    color: white;
    font-size: 18px;
    padding-left: 10%;
    padding-right: 10%;
	padding-top: 5px;
}





.navDiv {
    max-width: 100%;
    /* width: 900px;*/
    /* height: 800px;  */
    /* margin: 100px; */
    /* padding: 50px;*/
    background-color:transparent;
    /*text-align: center;*/
	/*overflow:auto;*/
    /* box-shadow:0px 0px 50px 30px #aaaaaa ; */
    /* border-radius:50px; */
    /*margin: auto;*/
    /*padding-bottom: 3%;*/
    /*padding-top: 3%;*/
  }
  
 .divMain {
    max-width: 100%;
    width: 900px;
	min-height: 600px;
    /* height: 800px;  */
    /* margin: 100px; */
    /*padding: 50px;*/
    background-color: black;
    text-align: center;
    box-shadow:0px 0px 50px 30px #aaaaaa ;
	overflow:hidden;
    border-radius:10px;
    margin: auto;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
  }
  .butDef {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	margin:10px;
	
}
.butDef:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.butDef:active {
	position:relative;
	top:1px;
}


.butNext {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
	margin:10px;
}
.butNext:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}
.butNext:active {
	position:relative;
	top:1px;
}

.butPrev {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.butPrev:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.butPrev:active {
	position:relative;
	top:1px;
}

ul{
	color:white;
	font-size: 18px;
	text-align: justify;
	padding-left: 20%;
	padding-right: 20%;
}


table.customTable {
	width: 100%;

	background-color: #FFFFFF;
	border-collapse: collapse;
	border-width: 2px;
	border-color: #E0A526;
	border-style: solid;
	color: #000000;
	padding-left: 1%;
	padding-right: 1%;
  }
  
  table.customTable td, table.customTable th {
	border-width: 2px;
	border-color: #E0A526;
	border-style: solid;
	padding: 5px;
  }
  
  table.customTable thead {
	background-color: #E0A526;
  }
  
  input[type="number"] {
    width: 30%; /* Example: make the input field full width of its container */
    padding: 8px; /* Example: add some padding for better text visibility */
	margin-top: 10px;
    border: 1px solid #ccc; /* Example: define a border */
    border-radius: 4px; /* Example: add rounded corners */
}
input[type="text"] {
    width: 30%; /* Example: make the input field full width of its container */
    padding: 8px; /* Example: add some padding for better text visibility */
	margin-top: 10px;
    border: 1px solid #ccc; /* Example: define a border */
    border-radius: 4px; /* Example: add rounded corners */
}

select {
    width: 30%; /* Make the dropdown full width of its container */
    padding: 8px; /* Add some padding for better text visibility */
	margin-top: 10px;
    border: 1px solid #ccc; /* Define a border */
    border-radius: 4px; /* Add rounded corners */

    background: white; /* Background color */
    cursor: pointer; /* Change cursor to pointer to indicate it's selectable */
}