:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

body {
  background: rgb(230,230,230);
}

.card-register {
  max-width: 600px !important;
}

.card-signin {
  margin: 0 auto;
  max-width: 400px;
  display: flex;
  align-items: center;
  min-height: 100vh; /* more reliable than height:100% */
}

.card-signin .card-title {
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
}

.card-signin .card-body {
  width: 100%;
  margin: auto;
}

.custom-checkbox.checkbox {
  width: max-content;
  margin: 0 auto;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #E11F8F;
}

.custom-control-label::before  {
  background-color: #fff;
}

.form-signin {
  width: 100%;
}

.form-signin .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  transition: all 0.2s;
  width: 100%;
  border: 1px solid #e8e8e8;
  /* was commented with '#' (invalid); keeping the intended values */
  background-color: rgba(92, 103, 113, 0.75);
  border-color: rgba(92, 103, 113, 0);
  color: #fff;
}

/* Removed stray "#175 180 184" which broke parsing */
.form-signin .btn:hover,
.form-signin .btn:active,
.form-signin .btn:focus {
  background-color: #C2197B !important;
  border-color: #C2197B !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 103, 113, 0.50) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(102, 103, 113, 0.25) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: rgba(92, 103, 113, 0.75);
  border-color: rgba(92, 103, 113, 0.75);
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group input {
  height: auto;
  border-radius: 2rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder { color: transparent; }
.form-label-group input:-ms-input-placeholder { color: transparent; }
.form-label-group input::-ms-input-placeholder { color: transparent; }
.form-label-group input::-moz-placeholder { color: transparent; }
.form-label-group input::placeholder { color: transparent; }

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

.btn-new-cust {
  color: #fff;
  background-color: rgb(200,200,200);
}

.btn-new-cust:hover {
  color: #333;
}

.form-signin .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(102, 103, 113, 0.37);
  border-color: #111; /* button outline */
}

.message-close {
  float: right;
  background: none;
  outline: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  padding-left: 1rem;
  display: flex;
  align-items: center;
}

.message-close:focus {
  outline: none;
}

.logo {
  text-align: center;
  margin-bottom: 1rem;
}

.form-label-group input:-webkit-autofill ~ label {
  color: #777;
}

.text-danger {
  display: table;
  margin: 0 auto;
}

@supports (-ms-ime-align: auto) {
  .form-label-group > label { display: none; }
  .form-label-group input::-ms-input-placeholder { color: #777; }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label { display: none; }
  .form-label-group input:-ms-input-placeholder { color: #777; }
}



/* --- Flash / alert styling --- */
.flash-stack { margin-bottom: 1rem; }

.notification.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 44px 14px 16px;   /* extra right space for the close button */
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  line-height: 1.4;
  font-size: 0.95rem;
  animation: flashIn .18s ease-out;
  /* wrapping */
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.notification .alert-content { flex: 1; }

.notification .message-close {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: .7;
}
.notification .message-close:hover { opacity: 1; background: rgba(0,0,0,.04); }

/* Variants (match your flash categories) */
.notification.alert-danger  { background: #fdecea; border-color: #f5c2c7; color: #7f1d1d; }
.notification.alert-danger  { border-left: 6px solid #dc3545; }

.notification.alert-warning { background: #fff4e5; border-color: #ffe0b2; color: #7a3e06; }
.notification.alert-warning { border-left: 6px solid #f59e0b; }

.notification.alert-success { background: #ecfdf3; border-color: #bbf7d0; color: #064e3b; }
.notification.alert-success { border-left: 6px solid #16a34a; }

.notification.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.notification.alert-info    { border-left: 6px solid #3b82f6; }

@keyframes flashIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}