@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined);

@import "./tailwind.css";

@font-face {
  font-family: 'Aeonik';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    url('fonts/woff2/Aeonik-Regular.woff2') format('woff2'),
    url('fonts/woff/Aeonik-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Aeonik';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:
    url('fonts/woff2/Aeonik-Medium.woff2') format('woff2'),
    url('fonts/woff/Aeonik-Medium.woff') format('woff');
}


@font-face {
    font-family: 'Aeonik';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src:
            url('fonts/woff2/Aeonik-Medium.woff2') format('woff2'),
            url('fonts/woff/Aeonik-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Aeonik';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src:
            url('fonts/woff2/Aeonik-Medium.woff2') format('woff2'),
            url('fonts/woff/Aeonik-Medium.woff') format('woff');
}


html,
body {
  margin: 0;
  font-family: 'Aeonik', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 150%;
  padding-top: 0;
  height: 100%;
}

.btn-full-w
{
 width: 100%;
}
/* Auto hide placeholders - start */
input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

/* FF 4-18 */
input:focus::-moz-placeholder {
    color: transparent;
}

/* FF 19+ */
input:focus:-ms-input-placeholder {
    color: transparent;
}

/* Auto hide placeholders - End */
/* IE 10+ */
.angular-google-map-container {
    height: 350px;
}


/*i.fa {
    color: var(--interaction);
}*/
.itemtranstable {
    border-collapse: collapse; 
    width: 100%; 
    border-top: 2px solid #ccc; 
    border-bottom: 2px solid #ccc;
}

.itemtranstable th, .itemtranstable td {
    text-align: center !important; 
    vertical-align: middle !important; 
    padding: 8px; 
}

.itemtranstable tr {
    border-bottom: 0.5px solid #ccc; 
}

.itemtranstable thead tr {
    border-bottom: 2px solid #ccc; 
}

.itemtranstable tbody tr:last-child {
    border-bottom: none; 
}

.info-box {
    border: 1px solid var(--interactionSharp);
    text-align: left;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background-color: white;
}

.info-box .fa-info {
    color: var(--interactionSharp);
}

pre.word-wrap {
    white-space: pre-wrap;
    /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

.align-image {
  display: inline-block;
  vertical-align: middle;
}

.badge-primary {
    background-color: var(--accent);
}

.badge-success {
    background-color: var(--success);
}

.badge-info {
    background-color: var(--interactionSharp);
}

.badge-warning {
    background-color: var(--accent);
}
.language-company
{
    padding: 6px 10px;
}
.badge-danger {
    background-color: var(--danger);
}
.language-font
{
    color: white;
}
.text-ditio-orange {
    color: #000738;
}

.text-primary {
    color: #348ed1;
}

.text-info {
    color: var(--interactionSharp);
}

.text-info:focus,
.text-info:hover {
    color: var(--interactionSharp);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--accent);
}

.text-danger {
    color: var(--danger);
}

.text-light-black {
    color: #8a898b;
}

.text-dark-black {
    color: #333;
}

.impersonating {
    background-color: #e5a42f;
}

.impersonating-test {
    background-color: var(--success);
}

.impersonating-dev {
    background-color: var(--interactionSharp);
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}


.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.youtube-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.navbar img.avatar {
    height: 21px;
    width: 21px;
    border: 2px solid white;
}

.navbar .badge.notifications {
    padding: 2px 5px;
    position: relative;
    top: -11px;
    right: 13px;
    font-weight: normal;
    font-size: 14px;
}

.menu-squares .well {
    /*min-height:200px;*/
    padding: 10px;
    margin-bottom: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
    border-radius: 0;
    border: 0;
    color: black;
    background-color: white;
}

.menu-squares .well:hover {
    box-shadow: 0 2px 10px #455A64, 0 3px 10px #455A64;
    /*border-radius: 5px;*/
    border: 0;
}

.menu-squares a {
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

#r-navigation-menu.loading-menu {
    min-width: 14rem;
    min-height: 100vh;
    background-color: white; 
    border-right: 1px solid var(--dividerAlpha50);
}

#r-top-bar.loading-menu {
    min-height: 4rem;
    width: 100%;
    border-bottom: 1px solid var(--dividerAlpha50);
}

.tooltip {
    z-index: 5000;
}

a.disabled {
    color: #777;
    opacity: 0.7;
}


.menu-squares .badge {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 15px;
}

.top-menu-squares {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    background-color: white;
    top: 50px;
    border-bottom: 1px solid #3c454f;
}

.top-menu-squares .badge {
    padding: 2px 4px;
    /*background-color: #dd4b39;*/
    position: absolute;
    top: 7px;
    left: 47px;
    font-weight: normal;
    font-size: 11px;
}

.top-menu-squares .col,
.top-menu-squares li {
    /*float: left;
        width: 16.66%;*/
    position: relative;
    /*min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;*/
    font-weight: bold;
    color: #777;
    display: table-cell;
    width: 1%;
}

.top-menu-squares .col span.icon,
.top-menu-squares li span.icon {
    color: inherit;
    font-size: 30px;
}

.top-menu-squares .col span.name,
.top-menu-squares li span.name {
    position: absolute;
    top: 15px;
}

.top-menu-squares .col a,
.top-menu-squares li a {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: inherit;
}

.top-menu-squares .col a:hover,
.top-menu-squares li a:hover {
    text-decoration: none;
}

.top-menu-squares .col a.active,
.top-menu-squares li a.active {
    color: #0c86e6;
}

.typeahead-input {
    padding-right: 15px;
}

.typeahead-wait {
    position: absolute;
    right: 8px;
    top: 38px;
}

.typeahead-clear {
    position: absolute;
    right: 8px;
    top: 38px;
    cursor: pointer;
}

.form-inline .typeahead-wait {
    right: 8px;
    top: 9px;
}

.form-inline .typeahead-clear {
    right: 8px;
    top: 9px;
}

.login-container {
    /*margin-top: -40px;*/
}

#qrcode_login img {
    height: 174px;
    display: inline !important;
}

/* ------------------------- dashboard*/
/*.dashboard.bottom-menu {
    position: fixed;
    bottom: 0;
    z-index: 50000;
}

    .dashboard.bottom-menu.expanded {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .dashboard.bottom-menu .menu {
        background: grey;
        position: relative;
        width: 100%;
        display: block;
        margin-left: 0;
        margin-right: 0;
        padding-top: 10px;
    }*/
.main-container
{
  display: flex;
}
/* ECharts host (Scripts/angular.app/core/directives.tsChart.js): custom elements default to
   display:inline, which makes the inner height:100% chart div resolve to 0. */
ts-chart, [ts-chart] {
    display: block;
}

.dashboard {
    height: 0vh;
    display: flex;
    flex-flow: column;
}

.dashboard>* {
    flex: 1 1 auto;
}

.dashboard>*:last-child {
    flex: 0 0 auto;
}

.dashboard .badge {
    position: absolute;
    right: 3px;
    top: 10px;
}

/* centered columns styles */
.dashboard .row-centered {
    text-align: center;
}

.dashboard .col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

.dashboard .menu {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .dashboard .menu {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (min-width : 992px) {
    .dashboard .menu {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (min-width : 1040px) {
    .dashboard .menu {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1285px) {
    .dashboard .menu {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

.dashboard-content {
    height: 100%;
    max-height: calc(100% - 213px);
    padding: 15px 20px 20px;
}

.dashboard .dashboard-area {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
    position: relative;
    height: calc(100vh - 85px);
    padding-top: 5px;
    padding-bottom: 24px;
    z-index: 1;
}

/* Owner section toggles: the cog floats in the strip between the dashboard
   content and the column's scrollbar; the content column gives up a little
   width so the icon has real padding around it. */
.dashboard-main-row {
    position: relative;
}

.dashboard .dashboard-area.col-sm-8 {
    padding-right: 34px;
}

.dashboard-settings-cog {
    position: absolute;
    top: 2px;
    /* dead-center of the widened strip between the dashboard content and the
       column's scrollbar */
    left: calc(66.6667% - 31px);
    transform: translateX(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.dashboard-settings-cog:hover {
    background: #F0F0EE;
}

.dashboard-settings-cog__icon {
    font-size: 14px;
    line-height: 1;
    color: var(--ditio-sand-1000);
    cursor: pointer;
}

.dashboard-settings-cog:hover .dashboard-settings-cog__icon {
    color: var(--ditio-sand-1200);
}

.dashboard .list-group-item.title {
    font-weight: bold;
    font-size: 18px;
}

.dashboard .list-group.main {
    border-radius: 3px;
    background-color: var(--grayBackgroundDark);
    border: 1px solid var(--divider);
    border-color: var(--dividerAlpha50);
    padding: 3px;
    font-size: 15px;
}

.dashboard .main .list-group-item {
    border-radius: 3px;
    background-color: var(--grayBackgroundDark);
    border: none;
    padding: 8px;
}

@media all and (min-width: 1540px) {
    .dashboard-content {
        max-height: calc(100% - 233px);
    }

    .dashboard .list-group.main {
        padding: 10px;
        font-size: 16px;
    }
}

.dashboard .main a.list-group-item {
    color: var(--selectedPrimary);
}

.dashboard .main a.list-group-item:hover {
    color: var(--hoverPrimary);
}

.dashboard .main .list-group-item.title {
    /*background-color: #6a6a6b;
        background-color: rgba(106,106,107, 1); ????????????????*/
}

.dashboard .main i {
    color: var(--accent);
}

.dashboard .main .menu-title {
    padding-left: 5px;
    font-weight: 500;
}

.dashboard .main .badge {
    background-color: var(--accent);
}

.dashboard hr {
    margin-bottom: 10px;
    margin-top: 10px;
}


.raised-well {
    padding: 10px;
    font-size: 16px;
    box-shadow: 0px 1px 2px var(--blackAlpha25);
    border-radius: 3px;
    border: 1px solid var(--grayBackgroundDark);
    background-color: var(--white);
    position: relative;
}

.raised-well.active {
    box-shadow: 0px 1px 6px var(--interactionAlpha60);
}

.dashboard-stats-well.external {
    background-color: #f3f3f3;
}

.dashboard-stats-well h4 {
    margin-bottom: 10px;
    margin-top: 0;
}

.dashboard-stats-well h4 .company-name {
    position: absolute;
    font-size: 60%;
    left: 55px;
    top: 38px;
    color: var(--secondaryText);
}

.dashboard-stats-well h4 a.proj-name {
    width: 54%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: var(--ditio-sand-1200);
}

.dashboard-stats-well h4 a.proj-name:hover,
.dashboard-stats-well h4 a.proj-name:focus {
    color: var(--ditio-primary-600);
    text-decoration: underline;
}

@media (min-width: 992px) {
    .dashboard-stats-well h4 a.proj-name {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    .dashboard-stats-well h4 a.proj-name {
        width: 50%;
    }
}

@media (min-width: 1440px) {
    .dashboard-stats-well h4 a.proj-name {
        width: 60%;
    }
}

@media (min-width: 1920px) {
    .dashboard-stats-well h4 a.proj-name {
        width: 55%;
    }
}

.dashboard-stats-well {
    height: 300px;
    padding: 10px;
    /*padding: 10px;
    font-size: 16px;
    box-shadow: 4px 0px 4px rgba(0, 0, 0, .23), 3px 6px 6px rgba(0, 0, 0, .16);
    border-radius: 0;
    border: 0;
    color: black;
    background-color: white;
    position: relative;*/
}

.dashboard-total-stats-well {
    margin-bottom: 15px;
    padding: 0;
    overflow: hidden;
}

.dashboard-total-stats-well__title {
    margin: 0;
    padding: 14px 18px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.dashboard-stats-well--project-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    min-height: 392px;
    padding: 20px;
    border-radius: 0;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
}

.dashboard-stats-well--project-card.dashboard-stats-well--ai-preview-card {
    min-height: 385px;
}

/* Figma: 16px gutter between project cards via real CSS grid (bootstrap default is 30px).
   Mirrors the .overview-stat-row grid idiom below. Keeps the same responsive breakpoint
   as the previous col-xs-12/col-md-6 markup: single column under 992px, two columns at/above. */
.dashboard-project-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 992px) {
    .dashboard-project-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Neutralize Bootstrap's col-* float/width on every direct child (the repeated
   .dashboard-project-card-grid__item cards, and the occasional plain col-xs-4
   "no activity today" box) now that the parent is a CSS grid container. */
.dashboard-project-card-grid > div {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Explicit column assignment: with large project lists (100+ cards), the
   browser's implicit grid auto-placement was observed to skip the first
   cell (row 1 / col 1 left empty, first card rendered in col 2 instead).
   Forcing odd/even items to column 1/2 explicitly sidesteps that entirely,
   independent of auto-placement heuristics. */
@media (min-width: 992px) {
    .dashboard-project-card-grid > div:nth-child(odd) {
        grid-column: 1;
    }

    .dashboard-project-card-grid > div:nth-child(even) {
        grid-column: 2;
    }
}

.dashboard-project-card-grid > div > .well {
    margin-bottom: 0;
    /* fill the grid cell so side-by-side cards are always the same height,
       even when one wraps its evidence chips onto a second row */
    height: 100%;
}

.dashboard-stats-well__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}


.dashboard-stats-well__title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    /* Was flex-grow:0 (the flex shorthand default), so this never claimed
       available space in the header row and truncated project names
       (e.g. "Foreman Copilot" -> "Foreman Co...") even when the card had
       plenty of room. Let it grow to fill the row; .actions stays its
       natural width via justify-content:space-between on the parent. */
    flex: 1 1 auto;
}

.dashboard-stats-well__avatar {
    flex: 0 0 auto;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: block;
}

.dashboard-stats-well--project-card .dashboard-stats-well__avatar {
    height: 60px;
    width: 60px;
    border-radius: 14px;
}

.dashboard-stats-well__project-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.dashboard-stats-well__project-name a.proj-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    color: var(--ditio-sand-1200);
}

.dashboard-stats-well__project-name a.proj-name:hover,
.dashboard-stats-well__project-name a.proj-name:focus {
    color: var(--ditio-primary-600);
    text-decoration: underline;
}

.dashboard-stats-well__project-name .company-name {
    color: var(--secondaryText);
    font-size: 11px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Carbon (IBM Design Language) icons as masks - same icon set the Figma file
   uses; 1em box so the existing font-size rules keep controlling the size */
.ditio-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.ditio-icon--chart-line {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4.67,28l6.39-12,7.3,6.49a2,2,0,0,0,1.7.47,2,2,0,0,0,1.42-1.07L27,10.9,25.18,10,19.69,21l-7.3-6.49A2,2,0,0,0,10.71,14a2,2,0,0,0-1.42,1L4,25V2H2V28a2,2,0,0,0,2,2H30V28Z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4.67,28l6.39-12,7.3,6.49a2,2,0,0,0,1.7.47,2,2,0,0,0,1.42-1.07L27,10.9,25.18,10,19.69,21l-7.3-6.49A2,2,0,0,0,10.71,14a2,2,0,0,0-1.42,1L4,25V2H2V28a2,2,0,0,0,2,2H30V28Z'/></svg>");
}

.ditio-icon--info {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.5 11 8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11z'/><path d='M8,3.5c-0.4,0-0.8,0.3-0.8,0.8S7.6,5,8,5c0.4,0,0.8-0.3,0.8-0.8S8.4,3.5,8,3.5z'/><path d='M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.5 11 8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11z'/><path d='M8,3.5c-0.4,0-0.8,0.3-0.8,0.8S7.6,5,8,5c0.4,0,0.8-0.3,0.8-0.8S8.4,3.5,8,3.5z'/><path d='M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z'/></svg>");
}

.ditio-icon--maximize {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 15 6 14 2.7 14 7 9.7 6.3 9 2 13.3 2 10 1 10 1 15z'/><path d='M10 1 10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 15 6 14 2.7 14 7 9.7 6.3 9 2 13.3 2 10 1 10 1 15z'/><path d='M10 1 10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z'/></svg>");
}

.ditio-icon--minimize {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 9 2 10 5.3 10 1 14.3 1.7 15 6 10.7 6 14 7 14 7 9z'/><path d='M14 7 14 6 10.7 6 15 1.7 14.3 1 10 5.3 10 2 9 2 9 7z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 9 2 10 5.3 10 1 14.3 1.7 15 6 10.7 6 14 7 14 7 9z'/><path d='M14 7 14 6 10.7 6 15 1.7 14.3 1 10 5.3 10 2 9 2 9 7z'/></svg>");
}

/* Carbon "locked" and "wikis" - the visibility marker's two glyphs. Named
   after the Carbon icon, not after what they depict: feed-svg-icon--globe is
   Carbon "earth--filled", a different drawing, so a --globe here would be two
   glyphs under one name. Both draw their counters with opposite winding, so
   nonzero renders them correctly and neither needs the fill-rule override
   that ditio-icon--comment-alert does. */
.ditio-icon--locked {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M24,14H22V8A6,6,0,0,0,10,8v6H8a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V16A2,2,0,0,0,24,14ZM12,8a4,4,0,0,1,8,0v6H12ZM24,28H8V16H24Z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M24,14H22V8A6,6,0,0,0,10,8v6H8a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V16A2,2,0,0,0,24,14ZM12,8a4,4,0,0,1,8,0v6H12ZM24,28H8V16H24Z'/></svg>");
}

.ditio-icon--wikis {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z'/></svg>");
}

.dashboard-stats-well__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    color: #9197a3;
    line-height: 1;
}

/* The progress metric is data, not an action - render it as the same kind of
   chip the metric band uses so it reads apart from the icon buttons next to it. */
.dashboard-stats-well__progress {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ditio-sand-1200);
    background: var(--ditio-sand-300);
    border-radius: 999px;
    padding: 5px 10px;
    margin-right: 8px;
}

.dashboard-stats-well__progress .fa {
    font-size: 12px;
    color: var(--ditio-sand-1000);
}

.dashboard-stats-well__progress small {
    font-size: 12px;
}

/* Info/expand are 28px hover-target buttons instead of bare 14px glyphs. */
.dashboard-stats-well__info,
.dashboard-stats-well__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--secondaryText);
    cursor: pointer;
    font-size: 15px;
}

.dashboard-stats-well__info:hover,
.dashboard-stats-well__expand:hover,
.dashboard-stats-well__info:focus,
.dashboard-stats-well__expand:focus {
    background: #F0F0EE;
    color: var(--interaction);
}

.dashboard-stats-well__metric-band,
.dashboard-stats-well__trip-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.dashboard-stats-well__metric-band {
    border: 1px solid var(--grayBackgroundDark);
    border-radius: 4px;
    overflow: hidden;
}

.dashboard-stats-well__weather {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--grayBackgroundDark);
    font-size: 12px;
    cursor: default;
}

.dashboard-stats-well__weather--inline {
    margin: 0 8px;
    font-size: 12px;
    font-weight: normal;
    vertical-align: middle;
}

.dashboard-project-list__metric--weather {
    white-space: nowrap;
}

.dashboard-stats-well__metric-band--summary {
    border: 0;
    border-top: 1px solid var(--grayBackgroundDark);
    border-radius: 0;
    margin-top: 12px;
}

.dashboard-stats-well--selected-project .dashboard-stats-well__metric-band {
    margin-bottom: 10px;
}

.dashboard-stats-well__metric {
    min-width: 0;
    text-align: center;
    border-left: 1px solid var(--grayBackgroundDark);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    padding: 10px 8px 9px;
}

.dashboard-stats-well__metric:first-child {
    border-left: 0;
}

.dashboard-stats-well__metric--live {
    background: #f3f8ff;
    border-left: 4px solid var(--interaction);
}

.dashboard-stats-well__metric > a,
.dashboard-stats-well__metric > span:not(.stat-text):not(.dashboard-stats-well__metric-value),
.dashboard-stats-well__trip-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.dashboard-stats-well__metric > a {
    color: inherit;
    width: 100%;
}

.dashboard-stats-well__metric-value {
    color: var(--ditio-sand-1200);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 6px;
}

.dashboard-stats-well__metric > a:hover .dashboard-stats-well__metric-value,
.dashboard-stats-well__metric > a:focus .dashboard-stats-well__metric-value {
    color: var(--ditio-primary-600);
}

.dashboard-stats-well--project-card .dashboard-stats-well__metric-value,
.dashboard-stats-well--selected-project .dashboard-stats-well__metric-value {
    font-size: 26px;
    margin-bottom: 5px;
}

.dashboard-stats-well__metric--primary .dashboard-stats-well__metric-value {
    font-size: 30px;
    font-weight: 500;
}

.dashboard-stats-well__metric .stat-text,
.dashboard-stats-well__trip-metric .stat-text {
    display: block;
    max-width: 100%;
    color: var(--secondaryText);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
    text-transform: uppercase;
    white-space: normal;
}

.dashboard-stats-well--project-card .dashboard-stats-well__metric .stat-text,
.dashboard-stats-well--selected-project .dashboard-stats-well__metric .stat-text {
    font-size: 11px;
    line-height: 1.15;
}

.dashboard-stats-well__metric .stat-text strong {
    color: inherit;
    font-weight: inherit;
}

.dashboard-stats-well__trip-band {
    border-top: 1px solid #edf0f4;
    padding-top: 8px;
}

.dashboard-stats-well__trip-metric > span:first-child {
    color: var(--ditio-primary-600);
    font-size: 15px;
}

/* Figma card evidence chips: same chip language as the metric band - count +
   label stacked, type icon pinned top-right; notification-type entries get
   the red treatment (light red chip, Red/9 label + icon, dark count). */
.dashboard-stats-well__evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.dashboard-evidence-chip {
    border-radius: 8px;
    background: var(--ditio-sand-300);
    min-height: 71px;
}

.dashboard-evidence-chip > a,
.dashboard-evidence-chip > span {
    position: relative;
    display: block;
    height: 100%;
    min-height: 71px;
    padding: 12px 16px;
    color: inherit;
}

.dashboard-evidence-chip > a:hover,
.dashboard-evidence-chip > a:focus {
    text-decoration: none;
}

.dashboard-evidence-chip__value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ditio-sand-1200);
    margin-bottom: 4px;
}

.dashboard-evidence-chip__label {
    /* max two lines, then ellipsis - the full label is in the tooltip; keeps
       every chip the same height so side-by-side cards stay aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ditio-sand-1000);
    /* keep the label clear of the bottom-right icon - wrap instead of
       running into it (review: machine notifications collided with the truck) */
    padding-right: 26px;
}

.dashboard-evidence-chip__label::first-letter {
    text-transform: uppercase;
}

.dashboard-evidence-chip__icon {
    position: absolute;
    /* Figma pins the type icon to the bottom-right, on the label line */
    bottom: 12px;
    right: 12px;
    font-size: 14px;
    color: var(--ditio-sand-1000);
}

/* Small screens (review): chips get narrow enough that a bottom icon collides
   with the wrapped label - move it up beside the count and give the label the
   full chip width. The metric-band alert icon follows the same rule. */
@media (max-width: 1599px) {
    .dashboard-evidence-chip__icon {
        top: 12px;
        bottom: auto;
    }

    .dashboard-evidence-chip__label {
        padding-right: 0;
    }

    .dashboard-stats-well__metric-alert-icon {
        top: 12px;
        bottom: auto;
    }
}

/* Notification-type entries keep the neutral grey chip - only the type icon
   goes red (review: full red chips were too loud) */
.dashboard-evidence-chip--danger .dashboard-evidence-chip__icon {
    color: var(--ditio-red-1000);
}

/* Figma certificate-cross-cst icon (document with x) rendered as a mask so it
   follows the chip's danger color */
.dashboard-evidence-chip__icon--certificate {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M6 8H3V9H6V8Z' fill='black'/><path d='M8 6H3V7H8V6Z' fill='black'/><path d='M8 4H3V5H8V4Z' fill='black'/><path d='M7 13H2V3H14V7.5H15V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H7V13Z' fill='black'/><path d='M15.2929 9.34315L13.1716 11.4645L11.0503 9.34315L10.3431 10.0503L12.4645 12.1716L10.3431 14.2929L11.0503 15L13.1716 12.8787L15.2929 15L16 14.2929L13.8787 12.1716L16 10.0503L15.2929 9.34315Z' fill='black'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M6 8H3V9H6V8Z' fill='black'/><path d='M8 6H3V7H8V6Z' fill='black'/><path d='M8 4H3V5H8V4Z' fill='black'/><path d='M7 13H2V3H14V7.5H15V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H7V13Z' fill='black'/><path d='M15.2929 9.34315L13.1716 11.4645L11.0503 9.34315L10.3431 10.0503L12.4645 12.1716L10.3431 14.2929L11.0503 15L13.1716 12.8787L15.2929 15L16 14.2929L13.8787 12.1716L16 10.0503L15.2929 9.34315Z' fill='black'/></svg>") center / contain no-repeat;
}

.dashboard-stats-well__chart {
    min-height: 140px;
    height: 140px;
}

.dashboard-stats-well__chart > div {
    height: 140px;
}

.dashboard-stats-well__chart-spacer {
    min-height: 140px;
    height: 140px;
    visibility: hidden;
}

/* Overview redesign: top stat cards - unified with the .dashboard-stats-well__metric-band--chips
   language used everywhere else on the dashboard (gray fill, no border, 8px radius) rather than
   the older bordered-well look, so the top-level KPIs read as the same design system as the
   per-project chips just below them. */
.overview-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}

.overview-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
    margin: 0;
    padding: 16px;
    /* Figma top stat card: 99px tall, white with hairline border */
    min-height: 99px;
    border-radius: 8px;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: none;
}

.overview-stat-card__value {
    color: var(--ditio-sand-1200);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.overview-stat-card__label {
    color: var(--ditio-sand-1000);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

/* No narrower-viewport fallback here on purpose: this row lives inside the
   66%-width main content column (col-sm-8), not the full viewport, so a
   viewport-width media query breaks at normal desktop widths where the
   column itself is much narrower than the breakpoint assumes (e.g. 2+1
   wrap on a completely ordinary 1440px laptop screen). The whole row is
   already hidden below the sm breakpoint via .hidden-xs on its parent, so
   there's no real mobile case left to handle here - three minmax(0,1fr)
   columns comfortably fit at any width this row actually renders at. */

/* Overview redesign: per-project tons moved section */
.dashboard-stats-well__tons-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
    padding: 0 16px;
}

.dashboard-stats-well__tons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-stats-well__tons-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ditio-sand-1200);
}

.dashboard-stats-well__tons-legend {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
    min-width: 0;
}

.dashboard-stats-well__tons-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
}

.dashboard-stats-well__tons-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dashboard-stats-well__tons-chart {
    min-height: 140px;
    height: 140px;
}

.dashboard-stats-well__tons-chart > div {
    height: 140px;
}

/* Overview redesign: feed posts to match Figma (avatar 60, name 18px Azure, meta 12px, padding/gap 16) */
.dashboard #feed .panel.panel-default {
    border: 1px solid var(--ditio-sand-400);
    border-radius: 0;
    background: var(--ditio-sand-100);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .04);
    margin-bottom: 16px;
}

.dashboard #feed .panel.panel-default > .panel-body {
    padding: 16px;
}

.dashboard #feed .panel-body img.avatar-sm {
    width: 60px !important;
    height: 60px !important;
}

.dashboard #feed .panel-body .pull-left:first-child {
    margin-right: 16px;
}

.dashboard #feed .top-name {
    margin: 0 0 3px;
}

.dashboard #feed .panel-body .pull-left,
.dashboard #feed .panel-body .feed-post-author {
    line-height: 1.25;
}

.dashboard #feed .top-name a {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ditio-sand-1200);
}

.dashboard #feed .top-name a:hover,
.dashboard #feed .top-name a:focus,
#feed .top-name a:hover,
#feed .top-name a:focus {
    color: var(--ditio-primary-600);
    text-decoration: underline;
}

.dashboard #feed .panel-body .project-info {
    color: var(--ditio-sand-1000);
    display: inline-block;
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 3px;
}

.dashboard #feed .panel-body .timestamp .feed-svg-icon--lock {
    color: #F3671B;
}

.dashboard #feed .panel-body .timestamp {
    font-size: 12px;
    color: var(--ditio-sand-900);
    line-height: 1.25;
}

/* Figma feed: segmented tabs (active white on sand-gray track) */
.dashboard #feed .btn-group-justified,
#feed .center-layout .btn-group-justified {
    background: var(--ditio-sand-300);
    border: 1px solid var(--ditio-sand-400);
}

#feed .center-layout .btn-group-justified {
    border-radius: 8px;
    overflow: hidden;
}

.dashboard #feed .btn-group-justified .btn,
#feed .center-layout .btn-group-justified .btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ditio-sand-1000) !important;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    padding: 8px 6px;
}

.dashboard #feed .btn-group-justified .btn.active,
#feed .center-layout .btn-group-justified .btn.active {
    background: #FFFFFF;
    color: var(--ditio-sand-1200) !important;
    font-weight: 500;
}

#feed .center-layout .btn-group-justified .btn:hover:not(.active) {
    color: var(--ditio-sand-1200) !important;
}

#feed .center-layout .facets .row + .row {
    margin-top: 10px;
}

.dashboard #feed #top-toggle .btn {
    text-transform: none;
    font-weight: 400;
}

.dashboard #feed #top-toggle .btn.active {
    font-weight: 500;
}

/* Figma feed: pill search input (icon already on the left) */
.dashboard #feed .input-group.search .search-input {
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: none;
}

.dashboard #feed .input-group.search .search-icon {
    color: var(--ditio-sand-1000);
}

/* Figma feed: header action icons - horizontal row, gap 12 (the standalone
   page needs the same flex, otherwise the map-pin div stacks under the pencil).
   The post date stays visible in both renderings - the redesign hid it on the
   dashboard, customers asked for it back (planning-core#721). */
.dashboard #feed .panel-body .created-datetime,
#feed .center-layout .created-datetime {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Feed tooltips must not capture the pointer (ui-bootstrap 0.14.3 leaves them
   pointer-events:auto). The long-label ones sit in narrow shrink-wrapped
   boxes (.created-datetime, .info-center .message-time) and overlap their
   trigger icon; with pointer-events:auto that overlap steals the hover and the
   tooltip flickers / the icon can't be clicked. Matching modern Bootstrap's
   default (pointer-events:none) fixes that for every feed icon. */
#feed .tooltip {
    pointer-events: none;
}

/* The long-label feed tooltips (location pin, Info/System "Last changed" date)
   live in narrow boxes that shrink-wrap the popup and let
   ui-bootstrap 0.14.3 shove it off-centre. A fixed, narrow width makes the text
   wrap into a consistent column that the popup centres on its icon the same way
   on every page and screen size (class set via tooltip-class on those anchors). */
.ditio-feed-tooltip .tooltip-inner {
    width: 85px;
    white-space: normal;
}

#feed .center-layout .created-datetime .feed-svg-icon,
#feed .center-layout .created-datetime .fa {
    color: var(--ditio-primary-600);
}

#feed .center-layout .created-datetime a:hover .feed-svg-icon,
#feed .center-layout .created-datetime a:hover .fa,
#feed .center-layout .created-datetime a:focus .feed-svg-icon,
#feed .center-layout .created-datetime a:focus .fa {
    color: #0165CC;
}

.dashboard #feed .panel-body .created-datetime .fa,
.dashboard #feed .panel-body .created-datetime .feed-mi {
    font-size: 16px;
    color: var(--ditio-primary-600);
}

.dashboard #feed .panel-body .created-datetime a:hover .fa,
.dashboard #feed .panel-body .created-datetime a:hover .feed-mi,
.dashboard #feed .panel-body .created-datetime a:focus .fa,
.dashboard #feed .panel-body .created-datetime a:focus .feed-mi {
    color: #0165CC;
}

/* Figma feed: meta line shows plain text - no clock/pin/building icons.

   Paired with .pull-left, like the line-height rule above, so a client that
   pairs this stylesheet with a cached pre-rename template still suppresses the
   glyphs. Safe because neither leg can reach the comments section: its
   .timestamp is a sibling of .pull-left comment-icon rather than a descendant,
   and it carries no .fa-clock-o (the only two in the template are the
   info-message row and the post header). .project-info occurs only inside
   .feed-post-author. */
.dashboard #feed .panel-body .pull-left .timestamp .fa-clock-o,
.dashboard #feed .panel-body .pull-left .project-info .fa-map-marker,
.dashboard #feed .panel-body .pull-left .project-info .fa-building,
.dashboard #feed .panel-body .feed-post-author .timestamp .fa-clock-o,
.dashboard #feed .panel-body .feed-post-author .project-info .fa-map-marker,
.dashboard #feed .panel-body .feed-post-author .project-info .fa-building {
    display: none;
}

/* Figma design: slim rounded scrollbars on dashboard scroll areas */
.dashboard .scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dashboard .scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard .scroll-container::-webkit-scrollbar-thumb {
    background: #DCDBD7;
    border-radius: 8px;
}

.dashboard .scroll-container::-webkit-scrollbar-thumb:hover {
    background: #C8C7C1;
}

.dashboard .scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #DCDBD7 transparent;
}

/* Figma feed: exact Figma SVG icons rendered via mask so color follows currentColor */
#feed .feed-svg-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    vertical-align: middle;
    flex: 0 0 auto;
}

#feed .feed-svg-icon--edit {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUgMTNIMVYxNEgxNVYxM1oiIGZpbGw9IiMwMTdFRkYiLz48cGF0aCBkPSJNMTIuNyA0LjVDMTMuMSA0LjEgMTMuMSAzLjUgMTIuNyAzLjFMMTAuOSAxLjNDMTAuNSAwLjkgOS45IDAuOSA5LjUgMS4zTDIgOC44VjEySDUuMkwxMi43IDQuNVpNMTAuMiAyTDEyIDMuOEwxMC41IDUuM0w4LjcgMy41TDEwLjIgMlpNMyAxMVY5LjJMOCA0LjJMOS44IDZMNC44IDExSDNaIiBmaWxsPSIjMDE3RUZGIi8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUgMTNIMVYxNEgxNVYxM1oiIGZpbGw9IiMwMTdFRkYiLz48cGF0aCBkPSJNMTIuNyA0LjVDMTMuMSA0LjEgMTMuMSAzLjUgMTIuNyAzLjFMMTAuOSAxLjNDMTAuNSAwLjkgOS45IDAuOSA5LjUgMS4zTDIgOC44VjEySDUuMkwxMi43IDQuNVpNMTAuMiAyTDEyIDMuOEwxMC41IDUuM0w4LjcgMy41TDEwLjIgMlpNMyAxMVY5LjJMOCA0LjJMOS44IDZMNC44IDExSDNaIiBmaWxsPSIjMDE3RUZGIi8+PC9zdmc+");
}

#feed .feed-svg-icon--location {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4wMDAwMSA5QzcuNTA1NTUgOSA3LjAyMjIgOC44NTMzOCA2LjYxMTA4IDguNTc4NjdDNi4xOTk5NiA4LjMwMzk3IDUuODc5NTMgNy45MTM1MiA1LjY5MDMxIDcuNDU2NzFDNS41MDEwOSA2Ljk5OTg5IDUuNDUxNTggNi40OTcyMyA1LjU0ODA0IDYuMDEyMjdDNS42NDQ1MSA1LjUyNzMyIDUuODgyNjEgNS4wODE4NiA2LjIzMjI0IDQuNzMyMjNDNi41ODE4NyA0LjM4MjYgNy4wMjczMyA0LjE0NDUgNy41MTIyOCA0LjA0ODA0QzcuOTk3MjMgMy45NTE1NyA4LjQ5OTkgNC4wMDEwOCA4Ljk1NjcxIDQuMTkwM0M5LjQxMzUzIDQuMzc5NTIgOS44MDM5OCA0LjY5OTk1IDEwLjA3ODcgNS4xMTEwN0MxMC4zNTM0IDUuNTIyMiAxMC41IDYuMDA1NTUgMTAuNSA2LjVDMTAuNDk5MyA3LjE2MjgxIDEwLjIzNTYgNy43OTgyNiA5Ljc2Njk0IDguMjY2OTNDOS4yOTgyNiA4LjczNTYxIDguNjYyODIgOC45OTkyNSA4LjAwMDAxIDlaTTguMDAwMDEgNUM3LjcwMzMzIDUgNy40MTMzMiA1LjA4Nzk3IDcuMTY2NjUgNS4yNTI4QzYuOTE5OTggNS40MTc2MiA2LjcyNzcyIDUuNjUxODkgNi42MTQxOSA1LjkyNTk3QzYuNTAwNjUgNi4yMDAwNiA2LjQ3MDk1IDYuNTAxNjYgNi41Mjg4MyA2Ljc5MjY0QzYuNTg2NzEgNy4wODM2MSA2LjcyOTU3IDcuMzUwODggNi45MzkzNCA3LjU2MDY2QzcuMTQ5MTIgNy43NzA0NCA3LjQxNjQgNy45MTMzIDcuNzA3MzcgNy45NzExOEM3Ljk5ODM0IDguMDI5MDYgOC4yOTk5NCA3Ljk5OTM1IDguNTc0MDMgNy44ODU4MkM4Ljg0ODEyIDcuNzcyMjkgOS4wODIzOSA3LjU4MDAzIDkuMjQ3MjEgNy4zMzMzNkM5LjQxMjAzIDcuMDg2NjggOS41MDAwMSA2Ljc5NjY3IDkuNTAwMDEgNi41QzkuNDk5NTcgNi4xMDIzMSA5LjM0MTM5IDUuNzIxMDMgOS4wNjAxOCA1LjQzOTgyQzguNzc4OTcgNS4xNTg2MSA4LjM5NzcgNS4wMDA0NCA4LjAwMDAxIDVaIiBmaWxsPSIjMDE3RUZGIi8+PHBhdGggZD0iTTguMDAwMDEgMTVMMy43ODIyNiAxMC4wMjU3QzMuNzU4MzEgOS45OTcxIDMuNjA4MTYgOS43OTk5IDMuNjA4MTYgOS43OTk5QzIuODg3NjEgOC44NTA4NCAyLjQ5ODMyIDcuNjkxNiAyLjUwMDAxIDYuNUMyLjUwMDAxIDUuMDQxMzEgMy4wNzk0NyAzLjY0MjM2IDQuMTEwOTIgMi42MTA5MUM1LjE0MjM3IDEuNTc5NDYgNi41NDEzMSAxIDguMDAwMDEgMUM5LjQ1ODcgMSAxMC44NTc2IDEuNTc5NDYgMTEuODg5MSAyLjYxMDkxQzEyLjkyMDUgMy42NDIzNiAxMy41IDUuMDQxMzEgMTMuNSA2LjVDMTMuNTAxOCA3LjY5MTExIDEzLjExMjggOC44NDk5MSAxMi4zOTI2IDkuNzk4NjVMMTIuMzkxOSA5Ljc5OTlDMTIuMzkxOSA5Ljc5OTkgMTIuMjQxOSA5Ljk5NzEgMTIuMjE5NSAxMC4wMjM2TDguMDAwMDEgMTVaTTQuNDA2MjYgOS4xOTc1QzQuNDA2MjYgOS4xOTc1IDQuNTIyOTYgOS4zNTE2IDQuNTQ5NTYgOS4zODQ3TDguMDAwMDEgMTMuNDUzOUwxMS40NTUgOS4zNzg5NUMxMS40NzcgOS4zNTEzNSAxMS41OTQ0IDkuMTk2MSAxMS41OTQ0IDkuMTk2MUMxMi4xODMgOC40MjA2NCAxMi41MDEyIDcuNDczNTYgMTIuNSA2LjVDMTIuNSA1LjMwNjUzIDEyLjAyNTkgNC4xNjE5MyAxMS4xODIgMy4zMTgwMkMxMC4zMzgxIDIuNDc0MTEgOS4xOTM0OCAyIDguMDAwMDEgMkM2LjgwNjUzIDIgNS42NjE5NCAyLjQ3NDExIDQuODE4MDIgMy4zMTgwMkMzLjk3NDExIDQuMTYxOTMgMy41MDAwMSA1LjMwNjUzIDMuNTAwMDEgNi41QzMuNDk4OSA3LjQ3NDA5IDMuODE3MjUgOC40MjE2NyA0LjQwNjI2IDkuMTk3NVoiIGZpbGw9IiMwMTdFRkYiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4wMDAwMSA5QzcuNTA1NTUgOSA3LjAyMjIgOC44NTMzOCA2LjYxMTA4IDguNTc4NjdDNi4xOTk5NiA4LjMwMzk3IDUuODc5NTMgNy45MTM1MiA1LjY5MDMxIDcuNDU2NzFDNS41MDEwOSA2Ljk5OTg5IDUuNDUxNTggNi40OTcyMyA1LjU0ODA0IDYuMDEyMjdDNS42NDQ1MSA1LjUyNzMyIDUuODgyNjEgNS4wODE4NiA2LjIzMjI0IDQuNzMyMjNDNi41ODE4NyA0LjM4MjYgNy4wMjczMyA0LjE0NDUgNy41MTIyOCA0LjA0ODA0QzcuOTk3MjMgMy45NTE1NyA4LjQ5OTkgNC4wMDEwOCA4Ljk1NjcxIDQuMTkwM0M5LjQxMzUzIDQuMzc5NTIgOS44MDM5OCA0LjY5OTk1IDEwLjA3ODcgNS4xMTEwN0MxMC4zNTM0IDUuNTIyMiAxMC41IDYuMDA1NTUgMTAuNSA2LjVDMTAuNDk5MyA3LjE2MjgxIDEwLjIzNTYgNy43OTgyNiA5Ljc2Njk0IDguMjY2OTNDOS4yOTgyNiA4LjczNTYxIDguNjYyODIgOC45OTkyNSA4LjAwMDAxIDlaTTguMDAwMDEgNUM3LjcwMzMzIDUgNy40MTMzMiA1LjA4Nzk3IDcuMTY2NjUgNS4yNTI4QzYuOTE5OTggNS40MTc2MiA2LjcyNzcyIDUuNjUxODkgNi42MTQxOSA1LjkyNTk3QzYuNTAwNjUgNi4yMDAwNiA2LjQ3MDk1IDYuNTAxNjYgNi41Mjg4MyA2Ljc5MjY0QzYuNTg2NzEgNy4wODM2MSA2LjcyOTU3IDcuMzUwODggNi45MzkzNCA3LjU2MDY2QzcuMTQ5MTIgNy43NzA0NCA3LjQxNjQgNy45MTMzIDcuNzA3MzcgNy45NzExOEM3Ljk5ODM0IDguMDI5MDYgOC4yOTk5NCA3Ljk5OTM1IDguNTc0MDMgNy44ODU4MkM4Ljg0ODEyIDcuNzcyMjkgOS4wODIzOSA3LjU4MDAzIDkuMjQ3MjEgNy4zMzMzNkM5LjQxMjAzIDcuMDg2NjggOS41MDAwMSA2Ljc5NjY3IDkuNTAwMDEgNi41QzkuNDk5NTcgNi4xMDIzMSA5LjM0MTM5IDUuNzIxMDMgOS4wNjAxOCA1LjQzOTgyQzguNzc4OTcgNS4xNTg2MSA4LjM5NzcgNS4wMDA0NCA4LjAwMDAxIDVaIiBmaWxsPSIjMDE3RUZGIi8+PHBhdGggZD0iTTguMDAwMDEgMTVMMy43ODIyNiAxMC4wMjU3QzMuNzU4MzEgOS45OTcxIDMuNjA4MTYgOS43OTk5IDMuNjA4MTYgOS43OTk5QzIuODg3NjEgOC44NTA4NCAyLjQ5ODMyIDcuNjkxNiAyLjUwMDAxIDYuNUMyLjUwMDAxIDUuMDQxMzEgMy4wNzk0NyAzLjY0MjM2IDQuMTEwOTIgMi42MTA5MUM1LjE0MjM3IDEuNTc5NDYgNi41NDEzMSAxIDguMDAwMDEgMUM5LjQ1ODcgMSAxMC44NTc2IDEuNTc5NDYgMTEuODg5MSAyLjYxMDkxQzEyLjkyMDUgMy42NDIzNiAxMy41IDUuMDQxMzEgMTMuNSA2LjVDMTMuNTAxOCA3LjY5MTExIDEzLjExMjggOC44NDk5MSAxMi4zOTI2IDkuNzk4NjVMMTIuMzkxOSA5Ljc5OTlDMTIuMzkxOSA5Ljc5OTkgMTIuMjQxOSA5Ljk5NzEgMTIuMjE5NSAxMC4wMjM2TDguMDAwMDEgMTVaTTQuNDA2MjYgOS4xOTc1QzQuNDA2MjYgOS4xOTc1IDQuNTIyOTYgOS4zNTE2IDQuNTQ5NTYgOS4zODQ3TDguMDAwMDEgMTMuNDUzOUwxMS40NTUgOS4zNzg5NUMxMS40NzcgOS4zNTEzNSAxMS41OTQ0IDkuMTk2MSAxMS41OTQ0IDkuMTk2MUMxMi4xODMgOC40MjA2NCAxMi41MDEyIDcuNDczNTYgMTIuNSA2LjVDMTIuNSA1LjMwNjUzIDEyLjAyNTkgNC4xNjE5MyAxMS4xODIgMy4zMTgwMkMxMC4zMzgxIDIuNDc0MTEgOS4xOTM0OCAyIDguMDAwMDEgMkM2LjgwNjUzIDIgNS42NjE5NCAyLjQ3NDExIDQuODE4MDIgMy4zMTgwMkMzLjk3NDExIDQuMTYxOTMgMy41MDAwMSA1LjMwNjUzIDMuNTAwMDEgNi41QzMuNDk4OSA3LjQ3NDA5IDMuODE3MjUgOC40MjE2NyA0LjQwNjI2IDkuMTk3NVoiIGZpbGw9IiMwMTdFRkYiLz48L3N2Zz4=");
}

#feed .feed-svg-icon--thumb {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy41IDcuNUgxVjE0LjVIMy41VjcuNVoiIGZpbGw9IiMwMTdFRkYiLz48cGF0aCBkPSJNMTEuNSAxNC41SDQuNVY3LjA5ODY1TDYuMDIxMSA0LjgxNjlMNi40NDM3NSAxLjg1ODY1QzYuNDc4NyAxLjYyMDc2IDYuNTk3OCAxLjQwMzMgNi43Nzk0MyAxLjI0NTc1QzYuOTYxMDYgMS4wODgxOSA3LjE5MzE2IDEuMDAxIDcuNDMzNiAxSDcuNUM3Ljg5NzY5IDEuMDAwNDQgOC4yNzg5NyAxLjE1ODYxIDguNTYwMTggMS40Mzk4MkM4Ljg0MTM5IDEuNzIxMDMgOC45OTk1NiAyLjEwMjMxIDkgMi41VjUuNUgxM0MxMy41MzAzIDUuNTAwNiAxNC4wMzg2IDUuNzExNSAxNC40MTM2IDYuMDg2NDRDMTQuNzg4NSA2LjQ2MTM5IDE0Ljk5OTQgNi45Njk3NSAxNSA3LjVWMTFDMTQuOTk5IDExLjkyNzkgMTQuNjI5OSAxMi44MTc2IDEzLjk3MzcgMTMuNDczN0MxMy4zMTc2IDE0LjEyOTkgMTIuNDI3OSAxNC40OTkgMTEuNSAxNC41WiIgZmlsbD0iIzAxN0VGRiIvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy41IDcuNUgxVjE0LjVIMy41VjcuNVoiIGZpbGw9IiMwMTdFRkYiLz48cGF0aCBkPSJNMTEuNSAxNC41SDQuNVY3LjA5ODY1TDYuMDIxMSA0LjgxNjlMNi40NDM3NSAxLjg1ODY1QzYuNDc4NyAxLjYyMDc2IDYuNTk3OCAxLjQwMzMgNi43Nzk0MyAxLjI0NTc1QzYuOTYxMDYgMS4wODgxOSA3LjE5MzE2IDEuMDAxIDcuNDMzNiAxSDcuNUM3Ljg5NzY5IDEuMDAwNDQgOC4yNzg5NyAxLjE1ODYxIDguNTYwMTggMS40Mzk4MkM4Ljg0MTM5IDEuNzIxMDMgOC45OTk1NiAyLjEwMjMxIDkgMi41VjUuNUgxM0MxMy41MzAzIDUuNTAwNiAxNC4wMzg2IDUuNzExNSAxNC40MTM2IDYuMDg2NDRDMTQuNzg4NSA2LjQ2MTM5IDE0Ljk5OTQgNi45Njk3NSAxNSA3LjVWMTFDMTQuOTk5IDExLjkyNzkgMTQuNjI5OSAxMi44MTc2IDEzLjk3MzcgMTMuNDczN0MxMy4zMTc2IDE0LjEyOTkgMTIuNDI3OSAxNC40OTkgMTEuNSAxNC41WiIgZmlsbD0iIzAxN0VGRiIvPjwvc3ZnPg==");
}

#feed .feed-svg-icon--thumb-outline {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgNS41SDEwVjIuNUM5Ljk5OTU2IDIuMTAyMzEgOS44NDEzOSAxLjcyMTAzIDkuNTYwMTggMS40Mzk4MkM5LjI3ODk3IDEuMTU4NjEgOC44OTc2OSAxLjAwMDQ0IDguNSAxSDcuNDMzNkM3LjE5MzE0IDEuMDAwOTYgNi45NjA5OSAxLjA4ODE0IDYuNzc5MzQgMS4yNDU3QzYuNTk3NjggMS40MDMyNSA2LjQ3ODU1IDEuNjIwNzQgNi40NDM2IDEuODU4NjVMNi4wMjA5NSA0LjgxNjlMNC4yMzI0IDcuNUgxVjE0LjVIMTEuNUMxMi40Mjc5IDE0LjQ5OSAxMy4zMTc2IDE0LjEyOTkgMTMuOTczNyAxMy40NzM3QzE0LjYyOTkgMTIuODE3NiAxNC45OTkgMTEuOTI3OSAxNSAxMVY3LjVDMTQuOTk5NCA2Ljk2OTc1IDE0Ljc4ODUgNi40NjEzOSAxNC40MTM2IDYuMDg2NDRDMTQuMDM4NiA1LjcxMTUgMTMuNTMwMyA1LjUwMDYgMTMgNS41Wk00IDEzLjVIMlY4LjVINFYxMy41Wk0xNCAxMUMxMy45OTkyIDExLjY2MjggMTMuNzM1NiAxMi4yOTgzIDEzLjI2NjkgMTIuNzY2OUMxMi43OTgzIDEzLjIzNTYgMTIuMTYyOCAxMy40OTkyIDExLjUgMTMuNUg1VjguMTUxMzVMNi45Nzg5IDUuMTgzMUw3LjQzMzYgMkg4LjVDOC42MzI1OCAyLjAwMDExIDguNzU5NjkgMi4wNTI4MiA4Ljg1MzQ0IDIuMTQ2NTZDOC45NDcxOCAyLjI0MDMxIDguOTk5ODkgMi4zNjc0MiA5IDIuNVY2LjVIMTNDMTMuMjY1MSA2LjUwMDMzIDEzLjUxOTMgNi42MDU3OSAxMy43MDY3IDYuNzkzMjZDMTMuODk0MiA2Ljk4MDcyIDEzLjk5OTcgNy4yMzQ4OSAxNCA3LjVWMTFaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgNS41SDEwVjIuNUM5Ljk5OTU2IDIuMTAyMzEgOS44NDEzOSAxLjcyMTAzIDkuNTYwMTggMS40Mzk4MkM5LjI3ODk3IDEuMTU4NjEgOC44OTc2OSAxLjAwMDQ0IDguNSAxSDcuNDMzNkM3LjE5MzE0IDEuMDAwOTYgNi45NjA5OSAxLjA4ODE0IDYuNzc5MzQgMS4yNDU3QzYuNTk3NjggMS40MDMyNSA2LjQ3ODU1IDEuNjIwNzQgNi40NDM2IDEuODU4NjVMNi4wMjA5NSA0LjgxNjlMNC4yMzI0IDcuNUgxVjE0LjVIMTEuNUMxMi40Mjc5IDE0LjQ5OSAxMy4zMTc2IDE0LjEyOTkgMTMuOTczNyAxMy40NzM3QzE0LjYyOTkgMTIuODE3NiAxNC45OTkgMTEuOTI3OSAxNSAxMVY3LjVDMTQuOTk5NCA2Ljk2OTc1IDE0Ljc4ODUgNi40NjEzOSAxNC40MTM2IDYuMDg2NDRDMTQuMDM4NiA1LjcxMTUgMTMuNTMwMyA1LjUwMDYgMTMgNS41Wk00IDEzLjVIMlY4LjVINFYxMy41Wk0xNCAxMUMxMy45OTkyIDExLjY2MjggMTMuNzM1NiAxMi4yOTgzIDEzLjI2NjkgMTIuNzY2OUMxMi43OTgzIDEzLjIzNTYgMTIuMTYyOCAxMy40OTkyIDExLjUgMTMuNUg1VjguMTUxMzVMNi45Nzg5IDUuMTgzMUw3LjQzMzYgMkg4LjVDOC42MzI1OCAyLjAwMDExIDguNzU5NjkgMi4wNTI4MiA4Ljg1MzQ0IDIuMTQ2NTZDOC45NDcxOCAyLjI0MDMxIDguOTk5ODkgMi4zNjc0MiA5IDIuNVY2LjVIMTNDMTMuMjY1MSA2LjUwMDMzIDEzLjUxOTMgNi42MDU3OSAxMy43MDY3IDYuNzkzMjZDMTMuODk0MiA2Ljk4MDcyIDEzLjk5OTcgNy4yMzQ4OSAxNCA3LjVWMTFaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
}

#feed .feed-svg-icon--comment {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44NyAxNUw4IDE0LjVMMTAgMTFIMTNDMTMuMjY1MiAxMSAxMy41MTk2IDEwLjg5NDYgMTMuNzA3MSAxMC43MDcxQzEzLjg5NDYgMTAuNTE5NiAxNCAxMC4yNjUyIDE0IDEwVjRDMTQgMy43MzQ3OCAxMy44OTQ2IDMuNDgwNDMgMTMuNzA3MSAzLjI5Mjg5QzEzLjUxOTYgMy4xMDUzNiAxMy4yNjUyIDMgMTMgM0gzQzIuNzM0NzggMyAyLjQ4MDQzIDMuMTA1MzYgMi4yOTI4OSAzLjI5Mjg5QzIuMTA1MzYgMy40ODA0MyAyIDMuNzM0NzggMiA0VjEwQzIgMTAuMjY1MiAyLjEwNTM2IDEwLjUxOTYgMi4yOTI4OSAxMC43MDcxQzIuNDgwNDMgMTAuODk0NiAyLjczNDc4IDExIDMgMTFINy41VjEySDNDMi40Njk1NyAxMiAxLjk2MDg2IDExLjc4OTMgMS41ODU3OSAxMS40MTQyQzEuMjEwNzEgMTEuMDM5MSAxIDEwLjUzMDQgMSAxMFY0QzEgMy40Njk1NyAxLjIxMDcxIDIuOTYwODYgMS41ODU3OSAyLjU4NTc5QzEuOTYwODYgMi4yMTA3MSAyLjQ2OTU3IDIgMyAySDEzQzEzLjUzMDQgMiAxNC4wMzkxIDIuMjEwNzEgMTQuNDE0MiAyLjU4NTc5QzE0Ljc4OTMgMi45NjA4NiAxNSAzLjQ2OTU3IDE1IDRWMTBDMTUgMTAuNTMwNCAxNC43ODkzIDExLjAzOTEgMTQuNDE0MiAxMS40MTQyQzE0LjAzOTEgMTEuNzg5MyAxMy41MzA0IDEyIDEzIDEySDEwLjU4TDguODcgMTVaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44NyAxNUw4IDE0LjVMMTAgMTFIMTNDMTMuMjY1MiAxMSAxMy41MTk2IDEwLjg5NDYgMTMuNzA3MSAxMC43MDcxQzEzLjg5NDYgMTAuNTE5NiAxNCAxMC4yNjUyIDE0IDEwVjRDMTQgMy43MzQ3OCAxMy44OTQ2IDMuNDgwNDMgMTMuNzA3MSAzLjI5Mjg5QzEzLjUxOTYgMy4xMDUzNiAxMy4yNjUyIDMgMTMgM0gzQzIuNzM0NzggMyAyLjQ4MDQzIDMuMTA1MzYgMi4yOTI4OSAzLjI5Mjg5QzIuMTA1MzYgMy40ODA0MyAyIDMuNzM0NzggMiA0VjEwQzIgMTAuMjY1MiAyLjEwNTM2IDEwLjUxOTYgMi4yOTI4OSAxMC43MDcxQzIuNDgwNDMgMTAuODk0NiAyLjczNDc4IDExIDMgMTFINy41VjEySDNDMi40Njk1NyAxMiAxLjk2MDg2IDExLjc4OTMgMS41ODU3OSAxMS40MTQyQzEuMjEwNzEgMTEuMDM5MSAxIDEwLjUzMDQgMSAxMFY0QzEgMy40Njk1NyAxLjIxMDcxIDIuOTYwODYgMS41ODU3OSAyLjU4NTc5QzEuOTYwODYgMi4yMTA3MSAyLjQ2OTU3IDIgMyAySDEzQzEzLjUzMDQgMiAxNC4wMzkxIDIuMjEwNzEgMTQuNDE0MiAyLjU4NTc5QzE0Ljc4OTMgMi45NjA4NiAxNSAzLjQ2OTU3IDE1IDRWMTBDMTUgMTAuNTMwNCAxNC43ODkzIDExLjAzOTEgMTQuNDE0MiAxMS40MTQyQzE0LjAzOTEgMTEuNzg5MyAxMy41MzA0IDEyIDEzIDEySDEwLjU4TDguODcgMTVaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
}

#feed .feed-svg-icon--send {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMTU2MiA5LjQ0Mzc1TDMuNDA2MjQgMi41Njg3NUMzLjI5ODQ3IDIuNTE0ODYgMy4xNzc0MiAyLjQ5MzI2IDMuMDU3NjYgMi41MDY1N0MyLjkzNzkxIDIuNTE5ODggMi44MjQ1NSAyLjU2NzUyIDIuNzMxMjQgMi42NDM3NUMyLjY0MjEzIDIuNzE4NDQgMi41NzU2MiAyLjgxNjUgMi41MzkxOCAyLjkyNjkxQzIuNTAyNzUgMy4wMzczMiAyLjQ5NzgzIDMuMTU1NyAyLjUyNDk5IDMuMjY4NzVMNC4zNzQ5OSAxMEwyLjQ5OTk5IDE2LjcxMjVDMi40NzQ1MSAxNi44MDY5IDIuNDcxNTMgMTYuOTA2IDIuNDkxMyAxNy4wMDE4QzIuNTExMDggMTcuMDk3NSAyLjU1MzA1IDE3LjE4NzMgMi42MTM4NCAxNy4yNjM5QzIuNjc0NjMgMTcuMzQwNSAyLjc1MjU1IDE3LjQwMTggMi44NDEzMiAxNy40NDI4QzIuOTMwMSAxNy40ODM4IDMuMDI3MjYgMTcuNTAzNCAzLjEyNDk5IDE3LjVDMy4yMjI4MyAxNy40OTk0IDMuMzE5MTYgMTcuNDc1OSAzLjQwNjI0IDE3LjQzMTNMMTcuMTU2MiAxMC41NTYzQzE3LjI1ODYgMTAuNTAzOCAxNy4zNDQ1IDEwLjQyNDEgMTcuNDA0NSAxMC4zMjZDMTcuNDY0NSAxMC4yMjc4IDE3LjQ5NjMgMTAuMTE1IDE3LjQ5NjMgMTBDMTcuNDk2MyA5Ljg4NDk3IDE3LjQ2NDUgOS43NzIxOCAxNy40MDQ1IDkuNjc0MDNDMTcuMzQ0NSA5LjU3NTg5IDE3LjI1ODYgOS40OTYyIDE3LjE1NjIgOS40NDM3NVpNNC4wOTM3NCAxNS42OTM4TDUuNDc0OTkgMTAuNjI1SDExLjI1VjkuMzc1SDUuNDc0OTlMNC4wOTM3NCA0LjMwNjI1TDE1LjQ3NSAxMEw0LjA5Mzc0IDE1LjY5MzhaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMTU2MiA5LjQ0Mzc1TDMuNDA2MjQgMi41Njg3NUMzLjI5ODQ3IDIuNTE0ODYgMy4xNzc0MiAyLjQ5MzI2IDMuMDU3NjYgMi41MDY1N0MyLjkzNzkxIDIuNTE5ODggMi44MjQ1NSAyLjU2NzUyIDIuNzMxMjQgMi42NDM3NUMyLjY0MjEzIDIuNzE4NDQgMi41NzU2MiAyLjgxNjUgMi41MzkxOCAyLjkyNjkxQzIuNTAyNzUgMy4wMzczMiAyLjQ5NzgzIDMuMTU1NyAyLjUyNDk5IDMuMjY4NzVMNC4zNzQ5OSAxMEwyLjQ5OTk5IDE2LjcxMjVDMi40NzQ1MSAxNi44MDY5IDIuNDcxNTMgMTYuOTA2IDIuNDkxMyAxNy4wMDE4QzIuNTExMDggMTcuMDk3NSAyLjU1MzA1IDE3LjE4NzMgMi42MTM4NCAxNy4yNjM5QzIuNjc0NjMgMTcuMzQwNSAyLjc1MjU1IDE3LjQwMTggMi44NDEzMiAxNy40NDI4QzIuOTMwMSAxNy40ODM4IDMuMDI3MjYgMTcuNTAzNCAzLjEyNDk5IDE3LjVDMy4yMjI4MyAxNy40OTk0IDMuMzE5MTYgMTcuNDc1OSAzLjQwNjI0IDE3LjQzMTNMMTcuMTU2MiAxMC41NTYzQzE3LjI1ODYgMTAuNTAzOCAxNy4zNDQ1IDEwLjQyNDEgMTcuNDA0NSAxMC4zMjZDMTcuNDY0NSAxMC4yMjc4IDE3LjQ5NjMgMTAuMTE1IDE3LjQ5NjMgMTBDMTcuNDk2MyA5Ljg4NDk3IDE3LjQ2NDUgOS43NzIxOCAxNy40MDQ1IDkuNjc0MDNDMTcuMzQ0NSA5LjU3NTg5IDE3LjI1ODYgOS40OTYyIDE3LjE1NjIgOS40NDM3NVpNNC4wOTM3NCAxNS42OTM4TDUuNDc0OTkgMTAuNjI1SDExLjI1VjkuMzc1SDUuNDc0OTlMNC4wOTM3NCA0LjMwNjI1TDE1LjQ3NSAxMEw0LjA5Mzc0IDE1LjY5MzhaIiBmaWxsPSIjMUIxQjE4Ii8+PC9zdmc+");
}

#feed .feed-svg-icon--globe {
    /* Carbon "earth--filled" - same globe the React web app uses on feed posts */
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z'/></svg>");
}

#feed .feed-svg-icon--lock {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNSw3IEw1LDUgQTMsMyAwIDAsMSAxMSw1IEwxMSw3IiBzdHJva2U9IiNFQTU1NUEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iNyIgcng9IjEuNSIgZmlsbD0iI0VBNTU1QSIvPjwvc3ZnPgo=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNSw3IEw1LDUgQTMsMyAwIDAsMSAxMSw1IEwxMSw3IiBzdHJva2U9IiNFQTU1NUEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iNyIgcng9IjEuNSIgZmlsbD0iI0VBNTU1QSIvPjwvc3ZnPgo=");
}

#feed .feed-svg-icon--search {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTguMTI1IDE3LjI0MTJMMTMuNDA1IDEyLjUyMTFDMTQuNTM5MiAxMS4xNTk1IDE1LjEwNDcgOS40MTI5OCAxNC45ODQgNy42NDQ5NUMxNC44NjMzIDUuODc2OTIgMTQuMDY1NyA0LjIyMzQ5IDEyLjc1NjkgMy4wMjg2MUMxMS40NDgyIDEuODMzNzMgOS43MjkyMiAxLjE4OTQgNy45NTc1MyAxLjIyOTY2QzYuMTg1ODQgMS4yNjk5MiA0LjQ5Nzg4IDEuOTkxNjcgMy4yNDQ3OSAzLjI0NDc3QzEuOTkxNjkgNC40OTc4NiAxLjI2OTk0IDYuMTg1ODIgMS4yMjk2OCA3Ljk1NzUxQzEuMTg5NDIgOS43MjkxOSAxLjgzMzc1IDExLjQ0ODIgMy4wMjg2MyAxMi43NTY5QzQuMjIzNTEgMTQuMDY1NiA1Ljg3Njk1IDE0Ljg2MzMgNy42NDQ5OCAxNC45ODRDOS40MTMgMTUuMTA0NyAxMS4xNTk1IDE0LjUzOTEgMTIuNTIxMiAxMy40MDQ5TDE3LjI0MTIgMTguMTI1TDE4LjEyNSAxNy4yNDEyWk0yLjUwMDAzIDguMTI1QzIuNTAwMDMgNy4wMTI0OCAyLjgyOTkzIDUuOTI0OTUgMy40NDgwMSA0Ljk5OTkyQzQuMDY2MDkgNC4wNzQ4OSA0Ljk0NDYgMy4zNTM5MiA1Ljk3MjQzIDIuOTI4MThDNy4wMDAyNyAyLjUwMjQ0IDguMTMxMjcgMi4zOTEwNCA5LjIyMjQxIDIuNjA4MDlDMTAuMzEzNiAyLjgyNTEzIDExLjMxNTggMy4zNjA4NiAxMi4xMDI1IDQuMTQ3NTNDMTIuODg5MiA0LjkzNDIgMTMuNDI0OSA1LjkzNjQ4IDEzLjY0MTkgNy4wMjc2MkMxMy44NTkgOC4xMTg3NiAxMy43NDc2IDkuMjQ5NzYgMTMuMzIxOCAxMC4yNzc2QzEyLjg5NjEgMTEuMzA1NCAxMi4xNzUxIDEyLjE4MzkgMTEuMjUwMSAxMi44MDJDMTAuMzI1MSAxMy40MjAxIDkuMjM3NTUgMTMuNzUgOC4xMjUwMyAxMy43NUM2LjYzMzY5IDEzLjc0ODMgNS4yMDM5MSAxMy4xNTUyIDQuMTQ5MzggMTIuMTAwN0MzLjA5NDg0IDExLjA0NjEgMi41MDE2OCA5LjYxNjM0IDIuNTAwMDMgOC4xMjVaIiBmaWxsPSIjOTA5MDhDIi8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTguMTI1IDE3LjI0MTJMMTMuNDA1IDEyLjUyMTFDMTQuNTM5MiAxMS4xNTk1IDE1LjEwNDcgOS40MTI5OCAxNC45ODQgNy42NDQ5NUMxNC44NjMzIDUuODc2OTIgMTQuMDY1NyA0LjIyMzQ5IDEyLjc1NjkgMy4wMjg2MUMxMS40NDgyIDEuODMzNzMgOS43MjkyMiAxLjE4OTQgNy45NTc1MyAxLjIyOTY2QzYuMTg1ODQgMS4yNjk5MiA0LjQ5Nzg4IDEuOTkxNjcgMy4yNDQ3OSAzLjI0NDc3QzEuOTkxNjkgNC40OTc4NiAxLjI2OTk0IDYuMTg1ODIgMS4yMjk2OCA3Ljk1NzUxQzEuMTg5NDIgOS43MjkxOSAxLjgzMzc1IDExLjQ0ODIgMy4wMjg2MyAxMi43NTY5QzQuMjIzNTEgMTQuMDY1NiA1Ljg3Njk1IDE0Ljg2MzMgNy42NDQ5OCAxNC45ODRDOS40MTMgMTUuMTA0NyAxMS4xNTk1IDE0LjUzOTEgMTIuNTIxMiAxMy40MDQ5TDE3LjI0MTIgMTguMTI1TDE4LjEyNSAxNy4yNDEyWk0yLjUwMDAzIDguMTI1QzIuNTAwMDMgNy4wMTI0OCAyLjgyOTkzIDUuOTI0OTUgMy40NDgwMSA0Ljk5OTkyQzQuMDY2MDkgNC4wNzQ4OSA0Ljk0NDYgMy4zNTM5MiA1Ljk3MjQzIDIuOTI4MThDNy4wMDAyNyAyLjUwMjQ0IDguMTMxMjcgMi4zOTEwNCA5LjIyMjQxIDIuNjA4MDlDMTAuMzEzNiAyLjgyNTEzIDExLjMxNTggMy4zNjA4NiAxMi4xMDI1IDQuMTQ3NTNDMTIuODg5MiA0LjkzNDIgMTMuNDI0OSA1LjkzNjQ4IDEzLjY0MTkgNy4wMjc2MkMxMy44NTkgOC4xMTg3NiAxMy43NDc2IDkuMjQ5NzYgMTMuMzIxOCAxMC4yNzc2QzEyLjg5NjEgMTEuMzA1NCAxMi4xNzUxIDEyLjE4MzkgMTEuMjUwMSAxMi44MDJDMTAuMzI1MSAxMy40MjAxIDkuMjM3NTUgMTMuNzUgOC4xMjUwMyAxMy43NUM2LjYzMzY5IDEzLjc0ODMgNS4yMDM5MSAxMy4xNTUyIDQuMTQ5MzggMTIuMTAwN0MzLjA5NDg0IDExLjA0NjEgMi41MDE2OCA5LjYxNjM0IDIuNTAwMDMgOC4xMjVaIiBmaWxsPSIjOTA5MDhDIi8+PC9zdmc+");
}

/* Figma feed: icon colors per placement */
.dashboard #feed .panel-body .created-datetime .feed-svg-icon {
    color: var(--ditio-primary-600);
}

.dashboard #feed .panel-body .created-datetime a:hover .feed-svg-icon,
.dashboard #feed .panel-body .created-datetime a:focus .feed-svg-icon {
    color: #0165CC;
}

/* The edit pencil and location pin stay black (not the blue header-icon blue) */
.dashboard #feed .panel-body .created-datetime .feed-svg-icon--edit,
#feed .center-layout .created-datetime .feed-svg-icon--edit,
#feed .edit-mode .feed-svg-icon--edit,
.dashboard #feed .panel-body .created-datetime .feed-svg-icon--location,
#feed .center-layout .created-datetime .feed-svg-icon--location,
#feed .feed-svg-icon--location {
    color: var(--ditio-sand-1200);
}

.dashboard #feed .panel-body .created-datetime a:hover .feed-svg-icon--edit,
.dashboard #feed .panel-body .created-datetime a:focus .feed-svg-icon--edit,
#feed .center-layout .created-datetime a:hover .feed-svg-icon--edit,
#feed .center-layout .created-datetime a:focus .feed-svg-icon--edit,
.dashboard #feed .panel-body .created-datetime a:hover .feed-svg-icon--location,
.dashboard #feed .panel-body .created-datetime a:focus .feed-svg-icon--location,
#feed .center-layout .created-datetime a:hover .feed-svg-icon--location,
#feed .center-layout .created-datetime a:focus .feed-svg-icon--location {
    color: #3A3A37;
}

.dashboard #feed .footer-actions .footer-action .feed-svg-icon {
    color: var(--ditio-sand-1200);
}

.dashboard #feed .footer-actions .footer-action.action-done .feed-svg-icon {
    color: var(--ditio-sand-1200);
}

.dashboard #feed .footer-actions .footer-action.action-done .footer-action-count {
    color: var(--ditio-sand-1200);
}

.dashboard #feed .panel-footer.comments .btn-icon .feed-svg-icon,
#feed .center-layout .panel-footer.comments .btn-icon .feed-svg-icon {
    width: 20px;
    height: 20px;
    color: var(--ditio-sand-1200);
}

.dashboard #feed .panel-footer.comments .btn-icon,
.dashboard #feed .panel-footer.comments .btn-icon[disabled],
#feed .center-layout .panel-footer.comments .btn-icon,
#feed .center-layout .panel-footer.comments .btn-icon[disabled] {
    opacity: 1;
    color: var(--ditio-sand-1200);
}

.dashboard #feed .input-group.search .search-icon .feed-svg-icon {
    color: var(--ditio-sand-1000);
}

/* Figma feed: borderless comment footer with divider */
.dashboard #feed .panel-footer.comments,
#feed .center-layout .panel-footer.comments {
    background: var(--ditio-sand-100);
    border-top: 1px solid var(--ditio-sand-500);
    border-radius: 0;
    padding: 4px 8px;
}

.dashboard #feed .panel-footer.comments .input-group .form-control,
#feed .center-layout .panel-footer.comments .input-group .form-control {
    border: 0;
    box-shadow: none;
    background: transparent;
    font-size: 14px;
    height: 40px;
}

.dashboard #feed .panel-footer.comments .input-group-btn > .btn,
#feed .center-layout .panel-footer.comments .input-group-btn > .btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ditio-sand-1200);
}

/* Figma feed: like/comment action row - icon + count pairs (Figma: icon-count 7px, groups 20px) */
.dashboard #feed .footer-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 16px 12px;
}

.dashboard #feed .footer-actions .footer-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ditio-sand-1200);
    font-size: 14px;
    padding: 0;
    margin: 0;
}

.dashboard #feed .footer-actions .footer-action:hover {
    text-decoration: none;
}

.dashboard #feed .footer-actions .footer-action-count {
    font-size: 14px;
    color: var(--ditio-sand-1200);
    line-height: 1;
}

/* Figma feed: comment formatting - compact rows, small avatar, name/date/text
   stacked, no bubble (review: comments took too much vertical space) */
.dashboard #feed .panel-footer.comments .comment.row,
#feed .center-layout .panel-footer.comments .comment.row {
    padding: 8px;
    margin: 0;
}

.dashboard #feed .panel-footer.comments .comment.row > .col-xs-12,
#feed .center-layout .panel-footer.comments .comment.row > .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

/* Facebook-style: no divider between comments - the bubbles separate them */
.dashboard #feed .panel-footer.comments .comment.row + .comment.row,
#feed .center-layout .panel-footer.comments .comment.row + .comment.row {
    border-top: 0;
    padding-top: 0;
}

.dashboard #feed .panel-footer.comments .comment .comment-icon,
#feed .center-layout .panel-footer.comments .comment .comment-icon {
    width: 32px;
    margin-right: 10px;
    padding: 0;
}

.dashboard #feed .panel-footer.comments .comment .comment-icon a,
#feed .center-layout .panel-footer.comments .comment .comment-icon a {
    display: block;
    width: 32px;
    height: 32px;
}

.dashboard #feed .panel-footer.comments .comment .comment-icon img,
#feed .center-layout .panel-footer.comments .comment .comment-icon img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Figma feed: "Write a comment" row has no avatar box at the start (dashboard-embedded widget only) */
.dashboard #feed .panel-footer.comments .input-group > .input-group-addon {
    display: none;
}

/* Dashboard-embedded widget: the comment composer never got the flex layout the standalone
   page's .center-layout counterpart has (see below), so Bootstrap's default .input-group
   table layout let the .form-control cell grow unbounded and push the send button/icon
   past the panel's right edge. Mirror the standalone fix here. */
.dashboard #feed .panel-footer.comments .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard #feed .panel-footer.comments .input-group .form-control,
#feed .center-layout .panel-footer.comments .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard #feed .panel-footer.comments .input-group-btn,
#feed .center-layout .panel-footer.comments .input-group-btn {
    display: flex;
    flex: 0 0 auto;
    /* Bootstrap's .input-group-btn { width: 1% } becomes the flex-basis here and
       collapses the wrapper to ~5px, letting the 50px send button overflow past
       the panel's right edge. */
    width: auto;
}

/* Standalone feed page: keep the composer avatar visible, restyled as a small circle
   (intentional deviation from the dashboard-embedded rule above - see restyle plan Area 3) */
#feed .center-layout .panel-footer.comments .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
}

#feed .center-layout .panel-footer.comments .input-group > .input-group-addon {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    width: 32px;
    flex: 0 0 auto;
}

#feed .center-layout .panel-footer.comments .input-group > .input-group-addon img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}

.dashboard #feed .panel-footer.comments .comment .comment-text,
#feed .center-layout .panel-footer.comments .comment .comment-text {
    overflow: hidden;
    background: transparent;
    padding: 0;
}

/* Facebook-style comment: name + text inside a grey rounded bubble, name bold
   at the same size as the text, timestamp below the bubble */
.dashboard #feed .panel-footer.comments .comment .comment-bubble,
#feed .center-layout .panel-footer.comments .comment .comment-bubble {
    display: inline-block;
    max-width: 100%;
    background: #F0F0EE;
    border-radius: 16px;
    padding: 8px 12px;
}

.dashboard #feed .panel-footer.comments .comment .comment-bubble__name,
.dashboard #feed .panel-footer.comments .comment .comment-bubble__name span,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name span {
    display: block;
    color: var(--ditio-sand-1200);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.dashboard #feed .panel-footer.comments .comment .comment-bubble__name:hover,
.dashboard #feed .panel-footer.comments .comment .comment-bubble__name:hover span,
.dashboard #feed .panel-footer.comments .comment .comment-bubble__name:focus,
.dashboard #feed .panel-footer.comments .comment .comment-bubble__name:focus span,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name:hover,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name:hover span,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name:focus,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__name:focus span {
    color: var(--ditio-primary-600);
    text-decoration: underline;
}

.dashboard #feed .panel-footer.comments .comment .comment-bubble__text,
#feed .center-layout .panel-footer.comments .comment .comment-bubble__text {
    display: block;
    font-size: 13px;
    color: var(--ditio-sand-1200);
    line-height: 1.35;
    word-break: break-word;
}

.dashboard #feed .panel-footer.comments .comment .timestamp,
#feed .center-layout .panel-footer.comments .comment .timestamp {
    font-size: 12px;
    color: var(--ditio-sand-900);
    line-height: 1.25;
    margin: 2px 0 0 12px;
}

/* security icon sits mid-aligned with the timestamp text (posts + comments) */
#feed .timestamp .feed-svg-icon {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-top: -2px;
}

/* Standalone feed page (#feed .center-layout, no .dashboard ancestor): filter sidebar panel shell */
#feed .center-layout .facets {
    border-right: 0;
    border-left: 0;
    background-color: transparent;
    padding: 0 5px;
}

#feed .center-layout .facets .col-xs-12 {
    background: var(--ditio-sand-100);
    border: 1px solid var(--ditio-sand-400);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(27, 27, 24, 0.04);
    padding: 20px 18px;
}

#feed .center-layout .filter-title {
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ditio-sand-400);
    font-size: 15px;
    font-weight: 600;
    color: var(--ditio-sand-1200);
}

/* Standalone feed page: date-picker trigger (popup calendar itself is a shared component, left alone) */
#feed .center-layout .input-group-date-picker {
    margin-bottom: 10px;
}

#feed .center-layout .input-group-date-picker .form-control {
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: none;
    border-radius: 8px 0 0 8px;
    height: 40px;
    font-size: 13px;
    color: var(--ditio-sand-1200);
}

#feed .center-layout .input-group-date-picker .input-group-btn .btn {
    border: 1px solid var(--ditio-sand-400);
    border-left: 0;
    background: var(--ditio-sand-100);
    box-shadow: none;
    border-radius: 0 8px 8px 0;
    height: 40px;
}

#feed .center-layout .input-group-date-picker .glyphicon-calendar {
    color: var(--ditio-sand-1000);
}

#feed .center-layout .input-group-date-picker .btn:hover .glyphicon-calendar,
#feed .center-layout .input-group-date-picker .btn:focus .glyphicon-calendar {
    color: var(--ditio-primary-600);
}

/* Standalone feed page: active filters + facet lists */
#feed .center-layout .active-filter-list,
#feed .center-layout .filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--ditio-sand-400);
}

#feed .center-layout .facet-name {
    margin: 16px 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ditio-sand-900);
}

#feed .center-layout .filter-list a,
#feed .center-layout .active-filter-list li {
    display: block;
    line-height: 2em;
    color: var(--ditio-sand-1200);
    font-size: 14px;
    border-radius: 6px;
    padding: 2px 6px;
}

#feed .center-layout .filter-list a:hover {
    background: var(--ditio-sand-300);
    text-decoration: none;
}

#feed .center-layout .filter-list a:before {
    color: var(--ditio-sand-900);
    font-size: 7px;
    top: -2px;
}

#feed .center-layout .active-filter-list a i.fa-remove {
    color: var(--ditio-sand-900);
}

#feed .center-layout .active-filter-list a:hover i.fa-remove {
    color: #EA555A;
}

/* Standalone feed page: comment-row visibility globe, sizing + colour. Named
   for the per-post globe, which the pill replaced - the only element these
   rules still match is the globe on a comment.

   The --lock rule below matches nothing and did not before this PR either:
   the class occurs in no template. Two more rules reference it elsewhere in
   this file. */
#feed .center-layout .timestamp .feed-svg-icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

#feed .center-layout .timestamp .feed-svg-icon--globe {
    color: var(--ditio-sand-1000);
}

#feed .center-layout .timestamp .feed-svg-icon--lock {
    color: #F3671B;
}

/* Overview redesign: project card metric chips */
.dashboard-stats-well__metric-band--chips {
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: 8px;
}

.dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric {
    border: 0;
    border-radius: 8px;
    background: var(--ditio-sand-300);
    align-items: flex-start;
    text-align: left;
    /* Figma chip: 71px tall with the label wrapping to two lines */
    min-height: 71px;
    padding: 12px 16px;
}

.dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric--live {
    border-left: 0;
    /* the live "on work site now" tile keeps its light blue from the old design */
    background: #f3f8ff;
}

.dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric > a,
.dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric > span:not(.stat-text):not(.dashboard-stats-well__metric-value) {
    align-items: flex-start;
}

.dashboard-stats-well--project-card .dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric-value,
.dashboard-stats-well--selected-project .dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric-value {
    color: var(--ditio-sand-1200);
    font-size: 16px;
    /* review (jcd): the count should stand out - bold */
    font-weight: 700;
    margin-bottom: 4px;
}

.dashboard-stats-well--project-card .dashboard-stats-well__metric-band--chips .stat-text,
.dashboard-stats-well--selected-project .dashboard-stats-well__metric-band--chips .stat-text {
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    color: var(--ditio-sand-1000);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    /* Figma wraps the label ("On work site" / "now") instead of truncating */
    white-space: normal;
    max-width: 100%;
}

.dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric--alerts {
    position: relative;
    background: #fbe9e9;
}

.dashboard-stats-well--project-card .dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric--alerts .dashboard-stats-well__metric-value,
.dashboard-stats-well--project-card .dashboard-stats-well__metric-band--chips .dashboard-stats-well__metric--alerts .stat-text {
    color: #d9534f;
}

.dashboard-stats-well__metric-alert-icon {
    /* bottom-right like the evidence chip icons */
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #d9534f;
    font-size: 14px;
}


.dashboard-stats-well:hover {
    /*box-shadow: 4px 0px 4px rgba(0, 0, 0, .23), 6px 12px 12px rgba(0, 0, 0, .16);*/
}

.small .dashboard-stats-well {
    font-size: 12px;
}

.dashboard-stats-well td a {
    display: block;
}

.dashboard-stats-well a:hover {
    text-decoration: none;
}


table.dashboard-stats-table {
    margin-bottom: 6px;
}

.dashboard-stats-table td {
    border-top: none !important;
}

.dashboard-stats-table td.icon {
    width: 8px;
}

.dashboard-stats-table .stat-text {
    font-size: 80%;
    color: var(--secondaryText);
}

table.dashboard-stats-progress {
    table-layout: fixed;
}

.dashboard-stats-progress td {
    white-space: nowrap;
    overflow: hidden;
}

.dashboard-stats-progress input {
    border: none;
    text-align: right;
    width: 40px;
}

/* ------------------------- dashboard*/

.impersonate-well:hover {
    box-shadow: 4px 0px 4px rgba(0, 0, 0, .23), 6px 12px 12px rgba(0, 0, 0, .16);
}

/*>> Info center stuff */
/*.feed-legacy .uib-datepicker .btn-default {
    box-shadow: none;
}*/

.input-group-date-picker .dropdown-menu {
    padding: 5px;
}

.input-group-date-picker .btn-default {
    border-radius: 0;
}

.input-group-date-picker th .btn-default {
    width: 100%;
}


.change-log-details {

    &>span {
        display: block;
        line-height: 24px;
    }
}

.change-log-name {
    font-weight: 500;
    color: #3949AB;
    line-height: 24px;
}
.change-log-content{
    max-height:75vh ;
    overflow-y: auto;
    padding: 1rem 0rem 1rem 0rem;
}
.change-log-row {
    display: flex;
    align-items: center;
    padding: 1rem 2rem 1rem 2rem;
    gap: 2rem;
}

.change-log-time {
    font-size: 14px;
    color: #6D6E83;
}

.change-log-avatar {
    height: 40px;
    width: 40px;
    border-radius: 100%;
}

.change-log-messages {
    margin: 4px 0;
    padding-left: 18px;
    list-style-type: disc;
}
.change-log-messages li {
    line-height: 22px;
}

.change-log-not-available {
    font-weight: 500;
    padding: 1rem;
}

.transaction-view-button {
   margin: 1rem 1.5rem;
}

.input-group-date-picker .btn,
.input-group-date-picker .btn.focus,
.input-group-date-picker .btn:focus,
.input-group-date-picker .btn.hover,
.input-group-date-picker .btn:hover,
.input-group-date-picker .btn.active,
.input-group-date-picker .btn:active,
.input-group-date-picker .btn.dropdown-toggle {
    box-shadow: none;
}

.feed-legacy .btn-icon {
    font-size: 18px;
    color: var(--interaction);
    background: transparent;
}

.feed-legacy .btn-icon:hover {
    color: var(--hoverPrimary);
}

.feed-legacy .btn-icon:disabled {
    color: var(--disabledTextOnDark);
}

.info-center img {
    max-width: 100%;
}

.info-center .html-content h1 {
    margin-bottom: 20px;
}

.info-center .html-content h2 {
    margin-bottom: 18px;
}

.info-center .html-content h3 {
    margin-bottom: 16px;
}

.info-center .html-content img {
    margin-bottom: 16px;
}

.info-center .html-content p {
    margin-bottom: 16px;
}

.info-center .html-content .novorender-block {
    display: inline-flex;
    flex-flow: column;
    align-items: flex-start;
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 12px;
    margin-top: 12px;
}

.info-center .html-content .novorender-block img {
    max-width: 130px;
}

.info-center .message-time {
    position: absolute;
    top: 39px;
    right: 5px;
    font-size: 12px;
    font-weight: normal;
    color: #9197a3;
}

.info-center .stage {
    position: absolute;
    top: 13px;
    right: 9px;
}

.info-center-multiple-feedback {
    padding-top: 8px;
}

span.system-message-badge {
    background: var(--accent);
    color: var(--white);
    border-radius: 50%;
    height: 18px;
    width: 18px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 4px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pulsing-icon {
    border: 3px solid #d00;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    opacity: 1;
}

.pulsing-icon:after {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-shadow: inset 0 0 0 3px #d00;
    transition: transform 0.2s, opacity 0.2s;
}

.pulsing-icon:hover:after {
    transform: scale(2.45);
    opacity: 0.8;
}

.pulsing-icon:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-shadow: inset 0 0 0 3px #d00;
    transition: transform 0.2s, opacity 0.2s;
    animation: pulsing 2.7s infinite;
}

@keyframes pulsing {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(2.8);
        opacity: 0;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}


.pulse-square {
    display: block;
    color: white;
    font: bold 14px Roboto;
    font: bold 14px 'LFT Etica', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.65;
    width: 100px;
    height: 29px;
    border-radius: 0%;
    background: #e51c30;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(229, 28, 48, 0.4);
    /*animation: pulse 2s infinite;*/
    -webkit-animation: red_glow 2s ease-out infinite;
    animation: red_glow 2s ease-out infinite;
    text-transform: uppercase;
    padding: 5px;
    right: 4px;
    top: 5px;
    position: absolute;
    text-align: center;
}

.pulse-square:hover {
    animation: none;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(229, 28, 48, 0.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 15px rgba(229, 28, 48, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(229, 28, 48, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(229, 28, 48, 0.4);
        box-shadow: 0 0 0 0 rgba(229, 28, 48, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 15px rgba(229, 28, 48, 0);
        box-shadow: 0 0 0 15px rgba(229, 28, 48, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(229, 28, 48, 0);
        box-shadow: 0 0 0 0 rgba(229, 28, 48, 0);
    }
}

@-webkit-keyframes red_glow {
    0% {
        -webkit-box-shadow: 0 0 0 0 #e51c30;
        box-shadow: 0 0 0 0 #e51c30
    }

    50% {
        -webkit-box-shadow: 0 0 0 0 #e51c30;
        box-shadow: 0 0 0 0 #e51c30
    }

    100% {
        -webkit-box-shadow: 0 0 8px 12px rgba(229, 28, 48, 0);
        box-shadow: 0 0 8px 12px rgba(229, 28, 48, 0)
    }
}

@keyframes red_glow {
    0% {
        -webkit-box-shadow: 0 0 0 0 #e51c30;
        box-shadow: 0 0 0 0 #e51c30
    }

    50% {
        -webkit-box-shadow: 0 0 0 0 #e51c30;
        box-shadow: 0 0 0 0 #e51c30
    }

    100% {
        -webkit-box-shadow: 0 0 8px 12px rgba(229, 28, 48, 0);
        box-shadow: 0 0 8px 12px rgba(229, 28, 48, 0)
    }
}

/*<< Info center stuff*/



/* CSS used here will be applied after bootstrap.css */
.nav-wizard>li {
    float: left;
}

.nav-wizard>li>a {
    position: relative;
    background-color: #eeeeee;
}

.nav-wizard>li>a .badge {
    margin-left: 3px;
    color: #eeeeee;
    background-color: #4A577A;
}

.nav-wizard>li>a .badge.badge-step {
    color: #4A577A;
    border: 1px solid #4A577A;
    border-radius: 50%;
    padding: 3px 5px;
    background-color: transparent;
}

.nav-wizard>li.active>a .badge.badge-step {
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    padding: 3px 5px;
    background-color: transparent;
}

.nav-wizard>li:not(:first-child)>a {
    padding-left: 34px;
}

.nav-wizard>li:not(:first-child)>a:before {
    width: 0px;
    height: 0px;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #ffffff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.nav-wizard>li:not(:last-child)>a {
    margin-right: 4px;
}

.nav-wizard>li:not(:last-child)>a:after {
    width: 0px;
    height: 0px;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #eeeeee;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}

/*.nav-wizard > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}*/
/*.nav-wizard > li:last-child > a {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}*/
.nav-wizard>li.done:hover>a,
.nav-wizard>li:hover>a {
    background-color: #d5d5d5;
}

.nav-wizard>li.done:hover>a:before,
.nav-wizard>li:hover>a:before {
    border-right-color: #d5d5d5;
}

.nav-wizard>li.done:hover>a:after,
.nav-wizard>li:hover>a:after {
    border-left-color: #d5d5d5;
}

.nav-wizard>li.done>a {
    background-color: #e2e2e2;
}

.nav-wizard>li.done>a:before {
    border-right-color: #e2e2e2;
}

.nav-wizard>li.done>a:after {
    border-left-color: #e2e2e2;
}

.nav-wizard>li.active>a,
.nav-wizard>li.active>a:hover,
.nav-wizard>li.active>a:focus {
    color: #ffffff;
    background-color: #4A577A;
}

.nav-wizard>li.active>a:after {
    border-left-color: #4A577A;
}

.nav-wizard>li.active>a .badge {
    color: #4A577A;
    background-color: #ffffff;
}

.nav-wizard>li.disabled>a {
    color: #777777;
}

.nav-wizard>li.disabled>a:hover,
.nav-wizard>li.disabled>a:focus {
    color: #777777;
    text-decoration: none;
    background-color: #eeeeee;
    cursor: default;
}

.nav-wizard>li.disabled>a:before {
    border-right-color: #eeeeee;
}

.nav-wizard>li.disabled>a:after {
    border-left-color: #eeeeee;
}

.nav-wizard.nav-justified>li {
    float: none;
}

.nav-wizard.nav-justified>li>a {
    padding: 10px 15px;
}

@media (max-width: 768px) {
    .nav-wizard.nav-justified>li>a {
        /*border-radius: 4px;*/
        margin-right: 0;
    }

    .nav-wizard.nav-justified>li>a:before,
    .nav-wizard.nav-justified>li>a:after {
        border: none !important;
    }
}

.map-thumbnail-panel {
    height: 46px;
    width: 46px;
    position: absolute;
    right: 16px;
    top: 0;
    cursor: pointer;
}

.map-thumbnail-free {
    display: inline;
    height: 46px;
    width: 46px;
    cursor: pointer;
}

.map-thumbnail-large {
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.map-location .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-location #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

.map-location #pac-input:focus {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
    z-index: 5000;
}

.map-location #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

.map-location #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}

.map-location #target {
    width: 345px;
}

.qrcode-thumbnail-free {
    display: inline;
    height: 46px;
    width: 46px;
    cursor: pointer;
}

.qrcode-thumbnail-panel {
    height: 46px;
    width: 46px;
    position: absolute;
    right: 66px;
    top: 0;
    cursor: pointer;
}

.input-group-addon.location-prefix {
    padding: 0;
    padding-left: 5px;
    width: 45px;
}

/* Feed */
#feed .facets-fixed {
    position: fixed;
    left: 6px;
    top: 133px;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    z-index: 100;
}

#feed .facets {
    padding: 5px 5px;
    border-right: 10px solid var(--grayBackground);
    border-left: 1px solid #e6e6e6;
    background-color: white;
}

/*#feed .facets .facet-name{
    font-weight:bold;
}*/
#feed .filter-title {
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
}

#feed .active-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
}

#feed .active-filter-list a {
    line-height: 2.1em;
}

#feed .filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
}

#feed .filter-list a:before {
    position: relative;
    top: -1px;
    margin-right: 10px;
    color: inherit;
    content: '\f054';
    font-size: 8px;
    font-family: 'FontAwesome';
}

#feed .filter-list a {
    position: relative;
    display: block;
    line-height: 2.1em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

#feed .refresh-view {
    position: fixed;
    top: 9em;
    margin: 0 auto;
    text-decoration: none;
    background-color: rgba(28, 42, 90, 0.8);
    padding: 8px;
    display: none;
    z-index: 1000;
    color: white;
    border-radius: 12px;
    right: 0;
    left: 0;
    width: 175px;
    text-align: center;
}

#feed .refresh-view:hover {
    background-color: rgba(28, 42, 90, 1);
}

#feed .btn-checkin {
    background-color: rgba(28, 42, 90, 0.8);
    color: white;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px 5px;
}

#feed .btn-checkin:hover {
    background-color: rgba(28, 42, 90, 0.8);
    color: white;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: 10px;
}

#feed .btn-checkout,
#feed .btn-alert,
#feed .btn-item {
    /*background-color: rgba(28, 42, 90, 0.8);*/
    color: white;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px 5px;
    border: 2px solid white;
    background-color: inherit;
    width: 80px;
}


#feed .panel,
.card.panel {
    /*min-height:200px;*/
    /*padding: 19px;*/
    margin-bottom: 15px;
    /*box-shadow: 0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);*/
    box-shadow: 0 0px 0px rgba(0, 0, 0, .23), 0 1px 5px rgba(0, 0, 0, .16);
    border-radius: 3px;
    border: 0;
    color: black;
    background-color: white;
    position: relative;
}

#feed #top-toggle .btn {
    color: var(--interaction);
    text-transform: uppercase;
    font-size: 13px;
    height: 40px;
}

#feed .search {
    width: 100%;
    margin-bottom: 10px;
}

#feed .search .search-icon {
    position: absolute;
    z-index: 99;
    top: 14px;
    left: 17px;
    color: var(--disabledTextOnDark);
}

#feed .search .search-input.stand-out {
    height: 48px;
    padding: 0 15px 0 40px;
    border-radius: 30px;
}

#feed .avatar-sm {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-xs {
    height: 40px;
    width: 40px;
}

/*#feed .fa .fa-fixed {
    width: 14px;
    height: 14px;
    text-align: center;
}*/
#feed .edit-mode {
    font-size: 18px;
    cursor: pointer;
    margin-left: 7px;
}

.img-delete {
    position: absolute;
    top: 0;
    right: 16px;
    background-color: var(--interaction);
    padding: 4px;
    border-radius: 3px;
    color: white;
}

#feed .img-thumbnail {
    padding: 0;
}

#feed .likescount {
    color: #9197a3;
    padding-right: 5px;
}

#feed .top-name {
    font-size: 15px;
    margin-bottom: 4px;
    /* The name's own text truncates rather than wrapping. What gives it a
       width to truncate against is .feed-post-author's min-width: 0, which
       lets the author column shrink below its content width - take that away
       and the ellipsis goes with it. The floor that stops the name vanishing
       is on #feed .feed-post-title .top-name. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#feed .top-name a {
    color: var(--ditio-sand-1200);
}

#feed .timestamp {
    color: #9197a3;
    font-size: 0.9em;
}

/* review (jcd): task name in black at the base text size */
#feed .post-caption {
    font-size: 1em;
    font-weight: bold;
    color: var(--ditio-sand-1200);
}

#feed .post-caption:hover,
#feed .post-caption:focus {
    color: var(--ditio-primary-600);
    text-decoration: underline;
}

/* Alert posts read like normal posts - the only alert signal is the red
   comment-alert icon in front of the title. Same glyph the Alerts menu uses
   (ditio.web.v3 getLinkIcon.tsx, case 'alerts'). */
#feed .post-caption--alert .ditio-icon--comment-alert {
    font-size: 17px;
    color: var(--ditio-red-1000);
    vertical-align: -3px;
    /* the glyph is inset ~1px inside its viewBox - pull it left so the visible
       shape lines up with the body text underneath */
    margin-left: -2px;
    margin-right: 6px;
}

/* Carbon-style comment-alert, traced from @ditioas/web-ui
   src/components/Icons/CommentAlert/index.tsx. The bubble outline needs
   fill-rule evenodd or the mask fills solid. */
.ditio-icon--comment-alert {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.87 15L8 14.5L10 11H13C13.5447 11 14 10.5447 14 10V4C14 3.45533 13.5447 3 13 3H12.5V2H13C14.0893 2 15 2.91067 15 4V10C15 11.0893 14.0893 12 13 12H10.58L8.87 15ZM9.5 3H3C2.45533 3 2 3.45533 2 4V10C2 10.5447 2.45533 11 3 11H7.5V12H3C1.91067 12 1 11.0893 1 10V4C1 2.91067 1.91067 2 3 2H9.5V3ZM11 7.75C11.4142 7.75 11.75 7.41421 11.75 7C11.75 6.58579 11.4142 6.25 11 6.25C10.5858 6.25 10.25 6.58579 10.25 7C10.25 7.41421 10.5858 7.75 11 7.75Z'/><path d='M11.5 1H10.5V5.5H11.5V1Z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.87 15L8 14.5L10 11H13C13.5447 11 14 10.5447 14 10V4C14 3.45533 13.5447 3 13 3H12.5V2H13C14.0893 2 15 2.91067 15 4V10C15 11.0893 14.0893 12 13 12H10.58L8.87 15ZM9.5 3H3C2.45533 3 2 3.45533 2 4V10C2 10.5447 2.45533 11 3 11H7.5V12H3C1.91067 12 1 11.0893 1 10V4C1 2.91067 1.91067 2 3 2H9.5V3ZM11 7.75C11.4142 7.75 11.75 7.41421 11.75 7C11.75 6.58579 11.4142 6.25 11 6.25C10.5858 6.25 10.25 6.58579 10.25 7C10.25 7.41421 10.5858 7.75 11 7.75Z'/><path d='M11.5 1H10.5V5.5H11.5V1Z'/></svg>");
}

/* The alert type row: type name takes the space it needs and truncates, the
   status badge sits hard right and never shrinks or wraps out of the card. */
#feed .alert-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#feed .alert-type-row .post-caption--alert {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* the icon carries margin-left:-2px to line its glyph up with the body text
       below; pad the anchor by the same amount so overflow:hidden clips at the
       glyph edge instead of through it */
    padding-left: 2px;
    margin-left: -2px;
}

/* #4535 shipped .alert-status before this branch renamed it to .feed-pill, so
   during a rolling deploy a client can pair this stylesheet with the old
   template and render class="alert-status feed-pill--open" around a
   class="alert-status__dot" - old base class, new modifier.

   Hence the extra selectors below. Geometry is reached through .alert-status
   and .alert-status__dot; the dot's colour has to be reached as
   .feed-pill--<state> .alert-status__dot, or it inherits --ditio-sand-1200 and
   reads near-black on a red pill. Legs keyed on .alert-status--<state> would
   never match, because fresh JS always emits the new modifier.

   Drop them once no deployed pod can still serve the old template. */

/* Feed pill: the geometry every small badge on a post shares, mirroring
   web-ui's Tag size="sm". That component is not available in this repo, so the
   values are mirrored rather than the component reused.

   Two features use it and share the palette pairs on purpose: the alert status
   badge (the Core apps' FeedPostTicketStatusUi.kt) and the post visibility
   marker. The label is near-black in every variant - colour is carried by the
   leading dot or glyph, never by the text. Grouping the colour rules is what
   stops one of the two from drifting when a shade is retuned. */
#feed .alert-status,
#feed .feed-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 2px 8px;
    /* web-ui's Tag size="sm" pins this; without it the pill is 22px */
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    color: var(--ditio-sand-1200);
}

/* Alert status carries its colour in a dot, visibility in a glyph. Both stand
   where web-ui's Tag puts its indicator, so both inherit the pill's gap. */
#feed .alert-status__dot,
#feed .feed-pill__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: currentColor;
}

/* .ditio-icon already gives the 1em box, currentColor fill and mask setup,
   and 1em of the pill's 12px is the 12px this used to hardcode - so it now
   tracks the type size instead of pinning it. Only the shrink protection is
   pill-specific: the icon must not compress when the label is long. */
#feed .feed-pill .ditio-icon {
    flex: 0 0 auto;
}

/* DitioRed03 surface, DitioRed08 indicator - alert Open, and internal posts */
#feed .feed-pill--open,
#feed .feed-pill--internal {
    background-color: var(--ditio-red-300);
}

#feed .feed-pill--open .alert-status__dot,
#feed .feed-pill--open .feed-pill__dot,
#feed .feed-pill--internal .ditio-icon {
    color: var(--ditio-red-800);
}

/* DitioAzure02 surface, DitioAzure06 indicator (= --ditio-primary-600) -
   alert In progress, and posts everyone on the project can see */
#feed .feed-pill--in-progress,
#feed .feed-pill--public {
    background-color: var(--ditio-azure-200);
}

#feed .feed-pill--in-progress .alert-status__dot,
#feed .feed-pill--in-progress .feed-pill__dot,
#feed .feed-pill--public .ditio-icon {
    color: var(--ditio-primary-600);
}

/* neutral surface, primary text - deliberately quiet, as in the apps */
#feed .feed-pill--closed {
    background-color: var(--ditio-sand-300);
}

#feed .feed-pill--closed .alert-status__dot,
#feed .feed-pill--closed .feed-pill__dot {
    color: var(--ditio-sand-1200);
}

/*#feed .timestamp .fa{
}*/

#feed .created-datetime {
    position: absolute;
    right: 15px;
    top: 0;
    color: #9197a3;
    text-align: right;
}

/* Keep the avatar beside the author even in narrow dashboard cards.
   Only the name shares space with actions; metadata uses the full author width. */
#feed .feed-post-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
}

#feed .feed-post-avatar {
    flex: 0 0 auto;
}

#feed .feed-post-author {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Wraps because the row has three items and only .top-name can shrink; the
   pill and the actions are both flex: 0 0 auto. Without the wrap the name
   absorbs all the shrinkage on a narrow card and stops painting, taking its
   profile link with it. Flex takes items in document order, so .created-datetime
   drops to the second line first. Costs header height where it fires, which is
   why it is paired with the floor on .top-name rather than used alone. */
#feed .feed-post-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

#feed .feed-post-title .top-name {
    flex: 1 1 0;
    /* The floor that makes the wrap above fire. Left to shrink freely the name
       reaches a width too small to paint even an ellipsis, and the row never
       needs a second line. In px, not rem: everything it competes with in the
       row is px and the name's type is pinned at 16px, so a rem floor would be
       the only part that answers to the root font size. */
    min-width: 64px;
}

#feed .feed-post-header .created-datetime {
    position: static;
    flex: 0 0 auto;
    /* Keeps the pencil/map cluster flush right on the wrapped line. When the row
       above wraps, this is the only item on line two and .feed-post-title sets no
       justify-content, so without the auto margin it left-aligns under the name.
       A no-op on unwrapped rows: .top-name's flex-grow takes the free space
       before auto margins resolve, measured identical on all 461 widths. */
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#feed .feed-post-date {
    display: inline-block;
    white-space: nowrap;
}

#feed .project-info {
    color: #9197a3;
    font-size: 0.9em;
}

#feed pre {
    border: none;
    background-color: #fff;
    /* bootstrap.css styles pre with color #868682; this block reset the box but
       never the colour, so post text rendered a shade muted. */
    color: var(--ditio-sand-1200);
    font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    white-space: pre-wrap;
    font-size: 14px;
}

#feed .comment {
    position: relative;
    padding: 10px 7px;
}

#feed .comments .comment+.input-group {
    border-top: 1px solid var(--divider);
}

#feed .comments .input-group {
    padding: 15px 7px;
}

#feed .comments .input-group .input-group-addon,
#feed .comments .input-group .input-group-btn .btn {
    border: none;
    background-color: var(--grayBackground);
    margin: 0;
    padding: 0 10px;
}

#feed .comments .input-group .input-group-btn .btn {
    padding: 0 15px;
}

#feed .comments .input-group .form-control {
    /*    height: 32px;*/
    border-radius: 4px;
}

#feed .comments .avatar-xs {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    object-fit: cover;
}

#feed .comment .timestamp {
    /*left: 48px;
    position: relative;
    bottom: 0;*/
}

#feed .comment .comment-icon {
    padding: 0 10px;
}

#feed .comment .comment-text {
    /*    margin-left: 48px;*/
    line-height: 1.34;
    font-size: 13px;
    padding: 0 10px
}

#feed .datetime {
    color: #9197a3;
    font-size: 0.9em;
}

#feed .footer-action {
    cursor: pointer;
    text-decoration: none;
    padding-right: 45px;
    color: #7f7f7f;
}

#feed .footer-actions {
    padding: 10px 15px;
}

/* liked state is black on the standalone feed page too */
#feed .footer-action.action-done {
    color: var(--ditio-sand-1200);
}

#feed .footer-action:hover {
    text-decoration: none;
    font-weight: bold;
}

#feed .panel.post-item {
    box-shadow: none;
    /*0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);*/
}

/*#feed .panel-footer {
    background-color: white;
}*/

#feed .panel-footer.comments {
    background-color: var(--grayBackground);
    border-radius: 0 0 6px 6px;
    /*    padding: 15px 10px;*/
    padding: 0;
}

#feed .panel.post-item .panel-footer {
    background-color: white;
    /*padding: 0;
    padding-top: 10px;*/
}

#feed .dropzone {
    /*border: 2px dashed #03a9f4;*/
    border: none;
    border-radius: 5px;
    background: white;
    position: relative;
}

#feed .dz-message {
    color: #03a9f4;
    /* position: absolute; */
    /* left: 39%; */
    /* top: 62px; */
    font-size: 12px;
    /* display: block; */
    /* float: left; */
    /* width: 100%; */
    position: relative;
    display: inline-block;
}


#feed .panel.post-item .new-post-title {
    font-weight: bold;
    padding-bottom: 5px;
    /*padding: 0;
    padding-top: 10px;*/
}

.panel.post-item .panel-heading {
    height: 130px;
    background-color: rgba(28, 41, 89, 0.8);
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
}

.trans-info {
    text-align: center;
    /*float: left;*/
    padding-right: 5px;
    display: inline-block;
}

.trans-info a {
    color: white;
    text-decoration: none;
}

.trans-info a:hover {
    color: white;
    text-decoration: none;
}

.panel.post-item .panel-heading .img-circle {
    border: 2px solid white;
}

.panel.post-item .panel-body {
    padding: 5px;
}

.panel.post-item .user-avatar {
    position: absolute;
}

.panel.post-item textarea {
    border: none;
    box-shadow: none;
    overflow: hidden;
    padding: 4px;
    padding-left: 50px;
}

.panel.post-item textarea:focus {
    border: none;
    box-shadow: none;
}

.alert-badge {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 1px;
    float: left;
    background-color: #e9eaed;
    color: black;
    border: none;
}

.alert-badge.alert-dismissible .close {
    top: -2px;
    right: -1px;
    color: black;
}


#qrcode_print img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Fullcalendar stuff */
.calendar-container {
    padding-top: 10px;
}

.fc-day-grid-event {
    margin: 5px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
    border-radius: 0;
    border: 0;
    cursor: pointer;
}

.fc-day-grid-event:hover {
    box-shadow: 0 2px 10px #455A64, 0 3px 10px #455A64;
    /*border-radius: 5px;*/
    border: 0;
}

.fc-day-grid-event.mtd-do-pulse {
    box-shadow: 0 2px 10px #455A64, 0 3px 10px #455A64;
    /*border-radius: 5px;*/
    border: 0;
}

.fc-time-grid-event {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .23), 0 2px 5px rgba(0, 0, 0, .16);
    border-radius: 0;
    border: 0;
    color: black;
}

.fc-timelineDay-view .fc-content>table {
    width: auto;
}

.fc-timelineDay-view .fc-content>table .fc-widget-content {
    text-align: center;
}

.fc .fa {
    text-shadow: 1px 1px 1px #777;
    /*font-size: 1.5em;*/
}

.fa-12px-w {
    /*font-size: 1em;*/
    width: 12px;
}

/* Approval calender misc*/
.calendar-month .empty {
    cursor: default;
    background: #f7f7f7;
}

/* Live view button styles */
.live-pulse {
    -webkit-animation: livePulse 2s infinite;
    animation: livePulse 2s infinite;
    color: #28a745 !important;
}

@-webkit-keyframes livePulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes livePulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.btn.live-view-btn {
    min-width: 85px;
}

.btn.live-view-btn .fa-circle {
    font-size: 10px;
    vertical-align: middle;
    display: inline-block;
}

/* Make the button more visible when active */
.btn.btn-success.live-view-btn {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.btn.btn-success .fa-circle {
    color: white !important;
}

/* Disabled state */
.btn.live-view-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Existing workers-details styles */
.workers-details {
    /*height: 182px;*/
    position: relative;
    flex-grow: 1;
    align-items: center;
    justify-items: center;
    padding-top: 8px;
}

.workers-details > div {
    width: 100%;
}

.workers-details .avatar {
    display: flex;
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0 auto;
}

.workers-details .shift-icon {
    position: absolute;
    top: 4px;
    left: 6px;
    color: #333;
}

.workers-details .shift-icon.no-work-shift {
    opacity: 0.4;
}

.workers-details .company-name {
    text-align: center;
    display: block;
    font-size: 10px;
    line-height: 10px;
    margin-bottom: 8px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.workers-details .avatar .image-container {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-position: center center;
    background-size: cover;
    border: 2px solid white;
    box-sizing: border-box;
}

.workers-details .avatar {
    height: auto !important;
}

.workers-details .avatar.not-approved {
    cursor: pointer;
}

.workers-details .avatar.not-approved:hover .icon {
    background: var(--success);
}

.workers-details .avatar.not-approved:hover .icon i:before {
    content: "\f046";
    transform: translate3d(0, 1px, 0);
}

.workers-details .avatar .icon {
    width: 22px;
    height: 22px;
    border-radius: 100%;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-items: center;
    align-items: center;
    position: absolute;
    transform: translate3d(40px, 36px, 0);
    transition: background 200ms ease;
}

.workers-details .avatar .icon i {
    flex-grow: 1;
}

.workers-details .person-name {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    border: none;
    background: none;
    max-width: 100%;
    font-weight: 400;
}

.workers-details .person-name span {
    display: block;
    height: 100%;
    padding: 6px 8px 2px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.workers-details .avatar.working .icon {
    background: var(--interactionSharp);
}

.workers-details .avatar.working .icon i:before {
    content: "\f017";
}

.workers-details .avatar.not-approved .icon {
    background: var(--accent);
}

.workers-details .avatar.not-approved .icon i {
    transform: translate3d(0, 1px, 0);
}

.workers-details .avatar.not-approved .icon i:before {
    content: "\f096";
}

.workers-details .avatar.approved .icon i {
    transform: translate3d(1px, 1px, 0);
}

.workers-details .avatar.approved .icon i:before {
    content: "\f046";
}

.workers-details .avatar.approved .icon {
    background: var(--success);
}

.workers-details .list-details {
    text-align: left;
}

.workers-details .list-details dl {
    padding: 4px 8px;
}

.workers-details .list-details dt {
    display: flex;
    width: 85%;
    max-width: 140px;
    margin: 4px auto;
    font-size: 12px;
    line-height: 12px;
    align-items: center;
}

.workers-details .list-details dt a:not(.split-hours) {
    display: flex;
    flex: 1 1 auto;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.workers-details .list-details .split-hours {
    padding-left: 8px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.workers-details .list-details dt.overtime,
.workers-details .list-details dt.additions {
    cursor: pointer;
}

/* #301 — a payroll row's label is a company-configured PayrollType.Name, not the
   fixed "Tillegg" / "Overtid" strings it replaced: "Betalt matpause 30min",
   "Overtidstillegg 50% 37,5t/u". More than half of the active addition type names
   exceed the ~16-18 characters that fit here, so without this they wrap and the row
   becomes two lines. That would void the whole bound — the pool counts rows, and
   equalizeListDetails propagates the tallest column's height to every column on
   screen, so one wrapped label stretches the entire grid. Full names stay readable
   in the row's title attribute and in the additions popover. */
.workers-details .list-details dt.payroll-line span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The value span on an addition row is the .additions-info hover target that opens
   the full popover, so give it a floor: a Yes/No addition renders a bare check mark,
   which is only a few pixels of hit area on its own. */
.workers-details .list-details dt.payroll-line span:last-child {
    flex: 0 0 auto;
    min-width: 28px;
    padding-left: 4px;
    text-align: right;
}

.workers-details .list-details dt span:first-child {
    flex-grow: 1;
    font-weight: normal !important;
}

.workers-details .list-details dt span:last-child {
    align-items: flex-end;
    font-weight: 700;
}

.workers-details .list-details dt span:last-child {
    align-items: flex-end;
    font-weight: 700;
}

.workers-details .hour-total {
    background: #FFFFFF;
    padding: 1px;
    color: #3949AB;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    margin: 0 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
}

.workers-details .edit-transactions {
    background: none;
    border: 0;
    position: absolute;
    right: 0;
    top: 2px;
    height: 1.5em;
    padding: 0 4px;
}

.workers-details .edit-transactions .fa {
    text-shadow: none;
}


.calendar-filter-row {
    margin-bottom: 20px;
}

.calendar-container .fc-view {
    overflow-x: scroll;
}

.calendar-container .floating-qty {
    position: absolute;
    bottom: -16px;
    z-index: 10000;
    text-align: center;
    left: 0;
    right: 0;
    color: white;
    font-weight: normal;
    font-size: 80%;
    background-color: #4a577a;
    margin-left: 6px;
    margin-right: 6px;
    border-color: grey;
    border: 1px solid transparent;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: none;
    opacity: 0.8;
}

.calendar-container .fc-agenda-view .fc-bg .fc-day,
.calendar-container .fc-agenda-view .fc-bg .fc-axis,
.calendar-container .fc-month-view {
    background: white;
}

.calendar-container .fc-resource-cell {
    border: none;
}

.calendar-container .shift-block {
    opacity: 1 !important;
    background-color: transparent !important;
    border-bottom: 1px solid #CDCED4;
}

.calendar-container .shift-block .background {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0.1;
}

.calendar-container .shift-block .white-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.5);
}

.calendar-container .shift-block.absence .background {
    opacity: 1 !important;
    background-color: #E2BEF4 !important;
    border-color: #E2BEF4 !important;
}

.calendar-container .shift-block.absence .white-overlay {
    display: none !important;
}

.calendar-container .shift-block .shift-name {
    position: absolute;
    left: 8px;
    bottom: 4px;
    z-index: 1;
    font-size: 10px;
    color: #40405C;
}

.calendar-container .fc-toolbar .fc-center {
    display: inline-flex;
    align-items: center;
}

.calendar-container .fc-toolbar .fc-center .badge {
    margin-top: 4px;
}

.calendar-title {
    padding-top: 4px !important;
}

.calendar-title .title-item {
    display: block;
    margin-bottom: 8px;
    margin-left: 4px;
    margin-right: 4px;
}

.calendar-title .title-item span {
    display: block;
    margin-bottom: 2px;
}

.calendar-title .title-item span:last-child {
    margin-bottom: 0;
}

.calendar-title .title-item.bold {
    font-weight: 500;
    margin-bottom: 4px;
}

.calendar-title .title-item.auxiliary {
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.4);
}

.calendar-title .title-item--with-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}

.calendar-title .title-item.title-item--with-icon span {
    margin-bottom: 0;
}

.calendar-title .title-item.title-item--with-icon i.fa {
    margin-top: 0;
}

.event-tooltip__icon-and-desc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.container{
    padding: 20px;
}

.BrainhubCarousel.BrainhubCarousel--isRTL {
    direction: rtl
}

.BrainhubCarousel.BrainhubCarousel--isRTL .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
    direction: rtl
}

.BrainhubCarouselItem {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
    cursor: pointer
}

.BrainhubCarouselItem .debug-number {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    font-size: 2em;
    text-shadow: 0px 0px 9px white
}

.BrainhubCarousel__container {
    width: 100%;
    overflow: hidden
}
.BrainhubCarousel {
    overflow: hidden;
    display: flex;
    align-items: center
}

.BrainhubCarousel.BrainhubCarousel--isRTL {
    direction: rtl
}

.BrainhubCarousel.BrainhubCarousel--isRTL .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
    direction: rtl
}

.BrainhubCarousel .BrainhubCarousel__trackContainer {
    width: 100%;
    overflow: hidden
}

.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
    display: flex;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0
}

.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
    transition: transform
}

.BrainhubCarousel__arrows {
    cursor: pointer
}

.BrainhubCarousel__loader {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 4px solid #7b59ff;
    border-left-color: transparent;
    -webkit-animation: loader 1s infinite linear;
    animation: loader 1s infinite linear
}

@-webkit-keyframes loader {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loader {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.BrainhubCarousel__arrows {
    position: relative;
    padding: 21px;
    border: none;
    overflow: hidden;
    outline: 0;
    font-size: 0;
    line-height: 0;
    background-color: #7b59ff
}

.BrainhubCarousel__arrows span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-color: #fff;
    border-width: 3px 3px 0 0;
    padding: 5px;
    transition: 0.3s;
    font-size: 0
}

.BrainhubCarousel__arrows:hover {
    background-color: #8768ff
}

.BrainhubCarousel__arrows:hover span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-color: #fff;
    border-width: 3px 3px 0 0;
    padding: 5px;
    transition: 0.3s;
    font-size: 0
}

.BrainhubCarousel__arrows:hover:enabled {
    background-color: #8768ff
}

.BrainhubCarousel__arrows:hover:enabled span {
    border-color: #fff;
    margin: 0
}

.BrainhubCarousel__arrows:disabled {
    background-color: #ccc
}

.BrainhubCarousel__arrowLeft span {
    transform: translate(-50%, -50%) rotate(-135deg);
    margin-left: 2.45px
}

.BrainhubCarousel__arrowRight span {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-left: -2.45px
}

.BrainhubCarousel--isRTL .BrainhubCarousel__arrowLeft span {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-left: -2.45px
}

.BrainhubCarousel--isRTL .BrainhubCarousel__custom-arrowLeft span {
    transform: rotate(180deg)
}

.BrainhubCarousel--isRTL .BrainhubCarousel__arrowRight span {
    transform: translate(-50%, -50%) rotate(-135deg);
    margin-left: 2.45px
}

.BrainhubCarousel--isRTL .BrainhubCarousel__custom-arrowRight span {
    transform: rotate(-180deg)
}

.BrainhubCarousel--isRTL .BrainhubCarousel__arrows:hover span {
    margin: 0
}

.BrainhubCarousel__arrow--disable {
    pointer-events: none
}

.BrainhubCarousel__dots {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0
}

.BrainhubCarousel__dots.BrainhubCarousel__dots--isRTL {
    direction: rtl
}

.BrainhubCarousel__dots .BrainhubCarousel__dot {
    outline: 0;
    padding: 10px;
    border: none;
    opacity: 0.5;
    font-size: 0;
    cursor: pointer;
    -webkit-appearance: none
}

.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
    opacity: 1 !important
}

.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
    opacity: 1
}

.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: #000
}

.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
    outline: 0;
    padding: 10px;
    border: none;
    opacity: 0.5;
    font-size: 0;
    cursor: pointer
}

.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
    opacity: 1 !important
}

.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
    opacity: 1
}

.BrainhubCarousel__thumbnail[type=button] {
    -webkit-appearance: none
}

.BrainhubCarousel--isRTL+.BrainhubCarousel__dots {
    direction: rtl
}
  
.calendar-title .title-item i.fa {
    min-width: 16px;
    margin-top: 2px;
}

.calendar-title .waiting-time {
    padding-top: 8px;
}

.calendar-title .waiting-time ul {
    list-style: none;
    margin: 0;
    padding: 4px 0 0 0;
}

.calendar-title .waiting-time li {
    margin-bottom: 4px;
    font-style: italic;
}

.calendar-container .fc-time-grid-event .fc-time,
.calendar-container .fc-time-grid-event .fc-title {
    font-size: 1em;
}

.calendar-container .fc-time-grid-event .fc-time {
    margin-left: 4px;
    padding-top: 2px;
}

/* event colors */

.calendar-container .fc-event:not(.overflows-backward, .overflows-forward) {
    border-bottom: 2px solid #CDCED4 !important;
}

.calendar-container .fc-event:last-child:not(.overflows-backward, .overflows-forward) {
    border-bottom: none !important;
}

.calendar-container .fc-event,
.calendar-container .fc-event:hover {
    color: #40405C;
    box-shadow: none;
}

.calendar-container .fc-event .fc-bg {
    opacity: 0;
}

.calendar-container .fc-event.hour--completed,
.color-explanation.hour--completed {
    background-color: #CCEBFF;
    border-color: #CCEBFF;
}

.calendar-container .fc-event.hour--completed.overflows-forward {
    border-bottom: 4px dashed #87cfff;
}

.calendar-container .fc-event.hour--completed.overflows-backward {
    background-color: #F0F9FF;
    border-color: #CCEBFF;
    border-width: 2px;
}

.calendar-container .fc-event.hour--approved,
.color-explanation.hour--approved {
    background-color: #ADEBC5;
    border-color: #ADEBC5;
}

.calendar-container .fc-event.hour--approved.overflows-forward {
    border-bottom: 4px dashed #7bdfa2;
}

.calendar-container .fc-event.hour--approved.overflows-backward {
    background-color: #E5FFEF;
    border-color: #ADEBC5;
    border-width: 2px;
}

.calendar-container .fc-event.hour--autocompleted,
.color-explanation.hour--autocompleted {
    background-color: #FFB2B2;
    border-color: #FFB2B2;
}

.calendar-container .fc-event.hour--open,
.color-explanation.hour--open {
    background: repeating-linear-gradient(45deg,
            #e3f1f8,
            #e3f1f8 10px,
            #F5FCFF 10px,
            #F5FCFF 20px);
    background-color: white;
    border-color: transparent;
}

.calendar-container .fc-event.absence,
.color-explanation.absence {
    background: repeating-linear-gradient(-45deg,
            #f9f1fc,
            #f9f1fc 10px,
            #f0def9 10px,
            #f0def9 20px);
    background-color: white;
    border-color: transparent;
}

/* #302 — self-approved mark on the transaction bar.
   Colour is the approved fill darkened to the same hue, not a new one:
   #ADEBC5 is hsl(143 61% 80%), the pill is hsl(143 55% 34%) = #27864C, which
   clears ~4.6:1 against white. Self-approved presupposes approved, so the pill
   only ever sits on the green fill — one hue at two weights, reading as
   "approved, with a caveat" instead of competing with the status colours.
   Hatching was not available: 45deg is hour--open and -45deg is absence, and in
   this view hatching means "not a settled transaction", which a self-approved
   line is not. No legend entry: the legend explains bar fills, and this is not
   a fill.

   Absolutely positioned in the bar's top-right corner instead of floated inside
   .fc-time: FullCalendar hides every span in .fc-time once a bar renders under
   30px (.fc-time-grid-event.fc-short .fc-time span), which is the 30-minute bar
   this has to survive. .fc-time-grid .fc-event is position:absolute, so the bar
   is the containing block, and its overflow:hidden clips nothing that sits
   inside the corner. */
.calendar-container .fc-event .self-approved-pill {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    padding: 4px;
    border-radius: 50%;
    background-color: #27864C;
    color: #fff;
    line-height: 0;
}

/* 9px glyph inside 4px of padding on every side — a 17px circle, as the mockup. */
.calendar-container .fc-event .self-approved-pill svg {
    display: block;
    width: 9px;
    height: 9px;
}

/* The approver row in the event popover: the icon keeps its own column so a wrapped
   second line indents to the name rather than sliding back under the check mark. */
.popover .approver-text {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 26px);
}

/* Keep the SmartTrans badge clear of the pill. The badge floats right inside
   .fc-time, so shrinking that element's content box reserves the pill's corner and
   the badge lands beside or below it instead of underneath. This has to be padding
   on .fc-time rather than a margin on the badge: the badge carries
   `margin-right:5px` as an inline style, which no stylesheet rule can override
   without !important. Under 30px FullCalendar hides the badge outright, so the two
   never collide there. */
.calendar-container .fc-event.has-self-approved .fc-time {
    padding-right: 20px;
}

/* The approver row in the event popover, when the approver is the hours' owner. */
.popover .self-approved-suffix {
    color: #27864C;
    font-weight: 500;
}

.calendar-container .fc-event.absence--approved,
.color-explanation.absence--approved {
    background-color: #E2BEF4;
    border-color: #E2BEF4;
}

.calendar-container .fc-event.absence--free-period,
.color-explanation.absence--free-period {
    background: repeating-linear-gradient(-45deg,
            #e8e8e8,
            #e8e8e8 10px,
            #d5d5d5 10px,
            #d5d5d5 20px);
    background-color: white;
    border-color: transparent;
}

.calendar-container .fc-event.absence--free-period--approved,
.color-explanation.absence--free-period--approved {
    background-color: #c0c0c0;
    border-color: #c0c0c0;
}

.overflows-backward {
    border-top-style: dashed !important;
    border-top-width: 4px !important;
}

/* Continuation markers on transactions that run past midnight. The dashed borders above say
   "there is more"; these say where it went and which day counts it. */
.calendar-container .fc-event .continues-marker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.calendar-container .fc-event .continues-marker--forward {
    text-align: right;
}

.calendar-container .fc-event .continues-marker--backward {
    font-style: italic;
}

.hour-after-midnight-badge {
    background-color: transparent;
    color: #40405C;
    font-weight: 400;
    font-size: 11px;
    padding-left: 4px;
}

.workers-details .hour-total .after-midnight-note {
    display: block;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    color: #40405C;
    opacity: 0.8;
}

/* Financial end date styling */
.financial-end-date-passed + .fa-lock {
    color: var(--danger);
}

.color-explanation-wrapper {
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 12px;
}

.color-explanation {
    padding: 4px 8px;
    color: #40405C;
}

.table>thead>tr>th[data-sortby] {
    cursor: pointer;
}

/* Progress circles - Start */
.circle {
    background: white;
    border-radius: 50%;
    color: black;
    display: table;
    height: 50px;
    font-weight: bold;
    width: auto;
    margin: 0 auto;
    box-shadow: 0px 0px 10px 2px #242424;
    -webkit-box-shadow: 0px 0px 10px 2px #242424;
    -moz-box-shadow: 0px 0px 10px 2px #242424;
    -o-box-shadow: 0px 0px 10px 2px #242424;
}

.circleGreen {
    box-shadow: 0px 0px 10px 2px #8bbc21;
    -webkit-box-shadow: 0px 0px 10px 2px #8bbc21;
    -moz-box-shadow: 0px 0px 10px 2px #8bbc21;
    -o-box-shadow: 0px 0px 10px 2px #8bbc21;
}

.circleOrange {
    box-shadow: 0px 0px 10px 2px #f28f43;
    -webkit-box-shadow: 0px 0px 10px 2px #f28f43;
    -moz-box-shadow: 0px 0px 10px 2px #f28f43;
    -o-box-shadow: 0px 0px 10px 2px #f28f43;
}

.circleRed {
    box-shadow: 0px 0px 10px 2px #c42525;
    -webkit-box-shadow: 0px 0px 10px 2px #c42525;
    -moz-box-shadow: 0px 0px 10px 2px #c42525;
    -o-box-shadow: 0px 0px 10px 2px #c42525;
}

.circle span {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 0;
}

/* Progress circles - end */
.payroll-report-total-row {
    border-bottom: 2px solid black;
}

.payroll-report-total-row td {
    font-size: 16px !important;
    font-weight: bold;
}
.qrcode-wrapper{
  display: flex;
}
.center-layout
{
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
#payrolltableview .table-striped>tbody:nth-of-type(odd)>tr {
    background-color: #f9f9f9;
}

#payrolltableview .table-striped>tbody:nth-of-type(even)>tr {
    background-color: inherit;
}

#payrolltableview .table-striped>tbody:nth-child(odd)>tr>td,
#payrolltableview .table-striped>tbody:nth-child(odd)>tr>th {
    background-color: inherit;
}

#payrolltableview .table-striped>tbody:nth-child(even)>tr>td,
#payrolltableview .table-striped>tbody:nth-child(even)>tr>th {
    background-color: inherit;
}

#payrolltableview .locked {
    color: #bcbfc4;
}

#payroll-main .selected td {
    background-color: #d9edf7;
}

#payroll-main .recalculating td {
    color: #bcbfc4;
}

#payroll-types .popover {
    max-width: 648px;
}

#payrolltableview .dropdown-submenu {
    position: relative;
}


@media (min-width: 1920px) {

    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-pull-11 {
        right: 91.66666667%;
    }

    .col-xl-pull-10 {
        right: 83.33333333%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-8 {
        right: 66.66666667%;
    }

    .col-xl-pull-7 {
        right: 58.33333333%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-5 {
        right: 41.66666667%;
    }

    .col-xl-pull-4 {
        right: 33.33333333%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-2 {
        right: 16.66666667%;
    }

    .col-xl-pull-1 {
        right: 8.33333333%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-push-11 {
        left: 91.66666667%;
    }

    .col-xl-push-10 {
        left: 83.33333333%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-8 {
        left: 66.66666667%;
    }

    .col-xl-push-7 {
        left: 58.33333333%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-5 {
        left: 41.66666667%;
    }

    .col-xl-push-4 {
        left: 33.33333333%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-2 {
        left: 16.66666667%;
    }

    .col-xl-push-1 {
        left: 8.33333333%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }

    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-xl-offset-0 {
        margin-left: 0%;
    }
     
    
       
/*# sourceMappingURL=style.css.map*/
}

/* ==========================================================================
   Approval calendar density for small laptop screens (planning-core #190)
   All selectors scoped under #projTransApprovalCalendar so the shared
   *-search directives used by other views are unaffected.
   ========================================================================== */

#projTransApprovalCalendar .calendar-density-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
}

/* Action buttons (Live / Refresh / List / New) sit on the toolbar row between
   the filter toggle and the Kompakt/Full control, so hiding the filters leaves
   a single compact row and the grid grows into the reclaimed space. */
#projTransApprovalCalendar .calendar-density-bar .calendar-action-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Filters toggle — a clean pill with a rotating chevron and an accent count. */
#projTransApprovalCalendar .calendar-density-bar .calendar-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--divider, #c8c7c1);
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--text, var(--ditio-sand-1200));
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 1px rgba(27, 27, 24, 0.03);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#projTransApprovalCalendar .calendar-density-bar .calendar-filter-toggle:hover {
    background: var(--hover, var(--ditio-sand-300));
    border-color: #b9b8b2;
}

#projTransApprovalCalendar .calendar-density-bar .calendar-filter-toggle:focus {
    outline: none;
    border-color: var(--interaction, var(--ditio-primary-600));
    box-shadow: 0 0 0 3px rgba(1, 126, 255, 0.15);
}

#projTransApprovalCalendar .calendar-density-bar .calendar-filter-toggle .fa-chevron-right {
    font-size: 11px;
    color: var(--secondaryText, var(--ditio-sand-1000));
    transition: transform 0.2s ease;
}

/* When filters are open, point the chevron down (smooth rotate). */
#projTransApprovalCalendar:not(.filters-collapsed) .calendar-density-bar .calendar-filter-toggle .fa-chevron-right {
    transform: rotate(90deg);
}

#projTransApprovalCalendar .calendar-density-bar .calendar-filter-toggle .filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--accent, #f3671b);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Avatar mode — an iOS-style segmented control (sand track, white active thumb). */
#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle {
    margin-left: auto;
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: var(--grayBackgroundDark, var(--ditio-sand-500));
    box-shadow: none;
}

#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle .btn {
    border: none;
    background: transparent;
    border-radius: 999px;
    height: 28px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--secondaryText, var(--ditio-sand-1000));
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle .btn:hover {
    color: var(--text, var(--ditio-sand-1200));
}

#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle .btn.active,
#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle .btn.active:hover {
    background: var(--white, #fff);
    color: var(--interaction, var(--ditio-primary-600));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(27, 27, 24, 0.14);
}

#projTransApprovalCalendar .calendar-density-bar .calendar-avatar-mode-toggle .btn:focus {
    outline: none;
}

/* Compact avatar mode: the avatar becomes a small chip anchored to the
   top-right of each resource cell and lifts to a full preview on hover.
   Nothing is hidden — name, company, list-details (Tillegg/Overtid, overtime,
   items, trips), hour totals and the gear menu all remain visible/reachable. */
#projTransApprovalCalendar.avatars-compact .workers-details {
    position: relative;
}

#projTransApprovalCalendar.avatars-compact .workers-details .avatar {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    padding: 0;
    z-index: 5;
    border-radius: 50%;
    transform-origin: top right;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

#projTransApprovalCalendar.avatars-compact .workers-details .avatar .image-container {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(27, 27, 24, 0.08), 0 1px 3px rgba(27, 27, 24, 0.18);
    transform-origin: top right;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease;
}

/* Lift only the z-index on hover — the avatar box itself stays a fixed 30px
   hit target. Scaling the avatar (the hovered element) made its own box grow
   and shift under the cursor, so at the picture's edge the pointer fell in/out
   repeatedly and the preview flashed open/closed. */
#projTransApprovalCalendar.avatars-compact .workers-details .avatar:hover {
    z-index: 40;
}

/* The visual enlargement happens on the inner image-container, which does not
   change the avatar's hit area, so hover stays stable (no flicker). */
#projTransApprovalCalendar.avatars-compact .workers-details .avatar:hover .image-container {
    transform: scale(2.6);
    transform-origin: top right;
    box-shadow: 0 6px 18px rgba(27, 27, 24, 0.28);
}

/* keep the working/approved status badge proportional and ringed on the chip */
#projTransApprovalCalendar.avatars-compact .workers-details .avatar .icon {
    width: 13px;
    height: 13px;
    font-size: 9px;
    border: 1.5px solid #fff;
    transform: translate3d(18px, 18px, 0);
}

/* Name truncates within the column (never bleeds into the next resource) and
   leaves room on the right for the corner chip and on the left for the gear. */
#projTransApprovalCalendar.avatars-compact .workers-details .person-name {
    display: block;
    max-width: 100%;
    padding: 0 34px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Safety net: keep every text row clipped to the cell so nothing bleeds into
   the neighbouring column (the avatar still overflows on hover — it is a
   sibling of these, not clipped here). */
#projTransApprovalCalendar.avatars-compact .workers-details .company-name,
#projTransApprovalCalendar.avatars-compact .workers-details .list-details,
#projTransApprovalCalendar.avatars-compact .workers-details .hour-total {
    max-width: 100%;
    overflow: hidden;
}

/* In compact mode the full labelled legend is replaced by a tight row of
   colour swatches (labels available on hover) so it stays "just an indication"
   and frees vertical space for the grid. */
#projTransApprovalCalendar.avatars-compact .color-explanation-wrapper {
    gap: 4px;
}

#projTransApprovalCalendar.avatars-compact .color-explanation-label {
    display: none;
}

#projTransApprovalCalendar.avatars-compact .color-explanation {
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: help;
}

#projTransApprovalCalendar.avatars-compact .color-explanation span {
    display: none;
}

/* On small screens the full (labelled) legend is hidden; the compact swatch
   row above stays visible since it is not display:none here. Also tighten the
   filter-row spacing to reclaim vertical space. */
@media (max-height: 799px), (max-width: 1279px) {
    #projTransApprovalCalendar:not(.avatars-compact) .color-explanation-wrapper {
        display: none;
    }

    #projTransApprovalCalendar .calendar-filter-row {
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   Compact view — tighten the whole toolbar chrome (xs buttons, small title,
   minimal spacing) so the grid gets the maximum vertical room.
   ========================================================================== */

/* Toolbar row: xs density-bar buttons + minimal space below the row. */
#projTransApprovalCalendar.avatars-compact .calendar-density-bar {
    margin-bottom: 4px;
    gap: 6px;
}

#projTransApprovalCalendar.avatars-compact .calendar-filter-row {
    margin-bottom: 0;
}

#projTransApprovalCalendar.avatars-compact .calendar-container {
    padding-top: 4px;
}

#projTransApprovalCalendar.avatars-compact .calendar-density-bar .calendar-filter-toggle {
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

#projTransApprovalCalendar.avatars-compact .calendar-density-bar .calendar-action-buttons .btn {
    height: 26px;
    min-height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.6;
}

#projTransApprovalCalendar.avatars-compact .calendar-density-bar .calendar-avatar-mode-toggle {
    padding: 1px;
}

#projTransApprovalCalendar.avatars-compact .calendar-density-bar .calendar-avatar-mode-toggle .btn {
    height: 22px;
    min-height: 22px;
    padding: 0 11px;
    font-size: 11.5px;
}

/* FullCalendar header: smaller title + nav/view buttons + tighter margin. */
#projTransApprovalCalendar.avatars-compact .fc-toolbar {
    margin-bottom: 4px;
}

#projTransApprovalCalendar.avatars-compact .fc-toolbar h2 {
    font-size: 18px;
    line-height: 1.3;
}

/* !important is needed because the injected quick-nav date button carries an
   inline style="height: 2.1em" (see quickNavOpen markup in the controller),
   which would otherwise win over this class rule and stay full height. */
#projTransApprovalCalendar.avatars-compact .fc-toolbar .fc-button {
    height: 26px !important;
    padding: 0 8px;
    font-size: 13px;
    line-height: 24px !important;
}

#projTransApprovalCalendar.avatars-compact .fc-toolbar .fc-center .badge {
    font-size: 11px;
}

/* Compact the filter row controls so the search inputs and their neighbouring
   dropdowns line up with the xs toolbar buttons. Scoped under the calendar root
   + compact, so the shared *-search directives (reused by payroll /
   qrCodeRegister) are untouched. */
#projTransApprovalCalendar.avatars-compact .calendar-filter-fields .form-control {
    height: 28px;
    padding: 2px 8px;
    font-size: 12px;
}

#projTransApprovalCalendar.avatars-compact .calendar-filter-fields .form-group {
    margin-bottom: 0;
}

#projTransApprovalCalendar.avatars-compact .calendar-filter-fields .btn {
    height: 28px;
    min-height: 28px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.7;
}

/* Re-center the typeahead clear/spinner icons for the shorter input (base rule
   places them at top: 9px for the full-height 34px field). */
#projTransApprovalCalendar.avatars-compact .calendar-filter-fields .typeahead-wait,
#projTransApprovalCalendar.avatars-compact .calendar-filter-fields .typeahead-clear {
    top: 6px;
}

/* ==========================================================================
   Dashboard restyle: Approval Dashboard (Beta) / Payroll Approval Status /
   Health stats "chrome" - reuses the flat sand-token card language already
   established by .overview-stat-card / .dashboard-stats-well--project-card
   (square corners, var(--ditio-sand-400) border, var(--ditio-sand-100) background, soft shadow) instead
   of the old rounded Bootstrap .well look. Only wrapper/chrome markup was
   touched; no ng-if/ng-click/bindings were removed - see dashboard.html.
   ========================================================================== */

.dashboard-panel-card {
    min-height: 75px;
    padding: 20px;
    border-radius: 0;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
}

.dashboard-panel-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.dashboard-panel-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ditio-sand-1200);
}

.dashboard-panel-card__title-badge {
    font-size: 12px;
    font-weight: 400;
    color: var(--ditio-sand-1000);
    margin-left: 4px;
}

.dashboard-panel-card__cog {
    cursor: pointer;
    margin-left: 8px;
    font-size: 16px;
    color: var(--ditio-sand-1000);
}

.dashboard-panel-card__timestamp {
    font-size: 12px;
    color: var(--ditio-sand-1000);
    white-space: nowrap;
}

.dashboard-panel-card__timestamp .fa-refresh {
    margin-left: 6px;
    cursor: pointer;
    color: var(--ditio-sand-1000);
}

.dashboard-panel-card__timestamp .fa-refresh:hover {
    color: var(--ditio-primary-600);
}

.dashboard-panel-card__btn-group {
    margin-left: 10px;
}

.dashboard-panel-card__chart {
    min-height: 450px;
}

.dashboard-panel-card__last-updated {
    margin-top: 10px;
    padding-right: 10px;
    color: var(--ditio-sand-1000);
    font-size: 12px;
    text-align: right;
}

.dashboard-panel-card__refresh-icon {
    cursor: pointer;
    margin-left: 5px;
    color: var(--ditio-sand-1000);
}

/* Task-stats toolbar (show-everyone / cost-price / refresh) - same permanent-blue
   pattern already fixed everywhere else on this branch: gray at rest, blue on
   hover/focus, never a permanent accent color. */
.dashboard-panel-card__toolbar-icon {
    color: var(--ditio-sand-1000);
}

.dashboard-panel-card__toolbar-icon:hover,
.dashboard-panel-card__toolbar-icon:focus {
    color: var(--ditio-primary-600);
}

/* -- Email schedule settings panel ---------------------------------------- */

.dashboard-email-settings {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 0;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-200);
}

.dashboard-email-settings__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ditio-sand-1200);
}

.dashboard-email-settings__group {
    padding: 12px 16px;
    border-radius: 0;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
}

.dashboard-email-settings__field-block {
    margin-top: 8px;
}

.dashboard-email-settings__recipients label.dashboard-email-settings__recipient {
    margin-right: 15px;
    font-weight: normal;
    display: inline-block;
}

.dashboard-email-settings__help {
    font-size: 11px;
    color: var(--ditio-sand-1000);
    margin-bottom: 5px;
}

.dashboard-email-settings__email-row {
    margin-bottom: 4px;
}

.dashboard-email-settings__email-input-group {
    max-width: 400px;
}

.dashboard-email-settings__day-input {
    width: 80px;
    display: inline-block;
}

.dashboard-email-settings__weekday-select {
    width: 140px;
    display: inline-block;
    margin-left: 5px;
}

.dashboard-email-settings__save-row {
    margin-top: 10px;
}

/* Brand-blue controls inside the email settings panel */
.dashboard-email-settings input[type="checkbox"] {
    accent-color: var(--ditio-primary-600);
}

.dashboard-email-settings .btn-primary {
    background: var(--ditio-primary-600);
    border-color: var(--ditio-primary-600);
    border-radius: 6px;
    color: #FFFFFF;
}

.dashboard-email-settings .btn-primary:hover,
.dashboard-email-settings .btn-primary:focus,
.dashboard-email-settings .btn-primary:active {
    background: #0165CC;
    border-color: #0165CC;
    color: #FFFFFF;
}

.dashboard-email-settings .btn-default {
    border-color: #DDDDDA;
    border-radius: 6px;
    color: var(--ditio-sand-1200);
    background: #FFFFFF;
}

.dashboard-email-settings .btn-default:hover,
.dashboard-email-settings .btn-default:focus {
    background: #F0F0EE;
    border-color: #DDDDDA;
    color: var(--ditio-sand-1200);
}

.dashboard-email-settings__saved {
    margin-left: 10px;
    color: #2E9E52;
}

/* -- Overall payroll readiness (per-month) + shared progress bar ----------
   Each month renders as the same gray chip used by the overview stat row and
   the project-card metric bands, so the approval dashboard reads as part of
   the same family instead of bare text on the card. */

/* Figma "Registration approval": whole section collapses from the header row */
[name="projectTransactionApprovalStatus"] .dashboard-panel-card {
    /* clear separation between the approval card and the grid below */
    margin-bottom: 32px;
}

.dashboard-approval-header {
    cursor: pointer;
    align-items: center;
}

.dashboard-approval-header__info {
    font-size: 15px;
    color: var(--ditio-sand-1000);
    margin-left: 4px;
    cursor: pointer;
}

.dashboard-approval-header__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--ditio-sand-1200);
    font-size: 14px;
}

.dashboard-approval-header:hover .dashboard-approval-header__chevron {
    background: #F0F0EE;
}

/* breathing room between the section header and the month chips (also in the
   collapsed state, where the chips directly follow the header) */
.dashboard-approval-months {
    margin-top: 16px;
}

.dashboard-readiness-month {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--ditio-sand-300);
}

.dashboard-readiness-month__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ditio-sand-1200);
    line-height: 1.3;
}

.dashboard-readiness-month__stats {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
}

.dashboard-readiness-month__hours,
.dashboard-readiness-month__counts {
    font-size: 16px;
    font-weight: 500;
    color: var(--ditio-primary-600);
}

.dashboard-readiness-month__total {
    color: var(--ditio-sand-1000);
    font-weight: 400;
}

.dashboard-readiness-bar {
    height: 8px;
    margin: 12px 0 0;
    border-radius: 4px;
    background: #E2E2DF;
    box-shadow: none;
}

.dashboard-readiness-bar--compact {
    height: 6px;
    margin: 0;
}

.dashboard-readiness-bar__fill {
    background-color: var(--ditio-primary-600);
    border-radius: 4px;
}

/* -- Filter row (Figma: project/show pills, absences + admin checks,
      refresh right; calendar legend on its own line below) -------------- */

.dashboard-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.dashboard-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 10px;
    height: 32px;
    border: 1px solid #DDDDDA;
    border-radius: 8px;
    background: #FFFFFF;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
}

.dashboard-filter-pill__label {
    color: var(--ditio-sand-1000);
    white-space: nowrap;
}

.dashboard-filter-pill__select {
    border: 0;
    background: transparent;
    font-weight: 500;
    font-size: 13px;
    color: var(--ditio-sand-1200);
    max-width: 220px;
    height: 100%;
    cursor: pointer;
    outline: none;
}

.dashboard-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    color: var(--ditio-sand-1200);
    cursor: pointer;
}

.dashboard-filter-check input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ditio-primary-600);
}

.dashboard-approval-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-weight: 500;
    color: var(--ditio-sand-1200);
}

.dashboard-approval-refresh:hover,
.dashboard-approval-refresh:focus {
    background: #F0F0EE;
}

.dashboard-approval-refresh[disabled] {
    opacity: .6;
}

.dashboard-filter-legend {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-filter-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-filter-legend__swatch {
    width: 28px;
    height: 18px;
    position: relative;
    border: 1px solid var(--ditio-sand-400);
}

.dashboard-filter-legend__swatch-partial {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50%;
    background: #0165CC;
}

.dashboard-filter-legend__label {
    font-size: 11px;
    color: var(--ditio-sand-1000);
}

.dashboard-filter-help {
    font-size: 11px;
    color: var(--ditio-sand-1000);
}

/* -- Admin mode compact table ---------------------------------------------- */

.dashboard-admin-table-wrap {
    border-radius: 0;
}

.dashboard-admin-table__month-col {
    white-space: nowrap;
}

/* Let long project names wrap instead of forcing the first column wide.
   With nowrap, names like "Arbeid for kunder / Customer work" stretched the
   project column ~350px, pushing the month columns off the card at narrower
   viewports (~1300px) so the last month(s) were clipped/hidden. */
.dashboard-admin-table__project-col {
    white-space: normal;
    max-width: 180px;
}

.dashboard-admin-table__month-col {
    cursor: pointer;
}

.dashboard-admin-table__row {
    cursor: pointer;
}

.dashboard-admin-table__expand-icon {
    margin-right: 4px;
    font-size: 11px;
    color: var(--ditio-sand-1000);
}

/* Figma table look: grey header, hairline row dividers, hover tint */
.dashboard-admin-table.table > thead > tr > th {
    border-bottom: 1px solid var(--ditio-sand-500);
    background: var(--ditio-sand-200);
    font-weight: 400;
    color: var(--ditio-sand-1000);
    padding: 10px 8px;
}

.dashboard-admin-table.table > tbody > tr > td {
    border-top: 1px solid #F0F0EE;
    padding: 10px 8px;
    vertical-align: middle;
}

.dashboard-admin-table.table-hover > tbody > tr:hover {
    background: #F7F7F6;
}

.dashboard-admin-table__cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-admin-table__cell .dashboard-readiness-bar--compact {
    /* Grow up to 120px on wide screens, but shrink when the card is narrow so
       all three month columns keep fitting instead of overflowing the card. */
    flex: 1 1 56px;
    max-width: 120px;
    min-width: 40px;
}

.dashboard-admin-table__counts {
    font-weight: 500;
    color: var(--ditio-primary-600);
    white-space: nowrap;
}

.dashboard-admin-table__counts-total {
    color: var(--ditio-sand-1000);
    font-weight: 400;
}

/* -- Project list (>vm.projectListDisplayThreshold active projects) --
   A row-per-project list rather than a table: avoids column-header
   alignment/wrapping problems entirely at this density (130+ rows), and
   matches the compact-list pattern used elsewhere over a rigid data table. */

.dashboard-project-list__filter {
    max-width: 240px;
}

/* No nested scroll container here on purpose - the list flows as part of
   the single page-level scroll (.dashboard-area), consistent with every
   other section on this page. A second independently-scrolling region
   inside an already-scrolling column reads as broken, especially at 130+
   rows (flagged in review). */

.dashboard-project-list__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #F0F0EE;
    cursor: pointer;
}

.dashboard-project-list__row:last-child {
    border-bottom: 0;
}

.dashboard-project-list__row:hover {
    background: #FAFAF9;
}

.dashboard-project-list__row--external {
    background-color: #F7F7F6;
}

/* Rows the user cannot expand (no CanEdit - mirrors the card grid, which
   only renders its expand icon for editable projects) don't invite a click. */
.dashboard-project-list__row--static {
    cursor: default;
}

.dashboard-project-list__row--static:hover {
    background: transparent;
}

.dashboard-project-list__row--static.dashboard-project-list__row--external:hover {
    background: #F7F7F6;
}

.dashboard-project-list__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

.dashboard-project-list__name-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-project-list__name-col .proj-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-project-list__name-col .company-name {
    font-size: 12px;
    color: var(--ditio-sand-1000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-project-list__metrics {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.dashboard-project-list__metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ditio-sand-1000);
    white-space: nowrap;
}

.dashboard-project-list__metric .fa {
    font-size: 12px;
    color: #ADADA8;
}

.dashboard-project-list__alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #FBE9E9;
    color: #D9534F;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-project-list__chevron {
    color: #C7C7C2;
    font-size: 12px;
}

/* Evidence metrics inside list rows can be links (same targets as the card
   grid's evidence row) - keep them in the quiet gray metric style, blue only
   on hover, consistent with the icon convention everywhere else. */
.dashboard-project-list__metric a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.dashboard-project-list__metric a:hover,
.dashboard-project-list__metric a:focus {
    color: var(--ditio-primary-600);
    text-decoration: none;
}

.dashboard-project-list__metric a:hover .fa,
.dashboard-project-list__metric a:focus .fa {
    color: var(--ditio-primary-600);
}

.dashboard-project-list__metric > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-project-list__metric--danger,
.dashboard-project-list__metric--danger .fa {
    color: #D9534F;
}

.dashboard-project-list__alert-badge a,
.dashboard-project-list__alert-badge > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.dashboard-project-list__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -- List/cards view toggle (only rendered above the project threshold) ---- */

.dashboard-view-toggle {
    display: inline-flex;
    border: 1px solid #E5E5E2;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
}

.dashboard-view-toggle__btn {
    border: 0;
    background: #FFFFFF;
    padding: 7px 12px;
    color: var(--ditio-sand-1000);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.dashboard-view-toggle__btn + .dashboard-view-toggle__btn {
    border-left: 1px solid #E5E5E2;
}

.dashboard-view-toggle__btn:hover,
.dashboard-view-toggle__btn:focus {
    color: var(--ditio-sand-1200);
    outline: none;
}

.dashboard-view-toggle__btn--active {
    background: var(--ditio-sand-300);
    color: var(--ditio-sand-1200);
}

.dashboard-view-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* -- Task stats ("Progress" panel): work orders with editable progress ------ */

.dashboard-task-stats__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-task-stats__toolbar-item {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    color: var(--ditio-sand-1000);
    cursor: pointer;
}

.dashboard-task-stats__toolbar-item:hover,
.dashboard-task-stats__toolbar-item:focus {
    color: var(--ditio-primary-600);
}

table.dashboard-task-stats {
    margin-bottom: 0;
}

.dashboard-task-stats__th {
    font-size: 12px;
    font-weight: 500;
    color: var(--ditio-sand-1000);
    border-bottom: 1px solid var(--ditio-sand-400) !important;
    padding: 8px !important;
}

.dashboard-task-stats__th--group {
    text-align: center;
}

.dashboard-task-stats__info {
    color: #ADADA8;
}

.dashboard-task-stats__cell {
    padding: 10px 8px !important;
    font-size: 13px;
    color: var(--ditio-sand-1200);
    border-top: 0 !important;
    vertical-align: middle !important;
}

.dashboard-task-stats tbody + tbody {
    border-top: 1px solid var(--ditio-sand-400) !important;
}

.dashboard-task-stats__cell--name {
    font-weight: 500;
}

.dashboard-task-stats__cell--right {
    text-align: right;
    white-space: nowrap;
}

.dashboard-task-stats__cell--sub {
    font-size: 12px;
    color: var(--ditio-sand-1000);
    white-space: nowrap;
}

.dashboard-task-stats__link {
    color: #ADADA8;
}

.dashboard-task-stats__link:hover,
.dashboard-task-stats__link:focus {
    color: var(--ditio-primary-600);
}

.dashboard-task-stats__muted-icon {
    color: #ADADA8;
}

.dashboard-task-stats__input {
    width: 64px;
    padding: 3px 8px;
    border: 1px solid #E5E5E2;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 13px;
    color: var(--ditio-sand-1200);
    text-align: right;
}

.dashboard-task-stats__input:focus {
    outline: none;
    border-color: var(--ditio-primary-600);
}

.dashboard-task-stats__save {
    color: var(--ditio-primary-600);
    cursor: pointer;
    margin-left: 4px;
}

.dashboard-task-stats__on-track {
    color: #46A758;
}

.dashboard-task-stats__chart-cell {
    padding: 0 8px 10px !important;
    border-top: 0 !important;
}

.dashboard-task-stats__chart {
    min-height: 125px;
}

.dashboard-task-stats__scatter-col {
    margin-top: 16px;
}

.dashboard-admin-table__month-cell {
    min-width: 96px;
}

.dashboard-admin-table__remaining {
    font-size: 11px;
    color: var(--ditio-sand-1000);
    white-space: nowrap;
}

.dashboard-admin-table__user-row {
    background: var(--ditio-sand-200);
}

.dashboard-admin-table__user-col {
    padding-left: 28px;
    white-space: nowrap;
    font-size: 12px;
}

.dashboard-admin-table__user-link {
    margin-left: 4px;
}

.dashboard-admin-table__user-link .fa {
    font-size: 11px;
}

.dashboard-admin-table__user-month-cell {
    font-size: 11px;
    min-width: 96px;
}

.dashboard-admin-table__absence {
    margin-left: 4px;
}

.dashboard-admin-table__empty {
    color: #C8C7C1;
}

/* -- Per-project payroll readiness panel (wraps <approval-calendar>) ------- */

.dashboard-project-panel {
    border-radius: 0;
    border: 1px solid var(--ditio-sand-400);
    background: var(--ditio-sand-100);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
    margin-bottom: 16px;
}

.dashboard-project-panel__heading {
    padding: 12px 16px;
    font-weight: 600;
    color: var(--ditio-sand-1200);
    background: var(--ditio-sand-100);
    border-bottom: 1px solid var(--ditio-sand-400);
    position: relative;
}

.dashboard-project-panel__body {
    padding: 16px;
}

/* -- Health stats (dormant users / user sync suggestions) ------------------ */

.dashboard-health-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-health-card {
    position: relative;
    width: 200px;
    padding: 16px;
    font-size: 12px;
}

.dashboard-health-card__refresh {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--ditio-sand-900);
    cursor: pointer;
}

.dashboard-health-card__title {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ditio-sand-1200);
}

.dashboard-health-card__value {
    font-weight: bold;
    font-size: 30px;
    color: var(--ditio-sand-1200);
}

.dashboard-health-card__value:hover,
.dashboard-health-card__value:focus {
    color: var(--ditio-primary-600);
}

/* Right-click "Split hours" on approval-calendar transaction bars (planning-core#600).
   A one-item context menu and the reused "Split at time" popover, both fixed at the cursor. */
.cal-ctx-menu {
    position: fixed;
    background: #fff;
    border: 1px solid var(--divider, #e3e3e0);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.14);
    padding: 4px;
    z-index: 4001;
    min-width: 150px;
}
.cal-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: var(--primaryText, #33322e);
    border-radius: 4px;
    cursor: pointer;
}
.cal-ctx-item:hover {
    background: var(--hover, #f2f2ef);
}
.cal-ctx-item .fa {
    color: var(--secondaryText, #868682);
    font-size: 12px;
}
.cal-split-popover {
    position: fixed;
    width: 168px;
    background: #fff;
    border: 1px solid var(--divider, #e3e3e0);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.14);
    padding: 8px;
    z-index: 4001;
}
.cal-split-title {
    font-size: 11px;
    color: var(--secondaryText, #868682);
    margin-bottom: 4px;
}
.cal-split-input.form-control {
    width: 100%;
    height: 28px;
    text-align: center;
    margin-bottom: 6px;
    border-color: var(--divider, #d7d7d3);
}
.cal-split-error {
    display: none;
    font-size: 11px;
    color: var(--accent, #f3671b);
    margin-bottom: 6px;
}
.cal-split-actions {
    display: flex;
    gap: 6px;
}
.cal-split-actions .btn {
    flex: 1;
}