@font-face {
  font-family: "OpenSans Light";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/OpenSans/OpenSans-light.woff") format("woff");
}

@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/OpenSans/OpenSans.woff") format("woff");
}

@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/OpenSans/OpenSans-bold.woff") format("woff");
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body,
input,
select,
textarea {
  font-family: "OpenSans", "Droid Sans", Arial, Helvetica, sans-serif;
  background-color: white;
}

input,
option,
select,
textarea {
  font-size: 16px;
  height: 30px;
  margin: 4px;
  padding: 0px 4px;
  vertical-align: middle;
  border: solid 1px #e5e5e5;
  background-color: #f7f7f7;
  color: #000000;
  resize: none;
  border-radius: 0px;
}
.edit-input {
  width: 100%;
  padding: 4px;
}
.edit-header {
  padding-bottom: 5px;
  padding-top: 10px;
}
input[type="time"] {
  font-size: 30px;
  height: 40px;
}
input[type="file"] {
  font-size: 18px;
}

.hidden {
  display: none;
}
.file-holder {
  padding: 0;
}
.file-holder .image-file {
  border-radius: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

select {
  padding: 0px;
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

textarea,
input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body.offline > *:not(.offline-clear) {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px);
}

.offline-block {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 100030000;
}
.offline-panel {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 24px;
  padding: 12px;
  position: relative;
  top: 100px;
  margin: auto;
  width: 250px;
  color: white;
  text-align: center;
}
.offline-header {
  font-family: OpenSans;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
}

.offline-image {
  background-image: url(../images/disconnect.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;

  width: 100%;
  height: 102px;
  border-bottom: 1px solid white;
  margin-bottom: 5px;
}
.offline-message,
.offline-progress {
  font-size: 18px;
  font-family: "OpenSans";
}
.offline-progress {
  margin-top: 20px;
}
.offline-progress-indicator {
  margin-top: -18px;
  height: 48px;
  font-size: 40px;
  font-family: "OpenSans";
}

#overview {
  position: static;
  position: -moz-sticky;
  position: -webkit-sticky;
  position: sticky;
  top: 46px;
  z-index: 2;
  background-color: white;
}
.day {
  font-weight: normal;
  text-align: center;
  font-size: 16px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  height: 31px;
  overflow: hidden;
  color: #2d3a43;
}

table.timeInput {
  border-spacing: 0px;
  border: none;
  margin: 0px;
  padding: 0px;
}
table.timeInput td {
  border: none;
  margin: 0px;
  padding: 0px;
}
.timeInput input {
  margin: 0px;
  padding: 0px;
}
.timeInput .minus {
  background-image: url(../images/timeMinusInactive.png);
  background-size: cover;
  width: 30px;
  height: 26px;
  display: inline-block;
}

.timeInput .plus {
  background-image: url(../images/timePlusInactive.png);
  background-size: cover;
  width: 30px;
  height: 26px;
  display: inline-block;
}
#durationPH {
  display: inline-block;
  margin: auto;
}
#inlineEditor {
  text-align: center;
}

.dayName {
  color: #b0b0b0;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-weight: normal;
  padding-top: 9px;
}

.past .day {
  color: #b0b0b0;
}

.calEntry {
  background-color: white;
}

.calEntry.noBorder {
  background-image: none;
}

.calEntry {
  background-image: url(../images/mini-calendar-border.svg);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: right;
}

.calEntry.weekend .day {
  color: #808080;
}
.calEntry .day {
  box-sizing: border-box;
  padding-top: 7px;
  font-size: 14px;
}
.calEntry.current-month .day {
  padding-top: 6px;
  font-size: 16px;
}
#ugeSkemaHeader th {
  /* is off by 1 pixel
	background-image:url(../images/mini-calendar-border.svg);
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: right;
*/
}
#ugeSkemaHeader th.noBorder {
  background-image: none;
}
#ugeSkemaHeader th.weekend {
  color: #e0e0e0;
}
#ugeSkemaHeader .day {
  padding-bottom: 0px;
  padding-top: 12px;
  margin-top: -3px;
  margin-left: 1px;
  margin-right: 1px;
}

table.eventTable #ugeSkemaHeader th:not(.time) {
  border: solid 1px #eeeeee;
  background-color: white;
  border-bottom: none; /* solid 2px #90c26b; */
  border-right: 0px;
  width: 13%;
}
table.eventTable #ugeSkemaHeader th.today .day {
  /* background-image: url(../images/today-marker.svg); */
  background-image: url(../images/today-marker-darkmode.svg);
  background-repeat: no-repeat;
  background-position: center;
  color: white;
}

table.eventTable #ugeSkemaHeader th.weekend .day {
  color: #808080;
}
table.eventTable,
table.eventTable tr,
table.eventTable td {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

.borderSlot {
  height: 39px;
}
table #ugeSkema {
  border-spacing: 0;
}
table #ugeSkema tr.timeslot td {
  border-left: solid 1px #eeeeee;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-bottom: solid 1px #eeeeee;
}
table #ugeSkema tr.timeslot.full td {
  border-left: solid 1px #eeeeee;
  border-bottom: solid 1px transparent;
}

table #ugeSkema tr.timeslot td:first-child {
  border: solid 1px transparent;
}
table #ugeSkema tr.timeslot.full td:first-child {
  border: solid 1px transparent;
}

#calOverview li.active {
  background-color: #eeeeee;
  /*
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
	*/
  position: relative;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 20%;
}
#calOverview a.today .day {
  background-image: url(../images/today-marker-darkmode.svg);
  background-repeat: no-repeat;
  background-position: center;
  color: white;
}

#calOverview li.active a {
  background-image: url(../images/selected-day-marker.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
}

#calOverview-wrapper {
  position: relative;
  width: 320px;
  height: 64px;
  margin: 0 auto;
  background: #f0f0f0;
  overflow: hidden;
}

#calOverview-controls {
  padding: 5px;
  font-size: 12px;
  color: #1b1b1b;
  background-color: white;
}
#calOverview-controls .calOverview-selected-week {
  border-radius: 5px;
  text-align: center;
  padding: 6px;
  background-color: #eeeeee;
}
#calOverview-controls .calOverview-selected {
  display: inline-block;
  font-family: "OpenSans";
  text-align: left;
  border: 0px;
  border-radius: 0;
}
#calOverview-controls
  .calOverview-selected
  .calOverview-month-selection
  .month-selection-today {
  font-weight: bold;
}
#calOverview-controls .calOverview-navigation {
  display: inline-block;
  position: absolute;
  right: 5px;
  padding-top: 8px;
}
#calOverview-controls .calOverview-navigation .calOverview-previous-week,
#calOverview-controls .calOverview-navigation .calOverview-goto-today,
#calOverview-controls .calOverview-navigation .calOverview-next-week {
  color: white;
  /* background: linear-gradient(2deg, #1b7649 -20%, #4fa15b 49.9%, #9de176 120%); */
  background: #4c9e5a;
  border-radius: 5px;
  text-align: center;
  padding: 6px;
}
#calOverview-controls .calOverview-navigation .calOverview-previous-week {
  /* background-image: url(../images/left-arrow-big-white.svg), */
  /* background-image: url(../../../src/resources/icons/icon_chevron_left_white.svg),
    linear-gradient(2deg, #1b7649 -20%, #4fa15b 49.9%, #9de176 120%); */
  background-image: url(../../../src/resources/icons/icon_chevron_left_white.svg);
  background-repeat: no-repeat;
  background-position: 43% center;
}
#calOverview-controls .calOverview-navigation .calOverview-next-week {
  /* background-image: url(../images/right-arrow-big-white.svg), */
  /* background-image: url(../../../src/resources/icons/icon_chevron_right_white.svg),
    linear-gradient(2deg, #1b7649 -20%, #4fa15b 49.9%, #9de176 120%); */
  background-image: url(../../../src/resources/icons/icon_chevron_right_white.svg);
  background-repeat: no-repeat;
  background-position: 57% center;
}

canvas {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
#calOverview {
  /*	width: 3200px; */
  /*	width:1344px; /* 64 * 21 */
  /* width:896px; */
  height: 62px;
  -ms-touch-action: none;
}

#calOverview li {
  display: block;
  float: left;
  width: 64px;
  height: 62px;
}

#calOverview li a {
  display: block;
  height: 62px;
  /*		line-height: 160px; */
  text-align: center;
  margin: 0px;
  /*
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
    */
  /*    border-left:solid 1px #ccc;*/
  /*    border-top:solid 1px #ccc; */
  /*	border-bottom:solid 2px #90c26b; */
  border-bottom: solid 1px #d8d8d8;
}

#calOverview li:last-child a {
  border-right: solid 1px #ccc;
}

/* AGENDA VIEW */
#agendaView {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 60px;
}
#agendaView > * {
  margin: 0px;
}

.agenda-menu-header > div {
  border: 1px solid rgba(0, 0, 0, 0.02);
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 50%);
  vertical-align: unset;
  font-size: 16px;
}

.agenda-menu-header > .agenda-menu-active {
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: white;
  color: green;
  box-shadow: none;
}

.agenda-menu-header-day {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  padding-left: 22px;
  padding-right: 18px;
}
.agenda-menu-header-week {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  padding-left: 18px;
  padding-right: 22px;
}
#agendaView .agenda-week-table {
  width: 100%;
  background: white;
  border-collapse: collapse;
}
#agendaView .agenda-week-table tr {
  height: 80px;
}
#agendaView .agenda-week-table tr td {
  width: calc(100% / 7);
  border-top: 1px solid #cecece;
  border-left: 1px solid #cecece;
}
#agendaView .agenda-week-table tr:last-child td {
  border-bottom: 1px solid #cecece;
}
#agendaView .agenda-week-table tr td:first-child {
  font-size: 12px;
  border-left: none;
  vertical-align: initial;
}
#agendaView .agenda-week-table tbody.column-selected-0 tr td:nth-child(1),
#agendaView .agenda-week-table tbody.column-selected-1 tr td:nth-child(2),
#agendaView .agenda-week-table tbody.column-selected-2 tr td:nth-child(3),
#agendaView .agenda-week-table tbody.column-selected-3 tr td:nth-child(4),
#agendaView .agenda-week-table tbody.column-selected-4 tr td:nth-child(5),
#agendaView .agenda-week-table tbody.column-selected-5 tr td:nth-child(6),
#agendaView .agenda-week-table tbody.column-selected-6 tr td:nth-child(7) {
  background-color: #eeeeee;
}

#agendaView .week-event-wrapper {
  height: 30px;
  width: calc(100% / 7 - 1px);
  position: absolute;
  box-sizing: border-box;
  padding-left: 0px;
  padding-right: 0px;
}
#agendaView .week-event-wrapper .week-event {
  opacity: 0.95;
  overflow: hidden;
  box-sizing: border-box;
}
#agendaView .week-event-wrapper .week-event > .title {
  padding: 2px;
  word-break: break-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}
#agendaView .week-event-wrapper .agenda-week-repeat-icon {
  font-size: 7px;
}

#ungSelect .userList {
}
#ungSelect .userList .userCard.selected {
  /*background-color: #DEDEDE;*/
  font-family: OpenSans;
}
#ungSelect .userList .userCard {
  position: relative;

  border-bottom: 10px solid #eeeeee;
  padding: 10px;
  padding-left: 100px;
  text-align: left;
  min-height: 80px;
}

.userCard .username {
  font-size: 13px;
}

#ungSelect .profile-image-border {
  /*border-right: 1px solid #2D3A43;*/
  padding-right: 10px;

  position: absolute;
  top: 10px;
  left: 10px;
  height: 106px;
  width: 80px;
}
#ungSelect .profile-image-placer {
  position: relative;
  height: 100%;
  width: 100%;
}

.state-bins {
  margin-top: 5px;
  border-collapse: collapse;
  border-spacing: 0;
}
.state-bin {
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  border: 1px solid #d0d0d0;
  color: white;
}
.state-bin.done {
  background-color: #4c9e5a;
}
.state-bin.empty {
}
.state-bin.planned {
  /*background-color: #b1b1b1;*/
  color: #2d3a43;
}
.state-bin.clear {
  background-color: #f0f0f0;
  /*border: none;*/
}
.state-bin.clear.before {
  border-top-color: #f0f0f0;
  border-left-color: #f0f0f0;
}
.state-bin.clear.after {
  border-bottom-color: #f0f0f0;
  border-right-color: #f0f0f0;
}

.agenda-event {
  color: #2d3a43;
}
.agenda-event,
.agenda-empty {
  -ms-touch-action: pan-y;
}
.agenda-event-wrapper {
  position: relative;
  border-bottom: 5px solid #eeeeee;
  background-color: #ffffff;
}
.agenda-event-wrapper.planned .agenda-time-bar {
  background-color: #e0e0e0;
  visibility: hidden;
}

.agenda-event-wrapper.cancelled .agenda-time-bar {
  visibility: hidden;
}
.agenda-event-wrapper.cancelled .agenda-time-bar {
  visibility: hidden;
}

.agenda-event-wrapper.past {
  /*	background-color: #DEDEDE; */
  opacity: 1;
}

.agenda-event-wrapper.past .agenda-event {
  opacity: 0.6;
}

.agenda-event-wrapper.now {
  /*    background-color: #e4fbe4; */
}

.agenda-header {
  padding-right: 50px;
  line-height: 0px;
}
/*
.agenda-event-wrapper:not(:last-child) {
    border-bottom: 1px solid #e3e3e3;
}
*/
.agenda-title {
  display: inline-block;
}
.agenda-title-check-timestamp {
  display: block;
}
.agenda-title-check-timestamp,
.agenda-check-timestamp {
  color: #2d3a43;
  font-size: 12px;
}
#agendaView .agenda-empty {
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  color: #a0a0a0;
  letter-spacing: 0;
  text-align: center;
}
.agenda-event .agenda-title-wrapper {
  white-space: nowrap;
  padding-bottom: 10px;
  word-break: break-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.agenda-event .agenda-title,
.agenda-empty {
  font-family: OpenSans;
  font-size: 18px;
  line-height: 18px;
  white-space: normal;
  vertical-align: text-top;
  color: #1b1b1b;
}
.agenda-event .agenda-title-wrapper .edit-icon {
  font-size: 22px;
  line-height: 22px;
  white-space: normal;
  vertical-align: text-top;
}
.agenda-event .agenda-time-bar {
  line-height: 0px;
}
.agenda-event .down-icon {
  vertical-align: middle;
  margin-right: 4px;
  height: 10px;
  width: 10px;
  display: inline-block;
}

.agenda-event .agenda-time {
  float: right;
  vertical-align: middle;
  text-align: center;
  margin-top: -4px;
}

.agenda-icon-alarm {
  display: inline-block;
  margin: 2px;
  margin-left: 3px;
  height: 16px;
  width: 13px;
  vertical-align: middle;

  /* background-image: url(../images/activity-icon-alarm.svg); */
  background-image: url(../../../src/resources/icons/icon_bell_small.svg);
}

.agenda-event .images {
  line-height: 0;
}
.agenda-event .image {
  margin-bottom: 10px;
  margin-right: 10px;

  max-width: 100px;
  max-height: 100px;
  border-radius: 5px;
  transition: all 0.2s;
}

.agenda-event .image.full {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
}

.actions {
  z-index: 1;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0;
}

#editorView,
#agendaView {
  position: relative;
  z-index: 1;
}

.actions .action {
  opacity: 0.8;
  outline: none;
  position: relative;
  padding: 0 0 1px;
  width: 2.5em;
  height: 2.5em;
  font-size: 20px;
  border-radius: 50%;
  text-align: center;
  background-color: #4c9e5a;
  margin: 10px 10px 10px 0;
  border: 2px solid #4c9e5a;
  color: white;
  box-shadow: 0 1px 5px 0 black;
}
.actions .action[disabled] {
  background-color: #a0a0a0;
  border-color: #a0a0a0;
}

.list-icon-type {
  margin-right: 10px;
  height: 26px;
  width: 26px;
  background-size: cover;
}
.list-icon-type.description {
  background-image: url(../images/icon-default.png);
}
.list-icon-type.list {
  background-image: url(../images/icon-list.png);
}
.agenda-icon-chat {
  height: 46px;
  width: 20px;
  /* background-image: url(../images/icon-chat.svg); */
  background-image: url(../../../src/resources/icons/icon_chat_filled.svg);
  /* background-size: 20px 18px; */
  background-size: 20px 24px;
  background-position: 0px 11px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.agenda-icon-chat.images {
  /*	background-image: url(../images/chat-image-icon.png); */
}
.agenda-icon-chat.inactive {
  /* background-image: url(../images/icon-chat-empty.svg); */
  background-image: url(../../../src/resources/icons/icon_chat.svg);
}
.agenda-icon-chat-unread-count {
  width: 12px;
  height: 12px;
  background-color: #ee4738;
  border-radius: 100px;
  position: relative;
  top: 9px;
  left: 12px;

  color: white;
  font-size: 9px;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 12px;
}
.agenda-icon-chat-unread-count.no-unread {
  display: none;
}
.agenda-icon-chat-unread-count.many-unread {
  /* we use a + sign when there are many unread messages.
     it just looks a lot smaller than the digits, so we make it a bit bigger here
   */
  font-size: 11px;
}
.agenda-seperator {
  height: 20px;
  width: 1px;
  background-image: url(../images/seperator.svg);
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  margin-left: 15px;
}

.agenda-chat-button,
.agenda-edit-button {
  display: inline-block;
}
.agenda-event .agenda-section,
.agenda-event .agenda-section a {
  /*margin-left: 18px;*/
  /*margin-top: 10px;*/
  /*color: #666666;*/
  font-size: 13px;
  font-family: "OpenSans";
  /*padding-bottom: 10px;*/
  color: #767676;
}

.agenda-event .agenda-start,
.agenda-event .agenda-end {
  vertical-align: middle;
}
.agenda-event .agenda-start {
  line-height: 13px;
  font-size: 13px;
  color: #1b1b1b;
}

.agenda-event .agenda-end {
  margin-top: 5px;
  line-height: 10px;
  font-size: 10px;
  color: #767676;
}

.agenda-event-checked .agenda-section,
.past .agenda-section {
  display: none;
}
.agenda-event-checked .agenda-title-text {
  text-decoration: line-through;
}

.active .agenda-event .agenda-section {
  display: block;
}

.agenda-title-text {
  display: inline-block;
}

.agenda-title-text-label {
  display: inline-block;
  color: white;
  border-radius: 50px;
  padding: 0px 10px;
  margin: 2px;
  font-size: 12px;
  line-height: 18px;
  vertical-align: text-bottom;
}

.agenda-title-text-label.label-cancelled {
  background-color: #ee4738;
}
.agenda-title-text-label.label-planned,
.agenda-title-text-label.label-changed {
  background-color: #8d8d8d;
}

.agenda-title-text-tts {
  display: inline-block;
  vertical-align: middle;
}

.agenda-content-description {
  display: inline-block;
  white-space: pre-line;
  word-break: break-word;
}
.agenda-content-description-tts {
  display: inline-block;
  vertical-align: middle;
  padding-left: 4px;
  font-size: 17px;
}

.agenda-event ul.agenda-section {
  list-style-type: none;
}

[class^="agenda-color-"],
[class*=" agenda-color-"] {
  border-left: 10px solid transparent;
}

.agenda-day-menu {
  position: fixed;
  bottom: 0px;
  width: 95%;
}
.checked {
  text-decoration: line-through;
}
.agenda-checklist-title-tts {
  vertical-align: middle;
  padding-left: 3px;
  font-size: 16px;
}

/* MENU */

.menu {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 2px;
  z-index: 100002;
  background-color: #9de176;
  bottom: 0px;
  background-image: linear-gradient(
    2deg,
    #1b7649 -30%,
    #4fa15b 50%,
    #9de176 130%
  );
  /*
    transition: left 0.1s;
    -moz-transition: width 0.1s;
    -webkit-transition: left 0.1s;
    -o-transition: width 0.1s;
    */
  /*	background-image: url(../images/bgTile_wide.png);
	background-color:#545963;
	background-size:100%;
	*/
  /*
	-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);

    */
}

.menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
.menuHeader {
  margin: auto;
  text-align: center;
  color: white;
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
}
ul.menulogout {
  position: absolute;
  bottom: 0px;
  background-color: #e03d29;
  z-index: 100003;
}
.menuLogout:active {
  background-image: url(../images/logoutActive.png);
}
.menuUsername {
  color: white;
  text-align: center;

  padding: 3px;
  font-size: 14px;
  overflow: hidden;
  padding-top: 20px;
}

.menuUsername .userdata {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
}

.menuUsername .name,
.menuUsername .username {
  font-family: "OpenSans";
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.menuUsername .profile-image-placer {
  position: relative;
  height: 80px;
}
.profile-image {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
/*
.animClass {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
*/

.menu li {
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  height: 70px;
  padding: 0px;
  font-size: 13px;
  cursor: pointer;
  color: black;
  line-height: 20px;
  padding-top: 20px;

  background-color: white;
  margin: 5px;
  border-radius: 5px;
  flex: 0 0 96px;
  text-align: center;
}

.menu li div {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  /* margin-top: 20px; */
}
.menu li.active {
  color: white;
  /*	background-image: url(../images/menuActive_tile.png); */
  /* background-color: rgb(143, 194, 107); */
  background-color: #1b7649;
}

.menu ul li img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.menu-icon {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 40px;
  background-size: cover;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-right: 10px;
}

.menuAction {
  position: relative;
}

.active .minDag {
  background-image: url(../images/minDag_active.png);
}
.active .minUge {
  background-image: url(../images/minUge_active.png);
}
.active .kontakt {
  background-image: url(../images/kontakt_active.png);
}

.active .plan {
  background-image: url(../images/plan_active.png);
}
.active .afslut {
  background-image: url(../images/afslut_active.png);
}

.logout:active {
  background-image: url(../images/logout_active.png);
}

.minDag {
  background-image: url(../images/minDag_inactive.png);
}
.minUge {
  background-image: url(../images/minUge_inactive.png);
}
.kontakt {
  background-image: url(../images/kontakt_inactive.png);
}

.plan {
  background-image: url(../images/plan_inactive.png);
}
.afslut {
  background-image: url(../images/afslut_inactive.png);
}

.logout {
  background-image: url(../images/logout_inactive.png);
}

.main {
  z-index: 2;
  position: relative;
}

/*
.main-right {
    -webkit-transition:all 0.2s linear;
    -webkit-transform: translate3d(270px, 0px,0px);
    -ms-transition:all 0.2s linear;
    -ms-transform: translate3d(270px, 0px,0px);
}
*/
.menu-right {
  -moz-transition: all 0.2s linear;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transition: all 0.2s linear;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -ms-transition: all 0.2s linear;
  -ms-transform: translate3d(0px, 0px, 0px);
}

.main-left {
  -moz-transition: all 0.2s linear;
  -moz-transform: translate3d(-100%, 0px, 0px);
  -webkit-transition: all 0.2s linear;
  -webkit-transform: translate3d(-100%, 0px, 0px);
  -ms-transition: all 0.2s linear;
  -ms-transform: translate3d(-100%, 0px, 0px);
}

.menu-disabled {
  -moz-transition: all 0.2s linear;
  -moz-transform: translate3d(-100%, 0px, 0px);

  -webkit-transition: all 0.2s linear;
  -webkit-transform: translate3d(-100%, 0px, 0px);
  -ms-transition: all 0.2s linear;
  -ms-transform: translate3d(-100%, 0px, 0px);
}

ul.toolbar {
  list-style-type: none;
}
ul.toolbar li {
  display: inline-block;
}

.tab-left {
  height: 40px;
  width: 50%;
  background-size: cover;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  background-color: #2d3a43;
  border-top: solid 1px #2d3a43;
  font-family: OpenSans;
}
.tab-left.active {
  color: #2d3a43;
  background-color: white;
  border-top: solid 1px #dcdcdc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab-right.active {
  color: #2d3a43;
  background-color: white;
  border-top: solid 1px #dcdcdc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab-right {
  height: 40px;
  width: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  background-color: #2d3a43;
  border-top: solid 1px #2d3a43;
  font-family: OpenSans;
}

ul.bullets {
  padding-left: 5px;
}
.bullets li {
  list-style-type: none;
  margin-bottom: 6px;
}

.bullets li.hovered {
  border-top: 2px dashed black;
}
.bullets li.hoveredAfter {
  border-bottom: 2px dashed black;
}

.icon,
[class^="icon-"],
[class*=" icon-"] {
  vertical-align: middle;
  width: 14px;
  height: 14px;
  display: inline-block;
}
.icon-user {
  background: url("../images/glyphicons-halflings.png") -168px 0;
}
.icon-time {
  background: url("../images/glyphicons-halflings.png") -48px -24px;
}
.icon-list-alt {
  background: url("../images/glyphicons-halflings.png") -264px -24px;
}
.icon-info-sign {
  background: url("../images/glyphicons-halflings.png") -120px -96px;
}
.icon-align-left {
  background: url("../images/glyphicons-halflings.png") -264px -48px;
}
.icon-list {
  background: url("../images/glyphicons-halflings.png") -360px -48px;
}

.icon-delete {
  margin-right: 5px;
  width: 22px;
  height: 22px;
  background-image: url(../images/delete.svg);
  background-size: 100%;
}

.icon-menu {
  margin-left: 5px;
  background-image: url("../images/sort.png");
  width: 29px;
  height: 22px;
  background-size: 100%;
}

#header {
  /*
	background-image: url(../images/menuLeft.png),  url(../images/menuRight.png);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
	padding-left:5px;
	padding-right:5px;
	*/
  /*	position:fixed;
	z-index:14237819;
	*/
}
/* ---- top menu -- */
.pageMenu {
  background: linear-gradient(2deg, #1b7649 -20%, #4fa15b 49.9%, #9de176 120%);

  color: #ffffff;

  background-color: #9de176;
  color: white;
  /*
	background-image: url(../images/menuHeader_tile.png);
	background-size:2px 71px;
	background-repeat:repeat-x;
	*/
  height: 42px;

  /*background-image:  url(../images/menuMid.png);*/
  /*background-repeat: repeat-x;*/
  /*background-size:1px 60px;*/
  padding-top: 4px;
  padding-left: 2px;
  position: relative;
  /*
background-image: url(../images/menuLeft.png),  url(../images/menuRight.png);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
*/
}

.pageMenu .modules {
  overflow: hidden;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 46px;
  line-height: 0px;
}

.pageMenu .modules > * {
  float: right;
}

.pageMenu .detail {
  display: inline-block;
}
.pageMenu .name {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.pageMenu .pageMenuButton {
  position: relative;
  display: inline-block;

  border: none;
  margin: 0;
  padding: 0;
  outline: none;

  font-size: 30px;
  color: white;

  cursor: pointer;
  background-color: transparent;
  padding-left: 4px;
}

.pageMenu .detail {
  font-size: 24px;
  text-align: center;
  position: absolute;
  left: 50px;
  right: 50px;
  height: 42px;
  padding-top: 2px;
}

.pageMenu .menu-icon {
  float: right;
  padding: 4px;
  margin: 4px;
  line-height: 0px;
}
.pageMenu .menu-icon img {
  width: 22px;
  height: 22px;
}
.pageMenu .menu-icon:hover {
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

.notifications {
  display: none;
  background-color: white;
}
.notification-root {
	/* display: block; */
	/* background-color: #000000; */
	/* overflow: scroll; */
	/* height: 200px; */
}

.notification {
	/* border: 1px red solid; */
	/* margin: 10px; */
	
}

.notifications .notification-root {
	/* overflow: scroll; */
}

.notifications .notification {
  font-family: "OpenSans";
  color: #313e47;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 5px solid #eeeeee;
  padding-left: 30px;
  padding-right: 30px;
}

.notifications .notification.unread {
  font-family: OpenSans;
}
.notification-layout {
  display: flex;
}

.notifications .notification .title {
  font-family: inherit;
  font-size: 18px;
  padding-top: 5px;
  flex: 1;
}
.notifications .notification .time {
  font-family: inherit;
  font-size: 18px;
  color: #c2c2c2;
  flex: 0 0 150px;
  text-align: right;
  padding-top: 5px;
}

.notifications .notification .message {
  font-family: inherit;
  font-size: 14px;
  padding-top: 5px;

  color: #787878;
  letter-spacing: 0;
  line-height: 19px;
}

.buttonCenterWrapper {
	border-bottom: 10px solid #EEEEEE;
	text-align: center;
}
.secondaryBtn {
  border: solid 1px #4c9e5a;
  color: #ffffff;
  background: #4c9e5a;
  border-radius: 100px;
  font-size: 11px;
  font-family: Helvetica;
  letter-spacing: 0;
  text-align: center;
  display: inline-block;
  width: 200px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.secondaryBtn:active {
  background-color: white;
  color: #4c9e5a;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.dismissAll {
  margin-top: 20px;
  margin-bottom: 20px;
  /* background-image: url(../images/close-small.svg); */
  background-image: url(../../../src/resources/icons/icon_close.svg);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 20px;
}

#debug {
  position: fixed;
  height: 13px;
  bottom: 0px;
  width: 100%;
  font-size: 10px;
  color: white;
  background: #000000;
  z-index: 100030001;
  overflow-y: auto;
  word-wrap: break-word;
}
#debug .debug {
  color: lightskyblue;
}
#debug .info {
  color: lightgreen;
}
#debug .warn {
  color: yellow;
}
#debug .error {
  color: red;
}
#debug.show-debug {
  height: 204px;
}

/* Drag'n'drop styles */

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.dragObject {
  margin-right: 5px;
  margin-bottom: 1px;
  /*text-align: center;*/
  cursor: move;
}

.dragObject.over {
  border-top: 2px dashed #000;
}

.dragSrc {
  cursor: pointer;
}
.ugeEventWrapper {
  width: 13%;
  position: absolute;
  box-sizing: border-box;
  padding-left: 0px;
  padding-right: 0px;
}
.ugeEvent {
  opacity: 0.95;
  overflow: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ugeEvent > .title-wrapper {
  padding: 2px;
  word-break: break-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}

.title-wrapper > .week-event-title-text-label {
  display: none;
  color: white;
  border-radius: 50px;
  padding: 0px 6px;
  margin: 1px;
  font-size: 12px;
  line-height: 18px;
  vertical-align: text-bottom;
  font-style: initial;
  white-space: nowrap;
}
.week-event-title-text-label.label-cancelled {
  background-color: #ee4738;
}
.week-event-title-text-label.label-planned {
  background-color: #8d8d8d;
}
.eventProto.cancelled .week-event-title-text-label.label-cancelled {
  display: inline-block;
}
.eventProto.planned .week-event-title-text-label.label-planned {
  display: inline-block;
}

#overviewEditor .eventProto.highlightColor0,
#overviewEditor .eventProto.highlightColor1 {
}
.eventProto {
  font-family: OpenSans;
  overflow: hidden;
}

.eventProto .pad {
  padding: 5px 20px 0 16px;
  font-size: 14px;
  word-break: break-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 14px;
  overflow: hidden;
}
#overviewEditor .eventProto {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
}

.ugeEvent.eventProto {
  font-size: 12px;
}
.eventProto .title:first-letter {
  text-transform: capitalize;
}

.eventProto .time {
  font-size: 11px;
  position: absolute;
  bottom: 20px;
  left: 15px;
}

.eventProto.checked,
.eventProto.checked div.title,
eventProto.checked span.title {
  text-decoration: line-through;
}

#overviewEditor .eventProto.passed {
  background-image: none;
}

.selected .activityBottom {
  width: 290px;
  height: 40px;
  background-image: url(../images/activity_bottom_new.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.eventHolder {
  border: none;
  width: 290px;
  position: absolute;
}

.eventProto.backgroundColor0 {
  background-color: #737373;
  color: white;
}

.eventProto {
  position: relative;
  text-align: left;
  color: white;

  border: none;
  height: 100px;
  background-color: white;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
}

.eventProto {
  color: black;
}
.eventProto.passed {
  font-style: italic;
  font-size: 12px;
  font-family: "OpenSans Light";
}
.eventProto .created-by {
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  padding: 5px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  width: 230px;
  box-sizing: border-box;
}

table#eventTable {
  width: 100%;
}

table.eventTable td.active {
  width: 100%;
  min-width: 150px;
}
/*
table.eventTable td.inactive {
	width:100%;
	background-color:#ddd;
	border-color:#bbb;
}
*/
table.eventTable {
  border-collapse: collapse;
  position: relative;
  /*    top: 108px; */

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* border-right: solid 1px #d6d6d6; */
  background-color: white;
}
table.eventTable.eventTableHeader {
  position: static;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 46px;
  z-index: 1;
  background: none;
  border: none;
  border-bottom: solid 1px #eeeeee;
}
/*table.eventTable thead {*/
/*position: -webkit-sticky;*/
/*position: -moz-sticky;*/
/*position: -ms-sticky;*/
/*position: -o-sticky;*/
/*position: sticky;*/
/*top: 0px;*/
/*z-index: 1;*/
/*}*/
.eventTable td {
  border: solid 1px transparent;
  background-color: white;
  height: 39px;
  line-height: 39px;
  border-right: 0px;
}

table.eventTable th {
  border: solid 1px transparent;
  /*background-color:#eee;*/
  /*border-bottom:solid 2px #90c26b;*/
  border-right: 0px;
}
table.eventTable tr.full.timeslot td.time {
  width: 50px;
  position: inherit;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
}

table.eventTable tr.full.timeslot td.time {
  width: 50px;
  position: inherit;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
}
table.eventTable td:nth-child(1) {
  border: solid 1px transparent;
}
.eventTable td.time div {
  position: relative;
  top: -12px;
  padding-right: 5px;
}
table.eventTable td {
  border-left: 0px;
  border-right: 0px;
  width: 13%;
}
table.eventTable td:first-child {
  width: 9%;
}
table tr.timeslot td {
  border-bottom: solid 1px #d6d6d6;
}
table tr.timeslot.full td {
  border-bottom: solid 1px transparent;
}
table tr.full td.active {
  /*	border-top:solid 1px #D6D6D6; */
  border-bottom: solid 1px transparent;
}

table tr.full td.inactive {
  border: solid 1px transparent;
  border-top: solid 1px #d6d6d6;
  border-right: 0px;
}

table#ugeTable th {
  vertical-align: top;
  width: 13%;
  height: 54px;
}

table#ugeTable th.time {
  width: 9%;
  vertical-align: middle;
}

#ugeSkemaHeader th.time {
  border-bottom: solid 1px #eeeeee;
  background-color: white;
}
table#ugeTable td.time {
  overflow: inherit;
}

table#ugeTable td {
  overflow: hidden;
}

/* modal dialogs */

.lock {
  overflow: hidden;
}
.shim,
.shimDialog {
  position: fixed;
  bottom: 0px;
  left: 0px;
  top: 0px;
  right: 0px;
  /* if modal content doesn't fit inside the shim, display scrollbars */
  /*    overflow: auto; */
  /* allow one-finger iPad scrolling */
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */
  zoom: 1;
  z-index: 100000;
}

.shimDialog {
  z-index: 100000004;

}

/* fix for iPad glitches */
.shim > *,
.shimDialog > * {
  -webkit-transform: translateZ(0px);
}

.modalOuter {
  display: none;
  z-index: 100001;
  position: absolute;
}
.modal {
  padding: 10px;
  border: solid 1px #888;
  background-color: white;
  border-radius: 10px;
}

.menushim {
  position: fixed;
  bottom: 0px;
  left: 0px;
  top: 0px;
  right: 0px;
  /* if modal content doesn't fit inside the shim, display scrollbars */
  overflow: hidden;
  /* allow one-finger iPad scrolling */
  -webkit-overflow-scrolling: touch;
}

/* fix for iPad glitches */
.menushim > * {
  -webkit-transform: translateZ(0px);
}

.menushim {
  background: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */
  zoom: 1;
  z-index: 100000;
}

.dialog {
  display: none;
  background-color: white;
  margin: auto;
  min-width: 320px;
  /*max-width:360px;*/
  width: 100%;
  color: #313e47;
}

.dialog h1 {
  /* background-color: #9de176; */
  /* background: linear-gradient(1.87deg, #1b7649 0%, #4fa15b 49.9%, #9de176 100%); */
  background-color: #4c9e5a;
  color: white;
  font-weight: normal;

  padding: 2px;
  text-align: center;
  padding-top: 8px;
  height: 46px;
  position: relative;
  text-align: center;
  margin: 0px;
  font-size: 24px;
}
.dialog h1.singleRow {
  height: 44px;
  line-height: 44px;
}
.dialog h1 .date {
  margin-top: 5px;
  font-size: 12px;
}

.actionBar {
  /*height:30px;*/
  text-align: center;
  /*padding:15px;*/
  /*padding-top:10px;*/
  margin-top: 5px;
  background-color: #ebebeb;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* ---- alert dialog ---- */
.dialog.alert,
.dialog.confirm {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  left: 50%;
  margin-left: -160px;
  z-index: 100000004;
  position: fixed;
  top: 100px;
  text-align: center;
}

.dialog.alert h1,
.dialog.confirm h1 {
  margin: 0px;
}

.dialog.alert .message,
.dialog.confirm .message {
  margin: 20px;
  -ms-touch-action: none;
  word-wrap: break-word;
}

.toast {
  box-sizing: border-box;
  font-family: OpenSans;
  text-align: center;
  padding: 20px;
  opacity: 0;
  z-index: 100002;
  width: 300px;
  background-color: #feffcd;
  color: black;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px black;
  position: fixed;
  top: 50px;
  left: 50%;
  margin-left: -150px;

  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;

  transition-property: opacity;
  transition-duration: 0.5s;

  transition-timing-function: ease;
}

.toast.show {
  opacity: 1;
}

.systemDialog.choice .messageArea {
  padding-bottom: 60px;
}
.systemDialog.choice .messageArea .buttons .lgButton {
  min-width: 200px;
}

.lgButton.choice1,
.lgButton.choice2,
.lgButton.choice-cancel {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 170px;
  margin-bottom: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.timeInput {
  font-weight: bold;
  text-align: center;
}

.timeInput td.spinner {
  border: solid 1px transparent;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 30px;
  text-align: center;

  line-height: 0px;
}

.timeInput td.spinner:active {
  /*	background-color:#eee;
	border:solid 1px #ccc;
	*/
}
.timeInput td.sep {
  text-align: center;
  width: 14px;
}
input.hours,
input.minutes {
  width: 35px;
  height: 35px;
  text-align: center;
}

.photo {
  position: relative;
  margin: auto;
  width: 120px;
  height: 120px;
  background-size: cover;
  margin-bottom: 20px;

  line-height: 120px;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 50px;
  overflow: hidden;
  background-color: #878787;
}
.overlay {
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 120px;
  height: 120px;
  background-size: cover;
  background-image: url(../images/profil_circle.png);
}
.color-option {
  display: inline-block;
  vertical-align: middle;
}
.event-color {
  display: inline-block;
  height: 30px;
  width: 30px;
  border-radius: 100px;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 12px 15px;
  pointer-events: none;
}
.swatchColor0 .swatchColor0,
.swatchColor1 .swatchColor1,
.swatchColor2 .swatchColor2,
.swatchColor3 .swatchColor3,
.swatchColor4 .swatchColor4,
.swatchColor5 .swatchColor5 {
  width: 55px;
  height: 55px;
  margin: 0px;
}
.event-color.selected-color.swatchColor0 {
  box-sizing: border-box;
}

.event-color.swatchColor0 {
  /* border: solid 1px #a7a7a7; */
  background-color: #737373;
}
.event-color.swatchColor1 {
  background-color: #865fc1;
}
/* blue */
.event-color.swatchColor2 {
  background-color: #0277bd;
}
/* red */
.event-color.swatchColor3 {
  background-color: #d81b60;
}
/* green */
.event-color.swatchColor4 {
  background-color: #1f8811;
}
/* yellow */
.event-color.swatchColor5 {
  background-color: #cdb428;
}

/* mørkerød 
.event-color.swatchColor5 {
  background-color: #a20707;
} */

/* lyserød */
.event-color.swatchColor6 {
  background-color: #eda7cd;
}

/* Magenta */
.event-color.swatchColor7 {
  background-color: #de27e9;
}
/* Blå */
.event-color.swatchColor8 {
  background-color: #4845f3;
}
/* Tyrkis Blå */

.event-color.swatchColor9 {
  background-color: #0277bd;
}

/* Navy Blå */
.event-color.swatchColor10 {
  background-color: #2e3a73;
}

/* Navy Blå */
.event-color.swatchColor11 {
  background-color: #2e3a73;
}

/* Lyse grøn */
.event-color.swatchColor12 {
  background-color: #68d238;
}

/* Gul */
.event-color.swatchColor13 {
  background-color: #f2f608;
}

/* Honning Gul */
.event-color.swatchColor14 {
  background-color: #f3c310;
}

/* Orange  */
.event-color.swatchColor15 {
  background-color: #ee8026;
}

/* Chokolade  */
.event-color.swatchColor16 {
  background-color: #90420c;
}

/* Sort  */
.event-color.swatchColor17 {
  background-color: #151e24;
}

.textColor0 {
  color: #2d3a43;
}
.textColor1 {
  color: #865fc1;
}
.textColor2 {
  color: #0277bd;
}
.textColor3 {
  color: #d81b60;
}
.textColor4 {
  color: #1f8811;
}
.textColor5 {
  color: #a20707;
}
.textColor6 {
  color: #eda7cd;
}
.textColor7 {
  color: #de27e9;
}
.textColor8 {
  color: #4845f3;
}
.textColor9 {
  color: #0277bd;
}
.textColor10 {
  color: #2e3a73;
}
.textColor11 {
  color: #2e3a73;
}
.textColor12 {
  color: #68d238;
}
.textColor13 {
  color: #f2f608;
}
.textColor14 {
  color: #f3c310;
}
.textColor15 {
  color: #ee8026;
}
.textColor16 {
  color: #90420c;
}
.textColor17 {
  color: #151e24;
}

.backgroundColor0 {
  color: #2d3a43;
}
.backgroundColor1 {
  background-color: #865fc1;
  color: white;
}
.backgroundColor2 {
  background-color: #0277bd;
  color: white;
}
.backgroundColor3 {
  background-color: #d81b60;
  color: white;
}
.backgroundColor4 {
  background-color: #1f8811;
  color: white;
}

.backgroundColor5 {
  background-color: #cdb428;
  color: white;
}

/* .backgroundColor5 {
  background-color: #a20707;
  color: white;
} */

.backgroundColor6 {
  background-color: #eda7cd;
  color: white;
}

.backgroundColor7 {
  background-color: #de27e9;
  color: white;
}

.backgroundColor8 {
  background-color: #4845f3;
  color: white;
}

.backgroundColor9 {
  background-color: #0277bd;
  color: white;
}

.backgroundColor10 {
  background-color: #2e3a73;
  color: white;
}

.backgroundColor11 {
  background-color: #2e3a73;
  color: white;
}

.backgroundColor12 {
  background-color: #68d238;
  color: white;
}

.backgroundColor13 {
  background-color: #f2f608;
  color: white;
}

.backgroundColor14 {
  background-color: #f3c310;
  color: white;
}

.backgroundColor15 {
  background-color: #ee8026;
  color: white;
}

.backgroundColor16 {
  background-color: #90420c;
  color: white;
}

.event-color.swatchcolor17 {
  background-color: #151e24;
  color: white;
}

.highlightColor0 {
  background-color: white;
}

/* yellow */
.highlightColor1 {
  border-left: solid 10px #865fc1;
}
/* blue */
.highlightColor2 {
  border-left: solid 10px #0277bd;
}
/* red */
.highlightColor3 {
  border-left: solid 10px #d81b60;
}
/* green */
.highlightColor4 {
  border-left: solid 10px #1f8811;
}

.highlightColor5 {
  border-left: solid 10px #cdb428;
}

/* .highlightColor5 {
  border-left: solid 10px #a20707;
} */
.highlightColor6 {
  border-left: solid 10px #eda7cd;
}
.highlightColor7 {
  border-left: solid 10px #de27e9;
}
.highlightColor8 {
  border-left: solid 10px #4845f3;
}
.highlightColor9 {
  border-left: solid 10px #0277bd;
}
.highlightColor10 {
  border-left: solid 10px #2e3a73;
}
.highlightColor11 {
  border-left: solid 10px #2e3a73;
}
.highlightColor12 {
  border-left: solid 10px #68d238;
}
.highlightColor13 {
  border-left: solid 10px #f2f608;
}
.highlightColor14 {
  border-left: solid 10px #f3c310;
}
.highlightColor15 {
  border-left: solid 10px #ee8026;
}
.highlightColor16 {
  border-left: solid 10px #90420c;
}
.highlightColor17 {
  border-left: solid 10px #151e24;
}

[class*="highlightColor"].active {
  background-color: white;
  border: none;
}
[class*="highlightColor"].active svg {
  display: block;
}

.agenda-color-0 {
  border-color: transparent;
}
.agenda-color-1 {
  border-color: #af56ee;
}
.agenda-color-2 {
  border-color: #0277bd;
}
.agenda-color-3 {
  border-color: #d81b60;
}
.agenda-color-4 {
  border-color: #1f8811;
}

.agenda-color5 {
  color: #a20707;
}
.agenda-color6 {
  color: #eda7cd;
}
.agenda-color7 {
  color: #de27e9;
}
.agenda-color8 {
  color: #4845f3;
}
.agenda-color9 {
  color: #0277bd;
}
.agenda-color10 {
  color: #2e3a73;
}
.agenda-color11 {
  color: #2e3a73;
}
.agenda-color12 {
  color: #68d238;
}
.agenda-color13 {
  color: #f2f608;
}
.agenda-color14 {
  color: #f3c310;
}
.agenda-color15 {
  color: #ee8026;
}
.agenda-color16 {
  color: #90420c;
}
.agenda-color17 {
  color: #151e24;
}

.agenda-event-color {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 100px;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 2px 2px;
  pointer-events: none;
}

button.action2 {
  /* opacity: 0.8; */
  outline: none;
  position: relative;
  padding: 0px;
  width: 3em;
  height: 3em;
  font-size: 20px;
  border-radius: 50%;
  text-align: center;
  background-color: transparent;
  margin: 10px 10px 10px 0;
  border: none;
  vertical-align: middle;
}

.approve-action {
  background-image: url(../images/approve-action.svg);
  background-size: cover;
  width: 54px;
  height: 54px;
  display: inline-block;
}

.add-action {
  background-image: url(../images/add-action-darkmode.svg);
  background-size: cover;
  width: 54px;
  height: 54px;
  display: inline-block;
}
.favorite-action:active,
.add-action:active,
.approve-action:active {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  background-color: transparent;
  border-radius: 100px;
}

.favorite-action {
  /* background-image: url(../images/favorite-action.svg); */
  background-image: url(../images/favorite-action-darkmode.svg);
  background-size: cover;
  width: 54px;
  height: 54px;

  display: inline-block;
}

.approve-action:active {
  background-image: url(../images/approve-action-active.svg);
}

.favorite-action:active {
  background-image: url(../images/favorite-action-active.svg);
}

.add-action:active {
  background-image: url(../images/add-action-active.svg);
}

.alarm-sign {
  display: none;
  background-size: cover;
  width: 6px;
  height: 7px;
  /* background-image: url(../images/alarm.svg); */
  background-image: url(../../../src/resources/icons/icon_bell_small.svg);
}
.alarm .alarm-sign {
  display: inline-block;
}
.info-sign {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
}

.note-sign {
  background-image: url(../images/note.svg);
  background-size: cover;
  width: 8px;
  height: 6px;
}

#overviewEditor .note-sign {
  width: 16px;
  height: 12px;
  vertical-align: middle;
  margin-left: 5px;
}

#overviewEditor .alarm-sign {
  width: 12px;
  height: 14px;
  vertical-align: middle;
}

i.checklist-sign {
  display: inline-block;
  width: 7px;
  height: 5px;
  /* background-image: url(../images/checklist.svg); */
  background-image: url(../../../src/resources/icons/icon_clock.svg);
  background-size: cover;
}
.eventProto .note-sign {
  display: none;
}

.eventProto.hasMessages .note-sign {
  display: inline-block;
}

.space1 {
  margin-right: 2px;
}

[class*="button-"] {
  color: white;
  font-family: "OpenSans";
  padding: 0px;
  margin: 0px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

.button-large {
  padding: 5px;

  font-size: 18px;
  border-radius: 12px;

  background-color: #4c9e5a;
  border: 2px solid #4c9e5a;
}

.button-large:active {
  background-color: #fff;
  border: 2px solid #4c9e5a;
  color: #4c9e5a;
}

.button-xl {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  font-weight: bold;
  min-width: 120px;
  border-radius: 12px;

  background-color: #4c9e5a;
  border: 2px solid #4c9e5a;
}

.button-xl:active {
  background-color: #fff;
  color: #4c9e5a;
}
.button-xl.cancel {
  background-color: #aaa;
  border: 2px solid #aaa;
}

.button-xl.cancel:active {
  background-color: #fff;
  color: #aaa;
}
.danger-button {
  color: #fff;
  background-color: #ee4738;
  border-color: #ee4738;
  padding: 10px;
  border-radius: 30px;
}
.sletAktivitet {
  border: 1px solid #ee4738 !important;
  /* background-color: #2b2b2b !important; */
  padding: 10px;
  border-radius: 30px;
}

.danger {
  color: #fff;
  background-color: #ee4738;
  border-color: #ee4738;
}
.danger:active {
  background-color: #fff;
  color: #ee4738;
}

.button-large-strong {
  background-image: url(../images/redButtonInactive.png);
  background-size: cover;
  width: 102px;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
}

.button-large-strong:active {
  background-image: url(../images/redButtonActive.png);
}

.arrowbox {
  border-width: 0px;
  border-radius: 5px;
  border-style: solid;
  display: inline-block;
  position: relative;
  border-top-width: 1px;
}

.arrowbox:after,
.arrowbox:before,
.arrowbox > div:before {
  content: " ";
  height: 0px;
  width: 0px;
  position: absolute;
  border: 20px solid transparent;
}

/* --------- blue top --------- */
.arrowbox.blue {
  color: #ffffff;
  background-color: #84c9f1;
  border-color: #d5ecfa;
  box-shadow: 0 0 0 1px #5194bb;
}

.arrowbox.top {
  margin-top: 20px;
}
.arrowbox.top:after,
.arrowbox.top:before,
.arrowbox.top > div:before {
  bottom: 100%;
  left: 20px;
}

.arrowbox.top:before {
  top: -41px;
}

.arrowbox.blue.top:after {
  border-bottom-color: #d5ecfa;
}

.arrowbox.blue.top:before {
  border-bottom-color: #5194bb;
}

.arrowbox.blue.top > div:before {
  border-bottom-color: #84c9f1;
  z-index: 1;
  top: -39px;
}

/* --------- green bottom --------- */
.arrowbox.green {
  background-color: #a6e298;
  border-color: #e9f8e5;
  box-shadow: 0 0 0 1px #88bb7d;
  color: white;
}
.arrowbox.bottom {
  margin-bottom: 20px;
}
.arrowbox.bottom:after,
.arrowbox.bottom:before {
  right: 20px;
}
.arrowbox.green.bottom:after {
  border-top-color: #88bb7d;
}

.arrowbox.green.bottom:before {
  border-top-color: #a6e298;
}

.arrowbox.bottom:after {
  top: 100%;
}
.arrowbox.bottom:before {
  bottom: -39px;
  z-index: 1;
}

.message-plugin {
  display: inline-block;
  background-image: url(../../../common/resources/images/chatNotificationInactive.png);
  position: relative;
}
.pageMenuButton .counter,
.message-plugin .counter,
.notification-plugin .counter {
  color: white;
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: #ee4738;

  display: inline-block;
  border-radius: 100px;
  font-size: 10px;
  text-align: center;
  width: 17px;
  height: 17px;
  line-height: 17px;
}
.pageMenuButton .counter {
  top: 7px;
  left: 37px;
  font-family: "OpenSans";
}
.menuAction .counter {
  line-height: 16px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 8px;
  color: #fff;
  position: absolute;
  right: 0px;
  background-color: #ee4738;
  display: inline-block;
  border-radius: 100px;
  font-size: 10px;
  text-align: center;
  margin-top: 0px;
  width: 16px;
  top: 0px;
  margin-top: 5px;
  height: 16px;
}

textarea.description {
  border: 0px;
  border-top: solid 1px #dcdcdc;
  border-bottom: solid 1px #dcdcdc;
  width: 100%;
  /*height:196px;*/
  height: 98px;
  margin: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0px;
}
/* ------------ Styles for Ny Aktivitet dialog ------------ */

.sectionTable {
  background-color: white;
  width: 100%;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-spacing: 0px;
}

.seperatorRow {
  font-family: OpenSans;
  font-size: 18px;
  color: #1b1b1b;
  text-align: left;
}
.seperatorRow .star {
  display: inline-block;
  top: 0px;
  background: url("../images/star.png") no-repeat center;
  background-size: cover;
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.sectionTable tr:last-child td {
  border-bottom: 0px;
}

.sectionTable tr.eventRow td {
  border-bottom: solid 6px #eeeeee;
  vertical-align: top;
}

.sectionTable tr td {
  font-size: 24px;
  padding: 0px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.sectionTable tr.seperatorRow th {
  font-weight: normal;
  border: solid 0px transparent;
  padding: 2px;
  height: 35px;
  padding-left: 10px;
}

.sectionTable .time {
  padding-top: 5px;
  text-align: left;
  font-size: 12px;
}

.sectionTable .label {
  font-size: 18px;
  font-weight: normal;
  width: 100%;
  font-family: OpenSans;

  padding-left: 12px;
  padding-right: 10px;
}
.sectionTable .label .time {
  font-weight: normal;
  width: 100%;
  font-family: OpenSans;
}
.sectionTable .description {
  font-size: 13px;
  color: #767676;
  padding-top: 2px;
  padding-bottom: 5px;
}

.sectionTable tr {
  border: solid 1px white;
}

.sectionTable tr.selected td,
.sectionTable tr.selected td .description {
  color: #81b064;
}

.sectionTable div.button {
  width: 100%;
  display: inline-block;
  height: 32px;
  background-color: #91c46c;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.4);
  border: 1px solid #729b54;
  font-size: 16px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sectionTable td.noBorder {
  border-width: 0px;
}

.sectionTable .undo {
  height: 42px;
  background-color: #aaaaaa;
  color: white;
  line-height: 42px;
  padding-left: 44px;
}
.sectionTable .undo div {
  float: right;
  height: 42px;
  padding-right: 9px;
  padding-left: 9px;
  border-left: 1px solid white;
}

.radioMarker {
  width: 22px;
  height: 22px;
  background-image: url(../images/radioOff.png);
  background-size: cover;
}
.selected .radioMarker {
  background-image: url(../images/radioOn.png);
}

.checkMarker {
  width: 22px;
  height: 22px;
  background-image: url(../images/check-off.png);
  background-size: cover;
  margin-left: 10px;
  margin-right: 5px;
}
.selected .checkMarker {
  background-image: url(../images/check-on.png);
}

.favorite,
.favoriteOn {
  vertical-align: middle;
  height: 60px;
  width: 60px;
  display: inline-block;

  /* background-image: url(../images/favorite_off.png); */
  background-image: url(../../../src/resources/icons/icon_star.svg);
  background-size: cover;
}

.favoriteOn {
  /* background-image: url(../images/favorite_on.png); */
  background-image: url(../../../src/resources/icons/icon_star_filled.svg);
  background-size: cover;
}

.active.color {
  background-image: url(../images/activeColor.png);
  background-size: cover;
}

.nySamtale {
  margin-top: 3px;
  margin-right: 10px;
  float: right;
}

div.systemDialog {
  -moz-box-shadow: 2px 2px 10px #666;
  -webkit-box-shadow: 2px 2px 10px #666;
  box-shadow: 2px 2px 10px #666;
  display: none;
  background: white;
  /*background: #ffe9e9;*/
  margin: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 100000004;

  left: 50%;
  /*margin-left:-180px;*/
  position: fixed;
  top: 100px;
  color: #404040;
  padding: 20px;
  line-height: 0px;
  border-radius: 5px;
}
.systemDialog .info {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  background: url(../images/infoInactive.png) no-repeat;
  background-size: cover;
}
.systemDialog .info:active {
  background: url(../images/infoActive.png) no-repeat;
  background-size: cover;
}
.systemDialog .messageArea {
  text-align: left;
  min-height: 220px;
  vertical-align: middle;
  display: inline-block;
  line-height: normal;
  position: relative;
}
.systemDialog .messageArea .message {
  margin-bottom: 52px;
  font-size: 18px;
  text-align: center;
}
.systemDialog .messageArea h1 {
  vertical-align: top;
  margin-top: 5px;
  margin-bottom: 17px;
  text-align: center;
  font-size: 20px;
  line-height: normal;
  margin-right: 5px;
  margin-left: 5px;
  font-weight: normal;
}

.systemDialog .messageArea .buttons {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0px;
}
.systemDialog .button-systemDialog {
  background-image: url(../images/systemButtonInactive.png);
  background-size: cover;
  height: 38px;
  width: 135px;
  line-height: 38px;
  text-align: center;
  margin: 0px;
  font-size: 16px;
}
.systemDialog .button-systemDialog:active {
  background-image: url(../images/systemButtonActive.png);
}
.systemDialog .splitter {
  vertical-align: middle;
  background-color: #c8c8c8;
  width: 1px;
  box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.8);
  height: 220px;
  display: inline-block;

  margin: 0px 20px;
}
.systemDialog .iconArea {
  vertical-align: middle;
  width: 42px;
  min-height: 132px;
  display: inline-block;
  background: url("../images/exclamationmark.png") no-repeat center;
  background-size: 50%;
}
.systemDialog.tiny .iconArea,
.systemDialog.tiny .splitter {
  display: none;
}
.systemDialog .details {
  display: none;
  line-height: normal;
  word-wrap: break-word;
  margin-top: 20px;
}

.moduleMenu {
  position: fixed;
  /*position: -webkit-sticky;*/
  /*position: -moz-sticky;*/
  /*position: -ms-sticky;*/
  /*position: -o-sticky;*/
  /*position: sticky;*/
  top: 46px;
  right: 0px;
  color: #ffffff;
  background-color: #2d3a43;
  font-size: 20px;
  z-index: 100001;
  bottom: 0px;
  width: 260px;
}
.moduleMenu ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
.moduleMenu li {
  padding: 10px;
}
.moduleMenu li:active,
.moduleMenu li:hover {
  background-color: #303338;
  color: #d4d4d4;
}
.moduleMenuItem {
  text-align: center;
}
.moduleMenuItem.text {
  font-size: 18px;
}
.moduleMenuItem button {
  background-color: #4c9e5a;
  border: 2px solid #4c9e5a;
  border-radius: 10px;
  height: 45px;
  color: white;
  font-weight: normal;
  font-size: 24px;
  min-width: 200px;
}
.moduleMenuItem button:active {
  background-color: white;
  color: #4c9e5a;
}
.cancel-button {
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: white;
  background-color: transparent;
  border: none;
  background: url("../images/header-cross.png") no-repeat center;
  background-size: 22px 22px;
  background-position: 10px 10px;
  width: 42px;
  height: 42px;
  position: absolute;
  bottom: 15px;
  left: 0;
}
.header-button {
  font-size: 18px;
  border-radius: 10px;
  font-family: "OpenSans";
  font-weight: bold;
  color: #4c9e5a;
  background-color: white;
  border: none;
  padding: 5px 12px 5px 12px;
  position: absolute;
  top: 17px;
  right: 5px;
}
.header-button.disabled {
  background-color: transparent;
  border: solid 1px #76a653;
  color: #76a653;
}

.bar-button {
  background-color: transparent;
  color: white;
  font-size: 30px;
  padding: 13px;
  border: none;
  outline: none;
  margin: 0;
  bottom: 0;
}

.bar-button.left,
.bar-button.right {
  position: absolute;
  bottom: 0;
}
.bar-button.left {
  left: 0;
}
.bar-button.right {
  right: 0;
}
/*  ---- Activity Edit Dialog---- */

.selected-color.event-color {
  margin: 0px 10px;
  position: relative;
  background-image: url(../images/color-chooser-arrow.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 22px 22px;
}
.selected-color.event-color.swatchColor0 {
  background-image: url(../images/color-chooser-arrow-gray.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 22px 22px;
}

.swatch {
  white-space: normal;
  /*width: 50px;*/
  /*background-color: #2D3A43;*/
  /*right: -5px;*/
  /*top: -9px;*/
  /*position: absolute;*/
  /*border-radius: 50px;*/
  /*padding: 5px;*/
  /*border:solid 2px white;*/
  z-index: 100000005;
  text-align: center;
}

/*  ---- select Activity Type Wizard ---- */
/*
.blankIcon {
	width: 45px;
	height: 45px;
	display: inline-block;
	background: url('../images/selectActivityTypeWizard/blank-icon.png') no-repeat center;
	background-size:cover;
	vertical-align:middle;
	margin-right:10px;	
	margin-left:10px;	

}
.starIcon {
	width: 45px;
	height: 45px;
	display: inline-block;
	background: url('../images/selectActivityTypeWizard/star-icon.png') no-repeat center;
	background-size:cover;
		vertical-align:middle;
	margin-right:10px;
	margin-left:10px;	

}
*/
.selectListItem.addFavorites {
  border: 0px;
}

.selectListItem {
  position: relative;
  font-size: 30px;
  border-bottom: solid 1px #2d3a43;
  padding: 12px 0px 12px 15px;
}

.right-arrow {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 30px;
  width: 12px;
  height: 21px;
  background: url("../images/selectActivityTypeWizard/right-arrow.png")
    no-repeat center;
  background-size: cover;
}
.contact-header {
  text-align: center;
  padding-top: 10px;
}
.contact-tab {
  display: inline-block;
  height: 35px;
  line-height: 33px;
  box-sizing: border-box;
  font-size: 18px;
  font-family: OpenSans;
  text-align: center;
  color: #1b1b1b;
  background-color: white;
  border: solid 1px #eeeeee;
}
.contact-tab:first-child {
  border-radius: 5px 0px 0px 5px;
  border-right-width: 0px;
}
.contact-tab:last-child {
  border-radius: 0px 5px 5px 0px;
  border-left-width: 0px;
}

.contact-tab.active {
  color: white;
  background-color: #4c9e5a;
  border: solid 1px #4c9e5a;
}

.thread-header {
  padding-bottom: 7px;
  /* z-index: 1; */
  overflow: hidden;
}
.noThreads,
.thread-header,
.personView {
  background-color: white;
  color: #2d3a43;
  position: relative;
  border-bottom: 10px solid #eeeeee;
  font-family: "OpenSans";
  padding: 10px;
}

.noThreads,
.personView {
  height: 60px;
}
.noThreads {
  line-height: 60px;
  font-size: 22px;
  text-align: center;
  font-family: "OpenSans";
}
.threadView,
.personView {
  position: relative;
}
.threadView .deleteBox .message {
  max-height: 200px;
  overflow: hidden;
}
.threadView .thread-header {
  border-bottom: none;
  position: static;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 45px;
  z-index: 1;
}
.thread-recipients-icon {
  display: inline-block;
  margin-right: 3px;
  font-size: 11px;
  height: 14px;
  line-height: 14px;
  padding-left: 20px;
  padding-right: 8px;
  border-radius: 8px;
  /* background-image: url(../images/Participants-icon.png); */
  background-image: url(../../../src/resources/icons/icon_person.svg);
  background-size: 12px 13px;
  background-repeat: no-repeat;
  background-position: 6px;
  color: white;
  background-color: #2d3a43;
}
.thread-recipients {
  display: inline-block;
  /*margin-top: 6px;*/
  padding-right: 68px;
  padding-left: 8px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.threadView .thread-recipients {
  padding-right: 0px;
  height: auto;
  white-space: normal;
}
.thread-recipients span {
  font-size: 14px;
}
.thread-title {
  font-size: 18px;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 10px;
  line-height: 18px;
}
.thread-date {
  font-size: 14px;
  margin-left: 8px;
  color: #cdcdcd;
  margin-top: 5px;
}

.thread-buttonBar {
  display: flex;
  width: fit-content;
  /* margin-top: 10px; */
  margin-left: 35px;
  padding: 10px 10px 00px 10px;
}

.thread-buttonIcon {
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 40px;
  background-image: url(../images/trashcan.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.thread-buttonText {
  padding-left: 5px;
  color: #adadad;
  text-align: center;
  border-radius: 40px;
}

.thread-arrow {
  position: absolute;
  top: 0px;
  right: 15px;
  height: 100%;
  width: 30px;
  /* background-image: url(../images/right-arrow.svg); */
  background-image: url(../../../src/resources/icons/icon_chevron_right.svg);
  /* background-size: 7px 10px; */
  background-repeat: no-repeat;
  background-position: right center;
}

.thread-areYouSure{
	display: none;
  flex-direction: column;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  /* padding-top: 50%; */
  /* padding-bottom: 50%; */
  background-color: white;
	align-items: center;
	justify-content: center;
  z-index: 1000000040;
}

.thread-delete-buttons{
  display: flex;
}

.thread-delete-text{
  padding: 10px;
  display: flex;
  /* color: black; */
}

.areYouSure-button{
 
  line-height: 40px;       
  height: 40px;
	display: block;
	text-align: center;
	min-width: 100px;
	padding: 10px;
	margin: 10px;
	border: #4C9E5A 1px solid;
	color: #4C9E5A;
	border-radius: 100px;
}

.areYouSure-button-Yes{
	background-color: #4C9E5A;
	color: white;
}

.navigate-arrow {
  position: absolute;
  top: 0px;
  right: 20px;
  height: 100%;
  width: 30px;
  /* background-image: url(../images/right-arrow-big.svg); */
  background-image: url(../../../src/resources/icons/icon_chevron_right.svg);
  /* background-size: 9px 15px; */
  background-repeat: no-repeat;
  background-position: right center;
}

.icon-calendar {
  background-image: url(../../../src/resources/icons/icon_calendar.svg);
}

.darkmodeBtn {
  position: absolute;
  top: 0px;
  right: 20px;
  height: 100%;
  background-size: 9px 15px;
  background-repeat: no-repeat;
  background-position: right center;
  margin: 0px;
}
/* --------------------------------------- */

.dialog-arrow {
  position: absolute;
  top: 0px;
  /* right: 20px; */
  height: 45px;
  width: 30px;
  /* background-image: url(../images/right-arrow-big.svg); */
  background-image: url(../../../src/resources/icons/icon_chevron_right.svg);
  /* background-size: 9px 15px; */
  background-repeat: no-repeat;
  background-position: right center;
}

.dialog-arrow.shown {
  background-image: url(../images/up-arrow-big.svg);
  background-size: 15px 15px;
}

.inline-arrow {
  position: absolute;
  top: 0px;
  /* right: 20px; */
  height: 45px;
  width: 30px;
  /* background-image: url(../images/down-arrow-big.svg); */
  background-image: url(../../../src/resources/icons/expand_down_black.svg);
  /* background-size: 15px 15px; */
  background-repeat: no-repeat;
  background-position: right center;
}

.inline-arrow.shown {
  /* background-image: url(../images/up-arrow-big.svg); */
  background-image: url(../../../src/resources/icons/expand_up_black.svg);
  /* background-size: 15px 15px; */
}

.thread-unreadCount {
  position: absolute;
  top: 13px;
  right: 15px;
  border-radius: 35px;
  width: 15px;
  height: 15px;
  background-color: #ee4738;
  color: white;
  font-family: "OpenSans";
  font-size: 11px;
  text-align: center;
  line-height: 15px;
}
.threadView .thread-messages {
}

.threadsView .thread-title {
  margin-right: 70px;
}

.moduleHeader {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0px;
  background-color: #9de176;
  background: linear-gradient(2deg, #1b7649 -20%, #4fa15b 49.9%, #9de176 120%);
  color: white;
  height: 45px;
  line-height: 45px;
  font-family: "OpenSans";
  font-size: 24px;
  text-align: center;
  z-index: 1;
}

.notification-header .nav-btn,
.moduleHeader .nav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: normal;
  border-radius: 10px;
  font-family: "OpenSans";
  font-weight: bold;
  color: #4c9e5a;
  background-color: #fff;
  border: none;
  padding: 5px 12px 5px 12px;
  z-index: 2;
}
.notification-header .nav-btn:active,
.moduleHeader .nav-btn:active {
  background-color: #4c9e5a;
  color: white;
  border: 1px solid white;
}
.moduleHeader .nav-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 45px;
  width: 50px;
  /* background-image: url(../images/back.svg); */
  background-image: url(../../../src/resources/icons/icon_arrow_left.svg);
  background-size: 22px 22px;
  background-position: center;
  background-repeat: no-repeat;
}
.threadView .thread-reply {
  background-color: #f6f6f6;
  padding-bottom: 5px;
  /*background-color: #4C9E5A;*/
  position: relative;
  /*position: -webkit-sticky;*/
  /*position: -moz-sticky;*/
  /*position: -ms-sticky;*/
  /*position: -o-sticky;*/
  /*position: sticky;*/
  /*bottom: 0px;*/
}
.threadView .thread-reply .thread-input-holder {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding-right: 85px;
  padding-left: 5px;
}
.threadView .thread-reply .thread-file-holder {
  padding: 5px;
}
.threadView .thread-file-preview {
  position: relative;
  font-size: 0;
  padding-bottom: 5px;

  max-width: 150px;
  max-height: 150px;
  min-width: 60px;
  min-height: 60px;
}
.threadView .thread-file-preview .thread-file-preview-image {
  max-width: inherit;
  max-height: inherit;
  min-width: inherit;
  min-height: inherit;
}
.threadView .thread-file-preview .thread-file-preview-image-remove {
  position: absolute;
  top: 0px;
  right: 0px;

  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url(../images/delete.svg);
  background-size: 30px 30px;
  background-position: 5px 5px;
  background-repeat: no-repeat;
}
.threadView .thread-reply .thread-file-holder .thread-file-add {
  display: inline-block;
  position: relative;
  color: white;
  /* background-color: #f6f6f6; */
  font-size: 18px;
  /* border-radius: 10px; */
  /* padding: 5px 12px; */
  /* border:1px solid #4c9e5a; */

  background-color: #4c9e5a;
  /* border: 1px solid #4c9e5a; */
  padding: 10px;
  border-radius: 30px;
}
.threadView .thread-reply .thread-file-holder .thread-file-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.threadView .thread-reply .thread-file-holder .thread-file-add:focus {
  color: #4c9e5a;
  background-color: white;
}
.threadView .thread-reply textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  /*height: 35px;*/
  height: 95px;
  border-radius: 0px;
  background-color: white;
  border: solid 1px #cccccc;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.threadView.writing .thread-reply textarea:focus {
  outline: none;
}

.threadView .thread-reply .thread-send {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: inline-block;
  width: 75px;
  /*height: 35px;*/
  /*line-height: 35px;*/
  font-family: OpenSans;
  text-align: center;
  font-size: 24px;
  border-radius: 12px;
  background-color: #4c9e5a;
  color: white;
  border: none;
  line-height: 95px;
  height: 95px;
}
.threadView .thread-reply .thread-send:active {
  background-color: white;
  color: #4c9e5a;
}
.sending-overlay {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  line-height: 145px;
  font-size: 28px;
  transition: opacity 2s ease;
}
.sending .sending-overlay {
  opacity: 1;
}
.threadView .thread-messages {
  overflow-y: auto;
  padding-top: 15px;
  box-sizing: border-box;
}
.threadView .thread-messages .thread-messages-no-messages {
  font-size: 18px;
  color: white;
  text-align: center;
  font-style: italic;
}
.messageView {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
}
.messageView .message-contact {
	display: inline-block;
	margin-bottom: 2px;
	/*padding-left: 12px;*/
	/*padding-right: 12px;*/
	font-size: 10px;
	font-family: "OpenSans";
	vertical-align: text-bottom;
	color: black;
}
.messageView.self .message-contact {
  text-align: right;
}
.messageView .message {
  position: relative;
  white-space: pre-line;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 5px 10px;
  color: white;
  font-family: "OpenSans";
  font-size: 14px;
  text-align: left;
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 17px;
}

.message-tts {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  padding-left: 3px;
}

.messageView.self .message.more {
  border-radius: 12px 0px 0px 12px;
}

.messageView.self {
  text-align: right;
  padding-right: 32px;
  /*padding-left: 64px;*/
  padding-left: 64px;
}
.messageView.self.hasProfileImage {
  padding-right: 64px;
}

.messageView.self .message {
  /* background-image: linear-gradient(
    358deg,
    #1b7649 -40%,
    #4fa15b 50%,
    #9de176 140%
  ); */
  background-color: #4c9e5a;
  white-space: pre-wrap;
}

.floating-action g use {
  fill: #4c9e5a !important;
}
.messageView.other {
  text-align: left;
  /*padding-right: 64px;*/
  padding-right: 64px;
  padding-left: 32px;
}
.messageView.other.hasProfileImage {
  padding-left: 64px;
}
.messageView.other .message {
  background-color: #e8e8e8;
  color: black;
}
.messageView .image {
  /*float: left;*/
  max-width: 200px;
  max-height: 200px;
  margin-top: 10px;
  /*margin: 5px 10px 0px 0px;*/
}

.messageView .profileImage {
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 15px;
  text-align: center;
  line-height: 40px;
}
.messageView .profile-image {
  max-width: 100%;
  max-height: 100%;
}
.messageView.self .profileImage {
  right: 3px;
}
.messageView.other .profileImage {
  left: 3px;
}

.messageView .read-markers {
  width: 100%;
}
.messageView.self .read-markers {
  text-align: right;
}
.messageView.other .read-markers {
  text-align: left;
}
.messageView .read-marker {
  overflow: hidden;
  font-size: 10px;
  color: white;
  margin: 0 2px;
  /*box-sizing: border-box;*/
  vertical-align: middle;
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
}

/*.selectContacts-title {*/
/*margin-right: 12px;*/
/*margin-left: 12px;*/
/*}*/
.selectContactsView .input[type="text"],
.selectContacts-message-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0px;
  border-radius: 0px;
  display: block;
  border: solid 1px #cccccc;
  font-size: 16px;
  font-family: OpenSans;
  height: 200px;
  line-height: 16px;
  background-color: white;
  color: black;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
}

.image-checkbox input[type="checkbox"],
.agenda-event input[type="checkbox"],
.selectContactsView input[type="checkbox"],
.selectContactsView input[type="radio"] {
  display: none;
}

.image-checkbox input[type="checkbox"] + label,
.agenda-event input[type="checkbox"] + label,
.selectContactsView input + label {
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: white;
  color: #767676;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  background-size: 15px 15px;
  background-repeat: no-repeat;
}
.agenda-event input[type="checkbox"] + label {
  height: auto;
  line-height: normal;
  white-space: normal;
  background-color: transparent;
  padding: 4px 0px;
}
.image-checkbox input[type="checkbox"] + label {
  display: inline;
  padding-left: 30px;
  height: 50px;
  padding-bottom: 20px;
}

.selectContactsView input + label {
  padding-left: 49px;
  font-size: 16px;
  font-family: OpenSans;
  background-position: right;
  color: black;
  margin-right: 20px;
  padding-right: 20px;
}
.section-header {
  background-color: #f8f8f8;
  font-size: 16px;
  color: black;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.selectContacts-header-title {
}

.agenda-event input[type="checkbox"] + label {
  background-position: 0px;
  padding-left: 27px;
}
.radio2 {
  position: absolute;
  right: 10px;
}
.image-checkbox input[type="checkbox"] + label,
.agenda-event input[type="checkbox"] + label,
.selectContactsView input[type="checkbox"] + label {
  background-image: url(../images/checkmark-inactive.png);
}
.image-checkbox input[type="checkbox"]:checked + label,
.agenda-event input[type="checkbox"]:checked + label,
.selectContactsView input[type="checkbox"]:checked + label {
  background-image: url(../images/checkmark-active-dark.png);
}
.selectContactsView input[type="radio"] + label {
  background-image: url(../images/radial-button-inactive.png);
}
.selectContactsView input[type="radio"]:checked + label {
  background-image: url(../images/radial-button-active.png);
}

.selectContactsView .selectContacts-header {
  font-size: 16px;
  color: #a0a0a0;
  letter-spacing: 0;

  padding-left: 20px;
  padding-top: 10px;
}
.contactWrapper {
  border-bottom: solid 1px #eeeeee;
}
.selectContactsView .selectContacts-file-holder {
  padding-top: 5px;
  padding-left: 5px;
}
.selectContactsView .selectContacts-file-preview {
  position: relative;
  font-size: 0;
  padding-bottom: 5px;

  max-width: 150px;
  max-height: 150px;
  min-width: 60px;
  min-height: 60px;
}
.selectContactsView
  .selectContacts-file-preview
  .selectContacts-file-preview-image {
  max-width: inherit;
  max-height: inherit;
  min-width: inherit;
  min-height: inherit;
}
.selectContactsView
  .selectContacts-file-preview
  .selectContacts-file-preview-image-remove {
  position: absolute;
  top: 0px;
  right: 0px;

  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-image: url(../images/delete.svg);
  background-size: 30px 30px;
  background-position: 5px 5px;
  background-repeat: no-repeat;
}
.selectContactsView .selectContacts-file-holder .selectContacts-file-add {
  display: inline-block;
  position: relative;
  color: white;
  /* background-color: #4c9e5a; */
  font-size: 18px;
  /* border-radius: 10px; */
  /* padding: 5px 12px; */

  background-color: #4c9e5a;
  /* border: 1px solid #4c9e5a; */
  padding: 10px;
  border-radius: 30px;
}
.selectContactsView .selectContacts-file-holder .file-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.selectContacts-file-holder .selectContacts-file-add:focus {
  color: #4c9e5a;
  background-color: white;
}
.selectContactsView .selectContacts-file-holder .selectContacts-file {
  margin: 0;
  width: 100%;
  border-radius: 0;
  box-sizing: border-box;
}

.personView {
  font-family: OpenSans;
  color: #2d3a43;
  padding-left: 66px;
}
.personView-name {
  font-size: 18px;

  display: inline-block;
  margin-top: 6px;
  padding-right: 8px;
  padding-left: 8px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}

.personView .profile-image-placer {
  position: absolute;
  top: 16px;
  left: 15px;
  height: 48px;
  width: 48px;
}

.personView-latestMessage {
  font-size: 12px;
  margin-left: 8px;
}
.personHeader {
  font-family: "OpenSans";
  font-size: 16px;
  line-height: 45px;
  height: 45px;
  margin-left: 20px;

  color: #000000;
  letter-spacing: 0;
  background-color: #f8f8f8;
}

.timeslot {
  /*height: 22px;*/
  text-align: right;
}
.threadView .slippery,
.slippery {
  position: static;
}
.threadView .urlLinker {
  color: white;
}

.image-component {
  /*text-align: center;*/
  padding-bottom: 10px;
  overflow: hidden;
}
.image-component .image-add {
  display: inline-block;
  position: relative;
  color: white;
  background-color: #4c9e5a;

  font-size: 18px;
  padding: 10px;
  border-radius: 30px;
}
.image-component .image-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-component .image-add:focus {
  color: #4c9e5a;
  background-color: white;
}
.image-component .image-list {
  font-size: 0;
}
.image-component .image-list .image {
  max-width: 100%;
  /*max-height: 400px;*/

  min-width: 60px;
  min-height: 60px;
  /*margin-right: 10px;*/
  margin-bottom: 10px;
}
.image-component .image-list .image-wrapper {
  display: inline-block;
  position: relative;
}
.image-component .image-list .image-wrapper .image-remove {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-image: url(../images/delete.svg);
  background-size: 30px 30px;
  background-position: 5px 5px;
  background-repeat: no-repeat;
}
.loginBox {
  position: relative;
}
.version {
  font-size: 12px;
}
.loginBox .version {
  position: absolute;
  top: -18px;
  right: 10px;
  color: #2d3a43;
}

#nav .version {
  color: white;
  padding: 10px;
  position: absolute;
  bottom: 10px;
}

.profile-module {
  background-color: white;
  padding-bottom: 20px;
  color: #2d3a43;
}
.profile-image-wrapper label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.profile-image-wrapper {
  position: relative;
  padding: 10px;
}
.profile-image {
  border-radius: 4px;
  border: solid 1px #dcdcdc;
  background-color: #f7f7f7;
  box-sizing: border-box;
}
.profile-module .profile-image-placer {
  position: relative;
  height: 149px;
}
.profile-image-input {
  display: none;
}

.profile-module .profile-row {
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 42px;
  padding-left: 10px;
  padding-right: 20px;
  position: relative;
}
.profile-module .profile-row.collapse {
  min-height: initial;
}
.profile-module .profile-settings-header {
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
.profile-module .profile-settings-spacer {
  height: 5px;
  background-color: #e8e8e8;
}
.profile-module .profile-setting {
  display: inline-block;
  font-size: 25px;
  line-height: 42px;
}

.profile-module .profile-settings .profile-setting span {
  font-size: 17px;
  line-height: 30px;
  vertical-align: text-bottom;
}

.profile-module .profile-settings .alarmSoundValue,
.profile-module .profile-settings .alarmCategoryValue {
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 4px;
  border-radius: 5px;
  vertical-align: middle;
  font-family: sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background-color: white;
  color: #6c6c6c;
  border: 1px solid #c8c8c8;
  min-width: 80px;
  min-height: 30px;
  height: auto;
  text-align: center;
}

.alarmCategoriesSection {
  /*border-bottom: 1px solid #2D3A43;*/
  margin-bottom: 10px;
}

.alarmCategoriesSection .profile-setting {
  font-size: 17px;
  line-height: 30px;
}

.alarmCategoriesSection .profile-row {
  min-height: 34px;
  /*padding-right: 10px;*/
}

.profile-module .alarmCategoryRow {
  /*padding-right: 10px;*/
}

.alarmCategoryRow .profile-value {
  line-height: 40px;
}

.profile-module .page-root {
  z-index: 100;
}

.profile-module .profile-value {
  float: right;
}
.profile-module .profile-value > * {
  display: inline-block;
  vertical-align: middle;
}

.clearProfileImage {
  border: none;
  background-color: transparent;
  color: black;
  padding: 10px;
  padding-top: 0;
  margin: 0;
  font-size: 25px;
}

.changeProfileImage {
  text-align: center;
  top: 90px;
  position: relative;
  width: 75px;
  margin: auto;
  overflow-wrap: break-word;
  color: #a0a0a0;
  font-size: 12px;
}

.bts.danger,
.btr.danger {
  color: #ee4738;
  background-color: transparent;
}

.agendaFlex {
  display: flex;
}

.agendaCol0 {
  flex: 0 0 10px;
}
.agendaCol1 {
  flex: 0 0 45px;
  padding-top: 20px;
  padding-right: 10px;
}
.agendaCol2 {
  flex: 1;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.agendaCol2InnerRow0 {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.agendaCol2InnerRow1 {
  flex: 0 0 45px;
  font-size: 15px;
  color: #767676;
}

.agendaCol2Content {
  flex: 1;
}

.agendaCol2Icons {
  flex: 0 0 30px;
}

.lgButton {
  background-image: linear-gradient(
    2deg,
    #1b7649 0%,
    #4fa15b 50%,
    #9de176 100%
  );
  border-radius: 100px;
  height: 44px;
  min-width: 120px;
  border: none;
  color: white;
  font-size: 18px;
}

.lgButton:active,
.lgButton:hover {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  background-image: linear-gradient(
    2deg,
    #4fa15b 0%,
    #5c8d4f 50%,
    #adf585 100%
  );
}

.lgButton:focus {
  outline: none;
}

.lgButton-xl {
  background-image: linear-gradient(
    2deg,
    #1b7649 0%,
    #4fa15b 50%,
    #9de176 100%
  );
  border-radius: 100px;
  height: 50px;
  min-width: 150px;
  border: none;
  color: white;
}

.lgButton-xl:active,
.lgButton-xl:hover {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  background-image: linear-gradient(
    2deg,
    #4fa15b 0%,
    #5c8d4f 50%,
    #adf585 100%
  );
}

.lgButton-xl:focus {
  outline: none;
}

.agenda-icon-repeat {
  width: 100%;
  text-align: right;
  padding-top: 5px;
}

.main-menu-icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: middle;
  /* background-image: url(../images/menu.svg); */
  background-image: url(../../../src/resources/icons/icon_menu.svg);
}

.page-back-icon {
  display: inline-block;
  height: 13px;
  width: 20px;
  vertical-align: middle;
  background-image: url(../images/arrow_left.svg);
}

.page-close-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  /* background-image: url(../images/close.svg); */
  background-image: url(../../../src/resources/icons/icon_close.svg);
}

.page-ok-icon {
  display: inline-block;
  height: 21px;
  width: 27px;
  vertical-align: middle;
  /* background-image: url(../images/ok.svg); */
  background-image: url(../../../src/resources/icons/icon_done.svg);
}

.user-icon {
  display: inline-block;
  height: 24px;
  width: 22px;
  vertical-align: middle;
  background-image: url(../images/user.svg);
}

.password-icon {
  display: inline-block;
  height: 23px;
  width: 17px;
  vertical-align: middle;
  background-image: url(../images/password.svg);
}

.newCheckItemSubmit {
  display: inline-block;
  height: 25px;
  width: 28px;
  vertical-align: middle;
  background-image: url(../images/checklist-add.svg);
  position: absolute;
  top: 5px;
}

.checkItemDragIndicator {
  display: inline-block;
  height: 17px;
  width: 16px;
  vertical-align: middle;
  /* background-image: url(../images/drag-indicator.svg); */
  background-image: url(../../../src/resources/icons/icon_chevron_double.svg);

  right: 7px;

  top: 5px;
  position: absolute;
  padding: 5px;
  background-repeat: no-repeat;
  background-position: center center;
}

.editor-subtitle {
  background-color: #eeeeee;
  padding-top: 2px;
  /* padding-bottom: 5px; */
}

.editor-group {
  /* border-bottom: solid 10px #eeeeee; */
}

.generic-tab {
  display: inline-block;
  height: 35px;
  line-height: 33px;
  box-sizing: border-box;
  font-size: 16px;
  font-family: OpenSans;
  text-align: center;
  color: #1b1b1b;
  background-color: white;
  border: solid 1px #eeeeee;
  padding-left: 5px;
  padding-right: 5px;
}
.generic-tab:first-child {
  border-radius: 5px 0px 0px 5px;
  border-right-width: 0px;
}
.generic-tab:last-child {
  border-radius: 0px 5px 5px 0px;
  border-left-width: 0px;
}

.generic-tab.active {
  color: white;
  background-color: #4c9e5a;
  border: solid 1px #4c9e5a;
}

.generic-toolbar {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* darkmode */
div.thread-file-add i,
div.selectContacts-file-add i,
div.image-add i {
  vertical-align: -19.28571429%;
}

.volume-up-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_volume_up.svg);
}

.clock-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_clock.svg);
}

.bell-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_bell.svg);
}

.play-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_play.svg);
}

.repeat-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_repeat.svg);
}
.show-text-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_show_text.svg);
}
.moon-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_moon.svg);
}
.consent-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_consent.svg);
}
.key-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_key.svg);
}

/* menu icons */
.calendar-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_calendar.svg);
}
.menuAction.active .calendar-icon {
  background-image: url(../../../src/resources/icons/icon_calendar_chosen.svg);
}

.plan-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_plan.svg);
}
.menuAction.active .plan-icon {
  background-image: url(../../../src/resources/icons/icon_plan_chosen.svg);
}

.contact-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_contact.svg);
}
.menuAction.active .contact-icon {
  background-image: url(../../../src/resources/icons/icon_contact_chosen.svg);
}

.notification-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_notification.svg);
}
.menuAction.active .notification-icon {
  background-image: url(../../../src/resources/icons/icon_notification_chosen.svg);
}

.trophy-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_trophy.svg);
}
.menuAction.active .trophy-icon {
  background-image: url(../../../src/resources/icons/icon_trophy_chosen.svg);
}

.settings-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_settings.svg);
}
.menuAction.active .settings-icon {
  background-image: url(../../../src/resources/icons/icon_settings_chosen.svg);
}

.checkmark-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_checkmark.svg);
}
.menuAction.active .checkmark-icon {
  background-image: url(../../../src/resources/icons/icon_checkmark_chosen.svg);
}

.person-icon {
  display: inline-block;
  height: 48px;
  width: 48px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_person_outline.svg);
}

/* Edit */
.edit-note-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_edit_note.svg);
}

.editGoal-left-spacer {
  margin-left: 10px !important;
  margin-right: 9px;
}
.editGoal .editSymbol-left-spacer {
  margin-left: 10px !important;
  margin-right: 9px;
}

/* Exclamation Icon */
.exclamation-icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: bottom;
  background-image: url(../../../src/resources/icons/icon_exclamation.svg);
}

/* No text */
.hide-text .agenda-menu-active .calendar-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: -30%;
  background-image: url(../../../src/resources/icons/icon_calendar_noText_green.svg);
}
.hide-text .calendar-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: -30%;
  background-image: url(../../../src/resources/icons/icon_calendar_noText_black.svg);
}
.hide-text .agenda-menu-active .grid-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: -30%;
  background-image: url(../../../src/resources/icons/icon_grid_noText_green.svg);
}
.hide-text .grid-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: -30%;
  background-image: url(../../../src/resources/icons/icon_grid_noText_black.svg);
}
.hide-text .edit-note-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_edit_note_notext.svg);
}
.hide-text .contact-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_contact_notext.svg);
}
.hide-text .notification-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_notification_notext.svg);
}
.hide-text .settings-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_settings_notext.svg);
}
.hide-text .star-notext-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-image: url(../../../src/resources/icons/icon_star_notext.svg);
}

#navClose {
  background-image: url(../../../src/resources/icons/icon_close.svg);
}

.editor-repeat-end-datepicker-input {
  display: flex;
  width: 100%;
  /* max-width: 10px; */
}


.archiveThreadMessage{
	display: flex;
	padding: 10px;
	height: 100px;
	width: 100px;
	background-color: red;
}

.message.self{
	color: #27CEE9;
}


.deleteBoxModal{
	display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.72) 100%);
  position: fixed;
  z-index: 5;
}

.deleteBox{
	padding: 20px;
  background-color: white;
  color: black;
  border: 1px solid #F6F6F6;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 34%);
}
.deleteBox .message {
  font-size: 14px;
  white-space: pre-wrap;
}

.deleteButtons{
	display: flex;
	justify-content: center;
  padding: 20px;
  padding-bottom: 0;
}

.deleteYes{
  min-width: 90px;
  box-sizing: border-box;
	text-align: center;
	border: 1px #4C9E5A solid;
	color: white;
	background-color: #4C9E5A;
	padding: 10px 30px;
	margin-right: 20px;
	border-radius: 100px;
}

.deleteNo{
  min-width: 90px;
  box-sizing: border-box;
	text-align: center;
	color: #4C9E5A;
  background-color: white;
	border: 1px #4C9E5A solid;
	padding: 10px 30px;
	border-radius: 100px;
}

.fullscreenImageBox{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-color: black;
  overflow: scroll;
}

.fullscreenImage{
  height: 100vh;
  width: 100vw; 
  object-fit: contain;
  touch-action: pan-x pinch-zoom;
}

.fullscreenCoverImage{
  height: 100vh;
  width: 100vw; 
  object-fit: cover;
  touch-action: pan-x pinch-zoom;
}
.deleteConfirmationBox{
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  color: black;
  background-color: white;
  text-align: center;
  width: 30%;
  min-width: 280px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 20px;
  border-radius: 10px;
  z-index: 1;
  border: 1px solid #4C9E5A;
}

.thread-delete-title{
  font-weight: bold;
  /* padding-bottom: 30px; */
}

.deletedMessage{
  display: inline-block;
  border: lightgray 1px solid;
 
  color: lightgray;
  border-radius: 5px;
  padding:10px;
  font-family: "OpenSans";
  font-size: 14px;
}

.moreThreads{
  padding: 20px 0;
  display: flex;
  z-index: 3;
  justify-content: center;
}

.moreThreadsBtn{
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid #4C9E5A;
  color: white;
  background-color: #4C9E5A;
}