html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.body-content-wrapper {
    flex: 1 0 auto;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.container.header {
    background-color: var(--color-gradient-fallback); /* fallback color if gradients are not supported */
    background-image: var(--gradient-banner);
    max-width: none;
    height: 64px;
    padding-top: 0;
    width: 100%;
}

.wait-overlay {
    z-index: 1049;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e6e6e6;
    background: rgba(230, 230, 230, 0.5);
    text-align: center;
}

    .wait-overlay span.overlay-animation {
        display: inline-block;
        position: absolute;
        top: 50%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: -50px auto 0;
        background-image: url(../content/img/refresh-black.svg);
        width: 100px;
        height: 100px;
        animation: spin 2s linear infinite;
        background-size: 100px;
        filter: var(--filter-black-to-progress);
    }

/* Overlay is a direct child of body - use fixed positioning to avoid overlay movement when scrolling. */
body > .wait-overlay {
    position: fixed;
}

/* Overlay is NOT a direct child of body - use absolute positioning. */
div:not(body) > .wait-overlay {
    position: absolute;
}

button {
    outline: none;
}

/* Base style for icon buttons */
.btn.icon-button {
    outline: none;
    border: 1px solid transparent;
    width: 28px;
    height: 28px;
    background-size: 26px 26px;
    background-color: transparent;
    background-repeat: no-repeat;
    /* Only the filter, focus and hover states, selected state, and background-image needs to be overridden when extending this style */
}

    /* Generic interaction styles */
    .btn.icon-button:hover,
    .btn.icon-button:focus,
    .btn.icon-button:active {
        outline: none;
    }

    /* Icon buttons with black filter by default */
    .btn.icon-button.black-icon-button,
    .btn.icon-button.export-button,
    .btn.icon-button.grid-button,
    .btn.icon-button.send-button,
    .btn.icon-button.display-type-list,
    .btn.icon-button.display-type-overview,
    .btn.icon-button.display-type-statistics,
    .btn.icon-button.delete-button,
    .btn.icon-button.edit-button,
    .btn.icon-button.add-button {
        filter: var(--filter-black-to-button);
    }

        /* Focus and hover states for the above buttons */
        .btn.icon-button.black-icon-button:hover,
        .btn.icon-button.black-icon-button:focus,
        .btn.icon-button.export-button:hover,
        .btn.icon-button.export-button:focus,
        .btn.icon-button.grid-button:hover,
        .btn.icon-button.grid-button:focus,
        .btn.icon-button.send-button:hover,
        .btn.icon-button.send-button:focus,
        .btn.icon-button.display-type-list:hover,
        .btn.icon-button.display-type-list:focus,
        .btn.icon-button.display-type-overview:hover,
        .btn.icon-button.display-type-overview:focus,
        .btn.icon-button.display-type-statistics:hover,
        .btn.icon-button.display-type-statistics:focus,
        .btn.icon-button.delete-button:hover,
        .btn.icon-button.delete-button:focus,
        .btn.icon-button.edit-button:hover,
        .btn.icon-button.edit-button:focus,
        .btn.icon-button.add-button:hover,
        .btn.icon-button.add-button:focus {
            filter: var(--filter-black-to-button-focus);
        }

        /* Selected state for display type and action buttons */
        .btn.icon-button.display-type-list.selected-button,
        .btn.icon-button.display-type-overview.selected-button,
        .btn.icon-button.display-type-statistics.selected-button,
        .btn.icon-button.delete-button.selected-button,
        .btn.icon-button.edit-button.selected-button,
        .btn.icon-button.add-button.selected-button {
            filter: var(--filter-black-to-darkgray);
            cursor: default;
        }

    /* Button background images */
    .btn.icon-button.export-button {
        background-image: url("../content/img/export-black.svg");
    }

    .btn.icon-button.grid-button,
    .btn.icon-button.display-type-list {
        background-image: url("../content/img/grid-black.svg");
    }

    .btn.icon-button.send-button {
        background-image: url("../content/img/send-black.svg");
    }

    .btn.icon-button.display-type-overview {
        background-image: url("../content/img/chart-black.svg");
    }

    .btn.icon-button.display-type-statistics {
        background-image: url("../content/img/bargraph-black.svg");
    }

    .btn.icon-button.delete-button {
        background-image: url('../content/img/delete-black.svg');
    }

    .btn.icon-button.add-button {
        background-image: url('../content/img/add-black.svg');
    }

    .btn.icon-button.edit-button {
        background-image: url('../content/img/edit-black.svg');
    }

/* ReSharper disable once DeclarationIsEmpty */
.simple-combo {
    /*
	This class will normally not be used (encapsulated in an invisible item) but will be translated to
    selectric-simple-combo when handled by selectric but this declaration will at least avoid warnings in views when using it
	*/
}

span.code-style {
    font-family: var(--font-raw);
    font-weight: bold;
}

@media (max-width: 1199px) {
    .big-screen-only {
        display: none;
    }
}

@media (min-width: 1200px) {
    .small-screen-only {
        display: none;
    }
}

@media (max-width: 767px) {
    .over-xs-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .under-xs-only {
        display: none;
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* #region forms */

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    border: none;
    padding: 5px;
    font-size: 15px;
}

input,
select {
    height: 30px;
}


    input[type='checkbox'],
    input[type='radio'] {
        width: 1em;
        height: 1em;
        margin-top: .25em;
        vertical-align: top;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid var(--color-darkgray-50);
        appearance: none;
    }

    input[type='radio'] {
        border-radius: 50% !important;
    }

    input[type='checkbox']:checked {
        background-color: var(--color-checkbox) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

    input[type='checkbox']:focus,
    input[type='checkbox']:hover,
    input[type='checkbox']:active {
        border-color: var(--color-checkbox);
        outline: 0;
        box-shadow: 0 0 2px var(--color-checkbox);
    }

    input[type='radio']:checked {
        background-color: var(--color-radio) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
    }

    input[type='radio']:focus,
    input[type='radio']:hover,
    input[type='radio']:active {
        border-color: var(--color-radio);
        outline: 0;
        box-shadow: 0 0 2px var(--color-radio);
    }

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

    input:invalid {
        color: var(--color-coral);
        font-weight: bold;
    }

label::after {
    content: " :";
}

label.for-checkbox::after {
    content: "";
}

label.for-radio::after {
    content: "";
}

label {
    height: 40px;
    padding-top: 10px;
    font-weight: normal;
}

    label.for-checkbox {
        height: auto;
        padding-top: inherit;
    }

    label.for-sites {
        height: auto;
        padding-top: 10px;
    }

    label.for-radio {
        height: auto;
        padding-top: inherit;
    }

.disabled-label {
    color: var(--color-darkgray-50);
}

.for-checkbox input {
    margin: 3px 5px 0 0;
    float: left;
}

.for-radio input {
    margin-right: 5px;
}

.form-inline .form-control {
    width: initial;
    margin-left: 3px;
}

.textbox {
    color: black;
    background-color: var(--color-light-gray);
    border: none;
    height: 30px;
    padding-left: 5px;
    font-size: 1em;
}

.table-neopost tbody tr:hover .textbox,
.table-neopost tbody tr:hover .dp-textbox {
    background-color: white;
}

input[type="time"] {
    width: 117px; /* based on chrome's dropdown size for time picker */
    background-image: url('../content/img/clock-black.svg');
    background-size: 18px;
    background-position: right;
    background-repeat: no-repeat;
}

    input[type="time"]::-webkit-calendar-picker-indicator {
        background-image: none;
    }

    input[type="time"]::-webkit-datetime-edit-hour-field:focus,
    input[type="time"]::-webkit-datetime-edit-minute-field:focus {
        background-color: var(--color-button-focus);
        color: white;
        outline: none;
    }

*::selection {
    background-color: var(--color-selected-text);
    color: white;
}

ul.without-dot {
    list-style-type: none;
}

/* #endregion */

/* #region top menu */

#navbar-container {
    background-color: var(--color-darkgray);
    height: 33px;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    #navbar-container {
        height: initial;
    }
}

/* #endregion */

/* #region subnavbar */

.subnavbar {
    background-color: transparent;
    margin-top: 0;
}

    .subnavbar ul {
        padding-left: 0;
    }

        .subnavbar ul > li {
            display: inline-block;
            list-style: none;
            margin-right: 25px;
            margin-bottom: 8px;
        }

            .subnavbar ul > li > a {
                color: #000000;
                text-decoration: none;
                font-family: var(--font-roboto);
                text-transform: uppercase;
                font-size: 15px;
                padding-top: 0;
                padding-bottom: 4px;
                white-space: nowrap;
            }

            .subnavbar ul > li.active > a {
                border-bottom: 2px;
                border-bottom-style: solid;
                border-bottom-color: var(--color-subnav-item);
                font-family: var(--font-roboto-bold);
            }

            .subnavbar ul > li > a:hover,
            .subnavbar ul > li > a:focus {
                background-color: #FFFFFF;
                font-family: var(--font-roboto-bold);
                color: black;
                text-decoration: none;
            }

    .subnavbar > ul > li > a::after {
        display: block;
        content: attr(data-text);
        height: 0;
        overflow: hidden;
        visibility: hidden;
        font-family: var(--font-roboto-bold);
    }
/* #endregion */

/* #region subsubnavbar */

.subsubnavbar {
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 15px;
}

    .subsubnavbar ul {
        padding-left: 0;
    }

        .subsubnavbar ul > li {
            display: inline;
            list-style: none;
            margin-right: 25px;
        }

            .subsubnavbar ul > li > a {
                color: #ffffff;
                font-size: 14px;
                text-decoration: none;
                text-transform: uppercase;
                font-family: var(--font-roboto);
                padding: 0 15px;
                background-color: var(--color-button);
                padding-top: 3px !important;
                padding-bottom: 3px !important;
            }

@media (max-width: 1199px) {
    .subsubnavbar ul > li > a {
        padding-bottom: 0;
    }
}

.subsubnavbar ul > li.active > a {
    color: #ffffff;
    background-color: var(--color-darkgray);
    font-weight: bold;
    border-bottom: none;
}

.subsubnavbar ul > li > a:hover,
.subsubnavbar ul > li > a:focus {
    text-decoration: none;
    color: #ffffff;
    background: var(--color-button-focus);
    background-color: var(--color-button-focus);
}

/* #endregion */

/* #region Button row */

.button-row {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* #endregion */

/* #region Tables with sections */

.table-neopost [data-collapsible-section-content] {
    border-top: 0;
    /* This is a default value while JS init is not done */
    display: none;
}

[data-collapsible-section-content] > tr:first-child {
    background-color: var(--color-darkgray-80) !important; /* important is useful to avoid hover highlighting */
    color: white;
}

.table-neopost [data-collapsible-section-header] {
    color: #ffffff;
    font-family: var(--font-roboto-bold);
    font-size: 15px;
    text-align: left;
    background-color: var(--color-darkgray);
    border-radius: 0;
    border-top: 0;
    cursor: pointer;
}

[data-collapsible-section-status] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    border: none;
    display: block;
    margin-left: auto;
    margin-right: 0;
}

[data-collapsible-section-expanded="false"] [data-collapsible-section-status] {
    background-image: url('../content/img/arrow-down-black.svg');
    filter: var(--filter-black-to-white);
}

[data-collapsible-section-expanded="true"] [data-collapsible-section-status] {
    background-image: url('../content/img/arrow-up-black.svg');
    filter: var(--filter-black-to-white);
}

.selection-result {
    text-align: center;
    font-size: 20px;
    margin-top: -10px;
    display: block;
    margin-bottom: 10px;
}
/* #endregion */

/* #region neo-charts.js */

.horizontal-distribution-tooltip {
    text-align: left;
}

    .horizontal-distribution-tooltip ul {
        padding-left: 15px;
        margin-bottom: 0;
        list-style-type: none;
    }

.mail-piece-status-category-tooltip {
    text-align: left;
    padding-left: 15px;
    margin-bottom: 0;
    list-style-type: none;
}

/* #endregion */

/* #region Mail piece categories */

.distributed {
    color: var(--color-darkgreen);
}

.in-progress-state {
    color: var(--color-orange);
}

.on-error {
    color: var(--color-coral);
}

.in-production {
    color: var(--color-darkgray-80);
}

.unknown {
    color: black;
}

.valid-background {
    background-color: var(--color-darkgreen) !important;
    color: #ffffff;
}

.warning-background {
    background-color: var(--color-orange) !important;
    color: #ffffff;
}

.on-error-background {
    background-color: var(--color-coral) !important;
    color: #ffffff;
}

.unknown-background {
    background-color: var(--color-darkgray-80) !important;
    color: #ffffff;
}

.envelope-status-category-tooltip li.distributed {
    color: white;
    list-style-image: url(../content/img/mail-piece-state-category/distributed-bullet.png);
}

.envelope-status-category-tooltip li.in-progress-state {
    color: white;
    list-style-image: url(../content/img/mail-piece-state-category/in-progress-bullet.png);
}

.envelope-status-category-tooltip li.on-error {
    color: white;
    list-style-image: url(../content/img/mail-piece-state-category/on-error-bullet.png);
}

.envelope-status-category-tooltip li.in-production {
    color: white;
    list-style-image: url(../content/img/mail-piece-state-category/in-production-bullet.png);
}

/* #endregion */

/* #region Production supervision failure rates */

.batch-progress-failure-rate-color-low {
    color: var(--color-darkgreen);
}

.batch-progress-failure-rate-color-medium {
    color: var(--color-orange);
}

.batch-progress-failure-rate-color-high {
    color: var(--color-coral);
}

.batch-progress-failure-rate-color-unknown {
    color: black;
}

.batch-progress-status-category-tooltip li.produced {
    color: white;
    list-style-image: url(../content/img/batch-progress-state-category/produced-bullet.png);
}

.batch-progress-status-category-tooltip li.pending {
    color: white;
    list-style-image: url(../content/img/batch-progress-state-category/pending-bullet.png);
}

.batch-progress-status-category-tooltip li.failed {
    color: white;
    list-style-image: url(../content/img/batch-progress-state-category/failed-bullet.png);
}

.contextual-help-button {
    background-image: url(../content/img/help-button-small.png);
    display: block;
    width: 23px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
}

    .contextual-help-button:hover {
        background-image: url(../content/img/help-button-small-hover.png);
        text-decoration: none;
    }

.contextual-help-button-inline {
    background-image: url(../content/img/help-button-small.png);
    display: inline-block;
    width: 23px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
}

    .contextual-help-button-inline:hover {
        background-image: url(../content/img/help-button-small-hover.png);
        text-decoration: none;
    }

.contextual-folder-button {
    background-image: url(../content/img/folder-button-small.svg);
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 26px;
    height: 26px;
}

    .contextual-folder-button:hover {
        background-image: url(../content/img/folder-button-small-hover.svg);
        text-decoration: none;
    }

/* #endregion */

.paging {
    display: block;
    text-align: center;
}

/* #region " Layout " */

.valipost-logo-small {
    text-align: left;
    margin-bottom: 15px;
}

.cineo-logo {
    text-align: center;
    font-family: var(--font-quicksand-bold);
    color: white;
    font-size: 30px;
    margin-top: 10px;
}

.by-quadient {
    font-size: 0.5em;
    vertical-align: super;
}

.cineo-logo .logo-icon {
    height: 30px;
}

.cineo-logo .logo-text {
    height: 30px;
}

.current-site {
    height: 20px;
    margin-top: -4px;
    margin-right: 3px;
    filter: var(--filter-black-to-slim-button-dark-background);
}

.change-current-site {
    height: 10px;
    margin-top: -4px;
    margin-right: 5px;
    filter: var(--filter-black-to-white);
}

img.logout {
    margin-top: -5px;
    margin-left: 3px;
}

.page-description-label {
    color: var(--color-darkgray);
    margin: 0;
    text-align: center;
    padding: 16px 0;
    text-align: center;
}


/* footer */
footer {
    color: var(--color-darkgray-80);
    background-color: var(--color-medium-gray);
    min-height: 50px;
    margin-top: 20px;
    padding-top: 3px;
    font-family: var(--font-standard);
    font-weight: bold;
    flex-shrink: 0;
    width: 100%;
}

    footer div.container {
        line-height: 40px;
    }

#quadient {
    display: inline-block;
    margin-top: 1px;
}

#quadient-link {
    display: inline-block;
    height: 40px;
    width: 160px;
    background-image: url(../content/img/logo-quadient-small-white.png);
    text-decoration: none;
}

    #quadient-link:hover {
        background-image: url(../content/img/logo-quadient-small.png);
    }

#license {
    color: white;
    margin-left: 10px;
    font-size: 20px;
}

#license {
    color: white;
    text-decoration: none;
}

    #license:hover {
        color: white;
        text-decoration: underline;
    }

#version {
    display: block;
    font-size: 14px;
    margin-top: -33px;
    position: static;
    margin-right: auto;
    margin-left: auto;
    width: 200px;
}

#version-number {
    color: white;
    margin-left: 25px;
}

#version-number {
    color: white;
    text-decoration: none;
}

    #version-number:hover {
        color: white;
        text-decoration: underline;
    }

#social-network {
    float: right;
}

#social-network-links {
    display: inline-block;
    margin-top: 0;
}

    #social-network-links > ul {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 30px;
    }

        #social-network-links > ul > li {
            display: inline;
        }

    #social-network-links a {
        display: inline-block;
        width: 44px;
        height: 44px;
        padding: 0;
        border-width: 2px;
        border-style: solid;
        border-color: white;
        background-image: url(../content/img/all-social.png);
        background-repeat: no-repeat;
        text-decoration: none;
    }

        #social-network-links a.linkedin {
            background-position: 0 0;
        }

            #social-network-links a.linkedin:hover {
                background-position: 0 -40px;
            }

        #social-network-links a.twitter {
            background-position: -40px 0;
        }

            #social-network-links a.twitter:hover {
                background-position: -40px -40px;
            }

        #social-network-links a.google-plus {
            background-position: -80px 0;
        }

            #social-network-links a.google-plus:hover {
                background-position: -80px -40px;
            }

        #social-network-links a.facebook {
            background-position: -120px 0;
        }

            #social-network-links a.facebook:hover {
                background-position: -120px -40px;
            }

        #social-network-links a.youtube {
            background-position: -160px 0;
        }

            #social-network-links a.youtube:hover {
                background-position: -160px -40px;
            }

        #social-network-links a.slideshare {
            background-position: -200px 0;
        }

            #social-network-links a.slideshare:hover {
                background-position: -200px -40px;
            }

        #social-network-links a.instagram {
            background-position: -240px 0;
        }

            #social-network-links a.instagram:hover {
                background-position: -240px -40px;
            }

        #social-network-links a.pinterest {
            background-position: -280px 0;
        }

            #social-network-links a.pinterest:hover {
                background-position: -280px -40px;
            }

/* #endregion */

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

h1 {
    font-family: var(--font-roboto);
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-darkgray);
}

h2 {
    color: var(--color-subnav-item);
    font-family: var(--font-roboto-bold);
    font-size: 15px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-subnav-item);
    border-bottom-width: 2px;
    margin-bottom: 28px;
    margin-top: 28px;
    padding-bottom: 5px;
    text-align: left;
}

.modal-dialog-neopost h2 {
    color: var(--color-subnav-item-dark-background);
    border-bottom-color: var(--color-subnav-item-dark-background);
}

h2.first {
    margin-top: 10px;
}

h2.no-spreading {
    display: inline-block;
}

h2.errors {
    color: var(--color-coral);
    border-bottom-color: var(--color-coral);
}

h2.warnings {
    color: var(--color-darkorange);
    border-bottom-color: var(--color-darkorange);
}

h3 {
    color: var(--color-darkgray);
    font-family: var(--font-roboto-bold);
    font-size: 15px;
}

[data-handle-overlay] {
    /* forced position is used for a correct wait overlay */
    position: relative;
}

.invalid {
    color: var(--color-coral);
}

.valid {
    color: var(--color-darkgreen);
}

.form-control.valid {
    color: black;
}

input.invalid {
    border: solid;
    border-width: 1px;
    border-color: transparent;
    border-right-color: var(--color-coral);
    background-color: white !important;
    background-image: url(../content/img/info-backcolor-red-small.png);
    background-repeat: no-repeat;
    background-position: right;
    outline: none;
}

    input.invalid:focus {
        border: solid;
        border-width: 1px;
        border-color: var(--color-coral);
    }

div.thick-separator {
    border-top-color: var(--color-darkgray-80);
    border-top-style: solid;
    border-top-width: 2px;
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 10px;
}

div.thin-separator {
    border-top-color: var(--color-darkgray-80);
    border-top-style: solid;
    border-top-width: 1px;
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 10px;
}

.refresh-button {
    display: inline-block;
    height: 15px;
    width: 15px;
    cursor: pointer;
    background-image: url('../content/img/refresh-small-white.png');
    background-repeat: no-repeat;
    background-position: right;
}

.remove-button {
    display: inline-block;
    height: 15px;
    width: 15px;
    cursor: pointer;
    background-image: url('../content/img/remove-small-white.png');
    background-repeat: no-repeat;
    background-position: right;
}

.panel-heading {
    position: relative;
}

    .panel-heading .refresh-button {
        position: absolute;
        right: 10px;
        top: 12px;
    }

    .panel-heading .remove-button {
        position: absolute;
        right: 30px;
        top: 12px;
    }

/* state-categories-description-popin */

.status-distribution-help {
    width: 420px;
    text-align: left;
}

    .status-distribution-help tr.with-separation td {
        padding-top: 10px;
    }

    .status-distribution-help td {
        padding-right: 10px;
    }

        .status-distribution-help td[rowspan] {
            vertical-align: top;
            font-family: var(--font-standard);
            font-weight: bold;
        }

    .status-distribution-help th {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        font-family: var(--font-standard);
        font-weight: bold;
    }

#change-own-password-popin .modal-dialog form ul {
    padding: 0;
}

    #change-own-password-popin .modal-dialog form ul li {
        list-style: none;
    }

#change-own-password-popin .modal-dialog form label {
    min-width: 180px;
}

.item-management-button {
    border-style: none;
    display: inline-block;
    background-color: transparent;
    background-image: url('../content/img/item-management-buttons.png');
    height: 20px;
    width: 20px;
    margin: 3px;
}

/* list sorting */
.sort-container {
    display: inline-block;
    float: right;
    width: 11px;
    height: 14px;
    position: absolute;
    margin-left: 3px;
    margin-right: 2px;
    margin-top: 5px;
}

a.sort-up {
    text-decoration: none;
    display: block;
    background-image: url(../content/img/sort-up-black.svg);
    filter: var(--filter-black-to-button);
    background-repeat: no-repeat;
    width: 11px;
    height: 7px;
}

a.sort-down {
    text-decoration: none;
    display: block;
    background-image: url(../content/img/sort-down-black.svg);
    filter: var(--filter-black-to-button);
    background-repeat: no-repeat;
    width: 11px;
    height: 7px;
}

a.sort-up:hover {
    filter: var(--filter-black-to-button-focus);
}

a.sort-down:hover {
    filter: var(--filter-black-to-button-focus);
}

a.sort-up[selected], a.sort-up[selected]:hover {
    filter: var(--filter-black-to-button-inactive);
}

a.sort-down[selected], a.sort-down[selected]:hover {
    filter: var(--filter-black-to-button-inactive);
}

.worklog-activity-planning-tooltip {
    text-align: left;
    margin-bottom: 0;
    border-style: none;
}

    .worklog-activity-planning-tooltip td.tooltip-value {
        text-align: left;
        padding-left: 10px;
    }

/* Export popin */
.immediate-export button, .scheduled-export button, .immediate-import button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

#export-configuration-popin .modal-body {
    min-width: 600px;
}

input.exported-field {
    margin-right: 5px;
}

table.exported-fields {
    width: 100%;
}

    table.exported-fields td {
        width: 33.33%;
    }

.export-type-tabs button.active {
    border-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-selected-subitem);
    font-family: var(--font-roboto-bold);
}

.export-type-tabs button {
    color: #000000;
    text-decoration: none;
    font-family: var(--font-roboto);
    text-transform: uppercase;
    font-size: 15px;
    padding-top: 0;
    padding-bottom: 5px;
}

.scheduled-export-name input[type="text"] {
    width: 100%
}

.scheduled-export-e-mails input[type="text"] {
    width: 100%
}

.scheduling-hour input[type="text"] {
    width: 100px
}

.scheduling-day-of-month input[type="number"] {
    width: 100px
}

.scheduled-export .row {
    line-height: 40px;
    vertical-align: middle;
}

.immediate-export .row, .immediate-import .row {
    line-height: 40px;
    vertical-align: middle;
}

.immediate-export [type="radio"] {
    margin-right: 10px;
}

.scheduled-export .row .error-message {
    line-height: initial;
}

.checkable-date-picker {
    width: 100%;
}

/* #region Collapsible panels */

[data-ajax-collapsible-panel]:not([data-ajax-collapsible-panel-expanded="true"]) > .panel-body,
[data-collapsible-panel]:not([data-collapsible-panel-expanded="true"]) > .panel-body {
    display: none;
}

[data-ajax-collapsible-panel] > .panel-body,
[data-collapsible-panel] > .panel-body {
    width: 100%; /* this should avoid strange effects when the body contains responsive items */
}


[data-ajax-collapsible-panel] > .panel-heading,
[data-collapsible-panel] > .panel-heading {
    background-image: url(../content/img/arrow-down-white.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 50px;
    cursor: pointer;
}

[data-ajax-collapsible-panel][data-ajax-collapsible-panel-expanded="true"] > .panel-heading,
[data-collapsible-panel][data-collapsible-panel-expanded="true"] > .panel-heading {
    background-image: url(../content/img/arrow-up-white.svg);
}

/* #endregion */

.warning-message {
    color: var(--color-orange);
    font-weight: bold;
    margin-top: 0;
}

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

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

.no-padding {
    padding: 0;
}

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

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

.default-height {
    height: 100%;
}

.address-line-label {
    font-size: 10px;
    padding-top: 6px;
}

.address-textbox {
    font-size: 12px;
}

#confirmation-message-popin .modal-dialog-neopost .modal-content {
    max-width: 500px;
}

.selectric-address-combo {
    margin-bottom: 5px;
}

/* date range picker */
[data-date-range-selector] {
    margin-top: -2px;
    min-width: 310px;
    width: 310px;
    border-style: none;
    display: none;
    position: absolute;
    z-index: 100000;
    background-color: #eeeeee;
}

    [data-date-range-selector] label.for-checkbox {
        padding-top: 0;
    }

    [data-date-range-selector] .accordion input[type="number"] {
        width: 50px;
        margin-right: 6px;
        -moz-appearance: textfield; /* remove up-down on firefox */
    }
    /* remove up-down on safari/chrome */
    [data-date-range-selector] .accordion input[type=number]::-webkit-inner-spin-button,
    [data-date-range-selector] .accordion input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    [data-date-range-selector] [data-accordion-panel-id="shortcuts"] ul {
        padding-left: 0;
        list-style-type: none;
    }


    [data-date-range-selector] .accordion.ui-accordion .ui-accordion-content {
        border: none;
    }

    [data-date-range-selector] .accordion .textbox {
        background-color: white;
    }

    [data-date-range-selector] [data-accordion-panel-id="sliding-range"] .selectric-range-unit {
        width: 130px;
    }

    [data-date-range-selector] [data-accordion-panel-id="sliding-range"] .selectric-range-from-today {
        width: 95px;
    }

    [data-date-range-selector] .accordion.ui-accordion .ui-accordion-content[data-accordion-panel-id="sliding-range"] {
        overflow: inherit;
        height: 170px;
    }

    [data-date-range-selector] .accordion.ui-accordion .ui-accordion-content[data-accordion-panel-id="fixed-range"] {
        text-align: center;
    }

    [data-date-range-selector] .date-picker-container {
        margin-left: auto;
        width: 250px;
        height: 220px;
        display: inline-block;
    }

    [data-date-range-selector] .selectric-wrapper.selectric-range-unit,
    [data-date-range-selector] .selectric-wrapper.selectric-range-from-today {
        padding-top: 3px;
    }

    [data-date-range-selector] [data-accordion-panel-id="sliding-range"] td:first-child {
        padding-right: 5px;
    }

[data-date-range-field].ui-multiselect span.ui-icon {
    float: right;
}

span.checked {
    display: block;
    width: 20px;
    height: 14.5px;
    background-size: 20px 14.5px;
    background-image: url(../content/img/check-black.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.collapsible-arrow-down {
    background-image: url("./../content/img/arrow-down-black.svg");
    filter: var(--filter-black-to-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
    display: block;
}

.collapsible-arrow-up {
    background-image: url("./../content/img/arrow-up-black.svg");
    filter: var(--filter-black-to-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
    display: block;
}

.collapsable-btn {
    background-color: transparent;
    border: none;
    width: 20px;
    height: 20px;
    margin-top: 5px;
}

#results-page-size {
    float: right;
    padding-top: 20px;
}

    #results-page-size > * {
        vertical-align: middle;
        display: inline-block;
    }

    #results-page-size > select {
        display: inline-block;
        visibility: visible;
        width: 70px;
        background: #EEEEEE;
        color: black;
    }

.error-panel {
    background-color: var(--color-coral);
    margin-left: -5px;
    padding-left: 5px;
    margin-right: -5px;
    padding-right: 5px;
}

.error-panel {
    color: white !important;
}

    .error-panel h2 {
        color: white !important;
        border-bottom-color: white !important;
    }

/* #region image filters */
.black-to-white {
    filter: var(--filter-black-to-white);
}

.black-to-green {
    filter: var(--filter-black-to-green);
}

.black-to-darkgreen {
    filter: var(--filter-black-to-darkgreen);
}

.black-to-darkgray {
    filter: var(--filter-black-to-darkgray);
}

.black-to-gray {
    filter: var(--filter-black-to-gray);
}

.black-to-orange {
    filter: var(--filter-black-to-orange);
}

.black-to-coral {
    filter: var(--filter-black-to-coral);
}

/* #endregion */

/* #region autocomplete */

.textbox.ui-autocomplete-loading {
    background-image: url('../content/img/autocomplete-loading.gif');
    background-size: 20px 20px;
    background-position: right center;
    background-repeat: no-repeat;
}

.auto-complete-container .ui-menu-item.ui-state-focus {
    background-color: var(--color-darkgray);
    background-image: none;
    font-weight: normal;
    border: none;
    color: white;
}

.autocomplete-additional-values {
    font-size: 11px;
    display: inline-block;
    width: 100%;
    text-align: right;
}

.highlit {
    font-weight: bold;
}

.ui-menu .highlit.ui-menu-item-wrapper {
    padding: 3px 0px 3px 0px;
}

    .ui-menu .highlit.ui-menu-item-wrapper.ui-state-active {
        color: black;
        border: none;
        margin: 0px;
        background-color: var(--color-lightgray);
        background-image: none;
    }

/* #endregion */

/* #region " Mega popin " */

[data-mega-popin] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #dfe0e1;
    background-color: rgba(0, 0, 0, 0.50);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    z-index: 50;
}

/* temporarily while mega popin is displayed */
body.mega-popin-displayed {
    overflow-y: hidden;
}

[data-mega-popin-container-top-margin] {
    position: relative;
    display: block;
    height: 64px;
    background-color: transparent;
}

[data-mega-popin-container] {
    position: relative;
    display: block;
    height: 100%; /* default value for browsers that do not support calc() */
    height: calc(100% - 64px);
    background-color: white;
}

[data-mega-popin-header] {
    display: block;
    line-height: 34px;
    text-align: center;
    background-color: var(--color-darkgray-80);
    color: white;
    font-family: var(--font-roboto-bold);
    font-size: 16px;
    text-transform: uppercase;
}

[data-mega-popin-header-close] {
    display: inline-block;
    position: absolute;
    margin-top: 7px;
    margin-right: 10px;
    right: 0;
    height: 20px;
    width: 20px;
    background-image: url("./../content/img/close-black.svg");
    background-size: 20px 20px;
    background-position: right center;
    background-repeat: no-repeat;
    filter: var(--filter-black-to-white);
}

[data-mega-popin-content-container] {
    height: calc(100% - 50px);
    overflow-y: auto;
}

[data-mega-popin-content] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: unset;
}

@media (min-width: 768px) {
    [data-mega-popin-content] {
        width: 750px;
    }
}

@media (min-width: 992px) {
    [data-mega-popin-content] {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    [data-mega-popin-content] {
        width: 1170px;
    }
}

/* #endregion */

/* #region " Wizard " */

[data-wizard-control] {
    min-height: 450px;
}

.wizard-navigation {
    margin-top: 20px;
}

.wizard-steps {
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    width: 300px;
}

    .wizard-steps > li {
        color: white;
        font-size: 12px;
        position: relative;
        display: inline-block;
        padding: 6px 12px;
        line-height: 18px;
        text-decoration: none;
        margin-left: 4px;
    }

        .wizard-steps > li:first-of-type {
            margin-left: 0;
        }

        .wizard-steps > li.past-step {
            background-color: var(--color-button) !important;
            cursor: pointer;
        }

        .wizard-steps > li.current-step {
            background-color: var(--color-darkgray) !important;
        }

        .wizard-steps > li.future-step {
            background-color: var(--color-gray) !important;
        }

.wizard-errors > li {
    color: var(--color-coral);
}

.wizard-warnings > li {
    color: var(--color-darkorange);
}

/* #endregion */

/* #region " Editable labels " */

[data-editable-label] .action-buttons {
    display: inline-block;
    margin-top: 0;
    padding-left: 5px;
}

[data-editable-label] a {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: 16px 16px;
}

    [data-editable-label] a[data-editable-label-edit] {
        background-image: url('../content/img/edit-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-label] a[data-editable-label-edit]:hover,
        [data-editable-label] a[data-editable-label-edit]:focus {
            filter: var(--filter-black-to-button-focus);
        }

    [data-editable-label] a[data-editable-label-reset] {
        background-image: url('../content/img/delete-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-label] a[data-editable-label-reset]:hover,
        [data-editable-label] a[data-editable-label-reset]:focus {
            filter: var(--filter-black-to-button-focus);
        }

[data-editable-label-combo-container] .selectric-simple-combo {
    display: block;
}

/* #endregion */

/* #region " Editable lists " */

[data-editable-list-item][data-item-template="true"] {
    display: none;
}

[data-editable-list] a {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: 16px 16px;
}

[data-editable-list-item-label-container] {
    margin-bottom: 5px;
}

[data-editable-list] [data-items-list] a[data-editable-list-item-edit] {
    background-image: url('../content/img/edit-black.svg');
    filter: var(--filter-black-to-button);
}

    [data-editable-list] [data-items-list] a[data-editable-list-item-edit]:hover,
    [data-editable-list] [data-items-list] a[data-editable-list-item-edit]:focus {
        filter: var(--filter-black-to-button-focus);
    }

[data-editable-list] [data-items-list] a[data-editable-list-item-remove] {
    background-image: url('../content/img/delete-black.svg');
    filter: var(--filter-black-to-button);
}

    [data-editable-list] [data-items-list] a[data-editable-list-item-remove]:hover,
    [data-editable-list] [data-items-list] a[data-editable-list-item-remove]:focus {
        filter: var(--filter-black-to-button-focus);
    }

[data-editable-list] a[data-editable-list-add-item] {
    background-image: url('../content/img/add-black.svg');
    filter: var(--filter-black-to-button);
}

    [data-editable-list] a[data-editable-list-add-item]:hover,
    [data-editable-list] a[data-editable-list-add-item]:focus {
        filter: var(--filter-black-to-button-focus);
    }

[data-editable-list-item-combo-container] .selectric-simple-combo {
    display: block;
}

/* #endregion */

/* #region " Editable lists with options " */

[data-editable-list-with-options] a {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: 16px 16px;
}

    [data-editable-list-with-options] a[data-add-item] {
        background-image: url('../content/img/add-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-list-with-options] a[data-add-item]:hover,
        [data-editable-list-with-options] a[data-add-item]:focus {
            filter: var(--filter-black-to-button-focus);
        }

    [data-editable-list-with-options] a[data-edit-item] {
        background-image: url('../content/img/edit-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-list-with-options] a[data-edit-item]:hover,
        [data-editable-list-with-options] a[data-edit-item]:focus {
            filter: var(--filter-black-to-button-focus);
        }

    [data-editable-list-with-options] a[data-remove-item] {
        background-image: url('../content/img/delete-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-list-with-options] a[data-remove-item]:hover,
        [data-editable-list-with-options] a[data-remove-item]:focus {
            filter: var(--filter-black-to-button-focus);
        }

    [data-editable-list-with-options] a[data-validate-item] {
        background-image: url('../content/img/check-black.svg');
        filter: var(--filter-black-to-button);
    }

        [data-editable-list-with-options] a[data-validate-item]:hover,
        [data-editable-list-with-options] a[data-validate-item]:focus {
            filter: var(--filter-black-to-button-focus);
        }
/* #endregion */

/* #region " Selectable table " */

table[data-selectable-rows] tbody tr.selected {
    color: white;
    background-color: var(--color-darkgray-80);
}

    table[data-selectable-rows] tbody tr.selected:hover {
        background-color: var(--color-darkgray);
    }

/* #endregion */

[data-info-tooltip] {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    background-image: url('../content/img/information-black.svg');
    background-position: 2px 2px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    filter: var(--filter-black-to-button);
}

/* #region " Fixed length cutting control " */

:root {
    --fixed-length-cutting-control-bg: #dfe0e1;
    --fixed-length-cutting-control-sep: #a7a7a7;
    --fixed-length-cutting-control-sep-selected: #000000;
}

[data-fixed-length-cutting] > table {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    display: contents;
}

    [data-fixed-length-cutting] > table tr {
        height: 15px;
    }

    [data-fixed-length-cutting] > table td {
        width: 7px;
        min-width: 7px;
        text-align: center;
        font-family: var(--font-raw);
        font-size: 13px;
        font-weight: bold;
        background-color: var(--fixed-length-cutting-control-bg);
    }

        [data-fixed-length-cutting] > table td[data-inter-index] {
            width: 5px;
            min-width: 5px;
            border-style: none;
            cursor: pointer;
            padding: 1px;
            background: linear-gradient(90deg, var(--fixed-length-cutting-control-bg) 0%, var(--fixed-length-cutting-control-bg) 40%, var(--fixed-length-cutting-control-sep) 50%, var(--fixed-length-cutting-control-bg) 60%, var(--fixed-length-cutting-control-bg) 100%);
        }

            [data-fixed-length-cutting] > table td[data-inter-index].selected {
                width: 5px;
                background: linear-gradient(90deg, var(--fixed-length-cutting-control-bg) 0%, var(--fixed-length-cutting-control-bg) 15%, var(--fixed-length-cutting-control-sep-selected) 50%, var(--fixed-length-cutting-control-bg) 85%, var(--fixed-length-cutting-control-bg) 100%);
            }

            [data-fixed-length-cutting] > table td[data-inter-index] div {
                height: 20px;
            }

/* #endregion */

/* #region " Read-only values " */

span.read-only-value {
    padding-left: 5px;
    background-color: var(--color-darkgray-50);
    color: white;
    width: 100%; /* should be overriden on a case by case basis */
    display: inline-block;
    height: 30px;
    padding-top: 4px;
    /* Overflow handling */
    overflow-x: scroll;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for firefox */
    white-space: nowrap;
}

    span.read-only-value::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

/* #endregion */
/* #region " In progress buttons " */
.in-progress {
    position: relative;
}

@keyframes item-in-progress-gradient {
    0% {
        background-position: 0 0;
    }

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

.in-progress div.progress-overlay {
    position: absolute;
    z-index: 99999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: progress;
    background: linear-gradient(-45deg, var(--color-in-progress-1) 0%, var(--color-in-progress-1) 35%, var(--color-in-progress-2) 35%, var(--color-in-progress-2) 40%, var(--color-in-progress-1) 40%, var(--color-in-progress-1) 45%, var(--color-in-progress-2) 45%, var(--color-in-progress-2) 50%, var(--color-in-progress-1) 50%, var(--color-in-progress-1) 55%, var(--color-in-progress-2) 55%, var(--color-in-progress-2) 60%, var(--color-in-progress-1) 60%, var(--color-in-progress-1) 65%, var(--color-in-progress-2) 65%, var(--color-in-progress-2) 70%, var(--color-in-progress-1) 70%, var(--color-in-progress-1) 75%, var(--color-in-progress-2) 75%, var(--color-in-progress-2) 80%, var(--color-in-progress-1) 80%, var(--color-in-progress-1) 85%, var(--color-in-progress-2) 85%, var(--color-in-progress-2) 90%, var(--color-in-progress-1) 90%, var(--color-in-progress-1) 95%, var(--color-in-progress-2) 95%, var(--color-in-progress-2) 100%);
    background-size: 200% 100%;
    animation: item-in-progress-gradient 3s linear infinite;
}

/* #endregion */

.overflow-container {
    /*
        background in 4 parts : 1st is in the foreground, 4th is in the background:
        -1- : its goal is to hide the top shadow when zone is totally scrolled up 
        -2- : its goal is to hide the top shadow when zone is totally scrolled down
        -3- : its goal is to display a round shadow at the top of the zone (always there because attached with scroll)
        -4- : its goal is to display a round shadow at the bottom of the zone (always there because attached with scroll)
    */
    overflow-x: auto;
    overflow-y: auto;
    background: linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-color: white;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 15px, 100% 15px;
    background-attachment: local, local, scroll, scroll;
}

    .overflow-container.in-panel {
        /*
        background in 4 parts : 1st is in the foreground, 4th is in the background:
        -1- : its goal is to hide the top shadow when zone is totally scrolled up 
        -2- : its goal is to hide the top shadow when zone is totally scrolled down
        -3- : its goal is to display a round shadow at the top of the zone (always there because attached with scroll)
        -4- : its goal is to display a round shadow at the bottom of the zone (always there because attached with scroll)
        */
        background: linear-gradient(to bottom, var(--color-light-gray), rgba(238,238,238,50)), linear-gradient(to top, var(--color-light-gray), rgba(238,238,238,50)) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
        background-color: var(--color-light-gray);
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        background-size: 100% 30px, 100% 30px, 100% 15px, 100% 15px;
        background-attachment: local, local, scroll, scroll;
    }

[data-is-template-container] {
    display: none;
}

[data-targeting-tooltip] {
    display: none;
}

.content-overflow {
    overflow: visible !important;
}

.result-table-and-columns-config-container {
    position: relative;
}

.result-table-scrollable {
    overflow-x: auto;
    position: relative;
}

/* #region " Address fields editor " */

[data-address-fields-editor-container] > div {
    display: flex;
    margin-bottom: 2px;
}

[data-address-fields-editor-container] .zip-code-field {
    width: 70px;
    margin-right: 2px;
}

[data-address-fields-editor-container] .field-value-cell {
    display: flex;
}

[data-address-fields-editor-container] .field-title-cell {
    font-size: 8px;
    line-height: 30px;
}

    [data-address-fields-editor-container] .field-title-cell.long-label {
        line-height: inherit;
    }

[data-address-fields-editor-container] .customer-id-field .field-title-cell {
    width: 47px;
}

[data-address-fields-editor-container] .code-type-field .field-title-cell {
    width: 28px;
}

[data-address-fields-editor-container] .address-line-field .field-title-cell {
    width: 16px;
}

[data-address-fields-editor-container] .customer-id-field .field-value-cell {
    width: calc(100% - 47px);
}

[data-address-fields-editor-container] .code-type-field .field-value-cell {
    width: calc(100% - 28px);
}

[data-address-fields-editor-container] .address-line-field .field-value-cell {
    width: calc(100% - 16px);
}

/* #endregion */

#page-size-label {
    margin-left: 5px;
}