:root {
 /* --kolor1: #25435b; /* Twoja nazwa i Twój granat */
  --kolor2: #008c8c; /* Jasny szary dla kontrastu */
}

.container_body{
	min-height:80vh;

}
.container{
	max-width: 1270px !important; /* Maksymalna szerokość */
    width: 100% !important;       /* Na mniejszych ekranach zajmie 100% */
    margin-left: auto !important;
    margin-right: auto !important;
}

#nav{
	height:80px;
}
.main-slider-top .container-fluid .row .pad-0{
	margin-top:-20px;
}
.navbar-brand{
	margin-top:0;
	height:80px !important;
}

#myNavbar{
	height:80px !important;
}
.navbar-nav{
	height: 80px;
}
.navbar-nav > li > a{
	margin-top:0 !important;
}
.logout-timer{
	min-width: 63px;
}
.container_login{
text-align:center;
min-height: 80vh;
  padding-top: 100px;
}
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec64;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
    outline: none;
}

.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
    background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
    background-color:#ffab23;
}
/* Nowa klasa, która zostanie po kliknięciu */
.myButton.clicked {
    color: #ffffff !important;
}
.myButton:active {
    position:relative;
    top:1px;
}
.podswietlenie:hover{
		opacity:0.6;
		font-size: 18px; 
	}
	
	.flexible-btn {
	/* Pozwalamy szerokości dopasować się do paddingu/treści */
	padding: 12px 40px; 
	
	/* Opcjonalnie: Ustawiamy maksymalną szerokość, np. 300px, 
		aby na dużych ekranach przycisk nie był gigantyczny */
	max-width: 300px; 
	
	/* Zapewnia, że przycisk nie jest już elementem blokowym rozciągającym się na 100% */
	display: inline-block; 

	/* Reszta stylów */
	background-color: #00D000;
	color: #FFF;
	text-decoration: none;
	border: 1px solid rgb(55,65,81);
	font-size: 18px;
	
}
.submit-btn {
        padding: 10px 30px; 
        height: 46px; /* Można usunąć, jeśli padding wystarczy */
        background-color: #00D000;
        color: #FFF;
        border: 1px solid rgb(55,65,81);
        border-radius: 4px; /* Opcjonalnie: lekkie zaokrąglenie */
        cursor: pointer;
        font-size: 16px; /* Ujednolicenie czcionki */
        width: auto; /* Zapewnienie, że szerokość jest automatyczna */
    }
.myButton.active {
    box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    background: linear-gradient(to bottom, #3d94f6 5%, #0d3b85 100%) !important;
    background-color: #3d94f6 !important;

    border-radius: 6px !important;
    border: 1px solid #337fed !important;

    color: #ffffff !important;

    text-shadow: none !important;

    font-family: Arial !important;
    font-size: 15px !important;
    font-weight: bold !important;
}
.myButton.active:hover {
    background: linear-gradient(to bottom, #0d3b85 5%, #3d94f6 100%) !important;
    background-color: #0d3b85 !important;

    color: #FEC800 !important;
}
/* TWÓJ NOWY PRZYCISK BLUE*/
.Button-Blue {
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #0d3b85 100%);
	background-color:#3d94f6;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #16599c;
}

.Button-Blue:hover {
	background:linear-gradient(to bottom, #0d3b85 5%, #3d94f6 100%);
	background-color:#0d3b85;
	color:#FEC800;
}

.Button-Blue:active {
	position:relative;
	top:1px;
}
/* TWÓJ NOWY PRZYCISK RED*/
.Button-Red {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.Button-Red:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
	background-color:#c62d1f;
}
.Button-Red:active {
	position:relative;
	top:1px;
}
/* TWÓJ NOWY PRZYCISK GREEN*/
.Button-Green {
	-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
	-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
	box-shadow:inset 0px 1px 0px 0px #3dc21b;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #09de42), color-stop(1, #2f8000));
	background:-moz-linear-gradient(top, #09de42 5%, #2f8000 100%);
	background:-webkit-linear-gradient(top, #09de42 5%, #2f8000 100%);
	background:-o-linear-gradient(top, #09de42 5%, #2f8000 100%);
	background:-ms-linear-gradient(top, #09de42 5%, #2f8000 100%);
	background:linear-gradient(to bottom, #09de42 5%, #2f8000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#09de42', endColorstr='#2f8000',GradientType=0);
	background-color:#09de42;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.Button-Green:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2f8000), color-stop(1, #09de42));
	background:-moz-linear-gradient(top, #2f8000 5%, #09de42 100%);
	background:-webkit-linear-gradient(top, #2f8000 5%, #09de42 100%);
	background:-o-linear-gradient(top, #2f8000 5%, #09de42 100%);
	background:-ms-linear-gradient(top, #2f8000 5%, #09de42 100%);
	background:linear-gradient(to bottom, #2f8000 5%, #09de42 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f8000', endColorstr='#09de42',GradientType=0);
	background-color:#2f8000;
}
.Button-Green:active {
	position:relative;
	top:1px;
}
/* TWÓJ NOWY PRZYCISK GRAY*/
.Button-Gray {
	-moz-box-shadow:inset 0px 1px 0px 0px #d1d1d1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #d1d1d1;
	box-shadow:inset 0px 1px 0px 0px #d1d1d1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a3a3a3), color-stop(1, #7a7a7a));
	background:-moz-linear-gradient(top, #a3a3a3 5%, #7a7a7a 100%);
	background:-webkit-linear-gradient(top, #a3a3a3 5%, #7a7a7a 100%);
	background:-o-linear-gradient(top, #a3a3a3 5%, #7a7a7a 100%);
	background:-ms-linear-gradient(top, #a3a3a3 5%, #7a7a7a 100%);
	background:linear-gradient(to bottom, #a3a3a3 5%, #7a7a7a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a3a3a3', endColorstr='#7a7a7a',GradientType=0);
	background-color:#a3a3a3;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:1px solid #858585;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #525252;
}
.Button-Gray:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #a3a3a3));
	background:-moz-linear-gradient(top, #7a7a7a 5%, #a3a3a3 100%);
	background:-webkit-linear-gradient(top, #7a7a7a 5%, #a3a3a3 100%);
	background:-o-linear-gradient(top, #7a7a7a 5%, #a3a3a3 100%);
	background:-ms-linear-gradient(top, #7a7a7a 5%, #a3a3a3 100%);
	background:linear-gradient(to bottom, #7a7a7a 5%, #a3a3a3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#a3a3a3',GradientType=0);
	background-color:#7a7a7a;
}
.Button-Gray:active {
	position:relative;
	top:1px;
}
.Button-Gray:disabled {
	cursor: not-allowed;
	opacity: 0.8;
}
    /* IKONA INFORMACJI */
.info-icon {
    /* Wymiary i kształt */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    
    /* Kolory i obramowanie */
    background-color: white;
    color: #0036FF;
    border: 1px solid #0036FF;
    
    /* Wyśrodkowanie litery */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Czcionka dla lepszej czytelności "i" */
    font-family: "Georgia", serif; /* Szeryfowa czcionka sprawia, że "i" wygląda jak ikona */
    font-size: 20px;
    font-weight: bold;
    font-style: italic; /* Kursywa często poprawia wygląd ikony info */
    
    /* Interakcja */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease; /* Płynna zmiana przy najechaniu */
}

/* Opcjonalnie: efekt po najechaniu */
.info-icon:hover {
    background-color: #0036FF;
    color: white;
}

/* DASHBOARD-MENU */
.user-menu{
	text-align:center;
	margin-top: 30px;
  margin-bottom: 30px;
}	
.user-menu a{
margin-bottom:15px;
}	

	
.table-hover tbody tr:hover {
  background: var(--kolor2) !important;
  color: #fff !important;
}
/* RESPONSYWNA TABELA */

.table-hover tbody tr:hover{
  background:var(--kolor2) !important;
  color:#fff !important;
}
.table-hover tbody tr:hover .text-muted{color:#eaf7f7 !important;}
.table-hover tbody tr:hover a{color:#fff !important;}
@media (max-width: 576px){
  .table-responsive{ overflow-x: visible; }
  table.table thead{ display:none; }

  table.table tbody tr{
    display:block;
    margin-bottom:12px;
    border:1px solid rgba(0,0,0,.1);
    border-radius:.75rem;
    background:#fff;
    overflow:hidden;
  }

  table.table tbody td{
    display:flex;
    gap:.75rem;
    justify-content:space-between;
    align-items:flex-start;
    padding:.75rem 1rem;
    border:0;
    border-bottom:1px solid rgba(0,0,0,.06);
    text-align:right;
  }

  table.table tbody td:last-child{ border-bottom:0; }

  table.table tbody td::before{
    content: attr(data-label);
    font-weight:600;
    color:#6c757d;
    text-align:left;
    flex: 0 0 45%;
    max-width:45%;
  }

  table.table tbody td > *{ max-width:55%; }

  /* --- AKCJE jako stopka karty --- */
  table.table tbody td.td-actions{
    display:block;            /* zamiast flex */
    text-align:left;
    padding: .9rem 1rem;
    background: rgba(0,0,0,.02);
  }

  table.table tbody td.td-actions::before{
    content:none;             /* bez etykiety "Akcje" */
  }

  table.table tbody td.td-actions .d-flex{
    display:flex !important;
    gap:.5rem !important;
    flex-wrap:wrap;
  }

  table.table tbody td.td-actions .btn{
    flex: 1 1 auto;
    width: 100%;              /* 1 przycisk = pełna szerokość */
  }

  /* jeśli są 2 przyciski, to obok siebie (ładniej) */
  table.table tbody td.td-actions .btn + .btn{
    width: calc(50% - .25rem);
  }
  table.table tbody td.td-actions .btn:first-child{
    width: calc(50% - .25rem);
  }
}
/* Linia rodzielająca sekcje na stronie */
.separator-orange {
    border: 0;
    height: 1px;
    background-color: #FF9300;
    margin: 20px 0; /* Zamiast <br> - odstęp góra/dół */
    margin-left: 0; /* Wyrównanie do lewej */
}

/* Style do obrazków lewitujących i ukrytego SEO */

/* ==========================================================================
   1. SEO - UKRYWANIE NAGŁÓWKÓW
   ========================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   2. UKŁAD PUZZLI (Struktura 2+1 w col-md-4)
   ========================================================================== */

/* Kontener górny - wymusza poziom */
.fixed-puzzles-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 15px; 
    width: 100%;
    margin-bottom: 20px;
}

/* Kontener dolny - wyśrodkowanie lewitującego obrazka */
.floating-puzzle-container {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}

/* Pudełko na pojedynczy obrazek puzzla */
.puzzle-box {
    flex: 0 0 auto;
    /*width: 200px;            Stała szerokość */
    /*height: 200px;           Stała wysokość (zamiast aspect-ratio, by wymusić sztywny wymiar) */
    display: flex;          /* Centrowanie obrazka w środku */
    align-items: center;    /* Centrowanie w pionie */
    justify-content: center; /* Centrowanie w poziomie */
    position: relative;
    z-index: 1;
}

/* 2a. NOWE WARIANTY ROZMIARÓW (Tutaj definiujesz rozmiary kontenerów) */
.puzzle-box-1 {
    width: 60px;
    height: 60px;
}

.puzzle-box-2 {
    width: 90px;
    height: 90px;
}

.puzzle-box-3 {
    width: 120px;
    height: 120px;
}

.puzzle-box-4 {
    width: 150px;
    height: 150px;
}

/* Styl grafiki puzzla */
.puzzle-style {
    width: 100%;            /* Próbuje zająć całą szerokość */
    height: 100%;           /* Próbuje zająć całą wysokość */
    /*max-width: 130px;        Maksymalna wielkość samego puzzla (zostaw margines na hover/skalowanie) */
    /* max-height: 130px;       Maksymalna wielkość w pionie */
    object-fit: contain;    /* KLUCZ: Obrazek zachowa proporcje i zmieści się w zadanym max-width/height */
    
    display: block;
    cursor: default;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.puzzle-style-1 { max-width: 65px; max-height: 65px; }
.puzzle-style-2 { max-width: 95px; max-height: 95px; }
.puzzle-style-3 { max-width: 120px; max-height: 120px; }
.puzzle-style-3 { max-width: 150px; max-height: 150px; }

/* Hover dla puzzla */
.puzzle-style:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 0 transparent);
}

/* LEWITACJA PUZZLA (Tylko w górę od zera) */
.is-floating-v {
    animation: puzzleSimpleFloat 5.5s ease-in-out infinite !important;
}

.is-floating-v:hover {
    animation-play-state: paused !important;
    transform: scale(1.1) translateY(-8px);
}

@keyframes puzzleSimpleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ==========================================================================
   3. UNIWERSALNA LEWITACJA KONTENERÓW (Ruch symetryczny góra-dół)
   ========================================================================== */

.floating-container {
    display: block !important;
    animation: containerFloat 12s ease-in-out infinite !important;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.floating-container:hover {
    animation-play-state: paused !important;
}

/* Ruch symetryczny dla dużych obiektów (Góra/Dół) */
@keyframes containerFloat {
    0%, 50%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px); /* Góra */
    }
    75% {
        transform: translateY(15px);  /* Dół */
    }
}

/* ==========================================================================
LEWITACJA POZIOMA (Ruch lewo-prawo) 
========================================================================== */

.is-floating-h {
    animation: puzzleSimpleFloatH 15s ease-in-out infinite !important;
}

.is-floating-h:hover {
    animation-play-state: paused !important;
    transform: scale(1.1) translateX(8px);
}

@keyframes puzzleSimpleFloatH {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(25px); }
}

/* KONTENER POZIOMY (Analogiczny do .floating-container) */
.floating-container-h {
    display: block !important;
    animation: containerFloatH 6s ease-in-out infinite !important;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.floating-container-h:hover {
    animation-play-state: paused !important;
}

@keyframes containerFloatH {
    0%, 50%, 100% { transform: translateX(0); }
    25% { transform: translateX(-15px); }
    75% { transform: translateX(15px); }
}