.tab {
    margin-top: 6rem;
    border-radius: 0.3rem;
    /* overflow: hidden; */
}

.tab .tab-buttons {
    display: flex;
    flex-direction: row;
    z-index: 1;
    margin-bottom: -1px;
}

.tab .tab-buttons .tab-button-wrapper {
    display: flex;
    flex: 1;
    margin: 0 0.5rem;
}

.tab .tab-buttons .tab-button-wrapper button:hover {
    color: #147349;
    cursor: pointer;
}

.tab .tab-buttons .tab-button-wrapper button.active {
    border-color: #60ae45;
    border-width: 0.1rem;
    color: #ffffff;
    background-color: #60ae45;
    border-style: solid;
}

.tab .tab-buttons .tab-button-wrapper button {
    width: 100%;
    height: 100%;   
    padding: 1.5rem 1rem;
    border: none;
    /* border-radius: 3rem; */
    /* border-bottom: 0.15rem solid lightgray;
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem; */
    /* border-radius: 3rem; */
    border-radius: 0.4rem;
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
    font-weight: bold;
    font-size: 0.9em;
    color: #6f6f6f;
    background-color: #e4e4e4b0;
    transition: 
        border-color 0.5s ease, 
        color 0.5s ease, 
        background-color 0.5s ease;
}

.tab .tab-buttons .tab-button-wrapper button:not(:last-child){
    border-top-right-radius: 0rem;
    border-right: thin solid lightgray;
}

.tab-contents-wrapper {
    padding: 2rem 2rem;
    background-color: white;
    margin: 0rem 0.5rem 2rem;
    border-radius: 0.3rem;
    border: thin solid #60ae45;
}

.tab-contents-wrapper .tab-content {
    display: none;
}


.tab-contents-wrapper .tab-content.active {
    display: block;
}