﻿/* -----------------------------------
   FONTS
----------------------------------- */
@font-face {
  font-family: 'Gazpacho';
  src: url('../Fonts/Gazpacho-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../Fonts/Aeonik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------
   ROOT VARIABLES
----------------------------------- */
:root {
  --font-primary: 'Aeonik', "Arial", sans-serif;

  /* Primary */
  --color-primary: #d7fd7d;
  --color-primary-dark: #009337;
  --color-primary-hover: #e7ffb3;

  /* Background variants */
  --color-primary-medium: #F1F1F1;
  --color-primary-light: #F0F7ED;

  /* Grayscale */
  --color-gray-mineshaft: #333;
  --color-gray-boulder: #757575;
  --color-gray-dusty: #949494;
  --color-gray-mercury: #e6e6e6;
  --color-gray-concrete: #f7f7f7;
  --color-gray-alabaster: #fafafa;

  /* Base */
  --color-white: #fff;
  --color-black: #000;

  /* Status colors */
  --color-signal-info: #0e1ede;
  --color-signal-info-light: #e4ecfd;
  --color-signal-success: #008528;
  --color-signal-success-light: #d6ebdc;
  --color-signal-warning: #ffba38;
  --color-signal-warning-light: #fcf4e4;
  --color-signal-danger: #be0707;
  --color-signal-danger-light: #f2cfcf;
}


/* -----------------------------------
   TYPOGRAPHY
----------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: 'Gazpacho', "Arial", sans-serif;
}


/* -----------------------------------
   BASE / BODY
----------------------------------- */
body {
  background: url(/Environments/DEV01/Images/External_background.jpeg) #f5f4f6 fixed;
  background-size: cover;
  background-position: center;

  /* Top stripe */
  border-top: 18px solid var(--color-primary);
}


/* -----------------------------------
   IMAGES
----------------------------------- */
.external-brand-img2 {
  max-width: 25%;
  max-height: 100%;
}


/* -----------------------------------
   LINKS
----------------------------------- */
a {
  color: var(--color-black);
  text-decoration: none;
}

a:focus,
a:active,
a:hover {
  color: var(--color-black);
  text-decoration: underline;
}


/* -----------------------------------
   BUTTONS
----------------------------------- */

/* PRIMARY */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle.disabled,
.show > .btn-primary.dropdown-toggle:disabled {
  color: #000;
}

.btn-primary:hover,
.btn-primary:focus,
.show > .btn-primary.dropdown-toggle:hover,
.show > .btn-primary.dropdown-toggle:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #000;
}


/* TERTIARY */
.btn-tertiary:not(:disabled):not(.disabled):active,
.btn-tertiary:not(:disabled):not(.disabled).active {
  color: #000;
}

.btn-tertiary:not(:disabled):not(.disabled):active:hover,
.btn-tertiary:not(:disabled):not(.disabled).active:hover {
  background-color: var(--color-primary-hover);
}