/* ------------------------------------------------------------------
  Plugin LWA Styles
 ------------------------------------------------------------------- */
.lwa-submit-button button::after,
.lwa-remember-buttons button::after {
  --cpl-crop--top-left__size: 0%;
  --cpl-crop--top-right__size: 0%;
  --cpl-crop--bottom-right__size: 0%;
  --cpl-crop--bottom-left__size: 0%;
  -webkit-clip-path: polygon(0 var(--cpl-crop--top-left__size), var(--cpl-crop--top-left__size) 0, calc(100% - var(--cpl-crop--top-right__size)) 0, 100% var(--cpl-crop--top-right__size), 100% calc(100% - var(--cpl-crop--bottom-right__size)), calc(100% - var(--cpl-crop--bottom-right__size)) 100%, var(--cpl-crop--bottom-left__size) 100%, 0 calc(100% - var(--cpl-crop--bottom-left__size)));
          clip-path: polygon(0 var(--cpl-crop--top-left__size), var(--cpl-crop--top-left__size) 0, calc(100% - var(--cpl-crop--top-right__size)) 0, 100% var(--cpl-crop--top-right__size), 100% calc(100% - var(--cpl-crop--bottom-right__size)), calc(100% - var(--cpl-crop--bottom-right__size)) 100%, var(--cpl-crop--bottom-left__size) 100%, 0 calc(100% - var(--cpl-crop--bottom-left__size)));
}

.lwa-submit-button button::before,
.lwa-remember-buttons button::before, .lwa-status::before {
  --cpl-crop--top-left__size: 0%;
  --cpl-crop--top-left__compensate: calc(var(--cpl-crop--top-left__size) + var(--cpl-crop__outline));
  --cpl-crop--top-right__size: 0%;
  --cpl-crop--top-right__compensate: calc(var(--cpl-crop--top-right__size) + var(--cpl-crop__outline));
  --cpl-crop--bottom-right__size: 0%;
  --cpl-crop--bottom-right__compensate: calc(var(--cpl-crop--bottom-right__size) + var(--cpl-crop__outline));
  --cpl-crop--bottom-left__size: 0%;
  --cpl-crop--bottom-left__compensate: calc(var(--cpl-crop--bottom-left__size) + var(--cpl-crop__outline));
  --cpl-crop__outline: 1px;
  -webkit-clip-path: polygon(var(--cpl-crop__outline) var(--cpl-crop--top-left__compensate), var(--cpl-crop--top-left__compensate) var(--cpl-crop__outline), calc(100% - var(--cpl-crop--top-right__compensate)) var(--cpl-crop__outline), calc(100% - var(--cpl-crop__outline)) var(--cpl-crop--top-right__compensate), calc(100% - var(--cpl-crop__outline)) calc(100% - var(--cpl-crop--bottom-right__compensate)), calc(100% - var(--cpl-crop--bottom-right__compensate)) calc(100% - var(--cpl-crop__outline)), var(--cpl-crop--bottom-left__compensate) calc(100% - var(--cpl-crop__outline)), var(--cpl-crop__outline) calc(100% - var(--cpl-crop--bottom-left__compensate)), 0 calc(100% - var(--cpl-crop--bottom-left__size)), var(--cpl-crop--bottom-left__size) 100%, calc(100% - var(--cpl-crop--bottom-right__size)) 100%, 100% calc(100% - var(--cpl-crop--bottom-right__size)), 100% var(--cpl-crop--top-right__size), calc(100% - var(--cpl-crop--top-right__size)) 0, var(--cpl-crop--top-left__size) 0, 0 var(--cpl-crop--top-left__size), 0 calc(100% - var(--cpl-crop--bottom-left__size)), var(--cpl-crop__outline) calc(100% - var(--cpl-crop--bottom-left__compensate)));
          clip-path: polygon(var(--cpl-crop__outline) var(--cpl-crop--top-left__compensate), var(--cpl-crop--top-left__compensate) var(--cpl-crop__outline), calc(100% - var(--cpl-crop--top-right__compensate)) var(--cpl-crop__outline), calc(100% - var(--cpl-crop__outline)) var(--cpl-crop--top-right__compensate), calc(100% - var(--cpl-crop__outline)) calc(100% - var(--cpl-crop--bottom-right__compensate)), calc(100% - var(--cpl-crop--bottom-right__compensate)) calc(100% - var(--cpl-crop__outline)), var(--cpl-crop--bottom-left__compensate) calc(100% - var(--cpl-crop__outline)), var(--cpl-crop__outline) calc(100% - var(--cpl-crop--bottom-left__compensate)), 0 calc(100% - var(--cpl-crop--bottom-left__size)), var(--cpl-crop--bottom-left__size) 100%, calc(100% - var(--cpl-crop--bottom-right__size)) 100%, 100% calc(100% - var(--cpl-crop--bottom-right__size)), 100% var(--cpl-crop--top-right__size), calc(100% - var(--cpl-crop--top-right__size)) 0, var(--cpl-crop--top-left__size) 0, 0 var(--cpl-crop--top-left__size), 0 calc(100% - var(--cpl-crop--bottom-left__size)), var(--cpl-crop__outline) calc(100% - var(--cpl-crop--bottom-left__compensate)));
}

.lwa-status {
  --cpl-alert__border-color: transparent;
  position: relative;
  padding: 20px 30px;
  background-color: hsl(var(--cpl-color-background-100));
  border-left: 7px solid var(--cpl-alert__border-color);
}
.lwa-status::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: -1px;
  pointer-events: none;
  background-color: var(--cpl-alert__border-color);
  opacity: 0.5;
  --cpl-crop--bottom-right__size: 15px;
}

.lwa-status-invalid {
  --cpl-alert__border-color: hsl(var(--cpl-color-danger));
}

.lwa-status-confirm {
  --cpl-alert__border-color: hsl(var(--cpl-color-success));
}

.lwa-submit-button button,
.lwa-remember-buttons button {
  --cpl-btn__padding-v: var(--cpl-btn-md__padding-v);
  --cpl-btn__padding-h: var(--cpl-btn-md__padding-h);
  --cpl-btn__font-size: var(--cpl-btn-md__font-size);
  --cpl-btn__color: hsl(var(--cpl-color-black));
  --cpl-btn__background-color: var(--cpl-color-brand);
  position: relative;
  display: inline-block;
  padding: var(--cpl-btn__padding-v) var(--cpl-btn__padding-h);
  font-size: var(--cpl-btn__font-size);
  font-weight: 600;
  line-height: 1;
  color: var(--cpl-btn__color);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background-color: var(--cpl-btn__background-color);
  border: 0;
  border-radius: var(--cpl-border-radius);
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.lwa-submit-button button:disabled,
.lwa-remember-buttons button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.lwa-submit-button button:focus:not(:focus-visible),
.lwa-remember-buttons button:focus:not(:focus-visible) {
  outline: none;
}
.lwa-submit-button button:not([disabled]):not(.disabled):hover,
.lwa-remember-buttons button:not([disabled]):not(.disabled):hover, .lwa-submit-button button:not([disabled]):not(.disabled):focus,
.lwa-remember-buttons button:not([disabled]):not(.disabled):focus {
  --cpl-btn__color: hsl(var(--cpl-color-black));
  --cpl-btn__background-color: var(--cpl-color-brand);
}

.lwa-submit-button button,
.lwa-remember-buttons button {
  --cpl-btn__padding-v: var(--cpl-btn-md__padding-v);
  --cpl-btn__padding-h: var(--cpl-btn-md__padding-h);
  --cpl-btn__font-size: var(--cpl-btn-md__font-size);
}

.lwa-submit-button button,
.lwa-remember-buttons button {
  --cpl-btn__crop: 12px;
  --cpl-btn__crop-outline: 20px;
  z-index: 0;
}
.lwa-submit-button button::before,
.lwa-remember-buttons button::before, .lwa-submit-button button::after,
.lwa-remember-buttons button::after {
  content: "";
  position: absolute;
  display: block;
}
.lwa-submit-button button::before,
.lwa-remember-buttons button::before {
  --cpl-crop--top-left__size: var(--cpl-btn__crop-outline);
  --cpl-crop--bottom-right__size: var(--cpl-btn__crop-outline);
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  pointer-events: none;
  background-color: hsl(var(--cpl-color-contrast-500));
  opacity: 0.2;
}
.lwa-submit-button button::after,
.lwa-remember-buttons button::after {
  --cpl-crop--top-left__size: var(--cpl-btn__crop);
  --cpl-crop--bottom-right__size: var(--cpl-btn__crop);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--cpl-btn__background-color);
  -webkit-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
  z-index: -1;
}
.lwa-submit-button button.cpl-glitch-button::before,
.lwa-remember-buttons button.cpl-glitch-button::before {
  visibility: visible;
}

.lwa-submit-button button,
.lwa-remember-buttons button {
  --cpl-btn__color: hsl(var(--cpl-color-black));
  --cpl-btn__background-color: var(--cpl-color-brand);
}

.lwa-submit-button button:not([disabled]):not(.disabled):hover,
.lwa-remember-buttons button:not([disabled]):not(.disabled):hover, .lwa-submit-button button:not([disabled]):not(.disabled):focus,
.lwa-remember-buttons button:not([disabled]):not(.disabled):focus {
  --cpl-btn__color: hsl(var(--cpl-color-contrast-900));
  --cpl-btn__background-color: hsl(var(--cpl-color-contrast-100));
}

.lwa-submit-button button,
.lwa-remember-buttons button {
  background-color: transparent;
}
.lwa-submit-button button:hover,
.lwa-remember-buttons button:hover, .lwa-submit-button button:focus,
.lwa-remember-buttons button:focus {
  background-color: transparent;
}

.lwa-form,
.lwa-remember {
  position: relative;
  display: block;
  background-color: hsl(var(--cpl-color-background-100));
}
@media (min-width: 568px) {
  .lwa-form,
.lwa-remember {
    width: 460px;
    padding: 70px 60px;
  }
}
@media (max-width: 567.98px) {
  .lwa-form,
.lwa-remember {
    padding: 40px 30px;
    margin: 0 calc(var(--cpl-container__padding) / -1);
  }
}
.lwa-form h4,
.lwa-remember h4 {
  margin-top: 0;
  margin-bottom: 36px;
  text-align: center;
}

.lwa-remember {
  margin-top: 40px;
  overflow: hidden;
}
.lwa-remember h4 {
  white-space: nowrap;
}
.lwa-remember .lwa-remember-email {
  margin-bottom: 40px;
}
.lwa-remember .lwa-remember-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lwa-remember .lwa-remember-buttons button {
  width: 100%;
}
.lwa-remember .lwa-links-remember-cancel {
  margin-top: 20px;
  font-size: 0.8125em;
  font-weight: 600;
  color: hsl(var(--cpl-color-contrast-100));
  text-transform: uppercase;
}
.lwa-remember .lwa-links-remember-cancel:hover, .lwa-remember .lwa-links-remember-cancel:focus {
  color: var(--cpl-color-brand);
}

.lwa-username,
.lwa-email {
  margin-bottom: 40px;
}

.lwa-submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 35px;
}
.lwa-submit > a {
  margin-top: 20px;
  font-size: 0.8125em;
  font-weight: 600;
  color: hsl(var(--cpl-color-white));
  text-transform: uppercase;
}
.lwa-submit > a:hover, .lwa-submit > a:focus {
  color: var(--cpl-color-brand);
}

.lwa-submit-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-bottom: 35px;
}
.lwa-submit-links p,
.lwa-submit-links label {
  margin-bottom: 0;
}

.lwa-submit-button,
.lwa-submit-button button {
  width: 100%;
}

.lwa-links-remember {
  margin-left: auto;
  font-size: 1em;
  color: hsl(var(--cpl-color-contrast-100));
}
.lwa-links-remember:hover, .lwa-links-remember:focus {
  color: var(--cpl-color-brand);
}

.lwa-status {
  margin-bottom: 40px;
  font-size: 1em;
}

.cpl-lwa-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.cpl-lwa-lines::before, .cpl-lwa-lines::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.1;
}
.cpl-lwa-lines::before {
  top: 15px;
  right: 40px;
  bottom: 15px;
  left: 40px;
  -webkit-clip-path: polygon(0 0, calc(50% - 60px) 0, calc(50% - 50px) 10px, calc(50% + 50px) 10px, calc(50% + 60px) 0, 100% 0, 100% 100%, calc(50% + 60px) 100%, calc(50% + 50px) calc(100% - 10px), calc(50% - 50px) calc(100% - 10px), calc(50% - 60px) 100%, 0 100%, 0 calc(100% - 1px), calc(50% - 61px) calc(100% - 1px), calc(50% - 51px) calc(100% - 11px), calc(50% + 51px) calc(100% - 11px), calc(50% + 61px) calc(100% - 1px), 100% calc(100% - 1px), 100% 1px, calc(50% + 61px) 1px, calc(50% + 51px) 11px, calc(50% - 51px) 11px, calc(50% - 61px) 1px, 0 1px);
          clip-path: polygon(0 0, calc(50% - 60px) 0, calc(50% - 50px) 10px, calc(50% + 50px) 10px, calc(50% + 60px) 0, 100% 0, 100% 100%, calc(50% + 60px) 100%, calc(50% + 50px) calc(100% - 10px), calc(50% - 50px) calc(100% - 10px), calc(50% - 60px) 100%, 0 100%, 0 calc(100% - 1px), calc(50% - 61px) calc(100% - 1px), calc(50% - 51px) calc(100% - 11px), calc(50% + 51px) calc(100% - 11px), calc(50% + 61px) calc(100% - 1px), 100% calc(100% - 1px), 100% 1px, calc(50% + 61px) 1px, calc(50% + 51px) 11px, calc(50% - 51px) 11px, calc(50% - 61px) 1px, 0 1px);
  background-color: hsl(var(--cpl-color-contrast-100));
}
.cpl-lwa-lines::after {
  top: 40px;
  right: 15px;
  bottom: 40px;
  left: 15px;
  border-right: 1px solid hsl(var(--cpl-color-contrast-100));
  border-left: 1px solid hsl(var(--cpl-color-contrast-100));
}
.cpl-lwa-lines div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cpl-lwa-lines div::before, .cpl-lwa-lines div::after {
  content: "";
  position: absolute;
  display: block;
  right: 14px;
  left: 14px;
  height: 3px;
  pointer-events: none;
  border-right: 3px solid hsl(var(--cpl-color-contrast-500));
  border-left: 3px solid hsl(var(--cpl-color-contrast-500));
}
.cpl-lwa-lines div::before {
  top: 14px;
}
.cpl-lwa-lines div::after {
  bottom: 14px;
}