:root {
	--color-primary: rgba(0,184,208, 1);
	--color-primary-rgb: 0,184,208;
	
	--color-secondary: rgba(0,141,185, 1);
	--color-secondary-rgb: 0,141,185;
	
	--color-body: rgba(102,102,102, 1);
	--color-body-rgb: 102,102,102;
	
	--color-hover: rgba(7,106,125, 1);
	--color-hover-rgb: 7,106,125;
	
	--color-line: rgba(226,226,226, 1);
	--color-line-rgb: 226,226,226;
		
	--color-success: rgba(64,192,128, 1);
	--color-success-rgb: 64,192,128;
	--color-error: rgba(192,32,64, 1);
	--color-error-rgb: 192,32,64;
	--color-warning: rgba(224,128,96, 1);
	--color-warning-rgb: 224,128,96;
	
	--gradient-primary: linear-gradient(153deg, var(--color-primary) 0, rgba(var(--color-secondary-rgb), 0.25) 100%);
	
	--font-size: 16px;
	--font-size-xsmall: 13px;
	--font-size-small: 15px;
	--font-size-medium: 16px;
	--font-size-large: 20px;
	--font-size-xlarge: 26px;
	--font-size-hero: 32px;
}

/* webfonts */
/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('ubuntu/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-italic - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('ubuntu/ubuntu-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu/ubuntu-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu/ubuntu-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu/ubuntu-v15-latin-italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('ubuntu/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu/ubuntu-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('ubuntu/ubuntu-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* general */
.clear:after,
.clearfix:after {
	content: ' ';
	display: table;
	clear: both;
}

.clearer {
	clear: both;
	display: block;
}

body {
	font-family: "Ubuntu", Arial, sans-serif !important;
}

#layout {
	padding-top: 65px;
}

.header-container {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
}

.layout-small .header-container {
		border-left: 42px solid var(--color-primary);	
	}
	.layout-normal .header-container,
	.layout-large .header-container {
		border-left: 100px solid var(--color-primary);	
	}
	.task-login .header-container,
	.action-print .header-container {
		display: none;
	}

#header {
	position: relative;
	margin: 0 auto;
	padding-left: 25px;
	padding-right: 25px;
}

#branding {
	float: left;
}

body:not(.task-login) #logo {
	float: left;
	font-size: 1rem;
	margin: 0.6875em 0;
	line-height: 1.375em;
}
	.layout-small #logo {
		margin: 0.6875em 0;
	}

#logo img {
	max-width: 200px;
}
	body:not(.task-login) #logo img {
		max-width: 90px;
	}
	.layout-small #logo img,
	.layout-phone #logo img {
		max-width: 120px;
	} 

#logo span {
	padding-left: 1em;
	font-size: 0.875rem;
	color: rgba(0,0,0, .8);
	font-weight: 500;
	position: relative;
	top: 17px;
}

#logo a {
	text-decoration: none;
	display: inline-block;
}

#header .main-menu-container {
	display: block;
	margin: 1.5em 0 0;
	float: right
}
	.layout-small #header .main-menu-container,
	.layout-phone #header .main-menu-container {
		display: none;
	}
	@media only screen and (max-width: 1079px) {
		#header .main-menu-container {
			display: none;
		}
	}

#header .main-menu {
	position: relative;
}

#header .main-menu li {
	list-style: none;
	float: left;
	position: relative;
}

#header .main-menu a {
	padding: 8px 20px;
	color: rgba(0,0,0, 1);
	display: block;
	font-weight: 400;
	font-size: 1rem;
	text-decoration: none;
}
	#header .main-menu a:hover {
		color: var(--color-secondary);
	}

body a {
	color: #000;
	text-decoration: underline;
}
	body a:hover {
		color: var(--color-secondary);
	}

body .btn-primary,
body .btn-primary:not(:disabled):not(.disabled):active,
body .btn-primary:not(:disabled):not(.disabled).active {
	background: var(--color-primary);
	border: 0;
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	border-radius: 9999px;
}
	body .btn-primary:hover {
		background: var(--color-secondary);
	}
	body .btn-primary.disabled,
	body .btn-primary:disabled {
		background: var(--color-primary);
		opacity: .5;
	}

body .btn-secondary {
	border-radius: 0;
}

body .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

	body .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before {
		background: rgba(var(--color-primary-rgb), .5);
		border-color: rgba(var(--color-primary-rgb), .5);
	}

body .btn-danger {
	background: var(--color-error);
}
	body .btn-danger:hover {
		background: rgb(159,0,0);
	}

body #messagestack .alert-success {
	background: var(--color-success);
}

body #messagestack .alert-warning {}

body #messagestack .alert-danger {
	background: var(--color-error);
}

body .floating-action-buttons a.button {
	background: var(--color-primary);
	border: 0;
}


/* footer */
#footer {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 5.5em auto 0;
	padding: 2.75em 25px;
	background: #222;
	color: #fff;
	text-align: left;
	overflow: auto;
	font-size: var(--font-size-small);
}

#footer a {
	color: rgba(255,255,255, .66);
	text-decoration: underline;
}
	#footer a:hover {
		color: #fff;
	}

	@media only screen and (min-width: 640px) {
		#footer  {
			padding-left: 40px;
			padding-right: 40px;
		}
	}
	@media only screen and (min-width: 1140px) {
		#footer {
			padding-left: 90px;
			padding-right: 90px;
		}
	}
	
#footer ul {
	padding-left: 0;
}

#footer .widget {
	flex: 1;
	position: relative;
	display: block;
	padding-right: 45px;
	margin-bottom: 1.375em;
}
	#footer #contact,
	#footer #bugs {
		flex: 2;
	}
	@media only screen and (max-width: 640px) {
		#footer .widget {
			width: 100%;
			flex-basis: 100%;
		}
	}

#footer .widget h4,
#footer .widget p {
	margin-bottom: 12px;
}

#footer .widget li {
	list-style: none;
	margin-bottom: 5px;
}

/* menus */
body #layout-menu {
	background: var(--color-primary);
}
	html:not(.layout-small):not(.layout-phone) body #layout-menu {
		width: 100px;
	}

body #layout-menu .popover-header {
	background-color: transparent !important;
}

body #layout-menu .popover-header #roundcube-logo {
	display: none;
}

body #taskmenu a {
	color: rgb(255,255,255);
	border-bottom: none !important;
}
	html:not(.layout-small):not(.layout-phone) body #taskmenu a  {
		width: 100px;
		min-width: 100px;
	}

body #taskmenu a.selected,
body #taskmenu a.selected:hover,
body #taskmenu a:hover,
body #taskmenu a:focus,
body #taskmenu .action-buttons a:hover {
	background: rgb(255,255,255);
	color: rgb(0,0,0);
}

body #taskmenu .action-buttons a {
	color: rgb(255,255,255)
}
	body #taskmenu .action-buttons a.selected {
		color: rgb(0,0,0);
	}

body #taskmenu .special-buttons {
	background: none;
}

body #taskmenu a.logout {
	background: var(--color-error);
	color: rgb(255,255,255) !important;
}

html.layout-phone body .popover-header {
	background: rgb(0,0,0);
}

html.touch body .popover .listing li a:hover {
	background: rgb(77,171,81);
}

html.layout-phone body #layout > div > .header {
	background: var(--color-primary);
	color: rgb(255,255,255);
}

html.layout-phone body #layout > div > .header a.button {
	color: rgb(255,255,255);
}

/* login */
body.task-login #layout {
	overflow: auto;
	display: inherit;
}

body.task-login #logo {
	top: inherit;
}

body.task-login h1 {
	position: relative;
	top: 15px;
	font-size: var(--font-size-small);
}

body.task-login #login-form {
	top: inherit;
	margin-top: 2em;
	max-width: 360px;
}

body #login-footer {
	font-family: 'Ubuntu', Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(0,0,0, .8);
}

body #login-footer strong {
	font-weight: 500;
}

body #login-footer a {
	color: rgb(27,120,30);
	text-decoration: underline;
}

body #login-footer #planetoceanhosting_status-aggregated {
	border-radius: 0;
	padding: 0;
	background: transparent;
}

body #login-footer .config {
	border: 1px solid var(--color-secondary);
	color: var(--color-secondary);
	background: transparent;
}

body #login-footer .config a {
	color: var(--color-secondary);
}

/* mail */
body .quota-widget .value {
	background: var(--color-secondary);
	opacity: 1;
}

body .folderlist li.mailbox .unreadcount {
	background: var(--color-secondary);
}

body ul.treelist li.selected > div > a,
body ul.treelist li.selected > a,
body .listing li.selected,
body .listing tr.selected td {
	background: var(--color-light);
}

html:not(.touch) body .listing li > a:focus,
html:not(.touch) body .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) body .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
	border-left-color: var(--color-secondary);
}

/* mail compose */
body .popupmenu .listing li > a:not(.disabled):hover,
body .popupmenu .listing li.selected {
	background: var(--color-primary);
}

body .file-upload .attachmentslist li a.delete,
body .file-upload .attachmentslist li a.cancelupload {
	color: var(--color-error);
}

/* poh status */
#poh-status {
	width: 100%;
	border: none;
	height: 100px;
}

body #login-footer .card { 
	padding: 0.6875em 1.375em;
	font-family: "Ubuntu", Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	display: block;
	text-align: center;
	border-radius: 0;
	border: none;
}

body #login-footer .card.em.success {
	color: #fff;
	background: var(--color-success);
}

body #login-footer .card.em.error {
	color: #fff;
	background: var(--color-error);
}

body #messagestack .alert-error {
	background: var(--color-error);
	color: #fff;
}

body #messagestack .alert-warning {
	background: var(--color-warning);
	color: #fff;
}

body #messagestack .alert-success {
	background: var(--color-success);
	color: #fff;
}