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

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

/* #0B4450 */
:root {
    --clr-primary: #063039;
    --clr-on-primary: #FFFFFF;
    --clr-primary-container: #A5DAE6;
    --clr-on-primary-container: #062B33;
    --clr-secondary: #649BA8;
    --clr-on-secondary: #FFFFFF;
    --clr-secondary-container: #C8E0E6;
    --clr-on-secondary-container: #1F2F33;
    --clr-tertiary: #ECD06F;
    --clr-on-tertiary: #FFFFFF;
    --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: #fbfcfc;
    --clr-on-background: #313333;
    --clr-surface: #fbfcfc;
    --clr-on-surface: #313333;
    --clr-surface-variant: #d9e3e6;
    --clr-on-surface-variant: #546366;
    --clr-outline: #7e9499;
    --clr-primary-dark: #8AD5E6;
    --clr-on-primary-dark: #08404C;
    --clr-primary-container-dark: #0B5666;
    --clr-on-primary-container-dark: #A5DAE6;
    --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: #313333;
    --clr-on-background-dark: #e2e5e6;
    --clr-surface-dark: #313333;
    --clr-on-surface-dark: #e2e5e6;
    --clr-surface-variant-dark: #546366;
    --clr-on-surface-variant-dark: #d3e2e6;
    --clr-outline-dark: #9eafb3;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  height: 100%;
  background-color: var(--clr-background) !important; 
  font: 16px/1.15 "Roboto", sans-serif;
  color: var(--clr-on-background);
  line-height: 1.5;
}

body * {
  color: var(--clr-on-background);
}

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

.navbar-home-custom *, .navbar-prof-custom * {
  color: var(--clr-on-background-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;
}

.separation-bar {
  height: 15px;
  width: 100%;
  border-bottom: 1px solid lightgrey;
  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.4rem;
  text-align: center;
  color: var(--clr-on-secondary);
  width: 100%;
  background-color: var(--clr-secondary);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0.3rem -0.1rem var(--clr-background-dark);
  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 var(--clr-background-dark);
}

.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;

}

.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:focus {
  outline: none;
}

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

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

.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;

}

.contentbox {
  position: relative;
  padding: 15px;
  /* margin: 10px; */
  /* margin-left: 5vw;
  margin-right: 5vw; */
  border-radius: 5px;
  text-align: center;
  color: black;
  width: 100%;
  background-color: white;
  /* 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;
}


/* 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;
}


.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);
  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;
}

.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>');
}

/* 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>');
}

/*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%;
  height: 280px;
}

.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.3rem -0.1rem var(--clr-background-dark);
  color: var(--clr-on-primary-container);
  transition-duration: 0.3s;
}
/* .lecturebox > *{
  margin-bottom: 0.4rem;
} */

.lecturebox:hover {
  cursor: pointer;
  opacity: 0.8;
}

.lecturebox:active{
  background-color: var(--clr-surface-variant);
  box-shadow: 0 0 0.3rem -0.2rem var(--clr-background-dark);
}

/*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: 75%;
  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 */
}

.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;
}