.top {
    font-size: 20px;
}

#logoinfo {
    width: 20px;
    position: absolute;
    right: 50px;
    top: 14px;
}

.label-filtre {
    font-size: 14px;   
    width: 108px;
}

.Dfiltres {
    display: block;
    margin-top: 10px;
}

.input-filtre {
    font-size: 14px;
    width: 45px;
    text-align: center;
    border-radius: 2px;
}

input.boutons {
    font-family: Arial;
    font-weight: bold;
    border-radius: 3px;
}

#error {
    display: block;
    width: 50%;
    position: relative;
}

#result {
    display: block;
}

#loader{
    height: 100vh;
    width:100%;
    background-color:white;
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
}
 
.loader{
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    margin-top: 50vh;
    margin-left: 50%;
}

.loader-quart{
    border-radius: 50px;
    border: 6px solid transparent;
}

.loader-quart:after{
    content: '';
    position: absolute;
    top: -6px; left: -6px;
    bottom: -6px; right: -6px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border-bottom: 2px solid blue;
    border-top: 3px solid orange;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(360deg);}
}

#logo {
    padding-top: 15px;
    padding-right: 75px;
    float: right;
    width: 200px;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #333;
	font-family: Arial;
}

* {
	box-sizing: border-box;
}

.username {
	margin: 16px 0;
	display: inline-block;
	float: right;
}

.content {
	height: calc(100% - 80px);
}

.wrap {
	width: 86%;
	margin: 0 auto;
	position: relative;
	height: 100%;
}

select:focus,
button:focus {
	outline: none;
}

.inactive {
	display: none;
}

#btn-print,
.interval-wialon .iw-select .iw-period-btn,
.interval-wialon .iw-time-btn,
.interval-wialon .iw-pickers input,
.ui-datepicker-prev,
.ui-datepicker-next,
.content .wrap > table thead .date,
.content .wrap > table thead .time {
	cursor: pointer;
}

#btn-print {
	position: absolute;
	right: 13px;
	top: 14px;
}

/* TOP BLOCK */

.top {
	border-bottom: 2px solid #3c7eba;
	margin-bottom: 12px;
}

.top p {
	display: inline-block;
	color: #000;
}

/* loading line */
#overlay-tab {
	position: absolute;
	top: 52px;
	bottom: 39px;
	width: 100%;
	z-index: 601;
}

#progress {
	height: 2px;
	width: 0;
	background: #9ab774;
	-webkit-animation: progress-anim 8s linear 0 infinite;
	animation-name: progress-anim;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: 1000000;
}

@-webkit-keyframes progress-anim {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

@keyframes progress-anim {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
/*end of loading line */

/* END OF TOP BLOCK */

/* TABLE HEADER */

.content .head-content {
	padding: 12px;
	background: #a4b9ce;
}

.content .head-content div {
	display: inline-block;
	vertical-align: top;
}

body select {
	display: inline-block;
	width: 154px;
	height: 26px;
	font-size: 12px;
	line-height: 26px;
	background: #fff;
	border: 1px solid #a4b9ce;
}

.content .wrap table {
	width: 100%;
	font-size: 12px;
	color: #565656;
	border-collapse: collapse;
}

.content .wrap table, .content .wrap thead, .content .wrap tbody {
	border: 1px solid #e2e3e5;
}

.content .wrap table tbody tr:nth-child(odd) {
	background-color: #f5f5f5;
}

.content .wrap table thead th {
	text-align: left;
	padding-left: 10px;
}

.content .wrap table thead th .arrow {
	display: none;
	font: 8px Icons;
}

.content .wrap table thead th.up .arrow {
	display: inline-block;
	padding-left: 12px;
}

.content .wrap table thead th.down .arrow {
	display: inline-block;
	transform: rotate(180deg);
	padding-right: 12px;
}

.content td, th {
	height: 35px;
	padding: 0 12px;
	vertical-align: middle !important;
}

.gras {
    font-weight: bold;
}

/* interval */
.interval-wialon {
	position: relative;
	top: 1px;
	left: 17px;
}

.interval-wialon .iw-select {
	display: inline-block;
	float: left;
	margin-left: -11px;
	margin-top: -1px;
}

.interval-wialon .iw-labels {
	margin-left: 15px;
	display: inline-block;
	float: right;
	margin-top: 2px;
}

.interval-wialon .iw-select .iw-period-btn {
	float: left;
	border: 1px solid #8098a4;
	height: 25px;
	padding: 0 15px;
	background: white;
	border: 1px solid #666;
	font-size: 12px;
}

.interval-wialon .iw-pickers {
	float: left;
	margin-left: 20px;
	margin-top: -1px;
}

.interval-wialon .iw-select .iw-period-btn + .iw-period-btn {
	margin-left: -1px;
}

.interval-wialon .iw-period-btn:hover, .interval-wialon .iw-period-btn.active {
	background-color: #478BE2;
	color: #fff;
}

.interval-wialon .iw-time-btn {
	background: #09f;
	border: 1px solid #09f;
	color: #fff;
	height: 23px;
	padding: 0 15px;
}

.interval-wialon .iw-labels .iw-label {
	position: relative;
	top: -4px;
}

.interval-wialon .iw-pickers input {
	background-color: #FFF;
	border: 1px solid #c0c7cf;
	padding: 0;
	margin: 0;
	height: 26px;
	width: 120px;
	text-align: center;
	vertical-align: top;
	font-size: 12px;
}

.interval-wialon .iw-similar-btn {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	display: inline-block;
}

.interval-wialon .iw-similar-btn.past {
	background: url(../img/prev.png);
	opacity: 0.6;
}

.interval-wialon .iw-similar-btn.future {
	background: url(../img/next.png);
	opacity: 0.6;
}

.interval-wialon .iw-similar-btn:hover {
	opacity: 1;
}

#ranging-time-wrap button {
	height: 26px;
	border-color: #a4b9ce;
	color: #3c7eba;
}

#ranging-time-wrap button:hover,
#ranging-time-wrap button.active:hover {
	background: #3c7eba;
	color: #fff;
}

#ranging-time-wrap button.active {
	background: #e2e3e5;
}

#ranging-time-wrap .iw-label {
	font-size: 12px;
	color: #fff;
}

#ranging-time-wrap .iw-similar-btn {
	opacity: .6;
}

#ranging-time-wrap .iw-similar-btn:hover {
	opacity: 1;
}

#ui-datepicker-div {
	display: none;
}

#ranging-time-wrap .iw-time-btn {
	color: #3c7eba;
	background-color: #fff;
	border-color: #3c7eba;
	width: 72px;
	margin-left: 15px;
}

.ui-datepicker {
	width: 280px;
	padding: 2px 10px;
	background: #f5f5f5;
}

.ui-datepicker-header span {
	color: #a4b9ce;
	padding: 7px 0 2px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	position: absolute;
	top: 2px !important;
}

.ui-datepicker-prev {
	left: 30px !important;
}

.ui-datepicker-next {
	right: 30px !important;
}

.ui-datepicker-title {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-transform: uppercase;
}

.ui-datepicker table {
	width: 100%;
	margin: 0 0 .4em;
	font-size: 13px;
	border-collapse: collapse;
}

.ui-datepicker .ui-datepicker-calendar {
	font-size: 13px
}

.ui-datepicker .ui-datepicker-calendar th {
	padding: 3px;
	font-size: 10px;
	color: #9b9b9b;
	text-transform: uppercase
}

.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-week-end {
	color: #e66b6b
}

.ui-datepicker .ui-datepicker-calendar td {
	position: relative;
	text-align: center;
}

.ui-datepicker .ui-datepicker-calendar td span, .ui-datepicker .ui-datepicker-calendar td a {
	padding: 5px 2px;
	color: #565656;
	text-align: center;
	text-decoration: none;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day .ui-state-active {
	background: #d9e0e8
}

.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span {
	color: #d6d6d6
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-infr:after {
	position: absolute;
	top: 6px;
	right: 6px;
	display: block;
	width: 4px;
	height: 4px;
	content: '';
	background: #e66b6b;
	border-radius: 50%
}

.ui-datepicker table {
	width: 100%;
	margin: 0 0 .4em;
	font-size: .9em;
	border-collapse: collapse;
}

.ui-datepicker th {
	padding: .7em .3em;
	font-weight: 700;
	text-align: center;
	border: 0
}

.ui-datepicker td {
	padding: 1px;
	border: 0
}

.ui-datepicker td span, .ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none
}

.ui-corner-all.ui-state-disabled {
	display: none;
}
/* end of interval */

/* END OF TABLE HEADER */

/* TABLE */

.over-scroll {
	overflow: auto;
	top: 150px;
	bottom: 0;
	width: auto;
}

.content table thead .date,
.content table tbody .date {
	width: 18%;
}

.content table thead .time,
.content table thead .timeWork,
.content table thead .prod,
.content table thead .Mileage,
.content table tbody .time,
.content table tbody .timeWork,
.content table tbody .prod,
.content table tbody .Mileage {
        width: 8%;
        text-align: left;
}

.content table thead .sch,
.content table tbody .scheme {
	width: 50%;
}

.content .wrap .tabbody table, .content .wrap .tabbody tbody {
	border-top: none;
}

/* scheme */
.content table tbody .scheme {
	padding: 0 12px;
}

.content table tbody .scheme .sch-top {
	margin: 5px 12px 0;
}

.content table tbody .scheme .sch-top .border {
	border: 1px solid #aaa;
	height: 15px;
	position: relative;
}

.content table tbody .scheme .sch-top .border .in {
	position: absolute;
	background: #aaa;
	height: 100%;
}

.content table tbody .scheme .sch-top .lines > span {
	position: relative;
	display: inline-block;
	height: 20px;
	padding: 0;
	font-size: 10px;
	line-height: 20px;
	float: left;
	width: 4.166666667%;
}

.content table tbody .scheme .sch-top .lines > span:nth-last-child(2) {
	width: 4%;
}

.content table tbody .scheme .sch-top .lines > span:last-of-type {
	width: 0;
}

.content table tbody .scheme .sch-top .lines > span i {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 5px;
	border-left: 1px solid #aaa;
}

.content table tbody .scheme .sch-top .lines > span time {
	margin-left: -12px;
}
/* end of scheme */

/* END OF TABLE */

/* ERROR BLOCK */

#error {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background: #d2dce7;
}

#error .dialog {
	width: 456px;
	height: 310px;
	margin: 50px auto 0;
	background: #fff;
	border: 1px solid #999;
	box-shadow: 0 0 7px rgba(0,0,0,.3);
}

#error .dialog .head {
	padding: 6px 12px;
	min-height: 13.43px;
	border-bottom: 1px solid #e5e5e5;
}

#error .dialog .head p {
	font-size: 18px;
	margin: 0;
	color: #000;
}

#error .dialog .body {
	padding: 24px 12px;
}

#error .dialog .body p {
	color: #565656;
	font-size: 14px;
	text-align: center;
	line-height: 14px;
}

/* END OF ERROR BLOCK */

/* BLOCK FOR NOTEBOOKS */

@media only screen and (max-width: 1366px) {
	.interval-wialon .iw-pickers {
		margin-left: 10px;
	}

	#ranging-time-wrap .iw-time-btn {
		width: 60px;
		margin-left: 7px;
	}

	.interval-wialon .iw-pickers input {
		width: 110px;
	}

	.over-scroll {
		height: 600px;
	}
}

/* END OF BLOCK FOR NOTEBOOKS */

/* BLOCK FOR TABS */

@media only screen and (max-width: 1024px) {
	.interval-wialon {
		margin-right: 40px;
	}

	.interval-wialon .iw-pickers input {
		width: 100px;
	}

	.over-scroll {
		height: 600px;
	}
}

/* END OF BLOCK FOR TABS 

/* FONTS */

@font-face {
	font-family: Icons;
	src: url(../fonts/icon-fonts.ttf);
}

.arrow:before {
	content: "\e601";
}

/* END OF FONTS */