@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* Main Colors */
:root { --mainRed        : #d4403c; }
:root { --mainRedLight   : #fcd4d4; }
:root { --mainGreen      : #9ed196; }
:root { --mainGreenLight : #d4f9d8; }
:root { --mainGrey       : #e6e7e9; }
:root { --mainGreyDark   : #cccccc; }
:root { --mainGreyLight  : #f2f2f2; }
:root { --mainBlue       : #2cafff; }

/* BS colors */
:root { --bs-default      : #333333; }
:root { --bs-primary      : #2375b7; }
:root { --bs-success      : #4cae4c; }
:root { --bs-info         : #5bc0de; }
:root { --bs-warning      : #f0ad4e; }
:root { --bs-danger       : #d9534f; }
/* Sub Colors */
:root { --Black    : #000000; }
:root { --White    : #FFFFFF; }
:root { --grey     : #eaeaea; }
/* border Color */
:root { --borderColor : rgba(0,0,0,0.2); }

html {
    overflow-x: hidden;
	 box-sizing: border-box;
}

body {
	width:100%;
	margin:0 auto;
	min-width: 1026px;
	max-width: 3500px;
	font-size:100%;
  font-family: 'Tajawal', sans-serif;
	overflow-x: hidden !important;
}

* {
	transition: all 0.3s ease;
	margin:0;
	padding:0;
}
*,
*::before,
*::after {
  box-sizing: inherit; 
}

.pc_only {
	display: block;
}

.mob_only {
	display: none !important;
}

.tablet_only {
	display: none;
}

.text-start {
	text-align: start;
}
.text-center {
	text-align: center !important;
}
.text-end {
	text-align: end;
}
a {
	text-decoration: none;
	color: inherit;
}
.row {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.col-1 {
	width: 100%;
}
.col-2 {
	width: 49%;
	margin: 1% 0;
}
.col-3 {
	width: 32%;
	margin: 1% 0;
}
.col-4 {
	width: 24%;
	margin: 1% 0;
}








header {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 50;
}
.headerBlackRow {
	background: #000;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
}
.headerBlackRow .logo {
	width: 60%;
	margin: 0 auto;
	display: block;
	display: flex;
	justify-content: start;
	align-items: center;
}
.headerBlackRow .logo a {
	width: 10%;
	display: block;
	display: flex;
	justify-content: center;
	align-items: center;
}
.headerBlackRow .logo a img {
	width: 100%;
}
.headerBlackRow .logo span {
	width: 80%;
	margin-right: 1%;
	display: block;
}

.headerBlackRow .menuBtn {
	display: none;
}
.headerBlackRow .langSelect {
	background: var(--mainRed);
	padding: 0.8em 0;
	width: 5%;
	margin-right: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.headerBlackRow .langSelect span {
	display: block;
	font-size: 1.3em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.headerBlackRow .langSelect span img {
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 150px;
	object-fit: contain;
	object-position: center center;
}
.headerBlackRow .signInOut {
	padding: 0.5em 0;
	width: 7%;
	margin-right: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.headerBlackRow .signInOut span {
	display: block;
	width: 90%;
	font-size: 0.7em;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #FFF;
	padding: 0.3em;
	text-transform: capitalize;
}
.loggedIn {
	width: 10% !important;
}

.loggedIn span {
	border: none !important;
	font-size: 0.8em !important;
	padding: 0.3em 0 !important;
}


.headerRedRow {
	width: 100%;
	margin: 0 auto;
	padding: 0em;
	background: var(--mainRed);
	color: #FFF;
}
.headerRedRow nav {
	width: 90%;
	margin: 0 auto;
	display: flex;
	display: flex;
	justify-content: start;
	align-items: center;
}
.headerRedRow nav a {
	display: block;
	text-transform: capitalize;
	font-size: 1.1em;
	margin: 0 2%;
	padding: 0.5em;
}
.headerRedRow nav a:hover {
	background: #000;
	
}


.userNav {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 200;
	background: var(--grey);
	padding-top: 1em;
	transition: all 1s ease-in-out !important;
}
.userNavHidden {
	top: -100% !important;
	opacity: 0 !important;
	transition: all 1s ease-in-out !important;
}
.userNav a {
	width: 50%;
	margin: 1% auto;
	display: block;
	text-align: center;
	font-size: 1.0em;
	border-bottom: 1px dotted;
	padding: 0.5em 0;
}
.userNav a.closer {
	width: 20% !important;
	border: none !important;
	background: #000;
	color: #FFF;
	font-size: 2em;
	padding: 0.3em 0;
	cursor: pointer;
}










.mainSlider {
	width: 100%;
	margin: 0 auto;
	margin-top: 2%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	background: #000;
	color: #FFF;
}

.mainSlider .slideCol {
	width: 50%;
}
.mainSlider .slideColWithBg {
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.atPages .slideColWithBg {
	width: 100% !important;
	height: 30em;
	background-size: cover !important;
}
.mainSlider .slideColWithoutBg {
	padding-bottom: 5%;
}
.mainSlider .headingText {
	width: 60%;
	margin: 0 auto;
	margin-top: 20%;
	border-right: 5px solid #FFF;
	padding-right: 3%;
}
.mainSlider .headingText h1 {
	width: 100%;
	font-size: 3em;
	text-transform: capitalize;
}
.mainSlider .headingText p {
	font-size: 1em;
	text-transform: capitalize;
}

.mainSlider .trackForm {
	width: 60%;
	margin: 3% auto;
}
.mainSlider .trackForm h2 {
	width: 95%;
	margin: 1% auto;
	font-weight: normal;
	font-size: 1.2em;
}
.mainSlider .trackForm .trackInput {
	background: #FFF;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 0.5em;
}
.mainSlider .trackForm .trackInput input {
	width: 80%;
	border: none;
	padding: 1em;
}
.mainSlider .trackForm .trackInput button {
	width: 20%;
	background: #000;
	color: #FFF;
	padding: 2%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	cursor: pointer;
	font-family: inherit;
}
.mainSlider .trackForm .trackInput button img {
	width: 30%;
	vertical-align: middle;
}
.mainSlider .trackForm .trackInput button span {
	display: block;
	text-transform: capitalize;
	margin-right: 5%;
	font-size: 1.3em;
}

.mainSlider .slideBtn {
	width: 40%;
	margin: 3% auto;
	margin-right: 20%;
	padding: 2%;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.mainSlider .slideBtn span {
	font-size: 1.5em;
	vertical-align: middle;
	text-transform: capitalize;
}
.mainSlider .slideBtn img {
	width: 20%;
}
.mainSlider .redOne {
	background: var(--mainRed);
}
.mainSlider .greenOne {
	background: var(--mainGreen);
}

.pageGreyContainer {
	width: 100%;
	margin: 0 auto;
	background: var(--mainGrey);
	padding: 1em 0;
}
.pageWhiteContainer {
	width: 100%;
	margin: 0 auto;
	background: #FFF;
	padding: 1em 0;
}
.pageHeading {
	width: 80%;
	margin: 1% auto;
	text-transform: capitalize;
	text-align: center;
	font-size: 2em;
	color: var(--mainRed);
	padding: 0.3em 0;
	border-bottom: 5px solid var(--mainGrey);
}
.pagePar h1 {
	width: 80%;
	margin: 1% auto;
	text-transform: capitalize;
	text-align: center;
	font-size: 2em;
	color: var(--mainRed);
	padding: 0.3em 0;
	border-bottom: 5px solid var(--mainGrey);
}
.pagePar p {
	width: 70%;
	margin: 1% auto;
	text-align: center;
	font-size: 1.5em;
}


.servicesContainer {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

.serviceBox {
	width: 31%;
	background: var(--mainGrey);
	border-radius: 10px;
	margin: 2% 0;
	padding: 1%;
}
.serviceBox .serviceBoxBg {
	height: 10em;
	margin: 0% auto;
	width: 100%;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}
.serviceBox h2 {
	width: 100%;
	margin: 3% auto;
	text-align: center;
	text-transform: capitalize;
	color: var(--mainRed);
}
.serviceBox .serviceDesc {
	width: 100%;
	margin: 3% auto;
	font-size: 1.3em;
}
.serviceBox a {
	width: 100%;
	margin: 3% auto;
	display: block;
	font-weight: bold;
	font-size: 1.3em;
}






.siteTwoCols {
	width: 90%;
	margin: 0% auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.siteTwoCols .siteNav {
	width: 20%;
}
.siteTwoCols .siteNav a {
	display: block;
	width: 100%;
	margin: 3% auto;
	padding: 3% 0;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid var(--borderColor);
}
.siteTwoCols .siteNav a.activeNav {
	background: var(--mainRed);
	color: #FFF;
}

.siteTwoCols .siteContent {
	width: 75%;
	background: var(--mainGrey);
	padding: 0 0 6% 0;
}


.siteTwoCols .siteContent h1 {
	width: 80%;
	margin: 1% auto;
	text-transform: capitalize;
	text-align: center;
	font-size: 2em;
	color: var(--mainRed);
	padding: 0.3em 0;
	border-bottom: 5px solid var(--mainGrey);
}
.siteTwoCols .siteContent p {
	width: 90%;
	margin: 1% auto;
	text-align: start;
	font-size: 1.5em;
}












.homeIconsFlex {
	width: 80%;
	margin: 0 auto;
	margin-top: 2em;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
.homeIconsFlex .homeIcon {
	width: 25%;
	display: block;
	margin: 2%;
	border-radius: 5px;
	border: 2px solid #babec2;
	text-align: center;
	padding: 1.5em 0;
	cursor: pointer;
	opacity: 0.7;
	box-shadow: 2px 2px 5px var(--borderColor);
}
.homeIconsFlex .homeIcon:hover {
	opacity: 1;
}
.homeIconsFlex .homeIcon img {
	width: 40%;
	margin: 0 auto;
	display: block;
}
.homeIconsFlex .homeIcon i {
	width: 100%;
	margin: 0% auto;
	display: block;
	font-size: 5em;
	margin-bottom: 0.5em;
}
.homeIconsFlex .homeIcon span {
	width: 50%;
	text-transform: capitalize;
	margin: 0 auto;
	display: block;
	line-height: 1.2;
}

.icon-01 {
	background: #b3e8b6;
}
.icon-02 {
	background: #e5e2b3;
}
.icon-03 {
	background: #b3e1e5;
}
.icon-04 {
	background: #efecdf;
}
.icon-05 {
	background: #d7ecd9;
}



.userProfileSummary {
	width: 100%;
	margin: 0 auto;
	background: #efecdf;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	padding: 2em 0;
	padding-top: 5em;
}
.userProfileSummary .summaryImg {
	width: 7.5em;
	height: 7.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	background: #FFF;
	border-radius: 150px;
	margin-right: 5%;
	overflow: hidden;
}
.userProfileSummary .summaryImg img {
	width: 6em;
	height: 6em;
	object-fit: contain;
	object-position: center center;
}

.userProfileSummary .summaryTexter {
	width: 50%;
}
.userProfileSummary .summaryTexter span {
	width: 100%;
	margin: 0 auto;
	text-align: start;
	display: block;
	text-transform: capitalize;
	line-height: 1.0;
	opacity: 0.5;
	margin-bottom: 2%;
}
.userProfileSummary .summaryTexter h1 {
	width: 100%;
	margin: 0 auto;
	text-align: start;
	text-transform: capitalize;
	line-height: 1.0;
}
.userProfileSummary .summaryTexter p {
	width: 100%;
	margin: 0 auto;
	text-align: start;
	display: block;
	text-transform: capitalize;
	line-height: 1.0;
}



.pageSelector {
	width: 100%;
	margin: 0 auto;
	background: #efecdf;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	border-bottom: 1px solid #000;
}


.pageSelector .pageSelect {
	width: 20%;
	text-align: center;
	text-transform: capitalize;
	border-bottom: 2px solid #efecdf;
	cursor: pointer;
	font-size: 1.3em;
}
.pageSelector .pageSelect:hover,
.pageSelector .pageSelectActive {
	border-color: #000 !important;
}




.ordersView {
	width: 95%;
	margin: 0 auto;
}

.ordersStatusEx {
	width: 95%;
	margin: 2% auto;
	display: flex;
	justify-content: end;
	align-items: stretch;
	flex-wrap: nowrap;
}
.ordersStatusEx .dataPair {
	margin: 0 3%;
}
.ordersView .orderRow {
	width: 70%;
	margin: 2% auto;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px;
	background: #FFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
	padding: 1em 0.3em;
}
.ordersView .orderRow .itemsContainer {
	width: 100%;
	margin: 0% auto;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: nowrap;
}
.orderOptions {
	width: 100%;
	margin: 2% auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.orderOptions span {
	width: 2%;
	text-align: center;
}
 .orderOptions a {
	 text-transform: capitalize;
	cursor: pointer;
}

.orderOptions a.payBtn {
	background: var(--mainGreen);
	padding: 0.3em 0.5em;
	border-radius: 5px;
}
.orderOptions a.cancelBtn {
	padding: 0.3em 0.5em;
	border-radius: 5px;
	color: red;
}
.trackOrd {
	color: var(--mainBlue);
	font-weight: bold;
}


.orderOptions a:hover {
	cursor: pointer;
}
.orderOptions a i {
	margin-right: 0.5em;
}

.orderOptions .orderNoter {
	font-size: 0.9em;
	margin-bottom: 2em;
}


.ordersView .orderRow .serviceName {
	width: 30%;
}
.ordersView .orderRow .orderStatus {
	width: 40%;
}
.ordersView .orderRow .orderDate {
	width: 20%;
}


.orderData {
	width: 90%;
	margin: 0 auto;
	text-align: start;
}
.orderData h6 {
	width: 100%;
	margin: 3% auto;
	font-size: 1.2em;
	opacity: 0.5;
	text-transform: capitalize;
	font-weight: normal;
}
.orderData p {
	margin: 0;
	line-height: 1.3;
	font-size: 0.8em;
	font-weight: bold;
}



.dataPair {}
.dataPair .dataPairName {
	text-transform: capitalize;
	font-size: 1.2em;
	opacity: 0.7;
}
.dataPair .dataPairValue {
	text-transform: capitalize;
	font-size: 1.3em;
}
.dataPair .dataPairValue p {
	display: block;
	width: 100%;
}
.dataPair .dataPairValue span {
	display: block;
	width: 100%;
	opacity: 0.7;
}


.orderDetails {
	flex-wrap: wrap !important;
}


.orderStatusBaloon {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
}
.orderStatusBaloon div {
	width: 20px;
	height: 20px;
	max-height: 20px;
	max-width: 20px;
	min-height: 20px;
	min-width: 20px;
	border-radius: 150px;
	margin-right: 5%;
}
.orderStatusBaloon i {
	width: 80%;
	font-size: 0.9em;
	text-transform: capitalize;
	font-style: normal;
}
.pendingOrder div {
	background: #ffce00 !important;
}
.approvedOrder div {
	background: #00ff00 !important;
}
.proccessingOrder div {
	background: #ff00ff !important;
}
.deliveredOrder div {
	background: #00ff00 !important;
}
.issueOrder div {
	background: #ff0000 !important;
}
.paidOrder div {
	background: #8cc63f !important;
}
.notPaidOrder div {
	background: #d4403c !important;
}







.pageFilter {
	width: 90%;
	margin: 2% auto;
	display: flex;
	justify-content: space-between;
	align-items: first baseline;
	flex-wrap: nowrap;
}
.pageFilter .filterOptions {
	width: 70%;
}
.pageFilter .filterOptions input {
	width: 100%;
	padding: 0.5em;
	background: #f2f2f2;
	border: none;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.1);
}
.pageFilter .filterOptions .zoneFilters {
	width: 100%;
	margin: 2% auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}
.pageFilter .filterOptions .zoneFilters .zone {
	text-align: center;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-size:  1.3em;
	background: #f2f2f2;
	margin: 1%;
	cursor: pointer;
	width: 14%;
}
.pageFilter .filterOptions .zoneFilters .zoneActive {
	font-weight: bold;
}

.pageFilter .filterLink {
	width: 25%;
	background: var(--mainGreen);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 1.3em;
	text-align: center;
	text-transform: capitalize;
	border-radius: 5px;
	padding: 0.2em;
}



.hr {
	width: 90%;
	margin: 0.5% auto;
	height: 2px;
	background: #000;
}

.table {
	width: 68%;
	margin: 0 auto;
	text-align: center;
	display:table;
	border-collapse: collapse;
	cursor: default;
	transition: all 0s ease !important;
}

.tableHeader {
	width: 100%;
	margin: 0 auto;
	display: table-header-group;
	text-transform: capitalize;
}

.tableBody {
	width: 100%;
	margin: 0 auto;
	display: table-row-group;
}

.tableHeader .tr {
	background: none;
}
.tr {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	display: table-row;
}

.tr .td, .tr .th {
	flex: auto;
	padding: 0.5em;
	display: table-cell;
}
.table .dataHeader {
	text-transform: capitalize;
	font-size: 1.3em;
}
.table .dataValue {
	font-weight: bold;
	text-transform: capitalize;
	font-size: 1em;
}



.tableBody .tr:nth-child(odd) {
	background: #f2f2f2;
	opacity: 1;
}





/*
  TABS CSS START
*/
.tabsMain {
	width: 90%;
	margin: 0 auto;
	margin-top: 5%;
}
.tabsMain .tabsHeader {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}
.tabsMain .tabsHeader .tabTitle {
	width: 50%;
	text-align: center;
	text-transform: uppercase;
	border-bottom: 1px solid;
	padding: 1em 0;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.tabsMain .tabsHeader .tabTitle span {
	font-size: 1.2em;
}
.tabsMain .tabsHeader .dec {
	width: 90%;
	margin: 0 auto;
	height: 3px;
	border-radius: 5px;
}


.tabsMain .tabsHeader .tabActive {
	border: 1px solid;
	border-bottom: none !important;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.tabsMain .tabsHeader .tabActive .dec {
	background: var(--mainRed);
}


.tabsContent {
	width: 99%;
	margin: 0 auto;
	margin-top: 2%;
}
.tabsContent .tabData {
	width: 100%;
	margin: 0 auto;
	display: none;
}
.tabsContent .tabDataActive {
	display: block !important;
}




.pageAddress {
	width: 60%;
	margin: 0 auto;
	margin-top: 1em;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
	padding: 1em 0;
	
}
.hasTopMargin {
	margin-top: 6em !important;
}
.pageAddress .backLink {
	width: 10%;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
}
.pageAddress .backLink img {
	width: 40%;
	transform: scale(1, 1);
}

.pageAddress .pageTitle {
	width: 70%;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
}
.pageAddress .pageTitle img {
	width: 10%;
}
.pageAddress .pageTitle h1 {
	margin-left: 3%;
	text-align: start;
	width: 60%;
	border-bottom: 3px solid  var(--mainRed);
	padding: 0 0.5em;
	font-size: 2em;
	color: var(--mainRed);
	text-transform: capitalize;
}


.addressContainer {
	width: 60%;
	margin: 0 auto;
}
.address {
	width: 100%;
	margin: 5% auto;
	background: #f2f2f2;
	border-radius: 10px;
	padding: 1em 0.5em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
	cursor: pointer;
}
.addSelected {
	background: #333333;
	color: #FFF;
}

.address img {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.address .addressTexter {
	width: 55%;
	margin-left: 5%;
}
.address .addressTexter h1 {
	width: 100%;
	margin: 0 auto;
}
.address .addressTexter p {
	display: block;
	width: 100%;
	margin: 0 auto;
	font-size: 0.8em;
}
.address .fa-times {
	position: absolute;
	top: 10%;
	right: 5%;
}
.address .fa-pencil-alt {
	position: absolute;
	bottom: 10%;
	right: 5%;
}


.addressNew {
	width: 100%;
	margin: 5% auto;
	border-radius: 10px;
	padding: 2em 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px dashed #000;
	cursor: pointer;
}
.addressNew h1 {
	margin-left: 5%;
	font-size: 2em;
}
.addressNew i {
	font-size: 1.8em;
}


.addressForm {
	width: 60%;
	margin: 0 auto;
}
.addressForm label {
	width: 100%;
	margin: 3% auto;
	display: block;
	margin-bottom: -2%;
	font-size: 1.3em;
}

.addressForm input,
.addressForm textarea,
.addressForm select {
	width: 100%;
	margin: 3% auto;
	display: block;
	border: none;
	border-radius: 5px;
	background: #f2f2f2;
	padding: 1em;
}

.addressForm button {
	width: 25%;
	margin: 0 auto;
	background: var(--mainGreen);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 1.3em;
	text-align: center;
	text-transform: capitalize;
	border-radius: 5px;
	padding: 0.5em;
	border: none;
}


.atBilling {
	background: none !important;
	margin-top: 3%;
}

.atPayment {
	justify-content: start;
	flex-wrap: wrap !important;
	padding: 1em;
}
.atPayment img {
	width: 25%;
	margin-left: 5%;
	margin-bottom: 3%;
}
.atPayment .addressTexter {
	width: 100%;
	margin-bottom: 5%;
}




/*

*/

/*
EXTRA START
*/
.shipNowBanner {
	width: 100%;
	height: 25em;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.shipNowBanner .imgGradiant {
	width: 50%;
	height: 25em;
	object-fit: cover;
	object-position: center center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.shipNowBanner .bgGradiant {
	width: 100%;
	height: 25em;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	background: -moz-linear-gradient(left,  rgba(216,68,71,1) 50%, rgba(216,68,71,1) 60%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(216,68,71,1) 50%,rgba(216,68,71,1) 60%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(216,68,71,1) 50%,rgba(216,68,71,1) 60%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d84447', endColorstr='#00ffffff',GradientType=1 );
}
.shipNowBanner .texter {
	position: absolute;
	width: 20%;
	height: 10em;
	z-index: 3;
	top: 7em;
	left: 10%;
	color: #FFF;
	border: 3px solid;
	padding: 0.5em;
}
.shipNowBanner .texter h1 {
	width: 100%;
	margin: 0 auto;
	text-align: start;
	text-transform: capitalize;
}
.shipNowBanner .texter .texterImg {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.atPayPage {
	width: 80% !important;
	margin: 0 auto !important;
	justify-content: center !important;
}
.shipNowBanner .texter .texterImg img {
	width: 25%;
	margin-right: 1%;
}
.shipNowBanner .texter .atPayPage img {
	width: 30% !important;
}
.shipNowBanner .texter .texterImg .strings {
	width: 73%;
}
.shipNowBanner .texter .atPayPage .strings {
	width: 68%;
}
.shipNowBanner .texter .texterImg .strings span {
	display: block;
	width: 100%;
	text-transform: capitalize;
	font-size: 1.6em;
}
.shipNowBanner .texter .atPayPage .strings span {
	font-size: 3em;
}
.shipNowBanner .texter .texterImg .strings p {
	font-size: 1em;
}


.shipNowStager {
	width: 100%;
	margin: 2% auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.shipNowStager .number {
	width: 2em;
	height: 2em;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-size: 1.3em;
	border-radius: 150px;
}
.shipNowStager .divider {
	background: #000;
	height: 0.5em;
	width: 10%;
}
.shipNowStager .dividerBlue {
	background: #6accef !important;
}
.shipNowStager .activeNumber {
	background: #6accef;
}


.formContainer {
	width: 60%;
}
.formContainer .formTitle {
	width: 80%;
	margin: 2% 0;
	color: var(--mainRed);
	text-transform: capitalize;
	border-bottom: 3px solid;
	font-size: 2.0em;
}

.formGroup {
	width: 100%;
	margin: 1% auto;
}
.formGroup label {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-transform: capitalize;
	font-weight: bold;
	color: var(--mainBlue);
}
.formGroup label span {
	color: var(--mainRed);
	margin-left: 0.5%;
}
.formGroup input {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-transform: capitalize;
	background: #f2f2f2;
	padding: 0.8em 0.5em;
	border: 3px solid #000;
	border-radius: 5px;
}
.formGroup select {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-transform: capitalize;
	background: #f2f2f2;
	padding: 0.8em 0.5em;
	border: 3px solid #000;
	border-radius: 5px;
}
.formGroup textarea {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-transform: capitalize;
	background: #f2f2f2;
	padding: 0.8em 0.5em;
	border: 3px solid #000;
	border-radius: 5px;
}
.formGroup button {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-transform: capitalize;
	background: var(--mainGreen);
	padding: 0.8em 0.5em;
	border: 3px solid var(--mainGreen);
	border-radius: 5px;
	font-size: 1.3em;
	cursor: pointer;
}
.formGroup button:hover {
	opacity: 0.8;
}
.formGroup button.canceler {
	background: none !important;
	border: 3px solid #000;
}
.hasThreeBtns {
	width: 100%;
	margin: 0 auto;
	display: flex !important;
	justify-content: space-between !important;
	align-items: stretch !important;
	flex-wrap: wrap;
}
.hasThreeBtns label {
	width: 100%;
	display: block;
}
.hasThreeBtns button {
	width: 30%;
	font-size: 1em;
}

.formContainer .addressSelector {
	width: 80%;
	margin: 1% auto;
	background: #f2f2f2;
	padding: 0.8em 0.5em;
	border: 3px solid #000;
	border-radius: 5px;
	text-transform: capitalize;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}
.formContainer .theActiveThing {
	background: var(--mainRed);
	color: #FFF;
}
.activeAdd {
	background: var(--mainRed);
	color: #FFF;
}





.alerterView {
	background: var(--bs-warning);
	padding: 0.5em;
	border-radius: 5px;
}
.alerterView p {
	font-size: 1.0em;
	display: block;
	width: 100%;
	margin: 2% auto;
	line-height: 1.2;
}



.hasBottomBorder {
	border-bottom: 2px solid #000;
}

.detailsView {
	width: 100%;
	margin: 0% auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
}
.detailsView h3 {
	width: 95%;
	margin: 2% auto;
	font-weight: normal;
	font-weight: bold;
	color: var(--mainBlue);
}

.detailsView .viewDataContainer {
	width: 50%;
	border-bottom: 1px solid #000;
}
.detailsView .hasStartBorder {
	border-left: 1px solid #000;
}

.detailsView .viewDataContainer .dataPairs {
	width: 90%;
	margin: 0.5% auto;
	display: flex;
	justify-content: space-between;
	align-items: first baseline;
	flex-wrap: nowrap;
}
.detailsView .viewDataContainer .dataPairs .dataNamer {
	width: 50%;
	font-size: 1.0em;
	opacity: 0.7;
	font-weight: bold;
}
.detailsView .viewDataContainer .dataPairs .dataValuer {
	width: 50%;
	font-size: 0.8em;
}
.detailsView .viewDataContainer .dataPairs .dataValuer p {
	width: 100%;
	display: block;
	line-height: 1.2;
}

.detailsView .soloPairs {
	width: 100% !important;
	text-align: start;
}
.detailsView .soloPairs .dataPairs {
	width: 45% !important;
}
.soloPairs{
	text-align: start !important;
}
.atFees {
	justify-content: start !important;
	margin: 3% !important;
}


.infoView {
	width: 90% !important;
	background: var(--mainGreen);
	padding: 0.5em;
	border-radius: 5px;
	margin-top: 5% !important;
	display: block !important;
}
.infoView p {
	font-size: 1em;
	display: block !important;
	width: 100%;
	margin: 5% auto;
	line-height: 1.2;
}
/*
EXTRA END
*/




/*

*/


.modal {
	position: fixed;
	z-index: 700;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	transform-origin: center center;
	transition: all 0.8s ease-in-out !important;
}
.modalHidden {
	bottom: -100% !important;
	left: 50% !important;
	opacity: 0 !important;
	width: 0 !important;
	transition: all 0.8s ease-in-out !important;
}
.modal .modalDarker {
	position: absolute;
	z-index: 701;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.modal .modalView {
	position: absolute;
	z-index: 701;
	top: 10%;
	left: 25%;
	width: 50%;
	height: 75%;
	background: #FFF;
	border-radius: 5px;
	box-shadow: 1px 2px 5px var(--borderColor);
	padding: 0.5em 1%;
}
.modal .modalHeader {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dotted #000;
}
.modal .modalHeader span {
	font-weight: bold;
	display: block;
	text-transform: capitalize;
	font-size: 1.5em;
}
.modal .modalHeader i {
	display: block;
	font-size: 1.3em;
	cursor: pointer;
}

.modal .modalBody {
	width: 100%;
	margin: 0 auto;
}

.modal .row {
	width: 80%;
	margin: 0 auto;
}

  
  
footer {
	background-image: url('../../uploads/footer.jpg');
	width: 100%;
	margin: 0 auto;
	margin-top: 10em;
	padding: 0;
	padding-top: 20em;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.footerRow {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
	background: rgba(0,0,0,0.5);
	padding: 1em 5%;
}
.footerLogoCol {
	width: 20%;
}
.footerLogoCol .logo {
	width: 100%;
	margin: 5% auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footerLogoCol .logo a {
	width: 35%;
}
.footerLogoCol .logo a img {
	width: 100%;
}
.footerLogoCol .logo span {
	width: 60%;
	color: var(--mainRed);
	border-left: 2px solid;
	padding-left: 3%;
	font-size: 0.7em;
}

.footerLogoCol .franchise {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footerLogoCol .franchise span {
	width: 65%;
	color: #FFF;
	border-right: 2px solid var(--mainRed);
	padding-right: 3%;
}
.footerLogoCol .franchise img {
	width: 30%;
}

.footerNavCol {
	width: 50%;
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.footerNavCol .navCol {
	width: 23%;
}
.footerNavCol .navCol h3 {
	width: 100%;
	margin: 3% auto;
	text-transform: capitalize;
}
.footerNavCol .navCol a {
	display: block;
	width: 100%;
	margin: 3% auto;
	text-transform: capitalize;
}

.footerSocialCol {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footerSocialCol a {
	display: block;
	width: 2em;
	height: 2em;
	margin: 1% 5%;
}
.footerSocialCol a img {
	width: 2em;
	height: 2em;
}


.footerRights {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	background: rgba(0,0,0,0.5);
	padding-bottom: 3%;
}
.footerRights p {
	width: 60%;
	margin: 0% auto;
	display: block;
	border-top: 2px solid #FFF;
	text-align: center;
	font-size: 0.7em;
	padding: 0.5% 0;
}


.trackBanner {
	width: 100%;
	margin: 0 auto;
	background: #FFF;
	margin-top: 7em;
}
.trackBanner .txter {
	width: 50%;
	margin: 0 auto;
	text-align: center;
	border-bottom: 3px solid #32b1ff;
}
.trackBanner .txter h1 {
	color: #32b1ff;
}
.trackBanner .txter img {
	width: 3em;
	height: 3em;
	padding: 0.5em;
	border-radius: 150px;
	background: #e4554f;
}
.trackBanner .txter h2 span {
	color: #d4403c;
}
.trackBanner img.imger {
  width: 50%;
	margin: 0 auto;
	display: block;
}


.trackView {
	width: 100%;
	margin:  3% auto;
	background: #cccccc;
	padding: 1em 0;
}
.trackView .trackRow {
	width: 60%;
	margin:  1% auto;
	border: 1px solid var(--borderColor);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 1px 2px 5px var(--borderColor);
	display: flex;
	justify-content: start;
	align-items: stretch;
}
.trackView .trackRow .dateTime {
	background: #e6e6e6;
	width: 25%;
	padding: 0.5em 3%;
}
.trackView .trackRow .dateTime .dater {
	display: block;
	font-size: 1.5em;
	text-transform: capitalize;
}
.trackView .trackRow .dateTime .timer {
	display: block;
	color: #e4554f;
	text-transform: capitalize;
}

.trackView .trackRow .location {
	background: #f2f2f2;
	width: 25%;
	color: #e4554f;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: capitalize;
}
.trackView .trackRow .activity {
	background: #ffffff;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: capitalize;
}
.trackView .trackRow .activity p {
	text-align: center;
}
.headerTrackRow {
	border: none !important;
	box-shadow: none !important;
}
.headerTrackRow .dateTime {
	color: #000 !important;
	background: none !important;
	font-size: 1.0em !important;
}
.headerTrackRow .location {
	color: #000 !important;
	background: none !important;
	font-size: 1.2em !important;
}
.headerTrackRow .activity {
	color: #000 !important;
	background: none !important;
	font-size: 1.2em !important;
}



.trackTab {
	width: 60%;
	margin: 0 auto;
	display: flex;
}
.trackTab .tabHeader {
	width: 50%;
	display: block;
	text-align: center;
	border-bottom: 3px solid #727273;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	cursor: pointer;
}
.trackTab .tabHeader span {
	width: 80%;
	margin: 0 auto;
	padding: 1em 0;
	display: block;
}

.trackTab .activeTab {
	border: 3px solid #727273;
	border-bottom: none !important;
}
.trackTab .activeTab span {
	border-bottom: 6px solid #e4554f;
	font-weight: bold;
}
.tabBody {
	display: none;
}
.tabBodyShowed {
	display: block !important;
}
.detailsAtTrack {
	width: 60%;
	margin: 0 auto;
}


.shipmentDetails {
	width: 100% !important;
	margin: 1% auto !important;
	margin-top: 3% !important;
}

.shipmentDetails .location {
	width: 50% !important;
	padding: 1em 0;
}
.shipmentDetails .location span {
	color: #000;
	font-weight: bold;
	font-size: 1.3em;
}
.shipmentDetails .activity {
	width: 50% !important;
	color: #e4554f !important;
	font-size: 1.3em;
}



.addModal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 850;
	display: none;
}

.addModalShowed {
	display: block !important;
}
.addModal .addModalDarker {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 850;
	background: rgba(0,0,0,0.5);
}
.addModal .addModalBody {
	position: absolute;
	width: 50%;
	height: 90%;
	top: 5%;
	left: 25%;
	z-index: 855;
	background: #FFF;
	overflow-y: auto;
}






.comboBox {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.comboBox .comboBoxList {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 100%;
	left: 0;
	background: #f2f2f2;
	border: 1px solid #000;
	border-top: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow-y: scroll;
	height: 10em;
	z-index: 50;
}
.comboBoxHidden {
	height: 0em !important;
	opacity: 0;
}

.comboBox i {
	position: absolute;
	left: 5%;
	top: 30%;
	z-index: 50;
	cursor: pointer;
	opacity: 0.5;
}
.comboBox i.fa-caret-square-down {
	display: none;
}
.mainComboBoxHidden i.fa-times-circle {
	display: none;
}
.mainComboBoxHidden i.fa-caret-square-down {
	display: block;
}




.comboBox .comboBoxList div {
	width: 100%;
	margin: 0 auto;
	padding: 0.2em;
}
.comboBox .comboBoxList div:hover {
	background: #d1efff;
	color: #000;
	cursor: pointer;
}