.tab_control_container {
  background: unset;
}

.tabs_body_container {
  background: var(--gradient-bg);
  border-radius: 10px;
}

.tab_inner_container,
.tab_inner_container_top,
.tab_inner_container_bottom,
.tab_inner_container_left,
.tab_inner_container_right {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.tab_inner_container_top {
  flex-direction: column;
}

.tab_inner_container_bottom {
  flex-direction: column-reverse;
}

.tab_inner_container_left {
  flex-direction: row;
}

.tab_inner_container_right {
  flex-direction: row-reverse;
}

.tabs_container,
.tabs_container_top,
.tabs_container_bottom,
.tabs_container_left,
.tabs_container_right {
  gap: 5px;
  display: flex;
}

.tabs_container_top {
  flex-direction: row;
}

.tabs_container_bottom {
  flex-direction: row;
}

.tabs_container_left {
  flex-direction: column;
}

.tabs_container_right {
  flex-direction: column;
}

.tab,
.tab_top,
.tab_bottom,
.tab_left,
.tab_right {
  color: black;
  display: flex;
  margin-left: 2px;
  font-weight: bold;
  height: 20px;
  min-width: 139px;
  padding: 10px;
  align-items: center;
  cursor: pointer;
  background-color: rgb(204, 204, 204);
  outline: 2px solid white;
  justify-content: space-evenly;
  border-color: var(--text-color);
  border-width: 5px;
}

.tab_top {
  border-bottom-style: solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tab_top .tab_title {
  text-align: justify;
}

.tab_bottom {
  border-top-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.tab_bottom .tab_title {
  text-align: justify;
}

.tab_left {
  border-right-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: unset;
  min-height: 139px;
  width: 20px;
  min-width: unset;
}

.tab_left .tab_title {
  writing-mode: sideways-lr;
}

.tab_right {
  border-left-style: solid;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: unset;
  min-height: 139px;
  width: 20px;
  min-width: unset;
  flex-direction: column;
}

.tab_right .tab_title {
  writing-mode: sideways-rl;
}

.tab:hover {
  background-color: var(--second-color);
  color: white;
}

.active_tab {
  display: flex;
  background-color: var(--second-color);
  border-bottom: 5px solid var(--text-color);
  color: white;
}

.tab-row-container-horizontal {
  display: flex;
  border-bottom: 5px solid var(--second-color);
}

.tabs_body_container {
  display: flex;
  position: relative;
  overflow: unset;
}

.tab_body {
  display: none;
  border-radius: 10px;
  width: 100%;
  height: -webkit-fill-available;
}

.tab-body {
  display: none;
}

.active_tab_body {
  display: block;
  animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100vw);
    /* Start off-screen to the right */
  }

  to {
    transform: translateX(0);
    /* Slide in to normal position */
  }
}