@import "global/_variables";
@import "global/_mixins";
@import "style";
@import "vendors";

//REMOVE OUTLINE INPUT
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
  border-color: @abbr-border-color;
  box-shadow: none;
  outline: 0 none;
}
a:focus, .btn:focus {
  outline: 0 !important;
}
.img-circle{
  border-radius: 50% !important;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

//BEGIN NOTE
.note {
  margin: 0 0 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 3px solid #e5e5e5;
  .border-radius(5px);
}
.note h1,
.note h2,
.note h3,
.note h4 {
  margin-top: 0;
}
.note p:last-child {
  margin-bottom: 0;
}
.note code,
.note .highlight {
  background-color: #fff;
}
.note-success {
  border-color: @brand-success;
  background: @state-success-bg;
  .box-heading{
    color: @brand-success;
  }
}

.note-warning {
  border-color: @brand-warning;
  background: @state-warning-bg;
  .box-heading{
    color: @brand-warning;
  }
}

.note-info {
  border-color: @brand-info;
  background: @state-info-bg;
  .box-heading{
    color: @brand-info;
  }
}

.note-danger {
  border-color: @brand-danger;
  background: @state-danger-bg;
  .box-heading{
    color: @brand-danger;
  }
}
//END NOTE

//BEGIN PAGINATION
.pagination{
  .border-radius(5px);
  li{
    a{
      border-color: #e5e5e5;
    }
    span{
      border-right: #e5e5e5;
    }
    &.active{
      a{
        border-color: @brand-primary;
      }
      span{
        border-color: @brand-primary;
      }
    }
  }
}
//END PAGINATION

//BEGIN LABEL & BADGE
.badge {
  font-size: 11px !important;
  font-weight: 300;
  text-align: center;
  height: 18px;
  padding: 3px 6px 3px 6px;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  border-radius: 12px !important;
  text-shadow: none !important;
  text-align: center;
  vertical-align: middle;
  background-color: #bcbcbc;
}
.label{
  font-size: 11px;
  font-weight: 300;
  .no-border-radius();
}
.badge-default,
.label-default  {
  background-color: #999 !important;
}

.badge-primary,
.label-primary {
  background-color: @brand-primary !important;
}

.badge-red,
.label-red {
  background-color: @color-red !important;
}

.badge-orange,
.label-orange {
  background-color: @color-orange !important;
}

.badge-green ,
.label-green {
  background-color: @color-green !important;
}

.badge-yellow,
.label-yellow {
  background-color: @color-yellow !important;
}

.badge-blue,
.label-blue {
  background-color: @color-blue !important;
}

.badge-violet,
.label-violet {
  background-color: @color-violet !important;
}

.badge-pink,
.label-pink {
  background-color: @color-pink !important;
}

.badge-grey,
.label-grey {
  background-color: @color-grey !important;
}

.badge-dark,
.label-dark {
  background-color: @color-dark !important;
}

.label-success,
.badge-success {
  background-color: @brand-success;
  background-image: none !important;
}

.label-warning,
.badge-warning {
  background-color: @brand-warning;
  background-image: none !important;
}

.label-danger,
.badge-danger {
  background-color: @brand-danger;
  background-image: none !important;
}

.label-info,
.badge-info {
  background-color: @brand-info;
  background-image: none !important;
}

.nav.nav-pills > li > a > .badge {
  margin-top: -2px;
}

.nav.nav-stacked > li > a > .badge {
  margin-top: 1px;
  margin-bottom: 0px;
}
a.list-group-item.active>.badge, .nav-pills>.active>a>.badge {
  color: @brand-primary;
}
//END LABEL & BADGE

//BEGIN PAGINATION
.pagination{
  li{
    &.active{
      a{
        color: #FFFFFF;
        background: @brand-primary;
        z-index: 2;
        cursor: default;
        &:hover, &:focus{
          color: #FFFFFF;
          background: @brand-primary;
          z-index: 2;
          cursor: default;
        }
      }
      span{
        color: #FFFFFF;
        background: @brand-primary;
        z-index: 2;
        cursor: default;
        &:hover, &:focus{
          color: #FFFFFF;
          background: @brand-primary;
          z-index: 2;
          cursor: default;
        }
      }
    }
    a{
      color: @brand-primary;
    }
  }
}
//END PAGINATION

//BEGIN PANEL
.panel{
  .box-shadow(none);
  .border-radius(5px);
  >.panel-heading {
    font-size: 18px;
    padding: 7px 15px;
    .border-top-radius(4px);
    .border-color();
  }
  >.panel-footer {
    font-size: 18px;
    padding: 7px 15px;
    .border-bottom-radius(4px);
  }
  &.panel-primary{
    border-color: @brand-primary;
    >.panel-heading{
      color: #FFFFFF;
      background: @brand-primary;
      .border-color(@brand-primary);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @brand-primary;
      .border-color(@brand-primary);
    }
  }
  &.panel-red{
    border-color: @color-red;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-red;
      .border-color(@color-red);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-red;
      .border-color(@color-red);
    }
  }
  &.panel-orange{
    border-color: @color-orange;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-orange;
      .border-color(@color-orange);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-orange;
      .border-color(@color-orange);
    }
  }
  &.panel-green{
    border-color: @color-green;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-green;
      .border-color(@color-green);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-green;
      .border-color(@color-green);
    }
  }
  &.panel-yellow{
    border-color: @color-yellow;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-yellow;
      .border-color(@color-yellow);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-yellow;
      .border-color(@color-yellow);
    }
  }
  &.panel-blue{
    border-color: @color-blue;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-blue;
      .border-color(@color-blue);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-blue;
      .border-color(@color-blue);
    }
  }
  &.panel-pink{
    border-color: @color-pink;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-pink;
      .border-color(@color-pink);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-pink;
      .border-color(@color-pink);
    }
  }
  &.panel-violet{
    border-color: @color-violet;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-violet;
      .border-color(@color-violet);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-violet;
      .border-color(@color-violet);
    }
  }
  &.panel-grey{
    border-color: @color-grey;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-grey;
      .border-color(@color-grey);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-grey;
      .border-color(@color-grey);
    }
  }
  &.panel-dark{
    border-color: @color-dark;
    >.panel-heading{
      color: #FFFFFF;
      background: @color-dark;
      .border-color(@color-dark);
    }
    >.panel-footer{
      color: #FFFFFF;
      background: @color-dark;
      .border-color(@color-dark);
    }
  }
  &.panel-white{
    border-color: #efefef;
    >.panel-heading{
      border-bottom: 1px solid #faf9fb;
      color: @text-color;
      background: #FFFFFF;
    }
    >.panel-footer{
      border-top: 1px solid #faf9fb;
      color:  @text-color;
      background: #FFFFFF;
    }
  }
}
//END PANEL

//BEGIN BUTTON
.btn{
  outline: none !important;
  .border-radius(5px);

  &.btn-square{
    .border-radius(0);
  }
}
.btn-outlined{
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &.btn-default{
    background: none;
    border: 1px solid @text-color;
    color: @text-color;
  }
  &.btn-primary{
    background: none;
    border: 1px solid @brand-primary;
    color: @brand-primary;
  }
  &.btn-success{
    background: none;
    border: 1px solid @brand-success;
    color: @brand-success;
  }
  &.btn-warning{
    background: none;
    border: 1px solid @brand-warning;
    color: @brand-warning;
  }
  &.btn-info{
    background: none;
    border: 1px solid @brand-info;
    color: @brand-info;
  }
  &.btn-danger{
    background: none;
    border: 1px solid @brand-danger;
    color: @brand-danger;
  }
  &.btn-red{
    background: none;
    border: 1px solid @color-red;
    color: @color-red;
  }
  &.btn-orange{
    background: none;
    border: 1px solid @color-orange;
    color: @color-orange;
  }
  &.btn-green{
    background: none;
    border: 1px solid @color-green;
    color: @color-green;
  }
  &.btn-yellow{
    background: none;
    border: 1px solid @color-yellow;
    color: @color-yellow;
  }
  &.btn-blue{
    background: none;
    border: 1px solid @color-blue;
    color: @color-blue;
  }
  &.btn-pink{
    background: none;
    border: 1px solid @color-pink;
    color: @color-pink;
  }
  &.btn-violet{
    background: none;
    border: 1px solid @color-violet;
    color: @color-violet;
  }
  &.btn-grey{
    background: none;
    border: 1px solid @color-grey;
    color: @color-grey;
  }
  &.btn-dark{
    background: none;
    border: 1px solid @color-dark;
    color: @color-dark;
  }
}

.btn-default {
  .button-variant(@btn-default-color; #efefef; @btn-default-border);
}
.btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
.btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
.btn-info {
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
.btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
.btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
.btn-red {
  .button-variant(@btn-red-color; @btn-red-bg; @btn-red-border);
}
.btn-orange {
  .button-variant(@btn-orange-color; @btn-orange-bg; @btn-orange-border);
}
.btn-green {
  .button-variant(@btn-green-color; @btn-green-bg; @btn-green-border);
}
.btn-yellow {
  .button-variant(@btn-yellow-color; @btn-yellow-bg; @btn-yellow-border);
}
.btn-blue {
  .button-variant(@btn-blue-color; @btn-blue-bg; @btn-blue-border);
}
.btn-violet {
  .button-variant(@btn-violet-color; @btn-violet-bg; @btn-violet-border);
}
.btn-pink {
  .button-variant(@btn-pink-color; @btn-pink-bg; @btn-pink-border);
}
.btn-grey {
  .button-variant(@btn-grey-color; @btn-grey-bg; @btn-grey-border);
}
.btn-dark {
  .button-variant(@btn-dark-color; @btn-dark-bg; @btn-dark-border);
}
.btn-white {
  .button-variant(@btn-white-color; @btn-white-bg; @btn-white-border);
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){
  .border-right-radius(0);
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){
  .border-radius(0);
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child){
  .border-left-radius(0);
}
.btn-group>.btn-group:last-child>.btn:first-child{
  .border-left-radius(0);
}
.btn-group>.btn-group:first-child>.btn:last-child, .btn-group>.btn-group:first-child>.dropdown-toggle{
  .border-right-radius(0);
}
.btn-group-vertical>.btn:first-child:not(:last-child){
  border-top-right-radius: 7px !important;
  .border-bottom-radius(0);
}
.btn-group-vertical>.btn:not(:first-child):not(:last-child){
  .border-radius(0);
}
.btn-group-vertical>.btn:last-child:not(:first-child){
  border-bottom-left-radius: 7px !important;
  .border-top-radius(0);
}
//END BUTTON

//BEGIN INPUT GROUP
.input-group{
  input{

  }
  .input-group-addon{
    color: @text-color;
    border-color: #e5e5e5;
    .border-radius(5px);
  }
  .input-group-btn{
    .btn{
      border: 1px solid #e5e5e5 !important;
      .box-shadow(none);
      &.btn-primary{
        border-color: darken(@brand-primary, 5%) !important;
      }
      &.btn-success{
        border-color: darken(@brand-success, 5%) !important;
      }
      &.btn-warning{
        border-color: darken(@brand-warning, 5%) !important;
      }
      &.btn-info{
        border-color: darken(@brand-info, 5%) !important;
      }
      &.btn-danger{
        border-color: darken(@brand-danger, 5%) !important;
      }
      &.btn-red{
        border-color: darken(@color-red, 5%) !important;
      }
      &.btn-orange{
        border-color: darken(@color-orange, 5%) !important;
      }
      &.btn-green{
        border-color: darken(@color-green, 5%) !important;
      }
      &.btn-yellow{
        border-color: darken(@color-yellow, 5%) !important;
      }
      &.btn-blue{
        border-color: darken(@color-blue, 5%) !important;
      }
      &.btn-pink{
        border-color: darken(@color-pink, 5%) !important;
      }
      &.btn-violet{
        border-color: darken(@color-violet, 5%) !important;
      }
      &.btn-grey{
        border-color: darken(@color-grey, 5%) !important;
      }
      &.btn-dark{
        border-color: darken(@color-dark, 5%) !important;
      }
    }
  }
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn{
  .border-right-radius(0);
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn{
  .border-left-radius(0);
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn{
  .border-left-radius(0);
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn{
  .border-right-radius(0);
}
.input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child){
  .border-radius(0);
}
//END INPUT GROUP

//BEGIN DROPDOWN MENU
.dropdown-menu{
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  .box-shadow(0 1px 1px rgba(0,0,0,0.15));
  li{
    a{
      color: @text-color;
      padding: 9px 10px;
      font-size: 13px;
    }
  }
}
.dropdown-submenu{
  position: relative;
  > .dropdown-menu {
    top: 5px;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
  }
  > a{
    &:after{
      position: absolute;
      display: inline-block;
      right: 7px;
      top: 7px;
      font-family: FontAwesome;
      height: auto;
      content: "\f105";
      font-weight: 300;
    }
  }
  &:hover{
    > .dropdown-menu {
      display: block;
    }
  }
  &.pull-left {
    float: none;
    > .dropdown-menu {
      left: -100%;
      margin-left: 10px;
    }
  }
}
.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
}
//END DROPDOWN MENU

//BEGIN ICON
[class^="fa-"],
[class^="glyphicon-"],
[class^="icon-"],
[class*=" fa-"],
[class*=" glyphicon-"],
[class*=" icon-"] {
  display: inline-block;
  margin-top: 1px;
  font-size: 14px;
  *margin-right: .3em;
  line-height: 14px;
  -webkit-font-smoothing: antialiased;
}
li [class^="fa-"],
li [class^="glyphicon-"],
li [class^="icon-"],
li [class*=" fa-"],
li [class*=" glyphicon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li [class^="glyphicon-"],
li [class*=" glyphicon-"] {
  top: 2px;
}
li [class^="icon-"],
li [class*=" icon-"] {
  top: 1px;
  position: relative;
}
li [class^="fa-"].icon-large,
li [class^="glyphicon-"].icon-large,
li [class^="icon-"].icon-large,
li [class*=" fa-"].icon-large,
li [class*=" glyphicon-"].icon-large,
li [class*=" icon-"].icon-large {
  width: 1.5625em;
}
//END ICON

//BEGIN NAV PIlLS
.nav-pills{
  li{
    &.active{
      a{
        background: @brand-primary;
        &:hover,
        &:focus{
          background: @brand-primary;
        }
      }
    }
    a{
      .border-radius(5px);
    }
  }
}
//END NAV PILLS

//BEGIN LIST GROUP
.list-group{
  .list-group-item{
    border-color: #e5e5e5;
    color: @text-color;
    &.active{
      background: @brand-primary;
      border-color: @brand-primary;
      &:hover,
      &:focus{
        background: @brand-primary;
        border-color: @brand-primary;
      }
    }
    &:first-child {
      .border-top-radius(5px);
    }
    &:last-child {
      .border-bottom-radius(5px);
    }
  }
}
//END LIST GROUP

//BEGIN TAB
.nav-tabs{
  .border-color();
  li{
    a{
      .border-radius(7px 7px 0 0);
    }
  }
}

.tab-content {
  background: #fff;
  padding: 20px 15px;
  margin-bottom: 20px;
  border: 1px solid;
  .border-color();
  border-top: 0;
}
.tabbable{
  &:before {
    display: table;
    line-height: 0;
    content: "";
  }
  &:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
  }
  &.tabs-left{
    .nav-tabs{
      float: left;
      display: inline-block;
      border-bottom: 0;
      > li{
        float: none;
        &.active,
        &:hover,
        &:focus{
          > a{
            border: 1px solid;
            .border-color(#e5e5e5);
            border-right: 0;
          }
        }
        > a{
          border-right: 0;
          min-width: 74px;
          margin-bottom: 3px;
          margin-right: -1px;
          .border-radius(7px 0 0 7px);
        }
      }
    }
    .tab-content{
      overflow: auto;
      border: 1px solid;
      .border-color(#e5e5e5);
    }
  }
  &.tabs-right{
    .nav-tabs{
      float: right;
      display: inline-block;
      border-bottom: 0;
      > li{
        float: none;
        &.active,
        &:hover,
        &:focus{
          > a{
            border: 1px solid;
            .border-color(#e5e5e5);
            border-left: 0;
          }
        }
        > a{
          border-left: 0;
          min-width: 74px;
          margin-bottom: 3px;
          margin-left: -1px;
          .border-radius(0 7px 7px 0);
        }
      }
    }
    .tab-content{
      overflow: auto;
      border: 1px solid;
      .border-color(#e5e5e5);
    }
  }
  &.tabs-below{
    .nav-tabs {
      margin-bottom: 20px !important;
      border: 0;
      > li{
        margin-top: -1px;
        margin-bottom: 0;
        &.active{
          > a{
            border: 1px solid;
            .border-color(#e5e5e5);
            border-top: 0;
          }
        }
        > a{
          .border-radius(0 0 7px 7px);
        }
      }
    }
    .tab-content{
      overflow: auto;
      margin-bottom: 0 !important;
      border: 1px solid;
      .border-color(#e5e5e5);
    }
  }
}
//END TAB

//BEGIN PROGRESS BAR
.progress{
  position: relative;
  .border-radius(5px);
  .box-shadow(none);
  &.progress-xs{
    height: 5px;
    margin-top: 5px;
  }
  &.progress-sm{
    height: 11px;
    margin-top: 5px;
  }
  &.progress-lg{
    height: 25px;
  }
  .progress-bar{
    .box-shadow(none);
    background-color: @brand-primary;
    &.progress-bar-success{
      background-color: @brand-success !important;
    }
    &.progress-bar-warning{
      background-color: @brand-warning !important;
    }
    &.progress-bar-info{
      background-color: @brand-info !important;
    }
    &.progress-bar-danger{
      background-color: @brand-danger !important;
    }
    &.progress-bar-red {
      background-color: @color-red !important;
    }
    &.progress-bar-orange {
      background-color: @color-orange !important;
    }
    &.progress-bar-green {
      background-color: @color-green !important;
    }
    &.progress-bar-yellow {
      background-color: @color-yellow !important;
    }
    &.progress-bar-blue {
      background-color: @color-blue !important;
    }
    &.progress-bar-violet {
      background-color: @color-violet !important;
    }
    &.progress-bar-pink {
      background-color: @color-pink !important;
    }
    &.progress-bar-grey {
      background-color: @color-grey !important;
    }
    &.progress-bar-dark {
      background-color: @color-dark !important;
    }
    &.progress-bar-white {
      background-color: @color-white !important;
    }
    &.six-sec-ease-in-out {
      -webkit-transition: width 6s ease-in-out;
      -moz-transition: width 6s ease-in-out;
      -ms-transition: width 6s ease-in-out;
      -o-transition: width 6s ease-in-out;
      transition: width 6s ease-in-out;
    }
  }
  &.wide {
    width: 60px;
    height: 150px;
  }
  &.vertical{
    &.progress-xs{
      width: 10px;
      margin-top: 0;
    }
    &.progress-sm{
      width: 20px;
      margin-top: 0;
    }
    &.progress-lg{
      width: 70px;
    }
  }
}
//END PROGRESS BAR

//BEGIN FORM LAYOUTS
.form-actions{
  padding: 20px 0;
  background: #fafafa;
  .border-bottom-radius(4px);
  &:before,
  &:after {
    display: table;
    line-height: 0;
    content: "";
  }
  &:after {
    clear: both;
  }
  &.top{
    .border-bottom-radius(0);
  }
  &.none-bg{
    background: transparent;
    border-top: 1px dashed #f3f3f3;
    &.top{
      border-bottom: 1px dashed #f3f3f3;
      border-top: 0;
    }
  }
}
.state-success .form-control {
  border-color: @state-success-text !important;
}
.state-warning .form-control {
  border-color: @state-warning-text !important;
}
.state-error .form-control {
  border-color: @state-danger-text !important;
}
.state-success em {
  color: @state-success-text !important;
  margin-top: 5px;
  display: block;
}
.state-warning em {
  color: @state-warning-text !important;
  margin-top: 5px;
  display: block;
}
.state-error em {
  color: @state-danger-text !important;
  margin-top: 5px;
  display: block;
}
.state-success{
  input,
  select,
  textarea{
    background: @state-success-bg !important;
  }
}
.state-warning{
  input,
  select,
  textarea{
    background: @state-warning-bg !important;
  }
}
.state-error{
  input,
  select,
  textarea{
    background: @state-danger-bg !important;
  }
}

.form-bordered{
  .control-label {
    padding-top: 16px;
  }
  .form-group{
    margin: 0;
    border-bottom: 1px solid #f7f7f7;
    > div {
      padding: 15px;
      border-left: 1px solid #f7f7f7;
    }
    &:last-child{
      border-bottom: 0;
    }
  }
  .help-block {
    margin-bottom: 0px;
  }
  &.dashed{
    .form-group{
      border-bottom: 1px dashed #f3f3f3;
      > div {
        border-left: 1px dashed #f3f3f3;
      }
      &:last-child{
        border-bottom: 0;
      }
    }
  }
}
.form-seperated{
  .control-label {
    padding-top: 16px;
  }
  .form-group{
    margin: 0;
    border-bottom: 1px solid #f7f7f7;
    > div {
      padding: 15px;
    }
    &:last-child{
      border-bottom: 0;
    }
  }
  .help-block {
    margin-bottom: 0px;
  }
  &.dashed{
    .form-group{
      border-bottom: 1px dashed #f3f3f3;
      &:last-child{
        border-bottom: 0;
      }
    }
  }
}
.form-horizontal{
  &.form-row-stripped{
    .form-group{
      &:nth-child(odd) {
        background: #fcfcfc;
      }
    }
  }
  &.form-seperated{
    .radio, .checkbox, .radio-inline, .checkbox-inline{
      padding-top: 0;
    }
  }
}
//END FORM LAYOUTS

//BEGIN TEXT COLORS
.text-primary{
  color: @brand-primary !important;
}
.text-red{
  color: @color-red !important;
}
.text-orange{
  color: @color-orange !important;
}
.text-green{
  color: @color-green !important;
}
.text-yellow{
  color: @color-yellow !important;
}
.text-blue{
  color: @color-blue !important;
}
.text-pink{
  color: @color-pink !important;
}
.text-violet{
  color: @color-violet !important;
}
.text-grey{
  color: @color-grey !important;
}
.text-dark{
  color: @color-dark !important;
}
.text-white{
  color: @color-white !important;
}
.text-facebook{
  color: #418bca;
}
.text-twitter{
  color: #5bc0de;
}
.text-google-plus{
  color: #dd4c39;
}
.text-dribbble{
  color: #ec5d92;
}
//END TEXT COLORS

//BEGIN INPUT
.input-mini {
  width: 45px !important;
}

.input-xsmall {
  width: 80px !important;
}

.input-small {
  width: 120px !important;
}

.input-medium {
  width: 240px !important;
}

.input-large {
  width: 320px !important;
}

.input-xlarge {
  width: 480px !important;
}
.input-inline {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.form-group .input-inline {
  margin-right: 5px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
  font-family: 'Open Sans',sans-serif;
  font-size: 13px;
}
.ui-spinner-input{
  height: 24px;
}
//END INPUT

//BEGIN MODAL
.modal{
  .modal-dialog{
    .modal-content{
      .border-radius(5px);
      .modal-header{
        &.modal-header-primary{
          background: @brand-primary;
          .modal-title{
            color: #FFFFFF;
          }
        }
      }
      .modal-body{

      }
      .modal-footer{
        &.modal-footer-left{
          text-align: left !important;
        }
      }
    }
  }
}
//END MODAL

//BEGIN PORTLET
.portlet  {
  clear: both;
  margin-top: 0px;
  margin-bottom: 25px;
  padding: 0px;
}

.portlet {
  .border-radius(5px);
  &.box{
    >.portlet-header{
      margin-bottom: 0;
      padding: 8px 15px;
      .border-top-radius(5px);
    }
  }
  >.portlet-header{
    margin-bottom: 15px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    &:before{
      content: "";
      display: table;
      line-height: 0;
    }
    &:after{
      content: "";
      display: table;
      line-height: 0;
      clear: both;
    }
    .caption {
      float: left;
      display: inline-block;
      font-size: 18px;
      line-height: 18px;
      padding: 0;
      i{
        float: left;
        margin-top: 4px;
        display: inline-block !important;
        font-size: 13px;
        margin-right: 5px;
        color: @text-color;
      }
    }
    .actions{
      display: inline-block;
      padding: 0;
      margin: 0;
      margin-top: 6px;
      float: right;
      > .btn{
        padding: 4px 10px;
        margin-top: -18px;
        &.btn-sm{
          padding: 3px 8px;
          margin-top: -13px;
        }
        &.btn-xs{
          padding: 1px 5px;
          margin-top: -13px;
        }
      }
      > .btn-group{
        margin-top: -12px;
        > .btn{
          padding: 4px 10px;
          margin-top: -1px;
          &.btn-sm{
            padding: 3px 8px;
            margin-top: -1px;
          }
          &.btn-xs{
            padding: 1px 5px;
            margin-top: -1px;
          }
        }
      }
    }
    .pagination.pagination-sm{
      float: right;
      display: inline-block;
      margin: 0px;
      li{
        a{
          padding: 3px 10px;
        }
      }
    }
    .tools{
      display: inline-block;
      padding: 0;
      margin: 0;
      float: right;
      i{
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
  .portlet-body{
    background: #FFFFFF;
    padding: 15px;
    clear: both;
    .border-bottom-radius(5px);
    &.form{
      padding: 0 !important;
    }
  }
}
.portlet{
  &.portlet-default{
    >.portlet-header{
      background: #FFFFFF;
      color: @text-color;
      border-bottom: 1px solid #f0f2f6;
      i{
        color: @text-color;
      }
      .btn{
        i{
          color: @text-color;
        }
      }
    }
  }
  &.portlet-primary{
    border-color: @brand-primary;
    >.portlet-header{
      background: @brand-primary;
      color: #ffffff;
    }
  }
  &.portlet-red{
    border-color: @color-red;
    >.portlet-header{
      background: @color-red;
      color: #ffffff;
    }
  }
  &.portlet-orange{
    border-color: @color-orange;
    >.portlet-header{
      background: @color-orange;
      color: #ffffff;
    }
  }
  &.portlet-green{
    border-color: @color-green;
    >.portlet-header{
      background: @color-green;
      color: #ffffff;
    }
  }
  &.portlet-yellow{
    border-color: @color-yellow;
    >.portlet-header{
      background: @color-yellow;
      color: #ffffff;
    }
  }
  &.portlet-blue{
    border-color: @color-blue;
    >.portlet-header{
      background: @color-blue;
      color: #ffffff;
    }
  }
  &.portlet-violet{
    border-color: @color-violet;
    >.portlet-header{
      background: @color-violet;
      color: #ffffff;
    }
  }
  &.portlet-pink{
    border-color: @color-pink;
    >.portlet-header{
      background: @color-pink;
      color: #ffffff;
    }
  }
  &.portlet-grey{
    border-color: @color-grey;
    >.portlet-header{
      background: @color-grey;
      color: #ffffff;
    }
  }
  &.portlet-dark{
    border-color: @color-dark;
    >.portlet-header{
      background: @color-dark;
      color: #ffffff;
    }
  }
}

.portlet {
  .border-radius(5px);
  &.color{
    padding: 0;
    .portlet-header {
      margin-bottom: 0;
      border: 0px;
      .btn.btn-white{
        i{
          color: @text-color;
        }
      }
    }
  }
}

.portlet.color {
  .portlet-body {
    background: transparent;
  }
}

.portlet.color{
  &.portlet-default {
    background: #FFFFFF !important;
    >.portlet-header{
      color: @text-color;
      border: 0;
      >.caption i{
        color: @text-color;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: @text-color;
      border: 0;
      padding: 0;
      background: transparent;
    }
  }
  >.portlet-body.default{
    //background: #FFFFFF !important;
  }
  &.portlet-primary {
    background: @brand-primary !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;

    }
  }
  >.portlet-body.brand-primary{
    background: @brand-primary !important;
  }
  &.portlet-red {
    background: @color-red !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-red{
    background: @color-red !important;
  }
  &.portlet-orange {
    background: @color-orange !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-orange{
    background: @color-orange !important;
  }
  &.portlet-green {
    background: @color-green !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-green{
    background: @color-green !important;
  }
  &.portlet-yellow {
    background: @color-yellow !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-yellow{
    background: @color-yellow !important;
  }
  &.portlet-blue {
    background: @color-blue !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-blue {
    background: @color-blue !important;
  }
  &.portlet-violet {
    background: @color-violet !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-violet{
    background: @color-violet !important;
  }
  &.portlet-pink {
    background: @color-pink !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-pink{
    background: @color-pink !important;
  }
  &.portlet-grey {
    background: @color-grey !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-grey {
    background: @color-grey !important;
  }
  &.portlet-dark {
    background: @color-dark !important;
    >.portlet-header{
      color: #ffffff;
      border: 0;
      >.caption i{
        color: #ffffff;
        border: 0;
      }
      >.tools{
        border: 0px;
      }
    }
    >.portlet-body{
      color: #ffffff;
      border: 0;
    }
  }
  >.portlet-body.color-dark{
    background: @color-dark !important;
  }
}

.portlet-tabs {
  > .nav-tabs {
    position: relative;
    top: -44px;
    margin-right: 15px;
    border-bottom: none;
    padding: 4px 0px;
    overflow: hidden;
    > li{
      float: right;
      margin-left: 1px;
      &:last-child{
        a{
          border-right:0;
        }
      }
      &.active{
        color: @brand-primary;
        border-top-color: transparent;
        a{
          margin-bottom: 0px;
          border-bottom: 0;
          margin-left: 0px;
          margin-right: 0px;
          border-left: 0;
          border-right: 0;
          background-color: none !important;
          border-top-color:transparent !important;
          color: @text-color;
          cursor: default;
          &:hover{
            background-color: #fff !important;
          }
        }
      }
      a{
        color: #fff;
        padding-top: 8px;
        padding-bottom: 10px;
        line-height: 16px;
        margin-top: 6px;
        margin-left: 0px;
        margin-right: 0px;
        border-left: 0;
        border-right: 0;
        &:hover{
          color: @text-color;
          margin-bottom: 0;
          border-bottom-color: transparent;
          margin-left: 0;
          margin-right: 0;
          border-left: 0;
          border-right: 0;
          background-color: none !important;
          border-top-color:transparent;
        }
      }
    }
  }
  > .tab-content{
    padding: 15px !important;
    margin: 0px;
    margin-top: -50px !important;
    border: 0;
  }
}

.portlet.tabbable .portlet-body {
  padding: 0px !important;
}

.sortable {
  .portlet {
    .portlet-header {
      cursor: move;
    }
  }
}
.sortable-placeholder {
  display: block;
  margin-top: 0px !important;
  margin-bottom: 25px !important;
  background-color: #f5f5f5;
  border: 1px dashed @brand-primary;
}

.sortable-placeholder * {
  visibility:hidden;
}
.wait{
  position: relative;
  background: url("../../images/icons/loading.gif") center no-repeat !important;
}
//END PORTLET

//BEGIN FAMILY TREEVIEW
.family-tree-vertical{
  li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
    &:before {
      content:'';
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      right: auto;
      left: -20px;
      border-left: 1px solid #ccc;
      bottom: 50px;
    }
    &:after {
      content:'';
      position: absolute;
      top: 30px;
      width: 25px;
      height: 20px;
      right: auto;
      left: -20px;
      border-top: 1px solid #ccc;
    }
    a {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-decoration: none;
      color: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      .border-radius(5px);
      &:hover,
      &:hover+ul li a {
        background: #c8e4f8;
        color: #000;
        border: 1px solid #94a0b4;
      }
    }
    &:last-child{
      &:before {
        height: 30px;
      }
    }
  }
}
.family-tree-vertical > ul > li::before, .family-tree-vertical > ul > li::after {
  border: 0;
}
.family-tree-vertical li a:hover+ul li::after, .family-tree-vertical li a:hover+ul li::before, .family-tree-vertical li a:hover+ul::before, .family-tree-vertical li a:hover+ul ul::before {
  border-color: #94a0b4;
}


.family-tree-horizontal ul {
  padding-top: 20px; position: relative;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.family-tree-horizontal li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.family-tree-horizontal li::before, .family-tree-horizontal li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.family-tree-horizontal li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}
.family-tree-horizontal li:only-child::after, .family-tree-horizontal li:only-child::before {
  display: none;
}
.family-tree-horizontal li:only-child{ padding-top: 0;}
.family-tree-horizontal li:first-child::before, .family-tree-horizontal li:last-child::after{
  border: 0 none;
}
.family-tree-horizontal li:last-child::before{
  border-right: 1px solid #ccc;
}
.family-tree-horizontal li:first-child::after{
}
.family-tree-horizontal ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}
.family-tree-horizontal li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  .border-radius(5px);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.family-tree-horizontal li a:hover, .family-tree-horizontal li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.family-tree-horizontal li a:hover+ul li::after,
.family-tree-horizontal li a:hover+ul li::before,
.family-tree-horizontal li a:hover+ul::before,
.family-tree-horizontal li a:hover+ul ul::before{
  border-color:  #94a0b4;
}
//END FAMILY TREEVIEW

//BEGIN INPUT ICON
.input-icon {
  position: relative;
}

.input-icon input {
  padding-left: 33px !important;
  color: #999999;
}

.input-icon i {
  color: #999999;
  display: block;
  position: absolute;
  margin: 10px 2px 4px 10px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}

.input-icon.right input {
  padding-left: 12px !important;
  padding-right: 33px !important;
}

.input-icon.right i {
  right: 8px;
  float: right;
}

.has-success .input-icon i {
  color: #5cb85c;
}

.has-warning .input-icon i {
  color: #f0ad4e;
}

.has-error .input-icon i {
  color: #d9534f;
}
//END INPUT ICON

//BEGIN RATING
.rating {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 27px;
  color: @text-color;
  label {
    display: block;
    float: right;
    height: 17px;
    margin-top: 5px;
    padding: 0 2px;
    font-size: 17px;
    line-height: 17px;
    cursor: pointer;
    color: #ccc;
    -ms-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    .fa-star:before {
      content: "\f005";
    }
  }
}
//END RATING

//BEGIN TABLE
.table{
  thead{
    tr{
      th, td{
        border-bottom: 0;
      }
    }
  }
  &.table-sm{
    font-size: .875em;
  }
  &.table-lg{
    font-size: 1.2em;
  }
  > input[type='text']{
    font-weight: normal;
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
  }
  select{
    font-weight: normal;
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
  }
  &.table-advanced{
    thead{
      tr{
        th{
          border-bottom-width: 1px !important;
          background-color: #efefef;
        }
      }
      &.primary tr th{
        background: @brand-primary;
        color: #FFFFFF;
      }
      &.success tr th{
        background: @brand-success;
        color: #FFFFFF;
      }
      &.warning tr th{
        background: @brand-warning;
        color: #FFFFFF;
      }
      &.info tr th{
        background: @brand-info;
        color: #FFFFFF;
      }
      &.danger tr th{
        background: @brand-danger;
        color: #FFFFFF;
      }
      &.red tr th{
        background: @color-red;
        color: #FFFFFF;
      }
      &.orange tr th{
        background: @color-orange;
        color: #FFFFFF;
      }
      &.green tr th{
        background: @color-green;
        color: #FFFFFF;
      }
      &.yellow tr th{
        background: @color-yellow;
        color: #FFFFFF;
      }
      &.blue tr th{
        background: @color-blue;
        color: #FFFFFF;
      }
      &.pink tr th{
        background: @color-pink;
        color: #FFFFFF;
      }
      &.violet tr th{
        background: @color-violet;
        color: #FFFFFF;
      }
      &.grey tr th{
        background: @color-grey;
        color: #FFFFFF;
      }
      &.dark tr th{
        background: @color-dark;
        color: #FFFFFF;
      }
      &.white tr th{
        background: @color-white;
        color: @text-color;
      }
    }
    tfoot{
      tr{
        th{
          border-bottom: 0 !important;
          background: #efefef;
        }
      }
      &.primary tr th{
        background: @brand-primary;
        color: #FFFFFF;
      }
      &.success tr th{
        background: @brand-success;
        color: #FFFFFF;
      }
      &.warning tr th{
        background: @brand-warning;
        color: #FFFFFF;
      }
      &.info tr th{
        background: @brand-info;
        color: #FFFFFF;
      }
      &.danger tr th{
        background: @brand-danger;
        color: #FFFFFF;
      }
      &.red tr th{
        background: @color-red;
        color: #FFFFFF;
      }
      &.orange tr th{
        background: @color-orange;
        color: #FFFFFF;
      }
      &.green tr th{
        background: @color-green;
        color: #FFFFFF;
      }
      &.yellow tr th{
        background: @color-yellow;
        color: #FFFFFF;
      }
      &.blue tr th{
        background: @color-blue;
        color: #FFFFFF;
      }
      &.pink tr th{
        background: @color-pink;
        color: #FFFFFF;
      }
      &.violet tr th{
        background: @color-violet;
        color: #FFFFFF;
      }
      &.grey tr th{
        background: @color-grey;
        color: #FFFFFF;
      }
      &.dark tr th{
        background: @color-dark;
        color: #FFFFFF;
      }
      &.white tr th{
        background: @color-white;
        color: @text-color;
      }
    }
  }
  &.table-hover-color{
    tbody{
      tr{
        &:hover{
          td{
            &:first-child{
              border-left: 4px solid @brand-primary;
            }
          }
        }
      }
    }
  }
}
.table-actions{
  margin-bottom: 20px;
  &.bottom{
    margin-bottom: 0;
    margin-top: 20px;
  }
  .pagination{
    margin: 0;
  }
}
.fixed-header{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
  z-index: 999;
}
//END TABLE

//BEGIN HEADER BREADCRUMB PAGE
.page-header-breadcrumb{
  .border-radius(0);
}
//END HEADER BREADCRUMB PAGE

//BEGIN TIMELINE PAGE
.timeline-label{
  .border-radius(5px);
}
//END TIMELINE PAGE

//BEGIN FORM CONTROL
.form-control{
  .box-shadow(none);
  border-color: #e5e5e5;
  .border-radius(5px);
}
//END FORM CONTROL

//BEGIN LABEL TAG
label{
  font-weight: normal;
}
//BEGIN LABEL TAG

//BEGIN ALERT
.alert{
  .border-radius(5px);
}
//END ALERT

//BEGIN BREADCRUMB
.breadcrumb{
  .border-radius(5px);
}
//END BREADCRUMB

//BEGIN NAVBAR
.navbar{
  .border-radius(5px);
}
//END NAVBAR

//BEGIN THUMBNAIL
.thumbnail{
  .border-radius(5px);
  .border-color();
}
//END THUMBNAIL

//BEGIN TOOLTIP
.tooltip{
  .tooltip-inner{
    .border-radius(5px);
  }
}
//END TOOLTIP

//BEGIN POPOVER
.popover{
  .border-radius(5px);
  .box-shadow(none);
  .border-color();
  &.left{
    .arrow{
      border-left-color: #e5e5e5;
    }
  }
  &.right{
    .arrow{
      border-right-color: #e5e5e5;
    }
  }
  &.top{
    .arrow{
      border-top-color: #e5e5e5;
    }
  }
  &.bottom{
    .arrow{
      border-bottom-color: #e5e5e5;
      top: -14px;
    }
  }
}
//END POPOVER

//BEGIN WELL
.well{
  .border-radius(5px);
  .box-shadow(none);
  .border-color();
}
//END WELL

//BEGIN TO-DO-LIST
ul.todo-list{
  li{
    .border-radius(5px);
  }
}
//END TO-DO-LIST

//BEGIN CHAT FORM
ul.chats li.in .message{
  .border-radius(5px);
}
ul.chats li.out .message{
  .border-radius(5px);
}
//END CHAT FORM

//BEGIN CKEDITOR
.cke_chrome{
  .box-shadow(none);
  .cke_top{
    .box-shadow(none);
    background-image: none;
  }
  .cke_bottom{
    .box-shadow(none);
    background-image: none;
  }
  .cke_combo_button,.cke_toolgroup{
    border-color: #e5e5e5;
    .border-radius(5px);
    .box-shadow(none);
    background-image: none;
    &:hover,
    &:focus{
      background-image: none;
    }
  }
  a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus{
    background-image: none;
  }
}
//END CKEDITOR

//BEGIN MARKDOWN
.md-editor{
  > textarea{
    .border-radius(0);
  }
}
//END MARKDOWN

//BEGIN JQUERY TOASTR
#toast-container{
  > :hover{
    .box-shadow(none);
  }
  div{
    .border-radius(5px);
    .box-shadow(none);
  }
}

//END JQUERY TOASTR

//BEGIN JQUERY BOOTSTRAP SWITCH
.has-switch{
  .border-radius(5px);
  border: 0;
  span.switch-left, span.switch-right, label{
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    border: 0;
    &.switch-primary{
      text-shadow: none;
      box-shadow: none;
      background-image: none;
      background: @brand-primary !important;
    }
  }
  .switch-left{
    .border-left-radius(5px);
  }
  .switch-right{
    .border-right-radius(5px);
  }
  .switch-on{
    label{
      .border-right-radius(5px);
      background-color: #e5e5e5;
    }
  }
  .switch-off{
    label{
      .border-left-radius(5px);
      background-color: #e5e5e5;
    }
  }
}
//END JQUERY BOOOTSTRAP SWITCH

//BEGIN JQUERY SLIMSCROLL
.slimScrollBar{
  .border-radius(5px);
}
//END JQUERY SLIMSCROLL

//BEGIN JQUERY CLOCKFACE TIME PICKER
.clockface .outer, .clockface .inner{
  .border-radius(5px);
}
.clockface .inner.active, .clockface .inner.active:hover, .clockface .outer.active, .clockface .outer.active:hover{
  text-shadow: none;
  background-image: none;
}
.clockface .inner.active:hover, .clockface .inner.active:hover:hover, .clockface .inner.active:active, .clockface .inner.active:hover:active, .clockface .inner.active.active, .clockface .inner.active:hover.active, .clockface .inner.active.disabled, .clockface .inner.active:hover.disabled, .clockface .inner.active[disabled], .clockface .inner.active:hover[disabled]{
  background: @brand-primary;
}
.clockface .outer.active:hover, .clockface .outer.active:hover:hover, .clockface .outer.active:active, .clockface .outer.active:hover:active, .clockface .outer.active.active, .clockface .outer.active:hover.active, .clockface .outer.active.disabled, .clockface .outer.active:hover.disabled, .clockface .outer.active[disabled], .clockface .outer.active:hover[disabled]{
  background: @brand-success;
}
//END JQUERY CLOCKFACE TIME PICKER

//BEGIN DATETIME PICKER
.bootstrap-datetimepicker-widget td span{
  height: auto;
  line-height: normal;
  .border-radius(5px);
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{
  background-image: none;
  .border-radius(5px);
}
.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th{
  .border-radius(5px);
}
//END DATETIME PICKER

//BEGIN DATEPICKER
.datepicker td, .datepicker th{
  .border-radius(5px);
}
.datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover{
  background-image: none;
  text-shadow: none;
}
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover{
  background-image: none;
  text-shadow: none;
}
.datepicker table tr td span{
  .border-radius(5px);
}
.datepicker{
  .border-radius(5px);
}
//END DATEPICKER

//BEGIN DATERANGEPICKER
.daterangepicker .ranges li{
  .border-radius(5px);
  color: @text-color;
}
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover{
  background: @brand-primary;
  border: 1px solid @brand-primary;
}
.daterangepicker .ranges .input-mini, .daterangepicker td, .daterangepicker th, .daterangepicker .calendar-date{
  .border-radius(5px);
}
//END DATERANGEPICKER

//BEGIN FULLCALENDAR
.fc-state-default{
  .box-shadow(none);
  background-image: none;
  .border-radius(5px);
  border: 1px solid #e5e5e5;
  text-shadow: none;
  color: @text-color;
}
//END FULLCALENDAR

//BEGIN PAGE SIGNIN SIGNUP LOCKSCREEN
.page-form{
  .border-radius(5px);
  .header-content{
    .border-radius(5px);
  }
}
//END PAGE SIGNIN SIGNUP LOCKSCREEN

//BEGIN MEDIA
.media{
  img.media-object{
    .border-radius(50%);
  }
}
//END MEDIA

//BEGIN NESTABLE LIST
.dd{
  .dd-list{
    .dd-item{
      .dd-handle, .dd3-content{
        .border-radius(5px);
        .border-color();
        &.dd3-handle{
          .border-right-radius(0);
        }
      }
    }
  }
}
//END NESTABLE LIST

//BEGIN JQUERY NOTIFIC8 NOTIFICATION
.jquery-notific8-notification{
  .border-radius(5px);
}
//END JQUERY NOTIFIC8 NOTIFICATION

//BEGIN JQUERY STEP
.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active{
  padding: 0.5em 1em;
  .border-radius(5px);
}
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{
  .border-radius(5px);
}
//END JQUERY STEP

//BEGIN THEME SETTING
#theme-setting{
  .btn-theme-setting{
    .border-left-radius(10px);
  }
  .content-theme-setting {
    ul#list-color {
      li {
        .border-radius(5px);
      }
    }
  }
}
//END THEME SETTING

// START PAGE TIMELINE
ul.nav.nav-tabs li a{
  border-radius: 4px !important;
}
#responsive {
  .timeline-panel {
    .border-radius(7px);
  }
}
#one-column {
  .message-item:after {
    .border-radius(50%);
  }
  .message-inner {
    .border-radius(5px);
  }
  .avatar img {
    .border-radius(50%);
  }
}
// END PAGE TIMELINE
// START DATAGRID PAGE 
.jplist-panel .jplist-pagination button{
    border: 1px solid #e5e5e5;
    .border-radius(7px);
    &:hover {
      background: #e5e5e5;
    }
}
.jplist-thumbs-view .list-item .block {
  bottom: 10px;
}
.jplist-panel .jplist-group {
  .border-radius(4px);
  border: 1px solid #e5e5e5;
}
// END DATAGRID  PAGE