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

@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;


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

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

/* 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-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-page,
.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-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;
}
.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),
.sys-icon-a:not(.sys-colored) {
    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 {
	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-color-bg {
	background-color: @bx-color-popup-title;
}
.bx-popup-header h2 {
    line-height: 1.8rem;
    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 {
    -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;

    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 {
    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 {
	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 {
	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 {
	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-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-wrapper-password {
    height: @bx-height-form-input;
}
.bx-form-value .bx-form-input-text.bx-form-input-autotoken b {
    line-height: @bx-height-form-input;
}
.bx-form-value .bx-form-input-text.bx-form-input-autotoken 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-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,
.bx-grid-table .bx-switcher-cont {
    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;
}

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

    height: @bx-height-button;
    line-height: (@bx-height-button - 0.2);

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

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

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

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

/* 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.1);

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

    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-small-height {
    height: @bx-height-button-small;
    line-height: (@bx-height-button-small - 0.1);
}
.bx-btn-small-border {
    border-width: @bx-border-width-button-small;
    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;
    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 .sys-icon {
    color: @bx-font-color-button-small;
}
.bx-btn.bx-btn-small:hover .sys-icon,
.bx-btn.bx-btn-small:active .sys-icon {
    color: @bx-font-color-button-small-hover;
}
.bx-btn.bx-btn-small .bx-loading-ajax-btn {
    margin-top: -@bx-border-width-button-small;
}

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


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