.flex-container 
{
    display: flex;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100dvw;
    margin: 0;
    padding: 0;
    /*background-color: DodgerBlue;*/
    flex-direction: column;
    overflow: hidden;    /* Prevents scrolling */
}
        
.myfc-header 
{
    display: flex;
    background-color: var(--Header-BG);
    color: var(--Header-Color);
    height: var(--HeaderHeight);
    flex-shrink: 0; /* Prevents shrinking */
    justify-content: center;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
}

.myfc-header1 
{
     flex-shrink: 0; /* Prevents shrinking */
}

.myfc-header2
{

    /*display: none;*/

    flex: 1;
    min-height: 0; 
    /* Allows shrinking if needed */
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: small;        
}

.myfc-header3
{
    display: none;
}

.myfc-header4
{
    font-size: 10px;
        padding: 10px;
        margin: 10px;
}
        
.myfc-body 
{
    background-color: var(--Body-BG);
    color: var(--Body-Color);
    flex: 1; /* Takes all remaining space */
    min-height: 0; /* Allows shrinking if needed */
    overflow-y: auto; 
    /* Allows scrolling within body if content is too long */
}
        
.myfc-footer 
{
    
    background-color: var(--Footer-BG);
    color: var(--Footer-Color);
    height: var(--FooterHeight);
    flex-shrink: 0; /* Prevents shrinking */
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: small;
    padding: 10px;
}

.center-wrapper 
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100dvh - 7.4dvh - 4.4dvh) ;
    background-color: white;
    width: 100%;
    /*width: 100dvw;*/
    overflow: auto;
}

.Login-Box
{
    box-sizing: border-box;
    /*padding: 10px;
    */
    margin: 15px;
    overflow: auto;
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
}

.Data-Entry-Box
{
    box-sizing: border-box;
    /*padding: 10px;*/
    
    margin: 15px;
    overflow: auto;
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
}


.Common-Box
{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*2 aug 2025*/
    /*min-height: calc(100dvh - 7.4dvh - 4.4dvh) ;*/
    height: calc(100dvh - 7.4dvh - 4.4dvh) ;

    background-color: white;
    width: 100%;
    /*width: 100dvw;*/
    overflow: auto;
}

.myCardHeader
{
    text-align: center;
    background-color: var(--card-header-bg);
    color: var(--card-header-color);
    font-size : var(--card-header-font);
    font-weight: var(--card-header-weight);
    margin: 0;
    padding: 0;
}
.myCardFooter
{
    text-align: center;
    background-color: var(--card-footer-bg);
    color: var(--card-footer-color);
    font-size : var(--card-footer-font);
    font-weight: var(--card-footer-weight);
}
.myCardBody
{
    text-align: left;
    background-color: var(--card-body-bg);
    color: var(--card-body-color);
    font-size : var(--card-body-font);
    font-weight: var(--card-body-weight);
}

.mycontainerdashboard123
{
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    padding: 10px;
    flex: 1; /* Takes all remaining space */
    height: auto;
    /*height: calc(100dvh - 7.4vh - 4.4vh - 6vh - 15px - 15px) ;*/
     /* For Mobile 100dvh */
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
    background-color: whitesmoke;
    overflow: auto;
}

.mycontainerdashboard
{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
    background-color: whitesmoke;
    overflow: auto;
}
.Menu-Box
{
    box-sizing: border-box;
    overflow: auto;
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
}

.FirstSide4Dashboard , .SecondSide4Dashboard , .ThirdSide4Dashboard , .FourthSide4Dashboard, .FifthSide4Dashboard
{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    background-color: white;
    overflow: auto;
}
.FirstSide4Dashboard
{
    flex:1;
}
.SecondSide4Dashboard
{
    flex:2.5;
    
    display: flex;
/*    Since there are two rows. One for Select month and second for calendar itself*/
    flex-direction: column;
}

.ThirdSide4Dashboard
{
    
    flex:2.6;
    
    display: flex;
    flex-direction: column;
    
/*    Since there are two rows. One for Title and second for Table itself : flex-direction: column;*/
}

.FourthSide4Dashboard
{
    flex:1;
}
.FifthSide4Dashboard
{
    flex:1;
    flex:2.5;
}
.mySiderBar1 , .mySiderBar4Right1
{
    display: flex;   
    flex-direction: column;
    justify-content: center;    
    align-items: center;
    align-content: center;
    flex: 1;
    /*margin: 10px;
    padding: 10px;*/
    overflow: auto;
}
.mySiderBar , .mySiderBar4Right
{
    /*height: calc(100dvh - 7.4vh - 4.4vh - 6vh); */
    /* Dynamic viewport height for mobile */
}
.mySiderBarColumn1
{
    margin: 1px;
    width: auto;
    white-space: nowrap;
}

.mySiderBarRow1
{
    flex: 1;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-content: center;
    align-items: center;
    white-space: nowrap;
}

.myDashboardOption 
{
    box-sizing: border-box;
    font-size: small;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: none;
    padding: 3px;
    margin:  3px;
    background: whitesmoke;
    color: black;
    border-radius: 5px;
    width: 160px;
    border: 1px solid #ccc;

}
.myDashboardOption:focus 
{
  background-color: red;
  color: white;
}
.myDashboardOption:hover
{
 background-color: var(--CommonDataTableHover);
  color: white;
}
.monthCenterBox
{
    display: flex;
    align-content: center;
    align-items: center;
    width:auto;
    height: auto;
}
.myDashboardOption4calendar 
{
    box-sizing: border-box;
    font-size: small;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background: whitesmoke;
    border: none;
    padding: 3px;
    margin:  3px;
    color: black;
    width: 160px;
    width: 60px;
    border: 1px solid #ccc;
}
.MyRow4Calendar
{
    display: flex;
    margin: 3px;
    height: auto;
    width: auto;
    background-color: white;
}

.MyCol4Calendar
{
    flex: 1;    
    margin: 3px;
    padding: 3px;
    width: auto;
    white-space: nowrap;
}



.CommonDEBox
{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 10px;
    margin: 10px;
    width: auto;
    height: auto;
    border: none;
    border: 1px solid #c0c0c0; 
    box-shadow:  5px 5px 5px black;
    background-color: var(---CommonBox-BG);
    color:var(--CommonBox-Color);
    overflow: auto;
}

@media only screen and (min-width: 1000px) 
{
    .flex-container 
{
    display: flex;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    flex-direction: column;
    overflow: auto;
}

    .center-wrapper 
    {
        min-height: calc(100vh - 7.4vh - 4.4vh) ;
        overflow: auto;
    }

    .Common-Box
    {
        flex-direction: column;
        /*min-height: calc(100vh - 7.4vh - 4.4vh) ;*/
        /*1-aug-2025 giving issue for tab*/
        /*min-height: calc(100vh - 7.4vh - 4.4vh) ;*/
        
        height: calc(100vh - 7.4vh - 4.4vh) ;
        
        
        overflow: auto;
    }
    .myfc-header2
    {
        font-size: x-large;
        padding: 10px;
        margin: 10px;
    }
    .myfc-header3
    {
        font-size: 10px;
        padding: 10px;
        margin: 10px;
    }
    .myfc-header4
    {
        font-size: 10px;
        padding: 10px;
        margin: 10px;
    }

    .mycontainerdashboard
    {
        flex-direction:row;
        /*height: calc(100vh - 7.4vh - 4.4vh - 6vh - 15px - 15px - 10vh) ;*/
    }
    .FirstSide4Dashboard , .SecondSide4Dashboard , .ThirdSide4Dashboard , .FourthSide4Dashboard, .FifthSide4Dashboard
    {
        flex-direction:column;
        /*height: calc(100% - 5px - 5px);
        height: calc(100vh - 7.4vh - 4.4vh - 6vh );*/
    }
    .mySiderBar , .mySiderBar4Right
    {
        height: var(--BoxSize);
        overflow: auto;
    }


    .mycontainerdashboard
    {
        box-sizing: border-box;
        display: flex;
        flex-direction:row;
        flex: 1;
        width: 100%;
        height: 100%;
        border: 1px solid #c0c0c0; 
        box-shadow:  5px 5px 5px black;
        background-color: whitesmoke;
        overflow: auto;
    }

}