WooCommerce Tabs Element

/* ----------------Default Styles--------------------- */


.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding-left: 5px;
  display: flex;
  text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  margin: 0;
  padding: 0;
  margin: 0 5px;
  display: flex;
  align-items: baseline;
  transition: all ease 0.2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  width: 100%;
  color: #999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
  padding: 16px 48px;
  transition: 0.2s ease all;
  z-index: 1000;
  font-weight: 400;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: #00ADEF;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  color: black;
}

@media (max-width:640px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-direction: column;
    padding: 0;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 5px 0;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: none;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #d3ced2;
  }
}


/* ----------------Stack Vertically--------------------- */
/*--(Add this code to set verticla tabs layout) --*/
/*
.woocommerce-tabs {
  display: flex;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  flex-direction: column;
  padding: 0;
  margin-right: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 5px 0;
  text-align: left;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: #d3ced2;
}
.woocommerce div.product .woocommerce-tabs .panel {
  margin-top: 5px;
  flex-grow: 1;
}
@media (max-width:640px) {
  .woocommerce-tabs {
    flex-direction: column;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    margin-right: 0;
    text-align: center;
  }
}
*/



/* ----------------Custom Styles--------------------- */

/* set inactive tabs font */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: default;
  font-size: default;
  color: default;
  line-height: default;
  letter-spacing: default;
  text-transform: default;
}

/* set inactive tabs background */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: default;
}

/* set :hover tab color and background */
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a{
  color: default;
  background: default;
}

/* set :active tab color and background */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  color: default;
  background: default;
}

/* set border color (change all properties to set same color for all borders)*/
.woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: default;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: default; /*-- for vertical layout only (don't use on horizontal layot) --*/
}
@media (max-width:560px) { 
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
      border-bottom-color: default;
  }
}

/* set content style */
.woocommerce div.product .woocommerce-tabs .panel {
  border: 1px solid #d3ced2;
  padding: 20px 40px 28px;
  background-color: white;
}

/* set active arrow (add this CSS to add arrow) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before {
  content: '→' ; /* maybe user can select from different simbols? ש↓ˇ˜• and etc.) */
  font-family: 'Courier';
  font-size: 24px;
  line-height: 1;
  width: 24px;
  height: 24px;
  position: relative;
  color: #00ADEF; /* variable value */
  display: block;
  box-shadow: none;
  border: none;
  margin-left: 24px;
  margin-right: -48px;
}