.btn {
  --color: #000000;
  --background-color: #d8d8d8;
  --border-color: darken(#d8d8d8, 7.5%);
  color: var(--color);
  font-family: helvetica !important;
  font-size: 11pt !important;
  background-color: var(--background-color);
  padding: 0.7rem 0.7rem;
  padding-top: 0.8rem;
  border: solid 1px var(--border-color);
  outline: none;
  position: relative;
  border-radius: 0.5rem;
  user-select: none;
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.25), 0 -0.1rem 0.5rem rgba(0, 0, 0, 0.1) inset;
  transition: box-shadow 64ms ease-out;
  -webkit-appearance:none;
}

.btn:after {
  content: "";
  background-color: #ffffff;
  width: 75%;
  height: 12.5%;
  position: absolute;
  top: 0.15rem;
  left: 12.5%;
  border-radius: 50%;
  filter: blur(0.15rem);
  transition: opacity 64ms ease-out;
}

.btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0.4rem 1rem rgba(0, 0, 0, 0.3) inset;
}
.btn:active:after {
  opacity: 0;
}

.btn-info {
  --color: #ffffff;
  --background-color: #0091ea;
  --border-color: #0079c4;
}
.btn-info:active {
  --color: #ececec;
}
.btn-success {
  --color: #ffffff;
  --background-color: #00c853;
  --border-color: #00a243;
}
.btn-success:active {
  --color: #ececec;
}
.btn-warning {
  --color: #3e2723;
  --background-color: #ffc400;
  --border-color: #d9a700;
}
.btn-warning:active {
  --color: #261815;
}
.btn-error {
  --color: #ffffff;
  --background-color: #d50000;
  --border-color: #af0000;
}
.btn-error:active {
  --color: #ececec;
}
.btn-dark {
  --color: #ffffff;
  --background-color: #303030;
  --border-color: #1d1d1d;
}
.btn-dark:active {
  --color: #ececec;
}


.btn-controls{
  --color: black;
  --background-color: lavender;
}

.btn-generate{
  --color: black;
  --background-color: #BBFFBB;
}


/* For modal dialog prompt replacement */
.modal_flat_background { background-color: #000; opacity: 0.4; }
.modal_flat_main { border: 1px solid #333; box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);  }

/* font size only */
.modal_flat_main, .modal_flat_main input, .modal_flat_main button {  font-size: 16px; }

.modal_flat_main input, .modal_flat_main button {  padding: 5px; box-sizing: border-box; }
.modal_flat_inner { padding: 30px; background: #fff; color: #000; }
.modal_flat_content { font-family:"Helvetica"; margin: 20px 0px;}
.modal_flat_input { margin: 20px 0px;}
.modal_flat_buttons { text-align:center;margin-top: 40px; }
.modal_flat_main button { background-color: #ccc; color: #000; padding: 10px 20px; border: 0px; cursor: pointer; outline: none; width: 100px;  }
.modal_flat_cancel {margin-left: 5px;}