/* Copyright 2013-present Software Response LLC */

:root {
}

/* TOOLS */
.tools-wrapper {
     display:inline-flex;
     flex-direction:row;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 4px;
     max-width:100%;
     width:100%;
     min-width:100%;
     width:max-content;
     flex-shrink:0;
     flex-grow:1;
     flex-wrap:wrap;
     overflow:visible;
}
.tools-controls {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     height: auto;
     width: 100%;
     min-width:100%;
     gap: 8px;
     text-align: left;
     overflow: visible;
     flex:0;
}
.tools-controls-buttons {
     flex: 1;
     width: auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: flex-end;
     gap:4px;
}
.tools-controls-label {
     display: inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
     min-width: 200px;
     font-size: var(--font-size-20);
     padding: 0 8px 0 0 ;
     font-weight: bold;
     line-height: 40px;
     min-height: 40px;
     height: auto;
     width: auto;
     flex: 0 1 auto;
     padding:0 4px;
     gap:4px;
}
.tools-content {
     width: 100%;
     height: calc(100% - 50px);
     flex-grow:1;
     flex-shrink: 0;
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items: flex-start;
     padding:var(--box-padding);
     min-width:300px;
     max-width:100%;
     flex-shrink:0;
     padding:0;
}
.tools-button {min-width: 40px;cursor:pointer;}

/* Calendar */
#calendar-controls,
#calendar-options,
#calendar-event-options {
     position: absolute;
     left: -240px;
     top: 0;
     width: 240px;
     max-width: 240px;
     height: 100%;
     transition: var(--transition);
     overflow: hidden;
     box-sizing: border-box;
     border: var(--primary-border);
     border-radius: var(--radius);
     background-color: var(--primary-back);
     color: var(--primary-text);
     z-index: 1;
}
#calendar-event-options,
#calendar-options {
     z-index: 2;
}
#calendar-event-options.active,
#calendar-options.active {
     left: 0;
}

#calendar-controls.active,
#calendar-event-options.active {
     left: 0;
}
.calendar-controls {
     width: 240px;
     overflow: hidden;
}
.calendar-controls-title {
     width: 100%;
     height: 30px;
     line-height: 30px;
     font-weight: bold;
     text-align: left;
     padding: 0 8px;
     background-color: var(--table-header-back);
     color: var(--table-header-color);
}
#calendar-controls-toggle {
     height: 30px;
     width: 30px;
     cursor: pointer;
     border-radius: var(--radius);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     background-image: url(../core/images/openmenu.png);
}
#calendar-controls-toggle.active {
     background-image: url(../core/images/closemenu.png);
}
#calendar-content {
     background-color:var(--box-back);
     color:var(--box-color);
     border:var(--box-border-bold);
     border-radius:var(--radius);
}
#calendar-select-move {
     min-width: 80px;
     padding: 0;
}
#calendar-select-prev {
     min-width: 49%;
     width: 49%;
     max-width: 49%;
     background-image: url(../core/images/grid-left.png);
}
#calendar-select-next {
     min-width: 49%;
     width: 49%;
     max-width: 49%;
     background-image: url(../core/images/right-black.png);
     border-left: var(--primary-border);
}
#calendar-settings {
     min-width: 40px;
     background-image: url(../core/images/settings-black.png);
}
.calendar-select-button,
.calendar-navigate-button {
     width: 60px;
     text-align: center;
     height: 25px;
     line-height: 25px;
}
.calendar-navigate-button {
     background-size: 70%;
     width: 30px;
}
#calendar-content {
     width: 100%;
     height: calc(100% - 50px);
     flex-grow:1;
     flex-shrink: 0;
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items: flex-start;
}
#calendar-content-list {
     transition: var(--transition);
     width: 0;
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     left: auto;
     background-color: var(--primary-back);
     color: var(--primary-text);
     border-left: var(--primary-border);
}
#calendar-content-list.active {
     width: calc(100% + 1px);
}
.calendar-view-row {
     height: 30px;
     line-height: 30px;
     font-size: 14px;
}
.calendar-view-row:hover {
     font-weight: 500;
}

#calendar-header,
#calendar-list-header,
.calendar-row {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
     border-bottom: var(--primary-border);
     font-size: var(--font-size);
     font-weight: bold;
     overflow: hidden;
     line-height: 24px;
     width:100%;
}
.calendar-month > #calendar-header {
     font-size: 10px;
     border-top: var(--primary-border);
}
#calendar-header,
#calendar-list-header {
     background-color: var(--table-header-back);
     color: var(--table-header-color);
}
.calendar-day,
.calendar-column {
     flex: 1;
     text-align: center;
     line-height: 24px;
     border-left: var(--primary-border);
}
.calendar-column {
     flex: 1;
     padding: 0 4px;
}
.calendar-day-label {
     padding: 0 2px;
     border-radius: var(--radius);
     min-width: 20px;
     height: 20px;
     line-height: 20px;
     margin: 2px;
     float: right;
     font-size: var(--font-size-14);
}
.calendar-day-label.today {
     background-color: var(--button-standard-back);
     color: var(--button-standard-color);
}
#calendar-body {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     justify-content: flex-start;
     align-items: normal;
     overflow-y: auto;
}

.calendar-month {
     display: inline-flex;
     margin: 8px;
     height: calc((100% / 4) - 20px);
     width: calc((100% / 4) - 20px);
     /* max-width:300px;max-height:300px; */
     min-width: 260px;
     min-height: 220px;
     border: var(--primary-border);
     border-radius: var(--radius);
     flex-direction: column;
     justify-content: flex-start;
     align-items: normal;
}
.calendar-month-title {
     display: block;
     width: 100%;
     font-size: 14px;
     font-weight: bold;
     text-align: left;
     height: 24px;
     line-height: 24px;
     padding: 0 4px;
}
.calendar-week {
     flex: 1;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
     border-bottom: var(--primary-border);
     height: calc((100% - 30px) / 6);
}
.calendar-week:last-child {
     border-bottom: 0;
}
.calendar-day:last-child {
     border-right: 0;
}
.calendar-week-body {
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     top: 0;
     bottom: 0;
     display: block;
     height: 100%;
     max-height: 100%;
}
#calendar-days {
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     top: 0;
     bottom: 0;
     display: flex;
     flex-direction: row;
}
.calendar-hour {
     display: flex;
     height: 40px;
     width: 100%;
     display: block;
     overflow: visible;
     border-top: 1px solid #efefef;
}
.calendar-hour-text {
     position: absolute;
     width: 44px;
     text-align: center;
     top: -10px;
     left: 2px;
     height: 20px;
     line-height: 20px;
     font-size: 12px;
     border-radius: var(--radius);
}
#calendar-allday,
#calendar-hours {
     overflow: hidden;
     display: block;
     transition: var(--transition);
     width: 100%;
     flex: 0;
     overflow-y: scroll;
     height: 70px;
     min-height: 70px;
     max-height: calc(100% - 70px);
}
#calendar-allday {
     border-bottom: var(--primary-border);
}
#calendar-allday.active,
#calendar-hours.active {
     height: calc(100% - 70px);
}
#calendar-allday.collapse,
#calendar-hours.collapse {
     min-height: 0;
     height: 0;
     border-bottom: 0;
}

#calendar-allday,
#calendar-hours-body {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
}
#calendar-hours-body {
     position: absolute;
     left: 0;
     width: 100%;
     top: 0;
     right: 0; /*height:1920px;*/
     height: 960px;
}
.calendar-hour-text {
     background-color: #fff;
     border-radius: var(--radius);
     border: 1px solid #efefef;
}
.calendar-hour:nth-child(even) {
     background-color: rgb(239, 239, 239, 0.2);
}

#calendar-hours-indicator {
     left: 20px;
     width: calc(100% - 20px);
     position: absolute;
     top: 0px;
     height: 2px;
     background-color: #195aba;
     overflow: visible;
}

#calendar-hours-indicator::after {
     content: "";
     position: absolute;
     left: -2px;
     top: -6px;
     display: block;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: #195aba;
}

#calendar-allday-toggle {
     transition: var(--transition);
     opacity: 1;
     position: absolute;
     bottom: calc(100% - 80px);
     left: 5px;
     width: 40px;
     height: 20px;
     line-height: 20px;
     border: var(--primary-border);
     border-radius: var(--radius);
     background-image: url("../core/images/expand.png");
}
#calendar-allday-toggle.active {
     top: auto;
     bottom: 60px;
     background-image: url("../core/images/collapse.png");
}
#calendar-allday-toggle.collapse {
     opacity: 0;
     bottom: 100%;
}
.calendar-week-events {
     position: absolute;
     left: 50px;
     right: 0;
     top: 0;
     height: auto;
     bottom: 0;
     overflow: hidden;
}

.calendar-week .calendar-day,
.calendar-row .calendar-column {
     height: 100%;
}
#calendar-header > :first-child,
.calendar-week > :first-child {
     border-left: 0;
}
#calendar-list-header > :first-child,
.calendar-row > :first-child {
     border-left: 0;
}
#calendar-select-today::after {
     content: "Today";
}
#calendar-select-list::after {
     content: "List";
}
#calendar-select-list::after {
     content: "List";
}

#calendar-select-view {
     background-image: url(../core/images/list-drop.png);
     background-repeat: no-repeat;
     background-size: auto;
     background-position: center right;
     min-width: 90px;
     width: 90px;
     max-width: 90px;
     padding: 0 8px;
}
#calendar-select-view::after {
     display: block;
     width: 100%;
     height: 100%;
     text-align: left;
}
#calendar-select-view.calendar-select-month::after {
     content: "Month";
}
#calendar-select-view.calendar-select-day::after {
     content: "Day";
}
#calendar-select-view.calendar-select-week::after {
     content: "Week";
}
#calendar-select-view.calendar-select-year::after {
     content: "Year";
}

.calendar-select-button::after {
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     font-weight: bold;
     font-size: 12px;
     text-align: center;
}
.calendar-day-date {
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     min-width: 20px;
     line-height: 18px;
     padding: 0 4px;
     width: auto;
     font-size: 12px;
     border-radius: 2px;
     cursor: pointer;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-top-right-radius: 0;
     border: 1px solid transparent;
}
.calendar-day-date.today {
     background-color: var(--button-standard-back);
     color: var(--button-standard-color); /*border-radius:var(--radius);*/
}
.calendar-day-before {
     background-color: rgba(0, 0, 0, 0.02);
}
.calendar-day-selected {
     background-color: var(--primary-back-highlight);
}
.calendar-day-today {
     background-color: rgba(203, 224, 255, 0.3);
}
.calendar-day-outside {
     background-color: rgba(0, 0, 0, 0.05);
}
.calendar-day-highlight {
     background-color: var(--primary-back-highlight);
}
#calendar-list-back {
     width: 0;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 1;
     display: block;
     background-color: rgba(0, 0, 0, 0.2);
     transition: var(--transition);
}
#calendar-list-back.active {
     width: 100%;
}
#calendar-list {
     display: block;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     overflow-y: auto;
     z-index: 2;
     width: 0;
     height: 100%;
     transition: var(--transition);
     margin: 0;
     padding: 0;
     overflow: none;
     background-color: var(--primary-back);
     color: var(--primary-text);
     opacity: 0;
}
#calendar-list.active {
     display: block;
     width: 95%;
     border-left: var(--primary-border);
     overflow: auto;
     opacity: 1;
}
#calendar-list-title {
     font-size: 14px;
     font-weight: bold;
     overflow: hidden;
     padding: 0 10px 0 2px;
     height: 24px;
     line-height: 24px;
     background-color: var(--table-header-back);
     color: var(--table-header-color);
     border-bottom: var(--primary-border);
}
#calendar-list-content {
     width: 100%;
     display: block;
}

.calendar-list-color {
     position: relative;
     height: 24px;
     width: 8px;
     left: -4px;
     margin-right: 2px;
     display: inline-block;
}

.calendar-event {
     position: absolute;
     top: 20px;
     left: 0;
     font-size: 12px;
     height: 24px;
     cursor: pointer;
     line-height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-start;
     border: 1px solid transparent;
     border-radius: 4px;
     background: green;
     color: black;
     transition: var(--transition);
     opacity: 1;
}
#calendar-event-new {
     opacity: 0;
}
#calendar-event-new.active {
     opacity: 1;
}
.calendar-event-indicator {
     flex: 0 0;
     min-width: 6px;
     width: 6px;
     border-right: 1px solid transparent;
     height: 100%;
     margin-right: 2px;
}
.calendar-event-indicator.match {
     flex: 0 0;
     min-width: 2px;
     width: 2px;
     border-right: 0;
     height: 100%;
     margin-right: 2px;
}
.calendar-event-name {
     flex: 1;
     width: calc(100% - 40px);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
}
.calendar-event-left,
.calendar-event-right {
     flex: 0 0;
     height: 100%;
     font-size: 18px;
     line-height: 17px;
}
.calendar-event-left {
     min-width: 20px;
     width: 20px;
     height: 100%;
     margin-right: 2px;
     float: left;
}
.calendar-event-right {
     margin-left: 2px;
     min-width: 20px;
     width: 20px;
     height: 100%;
     float: right;
}

.calendar-event-left::after {
     content: "\2190";
}
.calendar-event-right::before {
     content: "\2192";
}

.calendar-controls-controls {
     width: 100%;
     padding: 8px;
     margin: 8px 0;
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: row;
     flex-wrap: wrap;
     background-color: var(--primary-back-sub);
     color: var(--primary-text);
     border-radius: var(--radius);
}
.calendar-event-label {
     width: 100%;
     text-align: left;
     padding: 0 2px 0 4px;
     font-size: var(--font-size);
     font-weight: bold;
     height: 30px;
     line-height: 30px;
     margin-top: 10px;
}
.calendar-color-icon,
.calendar-color-icon-input,
.calendar-color-icon-select {
     display: inline-block;
     width: 24px;
     height: 24px;
     min-width:24px;
     max-width:24px;
     padding: 0;
     margin-top: 2px;
     margin-right: 6px;
     background-image: none;
     border-radius: var(--radius);
     border: var(--primary-border);
}
.calendar-color-icon-select {
     width: 20px;
     height: 20px;
}

.calendar-color-icon.active {
     display: inline-block;
     background-image: url(../core/images/checkmark.png);
     background-repeat: no-repeat;
     background-size: 80%;
     border: var(--primary-border);
}
.calendar-color-icon.calendar-color-shared::before {
     content: "";
     position: absolute;
     right: -1px;
     bottom: -1px;
     top: auto;
     left: auto;
     width: 20px;
     height: 20px;
     /* border:var(--primary-border);border-right:0;border-bottom:0;border-top-left-radius:var(--radius); */
     border-radius: var(--radius);
     background-image: url(../core/images/shared.png);
     background-size: cover;
}
.calendar-event-value {
     width: 100%;
     text-align: left;
     padding: 0 2px;
     font-size: var(--font-size-14);
     line-height: 24px;
     display: row;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
}

.calendar-label {
     width: 100%;
     text-align: left;
     display:flex;
     flex-direction:row;
     align-items: center;
     justify-content: flex-start;
     gap:4;
     padding: 0 2px 0 4px;
     font-size: 14px;
     font-weight: bold;
     height: 30px;
     line-height: 30px;
     margin-top: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.calendar-label-text {
     display: inline-flex;
     flex-direction:row;
     align-items: center;
     justify-content: flex-start;
     width:auto;
     text-align: left;
     flex-grow:2;
}
.calendar-icon-shared {
     width:20px;height:20px;
     min-width:20px;
     max-width:20px;
     flex-grow:0;
     flex-shrink:0;
     background-image: url(../core/images/shared-black.png);
}
.calendar-input {
     display: inline-block;
     width: 100%;
     margin-top: 2px;
}
.calendar-edit {
     float: right;
     width: 20px;
     height: 30px;
     min-width:20px;
     max-width:20px;
     flex:0;
     background-image: url(../core/images/submenu-black.png);
     background-size: 90%;
     background-position: center;
     background-repeat: no-repeat;
}

.calendar-folder-title {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     font-weight: bold;
     font-size: 14px;
     text-align: left;
     line-height: 30px;
}
.calendar-folder-text {
     flex: 1;
     text-align: left;
     margin-left: 8px;
}
.calendar-folder-icon {
     flex: 0;
     width: 30px;
     height: 30px;
     min-width: 30px;
     max-width: 30px;
     float: right;
     background-position: center;
     background-size: 70%;
     background-image: url(../core/images/grid-collapse.png);
}
.calendar-folder-icon.active {
     background-image: url(../core/images/down-black.png);
}
.calendar-folder-content {
     height: auto;
     width: 100%;
}

@media (max-width: 600px) {
     .calendar-select-button {
          width: 40px;
     }
     .calendar-select-button:after {
          position: absolute;
          left: 0;
          right: 0;
          width: 100%;
          font-weight: bold;
          font-size: 12px;
          text-align: center;
     }
     .tools-controls {
          flex-direction: column;
     }
     .content-control-button {
          min-width: 40px;
     }
     #calendar-select-today::after {
          content: "T";
     }
     #calendar-select-list::after {
          content: "L";
     }
     .tools-controls-label {
          text-align: center;
     }
     #calendar-view-controls {
          top: 104px;
     }
     #calendar-select-view {
          min-width: 60px;
     }
     #calendar-select-view.calendar-select-month::after {
          content: "M";
     }
     #calendar-select-view.calendar-select-day::after {
          content: "D";
     }
     #calendar-select-view.calendar-select-week::after {
          content: "W";
     }
     #calendar-select-view.calendar-select-year::after {
          content: "Y";
     }

     #calendar-select-list {
          display: none;
          visibility: hidden;
          opacity: 0;
          width: 0;
          height: 0;
     }
}

@media print {
     .tools-controls-buttons {
          display: none;
          visibility: hidden;
          opacity: 0;
          width: 0;
          height: 0;
     }
}

/* NEWS */
#news-content-controls {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-start;
     flex-wrap: nowrap;
     height: auto;
     width: 100%;
     gap: 8px;
     text-align: left;
     overflow: visible;
     flex: 1 0 100%;
}
#news-content-actions {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     height: auto;
     gap: 4px;
     flex-grow: 2;
     min-height: 40px;
     overflow-x: auto;
     overflow-y: hidden;
     text-align: left;
     flex-shrink: 0;
}

.news-control-button {
     min-width:40px;
     max-width:40px;
     flex-grow:0;
     flex-shrink:0; 
     text-align:center;
     align-items:center;
     justify-content:center;
}
#news-button-view::after {
     display: block;
     width: 100%;
     height: 100%;
     text-align: center;
}

#news-button-view.view-published::after {
     content: "PU";
}
#news-button-view.view-archived::after {
     content: "AR";
}
#news-button-view.view-drafted::after {
     content: "DR";
}
#news-button-view.view-deleted::after {
     content: "DE";
}
#news-button-view.view-all::after {
     content: "ALL";
}
#news-content-selectors {
     display: inline-flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: start;
     flex-wrap: wrap;
     height: auto;
     gap: 4px;
     min-height: 40px;
     overflow-x: auto;
     overflow-y: hidden;
     text-align: left;
     flex:1 1 auto;
}
.news-selector-label {
     display:inline-block;
     font-weight:bold;
     font-size:var(--font-size-16);
     width:100px;
     min-width:100px;
     max-width:100px;
     height:40px;
     line-height:40px;
     text-align:right;
     padding:0 4px;
}
.news-selector-row {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: start;
     flex-wrap: nowrap;
     height: auto;
     gap:4px;
     min-height:40px;
     line-height:40px;
     width:100%;
     padding:2px;
     text-align: left;
     overflow: hidden;
     border-bottom:var(--secondary-border);
}
.news-selector-selectors {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     height: auto;
     gap:4px;
     min-height:40px;
     width:auto;
     padding:2px;
     text-align: left;
     overflow-x: auto;
     overflow-y: hidden;
}
.news-selector-separator {
     display: inline-block;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     height: auto;
     padding:0 2px;
     color: var(--primary-text);
     flex:0 0 auto;
}
.news-selector {
     cursor:pointer;
     display: inline-flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     font-weight: bold;
     padding:0 8px;
     text-align: center;
     min-width:80px;
     min-height: 30px;
     height:30px;
     width:auto;
     max-width:none;
     font-size:var(--font-size-14);
     border-radius:var(--radius);
     border: var(--button-standard-border);
}
.news-selector-reset {
     width:30px;
     min-width:30px;
     max-width:30px;
     background-size:70%;
     background-image: url(../core/images/clear.png);
}
.news-selector.selected {
     background-color: var(--primary-back-highlight);
     color: var(--primary-back-color);
}
#news-content-buttons {
     display:inline-flex;
     flex-grow:0;
     flex-shrink:0;
     flex-basis:auto;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 4px;
     justify-content: flex-start;
     align-items: start;
}
#news-articles {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: start;
     flex-wrap: wrap;
     gap: 8px;
     padding: 8px 0;
     width: 100%;
     text-align: left;
     overflow-y: auto;
}
#news-articles.news-article-list {
     flex-direction:row;
     justify-content: flex-start;
     align-items:start;
     flex-wrap:wrap;
}
.news-article {
     display: inline-flex;
     flex-direction: column;
     justify-content: flex-start;
     gap:8px;
     align-items: center;
     padding: 8px;
     width: 300px;
     height:auto;
     max-width:300px;
     max-height:400px;    
     min-width:300px;
     min-height:auto;
     background-color: var(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     border-radius: var(--radius);
     box-shadow: var(--box-shadow);
     cursor: pointer;
     overflow: visible;
     line-height: 30px;
     overflow: hidden;
     pointer-events: all;
     flex-grow:0;
}
.news-article.news-article-row {
     display:flex;
     flex-direction:row;
     align-items:start;
     width:100%;
     min-width:100%;
     max-width:100%;
     justify-content: flex-start;
     max-height: none;
     min-height:auto;
}
.news-article.news-priority::after {
     content:"";
     position:absolute;left:-12px;top:-20px;
     width:24px;height:40px;
     background-color:red;
     rotate: 45deg;
     transform:rotateX(45deg);
}
.news-article-title {
     display: inline-block;
     font-weight: bold;
     font-size: var(--font-size-16);
     width: 100%;
     text-align: left;
     padding: 0 4px;
     font-size:var(--font-size-18);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     height:30px;line-height:30px;min-height:30px;max-height:30px;
     flex-grow:0;
}
.news-article-edit {
     width:var(--button-height);
     height:var(--button-height);
     position:absolute;
     right:8px;top:8px;
     background-image: url(../core/images/grid-edit.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
     cursor: pointer;
     z-index: 1;
     opacity: 0;
     transition: var(--transition);
     pointer-events: all;
}
.news-article:hover .news-article-edit {
     opacity: 1;
}  
.news-image-preview {
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     flex-wrap:nowrap;
     background-size:cover;
     background-position:center center;
     background-repeat:no-repeat;
     width: 100%;
     height: 100%;
     border-radius:var(--radius);
}
.news-article-image-wrapper {
     display:flex;
     flex-direction:column;     
     text-align:center;
     vertical-align:top;
     height: 200px;
     max-height: 200px;
     min-height:200px;
     min-width:100%;
     width: 100%;
     max-width: 100%;
     object-fit: contain;
     flex:0;
     border-radius:var(--radius);
}
.news-article-row .news-article-image-wrapper {
     display:flex;
     flex-direction:column;     
     flex:0;
     height: 120px;
     max-height: 120px;
     min-height:120px;
     min-width:120px;
     width: 120px;
     max-width: 120px;
}
.news-article-image {
     height: calc(100%);
     width: calc(100%);
     min-height: calc(100%);
     min-width: calc(100%);
     max-height: calc(100%);
     max-width: calc(100%);
     background-position:top center;
     background-repeat:no-repeat;
     background-size:contain;
     flex:1;
     border-radius:var(--radius);
}
.news-article-image.flex-half, .news-article-image.flex-third, .news-article-image.flex-quarter {
     display: block;
     position:absolute;
     top:0;
     left:auto;right:auto;bottom:auto;
     object-fit: cover;
     width:calc(50% - 2px);
     height:calc(50% - 2px);
     max-width:calc(50% - 2px);
     min-width:calc(50% - 2px);
     max-height:calc(50% - 2px);
     min-height:calc(50% - 2px);
     background-color:var(--primary-back-faded);
     transition:var(--transition);
     border:var(--secondary-border);
     border-radius:var(--radius);
}
.news-article-image.flex-half:nth-child(2), .news-article-image.flex-third:nth-child(2), .news-article-image.flex-quarter:nth-child(2), .news-article-image.flex-quarter:nth-child(4) {
     left:calc(50% + 1px);
}
.news-article-image.flex-third:nth-child(3) {
     top:calc(50% + 1px);
     left:0;right:0;width:100%;
     max-width:100%;min-width:100%;
}
.news-article-image.flex-quarter:nth-child(3){
     top:calc(50% + 1px);
}
.news-article-image.flex-quarter:nth-child(3), .news-article-image.flex-quarter:nth-child(4) {
     top:calc(50% + 1px);
}
.news-article-image.flex-half:hover,.news-article-image.flex-third:hover,.news-article-image.flex-quarter:hover {
     position:absolute;
     top:0;left:0;bottom:0;right:0;
     width:100%;
     height:100%;
     max-width: 100%;
     max-height: 100%;
     min-height:100%;
     min-width:100%;
     object-fit: cover;
     background-position:center;
     display:block;
     z-index:1;
}

.news-article-body {
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items: start;
     flex-wrap: wrap;
     gap:8px;
     height:auto;
     width:100%;
     flex-grow:1;
}
.news-article-row .news-article-body {
     height:auto;
     width:100%;
}
.news-article-published {
     font-size:var(--font-size-14);
     padding:0 4px;
}
.news-article-summary {
     display: inline-block;
     font-weight: normal;
     font-size: var(--font-size-14);
     line-height: 20px;
     width: 100%;
     text-align: left;
     padding: 0 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     /* white-space: nowrap; */
}

.article-full {
     display:flex;
     flex-direction:column;
     gap: 8px;
     padding:8px;
     justify-content: flex-start;
     align-items:start;
     padding:8px;
     width: 100%;
     height:100%;
     position:absolute;
     left:0;right:0;top:0;bottom:0;
     background-color: var(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     border-radius: var(--radius);
     box-shadow: var(--box-shadow);
     z-index:2;
}
.article-title {
     display:flex;
     flex-direction:row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: nowrap;
     height:auto;
     min-height:40px;line-height:40px;
     font-size:var(--font-size-24);
     font-weight: bold;
     width:100%;
}
.article-status {
     display:flex;
     flex-direction:row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: nowrap;
     height:auto;
     padding:0 8px;
     min-width:100%;width:100%;
     min-height:30px;line-height:30px;
     font-size:var(--font-size-14);
}
.article-published {
     display:flex;flex-direction:row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: nowrap;
     height:auto;
     padding:0 8px;
     min-width:100%;width:100%;
     min-height:30px;line-height:30px;
     font-size:var(--font-size-16);
     font-weight: normal;
}
.article-summary {
     display:block;
     text-align:left;
     height:auto;
     padding:4px 8px;
     min-width:100%;width:100%;
     font-size:var(--font-size-16);
     font-weight: normal;
     border-radius:var(--radius);
     background-color:var(--primary-back-faded);
}
.article-body {
     display:block;
     text-align:left;
     padding:0 8px 8px 8px;
     height:auto;
     min-width:100%;width:100%;
     min-height:40px;
     font-size:var(--font-size-16);
     font-weight: normal;
}
.article-spacer {
     height:1px;
     width:100%;min-width:100%;
     max-width:100%;
     border-top:var(--secondary-border);
}
.article-close {
     display: inline-block;
     width: 40px;
     height: 40px;
     background-image: url(../core/images/grid-delete.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
     cursor: pointer;
     margin-left:auto;
}
.article-edit {
     width:40px;height:40px;
     position:absolute;
     right:48px;
     background-image: url(../core/images/grid-edit.png);

     background-repeat: no-repeat;
     background-size: 86%;
     background-position: center center;
     cursor: pointer;
     transition: var(--transition);
}

.article-images {
     display:flex;flex-direction:row;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     height:auto;
     gap: 8px;
}
.article-image {
     width:200px;height:200px;
     max-width:200px;
     max-height:200px;
     min-width:200px;
     min-height:200px;
     border:var(--secondary-border);
     border-radius:var(--radius);
     background-size:contain;
     background-position:center center;
}

/* FORUM */
#forum-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#forum-content {
    flex: 0 1 auto;
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
}

#forum-left,
#forum-right {
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 8px;
    flex: 0;
}

#forum-center {
    flex-grow: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.forum-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 4px;
    padding: 4px;
    background-color: var(--primary-back);
    color: var(--primary-text);
    border: var(--primary-border);
    border-radius: var(--radius);
}

.forum-container-icon {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background-color: var(--primary-back-faded);
    flex-grow: 0;
}

.forum-container-title {
    flex-grow: 1;
}

.forum-container-title-top {
    /* font-size: var(--font-size-14); */
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    text-wrap: nowrap;
}

.forum-container-title-bottom {
    font-size: var(--font-size-12);
    height: 16px;
    line-height: 16px;
    text-wrap: nowrap;
}

.forum-following-count {
    background-color: var(--contrast-back);
    color: var(--contract-color);
    text-align: center;
    width: auto;
    min-width: 24px;
    height: 24px;
    border-radius: var(--radius);
    margin-left: 4px;
    padding: 0 4px;
    font-size: var(--font-size-14);
}

.forum-container-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-weight: bold;
    padding: 0 8px;
}

.forum-container-button {
    width: 100%;
    padding: 4px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: var(--radius);
    cursor: pointer;
}

.forum-container-button:hover {
    background-color: var(--primary-back-faded);
}

#forum-createpost-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: start;
    align-items: center;
    padding: 8px;
}

.forum-createpost-account-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: red;
}

#forum-createpost-input-wrapper {
    flex-grow: 2;
    /* border:var(--primary-border);border-radius:var(--radius); */
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

#forum-createpost-input {
    height: 30px;
    line-height: 30px;
    width: 100%;
}

#forum-createpost-button {
    text-align: center;
    height: 30px;
    line-height: 30px;
    min-width: 100px;
    flex: 0;
    font-weight: bold;
    font-size: var(--font-size);
    cursor: pointer;
    border: var(--primary-border);
    border-radius: var(--radius);
    background-color: var(--button-standard-back);
    color: var(--button-standard-color);
}

#forum-posts-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow: auto;
    padding-top: 8px;
    gap: 8px;
}

.forum-post {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    width: 100%;
    justify-content: left;
    align-items: center;
    background-color: var(--primary-back);
    color: var(--primary-text);
    border: var(--primary-border);
    border-radius: var(--radius);
}

.forum-post-icon {
    width: 200px;
    height: 100px;
    flex: 0;
    min-width: 200px;
    border: var(--primary-border);
    border-radius: var(--radius);
}

.forum-post-title {
    font-size: var(--font-size-18);
    font-weight: bold;
    flex-grow: 2;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.form-post-title-text {
    flex-grow: 1;
}

.forum-post-favorite {
    min-width: 24px;
    height: 24px;
    border-radius: var(--radius);
    flex-grow: 0;
    float: right;
    background-color: gold;
}

.forum-post-tags {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}

.forum-post-details {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
}

.forum-post-tag {
    padding: 4px 8px;
    text-align: center;
    font-size: var(--font-size-14);
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    color: var(--primary-text-faded);
}

.forum-post-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 2;
}

.forum-post-account {
    display: flex;
    flex-direction: row;
    flex-grow: 2;
    column-gap: 8px;
}

.forum-post-account-icon {
    width: 30px;
    height: 30px;
    background-color: orange;
    border-radius: 50%;
}

/* .forum-post-account-icon {background-color:cyan;border:50%;border:var(--primary-border);} */
.forum-post-account-title {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: start;
}

.forum-post-account-title-text {
    width: 100%;
    font-size: var(--font-size-14);
    color: var(--primary-text-faded);
}

.forum-post-account-info {
    font-size: var(--font-size-12);
}

.forum-post-subinfo {
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: var(--font-size-14);
    color: var(--primary-text-faded);
    font-weight: bold;
}

/* DAM - File Management */
/* DAM "Digital Asset Manager" */

#dam-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
    width: 100%;
    gap: 8px;
    text-align: left;
    overflow: visible;
    flex: 0 1 auto;
}

#dam-path {
    display: inline-block;
    min-width: 400px;
    font-size: var(--font-size-20);
    padding: 0 8px;
    font-weight: bold;
    line-height: 40px;
    min-height: 40px;
    height: auto;
    width: auto;
    flex: 0 1 auto;

}

#dam-settings {
    display: inline-flex;
    flex: 1 0 auto;
    min-width: 600px;
    max-width: 600px;
    gap: 4px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: end;
}

.dam-control-buttons {
    display: inline-flex;
    flex-direction: row;
    padding: 0 8px;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    line-height: 30px;
    width: auto;
    min-height: 30px;
    height: auto;
    flex: 0 1 auto;
    align-self: flex-start;
}

.tools-path-button {
     width: auto;
     height: 40px;
     line-height: 40px;
     display: inline-flex;
     flex-direction:row;
     align-items: center;
     justify-content: start;
     padding: 0 8px;
     gap:8px;
     transition: var(--transition-fast);
     /* background-color: var(--button-tool-back);
     color: var(--button-tool-color); */
     border-radius:var(--button-border-radius);
     border: 1px solid transparent;
     cursor: pointer;
}

.tools-path-spacer {
    display: inline-block;
    height: 40px;
    width: 24px;
    max-width: 40px;
    background-size: 70%;
    background-position: center;
    background-image: url(../core/images/right-black.png);
}

.tools-path-button.faded,
.tools-path-spacer.faded {
    opacity: 0.90;
}

.tools-path-button:hover {
     background-color: var(--button-tool-back);
     color: var(--button-tool-color);
     border: var(--button-tool-border);
     opacity: 1;
}
.dam-path-folder {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 90%;
    background-image: url(../core/images/folder-default.png);
}
.dam-path-shared {
    border:1px solid cyan;
}
.dam-path-shared-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 30px;
    background-image: url(../core/images/shared-black.png);
    background-size: 90%;

}
.dam-path-edit {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 30px;
    background-image: url(../core/images/sort-down.png);
    background-size: 70%;
    /* background-position:bottom; */
}

#dam-content-controls {
    display: inline-flex;
    flex: 0;
    align-items: center;
    gap: 4px;
    min-width: 300px;
    width: auto;
}

.dam-app-content {
     width: 100%;
     display: flex;
     gap:8px;
     flex-direction: column;
     align-items: start;
     justify-content: flex-start;
     overflow:visible;
}

#dam-search {
    min-width: 198px;
}

.content-notdefault {
    background-color: var(--primary-back-highlight);
}

#dam-search-icon {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(../core/images/clear.png);
}

.tools-content-label {
    display: inline-block;
    font-weight: bold;
    padding: 0 4px;
    width: auto;
}

.tools-content-input {
    display: inline-block;
    padding: 0 2px;
}

.dam-layout-control {
    padding: 0;
    min-width: 82px;
    max-width:80px;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
     justify-content:center;
}

#dam-layout-list {
    background-image: url(../core/images/list_black.png);
}

#dam-layout-grid {
    background-image: url(../core/images/block_black.png);
    border-left: var(--primary-border);
}

.dam-content-message {
    display: block;
    width: 100%;
    font-weight: bold;
    line-height: 30px;
    padding: 8px;
    text-align: center;
}

#dam-content-create {
    width: auto;
    flex: 0 1 auto;
    align-self: flex-start;
}

#dam-title-text {
    display: inline-block;
    font-size: var(--font-title);
    font-weight: bold;
    margin-right: 8px;
}

.dam-create-button {
    height: 20px;
    line-height: 20px;
}

.dam-content-title {
     display: flex;
     flex-direction:row;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     height:30px;line-height:30px;
}

.dam-content-title-text {
    width: auto;
    display: flex;flex-direction:row;align-items: center;justify-content:flex-start;gap:8px;
    text-align: left;
    font-weight: bold;
    font-size: var(--font-size-18);
    padding: 0 8px;
}

.dam-folder {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    overflow: visible;
    line-height: 30px;
    overflow: hidden;
    pointer-events: all;
}

.dam-folder.highlight {
    background-color: var(--color-highlight);
}

.dam-folder-icon {
    min-width: 40px;
    width: 40px;
    max-width: 40px;
    height: 40px;
    flex: 0;
    background-image: url(../core/images/folder-default.png);
}

.dam-folder-title {
    flex: 1;
    font-size: var(--font-size-18);
    font-weight: bold;
    padding: 0 4px 0 8px;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dam-folder-status {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    width: auto;
    border: 0;
    border-radius: 0;
    background-color: var(--primary-back-faded);
    border-top: var(--primary-border);
    border-left: var(--primary-border);
    border-right: var(--primary-border);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    font-size: var(--font-size-14);
    font-style: italic;
    font-weight: bold;
}

.dam-folder-icon-select {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
    justify-content: space-evenly;
    border: var(--primary-border);
    border-radius: var(--radius);
}

.dam-folder-icon-select-icon {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    height: 50px;
    flex: 0;
}

.dam-folder-icon-select-icon:hover {
    border: var(--primary-border);
    border-radius: var(--radius);
    background-size: 90%;
}

.dam-folder-icon-select-icon.selected {
    border: var(--primary-border);
    border-radius: var(--radius);
    background-size: 90%;
    background-color: var(--primary-back-highlight);

}

.dam-folder-icon-selected {
    border: var(--primary-border);
    border-radius: var(--radius);
}


.dam-folder-favorite {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin: 4px;
    background-size: 90%;
}

.dam-folder-shared {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: 4px;
}

.dam-folder-empty {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background-color: var(--color-warning);
}

/* Files */
#dam-file-title {display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;}
.dam-file {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px;
    width: 300px;
    flex-wrap: wrap;
    overflow: visible;
    max-height:168px;
}

.dam-file.highlight {
    background-color: var(--color-highlight);
}

.dam-file-name {
    min-width: 100%;
    flex: 1;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:4px;    
}
.dam-file-favorite {
    height:20px;width:20px;
    flex:0;min-height:20px;min-width:20px;
    background-image:url(../core/images/star-unchecked.png);
    pointer-events: all;
}
.dam-file-favorite.selected {
    background-image:url(../core/images/star-checked.png);
}
.dam-file-name-text {flex:1;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;flex-direction:row;align-items:center;gap:4px;}

.dam-file-icon {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    height: 120px;
    flex: 0;
    background-color:rgba(0,0,0,0.05);
    background-image: url(../core/images/filetype.png);
    overflow:hidden;    
}

.dam-file-icon-bordered {
    border: var(--primary-border);
    border-radius: var(--radius);
}

.dam-file-info {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    font-size: var(--font-size-18);
    font-weight: bold;
    line-height: 30px;
}

.dam-file-data {
    flex: 1;
    font-size: var(--font-size-18);
    font-weight: bold;
    padding: 0 8px 0 8px;
    min-height: 24px;
    max-height: 24px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dam-file-data.small {
    font-size: var(--font-size);
}

.dam-file-extension {
    left: 50%;
    top: 50%;
    transform: Translate(-50%, -50%);
    font-size: 80%;
    font-weight: bold;
    width: 80%;
    text-align: center;
    padding: 4px;
    background-color: #252525;
    color: white;
}

.dam-edit-controls {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--primary-back-sub);
    color: var(--primary-text);
    border-radius: var(--radius);
}

.dam-folder .dam-edit-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin: 4px;
    border-radius: var(--button-border-radius);
    background-image: url(../core/images/submenu-black.png);
    background-size: 90%;
    cursor: pointer;
}
.dam-file .dam-edit-button {    
    width: 20px;
    height: 20px;
    display:inline-flex;
    min-height:20px;
    min-width:20px;
    flex:0;
    border-radius: 40px;
    background-image: url(../core/images/submenu-black.png);
    background-size: 90%;
    cursor: pointer;
}

.dam-folder:hover .dam-edit-button,
.dam-file:hover .dam-edit-button {
    background-color: var(--button-standard-hover-back);
}

.dam-file-mimetype {
    display: none;
}

#dam-file-drop {
    flex: 1;
    min-height:166px;
    max-width: 300px;
    min-width: 300px;
    border: var(--primary-border);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-20);
    font-weight: bold;
    text-align: center;
    background-color: var(--primary-back-faded);
    color: var(--primary-text);    
}

#dam-files-body {
    display: flex;
    flex-direction: row;
    gap:8px;
}

#dam-files-content {
    min-height: 150px;
    padding:0;
    flex:1;
}

#dam-file-drop.highlight,
#dam-files-content.highlight {
    background-color: var(--color-highlight);
}

#dam-files-preview {
    display:none;
}
#dam-files-preview.active {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;

    /* margin:8px; */
    flex:1;
    /* border:var(--primary-border);
    border-radius:var(--radius); */
    /* background-color: var(--primary-back-faded); */
}
#dam-files-preview-close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    background-image:url(../core/images/grid-delete-white.png);
}

/* Layout List */
.dam-content.dam-layout-list {
    gap: 4px;
}

.dam-folder.dam-layout-list {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0;
}

.dam-folder.dam-layout-list .dam-folder-title,.dam-folder.dam-layout-list .dam-folder-icon {
    height: 30px;
    line-height: 30px;
}

.dam-folder.dam-layout-list .dam-folder-shared,
.dam-folder.dam-layout-list .dam-folder-empty {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    flex: 0;
    min-width: 80px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    margin: 2px 12px 2px 0;
    background-size: contain;
    font-size: var(--font-size-14);
    font-weight: bold;
    background-position: 90%;
}

/* .dam-folder.dam-layout-list .dam-folder-shared::after {
    content: "Shared";
} */

.dam-folder.dam-layout-list .dam-folder-empty {
    transform: none;
    text-align: center;
    background-color: var(--color-warning);
    color: white;
    border-radius: var(--radius);
}

.dam-folder.dam-layout-list .dam-folder-empty::after {
    content: "Empty";
    min-width:80px;
}

.dam-folder.dam-layout-list .dam-edit-button {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    float: right;
}

.dam-file.dam-layout-list {
    height: 50px;
    line-height: 50px;
    width: 100%;
    display: grid;
    padding: 2px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 2px;
}

.dam-file.dam-layout-list .dam-file-icon {
    min-width: 40px;
    max-width: 40px;
    width: 40px;
    height: 40px;
    margin: 2px 8px 2px 4px;
    float: left;
    grid-row: 1 / span 2;
}

.dam-file.dam-layout-list .dam-file-name,
.dam-file.dam-layout-list .dam-file-info {
    width: auto;
    min-width: 200px;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
    margin: 0;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    ;
}

.dam-file.dam-layout-list .dam-file-name::before {
    content: "Label: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-data {
    padding: 0;
}

.dam-file.dam-layout-list .dam-file-type::before {
    content: "Type: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-size::before {
    content: "Size: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-dimensions::before {
    content: "Dimensions: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-modified::before {
    content: "Modified: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-mimetype::before {
    content: "Mimetype: ";
    margin-right: 4px;
}

.dam-file.dam-layout-list .dam-file-mimetype {
    display: block
}

#dam-file-drop.dam-layout-list {
    flex: 1;
    min-height: 50px;
    height: 50px;
    max-width: 100%;
    width: 100%;
}


/* Icons */
.dam-icon-shared {
    background-image: url(../core/images/shared-black.png);
}

.dam-icon-empty {
    background-image: url(../core/images/slash.png);
}

.dam-icon-favorite {
    background-image: url(../core/images/star-unchecked.png);
}

.dam-icon-favorite.selected {
    background-image: url(../core/images/star-checked.png);
}

.dam-icon-open {
    background-image: url(../core/images/dam-open.png);
}

.dam-icon-info {
    background-image: url(../core/images/dam-info.png);
}

.dam-icon-file {
    background-image: url(../core/images/dam-file.png);
}

.dam-icon-create {
    background-image: url(../core/images/dam-create.png);
}

.dam-icon-edit {
    background-image: url(../core/images/dam-edit.png);
}

.dam-icon-delete {
    background-image: url(../core/images/dam-delete.png);
}

.dam-icon-download {
    background-image: url(../core/images/dam-download.png);
}

.dam-icon-uploadfile {
    background-image: url(../core/images/dam-fileupload.png);
}

.dam-icon-uploadfolder {
    background-image: url(../core/images/dam-folderupload.png);
}

.todo-content-note {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     font-weight:bold;
     font-size:var(--font-size-18);
     padding: 0 8px;
     justify-content:center;
     background:transparent;
     color:inherit;
     border:none;
}
.todo-back {
     width: 30px;
     height: 30px;
     min-width:30px;
     min-height:30px;
     max-width:30px;
     max-height:30px;
     background-image: url(../core/images/left-black.png);
     background-size: contain;
     cursor: pointer;
}
#todo-content-title, #todo-content-body {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     height: auto;
     gap: 8px;
     padding: 8px;
     max-width:100%;flex-wrap:wrap;
}
.todo-seperator {
     width:100%;
     height:1px;
     border-top:var(--secondary-border);
     margin: 8px 0;
}
.todo-button {
     width: auto;
     height: 40px;
     line-height: 40px;
     padding: 0 16px;
     text-align: center;
     font-size: var(--font-size-16);
     font-weight: bold;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;     
     border: var(--button-tool-border);
     border-radius: var(--radius);
     background-color: var(--button-tool-back);
     color: var(--button-tool-color);

     cursor: pointer;
}
.todo-button:hover {
     background-color: var(--button-neutral-hover-back);
     color: var(--button-neutral-hover-color);
     border: var(--button-neutral-hover-border);
}
.todo-button-group {
     font-size: var(--font-size-18);
}
.todo-box {
     min-width:300px;
     width:300px;
     max-width:300px;
     height:auto;
     display:inline-flex;
     flex-direction:row;
     align-items:stretch;
     justify-content:flex-start;
     gap:8px;
     line-height:normal;
     padding:16px;
}
.todo-box-info, .todo-task-info {
     flex:1;
     display:inline-flex;
     flex-direction:column;
     align-items:start;
     justify-content:flex-start;
     gap:8px;
     font-size:var(--font-size-14);
     font-weight:normal;
}
.todo-task-info {gap:4px;}
.todo-box-row {
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:space-between;
     flex-wrap:wrap;
     gap:8px;
     flex:1;
}
.todo-box-label {
     font-size:var(--font-size-14);
     font-weight:bold;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-end;
}
.todo-box-value {
     font-size:var(--font-size-14);
     font-weight:normal;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
}
.todo-box-name {
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content: flex-start;
     font-size:var(--font-size-18);
     font-weight:bold;
     flex-wrap:wrap;
     flex:1;
}
.todo-box-counts {font-size:var(--font-size-12);font-weight:bold;}
.todo-box-percent {
     display:flex;
     align-items:center;justify-content:center;

}
.todo-box-select, 
.todo-box-back {
     width:30px;
     min-height:30px;
     flex:0;
     min-width:30px;
     max-width:30px;
     background-image: url(../core/images/right-black.png);
     background-size:70%;
     background-repeat:no-repeat;
     background-position:center;
}
.todo-box-back {
     background-image: url(../core/images/left-black.png);
}
.todo-topic-wrapper {
     width:100%;
     border:var(--box-border);
     border-radius:var(--radius);
     background-color:var(--box-back);
     color:var(--box-color);
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:flex-start;
     overflow:hidden;
     height:60px;
     line-height:60px;
}
.todo-topic-title {
     font-size: var(--font-size-18);
     font-weight: bold;
     width: 100%;
     text-align: left;
     padding: 0 4px;
     justify-content:flex-start;
     gap:8px;
     padding:0 8px;
     background-color:var(--box-back);
     color:var(--box-color);
     border-bottom:var(--box-border);
     height:60px;
     line-height:60px;
}
.todo-topic-counts {
     font-size:var(--font-size-12);
     font-weight:bold;
     color:var(--box-color-faded);
     margin-left:4px;
}
.todo-task-wrapper {
     width:calc(100% - 16px);
     margin:8px;
     border:var(--box-border);
     border-radius:var(--radius);
}
.todo-task-row {
     position:relative;
     min-width:100%;
     width:100%;
     max-width:100%;
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
     gap:8px;
     padding:8px 16px;
     background-color:var(--box-back);
     color:var(--box-color);
     border-radius:var(--radius);
     border:var(--box-button-border);
     height:auto;
}
.todo-task-row.todo-task-unfiltered {
     opacity:0.5;
}
.todo-task {
     gap:16px;
     font-size:var(--font-size-12);
     /* height:50px; */
     box-sizing:border-box;
     border-width:1px;
}
.todo-task-new {
     /* border:1px solid var(--color-success); */
}
.todo-task-top, .todo-task-details, .todo-box-description {
     width:100%;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
     gap:8px;
}
.todo-task-details {
     font-size:var(--font-size-12);
     font-weight:normal;
     color:var(--box-color-faded);
}
.todo-task-details span {
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
     gap:4px;  
}
.todo-box-description {
     font-size:var(--font-size-14);
     font-weight:normal;
     color:var(--box-color-faded);
}
.todo-children, .todo-topic-tasks {
     position: relative;   
     display:inline-flex;
     flex:1;
     flex-direction:column;
     align-items:start;
     justify-content:flex-start;
     gap:8px;
     padding-left: 16px;
     margin-left: 16px;
     width:calc(100% - 16px);
}
.todo-children > .todo-children:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1px;
    top: -8px;
    width: 1px;
    height: calc(100% + 8px);
    background: var(--box-button-border-color);
    z-index:-1;
}
/* .todo-children > .todo-children:only-child::before {
    content: "";
    position: absolute;
    left: -31px;
    top: -8px;
    width: 1px;
    height: 50%;
    background: var(--box-button-border-color);
    z-index:-1;
} */
.todo-box-toggle {
     width:30px;
     height:30px;
     min-width:30px;
     min-height:30px;
     max-width:30px;
     max-height:30px;
     background-image: url(../core/images/right-black.png);
     background-size:contain;
     cursor: pointer;
     transition: var(--transition);
}
.todo-box-toggle.expanded {
     transform: rotate(90deg);
}
.todo-topic-tasks {
     padding:0;
     margin:0;
     height:0;
     max-height:0;
     overflow:hidden;
     transition: var(--transition);
     display:none;
     top:0px;
}
.todo-topic-tasks.expanded {
     display:flex;
     flex-direction:column;
     align-items:flex-start;
     justify-content:flex-start;
     margin:0;padding:0;
     max-height:none;
     overflow:visible;
}
.todo-topic::before, .todo-task::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 16px;
    height: 1px;
    background: var(--box-button-border-color);
    z-index:-1;
}
.todo-topic::after, .todo-task::after {
    content: "";
    position: absolute;
    left: -16px;
    bottom:50%;
    width: 1px;
    height: 100%;
    background: var(--box-button-border-color);
    z-index:-1;
}

.todo-fill {
     background-color:var(--box-back);
     color:var(--box-color);
     border-radius:var(--radius);
     border:var(--box-button-border);
}
.todo-top-border {
     border-top:1px solid var(--percent-track);
     padding-top:8px;
}
.todo-task-controls {
     width:40px;
     min-width:40px;
     max-width:40px;
     padding-right:8px;
     flex:1;
     display:inline-flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     border-right:var(--box-button-border);
     height:100%;
}
.todo-task-control {
     display:inline-flex;
     width:30px;
     height:30px;
     min-width:30px;
     min-height:30px;
     max-width:30px;
     max-height:30px;
     flex-direction:row;
     align-items:center;
     justify-content:center;
     background-color:transparent;
     cursor: pointer;
}
.todo-task-edit {
     background-color:transparent;
     cursor: pointer;
     background-image:url(../core/images/submenu-black.png);
     background-size:70%;
     border-radius:var(--button-border-radius);
     height:30px;
     width:30px;
}
.todo-task-edit:hover {
     background-color: var(--button-standard-hover-back);
}
.todo-status, .todo-priority {
     display:inline-flex;
     width:30px;
     height:30px;
     min-width:30px;
     min-height:30px;
     max-width:30px;
     max-height:30px;
     background:none;
     background-repeat:no-repeat;
     background-position:center;
     background-size:90%;
     flex-direction:row;
     align-items:center;
     justify-content:center;
}
.todo-priority {
     /* border-radius:var(--radius); */
     /* border:var(--box-button-border); */
     /* width:48px;
     min-width:48px;
     max-width:48px;
     height:26px;
     min-height:26px;
     max-height:26px; */
     background-size:90%;
}
.todo-status:hover {
     background-color: var(--button-standard-hover-back);
     border-radius:var(--button-border-radius);
}
.todo-status-new {
     background-image:url(../core/images/create-black.png);
}
.todo-status-open {
     background-image:url(../core/images/status-open.png);
}
.todo-status-inprogress {
     background-image:url(../core/images/status-started.png);
}

.todo-status-open.todo-status-due, .todo-status-inprogress.todo-status-due {
     background-color: var(--color-warning);
     border-radius:var(--button-border-radius);
}
.todo-status-open.todo-status-overdue, .todo-status-inprogress.todo-status-overdue {
     background-color: var(--color-danger);
     border-radius:var(--button-border-radius);
}

.todo-status-completed {
     background-image:url(../core/images/status-complete.png);
}
.todo-priority-lowest {
     background-image:url(../core/images/status-low.png)
}
.todo-priority-low {
     background-image:url(../core/images/status-low.png);
}
.todo-priority-med, .todo-priority-medium, .todo-priority-standard {
     background-image:url(../core/images/status-medium.png);
}
.todo-priority-high, .todo-priority-critical {
     background-image:url(../core/images/status-high.png);
}
.todo-priority-highest, .todo-priority-critical {
     background-image:url(../core/images/status-high.png);
}
.todo-flagged {
     background-image:url(../core/images/flag-red.png);
}
.text {
    transform: none
}


@media (max-width:1100px) {
    .dam-file.dam-layout-list .dam-file-mimetype {
        display: none;
        visibility: hidden;
    }

    #dam-settings {
        min-width: 300px;
        max-width: 300px;
    }
}

@media (max-width:800px) {
    .dam-file.dam-layout-list .dam-file-modified {
        display: none;
        visibility: hidden;
    }
}

@media (max-width:600px) {
    .dam-file.dam-layout-list .dam-file-dimensions {
        display: none;
        visibility: hidden;
    }
}

/* TODOS */

/* TABLES */