@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Montserrat-VariableFont_wght.ttf) format('truetype');
}

/*  Variables  */
:root {
  --font-family: "Montserrat", sans-serif;
  --colour-novum-steel: #435569;
  --colour-novum-orange: #ed7d31;
  --colour-novum-dark-blue: #0e2330;
  --colour-novum-light-blue: #929cb8;
  --colour-novum-brown: #7a6d58;
  --colour-novum-red: #ab494e;
  --colour-novum-rose: #885e6f;
  --colour-novum-slate: #668283;
}

/* Colours */
/* backgrounds */
.colour-novum-steel-bg {
  background: var(--colour-novum-steel) !important;
  background-color: var(--colour-novum-steel) !important;
  color: white;
}
.colour-novum-orange-bg {
  background: var(--colour-novum-orange) !important;
  background-color: var(--colour-novum-orange) !important;
  color: white;
}
.colour-novum-dark-blue-bg {
  background: var(--colour-novum-dark-blue) !important;
  background-color: var(--colour-novum-dark-blue) !important;
  color: white;
}
.colour-novum-light-blue-bg {
  background: var(--colour-novum-light-blue) !important;
  background-color: var(--colour-novum-light-blue) !important;
  color: white;
}
.colour-novum-brown-bg {
  background: var(--colour-novum-brown) !important;
  background-color: var(--colour-novum-brown) !important;
  color: white;
}
.colour-novum-red-bg {
  background: var(--colour-novum-red) !important;
  background-color: var(--colour-novum-red) !important;
  color: white;
}
.colour-novum-rose-bg {
  background: var(--colour-novum-rose) !important;
  background-color: var(--colour-novum-rose) !important;
  color: white;
}
.colour-novum-slate-bg {
  background: var(--colour-novum-slate) !important;
  background-color: var(--colour-novum-slate) !important;
  color: white;
}
.colour-novum-steel-bg a, .colour-novum-orange-bg a, .colour-novum-dark-blue-bg a, .colour-novum-light-blue-bg a, .colour-novum-brown-bg a, .colour-novum-red-bg a, .colour-novum-rose-bg a, .colour-novum-slate-bg a {
  color: white !important;
}
.colour-novum-steel-bg a:hover, .colour-novum-orange-bg a:hover, .colour-novum-dark-blue-bg a:hover, .colour-novum-light-blue-bg a:hover, .colour-novum-brown-bg a:hover, .colour-novum-red-bg a:hover, .colour-novum-rose-bg a:hover, .colour-novum-slate-bg a:hover {
  color: rgba(255, 255, 255, .7) !important
}
header .dropdown a {
  color: var(--bs-dropdown-link-color)  !important;
}
header .dropdown a:hover {
  color: var(--bs-dropdown-link-hover-color) !important;
}
/* Text colours */
.gradient-text {
  background-color: var(--colour-novum-orange);
  background-image: linear-gradient(90deg, var(--colour-novum-steel), var(--colour-novum-orange));
  background-size: 100%;
  background-repeat: repeat;
  -webkit-text-fill-color: transparent;
}
.colour-novum-steel {
  color: var(--colour-novum-steel)
}
header a.colour-novum-orange,
.colour-novum-orange {
  color: var(--colour-novum-orange) !important
}
.colour-novum-dark-blue {
  color: var(--colour-novum-dark-blue)
}
.colour-novum-light-blue {
  color: var(--colour-novum-light-blue)
}
.colour-novum-brown {
  color: var(--colour-novum-brown)
}
.colour-novum-red {
  color: var(--colour-novum-red)
}
.colour-novum-rose {
  color: var(--colour-novum-rose)
}
.colour-novum-slate {
  color: var(--colour-novum-slate)
}
/* Fonts */
* {
  font-family: var(--font-family) !important;
}
/* Bootsrap overwrites */
.text-secondary {
  color: var(--colour-novum-orange) !important;
}
/* Buttons */
.btn-novum-orange {
  background-color: var(--colour-novum-orange);
  color: white;
}
.btn-novum-steel {
  background-color: var(--colour-novum-steel);
  color: white;
}
.btn-novum-dark-blue {
  background-color: var(--colour-novum-dark-blue);
  color: white;
}

body {
    margin-top: 72px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  top: 3rem;
  z-index: 1;
}
/* Declare heights because of positioning of img element */
.carousel-item {
  min-height: 650px;
  height: calc(100vh - 100px);
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
  margin-bottom: 1rem;
}
/* rtl:end:remove */
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .featurette-heading {
    font-size: 50px;
  }
}
@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
  }
}

/* font size for carousel */
.carousel h2.featurette-heading {
    font-size: 24px;
}
.carousel h3.featurette-heading {
    font-size: 18px;
}

.carousel .featurette-image, .carousel .featurette-image-tall {
    min-height: 200px;
    aspect-ratio: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel .featurette-image {
    max-height: calc(50vh - 120px);
}

.carousel .featurette-image-tall {
    max-height: calc(100vh - 120px);
}

@media (min-width: 768px) {
    .carousel-item {
        height: 50vh;
        min-height: 480px;
    }
    .carousel .featurette-image-tall {
        max-height: calc(50vh - 120px);
    }
    .carousel h2.featurette-heading {
        font-size: 28px;
    }
    .carousel h3.featurette-heading {
        font-size: 22px;
    }
}

@media (min-width: 992px) {
    .carousel h2.featurette-heading {
        font-size: 32px;
    }
    .carousel h3.featurette-heading {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    .carousel h2.featurette-heading {
        font-size: 40px;
    }
    .carousel h3.featurette-heading {
        font-size: 36px;
    }
}

@media (min-width: 1400px) {
    .carousel h2.featurette-heading {
        font-size: 50px;
    }
    .carousel h3.featurette-heading {
        font-size: 42px;
    }
}






.ajax-spinner-horizontal {
    background-image: url(/images/loading-horz.gif);
    background-position: center bottom;
    background-repeat: no-repeat;
    min-height: 16px;
}

.ajax-show-on-waiting {
    display: none;
}

.ajax-hide-on-waiting {
}

.ajax-hide-on-error {
}

.ajax-show-on-error {
    display: none;
}

.ajax-error-msg {
}

.ajax-error-stack {
}

.with-ajax-overlay, .with-ajax-spinner {
    position: relative;
    min-height: 64px;
}

.ajax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(255,255,255,0.75);
}

.with-ajax-spinner .ajax-overlay {
    background-image: url(/images/loading-square.gif);
    background-position: center center;
    background-repeat: no-repeat;
}


.btn-primary {
    --bs-btn-bg: #ee7700;
    --bs-btn-border-color: #ee7700;
    --bs-btn-hover-bg: #e07000;
    --bs-btn-hover-border-color: #d76700;
    --bs-btn-focus-shadow-rgb: 255,143,38;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e07000;
    --bs-btn-active-border-color: #d76700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ee7700;
    --bs-btn-disabled-border-color: #ee7700;
}

.form-control, .form-select {
    border-color: #ee7700;
}

    .form-control:focus, .form-select:focus {
        border-color: #ee7700;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(237, 125, 49,.25);
    }

input:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:focus, select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px rgba(237, 125, 49,.25) inset;
}

.form-range:focus::-webkit-slider-thumb, .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(237, 125, 49, 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: #ed7d31;
}

    .form-range::-webkit-slider-thumb:active {
        background-color: #ed7d31;
    }

.form-range::-webkit-slider-runnable-track {
    background-color: var(--bs-tertiary-bg);
}

.form-range::-moz-range-thumb {
    background-color: #ed7d31;
}

    .form-range::-moz-range-thumb:active {
        background-color: #ed7d31;
    }

.form-check-input:checked {
    background-color: #ed7d31;
    border-color: #ed7d31;
}

.form-check-input:focus {
    border-color: #ed7d31;
    box-shadow: 0 0 0 0.25rem rgba(237, 125, 49, 0.25);
}


.doc-wrapper {
    padding-bottom: 1em;
}

    .doc-wrapper h1, .doc-wrapper h2, .doc-wrapper h3, .doc-wrapper h4, .doc-wrapper h5, .doc-wrapper h6 {
        font-weight: lighter;
    }

    .doc-wrapper h1 {
        font-size: 3rem;
    }

    .doc-wrapper hr {
        max-width: 800px;
        margin: 1rem auto;
        border: none;
        border-top: 3px solid #ee7700;
        opacity: 1;
    }

    .doc-wrapper img {
        max-width: 100%;
    }

    .doc-wrapper .break-before {
        break-before: page;
    }

.editable-wrapper .edit-buttons {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    background-color: rgba(255,255,255,0.8);
}

.editable-wrapper {
    position: relative;
    min-height: 2em;
}

    .editable-wrapper:hover {
        background-color: rgba(0,0,0,0.025);
    }


        .editable-wrapper:hover .edit-buttons {
            display: block;
        }

div.card {
    background-color: rgba(255,255,255,0.6);
}

.html-code-example {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 1rem 0;
}

    .html-code-example .title {
        border-bottom: 1px solid #ccc;
        background-color: rgba(230,230,230,0.5);
        padding: 0.125em 0.5em;
        font-size: 0.7em;
    }

    .html-code-example pre.html-code-quoted {
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #ccc;
    }