body {
    font-size: 14px;
    background-color: #f1f1f1;
    color: #333;
    background-image: url(../images/cardboard-light.jpg);
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
}

html, body {
    height: 100%;
}

.box {
    background-color: #fff;
    margin-bottom: 24px;
    padding: 21px;
    display: inline-block;
    width: 100%;
    vertical-align: text-top;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.anchor {
    cursor: pointer;
    text-decoration: none;
}

input[type=text]:read-only {
    color: #a2a2a2;
}

.badge-primary {
    color: #0366d6;
}


.btn {
    border-style: none;
    text-transform: uppercase;
    border-radius: 0.25rem;
    letter-spacing: .75px;
    font-weight: bold;
}

.btn-primary {
    background-color: #3ba9e5;
}

    .btn-primary:disabled {
        background-color: #7DBFE5;
    }

    .btn-primary:focus {
        background-color: #3ba9e5;
    }

    .btn-primary:hover {
        background-color: #0094E5;
    }


.btn-success {
    background-color: #3eb78d;
}

    .btn-success:disabled {
        background-color: #3eb78d;
    }

    .btn-success:focus {
        background-color: #3eb78d;
    }

    .btn-success:hover {
        background-color: #00a068;
    }

.btn-danger {
    background-color: #ff5b5b;
}

    .btn-danger:focus {
        background-color: #ff5b5b;
    }

    .btn-danger:hover {
        background-color: #d43535;
    }

.btn-check:checked + .btn-primary {
    background-color: #3eb78d;
}

.btn-check + .btn-primary {
    background-color: #ff5b5b;
}

.btn-check:focus + .btn-primary {
    background-color: #3ba9e5;
}

.btn-check:checked.reverse + .btn-primary {
    background-color: #ff5b5b;
}

.btn-check.reverse + .btn-primary {
    background-color: #3eb78d;
}


.btn-ready {
    background-color: #1bab78;
}

    .btn-ready:focus {
        background-color: #1bab78;
    }

    .btn-ready:hover {
        background-color: #00744B;
    }

.avatar {
    border: 1px solid #d5d5d5;
    width: 150px;
    height: 150px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.details-icon {
    font-size: 75pt;
}

.warning {
    color: #ff5b5b;
}

/* Sticky footer styles
-------------------------------------------------- */
th {
    font-size: 11px;
    color: #333;
    padding: 0 14px 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.table-striped td {
    height: 50px;
    vertical-align: middle;
}


#contentarea {
    background-image: url('../../images/cardboard.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

h1 {
    font-size: 28px;
    color: #9a9a9a;
    font-weight: 100;
    margin-bottom: 11px;
}

h2 {
    font-size: 25px;
    margin-bottom: 11px;
    color: #9a9a9a;
}

h3 {
    font-size: 24px;
    margin-bottom: 9px;
    color: #9a9a9a;
}

    h3 .anchor {
        color: #9a9a9a;
    }

h4 {
    font-size: 20px;
    margin-bottom: 9px;
    color: #9a9a9a;
}

.detail {
    padding: 11px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

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

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.breadcrumb {
    font-size: 13pt;
}

.breadcrumb-item a {
    color: #3ba9e5;
    font-weight: bold;
    text-decoration: none;
}

.breadcrumb-item.active a {
    cursor: text;
}

.breadcrumb-item:not(.active) a {
    font-weight: normal;
}

.container {
    display: flex;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.header-menu-item {
    color: #6a6c6f !important;
    margin: 0 5px;
    font-size: 16px;
}

    .header-menu-item.active:after {
        display: block;
        content: "";
        background: linear-gradient(to right,#17a8e5,#17aa76) !important;
        height: 5px;
    }

    .header-menu-item:hover {
        color: #3dbbe2 !important;
        background: #fff !important;
    }

.pc-nav {
    position: relative;
    top: 12px;
}

.filter .form-label {
    font-size: 14px;
    color: #00a068;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.form-label-sm {
    font-size: 12px;
    color: #00a068;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 5px;
}

.filter select {
    border: 1px solid #d5d5d5;
    background-color: #f1f1f1;
    cursor: pointer
}

.filter input[type=text] {
    border: 1px solid #d5d5d5;
    background-color: #f1f1f1;
}

.filter input[type=number] {
    border: 1px solid #d5d5d5;
    background-color: #f1f1f1;
}

.filter input[type=date] {
    border: 1px solid #d5d5d5;
    background-color: #f1f1f1;
}

dt {
    color: #a2a2a2;
    text-transform: uppercase;
    font-size: 15px;
    text-align: right;
    font-weight: 300;
    margin-bottom: 8px;
}

dd {
    color: #000;
    font-size: 15px;
}

.break-spaces {
    white-space: break-spaces;
}

.pctab {
    border-right: 1px solid #ddd;
    padding: 11px 0px 11px 11px;
    height: 100%;
    width: 300px;
}

    .pctab button {
        font-size: 16px;
        color: #333;
        min-width: 160px;
        text-align: left;
    }

        .pctab button:hover {
            color: #333;
            background-color: #f1f1f1;
        }

        .pctab button.active {
            border-bottom-color: #ddd;
            border-top-color: #ddd;
            margin-right: -1px;
            border-right: 2px solid transparent;
            color: #3dbbe2 !important;
            background-color: #fdfeff !important;
        }

.pctabhor {
    border-bottom: 1px solid #ddd;
    padding: 11px 11px 0px 11px;
    height: 100%;
}

    .pctabhor button {
        font-size: 16px;
        color: #333;
        min-width: 160px;
        text-align: left;
    }

        .pctabhor button:hover {
            color: #333;
            background-color: #f1f1f1;
        }

        .pctabhor button.active {
            border-left-color: #ddd;
            border-right-color: #ddd;
            border-top-color: #ddd;
            margin-bottom: -1px;
            border-bottom: 2px solid transparent;
            color: #3dbbe2 !important;
            background-color: #fdfeff !important;
        }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
}

.nav-pills .nav-link {
    border: 1px solid #fff;
    cursor: pointer;
}

.nav-link {
    cursor: pointer;
}

.nopadding {
    padding: 0px;
}

.tab-content {
    padding: 21px;
    background-color: #fdfeff;
}

.tab-header {
    margin-bottom: 15px;
}

.edit {
    padding: 11px;
}

    .edit .flex {
        display: flex;
    }

    .edit > div > label {
        font-weight: 500;
        text-transform: uppercase;
        text-align-last: end;
    }

    .edit > div > div > label {
        font-weight: 500;
        text-transform: uppercase;
        text-align-last: end;
    }

    .edit select {
        border: 1px solid #d5d5d5;
        background-color: #f1f1f1;
        cursor: pointer
    }

    .edit input {
        border: 1px solid #d5d5d5;
        background-color: #f1f1f1;
    }

        .edit input:focus {
            background-color: #f1f1f1;
        }

        .edit input[type=checkbox]:focus {
            border-color: #3ba9e5;
        }

        .edit input[type=checkbox]:checked {
            background-color: #3ba9e5;
        }

    .edit .form-group {
        padding-bottom: 15px;
    }

.dashboardcode-bsmultiselect .form-control {
    background-color: #f1f1f1;
}

.dashboardcode-bsmultiselect ul.form-control.focus {
    background-color: #f1f1f1;
}

.dashboardcode-bsmultiselect .dropdown-menu {
}

.dashboardcode-bsmultiselect .badge {
    font-weight: 400;
    font-size: initial;
    border: 1px solid #d5d5d5;
    margin-right: 2px;
    margin-bottom: 2px;
}

    .dashboardcode-bsmultiselect .badge span {
        padding: 7px;
    }

    .dashboardcode-bsmultiselect .badge button {
        display: none;
    }


.edit textarea {
    border: 1px solid #d5d5d5;
    background-color: #f1f1f1;
    min-height: 100px;
}

    .edit textarea:focus {
        background-color: #f1f1f1;
    }

.edit p {
    font-weight: bold;
    text-transform: uppercase;
}

.ql-editor p {
    font-weight: normal;
    text-transform: initial;
    margin: revert;
}

.row.no-pad {
}

    .row.no-pad > * [class*='col-'] {
        padding-left: 0;
    }

    .row.no-pad > * [class*='w-25'] {
        padding-right: 0;
    }

    .row.no-pad > * [class*='w-50'] {
        padding-right: 0;
    }


.beheer-button {
    height: 40px;
    width: 400px;
    background-color: #009ee0;
    color: #fff;
    display: flex;
    margin: 10px;
    padding: 10px 100px;
    cursor: pointer;
}

    .beheer-button:hover .beheer-button-icon {
        font-size: 17px !important;
    }

.beheer-button-icon {
    font-size: 15px !important;
}

.beheer-button-text {
    text-align: center;
    width: 100%;
}

.beheer-button-header {
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 20px;
}


/**** Stepper ****/
.stepper {
    display: flex;
    margin: 100px;
    padding: 0;
    width: 60rem;
    list-style: none;
    position: relative;
}

    .stepper::before {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        content: "";
        width: calc(100% - 20px);
        background: #e7e7e7;
    }

.stepper__item {
    flex: 100%;
    padding: 20px 20px 20px 40px;
    background: repeating-linear-gradient(-65deg, #fff, #fff 20px, #fcfcfc 20px, #fcfcfc 40px);
    margin: 0 0 0 -19px;
    -webkit-clip-path: polygon(20px 50%, 0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}

    .stepper__item.current {
        background: #fff;
        font-weight: bold;
    }

    .stepper__item.complete {
        background: repeating-linear-gradient(-65deg, #fcfcfc, #fcfcfc 20px, #f4faf7 20px, #f4faf7 40px);
    }

    .stepper__item:first-child {
        padding: 20px;
        -webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
    }

    .stepper__item:last-child {
        -webkit-clip-path: polygon(20px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

.modal-dialog-packcompany {
    z-index: 900;
}

/*sticky table*/

.table th.fixedcolumn-start,
.table td.fixedcolumn-start {
    position: sticky;
    left: 0;
    color: #000;
}

    .table td.fixedcolumn-start * {
        color: #000;
    }

.table th.fixedcolumn-end,
.table td.fixedcolumn-end {
    position: sticky;
    right: 0;
    /*background-color: #3dbbe2;*/
    color: #000;
}

    .table td.fixedcolumn-end * {
        color: #000;
    }


.table td {
    /*white-space: nowrap;*/
}

.table tr.artikel-row td {
    background-color: #ffffff;
}


ul.oplagelist {
    list-style-type: none;
}

.modal-dialog {
    max-width: 1000px;
}

.modal-backdrop.alert {
    z-index: 1200;
}

.modal {
    z-index: 1050;
}


    .modal.alert {
        z-index: 1250;
    }

.table-hover tbody tr {
    cursor: pointer;
}

.modal-header-end {
    display: flex;
    padding-right: 0.75rem;
}

    .modal-header-end > * {
        margin: 0.25rem;
    }


.full-width {
    width: 100%;
}

.ignore-heigth {
    height: auto;
}

.edit-label label {
    display: contents;
}

.btn-excl .btn {
    font-size: 24px;
    height: 40px;
    padding-top: 0px;
}

.form-select:disabled {
    color: #d5d5d5;
    cursor: default;
}
.border-total {
    border-top: 2px double #333;
}

tfoot > * td {
    color: #333;
    font-weight: bold;
}

.right {
    text-align: right;
}

.link-button {
    width: 150px;
}

.table-header-fixed {
    overflow: scroll;
    height: 900px;
}

    .table-header-fixed thead tr:nth-child(1) th {
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

.validation-message
{
    color: red;
}

.no-margin {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.half-width {
    width: 50%;
}

.box-horizontal {
    background-color: #fff;
    margin-bottom: 24px;
    padding: 21px;
    width: 100%;
    vertical-align: text-top;
    height: 295px;
    overflow: overlay;
}

.MinHeigthOneRow{
    min-height: 100px;
}