/**
 * @auther Mafuzul Hoque
 * @fileName bootstrap.css
 * @class Bootstrap
 * @package app.whistle
 */

*
{
	box-sizing: border-box;
}

html, body 
{
    height: 100%;
    margin: 0;
    padding: 0;
    font-weight: 100;
    font-family : "-apple-system"						/*for San Francisco in Safari on Mac OS X and iOS, and it targets Neue Helvetica
    													  and Lucida Grande on older versions of Mac OS X*/
    			, "BlinkMacSystemFont"					/*for equivalent for Chrome on Mac OS X*/
    			, "Lato", "Open Sans", "Roboto"			/*for Android and newer Chrome OS*/
    			, "Oxygen", "Ubuntu", "Cantarell"		/*for KDE, Ubuntu and GNOME*/
    			, "Fira Sans"							/*for Firefox OS*/
    			, "Droid Sans"							/*for older versions of Android*/
    			, "Segoe UI"							/*for Windows and Windows Phone*/
    			, "Helvetica Neue", "Lucida Grande"		/*for pre-El Capitan versions of Mac OS X*/
    			, "Helvetica", "Arial", "sans-serif"	/*for others and default*/
    			;
}
body
{
 	background : rgba(0, 0, 0, 0) url("images/background-map.png") repeat-x scroll 0 0 / auto 100%;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* F-OIOGM-CC-A10.0 */
template
{
	display : inline;
	visibility : hidden;
}

ul, li, label
{
	font: inherit;
}
input
{
	text-overflow: ellipsis;
}
input:focus
{
	text-shadow: none;
}
input::placeholder
{
	font-size: 0.9rem;
}
/* F-OrdersWindow-CC-A16.0[h.4] */
input[type="text"][data-role="traverse-list-items"]
{
	width	: 0;
	height	: 0;
	
	margin	: 0;
	padding	: 0;
	
	opacity	: 0;
}
button, input, a, [data-role="page-title"]
{
	outline: none;
}

[data-layer-level="top"]
{
	z-index: 2147483647;
}
[data-layer-level="second"]
{
	z-index: 2147483600;
}
[data-layer="modal"]
{
	position: fixed; 
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0;
	width: auto;
	height: auto;
    overflow: hidden;
}
[data-valid="valid"]
{
}
[data-valid="invalid"]
{
}
[data-container-type="popup"]
{
	display: none;
	height: auto;
	position: absolute;
}
[data-container-type="popup"] ul
{
}
[data-type="order"]
{
}
nav label, nav span, nav button, nav a,
.slider-container label, slider-container span, slider-container button, slider-container a,
.modal-dialog-toolbar label, .modal-dialog-toolbar span, .modal-dialog-toolbar button, .modal-dialog-toolbar a,
[data-role="combobox"] label, [data-role="combobox"] span, [data-role="combobox"] button, [data-role="combobox"] a,
[data-unselectable="ture"], [data-unselectable="ture"] *
{
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	
	/* Introduced in IE 10.*/
	-ms-user-select: none;
	user-select: none;
}

/*input[type="text"]:focus
{
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}*/
/*
[data-animate="true"]
{
	transition: left 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, top 0.5s ease-in-out 0s, bottom 0.5s ease-in-out 0s;
}*/


[data-animation-starts-at="top"][data-animate="true"]
{
	transition: top 0.5s ease-in-out 0s;
}
[data-role="slider-element"][data-animate="true"],
[data-animation-starts-at="left"][data-animate="true"]
{
	transition: left 0.5s ease-in-out 0s;
}
[data-animation-starts-at="right"][data-animate="true"]
{
	transition: right 0.5s ease-in-out 0s;
}

[data-blur="true"], [data-blur="before"]::before, [data-blur="after"]::after
{
	filter: blur(1px); /* brightness(0.99); */
}

/*
* Selection - START
* F-OrdersWindow-CC-A16.0[c.1]
*/
[data-selected="true"]
{
	border: 1.5pt dotted rgba( 0, 0, 0, 0.85 );
	background	: rgba( 0, 0, 0, 0.5 );
}
[data-selected="true"] > *
{
	background: none;
}
/*
* Selection - END
*/

/*
* Filter - START
* F-OrdersWindow-CC-A16.0[c.5,6]
*/
[data-filter="true"]
{
/* 	visibility : visible; */
	display : block;
}
[data-filter="false"]
{
/* 	visibility : hidden; */
	display : none;
}
/*
* Filter - END
*/

#map 
{
    height: 100%;
    visibility : hidden;
}
#map > div:first-child
{
    bottom: -11px;
    height: auto;
    background: transparent;
}

.controls 
{
    height: auto;
    padding: 0;
    margin: 10px 0 0;
    outline: none;
    visibility: visible;
    width: 100%;
}
/*
* slider - START
*/
.slider-container
{
	position: relative;
}
.slider-previous-element, .slider-element, .slider-next-element
{
    position: absolute;
    top: 0;
    height: 100%;
    border : none;
    z-index: 0;
}
.slider-previous-element
{
	left: 0;
	right: auto;
}
.slider-element
{
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.slider-next-element
{
	left: auto;
	right: 0;
}
/*
* slider - END
*/
/**
 * @auther Mafuzul Hoque
 * @fileName app.css
 * @class App
 * @package app.whistle
 */

.templates-container
{
	visibility : hidden;
	position : absolute;
	left : -999999999px;
	top : -999999999px;
	width : 0;
	height : 0;
}

input::placeholder 
{
	font-size: 1.5rem;
	text-shadow: none;
}
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="time"]
{
    font-family: Roboto;
    font-size: 1.5rem;/* 2rem; */
    font-weight: 300;
    height: 37px;
    padding: 0 5px;
    text-overflow: ellipsis;
    width: 100%;
}
input[type="date"], input[type="time"]
{
	-webkit-appearance : none;
	text-overflow: ellipsis;
}

button, input, a, [data-role="page-title"]
{
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

[data-type="number"], [data-type="currency"]
{
	font-family: "Economica","fantasy","Roboto";
}
[data-type="currency"]
{
	color : black;
}
[data-valid="invalid"]
{
	border : 1px solid red;
}
[data-container-type="popup"]
{
	background: inherit;
	box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.75);
}
[data-container-type="popup"] ul
{
	line-height: 0;
}
[data-type="order"]
{
	background: #4d92fe;
	color: inherit;
    margin-top: 5px;
    text-align: right;
}

.row 
{
    height: 40px;
    margin-bottom: 2px;
    position: relative;
    width: 100%;
}
.row:last-child 
{
    margin-bottom: 0;
}
.row-panel 
{
    display: inline-block;
    position: relative;
    width: 100%;
}

/*
* modal-dialog - START
*/
.row.item
{
    height: 40px;
    margin-bottom: 20px;
}
.row.label
{
    height: 25px;
}
.row.may-has-content
{
    height: 4px;
}
.row.group-end
{
	border-bottom: 1px dashed;
    padding-bottom: 15px;
}
.row.label > label/* .modal-dialog .row > label */
{
	vertical-align: bottom;
}
.modal
{
	display: none;
	background: rgba(255, 255, 255, 0.08);
}
.modal .row
{
	display : table;
}
.modal .row > *
{
	display : table-cell;
    margin: 0;
    padding: 0;
}

/*
* modal-dialog - END
*/

/*
* combobox - START
* F-AssignPendingOrderToDriver-CC-A15.0
*/
.row ul
{
	margin-top: 0;
}
.row ul[data-role="combobox-drop-down"]
{
    display : none;
	margin-bottom: 30px; 
}
.row li[data-role="combobox-drop-down"]
{
	height: 0;
	margin-top: -3px;
}
ul[data-role="combobox"], ul[data-role="list"], [data-role="combobox-drop-down"]
{
	list-style: none;
	padding: 0;
}
ul[data-role="combobox"]
{
	display: table; 
	width: 100%; 
}

ul[data-role="combobox-drop-down"]
{
	background: #01acc2;
	box-shadow: 12px 12px 30px rgba( 0, 0, 0, 0.75 );/*0px 5px 20px rgba( 0, 0, 0, 0.75 );*//* 0px 2px 12px rgba( 0, 0, 0, 0.3 ); */
	border: 1px solid;
    border-top: 1px dotted;
    font-size: inherit;
}
ul[data-role="combobox-drop-down"] li[data-role="list-item"] 
{
    border-bottom: 1px dotted;
    font-size: 0.76rem;
    height: auto;/*40px;*/
}
ul[data-role="combobox-drop-down"] .row:last-child 
{
    border-bottom: medium none;
}
[data-role="combobox-selected-label"] 
{
    border: 1px solid;
    cursor: pointer;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.5 );
    box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.5 );
}
[data-role="combobox-selected-label"]::after 
{
    content: "\25BC";
    float: right;
}
[data-role="combobox-selected-label"][data-valid="invalid"]
{
	border : 1px solid red;
}
ul[data-role="list"] li[data-role="list-item"]
{
	height: 50px;
	margin-bottom: 10px;
}
li[data-role="list-item"]
{
	padding: 9px 0px;
}
li[data-role="list-item"] label
{
	text-align: left;
}

li[data-role="list-item"] input[type="radio"], 
li[data-role="list-item"] input[type="checkbox"] 
{
    opacity: 0;
    position: absolute;
    width : 0;
    height : 0;
}
li[data-role="list-item"] input[data-role="checkbox"] + label 
{
	border: 1px solid;
	cursor: pointer;
	padding: 0 15px;
	line-height: 1;
	vertical-align: middle;
}
li[data-role="list-item"] input[data-role="checkbox"] + label::before 
{
	border: 1px solid;
	display: block;
	float: left;
	height: 20px;
	/* line-height: 1.15; *//*1.2;*/
	width: 20px;
	margin-right: 10px;/* 4px; */
	padding-right: 2px;
	padding-top: 1px;
	text-align: center;
	
	content: "";
}
li[data-role="list-item"] input[data-role="checkbox"]:checked + label::before 
{
	font-size: 1.25rem;
	font-weight: bold;/*added @ 22 JUn 2017*/

	content : "\2713";
}
/*
li[data-role="list-item"] input[data-role="checkbox"] + label::after 
{
}
*/
li[data-role="list-item"] input[data-role="checkbox"] + label[data-fees]::after 
{
	float: right;
	color : black;
	font-family: "Economica","fantasy","Roboto";
	
	content: "\0024" attr(data-fees);
}
/*
* combobox & list - END
*/
/**
 * @auther Mafuzul Hoque
 * @fileName driver-status.css
 * @class DriverStatus
 * @package app.whistle
 * @feature F-OrdersWindow-CC-A16.0[h.5]
 */
[data-status="" i] [data-role="status"],
[data-status="OFFLINE" i] [data-role="status"],
[data-role="status"][data-status="OFFLINE" i],
[data-role="status"][data-status="" i]
{
	background-color: rgba(255,0,0,0.85);
	color : white;
}

[data-status="FREE" i] [data-role="status"],
[data-role="status"][data-status="FREE" i]
{
	background-color: rgba(245,245,245,0.85);
	color : black;
	text-shadow: 1px 1px 4px rgba(95, 95, 95, 0.95);
}

[data-status="ON_PICKUP" i] [data-role="status"],
[data-role="status"][data-status="ON_PICKUP" i]
{
	background-color: rgba(255,255,0,0.85);
	color : black;
}

[data-status="ON_DROP_OFF" i] [data-role="status"],
[data-role="status"][data-status="ON_DROP_OFF" i]
{
	background-color: rgba(0,128,0,0.85);
	color: white;
}

[data-status="ON_BREAK" i] [data-role="status"],
[data-role="status"][data-status="ON_BREAK" i]
{
	background-color: rgba(128,128,128,0.85);
	color: white;
}
 /**
 * @auther Mafuzul Hoque
 * @fileName info-box-template.css
 * @class BaseInfoBox
 * @package app.whistle.map.infobox
 * @feature F-GDSANAPDPOGM-CC-A5.0
 */
/* The location pointed to by the popup tip. */
.info-box-anchor
{
	height: 0;
	position: absolute;
	/* The max width of the info window. */
	/*width: 200px;*/
}
/* The bubble is anchored above the tip. */
.info-box-frame
{
	position: absolute;
	width: 100%;
	bottom: 8px; /* TIP_HEIGHT */
	left: 0;
}
/* Arrow */
.info-box-frame::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	
	/* Center the tip horizontally. */
	transform: translate(-50%, 0);
	
	/* The tip is a css triangle */
	width: 0;
	height: 0;
	/* The tip is 8px high, and 12px wide. */
	border-left: 6px solid transparent;/* Arrow Width */
	border-right: 6px solid transparent;/* Arrow Width */
	border-top: 8px solid white; /* Arrow Height */
}


.info-box-contentpane
{
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -100%);
	/* Style the info window. */
	background-color: rgba(255,255,255,0.85);/* white; */
	padding: 5px;
	border-radius: 5px;
	font-family: sans-serif;
	overflow-y: auto;
	max-height: 60px;
	box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
}

/*Need to implement in future - START */
.info-box-anchor[data-arrow="bottom"] .info-box-contentpane
{
	transform: translate(-50%, -100%);
}
.info-box-anchor[data-arrow="up"] .info-box-contentpane
{
	transform: translate(-50%, -100%);
}
.info-box-anchor[data-arrow="left"] .info-box-contentpane
{
	transform: translate(-50%, -100%);
}
.info-box-anchor[data-arrow="right"] .info-box-contentpane
{
	transform: translate(-50%, -100%);
}

.info-box-anchor[data-arrow="bottom"] .info-box-frame::after
{
	border-left: 6px solid transparent;/* Arrow Width */
	border-right: 6px solid transparent;/* Arrow Width */
	border-top: 8px solid white; /* Arrow Height */
}
.info-box-anchor[data-arrow="up"] .info-box-frame::after
{
	border-left: 6px solid transparent;/* Arrow Width */
	border-right: 6px solid transparent;/* Arrow Width */
	border-bottom: 8px solid white; /* Arrow Height */
}
.info-box-anchor[data-arrow="left"] .info-box-frame::after
{
	border-top: 6px solid transparent;/* Arrow Width */
	border-bottom: 6px solid transparent;/* Arrow Width */
	border-right: 8px solid white;/* Arrow Height */
}
.info-box-anchor[data-arrow="right"] .info-box-frame::after
{
	border-top: 6px solid transparent;/* Arrow Width */
	border-bottom: 6px solid transparent;/* Arrow Width */
	border-left: 8px solid white;/* Arrow Height */
}

.info-box-anchor[data-arrow="none"] .info-box-frame
{
	bottom: 0;
}
.info-box-anchor[data-arrow="none"] .info-box-frame::after
{
	display: none;
}
/*Need to implement in future - END */
/**
 * @auther Mafuzul Hoque
 * @fileName app-version.css
 * @class AppVersion
 * @package app.whistle
 * @feature F-EGM
 * @update U-UAppV-CC-A10.1, U-UAV-CC-A10.3
 */

/*U-UAV-CC-A10.3*/
#app-version
{
	display: flex;
	width: 100%;
	justify-content: center;
	position: fixed;
	bottom: -27px;
	visibility: hidden;
	z-index: 99999999999;
}
#app-version > *
{
	background: rgba(0,0,0,0.5);
	border-radius: 5pt;
	bottom: 30px;
	box-shadow: 0px 0px 6px rgba( 0, 0, 0, 0.9 );
	color: white;
	font-size: 0.6rem;/* 0.95rem; */
	letter-spacing: 1pt;
	padding: 2px 4px;
	position: absolute;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
	
	/*U-UAppV-CC-A10.1*/
	text-align: center;
}

body[data-day-status="NIGHT" i] #app-version > * 
{
	background: rgba( 150, 150, 150, 0.5 );
	box-shadow: 0px 0px 6px rgba( 50, 50, 50, 0.9 );
	text-shadow: 1px 1px 2px rgba( 50, 50, 50, 0.75 );
}

/*U-UAppV-CC-A10.1*/
#app-version a
{
	color: #f6f60c;/* inherit; */
	font-size: 0.5rem;
	font-weight: bold;
	text-transform: uppercase;
	/* border-bottom: 1px solid darkgray; */
}

/*U-UAppV-CC-A10.1*/
#app-version hr
{
	margin: 2px 0;
}
/**
 * @auther Mafuzul Hoque
 * @fileName notifications.css
 * @class AppVersion
 * @package app.whistle
 * @feature F-ONOGM-CC-A8.0
 */

#notifications
{
	/* visibility: hidden; */
	
	display : flex;
	flex-flow: row wrap;
	align-items : center;
	justify-content : space-evenly;
	
	position: fixed;
	bottom: 13px;
	right: 0;
/* 	width: 400px;
	height: 100px;
 */	
	/* background-color : rgba( 0, 0, 0, 0.95 ); */
}

#notifications > *:not(audio)
{
	position: relative;
	
	display : flex;
	align-items : center;
	justify-content : center;
	
	border-radius : 50%;
	box-shadow: 0px 0px 6px rgba( 0, 0, 0, 0.9 );
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
	
	width: 50px;
	height: 50px;
	
	font-weight : bold;
	font-size : 1.2rem;
	
	margin: 7px;
}

#notifications > *:before
{
	content : attr(data-total);
}

#notifications > [data-total=""],
#notifications > [data-total="0"]
{
	display : none;
}

#notifications > [data-type="pending" i]
{
	background-color : rgba( 255, 255, 0, 0.5 );
}

#notifications > [data-type="unaccepted" i]
{
	background-color : rgba( 255, 0, 0, 0.5 );
}

#notifications > [data-type="accepted" i]
{
	background-color : rgba( 0, 255, 0, 0.5 );
}

#notifications > [data-type="completed" i]
{
	background-color : rgba( 255, 255, 255, 0.5 );
}

#notifications > [data-type="pending" i]:after,
#notifications > [data-type="unaccepted" i]:after
{
	position: absolute;
	
	animation: notification-ripple 2.5s infinite ease-in-out 0.1s;
	
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: inherit;
	box-shadow: inherit;
	
	z-index : -999;
}

@keyframes notification-ripple
{
	  0.0%{ opacity : 0.0; transform: scale(1.0); }
	  7.5%{ opacity : 0.1; }
	 50.0%{ opacity : 1.0; }
	100.0%{ opacity : 0.0; transform: scale(2.0); }
}
/**
 * @auther Mafuzul Hoque
 * @fileName menu.css
 * @class AppVersion
 * @package app.whistle
 * @feature F-AddMenu-CC-A12.0
 */

#menu-bar
{
	/* visibility: hidden; */
	
	display : flex;
	flex-flow: row wrap;
	align-items : center;
	justify-content : space-evenly;
	
	position: fixed;
	bottom: 13px;
	left: 0;
/* 	width: 400px;
	height: 100px;
 */	
	/* background-color : rgba( 0, 0, 0, 0.95 ); */
}

#menu-bar > label[data-role="menu-item"]
{
	position: relative;
	
	display : flex;
	align-items : center;
	justify-content : center;
	
	border-radius : 50%;
	box-shadow: 0px 0px 6px rgba( 0, 0, 0, 0.9 );
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
	
	width: 50px;
	height: 50px;
	
	font-weight : bold;
	font-size : 1.2rem;
	
	margin: 7px;

    background-color: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

#menu-bar > label[for="menu"],
#menu-bar > nav
{
	color : white;
	background-color : rgba( 0, 0, 255, 0.75 );
	font-size: 1.5rem;
}
/*F-OrdersWindow-CC-A16.0[h.6]*/
#menu-bar > label[for="menu"]::before
{
	content: "\2261";
	
	margin-top: -3.8pt;
}
#menu-bar > input[id="menu"]
{
	opacity : 0;
}

#menu-bar > input[id="menu"]:checked+nav[id="menu-dialog"]
{
	left: 5px;
}
#menu-bar a
{
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
}
/**
 * @auther Mafuzul Hoque
 * @fileName driver-card.css
 * @class DriverCard
 * @package app.whistle.map.infobox
 * @feature F-GDSANAPDPOGM-CC-A5.0, F-AssignPendingOrderToDriver-CC-A15.0
 */

.info-box-anchor[data-role="driver-card"] .info-box-contentpane
{
	padding: 0;
	/* mix-blend-mode: difference; */
}
/*F-AssignPendingOrderToDriver-CC-A15.0[h.2] - START*/
/*
.info-box-anchor[data-status="OFFLINE" i]
{
	/ * display	: none; * /
}
.info-box-anchor[data-status="OFFLINE" i] .info-box-contentpane
{
	background-color: rgba(255,0,0,0.85);
	color: rgba(255,255,255,0.85);
}
.info-box-anchor[data-status="FREE" i] .info-box-contentpane,
.info-box-anchor[data-status="FREE" i] .card [data-role="profile-image"]
{
	background-color: rgba(255,255,255,0.85);
}
.info-box-anchor[data-status="ON_BREAK" i] .info-box-contentpane
{
	background-color: rgba(128,128,128,0.85);
	color: rgba(255,255,255,0.85);
}
.info-box-anchor[data-status="ON_PICKUP" i] .info-box-contentpane
{
	background-color: rgba(255,255,0,0.85);
}
.info-box-anchor[data-status="ON_DROP_OFF" i] .info-box-contentpane
{
	background-color: rgba(0,255,0,0.85);
}
*/
/*F-AssignPendingOrderToDriver-CC-A15.0[h.2] - END*/

/*F-ImplDataChangeListener-CC-A13.0 - START - [h.3]*/
.info-box-anchor .info-box-contentpane
{
	border-radius: 3pt;
}
.info-box-anchor[data-profile-load="error"] .info-box-contentpane
{
/* 	border-radius: 25px 3pt 3pt 25px; */
	border-top-left-radius		: 25px;
	border-bottom-left-radius	: 25px;
}
/*F-ImplDataChangeListener-CC-A13.0 - END*/
.info-box-contentpane[data-overflow="hidden"]
{
	overflow: hidden;
}

[data-role="profile-image"]
{
	/* margin: 5px; */
}
[data-role="profile-image"][data-load="error"] img
{
	display: none;
}
[data-role="profile-image"]:not([data-load="error"]) svg
{
	display: none;
}

/* [data-role="profile-image"][data-load="error"]::after 
{
	content: " ";
	width: 100px;
	height: 100px;
	mask: url('images/themes/default/profile-picture.svg') no-repeat;
}

[data-day-status="DAY" i] [data-role="profile-image"][data-load="error"]::after 
{
	background-color: rgb(245, 245, 245);
}

[data-day-status="NIGHT" i] [data-role="profile-image"][data-load="error"]::after 
{
	background-color: rgb(253, 217, 0);
}
*/
[data-day-status="DAY" i] [data-role="profile-image"][data-load="error"] svg 
{
	fill: rgb(245, 245, 245);
}

[data-day-status="NIGHT" i] [data-role="profile-image"][data-load="error"] svg 
{
	fill: rgb(253, 217, 0);
}

[data-role="profile-image"] > *
{
	height: 50px;
}
[data-role="profile-image"][data-load="error"] svg
{
/*	width: 50px;
	height: 50px;
	margin: 0 auto;
*/
	width: 50px;
	height: inherit;
/*	padding: 2px;*/	/*F-ImplDataChangeListener-CC-A13.0[h.3]*/
}

[src*="profile-picture.png"]
{
	border: 1.5pt solid black;
}

[data-role="profile-name"]
{
	width: 75px;
	font-size: 1.1rem;
	font-weight: 300;
	margin: auto;
	letter-spacing: -1pt;
    padding: 0 3px;
    text-align: left;
}
/* 
[data-role="profile-name"]
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
 */
[data-role="profile-phone"]
{
	border-left: 1px solid white;
	background: rgba(0, 255, 255, 0.75);
}
[data-role="profile-phone"]:hover
{
	background: cyan;
}
[data-element="phone"]
{
	display: block;
	height: 100%;
	width: 45px;
}
[data-element="phone"] a
{
	text-shadow: 0px 0px 10px white;
	line-height: 1.9;
	display: inline-block;
	text-decoration: none;
	font-size: 2rem;
	height: 100%;
	width: 100%;
}
[data-role="profile-info"]
{
	border: none;
	border-left: 1px solid;
	padding: 4px 10px;
}
[data-align="center"] [data-role="profile-info"]
{
	padding: 4px 0;
}

/* [data-role="profile-info"]:last-child
{
	border-left: 1px solid;
}
 */
[data-role="profile-heading"]
{
}

[data-role="profile-value"]
{
	font-size: 0.8rem;
	font-weight: 300;
}

[data-info="driver-id"] [data-role="profile-heading"],
[data-info="taxi-id"] [data-role="profile-heading"]
{
	line-height : 23px;
}

.card
{
	display: flex;
	flex-flow: row;/*  wrap; */
	margin: auto;
	width: 100%;
	height: 50px;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.95);
}
.card > *
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

[data-day-status="DAY" i] .card
{
	background-color: rgba(25, 23, 23, 0.75);
	box-shadow: 1px 1px 48px;
}

[data-day-status="DAY" i] .card *:not(img)
{
	color: rgb(245, 245, 245);
	border-color: rgba(255, 255, 255, 0.5);
}

[data-day-status="NIGHT" i] .card
{
	background-color: rgba(25, 23, 23, 0.9);
	box-shadow: 0px 0px 4px rgba(225, 195, 0, 0.5), 0px 0px 100px 10px rgba(225, 195, 0, 0.5);/* 0px 0px 100px 10px #8b8b45; *//* #f5f5e7; */
}

[data-day-status="NIGHT" i] .card *:not(img)
{
	color: rgb(253, 217, 0);
	border-color: rgba(210, 210, 210, 0.5);
}
.card[data-align="center"]
{
	text-align: center;
}
/*F-ImplDataChangeListener-CC-A13.0 - START - [h.3,4]*/
.card [data-role="profile-image"][data-load="error"]
{
	padding : 1px;
}
[data-role="profile-image"][data-load="error"] svg
{
/* 	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%; */
}
[data-role="profile-image"][data-load="error"] svg [data-role="bg"]
{
	fill : white;
}
[data-role="profile-image"][data-load="error"] svg [data-role="top-arc"]
{
	
}
[data-role="profile-image"][data-load="error"] svg [data-role="human-figure"]
{
	
}
/*F-ImplDataChangeListener-CC-A13.0 - END*/

.card [data-role="profile-name"]
{
	flex: 2;
}
.card [data-role="profile-info"]
{
	/* flex-direction: column; */
	flex: 1;
	margin: auto;
	padding: 0 3px;
	white-space: nowrap;
}

/* To prevent breaking of the name, of the driver, into 3 lines */
.card [data-info="status"] [data-role="profile-value"]
{
	padding: 0 5px;
}

/* .card [data-info="driver-id"]
{
	display: none;
} */
.card [data-state="none" i],
.card [data-state="hide" i]
{
	display: none;
}
.card [data-state="show" i],
.card:hover [data-state="hide" i]
{
	display: flex;
}

/*Hiding Driver ID*/
/* .card [data-role="profile-info"]:last-child */
/* .card [data-info="driver-id"]
{
	display: none;
} */

.card [data-value]::after
{
	content : attr(data-value);
}

/*F-ImplDataChangeListener-CC-A13.0[h.3]*/
.info-box-anchor[data-role="driver-card"] [data-role="profile-image"] img
{
	border-radius: 2pt 3pt 3pt 2pt;
}
/**
 * @auther Mafuzul Hoque
 * @fileName dialog.css
 * @class AbstractDialog
 * @package app.whistle.component.dialog
 */

.modal-dialog
{
	display: none;
	/* padding: 25px; */
	color: white;
	background-color: rgba(65, 182, 197, 0.5);/* rgba(0,0,0,0.5); */
	border: 2px solid rgba(255,255,255,0.5);
    overflow-x: hidden;
    overflow-y: hidden;/*auto;*/
}
.modal-dialog [data-role="modal-dialog-container"]
{
	display : flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.modal-dialog [data-role="modal-dialog-container"]::before
{
	content: "";
	background-image: url("images/bg-blur.png");
/*	background-size: cover; */
	position: fixed;
	top: -5%;
	left: -5%;
	right: 0;
	bottom: 0;
	width: 110%;
	height: 110%;
	display: block;
	z-index: -1;
}
.modal-dialog [data-role="modal-dialog-container-pane"]
{
	background-color: #41b6c5;
	box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog .row
{
	display : table;
    height: 30px;
}

.modal-dialog [data-role="modal-dialog-body"]
{
    padding: 25px;
}

.modal-dialog .row:empty
{
    height: 10px;
}
.modal-dialog .row > *
{
	display : table-cell;
    font-size: 1.5rem;/* 1.15rem; */
    margin: 0;
    padding: 0;
}
.modal-dialog .row > input
{
	font: inherit;
    padding: 0 5px;
    font-size: 1.75rem;
}
.modal-dialog .row > textarea, 
.modal-dialog .row > button
{
/*	width: 98%;
    height: 33px;*/
    height: 33px;
    padding: 0 5px;
    width: 100%;/*97%;*/
}
.modal-dialog .row > textarea
{
	height: 100px;
	min-height: 100px;
	max-height: 200px;
	resize: vertical;
}
.modal-dialog .row.bottom
{
	display: block;
	height: 65px;
}
.modal-dialog .row.footer
{
	position: fixed; 
	left: 0; 
	right: 0; 
	bottom: 0;
	height: 55px;
}
.modal-dialog-page > .row:first-child
{
	margin: 10px 0;
}
.modal-dialog-toolbar
{
	position: fixed; 
	left: 0px; 
	right: 0px; 
	top: 0px;
	text-align: left;/*center;*//*right;*/ 
	z-index: 1; 
	background: rgba(0, 0, 0, 0.57); 
	box-shadow: 0 0 9px rgba(0, 0, 0, 0.75);
}
.modal-dialog .modal-dialog-page
{
	display : none;
}
.modal-dialog-toolbar label
{
    display: inline-block;
    margin-top: 7px;
    position: absolute;
    width: 100%;
	z-index: -1;
	text-align: center;
}
.modal-dialog-toolbar label[id], .modal-dialog-page label[id], #contact-info-dialog label[id]
{
	font-size : 1.5rem;
    font-style: italic;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.row .summary-line
{
	height: 80px;/*70px;*/
}

[data-role="modal-dialog-container"] .modal-dialog-toolbar,
[data-role="modal-dialog-container"] .modal-dialog-toolbar label,
[data-role="modal-dialog-container"] .row.footer
{
	position: initial;
}

[data-role="modal-dialog-container"] .modal-dialog-toolbar label
{
	margin: 7px 0;
}

.modal-dialog .footer .submit-button,
.submit-button	/*F-AssignPendingOrderToDriver-CC-A15.0*/
{
	width: 100%;/*98.8%;*/ 
	height: 55px;
	color: inherit;
	background-color: rgba(102, 174, 232, 0.9);/*#66afe9;*/
	box-shadow: 0 5px 18px black;
    border: none;
    outline: 0 none;
    cursor: pointer;
    font-size: 1.5em;
}
.modal-dialog .footer .submit-button[data-button-status="active"]::after
{
	content : "\2192";
	font-family: -apple-system;
}
.modal-dialog .footer .submit-button[data-button-status="inactive"]
{
	background-color: rgba(131, 164, 191, 0.9);/*#83a4bf;*/
}
.modal-dialog .footer .submit-button[data-button-status="inactive"]::after
{
	content : "\274C";
}

.submit-button::after
{
    margin-left: 5px;
}

@media ( orientation : landscape )
{
	.row .summary-line
	{
		height: 50px;/*70px;*/
	}
}
/**
 * @auther Mafuzul Hoque
 * @fileName work-in-progress-dialog.css
 * @class WorkInProgressDialog
 * @package app.whistle.component.dialog
 */

#work-in-progress-dialog
{
/*	background : rgba(255, 255, 255, 0.08) url("images/background-map.png") repeat-x scroll 0 0 / auto 100%;*/
    display: none;
}
#work-in-progress-dialog .row
{
	height: 100%;
    text-align: center;
}  
#work-in-progress-dialog .row div
{
	vertical-align: middle;
}  

#work-in-progress-dialog img
{
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: workingInProgress;
    animation-timing-function: ease-in-out;
    content: "";
    z-index: 1;
    vertical-align: middle;

	/*iPhone fix*/
    width: 86px;
    height: 86px;
    display: inline-block;
    background-image: url('images/logo_64_45.png');
}
@keyframes workingInProgress 
{
	0% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	24.99% 
	{
	    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
	}
	25% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	49.99% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	}
	50% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	74.99% 
	{
	    transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg);
	}
	75% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	}
	100% 
	{
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}
/**
 * @auther Mafuzul Hoque
 * @fileName auth-dialog.css
 * @class AuthDialog
 * @package app.whistle.component.dialog
 */

#auth-dialog-page
{
	display : table-cell;
}

#auth-dialog .submit-button::after 
{
    margin-left: 15px;
}

#auth-dialog .submit-button::before
{
	content : attr(data-text);
}
/**
 * @auther Mafuzul Hoque
 * @fileName password-change-dialog.css
 * @class AuthDialog
 * @package app.whistle.component.dialog
 */

#password-change-dialog-page
{
	display : table-cell;
}

#password-change-dialog .submit-button::after 
{
    margin-left: 15px;
}

#password-change-dialog .submit-button::before
{
	content : attr(data-text);
}
/**
 * @auther Mafuzul Hoque
 * @fileName menu-dialog.css
 * @class MenuDialog
 * @package app.whistle.component.dialog
 * @feature F-AddMenu-CC-A12.0
 */

#menu-dialog
{
	bottom: 70px;
	left: -1000%;
	display : block;
}
#menu-dialog .row 
{
	border-bottom: 1px dotted;
	display: table;
	width: 100%;
}
#menu-dialog .row:last-child
{
	border-bottom: none;
}
#menu-dialog .row > *
{
	display: table-cell;
	vertical-align: middle;
}
/*#menu:not(:focus) + #menu-dialog
{
	display: none;
}*/
#menu:focus
{
	color: cyan;
}
/*#menu:blur #menu-dialog
{
	display: none;
}*/
#menu-dialog ul, #menu-bar ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	background: inherit;
	   
	display : flex;
	justify-content: center;
	flex-flow: column;
}
#menu-dialog ul li
{
	border-top: 1px dotted;
	height : 30px;
	
	display: flex;
	align-items: center;
}
#menu-dialog ul li:first-child
{
	border-top: none;
}
#menu-dialog ul a
{
	color: inherit;
	display: block;
	width: 150px;/*115px;*/
	outline: none;
	font-size: 1.15rem;/*1.5rem;*/
	font-weight: bold;
	margin : 5px;
}
#menu-dialog ul a:active/*focus*/
{
	color: cyan;
}

[data-device-os="iOS" i] #menu-dialog ul a
{
	font-size: 1.5rem;
}

[data-device-os="iOS" i] #menu-dialog
{
	bottom: 50px;
}

@media ( orientation : portrait )
{
	/*
	* iPhone 4 - portrait
	*/
	@media ( max-width : 320px ) and ( max-height : 480px )
	{
		#menu-dialog ul a
		{
			font-size: 0.9rem;
		}
	}
}

@media ( orientation : landscape )
{
	#menu-dialog
	{
		/* width: 312px; */
	}
	#menu-dialog ul li:first-child
	{
		/* border-top: 1px dotted; */
	}
}/**
 * @auther Mafuzul Hoque
 * @fileName order-info-window.css
 * @class OrderInfoWindow
 * @package app.whistle.map.infowindow
 * @feature F-OIOGM-CC-A10.0, F-OrdersWindow-CC-A16.0[h.5]
 */
[data-role="order-card-window"]
{
	max-width: 425px;
}

[data-role="order-card-window"] [data-element]::before
{
	margin: 0 9px 0 0;
}

[data-role="order-card-window"] a
{
	text-decoration: none;
}

[data-role="order-card-window"] a::after
{
	line-height: 0;
}

[data-role="order-card-window"] a[data-element]::after
{
	content: attr(data-value);
}

[data-role="order-card-window"] a[href*="mailto"]::before
{
	content: "\2709";
	font-size: 1.5rem;
}

[data-role="order-card-window"] a[href*="tel"]::before
{
	content: "\1F4DE";
}

[data-role="order-card-window"] label
{
	display: inline-block;
	font-weight: bold;
	width: 70px;
}

[data-role="order-card-window"] .card
{
	justify-content: space-between;
}

[data-role="order-card-window"] div span:nth-child(2)
{
	margin: 0 3px;
}

[data-role="order-card-window"] [data-element="status"]
{
	font-style: italic;
	font-weight: bold;
}

/* Order Card - START */
[data-role="order-card"]
{
	min-height: 85px;
}

[data-role="order-card"][data-theme="true"]
{
	padding : 0 5px;
	border-radius: 5px;
}

[data-role="order-card"][data-theme="true"] [data-role="destination"]
{
	margin-top : 1px;
}

[data-role="order-card"] .card
{
	flex-flow: row wrap;
}

[data-role="order-card"] [data-role="passengers"]
{
	flex: 1 auto;
	font-size: 1.5rem;
}

[data-role="order-card"] [data-role="origin"],
[data-role="order-card"] [data-role="destination"]
{
	width: 100%;
	height: auto;
}

[data-role="order-card"] [data-role="destination"]
{
	margin-top: 4px;
}

[data-role="order-card"] [data-element="fare"]
{
	font-size: 1.5rem;
	margin-right: 2px;
}

[data-role="order-card"] [data-element="fare"]::before
{
	content: "\0024";
	margin: 0 1px 0 0;
}

[data-role="order-card"] [data-element="fare"],
[data-role="order-card"] [data-element="passengers"]
{
	font-weight: bold;
}

[data-role="order-card"] [data-element="passengers"]::before
{
	content: "\1F46A";
}
/* Order Card - END */

/* Driver Card - START */
[data-role="driver-card"]
{
	display: none;
}

[data-role="driver-card"][data-has="true"]
{
	display: block;
}

[data-role="driver-card"] [data-role="name"],
[data-role="driver-card"] [data-role="taxi-company-id"]
{
	flex: 2 auto;
}

[data-role="driver-card"] [data-role="name"]
{
	flex: 2 auto;
}

[data-role="order-card-window"] [data-role="driver-card"] .card > *:not([data-role="status"])
{
	margin-right: 5px;
}

[data-role="driver-card"] [data-role="profile-image"] img
{
	border-radius: 5px;
}

[data-role="driver-card"] [data-role="profile-image"] img::before,
[data-role="driver-card"] [data-role="profile-image"] img::after
{
	content: "";
}

[data-role="driver-card"] [data-role="taxi-company-id"]
{
	white-space: nowrap;
}

[data-role="driver-card"] [data-element="id"]::before
{
	content: "\1F194";
}

[data-role="order-card-window"] [data-role="driver-card"] [data-element="taxi"]::before
{
	content: "\1F696";
}

[data-role="driver-card"] [data-element="company"]::before
{
	content: "\1F3E0";
}
[data-role="driver-card"] [data-role="email-phone"]
{
	text-align: left;
}

/*F-AssignPendingOrderToDriver-CC-A15.0[h.2] - START*/
.card [data-role="status"],
[data-role="driver-card"] [data-role="status"]
{
	transition: background-color 1s ease-in-out, color 1s ease-in-out;
	border-radius: 5px;
	text-transform: capitalize;
	text-align: center;
	letter-spacing: 1px;
	margin: 0 0 0 25px;
}
/*F-AssignPendingOrderToDriver-CC-A15.0[h.2] - END*/
/* Driver Card - END */

/* Client Card - START */
[data-role="client-card"]
{
	display: none;
}
[data-role="client-card"][data-has="true"]
{
	display: block;
}

[data-role="client-card"] [data-role="profile-image"] img
{
	border-radius: 5px;
}

[data-role="client-card"] [data-role="profile-image"] img::before,
[data-role="client-card"] [data-role="profile-image"] img::after
{
	content: "";
}

[data-role="client-card"] [data-role="status"]
{
	text-align: right;
}

[data-role="client-card"] [data-role="name"],
[data-role="client-card"] [data-role="email-phone"]
{
	flex: 1 auto;
}
[data-role="client-card"] [data-role="email-phone"]
{
	text-align: left;
}

[data-role="client-card"] [data-role="status"]
{
	margin: 0 0 0 25px;
}
/* Client Card - END */

/* Assign Card - F-AssignPendingOrderToDriver-CC-A15.0 - START */
[data-role="driver-assign"]
{
	display: none;
	color : white;
}
[data-role="driver-assign"][data-has="true"]
{
	display: block;
}

[data-role="driver-assign"] [data-role="combobox"]
{
	background: #01acc2;
	height: 42px;
}

/*item height 70px + 20px for indicate of `more` - START*/
[data-role="driver-assign"] li[data-role="combobox-drop-down"][data-show-items="2"]
{
	max-height : 160px;
}
[data-role="driver-assign"] li[data-role="combobox-drop-down"][data-show-items="3"]
{
	max-height : 230px;
}
[data-role="driver-assign"] li[data-role="combobox-drop-down"][data-show-items="4"]
{
	max-height : 300px;
}
/*item height 70px + 20px for indicate of `more` - END*/

[data-role="driver-assign"] li[data-role="combobox-drop-down"]
{
	justify-content: flex-start;
	
	overflow: hidden;
	overflow-y: auto;
	
	box-shadow: 12px 12px 30px rgba( 0, 0, 0, 0.75 );
}
[data-role="driver-assign"] ul[data-role="combobox-drop-down"]
{
	margin: 0;
}

[data-role="driver-assign"] ul li label
{
	width: 100%;
}
[data-role="driver-assign"] [data-role="combobox-selected-label"]
{
	display: table-cell;
	height: 40px;
	padding: 0 15px;
	padding-top: 9px;

	font-size: 1.25rem;
	font-weight: 400;
	
	border : none;
}
[data-role="driver-assign"] [data-role="combobox"] .selectable-option
{
	display: flex;
	align-items: center;
}
[data-role="driver-assign"] [data-role="combobox"] .card
{
	flex-grow: 1;
	
	width : auto;
}
[data-role="driver-assign"] [data-role="combobox"] li[data-role="list-item"] input[data-role="checkbox"] + label
{
	padding: 0 4px;
	border : none;
}
[data-role="driver-assign"] [data-role="combobox"] li[data-role="list-item"] input[data-role="checkbox"] + label,
[data-role="driver-assign"] [data-role="combobox"] li[data-role="list-item"] input[data-role="checkbox"] + label *
{
	cursor: pointer;
}
[data-role="driver-assign"] [data-role="combobox"] li[data-role="list-item"] input[data-role="checkbox"] + label::before
{
	margin-right: 5px;
}

[data-role="driver-assign"] [data-role="name"],
[data-role="driver-assign"] [data-role="email-phone"]
{
	flex: 1 auto;
	text-align: left;
	line-height: initial;
	font-weight: 300;
}
[data-role="driver-assign"] [data-role="email-phone"] [data-element="phone"]
{
	width : auto;
}

[data-role="driver-assign"] [data-role="taxi-company-id"]
{
	flex: 1 auto;
	white-space: nowrap;
	
	line-height: initial;
}

[data-role="driver-assign"] [data-element="id"]::before
{
	content: "\1F194";
}

[data-role="order-card-window"] [data-role="driver-assign"] [data-element="taxi"]::before
{
	content: "\1F696";
}

[data-role="driver-assign"] [data-element="company"]::before
{
	content: "\1F3E0";
}

[data-role="driver-assign"] .card [data-role="status"]
{
	margin: 0;
	padding : 0 2px;
}

[data-role="driver-assign"] .card [data-role="status"] label
{
	width: 57px;
	
	text-align: center;
}

#driver-assign-apply-button
{
	height: 45px;
	margin-top : 10px;

	box-shadow: none;
}
#driver-assign-apply-button::before
{
	content: attr(data-text);
	
	font-size: 1.5em;
}

#driver-assign-apply-button[data-button-status="inactive"]
{
	background-color: rgba(131, 164, 191, 0.9);/*#83a4bf;*/
}
.
/* Assign Card - END */