/* add root custom propertis */

:root {
	--color-zinc-50: rgb(250, 250, 250);
	--color-zinc-75: rgb(247, 247, 247);
	--color-zinc-100: rgb(244, 244, 245);
	--color-zinc-150: rgb(240, 240, 240);
	--color-zinc-200: rgb(228, 228, 231);
	--color-zinc-300: rgb(212, 212, 216);
	--color-zinc-350: rgb(212, 212, 216);
	--color-zinc-400: rgb(159, 159, 169);
	--color-zinc-500: rgb(113, 113, 123);
	--color-zinc-600: rgb(82, 82, 92);
	--color-zinc-700: rgb(63, 63, 70);
	--color-zinc-800: rgb(39, 39, 42);
	--color-zinc-900: rgb(24, 24, 27);
	--color-zinc-925: rgb(16, 16, 19);
	--color-zinc-950: rgb(9, 9, 11);

	--color-gray-100: #F4F6F9;
	--color-gray-200: #E0E4E8;

	--color-scrollbar: rgba(24, 24, 27, 0.5);
	--color-resizer: rgba(149, 149, 155, 0.2);

	/* Blue palette */
	--color-blue-50: #e6f1fd;
	--color-blue-100: #cce3fb;
	--color-blue-200: #b3d5f9;
	--color-blue-300: #99c7f7;
	--color-blue-350: #80b9f6;
	--color-blue-400: #66abf4;
	--color-blue-500: #4d9df2;
	--color-blue-600: #1981ee;
	--color-blue-700: #0073ec;
	--color-blue-800: #0051a5;
	--color-blue-900: #002e5e;
	--color-blue-950: #001d3b;

	/* Purple palette */
	--color-purple-50: #f6ecfc;
	--color-purple-100: #eddafa;
	--color-purple-200: #dbb4f5;
	--color-purple-300: #ca8fef;
	--color-purple-350: #c17ced;
	--color-purple-400: #b869ea;
	--color-purple-500: #a644e5;
	--color-purple-600: #953dce;
	--color-purple-700: #8536b7;
	--color-purple-800: #642989;
	--color-purple-900: #421b5c;
	--color-purple-950: #321445;

	/* Green palette */
	--color-green-50: #e6faf7;
	--color-green-100: #ccf5ee;
	--color-green-200: #99ebdd;
	--color-green-300: #66e0cc;
	--color-green-350: #4ddbc4;
	--color-green-400: #33d6bb;
	--color-green-500: #00caaa;
	--color-green-600: #00b899;
	--color-green-700: #008f77;
	--color-green-800: #006655;
	--color-green-900: #003d33;
	--color-green-950: #002922;

	/* Red palette */
	--color-red-50: #ffeded;
	--color-red-100: #ffdbda;
	--color-red-200: #ffb7b6;
	--color-red-300: #ff9291;
	--color-red-350: #ff807f;
	--color-red-400: #ff6e6d;
	--color-red-500: #ff4a48;
	--color-red-600: #e64341;
	--color-red-700: #b33432;
	--color-red-800: #802524;
	--color-red-900: #4d1616;
	--color-red-950: #330f0e;

	--color-orange-50: #fef5e6;
	--color-orange-100: #fdebcc;
	--color-orange-200: #fbd899;
	--color-orange-300: #f8ba4d;
	--color-orange-350: #f7b133;
	--color-orange-400: #f6a719;
	--color-orange-500: #f59d00;
	--color-orange-600: #dd8d00;
	--color-orange-700: #ac6e00;
	--color-orange-800: #7b4f00;
	--color-orange-900: #4a2f00;
	--color-orange-950: #311f00;

	--color-black: rgb(0, 0, 0);
	--color-white: rgb(255, 255, 255);
	--color-alert: rgba(254, 245, 229, 1);
}

@font-face {
	font-family: "ProximaNova";
	src: url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.eot");
	/* IE9 Compat Modes */
	src: url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
		url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.woff2") format("woff2"),
		/* Super Modern Browsers */
		url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.woff") format("woff"),
		/* Modern Browsers */
		url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.ttf") format("truetype"),
		/* Safari, Android, iOS */
		url("/skins/dreamhost/fonts/proximanova/proximanova-regular-webfont.svg#ProximaNova") format("svg");
	/* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "ProximaNova";
	src: url("/skins/dreamhost/fonts/proximanova/proximanova-medium-webfont.woff2") format("woff2"),
		url("/skins/dreamhost/fonts/proximanova/proximanova-medium-webfont.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "ProximaNova";
	src: url("/skins/dreamhost/fonts/proximanova/proximanova-semibold-webfont.woff2") format("woff2"),
		url("/skins/dreamhost/fonts/proximanova/proximanova-semibold-webfont.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}


/* Gilroy Bold */
@font-face {
	font-family: 'Gilroy';
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-bold.eot');
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-bold.eot?#iefix') format('embedded-opentype'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-bold.woff') format('woff'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

/* Gilroy Medium */
@font-face {
	font-family: 'Gilroy';
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-medium.eot');
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-medium.eot?#iefix') format('embedded-opentype'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-medium.woff') format('woff'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

/* Gilroy Semibold */
@font-face {
	font-family: 'Gilroy';
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-semibold.eot');
	src: url('/skins/dreamhost/fonts/gilroy/gilroy-semibold.eot?#iefix') format('embedded-opentype'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-semibold.woff') format('woff'),
		url('/skins/dreamhost/fonts/gilroy/gilroy-semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

.skinselection .skinname {
	text-transform: capitalize;
}

/* body scroll bar for darkmode */
/* scrollbar-color: var(--color-blue-700) var(--color-scrollbar); */
html:not(.dark-mode) body {
		background-color: rgb(250, 250, 250) !important;
		background-color: var(--color-zinc-50) !important;
		color: rgb(63, 63, 70);
		color: var(--color-zinc-700);
	}
html.iframe:not(.dark-mode) body {
		background-color: rgb(255, 255, 255) !important;
		background-color: var(--color-white) !important;
	}
html:not(.dark-mode) blockquote {
		border-color: #0073ec !important;
		border-color: var(--color-blue-700) !important;
	}
html:not(.dark-mode) .nav-tabs {
		border-color: rgb(240, 240, 240);
		border-color: var(--color-zinc-150);
		gap: 8px;
	}
html:not(.dark-mode) .nav-tabs .nav-item {
			padding-bottom: 4px;
		}
html:not(.dark-mode) .nav-tabs .nav-link {
			border: 0 none;
			font-weight: 500;
			color: rgb(63, 63, 70);
			color: var(--color-zinc-700);
			position: relative;
			overflow: visible;
			padding: 13px 16px;
			line-height: 1;
		}
html:not(.dark-mode) .nav-tabs .nav-link:not(.active):hover {
				border: 0 none;
				background: transparent;
			}
html:not(.dark-mode) .nav-tabs .nav-link:not(.active):hover:after {
					background: rgb(240, 240, 240);
					background: var(--color-zinc-150);
					border-radius: 999px;
					z-index: -1;
					position: absolute;
					bottom: 0;
					top: 0;
					right: 0;
					left: 0;
					content: "";
				}
html:not(.dark-mode) .nav-tabs .nav-link.active {
				border-bottom-color: transparent;
				font-weight: 600;
			}
html:not(.dark-mode) .nav-tabs .nav-link.active:before {
					background: #0073ec;
					background: var(--color-blue-700);
					position: absolute;
					bottom: -4px;
					left: 0;
					right: 0;
					content: "";
					height: 2px;
				}
html:not(.dark-mode) .nav-tabs .nav-link.active:after {
					background: rgb(240, 240, 240);
					background: var(--color-zinc-150);
					border-radius: 999px;
					z-index: -1;
					position: absolute;
					bottom: 0;
					top: 0;
					right: 0;
					left: 0;
					content: "";
				}
html:not(.dark-mode) .html-editor .editor-toolbar {
		border-radius: 12px 12px 0 0;
		background-color: rgb(244, 244, 245);
		background-color: var(--color-zinc-100);
		border-color: rgb(228, 228, 231);
		border-color: var(--color-zinc-200);
	}
html:not(.dark-mode) .input-group-text {
		background-color: rgb(244, 244, 245);
		background-color: var(--color-zinc-100);
		border-color: rgb(228, 228, 231);
		border-color: var(--color-zinc-200);
		color: rgb(82, 82, 92);
		color: var(--color-zinc-600);
		border-radius: 12px;
	}
html:not(.dark-mode):not(.touch) .listing li > a:focus,html:not(.dark-mode):not(.touch) .listing.focus tbody tr.focused > td:first-child,html:not(.dark-mode):not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
		border-left: 2px solid #0073ec;
		border-left: 2px solid var(--color-blue-700);
		outline: 0;
	}
html:not(.dark-mode) .popover,html:not(.dark-mode) body,html:not(.dark-mode) button,html:not(.dark-mode) div.tox,html:not(.dark-mode) div.tox :not(.svg),html:not(.dark-mode) input,html:not(.dark-mode) optgroup,html:not(.dark-mode) select,html:not(.dark-mode) textarea {
		font-family: "ProximaNova", sans-serif;
	}
html:not(.dark-mode) #layout-menu {
		position: relative;
	}
@media (min-width: 769px) {
html:not(.dark-mode) #layout-menu .special-buttons {
				padding: 0 8px;
		}
			}
html:not(.dark-mode) #layout-menu .special-buttons {

			right: 0;
			background: transparent;
		}
html:not(.dark-mode) #layout-menu .special-buttons .about {
				display: none;
			}
html:not(.dark-mode) #layout-sidebar {
		border-right: 0;
		min-width: 240px;
	}
html:not(.dark-mode) #layout-content img.contactphoto {
			width: 32px !important;
			height: 32px !important;
		}
html:not(.dark-mode) #layout-content,html:not(.dark-mode) #layout-list,html:not(.dark-mode) #layout-sidebar,html:not(.dark-mode) #layout > div > .footer {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
	}
html:not(.dark-mode) #layout > div > .header a.button {
		color: rgb(63, 63, 70);
		color: var(--color-zinc-700);
	}
@media screen and (min-width: 769px) {
		html:not(.dark-mode) .header a.button.icon:before {
			margin: 0;
		}
	}
html:not(.dark-mode) .ui-dialog {
		border: 0;
		border-radius: 24px;
	}
html:not(.dark-mode) .ui-dialog .ui-dialog-content {
			padding: 24px;
		}
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar {
			border: 0;
		}
html:not(.dark-mode) .ui-dialog .ui-dialog-title {
			padding: 24px;
			line-height: 1;
		}
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar-close {}
html:not(.dark-mode) .popupmenu .listing li.selected,html:not(.dark-mode) .popupmenu .listing li > a:not(.disabled):hover {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}
html:not(.dark-mode) .btn {
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		padding: 0 20px 0 20px;
		border-radius: 10px;
	}
html:not(.dark-mode) .btn-sm {
		min-height: 32px;
		padding: 0 16px 0 16px;
		line-height: 32px;
		font-size: 14px;
	}
html:not(.dark-mode) .btn-primary {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		border-color: #0073ec;
		border-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
		font-weight: 600;
	}
html:not(.dark-mode) .btn-primary:hover {
			background-color: #0051a5;
			background-color: var(--color-blue-800);
			border-color: #0073ec;
			border-color: var(--color-blue-700);
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}
html:not(.dark-mode) .btn-secondary.attach {
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
		border-color: rgb(24, 24, 27);
		border-color: var(--color-zinc-900);
	}
html:not(.dark-mode) .btn.cancel {
		font-weight: 600;
		background: transparent;
		border: 1px solid rgb(212, 212, 216);
		border: 1px solid var(--color-zinc-300);
		color: rgb(63, 63, 70);
		color: var(--color-zinc-700);
		font-size: 14px;
	}
html:not(.dark-mode) .btn.cancel:hover {
			background: rgb(250, 250, 250);
			background: var(--color-zinc-50);
		}
html:not(.dark-mode) .file-upload {
		border-color: rgb(159, 159, 169);
		border-color: var(--color-zinc-400);
		border-radius: 24px;
	}
html:not(.dark-mode) .file-upload .hint {
			color: rgb(113, 113, 123);
			color: var(--color-zinc-500);
		}
html:not(.dark-mode) #mailboxlist li,html:not(.dark-mode) #directorylist li {
			border-bottom: 0;
			line-height: 1;
		}
html:not(.dark-mode) #mailboxlist li a,html:not(.dark-mode) #directorylist li a {
			display: flex;
			align-items: center;
			height: 40px;
			border-radius: 10px;
			padding-left: 1rem;
			color: rgb(113, 113, 123);
			color: var(--color-zinc-500);
			border-left-color: transparent !important;
		}
html:not(.dark-mode) #mailboxlist li a:hover,html:not(.dark-mode) #directorylist li a:hover {
				background-color: rgb(228, 228, 231);
				background-color: var(--color-zinc-200);
			}
html:not(.dark-mode) #mailboxlist li a:before {
				font-size: 1rem;
				margin-right: 1rem;
				height: auto;
			}
html:not(.dark-mode) #directorylist li a:before {
				font-size: 1rem;
				margin-right: 1rem;
				height: auto;
			}
html:not(.dark-mode) #mailboxlist li.selected,html:not(.dark-mode) #directorylist li.selected {
			background-color: transparent;
			background-color: initial;
		}
html:not(.dark-mode) #mailboxlist li.selected a,html:not(.dark-mode) #directorylist li.selected a {
				background-color: transparent;
				color: rgb(0, 0, 0);
				color: var(--color-black);
			}
html:not(.dark-mode) .folderlist li.mailbox.unread > a {
		padding-right: 8px;
	}
html:not(.dark-mode) .form-control {
		border-radius: 12px;
	}
html:not(.dark-mode) .form-control:focus {
			border-color: #0073ec !important;
			border-color: var(--color-blue-700) !important;
			box-shadow: 0 0 0 2px transparent
		}
html:not(.dark-mode) .rounded-left {
		border-radius: 12px 0 0 12px !important;
	}
html:not(.dark-mode) .rounded-right {
		border-radius: 0 12px 12px 0 !important;
	}
html:not(.dark-mode) .row.input-group input.form-control[type="text"] {
			height: 48px;
			padding: 8px 20px;
		}
html:not(.dark-mode) .row.input-group .form-control:not(.custom-select) {
			background: transparent;
		}
html:not(.dark-mode) .recipient-input.focus {
			border-color: #0073ec !important;
			border-color: var(--color-blue-700) !important;
			box-shadow: 0 0 0 2px transparent;
		}
html:not(.dark-mode) .recipient-input input {
			line-height: 36px;
			border-radius: 12px;
			padding-left: 9.5px;
		}
html:not(.dark-mode) .recipient-input .recipient {
			padding: 0 12px 0 12px;
			align-items: center;
			border: 0 none;
			background: #cce3fb;
			background: var(--color-blue-100);
			border-radius: 999px;
		}
html:not(.dark-mode) .recipient-input .recipient a.button.icon:before {
				line-height: 1;
			}
html:not(.dark-mode) #compose-subject {
		height: 48px;
		padding-left: 20px;
	}
html:not(.dark-mode) .select-menu .listing li a.selected {
			color: rgb(255, 255, 255);
			color: var(--color-white);
			background-color: #0073ec;
			background-color: var(--color-blue-700);
		}
html:not(.dark-mode) .custom-select {
		display: inline-block;
		/* width: 100%; */
		height: 48px;
		padding: 8px 20px;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		border: 1px solid rgb(113, 113, 123);
		border: 1px solid var(--color-zinc-500);
		border-radius: 12px;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}
html:not(.dark-mode) .custom-select.focus {
			border-color: #0073ec !important;
			border-color: var(--color-blue-700) !important;
			box-shadow: 0 0 0 2px transparent;
		}
html:not(.dark-mode) .custom-switch .custom-control-label::before {
		background-color: transparent;
	}
html:not(.dark-mode) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		border-color: #0073ec;
		border-color: var(--color-blue-700);
	}
html:not(.dark-mode) .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
	}
html:not(.dark-mode) .column-resizer:hover:not(.active) {
		background-color: rgba(149, 149, 155, 0.2);
		background-color: var(--color-resizer);
		transition: background-color 0.3s ease;
	}
html:not(.dark-mode) #listoptions-sortord-clone {
		text-transform: capitalize;
	}
html:not(.dark-mode) .menu span.inner {
			font-size: 12px;
		}
html:not(.dark-mode) .menu a.settings:before {
			content: "\f085";
		}
@media (min-width: 1201px) {
		html:not(.dark-mode) a.toolbar-button span.inner {
			font-size: 12px;
		}
	}
@media (min-width: 1025px) {
html:not(.dark-mode) #compose-content .formcontent {
				padding: 16px 32px 16px 32px;
		}
			}
html:not(.dark-mode) a {
		color: #0073ec;
		color: var(--color-blue-700);
	}
html:not(.dark-mode) a:hover {
			color: #0073ec;
			color: var(--color-blue-700);
		}
html:not(.dark-mode) .btn-primary {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		border-color: #0073ec;
		border-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}
html:not(.dark-mode) .btn-primary:hover:not(:disabled) {
			background-color: #0073ec;
			background-color: var(--color-blue-700);
			border-color: #0073ec;
			border-color: var(--color-blue-700);
		}
/* left nav menu */
html:not(.dark-mode) #layout-menu {
		background: rgb(255, 255, 255);
		background: var(--color-white);
		border-right: 0;
	}
html:not(.dark-mode) #layout-menu .special-buttons a:not(:focus) {
			background: rgb(255, 255, 255);
			background: var(--color-white);
		}
html:not(.dark-mode) #logo {
		opacity: 1;
	}
html:not(.dark-mode) #taskmenu {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
@media (min-width: 1025px) {
html:not(.dark-mode) #taskmenu {
			padding: 0 8px;
	}
		}
html:not(.dark-mode) #taskmenu a {
			color: rgb(82, 82, 92);
			color: var(--color-zinc-600);
		}
html:not(.dark-mode) #taskmenu a.selected {
				background: #cce3fb;
				background: var(--color-blue-100);
			}
@media (min-width: 481px) {
html:not(.dark-mode) #taskmenu a:hover {
					background-color: #cce3fb;
					background-color: var(--color-blue-100);
					color: rgb(63, 63, 70);
					color: var(--color-zinc-700);
			}
				}
@media (min-width: 1025px) {
html:not(.dark-mode) #taskmenu a {
				border-radius: 16px;
				width: 100%;
		}

				html:not(.dark-mode) #taskmenu a:hover:not(.selected) {
					background-color: rgb(255, 255, 255);
					background-color: var(--color-white);
					outline: 2px solid #99c7f7;
					outline: 2px solid var(--color-blue-300);
					outline-offset: -1px;
					/* Half of 2px border thickness */
				}

				html:not(.dark-mode) #taskmenu a.selected {
					background-color: #cce3fb;
					background-color: var(--color-blue-100);
					/* background-color: #002E5E; */
					color: #0073ec;
					color: var(--color-blue-700);
				}

				html:not(.dark-mode) #taskmenu a:focus {
					background-color: rgb(240, 240, 240);
					background-color: var(--color-zinc-150);
				}
			}
html:not(.dark-mode) #taskmenu a.mail {
				order: -1;
			}
html:not(.dark-mode) #taskmenu a .special-buttons {}
html:not(.dark-mode) #taskmenu .action-buttons a.selected {
					color: #0073ec;
					color: var(--color-blue-700);
				}
html:not(.dark-mode) #taskmenu .action-buttons a {

				color: rgb(82, 82, 92);

				color: var(--color-zinc-600);
			}
html:not(.dark-mode) .popover {
		background-color: rgb(244, 244, 245);
		background-color: var(--color-zinc-100);
		box-shadow: 0px 11px 57px rgba(0, 0, 0, 0.15);
		border: 0 none;
		border-radius: 16px;
	}
html:not(.dark-mode) .popover > .arrow::after {
			border-bottom-color: rgb(244, 244, 245);
			border-bottom-color: var(--color-zinc-100);
			border-top-color: rgb(244, 244, 245);
			border-top-color: var(--color-zinc-100);
		}
html:not(.dark-mode) .popover .menu.pagenav a {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}
html:not(.dark-mode) .popover .menu li a {
				padding: 0 16px;
				line-height: 40px;
				color: rgb(63, 63, 70);
				color: var(--color-zinc-700);
			}
html:not(.dark-mode) .popover .menu li a:not(.disabled):hover,html:not(.dark-mode) .popover .menu li a:not(.disabled):focus {
					background-color: rgb(228, 228, 231);
					background-color: var(--color-zinc-200);
					color: rgb(24, 24, 27);
					color: var(--color-zinc-900);
				}
@media (min-width:769px) {
			html:not(.dark-mode) .popover .listing li:first-child {
				border-radius: 16px 16px 0 0;
			}

			html:not(.dark-mode) .popover .listing li:last-child {
				border-radius: 0 0 16px 16px;
			}
		}
html:not(.dark-mode) body.task-mail.action-compose #layout-content {
			border-left: 1px solid rgb(244, 244, 245) !important;
			border-left: 1px solid var(--color-zinc-100) !important;
		}
html:not(.dark-mode) body.task-mail.action-compose .formbuttons {
			padding: 16px 32px;
		}
html:not(.dark-mode) #layout-content {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);

	}
html:not(.dark-mode) #layout-list,html:not(.dark-mode) #layout-sidebar,html:not(.dark-mode) #layout-sidebar > .header,html:not(.dark-mode) #layout-sidebar > .footer,html:not(.dark-mode) #layout-list > .header,html:not(.dark-mode) #layout-list > .footer,html:not(.dark-mode) #layout-content > .header,html:not(.dark-mode) #layout-content > .footer {
		background-color: rgb(244, 244, 245);
		background-color: var(--color-zinc-100);
		border-color: transparent !important;
		border-bottom: 0;
	}
html:not(.dark-mode) #layout-content > .header {
		/* background-color: red !important; */
		background-color: rgb(255, 255, 255) !important;
		background-color: var(--color-white) !important;
	}
html:not(.dark-mode) #layout-list {
		background-color: #F4F6F9;
		background-color: var(--color-gray-100);
		border-right: 1px solid rgb(244, 244, 245) !important;
		border-right: 1px solid var(--color-zinc-100) !important;
		/* border-radius: 16px 0 0 0; */
	}
html:not(.dark-mode) #layout-list  > .header,html:not(.dark-mode) #layout-list  > .footer,html:not(.dark-mode) #layout-list  > .scroller {
			background-color: rgb(255, 255, 255) !important;
			background-color: var(--color-white) !important;
			border-left: 1px solid #E0E4E8 !important;
			border-left: 1px solid var(--color-gray-200) !important;
			/* background-color: red !important; */
		}
html:not(.dark-mode) #layout-list  > .header {
			border-radius: 24px 0 0 0;
		}
html:not(.dark-mode) #layout-list > .header a.button {
				color: rgb(228, 228, 231) !important;
				color: var(--color-zinc-200) !important;
			}
html:not(.dark-mode) #layout-list > .header a.button:hover {
					background-color: rgb(240, 240, 240) !important;
					background-color: var(--color-zinc-150) !important;
				}
html:not(.dark-mode) #layout-list  > .footer {
			border-top: 1px solid rgb(240, 240, 240) !important;
			border-top: 1px solid var(--color-zinc-150) !important;
		}
@media (min-width: 481px) {
		html:not(.dark-mode) #layout-menu .popover-header {
			background-color: rgb(255, 255, 255) !important;
			background-color: var(--color-white) !important;
		}
	}
html:not(.dark-mode) #layout > div > .header .header-title {
		margin-left: 28px !important;
		text-align: left;
	}
html:not(.dark-mode) #messagelist-content {
		background-color: rgb(247, 247, 247);
		background-color: var(--color-zinc-75);
		/* background-color: red; */
	}
/* sidebar */
html:not(.dark-mode) #layout-sidebar {
		border-right: 0;
		/* border-radius: 16px 0 0 0; */
		/* border-left: 1px solid var(--color-zinc-100) !important; */
		/* overflow: hidden; */
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
	}
html:not(.dark-mode) #layout-sidebar  > .header,html:not(.dark-mode) #layout-sidebar  > .footer {
			background-color: rgb(250, 250, 250);
			background-color: var(--color-zinc-50);
			border-bottom: 0;
			border-top: 0;
		}
html:not(.dark-mode) #layout-sidebar .header {
			border-radius: 24px 0 0 0;
			border-left: 1px solid rgb(244, 244, 245) !important;
			border-left: 1px solid var(--color-zinc-100) !important;
			background-color: #F4F6F9 !important;
			background-color: var(--color-gray-100) !important;
		}
html:not(.dark-mode) #layout-sidebar .scroller,html:not(.dark-mode) #layout-sidebar .footer {
			border-left: 1px solid rgb(244, 244, 245) !important;
			border-left: 1px solid var(--color-zinc-100) !important;
			background-color: #F4F6F9 !important;
			background-color: var(--color-gray-100) !important;
		}
html:not(.dark-mode) #layout-sidebar.sidebar-right {
		background-color: rgb(247, 247, 247);
		background-color: var(--color-zinc-75);
	}
html:not(.dark-mode) #layout-sidebar.sidebar-right  > .header,html:not(.dark-mode) #layout-sidebar.sidebar-right  > .footer {
			background-color: rgb(247, 247, 247);
			background-color: var(--color-zinc-75);
		}
html:not(.dark-mode) .frame-content {
		padding: 0;
	}
html:not(.dark-mode) #message-header {
		padding: 29px 32px 16px;
		border-bottom: 1px solid rgb(240, 240, 240);
		border-bottom: 1px solid var(--color-zinc-150);
		border-top: 1px solid rgb(240, 240, 240);
		border-top: 1px solid var(--color-zinc-150);
	}
html:not(.dark-mode) #message-header  > .subject {
			line-height: 1.5;
			text-wrap: pretty;
			margin-bottom: 16px;
			font-family: "Gilroy", sans-serif;
		}
html:not(.dark-mode) #message-header .header-summary {
			margin-top: 0;
			line-height: 1;
		}
html:not(.dark-mode) #message-header .header-links a {
			color: #0073ec;
			color: var(--color-blue-700);
		}
html:not(.dark-mode) .menu.pagenav.pagenav-list,html:not(.dark-mode) .menu.pagenav.pagenav-list + .navlist,html:not(.dark-mode) .menu.pagenav.pagenav-list.expanded + .navlist {
			background-color: transparent;
			border-color: #4d6066;
		}
html:not(.dark-mode) .menu a:not(.disabled):focus,html:not(.dark-mode) .menu a:not(.disabled):hover {
			background-color: rgb(240, 240, 240);
			background-color: var(--color-zinc-150);
		}
html:not(.dark-mode) .menu.toolbar a {
			color: rgb(82, 82, 92);
			color: var(--color-zinc-600);
		}
html:not(.dark-mode) .menu.toolbar a:hover {
				color: rgb(63, 63, 70);
				color: var(--color-zinc-700);
				background-color: rgb(240, 240, 240);
				background-color: var(--color-zinc-150);
			}
html:not(.dark-mode) .menu.toolbar .dropbutton:not(.disabled):hover {
				background-color: rgb(240, 240, 240);
				background-color: var(--color-zinc-150);
			}
html:not(.dark-mode) .menu.toolbar .dropbutton a.dropdown:hover {
				background-color: rgb(228, 228, 231);
				background-color: var(--color-zinc-200);
			}
html:not(.dark-mode) a.disabled:not(.btn) {
		color: rgb(228, 228, 231);
		color: var(--color-zinc-200);
		opacity: 1;
	}
html:not(.dark-mode) .popup {
		min-width: 1px !important;
	}
html:not(.dark-mode) .popup .listbox .footer {
				background-color: transparent;
				border-color: #4d6066;
			}
/* listing styles */
html:not(.dark-mode) .listing.iconized li a:before {
				margin-right: 16px;
				font-size: 16px;
			}
html:not(.dark-mode) .listing.iconized tr td:before {
				margin-right: 16px;
				font-size: 16px;
			}
html:not(.dark-mode) .listing.iconized tbody td {
				padding: 0 16px;
				line-height: 47px;
			}
html:not(.dark-mode) .listing ul {
			border: 0 none;
		}
html:not(.dark-mode) .listing li {
			border: 0;
		}
html:not(.dark-mode) .listing li a {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}
html:not(.dark-mode) .listing li.selected a {
					background-color: rgb(244, 244, 245);
					background-color: var(--color-zinc-100);
					color: rgb(0, 0, 0);
					color: var(--color-black);
				}
html:not(.dark-mode) .listing li.selected ul {
					background-color: transparent;
				}
html:not(.dark-mode) .listing tbody td {
			border-color: rgb(244, 244, 245);
			border-color: var(--color-zinc-100);
			color: rgb(63, 63, 70);
			color: var(--color-zinc-700);
			line-height: 40px;
		}
html:not(.dark-mode) .listing tbody td a {
				color: rgb(0, 0, 0);
				color: var(--color-black);
			}
html:not(.dark-mode) .listing tr.selected td {
			background-color: rgb(240, 240, 240);
			background-color: var(--color-zinc-150);
			color: rgb(0, 0, 0);
			color: var(--color-black);
		}
html:not(.dark-mode) .popupmenu .listing li a:not(.disabled):hover {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);

	}
html:not(.dark-mode) #directorylist,html:not(.dark-mode) #settings-menu,html:not(.dark-mode) #mailboxlist {
		padding: 0 16px 16px 16px;
	}
html:not(.dark-mode) #directorylist li,html:not(.dark-mode) #settings-menu li,html:not(.dark-mode) #mailboxlist li {
			margin-bottom: 4px;
		}
html:not(.dark-mode) #directorylist li .treetoggle,html:not(.dark-mode) #settings-menu li .treetoggle,html:not(.dark-mode) #mailboxlist li .treetoggle {
				flex-shrink: 0;
				flex-grow: 0;
				width: 32px;
				height: 32px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				left: 8px;
				top: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				-webkit-user-select: none;
				   -moz-user-select: none;
				        user-select: none;
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}
html:not(.dark-mode) #directorylist li .treetoggle:hover,html:not(.dark-mode) #settings-menu li .treetoggle:hover,html:not(.dark-mode) #mailboxlist li .treetoggle:hover {
					/* background-color: var(--color-zinc-150); */
					color: rgb(63, 63, 70);
					color: var(--color-zinc-700);
				}
html:not(.dark-mode) #directorylist li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}
html:not(.dark-mode) #settings-menu li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}
html:not(.dark-mode) #mailboxlist li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}
html:not(.dark-mode) #directorylist li a,html:not(.dark-mode) #settings-menu li a,html:not(.dark-mode) #mailboxlist li a {
				border-radius: 10px;
				padding-left: 12px;
				color: rgb(39, 39, 42);
				color: var(--color-zinc-800);
				border-left-color: transparent !important;
				display: flex;
				align-items: center;
				height: 40px;
				font-weight: 500;
			}
html:not(.dark-mode) #directorylist li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}
html:not(.dark-mode) #settings-menu li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}
html:not(.dark-mode) #mailboxlist li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}
html:not(.dark-mode) #directorylist li a:hover,html:not(.dark-mode) #settings-menu li a:hover,html:not(.dark-mode) #mailboxlist li a:hover {
					background-color: #F4F6F9;
					background-color: var(--color-gray-100);
					outline: 2px solid #99c7f7;
					outline: 2px solid var(--color-blue-300);
					outline-offset: -2px;
				}
html:not(.dark-mode) #directorylist li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}
html:not(.dark-mode) #settings-menu li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}
html:not(.dark-mode) #mailboxlist li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}
html:not(.dark-mode) #directorylist li .groups,html:not(.dark-mode) #settings-menu li .groups,html:not(.dark-mode) #mailboxlist li .groups {
				background-color: transparent !important;
				padding-bottom: 8px;
				border: 0 none;
				padding-left: 24px;
			}
html:not(.dark-mode) #directorylist li.selected,html:not(.dark-mode) #settings-menu li.selected,html:not(.dark-mode) #mailboxlist li.selected {
			background-color: transparent;
			background-color: initial;
		}
html:not(.dark-mode) #directorylist li.selected > a,html:not(.dark-mode) #settings-menu li.selected > a,html:not(.dark-mode) #mailboxlist li.selected > a {
				background-color: #cce3fb;
				background-color: var(--color-blue-100);
				color: rgb(0, 0, 0);
				color: var(--color-black);
			}
html:not(.dark-mode) #directorylist li.selected > a:hover,html:not(.dark-mode) #settings-menu li.selected > a:hover,html:not(.dark-mode) #mailboxlist li.selected > a:hover {
					background-color: #cce3fb;
					background-color: var(--color-blue-100);
					outline: 0;
				}
html:not(.dark-mode) #directorylist ul,html:not(.dark-mode) #settings-menu ul,html:not(.dark-mode) #mailboxlist ul {
			padding-left: 32px;
		}
html:not(.dark-mode) .folderlist li.mailbox .unreadcount {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
		padding: 5px 8px;
		margin: 0;
		position: relative;
		margin-left: auto;
		font-size: 12px;
		line-height: 1;
		border-radius: 999px;
		font-weight: 600;
		min-width: 22px;
	}
html:not(.dark-mode) #messagelist .message {
			background-color: rgb(250, 250, 250);
			background-color: var(--color-zinc-50);
		}
html:not(.dark-mode) #messagelist .message td {
				border-bottom-color: rgb(244, 244, 245);
				border-bottom-color: var(--color-zinc-100);
			}
html:not(.dark-mode) #messagelist .message td.subject {
				padding: 12px 0 16px 0;
			}
html:not(.dark-mode) #messagelist .message td.subject span {
					line-height: 20px;
				}
html:not(.dark-mode) #messagelist .message td.subject .date,html:not(.dark-mode) #messagelist .message td.subject .fromto,html:not(.dark-mode) #messagelist .message td.subject .size,html:not(.dark-mode) #messagelist .message td.subject a,html:not(.dark-mode) #messagelist .message td.subject span {
					color: rgb(82, 82, 92);
					color: var(--color-zinc-600);
				}
html:not(.dark-mode) #messagelist .message td.subject .fromto {
					padding-left: 36px;
				}
html:not(.dark-mode) #messagelist .message td.subject .status {
					color: rgb(212, 212, 216);
					color: var(--color-zinc-300);
				}
html:not(.dark-mode) #messagelist .message td.subject .status .unread:before {
							color: #0073ec;
							color: var(--color-blue-700);
						}
html:not(.dark-mode) #messagelist .message td.subject .status:hover {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}
html:not(.dark-mode) #messagelist .message td.subject .status:hover:before {
						background-color: rgb(228, 228, 231);
						background-color: var(--color-zinc-200);
					}
html:not(.dark-mode) #messagelist .message td.subject .status:before {
						margin: 0 8px 0 8px;
						width: 20px;
						height: 20px;
						line-height: 20px;
						border-radius: 50%;
						/* color: var(--color-blue-700); */
					}
html:not(.dark-mode) #messagelist .message:hover {
				background-color: rgb(255, 255, 255);
				background-color: var(--color-white);
			}
html:not(.dark-mode) #messagelist .message:hover td .date,html:not(.dark-mode) #messagelist .message:hover td .fromto,html:not(.dark-mode) #messagelist .message:hover td .size,html:not(.dark-mode) #messagelist .message:hover td a {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}
html:not(.dark-mode) #messagelist .message.selected {
				background-color: #e6f1fd;
				background-color: var(--color-blue-50);
			}
html:not(.dark-mode) #messagelist .message.selected td {
					background-color: transparent;
					background-color: initial;
				}
html:not(.dark-mode) #messagelist .message.selected td .date,html:not(.dark-mode) #messagelist .message.selected td .fromto,html:not(.dark-mode) #messagelist .message.selected td .size,html:not(.dark-mode) #messagelist .message.selected td a,html:not(.dark-mode) #messagelist .message.selected td span {
						color: rgb(0, 0, 0);
						color: var(--color-black);
					}
html:not(.dark-mode) #messagelist .message.selected td span.flagged {
						color: #f59d00;
						color: var(--color-orange-500);
					}
/* background-color: var(--color-orange-900); */
/* default text color for all cells */
html:not(.dark-mode) #messagelist .message.flagged.subject span.subject a {
						color: #fdebcc;
						color: var(--color-orange-100);
						/* subject line link */
						font-weight: 600;
					}
html:not(.dark-mode) #messagelist .message.deleted {}
html:not(.dark-mode) #messagelist .message.unread {
				background-color: rgb(255, 255, 255);
				background-color: var(--color-white);
			}
html:not(.dark-mode) #messagelist .message.unread td.subject .date,html:not(.dark-mode) #messagelist .message.unread td.subject .fromto,html:not(.dark-mode) #messagelist .message.unread td.subject .size,html:not(.dark-mode) #messagelist .message.unread td.subject a,html:not(.dark-mode) #messagelist .message.unread td.subject span {
						color: rgb(82, 82, 92);
						color: var(--color-zinc-600);
						font-weight: 600;
					}
html:not(.dark-mode) #messagelist .message:not(.deleted) td.subject span.msgicon.status.unread::before {
							color: #0073ec;
							color: var(--color-blue-700);
						}
html:not(.dark-mode) #messagelist span.flag,html:not(.dark-mode) #messagelist span.flagged {
			font-size: 12px !important;
			color: #f59d00;
			color: var(--color-orange-500);
		}
html:not(.dark-mode) #layout-list > .searchbar {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
		border-bottom: 1px solid rgb(240, 240, 240);
		border-bottom: 1px solid var(--color-zinc-150);
		border-top: 1px solid rgb(240, 240, 240);
		border-top: 1px solid var(--color-zinc-150);
		border-left: 1px solid #E0E4E8;
		border-left: 1px solid var(--color-gray-200);
		height: 40px;
		min-height: 40px;
		line-height: 40px;
		padding-right: 4px;
	}
html:not(.dark-mode) #layout-list > .searchbar input {
			padding-left: 9px;
		}
html:not(.dark-mode) #layout-list > .searchbar input::-moz-placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}
html:not(.dark-mode) #layout-list > .searchbar input::placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}
html:not(.dark-mode) #layout-list > .searchbar form:before {
			margin-left: 10px;
			height: 40px;
			font-size: 16px;
		}
html:not(.dark-mode) #layout-list > .searchbar a {
			border-radius: 999px;
			color: rgb(159, 159, 169);
			color: var(--color-zinc-400);
		}
html:not(.dark-mode) #layout-list > .searchbar a:not(.disabled):hover,html:not(.dark-mode) #layout-list > .searchbar a:not(.disabled):focus {
				background-color: rgb(240, 240, 240);
				background-color: var(--color-zinc-150);
				color: rgb(63, 63, 70);
				color: var(--color-zinc-700);
			}
html:not(.dark-mode) #layout-list > .searchbar a:not(.disabled):not(.selected):hover:before {
					color: rgb(113, 113, 123);
					color: var(--color-zinc-500);
				}
html:not(.dark-mode) #layout-list > .searchbar a:not(.disabled):not(.selected):focus:before {
					color: rgb(113, 113, 123);
					color: var(--color-zinc-500);
				}
html:not(.dark-mode) #layout-list > .searchbar a.selected:before {
					color: #0073ec;
					color: var(--color-blue-700);
				}
html:not(.dark-mode) #layout-list > .searchbar a:before {
				width: 32px;
				height: 32px;
				margin: 0;
				line-height: 32px;
				font-size: 14px;
			}
html:not(.dark-mode) .formcontainer .formbuttons {
		border-top: 1px solid rgb(244, 244, 245);
		border-top: 1px solid var(--color-zinc-100);
	}
html:not(.dark-mode) .form-control:not(.is-invalid) {
		border-color: rgb(228, 228, 231);
		border-color: var(--color-zinc-200);
		/*background-color: var(--color-zinc-100);*/
	}
html:not(.dark-mode) .simplelist.listing li {
		padding: 0 16px;
	}
html:not(.dark-mode) .simplelist.listing li.selected,html:not(.dark-mode) .simplelist.listing li.selected > a,html:not(.dark-mode) .simplelist.listing li.selected > div > a,html:not(.dark-mode) .simplelist.listing tr.selected td {
		color: #0073ec;
		color: var(--color-blue-700);
		background-color: rgb(240, 240, 240);
		background-color: var(--color-zinc-150);
	}
/* jQuery UI widgets */
html:not(.dark-mode) .ui-widget-content {
		background-color: transparent;
	}
html:not(.dark-mode) .ui-widget-header {}
html:not(.dark-mode) .ui-dialog {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
	}
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane {
			padding: 16px 24px 16px 24px;
			height: auto;
		}
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonset button {
				margin: 0 8px;
				padding: 0 8px;
			}
html:not(.dark-mode) .ui-dialog .ui-dialog-title {
			color: rgb(63, 63, 70);
			color: var(--color-zinc-700);
		}
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar {
			background-color: transparent;
		}
html:not(.dark-mode) .listing-info {
		color: rgb(63, 63, 70);
		color: var(--color-zinc-700);
		font-weight: 400;
	}
html:not(.dark-mode) #message-objects {
		padding: 0 32px;
	}
html:not(.dark-mode) .ui.alert {
		border-radius: 16px;
	}
html:not(.dark-mode) .ui.alert.boxwarning {
		background-color: rgba(254, 245, 229, 1);
		background-color: var(--color-alert);
		color: rgb(0, 0, 0);
		color: var(--color-black);
	}
html:not(.dark-mode) .ui.alert.boxwarning .boxbuttons {
			display: flex;
		}
html:not(.dark-mode) .ui.alert.boxwarning .btn-primary {
			background-color: #dd8d00;
			background-color: var(--color-orange-600);
			border-color: #dd8d00;
			border-color: var(--color-orange-600);
			min-height: 32px;
			padding: 0 16px 0 16px;
			line-height: 32px;
			display: inline-block;
		}
html:not(.dark-mode) .ui.alert.boxwarning .btn-primary:hover {
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}
html:not(.dark-mode) .ui.alert.boxwarning i.icon {
			width: 32px;
			height: 32px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: #fdebcc;
			background: var(--color-orange-100);
			border-radius: 999px;
			margin: 0 16px 0 8px;
			font-size: 16px;
		}
html:not(.dark-mode) .ui.alert.boxwarning i.icon:before {
				color: #dd8d00;
				color: var(--color-orange-600);
				font-size: 16px;
				margin: 0;
				position: relative;
				top: -1.5px;
			}
html:not(.dark-mode) html:not(.touch) .listing li > a:focus,html:not(.dark-mode) html:not(.touch) .listing.focus tbody tr.focused > td:first-child,html:not(.dark-mode) html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
		border-left: 2px solid #0073ec;
		border-left: 2px solid var(--color-blue-700);
		outline: 0;
	}
html:not(.dark-mode) body.status-flagged #message-header > .subject:before {
		color: #f59d00;
		color: var(--color-orange-500);
	}
html:not(.dark-mode) #messagestack .alert-info {
		background-color: #0073ec !important;
		background-color: var(--color-blue-700) !important;
		color: rgb(255, 255, 255) !important;
		color: var(--color-white) !important;
	}
html:not(.dark-mode) #messagestack .alert-info i.icon:before {
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}
html:not(.dark-mode) .ui.alert.boxinformation {
		background-color: #cce3fb;
		background-color: var(--color-blue-100);
		color: rgb(24, 24, 27);
		color: var(--color-zinc-900);
	}
html:not(.dark-mode) .ui.alert.boxinformation i.icon:before {
			color: #0073ec;
			color: var(--color-blue-700);
		}
html:not(.dark-mode) #messagebody {
		padding: 0 32px 30px;
	}
html:not(.dark-mode) .task-login .login-image {
			display: none;
		}
html:not(.dark-mode) .task-login #logo {
			max-height: 24px;
		}
@media (min-width: 769px) {
html:not(.dark-mode) .task-login {
			background-color: rgb(255, 255, 255) !important;
			background-color: var(--color-white) !important;
			padding: 24px;
			height: 100vh;
	}

			html:not(.dark-mode) .task-login #layout {
				background-color: transparent;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 100%;
			}

			html:not(.dark-mode) .task-login .login-image {
				display: block;
				height: 100%;
				width: 100%;
				overflow: hidden;
				position: relative;
			}


				html:not(.dark-mode) .task-login .login-image .logo {
					height: 20px;
				}

				html:not(.dark-mode) .task-login .login-image .background-image {
					width: 100%;
					height: 100%;
					-o-object-fit: cover;
					   object-fit: cover;
					border-radius: 24px;
				}

				html:not(.dark-mode) .task-login .login-image .login-text-container {
					position: absolute;
					left: 64px;
					top: 64px;
					letter-spacing: -0.3px;
					color: rgb(255, 255, 255);
					color: var(--color-white);
					margin-bottom: 0;

				}

					html:not(.dark-mode) .task-login .login-image .login-text-container h2 {
						font-weight: 600;
						font-family: "Gilroy", sans-serif;
						text-wrap: balance;
						font-size: 48px;
						max-width: 24ch;
						display: none;

					}

			html:not(.dark-mode) .task-login #layout-content,html:not(.dark-mode) .task-login #login-form,html:not(.dark-mode) .task-login #logo {
				top: auto;
				top: initial;
			}

			html:not(.dark-mode) .task-login #logo {
				max-height: 24px;
				margin-bottom: 32px;
			}

				html:not(.dark-mode) .task-login #logo:after {
					content: "Webmail";
					font-size: 24px;

				}

			html:not(.dark-mode) .task-login #layout-content {
				max-width: 560px;
				margin: 0 auto;
				background-color: rgb(255, 255, 255);
				background-color: var(--color-white);
				display: flex;
				flex-direction: column;
				align-items: start;
				gap: 16px;

				height: auto;
				padding: 0 48px;
				flex-shrink: 0;
			}

				html:not(.dark-mode) .task-login #layout-content:before {
					content: "";
					display: block;
				}
		}
html:not(.dark-mode) .task-login #login-form {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
			max-width: none;
			max-width: initial;
		}
@media (max-width: 768px) {
html:not(.dark-mode) .task-login #login-form {

				max-width: 360px;
				margin: 0 auto;
		}

			}
html:not(.dark-mode) .task-login #login-form .row {
				margin-bottom: 8px;
			}
html:not(.dark-mode) .task-login #login-form .row:last-child {
					margin-bottom: 16px;
				}
html:not(.dark-mode) .task-login #login-form #login-footer {
				flex: 0 0 auto;
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
				margin-top: auto;
			}
html:not(.dark-mode) .task-login #login-form .input-group {
				flex: 1;
				height: 56px;
				border-radius: 12px;
				overflow: hidden;
				border: 1px solid rgb(228, 228, 231);
				border: 1px solid var(--color-zinc-200);
			}
html:not(.dark-mode) .task-login #login-form .input-group:hover {
					outline: 2px solid #b3d5f9;
					outline: 2px solid var(--color-blue-200);
					outline-offset: -2px;
				}
html:not(.dark-mode) .task-login #login-form .input-group:hover:has(.form-control:not(:-moz-placeholder)) {
					outline: 0;
					outline-offset: 0;
				}
html:not(.dark-mode) .task-login #login-form .input-group:hover:has(.form-control:not(:placeholder-shown)) {
					outline: 0;
					outline-offset: 0;
				}
html:not(.dark-mode) .task-login #login-form .input-group:focus-within {
					outline: 1px solid #0073ec;
					outline: 1px solid var(--color-blue-700);
					outline-offset: -1px;
				}
html:not(.dark-mode) .task-login #login-form .input-group .icon.input-group-text,html:not(.dark-mode) .task-login #login-form .input-group .form-control {
					background-color: transparent;
					border: 0 none;
					min-width: 0;
					border-radius: 0;
					padding: 0;

				}
html:not(.dark-mode) .task-login #login-form .input-group .icon.input-group-text:before {
					font-size: 14px;
					position: relative;
					top: -0.5px;
					color: rgb(212, 212, 216);
					color: var(--color-zinc-300);
					padding-left: 16px;
				}
html:not(.dark-mode) .task-login #login-form .input-group .form-control {
					color: rgb(24, 24, 27);
					color: var(--color-zinc-900);
					padding-left: 24px;
					padding-right: 8px;
					height: auto;
					font-size: 16px;
					font-weight: 400;
				}
html:not(.dark-mode) .task-login #login-form .input-group .form-control::-moz-placeholder {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}
html:not(.dark-mode) .task-login #login-form .input-group .form-control::placeholder {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}
html:not(.dark-mode) .task-login #login-form .input-group .form-control:focus {
						color: rgb(24, 24, 27) !important;
						color: var(--color-zinc-900) !important;
						border: medium none currentcolor;
						border: initial;
						box-shadow: none;
						box-shadow: initial;
					}
html:not(.dark-mode) .task-login #login-form .btn-primary {
				height: 56px;
				text-transform: capitalize !important;
				font-size: 16px;
			}
html:not(.dark-mode) .task-login #login-form .btn-primary:hover,html:not(.dark-mode) .task-login #login-form .btn-primary:focus {
					background-color: #1981ee;
					background-color: var(--color-blue-600);
					border-color: #1981ee;
					border-color: var(--color-blue-600);
				}


html.dark-mode {
	scrollbar-color: #0073ec rgba(24, 24, 27, 0.5);
	scrollbar-color: var(--color-blue-700) var(--color-scrollbar);

}


html.dark-mode body {
		background-color: rgb(9, 9, 11) !important;
		background-color: var(--color-zinc-950) !important;
		color: rgb(212, 212, 216);
		color: var(--color-zinc-300);
	}


html.dark-mode.iframe body {
		background-color: rgb(16, 16, 19) !important;
		background-color: var(--color-zinc-925) !important;
	}


html.dark-mode .nav-tabs {
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
		gap: 8px;
	}


html.dark-mode .nav-tabs .nav-item {
			padding-bottom: 8px;
		}


html.dark-mode .nav-tabs .nav-link {
			border: 0 none;
			font-weight: 500;
			color: rgb(159, 159, 169);
			color: var(--color-zinc-400);
			position: relative;
			overflow: visible;
			padding: 13px 16px;
			line-height: 1;
		}


html.dark-mode .nav-tabs .nav-link:before {
				transition: all 0.3s ease;
			}


html.dark-mode .nav-tabs .nav-link:after {
				transition: all 0.3s ease;
			}


html.dark-mode .nav-tabs .nav-link:not(.active):hover {
				border: 0 none;
				background: transparent;
			}


html.dark-mode .nav-tabs .nav-link:not(.active):hover:after {
					background: rgb(39, 39, 42);
					background: var(--color-zinc-800);
					border-radius: 999px;
					z-index: -1;
					position: absolute;
					bottom: 0;
					top: 0;
					right: 0;
					left: 0;
					content: "";
				}


html.dark-mode .nav-tabs .nav-link.active {
				border-bottom-color: transparent;
				font-weight: 600;
				background: transparent;
			}


html.dark-mode .nav-tabs .nav-link.active:before {
					background: #0073ec;
					background: var(--color-blue-700);
					position: absolute;
					bottom: -8px;
					left: 0;
					right: 0;
					content: "";
					height: 2px;
				}


html.dark-mode .nav-tabs .nav-link.active:after {
					background: transparent;
					border-radius: 999px;
					z-index: -1;
					position: absolute;
					bottom: 0;
					top: 0;
					right: 0;
					left: 0;
					content: "";
				}


html.dark-mode .html-editor .editor-toolbar {
		border-radius: 12px 12px 0 0;
		background-color: rgb(39, 39, 42);
		background-color: var(--color-zinc-800);
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
	}


html.dark-mode .input-group-text {
		background-color: rgb(39, 39, 42);
		background-color: var(--color-zinc-800);
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
		border-radius: 12px;
	}


html.dark-mode .input-group-text:focus {
			border-color: #0073ec;
			border-color: var(--color-blue-700);
		}


html.dark-mode .propform.grouped .row.input-group .content {
		background: transparent;
	}


html.dark-mode .propform.grouped .row.input-group .content .form-control {
			border-bottom: 1px solid rgb(63, 63, 70);
			border-bottom: 1px solid var(--color-zinc-700);
		}


html.dark-mode body.status-flagged #message-header > .subject:before {
		color: #f59d00;
		color: var(--color-orange-500);
	}


html.dark-mode:not(.touch) .listing li > a:focus,html.dark-mode:not(.touch) .listing.focus tbody tr.focused > td:first-child,html.dark-mode:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
		border-left: 2px solid #0073ec;
		border-left: 2px solid var(--color-blue-700);
		outline: 0;
	}


html.dark-mode .popover,html.dark-mode body,html.dark-mode button,html.dark-mode div.tox,html.dark-mode div.tox :not(.svg),html.dark-mode input,html.dark-mode optgroup,html.dark-mode select,html.dark-mode textarea {
		font-family: "ProximaNova", sans-serif;
	}


html.dark-mode #layout-menu {
		position: relative;
	}


html.dark-mode #layout-menu .special-buttons {
			right: 0;
		}


@media (min-width: 769px) {


html.dark-mode #layout-menu .special-buttons {
				padding: 0 8px;
		}
			}


html.dark-mode #layout-menu .special-buttons .about {
				display: none;
			}


html.dark-mode #layout-sidebar {
		border-right: 0;
		min-width: 240px;
	}


html.dark-mode #layout-content img.contactphoto {
			width: 32px !important;
			height: 32px !important;
		}


html.dark-mode #layout-content,html.dark-mode #layout-list,html.dark-mode #layout-sidebar,html.dark-mode #layout > div > .footer {
		background-color: rgb(113, 113, 123);
		background-color: var(--color-zinc-500);
	}


html.dark-mode #layout > div > .header a.button {
		color: rgb(228, 228, 231);
		color: var(--color-zinc-200);
	}


html.dark-mode .ui-dialog {
		border: 0;
		border-radius: 24px;
	}


html.dark-mode .ui-dialog .ui-dialog-titlebar {
			border: 0;
		}


html.dark-mode .ui-dialog .ui-dialog-title {
			padding: 24px;
			line-height: 1;
		}


html.dark-mode .ui-dialog .ui-dialog-titlebar-close {}


html.dark-mode .btn {
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		padding: 0 20px 0 20px;
		border-radius: 10px;
	}


html.dark-mode .btn-primary {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		border-color: #0073ec;
		border-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}


html.dark-mode .btn-primary:hover {
			background-color: #0073ec;
			background-color: var(--color-blue-700);
			border-color: #0073ec;
			border-color: var(--color-blue-700);
		}


html.dark-mode .btn-primary:focus {
			box-shadow: 0 0 0 2px rgb(255, 255, 255);
			box-shadow: 0 0 0 2px var(--color-white);
		}


html.dark-mode .btn-secondary.attach {
		background-color: rgb(63, 63, 70);
		background-color: var(--color-zinc-700);
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}


html.dark-mode .btn-secondary.attach:hover:not(:disabled) {
			background-color: rgb(82, 82, 92);
			background-color: var(--color-zinc-600);
			border-color: rgb(82, 82, 92);
			border-color: var(--color-zinc-600);
		}


html.dark-mode .btn.cancel {
		font-weight: 600;
		background: var(--color-800);
		border: 1px solid rgb(39, 39, 42);
		border: 1px solid var(--color-zinc-800);
		color: rgb(255, 255, 255);
		color: var(--color-white);
		font-size: 14px;
	}


html.dark-mode .btn.cancel:hover {
			background: var(--color-zinc-black);
		}


html.dark-mode .file-upload {
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
		border-radius: 24px;
	}


html.dark-mode .file-upload .hint {
			color: rgb(113, 113, 123);
			color: var(--color-zinc-500);
		}


html.dark-mode #mailboxlist li,html.dark-mode #directorylist li {
			border-bottom: 0;
			line-height: 1;
		}


html.dark-mode #mailboxlist li a,html.dark-mode #directorylist li a {
			display: flex;
			align-items: center;
			height: 40px;
			border-radius: 10px;
			padding-left: 1rem;
			color: rgb(212, 212, 216);
			color: var(--color-zinc-300);
			/* marker: zinc-400 to 300 */
			border-left-color: transparent !important;
		}


html.dark-mode #mailboxlist li a:hover,html.dark-mode #directorylist li a:hover {
				background-color: rgb(228, 228, 231);
				background-color: var(--color-zinc-200);
			}


html.dark-mode #mailboxlist li a:before {
				font-size: 1rem;
				margin-right: 1rem;
				height: auto;
			}


html.dark-mode #directorylist li a:before {
				font-size: 1rem;
				margin-right: 1rem;
				height: auto;
			}


html.dark-mode #mailboxlist li.selected,html.dark-mode #directorylist li.selected {
			background-color: transparent;
			background-color: initial;
		}


html.dark-mode #mailboxlist li.selected a,html.dark-mode #directorylist li.selected a {
				background-color: transparent;
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}


html.dark-mode .folderlist li.mailbox.unread > a {
		padding-right: 8px;
	}


html.dark-mode .form-control {
		border-radius: 12px;
	}


html.dark-mode .custom-file-label {
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
		border-color: rgb(82, 82, 92) !important;
		border-color: var(--color-zinc-600) !important;
		color: rgb(212, 212, 216) !important;
		color: var(--color-zinc-300) !important;
	}


html.dark-mode .custom-file-label::after {
			background-color: rgb(24, 24, 27) !important;
			background-color: var(--color-zinc-900) !important;
			border-color: rgb(82, 82, 92) !important;
			border-color: var(--color-zinc-600) !important;

		}


html.dark-mode .rounded-left {
		border-radius: 12px 0 0 12px !important;
	}


html.dark-mode .rounded-right {
		border-radius: 0 12px 12px 0 !important;
	}


html.dark-mode .row.input-group input.form-control[type="text"] {
			height: 48px;
			padding: 8px 20px;
		}


html.dark-mode .row.input-group input.form-control[type="text"]::-moz-placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}


html.dark-mode .row.input-group input.form-control[type="text"]::placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}


html.dark-mode .row.input-group .form-control:not(.custom-select) {
			background: transparent;
		}


html.dark-mode .recipient-input.focus {
			border-color: #0073ec !important;
			border-color: var(--color-blue-700) !important;
			box-shadow: 0 0 0 2px rgb(63, 63, 70);
			box-shadow: 0 0 0 2px var(--color-zinc-700);
		}


html.dark-mode .recipient-input input {
			line-height: 36px;
			border-radius: 12px;
			padding-left: 9.5px;
		}


html.dark-mode .recipient-input.focus {
			border-color: #0073ec !important;
			border-color: var(--color-blue-700) !important;
			box-shadow: 0 0 0 2px rgb(63, 63, 70);
			box-shadow: 0 0 0 2px var(--color-zinc-700);
		}


html.dark-mode .recipient-input input {
			line-height: 36px;
			border-radius: 12px;
			padding-left: 9.5px;
		}


html.dark-mode .recipient-input .recipient {
			padding: 0 6px 0 12px;
			align-items: center;
			border: 0 none;
			background: #002e5e;
			background: var(--color-blue-900);
			border-radius: 999px;
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}


html.dark-mode .recipient-input .recipient a.button.icon:before {
				line-height: 1;
			}


html.dark-mode #compose-subject {
		height: 48px;
		padding-left: 20px;
	}


html.dark-mode .select-menu .listing li a.selected {
			color: rgb(255, 255, 255);
			color: var(--color-white);
			background-color: #0073ec;
			background-color: var(--color-blue-700);
		}


html.dark-mode .custom-select {
		display: inline-block;
		/* width: 100%; */
		height: 48px;
		padding: 8px 20px;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		border: 1px solid rgb(113, 113, 123);
		border: 1px solid var(--color-zinc-500);
		border-radius: 12px;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}


html.dark-mode .custom-switch .custom-control-label::before {
		background-color: transparent;
	}


html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
		background-color: #1981ee;
		background-color: var(--color-blue-600);
		border-color: #1981ee;
		border-color: var(--color-blue-600);
	}


html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
		background-color: rgb(255, 255, 255);
		background-color: var(--color-white);
	}


html.dark-mode .column-resizer:hover:not(.active) {
		background-color: rgba(149, 149, 155, 0.2);
		background-color: var(--color-resizer);
		transition: background-color 0.3s ease;
	}


html.dark-mode #listoptions-sortord-clone {
		text-transform: capitalize;
	}


html.dark-mode .menu span.inner {
		font-size: 12px;
	}


@media (min-width: 1201px) {
		html.dark-mode a.toolbar-button span.inner {
			font-size: 12px;
		}
	}


@media (min-width: 1025px) {


html.dark-mode #compose-content .formcontent {
				padding: 16px 32px 16px 32px;
		}
			}


html.dark-mode a {
		color: #0073ec;
		color: var(--color-blue-700);
	}


html.dark-mode a:hover {
			color: #0073ec;
			color: var(--color-blue-700);
		}


html.dark-mode .btn-primary {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		border-color: #0073ec;
		border-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}


html.dark-mode .btn-primary:hover:not(:disabled) {
			background-color: #0073ec;
			background-color: var(--color-blue-700);
			border-color: #0073ec;
			border-color: var(--color-blue-700);
		}


/* left nav menu */


html.dark-mode #layout-menu {
		background: rgb(0, 0, 0);
		background: var(--color-black);
		border-right: 0;
	}


html.dark-mode #layout-menu .special-buttons a:not(:focus) {
			background: rgb(0, 0, 0);
			background: var(--color-black);
		}


html.dark-mode #logo {
		opacity: 1;
	}


html.dark-mode #taskmenu {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}


@media (min-width: 1025px) {


html.dark-mode #taskmenu {
			padding: 0 8px;
	}
		}


html.dark-mode #taskmenu a {
			color: rgb(212, 212, 216);
			color: var(--color-zinc-300);
		}


html.dark-mode #taskmenu a.selected {
				background-color: rgb(24, 24, 27);
				background-color: var(--color-zinc-900);
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}


/* marker: zinc-400 to 300 */


@media (min-width: 1025px) {


html.dark-mode #taskmenu a {
				border-radius: 16px;
				width: 100%;
		}

				html.dark-mode #taskmenu a:hover {
					background-color: rgb(24, 24, 27);
					background-color: var(--color-zinc-900);
				}

				html.dark-mode #taskmenu a.selected {
					background-color: #002E5E;
					color: rgb(255, 255, 255);
					color: var(--color-white);
				}

				html.dark-mode #taskmenu a:focus {
					background-color: rgb(39, 39, 42);
					background-color: var(--color-zinc-800);
				}
			}


html.dark-mode #taskmenu a.mail {
				order: -1;
			}


html.dark-mode #taskmenu a .special-buttons {}


html.dark-mode #taskmenu .action-buttons a.selected {
					color: rgb(255, 255, 255);
					color: var(--color-white);
				}


html.dark-mode #taskmenu .action-buttons a {

				color: rgb(212, 212, 216);

				color: var(--color-zinc-300);
				/* marker: zinc-400 to 300 */
			}


html.dark-mode .popover {
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
		box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.5);
		border: 0 none;
		border-radius: 16px;
	}


html.dark-mode .popover > .arrow::after {
			border-bottom-color: rgb(24, 24, 27);
			border-bottom-color: var(--color-zinc-900);
			border-top-color: rgb(24, 24, 27);
			border-top-color: var(--color-zinc-900);
		}


html.dark-mode .popover .menu li a {
				padding: 0 16px;
				line-height: 40px;
				color: rgb(212, 212, 216);
				color: var(--color-zinc-300);
			}


html.dark-mode .popover .menu li a:not(.disabled):hover,html.dark-mode .popover .menu li a:not(.disabled):focus {
					background-color: rgb(39, 39, 42);
					background-color: var(--color-zinc-800);
				}


@media (min-width:769px) {
			html.dark-mode .popover .listing li:first-child {
				border-radius: 16px 16px 0 0;
			}

			html.dark-mode .popover .listing li:last-child {
				border-radius: 0 0 16px 16px;
			}
		}


html.dark-mode body.task-mail.action-compose .formbuttons {
			padding: 16px 32px;
		}


html.dark-mode body.task-mail.action-compose #layout-content {
			border-top-left-radius: 24px;
		}


html.dark-mode #layout-content,html.dark-mode #layout-list,html.dark-mode #layout-sidebar,html.dark-mode #layout-sidebar > .header,html.dark-mode #layout-sidebar > .footer,html.dark-mode #layout-list > .header,html.dark-mode #layout-list > .footer,html.dark-mode #layout-content > .header,html.dark-mode #layout-content > .footer {
		background-color: rgb(16, 16, 19);
		background-color: var(--color-zinc-925);
		border-color: transparent !important;
		border-bottom: 0;
	}


html.dark-mode #layout-content > .header,html.dark-mode #layout-content > .footer {
		border-radius: 24px 0 0 0;
		background-color: rgb(16, 16, 19) !important;
		background-color: var(--color-zinc-925) !important;
	}


html.dark-mode #layout-list {
		background-color: rgb(9, 9, 11);
		background-color: var(--color-zinc-950);
		border-right: 1px solid rgb(24, 24, 27) !important;
		border-right: 1px solid var(--color-zinc-900) !important;
		/* border-radius: 16px 0 0 0; */
	}


html.dark-mode #layout-list  > .header,html.dark-mode #layout-list  > .footer,html.dark-mode #layout-list  > .scroller {
			background-color: rgb(16, 16, 19) !important;
			background-color: var(--color-zinc-925) !important;
			border-left: 1px solid rgb(24, 24, 27) !important;
			border-left: 1px solid var(--color-zinc-900) !important;
			/* background-color: red !important; */
		}


html.dark-mode #layout-list  > .header {
			border-radius: 24px 0 0 0;
		}


html.dark-mode #layout-list > .header a.button {
				color: rgb(228, 228, 231) !important;
				color: var(--color-zinc-200) !important;
			}


html.dark-mode #layout-list > .header a.button:hover {
					background-color: rgb(39, 39, 42) !important;
					background-color: var(--color-zinc-800) !important;
				}


html.dark-mode #layout-list  > .footer {
			border-top: 1px solid rgb(24, 24, 27) !important;
			border-top: 1px solid var(--color-zinc-900) !important;
			border-left: 1px solid rgb(24, 24, 27) !important;
			border-left: 1px solid var(--color-zinc-900) !important;
		}


html.dark-mode #layout > div > .header .header-title {
		margin-left: 28px !important;
		text-align: left;
	}


html.dark-mode #messagelist-content {
		background-color: rgb(16, 16, 19);
		background-color: var(--color-zinc-925);
		/* background-color: red; */
	}


/* sidebar */


html.dark-mode #layout-sidebar {
		border-right: 0;
		/* border-radius: 16px 0 0 0; */
		/* border-left: 1px solid var(--color-zinc-900) !important; */
		/* overflow: hidden; */
		background-color: rgb(0, 0, 0);
		background-color: var(--color-black);
	}


html.dark-mode #layout-sidebar  > .header,html.dark-mode #layout-sidebar  > .footer {
			background-color: rgb(9, 9, 11);
			background-color: var(--color-zinc-950);
			border-bottom: 0;
			border-top: 0;
		}


html.dark-mode #layout-sidebar .header {
			border-radius: 24px 0 0 0;
			border-left: 1px solid rgb(24, 24, 27) !important;
			border-left: 1px solid var(--color-zinc-900) !important;
			background-color: rgb(9, 9, 11) !important;
			background-color: var(--color-zinc-950) !important;
		}


html.dark-mode #layout-sidebar .scroller,html.dark-mode #layout-sidebar .footer {
			border-left: 1px solid rgb(24, 24, 27) !important;
			border-left: 1px solid var(--color-zinc-900) !important;
			background-color: rgb(9, 9, 11) !important;
			background-color: var(--color-zinc-950) !important;
		}


html.dark-mode #layout-sidebar.sidebar-right {
		background-color: rgb(16, 16, 19);
		background-color: var(--color-zinc-925);
	}


html.dark-mode #layout-sidebar.sidebar-right  > .header,html.dark-mode #layout-sidebar.sidebar-right  > .footer {
			background-color: rgb(16, 16, 19);
			background-color: var(--color-zinc-925);
		}


html.dark-mode .frame-content {
		padding: 0;
	}


html.dark-mode #message-header {
		padding: 29px 32px 0 32px;
	}


html.dark-mode #message-header  > .subject {
			line-height: 1.5;
			text-wrap: pretty;
			margin-bottom: 16px;
		}


html.dark-mode #message-header .header-summary {
			margin-top: 0;
		}


html.dark-mode #message-header .header-links a {
			color: rgb(212, 212, 216);
			color: var(--color-zinc-300);
		}


html.dark-mode .menu.pagenav.pagenav-list,html.dark-mode .menu.pagenav.pagenav-list + .navlist,html.dark-mode .menu.pagenav.pagenav-list.expanded + .navlist {
			background-color: transparent;
			border-color: #4d6066;
		}


html.dark-mode .menu a:not(.disabled):focus,html.dark-mode .menu a:not(.disabled):hover {
			background-color: rgb(39, 39, 42);
			background-color: var(--color-zinc-800);
		}


html.dark-mode .menu.toolbar a {
			color: rgb(228, 228, 231);
			color: var(--color-zinc-200);
		}


html.dark-mode .menu.toolbar a:hover {
				color: rgb(250, 250, 250);
				color: var(--color-zinc-50);
				background-color: rgb(39, 39, 42);
				background-color: var(--color-zinc-800);
			}


html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover {
				background-color: rgb(39, 39, 42);
				background-color: var(--color-zinc-800);
			}


html.dark-mode .menu.toolbar .dropbutton a.dropdown:hover {
				background-color: rgb(63, 63, 70);
				background-color: var(--color-zinc-700);
			}


html.dark-mode a.disabled:not(.btn) {
		color: rgb(63, 63, 70);
		color: var(--color-zinc-700);
	}


html.dark-mode .popup {
		min-width: 1px !important;
	}


html.dark-mode .popup .listbox .footer {
				background-color: transparent;
				border-color: #4d6066;
			}


/* listing styles */


html.dark-mode .listing.iconized li a:before {
				margin-right: 16px;
				font-size: 16px;
			}


html.dark-mode .listing.iconized tr td:before {
				margin-right: 16px;
				font-size: 16px;
			}


html.dark-mode .listing.iconized tbody td {
				line-height: 47px;
				padding: 0 16px;
			}


html.dark-mode .listing ul {
			border: 0 none;
		}


html.dark-mode .listing li {
			border: 0;
		}


html.dark-mode .listing li a {
				color: rgb(159, 159, 169);
				color: var(--color-zinc-400);
			}


html.dark-mode .listing li.selected a {
					background-color: rgb(24, 24, 27);
					background-color: var(--color-zinc-900);
					color: rgb(255, 255, 255);
					color: var(--color-white);
				}


html.dark-mode .listing li.selected ul {
					background-color: transparent;
				}


html.dark-mode .listing tbody td {
			border-color: rgb(24, 24, 27);
			border-color: var(--color-zinc-900);
			color: rgb(159, 159, 169);
			color: var(--color-zinc-400);
			line-height: 40px;
		}


html.dark-mode .listing tbody td a {
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}


html.dark-mode .listing tr.selected td {
			background-color: rgb(39, 39, 42);
			background-color: var(--color-zinc-800);
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}


html.dark-mode #directorylist,html.dark-mode #settings-menu,html.dark-mode #mailboxlist {
		padding: 0 16px 16px 16px;
	}


html.dark-mode #directorylist li,html.dark-mode #settings-menu li,html.dark-mode #mailboxlist li {
			margin-bottom: 4px;
		}


html.dark-mode #directorylist li .treetoggle,html.dark-mode #settings-menu li .treetoggle,html.dark-mode #mailboxlist li .treetoggle {
				flex-shrink: 0;
				flex-grow: 0;
				width: 32px;
				height: 32px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				left: 8px;
				top: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				-webkit-user-select: none;
				   -moz-user-select: none;
				        user-select: none;
				color: rgb(159, 159, 169);
				color: var(--color-zinc-400);
			}


html.dark-mode #directorylist li .treetoggle:hover,html.dark-mode #settings-menu li .treetoggle:hover,html.dark-mode #mailboxlist li .treetoggle:hover {
					/* background-color: var(--color-zinc-800); */
					color: rgb(228, 228, 231);
					color: var(--color-zinc-200);
				}


html.dark-mode #directorylist li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}


html.dark-mode #settings-menu li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}


html.dark-mode #mailboxlist li .treetoggle:before {
					color: inherit;
					margin: 0;
					width: auto;
					height: auto;
					position: relative;
					/* left: 2.5px; */
				}


html.dark-mode #directorylist li a,html.dark-mode #settings-menu li a,html.dark-mode #mailboxlist li a {
				border-radius: 10px;
				padding-left: 12px;
				color: rgb(212, 212, 216);
				color: var(--color-zinc-300);
				/* marker: zinc-400 to 300 */
				border-left-color: transparent !important;
				display: flex;
				align-items: center;
				height: 40px;
				font-weight: 500;
			}


html.dark-mode #directorylist li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}


html.dark-mode #settings-menu li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}


html.dark-mode #mailboxlist li a:has( + .treetoggle) {
					padding-left: 36px !important;
				}


html.dark-mode #directorylist li a:hover,html.dark-mode #settings-menu li a:hover,html.dark-mode #mailboxlist li a:hover {
					background-color: rgb(24, 24, 27);
					background-color: var(--color-zinc-900);
				}


html.dark-mode #directorylist li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}


html.dark-mode #settings-menu li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}


html.dark-mode #mailboxlist li a:before {
					font-size: 1rem;
					margin-right: 8px;
					height: auto;
					flex-shrink: 0;
				}


html.dark-mode #directorylist li .groups,html.dark-mode #settings-menu li .groups,html.dark-mode #mailboxlist li .groups {
				margin-top: 4px;
				background-color: transparent !important;
				padding-bottom: 8px;
				border: 0 none;
				padding-left: 24px;
			}


html.dark-mode #directorylist li.selected,html.dark-mode #settings-menu li.selected,html.dark-mode #mailboxlist li.selected {
			background-color: transparent;
			background-color: initial;
		}


html.dark-mode #directorylist li.selected > a,html.dark-mode #settings-menu li.selected > a,html.dark-mode #mailboxlist li.selected > a {
				background-color: rgb(39, 39, 42);
				background-color: var(--color-zinc-800);
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}


html.dark-mode #directorylist ul,html.dark-mode #settings-menu ul,html.dark-mode #mailboxlist ul {
			padding-left: 32px;
		}


/* li ul li a {
				padding-left: 32px !important;
		}
		li ul li ul li a {
			padding-left: 64px !important;
		} */


html.dark-mode .folderlist li.mailbox .unreadcount {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
		padding: 5px 8px;
		margin: 0;
		position: relative;
		margin-left: auto;
		font-size: 12px;
		line-height: 1;
		border-radius: 999px;
		font-weight: 600;
		min-width: 22px;
	}


html.dark-mode #messagelist .message td {
				border-top: 1px solid rgb(24, 24, 27);
				border-top: 1px solid var(--color-zinc-900);
				border-bottom: 0;
			}


html.dark-mode #messagelist .message td.subject {
				padding: 12px 0 16px 0;
			}


html.dark-mode #messagelist .message td.subject span {
					line-height: 20px;
				}


html.dark-mode #messagelist .message td.subject .date,html.dark-mode #messagelist .message td.subject .fromto,html.dark-mode #messagelist .message td.subject .size,html.dark-mode #messagelist .message td.subject a,html.dark-mode #messagelist .message td.subject span {
					color: rgb(228, 228, 231);
					color: var(--color-zinc-200);
				}


html.dark-mode #messagelist .message td.subject .fromto {
					padding-left: 36px;
				}


html.dark-mode #messagelist .message td.subject .status {
					color: rgb(39, 39, 42);
					color: var(--color-zinc-800);
				}


html.dark-mode #messagelist .message td.subject .status .unread:before {
							color: #0073ec;
							color: var(--color-blue-700);
						}


html.dark-mode #messagelist .message td.subject .status:hover {
						color: rgb(82, 82, 92);
						color: var(--color-zinc-600);
					}


html.dark-mode #messagelist .message td.subject .status:hover:before {
						background-color: rgb(39, 39, 42);
						background-color: var(--color-zinc-800);
					}


html.dark-mode #messagelist .message td.subject .status:before {
						margin: 0 8px 0 8px;
						width: 20px;
						height: 20px;
						line-height: 20px;
						border-radius: 50%;
						/* color: var(--color-blue-700); */
					}


html.dark-mode #messagelist .message:hover {
				background-color: rgb(24, 24, 27);
				background-color: var(--color-zinc-900);
			}


html.dark-mode #messagelist .message:hover td .date,html.dark-mode #messagelist .message:hover td .fromto,html.dark-mode #messagelist .message:hover td .size,html.dark-mode #messagelist .message:hover td a {
						color: rgb(159, 159, 169);
						color: var(--color-zinc-400);
					}


html.dark-mode #messagelist .message.flagged span.flagged {
					color: #f59d00;
					color: var(--color-orange-500);
				}


/* default text color for all cells */


html.dark-mode #messagelist .message.selected {
				background-color: rgb(9, 9, 11);
				background-color: var(--color-zinc-950);
			}


html.dark-mode #messagelist .message.selected:hover {
					background-color: rgb(9, 9, 11);
					background-color: var(--color-zinc-950);
				}


html.dark-mode #messagelist .message.selected td {
					background-color: transparent;
					background-color: initial;
				}


html.dark-mode #messagelist .message.selected td .date,html.dark-mode #messagelist .message.selected td .fromto,html.dark-mode #messagelist .message.selected td .size,html.dark-mode #messagelist .message.selected td a,html.dark-mode #messagelist .message.selected td span {
						color: rgb(255, 255, 255);
						color: var(--color-white);
					}


html.dark-mode #messagelist .message.selected span.flagged {
					color: #f59d00;
					color: var(--color-orange-500);
				}


html.dark-mode #messagelist .message.deleted {}


html.dark-mode #messagelist .message.unread {
				background-color: rgb(24, 24, 27);
				background-color: var(--color-zinc-900);
			}


html.dark-mode #messagelist .message.unread td {
					border-top: 1px solid rgb(39, 39, 42);
					border-top: 1px solid var(--color-zinc-800);
					border-bottom: 0;
				}


html.dark-mode #messagelist .message.unread td.subject .date,html.dark-mode #messagelist .message.unread td.subject .fromto,html.dark-mode #messagelist .message.unread td.subject .size,html.dark-mode #messagelist .message.unread td.subject a,html.dark-mode #messagelist .message.unread td.subject span {
						color: rgb(250, 250, 250);
						color: var(--color-zinc-50);
						font-weight: 600;
					}


html.dark-mode #messagelist .message:not(.deleted) td.subject span.msgicon.status.unread::before {
							color: #0073ec;
							color: var(--color-blue-700);
						}


html.dark-mode #messagelist span.flag,html.dark-mode #messagelist span.flagged {
			font-size: 12px !important;
		}


html.dark-mode #layout-list > .searchbar {
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
		border-bottom: 1px solid rgb(24, 24, 27);
		border-bottom: 1px solid var(--color-zinc-900);
		border-left: 1px solid rgb(39, 39, 42);
		border-left: 1px solid var(--color-zinc-800);
		height: 40px;
		min-height: 40px;
		line-height: 40px;
		padding-right: 4px;
	}


html.dark-mode #layout-list > .searchbar input {
			padding-left: 9px;
		}


html.dark-mode #layout-list > .searchbar input::-moz-placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}


html.dark-mode #layout-list > .searchbar input::placeholder {
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
			}


html.dark-mode #layout-list > .searchbar form:before {
			margin-left: 10px;
			height: 40px;
			font-size: 16px;
		}


html.dark-mode #layout-list > .searchbar a {
			border-radius: 999px;
		}


html.dark-mode #layout-list > .searchbar a:not(.disabled):hover,html.dark-mode #layout-list > .searchbar a:not(.disabled):focus {
				background-color: rgb(39, 39, 42);
				background-color: var(--color-zinc-800);
				color: rgb(255, 255, 255);
				color: var(--color-white);
			}


html.dark-mode #layout-list > .searchbar a:not(.disabled):not(.selected):hover:before {
					color: rgb(255, 255, 255);
					color: var(--color-white);
				}


html.dark-mode #layout-list > .searchbar a:not(.disabled):not(.selected):focus:before {
					color: rgb(255, 255, 255);
					color: var(--color-white);
				}


html.dark-mode #layout-list > .searchbar a:before {
				width: 32px;
				height: 32px;
				margin: 0;
				line-height: 32px;
				font-size: 14px;
			}


html.dark-mode .formcontainer .formbuttons {
		border-top: 1px solid rgb(24, 24, 27);
		border-top: 1px solid var(--color-zinc-900);
	}


html.dark-mode .form-control:not(.is-invalid) {
		border-color: rgb(63, 63, 70);
		border-color: var(--color-zinc-700);
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
	}


html.dark-mode .form-control:not(.is-invalid):focus {
			border-color: #0073ec;
			border-color: var(--color-blue-700);
			box-shadow: 0 0 0 2px rgb(63, 63, 70);
			box-shadow: 0 0 0 2px var(--color-zinc-700);
		}


html.dark-mode .input-group a:focus {
		border-color: #0073ec;
		border-color: var(--color-blue-700);
		box-shadow: 0 0 0 2px rgb(63, 63, 70);
		box-shadow: 0 0 0 2px var(--color-zinc-700);
	}


html.dark-mode .simplelist.listing li {
		padding: 0 16px;
	}


html.dark-mode .simplelist.listing li.selected,html.dark-mode .simplelist.listing li.selected > a,html.dark-mode .simplelist.listing li.selected > div > a,html.dark-mode .simplelist.listing tr.selected td {
		color: #0073ec;
		color: var(--color-blue-700);
		background-color: rgb(39, 39, 42);
		background-color: var(--color-zinc-800);
	}


/* jQuery UI widgets */


html.dark-mode .ui-widget-content {
		background-color: transparent;
	}


html.dark-mode .ui-widget-header {}


html.dark-mode .ui-dialog {
		background-color: rgb(24, 24, 27);
		background-color: var(--color-zinc-900);
	}


html.dark-mode .ui-dialog .ui-dialog-title {
			color: rgb(250, 250, 250);
			color: var(--color-zinc-50);
		}


html.dark-mode .ui-dialog .ui-dialog-titlebar {
			background-color: transparent;
		}


html.dark-mode .listing-info {
		color: rgb(212, 212, 216);
		color: var(--color-zinc-300);
	}


html.dark-mode #message-objects {
		padding: 0 32px;
	}


html.dark-mode .ui.alert {
		border-radius: 16px;
		padding: 11px 8px;
	}


html.dark-mode .ui.alert.boxwarning {
		background-color: rgba(254, 245, 229, 1);
		background-color: var(--color-alert);
		color: rgb(0, 0, 0);
		color: var(--color-black);
	}


html.dark-mode .ui.alert.boxwarning .btn-primary {
			background-color: #dd8d00;
			background-color: var(--color-orange-600);
			border-color: #dd8d00;
			border-color: var(--color-orange-600);
			min-height: 32px;
			padding: 0 16px 0 16px;
		}


html.dark-mode .ui.alert.boxwarning i.icon {
			width: 32px;
			height: 32px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: #fdebcc;
			background: var(--color-orange-100);
			border-radius: 999px;
			margin: 0 16px 0 8px;
			font-size: 16px;
		}


html.dark-mode .ui.alert.boxwarning i.icon:before {
				color: #dd8d00;
				color: var(--color-orange-600);
				font-size: 16px;
				margin: 0;
				position: relative;
				top: -1.5px;
			}


html.dark-mode html:not(.touch) .listing li > a:focus,html.dark-mode html:not(.touch) .listing.focus tbody tr.focused > td:first-child,html.dark-mode html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
		border-left: 2px solid #0073ec;
		border-left: 2px solid var(--color-blue-700);
		outline: 0;
	}


html.dark-mode #messagestack .alert-info,html.dark-mode .ui.alert.boxinformation {
		background-color: #0073ec;
		background-color: var(--color-blue-700);
		color: rgb(255, 255, 255);
		color: var(--color-white);
	}


html.dark-mode #messagestack .alert-info i.icon:before {
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}


html.dark-mode .ui.alert.boxinformation:not(#does-not-exist) i.icon:before {
			color: rgb(255, 255, 255);
			color: var(--color-white);
		}


html.dark-mode #contactpic {
		background-color: rgb(24, 24, 27) !important;
		background-color: var(--color-zinc-900) !important;
	}


html.dark-mode #contacthead.readonly .source.row {
		color: rgb(228, 228, 231);
		color: var(--color-zinc-200);
	}


html.dark-mode #messagebody {
		padding: 0 32px 30px;
	}


html.dark-mode .message-htmlpart {
		padding: 16px;
	}


html.dark-mode .task-login .login-image {
			display: none;
		}


html.dark-mode .task-login #logo {
			max-height: 24px;
		}


@media (min-width: 769px) {


html.dark-mode .task-login {
			background-color: rgb(255, 255, 255) !important;
			background-color: var(--color-white) !important;
			padding: 24px;
			height: 100vh;
	}

			html.dark-mode .task-login #layout {
				background-color: transparent;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 100%;
			}

			html.dark-mode .task-login .login-image {
				display: block;
				height: 100%;
				width: 100%;
				overflow: hidden;
				position: relative;
			}


				html.dark-mode .task-login .login-image .logo {
					height: 20px;
				}

				html.dark-mode .task-login .login-image .background-image {
					width: 100%;
					height: 100%;
					-o-object-fit: cover;
					   object-fit: cover;
					border-radius: 24px;
				}

				html.dark-mode .task-login .login-image .login-text-container {
					position: absolute;
					left: 64px;
					top: 64px;
					letter-spacing: -0.3px;
					color: rgb(255, 255, 255);
					color: var(--color-white);
					margin-bottom: 0;

				}

					html.dark-mode .task-login .login-image .login-text-container h2 {
						font-weight: 600;
						font-family: "Gilroy", sans-serif;
						text-wrap: balance;
						font-size: 48px;
						max-width: 24ch;
						display: none;

					}

			html.dark-mode .task-login #layout-content,html.dark-mode .task-login #login-form,html.dark-mode .task-login #logo {
				top: auto;
				top: initial;
			}

			html.dark-mode .task-login #logo {
				max-height: 24px;
				margin-bottom: 32px;
			}

				html.dark-mode .task-login #logo:after {
					content: "Webmail";
					font-size: 24px;

				}

			html.dark-mode .task-login #layout-content {
				max-width: 560px;
				margin: 0 auto;
				background-color: rgb(255, 255, 255);
				background-color: var(--color-white);
				display: flex;
				flex-direction: column;
				align-items: start;
				gap: 16px;

				height: auto;
				padding: 0 48px;
				flex-shrink: 0;
			}

				html.dark-mode .task-login #layout-content:before {
					content: "";
					display: block;
				}
		}


html.dark-mode .task-login #login-form {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
			max-width: none;
			max-width: initial;
		}


@media (max-width: 768px) {


html.dark-mode .task-login #login-form {

				max-width: 360px;
				margin: 0 auto;
		}

			}


html.dark-mode .task-login #login-form .row {
				margin-bottom: 8px;
			}


html.dark-mode .task-login #login-form .row:last-child {
					margin-bottom: 16px;
				}


html.dark-mode .task-login #login-form #login-footer {
				flex: 0 0 auto;
				color: rgb(113, 113, 123);
				color: var(--color-zinc-500);
				margin-top: auto;
			}


html.dark-mode .task-login #login-form .input-group {
				flex: 1;
				height: 56px;
				border-radius: 12px;
				overflow: hidden;
				border: 1px solid rgb(228, 228, 231);
				border: 1px solid var(--color-zinc-200);
			}


html.dark-mode .task-login #login-form .input-group:hover {
					outline: 2px solid #b3d5f9;
					outline: 2px solid var(--color-blue-200);
					outline-offset: -2px;
				}


html.dark-mode .task-login #login-form .input-group:hover:has(.form-control:not(:-moz-placeholder)) {
					outline: 0;
					outline-offset: 0;
				}


html.dark-mode .task-login #login-form .input-group:hover:has(.form-control:not(:placeholder-shown)) {
					outline: 0;
					outline-offset: 0;
				}


html.dark-mode .task-login #login-form .input-group:focus-within {
					outline: 1px solid #0073ec;
					outline: 1px solid var(--color-blue-700);
					outline-offset: -1px;
				}


html.dark-mode .task-login #login-form .input-group .icon.input-group-text,html.dark-mode .task-login #login-form .input-group .form-control {
					background-color: transparent;
					border: 0 none;
					min-width: 0;
					border-radius: 0;
					padding: 0;

				}


html.dark-mode .task-login #login-form .input-group .icon.input-group-text:before {
					font-size: 14px;
					position: relative;
					top: -0.5px;
					color: rgb(212, 212, 216);
					color: var(--color-zinc-300);
					padding-left: 16px;
				}


html.dark-mode .task-login #login-form .input-group .form-control {
					color: rgb(24, 24, 27);
					color: var(--color-zinc-900);
					padding-left: 24px;
					padding-right: 8px;
					height: auto;
					font-size: 16px;
					font-weight: 400;
				}


html.dark-mode .task-login #login-form .input-group .form-control::-moz-placeholder {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}


html.dark-mode .task-login #login-form .input-group .form-control::placeholder {
						color: rgb(113, 113, 123);
						color: var(--color-zinc-500);
					}


html.dark-mode .task-login #login-form .input-group .form-control:focus {
						color: rgb(24, 24, 27) !important;
						color: var(--color-zinc-900) !important;
						border: medium none currentcolor;
						border: initial;
						box-shadow: none;
						box-shadow: initial;
					}


html.dark-mode .task-login #login-form .btn-primary {
				height: 56px;
				text-transform: capitalize !important;
				font-size: 16px;
			}


html.dark-mode .task-login #login-form .btn-primary:hover,html.dark-mode .task-login #login-form .btn-primary:focus {
					background-color: #1981ee;
					background-color: var(--color-blue-600);
					border-color: #1981ee;
					border-color: var(--color-blue-600);
				}