/* There's no differences between a RGB and hex color (#). But with rgba (alpha) you can add a alpha variable it add a % opacity to your color */

html, body {width: auto !important; overflow-x: hidden !important} /* Stop lateral page movement on mobile */
body {font-family:Tahoma,Verdana; font-size:12pt; color:black; margin:0; padding:0;}
form {margin:0px 0px 0px 0px;}

.form-container {display: flex; justify-content: center; align-items: center;}  /* Centralise form fields */
.row-centered {text-align:center;}  /* centered columns styles */
.col-centered
{ display:inline-block;
  float:none;
  text-align:left;  /* reset the text-align */
  margin-right:-4px;  /* inline-block space fix */
}

A:link      {color: #3232CC; font-weight:800; text-decoration: none}  /* Medium Blue */
A:active  {color: blue; text-decoration: none}
A:visited {color: #800080 ; text-decoration: none} /* Purple */
A:hover  {color: #ff00ff;; text-decoration: none;} /* Magenta */

h1 {font-family:Tahoma,Verdana; font-size:12pt; font-weight:800; color:#000080; line-height:150%;}
h2 {font-family:Tahoma,Verdana; font-size:12pt; font-weight:800; color:#000000}
h3 {font-family:Tahoma,Verdana; font-size:10pt; font-weight:800; color:#000000}

li {margin-top: 0; margin-bottom: 0;}
ul {margin-top: 0; margin-bottom: 0;}

/* phpFiles/whUpload.php */
.ferror {font-family:Tahoma,Verdana; font-size:12pt; margin:0; color:red}
.fileok {font-family:Tahoma,Verdana; font-size:12pt; margin:0; color:blue}

/*  Boxes ; Box model - margin (transparent), border, padding, content */
/* Navy (16 SVG)	#000080; Harvest Gold #da9100 */
.navyBox {background-color:#00008B;}
.copperBox {background-color:#ff751a;} /* #e57106;} */

/* https://www.w3schools.com/howto/howto_css_column_cards.asp */
.row {margin: 0 -5px;}  /* Remove extra left and right margins, due to padding in columns */
.row:after {content: ''; display: table; clear: both;}  /* Clear floats after the columns */

/* Style the counter cards */
.divBox
{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  background:  #FFFEFA;    /* Floral White or background-color: #f1f1f1;} */
  border-radius:15px;
}

/* Float four columns side by side */
/* .column {float: left; width: 25%; padding: 0 10px;} */

/* Responsive columns */
/* @media screen and (max-width: 600px)
{.column {width: 100%; display: block; margin-bottom: 20px;} }
*/

*{box-sizing: border-box;}

/* Textwrap images;  margin(margin-top margin-right margin-bottom margin-left;) */
.TextWrapLeft {float:left; margin: 0 5px 5px 0;}
.TextWrapRight {float:right; margin: 0 5px 5px 0;}
.Circular {border-radius: 50%;}

/* https://www.bestcssbuttongenerator.com/#/14 */
/* Bottom margin is so buttons seperate on mobile screens */
.btn.btn-blue
{ box-shadow: 0px 1px 0px 0px #f0f7fa;
  background: linear-gradient(to bottom, #bbffff 5%, #019ad2 100%);
  background-color: #bbffff;   /* Turquoise */
  border-radius: 20px;
  border: 1px solid #057fd0;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: tahoma;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 15px;
  margin-bottom:10px;
  text-decoration: none;
  text-shadow: 0px -1px 0px #5b6178;
}
.btn.btn-blue:hover {background: linear-gradient(to bottom, #019ad2 5%, #bbffff 100%);}
.btn.btn-blue:active {position: relative; top:1px;}

.btn.btn-yellow
{ box-shadow: 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 20px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;  /* Gray 20 */
  font-family: tahoma;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 15px;
  margin-bottom:10px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}
.btn.btn-yellow:hover {background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);}
.btn.btn-yellow:active {position: relative; top:1px;}