:root {
    --retzien-green: #00473e;
    --retzien-yellow: #faae2b;
    --retzien-pink: #ffa8ba;
    --retzien-grey: #f3f3f3;
}

body {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

/*
 * Roundcube ajoute la feuille Elastic après celle du skin enfant. Les
 * couleurs de palette utilisent donc !important afin que le parent ne
 * réintroduise pas son bleu lors des changements d'état.
 */
body a,
body a:link,
body a:visited {
    color: var(--retzien-green) !important;
    text-decoration-color: var(--retzien-yellow) !important;
}

body a:hover,
body a:focus,
body a:active {
    color: #000000 !important;
    text-decoration-color: var(--retzien-pink) !important;
}

#layout-menu,
.popover-header,
.menu.toolbar .dropbutton .dropdown-menu {
    background-color: var(--retzien-green) !important;
}

#layout-menu {
    border-color: var(--retzien-green) !important;
}

body #layout-menu .popover-header,
body #layout-menu .special-buttons {
    color: #ffffff !important;
    background-color: var(--retzien-green) !important;
    border-color: var(--retzien-green) !important;
}

#layout-menu .popover-header,
#layout-menu a,
#layout-menu button {
    color: #ffffff !important;
}

#layout-menu #taskmenu a:not(.selected) {
    color: #ffffff !important;
}

#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a:hover,
#layout-menu #taskmenu a:focus {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
}

#layout-menu #taskmenu a.selected:hover,
#layout-menu #taskmenu a.selected:focus {
    background-color: var(--retzien-pink) !important;
}

.menu.toolbar a,
#layout > div > .header a.button {
    color: #2c363a !important;
}

#layout-menu .menu.toolbar a {
    color: #ffffff !important;
}

#layout-menu .menu.toolbar a.selected,
#layout-menu .menu.toolbar a:hover,
#layout-menu .menu.toolbar a:focus {
    color: #000000 !important;
}

body .btn-primary,
button.mainaction,
input.mainaction,
.floating-action-buttons a.button {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
    border-color: var(--retzien-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(250, 174, 43, 0.2) !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active,
body .btn-primary:not(:disabled):not(.disabled):active,
body .btn-primary:not(:disabled):not(.disabled).active,
button.mainaction:hover,
input.mainaction:hover,
.floating-action-buttons a.button:hover,
.floating-action-buttons a.button:focus {
    color: #000000 !important;
    background-color: var(--retzien-pink) !important;
    border-color: var(--retzien-pink) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 168, 186, 0.25) !important;
}

body a.btn-link,
body a.button.btn-link {
    color: var(--retzien-green) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--retzien-yellow) !important;
    text-decoration-thickness: 0.14em !important;
    text-underline-offset: 0.18em !important;
}

body a.btn-link:hover,
body a.btn-link:focus,
body a.button.btn-link:hover,
body a.button.btn-link:focus {
    color: #000000 !important;
    text-decoration-color: var(--retzien-pink) !important;
}

.listing li.selected,
.listing tr.selected td,
.listing li.selected > a {
    color: #000000 !important;
    background-color: #fff2d8 !important;
}

.messagelist li.selected,
.messagelist li.selected > a,
.messagelist tr.selected td {
    color: #000000 !important;
    background-color: #fff2d8 !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--retzien-green) !important;
    border-color: var(--retzien-green) !important;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--retzien-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 71, 62, 0.2) !important;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--retzien-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 71, 62, 0.2) !important;
}

.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb {
    background-color: var(--retzien-green) !important;
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--retzien-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 71, 62, 0.2) !important;
}

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

#message-header a,
#message-header a:link,
#message-header a:visited,
#message-content .message-part a,
#message-content .message-part a:link,
#message-content .message-part a:visited,
#message-content .message-htmlpart a,
#message-content .message-htmlpart a:link,
#message-content .message-htmlpart a:visited {
    color: var(--retzien-green) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--retzien-yellow) !important;
    text-decoration-thickness: 0.14em !important;
    text-underline-offset: 0.18em !important;
}

#message-header a:hover,
#message-header a:focus,
#message-content .message-part a:hover,
#message-content .message-part a:focus,
#message-content .message-htmlpart a:hover,
#message-content .message-htmlpart a:focus {
    color: #000000 !important;
    text-decoration-color: var(--retzien-pink) !important;
}

.message-part blockquote,
.message-htmlpart blockquote {
    color: var(--retzien-green) !important;
    border-left-color: var(--retzien-green) !important;
    border-right-color: var(--retzien-green) !important;
}

.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active,
.dropdown-item.active,
.dropdown-item:active {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
    border-color: var(--retzien-green) !important;
}

.treelist .unreadcount,
.badge-primary,
.badge-info,
.bg-primary,
.progress-bar,
.quota-widget .value {
    color: #ffffff !important;
    background-color: var(--retzien-green) !important;
}

.treelist li.recent > a {
    color: var(--retzien-green) !important;
}

.text-primary,
.text-info {
    color: var(--retzien-green) !important;
}

.border-primary,
.border-info {
    border-color: var(--retzien-green) !important;
}

.alert-primary,
.alert-info,
.list-group-item-primary,
.list-group-item-info,
.table-primary,
.table-info {
    color: #000000 !important;
    background-color: #fff2d8 !important;
    border-color: var(--retzien-yellow) !important;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--retzien-green) !important;
    border-color: var(--retzien-green) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.nav-pills .nav-link.active,
.page-item.active .page-link {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
    border-color: var(--retzien-yellow) !important;
}

.ui-datepicker td .ui-state-highlight {
    color: var(--retzien-green) !important;
    background-color: #fff2d8 !important;
}

.ui-datepicker td .ui-state-active {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
    border-color: var(--retzien-green) !important;
}

#messagestack .alert-info.information,
.ui.alert.boxinformation {
    color: #ffffff !important;
    background-color: var(--retzien-green) !important;
    border-color: var(--retzien-green) !important;
}

.table-widget table.options-table tr.selected td,
.image-selector .attachmentslist li:hover,
.image-selector .attachmentslist li:focus {
    color: #000000 !important;
    background-color: #fff2d8 !important;
}

p.image-attachment {
    background-color: rgba(250, 174, 43, 0.06) !important;
}

.image-tools {
    background-color: rgba(0, 71, 62, 0.4) !important;
}

.image-tools a:hover,
.image-tools a:focus {
    background-color: rgba(250, 174, 43, 0.65) !important;
}

.html-editor > .mce-tinymce.focused,
.mce-window .mce-textbox:focus,
.mce-window .mce-listbox:focus {
    border-color: var(--retzien-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 71, 62, 0.2) !important;
}

.mce-menu .mce-menu-item.mce-active,
.mce-window .mce-foot .mce-btn.mce-primary,
.googie_list li.googie_list_onhover {
    color: #000000 !important;
    background-color: var(--retzien-yellow) !important;
    border-color: var(--retzien-yellow) !important;
}

.task-login #logo {
    width: min(319px, 82vw);
}

.task-login #layout-content {
    background-color: var(--retzien-grey);
}

.task-login a:not(.btn),
.task-login #login-footer a {
    color: var(--retzien-green) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--retzien-yellow) !important;
    text-underline-offset: 0.18em !important;
}

.task-login a:not(.btn):hover,
.task-login a:not(.btn):focus,
.task-login #login-footer a:hover,
.task-login #login-footer a:focus {
    color: #000000 !important;
    text-decoration-color: var(--retzien-pink) !important;
}

@media (prefers-color-scheme: dark) {
    html.dark-mode .task-login #layout-content {
        background-color: #071a17;
    }
}

html.dark-mode body #layout-menu,
html.dark-mode body #layout-menu .popover-header,
html.dark-mode body #layout-menu .special-buttons {
    background: var(--retzien-green) !important;
    border-color: var(--retzien-green) !important;
}

html.dark-mode #layout-menu #taskmenu a.selected,
html.dark-mode #layout-menu #taskmenu a:hover,
html.dark-mode #layout-menu #taskmenu a:focus {
    color: #000000 !important;
    background: var(--retzien-yellow) !important;
}

/*
 * Sur le fond anthracite d'Elastic, le vert de marque manque de contraste.
 * Le jaune devient donc la couleur fonctionnelle des liens en mode sombre.
 */
html.dark-mode body a,
html.dark-mode body a:link,
html.dark-mode body a:visited,
html.dark-mode .treelist li.recent > a,
html.dark-mode .text-primary,
html.dark-mode .text-info,
html.dark-mode #message-header a,
html.dark-mode #message-content .message-part a,
html.dark-mode #message-content .message-htmlpart a,
html.dark-mode body a.btn-link,
html.dark-mode body a.button.btn-link,
html.dark-mode .task-login a:not(.btn),
html.dark-mode .task-login #login-footer a {
    color: var(--retzien-yellow) !important;
    text-decoration-color: var(--retzien-pink) !important;
}

html.dark-mode body a:hover,
html.dark-mode body a:focus,
html.dark-mode body a:active,
html.dark-mode #message-header a:hover,
html.dark-mode #message-header a:focus,
html.dark-mode #message-content .message-part a:hover,
html.dark-mode #message-content .message-part a:focus,
html.dark-mode #message-content .message-htmlpart a:hover,
html.dark-mode #message-content .message-htmlpart a:focus,
html.dark-mode body a.btn-link:hover,
html.dark-mode body a.btn-link:focus,
html.dark-mode body a.button.btn-link:hover,
html.dark-mode body a.button.btn-link:focus,
html.dark-mode .task-login a:not(.btn):hover,
html.dark-mode .task-login a:not(.btn):focus,
html.dark-mode .task-login #login-footer a:hover,
html.dark-mode .task-login #login-footer a:focus {
    color: #ffffff !important;
    text-decoration-color: var(--retzien-pink) !important;
}

html.dark-mode .menu.toolbar a,
html.dark-mode #layout > div > .header a.button {
    color: #c5d1d3 !important;
}

html.dark-mode .menu.toolbar a:hover,
html.dark-mode .menu.toolbar a:focus,
html.dark-mode #layout > div > .header a.button:hover,
html.dark-mode #layout > div > .header a.button:focus {
    color: var(--retzien-yellow) !important;
}

html.dark-mode .message-part blockquote,
html.dark-mode .message-htmlpart blockquote {
    color: #c5d1d3 !important;
    border-left-color: var(--retzien-yellow) !important;
    border-right-color: var(--retzien-yellow) !important;
}