/*

Colors

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

*/

.databaseButton::before
{
    background-image: url(images/database-solid.svg);
}

#addDatabaseButton
{
    font-weight: bold;
}

#dbStructureDIV,
#dbEntriesDIV,
.dbEntryMain
{
    text-align: center;
    width: fit-content;
    background-color: rgba(255,255,255,0.6);
}

#dbStructureDIV,
#dbEntriesDIV
{
    border: solid 0.1em #e7b7f7;
}

.dbEntryMain
{
    border-left: solid 0.1em #e7b7f7;
    border-right: solid 0.1em #e7b7f7;
}

#dbStructureTableDIV
{
    display: inline-grid;
}

#dbStructureTableHeaderDIV,
.dbTableRowDIV
{
    display: inline-flex;
}

#dbStructureTableHeaderDIV
{
    background-color: #EEE;
    color: #666;
}

.dbRow
{
    border-bottom: solid 0.1em #BBB;
    border-right: solid 0.1em #BBB;
}

#dbStructureTableHeaderDIV .dbRow
{
    border-top: solid 0.1em #BBB;
}

.dbCol1
{
    border-left: solid 0.1em #BBB;
}

.dbRow1Selected
{
    background-color: #530064;
    color: #FFF;
}

.dbTableRowDIV
{
    background-color: #FFF;
}

.dbTableRowDIV textarea,
.entryTableValue textarea,
.editableListName
{
    color: #530064 !important;
}

.dbTableRowDIV select
{
    min-width: unset;
    border: none;
    border-bottom: solid 0.1em #BBB;
    border-right: solid 0.1em #BBB;
}

#dbStructureBottomBar,
#dbEntriesBottomBar
{
    display: flex;
    width: fit-content;
}

#lockStructureButton,
#deleteTableButton,
#deleteEntryButton
{
    background-position: center;
}

#lockStructureButton,
#deleteTableButton,
#deleteEntryButton
{
    background-size: 70%;
}

#addTableButton,
#addEntryButton
{
    font-weight: bold;
}

#structureTwirlDIV,
#entriesTwirlDIV,
.entryTwirlDIV,
.dbEntryTitlePrimaries
{
    display: inline-flex;
    float: left;
}

.dbEntryTitlePrimaries
{
    width: 100%;
}

.entryTable
{
    display: flex;
    border-bottom: solid 0.1em #e7b7f7;
}

.dbEntryTitleBar
{
    display: inline-flex;
    background-color: #fbf7ff;
    border-bottom: solid 0.1em #e7b7f7;
}

.entryTwirlDIV
{
    background-size: 35%;
    background-position: center;
}

.entryTableName
{
    display: grid;
    align-content: center;
}

.entryTableValue
{
    display: flex;
    align-items: center;
}

.entryTableName
{
    text-align: right;
    color: #7636a5;
    border-right: solid 0.1em #e7b7f7;
}

.entryTableValue,
.entryString textarea
{
    text-align: left;
}

.entryString
{
    display:grid;
    overflow: hidden;
    overflow-wrap:anywhere;
}

.entryString:after
{
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.entryString textarea
{
    resize: none;
    overflow: hidden;
    margin-top: 1em;
}

.entryString textarea,
.entryNumber input,
.entryDate input,
.entryTime input
{
    outline-color: transparent;
    outline-style: none;
}

.entryString textarea,
.entryString::after
{
    /*
    border: 1px solid black;
    padding: 0.5rem;
    font: inherit;
    */
    grid-area: 1 / 1 / 2 / 2;
}

.entryList select,
.entryList,
.entryString
{
    width: 100%;
    min-width: unset;
}

.entryColor
{
    width:1.2em;
}

#dbEntriesContainer
{
    border-top: solid 0.1em #e7b7f7;
    width: fit-content;
}

.entrySpacer
{
    background-color: #FFF;
    border-bottom: solid 0.1em #e7b7f7;
    margin-left: -0.1em;
    margin-right: -0.1em;
}

/*
.purgeButton
{
    margin: 3em auto;
    padding: 1.2em;
    font-size: 0.8em;
}
*/

#dbPurgeImagesBar
{
    margin: 4vh 0;
}

#databaseButtonBar
{
    margin: 2em;
    display: inline-flex;
}

#databaseDownloadButton,
#databaseUploadButton,
#databaseDeleteButton
{
    margin: 0 2vw;
}

#databaseDownloadButton img
{
    transform: rotate(180deg);
}

#dbImportOptionsDIV
{
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
}

.dbImportOptionDIV
{
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
    padding: 1em !important;
}

.dbImportOptionLabel1
{
    font-weight: 900;
}

.dbImportOptionLabel2
{
    margin-top: 1em;
    font-size: 0.7em;
    font-style: italic;
}

#dbInstructionsDIV
{
    text-align: center;
}



#dbStructureDIV,
#dbEntriesDIV
{
    margin: 4vh auto;
    padding: 1vh 3vw;
}

.dbCol1
{
    width: 2em;
}

.dbCol2
{
    width: 22em;
}

.dbCol3
{
    width: 12em;
}

.dbCol4
{
    width: 4em;
    display: inline-flex;
    align-items:center;
    justify-content: center;
}


.dbTableListRowDIV .dbRow
{
    min-height: 4vw;
}

.dbTableRowDIV select
{
    width: 22.1vw;
    background-size: 1.2vw;
}

.dbRow input[type="checkbox"]
{
    width: 1em;
    height: 1em;
    background-size: 50%;
    padding: 0.7em;
}


#dbEntriesContainer
{
    min-height: 4vw;
}

.dbEntryTitleIndex
{
    margin: 0 1.2vw 0 0;
}

.entryImage img
{
    max-height: 16vw;
    max-width: 36vw;
}

.entryTable
{
    font-size: 1.8vw;
}

.entryTableName
{
    min-width: 20vw;
    padding: 1vw 1vw 1vw 0;
}

.entryString,
.entryString::after,
.entryImage,
.entryNumber,
.entryDate,
.entryTime,
.entryColor,
.entryCurrency,
.entryBool
{
    padding-left: 1vw;
}

.entryImage
{
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.entryString textarea,
.entryNumber input,
.entryDate input,
.entryTime input
{
    font-size: 2vw;
}

.uploadEntryImage,
.editEntryImage
{
    margin-left: 1vw;
}

.uploadEntryImage
{
    width: 2.5vw;
    height: 2.5vw;
}

.editEntryImage
{
    width: 1.9vw;
    height: 1.9vw;
}

.entryNumber input,
.entryDate input,
.entryTime input
{
    padding: 1vw 0;
}

.entrySpacer
{
    height: 2vw;
}





.dbRow
{
    display: inline-flex;
    align-items: center;
}

.entryTwirlDIV
{
    transform: translateX(100%);
}


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


.dbRow,
.dbTableRowDIV select
{
    padding: clamp(0.1em, 0.7vw, 0.7em) clamp(0.1em, 1vw, 1em);
}

#dbStructureTableDIV,
.dbTableRowDIV textarea,
.dbTableRowDIV select
{
    font-size: 1.7vw;
}

.dbRow
{
    height: clamp(0.1em, 2.1vw, 1.2em);
}

#dbStructureTitleDIV,
#dbEntriesTitleDIV
{
    margin: clamp(0.1em, 2vw, 1.2em) 0;
    width: clamp(10em, 76vw, 48.5em);
}

#dbStructureTitleDIV,
#dbEntriesTitleDIV
{
    font-size: clamp(1em, 1.6vh, 1.3em);
}

#structureTwirlDIV,
#entriesTwirlDIV
{
    margin-top: clamp(0.1em, 2.3vw, 1.8em);
    width: clamp(0.1em, 1.5vw, 1.2em);
    height: clamp(0.1em, 1.5vw, 1.2em);
}

#addTableButton,
#addEntryButton,
#lockStructureButton,
#deleteTableButton,
#deleteEntryButton
{
    width: clamp(1em, 3.7vw, 3em);
    height: clamp(1em, 3.7vw, 3em);
    font-size: clamp(0.1em, 1.8vw, 1.5em);
}

#dbStructureBottomBar div,
#dbEntriesBottomBar div
{
    margin: 0 clamp(1em, 6vw, 4em);
}

#dbStructureBottomBar,
#dbEntriesBottomBar
{
    margin: clamp(1em, 2.4vw, 2em);
}

#dbEntriesBottomBar
{
    margin: clamp(1em, 7.2vw, 6em) clamp(1em, 2.4vw, 2em);
}

.dbEntryTitlePrimary
{
    margin-right: clamp(0.1em, 1.2vw, 1em);
}

.dbEntryTitleBar
{
    width: clamp(10em, 65.4vw, 54.4em);
    padding: clamp(0.1em, 1vw, 0.5em) clamp(1em, 5.2vw, 2.8em);
    font-size: clamp(0.1em, 1.9vw, 1.5em);
}

.entryTwirlDIV
{
    margin: clamp(0.1em, 0.4vw, 0.2em) clamp(-10em, -2.3vw, -2em) 0;
    width: clamp(1em, 3.1vw, 2.5em);
    height: clamp(1em, 3.7vw, 2.5em);
}







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

@media (min-aspect-ratio: 1)
{
    .dbRow,
    .dbTableRowDIV select
    {
        padding: clamp(0.1em, 0.4vw, 0.4em) clamp(0.1em, 0.7vw, 0.7em);
    }
    
    
    #dbStructureTableDIV,
    .dbTableRowDIV textarea,
    .dbTableRowDIV select
    {
        font-size: clamp(0.1em, 1vw, 0.8em);
    }

    .dbRow
    {
        height: clamp(0.1em, 1.4vw, 1.3em);
    }
    
    #dbStructureTitleDIV,
    #dbEntriesTitleDIV
    {
        margin: clamp(0.1em, 1vw, 0.8em) 0;
        width: clamp(10em, 45vw, 37em);
    }

    #dbStructureTitleDIV,
    #dbEntriesTitleDIV
    {
        font-size: clamp(0.1em, 1.2vw, 1em);
    }

    #structureTwirlDIV,
    #entriesTwirlDIV
    {
        margin-top: clamp(0.1em, 1vw, 0.8em);
        width: clamp(0.1em, 1.1vw, 0.9em);
        height: clamp(0.1em, 1.1vw, 0.9em);
    }

    #addTableButton,
    #addEntryButton,
    #lockStructureButton,
    #deleteTableButton,
    #deleteEntryButton
    {
        width: clamp(1em, 2.4vw, 3em);
        height: clamp(1em, 2.4vw, 3em);
        font-size: clamp(0.1em, 1.2vw, 1em);
    }
    
    #dbStructureBottomBar div,
    #dbEntriesBottomBar div
    {
        margin: 0 clamp(1em, 3.7vw, 3em);
    }
    
    #dbStructureBottomBar,
    #dbEntriesBottomBar
    {
        margin: clamp(0.1em, 1.2vw, 1em);
    }
    
    #dbEntriesBottomBar
    {
        margin: clamp(1em, 3.6vw, 3em) clamp(1em, 1.2vw, 1em);
    }

    .dbEntryTitlePrimary
    {
        margin-right: clamp(0.1em, 1.2vw, 1em);
    }
    
    .dbEntryTitleBar
    {
        width: clamp(5em, 34.2vw, 28.4em);
        padding: clamp(0.1em, 1vw, 0.5em) clamp(1em, 5.2vw, 2.8em);
        font-size: clamp(0.1em, 1.2vw, 1em);
    }
    
    .entryTwirlDIV
    {
        margin: 0 clamp(-10em, -2.3vw, -2em);
        width: clamp(0.1em, 2.6vw, 2.1em);
        height: clamp(0.1em, 2.6vw, 2.1em);
    }
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    .dbTableListRowDIV .dbRow
    {
        min-height: 2.6em;
    }

    .dbTableRowDIV select
    {
        width: 16.85em;
        background-size: 1em;
    }
    
    

    #dbEntriesContainer
    {
        min-height: 3em;
    }
    
    .dbEntryTitlePrimary
    {
        margin: 0 1em 0 0;
    }

    .dbEntryTitleIndex
    {
        margin: 0 0.7em 0 0;
    }

    .entryImage img
    {
        max-height: 8em;
        max-width: 18em;
    }

    .entryTable
    {
        font-size: 1em;
    }

    .entryTableName
    {
        min-width: 12em;
        padding: 0.5em 0.5em 0.5em 0;
    }

    .entryString,
    .entryString::after,
    .entryImage,
    .entryNumber,
    .entryDate,
    .entryTime,
    .entryColor,
    .entryCurrency,
    .entryBool
    {
        padding-left: 0.5em;
    }
    
    .entryImage
    {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .entryString textarea,
    .entryNumber input,
    .entryDate input,
    .entryTime input
    {
        font-size: 1em;
    }

    .uploadEntryImage,
    .editEntryImage
    {
        margin-left: 0.5em;
    }

    .uploadEntryImage
    {
        width: 1.2em;
        height: 1.2em;
        margin-left: 0.5em;
    }
    
    .editEntryImage
    {
        width: 0.9em;
        height: 0.9em;
    }

    .entryNumber input,
    .entryDate input,
    .entryTime input
    {
        padding: 1em 0;
    }
    
    .entryList select
    {
        font-size: 0.9em;
    }

    .entrySpacer
    {
        height: 1em;
    }
    
}








    
.listEditIcon
{
    width: 1.3em;
    height: 1.3em;
}

#dbTableListNamesInnerDIV
{
    justify-items: center;
    justify-self: center;
}

#dbTableListNamesDIV
{
    margin: 3em 0;
    display: inline-block;
    max-height: 14em;
    width: clamp(10em, 40vw, 30em);
    overflow-y: scroll;
    border: solid thin #530064;
    padding: 1em 0;
}

.dbTableListNameItem
{
    display: flex;
    padding: 0.5em 0;
}

.deleteListNameButton,
.deleteIndivEntry
{
    width: 1em;
    height: 1em;
}

.deleteListNameButton
{
    margin: 0 -1.5em;
}

.deleteIndivEntry
{
    float: right;
}

.dbImportOptionDIV
{
    display: inline-grid !important;
    line-height: clamp(0.1em, 1.2vw, 0.9em);
}