@import "/content/Default/LESS/animate.min.less";
/*
    Solvisoft components stylesheets

    BETA

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

// Components can also be initialized with a class
div[class*="component"] {
    display: block;
}

/* Active filters component */
active-filters-component {
    display: block;
    margin-bottom: 15px;

    span {
        margin-right: 5px;
        color: #737373;
    }
}

/* Webshop filters component */
webshop-filters-component {
    display: block;

    ul, li, span {
        display: block;
        margin: 0;
        padding: 0;
    }

    span {}

    ul {
        > span {
            position: relative;
            display: block;
            padding: 10px;
            font-weight: bold;

            .transition(.12s);

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

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

            &:hover {
                cursor: pointer;
            }

            &.collapsed {
                &::after {
                    right: 15px;
                    top: 10px;

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

        > ul > li {
            padding: 10px;

            > label {
                display: block;
                font-weight: normal;
                margin-bottom: 0;
                padding-left: 10px;
                padding-right: 15px;
                cursor: pointer;

                > label {
                    position: absolute !important;
                    top: 13px;
                    right: 10px;
                    cursor: pointer;
                }
            }
        }
    }
}

item-slider-component {
    display: block;
}

item-slider-lightbox-component {
    display: none;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    top: 0;left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;

    .slider-control {
        background-color: transparent;
        position: absolute;
        border: none;
        color: #000;
        font-size: 44px;
        top: 50%;
        transform: translateY(-50%);

        &:focus {
            outline: none;
        }
    }

    .next-slider-item {
        right: 20px;
    }

    .previous-slider-item {
        left: 20px;
    }

    .close-slider {
        top: 40px;
        right: 20px;
    }

    .lighbox-component-content {
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%, -50%);
    }
}
/* Defaults */
@import "/content/Default/LESS/core.less";
@import "/content/Default/LESS/custom.input.fields.less";
/*
    @package Solvisoft
    @author Jan Konert
*/

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";
/*
    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";
@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";
/*
    Notifications stylesheet

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

.notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;

    .box-shadow(0 0 3px @secondary-color);
}

.notification-success {
    background: #3f51b5;
    color: #fff;
    z-index: 400;
}
/*
    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";
/*
    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
*/

.badge {
    background-color: @light-gray-color;
    color: @secondary-color;
}
/*
    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";
/*
    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 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
*/

.nav {
    > li {
        margin-bottom: 0;
        
        > a {
            background-color: @tab-background-color;
            color: @tab-text-color;

            &:hover,
            &:focus {
                background-color: @tab-background-color;
                outline: none;
            }
        }
    }
}

.nav-tabs {
    > li {
        position: relative;
        margin-bottom: 0;
        top: 1px;

        > a {
            background-color: @tab-background-color;
            border-radius: 0;
            border: @tab-border;
            color: @tab-text-color;
        }

        &:hover > a {
            background-color: @tab-hover-background-color;
            color: @tab-hover-text-color;
            border: @tab-hover-border;
            border-bottom: 1px solid #FDFDFD;

            &:active,
            &:hover,
            &:focus {
                background-color: @tab-hover-background-color;
                color: @tab-hover-text-color;
                border: @tab-hover-border;
                border-bottom: 1px solid #FDFDFD;
            }
        }

        &.active > a {
            background-color: @tab-active-background-color;
            color: @tab-active-text-color;
            border: @tab-active-border;
            border-bottom: 1px solid #FDFDFD;

            &:active,
            &:hover,
            &:focus {
                background-color: @tab-active-background-color;
                color: @tab-active-text-color;
                border: @tab-active-border;
                border-bottom: 1px solid #FDFDFD;
            }
        }
    }
}
/*
	Bootstrap tooltip stylesheet
	
	@package Solvisoft
	@author	Richard Mauritz
	@since 04-10-2017
*/

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

    @package Solvisoft
    @author Richard Mauritz
*/

.form-control {
    font-family: @secondary-font;
    font-weight: 300;
    padding: 10px;
    height: auto;
    border-radius: 5px;
}

.form-control.form-error,
.form-control.ng-invalid {
    border: 1px solid darkred;
}

.form-control,
.form-control:hover,
.form-control:focus {

    .box-shadow(none);
}

.form-control:hover,
.form-control:focus  {
    border-color: @thirth-color;
}

.input-group-addon {
    background-color: @light-gray-color;
    border-color: @light-gray-color;
    color: @secondary-color;

    .transition(.33s);

    .fa {
        margin-top: -2px;
    }
}

.input-group {
    .form-control {
        border: 1px solid @light-gray-color;
    }

    .form-control:focus {
        border-color: @thirth-color;
    }

    .form-control:focus + span {
        background-color: @thirth-color;
        border-color: @thirth-color;
        color: @primary-color;

        .transition(.33s);
    }
}

/*
    Buttons
*/
.btn {
    background-color: @btn-basic-background-color;
    border: @btn-basic-border;
    border-radius: @btn-basic-border-radius;
    color: @btn-basic-text-color;
    // For hover effect
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    overflow: hidden;
    outline: none;
    height: auto;
    padding: 10px;

     &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-basic-hover-background-color;
        border: @btn-basic-hover-border;
        color: @btn-basic-hover-text-color;

        &:before {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
    }

    &:active, &.active, &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus  {
        background-color: @btn-basic-hover-background-color;
        border: @btn-basic-hover-border;
        color: @btn-basic-hover-text-color;
        outline: none;

        .box-shadow(none);
    }

    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: @border-radius;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    &:before {
        background: darken(@btn-basic-background-color, 5%);
    }

    // Fix icons if they exist
    .fa {
        margin-top: -3px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.btn-default {
    .gradient(linear; darken(@btn-default-background-color, 5%), @btn-default-background-color);

    border: @btn-default-border;
    border-radius: @btn-default-border-radius;
    color: @btn-default-text-color;

    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-default-hover-background-color;
        border: @btn-default-hover-border;
        color: @btn-default-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-default-hover-background-color;
        border: @btn-default-hover-border;
        color: @btn-default-hover-text-color;
    }

    &:before {
        background: darken(@btn-default-background-color, 5%);
    }
}

.btn-primary {
    .gradient(linear; darken(@btn-primary-background-color, 5%), @btn-primary-background-color);

    border: @btn-primary-border;
    border-radius: @btn-primary-border-radius;
    color: @btn-primary-text-color;

    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-primary-hover-background-color;
        border: @btn-primary-hover-border;
        color: @btn-primary-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-primary-hover-background-color;
        border: @btn-primary-hover-border;
        color: @btn-primary-hover-text-color;
    }

    &:before {
        background: darken(@btn-primary-background-color, 5%);
    }
}

.btn-success {
    .gradient(linear; darken(@btn-success-background-color, 5%), @btn-success-background-color);

    border: @btn-success-border;
    border-radius: @btn-success-border-radius;
    color: @btn-success-text-color;
   
    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-success-hover-background-color;
        border: @btn-success-hover-border;
        color: @btn-success-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-success-hover-background-color;
        border: @btn-success-hover-border;
        color: @btn-success-hover-text-color;
    }

    &:after {
       right: 10px;

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

    &:before {
        background: darken(@btn-success-background-color, 5%);
    }
}

.btn-info {
    background-color: @btn-info-background-color;
    border: @btn-info-border;
    border-radius: @btn-info-border-radius;
    color: @btn-info-text-color;
    padding-right: 30px;

    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-info-hover-background-color;
        border: @btn-info-hover-border;
        color: @btn-info-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-info-hover-background-color;
        border: @btn-info-hover-border;
        color: @btn-info-hover-text-color;
    }

     &:after {
       right: 10px;

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

    &:before {
        background: darken(@btn-info-background-color, 5%);
    }
}

.btn-warning {
    background-color: @btn-warning-background-color;
    border: @btn-warning-border;
    border-radius: @btn-warning-border-radius;
    color: @btn-warning-text-color;
    padding-right: 30px;

   &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-warning-hover-background-color;
        border: @btn-warning-hover-border;
        color: @btn-warning-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-warning-hover-background-color;
        border: @btn-warning-hover-border;
        color: @btn-warning-hover-text-color;
    }

    &:after {
        right: 10px;

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

    &:before {
        background: darken(@btn-warning-background-color, 5%);
    }
}

.btn-danger {
    background-color: @btn-danger-background-color;
    border: @btn-danger-border;
    border-radius: @btn-danger-border-radius;
    color: @btn-danger-text-color;
    padding-right: 30px;

    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-danger-hover-background-color;
        border: @btn-danger-hover-border;
        color: @btn-danger-hover-text-color;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-danger-hover-background-color;
        border: @btn-danger-hover-border;
        color: @btn-danger-hover-text-color;
    }

    &:after {
       right: 10px;

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

    &:before {
        background: darken(@btn-danger-background-color, 5%);
    }
}

.btn-link {
    position: relative;
    padding-left: 2px;
    background-color: @btn-link-background-color;
    border: @btn-link-border;
    border-radius: @btn-link-border-radius;
    color: @btn-link-text-color;
    text-align: left;
    overflow: visible;

    &:hover, &:active:hover, &.active:hover, &.disabled:hover, &:disabled:hover {
        background-color: @btn-link-hover-background-color;
        border: @btn-link-hover-border;
        color: @btn-link-hover-text-color;
        text-decoration: none;
    }

    &:focus, &:active:focus, &.active:focus, &.disabled:focus, &:disabled:focus {
        background-color: @btn-link-focus-background-color;
        border: @btn-link-focus-border;
        color: @btn-link-focus-text-color;
    }

    &::after {
        position: absolute;
        content: " ";
        background-color: @thirth-color;
        width: 110%;
        height: 2px;
        bottom: 0;
        left: 0;

        .transition(width .33s ease-in-out);
    }

    &:before {
        background: transparent;
    }

    &:hover::after {
        width: 120%;
        background-color: @btn-link-hover-text-color;

        .transition(width .33s ease-in-out);
    }
}

.btn-delete {
    background-color: #fdfdfd;
    border-radius: @border-radius;
    border: none;
    outline: none;
}

.btn-favorite {
    .fa {
        position: relative;
        top: -2px;
    }
}

.btn-lg, .btn-group-lg > .btn {
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 80px;
    padding-right: 80px;
}
/*
	Bootstrap navbars stylesheet

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

.navbar-fixed-bottom {

	.close {
		padding: 15px;
		outline: none;
		font-size: 44px;

		.transition(.33s);

		&:hover {

			.transition(.33s);
		}
	}

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

.nav.navbar-nav {
    margin: 0;

    > li {

        > a {
            background-color: @navigation-link-background-color;
            color: @navigation-link-color;
            
            &.has-dropdown {
                padding-right: 35px;

                &::after {
                    right: 15px;

                    .font-awesome("\f107")
                }
            }
        }
        
        &:hover > a {
            background-color: @navigation-link-hover-background-color;
            color: @navigation-link-hover-color;
        }

        &:focus > a {
            background-color: @navigation-link-focus-background-color;
            color: @navigation-link-focus-color;
        }

        &:active > a, 
        &.active > a,
        &.isActive > a {
            background-color: @navigation-link-active-background-color;
            color: @navigation-link-active-color;
        }

        > .dropdown {
            display: none;
            background-color: @primary-color;
            border-top: 1px solid @thirth-color;
            position: absolute;
            z-index: 200;
            min-width: 200px;

            li, a {
                display: block;
                margin: 0;
                padding: 0;
                float: none;
            }

            > li {
                > a {
                    padding: 10px;
                }
            }

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

        &:hover {
            > .dropdown {
                display: block;
            }
        }
    }

    dropdown-menu {
        display: none;
    }

    dropdown-menu {
        background-color: @navigation-dropdown-background-color;
        position: absolute;
        margin-top: -3px;
        border-bottom-left-radius: @border-radius;
        border-bottom-right-radius: @border-radius;
        border-top-right-radius: @border-radius;
        overflow: hidden;
        opacity: 1;

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

        dropdown-html {
            background-color:#b3b5a5; /* Fold-out menu -color*/
            display: none;
            min-width: 700px;
            opacity: 1;
        }

        > ul {
            display: block;
            padding: 10px;
            margin: 0;
            min-width: 250px;
            border-right: @navigation-dropdown-html-content-border;

            > li,
            > li > a {
                display: block;
            }

            > li > a {
                background-color: @navigation-dropdown-link-background-color;
                color: @navigation-dropdown-link-color;
            }

            > li {
                padding-right: 0;

                &:hover,
                &.active {
                    > a {
                        background-color: @navigation-dropdown-link-hover-background-color;
                        color: @navigation-dropdown-link-hover-color;
                        border-radius: @border-radius;
                        text-decoration: none;
                    }
                }
            }

            > li > a {
                padding: 10px;

                &.has-content-menu {
                    &::after {
                        right: 15px;

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

    > li:hover {
        dropdown-menu {
            display: flex;

            .animation(fade, .12s, forwards)
        }
    }
}
@import "/content/Default/LESS/classes.less";

/* Flex grid */
.flex-container {
    display: -ms-flexbox;
    display: -webkit-inline-box;
    display: flex;
    -ms-flex-wrap: wrap;    
    flex-wrap: wrap;
}

.flex-child {
    margin: 0 -1px;
}

.flex-center {
    justify-content: center;
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    .flex-align-items-center-xs {
        align-items: center;
    }

    .flex-align-items-start-xs {
        align-items: flex-start;
    }

    .flex-align-items-end-xs {
        align-items: flex-end;
    }

    .flex-align-item-baseline-xs {
        align-items: baseline;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .flex-align-items-center-sm {
        align-items: center;
    }

    .flex-align-items-start-sm {
        align-items: flex-start;
    }

    .flex-align-items-end-sm {
        align-items: flex-end;
    }

    .flex-align-item-baseline-sm {
        align-items: baseline;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .flex-align-items-center-md {
        align-items: center;
    }

    .flex-align-items-start-md {
        align-items: flex-start;
    }

    .flex-align-items-end-md {
        align-items: flex-end;
    }

    .flex-align-item-baseline-md {
        align-items: baseline;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .flex-align-items-center-lg {
        align-items: center;
    }

    .flex-align-items-start-lg {
        align-items: flex-start;
    }

    .flex-align-items-end-lg {
        align-items: flex-end;
    }

    .flex-align-item-baseline-lg {
        align-items: baseline;
    }
}

@media (max-width: 767px)
{
    .flexbox {
        display: block;
        flex-wrap: unset;

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

        .item {
            flex-grow: unset;
        }
    }
}

.static {
    position: static !important;
}
/*
    Breadcrumbs stylesheet

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

#breadcrumb {
    background-color: @breadcrumb-container-background-color;
    padding: 10px 0;
    text-transform: @breadcrumb-text-transform;

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

    ol {
        li {
            position: relative;
            display: inline-block;

            ~ li {
                padding-left: 22px;

                &::after {
                    position: absolute;
                    top: 0;left: 8px;
                    color: @breadcrumb-seperator-color;

                    .font-awesome(@breadcrumb-seperator);
                }
            }

           > a {
                color: @breadcrumb-link-color;

                .transition(.12s);

                &:hover {
                    color: @breadcrumb-link-hover-color;
                    text-decoration: none;
                }
            }

            &:last-child {
                > a {
                    color: @breadcrumb-last-link-color;
                    pointer-events: none;
                }
            }
        }
    }
}
/*
    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;
        }
    }
}
/*
    No sub category stylesheet

    @package Solvisoft
    @author Richard Mauritz
    @since 05-10-2017
    @editor Jeroen de jager
*/

.category-row {
    border-radius: @border-radius;
    margin: 15px 0;
    height: ~"calc(100% - 15px)";

    a {
        position: relative;
        display: block;
        color: #fff;
        padding: 10px;

        // Prevent breaking layout
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .fa {
            position: absolute;
            right: 10px;
            top: 13px;
        }
    }
}
/*
    Categorie tile navigation row stylesheet

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

.category-tile {
    border-radius: @border-radius;
    margin: 15px 0;

    .category-link {
        position: relative;
        display: block;
        color: #fff;
        padding: 10px;

        // Prevent breaking layout
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .fa {
            position: absolute;
            right: 10px;
            top: 13px;
        }
    }

    &.category-image {
        position: relative;

        .category-image-content {
            position: absolute;
            padding: 15px;
            font-size: 14px;
            color: #fff;
            bottom: 0;
            left: 0;
            width: 100%;

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

.sub-categories {
    max-height: 500px;
    transition: max-height 0.2s ease-in;

    &.folded {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease-in;
    }

    .child-categories,
    .child-categories li,
    .child-categories li a {
        display: block;
        padding: 0;
        margin: 0;

        a {
            position: relative;
            padding: 10px;
            border-bottom: 1px solid @sixth-color;

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

                .font-awesome("\f105");
            }
        }
    }
}
/*
    Filter partial stylesheet

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

#filters {

            .title-filter {
                    background-color: #B68A6C;
                    width: 100%;
                    padding: 6px 8px;

            span {
                color:@primary-color;
            }

        }


    .filter {



        .filter-header,
        .filter-heading {
            &.collapsed {
                background: none;
            }
        }

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

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

            &[aria-expanded=false] {
                h4 {
                    &:after {
                        right: 27px;

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

            h4 {
                font-size: 16px;
                margin: 0;
                padding: 10px;
                font-weight: bold;
                cursor: pointer;
            }
        }

        .filter-body {
            .filter-type {
                display: block;
                padding: 10px;
                font-weight: normal;
                cursor: pointer;
            }
        }
    }
}
/*
    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
*/

.product-price {
    display: block;
    font-size: 24px;
}

.item-relation-link {
    font-size: 18px;
}

.item-relation-price {
    margin-top: 15px;
}
/*
    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 {
    padding: 0 15px 15px;
}

.item-relations .item-relation-description {
    padding: 0 15px;
}

.item-relations .item-relation-link {
    padding: 15px;
}
/*
    Language selector stylesheet

    @package Solvisoft
    @author Jeroen de Jager
*/

.nav.navbar-nav .language .language-dropdown {
    padding: 10px;
    position: absolute;
    left: -102px;
}

.nav.navbar-nav .language .language-dropdown .languages {
    > li > a {
        display: block;
        text-align: right;
        color: @secondary-color !important;
        font-size: 18px;
        line-height: 1.78;
    }
}

/*
    @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-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
*/

.order-nav-tabs {
    background: #fff;
    overflow: visible;
    border-bottom: 0;
    padding: 15px 15px 30px 25px;
    margin-bottom: 20px;

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

    li {
        padding-left: 0;

        span {
            background: #fff;
            position: relative;
            display: inline-block;
            border: 1px solid @medium-gray-color;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            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: 91px;
                transform: translate(-50%);
            }

            small {
                position: absolute;
                top: 45px;
                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: 50px;

                &:before {
                    width: 51px;
                    left: 65px;
                }
            }
        }
    }
}

@media (max-width: 600px) {
    .order-nav-tabs {
        padding: 15px 15px 30px 25px;

        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-header {
    min-height: 350px;
    max-height: 350px;
    background-position: bottom !important;

    .content {
        color: #fff;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.page-article-footer {
    background: @secondary-color;
    padding-top: 40px;
    padding-bottom: 40px;
    color: @primary-color;
    border-bottom: 1px solid @medium-gray-color;
}
/*
    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 @secondary-color;
}

#searchform input.form-control:focus + button,
#searchformmobile input.form-control:focus + button {
    color: @secondary-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: 15px;

    > a {
        position: relative;

        &:hover {
            text-decoration: none;
        }

        .fa {
            color: @medium-gray-color;
            font-size: 24px;
        }

        .badge {
            background-color: @dark-gray-color;
            color: @primary-color;
            position: absolute;
            top: -8px;right: -12px;
        }
    }
}

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: 45px;right: 15px;
    padding: 15px;
    display: none;

    .box-shadow(1px 4px 15px -3px #b7b7b7);

    h3 {
        margin: 15px 0 25px;
    }

    shopping-cart-item {
        border-bottom: 1px solid @light-gray-color;
        padding: 10px;
        margin-bottom: 10px;
        
        a {
            color: @font-color !important;
        }

        .fa {
            background-color: transparent;
            border: 0;
            color: @font-color !important;
            margin-top: -3px;
        }
    }

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

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

        shopping-cart-total {
            padding: 10px;

            &:last-child {
                color: @thirth-color;
            }
        }
    }

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

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

@media (max-width: 396px) {
    shopping-cart {
        min-width: 340px;
        max-width: 340px;
    }
}
/*
    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: 140px;
        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: 400px;
        /*
            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;

        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;
    }
}
/*
    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;
    }
}

.addToFavoriteList {
    padding-top: 20px;
    margin-left:15px;
    margin-bottom:10px;
    border: 1px solid @light-gray-color;
    }
/*
    New basket item popup stylesheet
*/

@import "/content/Default/LESS/Partials/Templates/NewBasketItemPopup.less";
/*
    Login page or login template popup

    @package Solvisoft
    @author Richard Mauritz
*/

.forgot_password_form {
    display: none;
}

/*
    Article slider stylesheet

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

#articleSlider {
    .item {
        padding: 15px;
        max-height: 175px;
        
        img {
            max-height: 150px;
        }

        .magnifying-glass {
            background-color: @thirth-color;
            position: absolute;
            right: 15px;
            bottom: 15px;
            color: @primary-color;
            height: 30px;
            width: 30px;

            .fa {
                font-size: 18px;
                position: absolute;
                top: 50%;left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .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.
/*
    Footer stylesheet

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

/*Complete Footer*/
#footer {
    background-color: @footer-background-color;
    color: @footer-text-color;
}

/*Complete Footer*/
#footer .footer-extra-content-row {
    color: @footer-extra-content-row-color;
    padding: 80px 0;
}

/*Social Row*/

#footer .footer-social-row {
    background: @footer-social-row-background-color;
    padding: 15px 0;

    h3 {
        margin: 0;
    }

    h3, a {
        color: @footer-social-row-text-color;
        font-size: 18px;
    }

    a:hover {
        color: @footer-social-row-text-color-hover;
        text-decoration: none;
    }
}


/*Footer section*/

#footer #footer-note {
    h1, h2, h3,
    h4, h5, h6,
    span, p {
        color: @footer-content-text-color;
        font-weight: 600;
        font-size: 14px;
    }

    a, small {
        color: @footer-content-link-text-color;
        font-size: 14px;
    }

    a:hover {
        color: @footer-content-link-text-color-hover;
    }
}


/*Copyright*/

#footer #footer-copyright {
    padding: 15px 0;
    color: @footer-copyright-text-color;
    background-color: @footer-copyright-background-color;
    font-size: 11px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .5);

    a {
        color: @footer-copyright-link-color;
        text-decoration: underline;
    }
}

/*
    Header stylesheets

    @author     Richard Mauritz
    @package    Solvisoft
*/

header {
    position: relative;
    z-index: 50;

    .top-bar {
        background-color: @top-bar-background-color;
        font-size: @top-bar-font-size;
        color: @top-bar-text-color;

        .fa {
            color: @top-bar-icon-color;
        }

        a {
            color: @top-bar-link-color !important;
        }

        .navbar-nav {
            > li > a {
                padding: 10px;
            }
        }
    }

    .primary-header {
        background-color: @primary-header-background-color;
        padding-top: 20px;
        padding-bottom: 20px;

        .fa {
            color: @primary-header-icon-color;
        }

        &.fixed-top {
            z-index: 200;
            padding-top: 10px;
            padding-bottom: 10px;

            img {
                max-width: 200px;
            }

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

    .secondary-header {
        background-color: @secondary-header-background-color;
        border-bottom-left-radius: @border-radius;
        border-bottom-right-radius: @border-radius;
    }
}
/*
    Mobile menu stylesheet

    @package    Solvisoft
    @author     Richard Mauritz
*/

@mobile-heading-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: @mobile-menu-background-color;
    position: fixed;
    height: 100vh;
    top: 0;left: -100%;
    overflow: auto;
    z-index: 3000;

    .box-shadow(inset -2px 0px 10px -5px darken(@mobile-menu-background-color, 100%)); // This allways translates into #000000

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

    .account {
        background-color: #212121;
        padding: 20px 10px;

        .gravatar, .user {
            float: left;
        }

        .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;
            }
        }

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

        a {
            color: #999;
            font-size: 12px;
        }
    }

    .search {
        padding: 10px;

        #searchformmobile {
            .form-control {
                background-color: #111;
                border: 0;
                color: #fff;
            }
        }
    }

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

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

            > a {
                color: @mobile-menu-link-color;
                padding: 10px 10px 10px 20px;
            }
        }

        > li.isActive,
        > li:hover {
            > a {
                background-color: transparent;
                color: @mobile-menu-link-hover-color;
                border-radius: 0;
                cursor: pointer;
            }

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

        > li::after {
            top: 10px;right: 15px;
            color: @mobile-menu-link-color;

            .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
*/

.category-header-image {
    background-color: #333;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 250px;
}
/*
    Article detail page

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

.product-details {
    margin-top: 40px;
    margin-bottom: 40px;

    h1 {
        margin-top: 0;
    }

    .item-image {
        background-color: @primary-color;
        border: 1px solid @sixth-color;
        margin-bottom: 80px;
        cursor: pointer;
    }

    .item-comment-small {
        color: @thirth-color;
        margin: 15px 0;
        font-size: 18px;
        line-height: 1.78;
    }

    .specification-box {
        .row {
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}

.item-comment {
    background-color: @secondary-color;
    color: @primary-color;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 18px;
    line-height: 1.78;

    h3 {
        margin-bottom: 15px;
    }
}

.item-controls {
    margin: 30px 0;

    .item-price {
        font-size: 40px;
    }
}

.item-downloads {
    .item-download {
        padding: 20px;
        margin-bottom: 15px;

        a {
            color: @thirth-color;
            border-bottom: 2px solid @thirth-color;

            &:hover {
                text-decoration: none;
                color: @secondary-color;
            }
        }
    }
}

.title-detail {
    margin-top: 0px;
    line-height: 32px;
}
/*
    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
*/

#shopping-list {
    border-bottom: 2px solid @light-gray-color;
    padding-bottom: 25px;

    .shopping-item {
        padding-left: 0;
        padding-right: 0;
    }

    table {
        td {
            padding: 0 15px;
        }
    }

    .shopping-item-image {
        width: 30%;

        img {
             max-width: 150px;
             min-width: 150px;
        }
    }

    .shopping-item-quanity {
        float: right;
        max-width: 120px;
        margin-bottom: 10px;
    }
}

.grid-control {
    border-bottom: 2px solid @light-gray-color;
    padding-bottom: 15px;

    .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: 18px;
        color: @medium-gray-color;
        padding: 0;
        padding-left: 5px;

        .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: 10px 15px;
    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: 18px;

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

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

.stock-icon {
    background-color: transparent;
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-right: 5px;
    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 {
    display: flex;
    flex-wrap: wrap;
    padding-right: 10px;

    .shopping-item {
        padding-bottom: 15px;
        height: 100%;
    }

    .grid {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 5px;
    }

    .shopping-item .shopping-item-add {
        margin-top: 15px;
    }

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

    .shopping-item .shopping-item-image img {
        max-width: 100px;
        max-height: 150px;
        display: block;
        margin: 0 auto;
        padding: 15px 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 .btn-delete {
    position: relative;
    background: none;
    border: none;
    margin-top: -10px;
}

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

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

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

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

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

        h4 {
            margin: 0;
        }

        img {
            max-height: 100px;
        }
    }

    .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;
            }
        }
    }
}

 @media (max-width: 767px) {
    .item-additional-info {
        margin-bottom:20px;
    }
    
}
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 {
    position: relative;
    margin-top: 30px;

    iframe {
        max-width: 100%;
        max-height: 100%;
    }

    .google-map-info-box {
        position: relative;
        background: #fff;
        padding: 15px;
        margin-top: -5px;
        border: 2px solid @light-gray-color;
    }
}

.contact-address-box {
    background: #fff;
    border: 2px solid @light-gray-color;
    padding: 15px;
    border-radius: @border-radius;
    margin-top: 25px;
}
/*
    Content stylesheet
    Contains custom pages

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

.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;
    margin-top: 10px;

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

    small {
        padding-left: 5px;
        color: @medium-gray-color;
        font-family: @primary-font;
    }
}

.btn-favorite.fa-star {
    color: @thirth-color;

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

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

    .transition(.33s);
}
/*
    Homepage stylesheet

    @package Solvisoft
    @author Jan Konert
*/

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

#facts {
    background: @secondary-color;
    color: #fff;
    padding: 0;
}
/*
    News stylesheet

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

.news-item {
    position: relative;
    min-height: 440px;
    margin-bottom: 30px;


    .link {
        position: absolute;
        bottom: 0;
        left: 30px;
        /*color: @thirth-color;*/
        text-decoration: none;
        background-color: @btn-link-hover-background-color;

        /*&:hover {
            color: @secondary-color;
        }*/
    }

    .news-item-content {
        padding: 15px 0;

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

.news-item-image {
    position: relative;
    color: #fff;
    overflow: hidden;
    border-top-left-radius: @border-radius;
    border-top-right-radius: @border-radius;

    .overlay {
        position: absolute;
        bottom: 0;left: 0;
        width: 100%;
        padding: 15px 0;

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

    .title {
        font-size: 18px;
        color: #fff;
    }

    .date {
        font-size: 11px;
        color: #fff;
    }

    .box-shadow(0 0 15px #ccc);
}
/*
    @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-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 {
        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;
    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;
}

#items {
    margin-top: 10px;
}

#items .item-row,
#items .item-block {
    border: 1px solid #DBE3EE;
    margin-bottom: 10px;
}

#items .item-row:nth-child(even) {
    background: #f9f9f9;
}

#items .item-image img {
    max-width: 100%;
}

#items .item-description {
    padding: 10px;
}

#items .item-price h3 {
    margin: 0;
}

#items .item-price h3 strong {
    font-size: 32px !important;
}

#items .item-description a {
    color: #000;
    font-size: 18px;
}

#items .item-block .item-link > a {
    font-size: 14px;
}

#items a {
    .hoverFade(.33s);
}

#items a:hover {
    color: @fifth-color;
    text-decoration: none;

    .hoverFade(.33s);
}

#items .item-price h4 strong {
    font-size: 22px;
}

#items .item-basket input[type="number"] {
    background: #f9f9f9;
    border-color: #DBE3EE;
}

#items .item-basket button {
    color: @thirth-color;
    font-size: 21px;
    padding: 5px 15px;
    border-color: #DBE3EE;
}

#items .item-basket button:hover,
#items .item-basket button:focus {
    background: @fifth-color;
    border-color: @fifth-color;
    color: #fff;
}

/*
    Rules to apply when layout breaks on particular widths
*/
@media screen and (min-width: 768px) , screen and (max-width: 1090px) {
    #items .item-description a {
        font-size: 14px;
    }
}
/*
    Rules for tablet screens
*/
@media (min-width: 768px) {

}

@media (max-width: 567px) {
    #items .input-group {
        max-width: 130px !important;
    }
}

.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=Didact+Gothic');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Color Schemes */
/* Edit this only! */
@primary-color: #fff;
@secondary-color: #212121;
@thirth-color: #e20025;
@fourth-color: #fafbfc;
@fifth-color: #b3b5a5;
@sixth-color: #dbe3ee;
@seventh-color: #b68a6c;
@darkgray-color: #404040;
@light-color: #9f9f9f;
@light-gray-color: #ededed;
@medium-gray-color: #ccc;
@dark-gray-color: #404040;
@gradient-start-color: #1d9cd8;
@gradient-end-color: #0460aa;
@heading-color: #1e1e1e;
@font-color: #1e1e1e;
@border-radius: 3px;

/* Fonts */
@primary-font: 'Didact Gothic', sans-serif;
@secondary-font: 'Roboto', sans-serif;

/* Header */
    /* Primary header */
    @primary-header-background-color: #fff;
    @primary-header-icon-color: @medium-gray-color;
    
    /* Secondary header */
    @secondary-header-background-color: @fourth-color;

    /* Top bar */
    @top-bar-background-color: @secondary-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: @secondary-color;
@navigation-link-border-radius: 0;
@navigation-link-hover-background-color: @thirth-color;
@navigation-link-hover-color: @primary-color;
@navigation-link-focus-background-color: @thirth-color;
@navigation-link-focus-color: @primary-color;
@navigation-link-active-background-color: @thirth-color;
@navigation-link-active-color: @primary-color;

    /* Dropdown */
    @navigation-dropdown-background-color: @thirth-color;
    @navigation-dropdown-link-background-color: transparent;
    @navigation-dropdown-link-color: @primary-color;
    @navigation-dropdown-link-hover-background-color: @primary-color;
    @navigation-dropdown-link-hover-color: @secondary-color;
    @navigation-dropdown-html-content-border: 1px solid lighten(@thirth-color, 5%);

/* 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;

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

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


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

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

@btn-primary-background-color: @thirth-color;
@btn-primary-text-color: @primary-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: @primary-color;
@btn-primary-hover-border: 1px solid @thirth-color;
@btn-primary-focus-background-color: @thirth-color;
@btn-primary-focus-text-color: @primary-color;
@btn-primary-focus-border: 1px solid @primary-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: transparent;
@btn-link-text-color: @thirth-color;
@btn-link-border: 0;
@btn-link-border-radius: 0;
@btn-link-hover-background-color: transparent;
@btn-link-hover-text-color: @thirth-color;
@btn-link-hover-border: 0;
@btn-link-focus-background-color: transparent;
@btn-link-focus-text-color: @thirth-color;
@btn-link-focus-border: 0;

    /* Button icons */
    @btn-basic-icon-color: #3c475c;
    @btn-default-icon-color: #3c475c;
    @btn-primary-icon-color: #fff;
    @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: @secondary-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-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 {
    min-height: 100%;
    display: flex;  
    flex-direction: column;
    background-color: #FDFDFD;
}

html, body {
    font-family: 'Didact Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

strong, b {
    font-family: @secondary-font;
}

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