﻿/* FONT */
@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-Regular.woff) format("woff"),
    url(../fonts/Montserrat-Regular.woff2) format("woff2"),
    url(../fonts/Montserrat-Regular.ttf) format("truetype"),
    url(../fonts/Montserrat-Regular.eot?#iefix) format("embedded-opentype");
}

/* ---------------- GLOBAL ---------------- */

:root {
  --light-grey-colour: #687079;
  --dark-grey-colour: #29323e;
  --white-colour: #fff;
  --light-grey-colour-link: #929caa;
  --light-blue-colour: #d1dae4;
  --gold-colour: #cdb072;
  --dark-gold-colour: #b28e41;
}

html {
  font-size: 10px;
}

body {
  font-family: Montserrat !important;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8em;
  background-color: var(--white-colour);
  background-image: none !important;
  color: var(--light-grey-colour);
}

a {
  color: var(--light-grey-colour-link) !important;
  transition: color 0.3s ease-out;
}

a:hover {
  color: var(--white-colour) !important;
  text-decoration: none;
}

a.actionButton {
  line-height: 40px;
  padding: 0px 29px;
}

.h1,
.h2,
.h3,
.h4,
.h5 {
  margin-bottom: 1.5rem !important;
}

.form-group {
  margin-bottom: 20px !important;
}

.form-control {
  padding: 0.275rem 0.75rem;
  height: calc(3.31rem + 2px);
}

.main {
  margin-bottom: 84px;
}

div.shadedbox .custom-control label {
  padding-left: 1rem;
}

#ctl00_UpdatePanel1 {
  z-index: 2;
  position: relative;
  margin-top: -70px;
}

#UpdatePanel1 {
  z-index: 2;
  position: relative;
  margin-top: -70px;
}

.header {
  min-height: 70px;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  display: table-cell;
  vertical-align: middle;
  background-color: var(--dark-grey-colour);
}

.headerLogo {
  max-width: 250px;
  margin-top: 7px;
  float: left;
  margin-left: calc((100% - 959px) / 2);
}

.sectiontext {
  line-height: 2.4rem !important;
  margin-bottom: 1.5rem;
}

.page {
  padding-top: 76px !important;
}

#VC-footer {
  position: absolute;
  left: 0;
  right: 0;
  background-image: none !important;
  box-shadow: none !important;
  text-align: center;
  border-top: var(--white-colour) 70px solid;
  margin-top: -50px;
  background-color: var(--dark-grey-colour);
  color: var(--white-colour);
}

form {
  background-color: var(--dark-grey-colour);
}

/* #VC-footer {
  box-shadow: 0 -180px 30px 0 rgba(0, 0, 0, 0.45) inset;
} */

.additionaldocuments-document-header {
  width: 250px;
}

.upperFooter {
  padding: 22px 0px !important;
}

.lowerFooter {
  padding: 22px 0px !important;
}

.upperFooter,
.lowerFooter {
  width: 100%;
  max-width: 930px;
  margin: auto;
  text-align: left;
}

.wrap {
  min-height: 0% !important;
  background-color: var(--white-colour);
}

#VC-footer a {
  color: var(--white-colour);
}

input.primaryActionButton,
a.primaryActionButton {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, var(--gold-colour)),
    color-stop(1, var(--gold-colour))
  );
  background: -moz-linear-gradient(
    center top,
    var(--gold-colour) 5%,
    var(--gold-colour) 100%
  );
  border-radius: 29px;
  background-color: var(--gold-colour);
  border: 1px solid var(--gold-colour);
  display: inline-block;
  color: var(--white-colour) !important;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  padding: 1rem 2.9rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

a.primaryActionButton:hover,
input[type="file"]:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, var(--dark-gold-colour)),
    color-stop(1, var(--dark-gold-colour))
  ) !important;
  background: -moz-linear-gradient(
    center top,
    var(--dark-gold-colour) 5%,
    var(--dark-gold-colour) 100%
  ) !important;
  background-color: var(--dark-gold-colour) !important;
  border: 1px solid var(--dark-gold-colour) !important;
  text-decoration: none;
}

a.primaryActionButton:focus,
input[type="file"]:focus {
  background-color: var(--gold-colour) !important;
}

.todo,
.next {
  background-color: var(--light-blue-colour) !important;
  color: var(--dark-grey-colour);
  border-color: var(--white-colour) !important;
}

.done {
  background-color: var(--dark-grey-colour);
  color: var(--white-colour);
  border-color: var(--white-colour);
}

.ui-widget-header.active {
  background-color: var(--gold-colour);
  color: var(--white-colour);
  border-color: var(--white-colour);
}

div.app-type-radiobox,
div.trust-type-radiobox,
div.channel-type-radiobox {
  background-color: var(--white-colour) !important;
  border-color: var(--light-blue-colour) !important;
}

div.app-type-radiobox:hover,
div.trust-type-radiobox:hover,
div.channel-type-radiobox:hover {
  border-color: #b5bdc7 !important;
}

div.app-type-radiobox label,
div.trust-type-radiobox label {
  padding-left: 0.7rem;
}

.custom-control-label::before,
.custom-control-label::after {
  top: 0.4rem;
  left: -1.5rem;
  width: 1.6rem;
  height: 1.6rem;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio
  .custom-control-input:disabled:checked
  ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gold-colour);
}

.leftmenu {
  background-color: var(--dark-grey-colour) !important;
}

.masterheadertext {
  color: var(--gold-colour) !important;
}

span#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl00_DeclarationPostambleLabel
  ul,
span#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl01_DeclarationPostambleLabel
  ul,
span#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl04_DeclarationPostambleLabel
  ul,
span#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl05_DeclarationPostambleLabel
  ul {
  padding-left: 3.3rem;
}

#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl01_DeclarationPostamblePanel
  ul
  a:hover,
#ctl00_MainContent_DownloadApplicationLinkPanel a:hover,
#ctl00_MainContent_EVSummaryGridView_ResultNoteLabel a:hover,
#ctl00_MainContent_EVSummaryGridView_EVSummaryGridView_ctl02_RequirementsTextLabel
  a:hover,
#ctl00_MainContent_CompletionPinPanel a:hover {
  color: var(--dark-grey-colour) !important;
}

div.actionButtonWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

div.buttonAlign {
  margin-left: 0px !important;
}

div.buttonbox {
  background-color: var(--white-colour);
  border-top-color: var(--white-colour);
}

@media screen and (max-width: 980px) {
  .headerLogo {
    margin-left: 26px;
  }
}

@media (max-width: 576px) {
  #VC-footer {
    margin-top: 0px !important;
  }

  div.buttonAlign {
    margin-top: -20px !important;
  }

  #MobileNavigation .buttonbox div.buttonAlign,
  #ctl00_UpdatePanel1 div.buttonAlign {
    margin-right: 0px !important;
  }

  .main {
    margin: 28px 14px 105px !important;
  }

  .actionButtonWrapper {
    padding: 10px 27px 15px !important;
  }

  .footerLinks ul {
    display: flex;
    flex-direction: column;
  }

  .footerLinks li + li:before {
    content: none;
  }

  .reviewpanelcontainer {
    margin-top: 80px;
  }

  div.buttonAlignLeft {
    margin: -16px 0px 0px 0px !important;
  }
}
