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

  .modal-body {
    padding: 0 20px 15px 20px !important;
  }
}

.modal-centered {
  .modal-content {
    padding: 40px;
  }

  .modal-dialog {
    margin-top: 250px;
  }

  .button-modal {
    margin-top: 20px;
  }
}

.modal-image {
  display: flex !important;
  align-items: center;
  padding: 0 15px;

  .modal-image-close-button {
    position: absolute;
    right: -9px;
    top: -10px;
    border: 1px solid $grey;
    border-radius: 50%;
    background-color: $white;
    height: 30px;
    padding: 4px 0 0 2px;
    cursor: pointer;

    .assembl-icon-cancel {
      &:before {
        margin: 5px;
        font-size: 20px;
      }
    }
  }

  .modal-dialog {
    margin: auto;
    width: auto !important;
  }

  .modal-content {
    img {
      max-width: 100%;
    }
  }
}

.gauge-settings-modal {
  .modal-content {
    padding: 30px 60px;
  }

  .form-group {
    flex-grow: 1;
  }

  .gauge-modal {
    .form {
      width: 75%;
      margin: 0 auto;
      padding: 10px 0;
    }

    .save-button {
      margin-top: 30px;
    }
  }

  label {
    font-family: $font-family4;
    font-size: $font-size-xs;
    margin: 0 0 5px 5px;
  }

  .form-control {
    font-size: $font-size-xs;
    padding-left: 8px;
  }
}
