/* ------------------------------------------------------------- */
/* JQUERY-UI OVERRIDES (jquery-ui_overrides.less)                */
/* ------------------------------------------------------------- */


// ----------------------------------------------------------------------------
//
// jQuery UI CUSTOM
//
// ----------------------------------------------------------------------------
// DESCRIPTION:
// Overrides of jQuery UI LESS or CSS stuff
//
// Contents:
// - UI WIDGETS IN GENERAL
// - TAB WIDGET
//   - DIV-Container with Tabs & Panels
//     - LIST WITH TABS (UL)
//       - SINGLE TAB (LI)
//         - LINKS
//         - STATES (Active, Default, Hover)
//     - UI-TABS-NAV (Class)
//     - UI-TABS-COLLAPSIBLE
//     - DIV (UI-TABS-PANEL)
//       - UI-TABS-PANEL (CLASS)
// UI-AUTOCOMPLETE
// ----------------------------------------------------------------------------




// --------------------------------------
// UI WIDGETS IN GENERAL
// --------------------------------------






// --------------------------------------
// TAB WIDGET
// --------------------------------------
// Container with Tabs & Panels (DIV)

.tabwidget {
  width:       100%;
  overflow:   hidden;
  position:   relative;
  zoom:       1;
  padding:     0 !important;
  border:     0;

  color:       @tabs-default-color;
  //background: @tabs-bg;
  background: transparent;



  // -----------------------
  // LIST WITH TABS (UL)
  // -----------------------
  > ul {
    display:           block;
    list-style:       none;
    outline:           0;
    margin:           0;
    padding:           0.2em 0.2em 0 0;
    margin:           0;

    font-size:         @font-size-base; // hps
    font-weight:       bold;
    line-height:       1.3;
    text-decoration:  none;

    // -----------------------
    // SINGLE TAB (LI)
    // -----------------------
    li {
      position:   relative;
      top:        1px;
      float:      left;
      list-style: none;

      margin:      1px 0.2em 0 0;
      padding:     0;
      white-space: nowrap;

      border-bottom:           0 !important;
      border-top-right-radius: @tabs-border-radius;
      border-top-left-radius:  @tabs-border-radius;
      border:                  1px solid #cccccc;

      background-color:    @tabs-default-bg ;
      color:               @tabs-default-color;
      font-size:           @font-size-smaller ;
      font-weight:         bold;

      &.ui-tabs-selected {
        margin-bottom:    0;
        padding-bottom:   1px;

        a { cursor:       pointer; }
      }

      // -----------------------
      // LINKS
      // -----------------------
      a {
        float:           left;
        padding:         0.2em 0.7em;
        text-decoration: none;
        cursor:          pointer;
      }

      // -----------------------
      // STATES (Active, Default, Hover)
      // -----------------------
      // Outline: 0 ; in anchor to avoid dotted frame after click

      &.ui-state-default{
        margin:       0 0 0 0.6em;
        background:   @tabs-default-bg;
        color:         @tabs-default-color;
        border:       1px @tabs-border-color solid;
        font-weight:   normal;

        a,
        a:link {
          color:       @tabs-default-color;
          font-weight: normal;
        }
      }

      &.ui-state-hover{
        color:             @tabs-default-hover-color;
        background-color: @tabs-default-hover-bg;
        a,
        a:hover {}
      }

      &.ui-state-active {
        color:               @tabs-active-color;
        background-color:   @tabs-active-bg;

        a,
        a:link,
        a:visited {
          color:             @tabs-active-color;
          outline:           0 ;
        }

        &.ui-state-hover {
          color: @tabs-active-hover-color;
          a,
          a:hover {}
        }
      } // /&.ui-state-active

      &.ui-state-disabled a {
        cursor:   text;
        outline:   0 ;
      }
      &.ui-state-processing a { cursor: text; }
      &.ui-state-loading    a { outline: 0 ;  }

    }
    // /li

    // UL
    &.ui-widget-header {
      //background: transparent;
      //border: 0px;
      //color: #fe5f14;
    }



    // -----------------------
    // UI-TABS-NAV (Class)
    // -----------------------
    // UL
    &.ui-tabs-nav {
      position: fixed;
      top: 100px;
      width: 100%;
      z-index: 1029;

      margin: 0 0.4em 0.6em 0;
      padding: 0.4em 0.2em 0 0.7em;

      background-color: @tabs-bg;
      border-bottom: 1px @tabs-border-color solid !important;

      li {
        margin: 1px 0.2em 0 0;

        a { padding: 0.2em 0.7em; }

        &.ui-tabs-active {
          border-bottom: 1px @tabs-active-bg solid !important ;
          margin-bottom: -1px;
          padding-bottom: 0;
        }
      }
    } // /.ui-tabs-nav

  }
  // /ul


  // -----------------------
  // UI-TABS-COLLAPSIBLE
  // -----------------------
  &.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
     cursor: pointer;
  }





  // -----------------------
  // DIV (UI-Tabs-Panel)
  // -----------------------
  // Single Panel, selected via Tabs
  // Some of the Panels do not have a class PENDENT: loesen!!!

  //--------------------------
  // UI-Tabs-Panel (DIV WITHOUT CLASS)
  // --------------------------
  & > div {
    display: none;
    //border-top: 1px solid #999 !important;
    //border-left: 1px solid #999 !important;
    //border-right: 1px solid #999 !important;
    padding-top: 3.5em !important;
    border-bottom: none;
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: hidden ;

    //--------------------------
    // UI-Tabs-Panel (DIV WITH CLASS)
    // --------------------------
    &.ui-tabs-panel{
      width: 100%;
      overflow: hidden;
      //background-color: @tabs-panel-bg;
      //background-color: transparent;
      display: block;

      // further tabwidget within a tabwidget (documents tab etc.)
      & > .tabwidget{
        position: relative ;

        & > .ui-tabs-nav{
          position: relative ;
          top: auto;
          //background: none;
          //background-color: @tabs-bg;
          background-color: transparent;
        }

        & > .ui-tabs-panel {
          background-color: @tabs-bg ;
          background-color: transparent ;
          position: relative ;
          top: auto;
          padding-top: 0 !important ;
        }
        //.ui-tabs-nav{  }
      }

      &.ui-widget-content { border: 0 ;}

    } //  .ui-tabs-panel
  } // /div (.ui-tabs-panel)
} //  /.tabwidget





// --------------------------------------
// UI-DIALOG
// --------------------------------------

//.ui-dialog {
//  border: 1px solid #333333;
//  color: #333333;
//  border-radius: @controlpanel-radius;
//
//  .ui-dialog-titlebar {
//    button.ui-dialog-titlebar-close {
//      background: #bbb !important;
//    }
//  }
//  .ui-widget-header {
//    button.ui-dialog-titlebar-close {
//      right: 0.3em;
//      top: 0;
//      width: 21px;
//      margin: 5px 0 0 0;
//    }
//  }
//}





// --------------------------------------
// AUTOCOMPLETE
// --------------------------------------

//.ui-autocomplete {
//  z-index: 9000 ;
//
//  li{
//    a{
//      display: block ;
//      font-size: 80% ;
//      padding-top: 0.4em !important;
//      padding-bottom: 0.4em !important;
//      &:hover{
//        background-color: #C9C9C9;
//        border: none ;
//        color: #000 ;
//      }
//    }
//  }
//}




// -------------------
// Date_Picker
// Select Date in Popover
// PENDENT: Ausrichtung vertikal in Zelle & wo eingesetzt
//input.datepicker{
  //margin: -0.3em 0 0 0 !important;
  //padding: 0 !important;
//}



// --------------------------------------
// DATEPICKER
// --------------------------------------

// Forward / Backward Arrows
//.ui-widget-header {
//  .ui-icon {
//    background-image: url(ui-lightne../../images/ui-icons_222222_256x240.png);
//  }
//  .ui-state-hover{
//    .ui-icon{
//      background-image: url(ui-lightne../../images/ui-icons_ef8c08_256x240.png);
//      background: #ffffff;
//    }
//  }
////  select.ui-datepicker-month,
////  select.ui-datepicker-year {
////    width: 48%;
////  }
//}




// Calendar symbol
//img.ui-datepicker-trigger{
//  vertical-align: middle;
//  margin-left: 0.2em ;
//}
// Calender (Table)
/*
.ui-datepicker-calendar  {
  .ui-state-highlight{
    color: #ffffff ;
    background-color: @gray-standard;
    border: 1px @gray-standard solid
  }
  // Days
  td a {
    &.ui-state-default {
      color: @base-dark;
    }
    &.ui-state-hover {
      color: #ffffff ;
      background-color: #000000;
      border: #000000 ;
    }
    &.ui-state-active {
      border: 1px solid @base-dark;
      background-color: @base-dark;
      color: @base-verylight;
    }

  }

} // /.ui-datepicker-calendar
*/
//.ui-state-hover,
//.ui-widget-content .ui-state-hover,
//.ui-widget-header .ui-state-hover,
//.ui-state-focus,
//.ui-widget-content .ui-state-focus,
//.ui-widget-header .ui-state-focus {
//  border: 1px solid #000000;
//  background: #ffffff;
//  color: #000000;
//}
//
//.ui-state-default,
//.ui-state-hover,
//.ui-state-focus,
//.ui-state-active {
//  .ui-icon {
//    background-image: url(ui-lightne../../images/ui-icons_777777_256x240.png) !important;
//  }
//}