@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

:root {
    scroll-behavior: initial
}
:root {
    --transition-time: 400ms;
    --transition-time-long: 1000ms;
    --transition-time-short: 200ms;
    --nav-size-slim: 4.5rem;
    --nav-size: 18rem;
    --footer-size: 4.5rem;
    --input-height: 2.25rem;
    --small-title-height: 2rem;
    --font: "Open Sans", sans-serif;
    --font-heading: "Open Sans", sans-serif
}
:root {
    --card-spacing: 2rem;
    --card-spacing-sm: 1.25rem;
    --card-spacing-xs: 0.75rem;
    --card-spacing-sm-horizontal: 1.75rem 1.25rem;
    --card-spacing-sm-vertical: 1.25rem 1.75rem;
    --main-spacing-horizontal: 2.5rem;
    --main-spacing-vertical: 2rem;
    --title-spacing: 1.25rem
}

@media (max-width:1199.98px) {
    :root {
        --main-spacing-horizontal: 2rem
    }
}
@media (max-width:991.98px) {
    :root {
        --nav-size-slim: 4rem;
        --title-spacing: 1rem;
        --footer-size: 4rem
    }
}

@media (max-width:767.98px) {
    :root {
        --card-spacing: 1.75rem;
        --footer-size: 3rem;
        --main-spacing-horizontal: 1.25rem;
        --main-spacing-vertical: 1.25rem
    }
}
html[data-radius=rounded] {
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --border-radius-sm: 6px;
    --border-radius-xl: 50px
}
html[data-radius=standard] {
    --border-radius-lg: 6px;
    --border-radius-md: 4px;
    --border-radius-sm: 3px;
    --border-radius-xl: 4px
}

html[data-radius=flat] {
    --border-radius-lg: 0;
    --border-radius-sm: 0;
    --border-radius-md: 0;
    --border-radius-xl: 0
}
html {
    height: 100%;
    width: 100%;
    margin: 0;
    font-size: 16px
}

body {
    width: 100%;
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    color: var(--body);
    background-color: var(--background);
    font-size: 87.5%
}

#root {
    opacity: 0
}
html[data-color=light-blue] {
    --primary: #0063B0;
    --secondary: #6cdbef;
    --tertiary: #5de3c8;
    --quaternary: #558df3;
    --primary-rgb: 30, 168, 231;
    --secondary-rgb: 108, 219, 239;
    --tertiary-rgb: 93, 227, 200;
    --quaternary-rgb: 85, 141, 243;
    --primary-darker: #1b9ad4;
    --secondary-darker: #61c6d8;
    --tertiary-darker: #54ccb4;
    --quaternary-darker: #4c7dd6;
    --body: #4e4e4e;
    --alternate: #7c7c7c;
    --muted: #afafaf;
    --separator: #e6e6e6;
    --separator-light: #f1f1f1;
    --body-rgb: 59, 59, 59;
    --alternate-rgb: 124, 124, 124;
    --muted-rgb: 176, 176, 176;
    --separator-rgb: 221, 221, 221;
    --separator-light-rgb: 241, 241, 241;
    --background: #F4F7F9;
    --foreground: #ffffff;
    --background-rgb: 249, 249, 249;
    --foreground-rgb: 255, 255, 255;
    --background-theme: #eaf0f1;
    --background-light: #f8f8f8;
    --gradient-1: #1ea8e7;
    --gradient-2: #21aff0;
    --gradient-3: #23b3f4;
    --gradient-1-lighter: #2abdff;
    --gradient-1-darker: #1fa5e2;
    --light-text: #fff;
    --dark-text: #343a40;
    --light-text-darker: #eeeeee;
    --dark-text-darker: #23272b;
    --light-text-rgb: 255, 255, 255;
    --dark-text-rgb: 52, 58, 64;
    --danger: #cf2637;
    --info: #279aac;
    --warning: #ebb71a;
    --success: #439b38;
    --light: #dadada;
    --dark: #4e4e4e;
    --danger-darker: #771a23;
    --info-darker: #19545d;
    --warning-darker: #aa830f;
    --success-darker: #285422;
    --light-darker: #c9c9c9;
    --dark-darker: #282828;
    --body-darker: #333333;
    --alternate-darker: #616161;
    --muted-darker: #888888;
    --separator-darker: #c0c0c0;
    --danger-rgb: 182, 40, 54;
    --info-rgb: 41, 138, 153;
    --warning-rgb: 235, 183, 26;
    --success-rgb: 65, 139, 56;
    --light-rgb: 218, 218, 218;
    --dark-rgb: 78, 78, 78;
    --menu-shadow: 0px 3px 10px rgba(0, 0, 0, 0.12);
    --menu-shadow-navcolor: 0px 2px 6px rgba(0, 0, 0, 0.05);
    --background-navcolor-light: #fff;
    --background-navcolor-dark: #242424;
    --theme-image-filter: hue-rotate(0deg)
}


html[data-show=true] {
    scroll-behavior: smooth
}
html[data-show=true] #root {
    opacity: 1
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--body);
    font-weight: 400;
    line-height: 1.25
}

.h1, h1 {
    font-size: 1.8em
}
@media (max-width:767.98px) {
    .h1, h1 {
        font-size: 1.5em
    }
}

.h2, h2 {
    font-size: 1.65em
}

@media (max-width:767.98px) {
    .h2, h2 {
        font-size: 1.3em
    }
}
.h3, h3 {
    font-size: 1.5em
}

@media (max-width:767.98px) {
    .h3, h3 {
        font-size: 1.25em
    }
}

.h4, h4 {
    font-size: 1.35em
}

@media (max-width:767.98px) {
    .h4, h4 {
        font-size: 1.15em
    }
}

.h5, h5 {
    font-size: 1.1em
}

@media (max-width:767.98px) {
    .h5, h5 {
        font-size: 1em
    }
}

.h6, h6 {
    font-size: 1em
}

@media (max-width:767.98px) {
    .h6, h6 {
        font-size: 1em
    }
}
p {
    font-family: var(--font)
}
a {
    transition: color var(--transition-time-short);
    text-decoration: initial;
    color: var(--primary);
    outline: initial !important
}

a:active,
a:hover {
    text-decoration: initial;
    color: var(--primary)
}

a.body {
    color: var(--body)
}

a.body:active,
a.body:hover {
    color: var(--primary)
}
.sh-11 {
    height: 5.5rem !important
}
.min-h-100 {
    min-height: 100%
}
.col,
.col-lg,
.col-md,
.col-sm,
.col-xl {
    min-width: 0
}
@media (min-width:992px) {
    .h-lg-100 {
        height: 100% !important
    }
}
@media (min-width:992px) {
    .sw-lg-50 {
        width: 25rem !important
    }
}
@media (min-width:992px) {
    .sw-lg-70 {
        width: 35rem !important
    }
}
.text-small {
    font-size: .7em !important;
    font-weight: initial !important
}
.filled {
    position: relative
}
.filled>svg {
    position: absolute;
    top: 12px;
    left: 16px;
    color: rgba(var(--alternate-rgb), .5);
    z-index: 1
}
.filled .form-control {
    min-height: 44px;
    border: 1px solid transparent;
    background: var(--background-light);
    padding-left: 45px
}

.filled .form-control:focus {
    border-color: rgba(var(--primary-rgb), 1);
    background: initial
}

.filled .form-control:disabled,
.filled .form-control[readonly] {
    background: rgba(var(--separator-rgb), .5) !important;
    color: var(--muted)
}

.filled .form-control:disabled>svg,
.filled .form-control[readonly]>svg {
    color: rgba(var(--alternate-rgb), .25)
}
.custom-select,
.form-control,
.form-select {
    font-size: 1em;
    height: auto;
    min-height: var(--input-height);
    color: var(--body);
    box-shadow: initial !important;
    background-color: var(--foreground);
    border-color: var(--separator);
    border-radius: var(--border-radius-md) !important;
    filter: none;
    transition: border-color .15s ease-in-out
}

.e-3 {
    right: 2rem !important;
    z-index: 1
}
.t-3 {
    top: 1rem !important;
    z-index: 1
}
.b-3 {
    bottom: 1rem !important;
    z-index: 1
}

.s-3 {
    left: 1rem !important;
    z-index: 1
}
.cta-1 {
    font-family: var(--font-heading);
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: 400
}
.text-primary {
    color: var(--primary) !important
}


html[data-color=light-blue] .logo-default {
    background-size: 100px 68px;
    background-image: url(../img/NiX-logo.png)
}
.logo-default {
    width: 100px;
    min-height: 68px;
    object-position: left;
    object-fit: cover;
    background-repeat: no-repeat
}
.shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .03) !important
}

.shadow-deep {
    box-shadow: 0 6px 10px rgba(0, 0, 0, .1) !important
}
.fixed-background {
    background: url(../img/background.webp) no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.full-page-content-right-border {
    border-radius: initial !important;
    border-bottom-left-radius: var(--border-radius-lg) !important;
    border-bottom-right-radius: var(--border-radius-lg) !important
}

@media (min-width:992px) {
    .full-page-content-right-border {
        border-radius: initial !important;
        border-bottom-left-radius: var(--border-radius-lg) !important;
        border-top-left-radius: var(--border-radius-lg) !important
    }
}
.bg-foreground {
    background-color: var(--foreground) !important;
    color: var(--primary) !important
}

.btn {
    font-family: var(--font);
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1rem;
    border: initial;
    box-shadow: initial !important;
    transition: all var(--transition-time-short);
    transition-property: color, background-color, background-image, background;
    border-radius: var(--border-radius-md);
    color: var(--light-text) !important;
    white-space: nowrap
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).focus,
.btn-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--primary)
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).focus:hover,
.btn-primary:not(:disabled):not(.disabled):focus:hover {
    background-color: var(--primary-darker)
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary:not(:disabled):not(.disabled).dropdown-toggle[aria-expanded=true],
.show>.btn-primary:not(:disabled):not(.disabled)[data-bs-toggle=dropdown][aria-expanded=true] {
    background-color: var(--primary-darker)
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--primary)
}
.btn-group-lg>.btn,
.btn-lg {
    padding: 11px 35px;
    line-height: 1;
    font-size: 1em;
    border-radius: var(--border-radius-md)
}

.btn-group-lg>.btn.btn-icon,
.btn-lg.btn-icon {
    padding: 9px 35px;
    height: var(--input-height)
}

.form-check-label {
    color: var(--body);
    margin-top: 1px
}

.display-block {
    display: block;
}

.form-control-valid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url(../img/error_icon.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}