/**
 * motion - Farbanpassung fuer Roundcube, Skin "motion"
 *
 * Erbt vollstaendig vom mitgelieferten Skin "elastic" (siehe meta.json).
 * Diese Datei laedt zuerst das Original und setzt danach nur die Farben neu.
 * Keine Datei in skins/elastic/ wird veraendert.
 *
 * Hauptfarbe:  #303246 (Anthrazit aus dem Logokreis)
 * Menueleiste: #303246
 */

@import url("../../elastic/styles/styles.min.css");


/* ---------- Anmeldeseite als Markenflaeche ---------- */

body.task-login #layout-content {
	background: linear-gradient(160deg, #16171f 0%, #303246 62%, #454866 100%);
}

.task-login #logo {
	max-height: 130px;
	max-width: min(400px, 85%);
	top: 9vh;
}

#login-form {
	top: 16vh;
	max-width: 360px;
	background: #ffffff;
	border-radius: 14px;
	padding: 2rem 1.75rem 1.5rem;
	box-shadow: 0 18px 50px rgba(10, 11, 18, .45);
}

body.task-login #login-form .formbuttons .btn-primary {
	width: 100%;
	padding: .65rem;
	font-size: 1.05rem;
}

#login-footer {
	color: #5f616e;
}

#login-footer > div {
	background: #ececf1;
}

#brandline {
	position: relative;
	top: 18vh;
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
}

#brandline a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}

html.dark-mode body.task-login #layout-content {
	background: linear-gradient(160deg, #0c0d13 0%, #232433 60%, #303246 100%);
}

html.dark-mode #login-form {
	background: #21252c;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

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


/* ---------- Farben aus elastic, in Anthrazit ---------- */

a { color:#3e4160 }
#rcmdraglayer { background-color:#303246 }
.quota-widget .value { background-color:#303246 }
.floating-action-buttons a.button { background:#303246;box-shadow:0 0 5px 5px #ececf4 }
.btn-link { color:#3e4160 }
.btn-primary { background:#303246;border-color:#303246 }
.btn-primary.disabled,.btn-primary:disabled { background:#303246;border-color:#303246 }
.ui-menu .ui-state-active { background-color:#303246!important }
.ui-slider .ui-slider-range { background:#e4e5ee }
.ui-slider .ui-slider-handle.ui-state-active { background:#303246;border-color:#1f2133 }
.ui-datepicker .ui-datepicker-days-cell-over a,.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,.ui-datepicker .ui-state-highlight,.ui-datepicker.ui-widget-content .ui-state-highlight { background:#e4e5ee;color:#303246 }
.ui-datepicker a.ui-state-active { background:#303246!important }
html.layout-phone .popover-header,html.layout-small .popover-header { background-color:#1f2133 }
.popover .menu li a:not(.disabled):hover { background-color:#303246 }
.popover .menu .dropbutton a.dropdown:hover { background-color:#303246 }
.ui.alert a:not(.btn) { color:#303246 }
#messagestack .alert-info.information { background-color:#303246 }
.popupmenu .listing li>a:not(.disabled):hover { background-color:#303246 }
.popupmenu .listing li.selected { background-color:#303246 }
.folderlist li.mailbox .unreadcount { background:#303246 }
.folderlist li.mailbox.recent>a>.unreadcount { background:#303246 }
.formcontent.raweditor .CodeMirror-focused { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.input-group a:focus { background-color:rgba(48,50,70,.25) }
.multi-input>.content.focused { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.recipient-input.focus { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.tagedit-list[tabindex="-1"] { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.form-control:focus { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.input-group-text input:focus { border-color:#303246!important }
.custom-switch .custom-control-input:focus~.custom-control-label:before { box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before { border-color:#303246 }
.custom-switch .custom-control-input:checked~.custom-control-label::before { border-color:#303246;background-color:#303246 }
.custom-file-input:focus~.custom-file-label { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
div.tox.focused { border-color:#303246!important;box-shadow:0 0 0 .2rem rgba(48,50,70,.25)!important }
div.tox .tox-dialog .tox-dialog__body-nav-item--active { color:#3e4160 }
div.tox .tox-dialog__footer .tox-button { background:#303246;border-color:#303246 }
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled { background:#303246;border-color:#303246 }
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background:#303246;border-color:#303246 }
div.tox .tox-color-input>input:focus,div.tox .tox-listboxfield .tox-listbox--select:focus,div.tox .tox-textarea:focus,div.tox .tox-textfield:focus { border-color:#303246;box-shadow:0 0 0 .2rem rgba(48,50,70,.25) }
.googie_list li.googie_list_onhover { background-color:#303246 }
html.dark-mode { scrollbar-color:#565a80 #4d6066 }
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color:#565a80 }
html.dark-mode #messagestack .alert-info,html.dark-mode .ui.alert.boxinformation { background-color:#3d4059 }
html.dark-mode #taskmenu .action-buttons a { color:#a3a9d2 }
html.dark-mode .listing li.selected,html.dark-mode .listing li.selected>a,html.dark-mode .listing li.selected>div>a,html.dark-mode .listing tr.selected td { color:#a3a9d2 }
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status { color:#a3a9d2 }
html.dark-mode .btn-primary { background-color:#454866 }
html.dark-mode .btn-primary:hover:not(:disabled) { background-color:#565a80 }
html.dark-mode .floating-action-buttons a.button { background:#454866 }
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid) { border-color:#a3a9d2 }
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before { background-color:#454866 }
html.dark-mode .multi-input:not(.is-invalid)>.content.focused { border-color:#a3a9d2 }
html.dark-mode .input-group a:focus { border-color:#a3a9d2;box-shadow:0 0 0 .2rem rgba(163,169,210,.3) }
html.dark-mode .recipient-input.focus { border-color:#a3a9d2 }
html.dark-mode .formcontent.raweditor .CodeMirror-focused { border-color:#a3a9d2 }
html.dark-mode .tox .tox-dialog__footer .tox-button { background-color:#454866 }
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background-color:#454866 }
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled) { background-color:#565a80 }
html.dark-mode .tox .tox-dialog__body-nav-item--active { color:#a3a9d2 }
html.dark-mode .tox .tox-collection__item--enabled { color:#a3a9d2 }
html.dark-mode .message-part blockquote { border-color:#b8bdd9;color:#b8bdd9 }
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight { color:#a3a9d2 }

@media screen and (min-width:481px) {
  #layout-menu .popover-header { background-color:#303246!important }
  #layout-menu { background-color:#303246 }
  #taskmenu a.selected { background:#454866 }
  #taskmenu a.selected:hover { background:#454866 }
  #taskmenu a:hover { background:#454866 }
  #taskmenu .special-buttons { background-color:#303246 }
  #taskmenu .action-buttons a { color:#303246 }
  #taskmenu .action-buttons a:hover { color:#303246;background:#454866 }
}

@media screen and (min-width:1025px) {
  #taskmenu a:focus { background-color:#454866 }
}


/* ---------- Feinschliff ---------- */

/* Aktion "Neu" auf der Menueleiste */
#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover,
html.dark-mode #taskmenu .action-buttons a {
	color: #c3c7e2;
}

#taskmenu .action-buttons a:hover {
	background: #454866;
}

/* Kreislogo in der Menuekopfzeile */
#layout-menu .popover-header #logo {
	display: block;
	max-height: 64px;
	max-width: calc(100% - .8rem);
	margin: .6rem auto;
}


/* ---------- Dark Mode: Menueleiste bleibt anthrazit ---------- */

html.dark-mode #layout-menu {
	background: #292b3d;
	border-right-color: #454866;
}

html.dark-mode #layout-menu .popover-header {
	border-bottom-color: #454866;
}

html.dark-mode.layout-phone #layout-menu {
	background: #292b3d;
}

html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a {
	color: #d9dbe8;
	border-color: #454866 !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected,
html.dark-mode #taskmenu a:hover {
	background-color: #454866;
}

html.dark-mode #taskmenu .special-buttons a:not(:focus) {
	background: #292b3d;
}


/* ---------- Marke in der Anwendung ---------- */

/* Zarter grauvioletter Grundton statt reinem Weiss */
#layout-sidebar,
#layout-list,
#layout-content {
	background-color: #f8f8fb;
}

/* Spaltenkoepfe mit anthraziter Unterkante */
#layout > div > .header {
	background-color: #ebecf1;
	border-bottom: 2px solid #303246;
}

html.dark-mode #layout > div > .header {
	background-color: transparent;
	border-bottom: 2px solid #565a80;
}

/* Textmarkierung in Markenfarbe */
::selection {
	background: #303246;
	color: #ffffff;
}