/* ---------------- *\

BEGIN COMMON

\* ---------------- */

* {
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	min-width: 1364px;
	padding: 120px 50px 50px 50px;
	background-color: #f7f7f7;
	font-family: Arial;
	font-size: 14px;
	
}

h2, .h2 {
	color: #666;
	font-size: 24px;
	font-weight: 600;
}

h3, .h3 {
	color: #666;
	font-size: 22px;
	font-weight: 600;
	line-height: .8;
	letter-spacing: .01em;
	text-transform: uppercase;
}

hr {
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
}

.btn {
	width: 100%;
	height: 45px;

	background-color: #72c06a;

	color: #fff;
	font-size: 16px;
	font-weight: 600;

	text-align: center;
	text-transform: uppercase;
}

.btn {
	background-color: #72C069;
}

.btn:hover {
	background-color: #6ab362;
}

.btn.btn-danger {
	background-color: #e64545;
}

.btn.btn-danger:hover {
	background-color: #d94141;
}

.error {
	display: block;
    width: 300px;
    margin: 200px auto 0;
    text-align: center;
}

.error p {

}

.error a {
	float: initial !important;
    display: inline-block !important;
    margin-top: 20px !important;
}

.error-modal {
	display: none;
	margin-top: 20px;
    color: red;
}

.progress-modal {
	display: none;
	margin-top: 20px;
}

/* ---------------- *\

END COMMON

\* ---------------- */





/* ---------------- *\

BEGIN HEADER

\* ---------------- */

	.b-header {
		position: fixed;
		top: 0;
		left: 0;

		width: 100%;
		height: 70px;

		background-color: #3e4759;

		line-height: 70px;
		text-align: center;

		z-index: 99;
	}

		.b-header .container {
			display: inline-block;
			width: calc(100% - 100px);
			vertical-align: middle;

			line-height: 0;
			text-align: left;
		}

		.b-header .container {
			font-size: 0;

			text-align: justify;
			text-align-last: justify; //for IE 7 - 6
			text-justify: newspaper; // for all IE
		}

		.b-header .container:after {
			content: '';

			display: inline-block;
			width: 100%;

			visibility: hidden;
			overflow: hidden;
		}

			.b-header .container > .item {
				display: inline-block;
				vertical-align: middle;

				font-size: 14px;
				text-align: left;
			}

				.b-header .logo {
					color: rgba(255, 255, 255, .6);
					font-weight: 600;
					font-size: 24px;
					line-height: 1;
					text-transform: uppercase;

					cursor: default;
				}

				.b-header .logout {
					opacity: .6;
					width: 120px;
					height: 40px;
					
					border: 2px solid #fff;
					border-radius: 20px;

					color: #fff;
					line-height: 36px;
					text-align: center;
					text-transform: uppercase;
					text-align-last: center;
				}

				.b-header .logout:hover {
					opacity: .8;
				}

/* ---------------- *\

END HEADER

\* ---------------- */





/* ---------------- *\

BEGIN LEFT BAR (with tab nav)

\* ---------------- */

	.b-left-bar {
		position: fixed;
		top: 70px;
		left: 0;
		z-index: 99;

		width: 80px;
		height: calc(100% - 70px);

		background-color: #e6e6e6;
	}

			.b-tab-nav > li {
				position: relative;
				width: 100%;
				height: 81px;

				border-bottom: 1px solid #d9d9d9;

				box-shadow: 0 1px 0 #f2f2f2;
				cursor: pointer;
			}

			.b-tab-nav > li:hover {
				background-color: #ebebeb;
			}

			.b-tab-nav > li.active {
				background-color: #d9d9d9;
			}

			.b-tab-nav > li.active:hover {
				background-color: #d9d9d9;
			}

			.b-tab-nav > li:before {
				content: '';

				position: absolute;
				top: 50%;
				left: 50%;

				background-image: url(sprite.png);
				background-repeat: no-repeat;
			}

			.b-tab-nav > li:nth-child(1):before {
				width: 32px;
				height: 32px;
				margin: -16px 0 0 -16px;
				background-position: 0 0;
			}

			.b-tab-nav > li:nth-child(2):before {
				width: 25px;
				height: 32px;
				margin: -16px 0 0 -12px;
				background-position: -35px 0;
			}

			.b-tab-nav > li:nth-child(3):before {
				width: 30px;
				height: 28px;
				margin: -14px 0 0 -15px;
				background-position: -70px 0;
			}

			.b-tab-nav > li + li {
				margin-top: 1px;
			}

/* ---------------- *\

END LEFT BAR (with tab nav)

\* ---------------- */





/* ---------------- *\

BEGIN TABLE-BAR

\* ---------------- */

.b-table-bar{
	margin-bottom: 20px;
	height: 30px;
}

	.b-table-bar__listen-count {
		float: left;
		margin-top: 15px;

		color: #f93d03;
		font-weight: bold;
		line-height: 14px;
		vertical-align: bottom;
	}

	.b-table-bar__link-download {
		float: right;
		width: 125px;
		height: 30px;
		background-color: #72C06A;

		color: #FFF;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .05em;
		line-height: 30px;
		text-align: center;
	}

	.b-table-bar__link-download:hover {
		background-color: #6AB362;
	}

	.b-table-bar__link-download[disabled] {
		pointer-events: none;
		cursor: default;
		background-color: #9FDE98;
	}

/* ---------------- *\

END TABLE-BAR

\* ---------------- */

/* ---------------- *\

BEGIN TABLE

\* ---------------- */
	

	.b-table {
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

		.b-table tr:hover .el-delete,
		.b-table tr:hover .el-edit {
			opacity: 1;
			visibility: visible;
		}

		.b-table th,
		.b-table td {
			vertical-align: middle;
			padding: 0 20px;
		}

		.b-table th:first-child,
		.b-table td:first-child {
			text-align: left;
		}

		.b-table thead th {
			height: 48px;
			border-top: 1px solid #e5e5e5;
			border-bottom: 1px solid #e5e5e5;
			color: #808080;
			font-weight: 600;
		}

			.b-table thead th .sortable {
				display: inline-block;
				position: relative;
				padding-right: 13px;
				cursor: pointer;
			}

				.b-table thead th .sortable:before, 
				.b-table thead th .sortable:after {
					content: '';
					position: absolute;
					border: 3px solid transparent;
					right: 0;
				} 

				.b-table thead th .sortable:before {
					top: -1px;
					border-bottom-color: #ccc;
					border-bottom-width: 4px;
				} 

				.b-table thead th .sortable:after {
					top: 8px;
					border-top-color: #ccc;
					border-top-width: 4px;
				}

				.b-table thead th .sortable.asc:before {
					border-bottom-color: #999;
				}

				.b-table thead th .sortable.desc:after {
					border-top-color: #999;
				}
				
		.b-table thead th::selection,
		.b-table thead th .sortable::selection {
			background-color: transparent;
		}

		.b-table td {
			height: 40px;
			color: #999;
		}

		.b-table tbody tr:nth-child(odd) td {
			background-color: #f2f2f2;
		}



		#usersList.b-table th:first-child,
		#usersList.b-table td:first-child {
			padding-left: 30px;
			text-align: center;
		}

		#usersList.b-table td:last-child {
			font-size: 0;
		}

		#usersList.b-table td:nth-child(1),
		#usersList.b-table th:nth-child(1) {
			width: 5%;
		}

		#usersList.b-table td:nth-child(2),
		#usersList.b-table th:nth-child(2) {
			width: 20%;
		}

		#usersList.b-table td:nth-child(3),
		#usersList.b-table th:nth-child(3) {
			width: 15%;
		}

		#usersList.b-table td:nth-child(4),
		#usersList.b-table th:nth-child(4) {
			width: 25%;
		}

		#usersList.b-table td:nth-child(5),
		#usersList.b-table th:nth-child(5) {
			width: 10%;
		}

		#usersList.b-table td:nth-child(6),
		#usersList.b-table th:nth-child(6) {
			width: 35%;
		}



		#booksStatistics.b-table td:nth-child(1),
		#booksStatistics.b-table th:nth-child(1) {
			width: 25%;
		}

		.b-table__controls {
			display: inline-block;
		}

			.b-table__controls > .item {
				display: inline-block;
				vertical-align: middle;
			}

			.b-table__controls > .item + .item {
				margin-left: 20px;
			}

			.el-delete {
				width: 15px;
				height: 20px;
				opacity: 0;
				visibility: hidden;

				background-image: url(sprite.png);
				background-repeat: no-repeat;
				background-position: -35px -35px;
			}

			.el-delete:hover {
				background-position: -35px -70px;
			}

			.el-edit {
				width: 20px;
				height: 20px;
				opacity: 0;
				visibility: hidden;

				background-image: url(sprite.png);
				background-repeat: no-repeat;
				background-position: -70px -35px;
			}

			.el-edit:hover {
				background-position: -70px -70px;
			}

/* ---------------- *\

END TABLE

\* ---------------- */





/* ---------------- *\

BEGIN PAGINATION

\* ---------------- */

.b-pagination {
	font-size: 0;
	text-align: center;
}

	.b-pagination li {
		display: inline-block;
		vertical-align: middle;

		width: 30px;
		height: 30px;

		background-color: #f2f2f2;

		color: #999;
		font-size: 14px;
		line-height: 30px;

		cursor: pointer;
	}

	.b-pagination li:hover {
		background-color: #e5e5e5;
	}

	.b-pagination li.active {
		background-color: #72c06a;
		color: #fff;
	}

	.b-pagination li.active:hover {
		background-color: #6ab262;
	}

	.b-pagination li.disable {
		background-color: transparent;
		cursor: default;
	}

	.b-pagination li + li {
		margin-left: 20px;
	}

/* ---------------- *\

END PAGINATION

\* ---------------- */





/* ---------------- *\

BEGIN FULL (for full screen valign)

\* ---------------- */

.b-full {
	display: table;

	width: 100%;
	height: 100%;
}

	.b-full > div {
		display: table-cell;
		vertical-align: middle;
	}

/* ---------------- *\

END FULL (for full screen valign)

\* ---------------- */





/* ---------------- *\

BEGIN FORM

\* ---------------- */

	.b-form {
		width: 320px;
		height: 100%;
		margin: auto;
		text-align: center;
	}

			.b-form p.err {
				color: red;
				margin-bottom: 29px;
			}

			.b-form h2 {
				margin-bottom: 29px;
				line-height: 0.75;
				text-transform: uppercase;
			}
			
				.b-form .row-input {
					margin-bottom: 20px;
					font-size: 0;
					text-align: left;
				}

					.b-form > .item {
						display: inline-block;
						vertical-align: middle;
					}

					.b-form input {
						width: 100%;
						height: 45px;

						border: 1px solid #d9d9d9;
						padding: 10px 15px;

						background-color: #f2f2f2;

						color: #999;
						font-size: 16px;
					}

					.b-form input.err {
						border-color: #e54545;
					}

					.b-form .row-input label {
						display: inline-block;
						vertical-align: middle;

						font-size: 16px;
						color: #999;
					}

					.b-form .checkbox {
						display: inline-block;
						vertical-align: middle;

						position: relative;
						width: 20px;
						height: 20px;

						margin-right: 10px;
						border: 1px solid #d9d9d9;

						background-color: #f2f2f2;
					}

						.b-form .checkbox input {
							display: block;

							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							opacity: 0;

							width: 100%;
							height: 100%;

							cursor: pointer;
						}

						.b-form .checkbox .checkbox__checked {
							display: none;

							position: absolute;
							top: 3px;
							left: 3px;

							width: 12px;
							height: 12px;

							background-color: #72c06a;
						}

						.b-form .checkbox input:checked + .checkbox__checked {
							display: block;
						}

/* ---------------- *\

END FORM

\* ---------------- */





/* ---------------- *\

END TAB BODY

\* ---------------- */

	.b-tab-body {
		
	}

		.b-tab-body > li {
			display: none;
		}

		.b-tab-body > li.active {
			display: block;
		}

/* ---------------- *\

END TAB BODY

\* ---------------- */





/* ---------------- *\

END CONTENT

\* ---------------- */

	.b-content h3,
	.b-content .h3 {
		margin-bottom: 10px;
	}

	.b-content h3 + hr,
	.b-content .h3 + hr {
		margin-bottom: 40px;
	}

/* ---------------- *\

END CONTENT

\* ---------------- */





/* ---------------- *\

BEGIN CONTROLS FOR TABLE

\* ---------------- */

	.b-table-controls {
		margin-bottom: 20px;
		font-size: 0;
	}

		.b-table-controls > .item {
			display: inline-block;
			vertical-align: middle;
		}

		.b-table-controls > .item + .item {
			margin-left: 65px;
		}

		.b-table-controls > .b-table-controls__static-data + .b-table-controls__static-data {
			margin-left: 40px;
		}

			.b-table-controls > .item > .item {
				display: inline-block;
				vertical-align: middle;
				font-size: 12px;
			}

		.b-table-controls__static-data .text {
			font-size: 14px !important;
		}

		.b-table-controls__static-data .text {
			margin-right: 24px;

			font-size: 14px;
			color: #999999;
			letter-spacing: -.004em;
		}

		.b-select {
			position: relative;
			width: 125px;
			height: 30px;

			border: 1px solid #ccc;
			padding: 0 29px 0 14px;

			background-color: #fff;
			color: #999;

			cursor: pointer;
		}

		.b-select:before {
			content: '';

			position: absolute;
			top: 0;
			right: 28px;

			width: 1px;
			height: 100%;

			background-color: #ccc;
		}

		.b-select:after {
			content: '';

			position: absolute;
			top: 12px;
			right: 10px;

			width: 0;
			height: 0;

			border: 4px solid transparent;
			border-top-color: #ccc;
		}

			.b-select > span {
				display: block;

				overflow: hidden;

				line-height: 28px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.b-select > ul {
				display: none;

				position: absolute;
				top: 100%;
				left: -1px;
				z-index: 5;

				width: calc(100% + 2px);
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;

				background-color: #fff;
			}

			.b-select.on > ul {
				display: block;
			}

				.b-select > ul > li {
					min-height: 30px;

					border-bottom: 1px solid #ccc;
					padding: 7px 15px 6px;

					line-height: 1.35;
				}

				.b-select > ul > li:hover {
					background-color: #f2f2f2;
				}

				.b-select > ul > li:first-child {
					border-top: 1px solid #ccc;
				}

		.b-table-controls__date-selection > .item + .item {
			margin-left: 41px;
		}

		.btn-add {
			position: relative;
			width: 125px;
			height: 30px;
			padding-right: 16px;

			background-color: #72c06a;

			color: #fff;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .05em;
			text-align: center;
		}

		.btn-add:hover {
			background-color: #6ab362;
		}

		.btn-add:before {
			content: '';

			position: absolute;
			top: 11px;
			right: 23px;

			width: 9px;
			height: 9px;

			background: url(sprite.png) no-repeat 0 -105px;
		}

	.input_datepicker {
		position: relative;
	}

	.input_datepicker + .input_datepicker:before {
		content: '';

		position: absolute;
		top: 15px;
		left: -26px;

		width: 11px;
		height: 1px;

		background-color: #ccc;
	}

	.input_datepicker:after {
		content: '';

		position: absolute;
		top: 0;
		right: 28px;

		width: 1px;
		height: 100%;

		background-color: #ccc;
	}

		.input_datepicker .datepicker {
			width: 125px;
			height: 30px;

			border: 1px solid #ccc;
			padding: 0 14px;

			background-color: #fff;
			color: #999;
		}

		.input_datepicker .ui-datepicker-trigger {
			position: absolute;
			top: 8px;
			right: 8px;

			width: 14px;
			height: 14px;

			cursor: pointer;
		}

/* ---------------- *\

END CONTROLS FOR TABLE

\* ---------------- */





/* ---------------- *\

BEGIN VERIFICATION

\* ---------------- */

.b-verification {
	width: 320px;
	text-align: center;
}

	.b-verification h2 {
		margin-bottom: 15px;
		line-height: 0.75;
		text-transform: uppercase;
	}

	.b-verification p {
		color: #999;
		font-size: 16px;
	}

	.b-modal__row-btn {
		margin-top: 37px;

		font-size: 0;
		text-align: justify;
		// text-align-last: justify; //for IE 7 - 6
		text-justify: newspaper; // for all IE
	}

	.b-modal__row-btn:after {
		content: '';

		display: inline-block;
		width: 100%;

		visibility: hidden;
		overflow: hidden;
	}

		.b-modal__row-btn > .btn {
			display: inline-block;
			width: calc(50% - 10px);
			vertical-align: middle;
		}

/* ---------------- *\

END VERIFICATION

\* ---------------- */





/* ---------------- *\

BEGIN MODAL

\* ---------------- */

.b-modal {
	position: absolute;
	left: -100%;
	top: -100%;
	opacity: 0;
	visibility: hidden;
}

	.b-modal__box {
		padding: 40px 30px;
		background-color: #fff;
	}

/* ---------------- *\

END MODAL

\* ---------------- */





/* ---------------- *\

BEGIN PAGE ADMIN

\* ---------------- */

body.pg-admin {
	padding-left: 130px;
}

/* ---------------- *\

END PAGE ADMIN

\* ---------------- */



/* ---------------- *\

BEGIN PRELOADER

\* ---------------- */
.loader {
  position: absolute;
  top: calc(50% - 5.5em);
  left: calc(50% - 5.5em);

  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #80807F;
  background: -moz-linear-gradient(left, #80807F 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #80807F 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #80807F 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #80807F 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #80807F 10%, rgba(255, 255, 255, 0) 42%);
  -webkit-animation: load3 1s infinite linear;
  animation: load3 1s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #80807F;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #f7f7f7;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ---------------- *\

END PRELOADER

\* ---------------- */