/* variables */
:root {
    --hez-purple-ultradark: #002222;
    --hez-purple-dark: #006765;
    --hez-purple: #00aca9;
    --hez-purple-medium: #80d6d4;
    --hez-purple-icon: #77afae;
    /*greyish variety for icons*/
    --hez-purple-light: #b3e6e5;
    --hez-purple-ultralight: #cceeee;
    --hez-purple-nearwhite: #e6f7f6;
    --hez-orange: #dfb324;
    --hez-orange-medium: #e7cb71;
    --hez-green: #62c08e;
    --hez-grey: #989b9b;
    --hez-grey-medium: #d6d6d6;
    --hez-grey-light: #eff0f0;
    --hez-red: #b75342;
    --hez-aqua-dark: #414e59;
    --hez-aqua: #829db2;
    --hez-aqua-medium: #c0ced8;
    --hez-aqua-light: #e0e6ec;
    --hez-aqua-ultralight: #f0f3f6;
}

/* font face kit */
@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-v8-latin-regular.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nunito-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v8-latin-regular.woff2") format("woff2"), url("../fonts/nunito-v8-latin-regular.woff") format("woff"), url("../fonts/nunito-v8-latin-regular.ttf") format("truetype"), url("../fonts/nunito-v8-latin-regular.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-v8-latin-italic.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nunito-v8-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v8-latin-italic.woff2") format("woff2"), url("../fonts/nunito-v8-latin-italic.woff") format("woff"), url("../fonts/nunito-v8-latin-italic.ttf") format("truetype"), url("../fonts/nunito-v8-latin-italic.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-v8-latin-800.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nunito-v8-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v8-latin-800.woff2") format("woff2"), url("../fonts/nunito-v8-latin-800.woff") format("woff"), url("../fonts/nunito-v8-latin-800.ttf") format("truetype"), url("../fonts/nunito-v8-latin-800.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-v8-latin-800italic.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nunito-v8-latin-800italic.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v8-latin-800italic.woff2") format("woff2"), url("../fonts/nunito-v8-latin-800italic.woff") format("woff"), url("../fonts/nunito-v8-latin-800italic.ttf") format("truetype"), url("../fonts/nunito-v8-latin-800italic.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-style: italic;
    font-weight: 800;
}

/* typography */
h1 {
    font-family: inherit;
    font-weight: 800;
    font-size: 30px;
    line-height: 34px;
    margin: 0 0 20px 0;
}

h2 {
    font-family: inherit;
    font-weight: 800;
    font-size: 26px;
    line-height: 30px;
    margin: 0 0 8px 0;
}

h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 17px;
    line-height: 21px;
    margin: 0 0 10px 0;
}

p {
    font-family: inherit;
    margin-bottom: 20px;
}

p.inline {
    display: inline;
}

strong,
.bold {
    font-weight: 800 !important;
}

.normal {
    font-weight: normal !important;
}

em {
    font-style: italic;
}

.small {
    font-size: 84% !important;
    font-weight: normal !important;
}

.extra-small {
    font-size: 78%;
    line-height: 86%;
}

.book {
    font-weight: normal;
}

.capitalize {
    text-transform: capitalize;
}

.size-14 {
    font-size: 14px;
    line-height: 20px;
}

.size-15 {
    font-size: 15px;
    line-height: 21px;
}

.size-17 {
    font-size: 17px;
    line-height: 21px;
}

.size-26 {
    font-size: 26px;
    line-height: 30px;
}

.size-30 {
    font-size: 30px;
    line-height: 34px;
}

/* basic styles */
html {
    width: 100%;

    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
}

body {
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 15px;
    line-height: 21px;
    overflow: hidden;
    /*rendering fix*/
    text-transform: none;
    /* mac ff fix */
    -webkit-font-smoothing: antialiased;
    /* safari mac nicer */
    -moz-osx-font-smoothing: grayscale;
    /* fix fatty ff on mac */
}

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

.mt-0 {
    margin-top: 0 !important;
}

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

.mt-2 {
    margin-top: 6px;
}

.mt-3 {
    margin-top: 10px !important;
}

.mt-4 {
    margin-top: 12px !important;
}

.mt-min20px {
    margin-top: -20px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: 6px;
}

.ml-2 {
    margin-left: 16px !important;
}

.ml-3 {
    margin-left: 20px !important;
}

.ml-4 {
    margin-left: 24px !important;
}

.mb-4 {
    margin-bottom: 12px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-2 {
    margin-right: 6px;
}

.mr-4 {
    margin-right: 12px !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 2px;
}

.pt-2 {
    padding-top: 6px;
}

.pt-4 {
    padding-top: 12px;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-2 {
    padding-bottom: 6px;
}

.pl-0 {
    padding-left: 0;
}

.pl-76px {
    padding-left: 76px;
}

.pl-2 {
    padding-left: 6px;
}

.pl-4 {
    padding-left: 12px;
}

.pr-0 {
    padding-right: 0;
}

.pr-2 {
    padding-right: 6px;
}

.pr-4 {
    padding-right: 12px !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    position: relative;
    display: inline-block !important;
    vertical-align: top;
}

.d-none {
    display: none;
}

.v-middle {
    vertical-align: middle;
}

.w-auto {
    width: auto !important;
}

.w-20 {
    width: 15% !important;
    margin-right: 5px;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 35% !important;
    margin-right: 5px;
}

.w-60 {
    width: 55% !important;
    margin-right: 5px;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 75% !important;
    margin-right: 5px;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.mw-100 {
    min-width: 100% !important;
}

.center>.w-80 {
    margin-left: auto !important;
    margin-right: auto !important;
}

th.w-6 {
    width: 6%;
}

th.w-8 {
    width: 8%;
}

th.w-10 {
    width: 10%;
}

th.w-35 {
    width: 35%;
}

th.w-45 {
    width: 45%;
}

.hpx-100 {
    height: 100px;
}

.hmin-260 {
    min-height: 260px;
}

.h-auto {
    height: auto !important;
}

.op-0 {
    opacity: 0;
}

.op-3 {
    opacity: 0.3;
}

.op-5 {
    opacity: 0.5;
}

.op-6 {
    opacity: 0.6;
}

.op-7 {
    opacity: 0.7;
}

.op-10 {
    opacity: 1;
}

.p-relative {
    position: relative !important;
}

.p-absolute {
    position: absolute !important;
}

.right-0 {
    right: 0;
}

.left-0 {
    left: 0;
}

.top-0 {
    top: 0;
}

.top-7 {
    top: 7px;
}

.top-32 {
    top: 32px;
}

.border-bottom-black {
    border-bottom: 1px solid #000;
}

.column {
    position: relative;
    float: left;
}

.columnSpacer {
    position: relative;
    width: calc(100% - 32px);
    padding: 0 32px 0 0;
}

.columnSpacer.form {
    width: calc(100% - 46px);
    padding-left: 14px;
}

.columnContents {
    position: relative;
    width: 94%;
}

.column.one-third {
    width: 33.33%;
}

.column.two-thirds {
    width: 66.66%;
}

.column.one-quarter {
    width: 25%;
}

.column.one-half {
    width: 50%;
}

.column.three-quarters {
    width: 75%;
}

.column.one-fifth {
    width: 20%;
}

.column.two-fifths {
    width: 40%;
}

.column.three-fifths {
    width: 60%;
}

.column.four-fifths {
    width: 80%;
}

.responsive {
    position: relative;
    width: 94%;
    padding: 0 3%;
    max-width: 1700px;
    margin: 0 auto;
}

.no-margin {
    margin: 0;
}

.noPadding {
    padding: 0 !important;
}

.noBorder {
    border: none !important;
}

#deal {
    opacity: 1;
    transition: opacity 0.4s;
}

#deal.loading {
    opacity: 0.4;
}

#deal td {
    padding: 3px 12px;
}

#deal .pb-2 td {
    padding: 3px 12px 8px 12px;
}

#deal tr {
    border-bottom: thin solid var(--hez-purple-light);
}

#deal tr.noBorder {
    border: none !important;
}

#deal tr.borderTop {
    border-top: thin solid #000 !important;
}

.top-line {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid var(--hez-grey);
}

.bottom-line {
    margin-bottom: 4px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--hez-grey);
}

a {
    color: inherit;
    transition: all 0.6s;
}

a.link {
    color: var(--hez-purple);
    text-decoration: none;
}

a.link:hover {
    color: var(--hez-orange);
}

hr {
    position: relative;
    height: 1px;
    width: 100%;
    border: none;
    background-color: var(--hez-purple-nearwhite);
    margin-bottom: 9px;
}

.button {
    position: relative;
    display: inline-block;
    padding: 7px 20px;
    text-decoration: none;
    border-width: 2px;
    box-sizing: border-box;
    min-width: 100px;
    text-align: center;
    font-size: 15px;
    line-height: 14px;
    font-weight: 800;
    transition: background-color 0.6s, color 0.6s;
}

.button.disabled {
    opacity: 0.6 !important;
    border-color: #a0a0a0 !important;
    color: #a0a0a0 !important;
}

input.button {
    padding: 7px 20px;
    line-height: 14px;
}

.button.inline {
    display: inline;
    vertical-align: middle;
}

.button:hover {
    transition: background-color 0.3s, color 0.3s;
}

.button.small {
    font-size: 13px;
    line-height: 13px;
    border-width: 1px;
    padding: 2px 12px;
}

.button.medium {
    font-size: 15px;
    line-height: 22px;
    padding: 2px 22px;
}

.button.large {
    font-size: 16px;
    line-height: 20px;
    padding: 5px 24px;
}

.button.extra-large {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 0;
}

.button.purple.border {
    border: 1px solid var(--hez-purple);
    background-color: var(--hez-purple);
    color: #000;
}

.button.orange.border {
    border: 1px solid var(--hez-orange);
    color: var(--hez-orange);
}

.button.orange-fill {
    border: 1px solid var(--hez-orange);
    background-color: var(--hez-orange);
    color: #fff;
}

.button.red.border {
    border: 1px solid var(--hez-red);
    color: var(--hez-red);
}

.button.green.border {
    border: 1px solid var(--hez-green);
    color: var(--hez-green);
}

.button.transparent {
    background-color: transparent;
}

.button.inactive {
    opacity: 0.4;
    pointer-events: none;
}

.round {
    opacity: 0.4;
    transition: opacity 0.6s;
}

.round:hover {
    opacity: 1;
    transition: opacity 0.3s;
}

.round .svgIcon {
    position: absolute;
    left: 3px;
    top: 5px;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    background-color: var(--hez-purple);
    -webkit-mask-size: 50%;
    mask-size: 50%;
}

.round:before {
    position: absolute;
    content: '';
    left: 0;
    top: 2px;
    width: 21px;
    height: 21px;
    display: block;
    border-radius: 100%;
    border: 2px solid var(--hez-purple);
    z-index: 10;
}

.round.black:before {
    border-color: #000;
}

.round.up .svgIcon {
    -webkit-mask-image: url('../images/icons/angle-double-up.svg');
    mask-image: url('../images/icons/angle-double-up.svg');
}

.round.down .svgIcon {
    -webkit-mask-image: url('../images/icons/angle-double-down.svg');
    mask-image: url('../images/icons/angle-double-down.svg');
}

.round.left .svgIcon {
    -webkit-mask-image: url('../images/icons/angle-double-left.svg');
    mask-image: url('../images/icons/angle-double-left.svg');
}

.round.right .svgIcon {
    -webkit-mask-image: url('../images/icons/angle-double-right.svg');
    mask-image: url('../images/icons/angle-double-right.svg');
}

.to-purple:hover {
    background-color: var(--hez-purple-dark) !important;
    color: #fff !important;
}

.to-orange:hover {
    background-color: var(--hez-orange);
    color: #fff !important;
}

.orange-fill.to-white:hover {
    background-color: #fff;
    color: var(--hez-orange) !important;
}

.to-red:hover {
    background-color: var(--hez-red);
    color: #fff !important;
}

.to-green:hover {
    background-color: var(--hez-green);
    color: #fff !important;
}

.to-opacity-one:hover {
    opacity: 1 !important;
    transition: opacity 0.3s;
}

.opacity-point-six {
    opacity: 0.6;
}

.to-opacity-point-six:hover {
    opacity: 0.6;
    transition: opacity 0.3s;
}

.close .svgIcon {
    -webkit-mask-image: url('../images/icons/times.svg');
    mask-image: url('../images/icons/times.svg');
    background-color: #000;
}

table.data-table tr {
    background-color: transparent !important;
    border-bottom: 1px solid var(--hez-aqua-ultralight);
}

table.data-table th {
    background-color: var(--hez-aqua);
    font-weight: bold;
}

.bullet {
    position: relative;
    padding: 3px;
    margin: 0 0 0 4px;
    font-size: 70%;
    font-weight: 800;
    line-height: 100%;
    display: inline-block;
    vertical-align: top;
    min-width: 10px;
    height: 10px;
    border-radius: 10px;
    text-align: center;
}

.aqua-text {
    color: var(--hez-aqua);
}

.aqua-dark-text {
    color: var(--hez-aqua-dark);
}

.black-text {
    color: #000;
}

.white-text {
    color: #fff;
}

.grey-text {
    color: var(--hez-grey);
}

.purple-text {
    /* #4b4170, rgb(75,65,112) */
    color: var(--hez-purple);
}

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

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

.purple-dark-text {
    /* #1c1633,rgb(28,22,51) */
    color: var(--hez-purple-dark);
}

.purple-medium-text {
    color: var(--hez-purple-medium);
}

.purple-light-text {
    color: var(--hez-purple-light);
}

.orange-text {
    /* #ea9013, rgb(234,144,19) */
    color: var(--hez-orange);
}

.white-fill {
    background-color: #fff;
    color: var(--hez-aqua-dark);
}

.aqua-light-fill {
    background-color: var(--hez-aqua-light);
}

.aqua-medium-fill {
    background-color: var(--hez-aqua-medium);
}

.aqua-fill {
    background-color: var(--hez-aqua);
}

.purple-fill {
    background-color: var(--hez-purple);
    color: #fff;
}

.purple-medium-fill {
    background-color: var(--hez-purple-medium);
}

.purple-light-fill {
    background-color: var(--hez-purple-light);
}

.purple-ultra-light-fill {
    background-color: var(--hez-purple-ultralight);
}

.purple-near-white-fill {
    background-color: var(--hez-purple-nearwhite);
}

.black-fill {
    background-color: #000;
    color: #fff;
}

.grey-fill {
    background-color: var(--hez-grey);
}

.grey-medium-fill {
    background-color: var(--hez-grey-medium);
}

.grey-light-fill {
    background-color: var(--hez-grey-light);
}

.orange-fill {
    background-color: var(--hez-orange);
    color: #fff;
}

.orange-medium-fill {
    background-color: var(--hez-orange-medium);
    color: #fff;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.hidden {
    display: none !important;
}

.column {
    position: relative;
    float: left;
}

.float-left {
    float: left;

}

.float-right {
    float: right;
}

.column.one-third {
    width: 33.33%;
}

.column.two-thirds {
    width: 66.66%;
}

.column.full-width {
    width: 100%;
}

.fullHeight {
    height: calc(100% - 28px);
    min-height: calc(100% - 28px);
    display: block;
    overflow: hidden;
}

.hSlider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

tr.collapsable .label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.4s;
}

.collapsable .label:hover {
    color: var(--hez-purple);
}

.collapsable .tri {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 28px;
    height: 20px;
    text-align: center;
}

.collapsable .tri>.icon {
    position: relative;
    width: 0 !important;
    height: 0 !important;
    margin-top: 6px;
    margin-left: 9px;
    border-top: 6px solid var(--hez-grey) !important;
    border-right: 6px solid transparent !important;
    border-left: 6px solid transparent !important;
    border-bottom: none !important;
    cursor: pointer;
    transition: transform 0.5s, border-top 0.5s !important;
}

.collapsable .tri>.icon:hover {
    border-top: 6px solid var(--hez-purple) !important;
}

.collapsable.collapsed .tri>.icon {
    transform: rotate(180deg);
}

div.collapsable {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s ease-out;
}

div.collapsable.collapsed {
    grid-template-rows: 0fr;
}

div.collapsable>ul,
div.collapsable>div {
    overflow: hidden;
}

/*.fullHeight .formContents > fieldset, .fullHeight .formContents > fieldset > .column, .fullHeight .formContents > .column, .fullHeight .formContents .columnSpacer, .fullHeight .formContents .columnSpacer > fieldset, .fullHeight .formContents > table {
    min-height: 100%;
    display: block;
}
.fullHeight .formContents > .column.form {
    height: calc(100% - 24px);
}
*/
.formContents {
    position: relative;
    width: 100%;
    height: calc(100% - 4px);
    margin-bottom: 4px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

.fullHeight.hasMenu {
    height: calc(100% - 42px);
    /* subtract bottomMenu and additional 28px for contents */
    padding-bottom: 28px;
}

.vFill {
    height: 100%;
    display: block;
    margin: 0;
}

.vFill.hasTitle {
    height: calc(100% - 46px);
}

.vFill50 {
    height: 49%;
    display: block;
    margin-bottom: 1%;
}

.h25 {
    height: 25%;
    display: block;
}

.noPadding {
    padding: 0;
}

.bottomMenu {
    position: relative;
    width: calc(100% - 28px);
    display: block;
    text-align: right;
    padding-right: 28px;
}

.fullHeight .bottomMenu {
    position: absolute;
    bottom: 0;
}

.fullHeight .column .bottomMenu {
    bottom: -54px;
}

form.fullHeight .column .bottomMenu {
    bottom: -26px;
}

fieldset.fullHeight {
    height: calc(100% - 4px);
    margin-bottom: 4px;
}

.bottomMenu a,
.bottomMenu input,
.bottomMenu label {
    margin-left: 8px;
}

.multiButton {
    cursor: pointer;
    transition: border-color 0.4s;
}

.multiButton:hover {
    border-color: rgba(38, 53, 117, 0.3) !important;
}

.multiButton .label {
    opacity: 1;
    transition: opacity 0.5s;
}

.multiButton:hover .label {
    opacity: 0.3;
}

.multiButton .buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    width: 100%;
    background-color: #fff;
    transition: all 0.5s;
}

.multiButton:hover .buttons {
    visibility: visible;
    opacity: 1;
    bottom: 105%;
    max-height: 250px;
    text-align: center;
}

.multiButton .buttons a.button {
    display: block;
    margin-bottom: 4px;
    margin-left: 0 !important;
}

/*.fullHeight.hasTitle {
    height: calc(100% - 107px);
}
.fullHeight.marginBottom {
    margin-bottom: 9px;
}*/
.fixed {
    position: fixed;
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
}

.one-third>.fixed {
    width: calc(30% - 32px);
    left: 65%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pane {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

.pane.scrollable {
    overflow-y: auto;
}

.pane.border-white {
    border: 2px solid #fff;
}

.stretch {
    position: relative;
    width: 100%;
    display: block;
}

.vScroll {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.scrollMax {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.lockBottom {
    position: webkit-sticky;
    position: sticky;
    align-self: flex-end;
    bottom: 0px;
    padding-top: 8px;
}

.locked {
    position: webkit-sticky;
    position: sticky;
    align-self: space-between;
    top: 8px;
}

.columnTitle {
    position: relative;
    white-space: nowrap;
    display: block;
    margin: 0 0 8px 0;
    padding: 0;
}

.columnTitle h3,
.columnTitle h4,
.columnTitle a {
    position: relative;
    display: inline;
    vertical-align: top;
}

a.checkAll,
a.unlockAll {
    top: 4px;
    margin-left: 6px;
    padding: 1px 5px !important;
    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: normal !important;
    color: var(--hez-purple-medium) !important;
    border-color: var(--hez-purple-medium) !important;
}

a.checkAll.white {
    color: #fff !important;
    border: thin solid #fff !important;
}

a.checkAll.white:hover {
    background-color: #fff !important;
    color: var(--hez-purple) !important;
}

.label.main .right a.checkAll {
    top: 0;
}

ul.check-list {
    position: relative;
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
}

ul.check-list li {
    position: relative;
    display: list-item;
    margin: 0 0 4px 0;
    padding: 0;
}

ul.check-list li.indent {
    margin: 0 0 5px 16px;
}

ul.check-list li input {
    position: relative;
    float: left;
    margin-right: 6px;
    vertical-align: top;
    top: 0;
}

ul.check-list li label {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: calc(100% - 36px);
    font-size: 14px;
    line-height: 17px;
    color: #000;
}

ul.check-list li.indent label {
    width: calc(100% - 40px);
}

ul.check-list li.checkAll label {
    color: var(--hez-grey);
}

ul.dash-list {
    position: relative;
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
}

ul.dash-list li {
    position: relative;
    display: list-item;
    margin: 0 0 4px 0;
    padding: 0;
}

ul.dash-list li.inactive {
    opacity: 0.6;
}

ul.dash-list li .svgIcon {
    position: absolute;
    left: -2px;
    top: -3px;
    width: 20px;
    height: 20px;
    mask-image: url('../images/icons/check-square.svg');
    -webkit-mask-image: url('../images/icons/check-square.svg');
    mask-size: 100%;
    webkit-mask-size: 100%;
    background-color: var(--hez-grey);
}

ul.dash-list li.inactive .svgIcon {
    mask-image: url('../images/icons/square.svg');
    -webkit-mask-image: url('../images/icons/square.svg');
    mask-size: 90%;
    webkit-mask-size: 90%;
    background-color: var(--hez-grey);
}

ul.dash-list li label {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0 0 0 22px;
    vertical-align: top;
    width: calc(100% - 48px);
    font-size: 14px;
    line-height: 17px;
    color: #000;
}

#screens {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
}

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

.screen.first {
    visibility: visible;
}

.screen.second,
.screen.third {
    position: absolute;
    right: -100%;
    visibility: hidden;
}

form {
    position: relative;
    padding: 0 14px;
}

form fieldset {
    border: none;
    padding: 0.35em 0 0.75em 0;
    margin-bottom: 12px;
}

form fieldset:after {
    content: '';
    clear: both;
}

form label,
.form label {
    position: relative;
    display: block;
    width: 95%;
    font-size: 13px;
    line-height: 16px;
    color: var(--hez-grey);
    margin-top: 12px;
    margin-bottom: 0;
}

form label.inline {
    display: inline;
    width: auto;
    line-height: 21px;
    vertical-align: middle;
    cursor: pointer;
    font-size: inherit;
    margin: 0 0 0 0;
}

form .bottomMenu label,
.form .bottomMenu label {
    width: auto !important;
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

form label.marginBottom,
.form label.marginBottom,
.multiList.marginBottom {
    margin-bottom: 6px !important;
}

textarea {
    resize: vertical;
}

textarea#wysiwygContent {
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    min-height: 0;
    resize: none;
}

.trumbowyg-box,
.trumbowyg-editor {
    margin: 0 auto 5px auto !important;
}

#offermail .trumbowyg p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#email_subject,
#email_subject:focus {
    outline: none;
}

form .part {
    position: relative;
    width: 100%;
    height: auto;
    clear: both;
    display: none;
}

form .part.switchVisibility {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    display: block !important;
}

form .part.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    display: block;
}

.step {
    position: relative;
    width: 100%;
    min-height: 100%;
}

.step.inactive {
    display: none;
}

form .col1 {
    position: relative;
    float: left;
    width: 35%;
    padding: 6px 0;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

form .col2 {
    position: relative;
    float: right;
    width: 65%;
    padding: 6px 0;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

form .col2 input {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 4px 0 12px;
}

.input-wrapper {
    position: relative;
    /*overflow: hidden;*/
    display: inline-block;
}

.input-wrapper input[type="file"] {
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

input[type="checkbox"] {
    position: relative;
    display: inline;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
    top: -2px;
    cursor: pointer;
    accent-color: var(--hez-purple);
}

input[type="checkbox"]:checked+span::before {
    color: #ffffff;
}

form p.input,
form input[type="text"],
form select,
form input[type="password"],
form textarea {
    position: relative;
    display: block;
    float: none;
    width: calc(100% - 16px);
    min-height: 21px;
    border: none;
    padding: 3px 8px 5px 8px;
    box-shadow: none;
    background: no-repeat center bottom, center calc(100% - 1px);
    background-image: linear-gradient(to top, var(--hez-purple-medium) 2px, transparent 2px), linear-gradient(to top, var(--hez-purple-nearwhite) 1px, transparent 1px);
    background-size: 0 100%, 100% 100%;
    transition: background 0.4s ease-out;
    margin-bottom: 12px;
    margin-top: 0;
    outline: none;
    font-size: inherit;
    line-height: inherit;
}

form select:disabled {
    color: var(--hez-grey);
}

.image-preview {
    position: relative;
    width: 50%;
    height: auto;
    min-height: 130px;
    max-height: 180px;
    display: block;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--hez-aqua-medium);
    background-color: var(--hez-aqua-light);
    text-align: center;
    overflow: hidden;
}

#modal .image-preview {
    width: calc(100% - 38px);
    height: auto;
    max-height: 10000px;
    margin-bottom: 0;
}

.image-preview img {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    object-fit: fill;
}

.image-preview canvas {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

}

form p.help {
    position: relative;
    font-size: 76%;
    line-height: 114%;
    color: var(--hez-grey);
    margin: -5px 0 12px 0;
    padding-left: 18px;
}

form p.help:before {
    position: absolute;
    content: '?';
    border-radius: 100%;
    width: 12px;
    height: 12px;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 13px;
    color: var(--hez-grey);
    border: thin solid var(--hez-grey);
    left: 0;
    top: -1px;
    text-align: center;
}

select {
    position: relative;
    width: 100%;
    padding: 0 !important;
    height: 28px;
}

select.inline {
    display: inline;
    vertical-align: middle;
    width: 52%;
    height: 26px;
}

select option {
    position: relative;
    display: block;
    width: calc(100% - 16px);
    padding: 3px 8px 8px 8px;
}

select.small {
    height: auto;
    min-height: 0;
    margin: 0;
}

select.small option {
    padding: 3px 5px;
}

select.small:focus {
    background-color: var(--hez-purple);
}

form p.input {
    background-image: linear-gradient(to top, var(--hez-purple-medium) 2px, transparent 2px), linear-gradient(to top, var(--hez-purple-nearwhite) 1px, transparent 1px);
}

form input[type="text"]:disabled {
    background: none;
}

.input-group {
    position: relative;
    width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    background-size: 100% 100%, 100% 100%;
    transition-duration: 0.3s;
}

form input[type="text"].error {
    background-image: linear-gradient(to top, var(--hez-red) 2px, transparent 2px), linear-gradient(to top, var(--hez-purple-nearwhite) 1px, transparent 1px);
    outline: none;
    background-size: 100% 100%, 100% 100%;
}

form input[type="text"].warning {
    background-image: linear-gradient(to top, var(--hez-orange) 2px, transparent 2px), linear-gradient(to top, var(--hez-purple-nearwhite) 1px, transparent 1px);
    outline: none;
    background-size: 100% 100%, 100% 100%;
}

input[type="radio"] {
    vertical-align: inherit !important;
    margin: 0 0 0 0 !important;
}

input[type="submit"],
input[type="file"] {
    border: none;
    box-shadow: none;
    outline: none !important;
}

form ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

form ul ul {
    padding: 0 0 0 21px;
}

form ul li {
    position: relative;
    display: list-item;
    margin: 0;
    padding: 0;
}

form ul ul li {
    font-size: 90%;
    color: var(--hez-grey);
}

form h4 {
    font-size: 16px;
    font-weight: normal;
    color: var(--hez-purple);
    margin: 0 0 4px 0;
}

.panelContainer {
    opacity: 0.4;
    transition: opacity 0.5s;
}

.panelContainer.active {
    opacity: 1;
}

.panel {
    position: relative;
    height: auto;
    display: block;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 14px 22px;
}

.panel.grey {
    border: thin solid var(--hez-aqua-medium);
    transition: border-color 0.5s, box-shadow 0.5s;
}

.panel.shadow {
    box-shadow: 3px 3px 12px var(--hez-aqua-medium);
}

.panel.active {
    border-color: var(--hez-purple) !important;
    box-shadow: 3px 3px 12px var(--hez-aqua);
}

#modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    text-align: center;
    background-color: rgba(38, 53, 117, 0.6);
    z-index: 499;
}

#modal h3 {
    margin-bottom: 9px;
}

#modal .panel {
    position: relative;
    width: 55vw;
    height: auto;
    display: block;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 14px 22px;
}

#modal .panel .modalContent {
    position: relative;
    width: 100%;
    display: block;
    height: auto;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#modal .panel .contentBox {
    position: relative;
    width: 100%;
    display: block;
    min-height: 40vh;
    /*subtract menu height*/
    height: auto;
    max-height: 69vh;
}

#modal .panel .contentHolder .formContents {
    position: relative;
    max-height: 69vh;
    min-height: 40vh;
}

#modal .panel .h35 {
    position: relative;
    width: 100%;
    height: 35vh;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

#modal .panel .contentHolder.flex {
    display: flex;
}

#modal .to-full {
    width: 100%;
    margin: 0 0 21px 0;
    float: none;
}

#modal .modal-half {
    width: 50%;
}

#modal .modal-hidden {
    display: none;
    float: none;
    width: 0;
    height: 0;
}


#modal table {
    width: 100%;
}

#modal .bottomMenu {
    width: 100% !important;
    padding: 9px 0 0 0 !important;
}

#modal .contentHolder .bottomMenu {
    position: absolute;
    bottom: 0;
    width: calc(100% - 16px) !important;
    padding: 0 !important;
}

#modal .formContents .bottomMenu {
    bottom: -16px;
}

#modal form {
    padding: 0 0 32px 0;
}

/* libraries - D&D */
.itemList {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
    border: 1px solid var(--hez-purple-nearwhite);
    box-sizing: border-box;
}

.itemList .search {
    position: relative;
    width: calc(100% - 6px);
    margin: 0 3px;
    padding: 5px 0;
    background-color: #fff;
}

.itemList .search:after {
    position: absolute;
    content: '';
    top: 5px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: block;
    mask-image: url('../images/icons/search.svg');
    -webkit-mask-image: url('../images/icons/search.svg');
    background-color: var(--hez-purple-medium);
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: 80%;
    -webkit-mask-size: 80%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: 10;
}

.itemList .search input {
    margin: 0 0 0 8px;
    background: none !important;
    width: calc(100% - 60px);
}

.itemList .display {
    position: relative;
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    padding: 1px 3px 2px 3px;
    overflow-y: auto;
    overflow-x: hidden;
}

.itemList.hasSearch input {
    padding: 3px 12px;
    background: #fff !important;
    width: calc(100% - 30px);
    margin-left: 3px;
    margin-top: 1px;
    margin-bottom: 3px;
    height: 22px;
}

.itemList.hasSearch.hasSort input {
    padding: 3px 80px 3px 12px;
    width: calc(100% - 98px);
}

.itemList.hasSearch .display {
    height: calc(100% - 36px);
}

.itemList.hasMenu.hasSearch .display {
    height: calc(100% - 50px);
}

.itemList.hasMenu .display {
    height: calc(100% - 14px);
}

.itemList .display.hasMenu {
    height: calc(100% - 46px);
}

.itemList.hasSort .options {
    position: absolute;
    right: 9px;
    top: 7px;
    background: #fff !important;
    height: 22px;
    line-height: 13px;
    overflow-y: hidden;
    border-left: thin solid #efefef;
}

.itemList.hasSort .options .option {
    position: relative;
    border: thin solid #efefef;
    border-radius: 3px;
    margin-left: 3px;
    font-size: 11px;
    padding: 2px 4px;
    cursor: pointer;
}

.itemList.hasSort .options .option.active {
    color: #666;
    border: thin solid #cecece;
}

.itemList.hasSort .options .option.sort {
    padding: 3px 5px 5px 5px;
    height: 9px;
    display: inline-block !important;
}

.itemList.hasSort .options .tri {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: -1px;
    width: 0;
    height: 0;
    border-top: 5px solid #e0e0e0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: none;
    transition: transform 0.3s;
}

.itemList.hasSort .options .option.active .tri {
    border-top: 5px solid #888;
}

.itemList.hasSort .options .option.asc .tri {
    transform: rotate(180deg);
}

.itemList .displayMenu {
    position: absolute;
    z-index: 100;
    display: block;
    padding: 6px 5px;
    width: calc(100% - 15px);
    bottom: 2px;
    left: 3px;
    height: 26px;
    background-color: #fff;
}

.itemList .displayMenu .label {
    position: relative;
    padding-right: 6px;
    padding-top: 4px;
}

.itemList .displayMenu .menu {
    position: relative;
    margin: 0;
    list-style: none;
}

.itemList .displayMenu li {
    position: relative;
    display: list-item;
}

.itemList .displayMenu select {
    margin-bottom: 0;
    margin-right: 4px;
}

.itemList .display fieldset {
    margin: 0 !important;
    padding: 0 !important;
}

.itemList .display ul {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.itemList .display ul li {
    position: relative;
    display: list-item;
    width: 100%;
    margin: 0 0 1px 0;
    background-color: #fff;
}

.itemList .display ul.item {
    height: auto;
    cursor: move;
}

.itemList .display ul .item.selected {
    background-color: var(--hez-purple-ultralight);
    transition: background-color 0.3s;
}

.itemList .display ul.draggable li.item {
    cursor: move;
    transition: background-color 0.6s;
}

.itemList .display ul.ui-droppable li.item {
    border-bottom: 1px solid var(--hez-purple-light);
}

.itemList .display ul.ui-droppable li.item:last-child {
    border-bottom: none;
}

.itemList .display ul.draggable li.item:hover {
    background-color: var(--hez-purple-ultralight);
    transition: background-color 0.3s;
}

.itemList .display ul .label,
.itemList .display li p {
    position: relative;
    width: calc(100% - 56px);
    padding: 8px 40px 8px 16px;
    margin: 0;
}

.itemList .display ul.item .groupLabel {
    position: relative;
    width: 100%;
}

.itemList .display ul.item .groupLabel .label {
    background-color: #fff;
    margin-bottom: 1px;
}

.itemList .display ul.item li.item .label {
    padding: 8px 40px 8px 28px;
    width: calc(100% - 68px);
    background-color: var(--hez-purple-ultralight);
}

li.item>.label>.one-line {
    height: 21px;
    overflow-y: visible;
}

.itemList .display li p {
    background-color: var(--hez-purple-nearwhite);
    color: var(--hez-grey);
}

/* DD */
.dragPart {
    box-shadow: 4px 4px 12px #999;
    z-index: 1000;
    background-color: #fff;
}

.dragPart .contentHolder {
    display: none;
}

.dragHelper {
    box-shadow: 4px 4px 12px #999;
    padding: 8px 16px;
    z-index: 1000;
    background-color: #fff;
    border-width: thin;
    border-style: solid;
    border-color: rgb(183, 83, 66);
    list-style: none;
    margin: 0;
}

.dragHelper.text {
    padding: 5px 8px;
    background-color: var(--hez-aqua-light);
    font-size: 14px;
    line-height: 14px;
    border-radius: 5px;
}

.dragHelper.noPadding {
    overflow: hidden;
}

.dragHelper.noPadding .part {
    padding: 0 !important;
}

.dragHelper .label {
    position: relative;
    width: calc(100% - 56px);
    padding: 8px 40px 8px 16px;
}

.dragHelper.label {
    width: auto;
    min-width: 220px;
    padding: 8px 40px 8px 16px;
}

.dragHelper.allowDrop {
    border-color: rgb(98, 192, 142);
}

/* end DD */
.itemList .display ul li a,
.itemList .display ul.item .groupLabel a {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 5;
}

.itemList .display ul li a .round,
.itemList .display ul.item .groupLabel a .round {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 3px;
}

.itemList .display ul li a.add .svgIcon,
.itemList .display ul.item .groupLabel a.add .svgIcon {
    mask-image: url('../images/icons/plus.svg');
    -webkit-mask-image: url('../images/icons/plus.svg');
    mask-size: 90%;
    webkit-mask-size: 90%;
    background-color: var(--hez-purple);
}

.itemList .display ul li a.remove .svgIcon,
.itemList .display ul.item .groupLabel a.remove .svgIcon {
    mask-image: url('../images/icons/minus.svg');
    -webkit-mask-image: url('../images/icons/minus.svg');
    mask-size: 90%;
    webkit-mask-size: 90%;
    background-color: var(--hez-purple);
}

.itemList.library,
.itemList.hasFill {
    background-color: var(--hez-grey-light);
    box-shadow: inset 2px 2px 6px var(--hez-grey);
    padding-top: 2px;
    border: none;
}

table#offerQueue th {
    border-color: var(--hez-purple-ultralight);
    border-width: thin;
}

table#offerQueue th:last-child {
    border: none;
}

table#offerQueue td {
    background-color: var(--hez-purple-ultralight);
    border-width: thin;
    border-bottom: thin solid #fff;
}

table#offerQueue a.preview {
    position: absolute;
    right: 9px;
    top: 3px;
}

table#offerQueue a.preview .svgIcon {
    -webkit-mask-image: url('../images/icons/eye.svg');
    -webkit-mask-size: 100%;
    mask-image: url('../images/icons/eye.svg');
    mask-size: 100%;
}

#modal .itemList.hasFill {
    height: 96%;
}

.itemList.library:before {
    position: absolute;
    content: '';
    left: -22px;
    top: calc(50% - 22px);
    border-left: none;
    border-top: 16px solid transparent;
    border-right: 11px solid var(--hez-purple-medium);
    border-bottom: 16px solid transparent;
}

.itemList.library .display ul {}

.itemList.library ul li {}

/* end libraries */

.predictorWrapper {
    position: relative;
    width: 100%;
}

.predictorWrapper #option_wrapper {
    position: absolute;
    z-index: 50;
    top: 100%;
}

.predictorWrapper select {
    background-image: none;
    background: #fff;
    box-shadow: 2px 2px 12px #dedede;
}

.predictorWrapper input {
    margin-bottom: 0px;
}

.predictorWrapper .itemFilter {
    position: absolute;
    right: 0;
    top: 3px;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 11px;
    color: var(--hez-grey);
    border-radius: 5px;
    border: thin solid var(--hez-grey);
}

/* boxes for vertical scrolling */
.scrollBox {
    position: relative;
    width: 100%;
    height: calc(100% - 40px);
    /* 24 px for label */
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    /*margin-bottom: 16px;*/
}

.scrollBox.hasTitle {
    height: calc(100% - 64px);
}

hr.scrollBoxDivider {
    margin-top: -10px;
}

.scrollBox.one-third {
    height: calc(33.33% - 36px);
}

.scrollBox.one-half {
    height: calc(50% - 36px);
}

.scrollBox .one-third:nth-child(3n+3) {
    clear: left;
}

/*.scrollBox ul li {
    padding: 3px 8px 5px 8px;
}*/
/* end boxes */

.verticalContainer {
    position: relative;
    width: 100%;
    height: calc(100% - 5px);
    display: block;
    overflow: hidden;
    margin-bottom: 16px;
}

.verticalContainer.one-third {
    height: calc(33.33% - 5px);
}

.verticalContainer.two-thirds {
    height: calc(66.66% - 11px);
}

.verticalContainer.one-half {
    height: calc(50% - 8px);
}

.verticalContainer.scrollable {
    overflow-x: hidden;
    overflow-y: auto;
}

.border.error {
    border: 1px solid var(--hez-red) !important;
}

.error.triangle .svgIcon {
    top: -2px;
    left: -4px;
    -webkit-mask-image: url('../images/icons/exclamation-triangle.svg');
    -webkit-mask-size: 63%;
    mask-image: url('../images/icons/exclamation-triangle.svg');
    mask-size: 63%;
    background-color: var(--hez-red);
}

#global_search .icon.small {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    top: -4px;
}

#global_search .icon .svgIcon {
    -webkit-mask-image: url('../images/icons/exclamation-triangle.svg');
    -webkit-mask-size: 63%;
    mask-image: url('../images/icons/exclamation-triangle.svg');
    mask-size: 63%;
    background-color: var(--hez-red);
}

#global_search .icon:after {
    font-size: 7px;
    line-height: 7px;
    position: absolute;
    left: -4px;
    top: 22px;
    width: 33px;
    text-align: center;
    color: var(--hez-red);
}

#global_search .icon.iban:after {
    content: 'IBAN';
}

#global_search .icon.invoice:after {
    content: 'ADRES';
}

#global_search .icon.payment:after {
    content: 'BETAAL';
}

.wizard .svgIcon.offer {
    position: relative;
    width: 100%;
    height: 110px;
    background-color: var(--hez-purple);
    background-position: center;
    background-size: contain;
    -webkit-mask-image: url('../images/icons/type_offer.svg');
    -webkit-mask-size: 63%;
    mask-image: url('../images/icons/type_offer.svg');
    mask-size: 63%;
}

.wizard .svgIcon.campaign {
    position: relative;
    width: 100%;
    height: 110px;
    background-color: var(--hez-purple);
    background-position: center;
    background-size: contain;
    -webkit-mask-image: url('../images/icons/type_campaign.svg');
    -webkit-mask-size: 63%;
    mask-image: url('../images/icons/type_campaign.svg');
    mask-size: 63%;
}

#loader {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(38, 53, 117, 0.5);
    z-index: 999;
}

#loader .panel {
    position: relative;
    width: 28%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 39vh;
    max-width: 360px;
    padding: 21px 32px;
    height: 18vh;
    max-height: 200px;
    overflow: hidden;
    border: thin solid rgb(38, 53, 117);
    /*#ffffff;*/
    background-color: #fff;
    /*rgba(255,255,255,0.7);*/
}

#loader .panel .icon {
    position: relative;
    width: 100%;
    height: 10vh;
    display: block;
    background-image: url('../images/loader-purple.svg');
    background-repeat: no-repeat;
    background-position: center;
}

#loader .panel .messages {
    position: relative;
    width: 100%;
    padding: 12px 0;
    height: calc(8vh - 24px);
    overflow-y: auto;
    font-size: 13px;
    line-height: 16px;
    color: rgb(38, 53, 117);
    text-align: left;
}

#loader .panel .messages ul {
    position: relative;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

#loader .panel .messages ul li {
    list-style: none;
}

.horizontalLoader {
    position: absolute;
    width: 100%;
    height: 4px;
    margin: 0;
    background: repeating-linear-gradient(to right, var(--hez-purple-dark), var(--hez-purple-light), var(--hez-purple-dark));
    background-size: 200% auto;
    background-position: 0 100%;
    animation: loaderanimation 2s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    overflow: hidden;
    z-index: 999;
}

@keyframes loaderanimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.busy {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    /*background-color: rgba(255,255,255,0.4);*/
    background-color: rgba(38, 53, 117, 0.2);
}

.busy.offset {
    left: -5%;
    /* extra large -> since overflow is hidden */
    top: 0;
    bottom: -16px;
    /* contentHolder margin */
    right: -5%;
}

.notification {
    position: relative;
    display: none;
    text-align: left;
    margin-bottom: 24px;
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 16px;
    background-color: rgba(255, 255, 255, 0.6);
    max-width: 590px;
}

.notification.border {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

.notification.visible {
    display: block;
}

.notification.error {
    color: var(--hez-red);
    border-color: var(--hez-red);
}

.notification.warning {
    color: #000;
    border-color: var(--hez-orange);
}

.notification.warning .messageTop {
    color: var(--hez-orange);
}

.notification.success {
    color: var(--hez-green);
    border-color: var(--hez-green);
}

.notification ul {
    position: relative;
    margin: 0;
    padding: 0 0 0 16px;
}

.notification ul li {
    position: relative;
    margin-bottom: 4px;
}

#quickMessage {
    position: absolute;
    right: 48px;
    bottom: -100%;
    display: block;
    width: 20%;
    min-width: 250px;
    padding: 28px 32px 28px 32px;
    background-color: #F2C830;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-size: 15px;
    line-height: 17px;
    z-index: 500;
}

#quickMessage a.close {
    position: absolute;
    right: 32px;
    top: 5px;
}

#quickMessage .notification {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: block;
}

#quickMessage .notification ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.infoPanel {
    padding: 9px;
    background-color: var(--hez-aqua-ultralight);
    border: 1px solid var(--hez-aqua-medium);
    display: block;
}

.infoPanel table,
.infoPanel table tr,
.infoPanel table td {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    line-height: 20px !important;
    white-space: normal !important;
}

.infoPanel table tr:hover {
    background-color: transparent !important;
}

.align-bottom {
    position: absolute;
    bottom: 5px;
}

.loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/loader-purple.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.vAlign {
    position: relative;
    width: 0;
    height: 100%;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
}

#balloon {
    position: absolute;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid var(--hez-purple);
    padding: 8px 14px;
    max-width: 150px;
    opacity: 0;
    z-index: 120;
    /*box-shadow: 3px 5px 14px var(--hez-purple-nearwhite);*/
    pointer-events: none;
}

#balloon.left {
    /* flag on left side */
    -webkit-transform-origin: right center;
    transform-origin: right center;
}

#balloon.right {
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

#balloon.left:before {
    position: absolute;
    left: -18px;
    top: 32%;
    content: '';
    border-right: 18px solid var(--hez-purple);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: none;
}

#balloon.left:after {
    position: absolute;
    left: -16px;
    top: calc(32% + 1px);
    content: '';
    border-right: 16px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: none;
}

#balloon.right:before {
    position: absolute;
    right: -18px;
    top: 32%;
    content: '';
    border-left: 18px solid var(--hez-purple);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: none;
}

#balloon.right:after {
    position: absolute;
    right: -16px;
    top: calc(32% + 1px);
    content: '';
    border-left: 16px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: none;
}

#balloon p {
    color: var(--hez-purple);
    font-size: 13px;
    line-height: 15px;
    margin: 0;
    padding: 0;
}

#balloon ul {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
}

#balloon ul li {
    padding: 0 !important;
}

#contextMenu {
    position: absolute;
    display: none;
    background-color: #fff;
    border: 1px solid var(--hez-purple);
    padding: 5px 6px;
    min-width: 160px;
    max-width: 220px;
    z-index: 121;
    /* add one to #balloon index*/
    box-shadow: 3px 5px 14px var(--hez-purple-nearwhite);
}

#contextMenu.left:before {
    position: absolute;
    left: -18px;
    bottom: 46%;
    content: '';
    border-right: 18px solid var(--hez-purple);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: none;
}

#contextMenu.left:after {
    position: absolute;
    left: -16px;
    bottom: calc(46% + 1px);
    content: '';
    border-right: 16px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: none;
}

#contextMenu.right:before {
    position: absolute;
    right: -18px;
    bottom: 46%;
    content: '';
    border-left: 18px solid var(--hez-purple);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: none;
}

#contextMenu.right:after {
    position: absolute;
    right: -16px;
    bottom: calc(46% + 1px);
    content: '';
    border-left: 16px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: none;
}

#contextMenu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

#contextMenu ul li {
    position: relative;
    display: list-item;
}

#contextMenu ul li.divider {
    padding: 0;
    height: 1px;
    width: 100%;
    margin: 8px 0;
    background-color: var(--hez-purple);
}

#contextMenu ul li a {
    position: relative;
    text-decoration: none;
    display: block;
    background-color: transparent;
    font-size: 13px;
    line-height: 17px;
    -webkit-transition: background-color 0.8s;
    transition: background-color 0.8s;
}

#contextMenu ul li a.inactive {
    opacity: 0.6;
    cursor: default;
}

#contextMenu.left ul li a {
    padding: 6px 16px 6px 8px;
}

#contextMenu.right ul li a {
    padding: 6px 8px 6px 16px;
}

#contextMenu ul li a:hover {
    background-color: var(--hez-purple-ultralight);
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

#contextMenu ul li a.inactive:hover {
    background-color: transparent;
}

#contextMenu ul li.has-children:after {
    position: absolute;
    content: '';
    top: 7px;
}

#contextMenu.left ul li.has-children:after {
    right: 5px;
    border-left: 5px solid var(--hez-purple);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: none;
}

#contextMenu.right ul li.has-children:after {
    left: 5px;
    border-right: 5px solid var(--hez-purple);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: none;
}

#contextMenu li.has-children>ul.sub-menu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    border: 1px solid var(--hez-purple-ultradark);
    background-color: #fff;
    top: 0;
    padding: 5px 7px;
    min-width: 160px;
    max-width: 220px;
    z-index: 102;
    box-shadow: 3px 5px 18px var(--hez-grey-light);
    -webkit-transition: visibility 0.7s, opacity 0.7s;
    transition: visibility 0.7s, opacity 0.7s;
}

#contextMenu.left ul.sub-menu {
    left: 98%;
    text-align: left;
}

#contextMenu.right ul.sub-menu {
    left: -100%;
    text-align: left;
}

#contextMenu ul li.has-children:hover>ul.sub-menu {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0.5s, opacity 0.5s;
    transition: visibility 0.5s, opacity 0.5s;
}

#messageOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 53, 117, 0.4);
    display: none;
    text-align: center;
    z-index: 500;
}

#messageOverlay .pane {
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    width: 40%;
    min-width: 340px;
    max-width: 720px;
    min-height: 220px;
    max-height: 90vh;
    text-align: left;
    padding: 28px 36px 64px 36px;
    margin-top: -32px;
}

#messageOverlay .messageTop {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

#messageOverlay .notification {
    padding: 0;
    margin: 0;
}

#messageOverlay ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#messageOverlay .bottomMenu {
    position: absolute;
    bottom: 24px;
    width: calc(100% - 72px);
}

#messageOverlay .bottomMenu a {
    margin: 0;
}

.svgIcon {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 60%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 80%;
    transition: background-color 0.6s;
}

.switch {
    position: absolute;
    display: block;
    width: 30px;
    height: 16px;
    bottom: 2px;
    right: 30px;
    cursor: pointer;
}

.switch:after {
    content: '';
    position: absolute;
    right: -19px;
    top: 0;
    width: 16px;
    height: 16px;
    display: block;
    background-color: var(--hez-green);
    -webkit-mask-image: url('../images/icons/lock-open.svg');
    mask-image: url('../images/icons/lock-open.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
}

.switch.lock:after {
    background-color: var(--hez-red);
    -webkit-mask-image: url('../images/icons/lock.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/lock.svg');
    mask-size: 70%;
}

.switch input {
    display: none;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 10px;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.switch.green-red .slider {
    background-color: var(--hez-green);
}

.switch.green-red input:checked+.slider {
    background-color: var(--hez-red);
}

.switch.green-red input:focus+.slider {
    box-shadow: 0 0 1px var(--hez-red);
}

.switch input:checked+.slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.switch.on-off {
    position: relative;
    top: -12px;
    left: auto;
    bottom: auto;
}

.switch.large {
    width: 44px;
    height: 20px;
}

.switch.large.on-off:after {
    right: -24px;
    width: 19px;
    height: 19px;
    display: block;
    -webkit-mask-image: url('../images/icons/power-off.svg');
    mask-image: url('../images/icons/power-off.svg');
    background-color: var(--hez-green);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
}

.switch.large.on-off.lock:after {
    background-color: var(--hez-red);
}

.switch.large .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.switch.on-off .slider,
.switch.yes-no .slider {
    background-color: var(--hez-red);
}

.switch.on-off input:checked+.slider,
.switch.yes-no input:checked+.slider {
    background-color: var(--hez-green);
}

.switch.on-off input:focus+.slider,
.switch.yes-no input:focus+.slider {
    box-shadow: 0 0 1px var(--hez-green);
}

.switch.large input:checked+.slider:before {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
}

.switch.yes-no:after {
    top: 3px;
    right: -24px;
    width: 19px;
    height: 19px;
    display: block;
    color: var(--hez-green);
    content: 'Ja';
    background: none;
    mask-image: none;
    -webkit-mask-image: none;
}

.switch.yes-no.lock:after {
    color: var(--hez-red);
    content: 'Nee';
}

.switch.visibility {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    top: -7px;
    left: -2px;
    margin-right: 2px;
    z-index: 100;
}

.switch.visibility .eye {
    position: relative;
}

.switch.visibility .eye:after {
    background-color: var(--hez-grey);
    content: '';
    position: absolute;
    left: 2px;
    top: -1px;
    width: 16px;
    height: 16px;
    display: block;
    -webkit-mask-image: url('../images/icons/eye-slash.svg');
    mask-image: url('../images/icons/eye-slash.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
}

.switch.visibility input:checked+.eye:after {
    -webkit-mask-image: url('../images/icons/eye.svg');
    mask-image: url('../images/icons/eye.svg');
    background-color: #000;
}

.switch.visibility:after {
    display: none;
    width: 0;
    height: 0;
    -webkit-mask-image: none;
    mask-image: none;
}

#modal td .switchLabel {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

#modal td label.switch {
    display: inline-block;
    vertical-align: middle;
    bottom: auto;
    right: auto;
    position: relative;
    margin-top: 0;
}

.tag {
    position: relative;
    display: inline-block;
    margin-top: 2px;
    padding: 3px 6px 2px 6px;
    font-size: 80%;
    line-height: 1rem;
    color: #000;
    background-color: var(--hez-grey);
    border-radius: 9px;
}

.tag.green {
    background-color: var(--hez-green);
    color: #fff;
}

.tag.red {
    background-color: var(--hez-red);
    color: #fff;
}

.ui-datepicker {
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 5px;
    width: auto;
    min-width: 220px;
    border: thin solid var(--hez-purple-medium);
}

img.ui-datepicker-trigger {
    position: absolute;
    right: 3px;
    margin-top: -39px;
    width: 20px;
    height: auto;
    cursor: pointer;
}

#offer img.ui-datepicker-trigger {
    position: relative;
    right: auto;
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
}

#offer input.datepicker {
    width: calc(85% - 50px) !important;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    width: 100%;
    font-size: 13px;
    line-height: 16px;
}

.ui-datepicker .ui-datepicker-header a {
    display: none;
}

.ui-datepicker .ui-datepicker-header select {
    position: relative;
    width: 49%;
}

.ui-datepicker .ui-datepicker-header select:first-child {
    float: left;
}

.ui-datepicker .ui-datepicker-header select:last-child {
    float: right;
}

.ui-datepicker table.ui-datepicker-calendar {
    position: relative;
    width: 100%;
    clear: both;
}

.ui-datepicker table.ui-datepicker-calendar tr {
    position: relative;
    width: 100%;
}

.ui-datepicker table.ui-datepicker-calendar th {
    font-size: 13px;
    font-weight: 800;
    padding: 3px 4px;
    border-bottom: 1px solid var(--hez-purple-light);
    background-color: #fff !important;
}

.ui-datepicker table.ui-datepicker-calendar td {
    font-size: 13px;
    font-weight: normal;
}

.ui-datepicker table.ui-datepicker-calendar td a,
.ui-datepicker table.ui-datepicker-calendar td span {
    font-size: inherit;
    position: relative;
    display: block;
    padding: 6px 8px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
}

.ui-datepicker table.ui-datepicker-calendar td a:hover {
    border-color: var(--hez-orange);
    transition: border-color 0.3s;
}

.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-week-end {
    background-color: var(--hez-purple-ultralight);
}

.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-today span,
.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-today a {
    background-color: var(--hez-purple-light);
    color: #fff;
}

.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-current-day span,
.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-current-day a {
    background-color: var(--hez-orange);
    color: #fff;
}

/*fix for clipping of datepicker calendar*/
#ui-datepicker-div {
    clip: auto !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane {
    padding: 8px 0 0 0;
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
    background-color: #fff;
    border: 1px solid var(--hez-purple);
    color: var(--hez-purple);
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 14px;
    padding: 7px 20px;
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close {
    position: absolute;
    right: 12px;
}

.ui-spinner {
    position: relative;
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 5px;
}

/*.ui-spinner input[type="text"] {
    visibility: hidden;
}
.ui-spinner .display {
    position: absolute;
    top: 0;
    display: block;
    width: calc(100% - 48px);
    border: none;
    border-bottom: 1px solid var(--hez-purple-light);
    padding: 3px 8px;
    box-shadow: none;
}*/
.ui-spinner a.ui-spinner-button {
    position: absolute;
    width: 24px;
    height: 48%;
    display: block;
    background-color: var(--hez-purple);
    right: 0;
    cursor: pointer;
}

.ui-spinner a.ui-spinner-up {
    top: 0;
    z-index: 10;
}

.ui-spinner a.ui-spinner-down {
    top: 52%;
    z-index: 11;
}

.ui-spinner a.ui-spinner-up .ui-button-icon {
    position: absolute;
    top: 3px;
    left: 7px;
    content: '';
    border-top: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid var(--hez-purple);
    z-index: 5;
    transition: border-bottom-color 0.3s;
}

.ui-spinner a.ui-spinner-down .ui-button-icon {
    position: absolute;
    top: 4px;
    left: 7px;
    content: '';
    border-bottom: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--hez-purple);
    z-index: 5;
    transition: border-top-color 0.3s;
}

.ui-spinner a.ui-spinner-up:hover .ui-button-icon {
    border-bottom-color: #fff;
}

.ui-spinner a.ui-spinner-down:hover .ui-button-icon {
    border-top-color: #fff;
}

.ui-spinner a.ui-spinner-button .ui-button-icon-space {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid var(--hez-purple);
    transition: background-color 0.3s;
}

.ui-spinner a.ui-spinner-button:hover .ui-button-icon-space {
    background-color: var(--hez-purple);
}

.ui-spinner a.ui-spinner-up .ui-button-icon-space {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.ui-spinner a.ui-spinner-down .ui-button-icon-space {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.ui-slider {
    width: 100%;
    margin-left: 16px !important;
    padding: 4px !important;
    margin: 9px 0 4px 0 !important;
    height: 4px !important;
    background: none !important;
    border-radius: 5px !important;
    background-color: var(--hez-aqua-light) !important;
    z-index: 100;
}

.ui-slider-handle {
    position: absolute;
    top: 30px;
    margin-left: -11px;
    display: block;
    width: 32px;
    height: 22px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    line-height: 25px;
    border-radius: 9px;
    background-color: var(--hez-purple);
    border: 1px solid var(--hez-aqua);
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

/* elements */
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(var(--hez-purple-ultradark), #000);
    overflow: hidden;
}

.container.login {
    background-image: url('../images/renewable-duo-2021.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#loginScreen {
    display: inline-block;
    vertical-align: middle;
    margin: -9.2% 0 0 0;
    width: 26%;
    min-width: 340px;
    max-width: 520px;
}

#loginScreen .top {
    position: relative;
    width: calc(100% - 64px);
    padding: 24px 32px 26px 32px;
}

#loginScreen .top h1 {
    margin: 0;
    font-size: 24px;
}

#loginScreen .logo {
    position: relative;
    width: 100%;
    margin: 0 0 38px 0;
}

#loginScreen .logo img {
    position: relative;
    width: 70%;
    height: auto;
}

#loginScreen .pane {
    /*min-height: 280px;*/
    padding-bottom: 24px;
}

#loginScreen .form-fields {
    position: relative;
    margin: 0 0 22px 0;
    width: calc(100% - 64px);
    padding: 0 32px;
    min-width: 200px;
}

#loginScreen input[type="text"],
#loginScreen input[type="password"] {
    margin-bottom: 8px;
}

#loginScreen input[type="submit"] {
    width: calc(100% - 64px);
    max-width: 230px;
    margin: 0 auto;
}

#footerBanner {
    position: absolute;
    width: 100%;
    height: 14px;
    padding: 2px 0 0 0;
    bottom: 16px;
}

#footerBanner ul.menu {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#footerBanner ul.menu li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

#footerBanner ul.menu li a {
    position: relative;
    text-decoration: none;
    padding: 0 9px 0 0;
    border-right: 1px solid var(--hez-purple-medium);
}

#footerBanner ul.menu li:last-child a {
    border-right: none;
}

#mainMenu {
    position: relative;
    width: 98%;
    padding-top: 50px;
    padding-bottom: 3px;
    height: 48px;
    z-index: 100;
    color: #fff;
}

#mainMenu .logo {
    position: absolute;
    left: 83px;
    /*moduleMenu width*/
    top: 10px;
    height: 100%;
    width: 250px;
    background-image: url('../images/hezelaer-logo-2021.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#mainMenu ul.menu {
    position: relative;
    list-style: none;
    font-size: 0;
}

#mainMenu ul.menu li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

#mainMenu ul.menu li a {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 16px;
    line-height: 16px;
    padding: 6px 16px;
    border-right: 1px solid #fff;
    color: inherit;
    transition: background-color 0.6s, color 0.6s;
    box-sizing: border-box;
    transition: color 0.6s;
}

#mainMenu ul.menu li:hover>a {
    color: var(--hez-purple-light);
    transition: color 0.3s;
}

#mainMenu ul.menu li:last-child>a {
    border-right: none;
}

#mainMenu ul.menu li.active>a {
    font-weight: 800;
}

#mainMenu ul.menu li.has-children>a {
    padding-right: 36px;
}

#mainMenu ul.menu li.has-children>a:after {
    position: absolute;
    content: "";
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: none;
    top: 9px;
    right: 15px;
    transition: all 0.3s;
}

#mainMenu ul.menu li.has-children:hover>a:after {
    transform: rotate(90deg);
    transition: all 0.1s;
    border-left-color: var(--hez-purple-light);
}

#mainMenu ul.sub-menu {
    position: absolute;
    visibility: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--hez-purple-ultradark);
    padding: 6px 1px 1px 1px;
    width: 100%;
    transform-origin: top center;
    transform: scaleY(0);
    min-width: 160px;
    max-width: 220px;
    transition: all 0.2s;
    right: 0;
}

#mainMenu ul.menu li.has-children:hover ul.sub-menu {
    visibility: visible;
    transform: scaleY(1);
    transition: all 0.3s;
}

#mainMenu ul.sub-menu li {
    position: relative;
    display: list-item;
}

#mainMenu ul.sub-menu li>a {
    font-size: 14px;
    line-height: 14px;
    padding: 8px 14px 6px 14px;
    border: none;
    border-top: 1px solid var(--hez-purple);
    transition: background-color 0.6s, color 0.6s;
}

#mainMenu ul.sub-menu li:first-child>a {
    border-top: none;
}

#mainMenu ul.sub-menu li:last-child>a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#mainMenu ul.sub-menu li:hover>a {
    background-color: var(--hez-purple-dark);
    transition: background-color 0.3s, color 0.3s;
}

#mainMenu ul.menu li a.menuButton {
    padding: 0;
    margin-top: 2px;
    margin-left: 22px;
    margin-right: 4px;
    border-right: none;
}

#mainMenu #cart {
    margin-left: 17px;
    border-left: thin solid #fff;
}

#menu_search h4 {
    padding-top: 10px;
    margin-bottom: -6px;
}

#menu_search ul.sub-menu {
    min-width: 300px;
    max-width: 420px;
}

#menu_search li {
    padding: 3px 5px 4px 5px;
    font-size: 15px;
}

#menu_search li .white-fill {
    padding: 6px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

#menu_search fieldset {
    margin-bottom: 0 !important;
}

#menu_search .bottomMenu {
    width: 100% !important;
}

/*notifications and tasks within menu*/
.menuMessageList {
    list-style: none;
    display: block;
    max-width: 1600px !important;
    width: 380px !important;
}

.menuMessageList li {
    border-bottom: thin solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
}

.menuMessageList li .label {
    position: relative;
    padding: 8px 14px;
    min-height: 48px;
    display: block;
    font-size: inherit;
    line-height: inherit;
}

.menuMessageList li:last-child .label {
    min-height: 0;
}

.menuMessageList li .navi,
div.slideMenu .navi {
    position: absolute;
    z-index: 10;
    display: block;
    top: 0;
    bottom: 0;
    right: -150px;
    width: 150px;
    background-color: var(--hez-purple-ultradark);
    padding: 2px 0 2px 6px;
    transition: right 0.4s;
}

div.slideMenu .navi {
    left: 200px;
    right: auto;
    bottom: auto;
    width: 130px;
    background-color: #fff;
    border: thin solid var(--hez-aqua);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s, left 0.4s;
    padding: 2px;
}

.menuMessageList li:hover .navi {
    right: 0;
}

div.slideMenu:hover .navi {
    left: 22px;
    opacity: 1;
    visibility: visible;
}

div.slideMenu .navi:before {
    position: absolute;
    content: '';
    left: -6px;
    top: 5px;
    width: 0;
    height: 0;
    border-left: none;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid var(--hez-aqua);
}

.menuMessageList li .navi a,
div.slideMenu .navi a {
    position: relative !important;
    font-size: 12px !important;
    line-height: 12px !important;
    padding: 3px 4px 4px 14px !important;
    display: block;
    text-decoration: none;
    margin-bottom: 1px;
    transition: background-color 0.4s;
}

div.slideMenu .navi a {
    position: relative !important;
    display: block !important;
    width: auto !important;
    border-bottom: thin solid var(--hez-aqua-medium);
    background-color: #fff;
    transition: background-color 0.4s;
}

div.slideMenu .navi a:last-child {
    border-bottom: none;
}

.menuMessageList li .navi a:hover {
    background-color: var(--hez-purple-dark) !important;
}

div.slideMenu .navi a:hover {
    background-color: var(--hez-aqua-light) !important;
}

.menuMessageList li a.link {
    padding: 8px 0 !important;
    text-align: center;
    font-size: 13px !important;
    line-height: 13px !important;
    border: none !important;
}

div.slideMenu {
    position: absolute;
    left: -20px;
    top: -3px !important;
    width: 22px !important;
    height: 18px !important;
    display: block;
}

div.lockedItem {
    position: absolute;
    left: 0;
    top: -1px !important;
    width: 20px !important;
    height: 18px !important;
    padding: 1px;
    display: block;
    background-color: #fff;
    cursor: pointer;
}

div.lockedItem .svgIcon {
    background-color: var(--hez-red) !important;
    -webkit-mask-image: url('../images/icons/lock.svg') !important;
    -webkit-mask-size: 58% !important;
    mask-image: url('../images/icons/lock.svg') !important;
    mask-size: 58% !important;
}

#offer .lockedItem {
    margin-left: -4px !important;
    margin-right: -6px;
    cursor: default;
}

.code-monitor {
    padding: 0 0 0 15px !important;
}

.code-monitor .svgIcon {
    -webkit-mask-image: url('../images/icons/laptop-code.svg');
    -webkit-mask-size: 84%;
    mask-image: url('../images/icons/laptop-code.svg');
    mask-size: 84%;
    height: 28px;
    width: 28px;
}

.contentLeft {
    position: relative;
    padding-left: 20px;
    display: block;
    float: left;
    overflow-x: hidden;
}

ul#moduleMenu {
    position: relative;
    list-style: none;
    margin: 0;
    padding-top: 42px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

ul#moduleMenu li {
    position: relative;
    padding: 0;
    margin: 0 0 2px 0;
}

ul#moduleMenu li a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 32px;
    height: 32px;
    padding: 13px 15px;
    line-height: 32px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: transparent;
    margin: 0;
    color: var(--hez-purple);
    text-align: center;
    transition: padding 0.4s;
}

ul#moduleMenu li.active a {
    background-color: #fff;
    color: #fff;
    pointer-events: none;
}

ul#moduleMenu li a .disc {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    overflow: hidden;
    background-color: #fff;
    transition: background-color 0.6s, color 0.6s;
}

ul#moduleMenu li.active a .disc {
    background-color: var(--hez-purple-dark);
}

ul#moduleMenu li a:hover .disc {
    background-color: var(--hez-purple-medium);
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
}

/*moduleMenu icons (inline css not supported anymore, so hard-code here)*/
ul#moduleMenu li[data-id="Dashboard"] a .disc .svgIcon {
    mask-image: url('../images/icons/home.svg');
    -webmask-mask-image: url('../images/icons/home.svg');
}

ul#moduleMenu li[data-id="Records"] a .disc .svgIcon {
    mask-image: url('../images/icons/address-card.svg');
    -webkit-mask-image: url('../images/icons/address-card.svg');
}

ul#moduleMenu li[data-id="Users"] a .disc .svgIcon {
    mask-image: url('../images/icons/user.svg');
    -webkit-mask-image: url('../images/icons/user.svg');
}

ul#moduleMenu li[data-id="Groups"] a .disc .svgIcon {
    mask-image: url('../images/icons/users.svg');
    -webkit-mask-image: url('../images/icons/users.svg');
}

ul#moduleMenu li[data-id="Addresses"] a .disc .svgIcon {
    mask-image: url('../images/icons/building.svg');
    -webkit-mask-image: url('../images/icons/building.svg');
}

ul#moduleMenu li[data-id="Connections"] a .disc .svgIcon {
    mask-image: url('../images/icons/plug.svg');
    -webkit-mask-image: url('../images/icons/plug.svg');
}

ul#moduleMenu li[data-id="Meters"] a .disc .svgIcon {
    mask-image: url('../images/icons/cogs.svg');
    -webkit-mask-image: url('../images/icons/cogs.svg');
}

ul#moduleMenu li[data-id="Campaigns"] a .disc .svgIcon {
    mask-image: url('../images/icons/campaign.svg');
    -webkit-mask-image: url('../images/icons/campaign.svg');
}

ul#moduleMenu li[data-id="Offers"] a .disc .svgIcon {
    mask-image: url('../images/icons/file-alt.svg');
    -webkit-mask-image: url('../images/icons/file-alt.svg');
}

ul#moduleMenu li[data-id="ActionLandingpages"] a .disc .svgIcon {
    mask-image: url('../images/icons/landing.svg');
    -webkit-mask-image: url('../images/icons/landing.svg');
}

ul#moduleMenu li[data-id="Contracts"] a .disc .svgIcon {
    mask-image: url('../images/icons/handshake.svg');
    -webkit-mask-image: url('../images/icons/handshake.svg');
}

ul#moduleMenu li[data-id="Bankaccounts"] a .disc .svgIcon {
    mask-image: url('../images/icons/credit-card.svg');
    -webkit-mask-image: url('../images/icons/credit-card.svg');
}

ul#moduleMenu li[data-id="Mandates"] a .disc .svgIcon {
    mask-image: url('../images/icons/sepa.svg');
    -webkit-mask-image: url('../images/icons/sepa.svg');
}

ul#moduleMenu li[data-id="Products"] a .disc .svgIcon {
    mask-image: url('../images/icons/tags.svg');
    -webkit-mask-image: url('../images/icons/tags.svg');
}

/*admin menu icons*/
ul#moduleMenu li[data-id="Suppliers"] a .disc .svgIcon {
    mask-image: url('../images/icons/factory.svg');
    -webkit-mask-image: url('../images/icons/factory.svg');
}

ul#moduleMenu li[data-id="Resellers"] a .disc .svgIcon {
    mask-image: url('../images/icons/suitcase.svg');
    -webkit-mask-image: url('../images/icons/suitcase.svg');
}

ul#moduleMenu li[data-id="Admins"] a .disc .svgIcon {
    mask-image: url('../images/icons/address-book.svg');
    -webkit-mask-image: url('../images/icons/address-book.svg');
}

ul#moduleMenu li[data-id="AdminRoles"] a .disc .svgIcon {
    mask-image: url('../images/icons/key.svg');
    -webkit-mask-image: url('../images/icons/key.svg');
}

ul#moduleMenu li[data-id="Conditions"] a .disc .svgIcon {
    mask-image: url('../images/icons/pencil-alt.svg');
    -webkit-mask-image: url('../images/icons/pencil-alt.svg');
}

ul#moduleMenu li[data-id="Notes"] a .disc .svgIcon {
    mask-image: url('../images/icons/sticky-note.svg');
    -webkit-mask-image: url('../images/icons/sticky-note.svg');
}

ul#moduleMenu li[data-id="Logs"] a .disc .svgIcon {
    mask-image: url('../images/icons/clock.svg');
    -webkit-mask-image: url('../images/icons/clock.svg');
}

ul#moduleMenu li[data-id="Settings"] a .disc .svgIcon {
    mask-image: url('../images/icons/wrench.svg');
    -webkit-mask-image: url('../images/icons/wrench.svg');
}

/*Task menu icons*/
ul#moduleMenu li[data-id="Tasks"] a .disc .svgIcon {
    mask-image: url('../images/icons/calendar-check.svg');
    -webkit-mask-image: url('../images/icons/calendar-check.svg');
}

/*Notification menu icons*/
ul#moduleMenu li[data-id="Notifications"] a .disc .svgIcon {
    mask-image: url('../images/icons/bell.svg');
    -webkit-mask-image: url('../images/icons/bell.svg');
}

/*end menu icons*/
ul#moduleMenu li a .disc .svgIcon {
    position: relative;
    width: 26px;
    height: 28px;
    margin: 2px auto 0 auto;
    background-color: var(--hez-purple-dark);
    -webkit-mask-size: 70%;
    mask-size: 70%;
}

ul#moduleMenu li[data-id="BalanceSuppliers"] a .disc .svgIcon {
    -webkit-mask-size: 50%;
    mask-size: 50%;
}

ul#moduleMenu li[data-id="ResellerUsers"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Addresses"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Offers"] a .disc .svgIcon {
    -webkit-mask-size: 60%;
    mask-size: 60%;
}

ul#moduleMenu li[data-id="Dashboard"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Records"] a .disc .svgIcon,
ul#moduleMenu li[data-id="GridEans"] a .disc .svgIcon,
ul#moduleMenu li[data-id="GasRegionEans"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Staffels"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Invoices"] a .disc .svgIcon {
    -webkit-mask-size: 80%;
    mask-size: 80%;
}

ul#moduleMenu li[data-id="Groups"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Meters"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Contracts"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Products"] a .disc .svgIcon,
ul#moduleMenu li[data-id="Logs"] a .disc .svgIcon,
ul#moduleMenu li[data-id="BalanceResponsibleParties"] a .disc .svgIcon {
    -webkit-mask-size: 94%;
    mask-size: 94%;
}

ul#moduleMenu li.active a .disc .svgIcon {
    background-color: #fff;
}

ul#moduleMenu li.disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* minimized module menu (vertical height) */
ul#moduleMenu.minimized li a {
    padding: 6px 15px 8px 15px;
}

.contentRight {
    position: relative;
    width: calc(100vw - 82px);
    display: block;
    float: right;
    border-top-left-radius: 12px;
    background-color: #fff;
    height: calc(100vh - 101px);
    /* 101px is mainMenu height */
}

/* JS module */
#moduleContainer {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

#extraContent {
    position: absolute;
    display: none;
    width: 94%;
    height: 100%;
    top: 0;
    left: 100%;
    padding: 0 3% 0 3%;
    background-color: #fff;
    z-index: 10;
}

#extraContent .contents {
    opacity: 1;
}

#extraContent .extraContentSpacer {
    position: relative;
    padding: 0 0 0 16px;
}

#backBar {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 12px;
    bottom: 0;
    width: 10px;
    background-color: var(--hez-purple);
    z-index: 9;
}

#backBar:hover {
    background-color: var(--hez-purple-medium);
    transition: background-color 0.5s;
}

#extraContent .round.left {
    position: absolute;
    top: 40vh;
    left: 5px;
    opacity: 1;
}

#extraContent .round.left::before {
    border-color: #fff;
}

#extraContent .round.left .svgIcon {
    background-color: #fff;
}

.module {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
}

.module.inactive {
    display: none;
}

.module .moduleContent {
    position: relative;
    width: 94%;
    height: 100%;
    padding: 0 3% 0 3%;
    display: block;
}

.module .moduleTop {
    position: relative;
    width: 100%;
    height: 85px;
    padding-bottom: 12px;
    background: radial-gradient(ellipse at bottom center, var(--hez-grey-light) 0%, #fff 80%);
}

.module .moduleBottom {
    position: relative;
    width: 100%;
    height: 44px;
    background: radial-gradient(ellipse at top center, var(--hez-grey-light) 0%, #fff 80%);
}

.module .moduleTop .center,
.module .moduleBottom {
    position: relative;
    width: 100%;
    padding: 14px 0 8px 0;
}

.module .moduleTop .center a,
.module .moduleBottom a {
    position: relative;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    line-height: 32px;
    padding: 4px 0 4px 34px;
    display: block;
    text-align: center;
}

.module .moduleTop .center a:hover .round,
.module .moduleBottom a:hover .round {
    opacity: 1;
    transition: opacity 0.3s;
}

.module .moduleTop .center a .label,
.module .moduleBottom a .label {
    position: relative;
    width: auto;
    display: inline;
    padding-left: 32px;
    padding-top: 2px;
}

.module .moduleTop .center .vSpacer {
    position: relative;
    width: 100%;
    height: 32px;
    display: block;
}

.module .moduleTitle {
    position: relative;
    display: inline;
    white-space: nowrap;
}

.module .moduleTitle .titleLabel {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 8px;
    font-size: 21px;
    font-weight: normal;
    line-height: 23px;
    padding: 4px 5px 4px 14px;
    margin-right: 2px;
}

.module .moduleTitle .label {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
}

#stepMenu {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

#stepMenu li {
    position: relative;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    margin-left: 11px;
    transition: opacity 0.6s;
}

#stepMenu li .step {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: inherit;
    padding: 2px 9px 4px 9px;
    color: #fff;
    background-color: var(--hez-purple-medium);
    box-sizing: border-box;
    transition: color 0.6s;
}

#stepMenu li.hasButton:hover {
    opacity: 0.4;
}

#stepMenu li.hasButton:hover a.step {
    color: var(--hez-purple-dark);
}

#stepMenu li .step:before {
    position: absolute;
    left: -8px;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid var(--hez-purple-medium);
    border-bottom: 13px solid var(--hez-purple-medium);
    border-left: 8px solid transparent;
}

#stepMenu li .step:after {
    position: absolute;
    right: -8px;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 8px solid var(--hez-purple-medium);
}

#stepMenu li.active .step {
    background-color: var(--hez-purple);
    cursor: default;
}

#stepMenu li.active .step:before {
    border-top: 13px solid var(--hez-purple);
    border-bottom: 13px solid var(--hez-purple);
}

#stepMenu li.active .step:after {
    border-left: 8px solid var(--hez-purple);
}

#stepMenu li.active:hover {
    opacity: 1;
}

#stepMenu li.active.hasButton:hover a.step {
    color: #fff;
}

#stepMenu li.inactive .step {
    background-color: var(--hez-aqua-light);
    color: var(--hez-aqua);
    cursor: default;
}

#stepMenu li.inactive .step:before {
    border-top: 13px solid var(--hez-aqua-light);
    border-bottom: 13px solid var(--hez-aqua-light);
}

#stepMenu li.inactive .step:after {
    border-left: 8px solid var(--hez-aqua-light);
}

#stepMenu li.inactive:hover {
    opacity: 1;
}

#stepMenu li.inactive:hover .step {
    color: var(--hez-aqua);
}

#stepMenu li:first-child .step {
    padding-left: 14px;
}

#stepMenu li:first-child .step:before {
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

#stepMenu li:last-child .step {
    padding-right: 14px;
}

#stepMenu li:last-child .step:after {
    border-left: 8px solid transparent;
}

.options {
    position: relative;
    display: inline-block;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    overflow-x: hidden;
}

.multiList {
    width: calc(100% - 4px);
    display: block;
    background-color: var(--hez-aqua-light);
    padding: 3px 4px 1px 0;
    margin-bottom: 44px;
    border-radius: 5px;
}

.options li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 14px;
}

.multiList li {
    margin-bottom: 4px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 14px;
}

.multiList.variables li,
.multiList.snippets li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 5px 8px 5px 8px;
    margin-left: 4px;
}

.options li a,
.options li .static {
    position: relative;
    display: block;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px 8px 5px 23px;
    text-decoration: none;
}

.options li .static {
    padding: 5px 8px 5px 8px;
}

.options li a:before {
    position: absolute;
    content: "";
    top: 3px;
    left: 5px;
    width: 13px;
    height: 18px;
    background-image: url('../images/icon-close-black.png');
    background-repeat: no-repeat;
    background-position: center;
}

.options li a.addOption:before {
    background-image: url('../images/icon-add-black.png');
}

.multiList li.addOption {
    position: absolute;
    bottom: -35px;
    left: -3px;
    box-sizing: border-box;
}

.multiList li.addOption a {
    background-color: transparent;
    border: 1px solid var(--hez-purple);
    color: var(--hez-purple);
    transition: background-color 0.5s, color 0.3s;
}

.multiList li.addOption a:before {
    background-position: center 3px;
    background-image: url('../images/icon-add-purple.png');
}

.multiList li.addOption a:hover:before {
    background-image: url('../images/icon-add-white.png');
}

.multiList li.addOption a:hover {
    color: #fff;
    background-color: var(--hez-purple);
}

.itemList .display ul.collapsable {
    margin: 0 0 1px 0;
}

.itemList .display ul.collapsable .tri {
    position: absolute;
    display: block;
    left: -28px;
    top: 6px;
    width: 28px;
    height: 20px;
    text-align: center;
}

.itemList .display ul.collapsable .tri .icon {
    position: relative;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-left: 9px;
    border-top: 6px solid #000;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: none;
    cursor: pointer;
    transition: transform 0.5s, border-top 0.5s;
}

.itemList .display ul.collapsable .tri .icon:hover {
    border-top: 6px solid var(--hez-orange);
}

.itemList .display ul.collapsed>.tri .icon {
    transform: rotate(180deg);
}

.itemList .display .tree {
    padding: 0 8px;
    width: calc(100% - 16px);
}

.itemList .display .tree.target {
    padding: 0 0 0 26px;
    width: calc(100% - 27px);
}

.itemList .display .tree.checkboxes {
    padding: 0 8px;
    width: calc(100% - 16px);
}

.itemList .display .tree.checkboxes .item.disabled input[type="checkbox"] {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.itemList .display .tree.checkboxes .item.disabled .label .text {
    opacity: 0.7;
}

.itemList .display .tree ul:first-child {
    padding-top: 6px;
}

.itemList .display .tree ul {
    margin-left: 20px;
    padding: 2px 0 4px 0;
    width: calc(100% - 20px);
}

.itemList .display .tree>ul {
    border-bottom: thin solid #A9B0C7;
}

.itemList .display .tree li {
    background-color: transparent;
    padding: 2px 0;
}

.itemList .display .tree .label {
    position: relative;
    display: list-item;
    background-color: transparent !important;
    transition: background-color 0.4s;
    padding: 2px 0 2px 4px !important;
}

.itemList .display .tree .item:hover {
    background-color: transparent !important;
}

.itemList .display .tree .item>.label:hover {
    background-color: var(--hez-purple-ultralight) !important;
}

.itemList .display .tree .item.selected>.label {
    background-color: var(--hez-purple-ultralight) !important;
}

.itemList .display .tree .label {
    font-size: 100%;
}

.itemList .display .tree ul .label {
    font-size: 96%;
}

.itemList .display .tree ul ul .label {
    font-size: 92%;
}

.itemList .display .tree ul ul ul .label {
    font-size: 88%;
}

.itemList .display ul.tree.ui-droppable li.item {
    border-bottom: none;
}

.itemList .display li .label input[type="checkbox"] {
    position: absolute;
    left: -20px;
    top: 4px;
}

/* itemList for advanced search */
.itemList .display .tree.multiSelect ul {
    margin-left: 0;
    width: 100%;
    padding: 2px 0;
    border-bottom: none;
}

.itemList .display .tree.multiSelect li.item {
    color: #000;
    padding: 2px 10px 2px 10px;
    width: calc(100% - 20px);
    border-bottom: thin solid var(--hez-purple-ultralight);
    margin: 0;
}

.itemList .display .tree.multiSelect li.group {
    padding: 2px 10px 4px 5px;
    width: calc(100% - 15px);
}

.itemList .display .tree.multiSelect li.item:hover {
    background-color: var(--hez-purple-ultralight) !important;
    transition: background-color 0.4s;
}

.itemList .display .tree.multiSelect li.item.selected {
    background-color: var(--hez-purple-ultralight) !important;
}

.itemList .display .tree.multiSelect .item>.label {
    color: #000;
    width: 100% !important;
    background-color: transparent !important;
}

.itemList .display .tree.multiSelect .item>.label:hover {
    transition: none;
    background-color: transparent !important;
}

.itemList .display .tree.multiSelect a.details .svgIcon {
    margin-top: 2px;
    height: 20px;
    -webkit-mask-image: url('../images/icons/eye.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/eye.svg');
    mask-size: 70%;
    background-color: var(--hez-purple-medium);
}

.itemList .display .tree.multiSelect a.details .svgIcon:hover {
    background-color: var(--hez-purple);
    transition: background-color 0.4s;
}

.itemList .display ul.checkboxes>ul {
    border-bottom: none;
}

.itemList .display ul.checkboxes>ul.item>li.item {
    border-bottom: thin solid var(--hez-purple-light);
}

.itemList .display ul.checkboxes .label {
    color: #000;
    width: 100% !important;
}

.itemList .display ul.checkboxes ul ul .label {
    font-size: 82%;
    line-height: 118%;
}

.itemList .display ul.checkboxes ul ul .label input[type="checkbox"] {
    top: 1px;
    left: -17px;
    width: 15px;
    height: 15px;
}

.buttonContainer {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    border-radius: 8px;
    background-color: #000;
    color: #fff;
    padding: 4px;
}

a.option {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    text-decoration: none;
    width: 24px;
    height: 24px;
}

a.option.filter .svgIcon {
    -webkit-mask-image: url('../images/icons/filter.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/filter.svg');
    mask-size: 70%;
    background-color: #000;
}

a.option.search .svgIcon {
    -webkit-mask-image: url('../images/icons/search.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/search.svg');
    mask-size: 70%;
    background-color: #000;
}

a.option.ticket-url .svgIcon {
    -webkit-mask-image: url('../images/icons/questionmark.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/questionmark.svg');
    mask-size: 70%;
    background-color: #000;
}

a.option.cart .svgIcon {
    -webkit-mask-image: url('../images/icons/cart.svg');
    -webkit-mask-size: 70%;
    mask-image: url('../images/icons/cart.svg');
    mask-size: 70%;
    background-color: #000;
}

.buttonContainer .itemFilter {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px 8px 5px 23px;
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
    margin-left: 4px;
    margin-bottom: -2px;
    color: #000;
}

.buttonContainer .itemFilter:before {
    position: absolute;
    content: "";
    top: 3px;
    left: 5px;
    width: 13px;
    height: 18px;
    background-image: url('../images/icon-close-black.png');
    background-repeat: no-repeat;
    background-position: center;
}

.buttonContainer .itemFilter.inactive {
    padding: 5px 8px 5px 8px;
}

.buttonContainer .itemFilter.inactive:before {
    background: none;
    width: 0;
    height: 0;
    display: none;
}

.showInactiveItems {
    position: absolute;
    right: 0;
    bottom: 12px;
}

.module .contentHolder {
    position: relative;
    width: 100%;
    height: calc(100% - 197px);
    /*subtract moduleTop and -Bottom height*/
    padding-top: 14px;
    margin-bottom: 16px;
}

.module .contentHolder .contents {
    height: calc(100% - 32px);
    opacity: 0;
}

#extraContent .contentHolder .contents {
    height: 100%;
}

.module .contentHolder table,
.styled-table {
    position: relative;
    table-layout: fixed;
    width: 100%;
    padding: 0;
    margin: 0 0 14px 0;
    color: inherit;
    font-size: 14px;
    line-height: 16px;
}

.module .contentHolder table tr,
.styled-table tr {
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;
    transition: background-color 0.8s;
}

.module .contentHolder table tr:nth-child(odd),
.styled-table tr:nth-child(odd) {
    background-color: var(--hez-grey-light);
}

.module .contentHolder table.nonAlternating tr:nth-child(odd) {
    background-color: transparent;
}

.module .contentHolder table.nonAlternating tr {
    border-top: thin solid var(--hez-grey-light) !important;
}

.module .contentHolder table.customAlternating tr:nth-child(odd) {
    background-color: inherit;
}

.module .contentHolder table.customAlternating tr {
    background-color: inherit;
}

.module .contentHolder table tr:first-child,
.styled-table tr:first-child {
    background-color: transparent;
}

.module .contentHolder table tr.purple-medium-fill {
    background-color: var(--hez-purple-light);
}

.module .contentHolder table tr.aqua-medium-fill {
    background-color: var(--hez-aqua-medium);
}

.module .contentHolder table tr:hover,
.styled-table tr:hover {
    background-color: var(--hez-purple-ultralight);
    transition: background-color 0.1s;
}

.module .contentHolder table tr:first-child:hover {
    background-color: inherit;
    transition: none;
}

.module .contentHolder table.nonAlternating tr:hover {
    background-color: inherit;
    transition: none;
}

.module .contentHolder table tr.purple-medium-fill:hover {
    background-color: var(--hez-purple-medium);
}

.module .contentHolder table tr.aqua-medium-fill:hover {
    background-color: var(--hez-aqua-medium);
}

.module .contentHolder table tr.active,
.module .contentHolder table tr.highlight {
    background-color: var(--hez-purple-light);
}

.module .contentHolder table tr.retired td {
    color: var(--hez-grey);
}

.module .contentHolder table th,
.module .contentHolder table td,
.styled-table th,
.styled-table td {
    position: relative;
    vertical-align: top;
    text-align: left;
    border-right: 2px solid #fff;
    padding: 6px 12px;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
}

table td.right {
    text-align: right !important;
}

.module .contentHolder table th,
.styled-table th{
    border-bottom: 2px solid var(--hez-purple-nearwhite);
    font-weight: 800;
}

.module .contentHolder table th.sortable {
    padding: 6px 12px 6px 22px;
    cursor: pointer;
}

.module .contentHolder table th.sortable.asc:before {
    content: '';
    position: absolute;
    left: 7px;
    top: 12px;
    border-top: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid var(--hez-purple-medium);
}

.module .contentHolder table th.desc:before {
    content: '';
    position: absolute;
    left: 7px;
    top: 13px;
    border-top: 4px solid var(--hez-purple-medium);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: none;
}

.module .contentHolder table tr.purple-medium-fill th.sortable.asc:before {
    border-bottom: 4px solid var(--hez-purple);
}

.module .contentHolder table tr.purple-medium-fill th.sortable.desc:before {
    border-top: 4px solid var(--hez-purple);
}

.module .contentHolder table tr.aqua-medium-fill th.sortable.asc:before {
    border-bottom: 4px solid var(--hez-aqua);
}

.module .contentHolder table tr.aqua-medium-fill th.sortable.desc:before {
    border-top: 4px solid var(--hez-aqua);
}

.module .contentHolder table tr:last-child td {
    border-bottom: 2px solid var(--hez-purple-nearwhite);
}

.module .contentHolder table th.active.asc:before {
    border-bottom: 4px solid #000;
}

.module .contentHolder table th.active.desc:before {
    border-top: 4px solid #000;
}

.module .contentHolder table th.icon {
    width: 21px;
}

table td .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

.icon.red .svgIcon {
    background-color: var(--hez-red);
}

.icon.orange .svgIcon {
    background-color: var(--hez-orange);
}

.icon.warning .svgIcon {
    -webkit-mask-image: url('../images/icons/exclamation-triangle.svg');
    -webkit-mask-size: 108%;
    mask-image: url('../images/icons/exclamation-triangle.svg');
    mask-size: 108%;
}

.icon.triangle {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.module .contentHolder table td a,
.module .contentHolder table td div.valid {
    position: relative;
    display: block;
    text-decoration: none;
    padding: 0;
    top: -4px;
    height: 22px;
    margin-bottom: -6px;
}

.module .contentHolder table td a .svgIcon {
    background-color: var(--hez-purple-icon);
}

.module .contentHolder table td a.log.show .svgIcon {
    -webkit-mask-image: url('../images/icons/clock-o.svg');
    -webkit-mask-size: 84%;
    mask-image: url('../images/icons/clock-o.svg');
    mask-size: 84%;
}

.module .contentHolder table td a.task .svgIcon {
    -webkit-mask-image: url('../images/icons/calendar-check.svg');
    -webkit-mask-size: 86%;
    mask-image: url('../images/icons/calendar-check.svg');
    mask-size: 86%;
}

.module .contentHolder table td a.task.create .svgIcon {
    -webkit-mask-image: url('../images/icons/calendar-plus.svg');
    mask-image: url('../images/icons/calendar-plus.svg');
}

.module .contentHolder table td a.task.target.mandates .svgIcon {
    -webkit-mask-image: url('../images/icons/sepa.svg');
    mask-image: url('../images/icons/sepa.svg');
}

.module .contentHolder table td a.task.target.show .svgIcon {
    -webkit-mask-image: url('../images/icons/eye.svg');
    mask-image: url('../images/icons/eye.svg');
}

.module .contentHolder table td a.task.target.retry .svgIcon {
    -webkit-mask-image: url('../images/icons/arrow-rotate-left-solid.svg');
    mask-image: url('../images/icons/arrow-rotate-left-solid.svg');
}

.module .contentHolder table td a.task.green .svgIcon {
    background-color: var(--hez-green);
}

.module .contentHolder table td a.task.orange .svgIcon {
    background-color: var(--hez-orange);
}

.module .contentHolder table td a.task.red .svgIcon {
    background-color: var(--hez-red);
}

.module .contentHolder table td a.note.show .svgIcon {
    -webkit-mask-image: url('../images/icons/sticky-note.svg');
    -webkit-mask-size: 80%;
    mask-image: url('../images/icons/sticky-note.svg');
    mask-size: 80%;
    background-color: var(--hez-purple);
}

.module .contentHolder table td a.note.create .svgIcon {
    -webkit-mask-image: url('../images/icons/sticky-note-plus.svg');
    -webkit-mask-size: 84%;
    mask-image: url('../images/icons/sticky-note-plus.svg');
    mask-size: 84%;
}

.module .contentHolder table td a.details .svgIcon {
    -webkit-mask-image: url('../images/icons/eye.svg');
    -webkit-mask-size: 100%;
    mask-image: url('../images/icons/eye.svg');
    mask-size: 100%;
}

.module .contentHolder table td a.download .svgIcon {
    -webkit-mask-image: url('../images/icons/download.svg');
    -webkit-mask-size: 92%;
    mask-image: url('../images/icons/download.svg');
    mask-size: 92%;
}

.module .contentHolder table td a.order.up .svgIcon {
    -webkit-mask-image: url('../images/icons/arrow-up.svg');
    -webkit-mask-size: 76%;
    mask-image: url('../images/icons/arrow-up.svg');
    mask-size: 76%;
}

.module .contentHolder table td a.order.down .svgIcon {
    -webkit-mask-image: url('../images/icons/arrow-down.svg');
    -webkit-mask-size: 76%;
    mask-image: url('../images/icons/arrow-down.svg');
    mask-size: 76%;
}

.module .contentHolder table tr:hover td a .svgIcon {
    background-color: var(--hez-purple);
    transition: background-color 0.3s;
}

.module .contentHolder table td a.validate .svgIcon {
    -webkit-mask-image: url('../images/icons/square-xmark.svg');
    mask-image: url('../images/icons/square-xmark.svg');
    -webkit-mask-size: 76%;
    mask-size: 76%;
    background-color: var(--hez-red);
    transition: background-color 0.3s;
}

.module .contentHolder table td a.validated .svgIcon {
    -webkit-mask-image: url('../images/icons/check-square.svg');
    mask-image: url('../images/icons/check-square.svg');
    -webkit-mask-size: 76%;
    mask-size: 76%;
    background-color: var(--hez-green);
    transition: background-color 0.3s;
}

.module .contentHolder table td a.invalidatable .svgIcon {
    -webkit-mask-image: url('../images/icons/square-xmark.svg');
    mask-image: url('../images/icons/square-xmark.svg');
    -webkit-mask-size: 76%;
    mask-size: 76%;
    background-color: var(--hez-purple-icon);
    transition: background-color 0.3s;
}

.module .contentHolder table td a.collapsable .svgIcon {
    -webkit-mask-image: url('../images/icons/angle-single-down.svg');
    mask-image: url('../images/icons/angle-single-down.svg');
    -webkit-mask-size: 76%;
    mask-size: 76%;
    background-color: var(--hez-purple-icon);
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.module .contentHolder table td a.collapsable.collapsed .svgIcon {
    transform: rotate(0);
}

.module .contentHolder table .collapsableContent {
    border: none;
}

.module .contentHolder table .collapsableContent th,
.module .contentHolder table .collapsableContent tr,
.module .contentHolder table .collapsableContent td {
    border: none !important;
    background-color: transparent;
}

.module .contentHolder table.customAlternating tr.grey-light-fill {
    background-color: var(--hez-grey-light);
}

.module .contentHolder table.customAlternating tr.grey-light-fill:hover {
    background-color: var(--hez-purple-ultralight);
}

.module .contentHolder table.customAlternating tr.active {
    background-color: var(--hez-purple-light) !important;
}

.module .contentHolder table.customAlternating tr.collapsable {
    background: rgb(241, 248, 248);
    background: linear-gradient(180deg, rgb(241, 248, 248) 50%, rgb(238, 250, 247) 100%);
}

.module .contentHolder table tr.collapsable>td {
    padding: 4px 12px 8px 12px;
    transition: padding 0.5s;
}

.module .contentHolder table tr.collapsable.collapsed>td {
    padding: 0 12px;
}

.module .contentHolder table tr.collapsable .collapsableContent {
    height: auto;
    height: calc-size(auto, size);
    transition: all 0.5s ease-out;
}

.module .contentHolder table tr.collapsable.collapsed .collapsableContent {
    height: 0;
}

.module .contentHolder table tr.collapsable table {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
}

.module .contentHolder table .collapsableContent table tbody tr:first-child {
    border-bottom: thin solid var(--hez-grey-medium) !important;
}

.module .contentHolder table td a.sync .svgIcon {
    -webkit-mask-image: url('../images/icons/arrows-rotate-solid.svg');
    -webkit-mask-size: 86%;
    mask-image: url('../images/icons/arrows-rotate-solid.svg');
    mask-size: 86%;
}

.module .contentHolder table td a.disabled {
    opacity: 0.4;
}

.module .contentHolder .pagination {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.module .contentHolder .pagination li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}

.module .contentHolder .pagination li a {
    position: relative;
    display: block;
    padding: 1px 6px;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 15px;
    transition: color 0.6s, background-color 0.6s;
}

.module .contentHolder .pagination li.active a {
    border-top: 1px solid var(--hez-orange);
    border-bottom: 1px solid var(--hez-orange);
    pointer-events: none;
}

.module .contentHolder .pagination li a:hover {
    background-color: var(--hez-purple-medium);
    color: #fff;
    transition: color 0.3s, background-color 0.3s;
}

.module .contentHolder .contentNavi a.button {
    margin-left: 4px;
}

.module .contentHolder .contentNavi a.moduleLink {
    border-color: var(--hez-orange) !important;
    color: var(--hez-orange) !important;
}

.module .contentHolder .contentNavi a.moduleLink:hover {
    background-color: var(--hez-orange) !important;
    color: #fff !important;
}

.module .contentHolder .singleMessage {
    position: relative;
    width: 60%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding-top: 90px;
}

.module .contentHolder .singleMessage .imageHolder {
    position: relative;
    width: 26%;
    height: 160px;
    min-width: 120px;
    max-width: 390px;
    margin: 0 auto 21px auto;
    text-align: center;
}

.module .contentHolder .singleMessage h1 {
    color: var(--hez-purple);
}

.module .contentHolder .pageNotFound .svgIcon {
    background-color: var(--hez-purple);
    -webkit-mask-image: url('../images/icons/404.svg');
    -webkit-mask-size: 76%;
    mask-image: url('../images/icons/404.svg');
    mask-size: 76%;
}

/* end module */

.dashboard {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.dashboard.top {
    height: calc(100% - 200px);
    margin-bottom: 20px;
}

.dashboard.bottom {
    /*height: 180px;*/
}

.dashboard .charts {
    width: 100%;
}

.dashboard .column.one-third {
    padding: 0 20px;
    width: calc(33.33% - 40px);
    text-align: center;
}

.dashboard h3.title {
    border-bottom: 1px solid var(--hez-aqua-medium);
    padding-bottom: 9px;
    color: var(--hez-purple);
    margin-bottom: 0;
}

.dashboard .graph {
    position: relative;
    width: 60%;
    display: inline-block;
    margin: 18px 0 22px 0;
}

.dashboard ul {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.dashboard ul li {
    position: relative;
    list-style: none;
    padding: 0;
}

.dashboard ul li a {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--hez-purple);
    padding: 6px 0;
    /*border-bottom: 1px solid var(--hez-aqua-medium);*/
    background-color: transparent;
    transition: background-color 0.9s;
}

.dashboard ul li a:hover {
    background-color: var(--hez-purple-ultralight);
    transition: background-color 0.3s;
}

.dashboard ul li:last-child a {
    border: none;
}

.dashboard .column.one-half:first-child {
    padding-right: 2px;
    width: calc(50% - 2px);
}

.dashboard .column.one-half:last-child {
    padding-left: 2px;
    width: calc(50% - 2px);
}

.dashboard .row {
    position: relative;
    border-top: 1px solid var(--hez-aqua-medium);
    margin-top: 16px;
    padding: 9px 0 0 0;
}

.dashboard .row li {
    display: inline-block;
    vertical-align: top;
}

.dashboard .row li a {
    border: none;
}

.dashboard .shortcuts li {
    text-align: center;
    width: 14%;
    padding: 12px 1%;
}

.dashboard .shortcuts li a {
    text-align: center;
}

.dashboard .shortcuts li a .icon {
    position: relative;
    display: inline-block;
    width: 72px;
    border: thin solid var(--hez-purple);
    font-size: 24px;
    line-height: 72px;
    margin-bottom: 11px;
}

.dashboard .links li a {
    padding-left: 26px;
    padding-right: 16px;
    margin-right: 18px;
}

.dashboard .links li a:before {
    position: absolute;
    left: 5px;
    top: 10px;
    content: '';
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--hez-purple);
    border-right: none;
}

.tableHeader {
    position: relative;
    width: calc(100% - 26px);
    padding: 5px 12px;
    font-weight: 800;
}

/* end dashboard */
#notesScreen,
#tasksScreen {
    position: relative;
    width: 100%;
    height: 100%;
}

#notesScreen .two-thirds,
#tasksScreen .two-thirds {
    width: 61%;
    height: 100%;
    padding-right: 5%;
}

#notesScreen .notesList,
#tasksScreen .taskList {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#tasksScreen .taskList.tasks {
    height: 50%;
    display: block;
}

#tasksScreen .taskList.actions {
    height: 20%;
    display: block;
}

#notesScreen .notesList .contents,
#tasksScreen .notesList .contents {
    position: relative;
    width: 100%;
}

#notesScreen .message,
#tasksScreen .message {
    position: relative;
    padding: 12px 20px 12px 18px;
    border-bottom: 1px solid var(--hez-purple-light);
}

#notesScreen .message p,
#tasksScreen .message p {
    position: relative;
    padding: 0;
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 18px;
}

#notesScreen .message .details,
#tasksScreen .message .details {
    position: relative;
    min-height: 21px;
}

#notesScreen .message .details .info,
#tasksScreen .message .details .info {
    position: absolute;
    left: -1px;
    bottom: 0;
    padding-top: 4px;
}

#notesScreen .message .grey-text.small,
#tasksScreen .message .grey-text.small {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    line-height: 12px;
}

#notesScreen .message .button.small,
#tasksScreen .message .button.small {
    padding: 0 12px;
}

#notesScreen .message .switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    bottom: auto;
    left: auto;
    right: auto;
}

#notesScreen form,
#tasksScreen form {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

#notesScreen textarea,
#tasksScreen textarea {
    position: relative;
    width: calc(100% - 36px);
    height: 26vh;
    min-height: 180px;
    padding: 12px 18px 8px 18px;
    margin-bottom: 21px;
    resize: none;
    background: none;
    outline: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 18px;
    color: inherit;
    box-shadow: inset 0 0 32px var(--hez-purple-ultralight);
    background-color: var(--hez-purple-ultralight);
}

#notesScreen input[type="submit"],
#tasksScreen input[type="submit"] {
    position: absolute;
    bottom: 0;
    right: 16px;
    outline: none;
}

#notesScreen .switch {
    bottom: 0;
    left: 16px;
}

/* log display in extrascreen */
#details {
    position: relative;
    width: 100%;
    /*height: 100%;*/
}

#details .logHeader {
    position: relative;
    width: calc(100% - 38px);
    padding: 0 20px 12px 18px;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    border-bottom: thin solid var(--hez-purple-ultralight);
}

#details .logList {
    position: relative;
    width: 100%;
}

#details .logList .message {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    padding: 11px 20px 10px 18px;
    border-bottom: thin solid var(--hez-purple-ultralight);
}

/* filter/search options */
.filterOptions {
    position: absolute;
    left: 0;
    right: 0;
    top: 93px;
    padding-top: 12px;
    z-index: 30;
    -webkit-transform-origin: center top;
    transform-origin: center top;
}

.filterOptions .pane {
    position: relative;
    width: calc(100% - 44px);
    height: calc(100% - 25px);
    padding: 5px 32px 20px 32px;
    background-color: #fff;
}

.filterOptions .triangle {
    position: absolute;
    top: -32px;
    border-bottom: 21px solid rgb(177, 181, 201);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: none;
    z-index: 31;
}

.filterOptions .triangle:after {
    position: absolute;
    content: '';
    bottom: -23px;
    left: -6px;
    border-bottom: 14px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
    z-index: 32;
}

.filterOptions p:first-child {
    font-size: 17px;
    color: var(--hez-purple);
}

.filterOptions .listHolder {
    position: relative;
    width: 100%;
    height: calc(100% - 87px);
    /*display: table-row;*/
    overflow-x: hidden;
    overflow-y: hidden;
    margin-bottom: 5px;
}

.filterOptions .listHolder.scrollable {
    overflow-y: auto;
}

.filterOptions ul.filterList {
    position: relative;
    display: table-cell;
    list-style: none;
    padding: 0 0 0 12px;
    min-width: 140px;
    height: 100%;
    /*display: inline-block;*/
    vertical-align: top;
    border-right: 1px solid var(--hez-purple-light);
}

.filterOptions ul.filterList li {
    position: relative;
    margin-bottom: 8px;
}

.filterOptions ul.filterList li:first-child {
    font-weight: 800;
}

.filterOptions form.search {
    position: relative;
    width: 100%;
    padding: 0 0 14px 0;
}

.filterOptions label {
    position: relative;
    margin-right: 9px;
}

.filterOptions form.search input {
    position: relative;
    min-width: 30%;
}

/*advanced search options in module title*/
.filterOptions form.search .advancedOptions {
    position: relative;
    width: 66%;
}

.filterOptions form.search .advancedOptions .option {
    position: relative;
    display: none;
    opacity: 0;
    transition: opacity 0.4s;
}

.filterOptions form.search .advancedOptions .option.active {
    display: block;
    opacity: 1;
}

/*advanced search options in list box*/
.advancedSearch {
    position: absolute;
    width: 100%;
    z-index: 500;
}

.advancedSearch .advancedOptions {
    width: calc(100% - 32px);
    padding: 0 16px 12px 16px;
    background-color: var(--hez-purple-ultralight);
}

.advancedSearch .advancedOptions .option {
    position: relative;
    display: none;
    opacity: 0;
    transition: opacity 0.4s;
}

.advancedSearch .advancedOptions .option.active {
    display: block;
    opacity: 1;
}

.submitOnEnter img.ui-datepicker-trigger {
    right: 43px;
    margin-top: -30px;
}

a.imgButton {
    position: relative;
    width: 130px;
    height: 42px;
    display: inline-block;
    vertical-align: top;
    margin-right: 14px;
    margin-top: 6px;
    text-decoration: none;
    margin-bottom: 12px;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130px 41px;
}

a.playstore {
    background-image: url('../images/icon-playstore.png');
}

a.appstore {
    background-image: url('../images/icon-appstore.png');
}

a.imgButton:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.5s ease;
}

#email {
    position: relative;
    width: 100%;
    height: calc(100% - 36px);
    display: block;
}

#email span.mailVar {
    position: relative;
    background-color: var(--hez-aqua-light);
    padding: 2px 9px;
    border-radius: 5px;
    transition: background-color 0.7s, color 0.5s;
}

#email span.mailVar:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 17px;
    display: block;
    opacity: 0;
    top: 3px;
    left: 0;
    right: 0;
    background-image: url('../images/icon_drop.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 18px auto;
    transition: opacity 1s;
}

#email span.mailVar:hover {
    background-color: #F4D2CD;
    color: #E29E95;
}

#email span.mailVar:hover:after {
    opacity: 1;
}

#mailQueue .icon.small {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    border: thin solid var(--hez-purple-medium);
    background-color: #fff;
    margin-top: 2px;
    transition: background-color 0.5s;
}

#mailQueue .icon.small .svgIcon {
    background-color: var(--hez-purple-medium);
    transition: background-color 0.5s;
}

#mailQueue .icon.small.edit .svgIcon {
    mask-image: url('../images/icons/pencil-alt.svg');
    mask-size: 68%;
    -webkit-mask-image: url('../images/icons/pencil-alt.svg');
    -webkit-mask-size: 68%;
}

#mailQueue .icon.small.preview .svgIcon {
    -webkit-mask-image: url('../images/icons/eye.svg');
    -webkit-mask-size: 68%;
    mask-image: url('../images/icons/eye.svg');
    mask-size: 68%;
}

#mailQueue .status {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 8px;
}

#mailQueue .status.ready {
    border: thin solid var(--hez-green);
}

#mailQueue .status.ready .svgIcon {
    background-color: var(--hez-green);
    mask-image: url('../images/icons/check.svg');
    mask-size: 68%;
    -webkit-mask-image: url('../images/icons/check.svg');
    -webkit-mask-size: 68%;
}

#mailQueue .status.queued {
    border: thin solid var(--hez-grey);
}

#mailQueue .status.queued .svgIcon {
    display: none;
    opacity: 0;
    visibility: hidden;
}

#mailQueue .status.edit {
    border: thin solid var(--hez-purple-medium);
}

#mailQueue .status.edit .svgIcon {
    background-color: var(--hez-purple-medium);
}

#mailQueue a.icon:hover {
    background-color: var(--hez-purple-medium);
}

#mailQueue a.icon:hover .svgIcon {
    background-color: #fff;
}

.itemList.queue li {
    padding: 3px 5px;
    width: calc(100% - 14px) !important;
    border-bottom: thin solid var(--hez-purple-light);
}

.itemList.queue li:last-child {
    border-bottom: none;
}

#email .multiList.variables {
    margin-bottom: 21px;
}

#offer {
    position: relative;
    width: 100%;
    height: calc(100% - 12px);
    margin-bottom: 0;
    display: block;
    background-color: #fff;
    border: 1px solid var(--hez-purple-light);
}

#offer .part,
.part.dragPart {
    position: relative;
    padding: 2px;
    border-bottom: 1px solid var(--hez-purple-medium);
    box-sizing: border-box;
    transition: border-top 0.4s, border-bottom 0.4s;
    display: block;
}

.part.dragPart {
    padding: 0;
}

#offer .part .menu {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 6px 12px 0 0;
    color: var(--hez-aqua);
    z-index: 10;
}

#offer .part.insert {
    border-top: none;
}

#offer .part.insert.above {
    border-top: 3px solid var(--hez-purple-medium);
}

#offer .part.insert.below {
    border-bottom: 3px solid var(--hez-purple-medium);
}

#offer .icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    border: thin solid #fff;
    background-color: transparent;
    transition: background-color 0.5s;
}

#offer .icon.small {
    width: 21px;
    height: 21px;
    margin-left: 2px;
}

#offer .icon .svgIcon {
    background-color: #fff;
    transition: background-color 0.5s;
}

#offer .icon:hover {
    background-color: #fff;
}

#offer .icon:hover .svgIcon {
    background-color: var(--hez-purple-medium);
}

#offer .itemMenu .icon {
    border: thin solid var(--hez-purple-medium);
}

#offer .itemMenu .svgIcon {
    background-color: var(--hez-purple-medium);
}

#offer .itemMenu .icon:hover {
    background-color: var(--hez-purple-medium);
}

#offer .itemMenu .icon:hover .svgIcon {
    background-color: #fff;
}

#offer .icon.small.delete .svgIcon {
    mask-image: url('../images/icons/minus.svg');
    -webkit-mask-image: url('../images/icons/minus.svg');
}

#offer .icon.small.drag .svgIcon {
    mask-image: url('../images/icons/arrows-alt.svg');
    mask-size: 74%;
    -webkit-mask-image: url('../images/icons/arrows-alt.svg');
    -webkit-mask-size: 74%;
}

#offer .icon.small.edit .svgIcon {
    mask-image: url('../images/icons/pencil-alt.svg');
    mask-size: 70%;
    -webkit-mask-image: url('../images/icons/pencil-alt.svg');
    -webkit-mask-size: 70%;
}

#offer .icon.small.clone .svgIcon {
    mask-image: url('../images/icons/copy.svg');
    mask-size: 60%;
    -webkit-mask-image: url('../images/icons/copy.svg');
    -webkit-mask-size: 60%;
}

#offer .icon.small.help {
    width: 14px;
    height: 14px;
    line-height: 10px;
    border: thin solid var(--hez-purple-medium);
}

#offer .icon.small.help .svgIcon {
    mask-image: url('../images/icons/info.svg');
    mask-size: 30%;
    -webkit-mask-image: url('../images/icons/info.svg');
    -webkit-mask-size: 30%;
    background-color: var(--hez-purple-medium);
}

#offer .icon.help:hover {
    background-color: var(--hez-purple-medium);
}

#offer .icon.help:hover .svgIcon {
    background-color: #fff;
}

#offer .helpText {
    position: relative;
    width: calc(92% - 180px);
    margin: 6px 0 18px 70px !important;
    border: thin solid var(--hez-purple);
    color: var(--hez-purple);
    font-size: 12px;
    line-height: 16px;
    padding: 14px 22px 18px 22px;
    border-radius: 6px;
    display: none;
}

#offer .helpText p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

#offer .helpText a.close {
    position: absolute;
    right: 9px;
    top: 8px;
    width: 14px;
    height: 14px;
    display: block;
}

#offer .helpText a.close .svgIcon {
    background-color: var(--hez-purple);
}

#offer .contentHolder {
    position: relative;
    width: calc(100% - 24px);
    padding: 10px 12px 0 12px;
    margin: 0;
}

#offer .part,
#email {
    font-size: 15px;
    line-height: 19px;
}

#offer .part .child {
    position: relative;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
}

#offer .part[data-type="product"] {
    padding-bottom: 16px;
}

#offer p.grey-text {
    font-size: 14px;
    line-height: 18px;
}

/*
#offer .part .contentHolder > .child.publish {
    border-bottom: 1px solid var(--hez-purple-ultralight);
}
*/
#offer .part .contentHolder>.child:last-child {
    border-bottom: none;
}

#offer .part .child[data-type="trait"] {
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
}

#offer .part .child[data-type="product"] {
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    padding-bottom: 6px;
}

#offer .part>.child.edit {
    margin-bottom: 9px;
}

#offer .part .label {
    position: relative;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

#offer .part .label.main,
.part.dragPart .label.main {
    background-color: var(--hez-purple);
    padding: 8px 90px 8px 12px;
    color: #fff;
}

#dropPosition .label.main {
    background-color: var(--hez-grey) !important;
    line-height: 19px;
}

#offer .part .label.sub {
    font-size: 15px;
    line-height: 19px;
    border-bottom: thin solid var(--hez-purple-medium);
    color: var(--hez-purple);
    margin-bottom: 14px;
}

#offer .part p {
    margin: 0;
}

#offer .child .identifier {
    position: relative;
    float: left;
    width: 25%;
    padding: 3px 0 5px 0;
}

#offer .child .identifier input[type="checkbox"] {
    margin-right: 6px;
}

#offer .part .child .child .identifier {
    padding-left: 12px;
    width: calc(25% - 12px);
}

#offer .part .child .child .child .identifier {
    padding-left: 24px;
    width: calc(25% - 24px);
}

#offer .part .child .child .child .child .identifier {
    padding-left: 36px;
    width: calc(25% - 36px);
}

#offer .child .value {
    position: relative;
    float: right;
    width: calc(75% - 72px);
    transition: opacity 0.5s;
}

#offer .child.padLeft {
    width: calc(100% - 72px);
    left: 72px;
}

#offer .child.display .value {
    width: 75%;
}

#offer .child .value .main {
    position: relative;
    float: left;
    width: 70%;
    margin: 0;
    text-align: left;
}

#offer .child .value .main input[type="checkbox"],
#offer .child .value .main input[type="radio"] {
    width: 16px;
    height: 16px;
}

#offer .child .value .addendum {
    position: relative;
    float: right;
    width: calc(30% - 21px);
    text-align: left;
    margin: 0;
    padding-left: 21px;
}

#offer .child .value .addendum input.spinner {
    width: 70%;
    margin-right: 0;
    padding-right: 0;
}

/* custom icon for tariff bandwidth warning */
#offer .ui-spinner .bandwidthWarning {
    position: absolute;
    right: 55px;
    top: 4px;
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 16px;
    background-color: var(--hez-orange);
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 14px;
    font-style: italic;
    cursor: default;
}

.formRow {
    position: relative;
    width: calc(100% - 16px);
}

.unit {
    position: absolute;
    top: 5px;
    min-width: 36px;
    display: block;
}

table td {
    position: relative;
}

table td .unit {
    position: relative;
    display: inline;
    top: auto;
    margin-right: 7px;
}

.formRow .unit {
    top: 19px;
}

.unit.pre {
    left: -42px;
    text-align: right;
}

.unit.post {
    left: calc(100% + 9px);
    text-align: left;
}

#offer .unit.post {
    left: calc(85% + 9px);
}

.hasUnit {
    position: relative;
    width: calc(100% - 30px);
    margin-right: 0 !important;
}

.unit.absolute {
    position: absolute;
    width: 30px;
    top: 5px;
    left: auto;
    right: 0;
    margin-right: 0 !important;
    text-align: right;
}

#offer .child {
    opacity: 1;
    transition: opacity 0.5s;
}

#offer .child:has(> .label > .value.disabled) {
    opacity: 0.4;
}

#offer .child.checkRequired,
#offer .child.checkRequired .child {
    opacity: 1 !important;
}

#offer .child .value input,
#offer .child .value .input,
#offer .child .value .ui-spinner,
#offer .child .value select,
.generic > .ui-spinner {
    width: 85%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    margin-bottom: 0;
}

#offer .child .value .input {
    width: calc(85% - 16px);
    margin-bottom: 5px;
}

#offer .child .value .input.invalid,
#offer .child .value input.invalid {
    background: linear-gradient(to top, var(--hez-red) 2px, transparent 2px), linear-gradient(to top, var(--hez-purple-light) 1px, transparent 1px) !important;
}

#offer .child .value .ui-spinner a.ui-spinner-button,
.generic > .ui-spinner a.ui-spinner-button {
    height: 38%;
}

#offer .child .value .ui-spinner a.ui-spinner-up, 
.generic > .ui-spinner a.ui-spinner-up {
    top: -1%;
}

#offer .child .value .ui-spinner a.ui-spinner-down,
.generic > .ui-spinner a.ui-spinner-down {
    top: 40%;
}

#offer .child .value .ui-spinner a.ui-spinner-up .ui-button-icon,
.generic > .ui-spinner a.ui-spinner-up .ui-button-icon {
    top: 2px;
}

#offer .child .value .ui-spinner a.ui-spinner-down .ui-button-icon,
.generic > .ui-spinner a.ui-spinner-down .ui-button-icon {
    top: 3px;
}

.generic > .ui-spinner a {
    position: absolute !important;
    height: 12px !important;
}
.generic > .ui-spinner a.ui-spinner-down {
    top: 14px !important;
}

#offer .child .itemMenu {
    position: relative;
    display: block;
    float: left;
    width: 72px;
    height: 100%;
    min-height: 10px;
    text-align: left;
}

#offer .child .itemMenu .icon {
    width: 18px;
    height: 18px;
    margin: 0;
}

#offer .child.display .itemMenu {
    display: none;
    width: 0;
}

ul.connectionList {
    position: relative;
    width: 100%;
    list-style: none;
    font-size: 0;
}

ul.connectionList li.connection {
    position: relative;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0 0 0 12px;
}

ul.connectionList li.address {
    position: relative;
    padding: 4px 0 4px 12px;
    margin: 0;
    font-size: 14px;
    color: var(--hez-aqua-dark);
    line-height: 17px;
}

ul.connectionList li.divider {
    position: relative;
    display: block;
    padding: 0;
    margin: 4px 0 9px 0;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    background-color: var(--hez-aqua-light);
}

#modal ul.connectionList li.divider {
    margin: 0 0 4px 0;
}

ul.connectionList.disabled li.connection {
    color: var(--hez-aqua-medium);
}

ul.connectionList.disabled li.connection {
    color: var(--hez-grey);
    cursor: auto;
}

ul.connectionList li .details {
    margin-bottom: 0;
    margin-left: 12px;
    width: calc(100% - 12px);
}

ul.connectionList li .details .row {
    padding: 2px 0;
}

ul.connectionList li .details .row .column:nth-child(1) {
    width: 21%;
}

ul.connectionList li .details .row .column:nth-child(2) {
    width: 14%;
}

ul.connectionList li .details .row .column:nth-child(3) {
    width: 19%;
}

ul.connectionList li .details .row .column:nth-child(4) {
    width: 23%;
}

ul.connectionList li .details .row .column:nth-child(5) {
    width: 23%;
}

ul.connectionList li .details .row .error {
    width: 21px;
    margin-right: 5px;
    float: left;
}

ul.connectionList .itemMenu {
    position: absolute !important;
    left: -40px !important;
    top: -4px !important;
}

/*accordeon*/
.accordeon {
    position: relative;
    width: 100%;
}

.accordeon .pane {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 0;
}

.accordeon .pane .header {
    position: relative;
    width: calc(100% - 24px);
    padding: 5px 12px;
    background-color: var(--hez-purple);
    display: block;
    cursor: pointer;
}

.accordeon .pane .header:after {
    position: absolute;
    content: '';
    border-bottom: 8px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: none;
    top: 11px;
    right: 12px;
    transition: all 0.5s;
}

.accordeon .pane.inactive .header:after {
    transform: rotate(180deg);
}

.accordeon .pane .header h4 {
    color: #fff;
    font-weight: bold;
    margin: 0;
}

.accordeon .pane .content {
    width: 100%;
    padding: 0 0 6px 0;
}

/* clockpicker */
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1010;
    display: none;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.popover.top {
    margin-top: -10px
}

.popover.right {
    margin-left: 10px
}

.popover.bottom {
    margin-top: 10px
}

.popover.left {
    margin-left: -10px
}

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0
}

.popover-content {
    padding: 9px 14px
}

.popover>.arrow,
.popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    overflow: visible;
    margin: 0;
    padding: 0;
    z-index: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.popover>.arrow {
    border-width: 11px
}

.popover>.arrow:after {
    content: "";
    border-width: 10px
}

.popover.top>.arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0
}

.popover.top>.arrow:after {
    bottom: 1px;
    margin-left: -10px;
    content: " ";
    border-top-color: #fff;
    border-bottom-width: 0
}

.popover.right>.arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0
}

.popover.right>.arrow:after {
    bottom: -10px;
    left: 1px;
    content: " ";
    border-right-color: #fff;
    border-left-width: 0
}

.popover.bottom>.arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25)
}

.popover.bottom>.arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff
}

.popover.left>.arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25)
}

.popover.left>.arrow:after {
    right: 1px;
    bottom: -10px;
    content: " ";
    border-right-width: 0;
    border-left-color: #fff
}

.btn {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
    outline: dotted thin;
    outline: -webkit-focus-ring-color auto 5px;
    outline-offset: -2px
}

.btn:focus,
.btn:hover {
    color: #333;
    text-decoration: none
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.btn-default.active,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad
}

.btn-default.active,
.btn-default:active,
.open .dropdown-toggle.btn-default {
    background-image: none
}

.btn-block {
    display: block;
    width: 100%
}

.text-primary {
    color: var(--hez-purple)
}

.clockpicker .input-group-addon {
    cursor: pointer
}

.clockpicker-moving {
    cursor: move
}

.clockpicker-align-left.popover>.arrow {
    left: 25px
}

.clockpicker-align-top.popover>.arrow {
    top: 17px
}

.clockpicker-align-right.popover>.arrow {
    left: auto;
    right: 25px
}

.clockpicker-align-bottom.popover>.arrow {
    top: auto;
    bottom: 6px
}

.clockpicker-popover .popover-title {
    background-color: #fff;
    color: #999;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    text-align: center
}

.clockpicker-popover .popover-title span {
    cursor: pointer
}

.clockpicker-popover .popover-content {
    background-color: #f8f8f8;
    padding: 12px
}

.popover-content:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.clockpicker-plate {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    overflow: visible;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.clockpicker-canvas,
.clockpicker-dial {
    width: 200px;
    height: 200px;
    position: absolute;
    left: -1px;
    top: -1px
}

.clockpicker-minutes {
    visibility: hidden
}

.clockpicker-tick {
    border-radius: 50%;
    color: #666;
    line-height: 26px;
    text-align: center;
    width: 26px;
    height: 26px;
    position: absolute;
    cursor: pointer
}

.clockpicker-tick.active,
.clockpicker-tick:hover {
    background-color: var(--hez-purple-ultralight);
    background-color: rgba(0, 149, 221, .25)
}

.clockpicker-button {
    background-image: none;
    background-color: #fff;
    border-width: 1px 0 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin: 0;
    padding: 10px 0
}

.clockpicker-button:hover {
    background-image: none;
    background-color: #ebebeb
}

.clockpicker-button:focus {
    outline: 0 !important
}

.clockpicker-dial {
    -webkit-transition: -webkit-transform 350ms, opacity 350ms;
    -moz-transition: -moz-transform 350ms, opacity 350ms;
    -ms-transition: -ms-transform 350ms, opacity 350ms;
    -o-transition: -o-transform 350ms, opacity 350ms;
    transition: transform 350ms, opacity 350ms
}

.clockpicker-dial-out {
    opacity: 0
}

.clockpicker-hours.clockpicker-dial-out {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2)
}

.clockpicker-minutes.clockpicker-dial-out {
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    -ms-transform: scale(.8, .8);
    -o-transform: scale(.8, .8);
    transform: scale(.8, .8)
}

.clockpicker-canvas {
    -webkit-transition: opacity 175ms;
    -moz-transition: opacity 175ms;
    -ms-transition: opacity 175ms;
    -o-transition: opacity 175ms;
    transition: opacity 175ms
}

.clockpicker-canvas-out {
    opacity: .25
}

.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
    stroke: none;
    fill: var(--hez-purple-medium)
}

.clockpicker-canvas-bg {
    stroke: none;
    fill: var(--hez-purple-ultralight)
}

.clockpicker-canvas-bg-trans {
    fill: rgba(38, 53, 117, .25)
}

.clockpicker-canvas line {
    stroke: var(--hez-purple-medium);
    stroke-width: 1;
    stroke-linecap: round
}

.clockpicker-button.am-button {
    margin: 1px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px
}

.clockpicker-button.pm-button {
    margin: 1px 1px 1px 136px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px
}

/*numpad*/
.nmpd-wrapper {
    position: fixed;
    display: none;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.nmpd-target {
    cursor: pointer;
}

.nmpd-grid {
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 5000;
    -khtml-user-select: none;
    padding: 20px;
    width: initial;
    border-radius: 6px;
}

input.nmpd-display {
    text-align: right;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4999;
    background-color: rgba(255, 255, 255, 0.3);
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    background-clip: padding-box;
    outline: 0;
    z-index: 5000;
}

.nmpd-grid>tbody>tr>td {
    border: none;
}

.nmpd-wrapper td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.nmpd-wrapper .form-control {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: block;
    width: calc(100% - 32px);
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

.nmpd-wrapper .input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

.nmpd-wrapper .btn-default {
    color: #ffffff;
    background-color: var(--hez-purple);
    border-color: var(--hez-purple);
}

.nmpd-wrapper .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none;
    transition: opacity 0.3s;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nmpd-wrapper .btn:focus {
    outline: none;
}

.nmpd-wrapper .btn.clear {
    width: auto;
    height: auto;
    overflow: auto;
    visibility: visible;
}

.nmpd-wrapper .btn:hover {
    opacity: 0.7;
}

.nmpd-wrapper .btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

/* MAIL TEMPLATE SPECIFIC CSS */
/* COPY TO MAILCHIMP TEMPLATES */
.mcnButtonBlockInner {
    padding-top: 0;
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 18px;
}

.mcnButtonContentContainer {
    border-collapse: separate !important;
    border-radius: 3px;
}

.mcnButtonContent {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 15px;
    padding: 18px;
}

.mcnButton {
    font-weight: bold;
    letter-spacing: normal;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
}

/* resizer css */
.resize-sensor-expand,
.resize-sensor-shrink {
    pointer-events: none;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
    visibility: hidden;
    max-width: 100%;
}

.resize-sensor-child {
    position: absolute;
    left: 0;
    top: 0;
    transition: 0s;
}

.resize-sensor-child-altered {
    width: 200%;
    height: 200%;
}

.pull-right {
    float: right;
}

/*
 * RESPONSIVE
*/
@media only screen and (max-width: 1600px) {

    /*MODULE*/
    /*tables*/
    .module .contentHolder table th[data-priority="4"],
    .module .contentHolder table td[data-priority="4"] {
        display: none;
    }
}

@media only screen and (max-width: 1440px) {

    /*OFFER*/
    #offer .unit {
        font-size: 80%;
    }
}

@media only screen and (max-width: 1400px) {

    /*disable scrollBox since total screen has become scrollable*/
    .scrollBox {
        overflow-y: hidden;
        height: auto !important;
    }

    /*MODULE*/
    /*tables*/
    .module .contentHolder table th[data-priority="3"],
    .module .contentHolder table td[data-priority="3"] {
        display: none;
    }

    /*USER PROFILE*/
    #profile>.column {
        margin-bottom: 21px;
    }

    #profile>.column.one-third {
        width: 50%;
    }

    #profile>.column:nth-child(odd) {
        clear: left;
    }
}

@media only screen and (max-width: 1300px) {

    /*MODULE*/
    /*navigation*/
    #moduleContainer .contentNavi .button {
        padding: 7px 14px;
        min-width: 88px;
        font-size: 14px;
    }

    /*DETAIL SCREEN*/
    /* role list in form */
    .scrollBox .one-third {
        width: 50%;
    }

    .scrollBox .one-third:nth-child(3n+3) {
        clear: none;
    }

    .scrollBox .one-third:nth-child(2n+2) {
        clear: left;
    }
}

@media only screen and (max-width: 1200px) {

    /*MODULE*/
    /*tables*/
    .module .contentHolder table {
        font-size: 13px;
    }

    .module .showInactiveItems {
        bottom: 52px;
    }

    /*DETAIL SCREEN*/
    #extraContent {
        width: 92%;
        padding: 0 3% 0 5%;
    }

    /* forms */
    .column.to-full {
        width: 100% !important;
        /*float: none !important;*/
        clear: left;
        margin-bottom: 21px;
    }

    .column.to-half {
        width: 50% !important;
        margin-bottom: 21px;
    }

    .column.to-quarter {
        width: 25% !important;
        margin-bottom: 21px;
    }

    .column.to-hidden {
        display: none !important;
        height: 0;
        clear: both;
    }
}

@media only screen and (max-width: 1100px) {

    /*MODULE*/
    /*tables*/
    .module .contentHolder table th[data-priority="2"],
    .module .contentHolder table td[data-priority="2"] {
        display: none;
    }

    /*VARIOUS*/
    /*label for DD lists*/
    .itemList .display ul.ui-droppable .label {
        padding: 8px 5px 8px 10px;
        width: calc(100% - 55px);
    }

    .itemList .display ul.ui-droppable .label .column {
        white-space: nowrap;
        overflow-x: hidden;
    }
}

@media only screen and (max-width: 1000px) {

    /*MODULE*/
    /*navigation*/
    #moduleContainer .contentNavi .button {
        padding: 5px 8px;
        min-width: 74px;
        font-size: 14px;
    }
}

/*Dashboard height*/
@media only screen and (max-height: 900px) {
    .dashboard .charts {
        display: none;
    }
}

/* MIN WIDTH IS 900PX AT THE MOMENT - AT SMALLER WIDTHS THE LAYOUT BREAKS */
/* MIN HEIGHT IS 700PX AT THE MOMENT */
#resolutionWarning {
    position: fixed;
    top: 30vh;
    left: 20vw;
    height: 40vh;
    width: 60vw;
    font-size: 40px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

@media only screen and (max-width: 900px),
only screen and (max-height: 670px) {
    .container {
        opacity: 0.1;
    }

    #resolutionWarning {
        visibility: visible;
        opacity: 1;
    }
}