*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  font: 16px/1.15 "Roboto", sans-serif;
}

/* #0B4450 */
:root {
    --clr-primary: #335280;
    --clr-on-primary: #FFFFFF;
    --clr-primary-container: #BACBE6;
    --clr-on-primary-container: #142133;
    --clr-secondary: #649BA8;
    --clr-on-secondary: #FFFFFF;
    --clr-secondary-container: #C8E0E6;
    --clr-on-secondary-container: #1F2F33;
    --clr-tertiary: #ECD06F;
    --clr-on-tertiary: #333333;
    --clr-tertiary-container: #E6DDBF;
    --clr-on-tertiary-container: #332D18;
    --clr-error: #B3261E;
    --clr-on-error: #FFFFFF;
    --clr-error-container: #E6ACA9;
    --clr-on-error-container: #330B09;
    --clr-background: #fcfcfc;
    --clr-on-background: #313233;
    --clr-surface: #fcfcfc;
    --clr-on-surface: #313233;
    --clr-surface-variant: #dde0e6;
    --clr-on-surface-variant: #5a5f66;
    --clr-outline: #878e99;
    --clr-primary-dark: #A8C1E6;
    --clr-on-primary-dark: #1F314C;
    --clr-primary-container-dark: #294166;
    --clr-on-primary-container-dark: #BACBE6;
    --clr-secondary-dark: #BCDDE6;
    --clr-on-secondary-dark: #2E464C;
    --clr-secondary-container-dark: #3D5E66;
    --clr-on-secondary-container-dark: #C8E0E6;
    --clr-tertiary-dark: #E6D9AF;
    --clr-on-tertiary-dark: #4C4324;
    --clr-tertiary-container-dark: #665A30;
    --clr-on-tertiary-container-dark: #E6DDBF;
    --clr-error-dark: #E69490;
    --clr-on-error-dark: #4C100D;
    --clr-error-container-dark: #661511;
    --clr-on-error-container-dark: #E6ACA9;
    --clr-background-dark: #313233;
    --clr-on-background-dark: #e3e4e6;
    --clr-surface-dark: #313233;
    --clr-on-surface-dark: #e3e4e6;
    --clr-surface-variant-dark: #5a5f66;
    --clr-on-surface-variant-dark: #d9dee6;
    --clr-outline-dark: #a5aab3;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-color: var(--clr-surface) !important; 
}

body {
  height: 100%;
  background-color: var(--clr-primary) !important; 
  font: 16px/1.15 Tahoma, sans-serif;
  color: var(--clr-on-surface);
  line-height: 1.5;
  /* overflow-x: hidden; */
}

body * {
  font: 16px/1.15 Tahoma, sans-serif;
}
body > div, body > div.articlebanner-in {
  /* color: var(--clr-on-surface); */
  background-color: var(--clr-surface); 
}
body > div.subcontainerbox, body > div.subcontainerbox-center, body > div.articlebanner-in{
  border-radius: 0px;
}

#navbar-container, #prof_navbar_container, #home_navbar_container{
  background-color: transparent !important;
}

body p {
  line-height:22px;
}

/* for navbars */
.navbar-custom * {
  color: var(--clr-on-primary);
}

.navbar-home-custom *, .navbar-prof-custom * {
  color: var(--clr-on-surface-dark);
}

body>div {
  line-height: 1.5;
}

input[type="checkbox"]:checked {
  background-color: var(--clr-secondary);
  accent-color: var(--clr-secondary-container-dark);
}

#setting {
  display: block;
  /* Show navbar by default */
}


@media (max-width: 768px) {

  /* Adjust the width as needed */
  #setting {
    display: none;
  }

  #navbarcontainer {
    width: 100%;
  }


}

.navbar {
  background-color: #0b455000 !important;
}

nav ul {
  margin: 0 10px;
}



nav ul li {
  margin: 0 7px;
}

.separation-bar {
  height: 15px;
  width: 100%;
  border-bottom: 0.8px solid var(--clr-outline);
  margin-bottom: 10px;
}

.separation {
  height: 5px;
  width: 100%;
  margin-bottom: 10px;

}

.link {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  display: block;
  padding: 15px;
}

.linkbox {
  position: relative;
  /* padding: 15px; */
  margin-bottom: 2px;
  border-radius: 0.5rem;
  text-align: center;
  color: var(--clr-on-secondary);
  width: 100%;
  background-color: var(--clr-secondary);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0.7rem 0rem rgba(from var(--clr-background-dark) r g b / 20%);
  padding: 10px;
  transition: 0.3s;
}

.linkbox:hover {
  /* background-color: var(--clr-secondary);
  color: var(--clr-on-secondary); */
  opacity: 0.8;
  /* box-shadow: 0 0 0.3rem -0.2rem var(--clr-background-dark); */
}

.linkbox:active {
  transform: translateY(1px);
  box-shadow: 0 0 0.3rem -0.2rem rgba(from var(--clr-background-dark) r g b / 20%);
}

.linkbox:hover>.link {
  /* padding:30px 15px 30px 15px; */
  transition: 0.1s;
}

.questionbox {
    color: rgb(10, 13, 69);
    transition-duration: 0.3s;
    padding:20px;
    margin:10px;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    box-shadow:  5px 5px rgba(0, 0, 0, 0.3);
    display:flex;
    text-align: center;
}


/*text styles*/

.tagranking {
  font-size: 2em;
  color: rgb(47, 63, 19);
  font-weight: bold;
}

.tagranking p {
  font-size: 1.5em;
  color: rgb(47, 63, 19);
  font-weight: bold;
  display: inline;
}


.headertext {
  font-size: 3em;
  color: black;
  text-align: left;
  margin-bottom: 15px;

}

.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* .navbar-custom {
    background-color: white;
}

.navbar-prof-custom {
    background-color: rgb(57, 56, 56);

} */

.navbar-prof-forum-custom {
  background-color: rgb(33, 32, 32);
}

.keyword-bubble {
  padding: 5px;
  width: auto;
  height: 30px;
  background-color: rgb(0, 98, 255);
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgb(117, 145, 238);
  border-radius: 10px;
  margin: 5px;

}

.kw-tag {
    background: var(--clr-tertiary-container);
    color: var(--clr-on-tertiary-container);
    border-radius: 16px;
    padding: 6px 10px;
    margin: 4px 6px 4px 0;
    font-size: 0.85rem;
    display:inline-block;
}

/*buttons*/


.mybtn {
  --btn-bg: #0B4450;
  --btn-bg-hover: #126f82;
  --btn-text: #ffffff;
  --btn-shadow: 5px 5px 12px rgba(6, 39, 46, 0.45);
  --btn-shadow-hover: 8px 8px 18px rgba(6, 39, 46, 0.4);
  --btn-shadow-active: 3px 3px 8px rgba(6, 39, 46, 0.5);
  --btn-focus: 0 0 0 3px rgba(18, 111, 130, 0.45);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  min-width: 44px;      /* touch target */
  min-height: 36px;     /* slightly taller for better tap */
  line-height: 1.1;

  background-color: var(--clr-secondary);
  color: var(--clr-on-secondary);

  border: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);


  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.mybtn:hover {
  background-color: var(--clr-secondary-container);
  /* box-shadow: var(--btn-shadow-hover); */
  transform: translateY(-1px);
}

.mybtn:active {
  transform: translateY(0);
  opacity: 0.8;
  /* box-shadow: var(--btn-shadow-active); */
}

.mybtn-md {
			text-align: center;
			color: var(--clr-on-secondary);
			background-color: var(--clr-secondary);
			border-radius: 0.4rem;
			border: transparent;
			/* margin: 5px;
			padding: 3px; */
			margin:20 0; padding: 10px;
			transition-duration: 0.3s;
			box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);
		}

.mybtn-md:hover {
  background-color: var(--clr-secondary-dark);
  /* color: var(--clr-on-secondary-container); */
}

.mybtn-md:active{
  opacity: 0.7;
  box-shadow: 0 0 0.3rem -0.2rem var(--clr-background-dark);
}

.mybtn-md:focus {
  outline: none;
}

.mybtn-md:focus-visible {
  box-shadow: var(--btn-shadow-hover), var(--btn-focus);
}

.mybtn-md:disabled,
.mybtn-md[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--btn-shadow);
}

.mybtn-primary {
  /* Button styling variables */
  --btn-shadow: 0 0 0.3rem -0.1rem rgba(6, 48, 57, 0.25);
  --btn-shadow-hover: 0 0 0.3rem -0.1rem rgba(6, 48, 57, 0.3);
  --btn-shadow-active: 0 0 0.3rem -0.1rem rgba(6, 48, 57, 0.35);
  --btn-focus: 0 0 0 3px rgba(6, 48, 57, 0.4);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 10px 16px;
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: var(--clr-primary);
  color: var(--clr-on-primary);
  font-weight:bold;

  border: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.mybtn-primary:hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.mybtn-primary:active {
  transform: translateY(0);
  opacity: 0.8;
  box-shadow: var(--btn-shadow-active);
}

.mybtn-primary:focus {
  outline: none;
}

.mybtn-primary:focus-visible {
  box-shadow: var(--btn-shadow-hover), var(--btn-focus);
}

.mybtn-primary:disabled,
.mybtn-primary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}


.mybtn-secondary {

  /* Button styling variables */
  --btn-bg: #649BA8;
  --btn-bg-hover: #7AB0BC;
  --btn-text: #FFFFFF;
  --btn-shadow: 0 0 0.3rem -0.1rem rgba(100, 155, 168, 0.25);
  --btn-shadow-hover: 0 0 0.3rem -0.1rem rgba(100, 155, 168, 0.3);
  --btn-shadow-active: 0 0 0.3rem -0.1rem rgba(100, 155, 168, 0.35);
  --btn-focus: 0 0 0 3px rgba(100, 155, 168, 0.4);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;

  padding: 10px 16px;
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: var(--clr-secondary);
  color: var(--clr-on-secondary);

  border: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.mybtn-secondary:hover {
  background-color: var(--clr-secondary-container);
  color: var(--clr-on-secondary-container);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.mybtn-secondary:active {
  transform: translateY(0);
  opacity: 0.8;
  box-shadow: var(--btn-shadow-active);
}

.mybtn-secondary:focus {
  outline: none;
}

.mybtn-secondary:focus-visible {
  box-shadow: var(--btn-shadow-hover), var(--btn-focus);
}

.mybtn-secondary:disabled,
.mybtn-secondary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.mybtn-outline {
  --btn-bg-hover: rgba(126, 148, 153, 0.1);
  --btn-shadow: 0 0 0.3rem -0.1rem rgba(126, 148, 153, 0.15);
  --btn-shadow-hover: 0 0 0.3rem -0.1rem rgba(126, 148, 153, 0.2);
  --btn-shadow-active:0 0 0.3rem -0.1rem rgba(126, 148, 153, 0.25);
  --btn-focus: 0 0 0 3px rgba(126, 148, 153, 0.2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: var(--clr-outline);


  padding: 9px 15px; /* Slightly less padding to account for border */
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: transparent;
  backdrop-filter: blur(4px);

  border: 1px solid var(--clr-outline);
  border-radius: 0.4rem;
  box-shadow: none; /* Outline buttons typically have minimal/no shadow */

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.mybtn-outline:hover {
  background-color: rgba(126, 148, 153, 0.08);
  border-color: var(--clr-primary-dark);
  color: var(--clr-on-primary);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.mybtn-outline:active {
  background-color: rgba(126, 148, 153, 0.15);
  border-color: var(--clr-primary-container-dark);
  transform: translateY(0);
  opacity: 0.8;
  box-shadow: var(--btn-shadow-active);
}

.mybtn-outline:focus {
  outline: none;
}

.mybtn-outline:focus-visible {
  border-color: var(--clr-primary-dark);
  box-shadow: 0 0 0 3px rgba(138, 213, 230, 0.3);
}

.mybtn-outline:disabled,
.mybtn-outline[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  border-color: rgba(126, 148, 153, 0.4);
  color: rgba(126, 148, 153, 0.6);
}

/* Alternative: Ghost button - even more minimal */
.mybtn-ghost {
  /* Ghost button variables */
  --clr-ghost: #7e9499;
  --clr-ghost-hover: #08404C;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 10px 16px;
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: transparent;
  color: var(--clr-ghost);

  border: none;
  border-radius: 0.4rem;
  box-shadow: none;

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    color 160ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.mybtn-ghost:hover {
  background-color: rgba(126, 148, 153, 0.08);
  color: var(--clr-ghost-hover);
  transform: translateY(-1px);
}

.mybtn-ghost:active {
  background-color: rgba(126, 148, 153, 0.15);
  transform: translateY(0);
  opacity: 0.8;
}

.mybtn-ghost:focus {
  outline: none;
}

.mybtn-ghost:focus-visible {
  box-shadow: 0 0 0 2px rgba(138, 213, 230, 0.3);
}

.mybtn-ghost:disabled,
.mybtn-ghost[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  color: rgba(126, 148, 153, 0.6);
}

.mybtn-tertiary {
  /* Tertiary color variables */
  
  /* Button styling variables */
  --btn-bg: #e0c253;
  --btn-bg-hover: #F2DE8F;
  --btn-text: #FFFFFF;
  --btn-shadow: 0 0 0.3rem -0.1rem rgba(236, 208, 111, 0.3);
  --btn-shadow-hover: 0 0 0.3rem -0.1rem rgba(236, 208, 111, 0.35);
  --btn-shadow-active: 0 0 0.3rem -0.1rem rgba(236, 208, 111, 0.4);
  --btn-focus: 0 0 0 3px rgba(236, 208, 111, 0.5);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 10px 16px;
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: var(--clr-tertiary);
  color: var(--clr-on-tertiary);
  font-weight: bold;

  border: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0.3rem -0.1rem rgba(51, 45, 24, 0.25);

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    opacity 120ms ease,
    color 160ms ease;
}

.mybtn-tertiary:hover {
  background-color: var(--clr-tertiary-container);
  color: var(--clr-on-tertiary-container);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.mybtn-tertiary:active {
  transform: translateY(0);
  opacity: 0.8;
  box-shadow: var(--btn-shadow-active);
}

.mybtn-tertiary:focus {
  outline: none;
}

.mybtn-tertiary:focus-visible {
  box-shadow: var(--btn-shadow-hover), var(--btn-focus);
}

.mybtn-tertiary:disabled,
.mybtn-tertiary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  background-color: rgba(236, 208, 111, 0.5);
}

.mybtn-surfacevar {
  --btn-bg: var(--clr-primary);
  --btn-bg-hover: #d9e3e6;
  --btn-text: #313333;
  --btn-shadow: 0 0 0.3rem -0.1rem rgba(49, 51, 51, 0.15);
  --btn-shadow-hover: 0 0 0.3rem -0.1rem rgba(49, 51, 51, 0.2);
  --btn-shadow-active: 0 0 0.3rem -0.1rem rgba(49, 51, 51, 0.25);
  --btn-focus: 0 0 0 3px rgba(217, 227, 230, 0.5);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  min-width: 44px;
  min-height: 36px;
  line-height: 1.1;

  background-color: var(--clr-primary);
  color: var(--clr-on-primary);

  border: 1px solid rgba(49, 51, 51, 0.1);
  border-radius: 0.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  margin: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.mybtn-surfacevar:hover {
  background-color: var(--clr-surface-variant);
  color: var(--clr-on-surface-variant);
  border-color: rgba(84, 99, 102, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.mybtn-surfacevar:active {
  background-color: color-mix(in srgb, var(--clr-surface-variant) 90%, black 10%);
  transform: translateY(0);
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mybtn-surfacevar:focus {
  outline: none;
}

.mybtn-surfacevar:focus-visible {
  border-color: var(--clr-surface-variant);
  box-shadow: 0 0 0 3px rgba(217, 227, 230, 0.5);
}

.mybtn-surfacevar:disabled,
.mybtn-surfacevar[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  background-color: rgba(251, 252, 252, 0.7);
  color: rgba(49, 51, 51, 0.5);

}



/* mybtn-outline-primary: uses light theme primary */
.mybtn-outline-primary {
  --clr-outline: var(--clr-primary);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.mybtn-outline-primary:hover {
  background-color: color-mix(in srgb, var(--clr-primary) 10%, transparent);
  border-color: var(--clr-primary);
  color: var(--clr-on-primary);
}

.mybtn-outline-primary:active {
  background-color: color-mix(in srgb, var(--clr-primary) 18%, transparent);
  border-color: var(--clr-primary-container);
}

.mybtn-outline-primary:focus-visible {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 30%, transparent);
}

/* Disabled inherits base styles; no extra rules needed */


/* mybtn-outline-primary-dark: uses dark theme primary */
.mybtn-outline-primary-dark {
  --clr-outline: var(--clr-primary-dark);
  color: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}

.mybtn-outline-primary-dark:hover {
  background-color: color-mix(in srgb, var(--clr-primary-dark) 10%, transparent);
  border-color: var(--clr-primary-dark);
  color: var(--clr-on-primary-dark);
}

.mybtn-outline-primary-dark:active {
  background-color: color-mix(in srgb, var(--clr-primary-dark) 18%, transparent);
  border-color: var(--clr-primary-container-dark);
}

.mybtn-outline-primary-dark:focus-visible {
  border-color: var(--clr-primary-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary-dark) 30%, transparent);
}

.tagbubble {
  padding: 5px;
  width: auto;
  height: 30px;
  background-color: #121ab6;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(73, 82, 207, 0.5);
  border-radius: 15px;
  margin: 5px;
}

.mynavbtn {
  padding: 10px;
  width: auto;
  height: 50px;
  background-color: #321b5a;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(50, 27, 90, 0.5);
  border-radius: 20px;
  font-size: 1.5em
}

.mybtn2 {
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  color: white;
  background-color: #0B4450;
}

.transparent-btn {
  color: black;
  border: none;
  background-color: transparent;
  border-radius: 6px;
  margin: 5px;
}


@media (max-width: 600px) {
  .mynavbtn {
    padding: 5px;
    /* Reduce padding */
    height: 40px;
    /* Reduce height */
    font-size: 1em;
    /* Smaller font size */
  }
}

@media (max-width: 400px) {
  .mynavbtn {
    padding: 3px;
    /* Further reduce padding */
    height: 20px;
    /* Further reduce height */
    font-size: 0.6em;
    /* Smaller font size */
  }
}

.mynavbtn:hover {
  padding: 10px;
  width: auto;
  height: 55px;
  background-color: #4e239a;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(50, 27, 90, 0.5);
  border-radius: 20px;
  transition: 0.3s;
}

.mybigbtn {
  padding: 10px;
  width: auto;
  height: 50px;
  background-color: #321b5a;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(50, 27, 90, 0.5);
  border-radius: 20px;
  font-size: 1.5em
}

.mybigbtn:hover {
  padding: 10px;
  width: auto;
  height: 55px;
  background-color: #4e239a;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(50, 27, 90, 0.5);
  border-radius: 20px;
  transition: 0.3s;
}



/*container boxes*/

.containerbox {
  position: relative;
  padding: 10px;
  margin: 10px;
  text-align: center;
  color: black;
  width: 100%;
  background-color: transparent;

}

.containerbox2 {
  position: relative;
  padding: 5px;
  margin: 0px;
  text-align: center;
  color: black;
  width: 100%;
  background-color: transparent;
  margin-bottom: 10px;

}

.containerbox-offwhite {
    width: 100%;
    max-width: 100%;
    transition-duration: 0.3s;
    background-color: white;
    /* border: thin solid currentColor; */
    padding: 30px;
    border-radius: 0.4rem;
    backdrop-filter: blur(10px);
    gap: 10px;
    box-shadow: 0 0 0.7rem 0rem rgba(from var(--clr-background-dark) r g b / 20%);
}

.containerbox-offwhite .data-ele {
  text-align:right;
  font-size: 3rem;
}

.contentbox {
  position: relative;
  padding: 15px;
  /* margin: 10px; */
  /* margin-left: 5vw;
  margin-right: 5vw; */
  border-radius: 5px;
  text-align: center;
  color: black;
  width: 100%;
  /* border: 1px solid grey; */

}

.right-align-container {
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap to the next line */
  justify-content: flex-start;
  /* Align items to the left */
  gap: 10px;
  /* Space between items */
}

.right-align-box {
  flex: 0 1 30%;
  /* Each box takes up 30% of the width */
  box-sizing: border-box;
  /* Includes padding in width calculation */
  /* padding: 10px; */
}

.right-align-box-allflags {
  flex: 0 1 45%;
  /* Each box takes up 30% of the width */
  box-sizing: border-box;
  /* Includes padding in width calculation */
  padding: 10px;
}

.right-align-tag {
  width: 45%;
  /* Each box takes up 30% of the width */
  box-sizing: border-box;
  /* Includes padding in width calculation */
  padding: 10px;
}

.modal * {
  font-size: 0.9rem;
}

/* The box */
.lecture-card {
  width: 100%;
  max-width: 100%;
  transition-duration: 0.3s;
  background-color: white;
  /* border: thin solid currentColor; */
  border-radius: 0.4rem;
  backdrop-filter: blur(10px);
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  gap: 10px;
  box-shadow: 0 0 0.7rem 0rem rgba(from var(--clr-background-dark) r g b / 20%);
}

.lecturecard-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
flex-direction: column;
  gap: 12px;
}

.lecturecard-title {
  font-size: 16px;
  letter-spacing: 0.2px;
  margin: 0;
}

.lecturecard-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.lecturecard-body {
  padding: 18px;
  display: grid;
  gap: 14px;
justify-content: end;
}

.prof_lecturecard {
  width: 100%;
  max-width: 100%;
  transition-duration: 0.3s;
  background-color: white;
  /* border: thin solid currentColor; */
  border-radius: 0.4rem;
  backdrop-filter: blur(10px);
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  box-shadow: 0 0 0.7rem 0rem rgba(from var(--clr-background-dark) r g b / 20%);
}

.prof_lecturecard-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prof_lecturecard-title {
  font-size: 16px;
  letter-spacing: 0.2px;
  margin: 0;
}

.prof_lecturecard-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.prof_lecturecard-body {
  padding: 18px;
  display: grid;
  gap: 14px;
  justify-content: end;
}

/* Two buttons layout */
.student_action_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 576px) {
  .student_action_grid {
    grid-template-columns: 1fr;
  }

}

.home_action_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}



.stud-lec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  background-color: var(--clr-secondary-container);
  color: var(--clr-on-secondary-container);
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);

}

.stud-lec-btn:hover {
  /* background: var(--primary-600);
    background-color: pink;
    color: #0B4450 */
  opacity: 0.7;
}

.stud-lec-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0.3rem -0.2rem var(--clr-background-dark);
}

.stud-lec-btn.secondary {
  background: var(--secondary);
  color: inherit;
  border-color: var(--clr-outline);
}

.stud-lec-btn.secondary:hover {
  background: #0B4450;
  color: white
}


/* Optional stud_action_icons with CSS only */
.stud_action_icons {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  border-radius: 3px;
  background: currentColor;
  mask-size: cover;
  -webkit-mask-size: cover;
}


/* Notes stud_action_icons (document) */
.stud_action_icons.notes {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm1 7V3.5L20.5 9H15z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm1 7V3.5L20.5 9H15z"/></svg>');
}

/* Media Queries */
@media (max-width: 768px) {

  /* For tablets and smaller screens */
  .right-align-box {
    flex: 0 1 45%;
    /* Each box takes up 45% of the width */
  }

  .right-align-box-allflags {
    flex: 0 1 90%;
    /* Each box takes up 30% of the width */
    box-sizing: border-box;
    /* Includes padding in width calculation */
    padding: 10px;
    margin: 20px;
  }

  .headertext {
    font-size: 2.3em;
    /* Smaller font size for mobile */
    margin-bottom: 10px;
    /* Adjust margin if needed */
  }
}

@media (max-width: 480px) {

  /* For phones */
  .right-align-container {
    justify-content: flex-start;
    /* Ensure items align to the left */
  }


  .right-align-box {
    flex: 0 1 100%;
    /* Each box takes up 100% of the width */
  }
}

.chart-container {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  flex: 1;
  min-width: 300px;
  /* max-width:80vw; */
  /* height: 500px; */
  /* height: auto; */
  /* overflow: scroll; */
}

/* horizontal scroll tag related questions */
.scroll-container {
  display: flex;
  /* Use flexbox for horizontal layout */
  overflow-x: auto;
  /* Enable horizontal scrolling */
  padding: 10px;
}

.scroll_subcontainerbox {
  position: relative;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  text-align: left;
  color: black;
}

.scroll_contentbox {
  position: relative;
  padding: 15px;
  margin-bottom: 2px;
  margin-right: 10px;
  /* Space between content boxes */
  border-radius: 5px;
  text-align: center;
  color: black;
  width: 600px;
  /* Set a fixed width for each content box */
  background-color: white;
  border: 1px solid grey;
  flex: 0 0 auto;
  /* Prevent the content box from growing or shrinking */
}

.forum-contentbox {
  position: relative;
  padding: 15px;
  margin-bottom: 2px;
  border-radius: 5px;
  text-align: center;
  color: white;
  width: 100%;
  background-color: rgb(40, 6, 52);
  box-shadow: rgb(40, 6, 52);
  font-size: 2em;
  font-weight: bold;

}

.textbox {
  position: relative;
  padding: 15px;
  margin: 2px;
  text-align: center;
  color: black;
  width: 100%;
  background-color: white;

}

.learnflag-textbox {
  position: relative;
  padding: 15px;
  margin: 2px;
  text-align: left;
  color: black;
  width: 100%;
  background-color: white;

}


.forum-textbox {
  position: relative;
  padding: 10px;
  margin: 2px;
  text-align: left;
  color: black;
  width: 100%;
  background-color: lightblue;
}


.subcontainerbox {
  position: relative;
  padding: var(--bs-gutter-x);
  border-radius: 5px;
  text-align: left;
  color: black;
  width: auto;
}

.subcontainerbox-center {
  position: relative;
  padding: var(--bs-gutter-x);
  border-radius: 5px;
  text-align: center;
  color: black;
  width: auto;
}

.section-container {
  position: relative;
  padding: var(--bs-gutter-x);
  margin:0;
  text-align: center;
  color: black;
  width: auto;
  /* background: linear-gradient(to bottom, 
    white 0%, 
    var(--clr-secondary) 100%); */
  background-color: var(--clr-primary-container);
}

.section-container * {
  color: var(--clr-primary)
}

.article-container {
  position: relative;
  padding: 3% 8%;
  margin:0;
  color: black;
  width: auto;
  background-color: transparent;
}


.main {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  flex: 1;
  height: auto;
  padding: 20px 10px;
}


.subcontainerbox-hor {
  margin-right: 10px;
  /* Space between the title and button */
  display: flex;
}

.classroom-wrap {
  width: 100%;
  max-width: 980px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  /* padding: 18px; */
}


.classroom-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 16px 4px 4px;
}

.btnroom-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 16px 4px 4px;
}

@media (max-width: 760px) {
  .classroom-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .classroom-actions {
    grid-template-columns: 1fr;
  }
}

.classroom-action {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  /* thick square/rectangle feel */
  padding: 16px;
  /* border-radius: var(--radius); */
  border-radius: 10px;
  color: #0B4450;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  will-change: transform, filter;
}

.btnroom-action {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  padding: 16px;
  border-radius: var(--radius);
  color: #0B4450;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}


.classroom-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.classroom-action:active {
  transform: translateY(0);
}

.classroom-action .icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  color: #0B4450;
  background: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  color: #0B4450;
  background: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.classroom-label {
  font-size: 14px;
  opacity: 0.95;
}

.btnroom-label {
  font-size: 14px;
  opacity: 0.95;
}

.recording[name="recording"] {
  background-color: rgb(148, 0, 0)
}

.recording[name="recording"]>.icon.rec,
.recording[name="recording"]>.classroom-label {
  color: white;
}

/* Icons via inline masks (no external assets) */
.icon.rec {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 6a6 6 0 100 12 6 6 0 000-12z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 6a6 6 0 100 12 6 6 0 000-12z"/></svg>');
}

.icon.qr {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm11 0h3v3h-3v-3zm3 3h4v5h-4v-5zm-3 3h3v2h-3v-2z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm11 0h3v3h-3v-3zm3 3h4v5h-4v-5zm-3 3h3v2h-3v-2z"/></svg>');
}

.icon.anon {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-9 9a9 9 0 1118 0H3z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-9 9a9 9 0 1118 0H3z"/></svg>');
}

.icon.live {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5zM3 6h2v12H3z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5zM3 6h2v12H3z"/></svg>');
}

.icon.recCircle {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-record-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-record-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/></svg>');
}

.icon.edit {
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"%3E%3Cpath d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/%3E%3Cpath fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/%3E%3C/svg%3E');
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"%3E%3Cpath d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/%3E%3Cpath fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/%3E%3C/svg%3E');
}

.icon.edit {
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"%3E%3Cpath d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/%3E%3Cpath fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/%3E%3C/svg%3E');
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"%3E%3Cpath d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/%3E%3Cpath fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/%3E%3C/svg%3E');
}

/* Questions icon (question mark in circle) */
.icon.questions {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.07 15h-2.14v-2h2.14v2zm1.12-7.75c-.25.36-.6.65-.99.86-.59.31-.99.58-1.2.82-.21.24-.32.61-.32 1.11h-2v-.5c0-.75.23-1.37.69-1.86.46-.49 1.1-.95 1.95-1.36.85-.41 1.28-.83 1.28-1.27 0-.52-.39-.88-1.16-.88-.7 0-1.36.27-1.89.81l-1.2-1.2c.7-.75 1.58-1.17 2.6-1.17 1.35 0 2.34.5 2.97 1.49.62.98.46 2.14-.08 2.84z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.07 15h-2.14v-2h2.14v2zm1.12-7.75c-.25.36-.6.65-.99.86-.59.31-.99.58-1.2.82-.21.24-.32.61-.32 1.11h-2v-.5c0-.75.23-1.37.69-1.86.46-.49 1.1-.95 1.95-1.36.85-.41 1.28-.83 1.28-1.27 0-.52-.39-.88-1.16-.88-.7 0-1.36.27-1.89.81l-1.2-1.2c.7-.75 1.58-1.17 2.6-1.17 1.35 0 2.34.5 2.97 1.49.62.98.46 2.14-.08 2.84z"/></svg>');
}

/* Questions prof_action_icons (question mark in circle) */
.icon.questions {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.07 15h-2.14v-2h2.14v2zm1.12-7.75c-.25.36-.6.65-.99.86-.59.31-.99.58-1.2.82-.21.24-.32.61-.32 1.11h-2v-.5c0-.75.23-1.37.69-1.86.46-.49 1.1-.95 1.95-1.36.85-.41 1.28-.83 1.28-1.27 0-.52-.39-.88-1.16-.88-.7 0-1.36.27-1.89.81l-1.2-1.2c.7-.75 1.58-1.17 2.6-1.17 1.35 0 2.34.5 2.97 1.49.62.98.46 2.14-.08 2.84z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.07 15h-2.14v-2h2.14v2zm1.12-7.75c-.25.36-.6.65-.99.86-.59.31-.99.58-1.2.82-.21.24-.32.61-.32 1.11h-2v-.5c0-.75.23-1.37.69-1.86.46-.49 1.1-.95 1.95-1.36.85-.41 1.28-.83 1.28-1.27 0-.52-.39-.88-1.16-.88-.7 0-1.36.27-1.89.81l-1.2-1.2c.7-.75 1.58-1.17 2.6-1.17 1.35 0 2.34.5 2.97 1.49.62.98.46 2.14-.08 2.84z"/></svg>');
}

/* Three buttons layout */
.prof_action_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 575px) {
  .prof_action_grid {
    grid-template-columns: 1fr;
  }

  /* stack on small screens */
}

.prof-lec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  background-color: #0B4450;
  color: white;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);

}

.prof-lec-btn:hover {
  /* background: var(--primary-600);
  background-color: pink;
  color: #0B4450 */
  opacity: 0.7;
}

.prof-lec-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0.3rem -0.2rem var(--clr-background-dark);
}

.prof-lec-btn.secondary {
  background: var(--secondary);
  color: inherit;
  border-color: var(--clr-outline);
}

.prof-lec-btn.secondary:hover {
  background: #0B4450;
  color: white
}

/* Optional action_icons with CSS only */
.prof_action_icons {
  width: 1em;
  height: 1em;
  display: inline-block;
  border-radius: 3px;
  background: currentColor;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.icon.dashboard {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm7 0h11v8H10v-8z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm7 0h11v8H10v-8z"/></svg>');
}

.icon.classroom {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2l10 6v2H2V8l10-6zm-9 9h18v9H3v-9zm3 2v2h12v-2H6z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2l10 6v2H2V8l10-6zm-9 9h18v9H3v-9zm3 2v2h12v-2H6z"/></svg>');
}


/*forum*/
.forum-question-container {
  position: relative;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  width: 100%;
  height: 220px;
  background-color: white;
  margin: 10px;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 10px;

}

.questionbox {
  position: relative;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  text-align: left;
  color: black;
  width: 800px;
  background-color: lightblue;

}

/*accessories*/

/*User images*/

.user-image {
  width: 70px;
  /* Width of the image */
  height: 70px;
  /* Height of the image */
  border-radius: 50%;
  /* Make it round */
  overflow: hidden;
  /* Ensure no overflow */
  border: 2px solid #2196F3;
  /* Optional border */
  display: flex;
  /* Center image */
  justify-content: center;
  /* Center image */
  align-items: center;
  /* Center image */
  background-color: #e0e0e0;
  /* Fallback background color */
}

@media (max-width: 576px) {
  .user-image {
    width: 56px;
    /* 20% smaller than 70px */
    height: 56px;
    /* 20% smaller than 70px */
    border-radius: 40%;
    /* Adjust to maintain round shape */
  }
}

.user-image img {
  width: 100%;
  /* Make the image fill the container */
  height: auto;
  /* Maintain aspect ratio */
}


.profile-image {
  width: 80px;
  /* Size of the circular image */
  height: 80px;
  /* Size of the circular image */
  border-radius: 50%;
  /* Make it circular */
  object-fit: cover;
  /* Ensure the image covers the container */
  margin-bottom: 15px;
  /* Space below the image */
}

.img-fluid {
  max-width: 100%;
  /* Makes the image responsive */
  height: auto;
  /* Maintains the aspect ratio */
}


.image img {
  width: 100%;
  height: 100px;
  margin-bottom: 8px;
  border-radius: 5px;

}

.responsiveimg img {
  max-width: 100%;

}


.chatimg img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


/*lecture boxes*/
.lecture-toggle {
  font-size: 26px;
}

.lecturebox {
  width: 100%;
  text-align: center;
  padding: 15px;
  background-color: var(--clr-secondary-container);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.5rem;
  box-shadow: 0 0 0.7rem 0rem rgba(from var(--clr-background-dark) r g b / 20%);
  color: var(--clr-on-primary-container);
  transition-duration: 0.3s;
}
/* .lecturebox > *{
  margin-bottom: 0.4rem;
} */

.lecturebox:hover {
  cursor: pointer;
  opacity: 0.8;
  box-shadow: 0 0 0.3rem -0.2rem rgba(from var(--clr-background-dark) r g b / 20%);
}

.lecturebox:active{
  background-color: var(--clr-surface-variant);
  box-shadow: 0 0 0.3rem -0.2rem rgba(from var(--clr-background-dark) r g b / 20%);
}

/*content should be '+' if want to toggle*/
.lecturebox .lecture-toggle::after {
  content: '';
  position: absolute;
  right: 25px;
}

.lecturebox .lecture {
  padding-top: 2px;
  font-size: 20px;
  line-height: 2;
  width: 100%;
  height: auto;
  display: none;
  overflow: hidden;
  transition: .5s;
}

.lecture:hover {
  padding-top: 2px;
  font-size: 20px;
  line-height: 2.5;
  width: 100%;
  transition: .5s;
  background-color: #0B4450;
  color: white;
  cursor: pointer;
}


/*Javascript Styling Link */
.lecturebox.active .lecture {
  display: block;
}

.lecturebox.active .lecture-toggle {
  font-size: 18px;
  transition: 0.5s;
}

.lecturebox.active .lecture-toggle::after {
  content: '-';
  font-size: 30px;
  transition: 0.5s;
}

/*show stories*/
#modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(6, 2, 0, 0.1);
}

#modal {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation-name: animatemodal;
  animation-duration: .4s;
}



/*stories styles defaulted*/

#storybtn {
  padding: 5px;
  width: auto;
  height: 30px;
  background-color: #216e5c;
  color: white;
  border: none;
  box-shadow: 5px 5px 5px rgba(33, 110, 92, 0.5);
  border-radius: 6px;
  margin: 5px;
}

#storybtn:hover {
  padding: 5px;
  width: auto;
  height: 30px;
  background-color: #1b5a4c;
  color: white;
  border: none;
  border-radius: 6px;
  transition: 0.3s;
}

.stories {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 768px;
  /* border: 1px solid #c8c8c8; */
  border-radius: 4px;
  overflow: auto hidden;

  /* Overflow para substituir o efeito de slide */
}

.stories__item {
  padding: 15px 10px;
  user-select: none;
}

.stories__item:first-child {
  padding-left: 20px;
}

.stories__item:last-child {
  padding-right: 20px;
}

.stories__item button {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  width: 64px;
  cursor: pointer;
  outline: 0;
}


.stories__item-picture {
  width: 64px;
  height: 64px;
  margin-bottom: 5px;
  padding: 6px;
  position: relative;
}

.stories__item-picture img {
  width: 100%;
  height: 100%;
  border-radius: 30%;
  border: 1px solid rgba(0, 0, 0, 0.0975);
  pointer-events: none;
}

.stories__item-username {
  width: 64px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.stories__item--active .stories__item-picture::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 30%;
  z-index: -1;

  background: linear-gradient(45deg,
      rgba(0, 160, 77, 1) 0%,
      rgba(160, 15, 139, 1) 100%);
}

.stories__item--active .stories__item-picture img {
  box-shadow: 0 0 0 2px #fff;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.story-box {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: none;
  /* Hide by default */
  overflow: hidden;
  z-index: 1001;
}

@media (min-width: 769px) {
  .story-box {
    width: 60%;
    height: 80%;
    /* background-color: #fff; */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    display: none;
    /* Hide by default */
    overflow: hidden;
    z-index: 1001;
  }

  @media (max-width: 431px) {
    .story-box {
      width: 100%;
      height: 100%;
      /* background-color: #fff; */
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      position: relative;
      display: none;
      /* Hide by default */
      overflow: hidden;
      z-index: 1001;
    }

    .slide-1 {
      width: 100%;
      height: 100%;
    }
  }
}

.story-slide {
  width: 100%;
  height: 100%;
  display: flex;
  /* Keep flex for centering content */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: white;
  position: absolute;
  transition: visibility 0s, opacity 0.5s linear;
  /* Smooth transition */
  opacity: 0;
  /* Start hidden */
  visibility: hidden;
  /* Start hidden */
  padding: 20px;
}

.keyword-box {
  background-color: darkblue;
  text-align: center;
  width: auto;
  color: white;
  border-radius: 5px;
  padding: 2px;
  margin: 5px;
}

.story-questions {
  text-align: center;
  width: auto;
  margin: 10px;
  padding: 5px;
  color: white;
}

.story-questions img {
  width: 100%;
  height: 300px;
}

.slide-1 {
  background-image: url("/static/images/studyimg.jpg");
  background-size: cover;
  /* Cover the entire viewport */
  background-repeat: no-repeat;
  /* Don't repeat the image */
  background-position: center;
  /* Center the image */
  color: white;
  /* Text color for better contrast */


}

.slide-2 {
  background-image: url("/static/images/randomcat.jpeg");
  background-size: cover;
  /* Cover the entire viewport */
  background-repeat: no-repeat;
  /* Don't repeat the image */
  background-position: center;
  /* Center the image */
  color: white;
  /* Text color for better contrast */
}

.slide-3 {
  background-image: url("/static/images/naturepic.jpg");
  background-size: cover;
  /* Cover the entire viewport */
  background-repeat: no-repeat;
  /* Don't repeat the image */
  background-position: center;
  /* Center the image */
  color: white;
  /* Text color for better contrast */
}

.active_story {
  opacity: 1;
  /* Show active slide */
  visibility: visible;
  /* Make visible */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  /* Hide overlay by default */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.storyoverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 0;

}


/*Button Page*/
.flagbtn {
  position: relative;
  width: 65%;
  color: white;
  /* Change text color to white for better contrast */
  background-color: #ae120d00;
  /* Bootstrap danger color */
  border-radius: 50%;
  border: 0px;
  box-shadow:
    -6px -6px 24px rgba(255, 255, 0, 0),
    6px 6px 24px rgba(251, 201, 2, 0),
    inset 6px 6px 24px rgba(253, 173, 2, 0),
    inset -6px -6px 24px rgba(221, 192, 3, 0);
  transition: all 0.2s ease;
  /* Transition for smooth effect */
  cursor: pointer;
  /* Change cursor to pointer */
}

@media (max-width: 575px) {
  .flagbtn {
    width: 65vw;
    height: 65vw;
  }
}

.flagbtn.active {
  box-shadow:
    -3px -3px 12px rgba(252, 202, 2, 0),
    3px 3px 12px rgba(255, 175, 1, 0.99, 0),
    inset 3px 3px 12px rgba(249, 229, 1, 0),
    inset -3px -3px 12px rgba(212, 163, 3, 0);
  transform: scale(0.95);
}


.flagbtn:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.btncontent {
  display: flex;
  flex: 1;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  box-shadow: none;
  /* Adjust font size */
}

.btncontent._shadow {
  -webkit-filter: drop-shadow( 0px 0px 0.4rem rgba(0, 0, 0, .7));
  filter: drop-shadow( 0px 0px 0.4rem rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
  transition-duration: 0.2s;
}

.btncontent:active._shadow {
  -webkit-filter: drop-shadow( 0px 0px 0.1rem rgba(0, 0, 0, .7));
  filter: drop-shadow( 0px 0px 0.1rem rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
  transition-duration: 0.2s;
}


/*allflagged notes page*/
.sidebar {
  height: auto;
  width: 400px;
  border-right: 1px solid grey;
  margin-top: 30px;
  margin-left: -10px;
  padding: 0px;
  background-color: white;
  position: relative;
  text-align: center;
  color: black;
  background-color: white;
}

#searchKeyword {
  margin: 20px;
  display: none;
}

@media (max-width: 768px) {

  /* Adjust the width as needed */
  .sidebar {
    display: None;
  }

  #searchKeyword {
    display: block;
  }
}


.courses {
  max-width: 100vw;
}

.lecturelist {
  width: 100%;
  padding: 10px 5px;
  background-color: transparent;
  border: none;
  transition-duration: 0.3s;
  color: black;
}

.lecturelist:hover {
  background-color: #0B4450;
  color: white;
}

.journeylink {
  color: grey;
  font-size: 0.9rem;
}

.journeylink a {
  color: grey;
  font-size: 0.9rem;
  cursor: pointer;
}