/** ==============================================
 * BUS DETAILS START
 * ==============================================
 */

img.bus-icon {
	position: relative;
	width: 23px;
	top: 2px;
	left: 3px;
	margin: 0px 3px;
}

.trip-type {
	position: absolute;
	top: 23px;
	right: 76px;
	cursor: pointer;
}

	.trip-type img {
		height: 27px;
		width: 27px;
	}

.bus-details-sidebar-btn {
	position: absolute;
	bottom: 96px;
	right: -17px;
	height: 270px;
	font-weight: 500;
	font-size: 18px;
	text-align: center;
	background-color: #f5f5f5;
	writing-mode: vertical-lr;
	transform: scale(-1, -1);
	border-radius: 10px;
	padding: 0 2px;
	cursor: pointer;
	z-index: 2000;
}

	.bus-details-sidebar-btn::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 700;
		content: "\f101";
		transform: rotate(180deg);
		position: absolute;
		bottom: 10px;
		left: 1px;
	}

	.bus-details-sidebar-btn span {
		font-weight: 600;
	}

#BusDetailModal {
	overflow-x: hidden !important;
}


.bus-details-panel {
	position: fixed;
	top: 189px;
	right: 0;
	width: 21em;
	text-align: -webkit-center;
	height: auto;
	min-height: 360px;
	transition: 0.3s ease-out;
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	background: #fff;
	border: 1px solid #1a4d10;
	padding: 15px;
}

.bus-header {
	display: flex;
	justify-content: space-between;
}

.bus-details-btn-close {
	font-size: 50px;
	cursor: pointer;
	color: #094FB9;
}

.bus-header .title {
	position: relative;
	bottom: 6px;
	right: 3px;
	font-size: 35px;
	font-weight: 600;
}

.bus-header .count {
	color: #094FB9;
	position: relative;
	bottom: 8px;
	font-size: 35px;
	font-weight: 600;
}

.bus-header .bus-id {
	margin-right: 20px;
}

	.bus-header .bus-id img {
		width: 30px;
		height: 30px;
	}

	.bus-header .bus-id span {
		font-size: 25px;
		color: #ccc;
		border-bottom: 1px dashed #ccc;
		font-weight: 500;
		position: relative;
		top: 2px;
		left: 2px;
	}

.add-btn {
	background: linear-gradient(0deg, rgba(39, 174, 12, 1) 0%, rgba(70, 199, 44, 1) 100%);
	width: 40px;
	height: 40px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 23px;
	cursor: pointer;
	margin-top: 5px;
}

.instruction {
	font-size: 10px;
	color: #808080;
	margin-bottom: 20px;
	font-weight: 600;
}

.bus-card {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	width: 270px;
	margin-bottom: 12px;
}

	.bus-card .delete-bus-info {
		position: relative;
		top: 10px;
		left: 31px;
		font-size: 25px;
		background-color: white;
		cursor:pointer;
	}

	.bus-card .bus-image {
		width: 155px;
		height: auto;
		margin-right: 75px;
	}

	.bus-card .traveler-info {
		position: relative;
		bottom: 90px;
		left: 100px;
	}

		.bus-card .traveler-info img {
			position: relative;
			top: 1px;
			left: 9px;
			width: 18px;
			height: 18px;
		}

		.bus-card .traveler-info .e-inplaceeditor {
			width: 110px;
			text-align: left;
		}

			.bus-card .traveler-info .e-inplaceeditor .e-editable-value-container .e-editable-value {
				border-bottom: 0px;
				margin-left: 12px;
			}

			.bus-card .traveler-info .e-inplaceeditor .e-component-group .e-editable-component, .e-inplaceeditor-tip .e-component-group .e-editable-component {
				min-width: 0px;
				position: relative;
			}

		.bus-card .traveler-info .e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
			border-bottom-right-radius: 14px !important;
			border-top-right-radius: 14px !important;
		}

.e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
	color: #47c82d;
}

.bus-card .traveler-info p {
	position: relative;
	left: -20px;
	bottom: 6px;
	font-size: small;
	color: gray;
	font-weight: 600;
	border-top: 1px dashed black;
	text-align: left;
	width: 30px;
}

.bus-card .bus-no {
	position: relative;
	bottom: 74px;
	left: 50px;
}

	.bus-card .bus-no .e-inplaceeditor .e-editable-value-container .e-editable-value {
		color: #094Fb9;
		font-weight: 700;
		text-transform: capitalize;
	}

.driver-list {
	margin-top: -60px;
}

	.driver-list .driver {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		font-size: 0.9em;
	}

.footer {
	text-indent: 1.2em;
	display: block;
	font-size: 15px;
	line-height: 40px;
	border-top: 1px solid #e0e0e0;
}

img.driver-image {
	width: 29px;
	height: 29px;
}

.driver input {
	padding: .375rem .75rem;
	border-bottom: 1px dashed black;
}

/** ==============================================
 * BUS DETAILS END
 * ==============================================
 */