/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.center {
  text-align: center !important;
}
.left {
  text-align: left !important;
}
.right {
  text-align: right !important;
}
/* Colours*/
.BG1,
.BG12,
.BG23 {
  background: #EC5596;
  background: linear-gradient(49deg, #ec5596 0%, #ec5596 75%, #ffffff 100%);
}
.BG2,
.BG13,
.BG24 {
  background: #FFA500;
  background: linear-gradient(49deg, #ffa500 0%, #ffa500 75%, #ffffff 100%);
}
.BG3,
.BG14,
.BG25 {
  background: #8630E0;
  background: linear-gradient(49deg, #8630e0 0%, #8630e0 75%, #ffffff 100%);
}
.BG4,
.BG15,
.BG26 {
  background: #006875;
  background: linear-gradient(49deg, #006875 0%, #006875 75%, #ffffff 100%);
}
.BG5,
.BG16,
.BG27 {
  background: #12F2D9;
  background: linear-gradient(49deg, #12f2d9 0%, #12f2d9 75%, #ffffff 100%);
}
.BG6,
.BG17,
.BG28 {
  background: #7AB2E6;
  background: linear-gradient(49deg, #7ab2e6 0%, #7ab2e6 75%, #ffffff 100%);
}
.BG7,
.BG18,
.BG29 {
  background: #79413F;
  background: linear-gradient(49deg, #79413f 0%, #79413f 75%, #ffffff 100%);
}
.BG8,
.BG19,
.BG30 {
  background: #E71D1A;
  background: linear-gradient(49deg, #e71d1a 0%, #e71d1a 75%, #ffffff 100%);
}
.BG9,
.BG20,
.BG31 {
  background: #0DD381;
  background: linear-gradient(49deg, #0dd381 0%, #0dd381 75%, #ffffff 100%);
}
.BG10,
.BG21,
.BG32 {
  background: #E2BC7A;
  background: linear-gradient(49deg, #e2bc7a 0%, #e2bc7a 75%, #ffffff 100%);
}
.BG11,
.BG22,
.BG33 {
  background: #761966;
  background: linear-gradient(49deg, #761966 0%, #761966 75%, #ffffff 100%);
}
:root {
  --step--2: clamp(0.61rem, 0.74rem, 0.72rem);
  --step--1: clamp(0.73rem, 0.93rem, 0.9rem);
  --step-0: clamp(0.88rem, 1.17rem, 1.13rem);
  --step-1: clamp(1.05rem, 1.47rem, 1.41rem);
  --step-2: clamp(1.26rem, 1.85rem, 1.76rem);
  --step-3: clamp(1.51rem, 2.33rem, 2.2rem);
  --step-4: clamp(1.81rem, 2.92rem, 2.75rem);
  --step-5: clamp(2.18rem, 3.67rem, 3.43rem);
}
.skip-nav-link {
  position: absolute;
  left: 10px;
  transform: translateY(-150px);
  padding: 20px;
  border-radius: 0 0 20px 20px;
  transition: transform 325ms;
}
.skip-nav-link:focus {
  transform: translateY(60%);
}
.center {
  text-align: center !important;
}
.alignRight {
  text-align: right;
}
.greenBG {
  color: lightgreen;
}
.orangeBG {
  color: orange;
}
.redBG {
  color: red;
}
.whiteIcon,
.orangeIcon,
.redIcon,
.greenIcon {
  text-align: center;
}
.whiteIcon i {
  color: white;
}
.orangeIcon i {
  color: #ff6600;
}
.redIcon i {
  color: #ff0000;
}
.greenIcon i {
  color: #659b41;
}
html {
  background: url(images/bg.png) no-repeat bottom center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Montserrat Alternates", sans-serif;
  font-family: 'Roboto', cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 16px;
}
a {
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: green;
}
.signIn {
  width: 90%;
  margin: 0 auto;
}
.signIn fieldset {
  border: 4px dashed #0528f7;
  padding: 20px;
  border-radius: 20px;
}
.signIn label {
  font-size: clamp(1.5rem, 2.1vw, 2.5rem);
}
.signIn .formInput {
  border: 2px solid #1e60ac;
  border-radius: 10px;
  padding: 0 10px;
  font-size: clamp(2.5rem, 2.1vw, 4.5rem);
  background-color: #0528f7;
  width: 100%;
}
.signIn .button {
  font-size: clamp(1rem, 2.1vw, 2rem);
  width: 100%;
  background: #0000FF;
  background: -moz-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: -webkit-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: linear-gradient(to bottom, #0000FF 0%, #0E73E6 100%);
  border: 0;
  outline: 0;
  border-radius: 15px;
  padding: 20px 0;
  border: 2px solid #0E73E6;
  color: white;
}
.signIn .button:hover {
  color: red;
  border: 4px solid white;
}
@media screen and (min-width: 800px) {
  .signIn {
    width: 60%;
    margin: 0 auto;
  }
}
.heading {
  background: #0000FF;
  background: -moz-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: -webkit-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: linear-gradient(to bottom, #0000FF 0%, #0E73E6 100%);
}
.logo {
  font-size: clamp(3.5rem, 2.1vw, 6.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oleo Script Swash Caps', cursive;
}
.logo i {
  color: yellow;
}
.search {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 2.1vw, 4.5rem);
}
.search form {
  width: 90%;
  padding: 0 5%;
}
.search .formInput {
  border: 2px solid #1e60ac;
  border-radius: 40px;
  padding: 0 10px;
  font-size: clamp(2.5rem, 2.1vw, 4.5rem);
  background-color: #0528f7;
  width: 100%;
}
.time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
}
.time .icon {
  display: flex;
  align-items: center;
  justify-content: right;
}
.time .icon i {
  font-size: clamp(2.5rem, 2.1vw, 4.5rem);
  padding-right: 15px;
}
.time .dateTime {
  display: flex;
  align-items: center;
  justify-content: left;
}
.mainArea .left {
  font-size: clamp(1rem, 2.1vw, 1.4rem);
}
.mainArea .left .inner2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  line-height: 2;
}
.mainArea .left .inner2 div:nth-child(odd) {
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 15px;
}
.mainArea .left .inner2 div:nth-child(even) {
  display: flex;
  align-items: center;
  justify-content: left;
}
.mainArea .left .inner2 i {
  font-size: clamp(1rem, 2.1vw, 2rem);
}
.mainArea .left .line {
  width: 90%;
  margin: 0 auto;
  border-top: 2px solid white;
}
.mainArea .left .signOut {
  font-size: clamp(2.5rem, 2.1vw, 4.5rem);
  width: 80%;
  margin: 0 auto;
}
.mainArea .left .signOut button {
  font-size: clamp(1rem, 2.1vw, 2rem);
  width: 100%;
  background: #0000FF;
  background: -moz-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: -webkit-linear-gradient(top, #0000FF 0%, #0E73E6 100%);
  background: linear-gradient(to bottom, #0000FF 0%, #0E73E6 100%);
  border: 0;
  outline: 0;
  border-radius: 15px;
  padding: 20px 0;
  border: 2px solid #0E73E6;
}
.mainArea .right {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
}
.mainArea .headings {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: clamp(1rem, 2.1vw, 2rem);
  font-size: var(--step-1);
  line-height: 1.4;
  padding: 5px;
  border-radius: 15px 15px 0 0;
}
.mainArea .headings i {
  font-size: var(--step-3);
  padding: 5px;
}
.mainArea .grid-item {
  width: 260px;
  height: auto;
  float: left;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 5px;
  border-radius: 15px;
}
.mainArea .grid-item .list,
.mainArea .grid-item .count {
  border-bottom: 2px solid grey;
}
.mainArea .grid-item .count {
  text-align: right;
  margin: 0 10px;
}
.mainArea .grid-item a {
  color: white !important;
}
.mainArea .inner {
  display: grid;
  grid-template-columns: 4Fr 1fr;
  font-size: var(--step---1);
  line-height: var(--step-2);
  padding: 5px;
}
.mainArea .bottomIcons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: var(--step-2);
  padding: 5px 0;
}
@media screen and (min-width: 800px) {
  .heading {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
  }
  .mainArea {
    display: grid;
    grid-template-columns: 15% 80%;
  }
}