.container.test {
  background-color: #a89898;
}

.tab-container-one,
.tab-container-two,
.tab-container-three {
  border: 0;
}

.tab-content {
  padding: 0 !important;
}

.tab-content .tab-pane,
.tab-content .tab-pane.active {
  border-radius: 0 !important;
  border-top: 0 !important;
  border-left: 1px solid black !important;
  border-right: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.tab-content .tab-pane.active {
  background-color: #ffffff !important;
}

.nav-tabs {
  padding-left: 20px;
  background-color: transparent !important;
  border-bottom: 1px solid black !important;
}
.nav-item {
    cursor :pointer;
}
.nav-tabs .nav-item {
  /* Makes a horizontal row */
  float: left !important;
  /* So the psueudo elements can be
     abs. positioned inside */
  position: relative !important;
  margin-right: -1px;
}

.nav-tabs .nav-link {
  /* Make them block level
     and only as wide as they need */
  float: left !important;
  padding: 6px 25px !important;
  text-decoration: none !important;
  /* Default colors 0066FF*/
  color: black !important;
  background-color: #bcc9b9 !important;
  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px !important;
  -webkit-border-top-right-radius: 15px !important;
  -moz-border-radius-topleft: 15px !important;
  -moz-border-radius-topright: 15px !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
  border-left: 1px solid black !important;
  border-right: 1px solid black !important;
}

.nav-tabs .nav-item.active {
  /* Highest, active tab is on top */
  z-index: 30 !important;
}

.nav-tabs .nav-link.active {
  /* Colors when tab is active */
  background-color: #ffffff !important;
  color: black !important;
  border-top: 1px solid black !important;
  border-bottom: 1px solid rgba(233, 236, 239, 0.95) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: unset !important;
  outline: none;
}

.nav-tabs .nav-item:before,
.nav-tabs .nav-item:after,
.nav-tabs .nav-link:before,
.nav-tabs .nav-link:after {
  /* All pseudo elements are 
     abs. positioned and on bottom */
  position: absolute !important;
  bottom: 0 !important;
}

/* Only the first, last, and active
   tabs need pseudo elements at all */
.nav-tabs .nav-item:last-child:after,
.nav-tabs .nav-item:last-child .nav-link:after,
.nav-tabs .nav-item:first-child:before,
.nav-tabs .nav-item:first-child .nav-link:before,
.nav-tabs .nav-item.active:after,
.nav-tabs .nav-item.active:before,
.nav-tabs .nav-item .nav-link.active:after,
.nav-tabs .nav-item .nav-link.active:before {
  content: "" !important;
}

.nav-tabs .nav-item.active:before,
.nav-tabs .nav-item.active:after,
.nav-tabs .nav-item.active:before:hover,
.nav-tabs .nav-item.active:after:hover {
  background-color: green !important;
  /* Squares below circles */
  z-index: 10 !important;
}

/* Squares */
.nav-tabs .nav-item:before,
.nav-tabs .nav-item:after {
  background-color: rgba(233, 236, 239, 0.95) !important;
 
  height: 20px !important;
  z-index: 10 !important;
  bottom: -1px !important;
}

.nav-tabs .nav-item:before {
  left: -19px !important;
}

.nav-tabs .nav-item:after {
  right: -19px !important;
}

.nav-tabs .nav-item:before:hover,
.nav-tabs .nav-item:after:hover,
.nav-tabs .nav-item:hover:before,
.nav-tabs .nav-item:hover:after {
  z-index: 10 !important;
}

/* Circles */
.quarter-circle-bottom-left, .nav-tabs .nav-item .nav-link:after {
  width: 20px;
  height: 20px;
  background: #cdc7c7 !important;
  border-radius: 0 0 0 20px;
  -moz-border-radius: 0 0 0 20px;
  -webkit-border-radius: 0 0 0 20px;
  border-left: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.quarter-circle-bottom-right, .nav-tabs .nav-item .nav-link:before {
  width: 20px !important;
  height: 20px !important;
  background: #cdc7c7 !important;
  border-radius: 0 0 20px 0 !important;
  -moz-border-radius: 0 0 20px 0 !important;
  -webkit-border-radius: 0 0 20px 0 !important;
  border-right: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.nav-tabs .nav-item .nav-link:after,
.nav-tabs .nav-item .nav-link:before {
  /* Circles over squares */
  z-index: 20 !important;
  bottom: -1px !important;
}

.nav-tabs .nav-item .nav-link:before {
  /* Circles are circular */
}

.nav-tabs .nav-item .nav-link:after {
  /* Circles are circular */
}

.nav-tabs .nav-item.active .nav-link.active:after,
.nav-tabs .nav-item.active .nav-link.active:before {
  background-color: #cdc7c7 !important;
}

/* First and last tabs have different
   outside color needs */
.nav-tabs .nav-item:first-child.active .nav-link.active:before,
.nav-tabs .nav-item:last-child.active .nav-link.active:after {
  background-color: transparent !important;
}

.nav-tabs .nav-item .nav-link:before {
  left: -19px !important;
}

.nav-tabs .nav-item .nav-link:after {
  right: -19px !important;
}

.nav-tabs .nav-item:last-child:after,
.nav-tabs .nav-item:last-child .nav-link:after,
.nav-tabs .nav-item:first-child:before,
.nav-tabs .nav-item:first-child .nav-link:before {
  background-color: transparent !important;
  border: 0 !important;
}