:root {
  --max-vw: 1280px;
  --max-width: 1139px;
  --max-padding: 140px;
  --sl-input-height-large: 80px !important;
}

.btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary), .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary) {
  -webkit-appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  padding: 2em 2em;
  line-height: 1;
  border: none;
  cursor: pointer;
  --background-color: transparent;
  --color: var(--body-text-color);
  --hover-color: var(--action-color);
  color: var(--color);
  background-color: var(--background-color);
  transition: color var(--ease), background-color var(--ease);
}
.btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):active, .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):active, .btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):focus, .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):focus {
  outline: none;
  color: var(--hover-color);
  background-color: var(--hover-background);
}
.btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):not(button):not(input):not([href]), .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):not(button):not(input):not([href]) {
  opacity: 0.3;
  cursor: not-allowed;
}
.btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary) svg, .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary) svg {
  height: 1.5em;
  width: 1.5em;
  margin-right: 1.5rem;
}
@media (hover: hover) {
  .btn:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):hover, .login-form input[type=submit]:not(.btn-default):not(.btn-sm):not(.btn-xs):not(.btn-primary):hover {
    color: var(--hover-color);
    background-color: var(--hover-background);
  }
}

.btn--bordered {
  border: 2px solid var(--color);
}
.btn--square {
  border-radius: none;
}
.btn--rounded {
  border-radius: 3em;
}

input[type=submit] {
  -webkit-appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  padding: 2em 2em;
  line-height: 1;
  border: none;
  cursor: pointer;
  --background-color: transparent;
  --color: var(--body-text-color);
  --hover-color: var(--action-color);
  color: var(--color);
  background-color: var(--background-color);
  transition: color var(--ease), background-color var(--ease);
}
input[type=submit]:active, input[type=submit]:focus {
  outline: none;
  color: var(--hover-color);
  background-color: var(--hover-background);
}
input[type=submit]:not(button):not(input):not([href]) {
  opacity: 0.3;
  cursor: not-allowed;
}
input[type=submit] svg {
  height: 1.5em;
  width: 1.5em;
  margin-right: 1.5rem;
}
@media (hover: hover) {
  input[type=submit]:hover {
    color: var(--hover-color);
    background-color: var(--hover-background);
  }
}

sl-button, sl-button {
  --sl-border-radius-large: 0px;
  --sl-border-radius-medium: 0px;
  --sl-border-radius-small: 0px;
  --sl-input-border-radius-large: 0px;
  --sl-input-border-radius-medium: 0px;
  --sl-input-border-radius-small: 0px;
  --sl-color-gray-80: transparent;
  --sl-spacing-large: 40px;
  --sl-focus-ring-box-shadow:0 0 0 var(--sl-focus-ring-width) var(--secondary-color--faded-1);
  letter-spacing: 1px;
  --sl-font-weight-semibold: 700;
  --sl-input-border-width: 2px;
  --sl-color-primary-50: transparent;
  --sl-color-primary-hue: var(--secondary-color-hue);
  --sl-color-primary-saturation: var(--secondary-color-saturation);
  --sl-focus-ring-alpha: 0.3;
}
sl-button:focus-within, sl-button:focus-within {
  --sl-color-primary-50: transparent;
  --sl-color-primary-95: transparent;
  --sl-color-primary-30: var(--sl-color-gray-40);
  --sl-color-primary-70: transparent;
}
sl-button::part(label), sl-button::part(label) {
  text-transform: uppercase;
}
sl-button.square, sl-button.square {
  --sl-input-border-radius-medium: 0px;
}
sl-button sl-icon, sl-button sl-icon {
  font-size: 1.5em;
}
sl-button svg, sl-button svg {
  height: 1.2em;
  width: 1.2em;
}
sl-button[type=default], sl-button[type=default] {
  --sl-color-gray-40: var(--body-text-color);
  --sl-color-primary-40: var(--sl-color-gray-40);
  --sl-color-white: transparent;
  --sl-color-grey-80: var(--body-text-color);
  --sl-color-primary-95: transparent;
  --sl-color-primary-80: transparent;
}
@media (hover: hover) {
  sl-button[type=default].filled:hover, sl-button[type=default].filled:hover {
    opacity: 0.5;
  }
}
sl-button[type=primary], sl-button[type=primary] {
  --sl-color-gray-40: var(--primary-color);
  --sl-color-white: transparent;
  --sl-color-primary-text: var(--primary-color);
  --sl-color-primary-50: transparent;
  --sl-color-primary-60: transparent;
}
@media (hover: hover) {
  sl-button[type=primary]:hover, sl-button[type=primary]:hover {
    --sl-color-primary-text: var(--primary-color);
  }
}
sl-button[type=primary] underline, sl-button[type=primary] underline {
  background-color: var(--primary-color);
}
sl-button[type=primary]:focus-within, sl-button[type=primary]:focus-within {
  --sl-color-primary-50: var(--primary-color);
  --sl-color-primary-text: white;
}
sl-button[type=primary].filled, sl-button[type=primary].filled {
  --sl-color-primary-50: var(--primary-color);
  --sl-color-primary-60: var(--primary-color);
  --sl-color-white: var(--primary-color);
  --sl-color-gray-40: white;
  --sl-color-primary-text: white;
}
@media (hover: hover) {
  sl-button[type=primary].filled:hover, sl-button[type=primary].filled:hover {
    opacity: 0.5;
  }
}
sl-button.white, sl-button.white {
  --sl-color-gray-40: white;
  --sl-color-white: transparent;
}
sl-button.white underline, sl-button.white underline {
  background-color: var(--sl-color-gray-40);
}
sl-button.white:focus-within, sl-button.white:focus-within {
  --sl-color-primary-50: transparent;
  --sl-color-primary-95: transparent;
  --sl-color-primary-30: white;
}
sl-button.white.filled, sl-button.white.filled {
  --sl-color-gray-40: var(--body-text-color);
  --sl-color-white: white;
  --sl-color-primary-95: white;
  --sl-color-primary-80: white;
}
sl-button.white.filled:focus-within, sl-button.white.filled:focus-within {
  --sl-color-primary-50: white;
  --sl-color-primary-30: var(--body-text-color);
  --sl-color-primary-70: transparent;
}
sl-button.white.filled.red-text, sl-button.white.filled.red-text {
  --sl-color-gray-40: var(--action-color);
}
sl-button.secondary, sl-button.secondary {
  --sl-color-gray-40: var(--secondary-color);
  --sl-color-white: transparent;
}
sl-button.secondary underline, sl-button.secondary underline {
  background-color: var(--secondary-color);
}
sl-button.secondary.filled, sl-button.secondary.filled {
  --sl-color-gray-40: white;
  --sl-color-white: var(--secondary-color);
  --sl-color-primary-95: var(--secondary-color);
}
sl-button.gray, sl-button.gray {
  --sl-color-gray-40: var(--dark-gray-color);
  --sl-color-white: transparent;
}
sl-button.gray underline, sl-button.gray underline {
  background-color: var(--dark-gray-color);
}
sl-button.gray.filled, sl-button.gray.filled {
  --sl-color-gray-40: white;
  --sl-color-white: var(--dark-gray-color);
}
@media (hover: hover) {
  sl-button.gray.filled, sl-button.gray.filled {
    --sl-color-primary-95: var(--dark-gray-color);
  }
}
sl-button[type=danger], sl-button[type=danger] {
  --sl-color-gray-40: var(--action-color);
  --sl-color-danger-50: transparent;
  --sl-color-danger-60: transparent;
  --sl-color-danger-text: var(--action-color);
  --sl-color-white: transparent;
  --sl-color-danger-hue: var(--action-color-hue);
  --sl-color-danger-saturation: var(--action-color-saturation);
  --sl-color-danger-light: var(--action-color-light);
}
sl-button[type=danger] underline, sl-button[type=danger] underline {
  background-color: var(--action-color);
}
sl-button[type=danger].filled, sl-button[type=danger].filled {
  --sl-color-danger-50: var(--action-color);
  --sl-color-danger-60: var(--action-color);
  --sl-color-danger-text: white;
}
sl-button.transparent, sl-button.transparent {
  --sl-color-gray-40: var(--body-text-color);
  --sl-color-white: transparent;
}
sl-button.transparent underline, sl-button.transparent underline {
  background-color: var(--sl-color-gray-40);
}
sl-button.custom, sl-button.custom {
  --sl-color-gray-40: var(--custom-bg);
  --sl-color-white: transparent;
}
sl-button.custom underline, sl-button.custom underline {
  background-color: var(--custom-bg);
}
sl-button.custom.filled, sl-button.custom.filled {
  --sl-color-gray-40: var(--custom-color);
  --sl-color-white: var(--custom-bg);
  --sl-color-primary-95: var(--custom-bg);
}
sl-button.disabled, sl-button.disabled {
  opacity: 0.5;
}
sl-button:not(.filled), sl-button:not(.filled) {
  --sl-input-border-width: 0px;
}
sl-button .animation, sl-button .animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
sl-button .animation rect, sl-button .animation rect {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  rx: var(--button-radius);
  stroke-width: 2;
  stroke-dasharray: 400%, 400%;
  stroke-dashoffset: 0;
  transition: all 1s ease;
}
sl-button underline, sl-button underline {
  display: block;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 2px;
}
@media (hover: hover) {
  sl-button:hover .animation rect, sl-button:hover .animation rect {
    stroke-width: 2;
    stroke-dasharray: 0%, 400%;
    stroke-dashoffset: -200%;
  }
}
sl-button:focus .animation rect, sl-button:focus .animation rect {
  stroke-width: 2;
  stroke-dasharray: 0%, 400%;
  stroke-dashoffset: -200%;
}
sl-button:focus-within .animation rect, sl-button:focus-within .animation rect {
  stroke-width: 2;
  stroke-dasharray: 0%, 400%;
  stroke-dashoffset: -200%;
}

sl-icon-button {
  --sl-color-gray-50: var(--body-text-color);
  --sl-color-primary-50: var(--body-text-color);
}

.button-block {
  margin-top: 1.5em;
}

.login-form {
  background-color: transparent;
  padding: 0 10vw 10vw;
}
@supports (padding: 0 clamp(1em, 10vw, var(--max-padding)) clamp(1em, 10vw, var(--max-padding))) {
  .login-form {
    padding: 0 clamp(1em, 10vw, var(--max-padding)) clamp(1em, 10vw, var(--max-padding));
  }
}
.login-form h1 {
  padding: 1em 0;
  margin: 0;
}
.login-form input:focus {
  box-shadow: none;
}
.login-form label {
  font-weight: 300;
}
.login-form input[type=submit] {
  cursor: pointer;
  border-radius: 0px;
  --background-color: var(--secondary-color);
  --hover-background: var(--secondary-color);
  --color: white;
  --hover-color: white;
  padding: 2em 40px;
  width: 100%;
}
.login-form a {
  color: var(--dark-gray-color);
  opacity: 0.6;
  text-decoration: none;
}
.login-form__actions {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.login-form__actions a {
  padding-bottom: 1em;
}
.login-form__actions sl-button {
  margin-left: 1em;
}
.login-form h2 {
  background-color: var(--secondary-color--faded-2);
  padding: 2rem;
  margin: 3em 0 0;
}
.login-form form {
  background-color: var(--login-background-color);
  padding: 2rem;
  margin: 0 0 1em;
}
@media screen and (min-width: 1280px) {
  .login-form {
    padding: 0 calc((100vw - var(--max-width)) / 2) calc((100vw - var(--max-width)) / 2);
  }
}
@media screen and (max-width: 768px) {
  .login-form p {
    max-width: 100%;
  }
  .login-form__actions {
    position: relative;
    bottom: auto;
    right: auto;
    align-items: flex-start;
  }
}
@media screen and (max-width: 425px) {
  .login-form {
    padding: 0 1em 1em;
  }
}
.column .login-form {
  padding: 0;
}