﻿body {
    min-width: 390px;
    background-color: #5B7FA7;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


h2 {
    color: #354A61;
    font-size: 2em;
    font-weight: bold;
    border-bottom: 1px solid #354A61;
}

section.container {
    background: #F0EFE2;
}

.section {
    padding: 1em 15px 2em;
}




    .section a {
        color: #874e26;
        font-weight: bold;
    }

    .section h2 {
        position: sticky;
        top: 0;
        background: #f0efe2;
    }

    .section h3 {
        top: 38px;
        position: sticky;
        background: #f0efe2;
        margin: 0;
        padding: 0.5em 0;
        z-index: 1;
        text-align: center;
    }

.section-header-banner {
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #5b7fa7;
    margin: 0;
    padding: 0;
}

    .section-header-banner .container {
        background: #F0EFE2;
        padding: 1em 15px 8px;
    }

    .section-header-banner .container h2 {
        background: none;
    }

    .section-header-banner + .section h3 {
        top: 3.5rem;
    }

ul {
    margin: 0;
}


/* Page header area */
#page-header {
    background-image: url(/images/banner-image.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100;
}

    #page-header nav {
        margin-bottom: 5px;
        background: color(srgb 0.94 0.94 0.89 / 0.8);
    }

#mobile-nav {
    display: none;
}

#top-nav {
    margin: 0;
}

    #top-nav li {
        padding: 0.3em;
        text-align: center;
        flex-grow: 1;
    }

        #top-nav li.active,
        #top-nav li:hover {
            background: #fffac0;
        }

        #top-nav li a {
            display: inline-block;
            padding: 2px 0.2em;
            animation-duration: 200ms;
            height: 100%;
            width: 100%;
        }

#user-panel {
    background: color(srgb 0.94 0.94 0.89 / 0.7);
    padding-top: 15px;
    padding-bottom: 15px;
}

    #user-panel a {
        color: black;
    }

.user-panel-left {
    width: 20%;
}

.user-panel-right {
    width: 10%;
}

.user-panel-left img {
    max-width: 166px;
    box-shadow: 0 0 4px #5B7FA7;
    width: 100%;
}

.user-panel-right img {
    max-width: 90px;
}

.user-panel-middle {
    max-width: 70%;
    width: 100%;
}

.user-panel-right, .user-panel-left {
    width: 20%;
}

.user-panel-middle .container-fluid div {
    width: 146px;
    flex-grow: 1;
}

.user-panel-middle .container-fluid h1 {
    width: 100%;
    text-align: center;
}

.user-panel-middle .container-fluid div:nth-child(2n) {
    text-align: right;
    width: calc(100% - 150px);
}

.user-panel-middle .container-fluid {
    max-width: 600px;
}

.user-panel-middle blockquote {
    width: 100%;
    margin: 1em 0.2em 0.5em;
    padding: 0;
    position: relative;
    font-weight: 900;
    text-shadow: 0 0 1px #ffb100;
}

    .user-panel-middle blockquote span::before {
        content: " ";
        position: absolute;
        width: 0.5em;
        height: 1em;
        border: 1px solid #000000;
        left: 0;
        top: 0;
        border-width: 1px 0 0 1px;
    }

    .user-panel-middle blockquote span::after {
        content: " ";
        position: absolute;
        width: 0.5em;
        height: 1em;
        border: 1px solid #000000;
        right: 0;
        border-width: 0 1px 1px 0;
        bottom: 0;
    }

    .user-panel-middle blockquote span {
        position: relative;
        padding: 0 0.5em;
    }


@media (max-width: 767px) {
    .user-panel-right {
        width: 40px;
    }

        .user-panel-right img {
            width: 48px;
        }

    .user-panel-middle {
        max-width: none;
    }
}

@media (max-width: 576px) {
    #user-panel .user-panel-left,
    #user-panel .user-panel-right {
        display: none !important;
    }

    #mobile-nav {
        display: block;
    }

    #top-nav {
        display: none !important;
    }

    html.enable-mobile-menu {
        overflow: hidden;
    }

    html.enable-mobile-menu #page-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 22px;
    }

        html.enable-mobile-menu #page-header nav {
            display: block;
            height: 100%;
        }

        html.enable-mobile-menu #page-header #top-nav {
            height: calc(100% - 32px);
            display: flex !important;
        }

        html.enable-mobile-menu #page-header a[data-role="show-mobile-menu"] {
            display: none;
        }

        html.enable-mobile-menu #page-header a[data-role="hide-mobile-menu"] {
            display: inline-block;
        }

    html:not(.enable-mobile-menu) #page-header a[data-role="show-mobile-menu"] {
        display: inline-block;
    }

    html:not(.enable-mobile-menu) #page-header a[data-role="hide-mobile-menu"] {
        display: none;
    }
}


.user-panel-middle .container-fluid .social-media-icon-list {
    width: 100%;
}
.link-icons {
    width: 32px;
    height: 32px;
    background: url(data:image/gif;base64,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);
    overflow: hidden;
    display: inline-block;
    background-size: 32px 32px;
}

    .link-icons.google-scholar {
        background-image: url(/images/google-scholar.svg);
    }

    .link-icons.youtube {
        background-image: url(/images/youtube.svg);
    }

    .link-icons.dblp {
        background-image: url(/images/dblp.png);
    }

    .link-icons.research-gate {
        background-image: url(/images/researchgate.svg);
    }

    .link-icons.linkin {
        background-image: url(/images/linkedin.svg);
    }

/* news section */
/*.section-news.section-header-banner {
    background-image: url(/images/news-header-bg.jpg);
}*/

.news ul {
    padding: 0;
    margin: 0;
}

.news li {
    padding: 10px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(45deg, #5b7fa733, transparent);
    margin: 0.5em 0;
    border-radius: 0.5em 0 0 0.5em;
}

/*    .news li::before {
        content: " ";
        position: absolute;
        left: 5px;
        width: 32px;
        height: 32px;
        display: block;
        background-image: url("/images/notes-icon.svg");
        top: calc(50% - 12.8px);
        background-size: 80%;
        background-repeat: no-repeat;
    }*/

    .news li.call-for-paper {
        background: linear-gradient(45deg, #fd3fb633, transparent);
        border: none;
    }

        .news li.call-for-paper::before {
            content: none;
        }

.call-for-paper a {
    word-break: initial;
}

.call-for-paper h3 {
    margin-top: 0;
}

.news li.call-for-paper img {
    margin-left: -20px;
}

.call-for-paper .call-for-paper__cover-image {
    margin-right: 1em;
    float: left;
}

.more-content {
    height: 0;
    overflow: hidden;
}

    .more-content:has(+.more input:checked) {
        height: auto;
        overflow: auto;
    }

.more input {
    display: none;
}

    .more input + span {
        display: inline;
    }

        .more input + span + span {
            display: none;
        }

    .more input:checked + span {
        display: none;
    }

        .more input:checked + span + span {
            display: inline;
        }

.more label {
    background: #5b7fa7;
    display: inline-block;
    padding: 3px 5px;
    color: #f0efe2;
    border-radius: 3px;
    cursor: pointer;
}



/* publications section */
/*.section.publications.section-header-banner {
    background-image: url(/images/pubs-header-bg.jpg);
    background-position: 50% 40%;
}*/

.content-nav-container {
    position: sticky;
    width: auto;
    z-index: 100;
    top: 0;
}

#content-nav {
    width: 240px;
    padding: 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.6;
    top: 0;
    z-index: 100;
    background: #fdfceed4;
    border: 1px solid #cccccc;
    border-radius: 0 0 0 1em;
    right: 0;
    position: absolute;
}

    #content-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #content-nav li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
    }

        #content-nav li:last-child {
            border-bottom: none;
        }

    #content-nav a {
        display: block;
        color: #555;
        text-decoration: none;
        padding: 4px 8px;
        transition: all 0.2s ease;
        font-weight: 400;
    }

        #content-nav a:hover {
            color: #0066cc;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

@media screen and (max-width: 1024px) {
    .content-nav-container{
        position:initial;
    }
    #content-nav {
        float: none;
        width: 100%;
        text-align: left;
        position: relative;
        top: 0;
        background: #f0efe2;
        border-radius: 0;
        padding: 1vh 1vw;
        margin: 0;
    }

        #content-nav ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: space-evenly;
        }

        #content-nav li {
            margin-bottom: 0;
            border-bottom: none;
            flex: 0 0 auto;
        }

        #content-nav a {
            padding: 6px 12px;
            background: #e9e6bb;
            border-radius: 5px;
            font-size: 13px;
        }

            #content-nav a:hover {
                background: #dde4ea;
            }
}

a[id] {
    scroll-margin-top:2em;
}

.pub-list {
/*    --total-items: 1000;
    counter-reset: pub-index var(--total-items);*/
}

    .pub-list dt {
        position: sticky;
        top: 7rem;
        text-align: center;
        font-size: 1.3em;
        font-style: italic;
        font-weight: 400;
        background-color: #f0efe2;
        margin-top: 0.5em;
    }

        .pub-list dt::before {
            content: " ";
            border: 0.5px solid #000000;
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            z-index: -2;
        }

        .pub-list dt::after {
            content: " ";
            position: absolute;
            width: 4em;
            height: 1em;
            background: #f0efe2;
            left: calc(50% - 2em);
            top: calc(50% - 0.5em);
            z-index: -1;
        }

    .pub-list dd {
        padding: 0.3em 0.5em;
    }


        .pub-list dd:hover {
            background-color: rgb(91 127 167 / 20%);
            border-radius: 5px 5px 5px 5px;
            box-shadow: 0 0 2px #DEEDFF;
        }

        .pub-list dd p {
            margin: 0;
            padding: 0;
        }

/*            .pub-list dd p::before {
                content: counter(pub-index);
                counter-increment: pub-index -1;
                background-color: #004da2;
                color: white;
                border-radius: 3px;
                margin-right: 0.2em;
                padding: 0.1em;
            }*/

    .pub-list .pub-title {
        color: #00066F;
        font-style: italic;
        font-weight: bold;
    }

    .pub-list .pub-me {
        font-weight: bold;
        color: #0076FF;
    }

.book-list li {
    margin: 1em 0;
}

.book-list img {
    float: left;
    margin: 0 1em;
}