//@import "sln-bootstrap.less";
//#sln-salon {
//  @import (less) url("../css/bootstrap.css");
//}
@import "datetimepicker.less";
@import "dropdowns.less";
@import "settings-mixins.less";
@import "sln-glyphicons.less";
.datetimepicker.sln-datetimepicker {
  font-family: @font-family;
  td, th, table tr td span {
    border-radius: 0;
    padding: 3px 5px;
  }
}

.datetimepicker.sln-datetimepicker {
  max-width: 590px;
  table {border-top: none;}
  .sln-datetimepicker-close {
    display: block;
    width: 100%;
    height: 40px;
    background-color: @ca-red;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: @color-white;
    cursor: pointer;
    font-style: normal;
    margin: 20px 0 10px 0;
    &:hover {background-color: @ca-red-h;}
  }
  @media @phone {
      //position: fixed !important;
      //top: 0 !important;
      left: 0 !important;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin-top: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    .sln-datetimepicker-close {
      height: 60px;
      line-height: 60px;
    }
  }
  @media @tablet-max-port  {
      //position: fixed;
      //top: 0 !important;
      left: 0 !important;
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 200px;
  }
}
.datetimepicker.sln-datetimepicker table tr td.today,
.datetimepicker.sln-datetimepicker table tr td.today:hover,
.datetimepicker.sln-datetimepicker table tr td.today.disabled,
.datetimepicker.sln-datetimepicker table tr td.today.disabled:hover,
.datetimepicker.sln-datetimepicker table tr td.active, 
.datetimepicker.sln-datetimepicker table tr td.active:hover,
.datetimepicker.sln-datetimepicker table tr td.active.disabled,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover,
.datetimepicker.sln-datetimepicker table tr td span.active,
.datetimepicker.sln-datetimepicker table tr td span.active:hover,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover {
  background-image: none;
  border: none;
  text-shadow: none;
}
.datetimepicker.sln-datetimepicker table tr td.active:hover,
.datetimepicker.sln-datetimepicker table tr td.active:hover:hover,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover:hover,
.datetimepicker.sln-datetimepicker table tr td.active:active,
.datetimepicker.sln-datetimepicker table tr td.active:hover:active,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:active,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker.sln-datetimepicker table tr td.active.active,
.datetimepicker.sln-datetimepicker table tr td.active:hover.active,
.datetimepicker.sln-datetimepicker table tr td.active.disabled.active,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover.active,
.datetimepicker.sln-datetimepicker table tr td.active.disabled,
.datetimepicker.sln-datetimepicker table tr td.active:hover.disabled,
.datetimepicker.sln-datetimepicker table tr td.active.disabled.disabled,
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover.disabled,
.datetimepicker.sln-datetimepicker table tr td.active[disabled],
.datetimepicker.sln-datetimepicker table tr td.active:hover[disabled],
.datetimepicker.sln-datetimepicker table tr td.active.disabled[disabled],
.datetimepicker.sln-datetimepicker table tr td.active.disabled:hover[disabled],
.datetimepicker.sln-datetimepicker table tr td span.active:hover,
.datetimepicker.sln-datetimepicker table tr td span.active:hover:hover,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover:hover,
.datetimepicker.sln-datetimepicker table tr td span.active:active,
.datetimepicker.sln-datetimepicker table tr td span.active:hover:active,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:active,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker.sln-datetimepicker table tr td span.active.active,
.datetimepicker.sln-datetimepicker table tr td span.active:hover.active,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled.active,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover.active,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled,
.datetimepicker.sln-datetimepicker table tr td span.active:hover.disabled,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled.disabled,
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover.disabled,
.datetimepicker.sln-datetimepicker table tr td span.active[disabled],
.datetimepicker.sln-datetimepicker table tr td span.active:hover[disabled],
.datetimepicker.sln-datetimepicker table tr td span.active.disabled[disabled],
.datetimepicker.sln-datetimepicker table tr td span.active.disabled:hover[disabled] {
  background-color: @color-high;
}
.datetimepicker.sln-datetimepicker table tr td.day:not(.disabled),
.datetimepicker.sln-datetimepicker table tr td span.hour:not(.disabled):not(.active),
.datetimepicker.sln-datetimepicker table tr td span.minute:not(.disabled):not(.active) {
  color: #33CC33;
  //background-color: #D6FDD6;
  &:hover {
    color: @color-white;
    background-color: #33CC33;
  }
}

.datetimepicker.sln-datetimepicker table tr td span.hour.red:not(.disabled):not(.active),
.datetimepicker.sln-datetimepicker table tr td span.minute.red:not(.disabled):not(.active),
.datetimepicker.sln-datetimepicker table tr td.day.red:not(.disabled),
.select2-results__option.red {
    color: red !important;
}

.datetimepicker.sln-datetimepicker table tr td span.hour.red:not(.disabled):not(.active):hover,
.datetimepicker.sln-datetimepicker table tr td span.minute.red:not(.disabled):not(.active):hover,
.datetimepicker.sln-datetimepicker table tr td.day.red:not(.disabled):hover,
.select2-results__option.red:hover {
    color: white !important;
    background-color: red !important;
}

.datetimepicker.sln-datetimepicker table tr td.day,
.datetimepicker.sln-datetimepicker table tr td span.hour,
.datetimepicker.sln-datetimepicker table tr td span.minute {
    @media @phone {
      background: #eee;
      font-size: 1.4em;
      border: 2px solid @color-white;
      text-align: center;
      padding: 0;
    }
    @media @tablet-max-port {
      background: #eee;
      font-size: 1.4em;
      border: 2px solid @color-white;
      text-align: center;
      padding: 0;
    }
}

.datetimepicker.sln-datetimepicker table tr td.day{
    @media @phone {
      width: 60px !important;
      height: 60px;
      line-height: 60px;
    }
    @media @tablet-max-port {
      width: 60px !important;
      height: 60px;
      line-height: 60px;
    }
}
.datetimepicker.sln-datetimepicker table tr td span.hour,
.datetimepicker.sln-datetimepicker table tr td span.minute {
    @media @phone {
      width: 25% !important;
      height: 60px;
      line-height: 60px;
      margin: 0;
    }
    @media @tablet-max-port {
      width: 25% !important;
      height: 60px;
      line-height: 60px;
      margin: 0;
    }
}


.sln_datepicker #sln_date.form-control[readonly],
.sln_timepicker #sln_time.form-control[readonly] {cursor: pointer;}

#sln-salon {
  background: @color-bg;
  border: 1px solid @bg-contrast-high;
  padding: 0;
  font-family: @font-family;
  p li, a div, input {
    font-family: @font-family;
  }
  > div {
    border: 1px solid @color-white;
    padding: 1.6em 2em;
    @media @phone {
      padding: 1em .8em;
    }
  }
  .sln-service-list {
    // evito che al click per spuntare la checkbox venga evidenziato il testo come selezionato
    ::selection {
      background: transparent;
    }
    ::-moz-selection {
      background: transparent;
    }
    label {
      padding-top: 10px;
      width: 100%;
      font-weight: normal;
      cursor: pointer;
    }
    .service-name {
      color: @color-high;
      font-size: 1.2em;
      font-weight: normal;
      display: block !important;
      border-bottom: 1px dashed #ccc;
      padding-bottom: .2em;
      margin: -10px 0 .2em 0;
      @media @phone {
        border-bottom: none;
        margin: -10px 0 0 0;
      }
    }
    .salon-step-services {
      border: 2px solid red;
    }
    .service-description,
    .service-duration {
      color: @color-mid;
      font-size: .8em;
      display: block;
      clear: both;
      @media @phone {
        font-size: 1em;
      }
    }
    .service-price {
      font-size: 1em;
      font-weight: bold;
      padding-top: .2em;
    }
  }
  .services-total {
    text-align: right;
  }
  .services-total-label.col-xs-6, .services-total.col-xs-6 {width: 50%; padding-right: 15px;}
  .service-checkbox input {
    min-width: 16px !important;
    min-height: 16px !important;
  }
  h1 {
    color: #333;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;
    margin: 1em 0 2em 0;
    @media @phone {
      position: relative;
      margin-top: 2em;
      margin-bottom: 0;
    }
    .icocal {
      margin-left: 30px;
      margin-top: 0px;
      position: absolute;
      display: inline-block;
      @media @phone {
        margin-left: 0;
        top: -2em;
        left: 45%;
      }
    }
  }
  h2 {
    font-size: 1.3em;
    font-weight: normal;
    margin: 1em 0 2em 0;
    text-transform: none;
    em {
      display: block;
      clear: both;
      color: @color-low;
      font-size: 0.68em;
      font-style: normal;
    }
    @media @phone {
      margin-top: 1.6em;
    }
  }
  .row-total {
    border-top: 7px solid @bg-high;
    font-weight: bold;
    font-size: 1.2em;
    padding-top: 1.4em;
    margin: 2em 0;
    @media @phone {
      margin: 0 -.8em;
      padding-top: 1em;
    }
  }
  .sln-service-list .row.row-total {
    @media @tablet-max-port {
      .col-xs-4, .col-xs-8 {
        padding-left: 0;
        padding-right: 0;
      }
      .col-xs-4 {
        width: 8%;
      }
      .col-xs-8 {
        width: 80%;
        padding-left: 5%;
      }
    }
    @media @phone {
      margin: 1.6em 0;
    }
  }
  .salon-bar {
    margin: 0;
    font-size: 10px;
  }
  .salon-bar li {
    background-color: #f0f0f0;
    text-transform: uppercase;
    border-radius: 3px;
    text-align: center;
  }
  .salon-bar li.active {
    background-color: #ccc;
    text-transform: uppercase;
    border-radius: 3px;
    text-align: center;
  }
  .form-group {
    margin-bottom: 2em;
    label  {
      color: @color-mid;
      font-size: 1em;
      margin-bottom: 0.5em;
      font-weight: normal;
    }
    .form-control {
      color: @color-high;
      font-size: 1em;
      line-height: 1em;
      height: auto;
      padding: .6em;
      font-family: @font-family;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
  .tec-link {
    display: inline-block;
    margin-bottom: 2em;
    padding: .8em 1em;
    background-color: #eee;
    &:hover {
      background-color: @ca-red;
      color: @color-white;
    }
  }
  .form-actions {
    margin-top: 2em;
    @media @phone {
      margin-top: 0;
    }
    > div > div {
      float: left;
    }
    a,
    a:hover,
    button {
      font-size: .8em;
      text-decoration: none;
      //font-weight: bold;
      text-transform: uppercase;
      @media @phone {
        font-size: 1em;
      }
    }

    // STRIPE BUTTON OVERRIDE
    form {display: inline-block;     margin-bottom: 1.2em;}
    .stripe-button-el {
      overflow: hidden;
      display: inline-block;
      visibility: visible !important;
      background-image: none;
      -webkit-font-smoothing: antialiased;
      border: 0;
      padding: 0;
      text-decoration: none;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      -o-border-radius: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      cursor: pointer
  }
  .stripe-button-el::-moz-focus-inner {
      border: 0;
      padding: 0
  }
  .stripe-button-el span {
      display: block;
      position: relative;
      padding: 1em 2em;
      height: auto;
      line-height: 1.2em;
      background: @ca-blue;
      background-image: none;
      font-size: 1em;
      color: @color-white;
      font-weight: bold;
      font-family: @font-family;
      text-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      -o-border-radius: 0;
      border-radius: 0;
      text-transform: none;
      white-space: nowrap;
      .trans-generic(300ms);
      &:hover {
        background-color: #357ebd;
        .zDepth-2;
      }
  }
  .stripe-button-el:not(:disabled):active,
  .stripe-button-el.active {
      background: #005d93
  }
  .stripe-button-el:not(:disabled):active span,
  .stripe-button-el.active span {
      color: #eee;
      background-image: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
  }
  .stripe-button-el:disabled,
  .stripe-button-el.disabled {
      background: rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none
  }
  .stripe-button-el:disabled span,
  .stripe-button-el.disabled span {
      color: #999;
      background: #f8f9fa;
      text-shadow: none;
  }
  // STRIPE BUTTON OVERRIDE // END
    .sln-step-num {
      display: block;
      text-align: center;
      font-size: 0.8em;
      font-weight: bold;
      color: @color-low;
      margin-top: .4em;
      @media @phone {
        font-size: .9em;
      }
    }
  }
  #salon-step-summary {
    p.dear {
      color: @color-mid;
    }
    div.summ-row {
      background: @bg-high;
      margin-bottom: 3px;
      padding: 10px 0;
      > div {
        display: table;
        table-layout: fixed;
      }
      span.label {
        font-size: .8em;
        color: @color-mid;
        display: block;
        text-align: left;
      }
      p.date {
        font-size: 1em;
        color: @color-high;
        line-height: 1.2em;
        margin: 1.8em .3em;
      }
      ul {
        margin: 0;
        padding: 0;
      }
      li {
        width: 100%;
        clear: both;
        padding: 5px;
        &:last-child {
          border-top: 1px solid @color-white;
          margin-top: 10px;
          padding-top: 10px;
        }
      }
      .service-label, .attendant-label {
        color: @color-high;
        font-size: .8em
      }
      .service-price, .total-price {
        display: block;
        float: right;
        font-weight: bold;
        color: black;
      }
      .total-label, .total-amount {
        font-size: .8em;
        font-weight: bold;
        color: black
      }
    }
  }
  .tycol {
    background: @bg-high;
    color: @color-mid;
    padding: .8em;
    height: 8em;
    border-left: .6em solid @color-bg;
    text-align: center;
    span.num {
      display: block;
      font-size: 1.6em;
      color: black;
      padding: .8em 0 0 0;
      font-weight: bold;
    }
    i {
      font-size: 2.2em;
      color: @icon-color-green;
      margin-top: .6em;
      &.c {
        color: @icon-color-yellow !important
      }
    }
    @media @tablet-port {
      border-left: none;
      border-bottom: .6em solid @color-bg;
    }
    @media @phone {
      border-left: none;
      border-bottom: .6em solid @color-bg;
    }
  }
  .ty p, p.ty {
    color: @color-mid;
    font-size: 1em;
    margin-bottom: 1em;
    @media @phone {
      margin-bottom: .8em;
    }
  }
  #salon-step-thankyou .form-actions a {
    font-size: .8em;
    text-transform: none;
    @media @phone {
      font-size: 1em;
      margin-top: 1.2em;
    }
  }
  .aligncenter {
    text-align: center;
  }
  .btn-primary, .btn-success {
    color: white !important
  }
  ul {
    list-style-type: none;
  }

}
.sln_notice {
    color: #ff000b;
    text-align: center;
  }
  .overflow-dots {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  #sln-salon-my-account {
    padding: 1.6em 10px !important;
    .btn:hover {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }

    .btn.btn-confirm:hover {
      background-color: @ca-red;
    }

    td {
      font-size: 13px !important;
    }
    .table-bordered {
      border-width: 1px;
      border: none;
      border-top: 1px solid @bg-contrast-high;
    }
    .table-striped > tbody > tr:nth-of-type(even) {
      background-color: @bg-high;
    }
    .table thead tr {
      border-bottom: 2px solid @color-high;
      color: @color-high;
    }
    .table {
      margin-bottom: 4em;
    }
    .table thead tr th {
      text-align: center;
      text-transform: uppercase;
      background-color: @color-white;
    }

    .table tbody tr td {
      color: @text-medium;
      text-align: center;
    }

    .table tbody tr td strong {
      color: @text-medium;
    }

    .table tbody tr td:nth-child(2),
    .table tbody tr td:nth-child(3) {
      text-align: left;
    }

    .table thead tr th {
      padding: 8px;
      font-size: .7em;
      border-bottom: 1px solid transparent;
    }
    .table tbody tr td {
      padding: 16px 8px;
    }

    .table tbody tr td:nth-child(2) {
      max-width: 100px;
    }

    .table tbody tr td:last-child {
      //width: 170px;
    }

    .table tbody tr td:nth-child(2),
    .table tbody tr td:last-child {
      text-transform: uppercase;
    }
    h3 {
      color: black;
      margin: 20px 0px;
    }

    .status {
      display: inline-block;
    }

    .success {
      color: @cl_ok;
    }

    .warning,
    .info {
      color: @cl_warning;
    }
    .danger {
      color: red;
    }

    button {
      border-radius: 4px !important;
      text-transform: uppercase;
    }

    .tooltip.right {
      .tooltip-inner {
        box-shadow: 1px 1px rgba(205, 205, 205,1), 2px 2px rgba(205, 205, 205,1), 3px 3px rgba(205, 205, 205,1), -1px -1px rgba(205, 205, 205,1);
        color: black;
        background-color: #ebebeb !important;
        padding: 10px;
        border: 3px;
        min-width: 100px;
        width: auto;
      }
      .tooltip-inner strong {
        color: black;
      }
      .tooltip-arrow {
        border-right-color: rgb(205, 205, 205) !important;
      }
    }
    .tooltip.top {
      .tooltip-inner {
        background-color: #919FA7 !important;
        max-width: 160px;
        text-transform: none;
        text-align: left;
      }
      .tooltip-arrow {
        border-top-color: #919FA7 !important;
      }
    }
    .tooltip.in {
      opacity: 1;
    }

    .btn {
      background-color: silver;
    }

    .btn .glyphicon {
      opacity:  1       !important;
      position: initial !important;
      top:      1px     !important;
      color:    inherit !important;
      font-size: 11px;
      vertical-align: inherit !important;
      -webkit-transition: inherit !important;
      -moz-transition: inherit !important;
      -o-transition: inherit !important;
      transition: inherit !important;
    }

    .btn {
      padding:          4px 8px 6px !important;
      font-variant:     small-caps  !important;
      text-transform:   lowercase   !important;
      color:            @color-white        !important;
      width:            auto        !important;
    }

    .sln-rate-service {
      background-color: @cl_warning     !important;
    }
    .btn {
      margin-top: 1em;
    }

    .rating {
      width:            auto;
      background-color: @bg-high;
      padding:          4px 8px 6px;
      border-radius:    3px;
      font-size:        16px;
      font-variant:     small-caps;
      text-transform:   lowercase;
      font-size:        14px;
      white-space:      nowrap;
    }

    .rating img {
      vertical-align: text-bottom;
    }

    .rating i {
      vertical-align: initial;
      font-size: 11px;
      color: red;
    }
    .sln-my-account-message {
      display: block;
      border: solid 1px @bg-contrast-high;
      min-height: 52px;
      line-height: 52px;
      padding: 0 1em;
      margin: 1em 0 0 0;
      text-transform: uppercase;
      font-size: .7em;
      color: @color-high;
    }
    &.mobile-version {
      .sln-my-account-message {
        margin: 1em 0 0 0;
      }
      > div:first-child {margin-bottom: 2em;}
      thead {
        display: none;
      }
      .table-striped > tbody > tr:nth-of-type(even) {
        background-color: @color-white;
      }
      .table tr {
        display: block;
        margin: 1em 0 2em 0;
      }
      .table tbody tr td {
        width:        100%;
        display:      block;
        text-align:   left;
        border:       none;
        padding-right: 10px;
        padding-left: 10em;
        position:     relative;
        min-height: 52px;
        border-bottom: solid 1px @bg-contrast-high;
        &:last-child {border-bottom: none;}
      }
      .table tbody tr {
        border: solid 1px @bg-contrast-high;
      }
      td:nth-child(2),
      td:last-child {
        max-width:  initial !important;
        width:      100% !important;
      }
      td:before {
        content:        attr(data-th) ": ";
        font-weight:    bold;
        text-transform: uppercase;
        color:          #0073a4;
        max-width:          10em;
        display:        inline-block;
        position:       absolute;
        left:           1em;
      }
      .status {
        margin-right: 80% !important;
      }
      .status ~ div {
        display: inline-block;
      }
       div {
        padding: 0;
      }
      .table-bordered {
        border: none;
      }
    }
    @media screen and (max-width: 767px) {
      &:extend(.mobile-version all);
      h1 .icocal {display: none;}
    }
  }
.timepicker {
  overflow: hidden;
  .datetimepicker-hours,
  .datetimepicker-minutes > table {
    //margin-top: -65px;
  }
  .datetimepicker.sln-datetimepicker {
    margin-top: 50px;
  }
}

.datetimepicker.sln-datetimepicker.timepicker {
  .datetimepicker-minutes,
  .datetimepicker-hours,
  .datetimepicker-days,
  .datetimepicker-months,
  .datetimepicker-years {
    table thead tr th {
      height: 1px;
      padding: 0;
      font-size: 1px;
      line-height: 1px;
      text-indent: -9999px;
      opacity: 0;
      pointer-events: none;
    }
  }
}

// NICO
// MIXINS
.btn-grey {
  background-color: @ca-grey;
  color: #7e7e7e;
}
.btn-dark-grey {
  background-color: @text-medium;
  color: @color-white;
}
.btn-red {
  background-color: @ca-red;
  color: @color-white;
}
// MIXINS END
#sln-salon {
  max-width: 900px;
  margin: 2em auto;
  font: normal 18px/1.4 Helvetica Neue, Arial, Helvetica, sans-serif;
  @media @phone {
    font: normal 14px/1.4 Helvetica Neue, Arial, Helvetica, sans-serif;
    margin: 2em 1em;
  }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    margin: 2em;
  }
  .row {
    margin-left: -1em;
    margin-right: -1em;
    @media @phone {
      margin-left: 0;
      margin-right: 0;
    }
  }
  #salon-step-date .row,
  #salon-step-services .row,
  #salon-step-secondary .row {
    margin-left: 0;
    margin-right: 0;
  }
  a {
    color: @ca-red;
    padding-bottom: 2px;
    border-bottom: 2px solid @color-bg;
    font-size: 17px;
    .trans-generic(300ms);
    &:hover {
      text-decoration: none;
      border-bottom: 2px solid @ca-red;
    }
  }
  a.btn {
    border-bottom: none;
  }
  .sln_datepicker, .sln_timepicker {
    position: relative;
    .form-control {
      width: 100%;
      padding: 0.8em;
      background-color: @color-white;
      border: none;
      font-family: @font-family;
      color: @color-high;
      font-size: 1.3em;
      background-repeat: no-repeat;
      background-position: right 50%;
      background-size: 80px;
      @media @phone {
        background-size: 50px;
      }
      @media @tablet {
        background-size: 80px;
      }
      &#sln_date {
        background-image: url(../img/select-icons-date.png);
      }
      &#sln_time {
        background-image: url(../img/select-icons-time.png);
      }
    }
  }
  .col-md-12 {
    @media @tablet {
      padding-left: 0;
      padding-right: 0;
    }
    @media @phone {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .col-md-12.field-address{padding: 0 15px;}
  .form-actions.row.aligncenter {
    .col-xs-6:nth-child(2) {
      width: 40%;
      @media @phone {
        width: 100%;
        margin-top: 1em;
        padding-left: 0;
      }
    }
    .col-xs-6 {
      @media @phone {
        padding-left: 0;
      }
    }
    a, button {
      font-weight: normal;
      @media @phone {
        width: 100%;
      }
    }
  }
  .sln-service-list,  .sln-attendants-list{
    .row {
      margin-bottom: 1.1em;
    }
  }
.ext-messages {
  &:after {
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      font-size: 2rem;
      color: @text-blue;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: inline-block;
      content: "\e086";
      //width: 3rem;
      //height: 3rem;
      position: absolute;
      border-radius: 50%;
      background-color: @color-white;
      text-align: center;
    }
    @media @phone {
      &:after {
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
      }
    }
    @media @tablet {
      &:after {
        font-size: 2.4rem;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
}
.ext-messages-dang {
  &:after {
      content: "\e090";
      color: @color-white;
      background-color: @ca-red;
      font-size: 1.4rem;
      padding: .3rem;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    @media @tablet {
      &:after {
        font-size: 2rem;
        padding: .4rem;
      }
    }
}
  .alert-no-spacing {
    margin: 1em 15px !important;
  }
  .alert {
    border: none;
    background-color: transparent;
    padding: 2rem 0 0 0;
    position: relative;
    color: @text-medium;
    margin: 2rem 15px;
    font-style: italic;
    font-size: 1em;
    .ext-messages;
    ul {
      padding-left: 0;
    }
    &.alert-danger {
      .ext-messages-dang;
    }
    &.ty {
      .ext-messages;
      margin: 2rem 15px;
    }
    @media @tablet {
      padding: 0 0 0 4rem;
      margin: 4rem 15px;
    }
  }

#sln-notifications {
  .alert {
    .ext-messages;
    .ext-messages-dang;
  }
}
  #salon-step-summary p.dear {
    margin-bottom: 1.4em;
  }
  // BUTTONS
  .btn {
    padding: 1em 2em;
    border-radius: 0;
    border: none;
    position: relative;
    .trans-generic(300ms);
    .glyphicon {
      opacity: 0;
      position: absolute;
      top: 1.1em;
      .trans-generic(150ms);
    }
    &:hover {
      .zDepth-2;
    }
    &.btn-default {
      .btn-grey;
      padding: 1em 2em;
      .glyphicon {
        top: 1.2em;
        left: .5em;
        color: @color-white;
      }
      &:hover {
        .btn-dark-grey;
        .glyphicon {
          opacity: 1;
        }
      }
    }
    &.btn-confirm {
      .btn-red;
      .glyphicon {
        right: 1em;
      }
      &:hover {
        background-color: @ca-red-h;
        .glyphicon {
          opacity: 1;
        }
      }
    }
  }
  button.btn {
    width: 100%;
  }
  .col-xs-6 {
    width: 40%;
    padding-right: 0;
    div {
      width: 100%
    }
  }
  a, button {
    font-weight: normal;
  }
  .btn.btn-success.btn-block {
    margin-bottom: 4em;
  }
  // BUTTONS END
  #salon-step-summary div.summ-row {
    position: relative;
    .col-md-5 {
      .vertical-centering;
    }
    .col-md-7 {
      float: right;
    }
    .col-md-5, .col-md-7 {
      padding-left: 2em;
      padding-right: 2em;
    }
    span.label {
      margin-top: 0;
    }
    @media @tablet {
      .col-md-7 {
        width: 58.333333333333336%;
      }
    }
    @media @phone {
      margin-right: -.81em;
      margin-left: -.81em;
      margin-bottom: 6px;
      .col-md-5, .col-md-7 {
        width: 100%;
        position: relative;
        top: auto;
        padding-left: 1em;
        padding-right: 1em;
      }
      span.label {
        display: block;
        padding-top: 2em;
        font-size: 1em;
      }
      p.date {
        font-size: 1.4em;
        margin: 0 0 .5em 0;
      }
      .service-label, .total-label {
        font-size: 1em;
      }
      li {
        padding: .1em 0;
      }
    }
  }
  #salon-step-summary div.row:not(.summ-row):not(.aligncenter) {
    @media @phone {
      margin: 1em 0;
    }
  }
  #salon-step-thankyou {
    .row {
      margin-left: -.5em;
      margin-right: -.5em;
    }
    .row:nth-child(2) {
      margin-bottom: 1em;
    }
  }
  .sln-service-list {
    @media @phone {
      .col-xs-1, .col-xs-7 {
        padding-left: 0;
        padding-right: 0;
      }
      .col-xs-1 {
        width: 8%;
      }
      .col-xs-8 {
        width: 90%;
        padding-left: 5%;
      }
      .col-xs-3.service-price {
        width: 80%;
        margin-left: 13%;
        border-top: 1px dashed #ccc;
        padding-top: .5em;
        padding-left: 0;
        padding-right: 0;
        margin-top: .5em;
      }
    }
    @media @tablet-max-port {
      .col-xs-1, .col-xs-7 {
        padding-left: 0;
        padding-right: 0;
      }
      .col-xs-1 {
        width: 8%;
      }
      .col-xs-7 {
        //width: 70%;
        padding-left: 5%;
      }
      .col-xs-4.service-price {
        //width: 20%;
        padding-right: 0;
        text-align: right;
      }
    }
  }
  h1:nth-child(2) {
    font-size: 1.3em;
    font-weight: normal;
    text-align: left;
    text-transform: none;
    @media @phone {
      margin-bottom: 1em;
      margin-top: 1em;
    }
  }
  // CHECKBOXES
  .service-checkbox {
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    position: relative;
    background-image: url(../img/checkboxes-bkg.png);
    background-size: auto 100%;
    background-position: 0 0;
    .trans-generic(50ms);
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: url(../img/checkboxes-bkg.png);
      background-position: -50px 0;
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      -moz-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      pointer-events: none;
    }
    &:hover:after {
      opacity: 1;
    }
    &.is-checked:after {
      background-position: -100px 0;
      opacity: 1;
      pointer-events: none;
    }
    input {
      cursor: pointer;
      width: 30px;
      height: 30px;
      margin: 0;
      opacity: 0;
    }
  }
  // CHECKBOXES

// RADIOBOXES
.attendant-radio {
 @media @phone{
  margin: 0 auto 1em auto;
 } 
  display: block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
  background-image: url(../img/radioselect-bkg.png);
  background-size: auto 100%;
  background-position: 0 0;
  .trans-generic(50ms);
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(../img/radioselect-bkg.png);
    background-position: -50px 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    pointer-events: none;
  }
  &:hover:after {
    opacity: 1;
  }
  &.is-checked:after {
    background-position: -100px 0;
    opacity: 1;
    pointer-events: none;
  }
  input {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0;
    opacity: 0;
  }
}
// THUMB ATTENDANTS
.attendant_thumb {
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    @media @phone {
       margin: 0 auto 1em auto;
    }
img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}
}
.sln-attendant-list {
  .attendant-description{
    display: inline-block;
    font-style: italic;
    font-size: 1em;
    font-weight: normal;
  }
  .row{margin: 1.5em 0 0 0;}
@media @phone {
  label {
        text-align: center;
        width: 100%;
       }
      }
  }
.form-control.sln-invalid{
  border: 2px solid red;
  background-color: white;
}
#sln-notifications {
    color: #ff0000;
    font-size: 1em;
}

// SERVICS PANELS
.panel.panel-salon {
  background-color: transparent;
  border: none;
  margin-bottom: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  .panel-heading {
    border: none;
    padding: 0;
    margin: 0;
    a {
      display: block;
      position: relative;
      color: @color-high;
      font-size: 1em;
      line-height: 1em;
      font-weight: normal;
      text-transform: uppercase;
      font-family: @font-family;
      padding: 1em 2em 1em 2.4em;
      margin-left: -.4em;
      border: 1px solid transparent;
      .icon.icon-plus {
        left: .6em;
        border: .12em solid #ccc;
        &:before, &:after {
          background-color: #ccc;
        }
        &:after {display: none;}
      }
      &.collapsed {
        .icon.icon-plus {
          border: .12em solid @ca-red;
          &:before, &:after {
            background-color: @ca-red;
          }
          &:after {display: block;}
        }
      }
      &:hover {
        //border-color: @color-high;
        background-color: #eee;
        .icon.icon-plus {
          background-color: @ca-red;
          border-color: @ca-red;
          &:before, &:after {
            background-color: @color-white;
          }
          &:before{
            .transform(rotate(-45deg));
            width: .5em;
            height: .5em;
            border-radius: 0;
            background-color: transparent !important;
            border-left: .16em solid @color-white;
            border-bottom: .16em solid @color-white;
            top: ~"calc(50% - .35em)";
            left: ~"calc(50% - .27em)";
          }
          &:after{
            opacity: 0;
          }
        }
      }
    }
  }
  .panel-collapse {
    margin: 1em 0 0 1.5em;
  }
  .icon {
    position: absolute;
    top: ~"calc(50% - .6em)";
    left: 0;
  }
}

.icon {
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      background-color: transparent;
      border-radius: 50%;
      margin: 0;
      position: relative;
      .trans-generic(100ms);
      &:before, &:after {
        display: inline-block;
        content: "";
        position: absolute;
        border-radius: 30%;
        .trans-generic(100ms);
      }
      &.icon-plus {
        border: .12em solid @ca-red;
        &:before, &:after {
          background-color: @ca-red;
        }
        &:before {
          width: .6em;
          height: .2em;
          top: ~"calc(50% - .08em)";
          left: ~"calc(50% - .3em)";
        }
        &:after {
          width: .14em;
          height: .6em;
          top: ~"calc(50% - .3em)";
          left: ~"calc(50% - .075em)";
        }
      }
    }
// SERVICS PANELS // END

// #sln-salon // END
// deve stare tutto dentro questo selettore
}


// Bootstrap Modal Dialog // Start

#sln-salon #sln-salon-my-account {

	@media (min-width: 768px) {
		.modal-dialog {
			width: 560px;
		}
	}

	.modal-dialog {
		margin: 20% auto;
	}

	.modal-header {
		border-bottom: none;
	}

	.modal-footer {
		border-top: none;
	}

	.modal-content {
		border: none;
		border-radius: 2px;
		box-shadow: 0 2px 8px rgba(150, 150, 150, 0.3);
	}

	#step1 {
		margin-top: 40px;

		p {
			margin: 0;
		}
	}

	#step2 {
		padding-top: 100px;

		p {
			margin: 0;
		}

		p:first-child {
			color: #0083C3;
		}

		p:last-child {
			margin-top: 20px;
		}
	}

	.modal-body {
	    padding: 0 50px;
	    height:  400px;

		button {

			display: block;
		    margin: 0 auto;
		    border-radius: 0 !important;
		    padding: 8px 24px !important;
			font-variant: normal !important;
			text-transform: initial !important;
			font-size: 18px;

			&.btn-primary {
			    background: #0083C3;
			    margin-top: 50px;
		    }

			&.btn-default {
				background: none;
				color: #0083C3 !important;
				text-decoration: underline;
				margin-bottom: 20px;
			}
		}

	}

	.modal {
		background-color: rgba(220, 220, 220, 0.4);

		button.close,
		button.close:hover {
		    background:    none;
		    border:        none;
		    position: relative;
		    color:         @color-white;
			opacity:       initial;
			text-shadow:   none;
			margin: 10px 20px 0 0;

			&:before {
				content: "\00d7";
				border-radius: 50%;
				background: @text-medium;
				border: none;
				width: 20px;
				height: 20px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				line-height: 16px;
				font-size: 20px;
			}
		}



		textarea {
			width: 100%;
			resize: none;
			margin: 20px 0;
			border: none;
			background: #D2E5F6;
			padding: 16px;
			color: #36AEE8;
			border-radius: 2px;
			height: 140px;

				&::-webkit-input-placeholder { color: #36AEE8; }
				&::-moz-placeholder          { color: #36AEE8; }
				&:-moz-placeholder           { color: #36AEE8; }
				&:-ms-input-placeholder      { color: #36AEE8; }
				&::placeholder               { color: #36AEE8; }
				&::input-placeholder         { color: #36AEE8; }
		}

		.rating {
			display: inline-block !important;
			background: none;

			i {
				vertical-align: bottom;
				font-size:      24px;
				color:          #0083C3;
			}

			span {
				font-size: .9em;
			}
		}

	}

}

// Bootstrap Modal Dialog // Start