.login-error {
    color: red;
    text-align: center;
    margin: 0px;
}

.control-group {
  display: flex;
  flex-direction: column;
}

.control-group label {
  font-size: 14px;
  margin-bottom: 8px;
  color: #aaa;
}

.control-group .controls input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #333;
  padding: 10px 5px;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.control-group input:focus {
  border-bottom: 1px solid #00ff66;
}

.help-block {
  font-size: 12px;
  margin-top: 6px;
  color: #00ff66;
}

.controls ul li {
  font-size: 12px;
  margin-top: 6px;
  color: #00ff66;
}

.user-register-error {
  font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: .9rem;
  color: red;
}

.help-block[id^="error_"] {
    color: red;
    margin-bottom: -30px;
}

.register-form .form-actions {
    grid-column: 1 / -1;   /* span across both columns */
    text-align: center;   /* center the button */
}

.control-group .controls input::placeholder {
    font-size: 13px;   /* or whatever size you want */
}

.create-one-account {
    color: #00ff66;
    font-weight: bold;
    text-decoration: none;
}

.create-one-account:hover {
    text-decoration: underline;
}

.reset-password {
    color: #00ff66;
    font-style: italic;
}

.nav-list::-webkit-scrollbar {
  width: 10px;
}

.nav-list::-webkit-scrollbar-track {
  background: #010618;
  border-left: 1px solid #0CFE25;
}

.nav-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0CFE25, #09a61a);
  border-radius: 10px;
  border: 2px solid #010618;
}

.nav-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #13ff32, #0CFE25);
}


.nav-list {
  scrollbar-width: thin;
  scrollbar-color: #0CFE25 #010618;
}

.titulli-nshirit {
  font-size: clamp(2px, 1.7vw, 13px);
  font-style: italic;
  color: #B2BEB5;
}

.titulli-nshirit:hover {
  cursor: pointer;
  color: #0CFE25; /* green */
}

.shigjeta-nshirit {
    font-size: clamp(2px, 1.7vw, 13px);
}

.shiriti {
    margin-top: 10px;
    height: 15px;
}

.lesson-shiriti {
    margin-top: -20px;
    height: 15px;
}

.lesson-description {
  font-size: 14px !important;       /* comfortable base size */
  color: #E6E6E6;        /* soft white, less harsh than pure #FFFFFF */
  line-height: 1.6;      /* improves readability */
}

.lesson-container h3 {
  color: #00ff55;
  font-size: 30px;
  margin-bottom: 20px;

  font-family: var(--body-font);
}

.choice-text {
    font-size: 0.9rem;
}

#tx-main-script + .CodeMirror {
    width: 100%;
    margin: 0px;
    background: #0d1525;
    border: 1px solid #0CFE25;
    padding: 0px;
    font-family: monospace;
    outline: none;
    resize: vertical;
    max-height: 600px;
    min-height: 120px;
    transition: border 0.3s ease;
    font-size: 14px;
    margin-bottom: 10px;
}

#tx-main-shell + .CodeMirror {
    width: 100%;
    margin: 0px;
    background: #0d1525;
    border: 1px solid #0CFE25;
    padding: 0px;
    font-family: monospace;
    outline: none;
    resize: vertical;
    max-height: 600px;
    min-height: 120px;
    transition: border 0.3s ease;
    font-size: 14px;
}

.interpreter-area {
  width: 100%;
  margin: 0px;
  background: #0d1525;
  color: #50fa7b;
  border: 1px solid gray;
  padding: 10px;
  font-family: monospace;
  outline: none;
  resize: vertical;
  max-height: 600px;
  border-radius: 5px;
  font-size: 14px;
  margin: 7px 0px;
}

pre.code-txt {
  width: 100%;
  margin: 0px;
  background: #0d1525;
  color: #f8f8f2;
  border: 1px solid gray;
  padding: 10px;
  font-family: monospace;
  outline: none;
  resize: vertical;
  max-height: 450px;
  border-radius: 5px;
  font-size: 14px;
  margin: 7px 0px;
}

p {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 5px;
  padding-bottom: 5px;
}

.courier-bold {
  font-weight: bold;
  font-size: .9rem;
  color: #f8f8f2;
  font-family: Consolas,monaco,monospace;
}

code {
  font-weight: bold;
  color: #f8f8f2;
  font-family: Consolas,monaco,monospace;
}

div.line {
  display: flex;
  justify-content: space-between; /* push left and right apart */
  align-items: center;            /* vertical centering */
  padding: 0px;
  margin: 7px 0px;
}

.show-solution {
  /*position: relative;*/
  /*display: block;*/
  padding: .2rem .75rem;
  margin-left: 2px;
  margin-right: 2px;
}

input.textfield {
  width: 100%;
  margin: 0px;
  background: #0d1525;
  color: white;
  border: 1px solid white;
  padding: 10px;
  font-family: monospace;
  outline: none;
  border-radius: 2px;
  font-size: 14px;
  margin: 2px 0px;
  height: 30px;
}

b {
    color: #fff
}

.solution-box {
    margin: 10px !important;
    padding: 10px !important;
    background: #0d1525;
    font-size: 0.9rem;
}

ul {
    margin-left: 20px;
}

span.bold-limegreen {
    // color: limegreen;
    color: #00FF00;
    font-weight: bold;
}

span.lightgreen {
    color: lightgreen;
}

span.hidden {
    display: none;
}

.execution-flow-exercise-input {
    border: 1px solid white;
}


button.exercise-tab.active {
    font-weight: bold !important;
    color: inherit;
}


.finished-exercise {
  font-weight: bold;
}

button.tab:hover {
    background-color: inherit;  /* keep parent background */
    color: inherit;             /* optional: reset text color */
}

.finished-exercise {
    background: no-repeat center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text x='0' y='15' font-size='16'>✔</text></svg>");
    background-size: 16px 16px;
}


button.finished-exercise::before {
  content: "✔";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;        /* bigger tick */
  color: rgba(0, 255, 0, 0.4); /* bright green, slightly transparent */
  z-index: 0;             /* keeps tick behind text */
  opacity: 0.8;
}

button.finished-exercise {
    position: relative;
    color: white;
    font-weight: bold;
}

.silver-color {
    opacity: 0.5;
}

.nav__list2, .nav__list {
  list-style: none;
}

@media (max-width: 800px) {
  .sidebar {
    display: none;
  }
}

.blurred {
    filter: blur(3px);
}

.scrollable-div {
  display: block;
  width: 100%;                 /* fill container width */
  max-width: 100%;             /* prevent exceeding parent */
  box-sizing: border-box;
  white-space: pre-wrap;       /* preserve formatting but allow wrapping */
  overflow-wrap: break-word;   /* break long words if needed */
  word-break: break-word;
  hyphens: auto;
  min-width: 0;                /* crucial for flex parents */
  background-color: #0d1525;
  max-height: 150px;
  overflow: auto;
}


/* if there are child elements that can force width */
.scrollable-div * {
  min-width: 0;
  white-space: inherit;
}


.execution-flow-bg {
  border: 2px solid #0CFE25;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.sidebar .nav-list {
    margin-top: 0px !important;
    margin-left: 0px !important;
}

.chapter-menu {
    margin-left: -10px;
}

.lesson-menu {
    margin-left: 0px;
}

.tri-pika {
  display: inline-block;      /* or block */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.bx, .bx-chevron-down, .arrow:hover {
    color: #0CFE25;
}

.width-100 {
    width: 100px;
}

.active-menu {
    color: #0CFE25 !important;
}

.interpreter-wide {
  width: 100% !important;
}

.submenu .sub-menu.active {
    display: block;
}

.links_name1 {
    display: flex;
    justify-content: space-between; /* push link left, arrow right */
    align-items: center;            /* vertical alignment */
    width: 100%;                    /* span full width of sidebar */
}


.height-auto {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre;
}

.note-box {
  background-color: #111827;  /* dark gray-blue */
  border: 1px solid #6b7280;  /* medium gray */
  color: #e6f1e6;              /* soft white text, easy on eyes */  /* bright green accent border */
  padding: 1rem;
  border-radius: 8px;
}

.progress-dashboard-container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  /* Optional: full height if you want vertical centering relative to viewport */
  height: 100%;
}

/* Dropdown hidden by default */
.progress-dropdown,
.progress-nested-dropdown {
    display: none;
    margin-top: 10px;
    padding-left: 15px; /* indent nested dropdowns */
}

/* Make each new dropdown item clickable */
.progress-dropdown-item h4 {
    cursor: pointer;
}

.card-text-2 {
    padding: 10px !important;
    margin-left: 20px;
}

.card-text-3 {
    padding: 5px !important;
    margin-left: 20px;
}

.card-text-4 {
    padding: 5px !important;
    margin-left: 20px;
}

.card-text-2:hover,
.card-text-3:hover,
.card-text-4:hover {
    border: 1px solid #0CFE25;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

.card2 {
    padding: 5px;
}

.nav__link, .dropdown__link {
    white-space: nowrap;    /* prevent wrapping */
}

.admin-user-table .table2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 95%;
}

/* use flex consistently */
.user-table-ranking {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ddd;
    padding: 6px 0;   /* <-- remove left/right padding */
    cursor: pointer;
}

.user-table-ranking > * {
    min-width: 30px;
}

.user-table-ranking .left--side,
.user-table-ranking .person-achievements {
    flex: 0 0 auto; /* shrink to fit */
    min-width: 30px;
}

.cell-text {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
}

.small-cell { width: 5%; }
.medium-cell { width: 10%; }
.large-cell { width: 35%; }


.cell-header-text {
    font-weight: bold;
    font-size: 16px !important;
}

.pagination2 {
    display: flex;
    justify-content: center;   /* center horizontally */
    list-style: none;
    padding: 8px;
    margin: 10px 0;
    background-color: #010618; /* dark base background */
    border-radius: 12px;       /* smooth rounded edges */
    gap: 6px;                  /* spacing between buttons */
}

.page-item2 {
    display: inline-block;
}

.page-link2 {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: white;                 /* default text color */
    background: gray;             /* default background */
    transition: all 0.25s ease;   /* smooth hover effect */
}

.page-link2:hover {
    background-color: #0CFE25;    /* neon green hover */
    color: #010618;               /* dark text on hover */
}

.page-item2.active .page-link {
    background-color: #0CFE25;    /* active page green */
    color: #010618;
    box-shadow: 0 0 6px #0CFE25;  /* subtle glow effect */
}

.user-table-header {
    cursor: default !important;
}

.green-hover:hover {
    color: #0CFE25 !important;
}

p.active-order-by {
    color: #0CFE25;
}

li.page-item2.active > a {
    background-color: #0CFE25;
}

.line23 {
    display: flex;
    flex-wrap: wrap;       /* allows wrapping if too many cards */
    gap: 12px;             /* spacing between cards */
}

section.exam {
    width: 70%;   /* shrink to fit its content */
    margin: 0 auto;       /* center horizontally */
    text-align: center;   /* center inline text inside */
}

.levels2 {
    display: flex;
    justify-content: center;   /* center all .level blocks horizontally */
    gap: 16px;                 /* space between them */
    margin: 20px auto;         /* center the container itself */
    text-align: center;
}

.level2 {
    padding: 8px 16px;
    border: 1px solid #ccc;    /* if you want visible boxes */
    border-radius: 6px;
    cursor: pointer;
}

.level2:hover {
    color: #00ff66;
}


.exam-info > p {
    font-size: 15px;
}

.exam-container {
    margin-top: 30px;
    display: flex;
    justify-content: center; /* center horizontally */
    text-align: center;      /* optional: center inline text */
}

.loading-container {
  opacity: 0.1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.dot {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #333;
  border-radius: 50%;
  animation: dotMove 1.5s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

.exam-container {
    display: flex;
    flex-direction: column; /* stack rows vertically */
    align-items: center;    /* center all children horizontally */
    gap: 20px;              /* spacing between rows */
}

.exam-header {
    display: flex;
    justify-content: center; /* center the group as a whole */
    align-items: center;
    gap: 40px;               /* space between button and timer */
    width: 100%;             /* span full width for proper centering */
}

.left-text-content {
    text-align: left;
    color: #ccc;
}

.challenge-yourself-container {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* optional: center vertically if parent has height */
    width: 100%;
    color: #ccc;
}

.challenge-exercise-box {
    width: 100%;     /* default for small screens */
    max-width: 95%; /* safeguard */
    margin-top: 30px;
}

/* Medium screens */
@media (min-width: 768px) {
    .challenge-exercise-box {
        width: 80%;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .challenge-exercise-box {
        width: 60%;
    }
}


.challenge-yourself-container {
    display: flex;
    flex-direction: column; /* stack children vertically */
    align-items: center;    /* optional: center horizontally */
}

.challenge-levels {
    order: 1;   /* appear first */
    margin-bottom: 20px; /* space below */
}

.challenge-exercise-box {
    order: 2;   /* appear second */
    width: 100%;
    max-width: 800px; /* control box width */
}


.certificate-card {
  width: 100%;   /* default: smallest screens */
  margin: 0 auto;
}

/* Medium screens (≥ 768px) */
@media (min-width: 768px) {
  .certificate-card {
    width: 80%;
  }
}

/* Larger screens (≥ 1024px) */
@media (min-width: 1024px) {
  .certificate-card {
    width: 60%;
  }
}

/* Extra-large screens (≥ 1440px) */
@media (min-width: 1440px) {
  .certificate-card {
    width: 50%;
  }
}

.certificate-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.certificate-card {
  flex: 1 1 40%;  /* or whatever width you want */
  display: flex;
  flex-direction: column;
}

.certificate-card {
  min-height: 600px; /* pick a size that fits all content */
}

.certificate-card-description {
    margin: 0px 10px;
}


.certificate-sign img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(5299%) hue-rotate(92deg) brightness(97%) contrast(101%);
    width: 110px;
    max-width: 110px !important;
}

.certificate-download-button {
    all: unset;      /* Removes all inherited styles, padding, borders, etc. */
    font: inherit;   /* Inherit font family and size from parent */
    color: inherit;  /* Inherit text color */
    background: none; /* Transparent background */
    cursor: pointer; /* Optional: keep pointer cursor */
    color: #9AAEC4;
}

.certificate-download-button:hover {
    border: none;
}

.certificate-card-description-center {
    display: flex;
    justify-content: center; /* horizontal centering */
    width: 100%; /* ensure it spans the full parent width */
    margin-top: 20px; /* optional spacing */
}

.readonlypasswordhashwidget {
    color: #00ff66
}

.line23 {
  display: flex;
  flex-wrap: wrap;        /* allow multiple cards per row */
  justify-content: center;/* center all cards as a group */
  gap: 20px;              /* space between cards */
}

.line23 .card {
  display: flex;
  flex-direction: column;
  align-items: center;     /* horizontal centering */
  justify-content: center; /* vertical centering */
  min-height: 140px;
  height: 140px;
  text-align: center;
  padding: 12px;
  margin: 0;
  margin-top: 40px;
  box-sizing: border-box;
}

.line23 .card-info,
.line23 .card-info h4 {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}

.line23 .card-text h4 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: center;
}


.certificate-download-button {
    position: relative !important; /* anchor for the popup */
}

/* popup that will be appended to body and positioned near the button */
.copy-popup {
  position: fixed;                 /* fixed to viewport, not parent */
  transform: translateX(-50%) translateY(-100%); /* center above anchor */
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  background-color: #010618;       /* pygnosis dark */
  color: #0CFE25;                  /* pygnosis green */
  border: 1px solid #0CFE25;
  white-space: nowrap;
  pointer-events: none;            /* ignore mouse */
  z-index: 2147483647;             /* very high so it won't be under anything */
  opacity: 1;
  transition: opacity 0.35s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* Modal overlay and box */
.next-modal {
    display: none; /* hidden by default */
    position: absolute; /* so we can place it above the button */
    background-color: #162136; /* Pygnosis dark */
    color: #fff;
    border: 2px solid #0CFE25;
    border-radius: 8px;
    padding: 20px;
    max-width: 300px;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    font-family: monospace;
}

/* Close button */
.next-modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #0CFE25;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* Links inside modal */
.next-modal a {
    color: #0CFE25;
    text-decoration: none;
}

.next-modal a:hover {
    text-decoration: underline;
}

/* Paragraph styling */
.next-modal p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.code-txt.mb-1 {
  display: block;
  width: 100%;                 /* fill container width */
  max-width: 100%;             /* prevent exceeding parent */
  box-sizing: border-box;
  white-space: pre-wrap;       /* preserve formatting but allow wrapping */
  overflow-wrap: break-word;   /* break long words if needed */
  word-break: break-word;
  hyphens: auto;
  min-width: 0;                /* crucial for flex parents */
  height: 100%;
  max-height: 100%;
}

.register-container-reset input[type="text"],
.register-container-reset button {
    width: 400px;   /* or any value you prefer */
    max-width: 100%;
}

.register-container-reset button {
    display: flex;
    flex-direction: column; /* stack children vertically */
    align-items: center;    /* optional: center elements horizontally */
}

.feedback-textarea {
    background-color: #0d1525;
    width: 100%;
    color: #ccc;
    padding: 10px;
}

button[name=feedback-submit], .feedback-response {
    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;       /* center vertically */
    width: 100%;
    text-align: center;        /* safeguard for multiline text */
}

.solve-feedback {
    width: 100px;
    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;       /* center vertically */
    text-align: center;        /* safeguard for multiline text */
}

.next-lesson-button {
  border: none;
  display: flex;
  padding: 0.75rem 1rem;
  background-color: #1A1F2F;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  user-select: none;
  gap: 0.5rem;
  border: 1px solid #9AAEC4;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .progress-card-2 {
    width: 90% !important;
  }
}


.autocomplete-items {
    color: #9AAEC4;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /* Position the autocomplete items to be the same width as the container: */
    position: absolute;
    background-color: #010618;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /* When hovering an item: */
    color: #0CFE25;
}

.autocomplete-active {
    background-color: #1e90ff !important;
    color: #ffffff;
}

.autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2);
}