/* 402 error */
.f02 {
  background-image: url("../images/clock-bg.jpg");
  padding: 0;
  position: fixed;
  top: 0;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  overflow: scroll;
}

.f02-content {
  margin: 10% auto;
  width: 600px;
}

.f02-title {
  color: white;
  font-size: 44px;
  margin-bottom: 80px;
}

.f02-subtitle {
  color: white;
  font-size: 18px;
  margin-top: 40px;
}

.f02-subtitle:last-child {
  margin-top: 12px;
}

.f02-subtitle-btn {
  color: white;
  text-decoration: underline;
  font-size: 18px;
  margin-top: 40px;
}

.f02-thank-you {
  color: white;
  font-size: 18px;
  margin-top: 80px;
}

.non-paying-account-container {
  margin: 40% auto;
  width: 80%;
}

.no-account-container {
  margin: 10% auto;
  width: 80%;
}

.no-account-steps {
  text-align: left;
  color: white;
  font-size: 18px;
  line-height: 32px;
  margin-top: 40px;
  margin: 40px auto;
  width: 60%;
}

.no-account-link {
  color: white;
  font-size: 18px;
  line-height: 32px;
  margin-top: 40px;
}

.no-extension-image {
  padding-top: 40px;
  max-width: 100%;
}

.link-white {
  color: white;
}

/* User flow error */
.fe-subtitle {
  color: white;
  font-size: 18px;
  line-height: 32px;
  margin-top: 40px;
}

.fe-subtitle:last-child {
  margin-bottom: 40px;
}

.flow-error-btn {
  color: white;
  text-decoration: underline;
  font-size: 18px;
}

.flow-error-btn:hover {
  text-decoration: none;
  font-weight: bold;
}

/* Non-supported devices */
.error-screen {
  background-image: url("../images/clock-bg.jpg");
  padding: 0;
  position: fixed;
  top: 0;
  text-align: center;
  margin: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  overflow: scroll;
}

.error-content {
  margin: 40% auto;
  width: 80%;
}

.error-title {
  color: white;
  margin-bottom: 44px;
}

.error-subtitle {
  color: white;
  margin-top: 22px;
}

.error-thank-you {
  color: white;
  margin-top: 44px;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  .error-screen {
    display: none;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  .error-screen {
    display: none;
  }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .error-screen {
    display: visible;
  }

  .error-content {
    margin: 20% auto;
  }

  .error-title {
    color: white;
    font-size: 42px;
    margin-bottom: 20px;
  }

  .error-subtitle {
    color: white;
    font-size: 22px;
    line-height: 22px;
    margin-top: 22px;
    padding-bottom: 22px;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  .error-screen {
    display: visible;
  }

  .error-title {
    color: white;
    font-size: 100px;
    margin-bottom: 44px;
  }

  .error-subtitle {
    color: white;
    font-size: 44px;
    line-height: 62px;
    margin-top: 22px;
    padding-bottom: 22px;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .error-screen {
    display: visible;
  }

  .error-title {
    color: white;
    font-size: 100px;
    margin-bottom: 44px;
  }

  .error-subtitle {
    color: white;
    font-size: 44px;
    line-height: 62px;
    margin-top: 22px;
    padding-bottom: 22px;
  }
}

@media (max-width: 1000px) and (min-height: 700px) {
  .error-screen {
    display: visible;
  }

  .error-content {
    margin: 20% auto;
  }

  .error-title {
    color: white;
    font-size: 42px;
    margin-bottom: 20px;
  }

  .error-subtitle {
    color: white;
    font-size: 22px;
    line-height: 22px;
    margin-top: 22px;
    padding-bottom: 22px;
  }
}