.load__frame {
  transition: height 0.5s $easeOutQuad !important;
  &.loading {
    overflow: hidden;
  }
  &.loaded {
    .button--load {
      opacity: 0;
    }
  }
}

.control_panel {
  width: 100%;
  padding: em(100px) 0 0;
  will-change: transform, height;
  text-align: left;
  .section__title {
    padding-left: 75%;
  }
}

.control_panel, .downloads__frame {
  .section__title {
    position: relative;
    z-index: -1;
  }
}

.information__form {
  margin-top: em(50px);
}

.control__list {
  li {
    display: block;
  }
}

.control_panel__content {
  font-size: 0;
}

.control__item {
  display: block;
  background: $white_gray;
  color: $black_gray;
  text-decoration: none;
  width: 100%;
  margin-bottom: em(15px);
  position: relative;
  line-height: 1.3;
  border-bottom: 3px solid $white_gray;
  &.loading {
    &:before {
      top: 50%;
      width: em(30px);
      height: em(30px);
      margin-top: em(-15px);
    }
  }
}

.control__item__open {
  opacity: 1;
  z-index: 2;
  transition: opacity 0.2s $easeOutQuad;
  .active & {
    opacity: 0;
    z-index: 1;
  }
}

.control__item__close {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s $easeOutQuad;
  .active & {
    opacity: 1;
    z-index: 2;
  }
}

.control__item__success {
  max-width: em(350px);
  .tag {
    display: block;
  }
  .button {
    margin-top: em(20px);
  }
}

.control__item__title {
  display: block;
  width: 100%;
  padding: em(23px) em(30px) em(20px);
  position: relative;
  .control__item--button & {
    padding-right: em(240px);
    .button {
      position: absolute;
      top: em(16px);
      right: em(30px);
      width: em(210px);
    }
    @media screen and (max-width: $small_breakpoint) {
      padding-right: em(30px);
      padding-bottom: em(75px);
      .button {
        top: auto;
        right: auto;
        left: em(30px);
        bottom: em(22px);
      }
    }
  }
  .control__item--status & {
    padding-left: em(80px);
  }
  .control__item--arrow & {
    padding-right: em(80px);
    &:hover {
      .control__item__arrow {
        transform: translateX(em(5px));
      }
    }
  }
}

.control__item__content {
  height: 0;
  overflow: hidden;
  transition: height 0.5s $easeOutQuad;
  will-change: height;
  .active & {
    height: auto;
  }
}

.control__item__content__main {
  border: 3px solid $white_gray;
  border-bottom: 0;
  padding: em(30px);
  background: $white;
}

.control__item__fields {
  margin: em(10px) 0 em(50px);
}

.control__item__status {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: em(22px);
  width: em(34px);
  height: em(34px);
  margin-top: em(-16px);
  border: 2px solid $gray;
  svg {
    display: none;
    width: 60%;
    height: 60%;
    margin: 20%;
    fill: $white;
  }
  .control__item--status--active & {
    background: $green;
    border-color: $green;
    svg {
      display: block;
    }
  }
}

.control__item__arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: em(20px);
  margin-top: em(-13px);
  transform: none;
  transition: transform 0.3s $easeOutQuart;
  svg {
    display: block;
    width: em(26px);
    height: em(26px);
    fill: $green;
  }
}

.control_panel__content__item {
  display: inline-block;
  vertical-align: top;
  width: 48%;
  font-size: em(18px);
  position: relative;
  &:first-child {
    margin-right: 4%;
  }
  @media screen and (max-width: $large_breakpoint) {
    display: block;
    width: 100%;
    margin: 0 0 em(50px) 0;
  }
}

.downloads__frame {
  width: 100%;
  padding: em(150px) 0;
  position: relative;
  will-change: transform;
  .section__title {
    padding-left: 25%;
  }
  .downloads {
    li {
      width: 33.3333%;
      @media screen and (max-width: $large_breakpoint) {
        width: 50%;
      }
      @media screen and (max-width: $medium_breakpoint) {
        width: 100%;
      }
    }
  }
  @media screen and (max-width: $large_breakpoint) {
    padding-top: 0;
  }
}

.downloads__section {
  margin-top: em(80px);
  .downloads--flat & {
    margin-top: 0;
  }
}

.downloads__section__title {
  width: 100%;
  overflow: hidden;
  h3 {
    display: inline-block;
    position: relative;
    &:after {
      content: '';
      display: block;
      position: absolute;
      background: $medium_light_gray;
      width: 100vw;
      height: em(3px);
      top: em(15px);
      left: 100%;
      margin-left: em(20px);
    }
  }
}

.downloads__section__title--flat {
  h3 {
    &:after {
      display: none;
    }
  }
}

.downloads__list {
  display: block;
  margin: 0 em(-10px);
  font-size: 0;
}

.downloads__item__tags {
  display: none;
}
