@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');


/* ********************************************************/
/*  Next section is to overide bootstraps defautl colours to be WVV
/* Change the default border color */
.border {
  border-color: var(--WVV-colour1) !important;
}
.content{
  position: relative;
}

/* ********************************************************/
/* SECTION ************************************************/
/* ********************************************************/
/* main page layout */
/*  header/ body/ footer  of every page */

html,
body {
  /*font-family: Quicksand; */
  font-family: Arial, Helvetica, sans-serif;
  margin: 0rem;
  padding: 0rem;
  font-size:  1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
.content {
  flex: 1;
}
footer {
  background-color: #f2f2f2;
  color: #4d4d4d;
  text-align: center;
  padding: 1rem 0;
  margin: 0 0 0 0;
  padding: 3px 0 5px 0;
}

.header
{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position:relative;
  text-align: center;

}
#toggle-btn{
  position:absolute;
  top:10px;
  left:10px;
}
#toggle-btn img{
  width: 33px;
}
#quick-nav{
  position:absolute;
  top:10px;
  left:60px;
}
.sidebar {
  position: absolute;
  top: 130px;
  width: 200px;
  left: -220px; /* Match sidebar width plus a bit to be  off-screen */
  background-color: #f0f0f0; /* Menu background */
  transition: left 0.3s linear; /* Smooth slide transition */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #330099;
  text-align: left;
  z-index: 100;
}
.sidebar-out {
  left: 0; /* Slide menu in when .menu-open class is present */
}
.menu-button
{
  width:9rem;
  box-shadow: 2px 3px 5px var(--WVV-colour1);
  position: relative;
}
.menu-button > i
{
  position: absolute;
  left: 6px;
}
.menu-button:hover
{
  width:9rem;
  box-shadow: 1px 2px 5px var(--WVV-colour2);
}
.menu-button:active
{
  width:9rem;
  box-shadow: -2px -1px 5px var(--WVV-colour1);
}
.sidebar a
{
  text-decoration: none;
  text-align: left;
}
/* SECTION  END

/* ********************************************************/
/* SECTION ************************************************/
/* ********************************************************/
/* Form controls */

fieldset {
  border: 1px solid #330099;
  border-radius: 10px;
  padding: 1rem 1rem 1rem 1rem;
  display: inline-block;
  text-align: left;
  align-items:start;  
}
legend{
  text-align: left;
}

button, input[type="submit"],input[type="button"] {
  background-color: #0059df;
  border: none;
  color: #dadada;  /*white;*/
  padding: 1px 10px 1px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition */
}
button:active, input[type="submit"]:active,input[type="button"]:active {
  /* Styles when button is pressed */
  box-shadow: inset 2px 1px 5px #00c5df; /* Inset shadow */
  transform: translate(1px, 1px); /* Slightly move the button down */
}
button:disabled, input[type="submit"]:disabled,input[type="button"]:disabled {
  /* Styles when button is pressed */
  background-color: #010711;
  color: rgb(124, 124, 124);
 }
 button:hover, input[type="submit"]:hover,input[type="button"]:hover {
  /* Styles when button is pressed */
  background-color: #007bdf;
 }

input[type="text"], input[type="number"],input[type="password"], textarea {
  width: 300px;
  padding: 0 5px 0 5px;
  border: 1px solid #330099;
  border-radius: 5px;
  background-color: #f8f8f8;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}
/* input[type="radio"]{ */
  /* appearance: none; Remove default appearance */
  /* -webkit-appearance: none; For Safari */
  /* -moz-appearance: none; For Firefox */
  /* width: 16px; */
  /* height: 16px; */
  /* border: 2px solid #ccc; */
  /* border-radius: 50%; */
  /* outline: none; */
  /* cursor: pointer; */
/* } */
/* input[type="radio"]:checked:before { */
  /* content: ""; */
  /* display: block; */
  /* width: 8px; */
  /* height: 8px; */
  /* background-color: #330099; */
  /* border-radius: 50%; */
  /* position: relative; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
/* } */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 25px 0 5px;
  border: 1px solid #330099;
  border-radius: 5px;
  background-color: #f8f8f8;
  font-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 12px;
}
input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 5px 0 5px;
  border: 1px solid #330099;
  border-radius: 5px;
  background-color: #f8f8f8;
  font-size: 16px;
}

select:focus {
  border-color: #007bff;
  outline: none;
}

/* ********************************************************/
/* SECTION ************************************************/
/* ********************************************************/
/*  Standard tags in main */
h1{
  color: var(--WVV-colour1);
/*  font-size: 1.8rem;  */
}
h2{
  color: var(--WVV-colour2);
/*  font-size: 1.5rem; */
}
h3{
  color: var(--WVV-colour3);
/*  font-size: 1.2rem; */
}
h4{
  color: var(--WVV-colour4);
/*  font-size: 1rem; */
}

p {
  margin: 0 0 0 0;
  
}
hr{
  background-color: var(--WVV-colour1);
  margin: 10px 20px 10px 20px;
}

/*  Table tags in main */
table{
  outline: 2px solid var(--WVV-colour1);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
}
thead{
  background-color: #dddddd;
  
} 
th
{
  border-bottom: 1px solid var(--WVV-colour1);
}
th{
  border: 0 0 1px 0;
  color: var(--WVV-colour1);
}
tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray for even rows */
}
td{
  color: #004dd2;
  border-bottom: 1px solid rgba(0, 197, 223, 0.25);
}
th, td
{
  padding: 1px 3px 1px 3px;  
} 

a:link,
a:visited {
  color: var(--WVV-colour1);
}

a:hover {
  color: #ad0082;
}
a[disabled] {
  pointer-events: none; /* Disable click events */
  color: rgb(161, 161, 161); /* Visually indicate disabled state */
  text-decoration: none;/*remove underline*/
}

/* SECTION ************************************************/
/*  Other Misc stuff */
.greyhover:hover {
  background-color: #e0e0e0; /* Light gray on hover */
}

.indexcard {
  /* Table used to represent what was a printed card */
  border-radius: 0px;
  outline: 2px solid black;
 
  /* put lined paper effect behind table   DOESNT WORK ATM */
  /* background-image: linear-gradient(to bottom, transparent 80%, rgba(182, 49, 49, 0.1) 1px, transparent auto);
  background-size: 100% 2px; 
  background-repeat: repeat-y; */
}
.indexcard th {
  /* Within a table used to represent what was a printed card */
  text-align: center;
  vertical-align: text-top;
  color: black;  
}
.indexcard td {
  /* Within a table used to represent what was a printed card */
  text-align: left;
  vertical-align: text-top;
  color: black;
}

.message-error
{
  color: var(--WVV-message-error-text);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
  border: 1px solid var(--WVV-message-error-border);
  border-radius: 9px;
  white-space: nowrap;
  background-color:var(--WVV-message-error-background);
}
.message-warning
{
  color: var(--WVV-message-warning-text);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
  border: 1px solid var(--WVV-message-warning-border);
  border-radius: 9px;
  white-space: nowrap;
  background-color:var(--WVV-message-warning-background);
}
.message-success
{
  color: var(--WVV-message-success-text);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
  border: 1px solid var(--WVV-message-success-border);
  border-radius: 9px;
  white-space: nowrap;
  background-color:var(--WVV-message-success-background);
}
.message-info
{
  color: var(--WVV-message-info-text);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: inline-block;
  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
  border: 1px solid var(--WVV-message-info-border);
  border-radius: 9px;
  white-space: nowrap;
  background-color: var(--WVV-message-info-background);
}
.bg_ragred {
  background-color: var(--WVV-ragred);
}
.bg_ragamber {
  background-color: var(--WVV-ragamber);
}
.bg_raggreen {
  background-color: var(--WVV-raggreen);
}
/*
.visually-hidden {

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  speak: normal;
}
*/



/* SECTION ************************************************/
/*  to make phosphor icons work */
.icon-link {
  display: inline-flex; /* Use flexbox for better alignment */
  align-items: center; /* Vertically align icon and text */
  text-decoration: none; /* Remove underline from link */
  color: #333; /* Set link color */
}

.icon-link i {
  /*font-size: 2em; /* Adjust icon size */
  margin-right: 5px; /* Add spacing between icon and text */
}

.icon-link span {
    vertical-align: middle; /*align text to middle of icon*/
}

/*  For tables created using div row/ col  */
.div-stripped .row:nth-child(odd) {
  background-color: #f2f2f2; /* Light gray for odd rows */
}

.div-stripped .row:nth-child(even) {
  background-color: #ffffff; /* White for even rows */
}