@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{font-family: "Roboto", sans-serif;font-weight: 400;font-style: normal;}
p{color:#707070}
h1{line-height: 58px;}
.home-header{background-image: url(../../assets/images/header-home.png);background-repeat: no-repeat;
  background-size:100% 100%;padding-top:10%;padding-bottom:10%;}
.support-header{background-image: url(../../assets/images/support-system.png);background-repeat: no-repeat;
      background-size:100% 100%;padding-top:14%;padding-bottom: 14%;}
.hsrp-sec{background-image: url(../../assets/images/bg-home.png);background-repeat: no-repeat;
  background-size:100% 100%;padding-top:10%;padding-bottom:10%;}
.text-blue{color: #1767B3;}
.text-black{color:#000000;}
.hsrp-sec-bdr-left{border-left:1px solid #1767B3;padding-right: 20px;}
.pl-20{padding-left: 20px;}
.btn-grey{background-color:#ECECEC;color: #000000;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-blue{text-decoration:none;background-color: #1767B3;color: #fff;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-blue:hover{text-decoration:none;background-color: #1767B3;color: #fff;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-dark{background-color: #000000;color: #fff;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-dark:hover{text-decoration:none;background-color: #1767B3;color: #fff;border: none;text-align: center;padding: 10px;}
.box-card{background-image: linear-gradient(to right, #082A71 , #1357E0);}
.btn-white{border-radius: 0;background-color: #fff;color: #114ECA;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-white:hover{border-radius: 0;background-color: #fff;color: #114ECA;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-state{border-radius: 0;background-color: #636567;color: #fff;border: none;text-align: center;padding: 10px;width: 100%;}
.btn-state:hover{border-radius: 0;background-color: #1767B3;color:#fff;border: none;text-align: center;padding: 10px;width: 100%;}
.apply-hsrp-header{background-image: url(../../assets/images/apply-hsrp-header.png);background-repeat: no-repeat;
  background-size:cover;padding-top:14%;padding-bottom: 14%;}
.form-control, .form-select {border-radius: 0%;border-color: #CCCCCC;font-size: 14px;}
.form-control:focus, .form-select:focus {box-shadow: none;}
.order-sec .nav-tabs {border:none;}
.order-sec .nav-link.active{border:none;outline: none;background-color: #000000;color: #fff;}
.order-sec .nav-link {border:none;outline: none;background-color: #E9EAEE;border-radius: 0%;color: #707070;}
.order-sec .nav-link:focus, .nav-tabs .nav-link:focus-visible, .nav-tabs .nav-link:hover{border:none;outline: none;background-color: #000000;color: #fff;}
.fitment-tab{height: 350px;overflow-y: scroll;}
.text-left{text-align: left;}
.bg-grey{background-color: #DEDEDE!important;}
.card{border-radius: 0;background: #FFFFFF 0% 0% no-repeat padding-box;box-shadow: 0px 3px 6px #00000066;border:none;}
.card-header{background: #FFFFFF;}
.bdr-none{border: none;}
.border-radius-0{border-radius: 0;}
#selectPlatecombination thead{background-color: #EFEFEF;text-align: center;font-weight: 700;}
#selectPlatecombination thead th{font-weight: 700;border: 1px solid #B7B7B7;}
#selectPlatecombination tbody td{color: #707070;font-size: 16px;border: 1px solid #B7B7B7;}
.navbar-expand-lg{}
#selectPlatecombination tbody td .form-check-input[type=checkbox] {border-radius: 1.25em;border: 1px solid #707070;}
#selectPlatecombination .modal-footer{box-shadow: 0px -3px 6px #00000029;}
.shadow-0{box-shadow: none;border: 1px solid #707070;}
.btn{border-radius: 0;}
.bg-lightgreen{background-color: #EDFFE9;}
.bg-green{background-color:#1DB800}
.btn-lightgreen{background-color: #1DB800;border: none;color: #fff;padding: 7px 15px;}
.btn-green{background-color:#137800;border: none;color: #fff;padding: 7px 15px;}
.w-20{width: 20%;}
.close-btn{background: transparent;border: none;}
.warrenty-arrow{float: inline-end;
  padding-right: 10px;
  padding-top: 4px;} 
.content__title {
  margin-bottom: 40px;
  font-size: 20px;
  text-align: center;
}
 .fs-14{font-size: 14px;}
.content__title--m-sm {
  margin-bottom: 10px;
}
.order-accordian .accordion-button::after {display: none;} 

.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
 
.text-dec-none{text-decoration: none;}
.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 20px;
  color: rgba(108, 117, 125, 0.7);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
  cursor: pointer;
}
@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }

}
@media (max-width: 600px) {

  h1 {line-height: 40px;font-size: 23px;}
}
.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: '';
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
}
.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background-color: currentColor;
  z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
  display: none;
}
.multisteps-form__progress-btn.js-active {
  color: #1767B3;
}
.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
          transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
}
 
.multisteps-form__form {
  position: relative;
  min-height: 500px; 
  overflow: hidden;
}
 
.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
 
  
}
.multisteps-form__panel.js-active {
  height: auto;
  opacity: 1;
  visibility: visible;
}

/* .multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
} */

.multisteps-form__panel[data-animation="fade"] {
	-webkit-animation: fadeInRight 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fadeInRight 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.multisteps-form__panel[data-animation="fade"].js-active {
	-webkit-animation: fadeInLeft 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fadeInLeft 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}



/*---- CUSTOM ANIMATION ----*/

.fadeInRight {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


.fadeInLeft {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}





.calendar {
  background-color: white;
  /* border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  /* padding: 20px; */
  width: 100%;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.calendar-header button {
  background-color:transparent;
  /* color: white; */
  border: none;
  /* padding: 10px;
  border-radius: 5px; */
  cursor: pointer;
}
/* .calendar-header button:hover {
  background-color: #2980b9;
} */
#month-year {
  font-size: 20px;
  font-weight: bold;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
}
.calendar-day {
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
.calendar-day:hover {
  background-color: #ecf0f1;
}
.calendar-day.disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* Time Picker Popup Styling */
#time-picker-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 10;
  width: 350px;
  padding:0px 0 20px 0;
  text-align: center;
}
#time-picker-popup h3 {
  font-size:16px;
  /* margin-bottom: 20px; */

  color: #fff;
}
.fw-700{font-weight: 700;}
#time-picker-popup .time-header{background: #1767B3;padding: 10px;color: #fff;}
#selected-date {
  color: #3498db;
}
.time-slot-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.time-slot {
  padding: 10px 13px;
  background-color: #ecf0f1;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: all 0.3s ease;
  /* width: 100%; */
  text-align: center;
}
.time-slot:hover {
  background-color: #3498db;
  color: white;
}
.time-slot.selected {
  background-color: #2980b9;
  color: white;
}
.time-slots{padding: 10px;}
#time-picker-popup button {
  background-color: transparent;
  color: black;
  border: 1px solid #2980b9;
  /* padding: 10px; */
  border-radius: 0px;
  cursor: pointer;
  /* width: 100%; */
  font-size: 16px;
  margin-top: 20px;
}
#time-picker-popup button:hover {
  background-color: #2980b9;
  color: #fff;
}
#time-picker-popup .close-btn {
  background-color: #e74c3c;
}
#time-picker-popup .close-btn:hover {
  background-color: #c0392b;
}








.events .times{color: #1DB800;}

.events li { 
  display: flex; 
  color: #999;
}

.events time { 
  position: relative;
  /* padding: 0 1.5em;   */
}

.events time::after { 
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border:2px #1DB800 solid;
   width: .8em;
   height: .8em;
}


.events span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}

.events span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 2px #1DB800 solid;
}
.events span.last::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  height: 100%;
  border-left: 0px #1DB800 solid;
}
.events {width:100%;padding-left: 10px; }