:root {
	--dark: #191E23;
	--light: #C5C8C6;
	
	--blue-light: #9cdcfe;
	--blue-dark: #569bd4;
	--green-light: #b5cea8;
	--green-dark: #4ec9b0;
	
	--yellow: #dcdcaa;
	--red: #ce9178;
	--purple: #c586c0;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-size: inherit; font-family: inherit; }
html { font-size: 10px; height: 100%; }
body { font-size: 1.4rem; height: 100%; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji, sans-serif; }
#mainContainer { height: 100%; }

.row { display: flex; }
.x { width: 100% !important; flex-grow: 1 !important; }
.nx { flex-shrink: 0 !important; }

.s12 { width: 100%; }
.s11 { width: 91.66%; }
.s10 { width: 83.33%; }
.s9 { width: 75%; }
.s8 { width: 66.6%; }
.s7 { width: 58.33%; }
.s6 { width: 50%; }
.s5 { width: 41.6%; }
.s4 { width: 33.3%; }
.s3 { width: 25%; }
.s2 { width: 16.66%; }
.s1 { width: 8.33%; }

@media (min-width: 600px) {
	.m12 { width: 100%; }
	.m11 { width: 91.66%; }
	.m10 { width: 83.33%; }
	.m9 { width: 75%; }
	.m8 { width: 66.6%; }
	.m7 { width: 58.33%; }
	.m6 { width: 50%; }
	.m5 { width: 41.6%; }
	.m4 { width: 33.3%; }
	.m3 { width: 25%; }
	.m2 { width: 16.66%; }
	.m1 { width: 8.33%; }
}

@media (min-width: 960px) {
	.l12 { width: 100%; }
	.l11 { width: 91.66%; }
	.l10 { width: 83.33%; }
	.l9 { width: 75%; }
	.l8 { width: 66.6%; }
	.l7 { width: 58.33%; }
	.l6 { width: 50%; }
	.l5 { width: 41.6%; }
	.l4 { width: 33.3%; }
	.l3 { width: 25%; }
	.l2 { width: 16.66%; }
	.l1 { width: 8.33%; }
}

@media (min-width: 1200px) {
	.xl12 { width: 100%; }
	.xl11 { width: 91.66%; }
	.xl10 { width: 83.33%; }
	.xl9 { width: 75%; }
	.xl8 { width: 66.6%; }
	.xl7 { width: 58.33%; }
	.xl6 { width: 50%; }
	.xl5 { width: 41.6%; }
	.xl4 { width: 33.3%; }
	.xl3 { width: 25%; }
	.xl2 { width: 16.66%; }
	.xl1 { width: 8.33%; }
}

@media (min-width: 1600px) {
	.xxl12 { width: 100%; }
	.xxl11 { width: 91.66%; }
	.xxl10 { width: 83.33%; }
	.xxl9 { width: 75%; }
	.xxl8 { width: 66.6%; }
	.xxl7 { width: 58.33%; }
	.xxl6 { width: 50%; }
	.xxl5 { width: 41.6%; }
	.xxl4 { width: 33.3%; }
	.xxl3 { width: 25%; }
	.xxl2 { width: 16.66%; }
	.xxl1 { width: 8.33%; }
}


.libreclientMain { height: 100%; display: flex; }

.libreclientSidebar { width: auto; flex-grow: 1; min-width: 32rem; }
.libreclientDockLeft { width: 32rem; height: 100%; margin: 0 0 0 auto; }
.libreclientDockRight { width: 32rem; height: 100%; margin: 0 auto 0 0; }
.libreclientContent { width: 100rem; }

.hidden { display: none; }
.error { margin: 0 0 1rem 0; border: 1px solid #D00; color: #D00; text-align: center; border-radius: 3px; padding: 1rem 2rem; }

.panel1 { display: flex; align-items: center; margin: 2rem 0; }

.list1 { border-top: 1px solid rgba(255,255,255,.1); }
.list1item { border-bottom: 1px solid rgba(255,255,255,.1); padding: 2rem; display: block; }

a { color: var(--blue-dark); text-decoration: none; border-bottom: 2px solid; }

input,
textarea,
select,
button, .btn { line-height: normal; width: 100%; padding: 1rem 1.5rem; border-radius: .5rem; border: .1rem solid transparent; background: rgba(255,255,255,.05); color: var(--light); }
button,
.btn { text-align: center; cursor: pointer; background: var(--blue-dark); color: var(--dark); }


form.compact,
form.standard { display: flex; flex-direction: column; }
form .field { margin: 0 0 2rem 0; flex-grow: 1; padding: 0 2rem 0 0; }

html, body, #wrapper, #container { height: 100% }
body { background: var(--dark); color: var(--light); font-size: 1.8rem; }
p, ul, ol, h1, h2, h3 { margin: 0 0 2rem 0; }
h1 { font-size: 2.4rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 2rem; }

#dockRight { display: none; }

body.login #mainContent {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100%;
}

#usersLogin {
	margin: auto;
	max-width: 100%;
	width: 32rem;
}

h1.brand { margin: 0; }
h1.brand a { border: 0 none; color: #FFF; text-decoration: none; font-weight: 300; font-size: 3rem; }

.menu { margin: 0; padding: 0; list-style-type: none; }
.menu a { border: 0 none; display: block; text-decoration: none; font-size: 2rem; padding: 1rem 2rem; }

.landrovalAccountsListItem .name { color: var(--light); }

.landrovalMailSidebarAccount { padding: 1rem 2rem; }
.landrovalFolderList { list-style-type: none; font-size: 1.6rem; } 
.landrovalFolderListItem a { border: 0 none; -color: var(--light); }

body.folders article.main { max-width: none; }
#landrovalFolder { display: flex; height: 100% }
#landrovalEmailList { width: 30%; }
#landrovalEmailList h1 { margin: 0 0 .5rem 0; }
#landrovalEmailList .landrovalEmailListItem { padding: 1rem 0; display: block; color: var(--light); border-bottom: 0 none; }
#landrovalEmailList .landrovalEmailListItem .line1 { display: flex; }
#landrovalEmailList .landrovalEmailListItem .line1 .from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
#landrovalEmailList .landrovalEmailListItem .line1 .date { padding: 0 0 0 2rem; flex-shrink: 0; }
#landrovalEmailList .landrovalEmailListItem .line2 { display: flex; }
#landrovalEmailList .landrovalEmailListItem .line2 .subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
#landrovalEmailList .landrovalEmailListItem .line2 .info { padding: 0 0 0 2rem; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
#landrovalEmailContent { width: 70%; padding: 0 0 0 4rem; }
#noEmailSelected { height: 100%; display: flex; }
#noEmailSelected i { display: block; margin: auto; font-size: 20rem; color: var(--blue-dark); }

@media (min-width: 1360px) {
	article.main { max-width: 90rem; width: 100%; height: 100%; margin: 0 auto; }
	#container { display: flex; padding: 2rem; }
	#dockLeft { width: 32rem; flex-shrink: 0; display: flex; flex-direction: column; }
	#dockLeft a { border: 0 none; }
	#dockLeft .line1 { display: flex; align-items: center; padding: 2rem; }
	#dockLeft .line1 h1.brand { flex-grow: 1; }
	#dockLeft .line1 #receiveAction { cursor: pointer; font-size: 2rem; }
	#dockLeft .line2 { display: flex; padding: 0 2rem 2rem 2rem; }
	#dockLeftContent { flex-grow: 1; overflow: auto; }
	#dockLeftBottom { padding: 2rem; display: flex; justify-content: space-between; }
	#mainContent { flex-grow: 1; display: flex; flex-direction: column; padding: 2rem; }
	h1.main { font-size: 3rem; font-weight: normal; }
	#dockRight { width: 32rem; flex-shrink: 0; }
	#usersLogin { width: 32rem; margin: auto; }
	#landrovalEmail { display: flex; flex-direction: column; height: 100%; }
	#landrovalEmailDetails { flex-shrink: 0; }
	#landrovalEmailBody { border: 0 none; flex-grow: 1; }
}