.tablist {
    display: flex;
    align-items: stretch;
    width: fit-content;
    z-index: 10;
}
.tablist-vertical {
    flex-direction: column;
}

.tab-button {
    width: 100%;
    padding: 5px;
    background-color: #d7e0e5;
    border: 1px solid #a4a4a4;
    font-weight: 700;
    outline: none;
    border-top: 3px solid inherit;
    border-right: 3px solid inherit;
   
}
.tab-button-horizontal {  margin-left: 5px; }
.tab-button-vertical {  margin-top: 5px; }

.tab-button:focus {
    outline: 2px solid blue;
}
.tab-button[aria-selected = "true"] {
    border: 1px solid black;
}

.panel-container {
    padding: 10px;
    border: 1px solid black;
    
}

.tabpanel-vertical { margin-left: -1px;}
.tabpanel-horizontal { margin-top: -1px;}

.panel-vertical {
    border-left: none;
}

.panel-horizontal {
    border-top: none;
}

.hidden {
    display: none;
}