@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

    /* Critical CSS dla dark mode - zapobiega flash */
    html.dark-mode-preload {
        background-color: #121212 !important;
    }

    html.dark-mode-preload body {
        background-color: #121212 !important;
        color: #f0f0f0 !important;
        opacity: 0;
        transition: opacity 0.15s ease-in;
    }

    html:not(.dark-mode-preload) body,
    html.dark-mode-preload body.dark-mode {
        opacity: 1;
    }

    html[data-theme="dark"] body {
        background-color: #121212;
        color: #f0f0f0;
    }

    :root {
      --bulma-body-background-color: none;
      --bulma-navbar-background-color: none;
    }

  /* Last changed from this line: */
  /* --------------------------------- */

    body {
      min-height: 100vh;
      font-family: "Sora", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      height: 100%;
      top: 0px !important;
    }
    
    .logo-dark {
      display: none;
    }

    .logo-light {
      display: block;
    }
    
    .headerButton {
      background-color: #c3d8ea;
      border: gray;
      color: #4a7d9e;
      box-shadow: none;
    }

    .navbar {
        min-height: 58px;
        border-bottom: 2px solid rgb(74, 125, 158);
        box-shadow: 0px 5px 20px rgb(83, 160, 208, 0.78);
    }

    .navbar.is-primary {
      background-color: white;
    }

    .navbar-link:hover, a.navbar-item:hover {
      background-color: rgb(155, 191, 215);
      color: black;
    }

    .navbar-link.is-active {
      background-color: rgb(74, 125, 158);
      color: white;
      transition: background-color 0.3s ease, font-weight 0.3s ease;
    }

    .navbar.is-primary {
      --bulma-navbar-background-color: rgb(144, 153, 151);
    }

    .nocolor:hover {
      background: none !important;
    } 

    .navbar-dropdown {
      background-color: white;
      border-radius: 0;
      border: 1px solid rgb(34 146 197);
      box-shadow: 2px 2px 10px 0px rgb(72 126 147);
    }

    .navbar-dropdown a.navbar-item:not(.is-active,.is-selected) {
      background-color: white;
      color: black;
    }

    .navbar-dropdown a:hover {
      background-color: rgb(62, 118, 139) !important;
      color: white !important;
    }

    .navbar-item, .navbar-link {
      color: rgb(74, 125, 158);
    }

    .navbar-link:hover {
      color: black !important;
    }

    .custom-hero {
      background-color: #f5f5f5;
      padding: 3rem 1.5rem;
      border-radius: 8px;
    }

    a.navbar-item.nocolor {
      background-color: transparent !important; 
    }

    a.navbar-item.nocolor:hover {
      background-color: transparent !important;
    }

    a.navbar-item.nocolor:active, 
    a.navbar-item.nocolor:focus {
      background-color: transparent !important;
    }

    a.navbar-item.nocolor {
      text-decoration: none;
      outline: none;
    }

    .hero-body {
      background-color: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(44, 154, 218, 0.671);
      box-shadow: inset 0px 0px 20px 0px rgba(16, 58, 92, 0.377);
    }

    .hero.has-background {
      position: relative;
      overflow: hidden;
      background-color: #f5f5f5;
      background-image: url('../images/menu_items/bkg1.jpg');
      background-size: cover;
      background-position: 0 420px;
      border-radius: 3px;
      bottom: -20px; 
    }

    
    .hero-background {
      position: absolute;
      object-fit: cover;
      object-position: bottom;
      width: 100%;
      height: 100%;
    }

    .title {
      color: rgb(50, 77, 102);
      font-family: "Raleway", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
    }

    .subtitle {
      color: rgb(112, 138, 172);
      font-weight: bold;
      font-family: "Raleway", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
    }

    .title-isFolder, .title-isDownloads {
      font-weight: 600;
      color: black;
      font-size: 2.5rem;
      font-family: "Poppins", sans-serif;
      margin-top: 10px;
    }

    .title-isDownloads {
      font-size: 1.8rem;
    }

    body.dark-mode .title-isFolder, body.dark-mode .title-isDownloads {
      color: white;
    }

    .panel_searchOption {
      display: flex;
    }

    .accordion-header {
      width: 100%;
      padding: 10px;
      background-color: #f5f5f5;
      border: none;
      text-align: left;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 5px;
      border-radius: 3px;
    }

    body.dark-mode .accordion-header {
      background-color: #1e1e1e;
      color: white;
    }
  
    .accordion-content {
      display: none;
      padding: 10px;
      background-color: #fafafa;
      border-left: 2px solid #4a7d9e;
      margin-bottom: 5px;
    }

    body.dark-mode .accordion-content {
      background-color: rgb(60, 60, 60);
    }

    .lowBorder01 {
      border-radius: 3px !important;
    }

    .lowBorder02 {
      border-bottom-right-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }

    .folderInfo {
      border: 1px solid rgb(74, 125, 158);
      border-style: solid;
      box-shadow: 10px 10px 20px 0px #4a7d9e73;
      min-height: 100%;
    }

    .card-header-title {
      color: black;
    }
    
    body.dark-mode .card-header-title {
      color: white;
    }

    body.dark-mode .folderInfo {
      border: 1px solid #4a4a4a;
      box-shadow: 10px 10px 20px 0px #00000073;
    }

    /* Styl galerii */
    .gallery-fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      display: block;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      text-align: center; 
      backdrop-filter: blur(1rem);
    }

    .gallery-container {
      position: relative;
      max-width: 100%; 
      margin: 0 auto;
    }

    .gallery-image {
      width: 100%; 
      height: auto;
      max-height: 90vh; 
      object-fit: contain; 
      margin-top: 20px; 
    }

    .prev-arrow, .next-arrow {
      background: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
      border: none;
    }

    .prev-arrow:hover, .next-arrow:hover {
      opacity: 0.7;
    }

    .close-gallery {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
      border: none;
      padding: 20px;
    }

    .close-gallery:hover {
      opacity: 0.7;
    }

    .image-description {
      text-align: center;
      margin-top: 10px;
    }

    .image-title {
      color: white;
      font-size: 18px;
      margin-top: 10px; /* Odstęp między obrazkiem a tytułem */
    }

    .zoom-in {
      font-size: 30px;
      cursor: pointer;
      background: none;
      color: white;
      border: 1px solid white;
      padding: 5px 15px;
      border-radius: 5px;
    }

    .zoom-in:hover {
      opacity: 0.7;
    }

    .content01 {
      margin-top: 3rem;
    }

    .content02 {
      margin-top: 1rem;
    }

    .cctext_1 {
      font-weight: 500;
      color: black;
      font-size: 18px;
      line-height: 2rem;
      text-align: justify;
    }

    .cctext_2 {
      font-weight: 300;
      font-style: italic;
      color: black;
      font-size: 14px;
      line-height: 1.4rem;
    }

    .cctext_3 {
      font-weight: 400;
      color: black;
      font-size: 16px;
      line-height: 2rem;
      text-align: justify;
    }

    .cctext_4 {
      font-weight: 400;
      color: #8d92a3;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      font-style: italic;
      margin-top: 10px;
    }

    .cctext_5 {
      font-weight: 500;
      font-size: 9px;
      line-height: 1rem;
      text-align: justify;
    }

    .box .cctext_1{
      color: white;
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-size: 20px;
    }

    .box .cctext_2{
      color: white;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-size: 14px;
      font-style: normal;
    }

    
    .box .cctext_3{
      color: white;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-size: 16px;
      font-style: normal;
      text-transform: uppercase;
      font-style: italic;
    }


    .infonews_title {
      color: rgb(148, 177, 205);
      font-weight: bold;
      font-size: 1.2rem;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .card {
      background-color: white;
      border: 1px solid gray;
      color: black;
      font-size: 14px;
      border-radius: 0;
    }

    .menucontentSlider {
      border: 1px solid rgb(74, 125, 158);
      border-radius: 3px;
      cursor: pointer;
      background: rgba(155, 191, 215, 0.18);
    }

    .clearfix {
      height: 30px;
      width: 30px;
      margin-top: 30px;
      clear: both;
    }

    .footerContainer {
      display: flex;
      max-width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background-color: white;
      color: steelblue;
      box-shadow: 0px 5px 20px #53a0d0;
      padding: 5px;
      clear: both;
      text-align: center;
      border-top: 3px solid rgb(83, 160, 208);
      z-index: 10;
    }
    
    .footer_col3 {
      align-items: center;
      justify-content: center;
      display: flex;
    }

    .footer_col3, .footer_col1 {
      max-width: 40%;
      width: 100%;
    }
  
    .footer_col2 {
      max-width: 60%;
      width: 100%;
      align-items: center;
      justify-content: center;
      display: flex;
    }

    .footerIcons, .footerIcons2, .footerIcons3 {
      color: white;
      font-size: 14px;
    }

    .footerIcons3 {
       color: rgb(113, 154, 187);
    }
    
    .footerIcons3:hover {
      color: rgb(74, 125, 158);
    }

    .news-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 1.5rem;
      height: 100%;
      display: flex;
      flex-direction: column;
  }

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    
    .card-content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .card-date {
        color: #888;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .pagination {
        margin-top: 2rem;
    }

    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        height: 1em;
        margin-bottom: 0.5em;
    }
    
    .skeleton-card {
        height: 200px;
        display: flex;
        flex-direction: column;
    }
    
    .skeleton-title {
        width: 80%;
        height: 1.5em;
    }
    
    .skeleton-text {
        width: 100%;
    }
    
    .skeleton-date {
        width: 40%;
        margin-top: auto;
    }
    
    @keyframes skeleton-loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
    
    .content-container {
        display: none;
    }
    
    .content-container.loaded {
        display: flex;
    }
    
    .skeleton-container {
        display: flex;
    }
    
    .skeleton-container.loaded {
        display: none;
    }
    
    #article-detail {
        display: none;
        animation: fadeIn 0.3s ease;
    }
    
    #news-list {
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .back-button {
        margin-bottom: 1rem;
    }
    
    .flex-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .flex-column {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        width: 100%; 
    }

    .pagination-link.is-current, .pagination-link.is-selected {
      background: #4a7d9e;
      border: #3d6884;
      color: white;
    }

    .pagination-link, .pagination-next, .pagination-previous {
      color: gray;
      border: 1px solid #818181;
    }

    .title.is-3 {
      color: black;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .subtitle_2 {
      font-size: 14px;
      color: black;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .news_content {
      color: black;
    }

    .message-body {
      background-color: white;
      color: #404654;
    }

    .msg_headerTiny {
      background-color: rgb(184, 203, 217);
      border-radius: 0;
      border-color:rgb(62, 118, 139);
    }

    strong, h1 strong {
      color: #4a7d9e !important;
    }

    .label {
      color: #404040;
    }

    .select, .select.is-fullwidth, .select.is-fullwidth select, .input, .select select, .textarea {
      background-color: gainsboro;
      border-color: gray;
      color: black;
    }
    
    .input::placeholder {
      color: gray;
    }
    
    .panel-heading {
      background-color: #4a7d9e;
      border: 0;
      border-radius: 0;
      padding: 10px;
      font-size: 14px;
    }
    
    body.dark-mode .panel-heading {
      background-color: #2e333d;
    }

    .folderBlockMain {
      background-color: #87abc3;
      padding: 0;
      border-bottom: 0;
    }

    body.dark-mode .folderBlockMain {
      background-color: #1e1e1e;
    }

    .folderData {
      border-radius: 0px;
    }

    body.dark-mode .folderData {
      box-shadow: none;
    }

    .actionBtn {
      background-color: #4a7d9e;
      color: white;
      border: none;
      border-radius: 3px;
      padding: 10px;
      cursor: pointer;
      margin-left: 5px;
    }

    .linkData, .panel-block:last-child {
      border-radius: 0px;
      color: black;
    }

    body.dark-mode .linkData, body.dark-mode .panel-block:last-child {
      color: white;
    }

    a.panel-block:hover, label.panel-block:hover {
      background-color: #414f59;
      color: white;
    }

    body.dark-mode .input {
      background-color: #222222;
      border-color: #2a2a2a;
      color: white;
    }

    body.dark-mode .input::placeholder {
      color: gray;
    }

    .table td {
      background-color: #f5f5f5;
      color: black !important;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      border-bottom: 1px solid #4a7d9e;
    }

    .filename-cell {
      max-width: 980px; /* Adjust this value as needed */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      word-wrap: break-word;
      break-after: auto;
      text-wrap: auto;
    }

    .table th {
      background-color: #87abc3;
      color: white;
      border-style: none;
    }

    body.dark-mode .table td {
      background-color: #333;
      color: white !important;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      border-bottom: 1px solid #4a4a4a;
    }

    body.dark-mode .table th {
      background-color: #1e1e1e;
      color: white;
      border-style: none;
    }

    .download-link {
      color: #3273dc;
      text-decoration: none;
    }

    body.dark-mode .download-link {
      color: #84a7df;
    }

    .download-link:hover {
      text-decoration: underline;
    }

    .action-btn {
      /* margin-left: 5px; */
      border: none;
      cursor: pointer;
      background-color: #ffffff00;
      color:rgb(110, 129, 143);
      background-color: #d1d2d2;
    }

    body.dark-mode .action-btn {
      background-color: #202021;
      color: white;
    }

    .star-btn:hover {
      color: #c5b141;
    }

    .info-btn:hover {
      color: #3273dc;
    }

    .que-btn:hover {
      color: #f87070;
    }

    .dln-btn:hover {
      color: #50ae31;
    }

    body.dark-mode .star-btn:hover {
      color: gold;
    }

    body.dark-mode .info-btn:hover {
      color: #83adf0;
    }

    body.dark-mode .que-btn:hover {
      color: #5dc53a;
    }

    body.dark-mode .dln-btn:hover {
      color: #f57272;
    }

    #fileModal {
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(5px);
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-x: auto;
      overflow-y: auto;
    }

    body.dark-mode #fileModal {
      z-index: 1;
      background-color: rgba(32, 32, 32, 0.8);
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-x: auto;
      overflow-y: auto;
    }

    .fileSection {
      position: fixed;
      height: auto;
      min-height: 25vh;
      max-height: 75vh;
      overflow: auto;
      width: 50%;
      top: 15vh;
      left: 25vw;
      border-top: 5px solid steelblue;
      background: #fff;
      -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 40%);
      padding: 20px;
      color: black;
    }

    body.dark-mode .fileSection {
      position: fixed;
      height: auto;
      width: 50%;
      top: 15vh;
      left: 25vw;
      border-top: 5px solid gray;
      background: rgb(60, 60, 60);
      -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 40%);
      z-index: 999999;
      color: white;
    }

    .fileSectionHeader {
      color: #4a7d9e;
      font-size: 24px;
      text-transform: uppercase;
      margin: 0 auto;
      display: block;
      font-weight: bold;
    }

    body.dark-mode .fileSectionHeader {
      color: rgb(190, 190, 190);
    }

    #closeFileModal {
      position: absolute;
      top: 20px;
      right: 20px;
    }

    .panel-block:not(:last-child), .panel-tabs:not(:last-child) {
      border-bottom: none; 
    }
    
    #userPanel {
      position: fixed;
      top: 56px;
      right: 15px;
      width: 420px;
      height: 380px;
      background: #ffffffd1;
      box-shadow: #69748ca3 5px 5px 10px 0px;
      border-radius: 0 0 3px 3px;
      border: 1px solid #414f59;
      z-index: 9999;
      overflow: hidden;
      left: auto;
      transform: none;
      backdrop-filter: blur(1rem);
      color: white;
      display: none;
      color: black;
      border-top: 2px solid rgb(74, 125, 158);
    }

    .message, #email_header {
      color: white;
      font-size: 10px;
    }

    .content03 {
      line-height: 1.8em;
      background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)), url(../images/menu_items/2.jpg);
      background-size: cover;
      background-position: right center;
      box-sizing: content-box;
      font-size: 15px;
      color: rgb(0, 0, 0);
      border-radius: 5px 5px 0 0;
      text-align: justify;
      height: auto;
      border: 1px solid rgba(44, 154, 218, 0.671);
      border-bottom: 5px solid rgba(44, 154, 218, 0.671);
      margin-top: 0;
      padding: 20px;
    }

    .menu_header {
      font-family: "Raleway", sans-serif;
      font-size: 18px;
      text-transform: uppercase;
      font-weight: 600;
      color: white;
      padding: 20px;
      background-color: #5a8fb3;
      border-radius: 5px;
      text-align: center;
    }

    body.dark-mode .menu_header {
      background-color: #2a485c;
    }

    .menu_list {
      margin: 20px 0 20px 20px;
    }

    .menu_list li {
      padding: 5px 0;
      font-size: 16px;
    }

    .link_href {
      color: #3d6884;
    }
    
    .link_href:hover {
      color:rgb(128, 187, 224);
    }

    .file-row:hover {
      background-color: #f5f5f5 !important;
    }

    .downloadHero {
      max-height: 320px;
      background-color: #2e333d;
      border: 0;
      box-shadow: none;
    }

    .download-container {
      margin-top: 5rem;
      background: #1e1e1e;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  }

  .container-box {
    background: rgba(155, 191, 215, 0.18);
    padding: 3rem;
    border-radius: 3px;
    backdrop-filter: blur(10px);
    max-width: 80vw;
    margin: 0 auto;
    text-align: center;
    border: 1px solid rgb(74, 125, 158);
  }

  body.dark-mode .container-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #474747;
  }

  .icon-box {
      width: 128px;
      height: 128px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      margin: auto;
      font-weight: bold;
  }
  
  .server-buttons {
      margin: 25px 0;
  }
  
  .server-buttons button {
      margin: 5px;
  }

  .info-box {
      padding: 10px;
      margin-top: 10px;
      text-align: left;
  }
  
  .downloadSection1 {
    text-align: left;
  }

  .description_1 {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: rgb(50, 77, 102);
  }

  .description_2 {
      font-size: 1rem;
      margin-bottom: 10px;
      color: rgb(50, 77, 102);
  }

  .description_3 {
      font-size: 0.7rem;
      text-align: left;
      color: #ccc;
      font-style: italic;
      color: rgb(50, 77, 102);
  }

  body.dark-mode .description_3, 
  body.dark-mode .description_2, 
  body.dark-mode .description_1 {
      color: #aaa;
  }

  .tableColDownload {
    border: 1px solid gray;
    margin: 0.5rem 0;
    border-radius: 3px;
  }

  .tableCellDownload {
    font-weight: bold;
    border-right: 2px solid rgb(74, 125, 158);
    background: rgb(74, 125, 158);
    color: white;
  }

  /* Kontener paska statystyk */
  .file-stats-container {
      border-radius: 8px;
      padding: 15px 5px;
      margin-bottom: 20px !important;
  }

  .stat-box {
      border-right: 1px solid #878787; /* Linia oddzielająca */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .stat-box:last-child {
      border-right: none;
  }

  @media (max-width: 768px) {
      .stat-box:nth-child(2) { border-right: none; } 
      .stat-box:nth-child(1), .stat-box:nth-child(2) { margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 15px;} 
      .stat-box { border-bottom: none; }
  }

  .stat-icon-head {
      font-size: 2rem;
      color: #6b97b0; 
      margin-bottom: 5px;
      opacity: 0.8;
  }

  body.dark-mode .stat-icon-head {
      color: #aaa;
  }

  .stat-value {
      font-size: 1.1rem;
      font-weight: 700;
      color: #363636;
      line-height: 1.2;
  }

  .stat-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #888;
      margin-top: 2px;
  }

  /* Dostosowanie loadera żeby był ładny w kafelku */
  .is-loading-inline {
      width: 16px;
      height: 16px;
      border: 2px solid #dbdbdb;
      border-top-color: #3273dc;
      border-radius: 50%;
      animation: spinAround 500ms infinite linear;
      display: inline-block;
  }

  @keyframes spinAround {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
  }

  body.dark-mode .tableCellDownload {
    border-right: 2px solid gray;
    background: rgb(96, 96, 96);
  }

  #file-content, #file-size, #file-rating, #file-downloads, #file-date {
    color: black;
  }

  body.dark-mode #file-content, body.dark-mode #file-size, body.dark-mode #file-rating, body.dark-mode #file-downloads, body.dark-mode #file-date {
    color: #aaa;
  }

  .fileviewerInfo {
    font-size: 14px;
    max-height: 500px;
    overflow: auto;
  }

  #loading-container {
    margin-bottom: 2rem;
    color: black;
  }

  body.dark-mode #loading-container {
      color: #aaa !important;
  }

  .is-fixed-btn {
    background-color: rgba(0,0,0,0) !important; 
    margin: 0 5px;
  }

  .loader {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid rgb(74, 125, 158);
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 0.75s linear infinite;
    border-left: 4px solid rgb(74, 125, 158);
    border-bottom: 4px solid rgb(74, 125, 158);
    margin-right: 1rem;
    position: relative;
    top: 5px;
  }

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


/* Proste style dla tabeli archiwum - tryb jasny */
.simple-archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 1rem;
  color: #333;
  table-layout: fixed; /* Ważne dla kontroli szerokości kolumn */
}

/* Szerokości kolumn */
.simple-archive-table th:nth-child(1), 
.simple-archive-table td:nth-child(1) {
  width: 45%; /* Kolumna z nazwami plików */
  word-break: break-word; /* Pozwala na łamanie długich nazw plików */
}

.simple-archive-table th:nth-child(2), 
.simple-archive-table td:nth-child(2) {
  width: 15%; /* Kolumna z rozmiarem */
}

.simple-archive-table th:nth-child(3), 
.simple-archive-table td:nth-child(3) {
  width: 15%; /* Kolumna z typem */
}

.simple-archive-table th:nth-child(4), 
.simple-archive-table td:nth-child(4) {
  width: 25%; /* Kolumna z datą modyfikacji */
}

.simple-archive-table thead {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
}

.simple-archive-table th {
  padding: 10px 5px; /* Zmniejszone padding dla mniejszej szerokości */
  text-align: left;
  font-weight: 600;
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.simple-archive-table th:hover {
  background-color: #e9e9e9;
}

.simple-archive-table td {
  padding: 8px 5px; /* Zmniejszone padding dla mniejszej szerokości */
  border-bottom: 1px solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specjalne ustawienia dla komórki z nazwą pliku */
.simple-archive-table td:first-child {
  white-space: normal; /* Pozwala na zawijanie tekstu */
  overflow-wrap: break-word;
}

.simple-archive-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.simple-archive-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Kontener tabeli ze scrollowaniem */
.archive-table-container {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 100%; /* Ustawiona szerokość tabeli */
  max-width: 100%; /* Responsywność */
}

/* Style dla podsumowania */
.archive-summary {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px 15px;
  margin-top: 15px;
  font-size: 14px;
  width: 100%; /* Dopasowanie do szerokości tabeli */
  max-width: 100%; /* Responsywność */
}

.archive-summary p {
  margin: 5px 0;
}

/* Tryb ciemny */
body.dark-mode .simple-archive-table {
  color: #e0e0e0;
  background-color: #2a2a2a;
}

body.dark-mode .simple-archive-table thead {
  background-color: #333333;
  border-bottom: 2px solid #444;
}

body.dark-mode .simple-archive-table th {
  background-color: #333333;
  color: #fff;
}

body.dark-mode .simple-archive-table th:hover {
  background-color: #3a3a3a;
}

body.dark-mode .simple-archive-table td {
  border-bottom: 1px solid #444;
}

body.dark-mode .simple-archive-table tbody tr {
  background-color: #2a2a2a;
}

body.dark-mode .simple-archive-table tbody tr:nth-child(even) {
  background-color: #323232;
}

body.dark-mode .simple-archive-table tbody tr:hover {
  background-color: #3e3e3e;
}

body.dark-mode .archive-table-container {
  border: 1px solid #444;
  background-color: #2a2a2a;
}

body.dark-mode .archive-summary {
  background-color: #333333;
  color: #e0e0e0;
  border: 1px solid #444;
}

/* Dodatkowe style dla czytelności w trybie ciemnym */
body.dark-mode .archive-info h4 {
  color: #e0e0e0;
}

/* Style dla scrollbara w trybie ciemnym */
body.dark-mode .archive-table-container::-webkit-scrollbar {
  width: 12px;
}

body.dark-mode .archive-table-container::-webkit-scrollbar-track {
  background: #333333;
}

body.dark-mode .archive-table-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 6px;
  border: 3px solid #333333;
}

.filter-panel.panel, .group-panel.panel, .queue-panel.panel {
    backdrop-filter: blur(0.7rem);
    position: fixed;
    top: 0px;
    right: 0px;
    width: 380px;
    height: 100vh;
    background-color: rgba(245, 245, 245, 0.9);
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
    box-shadow: rgba(74, 125, 158, 1) -5px 0px 15px;
    padding: 1rem;
    border-radius: 0;
    border-left: 1px solid rgb(74, 125, 158);
}

body.dark-mode .filter-panel.panel, body.dark-mode .group-panel.panel, body.dark-mode .queue-panel.panel {
    backdrop-filter: blur(0.7rem);
    position: fixed;
    top: 0px;
    right: 0px;
    width: 380px;
    height: 100vh;
    background-color: rgba(12, 12, 12, 0.9);
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 1) -5px 0px 15px;
    padding: 1rem;
    border-radius: 0;
    border-left: 1px solid rgb(71, 83, 98);
}

body.dark-mode .queue-panel.panel > .panel-block, .queue-panel.panel > .panel-block {
  background-color: transparent !important;
}

.panel-block .box {
    background: #324d66 !important;
    border-radius: 3px;
    color: white;
}

body.dark-mode .panel-block .box {
    background: #1e1e1e !important;
    border-radius: 3px;
    color: white;
}

.group-panel.panel {
    z-index: 1000;
}

.scheme-option {
    display: block !important;
    padding: 12px;
    margin: 8px 0;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.scheme-option:hover {
    border-color: #3273dc;
    background-color: #f8f9fa;
}

body.dark-mode .scheme-option:hover {
  background-color: #333333;
}

.scheme-option input[type="radio"]:checked + .scheme-info {
    color: #3273dc;
}

.scheme-option input[type="radio"]:checked + .scheme-info strong {
    color: #3273dc;
}

.scheme-option:has(input[type="radio"]:checked) {
    border-color: #3273dc;
    background-color: #f0f7ff;
}

.scheme-info {
    display: block;
    margin-left: 8px;
}

.scheme-info strong {
    display: block;
    margin-bottom: 4px;
}

.scheme-description {
    font-size: 0.85em;
    color: #666;
    display: block;
}

.scheme-tooltip {
    position: fixed;
    background: white;
    border: 2px solid #3273dc;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-width: 300px;
    font-size: 13px;
    z-index: 1001;
}

.scheme-tooltip .tooltip-header {
    font-weight: bold;
    color: #3273dc;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.scheme-tooltip .tooltip-content {
    color: #666;
    line-height: 1.4;
}

.group-header {
    background: transparent !important;
}

.group-header-cell {
    border: none !important;
    padding: 0 !important;
}

.group-navigation-menu {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 999;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 260px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.group-navigation-menu:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.group-navigation-menu .menu-header {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #3273dc;
    color: #333;
    text-align: center;
}

.group-navigation-menu .menu-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 4px 0;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 13px;
    cursor: pointer;
    gap: 8px;
}

.group-navigation-menu .menu-item:hover {
    background-color: #f5f5f5;
    color: #3273dc;
    transform: translateX(4px);
}

.group-navigation-menu .menu-item.is-active {
    background-color: #3273dc;
    color: white;
    font-weight: bold;
    transform: translateX(4px);
}

.group-navigation-menu .item-icon {
    min-width: 20px;
    text-align: center;
}

.group-navigation-menu .item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-navigation-menu .item-count {
    background: rgba(50, 115, 220, 0.1);
    color: #3273dc;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

.group-navigation-menu .menu-item.is-active .item-count {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

body.dark-mode .group-navigation-menu {
  background-color: rgb(35, 35, 35);
  border-radius: 3px;
}

body.dark-mode .group-navigation-menu .menu-item {
  color: white;
}

body.dark-mode .group-navigation-menu .menu-item:hover {
    background-color: #000000;
    color: #76797e;
    transform: translateX(4px);
}

.scheme-option {
  border-radius: 3px !important;
}

body.dark-mode .scheme-option {
  border-color: #313131;
  border-radius: 3px !important;
}

.menu-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    min-height: 24px;
}

@keyframes slideInRight {
    from {
transform: translateX(100%);
opacity: 0;
    }
    to {
transform: translateX(0);
opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
transform: translateX(0);
opacity: 1;
    }
    to {
transform: translateX(100%);
opacity: 0;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .group-navigation-menu {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      margin-bottom: 20px;
      width: 100%;
    }
}

/* Scroll behavior */
.group-navigation-menu {
    scrollbar-width: thin;
    scrollbar-color: #3273dc #f1f1f1;
}

.group-navigation-menu::-webkit-scrollbar {
    width: 6px;
}

.group-navigation-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.group-navigation-menu::-webkit-scrollbar-thumb {
    background: #3273dc;
    border-radius: 3px;
}

.group-navigation-menu::-webkit-scrollbar-thumb:hover {
    background: #2366d1;
}


.check {
        color: green;
        font-size: 1.2em;
        margin-right: 5px;
    }

    .login-notification {
        margin-top: 20px;
        padding: 20px;
        background-color: #f0f8ff;
        color: #333;
        border-radius: 5px;
    }

    body.dark-mode .login-notification {
        background-color: #333;
        color: #fff;
    }

    .login-notification ul {
        list-style: none;
        padding-left: 0;
    }
    
    .stxt_1 {
        font-size: 1.2em;
        margin-bottom: 20px;
        color: black;
    }

    body.dark-mode .stxt_1 {
        color: #fff;
    }

    .login-container {
        margin-top: 3rem;
    }

    /* Nowy układ dla pól formularza z captcha */
    .form-with-captcha {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
        align-items: start;
        margin: 20px 0;
    }

    .form-fields {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .captcha-sidebar {
        display: flex;
        min-height: 100%;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 0px;
        border: 1px solid #e9ecef;
        flex-direction: column;
        align-items: center;
    }

    body.dark-mode .captcha-sidebar {
        background: #181818;
        border-color: #434345;
        border-radius: 0px;
    }

    .formLoginElement {
      background: white;
      border-radius: 0px;
      border-color: gray;
    }

    /* Dla małych ekranów - captcha pod formularzem */
    @media (max-width: 768px) {
        .form-with-captcha {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .captcha-sidebar {
            min-height: auto;
            padding: 20px;
            text-align: center;
        }

        .captcha-sidebar .subtitle {
            font-size: 1.1em;
        }

        .captcha-sidebar p {
            font-size: 0.85em;
        }

        .captcha-sidebar .verification-icon {
            font-size: 1.5em;
            margin: 10px 0;
        }
    }

    /* Alternatywny układ - captcha w tym samym wierszu co ostatnie pole */
    .field-with-captcha {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 15px;
        align-items: end;
        margin: 15px 0;
    }

    .captcha-inline {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        background: #f8f9fa;
        border-radius: 5px;
        border: 1px solid #e9ecef;
        min-height: 65px;
        text-align: center;
    }

    body.dark-mode .captcha-inline {
        background: #181818;
        border-color: #434345;
        border-radius: 0px;
    }

    .captcha-inline .inline-text {
        font-size: 0.8em;
        color: #666;
        margin-bottom: 8px;
        line-height: 1.2;
    }

    body.dark-mode .captcha-inline .inline-text {
        color: #cbd5e0;
    }

    @media (max-width: 768px) {
        .field-with-captcha {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    /* Stylizacja dla małych widget'ów captcha */
    .cf-turnstile {
        margin: 0 auto;
    }


  .group-section {
      position: relative;
      padding-bottom: 1rem;
      border-bottom: 1px solid #eee;
  }

  .group-section:last-child {
      border-bottom: none;
  }

  #delete-group-select {
      margin-bottom: 0.5rem;
  }

  .dropdown-menu {
      min-width: 200px;
  }

  .notification-message {
      z-index: 9999;
  }


  .suggestion-box {
    border: 1px solid #eaeaea;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
    background: white;
}

  .suggestion-box:hover {
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  body.dark-mode .suggestion-box {
    background-color: #121212;
  }

  body.dark-mode .suggestion-title {
    background-color: #000;
  }

.suggestion-title {
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 600;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eaeaea;
    border-radius: 6px 6px 0 0;
}

.suggestion-content {
    padding: 15px;
    min-height: 200px; /* Ensure consistent height */
}

.suggestion-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suggestion-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.suggestion-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.suggestion-link {
    display: flex;
    align-items: center;
    color: #4a4a4a;
    transition: all 0.2s ease;
}

.suggestion-link:hover {
    color: #3273dc;
}

.suggestion-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.suggestion-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.suggestion-name {
    font-weight: 500;
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-all;
    text-align: left;
}

.suggestion-meta {
    font-size: 0.8rem;
    color: #7a7a7a;
    text-align: left;
}

.category-tag {
    display: inline-block;
    background-color: #f0f0f0;
    color: #4a4a4a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-left: 6px;
}

/* For dark mode compatibility */
.dark-mode .suggestion-box {
    border-color: #404040;
    background-color: #282828;
}

.dark-mode .suggestion-title {
    background-color: #333;
    border-color: #404040;
}

.dark-mode .suggestion-item {
    border-color: #404040;
}

.dark-mode .suggestion-link {
    color: #e0e0e0;
}

.dark-mode .suggestion-meta {
    color: #b0b0b0;
}

.dark-mode .category-tag {
    background-color: #444;
    color: #e0e0e0;
}

.dark-mode .suggestion-link:hover {
    color: #66b3ff;
}

/* Make suggestions section responsive */
@media screen and (max-width: 768px) {
    .columns {
        display: block;
    }
    
    .column {
        width: 100%;
        margin-bottom: 20px;
    }
}
  
.table-header {
  background-color: #2d3748;
}

.table-body  {
  background-color: #f7fafc;
}

body.dark-mode .table-header {
  background-color: black;
}

body.dark-mode .table-body {
  background-color: #151515;
}

.verification-tooltip {
    position: absolute;
    width: 300px;
    background: #fffef4;
    border: 1px solid #ffd447;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 999;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    animation: tooltipFadeIn 0.3s;
}

.verification-tooltip.is-success {
    border: 1px solid #7fdb7a;
    background: #f4fff4;
}

.verification-tooltip.is-warning {
    border: 1px solid #ffd447;
    background: #fffef4;
}

.tooltip-arrow {
    position: absolute;
    top: -10px;
    left: 20px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffd447;
}

.verification-tooltip.is-success .tooltip-arrow {
    border-bottom-color: #7fdb7a;
}

.tooltip-header {
    padding: 8px 10px;
    font-weight: bold;
    border-bottom: 1px solid #ece9d8;
    color: gray;
    background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%);
}

.tooltip-body {
    padding: 10px;
}

.tooltip-body ul {
    margin: 0;
    padding-left: 15px;
}

.tooltip-body li {
    margin-bottom: 5px;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

body.dark-mode .verification-tooltip {
    background: #2c2c2c;
    border: 1px solid #444;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    color: #e0e0e0;
}

body.dark-mode .verification-tooltip.is-success {
    border: 1px solid #2a6e29;
    background: #1e3a1e;
}

body.dark-mode .verification-tooltip.is-warning {
    border: 1px solid #7d6300;
    background: #3a3000;
}

body.dark-mode .tooltip-arrow {
    border-bottom: 10px solid #444;
}

body.dark-mode .verification-tooltip.is-success .tooltip-arrow {
    border-bottom-color: #2a6e29;
}

body.dark-mode .verification-tooltip.is-warning .tooltip-arrow {
    border-bottom-color: #7d6300;
}

body.dark-mode .tooltip-header {
    border-bottom: 1px solid #444;
    color: #80b3ff;
    background: linear-gradient(to bottom, #333333 0%, #222222 100%);
}

body.dark-mode .tooltip-body {
    color: #e0e0e0;
}

body.dark-mode .verification-tooltip.is-success .tooltip-header {
    color: #7fdb7a;
}

body.dark-mode .verification-tooltip.is-warning .tooltip-header {
    color: #ffd447;
}

body.dark-mode #fileVerified1.button.is-success.is-outlined {
    border-color: #2a6e29;
    color: #7fdb7a;
}

body.dark-mode #fileVerified2.button.is-warning.is-outlined {
    border-color: #7d6300;
    color: #ffd447;
}

body.dark-mode #fileVerified1:hover, 
body.dark-mode #fileVerified2:hover {
    background-color: rgba(255, 255, 255, 0.1);
}    

/* Prefixes and predefined styles for dark theme:  */
  
  body.dark-mode .loader {
    border-left: 4px solid #aaa;
    border-bottom: 4px solid #aaa;
    border-top: 4px solid #aaa;
  }

  body.dark-mode {
    background-color: #121212;
    color: #f0f0f0;
  }

  body.dark-mode .navbar {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.781);
    background-color: #000;
    border-bottom: 2px solid rgb(48, 48, 48);
  }

  body.dark-mode .navbar-link {
    color: white;
  }

  body.dark-mode .custom-hero {
    background-color: #1e1e1e;
  }

  body.dark-mode .title {
    color: white;
  }

  body.dark-mode .logo-light {
    display: none;
  }
  
  body.dark-mode .logo-dark {
    display: block;
  }

  body.dark-mode .navbar-link.is-active {
    background-color: rgb(74, 125, 158);
    color: white;
    transition: background-color 0.3s ease, font-weight 0.3s ease;
  }

  body.dark-mode .navbar-dropdown {
    background-color: rgb(30, 30, 30);
    border-radius: 0;
    border: 1px solid rgb(74, 125, 158);
    box-shadow: 2px 2px 10px 0px rgb(32, 32, 32);
  }

  body.dark-mode .navbar-dropdown a.navbar-item:not(.is-active,.is-selected) {
    background-color: rgb(30, 30, 30);
    color: white;
  }

  body.dark-mode a.navbar-item.nocolor,
  body.dark-mode a.navbar-item.nocolor:hover,
  body.dark-mode a.navbar-item.nocolor:active,
  body.dark-mode a.navbar-item.nocolor:focus {
    background-color: transparent !important;
  }

  body.dark-mode .hero-body {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(64, 64, 64, 0.5);
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.45);
  }

  body.dark-mode .subtitle {
    color: #4c4c4c;
  }

  body.dark-mode .title {
    color: rgb(150,150,150);
  }

  body.dark-mode .hero.has-background {
    background-color: #1e1e1e;
    background-image: url('../images/menu_items/bkg2.jpg');
  }

  body.dark-mode .cctext_1, body.dark-mode .cctext_2, body.dark-mode .cctext_3, body.dark-mode .cctext_5 {
    color: gray;
  }

  body.dark-mode .card {
    background-color: #333;
    border: 1px solid #4a4a4a;
    color: gray;
    border-radius: 0;
    box-shadow: none;
  }

  body.dark-mode .menucontentSlider {
    border: 1px solid #333;
    border-radius: 5px;
  }

  body.dark-mode #sliderImage {
    filter: drop-shadow(2px 4px 6px black) invert(0.1) brightness(1.2);
  }

  body.dark-mode .headerButton {
    background: #2a2a2a;
    color: gray;
    box-shadow: none;
  }

  body.dark-mode .footerContainer {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.781);
    border-top: 3px solid rgb(48, 48, 48);
    background: black;
    color: white;
    z-index: 10;
  }

  body.dark-mode .footerIcons {
    color: #e2e2e2;
    background-color: #6b0015;
  }

  body.dark-mode .footerIcons2 {
    color: #e2e2e2;
    background-color: #102e3f;
  }

  body.dark-mode .footerIcons3 {
    color: #e2e2e2;
  }

  body.dark-mode .footerIcons3:hover {
      color: rgb(118, 165, 198);
  }

  body.dark-mode .skeleton {
    background: linear-gradient(90deg, #333 25%, #2c2c2c 50%, #333 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 3s infinite;
    border-radius: 4px;
    height: 1em;
    margin-bottom: 0.5em;
  }

  body.dark-mode .subtitle_2, body.dark-mode .title.is-3  {
    color: gray;
  }

  body.dark-mode .news_content {
    color: gray;
  }

  body.dark-mode .message-body {
    background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-background-l));
    color: gray;
  }

  body.dark-mode strong {
    color: #c3c3c3 !important;
  }

  body.dark-mode .select, 
  body.dark-mode .select.is-fullwidth, 
  body.dark-mode .select.is-fullwidth select {
    background-color: #333;
    border-color: #2a2a2a;
    color: white;
  }

  body.dark-mode .label {
    color: #c3c3c3;
  }

  body.dark-mode .content03 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(24, 24, 24, 0.85)), url(../images/menu_items/2b.jpg);
    background-size: cover;
    background-position: right center;
    color: darkgray;
    border: 1px solid rgba(64, 64, 64, 0.671);
    border-bottom: 5px solid rgba(64, 64, 64, 0.671);
  }


  body.dark-mode #userPanel {
    background: rgba(0, 0, 0, 0.65);
    box-shadow: #000000a3 5px 5px 10px 0px;
    border-radius: 0 0 3px 3px;
    border: 1px solid #4a4a4a;
    color: white;
    border-top: 2px solid rgb(48, 48, 48);
  }
  
  /* Media low-width // mobile screen CSS styles:  */

  /* Table/div adjustments for mobile view:  */
  
  @media screen and (min-width: 769px) {
    .flex-column {
        width: 50%; 
    }
  }

  @media screen and (max-width: 1220px) {
    .filename-cell {
      max-width: 560px; 
    }
    .action-btn {
      font-size: 14px;
    }
  }

  @media screen and (max-width: 960px) {
    .filename-cell {
      max-width: 460px; 
      font-size: 14px;
    }
  }

  @media screen and (max-width: 820px) {
    .filename-cell {
      max-width: 300px; 
      font-size: 12px;
    }
    .action-btn {
      font-size: 12px;
    }
    .actions-container {
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      max-width: 100%;
    }
    .table-header {
      font-size: 12px;
    }
  }

  @media screen and (max-width: 540px) {
    .filename-cell {
      max-width: 200px; 
      font-size: 12px;
    }
    .action-btn {
      font-size: 12px;
    }
    .actions-container {
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      max-width: 100%;
    }
  }

  @media screen and (min-width: 1024px) {
      .flex-column {
          width: 33.333%; 
      }
  }

  /* Other adjustments for mobile view:  */

  @media screen and (max-width: 1023px) {
    .navbar-menu {
      background-color: white;
      border: 0;
    }
  
    .navbar-item.has-dropdown {
      padding: 0;
    }
    
    .navbar-dropdown {
      background-color: #f5f5f5;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      display: none;
      left: 0;
      position: static;
      top: 100%;
      z-index: 20;
      padding: 0;
    }
  
    .navbar-item.has-dropdown.is-active .navbar-dropdown {
      display: block;
    }
    
    .navbar-link.is-active {
      background-color: transparent;
      font-weight: normal;
      color: black;
    }
    
    .navbar-item,
    .navbar-link {
      color: #4a4a4a;
      display: block;
      line-height: 1.5;
      padding: 0.5rem 0.75rem;
      position: relative;
    }

    #navbarMenu > div.navbar-start i {
      margin-right: 1rem;
    }
    
    .navbar-item:hover,
    .navbar-link:hover {
      background-color: #fafafa;
    }

    .hero.has-background {
      background-position: bottom;
      bottom: 30px;
      border-radius: 0;
    }

    .content01, .content02, .container {
      margin-top: 0;
      padding: 20px !important;
    }


    .footer_col1, .footer_col3 {
      display: none;
    }

    .footer_col2 {
      max-width: 100%;
      width: 100%;
    }

    .fileSection {
      width: 90% !important;
      left: 5vw !important;
      top: 10vh !important;
      max-height: 720px;
      overflow-y: auto;
      padding-bottom: 40px;
    }

    #fileModal .columns {
      padding: 0;
    }

    .extra-options {
      flex-direction: column;
      gap: 10px;
    }
  
    /* Mobile fixes for dark mode style */

    body.dark-mode .navbar-menu {
      background-color: #333;
    }

    body.dark-mode .navbar-dropdown {
      background-color: rgb(30, 30, 30);
      border-radius: 0;
      border: 0;
      box-shadow: none;
    }

    body.dark-mode .navbar-dropdown a.navbar-item:not(.is-active,.is-selected) {
      background-color: #333;
      color: white;
    }

    body.dark-mode .navbar-dropdown {
      background-color: #2c2c2c;
      border-top: 1px solid #4a4a4a;
    }
    
    body.dark-mode .navbar-link.is-active {
      background-color: transparent;
      color: white;
    }

    body.dark-mode .navbar-item,
    body.dark-mode .navbar-link {
      color: #f5f5f5;
    }
    
    body.dark-mode .navbar-item:hover,
    body.dark-mode .navbar-link:hover {
      background-color: #4a4a4a;
    }
  }

input[type='checkbox'] {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
    right: 10px;
}

.checkbox {
  margin: 0 0 0 20px;
}

.ex_Loader_1 {
  text-align: center; 
  padding: 50px 200px; 
  border-radius: 3px; 
}

.ex_Loader_2 {
  margin-top: 1rem; 
  color: #000000ff; 
  font-weight: 500;
}

body.dark-mode .ex_Loader_2 {
  color: rgb(255, 255, 255); 
}

body > .skiptranslate {
    display: none !important;
}

iframe.goog-te-banner-frame {
    display: none !important;
}

.goog-tooltip:hover {
    display: none !important;
}

.goog-tooltip {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

.db-stats-container h2, .db-stats-container h3 { 
  color: #0056b3; 
  padding-bottom: 5px; 
  margin-top: 20px; 
}

.db-stats-container .info-box { 
  background-color: #f8f9fa; 
  border: 1px solid #dee2e6; 
  border-radius: 5px; 
  padding: 15px; 
  margin-bottom: 20px; 
}

.db-stats-container .info-box p { 
  margin: 5px 0; 
}

.db-stats-container .changes-list { 
  list-style-type: none; 
  padding-left: 0; 
}

.db-stats-container .changes-list li { 
  padding: 8px 12px; 
  margin-bottom: 5px; 
  border-radius: 4px; 
  word-break: break-all; 
}

.db-stats-container .change-added { 
  background-color: #d4edda; 
  color: #155724; 
  border-left: 5px solid #28a745; 
}

.db-stats-container .change-removed { 
  background-color: #f8d7da; 
  color: #721c24; 
  border-left: 5px solid #dc3545; 
}

.db-stats-container .change-updated { 
  background-color: #fff3cd; 
  color: #856404; 
  border-left: 5px solid #ffc107; 
}

.db-stats-container .no-changes { 
  color: #888; 
  }

.db-stats-container .error-box { 
  background-color: #f8d7da; 
  color: #721c24; 
  border: 1px solid #f5c6cb; 
  padding: 15px; 
  border-radius: 5px; 
}

.db-stats-container .history-item { 
  border: 1px solid #ddd; 
  border-radius: 5px; 
  margin-bottom: 10px; 
  background-color: #fff; 
}

.db-stats-container .history-item summary { 
  padding: 10px; 
  font-weight: bold; 
  cursor: pointer;
  outline: none; 
  background-color: #f7f7f7; 
}

.db-stats-container .history-item[open] summary { 
  border-bottom: 1px solid #ddd; 
}

.db-stats-container .log-content { 
  padding: 15px; 
  background-color: #fdfdfd; 
  white-space: pre-wrap; 
  word-wrap: break-word; 
  font-size: 13px; 
  color: #444; 
}

body.dark-mode .db-stats-container h2,
body.dark-mode .db-stats-container h3 {
  color: #80b3ff;
}

body.dark-mode .db-stats-container .info-box {
  background-color: #2d3748;
  border: 1px solid #4a5568;
}

body.dark-mode .db-stats-container .changes-list li {
  color: #cbd5e0;
}

body.dark-mode .db-stats-container .change-added {
  background-color: #2f855a;
  color: #c6f6d5;
  border-left: 5px solid #38a169;
}

body.dark-mode .db-stats-container .change-removed {
  background-color: #c53030;
  color: #fed7d7;
  border-left: 5px solid #e53e3e;
}

body.dark-mode .db-stats-container .change-updated {
  background-color: #dd6b20;
  color: #fefcbf;
  border-left: 5px solid #ed8936;
}

body.dark-mode .db-stats-container .no-changes {
  color: #a0aec0;
}

body.dark-mode .db-stats-container .error-box {
  background-color: #2d3748;
  color: #f56565;
  border: 1px solid #c53030;
}

body.dark-mode .db-stats-container .history-item {
  background-color: #1a202c;
  border: 1px solid #2d3748;
}

body.dark-mode .db-stats-container .history-item summary {
  background-color: #2d3748;
  color: #cbd5e0;
}

body.dark-mode .db-stats-container .log-content {
  background-color: #1a202c;
  color: #e2e8f0;
}

.errorMessage {
  box-shadow: 0 4px 24px rgba(220,53,69,0.15); 
  background-color: rgba(248, 215, 218); 
  border-color: #f5c6cb; 
  color: #721c24;
}

.errorImage { 
  width: 45%; 
  height: auto; 
  position: fixed; 
  bottom: 0; 
  right: -5vw; 
  z-index: -1; 
  pointer-events: none;
}


body.dark-mode .errorMessage {
  box-shadow: 0 4px 24px rgba(220,53,69,0.15); 
  background-color: rgb(104, 18, 18); 
  border-color: #f5c6cb; 
  color: #f5c6cb;
}

.hero-apps {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(68, 115, 154, 0.4)), url(../images/menu_items/apps.jpg);
    background-size: cover;
    background-position: center;
    color: darkgray;
}

body.dark-mode .hero-apps {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(68, 115, 154, 0.7)), url(../images/menu_items/apps.jpg);
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.file-details-container, .description_1, #file-name-display {
  word-wrap: break-word;
  word-break: break-all;
}

.header {
    text-align: center;
    padding: 60px 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    margin-bottom: 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.header p {
    font-size: 1.3rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 60px 0;
}

.stat-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

body.dark-mode .stat-card {
    background: rgba(40, 40, 40, 0.9);
    color: #f0f0f0;
}

.stat-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

body.dark-mode .stat-number {
    color: #c7c7c7;
}

.stat-label {
    font-size: 1.1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    margin: 40px 0;
    /* ADDED */
    background: none;
    color: black;
}

body.dark-mode .content-section {
    background: transparent;
    color: #f0f0f0;
}

.content-section h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}

body.dark-mode .content-section h2 {
    color: #c7c7c7;
}

.content-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

.content-section p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-align: justify;
    line-height: 1.8;
}

.timeline {
    position: relative;
    margin: 40px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin: 40px 0;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    width: 45%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

body.dark-mode .timeline-content {
    background: rgba(40, 40, 40, 0.9);
    color: #f0f0f0;
}

.timeline-content p {
  font-size: 0.9rem;
  margin-top: 10px;
}

.timeline-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #667eea;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    z-index: 10;
}

.tech-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 8px 0;
}

.tech-item {
border-radius: 6px;
padding: 8px 16px;
margin: 4px 0;
font-size: 1rem;
display: flex;
align-items: center;
}

.tech-item a {
color: #3273dc;
text-decoration: underline;
margin-left: 6px;
}

.tech-item strong {
margin-right: 6px;
}

@media (max-width: 768px) {
.tech-list {
  flex-direction: column;
  gap: 8px;
}
.tech-item {
  width: 100%;
  justify-content: flex-start;
}
}       
       
.ui-experimental {
  display: none;
}

.categoryNotAvailable {
    display: none;
    position: relative;
    margin-top: 10px;
    padding: 20px;
    background-color: rgb(237 237 237);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-weight: 500;
}

body.dark-mode .categoryNotAvailable {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #cbd5e0;
}

/* #metadataContent {
  line-height: 1.6;
  font-size: 14px;
  max-height: 55vh;
  max-width: 100%;
  overflow: auto;
  margin: 0 auto;
  background: white;
  color: black;
}

#metadataContent * {
  background-color: white !important;
  color: black;
}

#metadataContent h1, #metadataContent h2, #metadataContent h3, #metadataContent h4, #metadataContent h5, #metadataContent h6 {
border-bottom:  none;
}

.mw-body {
  position: relative;
  top: -5vh;
}

body.dark-mode #metadataContent {
  background: #3c3c3c;
  color: white;
}

body.dark-mode #metadataContent * {
  background-color: transparent !important;
  color: white;
}

body.dark-mode #metadataContent .mw-headline, body.dark-mode #metadataContent .mw-page-title-main {
  color: white;
} */


/* Poprawione style dla kontenera metadanych */
#metadataContent {
  line-height: 1.6;
  font-size: 14px;
  max-height: 55vh;
  max-width: 100%;
  overflow: auto;
  margin: 0 auto;
  background: transparent;
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

/* Usuń zbyt agresywne wymuszanie kolorów */
#metadataContent img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Zachowaj oryginalne style nagłówków */
#metadataContent h1, 
#metadataContent h2, 
#metadataContent h3, 
#metadataContent h4, 
#metadataContent h5, 
#metadataContent h6 {
  border-bottom: none;
  margin: 1em 0 0.5em 0;
  font-weight: bold;
}

#metadataContent h1 { font-size: 1.8em; }
#metadataContent h2 { font-size: 1.5em; }
#metadataContent h3 { font-size: 1.3em; }

/* Style dla tabel */
#metadataContent table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

#metadataContent th,
#metadataContent td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

#metadataContent th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* Style dla list */
#metadataContent ul,
#metadataContent ol {
  margin: 1em 0;
  padding-left: 2em;
}

#metadataContent li {
  margin: 0.5em 0;
}

/* Style dla linków */
#metadataContent a {
  color: #0066cc;
  text-decoration: none;
}

#metadataContent a:hover {
  text-decoration: underline;
}

/* Responsywność */
@media (max-width: 768px) {
  #metadataContent {
    font-size: 13px;
    padding: 10px;
    max-height: 60vh;
  }
}

/* Dark mode support */
body.dark-mode #metadataContent {
  /* background: #2c2c2c; */
  color: white;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.3); */
}

body.dark-mode #metadataContent th {
  background-color: #404040;
  color: #e0e0e0;
}

body.dark-mode #metadataContent td {
  border-color: #555;
}

body.dark-mode #metadataContent a {
  color: #66b3ff;
}

body.dark-mode #metadataContent * {
  color: white;
}

body.dark-mode #metadataContent code{
  background-color: black !important;
  color: yellow;
}

body.dark-mode #metadataContent .infobox-label {
  background-color: black;
}

body.dark-mode #metadataContent .infobox-data {
  background-color: #1f1f1f;
}

body.dark-mode #metadataContent .youtube-item {
background-color: #4e4e4e;
}

body.dark-mode #metadataContent .youtube-content.active {
  background-color: #3c3c3c;
}

body.dark-mode #metadataContent .youtube-toggle {
  background-color: #676767;
}

/* Pozycjonowanie dla niektórych elementów MediaWiki */
#metadataContent .mw-body {
  position: static;
  top: auto;
}

#metadataContent .gallery-item {
  border-radius: none;
}

body.dark-mode #metadataContent .gallery-item {
    text-align: center;
    background: #2e2e2e;
    border: 1px solid #101010;
    padding: 10px;
}

#metadataContent .container {
  padding: 0px;
}

/* Poprawki dla konkretnych elementów */
#metadataContent .infobox {
  float: right;
  clear: right;
  margin: 0 0 1em 1em;
  max-width: 300px;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  padding: 5px;
}

body.dark-mode #metadataContent .infobox {
  background-color: #2f2f2f;
  border-color: #666;
}

/* Zapewnij że obrazki się ładują */
#metadataContent img[src] {
  display: block;
  margin: 1em auto;
}

#metadataContent .modal-content {
    max-width: 70%;
    position: relative;
    top: 10vh;
}


.kbMenu {
  background-color: rgb(175, 194, 206);
  border-radius: 5px;
}

body.dark-mode .kbMenu {
  background-color: rgb(25, 32, 37);
}

.kbItemlink a {
  background: none;
  font-size: 14px;
  cursor: pointer;
  color: rgb(60, 60, 60);
}

#menuContainer > ul > li > a{
  background-color: rgb(175, 194, 206);
  color: rgb(60, 60, 60);
}

#menuContainer > ul > li > a:hover{
  background: rgb(155, 191, 215);
}

.menu-label:hover {
  cursor: pointer;
  font-weight: bold;
  color: rgb(110, 129, 143);
}

body.dark-mode .kbItemlink, body.dark-mode .kbItemlink a {
  color: white;
}

.kbItemlink a:hover {
  background: rgb(155, 191, 215);
}

body.dark-mode .kbItemlink:hover, body.dark-mode .kbItemlink a:hover {
  background: #273d47;
}

body.dark-mode #menuContainer > ul > li > a{
  color: white;
  background: transparent;
}

body.dark-mode #menuContainer > ul > li > a:hover{
  background: #273d47;
}

#contentArea {
    max-width: 100%;
    overflow-x: auto;
}

#contentArea pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 1rem !important;
    background-color: rgb(110, 129, 143);
    border-radius: 4px !important;
    font-family: "Raleway", sans-serif;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: white;
}

body.dark-mode #contentArea pre {
  background-color: rgb(26, 30, 34);
}

#contentArea img {
    max-width: 600px !important;
    height: auto !important;
    border-radius: 4px !important;
    margin: 1rem 0 !important;
}

#contentArea h1 {
    font-size: 2rem !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

#contentArea .texttag {
    background-color: #3273dc !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 1rem 0 !important;
}

#contentArea li {
    margin: 0.5rem 0 !important;
}

@media screen and (max-width: 768px) {
    .columns.is-gapless {
flex-direction: column !important;
    }
    
    .column.is-3 {
width: 100% !important;
flex: none !important;
    }
    
    #contentArea pre {
font-size: 0.75rem !important;
padding: 0.75rem !important;
    }
}

/* Scrollbar dla obszaru treści */
#contentArea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#contentArea::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#contentArea::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#contentArea::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}


#contentArea .texttag  {
    background: linear-gradient(90deg, #51ab3c, #102e3f);
    padding: 10px;
    color: white;
    width: 90%;
    display: inline-block;
    border-radius: 3px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    position: relative;
    margin-bottom: -32px;
    display: block;
    margin: 0 auto;
    text-align: center;
 }

#contentArea .info {
     color: orangered;
     font-weight: bold;
 }

  #contentArea .pre code {
    background: #1b1b1b !important;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    background: none;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 50vw;
    min-width: 100px;
    font-size: 16px;
    padding: 15px 20px 12px 22px;
    line-height: 1.75;
    overflow-x: auto;
  }

/* Nagłówek polecanej zawartości */
.recommended-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(45deg, rgba(0, 191, 255, 0.2), rgba(0, 150, 255, 0.1));
}

.recommended-header h2 {
  color: #00bfff;
  font-size: 24px;
  margin: 0 0 8px 0;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.recommended-header p {
  color: #cccccc;
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}

.video-grid-container {
  width: 90%;
  height: 65vh;
  gap: 10px;
  display: grid;
  margin: 0 auto;
}

.video-item {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.video-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 8px;
  font-size: 12px;
  text-align: center;
}

.grid-5-videos {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-5-videos .video-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.grid-5-videos .video-2 {
  grid-column: 2;
  grid-row: 1;
}

.grid-5-videos .video-3 {
  grid-column: 3;
  grid-row: 1;
}

.grid-5-videos .video-4 {
  grid-column: 2;
  grid-row: 2;
}

.grid-5-videos .video-5 {
  grid-column: 3;
  grid-row: 2;
}

.grid-4-videos {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-4-videos .video-1 {
  grid-column: 1;
  grid-row: 1 / 4;
}

.grid-4-videos .video-2 {
  grid-column: 2;
  grid-row: 1;
}

.grid-4-videos .video-3 {
  grid-column: 2;
  grid-row: 2;
}

.grid-4-videos .video-4 {
  grid-column: 2;
  grid-row: 3;
}

.grid-3-videos {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-3-videos .video-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.grid-3-videos .video-2 {
  grid-column: 2;
  grid-row: 1;
}

.grid-3-videos .video-3 {
  grid-column: 2;
  grid-row: 2;
}

/* 2 filmy: obok siebie */
.grid-2-videos {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* 1 film: pełny ekran */
.grid-1-video {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Responsywność */
@media (max-width: 768px) {
  .video-grid-container {
    height: 400px;
  }
  
  .grid-5-videos,
  .grid-4-videos,
  .grid-3-videos {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .grid-5-videos .video-1,
  .grid-4-videos .video-1,
  .grid-3-videos .video-1 {
    grid-column: 1;
    grid-row: auto;
  }
  
  .video-title {
    font-size: 10px;
    padding: 4px;
  }
}

body.dark-mode .folderLogo_iColor {
filter: contrast(0.5) invert(0.5) brightness(2);
}

.folderLogo_iColor {
  filter: contrast(1);
}

.loaderPageContent {
    position: relative;
    top: -60px;
    padding-top: 60px;
    min-height: 100vh;
    height: auto;
}


.menuTagColor_1 {
  background-color: #516d83;
  color: white;
}

.menuTagColor_2 {
    background-color: #dfdfdf;
    color: black;
}

body.dark-mode .menuTagColor_2 {
    background-color: #3a3a3a;
    color: white;
}

body.dark-mode .menuTagColor_1 {
    background-color: #2c3e50;
    color: white;
}


.generalBElement01 {
  background: none;
  box-shadow: none;
  padding: 10px;
  border: 0;
}

.generalBElement02 a {
    background: #ccecff;
    margin: 5px;
    color: black;
}

body.dark-mode .generalBElement02 a {
    background: #303030;
    color: white;
}


ul.menu-list.downloaded-files-list {
  word-break: break-all;
  font-size: 14px;
  text-transform: uppercase;
  font-style: italic;
}

.menu-list a.is-active {
  background-color: #0066cc;
  color: white;
}

body.dark-mode .menu-list a.is-active {
  background-color: #43515f;
}

.container-fixedWidth {
  max-width: 100% !important;
  width: 90% !important;
  margin: 20px auto !important;
}

.image-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thumbnail {
  width: 90px;
  height: 64px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}

.notification {
  background-color: #d0d6dc !important;
  color: black;
}

body.dark-mode .notification {
  background-color: #444 !important;
  color: white;
}

/* --- MODERN RADIO BUTTONS  --- */
.script-options-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.script-radio-label {
    flex: 1;
    cursor: pointer;
    position: relative;
}

.script-radio-input {
    display: none; /* Ukrywamy standardowe kółko */
}

.script-radio-card {
    border: 2px solid #dbdbdb;
    border-radius: 6px;
    padding: 10px 5px;
    text-align: center;
    transition: all 0.2s ease;
    background: #fff;
    color: #4a4a4a;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.script-radio-card i {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #888;
}

.script-radio-card span {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Dark Mode dla kart */
body.dark-mode .script-radio-card,
html[data-theme='dark'] .script-radio-card {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}

/* Stan zaznaczenia */
.script-radio-input:checked + .script-radio-card {
    border-color: #3273dc; /* Kolor Primary */
    background-color: #f0f8ff;
    color: #3273dc;
}

body.dark-mode .script-radio-input:checked + .script-radio-card {
    background-color: #1e2a3b;
    border-color: #3273dc;
}

.script-radio-input:checked + .script-radio-card i {
    color: #3273dc;
}

/* Znacznik "ptaszek" (Checkmark) */
.check-icon {
    display: none;
    font-size: 0.8rem;
    margin-top: 5px;
}

.script-radio-input:checked + .script-radio-card .check-icon {
    display: block;
}

.server-buttons-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 10px;
    flex-wrap: nowrap; 
    width: 100%;
}

.server-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}

.dropdown-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
    .server-buttons-wrapper {
        flex-direction: row; 
    }

    .server-buttons .button {
        flex: 1; 
        min-width: 120px;
        font-size: 0.85rem;
    }
    .actions-dropdown .button {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    .actions-dropdown .button span:first-child {
        display: none; 
    }
    .actions-dropdown .button .icon {
        margin: 0 !important;
    }
    .actions-dropdown .button::after {
        content: '\f0c9';
        font-family: "Font Awesome 6 Free"; 
        font-weight: 900;
    }
    .actions-dropdown .button i.fa-angle-down {
        display: none;
    }
}

body:not(.dark-mode) .actions-dropdown .dropdown-trigger .button {
    background-color: #ffffff;   
    border-color: #dbdbdb;     
    color: #363636;             
}

body:not(.dark-mode) .actions-dropdown .dropdown-trigger .button:hover,
body:not(.dark-mode) .actions-dropdown.is-active .dropdown-trigger .button {
    background-color: #f9f9f9;   
    border-color: #b5b5b5;      
    color: #1a1a1a;             
}

/* 2. Rozwijana lista (Kontener menu) */
body:not(.dark-mode) .actions-dropdown .dropdown-menu .dropdown-content {
    background-color: #ffffff;  
    border: 1px solid #f0f0f0;      
}

body:not(.dark-mode) .actions-dropdown .dropdown-item {
    color: #4a4a4a;             
    background-color: transparent;
}

body:not(.dark-mode) .actions-dropdown .dropdown-item:hover {
    background-color: #f5f5f5;   
    color: #3273dc;             
}