/** COLOR's DEFAULT **/
/** LOGIN - LEFT */
/** LOGIN - RIGHT */
/** DASH - SIDEBAR */
/** DASH - CONTENT */
/** DASH - RWD */
/**
FONT SYSTEM
 */
/**
COLOR SYSTEM
 */
/** Auto generate buttons, gradients */
/**
RADIUS SYSTEM
 */
/**
INDEX SYSTEM
 */
* {
  font-family: "Open Sans", sans-serif;
}

/** CONFIG */
html, body {
  min-height: 100vh;
}

/** SCREEN */
.dash_login {
  display: flex;
  flex-wrap: nowrap;
  min-height: 100vh;
}

/** LEFT */
.dash_login_left {
  flex-basis: 40%;
  background: #282f3a;
  color: #FFFFFF;
  background-size: cover;
  padding: 30px 0;
  box-shadow: 3px 0px 10px 5px #CCC;
  display: flex;
  flex-wrap: nowrap;
}

.dash_login_left_box {
  background: #282f3a;
  width: 500px;
  max-width: 90%;
  margin: auto;
  padding: 30px;
  align-items: center;
}
.dash_login_left_box .dash_login_box_headline h1 {
  font-size: 2em;
  text-align: center;
}
.dash_login_left_box .dash_login_box_headline_logo {
  color: #0A6264;
  text-align: center;
  font-size: 3em;
}
.dash_login_left_box form {
  display: block;
  margin: 30px 0;
}
.dash_login_left_box label {
  display: block;
  margin-bottom: 30px;
}
.dash_login_left_box label .field {
  font-size: 0.875em;
  display: block;
  font-weight: bold;
}
.dash_login_left_box input {
  border: none;
  border-bottom: 1px solid #FFFFFF;
  font-size: 1em;
  background: #282f3a !important;
  color: #FFFFFF;
  outline: none;
  display: block;
  width: 100%;
  padding: 10px 0;
  margin-top: 4px;
  font-weight: 300;
}
.dash_login_left_box input::-moz-placeholder {
  color: #FFFFFF;
}
.dash_login_left_box input:-ms-input-placeholder {
  color: #FFFFFF;
}
.dash_login_left_box input::-ms-input-placeholder {
  color: #FFFFFF;
}
.dash_login_left_box input::placeholder {
  color: #FFFFFF;
}
.dash_login_left_box input:not([type=radio]):not([type=checkbox]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
}
.dash_login_left_box button {
  font-size: 0.875em;
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 15px;
  border: none;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.dash_login_left_box footer {
  font-size: 0.8em;
  text-align: center;
  font-weight: 300;
}
.dash_login_left_box footer a {
  color: #FFFFFF;
  text-decoration: none;
}
.dash_login_left_box footer a:hover {
  text-decoration: underline;
}
.dash_login_left_box footer p {
  margin: 0px;
}
.dash_login_left_box footer p.dash_login_left_box_support {
  margin-top: 10px;
}
.dash_login_left_box footer p.dash_login_left_box_support a {
  text-decoration: none;
}

.dash_login_left_box select {
    border: none;
    border-bottom: 1px solid #FFFFFF;
    font-size: 1em;
    background-color: #282f3a !important;
    color: #FFFFFF;
    outline: none;
    display: block;
    width: 100%;
    padding: 10px 30px 10px 0;
    margin-top: 4px;
    font-weight: 300;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    border-radius: 0;
  }

  .dash_login_left_box select option {
    background-color: #282f3a;
    color: #FFFFFF;
  }

/** RIGHT */
.dash_login_right {
  --teal-900: #2d514a;
  --teal-700: #417169;
  --teal-500: #5a958b;
  --teal-300: #8fc7bd;
  --teal-100: #ccf2f2;
  --teal-50:  #eef9f7;
  --ink:      #1f2d2a;
  --muted:    #6b7c79;

  flex-basis: 60%;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

/* Conteúdo central */
.dash_login_right_inner {
  position: relative;
  z-index: 2;
  max-width: 520px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Mascote */
.dash_login_right .mascot-stage {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash_login_right .mascot-glow {
  position: absolute;
  inset: 12% 8% 8% 8%;
  background: radial-gradient(closest-side, rgba(94, 234, 212, .22), rgba(94, 234, 212, 0) 70%);
  filter: blur(16px);
  animation: dlr-pulse 4s ease-in-out infinite;
}
.dash_login_right .mascot {
  position: relative;
  width: 260px;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(15, 74, 68, .18));
  animation: dlr-float-mascot 4s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}
.dash_login_right .mascot-bubble {
  position: absolute;
  top: 8%;
  right: -6%;
  background: #fff;
  color: var(--teal-900);
  font-weight: 700;
  font-size: .95em;
  padding: 8px 14px;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 22px rgba(15, 74, 68, .18), 0 0 0 1px rgba(15, 74, 68, .08);
  animation: dlr-bubble 5s ease-in-out infinite;
}
@keyframes dlr-float-mascot {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-12px) rotate(1.2deg); }
}
@keyframes dlr-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.08); }
}
@keyframes dlr-bubble {
  0%, 100% { transform: translateY(0) rotate(-3deg); opacity: 1; }
  45%      { transform: translateY(-4px) rotate(2deg); opacity: 1; }
  55%      { transform: translateY(-4px) rotate(2deg); opacity: 1; }
}

/* Bloco de boas-vindas */
.dash_login_right .welcome {
  text-align: center;
}
.dash_login_right .welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
  font-size: .8em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(65, 113, 105, .18);
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.dash_login_right .welcome-dot {
  width: 8px; height: 8px;
  background: var(--teal-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(90, 149, 139, .22);
  animation: dlr-blink 1.6s ease-in-out infinite;
}
@keyframes dlr-blink {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.dash_login_right .welcome-title {
  font-size: 2.2em;
  line-height: 1.15;
  font-weight: 700;
  color: var(--teal-900);
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.dash_login_right .welcome-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--teal-700) 0%, var(--teal-500) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash_login_right .welcome-text {
  color: var(--muted);
  font-size: 1em;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 18px;
}
.dash_login_right .welcome-text strong {
  color: var(--teal-700);
  font-weight: 600;
}

.dash_login_right .welcome-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.dash_login_right .welcome-features li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(65, 113, 105, .12);
  color: var(--teal-900);
  font-weight: 500;
  font-size: .92em;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(45, 81, 74, .06);
}
.dash_login_right .welcome-features .feat-ico {
  font-size: 1.05em;
  line-height: 1;
}

/** RESPONSIVE */
@media (max-width: 66em) {
  .dash_login_right {
    display: none;
  }

  .dash_login_left {
    flex-basis: 100%;
  }
}

@media (max-width: 90em) {
  .dash_login_right { padding: 32px; }
  .dash_login_right .mascot-stage { width: 220px; height: 220px; }
  .dash_login_right .mascot { width: 200px; }
  .dash_login_right .welcome-title { font-size: 1.8em; }
}
@media (max-width: 40em) {
  .dash_login_left_box {
    width: 100%;
  }
}