.tab .tab-input[name=tab-control] {
    display: none;
}

.tab .tab-list {

    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;

    margin-block-end: 0;
}

.tab .tab-list .tab-list-item {

    color: var(--dc-color-light);
    fill: var(--dc-color-light);
    /* border: 2px solid var(--dc-color-primary); */
    background-color: var(--dc-color-secondary);
    opacity: 0.7;
    box-sizing: border-box;
    flex: 1;
    width: 25%;
    padding: 0.5rem;
    text-align: center;
}

.tab .tab-list .tab-list-item:not(.active-tab) {
    /* border-bottom: 2px solid var(--dc-color-primary);
    border-left: 2px;
    border-right: 2px; */

  }


.tab .tab-list .tab-list-item :hover {
    cursor: pointer;

    color: var(--dc-color-light-hover);
    fill: var(--dc-color-light-hover);
    text-shadow: var(--dc-color-light-hover) 0 2px 15px;
}


.tab .tab-list .tab-list-item .tab-list-item-label {

    transition: all 0.3s ease-in-out;
    padding: 5px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tab .tab-list .tab-list-item .tab-list-item-label .tab-list-item-icon {
    margin-right: 0.5rem;
    position: relative;
    width: 1rem;
    height: 1rem;

    right: 0;

    svg {
        width: 1rem;
        height: 1rem;
    }
}

.tab .tab-list .tab-list-item.active-tab {
    transition: text-shadow 0.3s ease;
    color: var(--dc-color-primary);
    fill: var(--dc-color-primary);
    opacity: 1;
    /* border: 2px solid var(--dc-color-primary); */
    padding-top: 0.6rem;
    box-shadow: var(--dc-color-primary) 0px 0 8px;
    z-index: 2;
    /* border-bottom: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem; */
    flex: 1;
    width: 25%;
    text-align: center;
    position: relative;
}
/* .tab .tab-list .tab-list-item.active-tab::before{
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: white;
  left: 0;
} */

.tab-content {
    display: none;
    top: 0;
    padding-top: 0;
    border-top: none;
}


.active-tab-content {

    display: block;
}

.tab-content-wraper {
  /* border: 2px solid var(--dc-color-primary); */
  /* border-right: 2px solid var(--dc-color-primary);
    border-left: 2px solid var(--dc-color-primary);
    border-bottom: 2px solid var(--dc-color-primary); */
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-block-start: 0;
    padding: 1rem;
}