/*

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

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

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

.dbTableRowDIV
{
    background-color: #FFF;
}

.dbTableRowDIV textarea,
.entryTableValue textarea
{
    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;
}

#addTableButton,
#addEntryButton,
#lockStructureButton,
#deleteTableButton,
#deleteEntryButton
{
    width: 2em;
    height: 2em;
    font-size: 1em;
}

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

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

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


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

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

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

#dbStructureTitleDIV,
#dbEntriesTitleDIV
{
    margin: 2vw 0;
    width: 75vw;
}

.dbEntryTitleBar
{
    width: 29.5em;
    padding: 0.7vh 4em;
}

.dbRow1
{
    width: 6vw;
}

.dbRow2
{
    width: 30vw;
}

.dbRow3
{
    width: 20vw;
}

.dbRow4
{
    width: 10vw;
}

.dbRow
{
    height: 2vw;
}

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

.dbRow,
.dbTableRowDIV select
{
    padding: 0.7vw 1vw;
}

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

#dbStructureBottomBar
{
    margin: 2vw;
}

#dbEntriesBottomBar
{
    margin: 6vw 2vw 2vw;
}

#dbStructureBottomBar div,
#dbEntriesBottomBar div
{
    margin: 0 4vw;
}

/*
#lockStructureButton,
#deleteTableButton,
#deleteEntryButton
{
    width: 6vw;
    height: 6vw;
}
*/

.dbRow input[type="checkbox"]
{
    position: relative;
    top: 38%;
    transform: translateY(-50%);
    width: 1em;
    background-size: 50%;
    padding: 0.8em;
}

#structureTwirlDIV,
#entriesTwirlDIV
{
    width: 1em;
    height: 1em;
}

#structureTwirlDIV,
#entriesTwirlDIV
{
    margin-top: 0.5em;
}

.entryTwirlDIV
{
    margin: 0 -2em;
    width: 2em;
    height: 2em;
    transform: translateX(100%);
}

#dbEntriesContainer
{
    min-height: 4vw;
}

.dbEntryTitlePrimary
{
    margin: 0 1vw 0 0;
}

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




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

@media (min-aspect-ratio: 1)
{
    
}



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


@media screen and (min-width: 56em)
{
    /*
    #dbStructureDIV,
    #dbEntriesDIV
    {
        margin: 1.8em auto 0;
        padding: 0.4em 2.7em;
    }
    */
    
    #dbStructureTableDIV,
    .dbTableRowDIV textarea,
    .dbTableRowDIV select
    {
        font-size: 0.8em;
    }

    #dbStructureTitleDIV,
    #dbEntriesTitleDIV
    {
        margin: 0.8em 0;
        width: 37em;
    }

    /*
    .dbEntryTitleBar
    {
        width: 28.9em;
        padding: 0.4em 4em;
    }
    */
    
    .dbRow1
    {
        width: 4em;
    }

    .dbRow2
    {
        width: 18em;
    }

    .dbRow3
    {
        width: 12em;
    }

    .dbRow4
    {
        width: 6em;
    }

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

    .dbRow,
    .dbTableRowDIV select
    {
        padding: 0.4em 0.7em;
    }

    .dbTableRowDIV select
    {
        width: 16.85em;
        background-size: 1em;
    }
    
    #dbStructureBottomBar,
    #dbEntriesBottomBar
    {
        margin: 1em;
    }
    
    #dbEntriesBottomBar
    {
        margin: 3em 1em 1em;
    }

    #dbStructureBottomBar div,
    #dbEntriesBottomBar div
    {
        margin: 0 2em;
    }

    /*
    #lockStructureButton,
    #deleteTableButton,
    #deleteEntryButton
    {
        width: 2.5em;
        height: 2.5em;
    }
    */
    
    
    /*
    #structureTwirlDIV,
    #entriesTwirlDIV
    {
        margin-top: 0.8em;
        margin-left: -1.7em;
        margin-right: 1.7em;
    }
    
    #structureTwirlDIV,
    #entriesTwirlDIV
    {
        width: 1em;
        height: 1em;
    }
    */

    /*
    .entryTwirlDIV
    {
        width: 2em;
        height: 2em;
    }
    */

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