.btn-map-zoom {display: none}
.mode-mobile .btn-map-zoom {display: block}


.track-info, .stop-list {
	background-color:#FFF;
	padding:0px 0px 0px;
	width:380px;
	border-right:1px solid #CCC;
}

.track-image, .route-image {
	position:fixed;
	top:0px;
	bottom:0px;
	right:0px;
	left:380px;
	background-color:#FFF;
}

.stop-list-border {
	position:fixed;
	top:0px;
	bottom:0px;
	left:378px;
	width:2px;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 6px;
	z-index: 10;
}

.stop-list-bottom-box {
	z-index:100;
	position:fixed;
	bottom:0px;
	left:0px;
	padding:0px 10px;
	text-align:center;
	width:380px;
	background-color:#EEE;
	box-shadow: rgba(0, 0, 0, 0.12) 0px -3px 6px;border-top:1px solid #CCC
}

.stop-list-header {
	border-bottom:1px solid #CCC;
	margin-bottom:5px;
	font-size:14px;
	position: relative;
}

.stop-list-header-box {
	background-color:#E52421;
	color:#FFF;
	padding:10px 25px 10px 54px;	
	position: relative;
}

.stop-list-header .title {
font-size:20px;font-weight:bold;
}
.stop-list-header .subtitle {
font-size:18px;
}

.stop-line {
	padding:3px 10px;
	position: relative;
	color:#888;
	font-size:14px;
}
/*
.stop-line-inside {
	border-bottom:1px solid #CCC;
}
*/

.selected .stop-line-inside {
	border-bottom:0px solid #CCC;	
}

.stop-line .cli_street {
	color: #000;
}

.stop-line .div_address {
	padding:4px 0px 4px;
}

.win-edit-route {
	height: 100%;
	width : 380px!important;
	position: fixed!important;
}

@media (max-width: 900px) {
	.route-image {
		left:310px;
	}
	.stop-list-bottom-box {
		width:310px;
	}
	.stop-list {
		width:310px;
	}
	.stop-list-border {
		left:305px;
	}
	.stop-line {
		padding : 3px 10px;
	}
	.stop-list-header {
	}
	.stop-list-bottom-box .btn {font-size: 14px;}

	.win-edit-route {
		width : 310px!important;
	}
}

.mode-mobile .route-image, .mode-mobile .track-image {
	right:0px;
	left:0px;	
	bottom: calc( 100% - 260px );
	box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 6px;
}
.mode-mobile.map-zoom .route-image, .mode-mobile .track-image {
	bottom: calc( 100% - 400px );
}	

.mode-mobile.hide-plan  .route-image { bottom: calc( 100% - 50px );}
.mode-mobile.hide-plan .stop-list { margin-top: 50px;}
.mode-mobile .stop-list { padding-top: 260px;border-right:0px solid #CCC;}

.mode-mobile .track-info {padding-top: 400px;}
.mode-mobile.map-zoom .stop-list { padding-top: 400px;}

.mode-mobile .stop-list-border {display: none}
.mode-mobile .stop-line { padding : 3px 10px;}
.mode-mobile .stop-list-header-box  { padding: 10px 10px;}
.mode-mobile .track-info {padding-top: 400px;width: 100%}
.mode-mobile .win-edit-route {width : 100%!important;}

.mode-mobile .stop-list-header-box {
	padding-left:10px;	
}

.track-info {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 380px;
	box-shadow: rgba(0, 0, 0, 0.12) 3px 3px 6px;
	z-index: 1000;
}
@media (max-width: 700px) {
	.btn-map-zoom {display: block}
	.stop-list-header-menu {width: 100%!important;}

	.track-image, .route-image {
		right:0px;
		left:0px;	
		height: 260px;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 6px;
		z-index: 100;
	}
	.map-zoom .route-image, .map-zoom .track-image {
		height: 400px;
	}	

	.stop-list {padding-top: 260px;width: 100%}
	.track-info {padding-top: 400px;width: 100%}

	.map-zoom  .stop-list {padding-top: 400px;}

	.stop-list-bottom-box {width: 100%}
	.stop-list-border {display: none}
	.stop-line { padding : 3px 10px;}
	.stop-list-bottom-box .btn {font-size: 16px;}
	.win-edit-route {
		width : 100%!important;
	}
	.not-mobile {display: none}
	.stop-list-header-box {
		padding-left:10px;	
	}
}

/*
	.hide-plan  .route-image { bottom: calc( 100% - 100px );}
	.hide-plan .stop-list { margin-top: 100px;}
*/
.stop-list-header-menu {
background-color:#EEE;
padding: 10px;
display: none;
overflow: hidden;
position:fixed;
bottom:0px;
left:0px;
z-index: 100;
width: 380px;
}

/* border-bottom:1px solid #CCC; */
.feed-route .feed-line {
	padding:5px 0px;
}

/* .feed-route */
.feed-route .feed-line .col1 {
width:110px;
vertical-align:top;
}

.feed-route .feed-line .col2 {
line-height:1.2;
font-size:14px;
padding: 0px 10px;
vertical-align:top;
width: auto;
}

.feed-route .feed-line .title {
font-size:18px;
font-weight:bold;
padding-bottom:2px;
}

.feed-route .feed-line .subtitle {
font-size:14px;
padding-bottom:2px;
font-weight: bold;
color: #666;
}

.feed-route .feed-line .feed-image {width:110px;height:75px}

.feed-route .feed-line .image-label {
	border-radius:4px;
	position:absolute;
	top:3px;
	left:3px;
	display:inline-block;
	background-color:#CC0000;
	padding:2px 8px;
	color:#FFF;
	font-weight:bold;
}

.feed-route {
position: relative;
padding: 0px 10px;
}

.feed-address {
padding: 0px 10px;
position: relative;
}

.feed-team {
padding:10px;
position: relative;
}

.feed-media {
padding:10px;
position: relative;
}

/* etat de la route */
.route_state0 {background-color: #CC0000!important;color: #FFF!important;}
.route_state1 {background-color: darkOrange!important;color: #FFF!important;}
.route_state2 {background-color: #52AE32!important;color: #FFF!important;}
.route_state3 {background-color: #888!important;color: #FFF!important;}
.route_state9 {background-color: gold!important;color: #000!important;}
.route_state10 {background-color: #EEE!important;color: #000!important;}

.langageSelector {
	position: absolute;top: 20px;right: 20px;padding: 2px 0px!important;
	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

.feed-company {padding: 0px 10px 10px;background-color: #EEE;line-height: 1.3;font-size: 16px;}
.feed-company .field-title {font-weight: bold;display: inline-block;color: #00A2E8;font-size: 26px;line-height: 1.2}
.feed-company .field-role {vertical-align: middle;display: inline-block;font-size: 12px;line-height: 1.2;background-color: #888;color: #FFF;padding: 2px 6px;border-radius: 4px;}


.feed-team {padding: 10px;}




#tool-box {background-color: #52AE32;}

#tool-box .btnSquare svg {fill : #FFF;opacity: 1;}

#tool-box .btnSquare {color : #FFF;opacity: 0.8;}

#tool-box .selected.btnSquare .title {color: #000;font-weight: bold}
#tool-box .selected.btnSquare svg {fill: #000;}
#tool-box .selected.btnSquare {opacity: 1;background-color: #FFF;border-radius: 6px;}


.btn-driver {background-color: #52AE32;color: #FFF;font-weight: bold}
.btn-driver svg {fill: #FFF;}

.do-close svg { fill :#00A2E8 !important; }
.do-close {opacity:1!important}

.svg-green svg {fill: #52AE32!important}

.feed-stop .time {position:absolute;top:5px;right:10px;}
.feed-stop .time2 {position:absolute;top:28px;right:10px;}
.feed-stop .time3 {position:absolute;top:51px;right:10px;}

.feed-stop .comment {border:2px solid red;margin-top:5px;margin-right: 50px;border-radius:5px;padding:2px 5px;color:red;position:relative;background-color:#FFF}

.feed-stop .field-arrival_p {background-color:#AAA;color:#FFF;padding:0px 3px;border-radius:4px;}
.feed-stop .field-package_number {color:#AAA;position:absolute;top:28px;right:10px;padding: 0px 3px;border-radius: 3px;}
.feed-stop .field-package_count {color:#888;position:absolute;top:48px;right:13px;font-size: 14px;}
.feed-stop .order_p {font-size:16px;font-weight:bold;padding-top:6px;text-align:center;vertical-align:middle;width:36px;height:36px;background-color:#DDD;border-radius:50%}

.feed-stop .cli_street {font-weight: bold;color: #666}

.feed-stop .priority .order_p {background-color:#666;color: #FFF}
.feed-stop .priority .cli_street {font-weight: bold;color: #000}
.feed-stop .priority .div_address {color: #000}
.feed-stop .priority .field-arrival_p {background-color: #666}
.feed-stop .priority .field-package_number {color: #000}

.feed-stop .no-delivery.stop-line {background-color: #EEE}
.feed-stop .done.stop-line {background-color: #EEE}

.feed-stop .buttons-revert {display: none}
.feed-stop .done .buttons-revert {display: block}
.feed-stop .done .buttons-start {display: none}
.feed-stop .done .back-white {background-color: #EEE;}
.feed-stop .selected .back-white {background-color: #DDD;}

.feed-stop .no-delivery .field-arrival_p {display: none}
/*
.feed-stop .selected .field-package_number {color:#FFF!important;}
.feed-stop .selected .field-arrival_p {background-color: #FFF;color: #CC0000;font-weight: bold}
.feed-stop .selected .div_address {color: #FFF!important}
.feed-stop .selected .cli_street {color: #FFF!important;font-weight: bold}
.feed-stop .selected .stop-line {background-color: #CC0000!important;opacity: 1!important;}
.feed-stop .selected .order_p {background-color: #FFF!important;color: #CC0000}
*/

.feed-stop .selected .order_p {background-color:#CC0000;color: #FFF}
.feed-stop .selected .cli_street {color: #CC0000}
.feed-stop .selected .div_address {color: #CC0000}
.feed-stop .selected .field-arrival_p {background-color: #CC0000}
.feed-stop .selected .field-package_number {color: #CC0000}
.feed-stop .selected .stop-line {background-color: #DDD!important;}

@media(hover: hover) and (pointer: fine) {
#tool-box .btnSquare:hover svg {fill: #000}
#tool-box .btnSquare:hover .title {color: #000}

.feed-stop .feed-line:hover .order_p {background-color:darkOrange;color: #FFF}
.feed-stop .feed-line:hover .cli_street {color: darkOrange!important}
.feed-stop .feed-line:hover .div_address {color: darkOrange!important}
.feed-stop .feed-line:hover .field-arrival_p {background-color: darkOrange;color: #FFF}
.feed-stop .feed-line:hover .field-package_number {color: darkOrange!important}
.feed-stop .feed-line:hover .order_p {background-color: darkOrange!important;color: #FFF}
.feed-stop .feed-line:hover .stop-line {background-color:#EEE!important}
.feed-stop .feed-line:hover .icon-order {background-color: darkOrange!important;}
.feed-stop .selected:hover .back-white {background-color: #EEE;}

.message-sent:hover .sms-title {
	color: darkOrange;
}

.message-sent:hover .sms-yellow {
	color: darkOrange;
}

}


.feed-stop .done .field-arrival_p {background-color: #52AE32}
.addresslist {display: none;padding: 10px 0px;background-color: #EEE}
.line0 td {padding: 0px!important;}
.ab_button {float:right;margin-bottom:-2px;}

.tag_accuracy {border-radius: 3px;padding: 0px 5px;background-color: #CCC;color: #FFF}
.tag_accuracy_error {border-radius: 3px;padding: 0px 5px;background-color: #CC0000;color: #FFF}

.error-div {display: inline-block}
.error-message {display: none;font-weight: bold}

.selected .error-div {display: block;padding: 4px 0px;vertical-align: middle;}
.selected .error-div svg {fill: red!important}
.selected .error-message {display: inline-block;color: red!important}

.listAddress {display: none}

.chooseAddress {margin-bottom: 25px;color: #CC0000;}
.info-search {padding: 10px; }
.chooseAddress .address-frame {color: #CC0000;}


.on-template {display: none}
.state-10 .on-template {display: table-row}
.state-10 .not-on-template {display: none}

.feed-message .state-2 .field-title {color: #00A2E8}
.feed-message .state--1 .field-title {color: red}
.feed-message .state-0 .field-title {color: #888}
.feed-message .state-10 .field-title {color: darkOrange}

.feed-message .field-message {color: #888}

.feed-top-buttons .btn-end-select {display: none;}
.search-subuttons .btn-onselect {display: none}

.mode-select .feed-top-buttons .btn-end-select {display: inline-block;}
.mode-select .feed-top-buttons .btn-select {display: none;}
.mode-select .feed-top-buttons .btn-add {display: none;}
.svg-select {display: none}
.mode-select .svg-select {display: block}

.mode-select .margin-left-40 {margin-left:40px;}
.mode-select .margin-left-50 {margin-left:50px;}

.mode-select .selected .svg-select svg {fill: #00A2E8;}
.mode-select .selected .svg-select {opacity: 1;}
.mode-select .feed-line .address-frame{opacity: 0.5;}
.mode-select .feed-line.selected .address-frame {opacity: 1;}
.mode-select .feed-line.selected .line-background {background-color: #EEE}

.hide2 {display: none;}

.route_state9 .cyellow ,.route_state10 .cyellow {color: #000;}
.route_state9 .cwhite,.route_state10 .cwhite {color: #000;}
.route_state9 svg,.route_state10 svg {fill: #000!important}

.route_state9 .cEEE,.route_state10 .cEEE {color: #888!important}

.stop-list-bottom-box {display:none}
.connected .stop-list-bottom-box {display:block}

.page-tracking.state_2 #map {display: block!important;}
.page-tracking .message_0, .page-tracking .message_1, .page-tracking .message_2,.page-tracking .message_3 {display: none}
.page-tracking.state_0 .message_0 {display: block}
.page-tracking.state_1 .message_1 {display: block}
.page-tracking.state_2 .message_2 {display: block}
.page-tracking.state_3 .message_3 {display: block}

.page-tracking.state_3 .scheduled_delivery {display: none}

.parcels-loading .route-image {display: none}
.parcels-loading #canceled-stop {display: none}
.parcels-loading .stop_state-1 {display: none} 
.parcels-loading .time {display: none}
.parcels-loading .field-package_number {top: 5px!important;}
.parcels-loading .button-box {display: none}
.parcels-loading .btn-edit-box {display: none!important}
.parcels-loading .btn-call-client {display: none!important}
.parcels-loading .stop-list {padding: 0px;}
.edit-count {display: none }
.parcels-loading .edit-count {display: block;}
.parcels-loading .stop-line {min-height: 76px}

.parcels-loading .editProfil2 {display: none!important}
.parcels-loading .back-button {display: none!important}
.parcels-loading .stop-list-header-box {padding-left: 10px}

.parcelsLoading {display: none!important}
.parcelsLoading.state1 {display: flex!important}
.parcelsLoading.state2 {display: flex!important}
.parcelsLoading.state3 {display: flex!important}

.parcelsLoading.state1 .btn-seeOrder {display: none}
.parcelsLoading.state0 .btn-seeOrder {display: none}

.parcelsLoading.state3 .btn-seePackage {display: none}
.parcelsLoading.state2 .btn-seePackage {display: none}

/*.parcels-loading .parcelsLoading {display: none}*/

.dev #tool-box {background-color: darkOrange}
.dev.api #tool-box {background-color: #CC0000}


.edit-sms .editProfil2 {display: none!important}
.edit-sms .back-button {display: none!important}
.edit-sms .stop-list-header-box {padding-left: 10px}
.edit-sms .stop-list {padding: 0px;}
.edit-sms .route-image {display: none}

.on-dev {display: none!important}
.dev .on-dev {display: flex!important}
.api-dev .btn-api-dev {background-color: darkOrange;color: #FFF}
.api .btn-api {background-color: #CC0000;color: #FFF}

.done .field-package_count {display: none}

.post-it {
	background-color:#ffeba4;
	position: relative;
	background-image: url(../image/post.bottom2.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	border-radius: 0px!important;
	border: 0px solid #000!important;				
}

.post-it-button {
	height:41px;
	margin:0px;
	display:block;
	padding: 8px;
	font-size: 16px;
	text-align: center;
	color:#00A2E8!important;
}	

.sms-list-box {display: none;background-color: #EEE;}
.sms-list {text-align: left;}
.sms-message-box {margin-bottom: 20px;background-color: #FFF;text-align:left;font-size:16px;border:1px solid #CCC;margin: 0px -1px}

.title1 {font-size: 24px;font-weight: bold;padding: 8px 0px;background-color: #EEE;}
.title2 {font-size: 18px;font-weight: bold;padding: 5px 0px;color: #000;}

b.tag {color: red;}

.sms-buttons {
	text-align:right;
	margin:10px -6px -6px;
	padding-top:5px;
}

.order-round {
	display:inline-block;
	border-radius:50%;
	font-weight:bold;
	background-color:#DDD;
	border-radius;
	width:36px;
	height:36px;
	padding-top:6px;
	font-size:16px;
	text-align:center;
	color: #000;
}

.message-sent .sms-title {
   background-color: #DDD;
   color: #888;
}

.message-sent .sms-name {color: #00A2E8;}
.message-sent .sms-phone {color: #00A2E8;}
.message-sent .order-round {background-color: #00A2E8;color: #FFF}
.sms-text {
	color: #000;
}

.message-sent .sms-text {
	color: #AAA;
}

.sms-check { display:none }
.message-sent .sms-check {display: block}

.sms-resend {display: none}
.message-sent .sms-send {display: none}
.message-sent .sms-resend {display: inline-block}

.seeOrders .time2 {display: none;}
.seeOrders .time3 {display: none;}

#view-stop.readonly .editProfil2 {display:none!important}
#view-stop.readonly .edit-stop {display:none!important}
#view-stop.readonly .button-box {display:none!important}
#view-stop.readonly .stop-list-bottom-box-safe1 {display: none!important;} 
#view-stop.readonly .btn-seePackage {display: none!important;}

#view-stop .feed-line.selected .stop-line-inside {min-height: 90px;}