/* header{width:100%;height:50px;margin-top:0px;text-align:center;background-color:#005587;position:fixed;z-index:2} */
/* header{width:100%;height:50px;margin-top:0px;text-align:center;background-color:#ffffff;position:fixed;z-index:2} */
header{width:100%;height:50px;margin-top:0px;text-align:center;background-color:rgba(240, 240, 240, 0.5);position:fixed;z-index:2;backdrop-filter: blur(8px);}
body{margin:auto;padding:0;color:#000;-webkit-transition:all;-moz-transition:all;-ms-transition:all;-o-transition:all;transition:all;font-family:"Roboto",
Segoe,"Segoe UI",
"Lucida Sans Unicode","Lucida Grande","Open Sans",
"DejaVu Sans",Arial,sans-serif;
font-size:15px;line-height:170%;text-align:justify;font-weight:400;text-rendering: optimizeLegibility;}
h1,h2,h3,h4,h5,h6,div.title,div.ftheader,div.topic,div.news,span.venue,span.highlight{font-weight:600}
div.topic{font-size:17px; padding-left: 10px; padding-bottom: 5px}
div.news{font-size:17px; padding-bottom: 3px}
h4,div.title,div.ftsubheader{font-size:100%}
ul,ol,dl{margin:0;padding:5px 10px 6px 30px;width:calc(100% - 30px)}
img.img_responsive{width:100%;height:auto;display:block;}
video.img_responsive {
    width: 100%;
    height: auto;
    display: block
}
div.container a:link,
div.container a:visited{color:#4a85c8;text-decoration:none}
div.ftheader a:link,
div.ftheader a:visited,
div.ftsubheader a:link,
div.ftsubheader a:visited{color:#7c7c7c;text-decoration:none}
div.title a:link,
div.title a:visited{color:#000000}
div.authors a:link,
div.authors a:visited{color:#777777}
div.content a:hover,
div.content a:hover div.text,
div.ftsubheader a:hover{text-decoration:underline}
#span.jw{color:#000000;font-weight:600;text-decoration:underline}
span.js{color:#000000;font-weight:600}
span.author{white-space:nowrap}
div.outercontainer{text-align:center}
/*adjust container width*/
div.header,div.container,div.content,div.img,div.text{display:inline-block;zoom:1;*display:inline;display: inline-block;text-align:left;margin-left:auto;margin-right:auto;vertical-align:middle;max-width:960px}
div.header,div.container{min-width:300px}
div.img,div.text{padding-left:10px;padding-right:10px}
div.text.info{padding-left: 40px; padding-top: 5px}
div.header{line-height:50px}
div.ftheader,div.ftsubheader{display:inline-block;color:rgb(105, 105, 105)}
div.ftheader{float:left;padding-left:15px;font-size:1.17em}
div.ftsubheader{float:right;padding-left:20px;padding-right:20px}
div.outercontainer{padding-top:0px;padding-bottom:0px}
div.content{padding-top:0px;padding-bottom:0px;}
div.border_bottom{border-bottom: 1px solid #ddd;}
div.border_right {
    border-right: 1px solid #ddd;
}
div.container,div.content{width:100%}
div.body{margin-top:50px}
div.content{margin-bottom:10px}
div.heading, div.front{text-align:left;position:relative;z-index:1}
div.heading div.img{padding:30px 30px 30px 10px;max-width:30%}
div.heading div.img img{width:200px}
div.heading span.tag{padding-right:15px}
div.heading ul{padding-bottom:0px}
div.underreview{padding-top:0px;padding-bottom:5px}
div.publication{padding-top:0px;padding-bottom:20px}
div.publication div.img{max-width:300px;padding-right:0px;padding-top:5px}
div.publication div.text{max-width:650px;text-align:left;vertical-align:top}
div.authors{font-size:100%;color:#777777}
span.venue,span.highlight,
div.publication span.tag{padding-right:0px;font-size:100%}
span.highlight,
span.highlight a:link,
span.highlight a:visited{color:#F77E66}
span.fullvenue{padding-left:8px}
div.anchor{border-top:35px solid transparent;margin-top:-35px}
pre { display: block; padding: 10px; margin: 0 0 10.5px; font-size: 14px; line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; }
pre { overflow-x: auto; font-size: 10px;}
@media only screen and (max-width: 599px) {
    div.ftsubheader{padding-left:10px;padding-right:10px}
    div.heading div.img{padding-right:80px}
    div.publication div.img{display:none}
    div.publication div.text{text-align:left}
    div.content,div.publication{padding-top:0px;padding-bottom:10px}
    body{font-size:95%;font-weight: 400}
}
@media only screen and (min-width: 600px) {
    div.heading div.img{padding-right:calc(35px)}
    div.heading div.info{padding-right:calc(40% - 350px)}
    div.publication div.img{width:23%}
    div.publication div.text{max-width:70%;text-align:left}
}
@media only screen and (min-width: 2000px) {
    div.header,div.container,div.content,div.img,div.text{display:inline-block;zoom:1;*display:inline;display: inline-block;text-align:left;margin-left:auto;margin-right:auto;vertical-align:middle;max-width:1080px}
}
/* New styles for the scrollable list */
div.scroll-container {
    max-height: 360px;
    overflow-y: scroll;
    /* scrollbar-color: #4a85c8 #e0e0e0; */
    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: #c1d3e0 #f5f7fa;
    /* For Firefox */

    /* For WebKit browsers */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c1d3e0;
        border-radius: 10px;
        border: 2px solid #f5f7fa;
    }

    ::-webkit-scrollbar-track {
        background-color: #f5f7fa;
        border-radius: 10px;
    }

    border-bottom: 2px solid #c1d3e0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #f5f7fa;
    /* Ensure background matches the track color */
}
/* Press */
audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    height: 20px;
}

.nav {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
    /* background-color: #f8f8f8; */
    /* border-bottom: 1px solid #ddd; */
    padding: 10px;
}

.nav li {
    margin-right: 15px;
    cursor: pointer;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: fixed;
    background-color: #fff;
    width: 80%;
    max-width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -150%);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    z-index: 1001;
}

.modal-content.slide-in {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.modal-close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}

.modal-close:hover {
    color: #555;
}

.modal-body {
    padding: 20px;
    line-height: 1.5;
}

.modal-body a {
    display: block;
}

.modal-body a:hover {
    text-decoration: underline;
}

.news-icon {
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-icon:hover {
    transform: scale(1.05);
}

.news-icon span {
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}
/* recent work (teaser) */
.recent-work {
    height: 200px;
    width: 94%;
    padding-bottom: 35px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 10px 3% 30px 3%;
}
.slider {
    width: 2550px;
}

.slider a:hover {
    border: none
}

.slider img {
    height: 205px;
    border-radius: 10px;
    margin-right: 20px;
}

.slider video {
    height: 205px;
    border-radius: 10px;
    margin-right: 20px;
}

.recent-work::-webkit-scrollbar {
    background: none;
    height: 8px;
}

.recent-work::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 4px;
    margin-left: 240px;
    margin-right: 240px;
}

.recent-work::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.recent-work::-webkit-scrollbar-thumb:hover {
    background: #999;
}