:root {
  --wsool-blue: #3459f5;
  --wsool-blue-dark: #233fc5;
  --wsool-lime: #cfff45;
  --wsool-navy: #111523;
  --wsool-ink: #101322;
  --wsool-muted: #687084;
  --wsool-border: #dce1ec;
  --wsool-background: #f5f6f1;
}

html {
  direction: rtl;
  min-height: 100%;
  background: var(--wsool-background);
}

body,
button,
input,
select,
textarea {
  font-family: Tahoma, Arial, sans-serif;
}

body {
  min-height: 100vh;
  color: var(--wsool-ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(52, 89, 245, 0.12), transparent 30rem),
    var(--wsool-background);
}

a {
  color: var(--wsool-blue);
  text-decoration-color: rgba(52, 89, 245, 0.35);
}

a:hover {
  color: var(--wsool-blue-dark);
}

a[href*="listmonk.app"],
body > footer.container {
  display: none !important;
}

.container {
  width: min(550px, calc(100% - 28px));
  margin: 54px auto 18px;
}

.container.wrap {
  overflow: hidden;
  padding: 0 40px 40px;
  background: #ffffff;
  border: 1px solid var(--wsool-border);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(35, 44, 78, 0.12);
}

.header {
  margin: 0 -40px 34px;
  padding: 24px 40px 20px;
  background: var(--wsool-navy);
  border-bottom: 4px solid var(--wsool-lime);
}

.header .logo a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 700;
  text-decoration: none;
}

.header .logo a::after {
  content: "وصول";
  margin-right: 12px;
}

.header .logo img {
  width: auto;
  max-width: 132px;
  max-height: 42px;
  filter: brightness(0) invert(1);
}

h1,
h2,
h3,
h4 {
  color: var(--wsool-ink);
  font-weight: 700;
}

label {
  color: #40495d;
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  min-height: 48px;
  color: var(--wsool-ink);
  background: #fafbf7;
  border: 1px solid var(--wsool-border);
  border-radius: 12px;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--wsool-blue) !important;
  outline: 3px solid rgba(52, 89, 245, 0.14);
  outline-offset: 1px;
}

.button {
  min-height: 50px;
  padding: 12px 26px;
  color: #ffffff;
  font-weight: 700;
  background: var(--wsool-blue);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(52, 89, 245, 0.2);
}

.button:hover,
.button:focus {
  color: #ffffff;
  background: var(--wsool-blue-dark);
}

.button.button-outline {
  color: var(--wsool-blue);
  background: #ffffff;
  border-color: var(--wsool-blue);
  box-shadow: none;
}

.small {
  color: var(--wsool-muted);
}

.error {
  color: #b42318;
}

.wsool-vendor-reference {
  display: none !important;
}

@media (max-width: 600px) {
  .container {
    margin-top: 16px;
  }

  .container.wrap {
    padding: 0 22px 28px;
    border-radius: 20px;
  }

  .header {
    margin-right: -22px;
    margin-left: -22px;
    padding: 20px 22px 16px;
  }
}