body {
    background-color: whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.page-head {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 1em;
    border-radius: 2em;;
}
.page-head .text {
    vertical-align: middle;
    
    margin-top:  2em !important;
}
.my-column {
    
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 1em;
    margin: 2em;
    /* justify-content: space-around; */
    
}
.svg-container {
    text-align: center;
    /* outline: 2px dashed red; */
}
svg {
    background-color: white;
    border-radius: 2em;
    /* border: 1px solid #ccc; */
}


.slice-group text {
    fill: black;
}
.dark {
    fill: #fcfcfc;
}
.light {
    fill: rgb(253, 252, 157);
    fill: #3653BB;
    fill: white;
}

.slice-group path {
    stroke: #3653BB;
    /* stroke: white; */
    stroke-width: .2px;
    
}

text {
    fill: black;
}

.arrow.visible {
    opacity: 0.6;
    
}
.btn-add.hidden {
    display: none;;
}

.arrow .clicker.visible {

    fill: gold;
}
.arrow .clicker.hidden {

    display: none;
}
.arrow .indicator {
    fill: green;
}
.arrow .clicker.visible:hover {
    cursor: pointer;
    opacity: 1;
    
}

.slice-group.picked path {
    stroke-width: 2px;
    z-index: 1000;
    fill: gold;
}
.slice-group.picked text {
    fill: black;
}
.btn-add:hover {
    cursor: pointer;
    opacity: 0.8;
}
.btn-add circle {
    fill: #5C9BDA;
}

.btn-add text {
    fill: white;
    font-weight: bold;
    
}