/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: "Poppins", sans-serif;*/
}
#mainwrapper_clubmchat {
    font-family: 'Gowun Dodum', sans-serif;
}

:root {
  --text-color: #FFFFFF;
  --icon-color: #ACACBE;
  --icon-hover-bg: #5b5e71;
  --placeholder-color: #dcdcdc;
  --outgoing-chat-bg: #343541;
  --incoming-chat-bg: #444654;
  --outgoing-chat-border: #343541;
  --incoming-chat-border: #444654;
}
.light-mode {
  --text-color: #343541;
  --icon-color: #a9a9bc;
  --icon-hover-bg: #f1f1f3;
  --placeholder-color: #6c6c6c;
  --outgoing-chat-bg: #FFFFFF;
  --incoming-chat-bg: #F7F7F8;
  --outgoing-chat-border: #FFFFFF;
  --incoming-chat-border: #D9D9E3;
}
body {
  background: var(--outgoing-chat-bg);
}

/* Chats container styling */
.chat-container {
  overflow-y: auto;
  max-height: 100vh;
  padding-bottom: 150px;
}
:where(.chat-container, textarea)::-webkit-scrollbar {
  width: 6px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-track {
  background: var(--incoming-chat-bg);
  border-radius: 25px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-thumb {
  background: var(--icon-color);
  border-radius: 25px;
}
.default-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 70vh;
  padding: 0 10px;
  text-align: center;
  color: var(--text-color);
}
.default-text h1 {
  font-size: 3.3rem;
}
.default-text p {
  margin-top: 10px;
  font-size: 1.1rem;
}
.chat-container .chat {
  padding: 25px 10px;
  display: flex;
  justify-content: center;
  color: var(--text-color);
}
.chat-container .chat.outgoing {
  background: var(--outgoing-chat-bg);
  border: 1px solid var(--outgoing-chat-border);
}
.chat-container .chat.incoming {
  background: var(--incoming-chat-bg);
  border: 1px solid var(--incoming-chat-border);
}
.chat .chat-content {
  display: flex;
  flex-direction: column;   /* 세로 방향으로 배치하기 위해 추가 */
  max-width: 1200px;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
span.material-symbols-rounded {
  user-select: none;
  cursor: pointer;
}
.chat .chat-content span {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--icon-color);
  visibility: hidden;
}
.chat:hover .chat-content:not(:has(.typing-animation), :has(.error)) span {
  visibility: visible;
}
/*
.chat .chat-details {
  display: flex;
  align-items: center;
}
.chat .chat-detailsold img {
  width: 35px;
  height: 35px;
  align-self: flex-start;
  object-fit: cover;
  border-radius: 2px;
}
*/

.chat .chat-details:first-of-type {
    display: flex;
    align-items: flex-start; 
}

/*.chat .chat-details:last-of-type {*/
.chat .chat-details-last{
    display: flex;
    align-items: flex-end;   /* 아이템들을 하단에 맞춤 */
}

.chat .chat-details {
    display: flex;
    align-items: flex-start; 
}

.chat .chat-details img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;          /* 이미지 크기가 줄어들지 않도록 설정 */
    object-fit: cover;
    object-position: top;   /* 이미지 상단을 기준으로 위치를 고정 */
    border-radius: 50%;
}

.chat .chat-details p {
  white-space: pre-wrap;
  font-size: 1.05rem;
  padding: 0 50px 0 25px;
  color: var(--text-color);
  word-break: break-word;
}
.chat .chat-details p.error {
  color: #e55865;
}
.chat .typing-animation {
  padding-left: 25px;
  display: inline-flex;
}
.typing-animation .typing-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  margin: 0 3px;
  opacity: 0.7;
  background: var(--text-color);
  animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}
.typing-animation .typing-dot:first-child {
  margin-left: 0;
}
@keyframes animateDots {
  0%,44% {
    transform: translateY(0px);
  }
  28% {
    opacity: 0.4;
    transform: translateY(-6px);
  }
  44% {
    opacity: 0.2;
  }
}

/* Typing container styling 
.typing-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 20px 10px;
  justify-content: center;
  background: var(--outgoing-chat-bg);
  border-top: 1px solid var(--incoming-chat-border);
}
.typing-container .typing-btnarea {
    display: flex;
    justify-content: flex-end; 
    gap: 10px;
}
.typing-container .typing-content {
  display: flex;
  max-width: 950px;
  width: 100%;
  align-items: flex-end;
}
.typing-container .typing-textarea {
  width: 100%;
  display: flex;
  position: relative;
}
*/
/* Typing container styling */
.typing-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;  /* 자식 요소들을 세로로 나열 */
  padding: 20px 10px;
  justify-content: center;
  align-items: center;  /* 중앙 정렬을 위해 추가 */
  background: var(--outgoing-chat-bg);
  border-top: 1px solid var(--incoming-chat-border);
}
.typing-container .typing-btnarea {
    display: flex;
    width: 100%; /* 전체 폭 사용 */
	max-width: 950px;
    justify-content: flex-end; /* 버튼들을 오른쪽 정렬 */
    gap: 10px; /* 버튼들 사이의 간격 */
    margin-bottom: 10px;  /* 아래 요소와의 간격 추가 */
}
.typing-container .typing-content {
  display: flex;
  max-width: 950px;
  width: 100%;
  align-items: flex-end;
}
.typing-container .typing-textarea {
  width: 100%;
  display: flex;
  position: relative;
}

.typing-textarea textarea {
  resize: none;
  height: 55px;
  min-height:55px;
  width: 100%;
  border: none;
  padding: 15px 45px 15px 20px;
  color: var(--text-color);
  font-size: 1rem;
  border-radius: 4px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--incoming-chat-bg);
  outline: 1px solid var(--incoming-chat-border);
}
.typing-textarea textarea::placeholder {
  color: var(--placeholder-color);
}
.typing-content span {
  width: 55px;
  height: 55px;
  display: flex;
  border-radius: 4px;
  font-size: 1.35rem;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
}
.typing-textarea span {
  position: absolute;
  right: 0;
  bottom: 0;
  visibility: hidden;
}
.typing-textarea textarea:valid ~ span {
  visibility: visible;
}
.typing-controls {
  display: flex;
}
.typing-controls span {
  margin-left: 7px;
  font-size: 1.4rem;
  background: var(--incoming-chat-bg);
  outline: 1px solid var(--incoming-chat-border);
}
.typing-controls span:hover {
  background: var(--icon-hover-bg);
}

/* Reponsive Media Query */
@media screen and (max-width: 600px) {
  .default-text h1 {
    font-size: 2.3rem;
  }
  :where(.default-text p, textarea, .chat p) {
    font-size: 0.95rem!important;
  }
  .chat-container .chat {
    padding: 20px 10px;
  }
  .chat-container .chat img {
    height: 32px;
    width: 32px;
  }
  .chat-container .chat p {
    padding: 0 20px;
  }
  .chat .chat-content:not(:has(.typing-animation), :has(.error)) span {
    visibility: visible;
  }
  .typing-container {
    padding: 15px 10px;
  }
  .typing-textarea textarea {
    height: 45px;
    padding: 10px 40px 10px 10px;
  }
  .typing-content span {
    height: 45px;
    width: 45px;
    margin-left: 5px;
  }
  span.material-symbols-rounded {
    font-size: 1.25rem!important;
  }
}
.palyer-card_degi-white{nowrap!important}

.col-container {
  display: block;
  padding: 10px 0 10px 0;  /* 패딩 값에 쉼표 대신 공백을 사용해야 합니다. */
}

.player-imagewrapper {
  min-width: 290px;
  height: auto;
  background: rgb(19, 19, 27);
  background: linear-gradient(
    0deg,
    rgba(19, 19, 27, 1) 0%,
    rgba(40, 41, 46, 1) 100%
  );
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: visible;  /* overflow 값을 visible로 수정 */
  padding: 5px 15px 10px 5px;
}

.p-image img {
	width:500px;
	max-width: 100%;  /* 이미지의 최대 너비를 컨테이너의 너비에 맞게 조절 */
	height: auto;     /* 이미지의 높이를 자동으로 조절하여 가로세로비를 유지 */
}
.clubimageround {
    width: 500px;
    height: 500px;
    object-fit: cover;       /* 이미지의 비율을 유지하면서 원형 내에 맞게 조정 */
    object-position: top;    /* 이미지의 상단을 기준으로 위치를 고정 (세로로 긴 이미지의 하단을 잘라냄) */
    border-radius: 50%;      /* 이미지를 원형으로 만들기 위한 설정 */
}

.giftdesc {
    font-size: 12px; /* 이미 font-12 클래스로 지정되어 있지만, 혹시 모를 상황을 위해 여기에도 추가하였습니다. */
    color: gray; /* 이미 text-gray 클래스로 지정되어 있지만, 혹시 모를 상황을 위해 여기에도 추가하였습니다. */
    display: -webkit-box; 
    -webkit-line-clamp: 3; /* 3줄로 제한 */
    -webkit-box-orient: vertical; /* 박스의 방향을 수직으로 설정 */
    overflow: hidden; /* 넘치는 부분을 숨김 */
    text-overflow: ellipsis; /* 넘치는 부분에 ... 표시 */
    line-height: 1.4; /* 줄 간격 설정. 이 값을 조정하여 원하는 3줄의 높이를 얻을 수 있습니다. */
    max-height: 6.2em; /* line-height * 3 줄. 이 값을 조정하여 원하는 3줄의 높이를 얻을 수 있습니다. */
	min-height: 6.2em; 
}

/* 화면 전체를 덮는 overlay 스타일 */
#overlaycenter {
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
}

#centered-gif {
    width: 100%;  /* gif의 너비. 필요한 크기로 조절하실 수 있습니다. */
    height: auto;
    z-index: 1001; /* overlay 위에 표시 */
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 다른 요소보다 위에 보이도록 함 */
    background-color: rgba(0, 0, 0, 0.7); /* 배경을 약간 어둡게 합니다. 필요 없으면 제거해주세요. */
}

#overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clubheader {
    width: 100%;
    height: 60px;
    background-color: #333; /* 원하는 배경색으로 변경 */
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;  /* 아이콘들을 수직 중앙으로 정렬 */
    justify-content: left; /* 아이콘들을 수평 중앙으로 정렬 */
}

.clubicon-container {
    display: flex;
    align-items: center;
}

.clubicon {
    margin: 5px; /* 아이콘 간의 간격 설정 */
    height: 40px; /* 원하는 아이콘 크기로 변경 가능 */
}


ul .sub-menu{z-index:590!important}

.chat-content {
    position: relative; /* 이 부분을 추가 */
}

.toolbar-icons {
    background-color: black;
    border-radius: 6px;
    padding: 10px 15px 5px 15px;
    position: absolute;
	z-index:99;
    bottom: -30px;       /* chat-content의 내부에서의 위치 조정. 원하는 값으로 수정 가능 */
    right: 30px;        /* chat-content의 내부에서의 위치 조정. 원하는 값으로 수정 가능 */
}

.clubtoolbaricon {
	/*font-size:13px;*/
    transition: transform 200ms; /* smooth transition for size change */
}

.clubtoolbaricon:hover {
    transform: scale(1.5); /* 130% of the original size on hover */
}
#mycontentimg {
    /* 블러 효과 적용 */
    filter: blur(50px); 
    /* 부드러운 전환을 위한 설정 */
    transition: filter 2000ms;
}

.flexcenter {
    display: flex;
    align-items: center;  /* 아이콘들을 수직 중앙으로 정렬 */
}
/* zoom */
@keyframes zoomAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2.5);
    }
}

.zoomed {
    animation: zoomAnimation 2s forwards;
    transform-origin: center center;
}

.clubimgcontainer {
    position: relative;
    width: 100%;
	max-width:500px!important;
    overflow: hidden;
}

.clubimageroundwrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 2%;
}

.clubimageroundx {
    border-radius: 2%;
    width: 98%;
	max-width:500px!important;
}

.clubimageroundxx {
    border-radius: 2%;
    width: 98%;
	max-width:500px!important;
}