﻿.login-outer {
	background: url('drop_wallpaper.jpg') no-repeat center center fixed;
	background-size: cover;
}

body {
    font-family: 'Parkinsans', Arial, sans-serif !important;
}

.logo-wrap {
    margin-bottom: 35px;
}
.form-wrap {
    margin-bottom: 35px;
}
.scMessageBar {
    margin-bottom: 10px;
}

.btn-primary {
    /*background-image: linear-gradient(to bottom, #8D509A 0%, #80498c 100%) !important;*/
    background: #80498c;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    box-shadow: none;
    padding: 7px 18px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s;
}

.btn-primary.active,
.btn-primary:hover {
    /*background-image: linear-gradient(to bottom, #003399 0%, #002f8c 100%) !important;*/
    background: #8D509A;
    color: #fff;    
    border: none;
    outline: none;
    box-shadow: none;
}

@font-face {
    font-family: 'Parkinsans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('ParkinsansRegular.woff2') format('woff2');
}

.login-box {
  position: relative; /* keep */
}

.back-to-login {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 20px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  color: #003399;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.back-to-login:hover {
  color: #80498c; /* purple on hover */
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.back-to-login:active {
  transform: translateY(0);
}

/* Icon sizing + inherits link color via currentColor */
.back-to-login__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
	fill: currentColor;

}
@media (max-width: 600px) {
  .logo-wrap {
    padding-top: 70px; /* ADDED: space for the pill button */
  }

  .back-to-login {
    top: 16px;   /* keep in the corner */
    left: 16px;
  }
}

@media (max-width: 420px) {
  .logo-wrap {
    padding-top: 78px; /* CHANGED: a bit more space on very small phones */
  }
}