* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

body {
  color: #fff;
  font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol'; /* $mnrl-fontFamily, fallback: $mnrl-fontFamily-system */

  font-size: 1rem;
  margin: 0;
  min-height: 100vh;
  overflow-y: auto;
  padding: 0;
}

.ribbon {
  background-image: url('../images/ribbon.svg'),
    linear-gradient(#15233b, #15233b 85%, transparent 87%); /* $mnrl-blue-100 */

  background-position: bottom, 50%;
  background-repeat: no-repeat;
  background-size: cover, 90% auto;
}

/* Default Layout */
.default-layout {
  background-attachment: fixed;
  background-image: url('../images/top-l-dark-cloud.svg'),
    url('../images/top-l-light-cloud.svg'),
    url('/../images/bottom-r-light-cloud.svg'),
    url('../images/bottom-r-dark-cloud.svg');
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: space-around;
  margin: 0;
  min-height: 100vh;
  overflow-y: auto;
}

.default-layout .ribbon {
  align-items: center;
  color: #fff;
  display: flex;
  margin: 0 auto;
  max-height: 77.2rem; /* actual dimensions of the svg */
  min-height: 66.7rem; /* iPhone 6/7/8 height */
  max-width: 45.6rem; /* actual dimensions of the svg */
  min-width: 30rem;
  padding: 0 4.8rem;
  width: 100%;
}

.default-layout .security-warning {
  color: #333840; /* $mnrl-gray-100 */
  display: flex;
  font-size: 1.2rem;
  max-width: 44rem;
  margin: auto;
  min-width: 30rem;
  padding: 0 1.6rem 6.4rem;
}

.security-warning.cookie-collection-verbiage {
  margin-top: -5rem !important; /* override security-warning */
  display: block !important; /* override security-warning */
}

/* Layout With Announcements */

.announcements-layout #login-content {
  display: flex;
}

.announcements-layout h1.rally-heading {
  font-size: 2.9rem;
  margin-bottom: 2rem;
  white-space: normal;
}

.announcements-layout .ribbon-side {
  background-color: #15233b; /* mnrl-blue-100) */
  border: #accbfc; /* $mnrl-blue-30 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  flex: 1;
  min-height: 100vh;
  min-width: 32rem;
  object-fit: contain;
  padding: 0 4.8rem;
  width: 25%;
}

.announcements-section {
  background-attachment: fixed;
  background-image: url('../images/top-l-dark-cloud.svg'),
    url('../images/top-l-light-cloud.svg'),
    url('../images/bottom-r-light-cloud.svg'),
    url('../images/bottom-r-dark-cloud.svg');
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 3;
  margin: 0;
  min-height: 100vh;
  min-width: 30rem;
  overflow-y: auto;
}

.announcements-layout .sun-icon {
  margin-left: -5rem;
  margin-top: 2rem;
}

.announcements-layout .login-action-button {
  margin-top: 4rem;
}

.announcements-layout .security-warning {
  color: #f5f7fa; /* $mnrl-gray-10 */
  margin: 0 auto 6rem auto;
  width: 100%;
}

.announcements-layout #login-form {
  display: block;
  flex-direction: column;
  margin-top: 3vh;
  min-height: 38rem;
  width: 100%;
}

.announcements-wrapper {
  margin: 173px auto auto;
  width: 66%;
}

.announcements-wrapper .label {
  color: #434a54;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
}

.announcements-ct {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1%;
  color: #3a4049;
  margin-top: 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px #ebeff5; /* $mnrl-gray-20 */
}

.announcements-ct h1 {
  color: #3272d9; /* $mnrl-blue-60 */
  font-size: 2.2rem;
  padding: 2rem 2rem 2rem 3rem;
}

.announcements-ct div {
  margin: 0rem 2rem 2rem 3rem;
}

.default-layout #login-form,
.default-layout #reset_password_form {
  display: flex;
  flex-direction: column;
  height: 80vh;
  margin-top: 12vh;
  min-height: 52rem;
  width: 100%;
}

h1.rally-heading,
h2.login-subtitle {
  display: flex;
  font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol'; /* $mnrl-fontFamily, fallback: $mnrl-fontFamily-system */

  white-space: nowrap;
}

.default-layout h1.rally-heading {
  font-size: 3.6rem;
  font-weight: 800;
  margin: 0 auto 5rem auto; /* specified this weird way for IE11 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

h2.login-subtitle {
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
}

.instructions {
  font-size: 1.4rem;
  margin-bottom: 3.2rem;
}

.instructions a,
.instructions a:visited {
  color: #84b1fa; /* $mnrl-blue-40 */
}

.instructions a:hover {
  color: #accbfc; /* $mnrl-blue-30 */
}

.instructions a:active {
  color: #5691f0; /* $mnrl-blue-50 */
}

.auth-error,
.auth-info {
  border-radius: 3px;
  font-size: 1.4rem;
  margin-top: 1.6rem;
  padding: 0.8rem;
  width: 100%;
}

.auth-error ul li {
  margin-left: 2.4rem;
}

.auth-error {
  background-color: #fad4d4; /* $mnrl-well-backgroundColor-danger */
  border: 1px solid #fa8e8e; /* $mnrl-well-borderColor-danger */
  color: #451717; /* $mnrl-red-100 */
}

.specialChars {
  font-family: 'SF Mono', 'Droid Sans Mono', 'Source Code Pro', Monaco, Consolas,
    'Courier New', Courier, monospace; /* $mnrl-fontFamily-monospace */
}

.auth-info {
  background-color: #abedc5; /* $mnrl-well-backgroundColor-success */
  border: 1px solid #57c282; /* $mnrl-well-borderColor-success */
  color: #112b1b; /* $mnrl-green-100 */
}

.auth-form-label {
  user-select: none;
  width: 100%;
}

.auth-form-label + .auth-form-label {
  margin-top: 1.6rem;
}

.announcements-layout .auth-form-label + .auth-form-label span {
  margin-top: 1.6rem;
}

.auth-form-label span {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.auth-form-input {
  border: 3px solid transparent;
  border-radius: 3px;
  font-size: 1.6rem;
  height: 4rem;
  padding-left: 1rem;
  width: 100%;
}

.auth-form-input:focus {
  border: 3px solid #5691f0; /* $mnrl-blue-50 */
  outline: none;
}

.login-action-button {
  -webkit-appearance: none; /* avoid default iOS button styles */
  align-items: center;
  background-color: #3272d9; /* $mnrl-blue-60 */
  border: none;
  border-radius: 3px;
  color: #ffffff; /* $mnrl-white */
  display: flex;
  font-size: 1.4rem;
  font-weight: 700;
  height: 4rem;
  justify-content: center;
  margin-top: 5.6rem;
  margin-bottom: 2.4rem;
  min-height: 4rem;
  user-select: none;
  width: 100%;
}

.login-action-button:hover {
  background-color: #103570; /* $mnrl-blue-90; */
}

.login-action-button:focus {
  background-color: #15233b; /* $mnrl-blue-100 */
  border: 3px solid #5691f0; /* $mnrl-blue-50 */
  outline: none;
}

.login-action-button:active {
  background-color: #3272d9; /* $mnrl-blue-60 */
}

.login-links {
  align-self: flex-start;
  font-size: 1.4rem;
  font-weight: 600;
}

.login-links a {
  align-items: center;
  display: flex;
}

.login-links a,
.login-links a:visited {
  color: #ffffff;
  text-decoration: none;
}

.login-links a:active,
.login-links a:focus,
.login-links a:hover {
  text-decoration: underline;
}

.login-links .chevron-left {
  height: 2.4rem;
  margin-left: -0.4rem;
  width: 2.4rem;
}

.sso-loading-msg {
  font-size: 1.4rem;
}

.auth-footer {
  align-items: center;
  background-color: #dde3ed; /* $mnrl-gray-30 */
  border: 1px solid #c8d1e0; /* $mnrl-gray-40 */
  bottom: 0;
  color: #333840; /* $mnrl-gray-100 */
  display: flex;
  font-size: 1.1rem;
  height: 4.8rem;
  justify-content: space-between;
  left: 0;
  padding: 0 0.8rem;
  position: fixed;
  width: 100%;
}

.left-group {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.from-broadcom {
  display: inline;
  font-style: italic;
  margin-left: 0.2rem;
}

.auth-footer .broadcom-logo {
  margin: 0;
  margin-left: 0; /* overridden at larger breakpoint */
  max-width: 100%;
  user-select: none;
}

.right-group {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-start;
  line-height: 1.6rem;
}

.copyright {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: 1.6em;
}

.copyright-details {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}

.copyright-details + .copyright-details {
  margin-left: 0.25rem;
}

.auth-footer-links {
  margin-left: 1.6rem;
}

.auth-footer-links a,
.auth-footer-links a:visited {
  color: #1d5bbf; /* $mnrl-blue-70 */
  text-decoration: none;
}

.auth-footer-links a:active,
.auth-footer-links a:focus,
.auth-footer-links a:hover {
  color: #3272d9; /* $mnrl-blue-60 */
  text-decoration: underline;
}

.auth-footer-link {
  margin: 0 0.8rem;
}

.auth-footer-link:last-child {
  margin-right: 0;
}

@media (min-width: 644px) {
  .default-layout {
    background-image: url('../images/top-l-dark-cloud.svg'),
      url('../images/top-l-light-cloud.svg'),
      url('../images/bottom-r-light-cloud.svg'),
      url('../images/bottom-r-dark-cloud.svg'), url('../images/sun.svg'),
      url('../images/top-doo-dads.svg'), url('../images/doo-dads.svg'),
      url('../images/not-logo.svg');
    background-position: top left, top left, bottom right, bottom right,
      top 2.5% left, top 16% right, bottom 15% right, bottom left;
    background-size: auto 42%, auto 52%, auto 56%, auto 54%, auto, auto, auto,
      auto;
  }

  .announcements-section {
    background-image: url('../images/top-l-dark-cloud.svg'),
      url('../images/top-l-light-cloud.svg'),
      url('../images/bottom-r-light-cloud.svg'),
      url('../images/bottom-r-dark-cloud.svg'),
      url('../images/top-doo-dads.svg'), url('../images/doo-dads.svg'),
      url('../images/not-logo.svg');
    background-position: 30% 0, 30% 0, bottom right, bottom right, top 5% right,
      bottom 15% right, bottom left 20%;
    background-size: auto 42%, auto 52%, auto 56%, auto 54%, auto, auto, auto,
      auto;
  }

  h1.rally-heading {
    font-size: 4.8rem;
  }

  h1.login-subtitle {
    font-size: 4rem;
  }

  .auth-footer {
    padding: 0 2.4rem;
  }

  .left-group {
    flex-wrap: nowrap;
  }

  .from-broadcom {
    margin-left: 0;
  }

  .auth-footer .broadcom-logo {
    margin-left: 0.8rem;
  }

  .right-group {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
  }

  .copyright-details {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

@media (min-height: 640px) {
  .announcements-layout #login-form {
    margin-top: 5vh;
  }

  .announcements-layout .security-warning {
    margin-top: 1rem;
  }

  .announcements-layout h1.rally-heading {
    margin-bottom: 2rem;
  }

  .announcements-layout .sun-icon {
    margin-top: 4rem;
  }
}

@media (min-height: 769px) {
  .ribbon {
    overflow-y: visible;
  }

  .default-layout #login-form,
  .default-layout #reset_password_form {
    height: auto;
    margin-bottom: 10vh;
  }

  .auth-form-input {
    height: 5.2rem;
  }

  .login-action-button {
    height: 5.6rem;
    min-height: 5.6rem;
  }

  .security-warning {
    margin-top: 1rem;
  }
}

@media (min-height: 880px) {
  .default-layout .security-warning {
    margin-top: 4rem;
  }

  .security-warning {
    padding: 0 0 6.4rem;
  }

  .announcements-layout h1.rally-heading {
    margin-bottom: 4rem;
  }

  .announcements-layout #login-form {
    height: 55vh;
  }

  .announcements-layout .login-action-button {
    margin-top: 5.2rem;
  }
}

@media (min-width: 1180px) {
  .announcements-layout h1.rally-heading {
    font-size: 3.6rem;
  }
}

@media (min-width: 1570px) {
  .announcements-layout h1.rally-heading {
    font-size: 5.2rem;
  }
}

@media (min-width: 1850px) {
  .announcements-layout .sun-icon {
    margin-left: -5rem;
    margin-top: 3rem;
    width: 65%;
  }

  #login-form,
  #reset_password_form {
    margin-top: 9vh;
  }

  .announcements-section {
    background-image: url('../images/top-l-dark-cloud.svg'),
      url('../images/top-l-light-cloud.svg'),
      url('../images/bottom-r-light-cloud.svg'),
      url('../images/bottom-r-dark-cloud.svg'),
      url('../images/top-doo-dads.svg'), url('../images/doo-dads.svg'),
      url('../images/not-logo.svg');
    background-position: 10% 0, 10% 0, bottom right, bottom right, top 5% right,
      bottom 15% right, bottom left 20%;
    background-size: auto 52%, auto 62%, auto 58%, auto 54%, auto 15%, auto 15%,
      auto 30%, auto;
  }
}

@media (min-width: 1900px) {
  .announcements-layout h1.rally-heading {
    font-size: 6.2rem;
  }
}

@media (min-width: 1960px) {
  .announcements-layout h1.rally-heading {
    font-size: 5.2rem;
  }
}