/*Quick reference for all the shorthand patterns:

1 value: margin: 10px; → all four sides = 10px
2 values: margin: 10px 20px; → top/bottom = 10px, left/right = 20px
3 values: margin: 10px 20px 30px; → top = 10px, left/right = 20px, bottom = 30px
4 values: margin: 10px 20px 30px 40px; → top, right, bottom, left (clockwise)*/
.MainFlexContainer 
{
	box-sizing: border-box;
    display: flex;

    flex-direction: column; /* stack children vertically */
	border: 1px solid #ccc;
    background-color: var(--MainFlexContainer-BG);
    color: var(--MainFlexContainer-Color);
    height: 100vh;
    width: 100vw;
    overflow: hidden; 
}

.SubFlexContainer 
{
	box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1; /* takes remaining height after header/footer */
    border: 1px solid #ccc;
    overflow-y: auto; /* only this part scrolls */
    background-color:  var(--SubFlexContainer-BG);
    color:  var(--SubFlexContainer-Color);
}

.MainBody
{
    box-sizing: border-box;
    display: flex;
    flex: 1;
    /*flex-direction: column;*/
    justify-content: center; 
    align-content: center;
    align-items: center;
    background-color: var(--Body-BG);
    color: var(--Body-Color);
    margin: 0;
    padding: 0;
    width: 100%;
    
    /*padding: 5px;
    margin: 5px;
    width: calc(100% - 5px - 5px); */
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
}

.Data-Entry-Box
{
    box-sizing: border-box;
    display: flex;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    overflow: auto;
}

.TopMenuBox
{
    box-sizing: border-box;
    background-color: var(--TopMenuBox-BG) ;
    color: var(--TopMenuBox-Color);
    /*display: flex;
    flex: 1;*/
    padding: 5px;
    margin: 5px;

    /*border: 1px solid #c0c0c0; */
    width: calc(100% - 5px - 5px);
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    background-color: black;
}

#center-menu
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    width: auto;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    background-color: ghostwhite;    
    overflow: auto;
}

#main-wrapper 
{ 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    padding: 8px;
    display: flex; 
    flex: 1;
    flex-direction: column; 
    overflow: auto;
    background-color: var(--main-wrapper);
    
}

.ReportMainBox
{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 10px auto;                /* centers when narrower than parent */

    width: auto;


    padding: 5px;
    
    /*max-width: 1200px;   */
    
    height: auto;
    
    /*16 jul 2026*/
    /*height:calc(100% - 10px - 10px);*/


    /*background-color: antiquewhite;*/
    /*background-color: purple;*/
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    overflow: auto;
}

.CenterBox4Header
{
    display:  flex;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    justify-content: center;
    font-size: 14px;
    background-color: var(--Header-BG);
    color: var(--Header-Color);
}

.CenterBox4Body
{
    width: 100%;
    padding: 5px;
    background-color: var(--Body-BG);
    color: var(--Body-Color);   
}

.CenterBox4Footer
{
    display:  flex;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    justify-content: center;
    font-size: 14px;
    background-color: var(--Footer-BG);
    color: var(--Footer-Color);
}

.SummaryBox4SearchedData1
{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    height: auto;
    width: calc(100% - 5px - 5px);
    font-size: var(--CommonReportFontSize);
    border: 1px solid #c0c0c0; 
    background-color: white;
    overflow: auto;
}

.SummaryBox4SearchedData
{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    height: auto;
    height: auto;
    min-height: fit-content;
    width: auto;
    max-width: calc(100% - 5px - 5px);
    font-size: var(--CommonReportFontSize);
    border: 1px solid #c0c0c0; 
    background-color: white;
    overflow: auto;
}


.ParameterBox4ReportSearchMultipleRow
{
    box-sizing: border-box;
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;

    flex-direction: column;
    /*margin: 5px;*/
    /*padding: 5px;*/
    height: auto;
    width: auto;
    background-color: white;
    font-size: var(--CommonReportFontSize);
    border: 1px solid #c0c0c0; 
    /*box-shadow: 5px 5px 5px black;
    background-color: red;*/
}

.myReportTable1
{
    
    padding: 10px;
    margin: 10px;
    width: calc(100% - 10px - 10px) !important;
    overflow: auto;
}

.Dashboard-Parameter-box
{
    box-sizing: border-box;
    display: flex;
    background-color: whitesmoke;
    height:auto;
    min-height: fit-content;
    color: black;
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    width: 100%;
    overflow: auto;
}


.Parameter-Box-001
{
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex: 1;
    background-color: whitesmoke;
    
    margin: 5px;
    padding: 5px;
    height:auto;
    min-height: fit-content;
    color: black;
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px black; 
    overflow: auto;
}


.Parameter-Box-002
{
    box-sizing: border-box;
/*    flex: 1;
    display: flex;
    flex: 1;*/
    background-color: whitesmoke;
    margin: 5px;
    padding: 5px;
  /*  height:auto;
    min-height: fit-content;*/
    color: black;
    font-weight: bold;
    border: 1px solid #ccc;
    /*overflow: auto;*/
}

#left-menu ,#right-menu
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: var(--Body-BG) ;
    color: var(--Body-Color);
    display: flex;
    flex-direction: column;
    border: 1px solid #c0c0c0; 
    width: auto;
    height: auto;
    
    overflow: auto;
}

#left-menu
{
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

#right-menu
{
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    /*padding: 5px; */
    flex: 1;
}

@media only screen and (min-width: 1000px) 
{
    .MainFlexContainer 
    {
        height: 100vh;
        width: 100vw;
        overflow: hidden; 
        /* main container stays fixed */
    }
    #main-wrapper 
    {
        flex-direction: row;
      }

    .Data-Entry-Box
    {
        max-height: calc(100vh - 7.4vh - 4.4vh -  4.4vh -  25px);

    }
     
}