/**
 * 53NORD - Farbanpassung fuer Roundcube, Skin "53nord"
 *
 * 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 hell:   #1DB954
 * Hauptfarbe dunkel: #2EE06A (Dark Mode)
 * Menueleiste:       #1DB954
 */

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


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

body.task-login #layout-content {
	background: linear-gradient(160deg, #0b6b34 0%, #1DB954 62%, #2EE06A 100%);
}

.task-login #logo {
	max-height: 76px;
	max-width: min(360px, 85%);
	top: 12vh;
	filter: brightness(0) invert(1);
}

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

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

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

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

#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, #06281a 0%, #0e5e30 70%, #128a3e 100%);
}

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

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


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

a { color:#169a45 }
#rcmdraglayer { background-color:#1db954 }
.quota-widget .value { background-color:#1db954 }
.floating-action-buttons a.button { background:#1db954;box-shadow:0 0 5px 5px #e3fcec }
.btn-link { color:#169a45 }
.btn-primary { background:#1db954;border-color:#1db954 }
.btn-primary.disabled,.btn-primary:disabled { background:#1db954;border-color:#1db954 }
.ui-menu .ui-state-active { background-color:#1db954!important }
.ui-slider .ui-slider-range { background:#d9f5e2 }
.ui-slider .ui-slider-handle.ui-state-active { background:#1db954;border-color:#0e6b30 }
.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:#d9f5e2;color:#1db954 }
.ui-datepicker a.ui-state-active { background:#1db954!important }
html.layout-phone .popover-header,html.layout-small .popover-header { background-color:#0e6b30 }
.popover .menu li a:not(.disabled):hover { background-color:#1db954 }
.popover .menu .dropbutton a.dropdown:hover { background-color:#1db954 }
.ui.alert a:not(.btn) { color:#1db954 }
#messagestack .alert-info.information { background-color:#1db954 }
.popupmenu .listing li>a:not(.disabled):hover { background-color:#1db954 }
.popupmenu .listing li.selected { background-color:#1db954 }
.folderlist li.mailbox .unreadcount { background:#1db954 }
.folderlist li.mailbox.recent>a>.unreadcount { background:#1db954 }
.formcontent.raweditor .CodeMirror-focused { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.input-group a:focus { background-color:rgba(29,185,84,.25) }
.multi-input>.content.focused { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.recipient-input.focus { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.tagedit-list[tabindex="-1"] { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.form-control:focus { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.input-group-text input:focus { border-color:#1db954!important }
.custom-switch .custom-control-input:focus~.custom-control-label:before { box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before { border-color:#1db954 }
.custom-switch .custom-control-input:checked~.custom-control-label::before { border-color:#1db954;background-color:#1db954 }
.custom-file-input:focus~.custom-file-label { border-color:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
div.tox.focused { border-color:#1db954!important;box-shadow:0 0 0 .2rem rgba(29,185,84,.25)!important }
div.tox .tox-dialog .tox-dialog__body-nav-item--active { color:#169a45 }
div.tox .tox-dialog__footer .tox-button { background:#1db954;border-color:#1db954 }
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled { background:#1db954;border-color:#1db954 }
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background:#1db954;border-color:#1db954 }
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:#1db954;box-shadow:0 0 0 .2rem rgba(29,185,84,.25) }
.googie_list li.googie_list_onhover { background-color:#1db954 }
html.dark-mode { scrollbar-color:#1e7a44 #4d6066 }
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color:#1e7a44 }
html.dark-mode #messagestack .alert-info,html.dark-mode .ui.alert.boxinformation { background-color:#1e7a44 }
html.dark-mode #taskmenu .action-buttons a { color:#2ee06a }
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:#2ee06a }
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:#2ee06a }
html.dark-mode .btn-primary { background-color:#17a34a }
html.dark-mode .btn-primary:hover:not(:disabled) { background-color:#2ee06a }
html.dark-mode .floating-action-buttons a.button { background:#17a34a }
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid) { border-color:#2ee06a }
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before { background-color:#17a34a }
html.dark-mode .multi-input:not(.is-invalid)>.content.focused { border-color:#2ee06a }
html.dark-mode .input-group a:focus { border-color:#2ee06a;box-shadow:0 0 0 .2rem rgba(46,224,106,.3) }
html.dark-mode .recipient-input.focus { border-color:#2ee06a }
html.dark-mode .formcontent.raweditor .CodeMirror-focused { border-color:#2ee06a }
html.dark-mode .tox .tox-dialog__footer .tox-button { background-color:#17a34a }
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background-color:#17a34a }
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled) { background-color:#2ee06a }
html.dark-mode .tox .tox-dialog__body-nav-item--active { color:#2ee06a }
html.dark-mode .tox .tox-collection__item--enabled { color:#2ee06a }
html.dark-mode .message-part blockquote { border-color:#8ef0b4;color:#8ef0b4 }
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight { color:#2ee06a }

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

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


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

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

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

/* Logo in der Menuekopfzeile: immer weiss, unabhaengig von der
   skin_logo-Konfiguration (Sicherheitsnetz gegen gruen auf gruen) */
#layout-menu .popover-header #logo {
	display: block;
	max-height: 56px;
	max-width: calc(100% - 1rem);
	margin: .5rem auto;
	filter: brightness(0) invert(1);
}

/* Abmelden: rot liest sich auf dem hellen Gruen schlecht, weiss lassen */
#taskmenu a.logout,
#taskmenu a.logout:hover,
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout:hover {
	color: #ffe1e0 !important;
}


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

html.dark-mode #layout-menu {
	background: #159442;
	border-right-color: #0e7a34;
}

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

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

html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a {
	color: #eafff2;
	border-color: #0e7a34 !important;
}

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

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


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

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

/* Spaltenkoepfe mit gruener Unterkante */
#layout > div > .header {
	background-color: #e9f7ee;
	border-bottom: 2px solid #1DB954;
}

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

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