// @keyframes bubble {
//   to {
//     box-shadow: 0 0 0 20px #1741955c;
//   }
// }

.noTransition{
  transition: none !important;
}

.items-filters-open-btn-active{
  border-radius: 5px 5px 0 0 !important;
  margin-bottom: 10px;
}

.item-filter {
  hr {
    width: 100%;
    margin: 1em 0;
  }

  label{
    color: var(--pColor);
  }

  .items-label-filter {
    padding: 0.5em;
    width: 100%;
    color: #F2F2F2;
    border-radius: 5px 5px 0 0;
    background-color: var(--filterOpenBtnBg);

    i {
      margin-right: 5px;
    }
  }

  .items-searchbar-filter {
    width: 100%;
    position: relative;
    box-shadow: var(--shadow);

    input {
      padding: 0.8em;
      border: none;
      border-radius: 5px;
      color: var(--pColor);
      width: 100%;
      background-color: var(--searchBarBg);
    }

    i {
      position: absolute;
      color: var(--searchBarIconColor);
      right: 15px;
      top: 15px;
      cursor: pointer;
    }
  }

  .items-categories-filter {
    box-shadow: var(--shadow);
    background-color: var(--searchBarBg);
    border-radius: 5px;
  }
}

.items-sorting-filter {
  background-color: var(--sortingBg);
  padding: 0.5em 0.8em;
  border-radius: 5px;
  color: var(--sortingColor);
  transition: 0.2s all;
  margin: 0;

  &:hover {
    background-color: var(--postBtnHover);
    color: var(--sortingColor);
  }
}

.items-more-btn {
  background-color: var(--sortingBg);
  padding: 0.5em 0.8em;
  border-radius: 5px;
  color: var(--sortingColor);
  transition: 0.2s all;
  margin: 0;
  border: none;

  i {
    font-size: 12px;
    margin-left: 5px;
  }

  &:hover {
    background-color: var(--postBtnHover);
    color: var(--sortingColor);
  }
}

.post-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;

  aside {
    display: block;
    width: 25%;
    position: relative;

    .items-filters-open-btn{
      display: none;
      width: 100%;
      background-color: var(--filterOpenBtnBg);
      padding: 1em;
      border-radius: 5px;
      border: none;
      box-shadow: var(--shadow);
      color: var(--filterOpenBtnColor);
      transition: 0.3s all;
    }

    .items-filters-to-open{
      position: sticky;
      top: 115px;
    }

    .is-loading::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--isLoadingBg);
      opacity: 0.5;
      z-index: 4;
    }

    .is-loading .spinner-border {
      position: absolute;
      top: calc(50% - 1rem);
      left: calc(50% - 1rem);
      z-index: 5;
      color: var(--loadingSpinnerColor);
    }
  }

  .post-ctn {
    width: 65%;

    .content-title-ctn {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.items-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.post-card {
  width: 48%;
  background: var(--cardBg);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: 25px;
  transition: transform 0.2s ease;

  .post-card-header {
    background-size: cover;
    height: 147px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 56px 56px;
    padding: 30px;

    // .post-card-header-share {
    //   margin-right: auto;
    //   align-self: flex-start;
    //   font-size: 22px;
    //   cursor: pointer;
    //   color: #fff;
    // }

    // .post-card-header-actions {
    //   margin-left: auto;
    //   align-self: flex-start;
    //   font-size: 22px;
    //   cursor: pointer;
    //   color: #fff;
    // }

    // .post-card-header-button {
    //   height: 65px;
    //   width: 65px;
    //   border-radius: 50%;
    //   background: rgba(0, 0, 0, 0.486);
    //   border: none;
    //   outline: none;
    //   cursor: pointer;

    //   &:hover {
    //     animation: bubble 1s infinite alternate;
    //   }

    //   span {
    //     color: #fff;
    //     cursor: pointer;
    //   }
    // }
  }

  .post-card-body {
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .post-card-vignette {
      margin-top: -30px;

      span{
        padding: 8px;
        box-shadow: var(--shadow);
        border-radius: 10px;
        background: var(--item-white-bg);
        font-size: 12px;
        color: var(--pColor);
      }
    }

    .post-card-body-title {
      margin-top: 25px;
      margin-bottom: 20px;
      font-weight: 600;
      color: var(--pColor);
    }

    .post-card-body-description {
      width: 100%;
      color: var(--pColor);
      font-size: 1em;
    }

    .post-card-body-more {
      text-align: center;
      padding: 0.5em;
      margin-top: 30px;
      background: var(--sortingBg);
      color: #fff;
      width: 100%;
      border: none;
      outline: none;
      font-size: 1em;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background: var(--postBtnHover);
      }
    }
  }

  &:hover {
    transition: all .15s ease;
  }
}

.singlepost-area {
  .swiper-container {
    width: 100%;
    overflow: hidden;
  }

  .singlepost-flex{
    margin-top: 100px;
    display: flex;
    justify-content: space-between;  

  .singlepost-content {
    width: 65%;

    li{
      list-style: circle;
      margin-left: 20px;
      color: var(--pColor);
    }

    p {
      font-size: 1em;
    }

    .singlepost-intro {
      font-size: 1.5em;
      font-weight: 600;
      margin-bottom: 40px;
    }

    .singlepost-text{
      margin-bottom: 60px;
    }

    .singlepost-link{
      padding: 0.5em 1em;
      max-width: max-content;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow);
      border: none;
      background-color: var(--postBtnBg);
      color: var(--postBtnColor);
      border-radius: 5px;

      i{
        margin-left: 8px;
      }
    }
  }

  
  .singlepost-media {
    width: 30%;

    a:hover{
      font-weight: 600;
      transition: 0.2s all;
    }

    #accordion{
      position: sticky;
      top: 120px;
    }

    .accordion-unit {
      margin-bottom: 1em;

      .panel {
        border-radius: 10px;
        overflow: hidden;
        background: var(--bodyBg);
        box-shadow: var(--shadow);
      }

      .panel-body {
        padding: 1em;
        color: var(--pColor);

        a{
          color: var(--pColor);
        }
      }

      .panel-title {
        font-size: 1.2em;
        line-height: 1.42857;
        font-weight: 600;

          >button {
            padding: 15px 25px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--pColor);
            transition: 0.2s all;
            border: none;
            background-color: var(--item-white-bg);
            width: 100%;
            user-select: none;

            span {
              display: block;
              position: relative;
              top: 0;
              color: var(--pColor);
              padding-right: 25px;
              transition: 0.2s all;
            }

            i{
              border-radius: 50%;
              padding: 0.3em 0.4em;
            }
            // &:hover span{
            //   color: var(--collapseHeaderHoverColor);
            // }
            &:hover i{
              // color: var(--collapseHeaderHoverColor);
              box-shadow: var(--shadow);
            }
          }

          button[aria-expanded=false]{
            i{
              transform: rotate(270deg);
            }
          }
        }
      }
      .rotateChevron{
        transform: rotate(0deg);
      }
    }
  }
}

@media (max-width:820px) {
  .post-card{
    width: 100%;
  }

  .singlepost-flex{
    flex-direction: column;

    .singlepost-media{
      width: 100% !important;

      #accordion{
        position: relative;
        top: 0;
        margin-bottom: 30px;

        .panel-title>button{
          padding: 10px 25px;
        }
      }
    }
    .singlepost-content{
      margin-bottom: 60px;
      width: 100% !important;
    }
  }
}

@media (max-width:600px) {
  .post-flex{
    flex-direction: column;
    aside{
      width: 100%;
      margin-bottom: 50px;

      .items-filters-open-btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .items-filters-to-open{
        position: relative;
        top: 0;
      }
    }
    .post-ctn{
      width: 100%;
    }
  }

  .welcome-text-flags span{
    font-size: 12px;
  }

}