@media (max-width: 500px) {

    .modals{

        top:0;
        left:0;
        width:100%;
        height:100vh;
    
        background-color: rgb(233, 233, 233);
        touch-action: none;
    
    }
    

 
#calendarModal{

    top:0;
    left:0;
    width:100%;
    height:100vh;
    max-height:100vh;
    position:fixed;


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

    border:none;
    z-index: 2;
    font-weight: normal;
        
}

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




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

 }


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

}

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

 /* 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: 1rem;

    width:80%



 }


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

 .formatSettingModal{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    left:0;
    
    width:100%;
    height:100vh;
    border:none;
    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:100%;
            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:65vh;
            overflow: auto;

            gap:10px;
            

        }



#settingsConfirmDefault{

    bottom:15%;


}




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

 .parsingReport{
    position:fixed;
    display:flex;
    flex-direction: column;
    top:0;
    left:0; 
    min-width:100%;  
    width:100%;  
    height:100vh;
   
}
.parsingReportWrapper{
    
    border:0px solid gray;
    margin:0px;
    padding:0px;
    font-weight: bold;
    overflow: auto;

}
.parsingReportScreen {

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


}

   
.parsingReportPhoneButton{

    display:block;
    height:40px;
    background-color: orange;
    


};




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

.filterModal{

    display:flex;
    flex-direction: column;
    width:100%;
    height:100vh;

}

.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:100px;
    
    
}

.futureFilterSelections{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-evenly;

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

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

#is{

    flex: 1 1 100%;
    

}


#is2{

    flex: 1 1 100%;

}

.filterSelection{

    flex-grow: 1 1;
        
}


.addRemoveButtons{

    margin-right:10px;
}

.addRemoveButton{

    width:20px;
    
    
}


    .filterSelection input{

   width:100%;

    }


/*  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:100%;
    height:100vh;

}


    
}