html {

	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;

}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

:root {
	--white-colour: #fff;
	--red-colour: #991108;
	--green-colour: #198754;
	--black-colour: #000;
	--transparent-colour: transparent;
	--gray-colour: #5d6666;
	--light-red-colour: #1a1a1a;
	--ash-colour: #878181;
	--redish-colour: #e41113;
	--dim-ash: #949998;
}

.main {
    flex-grow: 1; /* Ensures main content fills remaining space */
	min-height: 100vh;
	background-color: var(--black-colour);
}

:root {
	--font-primary: "Poppins", sans-serif;
}

/*loginpage*/

* {
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;

}

:focus {
	box-shadow: none !important;
}

.base-border {
	width: 100%;
	padding: 20px 30px;
	border: dotted 1px rgba(255, 255, 255, .2);
}

.profile-border {
	width: 100%;
	padding: 20px 30px;
	border: dotted 1px rgba(255, 255, 255, 0.93);
}

.taxi-logo {
	background-color: var(--black-colour);
	position: relative;
	padding: 60px 0px 60px 0px;

}

.image-logo {
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;

}

.image-logo img {
	max-width: 200px;
	margin: 0px auto;
}

.login-section h4 {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--white-colour);
	text-align: center;

}

.label-section {
	font-family: var(--font-primary);
	color: var(--white-colour);
	font-size: 13px;
}

.color-font {
	font-family: var(--font-primary);
	font-size: 13px;
	color: var(--gray-colour);
	background-color: var(--transparent-colour);
	background-image: url(../images/down5.png);
	height: 40px;
}

.new-font {
	font-family: var(--font-primary);
	font-size: 13px;
	color: var(--gray-colour);
	background-color: var(--transparent-colour);
	height: 40px;
}

.form-size {
	padding: 0px 20px 0px 20px;
}

.button-size {
	display: flex;
	justify-content: center;

}

.button-size button {
	border-radius: 17px;
	width: 230px;
	margin: 20px 0px 40px 0px;
	font-size: 12px;

}

/*payment*/


.taxi-newlogo {
	position: relative;
	background-color: var(--black-colour);
	padding: 35px 0px 40px 0px;
}

.new-logo {
	width: 100%;
	justify-content: center;
	display: flex;
	position: relative;

}

.new-logo img {
	width: 150px;
	margin: 0px 50px 35px 50px;
}


.link-section {
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	font-family: var(--font-primary);
	color: var(--white-colour);
	background-color: var(--red-colour);
	padding: 12px 10px 10px 20px;
	margin: 0px 0px 20px 0px;
	display: block;

}

.info-icon {
	float: right;
}

.info-icon i {
	font-size: 30px;
	margin-top: -4px;
}

.link-section:hover {
	cursor: pointer;
	color: var(--ash-colour);
}

.payment-header {
	background-color: url(.../images/circle.jpg);
}

.section-icon i {
	color: var(--white-colour);
	text-align: center;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	margin: 7px 20px 0px 0px;
}



/*driversinfo*/

.driver-account {
	position: relative;
	background-color: var(--black-colour);
	padding: 50px 0px;

}

.logo-driver {
	display: flex;
	justify-content: center;
}

.logo-driver img {
	padding: 20px 0px 15px 0px;
	max-width: 135px;
	margin: 0px auto
		/*	width: 35%;*/
}

.logo-content h6 {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--white-colour);
	font-weight: 300;
	text-align: center;
	letter-spacing: 0.5PX;

}

.contact-details {
	font-family: var(--font-primary);
	font-size: 12px;
	color: var(--black-colour);
}


.txt-box {
	background-color: var(--black-colour);
	font-size: 13px;
	height: 40px;
	margin-bottom: 10px;
}

/*staff*/

.staff-details {
	position: relative;
	background-color: var(--black-colour);
	padding: 50px 0px;
}

.logo-staff {
	display: flex;
	justify-content: center;
}

.logo-staff img {
	width: 150px;
}

.logo-name h6 {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	color: var(--white-colour);
	text-align: center;
}


/*Add staff*/


.staff-contact {
	position: relative;
	background-color: var(--black-colour);
	padding: 50px 0px;
}

.img-staff img {
	margin: 10px 30px;
	border-radius: 50%;
	justify-content: center;
}

.content-space {
	padding-bottom: 30px;
}

.content-space a {
	color: var(--white-colour);
	text-decoration: none;
}

.content-space button {
	border-radius: 8px;
	width: 90px;
	margin: 20px 0px 0px 0px;
	font-size: 14px;
	font-weight: 400;
}

.staff-area {
	text-align: center;
}


.icon-section {
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--white-colour);
	text-align: left;
}

.content-icon {
	display: flex;
	align-items: center;
	margin: 0px 0px 10px 0px;
}

.content-icon i {
	color: var(--dim-ash);
	font-size: 18px;
	width: 40px;
	height: 40px;
	background-color: var(--light-red-colour);
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.content-icon .content-name {
	padding-left: 20px;
	text-decoration: none;
	display: flex;
	text-transform: capitalize;
}

/*staffdetails*/

.part-staff {
	position: relative;
	background-color: var(--black-colour);
	padding: 50px 0px;
}

.label-section {
	font-family: var(--font-primary);
	color: var(--white-colour);
	font-size: 13px;
	margin: 0px;
}

.date-part {
	color: var(--gray-colour);
	background-color: var(--transparent-colour);
	font-size: 13px;
	padding: 10px 13px;
}

.payment-part {
	width: 70%;
}

.form-sizes {
	padding: 60px 20px 60px 20px;
}


/*** header   *****/

.call-taxi-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}

.call-toggler {
	border: none;
	outline: none;
	background: none;
	font-size: 24px;
	cursor: pointer;
}

.call-taxi-nav {
	background-color: var(--black-colour) !important;
}

.call-toggler .menu-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.call-toggler.collapsed .menu-icon {
	background-image: none;

}

.call-toggler.collapsed::before {
	content: '\00d7';
	font-size: 25px;
	color: var(--white-colour);
	display: inline-block;
	line-height: 1;
	float: right;
}

.call-info {
	color: var(--white-colour) !important;
}

.call-info:hover {
	color: var(--redish-colour) !important;
}

/*Admin page*/

.taxi-logo-page {
	background-color: var(--black-colour);
	position: relative;
	padding: 60px 0px 60px 0px;
}


/*driver page*/

.driver-page {
	background-color: var(--black-colour);
	position: relative;
	padding: 60px 0px 60px 0px;
}


.card {
	background-color: #fff;
	width: 350px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 10px;
}

.card h2 {
	font-size: 24px;
	margin-bottom: 10px;
	color: #ffffff;
}

.card .details {
	display: flex;
	flex-wrap: wrap;
}

.card .field {
	width: 50%;
	/* Display two items per row */
	margin-bottom: 15px;
}

.card .field label {
	font-size: 14px;
	color: #ffffff;
	display: block;
	margin-bottom: 5px;
}

.card .field span {
	font-size: 16px;
	color: #ffffff;
}

.card .payment {
	font-size: 20px;
	font-weight: bold;
	color: #4CAF50;
}

.dp-highlight .ui-state-default {
    background: #484 !important;
    color: #FFF !important;
  }
  .ui-datepicker.ui-datepicker-multi  {
    width: 100% !important;
  }
  .ui-datepicker-multi .ui-datepicker-group {
  float:none;
  }
  #datepicker {
    height: 300px;
    overflow-x: scroll;
  }
.ui-widget { font-size: 100% }

.login-page{
	min-height: 100%;
}


.name-section{
	color: var(--white-colour);
}

.addbutton-class button {
	margin-top: 13px;
}