.x_bs { box-sizing:border-box;}
.x_round { border-radius:52%;}
.x_size { width:100%; height:100%;}
.x_full { position:absolute; top:0; bottom:0; left:0; right:0;}
.x_rotate(@value) { transform:rotate(unit(@value,deg));}
.x_transx(@value) when(ispercentage(@value)) { transform:translate3d(@value,0,0);}
.x_transy(@value) when(ispercentage(@value)) { transform:translate3d(0,@value,0);}
.x_animate(@property,@duaring) { transition:@property unit(@duaring,s) ease-out;}
.x_to { white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.x_clear {
	&:after { content:""; display:block; height:0; clear:both; visibility:hidden; width:100%;}
}
.outline() { box-shadow: inset 1px 1px 0 @warning, inset -1px -1px 0 @warning;}



@primary-light-1:mix(#fff,@primary,10%);
@primary-light-2:mix(#fff,@primary,20%);
@primary-light-3:mix(#fff,@primary,30%);
@primary-light-4:mix(#fff,@primary,40%);
@primary-light-5:mix(#fff,@primary,50%);
@primary-light-6:mix(#fff,@primary,60%);
@primary-light-7:mix(#fff,@primary,70%);
@primary-light-8:mix(#fff,@primary,80%);
@primary-light-9:mix(#fff,@primary,90%);
@primary-dark-1:mix(#000,@primary,10%);
@primary-dark-2:mix(#000,@primary,20%);
@primary-dark-3:mix(#000,@primary,30%);
@primary-dark-4:mix(#000,@primary,40%);
@primary-dark-5:mix(#000,@primary,50%);
@primary-dark-6:mix(#000,@primary,60%);
@primary-dark-7:mix(#000,@primary,70%);
@primary-dark-8:mix(#000,@primary,80%);
@primary-dark-9:mix(#000,@primary,90%);
@primary-op-0:fade(@primary,0%);
@primary-op-1:fade(@primary,10%);
@primary-op-2:fade(@primary,20%);
@primary-op-3:fade(@primary,30%);
@primary-op-4:fade(@primary,40%);
@primary-op-5:fade(@primary,50%);
@primary-op-6:fade(@primary,60%);
@primary-op-7:fade(@primary,70%);
@primary-op-8:fade(@primary,80%);
@primary-op-9:fade(@primary,90%);

@success-light-1:mix(#fff,@success,10%);
@success-light-2:mix(#fff,@success,20%);
@success-light-3:mix(#fff,@success,30%);
@success-light-4:mix(#fff,@success,40%);
@success-light-5:mix(#fff,@success,50%);
@success-light-6:mix(#fff,@success,60%);
@success-light-7:mix(#fff,@success,70%);
@success-light-8:mix(#fff,@success,80%);
@success-light-9:mix(#fff,@success,90%);
@success-dark-1:mix(#000,@success,10%);
@success-dark-2:mix(#000,@success,20%);
@success-dark-3:mix(#000,@success,30%);
@success-dark-4:mix(#000,@success,40%);
@success-dark-5:mix(#000,@success,50%);
@success-dark-6:mix(#000,@success,60%);
@success-dark-7:mix(#000,@success,70%);
@success-dark-8:mix(#000,@success,80%);
@success-dark-9:mix(#000,@success,90%);
@success-op-0:fade(@success,0%);
@success-op-1:fade(@success,10%);
@success-op-2:fade(@success,20%);
@success-op-3:fade(@success,30%);
@success-op-4:fade(@success,40%);
@success-op-5:fade(@success,50%);
@success-op-6:fade(@success,60%);
@success-op-7:fade(@success,70%);
@success-op-8:fade(@success,80%);
@success-op-9:fade(@success,90%);

@danger-light-1:mix(#fff,@danger,10%);
@danger-light-2:mix(#fff,@danger,20%);
@danger-light-3:mix(#fff,@danger,30%);
@danger-light-4:mix(#fff,@danger,40%);
@danger-light-5:mix(#fff,@danger,50%);
@danger-light-6:mix(#fff,@danger,60%);
@danger-light-7:mix(#fff,@danger,70%);
@danger-light-8:mix(#fff,@danger,80%);
@danger-light-9:mix(#fff,@danger,90%);
@danger-dark-1:mix(#000,@danger,10%);
@danger-dark-2:mix(#000,@danger,20%);
@danger-dark-3:mix(#000,@danger,30%);
@danger-dark-4:mix(#000,@danger,40%);
@danger-dark-5:mix(#000,@danger,50%);
@danger-dark-6:mix(#000,@danger,60%);
@danger-dark-7:mix(#000,@danger,70%);
@danger-dark-8:mix(#000,@danger,80%);
@danger-dark-9:mix(#000,@danger,90%);
@danger-op-1:fade(@danger,0%);
@danger-op-1:fade(@danger,10%);
@danger-op-2:fade(@danger,20%);
@danger-op-3:fade(@danger,30%);
@danger-op-4:fade(@danger,40%);
@danger-op-5:fade(@danger,50%);
@danger-op-6:fade(@danger,60%);
@danger-op-7:fade(@danger,70%);
@danger-op-8:fade(@danger,80%);
@danger-op-9:fade(@danger,90%);

@warning-light-1:mix(#fff,@warning,10%);
@warning-light-2:mix(#fff,@warning,20%);
@warning-light-3:mix(#fff,@warning,30%);
@warning-light-4:mix(#fff,@warning,40%);
@warning-light-5:mix(#fff,@warning,50%);
@warning-light-6:mix(#fff,@warning,60%);
@warning-light-7:mix(#fff,@warning,70%);
@warning-light-8:mix(#fff,@warning,80%);
@warning-light-9:mix(#fff,@warning,90%);
@warning-dark-1:mix(#000,@warning,10%);
@warning-dark-2:mix(#000,@warning,20%);
@warning-dark-3:mix(#000,@warning,30%);
@warning-dark-4:mix(#000,@warning,40%);
@warning-dark-5:mix(#000,@warning,50%);
@warning-dark-6:mix(#000,@warning,60%);
@warning-dark-7:mix(#000,@warning,70%);
@warning-dark-8:mix(#000,@warning,80%);
@warning-dark-9:mix(#000,@warning,90%);
@warning-op-1:fade(@warning,10%);
@warning-op-2:fade(@warning,20%);
@warning-op-3:fade(@warning,30%);
@warning-op-4:fade(@warning,40%);
@warning-op-5:fade(@warning,50%);
@warning-op-6:fade(@warning,60%);
@warning-op-7:fade(@warning,70%);
@warning-op-8:fade(@warning,80%);
@warning-op-9:fade(@warning,90%);

@bright-light-1:mix(#fff,@bright,10%);
@bright-light-2:mix(#fff,@bright,20%);
@bright-light-3:mix(#fff,@bright,30%);
@bright-light-4:mix(#fff,@bright,40%);
@bright-light-5:mix(#fff,@bright,50%);
@bright-light-6:mix(#fff,@bright,60%);
@bright-light-7:mix(#fff,@bright,70%);
@bright-light-8:mix(#fff,@bright,80%);
@bright-light-9:mix(#fff,@bright,90%);
@bright-dark-1:mix(#000,@bright,10%);
@bright-dark-2:mix(#000,@bright,20%);
@bright-dark-3:mix(#000,@bright,30%);
@bright-dark-4:mix(#000,@bright,40%);
@bright-dark-5:mix(#000,@bright,50%);
@bright-dark-6:mix(#000,@bright,60%);
@bright-dark-7:mix(#000,@bright,70%);
@bright-dark-8:mix(#000,@bright,80%);
@bright-dark-9:mix(#000,@bright,90%);
@bright-op-1:fade(@bright,10%);
@bright-op-2:fade(@bright,20%);
@bright-op-3:fade(@bright,30%);
@bright-op-4:fade(@bright,40%);
@bright-op-5:fade(@bright,50%);
@bright-op-6:fade(@bright,60%);
@bright-op-7:fade(@bright,70%);
@bright-op-8:fade(@bright,80%);
@bright-op-9:fade(@bright,90%);

@secondary-light-1:mix(#fff,@secondary,10%);
@secondary-light-2:mix(#fff,@secondary,20%);
@secondary-light-3:mix(#fff,@secondary,30%);
@secondary-light-4:mix(#fff,@secondary,40%);
@secondary-light-5:mix(#fff,@secondary,50%);
@secondary-light-6:mix(#fff,@secondary,60%);
@secondary-light-7:mix(#fff,@secondary,70%);
@secondary-light-8:mix(#fff,@secondary,80%);
@secondary-light-9:mix(#fff,@secondary,90%);
@secondary-dark-1:mix(#000,@secondary,10%);
@secondary-dark-2:mix(#000,@secondary,20%);
@secondary-dark-3:mix(#000,@secondary,30%);
@secondary-dark-4:mix(#000,@secondary,40%);
@secondary-dark-5:mix(#000,@secondary,50%);
@secondary-dark-6:mix(#000,@secondary,60%);
@secondary-dark-7:mix(#000,@secondary,70%);
@secondary-dark-8:mix(#000,@secondary,80%);
@secondary-dark-9:mix(#000,@secondary,90%);
@secondary-op-0:fade(@secondary,0%);
@secondary-op-1:fade(@secondary,10%);
@secondary-op-2:fade(@secondary,20%);
@secondary-op-3:fade(@secondary,30%);
@secondary-op-4:fade(@secondary,40%);
@secondary-op-5:fade(@secondary,50%);
@secondary-op-6:fade(@secondary,60%);
@secondary-op-7:fade(@secondary,70%);
@secondary-op-8:fade(@secondary,80%);
@secondary-op-9:fade(@secondary,90%);

@bg-op-0:fade(@bg,0%);
@bg-op-0-5:fade(@bg,5%);
@bg-op-1:fade(@bg,10%);
@bg-op-2:fade(@bg,20%);
@bg-op-3:fade(@bg,30%);
@bg-op-4:fade(@bg,40%);
@bg-op-5:fade(@bg,50%);
@bg-op-6:fade(@bg,60%);
@bg-op-7:fade(@bg,70%);
@bg-op-8:fade(@bg,80%);
@bg-op-9:fade(@bg,90%);
@bg-op-9-5:fade(@bg,95%);
@bg-dark-0-1:mix(#000,@bg,1%);
@bg-dark-0-2:mix(#000,@bg,2%);
@bg-dark-0-3:mix(#000,@bg,3%);
@bg-dark-0-4:mix(#000,@bg,4%);
@bg-dark-0-5:mix(#000,@bg,5%);
@bg-dark-0-6:mix(#000,@bg,6%);
@bg-dark-0-7:mix(#000,@bg,7%);
@bg-dark-0-8:mix(#000,@bg,8%);
@bg-dark-0-9:mix(#000,@bg,9%);
@bg-dark-1:mix(#000,@bg,10%);
@bg-dark-1-5:mix(#000,@bg,15%);
@bg-dark-2:mix(#000,@bg,20%);
@bg-dark-2-5:mix(#000,@bg,25%);
@bg-dark-3:mix(#000,@bg,30%);
@bg-dark-3-5:mix(#000,@bg,35%);
@bg-dark-4:mix(#000,@bg,40%);
@bg-dark-4-5:mix(#000,@bg,45%);
@bg-dark-5:mix(#000,@bg,50%);
@bg-dark-5-5:mix(#000,@bg,55%);
@bg-dark-6:mix(#000,@bg,60%);
@bg-dark-6-5:mix(#000,@bg,65%);
@bg-dark-7:mix(#000,@bg,70%);
@bg-dark-7-5:mix(#000,@bg,75%);
@bg-dark-8:mix(#000,@bg,80%);
@bg-dark-8-5:mix(#000,@bg,85%);
@bg-dark-9:mix(#000,@bg,90%);
@bg-dark-9-1:mix(#000,@bg,91%);
@bg-dark-9-2:mix(#000,@bg,92%);
@bg-dark-9-3:mix(#000,@bg,93%);
@bg-dark-9-4:mix(#000,@bg,94%);
@bg-dark-9-5:mix(#000,@bg,95%);
@bg-dark-9-6:mix(#000,@bg,96%);
@bg-dark-9-7:mix(#000,@bg,97%);
@bg-dark-9-8:mix(#000,@bg,98%);
@bg-dark-9-9:mix(#000,@bg,99%);

@fg-op-0:fade(#000,0%);
@fg-op-0-5:fade(#000,5%);
@fg-op-1:fade(#000,10%);
@fg-op-2:fade(#000,20%);
@fg-op-3:fade(#000,30%);
@fg-op-4:fade(#000,40%);
@fg-op-5:fade(#000,50%);
@fg-op-6:fade(#000,60%);
@fg-op-7:fade(#000,70%);
@fg-op-8:fade(#000,80%);
@fg-op-9:fade(#000,90%);
@fg-op-9-5:fade(#000,95%);
@fg-light-0-1:mix(#fff,@fg,1%);
@fg-light-0-2:mix(#fff,@fg,2%);
@fg-light-0-3:mix(#fff,@fg,3%);
@fg-light-0-4:mix(#fff,@fg,4%);
@fg-light-0-5:mix(#fff,@fg,5%);
@fg-light-0-6:mix(#fff,@fg,6%);
@fg-light-0-7:mix(#fff,@fg,7%);
@fg-light-0-8:mix(#fff,@fg,8%);
@fg-light-0-9:mix(#fff,@fg,9%);
@fg-light-1:mix(#fff,@fg,10%);
@fg-light-1-5:mix(#fff,@fg,15%);
@fg-light-2:mix(#fff,@fg,20%);
@fg-light-2-5:mix(#fff,@fg,25%);
@fg-light-3:mix(#fff,@fg,30%);
@fg-light-3-5:mix(#fff,@fg,35%);
@fg-light-4:mix(#fff,@fg,40%);
@fg-light-4-5:mix(#fff,@fg,45%);
@fg-light-5:mix(#fff,@fg,50%);
@fg-light-5-5:mix(#fff,@fg,55%);
@fg-light-6:mix(#fff,@fg,60%);
@fg-light-6-5:mix(#fff,@fg,65%);
@fg-light-7:mix(#fff,@fg,70%);
@fg-light-7-5:mix(#fff,@fg,75%);
@fg-light-8:mix(#fff,@fg,80%);
@fg-light-8-5:mix(#fff,@fg,85%);
@fg-light-9:mix(#fff,@fg,90%);
@fg-light-9-1:mix(#fff,@fg,91%);
@fg-light-9-2:mix(#fff,@fg,92%);
@fg-light-9-3:mix(#fff,@fg,93%);
@fg-light-9-4:mix(#fff,@fg,94%);
@fg-light-9-5:mix(#fff,@fg,95%);
@fg-light-9-6:mix(#fff,@fg,96%);
@fg-light-9-7:mix(#fff,@fg,97%);
@fg-light-9-8:mix(#fff,@fg,98%);
@fg-light-9-9:mix(#fff,@fg,99%);