una/modules/boonex/protean/data/template/system/css/default.less

@import (reference) '../../../../../../../template/css/_mixins.less';

.@{bx-root-class-name}.bx-def-font {
    font-family:@bx-font-family;
    font-weight:400; /* 26.13.13: prev val 300 */
    .font-size(@bx-font-size-default);
    color:@bx-font-color-default;
}

.@{bx-root-class-name}.bx-def-color-bg-page {
    .background-color (@bx-color-page);
}

.@{bx-root-class-name}.bx-def-image-bg-page {
    background-image: @bx-image-bg-page;
    background-repeat: @bx-image-bg-page-repeat;
    background-attachment: @bx-image-bg-page-attachment;
    background-size: @bx-image-bg-page-size;
    background-position: center center;
}

.@{bx-root-class-name} {
    @import '../../../../../../../template/css/default.less';

    /**
     * Is used for inputs and buttons. They should have the same value 
     * because Input and Button can be positioned in one line.
     */
    @base-input-box-sizing: border-box;

    /* height */
    .bx-header {
        height: @bx-height-header !important;
    }
    .bx-menu-toolbar-padding {
        padding-top: @bx-height-header !important;
    }

    /* content paddings */
    .bx-content-padding-header {
        padding: @bx-content-padding-header;
    }
    .bx-content-padding-footer {
        padding: @bx-content-padding-footer;
    }
    .bx-content-padding-block {
        padding: @bx-content-padding-block;
    }

    /* shadow */
    .bx-shadow-header {
        -webkit-box-shadow: @bx-shadow-header;
        -moz-box-shadow: @bx-shadow-header;
        box-shadow: @bx-shadow-header;
    }
    .bx-shadow-footer {
        -webkit-box-shadow: @bx-shadow-footer;
        -moz-box-shadow: @bx-shadow-footer;
        box-shadow: @bx-shadow-footer;
    }
    .bx-shadow-block {
        -webkit-box-shadow: @bx-shadow-block;
        -moz-box-shadow: @bx-shadow-block;
        box-shadow: @bx-shadow-block;
    }
    .bx-def-box {
        -webkit-box-shadow: @bx-shadow-card;
        -moz-box-shadow: @bx-shadow-card;
        box-shadow: @bx-shadow-card;
    }
    .bx-popup-applied {
        border-radius: @bx-border-radius-popup;
        background-clip: padding-box;
    }
    .bx-popup-applied:not(.bx-popup-chain) .bx-popup,
    .bx-popup-applied.bx-popup-chain .bx-popup-chain-item {
        -webkit-box-shadow: @bx-shadow-popup;
        -moz-box-shadow: @bx-shadow-popup;
        box-shadow: @bx-shadow-popup;
    }
    .bx-popup-applied.bx-popup-chain .bx-popup-chain-item a:hover {
        background-color: @bx-color-hl;
    }
    .bx-popup-wrapper.bx-popup-slide-wrapper {
        -webkit-box-shadow: @bx-shadow-menu-slide;
        -moz-box-shadow: @bx-shadow-menu-slide;
        box-shadow: @bx-shadow-menu-slide;
    }
    .bx-btn {
        -webkit-box-shadow: @bx-shadow-button;
        -moz-box-shadow: @bx-shadow-button;
        box-shadow: @bx-shadow-button;
    }
    .bx-btn.bx-btn-small {
        -webkit-box-shadow: @bx-shadow-button-small;
        -moz-box-shadow: @bx-shadow-button-small;
        box-shadow: @bx-shadow-button-small;
    }


    /* background images */
    .bx-def-image-bg-header,
    .bx-def-image-bg-footer,
    .bx-def-image-bg-block,
    .bx-def-box,
    .bx-popup-color-bg,
    .bx-popup-wrapper.bx-popup-slide-wrapper,
    #bx-sliding-menu-sys_site.bx-sliding-menu-main,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main,
    #bx-sliding-menu-account.bx-sliding-menu-main,
    .bx-menu-main-bar-wrapper {
        background-position: center center;
    }
    .bx-def-image-bg-header {
        background-image: @bx-image-bg-header;
        background-repeat: @bx-image-bg-header-repeat;
        background-attachment: @bx-image-bg-header-attachment;
        background-size: @bx-image-bg-header-size;
    }
    .bx-def-image-bg-footer {
        background-image: @bx-image-bg-footer;
        background-repeat: @bx-image-bg-footer-repeat;
        background-attachment: @bx-image-bg-footer-attachment;
        background-size: @bx-image-bg-footer-size;
    }
    .bx-def-image-bg-block {
        background-image: @bx-image-bg-block;
        background-repeat: @bx-image-bg-block-repeat;
        background-attachment: @bx-image-bg-block-attachment;
        background-size: @bx-image-bg-block-size;
    }
    .bx-def-box {
        background-image: @bx-image-bg-box;
        background-repeat: @bx-image-bg-box-repeat;
        background-attachment: @bx-image-bg-box-attachment;
        background-size: @bx-image-bg-box-size;
    }

    /* body */
    a {
        color: @bx-color-link-body; 
    }
    a:hover {
        color: @bx-color-link-body-hover; 
    }
    .sys-icon:not(.sys-colored):not(.bx-vote-star),
    .sys-icon-a:not(.sys-colored):not(.bx-vote-star) {
        color: @bx-color-icon-body; 
    }
    a:hover > .sys-icon:not(.sys-colored),
    a:hover > .sys-icon-a:not(.sys-colored) {
        color: @bx-color-icon-body-hover; 
    }
    .sys-icon-a i {
        .background-color (@bx-color-icon-body) !important;
        color: @bx-color-icon-body;
    }
    a:hover > .sys-icon-a i {
        .background-color (@bx-color-icon-body-hover) !important;
        color: @bx-color-icon-body-hover;
    }

    /* header */
    .bx-header.bx-def-color-bg-header {
        .background-color (@bx-color-header);
    }
    .bx-header.bx-def-border-header {
        border-bottom-width: @bx-border-width-header;
        border-bottom-style: @bx-border-type;
        border-bottom-color: @bx-color-border-header;
    }
    .bx-header a {
        color: @bx-color-link-header; 
    }
    .bx-header a:hover {
        color: @bx-color-link-header-hover;
    }
    .bx-header .sys-icon:not(.sys-colored),
    .bx-header .sys-icon-a:not(.sys-colored) {
        color: @bx-color-icon-header; 
    }
    .bx-header a:hover .sys-icon,
    .bx-header a:hover .sys-icon-a {
        color: @bx-color-icon-header-hover; 
    } 
    .bx-header .sys-icon-a:not(.sys-colored) i {
        .background-color (@bx-color-icon-header) !important;
        color: @bx-color-icon-header;
    }
    .bx-header a:hover .sys-icon-a i {
        .background-color (@bx-color-icon-header-hover) !important;
        color: @bx-color-icon-header-hover;
    }

    /* footer */
    .bx-def-color-bg-footer {
        .background-color (@bx-color-footer);    
    }
    .bx-def-border-footer {
        border-top-width: @bx-border-width-footer;
        border-top-style: @bx-border-type;
        border-top-color: @bx-color-border-footer;
    }
    .bx-footer {
        color: @bx-font-color-footer;
    }
    .bx-footer a {
        color: @bx-color-link-footer; 
    }
    .bx-footer a:hover {
        color: @bx-color-link-footer-hover; 
    }
    .bx-footer .sys-icon,
    .bx-footer .sys-icon-a {
        color: @bx-color-icon-footer; 
    }
    .bx-footer a:hover .sys-icon,
    .bx-footer a:hover .sys-icon-a {
        color: @bx-color-icon-footer-hover; 
    }
    .bx-footer .sys-icon-a i {
        .background-color (@bx-color-icon-footer) !important;
        color: @bx-color-icon-footer;
    }
    .bx-footer a:hover .sys-icon-a i {
        .background-color (@bx-color-icon-footer-hover) !important;
        color: @bx-color-icon-footer-hover;
    }

    /* fonts */
    .bx-def-font-inputs {
        font-family: @bx-font-family-form-input;
        font-size: @bx-font-size-form-input;
        color: @bx-font-color-form-input;
    }

    h1,
    .bx-def-font-h1 {
        font-weight: @bx-font-weight-h1;
        color: @bx-font-color-default-h1;
    }
    h1.bx-def-font-grayed,
    h1 .bx-def-font-grayed,
    .bx-def-font-h1.bx-def-font-grayed,
    .bx-def-font-h1 .bx-def-font-grayed {
        color: @bx-font-color-grayed-h1;
    }
    h1.bx-def-font-contrasted,
    h1.bx-def-font-contrasted:after,
    h1.bx-def-font-contrasted:before,
    h1 .bx-def-font-contrasted,
    h1 .bx-def-font-contrasted:after,
    h1 .bx-def-font-contrasted:before,
    .bx-def-font-h1.bx-def-font-contrasted,
    .bx-def-font-h1.bx-def-font-contrasted:after,
    .bx-def-font-h1.bx-def-font-contrasted:before,
    .bx-def-font-h1 .bx-def-font-contrasted,
    .bx-def-font-h1 .bx-def-font-contrasted:after,
    .bx-def-font-h1 .bx-def-font-contrasted:before {
        color: @bx-font-color-contrasted-h1;
    }
    h1 a,
    .bx-def-font-h1 a,
    a.bx-def-font-h1 {
        color: @bx-font-color-link-h1;
    }
    h1 a:hover,
    .bx-def-font-h1 a:hover,
    a.bx-def-font-h1:hover {
        color: @bx-font-color-link-h1-hover;
    }

    h2,
    .bx-def-font-h2 {
        font-weight: @bx-font-weight-h2;
        color: @bx-font-color-default-h2;
    }
    h2.bx-def-font-grayed,
    h2 .bx-def-font-grayed,
    .bx-def-font-h2.bx-def-font-grayed,
    .bx-def-font-h2 .bx-def-font-grayed {
        color: @bx-font-color-grayed-h2;
    }
    h2.bx-def-font-contrasted,
    h2.bx-def-font-contrasted:after,
    h2.bx-def-font-contrasted:before,
    h2 .bx-def-font-contrasted,
    h2 .bx-def-font-contrasted:after,
    h2 .bx-def-font-contrasted:before,
    .bx-def-font-h2.bx-def-font-contrasted,
    .bx-def-font-h2.bx-def-font-contrasted:after,
    .bx-def-font-h2.bx-def-font-contrasted:before,
    .bx-def-font-h2 .bx-def-font-contrasted,
    .bx-def-font-h2 .bx-def-font-contrasted:after,
    .bx-def-font-h2 .bx-def-font-contrasted:before {
        color: @bx-font-color-contrasted-h2;
    }
    h2 a,
    .bx-def-font-h2 a,
    a.bx-def-font-h2 {
        color: @bx-font-color-link-h2;
    }
    h2 a:hover,
    .bx-def-font-h2 a:hover,
    a.bx-def-font-h2:hover {
        color: @bx-font-color-link-h2-hover;
    }

    h3,
    .bx-def-font-h3 {
        font-weight: @bx-font-weight-h3;
        color: @bx-font-color-default-h3;
    }
    h3.bx-def-font-grayed,
    h3 .bx-def-font-grayed,
    .bx-def-font-h3.bx-def-font-grayed,
    .bx-def-font-h3 .bx-def-font-grayed {
        color: @bx-font-color-grayed-h3;
    }
    h3.bx-def-font-contrasted,
    h3.bx-def-font-contrasted:after,
    h3.bx-def-font-contrasted:before,
    h3 .bx-def-font-contrasted,
    h3 .bx-def-font-contrasted:after,
    h3 .bx-def-font-contrasted:before,
    .bx-def-font-h3.bx-def-font-contrasted,
    .bx-def-font-h3.bx-def-font-contrasted:after,
    .bx-def-font-h3.bx-def-font-contrasted:before,
    .bx-def-font-h3 .bx-def-font-contrasted,
    .bx-def-font-h3 .bx-def-font-contrasted:after,
    .bx-def-font-h3 .bx-def-font-contrasted:before {
        color: @bx-font-color-contrasted-h3;
    }
    h3 a,
    .bx-def-font-h3 a,
    a.bx-def-font-h3 {
        color: @bx-font-color-link-h3;
    }
    h3 a:hover,
    .bx-def-font-h3 a:hover,
    a.bx-def-font-h3:hover {
        color: @bx-font-color-link-h3-hover;
    }

    /* cover */
    .bx-menu-toolbar-padding .bx-def-cover-color-bg {
        background-color: @bx-color-cover;
    }

    .bx-menu-toolbar-padding .bx-cover-wrapper {
        border-width: @bx-border-width-cover;
        border-style: @bx-border-type;
        border-color: @bx-color-border-cover;

        border-radius: @bx-border-radius-cover;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-cover;
        -moz-box-shadow: @bx-shadow-cover;
        box-shadow: @bx-shadow-cover;
    }
    .bx-cover-wrapper .bx-cover {
        min-height: @bx-height-cover;
    }
    .bx-cover-wrapper .bx-cover,
    .bx-cover-wrapper .bx-cover .bx-cover-actions .bx-menu-btns-hor {
        text-align: @bx-text-align-cover;
    }
    .bx-cover-wrapper .bx-cover.bx-def-padding {
        padding: @bx-content-padding-cover;
    }
    .bx-cover-wrapper .bx-cover .bx-cover-image img {
        border-width: @bx-border-width-cover-icon;
        border-style: @bx-border-type;
        border-color: @bx-color-border-cover-icon;

        border-radius: @bx-border-radius-cover-icon;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-cover-icon;
        -moz-box-shadow: @bx-shadow-cover-icon;
        box-shadow: @bx-shadow-cover-icon;
    }

    .bx-cover-wrapper .bx-cover .bx-cover-title {
        text-shadow: @bx-shadow-text-cover;

        font-family: @bx-font-family-cover;
    }
    .bx-cover-wrapper .bx-cover .bx-cover-title,
    .bx-cover-wrapper .bx-cover .bx-cover-title .bx-def-font-contrasted,
    .bx-cover-wrapper .bx-cover .bx-cover-title .bx-def-font-contrasted:after,
    .bx-cover-wrapper .bx-cover .bx-cover-title .bx-def-font-contrasted:before {
        color: @bx-color-font-cover;
    }
    .bx-cover-wrapper .bx-cover .bx-cover-title,
    .bx-cover-wrapper .bx-cover .bx-cover-title.bx-def-font-h1 {
        font-size: @bx-font-size-cover;
        font-weight: @bx-font-weight-cover;
    }


    /* block */
    .bx-def-border-block {
        border-width: @bx-border-width-block;
        border-style: @bx-border-type;
        border-color: @bx-color-border-block;

        border-radius: @bx-border-radius-block;
        background-clip: padding-box;
    }
    .bx-def-border-radius-block {
        border-radius: @bx-border-radius-block;
        background-clip: padding-box;
    }
    .bx-def-border-radius-block-int {
        border-radius: @bx-border-radius-block-itl @bx-border-radius-block-itr @bx-border-radius-block-ibr @bx-border-radius-block-ibl;
        background-clip: padding-box;
    }
    .bx-def-border-radius-block-int-top {
        border-radius: @bx-border-radius-block-itl @bx-border-radius-block-itr 0 0;
        background-clip: padding-box;
    }
    .bx-def-border-radius-block-int-bottom {
        border-radius: 0 0 @bx-border-radius-block-ibr @bx-border-radius-block-ibl;
        background-clip: padding-box;
    }
    .bx-db-header {
        padding: @bx-title-padding-block;

        border-width: @bx-border-width-block-title;
        border-style: solid;
        border-color: @bx-color-border-block-title;

        border-radius: @bx-border-radius-block-title;
    }
    .bx-def-color-bg-block .bx-db-header,
    .bx-def-image-bg-block .bx-db-header {
        background-clip: padding-box;
        background-color: @bx-color-block-title;
    }
    .bx-db-header .bx-db-title {
        line-height: 1.2;
        font-family: @bx-font-family-block-title;
        font-size: @bx-font-size-block-title;
        font-weight: @bx-font-weight-block-title;
        color: @bx-color-font-block-title;
    }
    .bx-db-divider {
        border-top:@bx-height-block-title-div @bx-border-type @bx-color-block-title-div;
    }


    /* box */
    .bx-def-box {
        border-width: @bx-border-width-box;
        border-style: @bx-border-type;
        border-color: @bx-color-border-box;
    }
    .bx-def-box.bx-def-padding {
        padding: @bx-content-padding-card;
    }
    .bx-def-box.bx-def-color-bg-box {
        .background-color (@bx-color-box);
    }
    .bx-def-box.bx-def-color-bg-box-active,
    .bx-def-box.bx-def-color-bg-box-hover:hover {
        .background-color (@bx-color-box-hover);
    }
    .bx-def-box-round-corners,
    .bx-def-box.bx-def-round-corners {
        border-radius: @bx-border-radius-box;
        background-clip: padding-box;
    }
    .bx-def-box-round-corners-int {
        border-radius: @bx-border-radius-box-itl @bx-border-radius-box-itr @bx-border-radius-box-ibr @bx-border-radius-box-ibl;
        background-clip: padding-box;
    }
    .bx-def-box-round-corners-int-top {
        border-radius: @bx-border-radius-box-itl @bx-border-radius-box-itr 0 0;
        background-clip: padding-box;
    }
    .bx-def-box-round-corners-int-bottom {
        border-radius: 0 0 @bx-border-radius-box-ibr @bx-border-radius-box-ibl;
        background-clip: padding-box;
    }
    .bx-base-pofile-unit-with-cover .bx-def-round-corners .bx-base-pofile-unit-cover {
        border-radius: @bx-border-radius-box-itl @bx-border-radius-box-itr 0 0;
    }
    .bx-base-text-unit.bx-base-text-unit-ext.bx-def-round-corners img.bx-base-text-unit-cover.bx-def-round-corners,
    .bx-base-text-unit.bx-base-text-unit-ext .bx-def-round-corners img.bx-base-text-unit-cover.bx-def-round-corners {
        border-radius: @bx-border-radius-box-itl @bx-border-radius-box-itr 0 0;
    }
    .bx-base-text-unit.bx-base-text-unit-gallery.bx-def-round-corners .bx-base-text-unit-thumb.bx-def-round-corners,
    .bx-base-text-unit.bx-base-text-unit-gallery .bx-def-round-corners .bx-base-text-unit-thumb.bx-def-round-corners {
        border-radius: @bx-border-radius-box-itl @bx-border-radius-box-itr 0 0;
    }

    /* popup */
    .bx-popup-border {
        border-width: @bx-border-width-popup;
        border-style: solid;
        border-color: @bx-color-border-popup;

        border-radius: @bx-border-radius-popup;
        background-clip: padding-box;
    }
    .bx-popup-color-bg {
        background-color: @bx-color-popup;

        background-image: @bx-image-bg-popup;
        background-repeat: @bx-image-bg-popup-repeat;
        background-attachment: @bx-image-bg-popup-attachment;
        background-size: @bx-image-bg-popup-size;
    }
    .bx-popup-content-indent {
        padding: @bx-content-padding-popup;
    }
    .bx-popup-header {
        padding: @bx-title-padding-popup;
    }
    .bx-popup-header .bx-popup-element-close {
        margin: @bx-title-padding-popup;
    }
    .bx-popup-header-color-bg {
        background-color: @bx-color-popup-title;
    }
    .bx-popup-header h2,
    .bx-popup-header .bx-popup-element-close {
        line-height: 1.8rem;
    }
    .bx-popup-header h2 {
        font-family: @bx-font-family-popup-title;
        font-size: @bx-font-size-popup-title;
    }
    .bx-popup-header h2,
    .bx-popup-header.bx-def-font-contrasted h2,
    .bx-popup-header .bx-popup-element-close,
    .bx-popup-header.bx-def-font-contrasted .bx-popup-element-close,
    .bx-popup-header .bx-popup-element-close .sys-icon,
    .bx-popup-header.bx-def-font-contrasted .bx-popup-element-close .sys-icon {
        color: @bx-color-font-popup-title;
    }

    /* slide menu */
    .bx-popup-wrapper.bx-popup-slide-wrapper {
        border-width: @bx-border-width-menu-slide;
        border-style: solid;
        border-color: @bx-color-border-menu-slide;

        .background-color (@bx-color-menu-slide);

        background-image: @bx-image-bg-menu-slide;
        background-repeat: @bx-image-bg-menu-slide-repeat;
        background-attachment: @bx-image-bg-menu-slide-attachment;
        background-size: @bx-image-bg-menu-slide-size;
    }
    .bx-popup-wrapper.bx-popup-slide-wrapper.bx-def-padding {
        padding: @bx-content-padding-menu-slide;
    }
    .bx-popup-wrapper.bx-popup-slide-wrapper li a {
        text-shadow: @bx-shadow-font-menu-slide;

        font-family: @bx-font-family-menu-slide;
        font-size: @bx-font-size-menu-slide;
        font-weight: @bx-font-weight-menu-slide;
        color: @bx-font-color-menu-slide;
    }
    .bx-popup-wrapper.bx-popup-slide-wrapper li a:hover {
        color: @bx-font-color-menu-slide-hover;
    }
    .bx-popup-wrapper.bx-popup-slide-wrapper li.bx-menu-tab-active a,
    .bx-popup-wrapper.bx-popup-slide-wrapper li.bx-menu-inter-act {
        color: @bx-font-color-menu-slide-active;
    }

    /* main menu */
    #bx-sliding-menu-sys_site.bx-sliding-menu-main,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main,
    #bx-sliding-menu-search.bx-sliding-menu-main,
    #bx_notifications_preview.bx-sliding-menu {
        -webkit-box-shadow: @bx-shadow-menu-main;
        -moz-box-shadow: @bx-shadow-menu-main;
        box-shadow: @bx-shadow-menu-main;

        border-width: @bx-border-width-menu-main;
        border-style: solid;
        border-color: @bx-color-border-menu-main;

        background-color: @bx-color-menu-main;

        background-image: @bx-image-bg-menu-main;
        background-repeat: @bx-image-bg-menu-main-repeat;
        background-attachment: @bx-image-bg-menu-main-attachment;
        background-size: @bx-image-bg-menu-main-size;
    }
    #bx-sliding-menu-sys_site.bx-sliding-menu-main,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main,
    #bx-sliding-menu-search.bx-sliding-menu-main {
        text-align: center;
    }
    #bx-sliding-menu-sys_site.bx-sliding-menu-main .bx-sliding-menu-main-cnt,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-sliding-menu-main-cnt,
    #bx-sliding-menu-search.bx-sliding-menu-main .bx-sliding-menu-main-cnt,
    #bx_notifications_preview.bx-sliding-menu .bx-sliding-menu-main-cnt {
        padding: @bx-content-padding-menu-main;
    }
    #bx-sliding-menu-sys_site.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a,
    #bx-sliding-menu-search.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a,
    #bx_notifications_preview.bx-sliding-menu .bx-sliding-menu-main-cnt li a {
        text-shadow: @bx-shadow-font-menu-main;

        font-family: @bx-font-family-menu-main;
        font-size: @bx-font-size-menu-main;
        font-weight: @bx-font-weight-menu-main;
        color: @bx-font-color-menu-main;
    }
    #bx-sliding-menu-sys_site.bx-sliding-menu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a,
    #bx-sliding-menu-search.bx-sliding-menu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a,
    #bx_notifications_preview.bx-sliding-menu .bx-sliding-menu-main-cnt li.bx-menu-tab-active a {
        color: @bx-font-color-menu-main-active;
    }
    #bx-sliding-menu-sys_site.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover,
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover,
    #bx-sliding-menu-search.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover,
    #bx_notifications_preview.bx-sliding-menu .bx-sliding-menu-main-cnt li a:hover,
    #bx-sliding-menu-sys_site.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon:not(.sys-colored),
    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon:not(.sys-colored),
    #bx-sliding-menu-search.bx-sliding-menu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon:not(.sys-colored),
    #bx_notifications_preview.bx-sliding-menu .bx-sliding-menu-main-cnt li a:hover .sys-icon:not(.sys-colored) {
        color: @bx-font-color-menu-main-hover;
    }

    /* account menu */
    #bx-sliding-menu-account.bx-sliding-menu-main {
        -webkit-box-shadow: @bx-shadow-menu-account;
        -moz-box-shadow: @bx-shadow-menu-account;
        box-shadow: @bx-shadow-menu-account;

        border-width: @bx-border-width-menu-account;
        border-style: solid;
        border-color: @bx-color-border-menu-account;

        background-color: @bx-color-menu-account;

        background-image: @bx-image-bg-menu-account;
        background-repeat: @bx-image-bg-menu-account-repeat;
        background-attachment: @bx-image-bg-menu-account-attachment;
        background-size: @bx-image-bg-menu-account-size;
    }
    #bx-sliding-menu-account.bx-sliding-menu-main .bx-sliding-menu-main-cnt {
        padding: @bx-content-padding-menu-account;
    }
    #bx-sliding-menu-account.bx-sliding-menu-main .bx-menu-account-popup li a {
        text-shadow: @bx-shadow-font-menu-account;

        font-family: @bx-font-family-menu-account;
        font-size: @bx-font-size-menu-account;
        font-weight: @bx-font-weight-menu-account;
        color: @bx-font-color-menu-account;
    }
    #bx-sliding-menu-account.bx-sliding-menu-main .bx-menu-account-popup li.bx-menu-tab-active a {
        color: @bx-font-color-menu-account-active;
    }
    #bx-sliding-menu-account.bx-sliding-menu-main .bx-menu-account-popup li a:hover {
        color: @bx-font-color-menu-account-hover;
    }

    /* page menu */
    .bx-menu-main-bar-wrapper {
        -webkit-box-shadow: @bx-shadow-menu-page;
        -moz-box-shadow: @bx-shadow-menu-page;
        box-shadow: @bx-shadow-menu-page;

        border-width: @bx-border-width-menu-page;
        border-style: solid;
        border-color: @bx-color-border-menu-page;
        border-bottom-right-radius: @bx-border-radius-block-br;
        border-bottom-left-radius: @bx-border-radius-block-bl;

        background-color: @bx-color-menu-page;

        background-image: @bx-image-bg-menu-page;
        background-repeat: @bx-image-bg-menu-page-repeat;
        background-attachment: @bx-image-bg-menu-page-attachment;
        background-size: @bx-image-bg-menu-page-size;
        background-clip: border-box;
    }
    .bx-menu-main-bar-wrapper .bx-menu-main-submenu {
        padding: @bx-content-padding-menu-page;
    }
    .bx-menu-main-bar-wrapper .bx-menu-main-submenu li a {
        text-shadow: @bx-shadow-font-menu-page;

        font-family: @bx-font-family-menu-page;
        font-size: @bx-font-size-menu-page;
        font-weight: @bx-font-weight-menu-page;
        color: @bx-font-color-menu-page;
    }
    .bx-menu-main-bar-wrapper .bx-menu-main-submenu li a:hover {
        color: @bx-font-color-menu-page-hover;
    }
    .bx-menu-main-bar-wrapper .bx-menu-main-submenu li.bx-menu-tab-active a {
        color: @bx-font-color-menu-page-active;
    }

    /* form */
    .bx-form-value .bx-form-input-slider,
    .bx-form-value .bx-form-input-doublerange,
    .bx-form-value .bx-form-input-select_multiple,
    .bx-form-value .bx-form-input-select,
    .bx-form-value .bx-form-input-radio_set,
    .bx-form-value .bx-form-input-checkbox_set,
    .bx-form-value .bx-form-input-number,
    .bx-form-value .bx-form-input-time,
    .bx-form-value .bx-form-input-datepicker,
    .bx-form-value .bx-form-input-datetime,
    .bx-form-value .bx-form-input-textarea,
    .bx-form-value .bx-form-input-text,
    .bx-form-value .bx-form-input-price,
    .bx-form-value .bx-form-input-wrapper-price span,
    .bx-form-value .bx-form-input-wrapper-password {
        .box-sizing(@base-input-box-sizing);

        border-color: @bx-color-border-form-input;
        border-width: @bx-border-width-form-input;

        background-color: @bx-color-form-input;

        -webkit-box-shadow: @bx-shadow-form-input;
        -moz-box-shadow: @bx-shadow-form-input;
        box-shadow: @bx-shadow-form-input;
    }
    .bx-form-value .bx-form-input-slider,
    .bx-form-value .bx-form-input-doublerange,
    .bx-form-value .bx-form-input-select,
    .bx-form-value .bx-form-input-number,
    .bx-form-value .bx-form-input-time,
    .bx-form-value .bx-form-input-datepicker,
    .bx-form-value .bx-form-input-datetime,
    .bx-form-value .bx-form-input-text,
    .bx-form-value .bx-form-input-price,
    .bx-form-value .bx-form-input-wrapper-price span,
    .bx-form-value .bx-form-input-wrapper-password {
        height: @bx-height-form-input;
    }
    .bx-form-value .bx-form-input-text.bx-form-input-autotoken:not(.bx-form-input-labels) {
        height: auto;
        line-height: @bx-height-form-input - 0.5rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }
    
    .bx-form-value .bx-form-input-text.bx-form-input-autotoken.bx-form-input-labels {
        padding: 0.125rem;
    }
    
    .bx-form-value .bx-form-input-text.bx-form-input-autotoken .ui-autocomplete-input{
        height: @bx-height-form-input  - 0.5rem;
    }
    .bx-form-value .bx-form-input-text.bx-form-input-autotoken:not(.bx-form-input-labels) b .bx-def-thumb-size {
        width: @bx-height-form-input;
        height: @bx-height-form-input;
        line-height: @bx-height-form-input;
    }
    .bx-form-value .bx-form-input-slider:focus,
    .bx-form-value .bx-form-input-doublerange:focus,
    .bx-form-value .bx-form-input-number:focus,
    .bx-form-value .bx-form-input-time:focus,
    .bx-form-value .bx-form-input-datepicker:focus,
    .bx-form-value .bx-form-input-datetime:focus,
    .bx-form-value .bx-form-input-textarea:focus,
    .bx-form-value .bx-form-input-text:focus,
    .bx-form-value .bx-form-input-price:focus,
    .bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
        border-color: @bx-color-border-form-input-active;
        background-color: @bx-color-form-input-active;
    }

    .bx-form-value .bx-switcher-cont.on > button,
    .bx-grid-table .bx-switcher-cont.on > button {
        background-color: @bx-color-form-input;
    }

    /* button normal */
    .bx-btn {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button;
        line-height: (@bx-height-button - 0.125 * @bx-border-width-button);

        .background-color (@bx-color-button);

        border-width: @bx-border-width-button;
        border-style: solid;
        border-color: @bx-color-border-button;

        border-radius: @bx-border-radius-button;
        background-clip: padding-box;

        text-shadow: @bx-shadow-font-button;
        text-transform: uppercase;

        font-family: @bx-font-family-button;
        font-size: @bx-font-size-button;
        font-weight: @bx-font-weight-button;
        color: @bx-font-color-button;
        
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .bx-btn.bx-btn-primary {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button-primary;
        line-height: (@bx-height-button-primary - 0.125 * @bx-border-width-button-primary);

        .background-color (@bx-color-button-primary);

        border-width: @bx-border-width-button-primary;
        border-style: solid;
        border-color: @bx-color-border-button-primary;

        border-radius: @bx-border-radius-button-primary;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-button-primary;
        -moz-box-shadow: @bx-shadow-button-primary;
        box-shadow: @bx-shadow-button-primary;

        text-shadow: @bx-shadow-font-button-primary;

        font-family: @bx-font-family-button-primary;
        font-size: @bx-font-size-button-primary;
        font-weight: @bx-font-weight-button-primary;
        color: @bx-font-color-button-primary;
    }
    .bx-btn-height {
        height: @bx-height-button;
        line-height: @bx-height-button;
    }
    .bx-btn-border {
        border-width: @bx-border-width-button;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn-height.bx-btn-primary {
        height: @bx-height-button-primary;
        line-height: @bx-height-button-primary;
    }
    .bx-btn-border.bx-btn-primary {
        border-width: @bx-border-width-button-primary;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn:hover,
    .bx-btn:active {
        border-width: @bx-border-width-button;
        border-style: solid;

    }
    .bx-btn:hover {
        border-color: @bx-color-border-button-hover;

        .background-color (@bx-color-button-hover);

        color: @bx-font-color-button-hover;
    }
    .bx-btn:active {
        border-color: @bx-color-border-button-click;

        .background-color (@bx-color-button-click);
        box-shadow: @bx-shadow-color-button-click; 

        color: @bx-font-color-button-click;

    }
    .bx-btn.bx-btn-primary:hover,
    .bx-btn.bx-btn-primary:active {
        border-width: @bx-border-width-button-primary;
        border-style: solid;
    }
    .bx-btn.bx-btn-primary:hover {
        border-color: @bx-color-border-button-primary-hover;

        .background-color (@bx-color-button-primary-hover);

        color: @bx-font-color-button-primary-hover;
    }
    .bx-btn.bx-btn-primary:active {
        border-color: @bx-color-border-button-primary-click;

        .background-color (@bx-color-button-primary-click);
        box-shadow: @bx-shadow-color-button-primary-click;

        color: @bx-font-color-button-primary-click;
    }

    .bx-btn .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button;
    }
    .bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button-primary;
    }
    .bx-btn:hover .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button-hover;
    }
    .bx-btn:active .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button-click;
    }
    .bx-btn.bx-btn-primary:hover .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button-primary-hover;
    }
    .bx-btn.bx-btn-primary:active .sys-icon:not(.sys-colored) {
        color: @bx-font-color-button-primary-click;
    }
    .bx-btn .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button;
    }
    .bx-btn.bx-btn-primary .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button-primary;
    }

    /* button large */
    .bx-btn.bx-btn-large {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button-large;
        line-height: (@bx-height-button-large - 0.125 * @bx-border-width-button-large);

        .background-color (@bx-color-button-large);

        border-width: @bx-border-width-button-large;
        border-style: solid;
        border-color: @bx-color-border-button-large;

        border-radius: @bx-border-radius-button-large;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-button-large;
        -moz-box-shadow: @bx-shadow-button-large;
        box-shadow: @bx-shadow-button-large;

        text-shadow: @bx-shadow-font-button-large;

        font-family: @bx-font-family-button-large;
        font-size: @bx-font-size-button-large;
        font-weight: @bx-font-weight-button-large;
        color: @bx-font-color-button-large;
    }
    .bx-btn.bx-btn-large.bx-btn-primary {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button-large-primary;
        line-height: (@bx-height-button-large-primary - 0.125 * @bx-border-width-button-large-primary);

        .background-color (@bx-color-button-large-primary);

        border-width: @bx-border-width-button-large-primary;
        border-style: solid;
        border-color: @bx-color-border-button-large-primary;

        border-radius: @bx-border-radius-button-large-primary;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-button-large-primary;
        -moz-box-shadow: @bx-shadow-button-large-primary;
        box-shadow: @bx-shadow-button-large-primary;

        text-shadow: @bx-shadow-font-button-large-primary;

        font-family: @bx-font-family-button-large-primary;
        font-size: @bx-font-size-button-large-primary;
        font-weight: @bx-font-weight-button-large-primary;
        color: @bx-font-color-button-large-primary;
    }
    .bx-btn-large-height {
        height: @bx-height-button-large;
        line-height: @bx-height-button-large;
    }
    .bx-btn-large-height.bx-btn-primary {
        height: @bx-height-button-large-primary;
        line-height: @bx-height-button-large-primary;
    }
    .bx-btn-large-border {
        border-width: @bx-border-width-button-large;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn-large-border.bx-btn-primary {
        border-width: @bx-border-width-button-large-primary;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn.bx-btn-large:hover,
    .bx-btn.bx-btn-large:active {
        border-width: @bx-border-width-button-large;
        border-style: solid;
    }
    .bx-btn.bx-btn-large:hover {
        border-color: @bx-color-border-button-large-hover;

        .background-color (@bx-color-button-large-hover);

        color: @bx-font-color-button-large-hover;
    }
    .bx-btn.bx-btn-large:active {
        border-color: @bx-color-border-button-large-click;

        .background-color (@bx-color-button-large-click);
        box-shadow: @bx-shadow-color-button-click;

        color: @bx-font-color-button-large-click;
    }
    .bx-btn.bx-btn-large.bx-btn-primary:hover,
    .bx-btn.bx-btn-large.bx-btn-primary:active {
        border-width: @bx-border-width-button-large-primary;
        border-style: solid;
    }
    .bx-btn.bx-btn-large.bx-btn-primary:hover {
        border-color: @bx-color-border-button-large-primary-hover;

        .background-color (@bx-color-button-large-primary-hover);

        color: @bx-font-color-button-large-primary-hover;
    }
    .bx-btn.bx-btn-large.bx-btn-primary:active {
        border-color: @bx-color-border-button-large-primary-click;

        .background-color (@bx-color-button-large-primary-click);
        box-shadow: @bx-shadow-color-button-primary-click;

        color: @bx-font-color-button-large-primary-click;
    }
    .bx-btn.bx-btn-large .sys-icon {
        color: @bx-font-color-button-large;
    }
    .bx-btn.bx-btn-large.bx-btn-primary .sys-icon {
        color: @bx-font-color-button-large-primary;
    }
    .bx-btn.bx-btn-large:hover .sys-icon {
        color: @bx-font-color-button-large-hover;
    }
    .bx-btn.bx-btn-large:active .sys-icon {
        color: @bx-font-color-button-large-click;
    }
    .bx-btn.bx-btn-large.bx-btn-primary:hover .sys-icon {
        color: @bx-font-color-button-large-primary-hover;
    }
    .bx-btn.bx-btn-large.bx-btn-primary:active .sys-icon {
        color: @bx-font-color-button-large-primary-click;
    }
    .bx-btn.bx-btn-large .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button-large;
    }
    .bx-btn.bx-btn-large.bx-btn-primary .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button-large-primary;
    }

    /* button small */
    .bx-btn.bx-btn-small {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button-small;
        line-height: (@bx-height-button-small - 0.125 * @bx-border-width-button-small);

        .background-color (@bx-color-button-small);

        border-width: @bx-border-width-button-small;
        border-style: solid;
        border-color: @bx-color-border-button-small;

        border-radius: @bx-border-radius-button-small;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-button-small;
        -moz-box-shadow: @bx-shadow-button-small;
        box-shadow: @bx-shadow-button-small;

        text-shadow: @bx-shadow-font-button-small;

        font-family: @bx-font-family-button-small;
        font-size: @bx-font-size-button-small;
        font-weight: @bx-font-weight-button-small;
        color: @bx-font-color-button-small;
    }
    .bx-btn.bx-btn-small.bx-btn-primary {
        .box-sizing(@base-input-box-sizing);

        height: @bx-height-button-small-primary;
        line-height: (@bx-height-button-small-primary - 0.125 * @bx-border-width-button-small-primary);

        .background-color (@bx-color-button-small-primary);

        border-width: @bx-border-width-button-small-primary;
        border-style: solid;
        border-color: @bx-color-border-button-small-primary;

        border-radius: @bx-border-radius-button-small-primary;
        background-clip: padding-box;

        -webkit-box-shadow: @bx-shadow-button-small-primary;
        -moz-box-shadow: @bx-shadow-button-small-primary;
        box-shadow: @bx-shadow-button-small-primary;

        text-shadow: @bx-shadow-font-button-small-primary;

        font-family: @bx-font-family-button-small-primary;
        font-size: @bx-font-size-button-small-primary;
        font-weight: @bx-font-weight-button-small-primary;
        color: @bx-font-color-button-small-primary;
    }
    .bx-btn-small-height {
        height: @bx-height-button-small;
        line-height: @bx-height-button-small;
    }
    .bx-btn-small-height.bx-btn-primary {
        height: @bx-height-button-small-primary;
        line-height: @bx-height-button-small-primary;
    }
    .bx-btn-small-border {
        border-width: @bx-border-width-button-small;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn-small-border.bx-btn-primary {
        border-width: @bx-border-width-button-small-primary;
        border-style: solid;
        border-color: transparent;
    }
    .bx-btn.bx-btn-small:hover,
    .bx-btn.bx-btn-small:active {
        border-width: @bx-border-width-button-small;
        border-style: solid;
    }
    .bx-btn.bx-btn-small:hover {
        border-color: @bx-color-border-button-small-hover;

        .background-color (@bx-color-button-small-hover);

        color: @bx-font-color-button-small-hover;
    }
    .bx-btn.bx-btn-small:active {
        border-color: @bx-color-border-button-small-click;

        .background-color (@bx-color-button-small-click);
        box-shadow: @bx-shadow-color-button-click;

        color: @bx-font-color-button-small-click;
    }
    .bx-btn.bx-btn-small.bx-btn-primary:hover,
    .bx-btn.bx-btn-small.bx-btn-primary:active {
        border-width: @bx-border-width-button-small-primary;
        border-style: solid;
    }
    .bx-btn.bx-btn-small.bx-btn-primary:hover {
        border-color: @bx-color-border-button-small-primary-hover;

        .background-color (@bx-color-button-small-primary-hover);

        color: @bx-font-color-button-small-primary-hover;
    }
    .bx-btn.bx-btn-small.bx-btn-primary:active {
        border-color: @bx-color-border-button-small-primary-click;

        .background-color (@bx-color-button-small-primary-click);
        box-shadow: @bx-shadow-color-button-primary-click;

        color: @bx-font-color-button-small-primary-click;
    }
    .bx-btn.bx-btn-small .sys-icon {
        color: @bx-font-color-button-small;
    }
    .bx-btn.bx-btn-small.bx-btn-primary .sys-icon {
        color: @bx-font-color-button-small-primary;
    }
    .bx-btn.bx-btn-small:hover .sys-icon {
        color: @bx-font-color-button-small-hover;
    }
    .bx-btn.bx-btn-small:active .sys-icon {
        color: @bx-font-color-button-small-click;
    }
    .bx-btn.bx-btn-small.bx-btn-primary:hover .sys-icon {
        color: @bx-font-color-button-small-primary-hover;
    }
    .bx-btn.bx-btn-small.bx-btn-primary:active .sys-icon {
        color: @bx-font-color-button-small-primary-click;
    }
    .bx-btn.bx-btn-small .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button-small;
    }
    .bx-btn.bx-btn-small.bx-btn-primary .bx-loading-ajax-btn {
        margin-top: -@bx-border-width-button-small-primary;
    }

    /* colors */
    .bx-def-color-bg-hl,
    .bx-def-color-bg-hl-even:nth-child(even),
    .bx-def-color-bg-hl-hover:hover {
        -webkit-transition: background-color 0.2s ease-in-out;
        -moz-transition: background-color 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out;
    }

    /* comments */
    .cmt .cmt-body.bx-overflow .cmt-body-overflow {
        background: -webkit-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
        background: -moz-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
        background: -o-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
        background: linear-gradient(to bottom, @bx-color-box-transparent, @bx-color-box);
    }

    /* grid */
    .bx-def-color-bg-page .bx-grid-table-wrapper2:before {
        background: @bx-color-page-gradient-left;
    }
    .bx-def-color-bg-page .bx-grid-table-wrapper2:after {
        background: @bx-color-page-gradient-right;
    }

    .bx-def-color-bg-block .bx-grid-table-wrapper2:before {
        background: @bx-color-block-gradient-left;
    }
    .bx-def-color-bg-block .bx-grid-table-wrapper2:after {
        background: @bx-color-block-gradient-right;
    }
}

/* viewport */
html.bx-media-tablet {
    font-size: @bx-viewport-font-tablet;
}

html.bx-media-phone {
    font-size: @bx-viewport-font-mobile;
}