@import http://fonts.googleapis.com/css?family=Raleway;
@font-face {
    font-family: 'Gotham Pro';
    src: local('Gotham Pro Light'), local('Gotham-Pro-Light'),
        url('GothamPro-Light.woff2') format('woff2'),
        url('GothamPro-Light.woff') format('woff'),
        url('GothamPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

.password-container {
	position: relative;
}
.password-toggle {
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translateY(-50%);
	cursor: pointer;
}

/*the code was added below to balance the sizes of buttons and boxes in each page when a size is set for an object this takes away the padding ect so the size you want is what you get*/
* {
  box-sizing: border-box;
}

/*the code below resets the default formatting on buttons you must also add a cursor to this declaration*/
  button {
  all: unset;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

/*i changed the size of the background image and set it as a fixed background*/
body {
background-image: url("back.png");
background-repeat: no-repeat;
background-position: top;
background-color: #cccccc;
font: 11px "GothamPro-Light", Arial, sans-serif;
}

/*formats the table data and headers so not required in the PHP*/
td,th {
font-family: �GothamPro-Light�, Arial, sans-serif;
}

th{
  color: #364497;
}

td {
  color: #507CB9;
}

/*sets additional text styling*/
h1 {font-size:32px;
color:#384496;}

h2 {font-size:26px;
color:#384496;}

h3 {font-size:22px;
color:#384496;}

h4 {font-size:20px;
color:#384496;}

p {font-size:15;
color:#517CB8;}

a, i {
text-decoration:none;
color:#6495ed
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

/*this has been added to create adevide between the top and bottom of the document, it also allows us to float the navigation bar in the center of the page*/
#head_container{
display:inline-block;
width:100%;
}

#header_logo{
display:block;
margin: auto; 
width:50%;
height:90px;
/*padding:20px;*/
}

/*this is a box for each button to help to control its layout in the desktop and mobile orientation check the @media at the bottom for further setitngs*/
.nav {
float: left;
width: 32%;
}

.navb {
margin: auto;
width: 32%;
}

/*this fixes the height of the small logo in the top left of the page, check the @media at the bottom for further setitngs*/
#logosm {
height:60px;
}

/*added the container below to float the fonm in*/
#form-container {
padding:20px;
display:block;
width:95%;
margin:0 auto;
}

#form1-container {
padding:10px;
display:block;
width:97%;
margin:0 auto;
}

/*this was adde to uniformly format the heading in each of the pages*/
.heading{
width:90%;
margin:0 auto;
}


#main {
margin: auto;
width:260px;
font-family:GothamPro-Light;
}


hr {
border:0;
border-bottom:1px solid #ccc;
margin:10px -40px;
margin-bottom:30px;
}


#login, #feedback {
display:block;
background-color:#FEFFED;	
margin: auto;	
width:55%;
border-radius:10px;
font-family:GothamPro-Light;
border:2px solid #ccc;
}

#feedbackl {
background-color:#FEFFED;	
margin: auto;	
width:85%;
border-radius:10px;
font-family:GothamPro-Light;
border:2px solid #ccc;
}

#feedbackr {
    background-color: #FEFFED;  
    margin: auto;  
    width: 85%;
    border-radius: 10px;
    font-family: GothamPro-Light;
    border: 2px solid #ccc;
    max-height: 100px;  /* Adjust height for approximately 15 rows */
    overflow-y: auto;  /* Adds scrolling if content exceeds max-height */
}

.button {
background-color: #f1f1f1;
border: none;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
text-decoration: none;
height:59px;
width:246px;
transition-duration:0.3s;
}

.button:hover {
background-color: #5874DC;
}

.buttonpos{
width:300px;
margin: auto;
}

#review {
background-color:#FEFFED;	
margin: auto;	
width:55%;
border-radius:10px;
font-family:GothamPro-Light;
border:2px solid #ccc;
padding:10px 40px 25px;
margin-top:10px;
}

.formentry {
width: 90%;
margin: auto;
font-size: 18px;
}

/*------------------------------------*/
/*styling select lists*/
select {
  width: 100%;
  height: 45px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0;
  background-color: #a1348c;
  border: none;
  border-bottom: 2px solid #384496;
  color: white;
  padding: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px;
  margin-top:15px;
margin-bottom:15px;
border-radius:5px;
}
/* For IE <= 11 */
select::-ms-expand {
  display: none; 
}

select:hover,
select:focus {
  color: #384496;
  background-color: white;
  border-bottom-color: #DCDCDC;
}

/*------------------------------------*/



input[type=text],input[type=password] {
display: block;
width:100%;
padding: 12px 20px;
margin: 8px 0px 10px;
box-sizing: border-box;
border:1px solid #ccc;
font-size:15px;
font-family:GothamPro-Light;
}

input[type=submit] {
display:inline-block;  
width:100%;
background-color:#FFBC00;
color:#fff;
border:2px solid #FFCB00;
padding:20px;
font-size:22px;
cursor:pointer;
border-radius:5px;
margin:0 auto;
margin-top:15px;
margin-bottom:15px;
}



table {
width:100%;
border:0px;
overflow-x: auto;
overflow-y: auto;
}
table.wide-table {
  display:block;
}

/*table tr:nth-child(even){background-color: #FA9284;}*/

tr {
/*display: inline-block;
width:100%;*/
}

.td-6 {
font-size:12px;
  width:6%;
  text-align:left;

}

.td-7 {
  width:14%;
  text-align:left;
}

/*below styles the datepicker widget*/
#ui-datepicker-div {
  background-color: #fff;
}
.ui-datepicker-prev, .ui-datepicker-next{
  font-size:24px;
}
.ui-datepicker-next{
float:right;
}

span {
color:#E9228B;
}
/*--------------------------------------------*/
#profile {
padding:12px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7
}

#click {
/*float:centre;*/
padding:5px;
border:dashed 1px gray
}

#goback, #logout {
display:inline-block;
padding:0px;
border:solid 1px gray
}

/*the text on the bottons styled below*/


selecta {
width: 200px;
   padding: 5px;
   font-size: 20px;
   border: 1;
   border-radius: 0;
   height: 16px;
   -webkit-appearance: none;
   }

select1 {
   background: transparent;
   width: 268px;
   padding: 10px;
   font-size: 16px;
   line-height: 1;
   border: 1;
   border-radius: 0;
   height: 40px;
   -webkit-appearance: none;
   }

/*use the code below to style for mobile and tablet devices*/
@media only screen and (max-width: 600px) {
#login, #feedback, #feedbackl {
    display:block;
    width:90%;
  }

#header_logo{ 
  width:80%;
}

#logosm {
  margin:0 auto;
}

#logout, #goback{
  width:100%;
  display:block;
  float:none;
  margin:10px 0px 0px;
}

.nav {
display:block;
float:none;
width:100%;
}