html, body {
    position: relative;
    height: 100%;
    cursor: default;
}

body {
	margin: 0;
	padding: 0;
	color: black;
	font: normal 13px Roboto, Open Sans, helvetica, arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	outline: none;
}

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

.link.blue {
	color: rgb(0, 115, 192);
}

.link.red {
	color: #CC0000;
}

.link:hover {
	cursor: pointer;
	text-decoration: underline;
}

::-webkit-input-placeholder {
   text-transform: none;
}
:-moz-placeholder {
   text-transform: none;
}
::-moz-placeholder {
   text-transform: none;
}
:-ms-input-placeholder {  
   text-transform: none;
}

.required {
	background-color: #fffcdd!important;
}

textarea {
	font-family: inherit;
}

.loader {
    position: relative;
    margin: 0px auto;
}
.loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.circular {
    animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

@keyframes rotate {
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@keyframes color {
    100%, 0% {
     stroke: #3E608E;
    }
    40% {
        stroke: #3E608E;
    }
    66% {
        stroke: #3E608E;
    }
    80%, 90% {
        stroke: #3E608E;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #3E608E;
    }
    40% {
        stroke: #3E608E;
    }
    66% {
        stroke: #3E608E;
    }
    80%, 90% {
        stroke: #3E608E;
    }
}

.input
{
	width: 100%;
	outline: none;
	resize: none;
	padding: 9px 8px;
	border: 1px solid #ccc;
	box-shadow: inset 0 0 0 1px #fff;
	background: #fff;
	font-size: 13px;
	border-radius: 0;
	color: #000;
	margin: 0;
}

.input:focus
{
	border-color: #4d90fe !important;
	background-color: #fffcdd !important;
	border-color: #ff9900 !important;
	
}

.wrong-input
{
	border-color: #eb0028 !important;
}

.wrong-input:focus
{
	border-color: #eb0028!important;
}

.input[disabled] {
	background: whitesmoke !important;
	border-color: white !important;
	
}

.app-disabled,
.main-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.app-disabled {
	top: 98px;
	background: #fff;
    opacity: .5;
	display: none;
}

div.timeline-event-content {
	margin: 7px 5px!important;
	padding: 3px 5px!important;
    cursor: pointer;
}
	
div.timeline-event-range {
	border-width: 0;
}
	
div.timeline-currenttime {
	z-index: 1;
}
	
div.timeline-axis-grid-minor {
	border-color: #ddd;
	opacity: .4;
}

#mytimeline {
	
}

#new {
    position: absolute;
    left: 25px;
    top: 8px;

    text-transform: uppercase;
    color: white;
    font-weight: bold;
    font-size: 40px;
    text-decoration: none;
}

    /* Custom styles for the Timeline */
div.timeline-frame {
    border: none;
    border-radius: 0;
    -moz-border-radius: 0; /* For Firefox 3.6 and older */
}
div.timeline-axis {
    border: none;

    background-color: #5d98c2!important;
	position: fixed!important;
}
div.timeline-axis:first-child {
	top: 50px!important;
	/*width: 125px!important;*/
	left: 0!important;
	z-index: 1;
}
.timeline-content > div:first-child {
	position: fixed!important;
    background: #5d98c2!important;
	top: 50px!important;
	/*left: 125px!important;*/
	z-index: 1;
}
div.timeline-axis-grid {

}
div.timeline-groups-axis {
    border-color: #ddd;
	background: #f9f9f9;
	z-index: 1;
}
div.timeline-axis-text {
    color: white!important;
}
div.timeline-groups-text {
    color: #4D4D4D;
	font-weight: bold;
}
div.timeline-event {
    color: white;
    border-radius: 2px;
}
div.timeline-event-content {
    padding: 5px;
}

div.Canceled {
    background-color: #babbbd; /* red */
    border-color: #babbbd;     /* red */
}
div.Expired {
    background-color: #525252; /* green */
    border-color: #525252;     /* green */
}
div.Booked { 
    background-color: #338211; /* trackerblue */
    border-color: #338211;     /* trackerblue */
}
div.Collected {
    background-color: #f2891d; /* orange */
    border-color: #f2891d;     /* orange */	
}
div.Delivered {
    background-color: #9b1010; /* orange */
    border-color: #9b1010;     /* orange */

}

.timeline-event-selected {
    z-index: 0!important;
}

.vi-check {
    overflow: auto;
    margin: 12px 10px;
    float: left;
}

.vi-check > div {
   text-align: center;
   color: #fff;
   float: left;
   padding: 3px 20px;
   border-top: 1px solid #5d98c2;
   border-bottom: 1px solid #5d98c2;
   border-left: 1px solid #5d98c2;
   font-size: 12px;
}

.vi-check > div.start {
   border-radius: 3px 0 0 3px;
}

.vi-check > div.end {
   border-radius: 0 3px 3px 0;
   border-right: 1px solid #5d98c2;
}

.vi-check > div.active {
    background: #5d98c2!important;
}

.vi-check > div:hover {
    cursor: pointer;
}

.vi-legend {
    overflow: auto;
    float: right;
    color: #fff;
    margin-right: 20px;
}

.vi-legend > div {
    overflow: auto;
    float: left;
    line-height: 50px;
}

.vi-legend > div > div {
    float: left;
}

.vi-legend > div > div.vi-legend-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 5px;
    margin-top: 18px;
    margin-left: 5px;
    border: 1px solid #fff;
}