/* your custom style here */
@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@500&display=swap");
* { font-family: Playpen Sans, system-ui; }
.profile_avatar{
display: block;
margin: 0 auto;
}
.avatar_spin{
border-radius: 30%;
}
.state_profile{
width: 15px;
height: 15px;
right: 15px;
}
.profile_tinfo{
display: block;
padding: 10px;
}
.pdetails{
text-align: center;
}
#profile_like{
width: auto;
margin: 0 auto;
}
.user_item_data, .user_item_name {

display: table-cell;

vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 5px;
text-align: center;  /* Add this line */
}

/*panel selected */
.panel_selected {
    background: var(--main-color-dark);
    border: 4px solid #000;
    border-radius: 35px;
}

/* modal css */
.small_modal_out, .large_modal_out {
  animation: fadeIn 0.5s;
}

.over_modal_out, .over_emodal_out {
  animation: fadeIn 0.5s;
}

.small_modal_in {
  animation: zoomIn 0.5s;
}

.large_modal_in {
  border-radius: 3px;
  margin: 5% auto;
  max-width: 500px;
  width: 98%;
  animation: zoomIn 0.5s;
}

.over_modal_in {
  animation: zoomIn 0.5s;
}

.over_emodal_in {
  animation: zoomIn 0.5s;
}


/* Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Private Logs */

.private_avatar {
  display: table-cell;
  width: 56px; /* increased width */
  vertical-align: top;
  padding: 0 5px;
}

.private_content {
  display: table-cell;
  vertical-align: top;
}

/* Hunter Private */

.hunter_private {
  max-width: 200px; /* increased max-width */
  display: inline-block;
  margin-top: 10px; /* increased margin-top */
  word-wrap: break-word;
  border-radius: 0 14px 14px 14px; /* increased border-radius */
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
  font-size: 14px; /* increased font-size */
}

/* Target Private */

.target_private {
  max-width: 200px; /* increased max-width */
  display: inline-block;
  margin-top: 10px; /* increased margin-top */
  word-wrap: break-word;
  float: right;
  border-radius: 14px 0 14px 14px; /* increased border-radius */
  box-shadow: 0 0 14px rgba(0, 0, 255, 0.8);
  font-size: 14px; /* increased font-size */
}

/* Avatar Private */

.avatar_private {
  display: block;
  height: 42px; /* increased height */
  width: 42px; /* increased width */
  border-radius: 8px; /* square shape */
  overflow: hidden;
}


/* Chat logs */
.ch_logs.log2 {
  border-radius: 5px; /* Rounded edges */
  margin-bottom: 20px; /* Gap between chat logs */
  padding: 5px;
  color: #fff; /* White text color */
  animation: fade-in 0.5s; /* Animation */
}
 
.ch_logs {
  border-radius: 5px; /* Rounded edges */
  margin-bottom: 20px; /* Gap between chat logs */
  padding: 5px;
  color: #fff; /* White text color */
  animation: fade-in 0.5s; /* Animation */
}
/* Animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.fa-play-circle{
    content: url('https://static.wixstatic.com/media/1c1f79_ea6cb17d1f5e451caec55cb285ac17ec~mv2.gif'); /* Replace with your image path */
    font-family: none; /* Remove the Font Awesome font family */
    display: inline-block;
     width: 50px; /* Adjust to the size of your image */
    height: 20px; /* Adjust to the size of your image */
    vertical-align: middle;
    padding-right:10px;
}


.fa-music{
    content: url('https://cdn3d.iconscout.com/3d/premium/thumb/music-3d-icon-download-in-png-blend-fbx-gltf-file-formats--musical-sound-melody-note-symbol-user-interface-pack-icons-8511794.png?f=webp'); /* Replace with your image path */
    font-family: none; /* Remove the Font Awesome font family */
    display: inline-block;
    width: 30px; /* Adjust to the size of your image */
    height: 30px; /* Adjust to the size of your image */
    vertical-align: middle;
}



.fa-bars{
    content: url('https://static.vecteezy.com/system/resources/thumbnails/032/851/668/small/quote-box-3d-illustration-icon-or-text-box-3d-icon-illustration-or-3d-message-box-icon-or-speech-bubble-3d-icon-box-png.png'); /* Replace with your image path */
    font-family: none; /* Remove the Font Awesome font family */
    display: inline-block;
    width: 40px; /* Adjust to the size of your image */
    height: 40px; /* Adjust to the size of your image */
    vertical-align: middle;
}

.fa-paper-plane{
    content: url('https://cdn-icons-gif.flaticon.com/11186/11186861.gif'); /* Replace with your image path */
    font-family: none; /* Remove the Font Awesome font family */
    display: inline-block;
    width: 40px; /* Adjust to the size of your image */
    height: 40px; /* Adjust to the size of your image */
    vertical-align: middle;
	border-radius: 40px;
}


.topic_log { background-image:url('https://images.rawpixel.com/image800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvam9iNDczLWt3YW4tMDYtYS5qcGc.jpg');background-position:center center;background-size:cover; border-radius: 25px;color:#000000; }

.sys_log{width:auto;margin:5px auto;padding:6px 8px;border-radius:50px;background-image:url('https://i.pinimg.com/originals/57/ba/fb/57bafb29b2b2d12ae1b527ca51a52be5.gif');background-size:cover; background-position:center, center;color:#ffffff;}