/* CSS Property of MileOne Autogroup */

html {
    
    scroll-behavior: smooth;
  } 
     
.diff-copy { 
     display: block; 
     width: 100%;
     padding: 0px 15px 30px 15px;
   }

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

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

.mo-section-titles {
    color: #343741 !important;
}

.mo-warranty-table {
    background-color: #fff !important;
    border: 1px solid #343741 !important;
}

.mo-warranty-bar1 {
    background-color: #97989a !important;
}

.mo-warranty-bar2 {
    background-color: #343741 !important;
}

.mo-maint-table {
    background-color: #fff !important;
    border: 1px solid #343741 !important;
}

.mo-maint-bar1 {
    background-color: #97989a !important;
}

.mo-maint-bar2 {
    background-color: #343741 !important;
}

.mo-button {
    position: inherit;
    width: 275px;
    top:50%;
    background-color:#0066b1;
    color: #fff;
    border:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding: 18px 20px;
    font-size: 15px;
}

.mo-button:hover {
    background-color: #97989a !important;
    border-radius: 5px !important;
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !important;
    transition: 150ms;
}

.mo-button-link {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Overwrite DDC Form button styling Start */

#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:#0066B1 !important;
    color: #fff !important;
    border:none !important;
    border-radius:5px !important;
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !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: #97989a !important;
    border-radius: 5px !important;
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !important;
    transition: 150ms;
}

/* Overwrite DDC Form button styling End */

/* Begin tabbed widget styles */

.tabinator {
  background: #ffffff;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #97989a;
  margin-bottom: -5px;
  margin-left: -3px;
  background-color: #e1e1e1;
  border: 0;
}

.tabinator label:hover {
  color: #343741;
  cursor: pointer;
  background-color: #97989a;
}

.tabinator input:checked + label {
  position: relative;
  color: #ffffff;
  background: #0066b1;
  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:#0066b1;
    color: #fff;
    border:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding: 18px 20px;
    font-size: 15px;
}

.tab-columns .mo-button:hover {
    background-color: #97989a !important;
    border-radius: 5px !important;
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !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: #343741 !important;
    font-weight: bold;
    text-decoration: none;    
}

.mo-filter-links:hover {
    color: #343741 !important;
    font-weight: bold;
    text-decoration: none;
    transition: 200ms;
}

.mo-filter-links:hover {
   text-decoration: underline !important;  
}

.mo-filter-heading {
    font-size: 14px;
    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 #343741;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}

.mo-warranty:hover {
    background-color: #ececeb !important;
    outline: 2px solid #343741;
    outline-offset: -2px;
    transition: 150ms;
}

.mo-maint {
    background: #fff;
    border: 1px solid #97989a;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}

.mo-maint:hover {
    background-color: #ececeb !important;
    outline: 2px solid #97989a;
    outline-offset: -2px;
    transition: 150ms;
}
  
.mo-maint-spotlight {
    background: #ececeb;
    border: 1px solid #97989a;
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 40px 25px;
}

.mo-maint-spotlight:hover {
    background-color: #fdfdfd !important;
    outline: 2px solid #97989a;
    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: #343741;
    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;
}

/* End tabbed widget styles */

/* Begin back to top arrow styles */

.mo-mobile-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}    
    
.mo-scrollToTopBtn {
  background-color: #97989a;
  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);
}

/* End back to top arrow styles */

/* ---------- */

/* Begin mobile styles */

@media only screen and (max-width: 500px) {
 
.mo-page-title { font-size: 40px !important; line-height: 120% !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 { width: 100% !important; }
.break { display: none !important; }
 
/* Begin back to top arrow mobile styles */
 
.mo-mobile-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}    
    
.mo-scrollToTopBtn {
  background-color: #343741;
  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);
}
}

/* End back to top arrow mobile styles */