html {
    overflow-y: scroll;
}



@font-face {
  font-family: 'Nunito Bold';
  src: url('fonts/nunito/Nunito-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito ExtraBold';
  src: url('fonts/nunito/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito Black';
  src: url('fonts/nunito/Nunito-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Odin Rounded Bold';
  src: url('fonts/odin-rounded/Odin Rounded/Bold/Odin Rounded - Bold.otf') format('opentype');
  font-weight: 1000;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans'; /* Define the name you'll use in font-family */
  src: url('fonts/open-sans/OpenSans-Regular.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: normal; /* Define the weight for this specific font file */
  font-style: normal; /* Define the style for this specific font file */
}

/* You can define other weights/styles similarly if you have different .ttf files */
@font-face {
  font-family: 'Open Sans Bold';
  src: url('fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Selawik'; /* Define the name you'll use in font-family */
  src: url('fonts/selawik/selawk.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: normal; /* Define the weight for this specific font file */
  font-style: normal; /* Define the style for this specific font file */
}

@font-face {
  font-family: 'Selawik B'; /* Define the name you'll use in font-family */
  src: url('fonts/selawik/selawkb.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: 400; /* Define the weight for this specific font file */
  font-style: normal; /* Define the style for this specific font file */
}

@font-face {
  font-family: 'Selawik SB'; /* Define the name you'll use in font-family */
  src: url('fonts/selawik/selawksb.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: 400; /* Define the weight for this specific font file */
  font-style: normal; /* Define the style for this specific font file */
}

@font-face {
  font-family: 'Vanilla Extract';
  src: url('fonts/vanilla-extract/VanillaExtractRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}











@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #b6b6b6;
        --background: #ececec;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #1f1f1f;
        --background: #000000;
    }
}


:root[color-mode="light"] {
--surface1: #e6e6e6;
--surface2: #f2f2f2;
--surface3: #ffffff;
--element1: #111111;
--element2: #222222;
--element3: #333333;
--elementInverse: #eee;
--primary: #01408e;
--secondary: #3c5d5c;
--tertiary: #fff7d6;
--sirius: #ffffff;
--edtoolsblue: #0000ff;
--testblueneutral: #2b71ea;
--likeneutraldislikehighlight: 1px 1px 10px #fff, 1px 1px 10px #0000FF;
--changingblue: blue;
--textboxcolor: #d3d3d3; /* light gray and looks great */
/* --divhoverhighlight: #f8f8f8; */ /* nice humble gray color, pretty light though ORIGINAL */
--divhoverhighlight: #f0f8ff; /* trying out this lightblue for a bit */
--closelink: #000000;

--background:var(--gray1);
--background-opacity:hsla(0,0%,97.3%,0.58);
--text-color:var(--gray4);
--h-color:var(--gray6);
--h-active-color:var(--gray6);
--nav-shadow:4px 0 10px -3px #c1c1c1;
--card-shadow:0 4px 8px rgba(0,30,84,0.12);
--mini-boardnav-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);
--toc-shadow:rgba(0,0,0,0.2) 0px 10px 20px 0px;
--nav-bg:#fff;
--tag-bg:var(--gray2);
--code-bg:#fff;
--card-bg:#fff;
--overlay-bg:hsla(0,0%,100%,0.9);
--h-border:2px dashed var(--gray1);
--card-border:1px solid var(--gray1);
transition:all .5s ease;
}

:root[color-mode="lightdark"] {
--surface1: #262626;
--surface2: #333333;
--surface3: #404040;
--element1: #eeeeee;
--element2: #dddddd;
--element3: #cccccc;
--elementInverse: #111;
--primary: #8fceff;
--secondary: #72faca;
--tertiary: #eee8a9;
--sirius: #222831;
--edtoolsblue: #66cbff;
--testblueneutral: #2b71ea;
--likeneutraldislikehighlight: 1px 1px 10px #fff, 1px 1px 10px #ccc;
--changingblue: #498afb;
--textboxcolor: white;
--divhoverhighlight: #232b36;
--closelink: #FFFFFF;

--background:var(--gray6);
--background-opacity:rgba(18,24,27,0.58);
--text-color:var(--gray2);
--h-color:#fff;
--h-active-color:#fff;
--nav-shadow:4px 0 10px -3px #010101;
--card-shadow:0 4px 8px rgba(0,0,0,0.38);
--mini-boardnav-shadow:0 -2px 10px rgba(255, 255, 255, 0.1);
--toc-shadow:rgba(0,0,0,0.7) 0px 10px 20px 0px;
/* --nav-bg:var(--gray5); */ /* original gray color is ok, but I dont really want to use it */
--nav-bg:#181D27; /* nice color */
--tag-bg:var(--gray4);
--code-bg:#22262f;
/* --card-bg:var(--gray5); */ /* original gray color is ok, but I dont really want to use it */
--card-bg:#181D27; /* nice color */
--overlay-bg:rgba(0,0,0,0.9);
--h-border:2px dashed var(--nav-bg);
--card-border:1px solid var(--nav-bg);
--card-radius:0.25em;
transition:all .3s ease;
}

.solar {
--text-color: #576e75;
--background: #fdf6e3;
}

:root[color-mode="dark"] {
--surface1: #262626;
--surface2: #333333;
--surface3: #404040;
--element1: #eeeeee;
--element2: #dddddd;
--element3: #cccccc;
--elementInverse: #111;
--primary: #8fceff;
--secondary: #72faca;
--tertiary: #eee8a9;
--sirius: #000000;
--edtoolsblue: #66cbff;
--testblueneutral: #2873e9;
--likeneutraldislikehighlight: 1px 1px 10px #fff, 1px 1px 10px #ccc;
--changingblue: #498afb;
--textboxcolor: white;
--divhoverhighlight: #141414;
--closelink: #FFFFFF;

/* --background:var(--gray6); */
--background:#000000;
--background-opacity:rgba(18,24,27,0.58);
--text-color:var(--gray2);
--h-color:#fff;
--h-active-color:#fff;
--nav-shadow:4px 0 10px -3px #010101;
/* --card-shadow:0 4px 8px rgba(0,0,0,0.38); */
/* --card-shadow:0 4px 8px rgba(0, 0, 0, 0.2); */ /* Subtle black shadow */ /* not much difference tbh */
/* --card-shadow:0 0 15px rgba(255, 255, 255, 0.7); */ /* Adjust values for desired effect */ /* good but too much */
--card-shadow:0 0 10px rgba(255, 255, 255, 0.38);
--mini-boardnav-shadow:0 -2px 10px rgba(255, 255, 255, 0.38);
--toc-shadow:rgba(0,0,0,0.7) 0px 10px 20px 0px;
/* --nav-bg:var(--gray5); */
--nav-bg:#000000;
--tag-bg:var(--gray4);
--code-bg:#22262f;
/* --card-bg:var(--gray5); */
/* --card-bg:#101010; */
/* --card-bg:#121212; */ /* that sorta dark brownish color */
/* --card-bg:#16213E; */ /* a dark blue color, def looks blue */
/* --card-bg:#1A1A2E; */ /* a dark purple color, def looks purple */
/* --card-bg:#1A1A1B; */ /* another dark brownish one */
/* --card-bg:#0C2233; */ /* a sorta dark turquise color */
/* --card-bg:#181D27; */ /* A nice color, but I am wondering if same color but darker would be better */
--card-bg:#000000; /* Blackout */
--overlay-bg:rgba(0,0,0,0.9);
--h-border:2px dashed var(--nav-bg);
--card-border:1px solid var(--nav-bg);
--card-radius:0.25em;
transition:all .3s ease;
}


/* Any element with the class "light--hidden" will be hidden when the site is set to Light Mode */
:root[color-mode="light"] .light--hidden { display: none; }
:root[color-mode="light"] .dark--hidden { display: none; }


/* Any element with the class "lightdark--hidden" will be hidden when the site is set to Dark Mode */
:root[color-mode="lightdark"] .light--hidden { display: none; }
:root[color-mode="lightdark"] .lightdark--hidden { display: none; }

/* Any element with the class "dark--hidden" will be hidden when the site is set to Dark Mode */
:root[color-mode="dark"] .lightdark--hidden { display: none; }
:root[color-mode="dark"] .dark--hidden { display: none; }


:root{
--red:#ff3860;
--red-dark:#ff1443;
--red-light:#ff5c7c;
--blue:#498afb;
--blue-dark:#2674fa;
--blue-light:#6ca0fc;
--orange:#fa8142;
--orange-dark:#f96a1f;
--orange-light:#fb9865;
--green:#09c372;
--green-dark:#07a15e;
--green-light:#0be586;
--magentashade1:#a00be0;
--purple:#9166cc;
--purple-dark:#7d4bc3;
--purple-light:#a481d5;
--#ff0:#ffdd57;
--#ff0-dark:#ffd633;
--#ff0-light:#ffe47a;
--pink:#ff4088;
--pink-dark:#ff1c72;
--pink-light:#ff649e;
--gray0:#f8f8f8;
--gray1:#dbe1e8;
--gray2:#b2becd;
--gray3:#6c7983;
--gray4:#454e56;
--gray5:#2a2e35;
--gray6:#12181b;
--nav-width:4.7em;
/* --font-body:"sofia-pro",sans-serif; */
--font-body:"Arial", "Open Sans", sans-serif;
/* --font-head:"cubano",sans-serif; */
--font-head:"Arial", "Open Sans", sans-serif;
--font-code:"attribute-mono",monospace;
--font-size:20px;
--max-width-bp:768px;
--orange-pink:linear-gradient(to bottom right,var(--orange-light),var(--orange-dark) 85%);
--green-grad:linear-gradient(to bottom right,var(--green-light),var(--green-dark) 85%);
--background:var(--gray6);
--background-opacity:rgba(18,24,27,0.58);
--text-color:var(--gray2);
--h-color:#fff;
--nav-shadow:4px 0 10px -3px #010101;
--card-shadow:0 4px 8px rgba(0,0,0,0.38);
--mini-boardnav-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);
--toc-shadow:rgba(0,0,0,0.7) 0px 10px 20px 0px;
--nav-bg:var(--gray5);
--tag-bg:var(--gray4);
--code-bg:#22262f;
--card-bg:var(--gray5);
--overlay-bg:rgba(0,0,0,0.9);
--h-border:2px dashed var(--nav-bg);
--nav-border:2px dashed var(--text-color);
--card-border:1px solid var(--nav-bg);
--card-radius:0.25em;
transition:all .3s ease
}


.b_text {color:#3d6f92;}

body {
background:var(--background);
color:var(--text-color);
margin:0;
font-family:var(--font-body);
font-size:var(--font-size);
display:flex;
min-height:100vh;
flex-direction:column
}


main {
/* margin-top:var(--nav-width); */
margin-top: 68px;
/* padding: 1rem */
}


a {color:var(--blue); text-decoration:none;}

em,h1,h2,h3,h4,h5,h6{color:var(--h-color)}

h1,h2,h3,h4,h5,h6{font-family:var(--font-head);
font-weight:400;
}


/* not sure why, but this has to be here for remote video thumb to not be stretched looking */
img{max-width:100%; height:auto;}

hr {background:#dfefc0; height:.5px; align:right; width:100%; color:#dfefc0;}

::selection{background:var(--blue);color:#fff}




.flex{display:flex;}

.flex-center,.flex-center-col {
display:flex;
align-items:center;
justify-content:center;
/* border: solid 2px yellow; */
}

.flex-center-col{flex-direction:column}



.border-bottom{border-bottom:var(--h-border)}

.shadow{box-shadow:var(--card-shadow)}

.pb-1{padding-bottom:1rem}






@keyframes delayedFade{0%{opacity:1}50%{opacity:1}to{opacity:0}}

.delayed-fade{animation:delayedFade 2s}

.gradient-text {
background-image:linear-gradient(90deg,var(--orange),var(--pink));
-webkit-background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-text::selection{-webkit-text-fill-color:var(--h-color)}







code,pre{font-family:var(--font-code);
font-size:.95em;
font-weight:400
}

li code,p code{background:var(--code-bg);
color:var(--purple);
padding:0 .4em;
border-radius:3px;
font-size:.85em;
font-weight:700
}







.topnav{
position:fixed;
background:var(--nav-bg);
box-shadow:var(--nav-shadow);
display:flex;
flex-direction:row;
width:100%;
z-index:50;
/* transition:top .3s ease; */
border-bottom:var(--card-border);
/* font-size:1.2rem; */ /* ORIGINAL LONG TIME WORKING - same as 19.2px */
/* font-size:20px; */ /* same as 1.25rem */
font-size:1.25rem; /* equivalent to 20px */
/* height:var(--nav-width) */
height: 55px;
top: 0;
/* gap: 40px; */
justify-content: center;
align-items: center;

}

.logo {
position: absolute;
  left: 20px; /* Position the logo on the far left */
}

.navlinks {
    display: flex; /* Enable Flexbox for the links container */
    padding: 0;
    /* margin: 0 auto; */ /* This is the key: auto margins on the left/right center the element within the available space */
    gap: 40px;
}

.righticons {
position: absolute;
  right: 80px; /* Position the logo on the far left */
  display: flex;
  align-items: center;
}

@media (max-width:768px){
:root{--font-size:15px;--nav-width:3em}main{margin-left:.5em}
}



/* I dont think this one is actually even being used */
/*
@media screen and (max-width:768px){.row-home{margin:7vw 0}}.row-home h2{font-size:1.6em}.row-home p{font-size:1.4em;font-weight:300}
*/

/* is this one used for anything? my first thought is maybe for skinnytop navigation */
/* actually I think Yes, it hides the topnav text links (topnav-links) when @media 768px. */
@media screen and (max-width:1000px){.hide-sm{visibility:hidden;display:none} }

@media screen and (max-width:1050px){.righticons{position:absolute; right:10px;} }

/* I dont think this one is actually even being used */
@media (min-width:768px){.hide-lg{visibility:hidden;display:none}}


/* .topnav .righticons .item:hover .item-label{ opacity: 1;} */

.item:hover .item-label{ opacity: 1; }

.item-label{
position:absolute;
/* transform: translateY(10px); */
top: 43px;
transition: all .22s ease-in-out;
opacity: 0;
left: -5px;
/* height: 1.5em; */
/* height: auto; */
}

/* for the right side icons on index.php navigation */
.header .item:hover .item-label{ opacity: 1;}

.header .item .item-label{
position:absolute;
transform: translateY(43px);
transition: all .22s ease-in-out;
opacity: 0;
/* height: 1.5em; */
/* height: auto; */
}

.themebutton {

}

@media (max-width:768px){.topnav{margin:0}}

/*
.item {
position:relative;
/* height:var(--nav-width); */
/* max-height:50px; */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
margin:0 1em
}
*/

.item {

}

.item-nav-left {
position:relative;
/* height:var(--nav-width); */
/* max-height:50px; */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
margin:0 .2em
}

.item-nav-right {
position:relative;
/* height:var(--nav-width); */
/* max-height:50px; */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
margin:0 .5em
}

/* .item img,.item svg{width:1.5em;height:1.5em} ORIGINAL, BUT .item img part messes up nav profile pic */
.item svg{width:1.5em;height:1.5em}
/* .item a{color:var(--text-color);} */ /* I forget why this one was here */
.item .btn{padding:.5em 1em}
.item.last{margin-right:5vw}

a.item{color:var(--text-color);}

/*
a.item:active {
  background-color: yellow;
}
*/


.topnav a.item.active {
  /* background: #29abe2; */
  /* color: #fff; */
  color:var(--h-active-color);
  /* border-radius: 5px; */
}


.active{
    /* background: #c5e6c5; */
    color: green;
    //color: yellow;
    border-bottom: 2px solid #48a200;
}

.nonelisted{
color: #dfefc0;
}


.logoOLD {
width:var(--nav-width);
/* width: 150px; */
/* max-width:300px; */
/* max-width:60px; */
transition:opacity .3s
}

.logo svg{width:2em;height:2em}
.logo:hover svg{fill:var(--orange-pink)}

/* #header .banner {background:url(images/Webmoid-Roboto_Slab_Bold-28861153.png) top no-repeat; padding:102px 0px 0px 0px; color:#ffffff;} */

/* use this one when using the text version */
.logo1st {
/* font-size: 40px; ORIGINAL */
/* font-size: 36px; */
/* font-family: "Comic Sans MS", "Comic Sans", cursive; */
/* font-family: Sans-Serif; */
/* font-family: "Trebuchet MS"; */ /* I like this one a lot */
/* font-family: "Segoe UI"; */ /* was using this one before trying Circular */
/* font-family: "AvantGarde BK BT"; */
/* font-family: "Circular", Arial, sans-serif; */
/* font-family: "20th Century Font"; */
/* font-weight: bold; */
/* font-weight: 800; */
/* font-weight: 1000; */ /* this mixed with Trebuchet MS is my fav so far */
/* font-weight: 700; */ /* this one works great with Segoe UI font */
/* color: blue; */
color: #3f48cc;
/* padding: 15px, 15px, 15px, 15px; */
padding-left: 10px;
/* padding-top: 0px; */
}
/*
.logo1sta {
font-family: "Nunito Black";
font-size: 36px;
font-weight: 500;
}
*/
/*
.logo1stb {
font-family: "Rimouski SB";
font-size: 32px;
font-weight: 1000;
}
*/
.logo1sta {
font-family: "Nunito Black";
font-size: 36px;
font-weight: 700;
}

.logo1stb {
font-family: "Vanilla Extract";
font-size: 30px;
font-weight: bold;
padding-left: 3px;
}


/* use this one when using the .svg */
.logo1stWHENUSINGSVGVERSION {
font-size: 30px;
/* width:30px; */ /* this works same as padding-right, does not size svg img */
/* font-family: "Comic Sans MS", "Comic Sans", cursive; */
/* font-family: Sans-Serif; */
/* font-family: "Trebuchet MS"; */ /* I like this one a lot */
/* font-family: "Segoe UI"; */ /* was using this one before trying times new roman */
/* font-family: "AvantGarde BK BT"; */
/* font-family: "Circular", Arial, sans-serif; */
/* font-weight: bold; */
/* font-weight: 1000; */ /* this mixed with Trebuchet MS is my fav so far */
/* font-weight: 900; */ /* this one works great with Segoe UI font */
/* color: blue; */
/* color: #3f48cc; */
/* padding: 15px, 15px, 15px, 15px; */
padding-top: 6px;
padding-left: 5px;
}

/* .logo1st svg{height:3.8em;} */
/* .logo1st svg{width:2.2em; height:2.2em;} */
/* .logo1st:hover svg{fill:var(--orange-pink)} */

.logo2nd {
font-size: 35px;
font-family: "Nunito Black", "Vanilla Extract", "Selawik B", "Odin Rounded Bold", "Segoe UI";
/* font-weight: 1000; */
/* color: green; */
color: #22b14c; /* the green i have been using for site name logo on skinny top nav */
/* color: #12ab3d; */
/* color: #3f4fcc; */ /* blue i have been using for \o on skinny top nav */
padding-top: 6px;
margin-left: -3px;
}

.logo2ndb {
font-size: 35px;
font-family: "20th Century Font";
/* font-weight: 1000; */
/* color: green; */
color: #3f4fcc;
/* color: #12ab3d; */
margin-left: -3px;
}


@media screen and (max-width:1000px){.logo2nd{display:none;}}

.nav-profile-picture {
height: 45px;
}
 
@media screen and (max-width:768px){.logo{margin-left:.25em;}}

.item-text{transition:color .3s; flex-direction:row;}

.item-text:hover{color:var(--h-color);}

.item-text svg {
width:1em;
height:1em;
margin-right:.25em
}



.topnav-logo{min-width:15vw}

/* not using anymore */
.topnav-text-links{
margin:0 auto;
font-family:var(--font-head);
font-weight:400;
}

/* @media screen and (max-width:768px){.topnav-links{width:0}} */
@media screen and (max-width:768px){.navlinks{width:0}}
/* @media screen and (max-width:800px){.topnav-links{display:none;}} */

.topnav-icons{min-width:15vw}

@media screen and (max-width:768px){.topnav-icons svg{width:1.5rem}.topnav-icons .item{margin:0 .75em}}


.textAreaBoxInputs {
  display: none;
}

menu-toggler{ visibility:hidden; }
menu-toggler{z-index:999}
/* theme-btn {visibility: hidden; } */

.theme-icon {
  display: none;
}

.dark #darkIcon {
  display: block;
}

.light #lightIcon {
  display: block;
}

.solar #solarIcon {
  display: block;
}

.dark .item .fk-primary{color:var(--gray3)}
.dark .item .fk-secondary{color:var(--gray4)}
.dark .item:hover .fk-primary{color:var(--orange)}
.dark .item:hover .fk-secondary{color:var(--orange-light)}
.light .item .fk-primary{color:var(--gray2)}
.light .item .fk-secondary{color:var(--gray3)}
.light .item:hover{transition:color .5s ease}
.light .item:hover .fk-primary{color:var(--orange)}
.light .item:hover .fk-secondary{color:var(--orange-dark)}
.lightdark .item .fk-primary{color:var(--gray3)}
.lightdark .item .fk-secondary{color:var(--gray4)}
.lightdark .item:hover .fk-primary{color:var(--orange)}
.lightdark .item:hover .fk-secondary{color:var(--orange-light)}

.topnav .item:hover .fk-primary{color:var(--text-color)}
.topnav .item:hover .fk-secondary{color:var(--h-color)}

.item .fk-primary,.item .fk-secondary,.item:hover .fk-primary,.item:hover .fk-secondary{transition:color .5s ease}



.color-mode__btn {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* padding: 2rem; */
  /* margin: 0 auto 1.5rem; */
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: #111111;
  color: var(--element1, #111111);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}

.color-mode__btn svg {
  width: 30px;
  height: 30px;
  /* margin-left: 7px; */
  fill: none;
  stroke: #222222;
  stroke: var(--element2, #222222);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

.color-mode__btn:hover svg,
.color-mode__btn:focus svg, .color-mode__btn:focus {
  outline: none;
  fill: #fff7d6;
  fill: var(--tertiary, #fff7d6);
}

.membericons {
display: flex;
align-items: center;
gap: 20px;
}

.mail-notification__btn {
position: relative;
fill: green;
}

.mail-notification__btn:hover {
fill: green;
}

.notification__btn {
position: relative;
fill: gold;
}

.notification__btn:hover {
fill: blue;
}

.theme__btn {
position: relative;
}


.mail-notification__btn .badge {
  position: absolute;
  top: -15px;
  right: 5px;
  padding: .5px 5px;
  border-radius: 50%;
  background-color: blue;
  color: white;
  font-size: .7em;
}


.notification__btn .badge {
  position: absolute;
  top: -15px;
  right: 5px;
  padding: .5px 5px;
  border-radius: 50%;
  background-color: blue;
  color: white;
  font-size: .7em;
}


/*
.badge {
  position: absolute;
  top: 0px;
  right: 5px;
  padding: .5px 5px;
  border-radius: 50%;
  background-color: blue;
  color: white;
  font-size: .7em;
}
*/
/* skinnynav user profile image dropdown menu css stuff */

.dropbtn {
  /* background-color: #3498DB; */
  /* color: white; */
  /* padding: 16px; */
  /* font-size: 16px; */
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  border: 5px;
  border-color: blue;
  //background-color: #2980B9;
}

.navdropdown {
  position: relative;
  /* float: left; */
  /* display: inline-block; */
  /* white-space: nowrap; */
}

.navdropdown-content {
  display: none;
  position: absolute;
margin-top: 8px; /* this works well, but I think theres better ways. leave for now */
  /* padding: 60px, 10px, 10px, 10px; this seemed to have no effect at all */
  /* float: left; */
  right: 0;
  background-color: #f1f1f1;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.navdropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.navdropdown a:hover {background-color: #ddd;}

.show {display: block;}


/* might need this one .tag */
.tag {
display:inline-block;
border-radius:3px;
padding:.2em .5em .3em;
border-radius:2px;
background:var(--tag-bg);
color:var(--text-color);
font-weight:600;
margin:.25em .1em;
}

/* might need this one .tag-sm */
.tag-sm {
font-size:.7em;
display:inline-block;
letter-spacing:.15ch;
font-weight:400;
}

/* might need these ones .tag-blue .tag-green .tag-purple */
.tag-blue { background:var(--blue); color:#fff; }
.tag-green { background:var(--green);color:#fff; }
.tag-purple { background:var(--purple);color:#fff; }


/* ------------------------------ Bottom Nav -------------------------------- */
/* Style the bottom navigation bar */
.bottomnavOLD {
  position: fixed;
  bottom: 0;
  display: none;
  z-index:1;
  width: 100%;
  overflow: hidden;
  background-color: #333;
/* justify-content: middle; */
text-align: center;
}

/* Style the bottomnav links */
.bottomnavOLD a {
  /* float: left; */
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.bottomnavOLD a:hover {
  background-color: #ddd;
  color: black;
}

@media screen and (max-width: 1000px) {
  .bottomnavOLD {display:block;}
}
/* -------------------------- End Bottom Nav -------------------------------- */

/* -------------------------- NEW Bottom Nav -------------------------------- */

/* Base navigation container */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  /* background-color: #ffffff; */
  background-color: var(--nav-bg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* Modern safe area spacing for iPhones with notches */
  padding-bottom: env(safe-area-inset-bottom, 0px); 
}

/* Individual navigation link items */
.bottomnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  height: 100%;
  /* color: #777777; */
  color: var(--text-color);
  text-decoration: none;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  transition: color 0.2s ease-in-out;
}

/* Vector icon configurations */
.bottomnav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* Text labels under icons */
.bottomnav-label {
  /* font-size: 11px; */ /* original with the sample code */
  font-size: 0.625rem; /* same as 10px */
  font-weight: 500;
}

/* Active and Hover states */
.bottomnav-item:hover,
.bottomnav-item.active {
  color: #007aff; /* System blue accent color */
}

/* Responsive Rule: Hide or style differently on Desktop layouts */
@media (min-width: 1000px) {
  .bottomnav {
    /* Hide on larger displays if you feature a top navigation bar instead */
    display: none;
    
    /* Optional Alternative: Turn it into a floating center bar on larger viewports */
/*
    max-width: 480px;
    margin: 0 auto;
    border-radius: 16px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
*/
  } /* close @media .bottomnav */
} /* close @media */
/* ------------------------ END NEW Bottom Nav ------------------------------ */


.card {
background:var(--card-bg);
color:var(--text-color);
padding:0;
box-shadow:var(--card-shadow);
font-size:20px;
display:inline-flex;
flex-direction:column;
margin:0 0 1em;
width:100%;
transform:translateY(0);
border-radius:var(--card-radius);
/* overflow:hidden; */
}

.card .card-content{padding:1em 1em 1em 1em;}


.gcard {
/* background:var(--background); */
background:var(--card-bg);
color:var(--text-color);
padding:0;
box-shadow:var(--card-shadow);
display:inline-flex;
flex-direction:column;
margin:0 0 1em;
width:100%;
transform:translateY(0);
border-radius:var(--card-radius);
}

.gcard .gcard-content{padding:1em;}


.alerter {
  position: fixed;
  /* position: fixed; */
  z-index: 49;
  /* top: 25%; */
  top: 50%;
  left: 50%;
  width: 150px;
  height: auto;
  /* margin: auto; */
  background-color: purple; 
  color: white;
  text-align: center;
  display: none;
  /* display: block; */
  transform: translate(-50%, -50%);
}


.groupprofilebanner {
max-width:1080px;
max-height:1080px;
overflow:hidden;
/* border: 10px groove red; */ /* used for testing */
}


/***************** verification stuff below here *******************/

.vbadge {
background-color:white;
color:#3f48cc;
padding: 3px;
text-align:center;
border-radius: 50%;
}

.vb {  
  /* font-family: Montserrat, Verdana, sans-serif; */
  font-weight: 500;
	position: relative;
	padding-left: 22px;
}

.vb:before,
.vb:after {
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
	content: "\2714";
	/* color: var(--checkmark-color); */
	color: white;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 15px;
	/* background-color: var(--badge-color); */
	background-color: #3f48cc;
	/* border-radius: 20%; */
	border-radius: 5%;
	/* transform: rotate(22deg); */
}

.vb:before {
	transform: rotate(45deg);
}











.vb1 {  
  /* font-family: Montserrat, Verdana, sans-serif; */
  font-weight: 500;
	position: relative;
	padding-left: 15px;
}

.vb1:before,
.vb1:after {
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
	content: "\2714";
	/* color: var(--checkmark-color); */
	color: white;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 15px;
	/* background-color: var(--badge-color); */
	background-color: #3f48cc;
	/* border-radius: 20%; */
	border-radius: 5%;
	/* transform: rotate(22deg); */
	top:4px;
}

.vb1:before {
	transform: rotate(45deg);
}






.vb2 {  
  /* font-family: Montserrat, Verdana, sans-serif; */
  font-weight: 500;
	position: relative;
	padding-left: 15px;
}

.vb2:before,
.vb2:after {
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
	content: "\2714";
	/* color: var(--checkmark-color); */
	color: white;
	font-size: 10px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 13px;
	height: 13px;
	line-height: 13px;
	/* background-color: var(--badge-color); */
	background-color: #3f48cc;
	/* border-radius: 20%; */
	border-radius: 5%;
	/* transform: rotate(22deg); */
	top:4px;
}

.vb2:before {
	transform: rotate(45deg);
}




/* SIZED FOR ECHOES, SINCE ECHOES HAVE SLIGHTLY SMALLER DISPLAY NAME FONT */
.vb3 {  
  /* font-family: Montserrat, Verdana, sans-serif; */
  font-weight: 500;
	position: relative;
	padding-left: 15px;
}

.vb3:before,
.vb3:after {
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
	content: "\2713";
	/* color: var(--checkmark-color); */
	color: white;
	font-size: 8px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 11px;
	height: 11px;
	line-height: 11px;
	/* background-color: var(--badge-color); */
	background-color: #3f48cc;
	/* border-radius: 20%; */
	border-radius: 5%;
	/* transform: rotate(22deg); */
	top:4px;
}

.vb3:before {
	transform: rotate(45deg);
}


/************** verification stuff above here ********************/

/************** subscription stuff below here ********************/

/* is a green filled in circle */
.sbORIGINAL {
  /* content: "\✪"; */
  width: 16px;
  height: 16px;
  /* background-color: #008000; */ /* Standard green or choose a custom hex */
  background-color: #22b14c; /* could be good green for online now if we do an online now */
  /* background-color: #45a049; */
  border-radius: 50%;
  display: inline-block; /* Allows it to sit inline with text if needed */
}

.sb {
  /* Circle dimensions and styling */
  width: 17px;
  height: 17px;
  /* background-color: #3498db; */ /* Circle fill color */
  background-color: #45a049; /* same color as buy now button */
  border-radius: 50%;
  
  /* Centers the star inside the circle */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 2px;
}

.sb::before {
  /* Creates a hollow star shape using unicode */
  content: "\2605";
  font-size: 16px;
  color: #fff; /* Star outline color */
  line-height: 1;
}

.sbTRYINGNEWONE {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  font-size: 12px;
}

.sbTRYINGNEWONE::before {
  content: "\2606";
}

/************** subscription stuff above here ********************/


/* The Post Modal (background) */
.postmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */
  left: 50%;
  top: 28%; /* original was 25% */
  /* top: 30%; */
  /* padding-top: 100px; */ /* Location of the box */
  width: 50vw; /* Full width */
  /* height: 50vh; */ /* Full height */
  /* max-height: 1000px; */
    height: 70vh;
    /* border: 1px solid #eee; */
    border: 1px solid green;
    /* border-radius: 4px; */
border-radius: 8px;
/* //box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); */ /* original border before matrix green */
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
    padding: 10px;
    /* background-color: #444; */
    background-color: var(--card-bg);
  overflow-x: hidden;
  overflow-y: auto; /* Enable scroll if needed */
  /* background-color: rgb(0,0,0); */ /* Fallback color */
  /* background-color: rgba(0,0,0,0.4); */ /* Black w/ opacity */
  transform: translate(-50%, -25%);
}

/* Post Modal Content */
.postmodal-content {
    /* background-color: #fefefe; */
    /* background-color: #868686; */
    margin: auto;
    padding: 20px;
    /* border: 5px solid #888; */
    /* height: 150px; */
    /* width: 80%; */
    /* width: 750px; */
    /* width: 90%; */
    width: 900px;
    overflow-x: hidden;
    overflow-y: auto;
}


article {
  display: block;
}


article.wrapper-2017r {
  position: relative;
  transition: 0.1s ease-in-out;
/*  font-size: 16px; */
max-width: 80%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
/* padding: var(--gap); */
padding: 10px;
/* background: var(--entry); */
/* color: unset; */
/* background: #FFF; */
background: transparent;
border-radius: 8px;
//box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
//border: 2px solid red;
}

article.wrapper-2017r:hover {
  //box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 25px rgba(130, 241, 121, 0.2) /* looks like matrix green to me */
}


article.wrapper-2025 {
  position: relative;
  transition: 0.1s ease-in-out;
/*  font-size: 16px; */
  width: 80%;
  margin-top: 10px;
  margin-bottom: 10px;
/* padding: var(--gap); */
padding: 10px;
/* background: var(--entry); */
/* color: unset; */
/* background: #FFF; */
background: transparent;
border-radius: 8px;
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
/* box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); original that I like */
}

article.wrapper-2025:hover {
  box-shadow: 0 0 25px rgba(130, 241, 121, 0.2) /* looks like matrix green to me */
  /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); original that I like */
}

article.echowrapper-2025 {
  position: relative;
  transition: 0.1s ease-in-out;
/*  font-size: 16px; */
/*  width: 85%; */
  margin-top: 10px;
  margin-bottom: 10px;
/* padding: var(--gap); */
padding: 10px;
/* background: var(--entry); */
/* color: unset; */
/* background: #FFF; */
background: transparent;
border-radius: 8px;
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
/* box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); original that I like */
}

article.echowrapper-2025:hover {
  box-shadow: 0 0 25px rgba(130, 241, 121, 0.2) /* looks like matrix green to me */
  /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); original that I like */
}

.clickable-head-box {
	/* border: 2px solid; */
	min-height: 70px;
	/* max-width: 800px; */
	max-width: 100%;
	/* border-radius: 10px; */
	/* padding: 10px 10px 10px 15px; */
	cursor: pointer;
}

.clickable-head-box:hover {
	background-color: var(--divhoverhighlight);
}

.clickable-head-box a {
  pointer-events: auto;
}

.unclickable-head-box {
	/* border: 2px solid; */
	min-height: 70px;
	/* max-width: 800px; */
	max-width: 100%;
	/* border-radius: 10px; */
	/* padding: 10px 10px 10px 15px; */
	/* cursor: pointer; */
}



/**********NEW CLICKABLE HEAD BOX 2026************/

article.wrapper-2026 {
  position: relative;
  transition: 0.1s ease-in-out;
/*  font-size: 16px; */
  width: 80%;
  margin-top: 10px;
  margin-bottom: 10px;
/* padding: var(--gap); */
padding: 10px;
/* background: var(--entry); */
/* color: unset; */
/* background: #FFF; */
background: transparent;
border-radius: 8px;
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
/* box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); original that I like */
}

article.wrapper-2026:hover {
  box-shadow: 0 0 25px rgba(130, 241, 121, 0.2) /* looks like matrix green to me */
  /* box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); original that I like */
}


.box-link-unclickable {
  /* width:480px; */
  /* height:270px; */
  width:100%;
  min-height:70px;
  /* background-image:url('https://images.unsplash.com/photo-1553105344-a905919678ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'); */
  /* background-size:cover; */
  /* border: 1px solid gray; */
  position:relative;
}

.box-link {
  /* width:480px; */
  /* height:270px; */
  width:100%;
  min-height:70px;
  /* background-image:url('https://images.unsplash.com/photo-1553105344-a905919678ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'); */
  /* background-size:cover; */
  /* border: 1px solid gray; */
  position:relative;
  /* z-index:1; */
}
.box-link:after {
  /* background:linear-gradient(transparent 25%, rgba(0,0,0,0.9)); */
  /* background-color: var(--divhoverhighlight); */ /* disabled for now till I figure out how to    */
						    /* get this to work without covering links also */
  position:absolute;
  transition:all 250ms ease;
  pointer-events:none;
  top:0;
  /* left:0; */
  display:block;
  opacity:0;
  visibility:hidden;
  content:'';
  width:100%;
  height:100%;
  /* z-index:1; */
}
.box-link:hover:after {
  visibility:visible;
  opacity:1;
  z-index:0;
}
.box-link__anchor {
  /* position:relative; */
  /* top:0; */
  /* left:0; */
  display:block;
  content:'';
  /* width:100%; */
  height:100%;
  padding-top:25px; /* in @media we need to drop this down to 20px */
  /* text-decoration: none; */
  z-index:1; /* was 9 */
}

.box-link__image {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  z-index: 2; /* was 25 */
}

.box-link__dname {
  position:absolute;
  top:0;
  padding-left:70px;
  z-index:2; /* was 21 */
}

.box-link__date {
  position:absolute;
  top:0;
  right:0;
  font-size:10px;
  z-index:2; /* was 22 */
}

.box-link__content {
position: relative;
width: 100% - 70px; /* -70px here because the padding-left:70px keeps pushing whole thing over */
/* text-align: center; */ /* I dont like this one */
/* margin: auto; */ /* normally this is not commented out, trying comment out for a few days */
/* margin-top: 5px; */
padding-left: 70px; /* works just fine */
/* padding-right: 10px; */
padding-bottom: 10px; /* works just fine */
/* padding: 0, 0, 10px, 10px; */ /* this not working for some reason */
/* cursor: pointer; */
/* border: 2px solid #404040; */
overflow-wrap: break-word;
color: var(--text-color);
/* border: 1px solid blue; */
/* z-index:5; */
}


/**********END NEW CLICKABLE HEAD BOX 2026************/



/**********TESTING A BETTER? CLICKABLE DIV BOX BELOW****************/
.cprbox {
  position: relative; /* Required for the absolute link to anchor */
  padding: 20px;
  min-height: 25px; /* 20 looks best on Explore page, but for echoes 25 looks best, so 25 for now */
  /* border: 1px solid #ddd; */
  transition: background 0.1s, transform 0.1s;
  /* background: white; */

}

/* 1. Highlight effect on hover */
.cprbox:hover {
  /* background: #f0f8ff; */ /* I like this shade of blue btw, might need to use it */
  background: var(--divhoverhighlight);
  /* border-color: #007bff; */
  /* transform: translateY(-2px); */
  cursor: auto;
}

/* I put this here, but its not working the way I want */
/*
.cprbox div {
user-select: text;
  -webkit-user-select: text; */ /* Safari/Chrome */ /*
  -moz-user-select: text;
}
*/

/* 2. The "Invisible" Main Link */
.main-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; /* Covers the box */
}

/* 3. Keep internal links clickable */
.cprbox a:not(.main-link) {
  position: relative;
  z-index: 2; /* Sits above the main-link layer */
  /* color: blue; */
  text-decoration: none;
}

.cprbox__image {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  z-index: 2; /* was 25 */
}

.cprbox__dname {
  position:absolute;
  top:0;
  padding-left:55px;
  z-index:2; /* was 21 */
}

.cprbox__date {
  position:absolute;
  top:0;
  right:0;
  font-size:10px;
  z-index:2; /* was 22 */
}

.cprbox__content {
position: relative;
width: 100% - 55px; /* -70px here because the padding-left:70px keeps pushing whole thing over */
/* text-align: center; */ /* I dont like this one */
/* margin: auto; */ /* normally this is not commented out, trying comment out for a few days */
/* margin-top: 5px; */
padding-left: 55px; /* works just fine */
/* padding-right: 10px; */
padding-bottom: 10px; /* works just fine */
/* padding: 0, 0, 10px, 10px; */ /* this not working for some reason */
/* cursor: pointer; */
/* border: 2px solid #404040; */
overflow-wrap: break-word;
color: var(--text-color);
/* border: 1px solid blue; */
/* z-index:1; */
}

/*********CPRBOX UNCLICKABLE***********/
.cprbox__unclickable {
  position: relative; /* Required for the absolute link to anchor */
  padding: 20px;
  /* border: 1px solid #ddd; */
  transition: background 0.1s, transform 0.1s;
  /* background: white; */

}





/**** the loop sidebar ****/
.loopbox {
  position: relative; /* Required for the absolute link to anchor */
  padding: 20px;
  /* border: 1px solid #ddd; */
  transition: background 0.1s, transform 0.1s;
}

/* 1. Highlight effect on hover */
.loopbox:hover {
  /* background: #f0f8ff; */ /* I like this shade of blue btw, might need to use it */
  background: var(--divhoverhighlight);
  /* border-color: #007bff; */
  /* transform: translateY(-2px); */
  cursor: auto;
}

/* 2. The "Invisible" Main Link */
.loopbox-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; /* Covers the box */
}

/* 3. Keep internal links clickable */
.loopbox a:not(.loopbox-link) {
  position: relative;
  z-index: 2; /* Sits above the main-link layer */
  /* color: blue; */
  text-decoration: none;
}

/* in case we start using this */
.loopbox__image {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  z-index: 2; /* was 25 */
}

.loopbox__dname {
  position:absolute;
  top:0;
  padding-left:0px;
  z-index:2; /* was 21 */
}

.loopbox__content {
position: relative;
width: 100% - 0px; /* -70px here because the padding-left:70px keeps pushing whole thing over */
/* text-align: center; */ /* I dont like this one */
/* margin: auto; */ /* normally this is not commented out, trying comment out for a few days */
/* margin-top: 5px; */
padding-left: 0px; /* works just fine */
/* padding-right: 10px; */
padding-bottom: 10px; /* works just fine */
/* padding: 0, 0, 10px, 10px; */ /* this not working for some reason */
/* cursor: pointer; */
/* border: 2px solid #404040; */
overflow-wrap: break-word;
color: var(--text-color);
/* border: 1px solid blue; */
/* z-index:1; */
}
/*********TESTING A BETTER CLICKABLE DIV BOX ABOVE*******************/




.local-media-box {
  display: flex; /* Establishes a flex container */
  justify-content: center; /* Horizontally centers the items */
  /* align-items: center; */ /* Vertically centers the items (if height is defined) */
  /* Optional: Add a gap between images */
  gap: 7px;
  /* border: 2px solid #404040; */
}

.remote-media-box {
	display: flex;
	/* flex-direction: column; */
	/* width: 455px; */ /* is original size I tried, was good, but flex above is better. */
	/* width: 100%; */ /* takes up all browser window, is no good. */
	/* border: 2px solid green; */ /* this works if you want to see the border */
	/* padding: 10px 0px 0px 90px; */
	justify-content: center;
	align-items: flex-end;
	gap: 7px;
}

.echo-box {
	/* nothing here yet, here as placeholder for future styling. */

}

.reactions-box {
  display: relative;
  width: 100%;
  text-align: center;
  /* border: 2px solid #404040; */
}

.reactions-box-mini {
  display: relative;
  width: 100%;
  text-align: center;
  /* border: 2px solid #404040; */
}


.posted-content {
/* width: 88%; */
/* text-align: center; */ /* I dont like this one */
/* margin: auto; */ /* normally this is not commented out, trying comment out for a few days */
margin-top: 4px;
padding-left: 70px; /* works just fine */
/* padding-right: 10px; */
padding-bottom: 10px; /* works just fine */
/* padding: 0, 0, 10px, 10px; */ /* this not working for some reason */
/* cursor: pointer; */
/* border: 2px solid #404040; */
overflow-wrap: break-word;
}

.posted-echo-content {
/* width: 88%; */
/* width: 100%; */
/* text-align: center; */ /* I dont like this one */
margin: auto;
margin-top: 2px;
padding-left: 50px; /* works just fine */
padding-bottom: 10px; /* works just fine */
/* padding: 0 0 10px 10px; */
cursor: pointer;
overflow-wrap: break-word;
}

.posted-echo-content a {
/* font-size: 12px; */
}


.settingsbox{
border: 1px solid green;
background-color: var(--background);
padding: 10px;
color: var(--text-color);
}

.settingsline{
border: 1px solid green;
background-color: var(--background);
padding: 2px 10px 2px 10px;
color: var(--text-color);
}


/* The New Message Modal (background) */
.messagemodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */
  left: 50%;
  top: 28%; /* original was 25% */
  /* top: 30%; */
  /* padding-top: 100px; */ /* Location of the box */
  width: 50vw; /* Full width */
  /* height: 50vh; */ /* Full height */
  /* max-height: 1000px; */
    height: 70vh;
    /* border: 1px solid #eee; */
    border: 1px solid orange;
    /* border-radius: 4px; */
border-radius: 8px;
/* //box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); */ /* original border before matrix green */
box-shadow: 0 0 25px rgba(130, 241, 121, 0.12); /* looks like matrix green to me */
    padding: 10px;
    /* background-color: #444; */
    background-color: var(--card-bg);
  overflow-x: hidden;
  overflow-y: auto; /* Enable scroll if needed */
  /* background-color: rgb(0,0,0); */ /* Fallback color */
  /* background-color: rgba(0,0,0,0.4); */ /* Black w/ opacity */
  transform: translate(-50%, -25%);
/* clip-path: polygon(8% 1%, 100% 0%, 100% 100%, 8% 100%, 8% 63%, 0 45%, 8% 30%); */
/* clip-path: polygon(8% 0, 100% 0%, 100% 100%, 8% 100%, 8% 63%, 0 45%, 8% 30%); */
/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%, 8% 63%, 0 44%, 8% 30%); */
/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%, 8% 63%, 5% 45%, 8% 30%); */
/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 63%, 5% 45%, 8% 30%); */
/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 63%, 5% 45%, 0 30%); */
/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 63%, -19% 47%, 0 30%); */
/* clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
}


.viewfile-close {
  position: absolute;
  //top: 15px;
  //padding-top: 50px;
  right: 35px;
font-family: Arial, Helvetica, sans-serif;
  color: #f1f1f1;
  font-size: 57px;
  //font-weight: bold;
  transition: 0.3s;
}



.viewfile-close:hover,
.viewfile-close:focus {
  color: #bbb;
  /* color: red; */
  text-decoration: none;
  cursor: pointer;
}

.gallerylifeformshome {
  display: inline-block;
  margin: 5px;
  /* border: 1px solid #ccc; */
  /* float: left; */
  width: 60px;
  height: 100px;
}

div.gallerylifeformshome:hover {
  /* border: 1px solid #777; */
}

.gallerylifeformshome img {
  max-width: 60px;
  /* height: auto; */
  max-height: 60px;
}

.displaynamelifeformshome {
  font-size: 12px;
  color: var(--blue);
  padding: 1px 0px 10px 1px;
  text-align: center;
  float: left;
}

/* for how media appears in Posts/Comments/Replies/Messages/etc.. */
.imgmaxsize800 {
    /* size B */
    max-height:800px;
    /* max-width:800px; */
    max-width:100%;
    height:auto;
    width:auto;
}

.imgmaxsize700 {
    max-height:700px;
    max-width:100%;
    height:auto;
    width:auto;
}

.imgmaxsize600 {
    /* size CandAhalf */
    max-height:300px; /* max-height above this is just too in your face, I dont like it. */
    /* max-width:600px; */
    max-width:100%;
    height:auto;
    width:auto;
}

.imgmaxsize400 {
    /* size C */
    max-height:400px;
    max-width:400px;
    height:auto;
    width:auto;
}

.imgmaxsize330 {
    max-height:330px; /* 330 looks good for 2 local media */
    max-width:100%;
    height:auto;
    width:auto;
}

/*
.imgmaxsize310Making {
    max-height:310px; /* 310 looks good for 2 local media inside an echo */
    max-width:100%;
    height:auto;
    width:auto;
}
*/
.imgmaxsize300 {
    max-height:300px;
    max-width:300px;
    /* max-width:100%; */
    height:auto;
    width:auto;
}

.imgmaxsize230 {
    max-height:230px; /* 230 looks good for 3 local media */
    max-width:100%;
    height:auto;
    width:auto;
}

/*
.imgmaxsize210Making {
    max-height:210px; /* 210 looks good for 3 local media inside an echo */
    max-width:100%;
    height:auto;
    width:auto;
}
*/
.imgmaxsize200 {
    /* size D */
    max-height:200px;
    max-width:200px;
    height:auto;
    width:auto;
    /* width: 170px; */
    /* height: 170px; */
    /* object-fit: cover; */
}

.imgmaxsize170 {
    /* size D */
    /* max-height:200px; */
    /* max-width:200px; */
    /* height:auto; */
    /* width:auto; */
    width: 170px; /* 170 looks good for 4 local media */
    height: 170px;
    object-fit: cover;
}
/*
.imgmaxsize150Making {
    /* max-height:150px; */
    /* max-width:150px; */
    /* height:auto; */
    /* width:auto; */
    width: 150px; /* 150 looks good for 4 local media inside an echo */
    height: 150px;
    object-fit: cover;
}
*/
.imgmaxsize80 {
    /* size E or T (thumbnail) */
    /* note: Probably never will need this one since thumbs are all automatically max 80 */
    max-height:80px;
    max-width:80px;
    height:auto;
    width:auto;
}

.remotemediawrap425 {
	width: 425px; /* original size, good for just one. */
	/* width: 170px; */ /* looks good for four of them */
	background: var(--divhoverhighlight);
	/* border: 0px solid blue; */
	padding: 10px 10px 10px 10px;
}

.remotemediawrap330 {
	width: 330px; /* looks pretty good for two */
	/* width: 170px; */ /* looks good for four of them */
	background: var(--divhoverhighlight);
	/* border: 0px solid blue; */
	padding: 10px 10px 10px 10px;
}

.remotemediawrap210 {
	width: 200px; /* might be good for three */
	/* width: 170px; */ /* looks good for four of them */
	background: var(--divhoverhighlight);
	/* border: 0px solid blue; */
	padding: 10px 10px 10px 10px;
}

.remotemediawrap170 {
	/* width: 425px; */ /* original size, good for just one. */
	width: 170px; /* might look good for four of them */
	background: var(--divhoverhighlight);
	/* border: 0px solid blue; */
	padding: 10px 10px 10px 10px;
}

.remotemediatitle {
	padding: 0px 0px 10px; 10px;

}

.remotemediaiframe-container {
  overflow: hidden;
  /* padding-top: 56.25%; */ /* 16:9 Standard youtube ratio */
  /* padding-top: 100%; */ /* 1:1 */
  /* padding-bottom: 56.23%; */
  position: relative;
}

.remotemediaiframe-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   border: none;
}

.youtube_video__button {
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
}

.youtube_video__button:before {
    width:100%;
    height:100%;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: url(youtube-play-dark.svg) no-repeat center center; */
    /* background: url(images/Yt_icon_2017_print.png) no-repeat center center; */
    background: url(images/pngegg.png) no-repeat center center;
    /* background: url(images/pngeggGimpConvert.png) no-repeat center center; */
    background-size: 15%; 
}

.youtube_video__button:hover:before {
    /* background: url(Yt_icon_2017_print.png) no-repeat center center; */
    /* background: url(images/pngaaa.com-670668.png) no-repeat center center; */
    /* background: url(images/YouTube_play_button_icon.png) no-repeat center center; */
    background: url(images/pngegg.png) no-repeat center center;
    /* background: url(images/pngeggGimpConvert.png) no-repeat center center; */
    background-size: 16%; 
}

.playpausegifcontrol {

    position: relative;
    bottom: 35px;
    left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 4rem;
    //heigth: 4rem;
    width: 60px;
    height: 20px;
    //padding: 2rem;
    //border: 0.2rem solid var(--button-color);
    //border-radius: 50%;
    //filter: drop-shadow(0 0 3.1rem rgba(255,255,255, 0.8));
    border-radius: 25px;
    border: 2px solid #404040;
    color: white;
    background-color: #202020;
    padding: 1px;
    //z-index: 1;
}

.play {
    height: 0;
    width: 0;
    margin-left: calc(2 * 0.14 * var(--button-height));
    //margin-left: calc(2 * 0.14 * 8px);
    //margin-left: 17px;
    background: none;
    border: none;
    //border-top: var(--button-height) solid transparent;
    //border-bottom: var(--button-height) solid transparent;
    //border-left: calc(var(--button-height) * 2 * 0.86) solid var(--button-color);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: calc(8px * 2 * 0.86) solid #007bff;
    cursor: pointer;
    //z-index: 2;
    
}

.play:hover {
  //border-color: transparent transparent transparent #404040;
  border-color: transparent transparent transparent blue;
  //background: blue;
}

.pause {
  position: relative;
  background: none;
  border: none;
  //height: calc(var(--button-height) * 2);
  //width: calc(var(--button-height) * 2 * 0.86);
  height: calc(8px * 2);
  width: calc(8px * 2 * 0.86);
  cursor: pointer;
}

.pause:before, .pause:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 33%;
  //background: var(--button-color);
  background: #007bff;
}


.pause:hover:before, .pause:hover:after {
 //border-color: transparent transparent transparent blue;
 background: blue;
}

.pause:before {
  left: 0;
}
.pause:after {
  right: 0;
}


.lds-default,
.lds-default div {
  box-sizing: border-box;
}
.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6.4px;
  height: 6.4px;
  background: currentColor;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 36.8px;
  left: 66.24px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22.08px;
  left: 62.29579px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11.30421px;
  left: 51.52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7.36px;
  left: 36.8px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11.30421px;
  left: 22.08px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22.08px;
  left: 11.30421px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 36.8px;
  left: 7.36px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 51.52px;
  left: 11.30421px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62.29579px;
  left: 22.08px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66.24px;
  left: 36.8px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62.29579px;
  left: 51.52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 51.52px;
  left: 62.29579px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}


/* going to experiment with these into the #message-center id @media stuff in style-o.css */
/* see if they work as general @media instead of in specific pages.                       */
/* something wasnt looking right, so I put these back on the specific pages instead, but  */
/* will experiment more later, and even try it in the #message-center id @media stuff.    */
/* got this to work half way, the reactions-box and reactions-box-mini are working, but   */
/* the articleMaking.wrapper-2025 is not working. article is not a class or id, it is like*/
/* calling it body. still working on it, hopefully I dont have to add an id to article.   */
/* changed articleMaking to just article and set the tag in the pages and it worked.      */
@media screen and (min-width: 751px) {
  .reactions-box-mini { display:none; }
  .reactions-box { display:block; }
}


@media screen and (max-width: 750px) {
   article.wrapper-2025 { width: 100%; }
  .reactions-box-mini { display:block; }
  .reactions-box { display:none; }
}



/* Styling for 3 dots three dots mini menu dropdown */

.TDcmenudropdown-content {
  display: none;
  position: absolute;
/* left: auto; */
  right: 0; /* this one can move the dropdown to left so doesnt go off screen */
bottom: 25px; /* remove this if you want dropdown to go below instead */
  background-color: #f1f1f1;
  min-width: 150px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* border: 2px solid red; */
  /* z-index: 289; */
  z-index: 999;
}


.TDcmenudropdown-content a {
  color: black;
  /* padding: 12px 16px; */
  text-decoration: none;
  display: block;
}

.TDcmenudropdown-content span {
  color: black;
  padding: 3px 17px 3px 5px;
  text-decoration: none;
  cursor:pointer;
  display: block;
}

.TDcmenudropdown-content span:hover {background-color: #ddd;}
.TDcmenudropdown-content btn:hover {background-color: #ddd;}

                .dropbtnTD {
                    background-color: #4CAF50;
                    position: fixed;
                    color: white;
                    font-size: 16px;
                    border: none;
                    cursor: pointer;
                }

                .dropbtnTD:hover, .dropbtnTD:focus {
                    background-color: #3e8e41;
                }

                .dropdownTD {
                    position: absolute;
                    display: inline-block;
                    right: 0.4em;
                }

                .dropdownTD-content {
                    display: none;
                    position: relative;
                    margin-top: 60px;
                    background-color: #f9f9f9;
                    min-width: 160px;
                    overflow: auto;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    z-index: 1;
                }

                .dropdownTD-content span {
                    color: black;
                    /* padding: 12px 16px; */
                    text-decoration: none;
                    display: block;
                }

                .dropdownTD span:hover {background-color: #f1f1f1}

                .showTD {display:block;}

.myDropdownTD {
  position: relative;
  display: inline-block;
}

.threedotscommentmenudropdown {
  position: relative;
  display: inline-block;
  z-index: 61;
}



/* end styling for 3 dots three dots mini menu dropdown */


/* styling for the comments sort button under main post page */

/* the comment sort dropdown stuff */
.commentssortaddcommentbutton {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  height: 50px;
  padding-left: 25px;
  /* border: 2px solid blue; */
}

.commentsortdropbtn:hover, .commentsortdropbtn:focus {
  background-color: #2980B9;
}

.commentsortdropdown {
  position: relative;
  display: inline-block;
}

.commentsortdropdown-content {
  display: none;
  position: absolute;
/* margin-top: 1px; */
/* bottom: 100%; */
/* bottom: 50px; */ /* if you want to put dropup menu instead */
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.commentsortdropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.commentsortdropdown a:hover {background-color: #ddd;}

/* NOTE: WE DO NEED THIS .showsort
   because when the sort button is clicked, the javascript adds the showsort class
   so that the sort list displays.
*/
.showsort {display: block;}

/* end styling for sort button for comments under main post page */

/* used on profile.php */
.profilepicture {
max-width: 200px;
max-height: 200px;
}


/* used on profile.php */
.memberactionsmenu {
	/* top: 0; */
	/* border: dashed; */
	display: flex;
	/* background: gray; */
	background: transparent;
	color:var(--element2);
	/* color: #3182ce; */
	/* color:var(--blue); */
	height: 25px;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	/* margin-top: auto; */
	/* padding-bottom: 20px; */
}

.memberactionsmenu button {
	border: none;
	background: transparent;
	/* width: 67px; */
        float: left;
        display: block;
        /* color: #eeeeee; */
	/* color:var(--blue); */
	/* color: blue; */
	color: #3182ce;
        text-align: center;
        padding: 0px 0px 0px 0px;
        text-decoration: none;
        font-size: 12px;
	justify-content: center;
	cursor: pointer;
}

.memberactionsmenu button:hover {
	/* color: #1c87c9; */
	color: #4299e1;
}

/* used on group-profile.php */
.groupactionsmenu {
	/* top: 0; */
	/* border: dashed; */
	display: flex;
	/* background: gray; */
	background: transparent;
	color:var(--element2);
	/* color: #3182ce; */
	/* color:var(--blue); */
	height: 30px;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	/* margin-top: auto; */
	/* padding-bottom: 20px; */
	gap: 10px;
}

.groupactionsmenu button {
	/* border: none; */
	/* background: transparent; */
	/* width: 67px; */
        float: left;
        display: block;
        /* color: #eeeeee; */
	/* color:var(--blue); */
	/* color: blue; */
	color: #3182ce; /* current default */
	/* color: green; */
        text-align: center;
        padding: 0px 0px 0px 0px;
        text-decoration: none;
        font-size: 12px;
	justify-content: center;
	cursor: pointer;
}

.groupactionsmenu button:hover {
	/* color: #1c87c9; */
	color: #4299e1;
}

/* used on profile.php */
.boardsnavigation {
	top: 57px;
	/* border: 1px dashed gray; */
	/* border: 1px solid #e0e0e0; */
	/* border: 1px solid rgba(0,0,0, 0.1); */ /* 10% opaque black - way too light and weird */
	/* box-shadow: 0 0 0 1px #e0e0e0; */ /* looks exactly the same as 1px solid #e0e0e0; */
	/* outline: 1px solid #e0e0e0; */ /* looks exactly the same as 1px solid #e0e0e0; also. */
	/* border: 1px dotted #cccccc; */ /* looks almost identical to 1px dashed gray; */
	/* border: 1px solid #808080; */ /* lightgray */ /* best so far */
	border: 1px solid #333333; /* This is even slightly better than #808080. */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	/* position: relative; */
	/* left: -20px; */
	display: flex;
	flex-direction: row;
	width: 100%;
	
	/* background: blue; */
	background: var(--card-bg);
	color:var(--element2);
	/* color:var(--blue); */
	min-height: 30px;
	position: sticky;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 5px;
	/* gap: 50px; */
	z-index: 99;
}

.boardsnavigation a {
        /* float: left; */
        /* display: block; */
        /* color: #eeeeee; */
	/* color:var(--blue); */
	color: #3182ce;
        /* text-align: center; */
        /* padding: 0px 18px 0px 40px; */
        text-decoration: none;
        font-size: 14px;
	cursor: pointer;
      }

.boardsnavigation a:hover {
        /* color: #1c87c9; */
	color: #4299e1;
      }


.boardsnavigation-mini {
	top: 57px;
	/* border: 1px dashed gray; */
	/* border: 1px solid #e0e0e0; */
	/* border: 1px solid rgba(0,0,0, 0.1); */ /* 10% opaque black - way too light and weird */
	/* box-shadow: 0 0 0 1px #e0e0e0; */ /* looks exactly the same as 1px solid #e0e0e0; */
	/* outline: 1px solid #e0e0e0; */ /* looks exactly the same as 1px solid #e0e0e0; also. */
	/* border: 1px dotted #cccccc; */ /* looks almost identical to 1px dashed gray; */
	/* border: 1px solid #808080; */ /* lightgray */ /* best so far */
	border: 1px solid #333333; /* This is even slightly better than #808080. */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	/* position: relative; */
	/* left: -20px; */
	display: flex;
	flex-direction: row;
	width: 100%;

	/* background: blue; */
	background:var(--card-bg);
	color:var(--element2);
	/* color:var(--blue); */
	min-height: 30px;
	position: sticky;
	justify-content: space-around;
	align-items: center;
	/* gap: 50px; */
	z-index:99;
}

.boardsnavigation-mini a {
        /* float: left; */
        /* display: block; */
        /* color: #eeeeee; */
	/* color:var(--blue); */
	color: #3182ce;
        /* text-align: center; */
        /* padding: 0px 18px 0px 40px; */
        text-decoration: none;
        font-size: 14px;
	cursor: pointer;
      }

.boardsnavigation-mini a:hover {
        /* color: #1c87c9; */
	color: #4299e1;
      }

@media screen and (min-width: 1161px) {
  .boardsnavigation-mini { display:none; }
  /* .boardsnavigation { display:block; } */
}


@media screen and (max-width: 1160px) {
  /* .boardsnavigation-mini { display:block; } */
  .boardsnavigation { display:none; }
}


/* -------------------------- NEW Boards Navigation -------------------------------- */

/* Base navigation container */
.boardnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  /* background-color: #ffffff; */
  background-color: var(--nav-bg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* Modern safe area spacing for iPhones with notches */
  padding-bottom: env(safe-area-inset-bottom, 0px); 
}

/* Individual navigation link items */
.boardnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  height: 100%;
  /* color: #777777; */
  color: var(--text-color);
  text-decoration: none;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  transition: color 0.2s ease-in-out;
}

/* Vector icon configurations */
.boardnav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* Text labels under icons */
.boardnav-label {
  /* font-size: 11px; */ /* original with the sample code */
  font-size: 0.625rem; /* same as 10px */
  font-weight: 500;
}

/* Active and Hover states */
.boardnav-item:hover,
.boardnav-item.active {
  color: #007aff; /* System blue accent color */
}

/* Responsive Rule: Hide or style differently on Desktop layouts */
@media (min-width: 1000px) {
  .boardnav {
    /* Hide on larger displays if you feature a top navigation bar instead */
    display: none;
    
    /* Optional Alternative: Turn it into a floating center bar on larger viewports */
/*
    max-width: 480px;
    margin: 0 auto;
    border-radius: 16px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
*/
  } /* close @media .boardnav */
} /* close @media */
/* ------------------------ END NEW Boards Navigation ------------------------------ */


/* statsbox is on profile page and group profile page */
.statsbox {
margin-top: 15px;
padding-left: 10px;
font-size: 14px;
}

.groupstatsbox {
padding: 10px;
}

/* I think this one is mainly for member profile page, but maybe we can use it elsewhere also. */
.detailtype {
color:green; /* current default */
}

/* I think this one is mainly for member profile page, but maybe we can use it elsewhere also. */
.details {
color: var(--text-color); /* current default */
}


.fixedmiddle { position: fixed; width: 52%; }
.undertopofmiddlecolumn { height: 750px; overflow-y: scroll; overflow-x: hidden; background:var(--sirius); padding: 15px; }
/*
.topofmiddlecolumn { top: 0; background: transparent; color:var(--element2); height: 25px; padding: 5px 0px 5px 10px; z-index: 31; }
.topofmiddlecolumn a { float: left; display: block; color:var(--blue); text-align: center; padding: 0px 18px 0px 40px; text-decoration: none; font-size: 18px; }
*/

.topofmiddlecolumn { top:0; display:flex; background:transparent; height:25px; justify-content:center; align-items:center; }
.topofmiddlecolumn a { color:var(--blue); }

@media screen and (max-width: 600px) {
  .fixedmiddle { position: static; width: 100%; top: 10px; }
  .undertopofmiddlecolumn {height: 100%; padding:5px; overflow:hidden; }
.topofmiddlecolumn {height:50px; position:sticky; top:40px; z-index:99; background:var(--card-bg);}
  /* .messagesarea { padding: 20px 5px 0px 5px; } */
  /* .mediawrapswrap { padding: 10px 0px 0px 0px; } */
  /* .innercentre { padding: 0px; } */
  /* .messagesarea { padding: 0px 0px 0px 0px; } */
  /* .mediawrapswrap { width: 355px; } */
  /* .mediawrap { width: 325px; } */
  /* .mediaiframe-container iframe { width: 320px; overflow-x: hidden; } */
  #middleonly .pagecontainer .middlecolumn {width: 95%; }
  #wholepage .pagecontainer .middlecolumn {width: 95%;}
}

/* Layouts Below Here */

/* middleonly */
#middleonly .pagecontainer { display: flex; justify-content: center; height: 100vh; }
#middleonly .middlecolumn { padding-top: 15px; width: 50%; }

#wholepage .pagecontainer { display: flex; justify-content: center; height: 100vh; }
#wholepage .middlecolumn { padding-top: 15px; width: 90%; margin: auto; }

#threecolumnleftrightsticky .middlecolumn {
  /* width: 56%; */
  /* line-height: 1.6; */
  /* margin: 1em; */
  /* margin: auto; */
  /* min-height: 1000px; */
  /* overflow-y: scroll; */
  margin-left: 24%;
  margin-right: 24%;
}


#threecolumnleftrightsticky .leftcolumn {
  width: 20%;
  /* background-color: #003; */
  bottom: 1em;
  color: white;
  /* left: 1%; */
  left: 45px;
  overflow: hidden;
  /* padding: 1em; */
  padding: 3px 3px 1px 3px;
  position: fixed;
  /* right: 80%; */
  /* top: 1em; */
  top: 65px;
  overflow-x: hidden;
}

#threecolumnleftrightsticky .rightcolumn {
  width: 20%;
  /* background-color: #003; */
  bottom: 1em;
  color: white;
  /* right: 1%; */
  right: 45px;
  overflow: auto;
  /* padding: 1em; */
  padding: 3px 3px 1px 3px;
  position: fixed;
  /* left: 78.7%; */
  /* left: 80%; */
  /* top: 1em; */
  top: 65px;
  overflow-x: hidden;
}




#twocolumnleftsticky01 .leftcolumn {
  /* float: left; */
  width: 20%;
  bottom: 1em;
  left: 45px;
  overflow: auto;
  padding: 3px 3px 1px 3px;
  position: fixed;
  top: 65px;
  /* padding-left: 20px; */
}

/* ORIGINAL
#twocolumnleftsticky01 .rightcolumn {
  width: 73%;
  bottom: 1em;
  right: 45px;
  overflow: auto;
  padding: 3px 3px 1px 3px;
  postition: fixed;
  top: 65px;
  margin-left: 24%;
*/
  /* overflow-y: hidden; */
/*
}
*/

#twocolumnleftsticky01 .rightcolumn {
  width: 73%;
  /* line-height: 1.6; */
  /* margin: 1em; */
  /* margin: auto; */
  /* min-height: 1000px; */
  /* overflow-y: scroll; */
  margin-left: 24%;
  /* margin-right: 24%; */
}

/*
#twocolumnleftsticky01 .rightcolumn {
  width: 73%; */
  /* line-height: 1.6; */
  /* margin: 1em; */
  /* margin: auto; */
  /* min-height: 1000px; */
  /* overflow-y: scroll; */
/*
  margin-left: 24%;
*/
  /* margin-right: 24%; */
  /* overflow-y: hidden; */
/*
}
*/

/* profilemain - btw check style-o-profile-default.css */
#profilemain .leftcolumn {
	/* position: -webkit-sticky; */
	/* position: sticky; */
	/* bottom: 0; */
	float: left;
	width: 20%;
	/* padding-right: 20px; */
}
#profilemain .middlecolumn {margin: auto; width: 56%;}
/* #profilemain .rightcolumn {float: right; width: 20%; padding-left: 20px;} */
#profilemain .rightcolumn {float: right; width: 20%;}

/* #profilemain Responsive layout */
@media screen and (max-width: 600px) {
#profilemain .leftcolumn { width: 100%; }
/* #profilemain .rightcolumn { width: 100%; padding-left: 0; } */
#profilemain .rightcolumn { width: 100%; }
#profilemain .middlecolumn { width: 100%; }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:768px) {
#threecolumnleftrightsticky .leftcolumn {
    position: static;
    width: auto;
    left: 0;
    margin-bottom: 15px;
  }
#threecolumnleftrightsticky .rightcolumn {
    position: static;
    width: auto;
    right: 0;
    margin-bottom: 15px;
  }
#threecolumnleftrightsticky .middlecolumn {
    position: static;
    width: 100%;
    margin: 0;
    margin-left: 0;
    margin-right: 0;
  }

  #twocolumnleftsticky01 .leftcolumn {
    position: static;
    width: auto;
    left: 0;
    margin-bottom: 15px;
  }
  #twocolumnleftsticky01 .rightcolumn {
    position: static;
    width: auto;
    /* height: 100%; */
    margin-left: 0;
    margin-bottom: 15px;
  }

}