/* ===== Bendrai ===== */
.photo-slider-container {
  position: relative;
  width: 100%;
}


.photo-slider::-webkit-scrollbar

{
  display: none;
}


.avatar:hover {
  border-radius: 5px;
    cursor: pointer;
  transform: scale(1.05);
  
transition: transform 0.3s;

}

.avatar {
    cursor: pointer;
}
.avatar:hover {

cursor: pointer;
}
.photo-slider img:hover {
  transform: scale(1.05);
}

.info_text_pridetos_nuotrauka {
  margin-bottom: 5px;
}

.info_text_pridetos_nuotrauka .inxcxcxxcxcxcxcbel {
  font-size: 14px;
  color: #555;
}

.photo-count {
  font-weight: bold;
}


#receivedCardsContainer {
    overflow-y: auto;
    display: flex
;
    gap: 5px;
    flex-direction: column;
}







 
 
 
 
 
 
 
 .dots-container {
    text-align: center;
    margin-top: 10px;
    height: 20px;
    display: flex
;
    bottom: 99px;
    align-items: center;
}

.dots-container .dot {
     /* border-radius: 50%; */
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background-color: gray;
    cursor: pointer;
    transition: background-color 0.3s ease;
}




.modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    padding: 10px;
    margin-top: 70px;
}


.dots-container .dot.active {
    background-color: white;
    width: 10px;
    height: 10px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    .image-thumbnail:hover {
        transform: scale(0.99);
        transition: .3s;
        cursor: pointer;
    }


    
.image_wrapper_with_loader{
  display: flex;
  position: relative;
}
    .image_loader_motyvationals{
    position: absolute;
    top: 55%;
    left: 52%;
    animation: spin_loader 0.1s 
linear infinite;
    transition: opacity 0.1s 
ease;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    border: 7px solid #777777;
    border-top: 5px solid transparent;
    }





    .image_reply_loader{
     position: absolute;
    top: 32px;
    left: 58%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    border: 7px solid #aeaeae;
    border-top: 5px solid transparent;
    animation: spin_loader 0.1s 
linear infinite;
    transition: opacity 0.1s 
ease;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    border: 7px solid #777777;
    border-top: 5px solid transparent;
    transition: opacity 0.3s 
ease;
    }
.image-loader{
    top: 33px;
    left: 33px;
    width: 30px;
    height: 30px;
    animation: spin_loader 0.1s 
linear infinite;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    border: 7px solid #777777;
    border-top: 5px solid transparent;
    transition: opacity 0.3s 
ease;
}
.image_loader_user_profiless{
      top: 31px;
    left: 31px;
    width: 30px;
    height: 30px;
    animation: spin_loader 0.1s 
linear infinite;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    border: 7px solid #777777;
    border-top: 5px solid transparent;
    transition: opacity 0.3s 
ease;
}






.post-images {
  /* border-radius: 4px; */
    display: flex
;
    gap: 8px;
}



/* .image-wrapper {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border: 1px solid #ccc;
    object-fit: cover;
} */

.image-wrapper img {
     border-radius: 4px;
    width: 50px;
    height: 50px;
    object-fit: cover;
    display: block;
    margin: 3px;
}

.image-wrapper{
    border: 1px solid #d4d4d4;
    border-radius: 5px;

}












.thumbnails-container {
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
    margin: 10px auto;
}

.thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 2px solid transparent;
  /* border-radius: 4px; */
  cursor: pointer;
  transition: border 0.2s;
}

.thumbnail.active {
  border: 2px solid #fff;
}



@media (max-width: 550px) {
.thumbnail {
  width: 50px;
  height: 50px;
}
}

/* 
.post-images {
    border-radius: 4px;
    display: flex
;
    gap: 8px;
}
.image-wrapper {
    border-radius: 4px;
    width: 75px;
    object-fit: cover;
    height: 75px;
    overflow: hidden;
    border: 1px solid #ccc;
}

 */


.image-wrapper img:hover {
   /* transform: scale(1.05); */
}


.post-images {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.image-wrapper-with-loader {
  flex: 0 0 calc((100% - 6 * 5px) / 7);
  position: relative;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
}

.image-wrapper-with-loader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.image-wrapper-with-loader img.visible {
  opacity: 1;
}



.loader_image {
    margin: -20px 0 0 -20px;
    display: none;
    position: absolute;
    top: 48%;
    left: 50%;
    width: 40px;
    border-radius: 50%;
    height: 40px;
    margin: -15px 0 0 -15px;
    border: 10px solid white;
    border-top: 5px solid transparent;
    animation: spin 0.001s linear infinite;
    z-index: 10;
    transition: opacity 0.5s ease;
    opacity: 1;
}

/* loader stilius */
.image-wrapper-with-loader .image-loader {
  /* position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 5px solid #aeaeae;
  border-top: 5px solid transparent;
  animation: spin 0.5s linear infinite;
  z-index: 2; */



      /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* width: 30px; */
    /* height: 30px; */
    /* margin: -15px 0 0 -15px; */
    /* border-radius: 50%; */
    /* border: 5px solid #aeaeae; */
    /* border-top: 5px solid transparent; */
    /* animation: spin 0.5s 
linear infinite; */
    /* z-index: 2; */
    position: absolute;
    top: 60%;
    left: 58%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    border: 7px solid #aeaeae;
    border-top: 5px solid transparent;
    animation: spin_loader 0.1s 
linear infinite;
    transition: opacity 0.1s 
ease;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    border: 7px solid #777777;
    border-top: 5px solid transparent;
    transition: opacity 0.3s 
ease;
}

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