@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  grid-auto-columns: calc((100% / 4) - 18px);
}

@media screen and (max-width: 1600px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 4) - 18px);
  }
}

@media screen and (max-width: 1200px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 18px);
  }
}

@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100%) - 18px);
  }
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
#admin-message-performer p{margin-bottom:8px;padding:8px}.fade-in-red-to-white{animation:fadeIn 3s ease-in-out}@keyframes fadeIn{0%{background-color:#ff7777}100%{background-color:#fff}}#search-comment-result__hit-num span{font-weight:bold;margin-top:12px}#heart_button{display:block;position:relative;width:50px;height:50px;cursor:pointer}#heart_button #heart_button_float_wrap{position:absolute;left:0;top:0;width:50px;height:50px}#heart_button #heart_button_float_wrap .float_heart{-webkit-tap-highlight-color:none !important;border:none !important;display:block;width:50px;height:50px;position:absolute;left:0;top:0;animation:heart_animation var(--duration_value) ease-out both;object-fit:contain}@keyframes heart_animation{0%{transform:rotate(var(--rotate_value)) translateY(0) scale(var(--scale_value));opacity:1}20%{margin-left:var(--translate_x_value)}40%{margin-left:0}60%{margin-left:calc(var(--translate_x_value) * -1)}80%{margin-left:0}100%{margin-left:var(--translate_x_value);transform:rotate(var(--rotate_value)) translateY(var(--translate_y_value)) scale(calc(var(--scale_value) * 1.3));opacity:0}}.comment-manager-container{align-items:flex-start}.comment-manager-item,.comment-manager-item-admin{margin-bottom:5px;background:rgba(128,128,128,0.4);padding-right:5px;border-radius:4px}.comment-manager-item .good_comment_icon,.comment-manager-item-admin .good_comment_icon{display:none}.comment-manager-item.is_good_comment .good_comment_icon,.comment-manager-item-admin.is_good_comment .good_comment_icon{display:block;height:2em;width:auto;float:right;margin-top:0.2em;margin-left:0.3em;margin-bottom:0.2em}.comment-manager-item.is_live_user,.comment-manager-item-admin.is_live_user{border-radius:5px}.comment-manager-item.is_live_user.is_good_comment,.comment-manager-item-admin.is_live_user.is_good_comment{background:rgba(112,221,127,0.6);width:100%}.comment-manager-item.is_live_user.is_good_comment .comment-content,.comment-manager-item-admin.is_live_user.is_good_comment .comment-content{min-height:2em}.comment-manager-item.is_user.is_good_comment,.comment-manager-item-admin.is_user.is_good_comment{background:#70dd7f}.comment-manager-item.is_user.is_good_comment .text-atlanticShoreline,.comment-manager-item-admin.is_user.is_good_comment .text-atlanticShoreline{color:#fff !important}.comment-manager-item.is_user.is_good_comment .comment-content,.comment-manager-item-admin.is_user.is_good_comment .comment-content{min-height:2em}.comment-manager-item.is_admin.is_good_comment,.comment-manager-item-admin.is_admin.is_good_comment{background:#70dd7f}.comment-manager-item.is_admin.is_good_comment .text-atlanticShoreline,.comment-manager-item-admin.is_admin.is_good_comment .text-atlanticShoreline{color:#fff !important}.comment-manager-item.is_admin.is_good_comment .comment-content,.comment-manager-item-admin.is_admin.is_good_comment .comment-content{min-height:3.5em}.live_menu_list .menu_icon{user-select:none;background:rgba(128,128,128,0.4);border-radius:50%}.live_comment_input_wrap{background:rgba(128,128,128,0.4)}.live_title_wrap{background:rgba(128,128,128,0.4)}.user_controll_area{display:flex;flex-direction:column;gap:0.25em;position:absolute;z-index:20;bottom:0;left:0;width:100%;padding:.5rem;padding-bottom:calc(env(safe-area-inset-bottom) + 1rem)}.user_controll_area #comment-user-list{height:140px !important;mask-image:linear-gradient(transparent, #000 25%, #000 95%, transparent)}.user_controll_area.playback{padding-bottom:calc(env(safe-area-inset-bottom) + 1rem + 20px)}.user_controll_area.playback .comment-manager-item{padding-right:0.25rem !important}#comment-manager-container-admin,#comment-user-list{padding-bottom:0.25rem;position:relative;z-index:9}#comment-manager-container-admin .comment_row,#comment-user-list .comment_row{padding:0.25rem}#comment-manager-container-admin .comment_row:last-child,#comment-user-list .comment_row:last-child{margin-bottom:0}#comment-manager-container-admin .comment_row .comment-manager-content .comment_row_wrap,#comment-user-list .comment_row .comment-manager-content .comment_row_wrap{vertical-align:top}#comment-manager-container-admin .comment_row .comment-manager-content .comment_row_wrap .user_name,#comment-user-list .comment_row .comment-manager-content .comment_row_wrap .user_name{vertical-align:top}#comment-manager-container-admin .comment_row .comment-manager-content .comment_row_wrap .comment_content,#comment-user-list .comment_row .comment-manager-content .comment_row_wrap .comment_content{vertical-align:top}#comment-manager-container-admin .comment_row .action-handle-comment,#comment-user-list .comment_row .action-handle-comment{padding-top:0.5em}#menu_modal_open_button{width:50px;height:50px}#menu_modal_open_button img{width:100%;height:100%;object-fit:contain}#menu_modal{display:block;z-index:999;position:absolute;bottom:-250px;left:0;width:100%;height:150px;padding:.5rem;padding-bottom:calc(env(safe-area-inset-bottom) + 1rem);opacity:0;transition:bottom 300ms ease-in-out, opacity 150ms ease-in-out}#menu_modal.active{bottom:0;opacity:1;transition:bottom 300ms ease-in-out, opacity 450ms ease-in-out}#menu_modal .modal{display:flex;flex-direction:column;gap:5px;width:100%;height:100%;border:solid 3px #646464;background:#fff;border-radius:30px;padding:5px}#menu_modal .modal .header{position:relative;display:flex;justify-content:center;align-items:center;background-image:url(/assets/live_users/background_modal_header-b060f605a9f6cd2298afa3c9a12c83ea1fae9cebadaa75ef300b0765250f8906.png);background-size:100% 100%;background-repeat:no-repeat;width:100%;height:45px;color:#fff;border-radius:25px 25px 0 0;font-size:18px;font-weight:700;flex-shrink:0}#menu_modal .modal .header #menu_modal_close_button{position:absolute;right:30px;top:50%;transform:translateY(-50%)}#menu_modal .modal .header #menu_modal_close_button img{width:15px;height:15px;object-fit:contain}#menu_modal .modal .content{display:flex;justify-content:center;align-items:center;gap:35px;flex-grow:1}#menu_modal .modal .content a{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:0.25em;font-size:12px;width:60px}#menu_modal .modal .content a img{width:35px;height:35px;object-fit:contain}#product_list{position:relative;width:100%;height:80px;--top: calc(10px / (var(--len) - 1));--left: calc(5% / (var(--len) - 1));display:none}#product_list.active{display:block}#product_list .product_list_item{display:flex;gap:10px;overflow:hidden;position:absolute;z-index:calc(10 - var(--cnt));top:calc(var(--cnt) * var(--top));left:calc(var(--cnt) * var(--left));opacity:calc(1 - var(--cnt) * 0.1);width:95%;height:70px;background:#fff;border-radius:10px;padding:10px;border:solid 1px #eee}#product_list .product_list_item:first-child:after{display:flex;justify-content:flex-end;align-items:flex-end;color:#fff;font-weight:700;position:absolute;right:0;bottom:0;width:25%;height:50%;content:"+" attr(data-len);background-image:url(/assets/live_users/product_ribbon-d72d889639bcea4f34c79aa0d53e320ebf3b54bc2833a19629d8ee449f192f0f.png);background-size:100% 100%;background-repeat:no-repeat;font-size:16px;padding-right:0.5rem;padding-bottom:0.1rem}#product_list .product_list_item .left{flex-shrink:0;height:100%;width:auto;aspect-ratio:1/1}#product_list .product_list_item .left img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;vertical-align:middle}#product_list .product_list_item .right{display:flex;justify-content:center;flex-direction:column;flex-grow:1;gap:0.2rem}#product_list .product_list_item .right .title{font-size:12px;font-weight:700;overflow:hidden;display:-webkit-box;width:100%;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2}#product_list .product_list_item .right .price{font-size:12px}#product_modal{display:block;z-index:999;position:absolute;bottom:-400px;left:0;width:100%;height:350px;padding:.5rem;padding-bottom:calc(env(safe-area-inset-bottom) + 1rem);opacity:0;transition:bottom 300ms ease-in-out, opacity 150ms ease-in-out}#product_modal.active{bottom:0;opacity:1;transition:bottom 300ms ease-in-out, opacity 450ms ease-in-out}#product_modal .modal{display:flex;flex-direction:column;gap:5px;width:100%;height:100%;border:solid 3px #646464;background:#fff;border-radius:30px;padding:10px}#product_modal .modal .header{position:relative;display:flex;justify-content:center;align-items:center;background-image:url(/assets/live_users/background_modal_header-b060f605a9f6cd2298afa3c9a12c83ea1fae9cebadaa75ef300b0765250f8906.png);background-size:100% 100%;background-repeat:no-repeat;width:100%;height:45px;color:#fff;border-radius:25px 25px 0 0;font-size:18px;font-weight:700;flex-shrink:0}#product_modal .modal .header #product_modal_close_button{position:absolute;right:30px;top:50%;transform:translateY(-50%)}#product_modal .modal .header #product_modal_close_button img{width:15px;height:15px;object-fit:contain}#product_modal .modal .content{flex-grow:1;overflow-y:scroll;overflow-x:hidden;padding-bottom:10px}#product_modal .modal .content .product-item{display:flex;gap:10px;width:100%;height:100px;padding:10px 0;border-bottom:solid 1px #c8c8c8}#product_modal .modal .content .product-item:last-child{border-bottom:none}#product_modal .modal .content .product-item .left{flex-shrink:0;height:100%;width:auto;aspect-ratio:1/1}#product_modal .modal .content .product-item .left img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;vertical-align:middle}#product_modal .modal .content .product-item .right{display:flex;justify-content:center;flex-direction:column;flex-grow:1;gap:0.5rem}#product_modal .modal .content .product-item .right .title{font-size:12px;font-weight:700;overflow:hidden;display:-webkit-box;width:100%;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.2}#product_modal .modal .content .product-item .right .price{font-size:12px}
.radio-item {
  display: inline-block;
  position: relative;
}
.radio-item input[type='radio'] {
  display: none;
}
.radio-item label:before {
  content: ' ';
  display: inline-block;
  position: relative;
  top: 8px;
  margin: 0 8px 0 0;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid #004bb1;
  background-color: transparent;
}

.radio-item input[type='radio']:checked + label:after {
  border-radius: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 14px;
  left: 6px;
  content: ' ';
  display: block;
  background: #004bb1;
}
.radio-item input[type='radio']:checked + label:before {
  border: 1px solid #cdd6dd;
}

.radio-item label.disabled-radio-item:before {
  border: 1px solid #ccc;
}

.radio-item input[type='radio']:checked + label.disabled-radio-item:after {
  background: #ccc;
}
.sidebar.zoomOut {
  width: 80px;
}
.main-content.move-left {
  margin-left: 80px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
body {
  overflow-y: auto !important;
}

html {
  touch-action: manipulation;
}

.comment-manager-container::-webkit-scrollbar {
  width: 16px;
}

.comment-manager-container::-webkit-scrollbar-thumb {
  background: #9b9b9b;
  border-radius: 9px;
}

.comment-manager-container::-webkit-scrollbar-track {
  background: #fff;
}

#comment_template_list::-webkit-scrollbar {
  width: 0;
}

#comment-manager-container-user{
    padding-top: 25px;
    position: relative;
    z-index: 99;
    word-break: break-word;
}
#comment-manager-container-user::-webkit-scrollbar {
  width: 0;
}

.participant-container {
  width: 100%;
  height: 100%;
}

.participant-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-livestream-admin-container .participant-container video {
  object-fit: contain;
}

.video-livestream-admin-container .participant-container {
  width: 100%;
  height: 100%;
}

.video-livestream-admin-container .participant-container video {
  width: 100%;
  height: 100%;
}

#heart-empty{
    width: 100%;
    height: 100%;
    background-image: url(/assets/live_users/heart_empty-d0ec57fbb865bb55e9eb0ef2bc214e5583c08cfe5716c52a075f8e116f3c5178.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.no_select{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#heart_button_float_wrap{
    position: relative;
    z-index: 1;
}


.disable_event{
    pointer-events: none !important;
}
.enable_event{
    pointer-events: auto !important;
}




.title_wrap{
    width: calc(100% - 100px);
}
.title_wrap p{
    word-break: break-all;
}


.viewer_info_wrap{
    position: absolute;
    top: 65px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.viewer_info_wrap .row{
    display: flex;
    align-items: center;
    width: 85px;
    background: #fff;
    border-radius: 20px 0 0 20px;
    padding: 0 5px 0 10px;
}
.viewer_info_wrap .row .icon{
    height: 15px;
    width: 15px;
    margin-right: 5px;
    object-fit: contain;
}
.viewer_info_wrap .row .value{
    font-size: 12px;
    color: #05b531;
}



.live_menu_list_header .menu_icon{
    user-select: none;
    background: rgba(5, 181, 49, 0.2);
    padding: 14px 10px;
    width: 45px;
    height: 45px;
}



#telop{
    position: relative;
    background-image: url(/assets/live_users/telop_bg-95a3efbf32c214a6055e2c0f8fffcb8a6b026ebe7c5f52de0de25e4e45106d92.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#telop span{
    position: relative;
    z-index: 2;
    color: #000;
}