@media (prefers-color-scheme: dark) {
	 /* Styles for dark mode */
	 body {
	   background-color: #111;
	   color: #fff;
	 }
	 
	 .techPayInfo {
		background: rgba(255,255,255,.033) !important;
	 }
	 
	 .techPayRow .serviceCount {
		 background: rgb(63, 91, 115) !important;
		 border: 1px solid rgba(151, 151, 151, 0.302) !important;
	 }
	 
	 .serviceLogsHolder .stopRow {
		 border-color: rgba(255,255,255,.1) !important;
	 }
	 
	 select, input, textarea {
		 background: rgba(29, 29, 29, 1) !important;
		 border: 1px solid rgba(184, 184, 184, 0.1) !important;
		 color:white !important;
	 }
	 
	 .selectContainer {
		 color:white !important;
	 }
	 
	 .selectContainer::after {
		 color:rgba(255, 255, 255, 0.8);
	 }
	 
	 .navList {
		 background: rgb(18, 21, 24) !important;
		 border-bottom: 1px solid rgba(135, 135, 135, 0.11) !important;
	 }
	 
	 .navList a  {
		 border: 2px solid rgba(217, 217, 217, 0.1) !important;
		 background: rgba(19, 32, 45, 1) !important;
		 color: rgba(255, 255, 255, 0.84) !important;
	 }
	 
	 .route {
		 background: rgb(28, 28, 28) !important;
	 }
	 
	 .route .routeInfo {
		 border: 1px solid rgba(158, 158, 158, 0.1) !important;
	 }
	 
	 .route.notCurrent .routeInfo .routeDetails {
		 background: rgb(57, 70, 80) !important;
	 }
	 
	 .route .routeInfo .routeDetails {
		  background: rgb(37, 89, 134) !important;
	 }
	 
	 nav {
		 background: rgb(37, 89, 134) !important;
	 }
	 
	 .route .routeInfo .routeName .routeVolume .difficultyBar.empty {
		 background: rgba(57, 57, 57, 1) !important;
	 }
	 
	 .popOver {
		 background: rgb(19, 19, 19) !important
	 }
	 
	 .popOver h1 {
		 background: rgb(28, 28, 28) !important;
		 border-bottom: 1px solid rgba(140, 140, 140, 0.13) !important;
	 }
	 
	 .servicePeriodFillCap .scentFillCap .info {
		 border: 1px solid rgba(112, 112, 112, 0.1);
		 background: rgb(28,28,28);
	 }
	 
	 .scentFillCap .scentCount {
		color: rgba(255, 255, 255, 0.8) !important;
		background: rgba(255, 255, 255, 0.06) !important;
		border: 1px solid rgba(130, 130, 130, 0.2) !important;
	}
	
	.servicePeriodFillCap .scentFillCap .scentAcronym {
		color: rgba(255, 255, 255, 0.65) !important;
	}
	
	.replacedScentsBtn {
		color: rgba(255, 255, 255, 0.65) !important;
	}
	
	label {
		border-bottom: 2px solid rgba(154, 154, 154, 0.1) !important;
	}
	
	.contentListing {
		border: 1px solid rgba(134, 134, 134, 0.2) !important;
		background: rgb(24, 25, 29) !important;
	}
	
	.contentListing.selected::after {
		border: 2px solid rgb(37, 89, 134) !important;
	}
	
	.btn {
		background: rgb(37, 89, 134) !important;
	}
	
	.btnOutline, .btn-outline, .outlineBtn {
		background: rgba(37, 89, 134, 0.212)  !important;
		border-color: rgb(37, 89, 134) !important;
	}
	
	.submitBtnHolder {
		background: rgb(28, 28, 28) !important;
		border-top: 1px solid rgba(142, 142, 142, 0.13);
	}
	
	.deleteBtn, .btnOutline.delete {
		color: rgb(245, 76, 76) !important;
		border-color: rgb(245, 76, 76) !important;
		background: rgba(75, 11, 11, 0.52) !important;
	}
	
	.optionsPopUp .option.delete {
		background: rgb(244, 46, 47) !important;
	}
	
	.popOver.open.pushOver::before {
		background: rgba(18, 18, 18, 0.64);
	}
	
	.globalLoader {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(14, 14, 14, 0.9) 30%, rgba(9, 9, 9, 0.9) 50%, rgba(0, 0, 0, 0.5)) !important;
	}
	
	.stopPage {
		color:black !important;
	}
	
	.inventoryGroup {
		background: rgb(28, 28, 28) !important;
	}
	
	.contentsList {
		background: rgba(134, 134, 134, 0.05) !important;
		border: 1px solid rgba(209, 209, 209, 0.1) !important;
	}
	
	.contentsList.clean {
		background: rgba(0, 0, 0, 0) !important;
		border: 1px solid rgba(0, 0, 0, 0) !important;
	}
	
	.fillCapBoxColorSelector {
		background: rgb(46, 46, 46);
		border: 1px solid rgba(145, 145, 145, 0.1);
	}
	
	.disabledLoader::before {
		background: rgba(18, 18, 18, 0.5) !Important;
	}
	
	.fillCapTotalsSelector .fillCapTotalSelectBtn, .selector .selectorBtn {
		background: rgba(34, 34, 34, 1) !important;
		border: 1px solid rgba(131, 131, 131, 0.1) !important;
	}
	
	.infoField .field {
		color: rgba(209, 209, 209, 0.6) !important;
	}
	
	.fillCapTotalsSelector .fillCapTotalSelectBtn.active, .selector .selectorBtn.active {
		background: rgb(37, 89, 134) !important;
		border: 1px solid rgba(0, 0, 0, 0);
		color: white;
	}
	
	.serviceSummary {
		border: 1px solid rgba(162, 162, 162, 0.1) !important;
	}
	
	.serviceSummary .scentsSummary {
		background: rgba(11, 14, 18, 0.31) !important;
		border: 1px solid rgba(173, 173, 173, 0.1) !important;
	}
	
	.contentListing.expanded .contentListingHeader {
		border-bottom: 1px solid rgba(148, 148, 148, 0.2) !important;
	}
	
	.contactOptions a {
		background: rgba(37, 89, 134, 0.212)  !important;
		border-color: rgb(37, 89, 134) !important;
		color: rgb(37, 89, 134) !important;
	}
	
	.infoField {
		border-bottom: 1px solid rgba(190, 190, 190, 0.1) !important;
	}
	
	.noQClogs {
		color: rgba(175, 175, 175, 0.6) !important;
	}
	
	.serviceLog, .qcReportBtn {
		background: rgb(28, 28, 28) !important;
	}
	
	.serviceLogTitle, .qcReportTitle {
		border-bottom: 1px solid rgba(177, 177, 177, 0.2);
	}
	
	.serviceSummary .scentsSummary .scent .num,
	.serviceSummary .serviceInfo .num {
		background: rgb(63, 91, 115) !important;
		color:white !important;
		border: 1px solid rgba(151, 151, 151, 0.302) !important;
	}
	
	.techPayRow {
		border-bottom: 1px solid rgba(187, 187, 187, 0.1) !important;
	}
	
	.contentsList .headerIcon {
		color: rgba(255, 255, 255, 0.8) !important;
	}
	
	.servicesContainer .service .details .serviceGroup {
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}
	
	.scentRotationPreview .scentPreviewContainer ::before {
		border: 2px dashed rgba(255, 255, 255, 0.15) !important;
	}
	
	.scentRotationEditor .servicePeriod .addScentBtn {
		border: 2px dashed rgba(255, 255, 255, 0.15) !important;
		background-color: rgba(87, 184, 255, 0.05) !important;
		color: rgba(255, 255, 255, 0.4) !important;
	} 
	
	.scentRotationEditor .servicePeriod .scentOptionsBtn {
		color: rgba(255, 255, 255, 0.65) !important;
	}
	
	.scentRotationEditor .servicePeriod .linkBtn {
		border: 2px solid rgba(130, 130, 130, 0.3) !important;
	}
	
	.scentSelector .scentOpt {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	}
	
	.notifyHolder {
		background: rgb(13, 13, 13) !important;
	}
	
	.optionsPopUp .option, .scentOptionsPopUp .option, .scentLinkOptionsPopUp .option {
		border: 1px solid rgba(185, 185, 185, 0.15) !important;
		background: rgb(28, 28, 28) !important;
	}
	
	.notifyTitleHolder {
		border-bottom: 1px solid rgba(186, 186, 186, 0.1) !important;
	}
	
	.notifyCloseHolder {
		border-top: 1px solid rgba(190, 190, 190, 0.1) !important;
	}
	
	.notifyCloseHolder .button {
		background: rgb(37, 89, 134) !important;
	}
	
	.scentRotationEditor .servicePeriod .linkBtn {
		background: rgb(42, 42, 42) !important;
		border: 2px solid rgba(255, 255, 255, 0.3) !important;
	}
	
	.servicesContainer .service {
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}
	
	.serviceOption {
		border: 2px solid rgba(255, 255, 255, 0.1) !important;
	}
	
	.searchHolder i {
		color: rgba(255, 255, 255, 0.6) !important;
	}
	
	label.small {
		border-bottom: 0px solid rgba(0, 0, 0, 0.1) !important;
		color: rgba(255, 255, 255, 0.6) !important;
	}
	
	.formNote {
		color: rgba(255, 255, 255, 0.5) !important;
	}
	
	.contact {
		border: 1px solid rgba(187, 187, 187, 0.15) !important;
	}

	.timeSlot {
		background: rgba(50, 50, 61, 1) !important;
	}
	
	.timeSlot.available {
		background: rgba(37, 89, 134, 0.212)  !important;
		border-color: rgb(37, 89, 134) !important;
	}



	.monthSelector .week .daySelectorWeek .daySelector {
		border: 2px solid rgba(152, 152, 152, 0.1) !important;
		background: rgb(38, 38, 38) !important;
		color: #ffffff !important;
	}
	
	.monthSelector .week .daySelectorWeek .daySelector.selected::before {
		height: calc(100% - 8px) !important;
		border: 3px solid black !important;
		width: calc(100% - 8px) !important;
	}
	
	.monthSelector .week .daySelectorWeek .daySelector.available {
		border: 3px solid rgb(37, 89, 134) !important;
		background:  rgba(37, 89, 134, 0.212)  !important;
	}
	
	.monthSelector .week .daySelectorWeek .daySelector.available.selected,
	.timeSlot.available.selected {
		border-color: rgb(34, 136, 224) !important;
		color: white !important;
		background: rgb(37, 89, 134) !important;
	}
	
	.timeSelector .timeSlot.selected::after {
		border-color: rgb(0, 0, 0);
	}

	.monthSelector .daysOfTheWeek .weekDayLabel {
		opacity: 1 !important;
	}
	
	.monthSelector .weekLabels .weekLabel {
		opacity: 1 !important;
	}
	
	.contentListing .contactCard {
		border: 1px solid rgba(150, 150, 150, 0.2) !important;
		background: rgba(0, 0, 0, 0.37) !important;
	}
	
	.contactSeparator {
		background: rgba(181, 181, 181, 0.1) !important;
	}
	
	.servicePeriodFillCap .scentFillCap .scentUnit {
		color: white !important;
	}
}