/* Общая таблица стилей */

html {
  font-size: 20px;
}


h1 {
  font-family: 'RalewayBold', sans-serif;
  font-size : 1.5rem;
  line-height : 1.33em;
  color : #697075;
}

h2 {
  font-family: 'RalewayBold', sans-serif;
  font-size : 1rem;
  line-height : 1.2em;
  color : #39B54A;
}

.text {
  font-family: 'RalewayRegular', sans-serif;
  font-size: 0.8rem;
  line-height: 1.625em;
  color: #383838;
}
.text.bold {
  font-family: 'RalewayBold', sans-serif;
}

.lead {
  font-family: 'RalewayRegular', sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
  color: #383838;
}
.lead.bold {
  font-family: 'RalewayBold', sans-serif;
}
.link {
  font-family : 'RalewayRegular', sans-serif;
  font-size : 0.8rem;
  color : #0013BC;
}
  .link:hover {
    color : #000F95;
    border-bottom: 1px solid rgba(0, 113, 188, 0.3);
  }
.tag {
  padding: 0.5em 1em;
  margin: 6px 6px;
  font-family : 'RalewayRegular', sans-serif;
  font-size: 0.7rem;
  line-height: 1.8em;
  color: #FFB54A;
  border-radius : 4px;
  border: 1px solid transparent;
  background-color: rgba(24, 181, 74, 0.2);
  white-space: nowrap;
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border 0.2s ease;
}
  .tag:before {
    content: '#\00A0';
  }
  .list-current-tag .tag,
  .tag[data-current=""],
  .tag:hover {
    border: 1px solid rgba(0, 146, 69, 1);
    color: #FFFFFF;
    background-color: rgba(0, 146, 69, 1);
  }

.annotation {
  font-family : 'RalewayRegular', sans-serif;
  font-size : 0.7rem;
  line-height : 1.28em;
  color : #B9CBD1;
}

blockquote {
  margin-left: 8.33333%;
  max-width: 83.333333%;
  padding-left: 30px;
}
  blockquote p.text {
    position: relative;
    font-family: 'RalewayRegular', sans-serif;
    font-size: 1rem;
    line-height: 1.6em;
    color: #39B54A;
  }
  blockquote p.text,
  blockquote p.text + p.annotation {
    padding-left: 30px;
  }
    blockquote p.text:before {
      position: absolute;
      top: 0.5rem;
      left: 0px;
      content: '“';
      font-family : RalewayBold;
      font-weight : bold;
      font-size : 2.5rem;
      line-height : 1.6rem;
    }
    blockquote p.text + p.annotation {
      margin: 20px 0 35px;
      color: #666666;
    }

a {
  text-decoration: none;
  transition: color 0.2s ease;
}
a.text {
  color: #383838;
}
  a.text:hover {
    color: #121212;
  }
  input[type='submit'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border-radius : 5px;
    text-decoration: none;
    font-family : 'RalewayRegular';
    font-size : 0.8rem;
    line-height : 1.625em;
    width : 100%;
    height : 46px;
    background : rgba(57,181,74,1);
    font-family : 'RalewayBold';
    color : #FFFFFF;
    border : 1px solid #009245;
    cursor: pointer;
    transition: color 0.2s ease,
                background-color 0.2s ease,
                border 0.2s ease;
  }
    input[type='submit']:hover {
      background-color: rgba(57,181,74,0.8);
    }
    form input[type='submit'] {
      margin-top: 20px;
    }

  .input,
  .textarea {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em 0 0;
    border: 1px solid #cecece;
    border-radius: 5px;
  /*   max-width: 350px;
    width: calc(100% - 2em); */
    width: 100%;
    vertical-align: top
  }
  .input {
    height: 46px;
  }
  .textarea textarea.input__field--akira {
    min-height: 4.6rem;
    text-align: left;
  }

.input__field {
  position: relative;
  display: block;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  font-size: 0.8rem;
  color: #383838;
  font-weight: bold;
  resize: none;
  font-family: 'RalewayRegular', sans-serif;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}
textarea.input__field {
  padding-top: 0.8em;
  padding-bottom: 2.6em;
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-size: 70.25%;
  text-align: center;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  font-family: 'RalewayRegular';
  font-size: 0.8rem;
  color: #383838;
  opacity: 0.7;
  line-height: 46px;
  width: 100%;
}

.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}

.icon {
  color: #ddd;
  font-size: 150%;
}

/* Individual styles */
  
/* Akira */
.input--akira {
  margin-top: 1.5rem;
  background-color: #FFFFFF;
}

.input__field--akira {
  z-index: 10;
  display: block;
  padding: 0 1em;
  width: 100%;
  height: 100%;
  background: transparent;
  text-align: center;
}

.input__label--akira {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  width: 100%;
  color: #cc6055;
  cursor: text;
}

.input__label--akira::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale3d(0.97, 0.85, 1);
  transform: scale3d(0.97, 0.85, 1);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.input__label-content--akira {
  transition: font-size 0.2s,
              opacity 0.1s,
              -webkit-transform 0.3s;
  transition: transform 0.3s,
              font-size 0.2s,
              opacity 0.1s;
  transition: transform 0.3s,
              font-size 0.2s,
              opacity 0.1s,
              -webkit-transform 0.3s;
}

.input__field--akira:focus + .input__label--akira::before,
.input--filled .input__label--akira::before {
  -webkit-transform: scale3d(0.99, 0.95, 1);
  transform: scale3d(0.99, 0.95, 1);
}

.input__field--akira:focus + .input__label--akira,
.input--filled .input__label--akira {
  cursor: default;
  pointer-events: none;
}

.input__field--akira:focus + .input__label--akira .input__label-content--akira,
.input--filled .input__label-content--akira {
  opacity: 0.6;
  font-size: 0.65rem;
  -ms-transform: translateY(-1.6rem);
  -webkit-transform: translateY(-1.6rem);
  transform: translateY(-1.6rem);
}
   

    /* Reset autocomplit */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus
    input:-webkit-autofill, 
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      border: 0;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset;
      -webkit-transition: background-color 5000s ease-in-out 0s;
      background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,174,255,0.04) 50%,rgba(255,255,255,0) 51%,rgba(0,174,255,0.03) 100%);
    }
  /* Checkbox */
  label.input-checkbox {
    position: relative;
    cursor: pointer;
    display: block;
    margin-top: 15px;
    margin-bottom: 20px;
  }

    .input-checkbox input[type='checkbox'] {
      visibility: hidden;
      width: 0;
      position: relative;
      height: 1.625em;
      top: 7px;
      margin-right: 15px;
    }

    .input-checkbox input[type='checkbox'] + span:before {
      display: block;
      position: absolute;
      top: 12px;
      left: 0;
      content: '';
      width: 16px;
      height: 16px;
      border-radius: 3px;
      border: 2px solid rgba(0,0,0,0.5);
      background-color: #FFFFFF;
    }

      .input-checkbox span {
        padding-left: 15px;
        opacity: 0.5;
        transition: opacity .1s ease;
        -webkit-transition: opacity .1s ease;
      }

        .input-checkbox span:hover {
          opacity: 1;
          transition: opacity .1s ease;
          -webkit-transition: opacity .1s ease;
        }

        .input-checkbox input[type='checkbox']:checked + span,
        .input-checkbox input[type='checkbox']:checked + span:before{
          opacity: 1;
          transition: opacity .1s ease;
          -webkit-transition: opacity .1s ease;
          }

        .input-checkbox input[type='checkbox']:checked + span:before{
          background-color: #FFFFFF;
          transition: border-color .1s ease;
          -webkit-transition: border-color .1s ease;
        }
          .input-checkbox input[type='checkbox']:checked + span:after {
            position: absolute;
            content: '';
            top: 10px;
            left: 4px;
            width: 16px;
            height: 16px;
            background-image: url('../img/marker-check.svg');
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
           }

  /* Дроплист */
  .droplist {
    position: relative;
    height: 40px;
  }
    .droplist-current.text {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 40px;
      padding: 0 23px 0 18px;
      font-size: 0.7rem;
      line-height: 40px;
      z-index: 1;
      cursor: pointer;
    }
    .droplist-current:after {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 7px;
      display: block;
      content: '';
      height: 100%;
      width: 9px;
      background-image: url('../img/icon-droplist-pointter.svg');
      background-position: right center;
      background-size: contain;
      background-repeat: no-repeat;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    }
      .m-open-droplist.droplist-current:after {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
      }
    .droplist-block {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      opacity: 0;
      pointer-events: none;
      width: 100%;
      max-height: 300px;
      background-color: #FFFFFF;
      border-radius: 4px;
      box-shadow: 0px 0px 5px rgba(130, 130, 130, 0.2);
      z-index: 100;
      overflow-y: auto;
      transition: opacity 0.2s ease;
      -webkit-transition: opacity 0.2s ease;
    }
      .droplist-item {
        padding: 7px 18px;
        border-bottom: 1px dotted #CECECE;
        cursor: pointer;
      }
        .droplist-item:hover,
        .droplist-item_select {
          background-color: #f7f7f7;
        }
      .droplist-item:first-child {
        border-radius: 4px 4px 0 0;
      }
      .droplist-item:last-child {
        border-bottom: none;
        border-radius: 0 0 4px 4px;
      }
      .m-open-droplist.droplist-block {
        opacity: 1;
        pointer-events: auto;
      }

.top-panel {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 10px;
  display: none;
  height: 50px;
  width: 100vw;
  background-color: #FFFFFF;
  box-shadow: 0 1px 15px -2px rgba(0,0,0,0.5);
}
    .top-panel .button-menu {
      position: absolute;
      top: 0;
      right: 10px;
      width: 50px;
      height: 100%;
      padding: 14px 0;
    }
      .top-panel .button-menu p {
        margin: 0 auto;
        margin-bottom: 6px;
        width: 30px;
        height: 3px;
        border-radius: 1px;
        background-color: #808080;
      }
        .top-panel .button-menu p:last-child {
          margin-bottom: 0;
        }
        .button-menu p {
          -ms-transform-origin: 0;
          -webkit-transform-origin: 0;
          transform-origin: 0;
          transition: opacity 0.2s ease,
                      -webkit-transform 0.3s ease;
          transition: opacity 0.2s ease,
                      transform 0.3s ease;
          transition: opacity 0.2s ease,
                      transform 0.3s ease,
                      -webkit-transform 0.3s ease;
        }
          .open-menu.button-menu p:first-child {
            -ms-transform: rotate(45deg) scale(0.87);
            -webkit-transform: rotate(45deg) scale(0.87);
            transform: rotate(45deg) scale(0.87);
          }
          .open-menu.button-menu p:nth-child(2) {
            opacity: 0;
          }
          .open-menu.button-menu p:last-child {
            -ms-transform: rotate(-45deg) scale(0.87);
            -webkit-transform: rotate(-45deg) scale(0.87);
            transform: rotate(-45deg) scale(0.87);
          }


header,
main,
footer {
  min-width: 1024px;
}

/* HEADER */
  header {
    
  }

  main {
    padding-top: 70px;
  }  
  
.b-content__work
    {
    margin: 10px auto;
    width: 1024px;
    }
    
.form-group-data
    {
    display: block;
    margin-top: 20px;
    }
    
    .zone-item .is-hidden label,
    .slot-item .is-hidden label
        {
        vertical-align: 0;
        }
        
    .form-group-data input[type="checkbox"]
        {
        vertical-align: -2px;
        }
    
    .form-group.zones_id label,
    .zone-item .zone-content .form-group label
        {
        float: none;
        font-weight: normal;
        line-height: normal;
        width: auto;
        }

    .form-group .values-edit,
    .form-group .no-values
        {
        display: block;
        }

    .zone-item .show-zone .open,
    .code-item .show-code .open
        {
        display: block;
        line-height: 9px;
        }
        
    .zone-item .zone-content,
    .code-item .code-content
        {
        display: block;
        }
        
    .form-group.zone .targets input.form-control.targets
        {
        margin-top: 0;
        }
        
    .code-item .code-title,
    .code-item .code-provider
        {
        float: left;
        }
        
    .slot-item .syncHeight-inner
        {
        display: block;
        }
        
/* FOOTER */
  footer {
    
  }
    
 