:root {
  --dark1000: #2f2f2f;
  --dark700: #646464;
  --dark400: rgba(215, 215, 215, 0.83);
  --white1000: rgba(24, 24, 24, 0.72);
  --white700: #d0d0d0;
  --white500: #ddd;
  --white400: #f7f7f7;
  --border-radius: 20px;
  --border-radius-half: 10px;
  --accent-main: #9dcc38;
  --accent-main-hvr: #b0bd27;
  --red: #da1b1b;
}

body {
  background: var(--white400);
}

a {
  text-decoration: none;
}

.ss__header {
  background: var(--white1000);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}

.ss__cart-header {
  display: flex;
  align-items: center;
  gap: 12px;

}

.ss__cart-items {
  position: relative;
  font-size: 18px;
}

.ss_cart-counter {
  font-size: 12px;
  background: var(--accent-main);
  color: var(--white1000);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: -22px;

}

.ss__logo {
  font-weight: 900;
  font-size: 24px;
  color: var(--dark1000);
}

.ss__dash-menu a {
  padding: 0 18px;
  color: var(--accent-main);
  transition: .3s color;
  position: relative;
}

.ss__dash-menu a:hover {
  color: var(--accent-main);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.ss__section {
  margin: 20px 0;
  padding: 40px;
  border-radius: var(--border-radius);
}

.white {
  background: var(--white1000);
}

.ss__input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ss__input {
  padding: 10px;
  border: 1px solid var(--white700);
  border-radius: var(--border-radius-half);
  background: rgba(24, 24, 24, 0.72);
  color: #fff;
}

.ss__input::placeholder {
  font-size: 16px;
  line-height: 1.5;
  color: var(--white500);
}

.ss__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss__btn {
  border-radius: var(--border-radius-half);
  cursor: pointer;
  border: none;
  background: var(--white500);
  color: var(--dark1000);
  letter-spacing: .35px;
  padding: 12px 24px;
  font-weight: bolder;
  font-size: 16px;
  min-width: 120px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ss__btn-short {
  max-width: 160px;
  white-space: nowrap;
}

.ss__btn-primary {
  background: var(--accent-main);
  color: var(--white1000);
}

.ss__section-title {
  margin-bottom: 24px;
  color: #fff;
}

.ss__warning {
  padding: 12px;
  border-left: 3px solid var(--red);
  display: none;
}

.ss__message {
  display: none;
  padding: 12px;
  border-left: 3px solid var(--accent-main);
}

.ss__warning-active {
  display: block;
}

.ss__section-slots-demo {
  display: none;
}

.ss__section-slots-demo-active {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.ss__demo-slot {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ss__slot-title {
  font-weight: bolder;
  font-size: 16px;
  height: 55px;
  width: 100%;
  max-width: 240px;
}

.ss__slot {
  position: relative;
}
.ss__slot .btn-removeSlot {
  position: absolute;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: 0;
  min-width: unset;
  right: 0;
  background: var(--red);
  color: var(--white1000);
}
.ss__slot a {
  display: block;
}

.ss__section-title b {
  color: var(--accent-main);
}

.ss__map-input-group {
  display: flex;
  gap: 8px;
}

.ss__map-input-group .ss__input-group {
  max-width: calc(100% / 6 - 8px);
}

.ss__overflow-x {
  overflow-x: scroll;
  width: 100%;
  max-width: 100%;
}

.ss__slots-demo-table {
  border-collapse: collapse;
}

.ss__slots-demo-table td {
  font-size: 14px;
  padding: 8px;
  color: var(--dark700);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--white500);
}

.ss__loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: .3s opacity;
  background: var(--dark400);
}

.ss__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ss__loader-overlay-active {
  opacity: 1;
  visibility: visible;

}


.ss__slots-list-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-top: 24px;
}

.ss__slot {
  width: 100%;
  max-width: calc(100% / 6 - 12px);
  background: rgba(24, 24, 24, 0.72);
  position: relative;
  border-radius: var(--border-radius);
}

.ss__slot-image {
  padding: 12px;
  width: 100%;
  height: 156px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.ss__slot-caption {
  padding: 12px;
}

.ss__pagination {
  margin: 12px 0;
}

.ss__pagination ul {
  list-style: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ss__pagination a {

  padding: 8px;
  border-radius: var(--border-radius-half);
  border: 1px solid var(--dark700);
  width: 32px;
  color: var(--accent-main);
  height: 32px;
  font-size: 14px;

  display: flex;
  justify-content: center;
  align-items: center;

}

.ss__total {
  margin-bottom: 12px;
}

.ss__pagination .ss__pagination-current {
  background: var(--accent-main);
  color: var(--white1000);
  font-weight: 900;
}

.ss__single-slot-wrapper {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.ss__single-slot-image {
  border-radius: var(--border-radius);
  object-fit: cover;

}

.ss__single-slot-image {
  flex-basis: 20%;
  max-width: 256px;


}

.ss__single-slot-caption {
  flex-basis: calc(79% - 24px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss__single-slot-title {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ss__slot-date {
  display: flex;
  gap: 24px;
}

.ss__slot-date i {
  font-size: 14px;
  color: var(--dark700);
  font-style: normal;
}

.ss__cart-slot {
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  background: rgba(24, 24, 24, 0.72);
  padding: 12px;
  border-radius: var(--border-radius-half);
  margin-bottom: 12px;
}

.ss__form-action {
  margin-top: 24px;
}

.ss__cart-description {
  width: 100%;

}

.ss__cart-slot-caption {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 55%;
}

.ss__cart-slot-caption a img {
  width: 100%;
  max-width: 125px;
  height: 125px;
}

.ss__cart-slot-controls {
  width: 100%;
  max-width: 256px;
  display: flex;
  justify-content: flex-end;
}

.ss__cart-slot-caption-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.ss__cart-slot-caption-wrap .ss__slot-frame {
  color: var(--accent-main);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ss__goback {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--red);

}

.ss__goback svg {
  width: 32px;
  height: 32px;
}

.ss__slot-controls {
  width: 100%;
  justify-content: center;
  display: flex;
}

.ss__with-frame {
  padding: 6px;
  white-space: nowrap;
  max-width: 140px;
  background: var(--accent-main-hvr);
  color: var(--white1000);
  font-size: 11px;
  border-radius: var(--border-radius-half);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  top: 0;
  left: 0;
}

.ss__without-frame {
  background: var(--red);
}

.ss_chars_add {
  margin: 24px 0;
}

.chars-wrapper {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.ss__slot-deploy-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ss__slot-deploy-wrapper .ss__input-group {
  width: 100%;
}

.ss__domain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  justify-content: space-between;

}

.ss__domain-name {
  width: 100%;
  max-width: 240px;
}

.ss__domain-active {
  width: 100px;
  display: flex;
  justify-content: center;

}

.ss__domain-handler {
  width: 100%;
  max-width: 460px;
}

.ss__domain-ip {
  width: 100%;
  max-width: 200px;
}

.ss__dd-current {
  padding: 12px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  border: 1px solid var(--white700);
  border-radius: var(--border-radius);

}

.ss__dd-current:after {
  content: '';
  background: url(../img/down.svg) no-repeat;
  background-size: contain;
  width: 22px;
  height: 22px;
  display: block;
}

.ss__dd {
  display: none;
  max-height: 450px;
  z-index: 50;
  overflow-y: scroll;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--white1000);

}

.ss__dd-element {
  background: var(--white1000);
}

.ss__dropdown-section {
  position: relative;
  margin-bottom: 24px;
}

.ss__dd-active {
  display: flex;
  flex-direction: column;

}

.ss__dd .ss__dd-element {
  cursor: pointer;
  padding: 12px;
  background: var(--white1000);
  border-bottom: 1px solid var(--white400);
  transition: .3s background-color;
}

.ss__dd .ss__dd-element:hover {
  background: var(--white700);

}

.ss__true-false {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

}

.ss__true-false h2 {
  width: 100%;
  margin-bottom: 12px;
}

.ss__true-false input {
  display: none;
}

.ss__task {
  display: flex;
  align-items: center;
  padding: 6px;
  gap: 12px;
  border-bottom: 1px solid var(--white400);
  justify-content: space-between;
}

.ss__task-id {
  width: 64px;
  height: 32px;
  font-weight: bolder;
  color: var(--white1000);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--accent-main);
}

.ss__task-task {
  width: 100%;
  max-width: 800px;
}

.ss__task-created {
  width: 100%;
  max-width: 240px;
  display: flex;
  justify-content: flex-end;
  color: var(--gray-500);
}

.ss__founded {
  margin: 24px 0
}

.ss__btn-login {
  margin-top: 24px;
}

.ss__header_logo-mobile {
  display: none;
}

.mobile-trigger {
  display: none;
}

.mobile-close {
  display: none;
}

blockquote {
  padding: 12px;
  border-left: 4px solid var(--accent-main);
  margin-bottom: 12px;
  line-height: 1.5;
  border-bottom: 1px solid var(--accent-main);
}

.ss__menu-label {
  position: absolute;
  top: -5px;
  right: 0px;
  background: var(--accent-main);
  color: #fff;
  font-size: 8px;
  padding: 3px;
  border-radius: var(--border-radius-half);
}

.ss__char-wrap {
  width: 100%;
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
}

.ss__test-result {
  width: 100%;
}

.ss__char-wrap input {
  width: 100%;
  flex-basis: calc(100% / 2 - 80px);
}

.ss__parsed-slot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ss__parsed-slot-image {
  width: 100px;
  border-radius: var(--border-radius);
  height: 100px;

}

.ss__parsed-slot-char {
  padding: 6px 32px;
  background: var(--white400);
  display: flex;
  border-radius: var(--border-radius-half);
  flex-wrap: wrap;
  margin: 12px 0;

}

.ss__parsed-slot-char li {
  width: 100%;
  font-size: 12px;
  height: 34px;
  flex-basis: calc(100% / 2 - 12px);
}

.ss__parsed-slot-image img {
  width: 100%;
  border-radius: var(--border-radius);

  height: 100%;
  object-fit: cover;

}

.ss__parsed-slot-name {
  width: 100%;
  max-width: 410px;
}

.ss__parsed-slot-frame, .ss__parsed-slot-origin {
  width: 100%;
  max-width: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ss__parsed-slot-frame a {
  color: var(--accent-main-hvr);
}

.ss__parsed-slot-origin a {
  color: var(--accent-main-hvr);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.ss__parsed-slot {
  position: relative;
  padding: 20px 0 20px 0;
  border-top: 1px solid var(--white400);
  border-bottom: 1px solid var(--white400);
}

.ss__form-remove-parsed {
  position: absolute;
  top: -12px;
  right: -12px;
}

.ss__btn-close {
  background: #fbc728;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 6px 12px;
  border-radius: 100px;

}

.hide-section {
  background: #1dc9a4;
  color: #fff;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-half);
}

.ss__margin-bottom {
  margin-bottom: 24px;
}
.with-hide {
  background: #f7f7f7;
  padding: 12px;
  border-radius: var(--border-radius-half);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menuRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ss__slots-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ss__slots-title-row .ss__section-title {
  margin-bottom: 0;
}
.ss__search-slots-list {
  flex-direction: column;
}
.ss__search-slots-list .ss__slot {
  flex-direction: row;
  align-items: center;
  width: 100%;
  display: flex;
  max-width: 100%;
  flex-basis: 100%;
  padding: 10px 40px 10px 10px;
}
.ss__search-slots-list .ss__slot-caption {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;

}
.ss__search-slots-list .ss__slot-title {
  height: unset;
  flex-basis: 360px;
  flex-grow: 1;
  max-width: unset;
}
.ss__search-slots-list .ss__slot-image {
  width: 80px;
  height: 80px;
}
.ss__search-slots-list .ss__slot-controls{
  justify-content: flex-end;
}
@media (max-width: 1280px) {
  .ss__slot {
    max-width: calc(100% / 5 - 12px);
  }

  .container {
    max-width: 100%;
    padding: 0 32px;
  }
}

@media (max-width: 1180px) {
  .ss__slot {
    max-width: calc(100% / 4 - 12px);

  }

  .ss__btn {
    white-space: nowrap;
    font-size: 14px;
  }

  .ss__slot-image {
    height: 200px;
  }
}

@media (max-width: 1024px) {
  .ss__slot-image {
    height: 150px;
  }
}

@media (max-width: 980px) {
  .ss__header {
    position: sticky;
    top: 0;
    z-index: 150;
    box-shadow: 1px 3px 12px #cdcdcd
  }

  .mobile-trigger {
    display: flex;
    min-width: 64px !important;
    max-width: 64px;
  }

  .ss__header_logo-mobile {
    display: block;
  }

  .ss__dash-menu {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 240px;
    background: var(--white500);
    z-index: 100;
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    transition: .3s left;
  }

  .ss__dash-menu-active {
    left: 0;
  }

  .ss__dash-menu a {
    font-weight: bolder;
    display: block;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid var(--white400);
    position: relative;
  }

  .mobile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }
}

@media (max-width: 940px) {
  .ss__pagination {
    overflow-x: scroll;
  }

  .ss__pagination ul {
    padding: 0 0 24px 0;
    display: flex;
    flex-wrap: nowrap;

  }

  .ss__pagination ul li {
    display: inline-block;
  }

  .ss__logo-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .ss__slot {
    max-width: calc(100% / 3 - 12px);
  }

  .ss__slot-image {
    height: 200px;
  }

  .ss__section {
    padding: 20px;
  }
}

@media (max-width: 840px) {
  .ss__slot {
    max-width: calc(100% / 2 - 12px);
  }

  .ss__slot-image {
    height: 250px;
  }

  .ss__slot-title {
    font-size: 18px;
  }

  .ss__slot a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .ss__single-slot-title {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .ss__slot-title {
    font-size: 18px;
    height: 75px;
  }

  .ss__cart-slot {
    flex-direction: column;
    width: 100%;
    flex-basis: calc(100% / 2 - 12px);
    flex-grow: 1;
  }

  .ss__cart-slot h2 {
    flex-basis: 100%;
    font-size: 14px;
  }

  .ss__cart-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ss__cart-slot-controls {
    justify-content: center;
    margin-top: 12px;
  }

  .ss__cart-slot-caption {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    text-align: center;

  }
}

@media (max-width: 570px) {
  .ss__slot {
    max-width: 100%;
  }

  .ss__slot-image {
    height: 320px;
  }

  .ss__section {
    padding: 12px;
  }

  .ss__header {
    padding: 12px 32px 12px 12px;
  }
}