html, body, #react-entry-point, .dash-container {
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#dashtable {
    width: 1200px;
}

#treemap {
    width: 100%;
    height: 100dvh;
}

#content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4rem;
}

@media (max-width: 2300px) {
    #bottom-container {
        flex-direction: column !important;
    }
}

@media (max-width: 2050px) {
    #content-container {
        flex-direction: column;
    }

    #content-main {
        height: 160dvh;
    }

    #treemap {
        height: 160dvh;
    }
}

@media (max-width: 1250px) {
    #dashtable {
        width: 1000px;
    }
    #alignment_options {
        flex-direction: column;
    }
}

@media (max-width: 1025px) {
    #dashtable {
        width: 800px;
    }

    
}

@media (max-width: 815px) {
    #dashtable {
        width: 700px;
    }

    #piechart-div {
        width: 700px !important;
    }
}

@media (max-width: 730px) {
    #dashtable {
        width: 600px;
    }

    #piechart-div {
        width: 600px !important;
    }
}

@media (max-width: 625px) {
    #dashtable {
        width: 550px;
    }

    #piechart-div {
        width: 550px !important;
    }
}

@media (max-height: 1000px) {
    #treemap {
        height: 175dvh;
    }

    #content-main {
        height: 175dvh;
    }
}

@media (max-height: 900px) {
    #content-container {
        gap: 8rem;
    }
}

@media (max-height: 875px) {
    #treemap {
        height: 180dvh;
    }

    #content-main {
        height: 180dvh;
    }
}

@media (max-height: 850px) {
    #content-container {
        gap: 12rem;
    }

    #treemap {
        height: 200dvh;
    }

    #content-main {
        height: 200dvh;
    }
}

@media (max-height: 775px) {
    #content-container {
        gap: 16rem;
    }

    #treemap {
        height: 225dvh;
    }

    #content-main {
        height: 225dvh;
    }
}

@media (max-height: 700px) {
    #content-container {
        gap: 20rem;
    }

    #treemap {
        height: 250dvh;
    }

    #content-main {
        height: 250dvh;
    }
}

@media (max-height: 655px) {
    #content-container {
        gap: 24rem;
    }

    #treemap {
        height: 275dvh;
    }

    #content-main {
        height: 275dvh;
    }
}

@media (max-height: 585px) {
    #content-container {
        gap: 28rem;
    }

    #treemap {
        height: 300dvh;
    }

    #content-main {
        height: 300dvh;
    }
}

@media (max-height: 520px) {
    #content-container {
        gap: 32rem;
    }

    #treemap {
        height: 325dvh;
    }

    #content-main {
        height: 325dvh;
    }
}

#content-main {
    display: inline-block;
    width: 100%;
    position: relative;
    min-height: 100dvh;
}