::-webkit-scrollbar {
  width: 5px;
  height: 5px;
 background-color: #1b141400;

}
/* Track */
::-webkit-scrollbar-track {
 

  background-color: #1b141400;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #005a87; 
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7a7a7a; 
}

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #1e1e1e;
            color:#ffffff;
            box-sizing: border-box;
        }
        .navbottom {
            width: 100%;
         
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom:0px;
            background-color: #2a2a2a;
            box-shadow: 2px 2px 10px black;
        }
        .tile {
            width: 100px;
            height: 100px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(0deg, #002e50, #054f7d);
            border-radius: 10px;
            transition: transform 0.3s;
            cursor: pointer;
            font-size: 150%;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.604);
        }
        .tile:hover {
            transform: scale(1.05);
            background-image: linear-gradient(0deg, #085189, #14727e);
        }
        .tile a {
            text-decoration: none;
            color: #ffffff;
            font-weight: bold;
            text-align: center;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #333;
            color: #fff;
            box-shadow: 2px 2px 10px black;
        }
        .footer {
            width: 100%;
            text-align: center;
            padding: 0px;
            background-color: #333333ab;
            color: #2f7ad6;
            position: absolute;
        }
        #current-time{
            font-size: 180%;
            opacity: 0.7;
        }
        #snackbar {

    position: fixed;
   bottom: 5px;
  right: 2px;
    transform: translateX(-50%);
    background-color: #3333335b;
    
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hidden {
    display: none;
}
#lista{
    height:85vh;
    width:28%;
    background-color: #0d11126a;
    float:left;
overflow:scroll;
overflow-x: hidden;
    padding: 10px;
}
#nuty{

    width: 70%;
            height: 85vh;
      
            float:left;

}
#lista .item{

    height: 20px;
    background-color: #ffffff4d;
    border-radius: 5px;
    padding: 15px;
    margin:5px;
}
#lista .activ{
color:#0b4156;
background-color: #ffffffe3;
border:2px solid #0e78a2;
font-weight: 600;
}

#lista .item:hover{
color:#0e78a2;
background-color: #ffffffb5;
cursor: pointer;
}
input{
    width: 200px;
    color:#0e78a2;
    border-radius: 5px;
    font-size: 130%;
    padding: 10px;
    border:none;
    background-color: #ffffffb5;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.stan{
    float: right;
}
.ile{
    float: right;
}
.iframe-container {
          height: 100%;
            display: none;
        }

        .active {
            display: block;
        }
        #myForm{
          

            height: 85vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

        }
        #myForm select{
            width: 200px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    font-size: 130%;
    padding: 10px;
        }
#lista .Adwent{
    background-color: #b31978cb;
}
#lista .Wielki_Post{
    background-color: #810991cb;
}
#lista .Boże_Narodzenie{
    background-color: #a57b12cb;
}
#lista .Wielkanoc{
    background-color: #12a519cb;
}
#lista .Maryjne{
    background-color: #125ba5cb;
}
#lista  .Przygodne, #list .Przygodne{
    background-color: #12a5a0cb;
}
#utwory{
    margin-bottom: 30px;
}