body {
    /*    background: rgba(33, 33, 33, 0.9);  browsers */
    background: #d3d3d3;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
}

i#headertext, p#headertext , p#headertextweather, i.fab {
    color: white;
}



#graph {
    width: 99.5%;
}

h4{
    margin-bottom: 0 !important;
    cursor: default;
}

h6{
    font-size: 1rem;
}

body#introchristmas {
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/kerstachtergrond.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body#introNYE {
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/NYE%20achtergrond.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body#introEaster{
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/eatser%20achtergrond.jpeg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body#introValentine{
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/valentijn%20achtergrond.jpeg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body#introSummer{
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/bigstock-Business-woman-working-with-co-93309314.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body#intro{
    background: url("https://promidata-design.s3.eu-central-1.amazonaws.com/overview/photo-1483058712412-4245e9b90334.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}


.header{
    background: rgba(33, 33, 33, 0.7);
}


.content {
    margin: auto;
    width: 70%;
    padding-top: 1%;
    padding-bottom: 50px;
    /*    height: 100%;*/
}

.bg-dark {
    background-color: rgba(33, 33, 33, 1) !important;
}

@media only screen and (max-width: 720px) {
    .hero-image {
        height: 35%;
    }
    .row.adjusted {
        width: 100%;
        margin: 0 auto;
    }
    /* stijlregels voor schermen > 320px en ≤ 720px breed */

}
@media only screen and (max-width: 720px) and (max-height: 680px) {
    .hero-image {
        height: 40%;
    }
    .row.adjusted {
        width: 100%;
        margin: 0 auto;
    }
    /* stijlregels voor schermen > 320px en ≤ 720px breed */

}

@media only screen and (max-width:450px) {
    .hero-image {
        height: 30%;
    }
    .row.adjusted {
        width: 100%;
        margin: 0 auto;
    }
    div.col-lg-5{
        margin-left: -40px;
    }
    h1 {
        font-size: xx-large;
    }
    p {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    /* stijlregels voor schermen ≤ 320px breed */

}

@media only screen and (max-width:380px) and (max-height:670px) {
    .hero-image {
        height: 33%;
    }
    .row.adjusted {
        width: 100%;
        margin: 0 auto;
    }
    div.col-lg-5{
        margin-left: -40px;
    }
    h1 {
        font-size: x-large;
    }
    p {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
    .fa-lg{
        font-size: 0.875em;
    }
    /* stijlregels voor schermen ≤ 320px breed */

}

@media only screen and (max-width:360px) and (max-height:600px) {
    .hero-image {
        height: 40%;
    }
    .row.adjusted {
        width: 100%;
        margin: 0 auto;
    }
    div.col-lg-5{
        margin-left: -40px;
    }
    h1 {
        font-size: x-large;
    }
    p {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 16px;
    }
    .fa-lg{
        font-size: 0.875em;
    }

    /* stijlregels voor schermen ≤ 320px breed */

}

@media only screen and (min-width:1174px) and (max-width:1256px) {

    h1 {
        font-size: x-large;
    }
    p#headertextweather{
        margin-left: -75px !important;
    }

    select#webmenu{
        width: 115px !important;
    }
    /* stijlregels voor schermen ≤ 320px breed */

}

@media only screen and (min-width:1256px) and (max-width:1460px) {

    h1 {
        font-size: x-large;
    }
    p#headertextweather{
        margin-left: -50px !important;
    }
    select#webmenu{
        width: 120px !important;
    }

    /* stijlregels voor schermen ≤ 320px breed */

}



.banner {
    background: rgba(0, 0, 0, 0.4);
    padding: 3% 0 3% 8%;
    width: 100%;
    height: 100%;
}

.footer {
    bottom:0;
    width:100%;
    height:30px;
    background: black;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0.9;
    filter: alpha(opacity=90);
    color: white;
    font-size: 14px;
    position: fixed;
    z-index: 1000000;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 100; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #333333; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 10px 0 32px;
    text-decoration: none;
    font-size: 14px;
    color: #c9c9c9;
    display: block;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.sidenav i {
    text-decoration: none;
    font-size: 15px;
    color: #c9c9c9;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav i:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    -webkit-transition: margin-left .5s;
    -o-transition: margin-left .5s;
    transition: margin-left .5s;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a, .sidenav i {font-size: 14px;}
}

ul.navbar-nav.nav-flex-icons {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    margin-top: -6%;
    margin-right: 70px;

}

ul {
    list-style: none;
}

a.nav-link {
    /*    color: white;*/
    padding-left: 2px;
    padding-right: 5px;
    margin-top: -30%;
}

i.nav-link {
    /*    color: white;*/
    margin-top: -30%;
}

.card {
    margin: 25px 1% 1% 1%;
    width: 98%;
}

.card#indexCards{
    min-height: 99%;
}

.card-link {
    padding-top: 10px;
}

input {
    width: 100%;
}

/*
table.table-sm td {
    width: 25%;
}
*/

div.container {
    padding-top: 5%;
}

body.selectProfile {
    margin-bottom: 20%;
}
div.selectProfile.home {
    background-color: white;
    padding: 60px 75px 60px 75px;
    width: 100%;
}
div.jumbotron.index {
    padding: 50px 65px 50px 65px;
    width: 40%;
    margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

a#logout {
    position: absolute;
    bottom: 5%;
    left: 0;
}

a#settings {
    position: absolute;
    bottom: 13%;
    left: 0;
}

a#support {
    position: absolute;
    bottom: 17%;
    left: 0;
}

a#videotutorials {
    position: absolute;
    bottom: 21%;
    left: 0;
}

a#profileselect {
    position: absolute;
    bottom: 9%;
    left: 0;
}

h3#editH3 {
    color: white;
    padding-left: 10px;
    width: 200px;
    margin-bottom: -45px;
}

h3#h3Deselect {
    color: white;
}

input#csvKey {
    border: 0;
    cursor: default;
}

input#signin.btn.btn-elegant.rounded-pill{
    width: 150px;
}

canvas#myChart.chartjs-render-monitor {
    float: left;
}

canvas#radarChart.chartjs-render-monitor {
    float: left;
}

div.col-md-4 {
    text-align: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

/*
.pagination .page-item .page-link {
    color: white;
}
*/

#bannerHR {
    border: none;
    height: 3px;
    color: black;
    background-color: black;
    margin: 0 0 0 0;
}

.list-group-item {
    background-color: #212121;
    /*    color: white;*/
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    border: 0;
    width: 100%;
}

h6.list-group-item-heading.count {
    padding-left: 5px;
}


/* Visitor */
a.visitor i,.visitor h6.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h6.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h6.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h6.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }

div.card-body.center {
    padding-top: 20%;
}

div.card-body.socials {
    padding: 0 !important;
}

div.table-responsive{
    padding: 0 10px 0 10px;
    table-layout: auto;
    width: 100%;
}

div.list-group.parent {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr 0 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
}

div.list-group.parent > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

div.list-group.parent > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

div.list-group.parent > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

div.list-group.parent > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.div1 { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1 / 1 / 2 / 2; }
.div2 { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 2 / 3; }
.div3 { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 2 / 1 / 3 / 2; }
.div4 { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 2 / 2 / 3 / 3; }

input#submit {
    width: 20%;
    float: right;
    margin-bottom: 5px;

}

input#defaultCheck1.form-check-input.deselect {
    width: 20px !important;
}

td.deselectTable {
    padding: 10px 1px 1px 1px !important;

}

table.table.deselect.table-bordered.table-light.table-striped.table-hover {
    width: 99%;
    margin: auto auto auto -0.05px;
}

div#deselect {
    width: 100%;
    margin: auto;
}

div#deselectSmall {
    max-width: 90%;
    margin-left: 15px;
}

div#upperDiv {
    width: 90%;
}

div#deselector {
    width: 100%;
    margin: auto;
    /*    max-height: 40%;*/
}

.upload{
    color: #f19321;
}

.card-body.deselect {
    text-align: left;
}

.card-body.Tabs {
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
}

li.nav-item {
    float: right;
}


li.nav-item.weather {
    float: left;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding: 5px;
}

#slightlyright {
    margin-left: 1px;
}

#socials {
    margin-left: -5px;
    margin-right: -5px;
}

#socialsDiv {
    margin-left: -2%;
}

.row.adjusted {
    width: 95%;
    margin: 0 auto;
}

input.btn.btn-outline-success.deselect {
    width: 99%;
    margin-left: -0.5px;
}

/*
#webshopProfile {
    background: rgba(60,60,60,0.8);
    border-color: rgba(60,60,60,0.8);
}
*/

#webshopDropdownTD {
    text-align: right;
}

#tableDropdownWSP {
    margin-top: -45px;
    float: right;

}


#smallBanner {
    color: white;
}

input#deleteSupplier{
    width: 25px;
}

p#deleteSupplierText{
    color: black;
    margin: 0 0 0 30px;
}

td#deleteSupplierTd{
    margin: 10px;
}

#btnRight{
    float:right;
    margin-right: 12px;
}

div#editSuppAndPG{
    margin: 0 15px 0 15px;
}

.table-responsive{
    width: 100%;
}

/* Internet explorer only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .bootstrap-table .fixed-table-container .fixed-table-body{
        overflow-x: auto;
        overflow-y: auto;
        height: 70%;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    .bootstrap-table .fixed-table-container .fixed-table-body{
        overflow-x: auto;
        overflow-y: auto;
        height: auto;
    }
}

table.table.table-striped.table-bordered.table-sm.table-light.editMargesTable.table-hover p {
    color: rgba(60,60,60);
}

table.table.table-striped.table-bordered.table-sm.table-light.editMargesTable.table-hover i {
    color: rgba(60,60,60);
}
td#FPIFMarges {
    text-align-last: center;
}

div#editMargesTh {
    white-space: pre-line;
}

#miniTextMarges{
    float: left;
    margin-left: 12px;
    color: #3C4858;
}

#dropDownIPS, #dropDownPPS{
    width: 100%;
}

i.fas.fa-times{
    color: darkgray !important;
}

i.fas.fa-check{
    color: #df691a !important;
}

td#supplierLastImportdate {
    padding: 0 0 0 12px !important;
}

button.btn.btn-secondary.dropdown-toggle{
    padding: 5px 10px 5px 10px;
}

.float-left.pagination-detail{
    font-size: 12px;
}

span.btn-group.dropdown.dropup{
    margin-top: 1px;
}

div#accordion1{
    text-align-last: left;
    padding-left: 2%;
}

.panel-default {
    border-radius: 0;
    border: none;
    background: none;
    margin-bottom: 0;
}
.panel-default > .panel-heading {
    border: none;
    background: none;
    padding: 0;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
    border: none;
    padding: 0 0 0 32px;
}
.panel-default h5 {
    font-weight: 300;
    font-size:  16px;
    padding: 0;
    margin: 0 0 5px;
}
.panel-group .panel+.panel {
    margin-top: 15px;
}

i#orange.fa-chevron-circle-down{
    color: #df691a;
}i#orange.fa-chevron-circle-down::before{
     color: #df691a;
 }
/*
.panel-default .accordion-toggle:before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: #df691a no-repeat 6px 10px;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  top: 4px;
}
*/

.panel-default .panel-title:hover .collapsed:before {
    background-color: #B25414;
}
.panel-default .accordion-toggle {
    color: #a5a5a5;
}
.panel-default .accordion-toggle:focus,
.panel-default .accordion-toggle:hover,
.panel-default .accordion-toggle:active {
    color: #9a9a9a;
    text-decoration: none;
}
.panel-default .collapsed {
    color: #a5a5a5 !important;
}

td#adminTable{
    color: #9a9a9a !important;
}

p#textBlock {
    text-align: left;
    padding-left: 2%;
}

.fa-play:before {
    margin-left: .3rem;
}

/* Steps */
.step {
    list-style: none;
    margin: 0;
}

.step-element {
    display: flex;
    padding: 1rem 0;
}

.step-number {
    position: relative;
    width: 7rem;
    flex-shrink: 0;
    text-align: center;
}

.step-number .number {
    color: #f5f6f7;
    background-color: #F19521;
    font-size: 1.5rem;
}

.table.table-hover tbody tr:hover {
    background-color: #dcdcdc !important;
}
.step-number .number {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    border-radius: 10rem;
}

.step-number::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48px;
    bottom: -2rem;
    margin-left: -1px;
    border-left: 2px dashed #eaeff4;
}

.step-number.indexTimeline::before {
    content: "";
    position: unset;
}


.step .step-element:last-child .step-number::before {
    bottom: 1rem;
}

a#varianten-tab, a#mainproduct-tab, a#imprints-tab {
    padding-left: 22px;
    padding-right: 22px;
    margin-top: 0;
}
/*

#editProductData{
    width: 75%;
}
*/


table#editProductDataTable td{
    width: 0 !important;
    padding: 5px;
}

hr#prodData{
    background-color: white;
}

div#mediaGallery{
    max-width: 250px !important;
}


.containers{
    margin: 0 auto;
    width: 50%;
}

.contents{
    padding: 5px;
    margin: 0 auto;
}
.contents span{
    width: 250px;
}

.dz-message{
    text-align: center;
    font-size: 28px;
}

.card-header.card-header-success#pieChart{
    background: linear-gradient(60deg, #fff, #fff);
    border: solid 5px #43a047;
}

.card-header.card-header-danger#lineChart{
    background: linear-gradient(60deg, #fff, #fff);
    border: solid 5px #E8413E;
}

.card-header.card-header-warning#barChart{
    background: linear-gradient(60deg, #fff, #fff);
    border: solid 5px #FB8E02;
}

.pagination .page-item .page-link {
    color: rgb(30,30,30);
}



.nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:focus {
    color: #000 !important;
}

label {
    color: #6d6d6d;
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0 !important;
}

.table-sm#createDistributor{
    width: 100%;
}
.table-sm#createDistributor td{
    padding: 1px !important;
    width: 20%;
}

.table-sm#createDistributor input{
    width: 100%;
}

.table-md#commonInformationAddresses td{
    padding: 1px !important;
    width: 15%;
}
.table-md#commonInformationAddresses{
    width: 80% !important;
}

.table-sm#commonInformationAddresses input{
    width: 100%;
}


input#first_chk_bx, input#second_chk_bx, input#checkboxesCreateDist{
    width: 6% !important;
}

.btn.btn-block.btn-outline-primary, .text-primary{
    color: #9c27b0 !important;
    border-color: #9c27b0 !important;
}
a#btnRight.btn.btn-outline-primary{
    color: #9c27b0 !important;
    border-color: #9c27b0 !important;
}

div#addDist{
    float: right;
}

div#adddist a{
    color: #333333;
}

table#suppOverview td, table#distOverview td, table#userOverview td, table#supplierStatsOverview td{
    padding: 0.5px 1px 2px 10px;
}

table#supplierStatsOverview td{
    text-align: center;
}

table#supplierStatsOverview td#left{
    text-align: left;
    min-width: 150px;
}

table#distOverview td{
    max-width: 350px;
}

table#distOverview, td#deleteSupp{
    text-align: center;
    padding-left: 1px;
    text-align: -webkit-center;
}

table#distOverview, td#editSupp{
    text-align: center;
    text-align: -webkit-center;
    min-width: 55px !important;
}
td#editSuppChange{
    width: 55px;
}

select#converterType{
    width: 40% !important;
    text-align-last: center !important;
}

td#editUser, td#deleteUser{
    text-align: center;
    text-align: -webkit-center;
    width: 2%;
}

.upload{
    color: #6c757d!important;
    font-weight: 300;
    display: block;
    text-align: center;
}

.uploadFailed{
    color: red;
    font-weight: 300;
    display: block;
    text-align: center;
}

div.custom-file{
    width: 80%;
    text-align: center;
    height: 100%;
    padding-bottom: 10px;
}

.download {
    font-size: 14px;
    color: #0099cc !important;
    display: block;
    font-weight: 400;
    text-align: center;
}

.download:visited{
    font-size: 14px;
    color: #0099cc !important;
    display: block;
    font-weight: 400;
    text-align: center;
}
.downloadP{
    margin-top: 8px;
}

.custom-file-label.rounded-pill {
    border-radius: 50rem;
}

.custom-file-label.rounded-pill::after {
    border-radius: 0 50rem 50rem 0;
}

.custom-file-label {
    border: 1px solid #d2d2d2 !important;
}

.hide {
    display: none;
    margin-top: -33px;
    z-index: 100;
    position: absolute;
    width: 70%;
}

.hide:hover {
    display: block;
}

.myDIV:hover + .hide {
    display: block;
}

td.notificationsMini{
    min-width: 25px;
    padding:0 5px 0 5px;
    color: #6c757d!important;

}

td.notificationsMini i{
    min-width: 25px;
    padding:0 5px 0 5px;
    color: #6c757d!important;

}

.md-stepper-horizontal {
    display:table;
    width:100%;
    margin:0 auto;
}
.md-stepper-horizontal .md-step {
    display:table-cell;
    position:relative;
    padding:24px;
    width: 15%;
}
/*.md-stepper-horizontal .md-step:hover,*/
.md-stepper-horizontal .md-step:active {
    background-color:rgba(0,0,0,0.04);
}
.md-stepper-horizontal .md-step:active {
    border-radius: 15% / 75%;
}
.md-stepper-horizontal .md-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.md-stepper-horizontal .md-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.md-stepper-horizontal .md-step-circle {
    background-color:#757575;
}
.md-stepper-horizontal .md-step:first-child .md-step-bar-left,
.md-stepper-horizontal .md-step:last-child .md-step-bar-right {
    display:none;
}
.md-stepper-horizontal .md-step .md-step-circle {
    width:30px;
    height:30px;
    margin:0 auto;
    background-color:#999999;
    border-radius: 50%;
    text-align: center;
    line-height:30px;
    font-size: 16px;
    font-weight: 600;
    color:#FFFFFF;
}
.md-step-hover:hover{
    background-color:rgba(0,0,0,0.04);
}

.md-stepper-horizontal .md-step.active .md-step-circle {
    background-color: #F19521;
}

.md-stepper-horizontal .md-step.done .md-step-circle:before {
    font-family: 'FontAwesome', serif;
    font-weight:100;
    content: "\f00c";
}
.md-stepper-horizontal .md-step.done .md-step-circle *,
.md-stepper-horizontal .md-step.editable .md-step-circle * {
    display:none;
}
.md-stepper-horizontal .md-step.editable .md-step-circle {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.md-stepper-horizontal .md-step.editable .md-step-circle:before {
    font-family: 'FontAwesome', serif;
    font-weight:100;
    content: "\f040";
}
.md-stepper-horizontal .md-step .md-step-title {
    margin-top:16px;
    font-size:16px;
    font-weight:inherit;
}
.md-stepper-horizontal .md-step .md-step-title,
.md-stepper-horizontal .md-step .md-step-optional {
    text-align: center;
    color:rgba(0,0,0,.26);
}
.md-stepper-horizontal .md-step.active .md-step-title {
    font-weight: inherit;
    color:rgba(0,0,0,.87);
}
.md-stepper-horizontal .md-step.active.done .md-step-title,
.md-stepper-horizontal .md-step.active.editable .md-step-title {
    font-weight:inherit;
}
.md-stepper-horizontal .md-step .md-step-optional {
    font-size:12px;
}
.md-stepper-horizontal .md-step.active .md-step-optional {
    color:rgba(0,0,0,.54);
}
.md-stepper-horizontal .md-step .md-step-bar-left,
.md-stepper-horizontal .md-step .md-step-bar-right {
    position:absolute;
    top:36px;
    height:1px;
    border-top:1px solid #DDDDDD;
}
.md-stepper-horizontal .md-step .md-step-bar-right {
    right:0;
    left:50%;
    margin-left:20px;
}
.md-stepper-horizontal .md-step .md-step-bar-left {
    left:0;
    right:50%;
    margin-right:20px;
}

select#selectSupplierInWebshop{
    margin-left: 10px;
}

#editMargesFromSupplierTable select{
    width: 100%;
}

li.step-element{
    min-height: 20%;
}

input:invalid {
    border: 2px solid red;
}

.flag{
    width: 40px !important;
}

ul.navbar-nav .dropdown-content {
    display: none;
    position: absolute;
}
ul.navbar-nav .dropdown-content a {
    color: black;
}
ul.navbar-nav .dropdown:hover > .dropdown-content {
    display: block;
}

/*
.dropdown {
    margin-left: 70%;
}
*/

#webmenu{
    color: white;
    background-color: rgba(33, 33, 33, 0.7) !important;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 30px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #999999; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

#submitDataControlImprint, #submitUploadDirectImprint, #submitTestOnlyImprint{
    padding: 0 !important;
    height: 44px;
    white-space: normal;
}

.dropbtn {
    background-color: #11b7cc;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtnprimary {
    background-color: #9c27b0;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtnwarning {
    background-color: #fe9d18;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #0D92A3;
}

#modelsOfSuppliers {
    box-sizing: border-box;
    /*background-image: url('searchicon.png');*/
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 8px 20px 8px 20px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#modelsOfSuppliers:focus {outline: 3px solid #ddd;}

#skusOfSuppliers {
    box-sizing: border-box;
    /*background-image: url('searchicon.png');*/
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 8px 20px 8px 20px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#skusOfSuppliers:focus {outline: 3px solid #ddd;}

.dropdownModelsSuppliers {
    position: relative;
    display: inline-block;
}

.dropdownModelsSuppliers-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 165px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 10;
    max-height: 250px;
}

.dropdownModelsSuppliers-content a {
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
}

.dropdownModelsSuppliers a:hover {background-color: #ddd;}

.show {display: block;}

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 7px;
    z-index: 100;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    text-align-last: center;
}

.close{
    color: red !important;
    /*    background-color: red;*/
    opacity: 80;
    text-shadow: 0 0 0 #000;
}

span#statisticsLingo
{-moz-border-radius: 20px;
    border-radius: 20px;
    color:white;
    padding: 10px 15px 10px 15px;
    font-size:14px;
}

table#tableStatisticsPage
{
    float: left;
    display: inline-block;
}

table#tableStatisticsPage td{
    height: 50px;
    width: 50px;
    text-align: -webkit-center;
}

table#tableStatisticsPage2
{
    float: left;
    display: inline-block;
}

table#tableStatisticsPage2 td{
    height: 50px;
    width: 50px;
    text-align: -webkit-center;
}

table#tableStatisticsPage2 td#left{
    height: 50px;
    min-width: 300px;
    text-align: -webkit-center;
}

table#tableStatisticsPage2 th#left{
    height: 50px;
    min-width: 300px;
    text-align: -webkit-center;
}

table#tableStatisticsPage2 th{
    height: 50px;
    width: 50px;
    text-align: -webkit-center;
}

.div1stats {
    float:left;
    clear:left;
}

.div2stats {
    margin-left:10px;
    display:block;
    float:left;
    /*  clear:left;*/
}

.div3stats {
    margin-top:10px;
    display:block;
    float:left;
    clear:left;
}

table#tableCalculatorPage
{
    float: left;
    display: inline-block;
    width: auto;
    min-width: 0;
}
table#tableCalculatorPageText
{
    float: left;
    display: inline-block;
    width: auto;
    min-width: 0;
}

table#tableCalculatorPage td{
    height: 50px;
    width: 100px;
    text-align: -webkit-center;
}

table#tableCalculatorPageText td{
    height: 150px;
    width: 150px;
    text-align: -webkit-left;
}

table#tableCalculatorPageMini
{
    float: left;
    display: inline-block;
    width: 100%;
    min-width: 0;
}
table#tableCalculatorPageMiniText
{
    float: left;
    display: inline-block;
    width: 100%;
    min-width: 0;
}

table#tableCalculatorPageMini td{
    height: 50px;
    width: 100%;
    text-align: -webkit-left;
}

table#tableCalculatorPageMiniText td{
    height: 150px;
    width: 100%;
    text-align: -webkit-left;
}

input.miniPriceCalc{
    min-width: 100px;
    width: 100%;
}

div#margesCalc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3d3d3;
    padding: 8px;
    width: 98%;
    margin: 10px;
}

.box-minmax{
    margin-top: 10px;
    width: 80%;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    color: #11b7cc;
    /*
      span:first-child{
        margin-left: 10px;
      }
    */
}
.range-productMarge {
    margin-top: 30vh;

}
.rs-range {
    margin-top: 15px;
    width: 90%;
    -webkit-appearance: none;
    border: 1px solid #11b7cc;
    margin-left: 5%;
    /*
        background-color: orange;
        background: -webkit-linear-gradient(to right, #f39200 0%, #333333 100%) no-repeat;
        background: -o-linear-gradient(to right, #f39200 0%, #333333 100%) no-repeat;
        background: linear-gradient(to right, #f39200 0%, #333333 100%) no-repeat;
    */
}
.rs-label {
    position: relative;
    transform-origin: center center;
    display: block;
    width: 60px;
    height: 60px;
    background: transparent;
    border-radius: 50%;
    /*line-height: 30px;*/
    text-align: center;
    /*font-weight: bold;*/
    padding-top: 16px;
    box-sizing: border-box;
    border: 2px solid #11b7cc;
    margin-left: 20px;
    /*left: attr(value);*/
    color: #11b7cc;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 22px;
    /*&::after {*/
    /*    content: "kg";*/
    /*    display: block;*/
    /*    font-size: 20px;*/
    /*    letter-spacing: 0.07em;*/
    /*    margin-top: -2px;*/
    /*}  */
}

.range-slider{
    width: 90%;
}

.swal2-overflow {
    overflow-x: visible;
    overflow-y: visible;
}

.fixed-table-body {
    height: auto !important;
}

.newPrice{
    border: 5px solid #9932b1;
}

#indexAdmin td {
    padding: 0 0 0 5px;
    max-width: 200px;
}

.nicEdit-main{
    border: 1px solid #666666;
}

td#rightAligned{
    text-align: right;
    -webkit-text-align: right;
    padding-right: 5px;
}

tr#backgroundColor{
    background-color: rgba(255,0,0,0.1) !important;
}

img.img-thumbnail.big{
    width: 100%;
    height: auto;
    margin: 0 0 0 1%;
    padding: 5px 5px 5px 5px;
}

div#slideshow{
    text-align: center;
    text-align: -webkit-center;
    width: 90%;
    height: 200px;
}

.thumbnailSpotlight{
    width: 300px;
    height: 300px;
    margin: 3px 3px 3px 3px;
    border: 1px solid #dee2e6;
    float: left;
    display: flex;
    align-items: center;
}
.media-left{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.mediaMessage{
    display: block;
    align-items: center;
}

.modal-dialog.modal-xl{
    max-width: 65%;
}

.img-fluid {
    max-width: 90%;
    height: auto !important;
    max-height: 230px !important;
}

.img-fluidProd {
    max-width: 80%;
    max-height: 130px !important;
}

div#goToMyWebshop, div#goToProSourc, div#goToMyWebshopURLBackend{
    height: 84%;
}

div#cloud, div#cloudAll, div#fullHeigthRow{
    height: 92%;
}
div#messageCenterDiv{
    height: 92%;
}

input#copyDataToNL, input#copyDataToDE, input#copyDataToEN, input#copyDataToFR
{
    margin-left: -48%;
}

div#langSelect{
    margin-top: -3px;
}

.table-sm#registerSupplier td{
    padding: 1px !important;
    width: 20%;
}

.table-sm#registerSupplier input, .table-sm#registerSupplier select{
    width: 50%;
}

td#marketingTextWidth{
    width: 200% !important;
}
/*
td#marketingTextWidth{
    width: 200% !important;
}
td#marketingTextWidth p{
    width: 200% !important;
}
td#marketingTextWidthFullInfo p{
    width: 200% !important;
}
*/

.hidden{
    display : none;
}
.hiddentwo{
    display : none;
}

.ukAndIrelandOnImage {
    position: absolute;
    bottom: 64%;
    left: 31%;
    color: white;
    height: 35px;
    width: 35px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    padding-top: 6px;
}

.dachOnImage {
    position: absolute;
    top: 60%;
    left: 60%;
    color: white;
    height: 35px;
    width: 35px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    padding-top: 6px;
}

.beneluxOnImage {
    position: absolute;
    top: 48%;
    right: 46%;
    color: white;
    height: 35px;
    width: 35px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    padding-top: 6px;
}

.geoMap {
    position: relative;
    text-align: center;
    color: white;

}

table#keepInTouch tr {
    cursor: pointer;
}

table th {
    cursor: default;
}

#keepInTouch td {
    padding: 0 0 0 5px;
    max-width: 200px;
}

button#navigationItem{
    padding: 8px 10px 0 32px;
    text-decoration: none;
    font-size: 14px;
    color: #c9c9c9;
    display: block;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    background-color: #333;
    border: 0;
    font-weight: 300;
}

button#navigationItem:focus{
    border: 0;
    outline: 0;
}

#tableCalculatorPageMini td, input {
    cursor: default;
}

#editMargesFromSupplierTable td{
    cursor: default;
}

#createUser td, #createDistributor td, #indexAdmin td, #userOverview td, #keepInTouch td, #selectProfile td, #distOverview td, #registerSupplier td, #supplierStatsOverview td{
    cursor: default;
}

#editMargesFromSupplierTable input{
    cursor: text;
}

#createUser input, #createDistributor input, #registerSupplier input, #registerSupplier input{
    cursor: text;
}

#editMargesFromSupplierTable select, #createDistributor select, #registerSupplier select, #createUser select, #registerSupplier input[type='checkbox'], #createDistributor input[type='checkbox'] {
    cursor: pointer;
}

@media screen and (max-width: 1600px)
{
    div.jumbotron.index {
        padding: 50px 65px 50px 65px;
        width: 50%;
        margin: 0;
        position: absolute;
        top: 48%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 700px)
{
    div.jumbotron.index {
        padding: 20px;
        width: 90%;
        margin: 0;
        position: absolute;
        top: auto;
        left: auto;
        -ms-transform: none;
        -webkit-transform: inherit;
        transform: inherit;
    }

    div.selectProfile.home {
        background-color: white;
        padding: 20px;
        width: 100%;
    }

    #selectProfile td {
        padding: 1px;
        font-size: smaller;
    }

    .content{
        width: 95%;
    }

    .offset-2 {
        margin-left: 1%;
    }
}

@media screen and (min-height:900px){
    .sidenav a {
        font-size: 18px !important;
    }
    button#navigationItem{
        font-size: 18px !important;
    }
}

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #e6e6e6;
}

.distTableStatistics .fixed-table-toolbar
{
    transform: rotateX(180deg);
}

.snowflake {
    position: fixed;
    top: -20px;
    color: white;
    font-size: 1em;
    pointer-events: none;
    animation: fall linear infinite;
}

#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind the main content */
    pointer-events: none; /* Prevent interaction with snowflakes */
}

@keyframes fall {
    0% {
        transform: translateY(-10vh);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

.error {
    color: red;
    font-size: 0.9em;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}