@import "variables.css";


@keyframes dropDown {
  0% {
    opacity: 0.5;
    transform: translateY(-200%);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
    /* background: lavender; */
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes appear {
  0%   { opacity: 0 } 
  100% { opacity: 1 }
}


* {
  box-sizing: border-box;
  interpolate-size: allow-keywords;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

.container {
  width: var(--content-width);
  margin: 0 auto;
  max-width: calc(100% - calc(2 * var(--content-gutter)));
}

.highlight {
  position: relative;
  /* color: var(--color-text); */
}

.highlight::after {
  position: absolute;
  width: calc(100% + 6px);
  height: 100%;
  inset: 0px -3px;
  content: "";
  background: #00DDDD80;
  z-index: -1;
  border-radius: 3px;
}


body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.popup {
  width: 100vw; height: 100vh;
  position: fixed;
  z-index: 999;
  backdrop-filter: 
    contrast(80%) 
    blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.popup.hidden {
  pointer-events: none; 
  filter: blur(20px);
  opacity: 0;

  transition: 500ms;
}

  .popup__window {
    width: max-content; height: max-content;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 30px;

    padding: 50px;
    background: #fffc;
    border-radius: 15px;
    border: 1px solid var(--color-line);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  }

    .popup__header {
      font-family: var(--font-condensed);
      width: max-content;
      line-height: 0.8em;
      color: var(--color-text);
      /* font-size: max(3vw, 28px); */  
      font-size: clamp(28px, 6vw, 60px);
      font-weight: 800;
    }

    .popup__subheader {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      /* font-size: max(1vw, 15px); */
      font-size: clamp(14px, 2vw, 18px);
      font-weight: 500;
      gap: 20px;
    }

.header {
  position: fixed;
  z-index: 2;
  width: 100%; height: 66px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0 0 75px transparent;

  transition: 1s;
}

  .header__link {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;

    a {
      opacity: 0.5;
      transition: 200ms;
    }

    a.selected {
      font-weight: 600;
      opacity: 1;
    }
  }

  /* .header__link:hover {
    img {
    }
  } */

  .header__logo {
    position: absolute;
    width: 70px; height: 38px;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: end;
  }

  .filters {
    /* background: linear-gradient(#FFFFFF, #FFFFFF00); */
    position: sticky;
    z-index: 2;
    /* width: 100%;  */
    width: calc(100% + 80px);
    max-width: calc(100vw - 80px);
    /* height: 80px; */
    height: max-content;
    /* inset: 66px 0 0 0; */
    top: 86px;
    display: flex;
    align-items: center;
    flex: none;
    pointer-events: none;

    /* transition: 500ms; */

    /* animation-name: dropDown;
    animation-duration: 1s;
    animation-delay: 300ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(1, 0, 0.2, 0.7); */
  }

  .filters__row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* align-items: start; */
    align-items: center;
    gap: 15px;

    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
  }

  /* .filters__row::after {
    background: linear-gradient(#0000000B, #0000);
    opacity: 0;
    position: absolute;
    width: calc(100% + 40px);
    height: 70px;
    inset: -20px 0 auto 0;
    margin: auto -20px;
    content: "";
    z-index: -1;
    transition: 500ms;
  } */

    .search__container {
      position: relative;
      pointer-events: auto;
    }

    .filters__search {
      width: 100%; height: 40px;
      max-width: 300px;
      /* padding: 0 12px; */
      padding: 0 35px;
      display: flex;
      gap: 12px;
      /* background: var(--color-bg-alt); */
      background: var(--color-bg);
      border: 1px solid var(--color-line);
      /* border-radius: 8px; */
      border-radius: 20px;
      /* box-shadow: 0 5px 3px #00000008; */
      font-family: var(--font);
      font-size: var(--font-size-15);
      font-weight: 500;
      color: var(--color-text);

      transition: 200ms 300ms;

      /* animation-name: dropDown;
      animation-duration: 250ms;
      animation-delay: 250ms;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0,0,0,1); */
    }

    .search__icon {
      position: absolute;
      inset: 0 auto 0 13px;
      margin: auto;
    }

    .search__clear__btn {
      width: 16px; height: 16px;
      position: absolute;
      inset: 0 12px 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      z-index: 2;
      border-radius: 50%;
    }

    .filters__search::placeholder {
      color: var(--color-text-alt);
      opacity: 0;
    }

    .filters__dropdowns {
      display: flex;
      gap: 15px;
    }

      .dropdown {
        position: relative;
        pointer-events: auto;

        /* animation-name: dropDown;
        animation-duration: 200ms;
        animation-delay: calc(var(--animation-index) * 200ms + 1s);
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0,0,0,1); */
      }

        .dropdown__btn {
          width: max-content; height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          padding: 0 10px;
          border-radius: 15px;
          font-size: var(--font-size-13);
          font-weight: 500;
          cursor: pointer;
          border: 1px solid transparent;
          background: var(--color-bg);
          border: 1px solid var(--color-line);
          /* box-shadow: 0 5px 3px #00000008; */
          
          transition: 200ms 300ms;

          /* visual correction */
          span {
            margin-top: -2px;
          }
        }

        .dropdown__menu {
          position: absolute;
          inset: 43px 0px auto auto;
          background: var(--color-bg);
          width: max-content;
          min-width: 250px;
          flex-direction: column;
          border: 1px solid var(--color-line);
          border-radius: 8px;
          box-shadow: 0 13px 3px -8px #0000000A;
          overflow: hidden;
          pointer-events: none;
          display: flex;

          /* height: 0; */
          opacity: 0;

          transition: 200ms;
        }

        .dropdown.expanded {
          .dropdown__menu {
            /* height: max-content; */
            opacity: 1;
            pointer-events: auto;
          }

          .dropdown__btn img {
            transform: scaleY(-1);
          }
        }

        .dropdown:not(.expanded) .dropdown__menu{
          a, .dropdown__content {
            display: none;
          }
        }

          .dropdown__header {
            padding: 10px 15px;
            font-size: var(--font-size-15);
            font-weight: 500;
            border-bottom: 1px solid var(--color-line);
            display: flex;
            justify-content: space-between;
            align-items: center;

            a {
              text-decoration: underline;
              cursor: pointer;
              font-size: var(--font-size-13);
              text-decoration-thickness: 1px;
            }
          }

          .dropdown__content {
            display: flex;
            flex-direction: column;
            padding: 15px;
            gap: 5px;
            font-size: var(--font-size-13);
            line-height: 0.8em;
            max-height: 300px;
            overflow-y: scroll;
          }

            .dropdown__group {
              display: flex;
              flex-direction: column;
              gap: 5px;

              /* margin: 15px 0; */
            }

            .dropdown__group__title {
              font-weight: 700;
              text-transform: uppercase;
              margin-top: 10px;
              /* margin-bottom: 10px; */
            }

            .dropdown__group__row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 15px;

              > input[type="checkbox"], input[type="radio"] {
                margin: 0;
              }
            }

.page {
  /* height: calc(100vh - 66px); */
  /* margin: 66px 0 40px; */
  padding: 86px 40px 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  overflow-x: clip;
}

.main__container {
  width: var(--content-width);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 7px;

  container-type: inline-size;
  container-name: main-container;
}

.main__container--login {
  width: 100% ;height: 100vh;
  justify-content: center;
  align-items: center;
  gap: 40px
}

  .main {
    width: 100%;
    max-width: var(--content-width);
    display: flex;
    flex-direction: column;
    /* gap: 30px; */
    gap: 40px;
  }

    .main__heading {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* gap: 20px; */
      gap: 10px;
    }

      .main__heading__title {
        font-size: var(--font-size-36);
        line-height: 1.25em;
        height: 1.25em;
        /* line-height: 0.8; */
        font-weight: 700;
        margin: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;

        > span {
          transition: 200ms ease-out;
        }
      }

      .main__heading__results {
        font-size: var(--font-size-18);
        line-height: 0.8;
      }

    .main__list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
      .card {
        --animation-delay: 100ms;

        background: var(--color-bg);
        border: 1px solid var(--color-line);
        border-radius: 10px;
        width: 100%; 
        padding: 25px;
        display: flex;
        justify-content: center;
        gap: 20px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        line-height: 0.75;
        transform-origin: 0 0;

        animation-name: fadeIn;
        animation-duration: 100ms;
        animation-delay: calc(var(--animation-index) * var(--animation-delay) + 100ms);
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0, 0, 0.33, 1);

        transition: background 0s 0s;
      }

        /* .card__row {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          z-index: 1;
        } */

        .card__left,
        .card__right {
          animation-name: appear;
          animation-duration: 1s;
          animation-delay: calc(var(--animation-index) * var(--animation-delay) + 300ms);
          animation-fill-mode: both;
          /* animation-timing-function: ease-in; */
          /* animation-timing-function: cubic-bezier(0, 0, 0.33, 1); */
        }

        .card__left {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 20px;
        }

        .card__right {
          display: flex;
          flex-direction: column;
          align-items: end;
          justify-content: space-between;
        }

          .card__heading {
            display: flex;
            flex-direction: column;
            gap: 10px;
          }

          .card__title {
            font-family: var(--font-condensed);
            font-size: var(--font-size-22);
            font-weight: 600;
            color: var(--color-text);
          }

          .card__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: var(--font-size-14);
            color: var(--color-text-light);
          }

            .card__tags > div {
              height: 22px;
              background: var(--color-bg);
              border-radius: 5px;
              font-size: var(--font-size-13);
              font-weight: 400;
              display: flex;
              align-items: center;
              padding: 0 5px;
              box-shadow: 0px 5px 3px hsla(0,0%,0%,3%);
              border: 1px solid var(--color-line);
            }

          .card__company,
          .card__location {
            font-family: var(--font-condensed);
            font-size: var(--font-size-16);
            font-weight: 500;
            color: var(--color-text-light);
            width: max-content;
          }

          .card__date {
            font-family: var(--font-mono);
            font-size: var(--font-size-13);
            font-weight: 600;
            color: var(--color-text-light);
            text-wrap: nowrap;
          }

        .card__ripple {
          position: absolute;
          background: var(--color-bg-selected);
          width: 1100px;
          scale: 0;
          aspect-ratio: 1;
          border-radius: 50%;
          background-attachment: fixed;
          background-size: cover;
          background-position: center;
          z-index: 0;
          transform-origin: 50% 50%;
          inset: -50px -50px;
          margin: auto;
          z-index: 1;
          filter: blur(10px);

          transition: 300ms, opacity 300ms 300ms;
        }
    
      .card[data-published="0"] {
        background: var(--color-bg-disabled);
        color: var(--color-text-disabled);

        * {
          color: var(--color-text-disabled);
        }
        
        .card__tags > div { 
          background: var(--color-text-disabled);
          color: var(--color-bg-disabled);
          border: 1px solid transparent;
        }
      }


      .card.card--selected {
        background: var(--color-bg-selected);
        border: 1px solid var(--color-bg-selected);
        transition: 0s 300ms;

        *:not(.card__ripple) {
          color: var(--color-text-selected) !important;
          transition: 0s ease-in 300ms;
        }

        .card__title {
          color: var(--color-text-inverted) !important;
        }

        .card__tags > div {
          background: var(--color-bg-selected) !important;
          border-color: var(--color-text-selected) !important;
        }

        .card__ripple {
          scale: 1;
          opacity: 0;
        }
      }

    .row {
      --animation-delay: 50ms;

      width: 100%;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      /* border-radius: 10px; */
      z-index: 0;
      cursor: pointer;
      border-top: 1px solid var(--color-line);

      transition: 200ms;

      * { 
        transition: 200ms; 
      }

    }

    .row:last-child {
      border-bottom: 1px solid var(--color-line);
    }

    .row.row--selected + .row {
      border: none;
    }

    .row.row--selected {
      background: var(--color-primary);
      border-radius: 10px;
      border-top: 1px solid transparent;
      
      * { 
        color: var(--color-text-inverted);
      }
    }

      .row__company, .row__leerbedrijf {
        animation-name: appear;
        animation-duration: 1s;
        animation-delay: calc(var(--animation-index) * var(--animation-delay) + 100ms);
        animation-fill-mode: both;
      }
      
      .row__company {
        font-family: var(--font-condensed);
        font-size: var(--font-size-16);
        font-weight: 600;
        color: var(--color-text);
      }

      .row__leerbedrijf {
        font-family: var(--font-mono);
        font-size: var(--font-size-13);
        font-weight: 600;
        text-wrap: nowrap;
        color: var(--color-text-light);
      }

    .main__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      animation-name: appear;
      animation-duration: 200ms;
      animation-delay: 1s;
      animation-fill-mode: both;

      select {
        width: 48px; height: 32px;
        border-radius: 6px;
        border: none;
        background: var(--color-bg-input);
        font-family: var(--font);
        text-align: center;
      }
    }

      .main__footer__limit {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .main__footer__pagination {
        display: flex;
        align-items: center;
        gap: 10px;

        .pagination__btn {
          background: var(--color-bg);
          border: 1px solid var(--color-line);
          line-height: 30px;
          width: 32px; height: 32px;
          border-radius: 16px;
          display: flex;
          justify-content: center;
          box-shadow: 0 5px 5px 0 #8080800D;
          cursor: pointer;

          transition: 200ms;

          img {
            width: 8px;
          }
        }

        .pagination__btn.disabled {
          box-shadow: none;
          cursor: auto;

          img {
            opacity: .2;
          }
        }

        /* .pagination__btn:hover {
        } */

        input {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: var(--color-bg-input);
          border: none;
          font-family: var(--font);
          text-align: center;
        }
      }

  .panel__hide.disabled {
    opacity: 0.2;
    pointer-events: none;
  }

  .panel__sticky {
    position: sticky;
    z-index: 3;
    top: 86px;
    width: 100%; height: max-content;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    
    max-width: 0;
    opacity: 0;
    margin: 0 -20px;

    transition: 
      500ms ease-in-out,
      opacity 0s;
  }

    .form {
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: 40px;
    }

    .form--login {
      width: 420px;
    }

      .form__title {
        width: 100%;
        font-size: var(--font-size-30);
        font-weight: 600;
      }

      .form__section {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px;

        label {
          position: relative;
          width: 100%;
        }
      }

        .form__section__title {
          font-size: var(--font-size-15);
          font-weight: 500;
        }

        .form__row {
          display: flex;
          gap: 15px;
        }

        .form__input {  
          input {
            width: 100%; height: 45px;
            background: var(--color-bg);
            border-radius: 5px;
            border: 1px solid var(--color-line);
            font-family: var(--font);
            font-size: var(--font-size-15);
            font-weight: 500;
            padding: 0 15px;
  
            transition: 200ms;
          }
  
          input[disabled] {
            background: var(--color-bg-alt);
            border: 1px solid transparent;
          }

          input + span {
            position: absolute;
            line-height: 45px;
            left: 15px;
            font-size: var(--font-size-15);
            font-weight: 500;
            color: var(--grey);
          }
  
          input:not(:placeholder-shown) + span {
            background: var(--color-bg);
            font-size: var(--font-size-13);
            line-height: 14px;
            inset: -7px auto auto 10px;            
            padding: 0 6px;
  
            transition: 200ms;
          }
        }

        .form__select {
          select {
            width: 100%; height: 45px;
            background: transparent;
            border-radius: 5px;
            border: 1px solid var(--color-line);
            font-family: var(--font);
            font-size: var(--font-size-15);
            font-weight: 500;
            padding: 0 20px;
  
            transition: 200ms;
          }

          select[disabled] {
            background: var(--color-bg-alt);
            border: 1px solid transparent;
          }
        }

        .form__multiselect {
          .ts-control {
            height: 45px;
            border: 1px solid var(--color-line);
            border-radius: 5px;

            > .item {
              margin: 0 8px 0 0 !important;
              border-radius: 3px;
              padding-left: 10px !important;

              > .remove {
                margin-left: 10px !important;
              }
            }

            > input {
              margin: 0 12px !important;
              font-size: var(--font-size-15);
              font-weight: 500;
            }
          }
        }

        input[type="submit"] {
          width: calc(50% - 7.5px); height: 45px;
          min-height: 45px;
          border-radius: 5px;
          font-family: var(--font);
          font-size: var(--font-size-15);
          font-weight: 500;
          background: var(--color-primary);
          color: var(--color-text-inverted);
          border: none;
          cursor: pointer;
        }

        .form__toggle {
          input[type="checkbox"] {
            position: absolute;
            visibility: hidden;
          }

          input + div {
            width: 100%; height: 100%;
            line-height: 41px;
            text-align: center;
            border: 2px solid var(--color-primary);
            border-radius: 5px;
            color: var(--color-primary);
            font-size: var(--font-size-15);
            font-weight: 500;
            cursor: pointer;

            transition: 200ms;
          }

          input:checked + div {
            background: var(--color-primary);
            color: var(--color-text-inverted);
          }
          
        }

        .form__section__grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 5px;
        }

        .checkbox {
          display: flex;
          align-items: center;
          gap: 15px;
          /* gap: 12px; */
          font-size: var(--font-size-14);
          color: var(--color-text-light);

          > input {
            width: 14px; height: 14px;
            margin: 0;
          }
/* 
          + .checkbox {
            margin-top: -10px;
          } */
        }

    .detail {
      width: 100%;
      /* max-width: 900px; */
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 125px);
      overflow: hidden;

      container-type: inline-size;
      container-name: detail;
    }

    @container detail (max-width: 700px) {

      .detail__header, 
      .detail__content {
        padding: 20px 20px !important;
        gap: 20px;
      }
      
      .detail__row {
        flex-direction: column;
        gap: 20px;
      }
    }

    /* .detail.detail--form {
      max-width: 800px;
    } */

      .detail__header {
        position: relative;
        width: 100%; height: max-content;
        padding: 30px 40px;
        display: flex;
        justify-content: space-between;
        gap: 5px;
        border-bottom: 1px solid var(--color-line);

        input[disabled] {
          background: transparent;
          border: none;
          padding: 0;
          appearance: none;
          pointer-events: none;
        }

        input {
          color: var(--color-text);
          font-family: var(--font-text);
          border-radius: 5px;
          border: 1px solid var(--color-line);
          padding: 2px 5px;
          width: max-content;
        }
      }

        .detail__header__sub {
          /* max-width: calc(100% - 100px); */
          max-width: calc(100% - 130px);
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          align-items: center;
        }

        .detail__header__tools {
          width: max-content; height: max-content;
          /* position: absolute; */
          /* inset: 30px 30px auto auto; */
          /* margin: auto; */
          display: flex;
          align-items: center;
          gap: 15px;

          a {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .detail__header__title {
          color: var(--color-primary);
          font-family: var(--font-condensed);
          font-size: var(--font-size-22);
          font-weight: 700;    
          line-height: 0.8;
          text-overflow: ellipsis;
        }
        
        div.detail__header__title {
          color: var(--color-text);
          font-size: var(--font-size-22);
          font-weight: 600;
        }
        
        /* input.detail__header__title {
          border: none;
          border-radius: 5px;
          background: transparent;
          margin: -6px -5px;
          padding: 0 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
          color: var(--color-primary);
          font-size: var(--font-size-30);
          font-weight: 700;          
          
          transition: 200ms color;
        } */

        /* .detail__header__title:focus {
          outline: 2px solid black;
        } */

        .detail__header__subtitle {
          margin: 0;
          color: var(--color-text);
          font-family: var(--font-condensed);
          font-size: var(--font-size-18);
          line-height: 0.8;
          font-weight: 500;
          text-decoration: underline;
          /* align-self: end; */
        }

        input.detail__header__subtitle {
          border: none;
          border-radius: 5px;
          background: transparent;
          margin: -6px -5px;
          padding: 0 5px;
          /* overflow: hidden;
          text-overflow: ellipsis; */
          display: flex;
          align-items: center;
          /* color: var(--color-primary); */
          /* font-size: var(--font-size-30); */
          /* font-weight: 700;           */          
          transition: 200ms color;
        }

        input.detail__header__subtitle:focus {
          outline: 2px solid black;
        }


      .detail__content {
        width: 100%; height: 100%;
        display: flex;
        flex-direction: column;
        padding: 30px 40px;
        gap: 30px;
        overflow-y: scroll;
        padding-bottom: 85px;
      }

        .detail__section {
          width: 100%;
          display: flex;
          /* gap: 15px; */
          gap: 10px;
          flex-direction: column;
          /* flex: 1 1 50%; */
          /* overflow: hidden; */

          select[disabled], input[disabled] {
            background: transparent;
            border: none;
            padding: 0;
            appearance: none;
            pointer-events: none;
          }

          input[disabled] { 
            appearance: textfield;
          }

          select, input {
            color: var(--color-text);
            font-family: var(--font-text);
            border-radius: 5px;
            border: 1px solid var(--color-line);
            padding: 2px 5px;
            width: max-content;
          }
        }

        /* .detail__section--tinymce {
          flex: unset;
          overflow: unset;
        } */

          .detail__section__title {
            display: flex;
            align-items: end;
            gap: 10px;
            font-size: var(--font-size-13);
            font-weight: 700;
            text-transform: uppercase;
            /* text-decoration: underline; */
            line-height: 11px;
            margin: 0;
          }

          .edit__btn {
            cursor: pointer;
          }

          .detail__section__content {
            font-family: var(--font-legible);
            font-size: var(--font-size-14);
            display: flex;
            flex-direction: column;
            gap: 0.8em;

            p {
              text-align: justify;
            }
            
            p, ul, ol  {
              margin: 0;
            }

            ul, ol {
              padding-left: 1em;
            }
          }

        /* .mce-content-body {
          padding: 5px;
          margin: -5px;
        } */

        /* .mce-edit-focus {
          outline: 2px solid black;
          border-radius: 2px;
        } */


        /*
        tomselect css.
        */
        .tomselect_tags.disabled {
          .ts-control {
            opacity: 1;
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
          }

            .item {
              border: 1px solid var(--color-line) !important;
              border-radius: 5px !important;
              padding: 0 5px !important;
              height: 22px !important;
              margin: 0 8px 8px 0 !important;
            }

              .remove {
                display: none !important;
              }
        }


        /*
        tinymce css.
        */
        .tox-tinymce {
          border: 1px solid var(--color-line) !important;
        }

        .tox-editor-header {
          border-bottom: 1px solid var(--color-line) !important;
          box-shadow: none !important;
        }

        .tox-editor-header {
          padding: 0 !important;
        }

        .tox-toolbar-overlord {
          background: var(--color-bg-alt);
        }

      .detail__row {
        display: flex;
        gap: 30px;
      }

      .detail__column {
        width: 100%;
        display: flex;
        /* flex: 1 1 50%; */
        flex-direction: column;
        justify-content: start;
        gap: 30px;
      }

        .table__container {
          position: relative;

          img {
            position: absolute;
            width: 12px; height: 12px;
            inset: 9 9 auto auto;
            margin: auto;
          }
        }

        table.table {
          border-collapse: collapse;
          font-size: var(--font-size-13);
          table-layout: fixed;
          width: 100%;

          tr.table__header {
            background: var(--color-bg-alt);
            color: var(--color-text-alt);
            position: relative;
          }

          .table__remove {
            width: 32px; height: 32px;
            position: absolute;
            inset: 0 0 auto auto;
            margin: auto;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }

          tr:not(.table__header):not(:last-child) {
            border-bottom: 1px solid var(--color-line);
          }

          th:first-child, td:first-child {
            padding-left: 10px;
          }

          th:last-child, td:last-child {
            padding-right: 10px;
            /* width: 100%; */
          }

          th:not(last-child), td:not(last-child) {
            padding-right: 60px;
          }

          th, td {
            width: max-content; height: 32px;
            /* text-wrap: nowrap; */
            position: relative;
          }

          th {
            text-align: start;
            font-weight: 600;
          }
        }

        .table.table--nowrap {
          th, td {
            text-wrap: nowrap;
            word-wrap: break-word;
            overflow-wrap: break-word;

            /* TODO: make table cell work with max-content instead of hardcoding width. */
            width: 225px;
          }

          th:last-child, td:last-child {
            width: 100%;
          }
        }
        
        /* .detail__table {
          display: grid;
          grid-template-columns: max-content 1fr;
          font-size: var(--font-size-13);

          > div:nth-child(4n+1) {
            background: var(--color-bg-alt);
            border-radius: 6px 0 0 6px;
          }

          > div:nth-child(4n+2) {
            background: var(--color-bg-alt);
            border-radius: 0 6px 6px 0;
          }
        }

          .detail__table__label, .detail__table__value {
            height: 32px;
            line-height: 32px;
            overflow: hidden;
          }

          .detail__table__label {
            padding: 0 0 0 10px;
          }

          .detail__table__value {
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            padding: 0 10px 0 30px;
          } */


        /* .switch {
          position: relative;
          display: inline-block;
          width: 40px; height: 20px;
          margin: 6px 0;
        }

        .switch input {
          opacity: 0;
          width: 0; height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          inset: 0;
          background-color: var(--grey-2);
          -webkit-transition: .4s background-color, .4s transform;
          transition: .4s background-color, .4s transform;
        }

        .slider:before {
          position: absolute;
          content: "";
          height: 14px; width: 14px;
          left: 3px; bottom: 3px;
          background-color: #fff;
          -webkit-transition: .4s background-color, .4s transform;
          transition: .4s background-color, .4s transform;
        }

        /* input:checked + .slider { */
        /* input[value="1"] + .slider {
          background-color: var(--color-primary);
        }

        input:focus + .slider {
          outline: 2px solid #000;
        }

        input[value="1"] + .slider:before {
          -webkit-transform: translateX(19px);
          -ms-transform: translateX(19px);
          transform: translateX(19px);
        }

        .slider.round {
          border-radius: 10px;
        }

        .slider.round:before {
          border-radius: 50%;
        } */

    .admin__panel {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: 10px;
      /* inset: auto 40px 40px auto; */
      inset: auto 20px 20px auto;
      /* opacity: 0.33; */
      transition: 200ms;
    }

    /* .admin__panel:hover {
      opacity: 1;
    } */

    .btn {
      background: var(--color-primary);
      color: var(--color-text-inverted);
      border: 1px solid transparent;
      border-radius: 5px;
      width: max-content;
      display: flex;
      justify-content: center;
      align-items: center;
      /* gap: 10px; */
      font-family: var(--font);
      /* font-size: var(--font-size-15); */
      font-size: var(--font-size-14);
      font-weight: 500;
      cursor: pointer;
      height: 40px;
      padding: 0 15px;
      /* box-shadow: 0 0 0 hsla(0, 0%, 0%, .15); */
      box-shadow: 0 12px 6px -8px hsla(0, 0%, 0%, .18);
      transition: 300ms;
      z-index: 99;
    }

    .btn:hover {
      transform: translateY(-2px);
      /* box-shadow: 0 4px 1px hsla(0, 0%, 0%, .15); */
      box-shadow: 0 14px 8px -8px hsla(0, 0%, 0%, .18);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 0 0 0 hsla(0, 0%, 0%, .18);
      transition: 100ms;
    }

    .btn--header {
      /* height: 40px;
      padding: 0 15px; */
      border: none;
      /* box-shadow: 0 13px 3px -8px hsla(0, 0%, 0%, 0.039); */

      display: flex;
      flex-direction: column;
      justify-content: start;
      overflow: hidden;

      > span {
        line-height: 40px;
        transition: 200ms;
      }
    }

    .btn--small {
      height: 35px;
      padding: 0 10px;
      font-size: var(--font-size-13);
    }

    /* .btn:not(.btn--disabled):hover {
      transform: translateX(0);
    } */

    .btn--disabled {
      background: var(--color-bg);
      border: 1px solid var(--color-text-disabled);
      color: var(--color-text-disabled);
    }

    .publish[data-action="hide"] {
      background: var(--text-light);      
      color: var(--color-text-inverted);
    }

body[data-id] {

    .panel__sticky {
      opacity: 1;
      max-width: var(--content-width);
      margin: 0;

      transition: 
        500ms,
        opacity 500ms 500ms;
    }

    .filters {
      width: 100%;
      transition: 500ms;
    }
}

body[data-id="form"] {
  .panel__sticky {
    max-width: 650px;
  }

  .detail__header {
    padding: 25px 40px;
  }
}


body[data-published="0"] {
  .panel__sticky {
    background: var(--color-bg-alt);
    filter: saturate(0);

    * {
      color: var(--color-text-alt) !important;
    }

    .panel__hide {
      .strike, .mask {
        display: none;
      }
    }
  }
}

body[data-scrolled=true] {
  /* .filters__row::after {
    opacity: 1;
  } */

  .header {
    box-shadow: 0 0 75px hsla(200, 10%, 80%, 0.5);
  }

  .filters__search, 
  .dropdown__btn {
    box-shadow: 0 5px 3px #00000008;
  }

}

body[data-mode="companies"] {
  /* .main__heading__title > span,
  .header__link__text > span {
    transform: translateY(-100%);
  } */

  /* .header__link__text > span:first-of-type {
    display: none;
  } */

  .btn.btn--header > span {
    transform: translateY(-100%);
  }

  .main__heading__title > span {   
    transform: translateY(-100%);
  }

  .main__list {
    gap: 0;
  }
}

/* @container main-container (max-width: 1200px) {
  .filters {
    max-width: 0;
    padding: 0;
    margin: 0 -20px;
  }
} */

@media screen and (max-width: 1600px) {

  .page {
    padding: 86px 20px 40px;
  }

  .panel__sticky {
    transition: none;
  }

  body[data-id] {

    .main__container {
      display: none;
    }

    .panel__sticky {
      transition: none;
    }

  }
}

@media screen and (max-width: 800px) {

  body[data-scrolled=true] {
    .header {
      box-shadow: 0 0 100px hsla(200, 10%, 80%, 1);
    }
  }

  .filters__row {
    flex-direction: column;
  }
}