﻿
:root {
   --default-accent-colour: #3f51a5;
   --default-background-colour: #fff;
   --primary-button-colour: var(--default-accent-colour);
   --primary-button-colour-hover: #5e6cbf;
   --primary-button-colour-active: var(--default-accent-colour);
   --primary-button-colour-disabled: #526ea2;
   --primary-button-colour-shadow: 0 0 2px 1px rgba(63, 81, 181, .5), 0 2px 6px 0 rgba(63, 81, 181, .5);
   --error-colour: #b60000;
   --input-shadow-colour: 0 2px 6px rgba(0,0,0,20%),0 2px 3px rgba(0,0,0,5%);
   --kendo-border-colour: #c6d0da;
}

body, input, textarea, button {
   font-weight: 400;
   font-family: 'Lato', Helvetica, Arial, sans-serif;
}

input, textarea {
   border-radius: 0.5rem;
   line-height: 1.42857143;
   padding: 6px 12px;
   outline: none;
   font-size: 14px;
}

   input:focus, textarea:focus {
      border: 1px solid var(--kendo-border-colour) !important;
      box-shadow: var(--input-shadow-colour) !important;
   }

   input:hover, textarea:hover {
      box-shadow: var(--input-shadow-colour) !important;
      transition: box-shadow .2s;
      outline: none;
   }

   input.input-validation-error, input.input-validation-error:focus, textarea.input-validation-error, textarea.input-validation-error:focus {
      border: 1px solid var(--error-colour) !important;
   }

.btn-primary {
   background-color: var(--primary-button-colour);
   border-radius: 2px;
   transition: background-color linear 0.1s;
}

   .btn-primary:hover, .btn-primary:focus {
      background-color: var(--primary-button-colour-hover) !important;
   }

   .btn-primary:active {
      background-color: var(--primary-button-colour-active) !important;
   }

   .btn-primary:disabled {
      background-color: var(--primary-button-colour-disabled);
   }

   .btn-primary:focus, .btn-primary:hover {
      box-shadow: var(--primary-button-colour-shadow) !important;
   }

.text-danger {
   color: var(--error-colour) !important;
   font-weight: 600;
}

.skip-to-main-content-link {
   position: absolute;
   top: 5px;
   left: 5px;
   padding: .375rem .75rem;
   z-index: -999;
   opacity: 0;
   margin: 5px;
   color: var(--default-accent-colour);
   background-color: var(--default-background-colour);
   border: 2px solid var(--default-accent-colour);
   text-decoration: none;
}

   .skip-to-main-content-link:focus-visible {
      z-index: 999;
      opacity: 1;
   }

.unsupported-browser {
   display: block;
   text-align: center;
   font-size: 1.5em;
}
