/*
    DJANGO Quote styles
*/

@import url(fonts.css);

@media print {
  .pagebreak {
    clear: both;
    page-break-after: always;
  }
  .page-break-quote {
    page-break-before: always;
    margin-top: 10px;
  }
  .page-break-image {
    page-break-inside: avoid;
  }
  .page-break-table {
    page-break-inside: avoid;
  }
  .noprint{
      display:none;
  }
}

@media (min-width: 1200px) {
  .ticker-custom-container {
    max-width: 1260px;
  }
}

@page {
    size: letter;
    margin-top: 10.0mm;
    margin-right: 0.0mm;
    margin-bottom: 10.0mm;
    margin-left: 0.0mm;
    @bottom-center {
        content: 'INFINITI HR℠ Quick Quote™ - Page ' counter(page) ' of  ' counter(pages);
        font-size: 8.5px;
        font-family: Verdana;
    }

}

video{
  position:relative;
  display:block;
  width:100%;
}

.hidden {
  display: none;
}

.form-row.row-hidden {
    visibility: hidden;
}

.float-right{
  position:absolute;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.custom-container {
    max-width: 70%;
    margin: 0 auto; /* This centers the container horizontally */
}
/* Ensure the container is using display flex */
.content-container {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    height: 100%; /* Optional: Adjust height as needed */
}

/* Example of adding styles directly to the specific sections if they're not in a flex container */
.main-application-content, .main-quoting-content, .side-application-content, .side-quoting-content {
    /* text-align: center; Centers the text and inline elements within */
    margin: auto; /* Useful for block elements to center horizontally */
    width: 96%; /* Adjust width as needed, or use max-width for responsiveness */
}

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

.icon-toggle .fa {
    transition: color 0.3s ease;
}

.button .icons-container .fa {
    transition: color 0.3s ease;
}

.card-header .btn-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap; /* This prevents wrapping */
}

/* Hide scrollbar by default */
.ticker::-webkit-scrollbar {
    width: 0; /* For Chrome, Safari, and Opera */
    height: 0; /* For horizontal scrolling (if needed) */
}
.ticker {
    -ms-overflow-style: none; /* For IE and Edge */
    scrollbar-width: none; /* For Firefox */
}

/* Show scrollbar on hover */
.ticker:hover::-webkit-scrollbar {
    width: 8px; /* Adjust width as desired */
    height: 8px; /* For horizontal scrolling (if needed) */
}
.ticker:hover {
    -ms-overflow-style: auto; /* For IE and Edge */
    scrollbar-width: auto; /* For Firefox */
}

/* Optional: Style the scrollbar */
.ticker:hover::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 4px;
}
.ticker:hover::-webkit-scrollbar-thumb:hover {
    background-color: grey;
}

.fa-writable {
    font-size: 24px;
    color: green;
}

.fa-readonly {
    font-size: 24px;
    color: red;
}

.fa-dithered {
    color: #065d3e;
    padding: 0 0 0 0.5rem;
}

.chat-container {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 60px;
}

.chat-box {
  display: none; /* Hidden by default */
  width: 300px;
  max-height: 400px;
  border: 1px solid #666;
  background-color: #f9f9f9;
  border-radius: 15px;
  overflow: hidden;
}

.chat-header {
  background-color: #065d3e;
  color: white;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.chat-messages {
  padding: 10px;
  height: 300px;
  overflow-y: auto;
}

.chat-input {
  padding: 10px;
  background-color: #ddd;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.chat-input input {
  padding: 5px;
  width: calc(100% - 0px);
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.chat-input button {
  padding: 5px 10px;
  background-color: #0cc685;
  color: white;
  border: none;
  border-radius: 5px;
}

#open-chat {
  /* display: none; Hidden by default */
  /* padding: 10px 20px; */
  /*   background-color: #065d3e; */
  /*   color: white; */
  /*   border: none; */
  border-radius: 20px;
  /*   cursor: pointer; */
}

.results-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.results-table th, .results-table td {
    text-align: left;
    padding: 8px;
}

.results-table th {
    background-color: #f2f2f2;
}

.qq_link_lg
{
  color: #065d3e;
  font-size: 20px;
  font-weight: 280;
  font-family: Verdana
}

.qq_link_md
{
  color: #032e1f;
  font-size: 18px;
  font-weight: 240;
  font-family: Verdana
}

.qq_link_sm
{
  color: #032e1f;
  font-size: 17px;
  font-weight: 240;
  font-family: Verdana
}

.qq-btn-flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 40px;
}

.qq-btn-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 40px;
  padding: 0px 4px 0px 22px;
}

.qq-btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 40px;
  padding: 0px 4px 0px 22px;
}

.qq-btn-card-right {
  padding: 4px 4px 0px 0px;
}

.qq-btn-card-right-xl {
  height: 20px;
  padding: 2px 26px 0px 0px;
  background-color: #ffffff;
}

.display-6-bold {
  color: #032e1f;
}

.jumbotron {
  background-color: #c3d5cf;
  color: #000000;
}

.progress {
  height: 24px;
  text-align: center; /* To center it horizontally (if you want) */
}

.progress-bar {
  background-color: #065d3e;
  text-align: center; /* To center it horizontally (if you want) */
  color: #ffffff;
}

.quote-blank-hr-sm {
  margin-top: 1rem;
  margin-bottom: 0rem;
  border: 0;
}

.quote-blank-hr-md {
  margin-top: 2rem;
  margin-bottom: 0rem;
  border: 0;
}

.quote-blank-hr-lg {
  margin-top: 3rem;
  margin-bottom: 0rem;
  border: 0;
}

.quote-blank-hr-xl {
  margin-top: 5rem;
  margin-bottom: 0rem;
  border: 0;
}

.custom-navbar-wrapper {
    max-width: 91.5625rem; /* 1465px ÷ 16 */
    margin-left: 2.25rem;   /* 36px left margin */
    margin-right: auto;
    width: 100%;
}

.navbar-brand {
    margin: 6px 0px 0px 22px;
}

.navbar-container {
  width: 26rem;
  vertical-align: middle;
}

.navbar-admin {
    max-height: 48px;
    min-height: 48px;
    background-color: #032e1f;
}

.navbar-quote{
    max-height: 48px;
    min-height: 48px;
    background-color: #065d3e;
}

.navbar-quote-detail{
    min-height: 80px;
    max-height: 144px;
    background-color: #065d3e;
}

.navbar-brand-text-bold {
    font-size: 28px;
    font-weight: 240;
    color: #ffffff;
    padding: 0px 0px 0px 22px;
}

.navbar-brand-text {
    font-size: 24px;
    font-weight: 280;
    font-family: Verdana;
    color: #ffffff;
    padding: 0px 0px 0px 22px;
}

.navbar-text-xs {
    font-size: 10px;
    font-weight: 140;
    font-family: Verdana;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
}

.navbar-text-sm {
    font-size: 16px;
    font-weight: 140;
    font-family: Verdana;
    color: #ffffff;
    padding: 8px 0px 8px 0px;
}

.navbar-text-disclaimer-sm {
    font-size: 14px;
    font-weight: 160;
    font-family: Verdana;
    color: #000000;
    padding: 10px 0px 0px 0px;
}

.navbar-text-disclaimer-xs {
    font-size: 11px;
    font-weight: 160;
    font-family: Verdana;
    color: #000000;
    padding: 10px 0px 0px 0px;
}

.navbar-text-md {
    font-size: 20px;
    font-weight: 240;
    font-family: Verdana;
    color: #ffffff;
    padding: 12px 0px 12px 0px;
}

.navbar-text-lg {
    font-size: 40px;
    font-weight: 90;
    font-family: Verdana;
    color: #ffffff;
    padding: 16px 0px 16px 0px;
}

.navbar-text-xl {
    font-size: 48px;
    font-weight: 60;
    font-family: Verdana;
    color: #ffffff;
    padding: 20px 0px 20px 0px;
}

.navbar-text-xxl {
    font-size: 54px;
    font-weight: 60;
    font-family: Verdana;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
}

.navbar-tag-text-xxs {
    font-size: 4px;
    font-weight: 120;
    color: #000000;
    padding: 0px 0px 0px 0px;
}

.navbar-tag-text-xs {
    font-size: 10px;
    font-weight: 140;
    color: #000000;
    padding: 0px 0px 0px 0px;
}

.navbar-tag-text-sm {
    font-size: 16px;
    font-weight: 140;
    color: #000000;
    padding: 8px 0px 8px 0px;
}

.navbar-tag-text-md {
    font-size: 22px;
    font-weight: 240;
    color: #000000;
    padding: 12px 0px 12px 0px;
}

.navbar-tag-text-lg {
    font-size: 40px;
    font-weight: 90;
    color: #000000;
    padding: 16px 0px 16px 0px;
}

.navbar-tag-text-xl {
    font-size: 48px;
    font-weight: 60;
    color: #000000;
    padding: 20px 0px 20px 0px;
}

.navbar-tag-text-xxl {
    font-size: 54px;
    font-weight: 60;
    color: #000000;
    padding: 0px 0px 0px 0px;
}

.nav-link-text-wht{
   font-size: 14px;
   font-weight: 600;
   color: #ffffff;
}

.nav-link-text-blk{
   font-size: 1.25rem;
   font-weight: 600;
   color: #000000;
}

.nav-link-text-red{
   font-size: 1.25rem;
   font-weight: 600;
   color: red;
}

.nav-link-text-grn{
   font-size: 1.25rem;
   font-weight: 600;
   color: green;
}

/* Override the color attribute for the nav-link */
.nav-link.active#edit-quote-tab {
    color: #032e1f; 
}

.nav-link.active#quote-tab {
    color: #032e1f; 
}

.nav-link.active#lcb-tab {
    color: #032e1f; 
}

.nav-link.active#composite-tab {
    color: #032e1f; 
}

/* Override the color attribute for the nav-link */
.nav-link#edit-quote-tab {
    color: #0b9b69;
}

.nav-link#quote-tab {
    color: #0b9b69;
}

.nav-link#lcb-tab {
    color: #0b9b69;
}

.nav-link#composite-tab {
    color: #0b9b69;
}

/* Override the hover attribute for the nav-link */
.nav-link#edit-quote-tab:hover {
    color: #0cc685; /* Set your desired hover color */
    background-color: transparent; /* Set your desired hover background color */
}

.nav-link#quote-tab:hover {
    color: #0cc685; /* Set your desired hover color */
    background-color: transparent; /* Set your desired hover background color */
}

.nav-link#lcb-tab:hover {
    color: #0cc685; /* Set your desired hover color */
    background-color: transparent; /* Set your desired hover background color */
}

.nav-link#composite-tab:hover {
    color: #0cc685; /* Set your desired hover color */
    background-color: transparent; /* Set your desired hover background color */
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.navbar-nav.navbar-icons {
    position: absolute;
    left: 20%;
    transform: translatex(30%);
}

.navbar-jumbo{
    max-height: 48px;
    min-height: 48px;
    color: #032e1f;
    background-color: #c3d5cf;
}

.navbar-disclaimer{
    max-height: 30px;
    min-height: 30px;
    color: #000000;
    background-color: #c3d5cf;
}

.navbar-disclaimer-detail{
    min-height: 30px;
    max-height: 30px;
    background-color: #c3d5cf;
}

.bordered {
    border: 2px solid green; /* green color */
}

.table-no-padding, .table-low-padding, .table-text-low-padding, .body-text-no-padding,
.btn-no-padding, .img-no-margin {
    margin: 0;
    padding: 0;
    border-width: 0;
}

.table-text-med-padding, .body-text-lg-padding {
    margin: 0;
    padding: 4px;
    border-width: 0;
}

.body-text-med-padding {
    margin: 0;
    padding: 2px 4px;
    border-width: 0;
}

.body-text-low-padding {
    margin: 0;
    padding: 0 0 2px 0;
    border-width: 0;
}

.body-text-xl-padding {
    margin: 0;
    padding: 8px 12px;
    border-width: 0;
}

.body-text-sm-margin {
    margin: 0 30px;
    padding: 0;
    border-width: 0;
}

.body-text-sm-margin-left {
    margin: 0 0 0 20px;
    padding: 0;
    border-width: 0;
}

.body-text-med-margin {
    margin: 0 0 0 44px;
    padding: 0;
    border-width: 0;
}

.btn-low-padding {
    margin: 0;
    padding: 0 0 0 4px;
    border-width: 0;
}

.btn-med-padding {
    margin: 0;
    padding: 0 0 0 6px;
    border-width: 0;
}

.btn-med-top-bottom-padding, .btn-lg-top-bottom-padding {
    margin: 0;
    padding: 4px 0;
    border-width: 0;
}

.img-low-margin {
    margin: 4px;
    padding: 0;
    border-width: 0;
}

.img-med-margin {
    margin: 8px;
    padding: 0;
    border-width: 0;
}

.img-lg-margin {
    margin: 20px;
    padding: 0;
    border-width: 0;
}

.img-xl-margin {
    margin: 40px;
    padding: 0;
    border-width: 0;
}

.btn-toolbar {
    width: 16rem;
}

.custom-control-input:checked ~ .custom-control-label.red::before {
  color: #fff;
  border-color: #B30000;
  background-color:red;
}

.custom-radio .custom-control-input:active ~ .custom-control-label.red::before {
    color: #fff;
    background-color: #ffa5a5;
}

.custom-radio .custom-control-input:focus ~ .custom-control-label.red::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25);
}

.card-group {
  margin: 0px 20px 0px 20px;
}

.card-header {
    background-color: #d7d7d7;
    text-decoration: none;
}

.card-body-icon {
    background-color: #c3d5cf;
}

.card-icon{
    background-color: #c3d5cf;
    border-color: #c3d5cf;
}

.card-side{
    background-color: #c3d5cf;
    border-color: #065d3e;
}

.card-background{
    background-color: #032e1f;
    border-color: #065d3e;
}

.card-header-text {
    font-size: 20px;
}

.scrolling-wrapper {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.card.card-width-fixed {
    width: 22rem;
}

.fa-icon-bm {
    font-size: 24px;
    color: #cc7b2b;
}

.fa-icon-sm {
    font-size: 24px;
    color: #c0c0c0;
}

.fa-icon-gm {
    font-size: 24px;
    color: #ffd700;
}

.fa-icon-dm {
    font-size: 24px;
    color: #a8cbbf;
}

.fa-icon-md {
    font-size: 36px;
    color: #0cc685;
}

.btn-group {
    z-index: 1051;
}

.modal-header {
    background-color: #d7d7d7;
}

.modal-size {
    max-width: 30rem;
}

.modal-body {
  height: 600px;
  overflow: auto
}

.modal-body-add-bus {
  height: 490px;
}

.modal-title {
    font-size: 22px;
    font-family: Verdana;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

.modal-text-lg {
    font-size: 20px;
    font-family: Verdana;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

.modal-text-md {
    font-size: 16px;
    font-family: Verdana;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

.modal-text-sm {
    font-size: 12px;
    font-family: Verdana;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

.fieldset.inline {
    display: inline;
}

.btn-dis {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    color: #032e1f;
    border-width: 1px;
    border-color: #032e1f;
    border-radius: 2px;
    background-color: #a8cbbf;
    height: 40px;
}

.btn-success.btn-quote.btn-sm {
    text-align: center;
    background-color: #0cc685;
    border-width: 1px;
    border-color: #026227;
    color: #ffffff;
    height: 30px;
}

.btn-quote {
    font-size: 18px;
    text-align: center;
    background-color: #0cc685;
    border-width: 1px;
    border-color: #026227;
    color: #ffffff;
    height: 40px;
}

.btn-primary-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #0075CC;
    border-width: 1px;
    border-color: #005899;
    color: #ffffff;
    height: 40px;
}

.btn-danger-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #da2700;
    border-width: 1px;
    border-color: #d02500;
    color: #ffffff;
    height: 40px;
}

.btn-primary-quote-md:hover {
  background-color: #005899;
}

.btn-secondary-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #575757;
    border-width: 1px;
    border-color: #000000;
    color: #ffffff;
    height: 40px;
}

.btn-hidden-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    border-width: 1px;
    border-color: #ffffff;
    color: #ffffff;
    height: 40px;
}

.btn-success.btn-success-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #0cc685;
    border-width: 1px;
    border-color: #026227;
    color: #ffffff;
    height: 40px;
}

.search-form {
    display: flex;
    align-items: center;
    justify-content: center; /* Adjust this if you want different alignment */
    flex-wrap: nowrap; /* Prevents wrapping */
    width: 50%; /* Adjust based on your design */
    margin: 0 auto; /* Center the form */
    padding: 20px;
    gap: 8px; /* Creates space between flex items */
}

.search-form .form-control {
    flex-grow: 1;
    margin-right: 8px; /* Space between field and button */
}

.btn-success.btn-success-iconified-md {
    flex: 0 1 auto; /* Button takes up auto space based on its content */
    padding: 0 12px;
    height: 38px; /* Ensure this matches the input height for alignment */
    margin-bottom: 1rem;
    color: white;
}

.btn.btn-card {
    padding: .025rem .75rem;
    font-size: 1.25rem;
    line-height: 1.5;
    box-shadow: 0 0 0;
    flex-wrap: nowrap; /* Ensures contents of the button do not wrap */
    overflow: hidden; /* Prevents overflow of text */
    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */
    white-space: nowrap; /* Prevents text wrapping */
}

.btn.btn-card-md {
    font-size: 1.25rem;
}

.btn-success.btn-success-quote-md:hover {
  background-color: #099564;
}

.placeholder-text-md {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
}

.btn-danger.btn-danger-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #ff2d00;
    border-width: 1px;
    border-color: #811700;
    color: #ffffff;
    height: 40px;
}

.btn-dithered-quote-md {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    background-color: #d7d7d7;
    border-width: 1px;
    border-color: #424242;
    color: #ffffff;
    height: 40px;
}

.btn-primary-quote-lg {
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
    background-color: #065d3e;
    border-width: 1px;
    border-color: #032e1f;
    color: #ffffff;
    height: 50px;
}

.btn-success-quote-lg {
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
    background-color: #0cc685;
    border-width: 1px;
    border-color: #026227;
    color: #ffffff;
    height: 50px;
}

.btn-primary.btn-quote.btn-md {
   font-size: 18px;
    text-align: center;
    background-color: #065d3e;
    border-width: 1px;
    border-color: #032e1f;
    color: #ffffff;
    height: 40px;
}

.btn-primary.btn-lg {
    text-align: center;
    background-color: #065d3e;
    border-width: 1px;
    border-color: #032e1f;
    color: #ffffff;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 10px;
    text-align: center;
    color: #ffffff;
    border-width: 1px;
    border-color: #026227;
    background-color: #0cc685;
}

.btn-circle.btn-md {
    width: 40px;
    height: 40px;
    padding: 7px 10px;
    border-radius: 20px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    border-width: 1px;
    border-color: #026227;
    background-color: #0cc685;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    border-width: 1px;
    border-color: #026227;
    background-color: #0cc685;
}

.btn-circle.btn-dis-sm {
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 10px;
    text-align: center;
    color: #032e1f;
    border-width: 1px;
    border-color: #032e1f;
    background-color: #a8cbbf;
}

.btn-circle.btn-dis-md {
    width: 40px;
    height: 40px;
    padding: 7px 10px;
    border-radius: 20px;
    font-size: 16px;
    text-align: center;
    color: #032e1f;
    border-width: 1px;
    border-color: #032e1f;
    background-color: #a8cbbf;
}

.btn-circle.btn-mute-md {
    width: 40px;
    height: 40px;
    padding: 7px 10px;
    border-radius: 20px;
    font-size: 16px;
    text-align: center;
    color: #a7a9ac;
    border-width: 1px;
    border-color: #a7a9ac;
    background-color: #a8cbbf;
}

.btn-circle.btn-dis-lg {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 20px;
    text-align: center;
    color: #032e1f;
    border-width: 1px;
    border-color: #032e1f;
    background-color: #a8cbbf;
}

.quote-horizontal-med{
    width: 68px;
    margin-top: 20px; /* !important; */
    margin-bottom: 0px; /* #!important; */
    margin-left: 0px;
    margin-right: 0px;
    border: 0;
    border-top: 1px solid #ffffff;
}

.quote-horizontal-dis-med{
    width: 68px;
    margin-top: 20px; /* !important; */
    margin-bottom: 0px; /* #!important; */
    margin-left: 0px;
    margin-right: 0px;
    border: 0;
    border-top: 1px solid #032e1f;
}

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

.header-title {
    margin-right: auto; /* Ensures that the title pushes everything else to the right */
}

.header-actions {
    display: flex;
    gap: 10px; /* Space between buttons */
    align-items: center;
}

.action-button {
    padding: 8px;
    display: flex; /* Makes sure icons and text are properly aligned */
}

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: #032e1f;
    font-weight: 240;
    font-size: 28px;
    color: #ffffff;
    overflow: hidden;
}

#header a:link, #header a:visited {
    color: #fff;
}

#header a:focus , #header a:hover {
    text-decoration: underline;
}

#branding {
    float: left;
}

#branding h1 {
    padding: 0;
    margin: 0 20px 0 0;
    font-weight: 300;
    font-size: 24px;
    color: #f5dd5d;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: #f5dd5d;
}

#branding h2 {
    padding: 0 10px;
    font-size: 30px;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: #ffc;
}

#branding a:hover {
    text-decoration: none;
}

#user-tools {
    float: right;
    padding: 0;
    margin: 0 0 0 20px;
    font-weight: 300;
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    text-align: right;
}

#user-tools a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover {
    text-decoration: none;
    border-bottom-color: #ffc107;
    color: #ffc107;
}

#user_agree_button {
    width: 100px;  /* Adjust the width as needed */
    height: 40px; /* Adjust the height as needed */
    margin: 0 auto; /* This will center the button if its parent container has a text-align: center; */
    display: block; /* This makes the button a block element, which respects the margin auto */
}

/* === Two-Factor Login layout === */
body.login.twofactor h1,
body.login.twofactor p,
body.login.twofactor form {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Fran Force Login header card */
body.login.twofactor h1 {
  background: #032e1f;          /* dark green background */
  color: #ffffff;               /* white text */
  padding: .75rem 1rem .5rem;
  margin-top: 2rem;
  margin-bottom: .5rem;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  text-align: center;
  font-size: 28pt;
  font-weight: 240;
}

/* Instructions: centered, separated, NO card look, placed lower */
body.login.twofactor p {
  font-size: 16px;            /* match the "Enter your credentials" line */
  background: transparent;    /* not part of a card anymore */
  color: #6c757d;             /* muted */
  text-align: center;
  margin-top: .5rem;
  margin-bottom: 1.25rem;     /* pushes the form down a bit */
  padding: 0;                 /* no padding so it doesn't look card-like */
}

/* Keep error notes readable and left-aligned */
body.login.twofactor p.errornote {
  text-align: left;
  color: #dc3545;
  font-weight: 500;
}

/* Form: restore card with shadow */
body.login.twofactor form {
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-top: 0;              /* sits right after the instruction line */
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);  /* ensure the shadow is on the FORM */
}

/* Fields spacing */
body.login.twofactor .form-group { margin-bottom: .75rem; }

/* Buttons not full-width */
body.login.twofactor .btn {
  display: inline-block;
  padding: .375rem 1.5rem;
  font-size: .9rem;
}

/* Make backup token button same size/shape as Verify */
body.login.twofactor button[name="wizard_goto_step"] {
  display: inline-block;      /* not full width */
  width: auto;                /* shrink to content */
  padding: .375rem 1.5rem;    /* match Verify */
  font-size: .9rem;
}

/* SMS header size/weight */
.sms-title {
  background: #032e1f;          /* dark green */
  color: #ffffff;               /* white text */
  font-size: 28px;
  font-weight: 240;             /* "240" falls back; 200 works reliably */
  margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* extend across card width */
  padding: 1rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

h3 { color: #032e1f; font-family:Verdana, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12pt; }
.h4, h4 { color: #032e1f; font-family:Verdana, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 10pt; }
.s1 { color: #0baa00; font-family:Verdana, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 5pt; }
.s2 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 8.5pt; }
.s4 { color: black; font-family:Tahoma, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 5pt; }
.s5 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 5pt; }
.s6 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 7pt; }
.s7 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9.5pt; }
p { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9pt; margin:0pt; }
.s8 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 6pt; }
.s9 { color: #FFF; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt; }
.s10 { color: #FFF; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9pt; }
.s11 { color: #0baa00; font-family:Verdana, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 6pt; }
.s12 { color: #FFF; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 5.5pt; }
.s13 { color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 5.5pt; }
.s14 { color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 3.5pt; }
.s15 { color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 5pt; }
.s16 { color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 7pt; }
.s18 { color: black; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 3pt; }
.s19 { color: #838279; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 49.5pt; }
.s20 { color: #676769; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 49.5pt; }
.s21 { color: #010101; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 49.5pt; }
.s22 { color: #365B48; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 11pt; }
.s23 { color: #AAAFAF; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 11pt; }
.s24 { color: #010101; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 11pt; }
.s25 { color: #2D5266; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 11pt; }
.s26 { color: #4B627E; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 11pt; }
.s27 { color: #D6382D; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 19.5pt; }
.s28 { color: #2382A3; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 19.5pt; }
.s29 { color: #BCC3C6; font-family:"Times New Roman", serif; font-style: italic; font-weight: normal; text-decoration: none; font-size: 19.5pt; vertical-align: 3pt; }
.h1 { color: #231F21; font-family:"Times New Roman", serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 16.5pt; }
.s30 { color: #D4A367; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 4pt; }
.s31 { color: #AAAFAF; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 4pt; }
.s32 { color: #CD8552; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 5pt; }
.s33 { color: #838279; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 5pt; }
.s34 { color: #344693; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 7pt; }
.s35 { color: #344693; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 6.5pt; }
.s36 { color: #344693; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 6.5pt; }
.h2 { color: #2D5266; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12.5pt; }
.s37 { color: #B3464F; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12.5pt; }
.s38 { color: #CF4B36; font-family:Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12.5pt; }
.s39 { color: #4B5997; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: 16.5pt; }
.s40 { color: #4B5997; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 16.5pt; }
.s41 { color: #4B627E; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 16.5pt; }
.s42 { color: #6E7C93; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 16.5pt; }
.s43 { color: #BF605E; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 16.5pt; }
.s44 { color: #31598E; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt; }
.s45 { color: #4D7595; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt; }
.s46 { color: #AAAFAF; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 3pt; }
.s47 { color: #BCC3C6; font-family:"Times New Roman", serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 3pt; }
.s48 { color: #525252; font-family:"Times New Roman", serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 3pt; }
.s49 { color: black; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 10pt; }
.s50 { color: #00F; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 10pt; }
li {display: block; }
#l1 {padding-left: 0pt;counter-reset: c1 1; }
#l1> li>*:first-child:before {counter-increment: c1; content: counter(c1, decimal)". "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l1> li:first-child>*:first-child:before {counter-increment: c1 0;  }
#l2 {padding-left: 0pt; }
#l2> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l3 {padding-left: 0pt; }
#l3> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l4 {padding-left: 0pt; }
#l4> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l5 {padding-left: 0pt; }
#l5> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l6 {padding-left: 0pt; }
#l6> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
li {display: block; }
#l7 {padding-left: 0pt; }
#l7> li>*:first-child:before {content: "• "; color: black; font-style: normal; font-weight: normal; text-decoration: none; }
#l8 {padding-left: 0pt; }
#l8> li>*:first-child:before {content: "• "; color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9pt; }
#l9 {padding-left: 0pt; }
#l9> li>*:first-child:before {content: "• "; color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9pt; }
li {display: block; }
#l10 {padding-left: 0pt;counter-reset: e1 1; }
#l10> li>*:first-child:before {counter-increment: e1; content: counter(e1, decimal)". "; color: black; font-family:Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 5pt; }
#l10> li:first-child>*:first-child:before {counter-increment: e1 0;  }
table, tbody {vertical-align: top; overflow: visible; }