/* 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, georgia; font-size:12pt; margin:0; line-height:1.4; background-color:#ff9999;}
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:#4169E1; text-decoration:none; font-weight:bold;}  /* #4169E1 Royal Blue */
A:active {color:#4169E1; font-size:12pt; text-decoration:none;} 
A:visited {color:#4169E1; font-size:12pt; text-decoration:none;}
A:hover {color:red; font-size:12pt; text-decoration:none;}  /* font-weight:bold;} */
/* a[href$='.pdf']{ background-image: url('/images/pdf.png');} */

h1 {font-family:tahoma, verdana, georgia; font-size:14pt; font-weight:800; color:#000080;}
h2 {font-family:tahoma, verdana, georgia; font-size:12pt; line-height:150%; font-weight:800; color:#000080;}
h3 {font-family:tahoma, verdana, georgia; font-size:14pt; line-height:100%; font-weight:800;}
h4 {font-family:tahoma, verdana, georgia; font-size:14pt; color:black; margin-top:0; margin-bottom:0; font-weight:bold;}

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

/* .bgcolor {background-image: linear-gradient(#ff9999, #9999ff);}  /* {linear-gradient(red, yellow);} */
.bgcolor
{ background-color: rgba(255, 255, 153, 1);
  background: -webkit-linear-gradient(top, rgba(255, 153, 153, 1) 0%, rgba(255, 255, 153, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 153, 153, 1) 0%, rgba(255, 255, 153, 1) 100%);
}

*{box-sizing: border-box;}

/* Boxes */
.greybox {border: 1px groove grey; border-radius:8px;} 
.yellowbox {border: 2px groove yellow; border-radius:8px;}

/* 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;}

-webkit-box-sizing: border-box; /* Android = 2.3, iOS = 4 */
-moz-box-sizing: border-box; /* Firefox 1+ */
box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */