/* ------------------------------------------------------------- */
/* SPECIALS (specials.less)                                      */
/* ------------------------------------------------------------- */


// ----------------------------------------------------------------------------
//
// SPECIALS
//
// ----------------------------------------------------------------------------
// DESCRIPTION:
// Styles for special purposes
//
//
// CONTENTS:
// - ACCOUNT LIST
// - ROW POSITON DETAILS (E.G. SALES ORDER)
// - TABLE #DISPLAY ROW
// - HORIZONTAL SCROLLBAR DISPLAY
// ----------------------------------------------------------------------------



// --------------------------------------
// ACCOUNT LIST
// --------------------------------------
// PENDENT: ansehen
#tbl-accounts{
  border-width: 0;
  thead{
    th{
      //background-color: #E3E3E3 ;
    }

  }
  tbody{

    tr.heading{

      &.heading th {
        border-top: 1px #999 solid;
          &.numeric{
            padding-right: 20px;
            padding-left: 10px;
          }
      }

      &.th1{
        font-size: @font-size-large  ;
        th{ padding: 1.0em 0 0.4em 0 ; }
      }
      &.th2{
        font-size: @font-size-medium ;
        th{ padding: 1.0em 0 0.4em 0 ; }
      }
      &.th3{
        font-size: @font-size-small   ;
        th{ padding: 1.0em 0 0.4em 0 ; }
      }
   } // /tr.heading

    td:first-child {
      text-align: right !important;
    }

    tr.ajax-account-details td{
      padding: 0.8em 0 1.0em 4.0em ;
    }


  }
}



// --------------------------------------
// ROW POSITON DETAILS (E.G. SALES ORDER)
// --------------------------------------

td.row-position-detail{
  padding: 0 0 0.2em 0.4em !important;

  div.table{
    display:             table;
    div.field{
      display:           table-row;
      padding:           0.1em 0 ;
      height:           2.0em !important; ;

      span.label{
        width:           10.0em;
        height:         2.0em !important;
        vertical-align: middle;
        display:         table-cell ;
        padding:         0.3em 0 0 0;
      }

      span.value{
        height:         2.0em ;
        span.data{
          padding:       0.3em 0 0.2em 0.5em !important;
          display:       block;
        }
      }

    } //div.field
  } // /div.table

} // /td.row-position-detail



// --------------------------------------
// TABLE #DISPLAY ROW
// --------------------------------------

table#display_row{
  tbody{
    tr{
      td{
        a.row-position{
          float: left;
          padding: 0.6em 0.2em 0 0 ;
        }
        input.row-position{
          float: left;
        }
      }
    }
  }

}



// --------------------------------------
// HORIZONTAL SCROLLBAR DISPLAY
// --------------------------------------

// csv import preview/results table
#results {
  // show below others and limit width so that scrollbar is displayed
  clear: left;
  width: 95vw;
}
// for the menu left we need to make the width smaller
.layout-split-right #results {
  width: 80vw;
}

// orders positions table
#row_table_scroll_id {
  max-width: 96vw !important;
}


// icons that change between stylesheets
img {
  &.icon-sort-up {
    content:url("../../image/up-small.png");
  }
  &.icon-sort-down {
    content:url("../../image/down.png");
  }
  &.icon-dragdrop {
    content:url("../../image/updown2.png");
  }
  &.icon-delete {
    content:url("../../image/cross2.png");
  }
  &.icon-map {
    content:url("../../image/map-earth.png");
  }
}


/* styling for input to textarea switch */
span.area-input {
  span.switch-to-textarea {
    &:after {
      content: url("../../image/pencil.png");
      vertical-align: top;
    }
  }
}

/* styling for upload drag-drop zone */
span.upload_drop_zone {
  padding:            10px;
  color:              @button-neutral-color;
  background-color:   @button-neutral-bg;
  border:             @button-neutral-border;
  border-radius:      @button-border-radius;
}

/* styling for thumbnails und preview for files */
.overlay_div {
  position: relative;
}

.overlay_img {
  position: absolute;
  top: -100px;
  left: -100px;
  z-index: 2;
  cursor: pointer;
}

.thumbnail {
  cursor: pointer;
}