.bx {
	padding: @spacingL;
	background: @white;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	margin-bottom: @spacingL;

	.bx-close {
		.float-right(@rtl);
		position: relative;
    .left(@rtl, @spacingM);
		top: (-1 * @spacingM);

		.vicon {
			color: @grayLight;
		}

		&:hover {
			.vicon {
				color: @gray;
			}
		}
	}

	&.bx-default {
    border: 0 none;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	}
}

.bx-empty {
	border: 1px dashed lighten(@black, 80%);
	background: lighten(@black, 94%);
	box-shadow: none;
	color: lighten(@black, 40%);

	.h-bx {
		border-bottom-color: lighten(@black, 83%);
		color: lighten(@black, 40%);
	}

	&:hover {
		background: lighten(@yellow, 40%);
	}
}

.bx-aside {
	padding: 0;
	border: none;
	box-shadow: none;

	.h-bx {
		border-bottom-color: @BorderBoxColor;
	}
}

.bx-alert {
	position: relative;
	display: table;
	width: 100%;
	padding: 0;
	border-radius: @borderRadiusS;
	background: @blue2;
	color: @white;
	box-shadow: 1px 1px 4px fade(@black, 20%);

	.core-form & {
		padding: 0;
	}

	a {
		color: @white;
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}

		&.btn {
			text-decoration: none;
		}
	}

	.bx-alert-close {
		.position (@rtl) when (@rtl = false) { right: 5px; }
		.position (@rtl) when (@rtl = true) { left: 5px; }

		position: absolute;
		top: 0;
		.position(@rtl);

		.vicon {
			color: @black;
			opacity: 0.4;
			height: 2em;
			line-height: 2em;
		}
		&:hover,
		&:focus {
			.vicon {
				opacity: 1;
			}
		}
		&:focus {
			outline: thin dotted;
		}
	}

	.bx-alert-icon {
		display: table-cell;
		padding: 0 @spacingM;
		font-size: 18px;
		color: @white;
		vertical-align: middle;
		background: shade(@blue2, 10%);
		border-radius: @borderRadiusS 0 0 @borderRadiusS;
	}

	.bx-alert-content {
		display: table-cell;
		width: 100%;
		vertical-align: middle;
		padding: @spacingM @spacingL;
	}

	.bx-alert-title {
		margin: 0 0 @spacingXs 0;
		color: @white;
	}
}

.bx-alert-warning {
	#gradient > .vertical(tint(@yellow, 80%), tint(@yellow, 70%));
	color: @baseFontColor;

	a {
		color: @baseFontColor;
	}

	.bx-alert-icon {
		background: none;
		color: @yellow;
	}
}

.bx-alert-error {
	background: @orange2;

	.bx-alert-icon {
		background: shade(@orange2, 10%);
	}
}

.bx-alert-error-form {
	background: @errorText;

	.bx-alert-icon {
		background: shade(@errorText, 10%);
	}
}

.bx-alert-ok {
	background: @green2;

	.bx-alert-icon {
		background: shade(@green2, 10%);
	}
}

.bx-alert-notification {
	background: @blue4;

	.bx-alert-icon {
		background: shade(@blue4, 10%);
	}
}

.bx-alert-premium {
  @bg-alert-premium: tint(@black, 24%);
  background: @bg-alert-premium;

  .bx-alert-icon {
    background: shade(@bg-alert-premium, 10%);
		color: @orange4;
	}
}

// Flippable box

.bx-flip {
	position: relative;
	margin-bottom: @spacingL;
}

.bx-flip-front, .bx-flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: 0;
	-webkit-transition: -webkit-transform .4s ease-in-out;
	transition: transform .4s ease-in-out;
}

.bx-flip-front {
	position: relative;
	z-index: 1;
}

.bx-flip-back {
	background: @blueSoft;
	color: @white;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;

	.h-bx, .vicon, h2, label,
	.h-bx-link .vicon, .h-bx-link:focus .vicon, .h-bx-link:hover .vicon {
		color: @white;
	}

	.h-bx {
		border-color: @white;
	}
}

.bx-flip-back:not(#unsupported) {
	visibility: visible;
	-webkit-transform: perspective(700px) rotateY(180deg);
	transform: perspective(700px) rotateY(180deg);
	.bx-flip-vertical & {
		-webkit-transform: perspective(700px) rotateX(180deg);
		transform: perspective(700px) rotateX(180deg);
	}
	.msie9 & {
		visibility: hidden;
	}
}

.bx-flip-flipped {
	.bx-flip-front {
		-webkit-transform: perspective(700px) rotateY(-180deg);
		transform: perspective(700px) rotateY(-180deg);
	}

	&.bx-flip-vertical {
		.bx-flip-front {
			-webkit-transform: perspective(700px) rotateX(-180deg);
			transform: perspective(700px) rotateX(-180deg);
		}
	}

	.bx-flip-back {
		z-index: 2;
		visibility: visible;
	}

	.bx-flip-back:not(#unsupported) {
		-webkit-transform: perspective(700px) rotate(0);
		transform: perspective(700px) rotate(0);
		.msie9 & {
			visibility: visible;
		}
	}
}

// Editable box

.bx-editable {
	position: relative;

	.bx-edit-btn {
		position: absolute;
		.right(@rtl, 100%);
    min-width: 8em;
		.margin-right(@rtl, @spacingL);
    .text-align-right(@rtl);

		.bx-edit {
			.border-radius (@rtl) when (@rtl = false) {
				border-radius: @borderRadiusS 0 0 @borderRadiusS;
			}
			.border-radius (@rtl) when (@rtl = true) {
				border-radius: 0 @borderRadiusS @borderRadiusS 0;
			}

      display: inline-block;
      margin: 0 0 @spacingS 0;
			padding: 8px @spacingXs 6px;
			line-height: @baseLineHeight;
			background: @blue2;
      .border-radius(@rtl);
			white-space: nowrap;
      text-decoration: none;
      color: @white;

      .vicon {
        color: @white;
      }

      span {
        display: inline-block;
        width: 0;
        max-width: 0;
        overflow: hidden;
        .transition(max-width 0.3s);
      }

      &:hover {
        background: shade(@blue2, 20%);

        span {
        	width: auto;
          max-width: 10em;
        }
      }
		}

    .bx-edit-rm {
      background: tint(@black, 20%);

      &:hover {
        background: @black;
      }
    }

	}
}