/***常量***/
@color-key: #178cdf;
@color-font: #333;
@color-background: #FAFAFA;
@color-border: #CCCCCC;
@color-error: #d9534f;

@color-input-focus: #66afe9;

@color-date-weekend: @color-error;
@color-date-hover-border: @color-border;
@color-date-hover-background: #eee;
@color-date-today: @color-key;
@color-date-select: @color-key;
@color-date-other: @color-border;

/***function***/
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}
.box-sizing(@box-model:border-box) {
  -webkit-box-sizing: @box-model;
  -moz-box-sizing: @box-model;
  box-sizing: @box-model;
}
.size(@width, @height) {
  width: @width;
  height: @height;
}
.text-truncate(){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inputFocus(){
  border-color: @color-input-focus;
  .box-shadow(0 0 6px fade(@color-input-focus, 60%));
}
.inputAll() {
  font-size: 14px;
  padding: 3px;
  background-color: white;
  background-image: none;
  vertical-align:middle;
  .box-shadow(inset 0 1px 1px 0 rgba(0 ,0 ,0 ,0.075));
}
/***style***/
.perfect-datetimepicker{
  position: relative;
  width: 240px;
  margin: 2px 0 0;
  padding: 0;
  font-size: 14px;
  color: @color-font;
  background-color: @color-background;
  .border-radius(4px);
  line-height: 0;
  overflow: hidden;
  border: 1px solid @color-border;
  *{
    .box-sizing();
  }
  table{
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
    background-color: white;
    padding: 3px;
    td{
      border: 0;
      text-align: center;
      padding: 2px;
      .size(34px, 27px);
      cursor: pointer;
      vertical-align: middle;
      .border-radius(3px);
      &.weekend{
        color: @color-date-weekend;
      }
    }
    &.mt tbody td{
      .size(58px, 38px);
    }
  }
  td {
    &.day {
      // Force cells to have equal width
      width: 100% / 7;
    }
    &.name {
      font-weight: bold;
    }
    &.oday{
      color: @color-date-other;
      cursor: auto;
    }
    &.disabled {
      color: #999;
      cursor: auto;
    }
    i{
      font-size: 18px;
      font-weight: bold;
    }
    table.tt{
      border: 0;
      padding: 0;
    }
  }
  table.tt{
    padding: 5px;
    td.hover{
      border: 0;
    }
    td.common{
      width: 5px;
    }
    tbody td{
      .size(40px, 14px);
    }
    input{
      outline: none;
      border: 1px solid #cccccc;
      margin: 0 auto;
      // Make sure that there is no padding even if the website styles define it.
      // Otherwise, the digits might not be visible in case of large padding.
      padding: 0 !important;
      overflow: hidden;
      .size(38px, 24px);
      text-align: center;
      font-size: 12px;
      .text-truncate();
      vertical-align:middle;
      .border-radius(3px);
      -moz-transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
      -ms-transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
      -webkit-transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
      -o-transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
      transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
    }
    input:focus{
      .inputFocus();
    }
    // Display the input elements as normal text inputs (The features added
    // by type=number will still work)
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }
  }
  .buttonpane {
    border-top: 1px solid @color-border;
  }
  tbody td{
    &.hover{
      background-color: @color-date-hover-background;
      padding: 1px;
      border: 1px solid @color-date-hover-border;
    }
    &.today {
      font-weight: bold;
      color: @color-date-today;
    }
    &.selected {
      font-weight: bold;
      padding: 1px;
      color: white;
      border: 1px solid @color-date-select;
      background-color: @color-date-select;
    }
  }
  tfoot td{
    &.hover{
      background-color: @color-date-hover-background;
      padding: 1px;
      border: 1px solid @color-date-hover-background;
    }
  }
  thead td{
    &.hover{
      background-color: @color-date-hover-background;
      padding: 1px;
      border: 1px solid @color-date-hover-background;
    }
    &.title {
      font-weight: bold;
      text-align: center;
      padding: 2px;
    }
  }
}

//iconfont
i {
  font-family: "finex";
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'finex';
  src: url('../resources/fonts/iconfont.eot'); /* IE9*/
  src: url('../resources/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../resources/fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../resources/fonts/iconfont.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../resources/fonts/iconfont.svg#svgFontName') format('svg'); /*  iOS 4.1- */
}
i.icon-datepicker-minus:before{
  content: '\e601';
}
i.icon-datepicker-plus:before{
  content: '\e603';
}
i.icon-datepicker-prev:before{
  content: '\e602';
}
i.icon-datepicker-next:before{
  content: '\e600';
}