.inner-content-box {
    width: 100%;
    align-items: center;
    margin : auto;
    padding : auto;
}

.inner-boxes {
    border : 1px solid black;
    border-radius : 5px;
    background-color : white;
}

.left-index-column {
    margin-right: 10px;
    min-height: 70vh;
    padding-top : 10px;
}

.right-content-column {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 900px) 
{
    #left-index-block {
        display: none;
    }
    #right-content-block {
        width : 100%;
    }
}

.row {
    justify-content: center;
}

/* These the The main Index and Content Boxes  */
.INDEX-BOX {
    text-align: left;
    padding: 0px;
    font-size: 0.9rem;
}
.CONTENT-BOX {
    text-align: left;
    box-shadow: none;
}

.content-indexes li:hover {
    text-decoration: underline;
    cursor: pointer;
    /* text-shadow: 2px 2px black; */
    /* box-shadow : 2px 2px black; */
    font-size: 1rem;
}

.code-container {
    font-size: 13px;
    width: 100%;
    padding: 0;
}

.INDEX-BOX a {
    text-decoration: none;
    font-weight: bold;
}

.INDEX-BOX a:visited {
    color : gray;
}

.figure {
    border : 1px solid black;
    border-radius: 4px;
    text-align: center;
    text-decoration: underline;
    font-weight: bolder;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    position: relative;
    cursor: pointer; /* This makes the cursor turn into a pointer when hovered over a figure*/
}

.modal-dialog {
    /* justify-content: center; */
    /* vertical-align: middle; */
    /* width : auto !important; */
    /* height : auto !important; */
    /* margin: auto; */
    width: 100vw;

    margin-top:20vh;
}

.modal-content {
    height: 70vh;
    width : 70vw;
    height: fit-content !important;
    width: fit-content !important;
}

@media (min-width : 500px) {
    .modal-dialog {
        max-width : 100vw;
        margin-left : auto;
        margin-right : auto;
    }
}