.body_template_importer {
  overflow: hidden;
}
.customize__template {
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  min-height: calc(100vh - (calc(clamp(6.5rem, 4.571rem + 3.81vw, 1rem)) + calc(clamp(2rem, 0.571rem + 3.81vw, 4rem)) + 68px ));

  position: absolute;
  right: 0;
  top: calc(clamp(3.75rem, 2.221rem + 4.077vw, 4.6rem));
  //margin-top: calc(clamp(3.75rem, 2.221rem + 4.077vw, 4.6rem));
  &-wrapper {
    height: calc(100vh - (calc(clamp(6.5rem, 4.571rem + 3.81vw, 1rem)) + calc(clamp(2rem, 0.571rem + 3.81vw, 4rem)) + 68px ));
  }
  &-cover {
    color: #ccc;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  &-layout {
    display: flex;
    flex-grow: 1;
    height: 100%;
    flex-direction: column;
    @media screen and (min-width: 960px) {
      flex-direction: row;
    }
  }

  &-sidebar {
    flex-shrink: 0;
    width: 100vw;
    z-index: 1;
    background-color: var(--wd-base-white-color);
    border-right: 1px solid var(--wd-border-color);
    position: relative;
    //animation: 12s slide-right-animation 8s ease-in-out;
    transition: all .2s;
    visibility: visible;
    opacity: 1;
    @media (min-width: 960px) {
      width: 360px;
    }
    &.slide_right_to_left {
      width: 0;
      transition: all .2s;
      visibility: hidden;
      opacity: 0;
    }
    & .sidebar_content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      position: relative;
      @media screen and (max-width: 960px) {
        display: block;
      }
      &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--wd-border-color);
        padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
        & span {
          color: var(--wd-base-black-color);
          & span.template__name {
            font-weight: 600;
          }
        }
        & .sm__edit-template {
          display: flex;
          border-radius: calc(clamp(0.125rem, 0.08rem + 0.119vw, 0.188rem));
          padding: calc(clamp(0.313rem, 0.223rem + 0.238vw, 0.438rem));
          background-color: var(--wd-primary-light-color);
          border: none;
          color: var(--wd-base-black-color);
          cursor: pointer;

          & span {
            display: flex;
          }
        }
      }
      &-settings {
        //flex: 0 0 calc(100% - calc(clamp(6.875rem, 5.179rem + 4.524vw, 9.25rem)));
        @media screen and (max-width: 960px) {
          margin-bottom: 0;
        }
        overflow-y: auto;
        height: calc(100% - 67px);
        &::-webkit-scrollbar {
          width: calc(clamp(0.375rem, 0.286rem + 0.238vw, 0.5rem));
        }

        &::-webkit-scrollbar-thumb {
          background-color: var(--wd-primary-color);
          border-radius: 6px;
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: var(--wd-primary-color)
        }

        &::-webkit-scrollbar-track {
          background: var(--wd-light-gray-1-color);
          border-radius: 6px;
        }

        &::-webkit-scrollbar-track:hover {
          background: var(--wd-primar-light-color);
        }
        & .settings__card {
          border-bottom: 1px solid var(--wd-border-color);

          &:last-child {
            border: none;
          }
          &-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            & h2 {
              margin: 0;
              font-size: calc(clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem));
              padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
              flex: 1;
              user-select: none;
            }
            & .sm-setting-reset {
              padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
              width: calc(clamp(1.25rem, 0.357rem + 2.381vw, 2.5rem));
              display: flex;
              align-items: center;
              justify-content: center;
              & span {
                display: flex;
                cursor: pointer;
                & svg {
                  width: 1.1rem;
                  height: 1.1rem;
                  & path {
                    fill: var(--wd-base-black-color);
                  }
                }
              }
            }
          }
          &-options {
            padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
            &-box {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 2rem;
              &:not(:last-child) {
                margin-bottom: calc(clamp(0.725rem, 0.439rem + 0.762vw, 1.125rem));
              }
            }
            &--label {
              width: 50%;
              & h3 {
                margin: 0 0 5px 0;
                padding: 0;
                font-size: calc(clamp(0.813rem, 0.679rem + 0.357vw, 1rem));
                user-select: none;
              }
              & h4 {
                margin: 0 0 0.5rem 0;
                padding: 0;
                font-size: calc(clamp(0.8rem, 0.657rem + 0.381vw, 1rem));
                user-select: none;
                color: var(--wd-base-black-color);
              }
              & .sm__helper-text {
                font-size: calc(clamp(0.655rem, 0.623rem + 0.086vw, 0.6rem));
                color: var(--wd-helper-text-color);
                user-select: none;
                line-height: 1.2;
                margin: 0;
                padding: 0;
              }
            }
            & .color__scheme {
              &-preset-box {
                //padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
                display: flex;
                align-items: center;
                justify-content: center;
                //height: calc(clamp(3.75rem, 2.857rem + 2.381vw, 5rem));
                //box-shadow: 0 0 10px 4px rgba(0,0,0,0.05);
                margin-top: 1rem;
                & label {
                  justify-content: space-between !important;
                }
                & .default-label {
                  font-weight: 600;
                  color: var(--wd-base-black-color);
                }
              }
              & .color_circles {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                & .color-circle {
                  display: block;
                  width: calc(clamp(0.938rem, 0.714rem + 0.595vw, 1.25rem));
                  height: calc(clamp(0.938rem, 0.714rem + 0.595vw, 1.25rem));
                  border-radius: 50%;
                  border: 1px solid rgba(0,0,0,0.10);
                }
              }
            }
            &--field {
              width: 50%;
              display: flex;
              justify-content: flex-end;
              & input {
                width: 10rem;
              }
            }
          }
          & .fonts__warpper {
            & .fonts-preset-box {
              padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
              display: flex;
              align-items: center;
              justify-content: center;
              height: calc(clamp(3.75rem, 2.857rem + 2.381vw, 5rem));
              box-shadow: 0 0 10px 4px rgba(0,0,0,0.05);
              margin-top: 1rem;
              & span {
                font-size: calc(clamp(2.5rem, 2.5rem + 0vw, 2.5rem));
                color: var(--wd-base-black-color);
              }
            }
          }
          &-btn {
            margin-top: 2rem !important;
          }
        }
      }
      &-actions {
        background-color: var(--wd-base-white-color);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: calc(clamp(0.625rem, 0.179rem + 1.19vw, 1.25rem));
        border-top: 1px solid var(--wd-border-color);
        box-sizing: border-box;
        @media screen and (max-width: 960px) {
          position: relative;
        }
        & .customize__actions, & .import__actions {
          display: flex;
          gap: 1rem;
          justify-content: space-between;
        }
      }
    }
  }

  &-content {
    flex-grow: 1;
    position: relative;
    //z-index: 2;
    background-color: var(--wd-base-white-color);
    position: relative;
    &--canvas {
      align-items: flex-start;
      bottom: 0;
      display: flex;
      justify-content: center;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      overflow-y: auto;
      & iframe {
        height: 100%;
      }
      .loading__template {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--wd-base-white-color);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    & .fullscreen_actions {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      //padding: calc(clamp(0.375rem, 0.107rem + 0.714vw, 0.75rem)) calc(clamp(0.5rem, -0.214rem + 1.905vw, 1.5rem));
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
      box-sizing: border-box;
      z-index: 99;
      @media screen and (max-width: 767px) {
        display: none;
      }
      & button {
        //padding: calc(clamp(0.375rem, 0.196rem + 0.476vw, 0.625rem)) calc(clamp(0.875rem, 0.563rem + 0.833vw, 1.313rem));
        border: none;
        //border-radius: calc(clamp(0.125rem, 0.08rem + 0.119vw, 0.188rem));
        border-radius: 0 calc(clamp(0.125rem, 0.08rem + 0.119vw, 0.188rem)) calc(clamp(0.125rem, 0.08rem + 0.119vw, 0.188rem)) 0;
        cursor: pointer;
        display: flex;
        background-color: var(--wd-base-white-color);
        margin: 0;
        padding: 0 0.2rem 0 0;
        border: 1px solid rgba(0,0,0,0.10);
        border-left: none;
        & svg {
          width: calc(clamp(1rem, 0.999rem + 1.39vw, 2.25rem));
          & path {
            fill: var(--wd-base-black-color);
          }
        }
      }
    }
  }
}

.setting_dropdown {
  &-cover {
    background: var(--wd-base-white-color);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    color: var(--wd-base-black-color);
    font-weight: 600;
  }
}

@keyframes slide-right-animation {
  0% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
  6.66%, 26.64% {
    transform: translateX(var(--visible));
    opacity: 1;
  }
  33.30%, 100% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
}