style.css

/* HTML теги */
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

a,
a:visited {
	color: #3c8dbc;
	cursor: pointer;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-webkit-transition: 0.1s ease-in-out;
}

a:hover {
	text-decoration: none;
	color: #C60000;
}

hr {
	border: 0; 
	height: 1px; 
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

input,
select {
	border-radius: 3px;
	border: 1px solid #BBB7B7;
	padding: 1px 3px;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

input:focus:not([id="form_submit"]),
select:focus {
	border-color: #00a7da;
}

input[type="number"] {
	width: 4em;
}

abbr {
	border: 0;
}

img {
	border-width: 0;
}

/* Кнопки */
.btn {
	cursor: pointer;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	border-radius: 3px;
	padding: 2px 12px;
	transition: 0.3s;
	-moz-transition: 0.3s;
	-webkit-transition: 0.3s;
	line-height: 16px;
	text-decoration: none;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	vertical-align: middle;
	box-shadow: none;
	text-align: center;
}

.btn-info,
.btn-info:visited {
	background: #5bc0de;
	border-color: #46b8da;
	color: #fff;
}

.btn-info:hover {
	background: #31b0d5;
	border-color: #269abc;
	color: #fff;
}

.btn-default,
.btn-default:visited {
	background: #f4f4f4;
	border-color: #ddd;
	color: #444;
}

.btn-default:hover {
	background: #e7e7e7;
	border-color: #adadad;
	color: #333;
}

.btn-danger,
.btn-danger:visited {
	background: #dd4b39;
	border-color: #d73925;
	color: #fff;
}

.btn-danger:hover {
	background: #d73925;
	border-color: #ac2925;
	color: #fff;
}

.btn-success,
.btn-success:visited {
	background: #00a65a;
	border-color: #008d4c;
	color: #fff;
}

.btn-success:hover {
	background: #008d4c;
	border-color: #398439;
	color: #fff;
}

.submit {
	margin-right: 10px;
	vertical-align: top;
}

#container {
	margin: 0 auto;
}

#header {
	margin: 0 auto;
}

#header .sub {
	font-size: .9em;
}

#header_title {
	color: #1384C9;
	font-size: 2.0em;
	font-variant: small-caps;
	vertical-align: top;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px #ccc;
}

#header_title span {
	font-size: .8em;
	vertical-align: top;
}

#header_title span a:hover {
	color: #ff0000;
}

#header_title a {
	color: inherit;
	text-decoration: none;
}

#main {
	padding-top: 5px;
	color: #000;
	margin: 0 auto;
}

#footer {
	margin-top: 20px;
	margin-bottom: 20px;
}

#footer, 
#footer a,
#check-updates {
	color: #999;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

#footer a:hover {
	color: #555;
}

#check-updates {
	width: 13px;
	height: 13px;
	display: inline-block;
	background: url('check_updates.svg') no-repeat transparent;
	cursor: pointer;
	opacity: .3;
	filter: alpha(opacity=30); /* For IE8 and earlier */
	margin-left: 7px;
	vertical-align: middle;
}

#check-updates:hover {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

#footer-box {
	width: 80%;
	margin: 0 auto;
	border-top: 1px solid #ccc;
	padding: 5px;
	text-align: center;
}

/* Форма */
#form-container {
	position: relative;
}

/* Class styles */
.bar_calls {
	background-color: #6AFF86;
	float: none;
	padding: 0 0 0 2px;
}

.bar_duration {
	background-color: #FFF285;
	float: none;
	padding: 0 0 0 2px;
}

.cdr {
	margin: 0 auto;
	border-width: 0;
	width: 100%;
	font-size: .9em;
}

.cdr fieldset {
	border-radius: 10px;
	background-color: rgba(184, 240, 255, 0.2);
	border: 1px solid #B8F0FF;
	box-shadow: 0 0 2px #e7e7e7;
}

.cdr th,
.total td {
	background-color: rgba(184, 240, 255, 0.69);
	text-align: center;
	box-shadow: 0 0 2px #85CDE1 inset;
	border-radius: 5px;
	color: #1896B8;
	padding: 3px;
}

.total td {
	font-weight: 700;
}

.cdr .center_col {
	width: 78%;
	padding: 2px;
}

.cdr .end_col {
	width: 11%;
	padding: 3px;
	text-align: center;
}

.cdr .chart_data {
	width: 3%;
	padding: 1px;
	text-align: center;
}

.cdr .img_col {
	width: 16px;
	height: 16px;
}

legend.title {
	color: #20BCE7;
}

.title,
.title a {
	color: #777;
	font-size: 1em;
	font-weight: 700;
}

.record {
	background-color: #fff;
}

.record  td {
	text-align: left;
	padding: 3px 3px 3px 8px;
}

.record:hover {
	background: #E3FFFE;
	color: #000;
}

.record_col {
	padding-left: 2px;
	padding-right: 2px;
	border-width: 0;
}

.record_col a, 
.record_col a:visited {
	color: #000;
	text-decoration: none;
}

.record_col a:hover {
	color:#0000ff;
	text-decoration: none;
}

.record_col .recordBox {
	margin: 0 auto;
}

.record_col div.img_play,
.record_col div.img_dl,
.record_col div.img_delete {
	cursor:pointer;
}

.record_col div.img_play {
	background: url('record_play.svg') no-repeat transparent;
	display: inline-block;
	width: 24px;	
	height: 24px;		
	margin-right: 1px;
}

.record_col div.img_dl {
	background: url('record_dl.svg') no-repeat transparent;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.record_col div.img_delete {
	background: url('record_delete.svg') no-repeat transparent;
	display: inline-block;
	width: 24px;	
	height: 24px;
	margin-left: 1px;
	opacity: .8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
}

.record_col div.img_notfound {
	background: url('record_notfound.svg') no-repeat transparent;
	display: inline-block;
	width: 24px;
	height: 24px;
	opacity: .3;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

/* Комментарий (userfield) */
.record_col .userfield-box input {
	width: 90%;
}

.record_col .userfield-box button {
	margin: 5px 5px 0 0;
	font-size: 1.2em;
	padding: 0 12px;
}

/* Спойлеры */
.spoilers {
	display: none;
}

#show_spoilers {
	margin: 3px 0;
}

#show_spoilers span {
	color: #3c8dbc;
	cursor: pointer;
	transition: 0.1s;
	-moz-transition: 0.1;
	-webkit-transition: 0.1s;
}

#show_spoilers span:hover {
	color: #2672a0;
}

/* Плеер */
#playerOverlay {
	position: fixed;
	height: 100%;
	width: 100%;
	-moz-transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	visibility: hidden;
	z-index: 10000;
	overflow: hidden;
}

#playerBox {
	display: none;
	z-index: 10001;
	width: 425px;
	height: 75px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
}

#playerBox .plTitle {
	margin-bottom: 8px;
	color: #379FFF;
	text-align: center;
	clear: both;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: break-word;
	text-overflow: ellipsis;
	text-shadow: 1px 1px 1px #000000;
}

#playerBox .plStyle {
	width: 425px;
	height: 40px;
}

/* Статус звонка */
.record_col .status {
	margin-right: 5px;
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.record_col .status-answer {
	background: #2fb740;
}

.record_col .status-noanswer {
	background: #d74f4f;
}

.record_col .status-busy {
	background: #ffce31;
	
}

.record_col .status-failed {
	background: #bfbfbf;
}

.record_col .status-congestion {
	background: #24bac5;
}

td.answer {
	color: #008000;
}

td.noanswer {
	color: #ff0000;
}

td.busy {
	color: #E19500;
}

td.failed {
	color: #888;
}

td.congestion {
	color: #1A929D;
}

.center {
	text-align: center;
}

.right {
	padding-right: 80px;
	text-align: right;
	font-size: 9pt;
}

.dl_csv_box {
	text-align: center;
	font-size: .9em;
}

/* Уведомление при копировании в буфер */
.copied {
	color: #000;
	font-weight: 700;
}

#content-msg {
	margin: 10px 0;
	text-align: center;
}

/* Лоадер */
#form-loader {
	width: 50px;
	height: 50px;
	opacity: 0.8;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: auto;
	display: none;
	z-index: 1000;
}

/* Навигация вверх/вниз */
#scroll-box {
	position: fixed;
	top: 45%;
	right: 10px;
	height: 80px;
	display: none;
	z-index: 999;
}

#scroll-box .scroll {
	background-color: #000;
	border-radius: 5px;
	color: #fff;
	display: block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'Arial';
	padding: 9px;
	text-decoration: none;
	vertical-align: top;
	opacity: .22;
	filter: alpha(opacity=22); /* For IE8 and earlier */
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	text-decoration: none;
}

#scroll-box .scroll:hover {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	cursor: pointer;
}

#scroll-box  > #scroll-up {
	margin-bottom: 5px;
}

/* Период времени */
#id_range .head {
	border-bottom: 1px solid #777;	
}

/* Остальное */
.margin-left0 {
	margin-left: 0;
}

#id_result_limit {
	margin-left: 4px;
}

/* Mobile */
@media screen and (max-width: 720px) {
	#container {
		width: 100%;
		min-width: 700px;
	}
	.record  td {
		padding: 3px;
	}	
}

/* ************************************** Прогресс бар *********************************************************/
.cssload-loader {
	position: relative;
	left: calc(50% - 49px);
	width: 50px;
	height: 50px;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	perspective: 780px;
}

.cssload-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;	
}

.cssload-inner.cssload-one {
	left: 0%;
	top: 0%;
	animation: cssload-rotate-one 1.15s linear infinite;
		-o-animation: cssload-rotate-one 1.15s linear infinite;
		-ms-animation: cssload-rotate-one 1.15s linear infinite;
		-webkit-animation: cssload-rotate-one 1.15s linear infinite;
		-moz-animation: cssload-rotate-one 1.15s linear infinite;
	border-bottom: 3px solid rgb(0,0,0);
}

.cssload-inner.cssload-two {
	right: 0%;
	top: 0%;
	animation: cssload-rotate-two 1.15s linear infinite;
		-o-animation: cssload-rotate-two 1.15s linear infinite;
		-ms-animation: cssload-rotate-two 1.15s linear infinite;
		-webkit-animation: cssload-rotate-two 1.15s linear infinite;
		-moz-animation: cssload-rotate-two 1.15s linear infinite;
	border-right: 3px solid rgb(0,0,0);
}

.cssload-inner.cssload-three {
	right: 0%;
	bottom: 0%;
	animation: cssload-rotate-three 1.15s linear infinite;
		-o-animation: cssload-rotate-three 1.15s linear infinite;
		-ms-animation: cssload-rotate-three 1.15s linear infinite;
		-webkit-animation: cssload-rotate-three 1.15s linear infinite;
		-moz-animation: cssload-rotate-three 1.15s linear infinite;
	border-top: 3px solid rgb(0,0,0);
}

@keyframes cssload-rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-one {
	0% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-one {
	0% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-one {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-one {
	0% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-two {
	0% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-two {
	0% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-two {
	0% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-two {
	0% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-three {
	0% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-three {
	0% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-three {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-three {
	0% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}
/* **************************************************************************************************** */