div.form-centered {
      font-family: Roboto, Arial, sans-serif;
      background-color: #FFF;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /* height: 100vh; */

    }
    form {
      font-family: inherit;
    }
    form.form-default {
      background-color: #fff;
      padding: 4px;
    }
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #fff inset;
      -webkit-font-size:12px !important;
    }
    form.form-default label {
      /* display: block; */
      font-weight:500;
      margin-bottom: 8px;
      color: #333;
      cursor: pointer;
    }

    form.form-default label.label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      cursor: pointer;
    }

    form.form-default input[type="text"],
    form.form-default input[type="date"],
    form.form-default input[type="time"],
    form.form-default input[type="password"],
    form.form-default input[type="checkbox"],
    form.form-default input[type="radio"],
    form.form-default select,
    form.form-default textarea {
      width: 100%;
      padding: 8px;
      margin-bottom:6px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 12px;
      outline: 0; 

    }

    form.form-default input[type="text"]:focus,
    form.form-default input[type="date"]:focus,
    form.form-default input[type="time"]:focus,
    form.form-default input[type="password"]:focus,
    form.form-default input[type="checkbox"]:focus,
    form.form-default input[type="radio"]:focus,
    form.form-default select:focus,
    form.form-default textarea:focus {
      outline:1px solid var(--button-background-color);
    }

    form.form-default input[type="text"].auth-email {
        background-repeat: no-repeat;
        background-position: left 8px top 45%;
        padding-left:30px !important;
    }
    form.form-default input[type="text"].auth-email {
        background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23666"%3E%3Cpath d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h160q17 0 28.5 11.5T680-120q0 17-11.5 28.5T640-80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/%3E%3C/svg%3E');
    }
    form.form-default input[type="text"].auth-email:focus {
        background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23000"%3E%3Cpath d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h160q17 0 28.5 11.5T680-120q0 17-11.5 28.5T640-80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/%3E%3C/svg%3E');
    }

    form.form-default input[type="password"] {
        background-repeat: no-repeat;
        background-position: left 8px top 45%;
        padding-left:30px !important;
        
    }
    form.form-default input[type="password"] {
        background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23666"%3E%3Cpath d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/%3E%3C/svg%3E');
    }
    form.form-default input[type="password"]:focus {
        background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23000"%3E%3Cpath d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/%3E%3C/svg%3E');     
    }

    form.form-default input[type="checkbox"],
    form.form-default input[type="radio"] {
      width: 16px; /* Adjust the width as needed */
      height: 16px; /* Adjust the height as needed */
      margin-right: 4px;
      /* Fill color */
      background-color: #3498db;
      /* Border color */
      border: 1px solid #2980b9;
      cursor: pointer;
      position: relative;
      top:1px;
    }

    form.form-default input[type="checkbox"]:checked,
    form.form-default input[type="radio"]:checked {
      /* Change styles when the input is checked */
      background-color: #2ecc71;
      border-color: #27ae60;
      accent-color: #9b59b6;
    }

    form.form-default select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
      background-repeat: no-repeat;
      background-position: right 8px top 50%;
      background-color: #FFF;
      cursor: pointer;
    }

    form.form-default textarea {
      font-family: Roboto,Arial, Helvetica, sans-serif;
      resize:vertical;
      min-height:150px;
      height:auto;
      width:100%;
      font-size:12px;
      color:#333333;
    }

    form.form-default button {
      background-color: var(--button-background-color);
      color: var(--button-text-color);
      padding:8px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight:500;
      overflow: hidden;
      outline: 0;

      display:flex;
      align-items: center;

      box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);

      white-space: nowrap;
      text-decoration: none;
      vertical-align: baseline;
      text-align: center;
      margin: 0;
      width:auto;
      min-width: 64px;


    }

    form.form-default button:hover {
      background-color: var(--button-background-color--hover);
    }

    form.form-default button.warning {
      background-color: #FF0000;
      color: #FFF;
    }

    form.form-default button.warning:hover {
      background-color: #a50303;
      color: #FFF;
    }

    form.form-default button.neutral {
      background-color: #FFF;
      color: #666;
    }

    form.form-default button.neutral:hover {
      background-color: #EFEFEF;
      color: #666;
    }

    form.form-default .form-fieldset .error-message {
        color:#CC0000;
        display: none;
    }


  form.form-default .form-fieldset label {
    display: block;
    padding:6px;
    margin:0;
  }

  form.form-default .form-button {
    margin-top:8px;
  }

.button-spinner--normal {
  width: 0px;
  height: 10px;
  margin-right:0px;
}

.button-spinner--active {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: spin-effect 0.6s linear infinite;
  margin-right:6px;
}
.spinner-light {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-left-color: #24919d;
}
.spinner-dark {
  border: 3px solid rgba(255,255,255, 0.1);
  border-left-color: #33dff3;
}

@keyframes spin-effect {
  to {
    transform: rotate(360deg);
  }
}

/* 
.mk-button {

 	  outline: 0;
    padding:0px 14px;
    font-family: Roboto;
    font-size:12px;
    font-weight:500;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    border:none;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    margin: 0;
    min-width: 64px;
    border-radius: 32px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    overflow: visible;
    cursor: pointer;
    /*
    transform: translate3d(0,0,0);
    transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
    * /
} */
/* Create effect--ripple */

.button-effect--ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.button-effect--ripple:hover {
}

.button-effect--ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;

  transform: scale(10, 10);
  transition: transform .5s, opacity 1s;

  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  opacity: 0;
}

.button-effect--ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}

.error-message {
  color:#CC0000;
  display:none;
}