/*

Colors

#fbf7ff
#f6dcff
#e7b7f7
#9664A0
#7636a5
#5f1d80
#530064

teal
#006579

*/

.notifDIV,
.pageHomeDIV,
.closeIcon,
.projectSelectDIV,
.toolIcon,
.userProjectButton::before,
.prezoButton::before,
.databaseButton::before,
.unlockIcon,
.lockIcon,
.arrowRightIcon,
.arrowDownIcon,
.trashIcon,
.editIcon,
.uploadIcon,
.backArrow
{
    background-repeat: no-repeat !important;
    filter: sepia(1) hue-rotate(210deg) saturate(19) brightness(0.5);
}

.menuItem,
.notifDIV,
.accountDIV,
.pageHomeDIV,
.toolIcon,
.projectButton,
.databaseButton,
.prezoButton,
.prezoButtonLabel,
.unlockIcon,
.lockIcon,
.arrowRightIcon,
.arrowDownIcon,
.dbRow1,
.trashIcon,
.editIcon,
.uploadIcon,
.dbEntryTitleBar
{
    pointer-events: all;
    cursor: pointer;
}

/*
.collabProjectButton::before
{
    filter: sepia(1) hue-rotate(174deg) saturate(5) brightness(0.5);
}
*/


.navBar1_mainDIV,
.menuItems_hDIV,
.toolBar_mainDIV,
.settingsUserRow div
{
    display:inline-flex;
}

#addProjectButton,
#dbStructureBottomBar,
#dbEntriesBottomBar,
.insideTabDIV,
.tabDIV
{
    position:relative;
    text-align: center;
}

#dbStructureBottomBar,
#dbEntriesBottomBar,
.insideTabDIV,
.tabDIV
{
    left: 50%;
    transform: translateX(-50%);
}

#accountMenuDIV,
.tabViewport,
#dashboardColumn1Tab,
#dashboardColumn2Tab,
#dashboardRow1Tab
{
    background-color: #fbf7ff;
    border: solid thin #f6dcff;
}

#projectsSelectDIV,
#databasesSelectDIV,
#presentationsSelectDIV,
.databaseButton,
.prezoButton,
.projectButton
{
    display: flex;
}

#databasesSelectDIV,
#presentationsSelectDIV
{
    overflow-x: auto;
    overflow-y: hidden;
}

.databaseButton,
.prezoButton
{
    background-color: #FFF;
    flex:none;
}

.databaseButtonSelected textarea,
.databaseButton h1,
.prezoButtonSelected span,
.prezoButton h1
{
    font-weight: bold;
}

.databaseButtonDeselected,
#databaseTabFiller,
.prezoButtonDeselected,
#prezoTabFiller
{
    border-bottom: solid 0.1em #e7b7f7;
}

#databaseTabFiller,
#prezoTabFiller
{
    flex-grow: 1;
    background-color: #FFF;
}


.databaseButtonSelected,
.prezoButtonSelected
{
    background-color: #fbf7ff;
    border: solid thin #e7b7f7;
    border-bottom: unset;
}

#projectsSelectDIV,
.databaseButton,
.prezoButton,
.projectButton
{
    justify-content: center;
}

.databaseButton,
.prezoButton,
.projectButton
{
    position: relative;
    align-items: center;
}

.databaseButton::before,
.prezoButton::before
{
    background-size: 35%;
    opacity: 0.15;
}

.databaseButton::before,
.prezoButton::before
{
    content: "";
    background-position: center;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.databaseButton textarea,
.prezoButton span,
.projectButton textarea,
.databaseButton h1,
.dbTableRowDIV textarea,
.entryTableValue textarea,
.editableListName
{
    position: relative;
    text-align: center;
    height: auto;
    resize: none;
    overflow-wrap: break-word;
    overflow-y: hidden;
}

.databaseButton textarea,
.prezoButton span,
.projectButton textarea
{
    color: #BBB !important;
}

.databaseButtonSelected textarea,
.prezoButton span,
.userProjectButton textArea,
.databaseButton h1
{
    color: #530064 !important;
}

#databasesSelectDIV::-webkit-scrollbar,
#presentationsSelectDIV::-webkit-scrollbar
{
    display:block;
}

#databasesSelectDIV::-webkit-scrollbar-track,
#presentationsSelectDIV::-webkit-scrollbar-track
{
    background: transparent;
}
    
#databasesSelectDIV::-webkit-scrollbar-thumb,
#presentationsSelectDIV::-webkit-scrollbar-thumb
{
    background-color: #e7b7f7;
    border-right: none;
    border-left: none;
}

#databasesSelectDIV::-webkit-scrollbar-track-piece:end,
#databasesSelectDIV::-webkit-scrollbar-track-piece:start,
#presentationsSelectDIV::-webkit-scrollbar-track-piece:end,
#presentationsSelectDIV::-webkit-scrollbar-track-piece:start
{
    background: transparent;
}

.collabProjectButton textArea
{
    color: #006579 !important;
}

.buttonLabel
{
    pointer-events: none;
}

.collabLabel
{
    font-style: italic;
}







#databasesSelectDIV,
#presentationsSelectDIV
{
    /*height: 7vh;*/
}

#presentationsLoaderDIV
{
    top: 7vh;
}

#databasesSelectDIV::-webkit-scrollbar,
#presentationsSelectDIV::-webkit-scrollbar
{
    height: 1.3vw;
}





.databaseButton textarea,
.prezoButton span
{
    font-size: 1.5vw;
    line-height: 1.5vw;
}

.databaseButton h1,
.prezoButton h1
{
    font-size: 2vw;
}



/*
------------------------------------ ASPECT RATIO DRIVEN RULES
----------------------
---------------------- PORTRAIT RULES
*/

.databaseButton,
#databaseTabFiller,
.prezoButton,
#prezoTabFiller
{
    height: clamp(1em, 6vw, 4.9em);
}

#homeDIV,
#lbDIV,
.tabDIV,
.pageDIV,
#projectsSelectDIV,
.toolBar_mainDIV,
.navBar1_mainDIV,
#databaseSelectDIV
{
    width: 100%;
}

#homeDIV,
#lbDIV,
.navBar1_mainDIV,
.pageDIV,
.toolBar_mainDIV
{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.databaseButton,
.prezoButton
{
    width: clamp(1em, 9vw, 7.4em);
    line-height: 6vw;
}






/*
---------------------- LANDSCAPE RULES
*/

@media (min-aspect-ratio: 1)
{
    
    .databaseButton,
    #databaseTabFiller,
    .prezoButton,
    #prezoTabFiller
    {
        height: clamp(1em, 4vw, 3.3em);
    }
    
    #homeDIV,
    #lbDIV,
    .tabDIV,
    .pageDIV,
    #projectsSelectDIV,
    .toolBar_mainDIV,
    .navBar1_mainDIV,
    #databasesSelectDIV,
    #presentationsSelectDIV
    {
        width: clamp(10em, 60vw, 50em);
    }
    
    

    .databaseButton,
    .prezoButton
    {
        width: clamp(1em, 7vw, 5em);
    }
    
    .databaseButton textarea,
    .prezoButton span
    {
        font-size: 0.7em;
    }

    .databaseButton h1,
    .prezoButton h1
    {
        font-size: 1.1em;
    }
    
    
    
    
    
    
    
    
    .databaseButton textarea,
    .prezoButton span
    {
        font-size: clamp(0.5em, 0.9vw, 0.7em);
        line-height: clamp(0.1em, 1.1vw, 1.3em);
        word-wrap: break-word;
        align-content: center;
    }

    .databaseButton h1,
    .prezoButton h1
    {
        font-size: clamp(0.5em, 1.1vw, 0.9em);
    }
}










#databaseDownloadButton img,
#databaseUploadButton img,
#databaseDeleteButton img,
#projectArchiveButton img,
#projectRestoreButton img
{
    height: clamp(0.1em, 1.4vw, 1.4em);
    margin: 0 clamp(0.1em, 1vw, 1em) 0 0;
    filter: brightness(2);
}

#databaseDownloadButton,
#databaseUploadButton,
#databaseDeleteButton,
#projectArchiveButton,
#projectRestoreButton
{
    font-size: clamp(0.1em, 1vw, 1em);
}

.oddColor
{
    background-color: #faeffa !important;
}

.evenColor
{
    background-color: #f6dcff !important;
}

.maintenanceTitle
{
    margin: 3em 30vw;
    font-size: clamp(1em, 1.2vw, 10em);
    font-weight: 400;
    letter-spacing: 0.04vw;
    line-height: clamp(1.2em, 1.7vw, 10vw);
}