html,
body {
  font-size: 94%; }

a {
  color: #334455; }

.top-header {
  padding: 10px 0; }

.top-header ul {
  padding: 0;
  margin: 0; }

.top-header ul li a {
  color: #293643;
  margin: 0 10px; }

.btn-primary:not(:disabled):not(.disabled):active {
  color: #293643; }

.hero-banner {
  height: 350px;
  overflow: hidden;
  background: #f5f5f5;
  position: relative; }

.hero-banner img {
  object-fit: cover;
  height: 100%;
  width: 100%; }

.hero-banner .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  /*background:rgba(41,54,67, 0.85);background:$secondary-color;padding:10px 20px;*/
  font-size: 2.5rem;
  font-weight: 700;
  z-index: 2;
  max-width: 500px;
  text-align: center;
  text-shadow: 2px 2px 0 #293643; }

.hero-banner .hero-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1; }

.form-control {
  font-size: inherit;
  padding: 0.375rem 0.5rem; }

.citizenHide {
  display: none; }

.citizenLogo {
  height: 100px;
  width: 100px;
  line-height: 95px;
  text-align: center;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ffffff; }

.badge {
  height: 19px;
  line-height: 19px; }

.brandLogo {
  height: 60px;
  width: 60px;
  line-height: 55px;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ffffff;
  border: 1px solid #333;
  float: right; }

.title {
  position: relative;
  text-align: center; }

.title h3 {
  font-size: 30px; }

.title h3:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }

.title .divider {
  display: block;
  height: 1px;
  left: 0;
  margin: 20px auto;
  position: relative;
  right: 0;
  text-align: center;
  width: 20px; }

.title .divider:before,
.title .divider,
.title .divider:after {
  background: #27303b; }

.title .divider:before {
  bottom: 0;
  content: "";
  height: 1px;
  left: -30px;
  margin: 5px 0;
  position: absolute;
  right: 0;
  transition: all 0.4s ease 0s;
  width: 50px; }

.title .divider:after {
  content: "";
  height: 1px;
  left: 0;
  margin: 5px 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  width: 50px; }

.title:hover .divider:before,
.title:hover .divider:after {
  left: -15px; }

input[type="file"] {
  width: auto !important;
  max-width: 200px; }

.input-group .input-group-text {
  font-size: 14px; }

.landingPage .top-header {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.landingPage .loginFeatures {
  display: flex;
  align-items: center;
  margin: 30px auto;
  justify-content: center; }

.landingPage .loginFeatures .featureBox {
  background: #293643;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
  text-align: center;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.25s ease;
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  margin: 15px; }

.landingPage .loginFeatures .featureBox:after {
  font-family: "Font Awesome 5 Pro", sans-serif;
  content: "\f30d";
  position: absolute;
  right: 0;
  top: -15px;
  z-index: 1;
  font-weight: 900;
  color: #FAA71D;
  transition: all 0.25s ease; }

.landingPage .loginFeatures .featureBox a {
  display: block;
  color: #ffffff;
  transition: all 0.25s ease;
  padding: 15px 10px; }

.landingPage .loginFeatures .featureBox a i {
  padding-right: 5px; }

.landingPage .loginFeatures .featureBox:hover {
  background: #FAA71D; }

.landingPage .loginFeatures .featureBox:hover:after {
  color: #293643;
  top: -20px; }

.landingPage .loginFeatures .featureBox a:hover {
  text-decoration: none;
  color: #ffffff; }

.landingPage .basicFeatures {
  display: flex;
  align-items: center;
  margin: 30px auto; }

.landingPage .basicFeatures .featureBox {
  background: #FAA71D;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin: 5px 15px;
  text-align: center;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.25s ease;
  border: 2px solid transparent; }

.landingPage .basicFeatures .featureBox a {
  display: block;
  color: #ffffff;
  transition: all 0.25s ease;
  padding: 10px; }

.landingPage .basicFeatures .featureBox a i {
  padding-right: 5px; }

.landingPage .basicFeatures .featureBox:hover {
  background: #ffffff;
  border-color: #FAA71D; }

.landingPage .basicFeatures .featureBox a:hover {
  text-decoration: none;
  color: #FAA71D; }

.bg-grey {
  background: #f5f5f5; }

.landingPage .services h4 {
  font-size: 16px;
  margin-bottom: 20px; }

.landingPage .services .serviceBox {
  background: #ffffff;
  border: 1px solid #293643;
  height: 250px;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 15px; }

.landingPage .services .serviceBox ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.landingPage .services .serviceBox ul li {
  margin-bottom: 5px; }

.landingPage .services .serviceBox ul li i {
  padding-right: 5px; }

.landingPage footer {
  background: #293643;
  color: #ffffff;
  padding: 15px 0;
  text-align: center; }

.landingPage footer ul {
  margin-bottom: 0;
  font-size: 13px; }

.landingPage footer ul li {
  position: relative;
  color: #ffffff;
  padding-right: 10px; }

.landingPage footer ul li a,
.landingPage footer ul li a:hover {
  color: #ffffff; }

.landingPage footer ul li:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 80%;
  background: #ffffff;
  top: 3px;
  right: 0; }

.landingPage footer ul li:last-child:after {
  content: none; }

.scrollToTop {
  bottom: 7px;
  position: fixed;
  right: 20px;
  z-index: 9;
  display: none; }

.scrollToTop a {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  color: #ffffff;
  display: block;
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  opacity: 0.6;
  text-align: center;
  width: 28px; }

/*Top-Navbar*/
.top-navbar {
  position: fixed;
  width: calc(100% - 230px);
  left: 230px;
  top: 0;
  z-index: 9;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.top-navbar .user-actions sup {
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  white-space: nowrap;
  height: 15px;
  min-width: 15px;
  background: #FAA71D;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-align: center;
  line-height: 15px;
  padding: 0 2px;
  color: #ffffff;
  font-family: "Roboto", "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 600;
  z-index: 1; }

.top-navbar .user-actions > ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none; }

.top-navbar .user-actions > ul > li {
  display: inline-block; }

.top-navbar .user-actions > ul > li > a {
  font-size: 17px;
  margin: 0 2px;
  padding: 0 5px; }

.top-navbar .user-actions > ul > li > a > i {
  position: relative; }

.top-navbar .welcome-text {
  font-weight: 500;
  color: #293643; }

.top-navbar .dropdown-menu {
  width: 20rem;
  margin: 0;
  position: absolute;
  left: auto;
  right: -7px;
  top: 40px;
  -webkit-box-shadow: 0 0 10px rgba(98, 98, 98, 0.1);
  box-shadow: 0 0 10px rgba(98, 98, 98, 0.2);
  border-color: rgba(0, 0, 0, 0.1); }

.top-navbar .dropdown-menu.dropdown-sm {
  width: 15rem; }

.top-navbar .dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 15px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #293643;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: ""; }

.top-navbar .dropdown-menu:after {
  position: absolute;
  top: -6px;
  right: 16px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #293643;
  border-left: 6px solid transparent;
  content: ""; }

.top-navbar .dropdown-big-header {
  padding: 0.75rem;
  color: #ffffff;
  white-space: nowrap;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem; }

.top-navbar .dropdown-small-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap; }

.top-navbar .dropdown-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center; }

.top-navbar .dropdown-heading span {
  display: block;
  font-size: 18px;
  font-weight: 400; }

.top-navbar .dropdown-heading small {
  font-size: 100%;
  color: #FAA71D;
  font-weight: 500; }

.top-navbar .nav-btn-collapse {
  display: none; }

/*Left-Sidebar*/
.left-sidebar {
  width: 230px;
  background-color: #2b303b;
  z-index: 8;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: auto;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  height: 100%; }

.page-container {
  width: 100%;
  height: 100%;
  padding-left: 230px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.page-container .page-content-wrapper {
  min-height: 100%;
  position: relative;
  z-index: 1;
  padding: 60px 0 0;
  padding-bottom: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.page-container .page-content-wrapper > .content {
  padding: 15px; }

.sidebar-visible .left-sidebar {
  transform: translateX(-230px); }

.sidebar-visible .page-container {
  padding-left: 0; }

.sidebar-visible .top-navbar {
  width: 100%;
  left: 0; }

.sidebar .nav-profile-image .image {
  background-image: url("/img/default-city-logo.jpg"); }

.sidebar-scroll:hover::-webkit-scrollbar-thumb,
.scrollable-div:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.41; }

.sidebar-scroll::-webkit-scrollbar-track,
.scrollable-div::-webkit-scrollbar-track {
  background: none; }

.sidebar-scroll::-webkit-scrollbar,
.scrollable-div::-webkit-scrollbar {
  width: 7px;
  height: 0; }

.sidebar-scroll::-webkit-scrollbar-thumb,
.scrollable-div::-webkit-scrollbar-thumb {
  background: none;
  border-radius: 4.5px;
  -webkit-border-radius: 4.5px;
  -moz-border-radius: 4.5px; }

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.scrollable-div::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5); }

.sidebar-scroll {
  overflow: auto; }

.sidebar .sidebar-menu .nav-item a {
  padding: 12px; }

.primaryAction {
  margin: 0 auto; }

/*Right modal*/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 320px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
  max-height: inherit; }

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
  max-height: inherit; }

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px; }

/*Left*/
.modal.left.fade .modal-dialog {
  left: -320px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out; }

.modal.left.fade.show .modal-dialog {
  left: 0; }

/*Right*/
.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out; }

.modal.right.fade.show .modal-dialog {
  right: 0; }

/* ----- MODAL STYLE ----- */
.modal-content {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border: none; }

.modal-header {
  border-bottom-color: #eeeeee;
  background-color: #fafafa; }

/*Login*/
.auth-page {
  padding: 5rem 0 3rem; }

.auth-page.landingPage {
  padding: 0; }

.auth-page .brand-logo {
  margin: 0 auto;
  text-align: center; }

/* POV1-4703. /account-reset.html no longer shows the gWorks logo - the page
   belongs to the agency, not to us - but the card below it should stay where it
   was on the page rather than sliding up. This holds the block the logo image
   occupied (gWorks_logo.png is 157x46), keeping .brand-logo's own centring and
   its responsive padding-top. */
.auth-page .brand-logo-empty {
  height: 46px; }

/* The global heading accent is a 4px orange bar (citizen-base.scss, h1..h6
   :after). The reset pages still use the legacy .auth-page chrome rather than
   .fdAuthPage, which cancels that bar outright, so recolour it here instead:
   the citizen arrives from the activation-blue Forgot Password card and the
   palette should not change underneath them mid-journey. */
.auth-page .accent-activation:after {
  border-bottom-color: #1F5C8B; }

.auth-page .form-container {
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  overflow: hidden; }

.auth-page .form-container.sm {
  max-width: 350px;
  margin: 0 auto; }

.auth-page .form-title h1 {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 700; }

.auth-page .form-title h1 small {
  font-size: 12px;
  display: block;
  color: #555555; }

.auth-page .form-container .form-field_input,
.auth-page .form-container .form-field_textarea {
  font-size: 15px;
  font-weight: 500; }

.auth-page .form-inputs {
  margin-top: 50px; }

.auth-page .form-container .form-field_control {
  border: none !important;
  background: #edf1f5;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  height: 48px; }

.auth-page .form-container .form-field_label,
.auth-page .form-container .form-field_input:focus ~ .form-field_label,
.auth-page .form-container .form-field_textarea:focus ~ .form-field_label {
  color: #555555; }

.auth-page .btn.btn-login-blue {
  text-align: left;
  color: #ffffff;
  height: 48px;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem; }

.auth-page .btn-login-blue:focus,
.auth-page .btn-login-blue:hover {
  color: #ffffff;
  background: #5766b2; }

.auth-page .btn-login-blue i {
  text-align: right;
  float: right;
  padding-top: 2px;
  transition: all 0.25s ease;
  transform: translate(-10px, 0);
  -webkit-transform: translate(-10px, 0); }

.auth-page .btn-login-blue:focus i,
.auth-page .btn-login-blue:hover i {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

.secondaryActions {
  top: 85px; }

/*.table th, .table td{font-size:14px}*/
/*311*/
.request-tabs {
  border-bottom: 0; }

.request-data,
.request-data div,
.request-data table td,
.request-data table td > div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.request-data > div {
  padding: 0.15rem 0; }

.request-data table {
  table-layout: fixed; }

.request-data table td {
  vertical-align: top;
  padding: 0.2rem 0; }

.request-data table td:nth-child(2) {
  text-align: right;
  width: 110px; }

.request-data table td span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.request-data .requestStatus {
  position: absolute;
  top: 15px;
  right: 15px; }

.request-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px; }

.request-action .btn {
  margin: 0 3px; }

.citySelector .select2-container {
  width: 100% !important; }

.citySelector
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  line-height: 35px; }

/*
.citizenFaq ul{list-style:none;padding:0;margin:0}
.citizenFaq ul + ul{border-top:1px solid $border;padding-top:15px}
.citizenFaq ul ul{margin:15px 0}
.citizenFaq ul ul li{font-size:14px;font-weight:400}

.citizenFaq>div>ul>li{font-size:1.25rem;font-weight:600;position:relative}*/
.page-link:hover,
.page-link:not([href]):hover,
.page-item.active .page-link {
  background-color: #293643;
  border-color: #293643;
  color: #ffffff; }

.dataTables_wrapper .page-item.active .page-link,
.dataTables_wrapper .page-item:hover .page-link,
.dataTables_wrapper .page-item:active .page-link {
  background: #293643;
  border-color: #293643; }

.doubleRows tbody td {
  word-break: break-all; }

.payPreferences,
.accSummary {
  width: 350px; }

.summarynCartnPreferences .accSummary {
  margin-right: 15px; }

.paymentSetupModal {
  position: fixed;
  bottom: 15px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: rgba(9, 30, 66, 0.15) 0px 8px 16px -4px, rgba(9, 30, 66, 0.03) 0px 0px 1px;
  border-left: 3px solid #FAA71D;
  padding: 10px;
  display: flex;
  align-items: center;
  max-width: 700px;
  z-index: 9999; }

.paymentSetupModal .icon i {
  background: #ced4da;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  display: block; }

.paymentSetupModal span {
  font-weight: bold; }

.paymentSetupModal p {
  margin: 0; }

.paymentSetupModal .close {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  position: absolute;
  top: 5px;
  right: 5px; }

.multiple_check_cards .data-box.active {
  border: 1px solid #FAA71D; }

.primarypay {
  margin-top: 0.5rem; }

.pay-billsHeader .primarypay {
  margin-top: 0.25rem; }

/* Responsive CSS */
@media (max-width: 1024px) {
  .gworks-tabStyling2 .nav-item {
    width: 33.3333%; }
  .rightFilter .dataTableFilter {
    float: right;
    padding-top: 20px; }
  .rightFilter .dataTableFilter + * {
    float: none;
    clear: both; } }

@media (max-width: 992px) {
  .landingPage .services > [class^="col-"] {
    margin-bottom: 30px; }
  .landingPage .services h4 {
    text-align: center; }
  .left-sidebar {
    transform: translateX(-230px);
    z-index: 99; }
  .page-container {
    padding-left: 0; }
  .top-navbar {
    width: 100%;
    left: 0; }
  .top-navbar .nav-btn-collapse {
    display: block; }
  .sidebar-visible .left-sidebar {
    transform: translateX(0); }
  .sidebar-mboverlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    top: 0;
    left: 0;
    z-index: 98;
    display: none;
    cursor: pointer; }
  .sidebar .nav-item a {
    padding: 8px; } }

@media (max-width: 768px) {
  html,
  body {
    font-size: 95%; }
  .landingPage .container {
    width: 95%;
    max-width: inherit; }
  .landingPage .basicFeatures .featureBox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 15px 0; }
  .auth-page {
    padding: 4rem 0 2rem; }
  .gworks-tabStyling2 .nav-item {
    width: inherit; } }

@media (max-width: 576px) {
  .auth-page.landingPage .brandLogo {
    float: none; }
  h1 {
    font-size: 2rem; }
  .auth-page,
  .auth-page > .container {
    padding: 0; }
  .auth-page .brand-logo {
    padding-top: 15px; }
  .landingPage .hero-banner {
    height: 300px; }
  .landingPage .hero-banner .hero-text {
    font-size: 2rem; }
  .top-navbar .welcome-text {
    display: none; }
  .transforming-tabs > ul {
    border: 2px solid #FAA71D;
    overflow: hidden;
    position: relative;
    display: block; }
  .transforming-tabs > ul::after {
    content: "\f0c9";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 8px;
    right: 15px;
    z-index: 2;
    pointer-events: none; }
  .transforming-tabs > ul.open .nav-link {
    position: relative;
    display: block; }
  .transforming-tabs > ul > li {
    display: block; }
  .transforming-tabs > ul > li > .nav-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none !important; }
  .transforming-tabs > ul > li > .nav-link.active {
    z-index: 1;
    border: none !important; }
  /*.payment-cardDetails{position:absolute;top:50px;left:10%;transform:translateX(-50%)}*/
  .payment-cardDetails {
    font-size: 14px; }
  .billsDataCard .billsData table {
    table-layout: fixed; }
  .billsDataCard .billsData table tr th + th,
  .billsDataCard .billsData table tr td + td {
    text-align: left;
    padding-left: 0; }
  .billsDataCard .billsData table tr th,
  .billsDataCard .billsData table tr td {
    display: block;
    max-width: inherit !important;
    padding: 2px 0; }
  .billsDataCard .billsData .badgeTable tr {
    height: inherit; }
  .billsDataCard .billsData table tr th:empty,
  .billsDataCard .billsData table tr td:empty {
    display: none; } }

@media (max-width: 360px) {
  .billsDataCard .billsAction .btn {
    font-size: 14px;
    width: 48%;
    white-space: nowrap;
    padding: 0.35rem 0; } }

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto; }
  .landingPage .loginFeatures .featureBox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%; }
  .modal.modal-confirmation .modal-dialog {
    max-width: 300px; }
  .modal-sm {
    max-width: 300px; } }

@media (min-width: 768px) {
  .primaryAction {
    position: absolute;
    right: 15px;
    top: 75px; } }

@media (min-width: 1024px) {
  .landingPage .loginFeatures .featureBox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .card-tabs .rightFilter .dataTableFilter {
    top: -55px; } }

@media (min-width: 1200px) {
  .landingPage .loginFeatures .featureBox {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 17%;
    flex: 0 0 17%;
    max-width: 17%; }
  .agendafilter {
    position: absolute;
    top: -30px;
    right: 18px; } }

@media (min-width: 1300px) {
  .payPreferences {
    width: 360px; } }

@media (min-width: 1400px) {
  .payPreferences {
    width: 380px; } }

/* ==========================================================================
   Citizen auth shell  (POV1-4677)
   Used by /plugin/utilities/signup.html, /plugin/utilities/verify.html and,
   since POV1-4699, the login pages at /index.html and /login.html.
   The old .utilitiesSignUp and .signupSteps rules retired with POV1-4697,
   which rebuilt verify.html on this block - they were the last consumers.

   The root was called .utilitiesActivate while the activation flow was its only
   consumer. POV1-4699 renamed it: the login page is not an activation page, and
   a shared shell should not be named after one of the pages that uses it. The
   activate- prefix on the parts is left alone - renaming ~120 selectors a second
   time buys nothing.
   ========================================================================== */
.fdAuthPage {
  background: #eef0f3;
  min-height: 100vh;
  padding: 24px 16px;
  color: #1a1a1a; }

/* The citizen theme draws a 4px orange bar under every heading
   (citizen-base.scss h1..h6:after). This flow uses its own accent instead, so
   the bar is cancelled locally rather than globally - the rule is relied on
   across the rest of the app. Same effect as the shared .noLine helper, applied
   to the whole section so no heading has to opt out one by one. */
.fdAuthPage h1:after,
.fdAuthPage h2:after,
.fdAuthPage h3:after,
.fdAuthPage h4:after,
.fdAuthPage h5:after,
.fdAuthPage h6:after {
  content: none;
  display: none;
  border-bottom: none; }

.fdAuthPage .activate-shell {
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden; }

/* ---- header ---- */
.fdAuthPage .activate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e5e5; }

.fdAuthPage .activate-brand {
  display: flex;
  align-items: center;
  gap: 12px; }

.fdAuthPage .activate-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px dashed #b9b9b9;
  color: #9a9a9a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }

.fdAuthPage .activate-brand-mark svg {
  width: 16px;
  height: 16px;
  display: block; }

.fdAuthPage .activate-brand-mark.has-logo {
  border: 0; }

.fdAuthPage .activate-brand-mark img {
  max-width: 100%;
  max-height: 100%;
  display: block; }

.fdAuthPage .activate-brand-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2; }

.fdAuthPage .activate-header-contact {
  font-size: 13px;
  color: #4a4a4a;
  font-weight: 500; }

/* ---- banner ----
   Reuses the citizen login hero. The .hero-bg rules in common.scss are scoped
   to .auth-page, so the sizing is restated here. The brand colour shows through
   while the image loads and if both it and the fallback fail. */
.fdAuthPage .activate-banner {
  height: 150px;
  position: relative;
  overflow: hidden;
  background-color: #14495F; }

.fdAuthPage .activate-banner .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }

.fdAuthPage .activate-banner .hero-bg img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover; }

/* ---- title row ---- */
.fdAuthPage .activate-intro {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 28px 32px 0; }

.fdAuthPage .activate-page-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0; }

.fdAuthPage .activate-intro-spacer {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0; }

.fdAuthPage .activate-intro-spacer::before {
  content: "\200B"; }

.fdAuthPage .activate-login-prompt {
  font-size: 13.5px;
  color: #6b6b6b; }

.fdAuthPage .activate-login-prompt a {
  color: #1F5C8B;
  font-weight: 500; }

/* ---- body / two column ---- */
.fdAuthPage .activate-body {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 26px 24px 32px; }

.fdAuthPage .activate-main {
  flex: 3 1 460px;
  min-width: 0; }

.fdAuthPage .activate-aside {
  flex: 1 1 270px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; }

/* ---- cards ---- */
.fdAuthPage .activate-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 28px; }

.fdAuthPage .activate-card-inner {
  max-width: 520px; }

.fdAuthPage h2.activate-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 21px;
  margin: 0 0 8px;
  position: relative;
  padding-bottom: 12px;
  display: inline-block; }

/* re-enabled after the reset above: the mock-up's 44px accent bar */
.fdAuthPage h2.activate-title:after {
  content: "";
  display: block;
  border-bottom: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: #1F5C8B; }

.fdAuthPage h2.activate-title-plain {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px; }

.fdAuthPage .activate-lede {
  font-size: 13.5px;
  color: #6b6b6b;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 62ch; }

/* ---- status icon bubble ---- */
.fdAuthPage .activate-bubble {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: #eef5fc;
  color: #1F5C8B;
  font-size: 18px; }

.fdAuthPage .activate-bubble-success {
  background: #eafaf0;
  color: #1c7c4d; }

/* ---- callouts ---- */
.fdAuthPage .activate-callout {
  display: flex;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  align-items: flex-start;
  line-height: 1.6; }

.fdAuthPage .activate-callout-icon {
  font-size: 15px;
  line-height: 1.35;
  flex-shrink: 0; }

.fdAuthPage .activate-callout-info {
  background: #eef5fc;
  color: #1f5f8b; }

.fdAuthPage .activate-callout-success {
  background: #eafaf0;
  color: #1c7c4d; }

.fdAuthPage .activate-callout-warn {
  background: #fdf6ea;
  color: #93650f; }

.fdAuthPage .activate-callout-error {
  background: #fdeeee;
  color: #c0392b; }

/* ---- Look up by segmented control ---- */
.fdAuthPage .activate-methods-block {
  margin-bottom: 22px; }

.fdAuthPage .activate-methods-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b6b6b;
  margin-bottom: 8px; }

.fdAuthPage .activate-methods {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  background: #f4f5f7; }

.fdAuthPage .activate-method {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  transition: background 0.15s ease; }

.fdAuthPage .activate-method.active {
  background: #ffffff;
  color: #1F5C8B;
  box-shadow: 0 1px 3px rgba(16, 58, 76, 0.16); }

.fdAuthPage .activate-method[aria-disabled="true"] {
  color: #c4c4c4;
  cursor: not-allowed; }

.fdAuthPage .activate-method:focus {
  outline: 2px solid #1F5C8B;
  outline-offset: 2px; }

/* ---- fields ---- */
.fdAuthPage .activate-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; }

.fdAuthPage .activate-field-wide {
  grid-column: 1 / -1; }

.fdAuthPage .activate-fields .form-group {
  margin-bottom: 0; }

.fdAuthPage label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px; }

.fdAuthPage .activate-required {
  color: #c0392b; }

.fdAuthPage .form-control {
  font-size: 14px;
  padding: 10px 12px;
  height: auto;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  background: #ffffff;
  color: #1a1a1a; }

.fdAuthPage .form-control:focus {
  border-color: #1F5C8B;
  box-shadow: 0 0 0 3px rgba(31, 92, 139, 0.12); }

.fdAuthPage .form-control.inputError {
  border-color: #c0392b; }

.fdAuthPage .activate-helper {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.5;
  margin-top: 6px; }

/* keeps the standard gworks-evt-error contract, restyled for this flow */
.fdAuthPage .fieldError {
  display: block;
  font-size: 12px;
  color: #c0392b;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 6px; }

.fdAuthPage .fieldError:empty {
  display: none; }

/* ---- buttons ---- */
.fdAuthPage .btn-activate {
  font-weight: 500;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #1F5C8B;
  color: #ffffff; }

.fdAuthPage .btn-activate:hover,
.fdAuthPage .btn-activate:focus {
  background: #14425f;
  color: #ffffff; }

.fdAuthPage .btn-activate:disabled {
  opacity: 0.55; }

/* The secondary action beside a .btn-activate - "Reset my password" next to
   "Go to login" (POV1-4741). Same type and padding as .btn-activate, and both
   carry a 1px border, so the two sit level at the same height. */
.fdAuthPage .btn-activate-outline {
  font-weight: 500;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 6px;
  border: 1px solid #1F5C8B;
  background: #ffffff;
  color: #1F5C8B; }

.fdAuthPage .btn-activate-outline:hover,
.fdAuthPage .btn-activate-outline:focus {
  background: #eef5fc;
  color: #1F5C8B; }

.fdAuthPage .btn-activate-link {
  background: none;
  border: none;
  color: #1F5C8B;
  font-size: 13px;
  font-weight: 500;
  padding: 0; }

.fdAuthPage .btn-activate-link:hover {
  color: #14425f;
  text-decoration: underline; }

.fdAuthPage .activate-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px; }

.fdAuthPage .activate-actions-split {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

/* buttons side by side from the left, primary first (POV1-4741) */
.fdAuthPage .activate-actions-start {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

/* ---- reCAPTCHA (POV1-4691) ---- */
/*
  Google renders the checkbox as a fixed 304x78 iframe that will not reflow, so
  the card has to make room for it rather than the other way round. Below the
  width where it would overhang the card padding it is scaled down from its top
  left corner, and the wrapper's height is pulled back by the same factor so the
  gap under it does not grow as the box shrinks.
*/
.fdAuthPage .activate-recaptcha {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end; }

.fdAuthPage .activate-recaptcha > div {
  /* the widget Google injects */
  flex: 0 0 auto; }

@media (max-width: 400px) {
  .fdAuthPage .activate-recaptcha {
    justify-content: flex-start;
    height: 66px; }
  .fdAuthPage .activate-recaptcha > div {
    transform: scale(0.85);
    transform-origin: 0 0; } }

/* ---- dead-end screens ---- */
.fdAuthPage .activate-phone {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 14px 0 22px; }

.fdAuthPage .activate-fineprint {
  font-size: 12.5px;
  color: #6b6b6b;
  line-height: 1.6;
  margin-top: 18px; }

.fdAuthPage .activate-fineprint strong {
  color: #1a1a1a; }

/* ---- waiting state ---- */
.fdAuthPage .activate-waiting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f7f8fa;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.6; }

.fdAuthPage .activate-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d3dbe3;
  border-top-color: #1F5C8B;
  flex-shrink: 0;
  animation: activate-spin 0.8s linear infinite; }

@keyframes activate-spin {
  to {
    transform: rotate(360deg); } }

/* ---- aside ---- */
.fdAuthPage .activate-aside-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 20px; }

.fdAuthPage .activate-aside-card h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a9a9a;
  margin: 0 0 14px; }

.fdAuthPage .activate-aside-list {
  display: flex;
  flex-direction: column;
  gap: 13px; }

.fdAuthPage .activate-aside-item {
  display: flex;
  gap: 9px;
  align-items: flex-start; }

.fdAuthPage .activate-aside-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1F5C8B;
  flex-shrink: 0;
  margin-top: 6px; }

.fdAuthPage .activate-aside-item-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4; }

.fdAuthPage .activate-aside-item-desc {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.5;
  margin-top: 2px; }

.fdAuthPage .activate-promo {
  background: #14495F;
  border-radius: 10px;
  padding: 20px;
  color: #ffffff; }

.fdAuthPage .activate-promo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9CC7DE;
  margin-bottom: 8px; }

.fdAuthPage .activate-promo-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92); }

/* ---- footer ---- */
.fdAuthPage .activate-footer {
  background: #103A4C;
  padding: 26px 32px;
  color: #ffffff; }

.fdAuthPage .activate-footer a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9); }

.fdAuthPage .activate-footer a:hover {
  color: #ffffff; }

.fdAuthPage .activate-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  align-items: flex-start; }

.fdAuthPage .activate-footer-col {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.fdAuthPage .activate-footer-city {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px; }

.fdAuthPage .activate-footer-credit {
  min-width: 200px;
  max-width: 280px; }

.fdAuthPage .activate-footer-credit-line {
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 6px; }

.fdAuthPage .activate-footer-credit-line a {
  font-size: 13px;
  color: #ffffff;
  text-decoration: underline; }

.fdAuthPage .activate-footer-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7; }

.fdAuthPage .activate-footer-address {
  min-width: 200px;
  max-width: 280px; }

.fdAuthPage .activate-footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 22px;
  padding-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between; }

.fdAuthPage .activate-footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   Choose a password  (POV1-4697)
   The rule checklist and strength meter are guidance only - nothing here
   gates submission, which is why the met/unmet states are quiet rather than
   pass/fail red and green.
   ========================================================================== */
.fdAuthPage .activate-bubble-success {
  background: #eafaf0;
  color: #1c7c4d; }

/* ---- guidance panel ---- */
.fdAuthPage .activate-panel {
  background: #f7f8fa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 14px 16px; }

/* A quiet uppercase label, not a heading - it introduces guidance rather than
   a section, so it stays in the body font and recedes. */
.fdAuthPage .activate-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 12px; }

/* Two columns, as in the design. auto-fit rather than a fixed count so the
   list drops to one column on a narrow screen instead of squashing. */
.fdAuthPage .activate-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 9px 20px; }

.fdAuthPage .activate-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6b6b6b;
  line-height: 1.6; }

/* An empty ring while unmet, filled with a tick once met. The label colour does
   not change: these are suggestions, so a rule not yet met is not an error. */
.fdAuthPage .activate-rule-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #c9c9c9;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1; }

.fdAuthPage .activate-rule-met .activate-rule-mark {
  background: #1c7c4d;
  border-color: #1c7c4d;
  color: #fff; }

/* The password pair is a two-column grid like any other field row, but capped
   so the inputs do not stretch the full width of the card on a wide screen. */
.fdAuthPage .activate-fields-narrow {
  max-width: 520px; }

/* ---- label + show/hide row ---- */
.fdAuthPage .activate-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px; }

.fdAuthPage .activate-label-row label {
  margin-bottom: 0; }

/* ---- strength meter ---- */
.fdAuthPage .activate-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px; }

.fdAuthPage .activate-strength-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e5e5e5;
  overflow: hidden; }

.fdAuthPage .activate-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #9a9a9a;
  transition: width 0.18s ease, background-color 0.18s ease; }

.fdAuthPage .activate-strength-none {
  background: #9a9a9a; }

.fdAuthPage .activate-strength-weak {
  background: #c0392b; }

.fdAuthPage .activate-strength-fair {
  background: #93650f; }

.fdAuthPage .activate-strength-good {
  background: #1f5f8b; }

.fdAuthPage .activate-strength-strong {
  background: #1c7c4d; }

.fdAuthPage .activate-strength-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6b6b;
  min-width: 52px; }

/* ---- confirm-field hint ---- */
.fdAuthPage .activate-helper-ok {
  color: #1c7c4d; }

.fdAuthPage .activate-helper-warn {
  color: #93650f; }

/* ==========================================================================
   Login  (POV1-4699)
   The login card reuses the shell, card, field, button and aside rules above;
   what follows is only what the login form itself adds. All of it stays scoped
   to .fdAuthPage so none of it reaches the legacy .auth-page login markup that
   other citizen pages still use.
   ========================================================================== */
/* The design caps the login card well short of its column - a two-field form
   stretched to a full desktop column reads as a mistake. */
.fdAuthPage .activate-card-narrow {
  max-width: 520px; }

/* A single-column field stack. The shared .activate-fields grid is auto-fit at
   minmax(220px, 1fr), so on a card this wide it would sit email and password
   side by side. */
.fdAuthPage .activate-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 18px; }

/* the "Show"/"Hide" control that shares .activate-label-row with the label */
.fdAuthPage .activate-pw-toggle {
  font-size: 12px;
  font-weight: 500;
  color: #1F5C8B;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer; }

.fdAuthPage .activate-pw-toggle:hover {
  color: #14425f;
  text-decoration: underline; }

/* remember-me on the left, forgot-password on the right */
.fdAuthPage .activate-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap; }

/* A plain checkbox rather than the citizen theme's .gworks-object-checkbox,
   which draws its own orange box and fights this palette. Only the
   gworks-evt-rememberMe hook matters to citizen.public.js, not the wrapper. */
.fdAuthPage .activate-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  color: #4a4a4a;
  cursor: pointer; }

.fdAuthPage .activate-check input {
  width: 15px;
  height: 15px;
  accent-color: #1F5C8B;
  margin: 0; }

.fdAuthPage .btn-activate-block {
  display: block;
  width: 100%; }

/* Everything under the submit button: guest payment, create-account, the help
   PDF and - per POV1-4699 - "find your account", moved down from the title
   row where the activation flow keeps it. */
.fdAuthPage .activate-card-foot {
  border-top: 1px solid #e5e5e5;
  margin-top: 22px;
  padding-top: 18px;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.7; }

.fdAuthPage .activate-card-foot > * + * {
  margin-top: 8px; }

/* The design system's standard text link: navy, medium weight. Plain links on
   these pages keep the citizen theme's slate; this is for the ones the mock-ups
   call out, starting with "Create a new account" (POV1-4739). */
.fdAuthPage .activate-link {
  color: #1F5C8B;
  font-weight: 500; }

.fdAuthPage .activate-link:hover {
  color: #14425f; }

/* Keyboard focus ring (POV1-4739). common.scss clears the outline on *:focus
   for both portals, so without this nothing here shows where focus is. Scoped
   to the account pages this shell is used for, and to :focus-visible, so it
   appears for keyboard navigation only and a mouse click looks as it did.
   Same ring as .activate-method:focus. */
.fdAuthPage a:focus-visible,
.fdAuthPage button:focus-visible,
.fdAuthPage input[type="checkbox"]:focus-visible {
  outline: 2px solid #1F5C8B;
  outline-offset: 2px; }

/* the footer is dark navy, so a navy ring would vanish there */
.fdAuthPage .activate-footer a:focus-visible {
  outline-color: #ffffff; }

@media (max-width: 575px) {
  .fdAuthPage {
    padding: 0; }
  .fdAuthPage .activate-shell {
    border-radius: 0;
    border-left: none;
    border-right: none; }
  .fdAuthPage .activate-body {
    padding: 20px 16px 26px; }
  .fdAuthPage .activate-intro {
    padding: 20px 16px 0; }
  .fdAuthPage .activate-banner {
    height: 110px; }
  .fdAuthPage .activate-card {
    padding: 20px; }
  .fdAuthPage .activate-footer {
    padding: 22px 16px; }
  .fdAuthPage .activate-methods {
    display: flex;
    width: 100%; }
  .fdAuthPage .activate-method {
    flex: 1 1 auto;
    text-align: center; } }