/* Site colours */
:root {
    --color-text-light: #ffffff;
    --color-text-dark: #000000;
    --color-one-very-dark: #007bff;
    --color-one-dark: #007bff;
    --color-one-normal: #1f3d7a;
    --color-one-light: #007bff;
    --color-one-very-light: #ebf0fa;
    --color-two-very-dark: #330002;
    --color-two-dark: #6f0003;
    --color-two-normal: #AD0007;
    --color-two-light: #ffe5e5;
    --color-two-very-light: #ffe6e6;
    --color-three-very-dark: #007bff;
    --color-three-dark: #007bff;
    --color-three-normal: #007bff;
    --color-three-light: #007bff;
    --color-three-very-light: #007bff;
}

html {height: auto;}
body, textarea {margin: 0 auto; font-family: Arial; font-size: 16px; background-color: #ffffff; color: #121212;}

#container_fixed {position: relative; max-width: 1200px; border-left: 1px solid #121212; border-right: 1px solid #121212; min-height: 98vh; height: 98vh; overflow: hidden; box-sizing: border-box; margin: 0 auto; padding: 10px 30px 30px 30px; text-align: left;}
#container_scroll {display: grid; gap: 0px; max-width: 1200px; min-height: 100vh; position: relative; border-left: 1px solid #121212; border-right: 1px solid #121212; height: auto; overflow: hidden; box-sizing: border-box; margin: 0 auto; padding: 10px 30px 30px 30px; text-align: left; grid-template-rows: max-content max-content max-content;}

#header {width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px;}
.site-name {font-size: 24px; font-family: "Roboto"; font-weight: bold; color: var(--color-two-dark);}
#header a {color: #666666; text-decoration: none; padding-right: 10px;}

#main{width: 100%;}

.mobile-element {display: none;}
.desktop-element {display: inline;}
.d-flex-align-between {display: flex; justify-content: space-between;}

.flex-row-flex-start {display: flex; flex-direction: row; align-items: flex-start;}
.flex-column-flex-start {display: flex; flex-direction: column; align-items: flex-start;}

.splash-colour-one-text {color: var(--color-one-normal);}
.splash-colour-two-text {color: var(--color-two-normal);}
.splash-colour-three-text {color: var(--color-three-normal);}
.splash-colour-one-background {background-color: var(--color-one-normal);}
.splash-colour-two-background {background-color: var(--color-two-normal);}
.splash-colour-three-background {background-color: var(--color-three-normal);}


.splash-block-header {font-size: 40px; font-family: "Roboto"; font-weight: 900; line-height: 40px; text-align: center;}
.splash-block-signup-header {font-size: 24px; font-family: "Roboto"; font-weight: 900; line-height: 24px; text-align: center;}
.splash-block-intro {font-size: 20px; text-align: center;}
.splash-block-trusted {font-size: 16px; text-align: center; color: #666; margin-bottom: 16px;}
.splash-block-choices {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin: 20px 0;}
.splash-block-input {padding: 10px 20px; border-radius: 5px; color: #ffffff; text-decoration: none;}

.splash-block-button {padding: 10px 20px; border-radius: 5px; text-decoration: none; min-width: 15%; text-align: center;}
.splash-block-button-one {background-color: var(--color-one-normal); color: var(--color-text-light);}
.splash-block-button-one:hover {background-color: var(--color-one-dark); color: var(--color-text-light);}
.splash-block-button-two {background-color: var(--color-two-normal); color: var(--color-text-light);}
.splash-block-button-two:hover {background-color: var(--color-two-dark); color: var(--color-text-light);}
.splash-block-button-three {background-color: var(--color-three-normal); color: var(--color-text-light);}
.splash-block-button-three:hover {background-color: var(--color-three-dark); color: var(--color-text-light);}

.splash-block-hero {display: flex; flex-direction: column; align-items: center; gap: 8px; background-color: var(--color-one-very-light); padding: 20px;}
.splash-block-hero-header {font-size: 24px; font-family: "Roboto"; font-weight: 700; line-height: 24px; text-align: center; margin: 8px 0 0 0;}
.splash-block-hero-intro {font-size: 16px; text-align: center;}
.splash-block-hero-image {max-width: 100%; border-radius: 10px;}
.splash-block-signup {display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid var(--color-one-normal); margin-top: 24px; padding: 16px;}








.index-list {display: flex; flex-direction: column; gap: 8px;}
.index-list-item-level-1 { margin-left: 0; }
.index-list-item-level-2 { margin-left: 64px;}
.index-list-item-level-3 { margin-left: 128px;}
.index-list-item-level-4 { margin-left: 192px; }
.index-list-item {display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid #ddd; border-radius: 5px;}
.index-list-item-info {flex-grow: 1; max-width: 80%;}
.index-list-item-title {font-weight: bold; font-size: 16px;}
.index-list-item-title a {color: #333; text-decoration: none;}
.index-list-item-title a:hover {text-decoration: underline;}
.index-list-item-lede {color: #666; font-size: 0.9em; margin-top: 8px; margin-bottom: 4px;}
.index-list-item-ticker {color: #666; font-size: 0.9em; margin-bottom: 4px;}
.index-list-item-meta {display: flex; justify-content: flex-start; font-size: 0.8em; color: #777777;}


#nav {display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 0 0px; background: #ffffff; color: var(--color-two-dark); margin-top: 10px;}
.hamburger {display: block; padding: 0px; font-size: 48px; background: #ffffff; border: none; color: var(--color-two-normal); cursor: pointer;}
.hamburger:hover {display: block; padding: 0px; font-size: 48px; background: #ffffff; border: none; color: var(--color-two-dark); cursor: pointer;}
#nav .menu {
    display: none;
    flex-direction: column;
    width: 200px;
    position: absolute;
    top: 0px;
    right: 0;
    background: #ffffff;
    color: var(--color-two-dark);
    padding: 0px 20px;
}
#nav .menu.active {display: flex; margin-right: 5px; margin-top: 80px; text-align: right; border-left: 1px solid #ccc; height: -webkit-fill-available; z-index: 1;}
#nav a {color: #000000; text-decoration: none; padding: 10px;}
#nav a:hover {background-color: var(--color-two-very-light); color: #000000;}

#nav-categories {display: flex; align-items: center; padding: 5px 5px; background-color:#1f3d7a; color: #ffffff; gap: 10px; font-size: 16px; font-weight: bold; width: 100%; box-sizing: border-box;}
#nav-categories a {color: #ffffff; text-decoration: none; padding: 2px 4px;}
#nav-categories a:hover {background-color: #ebf0fa; color: #1f3d7a;}
#nav-categories a.current-page {background-color: #ebf0fa; color: var(--color-two-dark);}
.nav-tagline {font-size: 14px; font-weight: bold; color: #000000; margin-top: -20px; margin-bottom: 10px;}

#navbar-one {margin-top: 0px;}
.navbar-one {display: flex; align-items: center; background-color: #1f3d7a; overflow: hidden; padding: 0px 8px; gap: 10px;}
.navbar-one a {margin-right: 8px; color: #ffffff; text-decoration: none; padding: 4px 4px 2px 4px; text-wrap: nowrap; font-weight: bold;}
.navbar-one a:hover {background-color: #ebf0fa; color: #1f3d7a; text-wrap: nowrap; font-weight: bold;}
.navbar-one a.current-page {background-color: #ebf0fa; color: var(--color-two-dark); text-wrap: nowrap; font-weight: bold;}
.navbar-one-arrow {background-color: #003366; color: white; border: none; cursor: pointer;}
.navbar-one-arrow:hover {background-color: #0055a5;}
.navbar-one-arrow-left {padding: 2px 0px 2px 8px;}
.navbar-one-arrow-right {padding: 2px 8px 2px 0px;}
.navbar-one-container {overflow: hidden; flex-grow: 1;}
.navbar-one-items {display: flex; transition: transform 0.3s ease; padding: 10px 0; scrollbar-width: none;}
.navbar-one-items::-webkit-scrollbar {display: none;}
.navbar-one-item {display: inline-block; padding: 10px 15px; color: white; text-decoration: none; white-space: nowrap;}
.navbar-one-item:hover {background-color: #0055a5;}


#navbar-two {margin-top: -8px;}
.navbar-two {display: flex; align-items: center; background-color: #d6e0f5; overflow: hidden; padding: 0px 8px; gap: 10px;}
.navbar-two a {margin-right: 8px; color: #1f3d7a; text-decoration: none; padding: 4px 4px 2px 4px; text-wrap: nowrap; font-weight: bold;}
.navbar-two a:hover {background-color: #ebf0fa; color: #ffffff; text-wrap: nowrap; font-weight: bold;}
.navbar-two a.current-page {background-color: #ebf0fa; color: var(--color-two-dark); text-wrap: nowrap; font-weight: bold;}
.navbar-two-arrow {background-color: #003366; color: white; border: none; cursor: pointer;}
.navbar-two-arrow:hover {background-color: #0055a5;}
.navbar-two-arrow-left {padding: 2px 0px 2px 8px;}
.navbar-two-arrow-right {padding: 2px 8px 2px 0px;}
.navbar-two-container {overflow: hidden; flex-grow: 1;}
.navbar-two-items {display: flex; transition: transform 0.3s ease; padding: 10px 0; scrollbar-width: none;}
.navbar-two-items::-webkit-scrollbar {display: none;}
.navbar-two-item {display: inline-block; padding: 10px 15px; color: #1f3d7a; text-decoration: none; white-space: nowrap;}
.navbar-two-item:hover {background-color: #0055a5;}
.navbar-two-readcrumb-separator {color: #1f3d7a; margin-top: 4px; margin-right: 10px; font-weight: bold;}
  

.left-ellipsis {margin-left: -8px; padding-right: 2px; font-size: 16px; color: white; display: none;}
.right-ellipsis {margin-right: -8px; padding-left: 2px; font-size: 16px; color: white; display: none;}

.search-bar {display: block; align-items: center; max-width: 100%;}
.search-bar-input {width: 100%; max-width: 100%; padding: 10px; margin-top: 10px; box-sizing: border-box;}

h1, h2, h3, h4, h5, h6, .admin-title {font-family: 'Roboto'; font-weight: 900; color: #243953;}
h1, .admin-title {font-size: 30px;}
h2 {font-size: 24px; margin: 20px 0 5px 0;}
h3 {font-size: 22px; margin: 20px 0 5px 0;}
h4 {font-size: 18px; margin: 20px 0 5px 0;}
h5 {font-size: 16px; margin: 20px 0 5px 0;}
h6 {font-size: 14px; margin: 20px 0 5px 0;}

a, .item-title {color: var(--color-one-normal);}
a:hover, .item-title:hover {color: var(--color-two-normal);}

hr {width: 100%; border: 1px solid #000000}
p {margin:0; margin-bottom: 15px}
ol {margin: 0px 20px 0px 0px;}
ul {margin: 0px 20px 0px 10px;}
ul li {margin-left: 0; margin-top: 5px;}
img {max-width: 100%; margin-top: 10px; margin-bottom: 10px;}
#header img {max-width: 100%; margin: 0 auto;}

button {background-color: var(--color-two-normal); color: white; padding: 10px; margin: 0 auto; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}
button:hover {background-color: var(--color-two-dark);}
button:disabled {background-color: #cccccc; color: #888888; cursor: not-allowed;}


.admin-button-red {background-color: darkred; color: white;}
.admin-button-red:hover {background-color: red; color: white;}

.button-green {background-color: darkgreen; color: white; padding: 10px 15px; margin: 0 auto; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}
.button-green:hover {background-color: green; color: white; padding: 10px 15px; margin: 0 auto; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}

.admin-button {padding: 10px 15px; margin: 0 auto; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}
.admin-button:hover {padding: 10px 15px; margin: 0 auto; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}
.generate-button {margin: 10px 0;}

.newsfeed-section-title {margin-top: 10px;}
.newsfeed-list-item-test {display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid #e1e1e1; gap: 10px; flex-wrap:wrap;}
.newsfeed-list-source-desktop-test {flex-grow: 0; flex-shrink: 0; width: 13ch; overflow: hidden; text-overflow:clip; white-space: nowrap; text-align: left; text-transform: uppercase;}
.newsfeed-list-middle-test {
    max-width: 80%;
    display: flex; justify-content: flex-start; gap: 10px; align-items:start; 
    flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.newsfeed-list-title-test {flex-grow: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;}
/* .newsfeed-list-lede-test {flex-grow: 1; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} */
.newsfeed-list-date-test {flex-grow: 0; flex-shrink: 0; min-width: 10ch; white-space: nowrap; text-align: right;}

/* Newsfeed lists, article lists, RSS lists */
#newsfeed-main-container {display: grid; margin-top: 0px;}
.newsfeed-view-switcher {width: 100%; margin-bottom: 20px; text-align: right;}





.newsfeed-list-container {display: block; gap: 5px; padding: 0; margin: 0; box-sizing: border-box;}
.newsfeed-list-view .newsfeed-list-container {display: block;}
.newsfeed-list-view .newsfeed-card-container {display: none;}
.newsfeed-list-item {display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid #e1e1e1; gap: 10px; flex-wrap:nowrap;}
.newsfeed-list-source-desktop {flex-grow: 0; flex-shrink: 0; width: 13ch; overflow: hidden; text-overflow:clip; white-space: nowrap; text-align: left; text-transform: uppercase;}
.newsfeed-list-source-mobile {display: none;}
.newsfeed-list-middle {
    max-width: 100%; display: flex; justify-content: flex-start; gap: 10px; align-items:start; 
    flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.newsfeed-list-title {flex-grow: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; max-width: 100%; min-width: 0;}
.newsfeed-list-lede {flex-grow: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: break-spaces;}
.newsfeed-list-date {flex-grow: 0; flex-shrink: 0; min-width: 10ch; white-space: nowrap; text-align: right;}
.newsfeed-list-analyse {flex-grow: 0; flex-shrink: 0; width: auto; white-space: nowrap; text-align: right; background-color: var(--color-two-very-light); color: var(--color-two-normal); font-weight: bold; padding: 0px 1px;}
.newsfeed-list-analyse:hover {flex-grow: 0; flex-shrink: 0; width: auto; white-space: nowrap; text-align: right; background-color: var(--color-two-normal); color: var(--color-two-very-light); font-weight: bold; padding: 0px 1px;}
.newsfeed-list-analyse-plus {flex-grow: 0; flex-shrink: 0; width: 2ch; white-space: nowrap; text-align: right; background-color: var(--color-two-very-light); color: var(--color-two-normal); font-weight: bold; padding: 2px 5px;}
.newsfeed-list-analyse-box-tag {font-weight: bold; color: var(--color-two-normal); text-transform: uppercase;}
.newsfeed-list-analyse-box-headline {font-weight: bold; color: var(--color-one-normal)}
.newsfeed-list-analyse-box-result {margin-top: 30px; max-height: 500px; overflow-y: auto; padding: 2px;}
.newsfeed-list-analyse-box-more {margin-top: 30px; display: flex; justify-content: space-between; flex-direction: row; align-items: center; text-align: right;}
.newsfeed-list-analyse-box-more-link {background-color: var(--color-two-very-light); color: var(--color-two-normal); font-weight: bold; padding: 5px;}
.newsfeed-list-analyse-box-more-link:hover {color: var(--color-two-very-light); background-color: var(--color-two-normal); font-weight: bold; padding: 5px;}
.newsfeed-list-analyse-box-more-left {font-size: 12px; text-decoration: none;}

.newsfeed-card-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 16px;}
.newsfeed-card-view .newsfeed-card-container {display: grid;}
.newsfeed-card-view .newsfeed-list-container {display: none;}
.newsfeed-card-item {background: #ffffff;  overflow: hidden; position: relative; transition: all 0.3s ease;}
.newsfeed-card-image {background-size: cover; background-position: center; height: 200px;}
.newsfeed-card-text {position: absolute; bottom: 0; left: 0; width: 100%; padding: 8px; background: rgba(0, 0, 0, 0.5); color: #ffffff; transition: all 0.3s ease;}
.newsfeed-card-title {font-size: 18px; color: #ffffff; margin: 0;}
.newsfeed-card-lede {position: absolute; bottom: 0; left: 0; width: 100%; padding: 8px; background: rgba(0, 0, 0, 0.7); color: #ffffff; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(100%); opacity: 0;}
.newsfeed-card-date {font-size: 14px; color: #cccccc;}
.newsfeed-card-link-overlay {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}
.newsfeed-card-item:hover .newsfeed-card-title, .newsfeed-card-item:hover .newsfeed-card-date {transform: translateY(-100%); opacity: 0; visibility: hidden;}
.newsfeed-card-item:hover .newsfeed-card-lede {transform: translateY(0); display: block; opacity: 1; visibility: visible;}
.newsfeed-card-link, .newsfeed-card-title-link, .newsfeed-card-lede-link {text-decoration: none; color: inherit;}
.newsfeed-card-title-link:hover, .newsfeed-card-lede-link:hover {text-decoration: underline;}


/* Articles */
#lede {height: 50px;}
.article_lede_display {font-style: italic; margin-top: 20px; font-size: 16px; line-height: 130%;}
.article_date_display {margin: 10px 0 10px 0; font-size: 12px;}
.article_image_display {margin-top: 10px;}
.article_text_display {margin-top: 10px; font-size: 16px; line-height: 130%;}

.podcast_list_item {margin-bottom: 16px; min-height: 230px; padding: 24px; border: 1px solid #ddd; border-radius: 5px; }
.podcast_list_item_title {font-weight: bold; font-size: 20px; margin-bottom: 16px;}
.podcast_list_item_title a {color: #333; text-decoration: none;}
.podcast_list_item_title a:hover {text-decoration: underline;}
.podcast_list_item_image {width: 300px; height: auto; float: right; margin-left: 32px;}

.podcast_display_top {margin-bottom: 16px; min-height: 300px; padding: 24px; border: 1px solid #ddd; border-radius: 5px; }
.podcast_display_categories {margin-bottom: 16px;}
.podcast_display_description {margin-bottom: 16px; line-height: 130%;}
.podcast_display_date {margin-bottom: 16px;}
.podcast_display_links {}
.podcast_display_links_icon {width: 30px; margin: 0 8px 0 0;}
.podcast_display_image {width: 250px; height: auto; float: right; margin-left: 32px;}
.podcast_display_episode_list {margin-top: 16px; margin-bottom: 16px;}
.podcast_display_episode {display: flex; justify-content: space-between; align-items: center; padding: 24px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 16px;}
.podcast_display_episode_title {font-weight: bold; font-size: 20px; margin-bottom: 16px;}
.podcast_display_episode_title a {color: #333; text-decoration: none;}
.podcast_display_episode_title a:hover {text-decoration: underline;}
.podcast_display_episode_description {margin-bottom: 10px; line-height: 130%;}
.podcast_display_episode_audio {margin: 8px 0 0 0;}

.podcast_episode_date {margin-bottom: 24px;}
.podcast_episode_text {margin-bottom: 24px; line-height: 130%;}
.podcast_episode_audio {margin-bottom: 24px;}
.podcast_episode_podcast_box {margin-bottom: 16px; min-height: 230px; padding: 24px; border: 1px solid #ddd; border-radius: 5px; }
.podcast_episode_podcast_box_title {font-weight: bold; font-size: 20px; margin-bottom: 16px;}
.podcast_episode_podcast_box_title a {color: #333; text-decoration: none;}
.podcast_episode_podcast_box_title a:hover {text-decoration: underline;}
.podcast_episode_podcast_box_description {margin-bottom: 24px; line-height: 130%;}
.podcast_episode_podcast_box_image {width: 200px; height: auto; float: right; margin-left: 32px;}
.podcast_episode_podcast_box_links {margin-bottom: 0px;}
.podcast_episode_podcast_box_links_icon {width: 30px; margin: 0 8px 0 0;}

/* Admin, forms */
#adminlistform {position: relative; height: auto; bottom: 0; left: 0; right: 0; max-width: 100%; margin: 10 auto; padding: 10px;}
.admin-title {width: 100%; padding: 10px 10px; margin-bottom: 10px; box-sizing: border-box;}
.admin-input {width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box;}
.admin-textarea {width: 100%; padding: 20px; margin-bottom: 10px; box-sizing: border-box;}
.admin-list-container {display: grid; gap: 4px; padding: 8px;}
.admin-list-item {width: 100%; display: flex; flex-grow: 1; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px;}
.admin-list-left {display: flex;}
.admin-list-middle {
    display: flex; justify-content: flex-start; gap: 10px; align-items:baseline; 
    flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.admin-list-right {display: flex; align-items: center; gap: 10px;}
.admin-list-children {padding-left: 40px;}

.admin-input-4 {width:4ch; padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-8 {width:8ch; padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-15 {width:16ch; padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-20 {width:20%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-30 {width:30%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-50 {width:50%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-70 {width:70%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-90 {width:90%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-add {width:90%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.admin-input-dropdown {max-width: 12ch; padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}

.admin-button-right-align {width: 100%; margin-bottom: 10px; text-align: right;}
.admin-quick-flex {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.admin-count {margin: 0 1em;}
.admin-select {
    width: 80%; 
    padding: 8px 12px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="rgba(0,0,0,0.6)" d="M7.41 7.84L12 12.42 16.59 7.84 18 9.25l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 12px;
    background-color: white; 
    
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
}

.admin-select:focus {
    outline: none; 
    border-color: #555; 
    box-shadow: 0 0 3px #aaa;
}

.admin-select-dropdown {
    position: relative;
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
    z-index: 1000; /* Ensure it stays above other elements */
}

.admin-delete {margin: 0; padding: 0 5px; background: none; border: none; cursor: pointer; font-size: 29px; background-color: #ffffff; color: #d9534f; text-align: right;}
.admin-delete:hover {margin: 0; padding: 0 5px; background: none; border: none; cursor: pointer; font-size: 29px; background-color: #d9534f; color: #ffffff; text-align: right;}
.admin-delete-big {padding: 0; background: none; border: none; cursor: pointer; font-size: 36px; background-color: #ffffff; color: #d9534f; text-align: right;}
.admin-delete-big:hover {padding: 0; background: none; border: none; cursor: pointer; font-size: 36px; background-color: #d9534f; color: #ffffff; text-align: right;}
.admin-feed-item {display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 5px; border-bottom: 1px solid #e1e1e1;}
.admin-feed-content {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.admin-feed-title {flex-grow: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;margin-right: 16px; font-weight: bold;}
.admin-free-url {flex-grow: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.user-signup {box-sizing: border-box; position: relative; display: grid; max-width: 50%; margin: 0 auto; grid-gap: 16px; padding: 32px; border: 1px solid #f7f7f7; border-radius: 8px; box-shadow: 1px 1px 4px 0px rgba(128, 0, 4, 0.4), inset 0px 0px 0px 0px rgba(128, 0, 4, 0.6);}
.user-signup-message {box-sizing: border-box; display: flex; justify-content: space-between; font-size: 14px; font-weight: bold; color: var(--color-two-dark);}
.user-signup-forgot-password a {color: var(--color-two-dark);}
.user-signup-form {box-sizing: border-box; display: grid; grid-gap: 8px; width: 100%;}
.user-signup-input {box-sizing: border-box; width:100%; height: 48px; padding: 16px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; background-color: #f7f7f7; color: #262626; border-radius: 8px; border: 1px solid #cccccc;}
.user-signup-input-otp-fields {display: flex; justify-content: center; gap: 16px;}
.user-signup-input-otp-box {width: 15%; height: 40px; text-align: center; font-size: 20px; border: 1px solid #ccc; border-radius: 4px; background-color: #f7f7f7; color: #262626;}
.user-signup-button {height: 48px; border-radius: 8px; padding: 8px 48px; font-size: 16px; font-weight: bold; color: var(--color-two-very-light); cursor: pointer; background-image: linear-gradient(to top, var(--color-two-normal), var(--color-two-dark)); box-shadow: 1px 1px 4px 1px rgba(128, 0, 4, 0.6), inset 2px 4px 16px 1px rgba(128, 0, 4, 0.8);}
.user-signup-button:hover {height: 48px; border-radius: 8px; padding: 8px 48px; font-size: 16px; font-weight: bold; color: var(--color-two-very-light); cursor: pointer; background-image: linear-gradient(to top, var(--color-two-normal), var(--color-two-very-dark)); box-shadow: 1px 1px 4px 1px rgba(128, 0, 4, 0.8), inset 2px 4px 16px 1px rgba(128, 0, 4, 0.9);}


.modal {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8);}
.close {color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus {color: black; text-decoration: none; cursor: pointer;}
.modal-content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -60%);

    background-color: #fefefe; margin: auto;
    padding: 30px;
    width: 90%; max-width: 600px; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Chats */
#chat-record {border: 1px solid #ccc; height: auto; box-sizing: border-box; max-width: 100%; margin-top: 20px; margin-bottom: 20px; padding: 10px;}
.chat-form {
    position: absolute; bottom: 0; left: 0; right: 0; height: auto; max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    border-radius: 0; padding: 10px; background-color: var(--color-two-very-light);
}
.chat-dropdown {box-sizing: border-box; flex-grow: 1}
.chat-ask {box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; gap: 5px;}
.chat-askquestion {box-sizing: border-box; flex-grow: 1; flex-shrink: 1; flex-basis: 75%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
.chat-askbutton {box-sizing: border-box; flex-grow: 0; flex-shrink: 0; flex-basis: 20%;}

#conversation {box-sizing: border-box; height: calc(70vh - 200px); overflow-y: auto; max-width: 100%; margin-top: 20px; margin-bottom: 20px; padding: 5px;}
.chat-question {box-sizing: border-box; background-color: var(--color-two-very-light); border-bottom: 1px solid var(--color-two-dark); padding: 10px; margin-bottom: 2px; border-radius: 2px; text-align: left;}
.chat-question p {margin-bottom: 0px;}
.chat-answer {box-sizing: border-box; background-color: #ffffff; border-top: 1px solid #F18F12; padding: 10px; margin-bottom: 5px; border-radius: 2px; text-align: left;}

.prompt-container {flex-basis: 100%; max-width: 50%; max-height: 250px; overflow-x: hidden; margin-right: 10px;}
.generate-thinking {margin-bottom: 10px;}
.image-container {flex-grow: 1; max-width: 50%;}
  




.margin-bottom-10 {margin-bottom: 10px;}
.margin-bottom-20 {margin-bottom: 20px;}
.margin-bottom-30 {margin-bottom: 30px;}
.margin-bottom-40 {margin-bottom: 40px;}




/* Flash messages to user */
.flash {padding: 2px 5px; margin-bottom: 0; border: 1px solid transparent; border-radius: 2px;}
.flash.success {color: #155724; background-color: #d4edda; border-color: #c3e6cb;}
.flash.error {color: #721c24; background-color: #f8d7da; border-color: #f5c6cb;}

/* highlight.js code styles */
pre {background-color: #121212; padding: 5px; overflow-x: auto;}
pre code {background-color: #121212; padding: 5px; font-family: 'Courier New', Courier, monospace; border: none;}
code {background-color: #e6e6e6; color: #017f6a; padding: 1px 5px;}
pre .hljs {display: block; overflow-x: auto; padding: 0.5em; background: #000; color: #ffffff;}
pre .hljs-attr {color: #ffffff;}
pre .hljs-attribute {color: #007adf;}
pre .hljs-bullet {color: #d36600;}
pre .hljs-comment { color: #40c900; }
pre .hljs-keyword { color: #c42c2c; }
pre .hljs-name {color: #ffffff;}
pre .hljs-number { color: #c42c2c; }
pre .hljs-selector-class { color: #c42c2c; }
pre .hljs-string { color: #d36600; }
pre .hljs-subst {color: #ffffff;}
pre .hljs-symbol {color: #ffffff;}
pre .hljs-tag {color: #ffffff;}
pre .hljs-tag .hljs-name {color: #ffffff;}
pre .hljs-tag .hljs-attr {color: rgb(0, 183, 255);}

form {max-width: 100%; margin: 0px auto; margin-block-end: 0; border-radius: 8px;}
label {display: block; margin-bottom: 5px; font-weight: bold;}
textarea {width: 95%; height: 400px; max-height: 800px; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; resize: vertical;}
select {
    width: 100%; 
    padding: 8px 12px; margin-bottom: 3px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="rgba(0,0,0,0.6)" d="M7.41 7.84L12 12.42 16.59 7.84 18 9.25l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 12px;
    background-color: white; 
    
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
}
select:hover {border-color: #888;}
select:focus {outline: none; border-color: #555; box-shadow: 0 0 3px #aaa;}

footer {position: absolute; bottom: 0; margin: 0 auto; width: 100%; text-align: center; padding: 0; background-color: #000;color: #fff;}


/* Waiting spinner thing... */
.spinner {
    display: inline-block; width: 16px; height: 16px; margin-right: 5px; 
    border: 2px solid #f3f3f3; border-top-color: #3498db; border-radius: 50%;
    animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Responsive adjustments */
@media (max-width: 600px) {
    .mobile-element {display:inline;}
    .desktop-element {display: none;}

    #container_fixed {padding: 10px 10px 10px 10px;}
    #container_scroll {padding: 10px 15px 15px 15px;}
    
    .nav-tagline {font-size: 12px;}

    h1 {font-size: 24px;}

    .splash-block-intro {font-size: 20px; text-align: justify; line-height: 120%;}
    .splash-block-trusted {font-size: 16px; text-align: justify; color: #666; line-height: 120%; margin-bottom: 16px}

    .prompt-container, .image-container {flex-basis: 100%; max-width: 100%;}
    #conversation {height: calc(70vh - 200px); box-sizing: border-box; overflow-y: auto; max-width: 100%; margin-top: 20px; margin-bottom: 20px; padding: 10px;}
    
    .chat-ask {box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: 100%; align-items: center; gap: 5px;}
    .chat-askquestion {box-sizing: border-box; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
    .chat-askbutton {box-sizing: border-box; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; width: 100%;}

    .newsfeed-list-item {display: block; margin-bottom: 8px;}
    .newsfeed-list-middle {display: block; max-width: 100%;}
    .newsfeed-list-source-desktop {display: none;}
    .newsfeed-list-source-mobile {display: inline; font-size: 12px; text-transform: uppercase;}
    .newsfeed-list-title {display: block; width: 100%; margin-bottom: 4px; overflow:visible; white-space: normal;}
    .newsfeed-list-lede {display: none;}
    .newsfeed-list-date {font-size: 12px; width: 100%; font-weight: bold;}
    .newsfeed-list-analyse {flex-grow: 0; flex-shrink: 0; width: 7ch; white-space: nowrap; text-align: right; background-color: var(--color-two-very-light); color: var(--color-two-normal); font-size: 12px; padding-left: 5px;}
    .newsfeed-list-analyse-plus {font-size: 12px;}
    .newsfeed-list-analyse-box-result {-webkit-overflow-scrolling: touch; overflow-y: scroll; max-height: 500px; margin-top: 20px;}
    .newsfeed-list-analyse-box-more {margin-bottom: 50px;}

    .user-signup {box-sizing: border-box; position: relative; display: grid; max-width: 100%; margin: 0 auto; grid-gap: 16px; padding: 16px; border: 1px solid #f7f7f7; border-radius: 8px; box-shadow: 1px 1px 4px 0px rgba(128, 0, 4, 0.4), inset 0px 0px 0px 0px rgba(128, 0, 4, 0.6);}
    .user-signup-input-otp-fields {display: flex; justify-content: center; gap: 1.5%;}
    .user-signup-input-otp-box {width: 15%; height: 40px; text-align: center; font-size: 20px; border: 1px solid #ccc; border-radius: 4px; background-color: #f7f7f7; color: #262626;}

    .modal-content {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
    
        background-color: #fefefe; margin: auto;
        padding: 30px;
        width: 90%; max-width: 600px; 
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        animation-name: animatetop;
        animation-duration: 0.4s;
    }

    .podcast_display_image {width: 100%; height: auto; float: none; margin-left: 0px; margin-bottom: 8px;}
    .podcast_list_item_image {width: 100%; height: auto; float: none; margin-left: 0px; margin-bottom: 8px;}
    .podcast_episode_podcast_box_image {width: 100%; height: auto; float: none; margin-left: 0px; margin-bottom: 8px;}
}

@media (max-width: 400px) {
    #nav-categories {font-size: 13px;}
    .hamburger {font-size: 36px;}
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body, .chat-askquestion, .chat-dropdown, .chat-answer, textarea, input, form, .modal-content, select, .admin-select {background-color: #ffffff; color: #121212;}
    /* .chat-question {color: #121212; background-color: #c9c9c9; border-bottom: 3px solid #77a4dd;}
    .admin-delete, .admin-delete-big {background-color: #121212;}
    a, .item-title {color: #77a4dd;}
    h1, h2, h3, h4, h5, h6, .admin-title {color: var(--color-two-normal);}
    .newsfeed-list-analyse, .newsfeed-list-analyse-box-more-link {background-color: var(--color-two-normal); color: var(--color-two-very-light); }
    .newsfeed-list-analyse:hover, .newsfeed-list-analyse-box-more-link:hover {background-color: var(--color-two-very-light); color: var(--color-two-normal); } */
}