/* Bramka logowania */
.icon {
    font-size: 24px;
    color: #4089dd; /* Kolor niebieski */
}
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 400px;
    min-height: 200px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 25px;
    padding-bottom: 15px;
    text-align: center;
    margin: 20px;
    border: 1px solid rgba(0, 0, 0, 0.2); /* ramka 1 piksel z przezroczystym kolorem */
    border-radius: 10px; /* zaokrąglone rogi */
    /* filter: blur border(1px);  */
    color: #6d6d6d;
}

/* General css */
body {
    background-color: #1e2124; /* Nowy kolor tła */
    color: #c7c7c7; /* Nowy kolor tekstu */
    cursor: default;
    padding-bottom: 150px;
  }
  button:hover {
      cursor: default;
  }
  a {
      text-decoration: none;
      color: #c7c7c7; /* Nowy kolor tekstu */
      cursor: default;
  }
  a:hover {
      color: #ccc; /* Kolor przy kliknięciu nad linkiem */
      cursor: default;
  }

  .podswietlaj-plus-rogi a {
    color: inherit;
    color: #4c4b4b;
  }

  .podswietlaj-plus-rogi a:hover {
    color: inherit;
    color: #6b6b6b;
  }
  

  div:hover {
      cursor: default;
  }
  .no-border {
      border: none !important;
  }
  .no-fill {
      background-color: transparent !important;
  }
  .sidebar a:hover {
    background-color: #9da2a8; /* Nowy kolor tła dla linku po najechaniu myszką */
  }
  .main-content {
    margin-left: 0px; /* Szerokość menu bocznego */
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #2c2f33; /* Nowy kolor tła dla stopki */
    padding: 0px 0;
    text-align: center;
    color: #b8c2cc; /* Nowy kolor tekstu dla stopki */
  }

  .custom-checkbox {
  background-color: grey; /* Kolor tła checkboxa */
  border-color: grey;     /* Kolor obramowania checkboxa */
  }

  /* Styl dla aktywnego switcha */
  .custom-checkbox:checked {
      background-color: grey; /* Kolor tła checkboxa dla aktywnego switcha */
      border-color: grey;     /* Kolor obramowania checkboxa dla aktywnego switcha */
  }

  /* Domyślne style dla elementu ::after (ikonki) dla nieaktywnego switcha */
  .custom-checkbox::after {
      background-color: grey; /* Kolor tła ikonki checkboxa */
      border-color: grey;     /* Kolor obramowania ikonki checkboxa */
  }

  /* Style dla elementu ::after (ikonki) dla aktywnego switcha */
  .custom-checkbox:checked::after {
      background-color: grey; /* Kolor tła ikonki checkboxa dla aktywnego switcha */
      border-color: grey;     /* Kolor obramowania ikonki checkboxa dla aktywnego switcha */
  }

  .dark-mode {
    background-color: #121212; /* Kolor tła w trybie ciemnym */
    color: #9b9b9b; /* Kolor tekstu w trybie ciemnym */
  }
  .dark-mode a {
      background-color: #121212; /* Kolor tła w trybie ciemnym */
    color: #606169; /* Kolor tekstu w trybie ciemnym */
  }
  .dark-mode a:hover {
    background-color: #121212; /* Kolor tła w trybie ciemnym */
    color: #ababab; /* Kolor tekstu w trybie ciemnym */
  }
  
  .klej {
    display: flex;
    justify-content: space-between;
  }
  .klej > div {
      flex: 1;
      /* min-width: 100px; Dostosuj minimalną szerokość według potrzeb */
      padding: 8px; /* Dostosuj wewnętrzny odstęp według potrzeb */
      box-sizing: border-box; /* Zapobiega zwiększaniu rozmiaru diva z powodu paddingu */
      /* text-align: left; Opcjonalnie: dostosuj dla wycentrowanego tekstu */
  }
  .tylko-klej {
      margin: 2px;
      display: flex;
      justify-content: space-between;
  }
  .tylko-klej > div {
      flex: 1;
      box-sizing: border-box; /* Zapobiega zwiększaniu rozmiaru diva z powodu paddingu */
  }
  .jasne {
      background-color: #1a1a1a;
      color: #e4e4e4;
      border-radius: 10px;
  }
  .podswietlaj :hover {
      background-color: #d2d2d2;
      color: #2c2f33;
  }

  .podswietlaj-plus-rogi:hover {
    background-color: #d2d2d2;
    color: #2c2f33;
    border-radius: 10px;
}
  .rogi > div{
      border-radius: 10px;
  }

  .sub-panel {
      background-color: #1a1a1a;
      border-radius: 5px;
      padding: 4px;
      font-size: small;
      
  }
  .team_button_domy {
    background-color: #007f00 !important;
  }
  .team_button_budownictwo {
    background-color: #7f0000 !important;
  }
  .team_button_elitehome {
    background-color: #656565 !important;
  }
  .team_button_instalacje {
    background-color: #a79900 !important;
  }
  .team_button_investment {
    background-color: #050505 !important;
  }
  .team_button_development {
    background-color: #003fb4 !important;
  }

 .estate_button {
    background-color: #5e6d73 !important;
  }
.team-heads {
    border-radius: 7px;
    font-size: 14pt;
    text-align: left;
    font-weight: bold;
    color:#969696;
    padding: 5px;
    margin: 5px;
}
.team-drops {
    border-radius: 10px;
    background-color: #121212;
    border: #393939 dotted 2px;
    text-align: left;
    padding: 15px;
    margin: 15px;
}
.team-drops-out {
    width: 100% ;
    justify-content: center;
}
.team-drops-in {
    width: 100% !important; 
    min-width: 300px !important; 
    min-height: 120px !important;
    display: flex;
    flex-wrap: wrap; /* Pozwala na zawijanie do następnej linii */
    gap: 10px; /* Opcjonalnie: odstęp między elementami */
    justify-content: flex-start; /* Wyrównanie elementów do lewej */
}


.avatar {
    max-height: 150px;
    min-width:  150px;
    max-width: 100%;
    border-radius: 50%;
}

.avatar-sm {
  width: 100%; 
  height: auto; /* Automatycznie dostosowuje wysokość, zachowując proporcje */
  max-width: 200px; 
  border-radius: 50%; 
}

.avatar-lg {
  width: 100%; 
  height: auto; /* Automatycznie dostosowuje wysokość, zachowując proporcje */
  max-width: 400px; 
  border-radius: 50%; 
}

.avatar-xl {
  width: 100%; 
  height: auto; /* Automatycznie dostosowuje wysokość, zachowując proporcje */
  max-width: 500px; 
  border-radius: 50%; 
}


  .avatar-mini {
    max-height: 25px;
    min-width:  25px;
    max-width: 100%;
    border-radius: 50%;
    border: #0e1d13 solid thin;
}
  .table-creator {
      width: 100%;
      padding: 8px;
  }
  .formatuj {
      font-size: 16px;
      margin: 10px;
  }
  .formatuj-maly {
      font-size: 13px;
      margin: 10px;
      color: #6d6d6d;
      max-width: 60px;
  }

  .formatyj-maly-wiersz {
      font-size: 11px;
      margin: 4px;
  }
  .formatyj-max-height {
      max-height: 15px;
  }
  .formatuj-maly-logout {
      font-size: 13px;
      margin: 10px;
      min-width: 300px;
      text-align: right;
      color: #6d6d6d;
  }
  .formatuj-maly-font {
      font-size: 13px;
  }
  .formatuj-margin {
      margin: 10px;
  }
  .formatuj-margin-top {
    margin-top: 10px;
}

.formatuj-margin-left {
  margin-left: 10px;
}
  .formatuj-left {
      text-align: left;
  }
  .formatuj-right {
      text-align: right;
  }
  .formatuj-bottom {
      margin-top: 12px;
  }
  .formatuj-padding{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .formatuj-padding-1{
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .formatuj-padding-lg{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .formatuj-padding-xl{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .formatuj-inputs {
    max-height: 30px; 
    font-size: 12px;
    background-color: #1e2124;
    color: #9da2a8; 
    border: #393939 solid 1px;
    border-radius: 5px;
    transition: background-color 0.3s;  /* Dodane przejście animacji dla płynnego efektu */
    }
    .formatuj-inputs-setting,
    .formatuj-inputs-setting label {
        font-size: 12px;
        background-color: #1e2124;
        color: #9da2a8; 
        border: #393939 solid 1px;
        border-radius: 5px;
        transition: background-color 0.3s;
        padding: 3px;
        outline: none; /* Wyłączanie domyślnego outline na :focus */
    }

    .formatuj-inputs-setting:focus,
    .formatuj-inputs-setting label:focus {
        background-color: #1e2124;
        color: #9da2a8; 
    }

    .formatuj-inputs-setting:active,
    .formatuj-inputs-setting label:active {
        background-color: #1e2124;
        color: #9da2a8; 
    }
    
    .formatuj-inputs:active {
        background-color: #3e4142;  /* Nowy kolor tła po kliknięciu */
        color: #9da2a8; 
    }
    .formatuj-inputs:hover, .formatuj-inputs:focus {
        background-color: #33383b;  /* Nowy kolor tła po najechaniu myszą lub po wybraniu pola */
        color: #9da2a8; 
    }
  .formatuj-header {
      font-size: 16px;
      margin-top: 5px;
      margin-left: 5px;
      margin-right: 8px;
      background-color: #111317; /* Kolor tła */
      border-bottom: #ababab solid 1px;
      font-weight: bold;
  }
  
  .formatuj-light-line {
      font-size: 16px;
      margin-left: 5px;
      margin-right: 8px;
      background-color: #1c2026; /* Kolor tła */
      border-bottom: #ababab solid 1px;
  }
  .formatuj-dark-line {
      font-size: 16px;
      margin-left: 5px;
      margin-right: 8px;
      background-color: #22272e; /* Kolor tła */
      border-bottom: #ababab solid 1px;
  }
  .formatuj-list {
    font-size: 13px;
    background-color: #1e1e1e; /* Kolor tła */
    color: #ababab;
  }
  .column-id {
      max-width: 75px;
      flex: 0 0 75px; /* Ustawia sztywną szerokość na 75px, ale nie pozwala na rozszerzanie */
      padding: 8px;
      /* box-sizing: border-box; */
      text-align: left;
  }
  .column-expand {
  flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
  padding: 8px;
  box-sizing: border-box;
  text-align: left;
  }

  @media (max-width: 576px) {
      .column-expand {
          min-width: 100%; /* Ustawienie minimalnej szerokości na 100% na małych ekranach */
      }
  }

  @media (min-width: 576px) and (max-width: 768px) {
      .column-expand {
          min-width: 75%; /* Ustawienie minimalnej szerokości na 75% na ekranach średnich */
      }
  }

/* Dodaj więcej media queries według potrzeb dla innych rozmiarów ekranu */

  .column-usual {
      flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
      padding: 8px;
      box-sizing: border-box;
      text-align: left;
  }
  .column-ender {
      min-width: 300px;
      flex: 0 0 300px; /* Ustawia sztywną szerokość na 300px, ale nie pozwala na rozszerzanie */
      padding: 8px;
      box-sizing: border-box;
      text-align: right;
  }
  .colapse-column-id {
      max-width: 75px;
      flex: 0 0 75px;
      padding: 12px;
      box-sizing: border-box;
      text-align: center;
      display: flex;
      align-items: center;
      border-radius: 10px;
  }
  .colapse-column-expand {
      min-width: 500px;
      flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
      padding: 12px;
      box-sizing: border-box;
      text-align: left;
  }
  .colapse-column-usual {
      flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
      padding: 12px;
      box-sizing: border-box;
      text-align: left;
  }
  
  .colapse-column-ender {
      min-width: 300px;
      flex: 0 0 300px; /* Ustawia sztywną szerokość na 300px, ale nie pozwala na rozszerzanie */
      padding: 12px;
      box-sizing: border-box;
      text-align: right;
      border-radius: 10px;
  }
  .colapse-column-id-mini {
      max-width: 75px;
      flex: 0 0 75px;
      padding: 5px;
      box-sizing: border-box;
      text-align: center;
      display: flex;
      align-items: center;
      border-radius: 7px;
      font-weight: bold;
  }
  .colapse-column-expand-mini {
      min-width: 768px;
      flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
      padding: 5px;
      box-sizing: border-box;
      text-align: left;
      border-radius: 7px;
  }
  .colapse-column-usual-mini {
      flex: 1; /* Rozciąga się elastycznie do dostępnego miejsca */
      padding: 5px;
      box-sizing: border-box;
      text-align: left;
      border-radius: 7px;
  }
  .colapse-column-ender-mini {
      max-width: 300px;
      flex: 0 0 300px; /* Ustawia sztywną szerokość na 300px, ale nie pozwala na rozszerzanie */
      padding: 5px;
      box-sizing: border-box;
      text-align: right;
      border-radius: 7px;
  }
  .przyklejone-divy {
      position: fixed; /* Określa, żeby elementy były przyklejone do okna przeglądarki */
      top: 0; /* Określa odległość od góry */
      right: 0; /* Określa, że elementy mają być przylepione do prawej strony */
      min-width: 25%;
      padding-top: 15px;
  }
  .user-data {
      padding-left: 5px;
  }
  .user-data-width {
      max-width: 150px;
      padding-left: 5px;
  }
  .oc-height {
      height: fit-content;
  }
  .oc-width {
      width: 800px;
  }
  .alpha {
      opacity: 0.52;
  }
  .no-alpha {
      opacity: 1;
  }
  .list-item {
    margin-bottom: 10px;
  }
  .logo-frame {
    background-color: #000000;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 15px;
    margin-left: 50px;
    width: max-content;
    font-size: 28px;
    border-radius: 10px;
  }

  /* Dostosuj kolor tła i kolor tekstu dla paginacji */
.pagination {
    background-color: transparent ; /* Kolor tła */
}

.pagination a, .pagination span {
    color: grey; /* Kolor tekstu */
}

/* Dostosuj styl dla aktywnej strony */
.pagination .page-item.active a {
    background-color: #2c2f33; /* Kolor tła dla aktywnej strony */
    border-color: grey; /* Kolor obramowania dla aktywnej strony */
}

.pagination li {
    background-color: #2c2f33; /* Kolor tła dla aktywnej strony */
}
/* Dostosuj styl dla przycisku "Previous" */
.pagination .page-item:first-child .page-link {
    margin-left: 0; /* Usuń odstęp z lewej strony */
}

/* Dostosuj styl dla przycisku "Next" */
.pagination .page-item:last-child .page-link {
    margin-right: 0; /* Usuń odstęp z prawej strony */
}

.custom-icon-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: default;
    outline: none;
}

.custom-icon-button:hover {
cursor: default;
}

.profil-desc {
font-size: 14px;
max-width: 120px;
text-align: justify;
color:#969696;
}
.profil-content {
    font-size: 14px;
    text-align: justify;
    /* color:#d5d5d5; */
}
.profil-content-email {
    font-size: 14px;
    text-align: justify;
    color:#d9d8d8;
}
.profil-info {
    font-size: 11px;
    text-align: justify;
    color:#969696;
}

#home, #team {
  margin-bottom: 20px;
}

.ramka_tekstu {
    background-color: black;
    color: #ccc;
    border: 1px solid #ccc;
    border-radius: 10%;
    margin-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 3px;
}

.active-color-bg {
    background-color: #0e1d13 !important;
}

.input-warning {
    border: 1px solid red !important; /* czerwona obramówka dla błędnych pól */
}

.horizontal-list {
    list-style-type: none; /* Usuwa domyślne punktory */
    margin: 0; /* Resetuje domyślny margines */
    padding: 0; /* Resetuje domyślne paddingi */
    display: flex; 
    /* Włącza Flexbox */
    flex-wrap: wrap;
    flex-direction: row; /* Ustawia elementy listy poziomo */
    align-items: center; /* Opcjonalnie, wyrównuje elementy listy do środka w pionie */
  }
  
  .horizontal-list li {
    margin-right: 20px; /* Dodaje odstęp między elementami listy; dostosuj według potrzeb */
  }
  
  .horizontal-list li:last-child {
    margin-right: 0; /* Usuwa margines z prawej strony ostatniego elementu listy */
  }

  .formatuj-hover {
    background-color: transparent;
  }

  .formatuj-hover:hover {
    background-color: #33383b;
  }

.drop-area-video {
    width: 90%;
    /* height: 200px; */
    border: 2px dashed #7d7d7d;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px;
}

.slot-info-gold {
  border: 2px #f5d400;
  background-color: #150e04;
  color:#f5d400;
  border-radius: 5px;
  padding: 15px;
}
.slot-info-silver {
  border: 2px #768081;
  background-color: #090b0e;
  color:#768081;
  border-radius: 5px;
  padding: 15px;
}
.slot-info-green {
  border: 2px #0fef07;
  background-color: #19211a;
  color:#0fef07;
  border-radius: 5px;
  padding: 15px;
}

.slot-line-gold {
  border: 1px solid #f5d400;
  background-color: #150e04;
  color:#f5d400;
  border-radius: 5px;
  padding: 5px;
  font-size: 10px;
}
.slot-line-silver {
  border: 1px solid #768081;
  background-color: #090b0e;
  color:#768081;
  border-radius: 5px;
  padding: 5px;
  font-size: 10px;
}
.slot-line-green {
  border: 1px solid #0fef07;
  background-color: #19211a;
  color:#0fef07;
  border-radius: 5px;
  padding: 5px;
  font-size: 10px;
}

.drop-area {
    width: 80%;
    height: 200px;
    border: 2px dashed #7d7d7d;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px;
}

.drop-area h3 {
    color: #6d6d6d;
}

.drop-area.highlight {
    border-color: #666;
    background-color: #33383b;
}

.formatuj-bg-dropbox-list {
    background-color: #33383b;
}

.drop-box-close-button {
    max-height: 18px !important;
    max-width: 18px !important;
}

.btn-close.drop-box-close-button {
    width: 12px; 
    height: 12px;   
}

/* FadeIn effect */
.fadeIn {
    animation: fadeInEffect 0.5s ease forwards;
}
/* Style bazowe dla linków */
.fadeIn a {
    opacity: 0.3;  /* Początkowa przezroczystość */
    transform: translateY(3px); /* Początkowe przesunięcie */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Gładkie przejścia dla przezroczystości i przesunięcia */
}

/* Efekt fadeIn przy najechaniu */
.fadeIn a:hover {
    opacity: 1;
    transform: translateY(0);
}

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

/* FadeOut effect */
.fadeOut {
    animation: fadeOutEffect 0.5s ease forwards;
}

@keyframes fadeOutEffect {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-3px);
    }
}

.dark-mode-data-career {
    background-color: #212529; /* Ciemne tło dla pola */
    color: #b5b6b6; /* Jasny tekst */
    border: 1px solid #383838; /* Ciemniejsze obramowanie */
    border-radius: 5px; /* Zaokrąglone rogi */
    padding: 5px; /* Odpowiednia wielkość wnętrza */
    /* width: 100%; */
    box-sizing: border-box;
}

/* Zmiana stylu na focus (gdy użytkownik klika) */
.dark-mode-data-career:focus {
    outline: none;
    border-color: #535d68; /* Niebieskie obramowanie na focus */
    box-shadow: 0 0 5px #5e6265;
}

/* Stylizacja przy najechaniu myszką */
.dark-mode-data-career:hover {
    border-color: #e5e6e6; /* Jaśniejsze obramowanie przy najechaniu */
}

.career-properties {
    margin-left: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.career-properties p{
    margin-top: 0px;
}

.career-properties-h1{
    padding-left: 5px;
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 700;
}

.career-properties i{
    color: #43ba03;
}

.career-properties span{
    font-weight: 600;
    padding-left: 5px;
    color: #fcca05;
}

.career-properties-other {
    font-size: 13px;
    line-height: 1.3;
    color: #c8c8c8;
}

.career-properties-other p {
    font-size: 13px;
}

.career-properties-other li{
    margin-top: 2px;
}


.fbgroups-requirements-description {
    color: #c2c2c2;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 100px;
    width: 100%;
    box-sizing: border-box;
    position: relative; 
    border-radius: 5px; 

    padding-bottom: 25px;
}


.fbgroups-requirements-description.editing {
    background-color: #0e1d13; 
    color: #fff; 
}


.fbgroups-requirements-description .char-count {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: #666;
}


/* Klasy dla warunków mniejszej i większej liczby znaków */
.minus130, .more130 {
  font-size: 14px;
  margin-top: 10px;
}

/* Style, które zmienią się dynamicznie */
.minus130 {
  color: green;
}

.more130 {
  color: red;
}

/* Klasa dla mniej niż 130 znaków */
.mainDiv-minus130 {
    font-size: 24px; /* Czcionka 24px, gdy liczba znaków jest <= 130 */
    text-align: center;
    font-weight: 700;
    background-color: #161616; 
}
  
  /* Klasa dla więcej niż 130 znaków */
.mainDiv-more130 {
    font-size: 15px; /* Czcionka 13px, gdy liczba znaków jest > 130 */
    text-align: left;
    font-weight:normal;
    background-color: #161616;
}


/* Styl dla divów z kolorami */
.color-picker {
    display: flex;
    justify-content: flex-start; /* Justowanie od lewej */
    gap: 10px; /* Odstęp między boxami */
}
  
.color-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    background-size: cover;
    border: #33383b 1px solid;
}
  
  /* Dodajemy obrys, gdy div jest wybrany */
.color-box.selected {
    outline: 3px solid #fff; /* Możesz zmienić na dowolny kolor obrysu */
}

.schedule-output {
    font-size: 10px;
    margin-top: 15px;
}


/* Styl dla listy dni tygodnia */
.shedule-list-config {
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 0;
    list-style-type: none; /* Usuwa kropki z listy */
}

/* Styl dla szczegółów daty */
.shedule-date-details {
    color: #555; /* Przyciemnienie koloru szczegółów daty */
    font-size: 10px;
    display: block; /* Ustawienie wiersza dla daty */
    margin-bottom: 0px;
    margin-left: 10px;
}

.campaign-checkpoints {
    /* display: flex; */
    justify-content: space-between;
    color:#121212;
}

.checkpoint {
    width: 110px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 8px;
    border: #4f555c 1px solid;
    text-align: center;
}

.squerecircle {
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    color: #e7e7e7;
    background-color: #050505;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
}

.completed {
    background: linear-gradient(45deg, #b9ffb9, white);
    /* background-color: #d8fbd8; */
    color:#121212;
}

.in-progress {
    background: linear-gradient(45deg, #fce7c4, white);
    /* background-color: #fff2db; */
    color:#121212;
}

.error {
    background: linear-gradient(45deg, #ffc6c6, white);
    color:#ff0000;
}

.waiting {
    background: linear-gradient(45deg, #9b9b9b, white);
    /* background-color: #dedede; */
    color:#000000;
}

.completed-icon {
    color: green;
    font-size: 26px;
}

.in-progress-icon {
    color: orange;
    font-size: 26px;
}

.error-icon {
    color: red;
    font-size: 26px;
}

.waiting-icon {
    color: gray;
    font-size: 26px;
}

.fbgroups-requirements-description-preview {
    color: #c2c2c2;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 400px;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Umożliwia pozycjonowanie licznika znaków */
    border-radius: 5px; 
    font-size: 22px;
}
.fbgroups-requirements-description-preview-0 {
    color: #c2c2c2;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 15px;
}

.fbgroups-requirements-description-preview-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background-color: #c600ff;
}

.fbgroups-requirements-description-preview-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background-color: #e2013b;
}

.fbgroups-requirements-description-preview-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background-color: #000000;
}


.fbgroups-requirements-description-preview-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background: linear-gradient(45deg, #dd085c, #462db7);
}

.fbgroups-requirements-description-preview-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000000;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background: linear-gradient(45deg, #783de0, #e537f8);
}

.fbgroups-requirements-description-preview-6 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000000;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background: linear-gradient(0deg, #be2ba3, #fdb63e);
}

.fbgroups-requirements-description-preview-7 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
    background: linear-gradient(45deg, #535968, #22232a);
}

.fbgroups-requirements-description-preview-8 {
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 15px;
    font-weight: 800;
}

.fbgroups-requirements-description-preview-9 {
    color: #ffffff;
    border: #6a6a6a solid 1px;
    padding: 10px;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px; 
    font-size: 25px;
    font-weight: 700;
}

/* facebookgroups active warning error inprogress */
.ico-facebookgroups-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/facebookgroups-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookgroups-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-facebookgroups-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/facebookgroups-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookgroups-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-facebookgroups-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/facebookgroups-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookgroups-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


  .ico-facebookgroups-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/facebookgroups-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
  }
  
  .ico-facebookgroups-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; 
    transform: scale(1.1); 
  }


  
/* adresowo active warning error inprogress hold */
.ico-adresowo-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/adresowo-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-adresowo-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-adresowo-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/adresowo-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-adresowo-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-adresowo-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/adresowo-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-adresowo-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


  .ico-adresowo-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/adresowo-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
  }
  
  .ico-adresowo-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; 
    transform: scale(1.1); 
  }


  .ico-adresowo-hold {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #4b5259; 
    background-image: url('../img/adresowo-hold.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-adresowo-hold:hover {
    outline-color: #aaaeb2; 
    transform: scale(1.1); 
  }
  
  
  /* facebookmarket active warning error inprogress hold */
.ico-facebookmarket-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/facebookmarket-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookmarket-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-facebookmarket-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/facebookmarket-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookmarket-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-facebookmarket-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/facebookmarket-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookmarket-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


  .ico-facebookmarket-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/facebookmarket-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
  }
  
  .ico-facebookmarket-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; 
    transform: scale(1.1); 
  }


  .ico-facebookmarket-hold {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #4b5259; 
    background-image: url('../img/facebookmarket-hold.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-facebookmarket-hold:hover {
    outline-color: #aaaeb2; 
    transform: scale(1.1); 
  }

  /* lento active warning error inprogress hold */
.ico-lento-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/lento-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-lento-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-lento-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/lento-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-lento-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-lento-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/lento-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-lento-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


  .ico-lento-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/lento-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
  }
  
  .ico-lento-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; 
    transform: scale(1.1); 
  }


  .ico-lento-hold {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #4b5259; 
    background-image: url('../img/lento-hold.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-lento-hold:hover {
    outline-color: #aaaeb2; 
    transform: scale(1.1); 
  }


  /* otodom active warning error inprogress */
.ico-otodom-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/otodom-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-otodom-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-otodom-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/otodom-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-otodom-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-otodom-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/otodom-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-otodom-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


  .ico-otodom-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/otodom-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
  }
  
  .ico-otodom-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; 
    transform: scale(1.1); 
  }


  /* allegro active warning error inprogress  */
.ico-allegro-active {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #005e00; 
    background-image: url('../img/allegro-active.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-allegro-active:hover {
    outline-color: #02ff02; 
    transform: scale(1.1); 
  }

  .ico-allegro-warning {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #ffbb00; 
    background-image: url('../img/allegro-warning.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-allegro-warning:hover {
    outline-color: #fffb1f; 
    transform: scale(1.1); 
  }

  .ico-allegro-error {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #c60000; 
    background-image: url('../img/allegro-error.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    transition: all 0.3s ease; /* Płynna zmiana */
    transform: scale(1); /* Początkowa skala */
  }
  
  .ico-allegro-error:hover {
    outline-color: #ff4242; 
    transform: scale(1.1); 
  }


.ico-allegro-inprogress {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 5%; 
    outline: 1px solid #007387; 
    background-image: url('../img/allegro-inprogress.png'); /* Tło z pliku */
    background-size: cover; /* Dopasowanie tła */
    background-position: center; /* Wyśrodkowanie tła */
    background-repeat: no-repeat; 
    animation: pulsate 1.5s infinite; /* Animacja pulsowania */
    transition: all 0.3s ease-in-out; /* Płynna zmiana na hover */
}
  
.ico-allegro-inprogress:hover {
    animation: none; /* Zatrzymanie animacji */
    outline-color: #00e5ff; /* Zmiana koloru obramowania na hover */
    transform: scale(1.1); /* Powiększenie na hover */
}

/* Definicja animacji pulsowania */
@keyframes pulsate {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.2);
  }
  100% {
      transform: scale(1);
  }
}

.unix-log-style {
  list-style-type: none; /* Usuwa znaczniki listy */
  padding: 0;
  margin: 0;
  background-color: #1e1e1e; /* Ciemne tło w stylu dark mode */
  border-radius: 5px; /* Zaokrąglone rogi kontenera, dopasowane do klasy "rogi" */
  font-family: "Courier New", Courier, monospace; /* Monospace czcionka typowa dla logów */
  color: #c5c6c7; /* Dopasowany kolor tekstu */
  max-height: 300px; /* Ograniczona wysokość */
  overflow-y: auto; /* Pionowe przewijanie, jeśli jest za dużo logów */
}

.unix-log-style li {
  padding: 10px;
  border-bottom: 1px solid #333; /* Dodaje delikatną linię między logami */
  transition: all 0.3s ease; /* Płynne przejście na hover */
  cursor: pointer; /* Zmienia kursor na wskaźnik */
}

.unix-log-style li:last-child {
  border-bottom: none; /* Usuwa dolną linię dla ostatniego elementu */
}

.unix-log-style li:hover {
  background-color: #282828; /* Zmienia tło na ciemniejsze na hover */
  border: 1px solid #00e5ff; /* Dodaje podświetlenie na hover */
  border-radius: 5px; /* Dopasowuje rogi na hover */
  color: #fff; /* Zmienia kolor tekstu na biały na hover */
}

/* v2  */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 1000px;
  margin: 0 auto;
}

.chat-message {
  display: flex;
  gap: 10px;
  align-items: center; 
}

#message-input:empty:before {
  content: attr(data-placeholder);
  color: #9da2a8;
  opacity: 0.7;
}

#chat-form {
  max-width: 1000px;
  margin: 0 auto;
}


.chat-avatar {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  justify-content: center;
}

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

.chat-nickname {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0; 
  line-height: 1; 
  display: flex;
  align-items: center; 
}

.chat-bubble {
  max-width: 75%; 
  width: fit-content; 
  min-width: 0; 
  margin-top: 2px;
}

.chat-message-fill {
  background-color: #0078fe;
  color: white;
  font-size: 0.9rem;
  padding: 10px 15px;
  border-radius: 15px;
  word-wrap: break-word;
  display: inline-block;
}

.chat-timestamp {
  font-size: 0.6rem;
  color: #666;
  text-align: right;
  margin-top: 2px;
  margin-right: 8px;
  min-width: 150px;

}

@media (max-width: 400px) {
  .chat-bubble {
      max-width: 100%; 
  }
}


.chat-message-self {
  display: flex;
  gap: 10px;
  align-items: center; 
  justify-content: flex-end;
}

.chat-avatar-self {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  justify-content: center;
}

.chat-avatar-self img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.chat-nickname-self {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0; 
  line-height: 1; 
  display: flex;
  align-items: center; 
}

.chat-bubble-self {
  max-width: 75%; 
  width: fit-content; 
  min-width: 0; 
  margin-top: 2px;
}

.chat-message-fill-self {
  background-color: #078800;
  color: white;
  font-size: 0.9rem;
  padding: 10px 15px;
  border-radius: 15px;
  word-wrap: break-word;
  display: inline-block;
}

.chat-timestamp-self {
  font-size: 0.6rem;
  color: #666666;
  text-align: left;
  margin-top: 2px;
  margin-right: 8px;
  clear: both;
}

@media (max-width: 400px) {
  .chat-bubble-self {
      max-width: 100%; 
  }
}

/* Opcje pod dymkiem — minimalna, izolowana poprawka pozycjonowania */
.chat-bubble-options{
    display: flex;
    margin-top: 2px;         /* podciąga ikonkę do góry (dostosuj) */
    padding-left: 7px;        /* żeby nie kleiło się do krawędzi */
    pointer-events: auto;
}

/* Ikona trochę większa i czytelniejsza */
.chat-bubble-options .bi{
    font-size: 17px;
    margin-right: 8px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .chat-bubble-options .bi {
        font-size: 18px;
        margin-right: 12px;
        padding: 4px; /* zwiększa realny obszar kliknięcia */
    }
}



/* =========================================================
   Markdown: LINKI i CODE — baza (działa dla obu bąbelków)
   ========================================================= */

/* Linki */
.chat-message-fill a,
.chat-message-fill-self a {
  color: #ffec99;                /* jasny żółty - bardzo czytelny */
  font-weight: 600;
  text-decoration: chip;
  text-underline-offset: 2px;
}

.chat-message-fill a:hover,
.chat-message-fill-self a:hover {
  color: #fff3bf;
  text-decoration-thickness: 2px;
}

/* Inline code */
.chat-message-fill code,
.chat-message-fill-self code {
  color: #ffd43b;                 /* żółty */
  background: rgba(0,0,0,0.25);   /* przyciemnia za kodem */
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88em;
}

/* Code block */
.chat-message-fill pre,
.chat-message-fill-self pre {
  background: rgba(0,0,0,0.32);
  padding: 10px 12px;
  border-radius: 10px;
  overflow: auto;
  max-width: 100%;
  max-height: 360px;
  margin: 8px 0;
}

.chat-message-fill pre code,
.chat-message-fill-self pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: #fff3bf;
  display: block;
  white-space: pre;  /* bloki kodu trzymają format */
}

/* =========================================================
   Nadpisania per wariant (zielony self vs niebieski inni)
   ========================================================= */

/* Zielony self: dajemy ciut bardziej „cytrynowe” akcenty */
.chat-message-fill-self a {
  color: #fff3bf;
}

.chat-message-fill-self a:hover {
  color: #ffffff;
}

.chat-message-fill-self code {
  color: #fff3bf;
  background: rgba(0,0,0,0.30);
}

/* Niebieski inni: trochę bardziej „złote” akcenty */
.chat-message-fill a {
  color: #ffd43b;
}

.chat-message-fill a:hover {
  color: #ffec99;
}

.chat-message-fill code {
  color: #ffec99;
  background: rgba(0,0,0,0.22);
}

/* TABELKI MD */

.chat-message-fill table,
.chat-message-fill-self table {
  background: rgba(0,0,0,0.32);
  border-radius: 10px;
  padding: 6px;
  margin: 8px 0;
  border-collapse: collapse;
  max-width: 100%;
  overflow: hidden;
}

/* wrapper na overflow poziomy */
.chat-message-fill table,
.chat-message-fill-self table {
  display: block;
  overflow-x: auto;
}

/* wiersze */
.chat-message-fill tr,
.chat-message-fill-self tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* nagłówki */
.chat-message-fill th,
.chat-message-fill-self th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}

/* komórki */
.chat-message-fill td,
.chat-message-fill-self td {
  padding: 8px 10px;
  white-space: nowrap;
}

/* ostatni wiersz bez kreski */
.chat-message-fill tr:last-child,
.chat-message-fill-self tr:last-child {
  border-bottom: none;
}



.file-upload-wrapper {
  width: 100%;
  height: 30px;
  border: 1px dashed #bcc9ce;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  text-align: center;
  padding: 5px;
}

.file-upload-wrapper:hover {
  border-color: #646c70;
}

.file-upload-content {
  font-size: 10px;
  color: #a8a8a8;
}

.file-upload-wrapper i {
  font-size: 8px;
  color: #54bf02;
  margin-right: 10px;
}



.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-name {
  font-size: 8px;
  color: #00b3ff;
  display: inline-block;
}


.file-upload-wrapper:hover .file-name {
  color: #ffffff;
}

.file-upload-wrapper-lg {
  width: 100%;
  height: 30px;
  border: 1px dashed #bcc9ce;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  text-align: center;
  padding: 5px;
}

.file-upload-wrapper-lg:hover {
  border-color: #646c70;
}

.file-upload-content-lg {
  font-size: 12px;
  color: #a8a8a8;
}

.file-upload-wrapper-lg i {
  font-size: 13px;
  color: #54bf02;
  margin-right: 15px;
}

.file-input-lg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-name-lg {
  font-size: 13px;
  color: #00b3ff;
  display: inline-block;
}

.file-upload-wrapper-lg:hover .file-name-lg {
  color: #ffffff;
}

.file-upload-wrapper-xl {
  width: 100%;
  height: 40px; /* Zwiększona wysokość */
  border: 1px dashed #bcc9ce;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  text-align: center;
  padding: 10px; /* Zwiększone padding */
}

.file-upload-wrapper-xl:hover {
  border-color: #646c70;
}

.file-upload-content-xl {
  font-size: 16px; /* Zwiększony rozmiar fontu */
  color: #a8a8a8;
}

.file-upload-wrapper-xl i {
  font-size: 18px; /* Zwiększony rozmiar ikony */
  color: #54bf02;
  margin-right: 20px; /* Większy margines */
}

.file-input-xl {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-name-xl {
  font-size: 16px; /* Zwiększony rozmiar fontu */
  color: #00b3ff;
  display: inline-block;
}

.file-upload-wrapper-xl:hover .file-name-xl {
  color: #ffffff;
}

.offcanvas-top-logo-sm {
  margin-top: 8px;
  margin-left: 15px;
  margin-bottom: 10px;
  margin-right: 100px;
}

.flex-container-sm {
  display: flex;
  width: 100%;
}

.logo-sm {
  flex-grow: 1; /* Rozciąga logo na całą dostępną przestrzeń */
}

.user-info-sm {
  margin-right: 25px;
  white-space: nowrap; /* Zapobiega łamaniu się tekstu */
  text-align: right;
  font-size: 12px;
  color: #6d6d6d;
}

.offcanvas-top-logo-lg {
  margin-top: 8px;
  margin-left: 15px;
  margin-bottom: 10px;
  margin-right: 100px;
}

.flex-container-lg {
  display: flex;
  width: 100%;
}

.logo-lg {
  flex-grow: 1; /* Rozciąga logo na całą dostępną przestrzeń */
}

.search-lg {
  margin-top: 8px;
  margin-right: 35px;
  max-width: 200px;
  flex-grow: 1; /* Rozciąga logo na całą dostępną przestrzeń */
  justify-items: left;
}

.user-info-lg {
  margin-right: 35px;
  white-space: nowrap; /* Zapobiega łamaniu się tekstu */
  text-align: right;
}

.user-info-text-lg {
  font-size: 15px;
  color: #6d6d6d;
}

.brands-liks-text-lg {
  display: flex;
  width: 100%;
}

.brand-circle-lg {
  border-radius: 50%; 
  padding: 7px; 
  margin-right: 15px; 
  margin-top: 5px; 
}

.offcanvas-top-logo-xl {
  margin-top: 9px;
  margin-left: 21px;
  margin-bottom: 10px;
  margin-right: 100px;
}

.flex-container-xl {
  display: flex;
  width: 100%;
}

.logo-xl {
  flex-grow: 1; /* Rozciąga logo na całą dostępną przestrzeń */
}

.search-xl {
  margin-top: 8px;
  margin-right: 35px;
  max-width: 200px;
  flex-grow: 1; /* Rozciąga logo na całą dostępną przestrzeń */
  justify-items: left;
}

.user-info-xl {
  margin-right: 45px;
  white-space: nowrap; /* Zapobiega łamaniu się tekstu */
  text-align: right;
}

.user-info-text-xl {
  font-size: 15px;
  color: #6d6d6d;
}

.brands-liks-text-xl {
  display: flex;
  width: 100%;
}

.brand-circle-xl {
  border-radius: 50%; 
  padding: 9px; 
  margin-right: 15px; 
  margin-top: 7px; 
}


.list {
  min-height: 100px;
  padding: 10px;
  background-color: #2f3235;
  border: 1px solid #3c4144;
  border-radius: 5px;
}

.worker-on-home {
  background-color: #3d494d !important;
}

.dostepnyPracownik {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #4f5051;
  background-color: #2f3234;
  color: #e0e0e0;
}

.dostepnyPracownik:hover {
  background-color: #47494a;
}

.team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.char-counter {
  width: 100%;
  margin-left: 93%;
  font-size: 12px; 
  font-weight: 100; 
  /* margin-left: 15px;  */
  color:#6a6a6a !important;
}

.form-control.bg-dark2 {
  color: #f8f9fa; /* Jasny tekst */
}

.form-control.bg-dark2::placeholder {
  color: #ccc;
}

.form-control.bg-dark2 option {
  color: #212529; /* Ciemniejszy tekst opcji jeśli chcesz */
}

#automat-monitor {
  background-color: #000;
  color: #fff;
  border: 1px solid #435268; 
  font-family: "Courier New", Courier, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  font-size: 0.675rem;
  padding: 1rem;
  border-radius: 0.5rem;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.chart {
  width: 150px;
  height: 180px;
  margin: 20px;
  background-color: #2c2c2c;  /* Ciemne tło wykresu */
  padding: 10px;
  border-radius: 10px;
}

canvas {
  background-color: #2c2c2c;
}

.card-sync-status {
    font-size: 0.85rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.card-sync-status .card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-sync-status .card-text {
    margin-bottom: 0.25rem;
}

.card-sync-status small {
    font-size: 0.75rem;
    opacity: 0.9;
}

.card-sync-status {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
}

/* wspólna baza dla wszystkich „karteczek” */
.msg {
  padding: 10px 16px;
  margin: 6px 0;
  border: 1px solid transparent;
  /* border-radius: 12px; */
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* warianty kolorystyczne */

.msg-primary {
  color: #cfe2ff;
  background-color: #031633;
  border-color: #084298;
}

.msg-secondary {
  color: #e2e3e5;
  background-color: #161719;
  border-color: #41464b;
}

.msg-success {
  color: #d1e7dd;
  background-color: #051b11;
  border-color: #0f5132;
}

.msg-danger {
  color: #f8d7da;
  background-color: #2c0b0e;
  border-color: #842029;
}

.msg-warning {
  color: #fff3cd;
  background-color: #332701;
  border-color: #997404;
}

.msg-info {
  color: #cff4fc;
  background-color: #032830;
  border-color: #055160;
}

.msg-light {
  color: #f8f9fa;
  background-color: #343a40;
  border-color: #6c757d;
}

.msg-dark {
  color: #e2e3e5;
  background-color: #111418;
  border-color: #444950;
}

.menu-ico:hover i,
.menu-ico:hover span {
    color: #ffffff !important;
    transition: 0.15s;
}

/* kontener dropdowna z ikonami */
.admin-menu-icons {
    min-width: 320px;
    background-color: #111; /* jeśli trzeba, ale już masz dark-mode */
}

/* wspólny wygląd pozycji */
.admin-menu-icons .menu-ico {
    color: rgba(255, 255, 255, 0.4);  /* ~40% czarnego na odwrót :) */
    font-size: 8px;
}

.admin-menu-icons .menu-ico i {
    font-size: 1.3rem;                /* trochę mniejsze niż fs-4 */
    line-height: 1;
}

.admin-menu-icons .menu-ico span {
    margin-top: 2px;
    display: block;
    white-space: normal;
    text-align: center;
}

/* hover */
.admin-menu-icons .menu-ico:hover i,
.admin-menu-icons .menu-ico:hover span {
    color: #ffffff;
    transition: 0.15s ease-in-out;
}

/* KOLOROWE, „ŻARÓWIASTE” IKONY */
.admin-menu-icons .icon-home i           { color: #00e5ff; }  /* neon cyjan */
.admin-menu-icons .icon-users i          { color: #ffb300; }  /* mocny żółty */
.admin-menu-icons .icon-blog i           { color: #7c4dff; }  /* fiolet */
.admin-menu-icons .icon-newsletter i     { color: #ff4081; }  /* róż/fuksja */
.admin-menu-icons .icon-subs i           { color: #64ffda; }  /* turkus */
.admin-menu-icons .icon-team i           { color: #29b6f6; }  /* niebieski */
.admin-menu-icons .icon-career i         { color: #ffd600; }  /* żółty neon */
.admin-menu-icons .icon-ads i            { color: #ff6e40; }  /* pomarańcz/coral */
.admin-menu-icons .icon-locals i         { color: #a5d6a7; }  /* jasna zieleń */
.admin-menu-icons .icon-campaigns i      { color: #ffea00; }  /* jaskrawy żółty */
.admin-menu-icons .icon-realizations i   { color: #ffab91; }  /* łososiowy */
.admin-menu-icons .icon-presentations i  { color: #69f0ae; }  /* seledyn/neon green */
.admin-menu-icons .icon-settings i       { color: #b2ff59; }  /* zielony neon */