/* CSS Property of MileOne Autogroup */
html {    
    scroll-behavior: smooth;
  } 
/* RunMyLease Button Pulse Styling -- Start */
.vehicle-card-detailed .rmlPriceButton {
   position: relative;
   z-index: 1;
}    
.vehicle-card-detailed:hover .rmlPriceButton::after {
   content: "";
   position: absolute;
   top: -3px;
   left: -3px;
   right: -3px;
   bottom: -3px;
   border-radius: var(--btn-border-radius-base, 4px);
   outline: 4px solid #1a9d00;
   outline-offset: -6px;
   z-index: 1000;
   animation: pulse 1.5s ease infinite;
}
    
@keyframes pulse {
   0%, 100% {
      outline-color: #1a9d00;
   } 50% {
      outline-color: #39FF14;
   }
}
/* RunMyLease Button Pulse Styling -- End */     
.diff-copy { 
     display: block; 
     width: 100%;
     padding: 0px 15px 30px 15px;
   }

.desktop-hidden { display: none !important; }

.mo-page-header {
    color: #ececeb !important;
}

.mo-section-titles {
    color: #00a3e0 !important;
    text-align:center !important;
    padding-top: 20px; !important;
}

.mo-body-copy-content {
    font-size: 18px;
    line-height: 135%;
    text-align: center;
    color: #343741;
}
.mo-warranty-table {
    background-color: #F2FBFE !important;
    border: 1px solid #00a3e0 !important;
}
.mo-warranty-bar1 {
    background-color: #9cadb7 !important;
}
.mo-warranty-bar2 {
    background-color: #00a3e0 !important;
}
.mo-maint-table {
    background-color: #FFFDF8 !important;
    border: 1px solid #FFC200 !important;
}
.mo-maint-bar1 {
    background-color: #9cadb7 !important;
}
.mo-maint-bar2 {
    background-color: #FFC200 !important;
}
.mo-button {
    position: inherit;
    width: 275px;
    top:50%;
    background-color:#00a3e0;
    color: #fff;
    border:none;
    border-radius:99px;
    -webkit-border-radius:99px;
    -moz-border-radius:99px;
    padding: 18px 20px;
    font-size: 15px;
}
.mo-button:hover {
    background-color: #FFC200 !important;
    border-radius: 99px !important;
    -webkit-border-radius:99px !important;
    -moz-border-radius:99px !important;
    transition: 150ms;
}
.mo-button-link {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
/* Overwrite DDC Form button styling Start */
#Warranty_Maintenance_Form .type-1, #Warranty_Maintenance_Form .ddc-box-1 {
    background-color: transparent !important;
}
#Warranty_Maintenance_Form .btn-primary.btn:not(.btn-no-decoration):before {
    content: '' !important;
}
#Warranty_Maintenance_Form .btn, #Warranty_Maintenance_Form .btn-primary {
    width: 150px !important;
    top:50% !important;
    background-color:#00a3e0 !important;
    color: #fff !important;
    border:none !important;
    border-radius:99px !important;
    -webkit-border-radius:99px !important;
    -moz-border-radius:99px !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    text-align: center !important;
}
#Warranty_Maintenance_Form .btn:hover, #Warranty_Maintenance_Form .btn-primary:hover {
    background-color: #ffcf01 !important;
    border-radius: 99px !important;
    -webkit-border-radius:99px !important;
    -moz-border-radius:99px !important;
    transition: 150ms;
}
/* Set Content for IPPM page */
#ippmHeader {
background: transparent;
background-image: linear-gradient(#ffc20d,#ffcf01)
}
.ippm-button {
    position: inherit;
    width: 275px;
    top:50%;
    background-color:#343741;
    color: #fff;
    border:none;
    border-radius:99px;
    -webkit-border-radius:99px;
    -moz-border-radius:99px;
    padding: 18px 20px;
    font-size: 15px;
}
.ippm-button:hover {
    background-color: #00a3e0;
    border-radius: 99px !important;
    -webkit-border-radius:99px !important;
    -moz-border-radius:99px !important;
    transition: 150ms;
}
.right-align-button, .left-align-button {
padding:15px;
}
/* Begin tabbed widget styles */

.tabinator {
  background: #ffffff;
  font-family:'Muller-Regular', sans-serif;
}
.tabinator input {
  display: none;
}
.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #9cadb7;
  margin-bottom: -5px;
  margin-left: -3px;
  background-color: #e1e1e1;
  border: 0;
  font-family:'Muller-Regular', sans-serif;
}
.tabinator label:hover {
  color: #343741;
  cursor: pointer;
  background-color: #ffcf01;
}
.tabinator input:checked + label {
  position: relative;
  color: #ffffff;
  background: #00a3e0;
  transition: 150ms;
}
.tabinator input:checked + label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
#content1, #content2, #content3, #content4, #content5, #content6 {
  display: none;
  padding: 30px 10px;
  transition: 150ms;
}
#tab1:checked ~ #content1,
#tab1:checked ~ #content4,
#tab2:checked ~ #content2,
#tab2:checked ~ #content5,
#tab3:checked ~ #content3,
#tab3:checked ~ #content6  {
  display: flex;
  transition: 150ms;
}
/*Columns*/
.tab-columns {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.tab-columns .mo-button {
    position: inherit;
    width: 275px;
    top:50%;
    background-color:#00a3e0;
    color: #fff;
    border:none;
    border-radius:99px;
    -webkit-border-radius:99px;
    -moz-border-radius:99px;
    padding: 18px 20px;
    font-size: 15px;
}
.tab-columns .mo-button:hover {
    background-color: #ffcf01;
    border-radius: 99px !important;
    -webkit-border-radius:99px !important;
    -moz-border-radius:99px !important;
    transition: 150ms;
}
.tab-columns .mo-button-link {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}  
.tab-column {
    max-width: 100%;
    padding: 10px;
}
.tab-col-10 {
    width: 100%;
}  
.tab-col-8 {
    width: 80%;
}   
.tab-col-5 {
    width: 50%;
}  
.tab-column.tab-col-1, 
.tab-column.tab-col-11, 
.tab-column.tab-col-10, 
.tab-column.tab-col-9, 
.tab-column.tab-col-8, 
.tab-column.tab-col-7, 
.tab-column.tab-col-6, 
.tab-column.tab-col-5, 
.tab-column.tab-col-4, 
.tab-column.tab-col-3, 
.tab-column.tab-col-2, 
.ctab-olumn.tab-col-1 {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
} 
.mo-filter-links {
    color: #00a3e0;
    font-weight: bold;
    text-decoration: none;    
}
.mo-filter-links:hover {
    color: #343741;
    font-weight: bold;
    text-decoration: none;
    transition: 200ms;
}
.mo-filter-links:hover {
   text-decoration: underline !important;  
}
.mo-filter-heading {
    font-size: 16px;
    font-weight: normal;
    padding: 15px;
    margin-top: 10px;
    text-align:center;
    color: #343741;  
}
.mo-spacer {
  padding:5px;  
}
.mo-standard {
    background: #fff;
    border: 1px solid #f0f1f4;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;  
}
.mo-warranty {
    background: #fff;
    border: 1px solid #00a3e0;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}
.mo-warranty:hover {
    background-color: #F2FBFE !important;
    outline: 2px solid #00a3e0;
    outline-offset: -2px;
    transition: 150ms;
}
.mo-maint {
    background: #fff;
    border: 1px solid #FFC200;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}

.mo-maint:hover {
    background-color: #FFFDF8 !important;
    outline: 2px solid #FFC200;
    outline-offset: -2px;
    transition: 150ms;
}  
.mo-maint-spotlight {
    background: #ffcf01;
    border: 1px solid #ffcf01;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}
.mo-maint-spotlight:hover {
    background-color: #ffdf66 !important;
    outline: 2px solid #ffcf01;
    outline-offset: -2px;
    transition: 150ms;
}
.mo-standard .mo-card-title, .mo-maint-spotlight .mo-card-title {
    color: #343741;
    font-weight:bold;
    font-size: 20px;
}
.mo-maint .mo-card-title, .mo-warranty .mo-card-title {
    color: #00a3e0;
    font-weight:bold;
    font-size: 20px;
}
.mo-standard .mo-card-subtitle, .mo-maint .mo-card-subtitle, .mo-warranty .mo-card-subtitle, .mo-maint-spotlight .mo-card-subtitle {
    color: #343741;
    font-size: 15px;
    padding-top: 5px;
}
/* Begin back to top arrow styles */
.mo-mobile-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}        
.mo-scrollToTopBtn {
  background-color: #00a3e0;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  width: 66px;
  height: 66px;
  font-size: 18px;
  line-height: 48px;

  /* place it at the bottom right corner */
  position: fixed;
  bottom: 80px;
  right: 20px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all 0.5s ease;
}
.mo-showBtn {
  opacity: 1;
  transform: translateY(0);
}  
.mo-arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.mo-up {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.mo-fade-in {
  opacity:0;
  transform: translateY(10%);
  transition: all 1s ease-out;
}
.mo-active {
  opacity: 4;
  transform: translateY(0);
}
/* Begin mobile styles */
@media only screen and (max-width: 500px) {
.mo-page-title { font-size: 39px !important; line-height: 115% !important; }
.mo-section-titles { font-size: 23px !important; }
.header-padding { padding: 20px 10px !important; }
.mobile-hidden { display: none !important; }
.mobile-show { display: block !important; }
.tab-col-5 { width: 100% !important; }
.break { display: none !important; }
.mo-spacer { padding: 10px !important; }
.tab-column { padding: 5px !important; }
.tabinator label { padding: 15px !important; }
.body-copy { display: block; width: 100% !important; }
.card, .card-promote, .card-spotlight { margin: 0px !important; padding: 25px !important; }
table[class="responsive-table"] { margin: 0px auto; width: 100% !important; }
.responsive-td { width: 100% !important; display: block !important; padding: 0px !important; max-width:100% !important; }
.mo-button, .ippm-button { width: 100% !important; }
.break { display: none !important; }
.mo-maint-content-block {padding-top: 30px !important;}
.left-align-button, .right-align-button { display: block; margin: 0px auto; float: none !important; width: 100% !important; }
.ippm-button:hover { background-color: #343741 !important; border-radius: 99px !important; -webkit-border-radius:99px !important; -moz-border-radius:99px !important; transition: 0ms;}
 
/* warranty form background color override */

#Warranty_Maintenance_Form .type-1 {
    background-color: transparent !important;
}

/* Begin back to top arrow mobile styles */

.mo-mobile-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}    
    
.mo-scrollToTopBtn {
  background-color: #00a3e0;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  width: 66px;
  height: 66px;
  font-size: 18px;
  line-height: 48px;

  /* place it at the bottom right corner */
  position: fixed;
  bottom: 80px;
  right: 20px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all 0.5s ease;
}
.mo-showBtn {
  opacity: 1;
  transform: translateY(0);
}  
.mo-arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.mo-up {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.mo-fade-in {
  opacity:0;
  transform: translateY(10%);
  transition: all 1s ease-out;
}
.mo-active {
  opacity: 4;
  transform: translateY(0);
}
}
/* Internal Acquisition Tools */
    #moPopupOverlay { 
      position: fixed;
      inset: 0;
      z-index: 999999999;
      background: rgba(0, 0, 0, 0.8);  
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.3s ease-in-out;
    }
    #closePopupBtn {
      position: absolute;
      top: -50px;
      right: 10px;
      color: white;
      font-size: 30px;
      background: none;
      border: none;
      cursor: pointer;
    }
    #moSellTradeForm * {
      box-sizing:border-box;
    }      
    #moSellTradeForm {
      color: #343741;
    }    
    .mo-st-header-wrapper {
      display:flex;
      justify-content:space-between;
      align-items:top;
      padding:0px 0px 35px;
    }  
    .mo-st-header-container {
      position:relative;
      top:20px;
    }  
    .mo-st-header-container strong {
      display:block;
      font-size: 26px;
      font-weight:bold;
      color: #00a3e0;
    }  
    .mo-st-header-container span {
      font-size: 12px;
    }  
    .mo-kbb-logo span {
      position:relative;
      top:-25px;
      font-size: 11px;
    }
    .mo-st-form-wrapper * {
      transition:400ms;
    }
    .mo-st-form-wrapper {
      width: 100%;
      font-size: 17px;
      max-width: 700px;
      margin: 15px auto;
      background: #fff;
      box-sizing: border-box;
      border-radius: 20px;
      padding: 0px 30px 30px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }
    .mo-st-tabs {
      display: flex;
      margin-bottom: 25px;
      border-radius: 10px;
      overflow: hidden;
      background: #f1f1f1;
    }
    .mo-st-tab {
      flex: 1;
      padding: 15px 15px 15px;
      text-align: center;
      color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: background 0.5s;
    }
    .mo-st-tab.active {
      background: #00a3e0;
      color: white;
    }
    .mo-st-form-section {
      display: none;
      animation: fadeIn 0.3s ease-in-out;
    }
    .mo-st-form-section.active {
      display: block;
    }
    .mo-st-form-row1, .mo-st-form-row2 {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }
    .mo-st-form-row3 {
      margin-bottom: 21px;
    }
    .mo-st-form-row4 {
      display: flex;
      align-items:center;
      gap: 15px;
      margin-bottom: 20px;
      flex: 0 0 auto;
    }
    .mo-st-form-row4 .radio-wrapper {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:10px 0;
    }
    .radio-inner {
      display:flex;
    }
    .radio-inner label,
    .radio-inner input {
      display: block;
      text-align:center;
      line-height:30px;
      transition: transform 0.25s ease;
    }
    .radio-inner input[type="radio"] {
      opacity: 0.01;
      position:absolute;
      z-index: 100;
    }
    .radio-inner input[type="radio"]:checked+label {
      background: #00a3e0;
      border-color:#00a3e0;
      color: #ffffff;
      font-weight:600;
    }
    .radio-inner label {
      padding: 5px;
      width:65px;
      background: transparent;
      color: #d1d1d1;
      border: 1px solid #d1d1d1;
      cursor: pointer;
    }
    .label-left {
      border-radius:10px 0 0 10px;
    }
    .label-right {
      border-radius:0 10px 10px 0;
    }
    .mo-st-form-row3 input {
      display: flex;
      margin: 10px auto 10px;
      padding: 20px;
      padding-right: 40px;
      border-radius: 12px;
      border: 1px solid #ccc;
      font-size: 16px;
      width: 100%;
      background-color: #fff;
      text-transform:uppercase;
    }
    .mo-vin-container {
      display:flex;
      margin-top: 34px;
      justify-content:space-between;
      align-items:baseline;
    }
    .mo-vin-container label {
      /* Force default styling */      
    }
    .mo-vin-container button {
      background-color:transparent;
      border:0;
      border-radius:0;
      padding:0;
      font-size: 12px;
      color: #00a3e0;
      transition:500ms;
      cursor:pointer;
    }
    .mo-vin-container button:hover {
      text-decoration:underline;
    }
    .mo-vin-error {
      font-size: 16px;
      color: #b53737;
      transition:500ms;
    }
    .mo-vin-success {
      font-size: 16px;
      color: #0b6623;
      transition:500ms;
    }
  
    /* Wrapper for select with custom arrow */
    .mo-select-wrapper {
      position: relative;
      flex: 1;
    }
    .mo-select-wrapper select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 20px;
      padding-right: 40px;
      border-radius: 12px;
      border: 1px solid #ccc;
      font-size: 16px;
      width: 100%;
      color: #343741;
      background-color: #fff;
      background-image: none; /* Remove default background */
    }
    .dis-arrow::after {
      content: "▾";
      position: absolute;
      right: 15px;
      top: 49%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: 18px;
      color: #bbbbbb;
    }
    .active-arrow::after {
      content: "▾";
      position: absolute;
      right: 15px;
      top: 49%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: 18px;
      color: #00a3e0;
    }
    .mo-st-submit-button {
      display: block;
      width: 100%;
      padding: 18px;
      font-size: 17px;
      background-color: #00a3e0;
      color: white;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      margin-top: 25px;
    }  
    input[type="text"]:focus-visible, select:focus-visible {
      outline-color: #00a3e0;
      outline-width:1px;
    }
    .mo-st-submit-button:hover,
    .mo-st-tab:hover {
      background-color: #ffc401;
      color: #fff;
    }
    input[type="text"]:hover, select:hover {
      background-color: #f4fcff;
      border:1px solid #00a3e0;
    }
    input[type="submit"]:disabled {
      background: #e1e1e1 !important;
      cursor: not-allowed; 
    }  
    input[type="text"]:disabled, select:disabled {
      color: #aaaaaa !important;
      cursor: not-allowed; 
    }
    input[type="submit"]:disabled {
      background: #e1e1e1 !important;
      cursor: not-allowed; 
    }  
    .mo-st-ban-wrapper {
      width:100%;
      background: linear-gradient(to right, #0075cf 40%, #00a3e0);
    }  
    .mo-st-ban-container {
      padding:20px;
      display:flex;
      gap:15px; 
      justify-content:space-between;
      align-items: center;
    }
    .mo-st-ban-inner-1 {
      flex: 1 1 40%;      
    } 
    .mo-st-ban-inner-2 {
      flex: 1 1 40%;  
      text-align:right;
    } 
    .mo-st-ban-inner h2,
    .mo-st-ban-inner h4,
    .mo-st-ban-inner h5 {
      color: var(--color-neutral-0);    
    } 
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 500px) {
     
    #moPopupOverlay .mo-st-form-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;    
      border-radius: 0 !important;
      border: 0 !important;
    }
    #closePopupBtn {
      position: relative;
      top: 0 !important;
      color: #343741 !important;
    }  
    .mo-st-header-container {
      top: 10px;
      line-height: 1.3em;
    }
    .mo-st-header-wrapper {
      padding:0px 0px 45px;
    }
    .mo-st-form-wrapper {
      max-width:95%;
    }
    .mo-st-form-row2 {
      flex-direction: column;
    }
    .mo-st-form-row2 {
      width: 100% !important;
    }
    .mo-st-form-row3 input {
      margin: 10px auto 45px;
    }
    .mo-custom-select-wrapper {
      width: 100% !important;
    }
    input[type="text"],
    select {
      padding: 15px;
      font-size: 16px;
    }
    .mo-st-submit-button {
      font-size: 18px;
      padding: 16px;
    }
    .mo-st-form-row4 .radio-wrapper {
      flex-direction:column;
      gap:20px;
      padding: 10px 0;
    }
    .radio-inner,
    .radio-inner label {
      width:100%;
    }
    .radio-div {
      width:50%;
    }  
    .mo-st-ban-wrapper {
      background: linear-gradient(to bottom, #0075cf 40%, #00a3e0);
    }  
    .mo-st-ban-container {
      flex-direction:column;
      align-items:center;
      gap:25px;
    }  
    .mo-st-ban-inner-1 {
      flex: 1 1 100%;      
    } 
    .mo-st-ban-inner-2 {
      flex: 1 1 100%;  
      text-align:center;
    } 
    .mo-st-ban-inner h2,
    .mo-st-ban-inner h4,
    .mo-st-ban-inner h5 {
      text-align:center !important;    
    } 
  }