//
// COLORS
//
 
@dark-blue : #3D72C9;
@light-blue: lighten(#5583D0,10%);
@blue: #5583D0;

@dark-grey : #888888;
@light-grey: #F4F4F4;

@shadow-color:black; 

//
// THEME SPECIFIC VARIABLES
//

@font-color-dark-background: white;
@font-color-light-background: #333333;

@button-color:@light-grey;

@border-color:#DDDDDD;

@title-background-gradient-1:#505154;
@title-background-gradient-2:#323335;

@border-thickness: 1px;
@dialog-border-thickness:2px;

//
// MIXINS
//

.clickable {
  color: @font-color-light-background;

  // Less "darken method" helps to make use of gradient-buttons easier. 
  // It takes button-color and darkens it. 
  // No second gradient color is needed.
  #gradient > .vertical(@button-color, darken(@button-color, 20%));
  border: @border-thickness solid darken(@border-color, 40%);
}

.clickable-active {
  color:@font-color-dark-background;
  #gradient > .vertical(@light-blue,@dark-blue);
}

 
//
// ROOT
//

.root {
  background-color: @light-grey;
}

h2 {
  color: #2446BB;
  font-weight:normal;
  font-size:16px;
}

//
// GROUP
//

.group {
  margin:10px;
}

.bordered {
  border: @border-thickness solid @border-color;
  background-color:white;
  .border-radius(.4em);
  padding:10px;
}

//
// SCROLL CONTAINER
//

@scShadowOffset:10px;
@scShadowColor:rgba(0,0,0,0.3);
@scShadowColorLight:rgba(0,0,0,0.2);
@scGradientVerticalOffset:15px;

.scrollContainer {
  border: @border-thickness solid @border-color;
  background-color:white;

  .border-radius(.4em);

  .box-inset-multi-shadow(
        0px @scShadowOffset @scShadowOffset -@scShadowOffset @scShadowColorLight, 
        0px -@scShadowOffset @scShadowOffset -@scShadowOffset @scShadowColorLight
  );
}

.scrollContainer:before {
  .border-radius-top(.4em);
  position:absolute;
  top:0px;
  z-index:500;

  .box-inset-multi-shadow(
      0px @scShadowOffset*1.4 @scShadowOffset -@scShadowOffset @scShadowColor, 
      0px 0px @scShadowOffset -@scShadowOffset @scShadowColor
  );

  content:'';
  width:100%;
  height:0px;
}

.scrollContainer.scrollableTop:before {
  height:30px;
}

.scrollContainer:after {
  .border-radius-bottom(.4em);
  position:absolute;
  bottom:0px;
  z-index:500;

  .box-inset-multi-shadow(
      0px 0px @scShadowOffset -@scShadowOffset @scShadowColor, 
      0px -@scShadowOffset*1.4 @scShadowOffset -@scShadowOffset @scShadowColor
  );

  content:'';
  width:100%;
  height:0px;
}

.scrollContainer.scrollableBottom:after {
  height:30px;
}



//
// INPUT FIELDS
//

input[type="text"], input[type="password"], input[type="number"], textarea {
  border: @border-thickness solid @border-color;
  color:@font-color-light-background;
}

.scrollContainer textarea {
  .border-radius(0);
  border:2px solid transparent;
  background:none;
}

//
// NAVIGATIONBAR
//

.navigationbar {
   #gradient > .vertical(@title-background-gradient-1, @title-background-gradient-2);
   color:@font-color-dark-background;
}

.navigationbar-button, .navigationbar-backbutton {
  .clickable();
}

.navigationbar-button.active, .navigationbar-backbutton.active {
  .clickable-active();
}

//
// LIST
//

ul {
  .border-radius(.4em);
  border: @border-thickness solid @border-color;
  background-color:white;
}

ul li {
  color:@font-color-light-background;
  border-top: @border-thickness solid @border-color;
}

li:first-child:not(.formRowGroupFirstItem), li:first-child a {
  .border-radius-top(.4em);
}

li:last-child, li:last-child a {
  .border-radius-bottom(.4em);
}

ul li .subtitle {
  color: @dark-blue;
}

ul li.active * {
  color: @font-color-dark-background;
}

ul li.arrow {
  background: url("../icon/common/arrow.png") no-repeat right center;
}

ul li.active.arrow, ul li.selected.arrow {
  background-image: url("../icon/common/arrow_pressed.png"), -webkit-gradient(linear, center top, center bottom, color-stop(0%,@light-blue), color-stop(100%,@dark-blue));
  background-image: url("../icon/common/arrow_pressed.png"), -webkit-linear-gradient(top, @light-blue, @dark-blue 100%);
  background-image: url("../icon/common/arrow_pressed.png"), -moz-linear-gradient(top, @light-blue, @dark-blue 100%);
  background-image: url("../icon/common/arrow_pressed.png"), linear-gradient(to bottom, @light-blue, @dark-blue 100%);
  background-position: right center;
  background-repeat: no-repeat;
}

ul li.active {
  .clickable-active();
}

//
// FORM RENDERING
//

.formSeparationRow {
  background-color: @border-color;
}

.formRowGroupTitle {
  color: #2446BB;
  font-weight:normal;
  font-size:16px;

  margin-bottom:10px;
  border:none;

  padding-bottom:0px;
}

.formRowContent, .formElementError{
  background-color:white;
  border-left:1px solid @border-color;
  border-right:1px solid @border-color;
}

.formRowGroupFirstItem {
    background-color:white;
  border-left:1px solid @border-color;
  border-right:1px solid @border-color;
  border-top:1px solid @border-color;
  .border-radius-top(.4em);
  padding:2px;
  position:relative;
  top:2px;
}

.formRowGroupLastItem {
  background-color:white;
  border-top:0px transparent;
  border-left:1px solid @border-color;
  border-right:1px solid @border-color;
  border-bottom:1px solid @border-color;
  .border-radius-bottom(.4em);
  padding:2px;
  position:relative;
  top:-2px;
}

.formRowGroupTitle:nth-child(n+2) {
   margin-top:20px;
}

//
// BUTTON
//

.button {
  .clickable();
  color:@font-color-light-background;
}

.button.active{
  .clickable-active();
}

//
// DIALOG
//

.dialog {
   // Fallback if no gradient could be set.
   background-color:@title-background-gradient-2;
   #gradient > .vertical-three(@title-background-gradient-1, @title-background-gradient-2, @title-background-gradient-2, 20px);
   border: @dialog-border-thickness solid @dark-blue;
   color:@font-color-dark-background;

   .box-shadow(0px 2px 7px 0px lighten(@shadow-color, 50%));
}

.popup {
  .dialog();
}

.arrow() {
  position:absolute;
  content:'';
}

@arrow-size: 12px;

// ARROW TOP

.popupAnchorPointerTop:before
{
  .arrow();
  #triangle > .up(@arrow-size+2, @dark-blue);
}

.popupAnchorPointerTop:after
{
  .arrow();
  #triangle > .up(@arrow-size, @title-background-gradient-1);
}

// ARROW BOTTOM

.popupAnchorPointerBottom:before
{
  .arrow();
  #triangle > .down(@arrow-size+2, @dark-blue);
}

.popupAnchorPointerBottom:after
{
  .arrow();
  #triangle > .down(@arrow-size, @title-background-gradient-2);
}

// ARROW LEFT

.popupAnchorPointerLeft:before
{
  .arrow();
  #triangle > .left(@arrow-size+2, @dark-blue);
}

.popupAnchorPointerLeft:after
{
  .arrow();
  #triangle > .left(@arrow-size, @title-background-gradient-2);
}

// ARROW RIGHT

.popupAnchorPointerRight:before
{
  .arrow();
  #triangle > .right(@arrow-size+2, @dark-blue);
}

.popupAnchorPointerRight:after
{
  .arrow();
  #triangle > .right(@arrow-size, @title-background-gradient-2);
}


.dialogTitleUnderline:after {
  display: none;
}

//
// TAB BAR
//

.tabBar {
  border-bottom: 3px solid @dark-blue;
}

.tabButton {
  color:@light-grey;
  
  #gradient > .vertical(lighten(@title-background-gradient-1,20%), lighten(@title-background-gradient-2,20%));

  @tab-button-border:@border-thickness solid lighten(@dark-grey, 10%);  
  border-top: @tab-button-border;
  border-left: @tab-button-border;
  border-right: @tab-button-border;
}

.tabButton.active, .tabButton.selected {
  border: @border-thickness solid @dark-blue;
 
  @highlighted-line:lighten(@dark-blue,20%);
  
  @tab-stop-1: @highlighted-line;
  @tab-stop-2: @blue;
  @tab-stop-3: @dark-blue;
  
  #gradient > .vertical-five(@tab-stop-1, @tab-stop-2, @tab-stop-2, @tab-stop-3, @tab-stop-3, 4%, 49%, 53%);
}

//
// SLIDER
//

.slider > div {
 .box-shadow(0 0 2px @shadow-color);
  
  border: @border-thickness solid #E8E8E8;
  
  #gradient > .vertical(#cfcfcf, #fdfdfd);
}

.slider {
  @color-stop-active-1: @dark-blue;
  @color-stop-active-2: lighten(@dark-blue, 20%);
  @color-stop-active-3: @color-stop-active-1;
  @color-stop-active-4: @color-stop-active-2;

  @color-stop-inactive-1:#929292;
  @color-stop-inactive-2:#bbbbbb;
  @color-stop-inactive-3:#f6f6f6;
  @color-stop-inactive-4:#f9f9f9;

  border-bottom: @border-thickness solid #d6d6d6;
  border-top: @border-thickness solid #929292;
  border-left: @border-thickness solid #b5b5b5;
  border-right: @border-thickness solid #b5b5b5;

  background: -webkit-gradient(linear, left top, left bottom, from(@color-stop-inactive-1), color-stop(0.05, @color-stop-inactive-2), color-stop(0.5, @color-stop-inactive-3), to(@color-stop-inactive-4)) 0px 0px no-repeat, -webkit-gradient(linear,left top,left bottom,from( @color-stop-active-1), color-stop(0.05,  @color-stop-active-2), color-stop(0.8,  @color-stop-active-3), to( @color-stop-active-4)) 0px 0px no-repeat;
  background: -webkit-linear-gradient(top, @color-stop-inactive-1, @color-stop-inactive-2 5%,@color-stop-inactive-3 50%, @color-stop-inactive-4) 0px 0px no-repeat, -webkit-linear-gradient(top,  @color-stop-active-1,  @color-stop-active-2 5%, @color-stop-active-3 90%, @color-stop-active-4) 0px 0px no-repeat;
  background: -moz-linear-gradient(top, @color-stop-inactive-1, @color-stop-inactive-2 5%,@color-stop-inactive-3 50%, @color-stop-inactive-4) 0px 0px no-repeat, -moz-linear-gradient(top, @color-stop-active-1, @color-stop-active-2 5%,@color-stop-active-3 90%, @color-stop-active-4) 0px 0px no-repeat;
  background: linear-gradient(to bottom, @color-stop-inactive-1, @color-stop-inactive-2 5%,@color-stop-inactive-3 50%, @color-stop-inactive-4) 0px 0px no-repeat, linear-gradient(to bottom, @color-stop-active-1, @color-stop-active-2 5%,@color-stop-active-3 90%, @color-stop-active-4) 0px 0px no-repeat;
}

//
// TOGGLEBUTTON
//

.togglebutton {
  background-color: white;
}

.toggleButton > div {
  // Light inset border.
  .box-inset-multi-shadow(0 2px 2px #999, 0 14px 1px #EAEAEA);
  border: @border-thickness solid #9e9e9e ;
}

.toggleButton > div.checked {
  .box-inset-multi-shadow(0px 3px 2px darken(@dark-blue,20%), 0px 14px 0px @dark-blue);
  background-color:lighten(@dark-blue,10%);
}

div.checked .toggleButtonSwitch {
  .box-shadow(-1px 0 2px #4b4b4b);
}

div.checked .toggleButtonSwitch:before {
  color:@font-color-dark-background;
}

.toggleButtonSwitch:after {
  color: #888888;
}

.toggleButtonSwitch {
  border: @border-thickness solid #E8E8E8;

  .box-shadow(1px 0 2px #4b4b4b);

  background: #cfcfcf;
  #gradient > .vertical (#cfcfcf,#fdfdfd);

  // Because of display problems in Safari, Animation is disabled.
  //.transition(left .15s);
}

//
// CHECKBOX
//

.checkbox-label:before {
  #gradient > .vertical (#222,#45484d);

  .border-radius(.1em);
}

input[type="checkbox"] + label {
    position:relative;
    .border-radius(.3em);
    border:@border-thickness solid @dark-grey;

    box-sizing:border-box;
    background-color: #929292;
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1), color-stop(0.6, #c1c1c1), to(#d0d0d0)) 0px 0px no-repeat;
    background: -webkit-linear-gradient(top, #f1f1f1, #c1c1c1 90%, #d0d0d0) 0px 0px no-repeat;
    background: -moz-linear-gradient(top, #f1f1f1, #c1c1c1 90%, #d0d0d0) 0px 0px no-repeat;
    background: linear-gradient(to bottom, #f1f1f1, #c1c1c1 90%, #d0d0d0) 0px 0px no-repeat;
}

input[type="checkbox"] + label:after {
    @checkbox-check-color:@dark-blue;

    opacity: 0;
    content: '';
    position: absolute;
    width: 11px;
    height: 6px;
    background: 
    transparent;
    top: 8px;
    left: 8px;
    border: 3.5px solid lighten(@checkbox-check-color,10%);
    border-top: 0;
    border-right: 0;
    .transform(rotate(-45deg));

    .box-shadow(-1px 1px 1px 0px @checkbox-check-color);
}


input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

//
// RADIOBUTTON
//

// Border style
input[type=radio] + label {
    #gradient > .vertical(@button-color, darken(@button-color, 20%));
    border: @border-thickness solid darken(@border-color, 40%);
    box-sizing:border-box;

    width: 30px;
    height: 30px;
}


// Inner Area
input[type=radio]+ label:before {
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    #gradient > .vertical (#222,#45484d);
}


// Color dot
input[type=radio] + label:after {
    background: @dark-blue; 

    @dot-color: @dark-blue;
    @dot-dark-color: darken(@dot-color, 10%);

    #gradient > .vertical (@dot-color,@dot-dark-color);

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

// 
// MASTER DETAIL
// 

.master-popup * {
  border:none;
  background:none;
}

.master-popup ul li:not(:first-child) {
  border-top: @border-thickness solid @border-color;
}

.master-popup ul li:first-child, .master-popup ul li:first-child a {
  border-top: 0;
  .border-radius-top(0);
}

.master-popup ul li:last-child, .master-popup ul li:last-child a {
  .border-radius-bottom(0);
}

.master-detail-master.attached {
  border-right: @border-thickness solid darken(@border-color, 40%);
}

.master-popup .layout-card {
  @corner-color: @border-color;
  background-color: white;
}

.master-popup.popupAnchorPointerTop:before  {
  top:-10px;
}

//
// SCROLLBAR
//

.scrollbarV > div {
  background-color: @dark-grey;
}

//
// TOOLBAR
// 

.toolbar-button {
  .clickable();
}

.toolbar-button.active {
  .clickable-active();
}

//
// MENU
//

.item-selected {
  .clickable-active();
}

//
// SELECT BOX
//

.selectbox {
  color:@dark-blue;
  .clickable();
}

.selectbox:active {
  .clickable-active();
}

// Tick
.selectbox-selected > div > .list-itemlabel:after {
  border: 0px solid transparent;
}

.selectbox-selected {
  .clickable-active();
}

//
// CAROUSEL
//

@pagination-label-size:8px;

.carousel-pagination-label {
  border: 1px solid white;
  opacity:0.6;
  background-color:@dark-grey;

  width:@pagination-label-size;
  height:@pagination-label-size;
  text-align:center;
  line-height:@pagination-label-size;
  .border-radius(15px);

  font-size:1px;
  color:rgba(0,0,0,0);
}

.carousel-pagination-label.active {
  background-color:@dark-blue;
  opacity:1.0;
}

.carousel-pagination {
  top: -(@pagination-label-size+15px);
}

//
// PICKER
//

.picker-container {
  background-color:white;
}

.picker-label {
  color:black;
}

.picker-slot:before {
  background-color: @dark-grey;
}

.picker-slot:after {
  background-color: @dark-grey;
}

// Spinning Wheel Overlay Gradient
.picker-container:after {
  #gradient > .vertical-four(rgba(0,0,0,0.6),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0),rgba(0,0,0,0.6),33%,66%);
}

// Selected Area Overlay
.picker-container:before {
  top: 32px;
  height: 15px; 

  background-color:lighten(@dark-blue,15%);
  
  .box-shadow(0px 2px 2px rgba(0, 0, 0, 1.0));

  border-top:1px solid black;
  border-bottom:15px solid @dark-blue;

  opacity:0.4;
}
