/*
 * 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(239, 246, 255);
  --select: rgb(219, 234, 254);

  --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;
}

.fa_menu_icon {
  fill: #9e9e9e;
  margin-right: 2px;
  margin-left: 3px;
  width: 1em;
  height: 1em;
  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;
}

.look-like-link {
  color: #0078b7;
  text-decoration: none;
  cursor: pointer;
}

/* Publication Calendar Datepicker Styles */
.ui-datepicker td.blocked-date,
.ui-datepicker td.non-publication-date {
  background-color: #f5f5f5;
}

.ui-datepicker td.blocked-date a,
.ui-datepicker td.non-publication-date a {
  color: #999;
  text-decoration: line-through;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.ui-datepicker td.publication-date a {
  background-color: #e8f5e9;
  color: #2e7d32;
  font-weight: bold;
}

.ui-datepicker td.blocked-date:hover a,
.ui-datepicker td.non-publication-date:hover a {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Flatpickr Holiday Styling - light gray filled square like "today" */
.flatpickr-day.is-holiday:not(.selected):not(.startRange):not(.endRange):not(.today) {
  background: #e5e7eb !important;
  border-color: #e5e7eb !important;
  border-radius: 4px !important;
}

.flatpickr-day.is-holiday:not(.selected):not(.startRange):not(.endRange):not(.today):hover {
  background: #d1d5db !important;
  border-color: #d1d5db !important;
}