/*====================================
=            DEVICE VARIABLES	     =
/* Small (sm) */
/*@media (min-width: 640px) {}*/

/* Medium (md) */
/*@media (min-width: 768px) {}*/

/* Large (lg) */
/*@media (min-width: 1024px) {}*/

/* Extra Large (xl) */
/*@media (min-width: 1280px) {}*/
/*====================================*/
@desktop: ~'(min-width: 720px)';
@tablet: ~'(min-width: 620px)';
@phone: ~'(min-width: 320px) and (max-width: 719px) and (orientation: portrait)';
@phone-landscape: ~'(min-width: 320px) and (max-device-width: 719px) and (orientation: landscape)';
@small-phone: ~'(max-width: 320px)';
/*====================================
=            COLOR VARIABLES	    =
====================================*/

@blue: blue;
@orange: #ff6b22;
@primary-color: @orange;
@dark-color: #202020;
@dark-color-text: #ffffff;
@medium-color: #d8d8d8;
@light-color: #f7f7f8;
@white: #ffffff;
@theme-color: @dark-color;
@primary-color-lightened: lighten(@primary-color, 5%);
@theme-color-secondary: lighten(@dark-color, 5%);
@theme-color-offset: @light-color;
/*====================================
=            GENERAL VARIABLES	     =
====================================*/
@height-sm: 24px;
@height-sm-1: 32px;
@height-md: 44px;
@height-md-1: 64px;
@height-lg: 88px;
@height-lg-1: 100px;
@height-xl: 160px;
@height-xl-1: 200px;
@height-xxl: 240px;
@height-xxl-1: 280px;

@width-sm: 24px;
@width-sm-1: 32px;
@width-md: 44px;
@width-md-1: 64px;
@width-xl: 160px;

@border-radius: 4px;
@content-padding: 8px;

@s-1: 4px;
@s-2: 8px;
@s-3: 16px;
@s-4: 24px;
@s-44: 44px;

@navbar-height: 44px;
@navbar-height-desktop: 44px;

@header-height: @navbar-height;
@header-height-desktop: @navbar-height-desktop;
@edge-spacing: 12px;
@outof-view: 120%;
/*====================================
=            GUI-TOUCH VARIABLES	 =
====================================*/
@gui-touch-min-width: 44px;
@gui-touch-min-height: 44px;
@gui-touch-inner-width: 80%;
/*====================================
=            GUI-SHEET VARIABLES	 =
====================================*/
@gui-sheet-fixed-width: 200px;
@gui-sheet-fixed-height-sm: 100px;
@gui-sheet-fixed-height-md: 200px;
/*====================================
=            MIXINS	             =
====================================*/
.clickthrough{
	pointer-events: none;
}
.overflow-hidden{
	overflow: hidden;
}
.z-1{
	z-index: 10;
}
.z-2{
	z-index: 20;
}
.z-3{
	z-index: 30;
}
.z-9{
	z-index: 9999;
}
.color-primary{
	color: @primary-color;
}
.background-primary{
	background-color: @primary-color;
	color: @white;
}
.background-dark{
	background-color: @dark-color;
	color: @white;
}
.background-dark-secondary{
	background-color: @theme-color-secondary;
	color: @white;
}
.background-offset{
	background-color: @light-color;
	color: @dark-color;
}
.background-light{
	background-color: @light-color;
	color: @dark-color;
}
.background-white{
	background-color: @white;
	color: @dark-color;
}
.background-theme{
	.background-dark;
}
.background-theme-offset{
	.background-offset;
}
.background-theme-secondary{
	.background-dark-secondary;
}
.color-theme{
	color: @theme-color;
}
.color-theme-offset{
	color: @theme-color-offset;
}

.color-dark{
	color: @dark-color;
}
.color-light{
	color: @light-color;
}
.color-white{
	color: @white;
}
.border-theme{
    border: 1px solid @theme-color-offset;
}
.border-theme-offset{
    border: 1px solid @theme-color;
}

.fixed{
	position: fixed;
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}

.opac-0{
	opacity: 0;
}
.opac-1{
	opacity: 0.2;
}
.opac-2{
	opacity: 0.5;
}
.opac-3{
	opacity: 0.8;
}
.opac-4{
	opacity: 1;
}

.slide-in-x(@padding: 0px){
	.transition;
	-webkit-transform: translate3d(@outof-view, 0px, 0px);
	&.visible{
		-webkit-transform: translate3d(0px, @padding, 0px);
	}
}
.slide-in-y(@padding: 0px){
	.transition;
	-webkit-transform: translate3d(0px, @outof-view, 0px);
	&.visible{
		-webkit-transform: translate3d(0px, @padding, 0px);
	}
}

.tl-0{
	top: 0px;
	left: 0px;
}

.top(@padding: 0px){
	top: @header-height + @padding;
	bottom: unset;
	@media @desktop{
		top: @header-height-desktop + @padding;
	}
}
.bottom(@padding: 0px){
	bottom: @padding;
	top: unset;
}
.right(@padding: 0px){
	right: @padding;
	left: unset;
}
.left(@padding: 0px){
	left: @padding;
	right: unset;
}
.border-box{box-sizing: border-box;}
.p-x{padding-left: @content-padding; padding-right: @content-padding; .border-box;}
.p-x-1{padding-left: @s-1; padding-right: @s-1; .border-box;}
.p-x-2{padding-left: @s-2; padding-right: @s-2; .border-box;}
.p-x-3{padding-left: @s-3; padding-right: @s-3; .border-box;}
.p-x-4{padding-left: @s-4; padding-right: @s-4; .border-box;}

.p-y{padding-top: @content-padding; padding-bottom: @content-padding;}
.p-y-1{padding-top: @s-1; padding-bottom: @s-1; .border-box;}
.p-y-2{padding-top: @s-2; padding-bottom: @s-2; .border-box;}
.p-y-3{padding-top: @s-3; padding-bottom: @s-3; .border-box;}
.p-y-4{padding-top: @s-4; padding-bottom: @s-4; .border-box;}

.p-all{
	padding: @content-padding;
	.border-box;
}
.w-25{
	width: 25%;
}
.w-50{
	width: 50%;
}
.w-75{
	width: 75%;
}
.w-100{
	width: 100%;
}
.w-0{
	width: 0%;
}
.w-sm{
	width: @width-sm;
}
.w-sm-1{
	width: @width-sm-1;
}
.w-md{
	width: @width-md;
}
.w-md-1{
	width: @width-md-1;
}

.wh-100{
	width: 100%;
	height: 100%;
}
.w-view{
	max-width: 800px;
}
.h-25{
	height: 25%;
}
.h-50{
	height: 50%;
}
.h-75{
	height: 75%;
}
.h-100{
	height: 100%;
}
.h-sm{
	height: @height-sm;
}
.h-sm-1{
	height: @height-sm-1;
}
.h-md{
	height: @height-md;
}
.h-md-1{
	height: @height-md-1;
}
.h-xl-1{
	height: @height-xl-1;
}

.border-radius-sm{
	border-radius: 4px;
}
.border-radius(@radius){
    border-radius: @radius;
}
.border-radius-top(@radius){
    border-top-right-radius: @radius;
    border-top-left-radius: @radius;
}
.border-radius-bottom(@radius){
    border-bottom-right-radius: @radius;
    border-bottom-left-radius: @radius;
}
.border-radius-left(@radius){
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius;
}
.border-radius-right(@radius){
    border-top-right-radius: @radius;
    border-bottom-right-radius: @radius;
}
.border{
	border: 1px solid @medium-color;
	&.lt{
		border: 1px solid @light-color;
	}
}
.border-top{
	border-top: 1px solid @medium-color;
	&.lt{
		border-top: 1px solid @light-color;
	}
}
.border-bottom{
	border-bottom: 1px solid @medium-color;
	&.lt{
		border-bottom: 1px solid @light-color;
	}
}
.border-right{
	border-right: 1px solid @medium-color;
	&.lt{
		border-right: 1px solid @light-color;
	}
}
.border-left{
	border-left: 1px solid @medium-color;
	&.lt{
		border-left: 1px solid @light-color;
	}
}

.flex-row{
	display: flex;
	flex-direction: row;
}
.flex-row-center{
	.flex-row;
	justify-content: center;
	align-items: center;
}
.flex-row-space-between{
	.flex-row;
	justify-content: space-between;
	align-items: center;
}
.flex-row-space-around{
	.flex-row;
	justify-content: space-around;
	align-items: center;
}
.flex-column{
	display: flex;
	flex-direction: column;
}
.flex-column-center{
	.flex-column;
	justify-content: center;
	align-items: center;
}
.flex-column-start{
	.flex-column;
	justify-content: start;
	align-items: center;
}
.flex-column-space-around{
	.flex-column;
	justify-content: space-around;
	align-items: center;
}
.flex-column-space-between{
	.flex-column;
	justify-content: space-between;
	align-items: center;
}
.transition{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.draggable {
    position: absolute;
}
.hidden{
	display: none;
}
.inner-shadow-xs{
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.border-dark{
    border: 1px solid @dark-color;
}
.bg-dark{
    background-color: @dark-color;
    color: white;
}