/*
 * crossmedia.css
 *
 * (c) Copyright 2008-2011 Mittelrhein Verlag GmbH. All Rights Reserved.
 */

body {
    --background: #f4f4f4;
    --backgroundSurface: #fefefe;
    --primary: rgb(38, 134, 187);
    --primaryLightest: rgba(38, 134, 187, 0.075);
    --primaryHighlight: rgb(57, 159, 212);
    /*rgba( var(--primary), 0.5);*/
    --primaryHLLightest: rgba(57, 159, 212, 0.1);
    --primary-text: white;

    --primaryDefault: rgb(38, 134, 187);
    --primaryDefaultLightest: rgba(38, 134, 187, 0.075);
    --primaryDefaultHighlight: rgb(57, 159, 212);
    /*rgba( var(--primary), 0.5);*/
    --primaryDefaultHLLightest: rgba(57, 159, 212, 0.1);
    --primaryDefault-text: white;

    --primaryTopic: rgb(163, 39, 162);
    --primaryTopicLightest: rgba(163, 39, 162, 0.075);
    --primaryTopicHighlight: rgb(185, 73, 185);
    /*rgba( var(--primary), 0.5);*/
    --primaryTopicHLLightest: rgba(185, 73, 185, 0.1);
    --primaryTopic-text: white;

    --primaryAppointment: rgb(51, 158, 154);
    --primaryAppointmentLightest: rgba(51, 158, 154, 0.075);
    --primaryAppointmentHighlight: rgb(86, 184, 180);
    /*rgba( var(--primary), 0.5);*/
    --primaryAppointmentHLLightest: rgba(86, 184, 180, 0.1);
    --primaryAppointment-text: white;

    --highlight: rgb(250, 250, 250);
    --select: rgb(240, 240, 240);

    --content-border: 150px;
    --grid-gap-content: 15px;
    --tab-background: #e5e5e5;

    --border: #c1c1c1;
    --borderLight: #cccccc;
    --fontColorSurface: #191919;
    --fontColorSurfaceLight: #8b8b8b;
    --fontColorLight: #707070;
    --fontColorPrimary: #ffffff;
    --warning: #b71c1c;
    --hint: #f57f17;
    --ok: #1b5e20;

    --okRaw: 27, 94, 32;
    --hintRaw: 245, 127, 23;
    --warningRaw: 183, 28, 28;

    --fontSizeDefault: 14px;
    --fontSizeSmall: 12px;
    --fontSizeBig: 16px;

    --typeface: 'Droid Sans';

    --borderRadiusDefault: 4px;
    --borderRadiusSmall: 2px;
    --borderRadiusBig: 8px;

    --elementHeightDefault: 24px;
    --elementHeightSmall: 16px;
    --elementHeightBig: 32px;

    --marginDefault: 8px;
    --marginSmall: 4px;
    --marginBig: 16px;

    --padding: 2px;

    --listItemHeight: 52px;
    --listItemHeightDense: 32px;
    --listHeaderHeight: 56px;
    --listHeaderHeightDense: 32px;

    /* mui vars */
    --mdc-theme-primary: var(--primary);
    --mdc-theme-secondary: var(--primaryHighlight);
    --mdc-checkbox-ripple-size: 32px;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1.separator {
    border-bottom: 1px solid #e1e1e1;
}

h6.separator {
    margin: 24px 0 6px;
    background: transparent;
}

h6.separator:first-child {
    margin-top: 0;
}

h6.separator span {
    display: inline-block;
    background: transparent;
    color: var(--primaryDefault);
    padding-right: 13px;
    padding-left: 10px;
    text-transform: uppercase;
}

h1.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}

#quick_search_form {
    position: absolute;
    right: 0;
    margin: 8px 26px 0 0;
}

#quick_search_form input {
    width: 300px;
}

/* COLLAPSABLE TEXT ----------------------------------------------------------------------------- */

.teaser {
    display: block;
}

.fulltext {
    display: none;
}

/* ROSTER WIDGET JQUERY UI ACCORDION ICON */
.accordion h3 {
    font-weight: normal;
    cursor: pointer;
}

.ui-accordion-content-active,
.ui-accordion-header-active {
    background: #97cbe8;
}

.icon-grey {
    color: #999;
    display: inline-block;
}

.roster-widget-nav {
    width: 100%;
    min-height: 42px;
    padding: 4px;
    display: block;
    background: white;
}

.roster-widget-nav select {
    width: 300px;
}

.roster-widget-nav .roster-link {
    float: right;
}

.roster-widget-header {
    width: 100%;
    min-height: 24px;
    background: #97cbe8;
    color: white;
    vertical-align: baseline;
    padding: 4px;
    margin-top: 1px;
}

.roster-widget-content {
    width: 100%;
    min-height: 24px;
    border-bottom: 1px solid #e7e7e7;
    padding: 4px;
}

/* INFOBAR -------------------------------------------------------------------------------------- */

#infobar h1.is_subtopic {
    /*padding-left:           16px;
    background:             url("../images/sub_topic.74ecb9634f02.png") 2px top no-repeat;*/
    line-height: 24px;
    /* filter:                 invert(100%); */
}

/* #infobar h1.is_subtopic > a {
    filter:                 invert(100%);
} */

h1.is_subtopic {
    /*padding-left:           16px;
    background:             url("../images/sub_topic.74ecb9634f02.png") 8px bottom no-repeat;*/
    line-height: 24px;
}

#infobar #show_search_form,
#infobar #hide_search_form {
    position: absolute;
    right: 26px;
    top: 9px;
}

/* EDIT USER PROFILE DIALOG --------------------------------------------------------------------- */

#dropzone_profilephoto,
#dropzone_profilephoto_loading {
    width: 120px;
    height: 120px;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    background: #e6e6e6;
    margin: 0 auto 1em;
}

#dropzone_profilephoto.hovering {
    opacity: 0.5;
}

#dropzone_profilephoto_loading {
    display: none;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    background-size: auto;
    background: #e6e6e6 url("../images/ajax-loader.5aa68c612821.gif") no-repeat center;
}

/* SHOW USERPROFILE DIALOG ---------------------------------------------------------------------- */

.vcard_table {
    margin: 0 0 13px;
    width: 100%;
}

.vcard_table td {
    padding: 2px 6px;
    vertical-align: top;
    border: none;
}

.vcard_table td:first-child {
    padding-left: 0px;
}

.vcard_table h1 {
    margin: 0 0 0.5em;
}

/* DASHBOARD ------------------------------------------------------------------------------------ */

.dashboard_table td.cell:first-child {
    padding: 0 6px 0 0;
}

.dashboard_table td.cell:last-child {
    padding: 0 0 0 6px;
}

/* .dashboard_table h6 {
  margin: 0;
  padding: 4px 6px;
  background: #2686bb;
  font-size: 16px;
  color: #fff;
  font-weight: normal;
} */

.dashboard_table .inner {
    overflow-y: auto;
}

/* .dashboard_table h6 a {
  color: #fff;
} */

.dashboard_table .cell {
    display: grid;
    grid-template-rows: minmax(auto, auto) 1fr;
    height: 100%;
}

.spinner-container {
    overflow: hidden;
}

/* DATATABLE ------------------------------------------------------------------------------------ */

.datatable.upload_table,
.datatable.search_profile_table {
    margin-bottom: 0;
}

.noborder * {
    border-top: none !important;
}

.datatable .is_overdue,
.datatable tr.mobile-table-row div.is_overdue {
    color: #c00;
}

.datatable .is_overdue:first-child {
    border-left: 2px solid #c00;
    color: #c00;
    padding-left: 6px !important;
}

.datatable .wide {
    width: 100%;
}

.datatable .actions {
    white-space: nowrap;
}

.datatable .empty_result {
    text-align: center;
    color: #999;
    font-style: italic;
}

.datatable.subtopic_table .is_done,
.datatable.subtopic_table .is_done * {
    color: #666;
}

.datatable .actions a {
    display: inline-block;
}

.datatable .actions.vertical a {
    display: block;
    margin-bottom: 6px;
}

.datatable .content_counter a {
    font-size: 14px;
    line-height: 16px;
    color: #666;
    display: inline-block;
    margin-right: 4px;
}

.datatable .profilephoto {
    width: 48px;
    height: 48px;
}

.datatable .message p {
    margin: 0.5em 0 0.5em 0;
}

.datatable .message p:first-child {
    margin: 0 0 0.5em 0;
}

.datatable .message .message_subject {
    font-weight: bold;
}

.datatable p.info {
    margin: 0;
    color: #333;
    font-size: 12px;
    font-style: italic;
}

.datatable .message blockquote {
    border-left: 4px solid #0d4565;
    margin-left: 0;
    padding-left: 1em;
}

.datatable .unread {
    background-color: #ffffcc !important;
    cursor: pointer;
}

.datatable h5,
.datatable p {
    margin-bottom: 13px;
}

.datatable p:last-child {
    margin-bottom: 0;
}

.datatable .topic_description p:last-child {
    margin-bottom: 13px;
}

.datatable h5 {
    font-weight: normal;
    display: inline-block;
}

.datatable .compact h5 {
    margin-bottom: 0;
}

.datatable.compact p,
.datatable th p {
    margin: 0px;
}

.datatable a.preview .thumbnail_image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover !important;
}

.datatable a.preview,
.datatable a.preview img,
.datatable a.preview .thumbnail_image {
    display: inline-block;
    width: 128px;
    height: 128px;
    background: transparent no-repeat;
}

.datatable a.preview.tiny,
.datatable a.preview.tiny img,
.datatable a.preview.tiny .thumbnail_image {
    width: 32px;
    height: 32px;
}

.datatable a.preview.variant,
.datatable a.preview.variant img,
.datatable a.preview.variant .thumbnail_image {
    width: 96px;
    height: 96px;
}

.datatable a.preview.smallthumb,
.datatable a.preview.smallthumb img,
.datatable a.preview.smallthumb .thumbnail_image {
    width: 64px;
    height: 64px;
}

.datatable .topic_description table,
.datatable .description table {
    width: 100%;
}

.datatable .topic_description td,
.datatable .description td,
.description td {
    padding: 0 16px 0 0;
    border-bottom: none;
}

.datatable .topic_description tr:hover,
.datatable .description tr:hover {
    background: none;
}

.datatable .label_list li {
    white-space: nowrap;
}

.datatable .label_list .has_category {
    padding-left: 13px;
}

tr.actual-variant .pad-on-variant {
    padding-left: 32px;
}

.channelmarker {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    line-height: 16px;
    position: relative;
    top: -2px;
}

.cursor-pointer {
    cursor: pointer;
}

option .channelmarker {
    margin-right: 6px;
}

.content_info_list dt,
.content_info_list_heading {
    min-width: 150px;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
}

.content_info_list dd,
.datatable .detailed .content_info_list_content {
    padding-left: 13px;
}

.content_info_list dd {
    margin-bottom: 6px;
}

.content_info_list p {
    margin-bottom: 3px;
}

.content_info_list p:last-child {
    margin-bottom: 0px;
}

.content_info_list .errorlist li li {
    list-style-type: circle;
}

.datatable .enable_absolute_positioning .innerWrapper {
    padding-bottom: 16px;
    width: 100%;
    position: relative;
}

.datatable .info_area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.datatable.ul-ol ul {
    list-style-type: disc;
    padding-left: 26px;
}

.datatable.ul-ol ol {
    list-style-type: decimal;
    padding-left: 26px;
}

.article_content_info {
    margin: 3px 0;
}

.article_content_info .counter {
    display: block;
    padding-left: 20px;
    line-height: 18px;
    /*background:             transparent url("../images/add.7c03ae18392f.gif") no-repeat top left; */
}

.article_content_info .detail {
    display: none;
    padding-left: 20px;
    /*background:             transparent url("../images/remove.b4dea24b7291.gif") no-repeat top left; */
    padding-top: 1px;
}

.mobile-table-row .userprofile.nowrap {
    white-space: normal !important;
}

.mobile-icon-row,
.mobile-table-row > td > div {
    display: flex;
    flex-direction: row;
}

.mobile-content-row > div,
.mobile-table-row-metadata {
    display: block;
}

.mobile-table-row > td > div {
    flex-wrap: wrap;
}

.mobile-icon-row {
    flex-wrap: nowrap;
}

.topic_description .mobile-table-row-description {
    flex-grow: 1;
    min-width: 200px;
}

.mobile-content-row {
    flex: 1;
}

.mobile-icon-row > div {
    margin-right: 5px;
}

.mobile-content-row .topic_description > div {
    margin-bottom: 5px;
}

.mobile-icon-row {
    padding-bottom: 10px;
    flex-basis: auto;
}

.topic-grid-icon-container > div {
    display: inline;
    padding: 0 5px;
}

/* SIDEBAR -------------------------------------------------------------------------------------- */

.sidebar .tab_panel {
    padding: 13px 0;
}

/* CHANGES TABLE -------------------------------------------------------------------------------- */

.changes_table {
    width: 100%;
}

.changes_table .fieldname {
    width: 18%;
}

.changes_table .value {
    width: 41%;
}

.changes_table th,
.changes_table td {
    border: 0;
    color: #000 !important;
}

.changes_table tr {
    border-top: 1px solid #ccc;
}

.changes_table tr:first-child {
    border-top: 0;
}

.changes_table th {
    vertical-align: top;
}

/* ARTIKEL ANZEIGE ------------------------------------------------------------------------------ */

.article_text h1,
.article_text h2,
.article_text h3,
.article_text h4,
.article_text .h1,
.article_text .h2,
.article_text .h3,
.article_text .h4 {
    margin: 1em 0;
}

.article_text p,
.article_text h1:first-child,
.article_text .p,
.article_text .h1:first-child {
    margin: 0 0 1em;
}

.article_text .headline {
    line-height: 26px;
    margin: 8px 0 24px;
}

.article_text .subheadline {
    margin: 8px 0 16px;
}

.article_text .lead {
    margin: 8px 0 12px;
}

.article_text .basetext:first-child {
    margin: 12px 0 8px;
}

.article_text .basetext:last-child {
    margin: 8px 0 12px;
}

.article_text .img {
    margin: 12px 12px;
    width: 25%;
}

/* -- Topic Tree -------------------------------------------------------------------------------- */

.topictree,
.topictree table {
    margin: 0;
}

.topictree td {
    margin: 0;
    padding: 0;
    line-height: 22px;
}

.topictree a {
    display: block;
}

.topictree a.withicon {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}

.topictree .folder,
.topictree .leaf {
    padding-left: 20px;
}

.topictree .folder {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 -6400px;
}

.topictree .folder.open {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 -4000px;
}

.topictree .folder.last {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 -2400px;
}

.topictree .folder.last.open {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 0;
}

.topictree .leaf {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 -5600px;
}

.topictree .leaf.last {
    background: transparent url("../images/treeview-sprite.115a1070e139.gif") no-repeat scroll
        0 -1600px;
}

/* DROPZONE ------------------------------------------------------------------------------------- */

#content_dropzone {
    line-height: 180px;
    font-size: 26px;
    font-weight: bold;
}

#content_dropzone,
.dropzone-line {
    text-align: center;
    color: #a7a7a7;
    border-radius: 6px;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    /* Controls the size of the stripes */
    background-color: #cef6ce;
    background-image: -webkit-gradient(
        linear,
        0 100%,
        100% 0,
        color-stop(0.25, rgba(255, 255, 255, 0.5)),
        color-stop(0.25, transparent),
        color-stop(0.5, transparent),
        color-stop(0.5, rgba(255, 255, 255, 0.5)),
        color-stop(0.75, rgba(255, 255, 255, 0.5)),
        color-stop(0.75, transparent),
        to(transparent)
    );
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -moz-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -ms-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -o-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
}

#content_dropzone.hovering {
    background-color: #a1a1a1;
    color: #fff;
}

footer #content_dropzone {
    line-height: 61px;
    margin-left: 13px;
    width: 200px;
}

#content_dropzone.dropzone_mobile {
    background: transparent;
    line-height: 90px;
}

#content_dropzone.dropzone_mobile input#choose_file {
    display: none;
}

#content_dropzone.dropzone_mobile form button {
    background: #cef6ce;
    /*border: solid 1px rgb(124, 212, 124);*/
}

#content_dropzone.dropzone_mobile form button i {
    color: rgb(124, 212, 124);
    margin-right: 5px;
}

/* SEARCH FORMS --------------------------------------------------------------------------------- */

.search_form {
    padding: var(--marginDefault) var(--marginBig);
    margin-bottom: var(--marginBig);
    background: var(--backgroundSurface);
    border-radius: var(--borderRadiusBig);
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* FONT AWESOME --------------------------------------------------------------------------------- */

i[class],
svg {
    color: #9e9e9e;
    display: inline-block;
}

button:disabled > i[class] {
    color: #ccc;
    display: inline-block;
}

.content_info_list p i[class] {
    width: 14px;
}

.submenu a i[class] {
    width: 18px;
    color: #999;
}

.desktop-nav .submenu a:hover i[class] {
    color: var(--primary);
}

.desktop-nav .submenu.default a:hover i[class] {
    color: var(--primaryDefault);
}

.desktop-nav .submenu.topic a:hover i[class] {
    color: var(--primaryTopic);
}

.desktop-nav .submenu.appointment a:hover i[class] {
    color: var(--primaryAppointment);
}

.is_overdue i[class] {
    color: inherit;
}

i.icon-star {
    color: var(--hint) !important;
}

i.icon-plus {
    color: var(--ok) !important;
}

.fc-event-title i[class] {
    /* color:                  inherit; */
    margin-right: 3px;
}

.fc-event .fc-event-title,
.fc-v-event .fc-event-title {
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-left: 2px;
    width: 100%;
}

.fc-timeline-event .fc-event-title {
    white-space: normal;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    min-width: min-content;
}

.fc-event[data-is-done='1']:not([data-is-appointment='true']) {
    /*text-decoration:        line-through;*/
    -webkit-background-size: 10px 10px;
    -moz-background-size: 10px 10px;
    background-size: 10px 10px;
    /* Controls the size of the stripes */
    background-color: #000000;
    background-image: -webkit-gradient(
        linear,
        0 100%,
        100% 0,
        color-stop(0.25, rgba(255, 255, 255, 0.5)),
        color-stop(0.25, transparent),
        color-stop(0.5, transparent),
        color-stop(0.5, rgba(255, 255, 255, 0.5)),
        color-stop(0.75, rgba(255, 255, 255, 0.5)),
        color-stop(0.75, transparent),
        to(transparent)
    );
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -moz-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -ms-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: -o-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
}

svg.accepted,
i.accepted {
    color: #59c02d;
}

svg.unanswered,
i.unanswered {
    color: #feca09;
}

svg.denied,
i.denied {
    color: #cc3046;
}

/* FULLCALENDAR CSS ----------------------------------------------------------------------------- */

.fc {
    background-color: #fff;
}

.fc-state-default {
    background-image: none !important;
    background-color: #eee !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
    /*padding: 0 15px !important;
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.1em;*/
    font-weight: 600;
}

.fc-state-default.fc-state-disabled {
    box-shadow: none !important;
    background-color: #eee !important;
}

.fc-state-default:hover {
    color: #2686bb;
    background-color: white !important;
}

.fc-state-default.fc-state-disabled:hover,
.fc button.fc-state-disabled:hover > .fc-icon {
    color: #333333;
    background-color: #eee !important;
}

.fc-button-group {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.fc-button-group .fc-state-default {
    box-shadow: none;
}

.fc-state-default.fc-state-active {
    background-color: #e6e6e6 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.fc-event {
    font-size: 12px !important;
}

.event-time-title {
    padding-right: 4px;
}

.fc-event-time,
.fc-event-title,
.fc-description {
    /* font-size:      13px !important; */
}

.fc-timeline-event,
.fc-timegrid-event,
.fc-daygrid-event {
    border-radius: 6px !important;
}

.fc-daygrid-block-event .fc-event-time {
    font-weight: normal !important;
}

.fc-event-title,
.fc-description {
    font-weight: normal;
    display: block;
    /* margin-left:    3px; */
    white-space: pre-wrap !important;
    word-break: break-word;
}

.fc-event-head {
    padding: 3px;
}

.fc-month-view .fc-sat,
.fc-month-view .fc-sun,
.fc-agendaWeek-view .fc-sat,
.fc-agendaWeek-view .fc-sun,
.fc-agendaEightDays-view .fc-sat,
.fc-agendaEightDays-view .fc-sun,
.fc-basicEightDays-view .fc-sat,
.fc-basicEightDays-view .fc-sun,
.fc-basicWeek-view .fc-sat,
.fc-basicWeek-view .fc-sun {
    background-color: #f3f3f3;
}

.fc-assignment-status {
    float: right;
    white-space: initial;
    width: calc(100% - 8px);
    /* subtract padding */
    max-width: max-content;
    background: #fff;
    padding: 1px 4px;
    border-radius: 0px 2px 0px 3px;
    z-index: 1;
    position: relative;
}

#calendar .fc-title {
    max-width: max-content;
}

.fc-assignment-status i {
    display: inline-block;
    padding: 1px 2px;
    font-size: 13px;
}

.fc-edit-title {
    padding: 0 10px;
}

.clickable {
    cursor: pointer;
}

.fc-event-title i[class] {
    /* color:                  inherit; */
    margin-right: 3px;
}

.fc-button-group > button {
    border-radius: 0;
}

.fc-left > button,
.fc-right > button,
.fc-button-group {
    border-radius: 6px !important;
}

.fc-button-group > button:first-child {
    border-radius: 6px 0 0 6px;
}

.fc-button-group > button:last-child,
.fc-button-group > a:last-child {
    border-radius: 0 6px 6px 0;
}

.fc-content .fc-event .fc-bg {
    z-index: -1;
}

/* HACKS */

.horizontal_list li {
    display: inline;
}

.menubutton {
    cursor: pointer;
}

/* responsive menu */
.desktop-nav .submenu {
    min-width: 250px;
}

.tablet-nav .has-submenu {
    pointer-events: none;
}

.tablet-nav .menu {
    cursor: pointer;
}

.tablet-nav .submenu > a {
    /* background:             #2686BB; */
    padding-left: 20px;
    margin-left: 20px;
}

.tablet-nav .submenu > a:hover {
    background: #2b8dc2;
}

.tablet-nav .submenu {
    border: none;
    padding: 0;
    position: relative;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.tablet-nav .menu .greytext {
    font-weight: 100;
    color: var(--fontColorSurfaceLight);
}

.tablet-nav .menu a:hover .greytext {
    color: var(--border);
}

.tablet-logo {
    display: none;
}

/* responsive topic-table */
.topic-grid-template {
    display: grid;
    /* grid-template-columns: auto; */
    grid-template-columns:
        [icons] max-content [date] max-content [time] max-content [description] minmax(
            300px,
            auto
        )
        [tasks] minmax(auto, 300px) [status] minmax(250px, max-content) [assignee] max-content [catchwords] max-content
        /*  [cog] minmax(1px, auto)*/;
    grid-template-rows: auto;
}

.topic-grid-template.tablet > div {
    order: var(--counter);
}

.topic-grid-template:not(.tablet) > .grid-area-icons {
    grid-column-start: icons;
}

.topic-grid-template.tablet > .grid-area-icons {
    grid-column: icons;
    /* grid-row:               auto / span 2; */
}

.topic-grid-template:not(.tablet) > .grid-area-date {
    grid-column-start: date;
}

.topic-grid-template:not(.tablet) > .grid-area-time {
    grid-column-start: time;
}

.topic-grid-template.tablet > .grid-area-time,
.topic-grid-template.tablet > .grid-area-date,
.topic-grid-template.tablet > .grid-area-catchwords {
    /* display:                none; */
}

.topic-grid-template:not(.tablet) > .grid-area-description {
    grid-column-start: description;
}

.topic-grid-template.tablet > .grid-area-description {
    /* grid-column:            date / span 3; */
}

.topic-grid-template:not(.tablet) > .grid-area-catchwords {
    grid-column-start: catchwords;
}

.topic-grid-template:not(.tablet) > .grid-area-tasks {
    grid-column-start: tasks;
}

.topic-grid-template.tablet > .grid-area-tasks,
.topic-grid-template.tablet > .grid-area-status,
.topic-grid-template.tablet > .grid-area-assignee {
    /* grid-column:            auto / span 2; */
}

.topic-grid-template.tablet > .grid-area-tasks.compact {
    /* grid-column:            tasks / span 4;
    grid-row:               auto / span 2;
    border-bottom:          1px solid #e7e7e7; */
}

.topic-grid-template:not(.tablet) > .grid-area-status {
    grid-column-start: status;
}

.topic-grid-template:not(.tablet) > .grid-area-assignee {
    grid-column-start: assignee;
}

.topic-grid-template:not(.tablet) > .grid-last {
    /* grid-column-start:      cog; */
}

.topic-grid-template.tablet .grid-area-icons i {
    /* margin-bottom:          10px; */
}

.topic-grid-template.tablet > .grid-area-description,
.topic-grid-template.tablet > .grid-area-status,
.topic-grid-template.tablet > .grid-last {
    /* grid-row:               auto / span 2; */
}

.grid-area-description.compact {
    grid-column: auto;
    /* display:                flex; */
}

.topic-grid-template:not(.tablet) > .grid-area-tasks.compact {
    /* grid-column-start:      catchwords; */
    text-align: left;
}

.topic-grid-template > .grid-area-tasks.compact > div {
    /* margin-left:            10px; */
}

.grid-area-icons.compact,
.grid-area-date.compact,
.grid-area-time.compact,
.grid-area-status.compact,
.grid-area-assignee.compact,
.grid-area-catchwords.compact {
    /* display:                flex; */
}

.topic-grid-template > div.is-empty,
.desktop.topic-grid-template > div.is-empty-on-desktop,
.tablet.topic-grid-template > div.is-empty-on-tablet {
    padding: 0;
}

.grid-template.tablet > div {
    padding: 10px 16px;
}

/* RIPPLE EFFECT FOR BUTTONS only works in Chrome
button.fc-state-default{
    position: relative;
    overflow: hidden;
    margin :10px;
}
button.fc-state-default:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgb(38, 134, 187, 0.2);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) translate(-50%);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: scale(1, 1) translate(-50%);
    -moz-transform-origin: 50% 50%;
}
button.fc-state-default:focus:not(:active)::after {
    animation: ripple 3s ease-out;
    -webkit-animation: ripple 3s ease-out;
    -moz-animation: ripple 3s ease-out;
}

@-webkit-keyframes ripple {
    0% {
      transform: scale(0, 0);
      -webkit-transform: scale(0, 0);
      -moz-transform: scale(0, 0);
      opacity: 1;
    }
    20% {
      transform: scale(25, 25);
      -webkit-transform: scale(25, 25);
      -moz-transform: scale(25, 25);
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(40, 40);
      -webkit-transform: scale(40, 40);
      -moz-transform: scale(40, 40);
    }
  }
@-moz-keyframes ripple {
    0% {
      transform: scale(0, 0);
      -webkit-transform: scale(0, 0);
      -moz-transform: scale(0, 0);
      opacity: 1;
    }
    20% {
      transform: scale(25, 25);
      -webkit-transform: scale(25, 25);
      -moz-transform: scale(25, 25);
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(40, 40);
      -webkit-transform: scale(40, 40);
      -moz-transform: scale(40, 40);
    }
  }
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    -webkit-transform: scale(25, 25);
    -moz-transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
    -webkit-transform: scale(40, 40);
    -moz-transform: scale(40, 40);
  }
}*/

.no-drop {
    cursor: no-drop;
}

.drop-possible {
    background: #e3f0ff !important;
}

.drop-possible .choosable:not(.active) {
    background: #e3f0ff !important;
}

.draggable > .fc-event {
    cursor: pointer;
}

#open-close:hover i {
    color: #2686bb;
}

@-moz-keyframes rotate60 {
    100% {
        -moz-transform: rotate(60deg);
    }
}

@-webkit-keyframes rotate60 {
    100% {
        -webkit-transform: rotate(60deg);
    }
}

@keyframes rotate60 {
    100% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
}

.open #close-icon {
    display: inline;
}

.closed #close-icon,
.closed #topic-publication-switch div,
.closed #topic-publication-radio div {
    display: none;
}

.open #open-icon {
    display: none;
}

.closed #open-icon {
    display: inline;
}

.hidden {
    display: none;
}

.important-hidden {
    display: none !important;
}

.loading-spinner {
    display: block !important;
    text-align: center;
    padding: 30px;
    font-size: 20px;
    color: #cfcfcf !important;
}

.ui-draggable-helper,
.ui-draggable-dragging {
    pointer-events: none;
}

#no-resource-warning {
    width: 100%;
    text-align: center;
    padding: 50px;
    color: red;
    font-weight: 900;
}

/* this displays an arrow to the right if the end of the event is not in view */
.fc-ltr .fc-timeline-event.fc-not-end .fc-title:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f0da';
    color: #555;
    right: -3px;
    position: absolute;
    border: 0;
    margin-top: -1px;
}

.fc-ltr .fc-timeline-event.fc-not-start .fc-title:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f0d9';
    color: #555;
    right: -3px;
    position: absolute;
    border: 0;
    margin-top: -8px;
    opacity: 1;
}

.fc-export-status {
    float: right;
    margin-top: 3px;
    padding-right: 3px;
}

/* SWITCHES ------------------------------------------------------------------------------------- */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    height: 18px;
    width: 44px;
}

.slider:hover {
    background-color: #aaa;
}

.switch.disabled .slider {
    cursor: not-allowed;
}

.slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 0.5px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #399fd4;
}

input:checked + .slider:hover {
    background-color: #2686bb;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* RADIO BUTTONS -------------------------------------------------------------------------------- */

@keyframes radio-ripple {
    0% {
        box-shadow: 0px 0px 3px 1px rgba(57, 159, 212, 0);
    }

    50% {
        box-shadow: 0px 0px 3px 15px rgba(57, 159, 212, 0.1);
    }

    100% {
        box-shadow: 0px 0px 3px 15px rgba(57, 159, 212, 0);
    }
}

.md-radio {
    margin: 10px 0 10px 0;
}

.md-radio.md-radio-inline {
    display: inline-block;
}

.md-radio input[type='radio'] {
    display: none;
}

.md-radio input[type='radio']:checked + label:before {
    border-color: #2686bb;
    animation: radio-ripple 0.4s linear forwards;
}

.md-radio input[type='radio']:checked + label:after {
    transform: scale(1);
}

.md-radio label {
    display: inline-block;
    height: 20px;
    position: relative;
    padding: 0 30px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
}

.md-radio label:before,
.md-radio label:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    transition: all 0.3s ease;
    transition-property: transform, border-color;
}

.md-radio label:before {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.54);
}

.md-radio label:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    transform: scale(0);
    background: #2686bb;
}

.md-radio:hover input[type='radio']:checked + label {
    color: #222;
}

.md-radio:hover {
    color: #2686bb;
}

.md-radio:hover label:before {
    border: 2px solid #2686bb;
}

/* ROOSTER TABLE -------------------------------------------------------------------------------- */

.roster_table {
    width: 100%;
    margin-top: 13px;
}

.roster_table td,
.roster_table th {
    padding: 6px;
    text-align: center;
    vertical-align: top;
    line-height: 16px;
    border: 1px solid #eee;
}

.roster_table th:first-child {
    font-weight: bold;
}

.roster_table td:first-child,
.roster_table th:first-child {
    text-align: left;
}

.roster_table .day {
    width: 2.5%;
}

.roster_table .day.active:hover {
    background: #e3f4ff;
}

.roster_table .weekend,
.roster_table .holiday {
    background: #f1faff;
    background-clip: padding-box;
}

.roster_table .sunday {
    border-right: 2px solid #ddd;
}

.roster_table .selected {
    border: 3px solid #cc3046;
}

.roster_table .odd {
    background: #fcfcfc;
}

.sticky-row > td,
.sticky-row > th {
    background: white;
    top: 0;
    position: sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: -webkit-sticky;
    background-clip: padding-box;
    z-index: 0;
}

.sticky-row > td:after,
.sticky-row > th:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border: 1px solid #eee;
}

.roster_table td:first-child,
.roster_table th:first-child {
    left: 0;
    position: sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: -webkit-sticky;
    background: white;
    z-index: 0;
    outline: 2px solid #eee;
    border: none;
    outline-offset: -1px;
}

.roster_table th:first-child {
    z-index: 1;
}

.roster_table tr.odd > td:first-child {
    border: 1px solid #eee;
    background: #fcfcfc;
    background-clip: padding-box;
}

#roster_menu {
    width: 100%;
    background: #f5f5f5;
    border: 1px solid #ccc;
    color: #0078b7;
    position: fixed;
    bottom: 0px;
    left: 0;
    display: none;
    z-index: 10;
}

#roster_menu_content {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.roster_menu_group {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 5px;
}

.roster_menu_item {
    margin: 5px;
}

button.roster_menu_item {
    height: 34px;
    color: #0078b7;
}

button.roster_menu_item:disabled {
    color: #ccc;
}

#select_service_dd {
    width: 200px;
}

.ui-dialog {
    z-index: 1000001;
}

.ui-widget-overlay {
    z-index: 1000000;
}

.sidebar .hidden_in_sidebar {
    display: none;
}

#line_counter_visual {
    padding: 3px 6px;
    border-style: solid;
    border-color: #9e9e9e;
    border-width: 0 1px 1px 1px;
}

.sortable_imagegallery {
    display: flex;
    flex-wrap: wrap;
}

#content.show_article .single-content[data-content-type='imagegallery'] {
    min-width: 100%;
}

#content.show_article
    .single-content[data-content-type='imagegallery']
    .thumbnail_image {
    cursor: default;
}

.imagegallery_image {
    display: block;
    position: relative;
    margin: 0 6px 6px 0;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: top;
    background: #fff;
    width: 144px;
}

.imagegallery_image:hover {
    background: var(--highlight) !important;
}

.imagegallery_image.selected,
.imagegallery_image.selected:hover {
    background: var(--select) !important;
}

.imagegallery_image.small {
    width: 76px;
}

.imagegallery_image img {
    display: block;
    width: 100%;
}

.imagegallery_image h5 {
    margin: 6px 0 6px;
    word-break: break-all;
}

.imagegallery_image p {
    margin: 6px 0 0;
}

.imagegallery_image .action_icon {
    position: absolute;
    top: 1px;
    right: 1px;
    background: #fff;
    z-index: 1;
    padding: 3px 5px 3px 5px;
    border-radius: 3px;
}

.exportlist {
    padding-left: 20px;
}

.exportlist li {
    position: relative;
}

.exportlist input[type='checkbox'] {
    position: absolute;
    margin-left: -20px;
    top: 1px;
}

.catchword {
    border-radius: 3px;
    display: inline-block;
    padding: 3px 5px;
    margin-bottom: 3px;
    font-size: 95%;
    color: #31708f;
    background-color: #d9edf7;
    cursor: pointer;
}

/*.catchword.machine {
    color: #d9edf7;
    background-color: #3982a6;
}
*/
.catchword i {
    color: inherit;
}

/* ----------------- FAInput -------------------------------------------- */

.ui-dialog-buttonset {
    background-color: lightgrey;
}

.icon-sort-up {
    cursor: pointer;
}

.icon-sort-down {
    cursor: pointer;
}

.fa_list {
    margin-top: 5pt;
    color: #06c;
}

.fa_list LI:first-child {
    font-weight: bold;
    border-bottom-style: solid;
}

.fa_list LI {
    height: 2em;
    padding: 3pt 5pt;
    vertical-align: middle;
    width: 100%;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: black;
}

.fa_active {
    min-width: 6em;
    width: 6em;
    display: inline-block;
    text-align: center;
    padding-right: 0em;
    margin-left: 3em;
}

.fa_roster_visible {
    min-width: 10em;
    width: 10em;
    display: inline-block;
    text-align: center;
    padding-right: 0em;
}

.dataline .icon-check,
.dataline .icon-check-empty {
    padding-left: 0em;
    color: #06c;
    cursor: pointer;
}

.fa_username {
    min-width: 10em;
    width: 10em;
    display: inline-block;
    text-align: left;
}

.fa_name {
    margin-left: 2em;
    min-width: 15em;
    width: 15em;
    display: inline-block;
}

.fa_hours {
    margin-left: 2em;
    min-width: 10em;
    width: 10em;
    text-align: right;
    border-style: solid;
    border-color: white;
    display: inline-block;
}

INPUT.fa_hours {
    min-width: 5em;
    width: 5em;
    text-align: right;
    border-style: solid;
    border-width: 1pt;
    border-color: black;
}

.fa_repeatabs {
    margin-left: 1em;
    margin-right: 0.2em;
    text-align: right;
    border-style: solid;
    border-color: white;
    display: inline-block;
}

.fa_edit,
.fa_cancel {
    margin-left: 0.5em;
    padding: 0pt;
    display: inline-block;
}

.fa_headline h6 {
    align: left;
    margin: 0;
    padding: 4px 6px 3px;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    background: #e3e3e3;
    text-transform: uppercase;
}

.fa_head {
    align: left;
    margin: 0;
    padding: 4px 6px 3px;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    background: #64aad0;
    color: #000000;
}

.dataline {
    min-height: 2em;
    padding: 4px 6px 3px;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    color: #000000;
}

.fa_repeatabs_container {
    white-space: nowrap;
}

.fa_button,
.fa_button:hover {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #10cf07;
}

#id_assigned_to_div h6.separator {
    display: block;
}

#id_assigned_to_div h6.separator:only-child {
    display: none;
}

/* ---------- autocomplete and favourite widgets --------- */

.select2-container > .select2-dropdown {
    z-index: 100000;
}

.searchwidget ~ span.select2-container span.select2-selection__arrow {
    height: 100% !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 34px !important;
    /* font-size: 12px; */
}

.select2-container .select2-selection--single {
    height: 34px !important;
}

.searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.card.meta-card
    span.select2-container
    > .selection
    > span.select2-selection.select2-selection--multiple {
    border: 1px solid var(--border);
}

.searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single:focus,
.card.meta-card
    span.select2-container
    > .selection
    > span.select2-selection.select2-selection--multiple:focus {
    border: 2px solid var(--primaryDefault);
}

.searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single:active,
.card.meta-card
    span.select2-container
    > .selection
    > span.select2-selection.select2-selection--multiple:active {
    border: 2px solid var(--primaryDefault);
}

.searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single {
    height: 34px;
    top: 0;
    position: absolute;
    width: 100%;
    padding-bottom: 10px;
}

.subform
    .required
    .searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.subform .required input.datepicker,
.subform
    .look-required
    .searchwidget
    ~ span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.subform .look-required input.datepicker {
    border-color: var(--warning);
}

.search_form .datepicker[disabled='disabled'],
.search_form .timefield[disabled='disabled'],
.date_offset[disabled='disabled'] {
    background: #f1f1f1;
}

.card > .subform .required label,
.card > .subform .look-required label {
    color: var(--warning);
}

.card.meta-card span.select2-container,
#info-cards span.select2-container {
    width: 100% !important;
    /* select2 inline overwrites the width, so it has to be important */
}

.searchwidget ~ .select2.select2-container.select2-container--default {
    height: max-conten;
    min-height: 34px;
}

.required
    + .searchwidget
    + span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.required.searchwidget
    + span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.look-required
    + .searchwidget
    + span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single,
.look-required.searchwidget
    + span.select2-container
    > .selection
    > span.select2-selection.select2-selection--single {
    border: 1px solid var(--warning);
}

.searchwidget ~ span.select2-container {
    display: inline-block;
    min-width: 10px;
    width: 100% !important;
}

.eo-checkbox-widget.required,
.eo-checkbox-widget.look-required {
    border-color: var(--warning);
}

.first-alphabetic {
    border-top: dashed black 1px;
}

.first-alphabetic::before,
.first-favourite::before {
    color: black;
    font-style: italic;
    font-weight: normal;
    font-size: 10px;
    float: right;
    position: relative;
    top: -0.7em;
}

.first-alphabetic::before {
    content: attr(data-all);
}

.first-favourite::before {
    content: attr(data-favourites);
}

.select2-results__option--highlighted {
    background: var(--primaryDefault) !important;
}

.first-alphabetic.select2-results__option--highlighted::before,
.first-favourite.select2-results__option--highlighted::before {
    color: white;
}

i.department-menu-info.icon-info-sign {
    color: #64aad0;
    margin-left: 5px;
}

i.department-menu-info.icon-info-sign:hover {
    color: #2686bb;
}

.department-info-tooltip {
    font-family: 'Droid Sans';
    visibility: hidden;
    color: white;
    padding: 5px 10px 5px 10px;
    margin: 5px;
    border: 1px solid #2686bb;
    background-color: #64aad0;
    border-radius: 2px;
    position: absolute;
    z-index: 1;
}

i.department-menu-info.icon-info-sign:hover .department-info-tooltip {
    visibility: visible;
}

.department-info-tooltip > .italic {
    font-style: italic;
    padding-left: 5px;
}

.department-info-tooltip-wrapper {
    position: relative;
}

.tooltip {
    visibility: hidden;
    color: white;
    padding: 5px 10px 5px 10px;
    margin: 5px;
    border: 1px solid #2686bb;
    background-color: #64aad0;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    /* there may be 1-indexed elements that are supposed to be behind (like tinymce toolbar) */
    user-select: none;
}

.tooltip-wrapper {
    position: relative;
    overflow: visible !important;
}

.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus .tooltip {
    visibility: visible;
}

.department-option-label {
    margin-left: 15px;
}

.select2-selection .department-option-label {
    margin-left: 0;
    display: inline;
}

.select2-selection .department-publication-label {
    display: inline;
}

.select2-selection .department-publication-label::after {
    content: ': ';
}

.department-publication-label {
    font-weight: 900;
    padding-bottom: 10px;
    display: none;
}

.hide {
    display: none !important;
}

.mce-edit-area {
    max-height: 400px;
    overflow-y: scroll;
}

/* ********************************** */
/* Flex-Styles für die Such-Formulare */
/* ********************************** */

/* Main-Container soll alles enthalten */
.search-flex-main-container {
    display: flex;
    flex-direction: column;
}

/* Mindestend eine Zeile muss enthalten sein */
.search-flex-row {
    display: inline-flex;
    flex-direction: row;
}

/* Das Flex-Item kann direkt Inhalte besitzen  */
.search-flex-item-1 {
    /*flex-grow: 1;
    flex-shrink: 1;*/
    flex: 1;
    padding: 4px;
}

/* Der Button ist wie ein eigenständiges Item zu behandeln */
.search-flex-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 8px;
    margin-right: 4px;
}

/* Subitem ist gedacht um die Positionieren unterhalb von Items etwas granularer zu bestimmen */
.search-flex-subitem-1 {
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Inner Items werden innerhalb von Subitems verwendet, diese gibt es in 3 verschiedenen "Größen" */
.search-flex-item-inner-3 {
    display: flex;
    flex-direction: column;
    flex: 3;
    padding-left: 2px;
    padding-right: 2px;
}

.search-flex-item-inner-2 {
    display: flex;
    flex-direction: column;
    flex: 2;
}

.search-flex-item-inner-1 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ps-task-checker {
    padding: 0 2px;
    display: inline;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    /* needed so it doesn't jump */
}

.ps-task-checker:hover i {
    color: #2686bb;
}

.ps-task-checker:hover i.alfa-blue {
    color: #2686bb;
}

.ps-placed-border {
    border: 2px red solid;
    background-color: red;
    border-radius: 2px;
}

i.alfa-blue,
.hover-blue:hover {
    color: #399fd4;
}

.hovered-task {
    background: var(--highlight) !important;
}

.ps-task-checker.hovered-task {
    border-radius: 1em;
    border: 1px solid #2686bb;
}

span#color-task i[class] {
    color: inherit;
}

/* ------------------- TOOLTIP --------------------- */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #888;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #888 transparent transparent transparent;
    font-weight: normal;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ----------------------------- REACT COMPONENTS --------------------------------- */
/* -------------------------------------------------------------------------------- */

/* ----- Pagination ----- */
#pagination-nav {
    justify-content: center;
}

#pagination-nav > * {
    margin-left: 20px;
}

#pagination-nav > *:first-child {
    margin-left: 0;
}

button.pagination-nav-button {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
}

button.pagination-nav-button:hover > i {
    color: #399fd4;
}

button.pagination-nav-button:disabled > i {
    color: #ccc;
    cursor: default;
}

/* ----- FILTER ----- */
.filterbar {
    display: grid;
    grid-gap: 15px;
    justify-content: space-evenly;
    margin-bottom: 30px;
    margin-top: 15px;
    grid-template-columns: repeat(auto-fill, 300px);
}

.filterbar > .double-date-picker-wrapper {
    grid-column: auto / span 2;
    border-width: 1px !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
    outline: 1px solid var(--border);
}

.filterbar > .double-date-picker-wrapper,
.filterbar #filterbar-container,
.filterbar .EO-dropdown {
    height: 50px;
    font-family: inherit;
}

#filterbar-container {
    margin-bottom: 10px;
}

.filterbar .double-date-picker-wrapper input {
    cursor: text !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
}

.filterbar .double-date-picker-wrapper .MuiInput-underline::before {
    border-bottom: 0 !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
}

#content .filterbar .double-date-picker-wrapper .MuiInput-underline::after {
    border-bottom: 0 !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
}

.filterbar
    .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-multiline.MuiOutlinedInput-multiline {
    height: inherit;
}

.filterbar .MuiFilledInput-root,
.filterbar .MuiFilledInput-root:focus,
.filterbar .MuiFilledInput-root:hover {
    background-color: transparent;
}

.wrapper-title {
    display: block;
    float: left;
    position: relative;
    top: -21px !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
    right: 17px;
    background: var(--background);
    color: rgba(0, 0, 0, 0.54);
    font-weight: bold;
    padding: 0 5px 0 5px;
    white-space: nowrap;
    font-size: 1rem;
    transform: scale(0.75);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.double-date-picker-wrapper:focus .wrapper-title,
.double-date-picker-wrapper:focus-within .wrapper-title,
.double-date-picker-wrapper:hover .wrapper-title {
    color: #399fd4;
}

.double-date-picker-wrapper,
#content .MuiOutlinedInput-root fieldset {
    /* border:                 1px solid rgba(0, 0, 0, 0.23);rgba(0, 0, 0, 0.54); */
}

.double-date-picker-wrapper {
    border-radius: 4px;
    padding: 10px !important;
    /* something keeps overriding this overwise when it's focussed. The browser inspector can't detect what it is, though, so we can't overrule it otherwise*/
}

.double-date-picker-wrapper:hover,
#content .MuiOutlinedInput-root:hover fieldset,
#content .MuiOutlinedInput-root.Mui-focused fieldset {
    border-color: #399fd4;
}

.double-date-picker-wrapper:hover {
    outline: 1px solid #399fd4;
}

#content
    .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-outlined {
    top: -18%;
}

#content
    .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-outlined.MuiFormLabel-root.MuiInputLabel-shrink {
    top: -10%;
}

.double-date-picker-wrapper:focus,
.double-date-picker-wrapper:focus-within {
    border-width: 2px;
    padding: 14px;
    border-color: #399fd4;
    outline: 1px solid #399fd4;
}

label.date-picker-label {
    color: rgba(0, 0, 0, 0.54);
    padding: 4px 10px;
}

form:hover > label.date-picker-label {
    color: #2686bb;
}

.filterbar .EO-dropdown.boxed,
.filterbar .EO-dropdown.boxed.open,
.filterbar .EO-dropdown.boxed.open:hover,
.filterbar .EO-dropdown.boxed.open:focus,
.filterbar .EO-dropdown.boxed.open:active,
.filterbar .EO-dropdown.boxed.open:focus-within,
.filterbar .EO-dropdown.boxed ol {
    border-color: rgba(0, 0, 0, 0.54);
}

.filterbar .EO-dropdown:not(.hide-caption)::before,
.filterbar .EO-dropdown.boxed .dropdown-button,
.filterbar .EO-dropdown.boxed .remove-value i[class] {
    color: rgba(0, 0, 0, 0.54);
}

.filterbar .EO-dropdown.boxed:hover .dropdown-button,
.filterbar .EO-dropdown.boxed:focus-within .dropdown-button,
.filterbar .EO-dropdown.boxed:focus .dropdown-button {
    color: #2686bb;
}

.filterbar .EO-dropdown.boxed .remove-value:hover i[class] {
    color: red;
}

.filterbar .EO-dropdown:not(.hide-caption)::before,
.filterbar .EO-dropdown.boxed .dropdown-button {
    font-weight: bold;
    font-size: 12px;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.filterbar .EO-dropdown input::placeholder {
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
}

.filterbar .facet-container {
    margin-bottom: 15px;
}

/* ----- TASKS ----- */
.task-grid {
    width: 100%;
    display: grid;
    /*                      type               status             assigned_to         due_date           description         trash            */
    grid-template-columns:
        fit-content(200px) fit-content(100px) fit-content(300px)
        fit-content(100px) fit-content(200px) minmax(100px, auto) fit-content(50px);
    margin-bottom: 29px;
}

.task-grid .hide-on-desktop,
.mobile > .task-grid .hide-on-mobile {
    display: none;
}

.mobile > .task-grid .hide-on-desktop,
.task-grid .hide-on-mobile {
    display: flex;
}

.mobile > .task-grid span.hide-on-desktop,
.task-grid span.hide-on-mobile {
    display: inline;
    padding-right: 15px;
}

.mobile > .task-grid {
    /*                      type (icon only)   status (icon only) assigned_to   inform     due_date    placeholder  */
    grid-template-columns:
        fit-content(100px) fit-content(100px) minmax(100px, auto)
        repeat(2, fit-content(100px)) fit-content(40px);
}

.task-processing-overlay {
    background: #ccc;
    opacity: 0.5;
    z-index: 20;
    position: absolute;
    /* width and height are dynamically calculated from parent and added in task_table_row.js: addOverlaySpinner */

    display: none;
    justify-content: center;
    align-items: center;
}

.task-processing-overlay.visible {
    display: flex;
}

.mobile > .task-grid .MuiSelect-selectMenu {
    white-space: normal;
}

.mobile > .task-grid > .task-description {
    grid-column: 1 / -1;
}

.mobile > .task-grid > div {
    padding: 4px;
}

.mobile > .task-grid > div.end-of-line {
    /* flex-direction:         column;
    align-items:            end; */
}

.mobile > .task-grid .task-status-select .MuiInputBase-root {
    max-width: 60px;
}

.task-grid-title {
    grid-column: 1 / 3;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    padding-left: 3px !important;
    display: flex;
}

.mobile > .task-grid > .task-grid-title {
    grid-column: 1 / -2;
}

.task-grid-assigne {
    grid-column: 3 / 4;
}

.task-grid-send-notifications {
    grid-column: 4 / 6;
}

.task-grid-creator-and-description {
    grid-column: 6 / 7;
}

.grid-add-field {
    grid-column: -2 / -1;
}

.mobile > .task-grid > div.task-grid-headline,
.task-grid > div {
    border-top: 1px solid var(--borderLight);
}

.task-grid > div .margin-container {
    padding: 6px 15px;
    display: flex;
    flex-direction: row;
}

/* exchange this for align-items center above */
.task-grid
    > div:not(.task-description):not(.task-edit-icon-container):not(
        .start-of-line
    )
    .margin-container {
    padding-top: 0.5em;
}

/* exchange this for align-items center above */
.task-grid div.start-of-line .margin-container {
    padding-top: 0.7em;
}

.task-underline {
    height: 2px !important;
    background: #999 !important;
    padding: 0 !important;
}

.task-grid > div.task-grid-headline {
    align-items: flex-end;
}

/* .mobile > .task-grid > div.task-grid-headline {
    border-bottom:          1px solid #e7e7e7;
} */
/* .mobile > .task-grid > div {
    border-bottom:          none;
} */
.mobile > .hide-on-desktop .task-grid-title {
    justify-content: space-between;
}

.task-grid > div.start-of-line .margin-container {
    justify-content: start;
    padding-left: 6px;
}

.task-grid > div.end-of-line .margin-container {
    justify-content: end;
    padding-right: 6px;
}

.grid-switch-container {
    margin-top: 12px;
    width: auto;
    min-width: 44px;
    /* slider-width + grid-div-padding */
}

/* MUI SWITCH */
.contextmenu-task .Mui-checked .MuiSwitch-thumb {
    color: #2686bb;
}

.contextmenu-task .MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track {
    background-color: #399fd4;
}

.grid-cell-inline-icon {
    width: 20px;
    margin-right: 5px;
}

.column-descriptor {
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
}

.inline-descriptor {
    padding-right: 15px;
}

.flex-column {
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.editing-cell {
    display: none;
}

.description input {
    width: 100%;
    height: 100%;
}

.editing-cell .MuiInputBase-multiline textarea,
.editing-cell .MuiInputBase-multiline {
    line-height: 1.43;
}

.full-height {
    height: 100%;
}

.full-width,
.full-width > .MuiInputBase-root {
    width: 100%;
}

.placeholder-for-empty {
    color: #999;
}

.select-userprofile {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #2686bb;
}

.MuiButtonBase-root:hover .info-icon {
    color: #2686bb;
}

.card-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
    padding-top: 20px;
}

.card-grid > *:nth-child(3n + 2) {
    margin-left: 50px;
}

.line {
    grid-column: 1 / -1;
    height: 1px;
    background: #ccc;
}

.hide {
    display: none !important;
}

div[role='tooltip'] {
    z-index: 1;
}

div:hover > input[type='text'].invisible-input,
div:focus > input[type='text'].invisible-input,
div:focus-within > input[type='text'].invisible-input {
    color: black;
    transition: all 0.2s ease-in-out;
}

input[type='text'].invisible-input {
    color: transparent;
    align-self: center;
    margin: 0 15px;
    border: none;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

input[type='text'].invisible-input:focus {
    box-shadow: none;
}

.invisible-input-container {
    display: flex;
    flex-direction: row;
    border: none;
    width: 100%;
    height: min-content;
    justify-self: flex-end;
    align-self: end;
    float: right;
    border: 1px solid transparent;
    border-radius: 100px;
    transition: all 0.2s ease-in-out;
}

.invisible-input-container:hover,
.invisible-input-container:focus,
.invisible-input-container:focus-within {
    transition: all 0.2s ease-in-out;
    border: 1px solid #399fd4;
}

.MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-primary {
    background-color: #2686bb;
}

.MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-secondary {
    background-color: #ccc;
}

.invisible-input-container
    .MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-primary:hover,
.invisible-input-container
    .MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-primary:active,
.invisible-input-container
    .MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-primary:focus,
.invisible-input-container button:active:enabled,
.invisible-input-container button:focus,
.invisible-input-container button:active {
    background-color: #399fd4;
}

.MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-secondary:hover,
.MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-secondary:active,
.MuiButtonBase-root.MuiFab-root.MuiFab-extended.MuiFab-primary:focus {
    background-color: #ddd;
}

/*--------------------------------- Material UI ---------------------------------- */

body .MuiBackdrop-root {
    background-color: rgba(0, 0, 0, 0.5);
}

body .MuiPaper-elevation24 {
    box-shadow: none;
}

.MuiDialogActions-root .MuiButton-textPrimary {
    color: #2686bb;
    font-weight: bold;
}

#content .MuiFormLabel-root.Mui-focused {
    color: #399fd4;
}

#content .MuiFormLabel-root.MuiInputLabel-shrink {
    top: -4px;
}

#content .MuiFilledInput-underline:hover::before {
    border-bottom-color: #399fd4;
}

#content .MuiFilledInput-underline::after,
#content {
    border-bottom-color: #2686bb;
}

#content .MuiInput-underline:hover:not(.Mui-disabled)::before {
    border-bottom: 2px solid #2686bb;
}

#content .MuiInput-underline::after {
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    transform: scaleX(0);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    border-bottom: 2px solid #2686bb;
    pointer-events: none;
}

#content .MuiFormControl-root:hover .MuiInputLabel-root {
    color: #399fd4;
}

#content .MuiInputBase-root {
    font-family: inherit;
    font-size: inherit;
}

#content #overlay-card {
    z-index: 1150;
    background: #f8f8f8;
    position: fixed;
    top: 50%;
    left: 70%;
    transform: translate(-70%, -50%);
}

#content .MuiIconButton-root {
    width: 40px;
    height: 40px;
}

.MuiInputBase-root textarea {
    border: none !important;
    box-shadow: none !important;
}

.dash-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(600px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    /*grid-template-rows: repeat(3, calc(33% - 0.4rem));*/
    grid-gap: 1rem;
    height: 100%;
}

.dash-container div.inner {
    overflow-y: scroll;
    /*height:     100%; // führt im Safari zu defekter Darstellung beim initialen Laden des Dashboards.*/
}

/* flex rows */
/*.dash-inner-row {
    display: flex;
    flex-direction: row;
}*/

.dash-inner {
    height: 100%;
}

.react.dash-inner {
    height: minmax(1px, auto);
}

/* grid rows */
.dash-inner-row {
    display: grid;
    grid-template-columns: 14% 9% 4% 9% 4% 18% 10% 17% 11% 4%;
    /* 100% */
    grid-template-rows: auto;
    border-bottom: 1px solid #e1e1e1;
}

.dash-inner-row.odd {
    background: #fcfcfc !important;
}

.dash-inner-row.even {
    background: #ffffff !important;
}

.datatable.grid-template .sectionheader,
.colspan-all {
    grid-column: 1 / -1;
}

div.sectionheader {
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    padding: 39px 6px 6px 3px;
    border-bottom: 1px solid #e1e1e1;
}

div.sectionheader:first-child {
    padding-top: 0px;
}

.dash-inner-row.selectable {
    background: #fff;
}

.dash-inner-row.selectable:hover {
    background: var(--highlight) !important;
}

.dash-inner-row.selectable.selected {
    background: var(--select) !important;
}

/* grid column */
.dash-inner-column {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.dash-inner-column i {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.dash-inner-column.is_overdue {
    color: #c00;
}

.dash-inner-column.is_overdue:first-child {
    border-left: 2px solid #c00;
    color: #c00;
    padding-left: 6px !important;
}

.dash-inner-column {
    padding: 6px;
}

/*.dash-container {
    display: inline-flex;
    flex-direction: row;
}*/

/*.dash-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-template-areas:
    "left-1 right-1"
    "left-2 right-2"
    "left-3 right-3";
}*/

/*.dash-item {
    display: inline-flex;
    padding-left: 4px;
    padding-right: 4px;
    min-width: 800px;
    width: 100%;
}*/

.pixelate_canvas {
    border: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    z-index: 350;
}

.hline {
    width: 100%;
    height: 1px;
    background: var(--borderLight);
}

.dot {
    height: calc(1em - 3px);
    width: calc(1em - 3px);
    border-radius: 50%;
    display: inline-block;
}

/* Facebook Cards Konflikt mit FormRausch Editor ! */
/* .card {
    background: white;
    margin:     30px;
    padding:    20px;
    box-shadow:  0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    border-radius: 4px;
    max-width:  1000px;
}
.card:first-child {
    margin-top: 0px;
}
.card:last-child {
    margin-bottom: 2px;
}
.card > h2 {
    font-size: 24px;
    margin-bottom: 0.7em;
}*/

.facebook-exporter-info {
    cursor: pointer;
    margin-left: 10px;
    max-width: 500px;
}

.fb-info-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;
}

.fb-info-container > div {
    height: 100%;
    overflow-y: auto;
}

.fb-info-container > .nav-sidebar {
    width: 300px;
}

.fb-info ul {
    list-style: disc;
    list-style-position: outside;
    margin-left: 15px;
}

.fb-info li {
    margin-top: 5px;
}

#sort-order-component .MuiSelect-select:focus {
    background: transparent;
}

#sort-order-component .MuiInput-underline::after {
    border-bottom: 2px solid #399fd4;
}

#sort-order-component .MuiInput-underline:hover:not(.Mui-disabled)::before {
    border-bottom: 1px solid #399fd4;
}

#sort-order-component:hover .MuiSelect-select,
#sort-order-component .MuiSelect-select:focus,
#sort-order-component .MuiSelect-select:active,
#sort-order-component .MuiSelect-select:focus-within {
    color: #399fd4;
}

/* ----------- mock up the calendar toolbar without a calendar (for EO-Agenda) ----------- */
.agenda .fc-button-group {
    display: inline;
}

.agenda.fc td {
    border-style: none;
    border-width: 0;
}

.agenda .fc-header-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
}

.agenda .fc-header-right .fc-button-group {
    margin-left: 10px;
}

.agenda .fc-header-right > div {
    margin-bottom: 10px;
}

.agenda .fc-header-center {
    text-align: center;
}

.agenda .fc-header {
    margin-bottom: 1em;
}

.agenda .fc-button-group ~ button {
    margin-left: 0.75em;
}

.agenda ~ .datatable .table-header {
    color: black;
}

.agenda .free-date-picker {
    font-size: 13.3333px;
    font-family: 'Droid Sans';
    padding: 1px 1px 1px 5px;
    height: 2.1em;
    width: 115px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}

/* #filterbar-container.agenda {
    border:         1px solid #ccc;
    box-shadow:     inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    border-radius:  4px;
    margin-bottom:  15px;
    padding:        5px 15px;
} */
#filterbar-container.agenda .closed {
    display: none;
}

#filterbar-container.agenda .open-close-buttons {
    cursor: pointer;
    padding: 10px;
    padding-bottom: 0;
    font-size: 15px;
}

#filterbar-container.agenda button.open-close-buttons {
    border: 0;
    padding-bottom: 12px;
}

#filterbar-container.agenda .open-close-buttons:hover {
    color: #399fd4;
}

#filterbar-container.agenda #filterbar {
    margin: 5px 5px 10px;
}

/*------------------ Autocomplete Dropdown -------------------*/

.EO-dropdown {
    display: grid;
    grid-template-columns: min-content auto min-content min-content;
    align-items: center;
    /* min-width:          150px; */
    max-width: 350px;
    position: relative;
    background: white;
}

#agenda-filters .EO-dropdown {
    max-width: unset;
}

.EO-dropdown.boxed {
    padding: 1px;
    margin: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.EO-dropdown.underlined {
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    margin: 0;
    padding: 0;
    padding-bottom: 1px;
    background: transparent;
}

.EO-dropdown.boxed:hover,
.date-filter:hover {
    padding: 0 1px 0 1px;
    padding-left: 1px;
    /* text will wobble on hover otherwise */
    margin: 1px 0;
    border: 2px solid #399fd4;
}

.facet_filter_container_dateinput > .date-filter:hover,
.facet_filter_container_textinput > input.EO-dropdown[type='text']:hover {
    padding: 3px 12px;
}

.EO-dropdown.underlined:hover {
    padding: 0;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #399fd4;
}

.EO-dropdown.open {
    border-radius: 4px 4px 0 0;
}

.EO-dropdown.boxed.open:hover,
.EO-dropdown.boxed.open:focus,
.EO-dropdown.boxed.open:active,
.EO-dropdown.boxed.open:focus-within {
    padding: 1px;
    margin: 1px;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
}

.EO-dropdown > *,
.EO-dropdown > input[type='text'] {
    border: none;
    box-shadow: none;
    background: transparent;
}

.EO-dropdown > .dropdown-button,
.EO-dropdown > input[type='text'] {
    display: inline-block;
    height: 100%;
}

.EO-dropdown > .dropdown-button {
    margin-right: 2px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    cursor: pointer;
    background: white;
}

.EO-dropdown.underlined > .dropdown-button {
    margin-right: 0;
    background: transparent;
    padding-left: 4px;
    padding-right: 4px;
}

.EO-dropdown:hover > .dropdown-button,
.EO-dropdown:focus > .dropdown-button,
.EO-dropdown:active > .dropdown-button,
.EO-dropdown:focus-within > .dropdown-button {
    margin-right: 0;
    color: #399fd4;
}

.EO-dropdown.boxed.open:hover > .dropdown-button,
.EO-dropdown.boxed.open:focus > .dropdown-button,
.EO-dropdown.boxed.open:active > .dropdown-button,
.EO-dropdown.boxed.open:focus-within > .dropdown-button,
.EO-dropdown.boxed.open > .dropdown-button {
    margin-right: 2px;
}

.EO-dropdown > ol {
    display: none;
}

.EO-dropdown.open > ol {
    display: block;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    border-top: 0;
    z-index: 5;
    /* fullcalendar has z-index 4 for buttons, so they will cut through the dropdown if this is below 5 */
    grid-column-start: 1;
    grid-column-end: 3;
    left: -2px;
    max-height: 50vh;
    overflow-y: auto;
    cursor: pointer;
    box-shadow: -4px 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.EO-dropdown.underlined.open > ol {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.EO-dropdown > .dropdown-button > i[class] {
    color: inherit;
}

.EO-dropdown > .remove-value {
    cursor: pointer;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.EO-dropdown > .remove-value.hidden {
    display: none;
}

.EO-dropdown.underlined > .remove-value {
    background: transparent;
}

.EO-dropdown > .remove-value i[class] {
    color: #ccc;
}

.EO-dropdown > .remove-value:hover i[class] {
    color: red;
}

.EO-dropdown li {
    position: relative;
    padding: 10px;
}

.EO-dropdown li.disabled {
    color: #ccc;
    cursor: default;
}

.EO-dropdown li.selected {
    background: #ccc;
    font-weight: bold;
}

.EO-dropdown li:not(.disabled):hover,
.EO-dropdown li:not(.disabled).focussed {
    background: #f0f0f0;
    color: black;
}

.EO-dropdown li:not([data-list-type='']),
.EO-dropdown li:not([data-list-type='']) {
    border-top: 1px dashed #555;
}

.EO-dropdown .option-label:not([data-list-type=''])::after,
.EO-dropdown .option-label:not([data-list-type=''])::after {
    color: #555;
    content: attr(data-list-type);
    font-size: 0.8em;
    font-style: italic;

    /* we have to move it even further up
    so it's position above the text of the element*/
    position: absolute;
    right: 4px;
    top: -0.3em;
}

.facet_filter_container_textinput,
.facet_filter_container_dateinput {
    position: relative;
}

.EO-dropdown:not(.hide-caption)::before,
.facet_filter_container_textinput:focus-within::before,
.facet_filter_container_dateinput::before {
    float: left;
    background: linear-gradient(180deg, transparent 50%, white 50%);
    content: attr(data-title);
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    top: -11px;
    left: 5px;
    color: #aaa;
    padding: 0 3px;
    opacity: 1;

    -webkit-transition: opacity top 0.5s ease-in-out;
    -moz-transition: opacity top 0.5s ease-in-out;
    transition: opacity top 0.5s ease-in-out;
}

.agenda .EO-dropdown:not(.hide-caption)::before,
.agenda .facet_filter_container_textinput:focus-within::before,
.agenda .facet_filter_container_dateinput::before {
    background: linear-gradient(180deg, var(--background) 50%, white 50%);
}

.EO-dropdown.underlined::before {
    font-size: 0.8em;
    background: transparent;
    padding: 0;
}

.EO-dropdown.underlined:not(.open):hover::before {
    margin-top: 1px;
}

.EO-dropdown:not(.open):hover::before {
    top: -12px;
    color: #399fd4;
}

.facet_filter_container_textinput:focus-within::before,
.facet_filter_container_dateinput::before {
    top: -8px;
    z-index: 10;
}

.EO-dropdown[value='']:not(.open)::before,
.EO-dropdown:not([value]):not(.open)::before,
.facet_filter_container_textinput::before {
    opacity: 0;
    -webkit-transition: opacity top 0.5s ease-in-out;
    -moz-transition: opacity top 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

input.EO-dropdown[type='text']:focus {
    box-shadow: none;
}

.date-filter {
    border-radius: 4px;
    border: 1px solid #ccc;
}

.facet-container {
    margin: 0 0 10px 0;
}

.facet {
    display: inline-flex;
    height: 32px;
    border-radius: 16px;
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.facet {
    margin-right: 10px;
    margin-top: 10px;
}

.facet > span:not(.facet-action) {
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 150px;
}

.positive-facet {
    background: #399fd4;
}

.negative-facet {
    background: #c00;
}

.facet-action > i[class],
.facet-action > svg[class] {
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 20px;
    margin-top: 2px;
    width: 20px;
}

.remove-facet:hover > i[class],
.remove-facet:hover > svg[class] {
    color: rgba(255, 255, 255);
}

.turn-facet-positive:hover > i[class] {
    color: #399fd4;
}

.turn-facet-negative:hover > i[class] {
    color: #c00;
}

.remove-facet {
    margin-right: 8px;
    margin-top: 2px;
}

.agenda .remove-facet {
    margin-top: -5px;
}

.turn-facet {
    margin-left: 8px;
}

.facet-connector {
    display: flex;
    flex-direction: row;
}

#apply-filter-button {
    position: relative;
    right: 0;
    align-self: flex-end;
    background: #2686bb;
    border-color: #2686bb;
    color: white;
    margin-bottom: 1px;
    /* match with filter dropdowns */
    height: 34px;
    grid-column-start: -2;
}

#facet-connector-agenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
}

.select-item-inline-icon {
    margin-right: 10px;
}

.invisible {
    display: none;
}

.MuiInputLabel-shrink {
    background: transparent;
}

.agenda .MuiInputLabel-shrink {
    background: linear-gradient(180deg, transparent 50%, white 50%);
}

.facet_filter_container_textinput,
.facet_filter_container_dateinput {
    padding-right: 2px;
}

.facet_filter_container_textinput > input.EO-dropdown[type='text'],
.facet_filter_container_dateinput > .date-filter {
    padding: 4px 13px;
    margin: 1px 0;
    height: 32px;
    width: 100%;
}

.facet_filter_container_dateinput > .date-filter[value=''] {
    color: #ddd;
}

.facet_filter_container_dateinput > .date-filter[value='']:focus {
    color: inherit;
}

/* ------------------- TOPIC DIALOG -------------------- */
.dialog_body #id_editorialoffices,
.dialog_body #id_channels_div > ul,
.eo-checkbox-widget {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    overflow: auto;
    max-height: 150px;
}

.dialog_body #id_editorialoffices > div > label,
.dialog_body #id_channels_div > ul > li {
    font-weight: bold;
}

#abo_dialog_title {
    font-size: 24px;
    font-weight: bold;
    padding: 12px;
    border-bottom: 1px solid #ccc;
}

#abo_dialog_info {
    padding: 12px;
    margin-bottom: 12px;
}

.abo_dialog_info_list {
    list-style-type: disc;
    padding-left: 26px;
}

.abo_dialog_info_list_item {
    color: #555;
}

.tab {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-flow: nowrap;
    /* prevent tabs from line-breaking while the div is opening */
}

/* Style the buttons inside the tab */
.tab a {
    align-items: center;
    background-color: var(--tab-background);
    color: var(--fontColorSurfaceLight);
    text-transform: uppercase;
    display: flex;
    float: left;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 12px;
    height: 64px;
    justify-content: center;
    line-height: 64px;
    letter-spacing: 1px;
    transition: 0.3s;
    cursor: pointer;
}

.tab a:hover i {
    color: var(--main-blue);
}

.tab a.placeholder {
    cursor: default;
}

.tab_icon {
    vertical-align: middle;
}

.tab a.tablinks.active {
    background-color: #fff;
}

.ps-subform ~ .subform-add-button {
    display: block;
    float: right;
    padding: 5px 0;
}

/* .dialog_body.has_tabs {
    overflow-x:         hidden;
} */

.menu_icon {
    font-size: 20px;
    padding-right: 4px;
    margin-top: -2px;
    vertical-align: middle;
}

.cal-task-info:not(:last-child) {
    margin-right: 2px;
}

.full-table-container {
    height: 100%;
}

.full-table-container .card {
    height: calc(100% - 60px);
    padding: 0;
}

.full-table-filter-container {
    line-height: 40px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    display: inline-flex;
}

.full-table-container.search-table .full-table-filter-container {
    display: none;
}

.readonly-form-value {
    font-weight: bold;
    display: block;
}

#redate-dialog-fields {
    display: flex;
    flex-direction: row;
}

#redate-dialog-fields .timefields,
#redate-dialog-fields .delta,
#redate-dialog-fields .toggle-datepickers,
#redate-dialog-fields.show-timefields .timefields > span {
    display: inline;
}

#redate-dialog-fields .timefields,
#redate-dialog-fields .delta {
    flex: 1;
}

#redate-dialog-fields.show-delta .timefields {
    display: none;
}

#redate-dialog-fields.show-timefields .delta {
    display: none;
}

#redate-dialog-fields .toggle-datepickers {
    flex: initial;
    height: min-content;
    padding: 4px 10px 5px 10px;
    margin-top: 29px;
    margin-left: 4px;
}

#redate-dialog-fields .toggle-datepickers > svg {
    width: 20px;
}

.redate-dialog-fields-errors {
    color: #ad0000;
    display: flex;
    flex-direction: column;
}

#login-link button {
    width: 100%;
    min-height: 64px;
    margin-top: 12px;
    font-size: 1.3em;
}

#login-link button:hover {
    background: #f9f9f9;
}

.flex-center-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-height-width {
    height: 100%;
    width: 100%;
}

svg.topic-appointment-marker {
    fill: #9e9e9e;
    max-width: 18px;
}