@import "variables";

.adding_parths
{
  height        : 40px;
  padding-left  : 40px;
  @include font(14, 40);
  color         : #fff;
  margin-bottom : 10px;
  background    : #1990cb;
  position      : relative;

  & span
  {
    display : block;

    &.sver
    {
      padding-right  : 35px;
      margin-right   : 13px;
      float          : right;
      margin-left    : 20px;
      text-transform : uppercase;
      background     : url($image_dir + "str-right.png") no-repeat center right;
      cursor         : pointer;

      &.a
      {
        padding-right : 25px;
        margin-right  : 23px;
        background    : url($image_dir + "str-bottom.png") no-repeat center right;
      }
    }

    &.number
    {
      width         : 20px;
      height        : 20px;
      background    : #fff;
      border-radius : 50px;
      color         : #1990cb;
      text-align    : center;
      @include font(12, 20);
      position      : absolute;
      left          : 10px;
      top           : 10px;
    }
  }
}

.pod_add
{
  display    : none;
  background : #f7f7f7;
  padding    : 10px 10px 15px;
  margin-top : -10px;
  overflow   : hidden;

  & h3
  {
    color : #0f7cbd;
    @include font(14, 18, bold);

    & span
    {
      color       : #e27767;
      font-weight : normal;
    }
  }

  & .reset
  {
    color      : #e27767;
    @include font(11, 28);
    float      : left;
    display    : block;
    margin-top : 15px;
  }

  & .button
  {
    display         : block;
    border          : 1px solid #1283bf;
    background      : #41b682;
    height          : 26px;
    padding         : 0 20px 0 10px;
    @include font(11, 26);
    color           : #fff;
    float           : right;
    text-decoration : none;
    position        : relative;
    margin          : 15px 0 0;

    & #triangle-right
    {
      display    : block;
      position   : absolute;
      top        : -1px;
      right      : -1px;
      width      : 9px;
      height     : 28px;
      background : url($image_dir + "triangle-right.png") no-repeat 0 0;
    }
  }

  & .add_foto
  {
    margin     : 5px auto 40px;
    width      : 220px;
    height     : 50px;
    background : #e27767;
    text-align : center;
    @include font(16, 50);
    color      : #fff;
    cursor     : pointer;

    & input[type="file"]
    {
      display : none;
    }
  }

  & #dropZone
  {
    @include font(14, 86);
    color          : #adadad;
    padding-left   : 300px;
    margin-bottom  : 8px;
    text-transform : uppercase;
    background     : #fff url($image_dir + "drag_and_drop.png") no-repeat 213px 6px;
    border         : 1px dashed #d7d7d7;

    &.hover
    {
      background-color : #ddd !important;
      border-color     : #aaa !important;
    }

    &.error
    {
      background-color : #E59286;
      border-color     : #f00;
      color            : #FFF;
    }

    &.drop
    {
      background-color : #1990CB;
      border-color     : #AAA;
      color            : #FFF;
    }
  }

  & .category_fields
  {
    & input[type="text"],
    & input[type="number"],
    & select,
    & textarea
    {
      border  : 1px solid #d7d7d7;
      width   : 160px;
      height  : 22px;
      padding : 0 10px;
    }

    & input[type="number"]
    {
      padding-right : 0;
    }

    & textarea
    {
      width   : 590px;
      height  : 65px;
      padding : 10px;
    }

    & .table_cat_field
    {
      width : 100%;

      & td
      {
        padding : 5px 0;

        &:first-child
        {
          width     : 140px;
          color     : #7d7d7d;
          font-size : 12px;

          & span
          {
            color : #e9a198;
          }
        }
      }
    }
  }

}

.add_ok_block
{
  padding    : 20px 35px;
  background : #f7f7f7;

  & h2
  {
    @include font(18, 20, bold);
    color         : #e27767;
    margin-bottom : 20px;
  }

  & a
  {
    display         : inline-block;
    vertical-align  : top;
    padding-left    : 40px;
    @include font(14, 34, bold);
    color           : #525252;
    text-decoration : none;
    background      : url($image_dir + "a_add_ok.png") no-repeat 0 0;
  }

  & table
  {
    width : 100%;

    & td
    {
      vertical-align : top;

      &:first-child
      {
        width : 40px;
      }

      & h3
      {
        @include font(14, 18, bold);
        color : #525252;
        margin: 0 0 15px;
      }

      & div
      {
        @include font(12, 14);
        color : #525252;
        margin-bottom: 40px;
      }
    }
  }
}