body {
    margin: 0;
    font-family: "Manrope", "Arial", SansSerif, serif;
}

input {
    font-family: "Manrope", "Arial", SansSerif, serif;
    font-size: 1.05em;
}

textarea {
    font-family: "JenBrains Mono", "Arial", SansSerif, serif;
    padding: 4px 8px;
    font-size: 1.05em;
}

button {
    height: 32px;
    min-width: 100px;
    box-sizing: border-box;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: "Manrope", "Arial", SansSerif, serif;
    font-size: 12pt;
}

button:not(:disabled):hover {
    background-color: #e0e0e0;
}
.apiProgress {
  position: fixed;
  left: 4px;
  bottom: 4px;
  width: 3%;
  height: 4px;
}
.apiProgress.step0 {
  background: transparent;
}
.apiProgress.step1 {
  background: #347B98;
}
.apiProgress.step2 {
  background: #347B98;
  width: 5%;
}
.apiProgress.step3 {
  background: #FF5555;
  width: 6%;
}

.errorMessageDiv {
  position: fixed;
  bottom: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.errorMessageDiv .message {
  padding: 2px 32px;
  background-color: #FF5555;
  color: white;
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
}
.errorMessageDiv .message.reconnect {
  background-color: #3E94B6;
}

.viewAndLayersToolbar {
  position: fixed;
  left: 8px;
  bottom: 16px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.viewAndLayersToolbar .modes {
  display: flex;
  flex-direction: row;
}
.viewAndLayersToolbar .modes .viewModeButton {
  height: 32px;
  width: 32px;
  background-color: #eee;
  cursor: pointer;
}
.viewAndLayersToolbar .modes .viewModeButton.viewMode {
  background: #fff url(/0ed5be2d955c45d458f4.svg) center no-repeat;
  background-size: 75%;
}
.viewAndLayersToolbar .modes .viewModeButton.editMode {
  background: #fff url(/263add73cdfbbebcebec.svg) center no-repeat;
  background-size: 75%;
}
.viewAndLayersToolbar .modes .viewModeButton:hover {
  background-color: #D9D9D9;
}
.viewAndLayersToolbar .modes .viewModeButton.active {
  background-color: #347B98;
  cursor: default;
  opacity: 0.6;
}

.actionButton {
  height: 32px;
  width: 32px;
  cursor: pointer;
  /*border-radius: 3px;*/
}
.actionButton.addAction {
  background: transparent url(/b39d9ddea19afe0ffdc1.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.cloneAction {
  background: transparent url(/ea8b80abfd8ad1c1c10a.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.doneAction {
  background: transparent url(/5dba5405708f8b39593b.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.cancelAction {
  background: transparent url(/2780e8a97b4b0b9a6751.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.closeAction {
  background: transparent url(/2780e8a97b4b0b9a6751.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.toggleCloseAction {
  background: transparent url(/97e3301fcaacf2105edc.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.deleteAction,
.actionButton.removeAction {
  background: transparent url(/418015ad440a1de25ef2.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.homeAction {
  background: transparent url(/aef1e820f51dc40ea023.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.searchAction {
  background: transparent url(/35b132a51fc86ffb3b4e.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.moreAction {
  background: transparent url(/22d6ab9bf93112fdf864.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.upAction {
  background: transparent url(/489c75c5fc995655526f.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.downAction {
  background: transparent url(/130e7e4eb20ffd4a84fc.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.editAction {
  background: transparent url(/263add73cdfbbebcebec.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.viewAction {
  background: transparent url(/0ed5be2d955c45d458f4.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.hideAction {
  background: transparent url(/1aed6b11cae91e83d551.svg) center no-repeat;
  background-size: 85%;
}
.actionButton.cutAction {
  background: transparent url(/8a2737fe5b635c220a2d.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.copyAction {
  background: transparent url(/16085a558523edd0e3ff.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.pasteAction {
  background: transparent url(/132d6dfc02fae0ae1c79.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.clearPocketAction {
  background: transparent url(/9bd26e9e211b696693f3.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.moveLeftAction {
  background: transparent url(/787cfaec9bf2e69d97e1.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.moveRightAction {
  background: transparent url(/7469ec8b8080dd97cad6.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.createLinkAction {
  background: transparent url(/9236464c8145aa0e23d6.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.createNoteAction {
  background: transparent url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.backwardAction {
  background: transparent url(/aa9c56a630d7deca0011.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.duplicateAction {
  background: transparent url(/86950495aa5be896bb32.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.commentsAction {
  background: transparent url(/ccd6ab5781109769fc3d.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.linksAction {
  background: transparent url(/953aeb3b51512fcad786.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.lockAction {
  background: transparent url(/0904aef79b354fc511f7.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.unlockAction {
  background: transparent url(/1c7a16a61fa74dd2aace.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.settingsAction {
  background: transparent url(/13b18a07d31bdee0e5e3.svg) center no-repeat;
  background-size: 60%;
}
.actionButton.templateAction {
  background: transparent url(/1d0a06db5594eaa921ac.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.sendAction {
  background: transparent url(/75cfaa8cf189399809ca.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.toLeftAction {
  background: transparent url(/78ee727a65a2aa6070e0.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.toRightAction {
  background: transparent url(/0a10334ebfcb3f99f6b8.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.toTopAction {
  background: transparent url(/d1f37ac738ab5e2e8cc2.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.toBottomAction {
  background: transparent url(/870a60dd259349dabfca.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.noneArrowAction {
  background: transparent url(/4e080b9c5034f1847da4.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.leftArrowAction {
  background: transparent url(/24eac3cb5725745ff5d9.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.rightArrowAction {
  background: transparent url(/47b7b017583fce90257b.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.resetAction {
  background: transparent url(/b2abc2ca26c9fba4173b.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.zoomInAction {
  background: transparent url(/d950d96daa87eac2988c.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.zoomOutAction {
  background: transparent url(/08579237a896314aaf4b.svg) center no-repeat;
  background-size: 70%;
}
.actionButton.fitAction {
  background: transparent url(/55665478187872fe3732.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.toPocketAction {
  background: transparent url(/e1cdd010077db58616b2.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.notifyAction {
  background: transparent url(/12c75508bbea86ad5191.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.toCenterAction {
  background: transparent url(/c1fbfae5976f55f29fb4.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.listAction {
  background: transparent url(/a1d5b23ed2b40084865e.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.clockAction {
  background: transparent url(/d5dd60184a1b9583708c.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.collapseAction {
  background: transparent url(/e223d17814de31ea9800.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.disposeAction {
  background: transparent url(/e5f47c748801f839e072.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.refreshAction {
  background: transparent url(/31b9b38551e4313708a3.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.downloadAction {
  background: transparent url(/a983a22bc5c0d2f4d087.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.exportJsonAction {
  background: transparent url(/a8defa4606ebb05c828f.svg) center no-repeat;
  background-size: 80%;
}
.actionButton.exportYamlAction {
  background: transparent url(/fae65ccb9605af73a68f.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.exportPlantUMLSequenceAction {
  background: transparent url(/ffeb194b2eda37f959f6.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.exportPlantUMLActivityAction {
  background: transparent url(/1141214b764546acdc32.svg) center no-repeat;
  background-size: 75%;
}
.actionButton.exportPlantUMLComponentsAction {
  background: transparent url(/6c8f16685994345387ed.svg) center no-repeat;
  background-size: 75%;
}
.actionButton:hover {
  background-color: #e0e0e0;
}
.actionButton.disabled {
  background-image: none;
  cursor: default;
  opacity: 0.5;
}
.actionButton.disabled:hover {
  background-color: transparent !important;
}
.actionButton.active {
  background-color: #347B98;
  opacity: 0.6;
}

button.buttonWrapper {
  cursor: pointer;
  height: 32px;
  padding: 0 24px;
  min-width: 100px;
  line-height: 28px;
  border: none;
  border-radius: 3px;
  background-color: #347B98;
  color: #FFFFFF;
  box-sizing: border-box;
}
button.buttonWrapper.cancel {
  background-color: transparent;
  color: #3E94B6;
  border: solid 1px #3E94B6;
}
button.buttonWrapper.primary {
  background-color: #FCCB1A;
  color: #333333;
  border: solid 1px #FCCB1A;
}
button.buttonWrapper.none {
  background-color: #EdEdEd;
  color: #092834;
}
button.buttonWrapper.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button.buttonWrapper:hover:not(.disabled) {
  background-color: #3E94B6;
  color: #FFFFFF;
}
button.buttonWrapper.disabled:hover {
  background-color: #347B98;
  color: #FFFFFF;
}
button.buttonWrapper.cancel:hover:not(.disabled) {
  background-color: rgba(62, 148, 182, 0.1);
  color: #347B98;
  border: solid 1px #347B98;
}
button.buttonWrapper.primary:hover:not(.disabled) {
  background-color: #FCDB2A;
  color: #555555;
  border: solid 1px #FCDB2A;
}

.checkBox {
  width: 26px;
  height: 26px;
  margin: 2px;
  background: url(/3923c9ab245ef8f9e52f.svg) center no-repeat;
  background-size: 26px;
  cursor: pointer;
}
.checkBox.checked {
  background: url(/5ba131363fea3a4b8630.svg) center no-repeat;
  background-size: 26px;
}

.textAreaWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.textAreaWrapper .line-numbers {
  background-color: #f5f5f5;
  color: #999;
  padding: 5px 6px 5px 6px;
  text-align: right;
  overflow-y: hidden;
  line-height: 24px;
  user-select: none;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
}
.textAreaWrapper textarea {
  line-height: 24px;
}
.textAreaWrapper .autoComplete {
  width: 28px;
  height: 28px;
  cursor: pointer;
  opacity: 0.25;
  background: #eee url(/956854ba5551d3077ff3.svg) center / 70% no-repeat;
}
.textAreaWrapper .autoComplete.visible {
  opacity: 1;
}
.textAreaWrapper .autoComplete:hover {
  opacity: 0.7;
}
.textAreaWrapper .snippets {
  opacity: 0.7;
  width: 0;
}
.textAreaWrapper .snippets .snippetsInner {
  position: absolute;
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  margin-top: 4px;
}
.textAreaWrapper .snippets .snippet {
  width: 28px;
  height: 28px;
  background: #eee;
  border-radius: 3px;
  text-align: center;
  font-size: 0.9em;
  line-height: 28px;
  cursor: pointer;
}
.textAreaWrapper .snippets .snippet:hover {
  font-weight: bold;
}
.textAreaWrapper .snippets .snippet.visible {
  background: #eee url(/47b7b017583fce90257b.svg) center / 70% no-repeat;
}
.textAreaWrapper .snippets .snippet.hidden {
  background: transparent url(/24eac3cb5725745ff5d9.svg) center / 70% no-repeat;
}
.textAreaWrapper .snippets .snippet.fullScreen {
  background: transparent url(/3b2780abdd6ecf51ee78.svg) center / 70% no-repeat;
}
.textAreaWrapper .snippets .snippet.rightPanel {
  background: transparent url(/dab88d560986f584717f.svg) center / 70% no-repeat;
}
.textAreaWrapper .snippets .snippet.noFullScreen {
  background: transparent url(/292b45c4760ac0fb6e82.svg) center / 70% no-repeat;
}
.textAreaWrapper .snippets .snippet.visible:hover,
.textAreaWrapper .snippets .snippet.fullScreen:hover,
.textAreaWrapper .snippets .snippet.noFullScreen:hover {
  opacity: 0.5;
}
.textAreaWrapper .snippets .snippet.hidden:hover {
  background-color: #f2f2f2;
}
.textAreaWrapper .ac-suggestions {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 100%;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  z-index: 10;
}
.textAreaWrapper .ac-suggestions li {
  padding: 6px 8px;
  cursor: pointer;
}
.textAreaWrapper .ac-suggestions li.active,
.textAreaWrapper .ac-suggestions li:hover {
  background: #e6f7ff;
}
.textAreaWrapper.fullScreen {
  position: fixed;
  z-index: 100;
  top: 60px;
  left: 60px;
  width: calc(100% - 120px);
  max-height: calc(100% - 120px);
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.textAreaWrapper.rightPanel {
  position: fixed;
  z-index: 100;
  top: 60px;
  left: calc(50% + 30px);
  width: calc(50% - 40px);
  max-height: calc(100% - 120px);
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}

.datetimePicker {
  min-width: 104px;
  height: 32px;
  line-height: 32px;
}
.datetimePicker .dateTimeViewer {
  cursor: pointer;
  padding: 0 4px;
  text-align: center;
}
.datetimePicker .dateTimeViewer:hover {
  background: #f2f2f2;
}
.datetimePicker .dateTimeViewer.hidden {
  display: none;
}

.dateTimeEditor {
  display: none;
  min-width: 104px;
  height: 32px;
  line-height: 32px;
}
.dateTimeEditor .currentDate {
  padding: 0 4px;
  text-align: center;
}
.dateTimeEditor .picker {
  position: absolute;
  background: #fff;
  width: 320px;
  z-index: 10;
}
.dateTimeEditor .picker .periodNavigator {
  text-align: center;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.dateTimeEditor .picker .periodNavigator .periodName {
  flex: 1;
}
.dateTimeEditor .picker .buttons {
  display: flex;
  height: 32px;
  line-height: 32px;
  margin: 4px 0 8px 0;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}
.dateTimeEditor .picker .timeInput {
  width: calc(100% - 8px);
  padding-left: 8px;
  margin: 4px 0;
}
.dateTimeEditor .picker .timeInput input {
  width: calc(100% - 8px);
  text-align: right;
}
.dateTimeEditor.visible {
  display: block;
}

.monthView {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.monthView .monthWeekView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  height: 32px;
  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: 3px;
  cursor: pointer;
}
.monthView .monthWeekView .dayView:hover {
  background: #f8f8f8;
}
.monthView .monthWeekView .dayView.today {
  border: solid 2px #ff0000;
}
.monthView .monthWeekView .dayView.current {
  background: #333;
  color: #ffffff;
  cursor: default;
}
.monthView .monthWeekView .dayView.prev,
.monthView .monthWeekView .dayView.next {
  color: #555;
}
.monthView .monthWeekView .dayView.weekDay {
  font-weight: bold;
}

.itemListComboBox .itemValue {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
}
.itemListComboBox .itemValue:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.itemListComboBox .itemValue.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.itemListComboBox .itemValue.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.itemListComboBox .itemListContainer {
  position: relative;
}
.itemListComboBox .itemListContainer .itemList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.itemListComboBox .itemListContainer .itemList .itemInList {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.itemListComboBox .itemListContainer .itemList .itemInList:hover {
  background: #eee;
}
.itemListComboBox .itemListContainer .itemList.open {
  display: initial;
}

.buttonMenu {
  display: inline-block;
  position: relative;
}
.buttonMenu__group {
  display: flex;
  align-items: stretch;
}
.buttonMenu__main {
  padding: 0 12px;
  background: #FCCB1A;
  color: #333333;
  border: 1px solid #FCCB1A;
  border-right: none;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
}
button.buttonMenu__main:hover {
  background: #FCDB2A;
  color: #555555;
  border-color: #FCDB2A;
}
.buttonMenu__toggle {
  width: 36px;
  min-width: 36px;
  border: 1px solid #347B98;
  border-radius: 0 3px 3px 0;
  background: #347B98;
  color: #FFFFFF;
  cursor: pointer;
}
button.buttonMenu__toggle:hover {
  background: #3E94B6;
  color: #FFFFFF;
  border-color: #3E94B6;
}
.buttonMenu__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  min-width: 180px;
  z-index: 20;
  padding: 6px;
}
.buttonMenu__menuEmpty {
  padding: 8px 10px;
  color: #6b7280;
}
.buttonMenu__menuItem {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
}
.buttonMenu__menuItem:hover {
  background: #f3f4f6;
}

.filterTags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 4px;
  justify-content: center;
  margin-top: 4px;
  margin-bottom: 4px;
}
.filterTags .tag {
  font-size: 0.9em;
  background-color: #eee;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.filterTags .tag:hover {
  background-color: #ddd;
}
.filterTags .tag.checked {
  background-color: #666;
  color: #fff;
}
.filterTags .tag.checked:hover {
  background-color: #444;
  color: #eee;
}
.filterTags .action {
  cursor: pointer;
  text-decoration: underline;
}

.fileWrapper input[type="file"]::file-selector-button {
  padding: 2px 16px;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  height: 32px;
  line-height: 28px;
  box-sizing: border-box;
}
.fileWrapper input[type="reset"] {
  padding: 2px 16px;
  background-color: #F4F4F4;
  color: #333;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  height: 32px;
  line-height: 28px;
  box-sizing: border-box;
}
.fileWrapper input[type="file"]::file-selector-button:hover,
.fileWrapper input[type="reset"]:hover {
  background-color: #F0F0F0;
}
.fileWrapper input[type="file"]::file-selector-button:active,
.fileWrapper input[type="reset"]:active {
  background-color: #eeeeee;
}

.csvTableContainer div.title {
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 4px;
}
.csvTable {
  border-collapse: collapse;
  width: 100%;
}
.csvTable th,
.csvTable td {
  border: 1px solid #ddd;
  padding: 8px;
}
.csvTable thead {
  background-color: #d0d0d0;
}
.csvTable th {
  font-weight: bold;
  text-align: center;
}
.csvTable tr.totalRow {
  font-weight: bold;
}

.canvasEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.canvasEditor .cloningModeHint {
  text-align: center;
  color: #347B98;
  padding-bottom: 4px;
}
.canvasEditor .canvasEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.canvasEditor .canvasEditField .label {
  width: 140px;
  font-weight: bold;
}
.canvasEditor .canvasEditField .field {
  flex: 1;
}
.canvasEditor .canvasEditField .field input {
  width: calc(100% - 8px);
}
.canvasEditor .canvasEditActions {
  display: flex;
  flex-direction: row;
}
.canvasEditor .canvasEditActions .mainActions {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.canvasEditor .canvasEditorSpaceBetween {
  flex: 1;
}

.appItem.appCanvas .canvasItemContent {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.appItem.appCanvas .canvasItemContent .canvasUrl {
  color: #347B98;
  font-weight: bold;
  cursor: pointer;
}
.cardItems .canvasItemContent .canvasUrl {
  text-align: center;
  padding: 0 4px;
}
.cardItems .appItem.appCanvas:hover .canvasUrl {
  color: #ffffff;
}
.edit .appItem.appCanvas .canvasUrl {
  color: #666;
  font-weight: bold;
  cursor: pointer;
}
.edit .appItem.appCanvas:hover .canvasUrl {
  color: #ccc;
}

.wsCommandsState {
  position: fixed;
  z-index: 100;
  top: 0;
  height: 4px;
  left: 48.5%;
  width: 3%;
  border-radius: 0 0 4px 4px;
  background: #347B98;
}
.wsCommandsState.open {
  background: #93d275;
}
.wsCommandsState.connecting {
  background: #a6ccf5;
}
.wsCommandsState.closing {
  background: #ffb48d;
}
.wsCommandsState.closed {
  background: #C21460;
  cursor: pointer;
  left: 48%;
  width: 4%;
  height: 6px;
  border-radius: 0 0 6px 6px;
}
.wsCommandsState.uninstantiated {
  background: #AAAAAA;
}

.markdownViewer .header {
  font-weight: bold;
}
.markdownViewer .header.header1 {
  font-size: 2.5rem;
}
.markdownViewer .header.header2 {
  font-size: 2rem;
}
.markdownViewer .header.header3 {
  font-size: 1.75rem;
}
.markdownViewer .header.header4 {
  font-size: 1.5rem;
}
.markdownViewer .header.header5 {
  font-size: 1.25rem;
}
.markdownViewer .header.header6 {
  font-size: 1rem;
}
.markdownViewer.compact .header.header1 {
  font-size: 2.4rem;
}
.markdownViewer.compact .header.header2 {
  font-size: 1.9rem;
}
.markdownViewer.compact .header.header3 {
  font-size: 1.65rem;
}
.markdownViewer.compact .header.header4 {
  font-size: 1.4rem;
}
.markdownViewer.compact .header.header5 {
  font-size: 1.2rem;
}
.markdownViewer.compact .header.header6 {
  font-size: 1rem;
}

.markdownViewer .markdownParagraphView {
  margin: 4px 0;
  min-height: 1em;
}
.markdownViewer.compact .markdownParagraphView {
  margin: 2px 0;
}

.markdownViewer .preprocessed {
  white-space: pre;
  background: #f8f8f8;
  padding: 4px 8px;
}

.markdownViewer .header {
  font-weight: bold;
}
.markdownViewer .header1 {
  font-size: 2.5rem;
}
.markdownViewer .header2 {
  font-size: 2rem;
}
.markdownViewer .header3 {
  font-size: 1.75rem;
}
.markdownViewer .header4 {
  font-size: 1.5rem;
}
.markdownViewer .header5 {
  font-size: 1.25rem;
}
.markdownViewer .header6 {
  font-size: 1rem;
}
.markdownViewer.compact .header1 {
  font-size: 2.4rem;
}
.markdownViewer.compact .header2 {
  font-size: 1.9rem;
}
.markdownViewer.compact .header3 {
  font-size: 1.65rem;
}
.markdownViewer.compact .header4 {
  font-size: 1.4rem;
}
.markdownViewer.compact .header5 {
  font-size: 1.2rem;
}
.markdownViewer.compact .header6 {
  font-size: 1rem;
}

.markdownViewer .block.paragraph {
  margin: 4px 0;
  min-height: 1em;
}
.markdownViewer.compact .block.paragraph {
  margin: 2px 0;
}

.markdownViewer .block.code {
  white-space: pre;
  background: #f8f8f8;
  padding: 4px 8px;
  margin: 4px 0;
  font-family: "JenBrains Mono", "Arial", SansSerif, serif;
}
.markdownViewer .block.code .hint {
  height: 16px;
  margin: 4px 36px 4px 16px;
  line-height: 16px;
  font-size: 10pt;
  background: #f0f0f0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  opacity: 0.75;
  float: right;
}
.markdownViewer.compact .block.code {
  padding: 2px 8px;
  margin: 2px 0;
}

.markdownViewer .block.quote {
  background: #f8f8f8;
  padding: 4px 8px;
  margin: 4px 0;
  border-left: solid 10px #ccc;
}
.markdownViewer.compact .block.quote {
  padding: 2px 8px;
  margin: 2px 0;
  border-left: solid 6px #ccc;
}

.markdownViewer .block.orderedList {
  margin: 4px 0;
}
.markdownViewer.compact .block.orderedList {
  margin: 2px 0;
}

.markdownViewer .block.unorderedList {
  margin: 4px 0;
}
.markdownViewer.compact .block.unorderedList {
  margin: 2px 0;
}

.markdownViewer {
  position: relative;
}
.markdownViewer .actionButton.copyAction {
  position: absolute;
  right: 2px;
  margin-top: -2px;
}
.markdownViewer a,
.markdownViewer a:hover,
.markdownViewer a:active {
  color: #347B98;
  text-decoration: none;
}
.markdownViewer a:hover {
  text-decoration: underline;
  color: #144B68;
}
.markdownViewer .block em,
.markdownViewer .block code,
.markdownViewer .block strong {
  margin: 0 4px 0 0;
}
.markdownViewer .block input {
  height: 24px;
  position: relative;
  top: 6px;
}
.markdownViewer span.atomLineThrough {
  text-decoration: line-through;
  color: #666;
}
.markdownViewer.compact .block em,
.markdownViewer.compact .block code,
.markdownViewer.compact .block strong {
  margin: 0 2px 0 0;
}
.markdownViewer.compact .block input {
  height: 16px;
  top: 2px;
}

.calculator {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 440px;
  height: 400px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.calculator .calculatorInput {
  width: calc(100% - 16px);
  height: 40px;
  font-size: 1.4rem;
  text-align: right;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-x: auto;
  margin: 8px 8px 12px 8px;
}
.calculator .buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 8px;
  flex: 1;
}
.calculator .button {
  padding: 12px;
  font-size: 1rem;
  border-radius: 4px;
  border: solid 1px #999;
  background-color: transparent;
  cursor: pointer;
  min-width: 16px;
  height: 46px;
  line-height: 22px;
  box-shadow: 2px 2px 2px 0 rgba(50, 50, 50, 0.25);
}
.calculator .button:hover {
  background-color: #f8f8f8;
}
.calculator .button:active {
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.25);
}
.calculator .button.operator {
  background-color: #347B98;
  color: #FFFFFF;
}
.calculator .button.operator:hover {
  background-color: #3E94B6;
  color: #FFFFFF;
}
.calculator .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 8px;
  height: 40px;
  align-items: center;
}
.calculator .actions .hint {
  line-height: 32px;
  color: #999;
  padding: 0 8px;
}

.calculatorTool {
  width: 32px;
  height: 32px;
  background: transparent url(/8d84b65d326ec4976c57.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.calculatorTool.active {
  background: #347B98 url(/3656bf0c4625b12d312c.svg) no-repeat center center / 80%;
}
.calculatorTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.dateDiffTool {
  width: 32px;
  height: 32px;
  background: transparent url(/168d1d50d7eae142c0d4.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.dateDiffTool.active {
  background: #347B98 url(/7e5d3942be040ed1cf7c.svg) no-repeat center center / 80%;
}
.dateDiffTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.dateDiff {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 440px;
  height: 160px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.dateDiff .form {
  flex: 1;
}
.dateDiff .form .field {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  height: 32px;
  margin: 4px 8px;
  align-items: flex-start;
}
.dateDiff .form .field .label {
  font-weight: bold;
  min-width: 120px;
  line-height: 32px;
}
.dateDiff .form .field input {
  height: 28px;
  text-align: right;
  margin: 2px 0;
}
.dateDiff .result {
  min-height: 32px;
  line-height: 32px;
  font-weight: bold;
  font-size: 1.6em;
  text-align: center;
}
.dateDiff .result.error {
  font-size: 1.05em;
  color: #C21460;
}
.dateDiff .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 8px;
  height: 40px;
  align-items: center;
}
.dateDiff .actions .hint {
  line-height: 32px;
  color: #999;
  padding: 0 8px;
}

.diagramPreview .settingsView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
  line-height: 32px;
}
.diagramPreview .settingsView div {
  cursor: pointer;
}

.diagramPreviewTool {
  width: 32px;
  height: 32px;
  background: transparent url(/845e41235cd0bdbd7e5f.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.diagramPreviewTool.active {
  background: #347B98 url(/994768b478c71542425c.svg) no-repeat center center / 80%;
}
.diagramPreviewTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}
.diagramPreview {
  position: fixed;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  outline: none;
}
.diagramPreview .tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
}
.diagramPreview .tabs .tab {
  padding: 0 8px;
  cursor: pointer;
}
.diagramPreview .tabs .tab.active {
  cursor: default;
  background: #333;
  color: #fff;
}
.diagramPreview .content {
  width: 100%;
  height: calc(100% - 32px);
}
.diagramPreview .content .editArea {
  width: 100%;
  height: calc(100% - 4px);
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.diagramPreview .content .editArea .buttonWrapper {
  margin: 0 8px;
}
.diagramPreview .content .textAreaWrapper {
  width: 100%;
  height: calc(100% - 36px);
}
.diagramPreview .content .textAreaWrapper textarea {
  width: calc(100% - 42px);
  resize: none;
}
.diagramPreview .content .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.diagramPreview .content .actions .hint {
  line-height: 32px;
  color: #999;
  padding: 0 8px;
}
.diagramPreview .diagramContentPreview {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
}
.diagramPreview .previewPanel .actions {
  margin: 0 8px;
}

.meetings .calendar {
  border: 1px solid #ccc;
  background: #fff;
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.meetings .slot {
  border-top: 1px solid #eee;
  padding: 0.4rem 0;
}
.meetings .meeting {
  margin: 0.2rem 0;
  padding: 0.4rem;
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
}
.meetings .meeting small {
  margin-left: 4px;
}
.meetings .meeting.important {
  background: #ffebee;
  border-left-color: #f44336;
}

.meetings .day-calendar {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  width: 100%;
}
.meetings .day-calendar .time-slot {
  display: flex;
  border-bottom: 1px solid #eee;
  height: 50px;
}
.meetings .day-calendar .time-label {
  width: 60px;
  padding: 5px;
  border-right: 1px solid #eee;
  text-align: center;
  font-size: 12px;
  color: #777;
}
.meetings .day-calendar .meeting-container {
  flex-grow: 1;
  position: relative;
}
.meetings .day-calendar .meeting {
  position: absolute;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  font-size: 12px;
  color: #333;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meetingEditor {
  z-index: 30;
  position: fixed;
  background: #fff;
  right: 8px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 4px 8px;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  min-width: 360px;
}
.meetingEditor h2 {
  margin: 4px 0 12px 0;
  text-align: center;
}
.meetingEditor .meetingEditorField {
  display: flex;
  flex-direction: row;
  height: 32px;
  line-height: 32px;
  align-items: center;
}
.meetingEditor .meetingEditorField input {
  width: calc(100% - 4px);
}
.meetingEditor .editorActions {
  display: flex;
  flex-direction: row;
}

.meetings .meetingList {
  height: calc(100% - 44px);
  padding: 4px 4px;
  width: calc(100% - 4px);
  overflow-y: auto;
  overflow-x: hidden;
}
.meetings .meetingList .meetingItem {
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.meetings .meetingList .meetingItem .meetingItemTitle {
  flex: 1;
}
.meetings .meetingList .meetingItem .times,
.meetings .meetingList .meetingItem .itemActions {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.meetings .meetingList .meetingItem .times .actionButton,
.meetings .meetingList .meetingItem .itemActions .actionButton {
  opacity: 0;
}
.meetings .meetingList .meetingItem.important {
  font-weight: bold;
}
.meetings .meetingList .meetingItem:hover .actionButton {
  opacity: 1;
}

.meetings {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 640px;
  height: 320px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  outline: none;
  flex: 1;
  min-width: 260px;
}
.meetings .textAreaWrapper {
  height: calc(100% - 44px);
  padding: 4px 4px;
  width: calc(100% - 4px);
}
.meetings .textAreaWrapper textarea {
  resize: none;
  height: calc(100% - 12px);
  width: calc(100% - 20px);
  border: solid 1px #eee;
}
.meetings .innerArea {
  height: calc(100% - 8px);
  width: calc(100% - 4px);
}
.meetings .innerArea .calendarArea {
  max-height: calc(100% - 40px);
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 2px 4px;
}
.meetings .actions {
  padding: 0 4px;
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.meetings .actions .subActions {
  display: flex;
  flex-direction: row;
}
.meetings .actions .actionButton {
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}
.meetings .actions .actionButton.restrictedHeight {
  background-image: url(/3b2780abdd6ecf51ee78.svg);
}
.meetings .actions .actionButton.fullHeight {
  background-image: url(/292b45c4760ac0fb6e82.svg);
}
.meetings .actions .actionButton.fullDayAction {
  background-image: url(/1ac82d0cce7bf3564a49.svg);
}
.meetings .actions .actionButton.modeAction.toText {
  background-image: url(/d78294fbbb4be91f1cbd.svg);
}
.meetings .actions .actionButton.modeAction.toList {
  background-image: url(/bc7aa6da32422583c1a2.svg);
}
.meetings .actions .actionButton.modeAction.toCalendar {
  background-image: url(/80e7652a0f5b9f295e54.svg);
}
.meetings .actions .actionButton.modeAction.toDayCalendar {
  background-image: url(/168d1d50d7eae142c0d4.svg);
}
.meetings.fullHeight {
  height: calc(100vh - 120px);
}

.meetingsTool {
  width: 32px;
  height: 32px;
  background: transparent url(/80e7652a0f5b9f295e54.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.meetingsTool.active {
  background: #347B98 url(/69437be0ef18a0f62c69.svg) no-repeat center center / 80%;
}
.meetingsTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.noteTodoList {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 800px;
  height: 48%;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  outline: none;
  /* Empty State */
  /* Item List */
  /* Item Component */
  /* Edit Mode */
  /* Responsive Design */
}
.noteTodoList .app-main {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: calc(100% - 2px);
}
.noteTodoList .input-form {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.noteTodoList .input-form .actionButton {
  min-width: 32px;
}
.noteTodoList .input-form .actionButton.fullScreen {
  background-image: url(/292b45c4760ac0fb6e82.svg);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}
.noteTodoList .type-selector {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.noteTodoList .type-selector label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background-color 0.2s;
}
.noteTodoList .type-selector label:hover {
  background-color: #f0f0f0;
}
.noteTodoList .type-selector input[type="radio"] {
  cursor: pointer;
  border: none;
  outline: none;
  height: 24px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  margin: 0 4px;
}
.noteTodoList .input-container {
  display: flex;
  gap: 10px;
  margin: 0 auto;
  align-items: flex-start;
}
.noteTodoList .input-container input {
  margin: 0 8px;
}
.noteTodoList .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}
.noteTodoList .empty-state p {
  font-size: 1.1rem;
}
.noteTodoList .item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100% - 108px);
  overflow-y: auto;
  padding: 4px 0;
}
.noteTodoList .item {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 4px 8px;
  transition: all 0.2s;
  background: white;
}
.noteTodoList .item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.noteTodoList .item.note {
  border-left: 4px solid #ff9800;
}
.noteTodoList .item.task {
  border-left: 4px solid #2196f3;
}
.noteTodoList .item.task.completed {
  opacity: 0.7;
  background-color: #f9f9f9;
}
.noteTodoList .item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  margin-left: -4px;
}
.noteTodoList .item-header span.actions {
  display: flex;
  flex-direction: row;
}
.noteTodoList .item-header span.actions .actionButton.checkAction {
  background-image: url(/3923c9ab245ef8f9e52f.svg);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}
.noteTodoList .item-header span.actions .actionButton.uncheckAction {
  background-image: url(/5ba131363fea3a4b8630.svg);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}
.noteTodoList .item-icon {
  width: 32px;
  height: 32px;
}
.noteTodoList .item-icon.note {
  background: transparent url(/32ce37d216b0b2df0384.svg) center / 75% no-repeat;
}
.noteTodoList .item-icon.task {
  background: transparent url(/029444b6d64d48407117.svg) center / 75% no-repeat;
}
.noteTodoList .item-type {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  flex: 1;
}
.noteTodoList .item-info {
  width: 32px;
  height: 32px;
  background: transparent url(/973dbfe7ac7eb3774ed6.svg) center / 80% no-repeat;
}
.noteTodoList .item-date {
  font-size: 0.8rem;
  color: #999;
  margin-left: auto;
}
.noteTodoList .item-date.completed {
  color: #888;
  margin-right: 4px;
}
.noteTodoList .content-text {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 4px;
  margin-top: 8px;
  white-space: pre-wrap;
}
.noteTodoList .item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.noteTodoList .item-actions button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.noteTodoList .item-actions button:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
}
.noteTodoList .toggle-btn.complete {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}
.noteTodoList .toggle-btn.complete:hover {
  background-color: #45a049;
  border-color: #45a049;
}
.noteTodoList .toggle-btn.uncomplete {
  background-color: #ff9800;
  color: white;
  border-color: #ff9800;
}
.noteTodoList .toggle-btn.uncomplete:hover {
  background-color: #e68900;
  border-color: #e68900;
}
.noteTodoList .edit-btn {
  color: #2196f3;
}
.noteTodoList .delete-btn {
  color: #f44336;
}
.noteTodoList .item-edit {
  margin-top: 10px;
}
.noteTodoList .item-edit textarea {
  width: calc(100% - 8px);
  min-height: 64px;
  resize: none;
  outline: none;
}
.noteTodoList .item-edit input {
  width: calc(100% - 4px);
  margin-bottom: 8px;
}
.noteTodoList .edit-input:focus {
  outline: none;
  border-color: #2196f3;
}
.noteTodoList .edit-actions {
  display: flex;
  gap: 8px;
}
.noteTodoList .save-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.noteTodoList .save-btn:hover {
  background-color: #45a049;
}
.noteTodoList .cancel-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.noteTodoList .cancel-btn:hover {
  background-color: #da190b;
}
@media (max-width: 600px) {
  .noteTodoList .app {
    padding: 10px;
  }
  .noteTodoList .app-main {
    padding: 20px;
  }
  .noteTodoList .input-container {
    flex-direction: column;
  }
  .noteTodoList .item-actions {
    justify-content: center;
  }
  .noteTodoList .item-header {
    flex-wrap: wrap;
  }
  .noteTodoList .item-date {
    margin-left: 0;
    width: 100%;
    text-align: center;
    margin-top: 5px;
  }
}
.noteTodoList.fullScreen {
  height: calc(100vh - 128px);
}

.noteTodoListTool {
  width: 32px;
  height: 32px;
  background: transparent url(/bc7aa6da32422583c1a2.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.noteTodoListTool.active {
  background: #347B98 url(/6369aae3e9c658817391.svg) no-repeat center center / 80%;
}
.noteTodoListTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.passwordEditor {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 648px;
  height: 100px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.passwordEditor .form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.passwordEditor .form .field {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
  height: 32px;
  margin: 4px 8px;
  align-items: flex-start;
}
.passwordEditor .form .field .label {
  font-weight: bold;
  min-width: 120px;
  line-height: 32px;
}
.passwordEditor .form .field input {
  height: 28px;
  text-align: left;
  margin: 2px 0;
}
.passwordEditor .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 8px;
  height: 40px;
  align-items: flex-end;
  flex: 1;
  padding-bottom: 8px;
}
.passwordEditor .actions .leftActions {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.passwordEditor .actions .hint {
  line-height: 32px;
  color: #999;
  padding: 0 8px;
}

.passwordTool {
  width: 32px;
  height: 32px;
  background: transparent url(/c5e85c04a0b57d8669ca.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.passwordTool.active {
  background: #347B98 url(/66e7cc4a4e478c575608.svg) no-repeat center center / 80%;
}
.passwordTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.addingLinkDialog {
  position: fixed;
  right: 8px;
  min-width: 360px;
  width: 16%;
  min-height: 200px;
  max-height: 40%;
  top: 42px;
  z-index: 20;
  background-color: #fff;
  border: solid 1px #eee;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
}
.addingLinkDialog .titleAndClose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  margin-bottom: 16px;
}
.addingLinkDialog .titleAndClose .title {
  font-size: 1.1em;
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.addingLinkDialog .fieldAndLabel {
  margin: 8px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  padding: 0 4px;
}
.addingLinkDialog .fieldAndLabel .label {
  min-width: 100px;
  line-height: 32px;
  font-weight: bold;
}
.addingLinkDialog .fieldAndLabel .field {
  flex: 1;
}
.addingLinkDialog .fieldAndLabel .field input {
  width: calc(100% - 4px);
  height: 32px;
  margin: 0;
}
.addingLinkDialog .formActions {
  margin: 32px 0 4px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.addingNoteDialog {
  position: fixed;
  right: 8px;
  min-width: 360px;
  width: 16%;
  min-height: 160px;
  max-height: 40%;
  top: 42px;
  z-index: 20;
  background-color: #fff;
  border: solid 1px #eee;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
}
.addingNoteDialog .titleAndClose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  margin-bottom: 16px;
}
.addingNoteDialog .titleAndClose .title {
  font-size: 1.1em;
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.addingNoteDialog .fieldAndLabel {
  margin: 8px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  padding: 0 4px;
}
.addingNoteDialog .fieldAndLabel .label {
  min-width: 100px;
  line-height: 32px;
  font-weight: bold;
}
.addingNoteDialog .fieldAndLabel .field {
  flex: 1;
}
.addingNoteDialog .fieldAndLabel .field input {
  width: calc(100% - 4px);
  height: 32px;
  margin: 0;
}
.addingNoteDialog .formActions {
  margin: 32px 0 4px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.pocketItemView {
  width: 32px;
  height: 32px;
  background: #ffffff;
  cursor: pointer;
}
.pocketItemView.link {
  background: url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 85%;
}
.pocketItemView.note {
  background: url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 85%;
}
.pocketItemView.document {
  background: url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 85%;
}
.pocketItemView.canvas {
  background: url(/970f2c71a45d6bb1260e.svg) center no-repeat;
  background-size: 85%;
}
.pocketItemView.board_layer {
  background: url(/06b45a808dee6a4f5af6.svg) center no-repeat;
  background-size: 85%;
}
.pocketItemView.selected {
  background-color: #eeeeee;
  cursor: default;
}

.pocketView .pocketTool {
  width: 48px;
  height: 32px;
  background: transparent url(/336f14d2170154826256.svg) center / 55% no-repeat;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  border-radius: 0 8px 8px 0;
}
.pocketView .pocketTool .itemsCount {
  font-size: 10pt;
  font-weight: bold;
  padding: 0 4px;
}
.pocketView .pocketTool.active {
  background: #347B98 url(/82fa93a3054b53c1ed4b.svg) center / 55% no-repeat;
}
.pocketView .pocketTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}
.pocketView .pocketToolDialog {
  position: fixed;
  right: 8px;
  width: 144px;
  bottom: 56px;
  background-color: #fff;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.pocketView .quickActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: calc(100% - 4px);
}
.pocketView .clearPocketAction,
.pocketView .resetAction {
  display: none;
}
.pocketView .pocketToolDialog:hover .clearPocketAction,
.pocketView .pocketToolDialog:hover .resetAction {
  display: block;
}
.pocketView .pocketToolDialog:hover .clearPocketAction {
  margin-left: 8px;
  border-left: solid 1px #eee;
}

.pomodoro {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 440px;
  height: 200px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  padding: 4px 8px;
  box-sizing: border-box;
  outline: none;
}
.pomodoro .pomodoro-choose,
.pomodoro .pomodoro-running {
  height: 136px;
  text-align: center;
}
.pomodoro .pomodoro-choose {
  font-size: 1.1em;
  line-height: 60px;
}
.pomodoro .pomodoro-running h1 {
  font-size: 3.2em;
  margin-top: 28px;
  font-family: "JenBrains Mono", "Arial", SansSerif, serif;
}
.pomodoro .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pomodoro .actions .startButtons {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.pomodoro .actions .hint {
  line-height: 32px;
  color: #999;
}
.pomodoro.running {
  right: 16px;
  width: 440px;
}

.pomodoroTool {
  width: 32px;
  height: 32px;
  background: transparent url(/56c4bb92430ad1b1a789.svg) no-repeat center center / 70%;
  cursor: pointer;
}
.pomodoroTool.running {
  background: transparent url(/2205d627ba4e55137787.svg) no-repeat center center / 70%;
  animation: pomodoroIcon 1s infinite alternate;
}
@keyframes pomodoroIcon {
  from {
    scale: 1;
  }
  to {
    scale: 1.25;
  }
}
.pomodoroTool.active:not(.running) {
  background: #347B98 url(/cab01099d0c837e0a33f.svg) no-repeat center center / 70%;
}
.pomodoroTool.running.active {
  background-color: rgba(52, 123, 152, 0.33);
}
.pomodoroTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}
.pomodoroTool.running:hover {
  background-color: rgba(52, 123, 152, 0.2);
  opacity: 1;
}

.simpleNoteTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}
.simpleNote {
  position: fixed;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  outline: none;
}
.simpleNote .tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
}
.simpleNote .tabs .tab {
  padding: 0 8px;
  cursor: pointer;
}
.simpleNote .tabs .tab.active {
  cursor: default;
  background: #333;
  color: #fff;
}
.simpleNote .content {
  width: 100%;
  height: calc(100% - 32px);
}
.simpleNote .content .editArea {
  width: 100%;
  height: calc(100% - 4px);
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.simpleNote .content .editArea .buttonWrapper {
  margin: 0 8px;
}
.simpleNote .content .textAreaWrapper {
  width: 100%;
  height: calc(100% - 36px);
}
.simpleNote .content .textAreaWrapper textarea {
  width: calc(100% - 42px);
  resize: none;
}
.simpleNote .content .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.simpleNote .content .actions .hint {
  line-height: 32px;
  color: #999;
  padding: 0 8px;
}
.simpleNote .previewPanel {
  height: calc(100%);
}
.simpleNote .previewPanel .markdownPreview {
  height: calc(100% - 40px);
  overflow-y: auto;
}
.simpleNote .previewPanel .markdownViewer {
  padding: 4px 8px;
}
.simpleNote .previewPanel .actions {
  margin: 0 0;
  border-top: solid 1px #eee;
  padding: 4px 8px 0 8px;
}

.simpleNoteTool {
  width: 32px;
  height: 32px;
  background: transparent url(/1e9cc3c1e2c2d55409e9.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.simpleNoteTool.active {
  background: #347B98 url(/466ee05f0f28d91e6f7c.svg) no-repeat center center / 80%;
}
.simpleNoteTool:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.timer {
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 280px;
  height: 100px;
  background: white;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
  padding: 4px 8px 8px 8px;
  box-sizing: border-box;
  outline: none;
}
.timer .setupMode {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  height: 100%;
}
.timer .setupMode .minutes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
}
.timer .setupMode .minutes span {
  font-size: 1.2em;
  font-weight: bold;
}
.timer .setupMode .minutes .actionButton {
  background-position: center;
  background-size: 75%;
  background-repeat: no-repeat;
}
.timer .setupMode .minutes .actionButton:hover {
  background-color: transparent;
  opacity: 0.5;
}
.timer .setupMode .minutes .minusAction:not(.disabled) {
  background-image: url(/8d01e130783661c5dd70.svg);
}
.timer .setupMode .minutes .plusAction:not(.disabled) {
  background-image: url(/58e049a7c6f211c2bf39.svg);
}
.timer .setupMode .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.timer .runMode {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.timer .runMode h1 {
  flex: 1;
  text-align: center;
}

.simpleTimer {
  width: 32px;
  height: 32px;
  background: transparent url(/d7177af9bcfa4c6a8810.svg) no-repeat center center / 80%;
  cursor: pointer;
}
.simpleTimer.active {
  background: #347B98 url(/33892aba65566bd0410e.svg) no-repeat center center / 80%;
}
.simpleTimer:hover {
  background-color: #347B98;
  opacity: 0.6;
}

.customToolButton.currentViewIcon.custom.visible {
  background-color: #347B98;
}
.customToolViewDialog {
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
  box-sizing: border-box;
  position: fixed;
}
.customToolViewDialog iframe {
  border: solid 1px #666;
  width: calc(100% - 2px);
  height: calc(100% - 5px);
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}

.inboxButton.currentViewIcon.custom.visible {
  background-color: #347B98;
}
.inboxViewDialog {
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
  box-sizing: border-box;
  position: fixed;
}
.inboxViewDialog iframe {
  border: solid 1px #666;
  width: calc(100% - 2px);
  height: calc(100% - 5px);
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}

.toolsToolbar {
  position: fixed;
  right: 8px;
  bottom: 16px;
  min-width: 36px;
  min-height: 32px;
  padding: 0;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.toolsToolbar .toolIcon {
  border-radius: 8px;
}
.toolsToolbar .toolIcon:hover {
  animation: toolIcon 1s;
  animation-fill-mode: forwards;
}
@keyframes toolIcon {
  from {
    scale: 1;
  }
  to {
    scale: 1.33;
  }
}
.toolsToolbar .actionButton.moveLeftAction,
.toolsToolbar .actionButton.moveRightAction {
  border-radius: 0 8px 8px 0;
}
.toolsToolbar .actionButton.moveLeftAction:hover,
.toolsToolbar .actionButton.moveRightAction:hover {
  animation: actionIcon 0.4s;
  animation-fill-mode: forwards;
}
@keyframes actionIcon {
  from {
    background-size: 70%;
  }
  to {
    background-size: 95%;
  }
}
.toolsToolbar .separator {
  width: 2px;
  background: transparent;
  min-height: 32px;
  margin: 0 1px;
}
.toolsToolbar .inboxButton,
.toolsToolbar .customToolButton {
  width: 36px;
  height: 32px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px 0 0 8px;
}
.toolsToolbar .inboxButton.custom,
.toolsToolbar .customToolButton.custom {
  background-position-x: 90%;
  background-color: #fff;
}
.toolsToolbar .inboxButton:hover,
.toolsToolbar .customToolButton:hover {
  background-color: #347B98;
  opacity: 0.6;
  border-radius: 8px 0 0 8px;
}

.saveAsTemplateDialog {
  position: fixed;
  z-index: 200;
  bottom: 16px;
  background: #ffffff;
  border: solid 1px #eee;
  border-radius: 3px;
  left: calc(50% - 260px);
  width: 520px;
  height: 144px;
  display: flex;
  flex-direction: column;
}
.saveAsTemplateDialog .editField {
  width: calc(100% - 0px);
  margin: 8px 4px;
}
.saveAsTemplateDialog .editField input {
  width: calc(100% - 8px);
  height: 28px;
  line-height: 28px;
}
.saveAsTemplateDialog .actions {
  display: flex;
  flex-direction: row;
  margin-top: 8px;
  justify-content: center;
}

.chooseTemplateDialog {
  position: fixed;
  left: calc(50% - 200px);
  top: calc(50% - 250px);
  width: 400px;
  height: 500px;
  z-index: 10;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  background: #fff;
  border: solid 1px #eee;
}
.chooseTemplateDialog .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.chooseTemplateDialog .actions .dialogDialog {
  font-weight: bold;
  font-size: 1.05em;
  text-align: center;
  flex: 1;
  line-height: 32px;
}
.chooseTemplateDialog .list {
  height: calc(100% - 32px);
  overflow-y: auto;
}
.chooseTemplateDialog .list .templateData {
  display: flex;
  flex-direction: column;
  margin: 4px 0;
  padding: 2px 0;
}
.chooseTemplateDialog .list .templateData .titleAndActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.chooseTemplateDialog .list .templateData .titleAndActions .title {
  height: 28px;
  line-height: 28px;
  padding: 0 4px;
  flex: 1;
  cursor: default;
}
.chooseTemplateDialog .list .templateData .titleAndActions .title.editing {
  margin-left: 10px;
}
.chooseTemplateDialog .list .templateData .titleAndActions .title.editing input {
  width: calc(100% - 2px);
}
.chooseTemplateDialog .list .templateData .titleAndActions .actionButton.editAction,
.chooseTemplateDialog .list .templateData .titleAndActions .actionButton.deleteAction {
  opacity: 0;
}
.chooseTemplateDialog .list .templateData .titleAndActions:hover .actionButton.editAction,
.chooseTemplateDialog .list .templateData .titleAndActions:hover .actionButton.deleteAction {
  opacity: 1;
}
.chooseTemplateDialog .list .templateData .description {
  min-height: 20px;
  line-height: 20px;
  padding: 4px 4px 0 4px;
  font-size: 0.8em;
  white-space: normal;
}
.chooseTemplateDialog .list .templateData .description .textAreaWrapper {
  width: calc(100% - 8px);
}
.chooseTemplateDialog .list .templateData .description .textAreaWrapper textarea {
  width: calc(100%);
  resize: none;
}

.notificationDialog {
  position: fixed;
  min-height: 100px;
  max-height: 200px;
  width: 640px;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  top: calc(50% - 100px);
  left: calc(50% - 320px);
  padding: 4px 8px ;
  box-sizing: border-box;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notificationDialog .header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.notificationDialog .header .title {
  flex: 1;
  height: 32px;
  line-height: 32px;
  margin-bottom: 4px;
  font-weight: bold;
  text-align: center;
}
.notificationDialog .text {
  flex: 1;
}

.createNotificationDialog {
  position: fixed;
  width: 840px;
  height: 420px;
  left: calc(50% - 420px);
  top: calc(50% - 210px);
  z-index: 110;
  background-color: #fff;
  border: solid 1px #eee;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: 3px;
}
.createNotificationDialog .oldNotificationsList {
  height: 180px;
  overflow-y: auto;
}
.createNotificationDialog .oldNotificationsList .oldNotification {
  min-height: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  line-height: 32px;
}
.createNotificationDialog .oldNotificationsList .oldNotification .template {
  width: calc(100% - 150px);
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.createNotificationDialog .oldNotificationsList .oldNotification .dateTime {
  width: 128px;
  text-align: right;
  white-space: nowrap;
}
.createNotificationDialog .title {
  font-weight: bold;
  font-size: 1.05em;
  text-align: center;
  margin: 8px 0;
}
.createNotificationDialog .field {
  margin: 8px 0;
  display: flex;
  flex-direction: row;
  min-height: 32px;
  line-height: 32px;
}
.createNotificationDialog .field .label {
  font-weight: bold;
  min-width: 120px;
}
.createNotificationDialog .field .textAreaWrapper {
  flex: 1;
}
.createNotificationDialog .field .textAreaWrapper textarea {
  flex: 1;
  min-height: 100px;
  resize: none;
}
.createNotificationDialog .field input {
  flex: 1;
}
.createNotificationDialog .actions {
  margin: 8px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.createNotificationDialog .autoPeriodButtons {
  margin: 0 0 0 8px;
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.createNotificationDialog .autoPeriodButtons button {
  min-width: 120px;
}
.createNotificationDialog.noOld {
  height: 260px;
  top: calc(50% - 130px);
}
.createNotificationDialog.noOld .oldNotificationsList {
  height: 0;
}

.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: #fff;
  border: 1px solid #eee;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  outline: none;
}
.questionDialog button.closeButton {
  width: 24px;
  height: 24px;
  background: url(/2780e8a97b4b0b9a6751.svg) 100% / 13px no-repeat;
  float: right;
  top: 6px;
  right: 9px;
  position: absolute;
  cursor: pointer;
  border: none;
}
.questionDialog .buttons {
  margin: 16px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.popupColorPreset {
  min-width: 32px;
  height: 32px;
  font-size: 1.1em;
  margin: 4px;
}
.popupColorPreset .chosen {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: solid 1px #eee;
  text-align: center;
  cursor: pointer;
  line-height: 30px;
  border-radius: 3px;
}
.popupColorPreset .chosen.light {
  color: #ffffff;
}
.popupColorPreset .chosen:hover {
  -webkit-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
  box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
}
.popupColorPreset .chosen.disabled {
  cursor: not-allowed;
}
.popupColorPreset .colorPresetList {
  position: absolute;
  display: none;
  background: #ffffff;
  -webkit-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
  box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.2);
}
.popupColorPreset .colorPresetList .preset {
  width: 24px;
  height: 24px;
  margin: 2px;
  border-radius: 3px;
  cursor: pointer;
}
.popupColorPreset .colorPresetList .preset.active {
  -webkit-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.25);
  -moz-box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.25);
  box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.25);
  cursor: default;
}
.popupColorPreset .colorPresetList .colorValue {
  margin-top: 6px;
  margin-bottom: 4px;
}
.popupColorPreset .colorPresetList .colorValue input {
  width: calc(100% - 4px);
}
.popupColorPreset .colorPresetList.open {
  display: flex;
  max-width: 122px;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 4px 4px;
  border: solid 1px #eee;
}
.popupColorPreset .colorPresetList.allowTransparent.open {
  max-width: 152px;
}

.sizeChanger {
  display: flex;
  width: 104px;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 4px 8px;
}
.sizeChanger button {
  margin: 0 0 4px 0;
}
.sizeChanger.shortMode {
  width: 116px;
  flex-direction: row;
}
.sizeChanger.shortMode .shortModeButton_large,
.sizeChanger.shortMode .shortModeButton_middle,
.sizeChanger.shortMode .shortModeButton_standard {
  width: 32px;
  height: 32px;
  margin: 4px;
  background: transparent url(/39d0a3aacefb99f73c2b.svg) center no-repeat;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  line-height: 32px;
}
.sizeChanger.shortMode .shortModeButton_large.disabled,
.sizeChanger.shortMode .shortModeButton_middle.disabled,
.sizeChanger.shortMode .shortModeButton_standard.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.sizeChanger.shortMode .shortModeButton_large.active,
.sizeChanger.shortMode .shortModeButton_middle.active,
.sizeChanger.shortMode .shortModeButton_standard.active {
  background-color: #347B98;
  background-image: url(/ee05d0a8ca810756dba4.svg);
  color: #ffffff;
}
.sizeChanger.shortMode .shortModeButton_large {
  background-size: 100%;
}
.sizeChanger.shortMode .shortModeButton_middle {
  background-size: 75%;
}
.sizeChanger.shortMode .shortModeButton_standard {
  background-size: 60%;
}

.widgetShortModeEditor.diagramWidget {
  position: absolute;
  width: 108px;
  height: 50px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 3px;
}
.boardWidgetEditor.diagramWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 400px);
  width: 800px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.diagramWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.diagramWidget .mainEditor {
  flex: 1;
  margin: 4px 8px 4px 4px;
}
.boardWidgetEditor.diagramWidget .mainEditor .textAreaWrapper {
  height: calc(100% - 8px);
}
.boardWidgetEditor.diagramWidget .mainEditor .textAreaWrapper textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}
.boardWidgetEditor.diagramWidget .actions .actionButton.diagramAction {
  background-image: url(/845e41235cd0bdbd7e5f.svg);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}
.boardWidgetEditor.diagramWidget .editorTextProperties {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.widgetComments {
  width: 16px;
  height: 16px;
  background: transparent url(/ccd6ab5781109769fc3d.svg) center no-repeat;
  background-size: 16px;
  cursor: pointer;
  margin: 4px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
}
.widgetComments:hover {
  opacity: 0.5;
}

.resizableWidget:hover .widgetLinkBottom {
  position: absolute;
  left: calc(50% - 8px);
  bottom: -9px;
  width: 16px;
  height: 16px;
  background-color: #347B98;
  border-radius: 8px;
  cursor: crosshair;
  z-index: 10;
}
.resizableWidget:hover .widgetLinkRight {
  position: absolute;
  right: -9px;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background-color: #347B98;
  border-radius: 8px;
  cursor: crosshair;
  z-index: 10;
}
.resizableWidget:hover .widgetLinkTop {
  position: absolute;
  left: calc(50% - 8px);
  top: -9px;
  width: 16px;
  height: 16px;
  background-color: #347B98;
  border-radius: 8px;
  cursor: crosshair;
  z-index: 10;
}
.resizableWidget:hover .widgetLinkLeft {
  position: absolute;
  left: -9px;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background-color: #347B98;
  border-radius: 8px;
  cursor: crosshair;
  z-index: 10;
}

.widgetLockedState {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  width: 0;
}
.widgetLockedState.locked {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: transparent url(/0904aef79b354fc511f7.svg) center no-repeat;
  background-size: 16px;
}

.resizableWidget.selected:hover .widgetResizerLeft {
  position: absolute;
  left: -3px;
  top: 3px;
  width: 5px;
  height: calc(100% - 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: w-resize;
  z-index: 5;
}
.resizableWidget.selected:hover .widgetResizerTop {
  position: absolute;
  top: -3px;
  left: -3px;
  height: 6px;
  width: calc(100% + 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: n-resize;
  z-index: 5;
}
.resizableWidget.selected:hover .widgetResizerRight {
  position: absolute;
  right: -3px;
  top: 3px;
  width: 6px;
  height: calc(100% - 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: w-resize;
  z-index: 5;
}
.resizableWidget.selected:hover .widgetResizerBottom {
  position: absolute;
  bottom: -3px;
  left: -3px;
  height: 6px;
  width: calc(100% + 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: n-resize;
  z-index: 5;
}
.resizableWidget.selected:hover .widgetResizerBottomRight {
  position: absolute;
  bottom: -4px;
  right: -4px;
  height: 8px;
  width: 8px;
  background-color: rgba(100 100 100 / 0.05);
  cursor: nw-resize;
  z-index: 5;
}
.resizableWidget:hover .widgetResizerLeft {
  position: absolute;
  left: -3px;
  top: 3px;
  width: 5px;
  height: calc(100% - 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: w-resize;
  z-index: 5;
}
.resizableWidget:hover .widgetResizerTop {
  position: absolute;
  top: -3px;
  left: -3px;
  height: 6px;
  width: calc(100% + 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: n-resize;
  z-index: 5;
}
.resizableWidget:hover .widgetResizerRight {
  position: absolute;
  right: -3px;
  top: 3px;
  width: 6px;
  height: calc(100% - 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: w-resize;
  z-index: 5;
}
.resizableWidget:hover .widgetResizerBottom {
  position: absolute;
  bottom: -3px;
  left: -3px;
  height: 6px;
  width: calc(100% + 6px);
  background-color: rgba(100 100 100 / 0.05);
  cursor: n-resize;
  z-index: 5;
}
.resizableWidget:hover .widgetResizerBottomRight {
  position: absolute;
  bottom: -4px;
  right: -4px;
  height: 8px;
  width: 8px;
  background-color: rgba(100 100 100 / 0.05);
  cursor: nw-resize;
  z-index: 5;
}

.addIcons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.addIcons .dataLinksViewer,
.addIcons .widgetComments,
.addIcons .widgetLockedState {
  position: static !important;
}

.widget.diagramWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.diagramWidget .diagramWidgetContent {
  width: calc(100%);
  max-height: calc(100%);
  height: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.widget.diagramWidget .diagramWidgetContent .loading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  animation: diagramloading 2s infinite;
}
@keyframes diagramloading {
  0% {
    font-size: 1em;
  }
  50% {
    font-size: 1.2em;
  }
  100% {
    font-size: 1em;
  }
}
.widget.diagramWidget .diagramWidgetContent svg {
  height: inherit !important;
  width: inherit !important;
}
.widget.diagramWidget .diagramWidgetContent svg rect:hover,
.widget.diagramWidget .diagramWidgetContent svg path:hover,
.widget.diagramWidget .diagramWidgetContent svg ellipse:hover,
.widget.diagramWidget .diagramWidgetContent svg line:hover,
.widget.diagramWidget .diagramWidgetContent svg polygon:hover {
  filter: drop-shadow(0px 0px 4px gray);
}
.widget.diagramWidget .diagramWidgetContent svg text {
  pointer-events: none;
}
.widget.diagramWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.diagramWidget.bg1 {
  background-color: #FCCB1A;
  border: solid 1px #FCCB1A;
}
.widget.diagramWidget.bg2 {
  background-color: #ffffff;
  border: solid 1px #ffffff;
}
.widget.diagramWidget.bg3 {
  background-color: #a6ccf5;
  border: solid 1px #a6ccf5;
}
.widget.diagramWidget.bg4 {
  background-color: #fff9b1;
  border: solid 1px #fff9b1;
}
.widget.diagramWidget.bg5 {
  background-color: #ffcee0;
  border: solid 1px #ffcee0;
}
.widget.diagramWidget.bg6 {
  background-color: #d5f692;
  border: solid 1px #d5f692;
}
.widget.diagramWidget.bg7 {
  background-color: #93d275;
  border: solid 1px #93d275;
}
.widget.diagramWidget.bg8 {
  background-color: #f5f6f8;
  border: solid 1px #f5f6f8;
}
.widget.diagramWidget.bg9 {
  background-color: #e5e6e8;
  border: solid 1px #e5e6e8;
}
.widget.diagramWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.diagramWidget.selected {
  border-color: #347B98;
  cursor: default;
}

.widgetShortModeEditor.diaryWidget {
  position: absolute;
  width: 84px;
  height: 50px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 3px;
}
.boardWidgetEditor.diaryWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 410px);
  width: 820px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.diaryWidget.full {
  width: 820px;
  height: calc(100vh - 104px);
  bottom: 56px;
  right: 8px;
  left: initial;
}
.boardWidgetEditor.diaryWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.diaryWidget .actionButton.fullScreen {
  background: transparent url(/3b2780abdd6ecf51ee78.svg) center / 70% no-repeat;
}
.boardWidgetEditor.diaryWidget .actionButton.normal {
  background: transparent url(/dab88d560986f584717f.svg) center / 70% no-repeat;
}
.boardWidgetEditor.diaryWidget .mainEditor {
  flex: 1;
  margin: 4px 8px 4px 4px;
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.boardWidgetEditor.diaryWidget .mainEditor .newItemEditor {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  width: 240px;
}
.boardWidgetEditor.diaryWidget .mainEditor .newItemEditor .textAreaWrapper {
  height: calc(100% - 40px);
}
.boardWidgetEditor.diaryWidget .mainEditor .newItemEditor .textAreaWrapper .snippets .snippet.startAction {
  background-image: url(/dd793f69be8234a92ece.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.boardWidgetEditor.diaryWidget .mainEditor .newItemEditor .textAreaWrapper .snippets .snippet.finishAction {
  background-image: url(/5cd5660aa51b3874c467.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.boardWidgetEditor.diaryWidget .mainEditor .newItemEditor .textAreaWrapper textarea {
  resize: none;
  width: 100%;
}
.boardWidgetEditor.diaryWidget .mainEditor .itemsReport {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.boardWidgetEditor.diaryWidget .mainEditor .itemsReport .textAreaWrapper {
  width: 100%;
  height: 144px;
}
.boardWidgetEditor.diaryWidget .mainEditor .itemsReport .textAreaWrapper textarea {
  resize: none;
  width: 100%;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 4px);
  overflow-y: auto;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .dateGroup {
  font-weight: bold;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .itemsList .diaryItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
  align-items: flex-start;
  cursor: default;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .itemsList .diaryItem .times {
  font-size: 10pt;
  color: #666;
  white-space: nowrap;
  min-width: 90px;
  font-family: "JenBrains Mono", "Arial", SansSerif, serif;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .itemsList .diaryItem .times .time {
  min-height: 22px;
  line-height: 22px;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .itemsList .diaryItem .text {
  flex: 1;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .itemsList .diaryItem .actionButton {
  opacity: 0;
}
.boardWidgetEditor.diaryWidget .mainEditor .groupedItemList .diaryItem:hover .actionButton {
  opacity: 1;
}

.widget.diaryWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px #000000;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.diaryWidget .diaryWidgetContent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.widget.diaryWidget .diaryWidgetContent .diaryContentViewer .actionButton {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 2px;
  opacity: 0.8;
}
.widget.diaryWidget .diaryWidgetContent .diaryContentViewer .actionButton:hover {
  background-color: transparent;
  opacity: 0.4;
}
.widget.diaryWidget .diaryWidgetContent .diaryInlineEditor {
  box-sizing: border-box;
  background-color: transparent;
  border: none;
  text-align: center;
  outline: none;
}
.widget.diaryWidget .diaryWidgetContent .densityView {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.widget.diaryWidget .diaryWidgetContent .densityView .densityViewItem {
  position: absolute;
  height: 100%;
  width: 1px;
  opacity: 0.2;
}
.widget.diaryWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.diaryWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.diaryWidget.selected {
  border-color: #347B98;
  cursor: default;
}

.widget.markdownWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.markdownWidget .markdownWidgetContent {
  width: calc(100%);
  max-height: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.widget.markdownWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.markdownWidget.verticalScroll .markdownWidgetContent {
  overflow-y: auto;
}
.widget.markdownWidget.bg1 {
  background-color: #FCCB1A;
  border: solid 1px #FCCB1A;
}
.widget.markdownWidget.bg2 {
  background-color: #ffffff;
  border: solid 1px #ffffff;
}
.widget.markdownWidget.bg3 {
  background-color: #a6ccf5;
  border: solid 1px #a6ccf5;
}
.widget.markdownWidget.bg4 {
  background-color: #fff9b1;
  border: solid 1px #fff9b1;
}
.widget.markdownWidget.bg5 {
  background-color: #ffcee0;
  border: solid 1px #ffcee0;
}
.widget.markdownWidget.bg6 {
  background-color: #d5f692;
  border: solid 1px #d5f692;
}
.widget.markdownWidget.bg7 {
  background-color: #93d275;
  border: solid 1px #93d275;
}
.widget.markdownWidget.bg8 {
  background-color: #f5f6f8;
  border: solid 1px #f5f6f8;
}
.widget.markdownWidget.bg9 {
  background-color: #e5e6e8;
  border: solid 1px #e5e6e8;
}
.widget.markdownWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.markdownWidget.selected {
  border-color: #347B98;
  cursor: default;
}

.widgetShortModeEditor.markdownWidget {
  position: absolute;
  width: 108px;
  height: 50px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 3px;
}
.boardWidgetEditor.markdownWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 400px);
  width: 800px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.markdownWidget .verticalScroll {
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: transparent url(/3923c9ab245ef8f9e52f.svg) center / 80% no-repeat;
  margin: 4px;
}
.boardWidgetEditor.markdownWidget .verticalScroll.active {
  background: transparent url(/5ba131363fea3a4b8630.svg) center / 80% no-repeat;
}
.boardWidgetEditor.markdownWidget .verticalScroll:hover {
  opacity: 0.4;
}
.boardWidgetEditor.markdownWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.markdownWidget .mainEditor {
  flex: 1;
  margin: 4px 8px 4px 4px;
}
.boardWidgetEditor.markdownWidget .mainEditor .textAreaWrapper {
  height: calc(100% - 8px);
}
.boardWidgetEditor.markdownWidget .mainEditor .textAreaWrapper textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}
.boardWidgetEditor.markdownWidget .editorTextProperties {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.widget.reactionWidget {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: solid 1px transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.reactionWidget .widgetComments {
  background-size: 13px;
  background-position-x: right;
}
.widget.reactionWidget.smile {
  background: transparent url(/45e509051750fa01dc45.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.sad {
  background: transparent url(/c15a3a22b9a581c500c1.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.checkbox {
  background: transparent url(/7aae790a47bab660f6b0.svg) center no-repeat;
  background-size: 100%;
}
.widget.reactionWidget.idea {
  background: transparent url(/b6576189440eed6d6ef2.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.important {
  background: transparent url(/264a1025c4b523049c1d.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.celebration {
  background: transparent url(/eca53a191a554755d107.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.scheduled {
  background: transparent url(/1e20ed05183ac9a2825a.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.dislike {
  background: transparent url(/ef97d08b016ae68e45e1.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.like {
  background: transparent url(/795c3026b7e7f3238bd5.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.question {
  background: transparent url(/54e11787ee04db4186db.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.unchecked {
  background: transparent url(/37b079e8a8fa0387c3a8.svg) center no-repeat;
  background-size: 70%;
}
.widget.reactionWidget.wait {
  background: transparent url(/f34152f0709996ad7a54.svg) center no-repeat;
  background-size: 70%;
}
.widget.reactionWidget.plus_one {
  background: transparent url(/5211ad8c1a8334e0563a.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.heart {
  background: transparent url(/62ba17179ec0715aa411.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.broken_heart {
  background: transparent url(/fc364415f0a5a2f1a74e.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.comment {
  background: transparent url(/627bb65357720dcd9a05.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.hmmm {
  background: transparent url(/01eb3f10bdc7ac3904ac.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.one {
  background: transparent url(/887304c202b116a209c2.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.two {
  background: transparent url(/13b0d69537e3281b6822.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.three {
  background: transparent url(/3a687a949458d607303a.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.four {
  background: transparent url(/ad4379dc430401865e2d.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.five {
  background: transparent url(/70ad68703750ec63add7.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.plus {
  background: transparent url(/58e049a7c6f211c2bf39.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget.minus {
  background: transparent url(/8d01e130783661c5dd70.svg) center no-repeat;
  background-size: 75%;
}
.widget.reactionWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.reactionWidget.selected {
  border-color: #347B98;
  cursor: default;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}

.boardWidgetEditor .reactionTypeChanger,
.widgetShortModeEditor .reactionTypeChanger {
  width: 160px;
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 16px;
}
.boardWidgetEditor .reactionTypeChanger .typeList,
.widgetShortModeEditor .reactionTypeChanger .typeList {
  display: none;
  position: absolute;
  z-index: 10;
  width: 400px;
  height: 112px;
  background: #fff;
  margin-top: -52px;
}
.boardWidgetEditor .reactionTypeChanger .typeList.visible,
.widgetShortModeEditor .reactionTypeChanger .typeList.visible {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.boardWidgetEditor .reactionTypeChanger .type,
.widgetShortModeEditor .reactionTypeChanger .type {
  width: 36px;
  height: 36px;
  margin: 8px 8px 8px 0;
  border: solid 2px #eeeeee;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}
.boardWidgetEditor .reactionTypeChanger .type.active,
.widgetShortModeEditor .reactionTypeChanger .type.active {
  border: solid 2px #999999;
}
.boardWidgetEditor .reactionTypeChanger .type.disabled,
.widgetShortModeEditor .reactionTypeChanger .type.disabled {
  opacity: 0.1;
  cursor: default;
}
.boardWidgetEditor .reactionTypeChanger .type.CHECKBOX,
.widgetShortModeEditor .reactionTypeChanger .type.CHECKBOX {
  background: #fff url(/7aae790a47bab660f6b0.svg) center no-repeat;
  background-size: 100%;
}
.boardWidgetEditor .reactionTypeChanger .type.SMILE,
.widgetShortModeEditor .reactionTypeChanger .type.SMILE {
  background: #fff url(/45e509051750fa01dc45.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.SAD,
.widgetShortModeEditor .reactionTypeChanger .type.SAD {
  background: #fff url(/c15a3a22b9a581c500c1.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.IDEA,
.widgetShortModeEditor .reactionTypeChanger .type.IDEA {
  background: #fff url(/b6576189440eed6d6ef2.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.IMPORTANT,
.widgetShortModeEditor .reactionTypeChanger .type.IMPORTANT {
  background: #fff url(/264a1025c4b523049c1d.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.CELEBRATION,
.widgetShortModeEditor .reactionTypeChanger .type.CELEBRATION {
  background: #fff url(/eca53a191a554755d107.svg) center no-repeat;
  background-size: 70%;
}
.boardWidgetEditor .reactionTypeChanger .type.SCHEDULED,
.widgetShortModeEditor .reactionTypeChanger .type.SCHEDULED {
  background: #fff url(/1e20ed05183ac9a2825a.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.DISLIKE,
.widgetShortModeEditor .reactionTypeChanger .type.DISLIKE {
  background: #fff url(/ef97d08b016ae68e45e1.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.LIKE,
.widgetShortModeEditor .reactionTypeChanger .type.LIKE {
  background: #fff url(/795c3026b7e7f3238bd5.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.QUESTION,
.widgetShortModeEditor .reactionTypeChanger .type.QUESTION {
  background: #fff url(/54e11787ee04db4186db.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.UNCHECKED,
.widgetShortModeEditor .reactionTypeChanger .type.UNCHECKED {
  background: #fff url(/37b079e8a8fa0387c3a8.svg) center no-repeat;
  background-size: 70%;
}
.boardWidgetEditor .reactionTypeChanger .type.WAIT,
.widgetShortModeEditor .reactionTypeChanger .type.WAIT {
  background: #fff url(/f34152f0709996ad7a54.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.PLUS_ONE,
.widgetShortModeEditor .reactionTypeChanger .type.PLUS_ONE {
  background: #fff url(/5211ad8c1a8334e0563a.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.HEART,
.widgetShortModeEditor .reactionTypeChanger .type.HEART {
  background: #fff url(/62ba17179ec0715aa411.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.BROKEN_HEART,
.widgetShortModeEditor .reactionTypeChanger .type.BROKEN_HEART {
  background: #fff url(/fc364415f0a5a2f1a74e.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.COMMENT,
.widgetShortModeEditor .reactionTypeChanger .type.COMMENT {
  background: #fff url(/627bb65357720dcd9a05.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.HMMM,
.widgetShortModeEditor .reactionTypeChanger .type.HMMM {
  background: #fff url(/01eb3f10bdc7ac3904ac.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.ONE,
.widgetShortModeEditor .reactionTypeChanger .type.ONE {
  background: #fff url(/887304c202b116a209c2.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.TWO,
.widgetShortModeEditor .reactionTypeChanger .type.TWO {
  background: #fff url(/13b0d69537e3281b6822.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.THREE,
.widgetShortModeEditor .reactionTypeChanger .type.THREE {
  background: #fff url(/3a687a949458d607303a.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.FOUR,
.widgetShortModeEditor .reactionTypeChanger .type.FOUR {
  background: #fff url(/ad4379dc430401865e2d.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.FIVE,
.widgetShortModeEditor .reactionTypeChanger .type.FIVE {
  background: #fff url(/70ad68703750ec63add7.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.PLUS,
.widgetShortModeEditor .reactionTypeChanger .type.PLUS {
  background: #fff url(/58e049a7c6f211c2bf39.svg) center no-repeat;
  background-size: 75%;
}
.boardWidgetEditor .reactionTypeChanger .type.MINUS,
.widgetShortModeEditor .reactionTypeChanger .type.MINUS {
  background: #fff url(/8d01e130783661c5dd70.svg) center no-repeat;
  background-size: 75%;
}
.widgetShortModeEditor .reactionTypeChanger {
  width: 48px;
  padding: 0 8px;
}
.widgetShortModeEditor .typeList.visible {
  background-color: #fff;
  width: 264px;
  height: 208px;
  margin-left: -8px;
  border-radius: 3px;
  padding-left: 4px;
}
.widgetShortModeEditor .typeList.visible.clearable {
  height: 242px;
}

.widgetShortModeEditor.reactionWidget {
  position: absolute;
  width: 248px;
  height: 52px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 3px;
  align-items: center;
}
.boardWidgetEditor.reactionWidget {
  position: fixed;
  bottom: 8px;
  left: calc(50% - 230px);
  width: 460px;
  height: 154px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 2px;
}
.boardWidgetEditor.reactionWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.reactionWidget .mainEditor {
  flex: 1;
  margin: 4px;
}
.boardWidgetEditor.reactionWidget .mainEditor textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}

.multiLineViewer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.multiLineViewer .line {
  min-height: 22px;
}

.fontStyleButton {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 4px;
  cursor: pointer;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.fontStyleButton.cursive {
  font-family: cursive;
}
.fontStyleButton.disabled {
  background-color: #eee;
  cursor: not-allowed;
}

.widget.stickyNote {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: #FCCB1A;
  border: solid 1px #FCCB1A;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.stickyNote .stickyNotesContent {
  width: calc(100%);
  max-height: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.widget.stickyNote .stickyNotesContent textarea {
  width: calc(100% - 0px);
  max-height: calc(100% - 0px);
  resize: none;
  background-color: transparent;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12pt;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Manrope", "Arial", SansSerif, serif;
  line-height: 22px;
}
.widget.stickyNote .stickyNotesContent textarea.cursive {
  font-family: "Manrope", cursive;
}
.widget.stickyNote .stickyNoteReaction {
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 1;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
}
.widget.stickyNote .stickyNoteReaction.SMILE {
  background-image: url(/45e509051750fa01dc45.svg);
}
.widget.stickyNote .stickyNoteReaction.CHECKBOX {
  background-image: url(/7aae790a47bab660f6b0.svg);
  background-size: 100%;
}
.widget.stickyNote .stickyNoteReaction.SAD {
  background-image: url(/c15a3a22b9a581c500c1.svg);
}
.widget.stickyNote .stickyNoteReaction.IDEA {
  background-image: url(/b6576189440eed6d6ef2.svg);
}
.widget.stickyNote .stickyNoteReaction.IMPORTANT {
  background-image: url(/264a1025c4b523049c1d.svg);
}
.widget.stickyNote .stickyNoteReaction.CELEBRATION {
  background-image: url(/eca53a191a554755d107.svg);
  background-size: 70%;
}
.widget.stickyNote .stickyNoteReaction.SCHEDULED {
  background-image: url(/1e20ed05183ac9a2825a.svg);
}
.widget.stickyNote .stickyNoteReaction.DISLIKE {
  background-image: url(/ef97d08b016ae68e45e1.svg);
}
.widget.stickyNote .stickyNoteReaction.LIKE {
  background-image: url(/795c3026b7e7f3238bd5.svg);
}
.widget.stickyNote .stickyNoteReaction.QUESTION {
  background-image: url(/54e11787ee04db4186db.svg);
}
.widget.stickyNote .stickyNoteReaction.UNCHECKED {
  background-image: url(/37b079e8a8fa0387c3a8.svg);
  background-size: 70%;
}
.widget.stickyNote .stickyNoteReaction.WAIT {
  background-image: url(/f34152f0709996ad7a54.svg);
}
.widget.stickyNote .stickyNoteReaction.PLUS_ONE {
  background-image: url(/5211ad8c1a8334e0563a.svg);
}
.widget.stickyNote .stickyNoteReaction.HEART {
  background-image: url(/62ba17179ec0715aa411.svg);
}
.widget.stickyNote .stickyNoteReaction.BROKEN_HEART {
  background-image: url(/fc364415f0a5a2f1a74e.svg);
}
.widget.stickyNote .stickyNoteReaction.COMMENT {
  background-image: url(/627bb65357720dcd9a05.svg);
}
.widget.stickyNote .stickyNoteReaction.HMMM {
  background-image: url(/01eb3f10bdc7ac3904ac.svg);
}
.widget.stickyNote .stickyNoteReaction.ONE {
  background-image: url(/887304c202b116a209c2.svg);
}
.widget.stickyNote .stickyNoteReaction.TWO {
  background-image: url(/13b0d69537e3281b6822.svg);
}
.widget.stickyNote .stickyNoteReaction.THREE {
  background-image: url(/3a687a949458d607303a.svg);
}
.widget.stickyNote .stickyNoteReaction.FOUR {
  background-image: url(/ad4379dc430401865e2d.svg);
}
.widget.stickyNote .stickyNoteReaction.FIVE {
  background-image: url(/70ad68703750ec63add7.svg);
}
.widget.stickyNote .stickyNoteReaction.PLUS {
  background-image: url(/58e049a7c6f211c2bf39.svg);
}
.widget.stickyNote .stickyNoteReaction.MINUS {
  background-image: url(/8d01e130783661c5dd70.svg);
}
.widget.stickyNote .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.stickyNote.bg2 {
  background-color: #ffffff;
  border: solid 1px #ffffff;
}
.widget.stickyNote.bg3 {
  background-color: #a6ccf5;
  border: solid 1px #a6ccf5;
}
.widget.stickyNote.bg4 {
  background-color: #fff9b1;
  border: solid 1px #fff9b1;
}
.widget.stickyNote.bg5 {
  background-color: #ffcee0;
  border: solid 1px #ffcee0;
}
.widget.stickyNote.bg6 {
  background-color: #d5f692;
  border: solid 1px #d5f692;
}
.widget.stickyNote.bg7 {
  background-color: #93d275;
  border: solid 1px #93d275;
}
.widget.stickyNote.bg8 {
  background-color: #f5f6f8;
  border: solid 1px #f5f6f8;
}
.widget.stickyNote.bg9 {
  background-color: #e5e6e8;
  border: solid 1px #e5e6e8;
}
.widget.stickyNote.cursive {
  font-family: cursive;
}
.widget.stickyNote:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.stickyNote.selected {
  border-color: #347B98 !important;
  cursor: default;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.stickyNote.light {
  color: #ffffff;
}
.widget.stickyNote.light textarea {
  color: #ffffff;
}
.widget.moving {
  z-index: 1;
}
.widget.selected.moving {
  cursor: move !important;
}

.widget.textWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.textWidget .textWidgetContent {
  width: calc(100%);
  max-height: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.widget.textWidget .textWidgetContent textarea {
  width: calc(100% - 0px);
  max-height: calc(100% - 0px);
  resize: none;
  background-color: transparent;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12pt;
  padding: 0;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  font-family: "Manrope", "Arial", SansSerif, serif;
  line-height: 22px;
}
.widget.textWidget .textWidgetContent textarea.widgetTextStyleBold {
  font-weight: bold;
}
.widget.textWidget .textWidgetContent textarea.widgetTextStyleItalic {
  font-style: italic;
}
.widget.textWidget .textWidgetContent textarea.widgetTextStyleUnderline {
  text-decoration: underline;
}
.widget.textWidget .textWidgetContent textarea.widgetTextStyleLineThrough {
  text-decoration: line-through;
}
.widget.textWidget .textWidgetContent textarea.widgetTextSize10 {
  font-size: 10pt;
}
.widget.textWidget .textWidgetContent textarea.widgetTextSize12 {
  font-size: 12pt;
}
.widget.textWidget .textWidgetContent textarea.widgetTextSize14 {
  font-size: 14pt;
}
.widget.textWidget .textWidgetContent textarea.widgetTextSize16 {
  font-size: 16pt;
}
.widget.textWidget .textWidgetContent textarea.cursive {
  font-family: cursive;
}
.widget.textWidget .textWidgetContent textarea.textAlignLEFT {
  text-align: left;
}
.widget.textWidget .textWidgetContent textarea.textAlignRIGHT {
  text-align: right;
}
.widget.textWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.textWidget.bg1 {
  background-color: #FCCB1A;
  border: solid 1px #FCCB1A;
}
.widget.textWidget.bg2 {
  background-color: #ffffff;
  border: solid 1px #ffffff;
}
.widget.textWidget.bg3 {
  background-color: #a6ccf5;
  border: solid 1px #a6ccf5;
}
.widget.textWidget.bg4 {
  background-color: #fff9b1;
  border: solid 1px #fff9b1;
}
.widget.textWidget.bg5 {
  background-color: #ffcee0;
  border: solid 1px #ffcee0;
}
.widget.textWidget.bg6 {
  background-color: #d5f692;
  border: solid 1px #d5f692;
}
.widget.textWidget.bg7 {
  background-color: #93d275;
  border: solid 1px #93d275;
}
.widget.textWidget.bg8 {
  background-color: #f5f6f8;
  border: solid 1px #f5f6f8;
}
.widget.textWidget.bg9 {
  background-color: #e5e6e8;
  border: solid 1px #e5e6e8;
}
.widget.textWidget.textAlignLEFT {
  justify-content: left;
  text-align: left;
}
.widget.textWidget.textAlignLEFT .textWidgetContent {
  text-align: left;
}
.widget.textWidget.textAlignRIGHT {
  justify-content: right;
  text-align: right;
}
.widget.textWidget.textAlignRIGHT .textWidgetContent {
  text-align: right;
}
.widget.textWidget.widgetTextStyleBold {
  font-weight: bold;
}
.widget.textWidget.widgetTextStyleItalic {
  font-style: italic;
}
.widget.textWidget.widgetTextStyleUnderline {
  text-decoration: underline;
}
.widget.textWidget.widgetTextStyleLineThrough {
  text-decoration: line-through;
}
.widget.textWidget.widgetTextSize10 {
  font-size: 10pt;
}
.widget.textWidget.widgetTextSize12 {
  font-size: 12pt;
}
.widget.textWidget.widgetTextSize14 {
  font-size: 14pt;
}
.widget.textWidget.widgetTextSize16 {
  font-size: 16pt;
}
.widget.textWidget.cursive {
  font-family: cursive;
}
.widget.textWidget.widgetTextSize16 {
  font-size: 16pt;
}
.widget.textWidget.verticalTextAlignTOP {
  align-items: flex-start;
}
.widget.textWidget.verticalTextAlignBOTTOM {
  align-items: flex-end;
}
.widget.textWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.textWidget.selected {
  border-color: #347B98 !important;
  cursor: default;
}
.widget.textWidget.light {
  color: #ffffff;
}
.widget.textWidget.light textarea {
  color: #ffffff;
}

.widget.shapeWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px #666;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.shapeWidget .databaseContainer,
.widget.shapeWidget .processContainer,
.widget.shapeWidget .queueContainer {
  z-index: -10;
}
.widget.shapeWidget .shapeWidgetContent {
  width: calc(100%);
  max-height: calc(100%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.widget.shapeWidget .shapeWidgetContent textarea {
  width: calc(100% - 0px);
  max-height: calc(100% - 0px);
  resize: none;
  background-color: transparent;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12pt;
  padding: 0;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  font-family: "Manrope", "Arial", SansSerif, serif;
  line-height: 22px;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextStyleBold {
  font-weight: bold;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextStyleItalic {
  font-style: italic;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextStyleUnderline {
  text-decoration: underline;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextStyleLineThrough {
  text-decoration: line-through;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextSize10 {
  font-size: 10pt;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextSize12 {
  font-size: 12pt;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextSize14 {
  font-size: 14pt;
}
.widget.shapeWidget .shapeWidgetContent textarea.widgetTextSize16 {
  font-size: 16pt;
}
.widget.shapeWidget .shapeWidgetContent textarea.textAlignLEFT {
  text-align: left;
}
.widget.shapeWidget .shapeWidgetContent textarea.textAlignRIGHT {
  text-align: right;
}
.widget.shapeWidget .shapeWidgetContent.upRelativeShape {
  position: relative;
  z-index: -10;
}
.widget.shapeWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.shapeWidget.bg1 {
  background-color: #FCCB1A;
}
.widget.shapeWidget.bg2 {
  background-color: #ffffff;
}
.widget.shapeWidget.bg3 {
  background-color: #a6ccf5;
}
.widget.shapeWidget.bg4 {
  background-color: #fff9b1;
}
.widget.shapeWidget.bg5 {
  background-color: #ffcee0;
}
.widget.shapeWidget.bg6 {
  background-color: #d5f692;
}
.widget.shapeWidget.bg7 {
  background-color: #93d275;
}
.widget.shapeWidget.bg8 {
  background-color: #f5f6f8;
}
.widget.shapeWidget.bg9 {
  background-color: #e5e6e8;
}
.widget.shapeWidget.borderbg0 {
  border-color: transparent;
}
.widget.shapeWidget.borderbg1 {
  border-color: #FCCB1A;
}
.widget.shapeWidget.borderbg2 {
  border-color: #ffffff;
}
.widget.shapeWidget.borderbg3 {
  border-color: #a6ccf5;
}
.widget.shapeWidget.borderbg4 {
  border-color: #fff9b1;
}
.widget.shapeWidget.borderbg5 {
  border-color: #ffcee0;
}
.widget.shapeWidget.borderbg6 {
  border-color: #d5f692;
}
.widget.shapeWidget.borderbg7 {
  border-color: #93d275;
}
.widget.shapeWidget.borderbg8 {
  border-color: #f5f6f8;
}
.widget.shapeWidget.borderbg9 {
  border-color: #e5e6e8;
}
.widget.shapeWidget.borderbg10 {
  border-color: #333333;
}
.widget.shapeWidget.shapeROUNDED_RECTANGLE {
  border-radius: 5%;
}
.widget.shapeWidget.shapeOVAL {
  border-radius: 50%;
}
.widget.shapeWidget.shapeDATABASE {
  border-color: transparent;
}
.widget.shapeWidget.shapeQUEUE {
  border-color: transparent;
}
.widget.shapeWidget.shapePROCESS {
  border-color: transparent;
}
.widget.shapeWidget.dotted {
  border-style: dotted;
}
.widget.shapeWidget.dashed {
  border-style: dashed;
}
.widget.shapeWidget.textAlignLEFT {
  justify-content: left;
  text-align: left;
}
.widget.shapeWidget.textAlignLEFT .shapeWidgetContent {
  text-align: left;
}
.widget.shapeWidget.textAlignRIGHT {
  justify-content: right;
  text-align: right;
}
.widget.shapeWidget.textAlignRIGHT .shapeWidgetContent {
  text-align: right;
}
.widget.shapeWidget.widgetTextStyleBold {
  font-weight: bold;
}
.widget.shapeWidget.widgetTextStyleItalic {
  font-style: italic;
}
.widget.shapeWidget.widgetTextStyleUnderline {
  text-decoration: underline;
}
.widget.shapeWidget.widgetTextStyleLineThrough {
  text-decoration: line-through;
}
.widget.shapeWidget.widgetTextSize10 {
  font-size: 10pt;
}
.widget.shapeWidget.widgetTextSize12 {
  font-size: 12pt;
}
.widget.shapeWidget.widgetTextSize14 {
  font-size: 14pt;
}
.widget.shapeWidget.widgetTextSize16 {
  font-size: 16pt;
}
.widget.shapeWidget.verticalTextAlignTOP {
  align-items: flex-start;
}
.widget.shapeWidget.verticalTextAlignBOTTOM {
  align-items: flex-end;
}
.widget.shapeWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.shapeWidget.selected {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  cursor: default;
}
.widget.shapeWidget.light {
  color: #ffffff;
}
.widget.shapeWidget.light textarea {
  color: #ffffff;
}

.widget.shadowWidget {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 4px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.stickyNote.selected {
  border-color: #347B98 !important;
  cursor: default;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}

.widgetShortModeEditor.shadowWidget {
  position: absolute;
  min-width: 96px;
  height: 48px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
  column-gap: 4px;
}
.boardWidgetEditor {
  position: fixed;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.shadowWidget {
  bottom: 4px;
  left: calc(50% - 50px);
  width: 100px;
  height: 82px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.textPropertiesChanger {
  min-width: 146px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 4px 0;
}
.textPropertiesChanger .aligns,
.textPropertiesChanger .verticalAligns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  height: 36px;
  border-radius: 0 0 3px 3px;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  margin-top: 8px;
}
.textPropertiesChanger .align,
.textPropertiesChanger .verticalAlign {
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 3px;
}
.textPropertiesChanger .align.LEFT {
  background: transparent url(/ee200269aa85863e3095.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .align.CENTER {
  background: transparent url(/99c21e5f62baec6a3d8a.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .align.RIGHT {
  background: transparent url(/098c256897df4c0e67ae.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .align.active {
  background-color: #eee;
  cursor: default;
}
.textPropertiesChanger .align.disabled {
  opacity: 0.1;
  cursor: default;
}
.textPropertiesChanger .verticalAlign.TOP {
  background: transparent url(/45eac10d2f2ea60b7ac0.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .verticalAlign.CENTER {
  background: transparent url(/99eabd9b0c918b001ee4.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .verticalAlign.BOTTOM {
  background: transparent url(/860269e5cca77e1327c9.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .verticalAlign.active {
  background-color: #eee;
  cursor: default;
}
.textPropertiesChanger .verticalAlign.disabled {
  opacity: 0.1;
  cursor: default;
}
.textPropertiesChanger .widgetTextStyles {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  height: 36px;
  border-radius: 0 0 3px 3px;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  margin-top: 8px;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.bold {
  background: transparent url(/f21709cbe341d9ab361d.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.italic {
  background: transparent url(/5479176e3b72a3c5c42c.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.underline {
  background: transparent url(/81556c437df7e3aaf886.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.lineThrough {
  background: transparent url(/d145f4ecb78c11a2b64d.svg) center no-repeat;
  background-size: 75%;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.active {
  background-color: #eee;
  cursor: default;
}
.textPropertiesChanger .widgetTextStyles .widgetStyle.disabled {
  opacity: 0.1;
  cursor: default;
}
.textPropertiesChanger .widgetStyle {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  cursor: pointer;
}
.textPropertiesChanger .widgetTextSizes {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  height: 36px;
  border-radius: 0 0 3px 3px;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  margin-top: 8px;
}
.textPropertiesChanger .widgetTextSizes .textSize.active {
  background-color: #eee;
  cursor: default;
}
.textPropertiesChanger .widgetTextSizes .textSize.disabled {
  opacity: 0.1;
  cursor: default;
}
.textPropertiesChanger .textSize {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}
.textPropertiesChanger .textSize.size10 {
  font-size: 10pt;
}
.textPropertiesChanger .textSize.size12 {
  font-size: 12pt;
}
.textPropertiesChanger .textSize.size16 {
  font-size: 16pt;
}
.textPropertiesChanger .currentTextProperties {
  display: flex;
}
.textPropertiesChanger .currentTextProperties .widgetStyle.chooser {
  background: transparent url(/f21709cbe341d9ab361d.svg) center no-repeat;
  background-size: 75%;
}

.chooseLineStyleChooser {
  width: 32px;
  height: 32px;
  margin: 4px;
}
.chooseLineStyleChooser .chosen.lineStyle {
  width: calc(100%);
  height: calc(100%);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
}
.chooseLineStyleChooser .chosen.lineStyle div {
  border-top: solid 2px #666;
  margin-top: calc(50% - 2px);
  height: 16px;
  width: 32px;
}
.chooseLineStyleChooser .chosen.lineStyle:hover {
  opacity: 0.5;
}
.chooseLineStyleChooser .chosen.lineStyle.dotted div {
  border-top-style: dotted;
}
.chooseLineStyleChooser .chosen.lineStyle.dashed div {
  border-top-style: dashed;
}
.chooseLineStyleChooser .chosen.lineStyle.disabled {
  cursor: default;
}
.chooseLineStyleChooser .lineStyleList {
  display: none;
  position: absolute;
  width: 108px;
  height: 36px;
  background-color: #fff;
  padding: 4px;
  border-radius: 3px;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.2);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.2);
}
.chooseLineStyleChooser .lineStyleList .shapeLineStyle {
  width: 32px;
  height: 32px;
  margin: 2px;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
}
.chooseLineStyleChooser .lineStyleList .shapeLineStyle div {
  width: 32px;
  margin-top: calc(50% - 2px);
  height: 16px;
  border-top: solid 2px #666;
}
.chooseLineStyleChooser .lineStyleList .shapeLineStyle:hover {
  opacity: 0.5;
}
.chooseLineStyleChooser .lineStyleList .shapeLineStyle.dotted div {
  border-top-style: dotted;
}
.chooseLineStyleChooser .lineStyleList .shapeLineStyle.dashed div {
  border-top-style: dashed;
}
.chooseLineStyleChooser .lineStyleList.open {
  display: flex;
}

.widthChanger .propertyWidth {
  width: 40px;
  height: 26px;
  border: solid 1px #eee;
  cursor: pointer;
  margin: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.widthChanger .propertyWidth:hover {
  opacity: 0.5;
}
.widthChanger .propertyWidth.active {
  background: #e0e0e0;
  cursor: default;
}
.widthChanger .list.short {
  background: #ffffff;
  padding: 0 0 4px 0;
}
.widthChanger .list.short .propertyWidth {
  height: 32px;
}
.widthChanger .currentPropertyWidth {
  width: 40px;
  height: 32px;
  border: solid 1px #eee;
  cursor: pointer;
  margin: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.widthChanger.disabled .propertyWidth {
  cursor: not-allowed;
}
.widthChanger.disabled .propertyWidth:hover {
  opacity: 1;
}

.shapeTypeChooser {
  display: flex;
  flex-direction: column;
  border-right: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.shapeTypeChooser .list.short {
  background-color: #ffffff;
}
.shapeTypeChooser .list:not(.short) {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 90px;
  height: 150px;
}
.shapeTypeChooser .singleShape {
  width: 36px;
  height: 36px;
  border: solid 1px #eee;
  margin: 4px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}
.shapeTypeChooser .singleShape .shapeForm {
  margin: 4px;
  border: solid 2px #333;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}
.shapeTypeChooser .singleShape .shapeForm.ROUNDED_RECTANGLE {
  border-radius: 4px;
}
.shapeTypeChooser .singleShape .shapeForm.OVAL {
  border-radius: 50%;
}
.shapeTypeChooser .singleShape .shapeForm.DATABASE {
  border-color: transparent;
  background: transparent url(/3f11afd34b2c48275b3d.svg) center no-repeat;
  background-size: 130%;
}
.shapeTypeChooser .singleShape .shapeForm.QUEUE {
  border-color: transparent;
  background: transparent url(/c059296424ee49bb2ae4.svg) center no-repeat;
  background-size: 115%;
}
.shapeTypeChooser .singleShape .shapeForm.PROCESS {
  border-color: transparent;
  background: transparent url(/caf6e28a49112458b771.svg) center no-repeat;
  background-size: 115%;
}
.shapeTypeChooser .singleShape.active {
  border: solid 2px #bbb;
  cursor: default;
}
.shapeTypeChooser .singleShape.disabled {
  cursor: default;
  opacity: 0.5;
}
.shapeTypeChooser .singleShape:not(.active):not(.disabled):hover {
  background: #f2f2f2;
}
.currentTypeViewer {
  width: 36px;
  height: 36px;
  border: solid 1px #eee;
  margin: 4px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}
.currentTypeViewer .shapeForm {
  margin: 4px;
  border: solid 2px #333;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}
.currentTypeViewer .shapeForm.ROUNDED_RECTANGLE {
  border-radius: 4px;
}
.currentTypeViewer .shapeForm.OVAL {
  border-radius: 50%;
}
.currentTypeViewer .shapeForm.DATABASE {
  border-color: transparent;
  background: transparent url(/3f11afd34b2c48275b3d.svg) center no-repeat;
  background-size: 130%;
}
.currentTypeViewer .shapeForm.QUEUE {
  border-color: transparent;
  background: transparent url(/c059296424ee49bb2ae4.svg) center no-repeat;
  background-size: 115%;
}
.currentTypeViewer .shapeForm.PROCESS {
  border-color: transparent;
  background: transparent url(/caf6e28a49112458b771.svg) center no-repeat;
  background-size: 115%;
}
.currentTypeViewer.disabled {
  cursor: default;
  opacity: 0.5;
}

.widgetShortModeEditor.shapeWidget {
  position: absolute;
  width: 474px;
  height: 48px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
}
.widgetShortModeEditor.shapeWidget .editorTextProperties {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-height: 40px;
}
.widgetShortModeEditor.shapeWidget .editorTextProperties .widgetTextStyles {
  margin-top: 10px;
  height: 33px;
}
.boardWidgetEditor.shapeWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 400px);
  width: 810px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.shapeWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.shapeWidget .mainEditor {
  flex: 1;
  margin: 4px;
}
.boardWidgetEditor.shapeWidget .mainEditor .textAreaWrapper {
  height: calc(100% - 8px);
}
.boardWidgetEditor.shapeWidget .mainEditor .textAreaWrapper textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}

.widgetShortModeEditor.stickyNote {
  position: absolute;
  width: 220px;
  height: 52px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
}
.boardWidgetEditor {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 220px);
  width: 440px;
  height: 152px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.stickyNote {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  left: calc(50% - 340px);
  width: 740px;
}
.boardWidgetEditor.stickyNote .reactionTypeChanger {
  width: 228px;
}
.boardWidgetEditor.stickyNote .mainEditor {
  flex: 1;
  margin: 4px;
}
.boardWidgetEditor.stickyNote .mainEditor .textAreaWrapper {
  height: calc(100% - 8px);
}
.boardWidgetEditor.stickyNote .mainEditor .textAreaWrapper textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}

.widgetShortModeEditor.tableWidget {
  position: absolute;
  width: 108px;
  height: 50px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-radius: 3px;
}
.boardWidgetEditor.tableWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 410px);
  width: 820px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.tableWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.tableWidget .mainEditor {
  flex: 1;
  margin: 4px 8px 4px 4px;
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.boardWidgetEditor.tableWidget .mainEditor .newItemEditor {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  width: 240px;
}
.boardWidgetEditor.tableWidget .mainEditor .newItemEditor .textAreaWrapper {
  height: calc(100% - 40px);
}
.boardWidgetEditor.tableWidget .mainEditor .newItemEditor .textAreaWrapper textarea {
  resize: none;
  width: 100%;
}
.boardWidgetEditor.tableWidget .sumViewEditor {
  margin: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: transparent url(/3923c9ab245ef8f9e52f.svg) center / 75% no-repeat;
}
.boardWidgetEditor.tableWidget .sumViewEditor.active {
  background-image: url(/5ba131363fea3a4b8630.svg);
}
.boardWidgetEditor.tableWidget .sumViewEditor:hover {
  opacity: 0.5;
}
.boardWidgetEditor.tableWidget .sumViewEditor.readOnly {
  opacity: 0.5;
  cursor: not-allowed;
}
.boardWidgetEditor.tableWidget .tableStructureEditor {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding: 4px;
  align-items: center;
}
.boardWidgetEditor.tableWidget .tableStructureEditor .buttonWrapper {
  width: 160px;
}

.widget.tableWidget {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: solid 1px #000000;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.widget.tableWidget .tableWidgetContent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.widget.tableWidget .dataLinksViewer {
  position: absolute;
  right: 0;
  top: 0;
}
.widget.tableWidget:hover:not(.selected) {
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.widget.tableWidget.selected {
  border-color: #347B98;
  cursor: default;
}

.widgetShortModeEditor.textWidget {
  position: absolute;
  width: 336px;
  height: 40px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
}
.widgetShortModeEditor.textWidget .editorTextProperties {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-height: 40px;
}
.boardWidgetEditor.textWidget {
  position: fixed;
  bottom: 4px;
  left: calc(50% - 380px);
  width: 760px;
  height: 182px;
  box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.boardWidgetEditor.textWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardWidgetEditor.textWidget .mainEditor {
  flex: 1;
  margin: 4px;
}
.boardWidgetEditor.textWidget .mainEditor .textAreaWrapper {
  height: calc(100% - 8px);
}
.boardWidgetEditor.textWidget .mainEditor .textAreaWrapper textarea {
  resize: none;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
}
.boardWidgetEditor.textWidget .editorTextProperties {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.alignSelection .actionButton.alignTopAction {
  background: transparent url(/c26d7603d8f4ef874812.svg) center no-repeat;
  background-size: 70%;
}
.alignSelection .actionButton.alignMiddleAction {
  background: transparent url(/c94a85962918af1534be.svg) center no-repeat;
  background-size: 70%;
}
.alignSelection .actionButton.alignBottomAction {
  background: transparent url(/b014c9bc544d9867fccd.svg) center no-repeat;
  background-size: 70%;
}
.alignSelection .actionButton.alignLeftAction {
  background: transparent url(/bf57103244e148da74ba.svg) center no-repeat;
  background-size: 70%;
}
.alignSelection .actionButton.alignCenterAction {
  background: transparent url(/99c21e5f62baec6a3d8a.svg) center no-repeat;
  background-size: 70%;
}
.alignSelection .actionButton.alignRightAction {
  background: transparent url(/d6de6a43cf397627058d.svg) center no-repeat;
  background-size: 70%;
}

.alignWidgetDialog {
  position: fixed;
  z-index: 200;
  bottom: 16px;
  background: #ffffff;
  border: solid 1px #eee;
  border-radius: 3px;
  left: calc(50% - 360px);
}
.alignWidgetDialog .popupMenuList {
  bottom: 8px;
  margin-top: -32px;
  margin-left: 32px;
}
.alignWidgetDialog .selectionInformation {
  width: 720px;
  height: 144px;
  display: flex;
  flex-direction: row;
}
.alignWidgetDialog .selectionInformation .selectedCount {
  text-align: center;
  flex: 0.5;
  height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.alignWidgetDialog .selectionInformation .customAlignment {
  padding: 4px 8px;
  flex: 0.9;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.alignWidgetDialog .selectionInformation .customAlignment .alignButton {
  margin: 2px 0;
  cursor: pointer;
  padding: 4px 0;
  width: calc(100% - 8px);
  text-align: center;
}
.alignWidgetDialog .selectionInformation .customAlignment .alignButton:hover {
  background: #f2f2f2;
}
.alignWidgetDialog .selectionInformation .multiEditor {
  margin: 8px 12px 4px 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.alignWidgetDialog .selectionInformation .multiEditor .colorPresetList {
  max-width: 180px;
}
.alignWidgetDialog .selectionInformation .multiEditor .colorPresetList.allowTransparent {
  max-width: 210px;
}
.alignWidgetDialog .selectionInformation .alignSelection {
  width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 4px 8px;
}
.alignWidgetDialog .selectionInformation .alignSelection .horizontalChange {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.alignWidgetDialog .selectionInformation .alignSelection .verticalChange {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.alignWidgetDialog .selectionInformation .alignSelection button {
  cursor: pointer;
  flex: 0.5;
  margin: 2px 6px;
  min-width: 60px;
}
.alignWidgetDialog .selectionInformation .alignSelection div.space {
  min-width: 60px;
}
.alignWidgetDialog .selectionInformation .actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 120px;
  column-gap: 4px;
}

.widgetPopupMenu {
  position: absolute;
  background: #fff;
  min-width: 200px;
  border: solid 1px #eee;
  border-radius: 3px;
}
.widgetPopupMenu .popupMenuList {
  margin-top: 0;
  border: none;
  position: relative;
}
.widgetPopupMenu .popupMenuList .actionButton:hover {
  background-color: transparent;
}

.boardCommentsView {
  min-height: 360px;
  max-height: 42%;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
}
.boardCommentsView .title {
  margin: 4px 0;
  font-size: 1.2em;
  text-align: center;
}
.boardCommentsView .actionButton.closeAction {
  position: absolute;
  top: 0;
  right: 0;
}
.boardCommentsView .newCommentArea {
  height: 88px;
  padding-top: 4px;
}
.boardCommentsView .newCommentArea .newCommentView {
  position: relative;
  bottom: 8px;
  padding: 0 8px;
  width: calc(100% - 16px);
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.boardCommentsView .newCommentArea .newCommentView .textAreaWrapper {
  flex: 1;
  display: flex;
}
.boardCommentsView .newCommentArea .newCommentView .textAreaWrapper textarea {
  flex: 1;
  resize: none;
  min-height: 64px;
}
.boardCommentsView .newCommentArea .newCommentView .actionButton {
  margin-right: 2px;
}
.boardCommentsView .boardCommentsList {
  flex: 1;
  max-height: calc(100% - 64px);
  overflow-y: auto;
  padding: 4px 4px 8px 4px;
}
.boardCommentsView .boardCommentsList .boardCommentView {
  margin: 4px;
  border: solid 1px transparent;
  border-radius: 3px;
  padding: 4px;
  cursor: pointer;
}
.boardCommentsView .boardCommentsList .boardCommentView .authorAndMenu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: calc(100% - 2px);
}
.boardCommentsView .boardCommentsList .boardCommentView .authorAndMenu .commentAuthorAndTime {
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
}
.boardCommentsView .boardCommentsList .boardCommentView .authorAndMenu .commentAuthorAndTime .author {
  font-weight: bold;
  margin-right: 8px;
}
.boardCommentsView .boardCommentsList .boardCommentView .authorAndMenu .actions {
  display: flex;
  flex-direction: row;
}
.boardCommentsView .boardCommentsList .boardCommentView .authorAndMenu .popupMenuList {
  right: 4px;
}
.boardCommentsView .boardCommentsList .boardCommentView .commentText {
  font-size: 0.9em;
  padding: 8px 0 4px 0;
}
.boardCommentsView .boardCommentsList .boardCommentView .commentEditor {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardCommentsView .boardCommentsList .boardCommentView .commentEditor .textAreaWrapper {
  flex: 1;
  display: flex;
}
.boardCommentsView .boardCommentsList .boardCommentView .commentEditor .textAreaWrapper textarea {
  flex: 1;
  resize: none;
  min-height: 76px;
  padding: 8px 4px 12px 4px;
  box-sizing: border-box;
}
.boardCommentsView .boardCommentsList .boardCommentView .commentEditor .actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.boardCommentsView .boardCommentsList .boardCommentView:hover {
  border: solid 1px #347B98;
}
.boardCommentsView .boardCommentsList .boardCommentView.selected {
  border: solid 1px #347B98;
  cursor: default;
}

.dataLinksPopupWindow.secondView {
  top: 300px;
}

.linkSideChanger {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 72px;
}
.linkSideChanger .toLeftActions,
.linkSideChanger .toRightActions {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.linkSideChanger .toTopBottomActions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.linkSideChanger.shortMode {
  min-width: 40px;
}
.linkSideChanger.shortMode .sideChangerList {
  position: absolute;
  display: none;
  flex-direction: row;
  margin-top: 32px;
  background: #fff;
  z-index: 10;
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 0 0 3px 3px;
}
.linkSideChanger.shortMode .sideChangerList.open {
  display: flex;
}

.arrowChanger {
  display: flex;
  flex-direction: column;
}
.arrowChanger.shortMode .arrowChangerList {
  position: absolute;
  display: none;
  flex-direction: row;
  margin-top: 32px;
  background: #fff;
  z-index: 10;
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 0 0 3px 3px;
}
.arrowChanger.shortMode .arrowChangerList.open {
  display: flex;
}

.posChanger {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.posChanger input {
  flex: 1;
  margin: 0 4px;
  height: 36px;
}
.posChanger button {
  margin-left: 4px;
}

.widgetLinkEditor {
  position: fixed;
  z-index: 200;
  bottom: 16px;
  background: #ffffff;
  border: solid 1px #eee;
  border-radius: 3px;
  left: calc(50% - 340px);
  width: 680px;
  height: 136px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.widgetLinkEditor .smallSpacer {
  width: 24px;
}
.widgetLinkEditor .restSpacer {
  flex: 1;
}
.widgetLinkEditor textarea {
  resize: none;
  height: 120px;
  margin: 4px;
}
.widgetLinkEditor .sidePosArea {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.widgetLinkEditor .sidePosArea .sideArea {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1;
}
.widgetLinkEditor .sidePosArea .posArea {
  height: 40px;
  margin-top: 8px;
}
.widgetLinkEditor.shortMode {
  width: 220px;
  height: 32px;
}

.canvasConnections .arrowLine.dashed {
  stroke-dasharray: 10 10 10;
}
.canvasConnections .arrowLine.dotted {
  stroke-dasharray: 1 10;
}
.canvasConnectionTitles .widgetLinkTitle {
  position: absolute;
  pointer-events: none;
  text-align: center;
  overflow-x: visible;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.canvasConnectionTitles .widgetLinkTitle .widgetLinkTitleItSelf {
  background: #f4f4f4;
  padding: 0 8px;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 10;
}

.canvasContent {
  width: calc(100%);
  height: calc(100%);
  /*overflow: auto;*/
  position: fixed;
  background-color: #f2f2f2;
}
.canvasContent .boardCanvas {
  width: 30000px;
  height: 10000px;
  background-color: #f2f2f2;
  transform-origin: left top;
  outline: none;
}
.canvasContent .boardCanvas .selectingArea {
  position: absolute;
  z-index: 10;
  border: dashed 1px #bbb;
  box-sizing: border-box;
}
.canvasContent .boardCanvas.squares {
  background-image: repeating-linear-gradient(#e0e0e0 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, #e0e0e0 0 1px, transparent 1px 100%);
  background-size: 16px 16px;
}
.canvasContent .boardCanvas.dots {
  --dot-bg: #f2f2f2;
  --dot-color: #e0e0e0;
  --dot-size: 1px;
  --dot-space: 16px;
  background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1px) left top / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 0px) left top / var(--dot-space) var(--dot-space), var(--dot-color);
}
.canvasContent .canvasConnections {
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.canvasContent .canvasInteractionPlace {
  position: fixed;
  top: 42px;
  right: 8px;
  min-width: 360px;
  width: 25%;
  max-width: 540px;
  max-height: 81%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.canvasContent .canvasInteractionPlace .dataLinksPopupWindow {
  position: static;
  margin-top: 8px;
}
.canvasContent .questionDialog {
  top: 64px;
}

.pluginsToolbar {
  position: fixed;
  left: 8px;
  top: 44px;
  width: 32px;
  background-color: #FFFFFF;
  border-radius: 3px;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.pluginsToolbar .actionButton.selectAction {
  background: transparent url(/2cba7152ea05691826f2.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.stickyNoteAction {
  background: transparent url(/e5a9b37bf46934832c90.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.textWidgetAction {
  background: transparent url(/d78294fbbb4be91f1cbd.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.shapeWidgetAction {
  background: transparent url(/4d8ac1175816d00e1af9.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.reactionWidgetAction {
  background: transparent url(/88d21374a571c904b83d.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.markdownWidgetAction {
  background: transparent url(/1e9cc3c1e2c2d55409e9.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.diagramWidgetAction {
  background: transparent url(/845e41235cd0bdbd7e5f.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.diaryWidgetAction {
  background: transparent url(/d8a7369ca64193b75c80.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.tableWidgetAction {
  background: transparent url(/6711a6663957733fad23.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton.templatesWidgetAction {
  background: transparent url(/1d0a06db5594eaa921ac.svg) center no-repeat;
  background-size: 70%;
}
.pluginsToolbar .actionButton:hover {
  background-color: #D9D9D9;
}
.pluginsToolbar .actionButton.active {
  background-color: #347B98;
}
.pluginsToolbar .modeSeparator {
  width: calc(100%);
  height: 2px;
  background-color: #347B98;
  opacity: 0.25;
}

.canvasPropertiesEditor {
  position: fixed;
  background: #fff;
  left: calc(50% - 235px);
  top: 33px;
  width: 470px;
  height: 346px;
  box-sizing: border-box;
  border: none;
  padding: 4px 8px 4px 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  border-radius: 0 0 8px 8px;
}
.canvasPropertiesEditor .title {
  font-size: 1.1em;
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
}
.canvasPropertiesEditor .editorField {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 8px 0;
}
.canvasPropertiesEditor .editorField input {
  flex: 1;
}
.canvasPropertiesEditor .editorField .textAreaWrapper {
  flex: 1;
}
.canvasPropertiesEditor .editorField .textAreaWrapper textarea {
  flex: 1;
  resize: none;
  min-height: 88px;
}
.canvasPropertiesEditor .editorField.checkbox,
.canvasPropertiesEditor .editorField.combobox {
  justify-content: space-between;
}
.canvasPropertiesEditor .editorField.combobox {
  line-height: 28px;
}
.canvasPropertiesEditor .editorField.combobox .itemListComboBox {
  width: 156px;
}
.canvasPropertiesEditor .editorField.combobox .itemListComboBox .gridType {
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center / 24px no-repeat;
  padding-right: 32px;
  height: 28px;
  cursor: pointer;
  text-align: right;
  min-width: 124px;
}
.canvasPropertiesEditor .editorField.combobox .itemListComboBox .gridType.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center / 24px no-repeat;
}
.canvasPropertiesEditor .editorField.combobox .itemListComboBox .gridType:hover {
  background-color: #f0f0f0;
}
.canvasPropertiesEditor .editorField.combobox .itemListComboBox .itemList {
  margin-left: 0px;
}
.canvasPropertiesEditor .editorActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 8px 0;
}

.iconChooser .icons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.iconChooser .icons div {
  width: 26px;
  height: 26px;
  cursor: pointer;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iconChooser .icons div img {
  width: 16px;
  height: 16px;
}
.iconChooser .icons div:hover {
  opacity: 0.5;
  background-color: #eee;
}
.iconChooser .icons div.active {
  background-color: #e0e0e0;
}

.canvasProperties {
  position: fixed;
  left: calc(50% - 235px);
  width: 470px;
  top: 0;
  height: 40px;
  line-height: 32px;
  background-color: #FFFFFF;
  border-radius: 0 0 8px 8px;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 4px 4px;
  box-sizing: border-box;
}
.canvasProperties .mainProperties {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.canvasProperties .mainProperties .actionButton:hover {
  animation: canvasToolbarIcon 333ms;
  animation-fill-mode: forwards;
  background-color: transparent;
}
@keyframes canvasToolbarIcon {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.16);
  }
}
.canvasProperties .mainProperties .canvasTitle {
  font-size: 1.05em;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.canvasProperties.detailsMode {
  left: calc(50% - 235px);
  width: 470px;
  height: 160px;
}
.canvasProperties.detailsMode .boardPropertiesDetails {
  height: 128px;
  overflow-y: auto;
}
.searchPanel .items .item .type.sticky_note {
  background-image: url(/e5a9b37bf46934832c90.svg);
}
.searchPanel .items .item .type.text {
  background-image: url(/d78294fbbb4be91f1cbd.svg);
}
.searchPanel .items .item .type.markdown {
  background-image: url(/1e9cc3c1e2c2d55409e9.svg);
}
.searchPanel .items .item .type.shape {
  background-image: url(/4d8ac1175816d00e1af9.svg);
}
.searchPanel .items .item .type.reaction {
  background-image: url(/88d21374a571c904b83d.svg);
}

.zoomChooser {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
  border-left: solid 1px #347B98;
  border-right: solid 1px #347B98;
}
.zoomChooser .value {
  cursor: pointer;
}
.zoomChooser .value.disabled {
  cursor: default;
}

.layersManager {
  position: fixed;
  height: 400px;
  width: 600px;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  top: calc(50% - 200px);
  left: calc(50% - 300px);
}
.layersManager .titleAndClose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  margin-bottom: 4px;
}
.layersManager .titleAndClose .title {
  font-weight: bold;
  font-size: 1.1em;
  flex: 1;
  text-align: center;
}
.layersManager .newLayer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
  padding: 8px;
}
.layersManager .newLayer input {
  flex: 1;
}
.layersManager .newLayer .actionButton.addAction {
  margin-left: 8px;
}
.layersManager .newLayer .separator {
  min-width: 16px;
}
.layersManager .list {
  padding: 0 8px;
  overflow-y: auto;
}

.layerView {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
  margin: 4px 0;
}
.layerView .layerName {
  width: calc(100% - 36px);
  cursor: pointer;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.layerView .layerName:hover {
  background: #347B98;
  color: #ffffff;
}
.layerView input {
  flex: 1;
}
.layerView.archived {
  text-decoration: line-through;
  opacity: 0.5;
}

.boardLayers {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: 288px;
  max-width: 288px;
  justify-content: space-between;
}
.boardLayers .chooser {
  display: flex;
  width: calc(100% - 32px);
}
.boardLayers .chooser .value {
  flex: 1;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  min-width: 32px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  white-space: nowrap;
}
.boardLayers .chooser .list {
  position: absolute;
  display: none;
  margin-top: -170px;
  height: 168px;
  width: 288px;
  background-color: #FFFFFF;
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  overflow-y: auto;
  padding: 4px 0 4px 8px;
  box-sizing: border-box;
  outline: none;
}
.boardLayers .chooser .list .listLayerView {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  max-width: calc(100% - 16px);
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.boardLayers .chooser .list .listLayerView:hover {
  background-color: #347B98;
  color: #ffffff;
}
.boardLayers .chooser .list .listLayerView.active {
  background-color: #347B98;
  color: #ffffff;
}
.boardLayers .chooser .list.open {
  display: initial;
}
.boardLayers .chooser.disabled .value {
  cursor: default;
}
.boardLayers.empty {
  min-width: 32px;
  max-width: 32px;
}

.allCommentsView {
  position: fixed;
  left: 28%;
  width: 44%;
  top: 28%;
  height: 44%;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 8px;
  border-radius: 3px;
}
.allCommentsView .titleAndClose {
  display: flex;
  flex-direction: row;
  height: 32px;
  line-height: 32px;
}
.allCommentsView .titleAndClose .title {
  flex: 1;
  text-align: center;
  font-size: 1.05em;
  font-weight: bold;
}
.allCommentsView .commentList {
  height: calc(100% - 32px);
  overflow-y: auto;
}
.allCommentsView .commentList .commentView {
  display: flex;
  flex-direction: column;
  margin: 4px 0;
  padding: 4px 8px;
  width: calc(100% - 24px);
}
.allCommentsView .commentList .commentView .commentInfo {
  display: flex;
  flex-direction: row;
  margin-bottom: 4px;
}
.allCommentsView .commentList .commentView .commentInfo .time {
  font-weight: bold;
}
.allCommentsView .commentList .commentView:nth-child(odd) {
  background-color: #f8f8f8;
}


.documentContentEditor .diaryEditor {
  display: flex;
  flex-direction: row;
}
.documentContentEditor .diaryEditor .textAreaWrapper {
  min-width: 320px;
}
.documentContentEditor .diaryEditor .diaryItemList {
  flex: 1;
  padding: 4px 8px;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem {
  min-height: 28px;
  line-height: 28px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem .period {
  font-size: 0.9em;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem .text {
  flex: 1;
  padding-left: 4px;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem input {
  flex: 1;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem .actionButton {
  opacity: 0;
}
.documentContentEditor .diaryEditor .diaryItemList .diaryItem:hover .actionButton {
  opacity: 1;
}

.documentPart {
  display: flex;
  flex-direction: row;
  width: 88%;
  justify-content: center;
  margin: 0 7%;
  border-left: solid 4px transparent;
  padding-left: 4px;
}
.documentPart .documentContent {
  flex: 1;
}
.documentPart .documentContent .diaryPart .diaryItemList .diaryItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.documentPart .documentContent .diaryPart .diaryItemList .diaryItem .period {
  font-size: 0.9em;
}
.documentPart .documentContent .diaryPart .diaryItemList .diaryItem .text {
  flex: 1;
  padding-left: 4px;
}
.documentPart .documentContent .plainTextDocumentPart {
  white-space: pre;
  font-family: "JenBrains Mono", "Arial", SansSerif, serif;
}
.documentPart .documentContent .plainTextDocumentPart,
.documentPart .documentContent .diagramDocumentPart {
  position: relative;
}
.documentPart .documentContent .plainTextDocumentPart .documentDiagramPreview,
.documentPart .documentContent .diagramDocumentPart .documentDiagramPreview {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.documentPart .documentContent .plainTextDocumentPart .actions,
.documentPart .documentContent .diagramDocumentPart .actions {
  position: absolute;
  right: 2px;
  margin-top: -2px;
}
.documentPart .documentContent .plainTextDocumentPart .actions .actionButton.diagramAction,
.documentPart .documentContent .diagramDocumentPart .actions .actionButton.diagramAction {
  background-image: url(/845e41235cd0bdbd7e5f.svg);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}
.documentPart .documentContent .partHeaderEditor {
  display: flex;
  flex-direction: row;
  padding: 0 16px 0 0;
  width: calc(100% - 16px);
}
.documentPart .documentContent .partHeaderEditor .partType {
  width: 32px;
  height: 32px;
}
.documentPart .documentContent .partHeaderEditor .partType.plain_text {
  background: transparent url(/d78294fbbb4be91f1cbd.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partType.diagram {
  background: transparent url(/845e41235cd0bdbd7e5f.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partType.markdown {
  background: transparent url(/1e9cc3c1e2c2d55409e9.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partType.diary {
  background: transparent url(/d8a7369ca64193b75c80.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partType.table {
  background: transparent url(/6711a6663957733fad23.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader {
  display: flex;
  flex-direction: row;
  width: 100%;
  column-gap: 4px;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions {
  display: flex;
  flex-direction: row;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.setMarkdownAction {
  background: transparent url(/1e9cc3c1e2c2d55409e9.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.setPlainTextAction {
  background: transparent url(/d78294fbbb4be91f1cbd.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.setDiagramAction {
  background: transparent url(/845e41235cd0bdbd7e5f.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.setDiaryAction {
  background: transparent url(/d8a7369ca64193b75c80.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.setTableAction {
  background: transparent url(/6711a6663957733fad23.svg) center no-repeat;
  background-size: 70%;
}
.documentPart .documentContent .partHeaderEditor .partHeader .setTypeActions .actionButton.active {
  background-color: #d0d0d0;
}
.documentPart .documentContent .partHeaderEditor .partHeader .headerItSelf {
  font-size: 1.2em;
  margin-left: 0px;
  margin-bottom: 8px;
  font-weight: bold;
  width: calc(100% - 4px);
  line-height: 32px;
}
.documentPart .documentContent .partHeaderEditor .partHeader input {
  width: calc(100% - 36px);
}
.documentPart .documentContent .partHeaderEditor .partHeader .actionButton {
  opacity: 1;
}
.documentPart .documentContent .partHeaderEditor .partHeader.editing .headerItSelf {
  margin-left: 0;
}
.documentPart .documentContent.editing {
  margin: 4px;
}
.documentPart .documentContent.editing .partHeaderEditor {
  padding: 0 4px;
  width: calc(100% - 8px);
}
.documentPart .documentContentEditor {
  flex: 1;
  margin: 4px 4px 4px 16px;
  padding-bottom: 16px;
}
.documentPart .documentContentEditor textarea {
  width: calc(100% - 8px);
  resize: none;
  min-height: max(88px, 8vh);
  padding-bottom: 16px;
  border: solid 1px #eee;
  border-radius: 3px;
}
.documentPart .documentContentEditor .state {
  position: relative;
  margin-top: -35px;
  padding: 4px 8px;
  background-color: #eee;
  opacity: 0.5;
  width: calc(100% - 64px);
  margin-left: 32px;
  border-radius: 4px;
}
.documentPart .documentContentEditor .state.empty {
  opacity: 0;
}
.documentPart .editingActions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-bottom: 32px;
}
.documentPart .editingActions .topActions {
  display: flex;
  flex-direction: column;
}
.documentPart .editingActions .actionButton {
  opacity: 1;
}
.documentPart .actionButton {
  opacity: 0;
}
.documentPart .tableDocumentPart .actionButton.copyAction {
  position: absolute;
  right: calc(6% + 16px);
  margin-top: -28px;
}
.documentPart:hover {
  border-left: solid 4px #CCC;
}
.documentPart:hover .actionButton:not(:disabled) {
  opacity: 1;
}

.documentRenameDialog {
  position: fixed;
  top: 42px;
  left: calc(50% - 240px);
  width: 480px;
  min-height: 120px;
  max-height: 40%;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
.documentRenameDialog .title {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin: 4px 0;
}
.documentRenameDialog .field {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 8px;
  height: 32px;
  line-height: 32px;
}
.documentRenameDialog .field .label {
  font-weight: bold;
  margin-right: 16px;
}
.documentRenameDialog .field input {
  flex: 1;
}
.documentRenameDialog .actions {
  margin: 16px 0 4px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.documentPage .documentTitle {
  font-size: 1.5em;
  text-align: center;
  margin: 8px 0 8px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
}
.documentPage .documentTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.documentPage .documentTitle .text {
  cursor: pointer;
}
.documentPage .documentParts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.documentPage .documentParts .actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 40px 8px 0 8px;
}
.documentPage .documentParts .partList {
  height: calc(100vh - 88px);
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 48px;
  overflow-x: hidden;
}
.documentPage .documentContent {
  margin: 4px 16px;
}

.documentEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.documentEditor .documentEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.documentEditor .documentEditField .label {
  width: 100px;
  font-weight: bold;
}
.documentEditor .documentEditField .field {
  flex: 1;
}
.documentEditor .documentEditField .field input {
  width: calc(100% - 8px);
}
.documentEditor .documentEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.documentEditor .documentEditorSpaceBetween {
  flex: 1;
}

.linkStatus {
  width: 20px;
  height: 24px;
}
.linkStatus.success {
  background: transparent url(/53ddd7b30a9c69afb435.svg) center no-repeat;
  background-size: 16px;
}
.linkStatus.error {
  background: transparent url(/6bc2e9cf53887ae03f7b.svg) center no-repeat;
  background-size: 16px;
}
.linkStatus.unknown {
  background: transparent url(/a12388546fe4ab69ec77.svg) center no-repeat;
  background-size: 16px;
}

.linkIcon {
  width: 20px;
  height: 24px;
  margin-right: 4px;
}
.linkIcon img {
  width: 20px;
  height: 24px;
}

.appItem.appLink .linkContent {
  flex: 1;
  display: flex;
  flex-direction: row;
  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;
}
.appItem.appLink .linkContent span div.innerContent {
  display: flex;
}
.appItem.appLink .linkContent .linkText {
  padding: 0 4px;
}
.appItem.appLink .linkContent .linkText.empty {
  padding: 0;
}
.appItem.appLink .linkContent .linkUrl {
  color: #347B98;
  font-weight: bold;
  cursor: pointer;
}
.appItem.appLink .linkContent .linkUrl:hover {
  color: #144B68;
}
.appItem.appLink .linkContent.obsoleted {
  text-decoration: line-through;
  opacity: 0.5;
}
.appItem.appLink.selected .innerContent {
  background-color: #f8f8f8;
}

.linkEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.linkEditor .linkEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.linkEditor .linkEditField .label {
  width: 100px;
  font-weight: bold;
}
.linkEditor .linkEditField .field {
  flex: 1;
}
.linkEditor .linkEditField .field input {
  width: calc(100% - 8px);
}
.linkEditor .linkEditField .field .icons {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
.linkEditor .linkEditField .field .icons div {
  width: 26px;
  height: 26px;
  cursor: pointer;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.linkEditor .linkEditField .field .icons div img {
  width: 16px;
  height: 16px;
}
.linkEditor .linkEditField .field .icons div:hover {
  opacity: 0.5;
  background-color: #eee;
}
.linkEditor .linkEditField .field .icons div.active {
  background-color: #e0e0e0;
}
.linkEditor .linkEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.linkEditor .linkEditorSpaceBetween {
  flex: 1;
}
.linkEditor .preview {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 4px;
  background-color: #f8f8f8;
  padding: 4px 8px;
  border-radius: 3px;
}
.linkEditor .preview .linkText {
  padding: 0 4px;
}
.linkEditor .preview .linkText.empty {
  padding: 0;
}
.linkEditor .preview .linkUrl {
  color: #347B98;
  font-weight: bold;
  cursor: pointer;
}
.linkEditor .preview.empty {
  padding: 0;
}

.appItem.appNote .noteContent {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.appItem.appNote .noteContent .noteUrl {
  color: #347B98;
  font-weight: bold;
  cursor: pointer;
}
.appItem.appNote.selected .noteContent .noteUrl {
  background-color: #f8f8f8;
}
.cardItems .appItem.appNote .noteContent .noteUrl {
  width: calc(100%);
  text-align: center;
}
.edit .appItem.appNote .noteUrl {
  color: #666;
  font-weight: bold;
  cursor: pointer;
}

.noteEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.noteEditor .noteEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.noteEditor .noteEditField .label {
  width: 100px;
  font-weight: bold;
}
.noteEditor .noteEditField .field {
  flex: 1;
}
.noteEditor .noteEditField .field input {
  width: calc(100% - 8px);
}
.noteEditor .noteEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.noteEditor .noteEditorSpaceBetween {
  flex: 1;
}

.noteContentEditor {
  display: flex;
  flex-direction: column;
  margin: 4px 16px;
  flex: 1;
}
.noteContentEditor textarea {
  resize: none;
  width: calc(100% - 8px);
  min-height: max(200px, 33vh);
  padding-bottom: 16px;
  border: solid 1px #eee;
  border-radius: 3px;
}
.noteContentEditor .state {
  position: relative;
  margin-top: -35px;
  padding: 4px 8px;
  background-color: #eee;
  opacity: 0.4;
  width: calc(100% - 64px);
  margin-left: 32px;
  border-radius: 4px;
}
.noteContentEditor .state.empty {
  opacity: 0;
}

.noteRenameDialog {
  position: fixed;
  top: 42px;
  left: calc(50% - 240px);
  width: 480px;
  min-height: 120px;
  max-height: 40%;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
.noteRenameDialog .title {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin: 4px 0;
}
.noteRenameDialog .field {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 8px;
  height: 32px;
  line-height: 32px;
}
.noteRenameDialog .field .label {
  font-weight: bold;
  margin-right: 16px;
}
.noteRenameDialog .field input {
  flex: 1;
}
.noteRenameDialog .actions {
  margin: 16px 0 4px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.notePage {
  width: 86%;
  margin: 0 7%;
}
.notePage .noteTitle {
  font-size: 1.5em;
  text-align: center;
  margin: 8px 0 8px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.notePage .noteTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.notePage .noteTitle .text {
  cursor: pointer;
}
.notePage .actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 40px 8px 0 8px;
}
.notePage .contentAndSwitcher {
  display: flex;
  flex-direction: row;
}
.notePage .contentAndSwitcher .noteContent {
  margin: 4px 16px;
  flex: 1;
}
.notePage .noteContent .noteHeaderEditor,
.notePage .noteContentEditor .noteHeaderEditor {
  display: flex;
  flex-direction: row;
  padding: 0 16px;
  width: calc(100% - 32px);
}
.notePage .noteContent .noteHeaderEditor .noteHeader,
.notePage .noteContentEditor .noteHeaderEditor .noteHeader {
  display: flex;
  flex-direction: row;
  width: 100%;
  column-gap: 4px;
}
.notePage .noteContent .noteHeaderEditor .noteHeader .headerItSelf,
.notePage .noteContentEditor .noteHeaderEditor .noteHeader .headerItSelf {
  font-size: 1.2em;
  margin-left: -16px;
  margin-bottom: 8px;
  font-weight: bold;
  width: calc(100% - 4px);
}
.notePage .noteContent .noteHeaderEditor .noteHeader input,
.notePage .noteContentEditor .noteHeaderEditor .noteHeader input {
  width: calc(100% - 36px);
}
.notePage .noteContent .noteHeaderEditor .noteHeader .actionButton,
.notePage .noteContentEditor .noteHeaderEditor .noteHeader .actionButton {
  opacity: 1;
}
.notePage .noteContent .noteHeaderEditor .noteHeader.editing .headerItSelf,
.notePage .noteContentEditor .noteHeaderEditor .noteHeader.editing .headerItSelf {
  margin-left: 0;
}

.taskEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.taskEditor .taskEditField {
  display: flex;
  flex-direction: row;
  min-height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.taskEditor .taskEditField .label {
  width: 100px;
  font-weight: bold;
}
.taskEditor .taskEditField .field {
  flex: 1;
}
.taskEditor .taskEditField .field input {
  width: calc(100% - 4px);
  margin: 0 ;
}
.taskEditor .taskEditField .field .textAreaWrapper {
  max-height: 160px;
}
.taskEditor .taskEditField .field textarea {
  margin-top: 0px;
  width: calc(100% - 40px);
  resize: none;
  min-height: 80px;
}
.taskEditor .taskEditField.oneline {
  height: 30px;
}
.taskEditor .taskEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.taskEditor .taskEditActions .centerActions {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.taskEditor .taskEditActions .tagsActions {
  min-width: 160px;
}
.taskEditor .taskEditActions .tagsActions .taskTagList.itemListComboBox {
  height: 32px;
  line-height: 32px;
}
.taskEditor .taskEditActions .tagsActions .taskTagList.itemListComboBox .taskTag {
  background: #f2f2f2 url(/130e7e4eb20ffd4a84fc.svg) right center / 24px no-repeat;
  cursor: pointer;
  text-align: center;
}
.taskEditor .taskEditActions .tagsActions .taskTagList.itemListComboBox .taskTag:hover {
  opacity: 0.75;
}
.taskEditor .taskEditorSpaceBetween {
  min-height: 32px;
}
.taskEditor .preview {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 4px;
  background-color: #f8f8f8;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: bold;
  line-height: 26px;
}
.taskEditor .preview .code {
  padding-right: 8px;
}
.taskEditor .preview .tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 4px;
  font-size: 0.8em;
  max-width: 33%;
  row-gap: 4px;
}
.taskEditor .preview .tags .tag {
  margin: 0 2px 0 0;
  background: #FCCB1A;
  border-radius: 4px;
  padding: 2px 8px;
  max-height: 22px;
  line-height: 22px;
}
.taskEditor .preview .info {
  flex: 1;
  text-align: left;
  padding-left: 8px;
}
.taskEditor .preview.empty {
  padding: 0;
}

.taskTags {
  margin: 2px 0 6px 0;
  min-height: 22px;
  line-height: 18px;
  font-size: 0.8em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.taskTags .tag {
  margin: 0 2px 0 0;
  background: #e0e0e0;
  border-radius: 4px;
  padding: 2px 8px;
}
.taskTags .tag1 {
  background: #f0f0f0;
}
.taskTags .tag2 {
  background: #FCCB1A;
}
.taskTags .tag3 {
  background: #a8c661;
}
.taskTags .tag4 {
  background: #a6ccf5;
}
.taskTags .tag5 {
  background: #fff9b1;
}
.taskTags .tag6 {
  background: #ffcee0;
}
.taskTags .tag7 {
  background: #d5f692;
}
.taskTags .tag8 {
  background: #93d275;
}
.taskTags .tag9 {
  background: #ffb48d;
}

.appItem.appTask .taskContent {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 8px;
}
.appItem.appTask .taskContent .allContent {
  flex: 1;
}
.appItem.appTask .taskContent .taskUrl {
  font-weight: bold;
  cursor: pointer;
  flex: 1;
  line-height: 32px;
  display: flex;
  flex-direction: row;
}
.appItem.appTask .taskContent .taskUrl .titleAndTags {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.appItem.appTask .taskContent .taskUrl .titleAndTags .description {
  width: 24px;
  height: 24px;
  background: transparent url(/ccd6ab5781109769fc3d.svg) center / 18px no-repeat;
  opacity: 0.5;
  margin-right: -8px;
}
.appItem.appTask .taskContent .taskUrl .taskCode {
  padding-right: 4px;
  white-space: nowrap;
  min-width: 68px;
}
.appItem.appTask .taskContent .taskUrl .taskTitle {
  flex: 1;
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
  line-height: 24px;
  padding: 4px 0;
}
.appItem.appTask .taskContent .taskStatus {
  display: flex;
  line-height: 32px;
}
.appItem.appTask .taskContent .taskStatus .statusValue {
  margin-right: 8px;
  padding: 0 8px;
}
.appItem.appTask:hover:not(.renaming) {
  background-color: #D9D9D9;
}
.appItem.appTask.closed .taskContent {
  text-decoration: line-through;
  opacity: 0.5;
}
.appItem.appTask.moving {
  position: relative;
}
.appItem.appTask.moving .taskContent.moving {
  position: absolute;
  width: calc(100% - 16px);
  pointer-events: none;
}
.edit .appItem.appTask .taskUrl {
  color: #666;
  font-weight: bold;
  cursor: pointer;
}
.boardItems .appItem.appTask {
  width: 100%;
}
.boardItems .appItem.appTask .taskContent {
  width: 100%;
}
.boardItems .appItem.appTask .taskContent .taskUrl {
  width: calc(100% - 220px);
}
.appItem.appTask.selected .taskContent {
  background-color: #e0e0e0;
}

.tasksActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.viewTaskDetailsDialog {
  position: fixed;
  right: 8px;
  min-width: 360px;
  width: 16%;
  min-height: 240px;
  max-height: 50%;
  top: 42px;
  z-index: 20;
  background-color: #fff;
  border: solid 1px #eee;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.viewTaskDetailsDialog .actions,
.viewTaskDetailsDialog .bottomActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.viewTaskDetailsDialog .bottomActions {
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
}
.viewTaskDetailsDialog .bottomActions .clipboardActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.viewTaskDetailsDialog .bottomActions .clipboardActions .icon {
  background: transparent url(/16085a558523edd0e3ff.svg) center no-repeat;
  background-size: 80%;
  height: 32px;
  width: 32px;
}
.viewTaskDetailsDialog .bottomActions .clipboardActions .action {
  margin: 0 4px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 3px;
}
.viewTaskDetailsDialog .bottomActions .clipboardActions .action:hover {
  background: #347B98;
  color: #ffffff;
}
.viewTaskDetailsDialog .spaceBetween {
  flex: 1;
}
.viewTaskDetailsDialog .details {
  padding: 8px;
}
.viewTaskDetailsDialog .details .taskTitle,
.viewTaskDetailsDialog .details .taskStatus {
  min-height: 28px;
  line-height: 28px;
  margin: 4px 0;
}
.viewTaskDetailsDialog .details .taskDescription {
  font-size: 0.9em;
  background: #f8f8f8;
  padding: 4px 8px;
}

.singleTaskView {
  width: 480px;
  margin-left: calc(50% - 240px);
  margin-top: 40px;
}
.singleTaskView .taskTitle {
  display: flex;
  flex-direction: row;
  height: 32px;
  line-height: 32px;
  column-gap: 8px;
}
.singleTaskView .taskTitle .text {
  white-space: nowrap;
}
.singleTaskView .taskStatus {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.singleTaskView .taskStatus .label {
  font-weight: bold;
}

.itemEditor {
  position: fixed;
  background: #fff;
  left: calc(50% - 320px);
  top: calc(50% - 230px);
  width: 640px;
  height: 460px;
  box-sizing: border-box;
  border: solid 1px #eee;
  border-radius: 3px;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 15;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.itemEditor .dialogTitle {
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}
.itemEditor .createButtons {
  display: flex;
  flex: 1;
  flex-direction: row;
}
.itemEditor .editActionType {
  cursor: pointer;
  padding: 0 16px;
  background-color: #eee;
  border-radius: 4px;
  margin: 0 4px;
}
.itemEditor .editActionType:hover {
  background-color: #e0e0e0;
}
.itemEditor .editActionType.active,
.itemEditor .editActionType.active:hover {
  background-color: #666;
  color: #fff;
}
.itemEditor .editActionType.disabled,
.itemEditor .editActionType.disabled:hover {
  cursor: default;
  background-color: #bbb;
  opacity: 0;
  border-radius: 0;
}
.itemEditor .itemEditorActions {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  justify-content: space-between;
}
.itemEditor .itemEditorForm {
  flex: 1;
}
.itemEditor.task {
  top: calc(50% - 184px);
  min-height: 388px;
  height: 388px;
  width: 720px;
  left: calc(50% - 360px);
}
.itemEditor.editing.task {
  top: calc(50% - 187px);
  min-height: 374px;
  height: 374px;
}
.itemEditor.note {
  top: calc(50% - 200px);
  height: 200px;
}
.itemEditor.document {
  top: calc(50% - 200px);
  height: 200px;
}
.itemEditor.canvas {
  top: calc(50% - 200px);
  height: 200px;
}
.itemEditor.editing.view-link {
  top: calc(50% - 100px);
  height: 200px;
}
.itemEditor.app-link {
  top: calc(50% - 176px);
  height: 372px;
}
.itemEditor.editing.app-link {
  top: calc(50% - 176px);
  height: 352px;
}

.sorterItemView {
  width: 28px;
  min-height: 28px;
  background: url(/3dca6d6cf62d9ae8bf1e.svg) center no-repeat;
  background-size: 80%;
  margin-right: 4px;
}
.sorterItemView:hover {
  background-size: 95%;
}
.sorterItemView.moving {
  cursor: n-resize;
}

.sortingItemShadow {
  position: relative;
  opacity: 0.8;
}
.sortingItemShadow .sortingItemShadowContent {
  width: 100%;
}

.sortingPlaceholder {
  opacity: 0.8;
}

.viewLayers {
  position: fixed;
  left: 8px;
  bottom: 16px;
  background-color: #FFFFFF;
  border-radius: 3px;
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.itemPopupMenu {
  position: absolute;
  outline: none;
}
.itemPopupMenu .popupMenuList {
  position: absolute;
}

.searchPanel {
  position: fixed;
  left: calc(50% - 390px);
  top: 0px;
  width: 780px;
  height: 340px;
  z-index: 10;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  background: #fff;
  border: solid 1px #eee;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-radius: 4px;
}
.searchPanel .searchText {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 4px 4px 0px 8px;
  margin-bottom: 4px;
  column-gap: 8px;
}
.searchPanel .searchText .searchOptions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  line-height: 32px;
}
.searchPanel .searchText input {
  flex: 1;
}
.searchPanel .engines {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 8px 4px 8px;
  margin-bottom: 8px;
  column-gap: 8px;
  border-bottom: solid 1px #eee;
}
.searchPanel .resultHint {
  line-height: 32px;
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.searchPanel .resultHint .statsIcon {
  width: 32px;
  height: 32px;
  background: transparent url(/bd689ac58f47e1ebaf9c.svg) center / 75% no-repeat;
}
.searchPanel .resultHint.error {
  padding-right: 24px;
  background: transparent url(/7b2b62ac2f72ec71ca82.svg) calc(100%) center / 20px no-repeat;
}
.searchPanel .filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 8px;
  line-height: 28px;
  padding: 2px 4px;
}
.searchPanel .filters .filter {
  background: #eee;
  border-radius: 4px;
  padding: 0 8px 0 32px;
  height: 28px;
  cursor: pointer;
  background-position: 4px center;
  background-size: 20px;
  background-repeat: no-repeat;
}
.searchPanel .filters .filter.checked {
  background-position: 4px center;
  background-size: 20px;
  background-repeat: no-repeat;
  filter: invert(1);
}
.searchPanel .filters .filter:hover {
  opacity: 0.5;
}
.searchPanel .items {
  height: calc(258px);
  overflow-y: auto;
  padding: 0 4px;
}
.searchPanel .items .filterBelow {
  min-height: 32px;
}
.searchPanel .items .searchTooltip {
  padding: 0 4px;
}
.searchPanel .items .item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  line-height: 32px;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  cursor: pointer;
}
.searchPanel .items .item .title {
  width: calc(100% - 164px);
  display: flex;
  column-gap: 4px;
  flex-direction: row;
  flex-wrap: nowrap;
}
.searchPanel .items .item .title .tags {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 144px;
  column-gap: 4px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.searchPanel .items .item .title .tags .tag {
  background-color: #f2f2f2;
  padding: 0 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.searchPanel .items .item .title .tags.found {
  min-width: 64px;
}
.searchPanel .items .item .type {
  width: 128px;
  background: #eee;
  color: #555;
  padding: 0 4px 0 32px;
  border-radius: 4px;
  text-align: left;
  background-position: 4px center;
  background-size: 16px;
  background-repeat: no-repeat;
  margin: 2px 0;
  line-height: 28px;
}
.searchPanel .items .item.obsoleted {
  opacity: 0.4;
  text-decoration: line-through;
}
.searchPanel .items .item:hover {
  background-color: #f2f2f2;
}
.searchPanel .items .item:hover .type {
  background-color: #f2f2f2;
}

.viewNavigator .createViews {
  width: 280px;
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  left: 0;
  top: 32px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.viewNavigator .createViews.hidden {
  display: none;
}
.viewNavigator .createViewItem {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.viewNavigator .createViewItem:hover {
  background: #347B98;
  color: #FFFFFF;
}

.currentViewIcon {
  height: 32px;
  width: 30px;
  cursor: pointer;
  border-radius: 3px;
  background-color: #f0f0f0;
  padding-left: 2px;
  font-weight: bold;
}
.currentViewIcon .shortTitle {
  height: 20px;
  line-height: 20px;
  width: 20px;
  font-size: 11pt;
  text-align: center;
  color: #333;
}
.currentViewIcon .favouriteIcon {
  position: relative;
  width: 16px;
  height: 16px;
  z-index: 1;
  top: 4px;
  left: 24px;
}
.currentViewIcon .favouriteIcon.nonFavourite {
  background: transparent url(/bb587416e44990ecb9b9.svg) center no-repeat;
  background-size: 16px;
}
.currentViewIcon .favouriteIcon.favourite {
  background: transparent url(/28c2e18846a6aac70ed0.svg) center no-repeat;
  background-size: 16px;
}
.currentViewIcon.GROUPED_VIEW {
  background: #f0f0f0 url(/4cd09981645003d484d6.svg) calc(100% - 2px) 80% no-repeat;
  background-size: 50%;
}
.currentViewIcon.LIST_VIEW {
  background: #f0f0f0 url(/1f66c7834386cf7d86ef.svg) calc(100% - 2px) 80% no-repeat;
  background-size: 50%;
}
.currentViewIcon.CARD_VIEW {
  background: #f0f0f0 url(/7b60d1e326241c53da3d.svg) calc(100% - 2px) 80% no-repeat;
  background-size: 50%;
}
.currentViewIcon.BOARD_VIEW {
  background: #f0f0f0 url(/b429e7524c9e3b6d2d33.svg) calc(100% - 2px) 80% no-repeat;
  background-size: 50%;
}
.currentViewIcon.custom {
  background: #f0f0f0 100% 80% no-repeat;
  background-size: 50%;
}
.currentViewIcon.disabled {
  background-color: transparent;
}
.currentViewIcon.current {
  background-color: #347B98;
  opacity: 0.65;
}
.currentViewIcon.current .shortTitle {
  color: #ffffff;
}
.currentViewIcon.GROUPED_VIEW.current {
  background-image: url(/59d5c32de34952c557f5.svg);
}
.currentViewIcon.LIST_VIEW.current {
  background-image: url(/856b5f1a84686e83a12c.svg);
}
.currentViewIcon.CARD_VIEW.current {
  background-image: url(/3dfa8bac23688df6c762.svg);
}
.currentViewIcon.BOARD_VIEW.current {
  background-image: url(/6a2bf6fe56bf775384df.svg);
}
.currentViewIcon:hover {
  background-color: #e2e2e2;
}
.currentViewIcon.current:hover {
  background-color: #347B98;
  opacity: 0.5;
}
.currentViewIcon:hover {
  border-radius: 0;
  animation: currentViewIcon 300ms;
  animation-fill-mode: forwards;
}
@keyframes currentViewIcon {
  from {
    background-size: 50%;
  }
  to {
    background-size: 60%;
  }
}

.viewNavigator {
  position: fixed;
  top: 8px;
  left: 8px;
  background-color: #FFFFFF;
  height: 32px;
  /*border: solid 1px #eee;*/
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  z-index: 21;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.viewNavigator .currentViewIcon .shortTitle {
  font-family: "Delius", "Arial", SansSerif, serif;
}
.viewNavigator .splitter {
  background-color: #092834;
  width: 2px;
}
.viewNavigator .rightSpace {
  margin-right: 8px;
}
.searchPanel .filters .filter.document {
  background-image: url(/4a1d6c00e52eee4c0045.svg);
}
.searchPanel .filters .filter.task {
  background-image: url(/029444b6d64d48407117.svg);
}
.searchPanel .filters .filter.board {
  background-image: url(/970f2c71a45d6bb1260e.svg);
}
.searchPanel .filters .filter.note {
  background-image: url(/32ce37d216b0b2df0384.svg);
}
.searchPanel .filters .filter.link {
  background-image: url(/a44a8ebaee4f896dabae.svg);
}
.searchPanel .filters .filter.grouped_view,
.searchPanel .filters .filter.grouped_list {
  background-image: url(/4cd09981645003d484d6.svg);
}
.searchPanel .filters .filter.list_view,
.searchPanel .filters .filter.list {
  background-image: url(/1f66c7834386cf7d86ef.svg);
}
.searchPanel .filters .filter.card_view {
  background-image: url(/7b60d1e326241c53da3d.svg);
}
.searchPanel .filters .filter.board_view {
  background-image: url(/b429e7524c9e3b6d2d33.svg);
}
.searchPanel .items .item .type.document {
  background-image: url(/4a1d6c00e52eee4c0045.svg);
}
.searchPanel .items .item .type.task {
  background-image: url(/029444b6d64d48407117.svg);
}
.searchPanel .items .item .type.board {
  background-image: url(/970f2c71a45d6bb1260e.svg);
}
.searchPanel .items .item .type.note {
  background-image: url(/32ce37d216b0b2df0384.svg);
}
.searchPanel .items .item .type.link {
  background-image: url(/a44a8ebaee4f896dabae.svg);
}
.searchPanel .items .item .type.grouped_view {
  background-image: url(/4cd09981645003d484d6.svg);
}
.searchPanel .items .item .type.list_view {
  background-image: url(/1f66c7834386cf7d86ef.svg);
}
.searchPanel .items .item .type.card_view {
  background-image: url(/7b60d1e326241c53da3d.svg);
}
.searchPanel .items .item .type.board_view {
  background-image: url(/b429e7524c9e3b6d2d33.svg);
}

.switchActionContainer {
  position: relative;
  z-index: 10;
}
.switchActionContainer .switchItemAction {
  width: 24px;
  height: 24px;
  cursor: default;
}
.switchActionContainer .switchItemAction.upAction {
  background: transparent url(/489c75c5fc995655526f.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.downAction {
  background: transparent url(/130e7e4eb20ffd4a84fc.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.upAction:hover,
.switchActionContainer .switchItemAction.downAction:hover {
  background-size: 90%;
}

.listActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.listView .listViewTitle.edit {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.listView .listViewTitle.edit .title {
  line-height: 32px;
  cursor: pointer;
}
.listView .listViewTitle.edit .actionButton {
  margin-left: 8px;
}
.listView.edit .items .appItem {
  cursor: pointer;
  justify-content: flex-start;
  display: flex;
}
.listView.edit .items .appItem .linkUrl {
  color: #666;
}
.listView.edit .items .appItem .linkContent {
  flex: none;
}
.listView.edit .items .appItem .switchActionContainer {
  opacity: 0;
}
.listView.edit .items .appItem .switchActionContainer .switchItemAction {
  cursor: default;
}
.listView.edit .items .appItem:hover .switchActionContainer {
  opacity: 1;
}
.listView.edit .items .appItem:hover .switchActionContainer .switchItemAction {
  cursor: pointer;
}

.changeListViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 128px);
  width: 620px;
  height: 256px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
}
.changeListViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.changeListViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.changeListViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.changeListViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.changeListViewDialog .viewEditField .field {
  flex: 1;
}
.changeListViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.changeListViewDialog .viewEditField.icons {
  height: 60px;
}
.changeListViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.changeListViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.listView .appLink,
.listView .appNote,
.listView .appDocument {
  height: 24px;
  line-height: 24px;
  margin: 4px 0;
  color: #666;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.listView {
  padding: 8px;
}
.listView .listViewStatusGroup .appItem.appTask {
  max-width: 33%;
}
.listView .listViewTitle {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.listView .listViewTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.listView .listViewTitle .icon {
  width: 32px;
  height: 32px;
  margin-right: 4px;
}
.listView .listViewTitle .icon.app-link {
  background: url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 85%;
}
.listView .listViewTitle .icon.note {
  background: url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 85%;
}
.listView .listViewTitle .icon.document {
  background: url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 85%;
}
.listView .listViewTitle .icon.custom {
  background: transparent center no-repeat;
  background-size: 85%;
}
.listView .listViewTitle.edit {
  cursor: pointer;
}
.listView input {
  min-width: 300px;
  width: calc(100% - 32px);
  background-color: transparent;
  margin-left: -8px;
  outline: solid 2px #BBB;
  line-height: 24px;
  height: 24px;
}

.newListViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 130px);
  width: 610px;
  height: 260px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.newListViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.newListViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.newListViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.newListViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.newListViewDialog .viewEditField .field {
  flex: 1;
}
.newListViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.newListViewDialog .viewEditField.icons {
  height: 60px;
}
.newListViewDialog .itemTypeTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
  margin-right: 8px;
}
.newListViewDialog .itemTypeTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newListViewDialog .itemTypeTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newListViewDialog .itemTypeTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newListViewDialog .itemTypeListContainer {
  position: relative;
}
.newListViewDialog .itemTypeListContainer .itemTypeList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.newListViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.newListViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow:hover {
  background: #eee;
}
.newListViewDialog .itemTypeListContainer .itemTypeList.open {
  display: initial;
}
.newListViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.newListViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.newCardViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 130px);
  width: 620px;
  height: 260px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.newCardViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.newCardViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.newCardViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.newCardViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.newCardViewDialog .viewEditField .field {
  flex: 1;
}
.newCardViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.newCardViewDialog .viewEditField.icons {
  height: 60px;
}
.newCardViewDialog .itemTypeTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
  margin-right: 8px;
}
.newCardViewDialog .itemTypeTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newCardViewDialog .itemTypeTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newCardViewDialog .itemTypeTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newCardViewDialog .itemTypeListContainer {
  position: relative;
}
.newCardViewDialog .itemTypeListContainer .itemTypeList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.newCardViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.newCardViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow:hover {
  background: #eee;
}
.newCardViewDialog .itemTypeListContainer .itemTypeList.open {
  display: initial;
}
.newCardViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.newCardViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.cardActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.cardView .cardViewTitle.edit {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.cardView .cardViewTitle.edit .title {
  line-height: 32px;
  cursor: pointer;
}
.cardView .cardViewTitle.edit .actionButton {
  margin-left: 8px;
}
.cardView.edit .items .appItem {
  width: 160px;
  height: 160px;
  line-height: 24px;
  margin: 4px 8px;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
.cardView.edit .items .appItem .linkUrl {
  color: #666;
}

.changeCardViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 128px);
  width: 620px;
  height: 256px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
}
.changeCardViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.changeCardViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.changeCardViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.changeCardViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.changeCardViewDialog .viewEditField .field {
  flex: 1;
}
.changeCardViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.changeCardViewDialog .viewEditField.icons {
  height: 60px;
}
.changeCardViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.changeCardViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.sorterChooser {
  display: flex;
  flex-direction: row;
  margin: 4px 0 12px 0;
}
.sorterChooser .item {
  margin: 0 4px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 3px;
}
.sorterChooser .item.active {
  background-color: #333;
  color: #fff;
  cursor: default;
}

.cardView .cardItems {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cardView .appLink,
.cardView .appCanvas,
.cardView .appNote {
  width: 160px;
  height: 160px;
  line-height: 24px;
  margin: 4px 8px;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
.cardView .appLink .linkContent,
.cardView .appCanvas .linkContent,
.cardView .appNote .linkContent {
  align-items: center;
  justify-content: center;
}
.cardView .appLink .linkContent .linkUrl,
.cardView .appCanvas .linkContent .linkUrl,
.cardView .appNote .linkContent .linkUrl {
  color: #333;
}
.cardView .appLink .dataLinksViewer,
.cardView .appCanvas .dataLinksViewer,
.cardView .appNote .dataLinksViewer {
  height: calc(100%);
  background-position-y: 2px;
}
.cardView .appLink .dataLinksViewer .manyLinks,
.cardView .appCanvas .dataLinksViewer .manyLinks,
.cardView .appNote .dataLinksViewer .manyLinks {
  padding-right: 2px;
  position: absolute;
  margin-left: -12px;
}
.cardView .appLink:hover,
.cardView .appCanvas:hover,
.cardView .appNote:hover {
  background-color: #347B98;
  color: #ffffff;
}
.cardView .appLink:hover .noteUrl,
.cardView .appCanvas:hover .noteUrl,
.cardView .appNote:hover .noteUrl {
  color: #ffffff;
}
.appLink.obsoleted,
.appCanvas.obsoleted,
.appNote.obsoleted {
  text-decoration: line-through;
  opacity: 0.5;
}
.appLink.readOnly,
.appCanvas.readOnly,
.appNote.readOnly {
  background-image: url(/a7b0b0b2b0b18c751316.svg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 32px;
}
.appLink.readOnly:hover,
.appCanvas.readOnly:hover,
.appNote.readOnly:hover {
  background-image: url(/0684c68cd69c5ab7f28a.svg);
}

.cardView {
  padding: 8px;
}
.cardView .cardViewTitle {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.cardView .cardViewTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.cardView .cardViewTitle .icon {
  width: 32px;
  height: 32px;
  margin-right: 4px;
}
.cardView .cardViewTitle .icon.app-link {
  background: url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 85%;
}
.cardView .cardViewTitle .icon.note {
  background: url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 85%;
}
.cardView .cardViewTitle .icon.document {
  background: url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 85%;
}
.cardView .cardViewTitle .icon.canvas {
  background: url(/970f2c71a45d6bb1260e.svg) center no-repeat;
  background-size: 85%;
}
.cardView .cardViewTitle .icon.custom {
  background: transparent center no-repeat;
  background-size: 85%;
}
.cardView .cardViewTitle.edit {
  cursor: pointer;
}
.cardView input {
  min-width: 140px;
  width: calc(100% - 16px);
  margin-left: 0px;
  outline: solid 2px #BBB;
  line-height: 24px;
  height: 24px;
}

.groupEditDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 240px);
  top: calc(50% - 120px);
  width: 480px;
  height: 240px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.groupEditDialog .groupEditorActions {
  display: flex;
  flex-direction: row;
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}
.groupEditDialog .groupEditorActions .dialogTitle {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  flex: 1;
}
.groupEditDialog .groupEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.groupEditDialog .groupEditField .label {
  width: 100px;
  font-weight: bold;
}
.groupEditDialog .groupEditField .field {
  flex: 1;
}
.groupEditDialog .groupEditField .field input {
  width: calc(100% - 8px);
}
.groupEditDialog .groupEditorSpaceBetween {
  flex: 1;
}
.groupEditDialog .groupEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.groupedViewActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.switchActionContainer {
  position: relative;
  z-index: 10;
}
.switchActionContainer .switchItemAction {
  width: 24px;
  height: 24px;
  cursor: default;
}
.switchActionContainer .switchItemAction.leftAction {
  background: transparent url(/787cfaec9bf2e69d97e1.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.upRightAction {
  background: transparent url(/f098bb779db9c6c98f05.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.bottomLeftAction {
  background: transparent url(/e2a2ed672bc31f3026e9.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.rightAction {
  background: transparent url(/7469ec8b8080dd97cad6.svg) center no-repeat;
  background-size: 85%;
  cursor: pointer;
}
.switchActionContainer .switchItemAction.leftAction:hover,
.switchActionContainer .switchItemAction.upRightAction:hover,
.switchActionContainer .switchItemAction.bottomLeftAction:hover,
.switchActionContainer .switchItemAction.rightAction:hover {
  background-size: 90%;
}

.groupView .groupViewTitle.edit {
  display: flex;
  flex-direction: row;
}
.groupView .groupViewTitle.edit .title {
  line-height: 32px;
  cursor: pointer;
}
.groupView .groupViewTitle.edit .actionButton {
  margin-left: 8px;
}
.groupView .groupViewTitle.edit .actionButton:hover {
  background-size: 90%;
  background-color: transparent;
}
.groupView.edit .groupedItems .appItem {
  cursor: pointer;
  justify-content: flex-start;
}
.groupView.edit .groupedItems .appItem .linkUrl {
  color: #666;
}
.groupView.edit .groupedItems .appItem .linkContent {
  flex: none;
}
.groupView.edit .groupedItems .appItem .switchActionContainer {
  opacity: 0;
}
.groupView.edit .groupedItems .appItem .switchActionContainer .switchItemAction {
  cursor: default;
}
.groupView.edit .groupedItems .appItem:hover .switchActionContainer {
  opacity: 1;
}
.groupView.edit .groupedItems .appItem:hover .switchActionContainer .switchItemAction {
  cursor: pointer;
}

.editorActionPanel {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.changeGroupedViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 166px);
  width: 620px;
  height: 332px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
}
.changeGroupedViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.changeGroupedViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.changeGroupedViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.changeGroupedViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.changeGroupedViewDialog .viewEditField .field {
  flex: 1;
}
.changeGroupedViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.changeGroupedViewDialog .viewEditField.icons {
  height: 60px;
}
.changeGroupedViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.changeGroupedViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.groupView {
  margin-bottom: 8px;
}
.groupView .groupViewTitle {
  font-size: 1.45em;
  font-weight: bold;
  margin: 8px 0;
  cursor: default;
  display: flex;
  flex-direction: row;
}
.groupView .groupViewTitle .actionButton.addAction {
  margin-left: 4px;
}
.groupView .groupViewTitle.clickable {
  cursor: pointer;
}
.groupView .groupedItems {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.groupView .groupedItems .appItem {
  display: flex;
  flex-direction: row;
  font-size: 1.05em;
}
.groupView .groupedItems4 .appItem {
  width: 25%;
  margin: 4px 0;
  height: 24px;
  line-height: 24px;
  overflow-x: hidden;
  cursor: default;
  color: #666;
}
.groupView .groupedItems1 .appItem {
  width: 100%;
  margin: 4px 0;
  height: 24px;
  line-height: 24px;
  overflow-x: hidden;
  color: #666;
  cursor: default;
}
.groupView .groupedItems2 .appItem {
  width: 50%;
  margin: 4px 0;
  height: 24px;
  line-height: 24px;
  overflow-x: hidden;
  color: #666;
  cursor: default;
}
.groupView .groupedItems3 .appItem {
  width: 33%;
  margin: 4px 0;
  height: 24px;
  line-height: 24px;
  overflow-x: hidden;
  color: #666;
  cursor: default;
}
.groupView .groupedItems5 .appItem {
  width: 20%;
  margin: 4px 0;
  height: 24px;
  line-height: 24px;
  overflow-x: hidden;
  color: #666;
  cursor: default;
}

.groupedView {
  padding: 8px;
}
.groupedView .groupTitle {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #092834;
}
.groupedView .groupTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.groupedView .groupTitle .icon {
  width: 32px;
  height: 32px;
  margin-right: 4px;
}
.groupedView .groupTitle .icon.app-link {
  background: url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 85%;
}
.groupedView .groupTitle .icon.note {
  background: url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 85%;
}
.groupedView .groupTitle .icon.document {
  background: url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 85%;
}
.groupedView .groupTitle .icon.custom {
  background: transparent center no-repeat;
  background-size: 85%;
}
.groupedView .groupTitle.edit {
  cursor: pointer;
}
.groupedView input {
  min-width: 300px;
  width: calc(100% - 32px);
  background-color: transparent;
  margin-left: 2px;
  outline: solid 2px #BBB;
  line-height: 20px;
  height: 20px;
  margin-top: 2px;
  padding-left: 2px;
}
.groupedView .groupViewTitle input {
  line-height: 28px;
  height: 28px;
  padding-left: 4px;
}

.newGroupedViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 150px);
  width: 620px;
  height: 300px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.newGroupedViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.newGroupedViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.newGroupedViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.newGroupedViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.newGroupedViewDialog .viewEditField .field {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.newGroupedViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.newGroupedViewDialog .viewEditField.icons {
  height: 60px;
}
.newGroupedViewDialog .itemTypeTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
  margin-right: 8px;
}
.newGroupedViewDialog .itemTypeTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newGroupedViewDialog .itemTypeTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newGroupedViewDialog .itemTypeTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newGroupedViewDialog .itemTypeListContainer {
  position: relative;
}
.newGroupedViewDialog .itemTypeListContainer .itemTypeList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.newGroupedViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.newGroupedViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow:hover {
  background: #eee;
}
.newGroupedViewDialog .itemTypeListContainer .itemTypeList.open {
  display: initial;
}
.newGroupedViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.newGroupedViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.newBoardViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 182px);
  width: 620px;
  height: 364px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.newBoardViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.newBoardViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.newBoardViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.newBoardViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.newBoardViewDialog .viewEditField .field {
  flex: 1;
}
.newBoardViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.newBoardViewDialog .viewEditField.icons {
  height: 60px;
}
.newBoardViewDialog .itemTypeTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
}
.newBoardViewDialog .itemTypeTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newBoardViewDialog .itemTypeTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newBoardViewDialog .itemTypeTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.newBoardViewDialog .itemTypeListContainer {
  position: relative;
}
.newBoardViewDialog .itemTypeListContainer .itemTypeList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.newBoardViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.newBoardViewDialog .itemTypeListContainer .itemTypeList .itemTypeRow:hover {
  background: #eee;
}
.newBoardViewDialog .itemTypeListContainer .itemTypeList.open {
  display: initial;
}
.newBoardViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.newBoardViewDialog .dialogErrorText {
  min-height: 28px;
  line-height: 28px;
  margin: 2px 0;
  color: #C21460;
}
.newBoardViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.columnRenamingDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 240px);
  top: calc(50% - 130px);
  width: 480px;
  height: 260px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.columnRenamingDialog .title {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
}
.columnRenamingDialog .renameField {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 4px 0;
  height: 32px;
  line-height: 32px;
}
.columnRenamingDialog .renameField .label {
  font-weight: bold;
  margin-right: 8px;
}
.columnRenamingDialog .renameField .field {
  flex: 1;
}
.columnRenamingDialog .renameField .field input {
  width: calc(100% - 4px);
  height: 28px;
}
.columnRenamingDialog .spaceBetween {
  flex: 1;
}
.columnRenamingDialog .actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.boardActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.boardView .boardViewTitle.edit {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.boardView .boardViewTitle.edit .title {
  line-height: 32px;
  cursor: pointer;
}
.boardView .boardViewTitle.edit .actionButton {
  margin-left: 8px;
}
.boardView.edit .items .appItem {
  flex: 1;
  min-height: 32px;
  line-height: 24px;
  margin: 4px 8px;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
.boardView.edit .items .appItem .linkUrl {
  color: #666;
}
.boardView.edit .statusColumn .statusTitle {
  cursor: pointer;
}

.changeBoardViewDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 310px);
  top: calc(50% - 162px);
  width: 620px;
  height: 324px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  border-radius: 3px;
}
.changeBoardViewDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.changeBoardViewDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.changeBoardViewDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.changeBoardViewDialog .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.changeBoardViewDialog .viewEditField .field {
  flex: 1;
}
.changeBoardViewDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.changeBoardViewDialog .viewEditField.icons {
  height: 60px;
}
.changeBoardViewDialog .viewEditorSpaceBetween {
  flex: 1;
}
.changeBoardViewDialog .dialogErrorText {
  min-height: 28px;
  line-height: 28px;
  margin: 2px 0;
  color: #C21460;
}
.changeBoardViewDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.boardView .statusColumn {
  flex: 1;
  align-items: stretch;
}
.boardView .statusColumn .statusTitle {
  margin-bottom: 8px;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
}
.boardView .boardItems {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.boardView .boardItems .statusColumn {
  padding: 0 4px 200px 4px;
}
.boardView .boardItems.columnCount2 .statusColumn {
  max-width: 50%;
}
.boardView .boardItems.columnCount3 .statusColumn {
  max-width: 33%;
}
.boardView .boardItems.columnCount4 .statusColumn {
  max-width: 25%;
}
.boardView .boardItems.columnCount5 .statusColumn {
  max-width: 20%;
}
.boardView .boardItems.columnCount6 .statusColumn {
  max-width: 16.6%;
}
.boardView .boardItems.columnCount7 .statusColumn {
  max-width: 14.2%;
}
.boardView .boardItems.columnCount8 .statusColumn {
  max-width: 12.5%;
}
.boardView .boardItems.columnCount9 .statusColumn {
  max-width: 11.1%;
}
.boardView .boardItems.columnCount10 .statusColumn {
  max-width: 10%;
}
.boardView .appLink,
.boardView .appCanvas,
.boardView .appNote,
.boardView .appTask {
  flex: 1;
  min-height: 32px;
  line-height: 24px;
  margin: 4px 8px;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
.boardView .appLink .linkContent,
.boardView .appCanvas .linkContent,
.boardView .appNote .linkContent,
.boardView .appTask .linkContent {
  align-items: center;
  justify-content: center;
}
.boardView .appLink .linkContent .linkUrl,
.boardView .appCanvas .linkContent .linkUrl,
.boardView .appNote .linkContent .linkUrl,
.boardView .appTask .linkContent .linkUrl {
  color: #333;
}

.boardView {
  padding: 8px;
}
.boardView .boardViewTitle {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.boardView .boardViewTitle .titleItself {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  padding: 4px 24px;
  border-radius: 0 0 8px 8px;
  min-width: 320px;
  justify-content: center;
  box-shadow: 4px 4px 4px 0 rgba(50, 50, 50, 0.6);
}
.boardView .boardViewTitle .icon {
  width: 32px;
  height: 32px;
  margin-right: 4px;
}
.boardView .boardViewTitle .icon.app-link {
  background: url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle .icon.note {
  background: url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle .icon.document {
  background: url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle .icon.canvas {
  background: url(/970f2c71a45d6bb1260e.svg) center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle .icon.task {
  background: url(/029444b6d64d48407117.svg) center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle .icon.custom {
  background: transparent center no-repeat;
  background-size: 85%;
}
.boardView .boardViewTitle.edit {
  cursor: pointer;
}
.boardView input {
  min-width: 300px;
  background-color: transparent;
  outline: solid 2px #BBB;
  line-height: 24px;
  height: 24px;
  width: calc(100% - 12px);
  margin: 16px 0;
}

.newSequenceDialog {
  position: fixed;
  background: #fff;
  left: calc(50% - 300px);
  top: calc(50% - 104px);
  width: 600px;
  height: 208px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.newSequenceDialog .dialogTitleAndClose {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.newSequenceDialog .dialogTitleAndClose .title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
.newSequenceDialog .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.newSequenceDialog .viewEditField .label {
  width: 130px;
  font-weight: bold;
}
.newSequenceDialog .viewEditField .field {
  flex: 1;
}
.newSequenceDialog .viewEditField .field input {
  width: calc(100% - 8px);
}
.newSequenceDialog .viewEditorSpaceBetween {
  flex: 1;
}
.newSequenceDialog .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.viewLinkEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.viewLinkEditor .viewLinkEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.viewLinkEditor .viewLinkEditField .label {
  width: 100px;
  font-weight: bold;
}
.viewLinkEditor .viewLinkEditField .buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex: 1;
}
.viewLinkEditor .viewLinkEditField .field {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.viewLinkEditor .viewLinkEditField .field .viewTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
}
.viewLinkEditor .viewLinkEditField .field .viewTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .viewLinkEditField .field .viewTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .viewLinkEditField .field .viewTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .viewLinkEditField .field .viewListContainer {
  position: relative;
}
.viewLinkEditor .viewLinkEditField .field .viewList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.viewLinkEditor .viewLinkEditField .field .viewList .foundView {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.viewLinkEditor .viewLinkEditField .field .viewList .foundView:hover {
  background: #eee;
}
.viewLinkEditor .viewLinkEditField .field .viewList.open {
  display: initial;
}
.viewLinkEditor .viewLinkEditField .field .viewList.open input {
  width: calc(100% - 4px);
  height: 28px;
  line-height: 28px;
  margin-bottom: 4px;
}
.viewLinkEditor .newViewArea {
  display: flex;
  flex-direction: column;
  border-top: solid 1px #eee;
  padding-top: 8px;
}
.viewLinkEditor .newViewArea .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 2px 4px;
}
.viewLinkEditor .newViewArea .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.viewLinkEditor .newViewArea .viewEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 32px;
}
.viewLinkEditor .newViewArea .viewEditField {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
  margin: 4px 4px;
}
.viewLinkEditor .newViewArea .viewEditField .label {
  width: 230px;
  font-weight: bold;
}
.viewLinkEditor .newViewArea .viewEditField .field {
  flex: 1;
}
.viewLinkEditor .newViewArea .viewEditField .field input {
  width: calc(100% - 8px);
}
.viewLinkEditor .newViewArea .itemTypeTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
  margin-right: 8px;
}
.viewLinkEditor .newViewArea .itemTypeTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .newViewArea .itemTypeTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .newViewArea .itemTypeTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.viewLinkEditor .newViewArea .itemTypeListContainer {
  position: relative;
}
.viewLinkEditor .newViewArea .itemTypeListContainer .itemTypeList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.viewLinkEditor .newViewArea .itemTypeListContainer .itemTypeList .itemTypeRow {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.viewLinkEditor .newViewArea .itemTypeListContainer .itemTypeList .itemTypeRow:hover {
  background: #eee;
}
.viewLinkEditor .newViewArea .itemTypeListContainer .itemTypeList.open {
  display: initial;
}
.viewLinkEditor .viewLinkEditActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.viewLinkEditor .viewLinkEditorSpaceBetween {
  flex: 1;
}

.dataLinksViewer.singleLink {
  width: 24px;
  height: 24px;
  background: transparent url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 70%;
  cursor: pointer;
}
.dataLinksViewer.singleLink .followLink {
  width: 100%;
  height: 100%;
}
.manyLinks {
  font-size: 11pt;
  cursor: pointer;
  padding-right: 2px;
}
.dataLinksViewer.singleLink:hover,
.manyLinks:hover {
  opacity: 0.5;
}

.dataLinksPopupWindow {
  position: fixed;
  right: 8px;
  min-height: 240px;
  max-height: 40%;
  top: 42px;
  z-index: 20;
  background-color: #fff;
  border: solid 1px #eee;
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.dataLinksPopupWindow .actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.dataLinksPopupWindow .list {
  padding: 4px 8px;
}
.dataLinksPopupWindow .list .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dataLinksPopupWindow .list .dataLink {
  height: 32px;
  line-height: 32px;
  margin: 2px 0;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
.dataLinksPopupWindow .list .dataLink .linkTitle {
  padding-left: 8px;
  flex: 1;
}
.dataLinksPopupWindow .list .dataLink .linkTitle:hover {
  background-color: #3E94B6;
  color: #FFFFFF;
  flex: 1;
}
.dataLinksPopupWindow .addDataLink,
.dataLinksPopupWindow .editDataLink {
  margin-top: 4px;
  border-top: solid 1px #347B98;
  padding-top: 4px;
}
.dataLinksPopupWindow .addDataLink .field,
.dataLinksPopupWindow .editDataLink .field {
  margin: 4px 0;
  height: 28px;
}
.dataLinksPopupWindow .addDataLink .field input,
.dataLinksPopupWindow .editDataLink .field input {
  width: calc(100% - 8px);
  height: 28px;
  line-height: 28px;
}
.dataLinksPopupWindow .addDataLink .hint,
.dataLinksPopupWindow .editDataLink .hint {
  margin-top: 8px;
  font-size: 0.85em;
}

.popupMenuList {
  position: fixed;
  min-width: 220px;
  background: white;
  border: solid 1px #eeeeee;
  display: none;
  -webkit-box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
  -moz-box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
  box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
  z-index: 100;
}
.popupMenuList .popupAction {
  display: flex;
  height: 34px;
  line-height: 34px;
  margin: 4px 0;
  cursor: pointer;
  padding: 0 4px 0 0;
  color: #333;
}
.popupMenuList .popupAction .actionButton:hover {
  background-color: transparent;
}
.popupMenuList .popupAction .actionTitleAndIcon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-right: 4px;
}
.popupMenuList .popupAction .actionTitle {
  flex: 1;
  white-space: nowrap;
}
.popupMenuList .popupAction .actionShortcut {
  font-weight: bold;
  margin-right: 4px;
}
.popupMenuList .popupAction .submenu {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent url(/2a6c78e125607006985b.svg) center no-repeat;
  background-size: 70%;
}
.popupMenuList .popupAction .submenu .innerMenu {
  position: absolute;
  display: none;
  background: #fff;
  min-width: 200px;
  margin-left: 36px;
  margin-top: -4px;
  max-height: calc(232px);
  overflow-y: auto;
  -webkit-box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
  -moz-box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
  box-shadow: 6px 0px 10px 0 rgba(50, 50, 50, 0.3);
}
.popupMenuList .popupAction .submenu.open {
  background: transparent url(/1fb5d5eb24cc9cffb7c2.svg) center no-repeat;
  background-size: 70%;
}
.popupMenuList .popupAction .submenu.open .innerMenu {
  display: block;
}
.popupMenuList .popupAction:not(.inline):hover {
  background: #347B98;
  color: #ffffff;
}
.popupMenuList .popupAction:not(.inline):hover .dvAction {
  opacity: 0.5;
}
.popupMenuList .popupAction:not(.inline):hover .actionTitle {
  opacity: 0.7;
}
.popupMenuList .popupAction.inline {
  justify-content: space-between;
  padding: 4px 0;
}
.popupMenuList.visible {
  display: block;
}

.popupActions {
  width: 32px;
  padding-right: 4px;
  outline: none;
}
.popupActions .popupMenuButton {
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: url(/22d6ab9bf93112fdf864.svg) center no-repeat;
  background-size: 70%;
}
.popupActions .popupMenuButton:hover {
  opacity: 0.5;
}

.dataLinksManager {
  position: fixed;
  background: #fff;
  left: calc(50% - 320px);
  top: calc(50% - 140px);
  width: 640px;
  height: 280px;
  box-sizing: border-box;
  border: solid 1px #eee;
  padding: 4px 4px 4px 8px;
  display: flex;
  flex-direction: column;
  z-index: 15;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
}
.dataLinksManager .topPanel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.dataLinksManager .topPanel .title {
  flex: 1;
  text-align: center;
}
.dataLinksManager .linksList {
  flex: 1;
  overflow-y: auto;
}
.dataLinksManager .linksList .singleDataLink {
  line-height: 32px;
  height: 32px;
  margin: 2px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.dataLinksManager .linksList .singleDataLink .title {
  flex: 1;
}

.viewDataLinks {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.viewDataLinks .link {
  min-width: 32px;
  min-height: 32px;
  margin: 4px 0;
  cursor: pointer;
}
.viewDataLinks .link.LINK {
  background: transparent url(/a44a8ebaee4f896dabae.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .link.NOTE {
  background: transparent url(/32ce37d216b0b2df0384.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .link.DOCUMENT {
  background: transparent url(/4a1d6c00e52eee4c0045.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .link.TASK {
  background: transparent url(/029444b6d64d48407117.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .link.CANVAS {
  background: transparent url(/970f2c71a45d6bb1260e.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .link.BOARD_LAYER {
  background: transparent url(/06b45a808dee6a4f5af6.svg) center no-repeat;
  background-size: 80%;
}
.viewDataLinks .actionButton.moreAction.readOnly {
  opacity: 0;
}
.viewDataLinks .link {
  opacity: 0.5;
}
.viewDataLinks:hover .actionButton.moreAction.readOnly {
  opacity: 1;
}

.userForm {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
}
.userForm .userFormField {
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  margin: 8px 0;
}
.userForm .userFormField .label {
  font-weight: bold;
  width: 160px;
  margin-right: 8px;
  font-size: 1.05em;
}
.userForm .userFormField .field {
  flex: 1;
}
.userForm .userFormField .field input {
  height: 28px;
  border: solid 2px #D9D9D9;
  background-color: #FFFFFF;
  width: calc(100% - 16px);
  padding: 0 8px;
  border-radius: 3px;
}
.userForm .userFormField .field input:-webkit-autofill,
.userForm .userFormField .field input:-webkit-autofill:hover,
.userForm .userFormField .field input:-webkit-autofill:focus,
.userForm .userFormField .field textarea:-webkit-autofill,
.userForm .userFormField .field textarea:-webkit-autofill:hover,
.userForm .userFormField .field textarea:-webkit-autofill:focus,
.userForm .userFormField .field select:-webkit-autofill,
.userForm .userFormField .field select:-webkit-autofill:hover,
.userForm .userFormField .field select:-webkit-autofill:focus {
  background-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s;
}
.userForm .message {
  margin: 8px 0;
  text-align: center;
  color: darkgreen;
}

.userInfo {
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
}
.userInfo .userInfoField {
  height: 28px;
  line-height: 28px;
  margin: 8px 0;
  display: flex;
  flex-direction: row;
}
.userInfo .userInfoField input {
  width: calc(100% - 8px);
}
.userInfo .userInfoField .label {
  font-weight: bold;
  margin-right: 4px;
  min-width: 160px;
}
.userInfo .userInfoField .value {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.userInfo .userInfoField .value .titleAndButton {
  display: flex;
  flex-direction: row;
}
.userInfo .userInfoField .value .titleAndButton .actionButton.closeAction {
  background-color: #f8f8f8;
  border-left: solid 1px #eee;
}
.userInfo .userInfoField .value .titleAndButton .actionButton.closeAction.disabled {
  display: none;
}
.userInfo .userInfoField .value .viewTitle {
  flex: 1;
  cursor: pointer;
  background: #f8f8f8 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
  padding: 0 4px;
}
.userInfo .userInfoField .value .viewTitle:hover {
  background: #f0f0f0 url(/afcc349a82b41efcea9d.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.userInfo .userInfoField .value .viewTitle.open {
  background: #f8f8f8 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.userInfo .userInfoField .value .viewTitle.open:hover {
  background: #f0f0f0 url(/44cd016d79f51edf3b93.svg) calc(100% - 4px) center no-repeat;
  background-size: 20px;
}
.userInfo .userInfoField .value .viewListContainer {
  position: relative;
}
.userInfo .userInfoField .value .viewListContainer .viewList {
  display: none;
  width: calc(100% - 10px);
  padding: 4px;
  background-color: #fff;
  border: solid 1px #eee;
  position: absolute;
  border-radius: 0 0 3px 3px;
  outline: none;
  max-height: 160px;
  overflow-y: auto;
}
.userInfo .userInfoField .value .viewListContainer .viewList .view {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.userInfo .userInfoField .value .viewListContainer .viewList .view:hover {
  background: #eee;
}
.userInfo .userInfoField .value .viewListContainer .viewList .view.current {
  background: #666;
  color: #fff;
}
.userInfo .userInfoField .value .viewListContainer .viewList.open {
  display: initial;
}
.userInfo .userInfoActions {
  margin-top: 16px;
  margin-left: -8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.userInfo .userInfoActions button {
  margin-right: 16px;
}

.userPage {
  width: 640px;
  margin: 8px calc(50% - 320px);
}
.userPage .title {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 16px;
}
.userPage .actions {
  margin: 4px 0 16px 0;
}
.userPage .tabs {
  height: 33px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  border-bottom: solid 1px #092834;
}
.userPage .tabs .tab {
  padding: 0 16px 0 24px;
  background-color: #D9D9D9;
  border-radius: 12px 0 0 0;
  cursor: pointer;
  margin-right: 4px;
}
.userPage .tabs .tab.active {
  cursor: default;
  background-color: #347B98;
  color: #fff;
}

.sequenceEditor {
  position: fixed;
  left: 28%;
  width: 44%;
  top: 28%;
  height: 44%;
  background: #fff;
  border: solid 1px #eee;
  z-index: 20;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 1px 1px 6px 0 rgba(50, 50, 50, 0.6);
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 8px;
  border-radius: 3px;
}
.sequenceEditor .titleAndClose {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
}
.sequenceEditor .titleAndClose .title {
  flex: 1;
  text-align: center;
  font-size: 1.05em;
  font-weight: bold;
}
.sequenceEditor .list {
  overflow-y: auto;
}
.sequenceEditor .sequenceItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  margin: 4px 4px 4px 0;
}
.sequenceEditor .sequenceItem input {
  flex: 1;
}
.sequenceEditor .sequenceItem .valueAndAction {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.sequenceEditor .sequenceItem .valueAndAction .value {
  margin: 0 4px;
  width: 40px;
  text-align: right;
}
.sequenceEditor .sequenceItem .valueAndAction .viewName {
  width: 144px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
}
.sequenceEditor .sequenceItem .actionButton {
  margin-left: 4px;
  opacity: 0;
}
.sequenceEditor .sequenceItem:hover .actionButton {
  opacity: 1;
}

.userNavigation {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
}
.userNavigation .profile {
  width: 48px;
  height: 32px;
  background-color: #FFFFFF;
  cursor: pointer;
  border-radius: 8px;
  line-height: 32px;
  text-align: center;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  -moz-box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
  box-shadow: 3px 3px 3px 0 rgba(50, 50, 50, 0.6);
}
.userNavigation .menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  background-color: #ffffff;
  padding: 4px;
  border: solid 1px #eee;
  border-radius: 0 0 3px 3px;
  text-align: right;
  outline: none;
}
.userNavigation .menu .action {
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  cursor: pointer;
}
.userNavigation .menu .userInfo {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  border-bottom: solid 1px #eee;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.userNavigation .menu .userInfo div {
  height: 28px;
  line-height: 28px;
  font-weight: bold;
}
.userNavigation .menu .userInfo div.info {
  padding: 0 8px;
}
.userNavigation .menu .userInfo div.email {
  font-size: 0.9em;
  height: 24px;
  line-height: 24px;
  font-weight: normal;
}
.userNavigation .menu .userInfo .action {
  margin-top: 4px;
}
.userNavigation .menu .action:hover {
  background-color: #3E94B6;
  color: #ffffff;
}
.userNavigation .menu.hidden {
  display: none;
}

body {
  background-color: #EdEdEd;
}
.mainApp {
  font-family: "Manrope", "Arial", SansSerif, serif;
}
.mainApp input {
  padding: 0 8px;
  box-sizing: border-box;
  border: solid 1px #eee;
  border-radius: 3px;
  height: 30px;
}
.mainApp input.number {
  padding: 0;
  text-align: right;
}
.mainApp input::-webkit-outer-spin-button,
.mainApp input::-webkit-inner-spin-button {
  margin-left: 8px;
}

.mainApp .appView {
  width: 92%;
  margin: 8px calc(2.5%) 8px calc(2.5%);
}