:root {
  --main-color: #17a2b8;
}

.text-main {
  color: var(--main-color);
}

body {
  background-color: #24353f;
  font-family: "Titillium Web", sans-serif;

}

/** Bootstrap Overrides  */

.form-control {
  background-color: #24353f;
}

.form-control:focus {
  background-color: #24353f;
}

.form-floating>.form-control:focus~label::after {
  background-color: #24353f;
  color: white;
}

.form-floating>.form-control:focus~label {
  color: white !important;
}

.form-floating>.form-control:focus {
  color: white;
}

.btn-outline-main {
  --bs-btn-color: #17a2b8;
  --bs-btn-border-color: #17a2b8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #17a2b8;
  --bs-btn-hover-border-color: #17a2b8;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #17a2b8;
  --bs-btn-active-border-color: #17a2b8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #17a2b8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #17a2b8;
  --bs-gradient: none;
}
.reg{
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
}
.reg:hover{
  border-bottom: 1px solid #17a2b8;

}

/** form  */

.myForm{
  box-shadow: -5px 2px 54px -9px rgba(0, 0, 0, 1);

}