/*

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
{
    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
{
    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;
}




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

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

/*
#addTableButton,
#addEntryButton,
#addContributorButton
{
    width: 4vw;
    padding: 1vw;
    font-size: 3vw;
}
*/

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

#presentationsLoaderDIV
{
    top: 7vh;
}

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

.databaseButton,
#databaseTabFiller,
.prezoButton,
#prezoTabFiller
{
    height: 6vh;
}

.databaseButton,
.prezoButton
{
    width: 12vw;
    line-height: 6vw;
}

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

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


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

@media (min-aspect-ratio: 1)
{
    .databaseButton textarea,
    .prezoButton span
    {
        font-size: 1.4vw;
        line-height: 1.6vw;
    }

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



/*
------------------------------------ MAXIMUMS/LIMITS
*/


@media screen and (min-width: 56em)
{
    #homeDIV,
    .tabDIV,
    .pageDIV,
    #projectsSelectDIV,
    .toolBar_mainDIV,
    .navBar1_mainDIV,
    #databasesSelectDIV,
    #presentationsSelectDIV
    {
        width: 50em;
        max-width: 100%;
    }
    
    #homeDIV,
    .navBar1_mainDIV,
    .pageDIV,
    .toolBar_mainDIV
    {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    /*
    #addTableButton,
    #addEntryButton,
    #addContributorButton
    {
        width: 1.4em;
        padding: 0.4em;
        font-size: 1.1em;
    }
    */
    
    .databaseButton textarea,
    .prezoButton span
    {
        font-size: 0.7em;
        line-height: 1em;
    }

    .databaseButton h1,
    .prezoButton h1
    {
        font-size: 1.1em;
    }

    /*
    #databasesSelectDIV,
    #presentationsSelectDIV
    {
        height: 3.5em;
    }
    
    #presentationsLoaderDIV
    {
        top: 3.5em;
    }
    
    .databaseButton,
    #databaseTabFiller,
    .prezoButton,
    #prezoTabFiller
    {
        height: 2.7em;
    }
    */

    .databaseButton,
    .prezoButton
    {
        width: 5em;
        line-height: 2.5em;
    }
}



#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);
}