:root {
  --bs-primary: #f83881;
  --bs-secondary: #6e87ee;
  --brandOrange: #fc5252;
  --brandGreen: #1fdda1;
  --brandGrey: #c0c0c0;
  --brandBlack: #0c0c0c;
  --iconBlue: #7089f0;
  --textGrey: #494949;
  --label: #999999;
  --placeholder: #363636;
  --dtGrey: #666;
}

body {
  display: flex;
  overflow: hidden;
}

.text-pink,
.active {
  color: var(--bs-primary) !important;
}

.text-blue {
  color: var(--bs-secondary);
}

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

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

.bg-blue {
  background-color: var(--bs-secondary) !important;
}

.bg-pink {
  background-color: var(--bs-primary) !important;
}

.bg-green {
  background-color: var(--brandGreen) !important;
}

.bg-orange {
  background-color: var(--brandOrange) !important;
}

.logo svg {
  width: 10.856vmax;
}

.waves {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/wave-left.webp"), url("../img/wave-right.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, right bottom;
}

.waves:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--brandBlack);
  opacity: 0.97;
}

.logo {
  display: flex;
  line-height: 1.60364vmax;
  color: #fff;
  font-weight: 300;
  align-items: center;
  letter-spacing: -0.01rem;
  font-family: 'Visby CF', sans-serif;
  font-size: 2.407291vmax;
}

label {
  font-size: 0.9375vmax;
  line-height: 1.0364vmax;
  color: var(--label);
  letter-spacing: 0.05rem;
  margin: 0 0 13px;
  margin: 0 0 0.7291vmax;
}

span.errorMessage {
  position: absolute;
  text-transform: lowercase;
  color: var(--brandOrange);
  font-size: 14px;
  letter-spacing: 0.05rem;
  padding: 2px 0 0;
}

.splash .waves {
  background-image: url("../img/waves-splash.webp");
  background-repeat: no-repeat;
  background-position: center;
}

.splash-logo {
  height: 95px;
}

span.h-scroll {
  display: block;
  height: 2.5vmax;
  overflow: scroll hidden;
  width: 100%;
  white-space: nowrap;
}

.dropdown-toggle.onlyIcon {
  padding: 0;
  border: 0;
  background: transparent;
}

.login .waves {
  background-image: url("../img/waves-login.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.login #main-content {
  max-width: 41.9791666vmax;
  border-right: 5px solid var(--iconBlue);
  padding: 5.46296vmin 3.28125vmax;
}

.logo.iconOnly img {
  width: 4.6875vmax;
}

.login #main-content {
  background: url("../img/pattern-1.png");
}

.login .input-with-icon span.icon.paswview {
  left: auto;
  right: 11px;
  cursor: pointer;
}

.login-link {
  color: #666;
  font-weight: 500;
}

a.login-link:hover {
  text-decoration: none;
  color: var(--bs-primary);
}

body.hasAnimation {
  overflow: hidden;
}

#LoginMain .waves {
  transition: all 0.3s linear 0s;
  background-image: url("../img/waves-splash.webp"), url("../img/waves-login.webp");
  background-position: left center, right -100vw center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

#LoginMain.animateBG .waves {
  background-position: left -100vw center, right 0 center;
}

#LoginMain {
  overflow: hidden;
  display: flex;
}

.login form {
  margin: auto 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
}

/* width */

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */

::-webkit-scrollbar-track {
  background: var(--brandBlack);
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

/* Track */

.blue ::-webkit-scrollbar-track {
  background: var(--bs-secondary);
}

.orange ::-webkit-scrollbar-track {
  background: var(--brandOrange);
}

.pink ::-webkit-scrollbar-track {
  background: var(--bs-primary);
}

/* Handle */

.blue ::-webkit-scrollbar-thumb {
  background: #879cf5;
}

.pink ::-webkit-scrollbar-thumb {
  background: #f893b9;
}

.orange ::-webkit-scrollbar-thumb {
  background: #f88787;
}

/* Handle on hover */

.login .input-with-icon .form-control {
  padding: 25px 45px;
  line-height: 25px;
}

.login .input-with-icon .icon.user,
.login .input-with-icon .icon.lock {
  left: 10px;
  width: 24px;
  height: 24px;
}