.gradient-blue-light {
    background: #B0CAE7;
    background: linear-gradient(345deg, var(--blue) 0%, var(--lightblue) 100%);
}
.gradient-blue-dark {
    background: #00509E;
    background: linear-gradient(345deg, var(--ntnublue) 0%, var(--darkblue) 100%);
}


body {
    padding:        0 !important;
    margin:         0 !important;
}
button, input, select {
    border:         none !important;
    overflow:       hidden;
    white-space:    nowrap;
}
button:not(:disabled) {
    color:          white;
    background:     #00509E;
    background:     linear-gradient(345deg, var(--ntnublue) 0%, var(--darkblue) 100%);
}
button:hover, .nav-sort:hover {
    box-shadow:     inset 0px 8px 21px rgba(255, 255, 255, 0.3) !important;
    cursor:         pointer;
}
button:active, .nav-sort:active {
    box-shadow:     inset 1px 3px 5px rgba(0, 0, 0, 0.2)  !important;
}
dialog {
    padding:    0;
    overflow:   hidden;
    border:     none;
    margin-top: 60px;
    max-height: calc(98vh - 60px);
    overflow-y: auto;
}
img[src=""] {
    background: linear-gradient(345deg, var(--blue) 0%, var(--lightblue) 100%);
    content: "";
}


.login-container {
    max-width:      500px;
    display:        flex;
    flex-flow:      column;
    gap:            8px;
    margin:         auto;
    margin-top:     min(60px, 10vh);
    padding:        2em;
    border-radius:  2em;
    h2, p {
        color: white;
    }
}
.login {
    padding:        1em;
    border-radius:  1em;
    
    input, button {
        font-size:      1.2em;
        font-weight:    350;
        border-radius:  5px;
        height:         2rem;
    }
    & * {
        transition:     height 0.50s ease-in-out;
        height:         2.5rem;
        overflow:       hidden;
        width:          100%;
    }
}
.login[data-state=Generate]  {
    & .codeInput, .validateCode {
        height:         0px;
        margin-bottom:  0px;
    }
}
.login[data-state=Validate] {
    & .emailInput {
        pointer-events: none;
        & input {
            color:  #555;
        }
    }
}


.filepond--root,
.filepond--root .filepond--drop-label {
    /*min-height:         60px;*/
    font-family:        "Open Sans", "Segoe UI", "sans-serif";
    font-size:          13px;
    margin-bottom:      0;
}

@keyframes slideIn {
  from  { width: 0;     }
  to    { width: 100%;  }
}
.anim-slide-in {
  animation: slideIn 0.4s ease-out forwards; 
}

.anim-loading,
.anim-loading:after {
    box-sizing: border-box;
}
.anim-loading {
    display:    inline-block;
    width:      20px;
    height:     20px;
}
.anim-loading:after {
    content:        " ";
    display:        block;
    width:          20px;
    height:         20px;
    margin:         0px;
    border-radius:  50%;
    border:         2.4px solid currentColor;
    border-color:   currentColor transparent currentColor transparent;
    animation:      lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.delayedsave-input {
    display:                grid;
    gap:                    8px;
    align-items:            center;
    grid-template-columns:  1fr 20px;
}











.navbar {
    --size:             40px;
    
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    center;
    gap:                8px;
    padding:            1em;
    
    button.text {
        padding:        5px 13px;
    }
    * {
        font-size:      1rem;
        color:          white;
        height:         var(--size);
        border-radius:  8px;    
        display:        flex;
        justify-content: center;
        align-items:    center;
        align-content:  center;
    }

    button {
        min-width:      var(--size);
    }
    input { 
        color:          black;
        flex:           1 1 auto;
        min-width:      150px;
        max-width:      400px;
        padding:        5px 13px;
    }
}

.papers {
    margin-top:         30px;
    justify-content:    center;
    
    &[data-view="list"] {
    }
    &[data-view="grid"] {
        display:                grid;
        gap:                    30px;
        justify-items:          center;
        .paperfolder:hover {
            transform: scale(102%);
        }
        .papercard, .paperfolder {
            transition: transform 0.1s ease-in-out;
            display:    flex;
            padding:    8px;
            flex-flow:  column nowrap;
            gap:        5px;
            width:      300px;
            box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.25);
            img {
                width:          100%;
                object-fit:     cover;
                border-radius:  5px;
                height:         250px;
                margin-bottom:  5px;
            }
            .folder-items {
                display:        flex;
                flex-flow:      column nowrap;
                gap:            5px;
            }
            .place {
                color:          #555;
                display:        flex;
                flex-flow:      row nowrap;
                gap:            21px;
                font-size:      0.9em;
                justify-content:space-between;    
            }   
            .authors {  
                display:        flex;
                flex-flow:      column nowrap;
                gap:            5px;
            }
            .user {
                img {
                    width:          30px;
                    height:         30px;
                    object-fit:     cover;
                    border-radius:  999px;
                    border:         1px solid #eee;
                }
            }
            .title {
                display:            -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow:           hidden;
                line-height:        1.5;
                height:             4.0rem; 
            }
            p {
                margin: 3px 0;
            }
            .presenter {
                font-size:  1.1em;
            }
        }
        grid-template-columns:      repeat(3, max-content);
        @media(width < 1000px){
            grid-template-columns:  repeat(2, max-content);
        }   
        @media(width < 670px){
            grid-template-columns:  repeat(1, max-content);
        }
    }
}
.download-button {
    display:            flex;
    flex-flow:          row nowrap;
    gap:                8px;
    justify-content:    center;
}
.abstract-dialog {
    max-width:  450px;
    padding:    1em;
    p {
        padding:        1em;
        border-radius:  8px;        
        font-size:      1.1em;
        line-height:    1.7;
    }
}


.filemanager-dialog {
    width:      800px;
    min-height: calc(100vh - 100px);
    padding:    1em;
    display:    flex;
    flex-flow:  column nowrap;
    gap:        8px;
}
.filemanager {
    display:        flex;
    flex-flow:      column nowrap;
    gap:            8px;
    border-radius:  8px;
    padding:        1em;
    
    .assetinfo {
        display:        grid;
        grid-template-columns: 50px 1fr 30px 30px;
        gap:            8px;
        align-items:    center;
        padding:        8px;
        border-radius:  8px;
        background:     white;
        span {
            overflow:       ellipsis;
            white-space:    nowrap;
        }
        button {
            aspect-ratio:   1;
            font-size:      1.3em;
        }
        img {
            height:         30px;
            width:          100%;
            object-fit:     cover;
        }
    }
}


.profile-dialog {
    width:      800px;
    padding:    1em;
    overflow-y: auto;
    display:    flex;
    flex-flow:  column nowrap;
    gap:        8px;
    .profile-item {
        padding:        1em;
        border-radius:  1em;
    }
    --profile-image-height: 60px;
    .profile-image {
        display:                grid;
        grid-template-columns:  var(--profile-image-height) 1fr;
        gap:                    2em;
        img {
            border-radius:  999px;
            height:         var(--profile-image-height);
            aspect-ratio:   1;
            object-fit:     cover;
        }
        
        .filepond--root,
        .filepond--root .filepond--drop-label {
            min-height:     var(--profile-image-height);
        }
    }
    
    .profile-displayname {
        display:                grid;
        gap:                    8px;
        align-items:            center;
        grid-template-columns:  max-content 1fr 20px;
    }
}


.upload-dialog {
    width:      800px;
    min-height: calc(100vh - 100px);
    padding:    1em;
    overflow-y: auto;
    display:    flex;
    flex-flow:  column nowrap;
    gap:        21px;
    .result {
        background:     white;
        border-radius:  8px;
        padding:        0px 8px;
        line-height:    2;
    }
}
.authorships-dialog {
    max-width:  90vw;
    width:      1000px;
    overflow-y: auto;
    padding:    1em;
    display:    flex;
    flex-flow:  column nowrap;
    gap:        1em;
    
    .id {
        width:  40px;
    }
    .row {
        border-radius:  8px;
        padding:        1em;
        gap:            8px;
    }
    h2, h3 {
        margin:         0;
        padding-left:   8px;
    }
    .authors {
    }
    .user {
        padding:        5px;
        background:     #eee;
        border-radius:  5px;
        flex:           revert;
        code {
            padding-left:   5px;
            font-size:      1.1em;
        }
    }
    .user:has(input:placeholder-shown), select:has(option:checked[value^="No"]) {
        background: #bd0000;
        background: linear-gradient(310deg, rgba(189, 0, 0, 1) 0%, rgba(255, 54, 54, 1) 100%);
    }
    select {
        height: 30px;
    }
    .trash {
        margin-left: auto;
    }
}
.users-dialog {
    width:      600px;
    padding:    1em;
    .admins, .users {
        width:      100%;
        padding:    1em;
        .admin {
            padding:        5px;
            background:     white;
            border-radius:  3px;
            align-items:    center;
        }
    }
    .user-list {
        padding:    5px;
        background: white;
    }
    .trash {
        margin-left: auto;
    }
}