/*@import url(https://fonts.googleapis.com/css?family=Poppins&display=swap);*/
/* Merriweather loaded via <link> in master page for faster render */


/*CURRENT COLOR SCHEME*/
:root {
		--white: #fff;
		--red: #FF6464;
		--black: #092D40;
		--blackText: #1D1D1F;
		--blackShade: #092D40;
		--offwhite: #F5F5F5;
		--blue: #4BC0C0;
		--green: #A1C588;
		--grey: #404040;
		--greyLight: #F5F5F5;
		--yellow: #FEFCE8;
		--yellowBright: #fff8e1;
		--toastYellowBG:var(--white);
		--toastYellowBorder: #f5c518;
		--toastRedBG: var(--white);
		--toastRedBorder: #fc5b5b;
		--toastGreenBG: var(--white);
		--toastGreenBorder: #A1C588;
		--toastBlueBG: var(--white);
		--toastBlueBorder: #092D40;
		--required: #FF6464;
}


:root body {
		margin: 0;
		font-size: 14px;
}

html {
		--scrollbarBG: var(--white);
		--thumbBG: var(--grey);
}

body::-webkit-scrollbar {
		width: 11px;
}

body {
		scrollbar-width: thin;
		scrollbar-color: var(--grey) var(--greyLight);
		overflow-x: hidden;
		background-color: var(--white) !important;
}

/** {
		font-family: Poppins, sans-serif;
}*/

form {
		margin: 0;
}

body::-webkit-scrollbar-track {
		background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
		background-color: var(--thumbBG);
		border-radius: 6px;
		border: 3px solid var(--scrollbarBG);
}

html {
		font-size: 14px;
		line-height: 14px;
		color: var(--blackText);
}


body {
		font-family: Poppins, sans-serif;
}

h1, h2, h3, h3, h4, h5, h6 {
		font-family: "Mulish", sans-serif !important;
		font-weight: 600 !important;
}

p {
		margin: 0 !important
}

a {
		color: var(--red);
		font-weight: 700
}

		a:hover {
				font-weight: 700;
				color: var(--red);
		}

.row {
		width: 100% !important;
		max-width: 100vw !important;
		margin: 0 !important;
}

.logoMain {
		margin: auto;
		display: block;
		margin-bottom: 20px;
		padding: 20px;
}

.header {
		background-color: VAR(--white);
		color: var(--black) !important;
		padding: 10px;
		height: 45px
}

		.header div:nth-child(1) {
				text-align: left
		}

				.header div:nth-child(1) span {
						margin-right: 10px
				}

		.header div:nth-child(2) {
				text-align: right
		}

		.header i {
				margin-right: 4px
		}

		.header span {
				color: VAR(--yellow) !important
		}

.menu {
		list-style-type: none;
		margin-top: 30px;
		background-color: var(--red);
}

		.menu li {
				display: inline-flex;
				margin-right: 20px
		}

				.menu li a {
						font-size: 16px;
						color: var(--black);
						font-weight: normal;
				}

.footer {
		min-height: 100px;
		background-color: var(--offwhite);
		color: var(--black) !important;
		text-align: center;
		margin-top: 100px !important
}

		.footer a {
				color: var(--black) !important;
		}

.bgFilled {
		padding-top: 100px;
		background: url(../img/compress_bg.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled2 {
		padding-top: 100px;
		background: url(../img/compress_bg2.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled3 {
		padding-top: 100px;
		background: url(../img/compress_bg3.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled4 {
		padding-top: 100px;
		background: url(../img/compress_bg4.jpg) no-repeat;
		background-position: center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled5 {
		padding-top: 100px;
		background: url(../img/compress_bg5.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled6 {
		padding-top: 100px;
		background: url(../img/compress_bg6.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled7 {
		padding-top: 100px;
		background: url(../img/compress_bg7.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled8 {
		padding-top: 100px;
		background: url(../img/compress_bg_whyEparcel.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilled9 {
		padding-top: 100px;
		background: url(../img/bgMain.jpg) no-repeat;
		background-position: bottom !important;
		background-size: cover;
		padding-bottom: 100px;
		min-height: 100vh;
		padding-left: 10px;
		padding-right: 10px;
}


.bgFilled11 {
		height: 130px !important;
		display: none !important;
}

.bgFilled12 {
		background-size: 1000% 1000%;
		animation: gradient 40s ease infinite;
		height: 100vh !important;
		width: 100vw !important;
}

.homePageGradient {
		background-size: 1000% 1000%;
		padding-top: 100px;
		height: 300px !important;
		width: 100vw !important;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 500px !important;
		background-color: var(--offwhite) !important;
		position: absolute;
		top: -100px;
		left: 0px;
		transform: skew(0deg, -5deg);
		z-index: -1 !important;
}

.bgDefaultSmall {
		background-color: var(--black) !important;
}

@keyframes gradient {
		0% {
				background-position: 0% 50%;
		}

		50% {
				background-position: 100% 50%;
		}

		100% {
				background-position: 0% 50%;
		}
}


.bgFilled10 {
		/*background-blend-mode: saturation;*/
		padding-top: 100px;
		/*background: linear-gradient(black, black), url(../img/bgMain_nimbl.jpg) no-repeat;*/
		/*background: url(../img/bgMain_nimbl.jpg) no-repeat;*/
		background-color: var(--white) !important;
		background-position: bottom !important;
		background-size: cover;
		padding-bottom: 100px;
		min-height: 100vh !important;
		width: 100% !important;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 300px !important;
}

@media only screen and (max-width: 1210px) {
		.hideonMedium {
				display: none !important;
		}
}

@media only screen and (max-width: 1024px) {
		.bgFilled10 {
				padding-top: 150px !important;
		}

		.blackRegister b {
				font-size: 16px !important;
		}
}



@media (min-aspect-ratio: 16/9) {
		.introVideo {
				width: 100% !important;
				height: auto;
				padding: 0 !important;
				position: fixed;
				z-index: -1;
				filter: brightness(50%) grayscale(100);
		}
}

@media (max-aspect-ratio: 16/9) {
		.introVideo {
				height: 100% !important;
				width: auto;
				padding: 0 !important;
				position: fixed;
				z-index: -1;
				filter: brightness(50%) grayscale(100);
		}
}

.bgFilledCapeTown {
		padding-top: 100px;
		background: url(../img/bg_CapeTown.fw.png) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilledJohannesburg {
		padding-top: 100px;
		background: url(../img/bg_Johannesburg.fw.png) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilledPretoria {
		padding-top: 100px;
		background: url(../img/bg_Pretoria.fw.png) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilledDurban {
		padding-top: 100px;
		background: url(../img/bg_Durban.fw.png) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilledTerms {
		padding-top: 100px;
		background: url(../img/bg_Terms.fw.png) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px
}

.bgFilledHappy {
		padding-top: 100px;
		background: url(../img/compress_bg_happy.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px;
		min-height: 400px
}

.bgFilledSad {
		padding-top: 100px;
		background: url(../img/compress_bg_sad.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover;
		padding-bottom: 100px;
		min-height: 400px
}

.bgFilledSolid {
		padding-top: 100px;
		background-color: var(--offwhite);
		background-position: center !important;
		background-size: cover;
		padding-bottom: 100px;
}

.bgFilledSolideParcel {
		padding-top: 100px;
		background-color: var(--white);
		background-position: center !important;
		background-size: cover;
		padding-bottom: 100px;
		background-color: var(--offWhite);
}

.bgFilledSolidNimbl {
		padding-top: 100px;
		background-color: var(--yellow) !important;
		background-position: center !important;
		background-size: cover;
		padding-bottom: 100px;
}

h1 {
		width: 100% !important;
		text-align: center;
		color: var(--white) !important;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

		h1 b {
				color: var(--yellow)
		}

h2 {
		width: 100% !important;
		text-align: center;
		color: var(--black) !important;
		font-size: 1.4rem;
		font-weight: 400;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

h3 {
		width: 100% !important;
		text-align: center;
		color: var(--white) !important;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

h4 {
		width: 100% !important;
		text-align: center;
		color: var(--white) !important;
		font-size: 14px !important;
		font-weight: 700;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

h5 {
		text-align: left;
		color: var(--yellow) !important;
		font-size: 14px !important;
		font-weight: 700;
		padding: 10px !important;
		border-bottom: solid 1px var(--yellow);
		margin: 10px;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

h6 {
		width: 100% !important;
		text-align: center;
		color: var(--white) !important;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

.h6Alternative {
		width: 100% !important;
		font-weight: 700 !important;
		text-align: center;
		color: var(--black) !important;
		font-size: 2.0rem !important;
		color: var(--yellow) !important;
		margin-bottom: 30px;
		font-family: ""Mulish"", sans-serif !important;
		font-weight: 600 !important;
}

.list li {
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px
}

.ParcelDetailsItem2 {
		display: none
}

.ParcelDetailsItem3 {
		display: none
}

.ParcelDetailsItem4 {
		display: none
}

.ParcelDetailsItem5 {
		display: none
}

.ParcelDetailsItemTotal {
		display: none
}

.DelSelected {
		font-size: 16px;
}

.CollectSelected {
		font-size: 16px;
}

input[type=text] {
		height: 40px !important;
		font-weight: 700;
		color: var(--black);
		margin-top: 5px !important;
		border-radius: 5px;
		font-size: 14px
}

input[type=password] {
		height: 40px !important;
		font-weight: 700;
		color: var(--black);
		margin-top: 5px !important;
		border-radius: 5px;
		font-size: 14px
}

input[type=number] {
		height: 40px !important;
		font-weight: 700;
		color: var(--black);
		margin-top: 5px !important;
		border-radius: 5px;
		font-size: 16px !important;
}

input[type=date] {
		height: 40px !important;
		font-weight: 700;
		color: var(--black);
		margin-top: 5px !important;
		border-radius: 5px;
		font-size: 14px
}

select {
		height: 40px !important;
		font-size: 14px !important;
		color: var(--black);
		font-weight: 700;
		border-radius: 10px
}

.fancyButtonCheck {
		border: none;
		background: var(--white);
		color: var(--red);
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em
}

		.fancyButtonCheck:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(255,255,255,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(255,255,255,.57);
				transition: all .3s ease 0s
		}

.fancyButton {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em
}

		.fancyButton:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.fancyButtonEComm {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em;
		max-width: 95%;
		margin: auto
}

		.fancyButtonEComm:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.fancyButtonAlt {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: 100;
		padding: 10px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 14px;
}

		.fancyButtonAlt:hover {
				font-weight: 700 !important;
				background-color: var(--red);
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.fancyButtonSec {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em
}

		.fancyButtonSec:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.fancyButtonSmall {
		border: none;
		background: var(--greyLight);
		color: var(--black) !important;
		padding: 10px;
		height: 30px;
		line-height: 13px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		width: 200px !important;
		font-weight: 700 !important
}

		.fancyButtonSmall:hover {
				background-color: var(--yellow);
				color: var(--black) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--yellow);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.paddingTop10 {
		padding-top: 10px !important
}

.marginBottom50 {
		margin-bottom: 50px !important
}

.marginBottom10 {
		margin-bottom: 10px !important
}

.marginTop50 {
		margin-top: 50px !important
}

.marginTop10 {
		margin-top: 10px !important
}

.SectionYellow div b {
		font-size: 1.3em !important;
		color: var(--red) !important
}

.modal {
		display: none;
		position: fixed;
		z-index: 3;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: var(--black);
		background-color: rgba(0,0,0,.8)
}

.modalNotify {
		display: none;
		position: fixed;
		z-index: 3;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: var(--black);
		background-color: rgba(0,0,0,.8)
}

.modal-content {
		position: relative;
		background-color: var(--white);
		margin: auto;
		padding: 10px;
		border: 1px solid var(--black);
		width: 95%;
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s;
		font-size: 14px;
		line-height: 2em;
		border: solid 0px var(--white);
}

@-webkit-keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}

		to {
				top: 0;
				opacity: 1
		}
}

@keyframes animatetop {
		from {
				top: -300px;
				opacity: 0
		}

		to {
				top: 0;
				opacity: 1
		}
}

.close {
		color: var(--black);
		float: right;
		font-size: 35px;
		font-weight: 700
}

		.close:hover, .close:focus {
				color: var(--black);
				text-decoration: none;
				cursor: pointer
		}

.modal-header {
		padding: 2px 16px;
		color: white
}

.modal-body {
		padding: 2px 16px
}

.modal-footer {
		padding: 2px 16px;
		background-color: var(--white);
		color: var(--black)
}

.h1Alternative {
		color: var(--black) !important
}

		.h1Alternative b {
				color: var(--black) !important
		}

.h2Alternative {
		color: var(--black) !important;
		font-size: 16px
}

.h2AlternativeWhite {
		color: var(--white) !important;
		font-size: 16px
}

.h3Alternative {
		font-weight: 700;
		margin-top: 20px;
		margin-bottom: 20px;
		color: var(--red) !important;
		font-size: 16px
}

.priceOption {
		font-size: 1.4em;
		color: var(--red) !important
}

.priceOptionBold {
		font-size: 0.6em !important;
		color: var(--black) !important
}

.priceOptionItalic {
		font-size: 0.6em !important;
		color: var(--black) !important
}

.primaryBackground {
		background-color: var(--grey) !important;
		color: var(--black) !important
}

.MoreDetailTable {
		background-color: var(--white) !important;
		min-width: 400px;
		margin: auto;
		width: 100%
}

		.MoreDetailTable th {
				text-align: left
		}

.trackOverviewTable {
		background-color: var(--white) !important;
		width: 100%;
		max-width: 400px;
		margin: auto;
}

.trackOverviewTableDetail {
		margin-top: 30px !important;
		background-color: var(--white) !important;
		width: 100%;
		max-width: 800px;
		margin: auto;
		text-align: left;
}

.TrackDetails {
		margin-top: 50px !important;
		width: 100%;
		max-width: 800px;
		margin: auto
}

		.TrackDetails tr td {
				padding-left: 20px
		}

.TrackDayHeading td {
		padding-left: 5px !important;
		font-size: 1.3em !important;
		color: var(--black);
		font-weight: 700
}

.alert-box {
		border: solid 2px var(--black)
}

.fullWidth {
		width: 98% !important;
		margin: auto;
}

.StepOrder {
		text-align: center;
		margin-bottom: 30px;
		margin-top: 30px
}

.StepOrder {
		text-align: center;
		margin-bottom: 30px;
		margin-top: 30px
}

		.StepOrder span {
				text-align: center;
				background-color: var(--yellow);
				border: solid 1px var(--white);
				padding: 20px
		}

.stepComplete {
		background-color: var(--green)
}

.OrderParcelDetailsTable {
		width: 100%
}

label {
		font-size: 13px;
		font-weight: bold;
		margin-bottom: 35px;
}

		label b {
				margin-left: 10px;
				color: var(--red) !important
		}

.CollectionDatePicker {
		max-width: 400px;
		background-color: var(--white);
		color: var(--red);
		border: solid 1px var(--yellow);
		padding: 20px;
		font-size: 1.4em;
		text-align: center;
		margin: auto;
		margin-bottom: 30px !important
}

.CollectionDatePickerSelected {
		max-width: 400px;
		background-color: var(--black);
		color: var(--white);
		border: solid 1px var(--red);
		padding: 20px;
		font-size: 1.4em;
		text-align: center;
		margin: auto;
		margin-bottom: 30px !important
}

.confirmationHolder {
		padding: 40px;
		border: solid 1px var(--yellow);
		width: 100%;
		max-width: 500px;
		margin: auto;
		text-align: center;
		color: var(--red);
		font-size: 1.3em;
		line-height: 25px !important;
		margin-bottom: 50px
}

		.confirmationHolder span {
				margin-top: 5px;
				color: var(--black)
		}

		.confirmationHolder b {
				color: var(--yellow);
				font-size: 14px
		}

.fontSize15em {
		font-size: 1.5em !important
}

input.largerCheckbox {
		width: 30px;
		height: 30px
}

.boldAtag {
		font-size: 1.4em !important;
		color: var(--red)
}

.linkedAtag {
		font-size: 16px !important;
		font-weight: 700;
		color: var(--red)
}

.overviewGrey {
		background-color: rgba(0,0,0,.4) !important
}

		.overviewGrey td {
				color: var(--white) !important;
				font-size: 1.3em !important
		}

.overviewRed {
		background-color: var(--red) !important
}

		.overviewRed td {
				color: var(--white);
				font-size: 1.5em
		}

.fancyMenu {
		border: none;
		color: var(--black) !important;
		padding: 5px;
		text-transform: lowercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .4s ease 0s;
		display: block;
		font-size: 14px !important;
}

.fancyMenuMobile {
		border: none;
		color: var(--white) !important;
		font-weight: 100;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .4s ease 0s;
		display: block;
		font-size: 1.3em !important;
		border-bottom: solid 3px var(--black)
}

		.fancyMenuMobile:hover {
				color: var(--red) !important;
				background: 0 0;
				transition: all .3s ease 0s;
				border-bottom: solid 3px var(--black);
				border-radius: 0
		}

.fancyMenuEComm {
		border: none;
		color: var(--black) !important;
		font-weight: 100;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .4s ease 0s;
		display: block;
		font-size: 14px !important;
		border-bottom: solid 3px var(--yellow);
		padding-top: 20px
}

		.fancyMenuEComm:hover {
				color: var(--white) !important;
				background: 0 0;
				transition: all .3s ease 0s;
				border-bottom: solid 3px var(--black);
				border-radius: 0
		}

.fancyMenuECommSmall {
		border: none;
		color: var(--black) !important;
		font-weight: 100;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .4s ease 0s;
		display: block;
		font-size: 1.3em !important;
		border-bottom: solid 3px var(--black);
		padding-top: 20px
}

		.fancyMenuECommSmall:hover {
				color: var(--white) !important;
				background: 0 0;
				transition: all .3s ease 0s;
				border-bottom: solid 3px var(--black);
				border-radius: 0
		}

.articleHolder {
		padding: 20px;
		width: 100%
}

		.articleHolder section {
				margin-top: 50px
		}

td i {
		font-size: 12px !important;
		font-weight: 700;
		display: block
}

.maxWidth1000 {
		/*max-width: 1200px;*/
		margin: auto;
}


.exclaimText {
		font-size: 2.0em !important;
		color: var(--black) !important
}

.quickLink {
		color: var(--black) !important
}

.ui-menu-item a {
		color: var(--black) !important;
		font-size: 14px !important
}

.lineHeight18 {
		line-height: 20px !important
}

.yellowText {
		color: var(--yellowBright) !important
}

.redText {
		color: var(--red) !important
}

.fancyMenuEcomm {
		border: none;
		color: var(--black) !important;
		font-weight: 100;
		padding: 5px;
		padding-top: 10px !important;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		font-size: 14px !important
}

		.fancyMenuEcomm:hover {
				color: var(--red) !important;
				font-weight: 700 !important;
				letter-spacing: 3px;
				background: 0 0;
				transition: all .3s ease 0s
		}

.fancyMenuEcommSecond {
		border: none;
		color: var(--white) !important;
		font-weight: 100;
		padding: 5px;
		padding-top: 5px !important;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		font-size: 12px !important;
}

		.fancyMenuEcommSecond:hover {
				color: var(--red) !important;
				font-weight: 700 !important;
		}

.menuEcomm {
		list-style-type: none
}

		.menuEcomm li {
				display: inline-flex;
				margin-right: 10px;
		}

				.menuEcomm li a {
						font-size: 14px;
						color: var(--black);
						font-weight: 700
				}

.menuEcommSecond {
		list-style-type: none
}

		.menuEcommSecond hr {
				border-bottom: solid 1px var(--grey);
				margin-top: 4px !important;
				margin-bottom: 4px !important;
		}

		.menuEcommSecond li {
				display: inline-block;
				margin-right: 10px;
				width: 100%;
		}

				.menuEcommSecond li a {
						color: var(--black);
						font-weight: normal;
						text-decoration: none !important
				}

						.menuEcommSecond li a:hover {
								font-weight: bold;
						}


.headereComm img {
		height: 30px;
		float: left
}

.headereComm {
		background-color: var(--yellow);
		border-bottom: solid 2px var(--offwhite);
		color: var(--white) !important;
		text-align: right;
		height: 35px !important;
		overflow: hidden;
}

.columnHolder {
		width: 100%;
		display: flex;
		min-height: 100vh !important;
		background-color: var(--white);
}

.leftColumn {
		background-color: var(--black) !important;
		text-align: left;
		width: 250px !important;
		display: table-cell !important;
		transition: width 0.5s ease-in-out;
		border-right: solid 1px var(--greyLight);
		padding-top: 20px;
}

.rightColumn {
		display: table-cell;
		padding-bottom: 100px !important;
		width: 100%;
		background-color: var(--greyLight);
}

.ecommFooter {
		display: none
}

.walletView {
		width: 100%;
		font-size: .7em;
		color: var(--red)
}

		.walletView b {
				color: var(--red);
				font-size: 1.3em
		}

.exclaimName {
		font-size: 1.4em
}

.greyOut {
		background-color: var(--grey) !important;
		color: var(--black) !important
}

.h1EComm {
		font-size: 16px !important;
		color: var(--black) !important;
		border-bottom-color: var(--white) !important
}



.h3EComm {
		font-size: 14px !important;
		color: var(--white) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		background-color: var(--blue);
		padding: 5px;
		margin-bottom: 30px;
		font-weight: bold !important
}

.h3ECommAlternative {
		font-size: 14px !important;
		color: var(--black) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		background-color: var(--yellowBright);
		padding: 5px;
		margin-bottom: 30px;
		font-weight: bold !important
}

.h5EComm {
		font-size: 16px !important;
		color: var(--red) !important;
		text-align: left;
		font-weight: 700 !important;
		text-align: center
}



.registerForm {
		border: solid 3px var(--black);
		min-width: 300px;
		width: 90%;
		margin: auto;
		margin-top: 50px;
		min-height: 300px;
		padding-bottom: 20px
}

		.registerForm input[type=text], input[type=password] {
				font-weight: 700;
				max-width: 90%;
				margin: auto
		}

		.registerForm select {
				font-weight: 700;
				margin-top: 20px !important;
				max-width: 90% !important;
				margin-left: auto !important;
				margin-right: auto !important
		}

.fancyButtonLogin {
		border: none;
		background: var(--grey);
		color: var(--black) !important;
		padding: 10px;
		height: 40px;
		line-height: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		width: 90% !important;
		font-weight: 700 !important;
		margin: auto;
		margin-top: 20px
}

		.fancyButtonLogin:hover {
				background-color: var(--yellow);
				color: var(--black) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--yellow);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.fancyButtonLoginMenu {
		float: right;
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		padding: 8px;
		padding-left: 15px;
		padding-right: 15px;
		height: 40px;
		line-height: 25px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: .9em;
		min-width: 150px !important;
		margin: auto;
		margin-top: -5px !important;
		margin-left: 10px;
		text-transform: none
}

		.fancyButtonLoginMenu:hover {
				background-color: var(--white);
				border: solid 1px var(--red);
				color: var(--red) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--red);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,1);
				transition: all .3s ease 0s
		}

.overviewTable {
		max-width: 600px !important;
		width: 100%;
		margin: auto
}

		.overviewTable td {
				height: 40px !important;
				font-size: 14px;
				font-weight: 700
		}

.overviewExclaim {
		color: var(--red);
		font-size: 1.4em !important
}

.checkYes {
		font-size: 14px;
		color: var(--green)
}

.checkNo {
		color: var(--red);
		font-size: 14px
}

.getBetterPrices {
		max-width: 500px;
		text-align: center;
		margin: auto;
		margin-top: 10px
}

		.getBetterPrices a {
				font-weight: bold !important;
				font-size: 1.5em !important
		}

.ChangePasswordTable {
		background-color: var(--white) !important;
		min-width: 400px;
		margin: auto;
		width: 100%
}

		.ChangePasswordTable td input[type=password] {
				margin: 0px !important;
				color: var(--black) !important;
		}

.payNowPayFast {
		background-image: url(../img/payNowPayfast.fw.png);
		background-position: center;
		background-color: var(--white) !important;
		width: 280px !important;
		height: 140px !important;
		margin: auto;
		margin-top: 50px;
		cursor: pointer !important;
		background-repeat: no-repeat;
		border: solid 3px var(--white);
		padding: 20px !important
}

		.payNowPayFast:hover {
				background-image: url(../img/payNowPayfast_hover.fw.png);
				-webkit-box-shadow: 0 5px 40px -10px var(--grey);
				-moz-box-shadow: 0 5px 40px -10px var(--grey);
				transition: all .3s linear 0s
		}

.payNoweWallet {
		background-image: url(../img/paynoweWallet.fw.png);
		background-position: center;
		background-color: var(--white) !important;
		width: 280px !important;
		height: 140px !important;
		margin: auto;
		margin-top: 50px;
		cursor: pointer !important;
		background-repeat: no-repeat;
		border: solid 3px var(--white);
		padding: 20px !important
}

		.payNoweWallet:hover {
				background-image: url(../img/paynoweWallet_hover.fw.png);
				-webkit-box-shadow: 0 5px 40px -10px var(--grey);
				-moz-box-shadow: 0 5px 40px -10px var(--grey);
				transition: all .3s linear 0s
		}

.modal-header-content {
		font-size: 1.3em !important;
		color: var(--red) !important;
		border-bottom-color: var(--grey) !important;
		text-align: center;
		padding: 5px;
		font-weight: bold !important
}

.CostOfInsruance {
		font-weight: 700;
		font-size: 1.4em;
		color: var(--red)
}

.loggedInBar {
		width: 100% !important;
		position: relative;
		top: 0;
		left: 0;
		height: 60px;
		background-color: var(--white);
		border-bottom: solid 1px var(--black);
}

.welcomeMessage {
		color: var(--black);
		font-weight: 700;
		font-size: 14px;
		margin-right: 40px;
		margin-top: 10px
}

.offSiteMenu {
		width: 100vw;
		height: 100vh;
		background-color: var(--black);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000000 !important;
		display: none;
		overflow: scroll;
}

.offSiteSubMenu {
		text-align: center;
		margin-top: 30px;
		margin: 0;
}

.offSiteSubMenu {
		list-style-type: none !important
}

		.offSiteSubMenu li {
				display: block;
				width: 100% !important;
				text-align: center;
		}

				.offSiteSubMenu li a {
						margin-top: 10px;
						margin-bottom: 10px !important;
						display: block;
				}

				.offSiteSubMenu li .button_red {
						margin-top: 10px;
						margin-bottom: 10px !important;
						display: block;
						width: 200px !important;
						text-align: center;
						margin: auto !important;
				}

				.offSiteSubMenu li .button_blue {
						margin-top: 10px;
						margin-bottom: 10px !important;
						display: block;
						width: 100px !important;
						text-align: center;
						margin: auto !important;
				}

.closeMenu {
		position: absolute;
		color: var(--white) !important;
		font-size: 2em;
		top: 10px;
		right: 10px;
}

.SmallMenu {
		float: right;
		font-size: 16px;
		color: var(--black) !important;
		font-weight: 700;
		margin-right: 20px;
		margin-top: 10px
}

.courierPriceTableWidth {
		width: 500px
}

.pageLoader {
		width: 100vw;
		min-height: 400px;
		background-color: var(--white);
		text-align: center;
		padding-top: 100px;
		color: var(--black);
		font-size: 14px !important;
		font-weight: 700
}

.smallTrackingResult {
		list-style-type: none !important;
		margin: auto;
		border: solid 2px var(--grey);
		max-width: 400px;
		padding: 20px
}

		.smallTrackingResult li.progtrckr-done {
				color: var(--black) !important;
				font-weight: 700;
				font-size: 1.4em;
				text-align: left !important
		}

				.smallTrackingResult li.progtrckr-done i {
						color: var(--green) !important;
						margin-right: 10px
				}

		.smallTrackingResult li.progtrckr-todo {
				color: var(--grey) !important;
				font-weight: 700;
				font-size: 1.4em;
				text-align: left !important
		}

				.smallTrackingResult li.progtrckr-todo i {
						color: var(--black) !important;
						margin-right: 10px
				}

				.smallTrackingResult li.progtrckr-todo b {
						font-size: 0.5em !important;
						color: var(--red);
						padding-left: 10px
				}

.welcomeModal {
		position: absolute;
		width: 100vw;
		height: 100%;
		background-color: var(--grey);
		top: 0;
		left: 0;
		text-align: center !important;
		padding-top: 20px;
		background: url(../img/compress_bg.jpg) no-repeat;
		background-position: 0 center !important;
		background-size: cover
}

.welcomeModalHolder {
		border: solid 1px var(--white);
		width: 400px;
		height: 250px;
		margin: auto;
		background-color: var(--white);
		padding: 20px;
		border-radius: 5px;
		margin-top: 20px
}

.fancyButtonWelcomePage {
		float: left;
		border: none;
		background: var(--red);
		color: var(--white) !important;
		padding: 8px;
		min-height: 40px;
		line-height: 25px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: .9em;
		min-width: 100% !important;
		margin: auto;
		margin-top: 10px;
		text-transform: none
}

		.fancyButtonWelcomePage:hover {
				background-color: var(--white);
				border: solid 1px var(--red);
				color: var(--red) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--red);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,1);
				transition: all .3s ease 0s
		}

.fancyButtonWelcomePage2 {
		float: left;
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		padding: 8px;
		height: 40px;
		line-height: 25px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: .9em;
		min-width: 100% !important;
		margin: auto;
		margin-top: 10px;
		text-transform: none
}

		.fancyButtonWelcomePage2:hover {
				background-color: var(--white);
				border: solid 1px var(--black);
				color: var(--black) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--black);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,1);
				transition: all .3s ease 0s
		}

.fancyButtonWelcomePage3 {
		float: left;
		border: none;
		background: var(--yellow);
		color: var(--white) !important;
		padding: 8px;
		height: 40px;
		line-height: 25px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: .9em;
		min-width: 100% !important;
		margin: auto;
		margin-top: 10px;
		text-transform: none
}

		.fancyButtonWelcomePage3:hover {
				background-color: var(--white);
				border: solid 1px var(--yellow);
				color: var(--yellow) !important;
				font-weight: 700 !important;
				-webkit-box-shadow: 0 5px 20px -10px var(--yellow);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,1);
				transition: all .3s ease 0s
		}

.h2Welcome1 {
		font-size: 16px !important;
		color: var(--red) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 10px;
		border-bottom: solid 1px var(--red) !important;
		font-weight: 700
}

.h2Welcome2 {
		font-size: 16px !important;
		color: var(--black) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 10px;
		border-bottom: solid 1px var(--black) !important;
		font-weight: 700
}

.h2Welcome3 {
		font-size: 16px !important;
		color: var(--yellow) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 10px;
		border-bottom: solid 1px var(--yellow) !important;
		font-weight: 700
}

.whyEParcel1 {
		background-color: var(--red);
		min-height: 300px;
		color: var(--white);
		font-size: 6em;
		line-height: 3em
}

.whyEParcel1Alt {
		color: var(--red);
		font-weight: bold !important;
		text-align: left
}

		.whyEParcel1Alt ul {
				list-style-type: circle
		}

		.whyEParcel1Alt li {
				font-size: 12px !important
		}

				.whyEParcel1Alt li b {
						color: var(--black)
				}

.whyEParcel2 {
		background-color: var(--blue);
		min-height: 300px;
		color: var(--white);
		font-size: 6em;
		line-height: 3em
}

.whyEParcel2Alt {
		color: var(--blue);
		font-weight: bold !important;
		text-align: left
}

		.whyEParcel2Alt ul {
				list-style-type: circle
		}

		.whyEParcel2Alt li {
				font-size: 12px !important
		}

				.whyEParcel2Alt li b {
						color: var(--black)
				}

.h2Welcome4 {
		font-size: 16px !important;
		color: var(--blue) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 10px;
		border-bottom: solid 1px var(--red) !important;
		font-weight: 700
}

.whyEParcel3 {
		background-color: var(--yellow);
		min-height: 300px;
		color: var(--white);
		font-size: 6em;
		line-height: 3em
}

.whyEParcel3Alt {
		color: var(--black);
		font-weight: bold !important;
		text-align: left
}

		.whyEParcel3Alt ul {
				list-style-type: circle
		}

		.whyEParcel3Alt li {
				font-size: 12px !important
		}

				.whyEParcel3Alt li b {
						color: var(--red)
				}

.h2Welcome5 {
		font-size: 16px !important;
		color: var(--yellow) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 10px;
		border-bottom: solid 1px var(--yellow) !important;
		font-weight: 700
}

.chkNotify {
		margin-left: 20px !important;
		width: 20px;
		height: 20px;
		margin-top: 10px !important;
		color: var(--green)
}

.smallerText {
		font-size: .7em;
		font-weight: 700
}

.BaseWeight {
		font-size: 16px !important;
		color: var(--red) !important
}

.MoreDetailTablePrices {
		background-color: var(--white) !important;
		min-width: 400px;
		margin: auto;
		width: 100%
}

		.MoreDetailTablePrices th {
				text-align: left
		}

@media all and (max-width:1023px) {

		.leftColumn {
				display: none !important;
		}

		.MainContent {
		}

		.courierPriceTableWidth {
				width: 50% !important
		}

		.StepOrder span {
				font-size: 12px !important
		}

		.MoreDetailTable {
				min-width: 100px !important;
				max-width: 100vw !important
		}

		.linkedAtag {
				font-size: 12px !important
		}

		.menuEcommSecond {
				text-align: left
		}

				.menuEcommSecond li {
						display: block !important
				}

		.walletView {
				padding: 0 !important
		}

		.overviewTable {
				width: 100% !important
		}

		.h5EComm {
				width: 100% !important;
				margin: 0 !important;
				margin-top: 10px !important;
				margin-bottom: 10px !important
		}

		.h2EComm {
				margin: 0 !important;
				margin-top: 10px !important;
				margin-bottom: 10px !important
		}

		.exclaimName {
				font-size: 14px !important
		}

		.ChangePasswordTable {
				min-width: 100px !important
		}

		.viewPrices {
				font-size: 0.6em !important
		}

		.checkYes {
				font-size: 12px !important
		}

		.checkNo {
				font-size: 12px !important
		}

		code {
				font-size: 0.7em !important
		}

		.MoreDetailTablePrices {
				border: 0;
				width: 100vw !important
		}

				.MoreDetailTablePrices caption {
						font-size: 1.3em
				}

				.MoreDetailTablePrices thead {
						border: none;
						clip: rect(0 0 0 0);
						height: 1px;
						margin: -1px;
						overflow: hidden;
						padding: 0;
						position: absolute;
						width: 1px
				}

				.MoreDetailTablePrices tr {
						border-bottom: 3px solid var(--grey);
						display: block;
						margin-bottom: .625em
				}

				.MoreDetailTablePrices td {
						border-bottom: 1px solid var(--grey);
						display: block;
						font-size: .8em !important;
						text-align: left
				}

						.MoreDetailTablePrices td:nth-child(1):before {
								content: "CODE:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:nth-child(2):before {
								content: "AREAS:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:nth-child(3):before {
								content: "NC BASE:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:nth-child(4):before {
								content: "NC p/kg:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:nth-child(5):before {
								content: "RC BASE:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:nth-child(6):before {
								content: "RC p/kg:";
								float: left;
								font-weight: 700;
								text-transform: uppercase;
								margin-right: 10px
						}

						.MoreDetailTablePrices td:last-child {
								border-bottom: 0
						}

				.MoreDetailTablePrices tr {
						border-bottom: solid 2px var(--black);
						margin-bottom: 20px
				}

		.tableHeader {
				display: none !important
		}

		.maxWidth1000 {
				max-width: 100%;
		}

		.fancyButtonLoginMenu {
				height: 45px;
				line-height: 35px
		}

		.MoreDetailTable {
				border: 0
		}

				.MoreDetailTable caption {
						font-size: 1.3em
				}

				.MoreDetailTable thead {
						border: none;
						clip: rect(0 0 0 0);
						height: 1px;
						margin: -1px;
						overflow: hidden;
						padding: 0;
						position: absolute;
						width: 1px
				}

				.MoreDetailTable tr {
						border-bottom: 3px solid var(--grey);
						display: block;
						margin-bottom: .625em
				}

				.MoreDetailTable td {
						border-bottom: 1px solid var(--grey);
						display: block;
						font-size: .8em !important;
						text-align: left
				}

				.MoreDetailTable tr {
						border-bottom: solid 2px var(--black);
						margin-bottom: 20px
				}

		.modal-content {
				position: relative;
				background-color: var(--white);
				margin: auto;
				padding: 10px;
				border: 1px solid var(--black);
				max-width: 99vw !important;
				-webkit-animation-name: animatetop;
				-webkit-animation-duration: 0.4s;
				animation-name: animatetop;
				animation-duration: 0.4s;
				font-size: 14px;
				line-height: 2em;
				border: solid 1px var(--white)
		}

		.modal {
				padding-top: 40px !important
		}

		.overviewTab {
				min-height: 60px !important;
		}

				.overviewTab a {
						width: 100% !important;
				}
}

.confirmedLoggedIn {
		background-color: var(--red);
		color: var(--white);
		margin-top: 5px !important;
		margin-bottom: 5px !important;
		padding: 10px !important;
		margin-bottom: 30px !important
}

.fancyButtonEDelete {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em;
		max-width: 95%;
		margin: auto
}

		.fancyButtonEDelete:hover {
				background-color: var(--red);
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.overviewTab {
		border: none;
		color: var(--black) !important;
		font-weight: 100;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .4s ease 0s;
		display: block;
		font-size: 14px !important;
		text-align: center;
}

		.overviewTab a:hover {
				color: var(--grey) !important;
				background: 0 0;
				transition: all .3s ease 0s;
				border-bottom: solid 3px var(--grey);
				border-radius: 0
		}

.tabLinks {
		background-color: var(--yellow);
		color: var(--black) !important;
		padding: 10px;
		border-radius: 8px;
}

.activeTabber {
		font-weight: 700;
		color: var(--white) !important;
		border-bottom: solid 3px var(--black);
		background-color: var(--black);
}

.currentWalletValue {
		width: 100% !important;
		color: var(--black);
		font-size: 150%;
		padding-top: 30px !important;
		padding-bottom: 30px !important;
		font-weight: 700
}

.smallText {
		font-size: 0.7em !important;
}

.h5PriceOptoins {
		font-size: 2.0em !important;
		color: var(--black) !important;
		border-bottom: solid 1px var(--grey) !important;
}

.CollectionDatePickerToday {
		max-width: 400px;
		background-color: var(--red);
		color: var(--white);
		border: solid 1px var(--yellow);
		padding: 20px;
		font-size: 1.4em;
		text-align: center;
		margin: auto;
		margin-bottom: 30px !important
}

.close:hover, .close:focus {
		transition: 0.70s;
		-webkit-transition: 0.70s;
		-moz-transition: 0.70s;
		-ms-transition: 0.70s;
		-o-transition: 0.70s;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
}

.fancyMenuHeader {
		width: 100%;
		font-size: .7em;
		color: var(--black) !important;
}

		.fancyMenuHeader b {
				color: var(--blue) !important;
		}

.informationBox {
		width: 90%;
		min-height: 200px;
		background-color: var(--white);
		border: solid 1px var(--black);
		padding: 10px;
}

.infoBox1 {
		font-size: 14px;
		float: left;
		font-weight: bold;
		width: 100% !important;
}

.infoBox2 {
		padding-top: 5px;
		font-size: 2.5em !important;
		float: left;
		font-weight: bold;
		width: 100% !important;
		color: var(--red) !important;
}

.infoBox3 {
		padding-top: 5px;
		font-size: 14px !important;
		float: left;
		font-weight: normal;
		text-align: right;
		width: 100% !important;
}

.ecommDefault_h2 {
		color: var(--black) !important;
		font-size: 1.5em !important;
		text-align: left !important;
		margin-left: 10px;
		padding-top: 10px;
		width: 94% !important;
		border-bottom: solid 1px var(--black);
}

.ecommDefault_h2_bottom {
		color: var(--black) !important;
		font-size: 1.5em !important;
		text-align: right !important;
		margin-left: 10px;
		padding-top: 10px;
		width: 94% !important;
		border-top: solid 1px var(--black);
}

.informationBoxTable {
		border: none !important;
		background-color: var(--red);
		width: 100% !important;
}

		.informationBoxTable tr td {
				color: var(--grey) !important;
				font-weight: 300;
				font-size: 14px;
		}

		.informationBoxTable tr:nth-of-type(even) {
				background-color: var(--red);
		}

		.informationBoxTable tr td b {
				font-size: 14px;
		}

		.informationBoxTable tr td i {
				font-size: 1.6em !important;
		}

.informationBox ul {
		padding: 10px !important;
		color: var(--grey) !important;
		font-size: 12px !important;
}

		.informationBox ul a {
				color: var(--white) !important;
				text-decoration: underline;
				text-transform: lowercase;
		}

.smallButton {
		font-size: 12px !important;
		padding: 15px !important;
}

.searchBox::placeholder {
		color: var(--grey);
		font-weight: normal !important;
}

.dataTables_length label {
		margin-bottom: 10px !important;
}

.dataTables_filter label input {
		min-width: 400px !important;
		margin-bottom: 10px !important;
}

.eShopData {
		font-size: 12px !important;
}

		.eShopData input[type=text] {
				font-size: 16px !important;
				border-radius: 5px !important;
		}

		.eShopData select {
				border-radius: 5px !important;
				width: 200px !important;
		}

		.eShopData input[type=text]:focus {
				-webkit-box-shadow: none !important;
				box-shadow: none !important;
				border-color: var(--black) !important;
				background-color: var(--white) !important;
		}

		.eShopData textarea {
				height: 100px;
				resize: none;
		}

.eShopColumn {
		padding-left: 10px;
		padding-right: 10px;
}

.eshopDataHolder {
		margin-left: 5px !important;
		margin-right: 5px !important;
}

.h3eShop {
		font-size: 1.4em !important;
		color: var(--red) !important;
		border-bottom-color: var(--grey) !important;
		text-align: left;
		padding: 5px;
		margin-top: 30px;
		font-weight: bold !important;
		border-bottom: solid 1px var(--red) !important;
		margin-bottom: 20px !important;
}

.required {
		border-bottom: solid 1px var(--required) !important;
}

.requiredMissing {
		border: solid 2px red !important;
}

.imageHolder {
		width: 205px !important;
		height: 300px !important;
		border: solid 2px var(--black);
		background-color: var(--white) !important;
		display: table-cell;
		vertical-align: middle
}

		.imageHolder img {
				max-width: 205px !important;
				max-height: 300px !important;
		}

.imageHolderNoSize {
		width: auto !important;
		height: auto !important;
		border: solid 2px var(--black);
		background-color: var(--black) !important;
		display: table-cell;
		vertical-align: middle
}

		.imageHolderNoSize img {
				max-width: auto !important;
				max-height: auto !important;
		}



.inventoryChange {
		width: 100px !important;
}

.paginate_button {
		color: var(--black) !important;
		margin-left: 5px !important;
		margin-right: 5px !important;
		font-weight: normal !important;
}

		.paginate_button:hover {
				text-decoration: underline;
				font-weight: bold !important;
		}





.h6eComm {
		color: var(--black) !important;
		width: 100% !important;
		text-align: left;
		font-weight: bold;
		border-bottom: solid 1px var(--black);
		margin-bottom: 20px;
}

section {
		background-color: var(--greyLight);
		padding: 20px;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03) !important;
		min-height: 200px;
}

.MainColorText {
		color: var(--red) !important;
}

.orderStatus {
		float: right !important;
		font-weight: bold !important;
		font-size: 1.3em !important;
		color: var(--black) !important;
}

.fancyButtonGreen {
		border: none;
		background: var(--green);
		color: var(--white) !important;
		font-weight: 100;
		padding: 20px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 1.4em
}

		.fancyButtonGreen:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.eShopH2 {
		font-size: 1.4em !important;
		color: var(--black) !important;
		border-bottom: solid 1px var(--black) !important;
		text-align: left;
		padding: 10px;
		margin-bottom: 20px
}

		.eShopH2 b {
				color: var(--red) !important;
				font-size: 70%;
				padding-left: 15px;
		}

.messageNotifier {
		position: fixed;
		top: 20px;
		right: 20px;
		left: auto !important;
		z-index: 99999;
		width: 450px !important;
		min-height: 48px;
		padding: 12px 16px;
		background-color: var(--greyLight) !important;
		border-top: solid 6px var(--toastYellowBorder);
		border-radius: 8px;
		box-shadow: 0 10px 20px rgba(0,0,0,.16);
		text-align: left;
		color: var(--black) !important;
		font-weight: bold !important;
		line-height: 1.4;
		word-break: break-word;
		display: none;
}

		.messageNotifier.toastYellow {
				background-color: var(--greyLight) !important;
				border-top-color: var(--toastYellowBorder);
				color: var(--black) !important;
		}

		.messageNotifier.toastRed {
				background-color: var(--greyLight) !important;
				border-top-color: var(--toastRedBorder);
				color: var(--black) !important;
		}

		.messageNotifier.toastGreen {
				background-color: var(--greyLight) !important;
				border-top-color: var(--toastGreenBorder);
				color: var(--black) !important;
		}

		.messageNotifier.toastBlue {
				background-color: var(--greyLight) !important;
				border-top-color: var(--toastBlueBorder);
				color: var(--black) !important;
		}

.toastStackContainer {
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 99999;
		width: 450px;
}

		.toastStackContainer .toastStackItem {
				position: relative;
				top: auto;
				right: auto;
				left: auto !important;
				margin-bottom: 10px;
		}

		.toastStackContainer .toastStackItem:last-child {
				margin-bottom: 0;
		}

@media screen and (max-width:640px) {
		.messageNotifier {
				left: 10px !important;
				right: 10px;
				min-width: 0;
				max-width: none;
		}

		.toastStackContainer {
				left: 10px;
				right: 10px;
				min-width: 0;
				max-width: none;
		}

		.toastStackContainer .toastStackItem {
				left: auto !important;
				right: auto;
				width: 100% !important;
		}
}

.tag {
		background-color: var(--black) !important;
		color: var(--white) !important;
		border-radius: 10px !important;
		font-size: 12px !important;
		padding: 5px;
}

.featured {
		color: var(--yellowBright) !important;
		font-size: 16px !important;
		float: right;
		margin-top: 6px;
		margin-right: 5px;
		width: 30px;
}

.newrelease {
		color: var(--blue) !important;
		font-size: 16px !important;
		float: right;
		margin-top: 6px;
		margin-right: 5px;
		width: 30px;
}

.reportHeader {
		color: var(--white) !important;
		font-size: 200%;
		width: 100% !important;
		text-align: center;
		margin-top: 20px;
}

.reportHeading {
		margin-top: 10px !important;
		color: var(--white) !important;
		font-size: 14px !important;
		width: 100% !important;
		text-align: center;
		margin-top: 20px;
}

.readOnly {
		background-color: var(--offWhite) !important;
		color: var(--black) !important;
}

.templateImageHolder {
		height: 300px !important;
		overflow: hidden;
}

.smallTextBox {
		font-size: 14px !important;
		height: 30px !important;
}

.tabs li label {
		font-weight: bold;
		font-family: "Mulish", sans-serif !important;
}

.tabs .tab-content {
		top: 50px !important;
}

.tabs [id^="tab"]:checked + .menuLabel:hover {
		background: var(--red) !important;
		color: var(--white) !important;
}


@media only screen and (max-width: 1100px) {
		.tabs .tab-content {
				position: inherit !important;
				float: left;
		}

		.tabs li {
				float: left;
				display: block;
				width: 100% !important;
		}

				.tabs li label {
						display: inline-block;
						width: 100% !important;
				}
}


.richText-editor {
		font-size: 16px !important;
}

.keepAlive {
		position: absolute; /* Sit on top of the page content */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--black); /* Black background with opacity */
		z-index: 99999; /* Specify a stack order in case you're using a different order for other elements */
		cursor: pointer; /* Add a pointer on hover */
		display: none;
}

.keepAliveContainer {
		width: 50vw;
		height: 300px;
		background-color: var(--offWhite);
		margin: auto;
		margin-top: 100px;
		text-align: center;
		padding: 50px;
}

		.keepAliveContainer b {
				font-size: 2.0em !important;
		}

		.keepAliveContainer p {
				font-size: 14px !important;
		}


.covidNotice {
		background-color: var(--white) !important;
		color: var(--offWhite) !important;
		font-size: 14px !important;
		padding: 20px;
		line-height: 1.6em;
}

		.covidNotice b {
				font-size: 14px;
		}

.h2MoreInfo {
		font-size: 2.5em !important;
		margin-bottom: 40px !important;
		margin-top: 0px !important;
		f
}

.moreInfoUl {
		text-align: center !important;
		list-style-type: none !important;
}

		.moreInfoUl li {
				margin-bottom: 10px;
				font-size: 14px !important;
				font-weight: normal;
		}

.fancyButtonSpecial {
		border: none;
		background: var(--offWhite);
		color: var(--black) !important;
		font-weight: 100;
		padding: 10px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 14px;
		max-width: 95%;
		margin: auto;
}

		.fancyButtonSpecial:hover {
				font-weight: 700 !important;
				letter-spacing: 3px;
				-webkit-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				-moz-box-shadow: 0 5px 40px -10px rgba(0,0,0,.57);
				transition: all .3s ease 0s
		}

.messageNotifyCount {
		margin-left: 5px;
		color: var(--red) !important;
		border-radius: 20px;
		width: auto;
		height: auto;
		font-size: 12px !important;
}

.kwelaButton {
		color: var(--yellow) !important;
		background: none !important;
		border: solid 2px var(--yellow);
		border-radius: 5px;
		padding: 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
}

		.kwelaButton:hover {
				background-color: var(--yellow) !important;
				color: var(--black) !important;
				font-weight: bold !important;
		}

.meelaButton {
		color: var(--white) !important;
		background: none !important;
		border: solid 2px var(--white);
		border-radius: 5px !important;
		padding: 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		font-family: "Mulish", sans-serif !important;
		font-weight: 600 !important;
}

		.meelaButton:hover {
				background-color: var(--red) !important;
				color: var(--white) !important;
				font-weight: bold !important;
				border: solid 2px var(--red);
				text-decoration: none !important;
		}

.meelaButtonNimblHome {
		font-size: 16px !important;
		color: var(--white) !important;
		background-color: var(--blue) !important;
		border: solid 2px var(--blue);
		border-radius: 25px;
		padding: 15px 25px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		font-family: "Mulish", sans-serif !important;
		font-weight: 600 !important;
		letter-spacing: 1.2px !important;
		text-decoration: none !important;
}

		.meelaButtonNimblHome:hover {
				background-color: var(--white) !important;
				color: var(--blue) !important;
				font-weight: bold !important;
				border: solid 2px var(--blue);
		}

.meelaButtonNimbl {
		color: var(--white) !important;
		background: var(--red) !important;
		border: solid 2px var(--red);
		border-radius: 25px;
		padding: 7px 20px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		font-family: "Mulish", sans-serif !important;
		font-weight: 600 !important;
		letter-spacing: 1.1px !important;
}

		.meelaButtonNimbl:hover {
				background-color: var(--black) !important;
				color: var(--white) !important;
				font-weight: bold !important;
				border: solid 2px var(--white);
				text-decoration: none !important;
		}

.meelaButtonNimblBlue {
		font-size: 14px;
		font-weight: normal !important;
		color: var(--white) !important;
		background: none !important;
		border: none;
		border-radius: 5px;
		padding: 10px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		font-family: "Mulish", sans-serif !important;
		font-weight: 600 !important;
		letter-spacing: 1.2px !important;
}

		.meelaButtonNimblBlue:hover {
				background-color: var(--blue) !important;
				color: var(--white) !important;
		}

.sellOnline {
		padding-top: 150px !important;
		padding-bottom: 150px !important;
		background: url(../img/ads/bgMain2.jpg) no-repeat;
		background-position: bottom !important;
		background-size: cover;
		padding-left: 10px;
		padding-right: 10px;
		background-color: var(--black);
		color: var(--black) !important;
		text-align: center;
}

		.sellOnline b {
				font-size: 3.0em;
				line-height: 1.5em;
				color: var(--white) !important;
		}

@media only screen and (max-width: 800px) {
		.h2AlternativeWhite {
				line-height: 2.0em !important;
		}
}

.sortableList li {
		width: 100% !important;
		display: inline-block;
		background-color: var(--yellow);
		color: var(--black);
		padding: 10px !important;
		margin-bottom: 5px;
		font-weight: bold;
}

		.sortableList li b {
				color: var(--red);
				font-weight: bold;
				float: right;
				font-size: 150% !important;
		}

.sortable-ghost {
		background-color: var(--grey) !important;
		color: var(--black) !important;
}

.altUploadButton {
		border: none;
		background: var(--yellow);
		color: var(--black) !important;
		padding: 10px;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		text-align: center !important;
		font-size: 14px;
		margin: auto;
		font-weight: bold !important;
}

		.altUploadButton:hover {
				background: var(--grey) !important;
				color: var(--white) !important;
		}

		.altUploadButton:focus {
				background: var(--yellow) !important;
				color: var(--black) !important;
		}

.registerShopHolder {
		background-color: var(--black) !important;
		color: var(--white) !important;
		position: fixed;
		top: 0;
		left: 0;
		min-height: 100vh;
		height: 100% !important;
		width: 100%;
		z-index: 100000 !important;
		text-align: center;
		padding-top: 100px;
		overflow: scroll;
}

.registerShopContent {
		max-width: 600px;
		min-height: 400px;
}

.registerShopHolder b {
		font-size: 3.0em;
		line-height: 1.5em;
}

.registerShopHolder table {
		background-color: var(--black) !important;
		border: solid 1px var(--black) !important;
}

		.registerShopHolder table td {
				color: var(--white) !important;
				font-size: 16px !important;
		}

.registerShopHolder tr:nth-of-type(even) {
		background-color: var(--black) !important;
}

.field-container {
		position: relative;
		margin-top: 30px;
}

.field {
		display: block;
		width: 100%;
		max-width: 600px !important;
		padding: 15px 10px 0;
		border: solid 1px var(--black);
		font-size: 14px;
		height: 80px !important;
		margin: auto !important;
		text-transform: uppercase;
}

		.field:focus {
				outline: 0 !important;
		}

.floating-label {
		position: absolute;
		pointer-events: none;
		top: 5px;
		left: 10px;
		font-size: 12px;
		opacity: 0;
		padding: 0 2px;
		-webkit-transition: 0.2s ease-in-out;
		transition: 0.2s ease-in-out;
		color: var(--black) !important;
		font-weight: bold;
}

.field:valid + .floating-label {
		opacity: 1;
		top: -20px;
		color: var(--black);
}

.field:focus + .floating-label {
		color: var(--black);
}

.field-underline {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -5px;
		border: 1px solid var(--black) !important;
		z-index: -1;
		padding: 10px 10px 0;
}

.field:focus + .floating-label + .field-underline {
		border-color: var(--black) !important;
}

.maxWidth600 {
		max-width: 600px;
		margin: auto
}




.closeRegisterButton {
		font-size: 16px !important;
		color: var(--white) !important;
		position: absolute;
		top: 20px;
		left: 30px;
}

		.closeRegisterButton:hover {
				color: var(--red) !important;
		}

.stepbystepHolder {
		background-color: var(--offWhite);
		text-align: left;
		margin-bottom: 50px;
		padding: 30px;
}

.googleResultItemsChoose {
		list-style-type: none !important;
}

		.googleResultItemsChoose li {
				font-size: 1.4em;
				font-weight: bold;
				padding: 5px;
		}

				.googleResultItemsChoose li:hover {
						color: var(--red) !important;
						cursor: pointer !important;
				}

.h2MyHomeHeading {
		color: var(--black) !important;
		text-align: left !important;
		border-bottom: solid 1px var(--black) !important;
		margin-bottom: 10px !important;
}

.colorNewBlack {
		color: var(--black) !important;
}

.newOrderNotifyHolder {
		background-color: var(--red) !important;
		color: var(--white) !important;
		font-weight: bold;
		font-size: 16px !important;
}

.kleinBietjieGroter {
		font-size: 16px !important;
		padding-bottom: 5px;
}

.timeHolder {
		height: 15px !important;
		width: 100% !important;
		text-align: left;
		padding-bottom: 30px;
		color: var(--black);
}


.overviewCountItem {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-color: black;
		background-color: black;
		color: white;
		height: 80px !important;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 14px;
		text-align: center;
		float: left;
		margin-bottom: 30px;
		font-weight: 700 !important;
		width: 100%;
}

		.overviewCountItem b {
				font-size: 1.9em !important;
				float: right;
				width: 100%;
				text-align: right;
		}

		.overviewCountItem i {
				font-size: 14px !important;
				float: left;
				width: 100%;
				text-align: left;
				height: 30px;
		}

.overviewCountItemGood1 {
		background-color: var(--blue) !important;
		color: var(--white);
}

.overviewCountItemGood2 {
		background-color: var(--green) !important;
		color: var(--white);
}

.overviewCountItemGood3 {
		background-color: var(--red) !important;
		color: var(--white);
}

.overviewCountItemGood4 {
		background-color: var(--red) !important;
		color: var(--white);
}

.overviewCountItemGood5 {
		border: solid 1px var(--black) !important;
		background-color: var(--offWhite);
		color: rgba(0,0,0,.57);
		min-height: 200px;
}

		.overviewCountItemGood5 ul {
				text-align: left;
				list-style-type: none;
		}

				.overviewCountItemGood5 ul li b {
						font-size: 16px !important;
						text-align: left;
				}

.quickLink {
		width: 100% !important;
		height: 40px !important;
		border-bottom: solid 1px var(--grey);
		margin-top: 10px;
}

		.quickLink a {
				float: left;
				margin-top: 10px !important;
				color: rgba(0,0,0,.57) !important;
		}

		.quickLink b {
				float: right !important;
				font-size: 3.0em;
				margin-top: -3px !important;
				color: var(--grey);
		}

		.quickLink:hover {
		}

				.quickLink:hover a {
						color: var(--red) !important;
				}

				.quickLink:hover b {
						color: rgba(0,0,0,.57) !important;
				}

.storeSettingHolder {
		width: 100%;
		font-size: 1.4em;
		color: var(--red) !important;
		font-weight: bold !important;
		background-color: var(--white);
		height: 140px;
		display: flex;
}

.storeSettingImage {
		height: 140px;
		min-width: 60px;
		font-size: 2.5em;
		padding-top: 30px;
		padding-left: 20px;
}

.storeSettingData {
		height: 125px;
		width: 100%;
		padding: 10px;
		text-align: right !important;
}

		.storeSettingData h5 {
				color: var(--black) !important;
				border-bottom: solid 1px var(--white);
				font-size: 14px !important;
				padding: 0 !important;
				text-align: right;
		}

		.storeSettingData p {
				padding-left: 20px;
				color: var(--black) !important;
		}

.faGreen {
		color: var(--green) !important;
}

.faRed {
		color: var(--red) !important;
}


.helpCentreHolderAlt i {
		font-size: 14px !important;
		color: var(--red);
		margin-right: 10px;
}


.helpCentreHolderAlt b {
		width: 100% !important;
		text-align: center;
}

.helpCentreHolderAlt .DescriptionBox {
		margin-top: 80px !important;
		width: 100% !important;
		text-align: left;
		color: black !important;
		line-height: 20px;
}


.helpCentreHolderTer {
		width: 100% !important;
		height: 200px !important;
		background-color: var(--yellow);
		color: var(--black);
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 40px;
}

		.helpCentreHolderTer i {
				font-size: 14px !important;
				color: var(--red);
				margin-right: 10px;
		}


		.helpCentreHolderTer b {
				width: 100% !important;
				text-align: center;
		}

.helpCentreHolderAlt {
		width: 100% !important;
		height: 200px !important;
		color: var(--white);
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 40px;
}

#button-holder {
		background-color: var(--red);
		cursor: pointer;
		float: left;
		height: 40px;
		margin: 5px 0 0 0;
		text-align: center;
		width: 50px;
		margin-left: -5px;
		border-top: 1px solid var(--red);
		border-right: 1px solid var(--red);
		border-bottom: 1px solid var(--red);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
}

.search-text-input {
		border-top: thin solid var(--grey);
		border-right: thin solid var(--grey);
		border-bottom: 0;
		border-left: thin solid var(--grey);
		box-shadow: 0px 1px 1px 1px var(--grey);
		float: left;
		height: 17px;
		margin: .8em 0 0 .5em;
		outline: 0;
		padding: .4em 0 .4em .6em;
		width: 90% !important;
		border-top-right-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
}

#button-holder i {
		margin: 10px;
		width: 20px;
		color: var(--white) !important;
}

@media only screen and (max-width: 560px) {
		.search-text-input {
				width: 85% !important;
		}
}

canvas {
		margin-bottom: 50px;
}

.uniqueVisitor {
		width: 50px !important;
		height: 25px !important;
		display: flex;
		background-color: rgb(255, 99, 132) !important;
		float: left;
		margin-right: 20px;
}

.uniqueVisits {
		width: 50px !important;
		height: 25px !important;
		display: flex;
		background-color: var(--blue) !important;
		float: left;
		margin-right: 20px;
}

.uniqueData {
		padding-left: 20px;
		line-height: 20px;
}

.shippingRule {
		border-bottom: solid 1px var(--grey);
		background-color: var(--offWhite) !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		border-left: solid 1px var(--offWhite) !important;
		border-right: solid 1px var(--offWhite) !important;
}

.shippingruleHeader {
		padding-top: 20px;
		padding-left: 20px !important;
}

		.shippingruleHeader input[type=radio] {
				display: flex;
				margin-right: 10px !important;
		}

		.shippingruleHeader label {
				text-align: left !important;
				color: var(--black) !important;
				width: auto !important;
				display: flex !important;
				font-weight: bold;
				font-size: 1.4em !important;
		}

.highlightRuleHeader {
		color: var(--white) !important;
}

		.highlightRuleHeader label {
				color: var(--red) !important;
				font-size: 1.8em !important;
		}

.quoteButton {
		border: none !important;
		background: var(--red) !important;
		color: var(--white) !important;
		padding: 10px !important;
		text-transform: uppercase !important;
		border-radius: 6px !important;
		transition: all .3s ease 0s !important;
		text-align: center !important;
		font-size: 14px !important;
		margin: auto !important;
		font-weight: bold !important;
}

.rateItems {
		background-color: var(--white) !important;
		padding: 20px;
		text-align: left !important;
		line-height: 20px !important;
}

		.rateItems b {
				font-size: 16px !important;
		}

		.rateItems label {
				font-weight: 700;
				color: black;
		}

.dynamicTable tr td select {
		text-transform: uppercase !important;
}

.AddZoneTable {
		width: 100% !important;
		text-align: left;
}

		.AddZoneTable tr td {
				font-size: 14px !important;
		}

				.AddZoneTable tr td input {
						font-size: 16px !important;
						width: 100% !important;
						padding: 5px !important;
						text-transform: uppercase;
						font-weight: bold;
				}

				.AddZoneTable tr td textarea {
						color: black;
						font-size: 16px !important;
						width: 100% !important;
						padding: 5px !important;
						height: 200px;
						resize: none;
						text-transform: uppercase;
				}

.dynamicTable tr td {
		text-transform: uppercase !important;
}




.rateCNC {
		display: block !important;
}

.rateHeaderCNC label {
		color: var(--black) !important;
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
		.storeSettingImage {
				display: none !important;
		}

		.storeSettingData h5 {
				text-align: left !important;
		}

		.storeSettingData {
				text-align: left !important;
		}
}

.richText .richText-editor {
}

.urlMenuActive {
		color: var(--red) !important;
}

.extensionIcon {
		font-size: 5.0em !important;
}

.colorPink {
		color: var(--red) !important;
}

.imageHolderHoriz {
		width: 500px !important;
		max-height: 300px !important;
		height: 300px !important;
		overflow: hidden !important;
		border: solid 2px var(--black);
		background-color: var(--white) !important;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
}

		.imageHolderHoriz img {
				width: 500px !important;
				height: 300px;
				object-fit: cover !important;
				object-position: center !important;
				overflow: hidden !important;
		}

.productCategoryMain {
		width: 100% !important;
		color: var(--black) !important;
		font-weight: bold;
		height: auto;
		float: left;
		font-size: 1.4em;
		border-bottom: solid 1px var(--offWhite);
		background-color: var(--offWhite);
		border-top: solid 1px var(--grey);
		border-bottom: solid 1px var(--grey);
		margin-top: -1px;
}

		.productCategoryMain:nth-child(even) {
				background-color: var(--white) !important;
		}


		.productCategoryMain span {
				width: 100% !important;
				float: left;
		}

/*.productCategoryMain span::before {
						content: '';
						display: inline-block;
						width: 5px;
						height: 5px;
						-moz-border-radius: 7.5px;
						-webkit-border-radius: 7.5px;
						border-radius: 7.5px;
						background-color: var(--red);
						margin-bottom: 2px;
						margin-right: 5px !important;
						float: left;
				}*/

.productCategorySec {
		width: 100% !important;
		color: var(--black) !important;
		width: 100% auto;
		float: left;
		font-size: 90% !important;
		display: none;
}

		.productCategorySec span::before {
				content: '';
				display: inline-block;
				width: 7px;
				height: 7px;
				-moz-border-radius: 7.5px;
				-webkit-border-radius: 7.5px;
				border-radius: 7.5px;
				background-color: var(--red);
				margin-bottom: 2px;
				margin-right: 5px !important;
				float: left;
				margin-top: 5px;
		}

.productCategoryTer {
		width: 100% !important;
		color: var(--black) !important;
		width: 100% auto;
		float: left;
		font-size: 90% !important;
		display: none;
}

		.productCategoryTer span::before {
				content: '';
				display: inline-block;
				width: 7px;
				height: 7px;
				-moz-border-radius: 7.5px;
				-webkit-border-radius: 7.5px;
				border-radius: 7.5px;
				background-color: var(--blue);
				margin-bottom: 2px;
				margin-right: 5px !important;
				float: left;
				margin-top: 5px;
		}

.productCategoryHolder {
		margin-top: 40px;
}

		.productCategoryHolder ul {
				list-style-type: none !important;
		}

		.productCategoryHolder a {
				font-size: 10pt !important;
				color: var(--black) !important;
				float: right;
		}

		.productCategoryHolder span {
				padding: 3px;
				padding-left: 0px !important;
				float: left;
		}

				.productCategoryHolder span:hover {
						cursor: pointer;
				}

						.productCategoryHolder span:hover a {
								color: var(--red) !important;
								font-weight: bold !important;
						}

.categoryOverviewHolder1 {
		color: var(--red) !important;
		font-size: 8pt !important;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 8px;
		padding-right: 20px;
		border-radius: 10px;
		float: right;
		width: 200px;
}

.categoryOverviewHolder2 {
		color: var(--blue) !important;
		font-size: 8pt !important;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 8px;
		padding-right: 8px;
		border-radius: 10px;
		float: right;
		width: 150px;
}

.imageHolderHorizPrev {
		width: 500px !important;
		max-height: 300px !important;
		height: 300px !important;
		overflow: hidden !important;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
}

.previewATag {
		padding-top: 2px !important;
		padding-right: 5px;
		float: right !important;
}

.previewBTag {
		width: 400px !important;
		float: left;
		padding-left: 5px;
}

.leftLine {
		padding-left: 0px !important;
}

		.leftLine:before {
				content: '';
				border-top: 1px solid var(--grey);
				background: var(--grey);
				width: 100%;
				float: left;
				width: 10px;
				margin-top: 8px;
				margin-right: 3px;
		}


.expander {
		width: 20px !important;
		padding-left: 5px;
		font-size: 10pt !important;
		color: var(--grey) !important;
		float: left;
}

.collapsibleBorder {
		border-left: solid 1px var(--black) !important;
		float: left;
}

.collapsibleBorder2 {
		float: left;
}

.linerSpacer {
		float: left;
}

.terCategory {
		margin-left: 0px !important;
}

@media only screen and (max-width: 600px) {
		.previewBTag {
				width: auto !important;
				float: left;
				display: table-cell;
		}

		.previewATag {
				width: auto !important;
				float: left;
				width: 50px !important;
				display: table-cell;
		}

		.categoryOverviewHolder1 {
				display: none;
		}

		.categoryOverviewHolder2 {
				display: none;
		}

		.productCategorySec span::before {
				display: none;
		}

		.productCategoryTer {
				padding-left: 20px;
		}
}

.variantOnTheFlyDescription {
		background-color: var(--offWhite);
		color: var(--black);
		padding: 8px;
		text-align: center;
		display: inline-flex;
		margin-right: 10px;
		border-radius: 10px;
}

		.variantOnTheFlyDescription a {
				font-weight: bold;
				margin-left: 10px;
		}

label select {
		margin-top: 5px;
}

.sortable {
		list-style-type: none;
}

		.sortable li {
				width: 100%;
				background-color: var(--white);
				color: var(--red);
				padding: 10px;
				margin-bottom: 2px;
				font-weight: bold;
				font-size: 16px;
		}

		.sortable i {
				color: var(--black);
				margin-right: 10px;
		}

.ui-sortable-helper {
		background-color: var(--red) !important;
		color: var(--white) !important;
}

.dirtyPopup {
		display: none;
		z-index: 10000;
		height: 60px;
		width: 400px;
		background: var(--red);
		color: var(--white);
		top: -10px;
		right: 10px;
		position: fixed;
		transition: all 0.8s;
		padding: 5px;
		padding-top: 30px;
		vertical-align: top;
		text-align: center;
		font-size: 14px !important;
		border-radius: 10px;
}

.tableBiggerText tr td {
		font-size: 16px !important;
}

.uplodifyOrderView {
		font-size: 14px !important;
		width: 100%;
		background-color: var(--yellow);
		padding: 10px;
}

		.uplodifyOrderView h3 {
				font-size: 14px !important;
				font-weight: bold;
				width: 100% auto;
				text-decoration: underline;
				text-align: left;
				color: black !important;
		}

.templateMenu {
		background-color: var(--black);
		padding: 10px;
		list-style-type: none;
		float: left;
		max-width: 300px;
}

		.templateMenu li {
				width: 100%;
				float: left;
				display: block;
				font-size: 11px;
				font-weight: bold;
				margin-bottom: 10px;
		}

.websiteDesignMenuColumn .templateMenuDesign {
		background-color: var(--white);
		border: none;
		border-radius: 12px;
		padding: 14px;
		max-width: none;
		width: 100%;
		float: none;
		margin: 0 0 20px 0;
}

		.websiteDesignMenuColumn .templateMenuDesign li {
				float: none;
				width: 100%;
				margin: 0 0 8px 0;
				font-size: 14px;
		}

		.websiteDesignMenuColumn .templateMenuDesign .templateMenuGroupHeader {
				margin: 6px 0 10px 0;
		}

				.websiteDesignMenuColumn .templateMenuDesign .templateMenuGroupHeader:first-child {
						margin-top: 0;
				}

				.websiteDesignMenuColumn .templateMenuDesign .templateMenuGroupHeader .fancyMenuHeader {
						font-size: 12px;
						letter-spacing: 1px;
				}

		.websiteDesignMenuColumn .templateMenuDesign .sectionLinks {
				display: block;
				width: 100%;
				background-color: var(--greyLight);
				border: solid 1px var(--grey);
				border-radius: 10px;
				color: var(--black) !important;
				padding: 10px 12px;
				line-height: 1.2;
				font-size: 0.8em !important;
		}

				.websiteDesignMenuColumn .templateMenuDesign .sectionLinks:hover {
						background-color: var(--yellowBright);
						border-color: var(--yellowBright);
						color: var(--black) !important;
				}

				.websiteDesignMenuColumn .templateMenuDesign .sectionLinks.activeLink {
						background-color: var(--black);
						border-color: var(--black);
						color: var(--white) !important;
				}

@media only screen and (max-width: 1024px) {
		.websiteDesignMenuColumn .templateMenuDesign {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				background: transparent;
				border: none;
				border-radius: 0;
				padding: 0;
				margin-bottom: 15px;
		}

				.websiteDesignMenuColumn .templateMenuDesign .templateMenuGroupHeader {
						display: none;
				}

				.websiteDesignMenuColumn .templateMenuDesign .templateMenuItem {
						width: auto;
						margin: 0 8px 8px 0;
				}

				.websiteDesignMenuColumn .templateMenuDesign .sectionLinks {
						width: auto;
						border-radius: 20px;
						padding: 8px 14px;
						white-space: nowrap;
				}
}

.websiteDesignOverviewCard {
		background-color: var(--greyLight);
		border: none;
		border-radius: 14px;
		padding: 16px 18px;
    margin-bottom: 30px !important;
}

.websiteDesignHolderGlow {
		box-shadow: 0 6px 20px rgba(9, 45, 64, 0.12);
}

		.websiteDesignOverviewCard .columns {
				padding-left: 0 !important;
				padding-right: 0 !important;
		}

.websiteDesignOverviewLabel {
		color: var(--grey);
		font-size: 13px;
		font-weight: bold;
		letter-spacing: 1px;
		margin-bottom: 6px;
}

.websiteDesignOverviewTitle {
		color: var(--black) !important;		
		font-weight: bold;
		line-height: 1.1;
		margin: 0 0 10px 0 !important;
		padding: 0;
    text-align:left;
}

.websiteDesignOverviewDescription {
		color: var(--black);		
		line-height: 1.5;
		margin: 0 0 14px 0;
}

.websiteDesignOverviewActions {
		text-align: right;
}

		.websiteDesignOverviewActions .websiteDesignOverviewButton {
				display: inline-block;
				min-width: 170px;
				text-align: center;
				margin-left: 10px;
		}

.websiteDesignOverviewFeatureList {
		display: block;
		margin: 8px 0 14px 0;
}

		.websiteDesignOverviewFeatureList .websiteDesignOverviewFeatureTag {
				display: inline-block;
				background-color: var(--yellow);
				border: solid 1px var(--black);
				border-radius: 999px;
				color: var(--black);				
				font-weight: bold;
				padding: 6px 12px;
				margin: 0 8px 8px 0;
        font-size: 0.7em !important;
		}

.websiteDesignOverviewAbout {
		background-color: var(--greyLight);
		border: none;
		border-radius: 10px;
		padding: 12px 14px;
}

.websiteDesignOverviewAboutTitle {
		color: var(--black) !important;		
		font-weight: bold;
		margin: 0 0 8px 0 !important;
}

.websiteDesignOverviewAboutText {
		color: var(--black);		
		line-height: 1.5;
		margin: 0;
}

@media only screen and (max-width: 1024px) {
		.websiteDesignOverviewActions {
				text-align: left;
				margin-bottom: 8px;
		}

				.websiteDesignOverviewActions .websiteDesignOverviewButton {
						margin-left: 0;
						margin-right: 10px;
				}
}

@media only screen and (max-width: 700px) {
		.websiteDesignOverviewCard {
				padding: 12px;
		}

		.websiteDesignOverviewTitle {
				font-size: 30px;
		}

		.websiteDesignOverviewDescription {
				font-size: 16px;
		}

		.websiteDesignOverviewAboutTitle {
				font-size: 24px;
		}

		.websiteDesignOverviewAboutText {
				font-size: 16px;
		}

		.websiteDesignOverviewActions .websiteDesignOverviewButton {
				min-width: 0;
		}
}

.websiteDesignSectionSpacing {
		margin-bottom: 15px;
}

.websiteDesignColorSchemeTableHolder {
		width: 100%;
		overflow-x: auto;
}

.websiteDesignColorSchemeTable {
		margin-bottom: 0;
}

.websiteDesignPresetGrid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -6px;
}

.websiteDesignPresetCard {
    width: 250px;
    margin: 6px;
    padding: 12px;
    border: solid 1px var(--greyLight);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(9, 45, 64, 0.12);
	display: inline-block;
}

.websiteDesignPresetCardActive {
		box-shadow: 0 0 0 3px var(--blue);
}

.websiteDesignPresetCardHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
}

.websiteDesignPresetCardTitle {
		margin: 0 !important;
		color: var(--black) !important;
    font-size: 1.0em !important;
    text-align: left;
    font-weight: bold;
}

.websiteDesignPresetBadge {
    display: inline-block;
    padding: 3px 10px;
    border: solid 1px var(--grey);
    border-radius: 999px;
    color: var(--black);
    background-color: var(--greyLight);
    font-size: 0.7em !important;
}

.websiteDesignPresetBadgeActive {
    display: inline-block;
    padding: 3px 10px;
    border: solid 1px var(--grey);
    border-radius: 999px;
    color: var(--black);
    background-color: var(--green);
}

.websiteDesignPresetSwatches {
		display: flex;
		align-items: center;
		margin-top: 12px;
}

.websiteDesignPresetSwatch {
		display: inline-block;
		width: 15px;
		height: 15px;
		border-radius: 5px;
		border: solid 1px var(--grey);
		margin-right: 8px;
		background-color: var(--grey);
}

.websiteDesignPresetSwatchFallback {
		background-color: var(--offWhite);
}

.websiteDesignPresetActionRow {
		margin-top: 12px;
		text-align: right;
}

.websiteDesignPresetMuted {
		display: inline-block;
		color: var(--red);
}

.websiteDesignColorSchemeNotice {
		margin-top: 10px;
}

.websiteDesignColorSchemeUpgradeBanner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px;
		border: dashed 1px var(--red);
    background-color: var(--yellow);
		border-radius: 10px;
}

.websiteDesignColorSchemeUpgradeText {
		padding-right: 12px;    
}

.websiteDesignCustomSchemeHeading {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
}

.websiteDesignCustomSchemeBadge {
		line-height: 1;
}

.websiteDesignColorPickerCell {
		padding-top: 10px;
}

.websiteDesignCustomColorTile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    border: solid 1px var(--grey);
    box-shadow: 0 6px 20px rgba(9, 45, 64, 0.12);
}

		.websiteDesignCustomColorTile .sp-replacer {
				margin-right: 0 !important;
				margin-left: 10px;
		}
    .websiteDesignCustomColorTile b {
            font-size: 0.8em !important;
    }
    .websiteDesignCustomColorTile p {
        font-size: 1em !important;
        font-weight: normal;
    }

    .websiteDesignColorSchemeActionRow {
        padding-top: 10px;
        text-align: right;
    }

		.websiteDesignColorSchemeActionRow .meelaButton {
				margin-left: 8px;
		}

.websiteDesignCustomPreviewCard {
		margin-top: 10px;
		border: solid 1px var(--grey);
		border-radius: 12px;
		background-color: var(--greyLight);
		overflow: hidden;
}

.websiteDesignCustomPreviewHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		border-bottom: solid 1px var(--grey);
}

.websiteDesignCustomPreviewMenu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 1px var(--grey);
		border-radius: 12px;
		padding: 10px 12px;
		margin: 12px;
}

.websiteDesignCustomPreviewHero {
		border-radius: 12px;
		padding: 12px;
		margin: 0 12px 12px 12px;
		min-height: 100px;
		border: solid 1px var(--grey);
		background-color: var(--offWhite);
		display: flex;
		align-items: flex-end;
}

.websiteDesignCustomPreviewButtons {
		display: flex;
		margin: 0 12px 12px 12px;
}

.websiteDesignCustomPreviewButtons span {
		flex: 1;
		height: 34px;
		border: solid 1px var(--grey);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.websiteDesignCustomPreviewButtons span:first-child {
				margin-right: 8px;
		}

@media only screen and (max-width: 900px) {
		.websiteDesignPresetCard {
				width: calc(100% - 12px);
		}

		.websiteDesignColorSchemeUpgradeBanner {
        background-color: var(--red) !important;
        color: var(--black) !important;
				display: block;
		}

		.websiteDesignColorSchemeUpgradeBanner .meelaButton {
				margin-top: 10px;
		}

		.websiteDesignCustomPreviewCard {
				margin-top: 16px;
		}
}

.greyHolder {
		background-color: var(--white);
}

.h2GreyHolder {
		background-color: var(--greyLight);
		width: 100%;
		margin: 0px !important;
		color: var(--black) !important;
		text-align: left;
		padding-left: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 30px !important;
}

.h2YellowHolder {
		background-color: var(--black);
		width: 100%;
		margin: 0px !important;
		margin-bottom: 20px !important;
		color: var(--white) !important;
		text-align: left;
		padding-left: 15px;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 130%;
		border-radius: 10px;
}

.colorscheme {
		width: 50px !important;
		height: 50px !important;
		border: solid 5px var(--white);
		float: left;
		border: solid 1px var(--black);
		margin-right: 10px !important;
}

.colorschemeName {
		width: 100px !important;
		height: 50px !important;
		float: left;
		margin-right: 10px !important;
		padding-top: 20px;
		font-weight: bold;
		font-size: 20px;
}

.noBgTable {
		border-spacing: 0;
		border-collapse: collapse;
}

		.noBgTable tr th {
				background-color: var(--grey) !important;
				color: var(--white) !important;
				border-bottom: solid 1px var(--offWhite);
				font-size: 14px;
				line-height: 18px;
		}

		.noBgTable tr td {
				background-color: var(--white) !important;
				border-bottom: solid 1px var(--offWhite);
				font-size: 14px;
				line-height: 18px;
		}

.imageHolderLogo {
		width: 350px !important;
		height: 80px !important;
		border: solid 2px var(--black);
		background-color: var(--white) !important;
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
}

		.imageHolderLogo img {
				max-width: 350px !important;
				max-height: 80px !important;
		}

.imageHolderBanner {
		width: 400px !important;
		max-width: 400px !important;
		height: auto !important;
		border: solid 2px var(--black);
		background-color: var(--white) !important;
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
}

		.imageHolderBanner img {
				max-width: 400px !important;
				max-height: 300px !important;
				width: 100%;
		}


.h2EComm {
		font-size: 15px !important;
		color: var(--black) !important;
		border-bottom: solid 1px var(--black) !important;
		text-align: left;
		padding: 10px;
		font-weight: 700;
		margin-bottom: 30px
}

		.h2EComm b {
				color: var(--blue) !important;
				font-size: 25px;
				padding-left: 15px;
		}

				.h2EComm b:after {
						content: " | ";
				}



.fancyButtonGeneralSmallPageBack_a {
		border: none;
		background: var(--grey);
		color: var(--offWhite) !important;
		font-weight: normal !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		height: 40px !important;
		line-height: 15px !important;
		margin-top: 10px;
		min-width: 150px;
		padding-top: 12px;
		padding-left: 10px;
		padding-right: 10px;
}

.fancyButtonGeneralSmallPageBackPink_a {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: normal !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		height: 40px !important;
		line-height: 15px !important;
		margin-top: 10px;
		min-width: 150px;
		padding-top: 12px;
		padding-left: 10px;
		padding-right: 10px;
}

.fancyButtonGeneralSmallPageBack {
		border: none;
		background: var(--grey);
		color: var(--offWhite) !important;
		font-weight: normal !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		height: 40px !important;
		line-height: 15px !important;
		margin-top: 10px;
		width: 150px;
}

.fancyButtonGeneralSmallPageBackPink {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: normal !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		height: 40px !important;
		line-height: 15px !important;
		margin-top: 10px;
		width: 150px;
}

.fancyButtonGeneralSmall {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
}

.fancyButtonGeneralSmall_a {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
		padding-top: 17px;
}

.fancyButtonGeneralSmallGreen {
		border: none;
		background: var(--blue);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
}

.fancyButtonGeneralSmallGreen_a {
		border: none;
		background: var(--blue);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
		padding-top: 17px;
}

.fancyButtonGeneralSmall2 {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
}

.fancyButtonGeneralSmall2_a {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
		padding-top: 17px;
		padding-left: 10px;
		padding-right: 10px;
}



.fancyButtonGeneralSmallDanger {
		border: none;
		background: var(--offWhite) !important;
		color: var(--white) !important;
		font-weight: bold !important;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		height: 50px !important;
		line-height: 15px !important;
}

.fancyButtonGeneralSmallSuccess {
		border: none;
		background: var(--green) !important;
		color: var(--white) !important;
		font-weight: 700;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		padding: 13px !important;
}

.fancyButtonGeneralSmallSuccess_a {
		border: none;
		background: var(--green) !important;
		color: var(--white) !important;
		font-weight: 700;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
		padding: 13px !important;
		padding-top: 10px;
}



.fancyButtonGeneralSmallPublish {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: 100;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px !important;
		width: 100px !important;
}

.fancyButtonGeneralSmallLightGreen {
		border: none;
		background: var(--blue);
		color: var(--white) !important;
		font-weight: bold;
		padding: 15px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 16px;
}

		.fancyButtonGeneralSmallLightGreen:hover {
				border: none;
				background: var(--blue);
				color: var(--white) !important;
				text-transform: uppercase;
				border-radius: 6px;
				display: inline-block;
				transition: all .3s ease 0s;
				display: block;
				text-align: center !important;
				font-size: 14px;
		}



.fancyButtonGeneralSmallNext {
		border: none;
		background: var(--red);
		color: var(--white) !important;
		font-weight: bold;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 14px;
		width: 100px !important;
		float: right;
}

.fancyButtonGeneralSmallBack {
		border: none;
		background: var(--grey);
		color: var(--white) !important;
		font-weight: bold;
		padding: 5px;
		text-transform: uppercase;
		border-radius: 6px;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 14px;
		width: 100px !important;
}

.fancyButtonGeneralSmallTemplate {
		float: left;
		border: none;
		background: var(--yellow) !important;
		color: var(--black) !important;
		font-weight: 700 !important;
		padding: 10px;
		text-transform: uppercase;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		margin-left: 5px;
		border-radius: 3px;
}

.fancyButtonGeneralSmallTemplateSelect {
		float: left;
		border: none;
		background: var(--blue) !important;
		color: var(--white) !important;
		font-weight: 700 !important;
		padding: 10px;
		text-transform: uppercase;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		margin-left: 5px;
		border-radius: 3px;
}

.fancyButtonGeneralSmallTemplatePreview {
		float: left;
		border: none;
		background: var(--red) !important;
		color: var(--white) !important;
		font-weight: 700 !important;
		padding: 10px;
		text-transform: uppercase;
		display: inline-block;
		transition: all .3s ease 0s;
		display: block;
		text-align: center !important;
		font-size: 12px;
		margin-left: 5px;
		border-radius: 3px;
}

.fancyButtonSmallStyle {
		font-size: 10px !important;
}

.fancyButtonGeneralSmallTemplate:hover {
		box-shadow: 0 5px 16px 0 rgba(0,0,0,0.1), 0 2px 8px 0 rgba(0,0,0,0.1);
}

.fancyButtonGeneralSmallTemplateSelect:hover {
		box-shadow: 0 5px 16px 0 rgba(0,0,0,0.1), 0 2px 8px 0 rgba(0,0,0,0.1);
}

.fancyButtonGeneralSmallTemplatePreview:hover {
		box-shadow: 0 5px 16px 0 rgba(0,0,0,0.1), 0 2px 8px 0 rgba(0,0,0,0.1);
}

.rowLabel10 label {
		margin-bottom: 10px !important;
}

.templateColorPreview {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: solid 1px var(--black);
		float: left;
		display: inline-flex;
		margin-top: 12px;
}


.loginForm {
		background-color: var(--offWhite);
		width: 90%;
		max-width: 500px !important;
		margin: auto;
		margin-top: 50px;
		min-height: 380px;
		padding-top: 20px;
		box-shadow: 0 5px 16px 0 rgba(0,0,0,0.1), 0 2px 8px 0 rgba(0,0,0,0.1);
}

		.loginForm input[type=text], input[type=password] {
				font-weight: 700;
				max-width: 90%;
				margin: auto
		}

.loginItem {
		float: left;
		width: 100%;
		margin-top: 10px;
		padding-left: 20px;
}

		.loginItem a {
				color: var(--red) !important;
				width: 100px;
		}

				.loginItem a:hover {
						color: var(--black) !important;
						text-decoration: underline;
				}

input[type=submit] {
		cursor: pointer;
}

.whiteRegister {
		background-color: var(--white) !important;
		color: var(--black) !important;
}

.blackRegister {
		background-color: var(--black);
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		padding: 30px;
		padding-top: 50px;
		text-align: center;
		line-height: 1.5em;
		z-index: 2147483647 !important;
}

		.blackRegister b {
				font-size: 25px;
				color: var(--white) !important;
				width: 100%;
				float: left;
				margin-bottom: 30px !important;
		}

		.blackRegister input[type=password], .blackRegister input[type=text] {
				margin: 0px !important;
				width: 100% !important;
				max-width: 100% !important;
				color: var(--red) !important;
		}

		.blackRegister label {
				margin-bottom: 20px;
		}

				.blackRegister label select {
						margin: 0px !important;
				}

		.blackRegister .fullWidth {
				max-width: 100% !important;
				width: 100% !important;
		}

		.blackRegister i {
				color: var(--white);
				padding: 20px !important;
				float: left;
				width: 100%;
				font-size: 12px;
				font-weight: normal !important;
		}

.storeNameURLPrefix {
		position: relative;
		float: left;
		width: 100%;
}

		.storeNameURLPrefix:after {
				position: absolute;
				right: 10px;
				top: 10px;
				content: '.benimble.store';
				color: var(--red) !important;
				font-weight: bold;
				margin-top: 5px !important;
		}

.pageToolTip {
		margin-left: 5px;
}

.dropdown {
		position: relative;
		display: inline-block;
}

.dropdown-content {
		display: none;
		position: absolute;
		background-color: var(--white);
		min-width: 200px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		padding: 12px 16px;
		z-index: 1;
		width: auto !important;
}

.dropdown:hover .dropdown-content {
		display: block;
}

.fancyMenu2 {
		border: none;
		color: var(--black) !important;
		padding: 5px;
		text-transform: lowercase;
		border-radius: 6px;
		display: inline-block;
		display: block;
		font-size: 14px !important;
		border-bottom: none !important;
}

		.fancyMenu2:hover {
				color: var(--red) !important;
				background: 0 0;
				border-bottom: solid 3px var(--black);
				border-radius: 0;
		}

.fullWidth2 {
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
}

.menuGrey {
		background-color: var(--offWhite) !important;
}

		.menuGrey li a {
				color: var(--black) !important;
				font-size: 1.3em !important;
		}

.nimblBackground {
		background-color: var(--black) !important;
}

		.nimblBackground li a {
				border-bottom: none !important;
		}

				.nimblBackground li a:hover {
						border-bottom: none !important;
						color: var(--red) !important;
				}

.nimblHeader {
		position: fixed;
		top: 0;
		left: 0;
		background-color: var(--white) !important;
		width: 100%;
		z-index: 2147483639;
}

		.nimblHeader img {
				float: left;
				padding: 10px;
		}

		.nimblHeader .spanButton {
				float: right;
				padding-top: 5px;
				margin-top: 16px;
		}

.nimblMenu {
		background-color: transparent !important;
		float: right;
		width: 100%;
}



.scrollhide {
		visibility: visible;
		opacity: 1;
		transition: visibility 0s, opacity 0.5s linear;
		min-height: 60px;
}

.scrollhideAction {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s, opacity 0.5s linear;
}

.scrollLockMenu {
		max-height: 100px;
		z-index: 2147483647 !important;
		position: fixed;
		top: 0px;
		left: 0px;
		transition: left 1s linear;
		background: rgba(255,100,100,.6); /* rgba(255,255,255,.6);*/
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		position: absolute;
		z-index: 5;
		height: 100%;
		display: block !important;
}

		.scrollLockMenu ul li a {
				color: var(--black);
				margin-top: 15px;
		}

.h2Nimble {
		font-family: "Mulish", sans-serif !important;
		margin: 0 auto 24px auto;
		font-style: normal;
		font-weight: 900;
		font-size: 52px;
		line-height: 90px;
		text-align: left;
		letter-spacing: .3px;
		word-wrap: break-word;
}

		.h2Nimble span {
				background-image: linear-gradient(90deg,var(--black) 20%,var(--red) 100%);
				background-size: 100%;
				background-repeat: repeat;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				-moz-text-fill-color: transparent;
				-webkit-box-decoration-break: clone;
		}

.h1Alternative_n {
		color: var(--black) !important;
}

		.h1Alternative_n b {
				color: var(--black) !important;
		}

.h2Alternative_n {
		color: var(--black) !important;
		font-size: 16px;
}

.h2AlternativeWhite_n {
		color: var(--white) !important;
		font-size: 16px;
}

.h3Alternative_n {
		font-weight: 700;
		margin-top: 20px;
		margin-bottom: 20px;
		color: var(--red) !important;
		font-size: 16px;
}

.h3nimbl {
		color: var(--black) !important;
		font-size: 40px !important;
		text-align: center !important;
		font-feature-settings: "ss02" on;
}

.h3nimbl_Custom1 {
		color: var(--black) !important;
		font-size: 16px !important;
		text-align: right;
		font-weight: bold;
}

		.h3nimbl_Custom1 b {
				font-size: 30px;
				color: var(--blue) !important;
		}

.h3nimbl_Custom2 {
		color: var(--black) !important;
		font-size: 16px !important;
		text-align: left;
		font-weight: bold;
}

		.h3nimbl_Custom2 b {
				font-size: 30px;
				color: var(--blue) !important;
		}

.nibleHeaderFA {
		float: left;
		margin: 0 !important;
		padding: 0 !important;
		color: var(--blackText) !important;
		font-size: 14px !important;
		padding: 10px !important;
		width: 100%;
		text-align: center;
		line-height: 1.5em;
		text-align: center;
}

		.nibleHeaderFA b {
				font-size: 20px !important;
				color: var(--black);
		}

.cardColumn {
		color: var(--blue);
		font-size: 5.0em;
		float: left;
		width: 100%;
		text-align: center;
		padding: 20px;
}

.cardHolder {
		padding: 20px;
		min-height: 380px;
		width: 100%;
		text-align: center;
}

.nimblFont_L {
		font-size: 17px;
		line-height: 25px;
}

.marginRight10px {
		margin-right: 10px !important;
}

.nimblSmallMenuButton {
		color: var(--white) !important;
		float: right;
}

.scrollLockMenu .nimblSmallMenuButton {
		color: var(--black) !important;
		margin-top: 30px !important;
		font-size: 20px !important;
}

.nimblContent ul li {
		width: 100%;
}

.nimblFooter {
		background-color: var(--offwhite);
		padding-top: 50px;
		padding-bottom: 50px;
		min-height: 300px;
		margin-top: 0px !important;
		border-top: solid 1px var(--blue)
}

		.nimblFooter h3 {
				color: var(--blue) !important;
		}

.nimblUl {
		list-style-type: none;
}

		.nimblUl li {
				font-weight: bold;
		}

				.nimblUl li b {
						color: var(--blackText) !important;
						margin-right: 10px;
				}

				.nimblUl li a {
						color: var(--blackText) !important;
				}

.nimblRow {
		background-color: var(--black) !important;
		min-height: 40px;
		padding: 20px;
		color: var(--white) !important;
}

.courierResultCost {
		font-size: 30px;
		color: var(--yellowBright) !important;
}

		.courierResultCost i {
				font-size: 12px;
				color: var(--yellowBright);
		}

.service_pudo, .service_ep, .service_tcg, .service_bobgo {
		box-shadow: 0 1px 6px 0 rgb(0 0 0 / 25%);
		margin-bottom: 50px;
}

.fullResults > .row .row {
}

.tiny {
		width: 5px !important;
		transition: width 0.5s ease-in-out;
}

		.tiny ul {
				display: none;
				transition: width 0.5s ease-in-out;
		}

.fourofour {
		background-color: rgba(0,0,0,.57);
		width: 100vw;
		min-height: 400px;
		text-align: center;
		background-image: url(../img/404bg.jpg);
}

.borderHighlight {
		box-shadow: 0 1px 6px 0 rgb(0 0 0 / 25%);
}

.pretext {
		font-size: 8px !important;
		color: var(--red) !important;
		font-weight: bold !important;
		margin-right: 5px;
}

.friendlyURL a {
		font-size: 10px;
		color: var(--red);
}

.statusGlow {
		-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.2));
}

.subStatus {
		float: right;
		font-weight: bold;
		font-size: 10px;
		width: 100%;
		text-align: right;
		padding-top: 5px;
}

.statusInformation {
		width: 100%;
		float: left;
		text-align: left;
		font-weight: bold;
		font-size: 10px;
}

.overhang-message {
		width: 100% !important;
}

.contentItem {
		padding: 20px;
}

.h3nimbl b {
		color: var(--black) !important;
}

.loader-6 span {
		display: block;
		position: absolute;
		top: 100px;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		height: 62px;
		width: 62px;
}

		.loader-6 span::before,
		.loader-6 span::after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				height: 62px;
				width: 62px;
				border: 2px solid var(--white);
				border-radius: 50%;
				opacity: 0;
				-webkit-animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
				animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
		}

@-webkit-keyframes loader-6-1 {
		0% {
				-webkit-transform: translate3d(0, 0, 0) scale(0);
				opacity: 1;
		}

		100% {
				-webkit-transform: translate3d(0, 0, 0) scale(1.5);
				opacity: 0;
		}
}

@keyframes loader-6-1 {
		0% {
				transform: translate3d(0, 0, 0) scale(0);
				opacity: 1;
		}

		100% {
				transform: translate3d(0, 0, 0) scale(1.5);
				opacity: 0;
		}
}

.loader-6 span::after {
		-webkit-animation: loader-6-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
		animation: loader-6-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
}

@-webkit-keyframes loader-6-2 {
		0% {
				-webkit-transform: translate3d(0, 0, 0) scale(0);
				opacity: 1;
		}

		100% {
				-webkit-transform: translate3d(0, 0, 0) scale(1);
				opacity: 0;
		}
}

@keyframes loader-6-2 {
		0% {
				transform: translate3d(0, 0, 0) scale(0);
				opacity: 1;
		}

		100% {
				transform: translate3d(0, 0, 0) scale(1);
				opacity: 0;
		}
}

.transparencyGrid {
		background-color: var(--white);
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjkzNyA3LjkzOCIgaGVpZ2h0PSIzMCIgd2lkdGg9IjMwIj48cGF0aCBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgZD0iTS4wMTQuMDE0SDMuOTdWMy45N0guMDE0ek0zLjk3IDMuOTY4aDMuOTU0djMuOTU1SDMuOTd6IiBmaWxsPSIjZWVlZmYwIi8+PC9zdmc+");
		background-size: 25px;
}


/*BUTTONS*/
.button_red {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--red);
		background-color: var(--red) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		border-radius: 25px !important;
}

		.button_red:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--red);
				background: none !important;
				color: var(--red) !important;
		}

.button_blue {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--blue);
		background-color: var(--blue) !important;
		color: var(--offwhite) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		font-family: "Mulish", sans-serif !important;
		border-radius: 25px !important;
}

		.button_blue:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--blue);
				background: none !important;
				color: var(--blue) !important;
		}

.button_green {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--blue);
		background-color: var(--blue) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		font-family: "Mulish", sans-serif !important;
		border-radius: 25px !important;
}

		.button_green:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--blue);
				background: none !important;
				color: var(--blue) !important;
		}

.button_black {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--black);
		background-color: var(--black) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		font-family: "Mulish", sans-serif !important;
		border-radius: 25px !important;
}

		.button_black:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--black);
				background: none !important;
				color: var(--black) !important;
		}

.button_grey {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--grey);
		background-color: var(--grey) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		font-family: "Mulish", sans-serif !important;
		border-radius: 25px !important;
}

		.button_grey:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--grey);
				background: none !important;
				color: var(--grey) !important;
		}

.button_yellow {
		font-size: 12px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--yellowBright);
		background-color: var(--yellowBright) !important;
		color: var(--black) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		font-family: "Mulish", sans-serif !important;
		height: 36px !important;
		line-height: 20px;
		border-radius: 25px !important;
}

		.button_yellow:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--yellowBright);
				background: none !important;
				color: var(--black) !important;
		}

.dt-button {
		font-size: 11px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--grey);
		background-color: var(--grey) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		text-transform: uppercase;
		border-radius: 25px !important;
}

		.dt-button:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--grey);
				background: none !important;
				color: var(--grey) !important;
		}

.button_left {
		float: left;
		text-align: center;
}

.button_right {
		float: right;
		text-align: center;
}

.button_centre {
		margin: auto;
		text-align: center;
}

.button_marginRight {
		margin-right: 10px;
}

.tabs .tab-content {
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03) !important;
}

.dashboard_holder {
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03) !important;
}

.overhang {
		background-color: var(--red) !important;
		color: var(--white) !important;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03) !important;
		border-bottom: none !important;
}

.tabs [id^="tab"]:checked + .menuLabel {
		background-color: var(--black) !important;
		color: var(--white) !important;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
		font-size: 14px !important;
		height: 40px !important;
		border-radius: 5px;
}

input::placeholder {
		color: var(--grey) !important;
		font-size: 14px !important;
		font-weight: normal !important;
}

table {
		font-size: 14px;
		width: 100%;
}

.nimblMenu li .LoginButtonExxlaim {
		font-size: 14px !important;
		padding: 7px 15px;
		font-weight: bold !important;
		border: solid 2px var(--blue);
		background-color: var(--blue) !important;
		color: var(--white) !important;
		display: inline-block;
		margin-bottom: 5px;
		margin-top: 5px;
		height: 36px !important;
		line-height: 20px;
		text-transform: uppercase;
		border-radius: 5px !important;
}

		.nimblMenu li .LoginButtonExxlaim:hover {
				padding: 7px 15px;
				font-weight: bold !important;
				border: solid 2px var(--blue) !important;
				background: none !important;
				color: var(--blue) !important;
		}


#content {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: -webkit-transform .4s ease;
		-moz-transition: -moz-transform .4s ease;
		-ms-transition: -ms-transform .4s ease;
		-o-transition: -o-transform .4s ease;
		transition: transform .4s ease;
		-webkit-transform-origin: 0% 50%;
		-moz-transform-origin: 0% 50%;
		-ms-transform-origin: 0% 50%;
		-o-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: var(--white);
}

.active #content {
		-webkit-transform: translateX(300px) rotateY(15deg);
		-moz-transform: translateX(300px) rotateY(15deg);
		-ms-transform: translateX(300px) rotateY(15deg);
		-o-transform: translateX(300px) rotateY(15deg);
		transform: translateX(300px) rotateY(15deg);
}

.scrollMenu {
		display: none
}

.subHolder {
		width: 300px;
		height: 420px;
		margin: auto;
		background-color: #f4f2ef;
		color: var(--black);
		border-radius: 20px;
		padding: 20px;
		border: solid 2px var(--black);
}

		.subHolder h2 {
				font-size: 30px;
				color: var(--red) !important;
				margin-top: 30px;
		}

		.subHolder b {
				font-size: 16px;
				font-size: 40px;
				display: block;
				text-align: center;
				margin-bottom: 20px;
		}

		.subHolder span {
				font-size: 12px;
				display: block;
				text-align: center;
				margin-bottom: 10px;
				height: 40px;
		}

		.subHolder a {
				font-size: 12px;
				display: block;
				text-align: center;
				margin-bottom: 20px;
		}

		.subHolder .meelaButton {
				display: block;
				margin: auto;
		}

		.subHolder div {
				margin-bottom: 20px;
				height: 100px;
				display: block;
				width: 100%;
				text-align: center;
		}

				.subHolder div span {
						font-size: 11px !important;
						margin-bottom: 5px !important;
						height: 25px !important;
						color: var(--black);
				}

.subHolderBlue {
		width: 300px;
		height: 420px;
		margin: auto;
		background-color: var(--black);
		color: var(--black);
		border-radius: 20px;
		padding: 20px;
		border: solid 2px var(--black);
}

		.subHolderBlue h2 {
				font-size: 30px;
				color: var(--red) !important;
				margin-top: 30px;
		}

		.subHolderBlue b {
				font-size: 16px;
				font-size: 40px;
				display: block;
				text-align: center;
				margin-bottom: 20px;
				color: var(--white);
		}

		.subHolderBlue span {
				font-size: 12px;
				display: block;
				text-align: center;
				margin-bottom: 10px;
				height: 40px;
				color: var(--offwhite);
		}

		.subHolderBlue a {
				font-size: 12px;
				display: block;
				text-align: center;
				margin-bottom: 20px;
		}

		.subHolderBlue .meelaButton {
				display: block;
				margin: auto;
		}

		.subHolderBlue div {
				margin-bottom: 20px;
				height: 100px;
				display: block;
				width: 100%;
				text-align: center;
				color: var(--offwhite);
		}

				.subHolderBlue div span {
						font-size: 11px !important;
						margin-bottom: 5px !important;
						height: 25px !important;
						color: var(--offwhite);
				}

table tbody tr:hover {
		background-color: var(--yellow);
}

.tabs {
		width: 99% !important;
		float: left;
		list-style: none;
		position: relative;
		margin: 20px 0 0 10px;
		text-align: left;
}

		.tabs li {
				float: left;
				display: block;
				width: auto;
		}

		.tabs input[type="radio"] {
				position: absolute;
				top: 0;
				left: -9999px;
		}

.menuLabel {
		font-size: 12px;
		display: inline-block;
		padding: 10px 10px;
		border-radius: 2px 2px 0 0;
		font-weight: normal;
		text-transform: uppercase;
		cursor: pointer;
		position: relative;
		top: 14px;
		border-radius: 5px;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		border: solid 1px var(--black);
		color: var(--black);
}

.tabs .menuLabel:hover {
		background: var(--red);
		color: var(--black);
}

.tabs .tab-content {
		z-index: 2;
		display: none;
		overflow: hidden;
		width: 100%;
		line-height: 25px;
		padding: 25px;
		position: absolute;
		top: 53px;
		left: 0;
		background: #eee;
		border-top: solid 3px var(--black);
}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
		display: block;
}

.richText-help {
		display: none !important;
}

.OrderParcelDetailsTable tr td {
		font-size: 12px !important;
}

.extensionMenuLabel {
		display: inline-block;
		padding: 10px 10px;
		border-radius: 2px 2px 0 0;
		font-weight: normal;
		text-transform: uppercase;
		background: var(--green);
		cursor: pointer;
		position: relative;
		top: 14px;
		border-radius: 5px;
		font-size: 12px;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		color: var(--blackText);
		border: solid 1px var(--green);
}

.tabs .extensionMenuLabel:hover {
		background: none;
		color: var(--black);
		border: solid 1px var(--green);
}

.divVariantCurrent input[type=submit] {
		margin-right: 10px;
}

		.divVariantCurrent input[type=submit]:last-child {
				margin-right: 0px;
		}

.TrackDetails {
		max-width: 1200px !important;
}




.richText-help {
		display: none !important;
}

.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
		content: counter(stepNum);
		font-family: inherit;
		font-weight: 700;
}

.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
		background-color: #B11843;
}

.multi-steps {
		display: table;
		table-layout: fixed;
		width: 100%;
		margin: auto;
}

		.multi-steps > li {
				counter-increment: stepNum;
				text-align: center;
				display: table-cell;
				position: relative;
				color: #05a081;
				width: 25%;
		}

				.multi-steps > li:before {
						content: "";
						content: "✓;";
						content: "𐀃";
						content: "𐀄";
						content: "✓";
						display: block;
						margin: 0 auto 4px;
						background-color: #fff;
						width: 36px;
						height: 36px;
						line-height: 32px;
						text-align: center;
						font-weight: bold;
						border-width: 2px;
						border-style: solid;
						border-color: #05a081;
						border-radius: 50%;
				}

				.multi-steps > li:after {
						content: "";
						height: 2px;
						width: 100%;
						background-color: #05a081;
						position: absolute;
						top: 16px;
						left: 50%;
						z-index: -1;
				}

				.multi-steps > li:last-child:after {
						display: none;
				}

				.multi-steps > li.is-active:before {
						background-color: #fff;
						border-color: #B11843;
						color: #B11843;
				}

				.multi-steps > li.is-active ~ li {
						color: #B11843;
				}

						.multi-steps > li.is-active ~ li:before {
								background-color: #fff !important;
								;
								border-color: #B11843;
						}

		.multi-steps li.is-active {
				color: #B11843;
				font-weight: bold;
		}

.statusDate {
		font-weight: bold;
		font-size: 9px;
		color: #B11843;
}

.trackEvent {
		width: 100% !important;
		float: left;
		font-size: 11px;
		line-height: 15px;
		padding-bottom: 10px;
}

.trackEventDate {
		width: 100px;
		float: left;
		font-weight: bold;
}

.time {
		font-weight: normal;
		display: block;
}

.trackEventStatus {
		float: left;
		font-weight: bold;
}

		.trackEventStatus .location {
				color: #B11843 !important;
				font-size: 8px !important;
				padding: 3px;
		}

		.trackEventStatus .statusDescription {
				margin-right: 5px;
				display: inline-flex;
				-ms-flex-align: center;
				align-items: center;
				padding: .3rem .8rem;
				background-color: #ccc;
				border: var(--p-override-zero);
				border-radius: 2rem;
				font-size: 8px;
				line-height: 15px;
				color: #000;
				font-weight: bold;
				margin-top: 3px;
				border-right: solid 3px #fff;
		}

.TrackEventDetails {
		padding-top: 5px;
		font-size: 13px;
		width: 100%;
		font-weight: bold;
}

.circle {
		width: 30px;
		height: 30px;
		background: #05a081;
		border-radius: 100px;
		position: relative;
		margin: auto;
}

.trackLine b {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		color: #fff;
		font-size: 10px !important;
}

.vertical-line {
		width: 3px;
		height: 20px;
		background: #05a081;
		margin: 6px auto 0 auto;
}

.lineEnd .circle {
		width: 30px;
		height: 30px;
		background: #B11843;
		border-radius: 100px;
		position: relative;
		margin: auto;
}

.lineFirst .circle {
		width: 30px;
		height: 30px;
		background: var(--grey);
		border-radius: 100px;
		position: relative;
		margin: auto;
}

.lineFirst .vertical-line {
		display: none;
}

.trackLine {
		float: left;
		width: 50px;
		margin-right: 20px;
}

.trackEvent:hover .trackEventStatus b {
		color: #B11843 !important;
		font-size: 16px;
}

.trackEvent:hover .trackEventStatus .statusDescription {
		background-color: #B11843 !important;
		color: #fff;
}

.trackEvent:hover .trackEventStatus .location {
		color: #fff;
}

.status_INTRANSIT {
		background-color: var(--white) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_EXCEPTION {
		background-color: var(--red) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_OUTFORDELIVERY {
		background-color: var(--blue) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_DELIVERED {
		background-color: var(--green) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_COLLECTED {
		background-color: var(--black) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_PENDING {
		background-color: var(--yellowBright) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.status_CREATED {
		background-color: var(--yellowBright) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

[class*="status_"] {
		background-color: var(--white) !important;
		padding: 3px 10px !important;
		border-radius: 10px;
		font-size: 70%;
}

.editProductHeader {
		font-size: 14px !important;
		color: var(--blue) !important;
}

		.editProductHeader b {
				font-size: 14px !important;
				color: var(--blue) !important;
		}

.richText .richText-toolbar ul li a {
		display: block;
		padding: 10px 13px;
		border-right: #EFEFEF solid 1px;
		cursor: pointer;
		-webkit-transition: background-color 0.4s;
		-moz-transition: background-color 0.4s;
		transition: background-color 0.4s;
		color: var(--black);
		font-size: 11px !important;
}

		.richText .richText-toolbar ul li a:hover {
				color: var(--red);
		}

.homePageH2Nimble {
		font-size: 72px !important;
		text-align: center;
		color: #1D1D1F !important;
		margin-top: 50px !important;
}

.nimblHeader_scroll {
		background-color: var(--greyLight) !important;
}

.scrollHeader {
		padding-top: 80px;
}

.smallMenuButton {
		float: right;
		font-size: 16px;
		color: var(--white);
		border: solid 3px var(--black);
		background-color: var(--black);
		padding: 8px 10px;
		border-radius: 50%;
		margin-top: 25px;
		margin-left: 20px;
		cursor: pointer;
		font-weight: bold;
		display: none;
}

		.smallMenuButton:hover {
				transition: all 0.3s;
				float: right;
				font-size: 16px;
				color: var(--black);
				border: solid 3px var(--black);
				background-color: var(--white);
				padding: 8px 10px;
				border-radius: 50%;
				margin-left: 20px;
				cursor: pointer;
				font-weight: bold;
		}

.checked {
		color: #ffd700;
}

.nimblBookCourierButton {
		background-color: var(--red) !important;
		padding: 10px !important;
		width: 200px !important;
		color: var(--whitek) !important;
		border: solid 1px var(--black) !important;
		float: right;
		text-align: center;
}

		.nimblBookCourierButton:hover {
				background-color: var(--white) !important;
				color: var(--red) !important;
				border: solid 1px var(--red) !important;
		}

.customerSelected {
		box-shadow: 0 1px 20px 0 #ffd700 !important;
}

.courierResultCost i {
		font-size: 8px !important;
		color: #fff;
}

.quoteCountResult {
		font-weight: bold;
		font-size: 20px;
		float: left;
		padding: 10px;
		color: var(--white);
}

@media only screen and (max-width: 900px) {
		.hideForSmall {
				display: none !important;
		}

		.smallMenuButton {
				display: block;
				margin-top: 9px;
		}

		.bgFilled10 {
				padding-top: 70px !important;
		}

		.homePageH2Nimble {
				font-size: 62px !important;
				text-align: center;
				color: #1D1D1F !important;
				margin-top: 50px !important;
				line-height: 70px;
		}
}

@media only screen and (max-width: 700px) {
		.startTrialButtonMain {
				display: none;
		}
}

@media only screen and (max-width: 500px) {
		.homePageH2Nimble {
				font-size: 52px !important;
				text-align: center;
				color: #1D1D1F !important;
				margin-top: 50px !important;
				line-height: 60px;
		}
}

.editable {
    width: 100%;
    background-color: var(--yellowBright) !important;
    box-shadow: 0 6px 20px rgba(9, 45, 64, 0.12) !important;
    text-align: left;
    padding: 10px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-block: 5px;
}

		.editable .moveIcon {
				margin-right: 10px !important;
		}

		.editable .deleteIcon {
				font-size: 15px !important;
				color: #f81464 !important;
				float: right;
				cursor: pointer;
		}

		.editable .editIcon {
				font-size: 15px !important;
				color: var(--blue) !important;
				float: right;
				cursor: pointer;
				margin-right: 5px;
		}

.yellowBox {
		background-color: var(--yellowBright);
		padding: 15px;
		margin-bottom: 20px;
}