html{
    background-image: url('../media/background.jpg')!important;
    height: 100%;
}

body {
    height: auto;
    /*height: 100%;*/
    background: transparent!important;
}

/* Body-Classes
 ******************************************************************************/

body.index{
    /*background-color: #4e4e4e!important;*/
    /*height: 100%;*/
}

body.index #searchContainer {
    margin-bottom: 0px;
}

body.index .resultContainer {
    margin-top: 10px;
}

body.shoppinglist-view #contentContainer {
    float: left;
}

/*body.index #indexHeader{*/
/*    padding: 10px 0px;*/
/*    text-align: center;*/
/*}*/

/*body.index #indexHeader h2{*/
/*    padding-left: 10px;*/
/*    font-size: 24px;*/
/*    text-transform: uppercase;*/
/*}*/

/*body.index nav{*/
/*    text-align: center;*/
/*}*/

body.login #contentContainer{
    padding-top: 50px;
}

/*body.search #searchIcon, body.cart #cartIcon, #topbar a.iconSelected{*/
/*    background-color: #008638;*/
/*}*/

body.search #searchIcon i{
    background-image: url('../media/icons/th-list-solid_white.svg');
}

body.search #reset{
    width: 32px;
}

body.search #reset i{
    width: 18px;
    margin-left: 1px;
    height: 21px;
}

body.search .listPrice p{
    padding-right: 10px;
}

body.search .resultContainer {
    margin-bottom: 0px;
}

body.cart #cartIcon i{
    background-image: url('../media/icons/shopping-cart-solid_white.svg');
}

body.cart .resultContainer{
    margin-bottom: 120px;

}

body.cart .amountWrap p{
    padding-right: 0px;
    padding-left: 3px;
}

body.cart .vkUnit{
    padding-left: 5px;
}

body.cart #priceSum{
    white-space: pre;
}

body.cart .cart-row > div > div:last-child{
    padding: 0px;
}

body.invoices .listFooter div:nth-child(even), body.invoices .listFooter div:nth-child(odd){
    padding: 0px;
}

body.orderpositions .unitprice p{
    padding: 0px;
}

body.deliverypositions .cart-row .singleWrap p{
    padding-left: 0px;
    padding-right: 0px;
}

body.deliverypositions .packagingWrap p{
    padding: 0px;
    padding-left: 1px;
}

body.deliverypositions .packagingWrap i{
    margin-top: 3px;
}

body.invoicepositions .resultContainer, body.orderpositions .resultContainer, body.deliverypositions .resultContainer, body.vacantpositions .resultContainer{
    margin-bottom: 0px;
}

body.sales-statistic .resultContainer{
    margin-bottom: 0px;
}

body.statistics #searchLink, body.invoices #searchLink, .submitButton {
    padding-top: 9px;
}

body.statistics #searchLink i, body.invoices #searchLink i, .submitButton i{
    width: 18px;
    height: 18px;
}

body.login .listFooter a{
    color: white!important;
}

body.login .listFooter a:first-child{
    margin-right: 10px;
}

body.legal #contentContainer{
    padding-top: 50px;
}

/*
 ******************************************************************************/

label, div, a, button, input, p, h1, h2, h3, h4, h5{
    font-family: 'Roboto Condensed', sans-serif;
}

.header{
    margin-bottom: 10px;
}

body.search .header{
    margin-bottom: 0px;
}

.header h2{
    margin-bottom: 0px;
}

#cartIcon i{
    width: 23px;
}

#cartHeader{
    padding: 10px;
    /*background-color: #62b32c;*/
    color: white;
}

#cartFooter{
    padding: 10px;
}

#topbar a.iconDeselected{
    background-color: white;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    /*padding: 70px 15px 20px;*/
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

#viewSelector {
    /*background: cadetblue;*/
    /*margin-bottom: 10px;*/
    padding: 5px 10px;

    background-color: white;
    margin-bottom: 0.5em;
    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;
    font-size: 14px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*flex-direction: row;*/

    /*margin-left: 0.9375rem;*/
    /*margin-right: 0.9375rem;*/
    /**/
    /*width: calc(100% - 1.875rem);*/
}

#viewSelector div {
    margin-left: 10px;
}

#viewSelector a {
    float: left;
    height: 32px;

    padding: 5px;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: white;
    color: black;
}

#viewSelector i {
    /*margin-left: 10px;*/
}

/* Content
 ******************************************************************************/

#contentContainer{
    padding-top: 58px;
}

#contentContainer a{
    color: black;
}

#offCanvas h2, #indexHeader h2{
    font-size: 24px;
    font-family: 'Roboto Condensed Bold', sans-serif;
    font-weight: bold;
    padding-left: 10px;
}

#contentContainer h4{
    /*background-color: #008638;*/
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 5px;
    font-size: 14px;
}

#deliveryInfo{
    display: none;
}

#pickupInfo{
    display: none;
}

.info{
    font-size: 14px;
    margin: 5px 0px;
    color: red;
}

/*.cc-compliance a{*/
/*    color: #008638!important;*/
/*}*/

.cc-link, .cc-banner{
    color: white!important;
}

.help-block{
    font-size: 14px;
    margin: 5px 0px;
    color: red;
}

#mapdiv {
    height: 350px;
}

#OpenLayers_Control_Attribution_7 {
    bottom: 5px;
}

#mapWrapper {
    max-width: 90%;
    margin: 0 auto;
}

.lights {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    /*float: right;*/
    /*margin-top: 5px;*/
    /*margin-right: 2px;*/
    position: absolute;
    left: 0px;
    top: 15px;
}

.lights-cartModal {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    float: left;
    margin-top: 3px;
}

.lights-detail {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    left: 0px;
    top: 5px;
}

.lights-red {
    background-color: red;
}

.lights-yellow {
    background-color: yellow;
}

.lights-green {
    background-color: #008638;
}

.lightPackageWrapper {
    padding-left: 15px;
    position: relative;
}

#cartModalStatusWrapper {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

@media (min-width: 640px) and (max-width: 732px) {
    .lights {
        width: 7px;
        height: 7px;
    }

    .lightPackageWrapper {
        padding-left: 10px;
    }

    .lightPackageWrapper p {
        padding-right: 0px!important;
    }

    .lightPackageWrapper i {
        width: 23px;
        height: 18px;
    }

    .cart-row .listPrice p {
        padding-left: 0px;
        padding-right: 6px!important;
    }
}

/* Nav
 ******************************************************************************/

nav ul{
    list-style-type: none;
    margin: 0px;
}

nav ul li{
    padding: 5px 0px;
}

nav h1, #offCanvas h2, nav h3, #navigationIndex h2{
    text-transform: uppercase;
    margin: 0px;
}

nav h3{
    font-size: 16px;
    font-family: 'Roboto Condensed Bold', sans-serif;
    font-weight: bold;
}

nav .subHeading{
    /*background-color: #62b32c;*/
    border-bottom: 0px;
    padding-left: 10px;
}

nav{
    float: left;
    width: 100%;
}

nav li{
    border-bottom: 1px solid gray;
    float: left;
    width: 100%;
}

nav li.last{
    margin-bottom: 36px;
}

nav li a{
    padding-left: 10px;
    float: left;
    width: 100%;
}

nav div{
    padding-left: 20px;
}

#navigationIndex{
    background-color: #4e4e4e;
}

.navbar{
    background: white;
    min-height: 50px;
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

#indexNav{
    background-color: #4e4e4e;
    color: white;
}

#indexNav a{
    color: white;
}

#indexNav nav{
    background-color: #4e4e4e;
}

#navHeader{
    padding: 10px 0px;
}

#navHeader a{
    padding-right: 20px;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

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

/* Buttons & Colors
 ******************************************************************************/

.btn{
    padding: 10px;
}

.btn:hover{
    color: #fff;
}

.btn-groma{
    color: #fff;
    /*background-color: #008638;*/
    border-radius: 3px;
}

.btn-red{
    color: #fff;
    background-color: #e74c3c;
    border-radius: 3px;
}

.btn-light{
    color: #fff;
    background-color: #62b32c;
}

#clear-cart{
    padding: 10px;
    background-color: #e74c3c;
}

.redButton{
    background-color: #e74c3c;
}

#orderButton,#continueButton{
    margin-top: 10px;
    /*color: #008638;*/
    background-color: white;
}

#continueButton {
    margin-right: 10px;
}

#detailModal > .modal-content {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: scroll;
}

#searchContainer a#addUnderscore{
    padding-bottom: 0px;
    padding-top: 10px;
}

.vk-normal, .article-normal, .normal{
    color: #202020;
}

.vk-yellow, .yellow{
    color: #cfbe02;
}

.cyan{
    color: #009090;
}

.article-offer, .green{
    color: #008638;
}

.red{
    color: red;
}

.magenta{
    color: #ff33cc;
}

.articleLink {
    cursor: pointer;
}

#clearCartModal button {
    width: 48%;
}

#cartModal #mengeModal {
    margin-bottom: 0px;
}

#closeDetail {
    cursor: pointer;
    z-index: 999;
    position: absolute;
    right: 20px;
    width: 30px;
    height: 34px;
}

#closeDetail i {
    width: 30px;
    height: 34px;
    cursor: pointer;
}

#counterWrap{
    height: 57px;
}

#cartModal .quantity{
    margin-bottom: 10px;
}

#articleWrap{
    padding-top: 10px;
    margin: 10px;

    background-color: white;
    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;
}

#articleButtonWrapper #addToCartSubmit {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#articleButtonWrapper #addToShoppinglist, #addToShoppinglist {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.plainWrap{
    padding: 10px;
    margin: 10px;
    background-color: white;
    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;

    font-family: 'Roboto Condensed', sans-serif!important;
}

.plainWrap h1, .plainWrap h2, .plainWrap h3, .plainWrap h4, .plainWrap h5, .plainWrap h6 {
    font-family: 'Roboto Condensed Bold', sans-serif!important;
    font-weight: bold;
    /*color: #008638!important;*/
}

.itemWrap{
    background-color: white;
    margin: 10px 0px;
}

#offCanvas{
    background-color: #4e4e4e;
    color: white;
    /*padding-top: 10px;*/
}

#offCanvas a, #navigationIndex h2, #navigationIndex a{
    color: white;
}

.off-canvas-wrapper{
    height: 100%;
}

.leadText{
    text-align: center;
    font-weight: bold;
    color: red;
    margin-bottom: 0px;
    padding: 10px;
}

#leadTextWrap{
    display: none;
}

/* Search
 ******************************************************************************/

#searchContainer{
    padding: 10px;
    padding-bottom: 0px;
    /*margin-bottom: 10px;*/

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#62b22b+0,61b32d+8,5faf2a+18,5faf2c+25,60ad29+28,5dad2a+28,59a026+63,579e28+77,539824+100 */
    /*background: #62b22b; !* Old browsers *!*/
    /*background: -moz-linear-gradient(top, #62b22b 0%, #61b32d 8%, #5faf2a 18%, #5faf2c 25%, #60ad29 28%, #5dad2a 28%, #59a026 63%, #579e28 77%, #539824 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(top, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to bottom, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b22b', endColorstr='#539824',GradientType=0 ); !* IE6-9 *!*/

    -webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);

    -webkit-transition: margin-top 0.5s; /* For Safari 3.1 to 6.0 */
    transition: margin-top 0.5s;
}

/*body.search #searchContainer {*/
/*    margin-bottom: 0px;*/
/*}*/

.searchContainerTransform{
    margin-top: -108px;
    -webkit-transition: margin-top 0.5s; /* For Safari 3.1 to 6.0 */
    transition: margin-top 0.5s;
}

#statisticsContainer, #invoiceContainer{
    -webkit-transition: margin-top 0.5s; /* For Safari 3.1 to 6.0 */
    transition: margin-top 0.5s;
}

.filterContainer{
    padding-bottom: 0px!important;
}

.invoiceContainerTransform{
    /*margin-top: -184px;*/
    margin-top: -180px;
    -webkit-transition: margin-top 0.5s; /* For Safari 3.1 to 6.0 */
    transition: margin-top 0.5s;
}

.statisticsContainerTransform{
    /*margin-top: -220px;*/
    margin-top: -214px;
    -webkit-transition: margin-top 0.5s; /* For Safari 3.1 to 6.0 */
    transition: margin-top 0.5s;
}

#toggleFilter{
    padding: 0px;
}

#searchIconWrap{
    margin: 10px 0px;
}

#searchIconWrap div{
    margin-right: 6px;
    float: left;
}

#searchIconWrap a {
    height: 34px;
}

.itemContainer{
    background-color: white;
    margin-bottom: 0.5em;

    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;

    font-size: 14px;
}

.itemContainer .imgWrapperMedium{
    display: flex;
    align-items: center;
}

.itemContainer .imgWrapperMedium img{
    max-height: 60px;
    max-width: 60px;
    /*max-width: 100%;*/
}

@media (max-width: 499px) {
    .itemContainer .imgWrapperMedium img{
        max-height: 60px;
        /*max-width: 60px;*/
        max-width: 90%;
    }
}

.itemContainer .imgWrapperLarge a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemContainer .imgWrapperLarge img {
    max-height: 250px;
    margin: 10px;
    max-width: 80%;
}

.filterContainer *{
    color: white;
}

.filterContainer #fromDate, .filterContainer #toDate{
    color: black;
}

#preSelection div{
    padding: 5px;
}

.itemHeader{
    padding: 10px;
}

.itemContainer h5{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.itemContainer h5, .itemContainer p{
    margin: 0px;
    padding: 10px 5px;
    font-size: 14px;
}

.itemContainer .totalPrice{
    padding: 7px 0px;
    padding-right: 5px;
}

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

.cartItemHeader .icon-trash{
    width: 19px;
    height: 22px;
}

.cart-total{
    font-size: 18px;
}

.resultContainer{
    padding: 0px 10px;
    margin-bottom: 80px;
}

.resultContainer h4{
    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;
}

.box{
    margin-top: 10px;
}

.listPrice p{
    font-size: 16px;
}

.articleHeadRow .box{
    margin-top: 0px;
    margin-right: 5px;
}

#topbar a, .cartLink, #searchContainer a, .filterContainer a, .submitButton{
    padding: 8px;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: white;
}

.cart-row{
    background-color: #f8f8f8;
}

.cartLink{
    padding: 5px;
}

.listCart{
    display: flex;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
}

#cartModalHeader{
    border-bottom: 1px solid #e7e7e7;
}

#searchContainer a{
    padding: 5px;
}

#searchContainer a#searchLink{
    padding: 10px;
}

#searchForm select, #searchForm input{
    margin: 0px;
    font-size: 14px;
    height: 42px;
}

#searchForm select{
    font-size: 12px;
    padding-left: 5px;
    padding-right: 18px;
}

.searchRow{
    margin-top: 2px;
    /*margin-bottom: 6px;*/
}

#searchForm .field-articlesearch-restriction{
    /*border-top: 1px solid white;*/
    padding-top: 5px;
    padding-bottom: 3px;
}

#searchForm .field-articlesearch-restriction label{
    color: white;
}

#articlesearch-searchtype{
    font-size: 0.8rem;
}

#topbar{
    /*z-index: 2;*/
    z-index: 9999;
}

#topbar div{
    padding: 10px;
}

#topbar div:nth-child(2){
    /*padding-left: 0px;*/
}

#topbar div:nth-child(4){
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*padding-right: 0px;*/
}

#topbar div:last-child{
    /*display: flex;*/
    /*justify-content: flex-end;*/
}

.white{
    background-color: white;
}

/*.light-green{*/
/*    background-color: #62b32c;*/
/*}*/

/*.dark-green{*/
/*    background-color: #008638;*/
/*}*/

.searchDropDown{
    font-size: 0.8rem;
}

.roboto{
    font-family: 'Roboto Condensed', sans-serif;
}

.roboto-bold{
    font-family: 'Roboto Condensed Bold', sans-serif;
    font-weight: bold;
}

/* Owl */
.owl-theme .owl-dots{
    display: none;
}

/*.owl-theme .owl-dots .owl-dot span{*/
/*    background: #62b32c!important;*/
/*}*/

/*.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{*/
/*    background: #008638!important;*/
/*}*/

.owl-lazy{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position:absolute;
}

.owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translate(0, -25px);
}

.owl-theme .owl-nav{
    margin-top: 0px!important;
}

.owl-nav-icon{
    width: 100%!important;
    height: 100%!important;
    margin: 0px!important;
    padding: 0px!important;
    background-color: transparent!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}

.owl-nav button{
    /*background-color: #62b32c!important;*/
    color: white!important;
    width: 50px;
    height: 50px;
    padding: 7px!important;
    margin: 0px!important;
    border-radius: 0px!important;
}

button.owl-prev, button.owl-next{
    padding: 7px!important;
}

.owl-prev{
    position:absolute;
    left: 0;
}

.owl-next{
    position:absolute;
    right: 0;
}

.owl-item img {
    max-width: 80%!important;
    /*max-height: 80%!important;*/
    max-height: 95%!important;
}

.addToCart h2{
    font-size: 16px;
    margin: 0px;
}

.articleHead{
    /*margin-top: 10px;*/
}

.articleHead h2{
    font-size: 16px;
    margin: 0px;
}

.articleHead div:first-child{
    padding-bottom: 0px;
}

.articleHeadRow{
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
}

.articleHeadRow p{
    font-size: 14px;
    margin-bottom: 0px;
}

.articleInfo{
    white-space: pre-wrap;
    padding: 10px;
}

.articleInfo p{
    font-size: 14px;
}

.addToCartSubmit{
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.addToCartSubmit i{
    margin-right: 10px;
    /*width: 22px;*/
}

.addToCartSubmit span{
    vertical-align: text-top;
}

.alert-box {
    border-style: solid;
    border-width: 1px;
    display: block;
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 1.11111rem;
    padding: 0.77778rem 1.33333rem 0.77778rem 0.77778rem;
    position: relative;
    transition: opacity 300ms ease-out;
    background-color: #008CBA;
    border-color: #0078a0;
    color: #FFFFFF;
    border-radius: 3px;
}

.alert-box.alert {
    background-color: #e74c3c;;
    border-color: #de2d0f;
    color: #FFFFFF;
}

.alert-box.success {
    /*background-color: #008638;*/
    /*border-color: #3a945b;*/
    color: #FFFFFF;
}

.alert .close {
    color: white;
}

.btn-red {
    color: white!important;
}

.cartMsg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0px 10px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    right: 0;
    bottom:0;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/

    /*overflow: auto; !* Enable scroll if needed *!*/
    overflow: hidden;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
/*//      margin: 15% auto; !* 15% from the top and centered *!*/
/*//      padding: 20px;*/
    /*margin: 50% auto;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border: 1px solid #888;
    position: fixed;
    width: 90%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.modal-close, .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#cartItemComment{
    padding: 5px;
    /*padding-left: 10px;*/
    font-size: 14px;
}

/* Headers & Bars
 ******************************************************************************/

.listHeader{
    padding: 10px;
    /*background-color: #62b32c;*/
    color: white;



    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#62b22b+0,61b32d+8,5faf2a+18,5faf2c+25,60ad29+28,5dad2a+28,59a026+63,579e28+77,539824+100 */
    /*background: #62b22b; !* Old browsers *!*/
    /*background: -moz-linear-gradient(top, #62b22b 0%, #61b32d 8%, #5faf2a 18%, #5faf2c 25%, #60ad29 28%, #5dad2a 28%, #59a026 63%, #579e28 77%, #539824 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(top, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to bottom, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b22b', endColorstr='#539824',GradientType=0 ); !* IE6-9 *!*/

    -webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
}

#jumpBar{
    /*background-color: #62b32c;*/
    padding: 10px;
    margin-bottom: 10px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#62b22b+0,61b32d+8,5faf2a+18,5faf2c+25,60ad29+28,5dad2a+28,59a026+63,579e28+77,539824+100 */
    /*background: #62b22b; !* Old browsers *!*/
    /*background: -moz-linear-gradient(top, #62b22b 0%, #61b32d 8%, #5faf2a 18%, #5faf2c 25%, #60ad29 28%, #5dad2a 28%, #59a026 63%, #579e28 77%, #539824 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(top, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to bottom, #62b22b 0%,#61b32d 8%,#5faf2a 18%,#5faf2c 25%,#60ad29 28%,#5dad2a 28%,#59a026 63%,#579e28 77%,#539824 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b22b', endColorstr='#539824',GradientType=0 ); !* IE6-9 *!*/

    -webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);
}

#jumpBar a, .backLink{
    padding: 5px;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: white;
}

.backLink{
    /*padding: 5px;*/
    margin-right: 5px;
}

#addToCartDetails{
    padding: 10px;
}

.salesLink{
    height: 41px;
    padding: 0px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    /*background-color: #008638;*/
    position: relative;
}

.orderKdnr{
    /*background-color: #008638!important;*/
    color: white;
}

#statSettingsWrap{
    padding: 10px;
}

#salesHeader .disable{
    width: 40px;
    height: 39px;
    background: darkslategray;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0.5;
    border-radius: 5px;
}

#salesPrev{
    margin-right: 5px;
}

.statisticBottomRow, .itemBottomRow{
    padding: 5px;
    background-color: #f8f8f8;
}

.itemTopRow{
    padding: 5px;
}

#articlehead h2{
    margin: 0px;
}

.listFooter{
    padding: 10px;
    /*background-color: #008638;*/
    color: white;

    position: fixed;
    width: 100%;
    bottom: 0px!important;
}

.listFooter div:nth-child(odd){
    padding-left: 10px;
}

.listFooter div:nth-child(even){
    padding-right: 10px;
}

#cartFooter div:first-child{
    padding-left: 0px;
}

.hasDatepicker{
    margin: 0px!important;
}

#preSelection{
    margin-top: 10px;
}

#preSelection div:first-child, #preSelection div:nth-child(4){
    padding-left: 0px;
}

#preSelection div:last-child, #preSelection div:nth-child(3){
    padding-right: 0px;
}

#checkGroupWrap{
    margin-top: 10px;
}

/* Hide the browser's default checkbox */
#articlesearch-restriction input, #statisticsGroup input, .checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 25px;
//      margin-bottom: 12px;
    cursor: pointer;
//      font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0,0,0,0.0);
    border: 1px solid white;
    border-radius: 5px;
}

.checkmarkSettings {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0,0,0,0.0);
    /*background-color: white;*/
    /*border: 1px solid #008638;*/
    border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, .checkmarkSettings:after {
    content: '';
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

.container input:checked ~ .checkmarkSettings:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 5px;
    top: 0px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container .checkmarkSettings:after {
    left: 5px;
    top: 0px;
    width: 8px;
    height: 14px;
    /*border: solid #008638;*/
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.contentContainer{
    margin: 10px;
    padding: 10px;
    background: white;
    -webkit-box-shadow: 0px 1px 2px 1px #969696;
    box-shadow: 0px 1px 2px 1px #969696;
}

.cart-row .packagingWrap p{
    padding-right: 0px;
}

.invoicePositionPackagingWrap p{
    padding-right: 0px;
    padding-left: 3px;
}

.unitprice p{
    padding-right: 0px;
}

.removeCartItem{
    padding-right: 5px;
}

#searchFilterWrap{
    display: inline-flex;
    /*margin-bottom: 10px;*/
}

#searchFilterWrap div{
    margin-right: 5px;
}

#searchFilterWrap div:last-child{
    margin-right: 0px;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

#statSubmit, #invoiceSubmit{
    height: 39px;
    width: 38px;
}

.dateHeadWrap div{
    margin-right: 5px;
}

.dateHeadWrap div:last-child{
    margin-right: 0px;
}

.sumAdditional{
    font-size: 12px;
}

.paddingText{
    padding: 10px;
}

.marginSum{
    margin-bottom: 40px;
}

.updateCartText{
    display: none;
}

.perKG {
    color: #888888;
}

#shoppingListHeader {
    padding: 10px;
}

#shoppingListHeader a, #cartHeader a {
    padding: 8px 15px;
    color: white;
}

#getBackShoppingList {
    padding: 5px;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: white;
}

.shoppingListHeader h2 {
    height: 100%;
    display: flex;
    align-items: center;
}

.shoppingListButton {
    float: right;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: white;
}

.shoppingListRow {
    align-items: center;
}

.shoppingListRow div {
    /*display: flex;*/
    /*align-content: center;*/
    /*justify-content: center;*/
    padding: 5px;
    text-align: center;
}

.shoppingListRow div.text-right {
    display: flex;
    justify-content: flex-end;
}

#shoppinglistDropdown {
    max-width: 200px;
}

#shoppingListSearch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#closeShoppingListModal, #closeArticleDeleteModal, #closeStatusModal {
    position: absolute;
    right: 10px;
    top: 10px;
}

#shoppingListModal {
    z-index: 9999;
}

#statusModal {
    z-index: 9;
}

.statusSuccess {
    color: #008638;
}

.statusError {
    color: #e74c3c;
}

#contentContainer #cancel {
    padding: 10px;
    background-color: #e74c3c;
    color: white;
    line-height: 1;
    margin-left: 5px;
    border-radius: 3px;
}

.orderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-right: 5px;*/
}

.orderContainer label {
    font-size: 16px;
}

.orderContainer a, .orderContainer button {
    cursor: pointer;
}

.orderContainer input {
    width: 32px;
    height: 32px;
}

.orderContainer .sollbestand {
    padding: 0px;
}

/* Chrome, Safari, Edge, Opera */
.orderContainer input::-webkit-outer-spin-button,
.orderContainer input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.orderContainer input[type=number] {
    -moz-appearance: textfield;
}

.shoppinglistImgWrapper {
    padding: 0!important;
    width: 100%;
}

.shoppinglistImgWrapper div {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 640px;
    margin: 0 auto;
}

button#addToShoppinglistModal {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#mengeHelpModal, #mengeHelpDetail {
    text-align: center;
}

/* LOGO & ICONS
 ******************************************************************************/

.logo{
    background-image: url('../media/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    padding: 5px;
}

.icon{
    width: 20px;
    height: 20px;
    background-size: cover;
    display: inline-block;

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    line-height: 1;
}

.icon-back{
    background-image: url('../media/icons/arrow-alt-left-solid.svg');
}

.icon-plus{
    background-image: url('../media/icons/plus-solid.svg');
    height: 22px;
}

.icon-minus{
    background-image: url('../media/icons/minus-solid.svg');
}

.icon-count-up{
    background-image: url('../media/icons/plus-square-solid.svg');
    width: 25px;
    height: 28px;
}

.icon-count-down{
    background-image: url('../media/icons/minus-square-solid.svg');
    width: 25px;
    height: 28px;
}

.icon-left{
    background-image: url('../media/icons/angle-left-solid.svg')!important; /* owl override */
}

.icon-right{
    background-image: url('../media/icons/angle-right-solid.svg')!important; /* owl override */
}

.icon-up{
    background-image: url('../media/icons/angle-up-solid.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
}

.icon-down{
    background-image: url('../media/icons/angle-down-solid.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
}

.icon-barcode{
    background-image: url('../media/icons/barcode-scan-solid.svg');
}

.icon-barcode-alt {
    background-image: url('../media/icons/barcode-solid.svg');
}

.icon-bars{
    background-image: url('../media/icons/bars-solid.svg');
}

.icon-bars-white{
    background-image: url('../media/icons/bars-solid_white.svg');
}

.icon-box{
    background-image: url('../media/icons/box-open-solid.svg');
    width: 25px;
}

.icon-cart{
    background-image: url('../media/icons/shopping-cart-solid.svg');
}

.icon-cart-add{
    background-image: url('../media/icons/cart-plus-solid.svg');
    /*width: 20px;*/
    /*height: 18px;*/
    width: 24px;
    height: 21px;
    /*margin-right: 5px;*/
    margin-right: 3px;
}

.icon-cart-added{
    background-image: url('../media/icons/cart-arrow-down-solid.svg');
    /*width: 20px;*/
    /*height: 18px;*/
    width: 24px;
    height: 21px;
    /*margin-right: 5px;*/
    margin-right: 3px;
}

.icon-cart-added-header{
    background-image: url('../media/icons/cart-arrow-down-solid.svg');
}

.icon-cart-added-white-header{
    background-image: url('../media/icons/cart-arrow-down-solid_white.svg')!important;
}

.icon-phone{
    background-image: url('../media/icons/phone-solid.svg');
}

.icon-search{
    background-image: url('../media/icons/search-solid.svg');
}

.icon-list{
    background-image: url('../media/icons/th-list-solid.svg');
}

.icon-close{
    background-image: url('../media/icons/times-square-regular.svg');
}

.icon-close-solid{
    background-image: url('../media/icons/times-square-solid.svg');
    width: 18px;
}

.icon-close-light{
    background-image: url('../media/icons/times-square-light.svg');
    width: 30px;
    height: 32px;
}

.icon-trash{
    background-image: url('../media/icons/trash-alt-solid.svg');
}

.salesIcon{
    height: 39px;
}

.icon-view-small {
    background-image: url('../media/icons/view-small.svg');
    margin-top: -1px;
}

.icon-view-small-selected {
    background-image: url('../media/icons/view-small-white.svg');
    margin-top: -1px;
}

.icon-view-medium {
    background-image: url('../media/icons/view-medium.svg');
}

.icon-view-medium-selected {
    background-image: url('../media/icons/view-medium-white.svg');
}

.icon-view-large {
    background-image: url('../media/icons/view-large.svg');
    height: 18px;
}

.icon-view-large-selected {
    background-image: url('../media/icons/view-large-white.svg');
    height: 18px;
}

.icon-edit {
    background-image: url('../media/icons/edit-solid.svg');
    width: 18px;
    height: 16px;
}

.icon-trash-red {
    background-image: url('../media/icons/trash-alt-solid-red.svg');
    width: 16px;
    height: 18px;
}

.icon-shoppinglist {
    background-image: url('../media/icons/list-ol-solid.svg');
    width: 24px;
    height: 24px;
}

.icon-order-up {
    background-image: url('../media/icons/arrow-alt-up-solid.svg');
}

.icon-order-down {
    background-image: url('../media/icons/arrow-alt-down-solid.svg');
    height: 22px;
}

/* Custom-Breakpoints
 ******************************************************************************/

@media(max-width:767px) { /* Yii predefined Breakpoint */
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

@media(min-width: 640px){ /* Foundation Medium-BreakPoint */
    h2, .h2{
        font-size: 1.75rem!important;
    }

    /*body.search .resultContainer div.medium-6{*/
        /*width: calc(50% - 1.275rem)!important;*/
    /*}*/

    /*body.search .resultContainer div.medium-6:nth-child(odd){*/
    /*body.search .resultContainer .itemContainer:nth-child(odd){*/
        /*margin-left: 0.9375rem!important;*/
        /*margin-right: 0.3375rem!important;*/
    /*}*/

    /*body.search .resultContainer div.medium-6:nth-child(even){*/
        /*margin-left: 0.3375rem!important;*/
        /*margin-right: 0.9375rem!important;*/
    /*}*/

    /*body.search .resultContainer .itemContainer:nth-of-type(odd){*/
        /*margin-left: 0.9375rem!important;*/
        /*margin-right: 0.3375rem!important;*/
    /*}*/
    /**/
    /*body.search .resultContainer .itemContainer:nth-of-type(even){*/
        /*margin-left: 0.3375rem!important;*/
        /*margin-right: 0.9375rem!important;*/
    /*}*/
}

@media(min-width: 400px){
    #topbar div{
        justify-content: flex-start;
    }

    #topbar div:last-child{
        justify-content: flex-end;
    }

    #topbar div a:nth-child(2){
        margin-left: 10px;
    }

    .modal-content {
        width: 80%;
    }
}

@media(max-width: 372px){
    body.cart .itemContainer p{
        font-size: 12px;
    }

    body.cart .itemContainer .totalPrice{
        font-size: 14px;
    }

    #article #totalPriceWrap{
        font-size: 18px;
    }

    #preSelection button{
        font-size: 12px;
    }

    .listPrice p{
        font-size: 14px;
    }

    .icon-box{
        width: 15px;
        height: 12px;
        margin-top: 13px;
    }

    body.orderpositions .packagingWrap .icon-box{
        width: 14px;
        height: 11px;
    }

    #iconBoxInvoice{
        margin-top: 14px;
    }

    .articleHeadRow .box{
        margin-top: 4px;
    }

    .cart-row .packagingWrap p{
        font-size: 12px;
        padding-left: 2px;
    }

    .button-group label{
        font-size: 12px;
    }

    #searchForm select{
        font-size: 10px;
        padding-left: 2px;
    }

    .sumBrutto{
        font-size: 14px;
    }

    .statisticsContainerTransform {
        margin-top: -204px;
    }

    .invoiceContainerTransform{
        margin-top: -172px;
    }
}

@media(min-width: 373px) and (max-width: 400px){
    .icon-box{
        width: 23px;
        height: 18px;
    }
}

@media(max-width: 400px){
    .owl-stage{
        height: 240px!important;
    }

    .owl-stage:empty{
        height: 0px!important;
    }
}

@media(min-width: 401px) and (max-width: 639px){
    .owl-stage{
        height: 360px!important;
    }

    .owl-stage:empty{
        height: 0px!important;
    }
}

@media(min-width: 640px){
    .owl-stage{
        height: 480px!important;
    }

    .owl-stage:empty{
        height: 0px!important;
    }

    .statisticsContainerTransform {
        margin-top: -224px;
    }

    .invoiceContainerTransform{
        margin-top: -190px;
    }
}

/* Darstellungs-Fix Suchliste Medium-View */
@media (min-width: 640px) and (max-width: 800px) {
    .mediumContainer .lightPackageWrapper i {
        width: 16px;
        height: 12px;
        margin-top: 14px;
    }

    .mediumContainer .vaWrapper p {
        padding-left: 0px;
        padding-right: 0px;
    }

    .mediumContainer .cartLink {
        padding: 3px;
    }

    .mediumContainer .lights {
        left: 2px;
        top: 16px;
    }

    .mediumContainer .listPrice p {
        padding-top: 8px;
        font-size: 15px;
    }

    .imgWrapperMedium img {
        max-width: 90%!important;
    }

    .mediumContainer .lightPackageWrapper p {
        padding-left: 1px;
    }

    .mediumContainer .inh, .mediumContainer .va {
        font-size: 13px;
    }

    /*.mediumContainer .cartLink {*/
    /*    width: 100%!important;*/
    /*}*/

    .mediumContainer .cartLink i {
        /*margin-right: 2px!important;*/
        /*width: 20px!important;*/
        /*height: 18px!important;*/
    }

    .mediumContainer .listCart {
        padding-left: 5px!important;
    }

    .mediumContainer .listPrice p {
        padding-right: 0px!important;
    }

    /*.mediumContainer .icon-cart-add {*/
    /*    margin-right: 0px;*/
    /*}*/
}

@media (max-width: 720px) and (min-width: 640px) {
    .mediumContainer .icon-cart-add {
        margin-right: 0px;
    }
}

@media (max-width: 499px) {
    .mediumContainer .lightPackageWrapper p {
        padding-right: 0px!important;
        padding-left: 2px!important;
    }

    .mediumContainer .lightPackageWrapper {
        padding-left: 12px!important;
    }

    .mediumContainer .vaWrapper p {
        padding-right: 0px!important;
        padding-left: 0px!important;
    }

    .mediumContainer .listCart {
        padding-left: 5px!important;
    }

    /*.mediumContainer .cartLink {*/
    /*    width: 100%!important;*/
    /*}*/

    .mediumContainer .cartLink i {
        margin-right: 1px!important;
        width: 20px!important;
        height: 18px!important;
    }

    .mediumContainer .listPrice p {
        padding-right: 0px!important;
    }

    .mediumContainer .icon-box {
        margin-top: 14px!important;
    }
}

@media (min-width: 1340px) {
    body.index .shoppingListRow h5 {
        text-align: center;
    }

    body.index .shoppinglistImgWrapper img {
        margin: 0 auto;
    }
}

@media (max-width: 399px) {
    #searchIconWrap div {
        margin-right: 4px;
    }
}