.modal-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: @zeModal;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.7);
  opacity: 0;
  overflow-y: auto;
  .transition(opacity 500ms);

  &.active {
    opacity: 1;
    .transition(opacity 250ms);

  }
}

.modal-window {
  position: relative;
  z-index: 99;
  .modal-content {
    .borderBox();
    .borderRadius(7px);
    position: relative;
    border: 1px solid #cccccc;
    background-color: #fafafa;
    width: 400px;
    margin: 75px auto;
    button.close {
      position: absolute;
      right: 20px;
      top: 10px;
      font-size: 28px;
      color: @black;
      cursor: pointer;
      background: transparent;
      border: none;
      .transition(all 250ms);
      &:hover {
        color: @dashboardMedGreen;
      }
    }
    .settings-button {
      .borderBox();
      position: absolute;
      right: 50px;
      top: 24px;
      width: 30px;
      height: 26px;
      text-align: center;
      >span {
        font-size: 24px;
        color: @medGray;
      }
      .popover {
        @popoverWidth: 225px;
        .borderBox();
        .borderRadius(5px);
        .transition(height 150ms);
        color: @darkGray;
        height: 0px;
        overflow: hidden;
        z-index: 0;
        text-align: left;
        position: absolute;
        width: @popoverWidth;
        left: 0px;
        top: 100%;
        background-color: @white;
        padding: 0px 10px;
        border: 1px solid transparent;
        >div {
          opacity: 0;
          .transition(opacity 100ms);
        }
        div.checkbox-section {
          .label {
            font-size: 12px;
            .cacheing-toggle {
              margin-right: 5px;
              color: @medBlue;
              cursor: pointer;
              font-size: 14px;
              &.fa-square {
                opacity: 0.6;
              }
            }
          }
        }
        div.form-field-section {
          padding-top: 15px;
          border-top: 1px solid lighten(@medGray, 25%);
          margin-top: 15px;
          margin-bottom: 5px;
          input {
            width: @popoverWidth - 50;
          }
          label {
            display: block;
            margin-bottom: 10px;
            font-size: 14px;
            padding-left: 1px;
          }
          span.unit {
            display: inline-block;
            margin-left: 3px;
            color: @medGray;
          }
        }
        &.open {
          height: 42px;
          padding: 10px;
          z-index: 100;
          border: 1px solid lighten(@medGray, 10%);
          >div {
            opacity: 1;
          }
          &.form-visible {
            height: 133px;
          }
        }
      }
    }
    &#edit-profile {
      width: 550px;
      .modal-inner {
        .clearfix();
        .column {
          .borderBox();
          float: left;
          &.left-column {
            width: 30%;
            padding-right: 15px;
            .avatar {
              .borderBox();
              .borderRadius(5px);
              width: 100%;
              margin-bottom: 10px;
            }
            p {
              text-align: center;
              color: @medGray;
              font-size: 12px;
              >i {
                margin-right: 3px;
                color: lighten(@medGray, 10%);
              }
              a {
                .transition(all 250ms);
                color: @dashboardMedGreen;
                text-decoration: underline;
                &:hover {
                  color: darken(@dashboardMedGreen, 10%);
                }
              }
            }
          }
          &.right-column {
            width: 70%;
            padding-left: 15px;
          }
        }
      }
    }
  }
  &.big-modal {
    width: 800px;
    .placed-machine-detail li [r-editor] {
      width: 610px;
      margin-left: 25px;
    }
  }
}

.modal-content {
  // padding: 25px 50px;

  h2 {
    .borderBox();
    .detailedBorderRadius(7px, 7px, 0px, 0px);
    padding: 25px 50px;
    background-color: @white;
    font-size: 16px;
    border-bottom: 1px solid #cccccc;
    font-weight: 700;
    .machine-icon {
      .borderRadius(3px);
      height: 34px;
      display: inline-block;
      position: relative;
      top: 8px;
      margin-right: 5px;
    }
  }
  .modal-inner {
    padding: 25px 50px;
    font-size: 13px;
  }

  .form-section {
    margin-bottom: 20px;
    label {
      .label();
      margin-bottom: 5px;
    }
    input, >textarea {
      .input();
      display: block;
      width: 100%;
    }
    >textarea {
      height: 100px;
    }
  }

  .pro-tip {
    .borderRadius(5px);
    padding: 15px;
    background-color: #f1f1f1;
    border: 1px solid #cccccc;
    >span {
      color: @dashboardMedGreen;
    }
  }

  .machine-info {
    .borderRadius(5px);
    padding: 15px;
    background-color: #f1f1f1;
    border: 1px solid #cccccc;
    font-size: 15px;
    line-height: 18px;
    .machine-name {
      color: @dashboardMedGreen;
      font-size: 16px;
      margin-bottom: 5px;
      position: relative;
      top: -3px;
      .machine-icon {
        .borderBox();
        width: 18px;
        height: 18px;
        display: inline-block;
        position: relative;
        top: 3px;
        margin-right: 6px;
        img {
          width: 100%;
        }
      }
    }
    p {
      font-size: 14px;
    }
  }

  .delete-header {
    text-align: center;
    font-size: 24px;
    color: @dashboardMedRed;
  }


  .error-message {
    margin-top: 20px;
    color: @dashboardMedRed;
    margin-bottom: 25px;
    text-align: center;
    .icon {
      margin-right: 5px;
    }
  }

  .buttons {
    .clearfix();
    .detailedBorderRadius(0px, 0px, 7px, 7px);
    padding: 25px 50px;
    background: @white;
    border-top: 1px solid #cccccc;
    button {
      .borderBox();
      .transition(all 250ms);
      cursor: pointer;
      &.cancel {
        .textButton();
        float: right;
        &.disabled {
          opacity: 0.5;
        }
      }
    }
    .save >button, button.save{
      .smRectangularButton();
      width: 135px;
      display: block;
      float: right;
      .loader {
        margin-top: 3px;
      }
    }
  }

  &.delete-modal {
    h2 {
      color: @dashboardMedRed;
    }
    .modal-inner {
      text-align: center;
      .warning-icon {
        width: 40px;
        margin: 0 auto 20px;
      }
      h3 {
        font-weight: 700;
        margin-bottom: 10px;
        span {
          text-transform: uppercase;
        }
      }
      label {
        display: block;
        font-size: 16px;
        margin-bottom: 20px;
        color: @medGray;
        >i {
          font-size: 20px;
          margin-right: 5px;
          position: relative;
          top: 2px;
        }
        &.error {
          color: @dashboardMedRed;
        }
      }
    }
    .delete >button, button.delete {
      .smRectangularButton(@dashboardMedRed);
      width: 135px;
      display: block;
      float: right;
      .loader {
        margin-top: 3px;
      }
    }
  }
}