/*****#####===== Toast =====#####*****/
#toast-pannel{
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 1090;
}

.solution_toast{
    min-width: 20rem;

    transition: all 0.3s ease-in-out;
}

.solution_toast .toast-header{
    padding: 0.5rem 1rem;

    font-size: 1rem;

    background-color: #6F57FE;
    color: #ffffff;
}

.solution_toast .toast-body{
    padding: 1rem;

    font-size: 1.1rem;
}

.solution_toast .toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/*=================================================
        Comment
=================================================*/
/* --------------------------------------------------------------------------
   리스트 영역
   -------------------------------------------------------------------------- */
.page-wrap.init_comment{
    padding-bottom: 5.4375rem;
}

.page-wrap.active_comment{
    padding-bottom: 12.3125rem;
}

.comment_wrap .empty-comment-wrap{
    padding: 1.5rem 0.5rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-400);
    text-align: center;
}

.comment_wrap .comment_write_wrap{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 1.5rem 0;
    border-top: 1px solid var(--project-color-gray-100);
    border-radius: 0.625rem 0.625rem 0 0;

    background: #ffffff;
    z-index: 1035;
}

.comment_wrap .comment_write_wrap .comment_active_wrap{
    display: none;
}

.comment_wrap .comment_write_wrap.active .comment_trigger_wrap{
    display: none;
}

.comment_wrap .comment_write_wrap.active .comment_active_wrap{
    display: block;
}

.comment_wrap .comment_write_wrap .comment_trigger_wrap{
    display: flex;
    align-items: center;
}

.comment_wrap .comment_write_wrap .comment_trigger_wrap .trigger-place{
    width: 100%;

    padding: 0.625rem;
    border-radius: 0.3125rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
    background: var(--project-color-gray-50);
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment_reply_wrap{
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 1rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-600);
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment_reply_wrap.show{
    display: flex;
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper{
    padding: 0.625rem;
    border-radius: 0.3125rem;

    background: var(--project-color-gray-50);
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment_textarea{
    height: 5em;

    overflow-y: auto;
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment_image_wrap{
    position: relative;

    display: none;
    width: 2.5rem;
    height: 2.5rem;

    margin-top: 0.625rem;
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment_image_wrap.active{
    display: block;
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment_image_wrap .comment_image{
    width: 100%;
    height: 100%;

    border-radius: 0.3125rem;

    background-color: var(--project-color-gray-100);
    background-size: cover;
    background-repeat: no-repeat;
}

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment_image_wrap .comment_image_delete{
    position: absolute;
    top: 0;
    right: 0;

    width: 1rem;
    line-height: 1rem;

    border-radius: 100%;

    font-size: var(--font-h5);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    text-align: center;

    background: var(--project-color-gray-400);

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

.comment_wrap .comment_write_wrap .comment_active_wrap .comment-input-wrapper .comment-func-wrap{
    display: flex;
    justify-content: space-between;

    margin-top: 0.625rem;
}

.comment_wrap .comment_dim_layer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    z-index: 1030;
}

.comment_wrap .comment_dim_layer.show {
    display: block;
}
/* --------------------------------------------------------------------------
   아이템 영역
   -------------------------------------------------------------------------- */
.comment-item-wrap{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;

    padding: 0.75rem;
}

.comment-item-wrap .item-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-item-wrap .item-header .item-title-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.comment-item-wrap .item-header .item-title-wrap .item-dot{
    width: 0.125rem;
    height: 0.125rem;

    border-radius: 100%;

    background: #000000;
}

.comment-item-wrap .item-body .item-content{
    font-size: var(--font-h4);
}

.comment-item-wrap .item-body .item-status{
    display: inline-block;

    padding: 0.25rem 0.5rem 0.15rem;
    border-radius: 10px;

    background-color: var(--project-color-gray-500);
    color: #ffffff;

    font-size: 0.875rem;
}

.comment-item-wrap .item-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: var(--font-h6);
    color: var(--project-color-gray-400);
}

.comment-item-wrap .item-footer .item-btn-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.comment-item-wrap .item-footer .item-btn-wrap .item-btn{
    display: flex;
    align-items: center;
    gap: 0.25rem;
}







.comment-child-wrap .comment-item-wrap{
    padding-left: 2rem;
}

.mention {
    display: inline-block;
    margin-right: 0.375rem;

    color: #0078F1;
}

/*=================================================
    text-count-wrap
=================================================*/
.text-count-wrap{
    padding: 1rem 1rem 0;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background-color: var(--bs-body-bg);
}

.text-count-wrap > .text-count-info{
    display: flex;
    justify-content: end;
    padding: 0.5rem 0;
}

.text-count-wrap > textarea{
    padding: 0;
    border: none;

    resize: none;
}

/*=================================================
    Dropzone
=================================================*/
.dropzone-wrap{
    display:flex;
    width:100%;
}

.dropzone{
    border:none !important;
    min-height:8rem !important;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    padding:0 !important;
    background:transparent;
}

.dropzone .dz-message{
    margin:0 !important;
}

.dropzone.dz-started .dz-message{
    display:flex !important;
}

.dropzone[data-limit="1"].dz-started .dz-message{
    display:none !important;
}

.dropzone .dz-preview.dz-image-preview{
    width:8rem;
    height:8rem;
    margin:0;
}

.dropzone .dz-preview .dz-image{
    width:100% !important;
    height:100% !important;
    border-radius:10px !important;
}

.dropzone .dz-preview .dz-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.dropzone .dz-preview .dz-remove{
    position:absolute;
    top:0;
    right:0;
    width:1.5rem;
    height:1.5rem;
    transform:translate(40%,-40%);
    text-indent:-999999rem;
    background:url(/img/sys/dz-remove.svg) center no-repeat;
    background-size:contain;
    z-index:999;
}

.dropzone .dropzone-trigger-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    width:8rem;
    height:8rem;
    border:2px dashed #ccc;
    border-radius:10px;
}

.dropzone .dropzone-trigger-wrap .trigger-icon{
    width:2.5rem;
    height:2.5rem;
}

.dropzone .dropzone-trigger-wrap svg{
    width:100%;
    height:100%;
}

.dropzone-wrap[data-type="text"]{
    flex-direction: column;
}

/*=================================================
        Fancy Alert
=================================================*/
.fancy-alert{
    width: 330px;

    border-radius: 0.625rem;
    padding: 2.5rem 1.25rem 1.25rem;
}

.fancy-alert .alert-content-wrap{
    text-align: center;
}

.fancy-alert .alert-content-wrap .alert-text{
    display: none;
    margin-top: 1.25rem;

    font-size: 0.75rem;
    color: #9298A1;
}

.fancy-alert .alert-content-wrap .alert-text.isset{
    display: block;
}


.fancy-alert .alert-btn-wrap{
    display: grid;

    margin-top: 1.25rem;
}

.fancy-alert.fancy-alert-confirm .alert-btn-wrap{
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}



/*=================================================
        JOO Drawer
=================================================*/
/**#####===== 기본 =====#####**/
.joo-drawer{
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 1.5rem;

    position: fixed;
    z-index: 1072;

    background-color: #ffffff;
}

/**#####===== 렌더 =====#####**/
.joo-drawer.before-render{
    opacity: 0;
}

.joo-drawer.before-render.showing{
    display: flex;
    opacity: 1;

    transition: transform 0.4s ease-in, opacity 0.2s ease-in;
}

.joo-drawer.rendered{
    display: flex;
}

.joo-drawer.close-render{
    opacity: 0;

    transition: transform 0.4s ease-in, opacity 0.2s ease-out;
}

/**#####===== 드로워 형태 =====#####**/
/**##### 바텀 #####**/
.joo-drawer.bottom{
    right: 0;
    left: 0;
    bottom: 0;

    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.joo-drawer.bottom.before-render,
.joo-drawer.bottom.close-render{
    transform: translateY(100%);
}

/**##### 탑 #####**/
.joo-drawer.top{
    right: 0;
    left: 0;
    top: 0;

    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.joo-drawer.top.before-render,
.joo-drawer.top.close-render{
    transform: translateY(-100%);
}

/**##### 라이트 #####**/
.joo-drawer.right{
    right: 0;
    top: 0;
    bottom: 0;

    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.joo-drawer.right.before-render,
.joo-drawer.right.close-render{
    transform: translateX(100%);
}

/**##### 공통 #####**/
.joo-drawer.bottom.before-render.showing,
.joo-drawer.top.before-render.showing{
    transform: translateY(0%);
}

.joo-drawer.right.before-render.showing,
.joo-drawer.left.before-render.showing{
    transform: translateX(0%);
}

.joo-drawer.page{
    width: 100%;
    height: 100%;

    z-index: 1040;

    border-radius: 0;
}

/**#####===== 헤더 =====#####**/
.joo-drawer-header{
    position: relative;
    height: 1.6875rem;
}

.joo-drawer-header .joo-drawer-header-title{
    height: 1.6875rem;
    font-size: var(--font-h2);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

/**##### 닫기 #####**/
.joo-drawer-close{
    position: absolute;
    top: 50%;
    right: 0;

    cursor: pointer;
    z-index: 9;

    transform: translateY(-50%);
}

/**##### 드래그 핸들 #####**/
.joo-drawer-handler{
    position: relative;
    overflow: hidden;
    height: 3rem;
    visibility: hidden;
}

.joo-drawer.draggable .joo-drawer-handler{
    visibility: visible;
}

.joo-drawer-handler:before{
    content: '';
    position: absolute;

    border-radius: 4px;
    background-color: rgba(200, 200, 200, 0.7);
}

.joo-drawer.top .joo-drawer-handler:before,
.joo-drawer.bottom .joo-drawer-handler:before{
    width: 5rem;
    height: 0.5rem;

    top: 0.5rem;
    left: 50%;

    transform: translateX(-50%);
}

/**#####===== 컨텐츠 =====#####**/
.joo-drawer-content{
    margin-top: 2rem;
    overflow-y: auto;
}

.joo-drawer-content::-webkit-scrollbar {
    display: none;
}

.joo-drawer-content .plugin-remove_button .remove-single{
    display: none;
}

.joo-drawer-content .report-wrap{
    padding: 0;
}

.joo-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1071; /* drawer 아래/위 조정 */
    opacity: 0;
    transition: opacity .3s ease;
}

.joo-drawer-backdrop.show {
    opacity: 1;
}


/*=================================================
				지도
=================================================*/
.map_wrap{
    height: 400px;
}

/*****#####===== 펄스 핀 =====#####*****/
@keyframes pulse-pin {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}
.pulse-pin-wrap{
    position: relative;
    width: 40px;
    height: 40px;
}

.pulse-pin {
    position: relative;
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
    z-index: 1000;

    background-color: #17aded;
    border: 4px solid #FFFFFF;
    border-radius: 100%;
}

.pulse-pin-effect {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    top: 0;

    background: rgba(23, 173, 237, 0.6);
    border-radius: 100%;

    opacity: 0;
    animation: pulse-pin 1s ease-out infinite;
}

/*=================================================
				Swiper
=================================================*/
.swiper_player{
    position: relative;
    overflow: hidden;
}

/*=================================================
				Slick
=================================================*/
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-slide,
.slide-wrap{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-slide:focus,
.slide-wrap:focus{
    outline: 0;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;

    border: 1px solid transparent;
}

.slick-list:focus {outline: none;}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-arrow.slick-hidden {display: none;}

/*****#####===== 추가 설정 =====#####*****/
.slick-wrap{
    position: relative;
    overflow: hidden;
    padding: 0 2rem;
}

/*****#####===== slick dot =====#####*****/
ul.slick-dots>li>button {
    padding: 0;
}

.slick-dots {
    bottom: 3rem;
}

.slick-dots li {
    width: 0.333em;
    height: 0.333em;
    margin: 0 0.2em;
}

.slick-dots li button {
    background-color: #f7f7fb;

    border-radius: 2em;

    opacity: .3;
}

.slick-dots li.slick-active,
.slick-dots li.slick-active button {
    width: 1em;
}

.slick-dots li.slick-active button {
    background-color: #ffffff;

    opacity: .8;
}

/*****##### Arrow #####*****/
.custom-slick-arrow{
    position: absolute;
    display: block;
    width: 1.75rem;
    top: 50%;
    cursor: pointer;

    transform: translateY(-50%);
}

.custom-slick-arrow svg path{
    fill: #ffffff;
}

.custom-slick-arrow.black svg path{
    fill: #000000;
}

.custom-slick-arrow.slick-disabled{
    opacity: 0;
    cursor: default;
}

.custom-slick-prev{
    left: 0;
}

.custom-slick-prev svg{
    transform: rotate(180deg);
}

.custom-slick-next{
    right: 0;
}

/*****##### Dots #####*****/
.slick-dots{
    position: absolute;
    display: block;
    width: 100%;
    bottom: 2rem;
    list-style: none;
    padding: 0;

    text-align: center;
}

.slick-dots li{
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.3em;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    cursor: pointer;

    background-color: #dddddd;
    border-radius: 100%;
    border: 0;
    outline: none;

    color: transparent;
}

.slick-dots li.slick-active button{
    opacity: 0.9;
}

/*=================================================
				이누 캘린더
=================================================*/
/*****#####===== 헤더 =====#####*****/
.byz_calendar.fc .fc-toolbar.fc-header-toolbar{
    padding: 0.7rem 1.5rem;
}

/*****##### 타이틀 #####*****/
.byz_calendar.fc .fc-header-toolbar .fc-toolbar-title{
    margin-top: 0.4rem;

    font-size: 1rem;
    font-weight: normal;
}

/*****##### 버튼 #####*****/
.byz_calendar.fc .fc-header-toolbar .fc-button-primary{
    padding: 0;

    background: none;
    border: none;

    color: #000000;
}

/*****##### 아이콘 #####*****/
.byz_calendar.fc .fc-header-toolbar .fc-icon{
    font-size: 1.2rem;
}

/*****#####===== 달력 =====#####*****/
/*****##### 일반 #####*****/
.byz_calendar.fc .fc-scrollgrid{
    border: none;
}

.byz_calendar.fc td,
.byz_calendar.fc th {
    border: none !important;

    font-weight: normal;
}

/*****##### 날짜 #####*****/
.byz_calendar.fc .fc-daygrid-day-top{
    align-items: center;
    justify-content: center;
}

.byz_calendar .fc-daygrid-day-frame,
.byz_calendar .fc-daygrid-day-top{
    height: 100%;
}

.byz_calendar.fc .fc-daygrid-day.fc-day-today{
    background: none;
}

.byz_calendar.fc .fc-daygrid-day-number{
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 0;

    background: none;
    border-radius: 100%;

    font-size: 1em;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
}

.byz_calendar.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{
    color: #0d95e8;
}

.byz_calendar.fc .fc-daygrid-day.date_selected .fc-daygrid-day-number{
    background: #0d95e8;

    color: #ffffff;
}

.byz_calendar.fc .fc-daygrid-day.fc-day.prevent_rsrv .fc-daygrid-day-number{
    background-color: #c2c6d1;
    border-radius: 6px;

    color: #7d7f97;

    cursor: default;
}

/*****##### 이벤트 #####*****/
.byz_calendar.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
    display: flex;
    justify-content: center;
    min-height: 10px;

    text-align: center;
}

.byz_calendar.fc .fc-event{
    font-size: 0;
    line-height: 0;
}

.byz_calendar.fc .fc-event .fc-event-main{
    color: transparent;
}

.byz_calendar.fc .fc-event.dot_event{
    width: 6px;
    height: 6px;
    margin: 0 1px;

    border: none;
    border-radius: 100%;
}

/*****#####===== 팝업 =====#####*****/
.inu-calendar-fancy .fancybox-slide{
    padding: 0;
}

.inu-calendar-fancy .fancybox-content{
    width: 80%;
    max-width: 400px;
    padding: 0;
}

.inu-calendar-fancy .fancybox-content .fc-header-toolbar{
    background-color: #303aa6;

    color: #ffffff;
}

.byz_calendar.fc .fc-header-toolbar .fc-toolbar-title{
    font-size: 1.5rem;
}

.inu-calendar-fancy .fancybox-content .fc-header-toolbar .fc-icon{
    font-size: 1.5rem;
    color: #ffffff;
}

/*=================================================
				Drawer Select
=================================================*/
#select_drawer.show{
    max-height: 100%;
}

#select_drawer .select_wrap{
    position: relative;
    overflow: hidden;
    padding: 10px 3rem;
}

#select_drawer .select_wrap:not(.multiple):before{
    content: '';
    position: absolute;
    width: 50%;
    height: 40px;
    top: 50%;
    left: 50%;

    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;

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

#select_drawer .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    font-size: 12px;
    color: #CCCCCC;
}

#select_drawer .select_wrap:not(.multiple) .swiper-slide.swiper-slide-active{
    font-size: 20px;
    color: #000000;
}

#select_drawer .swiper-slide .slide_item{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0 25px;
}

#select_drawer .select_confirm_btn{
    padding: 1.5rem;

    border-radius: 0;
}

#select_drawer .select_wrap.multiple .swiper-slide{
    justify-content: left;

    text-align: left;
    font-size: 14px;
    color: #888888;
}

#select_drawer .select_wrap.multiple .multiple_item.active{
    font-size: 16px;
    color: #000000;
}

#select_drawer .select_wrap.multiple .multiple_item.active:before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;

    background-image: url('/front/data/img/component/icon_route_main.svg');
}

#select_drawer .adding_item_input{
    width: 100%;
    padding: 6px;

    border: 1px solid #ced4da;
}

/*=================================================
				Chat
=================================================*/
.chat-input-srch{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    padding: 1rem 1.25rem;

    border-bottom: 1px solid #dddddd;
}

.chat-input-srch .form-control{
    padding: 0;

    border: none;
}

.chat-input-srch .btn{
    padding: 0;
}

/*****#####===== lists =====#####*****/
.chat-lists-item .lists-item {
    padding: 1.5rem 0;

    border-bottom: 1px solid #dddddd;
}

/*****##### 뱃지 #####*****/
.chat-lists-item .lists-item .item-badge {
    width: 1.5rem;
    height: 1.5rem;
}

.chat-lists-item .item-badge .badge {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #ffffff;

    background-color: #ff4800;
    border-radius: 100%;
}

/*****#####===== room =====#####*****/
/*****##### 채팅 상세 #####*****/
.chat_wrap .chat-view-box{
    position: relative;

    height: 100%;
}

.chat_wrap .message_wrap {
    height: calc(100% - 3.625rem);
    padding: 1.25rem 1.25rem 6rem;

    background-color: #F4F4F4;

    overflow-y: scroll;
}

.chat_wrap .message_wrap::-webkit-scrollbar {
    display: none;
}

.chat_wrap .date_divider {
    position: relative;

    padding-bottom: 2.5rem;

    font-size: 0.75rem;
    color: #999999;
}

.chat_wrap .date_divider::before {
    content: '';

    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background-color: #dddddd;
    transform: translateY(-50%);
}

.chat_wrap .date_divider>span {
    position: absolute;
    top: 50%;
    left: 50%;

    padding: 0 1.5rem;

    background-color: #f4f4f4;

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

/*****##### 버블 #####*****/
.chat_wrap .chat_bubble_wrap.template{
    display: none !important;
}

.chat_wrap .chat_bubble_wrap{
    display: block;

    padding: 0.25rem 0;
}

.chat_wrap .chat_bubble_wrap .bubble_text {
    display: inline-block;

    max-width: 20rem;
    padding: 0.625rem 1rem;

    font-size: 0.875rem;

    background-color: #ffffff;
    border-radius: 2rem;
    border: none;
}

.chat_wrap .chat_bubble_wrap .bubble_date {
    margin-top: 0.375rem;

    font-size: 0.75rem;
    color: #999999;
}

.chat_wrap .chat_bubble_wrap[data-type="image"] .bubble_text{
    padding: 0;

    border: none;
    background: none;
}

.chat_wrap .chat_bubble_wrap[data-type="image"] .thumbnail{
    max-width: 100%;

    border-radius: 8px;
}

.chat_wrap .chat_bubble_wrap[data-type="file"] .file-name{
    margin-bottom: 0.125rem;
}

/*****##### .my_chat #####*****/
.chat_wrap .chat_bubble_wrap.my_chat {
    text-align: right;
}

.chat_wrap .chat_bubble_wrap.my_chat .bubble_text {
    background-color: #3a65f3;

    color: #ffffff;
}

.chat_wrap .chat_bubble_wrap.my_chat+.chat_bubble_wrap:not(.my_chat),
.chat_wrap .chat_bubble_wrap:not(.my_chat)+.chat_bubble_wrap.my_chat {
    margin-bottom: 1rem;
}

.chat_wrap .chat_bubble_wrap.my_chat[data-type="file"] .download_btn{
    color: #ffffff;
}

/*****##### 전송 #####*****/
.chat_wrap .send-text-wrap {
    position: absolute;
    width: 100%;
    bottom: 0;

    padding: 1rem 1.25rem;

    background: #ffffff;
}

.chat_wrap .send-message-wrap{
    position: relative;

    padding: 0.5rem 0.375rem;

    background-color: #fafafa;
}

.chat_wrap .send-text {
    background-color: #fafafa;
    border-color: #fafafa;
}

.chat_wrap .send-btn {
    padding: 0 0.313rem;

    font-size: 1.25rem;
}

.chat_wrap .send-text-wrap .chat-upload-btn{
    padding: 0 0.375rem;

    font-size: 1.375rem;
    color: #555555;

    background: #fafafa;
}




.reaction-wrap .reaction-btn{
    display: flex;
    gap: 0.25rem;
    align-items: center;
}


.reaction-wrap .reaction-btn .reaction-icon .on{
    display: none;
}

.reaction-wrap .reaction-btn.active .reaction-icon .on{
    display: block;
}

.reaction-wrap .reaction-btn.active .reaction-icon .off{
    display: none;
}








.popover{
    padding: 0 10px;
    border: none;

    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.popover .popover-arrow {
    display: none !important;
}


.popover .popover-body{
    padding: 0;
}

.dango-item{
    padding: 8px 10px;
}

.dango-item:not(:first-child){
    border-top: 1px solid var(--project-color-gray-100);
}











.float-btn-wrap{
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;

    background-color: #ffffff;
}