@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap&subset=cyrillic');

:root {
	font-size: 16px;
}

html, body {
	background: #fff;
	color: #212529;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	height: 100%;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	width: 100%;
}

header {
	background: #fff;
	height: 80px;
	width: 100%;
	position: fixed;
	z-index: 9999;
	/*box-shadow: 0 0.25em 0.25em rgba(0,0,0,.1);*/
}

header .container {
	margin: 0 auto;
	max-width: 90%;/*72%;*/
	display: flex;
	height: 100%;
	align-items: center;
}

header .container nav {
	order: -1;
	flex-grow: 1;
}

header .container nav a, footer .container a {
	margin-right: 0.5em;
}

main {
	margin: 0 auto;
	padding-top: 80px;
	max-width: 90%;
}

footer {
	min-height: 5rem;
	padding-top: 1em;
}

footer  .container {
	margin: 0 auto;
	max-width: 90%;/*72%;*/
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
	width: 80%;
}

td {
	border-bottom: 1px solid #000;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 1em;
	vertical-align: top;
}

th {
	text-align: left;padding-left: 1em;/*border-bottom: 1px solid #000;padding-bottom: 0.75em;*/
}

.playlist td.controls i.fa {
	color: #abd6cf;
	cursor: pointer;
}

.playlist td.controls {
	padding-left: 0.5em;
	width: 1em;
}

.playlist th:first-child {
	padding-left: 0.5em;
	width: 1em;
}

.playlist td:first-child, .playqueue td:first-child, .playqueue th:first-child {
	padding-left: 0.5em;
	width: 1em;
}

.playlist td:nth-child(6), .playlist td:nth-child(7) {
    text-align: center;
	/*width: 1em;*/
}
.playlist td:nth-child(8), .playlist td:nth-child(9) {
    text-align: right;
}

.playlist td:last-child {
	padding-right: 0.5em;
	width: 1em;
}
/*
.playqueue td:nth-child(2n) {
	width: 50%;
}*/

.playqueue th {
    white-space: nowrap;
}

.playqueue td:last-child {
	text-align: center;
	width: 1em;
}
.song-icon {
	float: right;
    height: 1em;
	margin-left: 0.5em;
	width: 1em;
}

i.icon-1 {
	background: url("../images/violin.svg") no-repeat center;
}

i.icon-2 {
	background: url("../images/piano.svg") no-repeat center;
}

i.icon-3 {
	background: url("../images/voice.svg") no-repeat center;
}

i.icon-4 {
	background: url("../images/audio-editing.svg") no-repeat center;
}

i.icon-5 {
	background: url("../images/music-note.svg") no-repeat center;
}

.song-png {
    float: left;
    height: 1em;
	margin-right: 0.5em;
	margin-top: 0.2em;
	width: 1em;
}

i.png-1 {
	background: url("../images/violin2.svg") no-repeat center;
}

i.png-2 {
	background: url("../images/piano2.svg") no-repeat center;
}

i.png-3 {
	background: url("../images/voice2.svg") no-repeat center;
}

i.png-4 {
	background: url("../images/audio-editing2.svg") no-repeat center;
}

i.png-5 {
	background: url("../images/music-note2.svg") no-repeat center;
}

.song-icon2 {
    height: 1em;
	margin-left: 0.5em;
	width: 1em;
}

form.search-form {
	margin: 0 auto 1em;
	width: 80%;
}

form.search-form  button {
	padding-left: 1em;
	padding-right: 1em;
}

/**/
.form-error .error {
	color: red;
}

.orderform {
	margin: 1em auto;
	width: 30%;
}

.orderform  input, .orderform  textarea  {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.orderform  .playlist > i.fa {
    color: #abd6cf;
    cursor: pointer;
}

.orderform  input[type=text], .orderform  textarea {
	font-size: 1em;
	padding: 0.5em;
	width: 100%;
}

.orderform  .form-item {
	margin: 1em auto;
}

.form-item input + select {
	margin: 0 1em;
}

.orderform  input[type=submit] {
	background: #ffdb4d;
	border: 1px solid transparent;
	border-radius: 0.5em;
	opacity: .8;
	outline: none;
	padding: 0.5em 1em;
}

.orderform  input[type=submit]:hover {
	opacity: 1;
}

/*cookie*/
.about-cookie-block {
	background: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.about-cookie-block .container {
	border-top: 1px solid #212529;
	display: flex;
	justify-content: center;
}

.about-cookie-block  .close-button {
	align-self: center;
	margin: auto 1em;
}
/*cookie end*/

/*pagination*/
ul.pagination {
    display: block;
    padding: 0;
    margin: 2em auto 1em;
    width: 80%;
}

ul.pagination li {display: inline;}

ul.pagination li a {
	border-radius: 5px;
    padding: 8px 16px;
}

ul.pagination li.current {
    background-color: #ABD6CF;
	border-radius: 5px;
    color: white;
	padding: 8px 16px;
}

ul.pagination li a:hover {
	background-color: #e5f2f0;
	color: #000;
}
/*pagination end*/