/*  MODALS - WINDOWS AND FRAMES */

 .modals{
    display:block;
    position:absolute;
    top:30%;
    left:40%;
    width:20%;
    height:400px;

    background-color: rgb(233, 233, 233);
    border: 2px solid navy;

    z-index: 1;
    touch-action: none;

}

.activityModal{

    min-width:300px;
    min-height: 500px;

}

.modalHeader{
    
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    background-color: gray;
    color:white;
    padding:5px;

}
.modalclose{

    cursor:pointer;
    
}
.headerName{
    
pointer-events: none;

}

.modalDataWrapper{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
   
}
    .modalItems{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow:hidden;
        word-wrap: break-word;
                                
        flex: 1 1 50%;
        border-bottom: 1px solid black;

    }
    
        .label{
            flex: 1 1 50%; 
            font-weight: bold;               
            padding:1px;

        }
        .data{               
            flex: 1 1 50%;
            word-wrap: break-word;
            background-color: white;
            padding-left: 5px;

        }

        .data li{
            border: 1px;
            margin:3px;

        }

    /*PREDECESSORS need more space)*/
    .predecessors{
        height:100px;
        overflow: auto;        

    }

    .data li:hover{

        cursor:pointer;
        background-color: rgb(134, 247, 247);
    }
 /*  TABLE HIGHLIGHTS AND FORMATS */

.highlightRow{

    background-color: rgb(232, 255, 101);
    font-weight: bold;

}

.hide{

    display:none !important; /* Otherwise it cannt override the existing display:flex lines!*/

}

.fullWidth{

    flex:1 1 100%; /* Chart to occupy the remaining area when toggled!*/
    width:100%;

}


/*  LOAD A PROJECT XER WINDOWS *****************************************************/

.XERWindow{

    margin:10px;
    font-weight: bold;
      
}

.XERWindow input{
    width:100%;
    background-color: rgb(174, 231, 241);
}



.loadXERWrapper{

    min-width:350px;

}

.sampleProjects{

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;

    background-color: white;
    padding:10px;
    margin-top:5px;

    gap:5px;
    height:65%;
    overflow: auto;
    

}
.sampleProject{

    padding:5px;
    margin:5px;
    border:1px solid black;
    flex: 1 1 50%;

}

.sampleProject:hover{

    background-color: aqua;


}


 /*  EXPORTER SETTINGS WINDOWS *****************************************************/
.exporterSettingModal{
    width:400px;    
    min-width: 350px;
    height:400px;
        
}
 .exporterSettingsWrapper{
           
                
}
.pdfSettings{        
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;    
     
}
.exporterSettingsItem{
    display: flex;
    flex-direction: row;        
    flex:1 1 100%;

    padding:10px;
    gap:5px;
    border-bottom:1px solid black;
    border-left:1px solid black;
    width:100%;
}
.exporterSettingsItem input{

        width:40px;

}    
    #pdfPaperMargins{
        
     display:flex;
     flex-wrap: wrap;
     width:100%;

    }
        #pdfPaperMargins .settingsLabel{        
            flex:1 1 30%;
    
        }
        #pdfPaperMargins .settingsData{        
            flex:1 1 10%;   
        }

    #pdfQuality input{
        width:100%;

    }




 /*  FORMAT SETTINGS WINDOWS *****************************************************/

 .formatSettingModal{
    display:flex;
    flex-direction: column;
    position:absolute;
    top:50%;
    left:60%;
    
    width:350px;
    min-width: 300px;

    min-height:420px;
    border:2px solid navy;
    z-index: 1;
 }
 .tagBar{
    display: flex;
    flex-direction: row;

 }
 .settingsButton{
    padding:5px;
    
 }
 .formatSettingsTags{    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
     
 }


        /*  LEVEL COLORS SETTINGS **********************/

        .colorSettings{

            width:100%;
            margin-top:10px;
            height:300px;
            overflow: auto;

        }
        .colorSettingItem{

            display: flex;
            flex-direction: row;    
            width:50%;
            padding:10px;
            justify-content: space-between;

        }

        .colorSettingLabel {
            flex:1 0 50%;

        }

        .colorSettingPicker{
            width:30%;
        }

        /* FONT SETTINGS ****************************/

        .fontSettings{

            display:flex;
            flex-direction: column;
            flex-wrap: nowrap;
            width:100%;                

        }

        .fontSettingsItemWrapper{

            padding-top:10px;
            margin-top:10px;
            display: flex;
            flex-direction: column;
            height:300px;
            overflow: auto;
            
            /*justify-content: space-evenly;
            align-items: center;*/

            gap:10px;
            

        }

        .fontSettingsHeadings p{

            font-weight: bold;
        }

        .fontSettingItems{

            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            width:100%;
            justify-content: space-evenly;
            align-items: center;

        }

        .fontSettingItem{

            display: flex;
            justify-content: space-evenly;
            flex:1 1;


        }

            .fontSettingItem input{
                width:40px;

            }


        




        /*
        .fontSettingsItem{

            flex-basis:30%;
            flex-shrink: 1;
            flex-grow: 1;

        }*/
        .settingsLabel{

            width:25%;

        }
        .settingsLabel input{

            width:50px;

        }
        

        /* CHART SETTINGS ****************************/

        .chartSetting{
            display:flex;
            flex-direction: column;
            flex-wrap: nowrap;
            width:100%;       

        }
        .chartSettingsItemWrapper{
            
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;

            padding-top:10px;
            gap:10px;
        
        }
        .modalFooter{
            display: flex;
            position:absolute;
            bottom:0;
            right:0;
            flex-direction: row;
            justify-content: end;

        }
        .footerButton{
            padding:10px;
            margin:10px;

        }


/* TABLE SETTINGS MODAL             */
.tableSettings{

    min-width:350px;

    top:20%;
    left:20%;
   
}
.tableSettingsWrapper{

    position:relative;
    

}
.tableDataSelector{
    display: flex;
    margin-left:10px;
    margin-top:10px;
    height:30px;
    width:100%;

}

.tableColListWrapper{

    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;


}

.tableColListItem{
    margin-top: 20px;
    height:380px;
    flex: 1 1 30%;

    display:flex;
    flex-direction: column;
    align-items: center;
    
}

.tableColListItem button{
   margin-bottom:10px;
   width:80px;
   height:30px;
    
}



.tableColumnList{
   
    width: 200px;
    height:70%;
    
    margin-left:10px;
    border: 1px solid #ddd;
    background-color: white;
    padding: 10px;

    overflow: auto;

}
.tableColumnList li{
    margin: 5px 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #f9f9f9;
    border: 1px solid #ccc;
    
}
.tableColFooter{

    position:absolute;
    left:0;
    bottom:0;
    padding:10px;

    display:flex;
    justify-content: end;
    gap:10px;

    width:100%;
    height:auto

}
.selectedListItem{

    background-color: rgb(130, 228, 231) !important;

}


 /* PARSING REPORT - SUMMARY *************/

.parsingReport{
    position:absolute;
    display:flex;
    flex-direction: column;
    top:10%;
    left:70%;   
    min-width:500px;   
    height:500px;
   
}
.parsingReportWrapper{
    
    border:1px solid gray;
    margin:10px;
    padding:5px;
    font-weight: bold;
    overflow: auto;

}
.parsingReportScreen {

    padding-left:30px;
    background-color: white;


}


/* FOR ONLY PROJECT-XER HEADERS */
.parseScreenHeaders{

    padding-top:15px;
    padding-bottom: 15px;;

}

/* LISTS OF DATA SCREEN */
.sectionNameLi{
    padding-left:0px;
    list-style-type:disc;
    padding-top:10px

}
.sectionDataLi{
    padding-top:10px;
    padding-right:100px;
    text-align: right;
    list-style-type: none;

}


.parsingReportPhoneButton{

    display:none;

};





/******** UNDER RCOSNTRUCTION WARNING */


 .underConstruction{

    display: flex;
    font-weight: bold;
    color:red;        
    padding:50px;
    

}




/* Progress Bar - Window ******************************/ 

 .progressWindow{

    display: flex;
    flex-direction: column;
    position:absolute;
    top:50%;
    left:50%;

    text-align: center;
    padding:30px;
    width:300px;
    height:100px;
    background-color: rgb(70, 247, 16);
    z-index:5;

 }

 /* Progress Bar - Window ******************************/ 

 .progressWindow2{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:0%;
    left:0%;

    text-align: center;
    padding:30px;
    width:100vw;
    height:100vh;
    background-color: rgb(70, 247, 16,0.5);
    z-index:5;

 }

 .progressBarTextBox{

    background-color: rgb(250, 250, 250,0.5);
    font-size: 1.3rem;

    width:40%



 }



 
/* CALENDAR MODAL *************************************************/

#calendarModal{

    display:block;
    position:absolute;
    top:20%;
    left:20%;
    width:450px;
    height:450px;
    max-height:450px;

    background-color: rgb(233, 233, 233);
    border: 2px solid navy;

    z-index: 2;
    font-weight: normal;
        

}

.calendarWrapper{
   
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
    justify-content:space-around;
    
}

    .dateChangerWrapper{
        
        /* item itself */
        flex: 1 1 100%;
        width:100%;
        margin:5px;
        
        /* items inside */
        display: flex;
        flex-direction: row;
        justify-content:space-around;
        margin-left:20%;
        margin-right:20%;
        height:20px;
        
        

    }

    .dateChangerWrapper h3{
        background-color: white;

    }

    .calendarList{
       
       /* item itself */ 
       background-color: white;
       width:110px; 
       margin-left:5px;
       margin-right:5px;
       height:315px;
       overflow: auto;

    }

    .calendarListWrapper{

      
            

    }

    /* Similar to Activity TAble -  Column Settings -  */ 
    .calendarItem{

        margin: 3px 2px;
        padding: 10px;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        font-size:0.8em;

    }

    .calendarTable{

        background-color: white;
        border-collapse: collapse;
        margin-right:5px;
       

    }

    .calendarTable th{
        height:45px;
        width:45px;
        border:1px solid black;
        text-align: center;

    }

    .calendarTable tr{

      
        
    }

    .calendarTable td{
        height:45px;
        width:45px;
        border:1px solid black;
        text-align: center;
        
        
    }

    .calendarFooter{

        padding-top: 5px;
        display: flex;        
        flex-direction: column;
        justify-content: start  ;
        width:35%;
        gap:5px;
                
        
    }

    .nonWorkingDay{

        background: rgb(238, 159, 159);

    }
    .exceptionDay{

        background: rgb(76, 247, 76);

    }

/*  FILTER MODAL FORMATS  - - - - - - - - - - - - - */

.filterModal{

    display:flex;
    flex-direction: column;
    width:600px;
    height:400px;

}

.filterWrapper{

    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    
    padding:10px;
    width:100%;
    

}

.filterWrapperItem{

    flex: 1 1 50%;

}

.filterSelections{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;

    flex-grow: 1;
    flex-basis: 100%;

    padding:10px;
    background-color: white;
    height:50px;
    
}

.futureFilterSelections{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;

    flex-grow: 1;
    flex-basis: 100%;

    padding:10px;
    background-color: white;
    height:150px;
    
}


.filterSelection{

    flex-grow: 1 1;
        
}


.addRemoveButtons{

    margin-right:10px;
}

.addRemoveButton{

    width:20px;
    
    
}


    .filterSelection input{

        width:60px;

    }


/*  FILTER - - - - FOOTER CHECK BOXES AND BUTTONS */

.filterCheckBoxes{

    display: flex;
    flex-direction: column;
    margin-top:10px;
    gap:10px;

}

.filterButtons{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap:10px;
    margin-top:10px;

}

.filterButton{

    flex: 1 1  15%;

}



/* JS TOggle Class */
.filterHighlight{

    background-color: yellow;

}



/***** REPORT MODAL - GENERATE / CREATE REPORTS  */


.reportModal{

    display: flex;
    flex-direction: column;
    width:350;

}