.body {
    user-select: none;
    width: 100%;
    height: 100%;
}

.index_body {
    /*width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;*/ /* Stacks children vertically */
    /*border: 5px solid blue;*/
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    width: 100vw; /* Set to your desired width */
    height: 100vh; /* Set to your desired strict height */
    border: 2px solid #333;
    overflow: hidden; /* Prevents the parent itself from expanding */

    position: relative;
    width: 100%;
}
.top_div_complete_1 {
    display: flex;
    flex-direction: row;
    flex-shrink: 0; /* Prevents the heading from being squished */
    background-color: yellow;
    background-color: transparent;
    
}
.top_div_complete_2 {
    display: flex;
    flex-direction: row;
    flex-shrink: 0; /* Prevents the heading from being squished */
    background-color: yellow;
    background-color: transparent;
    z-index: 10;

}

.content_div_complete {
    /*padding-top: 100px;
    border: 0px solid grey;
    width: 100%;
    flex-grow: 1;*/ /* Instructs this specific div to fill all remaining vertical */
    /*overflow: scroll;*/

    border-top: 3px solid #bcef3c;
    flex-grow: 1; /* Forces div to fill remaining parent height */
    overflow: scroll; /* Adds vertical scrollbar only when content overflows */
    background-color: white;
    padding: 10px;
    z-index: 1;

    height: 110vh;
    padding-bottom:0px;
    
    width: 105vw;
    padding-right:50px;

}
.top_div_show {
    width: 100px;
    flex-grow: 1; /* Instructs this specific div to fill all remaining vertical */
    background: white;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 0px;
    cursor: pointer;
    border-right: 1px solid lightblue;
}
.top_div_show_selected {
    width: 100px;
    flex-grow: 1; /* Instructs this specific div to fill all remaining vertical */
    background: lightgrey;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 0px;
    cursor: pointer;
    border-right: 1px solid lightblue;
}


.content_div_hide {
    display: none;
}
.content_div_show {
    display: block;
    width: 100%;
    height:100%;
    flex-grow:1;
    
}

.login_heading {
    border: 1px solid grey;
    background: white;
    color: blue;
    font-size:15px;
    text-align:center;
    border-radius:5px;
    padding-left:5px;
    padding-right:5px;
    margin-right:50px;
}
.login_heading:active {
    background: blue;
    color: white;
}
.content_div_iframe {
    border: 10px solid red;
    width: 100%;
    height: 100%;
    /*border: none;*/ /* Removes default browser borders */

    border: 0px solid red;
    width: 100%;
    height: 100%;
    border: none; /* Removes the default ugly border */
    display: block; /* Removes unwanted bottom white space */
}
.main_menu_actual_content_div{
    border-top:3px solid blue;
}
.student_menu_content_div_iframe {
    border: 0px solid red;
    width: 100%;
    height: 100%;
    border: none; /* Removes the default ugly border */
    display: block; /* Removes unwanted bottom white space */
}

.top_div_content_hide {
    display: none;
    z-index: 3;
}
.top_div_content_show {
    display: block;
    border: 1px solid red;
    height: 100px;


    position: absolute;
    /* 4. Position it directly over Sibling B */
    top: 60px; /* Adjust based on Sibling A's height */
    left: 20px; /* Horizontal spacing from the left wall */
    /* 5. Force it to render on top of everything else */
    z-index: 10;
    background-color:transparent;
    color: white;
    padding: 10px;
}

.menu_div{
    position:absolute;
    left:200px;

}

.top_div_menu_heading {
    background-color: white;
    color: blue;
    padding-left: 20px;
    padding-right: 20px;
    cursor:pointer;
}
.top_div_menu_heading_selected {
    background-color: lightgrey;
    color: black;
    padding-left: 20px;
    padding-right: 20px;
}
.top_div_menu_content_hide_instant {
    position: absolute;
    left: 10px;
    top: 65px;
    display: none;
    height: 0px;
    width: 70vw;
    overflow: hidden;
    background: white;
    border: 0px solid black;
    transition: all 1s ease;
}

.top_div_menu_content_hide {
    position: absolute;
    left:10px;
    top:65px;
    height: 0px;
    width: 70vw;
    overflow: hidden;
    transition: all 1s ease;
    background: white;
    border: 0px solid black;
    transition: all 1s ease;
}
.top_div_menu_content_show {
    position: absolute;
    left: 10px;
    top: 65px;
    height: 250px;
    width: 70vw;
    display: flex;
    flex-direction: column;
    left: 10vw;
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    border: 1px solid black;
    background: white;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    border-right: 1px solid lightblue;
}

.top_div_user_content_hide_instant {
    position: absolute;
    right: 50px;
    top: 65px;
    display: none;
    height: 0px;
    width: 100px;
    overflow: hidden;
    background: white;
    border: 0px solid black;
    
}

.top_div_user_content_hide {
    position: absolute;
    left: 10px;
    top: 65px;
    height: 0px;
    width: 100px;
    overflow: hidden;
    transition: all 1s ease;
    background: white;
    border: 0px solid black;
    
}

.top_div_user_content_show {
    position: absolute;
    right: 50px;
    top: 70px;
    height: 250px;
    width: 100px;
    display: flex;
    flex-direction: column;
    
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    border: 1px solid black;
    background: white;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    border-right: 1px solid lightblue;
    
}


.top_div_menu_content_top_div_1{
    width:100%;
    height:40px;
    display:flex;
    flex-direction:row;
}
.top_div_menu_content_top_div_1_heading {
    flex-grow: 1;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}
.top_div_menu_content_top_div_1_closediv {
    flex-shrink: 1;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    background:white;
    color:red;
    border:2px solid red;
    border-radius:5px;
    margin-bottom:3px;
}
    .top_div_menu_content_top_div_1_closediv:active {
        background: red;
        color: white;
    }
.main_menu_actual_content_div {
    flex-grow: 1;

}
.menu_sub_options {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    color: blue;
}
.menu_sub_options:hover{
    background:lightgrey;
    color:blue;
}
    .menu_sub_options:active {
        background: blue;
        color: white;
    }

.user_div_each_line_left {
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
}
.user_div_each_line_center {
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
}
.user_div_each_line_right {
    flex-shrink: 1;
    display: flex;
    justify-content: right;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
}

.user_div_each_line_closediv {
    float:right;
    padding-left: 3px;
    padding-right: 3px;
    background: white;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    margin-bottom: 3px;
}

    .user_div_each_line_closediv:active {
        background: red;
        color: white;
    }
.user_div_each_line_heading{
    font-size:10px;
    color:grey;
    float:left;
    text-align:left;
}
.user_div_each_line_data1 {
    font-size: 10px;
    color: black;
    text-align: left;
    margin-left:10px;
}
.account_see_details {
    font-size: 14px;
    padding-left: 13px;
    padding-right: 13px;
    background: white;
    color: blue;
    border: 1px solid blue;
    border-radius: 5px;
    margin-bottom: 3px;
    text-align: left;
    margin-left: 10px;
}
    .account_see_details:hover {
        background: lightblue;
        color: blue;
    }
    .account_see_details:active {
        background: blue;
        color: white;
    }