*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
    
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */


}

a {
    color: gray;
    text-decoration: none;
  }

body{

    height:100%;
    
}

.header{

    padding:14px;
    background-color: rgb(230, 230, 230);

   
}

.headerWrapper{

    display: flex;
    flex-direction: row;
    

}

.headerItem{
   
    
}

.pmsLogo{

    display:flex;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    font-size:2rem;
    font-weight: bold;
    color:gray;

    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer;
    text-decoration: none;
    
    

}

.headerButtons{

    background-color: rgb(230, 230, 230);
    font-size: 16px;
    color:black;
    border:1px solid black; /* for Ipad */
    padding:5px;
    margin-bottom:5px;
    cursor: pointer;
    min-width:80px;

}

.headerButtons:hover{

    background-color:rgb(196, 196, 196);

}

.ganttChartWrapper{

    margin:25px;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    height:90%;
    overflow:scroll;
            
  
}

/* TABLE SIDE */
        .ganttColumns{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            flex: 0 0 30%; /* Do not grow or shrink, fixed to 30% of wrapper's width !!!!!!!!!!!!*/ 
            
            
        }
        .ganttColumns_Table{
            /*table-layout: fixed;*/
            width: 100%; /* Ensures the table spans the full width of its container */
            border-collapse:collapse;
            border: 1px solid;

        }
        .ganttColumns_Table td,
        .ganttColumns_Table th{            
            max-height: 30px; /* Optional: Controls the maximum height of the cell */
            height: 30px;     /* Sets a fixed height for consistency */
            max-width:150px;

            padding-left: 10px;
            border: 1px solid;
            text-align: left;
            /*text-overflow: ellipsis;*/
            white-space: nowrap;
            overflow: hidden;
            

        } 
        
        .ganttColumns_Table th{
            height:60px;
        }

        .ganttColumns_Table thead:hover{

            cursor:pointer;
            background-color: rgb(230, 248, 129);
        }
              
        .tableHeading{
            

        }
        .tableTaskData{
            font-size: 12px;
            /*font-weight: bold;*/

        }

        .tableRows{


        }

        .tableRowHeading{
            font-size: 16px;
            font-weight: bold;
            background-color: aquamarine;

        }
        .tableHeadingData{



        }


/*  GANTT CHART - BARS SIDE */

.ganttBarchart{
    position:relative; /* for Update bar to get it as a ref. frame */

    /*min-height: 10000px; *//* Ensures the chart takes at least full viewport height */
    
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 auto; /* Width will be set via JavaScript !!!!!!!!!!!!!!!*/

    /*width:100%;*/
    /*border:1px solid red;*/
   
   
}

/* Calendar Row */

    .calendarrow{

        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        
        background-color: rgb(209, 209, 209);

    }

    .calendarDays{
        display:flex;

        border:1px solid rgb(112, 112, 112);
        font-size:10px;
        height:60px;
        text-align: center; /* Centers the text alignment */
        writing-mode: vertical-rl;
        transform: rotate(180deg); /* Day to the bottom */
        
        justify-content: center; /* Flex*/
        align-items: center;    /* Flex*/
        

    }

    .bars{
        /*padding : 2px;  */
        fill:#1284c7;
        min-Width:30px;

        /*border:1px solid black;*/
        /*height:30px;*/
        /*min-height: 30px; /* THE MOST IMPORTANT !!!!!!!!!!!!!!!!!!!!!!!!!!!! */
        stroke: rgb(0, 0, 0);
        stroke-width: 1px;    

    }

    
    .task-bars{

        /*border:5px solid black;*/
        /*stroke: rgb(5, 5, 51);
        stroke-width: 0px;*/
        
        
    }

        /*.task-bar::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: #ffffff; /* Red */
            /*z-index: 1;
        }

        .task-bar::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: #ffffff; /* Light Gray */
            /*z-index: 1;
        }*/
        .planned{

            fill:#1284c7;

        }

        .completed{

            fill: rgb(241, 17, 17);

        }


        .inprogress{

            fill: rgb(80, 241, 65);

        }


    .wbs-bar{

        fill: rgb(211, 211, 211);
        width:100%;

    }


    /* UPDATE BAR */

    .updatebar{

        position:absolute;
        width:5px;
        background-color: red;        
        height:100%;

    }


    
.gridlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh; /* Makes sure the gridlines extend to the full viewport */
    height: 100%; /* Allows gridlines to grow with content */
    pointer-events: none;
    /* Gridlines */
    background-image:
        linear-gradient(to right, #e0e0e0 1px, transparent 1px),
        linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
        background-size: 30px 30px; /* Grid spacing: 30x30 px */
        background-repeat: repeat;
    z-index: 0;
  }




   






















    /*  COLUMNS - DATA *//*
    .rows{
        width:600px;
        height:30px;

        display:flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between
        
        
    }

    .task-row{
        border:1px solid black;
        background-color: rgb(255, 255, 152);
        font-size: 14px;
        
        
    }

    .wbs-row{
        border:1px solid black;
        background-color: rgb(0, 238, 255);
        font-size: 20px;
        font-weight: bold;


    }

    .taskData{
        padding : 5px;    
        flex:1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        */