.contextsModule {
    position: fixed;
    width: 100%;
    height: calc(100% - 45px);
    top: 45px;
    background: #f8f8f8;
}

.contextsModule.hidden {
    display: none;
}

.contextsModule .mainToolbar .subModules {
    justify-content: center
}

.contextsModule .mainContent {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.contextsModule .contextList {
    flex: 2;
    overflow-y: auto;
    height: calc(100% - 72px);
}

.contextsModule .contextProperties {
    flex: 1;
    background: #ffffff;
    overflow-y: auto;
    height: calc(100% - 52px);
}

.multiLevelCalendar .weeklyView .calendarHeaderView {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: rgba(70, 110, 181, 0.07);
}

.multiLevelCalendar .weeklyView .calendarHeaderView .headerColumns {
    width: calc(100% - 62px);
    display: flex;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-left: solid 1px rgba(70, 110, 181, 0.07);
    border-bottom: solid 1px rgba(70, 110, 181, 0.07);
    max-width: calc(100% / 7);
    height: 36px;
    box-sizing: border-box;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day.notAllowToDrop {
    cursor: no-drop;
    background-color: #F2F2F2;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day.allowToDrop.underCursor,
.multiLevelCalendar .weeklyView .calendarHeaderView .day.notAllowToDrop.underCursor{
    background-color: #94CBEE;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day.allowToDrop.underCursor .title,
.multiLevelCalendar .weeklyView .calendarHeaderView .day.notAllowToDrop.underCursor .title{
    color: #ffffff;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day .title {
    flex: 1;
    text-align: center;
    height: 36px;
    line-height: 36px;
    /*border-bottom: solid 1px #eeeeee;*/
    color: #5C6367;
    box-sizing: border-box;
}

.multiLevelCalendar .weeklyView .scrollPlace {
    width: 12px;
    height: calc(100%);
}

.multiLevelCalendar .weeklyView .scrollHandler {
    background: rgba(38, 70, 111, 0.6);
    border-radius: 4px;
    width: 10px;
    position: relative;
}
.multiLevelCalendar .weeklyView .titlePlace {
    width: 50px;
    height: calc(100%);
}
.multiLevelCalendar .weeklyView .calendarWeekHoursContainer {
    /*flex: 1;*/
    flex-grow: 1;
    flex-shrink: 0;
}

.multiLevelCalendar .weeklyView .wholeDayView {
    min-height: 14px;
    max-height: 72px;
    border-color: rgba(70, 110, 181, 0.07);
    border-left-width: 1px;
    border-bottom-width: 1px;
    background: rgba(70, 110, 181, 0.07);
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*flex: 0;*/
    /*flex-basis: auto;*/
    flex-grow: 100;
    flex-shrink: 1;
    overflow-y: hidden;
}

.multiLevelCalendar .weeklyView .wholeDayView.hasEntries {
    min-height: 72px;
    max-height: 116px;
}

.multiLevelCalendar .weeklyView .wholeDayView .wholeDayViewContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
}

.multiLevelCalendar .weeklyView .wholeDayView .headerColumns {
    width: calc(100% - 49px);
    display: flex;
    height: fit-content;
    min-height: 100%;
}

.multiLevelCalendar .weeklyView .wholeDayView .day {
    border-left: solid 1px rgba(70, 110, 181, 0.07);
    border-bottom: solid 1px rgba(70, 110, 181, 0.07);
    flex: 1;
    max-width: calc(100% / 7);
}

.multiLevelCalendar .weeklyView .wholeDayView .day.notAllowToDrop {
    cursor: no-drop;
    background-color: #F2F2F2;
}

.multiLevelCalendar .weeklyView .wholeDayView .day.allowToDrop.underCursor,
.multiLevelCalendar .weeklyView .wholeDayView .day.notAllowToDrop.underCursor{
    background-color: #94CBEE;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .bottomPlace {
    height: 6px;
}

.scrollableView .scrollHidden {
    display: none !important;
}

.scrollableView.withScroll .scrollableViewScrollBar {
    width: 12px;
    float: right;
    background: transparent;
    height: calc(100% - 0px);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.scrollableView.withScroll .scrollableViewScrollBar .scrollableViewScrollBarHandler {
    background: rgba(38, 70, 111, 0.6);
    border-radius: 4px;
    width: 10px;
    position: relative;
}

.multiLevelCalendar .weeklyView .calendarWeekHours {
    /*overflow-y: auto;*/
    flex: 0;
    height: 100%;
}

.multiLevelCalendar .weeklyView .hourMinuteRow {
    height: 36px;
    display: flex;
}

.multiLevelCalendar .weeklyView .hourMinuteRow.hidden {
    display: none;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowTitle {
    width: 50px;
    text-align: right;
    background: #f2f5fa;
    border-bottom: solid 1px #f2f5fa;
    box-sizing: border-box;
    color: #5C6367;
    padding-right: 4px
}

.multiLevelCalendar .weeklyView .hourMinuteRow.odd .hourMinuteRowTitle {
    border-bottom-color: #C0C0C0;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowTitle .curStyle {
    height: 2px;
    background-color: #E74C3C;
    position: relative;
    z-index: 100;
    width: calc(100% + 4px);
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowTitle .curTimeMargin {
    margin-top: -2px;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowCell {
    flex: 1;
    border-left: solid 1px #E0E0E0;
    border-bottom: solid 1px #E0E0E0;
    background: #ffffff;
/*    max-width: 13.9%;*/
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowCell.allowToDrop.underCursor,
.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowCell.notAllowToDrop.underCursor{
    background-color: #94CBEE;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowCell.notAllowToDrop {
    cursor: no-drop;
    background-color: #F2F2F2;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowCell .curStyle {
    height: 2px;
    background-color: #E74C3C;
    position: relative;
    z-index: 100;
    width: calc(100% + 1px);
}

.multiLevelCalendar .weeklyView .hourMinuteRow.odd .hourMinuteRowCell {
    border-bottom-color: #C0C0C0;
}

.multiLevelCalendar .weeklyView .hourMinuteRow .hourMinuteRowScrollPane {
    width: 0;
}

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

.smoothScrollableView .scrollBarArea {
    width: 12px;
    background: transparent;
}

.smoothScrollableView .scrollBarArea .scrollBarHandler {
    background: rgba(38, 70, 111, 0.6);
    border-radius: 4px;
    width: 10px;
}
.multiLevelCalendar .weeklyView {
    width: calc(100%);
    height: calc(100%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.twoPartsView {
    height: calc(100%);
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.twoPartsView .singlePartView {
    height: calc(50%);
    display: flex;
    flex-direction: column;
}

.twoPartsView .singlePartView.top {
    height: calc(40%);
}

.twoPartsView .singlePartView.bottom {
    height: calc(60%);
}

.twoPartsView .singlePartView.smoothScrollableView {
    flex-direction: row;
    height: calc(100% - 40px);
    overflow-y: hidden;
    background-color: white;
}

.twoPartsView .singlePartView .singlePartViewHeader {
    display: flex;
    flex-direction: row;
}

.twoPartsView .singlePartView .scrolledNestedView {
    width: calc(100% - 0px);
    height: 100%;
    overflow: hidden;
}

.twoPartsView .singlePartView .scrolledNestedView .nestedView {
    display: flex;
    flex-direction: row;
    min-height: 100%;
    width: fit-content;
    background-color: white;
}

.twoPartsView .singlePartView .titleCount {
    height: 40px;
    font-size: 11pt;
    display: flex;
    flex-direction: row;
    background: rgba(70, 110, 181, 0.07);
    border: solid 1px rgba(70, 110, 181, 0.07);
    box-sizing: border-box;
    padding: 6px 0;
    color: #5C6367;
}

.twoPartsView .singlePartView .titleCount .title {
    flex: 1;
    padding-left: 16px;
    line-height: 28px;
}

.twoPartsView .singlePartView .titleCount.life .title {
    text-align: center;
}

.twoPartsView .singlePartView .singlePartViewHeader.bottom .titleCount {
    cursor: pointer;
}

.twoPartsView .singlePartView .singlePartViewHeader .titleCount.current .title {
    color: #FFFFFF;
}

.twoPartsView .singlePartView .singlePartViewHeader .titleCount .count {
    min-width: 28px;
    max-width: 32px;
    background: #DEDEDE;
    text-align: center;
    margin-right: 8px;
    line-height: 26px;
    height: 26px;
}

.twoPartsView .singlePartView .singlePartViewHeader.bottom .titleCount {
    height: 65px;
    flex-direction: column;
    background: rgba(70, 110, 181, 0.07);
    border-color: #E3E4E4;
    border-right: none;
}

.twoPartsView .singlePartView .singlePartViewHeader .titleCount.current {
    background-color: rgba(83, 148, 207, 0.8);
}

.twoPartsView .singlePartView .singlePartViewHeader.bottom .titleCount .count {
    margin-right: 0;
    margin-left: 16px;
}

.twoPartsView .singlePartView .topLevelCellArea {
    /*height: calc(100% - 40px);*/
    overflow-y: hidden;
    background: #fff;
    /*border-left: solid 1px #e0e0e0;*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding-bottom: 4px;
}

.twoPartsView .singlePartView.bottom .topLevelCellArea {
    /*height: calc(100% - 65px);*/
}

.twoPartsView .singlePartView .singlePeriodView {
    border-left: solid 1px #e0e0e0;
    box-sizing: border-box;
}

.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.allowToDrop.underCursor,
.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.notAllowToDrop.underCursor {
    background-color: #94CBEE;
    margin-top: -4px;
    padding-top: 4px;
}

.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.allowToDrop.underCursor .topLevelCellArea,
.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.notAllowToDrop.underCursor .topLevelCellArea {
    background-color: #94CBEE;
}

.twoPartsView .singlePartView .singlePartViewHeader .titleCount.allowToDrop.underCursor,
.twoPartsView .singlePartView .singlePartViewHeader .titleCount.notAllowToDrop.underCursor {
    background-color: #94CBEE;
    color: #fff;
}

.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.notAllowToDrop {
    cursor: no-drop;
    background-color: #F2F2F2;
    margin-top: -4px;
    padding-top: 4px;
}

.multiLevelCalendar .twoPartsView .singlePartView .singlePeriodView.notAllowToDrop .topLevelCellArea {
    background-color: #F2F2F2;
}

.twoPartsView .singlePartView .singlePartViewHeader .titleCount.notAllowToDrop {
    cursor: no-drop;
}

.toolbarAction {
    border: 1px solid #5394CF;
    border-radius: 3px;
    color: #5394CF;
    padding: 0 8px 0 32px;
    min-width: 68px;
    margin: 6px 4px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
}

.toolbarAction:hover {
    background-color: rgba(83, 148, 207, 0.07);
}

.toolbarAction:active {
    color: #466EB5;
    border-color: #466EB5;
    background-color: rgba(62, 116, 166, 0.07);
}

.toolbarAction.disabled {
    display: none;
}
.toolbarQuickAction {
    border: 1px solid transparent;
    border-radius: 3px;
    color: #5394CF;
    padding: 0;
    width: 35px;
    height: 35px;
    margin: 6px 4px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
}

.toolbarQuickAction:hover {
    background-color: rgba(83, 148, 207, 0.07);
}

.toolbarQuickAction:active {
    color: #466EB5;
    background-color: rgba(62, 116, 166, 0.07);
}

.toolbarQuickAction.disabled {
    display: none;
}
.dateTimeEditor .picker .periodNavigator {
    text-align: center;
    height: 36px;
    line-height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.dateTimeEditor .picker .periodNavigator .periodName {
    flex: 1;
}

.dateTimeEditor .picker .periodNavigator div {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 36px;
    font-size: 1.2em;
}

.dateTimeEditor .picker .periodNavigator div.prevYear {
    background: transparent url(798a63aa69b3ff234d89.svg) center no-repeat;
}

.dateTimeEditor .picker .periodNavigator div.prevMonth {
    background: transparent url(34b2aac902440ae89957.svg) center no-repeat;
}

.dateTimeEditor .picker .periodNavigator div.nextYear {
    background: transparent url(eb2fd0a2b01f45c9dcb9.svg) center no-repeat;
}

.dateTimeEditor .picker .periodNavigator div.nextMonth {
    background: transparent url(ff864d10287c5adae8b7.svg) center no-repeat;
}

.monthView {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.monthView .monthWeekView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  height: 36px;
  line-height: 32px;
}

.monthView .monthWeekView .weekNo {
  min-width: 32px;
  font-weight: bold;
  text-align: center;
}

.monthView .monthWeekView .dayView {
  flex: 1;
  text-align: center;
  border: solid 2px transparent;
  border-radius: 0;
  cursor: pointer;
  background-color: #ffffff;
  margin: 1px;
}

.monthView .monthWeekView:not(.selectable):not(.weekDays) .dayView:hover {
  background: rgba(83, 148, 207, 0.07);
}

.monthView .monthWeekView.current {
  background-color: #ddeaf5;
  color: #ffffff;
}

.monthView .monthWeekView.selectable:not(.current) {
  cursor: pointer;
}

.monthView .monthWeekView.selectable:not(.current):not(.weekDays):hover .dayView {
  background-color: rgba(83, 148, 207, 0.07);
}

.monthView .monthWeekView .dayView.today {
  border: solid 2px #ff0000;
}

.monthView .monthWeekView .dayView.current {
  cursor: default;
  background-color: #466eb5;
  color: #ffffff
}

.monthView .monthWeekView .dayView.prev, .monthView .monthWeekView .dayView.next {
  background: #f2f2f2;
  color: #333333;
}

.monthView .monthWeekView.current .dayView {
  background-color: #26466F;
  color: #ffffff;
}

.monthView .monthWeekView.weekDays {
  background-color: rgba(83, 148, 207, 0.2);
}

.monthView .monthWeekView .dayView.weekDay {
  font-weight: bold;
  background-color: transparent;
}

.dateTimeEditor {
    display: none;
    min-width: 104px;
    height: 32px;
    line-height: 32px;
    outline: none;
}

.dateTimeEditor .currentDate {
    padding: 0 4px;
    text-align: center;
    min-height: 32px;
}

.dateTimeEditor .picker {
    position: absolute;
    background: #ddeaf5;
    width: 340px;
    z-index: 10;
    padding: 4px 8px;
}

.dateTimeEditor .picker .buttons {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin: 8px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.dateTimeEditor .picker .buttons.empty {
    height: 8px;
    margin: 0;
}

.dateTimeEditor .picker .buttons button {
    background-color: transparent;
    color: #5394CF;
    border: solid 1px #5394CF;
    border-radius: 3px;
    cursor: pointer;
    min-width: 40px;
    line-height: 32px;
    padding: 0 16px;
    margin: 0 8px 0 0;
}

.dateTimeEditor .picker .buttons button:hover {
    background-color: rgba(83, 148, 207, 0.07)
}

.dateTimeEditor .picker .buttons button:active {
    color: #466EB5;
    border-color: #466EB5;
    background-color: rgba(62, 116, 166, 0.07);
}

.dateTimeEditor .monthWeekView .weekNo {
    display: none;
}

.dateTimeEditor.visible {
    display: block;
}
.datetimePicker {
    min-width: 104px;
    height: 32px;
    line-height: 32px;
}

.datetimePicker .dateTimeViewer {
    cursor: pointer;
    padding: 0 4px;
    text-align: center;
    min-height: 32px;
}

.datetimePicker .dateTimeViewer:hover {
    background: #f2f2f2;
}

.datetimePicker .dateTimeViewer.hidden {
    display: none;
}
.serverProgressDiv {
    position: fixed;
    width: 100%;
    height: 4px;
    top: 94px;
    z-index: 20;
    background: transparent;
    display: none;
}

.serverProgressDiv.visible {
    display: block;
}

.serverProgressDiv .progressBackground {
    background: #5394CF;
    height: 4px;
}

.serverProgressDiv.error .progressBackground {
    background: #5394CF;
}

.questionDialog {
    position: fixed;
    top: 20px;
    width: 600px;
    margin: auto;
    border-radius: 4px;
    padding: 16px 44px;
    text-align: center;
    left: calc(50% - 344px);
    z-index: 21000;
    background: #FFFFFF;
    color: #333333;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
}

.questionDialog button.closeButton {
    width: 24px;
    height: 24px;
    background: url(f68dd05434c7bb3758f4.svg) no-repeat;
    background-size: 13px;
    background-position: 100%;
    float: right;
    top: 6px;
    right: 9px;
    position: absolute;
    cursor: pointer;
    border: none;
}

.questionDialog .buttons {
    margin: 16px 0 0 0;
}

.questionDialog button.confirm, .questionDialog button.reject {
    width: 120px;
    padding: 8px 16px;
    margin: 4px;
    border-radius: 3px;
    border: 1px solid #98BFE2;
    cursor: pointer;
    display: inline-block;
    color: #98BFE2;
    background: #FFFFFF;
    box-sizing: content-box;
    font-size: 12pt;
}

.questionDialog button.confirm {
    background-color: #5394CF;
    color: #FFFFFF;
}

.dynamicComboBox .valueView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 35px;
  line-height: 35px;
  position: relative;
  border: solid 1px #eee;
  border-radius: 4px;
}
.dynamicComboBox .valueView .dynamicComboBoxValue {
  padding: 0 4px;
  background: url(b8235262e324161dc645.svg?v=1) calc(100% - 8px) center / 14px no-repeat;
  flex: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dynamicComboBox .valueView .dynamicComboBoxValue.open {
  background-image: url(913e386ef4d4832faa78.svg?v=1);
}
.dynamicComboBox .valueView .toolbarQuickAction.closeAction {
  background-image: url(2d2e45b5a2e4b5e86835.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  box-sizing: border-box;
  border-left: solid 1px #eee;
}
.dynamicComboBox .valueView.open {
  border-radius: 4px 4px 0 0;
}
.dynamicComboBox .list {
  position: absolute;
  display: none;
  flex-direction: column;
  max-height: 178px;
  width: 214px;
  background: #fff;
  box-sizing: border-box;
  border: solid 1px #eee;
  overflow: auto;
  margin-top: 36px;
  margin-left: 0px;
  outline: none;
}
.dynamicComboBox .list .item {
  height: 35px;
  line-height: 35px;
  padding: 0 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dynamicComboBox .list .item.centered {
  text-align: center;
}
.dynamicComboBox .list .item:hover {
  background: rgba(83, 148, 207, 0.07);
}
.dynamicComboBox .list .item.disabled {
  cursor: default;
  background: transparent;
}
.dynamicComboBox .list.open {
  display: block;
}

.dynamicComboBox.contexts .list .item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
  cursor: pointer;
}
.dynamicComboBox.contexts .list .item .checkBox {
  min-width: 28px;
}
.dynamicComboBox.contexts .list .item .checkBox.checked {
  background: transparent url(ab0650264814e9ff4895.svg) center / 28px no-repeat;
}
.dynamicComboBox.contexts .list .item .checkBox.unchecked {
  background: transparent;
}
.dynamicComboBox.contexts .list .item .icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 28px;
  justify-content: center;
}
.dynamicComboBox.contexts .dynamicComboBoxValue {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
}
.dynamicComboBox.contexts .dynamicComboBoxValue .icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 28px;
  justify-content: center;
}
.dynamicComboBox.contexts .dynamicComboBoxValue .icon.special {
  min-width: 0;
}
.dynamicComboBox.contexts .dynamicComboBoxValue .icon.many {
  min-width: 2px;
}
.dynamicComboBox.contexts .dynamicComboBoxValue .value {
  flex: 1;
}
.dynamicComboBox.contexts .dynamicComboBoxValue .value.special {
  text-align: center;
  margin-left: -16px;
}

.settingsModule {

}

.settingsModule .settingsMainArea {
    overflow-y: auto;
    min-height: calc(100vh - 94px);
}

.settingsGroups {
    width: 700px;
    padding: 8px 0;
    margin: 0 auto;
}

.settingsGroups .settingGroup {
    margin: 8px 0;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
}

.settingsGroups .settingGroup.subscription {
    background: #fff;
}

.settingsGroups .settingGroup .title {
    background-color: #26466F;
    color: #fff;
    line-height: 34px;
    border-radius: 5px 5px 0 0;
    padding: 0 16px;
}

.settingView {
    display: flex;
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: solid 1px #E0E0E0;
    box-sizing: border-box;
    cursor: pointer;
}

.settingView.last {
    border-radius: 0 0 6px 6px;
}

.settingView:hover {
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.07), rgba(83, 148, 207, 0.07)), #FFFFFF none;
}

.settingView .label {
    width: 182px;
    padding-left: 16px;
    box-sizing: border-box;
    font-weight: bold;
    white-space: nowrap;
}

.settingView .value {
    width: calc(100% - 182px);
    text-align: right;
    padding-right: 16px;
    box-sizing: border-box;
    outline: none;
}

.settingView .value.link span {
    cursor: pointer;
    color: #466EB5;
}

.settingView .value.link span:hover {
    text-decoration: underline;
}

.settingView .value.button span {
    display: inline-block;
    padding: 8px 14px;
    cursor: pointer;
    min-width: 154px;
    box-sizing: border-box;
    text-align: center;
    line-height: 19px;
    border-radius: 4px;
    margin: 6px 0;
    background: transparent;
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .value.button span:hover {
    background: rgba(83, 148, 207, 0.07);
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .value.button span:active {
    background: rgba(62, 116, 166, 0.07);
    border: 1px solid #466EB5;
    color: #466EB5;
}

.settingView .value.combobox span {
    cursor: pointer;
    background: url(8ea5f099d3c22ec25a69.svg) no-repeat right center;
    display: inline-block;
    padding: 0 32px 0 0;
}

.settingView .value.combobox div.languageItem,
.settingView .value.combobox div.moduleTypeItem,
.settingView .value.combobox div.countryItem,
.settingView .value.combobox div.timeZoneItem  {
    cursor: pointer;
    display: block;
    padding: 0 24px 0 0;
}

.settingView .value.combobox div.countryItem, .settingView .value.combobox div.timeZoneItem {
    padding: 0 16px 0 0;
}

.settingView .value.combobox .timeZoneList {
    display: none;
}

.settingView .value.combobox .timeZoneList.expanded {
    display: block;
    padding-right: 16px;
}

.settingView .value.combobox div.languageItem:first-child, .settingView .value.combobox div.moduleTypeItem:first-child {
    background: url(8ea5f099d3c22ec25a69.svg) no-repeat right center;
}

.settingView .value.combobox div.languageItem div, .settingView .value.combobox div.moduleTypeItem div {
    padding-right: 8px;
}

.settingView .value.combobox div.languageItem:hover div, .settingView .value.combobox div.moduleTypeItem:hover div {
    background: #FFFFFF;
}

.settingView.edit {
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.07), rgba(83, 148, 207, 0.07)), #FFFFFF none;
}

.settingView.edit.expanded {
    min-height: 50px;
    height: initial;
}

.settingView.edit.dialog {
    flex-wrap: wrap;
}

.settingView.edit.dialog.remove {
    flex-direction: column;
    padding: 12px 16px;
    outline: none;
}

.settingView.edit .value input {
    line-height: 28px;
    padding: 0;
    border: none;
    text-align: right;
    font-size: 12pt;
    outline: none;
    width: calc(100% - 6px);
    font-family: "PT Sans", "Arial", sans-serif;
    margin: 10px 0;
}

.planName {
    font-size: 12pt;
    line-height: 43px;
    color: #333;
    padding: 0 16px;
    font-weight: 700;
}

.paymentPlanDetails {
    font-size: 12pt;
    line-height: 21px;
    color: #333;
    padding: 15px 16px 0 16px;
    border-top: solid 1px #E0E0E0;
}

.paymentPlanActions {
    padding: 16px;
}

.paymentPlanActions button, .paymentPlanMain button {
    background: #FF7E00;
    padding: 7px 19px;
    text-align: center;
    border-radius: 3px;
    outline: none;
    border: none;
    color: #ffffff;
    font-size: 12pt;
    height: 35px;
    cursor: pointer;
}

.paymentPlanActions button:hover {
    background: #F17700;
}

.paymentPlanActions button:active {
    background: #DE6B00;
}

.settingView .dialogButtonsDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 16px;
    cursor: default;
}

.settingView .dialogButtonsDiv button {
    margin: 4px 0 10px 8px;
    line-height: 20px;
    padding: 8px 32px;
    outline: none;
    cursor: pointer;
    border-radius: 3px;
    min-width: 90px;
    text-align: center;
    font-size: 12pt;
    font-family: "PT Sans", Arial, sans-serif;
    background: transparent;
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .dialogButtonsDiv button:hover {
    background: rgba(83, 148, 207, 0.07);
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .dialogButtonsDiv button:active {
    background: rgba(62, 116, 166, 0.07);
    border: 1px solid #466EB5;
    color: #466EB5;
}

.settingView .dialogButtonsDiv button.default {
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
    border-radius: 3px;
}

.settingView .dialogButtonsDiv button.default:hover {
    background-color: #466EB5;
    border-color: #466EB5;
    color: #fff;
}

.settingView .dialogButtonsDiv button.default:active {
    background-color: #466EB5;
    border-color: #466EB5;
    color: #fff;
}

.settingView .label.wide {
    width: 260px;
}

.settingView .errorMessage {
    color: #804000;
    width: 100%;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
}

.settingView.edit.dialog .subtitle {
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    padding-bottom: 4px;
}

.bottomArea {
    height: 50px;
}

.settingView .passwordChangedMessage {
    display: inline-block;
    padding-right: 32px;
    color: #00ce00;
}

.settingView .value.exportDialog {
    line-height: 28px;
    text-align: left;
    padding-left: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: default;
}

.settingView .exportRemovedFlag {
    display: block;
    line-height: 28px;
    margin-left: -8px;
    height: 28px;
}

.settingView.edit .value .exportRemovedFlag input {
    width: 30px;
    min-width: 30px;
    cursor: pointer;
    height: 18px;
}

.settingView.edit .value .exportRemovedFlag span {
    vertical-align: top;
    cursor: pointer;
    line-height: 38px;
}

.settingView .label.exportDialog {
    padding-top: 8px;
    cursor: default;
    padding-left: 10px;
}

.settingView .label.exportDialog button {
    font-weight: normal;
    margin-left: 2px;
    display: inline-block;
    padding: 8px 14px;
    cursor: pointer;
    min-width: 154px;
    box-sizing: border-box;
    line-height: 19px;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 12pt;
    background-color: #5394CF;
    color: #fff;
    border: solid 1px #5394CF;
    border-radius: 3px;
}

.settingView .label.exportDialog button:hover {
    background-color: #466EB5;
    border-color: #466EB5;
    color: #fff;
}

.settingView .label.exportDialog button:active {
    background-color: #466EB5;
    border-color: #466EB5;
    color: #fff;
}

.settingView .errorMessage {
    color: #804000;
    padding: 0 !important;
}

.settingView.edit.time .value {
    width: calc(100% - 182px);
    padding-left: 170px;
}

.settingView.edit .value input {
    width: calc(100% - 6px);
}

.settingView .value.combobox .remindTimeList {
    max-height: 300px;
    overflow-y: auto;
    position: relative;
    background: #fff;
    width: 310px;
    outline: none;
    margin-left: 40px;
}

.settingView .value.combobox .remindTimeList div.remindTimeItem div {
    padding-right: 35px;
}

.settingView .value.combobox .remindTimeList div.remindTimeItem:hover div {
    background: rgba(83, 148, 207, 0.07);
}

.passwordInputField {
    display: flex;
    width: 100%;
}

.settingView.edit .passwordInputField .value input {
    text-align: left;
    padding: 0 8px;
    margin: 8px 0;
    width: calc(100% - 20px);
}
.removeAccountField {
    display: flex;
    flex-direction: row;
    height: 32px;
    padding: 4px 0;
}

.removeAccountField .reason {
    line-height: 32px;
    height: 32px;
    padding: 0 4px;
    cursor: pointer;
    white-space: nowrap;
}

.removeAccountField .addReason {
    display: inline-block;
    float: right;
    text-align: left;
    width: 326px;
    padding: 0 4px;
    margin-top: -2px;
    border: solid 2px #eee;
    border-radius: 3px;
    outline: none;
    margin-left: 24px;
}

.removeAccountField .addReason.ru {
    width: 280px;
}

.removeAccountField .addReason.disabled {
    background: #f8f8f8;
    color: #999;
    border: solid 2px #f8f8f8;
    font-family: "PT Sans", Arial, serif;
    font-size: 12pt;
    display: none;
}

.removeAccountField .reasonCheckbox {
    margin-top: 8px;
}

.settingView.remove .othersReasons {
    width: calc(100% - 8px);
    display: block;
    resize: none;
    height: 60px;
    border: solid 1px #eee;
    border-radius: 4px;
    outline: solid 1px #eee;
    padding: 4px;
    margin-top: 8px;
    font-family: "PT Sans", Arial, serif;
    font-size: 12pt;
}

.removeAccountHint, .removeAccountError {
    padding: 8px 0;
    line-height: 32px;
    height: 32px;
}

.removeAccountError {
    color: #FF0000;
}

.removeAccountButtons {
    margin: 4px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0 8px 0;
    width: 100%;
}

.removeAccountButtons button {
    height: 37px;
    line-height: 19px;
    padding: 8px 32px;
    background: transparent;
    border: 1px solid #5394CF;
    color: #5394CF;
    border-radius: 3px;
    cursor: pointer;
    min-width: 156px;
    font-family: "PT Sans", Arial, serif;
    font-size: 12pt;
}

.removeAccountButtons .confirmRemoving {
    background: #E93636;
    border: 1px solid #E93636;
    color: #ffffff;
    font-weight: normal;
}

.settingView .value.combobox .countryList {
    max-height: 350px;
    overflow-y: auto;
    position: relative;
    background: #fff;
    width: 510px;
    outline: none;
}

.settingView .value.combobox .countryList div.countryItem div {
    padding-right: 10px;
}

.settingView .value.combobox .countryList div.timeZoneItem div {
    padding-right: 20px;
}

.settingView .value.combobox .countryList div.countryItem:hover div,
.settingView .value.combobox .countryList div.timeZoneItem:hover div {
    background: rgba(83, 148, 207, 0.07);
}

.userName {
    display: inline-block;
    padding-right: 20px;
}

.settingView .value.connectButton span {
    border: 1px solid #5394CF;
    line-height: 19px;
    padding: 8px 32px;
    cursor: pointer;
    border-radius: 3px;
    min-width: 90px;
    display: inline-block;
    text-align: center;
    margin: 6px 0;
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
}

.settingView .value.connectButton span:hover {
    color: #FFFFFF;
    background-color: #466EB5;
    border-color: #466EB5;
}

.settingView .value.connectButton span:active {
    color: #5394CF;
    background-color: #466EB5;
    border-color: #466EB5;
}

.settingView .value.connectButton span.connected {
    background: transparent;
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .value.connectButton span.connected:hover {
    background: rgba(83, 148, 207, 0.07);
    border: 1px solid #5394CF;
    color: #5394CF;
}

.settingView .value.connectButton span.connected:active {
    background: rgba(62, 116, 166, 0.07);
    border: 1px solid #466EB5;
    color: #466EB5;
}

.subscriptionPlanBlock {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    line-height: 50px;
    height: 50px;
    padding: 0 16px;
}

.subscriptionPlanBlock .planNameTitle {
    font-weight: bold;
}

.subscriptionPlanBlock button {
    float: right;
    margin-top: 8px;
    min-width: 156px;
    font-size: 12pt;
    height: 35px;
    cursor: pointer;
    background-color: #5394CF;
    color: #fff;
    border: solid 1px #5394CF;
    border-radius: 3px;
}

.subscriptionPlanBlock button:hover, .subscriptionPlanBlock button:active {
    background-color: #466EB5;
    border-color: #466EB5;
    color: #fff;
}

.subscriptionInformationBlock {
    border-top: solid 1px #E0E0E0;
    padding: 0 16px;
}

.subscriptionInformationBlock .nextPayment {
    font-size: 12pt;
    line-height: 21px;
    color: #333;
    padding: 15px 0 0 0;
}

.subscriptionInformationBlock .actions {
    padding: 16px 0;
}

.subscriptionInformationBlock .actions button {
    padding: 7px 19px;
    text-align: center;
    border-radius: 3px;
    outline: none;
    font-size: 12pt;
    height: 35px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #5394CF;
    color: #5394CF;
}

.subscriptionInformationBlock .actions button:hover {
    background: rgba(83, 148, 207, 0.07);
    border: 1px solid #5394CF;
    color: #5394CF;
}

.subscriptionInformationBlock .actions button:active {
    background: rgba(62, 116, 166, 0.07);
    border: 1px solid #466EB5;
    color: #466EB5;
}

.subscriptionInformationBlock .actions button.main {
    border: solid 1px #FF7E00;
    color: #FFFFFF;
    background: #FF7E00;
}

.subscriptionInformationBlock .actions button.main:hover {
    background: #F17700;
}

.subscriptionInformationBlock .actions button.main:active {
    background: #DE6B00;
}

.errorDialog {
    position: fixed;
    top: 45px;
    width: 600px;
    margin: auto;
    border-radius: 4px;
    padding: 16px 44px;
    text-align: center;
    left: calc(50% - 344px);
    z-index: 21000;
    background: #C65656;
    color: #FFFFFF;
}

.errorDialog button {
    width: 24px;
    height: 24px;
    background: url(f68dd05434c7bb3758f4.svg) no-repeat;
    background-size: 13px;
    background-position: 100%;
    float: right;
    top: 6px;
    right: 9px;
    position: absolute;
    cursor: pointer;
    border: none;
}
.chooseNotebookDialog {
    position: fixed;
    width: 600px;
    height: 320px;
    left: calc(50% - 336px);
    top: calc(50% - 176px);
    padding: 16px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.chooseNotebookDialog .dialogTitle {
    margin-bottom: 16px;
}

.chooseNotebookDialog .notebookList {
    flex: 1;
    max-height: 240px;
    overflow-y: auto;
}

.chooseNotebookDialog .chooseNotebooksButtons {
    display: flex;
    height: 36px;
    line-height: 24px;
    padding: 4px 8px;
}

.chooseNotebookDialog .chooseNotebooksButtons button {
    border: solid 1px #5394CF;
    color: #5394CF;
    background: #FFFFFF;
    height: 37px;
    line-height: 15px;
    min-width: 120px;
    border-radius: 3px;
    padding: 8px 9px 8px 9px;
    margin: 4px;
    font-size: 12pt;
    font-family: "PT Sans", Arial, sans-serif;
    cursor: pointer;
}

.chooseNotebookDialog .chooseNotebooksButtons button:hover {
    background: rgba(83, 148, 207, 0.07);
}

.chooseNotebookDialog .chooseNotebooksButtons button:active {
    background: rgba(62, 116, 166, 0.07);
    border-color: #466EB5;
    color: #466EB5;
}

.chooseNotebookDialog .chooseNotebooksButtons button.main {
    border: solid 1px #FF7E00;
    color: #FFFFFF;
    background: #FF7E00;
}

.chooseNotebookDialog .chooseNotebooksButtons button.main:hover {
    background: #F17700;
}

.chooseNotebookDialog .chooseNotebooksButtons button.main:active {
    background: #DE6B00;
}

.chooseNotebookDialog .notebook {
    display: flex;
    height: 34px;
    line-height: 34px;
}

.chooseNotebookDialog .notebook .notebookTitle {
    flex: 1;
    cursor: pointer;
}

.chooseNotebookDialog .notebook .checkbox {
    width: 33px;
    height: 33px;
    display: inline-block;
    padding-right: 8px;
    vertical-align: top;
    cursor: pointer;
}

.chooseNotebookDialog .notebook .unchecked {
    background: transparent url(4958188204b23257e5aa.svg) no-repeat 4px center;
    background-size: 18px;
}

.chooseNotebookDialog .notebook .unchecked:hover {
    background: transparent url(913258b942ff908918ee.svg) no-repeat 4px center;
    background-size: 18px;
}

.chooseNotebookDialog .notebook .checked {
    background: transparent url(f2b58656fe65a41cd3c1.svg) no-repeat 4px center;
    background-size: 18px;
}

.chooseNotebookDialog .notebook .checked:hover {
    background: transparent url(b4100c1eb4a718a0be2c.svg) no-repeat 4px center;
    background-size: 18px;
}
.mainToolbar {
    height: 49px;
    min-height: 49px;
    background: #FFFFFF;
    -webkit-box-shadow: 0 4px 10px 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 15%);
    width: 100%;
    display: flex;
    z-index: 10;
    position: relative;
}

.mainToolbar .subModules {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mainToolbar .subModules .subModule {
    padding: 0 22px 0 0;
    background: transparent url(2f88ec05be8a235c6dde.svg) calc(100% - 0px) center no-repeat;
    background-size: 22px;
    cursor: pointer;
}

.mainToolbar .subModules .subModule.active {
    font-weight: bold;
    cursor: default;
}

.mainToolbar .subModules .subModule:last-child {
    background-image: none;
}

.mainToolbar .rightActionButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    right: 4px;
}

.mainToolbar .leftActionButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    left: 4px;
}

.settingsModule .mainToolbar .subModules {
    justify-content: center;
}
.contextList {
    padding: 10px 24px 14px 16px;
}

.contextList .contextsByType {
    padding-top: 8px;
}

.contextList .contextsByType .title {
    height: 40px;
    line-height: 40px;
    margin: 0;
    background: #26466F url(175a7b8b2633e3137040.svg) 8px center no-repeat;
    color: #FFFFFF;
    padding-left: 32px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.contextList .contextsByType.disposed .title {
    background: #26466F url(aebe35c59386d31833b3.svg) 8px center no-repeat;
}

.contextList .contextsByType .title .icon {
    width: 40px;
    height: 40px;
}

.contextList .contextsByType.Category .title .icon {
    background: transparent url(3487f3dd89d841230126.svg) center no-repeat;
    background-size: 18px;
}
.contextList .contextsByType.Person .title .icon {
    background: transparent url(3f479298bd70f683a6e0.svg) center no-repeat;
    background-size: 18px;
}
.contextList .contextsByType.Place .title .icon {
    background: transparent url(3617419fa08d7dc0a8e4.svg) center no-repeat;
    background-size: 18px;
}

.contextList .contextsByType.disposed .list {
    display: none;
}

.contextList .contextsByType .context {
    height: 50px;
    line-height: 50px;
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.07), rgba(83, 148, 207, 0.07)), #FFFFFF;
    padding-left: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.contextList .contextsByType .context:nth-child(odd) {
    background: #FFFFFF;
}

.contextList .contextsByType .context.selected {
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.3), rgba(83, 148, 207, 0.3)), #FFFFFF !important;
}

.contextList .contextsByType .context .contextName {
    flex: 1;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.contextList .contextsByType .context .categoryColor {
    width: 18px;
    height: 18px;
    border: solid 1px #333;
    box-sizing: border-box;
    margin-right: 10px;
    border-radius: 2px;
}

.contextList .contextsByType .context .organizationName {
    margin-right: 10px;
    font-style: italic;
    padding: 0 4px;
    max-width: 40%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.contextList .contextsByType .emptyContextList {
    margin: 16px 0;
}

.contextList .contextsByType .emptyContextList .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.contextList .contextsByType .emptyContextList .buttons .toolbarAction {
    min-width: 180px;
    background-image: url(08b34f12c05ccf7db9ed.svg);
}

.contextList .contextsByType .emptyContextList .buttons .toolbarAction.Category {
    /*background-image: url("@uniremis/icons/svg/contexts/context-category-blue.svg");*/
    background-size: 18px 18px;
    background-position: 8px center;
    background-repeat: no-repeat;
}

.contextList .contextsByType .emptyContextList .buttons .toolbarAction.Person {
    /*background-image: url("@uniremis/icons/svg/contexts/context-person-blue.svg");*/
    background-size: 18px 18px;
    background-position: 8px center;
    background-repeat: no-repeat;
}

.contextList .contextsByType .emptyContextList .buttons .toolbarAction.Place {
    /*background-image: url("@uniremis/icons/svg/contexts/context-place-blue.svg");*/
    background-size: 18px 18px;
    background-position: 8px center;
    background-repeat: no-repeat;
}

.contextProperties .contextProperty {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 55px;
    line-height: 54px;
    box-sizing: border-box;
    border-bottom: solid 1px #eeeeee;
}

.contextProperties .contextProperty.otherEditing {
    background: #FFFFFF;
    cursor: default;
}

.contextProperties .contextProperty.disabled {
    background: #F5F5F5;
    cursor: default;
}

.contextProperties .contextProperty:not(.disabled):not(.otherEditing):not(.editing):hover {
    background-color: #f3f7fb;
    cursor: pointer;
}

.contextProperties .contextProperty.editing {
    background: #5394cf;
    color: #ffffff;
}

.contextProperties .contextProperty .title {
    font-weight: bold;
    width: 156px;
    padding: 0 8px;
    white-space: nowrap;
}

.contextProperties .contextProperty .value {
    text-align: right;
    flex: 1;
    margin-right: 16px;
    cursor: default;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.contextProperties .contextProperty.editing .value {
    margin-right: 8px;
}

.contextProperties .contextProperty .value.uComboBox, .contextProperties .contextProperty .value.colorPicker {
    white-space: normal;
    overflow-x: visible;
    margin-right: 16px;
}

.contextProperties .contextProperty:not(.disabled):not(.otherEditing):hover .value {
    cursor: pointer;
}

.contextProperties .contextProperty .value input {
    min-height: 28px;
    line-height: 28px;
    border: none;
    outline: none;
    text-align: right;
    font-family: "PT Sans", SansSerif, sans-serif;
    font-size: 12pt;
    background: #FFFFFF;
    padding: 4px 8px;
    width: calc(100% - 16px);
    margin-top: 8px;
}

.contextProperties .contextProperty .value.contextType {
    padding-right: 44px;
}

.contextProperties .contextProperty .value.contextType.Category {
    background: transparent url(5d1ce415df8c1fbc9855.svg) calc(100% - 8px) center no-repeat;
}
.contextProperties .contextProperty .value.contextType.Place {
    background: transparent url(09ffce0cbbe3e7268f3e.svg) calc(100% - 8px) center no-repeat;
}
.contextProperties .contextProperty .value.contextType.Person {
    background: transparent url(23e1cb8f159f2e180219.svg) calc(100% - 8px) center no-repeat;
}

.contextProperties .newContextButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 4px;
}

.contextProperties .newContextButtons .toolbarAction {
    padding-left: 4px;
    padding-right: 4px;
    min-width: 80px;
}

.contextProperties .newContextButtons .toolbarAction.confirm {
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
    border-radius: 3px;
}

.contextProperties .newContextButtons .toolbarAction.confirm:hover {
    background-color: #466EB5;
    border-color: #466EB5;
}

.categoryColorDiv {
    margin: 15px 4px;
}

.categoryColorDiv div {
    width: 32px;
    height: 22px;
    border-radius: 4px;
    float: right;
}
.contextProperty .value .twitter-picker {
    margin-top: 67px;
    margin-left: calc(100% - 390px);
    width: 390px !important;
}

.contextProperty .value div.current {
    width: 32px;
    height: 22px;
    border-radius: 4px;
    float: right;
    margin-top: 16px;
}
.contextProperty.personPropertyCreator.open {
    height: initial;
    background: #f3f7fb;
}

.contextProperty.personPropertyCreator.open:hover {
    background: #f3f7fb;
}

.contextProperty.personPropertyCreator .value.moreProperties {
    background: transparent url(8ea5f099d3c22ec25a69.svg) right center no-repeat;
    outline: none;
}

.contextProperty.personPropertyCreator.open .value.moreProperties {
    background: transparent url(bbcee66f12cba80717e5.svg) right 22px no-repeat;
    padding-right: 25px;
    padding-top: 4px;
}

.contextProperty.personPropertyCreator .value.moreProperties .singleProperty {
    height: 44px;
    line-height: 44px;
}

.contextProperty.personPropertyCreator .value.moreProperties .singleProperty:hover {
    background-color: #ffffff;
}

.contextProperties .contextProperty.editing.birthDay {
    height: initial;
}

.contextProperty .dateTimeEditor {
    flex: 1;
    height: initial;
    line-height: 55px;
    outline: none;
}

.contextProperty .dateTimeEditor .currentDate {
    text-align: right;
    padding-right: 16px;
}

.contextProperty .dateTimeEditor .picker {
    right: 8px;
    width: calc(100% + 154px);
    min-width: 340px;
    position: relative;
    margin-left: -164px;
    color: #333;
}

.contextProperty .dateTimeEditor .picker .buttons {
    justify-content: flex-end;
}

.contextProperty .dateTimeEditor .picker .periodNavigator button {
    width: 36px;
}

.contextProperties .contextProperty .value .calendarIcon {
    display: inline-block;
    height: 20px;
    width: 20px;
    background: url(162edab7887d434bf0bd.svg) center no-repeat;
    margin: 17px 6px 17px 0;
    vertical-align: top;
}
.contextProperties .contextProperty.address {
    height: initial;
}

.contextProperties .contextProperty.address .value {
    white-space: pre-wrap;
    line-height: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.contextProperties .contextProperty.editing.address {
    height: 280px;
    background: rgba(83, 148, 207, 0.07);
    color: #333;
}

.contextProperties .contextProperty.editing.address .value {
    padding-top: 0;
    padding-bottom: 0;
}

.contextProperties .contextProperty.editing.address .addressEntity {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 44px;
}

.contextProperties .contextProperty.editing.address .addressEntity .subTitle {
    width: 132px;
    text-align: left;
    line-height: 36px;
    margin-top: 8px;
}

.contextProperties .contextProperty.editing.address .addressEntity .subValue {
    flex: 1;
    margin-left: 8px;
}

.contextProperties .contextProperty.editing.address .addressEntity .subValue input {
    width: calc(100% - 16px);
    text-align: right;
}

.contextProperties .contextProperty.editing.address .addressButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 8px;
    justify-content: flex-end;
}

.contextProperties .contextProperty.editing.address .addressButtons .toolbarAction {
    padding-left: 0;
    padding-right: 0;
    min-width: 96px;
}

.contextProperties .contextProperty.editing.address .addressButtons .toolbarAction.confirm {
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
    border-radius: 3px;
}

.contextProperties .contextProperty.editing.address .addressButtons .toolbarAction.confirm:hover {
    background-color: #466EB5;
    border-color: #466EB5;
}

.contextProperties .contextProperty.editing.phone {
}

.contextProperties .contextProperty.editing.phone .phoneEntity {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.contextProperties .contextProperty.editing.phone .phoneEntity .subTitle {
    width: 120px;
    text-align: left;
}

.contextProperties .contextProperty.editing.phone .phoneEntity .subValue {
    flex: 1;
    margin-left: 8px;
}

.contextProperties .contextProperty.editing.phone .phoneEntity .subValue input {
    width: calc(100 - 16px);
    text-align: left;
}

.contextProperties .contextProperty.editing.phone .phoneButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.contextProperties .contextProperty.editing.phone .phoneButtons .toolbarAction {
    padding-left: 0;
    padding-right: 0;
    min-width: 80px;
}

.contextProperties .contextProperty.editing.phone .phoneButtons .toolbarAction.confirm {
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
    border-radius: 3px;
}

.contextProperties .contextProperty.editing.phone .phoneButtons .toolbarAction.confirm:hover {
    background-color: #466EB5;
    border-color: #466EB5;
}

.contextProperties .contextProperty.editing.email {
}

.contextProperties .contextProperty.editing.email .emailEntity {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.contextProperties .contextProperty.editing.email .emailEntity .subTitle {
    width: 120px;
    text-align: left;
}

.contextProperties .contextProperty.editing.email .emailEntity .subValue {
    flex: 1;
    margin-left: 8px;
}

.contextProperties .contextProperty.editing.email .emailEntity .subValue input {
    width: calc(100 - 16px);
    text-align: left;
}

.contextProperties .contextProperty.notes {
    height: initial;
}

.contextProperties .contextProperty.notes .title {
    line-height: 55px;
}

.contextProperties .contextProperty.notes .value {
    line-height: 24px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.contextProperties .contextProperty.notes .value div:not(.toolbarAction) {
    white-space: normal;
    text-align: right;
}

.contextProperties .contextProperty.editing.notes .value {
    padding-top: 0px;
    padding-bottom: 8px;
}

.contextProperties .contextProperty.editing.notes {
    height: initial;
    line-height: 24px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 0;
    background: rgba(83, 148, 207, 0.07);
    color: #333;
}

.contextProperties .contextProperty.editing .value textarea {
    width: calc(100% - 16px);
    margin-top: 8px;
    min-height: 120px;
    margin-bottom: 8px;
    outline: none;
    resize: none;
    border: solid 1px transparent;
    font-family: "PT Sans", Arial, Helvetica, sans-serif;
    padding: 4px 8px;
    font-size: 12pt;
    line-height: 24px;
    text-align: right;
}

.contextProperties .contextProperty.editing .value .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 4px;
    margin-top: 0;
    margin-left: 2px;
    justify-content: flex-end;
    cursor: default;
}

.contextProperties .contextProperty.editing .value .buttons .toolbarAction {
    padding-left: 0;
    padding-right: 0;
    min-width: 96px;
}

.contextProperties .contextProperty.editing .value .buttons .toolbarAction.confirm {
    background-color: #5394CF;
    color: #fff;
    border-color: #5394CF;
    border-radius: 3px;
}

.contextProperties .contextProperty.editing .value .buttons .toolbarAction.confirm:hover {
    background-color: #466EB5;
    border-color: #466EB5;
}
.uComboBox {

}

.uComboBox.value {

}

.uComboBox .list {
    display: none;
    outline: none;
}

.uComboBox.open .list {
    display: block;
    position: relative;
    margin-top: -30px;
    z-index: 10;
    background: #FFFFFF;
}

.uComboBox .list .item {
    height: 30px;
    line-height: 30px;
}

.uComboBox .list .item.selected {
    background-color: rgba(83, 148, 207, 0.2);
}

.uComboBox .list .item:hover {
    background-color: rgba(83, 148, 207, 0.07);
}

.contextProperty .uComboBox.value.type  .list {
    right: 8px;
    margin-top: 0;
    margin-right: -8px;
    box-sizing: border-box;
    border: solid 1px #eee;
    border-radius: 3px;
    border-top-style: none;
    color: #333;
}

.contextProperty .uComboBox.value.type  .list .item {
    height: 44px;
    line-height: 44px;
    padding-right: 44px;
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
}

.contextProperty .uComboBox.value.type .value {
    padding-right: 44px;
    background-position: calc(100% - 8px) center;
    background-repeat: no-repeat;
    margin-right: 0;
}

.contextProperty .uComboBox.value.type .value.category {
    background-image: url(5d1ce415df8c1fbc9855.svg);
}
.contextProperty .uComboBox.value.type .value.place {
    background-image: url(09ffce0cbbe3e7268f3e.svg);
}
.contextProperty .uComboBox.value.type .value.person {
    background-image: url(23e1cb8f159f2e180219.svg);
}

.contextProperty.editing .uComboBox.value.type .value.category {
    background-image: url(3487f3dd89d841230126.svg);
}
.contextProperty.editing .uComboBox.value.type .value.place {
    background-image: url(3617419fa08d7dc0a8e4.svg?ver=1);
}
.contextProperty.editing .uComboBox.value.type .value.person {
    background-image: url(3f479298bd70f683a6e0.svg);
}

.leftActionButtons {

}

.leftActionButtons .googleImportButton {
    background-image: url(c6f1e197011a0cf745dd.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 40px;
}

.leftActionButtons .googleImportButton.importing {
    opacity: 0.75;
    color: #ccc;
}

.leftActionButtons.contexts .questionDialog {
    top: 50px;
}

.leftActionButtons .importAskDialog {
    position: fixed;
    top: 50px;
    width: 440px;
    height: 80px;
    left: calc(50% - 240px);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    background: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 4px 8px;
}

.leftActionButtons .importAskDialog.success {
    background: #3D9562;
    color: #ffffff;
}

.leftActionButtons .importAskDialog.error {
    background: #C65656;
    color: #FFFFFF;
}

.leftActionButtons .importAskDialog .question {
    min-height: 28px;
    line-height: 28px;
    margin-bottom: 8px;
}

.leftActionButtons .importAskDialog .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.leftActionButtons .importAskDialog .buttons .importButton,
.leftActionButtons .importAskDialog .buttons .cancelButton {
    min-width: 100px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    border: 1px solid #5394CF;
    border-radius: 3px;
    margin: 0 8px;
    background-color: transparent;
    color: #5394CF;
    text-align: center;
    cursor: pointer;
}

.leftActionButtons .importAskDialog.success .buttons .cancelButton {
    background: #ffffff;
}

.leftActionButtons .importAskDialog .buttons .importButton:hover,
.leftActionButtons .importAskDialog .buttons .cancelButton:hover {
    background-color: rgba(83, 148, 207, 0.07);
}

.leftActionButtons .importAskDialog.success .buttons .cancelButton:hover {
    background: rgba(255, 255, 255, 0.8);
}

.leftActionButtons .importAskDialog .buttons .importButton:active,
.leftActionButtons .importAskDialog .buttons .cancelButton:active {
    color: #466EB5;
    border-color: #466EB5;
    background-color: rgba(62, 116, 166, 0.07);
}

.leftActionButtons .importAskDialog.success .buttons .cancelButton:active {
    background: rgba(255, 255, 255, 0.9);
}

.toolbarAction.addContext {
    background: #FF7E00 url(96eeec93b91ae324c74b.svg) left center no-repeat;
    background-size: 32px 17px;
    border-color: #FF7E00;
    color: #FFFFFF;
}

.toolbarAction.addContext:hover {
    background-color: #F17700;
    border-color: #F17700;
}

.toolbarAction.addContext:active {
    background-color: #DE6B00;
    border-color: #DE6B00;
}

.toolbarAction.deleteContext {
    background-image: url(b720851a9081d561799b.svg) ;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 32px 17px;
}

.contextsModule .importAskDialog.success,
.contextsModule .importAskDialog.error {
    position: fixed;
    top: 50px;
    width: 440px;
    height: 40px;
    line-height: 32px;
    left: calc(50% - 240px);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    background: #3D9562;
    color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 4px 8px;
    text-align: center;
    display: flex;
}

.contextsModule .importAskDialog.error {
    background: #C65656;
    color: #FFFFFF;
}

.contextsModule .importAskDialog.success .question,
.contextsModule .importAskDialog.error .question
{
    flex: 1;
}

.contextsModule .importAskDialog.success .closeButton,
.contextsModule .importAskDialog.error .closeButton{
    height: 20px;
    background: transparent url(f68dd05434c7bb3758f4.svg) center no-repeat;
    padding: 9px;
    margin-top: -4px;
    cursor: pointer;
}

.globalSettingView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-height: 30px;
  line-height: 30px;
  margin: 4px 0;
  justify-content: space-between;
}
.globalSettingView .label {
  margin-right: 8px;
  margin-left: 8px;
  /*min-width: 300px;
    max-width: 33%;*/
  white-space: wrap;
  flex: 1;
}
.globalSettingView .input {
  margin-right: 8px;
}
.globalSettingView .input input {
  width: 200px;
  height: 30px;
  padding: 4px 8px;
  border: solid 2px #eeeeee;
  border-radius: 3px;
}
.globalSettingView .input input[type="checkbox"] {
  height: 24px;
  width: 24px;
  margin-right: 176px;
}
.globalSettingView .input.changed input {
  /*border: solid 2px #ff0000;*/
  outline: solid 3px #ff0000;
  border-radius: 3px;
}

.groupView {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 8px;
  border: solid 1px #eee;
  padding: 4px 8px;
  border-radius: 3px;
}
.groupView .title {
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 8px;
}
.groupView .items {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.groupView .subGroups {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.groupView .subGroups .title {
  font-size: 1.1em;
}
.groupView .subGroups .groupView {
  margin-left: 8px;
  max-width: calc(33% - 24px);
}
.groupView button {
  width: 100px;
  cursor: pointer;
}
.groupView .items.topLevel {
  max-width: 50%;
}

.actionPanel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  width: calc(100% - 8px);
  background-color: #fff;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  padding: 4px 0;
}
.actionPanel button {
  margin: 4px 8px;
}

.globalSettings .settingsView {
  padding: 56px 16px;
}
.globalSettings .hint {
  margin-top: 8px;
  font-weight: bold;
}

.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell {
  margin: -1px 4px 2px 4px;
  position: relative;
  border-radius: 4px;
  border: solid 1px #eeeeee;
  font-size: 10pt;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  box-sizing: border-box;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .handler {
  background: rgba(200, 200, 200, 0);
  height: 36px;
  width: 36px;
  position: absolute;
  margin-top: -24px;
  z-index: 10;
  cursor: ns-resize !important;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .handler.noCursor {
  cursor: default !important;
  pointer-events: none;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .line {
  width: 16px;
  height: 2px;
  background: #808080;
  position: absolute;
  margin-left: calc(50% - 16px);
  margin-top: 20px;
  z-index: 10;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .hourMinuteRowCell.notAllowToDrop .taskInCell {
  cursor: no-drop;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.selected {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  cursor: default;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container {
  flex: 1;
  padding: 1px 8px;
  display: flex;
  line-height: 18px;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell:not(.strict):not(.completed):not(.cancelled) .container {
  cursor: pointer;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor .container {
  cursor: no-drop !important;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.moving {
  position: absolute;
  pointer-events: none;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.hidden {
  display: none;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.cloneMoving {
  opacity: 0.5;
  pointer-events: none;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .background {
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .background .details {
  margin: 1px 1px;
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  justify-content: flex-end;
  margin-right: -8px;
  margin-bottom: -4px;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .background .details .completenessPercent {
  background: transparent url(1a88944efdd57642bb4a.png) right calc(100% - 1px) no-repeat;
  width: 48px;
  text-align: right;
  padding-right: 4px;
  position: relative;
  top: 3px;
  left: 0;
  height: 18px;
  line-height: 18px;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence .background .icon,
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.strict .background .icon {
  width: 14px;
  height: 12px;
  margin: 1px 1px;
  /*position: absolute;
    bottom: 2px;
    right: 2px;*/
  margin-top: 4px;
  margin-right: 6px;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.strict.white .background .icon {
  background: transparent url(be1c35731fdc3a9d77dc.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.strict.black .background .icon {
  background: transparent url(e76ff52718421afe4d64.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.white .background .icon {
  background: transparent url(82d7625d6f189665ee92.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.black .background .icon {
  background: transparent url(2a77e2496c3f6a628000.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.white.changed .background .icon {
  background: transparent url(7722cda731d9b7e84b6e.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.black.changed .background .icon {
  background: transparent url(b220627bb0b4a8b855ee.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.white.changed.strict .background .icon {
  background: transparent url(be1c35731fdc3a9d77dc.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.recurrence.black.changed.strict .background .icon {
  background: transparent url(e76ff52718421afe4d64.svg) no-repeat center;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .title {
  flex: 1;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.strict .title {
  font-style: italic;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.completed .container:after,
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.cancelled .container:after {
  background-image: url(e608bdc156293de2db44.png);
  opacity: 0.5;
  content: "";
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: default;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor.completed .container:after,
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor.cancelled .container:after {
  cursor: no-drop !important;
}
.plansCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.cancelled {
  text-decoration: line-through;
  font-style: italic;
}
.plansCalendar.multiLevelCalendar .weeklyView.changing .calendarWeekHours .taskInCell:not(.strict) .container {
  cursor: ns-resize !important;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask {
    margin: 0 4px 0 4px;
    font-size: 10pt;
    border: solid 1px #eeeeee;
    border-radius: 4px;
    display: flex;
    overflow-x: hidden;
    cursor: pointer;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask:first-child {
    margin-top: 4px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.selected {
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    cursor: default;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .container {
    padding: 8px;
    min-height: 18px;
    line-height: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    overflow: hidden;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask:not(.strict):not(.completed):not(.cancelled) .container {
    cursor: pointer;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .container.moving {
    position: absolute;
    pointer-events : none;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .container.hidden {
    display: none;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .container.cloneMoving {
    opacity: 0.5;
}

.multiLevelCalendar .twoPartsView .singlePartView.top .topLevelCellArea .topLevelTask .container {
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .background {
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .details {
    margin: 1px 1px;
    /*position: absolute;*/
    bottom: 2px;
    right: 2px;
    display: flex;
    justify-content: flex-end;
    margin-right: -8px;
    margin-bottom: -4px;
    align-items: end;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .details .completenessPercent {
    background: transparent url(1a88944efdd57642bb4a.png) right calc(100% - 1px) no-repeat;
    width: 48px;
    text-align: right;
    padding-right: 8px;
    position: relative;
    top: 4px;
    left: 0px;
    height: 18px;
    line-height: 18px;
}

.multiLevelCalendar .twoPartsView .singlePartView.bottom .topLevelCellArea .topLevelTask .details .completenessPercent {
    top: 8px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.recurrence .icon,
.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.strict .icon {
    width: 14px;
    height: 12px;
    margin-right: 3px;
    margin-bottom: -6px;
    margin-top: 10px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.strict .details.withPercent .icon {
    margin-right: -8px;
}

.multiLevelCalendar .twoPartsView .singlePartView.top .topLevelCellArea .topLevelTask.strict .icon {
    margin-top: 6px;
}

.multiLevelCalendar .twoPartsView .singlePartView.bottom .topLevelCellArea .topLevelTask.strict .icon {
    margin-bottom: -4px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.strict.white .icon {
    background: transparent url(be1c35731fdc3a9d77dc.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.strict.black .icon {
    background: transparent url(e76ff52718421afe4d64.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.recurrence.white .icon {
    background: transparent url(82d7625d6f189665ee92.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.recurrence.black .icon {
    background: transparent url(2a77e2496c3f6a628000.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.recurrence.white.changed .icon {
    background: transparent url(7722cda731d9b7e84b6e.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.recurrence.black.changed .icon {
    background: transparent url(b220627bb0b4a8b855ee.svg) no-repeat center;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .title {
    flex: 1;
    line-height: 18px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.strict .title {
    font-style: italic;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.completed {
    font-style: italic;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask .details {
    bottom: 2px;
    right: 2px;
    display: flex;
    justify-content: flex-end;
    margin: 1px -8px -1px 1px;
    align-items: flex-start;
}

.multiLevelCalendar .twoPartsView .singlePartView.top .topLevelCellArea .topLevelTask .details {
    margin: -12px -8px 0 1px;
}

.multiLevelCalendar .twoPartsView .singlePartView.top .topLevelCellArea .topLevelTask .details.withPercent {
    margin-bottom: -6px;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.completed .container:after,
.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.cancelled .container:after {
    background-image: url(e608bdc156293de2db44.png);
    opacity: 0.5;
    content: "";
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: default;
}

.multiLevelCalendar .twoPartsView .singlePartView .topLevelCellArea .topLevelTask.cancelled {
    text-decoration: line-through;
    font-style: italic;
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day.current {
    background: rgba(83, 148, 207, 0.8);
}

.multiLevelCalendar .weeklyView .calendarHeaderView .day.current .title {
    color: #fff;

}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask {
    margin: 2px 4px;
    font-size: 10pt;
    border: solid 1px #eeeeee;
    border-radius: 4px;
    display: flex;
    overflow-x: hidden;
    cursor: pointer;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.selected {
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    cursor: default;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .container {
    padding: 8px;
    min-height: 18px;
    line-height: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    overflow: hidden;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask:not(.strict):not(.completed):not(.cancelled) .container {
    cursor: pointer;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .container.moving {
    position: absolute;
    pointer-events : none;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .container.hidden {
    display: none;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .container.cloneMoving {
    opacity: 0.5;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .background {
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .details {
    margin: 1px 1px;
    /*position: absolute;*/
    bottom: 2px;
    right: 2px;
    display: flex;
    justify-content: flex-end;
    margin-right: -8px;
    margin-bottom: -4px;
    align-items: end;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .details .completenessPercent {
    background: transparent url(1a88944efdd57642bb4a.png) right calc(100% - 1px) no-repeat;
    width: 48px;
    text-align: right;
    padding-right: 8px;
    position: relative;
    top: 4px;
    left: 0px;
    height: 18px;
    line-height: 18px;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.recurrence .icon,
.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.strict .icon {
    width: 14px;
    height: 12px;
    margin-right: 3px;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.strict .details.withPercent .icon {
    margin-right: -8px;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.strict.white .icon {
    background: transparent url(be1c35731fdc3a9d77dc.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.strict.black .icon {
    background: transparent url(e76ff52718421afe4d64.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.recurrence.white .icon {
    background: transparent url(82d7625d6f189665ee92.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.recurrence.black .icon {
    background: transparent url(2a77e2496c3f6a628000.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.recurrence.white.changed .icon {
    background: transparent url(7722cda731d9b7e84b6e.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.recurrence.black.changed .icon {
    background: transparent url(b220627bb0b4a8b855ee.svg) no-repeat center;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask .title {
    flex: 1;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.strict .title {
    font-style: italic;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.completed {
    font-style: italic;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.completed .container:after,
.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.cancelled .container:after {
    background-image: url(e608bdc156293de2db44.png);
    opacity: 0.5;
    content: "";
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: default;
}

.multiLevelCalendar .weeklyView .wholeDayView .day .wholeDayTask.cancelled {
    text-decoration: line-through;
    font-style: italic;
}
.plansCalendar.loading {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

.draggingTask {
    position: absolute;
    pointer-events: none;
    z-index: 110;
    opacity: 0.8;
}

.draggingTask.moving.tree {
    height: initial !important;
}

.draggingTask .tree {
    background-color: #ffffff;
    border: solid 1px #ffffff;
    border-radius: 3px;
    height: calc(100%);
    /*line-height: 37px;*/
    white-space: nowrap;
    cursor: pointer;
    margin: 0 8px;
    padding-left: 47px;
    overflow-x: hidden;
    text-overflow: ellipsis;

    line-height: 29px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.draggingTask .tree.selected {
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.3), rgba(83, 148, 207, 0.3)), #FFFFFF !important;
    border: solid 1px #5394CF !important;
}

.draggingTask .calendar {
    background-color: #ffffff;
    border: solid 1px #eeeeee;
    border-radius: 4px;
    min-height: calc(100% - 2px);
    max-height: calc(100% - 0px);
    line-height: 37px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 1px 8px;
    margin: 0 4px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.draggingTask .calendar.notHours {
    padding: 8px 8px;
    max-height: initial;
    min-height: initial;
}

.draggingTask .calendar.selected {
    webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
}

.calendarEntryProperties .completeButton {
  width: 28px;
  height: 28px;
  margin: 2px 4px 2px 0;
  background: transparent url(6a47f5e0e974afc70c4b.svg) center / 100% no-repeat;
  cursor: pointer;
}
.calendarEntryProperties .completeButton:hover:not(.disabled) {
  background-image: url(01d6301876299f5bde81.svg);
}
.calendarEntryProperties .completeButton.completed {
  background-image: url(4d428d3d0b8b6acc4449.svg);
}
.calendarEntryProperties .completeButton.completed:hover:not(.disabled) {
  background-image: url(168653b7b4f272fcabcd.svg);
}
.calendarEntryProperties .completeButton.disabled {
  cursor: default;
  background-image: url(d34eb6f7d3c4dfec8fd2.svg);
}
.calendarEntryProperties .completeButton.hidden {
  display: none;
}

.calendarEntryProperties .pinButton {
  border: 1px solid #5394CF;
  color: #5394CF;
  padding: 0 4px 0 14px;
  border-radius: 3px;
  font-size: 10pt;
  width: 120px;
  height: 31px;
  line-height: 31px;
  box-sizing: border-box;
  background: #FFFFFF url(2308190c498ecc327490.svg) 4px center / 18px no-repeat;
  text-align: center;
  cursor: pointer;
}
.calendarEntryProperties .pinButton:hover {
  background: #f3f7fc url(2308190c498ecc327490.svg) 4px center / 18px no-repeat;
}
.calendarEntryProperties .pinButton:active {
  background: #f3f7fc url(2308190c498ecc327490.svg) 4px center / 18px no-repeat;
  border: 1px solid #466EB5;
  color: #466EB5;
}
.calendarEntryProperties .pinButton.toUnpin {
  background: #FFFFFF url(04f0559c2a63e3ed8340.svg) 4px center / 18px no-repeat;
}
.calendarEntryProperties .pinButton.toUnpin:hover {
  background: #f3f7fc url(2308190c498ecc327490.svg) 4px center / 18px no-repeat;
}
.calendarEntryProperties .pinButton.toUnpin:active {
  background: #f3f7fc url(2308190c498ecc327490.svg) 4px center / 18px no-repeat;
  border: 1px solid #466EB5;
  color: #466EB5;
}

.calendarEntryProperties {
  position: fixed;
  box-sizing: border-box;
  width: 306px;
  min-height: 116px;
  background: #F2F2F2;
  border-color: #F2F2F2;
  border-radius: 4px;
  padding: 7px 8px 8px 7px;
  display: flex;
  flex-direction: column;
  outline: none;
  z-index: 100;
}
.calendarEntryProperties .titleAndClose {
  display: flex;
  flex-direction: row;
  align-content: space-between;
  flex-wrap: nowrap;
  flex: 1;
  margin-top: -2px;
}
.calendarEntryProperties .titleAndClose .title {
  flex: 1;
  white-space: normal;
  word-break: keep-all;
  padding-top: 6px;
  max-width: calc(100% - 64px);
  overflow-x: hidden;
}
.calendarEntryProperties .titleAndClose .close {
  width: 33px;
  height: 33px;
  background: transparent url(157cfc2789ce9eecf432.svg) 15px 4px / 13px no-repeat;
  cursor: pointer;
  margin-right: -2px;
}
.calendarEntryProperties .taskContexts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 10pt;
  justify-content: flex-end;
  column-gap: 4px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.calendarEntryProperties .taskContexts .context {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  align-items: center;
}
.calendarEntryProperties .taskContexts .context .category {
  width: 24px;
  height: 10px;
}
.calendarEntryProperties .unpinAndPercentage {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: 30px;
  line-height: 30px;
  /*margin-bottom: 3px;*/
  margin-left: 1px;
}
.calendarEntryProperties.top_center {
  /*position: relative;*/
  border: 1px #F2F2F2 solid;
}
.calendarEntryProperties.top_center:after,
.calendarEntryProperties.top_center:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.calendarEntryProperties.top_center:after {
  border-color: rgba(221, 221, 221, 0);
  border-bottom-color: #f2f2f2;
  border-width: 10px;
  margin-left: -10px;
}
.calendarEntryProperties.top_center:before {
  border-color: rgba(0, 0, 0, 0);
  border-width: 11px;
  margin-left: -11px;
}
.calendarEntryProperties.bottom_center {
  /*position: relative;*/
  border: 1px #F2F2F2 solid;
}
.calendarEntryProperties.bottom_center:after,
.calendarEntryProperties.bottom_center:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.calendarEntryProperties.bottom_center:after {
  border-color: rgba(255, 250, 246, 0);
  border-top-color: #f2f2f2;
  border-width: 10px;
  margin-left: -10px;
}
.calendarEntryProperties.bottom_center:before {
  border-color: rgba(0, 0, 0, 0);
  border-width: 11px;
  margin-left: -11px;
}
.calendarEntryProperties.noComplete .titleAndClose .title {
  max-width: calc(100% - 32px);
}

.plansToolbar .currentPeriodViewer {
    min-width: 96px;
    max-width: 96px;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    cursor: pointer;
}

.plansToolbar .currentPeriodViewer.disabled {
    opacity: 0.0;
}

.plansToolbar .currentPeriodViewer div {
    flex: 1;
}

.plansToolbar .currentPeriodViewer div.year {
    font-size: 12pt;
}

.plansToolbar .currentPeriodViewer div.monthDate {
    font-size: 10pt;
    white-space: nowrap;
}

.plansToolbar {
    z-index: 201;
}

.plansToolbar .dateTimeEditor {
    margin-left: -104px;
    margin-top: 50px;
}

.plansToolbar .dateTimeEditor .currentDate {
    display: none;
}

.plansToolbar .dateTimeEditor .picker .buttons {
    justify-content: flex-end;
}

.toolbarQuickAction.nextPeriod {
    background: transparent url(ff864d10287c5adae8b7.svg) center no-repeat;
}

.toolbarQuickAction.nextPeriod:hover,
.toolbarQuickAction.prevPeriod:hover,
.toolbarQuickAction.curPeriod:hover,
.toolbarQuickAction.upperLevel:hover,
.toolbarAction.lifeLevel:hover {
    background-color: rgba(83, 148, 207, 0.07);
}

.toolbarQuickAction.nextPeriod:active {
    background: rgba(62, 116, 166, 0.07) url(feeda8e363b2b86ca8be.svg) center no-repeat;
}

.toolbarQuickAction.prevPeriod {
    background: transparent url(34b2aac902440ae89957.svg) center no-repeat;
}

.toolbarQuickAction.prevPeriod:active {
    background: rgba(62, 116, 166, 0.07) url(0bb09c6703efc9d16ec0.svg) center no-repeat;
}

.toolbarQuickAction.curPeriod {
    background: transparent url(b3b07e5a9873e7cb62d5.svg) center no-repeat;
}

.toolbarQuickAction.curPeriod:active {
    background: rgba(62, 116, 166, 0.07) url(7c01c7951344a1c64ab0.svg) center no-repeat;
}

.plansToolbar .rightToolbar {
    display: flex;
    padding-right: 4px;
    flex: 1;
    flex-direction: row;
    justify-content: flex-end;
}

.plansToolbar .mainPlansToolbar {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;
}

.plansToolbar .mainPlansToolbar .navigation {
    padding: 0 2px;
    color: #989898;
    cursor: pointer;
}

.plansToolbar .mainPlansToolbar .navigation.active {
    color: #000000;
    cursor: default;
}

.plansToolbar .mainPlansToolbar .navigation.splitter {
    background: transparent url(2e986369ac0ec8c7da35.png) 4px center no-repeat;
    width: 12px;
    height: 38px;
    line-height: 38px;
    cursor: default;
}

.plansToolbar .mainPlansToolbar .navigation.splitter.padding {
    padding-left: 20px;
    cursor: pointer;
}

.toolbarQuickAction.upperLevel {
    background: transparent url(614ca160fdc05207233e.svg) center no-repeat;
}

.toolbarQuickAction.upperLevel:active {
    background: rgba(62, 116, 166, 0.07) url(614ca160fdc05207233e.svg) center no-repeat;
}

.toolbarAction.lifeLevel {
    background: transparent url(210b332f519b69d0fcf6.svg) 8px center no-repeat;
}

.toolbarAction.lifeLevel:active {
    background: rgba(62, 116, 166, 0.07) url(210b332f519b69d0fcf6.svg) 8px center no-repeat;
}

.plansToolbar .dynamicComboBox.contexts {
    flex: 1;
    margin: 6px 4px 6px 4px;
}

.plansToolbar .dynamicComboBox.contexts .list {
    /*min-width: calc(33% - 84px);*/
}

.plansToolbar .contextsLabel {
    line-height: 49px;
    margin: 0;
    font-weight: bold;
    width: 80px;
}

.plansToolbar .contextList {
    flex: 2;
    padding: 0 0 0 8px;
    display: flex;
    flex-direction: row;
}

.plansToolbar .mainNavigation {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.plansMainView .mainLayout .mainArea .plansTree .task {
    padding: 3px 6px;
    width: calc(100% - 16px);
    display: flex;
    flex-direction: row;
}

.plansMainView .mainLayout .mainArea .plansTree.withScroll .task {
    width: calc(100% - 28px);
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel .secondLevelIdent {
    height: 39px;
    width: 39px;
    background: url(2778b34e8b2c4620888b.png) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel .secondLevelIdent:before {
    content: "";
    height: 3px;
    background: url(ea78d2406b28abad25c6.png) no-repeat 0 0;
    display: inline-block;
    width: 45px;
    vertical-align: top;
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel:not(.lastChild) .secondLevelIdent:after {
    content: "";
    height: 3px;
    background: url(cedcf641fd39d6ea91cd.png) no-repeat 0 0;
    display: inline-block;
    width: 45px;
    vertical-align: top;
    margin-top: 36px;
    margin-left: -3px;
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel.lastChild .secondLevelIdent {
    background: url(ef89d82754f99b7b9d60.png) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task .content {
    display: flex;
    height: 39px;
    background: white;
    border: solid 1px white;
    border-radius: 3px;
    line-height: 39px;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    -webkit-box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    cursor: pointer;
    width: calc(100%);
}

.plansMainView .mainLayout .mainArea .plansTree .task.selected .content {
    background: linear-gradient(0deg, rgba(83, 148, 207, 0.3), rgba(83, 148, 207, 0.3)), #FFFFFF;
    border: solid 1px #5394CF;
    cursor: pointer;
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel .content {
    width: calc(100% - 39px);
}

.plansMainView .mainLayout .mainArea .plansTree .task .content.moving {
    position: absolute;
    pointer-events : none;
}

.plansMainView .mainLayout .mainArea .plansTree .task .content.hidden {
    display: none;
}

.plansMainView .mainLayout .mainArea .plansTree .task .content.cloneMoving {
    opacity: 0.0;
}

.plansMainView .mainLayout .mainArea .plansTree .task .title {
    flex: 1;
    overflow-x: hidden;
    text-overflow: ellipsis;
    margin: 0 8px;
    height: 37px;
    line-height: 37px;
    white-space: nowrap;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelUpButton,
.plansMainView .mainLayout .mainArea .plansTree .task .levelDownButton {
    width: 39px;
    height: 37px;
    cursor: pointer;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelUpButton {
    background: url(2caade566c1d1d5fcb21.svg) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelUpButton:hover {
    background: url(50d3753d195fd5d48f1b.svg) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelDownButton {
    background: url(a757882bba78be04c86e.svg) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelDownButton:hover {
    background: url(966a7f6b0c3a52322778.svg) center no-repeat;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelUpButton.disabled,
.plansMainView .mainLayout .mainArea .plansTree .task .levelDownButton.disabled {
    background: none;
}

.plansMainView .mainLayout .mainArea .plansTree .task .levelDownButton.disabled {
    display: none;
}

.plansMainView .mainLayout .mainArea .plansTree .task.secondLevel .levelUpButton.disabled {
    width: 20px;
}

.plansTree.noTasks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.plansTree.noTasks .countText {
  background: transparent url(b5f93d176265ee0e29c2.svg) center 4px no-repeat;
  padding-top: 120px;
  /*display: flex;
    flex-direction: row;*/
  background-size: 293px 145px;
  text-align: center;
}
.plansTree.noTasks .countText .count {
  font-weight: bold;
  display: contents;
}

.planTreeFilter {
  margin: 8px 12px 4px 8px;
  display: flex;
  flex-direction: row;
}
.planTreeFilter input {
  height: 35px;
  line-height: 35px;
  outline: none;
  flex: 1;
  border: 1px solid #D4DAE2;
  border-radius: 3px;
  color: #555555;
  box-sizing: border-box;
  font-size: 12pt;
  padding: 6px 24px 6px 4px;
  background: #FFFFFF url(e2bbf93e0635b1c84bbb.svg) no-repeat right center;
  background-size: 30px 14px;
}
.planTreeFilter input.hasValue {
  background-image: none;
  border-radius: 3px 0 0 3px;
  border-right: none;
}
.planTreeFilter .toolbarQuickAction.closeAction {
  background-image: url(2d2e45b5a2e4b5e86835.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #D4DAE2;
  border-radius: 0 3px 3px 0;
  background-color: #fff;
  width: 35px;
}
.planTreeFilter .toolbarQuickAction.closeAction:hover {
  background-color: #fff;
}

.treeAndWarning {

    .mainContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: calc(100% - 10px);

        .treeContainer {
            flex: 1;
        }

        .warningContainer {
            width: calc(100% - 32px);
            max-height: 90px;
            margin-left: 8px;
            padding: 8px 0 8px 8px;
            display: flex;
            flex-direction: row;
            border-radius: 3px;
            -webkit-box-shadow: 0 4px 10px 0 rgb(0 0 0 / 15%);
            -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 10px 0 rgb(0 0 0 / 15%);
            background-color: #E9F1FF;
            color: #333333;
            min-height: 40px;

            .buttonArea {
                display: flex;
                flex-direction: row;
                border-radius: 3px;

                .closeButton {
                    width: 32px;
                    padding: 0;
                    cursor: pointer;
                    background-position: 9px center;
                    border-radius: 0 3px 3px 0;
                    background-color: transparent !important;
                    height: 32px;
                }
            }
        }
    }
}

.plansMainView {
    position: fixed;
    width: calc(100%);
    height: calc(100% - 46px);
    top: 46px;
    left: 0;
    background: #F8F8F8;
}

.plansMainView .mainLayout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plansMainView .mainLayout .mainArea {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: calc(100% - 100px);
}

.plansMainView .mainLayout .mainArea.withMoving {
    cursor: pointer !important;
}

.plansMainView .mainLayout .mainArea .treeAndWarning {
    flex: 1;
    display: block;
    background: #F2F2F2;
    min-width: 33%;
}

.plansMainView .mainLayout .mainArea .plansTree:not(.basis) {
    overflow-y: hidden;
    height: calc(100% - 4px - 39px);
    padding: 2px 0;
    overflow-x: hidden;
    border: dotted 2px transparent;
}

.plansMainView .mainLayout .mainArea .plansTree.allowToDrop {
    border-color: #DE350A;
}

.plansMainView .mainLayout .mainArea .plansTree.allowToDrop.underCursor,
.plansMainView .mainLayout .mainArea .plansTree.notAllowToDrop.underCursor{
    background-color: #94CBEE;
}

.plansMainView .mainLayout .mainArea .treeAndWarning.withWarning .plansTree:not(.basis) {
    height: calc(100% - 34px);
}

.plansMainView .mainLayout .mainArea .plansTree.basis {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

.plansMainView .mainLayout .mainArea .plansCalendar {
    flex: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.plansMainView .mainLayout .warningArea {
    text-align: center;
    line-height: 24px;
    display: none;
    flex: 1;
}

.plansMainView .mainLayout .warningArea.visible {
    display: block;
    text-align: left;
    padding-left: 4px;
    border-radius: 3px 0 0 3px;
}

.records.calendarEntryProperties .completeButton {
  width: 28px;
  height: 28px;
  margin: 2px 4px 2px 0;
  background: transparent url(6a47f5e0e974afc70c4b.svg) center / 100% no-repeat;
  cursor: pointer;
}
.records.calendarEntryProperties .completeButton:hover:not(.disabled) {
  background-image: url(01d6301876299f5bde81.svg);
}
.records.calendarEntryProperties .completeButton.recurrence {
  background-image: url(ccd147a9d9b5fb53cbea.svg);
}
.records.calendarEntryProperties .completeButton.recurrence:hover:not(.disabled) {
  background-image: url(ff55096a569122b9ddb7.svg);
}
.records.calendarEntryProperties .completeButton.completed {
  background-image: url(4d428d3d0b8b6acc4449.svg);
}
.records.calendarEntryProperties .completeButton.completed:hover:not(.disabled) {
  background-image: url(168653b7b4f272fcabcd.svg);
}
.records.calendarEntryProperties .completeButton.recurrence.completed {
  background-image: url(0db44c21e91a42d9d04d.svg);
}
.records.calendarEntryProperties .completeButton.recurrence.completed:hover:not(.disabled) {
  background-image: url(3b09dd35f02a7ca89d7c.svg);
}
.records.calendarEntryProperties .completeButton.disabled {
  cursor: default;
  background-image: url(d34eb6f7d3c4dfec8fd2.svg);
}
.records.calendarEntryProperties .completeButton.hidden {
  display: none;
}

.records.calendarEntryProperties .comments {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding-top: 8px;
}
.records.calendarEntryProperties .comments textarea {
  resize: none;
  min-height: 86px;
  outline: none;
  border-radius: 4px;
  border: 1px solid #E0E0E0;
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #ffffff;
}
.records.calendarEntryProperties .comments .bottomActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 37px;
  padding: 8px 0 0 0;
}
.records.calendarEntryProperties .comments .bottomActions .navigateButton {
  width: 33px;
  height: 37px;
  background: transparent url(66186201c1c3a2d9e3e5.svg) center center no-repeat;
  cursor: pointer;
}
.records.calendarEntryProperties .comments .bottomActions .saveButton {
  background: #5394CF;
  border-radius: 3px;
  font-size: 12pt;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 37px;
  padding: 0 9px;
  box-sizing: border-box;
  min-width: 120px;
  text-align: center;
}
.records.calendarEntryProperties .comments .bottomActions .saveButton.removing {
  background: #E93636;
}

.draggingTask {
  position: absolute;
  pointer-events: none;
  z-index: 110;
  opacity: 0.8;
}
.draggingTask .list {
  background-color: #ffffff;
  border: solid 1px #ffffff;
  border-radius: 3px;
  height: calc(100%);
  white-space: nowrap;
  cursor: pointer;
  margin: 0 8px;
  padding-left: 8px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  line-height: 29px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.draggingTask .calendar {
  background-color: #ffffff;
  border: solid 1px #eeeeee;
  border-radius: 4px;
  min-height: calc(100% - 2px);
  max-height: calc(100% - 0px);
  line-height: 37px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 1px 8px;
  margin: 0 2px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.draggingTask.moving .list {
  height: initial !important;
}

.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell {
  margin: -1px 4px 2px 4px;
  position: relative;
  border-radius: 4px;
  border: solid 1px #eeeeee;
  font-size: 10pt;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  box-sizing: border-box;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .handler {
  background: rgba(200, 200, 200, 0);
  height: 36px;
  width: 36px;
  position: absolute;
  margin-top: -24px;
  z-index: 10;
  cursor: ns-resize !important;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .handler.noCursor {
  cursor: default !important;
  pointer-events: none;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .line {
  width: 16px;
  height: 2px;
  background: #808080;
  position: absolute;
  margin-left: calc(50% - 16px);
  margin-top: 20px;
  z-index: 10;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .hourMinuteRowCell.notAllowToDrop .taskInCell {
  cursor: no-drop;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.selected {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  cursor: default;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container {
  flex: 1;
  padding: 1px 8px;
  display: flex;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell:not(.strict):not(.completed):not(.cancelled) .container {
  cursor: pointer;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor .container {
  cursor: no-drop !important;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.moving {
  position: absolute;
  pointer-events: none;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.hidden {
  display: none;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .container.cloneMoving {
  opacity: 0.5;
  pointer-events: none;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .background {
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .background .details {
  margin: 1px 1px;
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  justify-content: flex-end;
  margin-right: -8px;
  margin-bottom: -4px;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.comments .background .icon {
  width: 14px;
  height: 12px;
  margin: 1px 1px;
  /*position: absolute;
    bottom: 2px;
    right: 2px;*/
  margin-top: 4px;
  margin-right: 6px;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.comments.white .background .icon {
  background: transparent url(b78c8f718fd6faa6d32e.svg) no-repeat center;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.comments.black .background .icon {
  background: transparent url(a39b324f4bb96b6baed6.svg) no-repeat center;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell .title {
  flex: 1;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.strict .title {
  font-style: italic;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.completed .container:after,
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.cancelled .container:after {
  opacity: 0.5;
  content: "";
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: default;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.cancelled .container:after {
  background-color: #F6F6F6;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor.completed .container:after,
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.noCursor.cancelled .container:after {
  cursor: no-drop !important;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.cancelled {
  text-decoration: line-through;
  font-style: italic;
}
.recordsCalendar.multiLevelCalendar .weeklyView .calendarWeekHours .taskInCell.completed {
  font-style: italic;
}
.recordsCalendar.multiLevelCalendar .weeklyView.changing .calendarWeekHours .taskInCell:not(.strict) .container {
  cursor: ns-resize !important;
}

.recordsCalendar {
  flex: 2;
}
.recordsCalendar.loading {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
}

.recordsTaskListFilter {
  margin: 8px 8px 4px 4px;
  display: flex;
  flex-direction: row;
}
.recordsTaskListFilter input {
  height: 35px;
  line-height: 35px;
  outline: none;
  flex: 1;
  border: 1px solid #D4DAE2;
  border-radius: 3px;
  color: #555555;
  box-sizing: border-box;
  font-size: 12pt;
  padding: 6px 24px 6px 4px;
  background: #FFFFFF url(e2bbf93e0635b1c84bbb.svg) no-repeat right center;
  background-size: 30px 14px;
}
.recordsTaskListFilter input.hasValue {
  background-image: none;
  border-radius: 3px 0 0 3px;
  border-right: none;
}
.recordsTaskListFilter .toolbarQuickAction.closeAction {
  background-image: url(2d2e45b5a2e4b5e86835.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #D4DAE2;
  border-radius: 0 3px 3px 0;
  background-color: #fff;
  width: 35px;
}
.recordsTaskListFilter .toolbarQuickAction.closeAction:hover {
  background-color: #fff;
}

.taskView.records {
  overflow: hidden;
  height: 39px !important;
  line-height: 39px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 6px 9px 6px 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border-color: #FFFFFF;
  cursor: pointer;
}
.taskView.records .content .taskName {
  width: calc(100% - 4px);
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskView.records .content.hidden {
  display: none;
}
.taskView.records .content.cloneMoving {
  opacity: 1 !important;
}
.taskView.moving {
  opacity: 1 !important;
}
.taskList .tasksContainer.withScroll .taskView {
  width: calc(100% - 36px);
}

.taskList {
  flex: 1;
  padding: 0 0 0 4px;
  max-width: calc(33.333%);
}
.taskList .tasksContainer {
  overflow: hidden;
  height: calc(100% - 54px);
  padding-top: 4px;
  border: dotted 2px transparent;
}
.taskList .tasksContainer .content.cloneMoving {
  opacity: 0;
}
.taskList .tasksContainer.allowToDrop {
  border-color: #DE350A;
}
.taskList .tasksContainer.allowToDrop.underCursor,
.taskList .tasksContainer.notAllowToDrop.underCursor {
  background-color: #94CBEE;
}
.taskList.basis {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
}

.recordsToolbar .currentPeriodViewer {
    min-width: 96px;
    max-width: 96px;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    cursor: pointer;
}

.recordsToolbar .currentPeriodViewer.disabled {
    opacity: 0.0;
}

.recordsToolbar .currentPeriodViewer div {
    flex: 1;
}

.recordsToolbar .currentPeriodViewer div.year {
    font-size: 12pt;
}

.recordsToolbar .currentPeriodViewer div.monthDate {
    font-size: 10pt;
    white-space: nowrap;
}

.recordsToolbar .dateTimeEditor {
  margin-left: -104px;
  margin-top: 50px;
}
.recordsToolbar .dateTimeEditor .currentDate {
  display: none;
}
.recordsToolbar .dateTimeEditor .picker .buttons {
  justify-content: flex-end;
}
.recordsToolbar .mainNavigation {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.recordsToolbar {
  z-index: 101;
}
.recordsToolbar .dynamicComboBox.contexts {
  flex: 1;
  margin: 6px 8px 6px 4px;
}
.recordsToolbar .dynamicComboBox.contexts .list {
  /*min-width: calc(33% - 84px);*/
}
.recordsToolbar .contextsLabel {
  line-height: 49px;
  margin: 0;
  font-weight: bold;
  width: 80px;
}
.recordsToolbar .contextList {
  flex: 2;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: row;
}

.recordsMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}
.recordsMainView .mainLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recordsMainView .mainArea {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: calc(100% - 100px);
}

.releaseNoteView {
    display: flex;
    width: 100%;
    margin: 4px 8px;
    border: solid 1px #eee;
    height: 32px;
    line-height: 32px;
}

.releaseNoteView .title {
    flex: 1px;
    margin: 0 8px;
}

.releaseNoteView .publishDate {
    margin: 0 8px;
}

.releaseNoteView button {
    margin: 2px 8px;
    height: 28px;
    line-height: 28px;
    /*border-radius: 3px;
    border: none;*/
    padding: 0 16px;
    cursor: pointer;
    /*background-color: #eee;*/
}

.releaseNoteView button:hover {
    /*background-color: #e0e0e0;*/
}

.releaseNoteEditDialog {
    position: fixed;
    width: 640px;
    height: 480px;
    top: calc(50% - 240px);
    left: calc(50% - 320px);
    background: #ffffff;
    border: solid 1px #eee;
    border-radius: 3px;
    padding: 4px 8px;
    box-sizing: border-box;
}

.publishDateField {
    margin: 4px 0 8px 0;
}

.releaseNoteEditDialog .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.releaseNoteEditDialog .buttons button {
    margin: 0 4px;
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    min-width: 100px;
}

.releaseNoteEditDialog .buttons button:first-child {
    margin-left: 0;
}

.releaseNoteEditDialog .buttons button:last-child {
    margin-right: 0;
}

.languageChooser {
    display: flex;
}

.languageChooser .tab {
    margin: 0 4px 0 0;
    height: 32px;
    line-height: 32px;
    padding: 0 32px;
    cursor: pointer;
    background: #f2f2f2;
    border-radius: 8px 0 0 0;
}

.languageChooser .tab.active {
    background: #000;
    color: #fff;
}

.editForLanguage {
    display: flex;
    width: 100%;
    height: calc(100% - 100px);
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
}

.editForLanguage.hidden {
    display: none;
}

.editForLanguage .editField {
    margin: 4px 0;
}

.editForLanguage .editField.fullHeight {
    flex: 1;
}

.editForLanguage .editField input {
    width: calc(100% - 8px);
}

.editForLanguage .editField textarea {
    width: calc(100% - 8px);
    resize: none;
    height: calc(100% - 32px);
}


.releaseNoteList {
    /*background: #ffffff;*/
    margin: 8px 0;
    width: calc(100% - 32px);
    padding: 0 8px;
}

.releaseNoteList .newNoteFrom {
    margin: 0 0;
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    position: fixed;
    width: calc(100% - 8px);
    background-color: #fff;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    top: 0;
    left: 0;
}

.releaseNoteList .newNoteFrom button {
    margin: 4px 0;
}

.releaseNoteList .list {
    background: #fff;
    margin-top: 56px;
    padding: 8px 8px;
}

.singleReleaseNoteView {
    display: flex;
    flex-direction: column;
    width: 800px;
    margin-left: calc(50% - 400px);
}
.reportArea .reportResult .reportResultTable .noTableReportData {
  text-align: center;
  padding: 106px 0;
}

#payedInfo.reportPayedGroup.FREE {
  display: none;
}
#payedInfo.reportPayedGroup.PAID {
  /*width: calc(100% - 60px);*/
  margin: 0 auto;
  height: 0;
}
#payedInfo.reportPayedGroup.PAID .paidInformation {
  position: relative;
  /*z-index: 20;*/
  height: 59px;
  /*width: calc(100% - 92px);*/
  background: #ffffff;
  /*margin-top: 37px;*/
  line-height: 59px;
  padding: 0 16px;
}
#payedInfo.reportPayedGroup.PAID .paidInformation button {
  font-family: "PT Sans", Arial, sans-serif;
  background: #FF7E00;
  color: #FFFFFF;
  height: 35px;
  line-height: 33px;
  cursor: pointer;
  border: none;
  outline: none;
  float: right;
  margin: 12px 0;
  min-width: 147px;
  text-align: center;
  border-radius: 3px;
  font-size: 12pt;
}
#payedInfo.reportPayedGroup.PAID .paidInformation button:hover {
  background: #F17700;
}
#payedInfo.reportPayedGroup.PAID .paidInformation button:active {
  background: #DE6B00;
}
#payedInfo.reportPayedGroup.PAID .paidInformation .upgradeTip {
  position: relative;
  color: white;
  height: 36px;
  line-height: 36px;
  width: calc(100% - 0px);
  text-align: right;
}
#payedInfo.reportPayedGroup.PAID .paidInformation .upgradeTip div {
  background: transparent url(a0048bb48612cb1bdc96.svg) left center no-repeat;
  padding-left: 26px;
  display: inline-block;
  padding-right: 16px;
}
.upgradeTipTitle {
  color: white;
  height: 20px;
  line-height: 20px;
  text-align: right;
}
.upgradeTipTitle div {
  background: transparent url(a0048bb48612cb1bdc96.svg) left center no-repeat;
  padding-left: 26px;
  display: inline-block;
  padding-right: 16px;
}

.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level0 {
  padding-left: 16px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level1 {
  padding-left: 46px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level2 {
  padding-left: 76px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level3 {
  padding-left: 106px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level4 {
  padding-left: 136px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level5 {
  padding-left: 166px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level6 {
  padding-left: 196px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level7 {
  padding-left: 226px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level8 {
  padding-left: 256px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level9 {
  padding-left: 286px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level10 {
  padding-left: 316px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level11 {
  padding-left: 346px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level12 {
  padding-left: 376px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level13 {
  padding-left: 406px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level14 {
  padding-left: 436px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level15 {
  padding-left: 466px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level16 {
  padding-left: 496px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level17 {
  padding-left: 526px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level18 {
  padding-left: 556px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level19 {
  padding-left: 586px !important;
}
.reportResult .reportResultTable .reportResultRow .reportResultColumn.taskName.level20 {
  padding-left: 616px !important;
}

.reportResultTable .reportResultRow.clickable {
  cursor: pointer;
}
.reportResultTable .reportResultRow.scheduledInThePast .reportResultColumn {
  background-image: url(162edab7887d434bf0bd.svg);
  background-repeat: no-repeat;
  background-position: 8px center;
}
.reportResultTable .reportResultRow.overDue .reportResultColumn {
  background-image: url(b455d3820c96d0e9ffc1.svg);
  background-repeat: no-repeat;
  background-position: 8px center;
}

.chartReportResult.noData {
  height: 272px !important;
}
.noChartReport {
  text-align: center;
  font-weight: bold;
  padding-top: 174px;
  margin: 0 0 72px 0;
  background: transparent url(6d735c42dfba2723ed96.svg) center 72px no-repeat;
}

.reportList {
  width: 1280px;
  padding: 19px calc(50% - 640px) 25px calc(50% - 640px);
  overflow: auto;
}
.reportList .reportGroupTitle {
  background-color: #25456E;
  color: #ffffff;
  padding-left: 20px;
  height: 35px;
  line-height: 35px;
  border-radius: 5px 5px 0 0;
  text-align: left;
  margin: 0 16px;
}
.reportList .reportGroupList {
  background-color: #FFFFFF;
  padding: 32px 68px 32px 68px;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.15);
  margin: 0 16px 8px 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 16px;
}
.reportList .reportGroupList .reportListItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #f8f8f8;
  border-radius: 35px 0 0 0;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);
  padding: 12px;
  width: 540px;
  box-sizing: border-box;
  cursor: pointer;
}
.reportList .reportGroupList .reportListItem .icon {
  height: 77px;
  width: 77px;
  min-width: 77px;
  min-height: 77px;
}
.reportList .reportGroupList .reportListItem .icon.table {
  background: transparent url(ffe675d72d7590793ca5.png) center no-repeat;
}
.reportList .reportGroupList .reportListItem .icon.chart {
  background: transparent url(b5986130c74ab3b8d08a.png) center no-repeat;
}
.reportList .reportGroupList .reportListItem .details {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 8px;
}
.reportList .reportGroupList .reportListItem .details .reportTitle {
  line-height: 35px;
  font-weight: bold;
  padding-left: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportList .reportGroupList .reportListItem .details .reportTitle .reportIcon.paid {
  width: 18px;
  height: 35px;
  margin-right: 8px;
  background: transparent url(cbfc0923672cbf8fb559.svg) center no-repeat;
  background-size: contain;
}
.reportList .reportGroupList .reportListItem .details .reportTitle .text {
  flex: 1;
}
.reportList .reportGroupList .reportListItem .details .reportDescription {
  padding: 8px 12px;
}
@media screen and (max-width: 1280px) {
  .reportList {
    width: 600px;
    padding: 19px calc(50% - 300px) 25px calc(50% - 300px);
  }
}

.reportsMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}
.reportsMainView .mainLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.reportsMainView .mainLayout .mainArea {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: calc(100% - 100px);
}

.reportsMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}
.reportsMainView .mainLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.reportParam.periodPreset {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.periodPreset .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.periodPreset .value {
  padding: 0 0 0 4px;
  width: 214px;
  border-radius: 4px;
  line-height: 35px;
}

.reportParam.date {
  border: solid 1px #eee;
  padding: 1px 4px 1px 0;
  width: 108px;
  border-radius: 4px;
  text-align: right;
  line-height: 33px !important;
}
.reportParam.date .datetimePicker .dateTimeViewer:hover {
  background-color: transparent;
}

.reportParam.context {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.context .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.context .value {
  padding: 0 0 0 4px;
  width: 304px;
  border-radius: 4px;
  line-height: 35px;
}
.reportParam.context .dynamicComboBox .list {
  width: 304px;
}

.reportParam.week {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
}
.reportParam.week .toolbarQuickAction {
  height: 37px;
  margin-top: -2px;
}
.reportParam.week .toolbarQuickAction.prevWeek {
  background-image: url(34b2aac902440ae89957.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8px;
}
.reportParam.week .toolbarQuickAction.prevWeek:active {
  background-image: url(0bb09c6703efc9d16ec0.svg);
}
.reportParam.week .toolbarQuickAction.nextWeek {
  background-image: url(ff864d10287c5adae8b7.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8px;
}
.reportParam.week .toolbarQuickAction.nextWeek:active {
  background-image: url(feeda8e363b2b86ca8be.svg);
}
.reportParam.week .value {
  border: solid 1px #eee;
  padding: 1px 4px 1px 0;
  width: 206px;
  border-radius: 4px;
  text-align: center;
  line-height: 33px !important;
}
.reportParam.week .value .datetimePicker .dateTimeViewer:hover {
  background-color: transparent;
}

.reportParam.abandonTask {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.abandonTask .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.abandonTask .value {
  padding: 0 0 0 4px;
  width: 344px;
  border-radius: 4px;
  line-height: 35px;
}
.reportParam.abandonTask .dynamicComboBox .list {
  width: 344px;
}

.reportParam.textGoal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.textGoal .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.textGoal .value {
  padding: 0 0 0 4px;
  width: 344px;
  border-radius: 4px;
  line-height: 35px;
}
.reportParam.textGoal .dynamicComboBox .list {
  width: 346px;
}

.reportParam.timeLevelSwitcher {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.timeLevelSwitcher .timeLevel {
  padding: 0 4px;
  cursor: pointer;
  line-height: 37px;
}
.reportParam.timeLevelSwitcher .timeLevel.disabled {
  color: #aaa;
  cursor: default;
}
.reportParam.timeLevelSwitcher .timeLevel.active {
  font-weight: bold;
  cursor: default;
  color: #333;
}

.reportParam.category {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.category .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.category .value {
  padding: 0 0 0 4px;
  width: 304px;
  border-radius: 4px;
  line-height: 35px;
}
.reportParam.category .dynamicComboBox .list {
  width: 304px;
}

.reportParam.numGoal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportParam.numGoal .label {
  font-weight: bold;
  margin-right: 16px;
  line-height: 37px;
}
.reportParam.numGoal .value {
  padding: 0 0 0 4px;
  width: 344px;
  border-radius: 4px;
  line-height: 35px;
}
.reportParam.numGoal .dynamicComboBox .list {
  width: 346px;
}

.mainToolbar.reportToolbar {
  padding: 0 8px;
  box-sizing: border-box;
  z-index: 101;
}
.mainToolbar.reportToolbar .toolbarAction {
  margin: 6px 0;
}
.mainToolbar.reportToolbar .reportParams {
  margin: 6px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.mainToolbar.reportToolbar .reportParams.left {
  flex: 1;
}
.mainToolbar.reportToolbar .reportParams.right {
  flex: 0;
}
.mainToolbar.reportToolbar .reportParam {
  margin: 0 4px;
  line-height: 29px;
}

.reportsMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}
.reportsMainView .mainLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.reportsMainView .mainLayout .mainArea {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: calc(100% - 100px);
}
.reportsMainView .mainToolbar.reportToolbar .goReportList {
  background: transparent url(75e593bd4d0db0efff19.svg) 6px center no-repeat;
  background-size: 14px;
}
.reportsMainView .reportArea {
  background: none #F8F8F8;
  padding: 12px 0 0 0;
  overflow-y: auto;
}
.reportsMainView .reportArea .reportResult {
  margin: 0 30px;
}
.reportsMainView .reportArea .reportResult .reportTitle {
  background: #25456E;
  color: #fff;
  font-weight: normal;
  padding: 8px 16px;
  border-radius: 5px 5px 0 0;
  font-size: 12pt;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.reportsMainView .reportArea .reportResult .reportResultTable {
  padding: 20px 55px 20px 55px;
  background: #E2E2E2;
  border-radius: 0 0 5px 5px;
  margin-bottom: 32px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow.hidden {
  display: none;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow.transparent {
  opacity: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow.fixed {
  position: fixed;
  top: 96px;
  width: calc(100% - 184px);
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow {
  line-height: 50px;
  min-height: 50px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: #F6F6F6;
  border: none;
  -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
  font-weight: bold;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .reportResultHeaderFakeColumn {
  min-width: 20px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .reportResultHeaderColumn {
  flex: 1;
  padding: 0 8px 0 16px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .report18Time {
  min-width: 144px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .reportResultHeaderColumn.dateTime {
  min-width: 144px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .reportResultHeaderColumn.goalTitle {
  flex: 0.33;
  max-width: 25%;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .week {
  min-width: 89px;
  flex: 0;
  text-align: center;
  padding: 0 4px 0 4px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .reportStatCell {
  min-width: 100px;
  flex: 0;
  white-space: nowrap;
  text-align: center;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .report15Time {
  min-width: 162px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultHeaderRow .report15Duration {
  min-width: 100px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow {
  line-height: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn {
  line-height: 20px;
  flex: 1;
  padding: 15px 8px 15px 16px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.many {
  display: flex;
  flex-direction: row;
  padding-left: 40px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.many .cellIdent {
  min-width: 4px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.many .cellValue {
  flex: 1;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.reportStatCell {
  min-width: 100px;
  flex: 0;
  white-space: nowrap;
  text-align: center;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.reportDayTime {
  min-width: 89px;
  padding: 15px 4px 15px 4px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.report18Time {
  min-width: 144px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.goalTitle {
  flex: 0.33;
  max-width: 25%;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.dateTime {
  min-width: 144px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.report15Time {
  min-width: 162px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultColumn.report15Duration {
  min-width: 100px;
  flex: 0;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow .reportResultFakeColumn {
  width: 20px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level1 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level1 .reportWeekTaskName {
  padding-left: 46px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level2 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level2 .reportWeekTaskName {
  padding-left: 76px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level3 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level3 .reportWeekTaskName {
  padding-left: 106px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level4 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level4 .reportWeekTaskName {
  padding-left: 136px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level5 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level5 .reportWeekTaskName {
  padding-left: 166px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level6 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level6 .reportWeekTaskName {
  padding-left: 196px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level7 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level7 .reportWeekTaskName {
  padding-left: 226px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level8 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level8 .reportWeekTaskName {
  padding-left: 256px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level9 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level9 .reportWeekTaskName {
  padding-left: 286px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level10 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level10 .reportWeekTaskName {
  padding-left: 316px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level11 .report18Name,
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.level11 .reportWeekTaskName {
  padding-left: 346px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.totalRow {
  font-weight: bold;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow:nth-child(odd) .reportResultColumn {
  background-color: #FFFFFF;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow:nth-child(even) .reportResultColumn {
  background-color: #F2F2F2;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.marginRow {
  line-height: 20px;
  height: 20px;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.marginRow .reportResultColumn {
  background: transparent;
}
.reportsMainView .reportArea .reportResult .reportResultTable .reportResultRow.totalTimeRow .reportResultColumn {
  background: #B4DCF6 !important;
  font-weight: bold;
}
.reportsMainView .reportArea .reportResult .reportResultTable.noData {
  height: 272px;
}
.reportsMainView .reportArea .reportResult .reportResultTable.PAID {
  padding-top: 72px;
}
.reportsMainView .reportArea.chart {
  height: calc(100% - 80px) !important;
}
.reportsMainView .reportArea.chart .reportResult {
  height: calc(100% - 10px) !important;
}
.reportsMainView .reportArea.chart .reportResult .chartReportResult {
  padding: 0 0 0 40px;
  background: #E2E2E2;
  border-radius: 0 0 5px 5px;
  margin-bottom: 32px;
  height: calc(100% - 40px);
}
.reportsMainView .reportArea.chart .reportResult .chartReportResult.noChartReport {
  height: 272px;
}
.reportsMainView .reportArea.chart .reportResult.PAID .chartReportResult {
  padding-top: 60px;
  height: calc(100% - 80px);
}

.appLogo {
  background: transparent url(f70e2a5df64844c9a5c8.svg) center no-repeat;
  width: 138px;
  height: 70px;
  background-size: 138px 70px;
  margin: auto;
  cursor: pointer;
}

.languageSwitcher {
  position: fixed;
  left: 8px;
  top: 8px;
}
.languageSwitcher .list {
  display: none;
  background-color: #E2E8F4;
  border-radius: 4px;
  font-size: 10pt;
  width: 136px;
  outline: none;
}
.languageSwitcher .list .item {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  padding: 0 8px;
  background-color: #fff;
}
.languageSwitcher .list .item.current {
  background-color: #E2E8F4;
}
.languageSwitcher .list .item:hover {
  background: #46668F;
  color: #fff;
}
.languageSwitcher .list .item:first-child {
  border-radius: 4px 4px 0 0;
}
.languageSwitcher .list .item:last-child {
  border-radius: 0 0 4px 4px;
}
.languageSwitcher .list.open {
  display: flex;
  flex-direction: column;
}
.languageSwitcher .value {
  height: 32px;
  line-height: 32px;
  width: 120px;
  background: #E2E8F4 url(9ccb1187fcb767233b6a.svg) calc(100% - 8px) center no-repeat;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 10pt;
}
.languageSwitcher .value.hide {
  display: none;
}

.versionInfo {
  display: none;
}

input[type="submit"].submitButton {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  width: 384px;
  background: #FF7E00;
  border: solid 1px #FF7E00;
  color: #ffffff;
  height: 45px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 8px;
  -webkit-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
}
input[type="submit"].submitButton:hover {
  background: #F17700;
  border: solid 1px #F17700;
  -webkit-appearance: none;
}
input[type="submit"].submitButton:active {
  background: #DE6B00;
  border: solid 1px #DE6B00;
  -webkit-appearance: none;
}
input[type="submit"].submitButton:disabled {
  cursor: not-allowed;
  background-color: #F17700;
  border: solid 1px #F17700;
  box-shadow: none;
}

.confirmRegisterForm .header {
  font-size: 1.6em;
  padding: 0px 4px 24px 4px !important;
}
.confirmRegisterForm .hint {
  font-size: 1.1em;
  margin-bottom: 20px;
}
.confirmRegisterForm .enterField {
  padding: 8px 0;
}
.confirmRegisterForm .enterField input.input_type {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 8px;
  text-align: center;
  border: solid 2px #F7F8FA;
  background-color: #F7F8FA;
  border-radius: 4px;
  width: 384px;
  height: 52px;
  -webkit-box-shadow: 0 0 0 1000px #F7F8FA inset;
  box-sizing: border-box;
}
.confirmRegisterForm .errorMessageDiv {
  color: #804000;
  font-size: 11pt;
  line-height: 24px;
}
.confirmRegisterForm .errorMessageDiv span {
  padding: 8px 0;
}
.confirmRegisterForm .errorMessageDiv.hasError {
  padding: 8px 0;
}

.activatePageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.activatePage {
  height: calc(100vh - 50px);
  overflow-y: auto;
  margin-top: -50px;
  padding-top: 50px;
}
.activatePage .activateFormDiv {
  width: 700px;
  margin-left: calc(50% - 350px);
  margin-top: max(calc(50vh - 301px), 0px);
  min-height: 502px;
}
.activatePage .activateFormDiv .confirmRegisterForm {
  text-align: center;
  background: #FFFFFF;
  padding: 48px 32px 64px 32px;
  width: 406px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  margin: 32px auto 0 auto;
}
.activatePage .activateFormDiv .errorMessage {
  margin: 32px 0;
  text-align: center;
}
.activatePage .activateFormDiv .errorMessage div {
  line-height: 24px;
}
.activatePage .activateFormDiv .errorMessage a,
.activatePage .activateFormDiv .errorMessage a:visited,
.activatePage .activateFormDiv .errorMessage a:active,
.activatePage .activateFormDiv .errorMessage a:hover {
  cursor: pointer;
  color: #466CB7;
  text-decoration: underline;
}
.activatePage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.activatePage .loginAccountLink a,
.activatePage .loginAccountLink a:hover,
.activatePage .loginAccountLink a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

.activatePageDiv {
  display: none;
}
.activateAccountPage {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.activateAccountPage button {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  width: 384px;
  background: #FF7E00;
  border: solid 1px #FF7E00;
  color: #ffffff;
  height: 45px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 8px;
  -webkit-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
}
.activateAccountPage button:hover {
  background: #F17700;
  border: solid 1px #F17700;
  -webkit-appearance: none;
}
.activateAccountPage button:active {
  background: #DE6B00;
  border: solid 1px #DE6B00;
  -webkit-appearance: none;
}
.activateAccountPage button:disabled {
  cursor: not-allowed;
  background-color: #F17700;
  border: solid 1px #F17700;
  box-shadow: none;
}

.setPasswordPage {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.setPasswordPage button {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  width: 384px;
  background: #FF7E00;
  border: solid 1px #FF7E00;
  color: #ffffff;
  height: 45px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 8px;
  -webkit-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
}
.setPasswordPage button:hover {
  background: #F17700;
  border: solid 1px #F17700;
  -webkit-appearance: none;
}
.setPasswordPage button:active {
  background: #DE6B00;
  border: solid 1px #DE6B00;
  -webkit-appearance: none;
}
.setPasswordPage button:disabled {
  cursor: not-allowed;
  background-color: #F17700;
  border: solid 1px #F17700;
  box-shadow: none;
}

.setPasswordForm .header {
  font-size: 1.6em;
  padding: 0px 4px 24px 4px !important;
}
.setPasswordForm .hint {
  font-size: 1.1em;
  margin-bottom: 20px;
}
.setPasswordForm .enterField {
  padding: 8px 0;
}
.setPasswordForm .enterField input.input_type {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 8px;
  text-align: center;
  border: solid 2px #F7F8FA;
  background-color: #F7F8FA;
  border-radius: 4px;
  width: 384px;
  height: 52px;
  -webkit-box-shadow: 0 0 0 1000px #F7F8FA inset;
  box-sizing: border-box;
}
.setPasswordForm .errorMessageDiv {
  color: #804000;
  font-size: 11pt;
  line-height: 24px;
}
.setPasswordForm .errorMessageDiv span {
  padding: 8px 0;
}
.setPasswordForm .errorMessageDiv.hasError {
  padding: 8px 0;
}

.activatePageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.setAccountPasswordPage {
  height: calc(100vh - 50px);
  overflow-y: auto;
  margin-top: -50px;
  padding-top: 50px;
}
.setAccountPasswordPage .activateFormDiv {
  width: 700px;
  margin-left: calc(50% - 350px);
  margin-top: max(calc(50vh - 301px), 0px);
  min-height: 502px;
}
.setAccountPasswordPage .activateFormDiv .setPasswordForm {
  text-align: center;
  background: #FFFFFF;
  padding: 48px 32px 64px 32px;
  width: 406px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  margin: 32px auto 0 auto;
}
.setAccountPasswordPage .activateFormDiv .errorMessage {
  margin: 32px 0;
  text-align: center;
}
.setAccountPasswordPage .activateFormDiv .errorMessage div {
  line-height: 24px;
}
.setAccountPasswordPage .activateFormDiv .errorMessage a,
.setAccountPasswordPage .activateFormDiv .errorMessage a:visited,
.setAccountPasswordPage .activateFormDiv .errorMessage a:active,
.setAccountPasswordPage .activateFormDiv .errorMessage a:hover {
  cursor: pointer;
  color: #466CB7;
  text-decoration: underline;
}
.setAccountPasswordPage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.setAccountPasswordPage .loginAccountLink a,
.setAccountPasswordPage .loginAccountLink a:hover,
.setAccountPasswordPage .loginAccountLink a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

#oldChooseRolePage {
  display: none;
}
.chooseRolePage .pageHeader {
  font-size: 1.4em;
  text-align: center;
  font-weight: bold;
}
.chooseRolePage .roleList {
  margin: 28px 8px 8px 8px;
}
.chooseRolePage .roleList .roleView {
  margin: 4px 0;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  color: #26466F;
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.chooseRolePage .roleList .roleView .name {
  font-weight: bold;
}
.chooseRolePage .roleList .roleView .description {
  font-style: italic;
}
.chooseRolePage .roleList .roleView:hover {
  text-decoration: underline;
}

.button.facebookButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.button.facebookButton .icon {
  width: 72px;
  height: 40px;
  background: transparent url(f73c71a378f0f63f4386.png) center center / 24px no-repeat;
}
.button.facebookButton .title {
  flex: 1;
  text-align: left;
}
.button.facebookButton.disabled {
  opacity: 0.6;
  cursor: default;
}

.button.googleButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.button.googleButton .icon {
  width: 72px;
  height: 40px;
  background: transparent url(c6f1e197011a0cf745dd.svg) center center / 56px no-repeat;
}
.button.googleButton .title {
  flex: 1;
  text-align: left;
}
.button.googleButton.disabled {
  opacity: 0.6;
  cursor: default;
}

.loginForm .loginHeader {
  font-size: 1.6em;
  padding: 0px 4px 24px 4px !important;
}
.loginForm .buttons {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  padding-left: 8px;
  padding-right: 12px;
  justify-content: space-between;
}
.loginForm .buttons .button {
  cursor: pointer;
  background-size: 24px;
  min-height: 27px;
  border-radius: 4px;
  border: solid 1px #E2E8F4;
  color: #82858C;
  line-height: 16px;
  min-width: 185px;
  max-width: 185px;
  font-size: 11pt;
}
.loginForm .buttons .button:hover {
  background-color: rgba(83, 148, 207, 0.07);
}
.loginForm .buttons .button:active {
  background-color: rgba(62, 116, 166, 0.07);
  background-size: 56px;
  border-color: #466EB5;
  color: #466EB5;
}
.loginForm .loginOrMessage {
  height: 44px;
  line-height: 44px;
  padding: 0px !important;
  margin: 8px 16px 0 16px;
}
.loginForm .loginOrMessage span {
  color: #B1B4B9;
  padding: 0 8px;
}
.loginForm .loginEnterField {
  padding: 8px 0;
}
.loginForm .loginEnterField input.input_type {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 8px;
  text-align: center;
  border: solid 2px #F7F8FA;
  background-color: #F7F8FA;
  border-radius: 4px;
  width: 384px;
  height: 52px;
  -webkit-box-shadow: 0 0 0 1000px #F7F8FA inset;
  box-sizing: border-box;
}
.loginForm .loginEnterField input.input_type.error {
  border-color: #FF6A6B;
}
.loginForm input[type="submit"]:disabled {
  cursor: not-allowed;
  background-color: #F17700;
  border: solid 1px #F17700;
  box-shadow: none;
}
.loginForm .errorMessageDiv {
  color: #804000;
  font-size: 11pt;
  line-height: 24px;
}
.loginForm .errorMessageDiv span {
  padding: 8px 0;
}
.loginForm .errorMessageDiv.hasError {
  padding: 8px 0;
}

#loginDiv,
#footer,
#languageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.loginPage {
  height: calc(100vh - 50px);
  overflow-y: auto;
  margin-top: -50px;
  padding-top: 50px;
}
.loginPage .loginFormDiv {
  width: 470px;
  margin-left: calc(50% - 235px);
  margin-top: max(calc(50vh - 371px), 0px);
  min-height: 642px;
}
.loginPage .loginFormDiv .loginForm {
  text-align: center;
  background: #FFFFFF;
  margin-top: 32px;
  padding: 48px 32px 64px 32px;
  width: 406px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.loginPage .registerLinkField {
  padding-top: 16px;
  text-align: center;
}
.loginPage .forgetPasswordLinkField {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.loginPage .forgetPasswordLinkField a,
.loginPage .registerLinkField a,
.loginPage .forgetPasswordLinkField a:hover,
.loginPage .registerLinkField a:hover,
.loginPage .forgetPasswordLinkField a:visited,
.loginPage .registerLinkField a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

.registerForm .registerHeader {
  font-size: 1.6em;
  padding: 0px 4px 24px 4px !important;
}
.registerForm .buttons {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  padding-left: 8px;
  padding-right: 12px;
  justify-content: space-between;
}
.registerForm .buttons .button {
  cursor: pointer;
  background-size: 24px;
  min-height: 27px;
  border-radius: 4px;
  border: solid 1px #E2E8F4;
  color: #82858C;
  line-height: 16px;
  min-width: 185px;
  max-width: 185px;
  font-size: 11pt;
}
.registerForm .buttons .button:hover {
  background-color: rgba(83, 148, 207, 0.07);
}
.registerForm .buttons .button:active {
  background-color: rgba(62, 116, 166, 0.07);
  background-size: 56px;
  border-color: #466EB5;
  color: #466EB5;
}
.registerForm .loginOrMessage {
  height: 44px;
  line-height: 44px;
  padding: 0px !important;
  margin: 8px 16px 0 16px;
}
.registerForm .loginOrMessage span {
  color: #B1B4B9;
  padding: 0 8px;
}
.registerForm .loginEnterField {
  padding: 8px 0;
}
.registerForm .loginEnterField input.input_type {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 8px;
  text-align: center;
  border: solid 2px #F7F8FA;
  background-color: #F7F8FA;
  border-radius: 4px;
  width: 384px;
  height: 52px;
  -webkit-box-shadow: 0 0 0 1000px #F7F8FA inset;
  box-sizing: border-box;
}
.registerForm .loginEnterField input.input_type.error {
  border-color: #FF6A6B;
}
.registerForm .errorMessageDiv {
  color: #804000;
  font-size: 11pt;
}
.registerForm .errorMessageDiv span {
  padding: 8px 0;
  line-height: 24px;
}
.registerForm .errorMessageDiv.hasError {
  padding: 8px 0;
}
.registerForm .privacyPolicy {
  text-align: center;
  padding-top: 1.6em;
}

#registerDiv,
#footer,
#languageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.registerPage {
  height: calc(100vh - 50px);
  overflow-y: auto;
  margin-top: -50px;
  padding-top: 50px;
}
.registerPage .registerFormDiv {
  width: 470px;
  margin-left: calc(50% - 235px);
  margin-top: max(calc(50vh - 391px), 0px);
  min-height: 682px;
}
.registerPage .registerFormDiv .registerForm {
  text-align: center;
  background: #FFFFFF;
  margin-top: 32px;
  padding: 48px 32px 64px 32px;
  width: 406px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.registerPage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.registerPage .loginAccountLink a,
.registerPage .privacyPolicy a,
.registerPage .loginAccountLink a:hover,
.registerPage .privacyPolicy a:hover,
.registerPage .loginAccountLink a:visited,
.registerPage .privacyPolicy a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

.resetPasswordForm .loginOrMessage {
  height: 28px;
  line-height: 28px;
  padding: 0px !important;
  margin: 16px 16px 0 16px;
}
.resetPasswordForm .loginOrMessage span {
  color: #B1B4B9;
  padding: 0 8px;
}
.resetPasswordForm .loginEnterField {
  padding: 8px 0;
}
.resetPasswordForm .loginEnterField input.input_type {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 8px;
  text-align: center;
  border: solid 2px #F7F8FA;
  background-color: #F7F8FA;
  border-radius: 4px;
  width: 384px;
  height: 52px;
  -webkit-box-shadow: 0 0 0 1000px #F7F8FA inset;
  box-sizing: border-box;
}
.resetPasswordForm .loginEnterField input.input_type.error {
  border-color: #FF6A6B;
}
.resetPasswordForm .errorMessageDiv {
  color: #804000;
  font-size: 11pt;
}
.resetPasswordForm .errorMessageDiv span {
  padding: 8px 0;
  line-height: 24px;
}
.resetPasswordForm .errorMessageDiv.hasError {
  padding: 8px 0;
}
.resetPasswordForm .tooltip {
  padding-bottom: 32px;
}

#loginDiv,
#footer,
#languageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.resetPasswordPage {
  height: calc(100vh - 50px);
  overflow-y: auto;
  margin-top: -50px;
  padding-top: 50px;
}
.resetPasswordPage .resetPasswordFormDiv {
  width: 470px;
  margin-left: calc(50% - 235px);
  margin-top: max(calc(50vh - 341px), 0px);
  min-height: 582px;
}
.resetPasswordPage .resetPasswordFormDiv .resetPasswordForm {
  text-align: center;
  background: #FFFFFF;
  margin-top: 32px;
  padding: 48px 32px 64px 32px;
  width: 406px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.resetPasswordPage .resetPasswordFormDiv .resetPasswordForm .tooltip div {
  line-height: 24px;
}
.resetPasswordPage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.resetPasswordPage .loginAccountLink a,
.resetPasswordPage .loginAccountLink a:hover,
.resetPasswordPage .loginAccountLink a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

#registerDiv,
#footer,
#languageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.successRegistrationPage .successRegistrationFormDiv {
  width: 470px;
  margin-left: calc(50% - 235px);
  margin-top: max(calc(50vh - 201px), 0px);
  min-height: 302px;
}
.successRegistrationPage .successRegistrationFormDiv .hint {
  margin: 48px 0 24px 0;
  text-align: center;
}
.successRegistrationPage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.successRegistrationPage .loginAccountLink a,
.successRegistrationPage .loginAccountLink a:hover,
.successRegistrationPage .loginAccountLink a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

#registerDiv,
#footer,
#languageDiv {
  display: none;
}
body.security {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
  background: #F1F5FE;
  color: #545A68;
  overflow-x: hidden;
  overflow-y: auto;
}
.successRestorePage .successRestoreFormDiv {
  width: 470px;
  margin-left: calc(50% - 235px);
  margin-top: max(calc(50vh - 201px), 0px);
  min-height: 302px;
}
.successRestorePage .successRestoreFormDiv .hint {
  margin: 48px 0 24px 0;
  text-align: center;
}
.successRestorePage .loginAccountLink {
  padding-top: 16px;
  font-size: 12pt;
  text-align: center;
}
.successRestorePage .loginAccountLink a,
.successRestorePage .loginAccountLink a:hover,
.successRestorePage .loginAccountLink a:visited {
  color: #466CB7;
  text-decoration: underline;
  cursor: pointer;
}

.mainItemArea {
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding-top: 10px;
}
.mainItemArea .itemGroups {
  width: 768px;
  margin-left: calc(50% - 384px);
}
.mainItemArea .itemGroups .itemGroup .title {
  line-height: 24px;
  margin-top: 21px;
  padding: 6px 0;
}
.mainItemArea .itemGroups .itemGroup .item {
  min-height: 48px;
  border: none;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  margin: 9px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  cursor: pointer;
}
.mainItemArea .itemGroups .itemGroup .item .itemType {
  min-width: 50px;
  border-radius: 4px 0 0 4px;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.context {
  background: rgba(128, 110, 240, 0.5) url(bb0788520a70340d208f.svg) 16px 15px no-repeat;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.context.checked {
  background-color: #806EF0;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.task {
  background: rgba(83, 148, 207, 0.5) url(7218aa4201ca3e7fe201.svg) 16px 15px no-repeat;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.task.checked {
  background-color: #5394CF;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.note {
  background: rgba(252, 124, 0, 0.5) url(e89ce9fc290d5e9105ad.svg) 16px 16px no-repeat;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.note.checked {
  background-color: #FC7C00;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.goal {
  background: rgba(235, 75, 75, 0.5) url(74b52a11218b4f99cb70.svg) 16px 15px no-repeat;
}
.mainItemArea .itemGroups .itemGroup .item .itemType.goal.checked {
  background-color: #EB4B4B;
}
.mainItemArea .itemGroups .itemGroup .item .content {
  flex: 1;
  line-height: 20px;
  padding: 14px 0 14px 16px;
  font-size: 10pt;
}
.mainItemArea .itemGroups .itemGroup .item .checkBox {
  min-width: 31px;
  background: transparent url(4958188204b23257e5aa.svg) 0px 15px no-repeat;
}
.mainItemArea .itemGroups .itemGroup .item .checkBox.checked {
  background-image: url(f2b58656fe65a41cd3c1.svg);
}

.recycleBinToolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  line-height: 37px;
  padding: 6px 8px;
  box-sizing: border-box;
}
.recycleBinToolbar .controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 8px;
}
.recycleBinToolbar .controls .selectionButton,
.recycleBinToolbar .controls .restoreButton,
.recycleBinToolbar .controls .removeButton {
  border: 1px solid #98BFE2;
  border-radius: 3px;
  background-color: #FFFFFF;
  color: #98BFE2;
  min-width: 80px;
  padding: 5px 9px 5px 32px;
  line-height: 25px;
  cursor: pointer;
}
.recycleBinToolbar .controls .selectionButton {
  border: 1px solid #BFC6CF;
  border-radius: 3px;
  background: transparent url(b32d2c427527f9ba9aa3.svg) calc(100% - 8px) center no-repeat;
  color: #333333;
  min-width: 192px;
  padding-left: 0;
  padding-right: 0;
}
.recycleBinToolbar .controls .selectionButton .control {
  text-align: center;
}
.recycleBinToolbar .controls .selectionButton .controlList {
  display: none;
  position: relative;
  background: #ffffff;
  width: 192px;
  padding: 2px 0px;
  top: 7px;
}
.recycleBinToolbar .controls .selectionButton .controlList .item {
  height: 36px;
  line-height: 36px;
  text-align: center;
}
.recycleBinToolbar .controls .selectionButton .controlList .item:hover {
  background-color: rgba(83, 148, 207, 0.07);
}
.recycleBinToolbar .controls .selectionButton .controlList .item:active {
  background-color: rgba(83, 148, 207, 0.14);
}
.recycleBinToolbar .controls .selectionButton .controlList.open {
  display: block;
}
.recycleBinToolbar .controls .restoreButton {
  background: transparent url(32428f4210e4d997a405.svg) 8px center no-repeat;
}
.recycleBinToolbar .controls .removeButton {
  background: transparent url(5ec11cfcf51953609e18.svg) 8px center no-repeat;
}
.recycleBinToolbar .controls .restoreButton.disabled,
.recycleBinToolbar .controls .removeButton.disabled {
  color: #AFB9C5;
  border-color: #AFB9C5;
  cursor: not-allowed;
}
.recycleBinToolbar .controls .restoreButton.disabled {
  background: transparent url(902ebca023a896fd611d.svg) 8px center no-repeat;
}
.recycleBinToolbar .controls .removeButton.disabled {
  background: transparent url(afd28b01edfe2c1b9164.svg) 8px center no-repeat;
}
.recycleBinToolbar .controls .restoreButton:hover:not(.disabled),
.recycleBinToolbar .controls .removeButton:hover:not(.disabled) {
  background-color: rgba(83, 148, 207, 0.07);
}
.recycleBinToolbar .controls .restoreButton:active:not(.disabled),
.recycleBinToolbar .controls .removeButton:active:not(.disabled) {
  background-color: rgba(83, 148, 207, 0.07);
  color: #466EB5;
  border-color: #466EB5;
}
.recycleBinToolbar .questionDialog {
  top: 52px;
}

.recycleBinMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}
.recycleBinMainView .mainLayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recycleBinMainView .mainLayout .mainArea {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: calc(100% - 100px);
}
.bottomBorder.active {
  background-color: #5394CF;
}

.searchMainView .mainLayout {
  height: calc(100% - 42px);
}
.searchMainView .mainLayout .mainArea {
  height: calc(100% - 8px);
  overflow-y: auto;
}
.searchMainView .mainLayout .mainArea .list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}
.searchMainView .mainLayout .mainArea .list .item {
  width: 768px;
  color: #333;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  min-height: 48px;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.searchMainView .mainLayout .mainArea .list .item .icon {
  width: 48px;
  min-height: 48px;
  cursor: default;
  border-radius: 3px 0 0 3px;
}
.searchMainView .mainLayout .mainArea .list .item .icon.task {
  background: #5394CF url(7218aa4201ca3e7fe201.svg) center 16px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .icon.goal {
  background: #EB4B4B url(74b52a11218b4f99cb70.svg) center 15px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .icon.note {
  background: #FC7C00 url(e89ce9fc290d5e9105ad.svg) center 16px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .icon.Evernote {
  background: #4AA440 url(eb4a1f65e002c047b88d.svg) center 16px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .icon.text_goal_value {
  background: #EB4B4B url(8dd9ba8ce7000533c368.svg) center 16px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .icon.comment {
  background: #BDBDBD url(8dd9ba8ce7000533c368.svg) center 16px no-repeat;
}
.searchMainView .mainLayout .mainArea .list .item .text {
  flex: 1;
  padding: 15px 8px 15px 20px;
  max-width: calc(100% - 120px);
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 11pt;
}
.searchMainView .mainLayout .mainArea .list .item .text .searchAddText {
  padding: 8px 0 0 0;
  color: #828282;
  font-size: 10pt;
}
.searchMainView .mainLayout .mainArea .list .item .text em.hlt1 {
  background: rgba(83, 148, 207, 0.3);
  font-style: inherit;
}
.searchMainView .mainLayout .mainArea .list .item .goAction {
  width: 48px;
  min-height: 48px;
  background: transparent url(b5a4ed3b915d2248f307.svg) center 14px no-repeat;
}

.searchToolbar .centerToolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: calc(100% - 8px);
  line-height: 49px;
  font-weight: normal;
  column-gap: 4px;
}
.searchToolbar .centerToolbar .text {
  font-weight: bold;
}

.searchMainView {
  position: fixed;
  width: calc(100%);
  height: calc(100% - 46px);
  top: 46px;
  left: 0;
  background: #F8F8F8;
}