/* CSS Variables */
:root {
  /* Colour Palette */
  --of-font: 100% 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font size and family */
  --of-fontfamily: 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font family */
  --of-grey900: #1A2127; /* Grid header, ofParagraph text colour */
  --of-primary300: #537491; /*white at 28% opacity over --of-primary500 */
  --of-primary400: #335B7D; /*white at 14% opacity over --of-primary500 */
  --of-primary500: #134169; /*dsg header colour*/
  --of-secondary100: #DEEEF7;
  --of-secondary200: #1F8DC8; /* white at a 12% opacity over --of-secondary400 */
  --of-secondary300: #1487C5; /* white at a 8% opacity over --of-secondary400 */
  --of-secondary400: #007DC0;
  --of-secondary500: #006EA9;
  --of-accent100: #D9F2FF; /* Used for secondary button pressed/click animation */
  --of-accent300: #66CCFF;
  --of-accent400: #00AAFF;
  --of-white500: #FFFFFF;
}

/* Cookie Consent Styles */

.ofCookieBanner {
  font: var(--of-font);
  color: var(--of-grey900);
  font-size: 14px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: #543F99;
  z-index: 100000;
  overflow: auto;
  color: white;
}

  .ofCookieBanner .ofCookieHeader {
    margin-left: 11px;
    margin-right: 15px;
    margin-top: 15px;
  }

    .ofCookieBanner .ofCookieHeader .ofNotice {
      display: inline-flex;
      top: 0px;
      left: 0px;
    }

      .ofCookieBanner .ofCookieHeader .ofNotice .ofNoticeText {
        margin: auto 0px auto 5px;
        font-size: 22px;
        font-weight: 500;
      }

      .ofCookieBanner .ofCookieHeader .ofNotice .ofIcon {
        fill: white;
        width: 30px;
        height: 30px;
      }

    .ofCookieBanner .ofCookieHeader .ofClose {
      top: 0px;
      right: 15px;
      position: absolute;
      margin: 5px;
      margin-right: 0px;
      margin-top: 15px;
    }

      .ofCookieBanner .ofCookieHeader .ofClose .ofIcon {
        fill: white;
      }

  .ofCookieBanner .ofCookieContent {
    margin: 0px 15px 0px 15px;
  }

    .ofCookieBanner .ofCookieContent .ofText {
      margin: 15px 0px 15px 0px;
    }

      .ofCookieBanner .ofCookieContent .ofText .ofLink {
        color: white;
      }

        .ofCookieBanner .ofCookieContent .ofText .ofLink:visited {
          color: white;
        }

  .ofCookieBanner .ofCookieOptions {
    float: right;
    margin-right: 15px;
    margin-bottom: 25px;
    display: inline-flex;
  }


    .ofCookieBanner .ofCookieOptions .ofCookieAccept {
      border: 2px solid white !important;
      min-width: 150px !important;
      color: #543F99 !important;
      cursor: pointer;
    }

.ofMain_menu ~ .ofMain_appImperium .ofCookieBanner {
  left: 200px;
  width: calc(100% - 200px);
}

.ofMain_menu.ofMinMenu ~ .ofMain_appImperium .ofCookieBanner {
  width: calc(100% - 50px); /* Number is the width of the icon menu (.ofMinMenu) */
  left: 50px; /* Number is the width of the icon menu (.ofMinMenu) */
}

@media only screen and (max-width: 599px) {
  .ofMain_menu ~ .ofMain_appImperium .ofCookieBanner {
    width: 100% !important;
    left: 0px !important;
  }
}

/* General styles */
.ofHide:not(.ofShow) {
  display: none;
}

/* Button Styles */


/* Secondary Button styles Start */

.ofCookieBanner .ofCookieAccept.OfSecondaryButton {
  color: var(--of-primary500);
  background-color: var(--of-white500);
  border: 1px solid var(--of-primary300);
  box-shadow: none;
}

  .ofCookieBanner .ofCookieAccept.OfSecondaryButton:hover {
    background-color: var(--of-secondary100);
    border: 1px solid var(--of-primary500);
    color: var(--of-primary500);
    border: 2px solid var(--of-secondary100) !important;
  }

.ofCookieBanner input[type="button"].ofCookieAccept.OfSecondaryButton:focus {
  border: 1px solid var(--of-primary500);
  color: var(--of-primary500);
  background-color: var(--of-secondary100); /*Custom value because I don't know what this colour was before calculation of overlay*/
  border: 2px solid var(--of-secondary100) !important;
}

.ofCookieBanner input[type="button"].ofCookieAccept.OfSecondaryButton:focus,
.ofCookieBanner input[type="submit"].ofCookieAccept.OfSecondaryButton:focus,
.ofCookieBanner label[type="button"].ofCookieAccept.OfSecondaryButton:focus {
  cursor: pointer;
  animation: ofSecondaryButtonClick 0.15s linear;
}

@keyframes ofSecondaryButtonClick {
  10% {
    background: radial-gradient(circle, var(--of-accent100) 10%, var(--of-white500) 10%) center no-repeat;
  }

  20% {
    background: radial-gradient(circle, var(--of-accent100) 20%, var(--of-white500) 20%) center no-repeat;
  }

  30% {
    background: radial-gradient(circle, var(--of-accent100) 30%, var(--of-white500) 30%) center no-repeat;
  }

  40% {
    background: radial-gradient(circle, var(--of-accent100) 40%, var(--of-white500) 40%) center no-repeat;
  }

  50% {
    background: radial-gradient(circle, var(--of-accent100) 50%, var(--of-white500) 50%) center no-repeat;
  }

  60% {
    background: radial-gradient(circle, var(--of-accent100) 60%, var(--of-white500) 60%) center no-repeat;
  }

  70% {
    background: radial-gradient(circle, var(--of-accent100) 70%, var(--of-white500) 70%) center no-repeat;
  }

  80% {
    background: radial-gradient(circle, var(--of-accent100) 80%, var(--of-white500) 80%) center no-repeat;
  }

  90% {
    background: radial-gradient(circle, var(--of-accent100) 90%, var(--of-white500) 90%) center no-repeat;
  }

  100% {
    background: radial-gradient(circle, var(--of-accent100) 100%, var(--of-white500) 100%) center no-repeat;
  }
}

/* Secondary Button styles End */

.ofCookieBanner input[type="button"].ofCookieAccept.jqx-button-dsgarctic:hover, input[type="submit"].jqx-button-dsgarctic:hover, label[type="button"].jqx-button-dsgarctic:hover {
  background-color: var(--of-secondary300);
  cursor: pointer;
}

.ofCookieBanner input[type="button"].ofCookieAccept.jqx-button-dsgarctic:hover, input[type="submit"].jqx-button-dsgarctic:hover, label[type="button"].jqx-button-dsgarctic:hover {
  background-color: var(--of-secondary300);
  cursor: pointer;
}


.ofCookieBanner .ofCookieAccept {
  box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  padding: 0px 20px;
}

.ofCookieBanner input[type="button"].ofCookieAccept {
  font-size: 14px;
  font-weight: 500;
  padding: 7px 6px 6px 6px;
  border-width: 0;
  border-radius: 4px;
  border-color: var(--of-secondary400);
  color: #FFFFFF;
  letter-spacing: 1px;
  line-height: 19px;
  min-width: 100px;
  height: 36px;
  padding: 0px 20px;
  background-position: center;
  box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
}

.ofCookieBanner .ofCookieAccept {
  outline: none;
  border: 1px solid transparent;
  padding: 3px;
  text-align: center;
  vertical-align: central;
  margin: 0 0 0 0;
  cursor: default;
}

  .ofCookieBanner .ofCookieAccept:hover, .ofCookieAccept:focus {
    color: #333333;
    text-decoration: none;
  }

  .ofCookieBanner .ofCookieAccept:hover {
    /* text-shadow: 0 1px 0 rgb(240, 240, 240); */
    text-shadow: none;
    border-color: #b2b2b2;
    border-color: rgba(0, 0, 0, 0.3);
    color: black;
    background-color: #ffffff;
  }