@import "/content/Default/LESS/animate.min.less";
@import "/content/Default/LESS/classes.less";
/* Defaults */
@import "/content/Default/LESS/core.less";
@import "/content/Default/LESS/custom.input.fields.less";
/*
    

    @package Solvisoft
    @author Jan Konert
*/

ol, ul {
    margin: 20px 0;
}

small {
    font-size: 11px;
    font-weight: bold;
    color: @dark-gray-color;

    span {
        font-weight: normal;
    }
}

loading {
    display: block;
    padding: 15px;
}
/*
    Dialog polyfill stylesheet

    @package    Solvisoft
    @author     Google Inc.
    @link       https://github.com/GoogleChrome/dialog-polyfill/blob/master/dialog-polyfill.css
*/

@import "/content/Default/LESS/dialog.less";

/*
    Global stylesheet for form elements

    @package Solvisoft
    @author Richard Mauritz
    @since 31-10-2017
*/

@import "/content/Default/LESS/forms.less";
/*
	Google maps stylesheet.
	Give the google map a custom layout here

	Layout is also used for the [google-maps] directive

	@package Solvisoft
	@author	Richard Mauritz
	@since 12-12-2017
*/

@import "/content/Default/LESS/google.maps.less";

google-maps {
	display: block;
	min-height: 300px;

	img {
		max-width: none !important;
	    max-height: none !important;
	}
}
/*
    Hover css stylesheet
    Overwrite all hover classes, defined inside hover.css, from Daneden.

    @package Solvisoft
    @author Richard Mauritz
    @since 04-10-2017
*/

@import "/content/Default/LESS/hover.css.less";
/*
    Default HTML and HTML5 elements, eg. <audio> <article> etc...

    @package Solvisoft
    @author Richard Mauritz
    @since 28-11-2017
*/

/*
    HTML elements
*/

@import "/content/Default/LESS/HTML-elements.less";
/*
    Language selector template

    @package Solvisoft
    @author Richard Mauritz
*/

#language {
    position: relative;

    &:hover {
        background: #fff;

        .transition(.33s);

        > span {
            color: #000;

            .transition(.33s);
        }

        .language-selector {
            display: block;
        }
    }

    &:hover:before {
        background: #fff;
        display: block;
        content: " ";
        position: absolute;
        top: -10px;left: 0;
        width: 100%;
        height: 37px;

        .transition(.33s);
        .box-shadow(0 0 5px #000);
    }

    span {
        position: relative;
        z-index: 25;
        display: block;
        padding: 0 15px;
        color: #fff;
        cursor: pointer;

        &:after {
            right: 15px;
            top: 0;

            .font-awesome("\f107");
        }
    }

    .language-selector {
        display: none;
        background: #fff;
        position: absolute;
        z-index: 1080;
        margin: 0;
        padding: 0;
        left: 0;
        right: 0;
        top: 27px;

        &:after {
            display: block;
            content: " ";
            position: absolute;
            top: 0;left: 0;
            height: 100%;
            width: 100%;
            z-index: -999;

            .box-shadow(0 0 5px #797979);
        }

        &:before {
            display: block;
            background: #fff;
            content: " ";
            position: absolute;
            top: -6px;left: 0;
            height: 6px;
            width: 100%;

            z-index: 30;
        }

        > li {
            display: block;
            margin: 0;
            padding: 0;
            border-top: 1px solid @light-gray-color;

            > a {
                display: block;
                color: #000;
                padding: 10px 15px;
            }
        }
    }
}

@import "/content/Default/LESS/loaders.less";
@import "/content/Default/LESS/ng-bootstrap-select.less";
/*
    Stylesheet for the ng lightbox directive

    @package Solvisoft
    @author Richard Mauritz
    @since 14-11-2017
*/

@import "/content/Default/LESS/ng-lightbox.less";
/*
    Stylesheet when JavaScript is disabled.
    Without JavaScript, the site is not working!

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/noscripts.less";
/*
    Pagination stylesheet.
    
    @author     Richard Mauritz
    @package    Solvisoft
*/

@import "/content/Default/LESS/pagination.less";
/*
    PDF viewer stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 10-04-2018
*/

@import "/content/Default/LESS/pdf.less";

/* Popup defaults */
@import "/content/Default/LESS/popups.less";
@import "/content/Default/LESS/tables.less";


.table-header-row{
    background:@thirth-color;
    color:#fff;
}

#basket{
    .add-item-by-code{
        box-shadow:none !important;
        border: 1px solid #ccc; 

        .form-group{
            margin:0 -4px 0px 0 !important;
        }
    }

    .basket-item{
        margin-bottom:0 !important;
        box-shadow:none !important;
        padding: 10px 0 !important;

        .btn-delete{
            i{
                margin-left:8px;
            }
        }
         
        &:nth-child(2n+1){
            background:rgba(242, 147, 0, 0.05);
        }
        img{
            max-width:40px;
            margin: 0 auto;
        }
    }

    .cart-totals{
        .totals-row{
            font-size:14px !important;
            padding:10px 0 !important; 
            
            &:nth-child(2){
                color:@thirth-color;
            }
        }
    } 
}

.table-header-row .table-header, .table-header-row .table-column, .table-row .table-column, .table-footer-row .table-column{
    padding:8px 15px;
}
/*
    Toaster stylesheet

    @package    Toaster
    @author     Richard Mauritz
*/

@import "/content/Default/LESS/toaster.less";
/*
    All typography stylesheets

    @package Solvisoft
    @author Richard Mauritz
    @since 28-11-2017
*/

@import "/content/Default/LESS/typography.less";
/*
    Bootstrap alert boxes stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 17-01-2017
*/

@import "/content/Default/LESS/Bootstrap/boostrap.alerts.less";
/*
    Bootstrap accordion (panel) stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.accordion.less";
/*
    Bootstrap badges layout

    @package Solvisoft
    @author Richard Mauritz
    @since 16-01-2016
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.badge.less";
/*
    Bootstrap carousel styles

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.carousel.less";
/*
    Extend bootstrap with more functionality

    @author     none
    @package    Solvisoft
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.extend.less";
/*
    Stylesheets for inputs

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.inputs.less";
/*
    Bootstrap badges layout

    @package Solvisoft
    @author Richard Mauritz
    @since 16-01-2016
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.label.less";
/*
    Bootstrap modal stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.modal.less";
/*
	Bootstrap navbars stylesheet

	@package Solvisoft
	@author	Richard Mauritz
	@since 01-11-2017
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.navbar.less";
/*
    Bootstrap pagination stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.pagination.less";
/*
    Bootstrap popover

    @package Solvisoft
    @author Richard Mauritz
    @since 24-10-2017
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.popover.less";
/*
    Bootstrap tab stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.tabs.less";
/*
	Bootstrap tooltip stylesheet
	
	@package Solvisoft
	@author	Richard Mauritz
	@since 04-10-2017
*/

@import "/content/Default/LESS/Bootstrap/bootstrap.tooltip.less";
/*
    Bootstrap alert boxes stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 15-05-2018
*/

@import "/content/Default/LESS/Bootstrap/UI/bootstrap.ui.datepicker.less";
/*
    Breadcrumbs stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 27-10-2017
*/

#breadcrumb {
    margin: 0px;
    padding: 12px 0;
    background: #ededed;

    & ol,
    & li {
        display: block;
        margin: 0;
        padding: 0;
    }

    & li {
        position: relative;
        display: inline-block;
        color: #444;
        font-size: 14px;

        &~li {
            &:before {
                content: "|";
                padding:0px 15px;
            }
        }
    }

    & a {
        color: #444;

        &:hover {
            color: #f29300;
            text-decoration: none;
        }
    }
}

.content-breadcrumb {
    position: absolute;
    width: 100%;
    z-index: 20;
}
/*
    Cart stylesheet

    Current cart layout is the same as the basket.
    See /content/views/basket/basket.less for the css rules
*/

.accept-terms {
    > label {
        cursor: pointer;
        background-color: #fff;
        padding: 10px;
        color: @secondary-color;
        margin-bottom: 25px;
        border-radius: @border-radius;

        .box-shadow(1px 1px 3px -1px #ccc);

        span {
            font-weight: bold;
        }

        a {
            color: @thirth-color;
        }
    }
}
/*
    Categorie tile navigation row stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 05-10-2017
*/

.category-comment {
    margin-top: 25px;
}

.category-tile {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;

    &:hover img {
        opacity: 1;

        .transition(.33s);
    }

    a:hover {
        text-decoration: none;
    }

    .category-image {
        position: relative;
        min-height: 150px;
    }

    .category-description:first-letter{
        text-transform: capitalize
    }
}

.category-tile img {
    position: absolute;
    top: 50%;left: 50%;
    display: block;
    max-height: 150px;
    max-width: 150px;
    margin: 0 auto;

    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    .transition(.33s);
}
/*
    Item content category content blocks stylesheet

    @package CTN
    @author Richard Mauritz
    @since 16-11-2017
*/

.extra-content-blocks {
    .extra-content-image {
        img {
            max-height: 200px;

            border-top-left-radius: @border-radius;
            border-top-right-radius: @border-radius;

            .box-shadow(0 0 10px #ccc);
        }
    }

    .extra-content-title {
        padding: 15px;

        > * {
            font-weight: normal;
            font-size: 18px;
            margin-bottom: 0;

        }
    }

    .extra-content-content {
        padding: 0 15px;
    }
}
/*
    Product accessories stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 03-10-2017
*/

.item-accessories .item-relation-image {
    .fa {
        background: @thirth-color;
        position: absolute;
        top: 0;right: 15px;
        color: #fff;
        padding: 9px 10px;
        border-radius: 50%;
    }
}
/*
    Related products stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 03-10-2017
*/
.article-header p {
    font-weight: bold;
}

.border-top-none {
    border-top: none;
}

.model-with-overlay {
        background-color:rgba(0,0,0,0.3);
}
.margin-top-10 {
    margin-top: 10px;
}

.modal-pop-up .modal-header .close {
    background: #f89a35;
    opacity: 0.9;
    color: #fff;
    padding: 0 5px;
    margin: 0;
}

.modal-body-scrollable {
    max-height: calc(100vh - 250px);
    overflow: auto;
    position: relative;
    overflow-x: hidden;
}

/*
    Item relations global sheets

    @package Solvisoft
    @author Richard Mauritz
    @since 03-10-2017
*/

.item-relations {
    padding: 15px 0;

    h3 {
        margin-bottom: 25px;
    }
}

.item-relations .item-relation-image {
    min-height: 200px;
    padding: 15px;
    text-align: center;

    img {
        max-height: 200px;
        margin: 0 auto;
    }
}

.item-relations .item-relation-price,
.item-relations .item-relation-description,
.item-relations .item-relation-link {
    padding: 0 15px 15px;
}
/*
    @package Solvisoft
    @author Jan Konert
*/

.news-page-item-wrapper {
    max-width: 800px;
    font-size: 18px;
}

.news-page-item-wrapper p {
    margin: 0 0 30px;
}

.news-page-detail-wrapper .news-detail-date {
    background-color: @fourth-color;
    display: inline-block;
    padding: 2px 10px;
    color: #ffffff;
    font-size: 15px;
    font-style: normal;
    margin: 20px 0;
    font-weight: bold;
}

.news-page-wrapper .news-page-item-wrapper h2 {
    color: @fourth-color;
    margin-bottom: 30px;
}



/*
    Order tabs stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 23-11-2017
*/
.footer-social-row {
	.page-text-wrapper {
		span {
			color: @tab-active-text-color;
		}
	}
} 
.align-left-xs {
    @media only screen and (max-width: 480px) {
        text-align: left;
    }
}
.error-msg {
   color: @error-color;
}
.font-weight-bold {
   font-weight: 600;
}
.pull-right {
   text-align: right;
}
.return-order-detail {
	margin-top: (0.5 * @grid-gutter-width);
    .table-column {
        padding-left: 0;
        text-align: center;
        @media only screen and (max-width : 480px) {
            text-align: left;
        }
        &.align-center-none {
            text-align: left;
        }
    }
    .table-header {
        text-align: center;
        @media only screen and (max-width : 480px) {
            text-align: left;
        }
        &.align-center-none {
            text-align: left;
        }
    }
    .order-quantity-input {
        input {
        width: 52px;
        text-align: center;
        height: 30px;
        padding: 0 0 0 (0.4 * @grid-gutter-width);
            @media only screen and (max-width : 1200px) {
                padding: 0;
            }
        }
    }
    .checkbox-wrapper {
        margin: (0.1667 * @grid-gutter-width) 0;
        label {
            margin-bottom: 0;
        }
    }
}
.return-order-summary-wrapper {
    .modal-footer {
        border-top: none;
    }
}
.order-detail-wrapper {
	border-radius: 0;
	.modal-header {
		h3 {
			margin: 0;
		}
	}
	.return-order-table {
		margin-top: (0.667 * @grid-gutter-width);
        .select-input {
            .form-control {
                height: @grid-gutter-width;
                padding: 0 (0.1667 * @grid-gutter-width);
            }
        }
	}
    .modal-footer {
        border-top: none;
    }
}
.return-order-summary-wrapper {
   .modal-header {
       .return-order-summary-details {
           border-bottom: none;
           padding: 0 (0.667 * @grid-gutter-width);
       }
   }
   .order-summary-header {
       margin: (0.1667 * @grid-gutter-width) 0;
       @media (max-width: 320px) {
           font-size: (0.933 * @grid-gutter-width);
       }
   }
}
.invalid-quantity {
 border: 1px solid @error-color;
}
.order-nav-tabs {
    background: #fff;
    overflow: visible;
    border-bottom: 0;
    padding: (0.5 * @grid-gutter-width) (0.5 * @grid-gutter-width) @grid-gutter-width (0.833 * @grid-gutter-width);
    margin-bottom: (0.667 * @grid-gutter-width);

    .box-shadow(1px 1px 3px -1px @medium-gray-color);

    li {
        padding-left: 0;

        span {
            background: @primary-color;
            position: relative;
            display: inline-block;
            border: 1px solid @medium-gray-color;
            border-radius: 50%;
            height: (1.33 * @grid-gutter-width);
            width: (1.33 * @grid-gutter-width);
            color: @medium-gray-color;
            margin-right: 100px;

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

            &:before {
                position: absolute;
                content: "";
                height: 1px;
                width: 106px;
                background: @medium-gray-color;
                top: 50%;
				left: (3 * @grid-gutter-width);
                transform: translate(-50%);
            }

            small {
                position: absolute;
                top: (1.5 * @grid-gutter-width);
                margin-left: -80px;
                width: 200px;
                text-align: center;
                font-size: 11px;
            }
        }

        &:last-child {
            span {
                &:before {
                    display: none;
                }
            }
        }

        &.active {
            span {
                color: @secondary-color;
                border-color: @secondary-color;
            }
        }

        &.checked {
            span {
                color: @secondary-color;
                border-color: @secondary-color;

                &:before {
                    background: @secondary-color;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .order-nav-tabs {
        li {
            span {
                margin-right: (1.667 * @grid-gutter-width);

                &:before {
                    width: (1.667 * @grid-gutter-width);
                    left: (2.1667 * @grid-gutter-width);
                }
            }
        }
    }
}

@media (max-width: 600px) {
    .order-nav-tabs {
        li {
            display: none !important;

            span {
                margin-right: 0;

                small {
                    width: auto;
                    margin-left: 0;
                    transform: translate(-50%);
                }
            }

            span::before {
                display: none !important;
            }
        }

        li.active {
            display: block !important;
            width: 100%;
            text-align: center;
        }
    }
}
/*
    Page article inline blocks template

    @package Solvisoft / CTM
    @author Richard Mauritz
    @since 11-10-2017
*/

.content-inline-blocks {
    img {
        border-top-left-radius: @border-radius;
        border-top-right-radius: @border-radius;
    }
}
/*
    Page article relation stylesheet

    @package Solvisoft
    @aurhor Richard Mauritz
    @since 16-11-2017
*/

.page-article-relation-wrapper {
    .page-article-relation-content {
        position: absolute;
        margin-top: 150px;
        font-size: 22px;
        line-height: 35px;
        color: lighten(@secondary-color, 30%);
    }
}
/*
    Pagetext stylesheet. Belongs to the pagetext template file

    @package Solvisoft
    @author Richard Mauritz
*/
/*
    Searchbox stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

#searchform,
#searchformmobile {
    position: relative;
}

#searchform button,
#searchformmobile button {
    position: absolute;
    background: none;
    border: none;
    top: 12px;right: 12px;
    color: @medium-gray-color;
    outline: none;

    .hoverFade(.3s);
}

#searchform input.form-control,
#searchformmobile input.form-control {
    border-radius: @border-radius;
    border: 1px solid @medium-gray-color;
    color: #000;
}

#searchform input.form-control:focus,
#searchformmobile input.form-control:focus {
    border: 1px solid @fourth-color;
}

#searchform input.form-control:focus + button,
#searchformmobile input.form-control:focus + button {
    color: @fourth-color;

    .hoverFade(.3s);
}

#searchform .search-auto-complete,
#searchformmobile .search-auto-complete {
    background: @primary-color;
    position: absolute;
    width: 100%;
    border-radius: 5px;
    z-index: 10000;
    border: 1px solid @secondary-color;
    margin-top: -1px;
}

#searchform .search-auto-complete ul,
#searchform .search-auto-complete ul li,
#searchformmobile .search-auto-complete ul,
#searchformmobile .search-auto-complete ul li {
    display: block;
    margin: 0;
    padding: 0;
}

#searchform .search-auto-complete ul li,
#searchformmobile .search-auto-complete ul li {
    padding: 2px 10px;

    .hoverFade(.33s);
}

#searchform .search-auto-complete ul li:hover,
#searchform .search-auto-complete ul li.auto-item-selected,
#searchformmobile .search-auto-complete ul li:hover,
#searchformmobile .search-auto-complete ul li.auto-item-selected {
    background: none;
    cursor: pointer;
    color: @fourth-color;

    .hoverFade(.33s);
}

#searchform .search-auto-complete ul li:hover a,
#searchform .search-auto-complete ul li.auto-item-selected a,
#searchformmobile .search-auto-complete ul li:hover a,
#searchformmobile .search-auto-complete ul li.auto-item-selected a {
    color: @fourth-color;
}

#searchform .search-auto-complete .search-btn-row,
#searchformmobile .search-auto-complete .search-btn-row {
    margin: 10px;
}

autocomplete-form {
    position: relative;
    display :block;
}

autocomplete-results {
    background-color: #fff;
    position: absolute;
    width: 100%;
    z-index: 210;

    .box-shadow(0 0 3px -1px #ccc);
    
    ul {
        display: block;
        padding: 0;
        margin: 0;
        float: none;
    }

    li {
        display: block;

        a {
            padding: 10px;
            display: block;
            cursor: pointer;

            &:hover {
                color: initial;
                text-decoration: none;
            }
        }

        &.selected {
            a {
                background: @light-gray-color;
                text-decoration: none;
                color: initial;
            }
        }
    }
}

/*
    Shopping cart stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

.shopping-cart {
    padding-right: 10px;
        background: #f29300;
    color: #fff;
    padding: 10px;
    margin-top: -10px;

    > a {
        position: relative;

        &:hover {
            text-decoration: none;
        }

        .fa {
            color: #fff;
            font-size: 24px;

            .transition(.12s);

            & + .badge {
                background: @light-gray-color;
            }
        }

        .fa.active {
            color: @secondary-color;

            .transition(.12s);

            & + .badge {
                background-color: @thirth-color;
                color: @secondary-color;

                .transition(.12s);
            }
        }

        .badge {
            position: absolute;
            top: -12px;right: -12px;

            .transition(.12s);
        }
    }
}

shopping-cart,
shopping-cart-item,
shopping-cart-show-more,
shopping-cart-totals,
shopping-cart-total,
shopping-cart-buttons {
    display: block;
}

shopping-cart {
    background-color: #fff;
    position: absolute;
    color: @font-color;
    min-width: 440px;
    max-width: 440px;
    top: 50px;
    right: 0px; 
    padding: 15px;
    display: none;
    z-index: 25;

    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid #ddd;
    border: 1px solid #f8f8f8;

    h3 {
        margin: 15px 0 25px;
    }

    shopping-cart-item {
        
        padding: 10px;
        margin-bottom: 10px;

        &:nth-child(2n+1){
            background-color: rgba(0, 151, 221, 0.05);
        }
        
        a {
            color: @font-color !important;
        }

        .fa {
            background-color: transparent;
            border: 0;
            color: @font-color !important;
            margin-top: -3px;
        }
        .btn-delete{
            border: 1px solid #d3d3d3;
        }
    }

    shopping-cart-show-more {
        small {
            cursor: pointer;
            color: #707070;
        }
    }

    shopping-cart-totals {
        font-size: 14px;

        shopping-cart-total {
            padding: 5px 10px;

            &:nth-child(2) {
                color: @thirth-color;
            }
        }
    }

    shopping-cart-buttons {
       margin-top: 15px;

    }
}

shopping-cart{
    .custompopoverheader{
        height: 40px;
        position: relative;

        h3{
            background: #008ace;
            padding: 10px;
            text-align: left;
            position: absolute;
            top: -15px;
            left: 0;
            width: 100%;
            font-size: 14px;
            margin: 0;
            color:#fff;

            i{
                font-size: 22px;
                color: #fff;
                margin-right: 10px;
            }
            &:after{
                content: "";
                width: 0;
                height: 0;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-bottom: 15px solid #008ace;
                position: absolute;
                top: -15px;
                right: 20px;
            }
        }
    }
}

@media (min-width: 320px) and (max-width: 568px) {
    shopping-cart {
        min-width: 380px;
        max-width: 380px;
    }
}

@media (max-width: 568px) {
    shopping-cart {
        min-width: 300px;
        max-width: 300px;
    }
}
/*
    Homeslider stylesheet

    @package Solvisoft / CTM
    @author Richard Mauritz
    @since 10-10-2017
*/

.home-slider {
    position: relative;
    margin-top: -80px;

    .carousel-caption {
        position: absolute;
        padding-top: 150px;
        text-shadow: none;
        width: 100%;
        top: 0;left: 0;
        text-align: left;

        small {
            position: relative;
            font-size: 16px;
        }

        h1 {
            margin-top: 0;
        }
    }

    .item {
        min-height: 600px;
        /*
            Slider overlay
        */
        &:after {
            position: absolute;
            content: " ";
            top: 0;left: 0;
            height: 100%;
            width: 100%;

            .gradient(linear; #000, transparent;90deg);
        }
    }
}

.home-slider .slider-blocks {
    position: absolute;
    width: 100%;
    bottom: -40px;

    .slider-block {
        margin-bottom: 15px;
        position: relative;
        z-index: 20;

        h2 {
            margin-top: 0;
        }

        > div {
            padding: 25px;
            border-radius: @border-radius;
        }

        &:first-child > div {
            background: @primary-color;
            border: 1px solid @light-gray-color;
        }

        &:last-child > div {
            background: @fourth-color;
            color: @primary-color;
        }
    }
}

@media (max-width: 768px) {
    .home-slider {
        position: relative;
        margin-top: 0;
    }
}
/*
    Add to favorite modal

    @package Solvisoft
    @author Richard Mauritz
    @since 17-01-2018
*/

#AddToFavouriteModal {
    .modal-body {
        max-height: 500px;
        overflow: auto;
    }
}
/*
    Cookie popup stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 01-11-2017
*/


/*
    Favourite list template stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 20-11-2017
*/

/*.favourites {
    input[type="number"] {
        max-width: 100%;
        border: 1px solid @medium-gray-color;
        border-radius: @border-radius;
        padding: 4px 6px;
    }
}*/
/*
    Login page or login template popup

    @package Solvisoft
    @author Richard Mauritz
*/

.loginbuttondiv a {
    float: right;
}

.forgot_password_form {
    display: none;
}

/*
    New basket item popup stylesheet
*/

.new-basket-item-popover {
    background-color: #fff;
    position: absolute;
    z-index: 190;
    right: 0px;
    top: 50px;
    -webkit-animation-duration: .22s;
    -moz-animation-duration: .22s;
    animation-duration: .22s;
    width: 300px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4);
    box-shadow: 0 5px 10px rgba(0,0,0,.4);
    border: 1px solid #ddd;

    .popover-header {
        background: #d9e4eb;
        padding: 10px;
        text-align: left;
        color: @secondary-color;

        i.fa {
            font-size: 22px;
            color: #333;
            margin-right: 10px;
        }

        &:after {
            content: "";
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid #d9e4eb;
            position: absolute;
            top: -15px;
            right: 20px;
        }
    }

    .popover-body {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: start;
        -webkit-align-items: start;
        -webkit-box-align: start;
        align-items: start;
        padding: 10px;

        .item-image,
        .item-description,
        .item-quantity,
        .item-price {
            text-align: left;
            flex-grow: 1;

            a{
                color:@thirth-color !important;
            }
        }

        .item-quantity {
            text-align: right;
            line-height: 24px;
        }

        .item-image {
            border: 1px solid #d3d3d3;
            padding: 15px;

            img {
                width: 40px;
            }
        }

        .item-description {
            line-height: 24px;
            padding: 0px 10px;

            a {
                margin-right: 0 !important;
            }
            
            p {
                margin-top: 10px;
                line-height: 14px;
                
                small {
                    color: #565656;
                    font-weight: normal;
                }
            }
        }
    }

    .popover-footer {
        padding: 0 10px 10px;

        hr {
            margin: 0px 0 10px 0;
        }

        .btn {
            position: relative;
            color: #fff;
            font-weight: 700;
            font-size: 16px;

            i {
                color: #fff !important;
                font-size: 20px;
            }
        }
    }
}

@media only screen and (max-width: 560px) {
    .new-basket-item-popover {
        width: 100%;
        position: fixed;
        top: 46px;
        right: 0 !important;
    }
}
/*
    Article slider stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 28-11-2017
*/

#articleSlider {
    margin-top: 25px;
    
    .item {
        padding: 15px;
        min-height: 300px;

        .magnifying-glass {
            background-color: @secondary-color;
            position: absolute;
            right: 15px;
            top: 15px;
            color: @primary-color;
            height: 40px;
            width: 40px;
            border-radius: 50%;

            .fa {
                font-size: 18px;
                position: absolute;
                top: 50%;left: 50%;
                margin-left: -8px;
                margin-top: -9px;
            }
        }
    }

    .carousel-indicators-container {
        bottom: -80px;
    }

    .carousel-indicators {
        text-align: center;

        li {
            background: @medium-gray-color;
        }

        li.active {
            margin: auto 2px;

            &:after {
                height: 12px;
                width: 12px;
                border-color: @medium-gray-color;
                top: -3px;left: -3px;
            }
        }
    }
}
/*
    @package Solvisoft
    @author Jan Konert
*/

// News blocks on the home page are the same as on the new page
// See news/news.less for the stylesheet.

.news.v_2_0_3,
.news.v_2_0_2,
.news.v_2_0_1, 
.news.v_2_0_0{
	list-style:none;
	margin:0 -20px;
	padding:0;

    li{
        float:left;
	    width:360px;
	    margin:0 15px;
        padding:0;
	    background:#ededed;
	    overflow:hidden;

        .image{
            min-height:40px;
	        max-height:210px;
            overflow:hidden;

            img{
                max-width:100%;
	            height:auto;
            }
        }

        .tile{
            padding:20px 20px 60px;
	        position:relative;

            .date{
                position:absolute;
	            top:-35px;
	            left:0;
	            padding:25px 40px 0 20px;
	            background:#ededed;
	            color:#9D9D9C;
            }

            h3{
                color:#444;
	            margin:0;
                font-weight:700;
                font-size:20px;
	            line-height:35px;
	            max-height:70px;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-line-clamp: 2;
	            -webkit-box-orient: vertical;
            }
            p{
                line-height: 28px;
            }
            a{
                position:absolute;
	            bottom:0;
	            right:0;
	            padding:10px 40px 10px 20px;
                font-size: 17px;
	            background:#fff;
	            color:#fff;
	            background:@thirth-color; 
	            text-decoration:none;

                i{
                    position:absolute;
	                top:13px;
	                right:17px;
	                font-size:18px;
                }
            }
        }
    }

    &.single{
        li{
            width:720px;
            margin:0 auto;
            float:none;

            .image{
                max-height:420px;
            }
        }
    }
}


/* Exceptions */
.news.v_2_0_2,
.news.v_2_0_1{
    li{
        .image{
            display:none;
        }
        .tile{
            .date{
                position: relative;
		        padding: 0 0 10px;
		        top: 0;
            }
        }
    }		
}

.news.v_2_0_3,
.news.v_2_0_2{
    li{
        .tile{
            p{
                display:none;
            }
        }
    }
}

.ShowAllNewsButton {
    .fa {
        color: @thirth-color;
    }
}

.sidebar{
    .news.v_2_0_3,
    .news.v_2_0_2,
    .news.v_2_0_1, 
    .news.v_2_0_0{
	    list-style:none;
	    margin:0;
	    padding:0;

        li{
            float:none;
	        width:100%;
	        margin:0;
	        background:none;
            margin-bottom:15px;
            padding-bottom:15px; 
            border-bottom:1px solid #d8d8d8;

            &:last-child{
                margin-bottom:0px;
                padding-bottom:0px; 
                border-bottom:none;
            }

            .image{
                display:none;
            }

            .tile{
                padding:0px;

                .date{
                    position:relative;
	                top:auto;
	                left:auto;
	                padding:0;
	                background:none;
                }
                h3{
                    font-family:@primary-font;
                    line-height:26px;
                    margin:5px 0 10px;
                }
                p{
                    display:none;
                }
                a{
                    position:relative;
	                bottom:auto;
	                right:auto;
	                padding:0px;
	                background:none; 
                    color:#008ace;
	                text-decoration:none;
                    font-size:14px;

                    i{
                       display:none;
                    }
                }
            }
        }
    }
}
			
/* RESPONSIVE */
			
@media (max-width: 1160px) { 
    			
	.news.v_2_0_3,
	.news.v_2_0_2,
	.news.v_2_0_1,
	.news.v_2_0_0{
		margin:0px;

        li{
            width:32%;
		    margin:0 2% 0 0;

            &:last-child{
                margin-right:0;
            }
        }
	}

}
	
@media (max-width: 576px) { 
			
	.news.v_2_0_3,
	.news.v_2_0_2,
	.news.v_2_0_1,
	.news.v_2_0_0{
		width:360px;
		margin:0 auto;

        li{
            width:100%;
		    margin:0 0 20px;
        }
	}

}
			
@media (max-width: 360px) { 
	
    .news.v_2_0_3,
	.news.v_2_0_2,
	.news.v_2_0_1,
	.news.v_2_0_0{
		width:100%;
	}

}
/*
    Solvisoft components stylesheets

    BETA

    @author Richard Mauritz
    @since  21-08-2018
*/

@import "/content/Default/LESS/components.less";

.page-title{
    h1{
        font-size: 32px;
        font-family: @secondary-font;
        font-weight:normal;
        margin:45px 0;
    }
}

webshop-filters-component{
    margin-top: -45px;

    #filters{
        ul{
            li{
                span{
                    padding:10px 35px 10px 10px;
                    background:#008ace;
                    color:#fff;
                    font-weight:700;

                    &:after{
                        left:auto !important;
                        right:15px  !important;
                    }
                }

                ul{
                    li{
                        position:relative;
                        height:40px;
                        padding:10px;

                        &:first-child{
                             margin-top:0;
                        }
                        &:nth-child(2n){
                            background:rgba(0,138,206,0.15);
                        }
                        label{
                            margin:0;
                        }
                        a{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            background: #fff;
                            display: block;
                            padding: 12px 15px;
                        }
                    }
                }
            }
        }
    }
}
/*
    Footer stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @editor Jeroen de Jager
*/

footer{
    color:#fff;

    a{
        color:#fff;
    }
     
    #footer{
        background:#3f3a3c;
        padding:60px 0;

        .info{
            float:left;
            width:300px;

            img{
                max-width:225px;
                filter: brightness(0) invert(1);
                margin-bottom: 25px;
            }
        }
        .footer-block{
            float:left;
            width:210px;
            margin-bottom:25px;

            h3{
                margin:0 0 10px;
                font-size:16px;
                font-weight:700;
            }
            ul{
                margin:0;
                padding:0;
                list-style:none;
            }
        }
    }
    #copyright{
        background:#1f1f1f;
        padding:10px;
        text-align:center;
    }
}
/*
    Header stylesheets

    @author     Richard Mauritz
    @package    Solvisoft
*/
.home-slider{
    display:none;
}
header {
    background:url('../../uploads/websiteimages/header-img.png');
    background-size:cover;

    .top-bar{
        background:#008ace;

        .filler{
            float:right;

            .page-text-wrapper{
                float:left;
            }

            .top-menu{
                float:left;
                list-style:none;
                margin:10px 34px;
                padding:0;
                line-height: 38px;

                li{
                    float:left;

                    a{
                        padding:10px;
                        text-transform:uppercase;
                        color:#fff;
                    }
                }
            }
            .top-search{
                float:left;

                #searchform input.form-control{ 
                    margin:10px 0;
                    height:38px;
                    border-radius:0px;
                    line-height: 38px;
                    width:250px;
                    font-family:@primary-font;
                }
                #searchform{

                    button{
                        top:0;
                        right:0;
                        padding: 12px 17px;
                        z-index: 5;
                        color: #fff;
                    }
                    &:after{
                        position:absolute;
                        top: 0;
                        right: 0;
                        padding: 19px 23px;
                        background: #f29300;
                        color: #fff;
                        content:"";
                    }
                }
            }
        }
    }
    .custom-header{
        padding-bottom:35px;

        .logo{
            position:relative; 

            /*a{
                position: absolute;
                top: -20px;
                left: 0;
                display: block;
                width: 340px;
                transform: rotate(10deg); || IF LOGO IS STRAIGHT
            }*/
        }

        .menu{
            float: right;
            padding: 75px 0;

            .nav.navbar-nav{
                li{
                    a{
                        font-size:16px;
                        text-transform:uppercase;
                        font-weight:700;
                    }
                }
            }
            .cart-wrapper{
                float:left;
                margin:14px 0 0 35px;

                .shopping-cart{
                    position:relative;

                    a{
                        color:#fff;
                        margin-right: 25px;
                        font-size:16px;
                        font-weight:700;

                        i{
                            color:#f29300;
                            margin:-5px 8px 0 0; 
                            font-size:16px;
                            color:#fff;
                        }
                        .badge{
                            color:#fff;
                            background:#f29300;
                            top: 1px;
                            right: -25px;
                        }
                    }
                }
            }
        }
    }
    .extended-header{
        .filler{
            width:760px;
            color:#fff;

            h1,h2,h3,h4,h5,h6{
                font-size:32px; 
                font-weight:normal;
                margin:15px 0 20px;
                font-family: 'Alfa Slab One', cursive;
            }
            p{
                margin: 0;
                line-height: 26px;
            }

            .extended-search{
                background:#fff;
                padding:30px;
                color:#444;
                margin:25px 0 110px;

                p{
                    margin-bottom:15px;
                    font-weight:500;
                }

                #searchform input.form-control{ 
                    margin:10px 0;
                    height:38px;
                    border-radius:0px;
                    line-height: 38px;
                    background:#dddddd;
                    color:#444;
                    font-family:@primary-font;

                    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                      color: #888888;
                    }
                    &::-moz-placeholder { /* Firefox 19+ */
                      color: #888888;
                    }
                    &:-ms-input-placeholder { /* IE 10+ */
                      color: #888888;
                    }
                    &:-moz-placeholder { /* Firefox 18- */
                      color: #888888;
                    }
                }
                #searchform{
                    button{
                        top:0;
                        right:0;
                        padding: 12px 17px;
                        z-index: 5;
                        color: #fff;
                    }
                    &:after{
                        position:absolute;
                        top: 0;
                        right: 0;
                        padding: 19px 23px;
                        background: #f29300;
                        color: #fff;
                        content:"";
                    }
                }
            }
        }
    }
}


@media (max-width: 374px) {

        header .custom-header .logo-rentalxpert img {
            height: 50px !important;
            max-width:100% !important;
            margin-top: 35px !important;
            float:left !important;
        }

        header .custom-header .menu {
            float: right;
            padding: 20px 0 50px 0;
        }

        header .custom-header {
            padding-bottom: 0;
        }


}


@media (min-width: 375px) and (max-width: 576px){

        header .custom-header .logo-rentalxpert img {
            height: 75px !important;
            max-width:100% !important;
            margin-top: 25px !important;
            float:left !important;
        }

        header .custom-header .menu {
            float: right;
            padding: 20px 0 50px 0;
        }

        header .custom-header {
            padding-bottom: 0;
        }
}



@media (min-width: 577px) {

        header .custom-header .logo-rentalxpert img {
            height: 175px;
            max-width:100% !important;
            margin-top: 25px !important;
            float:left !important;
        }
}

@media (min-width: 992px) {
    header .custom-header .logo {
            top: -70px;
    }

        header .custom-header .logo-rentalxpert img {
            height: 190px;
            max-width:100% !important;
            margin-top: 25px !important;
            float:left !important;
        }
        header .custom-header {
            padding-bottom: 0;
        }
}

@media (min-width: 1199px) {
    header .custom-header .logo {
            top: -65px;
    }

        header .custom-header .logo-rentalxpert img {
            height: 240px;
            max-width:100% !important;
            margin-top: 25px !important;
            float:left !important;
        }
        header .custom-header {
            padding-bottom: 0;
            margin-bottom: -15px;
        }

        header .custom-header .menu {
            float: right;
            padding: 55px 0px;
        }
}

@media (min-width: 768px) and (max-width:991px){

    

header .custom-header .logo-rentalxpert img {
    height: 200px;
    max-width: 100% !important;
    margin-top: 25px !important;
    float: left !important;
    }
}

/*
    Mobile menu stylesheet

    @package    Solvisoft
    @author     Richard Mauritz
*/

@mobile-heading-color: #9b9b9b;
@hamburger-menu-color: #9b9b9b;
@mobile-menu-background-color: #333;
@mobile-menu-link-color: @medium-gray-color;
@mobile-menu-link-hover-color: @thirth-color;

[ng-toggle-mobile-menu] {
    background-color: transparent;
    border: none;
    font-size: 24px;
    outline: none;
    color: @hamburger-menu-color !important;
}

mobile-menu {
    background: #008ace;
    position: fixed;
    height: 100vh;
    top: 0;left: -100%;
    overflow: auto;
    z-index: 3000;

    -webkit-box-shadow: 7px 2px 20px 0px rgba(68,68,68,1);
    -moz-box-shadow: 7px 2px 20px 0px rgba(68,68,68,1);
    box-shadow: 7px 2px 20px 0px rgba(68,68,68,1);

    .logo{
        background:#fff;
        width:100%;
        padding:15px 0;
        text-align:center;
    }

    .title {
        font-weight: bold;
        padding: 10px 10px 0;
        color: #fff;
        font-size:18px;
    }

    .account {
        background-color:#008ace;

        .cart {
            float: right;
        }

        &::before,
        &::after {
            display: table;
            content: " ";
            clear: both;
        }

        .gravatar {
            margin-right: 10px;

            img {
                background: #555;
                max-width: 45px;
                border-radius: 2px;
                border: 1px solid #222;
                border-radius: 50%;
            }
        }

        .cart {
            .fa {
                font-size: 18px;
                color: #999;
                margin-right: 15px;
            }

            .badge {
                position: absolute;
                top: 10px;right: 10px;
                background:#f29300;
                color:#fff;
            }
        }

        strong a {
            color: #fff;
            font-size: 14px;
        }

        a {
            color: #fff;
            font-size: 14px;
        }
    }

    .search {
        padding: 10px 65px 10px 10px;

        #searchformmobile {
            .form-control {
                background-color: #fff;
                border: 0;
                color: #444;
                padding: 10px;
                margin-top: 15px;
            }
        }
    }

    .nav.navbar-nav {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;

        > li {
            position: relative;
            display: block;
            padding-right: 0;
            width: 100%;

            > a {
                color: #fff;
                padding: 10px 10px 10px 20px;
            }
        }

        > li.isActive,
        > li:hover {
            > a {
                color: #008ace;
                cursor: pointer;
            }

            &::after {
                color: @mobile-menu-link-hover-color;
            }
        }

        > li::after {
            top: 10px;right: 15px; 
            color: #fff;

            .font-awesome("\f105");
        }

        .nav {
            display: block;
            
            > li {
                > a {
                    padding-left: 30px;
                }
            }
        }
    }
}


@media (min-width: 200px) {
    mobile-menu {
        width: 250px;
    }
}

@media (min-width: 360px) {
    mobile-menu {
        width: 300px;
    }
}
/*
    Category stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 12-10-2017
*/
.search-result {
    .table-row {
        a {
            cursor: pointer;

            &.icon-group {
                color: @thirth-color;

                .arrow-icon {
                    font-weight: bold;
                    font-size: (0.833 * @grid-gutter-width);
                }
            }

            &:hover {
                text-decoration: none;
            }
        }

        .margin-top-15 {
            margin-top: 15px;
        }

        &:nth-child(odd) {
            background: none;
        }

        .table-column {
            padding-left: 0;
        }
    }
}

.article-header p {
    font-weight: bold;
}

.border-top-none {
    border-top: none;
}

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

.float-right {
    float: right;
}

.modal-pop-up {
    .modal-header {
        .close {
            background: #f89a35;
            opacity: 0.9;
            color: #fff;
            padding: 0 5px;
            margin: 0;
        }
    }

    .modal-body-scrollable {
        max-height: ~"calc(100vh - 250px)";
        overflow: auto;
        position: relative;
        overflow-x: hidden;
    }

    .float-right {
        @media only screen and (max-width : 480px) {
            float: left;
        }
    }

    .text-right {
        @media only screen and (max-width : 480px) {
            text-align: left;
        }
    }
}

.table-column {
    padding: 8px 0 8px;
}

.margin-top-0 {
    margin-top: 0 !important;
}

/*
    Article detail page

    @package Solvisoft
    @author Richard Mauritz
    @since 02-10-2017
*/

#product-details {
    .product-extra-information-block {
        margin-top: 40px;
    }

    .item-slider {
        margin-top: 20px;
    }

    .product-price {
        .price-tag {
            display: inline-block;
            margin: 0;
        }
        .price-inclusive {
            margin-left: (0.33 * @grid-gutter-width);
        }
    }

    .product-specifications {
        .item-downloads {
            padding: 20px;

            a {
                font-weight: bold;
                color: @thirth-color;
            }
        }

        .specification-box {
            .row {
                margin-top: 10px;
                margin-bottom: 10px;
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    }
}
/*
    Stylesheet for shop.
    The style defenitions for the grid and list view are also written here

    @package Solvisoft / BTC
    @author Richard Mauritz
    @since 11-10-2017
*/

.page-assortment{
    margin-top:-15px !important;
}
.shopping-list-view {
    .shopping-item {
        padding:15px 0 15px 0;
        margin:0;
        border-bottom:2px solid #ededed; 
        box-shadow:none;

        .shopping-item-info{
            padding:15px;
            width: 60%;
        }

        .shopping-item-image { 
            width: 10%;
            padding: 10px;
            border:2px solid #ededed;

            img {
                 max-width: 50px;
                 max-height:50px;    
            }
        }
        .shopping-item-order{
            width:30%; 

            .shopping-item-quanity{
                float:left;
                width:20%;
                position:relative;

                .minus-control,
                .plus-control{
                    display:none;
                }

                input{
                    width:75%;
                    font-family:@primary-font;
                }
            }
            .shopping-item-add{
                float:left;
                width:80%;

                .btn{
                    padding:4px 0px;
                    color:#fff;
                    font-weight:normal;

                    i{
                        padding:0px;
                        color:#fff;
                    }
                }
            }
        }   
    }
}

.grid-control {
    border-bottom: 2px solid @light-gray-color;
    padding-bottom: (0.5 * @grid-gutter-width);

    .pagination {
        float: left;
        margin: 0;
    }

    .amount-per-page {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid #000;
        font-weight: bold;
        outline: none;

        &:focus {
            border-color: @thirth-color;
        }
    }

    .btn-grid {
        background-color: transparent;
        border: none;
        font-size: (0.6 * @grid-gutter-width);
        color: @medium-gray-color;
        padding: 0;
        padding-left: (0.1667 * @grid-gutter-width);

        .transition(.33s);

        &.active {
            color: @thirth-color;

            .transition(.33s);
        }

        &:hover {
            color: @thirth-color;
            .transition(.33s);
        }

        &:focus {
            color: darken(@thirth-color, 5%);
            outline: none;

            .transition(.33s);
        }
    }
}

.shopping-item {
    display: block;
    padding: (0.33 * @grid-gutter-width) (0.5 * @grid-gutter-width);
    background: @primary-color;
    margin-bottom: 5px;    

    a {
        display: block;
    }

    a:hover {
        text-decoration: none;
        color: @secondary-color;

        strong {
            color: @thirth-color;

            .transition(.33s);

            &:hover {
                .transition(.33s);
            }
        }
    }

    table, tr, td {
        width: 100%;
    }

    table {
        height: 100%;
    }

    .box-shadow(1px 1px 3px -1px #ccc);
}

.shopping-item .shopping-item-image {
    text-align: center;
}

.shopping-item .shopping-item-price {
    font-size: (0.6 * @grid-gutter-width);

    input[type=number], strong {
        display: inline-block;
        vertical-align: middle;
    }

    input[type=number] {
        position: relative;
        max-width: 40px;
        padding: (0.1667 * @grid-gutter-width);
        outline: none;
        margin-top: -2px;
        border-radius: @border-radius;
        border: 1px solid @light-gray-color;
    }
}

.stock-icon {
    background-color: #36e046;
    height: (0.33 * @grid-gutter-width);
    width: (0.33 * @grid-gutter-width);
    margin-right: (0.1667 * @grid-gutter-width);
    border-radius: @border-radius;

    &.red {
        background-color: #ff0000;
    }

    &.orange {
        background-color: #ed7d31;
    }

    &.green {
        background-color: #36e046;
    }
}

.shopping-item .shopping-item-add {
    .btn-link {
        border: 0;
        padding: 0;

        small {
            font-size: 12px;
        }

        &:hover {
            color: #000 !important;
            text-decoration: underline !important;
        }
    }
}

.shopping-item .shopping-item-quanity {
    position: relative;

    .error-notification {
        position: absolute;
        left: -25px;
        top: 7px;
        color: @warning-color;
    }
}

/*
    Grid view
*/
.shopping-grid-view {
    margin-bottom: (0.5 * @grid-gutter-width);
    .shopping-item {
        padding-bottom: (0.5 * @grid-gutter-width);
        height: 100%;
    }

    .grid {
        padding-left: (0.1667 * @grid-gutter-width);
        padding-right: (0.1667 * @grid-gutter-width);
        margin-bottom: (0.1667 * @grid-gutter-width);
    }

    .shopping-item .shopping-item-add {
        margin-top: (0.5 * @grid-gutter-width);
    }

    .shopping-item .shopping-item-info a{
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .shopping-item .shopping-item-image {
        display: block;
        min-height: 130px;
        max-height: 130px;
    }

    .shopping-item .shopping-item-image img {
        max-width: 100px;
        max-height: 100px;
        display: block;
        margin: 0 auto;
        padding: (-.5 * @grid-gutter-width) 0;
    }
}

/* Mobile grid controls */
.mobile-grid-controls {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    button {
        background-color: #fff;
        border: 1px solid #f1f1f1;
        height: 40px;
        flex-grow: 1;

        &:not(:first-child) {
            border-left: 0;
        }
    }
}

/*
    Categories stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

.webshop-categories-row .categorie {
    text-align: center;
    margin: 15px 0;

    .categorie-background {
        padding: 40px;
    }

    #aluminium {
        background-color: #D8D8D8;
        border: 1px solid darken(#D8D8D8, 10%)
    }

    #rvs {
        background-color: #C9E5FA;
        border: 1px solid darken(#C9E5FA, 20%)
    }

    #sendzimir {
        background-color: #FAC9CE;
        border: 1px solid darken(#FAC9CE, 20%)
    }

    #aluzink {
        background-color: #C5F3E3;
        border: 1px solid darken(#C5F3E3, 20%)
    }

    #koper {
        background-color: #F8E2C7;
        border: 1px solid darken(#F8E2C7, 20%)
    }

    #messing {
        background-color: #FBF1CB;
        border: 1px solid darken(#FBF1CB, 20%)
    }

    #brons {
        background-color: #F2EAD9;
        border: 1px solid darken(#F2EAD9, 20%)
    }

    #service-center {
        background-color: #E7F2E6;
        border: 1px solid darken(#E7F2E6, 20%)
    }

    strong {
        font-size: 18px;
    }
}

.assortment-categories-row .categorie {
    text-align: center;
    margin: 15px 0;
    text-decoration:none;

    .categorie-background {
        padding: 40px;
    }

    span {
        display: block;
        padding: 10px 30px;
        text-align: left;
        font-size: 20px;
        font-weight: normal;
        color: #333333;
    }

    #aluminium {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #e3e3e3;     
        }
        &:hover span {
            background-color: #e3e3e3;        
        }
    }

   #rvs {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #c9e5fa;     
        }
        &:hover span {
            background-color: #c9e5fa;        
        }
    }

    #sendzimir {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #fac9ce;     
        }
        &:hover span {
            background-color: #fac9ce;        
        }
    }

    #aluzink {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #c5f3e3;     
        }
        &:hover span {
            background-color: #c5f3e3;        
        }
    }

    #koper {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #f8e2c6;     
        }
        &:hover span {
            background-color: #f8e2c6;        
        }
    }

    #messing {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #fbf1cb;     
        }
        &:hover span {
            background-color: #fbf1cb;        
        }
    }

    #brons {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #f2ead9;     
        }
        &:hover span {
            background-color: #f2ead9;        
        }
    }

    #service-center {
        border: 2px solid #D8D8D8;
        &:hover {
            border: 2px solid #e7f2e6;     
        }
        &:hover span {
            background-color: #e7f2e6;        
        }
    }
}

/*
    Basket stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

#basket .add-item-by-code {
    background: #fff;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: @border-radius;
    .box-shadow(1px 1px 3px -1px #ccc);
}

#basket {
    .basket-header {
        margin-bottom: 15px;
    }

    .basket-item {
        background: #fff;
        margin-bottom: 5px;
        .box-shadow(1px 1px 3px -1px #ccc);

        h4 {
            margin: 0;
        }

        img {
            max-height: 40px;
            max-width: 100px;
            padding: 0px 10px;
        }
    }

    .item-additional-info {
        small {
            font-weight: bold;
            color: #555;
            font-size: 11px;

            span {
                font-weight: normal;
            }
        }

        .item-comment-field {
            background-color: transparent;
            position: absolute;
            right: 15px;
            top: 7px;
            border: none;
            .transition(.12s);

            &:hover,
            &.active {
                color: @thirth-color;
                .transition(.12s);
            }
        }
    }

    .cart-totals {
        &.totals {
            background: #fff;
            margin-bottom: 25px;
            border-radius: @border-radius;
            .box-shadow(1px 1px 3px -1px #ccc);
        }

        .totals-row {
            padding-top: 15px;
            padding-bottom: 15px;
            font-size: 16px;
        }

        .shipping-costs {
            background: @light-gray-color;
            font-weight: bold;
            color: #707070;

            .fa {
                position: relative;
                font-size: 34px;
                transform: scaleX(-1);
            }

            span {
                position: relative;
                top: 2px;
                margin-right: 15px;
            }
        }
    }
}



@media (max-width:576px) {
    #basket .basket-item img {
       margin-bottom: 20px;
    }
}

/*
    Basket stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

#basket .add-item-by-code {
    background: #fff;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: @border-radius;

    .box-shadow(1px 1px 3px -1px #ccc);
}

#basket {
    .basket-header {
        margin-bottom: 15px;
    }

    .basket-item {
        background: #fff;
        margin-bottom: 5px;

        .box-shadow(1px 1px 3px -1px #ccc);

        h4 {
            margin: 0;
        }
    }

    .item-additional-info {
        small {
            font-weight: bold;
            color: #555;
            font-size: 11px;

            span {
                font-weight: normal;
            }
        }
    }

    .cart-totals {
        &.totals {
            background: #fff;
            margin-bottom: 25px;
            border-radius: @border-radius;

            .box-shadow(1px 1px 3px -1px #ccc);
        }

        .totals-row {
            padding-top: 15px;
            padding-bottom: 15px;
            font-size: 16px;
        }

        .shipping-costs {
            background: @light-gray-color;
            font-weight: bold;
            color: #707070;

            .fa {
                position: relative;
                font-size: 34px;
                transform: scaleX(-1);
            }

            span {
                position: relative;
                top: 2px;
                margin-right: 15px;
            }
        }
    }
}

textarea { resize: vertical; }

/*alert message*/
.alert-container {
    display: flex;
    padding: 0px;
    align-items: center;
    .alert-img {
        color: #fff;
        padding: 12px;
        &.alert-img-success {
            background: @alert-successBtn-color;
        }
       
        &.alert-img-danger {
            background: @alert-dangerBtn-color;
        }

    }
    .alert-content {
        width: 100%;
        padding: 0 15px;
        a {
            right: 0px;
            opacity: 1.9;
        }
    }
}
.alert-warning-wrap {
    align-items: stretch;
    display: flex;
    .alert-img-warning {
        display: flex;
        align-items: center;
        width: 5%;
        justify-content: center;
        background: @medium-dark-grey;
        a {
                padding: 10px;     
        }
        span {
            font-size: 20px;
        }
    }
    .alert-content {
        padding: 10px;
        width: calc(100% - 5%);  
    }
}

.alert-success {
    &.alert-container {
        color: #fff;
        background-color: @btn-success-color;
        border-color: @btn-success-color;
    }  
}
.alert-danger {
    &.alert-container {
        color: #fff;
        background-color: @btn-alert-color;
        border-color: @btn-alert-color;
        a {
            
            &:not(.close) {
                color: @primary-color;
            }
        }
    }
}
.alert-warning {
    &.alert-container {
        color: #fff;
        background-color: @btn-warning-color;
        border-color: @btn-warning-color;

    }  
}
body {
}

/*
    Configurator index stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 30-10-2017
*/

/*
    Copied from 04 ...
*/
/* Configurator module */
        /* Steps */
        #configurator .configurator-steps {
            margin-top: 40px;
        }

        #configurator .configurator-steps .col-step {
            margin-top: 15px;
        }

        #configurator .configurator-steps .step {
            border: 1px solid #f2f2f2;
            padding: 15px;
            color: @thirth-color;
            text-align: center;
        }

        #configurator .configurator-steps .step.current-step {
            background: @thirth-color;
            border-color: @thirth-color;
            color: #fff;
        }

        #configurator .configurator-steps .step.clickable:hover {
            background: #f1f1f1;
            cursor: pointer;
        }
    
        /* Configurator */
        #configurator {}

        #configurator table {
            width: 100%;
        }

        #configurator .configurator {
            position: relative;
            margin-top: 40px;
            padding: 0 0 40px;
        }

        #configurator .configuration-row {
            background: #fff;
            margin-top: 15px;

            .box-shadow( 0px 2px 3px -1px #ccc );

            &:last-child {
                background: transparent;
                position: fixed;
                bottom: -45px;left: 0;
                width: 100%;
                z-index: 99;
            }

            &:last-child .configurator-heading {
                background: @thirth-color !important;
            }

            &:last-child .configurator-heading,
            &:last-child .configurator-heading i {
                color: #fff;
            }

            &:last-child .custom-select-container,
            &:last-child .custom-select-container i {
                color: #000;
            }

            &:last-child.toggle-up,
            &:last-child.toggle-down {
                bottom: 0;
                .transition(.0s) !important;
            }

            &:last-child.toggle-down {
                bottom: -45px;
            }
            
            &:last-child.reset-position .configurator-heading {
                background: #f2f2f2 !important;
            }

            &:last-child.reset-position .configurator-heading {
                color: #000;
            }

            &:last-child.reset-position .configurator-heading i {
                color: @secondary-color;
            }

            &:last-child .configurator-content {
                max-height: 0;
                overflow: hidden;
            }

            &:last-child.toggle-up .configurator-content {
                max-height: 500px;
                overflow: auto;
            }

            &:last-child.toggle-down .configurator-content {
                max-height: 0;
            }

            &:last-child .configurator-content.collapseable {
                cursor: auto !important;
            }

            &:last-child .configurator-content.collapseable:hover {
                background: initial !important;
            }

            &:last-child.reset-position {
                background: transparent;
                position: relative;
                bottom: auto;left: auto;
                width: auto;
                z-index: auto;
            }

            &:last-child.reset-position .container {
                padding: 0px;
                max-width: 1140px;
            }

            &:last-child.reset-position .configurator-content {
                max-height: 100%;
            }
        }

            // Fix last child. Last child is configuration overview
            #configurator .configuration-row:last-child .configuration-row-background {
                background: #fff;

                .box-shadow( 0px 2px 3px -1px #ccc );
            }

            #configurator .configuration-row:last-child .configurator-heading {
                background: #fff;
            }

        #configurator .configurator-heading {
            background: #f2f2f2;
            padding: 15px;
        }

        #configurator .configurator-heading .icon-info-outline {
            font-size: 24px;
            margin-left: 15px;
            color: @secondary-color;
        }

        #configurator .configurator-heading.has-select span, 
        #configurator .configurator-heading.has-select i,
        #configurator .configurator-heading.has-select select,
        #configurator .configurator-heading.has-select .custom-select-container {
            display: inline-block;
            vertical-align: middle;
        }

        #configurator .configurator-heading h2 {
            margin: 0;
            font-size: 14px;
            font-weight: bold;
        }

        #configurator .configurator-heading h2 span {
            font-weight: normal;
        }

        #configurator .configurator-heading > div > div {
            float: none;
            display: inline-block;
            margin-right: -4px;
            vertical-align: middle;
        }

        #configurator .configurator-heading-small {
            margin: 20px 0;
        }

        #configurator .configurator-heading-small h1,
        #configurator .configurator-heading-small h2,
        #configurator .configurator-heading-small h3,
        #configurator .configurator-heading-small h4,
        #configurator .configurator-heading-small h5,
        #configurator .configurator-heading-small h6,
        #configurator .configurator-heading-small span {
            display: inline-block;
            vertical-align: middle;
            margin: 0;
        }

        #configurator .configurator-heading-small h1,
        #configurator .configurator-heading-small h2,
        #configurator .configurator-heading-small h3,
        #configurator .configurator-heading-small h4,
        #configurator .configurator-heading-small h5,
        #configurator .configurator-heading-small h6 {
            font-size: 16px;
            font-weight: bold;
        }

        #configurator .configurator-heading-small span {
            margin-left: 25px;
        }

        #configurator .configurator-content {
            padding: 20px 60px;
            overflow-x: hidden !important;
        }

        @media (max-width: 640px) {
            #configurator .configurator-content {
            padding: 15px;
        }
        }

        #configurator .configurator-content .custom-checkbox-wrapper label {
            top: 10px;left: 10px;
        }

        #configurator .configurator-content h3 {
            font-size: 14px;
            font-weight: bold;
        }

        #configurator .configurator-content table {
            border: 1px solid #f2f2f2;
        }

        #configurator .configurator-content table tr {
            border-bottom: 1px solid #f2f2f2;
        }

        #configurator .configurator-content table thead {
            background: #f2f2f2;
        }

        #configurator .configurator-content table thead th {
            font-weight: normal;
            padding: 10px;
        }

        #configurator .configurator-content table tbody td {
            vertical-align: middle;
            padding: 10px;
        }

        #configurator .configurator-content table tbody tr.default {
            font-weight: bold;
            color: @thirth-color;
        }

        #configurator .configurator-content table tbody tr.selectable:hover {
            cursor: pointer;
            background: #f9f9f9;
        }

        #configurator .configurator-content table tbody tr.selectable:focus {
            -webkit-transform: scale(0.99,0.99);
                -ms-transform: scale(0.99,0.99);            
                    transform: scale(0.99,0.99);
        }

        #configurator .configurator-content table tbody tr.strikethrough {
            cursor: not-allowed;
            opacity: .3;
        }

        #configurator .configurator-content table tbody tr.required {
            color: red;
        }

        #configurator .configurator-content table tbody tr.strikethrough:hover {
            background: inherit;
        }

        #configurator .configurator-total table {
            width: 100%;
        }

        #configurator .configurator-total > table table td:first-child {
            padding-left: 60px;
        }

        #configurator .configurator-total > table,
        #configurator .configurator-total > table > tbody > tr > td {
            padding: 0;
            border: 0;
        }

        #configurator .configurator-total > table > tfoot td {
            background: #f2f2f2;
            padding: 10px;
        }

        #configurator .configurator-total > table table thead th:first-child,
        #configurator .configurator-total > table table tbody td:first-child,
        #configurator .configurator-total > table tfoot td:first-child {
            border-right: 30px solid #fff;
        }
body {
}

/*
    Contact page stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

.google-map {
	google-maps {
		display: block;
		height: 400px;
		@media only screen and (max-width : 480px) {
			height: 250px;
		}
        .gm-style {
            img {
                max-height: none;
            }
        }
	}
    .google-map-info-box {
        position: relative;
        background: @primary-color;
        padding: (0.5 * @grid-gutter-width);
        margin-top: -5px;
        border: 2px solid @light-gray-color;
        border-top: 0;
    }
    .google-maps-pop-up {
        .font-weight-bold {
            font-weight: bold;
        }
        a {
            &.no-underline {
                text-decoration: none;
            }
            text-decoration: underline;
        }
        .country-name {
            margin-bottom: (0.833 * @grid-gutter-width);
        }
        .contact {
            a{
                text-decoration: none;
              }
        }
        address {
            margin-bottom: 0;
        }
        .view-info {
            margin-top: (0.833 * @grid-gutter-width);
        }
    }
}

.contact-address-box {
    background: @primary-color;
    border: 2px solid @light-gray-color;
    padding: (0.5 * @grid-gutter-width);
    border-radius: @border-radius;
    margin-top: (0.833 * @grid-gutter-width);
}
.dealer-location-wrapper {
	margin-top: (0.667 * @grid-gutter-width);
	margin-bottom: (0.667 * @grid-gutter-width);
	.filter-location {
		height: 100%;
		min-height: 205px;
		&.filter-location-list {
			border: 1px solid @dark-gray-color;
			padding: (0.667 * @grid-gutter-width);
			.form-check {
				padding: (0.1667 * @grid-gutter-width);
				label {
					font-weight: normal;
				}
			}
		}
	}
}
.dealer-list {
    .table-header-row {
        background: none;
        box-shadow: none;
    }
	.dealer-info-wrapper {
		padding: (0.667 * @grid-gutter-width) 0;
		a {
			cursor: pointer;
			text-decoration: underline;
		}
        &:nth-child(odd) {
            background: @odd-bg-color;
        }
        .contact-info-wrapper {
            @media only screen and (max-width : 568px) {
                margin-bottom: (0.33 * @grid-gutter-width);
            }
            @media only screen and (max-width : 480px) {
                margin-bottom: (0.33 * @grid-gutter-width);
            }
        }
        .contact-info {
            img {
                @media only screen and (max-width : 568px) {
                    margin-right: (2.2667 * @grid-gutter-width);
                }
                 @media only screen and (max-width : 480px) {
                     margin-right: (1.6 * @grid-gutter-width);
                 }
                 @media only screen and (max-width : 360px) {
                     margin-right: (1.133 * @grid-gutter-width);
                 }
            }
            @media only screen and (max-width : 568px) {
                margin-bottom: (0.33 * @grid-gutter-width);
            }
            @media only screen and (max-width : 480px) {
                margin-bottom: (0.33 * @grid-gutter-width);
            }
        }
        @media only screen and (max-width : 1024px) {
            padding: (0.667 * @grid-gutter-width);
        }
        .dealer-img {
             @media only screen and (max-width : 568px) {
                 text-align: left;
             }
        }
	}
}
.dealor-location-info {
	google-maps {
		@media only screen and (max-width : 480px) {
			height: 200px;
		}
	}
}
hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid @hr-color;
}
/*
    Content stylesheet
    Contains custom pages

    @package Solvisoft
    @author Richard Mauritz
    @since 18-10-2017
*/

.pageContent {
    padding-top: 40px;
}

.content-image {
    background-position: center;
    position: relative;
    overflow: hidden;
    height: 550px;
    top: -80px;
    padding: 120px 0;

    &:after {
        position: absolute;
        content: " ";
        top: 0;left: 0;
        height: 100%;
        width: 100%;

        .gradient(linear; #FDFDFD, transparent;);
    }

    .container {
        position: relative;
        z-index: 1;
        color: #000;
    }
}
/*
    Customer user role stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 27-10-2017
*/

#customerUserRole {
    #orderRegistration {
        background-color: #fff;
        padding: 15px;
        margin: 25px 0;

        .box-shadow(1px 1px 3px -1px #ccc);
    }
}
/*
    Stylesheet for error page

    @package Solvisoft
    @author Jan Konert
*/

.error-container {
    padding-top: 50px;
    padding-bottom: 50px;

    h3 {
        font-size:50px;
        margin-top: 0;
        font-weight: bold;
    }

    p {
        font-size: 30px;
        margin: 20px 0 50px;
    }

    i {
        font-size: 200px;
        color: @light-color;
    }
}

@media(max-width: 768px) {
    .error-container {
        padding-top: 20px;
        padding-bottom: 20px;

        h3  {
            font-size: 24px;
            font-weight: bold;
        }
        
        p {
            font-size: 20px;
            margin: 20px 0 50px;
        }

        i   {
            font-size:100px;
            margin-bottom:30px;
        }

    }
   
}

/*
    Favorites.less

    @package Solvisoft
    @author Richard Mauritz
*/

.btn-favorite {
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none;

    small,
    &:before {
        font-size: 13px;
    }

    small {
        padding-left: 5px;
    }
}

.btn-favorite.fa-star-o {
    color: @medium-gray-color;

    .transition(.33s);
}
.btn-favorite.fa-star {
    color: @fourth-color;
}

.btn-favorite:hover,
.btn-favorite:focus,
.btn-favorite:active {
    color: @fourth-color;

    .transition(.33s);
}
/*
    Favorites.less

    @package Solvisoft
    @author Richard Mauritz
*/

.btn-favorite {
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none;

    small,
    &:before {
        font-size: 13px;
    }

    small {
        padding-left: 5px;
    }
}

.btn-favorite.fa-star-o {
    color: @medium-gray-color;

    .transition(.33s);
}
.btn-favorite.fa-star {
    color: @fourth-color;
}

.btn-favorite:hover,
.btn-favorite:focus,
.btn-favorite:active {
    color: @fourth-color;

    .transition(.33s);
}

.italic-placeholder {font-style: italic !important}

.boxed
{
border:2px solid @medium-gray-color;
padding:10px;
border-radius: 5px;
}
/*
    Homepage stylesheet

    @package Solvisoft
    @author Jan Konert
*/

#about-us {
    background-color: #f9f9f9;
}

#facts {
    background: @secondary-color;
    color: #fff;
}
@import "/content/Default/LESS/views/News/news.less";
/*
    @package Solvisoft
    @author Jan Konert
*/

.news-page-item-wrapper {
    max-width: 800px;
    font-size: 18px;
}

.news-page-item-wrapper p {
    margin: 0 0 30px;
}

.news-page-detail-wrapper .news-detail-date {
    background-color: @fourth-color;
    display: inline-block;
    padding: 2px 10px;
    color: #ffffff;
    font-size: 15px;
    font-style: normal;
    margin: 20px 0;
    font-weight: bold;
}

.news-page-wrapper .news-page-item-wrapper h2 {
    color: @fourth-color;
    margin-bottom: 30px;
}



/*
    Profile stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

#profile {}
/*
    Register stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 11-12-2017
*/

.box {
    background: #fff;
    padding: 15px;
    border: 2px solid @light-gray-color;
    border-radius: @border-radius;
}

.choice {
    label {
        display: block;
        cursor: pointer;

        .transition(.33s);
    }

    input[type="radio"] {
        display: none;

        &:checked + label {
            border: 2px solid @thirth-color;

            .box-shadow(0 0 15px #ccc);
            .transition(.33s);
        }

        &:checked + .radio {
            border-color: @thirth-color;
        }

        &:hover + label {
            border: 2px solid @thirth-color;
            
            .transition(.33s);
        }
    }

    h3 {
        margin-top: 8px;
        font-weight: bold;
    }

    p {
        font-weight: normal;
    }
}
/*
    Item result filters stylesheets

    @package Solvisoft
    @author Richard Mauritz
*/

#filters .filter .filter-heading.collapsed {
    background: none;
}

#filters .filter .filter-heading[aria-expanded=true] {
    h4 {
        &:after {
            right: 27px;

            .font-awesome("\f0d7");
        }
    }
}

#filters .filter .filter-heading[aria-expanded=false] {
    h4 {
        &:after {
            right: 27px;

            .font-awesome("\f0d8");
        }
    }
}

#filters .filter .filter-heading h4 {
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

#filters .filter .filter-body .filter-type {
    display: block;
    padding: 10px;
    font-weight: normal;
    cursor: pointer;
}

#filters .filter .filter-heading.collapsed {
    background: none;
}

#filters .filter .filter-heading h4 {
    margin: 0;
    padding: 10px;
}

#filters .filter .filter-body .filter-type {
    display: block;
    padding: 10px;
    font-weight: normal;
}

/*
    Item result grid stylesheet

    @package Solvisoft
    @author Richard Mauritz
*/

.searchterm {
    color: @secondary-color;
    margin-bottom: 5px;
}

span.searchterm {
    display: inline-block;
}

.searchterm strong {
    position: relative;
    font-weight: normal;
    background: #dbe3ee;
    display: inline-block;
    padding: 0px 25px 2px 10px;
    border-radius: 12px;
    border: 1px solid @secondary-color;
    margin-left: 10px;
    top: -1px;

    span {
        font-size: 14px !important;
    }

    .fa {
        position: absolute;
        right: 5px;
        top: 4px;

        &:hover {
            opacity: 0.9;
            cursor: pointer;

            .hoverFade(.33s);
        }
    }
}

.searchterm-no-results {
    color: @fourth-color;
    white-space: nowrap;
}

[active-filters] {
    position: relative;
    margin-top: 5px;
    z-index: 10;
}

.search-suggestions .suggestions {
    display: block;
    padding: 0;
    margin: 0;
}

.search-suggestions .suggestions li {
    display: inline-block;
    border: 1px solid @thirth-color;
    padding: 10px;
    margin: 10px 5px 0 0;
    color: @thirth-color;
    font-weight: bold;
}

.search-suggestions .suggestions li:hover {
    cursor: pointer;
}

.item-results {
    display: block;
    color: #808080;
    font-size: 24px;
}

.page-assortment {
    margin-top: 10px;
}

.btn-configurator-spacer {
    margin-top: 4px;
}
/*
    Slider stylesheets

    @package Solvisoft
    @author Jan Konert
    @since 28-09-2017
    @editor Richard Mauritz
*/

#homeSlider .slider .carousel h1 {
    max-width: 700px;
    display: inline-block;
    font-size: 60px;
}

#homeSlider .carousel-caption .carousel-caption-inner p {
    color: #ffffff;
    font-size: 20px;
    max-width: 600px;
    display: inline-block;
}

#homeSlider .slider .carousel .btn-info {
    font-size: 20px;
}
/* Load core in favor of the old load color-scheme */
/* The core will from now on really be the core. If anything gets changed here it will change in all themes */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');

/* Color Schemes */
/* Edit this only! */
@primary-color: #fff;
@secondary-color: #212121;
@thirth-color: #f29300;
@fourth-color: #212121;
@fifth-color: #dbe3ee;
@btn-color-hover: #404040;
@btn-color-focus: @btn-color-hover;
@second-btn-color-hover: @primary-color;
@darkgray-color: #404040; // WARNING: This property will be deleted in future versions
@light-color: #9f9f9f;
@light-gray-color: #ededed;
@medium-gray-color: #ccc;
@dark-gray-color: #404040;
@medium-dark-grey:#6f6f6f;
@gradient-start-color: #1d9cd8;
@gradient-end-color: #0460aa;
@gray-primary-color: #a6a6a6;
@heading-color: #1e1e1e;
@font-color: #1e1e1e;
@border-radius: 3px;
@error-color: 	#8B0000;

@btn-warning-color:#a6a6a6;
@btn-alert-color:#FF4C4C;
@btn-success-color:#5cb85c;
@grid-gutter-width: 30px;
@alert-successBtn-color:#3c763d;
@alert-dangerBtn-color:#a94442;
@hr-color: #eee; 
@odd-bg-color: #f0f0f0;

/* Fonts */
@primary-font: 'Roboto Condensed', sans-serif;
@secondary-font: 'Alfa Slab One', cursive;
/* Header */
    /* Primary header */
    @primary-header-background-color: #fff;
    @primary-header-icon-color: @medium-gray-color;

    /* Secondary header */
    @secondary-header-background-color: @thirth-color;
    @secondary-header-border-top: none;

    /* Top bar */
    @top-bar-background-color: @fourth-color;
    @top-bar-font-size: 12px; 
    @top-bar-text-color: #fff;
    @top-bar-link-color: #fff;
    @top-bar-link-hover-color: #ccc;
    @top-bar-icon-color: #4d4e4c;

/* Hamburger menu */
@hamburger-menu-color: #fff;

/* Navigation */
@navigation-link-background-color: transparent;
@navigation-link-color: #fff;
@navigation-link-border-radius: 0;
@navigation-link-hover-color: @fourth-color;
@navigation-link-hover-background-color: @primary-color;
@navigation-link-hover-color: @secondary-color;
@navigation-link-focus-background-color: @primary-color;
@navigation-link-focus-color: @secondary-color;
@navigation-link-active-background-color: @primary-color;
@navigation-link-active-color: @secondary-color;

    /* Dropdown */
    @navigation-dropdown-background-color: @primary-color;
    @navigation-dropdop-padding: 10px 0px 10px 10px;
    @navigation-dropdown-link-background-color: transparent;
    @navigation-dropdown-link-color: @secondary-color;
    @navigation-dropdown-link-border-radius: 3px 0 0 3px;
    @navigation-dropdown-link-hover-background-color: @secondary-color;
    @navigation-dropdown-link-hover-color: @thirth-color;
    @navigation-dropdown-html-content-border: 1px solid #ededed;

/* Badge */
@badge-background-color: @secondary-color;
@badge-text-color: @thirth-color;

/* Label (component) */
@label-background-color: @thirth-color;
@label-text-color: @primary-color;

/* Tabs */
@tab-background-color: transparent;
@tab-text-color: @secondary-color;
@tab-border: 1px solid transparent;
@tab-hover-background-color: #FDFDFD;
@tab-hover-text-color: #000;
@tab-hover-border: 1px solid #ddd;
@tab-active-background-color: transparent;
@tab-active-text-color: #000;
@tab-active-border: 1px solid #ddd;

/* Collapse (accordion) */
@panel-background-color: transparent;
@panel-border: none;
@panel-border-radius: 0;
@panel-box-shadow: none;
@panel-heading-background-color: @secondary-color;
@panel-heading-color: #000;
@panel-heading-border-color: transparent;
@panel-heading-padding: 10px 15px;
@panel-heading-hover-background-color: #ededed;
@panel-heading-hover-color: #000;
@panel-heading-hover-border-color: transparent;
@panel-heading-active-background-color: #ededed;
@panel-heading-active-color: #000;
@panel-heading-active-border-color: transparent;
@panel-border-radius: 0;

/* Tooltip */
@tooltip-background-color: #333;
@tooltip-border: 1px solid #333;
@tooltip-box-shadow: 0 0 3px #ccc;
@tooltip-color: #fff;
@tooltip-font-size: 11px;
@tooltip-font-weight: 500;
@tooltip-arrow-color: #333;

/* Breadcrumbs */
@breadcrumb-container-background-color: transparent;
@breadcrumb-text-transform: uppercase;
@breadcrumb-link-color: @fourth-color;
@breadcrumb-link-hover-color: @thirth-color;
@breadcrumb-seperator: "\f105"; // Font awesome unicodes only!
@breadcrumb-seperator-color: #b7b7b7;
@breadcrumb-last-link-color: #000; // The current page, has pointer-events: none; on it!

/*Footer styling*/
@footer-background-color: #000;
@footer-text-color: @primary-color;
@footer-extra-content-row-color: #fff;
@footer-social-row-background-color: #fff;
@footer-social-row-text-color: #000;
@footer-social-row-text-color-hover: @fourth-color;
@footer-content-text-color: @primary-color;
@footer-content-link-text-color: @fifth-color;
@footer-content-link-text-color-hover: @thirth-color;
@footer-copyright-background-color: @fourth-color;
@footer-copyright-text-color: @primary-color;
@footer-copyright-link-color: @medium-gray-color;  

/* Buttons */
    /* Global button rules */
    @btn-padding: 10px;

@btn-basic-background-color: @thirth-color;
@btn-basic-text-color: @secondary-color;
@btn-basic-border: 1px solid @thirth-color;
@btn-basic-border-radius: @border-radius;
@btn-basic-hover-background-color: @thirth-color;
@btn-basic-hover-text-color: @secondary-color;
@btn-basic-hover-border: 1px solid @thirth-color;
@btn-basic-focus-background-color: @thirth-color;
@btn-basic-focus-text-color: @secondary-color;
@btn-basic-focus-border: 1px solid @thirth-color;

@btn-default-background-color: @thirth-color;
@btn-default-text-color: @secondary-color;
@btn-default-border: 1px solid @thirth-color;
@btn-default-border-radius: @border-radius;
@btn-default-hover-background-color: @thirth-color;
@btn-default-hover-text-color: @secondary-color;
@btn-default-hover-border: 1px solid @thirth-color;
@btn-default-focus-background-color: @thirth-color;
@btn-default-focus-text-color: @secondary-color;
@btn-default-focus-border: 1px solid @thirth-color;

@btn-primary-background-color: @thirth-color;
@btn-primary-text-color: @secondary-color;
@btn-primary-border: 1px solid @thirth-color;
@btn-primary-border-radius: @border-radius;
@btn-primary-hover-background-color: @thirth-color;
@btn-primary-hover-text-color: @secondary-color;
@btn-primary-hover-border: 1px solid @thirth-color;
@btn-primary-focus-background-color: @thirth-color;
@btn-primary-focus-text-color: @secondary-color;
@btn-primary-focus-border: 1px solid @secondary-color;

@btn-success-background-color: #86B400;
@btn-success-text-color: @primary-color;
@btn-success-border: 1px solid #86B400;
@btn-success-border-radius: @border-radius;
@btn-success-hover-background-color: #86af49;
@btn-success-hover-text-color: @primary-color;
@btn-success-hover-border: 1px solid #86af49;
@btn-success-focus-background-color: #86af49;
@btn-success-focus-text-color: @primary-color;
@btn-success-focus-border: 1px solid #86af49;

@btn-info-background-color: #034f84;
@btn-info-text-color: @primary-color;
@btn-info-border: 1px solid #0D47A1;
@btn-info-border-radius: @border-radius;
@btn-info-hover-background-color: #034f84;
@btn-info-hover-text-color: @primary-color;
@btn-info-hover-border: 1px solid #0D47A1;
@btn-info-focus-background-color: #034f84;
@btn-info-focus-text-color: @primary-color;
@btn-info-focus-border: 1px solid #0D47A1;

@btn-warning-background-color: #FF6F00;
@btn-warning-text-color: #fff;
@btn-warning-border: 1px solid #FF6F00;
@btn-warning-border-radius: @border-radius;
@btn-warning-hover-background-color: #FF6F00;
@btn-warning-hover-text-color: #fff;
@btn-warning-hover-border: 1px solid #FF6F00;
@btn-warning-focus-background-color: #FF6F00;
@btn-warning-focus-text-color: #fff;
@btn-warning-focus-border: 1px solid #FFA000;

@btn-danger-background-color: #E53935;
@btn-danger-text-color: @primary-color;
@btn-danger-border: 1px solid #B71C1C;
@btn-danger-border-radius: @border-radius;
@btn-danger-hover-background-color: #E53935;
@btn-danger-hover-text-color: @primary-color;
@btn-danger-hover-border: 1px solid #B71C1C;
@btn-danger-focus-background-color: #E53935;
@btn-danger-focus-text-color: @primary-color;
@btn-danger-focus-border: 1px solid #B71C1C;

@btn-link-background-color: #fff;
@btn-link-text-color: @secondary-color;
@btn-link-border: 1px solid @thirth-color;
@btn-link-border-radius: @border-radius;
@btn-link-hover-background-color: #fff;
@btn-link-hover-text-color: @secondary-color;
@btn-link-hover-border: 1px solid @thirth-color;
@btn-link-focus-background-color: #fff;
@btn-link-focus-text-color: @secondary-color;
@btn-link-focus-border: 1px solid @medium-gray-color;

    /* Button icons */
    @btn-basic-icon-color: #3c475c;
    @btn-default-icon-color: #3c475c;
    @btn-primary-icon-color: @secondary-color;
    @btn-success-icon-color: #fff;
    @btn-info-icon-color: #fff;
    @btn-warning-icon-color: #fff;
    @btn-danger-icon-color: #fff;
    @btn-link-icon-color: #000;

@danger-btn-color: #darkred;
@danger-btn-radius: 0;

/* Form control (bootstraps class form input fields) */
@form-control-family: @primary-font;
@form-control-font-weight: 300;
@form-control-padding: 10px;
@form-control-height: auto;
@form-control-border: 1px solid #ccc;
@form-control-border-radius: 0;
@form-control-input-group-height: 42px;
@form-control-input-group-padding: 0 5px;
@form-control-input-group-border: 1px solid @thirth-color;
@form-control-input-group-hover-border: 1px solid @thirth-color;
@form-control-input-group-focus-border: 1px solid @thirth-color;
    
    @form-control-hover-border: @thirth-color;
    @form-control-focus-border: @thirth-color;

    @form-control-error-border: 1px solid darkred;

/* Active */
@input-active-background: @primary-color;
@input-active-border: 1px solid @input-active-background;

@modal-header-background-color: #fff;
@modal-body-background-color: #fff;

@success-color: #6AC259;
@warning-color: @secondary-color;
@error-color: #B91D1B;
@info-color: #fff8c9;

/* Animations */
@spin-duration: 1s;

html {
    height: 100%;
}

body {
    background-color: #fdfdfd;
    min-height: 100%;
    display: flex;  
    flex-direction: column;
}

html, body, * {
    font-family: @primary-font;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make footer stick at the bottom */
main {
    flex: 1 0 auto;
}

/* clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

// The clearfix mixin
.clearfix() {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/* Some Specific Stuff */

.btn-link {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: @thirth-color;

    i.fa{
        color:@thirth-color;
    }
}

.btn-delete{
    background-color: transparent;
}

.btn-primary{
    color:#fff;

    i.fa{
        color:#fff;
    }
    &:hover{
        color:#fff;
    }
}

.close-menu{
    padding: 10px 15px;
    background: #006090;
    color: #fff;
    font-weight: 700;
    display: block;
    position: absolute;
    top: 25px;
    right: 10px;
}

.page-assortment .spinner {
    margin: 20px 0 0 0;
}

.mobile-menu{
    display:none;
    float: left;
    line-height: 55px;
    text-transform: uppercase;
    font-size: 16px;
    font-family:@primary-font;

    &:before{
        font-family:FontAwesome;
    }
}

.magnifying-glass,
item-slider-lightbox-component{
    display:none;
}

.input-validation-error{
    border:1px solid #cc0000;
}

/* Global CSS */

.content{
    padding:60px 0;

    &.grey{
        background:#ededed;
    }

    &.myTitle{
        padding:0;
        margin:20px 0 -20px;

         h1,h2,h3,h4,h5,h6{
            font-size:26px;
            font-family:@secondary-font;
        } 
        h2{
            margin-top: 10px;
            margin-bottom: -20px;
        }
        .export-pdf {
            background: #008ace;
            margin-top: 15px;
            color: #fff;
            border: 1px solid #008ace;

            i{
                color:#fff;
                padding:0 10px 0 0;
            }
            &:hover{
                background:#0D47A1;
            }
        }
    }

    &.hasSidebar{
        .container{
            padding-right:380px;
            min-height:700px;
            position:relative;

        }
    }
    .sidebar{
        position:absolute;
        top:0;
        right:0;
        margin-left:30px; 
        width:350px;
        background:#ededed;
        padding:30px;

        hr{
            border-top:1px solid #d8d8d8;
        }

        h1,h2,h3,h4,h5,h6{
            font-size:21px;
            font-weight:700;
            font-family:@primary-font;
        } 
    }
}

.myContent{
    text-align:left;

    h1,h2,h3,h4,h5,h6{
        font-family: 'Alfa Slab One', cursive;
        margin:0 0 15px;
    }

    p{
        line-height:30px;
    }
    img{
        margin-bottom:25px;
    }

    a{
        color:#008ace;
    }
}

.myBlocks{
    ul{
        margin: 0px -20px;
        padding:0;
        list-style:none;
        .clearfix();

        li{
            float:left;
            width: 560px;
            height:320px; 
            margin: 0 15px;
            background:#ededed;
            padding:35px;

            &:nth-child(2){
                color:#fff;
                background:#008ace;
                
                .btn{
                    background:#fff;
                    color:#008ace;
                    border:#fff;

                    &:before{
                        background:#ededed;
                    }
                }
                h2{
                    i{
                        color:#fff;
                    }
                }
            }


            .btn{
                padding:15px 70px;
            }

            h2{
                font-size:27px;
                margin:0 0 25px;
                font-family: 'Alfa Slab One', cursive;

                i{ 
                    margin-right: 10px;
                    font-size: 32px;
                    color: #f29300;
                    width: 30px;
                    height: 30px;
                    margin-top: -8px;
                }
            }
            p{
                line-height:26px;
                margin:0 0 25px;
                font-size:16px;
            }
        }
    }           
}

.myContact{

    input.form-control{
        margin-bottom:15px;
    }

    form{
        background: #ededed;
        padding: 30px;
    }

    button{
        margin-top:15px;
    }
}

.myIntro{
    text-align:center;

    h2{
        font-family: 'Alfa Slab One', cursive;
        margin:0 0 35px;
    }

    p{
        line-height: 26px;
        width:925px;
        margin:0 auto 35px;
    }
}

.myAssortmentTeaser{
    text-align:center;

    h2{
         font-family: 'Alfa Slab One', cursive;
         font-size:28px;
         margin:0 0 25px;
    }

    .btn{ 
        margin-top:40px;     
        padding: 10px 35px; 
    }

    ul{
        margin: 50px -20px 0;
        padding:0;
        list-style:none;
        .clearfix();

        li{
            position:relative;
            float:left;
            width: 360px;
            height:300px; 
            margin: 0 15px;
            background:#fff;

            h3{
                position:absolute;
                top:0;
                left:0;
                padding:15px 50px;
                background:#008ace;
                margin:0;
                font-size:16px;
                color:#fff;
                font-weight:normal;
            }
            img{
                position:absolute;
                top:50%;
                left:50%;
                max-width:190px;
                transform: translate(-50%, -50%);
                max-height: 175px;
            }
            span{
                position:absolute;
                bottom:15px;
                right:15px;
                color:#f29300;
                
                i{
                    margin-left:15px;
                }
            }
        }
    }
}

.myProduct{
   
    .item-slider{
        margin:0 !important;

        .slider-block{ 
            border:2px solid #ededed;
            width: 100%;
            height: 400px;
            position:relative;
            overflow: hidden;

            img{
                position:absolute;
                top:50%;
                left:50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    .item-information{
        .item-description{
            line-height: 30px;
        }
        .item-specifications{
            h3{
                font-size:18px;
                font-weight:700;
                margin:0 0 15px;    
            }
            ul{
                list-style:none;
                margin:0; 
                padding:0;

                li{
                    position:relative;
                    padding:10px;
                    background:rgba(0,138,206,0.15);

                    span{
                        position:absolute;
                        top:50%;
                        left:10px;
                        transform: translate(0%, -50%);
                    }
                    &:nth-child(2n){
                        background:#fff;
                    }
                }
            }
        }
        .item-order{
            margin:30px 0;

            input{
                float:left;
                font-family:@primary-font;
                width: 60px;
                margin-right: 25px;
            }
            .btn{
                color:#fff;
                float:left;
                width: 200px;

                i{
                    color:#fff;
                    padding: 0 10px 0 0;    
                }
            }
        }
    }
}

/* Shopping Cart */
.order-nav-tabs{
    display:none;
}



@media (max-width: 1200px) { 
    			
    header .custom-header .logo a{
        width:275px;
    }
    .myBlocks ul li{
        width:460px;
        height:auto;
    }

    .myAssortmentTeaser ul{
		margin:0px;

        li{
            width:32%;
		    margin:0 2% 0 0;

            &:last-child{
                margin-right:0;
            }
        }
	}

}

@media (max-width: 992px) { 

    .myBlocks ul li{
        width:350px;
        height:auto;
    }
    .myIntro p,
    header .extended-header .filler{
        width:100%;
    }

    .menu .nav.navbar-nav{
        display:none;
    }
    .top-search{
        display:none;
    }

    .mobile-menu{
        display:block;

        
    }
    mobile-menu .menu .nav.navbar-nav{
        display:block;
    }
    header .custom-header .logo a{
        top:0px;
    }

}

@media (max-width: 768px) {  

    header .custom-header .logo a{
        top:0px;
    }

    .myBlocks ul{
        margin:0;

        li{
            width:100%;
            height:auto;
            margin:0 0 25px;
        }
    } 

    .myAssortmentTeaser ul{
        margin:0;
    }
	  
    .content.hasSidebar .container{
        padding-right: 15px;
    }  
    .content .sidebar{
        position: relative;
        width: 100%;
        margin: 0;
    }

}
	
@media (max-width: 576px) { 
	
    .myAssortmentTeaser ul{ 
		margin:0 auto;

        li{
            width:100%;
		    margin:0 0 20px;
        }
	}

    header .custom-header .logo a {
        width: 200px;
        top: 20px !important;
    }

    .myAssortmentTeaser ul li h3 {
        width: 170px;
    }

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

    .myAssortmentTeaser ul{
		width:100%;
	}
    .filler{
        display:none;
    }

    .myBlocks ul li .btn {
                  padding: 10px 0px;
              }

}

@media (max-width: 767px) {
     .margin-top-mobile {
         margin-top:40px;
     }
}