/* Uses Bootstrap 4 breakpoints */
.sp-table-key {
  /*z-index: 99999!important;*/
  z-index: 9 !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: auto !important;
  padding-bottom: 0 !important;
}

.sp-table-key.affix {
  top: 115px !important;
  /*top: 75px!important;*/
  /*left: -15px!important;*/
  left: 0 !important;
  width: 100% !important;
  border-bottom: 1px solid #ddd;
  /*border-top:1px solid #ddd;*/
  margin: 0 auto !important;
  height: auto;
  float: none !important;
  padding-bottom: 0;
  padding: 0 !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*.key-title {
  	background: none!important;
  	}*/
  /*	.key-title {
  		display: flex!important;
  		height:100%!important;
  	}	*/
}
@media (max-width: 768px) {
  .sp-table-key.affix {
    top: 127px !important;
  }
}
@media (max-width: 576px) {
  .sp-table-key.affix {
    top: 100px !important;
  }
}
@media (max-width: 768px) {
  .sp-table-key.affix .key-title {
    padding: 4px !important;
    font-size: 13px !important;
  }
}

.key-list {
  display: block !important;
  margin: auto !important;
  padding-right: 0 !important;
  margin-left: -5px !important;
  flex-flow: row nowrap;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 1200px) {
  .key-list {
    align-items: flex-start !important;
  }
}
@media (max-width: 768px) {
  .key-list {
    padding-bottom: 0 !important;
  }
}
.key-list li {
  text-align: left !important;
  align-items: center !important;
  justify-content: center !important;
  /*width:20%!important;

  @include max-large {
  	width:25%!important;
  	@include rb;
  	}	*/
  /*@include max-medium {
  	display: flex!important;
  	}*/
  /*@include max-xl {
  	padding: 0 20px!important;
  }*/
}
@media (max-width: 1200px) {
  .key-list li {
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  .key-list li {
    padding: 0 4px !important;
  }
}
.key-list li span {
  line-height: 1.2 !important;
  position: relative !important;
  padding: 0 !important;
}
@media (max-width: 1200px) {
  .key-list li span {
    width: 100% !important;
  }
}
@media (max-width: 992px) {
  .key-list li span {
    font-size: 12px !important;
  }
}
@media (max-width: 576px) {
  .key-list li span {
    font-size: 10px !important;
  }
}
.key-list li .fa {
  padding-right: 7px !important;
  width: 30px !important;
}
@media (max-width: 1200px) {
  .key-list li .fa {
    text-align: center !important;
    width: 100% !important;
    margin: auto !important;
    align-items: flex-start !important;
    justify-content: center;
  }
}
@media (max-width: 992px) {
  .key-list li .fa {
    padding-right: 0 !important;
    top: 0 !important;
  }
}
@media (max-width: 576px) {
  .key-list li .fa {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Prevent jumping when affixing */
.sp-table-key.affix + div {
  padding-top: 85px !important;
}