@media only screen and (max-width: 600px) {

html * {
	
	cursor: url(http://topfm.lt/arrowhead.svg) 12 12, auto;
	
}

* {

 font-family: Arial, Helvetica, sans-serif;

  box-sizing: border-box;


}
*::selection {

  background-color: unset;

}


/* Style the body */

body {
	
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000;
  margin: auto;
  width: 100%;

}



/* Header/logo Title */
img.kosmonautai {
	
width: 100%;
height: 350px;
object-fit: cover;
object-position: top center;
float: left;
position: relative;
 left: 160px; 
 margin-right: 0px;
 margin-top: 45px;
 border-radius: 0% 0% 0% 0%;
}
.header {

  text-align: center;
	margin-left: auto;
	margin-right: auto;
  background-color: rgba(133, 0, 0, 0.3);

  color: white;

  width: 100%;

}

.headerx {
	padding: 0px;
  text-align: center;
	margin-left: 0px;
	margin-right: 0px;
  background-color: rgba(0, 0, 0, 0.4);
	position: relative;
  color: white;
  width: 100%;

}

.headernaujienos {
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
  background-color: rgba(0, 0, 0, 0.4);
	position: relative;
  color: white;
  width: 100%;
}

.ilgisa {
	
}

.headerx textarea {
  width: 100%;
height: 140px;
  padding: 20px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
 
  resize: none;
}
.headerx button {
margin-top: 10px;
margin-bottom: 10px;
  width: 80%;
  padding: 15px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
	
}

.headerx button:hover {
margin-top: 10px;
  width: 80%;
  padding: 15px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.8);
  color: #fff;

}



/* Increase the font size of the heading */

.header h1 {

  font-size: 40px;

}



/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */




.ilgis {

	

	margin: 0;

	max-width: 100%;

	

}



/* Column container */

.row {  

  display: -ms-flexbox; /* IE10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE10 */

  flex-wrap: wrap;
	width: 100%;
}



/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

  -ms-flex: 100%; /* IE10 */

  flex: 100%;

  padding-right: 0px;

}
.chato {
	
	max-width: 100%;
	margin: 0px;
	padding: 0px;
	
}

.chatas {
	padding: 0px;
  -ms-flex: 100%; /* IE10 */
  background-color: rgba(133,0,0,0.2);
  flex: 100%;
  width: 100%;
  max-height: 360px;
  height: 360px;
	margin: 0px;
	border-radius: 0px;
	overflow: scroll;
            /* Hides the scrollbar */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.rasyti {
	padding: 0px;
  -ms-flex: 100%; /* IE10 */
  background-color: rgba(133,0,0,0.2);
  flex: 100%;
	min-width: 100%;
  	border-radius: 0px;
}


.zinute {
	
	text-align: left;
	height: 55px;
	margin-top: 9px;
	margin-bottom: 9px;
	width: 100%;
	display: inline-block;
	
}

.zinuter {
	
	text-align: right;
	height: 60px;
	margin-top: 7px;
	margin-bottom: 7px;
	width: 100%;
	display: inline-block;
	
}

.dainosn {

  -ms-flex:32%; /* IE10 */

  flex: 32%;


}

.kasgroja {

  -ms-flex: 100%; /* IE10 */
  flex: 100%;
	max-width: 500px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	position: relative;
	order: 5;
}
img.parasyk {
max-width: 35%;
float: right;
position: absolute;
 right: 0; 
 margin-right: 0px;
 margin-top: 45px;
}
img.dj {
width: 100%;
height: 350px;
object-fit: cover;
object-position: top center;
float: left;
position: relative;
 left: 0; 
 margin-right: 0px;
 margin-top: 45px;
 border-radius: 0% 0% 0% 0%;
}
.kasplayeris {

  -ms-flex: 100%; /* IE10 */
  flex: 100%;
	position: relative;
	padding-top: 40px;
	padding-bottom: 0px;
	order: 4;
}
h3.sekite {
	
	padding-left: 0px;
	
}


.dainosp {

  -ms-flex:100%; /* IE10 */
  flex: 32%;
	display: none;

}

.dainosi {

  -ms-flex: 100%; /* IE10 */
  flex: 100%;
	margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
  margin-top: auto;
  width: 100%;
  margin-bottom: auto;
  text-align: center;
  font-size: 18px;
  padding-left: 150px;
}

.logo {

  text-align: center;
  
}

.navigacija{

  -ms-flex: 100%; /* IE10 */

  flex: 100%;

}

/* Main column */

.main {   

  -ms-flex: 100%; /* IE10 */

  flex: 100%;

}



.naujienos {   
background-color: rgba(133,0,0,0.1);
  -ms-flex: 100%; /* IE10 */
border-radius: 10px 10px 10px 10px;
  flex: 100%;
  padding: 0px 0px 0px 0px;
  margin: 8px 8px; 
  color: #fff;
  font-size: 14px;
	
}
.naujienos:hover {   
background-color: rgba(133,0,0,0.15);
  -ms-flex: 100%; /* IE10 */
border-radius: 10px 10px 10px 10px;
  flex: 100%;
  padding: 0px 0px 0px 0px;
  margin: 8px 8px; 
  color: #fff;
  font-size: 14px;
	
}
.naujienosvisos {   
background-color: rgba(0,0,0,0.3);
  padding: 0px 0px 0px 0px;
  display: flex;
	flex-wrap: wrap;
	border-radius: 0px 0px 0px 0px;
	
}


/* Fake image, just for this example */

.fakeimg {

  background-color: #aaa;

  width: 100%;

  padding: 20px;

}


.text {

  color: #f2f2f2;

  font-size: 14px;
	max-width:500px;
  text-align: center;
  position: relative;
	text-transform: uppercase;
	border-radius: 10px;
  padding: 20px;
  color: #cecece;
  padding-bottom: 30px;
}

.text h2{
	color: #fff;
	font-size: 35px;
	margin-top: 10px;
	margin-bottom: 5px;
	
}

.antraste {

	text-align: center;

	font-size: 20px;

	background-color: rgba(133,0,0,0.2);

	color: #fff;

	padding: 20px 20px;

	width: 100%;

	border-radius: 0px 10px 0px 0px;

	margin-top: 30px;

}


.tekstas {

	padding: 20px 30px;
	color: #333;
	background-color: rgba(0,0,0,0.2);
	border-radius: 0px 0px 0px 10px;

}



.active, .dot:hover {

  background-color: #717171;

}



/* Fading animation */

.fade {

  animation-name: fade;

  animation-duration: 1.5s;

}


        .voverlay-content {
            background: #111;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 390px;

            position: relative;
            color: #fff;
        }




.player {

	
	
  max-height: 200px;
	max-width: 100%;
	margin: 0;
	padding-left: 0px;




  


  .cover {
	

    width: 140px;

    height: 140px;

    border-radius: 50%;

    overflow: hidden;

    box-shadow: 0 3px 10px 0 #000;



    img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }

  }



  .info {
	padding-left: 5px;
	margin-top: 20px;
    text-align: center;
	max-width: 235px;
	overflow: hidden;
	white-space: nowrap;
    .title {

		transition: left 5s ease-in-out;
	
      font-size: 14px;

      font-weight: 700;
position: relative;
      color: #fff;
		left: 0;
      margin-bottom: 2px;

    }
	.title:hover {
      left: -100%;  /* Slide text to the left on hover */
    }


    .singer {
		transition: left 5s ease-in-out;
		position: relative;
		left: 0;
      font-size: 13px;

      color: #999;

    }
	
	.singer:hover {
      left: -100%;  /* Slide text to the left on hover */
    }

  }



  .btn-box {


	margin-top: 15px;
    display: flex;

    



    i:first-child {

      font-size: 38px;

      color: #850000;

      margin: 0 22px 0 20px;
		
	  cursor: url(http://topfm.lt/arrowhead.svg) 12 12, auto;

    }
	i {

      font-size: 38px;

      color: #850000;

      margin: 0 22px;
	
	cursor: url(http://topfm.lt/arrowhead.svg) 12 12, auto;

    }

    i.active {

      color: #111;

	  background-color: unset;

    }

  }



  .volume-box {

    display: none;
    position: absolute;
    bottom: 419px;
    z-index: 1;	
    padding: 0 20px;
	background-color: #fff;
	color: #fff;
    .volume-up::selection {

      background-color: unset;

    }



    input[type="range"] {

      height: 5px;

      width: 150px;

      margin: 0 0 15px 0;

    }

  }

  .volume-box.active {

    display: block;

	background-color: unset;

  }

  .music-box {

	margin-left: 0px;

    .play,

    .pause {

      position: absolute;
 box-shadow: 0 3px 10px 0 #000;
     

      width: 140px;

      height: 140px;

      border-radius: 50%;

      background-color: #111;

	cursor: url(http://topfm.lt/arrowhead.svg) 12 12, auto;

      transition: all 0.4s;



      i {

        font-size: 66px;

        color: #850000;

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-48%, -50%);

      }

    }

    .pause {

      i {

        font-size: 66px;

        transform: translate(-50%, -50%);

      }

    }

  }

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */



.visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;
  
}

h1 {
  color: white;
  text-align: center;
  margin-top: 1em;
}

.container {
  overflow: hidden;
  padding: 20px;
  margin-top: 2em;
  background: rgba(0,0,0,.1)
}

.card-carousel {
  --card-width: 80%;
  --card-max-width: 280px;
  --card-height: 350px;
  --carousel-min-width: 600px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--card-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
  margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
}


.card-carousel.smooth-return {
  transition: all .2s ease;
}

.card-carousel .card {
  background-color: #111;
  width: var(--card-width);
  max-width: var(--card-max-width);
  text-align: center;
  padding: 1em;
  min-width: 300px;
  height: var(--card-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(255,255,255,.8);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  border-radius: 1em;
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card.highlight {
  filter: brightness(1)
}




.image-container {
  width: 12em;
  height: 12em;
  position: relative;
  background-size: cover;
  margin-bottom: 2em;
  border-radius: 100%;
  padding: 1em;
  -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.5);
  
}

.image-container::after {
  content: "";
  background-color: #fff;
  z-index: -2;
  display: block;
  width: 110%;
  height: 110%;
  border: solid 3px rgba(133,0,0,0.1);
  border-radius: 100%;
  position: absolute;
  top: calc(-5% - 3px);
  left: calc(-5% - 3px);
}

/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #111;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #650000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #85000;
}
.butonai{
	
	position: absolute;
	left: 0px;
	top: 20%;
	display: none;
}
.fa {
	display: initial;
  padding: 10px;
  font-size: 24px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  opacity: 0.7;
}

.fa:hover {
    opacity: 1;
}

.fa-facebook {

  background-color: rgba(0,0,0,0.6);
  color: white;
}
.fa-youtube {

    background-color: rgba(0,0,0,0.6);
  color: white;
}
.fa-instagram {
  background-color: rgba(0,0,0,0.6);
  color: white;
}

.nuotraukyte {

padding-right: 10px;	
	
}

.nuotraukyter {

padding-left: 10px;	
	
}

.parase {
	
	padding-top: 5px;
	
}

.foniukas {
	float: left;
display: flex;
	background-color: rgba(0,0,0,0.4);
	padding: 12px 20px 5px 10px;
	border-radius: 20px;
}

.foniukasz {
display: flex;
float: right;
background-color: rgba(0,0,0,0.4);
padding: 12px 10px 5px 20px;
	border-radius: 20px;
}

.naujienos img {
	
	border-radius: 20px;
	width: 100%;
	max-height: 200px;
	margin-bottom: 10px;
	border: 2px solid;
	border-color: rgba(0,0,0,0.2);
}

.headernaujienos h2 {
text-align: center;
margin: 0px 0px 15px 5px;
padding: 0px;
float: left;
}

.headernaujienos h5 {
text-align: center;
margin: 5px 10px 0px 5px;
padding: 0px;
font-size: 12px;
font-weight: 100;
float: right;
}

.headernaujienos p {
	
margin: 10px 5px;
padding: 0px;

}

  .overlay {
  width: 90%;
  max-width: 700px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 500;
  background-color: #111;
  text-align: center;
  border-radius: 20px;
}

  .overlaybig {
  width: 100%;
  max-width: 800px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 500;
  background-color: #111;
  text-align: left;
  border-radius: 20px;
  padding: 50px;
}
.overlaybig a{
	
	text-decoration: none;
	
}
.overlay a{
	
	text-decoration: none;
	
}
.overlay-content {
  position: relative;
  text-align: center;
  
}
.overlay-content i{
  padding: 18px 0px 18px 18px;
  color: #850000;
  postion: absolute;
}

.input_field {
	
	background-color: rgba(255,255,255,1);
	margin: auto;
	display: flex;
	text-align: center;
	width: 90%;
	max-width: 300px;
	margin-top: 15px;
	margin-bottom: 15px;
	max-height: 65px;
	transition: max-height 0.5s;
	overflow: hidden;
	border-radius: 10px;
	
}
.input_field input {
	width: 100%;
	background-color: transparent;
	border: 0;
	outline: 0;
	padding: 18px 15px;
	color: #750000;
}

.button_field {
	width: 90%;
	max-width: 300px;
	margin: auto;
	display: flex;
	
}

.button_field button {
	background-color:rgba(133,0,0,0.5);
	color: #fff;
	height: 45px;
	border: 0;
	outline: 0;
	cursor: url(http://topfm.lt/arrowhead.svg) 12 12, auto;
	transition: background 1s;
	width: 100%;
	margin: 20px 0px 30px 0px;
	border-radius: 10px;
}
.warning {
	
	margin-top: -20px;
	color: #fff;
	
}

.overlay h1 {
	
	margin: 10px;
	padding-top: 40px;
	padding-bottom: 20px;
	
}
.sticky {
	
	position: sticky;
	top: 0;
	z-index: 500;
}
.topnav {

  overflow: hidden;
  background-color: rgba(0,0,0,0.8);
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 18px 26px;
  text-decoration: none;
  font-size: 17px;
}

a.nieko {
	
  display: none;
  
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
	
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown .dropbta {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  }

.dropdown-content a {
	font-size: 16px; 
  float: none;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgba(133,0,0,0.5);
  color: white;
}

.dropdown-content a:hover {
 background-color: rgba(133,0,0,0.5);
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.dropbtn {
	
	padding: 7px 30px;
	display: flex;
	align-items: center;
	min-width: 160px;
	
}

.dropbta {
	
	padding: 1px 15px;
	align-items: center;
	min-width: 60px;
}

.dropbta:hover {

background: rgba(133,0,0,0.5);

}
  .kontaktai {
            background: rgba(133,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 540px;
			padding-top: 20px;
			padding-bottom: 40px;
        }
 .slider-container {
            width: 1400px;
            overflow: hidden;
            position: relative;
        }

        .team-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            flex: 0 0 calc(25% - 0px); /* 4 slides visible at once, with space */
            position: relative;
            text-align: center;
            overflow: hidden;
            border-radius: 15px;
            margin-right: 0px; /* Adds space between slides */
        }

        .slide:last-child {
            margin-right: 0; /* Removes the space for the last slide */
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }

        .slide:hover img {
            transform: scale(1.1);
        }

        .sinfo {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.0);
            color: white;
            padding: 15px 10px;
            text-align: center;
            transition: 0.3s;
        }

        .slide:hover .sinfo {
            background: rgba(0, 0, 0, 0.0);
            color: white;
        }

        .slide h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .slide p {
            font-size: 10px;
            opacity: 0.8;
        }

        .social-icons {
			display: none;
            margin-top: 10px;
        }

        .social-icons i {
            margin: 0 10px;
            color: #fefefe;
            font-size: 10px;
            text-decoration: none;
            transition: color 0.3s;
			background-color: unset;
        }

        .social-icons i:hover {
            color: #850000; /* Change to your preferred hover color */
			background-color: unset;
        }
		
		.footer {
            background: rgba(0,0,0,0.5);
            color: #fff;
            padding: 20px 20px;
            text-align: center;
        }

        .footer .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .footer .footer-section {
            flex: 1 1 calc(25% - 40px);
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
        }
		
        .footer .footer-section a {
            color: #cecece;
			text-decoration: none;
        }
		
		.footer .footer-section img {
           width: 80%;
		   margin-top: 20px;
        }

        .footer .footer-section h3 {
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .footer .footer-section p {
            margin: 8px 0;
            font-size: 14px;
        }

        .footer .footer-section .social-icons a {
            color: #fff;
            margin: 10px;
            font-size: 20px;
            transition: color 0.3s;
        }

        .footer .footer-section .social-icons a:hover {
            color: #1e90ff;
        }

        .footer .footer-bottom {
            margin-top: 20px;
            font-size: 14px;
            color: #aaa;
			max-width: 380px;
			margin-left: auto;
			margin-right: auto;
        }

        .footer .footer-bottom a {
            color: #1e90ff;
            text-decoration: none;
        }


		
		.social-iconsz i {
            padding: 15px 0px;
            color: #111;
			background-color: #fff;
            font-size: 14px;
            text-decoration: none;
            transition: color 0.3s;
			border-radius: 5px;
        }

        .social-iconsz i:hover {
            color: #850000; /* Change to your preferred hover color */
			background-color: #fff;
        }
		
		.archyvas {	
			background: rgba(0,0,0,0.4);
            color: white;
            display: flex;
            justify-content: center;
            margin: 0;
            padding-top: 30px;
			padding-bottom: 40px;
			width: 100%;
			
		}
		.archyvasa {	
			background: rgba(0,0,0,0.5);
            color: white;
            justify-content: center;
            text-align: center;	
			padding-top: 20px;
			padding-bottom: 20px;
			font-size: 40px;
			font-weight: 600;
		}
        .containerz {
            width: 100%;
            display: block;
            background: rgba(133,0,0,0.2);
            border-radius: 10px;
            overflow: hidden;
        }
		
		.containerz h2 {
			
			margin: 0px;
			padding-bottom: 20px;
			padding-top: 10px;
			font-size: 40px;
			
		}

        /* Left - Video Player */
        .video-player {
			flex: 100%;
            width: 100%;
            padding: 20px;
            text-align: center;
        }

        iframe {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            border: none;
        }

        /* Right - Video List */
        .video-list {
			flex: 100%;
            width: 100%;
            background: rgba(0,0,0,0.2);
            padding: 20px;
			padding-bottom: 10px;
            max-height: 445px; /* Limit height */
            overflow: scroll;
            /* Hides the scrollbar */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
        }

        .video-item {
            display: flex;
            align-items: center;
            background: rgba(133,0,0,0.1);
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .video-item:hover {
            background: rgba(133,0,0,0.2);
        }

        .video-item img {
            width: 80px;
            height: 50px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .video-item span {
            font-size: 14px;
            color: #ddd;
        }
		
				.programa {	
			background: rgba(133,0,0,0.2);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.programaa {	
			background: rgba(133,0,0,0.3);
            color: white;
            justify-content: center;
            text-align: center;	
			padding-top: 20px;
			padding-bottom: 20px;
			font-size: 40px;
			font-weight: 600;
		}

        .program-container {
            width: 1200px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 15px;
        }

        /* Pirmi 4 blokai užima 25% */
        .day-column {
            width: 100%;
            background: rgba(133,0,0,0.1);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            transition: 0.3s;
        }

        /* Paskutiniai 3 blokai užima 33.33%, kad užimtų visą eilutę */
        .day-column:nth-child(n+5) {
            width: 100%;
        }

        .day-column:hover {
            background: rgba(133,0,0,0.15);
        }

        .day-header {
            font-size: 18px;
            font-weight: bold;
            padding: 12px;
            background: rgba(0,0,0,0.5);
            border-radius: 5px;
            margin-bottom: 12px;
        }

        .event {
            background: rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 6px;
            font-size: 14px;
        }
		.profile-container {
            justify-content: center;
            align-items: center;
            padding: 0px;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 500;
			width: 100%;
        }

        .profile-card {
            width: 100%;
            background: #111; /* Tamsus fonas kortelei */
            border-radius: 0px;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
            display: flex;
			flex-direction: column;
			align-items: center;
            padding: 50px;
            transition: transform 0.3s ease;
        }
		
		.zinute-card {
			 width: 100%;
            display: block;
            background: #111; /* Tamsus fonas kortelei */
            border-radius: 20px;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
            display: flex;
            padding: 55px;
            transition: transform 0.3s ease;
        }
		
        .profile-card:hover {
        }

        /* Kairė pusė: Nuotrauka ir socialinių tinklų nuorodos */
        .left-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 30px;
            justify-content: center;
            position: relative;
        }

        /* Profilio nuotrauka */
        .profile-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            margin-bottom: 20px;
            position: relative;
        }

        .profile-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Pakeisti nuotrauką mygtukas */
        .change-photo-btn {
            position: absolute;
            bottom: 10px;
            right: 40%;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 50%;
            padding: 10px;
            transition: background-color 0.3s ease;
        }

        .change-photo-btn:hover {
            background-color: rgba(133,0,0,0.9);
			color: #fff;
        }

        .change-photo-btn i {
            font-size: 20px;
        }

        /* Socialinių tinklų nuorodos */
        .social-links {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background-color: #333;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            background-color: rgba(133,0,0,0.2);
        }

        .social-links a i {
            font-size: 18px;
        }

        /* Dešinė pusė: Profilio informacija */
        .profile-info {
            flex-grow: 1;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }


        .profile-name {
			text-align: center;
            font-size: 32px;
            font-weight: 600;
            color: #fff; /* Balta spalva vardui */
			
        }

        .profile-title {
            font-size: 14px;
            color: #aaa; /* Šviesesnė spalva titului */
        }

        .profile-details {
            margin-bottom: 20px;
        }

        .profile-details p {
            margin: 5px 0;
            font-size: 14px;
            color: #ccc; /* Šviesus tekstas detalėms */
        }

        .profile-details strong {
            font-weight: 600;
            color: #fff;
			/* Balta spalva svarbiems tekstams */
        }

        /* Mygtukai privačiam pranešimui ir nustatymams */
        .profile-buttons {
            margin-top: 0px;
            display: flex;
            gap: 15px;
            align-self: flex-start;
        }
		

        .profile-buttons button {
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
		
		        .profile-buttons input {
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            border: none;
			max-width: 50%;
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
		
        .profile-buttons button:hover {
            background-color: #eaeaea;
        }
		

        /* Atsakant į mažesnes įrenginių ekrano rezoliucijas */

		
		#notification-bar {
            background-color: #111;
            color: white;
            display: none;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
            font-size: 14px;
            transition: all 0.3s ease;
			z-index: 500;
        }
		.notification {
			display: flex;
			align-items: center;
			background-color: #111;
			padding: 14px 15px;
			font-size: 15px;
			transition: background-color 0.3s ease;
			width: 100%; /* Ensure it stretches within the parent */
		}
				.notification:hover {

			background-color: rgba(133,0,0,0.5);

			transition: background-color 0.3s ease;
		}

        #notification-bar:hover {
            background-color: #111;
        }
		#notification-bar img {
            border-radius: 50%;
			padding-right: 10px;
        }

        /* Open Chat Button */
        .open-chat-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #ff5722;
            color: white;
            padding: 14px 18px;
            border-radius: 50%;
            font-size: 22px;
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .open-chat-btn:hover {
            background-color: #e64a19;
            transform: scale(1.1);
        }

        /* Chat Box */
        #chat-box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 340px;
            background: #ffffff;
            border-radius: 0px 0px 20px 20px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            overflow: hidden;
            border: 0px solid #111;
			z-index: 500;
        }

        /* Chat Header */
		#chat-header {
			background-color: #111;
			color: white;
			padding: 14px 20px;
			display: flex;
			justify-content: space-between; /* Spacing avatar and button */
			align-items: center; /* Centering elements vertically */
			font-weight: 600;
			font-size: 16px;
			border-bottom: 1px solid #e0e0e0;
		}

		#chat-header .avatar {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		#chat-header .chat-nickname {
			flex-grow: 1; /* Allow nickname to take up the remaining space */
			text-align: center; /* Center the nickname */
		}

		#chat-header button {
			background-color: transparent;
			color: white;
			font-size: 18px;
			border: none;
			transition: color 0.3s ease;
}

		#chat-header button:hover {
			color: #f1f1f1;
		}

        /* Chat Messages */
        #chat-messages {
            height: 300px;
            overflow-y: auto;
            padding: 15px;
            font-size: 14px;
            line-height: 1.6;
            background-color: #f9f9f9;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        /* Message */
        .message {
            margin-bottom: 12px;
            padding: 0px 15px;
            border-radius: 10px;
            max-width: 80%;
            font-size: 14px;
            line-height: 1.5;
            display: flex;
            align-items: center;
            word-wrap: break-word; /* Ensures the word wraps to the next line */
            word-break: break-word; /* Breaks long words */
        }

        /* Sent Message */
        .message.sender {
            background-color: #ff5722;
            color: white;
            align-self: flex-end;
            justify-content: flex-end;
        }

        /* Received Message */
        .message.receiver {
            background-color: #e0e0e0;
            color: #333;
            align-self: flex-start;
            justify-content: flex-start;
        }

        /* Avatar */
        .message img {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        /* Chat Input */
        #chat-input {
            display: flex;
            padding: 12px;
            background-color: #f9f9f9;
            border-top: 1px solid #ddd;
        }

        #chat-input input {
            flex: 1;
            padding: 10px 15px;
            font-size: 14px;
            border-radius: 10px;
            border: 1px solid #ddd;
            outline: none;
            transition: border-color 0.3s ease;
        }

        #chat-input input:focus {
            border-color: #ff5722;
        }

        #chat-input button {
            background-color: #111;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            border: none;
            border-radius: 10px;
            margin-left: 8px;
            transition: background-color 0.3s ease;
        }

        #chat-input button:hover {
            background-color: #111;
        }
		
		        .chat-row {
            display: block;
            gap: 10px;
            width: 300px;
            margin: 20px auto;

        }

        .chat-block {
            display: flex;
            align-items: center;
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 8px 10px;
            width: 100%; /* Adjusting the width for 5 blocks in a row */
            box-sizing: border-box;
            border: 1px solid #ddd;
            transition: transform 0.1s ease;
        }
		 .chat-block p{
		margin: 0px;
		padding: 0px;
        }

        .chat-block:hover {
            transform: scale(1.05);
            background-color: #eaeaea;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .chat-info {
            display: flex;
            flex-direction: column;
        }

        p.nickname {
            font-weight: bold;
            color: #333;
            margin: 0;
            font-size: 14px;
        }

        p.last-message {
            color: #666;
            font-size: 12px;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        /* Responsive design */

	        /* Responsive design */
        .profile-update-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }
/* Show overlay */
.profile-update-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Profile Update Box */
.profile-update-box {
    background: #111;
    padding: 30px;
    width: 500px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: center;
    position: relative;
    animation: fadeIn 0.5s ease-in-out;
}

/* Close Button */
.profile-update-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
}

/* Form Fields */
.profile-update-box input {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    height: 40px; /* Consistent height for inputs */
}

/* File Input (Hidden) */
.profile-update-file-input {
    display: none;
}

/* Profile Picture Upload */

/* Gender Selection */
.profile-update-gender-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 0px;
}

.profile-update-gender-btn {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    height: 40px; /* Match height of other inputs */
}

.profile-update-gender-btn.active {
    background: #cecece;
}

/* Submit Button */
.profile-update-submit-btn {
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    margin-top: 10px;
}

.profile-update-submit-btn:hover {
    background: #cecece;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Two Column Layout */
.profile-update-form {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* Left Column */
.profile-update-left,
.profile-update-right {
    width: 48%;
}

.profile-update-left input,
.profile-update-right input {
    margin-bottom: 15px;
}

/* Gender section */
.profile-update-gender-container {
    margin-top: 5px;
}

/* Ensure Submit Button is full width */
.profile-update-submit-btn {
    margin-top: 20px;
    padding: 12px;
    background-color: #f5f5f5;
    color: #666;
    border: none;
    cursor: pointer;
}

.profile-update-submit-btn:hover {
    background-color: #cecece;
}
/* Profile Picture Container */
.profile-update-file-label {
    position: relative;
    display: inline-block;
}

/* Profile Picture Upload */
.profile-update-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid #333;
    object-fit: cover;
    margin-bottom: 0px;
}

/* Camera Icon over Profile Picture */
.profile-update-camera-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    font-size: 40px; /* Adjust the size of the icon */
    color: white;
    opacity: 0.8; /* Low opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Prevent it from blocking clicks on the profile picture */
}

/* Adjust the profile picture to make room for the camera icon */
.profile-update-file-label:hover .profile-update-camera-icon {
    opacity: 0.9; /* Optionally increase opacity on hover */
}


}