:root {
    --brand-color: #506af8;
    --brand-dark-color: rgb(68, 93, 235);
    --brand-tint-color: rgba(80, 105, 248, 0.05);
    --text-color: #202c3a;
    --dark-color: #171b1f;
    --light-color: rgb(84, 102, 131);
    --input-color: rgb(249, 250, 252);
    --border-color: rgb(204, 211, 228);
    --border-light-color: rgb(226, 231, 241);
    --border-lighter-color: #eef1f7;
    --error-color: rgb(234, 49, 104);
    --danger-color: rgb(234, 49, 104);
    --happy-color: #49c512;
    --happy-tint-color: rgba(80, 248, 136, 0.25);
    --warning-color: orange;
    --warning-tint-color: rgba(255, 165, 0, 0.05);
    --danger-tint-color: rgba(234, 49, 104, 0.05);
    --error-tint-color: rgba(234, 49, 104, 0.05);
    --font-family: 'Chivo', sans-serif;
    --font-size-xs: 12px;
    --font-size-01: 14px;
    --font-size-02: 15px;
    --font-size-03: 16px;
    --font-size-04: 18px;
    --font-size-05: 22px;
    --font-size-06: 24px;
    --font-size-07: 28px;
    --font-size-08: 32px;
    --spacing-01: 5px;
    --spacing-02: 10px;
    --spacing-03: 15px;
    --spacing-04: 20px;
    --spacing-05: 25px;
    --spacing-06: 30px;
    --spacing-07: 45px;
    --spacing-08: 55px;
    --hncs-color: #616737;
    --hncs-color-2: #e0e2ce;
    --hncs-text-color: #96a04e;
    --hncs-text-color-dark: #444444;
    --hncs-border-color: rgba(34, 34, 34, 0.2);
    --hncs-background-color: #2A2D30;
    --sidebar-width: 280px;
}

@font-face {
    font-family: 'Chivo';
    src: url('/fonts/Chivo-VariableFont_wght.ttf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Chivo';
    src: url('/fonts/Chivo-Italic-VariableFont_wght.ttf') format('opentype');
    font-style: italic;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-03);
    line-height: 1.5;
    font-weight: 400;
    font-style: normal;
    font-kerning: normal;
    letter-spacing: -.2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
}

/* overwrites "color: inherit" from bootstrap's _reboot.scss*/
a:not([href]):not([class]) {
    color: var(--brand-color);
}

/* overwrites "color: inherit" from bootstrap's _reboot.scss*/
a:not([href]):not([class]):hover {
    color: var(--text-color);
}

a {
    color: var(--brand-color);
    font-weight: 400;
    letter-spacing: -.2px;
    text-decoration: none;
    transition: color .2s ease-in-out;
    cursor: pointer;
}

ul.decorate {
    list-style-type: disc !important;
}

.blue-text {
    color: var(--brand-color) !important;
}

.pointer {
    cursor: pointer;
}

a:hover {
    color: var(--text-color);
}

strong {
    font-weight: 500;
    color: var(--dark-color);
}

hr {
    height: 1px;
    width: 100%;
    border: none;
    background-color: var(--border-light-color);
    margin: 25px 0;
}

p {
    color: var(--text-color);
    font-size: var(--font-size-02);
    letter-spacing: -.4px;
}

.black-text {
    color: var(--text-color) !important;
}

p.light {
    color: var(--light-color);
}

p a {
    font-weight: 500;
    color: var(--brand-color);
}

p a:hover {
    color: var(--brand-dark-color);
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin: 0;
    padding: 0;
}

.icon {
    max-width: 32px;
}

/* Typography */

h1, h2.old, h3, h4, h5 {
    color: var(--dark-color);
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
}

h1 {
    font-size: var(--font-size-08);
    letter-spacing: -1px;
    display: block;
    width: 100%;
    margin-top: var(--spacing-03);
    margin-bottom: var(--spacing-04);
}

h2.old {
    font-size: var(--font-size-07);
    letter-spacing: -1px;
    display: block;
}

h3 {
    font-size: var(--font-size-04);
    letter-spacing: -.54px;
}

h4 {
    font-size: var(--font-size-02);
    letter-spacing: -.3px;
    margin-bottom: var(--spacing-05);
}

h5 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--light-color);
    letter-spacing: .5px;
}

.danger {
    color: var(--danger-color);
}

.danger:hover {
    opacity: 0.5;
    color: var(--danger-color);
}

.warning {
    color: var(--warning-color);
}

.happy {
    color: var(--happy-color) !important;
}

.error-text {
    color: var(--error-color) !important;
}

.back {
    display: inline-block;
    font-size: var(--font-size-02);
    font-weight: 500;
    letter-spacing: -.3px;
    color: var(--brand-color);
    transition: transform .2s ease-in-out;
    padding: var(--spacing-02);
    margin-left: calc(-2 * var(--spacing-01));
}

.back svg {
    width: 10px;
    height: 10px;
}

.back svg path {
    fill: var(--brand-color);
}

.back:hover {
    color: var(--brand-color);
    transform: translateX(-3px);
}

.title-link {
    margin-left: var(--spacing-01);
}

/* User Panel */

.user-panel {
    font-size: var(--font-size-01);
    display: flex;
    z-index: 95;
    border-radius: 0 0 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--spacing-04);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.user-panel.magic-link {
    background-color: var(--brand-dark-color);
    color: var(--input-color);
    border: none;
}

.user-panel .role {
    margin-right: var(--spacing-04);
}

/* Sidebar */

.sidebar {
    position: fixed;
    width: var(--sidebar-width);
    top: 0;
    height: 100vh;
    overflow: auto;
    border-right: 1px solid var(--border-color);
}

.menu-secondary {
    position: fixed;
    bottom: 0;
    width: var(--sidebar-width);
    left: 0;
    border-top: 1px solid var(--border-light-color);
}

.sidebar h3 {
    padding-left: var(--spacing-06);
    padding-right: var(--spacing-08);
    padding-top: 40px;
}

.sidebar .logo {
    padding: 5px;
    border-bottom: 1px solid var(--border-light-color);
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .logo img {
    max-height: 85px;
    margin: auto;
    max-width: 80%;
}

.sidebar .logo h2.old {
    color: var(--brand-color);
    font-size: 26px;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-04) 0 0;
}

.sidebar nav a {
    padding: var(--spacing-03) var(--spacing-05);
    position: relative;
    text-indent: var(--spacing-07);
    font-size: var(--font-size-02);
    color: var(--light-color);
}

.sidebar nav a:hover {
    color: var(--brand-color);
}

.sidebar nav a.active {
    color: var(--brand-color);
    font-weight: 500;
}

.sidebar nav a .icon {
    max-height: 24px;
    max-width: 24px;
    position: absolute;
    top: 15px;
    left: var(--spacing-06);
}

.sidebar nav a path {
    transition: fill .2s ease-in-out;
    fill: var(--light-color);;
}

.sidebar nav a:hover .icon path {
    fill: var(--brand-color);
}

.sidebar nav a.active .icon path {
    fill: var(--brand-color);
}

.share {
    color: var(--brand-color);
    border: 1px solid var(--border-color);
    padding: 10px;
}

main {
    margin-bottom: 5rem;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.assessment-page main {
    position: relative;
    width: 100%;
}

hgroup {
    background-color: white;
    left: var(--sidebar-width);
    z-index: 21;
}

header {
    padding: var(--spacing-02) var(--spacing-07);
    min-height: 80px;
}

footer {
    padding: var(--spacing-06) var(--spacing-07);
}

/* Auth */

.auth {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-color);
}

.auth h2.old {
    margin-bottom: 15px;
}

button.old {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
}


a.button.primary,
button.primary {
    color: white;
    background-color: #6280FF;
}

div.button, button.old, a.button {
    -webkit-print-color-adjust: exact;
    position: relative;
    display: inline-block;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    height: 50px;
    font-size: 16px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: 400;
}


.button-primary:hover, .button-primary {
    outline: 0;
    background-color: var(--brand-dark-color);
}

.button-dark {
    outline: 0;
    background-color: var(--dark-color);
}
.button-dark:hover {
    background-color: var(--brand-color);
}

.auth button.old {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

/* Error */
.error-message {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 201;
    width: 300px;
    padding: 15px;
    margin: 15px;
    border: 2px solid var(--error-color);
    background-color: white;
}

.error-message *:last-child {
    margin-bottom: 0;
}

.error-message .dismiss {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 900;
    color: white;
    line-height: 1.2;
    cursor: pointer;
}

.error-message .dismiss, .error-message h3, .error-message p {
    color: var(--error-color);
}

.error-message h3 {
    padding-bottom: 0.3em;
}

/* Form */

.modal form {
    display: flex;
    flex-direction: column;
}

.modal .button-danger,
.modal .button-primary {
    border: none;
    margin-top: var(--spacing-06);
    display: flex;
    justify-content: center;
}

form label {
    font-weight: 500;
    display: flex;
    font-size: var(--font-size-02);
    margin-bottom: var(--spacing-01);
    margin-top: var(--spacing-04);
}

/* Input Fields */

::placeholder {
    color: var(--light-color);
    opacity: .5;
}

textarea, select.old, label.file-upload, input[type=text].old, input[type=password] {
    position: relative;
    color: var(--text-color);
    background-color: var(--input-color);
    box-shadow: none;
    height: 40px;
    font-size: var(--font-size-02);
    border: none;
    width: 100%;
    border-radius: 3px;
    box-shadow: rgba(204, 211, 228, 0.5) 0px 0px 0px 1px;
    padding: 0 var(--spacing-03);
}

select.old, label.file-upload {
    cursor: pointer;
}

select.old {
    line-height: unset;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

textarea {
    padding: var(--spacing-02) var(--spacing-03);
}

input:focus {
    outline: none;
}

select.old:focus, label.file-upload:focus, input[type=text].old:focus, input[type=password]:focus {
    box-shadow: var(--brand-color) 0px 0px 0px 1px;
}

label.file-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    border: 1px dashed rgba(204, 211, 228, 1);
    margin: 0;
}

label.download {
    display: flex;
    justify-content: space-between;
}

/* Select */

.select {
    position: relative;
    height: auto;
    display: flex;
}

.select .button-secondary {
    padding-right: 80px;
}

.select .button-secondary .icon {
    position: absolute;
    right: 8px;
}

.select:hover .select-dropdown {
    display: flex;
    flex-direction: column;
}

.select:before {
    content: '';
    position: absolute;
    background-color: transparent;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
}

.select .select-dropdown {
    display: none;
    min-width: 300px;
    position: absolute;
    top: 50px;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 3;
    padding-top: var(--spacing-02);
    padding-bottom: var(--spacing-03);
    padding-right: var(--spacing-04);
    color: var(--dark-color);
    background-color: white;
    border-radius: 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    transition: all .2s ease-in-out;
    box-shadow: rgba(95, 120, 149, 0.2) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 8px 8px;
}

.select .select-dropdown input[type="checkbox"] {
    float: left;
}

.select .select-dropdown label {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.select .option {
    position: relative;
    padding-top: var(--spacing-02);
    padding-left: var(--spacing-04);
}

.select .option label {
    display: flex;
    padding: var(--spacing-03);
    cursor: pointer;
}

.select .option label:hover {
    color: var(--brand-color);
}

/* Multi-select*/

.multi-select {
    background-color: var(--input-color);
    max-width: 300px;
    border: solid 1px #D3D9ED;
    border-radius: 5px 5px 0 0;
}

.multi-select.disabled {
    opacity: 50%;
}

.state-select {
    background-color: whitesmoke;
    font-size: var(--font-size-01);
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-03);
    cursor: pointer;
    user-select: none;
}

.state-select:hover {
    background: var(--brand-tint-color);
}

.state-select.active {
    background: var(--brand-color);
    color: var(--input-color);
}

.multi-select label {
    color: #818BAD;
    background-color: whitesmoke;
    margin: 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: var(--spacing-04);
    border-bottom: solid 1px #D3D9ED;
}

.multi-select .option {
    font-size: var(--font-size-01);
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-03);
    cursor: pointer;
    user-select: none;
}

.multi-select input {
    margin-left: var(--spacing-02);
}

.multi-select .option:hover {
    background: var(--brand-tint-color);
}

.multi-select .option.active {
    background: var(--brand-color);
    color: var(--input-color);
}

/* Check / Radio */

input[type="checkbox"].beam-checkbox {
    border-radius: 3px;
    border-width: 0px;
    box-shadow: none;
}

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:before {
    content: '';
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

input[type="checkbox"]:checked:after {
    content: url(../img/icon-check.svg);
    width: 16px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: var(--brand-color);
}

input[type="radio"].old {
    display: none;
}

input[type="checkbox"]:checked:before, input[type="radio"].old:checked:before {
    border: 1px solid var(--brand-color);
    background-color: var(--brand-color);
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
}

.checkbox-label {
    margin-top: var(--spacing-04);
    margin-left: var(--spacing-02);
}

/* Search */

.search {
    display: flex;
    position: relative;
}

.search .icon {
    width: 30px;
    position: absolute;
    z-index: 2;
    top: 11px;
    left: 6px;
}

.search .icon path {
    fill: var(--light-color);
}

.search input {
    width: 280px;
    text-indent: 23px;
    letter-spacing: -.4px;
}

/* Badge */

.badge {
    color: var(--brand-color);
    background-color: var(--brand-tint-color);
    padding: 0 var(--spacing-02);
    border-radius: 5px;
    font-size: var(--font-size-01);
    font-weight: 400;
    display: inline-flex;
    height: 32px;
    align-items: center;
    transition: all .2s ease-in-out;
    position: relative;
    vertical-align: top;
}

.badge.complete {
    background-color: var(--input-color);
    color: var(--border-color);
}

.badge.danger {
    background-color: var(--danger-tint-color);
    color: var(--danger-color);
}

/* Messages */

.message {
    color: var(--brand-color);
    background-color: var(--brand-tint-color);
    border-radius: 5px;
    font-size: var(--font-size-01);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    transition: all .2s ease-in-out;
    position: relative;
    vertical-align: top;
    padding: var(--spacing-02) var(--spacing-04);
}

form .message {
    margin-top: 30px;
}

.message .icon {
    height: 24px;
    min-width: 24px;
    margin-left: calc(-2 * var(--spacing-01));
    margin-right: 10px;
}

.message .icon2 {
    margin-right: var(--spacing-03);
}

.message.error {
    color: var(--error-color);
    background-color: var(--error-tint-color);
}

.message.warning {
    color: var(--warning-color);
    background-color: var(--warning-tint-color);
}

.message.error .icon path {
    fill: var(--error-color);
}

.message.warning .icon path {
    fill: var(--warning-color);
}

/* Code */

pre {
    color: var(--brand-color);
    background-color: var(--brand-tint-color);
    padding: var(--spacing-02) var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-01);
}

/* Buttons */

*[disabled] {
    opacity: 0.6 !important;
    pointer-events: none;
}

.tariff-default-value {
    opacity: 0.6 !important;
    font-style: italic;
}


.button-primary, button.button-primary {
    color: white;
    background-color: var(--brand-color);
    padding: 0 var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    min-height: 40px;
    align-items: center;
    transition: all .2s ease-in-out;
    position: relative;
    vertical-align: top;
}

.button-default {
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    background-color: white;
    padding: 0 var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    align-items: center;
    position: relative;
    vertical-align: top;
}

button.button-danger {
    color: white;
    background-color: var(--error-color);
    padding: 0 var(--spacing-04);
    border: none;
    border-radius: 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    align-items: center;
    transition: all .2s ease-in-out;
    position: relative;
    vertical-align: top;
}

button.button-danger:hover {
    background-color: #de275e;
    color: white;
}

.button-primary:hover {
    background-color: var(--brand-dark-color);
    color: white;
}

.button-primary .icon {
    height: 24px;
    margin-left: calc(-2 * var(--spacing-01));
    margin-right: var(--spacing-01);
}

.button-primary .icon path {
    fill: white;
}

a.button-secondary, label.button-secondary, button.button-secondary {
    color: var(--dark-color);
    background-color: white;
    padding: 0 var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-01);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    align-items: center;
    transition: all .2s ease-in-out;
    position: relative;
    vertical-align: top;
    box-shadow: rgba(95, 120, 149, 0.2) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 5px 5px;
    cursor: pointer;
}

.button-secondary:hover {
    color: var(--dark-color);
    box-shadow: rgba(95, 120, 149, 0.3) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 8px 8px;
}

.button-secondary .icon {
    height: 24px;
    margin-left: calc(-2 * var(--spacing-01));
    margin-right: var(--spacing-01);
}

.button-secondary .icon path {
    fill: var(--brand-color);
}

.button-outline {
    color: var(--light-color);
    background-color: white;
    padding: 0 var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-01);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    align-items: center;
    transition: none;
    position: relative;
    vertical-align: top;
    box-shadow: rgba(95, 120, 149, 0.1) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 0px 0px 1px;
}

.button-outline:hover {
    color: var(--brand-color);
    box-shadow: rgba(95, 120, 149, 0.2) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 0px 0px 1px;
}

.button-outline .icon {
    height: 22px;
    margin-left: calc(-2 * var(--spacing-01));
    margin-right: var(--spacing-01);
}

.button-outline:hover .icon path {
    fill: var(--brand-color);
    opacity: 1;
}

.button-outline .icon path {
    fill: var(--light-color);
    opacity: .8;
}

.button-text {
    color: var(--brand-color);
    padding: 0 var(--spacing-04);
    font-size: var(--font-size-01);
    font-weight: 500;
    display: inline-flex;
    height: 40px;
    align-items: center;
    position: relative;
    vertical-align: top;
}

.button-text:hover {
    color: var(--brand-dark-color);
}

.button-text .icon {
    height: 23px;
    margin-left: calc(-2 * var(--spacing-01));
    margin-right: var(--spacing-01);
}

.button-text .icon path {
    fill: var(--brand-color);
}

/* Box */

.box {
    background-color: white;
    width: 500px;
    border-radius: 3px;
    box-shadow: rgba(95, 120, 149, 0.2) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 8px 8px;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-06);
    position: relative;
}

/* Tooltip */

[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

[data-tooltip]:before, [data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* transition: all .2s ease-out;
    transform: translateY(5px); */
}

[data-tooltip]:before {
    position: absolute;
    bottom: 125%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: var(--spacing-02);
    width: 160px;
    border-radius: 3px;
    background-color: var(--dark-color);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: var(--font-size-01);
    line-height: 1.2;
}

[data-tooltip]:after {
    position: absolute;
    bottom: 125%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    border-top: 5px solid #000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
    /* transform: translateY(0); */
}

/* Page */

.divider {
    border-bottom: 1px solid var(--border-color);
}

.table-page {
    overflow: scroll;
    flex: 1 1 auto;
    height: 100%;
}

.registration-page {
    margin-top: 226px;
}

.tab-page {
    display: none;
    flex: 1 1 auto;
    overflow: scroll;
}

.tab-page.no-scroll {
    overflow: hidden;
}

.tab-page.active {
    display: block;
}

.settings-page {
    overflow-y: auto;
}

.settings-page form {
    margin: 110px 45px 45px 45px;
}

/* Tabs */

.tabs {
    display: flex;
    padding-left: 45px;
    border-bottom: 1px solid var(--border-color);
}

/*.tabs:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .9) 80%, rgba(255, 255, 255, 1) 100%);*/
/*    height: 60px;*/
/*    left: 0;*/
/*    right: 0;*/
/*    height: 30px;*/
/*    bottom: -30px;*/
/*    pointer-events: none;*/
/*}*/

.tabs a {
    display: inline-flex;
    padding: 12px var(--spacing-05);
    margin-bottom: -1px;
    margin-top: 5px;
    font-size: var(--font-size-02);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: none;
}

.tabs a.active {
    border-color: var(--border-color);
    background-color: white;
    color: var(--brand-color);
    font-weight: 500;
}

.tabs-buttons a.active {
    background-color: var(--brand-color);
    color: white;
}

/* Page */


/* Toolbar */

.toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: var(--spacing-03) var(--spacing-07);
    flex-direction: row;
}

.action-toolbar {
    padding: var(--spacing-07);
}

.component {
    padding-top: 20px;
    width: 100%;
}

hgroup .toolbar, .component .toolbar {
    padding: 0;
}

.sep {
    height: 40px;
    margin: 0 var(--spacing-04);
    width: 1px;
    background-color: var(--border-light-color);
}

.toolbar-left {
    display: flex;
    align-items: center;
}

.toolbar-right {
    display: flex;
    width: 100%;
}

.toolbar div.select, .toolbar .button-secondary, .toolbar .button-text {
    margin-right: 10px;
}

.toolbar-right div.select:last-of-type,
.toolbar-right .button-secondary:last-of-type {
    margin-right: 0;
}

.search {
    display: inline-flex;
}

/* Table */

.table-row2 {
    padding: 0 var(--spacing-07);
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 1px;
    font-size: var(--font-size-01);
    padding-top: 1px;
    border-bottom: 1px solid var(--border-light-color);
}

.table-row2 .actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-row2 a {
    margin: 0 0.5rem;
}

.table-header {
    font-size: var(--font-size-02);
    padding: var(--spacing-03) var(--spacing-07);
    /* padding-top: 0; */
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: -.3px;
    color: var(--dark-color);
    font-weight: 500;
    text-align: left;
}

.table-row2 div a {
    color: var(--brand-color);
    display: inline-block;
    padding: 15px 0;
}

.table-row2 img {
    max-height: 30px;
    max-width: 130px;
}

.beam-table .table-row2 {
    color: var(--light-color);
}

@media all and (max-width: 1024px) {
    .beam-table .table-header {
        display: none;
    }

    .beam-table .table-row2 {
        display: block;
    }

    .table-row2 div {
        flex-basis: 100%;
    }

    .table-row2 div {
        display: flex;
        padding: var(--spacing-01) 0;
    }

    .beam-table .table-row2 div:before {
        padding-right: var(--spacing-05);
        content: attr(data-label);
        flex-basis: 50%;
        text-align: right;
        color: var(--dark-color);
        font-weight: 500;
    }
}

/* Grid */

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
    display: flex;
    align-items: center;
}

.flex-2 {
    flex: 2;
    display: flex;
    align-items: center;
}

.flex-3 {
    flex: 3;
    display: flex;
    align-items: center;
}

.flex-4 {
    flex: 4;
    display: flex;
    align-items: center;
}

.flex-5 {
    flex: 5;
    display: flex;
    align-items: center;
}

/* Styleguide Only Formatting */

.guide-headings h1 {
    margin-top: 0;
}

.guide-headings h1, .guide-headings h2.old, .guide-headings h3, .guide-headings h4, .guide-headings h5 {
    margin-bottom: 15px;
}

/* Modal */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    z-index: 99;
}

.modal-card {
    position: relative;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 20px 40px;
    display: flex;
    color: #000;
    min-width: 380px;
    max-width: 380px;
}

.modal-card h3 {

}

.modal-card.large {
    width: 50vw;
    max-width: 50vw;
    max-height: 90vh;
    overflow-y: scroll;
}

.modal-card.medium {
    width: 500px;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: scroll;
}

.modal-card.full-screen {
    width: 90vh;
    max-width: 90vh;
    max-height: 90vh;
    overflow-y: scroll;
}

.modal-card.full-large {
    width: 90vw;
    height: 90vh;
    max-width: 1500px;
    max-height: 90vh;
    overflow-y: scroll;
}

.modal:target, .modal.open {
    visibility: visible;
    z-index: 200;
}

.modal .modal-overlay {
    position: fixed;
    background-color: var(--dark-color);
    opacity: 0;
    transition: all .4s ease-in-out;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.modal:target .modal-overlay, .modal.open .modal-overlay {
    opacity: .9;
    transition: all .4s ease-in-out;
}

.modal .modal-container {
    opacity: 0;
    transition: all .4s ease-in-out;
    transform: translateY(15px) scale(.98);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal:target .modal-container, .modal.open .modal-container {
    z-index: 9999;
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: all .4s ease-in-out .2s;
}

.modal-content {
    width: 100%;
    padding: var(--spacing-06);
    position: relative;
    border: none !important;
    border-radius: 1rem;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
}

.close-modal-icon {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: var(--font-size-06);
}

/* Loader */

.loading-wrapper {
    position: relative;
    height: 50%;
}

.loading:after {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px
}

.loading, .loading-block {
    color: transparent !important;
    pointer-events: none
}

.loading-block:after {
    -webkit-animation: spinAround .4s infinite linear;
    animation: spinAround .4s infinite linear;
    border-radius: 100%;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: .1rem solid var(--brand-color);
    border-right-color: #fff;
    border-top-color: #fff;
}

.loading:after {
    -webkit-animation: spinAround .4s infinite linear;
    animation: spinAround .4s infinite linear;
    border-radius: 100%;
    content: "";
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    top: 50%;
    position: absolute;
    width: 20px;
    height: 20px
}

.loading:after {
    border: .1rem solid var(--brand-color);
    border-right-color: #fff;
    border-top-color: #fff;
}

.loading.loading-inline:after {
    margin-left: -22px;
    margin-top: -23px;
}

@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spinAround {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.loading-overlay {
    position: absolute;
    top: 0;
    background-color: #fff;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0
}

.loading-overlay.loaded {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out 0s
}

.loading-overlay .loading:after {
    width: 3rem;
    height: 3rem
}

/* Tooltips */

.tooltip-wrapper {
    position: relative;
}

.small-tooltip {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    font-size: var(--font-size-02);
    font-weight: normal;
    color: var(--text-color);
    line-height: normal;
    letter-spacing: normal;
    position: absolute;
    width: 250px;
    bottom: var(--spacing-05);
    left: var(--spacing-05);
    padding: var(--spacing-01);
    background: white;
    border: 1px solid var(--border-color);
}

.small-tooltip li {
    margin-left: 20px;
    margin-bottom: 5px;
}

.info-circle {
    margin: 4px;
    font-size: var(--font-size-01);
}

/**/

.ml-1 {
    margin-left: 0.75rem;
}

.ml-2 {
    margin-left: 1rem;
}

.mr-1 {
    margin-right: 0.75rem;
}

.mb-1 {
    margin-bottom: 0.75rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mt-5 {
    margin-top: 2.5rem !important;
}

.mt-4 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 1.5rem !important;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 1rem !important;
}

label.tariff {
    text-align: left;
    line-height: 18px;
    font-size: 12px;
    margin-top: 5px;
    color: #818BAD;
    width: 100%;
}

.tariff-charge {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 35px;
    width: 100%;
}

.unit-input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

.tariff-charge:first-child {
    /*margin-right: 0.75rem;*/
}

.tariff-charge:last-child {
    /*margin-left: 0.75rem;*/
}

.tariff-charge label {
    background-color: whitesmoke;
    border: 1px solid #D3D9ED;
    color: #818BAD;
    border-radius: 5px 0 0 5px;
    margin: 0;
    padding: 8px 15px;
    font-size: 11px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    min-width: 122px;
    line-height: 14px;
}

.tariff-charge select.old,
.tariff-charge input {
    outline: none;
    box-shadow: none;
    height: 35px;
    margin: 0;
    width: 60%;
    border-radius: 0;
    border: 1px solid #D3D9ED;
    border-left: none;
    border-right: none;
    padding: 8px 8px 8px 8px;
    position: relative;
    text-align: right;
    font-size: 12px;
    background-color: var(--input-color);
}

.unit-input input {
    outline: none;
    margin: 0;
    width: 90%;
    border-radius: 0;
    border: none !important;
    padding: 8px 8px 8px 8px;
    position: relative;
    text-align: right;
    font-size: var(--font-size-02);
    background-color: var(--input-color);
    box-shadow: rgba(204, 211, 228, 0.5) 0px 0px 0px 1px;
}

.unit-input input:first-child {
    border-radius: 5px 0 0 5px !important;
}

.unit-input input.old:last-child:not(.unit-left),
.tariff-charge select.old:last-child:not(.unit-left),
.tariff-charge input.old:last-child:not(.unit-left) {
    width: 60%;
    border: 1px solid #D3D9ED;
    border-radius: 0 5px 5px 0;
    margin: 0;
    padding: 8px 8px 8px 0;
    border-left: none;
    background-color: var(--input-color);
}

.unit-left {
    border-radius: 0 5px 5px 0 !important;
    border: 1px solid #D3D9ED !important;
    border-left: none !important;
}

.tariff-charge div.unit {
    width: 60px;
    border: 1px solid #D3D9ED;
    color: #818BAD;
    margin: 0;
    padding: 8px 8px 8px 0;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    text-align: right;
    background-color: var(--input-color);
}

.unit-input div.unit {
    width: 80px;
    box-shadow: rgba(204, 211, 228, 0.5) 0px 0px 0px 1px;
    color: #818BAD;
    margin: 0;
    padding: 8px;
    font-size: var(--font-size-02);
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    text-align: right;
    background-color: var(--input-color);
    border-radius: 5px 0 0 5px;
}

.tariff-charge div.unit:last-child {
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #D3D9ED;
    text-align: left;
}

.unit-input div.unit:last-child {
    border-radius: 0 5px 5px 0;
    text-align: left;
}

.grid-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0.75rem;
    margin-bottom: 0.75rem;
    margin-right: 0.75rem;
}

.grid-25 {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 0.75rem;
    margin-bottom: 0.75rem;
    margin-right: 0.75rem;
}

.grid-33 {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 0.75rem;
    margin-bottom: 0.75rem;
    margin-right: 0.75rem;
}

table.manual-roof-mapping {
    border-collapse: separate;
    min-width: 30rem;
    margin: 20px 0 0;
    border-radius: 5px;
}

table.manual-roof-mapping td, table.manual-roof-mapping th {
    padding: 10px;
    font-weight: 300;
    color: #1D2232;
    width: 20%;
}

table.manual-roof-mapping td {
    padding: 0;
    border: 1px solid #D3D9ED;
    border-left: none;
    border-top: none;
}

table.manual-roof-mapping td:first-child {
    border: 1px solid #D3D9ED;
    border-top: none;
    text-align: center;
}

table.manual-roof-mapping td.fixed {
    padding: 10px;
    background-color: whitesmoke;
}

table.manual-roof-mapping tr {
    background-color: white;
}

table.manual-roof-mapping th {
    text-align: center;
    background-color: whitesmoke;
    color: #818BAD;
    border: 1px solid #D3D9ED;
    border-left: none;
    font-size: 10px;
    padding: 8px 10px;
}

table.manual-roof-mapping tr td input.old,
table.manual-roof-mapping tr td select.old {
    margin: 0 !important;
    border: none !important;
    border-radius: 0;
    padding: 10px !important;
    font-size: 11px !important;
    background-color: transparent;
    width: 100%;
    font-weight: 400 !important;
    text-align: left;
    height: unset;
    -webkit-appearance: none;
}

table.manual-roof-mapping tr td input.invalid {
    background-color: indianred;
}

table.manual-roof-mapping th.line-number,
table.manual-roof-mapping td.line-number {
    padding: 8px;
}

table.manual-roof-mapping th:first-child {
    border-radius: 5px 0 0 0;
    border: 1px solid #D3D9ED;
}

table.manual-roof-mapping th:last-child {
    border-radius: 0 5px 0 0;
}

table.manual-roof-mapping tbody tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

table.manual-roof-mapping tbody tr:last-child td:last-child select.old,
table.manual-roof-mapping tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}

.table-row2 div.loading-wrapper {
    position: relative;
    width: 30px;
}

/* ASSESSMENT FLOW */

*, *:before, *:after {
    box-sizing: border-box;
}

.equipment-manufacturer--header {
    position: sticky;
    top: 0px;
    background: var(--brand-color);
    color: white;
    z-index: 2;
    font-weight: bold;
    padding: 10px;
    box-shadow: 0px 3px 0px hsl(231 92% 64% / 0.1);
}

.equipment-manufacturer--header:first-of-type {
    border-top-left-radius: 5px;
}

.equipment-manufacturer--header:nth-of-type(5) {
    border-top-right-radius: 5px;
    text-align: center;
}

.assessment-page {
    font-family: var(--font-family);
    letter-spacing: 1px !important;
}

.assessment-page * {
    letter-spacing: 0.9px !important;
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

.no-text-select {
    user-select: none;
}

.assessment-page .cost-estimate {
    width: 30%;
}

.assessment-page header {
    background-color: white;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: white;
    border-bottom: 1px solid #D3D9ED;
    border-top: 1px solid #D3D9ED;
    z-index: 2;
}

.assessment-page header .logo {
    width: 250px;
}

.assessment-page .logo {
    display: flex;
    align-items: center;
}

.assessment-page .logo img {
    max-width: 200px;
    max-height: 65px;
}

.assessment-page main {
    padding: 15px 15% 23px;
    position: relative;
    margin: 0;
}

.assessment-page.table-breakdown-page main {
    padding: 15px 8% 23px;
}

.assessment-page main > .body > * {
    margin-top: 30px;
}

.assessment-wrapper {
    padding-top: 15px;
    height: calc(100vh - 105px);
    overflow: auto;
}

.assessment-page main > div.sub-heading {
    width: 100%;
    position: relative;
    z-index: 4;
}

.assessment-page main > div.sub-heading .action > a:not(.button):last-child {
    border-right: none;
}

.assessment-page main > div.sub-heading .action > a:not(.button) {
    color: var(--brand-color);
    font-weight: 400;
    padding: 0 25px;
    font-size: 15px;
    border-right: 1px solid #818BAD;
}

.assessment-page main > div.sub-heading .action > a:first-child {
    padding-left: 0;
}

.assessment-page main > div.sub-heading .action > a.active {
    font-weight: bold;
}

.assessment-page h3 {
    font-weight: 400;
    color: #455076;
    margin: 10px 0;
    font-size: 1.17em;
}

.assessment-page .slick-slider.assessment-slider {
}

.assessment-page .slick-slider.assessment-slider div.assessment {
    max-width: 1200px !important;
    z-index: 100;
}

.assessment-page div.panel {
    width: 100%;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #D3D9ED;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    page-break-after: always;
    page-break-inside: avoid;
}

.assessment-page div.panel > div.panel-inner {
    padding: 20px 20px 10px 20px;
}

.assessment-page div.assessment {
    position: relative;
    margin: auto;
}

.assessment-page div.assessment nav.assessment-flow-nav {
    width: 100%;
}

div.page.site-overview nav > a.site-overview,
div.page.solar nav > a.solar,
div.page.battery nav > a.battery,
div.page.pfc nav > a.pfc,
div.page.cost-estimate nav > a.cost-estimate,
div.page.contract nav > a.contract {
    color: var(--brand-color) !important;
    font-weight: 400;
}

.assessment-page div.assessment nav.assessment-flow-nav > a,
.assessment-page div.assessment nav.assessment-flow-nav > i {
    color: #818BAD;
}

.assessment-page div.assessment nav.assessment-flow-nav > i {
    margin: 0 45px;
}

.assessment-page div.assessment nav.assessment-flow-nav > a {
    font-size: 15px;
    font-weight: 400;
}

.assessment-page div.assessment > div.assessment-card {
    position: absolute;
    right: -40px;
    top: 50px;
}

.assessment-page div.assessment-card.flip {
    perspective: 1000px;
    -ms-perspective: 1000px;
    -webkit-perspective: 1000px;
    background-color: transparent;
}

.assessment-page div.assessment-card {
    position: relative;
    display: block;
    width: 365px;
    height: 625px;
    border-radius: 10px;
}

.assessment-page div.assessment > div.assessment-card.flip > div.inner {
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
}

.assessment-page div.assessment-card.flip.flipped > div.inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

.assessment-page div.assessment-card.flip > div.inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    border-radius: 10px;
}

.assessment-page div.assessment-card.flip > div.inner > div.front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
}

.assessment-page div.assessment-card.flip > div.inner > div.front,
.assessment-page div.assessment-card.flip > div.inner > div.back-card {
    page-break-inside: avoid;
    background-color: white;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #D3D9ED;
}

.assessment-page div.assessment-card.flip.flipped > div.inner > div.back-card {
    z-index: 3;
    -ms-transform: scaleX(-1);
    -ms-transition: z-index 0.6s;
}

.assessment-page div.assessment-card.flip > div.inner > div.back-card {
    transform: rotateY(180deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
    position: absolute;
    top: 0;
}

.print.assessment-page .assessment-card:not(.flipped) .back-card {
    display: none;
}

.assessment-page .back-card > .option-column, .front > .option-column {
    margin-top: -10px;
}

.assessment-page .option-column {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.assessment-page .option-column > a {
    padding: 2px 15px 15px !important;
    color: #818BAD;
    margin: 0 !important;
}

.assessment-page div.assessment-card.flip > div.inner > div > span.name, div.perf-card > span.name {
    text-align: left;
    color: #455076;
    width: 100%;
    height: 29px;
    font-size: 19px;
    font-weight: 400;
    padding-right: 12px;
}

.assessment-page div.assessment-card.flip > div.inner > div > span, div.perf-card > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.assessment-page div.assessment-card.flip > div.inner > div > span.address, div.perf-card > span.status  {
    color: #818BAD;
    text-align: left;
    font-size: 15px;
    height: 41px;
    width: 100%;
    font-weight: 400;
    margin-top: 5px;
    padding-right: 12px;
}

.assessment-page div.pie-wrapper {
    width: 220px;
    margin: 20px auto 0;
}

.assessment-page div.pie {
    margin-bottom: 5px;
}

.assessment-page .pie-legend , div.perf-card .pie-legend {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.assessment-page .pie-legend .key, div.perf-card .pie-legend .key {
    margin: 0 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #A4ACC7;
}

.assessment-page .pie-legend .bullet, div.perf-card .pie-legend .bullet {
    transform: scale(2) translateY(-1px);
    margin-right: 0.25rem;
}

.assessment-page div.assessment-card-properties {
    height: 238px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.assessment-page div.assessment-card-property-row {
    width: 100%;
}

.assessment-page span.property-name {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #6280FF;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 1px;
    height: 25px;
    width: 50%;
    padding-top: 3px;
    margin-bottom: 9px;
}

.assessment-page span.property-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 15px;
    color: #455076;
    font-weight: 400;
    height: 25px;
    width: 50%;
    margin-bottom: 9px;
    text-align: right;
    overflow: visible;
}

.assessment-page div.assessment-card-options-property-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.assessment-page div.options {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.assessment-page div.options div.chart-icon-wrapper {
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.assessment-page div.options .option {
    margin-left: 10px;
}

.assessment-page div.options div.chart-icon-wrapper {
    background-color: #6280FF;
    color: white;
    border-radius: 5px;
    padding: 6px;
    width: 30px;
    height: 30px;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

.assessment-page div.options div.chart-icon-wrapper svg.table-breakdown,
.assessment-page div.options div.chart-icon-wrapper svg.chart {
    background-color: #6280FF;
    color: white;
    border-radius: 5px;
    padding: 6px;
    width: 30px;
    height: 30px;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

.assessment-page div.options div.chart-icon-wrapper i {
    color: white;
    padding-left: 1px;
}

.assessment-page .pie-legend .grid {
    color: #6280FF;
}

.assessment-page .pie-legend .solar {
    color: #FFBE55;
}

.pie-legend .battery {
    color: #afeaeb;
}

.assessment-page .back svg path {
    fill: white;
}

.assessment-page .tooltip {
    position: relative;
    display: inline-block;
}

.assessment-page .tooltip .tooltiptext {
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    width: 180px;
    background-color: #1D253E;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 20px 20px;
    position: absolute;
    z-index: 1;
    top: -75px;
    bottom: 150%;
    height: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.assessment-page .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1D253E transparent transparent transparent;
}

.assessment-page div.panel > div.panel-inner > h1 {
    font-size: 20px;
    font-weight: 400;
    color: #455076;
    margin: 0;
}

.assessment-page div.panel > div.panel-inner > p {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    color: #818BAD;
    width: 750px;
}

.assessment-page div.panel > div.panel-inner > img {
    border-radius: 10px;
    margin-top: 41px;
    max-height: 400px;
    display: block;
    margin-bottom: 20px;
}

.assessment-page div.panel > div.panel-inner div.next-button-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}

.assessment-page div.panel > div.panel-inner div.next-button-row > a.button.next,
.assessment-page div.panel > div.panel-inner div.next-button-row > button.next {
    width: 330px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assessment-page div.panel > div.panel-inner div.next-button-row > a.button.large,
.assessment-page div.panel > div.panel-inner div.next-button-row > a.button.next,
.assessment-page div.panel > div.panel-inner div.next-button-row > button.large,
.assessment-page div.panel > div.panel-inner div.next-button-row > button.next {
    margin: 0 20px 0 0;
    height: 58px;
    font-size: 18px;
    font-weight: 400;
}

.assessment-page a.compare-more-systems {
    border: 1px solid #6280FF;
    color: #6280FF !important;
    background-color: white !important;
}

.assessment-page a.compare-more-systems i.fa.fa-chevron-right {
    display: none;
}

.assessment-page div.panel div.systems {
    flex-wrap: wrap;
    width: 780px;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(226px, 1fr));
    grid-gap: 40px;
}

.assessment-page div.panel div.systems > div.system-card {
    background-color: white;
    cursor: pointer;
    position: relative;
    width: 246px;
    border: 1px solid #D3D9ED;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    border-radius: 10px;
    padding: 25px 25px 10px;
    margin: 0 auto 25px;
}

.assessment-page div.panel div.systems > div.system-card.chosen {
    position: relative;
    padding: 23px 23px 8px;
    border: 3px solid #6280FF;
}

.assessment-page div.panel div.systems span.power-factor {
    display: block;
    font-size: 70px;
    text-align: center;
    font-weight: 400;
    font-family: var(--font-family);
    margin: 40px auto 20px;
    color: #6280FF;
}

.assessment-page div.panel div.systems > div.system-card > h3,
.assessment-page div.panel div.systems > div.system-card > h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #455076;
    font-size: 17px;
    width: 100%;
    text-align: center;
    font-weight: 400;
}

.assessment-page div.panel div.systems > div.system-card > div.system-label {
    position: absolute;
    background-color: white;
    color: #6280FF;
    border: 1px solid #D3D9ED;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 200px;
    height: 60px;
    font-size: 15px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
    top: -45px;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
}

.assessment-page div.panel div.systems > div.system-card > div.pie-wrapper {
    width: 100%;
    margin: 40px 0 0;
}

.assessment-page div.panel div.systems > div.system-card > div.property {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.assessment-page div.panel div.systems > div.system-card > div.property > span {
    display: inline-block;
    width: 50%;
    font-size: 12px;
    height: unset;
    margin: 0;
}

.assessment-page div.panel div.systems > div.system-card > div.property span.property-value {
    text-align: right;
}

.assessment-page div.panel div.systems > div.system-card > div.property > span {
    display: inline-block;
    width: 50%;
    font-size: 12px;
    height: unset;
    margin: 0;
    white-space: nowrap;
}

.assessment-page div.panel div.systems > div.system-card.contract {
    width: 345px;
}

.assessment-page div.panel div.systems.contracts {
    grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
}

.assessment-page div.panel .all-contracts .systems.contracts {
    margin: 40px 0 20px;
    grid-template-columns: repeat(3, minmax(226px, 1fr));
    width: 100%;
}

.assessment-page div.panel div.systems > div.system-card.contract div.cashflow.beam-chart {
    margin: 40px 0 5px;
    height: 122px;
}

.assessment-page .print-only {
    display: none;
}

.assessment-page .ReactTable .rt-thead.-header {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.assessment-page .rt-th, .table-system-name {
    color: #6280FF !important;
    font-size: 14px;
    cursor: pointer;
    padding: 10px !important;
}

.text-align-left {
    text-align: left !important;
}

.assessment-page .ReactTable .rt-tbody .rt-td {
    font-size: 14px;
    padding: 10px;
    color: #818BAD;
}

.assessment-page .ReactTable .rt-tr-group:hover {
    background-color: rgba(98, 128, 255, 0.1);
}

.assessment-page .ReactTable .rt-thead .rt-th.-sort-asc,
.assessment-page .ReactTable .rt-thead .rt-td.-sort-asc {
    box-shadow: inset 0 3px 0 0 #6280FF;
}

.assessment-page .ReactTable .rt-thead .rt-th.-sort-desc,
.assessment-page .ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: inset 0 -3px 0 0 #6280FF;
}

.assessment-page div.chart-controls {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 40px;
    padding-right: 80px;
}

.assessment-page div.chart-controls div.interval-step,
.assessment-page div.chart-controls div.interval-chart-type,
.assessment-page div.chart-controls input.date-picker,
.assessment-page div.chart-controls div.y-axis,
.assessment-page div.chart-controls div.interval-select {
    border: 1px solid #D3D9EB;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    margin: 0 15px 0 0;
    align-items: center;
}

.assessment-page div.chart-controls div.interval-step label,
.assessment-page div.chart-controls div.interval-step button,
.assessment-page div.chart-controls div.interval-chart-type label,
.assessment-page div.chart-controls div.interval-chart-type button,
.assessment-page div.chart-controls div.y-axis label,
.assessment-page div.chart-controls div.y-axis button,
.assessment-page div.chart-controls div.interval-select label,
.assessment-page div.chart-controls div.interval-select button {
    border: none;
    margin: 5px;
    border-radius: 0;
    color: #A4ACC7;
    background-color: transparent;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 10px;
}

.assessment-page div.chart-controls div.interval-chart-type button.active {
    color: var(--brand-color);
    font-weight: 500;
}

.assessment-page div.chart-controls div.interval-select button.active {
    color: var(--brand-color);
    font-weight: 500;
}

.assessment-page div.chart-controls div.interval-step {
    width: 100px;
}

.assessment-page div.chart-controls div.react-datepicker-wrapper {
    margin-right: 15px;
}

.assessment-page div.chart-controls input.date-picker {
    text-align: center;
    color: #6280FF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

.assessment-page input.date-picker {
    height: 62px;
    background-color: transparent;
}

.assessment-page div.chart-controls div.y-axis {
    padding: 0 10px;
}

.assessment-page div.chart-controls div.y-axis label {
    width: 70px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assessment-page div.chart-controls div.y-axis input {
    margin: 0;
    border: none;
    font-size: 12px;
    padding: 5px;
    width: 60px;
    color: #6280FF;
    text-align: center;
    box-shadow: none;
}

.assessment-page table.aggregate {
    width: 100%;
    color: #1D253E;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 15px;
}

.assessment-page table.aggregate tr {
    border-bottom: 1px solid var(--border-color);
}

.assessment-page table.aggregate tr.strong-row th,
.assessment-page table.aggregate tr.strong-row td {
    font-weight: bold;
    background: var(--border-lighter-color);
}

.assessment-page table.aggregate thead tr {
    border-bottom: 1px solid #1D253E;
}

.assessment-page table.aggregate th:last-child,
.assessment-page table.aggregate td:last-child {
    font-weight: 900;
}

.assessment-page table.aggregate tr.sub th {
    padding-left: 20px;
}

.assessment-page table.aggregate td:nth-child(2) {
    background: var(--border-lighter-color);
}

.assessment-page table.aggregate tr.end-total {
    border-top: 1px solid black;
    background: var(--border-lighter-color);
    font-weight: 900;
    padding-left: 0;
}

.assessment-page table.aggregate tr.end-total td {
    font-weight: 900;
}

.assessment-page table.aggregate tr.end-total th {
    font-weight: 900;
    padding-left: 10px;
}

.assessment-page table.aggregate td:last-child {
    background: var(--border-lighter-color);
}

.assessment-page table.aggregate thead:not(:first-child) tr h3 {
    margin-top: 20px;
}

.assessment-page table.aggregate th h3 {
    padding: 10px 10px 10px 0;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

.assessment-page table.aggregate th:first-child {
    text-align: left;
}

.assessment-page table.aggregate th {
    cursor: pointer;
    font-weight: 400;
    padding: 5px 10px;
    text-align: right;
    font-size: 13px;
    color: #455076;
    white-space: nowrap;
}

.assessment-page table.aggregate tbody th {
    width: 22em;
}

.assessment-page table.aggregate .collapse-marker {
    margin-right: 5px;
    transition: transform 150ms;
}

.assessment-page table.aggregate .collapse-marker.collapsed {
    transform: rotate(-90deg);
}

.assessment-page table.aggregate tr:first-child th {
    white-space: normal;
}

.assessment-page table.aggregate tr.total th,
.assessment-page table.aggregate tr.total td {
    font-weight: 900 !important;
}

.assessment-page table.aggregate td {
    font-size: 11px;
    padding: 0 10px;
    text-align: right;
    color: #818BAD;
    font-weight: 500;
}

.assessment-page td, th {
    padding: 0;
}

.assessment-compare-page .assessment-link {
    position: relative;
    bottom: var(--spacing-03);
}

.print {
    max-width: 1118px;
    min-width: 1118px;
    margin: auto;
    background-color: white;
}

.print .page {
    margin: 0;
    width: 100%;
    position: relative;
    padding-top: 62%;
    page-break-inside: avoid;
}

.print .page-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0px 70px;
}

.print div.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #818BAD;
    width: calc(100%);
}

.print .logo img {
    max-width: 200px;
    max-height: 65px;
}

.print .address {
    width: 300px;
    text-align: right;
    line-height: 20px;
}

.print h1 {
    color: #6280FF;
    font-size: 30px;
    margin-top: 70px;
    margin-bottom: 0;
    font-weight: 400;
}

.print .page-inner > p {
    line-height: 20px;
    font-size: 13px;
    color: #1D253E;
}


.print .page-inner > p a {
    color: #6280FF;
    font-weight: 400;
    text-decoration: underline;
}

.print .process {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 20px 0 10px;
}

.print .process-header {
    margin-top: 80px;
    color: var(--brand-color);
}

.print .step {
    position: relative;
    width: 31%;
}

.print .process .step .img-container {
    height: 12rem;
}

.print .process .step img {
    width: 100%;
}

.print .step p.info-text {
    margin-top: -25px;
    font-weight: 500;
    font-size: 11px;
    line-height: 20px;
    color: #818BAD;
}

.print .panel {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.print .panel .panel-inner {
    padding: 0 !important;
}

.print .panel .assessment-card {
    float: right;
    width: 300px;
    height: unset;
    right: 0px !important;
    top: -18px !important;
}


.print .panel .assessment-card .inner {
    box-shadow: none;
}

.print .panel .assessment-card .back-card, .print .panel .assessment-card .front {
    padding: 20px 15px 0 !important;
}

.print .panel .assessment-card span.name {
    margin-top: 0 !important;
    height: unset !important;
    margin-bottom: 15px;
}

.print .address {
    width: 300px;
    text-align: right;
    line-height: 20px;
}

.print .panel .assessment-card div.pie-wrapper {
    width: 150px;
    margin-top: 0;
}

.print .assessment-card-properties {
    height: 210px !important;
}

.print .panel span.property-name, .print .panel span.property-value {
    font-size: 12px !important;
    margin-bottom: 0 !important;
}

.print .panel .options {
    height: 30px !important;
}

.print .panel .options svg {
    box-shadow: none !important;
    width: 23px !important;
    height: 23px !important;
}

.print .panel nav {
    display: none;
}

.print .panel .panel-inner h1 {
    color: #6280FF !important;
    font-size: 26px !important;
    margin-top: 44px !important;
    font-weight: 400 !important;
}

.print .panel .panel-inner p {
    line-height: 20px !important;
    color: #1D253E !important;
    width: 65% !important;
    margin-top: 0;
}

.print .panel .systems {
    width: 65% !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    grid-gap: 15px !important;
}

.print .panel .systems .system-card {
    width: 200px !important;
    padding: 23px 12px 12px !important;
    box-shadow: none !important;
}

.print .panel .systems .system-card h2.old {
    font-size: 15px !important;
}

.print .panel .systems .system-card .system-label {
    width: 150px !important;
    height: 40px !important;
    font-size: 12px !important;
    top: -25px !important;
    box-shadow: none !important;
}

.print .panel .systems .pie-wrapper {
    width: 100% !important;
    margin-top: 25px !important;
}

.print .panel div.property {
    margin-bottom: 5px !important;
}

.print .panel-inner > h2 {
    color: #6280FF !important;
    font-size: 26px !important;
    margin-top: 70px !important;
    font-weight: 400 !important;
}

.print .assessment-summary-table .rt-td, .print .assessment-summary-table .rt-th {
    font-size: 9px !important;
    padding: 2px 10px !important;
}

.print .panel div.energy {
    margin-top: 40px;
}

.print .panel .system-card.contract {
    width: 300px !important;
    margin-bottom: 0 !important;
}

.print div.panel div.systems.contracts {
    grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)) !important;
}

.print h2 {
    color: #6280FF;
    font-size: 26px;
    margin-top: 70px;
    font-weight: 400;
}

.print div.next-step {
    display: flex;
    flex-direction: row;
}

.print .number {
    margin-top: 70px;
    margin-right: 30px;
    height: 3rem;
    width: 3rem;
    text-align: center;
    background: #6280FF;
    color: white;
    border-radius: 0.8rem;
    line-height: 3rem;
    font-size: 25px !important;
}

.print .number.hollow {
    background: white;
    border: 2px solid #6280FF;
    color: #6280FF;
    font-size: 20px !important;
}

.print .next-step-content {
    width: 90%;
}

.print div.next-step h2.old {
    margin: 85px 0 15px !important;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
}

.print div.next-step h3 {
    font-size: 28px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 40px;
    color: #171b1f;
    letter-spacing: normal !important;
}

.print .row {
    display: flex;
    flex-direction: row;
}

.print .col.half {
    width: 50%;
    padding-right: 50px;
}

.print div.next-step h4 {
    font-size: 20px;
    margin-top: 0 !important;
    color: #6280FF;
    margin-bottom: 20px;
    font-weight: 500;
    display: block;
    position: relative;
}

.print .next-step-content p {
    color: #818BAD;
    line-height: 25px;
}

.print div.next-step p {
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 15px;
    color: #171b1f;
    font-size: 14px;
}

.print .carousel {
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: space-around;
    margin: 2em auto;
    align-items: center;
}

.print .carousel img {
    display: inline-block;
    width: auto;
    max-width: calc(20% - 2rem);
    max-height: 60px;
    margin-right: 2rem;
}

.print ul.checklist {
    margin-top: 0;
    list-style: none;
}

.print ul {
    padding-left: 0px;
    color: var(--brand-color);
    font-weight: 400;
    margin-bottom: 30px;
    margin-top: 30px;
    list-style: none;
}

.print ul.checklist li {
    font-size: 17px;
    font-weight: 400;
    color: #6280FF;
    margin-bottom: 15px;
    position: relative;
    padding-left: 35px;
}

.print ul.checklist li:before {
    content: url(/img/icon-check.svg);
    width: 24px;
    height: 24px;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
}

.print img.auction-chart {
    width: 50%;
    margin-bottom: 40px;
}

.highcharts-tooltip {
    border-radius: 5px;
}

.chart-tooltip {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 20 !important;
    background-color: #2B3048;
    padding: 10px;
    border-radius: 5px;
    width: 330px;
}

.chart-tooltip-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 25px;
}

.chart-tooltip-row .squiggle {
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: bolder;
}

.tooltip-chart-symbol {
    display: inline-block;
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

.chart-tooltip-label,
.chart-tooltip-value {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin: 0 20px;
}

.chart-tooltip-label {
    font-size: 11px;
    margin-bottom: 5px;
}

.highcharts-tooltip-container {
    z-index: 3;
}

/*HNCS*/

.hncs-color {
    color: var(--hncs-color);
}


.hncs {
    font-family: "Avenir Next Pro Regular", sans-serif !important;
}

.hncs h1, .hncs.print h2.old, .hncs h3, .hncs span.property-name, .hncs .system-label, .hncs a, .hncs .rt-td.table-system-name,
.hncs .rt-th, .hncs span.power-factor, .hncs div.panel > div.panel-inner > h1 {
    color: var(--hncs-text-color) !important;
}

.hncs span.name, .hncs span.address, .hncs .property-value, .hncs div.system-card h2.old, .hncs div.address, .hncs .rt-td,
.hncs .key, .hncs p {
    color: var(--hncs-text-color-dark) !important;
}

.hncs .front,
.hncs .back-card,
.hncs .system-card,
.hncs .system-label {
    border: 1px solid var(--hncs-border-color) !important;
}

.hncs div.system-card.chosen {
    border: 3px solid var(--hncs-color) !important;
}

.hncs svg.table-breakdown,
.hncs svg.chart {
    background-color: var(--hncs-text-color) !important;
}

.hncs .solar-export {
    margin-top: 50px;
}

.hncs-savings {
    color: #96a04e;
}

.hncs-cost {
    color: #616737;
}

.info {
    transition: all .2s ease-in-out;
    opacity: .4;
    position: relative;
}

.info img {
    width: 42px;
    position: absolute;
    padding: 5px 10px 0;
    top: -6px;
    margin-left: -6px;
}

.info:hover, .info:active, .info:focus {
    opacity: 1;
}

.hncs-pdf-border {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 60px);
    height: calc(100% - 126px);
    margin: 40px 30px;
    border: 2px solid var(--hncs-color);
}

.hncs-footer {
    width: 100%;
    padding: 40px 30px;
}

.hncs-footer .hncs-page-num {
    position: absolute;
    right: 30px;
    margin-top: -10px;
    padding: 0 10px 10px;
    letter-spacing: normal !important;
}

.hncs-footer .hncs-footer-top {
    width: 100%;
    color: var(--hncs-text-color-dark);
    font-size: 9px;
    letter-spacing: normal !important;
    text-align: center;
    padding: 2px;
}

.hncs-footer .hncs-footer-middle {
    width: 100%;
    color: white;
    background-color: var(--hncs-color);
    display: flex;
    justify-content: center;
    padding: 4px;
    font-weight: 600;
    line-height: normal;
}

.hncs-footer .hncs-footer-bottom {
    width: 100%;
    font-size: 11px;
    letter-spacing: normal !important;
    display: flex;
    justify-content: center;
    padding: 5px;
    line-height: 1.8;
    text-align: center;
    color: white;
    background-color: var(--hncs-background-color);
}

/*inner-west-council*/

div.page img.inner-west-council {
    width: 1200px;
    top: -22px;
    left: -35px;
    position: absolute;
}

h1.inner-west-council-title {
    color: white;
    z-index: 10;
    position: relative;
    top: -400px;
    font-size: 40px;
    font-weight: 600;
    left: 16px
}


hr.simple {
    border-bottom: 1px solid #D3D9ED;
    margin: 15px;
}

.breakdown-capital-costs {
    border-radius: 10px;
    border: 1px solid #D3D9ED;
    padding: 20px 32px;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
}

.breakdown-capital-costs h3 {
    margin-top: 0;
    margin-bottom: 30px;
}

.breakdown-cards-wrapper {
    display: flex;
    justify-content: center;
}

.breakdown-cards {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;
    margin-bottom: 20px;
    min-width: 900px;
    max-width: 1000px;
}

.breakdown-system-row {
    margin-bottom: 10px;
    justify-content: space-between;
    flex-direction: row;
    display: flex;
}

.breakdown-capital-costs .button-primary {
    /*float: right;*/
    float: right;
}

.breakdown-system-row .property-name {
    padding: 0 !important;
    margin: 0 !important;
}

.breakdown-system-row .property-value,
.breakdown-system-row .property-name {
    height: 30px !important;
    margin-top: 5px !important;
}

.breakdown-system-row .property-value {
    width: 160px !important;

    font-size: 12px !important;
}

.actions button {
    margin-top: 15px !important;
    width: 100%;
}

.assessment-page .quotes-table-wrapper {
    position: relative;
    width: 100%;
    overflow-x: scroll;
}

.assessment-page table.quotes {
    table-layout: fixed;
    margin: 20px 0;
    height: 100%;
    overflow-x: scroll;
    border-collapse: collapse;
    border-spacing: 0;
}

.assessment-page table.quotes tbody {
    height: 100%;
}

.assessment-page table.quotes tr {
    height: 100%;
}

.assessment-page table.quotes td:first-child {
    padding-left: 0;
}

.assessment-page table.quotes td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
}

.assessment-page table.quotes td {
    height: 100%;
    padding: 0 15px;
}

.assessment-page table.quotes tr:first-child td:first-child .cell {
    border-top-left-radius: 10px;
}

.assessment-page table.quotes tr:last-child .cell {
    border: 1px solid #D3D9ED;
}

.assessment-page table.quotes tr:last-child .cell {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.assessment-page table.quotes tr:first-child .cell {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.assessment-page table.quotes .cell {
    height: 100%;
    width: 376px;
    background-color: white;
    display: block;
    position: relative;
    padding: 30px 30px;
    border: 1px solid #D3D9ED;
    border-bottom: none;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    text-align: left;
}

.assessment-page table.quotes .cell h1 {
    color: #455076;
    width: 100%;
    height: 29px;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    margin: 0;
    padding-right: 20px;
}

.assessment-page table.quotes .cell p {
    color: #818BAD;
    font-size: 15px;
    width: 100%;
    line-height: 1.5rem;
    margin: 0;
    padding: 7px 0 20px;
    text-align: left;
}

.assessment-page .quotes p {
    font-weight: 300;
    color: #818BAD;
    width: 600px;
    margin: 30px auto;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
}

.assessment-page .checkbox-right-corner {
    position: absolute;
    right: 15px;
    top: 15px;
}

.assessment-page table.quotes .cell .checkbox3 {
    cursor: pointer;
}

.assessment-page .checkbox3 {
    border: 2px solid #455076;
    border-radius: 5px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}

.assessment-state {
    height: calc(100% - 170px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.assessment-state h2.old {
    font-weight: 300;
    color: #455076;
    margin: 0;
}

.assessment-state p {
    padding: 10px 10px 0;
    font-size: 14px;
    color: #818BAD;
    font-weight: 300;
    text-align: center;
}

.assessment-state a {
    color: #6280FF;
    margin-top: 70px;
}

.assessment-state i {
    color: #818BAD;
}

.icon path {
    fill: var(--brand-color);
}

svg.icon  {
    width: 1.2rem;
    height: 1.2rem;
}

svg.new-icon {
    width: 1.2rem;
    height: 1.2rem;
    max-width: 32px;
    margin: 2px;
}

svg.icon.danger path {
    fill: var(--danger-color);
}

button.danger {
    background-color: var(--danger-color);
    color: white;
}

button.default {
    background-color: white;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
}

.empty-state-text {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--light-color);
}

.react-datepicker-popper {
    z-index: 2 !important;
}

.react-datepicker__time-container {
    /*font-size: 11px;*/
}

.react-datepicker-wrapper {
    width: 100%;
}

.react-datepicker__input-container {
    width: 100%;
}

.react-datepicker__time-container,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: 100px !important;
}

button {
    padding: 0 var(--spacing-04);
    border-radius: 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    height: 40px;
    align-items: center;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: 110px !important;
}

.input-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    max-height: 500px;
    overflow-y: scroll;
    z-index: 2;
    padding: 10px 15px;
    color: var(--dark-color);
    background-color: white;
    border-radius: 0 0 5px 5px;
    font-size: var(--font-size-02);
    font-weight: 500;
    transition: all .2s ease-in-out;
    box-shadow: rgba(95, 120, 149, 0.2) 0px 0px 0px 1px, rgba(95, 120, 149, 0.1) 0px 8px 8px;
}

.input-dropdown.active {
    display: block;
}

.input-dropdown .option {
    padding: 5px 0;
    cursor: pointer;
}

.input-dropdown .option label {
    padding: 5px 0;
    cursor: pointer;
}

.input-dropdown .option:hover {
    color: var(--brand-color)
}

.input-dropdown.address-dropdown label {
    margin-top: 0;
    font-size: 0.7rem;
}

.address-search-input {
    position: relative;
}

.center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.offers-table-actions {
    margin-top: var(--spacing-04);
    margin-left: var(--spacing-06);
    display: flex;
}

.offers {
    height: calc(100vh - 0px);
    padding-top: 20px;
    padding-left: 20px;
}


.offers-table-with-toolbar-space {
    padding-top: 90px;
}

.offers h1 {
    margin-left: 20px;
}

.offers .site {
    margin-top: 50px;
}

.offers table {
    width: 100%;
    display: block;
    overflow: auto;
    white-space: nowrap;
    border-collapse: separate;
    padding-bottom: 40px;
    height: calc(100vh - 180px);
}

.offers-table-with-toolbar-space table {
    height: calc(100vh - 300px);
}

.offers th,
.offers td,
.offers table {
    /*border: 1px solid black;*/
    color: #222427;
}

.offers table {
    /*border-bottom: 1px solid #CAD3EA;*/
}

.offers thead {
    /*border-bottom: 1px solid #CAD3EA;*/
}

.offers td {
    color: #3C4755;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*border-right: 1px solid #DFE5F2;*/
}

.offers td,
.offers th {
    padding: 5px 20px;
    font-size: 14px;
    text-align: center;
}

.offers tbody tr th:first-child,
.offers thead tr th {
    min-width: 300px;
    max-width: 300px;
    font-weight: 500;
}

.offers tbody tr td {
    text-align: right;
    min-width: 300px;
    max-width: 300px;
}

.offers tbody tr th:first-child {
    text-align: left;
    /*border-right: 1px solid #DFE5F2;*/
}

.offers tbody tr:last-child {
    text-align: right;
    /*border-bottom: 1px solid #CAD3EA;*/
}

.offers thead tr th:first-child {
    min-width: 250px;
    max-width: 250px;
    font-size: 16px;
    text-align: left;
}

.offers table thead tr th:first-child {
    visibility: visible;
}

.offers table thead tr th {
    visibility: hidden;
}

.offers table thead:first-child tr th {
    visibility: visible;
}

.offers thead.site {
    border-bottom: none;
}

.offers thead.site th {
    padding-top: 30px;
}

.offers thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
}

.offers thead th:first-child {
    left: 0;
}

.offers tbody td:first-child,
.offers tbody th:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
}



/* TODO what is this for? */
th {
    transform: scale(0.99999999);
}

.offers thead th:not(:first-child) {
    z-index: 1;
}

.offers thead:first-child th {
    z-index: 3;
}

.offers thead:first-child th:first-child {
    z-index: 4;
}

.offers tbody:nth-child(2) th,
.offers tbody:nth-child(2) td {
    border-top: none !important;
}

.offers th.chosen:not(.sub) {
    background-color: #506AF8 !important;
    color: white;
}

.offers tr.chosen {
    background-color: #e7eafe !important;
    color: white;
}


.offers.initial_offers_decision th.assessment,
.offers.initial_offers_decision th.supplier {
    cursor: pointer;
    text-align: right;
}

.offers:not(.initial_offers_decision) th.assessment a,
.offers:not(.initial_offers_decision) th.supplier a {
    cursor: default;
}

.offers th.assessment a,
.offers th.supplier a {
    transition: none;
}

.offers th.chosen.sub,
.offers td.chosen {
    background-color: #e7eafe !important;
}

.offers .title {
    color: var(--brand-color);
    transition: none;
}

.offers .chosen .title {
    color: white;
}

.offers table thead.site tr:first-child th:first-child {
    z-index: 3;
}

.offers .top-pad {
    padding-top: 20px;
}

.settings-page h2.old {
    font-size: 1.8em;
    margin-top: 50px;
}

.settings-page h3 {
    font-size: 1.25em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.settings-page .multi-select {
    margin-right: var(--spacing-05)
}

.settings-page .details-section {
    max-width: 700px;
    padding-left: 1px;
}

.settings-page .details-section input.old,
.settings-page .details-section .logo-upload,
.settings-page .details-section select.old {
    max-width: 400px;
}

input[type=text].danger {
    color: var(--danger-color) !important;
}

.settings-page .details-section > label {
    font-weight: 600;
    font-size: var(--font-size-03);
}

.settings-page .supplier-scoring-box {
    border-radius: 5px;
    border: 1px solid var(--border-light-color);
    max-width: 880px;
}

.settings-page .supplier-scoring-box hr {
    margin: 0;
    opacity: revert;
}

.settings-page .supplier-scoring-box p {
    margin-bottom: var(--spacing-03);
}

.settings-page .supplier-scoring-box.bold {
    border: 2px solid var(--dark-color);
}

.settings-page .supplier-scoring-box.bold h3 {
    font-weight: bold;
}

.settings-page label.supplier-score {
    color: var(--text-color);
    font-size: var(--font-size-06);
    width: 100%;
    padding-right: var(--spacing-01);
    display: flex;
    margin: 0;
    font-weight: bold;
    justify-content: end;
    align-items: center;
}

.settings-page .score-inputs-table {
    margin-left: var(--spacing-05);
    margin-bottom: var(--spacing-03);
}

.settings-page .score-inputs-table-content {
    font-size: var(--font-size-01);
}

.settings-page .number-input-section {
    max-width: 300px;
    padding-bottom: var(--spacing-06);
}

.settings-page .capabilities-section {
    margin-top: var(--spacing-08);
}

.settings-page .insurances {
    display: grid;
    grid-column-gap: 20px;
    max-width: 1000px;
}

.settings-page .insurances h2.old, h3 {
    grid-column: 1 / 5;
}

.settings-page .insurances .col-1 {
    grid-column: 1 / 2;
    max-width: 220px;
}

.settings-page .insurances .col-2 {
    grid-column: 2 / 3;
}

.settings-page .insurances .col-3 {
    grid-column: 3 / 4;
    min-width: 200px;
}

.settings-page .insurances .col-4 {
    grid-column: 4 / 5;
}

.settings-page .full-width-input input.unit {
    width: 100%;
}

.logo-preview {
    display: flex;
    justify-content: space-around;
}

.logo-preview img {
    margin: var(--spacing-02);
    max-height: 85px;
    max-width: 80%;
}

/* Project Details Page */

.project-details {
    margin: var(--spacing-06);
}

.project-details .edit-project-btn {
    margin-top: var(--spacing-02);
    width: 180px;
}

.project-details h3 {
    font-size: var(--font-size-05);
    margin: var(--spacing-04) 0;
}

/* Project Feedback Page */

.project-feedback-page {
    margin: var(--spacing-06);
    padding-top: var(--spacing-01);
}

.project-feedback-page h2.old {
    font-size: var(--font-size-05);
    margin: var(--spacing-06) 0;
}

.project-feedback-page h3 {
    font-size: var(--font-size-04);
    margin: var(--spacing-06) 0;
}

.project-feedback-page h4 {
    font-size: var(--font-size-03);
    margin: var(--spacing-04) 0;
}

.project-feedback-page .feedback-grid {
    max-width: 600px;
}

/* Project Initial Offer Page */
/* TODO: split out 'section' stuff so it can be re-used for other pages */

section {
    padding: var(--spacing-07);
    border-bottom: 1px solid var(--border-light-color);
    max-width: 1600px;
}

.section-description h3 {
    font-size: var(--font-size-05);
    margin-bottom: var(--spacing-04);
}

.section-content h3 {
    margin-top: var(--spacing-06);
}

.section-content .input:first-of-type label {
    margin-top: 0;
}

.section-content .confirm {
    padding: 15px 0;
    display: flex;
    align-items: center;
}

.section-content .confirm span.text {
    margin-left: 15px;
}

.section-content .offer-detail-row {
    padding: 10px 0;
    max-width: 600px;
    position: relative;
}

.section-content .offer-detail-row .input-row .loading {
    width: 50px;
}

.section-content .offer-detail-row .input-row .loading:after {
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
    margin-left: 370px;
}

.section-content .offer-detail-row .input-row {
    position: relative;
}

.section-content .offer-detail-row-header {
    margin: 15px 0 0;
    font-size: var(--font-size-04);
}

.section-content .offer-detail-row-header:first-child {
    margin: 0;
}

.section-content .offer-detail-row .initial-offer-supplier-proposal-download {
    position: absolute;
    right: 0;
    bottom: 60px;
}

.offer-detail-score {
    font-size: var(--font-size-01);
    padding-bottom: var(--spacing-03);
}

.offer-detail-score label {
    margin-right: 0.4em;
}

.initial-offer-site-name {
    font-size: var(--font-size-05);
    margin-bottom: var(--spacing-04);
}

.grid-12 {
    display: grid;
    grid-template-columns: 25px auto auto auto auto auto auto auto auto auto auto auto auto 25px;
    grid-auto-columns: 1fr;
    grid-column-gap: 10px;
    padding-top: 25px;
}

.initial-offer-configurations {
    display: grid;
    max-width: 800px;
    align-items: center;
    row-gap: var(--spacing-03);
    /*grid-auto-rows: 40px;*/
    margin-top: var(--spacing-08);
}

.final-offer-configurations {
    max-width: 1100px;
}

.initial-offer-configurations h3 {
    font-size: var(--font-size-04);
    grid-column: 1 / 4;
}

.initial-offer-configurations input {
}

.initial-offer-configurations select {
}

.initial-offer-configurations .header-cell {
    font-weight: 500;
    font-size: var(--font-size-03);
}

.initial-offer-configurations .component-col {
    grid-column: 1 / 2;
}

.initial-offer-configurations .upload-input-col {
    grid-column: 1 / 2;
}

.initial-offer-configurations .target-col {
    grid-column: 2 / 3;
}

.initial-offer-configurations .offered-col {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
}

.initial-offer-configurations .section-line {
    grid-column: 1 / 4;
    border-top: 1px solid var(--border-color);
}

.initial-offer-configurations .offered-col {
    position: relative;
}

.initial-offer-configurations .offered-col div.tooltip {
    position: absolute;
    right: -30px;
}

.initial-offer-configurations .offered-col .tooltip {
    margin-left: var(--spacing-01);
}

.initial-offer-configurations .assessment-col {
    grid-column: 5 / 6;
}

.initial-offer-configurations .result {
    grid-column: 6 / 7;
}

.initial-offer-configurations .loading {
    position: relative;
    margin-left: var(--spacing-05);
}

.initial-offer-configurations svg.table-breakdown-link,
.initial-offer-configurations svg.link,
.initial-offer-configurations svg.chart-link {
    padding: 4px;
    width: 30px;
    height: 30px;
}

.initial-offer-configurations svg.table-breakdown-link path,
.initial-offer-configurations svg.link path,
.initial-offer-configurations svg.chart-link path {
    fill: var(--brand-color);
}

a svg.table-breakdown-link,
a svg.chart-link {
    padding: 4px;
    width: 30px;
    height: 30px;
}

a svg.table-breakdown-link path,
a svg.chart-link path {
    fill: var(--brand-color);
}

a.score-expand {
    float: right;
    font-size: 12px;
}

.initial-offers-page .beam-commission-table {
    display: grid;
    grid-auto-rows: 30px;
    max-width: 600px;
}

.initial-offers-page .beam-commission-table label {
    grid-column: 1 / 2;
}

.initial-offers-page .beam-commission-table .value {
    grid-column: 2 / 3;
    text-align: right;
}

.initial-offers-page .beam-commission-table .subtotal {
    grid-column: 3 / 4;
    text-align: right;
}

.save-initial-offers-changes-btn button {
    min-width: 140px;
    margin-right: var(--spacing-02);
}

#supplier-initial-offer-error.modal p {
    margin-right: 50px;
}

.late-submission-label {
    margin-top: var(--spacing-01);
    margin-bottom: var(--spacing-01);
}

.late-submission-label label {
    color: var(--danger-color);
    padding: var(--spacing-01) 6px;
}

.accept-late-submision {
    color: var(--brand-color);;
    cursor: pointer;
}

.advanced-table {
    width: 100%;
}

.advanced-table thead th {
    position: sticky;
    top: 0;
    background-color: white;
    font-size: var(--font-size-02);
    padding: var(--spacing-02) var(--spacing-03);
    box-shadow: inset 0 -1px 0 var(--border-color);
    letter-spacing: -.3px;
    color: var(--dark-color);
    font-weight: 500;
    max-width: 200px;
    text-align: left;
    cursor: pointer;
}

.advanced-table thead th:first-child {
    padding-left: var(--spacing-07);
}

.advanced-table thead th:last-child {
    padding-right: var(--spacing-07);
}

.advanced-table tbody tr {
    margin-bottom: 0;
    margin-top: 1px;
    font-size: var(--font-size-01);
    padding-top: 1px;
    border-bottom: 1px solid var(--border-light-color);
}

.advanced-table tbody td {
    padding: var(--spacing-02) var(--spacing-03);
    max-width: 200px;
}

.advanced-table tbody td:first-child {
    padding-left: var(--spacing-07);
}

.advanced-table tbody td:last-child {
    padding-right: var(--spacing-07);
}

.advanced-table .accounts-table-cell {
}

.no-margin {
    margin: 0 !important;
}

.not-clickable {
    pointer-events: none;
}

.clickable {
    cursor: pointer;
}

.full-width {
    width: 100%;
}

.page-actions-bar {
    display: flex;
    align-items: center;
    position: fixed;
    /* higher than hgroup, so tooltips are higher */
    z-index: 22;
    padding-top: var(--spacing-02);
    padding-left: var(--spacing-07);
    padding-bottom: var(--spacing-02);
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    background: white;
}

.page-actions-bar .message {
    margin-left: var(--spacing-04);
}

/* Project Timeline*/

.project-timeline {
    position: relative;
    display: flex;
    font-size: var(--font-size-02);
    flex-direction: row;
    margin-right: var(--spacing-07);
    margin-bottom: var(--spacing-05);
    margin-top: var(--spacing-03);
}

.project-timeline .future {
    opacity: 50%;
}

.project-timeline .arrow {
    margin: 0 var(--spacing-08);
    color: var(--light-color);
    margin-top: var(--spacing-02);
    padding-top: 0.3rem;
}

.project-timeline .arrow:first-child {
    display: none;
}

.project-timeline .stage {
    text-align: center;
    white-space: nowrap;
}

.project-timeline .stage-label {
    font-size: var(--font-size-03);
    color: var(--text-color);
    font-weight: 500;
    padding-top: var(--spacing-02);
    padding-bottom: var(--spacing-01);
}

.project-timeline .stage-label.current {
    font-weight: 600;
}

.project-timeline .stage-status {
    border-radius: 5px;
    color: var(--light-color);
    padding: var(--spacing-02) var(--spacing-03);
}

.project-timeline .stage-status.current {
    background: var(--brand-tint-color);
    color: var(--brand-color);
}

.project-timeline .stage-status.success.current {
    background: var(--happy-tint-color);
    color: var(--happy-color);
}

.project-timeline .stage-status.due.current {
    background: var(--danger-tint-color);
    color: var(--danger-color);
    border: 2px dashed var(--danger-color);
}

.project-timeline .stage-status.late.current {
    background: var(--warning-tint-color);
    color: var(--warning-color);
}

.total-border {
    font-weight: bold !important;
    border-top: 1px solid var(--border-light-color);
    padding-top: 30px !important;
}

table.assessment-config-summary {
    width: 100%;
    margin-top: var(--spacing-04);
    margin-bottom: var(--spacing-04);
    border: 1px solid var(--border-color);
}

table.assessment-config-summary td {
    padding: 0 var(--spacing-02);
    border: 1px solid var(--border-color);
    height: 40px;
}

.assessment-config-summary .unit-input input:first-child {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.assessment-config-summary .unit-input div.unit:last-child {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: 1px solid var(--border-color);
}

.assessment-config-summary td.input {
    padding: 0;
}

.multi-document-file {
    position: relative;
    display: block;
    padding: 10px;
    border: 1px solid var(--border-light-color);
    margin: 5px 0;
    border-radius: 3px;
}
.v3-style .multi-document-file {
        padding: 0px;
        margin: 0px 0;
    }

.multi-document-file .filename {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 550px;
}

.v3-style .multi-document-file .filename {
    font-size: small;
    text-wrap: wrap;
}
.multi-document-file .delete {
    position: absolute;
    right: 10px;
    top: 12px;
}

.supplier-conditions {
    overflow: scroll;
}

.supplier-conditions h3 {
    margin-top: 20px;
}

.supplier-conditions ul ul {
    margin-left: 20px;
}

.supplier-conditions h1:not(.top-header), h2.old {
    margin-top: var(--spacing-06);
}

.supplier-conditions ul li {
    margin-left: var(--spacing-06);
    list-style: circle;
    font-size: var(--font-size-02);
    color: var(--text-color);
}

.system-design-image {
    border-radius: var(--spacing-01);
    object-fit: cover;
}

.system-design-image.full-size {
    border-radius: 0;
    object-fit: contain;
}

.offer-link-fa {
    font-size: 20px;
    position: relative;
    bottom: -2px;
    margin: 0 6px;
}

.tab-content {
    margin: var(--spacing-04);
}

table.auction {
    width: 780px;
}

div.place-bid-row {
    width: 780px;
    padding: 0 0 15px 0;
}

div.place-bid-input-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

div.place-bid-input-section * {
    margin: 0 20px;
}

div.place-bid-input-section label.symbol {
    font-size: 20px;
}

div.place-bid-input-section label {
    text-align: center;
}

div.place-bid-input-section label h4 {
    font-weight: 600;
    padding-bottom: 10px;
}

div.place-bid-input-section input {
    width: 170px !important;
}

table.auction td, table.auction th {
    padding: 10px 15px;
    text-align: right;
}

table.auction th {
    /*text-align: left;*/
}

table.auction .number-circle {
    float: right;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 3px;

    text-align: center;

    font: 20px Arial, sans-serif;
}

table.auction .current-rank-success.number-circle {
    border: 2px solid var(--happy-color);
    color: var(--happy-color);
}

table.auction .current-rank-bad.number-circle {
    color: var(--danger-color);
    border: 2px solid var(--danger-color);
}

table.auction thead th {
    position: sticky;
    top: 0;
}

table.auction tbody td {
    color: var(--light-color);
}

table.auction td:first-child {
    /*font-size: 20px;*/
}

table.auction td:last-child {
    color: var(--light-color);
}

table.auction td.score {
    color: var(--brand-color);
    font-weight: 500;
    font-size: 20px;
}

table.auction thead {
    background-color: var(--border-color);
}

table.auction tbody tr:first-child {
}

table.auction tbody tr:nth-child(even) {
    background-color: var(--border-lighter-color);
}

table.auction * tr *:first-child {
    text-align: left;
}

table.auction * tr *:nth-child(1) {
    width: 120px;
}

table.auction * tr *:nth-child(2) {
    width: 110px;
}

table.auction * tr *:nth-child(4) {
    min-width: 400px;
}

.auction-details {
    display: flex;
}

.auction-detail.losing label,
.auction-detail.losing .value {
    border-color: var(--error-color) !important;
}

.auction-detail.losing label,
.auction-detail.losing .value {
    color: var(--error-color) !important;
}

.auction-detail.winning label,
.auction-detail.winning .value {
    border-color: var(--happy-color) !important;
}

.auction-detail.winning label,
.auction-detail.winning .value {
    color: var(--happy-color) !important;
}

.auction-detail {
    padding-bottom: 15px;
    display: flex;
    margin-right: 20px;
}

.auction-detail label {
    display: inline-block;
    width: 190px;
    height: 40px;
    line-height: 40px;

    background-color: whitesmoke;
    border: 1px solid #D3D9ED;
    border-radius: 5px 0 0 5px;
    margin: 0;
    /*padding: 15px 10px;*/
    font-size: var(--font-size-02);
    text-align: center;
    justify-content: center;
    align-items: center;

}

.auction-detail .value {
    width: 190px;
    display: inline-block;
    height: 40px;
    line-height: 40px;

    background-color: var(--input-color);
    border: 1px solid #D3D9ED;
    border-left: none;
    color: var(--text-color);
    border-radius: 0 5px 5px 0;
    margin: 0;
    /*padding: 13px 10px;*/
    font-size: var(--font-size-02);
    text-align: center;
    justify-content: center;
    align-items: center;
}

.auction-detail .value.large-text {
    font-size: var(--font-size-04);
}

.auction-detail .value.extension {
    color: var(--danger-color);
}

.auction-header-section {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    padding-top: 20px;
}

.auction-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 780px;
}

.auction-header-row h1 {
    width: 200px;
    margin: 0;
}

input.input-button {
    display: inline-block;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

button.input-button {
    display: inline-block;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0 !important;
    padding: 0;
    box-shadow: var(--brand-color) 0px 0px 0px 1px;
}

.price-score-chart-wrapper {
    width: 750px;
    height: 300px;
    position: absolute;
    right: 30px;
    margin-top: 25px;
}

#auction-debug-table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#auction-debug-table td, #auction-debug-table th {
    border: 1px solid #ddd;
    padding: 8px;
}

#auction-debug-table td {
    text-align: right;
}

#auction-debug-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#auction-debug-table tr:hover {
    background-color: #ddd;
}

#auction-debug-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: var(--brand-color);
    color: white;
    max-width: 90px;
    min-width: 90px;
}

.auction-section {
    display: flex;
    flex-direction: row;
}

.auction-main-section {
    width: 800px;
}

.auction-data-section {
    width: calc(100% - 800px);
    height: 20px;
    margin-top: 45px;
    padding-left: 40px;
}

.auction-data-section > h2 {
    margin-top: 51px;
    margin-bottom: 25px;
}

table.auction-theme {
    width: 100%;

}

table.auction-theme thead {
    background-color: var(--border-color);
}

table.auction-theme td,
table.auction-theme th {
    padding: 10px 15px;
}

table.auction-theme tbody tr:nth-child(even) {
    background-color: var(--border-lighter-color);
}

.configuration-view {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fit, 500px);
    padding: 25px 0;
    grid-auto-rows: 1fr;
}

.configuration-card {
    border: 1px solid var(--border-light-color);
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);
    padding: 10px 20px;
    padding-bottom: 20px;
    display: inline-block;
    border-radius: 5px;
    width: 500px;
}

.new-configuration-card {
    border: 1px dashed var(--brand-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 25%;
    min-height: 630px;
}

.new-configuration-card h3 {
    color: var(--brand-color);
    text-align: center;
}

.new-configuration-card i {
    text-align: center;
    color: var(--brand-color);
}

.configuration-card .input-section {
    width: 100%;
}

.configuration-card label {
    display: inline-block;
    min-width: 170px;
}

.configuration-card .configuration-row {
    min-height: 60px;
    display: flex;
    align-items: center;
}

.configuration-card .configuration-row a,
.configuration-card .configuration-row label:nth-child(2) {
    /*text-align: right;*/
    /*width: 100%;*/
}

.configuration-card .configuration-row select {
    /*direction: rtl;*/
}

.configuration-card .form-row label {
    margin-top: 20px;
    margin-bottom: 5px;
}

.configuration-card .configuration-row input {
    text-align: left;
}

.project-main-nav {
    margin-left: var(--spacing-07);
    padding: 5px;
    font-size: 20px;
}

.project-main-nav.version2 {
    overflow: hidden;
    padding: 0 40px 0 0;
    height: 30 pxgs;
}

.project-main-nav.version2 a::after {
    transition: none;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid var(--brand-tint-color);
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}

.project-main-nav.version2 a::before {
    transition: none;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}

.project-main-nav.version2 a {
    transition: none;
    border: none;
    color: white !important;
    background-color: #9dabfb;
}

.project-main-nav.version2 a:after {
    border-left-color: #9dabfb;
}

.project-main-nav.version2 a:nth-child(2) {
    padding-left: 50px;
}

.project-main-nav.version2 a:nth-child(3) {
    padding-left: 50px;
}

.project-main-nav.version2 a.button-primary {
    border: none;
    color: white;
    background-color: var(--brand-color);
}

.project-main-nav.version2 a.button-primary:after {
    border-left-color: var(--brand-color);
}

.project-main-nav.version2 a[disabled] {
    border: none;
    color: white;
    background-color: #ced5fd;
    opacity: 1 !important;
}

.project-main-nav.version2 a[disabled]:after {
    border-left-color: #ced5fd;
}

.project-main-nav .active {
    font-weight: 600;
}

.project-main-nav span {
    display: inline-block;
    margin: 0 15px;
}

.deadline:hover,
.deadline {
    color: var(--brand-color);
    display: inline-block;
    margin-right: 45px;
    padding: 5px 20px;
    background-color: var(--brand-tint-color);
    line-height: 30px;
    border-radius: 5px;
}

.deadline-expired:hover,
.deadline-expired {
    color: var(--danger-color);
    display: inline-block;
    margin-right: 45px;
    padding: 5px 20px;
    background-color: var(--brand-tint-color);
    line-height: 30px;
    border-radius: 5px;
}


.bread-crumbs {
    margin-top: 10px;
    font-size: 14px;
}

.header-right-section {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 23;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
}

.header-right-section .logo {
    display: flex;
    align-items: center;
}

.header-right-section img, .header-right-section h2.old {
    max-height: 40px;
    margin: 0;
}

.header-right-section div.profile {
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 22px;
    height: 22px;
    width: 22px;
    background-color: var(--brand-color);
    color: white;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    border-radius: 100px;
    user-select: none;
    font-size: 10px;
}

.header-right-section div.share2 {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-content: center;
    color: var(--brand-color);
    margin-left: 5px;
}

.header-right-section div.share2 i {
    line-height: 40px;
    cursor: pointer;
}

div.profile-dropdown {
    top: 60px;
    position: absolute;
    width: 200px;
    background-color: white;
    border: 1px solid var(--border-color);
    padding: 0 10px;
    border-radius: 5px;
}

div.profile-dropdown hr {
    margin: 0;
}

div.profile-dropdown a {
    display: block;
    width: 100%;
    padding: 5px 0;
}

div.profile-dropdown a.role {
    color: var(--light-color) !important;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

div.profile-dropdown .version {
    font-weight: 400;
    color: var(--text-color);
    font-size: var(--font-size-xs);
}

table.project-history {
}

table.project-history tr td:first-child {
    padding: 0 20px 0 0;
}

header h2.old {
    margin-top: 15px;
    margin-bottom: 5px;
    min-height: calc(1em + 5px);
}

.table-scroll-wrapper {
    overflow-x: scroll;
}

.recommended {
    color: var(--brand-color);
    cursor: pointer;
}

td.no-results {
    text-align: center;
    color: var(--light-color);
    padding: 10px;
}

table.recommendations-pdf {
    border-collapse: collapse;
    border: none;
    font-size: 10px !important;
    width: 100%;
}


table.recommendations-pdf th {
    /*min-width: 200px;*/
    text-align: center;
    padding: 15px;

}
table.recommendations-pdf td {
    text-align: right;
    padding: 8px;

}
table.recommendations-pdf td:nth-child(-n+2) {
    text-align: left;
}

table.recommendations-pdf th,
table.recommendations-pdf td {
    max-width: 120px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
    border: 1px solid #ddd;
}

table.recommendations-pdf tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.recommendations-pdf thead tr {
    background-color: var(--brand-color);
}

table.recommendations-pdf th {
    color: white;
}

table.recommendations-pdf tr.total {
    font-weight: 600;
}


.print.assessment-page {
    font-family: var(--font-family);
}

.print.assessment-page h1 .next-step {
    letter-spacing: -3px !important;
}
.next-steps-button-group-fixed {
    position: absolute;
    top: 550px;
    left: 440px;
}

.next-steps-button-group p {
    color: #526680;
    font-size: 12px;
    margin-top: 18px;
}
.next-steps-button-group {
    margin-top: 35px;
    margin-left: 125px;
}

.next-steps-button-group p {
    color: #526680;
    font-size: 10px;
    margin-top: 18px;
}

.next-steps-button-group a.button-secondary,
.next-steps-button-group a.button-primary {
    box-shadow: none;
    border: 2px solid var(--brand-color);
    color: var(--brand-color);
    border-radius: 10px;
    margin-right: 15px;
}

.next-steps-button-group a.button-primary {
    box-shadow: none;
    border: 2px solid var(--brand-color);
    background-color: var(--brand-color);
    color: white;
    border-radius: 10px;
    margin-right: 15px;
}

@media print {
    #hubspot-messages-iframe-container {
        opacity: 0;
    }
}

.initial-offers-report h3 {
    color: var(--brand-color);
}

.initial-offers-report ul {
    color: var(--text-color) !important;
    list-style-type: disc;
    padding-left: 20px;
    margin: 20px 0 0 0;
}

.initial-offers-report ul li {
    padding-bottom: 10px;
}

.initial-offers-report p,
.initial-offers-report {
    font-size: 13px !important;
}

table.signature {
    width: 100%;
}

table.signature > tbody > tr > th,
table.signature > tbody > tr > td {
    font-size: 12px;
    padding: 7px 10px;
    vertical-align: top;
}

table.signature > tbody > tr > th:first-child {
    padding-left: 0;
}

table.signature > tbody > tr.space {
    height: 20px;
}

table.reference-schedule > tbody > tr > th,
table.reference-schedule > tbody > tr > td {
    padding: 5px 10px;
    vertical-align: top;
}

table.reference-schedule-inner td {
    padding: 5px 10px;
    vertical-align: top;
}

table.reference-schedule-inner td:first-child {
    padding-left: 0;
}

table.reference-schedule {
    font-size: var(--font-size-01);
}

table.reference-schedule-inner tr:nth-child(1) td {
    padding-top: 0;
}

.fw600 {
    font-weight: 600;
}

.offer-terms-and-conditions {
    margin-top: 10px;
}

.offer-terms-and-conditions * {
    letter-spacing: normal !important;
    font-size: 9px;
    color: var(--text-color);
}

.offer-terms-and-conditions a {
    color: var(--brand-color);
}

/* used for numbering sections */
.offer-terms-and-conditions code {
    font-family: var(--font-family);
    font-weight: bold;
    position: absolute;
    left: -2px;
}

.offer-terms-and-conditions > ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.offer-terms-and-conditions ul {
    margin: 0;
    padding: 0 0 0 5px;
}

.offer-terms-and-conditions li {
    position: relative;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}

table.terms-and-conditions td {
    padding: 5px 5px;
    vertical-align: top;
}

table.terms-and-conditions p {
    margin-bottom: 9px;
}

table.terms-and-conditions {
    width: 100%;
}

table.terms-and-conditions td,
table.terms-and-conditions td * {
    font-size: 9px;
    text-align: justify;
}

table.terms-and-conditions tr td:first-child {
    max-width: 20px;
}

table.terms-and-conditions table.alpha-list {
    padding-left: 0;
}

table.terms-and-conditions table.alpha-list td {
    padding: 5px 10px;
    vertical-align: top;
}

table.terms-and-conditions tr.alpha-list td {
    padding-bottom: 0;
}

table.terms-and-conditions table.alpha-list td:first-child {
    padding-left: 0;
}

table.terms-and-conditions {
    font-size: var(--font-size-02);
    color: var(--text-color);
}

.initial-offers-pdf-offers-table * {
    font-size: 10px !important;
}

table.terms-and-conditions tr td {
    font-size: 9px !important;
}

.initial-offers-pdf-offers-table .offers tr, .initial-offers-pdf-offers-table .offers th, .initial-offers-pdf-offers-table .offers td {
    min-width: 190px !important;
    max-width: 190px !important;
}

.initial-offers-pdf-offers-table .offers tr th:first-child {
    padding-left: 0;
}

.initial-offers-pdf-offers-table .offers table {
    padding-left: 0;
    height: unset;
}

.initial-offers-pdf-offers-table .offers {
    padding-left: 0;
    height: unset;
}

.fs8 {
    font-size: 10px !important;
}

abbr[title] {
    border-bottom: none !important;
    cursor: help;
    text-decoration: none !important;
}

.new-site-button {
    margin-top: var(--spacing-04);
    margin-bottom: var(--spacing-04);
}

dialog {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    background: var(--brand-dark-color);
    padding: 1.5em;
}

dialog > p  {
    color: white;
}

.dialog-link {
    color: rgb(255, 240, 23);
    font-weight: bold;
}

.dialog-link:hover {
    color: var(--dark-color);
}

.emphasize {
    font-weight: bolder;
}

.slider {
    position: absolute;
    width: 50%;
    height: 25px;
    border-radius: 34px;
    transition: 0.3s;
}

input:checked ~ .slider {
    background-color: var(--brand-color);
}

.slider::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 28px -4px 0px 0px var(--brand-tint-color);
    background-color: var(--brand-dark-color);
    transition: 0.3s;
}

input:checked ~ .slider::before {
    transform: translateX(25px);
    background-color: var(--border-lighter-color);
    box-shadow: none;
}

.toggleable-parent {
    width: 50%;
    height: 25px;
    background-color: var(--border-light-color);
    border-radius: 50px;
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    width: 100px;
}
input[type=url] {
    padding: 1%;
}
input[type=url]:valid {
    font-style: italic;
    color: #506af8;
    cursor: pointer;
}

.manage {
    padding: 2%;
    margin: 2%;
    display: flex;
}

.perf-graph {
    width: 80%;
    padding: 1%;
}

.perf-card {
    width: 25%;
    border: 1px solid #D3D9ED;
    border-radius: 10px;
    padding: 2%;
    box-shadow: 0 5px 5px rgba(69, 80, 118, 0.05);

}

.perf-card > span, div.perf-card .pie-legend, div.perf-card span {
    letter-spacing: 0.9px;
}

.perf-card span.property-name {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #6280FF;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 1px;
    height: 25px;
    width: 50%;
    padding-top: 3px;
    margin-bottom: 9px;
}

.perf-card span.property-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 15px;
    font-weight: 400;
    height: 25px;
    width: 50%;
    margin-bottom: 9px;
    text-align: right;
    overflow: visible;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-bubble {
    height: unset !important; /* fixes issue with .ql-editor */
    overflow: unset !important; /* fixes issue with .ql-editor */
}

.chat-bubble-from {
    position: relative;
    background: var(--light-color);
    border-radius: .4em;
    border: 1px solid var(--light-color);
    width: 70%;
    padding: 1%;
    margin-top: 5%;
    margin-left: 25%;
    margin-right: 5%;
}

.chat-bubble-from:after {
    content: '';
    position: absolute;
    right: 1%;
    top: 50%;
    width: 0;
    height: 0;
    border: 54px solid transparent;
    border-left-color: var(--light-color);
    border-right: 0;
    border-bottom: 0;
    margin-top: -27px;
    margin-right: -54px;
}

.chat-bubble-from * {
    color: white;
}

.chat-bubble-from > h3 > b {
    color: yellow;
}

.chat-bubble-to > h3 > b {
    color: yellow;
}

.chat-bubble-from > div  {
    background: var(--light-color);
    padding-left: 2%;
    color: white;
}

.chat-bubble-to > div  > p {
    color: white;
    font-size: large;

}

.chat-bubble-to > div > p > a {
    color: yellow;
}

.chat-bubble-to > div > a {
    color: yellow;
}
.chat-bubble-to > html > body >  a {
    color: yellow;
}

.chat-bubble-to {
    position: relative;
    background: var(--brand-color);
    border-radius: .4em;
    border: 1px solid var(--brand-color);
    width: 70%;
    padding: 1%;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
}

.chat-bubble-to:after {
    content: '';
    position: absolute;
    left: 1%;
    top: 50%;
    width: 0;
    height: 0;
    border: 54px solid transparent;
    border-right-color: var(--brand-color);
    border-left: 0;
    border-bottom: 0;
    margin-top: -27px;
    margin-left: -54px;
}

.chat-bubble-to * {
    color: white;
}

.chat-bubble-to > div  {
    background: var(--brand-color);
    padding-left: 2%;
    color: white;
}

.chat-bubble-from > div  > p {
    color: white;
    font-size: large;

}

.chat-bubble-from > div > p > a {
    color: yellow;
}

.chat-bubble-from > div > a {
    color: yellow;
}
.chat-bubble-from > html > body >  a {
    color: yellow;
}

.chat-widget {
    position: relative;
    font-size: 30px;
    padding: 14px;
    padding-top: 17px;
    color: white;
    cursor: pointer;
    z-index: 999;
}

.chat-widget:hover {
    font-size: 32px;
}

.widget-background {
    position: absolute;
    height: 65px;
    width: 65px;
    right: 20px;
    bottom: 20px;
    background-color: var(--brand-color);
    border-radius: 99%;
}

div.supplier-settings-section {
    margin-top: 25px;
}

.contract-tab-active {
    color: black;
}