/* static/css/main.css */

body {
	background: #ffffff;
	overflow: hidden;
	font-family: 'Readex Pro', Arial;
}

.custom-padding {
	padding-top: 10px;
}

.disabled {
	background-color: #eee;
}

.table {
	text-transform: uppercase;
	font-size: 12px;
}

.checkbox-container {
	display: flex;
	align-items: center;
}

.checkbox-container input[type="checkbox"] {
	width: 20px; /* Increase the width of the checkbox */
	height: 20px; /* Increase the height of the checkbox */
	margin-right: 5px; /* Add some space to the right of the checkbox */
}

.modal-content {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.image-container {
	background-color: white;
	padding: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	display: inline-block;
}

.zoom-controls i:hover {
	color: #007bff; /* Change to desired hover color */
}


/* Make the parent a flex container and ensure children align horizontally */
section.row {
	display: flex;
	height: 100vh; /* Take up full viewport height */
}

/* This ensures that the customerOverlay takes up all the remaining space in the flex container */
#customerOverlay {
	flex: 1;
	overflow: auto; /* Allow scrolling inside the overlay if content is too long */
}

.verification-wrapper {
	position: relative;
}

.verification-input {
	width: 100%;
}

.verify-btn {
	width: 100%;
	height: 38px; /* Adjust this to align the height with the input field */
}

.verification-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: none;
	font-size: 18px;
}

.verified {
	color: green;
}

.not-verified {
	color: red;
}


#preloader {
	width: 100vw;
	height: 100vh;
	background: url('../img/preloader.gif') center center no-repeat !important;
}

h1 {
	font-size: 20px;
	line-height: 30px;
	text-transform: uppercase;
	margin: 0;
	border-bottom: 1px solid #1b1b1b;
}

ul, ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

a, i, span {
	display: inline-block;
}

.container-fluid.p-0 {
	padding-left: 0 !important;
}

.container-fluid .row {
	margin-right: 0;
}

.form.card {
	width: 500px;
	padding: 25px;
}

.user-signup-form label {
	font-size: 16px;
	color: #767676;
}

.table thead th {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

form.card.signup-form {
	width: 700px;
	margin: 0 auto;
}

.form.card {
	width: 500px;
	padding: 25px;
}

.wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	padding: 20px;
	background: url(/static/img/login-bg.jpg) center center no-repeat;
	background-size: cover;
}

table tr:nth-child(odd) {
	background-color: #f2f2f2; /* your color here */
}

table tr:nth-child(even) {
	background-color: #ffffff; /* your color here */
}

.table-responsive {
	width: 100%;
}

.table-scrollable {
	overflow-y: auto;
	display: block;
	position: relative;
	border: 1px solid #ddd;
}


.uppercase-text {
	text-transform: uppercase;
}


.table-scrollable thead th {
	position: sticky;
	top: 0;
	background: #f8f8f8;
	text-align: left;
}

.table-scrollable tbody {
	display: block;
	width: 100%;
}

.table-scrollable thead,
.table-scrollable tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

#booking-map {
	height: 400px; /* or any other size */
	width: 100%;
}

.scrollable-div {
	height: 90vh; /* This sets the height of the div to the full height of the viewport. Adjust as needed. */
	overflow-y: auto; /* This enables vertical scrolling within the div when the content exceeds its height. */
}

.scrollable-table {
	max-height: 400px; /* Adjust based on the desired height */
	overflow-y: auto;
	padding-right: 20px; /* Padding from the right */
}

.map-style {
	height: 500px;
	padding: 0 0 50px 0;
/ / you can adjust the padding as needed
}

.wrapper form .form-control {
	margin: 0 0 5px 0;
	height: 36px !important;
}

#bookingsOverlay,
#driversOverlay {
	background: #ffffff;
	padding: 20px;
	box-shadow: 0 0 5px #767676;
	display: none;
	height: 100vh;
}

#bookingsTable_wrapper, #driversTable_wrapper {
	max-height: 90vh;
	overflow-y: scroll;
}

.single-booking,
.single-driver {
	display: none;
	height: 100vh;
}

.admin-manage-form {
	display: none;
}

.card.bg-light {
	background: #e8edf1 !important;
}

#side-menu {
	height: 75px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: -webkit-linear-gradient(left, #2A9DF4, #1f5279);
	background-image: -moz-linear-gradient(left, #2A9DF4, #1f5279);
	color: white;
	z-index: 1000;
	vertical-align: bottom;
}

.menu-toggleable {
	transform: translateX(910px);
	transition: all 0.8s;
	display: inline-block;
}

.super-menu-toggle {
	transform: translateX(910px);
}

.menu-toggleable.opened {
	transform: translateX(720px);
}

.menu-toggle-btn {
	display: inline-block;
	/* float: left; */
	height: 75px;
	width: 46px;
	background: #1b1b1b;
	color: #ffffff;
	cursor: pointer;
	float: left;
}

.menu-toggle-btn svg {
	height: 75px;
	width: 46px;
}

.menu-toggle-btn.clicked {
	transform: rotate(180deg);
}

#side-menu ul {
	display: inline-block;
}

#side-menu ul li {
	display: inline-block;
}

#side-menu ul li a,
#side-menu ul li span {
	padding: 15px 0;
	transition: all 0.3s;
}

#side-menu ul li a:hover,
#side-menu ul li span:hover {
	text-decoration: none;
	background: rgba(0, 0, 0, 0.5);
}

#side-menu ul li a,
#side-menu ul li svg,
#side-menu ul li span {
	width: 100%;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}

#side-menu ul li svg {
	color: #DFF0FB;
}

.top-bar {
	background-image: -webkit-linear-gradient(left, #2A9DF4, #1f5279);
	background-image: -moz-linear-gradient(left, #2A9DF4, #1f5279);
	position: relative;
	z-index: 310;
	box-shadow: 2px 0 2px #767676;
	height: 44px;
}

.top-bar.bottom-bar {
	background: #1f5279;
}

.top-bar.bottom-bar ul li a,
.top-bar.bottom-bar ul li span {
	line-height: 16px;
}

.top-bar ul li {
	position: relative;
}

.top-bar li .unread-message {
	display: inline-block;
	height: 23px;
	width: 23px;
	border-radius: 100%;
	background: #e95656;
	color: #ffffff;
	line-height: 23px;
	text-align: center;
	position: absolute;
	right: 2px;
	font-size: 9px;
	font-weight: 600;
	top: 2px;
}

.bar-title {
	font-size: 0.75rem;
	color: white;
}

#bookingsOverlay,
#driversOverlay {
	background: #ffffff;
	padding: 20px;
	box-shadow: 0 0 5px #767676;
	display: none;
	height: 100vh;
}

#bookingsTable_wrapper {
	max-height: 90vh;
	overflow-y: scroll;
}

.single-booking,
.single-driver {
	display: none;
	height: 100vh;
}

#reveal-nav {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 130px;
	background: #373737;
	z-index: 1;
	transition: all 0.5s;
	box-shadow: 0 0 5px #767676;
}

.top-bar ul li {
	display: inline-block;
	float: left;
}

.top-bar ul li a,
.top-bar ul li span {
	color: #ffffff;
	padding: 10px 15px;
	font-size: 14px;
	height: 44px;
	line-height: 24px;
}

.top-bar ul li a:hover {
	text-decoration: none;
	background: rgba(255, 255, 255, 0.6);
}

.top-bar ul li a i {
	margin: 0 5px 0 0;
}

.top-bar ul li.active a {
	background: #81dbff;
}

#myTab.nav-tabs .nav-link {
	color: #1b1b1b;
}

#myTab.nav-tabs .nav-link.active, #myTab.nav-tabs .nav-item.show .nav-link {
	background: #1b1b1b;
	color: #ffffff;
}

.table th, .table td {
	border: 1px solid #dee2e6;
	padding: 3px;
	font-size: 14px;
	vertical-align: middle;
}

table.dataTable thead > tr > th.sorting {
	padding: 10px !important;
}

tbody tr {
	cursor: pointer;
}

tfoot input {
	width: 100%;
	font-size: 12px;
}

.data-table table thead th {
	font-size: 14px;
}

.data-table table tr td {
	font-size: 12px;
}

.data-table .tab-content {
	height: 25vh;
	overflow-y: scroll;
}

.data-table .box {
	width: 18px;
	height: 18px;
	border-radius: 100px;
	background: #2c7e2e;
}

.data-table svg {
	width: 20px;
	height: 20px;
}

.data-table .tag {
	margin: 0 3px;
}

.data-table .tag-247 {
	padding: 3px 5px;
	background: #000000;
	color: #ffffff;
}

.dashboard-content {
	position: relative;
}

.messages-holder {
	position: absolute;
	font-size: 10px;
	width: 700px;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	left: 9rem;
	top: 40px;
	z-index: 100;
	display: none;
}

.option-holder {
	position: absolute;
	width: 500px;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	right: 20px;
	top: -18rem;
	z-index: 100;
	font-size: 10px;
	display: none;
}

.option-holder .card-body {
	height: 252px;
	overflow-y: scroll;
}

.alerts-holder {
	position: absolute;
	width: 76%;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	right: 10rem;
	top: 40px;
	z-index: 100;
	font-size: 10px;
	display: none;
	overflow-y: scroll;
}

.alerts-holder .card-body {
	height: 480px;
}

.unread-holder {
	position: absolute;
	width: 59%;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	right: 35rem;
	top: 40px;
	z-index: 100;
	font-size: 10px;
	display: none;
	overflow-y: scroll;
}

.unread-holder .card-body {
	height: 475px;

}

.driver-message-holder {
	position: absolute;
	width: 51%;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	right: 16rem;
	top: 50px;
	z-index: 100;
	display: none;
}

.new-messages-holder {
	position: absolute;
	width: 40%;
	border: 4px solid #1b1b1b;
	border-radius: 10px;
	right: 52rem;
	top: 40px;
	z-index: 100;
	display: none;
}

.new-messages-holder .card-body {
	height: 332px;

}

body.dispatch-page {
	overflow: hidden;
	height: 100vh;
}

.advanced-settings-area {
	background: #fbfbfb;
}

.table-column .tab-content {
	height: 25vh;
	overflow-y: scroll;
}

#myTab.nav-tabs .nav-link {
	color: #1b1b1b;
}

#myTab.nav-tabs .nav-link.active, #myTab.nav-tabs .nav-item.show .nav-link {
	background: #1b1b1b;
	color: #ffffff;
}

/*------widget styles----*/
.import-options ul {
	list-style: disc !important;
	padding: 0 0 0 15px;
}

.drawing-options-list {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 80vh;
}

/*------widget styles----*/
.widget {
	text-align: center;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 0 5px #e7e7e7;
	min-height: 120px;
	background: #f7f7f7;
	margin: 10px 0;
}

.widget .row {
	margin: 0;
}

.widget h4 {
	font-size: 30px;
	margin: 0;
}

.widget p {
	margin: 0;
}

/* STRUCTURE */

.wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
}

.login-wrapper {
	background: url('../img/login-bg.png') center center no-repeat;
	background-size: cover;
}

.signup-wrapper {
	background: #ffffff;
}

#phoneResults.collection {
	width: 500px;
	height: 150px;
	overflow-y: scroll;
}

.collection {
	list-style: none;
	padding: 0;
	width: 300px;
	position: absolute;
	margin: 0;
	z-index: 100;
	display: none;
	background: #ffffff;
	box-shadow: 0 0 5px #767676;
}

.collection .online_status {
	display: inline-block;
	height: 15px;
	width: 15px;
	border-radius: 100px;
	background: #80a849;
	position: relative;
	top: 3px;
}

.collection .comp_jobs,
.collection .can_jobs {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
}

.collection .comp_jobs {
	background: #32a081;
}

.collection .can_jobs {
	background: #a03232;
}

.collection .phone {
	background: #efefef;
	padding: 3px;
	border-radius: 5px;
}

.collection .phone:hover {
	background: #1b1b1b;
	color: #ffffff;
}

.collection li span {
	margin: 0 5px;
}

.collection li {
	font-size: 10px !important;
	cursor: pointer;
	border-bottom: 1px solid #e7e7e7;
	padding: 5px 10px;
}

.collection li:hover {
	background: #e7e7e7;
}

.settings-bar nav ul li a,
.settings-bar nav ul li a i {
	font-size: 10px;
	color: #1b1b1b;
	padding: 0 5px;
}

.settings-bar nav ul li a i {
	font-size: 10px;
	margin: 0 5px 0 0;
}

.info-text {
	font-size: 14px;
}

.info-text svg {
	height: 20px;
	width: 20px;
	float: left;
}

.settings-bar.navbar,
.settings-bar nav, .settings-bar nav .nav-wrapper i, .settings-bar nav a.sidenav-trigger, .settings-bar nav a.sidenav-trigger i {
	line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	top: 70%;
}

.main-menu {
	list-style: none;
	margin: 0;
}

.main-menu li a {
	color: #ffffff;
	padding: 10px;
	font-size: 10px;
}

.main-menu li a:hover {
	text-decoration: none;
	background: #767676;
}

.main-menu li a i {
	margin: 0 5px 0 0;
}

.main-menu.left-menu li.active a {
	background: #767676;
}

form h6 {
	margin: 0 0 5px 0;
	padding: 10px 0 0 0;
	text-transform: uppercase;
}

.scrollable-section {
	height: 96vh;
	overflow-y: scroll;
}

.card.bg-light hr {
	margin: 5px 0;
}

#booking {
	background: #1f5279;
	border-radius: 100px;
	position: fixed;
	right: -10px;
	top: -10px;
	width: 90px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	display: none;
}

#booking svg {
	width: 34px;
	height: 34px;
}

.booking-form {
	background: #ebebeb;
	padding: 20px;
	margin: 0 0 10px 0;
}

.booking-form .form-control,
#keyword-search {
	font-size: 12px;
	background: #a6a6a6 !important;
}

#keyword-search {
	max-width: 20vw;
	width: 20vw;
	display: inline-block;
}

form .form-control {
	text-transform: uppercase;
}

.ver-bgh {
	background: #34d534;
	color: white;
	width: 132px;
	border: 2px solid #34d534;
	padding: 6px 15px;
	border-radius: 12px;
}

.view-vehicle-btn,
#gen-ref-id {
	font-size: 12px;
	color: #1b1b1b;
	display: inline-block;
	padding: 3px 5px;
	cursor: pointer;
	border-radius: 5px;
	background: #ffffff;
}

.view-vehicle-btn.btn-danger {
	background: #dc3545 !important;
}

.ref-id-label {
	display: block;
}

.view-vehicle-btn:hover {
	color: #ffffff;
	text-decoration: none;
}

.view-vehicle-btn,
.ref-id-label span {
	float: right;
}

.form-control {
	font-size: 12px;
	background: #ffffff;
}

.form-control:disabled, .form-control[readonly] {
	background: #e3e3e3 !important;
}

.booking-form hr {

	margin: 5px 0 10px 0;
	border: 1px solid #c9c9c9;
}

.top-row {

	background: #24242c;
}

.no-margin {
	margin-bottom: 0 !important;
}

.booking-form h5 {
	margin: 30px 0 15px 0;
}

.booking-form,
.messages-form,
.messages-form {
	border-radius: 5px;
	box-shadow: none;
}

.scroll-box {
	height: 132px;
	overflow-y: scroll;
}

.scroll-box span {
	font-weight: 700;
	font-size: 10px;
	display: inline-block;
	width: 48%;
	margin: 1%;
	border-bottom: 1px solid #1b1b1b;
	float: left;
}

#map,
#map-wide {
	height: 100% !important;
	margin: 0 0 10px 0;
	border: 2px solid #1b1b1b;
	position: relative;
}

.map-section {
	position: relative;
}

.layers-toggle-btn {
	display: inline-block;
	height: 24px;
	width: 24px;
	line-height: 17px;
	padding: 0;
	background: #1b1b1b;
	color: #ffffff;
	position: absolute;
	left: 25px;
	top: 10px;
	z-index: 100;
	cursor: pointer;
}

.toggle-layers {
	width: 400px;
	background: #f7f7f7;
	position: absolute;
	left: 20px;
	top: 1px;
	z-index: 50;
	display: none;
	border: 1px solid #e2e2e2;
	border-radius: 0 5px 5px 0;
	box-shadow: 0 0 5px #333333;
}

#select-city {
	position: absolute;
	right: 60px;
	top: 11px;
	z-index: 100;
	width: 200px;
}

.toggle-layers li:first-child h4 {
	margin: 30px 0 0 0;
}

.toggle-layers h4 {
	font-size: 16px;
	margin: 15px 0;
}

.toggle-layers li {
	font-size: 12px;
	border-bottom: 1px solid #767676;
	padding: 5px 0;
}

.toggle-layers li input {
	display: inline-block;
	width: auto;
	margin: 0 10px 0 0;
}

#info-window {
	display: inline-block;
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	position: absolute;
	bottom: 5px;
	left: 50px;
	z-index: 1000;
}

#search-result {
	height: 30vh;
	overflow-y: scroll;
}

.dest-field {
	position: relative;
}

.dest-field i {
	position: absolute;
	right: 20px;
	top: 10px;
	cursor: pointer;
	z-index: 10;
}

input:not([type]), input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default), input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default), input[type=search]:not(.browser-default),
textarea.materialize-textarea,
select,
.select2-container--default .select2-selection--multiple {
	border: none;
	border: 1px solid #ebebeb;
	height: 40px;
	border-radius: 5px;

	background: #f9f9f9;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	height: 40px;
	overflow: visible;
}

.select2-container, .select2-container--default .select2-selection--single {
	margin: 0 0 10px 0;
}

.select2-container--default .select2-selection--multiple {
	text-indent: 0;
}

.select2-container,
.select2-container--default .select2-selection--single {
	width: 100% !important;
	height: 40px;
}

form .row {
	margin-bottom: 0;
}

.materialize-textarea {
	height: auto !important;
}

.file-field input[type=file] {
	position: static;
	display: inline-block;
	visibility: visible;
}

.advanced-settings-content {
	max-height: 100vh;
	height: 100vh;
	background: #000000;
	position: relative;
	z-index: 100;
	overflow-y: scroll;
}

.horizontal-tabs li a, .vertical-tabs ul li a {
	font-size: 14px;
	font-weight: 400;
	padding: 7px;
	border-bottom: 2px solid #000000;
	color: #ffffff;
	transition: all 0.3s;
}

.horizontal-tabs li {
	border-bottom: 1px solid #1b1b1b;
	margin: 0 0 4px 0;
}

.horizontal-tabs li svg {
	width: 20px;
	height: 20px;
	color: #ffffff;
	display: inline-block;
	cursor: pointer;
	position: relative;
	top: 5px;
}

.horizontal-tabs li ul {
	display: none;
	padding: 5px;
	background: #1b1b1b;
}

.horizontal-tabs li ul li {
	border: none;
	margin: 0 0 0 30px;
}

.horizontal-tabs li ul li a {
	padding: 5px;
	font-size: 12px;
}

.bottom-options {
	position: absolute;
	bottom: 12.5vh;
	right: 0;
	z-index: 1000;
	width: 100%;
	background: #1b1b1b;
	padding: 10px;
}

.bottom-options li {
	display: inline-block;
	float: left;
	margin: 0 10px;
	max-height: 20px;
}

.bottom-options li a,
.bottom-options li svg {
	color: #ffffff;
	width: 20px;
	height: 20px;
}

.user-icon {
	color: #ffffff;
	height: 44px;
	line-height: 44px;
	text-transform: uppercase;
	font-size: 24px;
}

.user-icon:hover {
	color: #ffffff;
}

.horizontal-tabs li {
	margin: 0 4px 0 0;
}

.horizontal-tabs li a,
.vertical-tabs ul li a {
	font-size: 14px;
	font-weight: 400;
	padding: 7px;
	border-bottom: 2px solid #000000;
	color: #ffffff;
	transition: all 0.3s;
}

.horizontal-tabs li a {
	border: none;
}

.horizontal-tabs li a:hover,
.vertical-tabs ul li a:hover,
.vertical-tabs ul li.active a {
	color: #e7e7e7;
	text-decoration: none;
}

.manage-page .vertical-tabs ul li {
	margin: 0 0 2px 0;
}

#inner-tabs {
	margin: 10px 20px;
	width: 90%;
}

#inner-tabs.tabs .tab a:hover, #inner-tabs.tabs .tab a.active {
	background-color: #d7d7d7 !important;
}

.advanced-submenu {
	background: #2A9DF4;
	padding: 5px;
}

.advanced-submenu li {
	display: inline-block;
}

.advanced-submenu li a {
	font-size: 12px;
	padding: 8px 10px;
	font-weight: 400;
	text-transform: uppercase;
	color: #ffffff;
	background: #000000;
	border-radius: 5px 5px 0 0;
}

.advanced-submenu li a:hover,
.advanced-submenu li.active a {
	text-decoration: none;
	background: #DFF0FB;
	color: #000000;
}

.drawing-options a {
	color: #000000;
	margin: 0 0 5px 0;
}

.drawing-options a svg {
	width: 18px;
	height: 18px;
}

#form {
	max-width: 700px;
	padding: 2rem;
	box-sizing: border-box;
}

.form-field {
	display: flex;
	margin: 0 0 0.5rem 0;
}

.modal-header {
	border: none !important;
}

label,
input {
	padding: 0;
	box-sizing: border-box;
	justify-content: space-between;
	font-size: 1.1rem;
}

#myTable_length label,
#myTable_filter label {
	width: 100%;
	font-size: 14px;
}

label {
	font-weight: 400;
	font-size: 12px;
}

#accounts-section {
	padding: 0 !important;
}

#accounts-section hr {
	display: none;
}

.page-title {
	padding-left: 0 !important;
}

#full-name {
	height: 34px;
	font-size: 10px
}

#email-input {
	height: 34px;
	font-size: 10px
}

#password-input {
	height: 34px;
	font-size: 10px
}

.bookings-holder {
	position: absolute;
	width: 88%;
	height: 53vh;
	border-radius: 10px;
	right: 52px;
	top: 40px;
	z-index: 100;
	display: none;
}

/*---Account page styles---*/

.account-add-form,
.edit-address-form,
.add-driver-form,
.add-vendor-form,
.add-vehicle-form {
	overflow-y: scroll;
	max-height: 76.5vh;
	border: 1px solid #d9d9d9;
	padding: 15px;
	background: #f7f7f7;
}

.map-section {
	height: 50vh;
	overflow: hidden;
}

.message-box,
.instant-callbox,
.chat-box {
	max-height: 500px;
	display: none;
	position: absolute;
	width: 100%;
	left: 0;
	top: 10vh;
	z-index: 300;
}

.chat-box {
	top: 5vh;
}

.message-box {
	top: 46px;
	width: auto !important;
}

.actual-message {
	height: 100px !important;
	overflow-y: scroll;
}

.instant-callbox .card-body,
.message-box .card-body,
.chat-box .card-body {
	width: 80vw;
	margin: 0 auto;
	background: #f7f7f7;
	border-radius: 5px;
	position: relative;
}

.chat-box .card-body {
	width: 30vw;
}

.message-box .card-body {
	max-width: 50vw;
}

.message-box .card-body {
	max-height: 50vh;
	overflow-y: scroll;
}

.close-message-box,
.close-call-box {
	position: absolute;
	right: 0;
	top: 0;
	width: 24px;
	height: 24px !important;
	line-height: 20px !important;
	padding: 0 !important;
	background-color: #dc3545;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
}

.instant-callbox .top-row {
	background: none !important;
}

.type-here .form-control {
	height: 46px;
}

.chatbox {
	display: inline-block;
	padding: 20px;
	background: #e7e7e7;
	gap: 10px;
	min-height: 600px;
	width: 100%;
	overflow-y: scroll;
}

.driverMsg,
.customerMsg {
	padding: 15px;
	border-radius: 5px;
	width: 60%;
	margin: 0 0 20px 0;
	box-shadow: 2px 2px 5px #fbfbfb;
	position: relative;
	display: table;
}

.driverMsg small,
.customerMsg small {
	display: block;
	font-weight: 300;
	color: #dddddd;
	text-align: right;
	margin: 15px 0 5px 0;
}

.driverMsg small svg:first-child {
	margin: 0 0 0 5px;
}

.driverMsg {
	background: #6c6c6c;
	color: #ffffff;
	float: left;
}

.customerMsg {
	background: #33735b;
	color: #ffffff;
	float: right;
}

.custom-modal .modal-dialog {
	width: 50%;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
}

/* Style for the container holding the rows */
.row-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Style for each row */
.row-table-assigned-drivers {
	display: flex;
	align-items: center;
	margin-bottom: 20px; /* Adjust the margin to control the gap between rows */
}

/* Style for the buttons */
.driver-button {
	margin-right: 10px; /* Adjust the margin to control the gap between buttons */
}


.live-chat {
	display: none;
}

.cards-overlay,
.modal-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	left: 0;
	top: 0;
	display: none;
	z-index: 200;
}

.tableModal,
.tableModal .modal-content {
	max-width: 98vw;
	height: 98vh;
}

.modal-open .modal {
	padding: 0;
}

.tableModal.modal-dialog {
	margin: 0 auto !important;
	top: 10vh;
}

.access-modal .modal-inner {
	display: inline-block;
	padding: 20px;
	background: #e7e7e7;
}

.access-list label {
	width: auto;
}

.access-list li {
	padding: 5px;
	border-bottom: 1px solid #f7f7f7;
}

.access-list ul li {
	display: inline-block;
	float: left;
	text-align: left;
	width: 25%;
	border: none;
}

.user-pic svg {
	width: 40px;
	height: 40px;
}

.results-section {
	overflow-y: scroll;
	max-height: 55vh;
}

form .card-panel p {
	margin-bottom: 0;
}

.btn {
	padding: 6px 20px;
	min-width: 100px;
}

.btn-secondary {
	border-radius: 5px;
}

.btn-primary {
	border-radius: 5px;
	background: #1f557e;
	border: 1px solid #1f557e;
}

.form .btn-save-promos {
	margin: 32px 0 0 0;
}

.documents-form .btn-success,
.documents-form .btn-secondary.btn-edit {
	font-size: 12px;
	padding: 5px 10px;
	min-width: auto;
}

.documents-form label {
	font-size: 16px;
	margin: 0 0 10px 0;
	padding: 5px;
	background: #b2c5cd;
	width: 100%;
}

.documents-form .card-panel {
	background: #83b0c05e;
	margin: 10px;
	border-radius: 5px;
	padding: 10px;
}

/*-------tabs styles---*/
.preview-card {
	height: auto
}

.mobile-preview {
	width: 300px;
	height: 600px;
	background: url('../img/previewbg.png') center center no-repeat;
	background-size: 100%;
	padding: 20px;
	margin: 20px auto;
}

.mobile-preview .inner-preview {
	width: 250px;
	margin: 0 auto;
	padding: 20px 0;
}

.mobile-preview h2 {
	padding: 10px 30px;
	margin: 50px 0 20px 0;
}

.mobile-preview p {
	color: #767676;
}

#appLogo {
	border-bottom: 2px solid #999999;
	padding: 0 0 50px 0;
}

/* Style the tab */
.tab {
	overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 5px 10px;
	transition: 0.3s;
	font-size: 12px;
	border-radius: 3px;
}

.btn-read,
.btn-send {
	padding: 5px;
	font-size: 12px;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #2A9DF4;
	color: #ffffff;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #2A9DF4;
	color: #ffffff;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.form-check-input {
	position: static !important;
	width: auto !important;
}

.signup-form small {
	font-size: 10px;
	line-height: 14px !important;
	margin: 10px 0;
}

/*----super admin styles------*/
.super-admin-option {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
}

.inner-options {
	width: 100%;
}

.super-admin-menu li {
	width: 13%;
	float: left;
	text-align: center;
	margin: 0 0.5%;
}

.super-admin-menu li a {
	width: 100%;
	height: 150px;
	background: #1f5279;
	color: #ffffff;
}

.super-admin-menu li a:hover {
	text-decoration: none;
	background-color: #373737;
}

.super-admin-menu li svg {
	display: block;
	margin: 50px auto 0 auto;
}

.add-ref-btn {
	margin: 31px 0 0 0;
}

/*---Settings page styles----*/
.acc-ref {
	padding: 3px 5px;
	border: 1px solid #d7d7d7;
	background: #000000;
	color: #ffffff;
	margin: 0 0 10px 0;
}

.vehicle-form .btn {
	width: auto !important;
}

#pass-label {
	position: relative;
	width: 100%;

}

#gen-pass {
	padding: 5px 7px !important;
	font-size: 12px;
	display: inline-block;
	position: absolute;
	right: 15px;
	top: -7px;
	width: auto !important;
	z-index: 100;
	min-width: auto !important;
}

.search-form .btn {
	margin: 30px 0 0 0;
}

.search-results-areas {
	height: 70vh;
	overflow-y: scroll;
}

.update-fare {
	display: none;
}

/*--Info Window styles--*/
.gm-style .gm-style-iw-c {
	width: 100%;
	background: none;
}

/* .gm-style .gm-style-iw-d {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  border: none;
  padding: 0 !important;
  background: none;
  max-height: 100% !important;
  min-height: 400px;

} 
.gm-style .gm-style-iw-c {
  width: 100% !important;
  background: none;
  max-width: 28% !important;
  max-height: 100% !important;
  box-shadow: none !important;
  overflow: auto !important;
} */

.driver_info_box table {
	width: 100%; /* Set desired width */
	border-collapse: collapse; /* Ensure borders don't double up */
	margin-bottom: 20px; /* Add a gap below each table */
	border: 1px solid #000; /* Add a black border around the table */
}

.driver_info_box td, .driver_info_box th {
	border-top: 1px solid #999; /* Add a grey top border to the cells */
	border-bottom: 1px solid #999; /* Add a grey bottom border to the cells */
	padding: 5px; /* Add some padding so the text isn't right up against the border */
}

.driver-popup {
	background-color: #f2f2f2;
	padding: 10px;
	width: 100%; /* Adjust the width as needed */
	margin: 0 auto; /* Center the popup horizontally */
}

.modal-dialog.modal-dialog-centered {
	position: fixed;
	top: 0%;
	left: 20%;
	transform: translate(-100%, 0%);
	/* min-height: 100vh; */
	width: 60%;
	padding: 0;
	display: block;
}

.modal-dialog {
  max-width: 100%;

  .modal.show .modal-dialog {
    margin: 0;
  }


  /*----Media Queries----*/

  @media (max-width: 1600px) {
    .top-bar ul li a {
      padding: 10px;
      height: auto;
    }

    .horizontal-tabs li a, .vertical-tabs ul li a {
      font-size: 12px;
      padding-left: 0;
    }

    .horizontal-tabs li svg {
      width: 14px;
      height: 14px;
    }

    .horizontal-tabs li svg {
      top: 3px;
    }

    .horizontal-tabs li a svg {
      top: 7px;
    }

    .nav-column {
      padding-right: 0;
    }
  }
  @media (max-width: 1280px) {
    .nav-column {
      max-width: 20%;
      flex: 0 0 20%;
    }

    .content-column {
      max-width: 80%;
      flex: 0 0 80%;
    }

    .results-section .card {
      padding: 10px !important;
    }

    table.dataTable thead th, table.dataTable thead td {
      padding: 10px;
      font-size: 12px;
    }

    table.dataTable tbody th, table.dataTable tbody td {
      font-size: 11px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
      font-size: 12px;
    }
  }
  @media (max-width: 1080px) {
    .top-bar ul li a {
      padding: 8x 5px;
    }

    .map-section {
      height: 46vh !important;
    }

    .table th, .table td {
      vertical-align: top;
      text-transform: uppercase;
    }

    .top-bar ul li a svg {
      width: 18px;
      height: 18px;
    }

    .user-icon {
      font-size: 16px;
      line-height: 20px;
      height: auto;
    }

    .user-icon.signout {
      font-size: 24px;
      line-height: 24px;
      margin: 3px 0 0 0;
    }

    .nav-column,
    .content-column {
      max-width: 100%;
      flex: 0 0 100%;
      height: auto;
    }

    .container-fluid .row {
      margin-right: -15px;
    }

    .content-column {
      padding: 0;
    }

    #accounts-section {
      padding: 0 15px;
      width: 90%;
      margin: 0 auto;
    }

    .advanced-settings-content {
      overflow-y: visible;
    }

    .horizontal-tabs {
      margin: 0 !important;
    }

    .horizontal-tabs li {
      padding: 5px 10px;
    }

    .horizontal-tabs li a svg {
      top: 10px;
    }

    .horizontal-tabs li {
      position: relative;
    }

    .horizontal-tabs li ul {
      position: absolute;
      left: 0;
      top: 43px;
      z-index: 100;
      width: 170px;
    }

    .horizontal-tabs li ul li {
      padding: 0;
      margin: 0;
    }

    .advanced-settings-content {
      height: auto;
    }

    .horizontal-tabs li {
      display: inline-block;
    }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .top-bar ul li a,
    .top-bar ul li span {
      font-size: 12px;
      padding: 6px;
      height: auto;
    }

    .btns-list .btn {
      padding: 5px 10px;
      min-width: 80px;
      font-size: 12px;
    }

    #keyword-search {
      height: 32px;
    }

    .nav-tabs .nav-link,
    .data-table table thead th {
      font-size: 12px;
    }

    .horizontal-tabs li {
      padding: 5px 6px;
    }

    .account-add-form, .edit-address-form, .add-driver-form, .add-vendor-form, .add-vehicle-form {
      height: 62vh;
    }

    .add-driver-form .col-sm-6 {
      max-width: 100%;
      flex: 0 0 100%;
    }

    .add-driver-form .col-sm-6:last-child .row:last-child .col-sm-6 {
      max-width: 50%;
      flex: 0 0 50%;
    }
  }
}

/* ---- Booking Detail 'chrome-less' mode ---- */
body.dispatch-page.detail-mode {
  overflow: auto;       /* restore scroll */
  height: auto;         /* cancel the 100vh lock */
}

/* Load this after your base/layout CSS */
body.dispatch-page.detail-mode .layout-shell .top-bar,
body.dispatch-page.detail-mode .layout-shell #side-menu {
  display: none; /* hide header + side menu in detail mode */
}

/* optional: give the detail page some breathing room
   now that the fixed bars are gone */
body.dispatch-page.detail-mode main.container-fluid {
  padding-top: 12px;
  padding-bottom: 12px;
}