/* logo color = #0D5D90 */
/* logo color = #0D5D90 */
#temp_vert_spacer {
  margin-bottom: 200px;   /* temporary for now to push footer down on home page */
}

.material-icons.md-16 { font-size: 16px; }    /* size needed for pagination control */
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/*************************************************************************************************/
/*                                         GENERAL STYLES                                        */
/*************************************************************************************************/
.trc-text-primary {
  color: #0D5D90;   /* color of logo background */
}

.trc-shaded-background {
  background-color: #F0F8FF;    /* Alice Blue */
}

.trc-font-large {
  font-size: large;
}

.trc-font-xlarge {
  font-size: x-large;
}

@media (max-width: 575.98px) {
  /* The x-large font size is too large on x-small screens, so for those screens we want a font size of "large"
     when using the trc-font-xlarge style */
  .trc-font-xlarge {
    font-size: large;
  }
}

.trc-font-weight-semi-bold {
  font-weight: 600;
}

.trc-font-weight-extra-bold {
  font-weight: 800;
}

.trc-lineheight-normal {
  line-height: normal;
}

.trc-no-wrap {
  white-space: nowrap;
}

.trc-list-style-inside {
  list-style: inside;
}

.trc-form label {
  font-weight: bold;
}

.has-error {
  /*border-color: #a94442;*/
  border-color: #dc3545;    /* bootstrap text-danger color */
}

.trc-error-msg {
  color: #dc3545;           /* bootstrap text-danger color */
}

.trc-step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.trc-step-list li {
  padding-left: 5em;
  font-weight: 500;
}

.trc-step-list li::before {
  counter-increment: step;
  content: "Step " counter(step) ": ";
  position: absolute;
  left: 0;
  font-weight: bold;
  padding-left: 2em;
}

textarea {
  resize: none;
}

h1 img {
  max-width: 100%;
  height: auto;
}

.trc-subtitle {
  font-size: 2rem;
}

@media (max-width: 575.98px) {
  /* Use a smaller font size for xs screens */
  .trc-subtitle {
    font-size: 1.5rem;
  }
}

/*************************************************************************************************/
/*                                       HOME PAGE STYLES                                        */
/*************************************************************************************************/
#zip_code_input {
  height: 62px;
}

#zip_code_area {
  /* Default width for extra-small screens.  Width will be adjusted based on screen size by media queries below */
  width: 90%;
}

/* Small screens */
@media (min-width: 576px) {
    #zip_code_area {
      width: 70%;
    }
}

/* Medium screens */
@media (min-width: 768px) {
    #zip_code_area {
      width: 55%;
    }
}

/* Large screens */
@media (min-width: 1024px) {
    #zip_code_area {
      width: 45%;
    }
}

/* Extra large screens */
@media (min-width: 1200px) {
    #zip_code_area {
      max-width: 35%;
    }
}

/* Extra Extra large screens */
@media (min-width: 1600px) {
    #zip_code_area {
        max-width: 25%;
    }
}


/*************************************************************************************************/
/*                                        MENU STYLES                                            */
/*************************************************************************************************/
.nav-item a {
  /*text-transform: uppercase;*/
  /*color: #033142;*/     /* complimentary - far left */
  /*color: #9C5B35;*/         /* compound - right */
  color: #0D5D90

}

.nav-item a:hover {
  /*color: #2AACDB;*/   /* complimentary - left */
  color: #C24825;       /* compound - far right */
}

.nav-item.active a,
.nav-item.active a:hover {
  color: #0D5D90;   /* logo color  */
  /*color: #C24825;*/      /* compound - far right */
  font-weight: bold;
}

/*************************************************************************************************/
/*                                     PROGRESS TRACKER STYLES                                   */
/*************************************************************************************************/
.progress_tracker_area {
  padding-top: 2em;
  padding-bottom: 5em;
  /*padding-bottom: 60px;*/
}

ol.progress_tracker[data-steps="2"] li { width: 49%; }
ol.progress_tracker[data-steps="3"] li { width: 33%; }
ol.progress_tracker[data-steps="4"] li { width: 24%; }
ol.progress_tracker[data-steps="5"] li { width: 19%; }
ol.progress_tracker[data-steps="6"] li { width: 16%; }
ol.progress_tracker[data-steps="7"] li { width: 14%; }
ol.progress_tracker[data-steps="8"] li { width: 12%; }
ol.progress_tracker[data-steps="9"] li { width: 11%; }

.progress_tracker {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.progress_tracker li {
  float: left;
  text-align: center;
  position: relative;
}

.progress_tracker .name {
  display: block;
  vertical-align: bottom;
  text-align: center;
  margin-bottom: 1em;
  color: black;
  opacity: 0.3;
}

.progress_tracker .step {
  color: black;
  border: 3px solid #eef2f4;
  background-color: #eef2f4;
  border-radius: 50%;
  line-height: 1.2;
  width: 2em;
  height: 2em;
  display: inline-block;
  z-index: 0;
}

.progress_tracker .step span {
    opacity: 0.3;
    font-size: smaller;
    font-weight: bold;
}

.progress_tracker .active .name,
.progress_tracker .active .step span {
  opacity: 1;
}

.progress_tracker .step:before {
    content: "";
    display: block;
    background-color: #eef2f4;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 3.5em;
    left: 0;
    z-index: -1;
}

.progress_tracker .step:after {
      content: "";
      display: block;
      background-color: #eef2f4;
      height: 0.4em;
      width: 50%;
      position: absolute;
      bottom: 3.5em;
      right: 0;
      z-index: -1;
}

.progress_tracker li.first_step_item .step:before {
  display: none;
}

.progress_tracker li.last_step_item .step:after {
  display: none;
}

.progress_tracker .done .step,
.progress_tracker .done .step:before,
.progress_tracker .done .step:after,
.progress_tracker .active .step,
.progress_tracker .active .step:before {
    color: white;
    background-color: #0D5D90;
}

.progress_tracker .done .step,
.progress_tracker .active .step {
    border: 3px solid #0D5D90;
}

.progress_tracker .done .step,
.progress_tracker .done .name {
  cursor: pointer;
}


/*************************************************************************************************/
/*                CUSTOMIZED BOOTSTRAP "PRIMARY BUTTON" STYLE TO MATCH LOGO COLOR                */
/*************************************************************************************************/
.badge-primary-trc {
    color: #fff;
    background-color: #0D5D90;
}

.badge-primary-trc[href]:hover, .badge-primary-trc[href]:focus {
    color: #fff;
    background-color: #083e61;
}

.bg-primary-trc {
    background-color: #0D5D90 !important;
}

a.bg-primary-trc:hover, a.bg-primary-trc:focus,
button.bg-primary-trc:hover,
button.bg-primary-trc:focus {
    background-color: #083e61 !important;
}

.border-primary-trc {
    border-color: #0D5D90 !important;
}

.btn-primary-trc {
    color: #fff;
    background-color: #0D5D90;
    border-color: #0D5D90;
}

.btn-primary-trc:hover {
    color: #fff;
    background-color: #0a476f;
    border-color: #083e61;
}

.btn-primary-trc:focus, .btn-primary-trc.focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 93, 144, 0.5);
}

.btn-primary-trc.disabled, .btn-primary-trc:disabled {
    color: #fff;
    background-color: #0D5D90;
    border-color: #0D5D90;
}

.btn-primary-trc:not(:disabled):not(.disabled):active, .btn-primary-trc:not(:disabled):not(.disabled).active, .show > .btn-primary-trc.dropdown-toggle {
    color: #fff;
    background-color: #083e61;
    border-color: #073553;
}

.btn-primary-trc:not(:disabled):not(.disabled):active:focus, .btn-primary-trc:not(:disabled):not(.disabled).active:focus, .show > .btn-primary-trc.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 93, 144, 0.5);
}

.btn-outline-primary-trc {
    color: #0D5D90;
    background-color: transparent;
    border-color: #0D5D90;
}

.btn-outline-primary-trc:hover {
    color: #fff;
    background-color: #0D5D90;
    border-color: #0D5D90;
}

.btn-outline-primary-trc:focus, .btn-outline-primary-trc.focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 93, 144, 0.5);
}

.btn-outline-primary-trc.disabled, .btn-outline-primary-trc:disabled {
    color: #0D5D90;
    background-color: transparent;
}

.btn-outline-primary-trc:not(:disabled):not(.disabled):active, .btn-outline-primary-trc:not(:disabled):not(.disabled).active, .show > .btn-outline-primary-trc.dropdown-toggle {
    color: #fff;
    background-color: #0D5D90;
    border-color: #0D5D90;
}

.btn-outline-primary-trc:not(:disabled):not(.disabled):active:focus, .btn-outline-primary-trc:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary-trc.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 93, 144, 0.5);
}

/*************************************************************************************************/
/*                             QUOTE REQUEST VEHICLES PAGE STYLES                                */
/*************************************************************************************************/
#vehicle_details_table_area {
  max-height: 15em;
  overflow-y: auto;
  border: 1px solid #dee2e6;
}

#vehicle_details_table {
  /*border: 1px solid black;*/
}

/*
.vehicle-details-area table {
  border: 1px solid black;
}
*/

/*#vehicle_details_table thead td {*/
.vehicle-details-area thead td {
  /*background-color: lightgray;*/
  /*background-color: #dfebec;*/
  background-color: #d3d9de;
  border-bottom: 1px solid #dee2e6;
}

/*#vehicle_details_table_body tr.selected td {*/
.vehicle-details-area tbody tr.selected td {
  background-color: #0D5D90;
  color: white;
  font-weight: bold;
}

#vehicle_details_table {
  /*height: 5em;*/
  /*max-height: 5em;*/
}

#vehicle_details_table thead {
  /*display: block;*/
}

#vehicle_details_table tbody {
  /*display: block;*/
  /*height: 100px;*/
  /*width: 100%;*/
  /*overflow-y: auto;*/
}

/*************************************************************************************************/
/*                              QUOTE REQUEST RESULTS PAGE STYLES                                */
/*************************************************************************************************/
#quote_results_area .col-form-label,
#quote_results_area .form-control-plaintext {
  padding-top: 0em;
  padding-bottom: 0em;
}

#quote_results_area .addl-payplans-popover-link {
  max-width: 100%;
}

/*************************************************************************************************/
/*                                      PROFILE PAGES STYLES                                     */
/*************************************************************************************************/
#view_profile_area label {
  font-weight: bold;
  margin-bottom: 0em;
}

#view_profile_area input.form-control-plaintext {
  padding-top: 0em;
  padding-bottom: 0em;
  line-height: normal;
}

#view_profile_area .card {
  border-color: #0D5D90;  /* primary-trc color */
}

/*************************************************************************************************/
/*                                        FAQ PAGES STYLES                                       */
/*************************************************************************************************/

.faq-anchor {
  background: whitesmoke;
  color: black;
}

.faq-anchor:hover {
  background: #e6e6e6;
  color: black;
  text-decoration: none;
}

.faq-ancher + .faq-anchor:hover {
  background: #e6e6e6;
}

.faq_item_answer {
  margin-top: .5em;
}

.faq_item_answer p {
  margin-left: 2.75em;
}

/*************************************************************************************************/
/*                                      LOGO TICKER STYLES                                       */
/*************************************************************************************************/
.ticker-container {
  width: 100%;
  overflow: hidden; /* Hide scroll bar */
}

@keyframes ticker {
  /* The "-2160" transform value is based on the number items * the width of each item (including margins).
     Our logos are 210px wide, and right how have a 30px right margin for a total width of 240px.
     There are currently 9 logos so 9 * 240 = 2160px.
     If aditional logos are added, will need to update value as appropriate.
  */
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-2160px, 0, 0); }
}

.logo-ticker {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 27s;    /* currently 3 seconds per logo */
}

.logo-ticker-item {
  margin-right: 30px;
}

/*************************************************************************************************/
/*                                      ADMIN PAGES STYLES                                       */
/*************************************************************************************************/
.admin-quote-details-form .form-group {
  margin-bottom: 0;
}

/*.admin-quote-details-form input:focus {
  border: none;

}*/

@media (min-width: 576px) {
  /* right align labels for sm screens and larger */
  .admin-quote-details-form label {
    text-align: right;
  }
}