.authentication_error {
    color: #ff0000;
    font-weight: bold;
}

.pre-wrap {
    white-space: pre-wrap;
}

/*https://stackoverflow.com/a/39845483/9294284*/
thead {
    display: table-row-group;
}

/** Next select2 selectors is because django-autocomplete-light uses select2
    and the spacing in choice / choicemultiple is wrong for Bootstrap4
    */
.introductory-message {
    padding: 20px;
    white-space: pre-wrap;
    background: #e1e1e1;
}

.select2-selection__choice {
    margin-top: 8px !important;
}

.select2-container .select2-selection--single {
    height: 45px !important;
    border: 1px solid #ced4da !important;
}

.select2-search__field {
    height: 40px !important;
}

.select2-container .select2-selection--multiple {
    height: auto !important;
    border: 1px solid #ced4da !important;
}

.select2-selection__arrow {
    height: 50px !important;
}

/** https://github.com/twbs/bootstrap/issues/23454 - to show form validation messages
    in date+time pickers
    */
.invalid-feedback {
    display: block;
}

/** For the form validation errors: crispy forms form uses:
    <div class="alert alert-block alert-danger"> with a <ul> inside
    Here we are deleting the margin around the ul so the space between the box and the text is the same
    before the text and after the text (browsers add spacing after </ul>)
    */
div.alert ul {
    margin: 0;
}

.selector-available > * {
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #ccc;
    color: #666;
    margin: 0;
    padding: 8px;
    text-align: left;
}

/** For the horizontal_filter: many2tomany in forms with the arrow and searcher*/
div.selector-available h2 {
    background: #f8f8f8;
    border-radius: 4px 4px 0 0;
}

div.selector-available select {
    border-radius: 0 0 4px 4px;
}

.selector-chosen > * {
    border: 1px solid #ccc;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 8px;
    text-align: left;

}

div.selector-chosen h2 {
    background: #79aec8;
    border-radius: 4px 4px 0 0;
    color: #666;
}

div.selector-chosen select {
    border-radius: 0 0 4px 4px;
    border-top: none;
}

div.selector-filter {
    border: 1px solid #ccc;
    border-top: none;
    border-width: 0 1px;
    color: #999;
    font-size: 10px;
    margin: 0;
    text-align: left;
}


/** Sidebar colors. For the navbar the default ones are used,
    for the side bar it needs to be specified */
/*.sidebar .nav-link {*/
/*  font-weight: 500;*/
/*  color: #007bff;*/
/*}*/
.newnavbar {
  background-color: #FFFFFF !important;
}
.newnavbar .nav-link, .newnavbar .navbar-text {
  color: #000000 !important;
}
.sidebar {
    padding: 0;
    height: 100vh;
}

.sidebar hr {
    margin: 0;
}

.sidebar .nav-link.active {
    color: #333;
}


/** Sadly Bootstrap4 doesn't have extra-small buttons. See:
    https://stackoverflow.com/a/50931961/9294284 from
    https://stackoverflow.com/questions/33911049/btn-xs-no-longer-a-valid-option-in-bootstrap-4
    */
.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .8;
    border-radius: .2rem;
}

.title {
    font-size: 1.5em;
}

.text-large {
    font-size: 120%;
}

/** This is for the Bootstrap accordion: to show/hide different text based on the state of the accordion */
[data-toggle="collapse"].collapsed .if-not-collapsed {
    display: none;
}

[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
    display: none;
}

/** Makes the breadcrumb thinner. The default one is from Bootstrap a bit too thick */
.breadcrumb {
    padding-top: 0;
    padding-bottom: 0;
}

/** The default Bootstrap breadcrumb separator is / , here it uses > */
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
}

.unstyled-button {
    border: none;
    padding: 0;
    background: none;
}

/** Forces Bootstrap4 tooltips to be in one line. Decided to do this way for the file name tooltips.
    In other situations it might not be desired, will need to adapt creating a new CSS class.
 */
.tooltip-inner {
    white-space: nowrap;
    max-width: none;
}

.due_date_passed {
    background-color: rgba(255, 0, 0, 0.2);
}

.negative_invoice {
    background-color: rgba(0, 255, 0, 0.2);
}

#smaller_text {
    font-size: 0.8em;
}

/**** From here... */
/* DAL bootstrap css fix */
.select2-container {
    width: 100% !important;
    min-width: 10em !important;
}

/* django-addanother bootstrap css fix */
.related-widget-wrapper {
    padding-right: 16px;
    position: relative;
}

.related-widget-wrapper-link {
    position: absolute;
    top: 3px;
    right: 0;
}

/*
We've commented the following lines because there weren't any problem with the height
and having them makes it to not be aligned correctly

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 100% !important;
}

.select2-container .select2-selection--single {
    height: 40px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 45px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    height: 100% !important;
}
*/

.select2-container .select2-selection--multiple .select2-selection__rendered {
    overflow: auto !important;
}

/**** ...to here
is from: https://github.com/yourlabs/django-autocomplete-light/issues/1149
 */

.highlighted-to-remove {
    /** If not having the !important the funding organisations
        in the zebra table in dark the highlight doesn't work.
     */
    background-color: #f8c5c5 !important;
}

.drop-placeholder {
    background-color: lightgray;
    height: 3.5em;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.2em;
}

.right-align {
    text-align: right;
    margin-right: 1em;
}
@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.container {
    max-width: 1390px;
}


.section-title {
  font-size: 34px;
  text-transform: uppercase;
}

.information-wrapper {
    padding: 50px 0 100px;
}

.information-wrapper .content-block {
  margin-top: 80px;
  border: 1px solid rgba(68, 68, 68, .20);
}

.information-wrapper .content-block--header {
  position: relative;
  border-bottom: 1px solid rgba(68, 68, 68, .20);
  padding: 30px 40px;
}

.information-wrapper .content-block--header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 5px;
  background-color: #CC2027;
}

.information-wrapper .content-block--header p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.information-wrapper .content-block--body {
  padding: 30px 40px;
}

.information-wrapper .content-block--body ul {
  padding: 0 0 0 20px;
  margin: 0;
}

.information-wrapper .content-block--body ul li + li {
  margin-top: 20px;
}

.application-form {
  padding: 80px 0;
  background-color: rgba(68, 68, 68, .05);
}

.step-wizard-wrapper {
  display: flex;
  gap: 100px;
}

.progressbar-wrapper {
  flex: 0 0 300px;
  max-width: 300px;
}

.progressbar-wrapper .btn-save-draft-wrapper {
  margin: 40px 0 0 35px;
}

.progressbar {
  user-select: none;
}

.progressbar .step,
.top-wizard-wrapper .step {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: rgba(68, 68, 68, .6);
  transition: color .3s ease-in-out;
}

.top-wizard-wrapper .step {
    font-size: 14px;
}

.progressbar .step:not(:first-child) {
  margin-block-start: 25px;
}

.progressbar .step .bullet {
  position: relative;
  width: 24px;
  height: 24px;
  margin-inline-end: 10px;
  transition: border .3s ease-in-out;
}

.progressbar .step .bullet::before {
  content: "";
  position: absolute;
  top: 1px;
  font-size: 24px;
  line-height: 1;
}

.progressbar .step.active {
    color: #000000;
}

.progressbar .step.valid,.progressbar .step.budgetvalid {
  color: #3EC27B;
}

.progressbar .step.valid .bullet::before,.progressbar .step.budgetvalid .bullet::before {
  content: "\2713";
  color: #3EC27B;
}

.progressbar .step.invalid, .progressbar .step.budgetinvalid {
  color: #ff0000;
}

.progressbar .step.invalid .bullet::before,.progressbar .step.budgetinvalid .bullet::before {
  content: "\292C";
  color: #ff0000;
}

.form-wrapper {
  flex-grow: 1;
}

.form-wrapper .form-group {
  margin-bottom: 25px;
}

.form-wrapper fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.form-wrapper fieldset:not(:first-of-type) {
  display: none;
}

.step-wizard-wrapper .action-btn {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.step-wizard-wrapper .btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 50px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.step-wizard-wrapper .btn.disabled {
  pointer-events: none;
  background-color: #D9D9D9;
  border-color: transparent;
  color: #444;
  opacity: .5;
}

.step-wizard-wrapper .btn-primary,
.step-wizard-wrapper .btn-primary:active{
  background-color: #CC2027 !important;
  border-color: #CC2027 !important;
  color: #fff !important;
}

.step-wizard-wrapper .btn-outline-primary {
  background-color: transparent;
  border-color: #CC2027;
  color: #CC2027;
}

.step-wizard-wrapper .btn-outline-primary:active {
    color: #CC2027 !important;
    border-color: #CC2027 !important;
    background-color: transparent !important;
}

.step-wizard-wrapper .btn-light {
  background-color: transparent;
  border-color: rgba(68, 68, 68, .26);
  color: #444;
}

/* Top wizard */
.top-wizard-wrapper {
  display: flex;
  margin-bottom: 60px;
}

.top-wizard-wrapper::after {
  clear: both;
  content: "";
  display: table;
}

.top-wizard-wrapper .step {
  position: relative;
  /*flex: 0 20%;*/
  margin: 4px 4px 4px 0;
}

.top-wizard-wrapper .step.finished>*,
.top-wizard-wrapper .step.active>* {
  background-color: #CC2027;
  border-color: #CC2027;
  color: #fff;
}

.top-wizard-wrapper .step>* {
  background-color: #edeff0;
  border-color: #edeff0;
}

.top-wizard-wrapper .step:last-of-type {
  margin-right: 0;
}

.top-wizard-wrapper .step > span:not(.arrow) {
  position: relative;
  padding: 10px 20px 10px 30px;
  width: 100%;
  display: block;
}

.top-wizard-wrapper .step::after,
.top-wizard-wrapper .step>*::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  height: 0;
  width: 0;
  border: 21px solid transparent;
  border-right-width: 0;
  border-left-width: 12px;
}

.top-wizard-wrapper .step::after {
  z-index: 1;
  transform: translateX(4px);
  border-left-color: #fff;
  margin: 0;
}

.top-wizard-wrapper .step>*::after {
  z-index: 2;
  border-left-color: inherit;
}

.top-wizard-wrapper .step:last-of-type::after,
.top-wizard-wrapper .step:last-of-type>*::after {
  display: none;
}

@-moz-document url-prefix() {
  .top-wizard-wrapper .step::after,
  .top-wizard-wrapper .step>*::after {
    border-left-style: dashed;
  }
}

.logo-wrapper {
    display: inline-flex;
}

.is-invalid,
.is-invalid ~ .select2-container .custom-select{
    border-color: red !important;
    color: red;
    font-size: 14px;
    line-height: 1;
}
.cursor-pointer {cursor: pointer;}

.information-wrapper .section-title {
    margin-bottom: 15px;
}

.information-wrapper p {
    letter-spacing: 0.5px;
    line-height: 1.7;
}
.hero {
  position: relative;
  padding: 120px 0;
}

.hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  z-index: 1;
  background: linear-gradient(90deg, #CC2027 0%, rgba(102, 16, 20, 0) 100%);
}


.hero .hero--img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hero .hero--img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero .hero--content {
  position: relative;
  max-width: 50%;
  color: #fff;
  z-index: 2;
}

.hero .hero--content h1 {
  font-size: 50px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.hero .hero--content p {
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}
.hero .legendimg {
  position: absolute;
  bottom: 10px;
  right: 15px;
  color: #FFF;
  font-size: 12px;
}
.choose-option {
  padding: 50px 0 100px;
  background-color: #f6f6f6;
}
.choose-option.extend {
  padding: 50px 0 100vh;
  background-color: #f6f6f6;
}
.choose-option .choose-options--wrapper {
  display: grid;
  gap: 20px;
  max-width: 50%;
}

.choose-option .card--options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background-color: #fff;
  padding: 45px 50px;
  border-radius: 6px;
  box-shadow: 0px 6px 40px 0px #00000008;
  transition: all .3s ease;
  cursor: pointer;
}

.choose-option .card--options:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  transform: translateY(-2px);
}

.choose-option .card--options .card--options--left .subtitle {
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(68, 68, 68, .7);
  margin-bottom: 10px;
}

.choose-option .card--options .card--options--left h3 {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  color: #444444;
}

.choose-option .card--options .card--options--right {
  flex-shrink: 0;
}

.choose-option .card--options .btn {
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  padding: 13px 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all .3s ease-in;
}

.choose-option .card--options .btn-icon img {
  width: 18px;
}

.choose-option .card--options .btn.btn-primary {
  color: #fff;
  border-color: #CC2027;
  background-color: #CC2027;
}

.choose-option .card--options .btn.btn-primary:hover {
  color: #CC2027;
  background-color: transparent;
}

.site-footer {
    background-color: #CC2027;
    color: #0c0c0c;
    text-align: center;
    padding: 30px 0;
}

.site-footer p {
    margin: 0;
    color: #ffffff;
}

.authentication {
  padding: 50px 0 100px;
  background-color: #f6f6f6;
}

.card-authentication {
  padding: 65px 50px;
  max-width: 585px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 6px 40px 0px #00000008;
}

.card-authentication .alert {
  margin: 30px 0 10px;
  padding: 15px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.4;
}

.card-authentication .alert.alert-danger {
  background-color: rgba(204, 32, 39, .05);
  color: #CC2027;
}

.card-authentication h1 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #444444;
}

.card-authentication p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4;
  color: #444444;
}

.authentication .divider {
  margin: 35px 0;
  border-top: 1px solid rgba(68, 68, 68, .16);
}

.authentication .btn {
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  padding: 13px 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all .3s ease-in;
}

.authentication .btn.btn-primary {
  color: #fff;
  border-color: #CC2027;
  background-color: #CC2027;
}

.authentication .btn.btn-primary:hover {
  color: #CC2027;
  background-color: transparent;
}

.form-fields-container {
  margin-top: 30px;
}

::-webkit-input-placeholder {
  color: #666769;
  font-size: 1.2rem;
  letter-spacing: .6px;
}

::-moz-placeholder {
  color: #666769;
  font-size: 1.2rem;
  letter-spacing: .6px;
}

:-ms-input-placeholder {
  color: #666769;
  font-size: 1.2rem;
  letter-spacing: .6px;
}

:-moz-placeholder {
  color: #666769;
  font-size: 1.2rem;
  letter-spacing: .6px;
}

.floating-label {
  position: relative;
  margin-bottom: 20px;
}

.floating-label input::-webkit-input-placeholder {
  color: rgba(0,0,0,0);
}

.floating-label input::-moz-placeholder {
  color: rgba(0,0,0,0);
}

.floating-label input::-ms-input-placeholder {
  color: rgba(0,0,0,0);
}

.floating-label input::placeholder {
  color: rgba(0,0,0,0);
}

.floating-label input {
  font-size: 16px;
  padding: 20px;
  width: 100%;
  height: 57px;
  color: #444444;
  border-radius: 4px;
  background-color: #F1F1F1;
  border: 1px solid transparent;
}

.floating-label input:focus {
  outline: none;
  padding-top: 15px;
  padding-bottom: 5px;
  border-color: rgba(0,0,0,0.5);
}

.floating-label input:focus~label {
  transform: scale(0.7) translateX(8px) translateY(-0.6rem);
}

.floating-label input:not(:-moz-placeholder-shown) {
  padding-top: 15px;
  padding-bottom: 5px;
}

.floating-label input:not(:-ms-input-placeholder) {
  padding-top: 15px;
  padding-bottom: 5px;
}

.floating-label input:not(:placeholder-shown) {
  padding-top: 15px;
  padding-bottom: 5px;
}

.floating-label input:not(:-moz-placeholder-shown)~label {
  transform: scale(0.7) translateX(8px) translateY(-0.6rem);
}

.floating-label input:not(:-ms-input-placeholder)~label {
  transform: scale(0.7) translateX(8px) translateY(-0.6rem);
}

.floating-label input:not(:placeholder-shown)~label {
  transform: scale(0.7) translateX(8px) translateY(-0.6rem);
}

.floating-label input.is-invalid {
  border-color: #ee334e;
  color: #ee334e;
}

.floating-label label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  height: 100%;
  padding: 19px 20px 18px;
  color: rgba(68, 68, 68, .7);
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out,transform .1s ease-in-out;
  transition: opacity .1s ease-in-out,transform .1s ease-in-out,-webkit-transform .1s ease-in-out;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 20px;
}

.checkbox-wrapper input {
  margin-left: 0;
}

.checkbox-wrapper label {
  font-size: 14px;
  color: #444444;
  cursor: pointer;
}

.card-authentication p a {
  color: #0085FF;
  transition: all .3s ease-in;
}

.card-authentication .small {
  font-size: 10px;
  line-height: 1.5;
}

.card-authentication .text-muted {
  color: rgba(68, 68, 68, .7);
}

.card-authentication .link-red {
  color: #CC2027;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  gap: 10px;
  transition: all .3s ease-in;
}

.card-authentication .link-red .icon img {
  width: 6px;
}

.card-authentication p a:hover,
.card-authentication .link-red:hover {
  opacity: .8;
}

.card-authentication--cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
}

.card-authentication--cta a:not(.btn) {
  color: rgba(68, 68, 68, .7);
  font-size: 14px;
  text-decoration: none;
  transition: all .3s ease-in;
}

.card-authentication--cta a:not(.btn):hover {
  color: #444444;
}

.card-authentication ul {
  margin: 0;
  padding-left: 20px;
}

.card-authentication ul li {
  font-size: 14px;
  line-height: 1.3;
  color: #444444;
}

.card-authentication ul li + li {
  margin-top: 5px;
}

.card-completion {
  padding: 65px 50px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0px 6px 40px 0px #00000008;
}

.card-completion h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #444444;
}

.card-completion p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4;
  color: #444444;
}

.card-completion p a {
  color: #0085FF;
}

/* < 1200px */
@media (max-width: 1199px) {
  .hero .hero--content,
  .choose-option .choose-options--wrapper {
    max-width: 70%;
  }
}

/* < 992px */
@media (max-width: 991px) {
  .hero .hero--content,
  .choose-option .choose-options--wrapper {
    max-width: 100%;
  }
}

/* < 768px */
@media (max-width: 767px) {
  .hero {
    padding: 80px 0;
  }
  .hero .hero--content h1 {
    font-size: 30px;
  }
  .hero .hero--content p {
    font-size: 16px;
  }
  .choose-option .card--options .card--options--left h3 {
    font-size: 18px;
  }
  .card-authentication {
    max-width: 100%;
  }
}

/* < 576px */
@media (max-width: 575px) {
  .choose-option .card--options {
    padding: 20px;
  }
  .choose-option .card--options .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  .choose-option .card--options .card--options--left .subtitle {
    font-size: 12px;
    letter-spacing: 0.2px;
  }
  .choose-option .card--options .btn-icon img {
    width: 10px;
  }
  .card-authentication,
  .card-completion {
    padding: 40px 25px;
  }
  .card-authentication .alert,
  .card-authentication p,
  .floating-label label,
  .floating-label input,
  .authentication .btn,
  .card-completion p {
    font-size: 14px;
  }
  .card-authentication--cta {
    flex-direction: column-reverse;
    gap: 15px;
  }
  .card-completion h1 {
    font-size: 24px;
  }
}