:root {
  --color-dev-primary: #00b1e6;
  --color-dev-secondary: #1a2c5f;
  --color-dev-third: #8dd8f8;
  --color-dev-heading: #1a2c5f;
  --color-fourth: #1f82c0;
  --color-body: #636363;
  --color-gray-1: #d3d5dd;
  --color-bg-page: #f2f2f2;
  --color-blue-light: #d5edff;
}

.color-fourth {
  color: var(--color-fourth);
}

body {
  color: var(--color-body);
}

#dashboard {
  h2 {
    color: var(--color-fourth);
  }

  h3 {
    font-weight: 800;
  }

  .link {
    color: var(--color-primary);

    .icon {
      color: var(--color-primary);
    }
  }

  .icon-in-link {
    color: var(--color-primary);
  }

  .hook-dashboard {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;

    solid-resource[displaymode="simpleList"] .solid-resource > solid-display {
      margin-left: 0;
      margin-right: 0;
    }
  }

  solid-resource {
    display: block;
    flex-basis: calc(66% - 15px);

    & > .solid-resource > solid-display {
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(0 0 0 / 11%);
      flex-grow: 1;
      flex-shrink: 1;
      padding: 15px;
      display: block;

      div > solid-display {
        display: block;
        margin-bottom: 15px;
      }

      a {
        display: inline;
        vertical-align: baseline;
        color: var(--color-primary);
      }

      p {
        display: inline;
      }
    }

    solid-form-search {
      display: none;
    }

    solid-display {
      nav {
        display: none;
      }
    }

    &.cardsList {
      flex-basis: calc(100%);

      & > .solid-resource > solid-display {
        background: transparent;
        box-shadow: none;
        flex-shrink: 1;
        display: block;
        padding: 0 0 15px 0;

        & > div {
          margin-left: -15px;
          margin-right: -15px;
        }

        res-display-cardslist-date-resource-card-list .text-left::before {
          content: "Publié le ";
        }
      }
    }
  }

  solid-event {
    display: block;
    flex-basis: calc(34% - 15px);
    margin-left: 30px;

    & > .solid-event > solid-display {
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(0 0 0 / 11%);
      flex-grow: 1;
      flex-shrink: 1;
      padding: 15px;
      display: block;

      & > div > solid-display {
        display: block;
        margin-bottom: 15px;

        span {
          text-transform: capitalize;
          font-weight: 900;
        }

        a {
          color: var(--color-primary);
          vertical-align: top;
        }

        [name="segment"] {
          display: flex;
        }

        [name="segment1"] {
          flex: 0 0 100px;
        }

        [name="segment2"] {
          flex: 1;
        }
      }
    }

    solid-form-search {
      display: none;
    }

    solid-display {
      nav {
        display: none;
      }
    }
  }
}

#main__menu {
  .text-uppercase {
    text-transform: none;
  }
}

/* All link on main */
main .link {
  color: var(--color-primary);
  vertical-align: initial;
}

.hook-dashboard .flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

/* temp fix for resources */

.resourcedetail solid-display-value-markdown p {
  margin: 0 0 10px 0;
}
.resourcedetail solid-display-value-markdown ul {
  margin: 0 0 10px 0;
  padding: 0 0 10px 10px;
  list-style: disc inside;
}

/* fix rigth menu cicrcles */

solid-link[next="admin-messages"] {
  span {
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
  }
  a {
    margin-right: 20px;
    white-space: normal;
  }
}

#content > .with-sidebar .jsRightMenu .jsOffsiteToggle .text-right,
#circles nav solid-router .jsOffsiteToggle .text-right {
  text-align: left !important;
}

/*
return link on left on resource and events forms
*/
#resources-create,
#resources-edit,
#events-create,
#events-edit {
  & > div.sm-padding-top-small {
    display: flex;
    flex-direction: column-reverse;
    & > .text-right {
      text-align: left;
      padding-bottom: 20px;
    }
  }
}

#navbar-router {
  solid-route[name="resources"],
  solid-route[name="events"] {
    display: none;
  }
}
.solid-event {
  [next="default-newevent"] {
    display: none;
  }
}
.resourcedetail .wrapper-resource-comments {
  display: none;
}

.listresources > div > .actions-list {
  display: none;
}

#circles .listresources > div > .actions-list {
  display: inline-block;
}


#tzcld, #territories, #myterritories {
  > div.scrollbar-content {
    padding: 0;
  }

  .with-sidebar .sidebar ul solid-route[active] > li {
    background-color: var(--color-heading);
    color: white;
  }

  solid-display-value-markdown p {
    margin: 0 0 10px 0;
  }

  solid-display-value-markdown ul {
    margin: 0 0 10px 0;
    padding: 0 0 10px 10px;
    list-style: disc inside;
  }
}

// Remove the border and padding from the first element of the breadcrumb
// Align the backlink to the left
div[data-view] > .segment.border-color-grey,
.breadcrumb {
  display: flex;
  border: none;
  padding: 0;
  margin-bottom: 16px;

  & > *:has(.backlink) {
    order: -1;
    width: min-content;
    margin-right: 24px;
  }
}

.hidden-pagination {
  nav[data-id="nav"] {
    display: none !important;
  }
}