/* first commit 
 */
/* COLORS 
BILLIT BLUE > #12659c
BILLIT ORANGE > #EF7D00
BILLIT ORANGE 10% > #FDF2E6
BILLIT ORANGE DARKER > #D67000;
*/
:root {
    --containerHeaderHeight: 4rem;
    --containerViewHeight: calc(100vh - var(--containerHeaderHeight));
    --font: "Inter", Arial, sans-serif;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-feature-settings: 'liga' 1, 'calt' 1, 'tnum' 1, 'lnum' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #294554;
    font-size: 12px;
    min-width: 320px;
    overflow-y: scroll;
    overscroll-behavior-y: none;
}

@supports (font-variation-settings: normal) {
    :root {
        --font: InterVariable, Arial, sans-serif;
    }
}

.platform-v2 a {
    color: #193549;
    text-decoration: underline;
    font-weight: bold;
}

    .platform-v2 a:hover {
        color: #12659c;
    }

a .actionBlack {
    color: #294554 !important;
}

a:hover .actionBlack {
    color: #12659c !important;
}

h1, h2, h3 {
    font-weight: bold;
}

h1 {
    color: #12659c;
    font-size: 22px;
}

    h1 i {
        color: #99B7C7;
        font-size: 1.5rem;
    }

@media (max-width: 767px) {
    h1 {
        font-size: 1.2rem;
    }
}

h2, h4 {
    color: #12659c;
    text-transform: uppercase;
    font-size: .95rem;
    margin: 0px;
}

h3 {
    font-size: 1rem;
}

    h3 a {
        text-decoration: none !important;
    }

h4 {
    margin: 0px;
}

h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #12659c;
}

@media (max-width: 767px) {
    h1 i {
        font-size: 1.6rem;
    }

    h2, h4 {
        font-size: 1rem;
    }
}

.title h1 {
    line-height: 1.5;
}

.title a {
    font-size: 1rem;
    line-height: .85;
    text-decoration: none;
}

.text-placeholder {
    color: #9e9e9e !important;
}

.text-muted, .text-muted a {
    color: #9e9e9e !important;
    font-size: 0.75rem;
}

@media (max-width: 767px) {
    .text-muted, .text-muted a {
        color: #9e9e9e !important;
        font-size: 0.70rem;
    }
}


.lh-0 {
    line-height: 0 !important;
}

.lh-1 {
    line-height: 1 !important;
}

.lh-sm {
    line-height: 1.25 !important;
}

.lh-base {
    line-height: 1.5 !important;
}

.lh-lg {
    line-height: 2 !important;
}

.gap-0 {
    gap: 0rem !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.z-n1 {
    z-index: -1 !important;
}

.z-0 {
    z-index: 0 !important;
}

.z-1 {
    z-index: 1 !important;
}

.z-2 {
    z-index: 2 !important;
}

.z-3 {
    z-index: 3 !important;
}

.text-primary {
    color: #12659c !important;
}


.text-blue {
    color: #12659c !important;
}

hr {
    border: none;
    height: 1px;
    color: #E4E7EB;
    background-color: #E4E7EB;
}

.click {
    cursor: pointer
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.collapsing {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.scan-type-form.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.ellipsis {
    position: relative;
}

    .ellipsis:before {
        content: ' ';
        visibility: hidden;
    }

    .ellipsis span {
        position: absolute;
        left: 0;
        right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 10px;
    }

.text2LineEllipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
}

.text3LineEllipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.plainTextBox {
    position: relative;
}

    .plainTextBox .content {
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1.1rem;
    }
        .plainTextBox .content::before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            background: linear-gradient(transparent 50%, white);
            pointer-events: none;
        }
            .plainTextBox .content .text {
                display: inline;
                text-overflow: ellipsis;
            }

    .plainTextBox label {
        position: absolute;
        top: 100%;
    }
    .plainTextBox input {
        display: none;
    }

        .plainTextBox input:checked + label {
            display: none;
        }
        .plainTextBox input:checked ~ .content {
            max-height: 100%;
            -webkit-line-clamp: unset;
            margin-bottom: 0;
        }
        .plainTextBox input:checked ~ .content::before {
            background: none;
        }


.whiteSpaceNormal {
    white-space: normal !important;
}

.w50pr {
    width: 50%;
}

.w20px {
    width: 20px;
    min-width: 20px;
}

.w30px {
    width: 30px;
    min-width: 30px;
}


.w40px {
    width: 40px;
    min-width: 40px;
}

.w60px {
    width: 60px;
    min-width: 60px;
}

.w70px {
    width: 70px;
    min-width: 70px;
}

.w80px {
    width: 80px;
    min-width: 80px;
}

.w90px {
    width: 90px;
    min-width: 90px;
}

.w100px {
    width: 100px;
    min-width: 100px;
}

.w120px {
    width: 120px;
    min-width: 120px;
}

.w140px {
    width: 140px;
    min-width: 140px;
}

.w160px {
    width: 160px;
    min-width: 160px;
}

.w180px {
    width: 180px;
    min-width: 180px;
}

.w200px {
    width: 200px;
    min-width: 200px;
}

.mw40px {
    min-width: 40px;
}

.mw60px {
    min-width: 60px;
}

.mw80px {
    min-width: 80px;
}

.mw100px {
    min-width: 100px;
}

.mw120px {
    min-width: 120px;
}

.mw140px {
    min-width: 140px;
}

.mw160px {
    min-width: 160px;
}

.mw180px {
    min-width: 180px;
}

.mw200px {
    min-width: 200px;
}

.maxw30px {
    max-width: 30px !important;
}

.maxw40px {
    max-width: 40px !important;
}

.maxw60px {
    max-width: 60px !important;
}

.maxw80px {
    max-width: 80px !important;
}

.maxw100px {
    max-width: 100px !important;
}

.maxw120px {
    max-width: 120px !important;
}

.maxw150px {
    max-width: 150px !important;
}

.maxw180px {
    max-width: 180px !important;
}

.maxw200px {
    max-width: 200px !important;
}

.maxw300px {
    max-width: 300px !important;
}

.maxw400px {
    max-width: 400px !important;
}

.maxw500px {
    max-width: 500px !important;
}

.maxw600px {
    max-width: 600px !important;
}

.maxw700px {
    max-width: 700px !important;
}

.maxw800px {
    max-width: 800px !important;
}

.maxw900px {
    max-width: 900px !important;
}

.maxw1000px {
    max-width: 1000px !important;
}

.maxw1100px {
    max-width: 1100px !important;
}

.maxw1200px {
    max-width: 1200px !important;
}

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-50 {
    width: 50%;
}

.w-55 {
    width: 55%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.minh220px {
    min-height: 220px;
}

.minh10px {
    min-height: 10px;
}

.minh20px {
    min-height: 20px;
}

.minh30px {
    min-height: 30px;
}

.minh40px {
    min-height: 40px;
}

.minh50px {
    min-height: 50px;
}

.minh60px {
    min-height: 60px;
}

.minh70px {
    min-height: 70px;
}

.minh80px {
    min-height: 80px;
}

.minh90px {
    min-height: 90px;
}

.minh100px {
    min-height: 100px;
}

.mh10px {
    max-height: 10px;
}

.mh20px {
    max-height: 20px;
}

.mh30px {
    max-height: 30px;
}

.mh40px {
    max-height: 40px;
}

.mh50px {
    max-height: 50px;
}

.mh60px {
    max-height: 60px;
}

.mh70px {
    max-height: 70px;
}

.mh80px {
    max-height: 80px;
}

.mh90px {
    max-height: 90px;
}

.mh100px {
    max-height: 100px;
}

.h10px {
    height: 10px;
}

.h20px {
    height: 20px;
}

.h30px {
    height: 30px;
}

.h40px {
    height: 40px;
}

.h50px {
    height: 50px;
}

.h60px {
    height: 60px;
}

.h70px {
    height: 70px;
}

.h80px {
    height: 80px;
}

.h90px {
    height: 90px;
}

.h100px {
    height: 100px;
}

.h170px {
    height: 170px;
}

.h300px {
    height: 300px;
}

.h10rem {
    height: 10rem;
}

.h-25 {
    height: 25%;
}

.opacity-100 {
    opacity: 1 !important;
}

.opacity-75 {
    opacity: .75 !important;
}

.opacity-50 {
    opacity: .5 !important;
}

.opacity-25 {
    opacity: .25 !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.fontSize8px {
    font-size: 8px;
    line-height: 8px;
}

.fontSize10px {
    font-size: 10px;
    line-height: 10px;
}

.fontSize12px {
    font-size: 12px;
    line-height: 12px;
}

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

.fontSize24px {
    font-size: 24px;
    line-height: 24px;
}

.form-control-plaintext {
    font-size: 0.8rem;
    line-height: 1.5rem;
}

.integration-card {
    position: relative;
    min-height: 20rem;
}

@media (max-width: 767px) {
    .integration-card {
        min-height: 10;
    }
}


@media (min-width: 768px) {
    .integration-card .integration-logo {
        height: 8rem;
        padding: 30px !important;
    }
}

.integration-card .integration-settings {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.integration-card .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.integration-card a.card-link {
    line-height: 100%;
    margin-left: 1rem;
}

.integration-card .card-link i {
    font-size: 1rem;
}

/* BACKGROUNDS */
.bg-white {
    background-color: #fff;
}

.bg-blue {
    background-color: #12659c;
}

.bg-blue5 {
    background-color: #f7f7fa
}

.bg-blue10 {
    background-color: #F1F3F5
}

.bg-blue20 {
    background-color: #E4E7EB;
}

.bg-blue40 {
    background-color: #CCD1D9;
}

.bg-blue60 {
    background-color: #B6BDC8;
}

.bg-blue80 {
    background-color: #A3ABB9;
}

.colorBlue {
    color: #12659c !important;
}

.colorWhite {
    color: #fff !important;
}

.text-black-25 {
    color: rgba(0,0,0,.25) !important
}

/* BORDERS */
.borderTop {
    border-top: 1px solid #e6e8ed;
}

.borderBottom {
    border-bottom: 1px solid #e6e8ed;
}

.billit-sidebar-block.borderTop {
    border-color: rgba(255,255,255,0.2);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

@media (min-width:576px) {

    .border-sm-right {
        border-right: 1px solid #dee2e6 !important;
    }
}

/* TYPOGRAPHY */
.font-weight-regular {
    font-weight: 400;
}

/* NAVBAR */
.logo {
    max-height: 38px;
}

.billit-main-navbar {
    z-index: 1040;
}

    .billit-main-navbar i {
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .billit-main-navbar .dropdown a, .dropdowncompanyidentifiers.dropdown-menu a {
        display: block;
        width: 100%;
        padding: 0.25rem 1.5rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        white-space: nowrap;
        border: 0;
        font-size: .9rem;
    }

.dropdowncompanyidentifiers.dropdown-menu a {
    text-decoration: none;
}

.billit-main-navbar .dropdown-menu {
    top: 2.3rem;
    min-width: auto !important;
    max-height: 300px;
    overflow-x: clip;
    overflow-y: auto;
}

.billit-main-navbar .dropdown-language .dropdown-menu {
    max-height: 300px;
}

.billit-main-navbar .dropdown-toggle::after {
    vertical-align: calc(50% - 0.255rem);
}


.navbar-search {
    max-width: 30rem;
}

.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:hover {
    outline: none;
    border: medium none;
    padding-left: 1rem;
}

button.navbar-toggler i {
    font-size: 1.6rem;
    border: none;
    color: #12659c;
}

@media (max-width: 767px) {
    .navbar-search {
        width: 50px;
        max-width: 100%;
    }
}

/* SIDE BAR */
#a-ShowAddNewCompany i {
    color: #ffffff;
    opacity: 1;
}

.billit-sidebar .btn-primary:hover, .billit-sidebar .btn-primary:focus {
    box-shadow: 0px 0px 0px 2px #ffffff inset !important;
}

.billit-sidebar::-webkit-scrollbar {
    display: none;
}

.billit-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.billit-main-navbar {
    min-height: 4rem;
    box-shadow: inset 0 -1px 0 #e6e8ed;
}

    .billit-main-navbar a {
        color: #12659c;
        font-weight: 600;
        text-decoration: none;
    }

.nav-icons {
    font-size: 1.6rem;
}

.contextMenu {
    background-color: rgba(0,0,0,0.2);
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.contextMenuItem {
    color: #fff;
}

.billit-sidebar-block .nav {
    display: block;
}

    .billit-sidebar-block .nav li a {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        line-height: 14px;
        font-weight: 500;
    }

    .billit-sidebar-block .nav li .nav a {
        font-weight: 500;
        color: #fff;
        font-size: 0.75rem;
        color: #E4E7EB;
        border-radius: 5px 0px 0px 5px;
    }

    .billit-sidebar-block .nav li.contextMenu .nav a {
        border-radius: 0 !important;
    }

    .billit-sidebar-block .nav li a:hover {
        background-color: rgba(255,255,255,0.15);
    }

    .billit-sidebar-block .nav li.contextMenu .nav li a {
        padding-left: 3rem !important;
    }

    .billit-sidebar-block .nav li .currentSubMenu {
        background-color: #f7f7fa;
        color: #12659c;
        border-radius: 5px 0px 0px 5px;
    }

    .billit-sidebar-block .nav li.contextMenu .currentSubMenu {
        background-color: rgba(255,255,255,0.15);
        color: #fff;
        border-radius: 0 !important;
    }


    .billit-sidebar-block li:not(.contextMenu) .nav li.currentSubMenu > a, .billit-sidebar-block .nav li.current > a {
        color: #12659c;
    }

        .billit-sidebar-block li:not(.contextMenu) .nav li.currentSubMenu > a .badge-light, .billit-sidebar-block .nav li.current > a .badge-light {
            color: #fff;
            background-color: #12659c;
        }

    .billit-sidebar-block .nav li .nav li .menuItemNumber {
        margin-right: 1.7rem;
    }

    .billit-sidebar-block .nav .current {
        background-color: #f7f7fa;
        color: #12659c;
    }

    .billit-sidebar-block .nav .menuItemNumber {
        opacity: 0.5;
    }

    .billit-sidebar-block .nav .current .menuItemNumber, .billit-sidebar-block .nav .currentSubMenu .menuItemNumber {
        opacity: 1;
    }

.billit-sidebar-block i {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}

.billit-sidebar-block .current i {
    color: #12659c;
}

.billit-sidebar-block .form-control {
    font-size: 14px;
}

.disclaimer, .disclaimer a, .disclaimer a:hover {
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}

a.menuItem[aria-expanded="true"] .fa-angle-down {
    transform: rotate(-180deg);
}

a.menuItem[aria-expanded="false"] .fa-angle-down {
    transform: rotate(0deg);
}

@media (min-width: 768px) {
    .billit-sidebar {
        position: fixed;
        z-index: 1000;
        height: var(--containerViewHeight);
        overflow-y: auto;
        min-width: 250px;
        max-width: 250px;
    }

    .navbar-logo {
        min-width: 100px;
        max-width: 250px;
    }
}

#sidebarMenu {
    overflow-x: hidden;
}

@media (max-width:767px) {
    #sidebarMenu {
        background-color: #12659c;
        margin-top: calc(100vh - var(--containerViewHeight));
        overflow-y: scroll;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1000;
    }

        #sidebarMenu .billit-sidebar-container {
            height: var(--containerViewHeight);
        }
}

/* CONTENT */

@media (min-width:768px) {
    .billit-content.billit-sidebar-show {
        margin-left: 250px !important;
    }
}

h1 {
    line-height: 2rem;
}

.content-block {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #CCD1D9;
    border-radius: 6px;
    border: 1px solid #e6e8ed;
    box-shadow: rgb(0 0 0 / 4%) 0px 6px 24px;
}

    .content-block .content-block-title .row, .content-clock .sub-content-block .row {
        align-items: center;
    }

    /* Hide border and title of content blocks inside a content block */
    .content-block .content-block {
        border: none;
        margin: 0;
        box-shadow: none;
    }

        .content-block .content-block .content-block-title {
            padding-top: 0px !important;
        }

    /* Option to show a content block inside a content block with borders */
    .content-block .sub-content-block {
        margin-top: 15px;
        background-color: #fff;
        border: 1px solid #CCD1D9;
        border-radius: 6px;
        border: 1px solid #e6e8ed;
        box-shadow: rgb(0 0 0 / 4%) 0px 6px 24px;
    }

#floatingMessageContainer {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1051;
    pointer-events: none;
    width: calc(100% - 2rem);
}

    #floatingMessageContainer > * {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
        margin-bottom: 0.5rem;
        opacity: 0;
        transition: opacity .15s linear;
    }

        #floatingMessageContainer > *.show {
            opacity: 1;
        }

@media (min-width: 768px) {
    #floatingMessageContainer {
        width: 25rem;
    }
}

/* BUTTONS */
.btn {
    font-weight: bold;
    font-size: 14px;
}

.btn-mobile {
    font-weight: bold;
    font-size: 1rem;
}

.btn.disabled, .btn:disabled {
    opacity: 1;
}

a.btn {
    text-decoration: none;
}

.dropdown-menu button {
    font-size: 14px;
}

.dropdown-menu .displayAsButton {
    font-size: 14px;
    font-weight: normal;
    color: #212529 !important;
}

.btn-sm {
    font-size: 0.8rem;
}

.btn-primary, a.btn-primary {
    background-color: #12659c;
    box-shadow: 0px 0px 0px 1px #12659c inset;
    border: none;
    color: #fff;
}

    .btn-primary:hover, a.btn-primary:hover, .btn-primary:active, a.btn-primary:active, .btn-primary:focus, a.btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
        background-color: #12659c;
        box-shadow: 0px 0px 0px 1px #12659c inset;
        text-decoration: none;
        color: #fff;
    }

    .btn-primary.disabled, .btn-primary:disabled, .btn-success:disabled {
        background-color: #CCD1D9;
        box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
        pointer-events: none;
    }

/*
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, .input-group > .input-group-append:not(:last-child) > .btn {
        background-color: #EF7D00;
        border: none;
        box-shadow: none;
    }
*/

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus, .btn-secondary:focus {
    box-shadow: 0px 0px 0px 2px #12659c inset;
}

.btn-secondary {
    color: #12659c;
    background-color: #fff;
    box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
    border: none;
}

    .btn-secondary:hover {
        color: #12659c;
        background-color: #fff;
    }

    .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        color: #12659c;
        background-color: #fff;
    }

    .btn-secondary.disabled, .btn-secondary:disabled, .btn-outline-success.disabled, .btn-outline-success:disabled {
        background-color: #fff;
        box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
        color: #CCD1D9;
        pointer-events: none;
    }


.btn-group-toggle {
    background-color: #E6EDF1;
    border-radius: 3px;
}

@media (max-width: 1200px) {
    .btn-group-toggle {
        width: 100%;
    }
}

.btn-group-toggle .btn {
    background-color: #12659c;
    width: 100%;
}

    .btn-group-toggle .btn-secondary {
        background-color: transparent;
        color: #333;
    }

    .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled):hover {
        background-color: #ffffff;
    }

.btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active, .toggleActiveBtn {
    background-color: #fff;
    color: #12659c;
    box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
}

/*.btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active, .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled):hover {
    background-color: #12659c;
    color: #fff;
    border-color: #12659c;
}*/

#orderCategorySelectorModal .btn-secondary {
    color: #12659c;
}

    #orderCategorySelectorModal .btn-secondary:hover, #orderCategorySelectorModal .btn-secondary:active, #orderCategorySelectorModal .btn-secondary:focus {
        color: #12659c;
    }

.btn-secondary-link a {
    box-shadow: 0px 0px 0px 2px #12659c inset;
    border-radius: .25rem;
    color: #12659c;
    padding: .5rem .75rem;
    transition: 0.15s ease-in-out;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

    .btn-secondary-link a:focus {
        color: #12659c;
        background-color: #fff;
        box-shadow: 0px 0px 0px 2px #12659c inset;
    }

    .btn-secondary-link a:hover {
        color: #12659c;
        background-color: #fff;
        box-shadow: 0px 0px 0px 2px #12659c inset;
    }

.btn-tertiary {
    color: #12659c;
    background-color: transparent;
    border: none;
}

    .btn-tertiary:disabled, .btn-tertiary.disabled {
        color: #95A5A6;
        pointer-events: none;
    }

a.btn-tertiary {
    text-decoration: none;
}

.btn-tertiary i {
    font-size: 1rem;
}

.btn-outline-success {
    color: #28a745;
    background-color: #fff;
    box-shadow: 0px 0px 0px 2px #28a745 inset;
    border: none;
}

.copy .btn {
    padding-left: 10px;
    padding-right: 10px;
}

.btn-search {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border: none;
    padding-bottom: 3px;
}

.btn-peppol {
    background-color: #51AE51;
    border-color: #51AE51;
    box-shadow: none;
}

.btn-success {
    border: none;
}

@media (max-width: 767px) {
    .btnBlockMobile .btn {
        width: 100%;
        display: block;
    }
}

.input-group-append .btn {
    border: none;
    text-align: center;
}

.input-group .input-group-prepend .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-prepend > .form-control {
    height: 100%;
}

.input-group-append .btn i {
    min-width: 20px;
    text-align: center;
}

.buttonRow {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* SEARCH */
.hasSearch {
    margin-bottom: 0px;
}

    .hasSearch .form-control {
        padding-left: 40px;
    }

    .hasSearch .searchIcon {
        position: absolute;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
        text-align: center;
        pointer-events: none;
        color: #aaa;
    }

/* FONTS */
@media (max-width: 767px) {
    .smallFont {
        font-size: 0.875rem;
    }
}

/* FORMS */
.form-control:focus {
    background-color: #fff;
    border-color: #ced4da;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(206 212 218 / 50%);
}

select.form-control, .select-dropdown .dropdown-toggle {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .3rem center;
    background-size: 12px 8px;
    padding-right: 1.2rem !important;
}

select.form-control {
    padding: 0.25rem 0.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-dropdown {
    width: 100%;
}

    .select-dropdown .dropdown-toggle {
        text-align: left;
    }

        .select-dropdown .dropdown-toggle::after {
            content: none;
        }

.dropdown-menu {
    background-clip: unset;
    overflow-x: hidden;
}

:not(.searchableDropdown) > .dropdown-menu {
    z-index: 1050;
    max-height: 286px;
    overflow-y: auto;
    width: max-content;
    max-width: 320px; /*minimum supported screen width*/
}

.dropdown-toggle.phoneNumberButton {
    min-width: 50px;
}

.searchableDropdown .dropdown-items {
    max-height: 240px;
    overflow-y: auto;
}

    .searchableDropdown .dropdown-items .noResults {
        font-size: 12px;
        padding: 0.25rem 1rem;
    }


.dropdown-language a {
    padding: 0.25rem 1.5rem;
    font-weight: 400 !important;
    color: #212529 !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.languagesMobile {
    position: absolute;
    right: 0;
    margin: 10px;
    right: 10px;
    z-index: 1001;
}

@media only screen and (max-width: 767px) {
    .languagesMobile {
        margin-top: 75px !important;
        color: white !important;
    }
}

.btn-tertiary {
    box-shadow: none !important;
}

label {
    color: #294554;
    margin-bottom: .1rem;
}

.input-validation-error {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.field-validation-error {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: 0.8rem;
    color: #dc3545;
}

.validation-summary-error {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* AUTOGROW TEXTAREA */

.grow-wrap {
    display: grid;
    overflow: clip;
}

    .grow-wrap::after {
        content: attr(data-replicatedvalue) " ";
        white-space: pre-wrap;
        word-wrap: break-word; /* IE */
        visibility: hidden;
        overflow: hidden;
        /* Identical as textarea styling required */
        border: 1px solid black;
        padding: 0.375rem 0.75rem;
        line-height: 1.5;
        font-size: 1rem;
        grid-area: 1 / 1 / 2 / 2;
    }

    .grow-wrap > textarea {
        resize: none;
        grid-area: 1 / 1 / 2 / 2;
    }

@media (min-width: 767px) {
    .reducedSpace .grow-wrap::after {
        padding: 0.15rem 0.25rem;
        font-size: 0.8rem;
    }
}

/* MODAL */
.modal-header {
    border-bottom: none;
}

.messagePopup {
    position: fixed;
    top: calc(64px + 1rem);
    left: 50%;
    transform: translate(-50%,0);
    z-index: 9000;
    font-size: 0.8rem;
    max-width: 500px;
}

    .messagePopup a.close {
        font-size: 1.1rem;
        color: #767676;
    }

/* DATE PICKER */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--font);
}

.ui-datepicker {
    width: auto !important;
    z-index: 2000 !important;
}

.ui-datepicker-prev span {
    background-image: initial !important;
    mask: url(/Content/app/NewUI/img/arrow-left.svg) no-repeat center;
    mask-size: cover;
    mask-position: 0px 0px;
    -webkit-mask: url(/Content/app/NewUI/img/arrow-left.svg) no-repeat center;
    -webkit-mask-size: cover;
    -webkit-mask-position: 0px 0px;
    background-color: #12659c;
    transition: background-color 0.2s ease;
}

.ui-datepicker-next span {
    background-image: initial !important;
    mask: url(/Content/app/NewUI/img/arrow-right.svg) no-repeat center;
    mask-size: cover;
    mask-position: 0px 0px;
    -webkit-mask: url(/Content/app/NewUI/img/arrow-right.svg) no-repeat center;
    -webkit-mask-size: cover;
    -webkit-mask-position: 0px 0px;
    background-color: #12659c;
    transition: background-color 0.2s ease;
}

a.ui-datepicker-prev:hover span {
    background-color: #12659c;
    margin-left: -7px;
    margin-top: -7px;
    cursor: pointer;
}

a.ui-datepicker-next:hover span {
    background-color: #12659c;
    margin-left: -9px;
    margin-top: -7px;
    cursor: pointer;
}

.ui-widget-header {
    background-color: #fff;
    border: none;
}

    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
        border: none;
        background: #fff;
    }

.ui-datepicker .ui-datepicker-title, .ui-widget-content, .ui-widget-header {
    color: #12659c;
}

.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    line-height: 30px;
    padding: 0;
}

    .ui-datepicker td a:hover {
        color: #12659c;
        background-color: #fff;
        border: 2px solid #12659c;
    }

.ui-widget.ui-widget-content {
    border: 1px solid #E4E7EB;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #12659c;
    background: #fff;
    color: #12659c;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 2px solid #fff;
    background: #fff;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 2px solid #12659c;
    background: #12659c;
    color: #fff;
    font-weight: 700;
}

.ui-menu-item > .ui-state-active {
    border: 1px solid #eee;
    background-color: #EEE !important;
    color: #000;
    font-weight: 400;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    font-weight: 700;
}

a.ui-state-active:hover, .ui-widget-content a.ui-state-active:hover {
    background: #fff;
    color: #193549;
}

/* TOOLTIPS */

:not(.table-header-a) > .tooltipIcon {
    color: #9e9e9e;
}

.tooltipIconLarge {
    font-size: 1.2rem;
}


.tooltip > .tooltip-inner, .ui-tooltip {
    background-color: #f6f6f6;
    color: #333 !important;
    padding: 10px;
    box-shadow: none;
}

    .tooltip .arrow::before, .ui-tooltip .arrow::before {
        border-top-color: #333;
    }

/* SWITCH */
.custom-switch .custom-control-label {
    cursor: pointer;
    line-height: 1.5rem;
}

.custom-checkbox .custom-control-label {
    line-height: 200%;
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #12659c;
    opacity: 0.4;
}

/* CHECKBOX */

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #12659c;
    opacity: 0.4;
}

/* TABLES */

.table {
    color: #294554;
    border-color: #CCD1D9;
    margin-bottom: 0px;
}


    .table thead {
        color: #6693AA;
    }

        .table thead th {
            border-bottom: 1px solid #e6e8ed;
            font-size: 12px;
            vertical-align: middle;
        }

    .table th {
        border-top: none;
    }

    .table td {
        border-top: 1px solid #e6e8ed;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .table th, .table td {
        padding: .5rem .3rem .5rem .3rem;
    }

        .table th:first-of-type, .table td:first-of-type {
            padding-left: 1rem;
        }

        .table th:last-of-type, .table td:last-of-type {
            padding-right: 1rem;
        }

    .table tbody td {
        border-top: 1px solid #e6e8ed;
    }

        .table tbody td.borderLess {
            border-top: none;
        }

.table-header-a {
    text-decoration: none !important;
    color: #12659c !important;
}

    .table-header-a i {
        font-size: 13px;
    }

.td-title {
    font-weight: bold;
}

.listThumbnails td {
    height: 110px;
}

.td-image {
    width: 60px;
    max-height: 85px;
    overflow: hidden;
}

.listItemAction {
    font-size: 1.2rem !important;
}

table tr .trShowOnHover {
    visibility: hidden;
}

table tr:hover .trShowOnHover {
    visibility: visible;
}

@media (max-width: 767px) {
}

@media only screen and (max-width: 1800px) and (min-width: 768px) {
    .table td {
        max-width: 120px;
    }

        .table td:not(.decimal) {
            white-space: normal;
        }
}

/* PAGINATION */
.page-item.active .page-link {
    color: #fff;
    background-color: #12659c;
    border-color: #12659c;
}

a.page-link {
    text-decoration: none;
}

/* ALERTS */
.alert-light {
    background-color: #eee;
}

.alert {
    padding: .75rem 1rem;
}

    .alert ul {
        padding-left: 1.5rem;
    }

    .alert > ul:last-of-type {
        margin-bottom: 0;
    }

/* ACCORDION */
.accordionItemHeader {
    display: flex;
    flex-direction: row;
}

.accordionItemTitle {
    flex: auto;
}

.accordionItem a {
    text-decoration: none;
}

    .accordionItem a:hover {
        text-decoration: underline;
    }

.accortionItemChevron {
    width: 2rem;
    align-items: center;
}

a[aria-expanded="true"] .accortionItemChevron {
    transform: rotate(-180deg);
}

/*.accordionItem > .show{background-color:#f00;}*/

.custom-control-label::before {
    border: 1px solid #CCD1D9;
}

.custom-switch {
    padding-left: 1.75rem;
}

    .custom-switch .custom-control-label:not(:empty) {
        padding-left: .5rem;
    }

    .custom-switch .custom-control-input {
        top: 0.25rem;
        left: calc(.25rem + 2px);
        max-height: 1rem;
    }

    .custom-switch .custom-control-label::before {
        left: -1.75rem;
    }

    .custom-switch .custom-control-label::after {
        left: calc(-1.75rem + 2px);
    }

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #12659c;
    background-color: #12659c;
}

.custom-control-input:checked + .custom-control-label::before {
    background-color: #12659c;
    border: 1px solid #12659c;
}

.custom-control-input:hover, .custom-control-input:active, .custom-control-input:focus, .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgb(206 212 218 / 50%);
}

    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
        border-color: #ced4da;
    }


.radioOptionButton .custom-control {
    padding-left: 0;
}

.radioOptionButton .custom-control-label {
    border: 2px solid #CCD1D9;
    border-radius: 5px;
    padding: .5rem .75rem !important;
    padding-left: 2.5rem !important;
    width: 100%;
}

    .radioOptionButton .custom-control-label::before {
        top: 0.5rem;
        left: 0.75rem;
    }

    .radioOptionButton .custom-control-label::after {
        top: 0.5rem;
        left: 0.75rem;
    }

    .radioOptionButton .custom-control-label:hover,
    .radioOptionButton .custom-control-label:focus,
    .radioOptionButton .custom-control-input:checked + .custom-control-label {
        border-color: #12659c;
    }

.radioOptionButton .custom-checkbox .custom-control-label {
    line-height: inherit;
}

/* SNELLE INVOER */

.radioOption {
    padding: 10px;
    padding-left: 35px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .radioOption:hover {
        background-color: rgba(239,125,0,0.2);
        border: 2px solid #12659c;
    }

.selected {
    border: 2px solid #12659c;
    background-color: rgba(239,125,0,0.2);
}

.scan-img {
    min-width: 100%;
}

.scan-type-icon, .scan-type-name {
    margin: 0 auto;
}

.scan-type-icon {
    background-color: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 60px;
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .scan-type-icon i {
        color: #12659c;
    }

.scan-type-name {
    font-size: 0.875rem;
    font-weight: bold;
    color: #12659c;
}

.scan-types .active .scan-type-icon, .scan-types .active .scan-type-icon i {
    background-color: #12659c;
    color: #fff;
}

.scan-detail-image far {
    font-size: 1rem;
}

.scan-detail-image {
    border-top: 1px solid #E4E7EB;
    border-bottom: 1px solid #E4E7EB;
}

.old-pdf-view {
    height: 700px;
}

/*.scan-detail, .scan-detail-sticky {
    position: sticky;
    top: 5.5rem;
    /*width:41.6666%;
}*/

.newSuppliers {
    list-style: none;
    padding-left: 0px;
}

    .newSuppliers a {
        display: block;
        clear: both;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        padding-left: 0px;
        background-color: transparent;
    }

#orderGrid #orderlines .factuurOrderLijn.borderBottom:last-child {
    border-bottom: none !important;
}

@media (max-width:1200px) {
    .scan-detail-image {
        margin: 0px;
        /*height: 300px;*/
        overflow: auto;
        padding: 0px !important;
        max-width: 100%;
        margin: 0px;
    }

    .scan-detail {
        margin-top: -1rem;
        /*position: fixed;*/
        /*z-index: 800;
        background-color: #F2F6F8;
        width: inherit;
        max-width: inherit;*/
    }

    .scan-detail, .scan-detail-sticky {
        /*top: 4rem;*/
    }

        .scan-detail .scan-detail-sticky > .content-block {
            border-top: none;
        }

    .scan-detail-data {
        padding-top: 465px;
    }

    .scan-detail-image .col {
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .scan-detail-image {
        /*height: 200px;*/
        overflow: auto;
        padding: 0px !important;
        max-width: 100%;
        margin: 0px;
    }

    .scan-detail-arrows {
        max-width: 100%;
        margin-left: 0;
    }

    .scan-detail-arrows > div:first-child {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }

        .scan-detail-image .col {
            padding: 0px;
        }

    .scan-detail {
        padding: 0px;
        width: 100%;
    }

        .scan-detail .content-block {
            border-left: none;
            border-right: none;
            margin: 0px;
            border-radius: 0px;
        }

    .scan-img {
        padding: 0px !important;
    }

    .scan-detail-data {
        padding-top: 300px;
    }

    .scan-detail {
        /*position: fixed;*/
        z-index: 800;
        background-color: #F2F6F8;
    }
}

.scan-detail-thumbnails {
    font-size: 0;
    overflow-x: scroll !important;
}

    .scan-detail-thumbnails img {
        border: 2px solid transparent;
        max-height: 100px;
    }

        .scan-detail-thumbnails img.active, .scanItemImage img.active {
            border: 2px solid #12659c;
        }

/* SNELLE INVOER LIST */
.scanItem {
    white-space: nowrap;
    width: 100%;
}

.scanItemImage img {
    max-width: 110px;
    border: 2px solid #E6EDF1;
}

.scanItemCheckbox {
    width: 100%;
}

.bulkInputItem {
    transition: 0.5s;
}

    .bulkInputItem.border {
        border: none !important;
        box-shadow: 0px 0px 0px 4px #12659c inset;
    }

.selectionOrderNumberBadge {
    position: absolute;
    top: 2px;
}

.bulkInputBulkActions {
    position: sticky;
    top: calc(100vh - var(--containerViewHeight));
    z-index: 2;
}

.bulkInputItemPreview {
    position: fixed;
    top: 0;
    border: 5px solid #f7f7fa;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 1050;
}

    .bulkInputItemPreview img {
        max-width: 75vh;
        max-height: 75vh;
    }

@media(max-width: 767px) {
    .scanItemImage img {
        max-width: 80px;
    }
}

/* SNELLE INVOER - SCROLL */
@media (min-width:1200px) {
    .scan-detail, .scan-detail-sticky {
        position: sticky;
        top: calc(100vh - var(--containerViewHeight) + 1rem);
        /*width:41.6666%;*/
    }

    .scan-detail-image {
        overflow: auto;
        margin: 0px 0px;
        /*height: calc(100vh - 215px);*/
    }

    .scan-detail-sticky .scan-detail-image.has-thumbs {
        /*height: calc(100vh - 417px);*/
        height: calc(var(--containerViewHeight) - 275px);
    }

    .scan-detail-sticky .scan-detail-image {
        height: calc(var(--containerViewHeight) - 158px);
    }

    .scan-detail-data {
        height: calc(100vh - 64px);
        overflow: scroll;
        overflow-x: hidden;
        padding-top: 50px;
    }
}


/* INKOMSTEN */

.orderLinesActions a {
    min-height: 36px;
    display: block;
    margin-bottom: 10px;
    line-height: 10px;
}

.status {
    width: 170px;
    display: flex;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.statusLeft {
    width: 70%;
    padding: 0px 5px;
    text-transform: capitalize;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: left;
    white-space: nowrap;
}

.statusRight {
    width: 30%;
    font-size: 0.7rem;
    padding: 0px 5px;
    text-align: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    white-space: nowrap;
}

.statusTypeToPay, .statusTypePaymentFileGenerated {
    background-color: rgba(81,174,81,0.2);
    color: #51AE51;
}

    .statusTypeToPay .statusRight, .statusTypePaymentFileGenerated .statusRight {
        background-color: #51AE51;
        color: #fff;
    }

.statusTypeToPayExpired, .statusTypeToInvoiceExpired, .statusTypePaymentFileGeneratedExpired {
    background-color: rgba(231,76,60,0.2);
    color: #E74C3C;
}

    .statusTypeToPayExpired .statusRight, .statusTypeToInvoiceExpired .statusRight, .statusTypePaymentFileGeneratedExpired .statusRight, .carpassStatusTypeERROR, .carpassStatusTypeREJECTED {
        background-color: #E74C3C;
        color: #fff;
    }

.statusTypePaid, .statusTypeInvoiced, .carpassStatusTypePROCESSED {
    background-color: #51AE51;
    color: white;
    text-align: center;
}

.statusTypeCredited {
    background-color: #51AE51;
    color: white;
}

    .statusTypeCredited .statusRight {
        background-color: rgb(225,242,224);
        color: #51AE51;
    }

.statusTypeToSend, .statusTypeToDeliver {
    background-color: rgb(58,162,223);
    color: white;
    display: block;
    text-align: center;
}

.statusTypeToSendExpired{
    background-color: rgb(58,162,223);
    color: white;
    text-align: left;
}

.statusTypeApprovalNeededExpired {
    background-color: #ffc107;
    color: #000;
    text-align: left;
}

    .statusTypeToSendExpired .statusRight, .statusTypeApprovalNeededExpired .statusRight {
        background-color: #E74C3C;
        color: white;
    }

.statusToDomiciliate {
    color: rgb(162,106,191);
    background-color: rgb(205,172,218);
}

.statusTypeToDomiciliate .statusRight {
    background-color: rgb(142, 68, 173);
    color: white;
}

.statusTypeToDomiciliate {
    background-color: rgb(155, 89, 182);
    color: white;
}

.statusTypeToDomiciliateExpired .statusRight {
    background-color: #E74C3C;
    color: white;
}

.statusTypeToDomiciliateExpired {
    background-color: rgb(162,106,191);
    color: white;
}

.statusTypePaymentFileGenerated {
    background-color: rgb(162,106,191);
    color: white;
}

.statusTypePaymentFileGeneratedExpired {
    background-color: rgb(162,106,191);
    color: white;
}

    .statusTypePaymentFileGeneratedExpired .statusRight {
        background-color: #E74C3C;
        color: white;
        display: block;
        text-align: center;
    }

.statusDocumentDeliveryDelivered {
    background-color: #218838;
    color: white;
}

.statusDocumentDeliveryError {
    background-color: #dc3545;
    color: white;
}

.statusDocumentDeliveryPending {
    background-color: #17a2b8;
    color: white;
}

.statusTypeDraft {
    background-color: rgb(219,237,249);
    color: rgb(61,167,233);
    display: block;
    text-align: center;
}

.statusTypeDraftExpired .statusLeft {
    background-color: rgb(219,237,249);
    color: rgb(61,167,233);
    display: block;
    text-align: left;
}

.statusTypeDraftExpired .statusRight {
    background-color: #E74C3C;
    color: white;
    display: block;
    text-align: center;
}

.statusTypeRefused, .statusTypeFailed, .statusTypeFailedExpired, .statusTypeRefusedExpired {
    background-color: #E74C3C;
    color: white;
    display: block;
    text-align: center;
}

.statusTypeToInvoice, .statusTypeOrderFormCreated, .carpassStatusTypeWAITING_FOR_DIV, .carpassStatusTypeONGOING {
    background-color: #17a2b8;
    color: #fff;
}

.statusTypeDeliveryNoteCreated, .statusTypeApprovalNeeded, .carpassStatusTypeREVIEWING, .carpassStatusTypeISSUE {
    background-color: #ffc107;
    color: #000;
}

.customTabItem {
    flex-direction: row
}

.customTabItem {
    box-sizing: border-box;
    display: block;
}

@media (min-width: 768px) {
    .status {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .table-responsive {
        line-height: 1.6em;
    }

    .table-responsive-left {
        display: block;
        clear: both;
        width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-responsive-right {
        position: relative;
        display: block;
        text-align: right;
        font-weight: bold;
        margin-top: -1.6em;
    }

    .table-responsive-to-list tr {
        border-top: 1px solid #dee2e6;
    }

    .table-responsive-to-list td {
        padding-top: 0px;
        padding-bottom: 0px;
        border: none;
    }
}



.badge {
    font-size: 11px;
    line-height: 1;
    font-weight: normal;
    padding: 3px 6px;
    font-weight: bold;
    vertical-align: middle;
}

h1 .badge, h2 .badge, h3 .badge {
    font-size: 60%;
    padding: 0.25rem 0.5rem;
}

h2 .badge, h3 .badge {
    font-size: 70%;
}

.billit-sidebar-block .badge {
    font-size: 9px;
    font-weight: bold;
    line-height: 9px;
    padding: 3px 6px;
}

.title .badge {
    font-size: 12px;
}


.badgeContent {
    color: #fff;
}

.badgeInfo {
}

.badgeInQueue {
    background-color: #95A5A6;
}

.badgeReceived {
    background-color: #51AE51;
}

.badgeSent {
    background-color: #3498DB;
}

.badgeError {
    background-color: #E74C3C;
}

.badge-blue {
    background-color: #12659c;
    color: #fff;
}

.badge-light {
    background-color: #e8e8e8;
}

a.invoiceOverviewProduct {
    text-decoration: none !important;
}

.invoiceOverviewProductName {
}

.invoiceOverviewProductAmount, .invoiceOverviewProductTotal {
    color: #294554;
}

.invoiceOverviewProductAmount {
    font-weight: 400;
}

.invoiceOrderLineItem {
    font-size: 0.8rem;
    line-height: 1.2rem;
}

@media(min-width: 1500px) {
    .pdf-viewer-xxl {
        position: absolute;
        top: 0;
        right: 0;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666666%;
        flex: 0 0 41.666666%;
        max-width: 41.666666%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-6-1 {
        -ms-flex: 0 0 51%;
        flex: 0 0 51%;
        max-width: 51%;
    }

    .col-xxl-5-9 {
        -ms-flex: 0 0 49%;
        flex: 0 0 49%;
        max-width: 49%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666666%;
        flex: 0 0 66.666666%;
        max-width: 66.666666%;
    }

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

/* PROGRESS BAR */
.progress {
    height: 10px;
}

.progress-bar {
    background-color: #12659c;
}

#uploadProgressBarWrapper label, #uploadProgressBarWrapperUpload label {
    color: #12659c;
    font-weight: 700;
}

.dataDate, .dataEmail {
    font-size: 0.875rem;
}

.dataDescription, .dataFileName {
    font-size: 1rem;
}

.dataAuthor {
    font-size: 0.875rem;
    color: #6693AA;
}


/* EMPTY STATES */
.emptyState {
}

.emptyStateIcon {
    font-size: 3.4rem;
    height: 104px;
    width: 104px;
    border-radius: 70px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emptyStateText {
    font-weight: normal;
}


/* NPS */
.npsIcon {
    font-size: 3rem;
    height: 5rem;
    width: 5rem;
    padding: 1rem 0rem;
    border-radius: 70px;
    margin: 0 auto;
    text-align: center;
}

/* registration */
.languageRegistration {
    font-size: 0.875rem;
}

    .languageRegistration a {
        text-decoration: none;
        font-weight: 400;
    }

        .languageRegistration a.active {
            color: #12659c;
            font-weight: 700;
        }


.registration {
}

.registrationReferences {
    min-height: 500px;
}

.registrationRight {
    overflow: auto;
    height: 100%;
    z-index: 0;
}

.registrationLeft {
    background-color: #004B72;
    background-image: url(/Content/img/account/billit-logo-dark-background.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300px 300px;
    z-index: 1000;
}

.registrationQuote {
}

.registrationQuoteBefore {
    background-color: #fff;
    height: 1px;
}

.registrationQuoteText {
    font-weight: 700;
    background-color: #fff;
    padding: 15px;
    display: block;
}

.registrationQuoteAuthor {
    color: #fff;
}

.carousel-item {
    width: 100%;
}

/*
.registrationQuoteText:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid #fff;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    border-bottom: 10px solid transparent;
    left: 20px;
    bottom: 60px;
}
*/

/* registration collapsable part */
.titleCollapsablePart .fa-angle-right {
    text-align: left !important;
}

.titleCollapsablePart[aria-expanded="true"] .fa-angle-right {
    transform: rotate(90deg);
}

.titleCollapsablePart[aria-expanded="false"] .fa-angle-right {
    transform: rotate(0deg);
}

#registrationCarousel {
    min-height: 300px;
}

.registrationLogo img {
    max-height: 100px;
}

@media (min-width: 768px) {
    .registrationRow {
        height: 100%;
    }
}

@media (max-width: 767px) {
    .registrationReferences {
        min-height: 20px;
    }

    .languageRegistration {
        margin-top: 63px;
    }

    .registrationLeft {
        height: 100px;
        background-position: left center;
        background-size: 120px 120px;
    }

    .languageRegistration a {
        text-decoration: none;
        color: #fff;
    }

        .languageRegistration a.active {
            color: #fff;
        }

    .registrationLogo {
        margin: 0 auto;
    }

        .registrationLogo img {
            height: 64px;
            text-align: center;
        }
}

/* DASHBOARD */

.dashboardAdd {
}

    .dashboardAdd a {
        color: #193549;
        text-decoration: none;
    }

.dashboardAddIcon i {
    font-size: 1.3rem;
    width: 30px;
    text-align: left;
}

.DashboardBank > div > div.col-auto.font-weight-bold > img {
    width: 40px;
    text-decoration: none !important;
}

.profileProgress .btn-primary, .profileProgress a.btn-primary {
    box-shadow: 0px 0px 0px 2px #12659c inset;
}

.profileProgress {
    background-color: #12659c;
    color: white;
}

    .profileProgress .borderTop {
        border-color: #E4E7EB;
    }

    .profileProgress a:hover {
        color: #193549 !important;
        opacity: 0.7;
    }

.workshop-block {
    background-color: #12659c;
    color: white;
}

.workshop-block .badge-primary {
    background-color: #12659c;
}

.workshop-block a.btn-primary {
    background-color: #12659c;
    border-radius: .25rem;
    padding: .5rem .75rem;
    transition: 0.15s ease-in-out;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.workshop-block a.btn-primary:hover {
    background: transparent;
    box-shadow: 0px 0px 0px 2px #ffffff inset;
    color: #ffffff !important;
}

.workshop-block a.btn-primary:focus {
    background: transparent;
    box-shadow: 0px 0px 0px 2px #ffffff inset;
    color: #ffffff !important;
}

.workshop-block a {
    color: #ffffff;
    transition: 0.15s ease-in-out;
    display: inline-block;
    font-weight: normal;
}

.workshop-block a:hover {
    color: #12659c !important;
}

.workshop-block a:focus {
    color: #12659c !important;
}

.infoImg {
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    object-position: right;
}

/* registration WIZARD */
.wizardSteps {
    font-size: 0.8rem;
    color: #6693AA;
}

.wizard .progress, .wizard .progress-bar {
    height: 6px;
}



/* START ITEM BOEKHOUDERSONBOARDING */
.textDecorationNone {
    text-decoration: none !important;
}

.startItemIcon i {
    font-size: 2rem;
    color: #12659c;
    line-height: 2rem;
}

@media (max-width: 767px) {
    .startItemIcon i {
        font-size: 1.4rem;
    }
}

.startItemToDo {
    opacity: 0.4;
}

.startItemInprogress {
    opacity: 1;
}

.startItemDone i {
    color: #51AE51;
}

.startItemContainer {
}

.startItemTitle h3 {
    color: #12659c;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.8rem;
}

.startItemToggle i {
    width: 20px;
}

.startItemContent {
}

.startItemRemark {
    font-weight: 700;
}

.startItemFiles {
    border: 1px solid #E4E7EB;
    border-bottom: none;
}

#search .ui-autocomplete {
    top: 60px !important;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 260px !important;
    border: 1px solid #CCD1D9 !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 2000;
}

.ui-menu-item-wrapper {
    padding: 0.5rem 0.3rem !important;
}

.ui-widget.ui-widget-content {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
}

@media (max-width: 767px) {
    .startItemFiles .text-muted.fileExtra {
        font-size: 0.85rem;
    }

    #search .ui-autocomplete {
        max-height: var(--containerViewHeight);
        width: 100vw !important;
        left: 0px !important;
    }

    /*.ui-autocomplete {
        width: 100vw !important;
        left: 0px !important;
    }*/
}


@media (max-width: 350px) {
    .startItemFiles .text-muted.fileExtra {
        font-size: 0.75rem;
    }
}

.fakeTableHeader {
    border-bottom: 1px solid #E4E7EB;
}
/*.ui-menu-item {
    padding:15px;
}*/
/* INSTELLINGEN */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #E6EDF1;
    color: #12659c;
}

.nav-pills .nav-link {
    border-radius: 0px;
}

.platform-v2 a.nav-link {
    text-decoration: none;
    color: #12659c;
}

    .platform-v2 a.nav-link:hover {
        background-color: #F2F6F8;
    }


.form-group {
    margin-bottom: 0.5rem;
}

.settings .form-group {
    margin-bottom: 0px;
}

.navbarSettings {
    padding: 0px;
    overflow: auto;
}


.settings a {
    text-decoration: none;
}

.settings p a {
    text-decoration: underline;
}

.licenseItem {
    color: #12659c;
}

    .licenseItem .text-muted {
        min-height: 80px;
    }

    .licenseItem.active {
        box-shadow: 0px 0px 0px 2px #193549 inset;
        background-color: #fff;
    }

@media (min-width: 768px) {
    .settingsLeft {
        position: fixed;
    }
}

@media (max-width: 767px) {
    .licenseItem .text-muted {
        min-height: 48px;
    }
}

/* PLAYGROUND */

.toggleActiveBtn {
    background-color: #fff !important;
    color: #12659c !important;
    box-shadow: 0px 0px 0px 2px #12659c inset !important;
    border-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.dropdown-item {
    padding: .25rem 1rem;
    color: #212529;
}

    .dropdown-item.active, .dropdown-item:active {
        color: inherit;
        background-color: #E4E7EB;
    }

    .dropdown-item i {
        color: #12659c;
    }

a.disabled, a:disabled {
    pointer-events: none;
    opacity: 0.65;
    color: #95A5A6;
}

/* MISSING BOOTSTRAP FEATURES */
/* 
   .btn-XX-block: Create block level button for specific breakpoint
   .btn-XX-inline: Remove block level of current button for specific breakpoints
*/
.btn-inline {
    display: inline;
    width: auto !important;
}

.btn-block + .btn-sm-inline {
    margin-top: 0rem;
}

.btn-block + .btn-md-inline {
    margin-top: 0rem;
}

.btn-block + .btn-lg-inline {
    margin-top: 0rem;
}

.btn-block + .btn-xl-inline {
    margin-top: 0rem;
}



@media(min-width: 576px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }

        .btn-sm-block + .btn-sm-block {
            margin-top: 0.5rem;
        }

    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }

    .btn-sm-inline {
        display: inline;
        width: auto !important;
    }
}

@media (min-width: 768px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }

        .btn-md-block + .btn-md-block {
            margin-top: 0.5rem;
        }

    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }

    .btn-md-inline {
        display: inline;
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }

        .btn-lg-block + .btn-lg-block {
            margin-top: 0.5rem;
        }

    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }

    .btn-lg-inline {
        display: inline;
        width: auto !important;
    }
}

@media (min-width: 1200px) {
    .btn-xl-block {
        display: block;
        width: 100%;
    }

        .btn-xl-block + .btn-xl-block {
            margin-top: 0.5rem;
        }

    input[type="submit"].btn-xl-block,
    input[type="reset"].btn-xl-block,
    input[type="button"].btn-xl-block {
        width: 100%;
    }

    .btn-xl-inline {
        display: inline;
        width: auto !important;
    }
}

/* DROPZONE */
.dropzone {
    text-align: center;
}

@media (min-width: 992px) {
    .dropzone {
        background-color: #F2F6F8;
        border: 2px dashed #bbbbbb;
        padding: 1rem;
    }

        .dropzone:hover, .dropzoneHover {
            background-color: rgba(240,125,0,0.15);
            border: 2px dashed #12659c;
            color: #12659c;
        }

        .dropzone * {
            pointer-events: none;
        }

        .dropzone button {
            pointer-events: all;
        }
}

/* LICENSES PAGE */

.licenseTitle {
    width: 10rem;
}

.licensePane.activeLicense {
    box-shadow: 0px 0px 0px 2px #12659c inset;
}

/* CSS ONLY BILLIT */

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent; /*#F2F6F8;*/
}

.table-hover tbody tr:hover {
    background-color: #F1F3F5; /*#E6EDF1;*/
}

.alert-light {
    background-color: #F2F6F8;
}

.tag {
    line-height: 210%;
}

.notificationoverlay {
    position: fixed;
    top: calc(100vh - var(--containerViewHeight));
    right: 0px;
    width: 100%;
    padding-bottom: 25px;
    z-index: 1039;
    height: var(--containerViewHeight);
    padding: 0;
    overflow-y: auto;
}

@media (min-width: 576px) {
    .notificationoverlay {
        max-width: 400px;
    }
}

.notificationEmoticon > img {
    width: 18px;
    height: 18px;
}

.notificationIcon span {
    display: inline-block;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: top;
    border-radius: 1rem;
    margin-left: -12px;
    font-size: 0.7rem;
}

.notificationBox {
    word-wrap: break-word;
}

.overlay {
    position: fixed;
    /*top: 0;
    left: 180px;*/
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loadingPopup {
    position: fixed !important;
    right: 1rem;
    top: calc(64px + 1rem);
    z-index: 500;
}

#overlayNotif.overlay {
    z-index: 1020;
    margin-left: -1rem;
}

/* File Viewer */
.fileViewerContainer {
    line-height: 0;
    overflow: auto;
    cursor: grab;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .fileViewerContainer.grabbing {
        cursor: grabbing;
        user-select: none;
    }

    .fileViewerContainer .fileViewerLoader {
        margin: auto;
    }

    .fileViewerContainer .fileViewerPageContainer {
        margin: auto;
    }

        .fileViewerContainer .fileViewerPageContainer + .fileViewerPageContainer {
            margin-top: 1rem;
        }

        .fileViewerContainer .fileViewerPageContainer .fileViewerCanvas {
            background-color: white;
        }

.btn-support {
    position: fixed;
    top: calc(100vh - 84px);
    z-index: 1020;
    right: 0px
}

.tabs {
    border-bottom: 1px solid #E4E7EB;
}

    .tabs a {
        border-bottom: 4px solid #fff;
        color: #12659c;
        opacity: 1;
    }

        .tabs a:hover {
            opacity: 1 !important;
            background-color: #F2F6F8 !important;
            border-bottom-color: #F2F6F8;
        }

    .tabs .active {
        border-bottom-color: #12659c;
        background-color: #F2F6F8 !important;
        color: #12659c !important;
        opacity: 1;
    }

    .tabs a:hover.active {
        border-bottom-color: #12659c;
    }

ul.nav.tabs.tabsScrollable {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
    white-space: nowrap;
    display: block;
    overflow-x: auto;
    font-size: 0;
}

    ul.nav.tabs.tabsScrollable::-webkit-scrollbar {
        /* Safari and Chrome */
        display: none;
    }

.tabs.tabsScrollable li.nav-item {
    display: inline-block;
    font-size: 0.8rem;
}

.tabs.tabsScrollable .nav-link {
    padding: 0.5rem 0.5rem;
}

.tabs.tabsScrollable li.nav-item.active {
    position: sticky;
    left: 0;
    right: 0;
}

.tabs.tabsScrollable {
    flex: 1 1 auto !important;
    flex-direction: row;
}

@media (max-width: 767px) {
    .tabs:not(.tabsScrollable) {
        border: 1px solid #E4E7EB;
        border-bottom: none;
    }

        .tabs:not(.tabsScrollable) a {
            border-bottom: 1px solid #E4E7EB;
        }

            .tabs:not(.tabsScrollable) a.active {
                border-bottom: 4px solid #12659c;
                background-color: #F2F6F8 !important;
                color: #12659c !important;
                opacity: 1;
            }
}

/* REDUCED SPACE */

@media (min-width: 767px) {
    .reducedSpace .form-control {
        height: calc(1.5em + .375rem + 2px);
        padding: .15rem .25rem;
        font-size: 0.8rem;
        line-height: 1.5;
        border-radius: .25rem;
    }

    .reducedSpace textarea.form-control {
        height: auto;
    }

    .reducedSpace .input-group > .input-group-append .btn, .reducedSpace .input-group > .input-group-prepend > .input-group-text, .reducedSpace .input-group > .input-group-append > .input-group-text, .reducedSpace .input-group .btn {
        height: calc(1.5em + .375rem + 2px);
        padding: .15rem .5rem;
        font-size: .8rem;
        line-height: 1.5;
        border-radius: .2rem;
    }

    .reducedSpace .input-group > .input-group-prepend .btn, .reducedSpace .input-group > .input-group-prepend > .input-group-text {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .reducedSpace .input-group > .input-group-append .btn, .reducedSpace .input-group > .input-group-append > .input-group-text {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .reducedSpace .table th, .reducedSpace .table td {
        padding: .3rem .3rem .3rem .3rem;
        line-height: 180%;
    }

        .reducedSpace .table th:first-of-type, .reducedSpace .table td:first-of-type {
            padding-left: 1rem;
        }

        .reducedSpace .table th:last-of-type, .reducedSpace .table td:last-of-type {
            padding-right: 1rem;
        }

    .reducedSpace .col-form-label {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    .reducedSpace .form-control-plaintext {
        padding: .25rem 0;
        border: 0;
    }
}

.reducedSpace .form-group {
    margin-bottom: 5px;
}

.reducedSpace label {
    margin-bottom: 0;
}

.countryCodedropdown {
    max-height: 280px;
    overflow-y: auto;
}

colgroup col.d-none {
    display: table-column !important;
    visibility: collapse;
}

.bankinactive {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.bankactive {
    -webkit-filter: grayscale(0);
    filter: none;
}

/*.nps.btn-group-toggle {
    border-radius: 4px !important;
    border: 2px solid #E4E7EB;
    background-color: #fff;
}

    .nps.btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active, .toggleActiveBtn {
        border-radius: 0px !important;
        box-shadow: none;
        outline: 2px solid #12659c;
    }

    .nps.btn-group-toggle .btn-secondary {
        border-radius: 0px !important;
        border: none;
    }*/

.required:after {
    content: "*";
    color: red;
    margin-left: .25rem;
}

.loadingOverlayContainer {
    position: relative !important;
}

    .loadingOverlayContainer > *:not(.loadingOverlay, .loadingOverlay *, input[type=checkbox].custom-control-input) {
        opacity: 0.3;
        transition: opacity 0.3s, visibility 0.3s;
    }


    .loadingOverlayContainer .loadingOverlay {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 5;
        left: 50%;
        transform: translateX(-50%);
    }

        .loadingOverlayContainer .loadingOverlay .spinnerContainer {
            height: 100%;
            max-height: 280px;
        }

        .loadingOverlayContainer .loadingOverlay .spinnerContainer {
            position: sticky;
            top: 0;
        }

.w-17 {
    width: 17% !important;
}
.w-30 {
    width: 30% !important;
}
.w-34 {
    width: 34% !important;
}
.w-51 {
    width: 51% !important;
}
.w-55 {
    width: 55% !important;
}
.w-68 {
    width: 68% !important;
}
.w-70 {
    width: 70% !important;
}
.w-85 {
    width: 85% !important;
}
.w-95 {
    width: 95% !important;
}
.w-45 {
    width: 45% !important;
}

.externalProductPageIframe {
    border: none;
    width: 100%;
    height: 85vh;
}


.fillperc-0 {
    width: 0% !important;
}

.fillperc-1 {
    width: 1% !important;
}

.fillperc-2 {
    width: 2% !important;
}

.fillperc-3 {
    width: 3% !important;
}

.fillperc-4 {
    width: 4% !important;
}

.fillperc-5 {
    width: 5% !important;
}

.fillperc-6 {
    width: 6% !important;
}

.fillperc-7 {
    width: 7% !important;
}

.fillperc-8 {
    width: 8% !important;
}

.fillperc-9 {
    width: 9% !important;
}

.fillperc-10 {
    width: 10% !important;
}

.fillperc-11 {
    width: 11% !important;
}

.fillperc-12 {
    width: 12% !important;
}

.fillperc-13 {
    width: 13% !important;
}

.fillperc-14 {
    width: 14% !important;
}

.fillperc-15 {
    width: 15% !important;
}

.fillperc-16 {
    width: 16% !important;
}

.fillperc-17 {
    width: 17% !important;
}

.fillperc-18 {
    width: 18% !important;
}

.fillperc-19 {
    width: 19% !important;
}

.fillperc-20 {
    width: 20% !important;
}

.fillperc-21 {
    width: 21% !important;
}

.fillperc-22 {
    width: 22% !important;
}

.fillperc-23 {
    width: 23% !important;
}

.fillperc-24 {
    width: 24% !important;
}

.fillperc-25 {
    width: 25% !important;
}

.fillperc-26 {
    width: 26% !important;
}

.fillperc-27 {
    width: 27% !important;
}

.fillperc-28 {
    width: 28% !important;
}

.fillperc-29 {
    width: 29% !important;
}

.fillperc-30 {
    width: 30% !important;
}

.fillperc-31 {
    width: 31% !important;
}

.fillperc-32 {
    width: 32% !important;
}

.fillperc-33 {
    width: 33% !important;
}

.fillperc-34 {
    width: 34% !important;
}

.fillperc-35 {
    width: 35% !important;
}

.fillperc-36 {
    width: 36% !important;
}

.fillperc-37 {
    width: 37% !important;
}

.fillperc-38 {
    width: 38% !important;
}

.fillperc-39 {
    width: 39% !important;
}

.fillperc-40 {
    width: 40% !important;
}

.fillperc-41 {
    width: 41% !important;
}

.fillperc-42 {
    width: 42% !important;
}

.fillperc-43 {
    width: 43% !important;
}

.fillperc-44 {
    width: 44% !important;
}

.fillperc-45 {
    width: 45% !important;
}

.fillperc-46 {
    width: 46% !important;
}

.fillperc-47 {
    width: 47% !important;
}

.fillperc-48 {
    width: 48% !important;
}

.fillperc-49 {
    width: 49% !important;
}

.fillperc-50 {
    width: 50% !important;
}

.fillperc-51 {
    width: 51% !important;
}

.fillperc-52 {
    width: 52% !important;
}

.fillperc-53 {
    width: 53% !important;
}

.fillperc-54 {
    width: 54% !important;
}

.fillperc-55 {
    width: 55% !important;
}

.fillperc-56 {
    width: 56% !important;
}

.fillperc-57 {
    width: 57% !important;
}

.fillperc-58 {
    width: 58% !important;
}

.fillperc-59 {
    width: 59% !important;
}

.fillperc-60 {
    width: 60% !important;
}

.fillperc-61 {
    width: 61% !important;
}

.fillperc-62 {
    width: 62% !important;
}

.fillperc-63 {
    width: 63% !important;
}

.fillperc-64 {
    width: 64% !important;
}

.fillperc-65 {
    width: 65% !important;
}

.fillperc-66 {
    width: 66% !important;
}

.fillperc-67 {
    width: 67% !important;
}

.fillperc-68 {
    width: 68% !important;
}

.fillperc-69 {
    width: 69% !important;
}

.fillperc-70 {
    width: 70% !important;
}

.fillperc-71 {
    width: 71% !important;
}

.fillperc-72 {
    width: 72% !important;
}

.fillperc-73 {
    width: 73% !important;
}

.fillperc-74 {
    width: 74% !important;
}

.fillperc-75 {
    width: 75% !important;
}

.fillperc-76 {
    width: 76% !important;
}

.fillperc-77 {
    width: 77% !important;
}

.fillperc-78 {
    width: 78% !important;
}

.fillperc-79 {
    width: 79% !important;
}

.fillperc-80 {
    width: 80% !important;
}

.fillperc-81 {
    width: 81% !important;
}

.fillperc-82 {
    width: 82% !important;
}

.fillperc-83 {
    width: 83% !important;
}

.fillperc-84 {
    width: 84% !important;
}

.fillperc-85 {
    width: 85% !important;
}

.fillperc-86 {
    width: 86% !important;
}

.fillperc-87 {
    width: 87% !important;
}

.fillperc-88 {
    width: 88% !important;
}

.fillperc-89 {
    width: 89% !important;
}

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

.fillperc-91 {
    width: 91% !important;
}

.fillperc-92 {
    width: 92% !important;
}

.fillperc-93 {
    width: 93% !important;
}

.fillperc-94 {
    width: 94% !important;
}

.fillperc-95 {
    width: 95% !important;
}

.fillperc-96 {
    width: 96% !important;
}

.fillperc-97 {
    width: 97% !important;
}

.fillperc-98 {
    width: 98% !important;
}

.fillperc-99 {
    width: 99% !important;
}

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


/* Register onboarding */

.onboardingStepsContainer.carousel .carousel-item {
    transition: transform .3s ease-in-out, opacity .1s ease-in;
}

/* --- ACCOUNTIT SPECIFIC CSS --- */
#tabQuartersVAT a::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f061";
    color: #193549;
}

#tabQuartersVAT a {
    text-decoration: none;
    color: #294554;
}

    #tabQuartersVAT a:hover {
        text-decoration: underline;
        color: #193549;
    }

.vatreturn .btn-group-toggle label.btn-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vatPeriodBlock {
    border: 1px solid #CCDBE3;
    border-radius: 8px;
}

    .vatPeriodBlock .vatDate {
        font-weight: 700;
    }

        .vatPeriodBlock .vatDate a {
            font-size: 13px;
        }

    .vatPeriodBlock .disabled {
        color: #95A5A6;
    }

    .vatPeriodBlock.active {
        border: 2px solid #193549;
    }

    .vatPeriodBlock a:hover {
        text-decoration: none;
    }

    .vatPeriodBlock .btn {
        align-items: center;
        white-space: break-spaces;
        text-decoration: none;
        color: white;
    }

        .vatPeriodBlock .btn:hover {
            color: white;
        }

    .vatPeriodBlock a i.tooltipIcon {
        color: #F07D00;
    }

        .vatPeriodBlock a i.tooltipIcon:hover {
            color: #294554;
        }

.vatreturnBalance {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


.vatPeriodAmountBlock {
    background: #F2F6F8;
    border-radius: 8px;
    padding: 10px;
}

.vatPeriodAmounts .iconcol {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vatPeriodAmounts .iconcol i {
        font-size: 20px;
        font-weight: 900;
    }

.vatTimelineBlock {
    text-align: center;
}

    .vatTimelineBlock i {
        color: white;
        background: #95A5A6;
        border: 8px solid #95A5A6;
        border-radius: 150px;
        outline: 2px solid white;
    }

        .vatTimelineBlock i.fa-check-circle {
            background: #00B67A;
            border: 8px solid #00B67A;
        }

        .vatTimelineBlock i.fa-exclamation-circle {
            background: #DC3545;
            border: 8px solid #DC3545;
        }


.timeline {
    height: 12px;
    text-align: center;
}

.timelinecontainer {
    background: #E6EDF1;
    height: 12px;
    position: absolute;
    top: 60px;
    width: 92%;
    left: 50%;
    transform: translate(-50%, 0);
}

.timelinefill {
    background: #17A2B8;
    height: 12px;
    width: 100%;
}



.modalPayVatReturnChoice .qrcode {
    border: 1px solid #CCDBE3;
    border-radius: 4px;
}

.modalPayVatReturnChoice .paymentfile {
    background: #F2F6F8;
    border-radius: 4px;
    height: 100%;
}

@media (min-width: 992px) {
    .vatPeriodAmounts .iconcol {
        width: 30px !important;
        max-width: 30px !important;
        min-width: 30px !important;
        height: 100%;
        left: auto;
        right: auto;
        text-align: center;
    }
}

@media (max-width: 991px) {
    /*.vatTimelineBlock i {
        margin-left: -1rem;
    }*/
}

.currencyValue {
    display: inline-flex !important;
    gap: 0.2rem;
}

    .currencyValue::before, .currencyValue::after {
        display: inline-block;
    }

    .currencyValue[data-currency]::after, .currencyValue[data-currency].currencyCode::after {
        content: attr(data-currency);
    }

.htmleditor {
    min-height: 150px;
    height: 650px;
    resize: vertical;
    overflow: hidden;
    display: block;
}

    .htmleditor iframe {
        width: 100%;
        height: 100%;
        border: none;
        overflow: hidden;
        user-select: none;
        display: block;
    }

.actionFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #CCD1D9;
    width: 100%;
    height: 4.15rem;
    z-index: 3;
}

@media (min-width: 768px) {
    .actionFooter {
        left: 250px;
        width: calc(100% - 250px);
    }
}

#content:has(.actionFooter) {
    padding-bottom: 5.15rem !important;
}

/*
    CropperJS
*/
.cropper-view-box {
    outline: 3px solid #12659c !important;
}

.cropper-point, .cropper-line {
    background-color: #12659c !important;
}

.cropper-point {
    width: 10px !important;
    height: 10px !important;
}

    .cropper-point::before {
        content: " ";
        display: block;
        width: 40px !important;
        height: 40px !important;
        position: absolute;
        bottom: calc(-20px + 60%) !important;
        right: calc(-20px + 60%) !important;
    }

    .cropper-point.point-n, .cropper-point.point-s {
        margin-left: -5px !important;
    }

    .cropper-point.point-e, .cropper-point.point-w {
        margin-top: -5px !important;
    }

    .cropper-point.point-se {
        width: 25px !important;
        height: 25px !important;
    }

        .cropper-point.point-se::after {
            overflow: hidden;
            content: "\f337";
            position: absolute;
            top: 0;
            left: 0;
            padding: 5px;
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            font-size: 15px;
            line-height: 15px;
            color: white;
            transform: rotate(45deg);
            z-index: 99999;
        }

@media (max-width: 767px) {
    .font-weight-bold-small-screen {
        font-weight: bold;
    }

    .maxw90px-small-screen {
        max-width: 90px !important;
    }
}

/* Toast styles start */
div.toast.fade.show {
    opacity: 1 !important;
}

div.toast {
    background-color: rgba(54,57,62);
    color: white;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
}
/* Toast styles end */

/* UserTicket */

#UserTicketHistoryList .badge {
    text-shadow: #999 0px 0px 3px;
}

/* Font Awasome stack start*/
.fa-stack {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    height: 1rem;
    width: 1.5rem;
    line-height: 1rem;
}

.fa-stack-xs {
    height: 0.5rem;
    line-height: 0.5rem;
}

.fa-stack-sm {
    height: 0.7rem;
    line-height: 0.7rem;
}

.fa-stack-md {
    height: 1rem;
    line-height: 1rem;
}

.fa-stack-lg {
    height: 1.2rem;
    line-height: 1.2rem;
}

.fa-stack-xl {
    height: 1.7rem;
    line-height: 1.7rem;
    width: 2rem;
}

.fa-stack-icon-xs, .fa-stack-icon-sm, .fa-stack-icon-md, .fa-stack-icon-lg, .fa-stack-icon-xl {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: auto;
    line-height: inherit;
}

.fa-stack-icon-xs {
    font-size: 0.5rem;
}

.fa-stack-icon-sm {
    font-size: 0.7rem;
}

.fa-stack-icon-md {
    font-size: 1rem;
}

.fa-stack-icon-lg {
    font-size: 1.2rem;
}

.fa-stack-icon-xl {
    font-size: 1.7rem;
}

.fa-stack-icon-top {
    top: -35%;
}

.fa-stack-icon-bottom {
    top: 35%;
}

.fa-stack-icon-left {
    left: -35%;
}

.fa-stack-icon-right {
    left: 35%;
}
/* Font Awasome stack end*/

/*SupportIT*/
.SupportITInternalComments {
    overflow: auto;
    max-height: calc(var(--containerViewHeight) - 251px)
}

.SupportITSnippets {
    overflow: auto;
    max-height: calc(95vh - 315px)
}

/*Ticket Dashboard*/
.display-6 {
    font-size: 2rem;
}

.full-height {
    height: 100%;
}

@media (max-width: 991px) {
    .display-huge {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .display-huge {
        font-size: 10rem;
    }
}

@keyframes rainbow-color {
    0% {
        color: red;
    }

    14% {
        color: orange;
    }

    28% {
        color: yellow;
    }

    42% {
        color: green;
    }

    57% {
        color: blue;
    }

    71% {
        color: indigo;
    }

    85% {
        color: violet;
    }

    100% {
        color: red;
    }
}


@keyframes rainbow-background-color {
    0% {
        background-color: red;
    }

    14% {
        background-color: orange;
    }

    28% {
        background-color: yellow;
    }

    42% {
        background-color: green;
    }

    57% {
        background-color: blue;
    }

    71% {
        background-color: indigo;
    }

    85% {
        background-color: violet;
    }

    100% {
        background-color: red;
    }
}

.rainbow-chevron {
    animation: rainbow-color 2s linear infinite;
}

.rainbow-background {
    animation: rainbow-background-color 2s linear infinite;
}

.timer {
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/*.timeRegistration {
    font-family: "Inter", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

    .timeRegistration .btn {
        font-weight: 500;
    }

    .timeRegistration .btn-primary, .projects .btn-primary {
        font-weight: 500;
        font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
    }

    .timeRegistration .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled):hover, .projects .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled):hover {
        background-color: #ffffff;
    }

    .timeRegistration .btn-secondary, .projects .btn-secondary {
        box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
        font-weight: 500;
        font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
    }

    .timeRegistration .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active, .projects .btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active {
        box-shadow: 0px 0px 0px 1px #CCD1D9 inset;
        font-weight: 500;
        font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
    }*/

.g-0 {
    margin-left: 0;
    margin-right: 0;
}

.g-1 {
    margin-left: -.25rem;
    margin-right: -.25rem;
}

.g-2 {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.g-3 {
    margin-left: -1rem;
    margin-right: -1rem;
}

.g-0 > .col, .g-0 > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.g-1 > .col, .g-1 > [class*=col-] {
    padding-right: .25rem;
    padding-left: .25rem;
}

.g-2 > .col, .g-2 > [class*=col-] {
    padding-right: .5rem;
    padding-left: .5rem;
}

.g-3 > .col, .g-3 > [class*=col-] {
    padding-right: 1rem;
    padding-left: 1rem;
}



/*ADMIN*/
.visible-tab a.navlink:has(> span.tabNameAdmin) {
    font-size: 12;
    padding: 12px;
}

@media (max-width: 767px) {
    .tabNameAdmin {
        display: inline;
    }
}

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

    .active .tabNameAdmin {
        display: inline;
    }
}

@media (min-width: 1800px) {
    .tabNameAdmin {
        display: inline;
    }

    .active .tabNameAdmin {
        display: inline;
    }
}

/*Temp css*/
.btn-secondary.temp-outline-light {
    box-shadow: none;
    border: 1px solid #ced4da;
}

/*Button Reset*/

.ButtonReset {
    border: none;
    padding: 0;
    background: none;
}

.ButtonBorderRadius15px {
    border-radius: 15px;
}

/*KYC ITS ME LIKE BUTTONS*/

.KYCModalButton {
    border-radius: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px;
    width: 269px;
    height: 60px;
}

.KYCImageForButton {
    max-height: 40px;
}

/* Top headers */

@media (max-width: 767px) {
    .upgradeNow {
        font-size: 80%
    }
}

@media (max-width: 768px) {
    table.text-wrap thead tr {
        white-space: normal !important;
    }

    table[data-form="#gridform"] th.mobile-fixed-100 {
        min-width: 100px
    }

    table[data-form="#gridform"] th.mobile-fixed-200 {
        min-width: 200px
    }

    table[data-form="#gridform"] th.mobile-fixed-300 {
        min-width: 300px
    }
}
.pointer {
    cursor: pointer;
}

.currencyValue[data-currency='AED']:not(.currencyCode)::before { content: 'DH'; }.currencyValue[data-currency='AED']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='EUR']:not(.currencyCode)::before { content: '€'; }.currencyValue[data-currency='EUR']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='AUD']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='AUD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='BGN']:not(.currencyCode)::before { content: 'лв'; }.currencyValue[data-currency='BGN']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='USD']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='USD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='BRL']:not(.currencyCode)::before { content: 'R$'; }.currencyValue[data-currency='BRL']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='CAD']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='CAD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='CHF']:not(.currencyCode)::before { content: 'Fr\.'; }.currencyValue[data-currency='CHF']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='CZK']:not(.currencyCode)::before { content: 'Kč'; }.currencyValue[data-currency='CZK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='DKK']:not(.currencyCode)::before { content: 'DKK'; }.currencyValue[data-currency='DKK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='GBP']:not(.currencyCode)::before { content: '£'; }.currencyValue[data-currency='GBP']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='GEL']:not(.currencyCode)::before { content: '₾‎'; }.currencyValue[data-currency='GEL']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='HKD']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='HKD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='HRK']:not(.currencyCode)::before { content: 'kn'; }.currencyValue[data-currency='HRK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='HUF']:not(.currencyCode)::before { content: 'Ft'; }.currencyValue[data-currency='HUF']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='ISK']:not(.currencyCode)::before { content: 'ISK'; }.currencyValue[data-currency='ISK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='JPY']:not(.currencyCode)::before { content: '¥'; }.currencyValue[data-currency='JPY']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='CHF']:not(.currencyCode)::before { content: 'Fr'; }.currencyValue[data-currency='CHF']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='MDL']:not(.currencyCode)::before { content: 'lei'; }.currencyValue[data-currency='MDL']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='MXN']:not(.currencyCode)::before { content: 'MEX$'; }.currencyValue[data-currency='MXN']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='MYR']:not(.currencyCode)::before { content: 'RM'; }.currencyValue[data-currency='MYR']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='NOK']:not(.currencyCode)::before { content: 'NOK'; }.currencyValue[data-currency='NOK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='NZD']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='NZD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='PLN']:not(.currencyCode)::before { content: 'zł'; }.currencyValue[data-currency='PLN']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='RON']:not(.currencyCode)::before { content: 'lei'; }.currencyValue[data-currency='RON']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='RSD']:not(.currencyCode)::before { content: 'дин‎'; }.currencyValue[data-currency='RSD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='SEK']:not(.currencyCode)::before { content: 'SEK'; }.currencyValue[data-currency='SEK']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='SGP']:not(.currencyCode)::before { content: '$'; }.currencyValue[data-currency='SGP']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='TBH']:not(.currencyCode)::before { content: '฿'; }.currencyValue[data-currency='TBH']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='TWD']:not(.currencyCode)::before { content: 'NT$'; }.currencyValue[data-currency='TWD']:not(.currencyCode)::after { content: none; }
.currencyValue[data-currency='ZAR']:not(.currencyCode)::before { content: 'R'; }.currencyValue[data-currency='ZAR']:not(.currencyCode)::after { content: none; }