/* Sidebar */

.templates-list .templates-sidebar {
  margin-top: 45px;
}

@media only screen and (max-width: 992px) {
  .templates-list .templates-sidebar {
    margin-top: 0px;
  }
}

.templates-list form {
  display: flex;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #262365;
  font-family: "Avenir", sans-serif !important;
  font-weight: normal;
  font-size: 20px;
  padding: 20px;
  position: relative;
  color: #2a1c4a;
  cursor: pointer;
  align-items: center;
  gap: 20px;
}

@media only screen and (max-width: 992px) {
  .templates-list form {
    padding: 12px 20px;
  }
}

.templates-list form::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 2px;
  left: 2px;
  border-radius: 10px;
  filter: blur(2px);
  border: 1px solid #26236550;
  pointer-events: none !important;
}

.templates-list button.search-button {
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  color: #2a1c4a;
}

.templates-list form input[type="text"] {
  border: none;
  width: 100%;
}

.templates-list .templates-sidebar .categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 40px;
}

@media only screen and (max-width: 992px) {
  .templates-list .templates-sidebar .categories {
    margin-top: 0px;
    margin-bottom: 30px;
  }
}

.templates-list .templates-sidebar .categories a {
  display: flex;
  width: 100%;
  gap: 20px;
  border-radius: 12px;
  border: 1px solid #262365;
  font-family: "Avenir", sans-serif !important;
  font-weight: normal;
  font-size: 20px;
  padding: 20px;
  position: relative;
  color: #2a1c4a;
  cursor: pointer;
  align-items: center;
  min-height: 70px;
}

.templates-list .templates-sidebar .categories a.active {
  background: #432dd0;
  color: #ffffff;
  box-shadow: 2px 2px 4px rgba(42, 28, 74, 0.5);
}

.templates-list .templates-sidebar .categories a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 2px;
  left: 2px;
  border-radius: 10px;
  filter: blur(2px);
  border: 1px solid #26236550;
  pointer-events: none !important;
}

.templates-list .templates-sidebar .categories a.active::before {
  display: none;
}

.templates-list .templates-sidebar .categories a .category-icon {
  height: 35px;
  width: 35px;
  object-fit: contain;
  object-position: center;
}

.templates-list .templates-sidebar .categories a .category-icon:not(.dn-hide) {
  display: none;
}

.templates-list
  .templates-sidebar
  .categories
  a:not(.active)
  .category-icon.hide-when-active {
  display: block;
}

.templates-list
  .templates-sidebar
  .categories
  a.active
  .category-icon.show-when-active {
  display: block;
}

.s-most-popular-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 50px;
}

.s-most-popular-wrapper p {
  font-size: 22px;
  font-weight: 500;
  font-family: "Geist", sans-serif !important;
}

.s-most-popular-inner {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.s-most-popular-wrapper a {
  display: flex;
  border-radius: 12px;
  border: 1px solid #262365;
  font-family: "Avenir", sans-serif !important;
  font-weight: normal;
  font-size: 16px;
  padding: 10px 15px;
  position: relative;
  color: #2a1c4a;
  cursor: pointer;
  align-items: center;
}

.s-most-popular-wrapper a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 2px;
  left: 2px;
  border-radius: 10px;
  filter: blur(2px);
  border: 1px solid #26236550;
  pointer-events: none !important;
}

.templates-list .templates-sidebar .sub-categories > .sub-category {
  padding: 10px 0;
  border-bottom: 1px solid #262365;
}

.templates-list .templates-sidebar .sub-categories li a {
  font-family: "Avenir", sans-serif !important;
  font-weight: normal;
  font-size: 20px;
  color: #2a1c4a;
  flex: 1;
}

li.all-cat {
  margin-bottom: 20px;
}

@media only screen and (max-width: 992px) {
  li.all-cat {
    margin-bottom: 6px;
  }
}

.templates-list .templates-sidebar .sub-categories .active > a {
  color: #7b3de7;
}

.templates-list
  .templates-sidebar
  .sub-categories
  .has-children
  .ch-sub-categories {
  display: none;
  padding-left: 30px;
}

.templates-list
  .templates-sidebar
  .sub-categories
  .has-children.open
  .ch-sub-categories {
  display: block;
}

.templates-list .templates-sidebar .sub-categories .has-children > a {
  display: inline-block;
  width: calc(100% - 40px);
}

.templates-list .templates-sidebar .sub-categories .has-children li {
  padding: 10px 0;
}

.sub-category.has-children svg {
  transform: rotate(180deg);
  height: 8px;
  width: 13px;
  margin-right: 20px;
  cursor: pointer;
}

.sub-category.has-children.open svg {
  transform: rotate(0deg);
}

.templates-list .templates-sidebar .sub-categories .has-children.open > ul {
  display: block;
}

.templates-list .mobileSearchForm {
  display: none;
}

@media only screen and (max-width: 992px) {
  .templates-list .mobileSearchForm {
    display: flex;
  }
}

.templates-list .mobileSearchForm {
  margin: 0 0 28px;
}

@media only screen and (max-width: 992px) {
  .templates-list .mobileSideEffect {
    max-width: calc(100% + 40px);
    margin: 0 -20px;
    padding: 0 20px 20px;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: baseline;
    position: relative;
  }

  .templates-list .mobileSideEffect .mobileSideRight {
    flex: 100%;
    width: 100%;
    position: absolute;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    left: 20px;
    right: 20px;
    max-width: calc(100% - 40px);
    transform: translate(calc(100% + 20px), 0px);
    transition: transform 0.3s;
  }

  .templates-list .mobileSideEffect .mobileSideLeft {
    flex: 100%;
    max-width: 100%;
    width: 100%;
    position: relative;
    left: 0;
    transform: translate(0px, 0px);
    transition: transform 0.3s;
    height: auto;
  }

  .templates-list .mobileSideEffect .mobileSideLeft .content--wrapper {
    margin: 0;
  }

  div.main-content.templates section.templates-list .main-list {
    display: flex;
    flex-wrap: wrap;
  }

  .templates-list .mobileSideEffect .mobileSideRight .templates-sidebar form {
    display: none;
  }
}

.templates-list .mobileSideEffect.sideActive .mobileSideRight {
  position: relative;
  left: 0px;
  right: 0px;
  max-width: 100%;
  transform: translate(0px, 0px);
}

.templates-list .mobileSideEffect.sideActive .mobileSideLeft {
  position: absolute;
  left: 20px;
  right: 20px;
  max-width: calc(100% - 40px);
  transform: translate(calc(-100% - 25px), 0px);
}

.mobile-filters-menu {
  display: none;
  align-items: center;
  justify-content: end;
}

@media screen and (max-width: 992px) {
  .mobile-filters-menu {
    display: flex;
  }
}

.mobile-filters-menu:before {
  content: "";
  height: 36px;
  width: 1px;
  background: transparent;
  display: block;
  margin-left: 20px;
  position: relative;
  padding-right: 20px;
  border-left: 1px solid;
  opacity: 0.2;
}

.mobile-filters-menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.mobile-filters-menu-button span.line {
  width: 26px;
  height: 2px;
  display: flex;
  background: #3c10a6;
  transition: transform 0.3s;
  position: relative;
}

.mobile-filters-menu-button span.line span.circle {
  display: flex;
  width: 8px;
  height: 8px;
  position: absolute;
  background: #ffffff;
  border: 2px solid #3c10a6;
  border-radius: 200px;
  top: -3px;
  left: 3px;
  transition: transform 0.4s, opacity 0.32s;
}

.mobile-filters-menu-button span.line:last-child span.circle {
  right: 3px;
  left: unset;
}

.mobile-filters-menu-button.active {
  gap: 0px;
}

.mobile-filters-menu-button.active span.line {
  background: #e2011a;
}

.mobile-filters-menu-button.active span.line span.circle {
  border-color: #e2011a;
}

.mobile-filters-menu-button.active span.line:first-child {
  transform: rotate(45deg) translate(0px, 1px);
}

.mobile-filters-menu-button.active span.line:last-child {
  transform: rotate(-45deg) translate(0px, -1px);
}

.mobile-filters-menu-button.active span.line:first-child span.circle {
  transform: translate(24px, 0px);
  opacity: 0;
}

.mobile-filters-menu-button.active span.line:last-child span.circle {
  transform: translate(-24px, 0px);
  opacity: 0;
}

.templates-menu-inner {
  margin-top: 40px;
}