@import "common/bootstrap";
@import "common/bootstrap-select";

$color_black    : #000000;
$color_white    : #ffffff;
$color_gray_90  : lighten($color_black, 10%);//#1a1a1a
$color_gray_80  : lighten($color_black, 20%);//#333333
$color_gray_70  : lighten($color_black, 30%);//#4d4d4d
$color_gray_60  : lighten($color_black, 40%);//#666666
$color_gray_50  : lighten($color_black, 50%);//#808080
$color_gray_40  : lighten($color_black, 60%);//#999999
$color_gray_30  : lighten($color_black, 70%);//#b3b3b3
$color_gray_20  : lighten($color_black, 80%);//#cccccc
$color_gray_10  : lighten($color_black, 90%);//#e6e6e6
$color_gray_05  : lighten($color_black, 95%);//#f2f2f2
$color_gray_03  : lighten($color_black, 97%);//#f6f6f6;

$color_primary    : #2E75D1;
$color_secondary  : #002B81;
$color_success    : #00C800;
$color_green      : #006700;
$color_danger     : #D70A0A;
$color_body       : #FFE180;
$color_warning    : #FFC20E;

@mixin border-radius($r : 3px){
	-webkit-border-radius: $r;
	-moz-border-radius: $r;
	-ms-border-radius: $r;
	border-radius: $r;
}
@mixin box-shadow($boxshadow : none){
	-webkit-box-shadow: $boxshadow;
	-moz-box-shadow: $boxshadow;
	-ms-box-shadow: $boxshadow;
	box-shadow: $boxshadow;
}
@mixin transition($x : all 0.5s ease-out 0s){
	-webkit-transition: $x;
	-moz-transition: $x;
	-o-transition: $x;
	transition: $x;
}
@mixin transform($transform){
	-webkit-transform: $transform;
	-moz-transform: $transform;
	-ms-transform: $transform;
	-o-transform: $transform;
	transform: $transform;
}
@mixin linear-gradient($g){
	background: -webkit-linear-gradient($g);
	background: -moz-linear-gradient($g);
	background: -ms-linear-gradient($g);
	background: -o-linear-gradient($g);
	background: linear-gradient($g);
}

html,body {
	background: #fff;
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: $color_black;
}
input, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	color: $color_black !important;
	outline: none !important;
}

p {margin: 0px 0px 1.5em 0px; padding: 0px;}

a, a:link, a:visited {
	color: $color_secondary;
	text-decoration: none;
}
a:hover {text-decoration: underline;}
a:focus,a:active {outline: none;}
a img, :link img, :visited img {border: none;}

table {border-collapse: collapse; border-spacing: 0;}
table td {padding: 0px;}

address {font-style: normal;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin: 0px 0px 0.5rem 0px;
	padding: 0px;
	font-weight: bold;
	line-height: 1.3em;
	color: $color_black;
}
h1, .h1 {font-size: 1.6rem;}
h2, .h2 {font-size: 1.5rem;}
h3, .h3 {font-size: 1.4rem;}
h4, .h4 {font-size: 1.3rem;}
h5, .h5 {font-size: 1.2rem;}
h6, .h6 {font-size: 1.1rem;}

//Fonts
.fs-12 { font-size: 0.7rem; }
.fs-13 { font-size: 0.75rem; }
.fs-14 { font-size: 0.8rem; }
.fs-15 { font-size: 0.85rem; }
.fs-16 { font-size: 0.9rem; }
.fs-17 { font-size: 0.95rem; }
.fs-18 { font-size: 1rem; }
.fs-19 { font-size: 1.1rem; }
.fs-20 { font-size: 1.15rem; }
.fs-22 { font-size: 1.2rem; }
.fs-24 { font-size: 1.35rem; }
.fs-28 { font-size: 1.55rem; }
.fs-32 { font-size: 1.75rem; }
.fs-36 { font-size: 2rem; }
.fs-42 { font-size: 2.3rem; }

.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }

.text-nowrap {white-space: nowrap !important;}
.text-underline {text-decoration: underline;}

//Colors
.bg-body { background: $color_body; }
.bg-gray { background: $color_gray_05; }
.bg-blue { background: #D5E6F6; }
.bg-danger {
	background: $color_danger !important; color: $color_white !important;
	.closer {
		opacity: 1;
		&:before { background: $color_white !important; }
		&:after { background: $color_white !important; }
	}
}
.bg-success {
	background: $color_success !important; color: $color_white !important;
	.closer {
		opacity: 1;
		&:before { background: $color_white !important; }
		&:after { background: $color_white !important; }
	}
}

.text-primary { color: $color_primary !important; }
.text-secondary { color: $color_secondary !important; }
.text-success { color: $color_success !important; }
.text-danger { color: $color_danger !important; }
.text-warning { color: $color_warning !important; }
//.text-info { color: $color_info; }
.text-light  { color: $color_gray_50 !important; }
.text-dark { color: $color_black !important; }
.text-muted { color: $color_gray_40; }
.text-white  { color: $color_white !important; }

//images
.img-thumbnail {
	border: 2px solid #ebeff3;
	position: relative;
	@include border-radius(2px);
	img {
		display: block;
		width: 100%;
	}
	.img-thumbnail__icon {
		position: absolute; top: 2px; right: 2px;
		z-index: 5;
		display: block; width: 16px;
		&.size_24 { width: 24px; }
	}
}
div.img-thumbnail { display: block; }
.img-block {
	position: relative;
	display: block;
	width: 100%;
	img { display: block; width: 100%; }
	&.checked {
		img { opacity: 0.3; }
		&:before {
			content: '';
			background: url(../images/i-good.png) no-repeat 50% 50% / auto 100%;
			position: absolute; top: 50%; left: 50%; z-index: 5;
			display: block; width: 24px; height: 24px;
			margin: -12px 0px 0px -12px;
		}
	}
	.closer {
		background: $color_gray_40;
		background: rgba(0,0,0,0.25);
		opacity: 1;
		@include border-radius(2px);
		&:before {
			content: '';
			background: $color_white;
			position: absolute; top: 50%; left: 2px;
			display: block; width: 20px; height: 2px;
			@include transform(rotate(45deg));
		}
		&:after {
			content: '';
			background: $color_white;
			position: absolute; top: 50%; left: 2px;
			display: block; width: 20px; height: 2px;
			@include transform(rotate(-45deg));
		}
		&:hover {
			background: $color_gray_40;
			@include transform(rotate(0deg));
		}
	}
}

//Lists
.list-inline {
	margin-right: -5px;
	& > li {
		vertical-align: middle;
	}
	&.list-inline-1 {
		margin-left: -0.25rem; margin-right: -0.25rem;
		& > li { padding-left: .25rem; padding-right: .25rem; }
	}
	&.list-inline-2 {
		margin-left: -0.5rem; margin-right: -0.5rem;
		& > li { padding-left: .5rem; padding-right: .5rem; }
	}
	&.list-inline-3 {
		margin-left: -0.75rem; margin-right: -0.75rem;
		& > li { padding-left: .75rem; padding-right: .75rem; }
	}
	&.list-inline-4 {
		margin-left: -1rem; margin-right: -1rem;
		& > li { padding-left: 1rem; padding-right: 1rem; }
	}
}

.list-unstyled {
	&.list-unstyled-1 > li:not(:first-child){ margin-top: .25rem; }
	&.list-unstyled-2 > li:not(:first-child){ margin-top: .5rem; }
	&.list-unstyled-3 > li:not(:first-child){ margin-top: .75rem; }
	&.list-unstyled-4 > li:not(:first-child){ margin-top: 1rem; }
	&.list-unstyled-5 > li:not(:first-child){ margin-top: 1.25rem; }

	&.list-bord {
		li {
			border-bottom: 1px solid $color_gray_10;
		}
	}
}

.list-ol {
	margin: 0px; padding: 0px; list-style: none;
	counter-reset: item;
	li {
		position: relative;
		display: block;
		padding-left: 28px;
		&:before {
			content: counters(item, ".") ".";
			counter-increment: item;
			position: absolute; top: 0px; left: 0px;
		}
		ol {
			margin: 0px; padding: 0px; list-style: none;
			li { padding-left: 45px; }
		}
	}
	&.list-ol-1 li + li { margin-top: .25rem; }
	&.list-ol-2 li + li { margin-top: .5rem; }
	&.list-ol-3 li + li { margin-top: .75rem; }
	&.list-ol-4 li + li { margin-top: 1rem; }

	&.list-ol-fs-24 {
		li {
			&:before {
				font-size: 1.35rem;
				font-weight: bold;
			}
		}
	}
}

.list-arrow-link {
	margin: 0; padding: 0; list-style: none;
	li {
		border-bottom: 1px solid $color_gray_20;
		position: relative;
		padding: 8px 20px 8px 0px;
		.fa-angle-right {
			position: absolute; top: 50%; right: 0px;
			display: block; height: 40px;
			margin-top: -20px;
			font-size: 32px;
			line-height: 40px;
			text-align: center;
		}
		.arrow-link__title {
			font-size: 22px;
		}
		.arrow-link__desc {
			font-size: 16px;
			font-weight: bold;
		}

		.list-arrow-supplier {
			position: relative;
			overflow: hidden;
			font-size: 14px;
			.supplier__left {
				position: relative;
				overflow: hidden;
				padding-right: 12px;
			}
			.supplier__right {
				float: right;
				margin-top: 3px;
				font-size: 12px;
			}
			.supplier__title {
				font-size: 22px;
				font-weight: bold;
				line-height: normal;
			}
			.supplier__desc {}
		}

		&:hover {
			.fa-angle-right {
				color: $color_primary;
			}
		}
	}
}

//Media
.media {
	position: relative;
	margin-top: 0px;
	.media-left { padding-right: 20px; }
	.media-right { padding-left: 20px; }
	.media-img { padding-top: 4px; }
	&.media-responsive {
		@media (max-width : 767px) {
			.media-left { display: block; width: auto; margin: 0px; padding: 0px 0px 20px 0px; }
			.media-right { display: block; width: auto; margin: 0px; padding: 20px 0px 0px 0px; }
			.media-body { display: block; width: auto; }
		}
	}
	.img-thumbnail { max-width: none; }
}
.media-list {
	.media:not(:first-child){
		margin-top: 10px;
	}
}

//Tables
.table {
	&.table-scanned {
		tr {
			&:first-child {
				td { border-top: none !important; }
			}
			td {
				border-top: 1px solid $color_gray_10;
				vertical-align: middle;
				padding: .25rem 0px .25rem .5rem;
				&:first-child {
					padding-left: 0px;
				}
				&.td-number {
					width: 1px;
					font-size: 1.25rem;
					font-weight: bold;
					color: $color_gray_40;
					&.disabled {
						color: $color_gray_20;
						.text-danger { color: $color_gray_20; }
					}
				}
				&.td-list {
					.ofl {
						position: relative;
						overflow: hidden;
						width: 100px;
						.list-inline {
							width: 1000px;
						}
						.btn {
							position: absolute; top: 0px; right: 0px;
						}
					}
					.list-inline {
						margin-top: -2px !important;
						margin-bottom: -2px !important;
						& > li {
							padding-top: 2px;
							padding-bottom: 2px;
							.img-block {
								border: 1px solid $color_gray_10;
								width: 45px;
							}
						}
					}
				}
				&.td-count {
					width: 1px;
					font-size: 1.25rem;
					font-weight: bold;
					text-align: right;
					&.disabled {
						color: $color_gray_30;
					}
				}
			}
		}
	}
}

.tables {
	width: 100%;
	td {
		padding: 10px 0px 0px 10px;
		&:first-child { padding-left: 0px; }
	}
	tr:first-child td { padding-top: 0px; }
	img { max-width: 100%; }
}

//Forms
.form-control {
	border-color: $color_gray_30;
	height: auto;
	padding: .75rem;
	font-size: 1.25rem;
	@include border-radius(2px);
	@media (max-width: 449px) {
		font-size: 1rem;
	}
	&.input-sm {
		padding: 0.5rem;
		line-height: 1.25rem;
	}
	&.focus {
		border-color: #0D61AB;
		@include box-shadow(0px 0px 10px #0D61AB);
	}
}
textarea.form-control {height: auto !important;}

//Buttons
.btn {
	position: relative;
	padding: .75rem 1.25rem .7rem;
	font-size: 1.25rem;
	text-decoration: none !important;
	white-space: normal;
	line-height: normal;
	@include border-radius(2px);
	@media (max-width: 449px) {
		font-size: 1rem;
	}

	&.btn-xs {
		padding: .25rem .5rem;
		font-size: .85rem;
		line-height: normal;
	}
	&.btn-sm {
		padding: .5rem .75rem .4rem;
		font-size: 1rem;
		line-height: normal;
	}

	&.btn-block {
		padding-left: .25rem;
		padding-right: .25rem;
	}

	&.btn-default {
		background: #ccc;
		border-color: #ccc;
		@include linear-gradient(unquote("0deg, #cccccc, #e6e6e6"));
		color: $color_black;
		&:hover {
			background: #e6e6e6;
			border-color: #e6e6e6;
		}
	}
	&.btn-primary {
		background: #002B81;
		border-color: #002B81;
		@include linear-gradient(unquote("0deg, #002B81, #2E75D1"));
		color: $color_white;
		&:hover {
			background: #2E75D1;
			border-color: #2E75D1;
		}
		&.disabled {
			@extend .btn, .btn-default;
			color: $color_gray_40;
		}
	}
	&.btn-success {
		background: #006700;
		border-color: #006700;
		@include linear-gradient(unquote("0deg, #006700, #00C800"));
		color: $color_white;
		&:hover {
			background: #00C800;
			border-color: #00C800;
		}
	}
	&.btn-danger {
		background: #8A0707;
		border-color: #8A0707;
		@include linear-gradient(unquote("0deg, #8A0707, #D70A0A"));
		color: $color_white;
		&:hover {
			background: $color_danger;
			border-color: $color_danger;
		}
	}

	&.disabled, &[disabled] {
		opacity: 0.5;
	}
}

//closer
.closer {
	position: absolute; top: 5px; right: 5px;
	z-index: 55;
	display: block; width: 24px; height: 24px;
	opacity: 0.5;
	@include transition(all .25s linear 0s);
	&:before {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 0px;
		display: block; width: 100%; height: 2px;
		margin-top: -1px;
		@include transform(rotate(45deg));
	}
	&:after {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 0px;
		display: block; width: 100%; height: 2px;
		margin-top: -1px;
		@include transform(rotate(-45deg));
	}
	&:hover {
		cursor: pointer;
		opacity: 1;
		@include transform(rotate(180deg));
	}
}

//Modal
.modal-open {padding-right: 0px !important;}
.modal {
	padding-right: 0px !important;
	padding-left: 0px !important;
	.closer { top: 10px; right: 10px; }
	.modal-dialog {
		position: relative;
		//margin: 50px auto;
		@include border-radius(5px);
		//@media (max-width: 767px){margin: 0px;}
		.modal-content {
			.closeTimer {
				position: absolute; top: 35px; right: 10px;
				font-size: 11px;
			}
			.modal-header {
				background: #DDE4EC;
				border: none;
				padding: 12px 36px;
				font-size: 28px;
				line-height: normal;
				font-weight: bold;
				text-align: center;
				@include border-radius(5px 5px 0px 0px);
			}
			.modal-body {
				padding: 24px;
				@media (max-width: 449px){ padding: 12px; }
			}
		}
	}
}

//Grid normalize
.row-0 { margin-left: 0px !important; margin-right: 0px !important; }
.row-0 > .col-xs-1, .row-0 > .col-sm-1, .row-0 > .col-md-1, .row-0 > .col-lg-1, .row-0 > .col-xs-2, .row-0 > .col-sm-2, .row-0 > .col-md-2, .row-0 > .col-lg-2, .row-0 > .col-xs-3, .row-0 > .col-sm-3, .row-0 > .col-md-3, .row-0 > .col-lg-3, .row-0 > .col-xs-4, .row-0 > .col-sm-4, .row-0 > .col-md-4, .row-0 > .col-lg-4, .row-0 > .col-xs-5, .row-0 > .col-sm-5, .row-0 > .col-md-5, .row-0 > .col-lg-5, .row-0 > .col-xs-6, .row-0 > .col-sm-6, .row-0 > .col-md-6, .row-0 > .col-lg-6, .row-0 > .col-xs-7, .row-0 > .col-sm-7, .row-0 > .col-md-7, .row-0 > .col-lg-7, .row-0 > .col-xs-8, .row-0 > .col-sm-8, .row-0 > .col-md-8, .row-0 > .col-lg-8, .row-0 > .col-xs-9, .row-0 > .col-sm-9, .row-0 > .col-md-9, .row-0 > .col-lg-9, .row-0 > .col-xs-10, .row-0 > .col-sm-10, .row-0 > .col-md-10, .row-0 > .col-lg-10, .row-0 > .col-xs-11, .row-0 > .col-sm-11, .row-0 > .col-md-11, .row-0 > .col-lg-11, .row-0 > .col-xs-12, .row-0 > .col-sm-12, .row-0 > .col-md-12, .row-0 > .col-lg-12 { padding-left: 0px !important; padding-right: 0px !important; }
.row-10 { margin-left: -5px !important; margin-right: -5px !important; }
.row-10 > .col-xs-1, .row-10 > .col-sm-1, .row-10 > .col-md-1, .row-10 > .col-lg-1, .row-10 > .col-xs-2, .row-10 > .col-sm-2, .row-10 > .col-md-2, .row-10 > .col-lg-2, .row-10 > .col-xs-3, .row-10 > .col-sm-3, .row-10 > .col-md-3, .row-10 > .col-lg-3, .row-10 > .col-xs-4, .row-10 > .col-sm-4, .row-10 > .col-md-4, .row-10 > .col-lg-4, .row-10 > .col-xs-5, .row-10 > .col-sm-5, .row-10 > .col-md-5, .row-10 > .col-lg-5, .row-10 > .col-xs-6, .row-10 > .col-sm-6, .row-10 > .col-md-6, .row-10 > .col-lg-6, .row-10 > .col-xs-7, .row-10 > .col-sm-7, .row-10 > .col-md-7, .row-10 > .col-lg-7, .row-10 > .col-xs-8, .row-10 > .col-sm-8, .row-10 > .col-md-8, .row-10 > .col-lg-8, .row-10 > .col-xs-9, .row-10 > .col-sm-9, .row-10 > .col-md-9, .row-10 > .col-lg-9, .row-10 > .col-xs-10, .row-10 > .col-sm-10, .row-10 > .col-md-10, .row-10 > .col-lg-10, .row-10 > .col-xs-11, .row-10 > .col-sm-11, .row-10 > .col-md-11, .row-10 > .col-lg-11, .row-10 > .col-xs-12, .row-10 > .col-sm-12, .row-10 > .col-md-12, .row-10 > .col-lg-12 { padding-left: 5px !important; padding-right: 5px !important; }
.row-20 { margin-left: -10px !important; margin-right: -10px !important; }
.row-20 > .col-xs-1, .row-20 > .col-sm-1, .row-20 > .col-md-1, .row-20 > .col-lg-1, .row-20 > .col-xs-2, .row-20 > .col-sm-2, .row-20 > .col-md-2, .row-20 > .col-lg-2, .row-20 > .col-xs-3, .row-20 > .col-sm-3, .row-20 > .col-md-3, .row-20 > .col-lg-3, .row-20 > .col-xs-4, .row-20 > .col-sm-4, .row-20 > .col-md-4, .row-20 > .col-lg-4, .row-20 > .col-xs-5, .row-20 > .col-sm-5, .row-20 > .col-md-5, .row-20 > .col-lg-5, .row-20 > .col-xs-6, .row-20 > .col-sm-6, .row-20 > .col-md-6, .row-20 > .col-lg-6, .row-20 > .col-xs-7, .row-20 > .col-sm-7, .row-20 > .col-md-7, .row-20 > .col-lg-7, .row-20 > .col-xs-8, .row-20 > .col-sm-8, .row-20 > .col-md-8, .row-20 > .col-lg-8, .row-20 > .col-xs-9, .row-20 > .col-sm-9, .row-20 > .col-md-9, .row-20 > .col-lg-9, .row-20 > .col-xs-10, .row-20 > .col-sm-10, .row-20 > .col-md-10, .row-20 > .col-lg-10, .row-20 > .col-xs-11, .row-20 > .col-sm-11, .row-20 > .col-md-11, .row-20 > .col-lg-11, .row-20 > .col-xs-12, .row-20 > .col-sm-12, .row-20 > .col-md-12, .row-20 > .col-lg-12 { padding-left: 10px !important; padding-right: 10px !important; }
.row-50 { margin-left: -25px !important; margin-right: -25px !important; }
.row-50 > .col-xs-1, .row-50 > .col-sm-1, .row-50 > .col-md-1, .row-50 > .col-lg-1, .row-50 > .col-xs-2, .row-50 > .col-sm-2, .row-50 > .col-md-2, .row-50 > .col-lg-2, .row-50 > .col-xs-3, .row-50 > .col-sm-3, .row-50 > .col-md-3, .row-50 > .col-lg-3, .row-50 > .col-xs-4, .row-50 > .col-sm-4, .row-50 > .col-md-4, .row-50 > .col-lg-4, .row-50 > .col-xs-5, .row-50 > .col-sm-5, .row-50 > .col-md-5, .row-50 > .col-lg-5, .row-50 > .col-xs-6, .row-50 > .col-sm-6, .row-50 > .col-md-6, .row-50 > .col-lg-6, .row-50 > .col-xs-7, .row-50 > .col-sm-7, .row-50 > .col-md-7, .row-50 > .col-lg-7, .row-50 > .col-xs-8, .row-50 > .col-sm-8, .row-50 > .col-md-8, .row-50 > .col-lg-8, .row-50 > .col-xs-9, .row-50 > .col-sm-9, .row-50 > .col-md-9, .row-50 > .col-lg-9, .row-50 > .col-xs-10, .row-50 > .col-sm-10, .row-50 > .col-md-10, .row-50 > .col-lg-10, .row-50 > .col-xs-11, .row-50 > .col-sm-11, .row-50 > .col-md-11, .row-50 > .col-lg-11, .row-50 > .col-xs-12, .row-50 > .col-sm-12, .row-50 > .col-md-12, .row-50 > .col-lg-12 { padding-left: 25px !important; padding-right: 25px !important; }
.row-100 { margin-left: -50px !important; margin-right: -50px !important; }
.row-100 > .col-xs-1, .row-100 > .col-sm-1, .row-100 > .col-md-1, .row-100 > .col-lg-1, .row-100 > .col-xs-2, .row-100 > .col-sm-2, .row-100 > .col-md-2, .row-100 > .col-lg-2, .row-100 > .col-xs-3, .row-100 > .col-sm-3, .row-100 > .col-md-3, .row-100 > .col-lg-3, .row-100 > .col-xs-4, .row-100 > .col-sm-4, .row-100 > .col-md-4, .row-100 > .col-lg-4, .row-100 > .col-xs-5, .row-100 > .col-sm-5, .row-100 > .col-md-5, .row-100 > .col-lg-5, .row-100 > .col-xs-6, .row-100 > .col-sm-6, .row-100 > .col-md-6, .row-100 > .col-lg-6, .row-100 > .col-xs-7, .row-100 > .col-sm-7, .row-100 > .col-md-7, .row-100 > .col-lg-7, .row-100 > .col-xs-8, .row-100 > .col-sm-8, .row-100 > .col-md-8, .row-100 > .col-lg-8, .row-100 > .col-xs-9, .row-100 > .col-sm-9, .row-100 > .col-md-9, .row-100 > .col-lg-9, .row-100 > .col-xs-10, .row-100 > .col-sm-10, .row-100 > .col-md-10, .row-100 > .col-lg-10, .row-100 > .col-xs-11, .row-100 > .col-sm-11, .row-100 > .col-md-11, .row-100 > .col-lg-11, .row-100 > .col-xs-12, .row-100 > .col-sm-12, .row-100 > .col-md-12, .row-100 > .col-lg-12 { padding-left: 50px !important; padding-right: 50px !important; }

//Media queries
.visible-xxs {
	@media (min-width: 450px) { display: none; }
}
@media (max-width: 450px) {
	.col-xxs-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 767px) {
	.pull-xs-right {float: right;}
	.text-xs-right {text-align: right;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.pull-sm-right {float: right;}
	.text-sm-right {text-align: right;}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.pull-md-right {float: right;}
	.text-md-right {text-align: right;}
}
@media (min-width: 1200px) {
	.pull-lg-left {float: left;}
	.pull-lg-right {float: right;}
	.text-lg-right {text-align: right;}
}

//helpers
.block {display: block !important;}
.ofl {overflow: hidden; position: relative; *zoom: 1;}
.hr {background: $color_gray_10; position: relative; overflow: hidden; display: block; height: 1px;}

//Paddings
.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.pl-1 { padding-left: .25rem; }
.pl-2 { padding-left: .5rem; }
.pl-3 { padding-left: .75rem; }
.pl-4 { padding-left: 1rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-none  { padding: 0px !important; }
//Margins
.m-1 { margin: .25rem; }
.m-2 { margin: .5rem; }
.m-3 { margin: .75rem; }
.m-4 { margin: 1rem; }
.mb-0 { margin-bottom: 0 !important; }    //4px
.mb-1 { margin-bottom: .25rem !important; }    //4px
.mb-2 { margin-bottom: .5rem !important; }     //8px
.mb-3 { margin-bottom: .75rem !important; }    //12px
.mb-4 { margin-bottom: 1rem !important; }      //16px
.mb-5 { margin-bottom: 1.25rem !important; }   //20px
.mb-6 { margin-bottom: 1.5rem !important; }    //24px
.mb-7 { margin-bottom: 1.75rem !important; }   //28px
.mb-8 { margin-bottom: 2rem !important; }      //32px
.mb-9 { margin-bottom: 2.25rem !important; }   //36px
.mb-10 { margin-bottom: 2.5rem !important; }   //40px
.mb-11 { margin-bottom: 2.75rem !important; }  //44px
.mb-12 { margin-bottom: 3rem !important; }     //48px
.mb-13 { margin-bottom: 3.25rem !important; }  //52px
.mb-14 { margin-bottom: 3.5rem !important; }   //56px
.mb-15 { margin-bottom: 3.75rem !important; }  //60px
.mb-16 { margin-bottom: 4rem !important; }     //64px
.mb-17 { margin-bottom: 4.25rem !important; }  //68px
.mb-18 { margin-bottom: 4.5rem !important; }   //72px
.mb-19 { margin-bottom: 4.75rem !important; }  //76px
.mb-20 { margin-bottom: 5rem !important; }     //80px
.mb-21 { margin-bottom: 5.25rem !important; }  //94px
.mb-22 { margin-bottom: 5.5rem !important; }   //88px
.mb-23 { margin-bottom: 5.75rem !important; }  //92px
.mb-24 { margin-bottom: 6rem !important; }     //96px
.mb-25 { margin-bottom: 6.25rem !important; }  //100px
.mx-auto { margin-left: auto; margin-right: auto; }
.m-none { margin: 0px !important; }
//Min&Max width
.mn-w-50 { min-width: 50px; } .mx-w-50 { max-width: 50px; }
.mn-w-75 { min-width: 75px; } .mx-w-75 { max-width: 75px; }
.mn-w-100 { min-width: 100px; } .mx-w-100 { max-width: 100px; }
.mn-w-150 { min-width: 150px; } .mx-w-150 { max-width: 150px; }
.mn-w-200 { min-width: 200px; } .mx-w-200 { max-width: 200px; }
.mn-w-250 { min-width: 250px; } .mx-w-250 { max-width: 250px; }
.mn-w-300 { min-width: 300px; } .mx-w-300 { max-width: 300px; }
.mn-w-350 { min-width: 350px; } .mx-w-350 { max-width: 350px; }
.mn-w-400 { min-width: 400px; } .mx-w-400 { max-width: 400px; }
.mn-w-450 { min-width: 450px; } .mx-w-450 { max-width: 450px; }
.mn-w-500 { min-width: 500px; } .mx-w-500 { max-width: 500px; }
.mn-w-550 { min-width: 550px; } .mx-w-550 { max-width: 550px; }
.mn-w-600 { min-width: 600px; } .mx-w-600 { max-width: 600px; }
.mn-w-650 { min-width: 650px; } .mx-w-650 { max-width: 650px; }
.mn-w-700 { min-width: 700px; } .mx-w-700 { max-width: 700px; }
.mn-w-750 { min-width: 750px; } .mx-w-750 { max-width: 750px; }
.mn-w-800 { min-width: 800px; } .mx-w-800 { max-width: 800px; }
.mn-w-850 { min-width: 850px; } .mx-w-850 { max-width: 850px; }
.mn-w-900 { min-width: 900px; } .mx-w-900 { max-width: 900px; }
.mn-w-950 { min-width: 950px; } .mx-w-950 { max-width: 950px; }

//links
.overlink {
	background: url(../images/blank.gif) no-repeat 0 0;
	position: absolute; top: 0px; left: 0px; z-index: 55;
	display: block; width: 100%; height: 100%;
}
.trash-link {
	color: $color_gray_50 !important;
	text-decoration: none !important;
	&:hover { color: $color_danger !important; }
}

//Icons
span.icon {display: inline-block;}
.icon {
	position: relative;
	.ico {
		position: absolute; top: 50%; left: 0px;
		display: block;
		img { display: block; width: 100%; }
		&.top { top: .15em; margin-top: 0px !important; }
	}
	&.icon_right {
		.ico { left: auto; right: 0px; }
	}
	&.size_16 {
		$size : 16px;
		padding-left: $size + 4;
		&.icon_right { padding-left: 0px; padding-right: $size * 1.5; }
		& > .ico { width: $size; height: $size; margin-top: -8px; }
	}
	&.size_24 {
		$size : 24px;
		padding-left: $size + 4;
		&.icon_right { padding-left: 0px; padding-right: $size * 1.5; }
		& > .ico { width: $size; height: $size; margin-top: -12px; }
	}
	&.size_32 {
		$size : 32px;
		padding-left: $size + 4;
		&.icon_right { padding-left: 0px; padding-right: $size * 1.5; }
		& > .ico { width: $size; height: $size; margin-top: -16px; }
	}
}

//Start
#wrap {
	background: $color_white;
	width: 100%;
	min-width: 320px;
	min-height: 100%;
	position: relative;
}

.aligner {
	max-width: 900px;
	margin: 0 auto;
}

//Sections
.section {position: relative;}

.section-top {
	background: $color_black;
	padding: 4px 8px;
	@extend .fs-14;
	color: $color_white;
}

.section-head {
	padding: 8px;
}

.section-body {
	padding: 8px;
}

//Uniq blocks
.scanner {
	.scanner__row {
		.pull-left {
			//@media (max-width: 359px) { float: none !important; }
		}
		.pull-right {
			text-align: right;
			//@media (max-width: 359px) { float: none !important; text-align: left; }
		}
		padding-bottom: .5rem;
	}
	.scanner__number {
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: -7px 5px 0px 0px;
		font-size: 2.25rem;
		font-weight: bold;
		@media (min-width: 450px) {
			margin: -14px 10px 0px 0px;
			font-size: 3.25rem;
		}
		@media (max-width: 379px) {
			display: block;
			margin: 0px 10px 0px 0px;
			font-size: 1rem;
		}
	}
	.scanner__delivery {
		display: inline-block;
		vertical-align: top;
		text-decoration: underline;
	}
}
.b_external_counter {
	position: relative;
	.external_counter {
		position: absolute; top: 50%; left: 100%;
		width: 45px;
		text-align: right;
		//margin-left: .75rem;
		@include transform(translateY(-50%));
		&.disabled {
			opacity: 0.3;
		}
	}
	&.responsive-xxs {
		@media (max-width: 449px){ margin-right: 45px; }
	}
}

.b-shelves {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	.b-shelves__left {
		float: left;
		width: 50%;
	}
	.b-shelves__right {
		float: right;
		width: 50%;
	}
	.b-shelves__row {
		position: relative;
		overflow: hidden;
		margin: 0px -1px; padding: 0px; list-style: none;
		*zoom: 1;
		li {
			position: relative;
			z-index: 5;
			float: left;
			width: 5.2630%;
			padding: 0px 1px 1px;
			.b-shelves__col {
				position: relative;
				z-index: 5;
				display: block;
				float: left;
				width: 50%;
				& + .b-shelves__col {
					padding-left: 1px;
				}
			}
			i {
				background: $color_gray_10;
				margin-top: 1px;
				display: block;
				height: 10px;
				font-size: 8px;
				font-style: normal;
				line-height: 10px;
				text-align: center;
				text-transform: uppercase;
				&.high {
					height: 15px;
					line-height: 15px;
				}
				&.dark {
					background: $color_gray_40;
					color: $color_white;
				}
				&.danger {
					background: $color_danger;
					color: $color_white;
				}
			}
			&.green {
				z-index: 1;
				&:before {
					$x : 0px;
					$y : -1px;
					content: '';
					background: $color_success;
					position: absolute; top: $y; bottom: $y; left: $x; right: $x;
					z-index: 1;
					opacity: 0.7;
				}
			}
		}
	}
	.conveyer {
		background: $color_gray_10;
		padding: 20px;
		margin-top: 8px;
		text-align: center;
		i {
			background: $color_gray_40;
			display: inline-block;
			width: 10px; height: 10px;
			margin: 0px 2px;
			&.danger {
				background: $color_danger;
				color: $color_white;
			}
		}
	}
}

.media-parcel {
	&.media-parcel-success {
		color: $color_success;
		.img-thumbnail { border-color: $color_success; }
	}
	&.media-parcel-done {
		color: $color_gray_30;
		.img-thumbnail {
			border-color: $color_gray_05;
			img:not(.img-thumbnail__icon){
				opacity: 0.3;
			}
		}
	}
}

.list-scanned {
	margin-bottom: 20px;
	.list-scanned__row {
		padding: .25rem 0px;
		& + .list-scanned__row {
			border-top: 1px solid $color_gray_05;
		}
		.list-scanned__left {
			float: left;
			width: 90px;
			@media (max-width: 359px){ width: 70px; }
		}
		.list-scanned__right {
			float: right;
			width: 40px;
			text-align: right;
		}
		.list-scanned__body {
			margin: 0px 40px 0px 90px;
			@media (max-width: 359px){ margin-left: 70px; }
			.ofl {
				position: relative;
				overflow: hidden;
				width: 100%;
				.list-inline { width: 1000px; }
				.btn {
					position: absolute; top: 0px; right: 0px;
					z-index: 5;
				}
			}
			.list-inline {
				margin: 0px -2px;
				& > li {
					padding: 0px 2px;
				}
				.img-block {
					background: $color_white;
					border: 1px solid $color_gray_05;
					display: flex;
					align-items: center;
					max-width: 50px;
					min-height: 40px;
				}
				.list-scanned__code {
					font-size: 10px;
					color: $color_gray_80;
					text-align: center;
				}
			}
		}

		.list-scanned__number {
			padding-top: 4px;
			font-size: 1.25rem;
			font-weight: bold;
			color: $color_gray_40;
			@media (max-width: 359px){ padding-top: 7px; font-size: 1rem; }
			&.disabled {
				color: $color_gray_20;
				.text-danger { color: $color_gray_20; }
			}
		}
		.list-scanned__counter {
			padding-top: 4px;
			font-size: 1.25rem;
			font-weight: bold;
			text-align: right;
			@media (max-width: 359px){ padding-top: 7px; font-size: 1rem; }
			&.disabled {
				color: $color_gray_30;
			}
		}

		&.success {
			background: lighten($color_green, 60%) !important;
			margin: 0px -0.5rem;
			padding-left: .5rem;
			padding-right: .5rem;
		}
		&.disabled {
			.list-scanned__number {
				color: $color_gray_20;
				.text-danger { color: $color_gray_20 !important; }
			}
			.list-scanned__counter {
				color: $color_gray_20;
			}
		}
	}
}

//receiving
.section-header {
	position: relative;
	z-index: 555;

	.section-header__top {
		background: $color_black;
		position: relative; z-index: 55;
		height: 30px;
		color: $color_white;
		&:after {
			content: '';
			position: absolute; top: 100%; left: 0px; right: 0px;
			display: block; height: 1px;
			@include linear-gradient(unquote("90deg, red, white"));
		}
	}
	.section-header__heading {
		background: $color_black;
		position: relative;
		padding: 0px 50px;
		text-align: center;
		color: $color_white;
		a {
			color: inherit;
			&:hover { text-decoration: none; }
		}
		.heading {
			position: relative;
			overflow: hidden;
			//min-height: 40px;
			padding: 4px 0px;
			font-size: 20px;
			font-weight: bold;
			line-height: 32px;
			color: inherit;
		}
		.side-left { position: absolute; top: 5px; left: 4px; z-index: 5; }
		.side-right { position: absolute; top: 5px; right: 4px; z-index: 5; }
		.fa {
			font-size: 24px;
			line-height: 32px;
		}
		.fa-angle-left, .fa-angle-right {
			border: 1px solid $color_white;
			display: block; width: 32px; height: 32px;
			font-size: 24px;
			line-height: 30px;
			color: inherit;
			text-align: center;
			@include border-radius(3px);
		}


		&.danger {
			background: #FFB3B3;
			color: $color_black;
			.fa-angle-left, .fa-angle-right { border-color: $color_black; }
		}
	}

	.section-header__logo {
		background: $color_danger;
		float: left;
		height: 30px;
		svg { display: block; }
	}
	.section-header__count {
		position: relative;
		overflow: hidden;
		padding: 0px 8px;
		line-height: 30px;
		white-space: nowrap;
	}
	.section-header__user {
		position: relative;
		float: right;
		height: 30px;
		.dropbox__head {
			position: relative;
			padding-right: 20px;
			.userpic {
				float: left; height: 30px;
				padding-right: 8px;
				img { display: block; height: 100%; }
			}
			.username {
				position: relative;
				overflow: hidden;
				max-width: 50px;
				line-height: 30px;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.fa-angle-down {
				position: absolute; top: 0px; right: 0px;
				display: block; width: 20px;
				line-height: 30px;
				text-align: center;
			}
		}
		.dropbox__body {
			background: $color_white;
			position: absolute; top: 100%; right: 0px;
			display: none;
			min-width: 200px;
			padding: 12px;
			color: $color_black;
			@include box-shadow(0px 0px 5px $color_gray_50);
			.username {
				margin-bottom: 4px;
				font-size: 22px;
			}
			.language { white-space: nowrap; }
		}
		&.open {
			.dropbox__body { display: block; }
		}
	}
}

.form-scan {
	position: relative;
	input {
		padding-right: 50px;
	}
	.fa {
		position: absolute; top: 50%; right: 12px;
		display: block; width: 30px; height: 30px;
		margin-top: -15px;
		font-size: 30px;
		line-height: 30px;
		text-align: center;
		&:hover {
			cursor: pointer;
			color: $color_primary;
		}
	}
}

.panel {
	background: none; border: none;
	margin: 0px;
	@include border-radius(0);
	@include box-shadow(none);
	.panel-head { padding: 8px 8px 0px 8px; }
	.panel-body { padding: 8px; }
	&.panel-md {
		.panel-head { padding: 16px 16px 0px 16px; }
		.panel-body { padding: 16px; }
	}

	&.bg-gray {
		background: $color_gray_10;
	}
	&.bg-success {
		background: #B8E986 !important;
		color: $color_black !important;
	}
	&.bg-danger {
		background: #FFB3B3 !important;
		color: $color_black !important;
	}
}

.badge {
	@include border-radius(3px);
	&.badge-black {
		background: $color_black;
		color: $color_white;
	}
}

.d-inline-block {
	display: inline-block;
}

.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }


//
.b-processing {
	border-bottom: 1px solid $color_gray_10;
	.b-processing__head {
		background: $color_gray_05;
		.figure {
			.chk { visibility: hidden; }
			.img {}
		}
	}
	.b-processing__body {
		border-top: 1px solid $color_gray_10;
		display: none;
		.b-processing__item {
			.figure {
				.chk { display: none; }
				.img {}
			}
		}
	}

	.b-processing__item {
		position: relative;
		padding: 8px 32px 8px 8px;
		& + .b-processing__item {
			&:after {
				content: '';
				background: $color_gray_10;
				position: absolute; top: 0; left: 44px; right: 0;
				height: 1px;
			}
		}
		.figure {
			float: left;
			padding-right: 12px;
			.chk {
				background: $color_white;
				border: 1px solid $color_white;
				display: block; width: 24px; height: 24px;
				@include border-radius(50%);
			}
			.img {
				border: 1px solid $color_gray_10;
				display: block; width: 24px; height: 24px;
				img { display: block; width: 100%; }
			}
		}
		.heading {
			//margin-left: 36px;
			position: relative;
			overflow: hidden;
			line-height: 24px;
			white-space: nowrap;
		}
		.actions {
			float: right;
			padding-left: 12px;
			.btn {
				padding: 6px 8px;
				font-size: 12px;
			}
		}
		.number {
			font-size: 20px;
			font-weight: bold;
			color: $color_gray_40;
			span { color: #D70A0A; }
		}
		.title {
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			font-size: 14px;
			font-weight: 600;
			text-transform: uppercase;
			color: $color_gray_60;

			span {
				color: $color_black;
			}
		}
		.description {
			display: none;
			line-height: normal;
			font-size: 14px;
			font-weight: 600;
			color: $color_black;
		}
		.count {
			float: right;
			padding-left: 12px;
			color: $color_gray_50;
			line-height: 24px;
			strong { color: $color_black; }
		}
		.arrows {
			position: absolute; top: 50%; right: 8px;
			margin-top: -12px;
			color: $color_black;
			.fa {
				display: block; height: 24px;
				line-height: 24px;
				&:hover { cursor: pointer; }
				&.fa-caret-down {}
				&.fa-caret-up { display: none; }
			}
		}
	}

	&.open {
		.b-processing__body {
			display: block;
		}
		.b-processing__item {
			.arrows {
				.fa {
					&.fa-caret-down { display: none }
					&.fa-caret-up { display: block; }
				}
			}
		}
	}

	&.active {
		.b-processing__head {
			background: #2DB92D;
			color: $color_white;
		}
		.b-processing__body {
			border-top-color: rgba(0,0,0,0.1);
			.figure {
				.chk {
					background: #2DB92D;
					border-color: #2DB92D;
					&:before, &:after {
						background: $color_white !important;
					}
				}
			}
		}
		.b-processing__item {
			& + .b-processing__item {
				&:after {
					background: rgba(0,0,0,0.1);
				}
			}
			.figure {
				.chk {
					position: relative;
					display: block;
					visibility: visible;
					&:before {
						content: '';
						background: #2DB92D;
						position: absolute; top: 13px; left: 3px;
						display: block; width: 8px; height: 2px;
						@include border-radius(3px);
						@include transform(rotate(45deg));
					}
					&:after {
						content: '';
						background: #2DB92D;
						position: absolute; top: 10px; left: 6px;
						display: block; width: 16px; height: 2px;
						@include border-radius(3px);
						@include transform(rotate(-45deg));
					}
				}
				.img { display: none; }
			}
			.number {
				color: #1f821f;
				span { color: $color_white; }
			}
			.count {
				color: #1e7d1e;
				strong { color: $color_black; }
			}
		}
	}
}