@charset "UTF-8";

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

button {
	-webkit-appearance: button
}

button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring {
	outline: 1px dotted ButtonText
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	height: auto
}

input[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

@font-face {
	font-family: snappymail;
	src: url(fonts/snappymail.woff2) format("woff2"), url(fonts/snappymail.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

.fontastic,
[class*=" icon-"]::before,
[class^=icon-]::before,
[data-icon]::before {
	font-family: snappymail !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-variant: normal !important;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased
}

[data-icon]::before {
	content: attr(data-icon);
	display: inline-block;
	margin-right: .5em;
	min-width: 1em
}

.icon-arrows-in::before {
	content: "\e000"
}

.icon-arrows-out::before {
	content: "\e001"
}

.icon-user-add::before {
	content: "\e005"
}

.icon-paper-plane::before {
	content: "📧"
}

.icon-right-mini::before {
	content: "›"
}

.icon-down-mini::before {
	content: "⌄"
}

.icon-ok::before {
	content: "✔"
}

.icon-file::before {
	content: "🗎"
}

.icon-file-code::before {
	content: "\e030"
}

.icon-file-presentation::before {
	content: "📊"
}

.icon-file-archive::before {
	content: "📦"
}

.icon-file-audio::before {
	content: "🔊"
}

.icon-file-text::before {
	content: "📄"
}

.icon-file-image::before {
	content: "🖻"
}

.icon-file-certificate::before {
	content: "\e038"
}

.icon-attachment::before {
	content: "📎"
}

.icon-file-spreadsheet::before {
	content: "▦"
}

.icon-file-video::before {
	content: "🎬"
}

.icon-folder-add::before {
	content: "\e03c"
}

.icon-lock::before {
	content: "🔒"
}

.icon-filter::before {
	content: "\e061"
}

.icon-import::before {
	content: "\e066"
}

.icon-export::before {
	content: "\e067"
}

.icon-copy::before {
	content: "\e068"
}

.icon-check-mark-circle-two::before {
	content: "\e073"
}

.icon-file-calendar::before {
	content: "📅"
}

.input-block-level {
	display: block;
	width: 100%;
	min-height: 30px
}

:root {
	--smDialogShrink: 20px;
	--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2)
}

.row {
	margin-left: -20px
}

[class*=span] {
	display: inline-block;
	margin-left: 20px;
	vertical-align: top
}

.span12 {
	width: 940px
}

.span11 {
	width: 860px
}

.span10 {
	width: 780px
}

.span9 {
	width: 700px
}

.span8 {
	width: 620px
}

.span7 {
	width: 540px
}

.span6 {
	width: 460px
}

.span5 {
	width: 380px
}

.span4 {
	width: 300px
}

.span3 {
	width: 220px
}

.span2 {
	width: 140px
}

.span1 {
	width: 60px
}

p {
	margin: .715em 0
}

small {
	font-size: 80%
}

b,
strong {
	font-weight: bolder
}

em {
	font-style: italic
}

cite {
	font-style: normal
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 40px;
	margin: .715em 0;
	text-rendering: optimizelegibility
}

h1 {
	font-size: 257%
}

h2 {
	font-size: 214%
}

h3 {
	font-size: 171%
}

h4 {
	font-size: 128%
}

h5 {
	font-size: 100%
}

h6 {
	font-size: 85%
}

h4,
h5,
h6 {
	line-height: 20px
}

ol,
ul {
	padding: 0;
	margin: 0 0 .715em 25px
}

ol ol,
ol ul,
ul ol,
ul ul {
	margin-bottom: 0
}

li {
	line-height: 1.43em
}

hr {
	margin: 1.43em 0;
	border: 0;
	border-bottom: 1px solid var(--hr-color, #eee);
	height: 0
}

blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 1.43em;
	border-left: 5px solid var(--border-color, #ddd)
}

blockquote::after,
blockquote::before,
q::after,
q::before {
	content: ""
}

address {
	display: block;
	margin-bottom: 1.43em;
	font-style: normal;
	line-height: 1.43em
}

form {
	margin: 0 0 1.43em
}

label {
	display: inline-block;
	font-weight: 400;
	line-height: 1.43em;
	margin-bottom: 5px
}

.select,
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: var(--main-font-size, 14px);
	line-height: 1.43em;
	margin: 0;
	text-transform: none
}

.select,
input,
select,
textarea {
	display: inline-block;
	padding: 4px 6px;
	color: var(--input-clr, #555);
	border-radius: var(--input-border-radius, 3px);
	width: 210px
}

input,
textarea {
	background-color: var(--input-bg-clr, #fff);
	border: 1px solid var(--input-border-clr, #ccc);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	transition: border linear .2s, box-shadow linear .2s
}

input:focus,
textarea:focus {
	border-color: var(--input-focus-border-clr, #999);
	box-shadow: none
}

input:user-invalid {
	background-color: var(--error-bg-clr, #f2dede);
	border-color: var(--error-border-clr, #eed3d7);
	color: var(--error-clr, #b94a48)
}

input[type=checkbox],
input[type=radio] {
	margin: 4px 0 0;
	line-height: normal;
	cursor: pointer
}

input[type=checkbox],
input[type=file],
input[type=radio] {
	width: auto
}

.select,
select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--input-bg-clr, #fff) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+) right center/1em no-repeat border-box;
	border: 1px solid var(--input-border-clr, #ccc);
	cursor: pointer;
	padding-right: 1.5em
}

.select:focus,
input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus,
select:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px
}

.input-xlarge {
	width: 270px
}

.input-xxlarge {
	width: 530px
}

input[class*=span],
select[class*=span],
textarea[class*=span] {
	margin-left: 0
}

input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
	cursor: not-allowed;
	opacity: .7
}

.control-group.error>label {
	color: var(--error-clr, #b94a48)
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea {
	color: var(--error-clr, #b94a48);
	border-color: var(--error-border-clr, #eed3d7);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
	border-color: var(--error-clr, #b94a48);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--error-border-clr, #eed3d7)
}

.form-horizontal input,
.form-horizontal select,
.form-horizontal textarea {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle
}

.control-group {
	margin-bottom: .715em
}

.form-horizontal .control-group {
	margin-bottom: 1.43em
}

.form-horizontal .control-group>label {
	display: inline-block;
	padding-top: 5px;
	text-align: right;
	width: 140px
}

.form-horizontal .control-group>:not(label) {
	display: inline-block;
	margin-left: 20px;
	vertical-align: top
}

.table {
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin-bottom: 1.43em
}

.table td,
.table th {
	padding: 8px;
	line-height: 1.43em;
	text-align: inherit;
	vertical-align: text-top;
	border-top: 1px solid var(--border-color, #ddd)
}

.table th {
	font-weight: 700
}

.table thead th {
	vertical-align: bottom
}

.table colgroup+thead tr:first-child td,
.table colgroup+thead tr:first-child th,
.table thead:first-child tr:first-child td,
.table thead:first-child tr:first-child th {
	border-top: 0
}

.table-bordered {
	border: 1px solid var(--border-color, #ddd);
	border-collapse: separate;
	border-radius: 4px
}

.table-bordered td+td,
.table-bordered th+th {
	border-left: 1px solid var(--border-color, #ddd)
}

.table-bordered colgroup+tbody tr:first-child td,
.table-bordered colgroup+tbody tr:first-child th,
.table-bordered colgroup+thead tr:first-child th,
.table-bordered tbody:first-child tr:first-child td,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered thead:first-child tr:first-child th {
	border-top: 0
}

.table-bordered tbody:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
	border-radius: 4px 0 0 0
}

.table-bordered tbody:first-child tr:first-child td:last-child,
.table-bordered thead:first-child tr:first-child th:last-child {
	border-radius: 0 4px 0 0
}

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tfoot:last-child tr:last-child td:first-child,
.table-bordered thead:last-child tr:last-child th:first-child {
	border-radius: 0 0 0 4px
}

.table-bordered tbody:last-child tr:last-child td:last-child,
.table-bordered tfoot:last-child tr:last-child td:last-child,
.table-bordered thead:last-child tr:last-child th:last-child {
	border-radius: 0 0 4px 0
}

.table-bordered colgroup+tbody tr:first-child td:first-child,
.table-bordered colgroup+thead tr:first-child th:first-child {
	border-radius: 4px 0 0 0
}

.table-bordered colgroup+tbody tr:first-child td:last-child,
.table-bordered colgroup+thead tr:first-child th:last-child {
	border-radius: 0 4px 0 0
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
	background-color: var(--tr-odd-bg-clr, #f9f9f9)
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
	background-color: var(--tr-hover-bg-clr, #f5f5f5)
}

.close {
	float: var(--right, right);
	font-size: 143%;
	font-weight: 700;
	line-height: 1.43em;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff
}

.close:not(:hover) {
	opacity: .5
}

.btn {
	border-radius: 3px;
	display: inline-block;
	padding: 0 12px;
	line-height: 2em;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--btn-border-clr, rgba(0, 0, 0, .2));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
	color: var(--btn-clr, #333);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
	background-color: var(--btn-bg-clr, #fff);
	text-decoration: none
}

.btn:hover {
	opacity: .9
}

.btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px
}

.btn.active,
.btn:active {
	opacity: .9;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05)
}

.btn.disabled,
.btn[disabled] {
	cursor: default;
	opacity: .7;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05)
}

.btn-large {
	padding: 9px 14px;
	font-size: 121%;
	line-height: normal;
	border-radius: 5px
}

.btn-small {
	padding: 3px 9px;
	font-size: 80%;
	line-height: 1
}

.btn-block {
	display: block;
	padding-left: 0;
	padding-right: 0
}

.btn-danger.active,
.btn-success.active,
.btn-warning.active {
	color: rgba(255, 255, 255, .75)
}

.btn-warning {
	color: #fff;
	background-color: #fbb450
}

.btn-danger {
	color: #fff;
	background-color: var(--btn-danger-bg-clr, #ee5f5b)
}

.btn-success {
	background-color: var(--btn-success-bg-clr, #84ab04);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.btn-group {
	margin-right: 3px;
	position: relative;
	white-space: nowrap
}

.btn-toolbar .btn-group {
	display: inline-block
}

.btn-toolbar * {
	margin-right: 3px
}

.btn-toolbar :last-child {
	margin-right: 0
}

.btn-group>* {
	border-radius: 0;
	position: relative;
	margin-right: 0
}

.btn-group>*+* {
	margin-left: -1px
}

.btn-group>.btn:first-child {
	border-top-left-radius: var(--btn-border-radius, 3px);
	border-bottom-left-radius: var(--btn-border-radius, 3px)
}

.btn-group>.btn:last-child,
.btn-group>.dropdown-toggle {
	border-top-right-radius: var(--btn-border-radius, 3px);
	border-bottom-right-radius: var(--btn-border-radius, 3px)
}

.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus,
.btn-group>.btn:hover {
	z-index: 2
}

.alert {
	padding: 8px 35px 8px 14px;
	margin-bottom: 1.43em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	background-color: var(--warning-bg-clr, #fcf8e3);
	border: 1px solid var(--warning-border-clr, #fbeed5);
	border-radius: 4px;
	color: var(--warning-clr, #c09853);
	max-width: 800px;
	min-height: 1.43em
}

.alert .close {
	position: relative;
	top: -2px;
	right: -21px;
	line-height: 1.43em
}

.alert-error {
	background-color: var(--error-bg-clr, #f2dede);
	border-color: var(--error-border-clr, #eed3d7)
}

.alert-info {
	background-color: var(--info-bg-clr, #d9edf7);
	border-color: var(--info-border-clr, #bce8f1)
}

.alert a:not(.close) {
	text-decoration: underline
}

.alert-info,
.alert.alert-info a:not(.close) {
	color: var(--info-clr, #3a87ad)
}

.alert-error,
.alert.alert-error a:not(.close) {
	color: var(--error-clr, #b94a48)
}

code,
kbd,
pre,
samp {
	padding: 0 3px 2px;
	font-family: var(--fontMono);
	border-radius: 3px
}

code {
	padding: 2px 4px;
	border: 1px solid #e1e1e8
}

pre {
	display: block;
	padding: .715em;
	margin: 0 0 .715em;
	white-space: pre-wrap;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px
}

pre code {
	padding: 0;
	border: 0
}

.dropdown {
	position: relative
}

.dropdown-menu {
	max-height: 60vh;
	max-width: 90vw;
	overflow: auto;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	color: var(--dropdown-menu-color, inherit);
	background-color: var(--dropdown-menu-bg-color, #fff);
	border: 1px solid var(--dropdown-menu-border-clr, rgba(0, 0, 0, .2));
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	background-clip: padding-box
}

.dropdown-menu.right-edge {
	right: 0;
	left: auto
}

.dropdown-menu a {
	background-color: var(--dropdown-menu-bg-color, #fff);
	color: var(--dropdown-menu-color, #333);
	display: block;
	padding: 3px 10px;
	text-decoration: none;
	white-space: nowrap
}

.dropdown-menu li:not(.disabled)>a:focus,
.dropdown-menu li:not(.disabled)>a:hover {
	background-color: var(--dropdown-menu-hover-bg-color, #444);
	color: var(--dropdown-menu-hover-color, #eee);
	text-decoration: none
}

.dropdown-menu .disabled>a,
.dropdown-menu .disabled>a:hover {
	color: var(--dropdown-menu-disabled-color, #999);
	cursor: not-allowed;
	opacity: .5
}

.pull-right {
	float: var(--right, right)
}

.show {
	display: block
}

.fontastic+span,
[class*=" icon-"]+span,
[class^=icon-]+span {
	margin-left: .5em
}

[class*=" icon-"],
[class^=icon-] {
	display: inline-block;
	min-width: 1em
}

.btn[disabled] [class*=" icon-"],
.btn[disabled] [class^=icon-],
.disabled [class*=" icon-"],
.disabled [class^=icon-] {
	opacity: .5
}

.iconsize24 {
	font-size: 171%
}

.iconcolor-green {
	color: green
}

.iconcolor-red {
	color: red
}

@keyframes rotation {
	to {
		transform: rotate(1turn)
	}
}

.icon-spinner {
	height: 1.2em;
	width: 1.2em;
	margin: 0 -1px;
	border: 3px solid #aaa;
	border-top-color: #333;
	border-radius: 100%;
	vertical-align: text-top
}

.icon-spinner:not(.not-animated),
.list-loading .icon-spinner.not-animated {
	border-color: transparent;
	border-top-color: #999;
	animation: rotation .8s infinite ease-in-out
}

.btn.btn-success .icon-spinner {
	border-color: transparent;
	border-top-color: #fff
}

.fontastic.icon-spinner {
	text-indent: -5em;
	overflow: hidden
}

.g-ui-user-select-none {
	user-select: none;
	-webkit-touch-callout: none
}

.g-ui-link {
	color: var(--link-color, #369);
	cursor: pointer;
	padding: 2px;
	text-decoration: underline
}

.g-ui-link:focus {
	outline: 1px;
	outline-style: dotted
}

.settings-save-trigger {
	display: inline-block;
	line-height: 1em;
	margin-left: .5em !important
}

.settings-save-trigger::after {
	font-family: snappymail;
	content: " ";
	display: block;
	opacity: 0;
	transition: opacity 1s linear
}

.settings-save-trigger.saving::after {
	animation: rotation .8s infinite ease-in-out;
	border: 3px solid transparent;
	border-radius: 100%;
	border-top-color: #999;
	height: 11px;
	opacity: 1;
	width: 11px
}

.settings-save-trigger.success::after {
	color: #080;
	content: "✔";
	opacity: 1
}

.settings-save-trigger.error::after {
	color: red;
	content: "✖";
	opacity: 1
}

textarea+.settings-save-trigger {
	vertical-align: top
}

.settings-save-trigger-input {
	transition: border-color .5s linear
}

.settings-save-trigger-input.success {
	border-color: green
}

.settings-save-trigger-input.error {
	border-color: red
}

.e-action {
	cursor: pointer
}

.list-table {
	max-width: 800px
}

.button-confirm-delete {
	transition: all .2s linear;
	white-space: nowrap
}

.button-confirm-delete:not(.delete-access) {
	opacity: 0;
	transform: translateX(-15px);
	visibility: hidden
}

.drag-handle {
	color: #eee;
	cursor: grab
}

tr:hover .drag-handle {
	color: #aaa
}

.tabs {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: min-content auto
}

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

.tabs>label {
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	grid-row-start: 1;
	opacity: .6;
	margin: 0 2px -1px 0;
	padding: 5px;
	text-align: center
}

.tabs>label:hover {
	border-color: var(--tab-hover-border-clr, #eee);
	opacity: .8
}

.tabs>[id^=tab]:checked+label {
	background-color: var(--tab-active-bg-clr, #fff);
	border-color: var(--border-color, #ddd) var(--border-color, #ddd) transparent var(--border-color, #ddd);
	opacity: 1;
	z-index: 1
}

.tabs .tab-content {
	grid-column-start: 1;
	grid-row-start: 2;
	visibility: hidden
}

.tabs>[id^=tab]:checked+label+.tab-content {
	visibility: visible
}

.legend {
	border-bottom: 1px solid var(--border-color, #ddd);
	font-size: 150%;
	line-height: 2.1;
	margin-bottom: 1.43em
}

summary.legend {
	cursor: pointer
}

.btn.btn-thin {
	padding: 0 9px
}

html.list-loading body {
	cursor: progress
}

.toggleLeft::before {
	content: '❮'
}

html.rl-left-panel-disabled .toggleLeft::before {
	content: '❯'
}

option:disabled {
	color: #aaa;
	cursor: not-allowed
}

*,
select:focus {
	outline: 0;
	-webkit-tap-highlight-color: transparent
}

#rl-content:not([hidden]) {
	display: flex;
	height: 100%
}

dialog::backdrop {
	background: rgba(0, 0, 0, .5)
}

.dialog-backdrop {
	background: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

dialog {
	border: 0;
	background-color: var(--dialog-bg-clr, #fff);
	border: 1px solid var(--dialog-border-clr, rgba(0, 0, 0, .3));
	border-radius: var(--dialog-border-radius, 6px);
	box-shadow: 0 5px 80px rgba(0, 0, 0, .3);
	color: var(--dialog-clr, #333);
	display: flex;
	flex-direction: column;
	margin: 10px auto;
	max-height: calc(100vh - var(--smDialogShrink));
	max-height: calc(100dvh - var(--smDialogShrink));
	max-width: 560px;
	overflow: auto;
	padding: 0;
	position: fixed;
	transition: all .2s ease-out;
	top: 0;
	width: calc(100% - 20px)
}

dialog:not([open]) {
	display: none !important
}

dialog.animate {
	opacity: 1
}

dialog:not(.animate) {
	background-color: rgba(0, 0, 0, 0);
	opacity: 0;
	top: -25%
}

dialog>header {
	padding: 9px 15px;
	border-bottom: 1px solid var(--border-color, #ddd)
}

dialog>header .close {
	margin-top: 2px
}

dialog>header h3 {
	margin: 0;
	line-height: 30px
}

dialog .modal-body {
	overflow: auto;
	margin: 0;
	padding: 15px;
	position: relative
}

dialog>footer {
	padding: 9px 15px;
	margin-bottom: 0;
	text-align: var(--right, right);
	border-top: 1px solid var(--border-color, #ddd);
	border-radius: 0 0 var(--dialog-border-radius, 6px) var(--dialog-border-radius, 6px)
}

dialog>footer .btn+.btn {
	margin-left: 5px;
	margin-bottom: 0
}

dialog>footer .btn-group .btn+.btn {
	margin-left: -1px
}

.e-component {
	white-space: nowrap
}

.e-component * {
	display: inline-block
}

.e-component select:focus {
	outline: 1px dotted
}

.e-component span {
	margin: 0 .5em;
	white-space: normal
}

.e-component select+span {
	padding: 2px 0
}

.e-checkbox {
	cursor: pointer;
	margin-bottom: 6px;
	padding: 2px 0
}

.e-checkbox:focus-within {
	outline: 1px dotted
}

.e-checkbox.disabled {
	cursor: not-allowed;
	opacity: .5
}

.e-checkbox.material-design {
	line-height: 20px;
	width: auto !important
}

.e-checkbox.material-design>div {
	position: relative;
	width: 18px
}

.e-checkbox.material-design>div>div {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #999;
	transform: rotate(0);
	animation: checkmark-to-box .2s ease-out forwards
}

.e-checkbox.material-design input {
	opacity: 0
}

.e-checkbox.material-design input:checked+div {
	top: -1px;
	left: 5px;
	width: 10px;
	height: 18px;
	border: 2px solid #0f9d58;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	animation: box-to-checkmark .2s ease-out forwards
}

@keyframes box-to-checkmark {
	0% {
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		border: 2px solid #999;
		transform: rotate(0)
	}

	50% {
		top: 13px;
		left: 5px;
		width: 4px;
		height: 4px;
		transform: rotate(45deg)
	}

	100% {
		top: -1px;
		left: 5px;
		width: 10px;
		height: 18px;
		border: 2px solid #0f9d58;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg)
	}
}

@keyframes checkmark-to-box {
	0% {
		top: -1px;
		left: 5px;
		width: 10px;
		height: 18px;
		border: 2px solid #0f9d58;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg)
	}

	50% {
		top: 13px;
		left: 5px;
		width: 4px;
		height: 4px;
		transform: rotate(45deg)
	}

	100% {
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		border: 2px solid #999;
		transform: rotate(0)
	}
}

#V-AdminLogin,
#V-Login {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	min-width: 250px;
	max-width: 600px;
	transition: all .3s ease-out;
	z-index: 5
}

.LoginView .descWrapper {
	color: var(--loading-color, #000);
	font-size: 214%;
	margin-bottom: 10px;
	text-align: center;
	text-shadow: var(--loading-text-shadow)
}

.LoginView form .controls.error * {
	color: #f76260;
	border-color: #f76260
}

.LoginView form.submitting>* {
	opacity: .3
}

.LoginView form.submitting::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
	border: 8px solid transparent;
	border-top-color: var(--spinner-color, #fff);
	animation: loginRotation 1s infinite ease-in-out;
	border-radius: 50%;
	z-index: 1052
}

.LoginView .control-group,
.LoginView .controls {
	margin-bottom: 25px;
	position: relative
}

.LoginView input {
	font-size: 128%;
	height: 40px;
	padding-right: 30px
}

.LoginView input:placeholder {
	color: #fff
}

.LoginView input:focus,
.LoginView input:hover {
	border-color: #fff
}

.LoginView .btn,
.LoginView input {
	background: 0 0;
	border: 1px solid rgba(255, 255, 255, .8)
}

.LoginView .fontastic+input {
	padding: 0 30px
}

.LoginView .controls>.fontastic:first-child {
	position: absolute;
	font-size: 121%;
	line-height: 38px;
	left: 6px
}

.LoginView .btn {
	text-transform: uppercase;
	font-size: 90%
}

.LoginView .btn:active,
.LoginView .btn:hover {
	border-color: #fff
}

.LoginView .buttonLogin {
	width: 100%
}

.LoginView .alert {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	display: block;
	opacity: 1;
	transition: opacity .5s linear
}

.LoginView .alert p {
	font-family: var(--fontMono);
	font-size: 90%
}

.LoginView .alert[hidden] {
	opacity: 0
}

.LoginView .language-buttons {
	flex-grow: 1;
	text-align: var(--right, right)
}

.LoginView .language-button {
	padding: 5px;
	text-decoration: none
}

.LoginView .errorAnimated {
	animation: login-form-shake .4s ease-in-out
}

.LoginView .errorAnimated .buttonLogin {
	color: #b94a48;
	font-weight: 700
}

@keyframes loginRotation {
	to {
		transform: rotate(1turn)
	}
}

@keyframes login-form-shake {
	0% {
		transform: translateX(0)
	}

	12.5% {
		transform: translateX(-6px)
	}

	37.5% {
		transform: translateX(5px)
	}

	62.5% {
		transform: translateX(-3px)
	}

	87.5% {
		transform: translateX(2px)
	}

	100% {
		transform: translateX(0)
	}
}

html.rl-started-trigger .LoginView {
	opacity: .5
}

#V-PopupsAsk .modal-body {
	font-size: 128%;
	padding: 3em 15px;
	text-align: center
}

#V-PopupsAsk button:focus {
	box-shadow: 0 0 1px inset
}

#V-PopupsLanguages {
	max-width: 710px
}

#V-PopupsLanguages label {
	display: inline-block;
	padding: 5px 15px;
	margin: 2px 5px;
	width: 216px;
	background-color: rgba(128, 128, 128, .1);
	border: 1px solid transparent;
	border-radius: var(--input-border-radius, 3px);
	position: relative;
	cursor: pointer
}

#V-PopupsLanguages label.user {
	background-color: rgba(255, 255, 64, .15);
	border-color: #ff5
}

#V-PopupsLanguages label.selected {
	background-color: rgba(64, 255, 64, .2);
	border-color: #9c9
}

#V-PopupsLanguages label.selected::after {
	content: "✔";
	position: absolute;
	right: 4px;
	font-family: snappymail
}

#V-PopupsLanguages label:hover {
	background-color: rgba(128, 128, 128, .2);
	border-color: #ccc
}

#rl-app.UserBackground {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

#rl-left {
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	width: 200px;
	z-index: 0
}

#rl-left .b-toolbar {
	padding: 10px 0 10px 8px;
	white-space: nowrap
}

#rl-right:not([hidden]) {
	display: flex;
	flex-grow: 1;
	width: 20%
}

html:not(.rl-left-panel-disabled) #rl-left {
	resize: horizontal;
	overflow: auto;
	min-width: 155px;
	max-width: 350px
}

#button-add-prop-dropdown-id::after,
#top-system-dropdown-id::after {
	content: '▼';
	font-size: 80%
}

.dropdown-menu *+.dividerbar {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--border-color, #e5e5e5)
}

.dropdown.show {
	box-shadow: 0 0 1px var(--main-color, #333)
}

.btn.btn-transparent {
	background: 0 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: inherit;
	text-shadow: none !important;
	opacity: .6
}

.btn.btn-transparent:hover {
	opacity: 1
}

.btn-group.open .btn.btn-transparent.dropdown-toggle {
	color: #bd362f
}

.btn-group>.btn.single {
	border-radius: var(--input-border-radius, 3px) !important
}

.search-input-wrp {
	position: relative
}

.search-input-wrp a {
	position: absolute;
	right: 0;
	top: 5px;
	margin: 0 7px;
	z-index: 100;
	opacity: .4;
	cursor: pointer
}

.search-input-wrp a:hover {
	opacity: .6
}

#rl-left .search-input-wrp {
	margin: 0 4px;
	width: calc(100% - 8px)
}

.show-on-panel-disabled,
html.rl-ctrl-key-pressed .hidden-on-ctrl-btn,
html:not(.rl-ctrl-key-pressed) .visible-on-ctrl-btn {
	display: none
}

html.rl-left-panel-disabled #rl-left {
	width: 60px !important
}

html.rl-left-panel-disabled #rl-left .show-on-panel-disabled {
	display: block
}

html.rl-left-panel-disabled #rl-left .b-content {
	opacity: .3
}

html.rl-left-panel-disabled #rl-left .hide-on-panel-disabled {
	display: none
}

.e-paginator a {
	opacity: .5;
	text-decoration: none;
	font-size: 157%;
	padding: 0 3px;
	cursor: pointer
}

.e-paginator a:hover {
	opacity: .8
}

.e-paginator a.current {
	opacity: 1;
	font-size: 179%;
	cursor: default
}

.resizer {
	display: none
}

#top-system-dropdown-id {
	padding: 0 6px
}

.rl-left-panel-disabled #more-list-dropdown-id+.dropdown-menu {
	position: fixed;
	top: 40px
}

#V-SystemDropDown {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 8px;
	z-index: 103
}

#V-SystemDropDown .email-title {
	text-overflow: ellipsis;
	overflow: hidden
}

#V-SystemDropDown .audioPlace {
	cursor: pointer;
	display: inline-block;
	font-size: 214%;
	height: 1em;
	margin-right: 10px;
	width: 1em
}

#V-SystemDropDown .audioPlace .stopIcon {
	color: orange;
	display: none
}

#V-SystemDropDown .audioPlace:hover .playIcon {
	display: none
}

#V-SystemDropDown .audioPlace:hover .stopIcon {
	display: inline-block
}

#V-SystemDropDown .accountPlace {
	border-right: 1px solid var(--btn-border-clr, rgba(0, 0, 0, .2));
	display: inline-block;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 6px -4px 0;
	max-width: 25vw;
	overflow: hidden;
	padding-right: 6px;
	text-overflow: ellipsis
}

#V-SystemDropDown a[data-unread]::after {
	content: attr(data-unread);
	background-color: var(--unread-count-bg-color, #999);
	border-radius: 1em;
	color: var(--unread-count-color, #fff);
	font-size: 80%;
	line-height: 1.5em;
	min-width: 1.7em;
	padding: 1px 4px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
	position: absolute;
	right: 3px
}

@keyframes equaliserBar {
	0% {
		top: 30%
	}

	50% {
		top: 100%
	}

	100% {
		top: 30%
	}
}

.playIcon {
	margin-top: 5px;
	height: 20px;
	position: relative
}

.playIcon *,
.playIcon::after,
.playIcon::before {
	animation: equaliserBar 1s infinite;
	background: orange;
	bottom: 0;
	left: calc(1em / 2 - 2px);
	position: absolute;
	width: 5px;
	content: ''
}

.playIcon::before {
	left: calc(1em / 2 - 9px);
	animation-delay: -.33s
}

.playIcon::after {
	left: calc(1em / 2 + 5px);
	animation-delay: -.66s
}

#V-PopupsKeyboardShortcutsHelp {
	max-width: 700px
}

#V-PopupsKeyboardShortcutsHelp td[class^=icon-] {
	display: table-cell
}

#V-PopupsKeyboardShortcutsHelp .tab-content {
	grid-column-end: 5
}

#V-MailFolderList,
#V-MailFolderList .b-content {
	height: 100%
}

.focused .b-folders a.focused {
	background-color: var(--folders-focused-bg-color, #333);
	border-color: #fff;
	color: var(--folders-focused-color, #eee)
}

#folderSearchInput {
	width: 100%
}

#V-MailFolderList .e-checkbox {
	margin: 0 4px;
	width: calc(100% - 8px)
}

#V-MailFolderList .unreadOnly li a:not(.unread-sub):not([data-unread]) {
	display: none
}

.b-folders {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-right: 2px
}

.b-folders ul {
	margin: 0
}

.b-folders .move-action-content-wrapper {
	z-index: -1;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: .05;
	background-color: #fff;
	background-size: 60px 60px;
	background-image: linear-gradient(135deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent)
}

.b-folders .b-toolbar {
	color: #fff
}

.b-folders .b-footer {
	padding: 10px 8px;
	overflow: hidden;
	white-space: nowrap
}

.b-folders .b-content {
	overflow: hidden;
	overflow-y: auto;
	min-width: 100px;
	color: var(--folders-color, #333)
}

.b-folders hr {
	margin: 10px
}

.b-folders li {
	display: block;
	overflow: hidden;
	white-space: nowrap
}

.b-folders li a {
	background-color: transparent;
	border-left: 3px solid transparent;
	color: var(--folders-color, #333);
	display: block;
	line-height: 34px;
	padding: 0 2em 0 7px;
	position: relative;
	text-decoration: none;
	vertical-align: middle;
	z-index: 1
}

.b-folders li a.selectable {
	cursor: pointer
}

.b-folders li a.selectable:hover {
	background-color: var(--folders-hover-bg-color, #333);
	color: var(--folders-hover-color, #eee)
}

.b-folders li a.selectable.droppableHover {
	background-color: var(--folders-drop-bg-color, #333);
	color: var(--folders-drop-color, #eee)
}

.b-folders li a.selectable.droppableHover * {
	pointer-events: none
}

.b-folders li a.selectable.selected {
	background-color: var(--folders-selected-bg-color, #333);
	color: var(--folders-selected-color, #eee)
}

.b-folders li a:not(.selectable) {
	color: var(--folders-disabled-color, #666);
	cursor: default;
	font-style: italic
}

.b-folders li a.unread-sub {
	font-weight: 700
}

.b-folders li a .e-collapsed-sign {
	cursor: pointer;
	font-size: 150%;
	text-indent: 0;
	vertical-align: inherit
}

.b-folders li a[data-unread] {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis
}

.b-folders li ul.collapsed {
	max-height: 0;
	height: 0;
	display: none
}

.b-folders .b-folders-system a[data-unread]::after,
.b-folders .b-folders-user a[data-unread]:not(.system)::after {
	content: attr(data-unread);
	background-color: var(--unread-count-bg-color, #999);
	border-radius: 1em;
	color: var(--unread-count-color, #fff);
	font-size: 80%;
	line-height: 1.5em;
	margin-top: 7px;
	min-width: 1.7em;
	padding: 1px 4px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
	position: absolute;
	right: 3px;
	text-indent: 0
}

.b-folders .flag-icon {
	margin-left: 7px
}

.b-folders .flag-icon::after {
	content: '☆';
	opacity: .5
}

.b-folders .is-flagged .flag-icon::after {
	color: orange;
	content: '★';
	opacity: 1
}

.b-folders .b-folders-system {
	font-weight: 700
}

.b-folders li li a {
	text-indent: 1em
}

.b-folders li li li a {
	text-indent: 2em
}

.b-folders li li li li a {
	text-indent: 3em
}

.b-folders li li li li li a {
	text-indent: 4em
}

#rl-left .buttonCompose {
	max-height: 2em;
	max-width: fit-content;
	overflow: hidden;
	text-overflow: ellipsis;
	width: calc(100% - 48px)
}

html.rl-left-panel-disabled .buttonComposeText,
html.rl-left-panel-disabled .buttonContacts {
	display: none
}

html.rl-left-panel-disabled #rl-left .buttonCompose {
	width: auto
}

#V-PopupsFilter {
	max-width: 750px
}

#V-PopupsFilter .button-delete {
	cursor: pointer
}

#V-PopupsOpenPgpGenerate,
#V-PopupsOpenPgpKey {
	max-width: 570px
}

#V-PopupsOpenPgpKey pre {
	margin: 0;
	max-height: 500px;
	padding: 0;
	overflow: auto
}

#V-PopupsOpenPgpImport {
	max-width: 645px
}

#V-PopupsOpenPgpImport textarea {
	font-family: var(--fontMono);
	width: 600px
}

#V-PopupsIdentity {
	max-width: 770px
}

#V-PopupsIdentity .tab-content {
	grid-column-end: 5;
	padding-top: 20px
}

#V-PopupsIdentity .e-signature-place {
	border: 1px solid #ccc;
	border-radius: var(--input-border-radius, 3px);
	margin-bottom: 1.43em
}

#V-PopupsIdentity .textEmail {
	margin-top: 5px;
	font-weight: 700
}

#V-PopupsAdvancedSearch {
	max-width: 780px
}

#V-PopupsAdvancedSearch label {
	width: 110px
}

#advancedsearchform>div {
	display: inline-block;
	vertical-align: top;
	margin-right: 1em
}

.attachmentList {
	margin: 0
}

.attachmentItem {
	background-color: rgba(128, 128, 128, .1);
	border: 0;
	border-radius: var(--input-border-radius, 3px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, .1);
	display: inline-block;
	list-style: none;
	line-height: 20px;
	margin: 5px;
	min-height: 48px;
	width: 16em;
	overflow: hidden;
	position: relative
}

.attachmentItem.waiting {
	opacity: .6
}

.attachmentItem .checkboxAttachment {
	bottom: 6px;
	cursor: pointer;
	position: absolute;
	right: 6px
}

.attachmentItem.error .attachmentName,
.attachmentItem.error .attachmentSize,
.attachmentItem.error .iconMain,
.attachmentItem.error .iconPreview {
	color: red
}

.attachmentItem .attachmentIcon {
	position: absolute;
	height: 48px;
	width: 48px;
	text-align: center
}

.attachmentItem .iconBG,
.attachmentItem .iconMain,
.attachmentItem .iconPreview,
.attachmentItem .iconProgress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.attachmentItem .iconProgress {
	background: #eee;
	width: 0%
}

.attachmentItem .iconBG {
	font-size: 128%;
	font-weight: 700;
	line-height: 55px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8)
}

.attachmentItem .iconPreview {
	display: none
}

.attachmentItem .attachmentNameParent {
	border-left: 1px solid #ddd;
	cursor: pointer;
	margin-left: 48px;
	min-width: 90px;
	padding: 4px 4px 3px 6px;
	position: relative
}

.attachmentItem .attachmentName {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.attachmentItem .attachmentSize {
	font-size: 85%;
	opacity: .7
}

.attachmentItem .iconMain,
.attachmentItem .iconPreview {
	padding: 6px 0 0;
	font-size: 257%;
	color: var(--main-color);
	filter: invert(33%);
	mix-blend-mode: difference
}

.attachmentItem .iconMain.icon-none,
.attachmentItem .iconPreview.icon-none {
	display: none
}

.attachmentItem .hasPreview .hidePreview,
.attachmentItem .hasPreview:hover .iconMain,
.attachmentItem .showPreview {
	display: none
}

.attachmentItem .hasPreview:hover .iconPreview {
	display: inline-block
}

.attachmentItem .hasPreplay:hover .iconMain::before {
	content: "▶"
}

.attachmentItem .hasPreview .showPreview {
	display: inline;
	cursor: pointer
}

.attachmentListSimple {
	margin: 0
}

.attachmentListSimple .attachmentItem {
	min-height: 1em;
	border: 1px solid var(--border-color);
	padding: 0 2px
}

.attachmentListSimple .attachmentName {
	margin: 0
}

.attachmentListSimple .checkboxAttachment {
	position: initial;
	margin-left: .5em
}

.msgflag-\$important .checkboxMessage {
	background-color: red;
	color: #fff
}

.msgflag-\$important.focused {
	background-color: rgba(255, 0, 0, .3)
}

.msgflag-\$important:not(.focused) {
	color: red
}

.msgflag-\$todo .checkboxMessage {
	background-color: #00f;
	color: #fff
}

.msgflag-\$todo.focused {
	background-color: rgba(64, 64, 255, .3)
}

.msgflag-\$todo:not(.focused) {
	color: #33f
}

.msgflag-\$label5 .checkboxMessage {
	background-color: #808;
	color: #fff
}

.msgflag-\$label4 .checkboxMessage {
	background-color: #00f;
	color: #fff
}

.msgflag-\$label3 .checkboxMessage {
	background-color: #080;
	color: #fff
}

.msgflag-\$label2 .checkboxMessage {
	background-color: #fa0;
	color: #fff
}

.msgflag-\$label1 .checkboxMessage {
	background-color: red;
	color: #fff
}

.msgflag-\$label5.focused {
	background-color: rgba(255, 0, 255, .3)
}

.msgflag-\$label4.focused {
	background-color: rgba(64, 64, 255, .3)
}

.msgflag-\$label3.focused {
	background-color: rgba(0, 255, 0, .3)
}

.msgflag-\$label2.focused {
	background-color: rgba(255, 170, 0, .3)
}

.msgflag-\$label1.focused {
	background-color: rgba(255, 0, 0, .3)
}

.msgflag-\$label5:not(.focused) {
	color: #939
}

.msgflag-\$label4:not(.focused) {
	color: #33f
}

.msgflag-\$label3:not(.focused) {
	color: #090
}

.msgflag-\$label2:not(.focused) {
	color: #f90
}

.msgflag-\$label1:not(.focused) {
	color: red
}

#V-MailMessageList {
	position: relative;
	height: 100%;
	width: 100%
}

#V-MailMessageList.focused .messageList {
	border-color: #9d9d9d;
	box-shadow: var(--smMainShadow)
}

#no-sort-list,
#sort-list-dropdown-id {
	padding-left: 6px;
	padding-right: 6px
}

#V-MailMessageList .btn-toolbar {
	padding: 10px 1px;
	white-space: nowrap
}

.messageList {
	height: calc(100% - 60px);
	background-color: var(--panel-bg-clr, #fff);
	border: 1px solid var(--border-color, #aaa);
	border-radius: var(--border-radius, 5px);
	display: flex;
	flex-direction: column
}

.messageList .groupLabel {
	background: rgba(128, 128, 128, .2);
	cursor: pointer;
	font-size: 85%;
	line-height: 2;
	opacity: .6;
	text-align: center;
	text-transform: capitalize
}

.messageList .reply::before {
	content: '↳';
	line-height: 3;
	position: absolute;
	margin-left: -1em
}

.messageList .b-footer {
	display: flex;
	flex-shrink: 0;
	padding: 7px;
	background-color: var(--message-list-toolbar-bg-color, #eee);
	border-bottom-right-radius: var(--border-radius, 5px);
	border-bottom-left-radius: var(--border-radius, 5px);
	border-top: 1px solid var(--border-color, #bbb)
}

.messageList .b-footer .e-quota {
	border-bottom: 1px dashed #333;
	display: inline-block;
	margin-top: 5px;
	margin-left: 5px;
	font-size: 128%;
	cursor: help
}

.messageList .b-footer nav {
	flex-grow: 1;
	display: flex;
	justify-content: end
}

.messageList .btn.buttonMoreSearch {
	font-size: 80%;
	padding-left: 8px;
	padding-right: 8px
}

.messageList .second-toolbar {
	display: flex;
	flex-shrink: 0;
	padding: 10px 8px 10px 11px;
	white-space: nowrap;
	background-color: var(--message-list-toolbar-bg-color, #eee);
	border-top-right-radius: var(--border-radius, 5px);
	border-top-left-radius: var(--border-radius, 5px);
	border-bottom: 1px solid var(--border-color, #bbb)
}

.messageList .checkboxCheckAll {
	cursor: pointer;
	margin: .45em .5em 0 0
}

.messageList .search-input-wrp {
	flex-grow: 1
}

.messageList .inputSearch {
	width: 100%
}

.messageList .b-content {
	height: 100%;
	padding: 0;
	overflow: auto;
	scroll-behavior: smooth
}

.messageList .b-content .listClear {
	text-align: center;
	padding: 10px;
	line-height: 13px
}

.messageList .b-content .listDragOver,
.messageList .b-content .listEmptyMessage,
.messageList .b-content .listError,
.messageList .b-content .listLoading {
	color: #999;
	text-align: center;
	padding: 60px 10px;
	font-size: 171%;
	line-height: 30px
}

.messageList .b-content .listDragOver {
	max-height: 0;
	overflow: hidden;
	padding: 0 10px
}

.messageList .b-content .listDragOver.viewAppendArea {
	max-height: 120px;
	padding: 30px 10px
}

.messageList .b-content .listDragOver.dragOverEnter {
	background-color: #e0fdda;
	color: #333
}

.messageList .b-content .listError {
	color: #da4f49
}

.messageList .b-content .listSearchDesc {
	font-size: 114%;
	padding: 12px;
	border-bottom: 1px solid #eee
}

.messageList .b-content .listThreadUidDesc {
	font-size: 114%;
	padding: 7px 20px 6px 20px;
	background-color: rgba(128, 128, 128, .5);
	border-bottom: 1px solid #888;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 1px 0 #000;
	text-align: center
}

.messageList .b-content .fullThreadsParent {
	height: 25px;
	padding: 3px 5px;
	background-color: #f4f4f4;
	text-align: center
}

.messageListItem>div+div {
	display: flex;
	overflow: hidden;
	padding: 5px 0 5px 5px;
	width: 100%
}

.messageListItem {
	cursor: pointer;
	border: 0;
	border-bottom: 1px solid rgba(153, 153, 153, .2);
	border-left: 6px solid transparent;
	display: flex;
	font-size: 90%;
	line-height: 2;
	position: relative
}

.messageListItem.focused {
	background-color: rgba(128, 128, 128, .1);
	border-left-color: #ccc;
	border-right-color: #ccc !important
}

.messageListItem.priorityHigh .subjectParent::before {
	content: '! ';
	color: red;
	font-weight: bolder
}

.messageListItem .messageCheckbox {
	font-size: 114%;
	padding: 5px .5em 0;
	white-space: nowrap
}

.messageListItem .checkboxMessage {
	display: inline
}

.messageListItem .sizeParent,
.messageListItem time {
	margin: 0 5px 0 0;
	opacity: .7;
	font-size: 80%;
	white-space: nowrap;
	min-width: 3.5em;
	text-align: var(--right, right)
}

.messageListItem .senderParent,
.messageListItem .subjectParent {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.messageListItem .senderParent {
	flex: 0 0 25%
}

.messageListItem .subjectParent {
	flex: 1 1 auto
}

.messageListItem .subjectParent:empty {
	font-style: italic;
	opacity: .5
}

.messageListItem .threadsCountParent {
	display: inline;
	overflow: hidden;
	background-color: #eee;
	padding: 1px 5px;
	margin-right: 5px;
	border: 1px solid #ccc;
	border-radius: var(--border-radius, 5px)
}

.messageListItem .threadsCountParent.lastSelected {
	background-color: #999;
	border-color: #999;
	color: #fff
}

.messageListItem .threadsCountParent:hover {
	border-color: #666
}

.messageListItem .threads-len {
	border-radius: var(--border-radius, 5px);
	border: 1px solid #ccc;
	font-size: 80%;
	padding: 0 4px;
	white-space: nowrap
}

.messageListItem .threads-len:hover {
	background-color: rgba(127, 127, 127, .3);
	border-color: #666
}

.messageListItem .threads-len::after {
	content: ' ›'
}

.messageListItem .forwardFlag,
.messageListItem .replyFlag {
	margin-right: .25em
}

.messageListItem.unseen {
	background-color: rgba(255, 255, 64, .15);
	border-left-color: orange;
	border-right-color: orange !important
}

.messageListItem.unseen .senderParent,
.messageListItem.unseen .subjectParent {
	font-weight: 700
}

.messageListItem.unseen.focused {
	border-left-color: #cc8400;
	border-right-color: #cc8400 !important
}

.messageListItem [data-unseen] {
	background-color: rgba(255, 255, 64, .15);
	border-color: orange
}

.messageListItem.checked {
	border-left-color: #69a8f5;
	border-right-color: #69a8f5 !important
}

.messageListItem.checked.focused {
	border-left-color: #217ef0;
	border-right-color: #217ef0 !important
}

.messageListItem.selected {
	background-color: rgba(140, 200, 255, .3);
	border-bottom-color: rgba(57, 140, 242, .2);
	border-left-color: #398cf2;
	border-right-color: #398cf2 !important;
	z-index: 101
}

.messageListItem .attachmentParent,
.messageListItem .flagParent {
	margin: 0 10px 0 5px;
	min-width: 1em
}

.messageListItem .flagParent::after {
	content: '☆'
}

.messageListItem.hasFlaggedSubMessage .flagParent::after,
.messageListItem.msgflag-\\flagged .flagParent::after {
	color: orange;
	content: '★'
}

.messageListItem:not(.msgflag-\\flagged):not(.hasFlaggedSubMessage) .flagParent:not(:hover)::after {
	opacity: .5
}

.messageListItem .senderParent::before {
	font-family: snappymail
}

.messageListItem.msgflag-\\answered .senderParent::before {
	content: '← '
}

.messageListItem.msgflag-\$forwarded .senderParent::before {
	content: '→ '
}

.messageListItem.msgflag-\\answered.msgflag-\$forwarded .senderParent::before {
	content: '←→ '
}

.messageListItem.msgflag-\\deleted {
	opacity: .7
}

.messageListItem.msgflag-\\deleted .subjectParent {
	text-decoration: line-through
}

html:not(.sm-msgView-bottom):not(.sm-msgView-side) .message-selected #V-MailMessageList {
	display: none
}

#messagesDragImage {
	color: #fff;
	background-color: #000;
	height: 20px;
	min-width: 30px;
	padding: 4px 10px;
	position: fixed;
	right: -100px;
	top: 0
}

.rl-mobile .messageListItem>div+div,
.sm-msgView-side .messageListItem>div+div {
	flex-wrap: wrap
}

.rl-mobile .messageListItem,
.sm-msgView-side .messageListItem {
	line-height: 1.5
}

.rl-mobile .messageListItem .messageCheckbox,
.sm-msgView-side .messageListItem .messageCheckbox {
	padding-top: .8em
}

.rl-mobile .messageListItem .senderParent,
.sm-msgView-side .messageListItem .senderParent {
	flex: 1 0 25%
}

.rl-mobile .messageListItem .subjectParent,
.sm-msgView-side .messageListItem .subjectParent {
	flex: 1 0 auto;
	line-height: 16px;
	order: 1;
	width: calc(100% - 120px)
}

.rl-mobile .messageListItem .flagParent,
.sm-msgView-side .messageListItem .flagParent {
	order: 1
}

.rl-mobile .messageListItem .sizeParent,
.sm-msgView-side .messageListItem .sizeParent {
	order: 2
}

.rl-mobile .messageListItem .attachmentParent,
.sm-msgView-side .messageListItem .attachmentParent {
	order: 3
}

#V-MailMessageView {
	flex-grow: 1;
	overflow: auto;
	padding-bottom: 8px
}

#V-MailMessageView .b-message-view-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 10;
	text-align: center
}

#V-MailMessageView .b-message-view-backdrop .backdrop-message {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 143%;
	line-height: 30px;
	background: rgba(0, 0, 0, .6);
	padding: 15px;
	border-radius: var(--border-radius, 5px);
	text-shadow: 0 1px 1px #000;
	transform: translateY(-50%);
	top: 50%
}

#V-MailMessageView .top-toolbar {
	color: #fff;
	padding: 10px 0;
	visibility: visible
}

.messageView {
	background-color: var(--panel-bg-clr, #fff);
	border: 1px solid var(--border-color, #aaa);
	border-radius: var(--border-radius, 5px);
	height: calc(100% - 50px);
	position: relative
}

.messageView .priorityHigh .subject::before {
	content: '! ';
	color: red;
	font-weight: bolder
}

.messageView .b-message {
	display: flex;
	flex-direction: column;
	height: 100%
}

.messageView .b-message-view-checked-helper {
	text-align: center;
	font-size: 70px;
	padding-top: 25vh;
	opacity: .6
}

.messageView .b-message-view-checked-helper::after {
	content: ' ✉';
	font-family: snappymail
}

.messageView .b-message-view-desc {
	text-align: center;
	font-size: 171%;
	line-height: 30px;
	color: #999;
	padding: 25vh 10px 0
}

.messageView .b-message-view-desc.error {
	color: #da4f49
}

.messageView .message-fixed-button-toolbar {
	z-index: 100;
	position: absolute;
	top: 33px;
	right: 10px
}

.messageView .infoParent {
	cursor: pointer;
	opacity: .5
}

.messageView .infoParent:hover {
	opacity: 1
}

.messageView .flagParent {
	cursor: pointer
}

.messageView .flagParent .flagOn {
	color: orange
}

.messageView .flagParent.flagOff:not(:hover) {
	opacity: .5
}

.messageView .messageTags {
	align-items: baseline;
	display: flex
}

.messageView .messageTags>* {
	flex: 0 0 0
}

.messageView .messageAssignedTags {
	flex: 1 0 0
}

.messageView .messageAssignedTags span {
	border: 1px solid grey;
	line-height: 2;
	padding: 2px;
	white-space: nowrap
}

.messageView .messageItemHeader {
	background-color: var(--message-header-bg-clr, #eee);
	border-bottom: 1px solid var(--border-color, #bbb);
	border-radius: var(--border-radius, 5px) var(--border-radius, 5px) 0 0;
	padding: 10px;
	flex-shrink: 0;
	word-break: keep-all
}

.messageView .messageItemHeader .fontastic+span {
	margin-left: .25em
}

.messageView .messageItemHeader .subjectParent {
	display: flex;
	font-size: 128%;
	font-weight: 700
}

.messageView .messageItemHeader .subject {
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 .25em
}

.messageView .messageItemHeader .subject:empty {
	font-style: italic;
	opacity: .5
}

.messageView .messageItemHeader .informationShort {
	margin: 0 56px 0 0;
	overflow: hidden;
	text-overflow: ellipsis
}

.messageView .messageItemHeader .informationShort a {
	color: var(--link-color, #369);
	cursor: pointer;
	padding: 2px;
	text-decoration: underline
}

.messageView .messageItemHeader .informationShort a:focus {
	outline: 1px;
	outline-style: dotted
}

.messageView .messageItemHeader .informationShortWrp {
	max-height: 100px;
	overflow-y: auto
}

.messageView .messageItemHeader .informationFull table {
	border-spacing: 0;
	width: 100%
}

.messageView .messageItemHeader .informationFull td {
	padding: 4px;
	vertical-align: top;
	min-width: 43px
}

.messageView .messageItemHeader .informationFull td:first-child {
	border-right: 1px solid #999;
	text-align: var(--right, right);
	white-space: nowrap;
	width: 1%
}

.messageView .messageItemHeader .hasVirus {
	background: red;
	color: #fff;
	padding: 3px
}

.messageView .crypto-control {
	padding: .5em
}

.messageView .crypto-control span {
	margin-right: 1em
}

.messageView .crypto-control button {
	cursor: pointer
}

.messageView .crypto-control.encrypted {
	border: 1px dashed #18f;
	color: #18f
}

.messageView .crypto-control.signed {
	border: 1px dashed #fa0;
	color: #fa0
}

.messageView .crypto-control.success {
	border-color: #090;
	color: #090
}

.messageView .crypto-control.error {
	border-color: red;
	color: red
}

.messageView .crypto-control.error button,
.messageView .crypto-control.success button {
	display: none
}

.messageView .thread-controls .dropdown-toggle {
	padding-left: 10px;
	padding-right: 10px
}

.messageView .thread-controls.open .dropdown-toggle {
	padding-left: 10px;
	padding-right: 10px
}

#V-MailMessageView.focused .messageView {
	border-color: #9d9d9d;
	box-shadow: var(--smMainShadow)
}

#messageItem {
	height: 100%;
	overflow: auto;
	scroll-behavior: smooth
}

#messageItem .loading {
	text-align: center;
	font-size: 171%;
	color: grey;
	padding: 50px 0
}

#messageItem .bodySubHeader {
	background-color: var(--message-header-bg-clr, #eee)
}

#messageItem .bodySubHeader>* {
	border-bottom: 1px solid var(--border-color, #bbb);
	cursor: pointer;
	padding: 10px
}

#messageItem .pgpInfo {
	padding: 5px 15px;
	border-bottom: 1px solid var(--border-color, #bbb);
	background-color: #fcf8e3
}

#messageItem .pgpInfo.success {
	background-color: #e9f4ff
}

#messageItem .attachmentsPlace {
	border-bottom: 1px solid var(--border-color, #bbb);
	position: relative
}

#messageItem .attachmentsPlace:not(.selection-mode) .checkboxAttachment {
	display: none
}

#messageItem .attachmentsPlace .controls-handle {
	position: absolute;
	bottom: 5px;
	right: 8px;
	color: #999;
	cursor: pointer
}

#messageItem .attachmentsControls {
	padding-top: 7px;
	border-top: 1px solid var(--border-color, #bbb)
}

#messageItem .attachmentsControls>* {
	display: inline-block;
	margin-right: .5em;
	white-space: nowrap
}

#messageItem .sm-bq-switcher>summary {
	border: 1px solid #999;
	cursor: pointer;
	line-height: 1em;
	margin: 2em 0 10px;
	opacity: .5;
	padding: 0 .5em;
	text-align: center;
	width: fit-content
}

#messageItem .sm-bq-switcher>summary:hover {
	opacity: 1
}

#messageItem .b-text-part {
	height: 100%;
	padding: 10px;
	position: relative
}

#messageItem .b-text-part.swapColors {
	background-color: var(--main-color, currentcolor);
	color: var(--main-bg-color)
}

#messageItem .b-text-part * {
	box-sizing: unset
}

#messageItem .b-text-part a {
	color: var(--link-color, #00f);
	text-decoration: underline
}

#messageItem .b-text-part a:visited {
	color: #609
}

#messageItem .b-text-part a:active {
	color: red
}

#messageItem .b-text-part blockquote {
	border-left: 2px solid #000;
	opacity: .8;
	padding: 0 10px;
	margin: 0
}

#messageItem .b-text-part blockquote blockquote {
	opacity: 1
}

#messageItem .b-text-part.html img {
	max-width: 100%;
	height: auto
}

#messageItem .b-text-part.html img[data-x-src]:not([src]) {
	border: 1px solid #999;
	line-height: 1;
	padding-left: 1.1em;
	position: relative
}

#messageItem .b-text-part.html img[data-x-src]:not([src])::after {
	content: "🖼";
	font-family: snappymail;
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	background-color: #fff
}

#messageItem .b-text-part.html img[data-x-src]:not([src]):hover::after {
	content: attr(data-x-src);
	font-family: var(--fontSans);
	font-size: 80%;
	height: auto;
	transform: translate(-25%, 0);
	width: fit-content;
	z-index: 1000
}

#messageItem .b-text-part.html code,
#messageItem .b-text-part.html pre {
	margin: 0;
	border: none;
	word-break: normal;
	word-wrap: break-word
}

#messageItem .b-text-part.html code {
	border-radius: 0;
	display: inline;
	padding: 2px 5px
}

#messageItem .b-text-part.html pre {
	border-radius: var(--border-radius, 5px);
	display: block;
	padding: 5px 10px
}

#messageItem .b-text-part.html pre>code {
	padding: 0
}

#messageItem .b-text-part.plain {
	white-space: pre-wrap;
	font-family: var(--fontMono)
}

#messageItem .b-text-part.plain pre {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
	word-break: normal
}

.mailvelope iframe {
	min-height: 400px
}

html:not(.sm-msgView-bottom):not(.sm-msgView-side) #rl-right:not(.message-selected) #V-MailMessageView {
	display: none
}

html.sm-msgView-bottom #V-MailMessageView .top-toolbar {
	display: none
}

html.sm-msgView-bottom .messageView {
	height: 100%
}

html.rl-fullscreen #V-MailMessageList,
html.rl-fullscreen #V-MailMessageView .top-toolbar,
html.rl-fullscreen #V-SettingsPane,
html.rl-fullscreen #V-SystemDropDown,
html.rl-fullscreen #rl-left {
	display: none !important
}

html.rl-fullscreen .messageView {
	border: 0
}

#V-PopupsContacts {
	height: 100vh;
	height: 100dvh;
	max-width: 900px;
	min-height: 300px
}

#V-PopupsContacts .control-group label.iconsize24 {
	padding-top: 0;
	width: 50px
}

#V-PopupsContacts .modal-body {
	display: flex;
	height: 100%;
	padding: 0
}

#V-PopupsContacts .left {
	max-width: 30%
}

#V-PopupsContacts .b-list-toolbar {
	padding: 0;
	height: 44px;
	text-align: center;
	border-bottom: 1px solid var(--border-color, #ddd)
}

#V-PopupsContacts .b-list-toolbar .e-search {
	margin: 7px 0 0;
	width: calc(100% - 10px)
}

#V-PopupsContacts .b-list-footer-toolbar {
	height: 46px;
	border-top: 1px solid var(--border-color, #ddd)
}

#V-PopupsContacts .b-list-footer-toolbar .footer-pager {
	padding: 8px 10px 0 0;
	text-align: var(--right, right)
}

#V-PopupsContacts .b-list-content {
	height: calc(100% - 44px - 46px);
	overflow: hidden;
	overflow-y: auto;
	scroll-behavior: smooth
}

#V-PopupsContacts .b-list-content .listClear {
	text-align: center;
	padding: 10px;
	line-height: 13px;
	box-shadow: inset 0 -1px 0 #ccc
}

#V-PopupsContacts .b-list-content .listEmptyList,
#V-PopupsContacts .b-list-content .listEmptyListLoading,
#V-PopupsContacts .b-list-content .listEmptySearchList {
	color: #999;
	text-align: center;
	padding: 60px 10px;
	font-size: 171%;
	line-height: 30px
}

#V-PopupsContacts .e-contact-item {
	display: flex;
	height: 55px;
	max-height: 45px;
	line-height: 45px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	margin: 0;
	border-left: 6px solid #eee;
	border-bottom: 1px solid var(--border-color, #ddd) !important
}

#V-PopupsContacts .e-contact-item.focused {
	border-color: #bbb
}

#V-PopupsContacts .e-contact-item.deleted {
	max-height: 0;
	border-color: transparent !important
}

#V-PopupsContacts .e-contact-item .checkboxItem {
	line-height: 45px;
	padding: 0 8px 0 6px
}

#V-PopupsContacts .e-contact-item .nameParent {
	font-size: 114%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%
}

#V-PopupsContacts .e-contact-item.checked {
	border-color: #69a8f5
}

#V-PopupsContacts .e-contact-item.checked.focused {
	border-color: #519af3
}

#V-PopupsContacts .e-contact-item.selected {
	background-color: rgba(140, 200, 255, .3);
	border-color: #398cf2
}

#V-PopupsContacts .e-contact-item.selected.focused {
	border-color: #217ef0
}

#V-PopupsContacts .right {
	width: 100%;
	border-left: 1px solid var(--border-color, #ddd)
}

#V-PopupsContacts .b-view-content-toolbar {
	border-top: 1px solid var(--border-color, #ddd);
	padding: 7px;
	text-align: var(--right, right)
}

#V-PopupsContacts .b-view-content-toolbar .dropdown-menu.right-edge {
	top: auto;
	bottom: 100%
}

#V-PopupsContacts .b-view-content {
	height: calc(100% - 46px);
	margin: 0;
	overflow: auto
}

#V-PopupsContacts .b-view-content :not(.e-checkbox)>span {
	height: 20px;
	line-height: 20px;
	padding: 5px 7px;
	font-size: 128%;
	display: none
}

#V-PopupsContacts .b-view-content .b-contact-view-desc {
	text-align: center;
	font-size: 171%;
	line-height: 30px;
	padding-top: 120px;
	color: #999
}

#V-PopupsContacts .b-view-content .property-line {
	margin-bottom: 5px
}

#V-PopupsContacts .b-view-content input:not([type=checkbox]),
#V-PopupsContacts .b-view-content textarea {
	width: 70vw;
	max-width: 400px
}

#V-PopupsContacts .read-only-sign {
	display: none;
	position: absolute;
	top: 20px;
	right: 40px
}

#V-PopupsContacts .read-only .e-read-only-sign,
#V-PopupsContacts .read-only span {
	display: inline-block
}

#V-PopupsContacts .read-only input,
#V-PopupsContacts .read-only textarea {
	display: none
}

#V-PopupsContacts .tab-content {
	grid-column-end: 4;
	padding-top: 20px
}

.mailvelope-icon {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVQ4y2XTXWjVdRgH8M/vf457OUVJzc7U5myWmysrFROKjFyUgqasEsNIrFFetC5KYkXMdVP0chne1MVWUBGWnlAKcogLJmiGXciUkaPtHPYSWumo6XbOv4v/afbyXP14+H6/z8vv+Qb/iNijEdFK4p1Yh1sQ4WccJe4h9Ae54t+ccJW88VpSb+NZdZWVmm+muR4xgwVODzM0dQWfEb0Q7L80KxDbmCH6irDO82uCHZvIVJMfT9Tn11Askevlnd7YdOk4xYeCg5PpBBG9R2gB9bXkjrD/GIXLSYlsBetX0NZK/cLgue41pLrxeIhtuZP4R6uyvPoEVdUcOMKH3/tf3FXDx6/x6de89W1MfH+qS2MnxdVynYyeZzDPM1sYHeH2LJMX2XAHjTfSN8zkOO1P8v6hQLQgjRZLarlhLk/vxTW0b6XjKaoqmJomjslUsrqPjn28tIOVi/lh+O4Ii61dQmEs2WnrUobHad3DR4eoruCxPXz+DQ+sSDAD51jbBDdFYKZ0dc4Hl5EvkJ/itiwjBfKXqath4tfyn8ekEmqEIf3nWJBFKRml/3QCzFzH4VPl/Dy+G0jyyxroOwMTafT6aazJxUlefpjXe7gwnbTa2c0v5ff5C2y+l/saSQdODCGcSnVpzJPaJT0ZtG+j9ySDvyeVfpvhSpwInDzL8vnJZb7yAaN/ILSl3nB2vEtTjRP5eyzKsHs7188wMZaQ5wQWVbFpFQ31bN/L6J+wL8i9W77Emd2kb9XxxSMK48HW9WzbwMhYsrDaeZRKfHkYUYzjlHb+x0ytVRTfxC51ldWaF7K0jjkpzuQZmDXTJxRfDA5e+pdAIrI5Il5OaEMLGsqYsp31EI4FB2bt/Bf/WNuibWZY5gAAAABJRU5ErkJggg==) center/contain no-repeat;
	display: inline-block;
	height: 1em;
	width: 1em
}

#V-PopupsCompose {
	height: 100vh;
	height: 100dvh;
	max-width: min(99vw, 1600px);
	resize: horizontal;
	width: 99%
}

#V-PopupsCompose .modal-body {
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%
}

#V-PopupsCompose .tabs {
	height: 100%;
	max-height: 100%;
	overflow: auto
}

#V-PopupsCompose .tabs>label>*+* {
	margin-left: .5em
}

#V-PopupsCompose .tabs .tab-content {
	overflow: auto
}

#V-PopupsCompose .attachmentAreaParent,
#V-PopupsCompose .textAreaParent {
	height: 100%;
	min-height: 200px;
	position: relative
}

#V-PopupsCompose .textAreaParent {
	display: flex;
	flex-direction: column
}

#V-PopupsCompose .attachmentAreaParent {
	border-top: 1px solid #ccc;
	overflow-y: auto;
	padding: 10px
}

#V-PopupsCompose .no-attachments-desc {
	padding-top: 50px;
	text-align: center;
	font-size: 171%;
	opacity: .5;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
}

#V-PopupsCompose header {
	background-color: rgba(0, 0, 0, .8);
	color: #fff
}

#V-PopupsCompose header .close,
#V-PopupsCompose header .minimize-custom {
	border-color: #eee;
	float: none;
	font-size: 171%;
	opacity: 1;
	line-height: 28px;
	margin-left: .7em
}

#V-PopupsCompose header .button-delete,
#V-PopupsCompose header .button-save,
#V-PopupsCompose header .saved-text {
	margin-left: 8px
}

#V-PopupsCompose header .button-delete.disabled {
	visibility: hidden
}

#V-PopupsCompose header .pull-right * {
	vertical-align: top
}

#V-PopupsCompose .b-header {
	padding: 10px;
	background-color: rgba(128, 128, 128, .2)
}

#V-PopupsCompose .b-header table {
	border-collapse: collapse;
	width: 100%
}

#V-PopupsCompose .b-header td {
	vertical-align: baseline;
	padding: 2px 0
}

#V-PopupsCompose .b-header td:first-child {
	padding: 0 10px 0 0;
	text-align: var(--right, right);
	white-space: nowrap;
	width: 4em
}

#V-PopupsCompose .b-header #identity-toggle {
	color: var(--main-color);
	margin-left: 6px;
	text-decoration: none
}

#V-PopupsCompose .b-header #identity-toggle::after {
	content: '▼'
}

#V-PopupsCompose .b-header input[type=text] {
	width: 100%
}

#V-PopupsCompose .b-header .error-desc {
	color: red
}

#V-PopupsCompose .b-header .error-to {
	color: red;
	font-weight: 700
}

#V-PopupsCompose .b-attachment-button {
	display: inline-block
}

#V-PopupsCompose .b-attachment-place {
	position: absolute;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
	border: 2px var(--border-color, #ddd) dashed;
	z-index: 300;
	line-height: 119px;
	text-align: center;
	background-color: var(--dialog-bg-clr, #fff);
	font-size: 171%;
	border-radius: 10px;
	opacity: .9
}

#V-PopupsCompose .b-attachment-place.dragAndDropOver {
	border-color: var(--main-color, #fff);
	opacity: 1
}

.minimize-custom {
	border: 0 solid #333;
	border-bottom-width: 3px;
	display: inline-block;
	height: 20px;
	width: 16px;
	cursor: pointer
}

.emailaddresses {
	background-color: var(--input-bg-clr, #fff);
	border: 1px solid var(--input-border-clr, #ccc);
	border-radius: var(--input-border-radius, 3px);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	color: var(--input-clr, #555);
	cursor: text;
	font-size: 90%;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: border linear .2s, box-shadow linear .2s;
	max-height: 5em;
	overflow: auto
}

.emailaddresses.emailaddresses-focused {
	border-color: var(--input-focus-border-clr, #999);
	box-shadow: none
}

.emailaddresses li {
	display: inline-block
}

.emailaddresses li[draggable] {
	background-color: #eee;
	border: 1px solid #aaa;
	border-radius: calc(var(--input-border-radius, 3px) - 1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset;
	color: #555;
	cursor: default;
	max-width: 500px;
	overflow: hidden;
	margin: 2px;
	padding: 2px 15px 2px 5px;
	position: relative;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap
}

.emailaddresses li.pgp {
	background-color: #e5f3e2
}

.emailaddresses li span {
	padding-right: 3px
}

.emailaddresses li a {
	font-size: 85%;
	color: #999;
	padding: 1px;
	position: absolute;
	right: 2px;
	text-decoration: none;
	top: 1px
}

.emailaddresses li a:hover {
	color: #666
}

.emailaddresses .emailaddresses-input {
	margin: 0 2px;
	padding: 0
}

#rl-app .emailaddresses input[type=text],
#rl-app .emailaddresses input[type=text]:focus,
#rl-app .emailaddresses input[type=text]:hover {
	border: 0;
	box-shadow: none;
	height: auto;
	line-height: inherit;
	margin: 0;
	min-width: 18em;
	max-width: 500px;
	padding: 4px;
	vertical-align: baseline
}

.emailaddresses li.emailaddresses-selected,
.emailaddresses li.emailaddresses-selected a {
	background-color: Highlight;
	color: HighlightText
}

#V-SettingsMenu nav a {
	background-color: transparent;
	color: var(--settings-menu-color, #333);
	cursor: pointer;
	display: block;
	font-size: 128%;
	line-height: 2em;
	max-height: 2em;
	overflow: hidden;
	padding: 0 10px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap
}

#V-SettingsMenu nav a:focus,
#V-SettingsMenu nav a:hover {
	background-color: var(--settings-menu-hover-bg-color, #333);
	color: var(--settings-menu-hover-color, #eee)
}

#V-SettingsMenu nav a.selected {
	background-color: var(--settings-menu-selected-bg-color, #333);
	color: var(--settings-menu-selected-color, #eee)
}

#V-SettingsPane {
	height: calc(100% - 50px - 8px);
	margin: 50px 8px 0 0;
	padding: 20px;
	width: 100%;
	background-color: var(--panel-bg-clr, #fff);
	border: 1px solid var(--border-color, #aaa);
	border-radius: var(--border-radius, 5px);
	box-shadow: var(--smMainShadow);
	overflow-y: auto;
	scroll-behavior: smooth
}

#V-SettingsPane .btn-toolbar {
	position: absolute;
	top: 8px;
	left: 8px
}

#V-SettingsPane td {
	padding: 4px 8px;
	line-height: 30px
}

.firefox-drag #V-SettingsPane,
.firefox-drag .modal-body {
	overflow: hidden
}

#V-Settings-General .editMainIdentity {
	border-bottom: 1px dashed #555;
	cursor: pointer;
	display: inline-block;
	padding: 5px 0
}

#V-Settings-Accounts .account-name {
	display: inline-block;
	word-break: break-all
}

#V-Settings-Accounts .identity-default {
	cursor: pointer;
	color: #ccc
}

#V-Settings-Accounts .identity-name {
	display: inline-block;
	word-break: break-all;
	cursor: pointer
}

#V-Settings-Accounts table {
	margin-top: 1em
}

#V-Settings-Accounts tr {
	white-space: nowrap
}

#V-Settings-Accounts td+td+td {
	text-align: var(--right, right)
}

#V-Settings-Accounts td:first-child,
#V-Settings-Accounts td:last-child {
	width: 1em
}

#V-Settings-Accounts .delete {
	cursor: pointer;
	opacity: .5
}

#V-Settings-Accounts .identity-default::before {
	content: '('
}

#V-Settings-Accounts .identity-default::after {
	content: ')'
}

#V-Settings-Security td * {
	cursor: pointer
}

#V-Settings-Security td+td {
	width: 1%
}

#V-Settings-Security .key-user {
	margin: 0 .5em;
	white-space: nowrap
}

#V-Settings-Security .delete-key:not(:hover) {
	opacity: .7
}

#V-Settings-Security iframe {
	max-width: 991px
}

#V-Settings-Folders .folders-list-error {
	margin: 10px 0
}

#V-Settings-Folders table {
	margin-top: 1em
}

#V-Settings-Folders td:first-child {
	cursor: pointer
}

#V-Settings-Folders td+td {
	white-space: nowrap;
	width: 1em
}

#V-Settings-Folders .folder-name {
	word-break: break-all;
	white-space: pre-wrap
}

#V-Settings-Folders .folder-size,
#V-Settings-Folders .folder-system-name {
	margin-left: .2em;
	opacity: .6
}

#V-Settings-Folders select {
	width: auto
}

#V-Settings-Folders tr:not(.selectable) {
	font-style: italic
}

#V-Settings-Folders tr.system .folder-name {
	font-weight: 700
}

#V-Settings-Folders tr input {
	border-width: 1px;
	margin-bottom: 0
}

#V-Settings-Folders tr .unchecked-folder,
#V-Settings-Folders tr .unsubscribed-folder {
	opacity: .4
}

#V-Settings-Folders .deep-1 {
	text-indent: 15px
}

#V-Settings-Folders .deep-2 {
	text-indent: 30px
}

#V-Settings-Folders .deep-3 {
	text-indent: 45px
}

#V-Settings-Folders .deep-4 {
	text-indent: 60px
}

#V-Settings-Folders .deep-5 {
	text-indent: 75px
}

#V-Settings-Themes figure {
	display: inline-block;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 8px;
	margin: 5px;
	min-width: 148px
}

#V-Settings-Themes figure:hover {
	border-color: grey
}

#V-Settings-Themes figure.selected {
	background-color: rgba(64, 255, 64, .2);
	border-color: #000
}

#V-Settings-Themes figure figcaption {
	padding: 0 0 8px 0;
	text-align: center
}

#V-Settings-Themes figure img {
	height: 128px
}

#V-PopupsSieveScript {
	width: auto;
	max-width: 720px
}

#V-PopupsSieveScript .filter-item,
#V-Settings-Filters .script-item {
	white-space: nowrap
}

.filter-item td.drag-wrapper {
	padding: 4px 0
}

.filter-item .delete-filter {
	cursor: pointer;
	opacity: .5
}

.filter-item .filter-name,
.filter-item .filter-sub-name {
	display: inline-block;
	word-break: break-all;
	line-height: 22px;
	cursor: pointer
}

.filter-item .filter-sub-name {
	color: #aaa
}

#V-PopupsSieveScript textarea {
	height: 300px;
	font-family: var(--fontMono)
}

.squire-toolbar {
	border-bottom: 1px solid #b6b6b6;
	min-height: 28px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px;
	position: relative;
	white-space: nowrap
}

.squire-toolbar input[type=color] {
	bottom: 0;
	left: -100em;
	opacity: 0;
	position: absolute;
	width: 40px
}

.squire-toolbar select {
	font-size: 85%;
	padding: 4px 1.5em 4px 6px;
	text-align: var(--left, left);
	vertical-align: middle;
	width: 7em
}

.squire-toolbar select[data-action=fontSize] {
	width: 5em
}

.squire-toolbar button {
	font-family: snappymail, var(--fontSans)
}

.squire-toolbar button[data-action=bold] {
	font-weight: 700
}

.squire-toolbar button[data-action=italic] {
	font-style: italic
}

.squire-plain,
.squire-wysiwyg {
	height: 100%;
	line-height: 16px;
	min-height: 200px;
	overflow: auto;
	padding: 10px
}

.squire-wysiwyg {
	font-family: var(--fontSans)
}

.squire-wysiwyg ul {
	padding-left: 40px
}

.squire-wysiwyg ul li {
	list-style-type: disc !important
}

.squire-wysiwyg ol {
	padding-left: 40px
}

.squire-wysiwyg ol li {
	list-style-type: decimal !important
}

.squire-wysiwyg code,
.squire-wysiwyg pre {
	border: none;
	border-radius: 0;
	display: block;
	font-family: var(--fontMono);
	margin: 0;
	padding: 0;
	word-break: normal;
	word-wrap: break-word
}

.squire-wysiwyg code {
	display: inline;
	padding: 2px 5px
}

.squire-wysiwyg pre {
	border-radius: var(--border-radius, 5px);
	padding: 5px 10px
}

.squire-wysiwyg pre>code {
	padding: 0
}

.squire-wysiwyg blockquote {
	border: 0;
	border-left: 2px solid #444;
	margin: 5px 0 5px 5px;
	padding-left: 5px
}

.squire-wysiwyg blockquote p {
	margin: 0 0 10px;
	line-height: 20px
}

.squire-wysiwyg img {
	vertical-align: bottom
}

.squire-plain {
	border: 0;
	border-radius: 0;
	display: none;
	font-family: var(--fontMono);
	margin: 0;
	resize: none;
	white-space: pre-wrap;
	width: 100%
}

.squire-mode-plain .btn-group:not(#squire-toolgroup-mode),
.squire-mode-plain .squire-wysiwyg,
.squire-mode-source .squire-wysiwyg,
.squire-mode-wysiwyg .squire-plain {
	display: none
}

.squire-mode-plain .squire-plain,
.squire-mode-source .squire-plain {
	display: block
}

@keyframes highlight-folder-row {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.1)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes animate-stripes {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 60px 0
	}
}

html[dir=rtl] {
	direction: rtl;
	--right: left;
	--left: right
}

[dir=rtl] .LoginView .controls>.fontastic:first-child {
	left: unset;
	right: 6px
}

[dir=rtl] .search-input-wrp a,
[dir=rtl].sm-msgView-side #V-MailMessageList .resizer {
	right: unset;
	left: 0
}

[dir=rtl] .fontastic+span,
[dir=rtl] [class*=" icon-"]+span,
[dir=rtl] [class^=icon-]+span {
	margin-left: unset;
	margin-right: .5em
}

[dir=rtl] [data-icon]::before {
	margin-left: .5em;
	margin-right: 0
}

[dir=rtl] .dropdown-menu.right-edge {
	right: auto;
	left: 0
}

[dir=rtl] .form-horizontal .control-group>:not(label) {
	margin: 0 20px 0 0
}

[dir=rtl] .messageList .checkboxCheckAll {
	margin: .45em 0 0 .5em
}

[dir=rtl] .messageListItem {
	border-left: 0;
	border-right: 6px solid transparent
}

[dir=rtl] .messageListItem .sizeParent,
[dir=rtl] .messageListItem time {
	margin: 0 0 0 5px
}

[dir=rtl] .messageListItem .attachmentParent,
[dir=rtl] .messageListItem .flagParent {
	margin: 0 5px 0 10px
}

[dir=rtl] .messageListItem>div+div {
	padding: 5px 5px 5px 0
}

[dir=rtl] #V-SystemDropDown {
	right: unset;
	left: 0
}

[dir=rtl] #V-SystemDropDown .accountPlace {
	border-right: 0;
	border-left: 1px solid var(--btn-border-clr, rgba(0, 0, 0, .2));
	margin: 0 0 -4px 6px;
	padding-right: 0;
	padding-left: 6px
}

[dir=rtl] #V-PopupsCompose .b-header td:first-child {
	padding: 0 0 0 10px
}

[dir=rtl] #V-PopupsCompose header .close,
[dir=rtl] #V-PopupsCompose header .minimize-custom {
	margin-left: 0;
	margin-right: .7em
}

[dir=rtl] .b-folders {
	padding-left: 2px;
	padding-right: unset
}

[dir=rtl] .b-folders .b-folders-system a[data-unread]::after,
[dir=rtl] .b-folders .b-folders-user a[data-unread]:not(.system)::after {
	right: unset;
	left: 3px
}

[dir=rtl] .b-folders .flag-icon {
	margin-left: 0;
	margin-right: 7px
}

[dir=rtl] .b-folders li a {
	border-left: 0;
	border-right: 3px solid transparent;
	padding: 0 7px 0 2em
}

[dir=rtl] .messageView .messageItemHeader .informationShort {
	margin: 0 0 0 56px
}

[dir=rtl] .messageView .messageItemHeader .informationFull td:first-child {
	border-right: 0;
	border-left: 1px solid #999
}

[dir=rtl] .messageView .message-fixed-button-toolbar {
	right: unset;
	left: 10px
}

[dir=rtl] #V-PopupsContacts .e-contact-item {
	border-left: 0;
	border-right: 6px solid #eee
}

[dir=rtl] [data-rainloopErrorTip]::before {
	left: 100%
}

[data-rainloopErrorTip] {
	position: relative
}

[data-rainloopErrorTip]::before {
	background: #fff;
	border-radius: var(--input-border-radius, 3px);
	border: 1px solid #999;
	color: red;
	content: attr(data-rainloopErrorTip);
	font-size: 90%;
	left: 0;
	opacity: 1;
	padding: .25em;
	position: absolute;
	text-align: var(--left, left);
	top: 100%;
	transition: opacity .2s ease-in-out;
	white-space: pre;
	z-index: 2001
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	transition: color 9999s ease-out, background-color 9999s ease-out
}

.btn-rotate,
[data-icon].rotate::before {
	transform: rotate(-180deg)
}

@media screen and (min-width:800px) {
	#rl-app {
		background-image: var(--main-bg-image);
		background-size: var(--main-bg-size);
		background-repeat: var(--main-bg-repeat)
	}

	#V-MailMessageList .buttonCompose,
	#rl-right .toggleLeft {
		display: none !important
	}

	.sm-msgView-bottom #rl-right {
		flex-direction: column
	}

	.resizer {
		background: #aaa;
		background: rgba(255, 255, 255, .5);
		opacity: 0;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 102
	}

	.resizer:hover {
		opacity: 1
	}

	.sm-msgView-side #V-MailMessageList .resizer,
	html:not(.rl-left-panel-disabled) #rl-left>.resizer {
		cursor: ew-resize;
		cursor: col-resize;
		display: block;
		top: 0;
		width: 5px
	}

	.sm-msgView-bottom #V-MailMessageList .resizer {
		cursor: ns-resize;
		cursor: row-resize;
		display: block;
		left: 0;
		height: 5px
	}

	.messageList .listDragOver {
		transition: all .4s ease
	}

	.hideMessageListCheckbox .checkboxCheckAll {
		visibility: hidden
	}

	.hideMessageListCheckbox .checkboxMessage {
		display: none
	}

	.sm-msgView-side #V-MailMessageList {
		width: unset
	}

	.sm-msgView-side #V-MailMessageList .messageList {
		max-width: 50vw;
		min-width: 320px;
		overflow: auto;
		resize: horizontal;
		width: 35vw
	}

	.sm-msgView-bottom #V-MailMessageList {
		height: unset;
		width: unset
	}

	.sm-msgView-bottom #V-MailMessageList .messageList {
		height: 35vh;
		max-height: 50vh;
		min-height: 200px;
		overflow: auto;
		resize: vertical
	}

	.hideContactListCheckbox .checkboxItem {
		visibility: hidden
	}

	.b-folders li .anim-action-class {
		animation: highlight-folder-row .5s linear
	}

	.b-folders .btn.buttonContacts {
		transition: margin .3s linear
	}

	#rl-left .b-content {
		transition: opacity .3s linear
	}

	.b-list-content .e-contact-item {
		transition: max-height .4s ease
	}

	#V-PopupsCompose header.loading {
		background-size: 60px 60px;
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		animation: animate-stripes 2s linear infinite
	}
}

@media screen and (min-width:1401px) {
	#rl-left {
		width: 220px
	}
}

@media screen and (max-width:1400px) {
	html.sm-msgView-side #V-MailMessageView .top-toolbar {
		visibility: hidden
	}
}

@media screen and (max-width:799px) {
	:root {
		--smDialogShrink: 25px
	}

	.form-horizontal .control-group>label {
		text-align: var(--left, left)
	}

	.form-horizontal .control-group>:not(label) {
		margin-left: 20px
	}

	dialog {
		margin: 0 auto;
		width: 100%
	}

	#rl-app #V-SettingsPane {
		margin-right: 0;
		padding: 10px
	}

	#rl-left {
		background: var(--main-bg-color, #aaa);
		border-right: 1px solid var(--border-color, #ddd);
		position: fixed;
		top: 0;
		bottom: 0;
		width: 50vw;
		z-index: 99
	}

	.rl-left-panel-disabled #rl-left {
		display: none
	}

	.dropdown-menu a {
		line-height: 2.5
	}

	.hide-mobile {
		display: none !important
	}

	#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow,
	#V-MailMessageList .hasChecked .onCheckedHide {
		display: none
	}

	#V-PopupsContacts {
		width: 100%
	}

	[data-rainloopErrorTip]::before {
		min-width: 60vw;
		white-space: normal
	}
}

@media screen and (max-width:480px) {
	.LoginView form {
		padding: 30px 4vw 10px
	}

	#V-PopupsLanguages label {
		width: 100%
	}

	#advancedsearchform label {
		width: 100%
	}

	#advancedsearchform label+* {
		margin-left: 0
	}
}

@media print {

	#rl-app,
	#rl-right {
		position: initial
	}

	#rl-left {
		display: none
	}

	#rl-content,
	#rl-right {
		display: block;
		width: 100%
	}

	.message-selected #V-MailMessageList,
	.message-selected #V-SystemDropDown,
	.message-selected #tags-dropdown-id,
	.message-selected .bodySubHeader,
	.message-selected .close,
	.message-selected .infoParent,
	.message-selected .message-fixed-button-toolbar,
	.message-selected .messageView .controls-handle,
	.message-selected .top-toolbar {
		display: none
	}

	.message-selected #V-MailMessageView {
		left: 0;
		overflow: initial;
		position: initial
	}

	.message-selected #messageItem,
	.message-selected #messageItem .b-text-part,
	.message-selected .messageView,
	.message-selected .messageView .b-message {
		height: auto
	}
}