:root { --primary-white: #ffffff; --secondary-text: #777777; --footer-text: #707070; --border-color: #e0e0e0; --bg-footer: #f3f3f3; --transition: all 0.3s ease; --text-main: #333c4d; --text-muted: #363746; --accent-red: #fa314a; --ssm-bg: #f7fbfd; --ssm-surface: #ffffff; --ssm-primary: #0f305c; --ssm-accent: #377bd4; --ssm-text-main: #2c3e50; --ssm-text-light: #5f6c7b; --ssm-border: #dfe4ec }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; scroll-behavior: smooth }
body { line-height: 1.6; font-family: "Poppins", sans-serif; scroll-behavior: smooth }
a { text-decoration: none; color: inherit }
.logo-container-wrapper { height: fit-content; display: inline-block; }
.hero-section { display: flex; justify-content: center; align-items: center; background: transparent linear-gradient(140deg, #F5FFFF 0%, #D1E6FF 100%) 0% 0% no-repeat padding-box; padding: 3.5rem 1.25rem 3rem; text-align: center; color: #000000 }
.hero-section .hero-content { max-width: 900px; width: 100% }
.hero-section .hero-content .logo { pointer-events: none; user-select: none; height: 50px }
.hero-section .hero-content .hero-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; line-height: 1.2; margin-bottom: 1rem; padding-top: 100px; color: #102663 }
.hero-section .hero-content .hero-description { margin: 0 auto 2rem; max-width: 700px; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #102663 }
.hero-section .cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 1rem 2rem; border-radius: 50px; font-size: 18px; background: transparent linear-gradient(142deg, #00A7CF 0%, #1F6FF8 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 17px #98EAFF; border-radius: 31px; color: #ffffff; text-decoration: none; font-weight: 500 }
.hero-section .cta-btn:hover { background: transparent linear-gradient(142deg, #00A7CF 30%, #1F6FF8 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 17px #8de3f8 }
.hero-section .author_name { display: block; font-size: 15px; margin-top: 45px; color: #4d4d4d }
.hero-section .author_name b { color: #000000 }
.hero-section .author_name span { font-size: 18px; color: #696969; font-weight: 400; display: block; margin-top: 8px }
.research-container { max-width: 1200px; margin: 0 auto; padding: 3rem 1rem; position: relative }
.secondary_navbar { display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(76 76 76 / 30%); opacity: 1; pointer-events: none; transform: translateY(-100%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform }
.secondary_navbar.show { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); opacity: 1; pointer-events: auto; transform: translateY(0); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), }
.secondary_navbar .nav_container { max-width: 1300px; width: 100%; margin: 0 auto; padding: 1rem 1rem; display: flex; justify-content: space-between; align-items: center }
.secondary_navbar .nav_container .logo { height: 40px; pointer-events: none; user-select: none }
.secondary_navbar .cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0.7rem 2rem; border-radius: 50px; font-size: 16px; background: transparent linear-gradient(142deg, #00A7CF 0%, #1F6FF8 100%) 0% 0% no-repeat padding-box; color: #f3f3f3; text-decoration: none; font-weight: 500 }
.secondary_navbar .cta-btn:hover { background: transparent linear-gradient(142deg, #00A7CF 30%, #1F6FF8 100%) 0% 0% no-repeat padding-box }
.secondary_navbar .button_container { display: flex; align-items: center; gap: 35px }
.hamburger { display: none; cursor: pointer }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #333; border-radius: 2px }
@media (max-width:768px) {
.hamburger { display: block; z-index: 1001 }
.hamburger.active .bar:nth-child(2) { opacity: 0 }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }
.secondary_navbar .button_container { position: fixed; left: -100%; top: 70px; flex-direction: column; background-color: #fff; width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); padding: 2rem 0; gap: 20px; border-bottom: 1px solid #eee }
.secondary_navbar .button_container.active { left: 0 }
.secondary_navbar .btn-links { font-size: 18px; color: #333; text-decoration: none; margin: 10px 0; display: block }
}
.research-container .section-title { font-size: 28px; font-weight: 600; text-wrap: nowrap; color: var(--text-main) }
.research-container .paper-card { display: flex; align-items: center; background: transparent linear-gradient(138deg, #f5fdff 0%, #faf9ff 100%) 0% 0% no-repeat padding-box; border: 1px solid #d7e4ee; border-radius: 9px; margin-bottom: 24px; min-height: 135px; opacity: 0; transition: all 0.5s ease }
.research-container .paper-card.is-visible { opacity: 1; transform: translateY(0) }
.research-container .paper-number { border-bottom-left-radius: inherit; border-top-left-radius: inherit; font-size: 60px; font-weight: 800; align-self: stretch; font-style: italic; user-select: none; color: #d1e3f8; background: transparent linear-gradient(176deg, #e5faff 0%, #f5f3fe 100%) 0% 0% no-repeat padding-box; border-right: 1px solid #d7e4ee; display: flex; align-items: center; justify-content: center; min-width: 120px; max-width: 100%; text-align: center; padding: 0 10px; -webkit-text-fill-color: rgba(255, 255, 255, 0); -webkit-text-stroke: 1px #769bb8 }
.paper-number .search-highlight { -webkit-text-fill-color: rgba(255, 255, 255, 0); -webkit-text-stroke: 1px #000000; }
.research-container .paper-content { flex-grow: 1; margin: 15px 20px; display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; max-width: 100%; gap: 1px; text-decoration: none }
.research-container .paper-content h3:hover { color: #3B699C }
.research-container .read_more { font-size: 14px; padding-top: 5px; color: #013b9f; display: flex; align-items: center; gap: 0px; height: fit-content; transition: all 0.3s ease; display: none }
.research-container .paper-content .read_more:hover { color: #1f6ff8; gap: 4px; transition: all 0.3s ease }
.research-container .paper-title { font-size: 18px; font-weight: 600; color: #363746; margin-bottom: 5px }
.research-container .paper-description { font-size: 14px; font-weight: 400; color: #68737e; line-height: 25px }
.research-container .paper-meta { font-size: 16px; color: #737485; font-style: italic }
.paper-container { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 100% }
.paper-container .row-content { display: flex; align-items: center; justify-content: space-between; width: 100% }
.paper-container .row-zenodo { display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid #e0e0e0; padding: 0 20px; margin: 0; height: 50px }
.row-zenodo .zenodo-container { font-size: 14px; display: flex; align-items: center; }
.pd-value { letter-spacing: 0.1rem; }
span.deprecated-papers { padding: 2px 12px; background-color: #dee4e9; border-radius: 5px; margin-left: 20px; color: #425a6d; font-size: 13px; }
span.zenodo_label { color: #838595; font-weight: 600; margin-right: 5px }
a.zenodo-link-btns { color: #132f8d; }
/* a.zenodo-link-btns::after{
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: url('../images/extend_link2_svg.svg') no-repeat center;
background-size: contain;
} */
a.zenodo-link-btns:hover { color: #2563eb }
.research-container .paper-actions { padding: 20px 20px 20px 20px; display: flex }
.paper-button-container { display: flex; gap: 10px; align-items: center }
.research-container .paper-actions .paper-actions-btn-group { display: flex; align-items: center; gap: 20px }
.paper-dependency { padding: 20px 7px 20px 20px; display: none; }
.paper-dependency strong { font-weight: 400; font-size: 14px; color: #68737e }
.paper-dependency p { display: flex; align-items: center; font-size: 14px; color: #363746; font-weight: 500 }
.paper-dependency .tooltip-icon { background: url('../images/info_icon.svg') no-repeat center; background-size: contain; width: 12px; height: 12px; display: inline-block; margin-left: 0px; margin-right: 5px; top: 2px }
.research-container .download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 175px; padding: 8px; background: #ffffff; border: 1px solid #cbd5e0; border-radius: 6px; text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 400; transition: all 0.2s }
.research-container .download-btn img { width: 18px; height: 18px }
.research-container .download-btn:hover { border-color: var(--accent-red); color: var(--accent-red) }
section.research-container { max-width: 1400px }
.secondary_navbar .nav_container { max-width: 1400px }
.paper-actions { display: flex; align-items: center; gap: 10px }
.html-link-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 180px; padding: 8px; background: #edf8ff; border: 1px solid #97d7ff; color: #0071bc; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 400; transition: all 0.2s }
.research-container .html-link-btn::before { content: url('../images/file-text.svg'); display: flex; width: 18px; height: 18px }
.html-link-btn:hover { border: 1px solid #0071bc }
.research-container .zenodo-link-btn { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 200px; padding: 8px; background: #ffffff; border: 1px solid #6eaad3; border-radius: 6px; text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 400; transition: all 0.2s }
.research-container .zenodo-link-btn::before { content: url('../images/external-link.svg'); display: flex; width: 18px; height: 18px }
.research-container .zenodo-link-btn:hover { background-color: #e7f5ff; color: #00395f; border: 1px solid #00395f }
#progress-scroll { position: fixed; bottom: 20px; right: 40px; height: 50px; width: 50px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; z-index: 100; background: conic-gradient(#00252E 0%, #00252E 100%); opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s }
#progress-scroll.show { opacity: 1; visibility: visible; transform: translateY(0) }
#progress-value { display: flex; align-items: center; justify-content: center; height: calc(100% - 4px); width: calc(100% - 4px); background-color: #ffffff; border-radius: 50%; font-size: 20px; color: #00252E }
footer { text-align: center; padding: 1rem; background: var(--bg-footer); color: var(--footer-text); font-size: 0.9rem }
.fade-up, .research-container .paper-card { opacity: 1 }
.fade-up.is-visible, .research-container .paper-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0) }
@media (max-width:768px) {
.hero-section { min-height: fit-content; padding-top: 3rem }
.hero-section .hero-content .hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); padding-top: 45px; line-height: 1.6 }
.hero-section .cta-btn { padding: 0.75rem 1.6rem }
.secondary_navbar .nav_container { padding: 0.6rem 1rem }
.secondary_navbar .logo { height: 34px }
.secondary_navbar .cta-btn { padding: 0.55rem 1.2rem; font-size: 14px }
.research-container .section-title { font-size: 28px; text-align: center; margin-top: 20px }
.research-container { padding: 1rem }
.research-container .paper-card { flex-wrap: wrap }
.research-container .paper-content { justify-content: flex-start; min-height: 80px; padding: 0px }
.research-container .paper-description { font-size: 15px; color: #818186 }
.research-container .paper-number { background: none; border-right: none; font-size: 55px; padding: 5px 20px; text-align: left; justify-content: flex-start }
.research-container .paper-card:hover .paper-number { background: none }
.research-container .paper-actions { width: 100%; padding: 14px; justify-content: space-between; flex-direction: column }
#progress-scroll { right: 20px; height: 40px; width: 40px }
}
@media (max-width:1024px) {
.research-container .paper-actions { padding: 20px; flex-direction: row }
.secondary_navbar .nav_container { padding: 0.75rem 1rem }
.secondary_navbar .cta-btn { padding: 0.6rem 1.5rem; font-size: 15px }
}
@media (max-width:480px) {
.paper-card { flex-direction: column; align-items: flex-start !important; justify-content: center }
.secondary_navbar .nav_container { flex-direction: column; gap: 1.2rem; padding: 0.75rem 1rem }
.secondary_navbar .logo { height: 30px }
.secondary_navbar .cta-btn { width: 230px; justify-content: center; padding: 0.45rem 1rem; font-size: 14px }
}
@media (max-width:1350px) {
.paper-container { flex-direction: column; align-items: flex-start }
.research-container .paper-actions { padding: 0px 20px 20px }
}
#ssm-grant-portal { background-color: var(--ssm-bg); color: var(--ssm-text-main); font-family: var(--font-sans); line-height: 1.6; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box }
#ssm-grant-portal *, #ssm-grant-portal *::before, #ssm-grant-portal *::after { box-sizing: inherit }
#ssm-grant-portal .ssm-container { max-width: 1400px; margin: 0 auto; padding: 0 20px }
#ssm-grant-portal section { padding: 5rem 0 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05) }
#ssm-grant-portal h2 { font-family: var(--font-serif); color: var(--ssm-primary); font-size: 2.5rem; margin-bottom: 2rem; font-weight: 600; position: relative; display: inline-block }
#ssm-grant-portal h3 { font-family: var(--font-serif); color: var(--ssm-primary); font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid #efefef; margin-right: 21px !important; padding-bottom: 13px; line-height: 23px; font-size: 1.2rem !important }
#ssm-grant-portal .before-topic-list-body-outlet { color: var(--ssm-text-main); margin-bottom: 0.5rem; min-height: 20px; align-items: flex-start }
#ssm-grant-portal .before-topic-list-body-outlet strong { color: #3644a7; font-weight: 600; padding-right: 5px }
#ssm-grant-portal ul { list-style: none; padding: 0; margin: 0 }
#ssm-grant-portal .intro-block { max-width: 900px; font-size: 1.1rem; text-align: center; margin: 10px auto; padding-bottom: 3rem }
#ssm-grant-portal .three-col-grid { display: grid; grid-template-columns: 1fr; gap: 3rem }
#ssm-grant-portal .research-card { background: var(--ssm-surface); padding: 2.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border-top: 4px solid var(--ssm-accent); transition: transform 0.2s ease; height: 100% }
#ssm-grant-portal .research-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08) }
#ssm-grant-portal .research-card strong { display: block; color: var(--ssm-primary); font-size: 1.1rem; margin-bottom: 0.5rem }
#ssm-grant-portal .rfp-header-group { display: flex; justify-content: center; gap: 0; flex-direction: column; margin-bottom: 3rem; text-align: center }
#ssm-grant-portal .rfp-header-group h2 { margin-bottom: 1rem }
#ssm-grant-portal .year-tag { background-color: var(--ssm-primary); color: white; padding: 5px 15px; font-weight: bold; font-size: 0.8rem; letter-spacing: 1px }
.track-item-container { display: flex; align-items: center; gap: 20px }
#ssm-grant-portal .track-item { display: flex; flex-direction: column; background: transparent linear-gradient(145deg, #edf3ff 0%, #faf9ff 100%) 0% 0% no-repeat padding-box; border: 1px solid var(--ssm-border); padding: 2rem; border-radius: 10px; margin-bottom: 2.5rem }
#ssm-grant-portal .track-item h3 { color: #03165e; font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem }
#ssm-grant-portal .track-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; width: fit-content; border-radius: 50px; --tw-text-opacity: 1; background-color: rgb(92 153 252 / 10%); border: 1px solid rgb(52 107 196 / 20%); padding: 6px 30px }
.prediction-box .before-topic-list-body-description { min-height: 140px; display: flex; align-items: flex-start; text-align: center }
#ssm-grant-portal .track-objective { color: #000000; font-size: 0.85rem; background: #e8ecf5; display: inline-block; padding: 2px 15px; border-radius: 5px; margin-bottom: 1rem }
#ssm-grant-portal .split-layout { display: grid; grid-template-columns: 1fr; gap: 5rem }
#ssm-grant-portal .check-list-container { margin-top: 1.5rem }
#ssm-grant-portal .check-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ssm-border) }
#ssm-grant-portal .check-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0 }
#ssm-grant-portal .check-icon { color: var(--ssm-accent); font-weight: bold; font-size: 1.2rem; line-height: 1; flex-shrink: 0; margin-top: 6px }
#ssm-grant-portal .check-content strong { display: block; color: var(--ssm-primary); margin-bottom: 0.25rem }
#ssm-grant-portal .prediction-box { text-align: center; border: 1px solid var(--ssm-border); padding: 2rem 1rem; background: #f4f9fd; border-radius: 10px }
.pred-title { margin-top: 35px; --tw-text-opacity: 1; color: rgb(15 48 92); font-weight: 600; font-size: 25px; margin-bottom: 25px }
#ssm-grant-portal .pred-stat { font-size: 2.5rem; font-weight: 700; color: var(--ssm-primary); font-family: var(--font-serif); margin: 1rem 0; display: block }
#ssm-grant-portal .pred-meta { font-size: 0.8rem; color: var(--ssm-text-light); border-top: 1px solid var(--ssm-border); padding-top: 1rem; font-style: italic; min-height: 30px; display: flex; align-items: center; justify-content: center; text-align: center }
#ssm-grant-portal .cta-block { background: transparent linear-gradient(145deg, #073288 0%, #002966 100%) 0% 0% no-repeat padding-box; color: white; text-align: center; padding: 4rem 1rem }
#ssm-grant-portal .cta-block h2 { color: white; border-bottom: none }
#ssm-grant-portal .cta-block h2::after { display: none }
#ssm-grant-portal .cta-block p { color: rgba(255, 255, 255, 0.8); max-width: 600px; margin: 0 auto }
#ssm-grant-portal .cta-block .licence-text { margin-top: 3rem; font-size: 0.8rem; opacity: 0.6; margin-bottom: 0 }
#ssm-grant-portal .button-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; flex-direction: column; width: fit-content; margin: 0 auto }
#ssm-grant-portal .btn { padding: 1rem 4rem; text-decoration: none; font-weight: 500; transition: all 0.3s; border-radius: 30px; border: 2px solid transparent }
#ssm-grant-portal .btn-gold { margin-top: 3rem; background-color: white; color: var(--ssm-primary) }
#ssm-grant-portal .btn-gold:hover { background-color: #cde0fb; color: var(--ssm-primary) }
#ssm-grant-portal .btn-outline { border: 2px solid white; color: white }
#ssm-grant-portal .btn-link { margin-top: 25px !important; margin-bottom: 0 !important }
#ssm-grant-portal .btn-outline:hover { background-color: white; color: var(--ssm-primary) }
@media (min-width:768px) {
#ssm-grant-portal .three-col-grid { grid-template-columns: repeat(3, 1fr) }
#ssm-grant-portal .split-layout { grid-template-columns: 1fr 1fr }
#ssm-grant-portal .track-item { grid-template-columns: 200px 1fr; align-items: start }
}
.ssm-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 48, 92, 0.6); backdrop-filter: blur(1px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease }
.ssm-modal-box { background: white; width: 100%; max-width: 700px; padding: 1rem 0 2rem 1.8rem; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; transform: translateY(20px); transition: transform 0.3s ease; margin: 17px }
.ssm-modal-box .ssm-modal-box-container { padding-right: 2rem; padding-bottom: 0.5rem; margin-right: 5px }
.ssm-modal-overlay.active { display: flex; opacity: 1 }
.ssm-modal-overlay.active .ssm-modal-box { transform: translateY(0) }
.ssm-modal-header h3 { font-size: 1.5rem !important; color: var(--ssm-text-main) !important }
.ssm-modal-header p { color: var(--ssm-text-light) !important; font-size: 0.9rem !important; margin-bottom: 2rem !important; margin-top: 10px }
.ssm-modal-close { position: absolute; top: 0.7rem; right: 1.5rem; background: none; border: none; font-size: 30px; opacity: 0.7; color: var(--ssm-text-light); cursor: pointer; padding: 0; line-height: 1 }
.ssm-modal-close:hover { opacity: 1; color: var(--ssm-primary) }
.ssm-modal-form .form-group { margin-bottom: 1.25rem }
.ssm-modal-form label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--ssm-text-light); text-transform: capitalize; letter-spacing: 0.05em; margin-bottom: 0.5rem }
.ssm-modal-form input, .ssm-modal-form select, .ssm-modal-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--ssm-border); border-radius: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--ssm-text-main); background-color: white; transition: border-color 0.2s }
.ssm-modal-form input::placeholder { color: #aaaaaa }
.ssm-modal-form select { cursor: pointer; padding-right: 40px }
.ssm-modal-form textarea::placeholder { color: #aaaaaa }
.ssm-modal-form select::placeholder { color: #aaaaaa }
.ssm-modal-form select { height: 49px }
.ssm-modal-form input:focus, .ssm-modal-form select:focus, .ssm-modal-form textarea:focus { outline: none; border-color: var(--ssm-accent); box-shadow: 0 0 0 3px rgba(55, 128, 212, 0.1) }
.ssm-modal-form .form-row { display: grid; grid-template-columns: 1fr; gap: 0 }
.ssm-submit-btn { width: 100%; padding: 1rem; background-color: var(--ssm-primary); color: white; border: none; border-radius: 8px; font-weight: 500; font-size: 1rem; cursor: pointer; margin-top: 1rem; transition: background-color 0.2s }
.ssm-submit-btn:hover { background-color: #071a34 }
.key-predictions { padding-bottom: 6.5rem !important }
.sponsoring-research { padding: 5rem 0 !important }
.eligible-resources { padding: 5rem 0 !important }
.proposal-request { padding: 5rem 0 !important }
.prediction-box .before-topic-list-body-description { display: inline-block }
#ssm-grant-portal .prediction-box { padding: 2.5rem 3rem }
a.ssm-logo { display: flex; align-content: center; width: 300px; margin: 0px auto; text-indent: -30000000000px }
@media screen and (max-width:1024px) {
#ssm-grant-portal .ssm-container { padding: 0 32px }
#ssm-grant-portal section, .sponsoring-research, .eligible-resources, .proposal-request, .key-predictions { padding-top: 3rem !important; padding-bottom: 3rem !important }
#ssm-grant-portal .three-col-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem }
#ssm-grant-portal .split-layout { gap: 2.5rem }
}
@media screen and (max-width:768px) {
#ssm-grant-portal .ssm-container { padding: 0 20px }
#ssm-grant-portal section, .sponsoring-research, .eligible-resources, .proposal-request, .key-predictions { padding-top: 2rem !important; padding-bottom: 2rem !important }
#ssm-grant-portal h2 { font-size: 1.75rem; line-height: 1.3; margin-bottom: 1.5rem }
#ssm-grant-portal h3 { font-size: 1.3rem }
#ssm-grant-portal .three-col-grid, #ssm-grant-portal .split-layout { grid-template-columns: 1fr; gap: 2rem }
#ssm-grant-portal .track-item { display: flex; flex-direction: column; padding: 1.5rem }
#ssm-grant-portal .prediction-box { padding: 1.5rem }
.pred-title { font-size: 1.25rem; margin-top: 15px }
.prediction-box .before-topic-list-body-description { min-height: auto; margin-bottom: 1rem }
.ssm-modal-box { margin: 10px; width: calc(100% - 20px); max-height: 90vh; overflow-y: auto; padding: 1.5rem 0 1.5rem 1.5rem }
.ssm-modal-box .ssm-modal-box-container { padding-right: 1.5rem; padding-bottom: 1.5rem; max-height: calc(100vh - 150px) }
.ssm-modal-close { top: 1.3rem; right: 1rem }
#ssm-grant-portal .cta-block { padding: 3rem 1rem }
#ssm-grant-portal .btn { width: 100%; padding: 0.5rem 1rem }
}
@media screen and (max-width:780px) {
.secondary_navbar .btn-links { display: none }
#ssm-grant-portal h3 { width: calc(100% - 40px) }
}
@media screen and (max-width:400px) {
.ssm-modal-close { top: 2rem; right: 1.5rem }
}
@media screen and (max-height:850px) {
.ssm-modal-box { height: auto; height: calc(100vh - 40px); overflow-y: hidden }
.ssm-modal-box-container { height: auto; max-height: calc(100vh - 130px); overflow-y: auto }
}
@media (min-width:600px) {
.ssm-modal-form .form-row { grid-template-columns: 1fr 1fr; gap: 20px }
}
.secondary_navbar .cta-btn.header-cta-btn { display: none; padding: 0.2rem; font-size: 14px; font-weight: 400; padding: 6px 15px }
.secondary_navbar .btn-links { font-size: 16px; color: #005d9b; font-weight: 500 }
.secondary_navbar .btn-links:hover { color: #007ccd }
.ssm-submit-btn-loader, .ssm-submit-btn-loader:hover { width: 100%; padding: 1rem; background-color: var(--ssm-primary); color: white; border: none; border-radius: 8px; font-weight: 500; font-size: 1rem; cursor: pointer; margin-top: 1rem; transition: background-color 0.2s; background-image: url(https://static.idriveonlinebackup.com/include/images/submit_loader.gif); background-repeat: no-repeat; text-indent: -30000000px; background-position: center; cursor: no-drop }
.ssm-modal-overlay .succ_msg { border: 1px solid #e7dfce; clear: both; color: #4a4a4a; display: none; font-size: 14px; line-height: 28px; text-align: left; margin: 20px 0; padding: 20px 10px 20px 70px; width: calc(100% - 75px); float: left; box-sizing: border-box; background: #fafaee url(https://static.idriveonlinebackup.com/source/images/sucsess_tickmark_new.svg) 10px center no-repeat; position: absolute; top: 10px }
.ssm-modal-overlay .succ_msg p { padding: 0px !important; font-size: 14px !important; margin: 0px !important }
.ssm-modal-overlay .err_msg { clear: both; color: #4a4a4a; display: none; font-size: 14px; line-height: 28px; text-align: left; margin: 20px 0; padding: 20px 10px 20px 30px; width: calc(100% - 75px); float: left; box-sizing: border-box; position: absolute; top: 10px; background-color: #fde4ea; border: 1px solid #edc4cc }
.ssm-modal-overlay .err_msg p { padding: 0px !important; font-size: 14px !important; margin: 0px !important }
.ssm-modal-box .alert { display: flex; align-items: center; padding: 12px 20px; border-radius: 8px; margin: 10px 0 auto; margin-bottom: 30px; width: 100%; font-family: sans-serif; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border: 1px solid transparent }
.ssm-modal-box #proposal_abstract { resize: none !important }
.ssm-modal-box .alert.hidden { display: none }
.ssm-modal-box .alert p { margin: 0; padding: 0 }
.ssm-modal-box .icon { margin-right: 12px; font-weight: bold; font-size: 18px }
.ssm-modal-box .success-alert { background-color: #f0f7ff; color: #112d4e; border-color: #d0e3ff }
.ssm-modal-box .success-alert .icon { color: #5da0d7 }
.ssm-modal-box label sup { color: #ff0000 }
.ssm-modal-box .failure-alert { background-color: #fff5f5; color: #912d2d; border-color: #ffdada }
.ssm-modal-box .failure-alert .icon { color: #d75d5d }
.message-container .message-text { margin-bottom: 0 !important }
.message-container .alert { display: flex; align-items: center; padding: 12px 20px; border-radius: 8px; margin: 10px 0 auto; margin-bottom: 30px; width: 100%; font-family: sans-serif; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border: 1px solid transparent }
.message-container .alert.hidden { display: none }
.message-container .alert p { margin: 0; padding: 0; width: calc(100% - 30px) }
.message-container .icon { margin-right: 12px; font-weight: bold; font-size: 18px }
.message-container .success-alert { background-color: #fffbf0; color: #000000; border-color: #d3bb6f }
.message-container .success-alert .icon { color: #ffffff; border-radius: 50%; border: 1px solid #005eff; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; background-color: #005eff }
.message-container .failure-alert { background-color: #fff5f5; color: #912d2d; border-color: #ffdada }
.message-container .failure-alert .icon { color: #d75d5d }
.message-container .message-text { margin-bottom: 0 !important }
.message-container { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 9999 }
.error-message { color: #d9534f; font-size: 12px; margin-top: 2px }
#captcha_err { display: none; color: #d9534f; font-size: 12px }
@media screen and (max-width:767px) {
.message-container { width: calc(100% - 20px) }
}
.tooltip { position: relative; cursor: pointer }
.tooltip::before { content: attr(data-tooltip); position: absolute; width: max-content; max-width: 340px; white-space: normal; line-height: 1.4; font-weight: 400; padding: 12px 12px; background: rgba(0, 0, 0, 0.815); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #ffffff; border-radius: 6px; font-size: 14px; text-align: left; visibility: hidden; opacity: 0; transform: scale(0.85); z-index: 27; pointer-events: none }
.tooltip::after { content: ""; position: absolute; border: 5px solid transparent; visibility: hidden; opacity: 0; transform: scale(0.85); z-index: 10 }
.tooltip:hover::before, .tooltip:hover::after { visibility: visible; opacity: 1; transform: scale(1) }
.tooltip[data-position="top"]::before { bottom: 100%; left: 50%; transform: translate(-50%, -8px) scale(0.85) }
.tooltip[data-position="top"]::after { bottom: 100%; left: 50%; transform: translateX(-50%) scale(0.85); border-top-color: rgba(0, 0, 0, 0.815) }
.tooltip[data-position="bottom"]::before { top: 100%; left: 50%; transform: translate(-50%, 8px) scale(0.85) }
.tooltip[data-position="bottom"]::after { top: 100%; left: 50%; transform: translateX(-50%) scale(0.85); border-bottom-color: rgba(0, 0, 0, 0.815) }
.tooltip[data-position="left"]::before { right: 100%; top: 50%; transform: translate(-8px, -50%) scale(0.85) }
.tooltip[data-position="left"]::after { right: 100%; top: 50%; transform: translateY(-50%) scale(0.85); border-left-color: rgba(0, 0, 0, 0.815) }
.tooltip[data-position="right"]::before { left: 100%; top: 50%; transform: translate(8px, -50%) scale(0.85) }
.tooltip[data-position="right"]::after { left: 100%; top: 50%; transform: translateY(-50%) scale(0.85); border-right-color: rgba(0, 0, 0, 0.815) }
.tooltip[data-position="top"]::before, .tooltip[data-position="top"]::after { transform-origin: bottom center }
.tooltip[data-position="bottom"]::before, .tooltip[data-position="bottom"]::after { transform-origin: top center }
.tooltip[data-position="left"]::before, .tooltip[data-position="left"]::after { transform-origin: center right }
.tooltip[data-position="right"]::before, .tooltip[data-position="right"]::after { transform-origin: center left }
@media screen and (max-width:1550px) {
.paper-button-container { flex-direction: column }
.research-container .zenodo-link-btn { width: 100% }
}
@media screen and (max-width:1350px) {
.research-container .paper-content { width: 100% }
.paper-button-container { flex-direction: row }
}
@media screen and (max-width:1100px) {
.research-container .paper-content { width: 100% }
.research-container .paper-content { padding: 20px 20px 10px; margin: 0 }
}
@media screen and (max-width:810px) {
.research-container .paper-actions { width: 100%; flex-direction: column; margin-top: 5px }
.research-container .paper-actions .paper-actions-btn-group { flex-direction: row; width: 100% }
.research-container .zenodo-link-btn { width: 100% }
.paper-dependency { text-align: center }
}
@media (max-width:650px) {
.research-container .paper-actions { flex-direction: column }
.paper-actions-btn-group { flex-direction: column !important }
.paper-button-container { flex-direction: column; width: 100% }
.research-container .paper-actions .html-link-btn { width: 100% }
.research-container .paper-actions .download-btn { width: 100% }
.research-container .paper-actions .zenodo-link-btn { width: 100% }
}
.paper-card { transition: opacity 0.3s ease }
.search-section { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 20px }
.search-wrapper { position: relative; display: flex; align-items: center; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0 15px; width: 100%; max-width: 384px; transition: border-color 0.2s, box-shadow 0.2s }
.search-wrapper:focus-within { border-color: #394d61 }
.clear-btn { position: absolute; right: 15px; background: none; border: none; font-size: 26px; cursor: pointer; color: #999999; display: none; align-items: center; justify-content: center; line-height: 1; padding: 0 }
.clear-btn:hover { color: #333 }
.desc-badge { background-color: #e0e7ff; color: #1e40af; font-size: 0.75rem; font-weight: 600; padding: 5px 15px; border-radius: 12px; margin-left: 10px; white-space: nowrap }
.vr { width: 1px; background-color: #d6d6d6; height: 20px; margin: 0 5px }
.search-icon { background: url('../images/search.svg'); background-size: contain; background-repeat: no-repeat; width: 20px; height: 22px; margin-right: 12px; flex-shrink: 0 }
#paperSearch { width: 100%; padding: 8px 23px 8px 0; border: none; outline: none; font-size: 14px; color: #292929; background: transparent }
.btn-clear-search { padding: 12px 28px; background-color: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); margin-top: 20px }
.btn-clear-search:hover { background-color: #0056b3 }
.btn-clear-search:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) }
.no-results-container { display: none; text-align: center; min-height: 400px; border-radius: 12px; margin: 20px 0; justify-content: center; align-items: center; flex-direction: column; background-color: #f2f7ff }
.no-results-title { margin-bottom: 10px; font-weight: 500 }
.no-results-text { color: #555555; font-size: 1rem }
@media (max-width:930px) {
.paper-container .row-zenodo { flex-direction: column; align-items: flex-start; height: unset; gap: 10px; padding: 10px 20px }
.paper-dependency { padding: 0 }
}
@media (max-width:768px) {
.section-title-container { flex-direction: column; align-items: center; text-align: center; width: 100% }
.research-container .paper-content { padding: 10px 20px }
.search-section { flex-direction: column; align-items: flex-start }
.search-wrapper { max-width: 100% }
.no-results-title { font-size: 1.25rem }
.paper-container .row-zenodo { padding: 15px 20px; height: unset !important; text-align: center; gap: 15px; flex-direction: column; align-items: flex-start }
.row-zenodo .paper-dependency { padding: 0 }
}
mark.search-highlight { background-color: rgba(255, 221, 0, 0.637); color: #000000; border-radius: 3px }
@media (max-width:480px) {
.no-results-container { padding: 30px 15px; margin: 10px 0 }
.paper-container .row-zenodo { align-items: center }
.btn-clear-search { width: 100%; padding: 14px; justify-content: center }
}
@media (max-width:1024px) {
.section-title-container { width: 100% }
.paper-container .row-content { flex-direction: column; align-items: center }
.research-container .paper-actions { width: 100% }
.paper-button-container { width: 100% }
.paper-content { margin: 0 !important; padding: 20px 20px; width: 100% }
.search-wrapper { max-width: 100% }
}
@media (min-width:1600px) {
.research-container .paper-content { min-width: 60% }
}
/* Container for buttons */
.wrapper-filter { display: flex; align-items: center; width: 100%; justify-content: flex-end; gap: 10px; }
.filter-container { display: flex; align-items: center; gap: 4px; }
.filter-label-container { display: flex; align-items: center; gap: 4px; margin-right: 10px; }
.filter-label { font-size: 14px; font-weight: 500; color: #757575; }
.filter-btn { padding: 7px 10px; min-width: 70px; cursor: pointer; border: 1px solid #e3e9ef; background: #e3e9ef; border-radius: 6px; font-size: 13px; }
.filter-btn:hover { background-color: #cfd8e2; }
.filter-btn.active { background-color: #0071bc; color: white; border-color: #0071bc; }
/* Logic for hiding cards */
.hidden { display: none !important; }
@media (max-width:1140px) {
.search-section {         /* flex-direction: column; */
align-items: flex-end; }
.wrapper-filter { justify-content: space-between; margin-top: 10px; }
.vr { display: none; }
.search-wrapper { max-width: 384px; }
}
@media (max-width:850px) {
.wrapper-filter { width: 100%; justify-content: flex-start; }
.filter-label-container { display: none; }
.search-wrapper { max-width: 100%; }
}
@media (max-width:750px) {
.wrapper-filter { flex-direction: column-reverse; }
}
.section-header { display: flex; align-items: center;     /* gap: 10px; */ margin-bottom: 30px; margin-top: 30px; }
.section-header h2 { white-space: nowrap; font-size: 16px; font-weight: 500; color: #ffffff; background: #0071bc; padding: 3px 15px; border-radius: 50px; margin: 0; }
.section-header::after { content: ""; left: 0; height: 1px; background: linear-gradient(to right, #0071bc, transparent); flex-grow: 1; }
@media (max-width:575px) {
.research-container .paper-card { position: relative; }
/* span.deprecated-papers {
position: absolute;
top: 10px;
right: 10px;
background-color: rgb(251, 188, 4);
border-radius: 200px;
color: rgb(32, 33, 36);
} */
.row-zenodo .zenodo-container { flex-direction: column; width: 100%; gap: 10px; }
}