File Manager

@import "_variables";

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: 0;

  &:focus {
    outline: none;
  }

  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

html {
  scroll-behavior: auto;
}

body .amelia-app-booking,
html .amelia-app-booking {
  font-size: @regular-fs;
}

.amelia-app-booking #amelia-booking-wrap, #am-modal.am-modal.am-in-body {

  font-family: @font;

  //Font family
  h1, h2, h3, h4, p, span, div, section, ul, li, a {
    font-family: @font;
  }

  h1 {
    font-size: @h1-fs;
    line-height: @h1-lh;
    font-weight: @h1-fw;
    color: @h1-color;
    margin: 0;
  }

  h2 {
    font-size: @h2-fs;
    line-height: @h2-lh;
    font-weight: @h2-fw;
    color: @h2-color;
    margin: 0;

    &:before {
      display: none !important;
    }
  }

  h3 {
    font-size: @h3-fs;
    line-height: @h3-lh;
    font-weight: @h3-fw;
    color: @h3-color;
  }

  h4 {
    font-size: @h4-fs;
    line-height: @h4-lh;
    font-weight: @h4-fw;
    color: @h4-color;
  }

  div {
    color: @color-text-prime;
  }

  p {
    color: @color-text-prime;
    font-size: @small-fs;
  }

  a {
    color: @color-blue;
    font-size: @regular-fs;
    text-decoration: none !important;;
    box-shadow: none !important;

    &:hover {
      text-decoration: underline !important;
    }
  }

  span {
    color: @color-text-prime;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style: none;
    padding-left: 0;
    color: @color-text-prime;
  }

  a:hover {
    text-decoration: none;
  }

  //form elements
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], textarea, select, .form-control, .am-stripe-card {
    font-family: @font;
    //font-size: @small-fs;
    font-weight: @regular;
    color: @color-text-prime;
    //line-height: 1;
    width: 100%;
    height: 40px;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid @color-divider-gray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    outline: 0;
    padding: 0 @padding-medium;
    margin: 0;
    -webkit-appearance: none;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    box-shadow: none;
  }

  textarea {
    padding-top: @padding-medium - 4px;
    padding-bottom: @padding-medium - 4px;
    height: auto;
    display: block;
  }

  .el-textarea__inner {
    &:focus {
      border-color: @color-accent;
    }
  }

  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .el-dialog__headerbtn {
    font-weight: @regular;

    &:hover {
      background: transparent;
      color: #ffffff;

      .el-dialog__close {
        color: @color-accent;
      }
    }

  }

  .el-select {
    position: relative;
    width: 100%;
  }

  .el-select .el-input__inner:focus {
    border-color: @color-accent;
  }

  .el-select .el-input.is-focus .el-input__inner {
    border-color: @color-accent;
  }

  .el-input-number .el-input__inner {

  }

  .el-input-number.is-controls-right .el-input__inner {
    padding-left: 15px;
    padding-right: 50px;
  }

  .el-input--small .el-input__inner {
    height: 32px;
    min-height: 32px;
  }

  .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }

  .el-input--suffix .el-input__inner {
    padding-right: 30px;
  }

  input[type="file"].el-upload__input {
    display: none;
  }

  .el-checkbox__label {
    font-weight: @regular;
    text-transform: none;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: @color-accent;
    border-color: @color-accent;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: @color-accent;
  }

  label.el-form-item__label {
    max-width: 100%;
    margin: 0 0 @margin-small;
    padding: 0;
    font-size: 16px;
    color: @color-text-second;
    line-height: 1;
  }

  .el-input {
    &.is-disabled {
      .el-input__inner {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
  }

  .am-stripe-card {
    .StripeElement {
      padding: 11px 0 11px 0;
    }
  }

  .am-confirmation-booking {
    min-height: 500px;

    .el-form-item__content {
      max-height: 40px;
    }
  }

  .am-confirm-booking-events-list {
    min-height: unset;
  }

  //Custom Fields
  .am-custom-fields {
    margin-bottom: @margin-medium;

    .el-form-item__content {
      max-height: none !important;
    }

    .am-front-texarea {
      .el-form-item__content {
        max-height: none !important;
      }
    }

    .el-checkbox, .el-radio {
      width: 100%;
      font-size: @small-fs;
      font-weight: 400;
      line-height: 1.5;
      margin-left: 0;
    }

    .el-checkbox-group, .el-radio-group {
      display: block;
    }

    .am-text-content {
      border-radius: 4px;
      border: 1px solid @color-divider-gray;
      padding: @padding-small;
      margin-bottom: @margin-medium;

      p {
        font-size: @small-fs;
        line-height: 1.5;
      }
    }

    .el-radio__input.is-checked .el-radio__inner {
      background: @color-accent;
      border-color: @color-accent;
    }

    .el-radio__input.is-checked .el-checkbox__inner,
    .el-radio__input.is-indeterminate .el-radio__inner {
      background-color: @color-accent;
      border-color: @color-accent;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: @color-accent;
    }

    .el-radio__label, .el-checkbox__label {
      white-space: pre-line;
    }
  }

  //Error
  .am-payment-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;

    .el-alert {
      background-color: @color-red;
      color: @color-white;
      border-radius: 0;

      .el-alert__closebtn, span {
        color: @color-white;
        font-size: @small-fs;
        word-break: break-word;
      }
    }
  }
}

//out of wrapper

.time-select-item.selected:not(.disabled) {
  color: @color-accent;
}

.el-select-dropdown {
  .el-select-dropdown__item.selected {
    color: @color-accent;
  }
}

.el-select-dropdown, .el-popper {
  z-index: 2111111111 !important;
}
.am-modal {
  z-index: 2111111111 !important;
}

.am-no-services {
  box-shadow: #eaeaea 0 6px 20px 0, #eaeaea 0 5px 25px 0;
  text-align: center;
  padding: 56px;

  p, h4, h3, h2, h1 {
    margin-bottom: @margin-small;
    padding: 0;
  }

  h1 {
    font-weight: bold;
  }

  a {
    font-size: @small-fs;
  }
}