/*
root element
 */

#fileandfoldersview
{
    margin:     5em auto auto auto;
    width:      auto;
    max-width:  100%;
    height:     auto;
    max-height: 80%;
}

.containerFile
{
    width:            35em;
    height:           auto;
    max-height:       30em;
    background-color: #FFFFFF;
    box-shadow:       0 0.4em 1.9em rgba(0, 0, 0, 0.25);
    border-radius:    0 30px 30px 30px;
    padding:          0;
}

.contentMessage
{
    display:        inline-flex;
    flex-direction: column;
    height:         auto;
    max-height:     5em;
    margin:         auto 0;
    padding:        1em 1em 1em 1em;
}

.messageStyle
{
    font-size:      13px;
    font-weight:    400;
    margin:         auto 0;
    padding-bottom: 0.5em;
}

.contentLink
{
    overflow-x:       hidden;
    overflow-y:       scroll;
    height:           auto;
    max-height:       70%;
    background-color: #e7e7e7;
    border-radius:    0 0 20px 20px;
    padding:          0 1em;
}

.previewCall
{
    display:         inline-flex;
    flex-direction:  row;
    flex-wrap:       nowrap;
    align-content:   center;
    justify-content: space-between;
    align-items:     center;
    width:           inherit;
}

.expdateMsgStyle
{
    font-size:   18px;
    font-weight: 400;
    margin:      auto;
    padding:     0.5em;
}

.errorFile
{
    font-size:   22px;
    font-weight: 400;
    margin:      1em auto auto auto;
    padding:     1.5em;
}

.fileDiv
{
    display:        inline-flex;
    flex-direction: column;
    height:         auto;
    max-height:     100%;
    width:          100%;
    margin:         2em auto auto auto;
    overflow:       hidden;
}

.fileRow
{
    display:         inline-flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
    padding:         0 0 0 0.5em;
    width:           100%;
    cursor:          pointer;
}

.fileRow:hover
{
    background-color: rgba(218, 218, 218, 0.84);
    padding-left:     0;
    padding-right:    0;
    border-radius:    1em;
}

.filenameText
{
    width:         50%;
    max-width:     50%;
    text-align:    justify;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.iconsRow
{
    padding:        0.5em 0;
    display:        inline-flex;
    flex-direction: row;
    margin-top:     1%;
}

.directoryNavbar
{
    display:          inline-flex;
    flex-direction:   row;
    width:            100%;
    justify-content:  space-between;
    align-items:      center;
    border-bottom:    1px solid grey;
    padding:          0.5em 0;
    margin:           auto;
    position:         sticky;
    top:              0;
    background-color: inherit;
    z-index:          0;
}

.openFolder, .backToRootClass
{
    width:           5em;
    display:         inline-flex;
    justify-content: end;
}

.fullpathText
{
    text-overflow: ellipsis;
    overflow:      hidden;
    white-space:   nowrap;
    width:         50%;
    max-width:     50%;
    text-align:    left;
}

#uploadFile
{
    width:            auto;
    white-space:      nowrap;
    background-color: #8afb8a87;
    border:           none;
    border-radius:    1em;
}

.openGallery
{
    width:            auto;
    min-width:        4em;
    text-overflow:    ellipsis;
    overflow:         hidden;
    white-space:      nowrap;
    background-color: #8afb8a87;
    border:           none;
    border-radius:    1em;
    margin-left:      10px;
}

#uploadFile:hover
{
    border-radius:    1em;
    background-color: rgba(147, 146, 146, 0.62);
}

.openGallery:hover
{
    border-radius:    1em;
    background-color: rgba(147, 146, 146, 0.62);
}

.singleFilePreview
{
    margin:     5em auto auto auto;
    display:    flex;
    width:      100%;
    height:     auto;
    max-height: 80%;
    min-height: 50%;
}

.container-file-preview
{
    width:           40em;
    height:          auto;
    max-height:      30em;
    border-radius:   0 20px 20px 20px;
    justify-content: center;
    overflow:        hidden;
    padding:         0;
}

.file-preview, .file-preview-iframe
{
    display:          inline-flex;
    flex-direction:   column;
    align-items:      center;
    height:           100%;
    width:            auto;
    max-width:        100%;
    min-width:        90%;
    background-color: #e7e7e7;
    border-radius:    12px;
    flex-wrap:        nowrap;
}

.file-preview img, .file-preview video
{
    max-width:  100%;
    width:      auto;
    height:     auto;
    max-height: 85%;
}

.file-preview-iframe, .file-preview-iframe iframe
{
    width:  100%;
    height: 100%;
}

.file-preview-not-permitted
{
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    border:          2px dashed #ccc;
    text-align:      center;
    margin:          auto;
    width:           100%;
    height:          100%;
}

.file-preview-not-permitted svg
{
    color: #888;
}

/*
navbar
 */

.navbarContainer
{
    background-color:           #FFFFFF;
    margin:                     0;
    height:                     4em;
    max-width:                  50em;
    border-bottom-right-radius: 20em;
    box-shadow:                 1px 2px 2px #e6e6e6b8;
    justify-content:            space-between;
}

.navbarLogoContainer
{
    display:    inline-flex;
    max-width:  7em;
    max-height: 4em;
    padding:    0.3em;
}

.logo_navbar
{
    max-height: 100%;
    max-width:  100%;
}

.navbarTitle
{
    max-width:     20em;
    font-size:     2em;
    color:         #9f9f9f;
    font-family:   revert-layer, serif;
    text-align:    center;
    text-overflow: ellipsis;
    width:         auto;
    overflow:      hidden;
    white-space:   nowrap;
}

/*
preview navbar
 */

.header
{
    display:          inline-flex;
    flex-direction:   row;
    align-items:      center;
    padding:          1.3em;
    background-color: #f5f5f5;
    width:            100%;
    height:           5em;
    border-radius:    12px 12px 0 0;
    flex-wrap:        nowrap;
    justify-content:  space-between;
    margin:           auto;
}

.title
{
    font-size:     15px;
    font-weight:   lighter;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.previewIcons
{
    width:           auto;
    display:         inline-flex;
    flex-wrap:       nowrap;
    align-content:   center;
    justify-content: flex-end;
    align-items:     center;
    margin-left:     0.4em;
}

.icon-button
{
    background-color: #e0e0e0;
    padding:          5px 10px;
    border-radius:    5px;
    border:           none;
    cursor:           pointer;
}

.icon-button:last-child
{
    background-color: transparent;
    border:           none;
    margin-left:      10px;
}

#append_preview
{
    display:         inline-flex;
    width:           100%;
    height:          100%;
    flex-direction:  row;
    flex-wrap:       nowrap;
    align-content:   space-between;
    justify-content: center;
    align-items:     flex-start;
}

.redClass
{
    background-color: #ff00004d;
}

.previewFontStyle, .nextFontStyle
{
    font-weight:   700;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    margin-bottom: 0;
    color:         #FFFFFF;
    font-size:     30px;
}

.closePreviewCol:hover
{
    font-size: 15px;
}

/*
footer
 */

#footerview
{
    display:        flex;
    flex-direction: row;
}

.containerFooter
{
    background-color:       #FFFFFF;
    height:                 3em;
    max-width:              15em;
    margin-right:           0;
    padding:                0;
    align-self:             flex-end;
    border-top-left-radius: 15em;
    display:                flex;
    justify-content:        end;
    flex-direction:         row;
    box-shadow:             10px 10px 10px 10px #e6e6e6b8;
}

.footerTitleText
{
    font-size:   0.8em;
    color:       #9f9f9f;
    font-family: revert-layer, sans-serif;
    margin:      auto;
    align-self:  center;
}

.rowSelected
{
    background-color: #49c3f140;
}


.previewTrigger
{
    padding: 0;
}

.downloadIcon
{
    min-width: 3.5em;
}

.slideShowClass
{
    font-weight: bolder;
    color:       #3d0000;
    font-size:   27px;
    cursor:      grab;
    padding:     1em;
}

.slideShowClass:hover
{
    color: rgba(73, 195, 241, 0.83);
}

.extRow
{
    margin:     auto;
    padding:    0;
    text-align: center;
}


.filenameClass
{
    font-size:     18px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    margin-bottom: 0;
}

.fileDataClass
{
    font-size: 11px;
}

.modalPreview
{
    margin-top: 0;
    width:      100%;
    height:     100%;
    padding:    0 !important;
}

/*
file preview modal
 */

#previewContainerModal
{
    display:          none;
    background-color: hsla(0, 0%, 75%, 0.5);
}

.container-file-preview-modal
{
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    padding:          0;
    height:           100%;
    flex-wrap:        nowrap;
    justify-content:  flex-start;
    background-color: #d9d9d9;
    user-select:      none;
}

.file-preview-modal
{
    display:         inline-flex;
    overflow:        hidden;
    width:           100%;
    height:          100%;
    justify-content: center;
    margin:          0 1em 1em 0;
}

.rowPreviewInfo
{
    display:          inline-flex;
    flex-direction:   row;
    align-items:      center;
    justify-content:  space-between;
    padding:          2em;
    width:            100%;
    height:           5em;
    background-color: #ffffff;
}

.file-preview-iframe-modal
{
    background-color: transparent;
    display:          inline-flex;
    width:            100%;
    height:           100%;
    flex-direction:   row;
    justify-content:  center;
}

.file-preview-iframe-modal iframe
{
    width:  100%;
    height: 100%;
}

.file-preview-modal img, .file-preview-modal video
{
    width:     auto;
    max-width: 100%;
}

.handleSlideshow
{
    display:        inline-flex;
    flex-direction: row;
    overflow:       hidden;
    flex-wrap:      nowrap;
    align-content:  center;
    align-items:    center;
    height:         100%;
    width:          100%;
}

/* Dialog styles */
#uploadFileModal
{
    border:           none;
    border-radius:    8px;
    padding:          0;
    max-width:        400px;
    width:            25%;
    background-color: transparent;
    box-shadow:       0 4px 6px rgba(0, 0, 0, 0.1);
}

#uploadFileModal::backdrop
{
    background-color: rgba(0, 0, 0, 0.5);
}

.close
{
    background: none;
    border:     none;
    font-size:  24px;
    color:      #999999;
    cursor:     pointer;
}

#uploadFileBtn
{
    display:       block;
    width:         100%;
    margin-bottom: 15px;
    padding:       10px;
    border:        1px solid #e0e0e0;
    border-radius: 4px;
    font-size:     14px;
}

#uploadFileInLink
{
    display:          block;
    width:            100%;
    padding:          10px;
    background-color: #007bff;
    color:            #ffffff;
    border:           none;
    border-radius:    4px;
    font-size:        16px;
    font-weight:      500;
    cursor:           pointer;
    transition:       background-color 0.3s ease;
}

#uploadFileInLink:hover
{
    background-color: #0056b3;
}

.zoom
{
    display:        inline-flex;
    flex-direction: row;
    flex-wrap:      nowrap;
}

@media (width > 1536px)
{
    .grid
    {
        width:                 100%;
        height:                100vh;
        display:               grid;
        grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 0.5fr;
        grid-template-rows: 0.5fr 1fr 1fr 1fr  0.5fr;
        gap:                   0 0;
        grid-auto-flow:        row;
        grid-template-areas:
            "a5 b5 c5 d5 e5 f5"
            "a4 b4 c4 d4 e4 f4"
            "a3 b3 c3 d3 e3 f3"
            "a2 b2 c2 d2 e2 f2"
            "a1 b1 c1 d1 e1 f1";
    }

    aside
    {
        width: 30%;
    }

    main
    {
        width: 100%;
    }
}

@media (width <= 1536px)
{
    .grid
    {
        width:                 100%;
        height:                100vh;
        display:               grid;
        grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 0.5fr;
        grid-template-rows: 0.5fr 1fr 1fr 1fr  0.5fr;
        gap:                   0 0;
        grid-auto-flow:        row;
        grid-template-areas:
            "a5 b5 c5 d5 e5 f5"
            "a4 b4 c4 d4 e4 f4"
            "a3 b3 c3 d3 e3 f3"
            "a2 b2 c2 d2 e2 f2"
            "a1 b1 c1 d1 e1 f1";
    }

    aside
    {
        width: 30%;
    }

    main
    {
        width: 100%;
    }
}

@media only screen and (max-width: 1270px)
{
    .body
    {
        transform: scale(1) !important;
    }

    .row
    {
        margin: 0 !important
    }

    .grid
    {
        height:          100vh;
        display:         flex;
        flex-direction:  column;
        justify-content: space-between;
        width:           100%;
        gap:             .2em;
        overflow-y:      scroll;
        overflow-x:     hidden;
    }

    #fileandfoldersview
    {
        order:      2;
        padding:    1em;
        margin:     0.5em auto auto auto;
        display:    flex;
        width:      100%;
        height:     auto;
        max-height: 80%;
    }

    #fileModal
    {
        order: 3;
    }

    .containerFile
    {
        background-color: #FFFFFF;
        box-shadow:       0 0.4em 1.9em rgba(0, 0, 0, 0.25);
        width:            30em;
        height:           auto;
        max-height:       30em;
        border-radius:    0 20px 20px 20px;
        justify-content:  center;
        overflow:         hidden;
        padding:          0;
    }

    .singleFilePreview
    {
        margin:     5em auto auto auto;
        display:    flex;
        width:      100%;
        height:     auto;
        max-height: 80%;
        min-height: 50%;
        padding:    1em;
    }

    #navbarview
    {
        order: 1;
    }

    .folder
    {
        padding:        .1em !important;
        height:         auto !important;
        display:        flex;
        flex-direction: column;
        align-items:    center;
        width:          100% !important;
        margin-top:     1em !important;
        border-radius:  .25em !important;
        flex:           1 !important;
    }

    .messageDiv
    {
        width:         95% !important;
        height:        auto !important;
        max-height:    12em;
        overflow:      auto;
        border-radius: .2em .2em 0 0 !important;
    }

    .folderDiv
    {
        margin:        0 !important;
        width:         95% !important;
        height:        auto !important;
        border-radius: 0 !important;
    }

    .fullpathText
    {
        padding-left: 3.5em !important;
    }

    .containerFolder
    {
        width: 100% !important;
    }

    .folderRow
    {
        width: 100% !important;
    }

    .footerDiv
    {
        width:         95% !important;
        margin:        0 !important;
        margin-bottom: 2% !important;
        padding:       1em 0;
        border-radius: 0 0 .2em .2em !important;
    }

    #foldertreeDiv, #fileModal
    {
        margin-top: 0.5em;
        order:      3;
    }

    #footerview
    {
        order: 4;
    }

    .foldertreeContainer
    {
        width:   100% !important;
        display: block;
    }

    .foldertreeList
    {
        display:          inline-flex;
        flex-direction:   column;
        background-color: rgb(239 239 239 / 95%) !important;
    }

    .containerFooter
    {
        margin-top:    1em !important;
        border-radius: 0 !important;
        padding:       0 !important;
    }

    #uploadFileModal
    {
        width: 90% !important;
    }

    .footerTitleText
    {
        margin: 0 !important;
    }

    .file-preview-iframe-modal iframe
    {
        width:  100%;
        height: 100%;
        margin: auto;
    }

    .file-preview-modal img, .file-preview-modal video
    {
        width:     auto;
        max-width: 100%;
        margin:    auto;
        height:     auto;
        max-height: 100%;
    }
}

@media only screen and (max-height: 50em)
{
    body
    {
        tab-size: 50em;
    }

    #uploadFileModal
    {
        width: 90% !important;
    }

    .fullpathText
    {
        padding-left: 3.5em !important;
    }
}