@font-face {
  font-family: 'Rubik';
  src: url("../../../../fonts/Rubik/Rubik-Regular.woff2") format("woff2"), url("../../../../fonts/Rubik/Rubik-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

.new-builder-trigger {
  background-color: #2D9CEE;
  color: #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); }

.new-builder-dialog .modal-content {
  padding: 0; }

.new-builder {
  display: grid;
  grid-template-columns: 262px calc(100% - 262px);
  font-family: 'Rubik';
  height: 100%;
  /*color view*/
  /*form fields*/
  /*select*/ }
  .new-builder__menu {
    background-color: #F9F9F9; }
  .new-builder__menu-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    background-color: #F9F9F9; }
  .new-builder__menu-item {
    position: -webkit-sticky;
    position: sticky;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 32px;
    padding-right: 36px;
    font-size: 14px;
    border-bottom: 1px solid #EFEFF4;
    cursor: pointer;
    background-color: #F9F9F9;
    color: #666666; }
    .new-builder__menu-item:nth-child(1) {
      top: 0; }
    .new-builder__menu-item:nth-child(2) {
      top: 62px; }
    .new-builder__menu-item:nth-child(3) {
      top: calc(62px * 2); }
    .new-builder__menu-item:nth-child(4) {
      top: calc(62px * 3); }
    .new-builder__menu-item:nth-child(5) {
      top: calc(62px * 4); }
    .new-builder__menu-item:nth-child(6) {
      top: calc(62px * 5); }
    .new-builder__menu-item:nth-child(7) {
      top: calc(62px * 6); }
    .new-builder__menu-item--active {
      background-color: #fff;
      color: #2D9CEE; }
    .new-builder__menu-item svg {
      position: absolute;
      right: 20px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%); }
    .new-builder__menu-item .new-builder__icon-error {
      color: #f15959;
      right: 40px; }
  .new-builder__content {
    padding: 25px 40px;
    display: none;
    background-color: #fff; }
    .new-builder__content.tab-content-active {
      display: block; }
  .new-builder__content-title {
    font-size: 18px;
    color: #000;
    margin-bottom: 16px; }
  .new-builder__content-field {
    margin-bottom: 20px; }
  .new-builder__field-menu-style-label + .new-builder__field-menu-style-label {
    margin-left: 20px; }
  .new-builder__field-menu-style-input {
    display: none; }
  .new-builder__field-menu-style-input:checked ~ .new-builder__field-menu-style-image-wrap {
    border-color: #2D9CEE; }
  .new-builder__field-menu-style-image-wrap {
    /*background-color: #F9F9F9;
        border-width: 1px;
        border-style: solid;
        border-color: #EFEFF4;
        box-sizing: border-box;
        border-radius: 4px;*/
    display: block;
    /*width: 80px;
        height: 80px;*/
    /*margin-bottom: 10px;
        cursor: pointer;*/ }
    .new-builder__field-menu-style-image-wrap > span {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      height: 100%; }
  .new-builder__field-menu-style-text {
    display: block;
    font-size: 12px;
    text-align: center;
    color: #000000; }
  .new-builder .color-viewer {
    margin-left: -3px;
    margin-right: -3px; }
  .new-builder .color-viewer-item-block,
  .new-builder .color-viewer-inner {
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .new-builder .color-viewer-item-wrap,
  .new-builder .color-viewer-item-block {
    font-size: 0; }
  .new-builder .color-viewer-inner,
  .new-builder .color-viewer-item-block {
    padding: 0;
    margin: 0; }
  .new-builder .form-field-name {
    font-size: 16px;
    color: #8A8A8F;
    margin-bottom: 7px; }
    .new-builder .form-field-name--inline-block {
      display: inline-block;
      vertical-align: middle; }
    .new-builder .form-field-name--small {
      font-size: 13px; }
  .new-builder .form-field--inline-block {
    display: inline-block;
    vertical-align: middle; }
  .new-builder .form-field-group {
    display: grid;
    /*grid-template-columns: repeat(2, 1fr );*/
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 10px), 1fr));
    grid-gap: 10px; }
    .new-builder .form-field-group .form-field {
      margin-bottom: 0; }
  .new-builder .select-custom select {
    background-color: #F9F9F9;
    color: #000000;
    padding: 13px 40px 13px 20px;
    font-size: 16px;
    border: 1px solid #EFEFF4;
    border-radius: 4px; }
  .new-builder .select-custom::after {
    content: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.10032 0.577411C1.77489 0.251975 1.24725 0.251975 0.921812 0.577411C0.596375 0.902848 0.596375 1.43049 0.921812 1.75592L5.92181 6.75592C6.24725 7.08136 6.77489 7.08136 7.10032 6.75592L12.1003 1.75592C12.4258 1.43049 12.4258 0.902848 12.1003 0.577411C11.7749 0.251975 11.2472 0.251975 10.9218 0.577411L6.51107 4.98816L2.10032 0.577411Z' fill='%232D9CEE'/%3E%3C/svg%3E");
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  .new-builder .form-field-textarea {
    background-color: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #EFEFF4;
    padding: 13px 20px;
    font-size: 16px; }
  .new-builder .form-field-input {
    background-color: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #EFEFF4;
    padding: 13px 20px;
    font-size: 16px; }
  .new-builder .form-field-radio-label {
    position: relative;
    padding-left: 37px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer; }
    .new-builder .form-field-radio-label input {
      display: none; }
      .new-builder .form-field-radio-label input:checked ~ .form-field-radio-emul::before {
        content: '';
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #2D9CEE; }
    .new-builder .form-field-radio-label--block {
      display: block; }
    .new-builder .form-field-radio-label::before {
      content: '';
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      left: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid #EFEFF4; }