@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?wiv9px');
	src: url('fonts/icomoon.eot?wiv9px#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?wiv9px') format('truetype'),
		url('fonts/icomoon.woff?wiv9px') format('woff'),
		url('fonts/icomoon.svg?wiv9px#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-pointer:before {
	content: "\e900";
}

.icon-info:before {
	content: "\e901";
}

.icon-focusRoute:before {
	content: "\e902";
}

.icon-focusTaxi:before {
	content: "\e903";
}

.icon-startPos:before {
	content: "\e904";
}

.icon-endPos:before {
	content: "\e905";
}

.icon-rateFull:before {
	content: "\e906";
}

.icon-rateSemi:before {
	content: "\e907";
}

.icon-rateEmpty:before {
	content: "\e908";
}

#spinner {
	position: absolute;
	z-index: 50;
	background-color: white;
	width: 100%;
	height: 100%;
}

.ts-center-content {
	position: absolute;
	width: 100%;
	height: 74%;
	top: 17%;
	bottom: 11%;
}

.ts-trip-info-view {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white; 
}

.ts-map-view {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.toast-custom-style {
	bottom: 15%;
	margin: auto;
	width: 96%;  
}
#orderTimeEnd {
	display: none;
}
#ts-time-ended {
	width: 50%;
	left: 50%;
	height: 100%;
	display: none;
	position: absolute;
	text-align: right;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bolder;
	font-size: 1em;
}
#end-order-title {
	padding: 2% 2% 0 0;
}
#toast-container .toast {
	width: 96%;
	margin: auto; 
}

body {
	font-size: 16px;
	line-height: 1.3;
	font-family: sans-serif;
}

div.leaflet-control-attribution, div.leaflet-control {
	display: none;
}

.activeScreen {
	z-index: 2 !important;
}

#map {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: block;
}

#error {
	position: absolute;
	width: 100%;
	height: 79%;
	top: 10%;
	z-index: 1;
	text-align: center;
}

.ts-main-container {
	width: 100%;
	height: 100%;
	position: absolute;
}

.ts-header {
	position: absolute;
	height: 10%;
	width: 100%;
	z-index: 30;
	display: table-row;
	background-color: rgba(255, 255, 255, 0.9);
}

.ts-trip-state {
	position: absolute;
	width: 50%;
	height: 100%;
	left: 40%;
	display: table;
	text-align: center;
}

 
.ts-trip-state>span {
	color: #094f84;
	font-style: oblique;
	display: table-cell;
	vertical-align: middle;
}
 

.english-flag-image {
	height: 15px;
	width: auto;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.bulgarian-flag-image {
	height: 15px;
	width: auto;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.ts-language-flag {
	position: absolute;
	height: 100%;
	width: 10%;
	right: 0;
}

.ts-time-bar {
	position: absolute;
	opacity: 0.9;
	top: 10%;
	height: 7%;
	width: 100%;
	/* padding-left: 10px; */
	background-color: #17486a;
	z-index: 30;
}
 

.ts-car-num {
	width: 49%;
	left: 1%;
	height: 100%;
	/* float: left; */
	position: absolute;
	display: table;
}

.ts-car-num>span {
	display: table-cell;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bolder;
}
  
 

.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
 

.ts-time {
	width: 19%;
	left: 80%;
	height: 100%;
	position: absolute;
	text-align: right;
}

.ts-time>span {
	color: #ffffff;
	font-weight: bolder;
	vertical-align: middle;
}
  

.clock {
	width: auto;
	height: 65%;
	max-height: 100%;
	max-width: 100%;
	/* margin-right: 0.5vw; */
	vertical-align: middle;
}

.ts-error-info-bar {
	top: 15%;
	width: 100%;
	height: 3%;
	background: red;
	position: absolute;
	z-index: 30;
	display: table-cell;
	text-align: center;
}

.connecting {
	background: grey;
}

.ts-error-info-bar>span {
	color: white;
	margin-left: 4%;
	margin-top: 0%;
	display: block;
	margin-bottom: 0%;
}

.toast-custom {
	bottom: 15%;
	right: 0;
	left: 0;
	width: 100%;
	margin: auto;
	position: relative;
}
 
[ng\:cloak], [ng-cloak], .ng-cloak {
	/*display: none !important;*/
	
}
 

.ts-map-buttons button {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #00365C;
	color: #94B5CE;
	font-weight: normal;
	font-size: xx-large;
	border-color: rgba(173, 187, 230, 0.97);
	cursor: pointer;
}

.ts-map-buttons .active {
	background: #0099FF;
	color: white;
}
  
.ts-footer .active {
	background: #0099FF;
	color: white;
}

.ts-footer span {
	position: relative;
}

.ts-button-footer {
	display: inline-block;
	width: 50%;
	height: 100%;
	background-color: #00365c;
	color: #94B5CE;
	font-weight: normal;
	font-size: medium;
	border: none;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	float: left;
	display: table;
	text-align: center;
}

.ts-footer-button-content {
	display: table-cell;
	vertical-align: middle;
}

.ts-button-footer:hover {
	background: #0099FF;
	color: white;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
	-webkit-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

.ts-map-button {
	display: block;
	height: 33.3%;
	text-align: center;
}

.ts-map-buttons {
	position: absolute;
	right: 0;
	top: 20%;
	overflow: hidden;
	z-index: 1;
	height: 45%;
	width: 20%;
}

body {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.ts-footer {
	bottom: 0;
	margin-bottom: 0;
	border-width: 1px 0 0;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 30;
	height: 11%;
}

.icon-info {
	margin: 5%;
}

.ts-footer i {
	margin: 5%;
}
 

.ts-driver-info {
	width: 100%;
	height: 21%;
	position: absolute;
}

.ts-driver-picture {
	width: 35%;
	height: 100%;
	position: absolute;
}

.ts-driver-picture-image {
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
 

.leaflet-marker-icon {
	background: none;
	border: none;
}

.ts-driver-info-common {
	width: 65%;
	height: 100%;
	position: absolute;
	right: 0;
}

.ts-driver-name {
	width: 100%;
	height: 30%;
	/* position: relative; */
	text-align: center;
	display: table;
}

.ts-driver-name>span {
	font-weight: bolder;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: table-cell;
	vertical-align: middle;
}
 
.ts-driver-rating {
	width: 100%;
	height: 24%;
}

.ts-driver-votes {
	width: 100%;
	height: 20%;
	/* position: relative; */
	/* display: table; */
	text-align: center;
	margin-top: 3%;
}
 

.ts-driver-car {
	width: 100%;
	height: 13%;
	position: absolute;
	top: 22%;
}
 

.ts-car-item {
	width: 90%;
	height: 30%;
	margin: auto;
}
#price {
	background-color: #17486a;
	color: #ffffff;
	margin: 0 5% 0 0;
	padding: 1% 0 1% 5%;
	width: 100%;
}
#tripPrice {
	font-weight: bold;
	font-size: 1.1em;
}

.ts-emergency {
	text-align: center;
	margin-top: 10%;
	display: table;
	width: 100%;
}
#contact-support {
	padding: 20px;
	color: #ffffff;
	background-color: #0080da;
	text-decoration: none;
	font-weight: 100;
	text-transform: uppercase;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease-in-out;
}
#contact-support:hover {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
}

.ts-emergency>span {
	display: table-cell;
}
  
.ts-emergency-phone {
	 text-decoration: none;
	 display: inline-block;
}
 
.ts-trip-pois {
	width: 100%;
	position: absolute;
	/* max-height: 70%; */
	/* min-height: 12%; */
	/* height: 27%; */
	height: 27%;
	top: 40%;
	border-top: 1px solid #737373;
	border-bottom: 1px solid #737373;
}

.ts-point-marker {
	width: 15%;
	height: 100%;
	/* float: left; */
	display: table;
	position: absolute;
}

.ts-start-point-name {
	width: 85%;
	height: 100%;
	/* float: right; */
	position: absolute;
	display: table;
	text-align: left;
	left: 15%;
	padding-top: 10px;
}

.ts-end-point-name {
	width: 85%;
	height: 100%;
	/* float: right; */
	position: absolute;
	display: table;
	text-align: left;
	left: 15%;
	padding-top: 5px;
	padding-bottom: 5%;
}

.ts-point-name>span {
	
}

.ts-start-point {
	width: 100%;
	height: 50%;
	/* padding-top: 5%; */
	display: table;
	position: absolute;
}

.ts-end-point {
	/* width: 100%; */
	/* height: 45%; */
	/* padding-bottom: 5%; */
	width: 100%;
	height: 50%;
	/* padding-top: 5%; */
	display: table;
	position: absolute;
	top: 50%
}

.ts-logo {
	position: absolute;
	height: 100%;
	width: 40%;
}
   
.icon-endPos, .icon-startPos {
	color: #0099ff;
	display: table-cell;
	vertical-align: middle;
	font-size: 40px;
}
 
.ts-additional-info {
	width: 100%;
	height: 30%;
	position: absolute;
	    top: 62%;
}
  
 

.ts-playstore { 
    text-align: center;
    width: 100%; 
    position: absolute;
        height: 35%;
    margin-top: 10%; 
}

.ts-playstore> a{
	    width: 100%;
    height: 100%;
    left: 0;
    position: relative;
}

.ts-playstore > a > img {
	    max-width: 100%;
    max-height: 100%;
}

svg.icon {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.ts-map-pointer {
	background-image: url(images/pointer_map.png);
	width: 72px;
	height: 53px;
	position: relative;
	background-repeat: no-repeat;
	background-size: contain;
}

.ts-car-marker {
	background-image: url(images/car_pointer.png);
	width: 72px;
	height: 53px;
	position: relative;
	background-repeat: no-repeat;
	background-size: contain;
}
.ts-moving-car-marker {
	background-image: url(images/car_pointer_MOVING.png);
	width: 72px;
	height: 53px;
	position: relative;
	background-repeat: no-repeat;
	background-size: contain;
}

.ts-moving-car-marker > span {
	position: absolute;
	bottom: 25%;
	left: 25%;
}

.ts-modal-container {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.4); 
	z-index: -1000;
}

.ts-modal-container-shows {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.4); 
	z-index: 2000;
}

.ts-modal {
	position: absolute;
	z-index: 1000;
	left: 0;
	top: 30%;
	right: 0;
	width: 60%;
	height: 33.3%;
	margin: auto;
}

 
.ts-modal-content {
	background-color: #fefefe;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	position: relative;
}

.ts-modal-header {
	position: absolute;
	width: 100%;
	height: 20%;
	background-color: #17486a;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	text-align: center;
	top: 0;
}

.ts-modal-header>p {
	color: #94B5CE;
}

.ts-modal-message {
	position: absolute;
	width: 100%;
	height: 60%;
	top: 20%;
	text-align: center;
}

.ts-modal-footer {
	position: absolute;
	width: 100%;
	height: 20%;
	/* top: 75%; */
	background-color: #17486a;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	/* text-align: center; */
	bottom: 0;
}
/* The Close Button */
.close {
	position: absolute;
	width: 30%;
	height: 80%;
	background-color: #0099FF;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	cursor: pointer;
	text-align: center;
	font-weight: bolder;
	color: white;
	border: 1px solid #17486a;
}

.close:hover, .close:focus {
	text-decoration: none;
	cursor: pointer;
	background: #17486a;
	color: #94B5CE;
}

@media screen and (orientation: landscape) and (min-height: 500px) {
	.ts-main-container {
		width: 50%;
		height: 100%;
		position: absolute;
	}
	.ts-header {
		position: absolute;
		height: 10%;
		width: 200%;
		z-index: 30;
		display: table-row;
		background-color: rgba(255, 255, 255, 0.9);
	}
	.ts-time-bar {
		position: absolute;
		opacity: 0.9;
		top: 10%;
		height: 5%;
		width: 200%;
		/* padding-left: 10px; */
		background-color: #17486a;
		z-index: 30;
	}
	.ts-footer {
		display: none;
	}
	.ts-map-view {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 100%;
	}
	.ts-center-content {
		position: absolute;
		width: 100%;
		height: 85%;
		top: 15%;
	/* 	z-index: 9999999999 !important; */
		/* bottom: 11%; */
	}
}

@media screen and (orientation: landscape) and (max-height: 500px) {
	body {
	font-size: 14px;
	line-height: 1;
	}
	
	.ts-header {
	height: 12%;
	}
	.ts-logo {
	width: 30%;
	}
	.ts-time-bar {
	top: 12%;
	}
	.ts-car-num {
	width: 29%;
	}
	#ts-time-ended {
	width: 60%;
	left: 40%;
	}
	#end-order-title {
	padding: 1%;
	}
	/* START OF MAP VIEW */
	.ts-center-content {
	height: 66%;
	top: 19%;
	bottom: 15%;
	}
	.ts-map-buttons {
	height: 60%;
	top: 15%;
	}
	.ts-map-buttons button {
	font-size: x-large;
	}
	/* END OF MAP VIEW */
	
	/* START OF ORDER VIEW */
	.ts-driver-info {
	width: 50%;
	height: 40%;
	position: relative;
	float: left;
	}
	.ts-driver-picture {
	width: 50%;
	heidht: 100%;
	}
	.ts-driver-info-common {
	width: 50%;
	padding-top: 2%;
	}
	.ts-driver-name>span {
	white-space: normal;
	}
	.ts-driver-car {
	width: 50%;
	height: 30%;
	position: relative;
	top: auto;
	float: right;
	padding-top: 1%;
	}
	#price {
	padding: 0;
	text-align: center;
	}
	#price>span {
	vertical-align: middle;
	}
	.ts-trip-pois {
	height: 41%;
	}
	.ts-point-marker {
	width: 10%;
	}
	.ts-start-point-name {
	width: 90%;
	left: 10%;
	padding-top: 5px;
	}
	.ts-end-point-name {
	width: 90%;
	left: 10%;
	padding-bottom: 0;
	}
	.ts-additional-info {
	height: 20%;
	top: 80%;
	}
	.ts-emergency {
	width: 50%;
	text-align: left;
	padding-left: 5%;
	margin-top: 1%;
	float: left;
	}
	.ts-playstore {
	width: 45%;
	height: 70%;
	position: relative;
	margin-top: 1%;
	float: right;
	}
	/* END OF ORDER VIEW */
	#contact-support {
	position: absolute;
	padding: 7px;
	}
	.ts-footer {
	
	height: 15%;
	}
	
	
}

@media screen and (orientation: portrait) and (max-width: 400px) {
	body {
		font-size: 16px;
		line-height: 1.3;
		font-family: sans-serif;
	}
	#ts-time-ended {
	font-size: .9em;
	}
	.ts-time {
	width: 30%;
	left: 65%;
	}
	#contact-support {
	position: relative;
	padding: 10px;
	font-weight: bold;
	}
}
@media screen and (orientation: portrait) and (max-width: 360px) {
	body {
		font-size: 14px;
		line-height: 1.2;
		font-family: sans-serif;
	}
}
@media screen and (orientation: landscape) and (max-width: 400px) {
	body {
		font-size: 6px;
		line-height: 1.0;
		font-family: sans-serif;
	}
	.icon-endPos, .icon-startPos {
		color: #0099ff;
		display: table-cell;
		vertical-align: middle;
		font-size: 20px;
	}
}
@media screen and (orientation: landscape) and (max-width: 800px) {
	.ts-emergency {
	margin-top: 15%;
	}
}