/* mediaistream.com css Thu, 29 Jan 2026 15:47:05 -0500 */

/* modules/amAction/css/amAction.css */


#action_update {
    padding:5px;
    height:50px;
    width:98%;
}

#action_text_counter {
    position:relative;
    float:left;
    font-size:12px;
    left:146px;
    bottom:24px;
    font-style:italic;
}

#asi {
    display:none;
    vertical-align:middle;
    margin:6px 4px 0 4px;
    border:0;
}

#action_submit {
    margin-top:9px;
}

.action_warning {
    color:#900;
}

.action_exceeded {
    color:#E00;
}

.action_detail {
    padding:1em;
}

.action_item {
    font-size:16px;
    overflow:auto;
}

.action_item_media {
    vertical-align:top;
    padding:0 16px 0 12px;
    cursor:pointer;
}

.action_item_desc {
    font-size:14px;
}

.action_item_title {
    font-size:14px;
    font-weight:bold;
}

.action_item_actions {
    display:inline-block;
    color:#999;
    font-size:12px;
    text-transform:lowercase;
    margin-bottom:12px;
}

.action_item_text {
    font-size:15px;
}

.action_item_shared {
    width:100%;
    background:#F3F3F3;
    padding:12px 0 12px 0;
    margin-top:6px;
}

.action_item_user_img {
    margin:1px;
    float:left;
}

.action_item_holder {
    width:100%;
    border-bottom:1px solid #EEE;
    padding:12px 0;
}

.action_item_holder:hover {
    background:#EEE;
}

.action_item_mention {
    background:#EEE;
    padding:6px;
    border-radius:3px;
    margin-top:6px;
}

.action_item_link {
    display:inline-block;
    width:100%;
    height:100%;
    padding-right:10px;
    box-sizing:border-box;
}

.action_media_thumb {
    display:inline-block;
}

.action_item_content {
    width:100%;
    color:#000;
}

.action_item_content a:hover {
    text-decoration:underline;
}

.action_item_delete {
    position:absolute;
    top:0;
    right:0;
    display:none;
    padding-right:12px;
}

.action_item_share {
    display:inline-block;
    color:#999;
    font-size:12px;
    margin:6px 16px 0 0;
}

.action_item_share:hover {
    color:#000;
}

.action_item_comments {
    display:inline-block;
    font-style:italic;
    padding-left:3px;
    color:#777;
    font-size:12px;
}

.action_item_comments:hover {
    color:#000;
}

.hash_link {
    text-decoration:none;
}

.mention_item {
    margin:0 !important;
    padding:3px !important;
}

#timeline_text_counter {
    font-size:12px;
    font-style:italic;
    padding:1em;
    display:inline-block;
}

/* share modal */
#share_modal {
    display:none;
    height:auto;
    width:600px;
    z-index:100000;
}

#share_modal_box {
    position:relative;
    border-radius:5px;
    display:block;
    padding:15px;
}

#share_modal_box .list_buttons {
    display:none;
}

#share_modal_box .action,#share_modal_box .item {
    max-height:400px;
    overflow:auto;
}

#share_modal_box .action_item_holder:hover {
    background:inherit;
}

#share_modal_close {
    position:absolute;
    bottom:18px;
    right:18px;
}

#share_update {
    height:50px;
    margin:0 0 5px;
    padding:5px;
    width:98%;
}

#share_text_counter {
    font-size:12px;
    font-style:italic;
    display:inline-block;
}

#share_networks {
    position:relative;
    float:right;
    font-size:14px;
    right:0;
    bottom:0;
    font-style:italic;
}

#share_networks img {
    margin:0 3px;
}

#share_submit_indicator {
    display:none;
    vertical-align:middle;
    margin:9px 9px 0 3px;
    border:0;
}

#share_submit {
    margin-top:12px;
}

.share_warning {
    color:#900 !important;
}

.share_exceeded {
    color:#E00 !important;
}

.share_item {
    font-size:16px;
    overflow:auto;
}

.share_item_media {
    vertical-align:top;
    padding:0 16px 0 12px;
    cursor:pointer;
}

.share_item_title {
    font-size:13px;
    font-weight:bold;
}

.share_item_actions {
    color:#999;
    font-size:12px;
    font-style:italic;
    text-transform:lowercase;
}

.share_item_user_img {
    margin:1px;
    float:left;
}

.share_item_holder {
    width:100%;
    border-bottom:1px solid #EEE;
    padding:12px 0 12px 0;
}

.share_item_holder:hover {
    background:#EEE;
}

.share_item_holder_shared {
    width:100%;
    border-bottom:1px solid #EEE;
    background:#F3F3F3;
    padding:12px 0 12px 0;
}

.share_item_desc {
    vertical-align:top;
    font-size:14px;
}

.share_item_desc a {
    color:#000;
}

.share_item_link {
    display:inline-block;
    width:100%;
    height:100%;
    cursor:pointer;
}

.share_media_thumb {
    display:inline-block;
}

.share_item_content {
    width:100%;
    color:#000;
}

.share_item_content a:hover {
    text-decoration:underline;
}

.share_item_delete {
    position:absolute;
    top:0;
    right:0;
    display:none;
    padding-right:12px;
}

.share_item_share {
    display:inline-block;
    color:#999;
    font-size:12px;
    margin:6px 16px 0 0;
}

.share_item_action:hover {
    color:#000;
}

.share_item_comments {
    display:inline-block;
    font-style:italic;
    padding-left:3px;
    color:#777;
    font-size:12px;
}

.share_item_comments:hover {
    color:#000;
}

#quick_action_box {
    position:relative;
}

#quick_action_tab_box {
    padding:0 2px 6px 2px;
    overflow:hidden;
}

.quick_action_tab {
    margin:4px 2px;
    float:left;
    cursor:pointer;
}

#quick_action_title {
    float:right;
    margin-top:22px;
    text-transform:capitalize;
}

#share_item_box {
    padding:1px;
    max-height:400px;
    overflow:auto;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

#shared_item_status {
    position:relative;
    padding:10px 20px;
    vertical-align:middle;
}

#shared_item_status span {
    display:inline-block;
    margin-top:6px;
}

#shared_item_view_button {
    float:right;
}

#action_modal .media_panel .action_info {
    display:none;
}

#action_modal .col8 .action {
    width:100%;
}

#action_modal .action_wrap,#action_modal #comment_wrap {
    padding:0 12px;
}

#action_modal.media .action_wrap {
    padding:12px 12px 0;
}

#action_modal .action_wrap > .action {
    margin:0;
}

#action_modal .item_media.action_text.clearfix .urlscan_card {
    font-size:12px;
}

#action_modal .item_media.action_text.clearfix {
    padding:1em;
    font-size:20px;
}

#action_modal .action {
    margin:0;
    box-shadow:none;
    background:none;
    max-width:none;
}

#action_modal .block {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    min-width:0;
    padding:12px 0;
}

#action_modal.media .item_media {
    box-shadow:none;
}

#action_modal .modal_paging {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#action_modal .action_user_image {
    position:relative;
    top:-10px;
}

#action_modal.media .action_user_image {
    top:0;
}

#action_modal #comment_form_section .item {
    box-shadow:none;
    margin:0;
    border:none;
}

#action_modal.media #comment_form_section .item {
    padding:0;
}

#action_modal #comment_form_section .item.error {
    padding:10px;
}

#action_modal .comment_page_section .item {
    margin:0;
    box-shadow:none;
}

#action_modal .modal_paging .prev {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:50%;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-prev.png') left 48% no-repeat;
    opacity:0;
    transition:opacity 1s ease 0s;
    height:auto;
    width:auto;
}

#action_modal .modal_paging .next {
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    right:0;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-next.png') right 48% no-repeat;
    opacity:0;
    transition:opacity 1s ease 0s;
    height:auto;
    width:auto;
}

#action_modal #gallery_box .close {
    position:absolute;
    right:15px;
    top:15px;
    width:30px;
    height:30px;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-close.png') 0 0 no-repeat;
    z-index:20;
    cursor:pointer;
}

#action_modal .modal_paging .next:hover,#action_modal .modal_paging .prev:hover {
    opacity:1;
}

#action_modal #gallery_box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#action_modal #comment_box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100vh;
    transition:top 1s ease 0s;
    z-index:21;
}

#action_modal #comment_box.closed {
    top:100vh;
    display:block;
}

#action_modal #comment_box .comment_page_section {

}

#action_modal .comment_close {
    right:10px;
    top:10px;
    position:absolute;
    z-index:20
}

#action_modal #gallery_box .title {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    box-shadow:none !important;
}

#action_modal .title {
    box-shadow:none !important;
    font-size:14px;
    font-weight:normal;
}

#action_modal #gallery_box .title a {
    color:white;
}

#action_modal .comment_page_section .col2 {
    width:10%;
}

#action_modal .comment_page_section .col10 {
    width:90%;
}

#action_modal.media .comment_page_section .col2 {
    width:16.66%;
}

#action_modal.media .comment_page_section .col10 {
    width:83.34%;
}

#action_modal.media .comment_page_section {
    font-size:13px;
}

#action_modal.media {
    height:526px;
    width:100%;
    max-width:1000px;
}

#action_modal.media .block {
    padding:12px;
}

#action_modal .item_media {
    padding:0;
}

#action_modal {
    height:100vh;
    width:600px;
    background:white;
    position:relative;
}

#action_modal .comment_page_section {
    width:auto;
    display:block;
    max-height:none;
    background:none;
}

#action_modal #comment_wrap {

}

#action_modal #comment_form_holder {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0 12px;
}

#action_modal .media_panel {
    width:66%;
    float:left;
}

#action_modal .comment_panel {
    width:34%;
    position:absolute;
    top:12px;
    bottom:1em;
    right:0;
}

@media handheld,only screen and (max-width:767px) {
    #action_modal {
        overflow:auto;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        padding:0;
        margin:0;
        width:auto;
    }

    #action_modal .comment_page_section .col2 {
        float:left;
        width:16.66%;
    }

    #action_modal .comment_page_section .col10 {
        float:left;
        width:83.34%;
    }

    #action_modal #comment_form_section > .item {
        margin:0;
    }

    #action_modal .modal_paging .next,.modal_paging .prev {
        opacity:1;
    }

    #action_modal.media {
        height:100vh;
        width:auto;
        max-width:100%;
    }

    #action_modal #comment_box {
        background:white;
    }

    #action_modal.media .block {
        padding:0;
    }
}

#action_modal .action_info {
    min-height:60px;
    padding:0;
}

#action_modal #scroller {
    overflow:auto;
    height:calc(100vh - 146px);
    width:100%;
}

#action_modal #scroller::-webkit-scrollbar {
    display:none;
}

/* Hide scrollbar for IE and Edge */
#action_modal #scroller {
    scrollbar-width:none; /* Firefox 64 */
}

#action_modal.media #scroller {
    height:calc(100% - 121px);
}



/* modules/amAudio/css/amAudio_common.css */


/**
 * amAudio Common Styles
 * Shared styles used across multiple amAudio pages
 * Author:The Arcitech ©2026
 * 
 * This file contains common component styles to avoid duplication
 */

/* ======================
   COMMON BUTTONS
   ====================== */

/* Base button styles - used by charts,explore,and other pages */
.amaudio-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    transition:all 0.2s ease;
    cursor:pointer;
}

.amaudio-btn-primary {
    background:#2563eb;
    color:#fff;
}

.amaudio-btn-primary:hover,
.amaudio-btn-primary:focus {
    background:#1d4ed8;
    outline:none;
}

.amaudio-btn-secondary {
    background:#fff;
    color:#111827;
    border-color:#e5e7eb;
}

.amaudio-btn-secondary:hover,
.amaudio-btn-secondary:focus {
    background:#e5e7eb;
    outline:none;
}

/* ======================
   COMMON CONTAINERS
   ====================== */

/* Container styles - used by explore and fullscreen pages */
.amaudio-container {
    max-width:var(--amaudio-container-max-width,100%);
    width:100%;
    margin:0 auto;
    padding:var(--amaudio-container-padding,clamp(10px,2vw,32px)) clamp(10px,2vw,20px);
    box-sizing:border-box;
    overflow:visible;
}

/* ======================
   COMMON CARDS
   ====================== */

.amAudio-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}


/* modules/amAudio/css/amAudio.css */


/* @title Container Padding Override */
/* @help Reduce left and right padding on amAudio pages to 10px on desktop,0 on mobile */
/* Target all containers within amAudio module pages */

/* Mobile - 100% width,no padding - Override grid.css CSS variables */
@media (max-width:768px) {
    /* Override CSS variables for amAudio pages - must be on body */
    body[class*="amAudio"],
    body:has([class*="amAudio"]),
    html body[class*="amAudio"] {
        --spacing-md:0 !important;
        --spacing-sm:0 !important;
        --spacing-lg:0 !important;
        --spacing-xl:0 !important;
    }
    
    /* Override CSS variables on container elements themselves */
    body[class*="amAudio"] .container,
    body[class*="amAudio"] .row,
    body[class*="amAudio"] [class*="col"] {
        --spacing-md:0 !important;
        --spacing-sm:0 !important;
        --spacing-lg:0 !important;
        --spacing-xl:0 !important;
    }
    
    /* Override CSS variables on container elements themselves */
    body[class*="amAudio"] .container,
    body[class*="amAudio"] .row,
    body[class*="amAudio"] [class*="col"] {
        --spacing-md:0 !important;
        --spacing-sm:0 !important;
        --spacing-lg:0 !important;
        --spacing-xl:0 !important;
    }
    
    /* Page content wrapper - no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] #jrCore_page_content {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* All containers - override grid.css padding completely - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] #jrCore_page_content .container,
    body[class*="amAudio"] .container,
    body[class*="amAudio"] [class*="amAudio"] .container,
    body[class*="amAudio"] .module-amAudio .container,
    body[class*="amAudio"] #jrCore_page_content .block .container,
    body[class*="amAudio"] .block .container,
    body[class*="amAudio"] .row .container,
    body[class*="amAudio"] .amAudio-container {
        padding:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        padding-top:0 !important;
        padding-bottom:0 !important;
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Blocks - no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] #jrCore_page_content .block,
    body[class*="amAudio"] .block,
    body[class*="amAudio"] .amAudio-block {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Block content - no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] #jrCore_page_content .block_content,
    body[class*="amAudio"] .block_content,
    body[class*="amAudio"] .amAudio-block-content {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Items - no padding */
    body[class*="amAudio"] .item,
    body[class*="amAudio"] .amAudio-item {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Row - no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] .row,
    body[class*="amAudio"] #jrCore_page_content .row {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Columns - no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] .row > [class*="col"],
    body[class*="amAudio"] #jrCore_page_content .row > [class*="col"],
    body[class*="amAudio"] .col9,
    body[class*="amAudio"] .col3,
    body[class*="amAudio"] .col2,
    body[class*="amAudio"] .col5,
    body[class*="amAudio"] [class*="col"] {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Body content wrapper - no padding */
    body[class*="amAudio"] .body_3,
    body[class*="amAudio"] .body_content {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Override any inline styles with padding */
    body[class*="amAudio"] [style*="padding"] {
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    /* But preserve padding for specific elements that need it */
    body[class*="amAudio"] .more_buttons[style*="padding"],
    body[class*="amAudio"] input[style*="padding"],
    body[class*="amAudio"] button[style*="padding"] {
        padding-left:inherit !important;
        padding-right:inherit !important;
    }
}

/* Desktop/Tablet - 10px padding - SCOPED TO amAudio PAGES ONLY */
@media (min-width:769px) {
    body[class*="amAudio"] #jrCore_page_content .container,
    body[class*="amAudio"] .container,
    body[class*="amAudio"] [class*="amAudio"] .container,
    body[class*="amAudio"] .module-amAudio .container,
    body[class*="amAudio"] #jrCore_page_content .block .container,
    body[class*="amAudio"] .block .container {
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

@media (min-width:992px) {
    body[class*="amAudio"] #jrCore_page_content .container,
    body[class*="amAudio"] .container,
    body[class*="amAudio"] [class*="amAudio"] .container,
    body[class*="amAudio"] .module-amAudio .container,
    body[class*="amAudio"] #jrCore_page_content .block .container,
    body[class*="amAudio"] .block .container {
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

/* @title Audio Detail Box */
/* @help This is the box around the Audio Details that is seen on the Update Audio file form. */
.amaudio_detail {
    width:65%;
    padding:10px;
    margin:0 0 12px 3px;
    font-size:14px;
}

.amaudio_detail_left {
    width:10%;
}

/* @title Audio Details */
/* @help This is the text area that contains the information about the Audio File. */
.amaudio_detail_right {
    width:90%;
    text-align:left;
}

/* @title Audio Detail Labels */
/* @help This is the small labels that are shown in the Audio Details box */
.amaudio_title {
    width:100px;
    display:inline-block;
    text-align:right;
}

.amaudio_detail_player {
    display:table;
    width:100%;
}

.amaudio_detail_player_left {
    display:table-cell;
    width:70%;
    padding:5px;
    padding-right:18px;
    vertical-align:top;
}

.amaudio_detail_player_right {
    display:table-cell;
    width:30%;
    padding:5px;
    vertical-align:top;
}

.amaudio_list_detail {
    float:left;
    margin-left:18px;
}

/* ============================================
   MOBILE OPTIMIZATION & RESPONSIVENESS
   ============================================ */

/* Prevent horizontal scroll on all amAudio pages - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] #jrCore_page_content,
body[class*="amAudio"],
body[class*="amAudio"] [class*="amAudio"] {
    overflow-x:hidden;
    max-width:100%;
    box-sizing:border-box;
}

/* Mobile - Remove all padding from page content */
@media (max-width:768px) {
    /* Override CSS variables */
    body[class*="amAudio"] {
        --spacing-md:0 !important;
        --spacing-sm:0 !important;
        --spacing-lg:0 !important;
        --spacing-xl:0 !important;
    }
    
    body[class*="amAudio"] #jrCore_page_content,
    body[class*="amAudio"],
    body[class*="amAudio"] [class*="amAudio"] {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* Override any grid system padding - target all children - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] #jrCore_page_content > *,
    body[class*="amAudio"] > *,
    body[class*="amAudio"] #jrCore_page_content .container > *,
    body[class*="amAudio"] .container > * {
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    /* Specifically target grid.css container padding */
    body[class*="amAudio"] .container[style*="padding"],
    body[class*="amAudio"] .container {
        padding:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* Ensure containers don't overflow - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] #jrCore_page_content .container,
body[class*="amAudio"] .container,
body[class*="amAudio"] [class*="amAudio"] .container {
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
}

/* Mobile - Full width containers - SCOPED TO amAudio PAGES ONLY */
@media (max-width:768px) {
    body[class*="amAudio"] #jrCore_page_content .container,
    body[class*="amAudio"] .container,
    body[class*="amAudio"] [class*="amAudio"] .container {
        width:100% !important;
        max-width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    /* Row and columns - full width on mobile - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] .row {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    body[class*="amAudio"] .row > [class*="col"] {
        width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* Filter Controls Mobile Optimization */
.amAudio-filters-controls {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
    margin-bottom:20px;
}

@media (max-width:768px) {
    .amAudio-filters-controls {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

/* Audio Filters Row - Main container */
.amAudio-filters-row {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center;
    flex-wrap:nowrap !important;
    gap:15px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
}

.audio-filters-controls > div {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* Filter Pills Container - Left Side */
.amAudio-filters-row .amAudio-filter-pills-container {
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto !important;
    min-width:0;
    max-width:calc(100% - 500px) !important;
    box-sizing:border-box;
    width:auto !important;
    order:1;
    overflow:hidden;
}

.amAudio-filter-pills-container {
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto !important;
    min-width:0;
    box-sizing:border-box;
    max-width:none !important;
    width:auto !important;
}

/* Filter Pills - Styling moved to audio_filters.css to avoid duplication */

/* Search and View Controls Container - Top Right Corner */
.amAudio-filters-row .amAudio-search-view-container {
    display:flex !important;
    align-items:center;
    gap:12px;
    flex:0 0 auto !important;
    min-width:350px;
    max-width:450px;
    flex-wrap:nowrap !important;
    margin-left:auto !important;
    justify-content:flex-end;
    width:auto !important;
    order:999;
    flex-shrink:0;
}

.amAudio-search-view-container {
    display:flex !important;
    align-items:center;
    gap:12px;
    flex:0 0 auto !important;
    min-width:0;
    flex-wrap:nowrap;
    margin-left:auto !important;
    justify-content:flex-end;
    width:auto !important;
    max-width:none !important;
}

/* Search Wrapper - Keep on same row,align right */
.amAudio-advanced-search-wrapper {
    flex:0 1 auto;
    min-width:0;
    max-width:350px;
    box-sizing:border-box;
    width:auto;
}

.amAudio-search-toggle-container {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    box-sizing:border-box;
}

/* Reset Button - Match filter pill style,at end of filter pills container */
.amAudio-filter-pills-container .amAudio-reset-filter-link {
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.amAudio-filter-pills-container .amAudio-reset-filter-link .amAudio-more-buttons {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:#f5f5f5;
    color:#333333;
    border:1px solid #e0e0e0;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    outline:none;
    min-height:40px;
    text-decoration:none;
    white-space:nowrap;
}

.amAudio-filter-pills-container .amAudio-reset-filter-link .amAudio-more-buttons .amAudio-filter-icon {
    font-size:14px;
    flex-shrink:0;
    display:inline-block;
    color:inherit;
}

.amAudio-filter-pills-container .amAudio-reset-filter-link .amAudio-more-buttons .amAudio-filter-label {
    display:inline-block;
    flex-shrink:0;
}

.amAudio-filter-pills-container .amAudio-reset-filter-link:hover .amAudio-more-buttons {
    background:#e8e8e8;
    border-color:#d0d0d0;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Advanced Search Toggle Button - Match filter pill style */
.amAudio-advanced-search-toggle.amAudio-more-buttons {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:#f5f5f5;
    color:#333333;
    border:1px solid #e0e0e0;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    outline:none;
    min-height:40px;
    text-decoration:none;
    white-space:nowrap;
}

.amAudio-advanced-search-toggle.amAudio-more-buttons:hover {
    background:#e8e8e8;
    border-color:#d0d0d0;
    transform:translateY(-1px);
}

/* Merged Search Wrapper - Search field with attached advanced button */
.amAudio-merged-search-wrapper {
    display:inline-flex;
    align-items:stretch;
    position:relative;
    flex:1 1 auto;
    min-width:250px;
    max-width:350px;
    max-width:600px;
    gap:0;
    margin:0 auto;
}

/* Quick Search Form Input - Match filter pill style,attached to advanced button */
.amAudio-quick-search-form {
    display:inline-flex;
    align-items:stretch;
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding:0;
}

.amAudio-quick-search-form input[type="text"],
.amAudio-quick-search-form .form_text {
    background:#333 linear-gradient(#444,#222);
    border:none;
    border-radius:10px 0 0 10px;
    color:white;
    font-size:12px;
    padding:3px 16px 5px 16px;
    height:auto;
    font-weight:500;
    box-sizing:border-box;
    min-width:350px;
    flex:1 1 auto;
    margin:3px 0 3px 3px;
    width:100%;
    border-right:none;
    outline:none;
    transition:all 0.3s ease;
    align-self:stretch;
}

.amAudio-quick-search-form input[type="text"]:focus,
.amAudio-quick-search-form .form_text:focus {
    background:#444 linear-gradient(#555,#333);
    box-shadow:0 0 0 2px rgba(255,255,255,0.2);
}

.amAudio-quick-search-form input[type="text"]::placeholder,
.amAudio-quick-search-form .form_text::placeholder {
    color:rgba(255,255,255,0.7);
    text-transform:capitalize;
}

.amAudio-quick-search-form input[type="text"]:focus,
.amAudio-quick-search-form .form_text:focus {
    background:#444 linear-gradient(#555,#333);
    outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,0.2);
}

/* Advanced Search Button - Attached to right of search field,no gap */
.amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons {
    background:#333 linear-gradient(#444,#222);
    border:none;
    border-left:1px solid rgba(255,255,255,0.1);
    border-radius:0 10px 10px 0;
    margin:3px 3px 3px 0;
    padding:3px 12px 5px 12px;
    height:auto;
    min-height:100%;
    cursor:pointer;
    color:white;
    font-size:12px;
    font-weight:bold;
    text-transform:capitalize;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-shrink:0;
    white-space:nowrap;
    transition:all 0.3s ease;
    vertical-align:middle;
    margin-left:0;
    align-self:stretch;
    line-height:1;
}

.amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons:hover {
    background:#444 linear-gradient(#555,#333);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons:hover {
    background:#444 linear-gradient(#555,#333);
    transform:translateY(-1px);
}

.amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons svg {
    width:14px;
    height:14px;
    flex-shrink:0;
    margin:0;
}

/* View Toggle Container - Keep on same row,align right */
.amAudio-view-toggle-container {
    flex:0 0 auto !important;
    margin-left:0 !important;
    display:flex;
    gap:5px;
    align-items:center;
    box-sizing:border-box;
    width:auto;
}

/* View Toggle Buttons - Styling moved to audio_filters.css to match filter pills */

/* Desktop/Tablet - Keep everything on same row,center search */
/* Desktop - Keep filters and search on same row */
@media (min-width:769px) {
    .amAudio-filters-row {
        flex-wrap:nowrap !important;
        flex-direction:row !important;
    }
    
    .amAudio-filters-row .amAudio-filter-pills-container {
        max-width:calc(100% - 450px) !important;
        flex:1 1 auto !important;
    }
    
    .amAudio-filters-row .amAudio-search-view-container {
        min-width:350px !important;
        max-width:450px !important;
        flex:0 0 auto !important;
        margin-left:auto !important;
    }
    
    .audio-filters-row {
        display:flex !important;
        justify-content:space-between;
        align-items:center;
        flex-wrap:nowrap !important;
        flex-direction:row !important;
        gap:15px;
    }
    
    .amAudio-filter-pills-container {
        flex:0 1 auto;
        min-width:0;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        align-items:center;
    }
    
    .amAudio-advanced-search-wrapper {
        flex:1 1 auto;
        min-width:0;
        max-width:none;
        margin-left:0;
        margin-right:0;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .amAudio-search-toggle-container {
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .amAudio-merged-search-wrapper {
        margin:0 auto;
    }
    
    .amAudio-view-toggle-container {
        flex:0 0 auto;
        margin-left:auto;
        display:flex;
        gap:5px;
        align-items:center;
    }
}

/* Hero Section Mobile */
.amaudio-hero-section {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:8px 10px !important;
}

@media (max-width:768px) {
    .amaudio-hero-section {
        padding:16px 0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

.amaudio-hero-actions {
    flex-wrap:wrap;
    gap:8px;
}

/* Hero Section - Reduced padding */
.amaudio-hero-section {
    padding-top:8px !important;
    padding-bottom:8px !important;
}

@media (max-width:768px) {
    .amaudio-hero-section {
        padding-top:6px !important;
        padding-bottom:6px !important;
    }
}

/* Navigation Menu - Prevent Horizontal Scroll */
.amaudio-nav-container {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
    padding:0 10px !important;
}

@media (max-width:768px) {
    .amaudio-nav-container {
        padding:0 !important;
    }
}

.amaudio-nav-menu {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    flex-wrap:wrap;
    overflow-x:hidden;
}

/* Active Filters Row */
.amAudio-active-filters-row {
    margin:15px 0;
    padding:10px;
    background:#f8f9fa;
    border-radius:5px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

/* Active filter tags */
.active-filter-tag {
    display:inline-block;
    padding:5px 10px;
    border-radius:3px;
    text-decoration:none;
    margin:5px;
    color:white;
    font-size:13px;
}

.active-filter-tag[href*="genre"] {
    background:#007bff;
}

.active-filter-tag[href*="mood"] {
    background:#28a745;
}

.active-filter-tag[href*="style"] {
    background:#ffc107;
    color:#333;
}

.active-filter-tag[href*="type"] {
    background:#dc3545;
}

.active-filter-tag[href*="key"] {
    background:#6c757d;
}

.active-filter-tag:hover {
    opacity:0.9;
    text-decoration:none;
}

.active-filters-row::-webkit-scrollbar {
    height:4px;
}

.active-filters-row::-webkit-scrollbar-track {
    background:#f1f1f1;
}

.active-filters-row::-webkit-scrollbar-thumb {
    background:#888;
    border-radius:2px;
}

/* Filter Options Container */
/* NOTE:All filter-related selectors are defined in audio_filters.css to avoid duplication */
/* Filter container styles are in audio_filters.css */

/* Filter Option Pills Styling */
.amAudio-filter-option-pill,
.amAudio-sort-option-pill {
    display:inline-block;
    margin-right:10px;
    margin-bottom:5px;
    padding:8px 16px;
    background:#333 linear-gradient(#444,#222);
    color:white;
    border-radius:20px;
    font-size:12px;
    font-weight:500;
    text-decoration:none;
    transition:all 0.2s ease;
    cursor:pointer;
}

.amAudio-filter-option-pill:hover,
.amAudio-sort-option-pill:hover {
    background:#444 linear-gradient(#555,#333);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.amAudio-filter-option-pill a,
.amAudio-filter-option-pill-link,
.amAudio-sort-option-pill a {
    text-decoration:none;
    color:inherit;
    display:inline-block;
}

.amAudio-filter-option-pill-link .amAudio-filter-option-pill,
.amAudio-sort-option-pill a .amAudio-sort-option-pill {
    margin:0;
}

/* Advanced Search Panel - Moved to audio_filters.css to avoid duplication */
/* All .amAudio-advanced-search-panel and .amAudio-advanced-search-form styles are in audio_filters.css */

/* .amAudio-advanced-search-panel h3 removed - defined in audio_filters.css */

.amAudio-advanced-search-form .amAudio-search-field-group label {
    display:block;
    color:#333333 !important;
    font-weight:500 !important;
    margin-bottom:5px !important;
}

.amAudio-advanced-search-form .amAudio-search-field-group .form_text {
    width:100%;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
}

.amAudio-advanced-search-form input[type="text"],
.amAudio-advanced-search-form .form_text {
    background:#ffffff !important;
    border:1px solid #ddd !important;
    border-radius:8px !important;
    color:#333333 !important;
    padding:10px 14px !important;
    font-size:14px !important;
    transition:all 0.3s ease !important;
    width:100% !important;
    box-sizing:border-box !important;
}

.amAudio-advanced-search-form input[type="text"]:focus,
.amAudio-advanced-search-form .form_text:focus {
    background:#ffffff !important;
    border-color:#0b3c5d !important;
    outline:none !important;
    box-shadow:0 0 0 3px rgba(11,60,93,0.1) !important;
}

.amAudio-advanced-search-form input[type="text"]::placeholder,
.amAudio-advanced-search-form .form_text::placeholder {
    color:#999999 !important;
}

.amAudio-advanced-search-form .form_button {
    padding:10px 24px !important;
    border-radius:8px !important;
    font-weight:600 !important;
    transition:all 0.3s ease !important;
    cursor:pointer !important;
}

.amAudio-advanced-search-form .form_button.submit {
    background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%) !important;
    border:none !important;
    color:white !important;
}

.amAudio-advanced-search-form .form_button.submit:hover {
    background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%) !important;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(37,99,235,0.4);
}

.amAudio-advanced-search-form .form_button.cancel {
    background:#ffffff !important;
    border:1px solid #ddd !important;
    color:#333333 !important;
}

.amAudio-advanced-search-form .form_button.cancel:hover {
    background:#f5f5f5 !important;
    border-color:#bbb !important;
}

.amAudio-advanced-search-actions {
    margin-top:20px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    padding-top:20px;
    border-top:1px solid #e0e0e0;
}

.amAudio-search-icon {
    vertical-align:middle;
    margin-right:6px;
}

@media (max-width:768px) {
    .amAudio-advanced-search-actions {
        flex-direction:column;
    }
    
    .amAudio-advanced-search-actions .form_button {
        width:100%;
        justify-content:center;
    }
}

.amAudio-advanced-search-form {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.amAudio-advanced-search-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
    margin-bottom:20px;
}

@media (max-width:768px) {
    .amAudio-advanced-search-grid {
        grid-template-columns:1fr !important;
        gap:12px;
    }
}

/* Results Container - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .body_3 {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
}

@media (max-width:768px) {
    body[class*="amAudio"] .body_3 {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

/* Row and Column Mobile Optimization - Scoped to amAudio */
body[class*="amAudio"] .row.amAudio-row,
body[class*="amAudio"] .amAudio-container .row {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:0;
    margin-right:0;
}

/* Note:This rule is already scoped by body[class*="amAudio"] selectors above */
body[class*="amAudio"] .row.amAudio-row > [class*="col"],
body[class*="amAudio"] .amAudio-container .row > [class*="col"] {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:0;
    padding-right:0;
}

/* Mobile Breakpoint - Move search/view below filters */
@media (max-width:768px) {
    /* Filter Pills - Icon Only on Mobile */
    .amAudio-sort-pill-trigger,
    .amAudio-filter-pill-trigger {
        padding:10px 12px;
        min-width:44px;
        justify-content:center;
    }
    
    /* Hide labels and arrows on mobile,show only icons */
    .amAudio-sort-pill-trigger .amAudio-filter-label,
    .amAudio-filter-pill-trigger .amAudio-filter-label,
    .amAudio-sort-pill-trigger .amAudio-filter-arrow,
    .amAudio-filter-pill-trigger .amAudio-filter-arrow {
        display:none !important;
    }
    
    /* Show only icons on mobile */
    .amAudio-sort-pill-trigger .amAudio-filter-icon,
    .amAudio-filter-pill-trigger .amAudio-filter-icon {
        display:inline-block !important;
        font-size:16px;
        margin:0;
    }
    
    /* Move search and view toggle below filters on mobile ONLY */
    .amAudio-filters-row {
        flex-direction:column !important;
        align-items:stretch;
        gap:12px;
        flex-wrap:wrap !important;
    }
    
    .amAudio-filters-row .amAudio-filter-pills-container {
        max-width:100% !important;
    }
    
    .amAudio-filters-row .amAudio-search-view-container {
        min-width:100% !important;
        margin-left:0 !important;
    }
    
    /* Filter pills container - full width on top,includes Reset at end */
    .amAudio-filter-pills-container {
        width:100%;
        flex:1 1 100%;
        margin-bottom:0;
    }
    
    /* Reset button shows icon only on mobile */
    .amAudio-filter-pills-container .amAudio-reset-filter-link .amAudio-more-buttons .amAudio-filter-label {
        display:none !important;
    }
    
    .amAudio-filter-pills-container .amAudio-reset-filter-link .amAudio-more-buttons .amAudio-filter-icon {
        display:inline-block !important;
        font-size:16px;
        margin:0;
    }
    
    /* Search and view toggle wrapper - below filters on mobile */
    .amAudio-advanced-search-wrapper {
        width:100%;
        flex:1 1 100%;
        margin-left:0 !important;
        min-width:0;
        max-width:100%;
    }
    
    .amAudio-view-toggle-container {
        width:100%;
        flex:1 1 100%;
        margin-left:0 !important;
        justify-content:flex-end;
    }
    
    /* Search wrapper - full width on mobile */
    .amAudio-advanced-search-wrapper {
        min-width:0;
        max-width:100%;
    }
    
    /* Search toggle container - full width,justify right */
    .amAudio-search-toggle-container {
        flex-wrap:wrap;
        gap:8px;
        justify-content:flex-end;
        width:100%;
    }
    
    /* Merged search wrapper - full width on mobile,responsive */
    .amAudio-merged-search-wrapper {
        width:100%;
        min-width:0;
        max-width:100%;
        gap:0;
        margin:0;
    }
    
    /* Quick search form - flexible width,maintain style */
    .amAudio-quick-search-form {
        flex:1 1 auto;
        min-width:0;
        max-width:100%;
    }
    
    .amAudio-quick-search-form input[type="text"],
    .amAudio-quick-search-form .form_text {
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        min-width:0;
        padding:3px 12px 5px 12px;
        font-size:12px;
        border-radius:10px 0 0 10px;
        border-right:none;
        margin-right:0;
    }
    
    /* Advanced Search Button - attached,compact on mobile,no gap */
    .amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons {
        flex-shrink:0;
        padding:3px 6px 5px 6px;
        font-size:12px;
        border-radius:0 10px 10px 0;
        border-left:none;
        margin-left:0;
    }
    
    .amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons svg {
        width:12px;
        height:12px;
    }
    
    .amAudio-merged-search-wrapper .amAudio-advanced-search-toggle.amAudio-more-buttons .amAudio-advanced-btn-text {
        display:none;
    }
    
    /* View Toggle Container - full width,align right */
    .amAudio-view-toggle-container {
        width:100%;
        justify-content:flex-end;
        gap:4px;
        margin-top:0;
    }
    
    /* View Toggle Buttons - Icon Only on Mobile,maintain style */
    .amAudio-view-toggle-btn .amAudio-view-toggle-label {
        display:none !important;
    }
    
    .amAudio-view-toggle-btn {
        min-width:44px;
        padding:3px 6px 5px 6px;
        justify-content:center;
    }
    
    .amAudio-view-toggle-btn svg {
        width:16px;
        height:16px;
    }
    
    /* Hero Section */
    .amaudio-hero-title {
        font-size:24px !important;
    }
    
    .amaudio-hero-subtitle {
        font-size:14px !important;
    }
    
    .amaudio-hero-actions {
        flex-direction:column;
        width:100%;
    }
    
    .amaudio-btn {
        width:100%;
        justify-content:center;
    }
    
    /* Navigation Menu */
    .amaudio-nav-link span {
        display:none;
    }
    
    .amaudio-nav-icon {
        margin:0;
    }
    
    .amaudio-nav-link {
        padding:10px 14px;
        justify-content:center;
    }
}

/* Small Mobile (480px and below) - SCOPED TO amAudio PAGES ONLY */
@media (max-width:480px) {
    /* Even tighter spacing - SCOPED */
    body[class*="amAudio"] .filter-pills-container,
    body[class*="amAudio"] .audio-filters-controls > div > div:first-child {
        gap:6px;
    }
    
    body[class*="amAudio"] .sort_pill_trigger,
    body[class*="amAudio"] .filter_pill_trigger {
        padding:8px 10px;
        min-width:40px;
        font-size:12px;
    }
    
    body[class*="amAudio"] .sort_pill_trigger .filter-icon,
    body[class*="amAudio"] .filter_pill_trigger .filter-icon {
        font-size:14px;
    }
    
    /* Search wrapper - smaller on very small screens - SCOPED */
    body[class*="amAudio"] .advanced-search-wrapper {
        min-width:150px;
        flex:1 1 auto;
    }
    
    body[class*="amAudio"] .quick-search-form {
        min-width:100px;
    }
    
    body[class*="amAudio"] .quick-search-form input {
        min-width:100px;
        font-size:14px;
        padding:6px 10px;
    }
    
    /* Advanced Search Button - smaller,maintain style - SCOPED */
    body[class*="amAudio"] .advanced-search-toggle.more_buttons {
        padding:3px 5px 5px 5px;
        font-size:11px;
    }
    
    body[class*="amAudio"] .advanced-search-toggle.more_buttons svg {
        width:11px;
        height:11px;
        margin-right:3px;
    }
    
    /* View toggle - smaller,maintain style - SCOPED */
    body[class*="amAudio"] .view-toggle-btn {
        min-width:40px;
        padding:3px 5px 5px 5px;
    }
    
    body[class*="amAudio"] .view-toggle-btn svg {
        width:14px;
        height:14px;
    }
    
    /* Quick search input - smaller on very small screens - SCOPED */
    body[class*="amAudio"] .quick-search-form input[type="text"],
    body[class*="amAudio"] .quick-search-form .form_text {
        padding:3px 10px 5px 10px;
        font-size:11px;
        min-width:0;
        border-radius:10px 0 0 10px;
        border-right:none;
        margin-right:0;
    }
    
    /* Advanced Search Button - smaller,attached style,no gap - SCOPED */
    body[class*="amAudio"] .merged-search-wrapper .advanced-search-toggle.more_buttons {
        padding:3px 5px 5px 5px;
        font-size:11px;
        border-radius:0 10px 10px 0;
        border-left:none;
        margin-left:0;
    }
    
    body[class*="amAudio"] .merged-search-wrapper .advanced-search-toggle.more_buttons svg {
        width:11px;
        height:11px;
    }
    
    body[class*="amAudio"] .merged-search-wrapper .advanced-search-toggle.more_buttons .advanced-btn-text {
        display:none;
    }
    
    /* Hero Section - SCOPED */
    body[class*="amAudio"] .amaudio-hero-section {
        padding:6px 0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    body[class*="amAudio"] .amaudio-hero-title {
        font-size:20px !important;
    }
    
    body[class*="amAudio"] .amaudio-hero-subtitle {
        margin-bottom:0 !important;
    }
    
    /* Advanced Search Panel - SCOPED */
    body[class*="amAudio"] .advanced-search-panel {
        padding:12px 0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    
    /* All containers full width,no padding - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] .container,
    body[class*="amAudio"] .row,
    body[class*="amAudio"] .block,
    body[class*="amAudio"] .block_content {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

@media handheld,only screen and (max-width:767px) {

    .amaudio_detail_player {
        display:inline;
    }

    .amaudio_detail_player_left {
        display:inline;
        width:100%;
    }

    .amaudio_detail_player_right {
        display:inline;
        width:100%;
    }

    .amaudio_detail_player_right img {
        margin-top:12px;
        width:90%;
    }

    .amaudio_list_detail {
        margin-left:0;
        margin-top:12px;
    }
}


/* modules/amAudio/css/amAudio_navigation.css */


/*
amAudio Navigation CSS
Tab-style navigation matching amBattles module design
Author:The Arcitech ©2025
*/

/* CSS Variables for theming */
:root {
    --amaudio-primary:#dc3545;
    --amaudio-primary-dark:#c82333;
    --amaudio-bg-secondary:rgba(255,255,255,0.05);
    --amaudio-bg-tertiary:rgba(255,255,255,0.1);
    --amaudio-border:rgba(255,255,255,0.1);
    --amaudio-text-primary:rgba(255,255,255,0.95);
    --amaudio-text-secondary:rgba(255,255,255,0.7);
    --amaudio-text-inverse:#ffffff;
}

/* Main Navigation Container */
.amaudio-page-nav {
    margin:0 0 1.25rem 0;
    position:relative;
    z-index:100;
    clear:both;
    width:100%;
    float:none !important;
    display:block !important;
}

/* Navigation Container - matches page container padding */
.amaudio-nav-container {
    max-width:1200px;
    margin:0 auto;
    /* Desktop:10px padding to match page containers */
    padding:0 10px;
}

/* Navigation Tabs Container */
.amaudio-nav-tabs {
    display:flex;
    gap:0.35rem;
    align-items:center;
    padding:0.35rem;
    background:var(--amaudio-bg-secondary);
    border:1px solid var(--amaudio-border);
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    list-style:none;
    margin:0;
    padding-left:0.35rem;
    padding-right:0.35rem;
    justify-content:flex-start; /* Align active tab to left */
}



.amaudio-page-nav-v2 .amaudio-navtabs {
    display:flex;
    gap:0.35rem;
    align-items:center;
    padding:0.35rem;
    background:var(--amaudio-bg-secondary);
    border:1px solid var(--amaudio-border);
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    list-style:none;
    margin:0;
    padding-left:0.35rem;
    padding-right:0.35rem;
    justify-content:flex-start;
}

.amaudio-page-nav-v2 .amaudio-navtabs::-webkit-scrollbar {
    display:none;
}

/* Navigation Tab Links */
.amaudio-nav-tab {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 0.9rem;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--amaudio-text-secondary);
    text-decoration:none;
    white-space:nowrap;
    font-weight:600;
    font-size:0.9rem;
    transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
    position:relative;
    float:none !important;
    text-shadow:none !important;
}

.amaudio-page-nav-v2 .amaudio-navtab {
    display:inline-flex !important;
}

.amaudio-nav-tab:hover {
    background:var(--amaudio-bg-tertiary);
    color:var(--amaudio-text-primary);
}

.amaudio-nav-tab:active {
    transform:translateY(0);
}

.amaudio-nav-tab:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(220,53,69,0.20);
}

.amaudio-nav-tab.active,
.amaudio-nav-tab[aria-current="page"] {
    background:var(--amaudio-primary);
    color:var(--amaudio-text-inverse);
    border-color:var(--amaudio-primary);
    box-shadow:0 6px 16px rgba(220,53,69,0.18);
}

.amaudio-nav-tab.active:hover,
.amaudio-nav-tab[aria-current="page"]:hover {
    background:var(--amaudio-primary-dark);
    border-color:var(--amaudio-primary-dark);
}

/* Navigation Tab Icons */
.amaudio-nav-tab-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.9;
}

.amaudio-nav-tab-icon svg {
    width:16px;
    height:16px;
}

.amaudio-nav-tab.active .amaudio-nav-tab-icon,
.amaudio-nav-tab[aria-current="page"] .amaudio-nav-tab-icon {
    opacity:1;
}

/* Legacy support for old class names */
.amaudio-nav-menu {
    display:flex;
    align-items:center;
    gap:0.35rem;
    flex-wrap:wrap;
    padding:0.35rem;
    margin:0;
    list-style:none;
    background:var(--amaudio-bg-secondary);
    border:1px solid var(--amaudio-border);
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    float:none !important;
}

.amaudio-nav-menu::-webkit-scrollbar {
    display:none;
}

.amaudio-nav-item {
    position:relative;
    float:none !important;
}

.amaudio-nav-link {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 0.9rem;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--amaudio-text-secondary);
    text-decoration:none;
    white-space:nowrap;
    font-weight:600;
    font-size:0.9rem;
    transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
    position:relative;
    float:none !important;
    text-shadow:none !important;
}

.amaudio-page-nav-v2 .amaudio-navlink {
    display:inline-flex !important;
}

.amaudio-nav-link:hover {
    background:var(--amaudio-bg-tertiary);
    color:var(--amaudio-text-primary);
}

.amaudio-nav-link.active {
    background:var(--amaudio-primary);
    color:var(--amaudio-text-inverse);
    border-color:var(--amaudio-primary);
    box-shadow:0 6px 16px rgba(220,53,69,0.18);
}

.amaudio-nav-link.active:hover {
    background:var(--amaudio-primary-dark);
    border-color:var(--amaudio-primary-dark);
}

.amaudio-nav-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.9;
    font-size:16px;
}

.amaudio-nav-link.active .amaudio-nav-icon {
    opacity:1;
}

/* Mobile Responsive - matches page container (0 padding) */
@media (max-width:768px) {
    .amaudio-nav-container {
        /* Mobile:0 padding to match page containers */
        padding:0;
    }
    
    .amaudio-nav-tab {
        padding:0.55rem 0.8rem;
        font-size:0.85rem;
    }
    
    .amaudio-nav-link {
        padding:0.55rem 0.8rem;
        font-size:0.85rem;
    }
    
    .amaudio-nav-link span {
        display:none;
    }
    
    .amaudio-nav-tab span:not(.amaudio-nav-tab-icon) {
        display:none;
    }
}

/* Desktop/Tablet - ensure 10px padding matches page containers */
@media (min-width:769px) {
    .amaudio-nav-container {
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

@media (min-width:992px) {
    .amaudio-nav-container {
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

/* V2 Navigation Overrides - Merged from amAudio_navigation_v2.css */
/* Ensure nav is not hidden by older/cached rules */
.amaudio-page-nav-v2 {
    display:block !important;
    width:100%;
}

/* Ensure tabs container renders */
.amaudio-page-nav-v2 .amaudio-navtabs {
    display:flex !important;
    align-items:center;
    gap:0.35rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* Ensure every tab is visible (wins against any legacy "display:none") */
.amaudio-page-nav-v2 .amaudio-navtab,
.amaudio-page-nav-v2 .amaudio-nav-tab {
    display:inline-flex !important;
}

/* Prevent conflicts with main site menu */
/*
 * IMPORTANT:
 * Never target or reset the skin's main menu or dropdown selectors here.
 * Global rules against #menu / #menu-wrap / #menu_content can break MIS dropdowns and hide items.
 * Keep amAudio navigation styles scoped to amAudio classes only.
 */


/* modules/amAudio/css/fullscreen_responsive.css */




/* modules/amAudio/css/compact_list.css */


/**
 * Compact List View CSS for amAudio
 * Author:The Arcitech 2026
 * Purpose:Space-efficient,modern compact list design for search results
 */

/* ======================
   COMPACT LIST CONTAINER
   ====================== */

.music-compact-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0;
    margin:0;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

/* Ensure compact list takes full width even in constrained containers */
body[class*="amAudio"] .music-compact-list,
body[class*="amAudio"] .container .music-compact-list,
body[class*="amAudio"] .block .music-compact-list,
body[class*="amAudio"] .row .music-compact-list,
body[class*="amAudio"] [class*="col"] .music-compact-list,
body[class*="amAudio"] .col9 .music-compact-list,
body[class*="amAudio"] .col3 .music-compact-list {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Ensure full width within parent column */
body[class*="amAudio"] .col9 .music-compact-list,
body[class*="amAudio"] .col3 .music-compact-list {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Override any column padding that might constrain width */
body[class*="amAudio"] .col9,
body[class*="amAudio"] .col3 {
    padding-left:0 !important;
    padding-right:0 !important;
}

body[class*="amAudio"] .col9 > *:not(.music-compact-list):not(.amAudio_grid_container):not(.music-results-grid),
body[class*="amAudio"] .col3 > *:not(.music-compact-list):not(.amAudio_grid_container):not(.music-results-grid) {
    padding-left:20px !important;
    padding-right:20px !important;
}

.music-compact-list-mini {
    gap:6px;
}

/* ======================
   COMPACT TRACK ROW
   ====================== */

.music-compact-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:8px;
    transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden;
    min-height:60px;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

.music-compact-row-mini {
    padding:6px 10px;
    min-height:48px;
}

.music-compact-row::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,#1a1a1a,rgba(26,26,26,0));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.2s ease;
}

.music-compact-row:hover {
    background:rgba(255,255,255,1);
    border-color:rgba(0,0,0,0.12);
    transform:translateX(2px);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.music-compact-row:hover::before {
    transform:scaleX(1);
}

/* ======================
   COMPACT ARTWORK
   ====================== */

.compact-artwork {
    position:relative;
    width:56px;
    height:56px;
    min-width:56px;
    flex-shrink:0;
    border-radius:6px;
    overflow:hidden;
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
    cursor:pointer;
}

.compact-artwork-mini {
    width:44px;
    height:44px;
    min-width:44px;
}

.compact-artwork-image {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.2s ease;
}

.compact-artwork:hover .compact-artwork-image {
    transform:scale(1.1);
}

.compact-artwork-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s ease;
}

.compact-artwork:hover .compact-artwork-overlay {
    opacity:1;
}

.compact-play-btn {
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    padding-left:2px;
}

.compact-play-btn:hover {
    background:#fff;
    transform:scale(1.1);
}

.compact-play-btn svg {
    width:14px;
    height:14px;
    color:#1a1a1a;
}

/* ======================
   COMPACT TRACK INFO
   ====================== */

.compact-track-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.compact-track-title {
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    margin:0;
    color:#1a1a1a;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.compact-track-title a {
    color:#1a1a1a;
    text-decoration:none;
    transition:color 0.2s ease;
}

.compact-track-title a:hover {
    color:#404040;
}

.compact-track-meta {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#666;
    flex-wrap:wrap;
}

.compact-track-artist {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px;
}

.compact-track-artist a {
    color:#666;
    text-decoration:none;
    transition:color 0.2s ease;
}

.compact-track-artist a:hover {
    color:#1a1a1a;
}

.compact-meta-separator {
    color:rgba(0,0,0,0.2);
    font-weight:300;
}

.compact-track-tags {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.compact-tag {
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:2px 6px;
    background:rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:4px;
    font-size:10px;
    color:#666;
    text-decoration:none;
    transition:all 0.15s ease;
    white-space:nowrap;
}

.compact-tag svg {
    width:10px;
    height:10px;
    flex-shrink:0;
}

.compact-tag:hover {
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.12);
    color:#1a1a1a;
}

/* ======================
   COMPACT DURATION
   ====================== */

.compact-duration {
    font-size:12px;
    color:#999;
    font-weight:500;
    min-width:45px;
    text-align:right;
    flex-shrink:0;
}

/* ======================
   COMPACT ACTIONS
   ====================== */

.compact-actions {
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    margin-left:8px;
}

.compact-action-btn {
    width:32px;
    height:32px;
    border-radius:6px;
    background:rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.15s ease;
    color:#666;
}

.compact-action-btn svg {
    width:16px;
    height:16px;
    color:currentColor;
}

.compact-action-btn:hover {
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.12);
    color:#1a1a1a;
    transform:translateY(-1px);
}

.compact-action-btn:active {
    transform:translateY(0);
}

/* Queue Button */
.compact-action-btn.compact-queue-btn:hover {
    background:rgba(26,26,26,0.9);
    border-color:#1a1a1a;
    color:#fff;
}

/* Playlist Button */
.compact-action-btn.compact-playlist-btn:hover {
    background:rgba(26,26,26,0.9);
    border-color:#1a1a1a;
    color:#fff;
}

/* Cart Button - Special styling */
.compact-action-btn.compact-cart-btn {
    min-width:48px;
    width:auto;
    padding:0 8px;
    background:rgba(26,26,26,0.9);
    border-color:#1a1a1a;
    color:#fff;
    font-weight:600;
    font-size:11px;
    gap:4px;
}

.compact-action-btn.compact-cart-btn:hover {
    background:#000;
    border-color:#000;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* Download Button */
.compact-action-btn.compact-download-btn {
    background:rgba(26,26,26,0.9);
    border-color:#1a1a1a;
    color:#fff;
}

.compact-action-btn.compact-download-btn:hover {
    background:#000;
    border-color:#000;
}

/* Like Button */
.compact-action-btn.compact-like-btn.liked {
    background:rgba(220,53,69,0.1);
    border-color:rgba(220,53,69,0.3);
    color:#dc3545;
}

.compact-action-btn.compact-like-btn.liked:hover {
    background:rgba(220,53,69,0.15);
    border-color:rgba(220,53,69,0.4);
}

/* ======================
   COMPACT STATS
   ====================== */

.compact-stats {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:8px;
    padding-left:8px;
    border-left:1px solid rgba(0,0,0,0.06);
    flex-shrink:0;
}

.compact-stat {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    color:#999;
    white-space:nowrap;
}

.compact-stat svg {
    width:12px;
    height:12px;
    opacity:0.6;
    flex-shrink:0;
}

.compact-stat:hover {
    color:#666;
}

/* ======================
   COMPACT EMPTY STATE
   ====================== */

.compact-empty-state {
    text-align:center;
    padding:40px 20px;
    color:#999;
}

.compact-empty-icon {
    width:64px;
    height:64px;
    margin:0 auto 16px;
    opacity:0.3;
}

.compact-empty-title {
    font-size:16px;
    font-weight:600;
    color:#666;
    margin:0 0 8px 0;
}

.compact-empty-message {
    font-size:13px;
    color:#999;
    margin:0;
}

/* ======================
   ROW NUMBER
   ====================== */

.compact-row-number {
    width:28px;
    min-width:28px;
    text-align:center;
    font-size:13px;
    font-weight:600;
    color:#ccc;
    flex-shrink:0;
}

.music-compact-row:hover .compact-row-number {
    color:#1a1a1a;
}

/* ======================
   LOADING STATE
   ====================== */

.compact-row-loading {
    opacity:0.5;
    pointer-events:none;
}

.compact-loading-spinner {
    width:16px;
    height:16px;
    border:2px solid rgba(0,0,0,0.1);
    border-top-color:#1a1a1a;
    border-radius:50%;
    animation:compact-spin 0.6s linear infinite;
}

@keyframes compact-spin {
    to { transform:rotate(360deg); }
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width:1024px) {
    .compact-stats {
        display:none;
    }
    
    .compact-track-meta {
        flex-wrap:nowrap;
    }
    
    .compact-track-tags {
        display:none;
    }
}

@media (max-width:768px) {
    .music-compact-row {
        gap:10px;
        padding:6px 10px;
    }
    
    .compact-artwork {
        width:48px;
        height:48px;
        min-width:48px;
    }
    
    .compact-actions {
        gap:2px;
        margin-left:4px;
    }
    
    .compact-action-btn {
        width:28px;
        height:28px;
    }
    
    .compact-duration {
        min-width:40px;
    }
    
    .compact-row-number {
        width:24px;
        min-width:24px;
        font-size:12px;
    }
}

@media (max-width:480px) {
    .compact-duration {
        display:none;
    }
    
    .compact-actions {
        flex-direction:column;
        gap:4px;
    }
    
    .compact-action-btn {
        width:32px;
        height:32px;
    }
    
    .compact-track-artist {
        max-width:120px;
    }
    
    .compact-track-meta {
        font-size:11px;
    }
}

/* ======================
   ANIMATIONS
   ====================== */

@keyframes compact-slide-in {
    from {
        opacity:0;
        transform:translateX(-10px);
    }
    to {
        opacity:1;
        transform:translateX(0);
    }
}

.music-compact-row {
    animation:compact-slide-in 0.2s ease backwards;
}

.music-compact-row:nth-child(1) { animation-delay:0.02s; }
.music-compact-row:nth-child(2) { animation-delay:0.04s; }
.music-compact-row:nth-child(3) { animation-delay:0.06s; }
.music-compact-row:nth-child(4) { animation-delay:0.08s; }
.music-compact-row:nth-child(5) { animation-delay:0.10s; }
.music-compact-row:nth-child(6) { animation-delay:0.12s; }
.music-compact-row:nth-child(7) { animation-delay:0.14s; }
.music-compact-row:nth-child(8) { animation-delay:0.16s; }
.music-compact-row:nth-child(9) { animation-delay:0.18s; }
.music-compact-row:nth-child(10) { animation-delay:0.20s; }

/* ======================
   ACCESSIBILITY
   ====================== */

.compact-action-btn:focus,
.compact-artwork:focus {
    outline:2px solid #1a1a1a;
    outline-offset:2px;
}

.compact-track-title a:focus,
.compact-track-artist a:focus {
    outline:2px solid #1a1a1a;
    outline-offset:1px;
    border-radius:2px;
}

/* High contrast mode support */
@media (prefers-contrast:high) {
    .music-compact-row {
        border:2px solid #000;
    }
    
    .compact-action-btn {
        border:2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion:reduce) {
    .music-compact-row,
    .compact-artwork-image,
    .compact-action-btn {
        animation:none;
        transition:none;
    }
    
    .music-compact-row:hover {
        transform:none;
    }
}

/* ======================
   DARK MODE SUPPORT
   ====================== */

@media (prefers-color-scheme:dark) {
    .music-compact-row {
        background:rgba(26,26,26,0.98);
        border-color:rgba(255,255,255,0.08);
    }
    
    .music-compact-row:hover {
        background:rgba(26,26,26,1);
        border-color:rgba(255,255,255,0.15);
        box-shadow:0 2px 8px rgba(0,0,0,0.3);
    }
    
    .compact-track-title,
    .compact-track-title a {
        color:#fff;
    }
    
    .compact-track-title a:hover {
        color:#e0e0e0;
    }
    
    .compact-track-artist,
    .compact-track-artist a {
        color:#aaa;
    }
    
    .compact-track-artist a:hover {
        color:#fff;
    }
    
    .compact-action-btn {
        background:rgba(255,255,255,0.05);
        border-color:rgba(255,255,255,0.1);
        color:#aaa;
    }
    
    .compact-action-btn:hover {
        background:rgba(255,255,255,0.1);
        border-color:rgba(255,255,255,0.2);
        color:#fff;
    }
    
    .compact-tag {
        background:rgba(255,255,255,0.05);
        border-color:rgba(255,255,255,0.1);
        color:#aaa;
    }
    
    .compact-tag:hover {
        background:rgba(255,255,255,0.1);
        border-color:rgba(255,255,255,0.2);
        color:#fff;
    }
}



/* modules/amAudio/css/jrAudio_grid_mis_style.css */




/* modules/amAudio/css/audio_filters.css */


/**
 * Audio Filters CSS
 * Advanced pill-style filtering for audio content
 * Modern,responsive design with accessibility features
 *
 * @author The Arcitech 2025
 */

/* ============================================
   CSS Variables for Theming
   ============================================ */
:root {
    --af-primary:#0b3c5d;
    --af-primary-light:#1d5a8a;
    --af-primary-dark:#082a42;
    --af-accent:#4db176;
    --af-accent-hover:#3d9a63;
    --af-secondary:#5b758c;
    --af-secondary-hover:#4a6478;
    --af-text:#333333;
    --af-text-light:#666666;
    --af-text-muted:#888888;
    --af-bg:#f8f9fa;
    --af-bg-card:#ffffff;
    --af-border:#e0e0e0;
    --af-border-light:#f0f0f0;
    --af-shadow:rgba(0,0,0,0.08);
    --af-shadow-hover:rgba(0,0,0,0.15);
    --af-transition:0.25s ease;
    --af-radius:8px;
    --af-radius-pill:25px;
    --af-spacing:16px;
}

/* ============================================
   Main Page Layout
   ============================================ */
.amAudio-filters-page {
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

.amAudio-filters-page .block {
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
    padding:24px;
    margin-bottom:24px;
    box-shadow:0 2px 8px var(--af-shadow);
}

.amAudio-filters-page .title h1 {
    margin:0 0 8px 0;
    font-size:28px;
    font-weight:700;
    color:var(--af-primary);
}

.amAudio-filters-page .page-description {
    margin:12px 0 0 0;
    color:var(--af-text-light);
    font-size:15px;
    line-height:1.5;
}

.amAudio-filters-info {
    display:inline-block;
    margin-left:16px;
}

.amAudio-results-count {
    background:var(--af-primary);
    color:#ffffff;
    padding:6px 14px;
    border-radius:var(--af-radius-pill);
    font-size:13px;
    font-weight:600;
}

/* ============================================
   Filter Controls Container
   ============================================ */
.amAudio-filters-controls {
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
    padding:20px;
    margin-bottom:24px;
    box-shadow:0 2px 8px var(--af-shadow);
    position:relative;
}

.amAudio-filter-pills-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
}

.amAudio-filter-pills-container {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
}

.amAudio-filters-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    width:100%;
    position:relative;
}

/* ============================================
   Filter Pills - Main Category Buttons
   ============================================ */
.amAudio-filter-pill,
.amAudio-sort-pill-trigger,
.amAudio-filter-pill-trigger,
.amAudio-more-buttons {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:#f5f5f5;
    color:#333333;
    border:1px solid #e0e0e0;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    outline:none;
    min-height:40px;
    text-decoration:none;
    white-space:nowrap;
}

.amAudio-filter-pill:hover,
.amAudio-sort-pill-trigger:hover,
.amAudio-filter-pill-trigger:hover,
.amAudio-more-buttons:hover {
    background:#e8e8e8;
    border-color:#d0d0d0;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.amAudio-filter-pill:focus,
.amAudio-sort-pill-trigger:focus,
.amAudio-filter-pill-trigger:focus,
.amAudio-more-buttons:focus {
    box-shadow:0 0 0 3px rgba(11,60,93,0.2);
}

.amAudio-filter-pill.active,
.amAudio-sort-pill-trigger.active,
.amAudio-filter-pill-trigger.active {
    background:linear-gradient(135deg,#0b3c5d 0%,#1d5a8a 100%);
    color:#ffffff;
    border-color:#0b3c5d;
    box-shadow:0 2px 6px rgba(11,60,93,0.3);
}

.amAudio-filter-pill .amAudio-pill-icon,
.amAudio-sort-pill-trigger .amAudio-filter-icon,
.amAudio-filter-pill-trigger .amAudio-filter-icon,
.amAudio-more-buttons .amAudio-filter-icon {
    font-size:14px;
    flex-shrink:0;
}

.amAudio-filter-pill .amAudio-pill-arrow,
.amAudio-sort-pill-trigger .amAudio-filter-arrow,
.amAudio-filter-pill-trigger .amAudio-filter-arrow {
    font-size:10px;
    transition:transform 0.3s ease;
    flex-shrink:0;
}

.amAudio-filter-pill.active .amAudio-pill-arrow,
.amAudio-sort-pill-trigger.active .amAudio-filter-arrow,
.amAudio-filter-pill-trigger.active .amAudio-filter-arrow {
    transform:rotate(180deg);
}

.amAudio-filter-label {
    font-weight:500;
}

/* Reset pill styling - Match filter pill style */
.amAudio-filter-pill.amAudio-reset-pill,
.amAudio-reset-filter-link .amAudio-more-buttons {
    background:#f5f5f5;
    color:#333333;
    border:1px solid #e0e0e0;
    border-radius:20px;
    padding:10px 18px;
    font-size:13px;
    font-weight:500;
    min-height:40px;
}

.amAudio-filter-pill.amAudio-reset-pill:hover,
.amAudio-reset-filter-link .amAudio-more-buttons:hover {
    background:#e8e8e8;
    border-color:#d0d0d0;
    color:#333333;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.amAudio-reset-filter-link {
    text-decoration:none;
    display:inline-block;
}

/* ============================================
   Search Box
   ============================================ */
.amAudio-search-box {
    display:flex;
    gap:8px;
    align-items:center;
    flex-shrink:0;
}

.amAudio-filter-search-input {
    width:250px;
    padding:12px 16px;
    border:2px solid var(--af-border);
    border-radius:var(--af-radius-pill);
    font-size:14px;
    transition:all var(--af-transition);
    outline:none;
}

.amAudio-filter-search-input:focus {
    border-color:var(--af-primary);
    box-shadow:0 0 0 3px rgba(11,60,93,0.1);
}

.amAudio-filter-search-input::placeholder {
    color:var(--af-text-muted);
}

.amAudio-search-btn {
    background:var(--af-primary);
}

.amAudio-search-btn:hover {
    background:var(--af-primary-light);
}

/* Screen reader only */
.amAudio-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ============================================
   Filter Options Row - Expandable
   ============================================ */
.amAudio-filter-options-row {
    margin-top:16px;
    padding:16px;
    background:var(--af-bg);
    border-radius:var(--af-radius);
    display:none;
}

.amAudio-filter-options-row:not(:empty) {
    display:block;
}

.amAudio-filter-options-pills {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* ============================================
   Filter Option Containers - Dropdown Style
   ============================================ */
.amAudio-filter-dropdown-container {
    position:relative;
    width:100%;
    margin-top:12px;
    padding:16px 20px;
    background:#ffffff;
    border:1px solid var(--af-border);
    border-radius:var(--af-radius);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    z-index:100;
    display:none;
    overflow:visible;
    clear:both;
}

/* Default:All filter containers are hidden */
#amAudio-sort-options-container,
.amAudio-filter-options-container,
#amAudio-advanced-search-panel,
#mood_options_container,
#genre_options_container,
#style_options_container,
#type_options_container,
#key_options_container {
    display:none;
}

/* Only show when explicitly set to display:block or display:flex */
/* Check for both "display:block" and "display:block" (with and without space) */
/* Also check for "display:flex" and "display:flex" */
#amAudio-sort-options-container[style*="display:block"],
#amAudio-sort-options-container[style*="display:block"],
#amAudio-sort-options-container[style*="display:flex"],
#amAudio-sort-options-container[style*="display:flex"],
.amAudio-filter-options-container[style*="display:block"],
.amAudio-filter-options-container[style*="display:block"],
.amAudio-filter-options-container[style*="display:flex"],
.amAudio-filter-options-container[style*="display:flex"],
#amAudio-advanced-search-panel[style*="display:block"],
#amAudio-advanced-search-panel[style*="display:block"],
#amAudio-advanced-search-panel[style*="display:flex"],
#amAudio-advanced-search-panel[style*="display:flex"],
#mood_options_container[style*="display:block"],
#mood_options_container[style*="display:block"],
#mood_options_container[style*="display:flex"],
#mood_options_container[style*="display:flex"],
#genre_options_container[style*="display:block"],
#genre_options_container[style*="display:block"],
#genre_options_container[style*="display:flex"],
#genre_options_container[style*="display:flex"],
#style_options_container[style*="display:block"],
#style_options_container[style*="display:block"],
#style_options_container[style*="display:flex"],
#style_options_container[style*="display:flex"],
#type_options_container[style*="display:block"],
#type_options_container[style*="display:block"],
#type_options_container[style*="display:flex"],
#type_options_container[style*="display:flex"],
#key_options_container[style*="display:block"],
#key_options_container[style*="display:block"],
#key_options_container[style*="display:flex"],
#key_options_container[style*="display:flex"] {
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

/* Safety:if any dropdown container is toggled inline,allow it to render.
   Some skins/stylesheets can keep the base container hidden unless we explicitly override it. */
.amAudio-filter-dropdown-container[style*="display:block"],
.amAudio-filter-dropdown-container[style*="display:block"],
.amAudio-filter-dropdown-container[style*="display:flex"],
.amAudio-filter-dropdown-container[style*="display:flex"] {
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.amAudio-sort-option-pill,
.amAudio-filter-option-pill {
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    background:#ffffff;
    color:var(--af-text);
    border:2px solid var(--af-border);
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    outline:none;
    min-height:36px;
    text-decoration:none;
    margin:0;
    white-space:nowrap;
}

.amAudio-sort-option-pill:hover,
.amAudio-filter-option-pill:hover {
    border-color:var(--af-primary);
    background:rgba(11,60,93,0.08);
    color:var(--af-primary);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.amAudio-sort-option-pill a,
.amAudio-filter-option-pill-link {
    text-decoration:none;
    color:inherit;
    display:inline-block;
}

.amAudio-sort-option-pill a:hover,
.amAudio-filter-option-pill-link:hover {
    text-decoration:none;
}

.amAudio-filter-option-pill-link .amAudio-filter-option-pill:hover {
    border-color:var(--af-primary);
    background:rgba(11,60,93,0.08);
    color:var(--af-primary);
}

/* Active/selected state */
.amAudio-sort-option-pill[style*="opacity:0.6"],
.amAudio-filter-option-pill[style*="opacity:0.6"],
.amAudio-filter-option-pill.amAudio-filter-option-pill-active,
.amAudio-sort-option-pill.amAudio-sort-option-pill-active {
    background:rgba(11,60,93,0.1);
    border-color:var(--af-primary);
    color:var(--af-primary);
    cursor:default;
    opacity:0.6;
}

/* Empty filter options message */
.amAudio-filter-option-empty {
    padding:10px;
    color:#999;
    font-style:italic;
}

/* ============================================
   Filter Option Pills - Individual Options
   ============================================ */
.amAudio-filter-option-pill {
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    background:#ffffff;
    color:var(--af-text);
    border:2px solid var(--af-border);
    border-radius:var(--af-radius-pill);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--af-transition);
    outline:none;
    min-height:38px;
}

.amAudio-filter-option-pill:hover {
    border-color:var(--af-primary);
    background:rgba(11,60,93,0.05);
}

.amAudio-filter-option-pill:focus {
    box-shadow:0 0 0 3px rgba(11,60,93,0.2);
}

.amAudio-filter-option-pill.active {
    background:var(--af-accent);
    color:#ffffff;
    border-color:var(--af-accent);
}

.amAudio-filter-option-pill.active:hover {
    background:var(--af-accent-hover);
    border-color:var(--af-accent-hover);
}

/* Loading state */
.amAudio-filter-loading {
    padding:20px;
    text-align:center;
    color:var(--af-text-muted);
    font-style:italic;
}

.amAudio-filter-error {
    padding:16px;
    text-align:center;
    color:#dc3545;
    background:rgba(220,53,69,0.1);
    border-radius:var(--af-radius);
}

/* ============================================
   Selected Filters Display
   ============================================ */
.amAudio-selected-filters {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--af-border-light);
}

.amAudio-selected-filter-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    background:#e8f4ff;
    color:var(--af-primary);
    border-radius:var(--af-radius-pill);
    font-size:12px;
    font-weight:500;
}

.amAudio-selected-filter-pill .amAudio-remove-filter {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    background:var(--af-primary);
    color:#ffffff;
    border-radius:50%;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:background var(--af-transition);
}

.amAudio-selected-filter-pill .amAudio-remove-filter:hover {
    background:#dc3545;
}

/* ============================================
   Loading Indicator
   ============================================ */
.amAudio-loading-container {
    text-align:center;
    padding:60px 20px;
}

.amAudio-loading-spinner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.amAudio-spinner-icon {
    width:40px;
    height:40px;
    border:4px solid var(--af-border);
    border-top-color:var(--af-primary);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform:rotate(360deg); }
}

.amAudio-spinner-text {
    color:var(--af-text-muted);
    font-size:15px;
}

/* ============================================
   Audio List Container
   ============================================ */
.amAudio-list-container {
    min-height:300px;
    transition:opacity var(--af-transition);
}

.amAudio-list-container.loading {
    opacity:0.5;
    pointer-events:none;
}

.amAudio-initial-loading {
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
}

/* ============================================
   Audio Grid Layout
   ============================================ */
.amAudio-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
}

/* ============================================
   Audio Card
   ============================================ */
.amAudio-card {
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
    overflow:hidden;
    box-shadow:0 2px 8px var(--af-shadow);
    transition:all var(--af-transition);
}

.amAudio-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px var(--af-shadow-hover);
}

/* Audio Card Image */
.amAudio-card-image {
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
}

.amAudio-card-image img,
.amAudio-card-image .amAudio-artwork {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--af-transition);
}

.amAudio-card:hover .amAudio-card-image img,
.amAudio-card:hover .amAudio-artwork {
    transform:scale(1.05);
}

.amAudio-play-overlay {
    position:absolute;
    bottom:12px;
    right:12px;
    z-index:2;
}

.amAudio-play-overlay .form_button,
.amAudio-play-overlay button {
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--af-primary);
    color:#ffffff;
    border:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    transition:all var(--af-transition);
}

.amAudio-play-overlay .form_button:hover,
.amAudio-play-overlay button:hover {
    transform:scale(1.1);
    background:var(--af-primary-light);
}

/* Audio Card Info */
.amAudio-card-info {
    padding:16px;
}

.amAudio-title {
    margin:0 0 8px 0;
    font-size:16px;
    font-weight:600;
    line-height:1.3;
}

.amAudio-title a {
    color:var(--af-text);
    text-decoration:none;
    transition:color var(--af-transition);
}

.amAudio-title a:hover {
    color:var(--af-primary);
}

.amAudio-artist {
    margin:0 0 12px 0;
}

.amAudio-artist a {
    color:var(--af-text-light);
    text-decoration:none;
    font-size:14px;
    transition:color var(--af-transition);
}

.amAudio-artist a:hover {
    color:var(--af-primary);
}

/* Meta Tags */
.amAudio-meta {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
}

.amAudio-meta-tag {
    display:inline-block;
    padding:4px 10px;
    background:var(--af-bg);
    color:var(--af-text-light);
    border-radius:4px;
    font-size:11px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.amAudio-meta-tag.amAudio-genre-tag { background:#e3f2fd; color:#1565c0; }
.amAudio-meta-tag.amAudio-mood-tag { background:#fce4ec; color:#c2185b; }
.amAudio-meta-tag.amAudio-type-tag { background:#e8f5e9; color:#2e7d32; }

/* Audio Details */
.amAudio-details {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
    font-size:12px;
    color:var(--af-text-muted);
}

.amAudio-detail-item {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.amAudio-detail-icon {
    font-size:14px;
}

/* Audio Stats */
.amAudio-stats {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    padding-top:12px;
    border-top:1px solid var(--af-border-light);
    font-size:13px;
    color:var(--af-text-muted);
}

.amAudio-stat-item {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.amAudio-stat-icon {
    font-size:14px;
}

.amAudio-stat-item.amAudio-rating .amAudio-stat-icon {
    color:#ffc107;
}

/* Audio Actions */
.amAudio-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--af-border-light);
}

.amAudio-action-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    background:var(--af-bg);
    border:1px solid var(--af-border);
    border-radius:50%;
    color:var(--af-text-light);
    cursor:pointer;
    transition:all var(--af-transition);
}

.amAudio-action-btn:hover {
    background:var(--af-primary);
    color:#ffffff;
    border-color:var(--af-primary);
}

/* ============================================
   No Results
   ============================================ */
.amAudio-no-results {
    text-align:center;
    padding:80px 20px;
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
    box-shadow:0 2px 8px var(--af-shadow);
}

.amAudio-no-results-icon {
    font-size:64px;
    color:var(--af-border);
    margin-bottom:20px;
}

.amAudio-no-results-title {
    margin:0 0 12px 0;
    font-size:22px;
    color:var(--af-text);
}

.amAudio-no-results-text {
    margin:0 0 24px 0;
    color:var(--af-text-muted);
    font-size:15px;
}

.amAudio-reset-results-btn {
    background:var(--af-accent);
}

.amAudio-reset-results-btn:hover {
    background:var(--af-accent-hover);
}

/* ============================================
   Pagination
   ============================================ */
.amAudio-pagination-wrapper {
    margin-top:32px;
}

.amAudio-pagination {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:24px;
    background:var(--af-bg-card);
    border-radius:var(--af-radius);
    box-shadow:0 2px 8px var(--af-shadow);
}

.amAudio-pagination-info {
    font-size:14px;
    color:var(--af-text-muted);
}

.amAudio-pagination-info .amAudio-page-info {
    font-weight:600;
    color:var(--af-text);
}

.amAudio-pagination-controls {
    display:flex;
    align-items:center;
    gap:8px;
}

.amAudio-pagination-pages {
    display:flex;
    gap:4px;
}

.amAudio-pagination-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:40px;
    height:40px;
    padding:0 12px;
    background:#ffffff;
    border:2px solid var(--af-border);
    border-radius:var(--af-radius);
    color:var(--af-text);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all var(--af-transition);
}

.amAudio-pagination-btn:hover:not(.disabled) {
    border-color:var(--af-primary);
    color:var(--af-primary);
}

.amAudio-pagination-btn.active {
    background:var(--af-primary);
    border-color:var(--af-primary);
    color:#ffffff;
}

.amAudio-pagination-btn.disabled {
    opacity:0.5;
    cursor:not-allowed;
}

.amAudio-pagination-btn.amAudio-prev-btn,
.amAudio-pagination-btn.amAudio-next-btn {
    padding:0 16px;
}

.amAudio-pagination-ellipsis {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    color:var(--af-text-muted);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width:992px) {
    .amAudio-grid {
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
        gap:20px;
    }
}

@media (max-width:768px) {
    .amAudio-filters-page {
        padding:12px;
    }

    .amAudio-filters-page .block {
        padding:16px;
    }

    .amAudio-filters-page .title h1 {
        font-size:22px;
    }

    .amAudio-filter-pills-row {
        flex-direction:column;
        align-items:stretch;
    }

    .amAudio-filter-pills-container {
        justify-content:center;
    }

    .amAudio-search-box {
        width:100%;
        margin-top:12px;
    }

    .amAudio-filter-search-input {
        width:100%;
        flex:1;
    }

    .amAudio-grid {
        grid-template-columns:1fr;
        gap:16px;
    }

    .amAudio-card {
        display:flex;
        flex-direction:row;
    }

    .amAudio-card-image {
        width:120px;
        flex-shrink:0;
        aspect-ratio:1;
    }

    .amAudio-card-info {
        flex:1;
        min-width:0;
    }

    .amAudio-pagination-controls {
        flex-wrap:wrap;
        justify-content:center;
    }

    .amAudio-pagination-btn .amAudio-btn-text {
        display:none;
    }
}

@media (max-width:480px) {
    .amAudio-filter-pill {
        padding:10px 14px;
        font-size:13px;
    }

    .amAudio-filter-pill .amAudio-pill-text {
        display:none;
    }

    .amAudio-filter-pill .amAudio-pill-icon {
        font-size:18px;
    }

    .amAudio-filter-pill .amAudio-pill-arrow {
        display:none;
    }

    .amAudio-card {
        flex-direction:column;
    }

    .amAudio-card-image {
        width:100%;
    }
}

/* ============================================
   Dark Mode Support (if skin supports it)
   ============================================ */
@media (prefers-color-scheme:dark) {
    .amAudio-filters-page {
        --af-text:#e0e0e0;
        --af-text-light:#b0b0b0;
        --af-text-muted:#808080;
        --af-bg:#1a1a1a;
        --af-bg-card:#2a2a2a;
        --af-border:#404040;
        --af-border-light:#353535;
        --af-shadow:rgba(0,0,0,0.3);
        --af-shadow-hover:rgba(0,0,0,0.5);
    }

    .amAudio-filter-option-pill {
        background:#333333;
        color:var(--af-text);
        border-color:var(--af-border);
    }

    .amAudio-filter-option-pill:hover {
        background:#404040;
    }

    .amAudio-selected-filter-pill {
        background:rgba(11,60,93,0.3);
    }

    .amAudio-meta-tag.amAudio-genre-tag { background:rgba(21,101,192,0.2); }
    .amAudio-meta-tag.amAudio-mood-tag { background:rgba(194,24,91,0.2); }
    .amAudio-meta-tag.amAudio-type-tag { background:rgba(46,125,50,0.2); }

    .amAudio-pagination-btn {
        background:#333333;
        border-color:var(--af-border);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .amAudio-filters-controls,
    .amAudio-pagination-wrapper,
    .amAudio-play-overlay,
    .amAudio-actions {
        display:none;
    }

    .amAudio-grid {
        display:block;
    }

    .amAudio-card {
        page-break-inside:avoid;
        margin-bottom:16px;
        box-shadow:none;
        border:1px solid #ddd;
    }
}

/* ============================================
   View Toggle Buttons
   ============================================ */
.amAudio-view-toggle-container {
    display:flex;
    gap:5px;
    align-items:center;
}

.amAudio-view-toggle-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:#f5f5f5;
    border:1px solid #e0e0e0;
    border-radius:8px;
    color:#333333;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amAudio-view-toggle-btn svg {
    flex-shrink:0;
}

.amAudio-view-toggle-btn:hover {
    background:#e8e8e8;
    border-color:#d0d0d0;
    transform:translateY(-1px);
}

.amAudio-view-toggle-btn.active {
    background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);
    border-color:#c0c0c0;
    color:#0b3c5d;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.amAudio-view-toggle-btn.active:hover {
    background:linear-gradient(135deg,#f5f5f5 0%,#e8e8e8 100%);
    border-color:#b0b0b0;
}

/* Responsive */
@media (max-width:768px) {
    .amAudio-view-toggle-btn span {
        display:none;
    }
    
    .amAudio-view-toggle-btn {
        padding:8px 12px;
    }
}

/* ============================================
   Advanced Search Panel
   ============================================ */
.amAudio-advanced-search-wrapper {
    position:relative;
}

.amAudio-advanced-search-toggle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:#f5f5f5;
    border:1px solid #e0e0e0;
    border-radius:6px;
    color:#333333;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amAudio-advanced-search-toggle:hover {
    background:#e8e8e8;
    border-color:#d0d0d0;
    transform:translateY(-1px);
}

.amAudio-advanced-search-toggle svg {
    transition:transform 0.3s ease;
}

.amAudio-advanced-search-toggle:hover svg {
    transform:rotate(90deg);
}

.amAudio-advanced-search-panel {
    animation:amAudio-slideDown 0.3s ease;
}

@keyframes amAudio-slideDown {
    from {
        opacity:0;
        transform:translateY(-10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.amAudio-advanced-search-panel h3 {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 20px 0;
    font-size:18px;
    font-weight:600;
    color:#333333;
}

.amAudio-advanced-search-form {
    width:100%;
}

.amAudio-search-field-group {
    display:flex;
    flex-direction:column;
}

.amAudio-search-field-group label {
    display:block;
    margin-bottom:6px;
    font-weight:500;
    font-size:14px;
    color:#333333;
}

.amAudio-search-field-group input[type="text"] {
    width:100%;
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
    transition:all 0.2s ease;
    background:#fff;
}

.amAudio-search-field-group input[type="text"]:focus {
    outline:none;
    border-color:#0b3c5d;
    box-shadow:0 0 0 3px rgba(11,60,93,0.1);
}

.amAudio-search-field-group input[type="text"]::placeholder {
    color:#999;
    font-style:italic;
}

/* Advanced search form buttons */
.amAudio-advanced-search-form button[type="submit"] {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 24px;
    background:#0b3c5d;
    border:1px solid #0b3c5d;
    border-radius:6px;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amAudio-advanced-search-form button[type="submit"]:hover {
    background:#1d5a8a;
    border-color:#1d5a8a;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(11,60,93,0.3);
}

.amAudio-advanced-search-form button[type="reset"] {
    padding:10px 24px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    color:#333;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amAudio-advanced-search-form button[type="reset"]:hover {
    background:#f5f5f5;
    border-color:#bbb;
}

.amAudio-advanced-search-form button.cancel {
    padding:10px 24px;
    background:#6c757d;
    border:1px solid #6c757d;
    border-radius:6px;
    color:#fff;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amAudio-advanced-search-form button.cancel:hover {
    background:#5a6268;
    border-color:#545b62;
}

/* Reset button link styling */
.amAudio-search-toggle-container a {
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
}

/* Quick search form styling */
.amAudio-quick-search-form {
    flex-grow:1;
    max-width:220px;
    min-width:175px;
}

.amAudio-quick-search-form input[type="text"],
.amAudio-quick-search-form .form_text_search,
#amAudio-search-module {
    width:200px !important;
    min-width:175px !important;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
    box-sizing:border-box;
}

/* ============================================
   Three Column Layout for Filter Controls
   ============================================ */
.amAudio-filters-controls {
    position:relative;
}

.amAudio-filters-controls > .amAudio-filters-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    position:relative;
    z-index:10;
}

/* Ensure dropdowns appear below the filter row */
.amAudio-filter-dropdown-container {
    position:relative;
    z-index:100;
    margin-top:12px;
    clear:both;
}

/* Left column - Filter pills */
.amAudio-filters-controls > div > div:first-child {
    flex:1 1 auto;
    min-width:300px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

/* Middle column - Search */
.amAudio-filters-controls .amAudio-advanced-search-wrapper {
    flex:0 1 auto;
    min-width:280px;
    max-width:400px;
}

.amAudio-filters-controls .amAudio-search-toggle-container {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

/* Right column - View toggles */
.amAudio-filters-controls .amAudio-view-toggle-container {
    flex:0 0 auto;
    margin-left:auto;
    display:flex;
    gap:5px;
}

/* Responsive adjustments for advanced search */
@media (max-width:1200px) {
    .amAudio-quick-search-form {
        max-width:180px;
        min-width:160px;
    }
    
    .amAudio-quick-search-form input[type="text"],
    .amAudio-quick-search-form .form_text_search,
    #amAudio-search-module {
        min-width:160px !important;
    }
    
    .amAudio-filters-controls .amAudio-advanced-search-wrapper {
        min-width:240px;
        max-width:350px;
    }
}

@media (max-width:992px) {
    /* Stack in two rows on medium screens */
    .amAudio-filters-controls > div {
        justify-content:space-between;
    }
    
    .amAudio-filters-controls > div > div:first-child {
        flex:1 1 100%;
        min-width:100%;
        justify-content:flex-start;
    }
    
    .amAudio-filters-controls .amAudio-advanced-search-wrapper {
        flex:1 1 auto;
        min-width:200px;
        max-width:none;
    }
    
    .amAudio-filters-controls .amAudio-view-toggle-container {
        flex:0 0 auto;
        margin-left:0;
    }
}

@media (max-width:768px) {
    .amAudio-advanced-search-panel {
        padding:15px;
    }
    
    .amAudio-advanced-search-panel h3 {
        font-size:16px;
    }
    
    .amAudio-advanced-search-form > div {
        grid-template-columns:1fr !important;
    }
    
    /* Full width on mobile */
    .amAudio-filters-controls > div {
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }
    
    .amAudio-filters-controls > div > div:first-child {
        width:100%;
        justify-content:center;
    }
    
    .amAudio-filters-controls .amAudio-advanced-search-wrapper {
        width:100%;
        max-width:none;
    }
    
    .amAudio-filters-controls .amAudio-search-toggle-container {
        justify-content:stretch;
    }
    
    .amAudio-quick-search-form {
        flex:1;
        max-width:none;
    }
    
    .amAudio-filters-controls .amAudio-view-toggle-container {
        width:100%;
        justify-content:center;
        margin-left:0;
    }
    
    .amAudio-advanced-search-toggle span {
        display:none;
    }
    
    .amAudio-advanced-search-toggle {
        padding:8px 12px;
        flex-shrink:0;
    }
}


/* modules/amAudio/css/music_modern.css */


/**
 * Modern Music List Styling
 * Author:The Arcitech 2026
 * Complete Mini Player Integration
 * 
 * NOTE:All styles are scoped to amAudio pages only to prevent conflicts
 */

/* ======================
   TRACK CARD
   ====================== */

/* List View (Default) - Horizontal Layout - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .music-track-card,
body[class*="amAudio"] .amAudio-music-track-card {
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:20px;
    padding:16px;
    background:rgba(255,255,255,0.95);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:12px;
    margin-bottom:12px;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden;
}

body[class*="amAudio"] .music-track-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,#1a1a1a,rgba(26,26,26,0.5));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.3s ease;
}

body[class*="amAudio"] .music-track-card:hover {
    background:rgba(255,255,255,1);
    border-color:rgba(0,0,0,0.15);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

body[class*="amAudio"] .music-track-card:hover::before {
    transform:scaleX(1);
}

/* ======================
   ARTWORK
   ====================== */

/* List View - Fixed size artwork - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-artwork-container {
    position:relative;
    width:140px;
    height:140px;
    min-width:140px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
}

body[class*="amAudio"] .track-artwork-link {
    display:block;
    width:100%;
    height:100%;
    position:relative;
}

.track-artwork-image {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s ease;
}

body[class*="amAudio"] .track-artwork-container:hover .track-artwork-image {
    transform:scale(1.05);
}

.track-artwork-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s ease;
}

body[class*="amAudio"] .track-artwork-container:hover .track-artwork-overlay {
    opacity:1;
}

body[class*="amAudio"] .track-play-icon {
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.05); }
}

/* ======================
   TRACK CONTENT
   ====================== */

.track-content {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

/* ======================
   TRACK HEADER
   ====================== */

.track-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.track-info {
    flex:1;
    min-width:0;
}

.track-title {
    margin:0 0 6px 0;
    font-size:18px;
    font-weight:600;
    line-height:1.3;
}

body[class*="amAudio"] .track-title a {
    color:#1a1a1a;
    text-decoration:none;
    transition:color 0.2s ease;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body[class*="amAudio"] .track-title a:hover {
    color:#404040;
}

.track-artist {
    font-size:14px;
    color:#666;
}

body[class*="amAudio"] .track-artist a {
    color:#666;
    text-decoration:none;
    transition:color 0.2s ease;
}

body[class*="amAudio"] .track-artist a:hover {
    color:#1a1a1a;
}

.track-quick-play-btn {
    width:44px;
    height:44px;
    border-radius:50%;
    background:#1a1a1a;
    border:1px solid #1a1a1a;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
    flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

body[class*="amAudio"] .track-quick-play-btn:hover {
    background:#000;
    border-color:#000;
    transform:scale(1.05);
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

body[class*="amAudio"] .track-quick-play-btn:active {
    transform:scale(0.95);
}

/* ======================
   TRACK META TAGS
   ====================== */

.track-meta-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

body[class*="amAudio"] .track-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:12px;
    font-size:12px;
    color:#1a1a1a;
    text-decoration:none;
    transition:all 0.2s ease;
}

body[class*="amAudio"] .track-tag svg {
    flex-shrink:0;
}

body[class*="amAudio"] .track-tag:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.2);
    color:#000;
    transform:translateY(-1px);
}

body[class*="amAudio"] .track-tag-genre {
    border-color:rgba(0,0,0,0.2);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-tag-genre:hover {
    background:rgba(0,0,0,0.15);
    border-color:rgba(0,0,0,0.3);
}

body[class*="amAudio"] .track-tag-mood {
    border-color:rgba(0,0,0,0.2);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-tag-mood:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.3);
}

body[class*="amAudio"] .track-tag-type {
    border-color:rgba(0,0,0,0.2);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-tag-type:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.3);
}

/* ======================
   TRACK FOOTER
   ====================== */

.track-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

/* ======================
   TRACK ACTIONS
   ====================== */

body[class*="amAudio"] .track-actions,
.amAudio-track-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.track-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    color:#1a1a1a;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
}

body[class*="amAudio"] .track-action-btn svg {
    flex-shrink:0;
}

.track-action-btn:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.2);
    transform:translateY(-1px);
}

body[class*="amAudio"] .track-action-btn:active {
    transform:translateY(0);
}

/* Play Now Button - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn.play-now-btn {
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
    border:1px solid #1a1a1a;
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

body[class*="amAudio"] .track-action-btn.play-now-btn:hover {
    background:linear-gradient(135deg,#000 0%,#1a1a1a 100%);
    border-color:#000;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* Play Next Button - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn.play-next-btn {
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.15);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-action-btn.play-next-btn:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.3);
}

/* Add to Queue Button - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn.add-to-queue-btn {
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.1);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-action-btn.add-to-queue-btn:hover {
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.2);
}

body[class*="amAudio"] .track-action-btn.add-to-queue-btn.added {
    background:rgba(0,0,0,0.15);
    border-color:rgba(0,0,0,0.3);
    color:#1a1a1a;
}

/* Cart/Buy Button - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn.track-action-btn-cart {
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
    border:1px solid #1a1a1a;
    color:#fff;
    font-weight:600;
}

body[class*="amAudio"] .track-action-btn.track-action-btn-cart:hover {
    background:linear-gradient(135deg,#000 0%,#1a1a1a 100%);
    border-color:#000;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* Add to Playlist Button - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn.track-action-btn-playlist {
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.15);
    color:#1a1a1a;
}

body[class*="amAudio"] .track-action-btn.track-action-btn-playlist:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.3);
}

/* Download Link (styled as button) - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] a.track-action-btn {
    text-decoration:none;
}

body[class*="amAudio"] a.track-action-btn:hover {
    text-decoration:none;
}

/* Playlist Button Wrapper - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn-wrapper {
    display:inline-block;
}

body[class*="amAudio"] .track-action-btn-wrapper .like_button_box,
body[class*="amAudio"] .track-action-btn-wrapper a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:rgba(0,0,0,0.05);
    border:none !important; /* Removed border for cleaner look */
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    color:#1a1a1a;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
}

body[class*="amAudio"] .track-action-btn-wrapper .like_button_box:hover,
body[class*="amAudio"] .track-action-btn-wrapper a:hover {
    background:rgba(0,0,0,0.1);
    border:none !important; /* Keep no border on hover */
    transform:translateY(-1px);
}

/* Remove any borders from like button inner elements - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn-wrapper .like_button_box *,
body[class*="amAudio"] .track-action-btn-wrapper .like_button_box a,
body[class*="amAudio"] .track-action-btn-wrapper .like_button_box span,
body[class*="amAudio"] .track-action-btn-wrapper .like_button_box div {
    border:none !important;
}

/* ======================
   TRACK STATS
   ====================== */

.track-stats {
    display:flex;
    align-items:center;
    gap:16px;
}

body[class*="amAudio"] .track-stat {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#666;
    transition:color 0.2s ease;
}

body[class*="amAudio"] .track-stat svg {
    flex-shrink:0;
    opacity:0.7;
}

body[class*="amAudio"] .track-stat:hover {
    color:#1a1a1a;
}

/* ======================
   EMPTY STATE
   ====================== */

body[class*="amAudio"] .music-empty-state {
    text-align:center;
    padding:80px 20px;
    max-width:500px;
    margin:0 auto;
}

body[class*="amAudio"] .music-empty-icon-wrapper {
    margin-bottom:24px;
}

body[class*="amAudio"] .music-empty-icon {
    color:#d0d0d0;
    opacity:0.5;
}

body[class*="amAudio"] .music-empty-title {
    font-size:24px;
    font-weight:600;
    color:#1a1a1a;
    margin:0 0 12px 0;
}

body[class*="amAudio"] .music-empty-message {
    font-size:14px;
    color:#666;
    margin:0 0 32px 0;
    line-height:1.6;
}

body[class*="amAudio"] .music-empty-actions {
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

body[class*="amAudio"] .music-empty-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border-radius:24px;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:all 0.2s ease;
}

body[class*="amAudio"] .music-empty-btn-primary {
    background:#1a1a1a;
    color:#fff;
    border:1px solid #1a1a1a;
}

body[class*="amAudio"] .music-empty-btn-primary:hover {
    background:#000;
    border-color:#000;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

body[class*="amAudio"] .music-empty-btn-secondary {
    background:rgba(0,0,0,0.05);
    color:#1a1a1a;
    border:1px solid rgba(0,0,0,0.1);
}

body[class*="amAudio"] .music-empty-btn-secondary:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.2);
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width:768px) {
    /* Force vertical layout on mobile for better readability - SCOPED TO amAudio PAGES ONLY */
    body[class*="amAudio"] .music-track-card,
    body[class*="amAudio"] .music-results-list .music-track-card {
        flex-direction:column !important;
        gap:16px !important;
    }
    
    body[class*="amAudio"] .track-artwork-container,
    body[class*="amAudio"] .music-results-list .track-artwork-container {
        width:100% !important;
        min-width:100% !important;
        height:240px !important;
    }
    
    body[class*="amAudio"] .track-footer {
        flex-direction:column;
        align-items:flex-start;
    }
    
    body[class*="amAudio"] .track-actions,
    .amAudio-track-actions {
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
    
    body[class*="amAudio"] .track-stats {
        width:100%;
        justify-content:space-around;
    }
}

@media (max-width:480px) {
    body[class*="amAudio"] .track-title {
        font-size:16px;
    }
    
    body[class*="amAudio"] .track-artist {
        font-size:13px;
    }
    
    body[class*="amAudio"] .track-action-btn span {
        display:none;
    }
    
    body[class*="amAudio"] .track-action-btn {
        padding:8px 12px;
    }
}

/* ======================
   ANIMATIONS
   ====================== */

@keyframes slideIn {
    from {
        opacity:0;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

body[class*="amAudio"] .music-track-card {
    animation:slideIn 0.3s ease backwards;
}

body[class*="amAudio"] .music-track-card:nth-child(1) { animation-delay:0.05s; }
body[class*="amAudio"] .music-track-card:nth-child(2) { animation-delay:0.10s; }
body[class*="amAudio"] .music-track-card:nth-child(3) { animation-delay:0.15s; }
body[class*="amAudio"] .music-track-card:nth-child(4) { animation-delay:0.20s; }
body[class*="amAudio"] .music-track-card:nth-child(5) { animation-delay:0.25s; }

/* ======================
   LIST VIEW EXPLICIT STYLES
   ====================== */

/* List mode - ensure horizontal layout - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .music-results-list .music-track-card {
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
}

.music-results-list .track-artwork-container {
    width:140px !important;
    height:140px !important;
    min-width:140px !important;
}

body[class*="amAudio"] .music-results-list .track-content {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
}

body[class*="amAudio"] .music-results-list .track-footer {
    flex-wrap:wrap !important;
}

body[class*="amAudio"] .music-results-list .track-actions {
    flex-wrap:wrap !important;
}

/* ======================
   GRID VIEW LAYOUT
   ====================== */

.music-results-grid {
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important;
    gap:16px !important;
    padding:8px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

/* Ensure grid takes full width even in constrained containers */
body[class*="amAudio"] .music-results-grid,
body[class*="amAudio"] .container .music-results-grid,
body[class*="amAudio"] .block .music-results-grid,
body[class*="amAudio"] .row .music-results-grid,
body[class*="amAudio"] [class*="col"] .music-results-grid,
body[class*="amAudio"] .col9 .music-results-grid,
body[class*="amAudio"] .col3 .music-results-grid {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Ensure full width within parent column */
body[class*="amAudio"] .col9 .music-results-grid,
body[class*="amAudio"] .col3 .music-results-grid {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Override any column padding that might constrain width */
body[class*="amAudio"] .col9,
body[class*="amAudio"] .col3 {
    padding-left:0 !important;
    padding-right:0 !important;
}

body[class*="amAudio"] .col9 > *:not(.music-compact-list):not(.amAudio_grid_container):not(.music-results-grid),
body[class*="amAudio"] .col3 > *:not(.music-compact-list):not(.amAudio_grid_container):not(.music-results-grid) {
    padding-left:20px !important;
    padding-right:20px !important;
}

body[class*="amAudio"] .music-results-grid .col12 {
    width:100% !important;
    padding:0 !important;
}

body[class*="amAudio"] .music-results-grid .col3 {
    width:100% !important;
    padding:0 !important;
}

body[class*="amAudio"] .music-track-card-grid {
    flex-direction:column !important;
    gap:0 !important;
    padding:0 !important;
    height:100%;
    margin-bottom:20px !important;
    border-radius:12px !important;
    overflow:hidden !important;
}

body[class*="amAudio"] .music-track-card-grid .track-artwork-container {
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    border-radius:0 !important;
    margin:0 !important;
}

body[class*="amAudio"] .music-track-card-grid .track-artwork-image {
    border-radius:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

body[class*="amAudio"] .music-track-card-grid .track-content {
    width:100% !important;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px !important;
    align-items:center !important;
    text-align:center !important;
}

/* Reorder elements in grid mode - Multi-row layout - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .music-track-card-grid .track-header {
    order:1;
}

.music-track-card-grid .track-footer {
    order:2;
    width:100% !important;
}

body[class*="amAudio"] .music-track-card-grid .track-actions-primary {
    order:2;
    margin-top:8px !important;
}

body[class*="amAudio"] .music-track-card-grid .track-actions-secondary {
    order:3;
    margin-top:8px !important;
}

.music-track-card-grid .track-meta-tags {
    order:4;
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid rgba(0,0,0,0.08) !important;
}

body[class*="amAudio"] .music-track-card-grid .track-actions-social {
    order:5;
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid rgba(0,0,0,0.08) !important;
}

/* Style all action button rows - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .music-track-card-grid .track-actions {
    gap:8px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    width:100% !important;
}

.music-track-card-grid .track-header {
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
}

body[class*="amAudio"] .music-track-card-grid .track-quick-play-btn {
    display:none !important;
}

body[class*="amAudio"] .music-track-card-grid .track-info {
    width:100% !important;
    text-align:center !important;
}

body[class*="amAudio"] .music-track-card-grid .track-title {
    font-size:14px !important;
    text-align:center !important;
}

body[class*="amAudio"] .music-track-card-grid .track-artist {
    font-size:12px !important;
    text-align:center !important;
}

.music-track-card-grid .track-meta-tags {
    justify-content:center !important;
    flex-wrap:wrap !important;
}

.music-track-card-grid .track-footer {
    flex-direction:column !important;
    gap:12px !important;
}

.music-track-card-grid .track-actions {
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:6px !important;
}

body[class*="amAudio"] .music-track-card-grid .track-stats {
    justify-content:center !important;
}

/* Responsive Grid - Minimum card widths - SCOPED TO amAudio PAGES ONLY */
@media (max-width:1400px) {
    body[class*="amAudio"] .music-results-grid {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }
}

@media (max-width:1024px) {
    body[class*="amAudio"] .music-results-grid {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:12px;
    }
}

@media (max-width:768px) {
    body[class*="amAudio"] .music-results-grid {
        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
        gap:10px;
    }
}

@media (max-width:480px) {
    body[class*="amAudio"] .music-results-grid {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:8px;
    }
}

/* ======================
   CART BUTTON STYLING
   ====================== */

/* Wrapper for Jamroom cart buttons - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn-wrapper {
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* Style Jamroom-generated cart buttons to match modern design - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-action-btn-wrapper form,
body[class*="amAudio"] .track-action-btn-wrapper .form_button {
    display:inline-block;
    margin:0;
}

body[class*="amAudio"] .track-action-btn-wrapper .form_button,
body[class*="amAudio"] .track-action-btn-wrapper button[type="submit"],
body[class*="amAudio"] .track-action-btn-wrapper input[type="submit"] {
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.1);
    color:#1a1a1a;
    padding:6.8px 13.6px; /* 15% smaller:8 * 0.85 = 6.8,16 * 0.85 = 13.6 */
    border-radius:6.8px; /* 15% smaller:8 * 0.85 = 6.8 */
    font-size:11px; /* 15% smaller:13 * 0.85 = 11.05 */
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    white-space:nowrap;
}

body[class*="amAudio"] .track-action-btn-wrapper .form_button:hover,
body[class*="amAudio"] .track-action-btn-wrapper button[type="submit"]:hover,
body[class*="amAudio"] .track-action-btn-wrapper input[type="submit"]:hover {
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.2);
    transform:translateY(-1px);
}

/* Price display - SCOPED TO amAudio PAGES ONLY */
body[class*="amAudio"] .track-price {
    font-size:12px; /* 15% smaller:14 * 0.85 = 11.9 */
    font-weight:600;
    color:#1a1a1a;
    padding:3.4px 6.8px; /* 15% smaller:4 * 0.85 = 3.4,8 * 0.85 = 6.8 */
    background:rgba(26,26,26,0.05);
    border-radius:5.1px; /* 15% smaller:6 * 0.85 = 5.1 */
}



/* modules/amAudio/css/help-system.css */


/* amAudio help system base styles */
.amaudio-help-icon {
    color:#000000;
    font-size:18px;
    flex-shrink:0;
}

.amaudio-help-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* modules/amAudio/css/form_styling.css */




/* modules/amAudio/css/analytics_dashboard.css */


/* amAudio analytics dashboard */
.amaudio-analytics-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin:20px 0 32px;
}

.amaudio-stat-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.amaudio-stat-card strong {
    font-size:22px;
}

.amaudio-analytics-charts {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin-bottom:32px;
}

.amaudio-chart-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:16px;
}

.amaudio-chart {
    min-height:280px;
}

.amaudio-table {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    overflow:hidden;
}

.amaudio-table-row {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:12px;
    padding:12px 16px;
    border-top:1px solid #e2e8f0;
}

.amaudio-table-header {
    background:#f8fafc;
    font-weight:700;
    border-top:none;
}

.amaudio-filter {
    display:flex;
    align-items:center;
    gap:8px;
}

.amaudio-date-range {
    border:1px solid #e2e8f0;
    border-radius:8px;
    padding:6px 10px;
}

/* Filter margin */
.amAudio-filter-margin {
    margin:10px 0 18px;
}

.amAudio-filter-label {
    margin-right:10px;
}

/* Pill inline styles */
.amAudio-pill-inline {
    display:inline-flex;
    padding:6px 10px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    margin-right:8px;
}

/* modules/amAudio/css/charts.css */


/* amAudio Leaderboard Charts */

.amaudio-charts {
    padding:0 16px 40px;
}

.amaudio-page-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.amaudio-page-header h1 {
    font-size:28px;
    margin:0 0 6px;
}

.amaudio-page-header p {
    margin:0;
    color:#6b7280;
}

.amaudio-page-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Button styles moved to amAudio_common.css to avoid duplication */

.audio-filters-controls,
.amAudio-filters-controls {
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    margin-bottom:24px;
    box-shadow:0 10px 24px rgba(15,23,42,0.05);
}

.audio-filters-row,
.amAudio-filters-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
}

.filter-pills-container,
.amAudio-filter-pills-container {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.filter_pill_trigger,
.amAudio-filter-pill-trigger,
.amaudio-reset-btn,
.amaudio-apply-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:8px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#0f172a;
    cursor:pointer;
    transition:all 0.2s ease;
}

.filter_pill_trigger:hover,
.amAudio-filter-pill-trigger:hover,
.amaudio-reset-btn:hover,
.amaudio-apply-btn:hover {
    background:#e2e8f0;
}

.filter-arrow,
.amAudio-filter-arrow {
    font-size:10px;
}

.filter_options_container,
.amAudio-filter-options-container {
    display:none;
    padding:12px 0 4px;
    border-top:1px solid #e5e7eb;
    margin-top:12px;
}

.filter_option_pill,
.amAudio-filter-option-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    margin:6px 8px 0 0;
    border-radius:999px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    cursor:pointer;
    font-size:13px;
}

.filter_option_pill.active,
.amAudio-filter-option-pill.active {
    background:#2563eb;
    color:#ffffff;
    border-color:#2563eb;
}

.filter-pill-checkbox input,
.amAudio-filter-pill-checkbox input {
    margin-right:6px;
}

.amaudio-advanced-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-top:8px;
}

.amaudio-advanced-field label {
    font-size:13px;
    font-weight:600;
    color:#374151;
}

.amaudio-filter-input {
    min-height:40px;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #d1d5db;
    background:#ffffff;
    font-size:14px;
}

.filter-action-buttons,
.amAudio-filter-action-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.amaudio-charts-layout {
    margin-bottom:40px;
}

.amaudio-leaderboard-main {
    background:#ffffff;
    border-radius:18px;
    border:1px solid #e5e7eb;
    box-shadow:0 16px 30px rgba(15,23,42,0.06);
    padding:18px;
}

.amaudio-leaderboard-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}

.amaudio-tab {
    padding:8px 14px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    cursor:pointer;
    font-weight:600;
}

.amaudio-tab.active {
    background:#111827;
    color:#ffffff;
    border-color:#111827;
}

.amaudio-leaderboard-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.amaudio-leaderboard-table {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.amaudio-table-row {
    display:grid;
    grid-template-columns:80px minmax(0,1fr) 140px;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #f3f4f6;
    font-size:13px;
}

.amaudio-table-header {
    font-weight:700;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.amaudio-table-title a {
    color:inherit;
    text-decoration:none;
    font-weight:600;
}

.amaudio-table-title a:hover,
.amaudio-table-title a:focus {
    color:#2563eb;
}

.amaudio-leaderboard-card {
    background:#ffffff;
    border-radius:18px;
    border:1px solid #e5e7eb;
    box-shadow:0 16px 30px rgba(15,23,42,0.06);
    padding:18px;
    display:flex;
    flex-direction:column;
    min-height:320px;
}

.amaudio-leaderboard-mini .amaudio-leaderboard-row {
    grid-template-columns:70px minmax(0,1fr) 70px;
    font-size:12px;
}

.amaudio-card-header h2 {
    margin:0 0 6px;
    font-size:20px;
}

.amaudio-card-header p {
    margin:0;
    color:#6b7280;
    font-size:13px;
}

.amaudio-leaderboard {
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
}

.amaudio-leaderboard-row {
    display:grid;
    grid-template-columns:70px minmax(0,1fr) 90px;
    gap:12px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #f3f4f6;
    font-size:13px;
}

.amaudio-leaderboard-row:last-child {
    border-bottom:none;
}

.amaudio-leaderboard-header {
    font-weight:700;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.amaudio-leaderboard-meta {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.amaudio-leaderboard-main-info {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.amaudio-leaderboard-meta-line {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:12px;
    color:#6b7280;
}

.amaudio-leaderboard-meta-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:999px;
    background:#f3f4f6;
    color:#4b5563;
}

.amaudio-leaderboard-title {
    font-weight:600;
    color:#111827;
}

.amaudio-leaderboard-title a {
    color:inherit;
    text-decoration:none;
}

.amaudio-leaderboard-title a:hover,
.amaudio-leaderboard-title a:focus {
    color:#2563eb;
}

.amaudio-leaderboard-subtitle {
    color:#6b7280;
    font-size:12px;
}

.amaudio-leaderboard-bar {
    height:6px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}

.amaudio-leaderboard-bar span {
    display:block;
    height:100%;
    background:linear-gradient(90deg,#2563eb,#60a5fa);
}

.amaudio-leaderboard-rank-block {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.amaudio-leaderboard-rank {
    font-weight:700;
    font-size:16px;
    color:#111827;
}

.amaudio-leaderboard-metric {
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    font-weight:600;
    color:#1f2937;
    text-align:right;
}

.amaudio-leaderboard-trend {
    font-weight:700;
    text-align:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
}

.amaudio-leaderboard-trend.trend-up {
    color:#065f46;
    background:#d1fae5;
}

.amaudio-leaderboard-trend.trend-down {
    color:#991b1b;
    background:#fee2e2;
}

.amaudio-leaderboard-trend.trend-flat {
    color:#374151;
    background:#e5e7eb;
}

.amaudio-leaderboard-trend.trend-new {
    color:#1e40af;
    background:#dbeafe;
}

.amaudio-leaderboard-empty {
    padding:24px;
    text-align:center;
    color:#6b7280;
    border:1px dashed #e5e7eb;
    border-radius:12px;
}

.amaudio-leaderboard.is-loading::after {
    content:'Loading...';
    display:block;
    padding:16px 0;
    color:#6b7280;
    font-weight:600;
    text-align:center;
}

@media (max-width:900px) {
    .amaudio-page-header {
        flex-direction:column;
        align-items:flex-start;
    }

    .amaudio-filter-row {
        flex-direction:column;
        align-items:stretch;
    }

    .audio-filters-row,
    .amAudio-filters-row {
        flex-direction:column;
        align-items:stretch;
    }

    .amaudio-leaderboard-header {
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .amaudio-table-row {
        grid-template-columns:70px 1fr;
        grid-template-rows:auto auto;
        gap:8px 12px;
    }

    .amaudio-leaderboard-metric {
        grid-column:2 / -1;
        justify-self:start;
    }
}

@media (max-width:640px) {
    .amaudio-leaderboard-row {
        grid-template-columns:70px 1fr;
        grid-template-rows:auto auto;
        gap:6px 12px;
    }

    .amaudio-leaderboard-metric {
        grid-column:1 / -1;
        justify-self:start;
        text-align:left;
    }

    .amaudio-leaderboard-header {
        display:none;
    }

    .amaudio-table-row {
        grid-template-columns:1fr;
    }
}


/* modules/amAudio/css/explore.css */


/**
 * amAudio Full Screen Layout
 * Full-screen layout with adjustable scalability
 * Author:The Arcitech ©2026
 */

/* CSS Variables for Full Screen Layout */
:root {
    --amaudio-container-padding:clamp(10px,2vw,32px);
    --amaudio-container-max-width:100%;
}

/* amAudio modern layout - Full Screen */
.amaudio-container {
    max-width:var(--amaudio-container-max-width);
    width:100%;
    margin:0 auto;
    padding:var(--amaudio-container-padding) clamp(10px,2vw,20px);
    box-sizing:border-box;
    overflow:visible;
}

.amaudio-hero {
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:24px;
    margin-bottom:40px;
}

.amaudio-hero-content {
    background:#0f172a;
    color:#f8fafc;
    padding:10px 15px;
    border-radius:16px;
}

.amaudio-hero-eyebrow {
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:12px;
    color:#94a3b8;
    margin-bottom:8px;
}

.amaudio-hero-title {
    font-size:40px;
    margin:0 0 12px;
}

.amaudio-hero-subtitle {
    color:#cbd5f5;
    margin-bottom:20px;
}

.amaudio-hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* Button styles moved to amAudio_common.css to avoid duplication */
/* Note:explore.css uses border-radius:999px for buttons,which overrides common.css */

.amaudio-btn-ghost {
    border-color:#64748b;
    color:#e2e8f0;
}

.amaudio-hero-card {
    background:#ffffff;
    border-radius:16px;
    padding:24px;
    border:1px solid #e2e8f0;
}

.amaudio-hero-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.amaudio-hero-card-title {
    font-weight:700;
}

.amaudio-link {
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}

.amaudio-hero-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
}

.amaudio-type-chip {
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:10px 12px;
    display:inline-flex;
    gap:8px;
    align-items:center;
    text-decoration:none;
    color:#1e293b;
    font-weight:600;
}

.amaudio-section {
    margin-bottom:36px;
}

.amaudio-section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.amaudio-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

.amaudio-card {
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:#fff;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* 16:9 Aspect Ratio for Card Media */
.amaudio-card-media {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    overflow:hidden;
    display:block;
    background:#f1f5f9;
}

.amaudio-card-media img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.amaudio-card-body {
    padding:16px;
}

.amaudio-card-title {
    font-size:16px;
    margin:0 0 6px;
}

.amaudio-card-title a {
    color:#0f172a;
    text-decoration:none;
}

.amaudio-card-meta {
    color:#64748b;
    margin-bottom:12px;
}

.amaudio-card-actions {
    display:flex;
    gap:10px;
    align-items:center;
}

/* Explore charts refinements */
.amaudio-charts-row {
    align-items:center;
}

.amaudio-charts-rank-wrapper {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:64px;
}

.amaudio-charts-trend {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    padding:4px 8px;
    border-radius:999px;
    background:#f3f4f6;
    color:#374151;
}

.amaudio-charts-trend.trend-up {
    background:rgba(16,185,129,0.12);
    color:#059669;
}

.amaudio-charts-trend.trend-down {
    background:rgba(239,68,68,0.12);
    color:#dc2626;
}

.amaudio-charts-trend.trend-new {
    background:rgba(59,130,246,0.12);
    color:#2563eb;
}

.amaudio-charts-trend.trend-flat {
    background:rgba(107,114,128,0.12);
    color:#6b7280;
}

.amaudio-charts-play-overlay {
    display:none;
}

.amaudio-charts-plays-count {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:600;
}

.amaudio-empty {
    color:#94a3b8;
}

.amaudio-page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
}

.amaudio-type-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px;
}

.amaudio-type-card {
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:16px;
    text-decoration:none;
    color:#1e293b;
    font-weight:600;
    display:flex;
    gap:10px;
    align-items:center;
}

.amaudio-help-bar {
    display:flex;
    align-items:center;
    gap:16px;
    background:#f1f5f9;
    padding:12px 16px;
    border-radius:12px;
    margin:16px 0 24px;
}

.amaudio-help-icon {
    color:#000000;
    font-size:18px;
    flex-shrink:0;
}

.amaudio-help-text {
    color:#475569;
}

@media (max-width:960px) {
    .amaudio-hero {
        grid-template-columns:1fr;
    }

    .amaudio-page-header {
        flex-direction:column;
        align-items:flex-start;
    }
}

.amaudio-slider-section {
    position:relative;
}

.amaudio-slider {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
}

.amaudio-slider-track {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(240px,1fr);
    gap:16px;
    overflow:hidden;
    scroll-snap-type:x mandatory;
    padding-bottom:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
    will-change:transform;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
}

.amaudio-slider-track::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
}

.amaudio-slider-track::-webkit-scrollbar-thumb {
    display:none;
}

.amaudio-slider-item {
    scroll-snap-align:start;
    border-radius:16px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    overflow:hidden;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s ease;
    animation:slideIn 0.6s cubic-bezier(0.4,0,0.2,1) backwards;
}

.amaudio-slider-item:nth-child(1) { animation-delay:0.1s; }
.amaudio-slider-item:nth-child(2) { animation-delay:0.2s; }
.amaudio-slider-item:nth-child(3) { animation-delay:0.3s; }
.amaudio-slider-item:nth-child(4) { animation-delay:0.4s; }
.amaudio-slider-item:nth-child(5) { animation-delay:0.5s; }
.amaudio-slider-item:nth-child(6) { animation-delay:0.6s; }

@keyframes slideIn {
    from {
        opacity:0;
        transform:translateY(20px) scale(0.95);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.amaudio-slider-item:hover {
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

.amaudio-slider-control {
    border:1px solid #e2e8f0;
    background:#ffffff;
    color:#0f172a;
    border-radius:999px;
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:10;
    position:relative;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    cursor:pointer;
}

.amaudio-slider-control:hover {
    background:#2563eb;
    border-color:#2563eb;
    color:#ffffff;
    transform:scale(1.1);
    box-shadow:0 4px 12px rgba(37,99,235,0.3);
}

.amaudio-slider-control:active {
    transform:scale(0.95);
}

.amaudio-slider-control i {
    transition:transform 0.3s ease;
}

.amaudio-slider-control:hover i {
    transform:scale(1.2);
}

/* 16:9 Aspect Ratio for Slider Media */
.amaudio-slide-media {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    overflow:hidden;
    display:block;
    background:#f1f5f9;
    transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.amaudio-slide-media img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
    will-change:transform;
}

.amaudio-slider-item:hover .amaudio-slide-media img {
    transform:scale(1.1);
}

.amaudio-slider-item:hover .amaudio-slide-media {
    transform:scale(1.02);
}

.amaudio-slide-body,
.amaudio-sale-body {
    padding:16px;
}

.amaudio-slide-title {
    font-size:18px;
    margin:0 0 6px;
}

.amaudio-slide-title a {
    color:#0f172a;
    text-decoration:none;
}

.amaudio-slide-eyebrow {
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:6px;
}

.amaudio-slide-meta {
    color:#64748b;
    margin-bottom:12px;
}

.amaudio-slide-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.amaudio-sale-card {
    display:flex;
    flex-direction:column;
}

.amaudio-sale-price {
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.amaudio-sale-cart {
    padding:8px 14px;
}

.amaudio-artist-card {
    padding:18px;
}

.amaudio-artist-header {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}

/* 16:9 Aspect Ratio for Artist Avatar (if used as image container) */
/* Artist Avatar - Keep as circular/square (1:1) for profile images */
.amaudio-artist-avatar {
    position:relative;
    width:72px;
    height:72px;
    flex-shrink:0;
    overflow:hidden;
    display:block;
    border-radius:50%;
    background:#f1f5f9;
}

.amaudio-artist-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%;
}

.amaudio-artist-name {
    margin:0;
    font-size:18px;
}

.amaudio-artist-name a {
    color:#0f172a;
    text-decoration:none;
}

.amaudio-artist-handle {
    color:#64748b;
    margin:4px 0 0;
}

/* Artist Tracks Container */
.amaudio-artist-tracks {
    width:100%;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e2e8f0;
}

.amaudio-artist-track-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
    width:100%;
}

.amaudio-artist-track {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:14px;
    color:#0f172a;
    padding:8px 0;
    border-bottom:1px solid #f1f5f9;
}

.amaudio-artist-track:last-child {
    border-bottom:none;
}

.amaudio-artist-track a {
    text-decoration:none;
    color:inherit;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color 0.2s ease;
}

.amaudio-artist-track a:hover {
    color:#2563eb;
}

.amaudio-artist-track-plays {
    color:#64748b;
    font-size:13px;
    flex-shrink:0;
    white-space:nowrap;
}

.amaudio-empty-tracks {
    color:#94a3b8;
    font-size:13px;
    text-align:center;
    padding:16px 0;
    margin:0;
}

.amaudio-charts-section {
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:24px;
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);
}

.amaudio-charts-container {
    display:flex;
    flex-direction:column;
    gap:0;
}

.amaudio-charts-header {
    display:grid;
    grid-template-columns:60px 1fr 120px 100px;
    gap:16px;
    align-items:center;
    padding:12px 16px;
    background:#f8fafc;
    border-radius:10px;
    margin-bottom:8px;
    font-weight:600;
    color:#64748b;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.amaudio-charts-body {
    display:flex;
    flex-direction:column;
    gap:0;
}

.amaudio-charts-row {
    display:grid;
    grid-template-columns:60px 1fr 120px 100px;
    gap:16px;
    align-items:center;
    padding:16px;
    border-radius:12px;
    margin-bottom:8px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

.amaudio-charts-row::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:transparent;
    transition:background 0.3s ease;
}

.amaudio-charts-row:hover {
    background:#f8fafc;
    border-color:#cbd5e1;
    transform:translateX(4px);
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.amaudio-charts-row:hover::before {
    background:#2563eb;
}

.amaudio-charts-row[data-rank="1"]::before {
    background:linear-gradient(180deg,#ffd700 0%,#ffed4e 100%);
}

.amaudio-charts-row[data-rank="2"]::before {
    background:linear-gradient(180deg,#c0c0c0 0%,#e8e8e8 100%);
}

.amaudio-charts-row[data-rank="3"]::before {
    background:linear-gradient(180deg,#cd7f32 0%,#e6a857 100%);
}

.amaudio-charts-rank-wrapper {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    position:relative;
}

.amaudio-charts-rank {
    font-weight:700;
    font-size:20px;
    color:#0f172a;
    line-height:1;
    min-width:32px;
    text-align:center;
}

.amaudio-charts-row[data-rank="1"] .amaudio-charts-rank,
.amaudio-charts-row[data-rank="2"] .amaudio-charts-rank,
.amaudio-charts-row[data-rank="3"] .amaudio-charts-rank {
    font-size:24px;
}

.amaudio-charts-badge {
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    font-size:14px;
    color:#ffffff;
}

.amaudio-charts-badge-1 {
    background:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);
    box-shadow:0 2px 8px rgba(255,215,0,0.4);
}

.amaudio-charts-badge-2 {
    background:linear-gradient(135deg,#c0c0c0 0%,#e8e8e8 100%);
    box-shadow:0 2px 8px rgba(192,192,192,0.4);
}

.amaudio-charts-badge-3 {
    background:linear-gradient(135deg,#cd7f32 0%,#e6a857 100%);
    box-shadow:0 2px 8px rgba(205,127,50,0.4);
}

.amaudio-charts-track {
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

.amaudio-charts-image {
    position:relative;
    width:80px;
    height:80px;
    flex-shrink:0;
    border-radius:10px;
    overflow:hidden;
    background:#f1f5f9;
    display:block;
    transition:transform 0.3s ease;
}

.amaudio-charts-row:hover .amaudio-charts-image {
    transform:scale(1.05);
}

.amaudio-charts-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.amaudio-charts-play-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s ease;
    border-radius:10px;
}

.amaudio-charts-row:hover .amaudio-charts-play-overlay {
    opacity:1;
}

.amaudio-charts-play-btn {
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    border:none;
    color:#2563eb;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.amaudio-charts-play-btn:hover {
    background:#ffffff;
    transform:scale(1.1);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.amaudio-charts-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.amaudio-charts-title {
    margin:0;
    font-size:16px;
    font-weight:600;
    line-height:1.3;
}

.amaudio-charts-title a {
    color:#0f172a;
    text-decoration:none;
    transition:color 0.2s ease;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.amaudio-charts-title a:hover {
    color:#2563eb;
}

.amaudio-charts-artist {
    margin:0;
    font-size:14px;
    color:#64748b;
}

.amaudio-charts-artist a {
    color:inherit;
    text-decoration:none;
    transition:color 0.2s ease;
}

.amaudio-charts-artist a:hover {
    color:#2563eb;
}

.amaudio-charts-meta {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    font-size:12px;
    color:#94a3b8;
    margin-top:4px;
}

.amaudio-charts-meta span {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.amaudio-charts-meta i {
    font-size:11px;
    opacity:0.7;
}

.amaudio-charts-album a,
.amaudio-charts-genre,
.amaudio-charts-duration {
    color:inherit;
    text-decoration:none;
    transition:color 0.2s ease;
}

.amaudio-charts-album a:hover {
    color:#2563eb;
}

.amaudio-charts-plays {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
}

.amaudio-charts-plays-count {
    font-weight:700;
    font-size:18px;
    color:#0f172a;
    line-height:1;
}

.amaudio-charts-plays-label {
    font-size:11px;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.amaudio-charts-trend {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 12px;
    border-radius:20px;
    font-weight:600;
    font-size:13px;
    white-space:nowrap;
    transition:all 0.2s ease;
}

.amaudio-charts-trend i {
    font-size:12px;
}

.amaudio-charts-trend.trend-up {
    background:#d1fae5;
    color:#065f46;
}

.amaudio-charts-trend.trend-down {
    background:#fee2e2;
    color:#991b1b;
}

.amaudio-charts-trend.trend-flat {
    background:#f1f5f9;
    color:#64748b;
}

.amaudio-charts-trend.trend-new {
    background:#dbeafe;
    color:#1e40af;
}

.amaudio-charts-row:hover .amaudio-charts-trend {
    transform:scale(1.05);
}

/* Ensure all audio track images in explore page are 16:9 */
.amaudio-explore .amaudio-card-media,
.amaudio-explore .amaudio-slide-media,
.amaudio-explore [class*="audio_image"],
.amaudio-explore [class*="track_image"],
.amaudio-explore [class*="track_media"] {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    overflow:hidden;
    display:block;
    background:#f1f5f9;
}

.amaudio-explore .amaudio-card-media img,
.amaudio-explore .amaudio-slide-media img,
.amaudio-explore [class*="audio_image"] img,
.amaudio-explore [class*="track_image"] img,
.amaudio-explore [class*="track_media"] img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Mobile slider responsiveness */
@media (max-width:900px) {
    .amaudio-slider {
        grid-template-columns:1fr;
        position:relative;
    }

    .amaudio-slider-control {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:20;
        background:rgba(255,255,255,0.95);
        box-shadow:0 4px 12px rgba(0,0,0,0.15);
    }

    .amaudio-slider-prev {
        left:8px;
    }

    .amaudio-slider-next {
        right:8px;
    }

    /* Mobile view:1 item visible */
    .amaudio-slider-track[data-mobile-items="1"] {
        grid-auto-columns:calc(100% - 32px);
    }

    /* Mobile view:1.5 items visible */
    .amaudio-slider-track[data-mobile-items="1.5"] {
        grid-auto-columns:calc(66.666% - 11px);
    }

    /* Mobile view:2 items visible */
    .amaudio-slider-track[data-mobile-items="2"] {
        grid-auto-columns:calc(50% - 8px);
    }

    .amaudio-slider-track {
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scroll-behavior:smooth;
    }

    .amaudio-slider-item {
        scroll-snap-align:start;
        flex-shrink:0;
    }

    .amaudio-charts-header {
        grid-template-columns:50px 1fr 90px;
        gap:12px;
        padding:10px 12px;
    }

    .amaudio-charts-row {
        grid-template-columns:50px 1fr 90px;
        gap:12px;
        padding:12px;
    }

    .amaudio-charts-trend {
        display:none;
    }

    .amaudio-charts-image {
        width:64px;
        height:64px;
    }

    .amaudio-charts-title {
        font-size:15px;
    }

    .amaudio-charts-meta {
        font-size:11px;
        gap:8px;
    }
}

@media (max-width:640px) {
    .amaudio-charts-section {
        padding:16px;
    }

    .amaudio-charts-header {
        grid-template-columns:40px 1fr;
        gap:8px;
    }

    .amaudio-charts-header-plays {
        display:none;
    }

    .amaudio-charts-row {
        grid-template-columns:40px 1fr;
        gap:8px;
        padding:10px;
    }

    .amaudio-charts-plays {
        display:none;
    }

    .amaudio-charts-image {
        width:56px;
        height:56px;
    }

    .amaudio-charts-title {
        font-size:14px;
    }

    .amaudio-charts-artist {
        font-size:13px;
    }

    .amaudio-charts-meta {
        font-size:10px;
        gap:6px;
    }
}

/* Explore Page Layout with Sidebar */
/* Hero and Sidebar Layout - Side by Side */
.amaudio-hero-sidebar-layout {
    display:grid;
    grid-template-columns:1fr 450px;
    gap:24px;
    align-items:start;
    margin-bottom:40px;
    contain:layout style;
    overflow:visible;
}

.amaudio-explore-left-column {
    display:flex;
    flex-direction:column;
    gap:24px;
    min-width:0;
}

.amaudio-explore-hero {
    position:relative;
    width:100%;
    height:500px;
    border-radius:16px;
    overflow:hidden;
    background:#0f172a;
}

.amaudio-explore-sidebar {
    position:sticky;
    top:20px;
    align-self:start;
    overflow-y:visible !important;
    overflow-x:hidden !important;
    max-height:none !important;
    height:auto !important;
    padding-right:0 !important;
    will-change:transform;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    perspective:1000px;
    -webkit-perspective:1000px;
}

/* Main Content Layout - Full Width Below Hero/Sidebar */
.amaudio-explore-layout {
    display:block;
    width:100%;
}

.amaudio-explore-main {
    width:100%;
    min-width:0;
}

.amaudio-explore-sidebar::-webkit-scrollbar {
    width:6px;
}

.amaudio-explore-sidebar::-webkit-scrollbar-track {
    background:#f1f5f9;
    border-radius:3px;
}

.amaudio-explore-sidebar::-webkit-scrollbar-thumb {
    background:#cbd5e1;
    border-radius:3px;
}

.amaudio-explore-sidebar::-webkit-scrollbar-thumb:hover {
    background:#94a3b8;
}

/* Sidebar Section */
.amaudio-sidebar-section {
    margin-bottom:24px;
}

.amaudio-sidebar-title {
    font-size:18px;
    font-weight:700;
    margin:0 0 16px;
    color:#0f172a;
    display:flex;
    align-items:center;
    gap:8px;
}

.amaudio-sidebar-title i {
    color:#2563eb;
}

.amaudio-sidebar-lists {
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* Sidebar List Card */
.amaudio-sidebar-list-card {
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    border:1px solid #e2e8f0;
    transition:all 0.3s ease;
}

.amaudio-sidebar-list-card:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    transform:translateY(-2px);
}

.amaudio-sidebar-list-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
    color:#ffffff;
}

.amaudio-sidebar-list-title {
    font-size:14px;
    font-weight:600;
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
    color:#ffffff;
}

.amaudio-sidebar-list-title i {
    font-size:16px;
}

.amaudio-sidebar-list-more {
    color:#ffffff;
    text-decoration:none;
    font-size:11px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:4px;
    transition:opacity 0.2s ease;
    opacity:0.9;
}

.amaudio-sidebar-list-more:hover {
    opacity:1;
}

.amaudio-sidebar-list-items {
    padding:12px 16px;
}

.amaudio-sidebar-list-item {
    display:flex;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid #f1f5f9;
    transition:background-color 0.2s ease;
}

.amaudio-sidebar-list-item:last-child {
    border-bottom:none;
}

.amaudio-sidebar-list-item:hover {
    background-color:#f8fafc;
}

.amaudio-sidebar-list-link {
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    width:100%;
}

.amaudio-sidebar-list-image {
    width:45px;
    height:45px;
    border-radius:6px;
    margin-right:12px;
    flex-shrink:0;
    object-fit:cover;
    background:#f1f5f9;
}

.amaudio-sidebar-list-info {
    flex:1;
    min-width:0;
}

.amaudio-sidebar-list-title-text {
    font-size:13px;
    font-weight:600;
    margin-bottom:3px;
    color:#0f172a;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.amaudio-sidebar-list-artist {
    font-size:11px;
    color:#64748b;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.amaudio-sidebar-list-stat {
    font-size:10px;
    color:#94a3b8;
    margin-left:4px;
}

/* Quick Lists Section (Discover More) - Short Lists - Legacy support */
.explore-quick-lists-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
    margin-top:20px;
}

.quick-list-card {
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    border:1px solid #e2e8f0;
    transition:all 0.3s ease;
}

.quick-list-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.quick-list-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
    color:#ffffff;
}

.quick-list-title {
    font-size:16px;
    font-weight:600;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffffff;
}

.quick-list-title i {
    font-size:18px;
}

.quick-list-more {
    color:#ffffff;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:5px;
    transition:opacity 0.2s ease;
}

.quick-list-more:hover {
    opacity:0.8;
}

.quick-list-items {
    padding:15px 20px;
}

.quick-list-item {
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
    transition:background-color 0.2s ease;
}

.quick-list-item:last-child {
    border-bottom:none;
}

.quick-list-item:hover {
    background-color:#f8fafc;
}

.quick-list-link {
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    width:100%;
}

.quick-list-image {
    width:50px;
    height:50px;
    border-radius:8px;
    margin-right:15px;
    flex-shrink:0;
    object-fit:cover;
    background:#f1f5f9;
}

.quick-list-info {
    flex:1;
    min-width:0;
}

.quick-list-audio-title {
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
    color:#0f172a;
    line-height:1.3;
}

.quick-list-artist {
    font-size:12px;
    color:#64748b;
    margin-bottom:2px;
}

.quick-list-stat {
    font-size:11px;
    color:#94a3b8;
    margin-left:6px;
}

/* Mobile Responsive */
@media (max-width:960px) {
    .amaudio-explore-layout {
        grid-template-columns:1fr;
        gap:20px;
    }

    .amaudio-explore-sidebar {
        position:static;
        max-height:none;
        overflow-y:visible;
    }

    .explore-quick-lists-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
}

@media (max-width:640px) {
    .quick-list-header {
        padding:12px 16px;
    }

    .quick-list-title {
        font-size:15px;
    }

    .quick-list-items {
        padding:12px 16px;
    }

    .quick-list-image {
        width:45px;
        height:45px;
        margin-right:12px;
    }

    .quick-list-audio-title {
        font-size:13px;
    }

    .quick-list-artist {
        font-size:11px;
    }
}

/* Big Hero Slider at Top */

.amaudio-hero-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
    pointer-events:none;
}

.amaudio-hero-slide.active {
    opacity:1;
    pointer-events:all;
}

.amaudio-hero-image-container {
    position:relative;
    width:100%;
    height:100%;
}

.amaudio-hero-image-container img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amaudio-hero-info-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:40px;
    background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 50%,transparent 100%);
    color:white;
}

.amaudio-hero-badge {
    display:inline-block;
    background:rgba(255,215,0,0.9);
    color:#1a1a1a;
    padding:8px 16px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:12px;
}

.amaudio-hero-title {
    font-size:36px;
    font-weight:700;
    margin:12px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
    line-height:1.2;
}

.amaudio-hero-artist {
    font-size:18px;
    margin:10px 0;
    opacity:0.95;
}

.amaudio-hero-artist-name {
    font-weight:600;
}

.amaudio-hero-genre {
    display:inline-block;
    background:rgba(255,255,255,0.2);
    padding:6px 14px;
    border-radius:16px;
    font-size:14px;
    margin:10px 0;
}

.amaudio-hero-actions {
    margin-top:16px;
}

.amaudio-hero-play-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#2563eb;
    color:white;
    padding:14px 32px;
    border-radius:24px;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    transition:all 0.3s ease;
}

.amaudio-hero-play-btn:hover {
    background:#1d4ed8;
    transform:scale(1.05);
}

.amaudio-hero-nav-dots {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

.amaudio-hero-dot {
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:all 0.3s ease;
}

.amaudio-hero-dot:hover,
.amaudio-hero-dot.active {
    background:white;
    width:32px;
    border-radius:6px;
}

/* Small Hero Sections in Sidebar */
.amaudio-sidebar-mini-hero {
    margin-bottom:24px;
    background:#ffffff;
    border-radius:12px;
    padding:16px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    border:1px solid #e2e8f0;
}

.amaudio-sidebar-mini-hero-container {
    position:relative;
    height:200px;
    overflow:hidden;
    border-radius:8px;
}

.amaudio-sidebar-mini-hero-image {
    position:relative;
    width:100%;
    height:100%;
    border-radius:8px;
    overflow:hidden;
}

.amaudio-sidebar-mini-hero-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amaudio-sidebar-mini-hero-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:16px;
    background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 50%,transparent 100%);
    color:white;
}

.amaudio-sidebar-mini-badge {
    display:inline-block;
    background:rgba(255,255,255,0.9);
    color:#1a1a1a;
    padding:4px 10px;
    border-radius:12px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:8px;
}

.amaudio-sidebar-mini-title {
    font-size:16px;
    font-weight:600;
    margin:8px 0 4px 0;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
    line-height:1.3;
}

.amaudio-sidebar-mini-artist {
    font-size:13px;
    margin:4px 0;
    opacity:0.9;
}

.amaudio-sidebar-mini-play-btn {
    position:absolute;
    top:12px;
    right:12px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
    transition:all 0.3s ease;
    opacity:0;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.amaudio-sidebar-mini-hero-image:hover .amaudio-sidebar-mini-play-btn {
    opacity:1;
    background:#2563eb;
    color:white;
    transform:scale(1.1);
}

/* Responsive Hero and Sidebar Layout */
@media (max-width:1200px) {
    .amaudio-hero-sidebar-layout {
        grid-template-columns:1fr 380px;
        gap:20px;
    }
}

@media (max-width:960px) {
    .amaudio-hero-sidebar-layout {
        grid-template-columns:1fr !important;
        gap:24px;
    }
    
    .amaudio-explore-hero {
        height:400px;
        margin-bottom:0;
    }
    
    .amaudio-explore-sidebar {
        position:relative !important;
        top:0 !important;
    }

    .amaudio-hero-title {
        font-size:28px;
    }

    .amaudio-hero-artist {
        font-size:16px;
    }

    .amaudio-hero-info-overlay {
        padding:30px 24px;
    }
}

@media (max-width:640px) {
    .amaudio-hero-sidebar-layout {
        gap:16px;
    }
    
    .amaudio-explore-hero {
        height:350px;
        margin-bottom:0;
    }

    .amaudio-hero-title {
        font-size:24px;
    }

    .amaudio-hero-artist {
        font-size:14px;
    }

    .amaudio-hero-info-overlay {
        padding:24px 20px;
    }

    .amaudio-hero-play-btn {
        padding:12px 24px;
        font-size:14px;
    }

    .amaudio-sidebar-mini-hero-container {
        height:180px;
    }

    .amaudio-sidebar-mini-title {
        font-size:14px;
    }

    .amaudio-sidebar-mini-artist {
        font-size:12px;
    }
}

/* modules/amAudio/css/explore_sliders.css */


/**
 * amAudio Explore Sliders CSS
 * Comprehensive slider styling for all slider types
 * Adapted from amVideo sliders for audio content
 * Author:The Arcitech 2026
 * Version:1.0.0
 */

/* ===============================================
   BASE SLIDER VARIABLES AND SHARED STYLES
   =============================================== */

:root {
    --jr-slider-border-radius:8px;
    --jr-slider-shadow:0 4px 12px rgba(0,0,0,0.1);
    --jr-slider-transition:all 0.3s ease;
    --jr-slider-primary:#ff0000;
    --jr-slider-secondary:#667eea;
    --jr-slider-accent:#764ba2;
}

.slider-section {
    margin-bottom:clamp(15px,5vw,40px);
    width:100%;
    box-sizing:border-box;
}

/* ===============================================
   TABBED SLIDER STYLES
   =============================================== */

.jr-slider-tabbed-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-tabbed-container h3 {
    font-size:clamp(1.4em,3.5vw,1.8em);
    font-weight:600;
    margin:0 0 clamp(20px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-tab-buttons {
    display:flex;
    justify-content:center;
    gap:clamp(5px,2vw,10px);
    margin-bottom:clamp(25px,5vw,35px);
    flex-wrap:wrap;
}

.jr-tab-btn {
    padding:clamp(10px,2.5vw,14px) clamp(20px,4vw,25px);
    background:#f8f9fa;
    border:2px solid #e9ecef;
    border-radius:var(--jr-slider-border-radius);
    color:#666;
    text-decoration:none;
    font-weight:500;
    font-size:clamp(14px,3vw,16px);
    transition:var(--jr-slider-transition);
    cursor:pointer;
    white-space:nowrap;
}

.jr-tab-btn:hover {
    background:#e9ecef;
    border-color:var(--jr-slider-primary);
    color:var(--jr-slider-primary);
}

.jr-tab-btn.active {
    background:var(--jr-slider-primary);
    border-color:var(--jr-slider-primary);
    color:white;
}

.jr-tab-panes {
    position:relative;
    min-height:300px;
}

.jr-tab-pane {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease;
}

.jr-tab-pane.active {
    opacity:1;
    visibility:visible;
    position:relative;
}

.jr-tab-content {
    display:block !important;
    padding:10px !important;
}

.jr-tab-content .amAudio_grid_container {
    gap:clamp(12px,3vw,18px);
}

.jr-tab-audio-card {
    background:white !important;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    margin:5px !important;
}

.jr-tab-audio-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.jr-tab-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-tab-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-tab-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-tab-audio-card:hover .jr-tab-play-overlay {
    opacity:1;
}

.jr-tab-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
}

.jr-tab-info {
    padding:clamp(15px,3vw,20px);
}

.jr-tab-title {
    font-size:clamp(16px,3.5vw,19px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-tab-creator {
    font-size:clamp(14px,2.5vw,15px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-tab-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(12px,2vw,13px);
    color:#888;
}

/* ===============================================
   MINI SLIDER STYLES
   =============================================== */

.jr-slider-mini-showcase {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(15px,4vw,25px);
    box-shadow:var(--jr-slider-shadow);
    transition:var(--jr-slider-transition);
}

/* Sidebar-specific mini slider styling */
.amaudio-sidebar-mini-slider {
    margin-bottom:20px;
    padding:15px;
    background:transparent;
    box-shadow:none;
}

.amaudio-sidebar-mini-slider:hover {
    transform:none;
    box-shadow:none;
}

.amaudio-sidebar-mini-slider .amaudio-sidebar-title {
    font-size:14px;
    margin:0 0 12px 0;
    padding:0;
}

.amaudio-sidebar-mini-slider .jr-mini-slider-container {
    background:#f8f9fa;
    border-radius:8px;
}

.amaudio-sidebar-mini-slider .jr-mini-audio-card {
    padding:10px;
    gap:10px;
}

.amaudio-sidebar-mini-slider .jr-mini-thumbnail {
    width:60px;
    height:45px;
    flex-shrink:0;
}

.amaudio-sidebar-mini-slider .jr-mini-info h5 {
    font-size:13px;
    margin:0 0 4px 0;
}

.amaudio-sidebar-mini-slider .jr-mini-info p {
    font-size:11px;
    margin:0 0 4px 0;
}

.amaudio-sidebar-mini-slider .jr-mini-stats {
    font-size:10px;
    gap:8px;
}

.jr-slider-mini-showcase:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.jr-slider-mini-showcase h4 {
    font-size:clamp(1.1em,3vw,1.3em);
    font-weight:600;
    margin:0 0 clamp(12px,3vw,18px) 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
}

.jr-mini-slider-container {
    position:relative;
    overflow:hidden;
    border-radius:var(--jr-slider-border-radius);
    background:#f8f9fa;
}

.jr-mini-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    transition:opacity 0.4s ease;
    padding:clamp(12px,3vw,18px);
}

.jr-mini-slide.active {
    opacity:1;
    position:relative;
}

.jr-mini-audio-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    display:flex;
    gap:clamp(12px,3vw,18px);
    align-items:center;
    padding:clamp(12px,3vw,18px);
}

.jr-mini-audio-card:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.jr-mini-thumbnail {
    width:clamp(80px,15vw,120px);
    height:clamp(60px,11vw,90px);
    border-radius:6px;
    overflow:hidden;
    background:#f0f0f0;
    flex-shrink:0;
    position:relative;
}

.jr-mini-thumbnail img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-mini-duration {
    position:absolute;
    bottom:4px;
    right:4px;
    background:rgba(0,0,0,0.8);
    color:white;
    padding:2px 6px;
    border-radius:3px;
    font-size:clamp(10px,2vw,12px);
    font-weight:600;
}

.jr-mini-info {
    flex:1;
    min-width:0;
}

.jr-mini-info h5 {
    font-size:clamp(14px,3vw,16px);
    font-weight:600;
    margin:0 0 4px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-mini-info p {
    font-size:clamp(12px,2.5vw,14px);
    color:#666;
    margin:0 0 6px 0;
    line-height:1.4;
}

.jr-mini-stats {
    display:flex;
    gap:12px;
    font-size:clamp(11px,2vw,12px);
    color:#888;
}

.jr-mini-nav {
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    padding:0 clamp(8px,2vw,12px);
    pointer-events:none;
}

.jr-mini-prev-btn,
.jr-mini-next-btn {
    width:clamp(35px,7vw,45px);
    height:clamp(35px,7vw,45px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(14px,3vw,16px);
    pointer-events:all;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.jr-mini-prev-btn:hover,
.jr-mini-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.1);
}

/* ===============================================
   CAROUSEL SLIDER STYLES
   =============================================== */

.amaudio-carousel-showcase {
    margin:clamp(20px,6vw,40px) 0;
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.amaudio-carousel-showcase h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.amaudio-carousel-container {
    position:relative;
    overflow:hidden;
    border-radius:var(--jr-slider-border-radius);
}

.amaudio-carousel-wrapper {
    display:flex;
    gap:clamp(15px,3vw,20px);
    transition:transform 0.4s ease;
    padding:clamp(15px,3vw,20px);
}

.amaudio-carousel-item {
    flex:0 0 clamp(250px,22vw,320px);
    transition:var(--jr-slider-transition);
    min-width:0;
}

.amaudio-carousel-item:hover {
    transform:scale(1.02);
}

.amaudio-carousel-audio-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
}

.amaudio-carousel-audio-card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    transform:translateY(-3px);
}

.amaudio-carousel-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
    display:block;
}

.amaudio-carousel-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    visibility:visible;
    opacity:1;
}

.amaudio-carousel-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:2;
    pointer-events:none;
}

.amaudio-carousel-audio-card:hover .amaudio-carousel-play-overlay {
    opacity:1;
}

.amaudio-carousel-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
    z-index:3;
}

.amaudio-carousel-info {
    padding:clamp(15px,3vw,20px);
}

.amaudio-carousel-title {
    font-size:clamp(15px,3.5vw,18px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.amaudio-carousel-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#666;
    margin:0 0 8px 0;
}

.amaudio-carousel-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(11px,2vw,12px);
    color:#888;
}

.amaudio-carousel-prev-btn,
.amaudio-carousel-next-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    z-index:10;
}

.amaudio-carousel-prev-btn {
    left:clamp(10px,2vw,15px);
}

.amaudio-carousel-next-btn {
    right:clamp(10px,2vw,15px);
}

.amaudio-carousel-prev-btn:hover,
.amaudio-carousel-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:translateY(-50%) scale(1.1);
}

/* ===============================================
   VERTICAL SLIDER STYLES
   =============================================== */

.jr-slider-vertical-container {
    position:relative;
    width:100%;
    height:500px;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    transition:var(--jr-slider-transition);
}

.jr-vertical-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.jr-vertical-slide.active {
    opacity:1;
}

.jr-vertical-audio-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
    max-width:400px;
    margin:0 auto;
}

.jr-vertical-audio-card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    transform:translateY(-3px);
}

.jr-vertical-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-vertical-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-vertical-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-vertical-audio-card:hover .jr-vertical-play-overlay {
    opacity:1;
}

.jr-vertical-info {
    padding:clamp(15px,3vw,20px);
}

.jr-vertical-title {
    font-size:clamp(15px,3.5vw,18px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-vertical-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-vertical-stats {
    font-size:clamp(12px,2vw,13px);
    color:#888;
    margin:0 0 12px 0;
}

.jr-vertical-nav-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    z-index:10;
}

.jr-vertical-nav-btn:first-child {
    left:clamp(15px,3vw,25px);
}

.jr-vertical-nav-btn:last-child {
    right:clamp(15px,3vw,25px);
}

.jr-vertical-nav-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:translateY(-50%) scale(1.1);
}

.jr-vertical-indicators {
    position:absolute;
    right:clamp(15px,3vw,25px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.jr-vertical-indicator {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-vertical-indicator.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-vertical-indicator:hover {
    background:rgba(255,255,255,0.8);
}

/* ===============================================
   INTERACTIVE SLIDER STYLES
   =============================================== */

.jr-slider-interactive-container {
    position:relative;
    width:100%;
    padding-top:clamp(40%,56.25%,60%);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    transition:var(--jr-slider-transition);
}

.jr-interactive-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.jr-interactive-slide.active {
    opacity:1;
}

.jr-interactive-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
    max-width:600px;
    margin:0 auto;
}

.jr-interactive-card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.jr-interactive-main {
    display:flex;
    flex-direction:column;
    gap:clamp(15px,3vw,20px);
    padding:clamp(20px,4vw,25px);
}

.jr-interactive-thumbnail {
    position:relative;
    width:100%;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    background:#f0f0f0;
}

.jr-interactive-thumbnail img {
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
}

.jr-interactive-play-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(60px,12vw,80px);
    height:clamp(60px,12vw,80px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(24px,5vw,32px);
    opacity:0;
    transition:var(--jr-slider-transition);
    border:none;
    cursor:pointer;
}

.jr-interactive-card:hover .jr-interactive-play-btn {
    opacity:1;
}

.jr-interactive-details {
    flex:1;
}

.jr-interactive-title {
    font-size:clamp(20px,4vw,24px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-interactive-creator {
    font-size:clamp(16px,3vw,18px);
    color:#666;
    margin:0 0 12px 0;
}

.jr-interactive-stats {
    margin-bottom:15px;
}

.jr-stat-item {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:clamp(14px,2.5vw,16px);
    color:#888;
}

.jr-stat-item i {
    font-size:clamp(16px,3vw,18px);
}

.jr-interactive-actions {
    display:flex;
    gap:clamp(8px,2vw,12px);
    flex-wrap:wrap;
    margin-top:15px;
}

.jr-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:clamp(8px,2vw,12px) clamp(12px,3vw,16px);
    background:#f8f9fa;
    color:#666;
    text-decoration:none;
    border-radius:20px;
    font-weight:500;
    font-size:clamp(13px,2.5vw,15px);
    transition:var(--jr-slider-transition);
    border:1px solid #e9ecef;
    cursor:pointer;
}

.jr-action-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    border-color:var(--jr-slider-primary);
    transform:translateY(-1px);
}

.jr-action-btn i {
    font-size:clamp(14px,3vw,16px);
}

.jr-interactive-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:clamp(20px,4vw,25px);
    padding:0 clamp(10px,2vw,15px);
}

.jr-interactive-nav-btn {
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:#f8f9fa;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.jr-interactive-nav-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.05);
}

.jr-interactive-dots {
    display:flex;
    gap:8px;
    align-items:center;
}

.jr-interactive-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-interactive-dot.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-interactive-dot:hover {
    background:#bbb;
}

/* ===============================================
   MASONRY GRID SLIDER STYLES
   =============================================== */

.jr-slider-masonry-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-masonry-container h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-masonry-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:clamp(20px,4vw,25px);
}

.jr-masonry-item {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    animation:jrMasonryFadeIn 0.6s ease forwards;
    opacity:0;
}

.jr-slider-masonry-container.jr-masonry-loaded .jr-masonry-item {
    animation-play-state:running;
}

.jr-masonry-item:hover,
.jr-masonry-item.jr-masonry-hover {
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.jr-masonry-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-masonry-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-masonry-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-masonry-item:hover .jr-masonry-play-overlay {
    opacity:1;
}

.jr-masonry-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
}

.jr-masonry-info {
    padding:clamp(15px,3vw,20px);
}

.jr-masonry-title {
    font-size:clamp(16px,3.5vw,19px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-masonry-creator {
    font-size:clamp(14px,2.5vw,15px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-masonry-description {
    font-size:clamp(13px,2.5vw,14px);
    color:#888;
    margin:0 0 10px 0;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-masonry-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(12px,2vw,13px);
    color:#888;
}

@keyframes jrMasonryFadeIn {
    to {
        opacity:1;
        transform:translateY(0);
    }
    from {
        opacity:0;
        transform:translateY(20px);
    }
}

/* ===============================================
   TIMELINE SLIDER STYLES
   =============================================== */

.jr-slider-timeline-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-timeline-container h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-timeline-controls {
    display:flex;
    justify-content:center;
    gap:clamp(10px,2.5vw,15px);
    margin-bottom:clamp(25px,5vw,35px);
    flex-wrap:wrap;
}

.jr-timeline-period {
    padding:clamp(8px,2vw,12px) clamp(16px,4vw,20px);
    background:#f8f9fa;
    border:2px solid #e9ecef;
    border-radius:var(--jr-slider-border-radius);
    color:#666;
    text-decoration:none;
    font-weight:500;
    font-size:clamp(14px,3vw,16px);
    transition:var(--jr-slider-transition);
    cursor:pointer;
}

.jr-timeline-period:hover {
    background:#e9ecef;
    border-color:var(--jr-slider-primary);
    color:var(--jr-slider-primary);
}

.jr-timeline-period.active {
    background:var(--jr-slider-primary);
    border-color:var(--jr-slider-primary);
    color:white;
}

.jr-timeline-items {
    position:relative;
    min-height:400px;
}

.jr-timeline-item {
    position:relative;
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,4vw,25px);
    margin-bottom:clamp(20px,4vw,25px);
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    border-left:4px solid var(--jr-slider-primary);
}

.jr-timeline-card {
    display:flex;
    gap:clamp(15px,3vw,20px);
    align-items:flex-start;
}

.jr-timeline-image {
    flex-shrink:0;
    width:clamp(80px,15vw,120px);
    height:clamp(80px,15vw,120px);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    background:#f0f0f0;
}

.jr-timeline-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-timeline-info {
    flex:1;
    min-width:0;
}

.jr-timeline-item:hover {
    transform:translateX(5px);
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
}

.jr-timeline-item:before {
    content:'';
    position:absolute;
    left:-12px;
    top:20px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--jr-slider-primary);
}

.jr-timeline-date {
    font-size:clamp(12px,2.5vw,14px);
    color:#888;
    margin-bottom:8px;
    font-weight:500;
}

.jr-timeline-title {
    font-size:clamp(18px,4vw,22px);
    font-weight:600;
    margin:0 0 10px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-timeline-description {
    font-size:clamp(14px,3vw,16px);
    color:#666;
    margin:0 0 12px 0;
    line-height:1.5;
}

.jr-timeline-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#888;
    margin:0;
}

.jr-timeline-stats {
    display:flex;
    gap:15px;
    font-size:clamp(12px,2vw,13px);
    color:#888;
    margin-top:10px;
}

/* ===============================================
   THUMBNAIL STRIP SLIDER STYLES
   =============================================== */

.jr-slider-thumbnail-showcase {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-thumbnail-showcase h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-thumbnail-main-container {
    margin-bottom:clamp(15px,4vw,20px);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.jr-thumbnail-main {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-thumbnail-main img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-thumbnail-main-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(20px,5vw,30px);
    background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);
    color:white;
}

.jr-thumbnail-main-overlay h4 {
    font-size:clamp(20px,5vw,28px);
    font-weight:700;
    margin:0 0 8px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.jr-thumbnail-main-overlay p {
    font-size:clamp(14px,3vw,16px);
    margin:0;
    opacity:0.9;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.jr-thumbnail-strip {
    display:flex;
    gap:clamp(8px,2vw,12px);
    overflow-x:auto;
    padding:clamp(10px,2.5vw,15px);
    scrollbar-width:thin;
    scrollbar-color:#ccc transparent;
}

.jr-thumbnail-strip::-webkit-scrollbar {
    height:4px;
}

.jr-thumbnail-strip::-webkit-scrollbar-track {
    background:#f1f1f1;
    border-radius:2px;
}

.jr-thumbnail-strip::-webkit-scrollbar-thumb {
    background:#ccc;
    border-radius:2px;
}

.jr-thumbnail-strip::-webkit-scrollbar-thumb:hover {
    background:#999;
}

.jr-thumbnail-item {
    flex:0 0 clamp(120px,18vw,160px);
    position:relative;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    opacity:0.7;
}

.jr-thumbnail-item:hover {
    opacity:1;
    transform:scale(1.05);
}

.jr-thumbnail-item.active {
    opacity:1;
    border:3px solid var(--jr-slider-primary);
}

.jr-thumbnail-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

@media (max-width:1200px) {
    .amaudio-carousel-item {
        flex:0 0 clamp(220px,20vw,280px);
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    }
}

@media (max-width:992px) {
    .amaudio-carousel-item {
        flex:0 0 240px;
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }
}

@media (max-width:768px) {
    .jr-tab-buttons {
        gap:5px;
    }

    .jr-tab-btn {
        padding:8px 16px;
        font-size:14px;
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:15px;
    }

    .jr-vertical-nav-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-interactive-nav {
        padding:0 5px;
    }

    .jr-interactive-nav-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-timeline-controls {
        gap:8px;
    }

    .jr-timeline-period {
        padding:8px 12px;
        font-size:14px;
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
        gap:15px;
    }
}

@media (max-width:480px) {
    .jr-tab-content {
        grid-template-columns:1fr;
        gap:12px;
    }

    .jr-timeline-item {
        padding:15px;
        margin-bottom:15px;
    }

    .jr-masonry-grid {
        grid-template-columns:1fr;
        gap:12px;
    }
}


/* modules/amAudio/css/upload_select.css */


/* amAudio upload type selection */
.amaudio-upload-select .amaudio-upload-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    margin-top:24px;
}

.amaudio-upload-card {
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:20px;
    text-decoration:none;
    color:#0f172a;
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#fff;
}

.amaudio-upload-icon {
    width:48px;
    height:48px;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.amaudio-upload-info h3 {
    margin:0 0 6px;
}

.amaudio-upload-info p {
    margin:0;
    color:#64748b;
}

.amaudio-upload-arrow {
    margin-left:auto;
    color:#2563eb;
    align-self:center;
}


/* modules/amBattles/css/design_tokens.css */


/**
 * amBattles Design System - Design Tokens
 * 
 * Comprehensive design system with consistent colors,typography,spacing,
 * shadows,and animations for modern,professional UI across all pages.
 * 
 * @package amBattles
 * @copyright 2026 The Arcitech
 */

/* ============================================================================
   COLOR PALETTE
   ============================================================================ */

/* ===== LIGHT THEME (Default) ===== */
:root,[data-theme="light"] {
    /* Primary Colors - Battle/Action Colors */
    --ambattles-primary:#dc3545;
    --ambattles-primary-dark:#c82333;
    --ambattles-primary-light:#e4606d;
    --ambattles-primary-lighter:#f8d7da;

    /* Secondary Colors - Support Actions */
    --ambattles-secondary:#6c757d;
    --ambattles-secondary-dark:#545b62;
    --ambattles-secondary-light:#a8adb3;

    /* Success - Wins,Positive Actions */
    --ambattles-success:#28a745;
    --ambattles-success-dark:#218838;
    --ambattles-success-light:#6fc788;
    --ambattles-success-lighter:#d4edda;

    /* Info - Information,Stats */
    --ambattles-info:#17a2b8;
    --ambattles-info-dark:#117a8b;
    --ambattles-info-light:#5dbbcc;
    --ambattles-info-lighter:#d1ecf1;

    /* Warning - Pending,Attention */
    --ambattles-warning:#ffc107;
    --ambattles-warning-dark:#e0a800;
    --ambattles-warning-light:#ffd34e;
    --ambattles-warning-lighter:#fff3cd;

    /* Danger - Losses,Errors */
    --ambattles-danger:#dc3545;
    --ambattles-danger-dark:#c82333;
    --ambattles-danger-light:#e4606d;
    --ambattles-danger-lighter:#f8d7da;

    /* Background Colors */
    --ambattles-bg-primary:#ffffff;
    --ambattles-bg-secondary:#f8f9fa;
    --ambattles-bg-tertiary:#e9ecef;
    --ambattles-bg-hover:#f8f9fa;
    --ambattles-bg-active:#e9ecef;

    /* Text Colors */
    --ambattles-text-primary:#212529;
    --ambattles-text-secondary:#6c757d;
    --ambattles-text-muted:#868e96;
    --ambattles-text-inverse:#ffffff;

    /* Border Colors */
    --ambattles-border:#dee2e6;
    --ambattles-border-light:#e9ecef;
    --ambattles-border-dark:#adb5bd;

    /* Selected/Active UI (per preference:black selected) */
    --ambattles-selected-bg:#1a1a1a;
    --ambattles-selected-text:#ffffff;
    --ambattles-selected-border:#1a1a1a;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* Primary Colors - Same for dark theme */
    --ambattles-primary:#dc3545;
    --ambattles-primary-dark:#c82333;
    --ambattles-primary-light:#e4606d;
    --ambattles-primary-lighter:#f8d7da;

    /* Secondary Colors */
    --ambattles-secondary:#6c757d;
    --ambattles-secondary-dark:#545b62;
    --ambattles-secondary-light:#a8adb3;

    /* Success */
    --ambattles-success:#28a745;
    --ambattles-success-dark:#218838;
    --ambattles-success-light:#6fc788;
    --ambattles-success-lighter:#d4edda;

    /* Info */
    --ambattles-info:#17a2b8;
    --ambattles-info-dark:#117a8b;
    --ambattles-info-light:#5dbbcc;
    --ambattles-info-lighter:#d1ecf1;

    /* Warning */
    --ambattles-warning:#ffc107;
    --ambattles-warning-dark:#e0a800;
    --ambattles-warning-light:#ffd34e;
    --ambattles-warning-lighter:#fff3cd;

    /* Danger */
    --ambattles-danger:#dc3545;
    --ambattles-danger-dark:#c82333;
    --ambattles-danger-light:#e4606d;
    --ambattles-danger-lighter:#f8d7da;

    /* Dark Background Colors */
    --ambattles-bg-primary:#1a1a1a;
    --ambattles-bg-secondary:#2d2d2d;
    --ambattles-bg-tertiary:#404040;
    --ambattles-bg-hover:#333333;
    --ambattles-bg-active:#404040;

    /* Dark Text Colors */
    --ambattles-text-primary:#ffffff;
    --ambattles-text-secondary:#cccccc;
    --ambattles-text-muted:#888888;
    --ambattles-text-inverse:#1a1a1a;

    /* Dark Border Colors */
    --ambattles-border:#404040;
    --ambattles-border-light:#555555;
    --ambattles-border-dark:#333333;

    /* Selected/Active UI (per preference:black selected) */
    --ambattles-selected-bg:#1a1a1a;
    --ambattles-selected-text:#ffffff;
    --ambattles-selected-border:#1a1a1a;
}

/* ===== COLOR SCHEME VARIATIONS ===== */

/* Purple Theme */
[data-color-scheme="purple"] {
    --ambattles-primary:#6f42c1;
    --ambattles-primary-dark:#5a32a3;
    --ambattles-primary-light:#8b5cf6;
    --ambattles-primary-lighter:#e9d5ff;
}

/* Green Theme */
[data-color-scheme="green"] {
    --ambattles-primary:#198754;
    --ambattles-primary-dark:#146c43;
    --ambattles-primary-light:#20c997;
    --ambattles-primary-lighter:#d1e7dd;
}

/* Orange Theme */
[data-color-scheme="orange"] {
    --ambattles-primary:#fd7e14;
    --ambattles-primary-dark:#e8590c;
    --ambattles-primary-light:#fd9a4a;
    --ambattles-primary-lighter:#ffe5d0;
}

/* Teal Theme */
[data-color-scheme="teal"] {
    --ambattles-primary:#20c997;
    --ambattles-primary-dark:#17a2b8;
    --ambattles-primary-light:#51cf66;
    --ambattles-primary-lighter:#d1ecf1;
}
    
    /* Neutral/Grayscale */
    --ambattles-white:#ffffff;
    --ambattles-gray-50:#f8f9fa;
    --ambattles-gray-100:#e9ecef;
    --ambattles-gray-200:#dee2e6;
    --ambattles-gray-300:#ced4da;
    --ambattles-gray-400:#adb5bd;
    --ambattles-gray-500:#6c757d;
    --ambattles-gray-600:#495057;
    --ambattles-gray-700:#343a40;
    --ambattles-gray-800:#212529;
    --ambattles-gray-900:#0d0f12;
    --ambattles-black:#000000;
    
    /* Semantic Colors */
    --ambattles-background:#f8f9fa;
    --ambattles-surface:#ffffff;
    --ambattles-surface-hover:#f8f9fa;
    --ambattles-border:#dee2e6;
    --ambattles-border-light:#e9ecef;
    --ambattles-text-primary:#212529;
    --ambattles-text-secondary:#6c757d;
    --ambattles-text-muted:#adb5bd;
    --ambattles-text-on-primary:#ffffff;
    
    /* Special Colors */
    --ambattles-trending:#ff6b35;
    --ambattles-featured:#7b2cbf;
    --ambattles-badge-bronze:#cd7f32;
    --ambattles-badge-silver:#c0c0c0;
    --ambattles-badge-gold:#ffd700;
    --ambattles-badge-platinum:#e5e4e2;
    --ambattles-badge-diamond:#b9f2ff;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

:root {
    /* Font Families */
    --ambattles-font-primary:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --ambattles-font-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --ambattles-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    
    /* Font Sizes */
    --ambattles-font-size-xs:0.75rem;      /* 12px */
    --ambattles-font-size-sm:0.875rem;     /* 14px */
    --ambattles-font-size-base:1rem;       /* 16px */
    --ambattles-font-size-md:1.125rem;     /* 18px */
    --ambattles-font-size-lg:1.25rem;      /* 20px */
    --ambattles-font-size-xl:1.5rem;       /* 24px */
    --ambattles-font-size-2xl:1.875rem;    /* 30px */
    --ambattles-font-size-3xl:2.25rem;     /* 36px */
    --ambattles-font-size-4xl:3rem;        /* 48px */
    
    /* Line Heights */
    --ambattles-line-height-tight:1.25;
    --ambattles-line-height-normal:1.5;
    --ambattles-line-height-relaxed:1.75;
    
    /* Font Weights */
    --ambattles-font-weight-light:300;
    --ambattles-font-weight-normal:400;
    --ambattles-font-weight-medium:500;
    --ambattles-font-weight-semibold:600;
    --ambattles-font-weight-bold:700;
    --ambattles-font-weight-extrabold:800;
}

/* ============================================================================
   SPACING SYSTEM (4px base unit)
   ============================================================================ */

:root {
    --ambattles-space-0:0;
    --ambattles-space-1:0.25rem;    /* 4px */
    --ambattles-space-2:0.5rem;     /* 8px */
    --ambattles-space-3:0.75rem;    /* 12px */
    --ambattles-space-4:1rem;       /* 16px */
    --ambattles-space-5:1.25rem;    /* 20px */
    --ambattles-space-6:1.5rem;     /* 24px */
    --ambattles-space-8:2rem;       /* 32px */
    --ambattles-space-10:2.5rem;    /* 40px */
    --ambattles-space-12:3rem;      /* 48px */
    --ambattles-space-16:4rem;      /* 64px */
    --ambattles-space-20:5rem;      /* 80px */
    --ambattles-space-24:6rem;      /* 96px */
}

/* ============================================================================
   BORDER RADIUS
   ============================================================================ */

:root {
    --ambattles-radius-none:0;
    --ambattles-radius-sm:0.125rem;    /* 2px */
    --ambattles-radius-base:0.25rem;   /* 4px */
    --ambattles-radius-md:0.375rem;    /* 6px */
    --ambattles-radius-lg:0.5rem;      /* 8px */
    --ambattles-radius-xl:0.75rem;     /* 12px */
    --ambattles-radius-2xl:1rem;       /* 16px */
    --ambattles-radius-full:9999px;    /* Pill shape */
}

/* ============================================================================
   SHADOWS & ELEVATION
   ============================================================================ */

:root {
    --ambattles-shadow-xs:0 1px 2px rgba(0,0,0,0.05);
    --ambattles-shadow-sm:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);
    --ambattles-shadow-base:0 4px 6px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06);
    --ambattles-shadow-md:0 10px 15px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.05);
    --ambattles-shadow-lg:0 20px 25px rgba(0,0,0,0.1),0 10px 10px rgba(0,0,0,0.04);
    --ambattles-shadow-xl:0 25px 50px rgba(0,0,0,0.15);
    --ambattles-shadow-2xl:0 35px 60px rgba(0,0,0,0.2);
    --ambattles-shadow-inner:inset 0 2px 4px rgba(0,0,0,0.06);
}

/* ============================================================================
   TRANSITIONS & ANIMATIONS
   ============================================================================ */

:root {
    /* Transition Durations */
    --ambattles-duration-fast:150ms;
    --ambattles-duration-base:200ms;
    --ambattles-duration-slow:300ms;
    --ambattles-duration-slower:500ms;
    
    /* Easing Functions */
    --ambattles-ease-linear:linear;
    --ambattles-ease-in:cubic-bezier(0.4,0,1,1);
    --ambattles-ease-out:cubic-bezier(0,0,0.2,1);
    --ambattles-ease-in-out:cubic-bezier(0.4,0,0.2,1);
    --ambattles-ease-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);
    
    /* Common Transitions */
    --ambattles-transition-all:all var(--ambattles-duration-base) var(--ambattles-ease-in-out);
    --ambattles-transition-colors:color var(--ambattles-duration-base) var(--ambattles-ease-in-out),
                                   background-color var(--ambattles-duration-base) var(--ambattles-ease-in-out),
                                   border-color var(--ambattles-duration-base) var(--ambattles-ease-in-out);
    --ambattles-transition-transform:transform var(--ambattles-duration-base) var(--ambattles-ease-in-out);
    --ambattles-transition-opacity:opacity var(--ambattles-duration-base) var(--ambattles-ease-in-out);
}

/* ============================================================================
   Z-INDEX LAYERS
   ============================================================================ */

:root {
    --ambattles-z-base:0;
    --ambattles-z-dropdown:1000;
    --ambattles-z-sticky:1020;
    --ambattles-z-fixed:1030;
    --ambattles-z-modal-backdrop:1040;
    --ambattles-z-modal:1050;
    --ambattles-z-popover:1060;
    --ambattles-z-tooltip:1070;
    --ambattles-z-notification:1080;
    --ambattles-z-debug:9999;
}

/* ============================================================================
   BREAKPOINTS (for reference in media queries)
   ============================================================================ */

:root {
    --ambattles-breakpoint-xs:0;
    --ambattles-breakpoint-sm:576px;
    --ambattles-breakpoint-md:768px;
    --ambattles-breakpoint-lg:992px;
    --ambattles-breakpoint-xl:1200px;
    --ambattles-breakpoint-xxl:1400px;
}

/* ============================================================================
   UTILITY CLASSES USING DESIGN TOKENS
   ============================================================================ */

/* Spacing Utilities */
.ambattles-mt-0 { margin-top:var(--ambattles-space-0) !important; }
.ambattles-mt-2 { margin-top:var(--ambattles-space-2) !important; }
.ambattles-mt-4 { margin-top:var(--ambattles-space-4) !important; }
.ambattles-mt-6 { margin-top:var(--ambattles-space-6) !important; }
.ambattles-mt-8 { margin-top:var(--ambattles-space-8) !important; }

.ambattles-mb-0 { margin-bottom:var(--ambattles-space-0) !important; }
.ambattles-mb-2 { margin-bottom:var(--ambattles-space-2) !important; }
.ambattles-mb-4 { margin-bottom:var(--ambattles-space-4) !important; }
.ambattles-mb-6 { margin-bottom:var(--ambattles-space-6) !important; }
.ambattles-mb-8 { margin-bottom:var(--ambattles-space-8) !important; }

.ambattles-p-2 { padding:var(--ambattles-space-2) !important; }
.ambattles-p-4 { padding:var(--ambattles-space-4) !important; }
.ambattles-p-6 { padding:var(--ambattles-space-6) !important; }
.ambattles-p-8 { padding:var(--ambattles-space-8) !important; }

/* Text Utilities */
.ambattles-text-primary { color:var(--ambattles-text-primary) !important; }
.ambattles-text-secondary { color:var(--ambattles-text-secondary) !important; }
.ambattles-text-muted { color:var(--ambattles-text-muted) !important; }
.ambattles-text-success { color:var(--ambattles-success) !important; }
.ambattles-text-danger { color:var(--ambattles-danger) !important; }
.ambattles-text-warning { color:var(--ambattles-warning) !important; }
.ambattles-text-info { color:var(--ambattles-info) !important; }

/* Background Utilities */
.ambattles-bg-primary { background-color:var(--ambattles-primary) !important; }
.ambattles-bg-success { background-color:var(--ambattles-success) !important; }
.ambattles-bg-danger { background-color:var(--ambattles-danger) !important; }
.ambattles-bg-warning { background-color:var(--ambattles-warning) !important; }
.ambattles-bg-info { background-color:var(--ambattles-info) !important; }
.ambattles-bg-light { background-color:var(--ambattles-gray-100) !important; }
.ambattles-bg-white { background-color:var(--ambattles-white) !important; }

/* Shadow Utilities */
.ambattles-shadow-sm { box-shadow:var(--ambattles-shadow-sm) !important; }
.ambattles-shadow { box-shadow:var(--ambattles-shadow-base) !important; }
.ambattles-shadow-md { box-shadow:var(--ambattles-shadow-md) !important; }
.ambattles-shadow-lg { box-shadow:var(--ambattles-shadow-lg) !important; }
.ambattles-shadow-none { box-shadow:none !important; }

/* Border Radius Utilities */
.ambattles-rounded-none { border-radius:var(--ambattles-radius-none) !important; }
.ambattles-rounded-sm { border-radius:var(--ambattles-radius-sm) !important; }
.ambattles-rounded { border-radius:var(--ambattles-radius-base) !important; }
.ambattles-rounded-md { border-radius:var(--ambattles-radius-md) !important; }
.ambattles-rounded-lg { border-radius:var(--ambattles-radius-lg) !important; }
.ambattles-rounded-full { border-radius:var(--ambattles-radius-full) !important; }

/* Transition Utilities */
.ambattles-transition-all { transition:var(--ambattles-transition-all) !important; }
.ambattles-transition-colors { transition:var(--ambattles-transition-colors) !important; }
.ambattles-transition-transform { transition:var(--ambattles-transition-transform) !important; }

/* ============================================================================
   MOBILE-FIRST RESPONSIVE SYSTEM
   ============================================================================ */

:root {
    /* Mobile-first breakpoints */
    --ambattles-mobile-max:767px;
    --ambattles-tablet-min:768px;
    --ambattles-tablet-max:991px;
    --ambattles-desktop-min:992px;
    --ambattles-desktop-max:1199px;
    --ambattles-wide-min:1200px;
}

/* Mobile-first utilities */
@media (max-width:767px) {
    .ambattles-mobile-hidden { display:none !important; }
    .ambattles-mobile-full { width:100% !important; }
    .ambattles-mobile-text-center { text-align:center !important; }
    .ambattles-mobile-stack { flex-direction:column !important; }
}

@media (min-width:768px) {
    .ambattles-tablet-hidden { display:none !important; }
}

@media (min-width:992px) {
    .ambattles-desktop-hidden { display:none !important; }
}

/* ============================================================================
   SWIPE & HORIZONTAL SCROLL SYSTEM
   ============================================================================ */

/* Horizontal scroll containers */
.ambattles-scroll-x {
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style:none; /* IE/Edge */
}

.ambattles-scroll-x::-webkit-scrollbar {
    display:none; /* Chrome/Safari */
}

/* Scroll snap for tab-like navigation */
.ambattles-scroll-snap {
    scroll-snap-type:x mandatory;
}

.ambattles-scroll-snap > * {
    scroll-snap-align:start;
    flex-shrink:0;
}

/* Swipe-able card rails */
.ambattles-card-rail {
    display:flex;
    gap:var(--ambattles-space-4);
    padding:var(--ambattles-space-2);
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
}

.ambattles-card-rail-item {
    flex-shrink:0;
    scroll-snap-align:start;
    min-width:280px; /* Card minimum width */
}

/* ============================================================================
   COMPONENT BASE STYLES USING TOKENS
   ============================================================================ */

/* ===== BUTTONS ===== */
.ambattles-btn {
    font-family:var(--ambattles-font-primary);
    font-size:var(--ambattles-font-size-base);
    font-weight:var(--ambattles-font-weight-medium);
    padding:var(--ambattles-space-3) var(--ambattles-space-6); /* Larger touch targets */
    border-radius:var(--ambattles-radius-md);
    border:2px solid transparent;
    transition:var(--ambattles-transition-colors);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--ambattles-space-2);
    min-height:44px; /* Minimum touch target */
    text-decoration:none;
    position:relative;
    outline:none;
}

/* Focus states for accessibility */
.ambattles-btn:focus-visible {
    outline:2px solid var(--ambattles-primary);
    outline-offset:2px;
}

/* Button variants */
.ambattles-btn-primary {
    background:var(--ambattles-primary);
    color:var(--ambattles-text-on-primary);
    border-color:var(--ambattles-primary);
}

.ambattles-btn-primary:hover {
    background:var(--ambattles-primary-dark);
    border-color:var(--ambattles-primary-dark);
    transform:translateY(-1px);
}

.ambattles-btn-secondary {
    background:var(--ambattles-surface);
    color:var(--ambattles-text-primary);
    border-color:var(--ambattles-border);
}

.ambattles-btn-secondary:hover {
    background:var(--ambattles-surface-hover);
    border-color:var(--ambattles-primary);
}

.ambattles-btn-success {
    background:var(--ambattles-success);
    color:white;
    border-color:var(--ambattles-success);
}

.ambattles-btn-danger {
    background:var(--ambattles-danger);
    color:white;
    border-color:var(--ambattles-danger);
}

.ambattles-btn-ghost {
    background:transparent;
    color:var(--ambattles-text-secondary);
    border-color:transparent;
}

.ambattles-btn-ghost:hover {
    background:var(--ambattles-surface-hover);
    color:var(--ambattles-text-primary);
}

/* Button sizes */
.ambattles-btn-sm {
    padding:var(--ambattles-space-2) var(--ambattles-space-4);
    font-size:var(--ambattles-font-size-sm);
    min-height:36px;
}

.ambattles-btn-lg {
    padding:var(--ambattles-space-4) var(--ambattles-space-8);
    font-size:var(--ambattles-font-size-lg);
    min-height:52px;
}

/* Full width buttons for mobile */
.ambattles-btn-full {
    width:100%;
    justify-content:center;
}

/* ===== CARDS ===== */
.ambattles-card {
    background:var(--ambattles-surface);
    border:1px solid var(--ambattles-border);
    border-radius:var(--ambattles-radius-lg);
    box-shadow:var(--ambattles-shadow-sm);
    transition:var(--ambattles-transition-all);
    overflow:hidden;
}

.ambattles-card:hover {
    box-shadow:var(--ambattles-shadow-md);
    transform:translateY(-2px);
}

/* Card variants */
.ambattles-card-interactive {
    cursor:pointer;
}

.ambattles-card-interactive:hover {
    box-shadow:var(--ambattles-shadow-lg);
}

/* Card content */
.ambattles-card-header {
    padding:var(--ambattles-space-4) var(--ambattles-space-6);
    border-bottom:1px solid var(--ambattles-border-light);
}

.ambattles-card-body {
    padding:var(--ambattles-space-6);
}

.ambattles-card-footer {
    padding:var(--ambattles-space-4) var(--ambattles-space-6);
    border-top:1px solid var(--ambattles-border-light);
    background:var(--ambattles-surface-hover);
}

/* ===== MODALS ===== */
.ambattles-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:var(--ambattles-z-modal);
    padding:var(--ambattles-space-4);
}

.ambattles-modal-content {
    background:var(--ambattles-surface);
    border-radius:var(--ambattles-radius-xl);
    box-shadow:var(--ambattles-shadow-2xl);
    max-width:90vw;
    max-height:90vh;
    overflow-y:auto;
    position:relative;
    width:100%;
}

/* Mobile bottom sheet modal */
@media (max-width:767px) {
    .ambattles-modal {
        align-items:flex-end;
        padding:0;
    }

    .ambattles-modal-content {
        border-radius:var(--ambattles-radius-xl) var(--ambattles-radius-xl) 0 0;
        max-width:100vw;
        max-height:85vh;
        margin-top:var(--ambattles-space-8);
    }
}

.ambattles-modal-header {
    padding:var(--ambattles-space-6);
    border-bottom:1px solid var(--ambattles-border-light);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ambattles-modal-title {
    font-size:var(--ambattles-font-size-xl);
    font-weight:var(--ambattles-font-weight-bold);
    margin:0;
}

.ambattles-modal-close {
    background:none;
    border:none;
    font-size:var(--ambattles-font-size-xl);
    cursor:pointer;
    padding:var(--ambattles-space-2);
    border-radius:var(--ambattles-radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
}

.ambattles-modal-body {
    padding:var(--ambattles-space-6);
}

.ambattles-modal-footer {
    padding:var(--ambattles-space-6);
    border-top:1px solid var(--ambattles-border-light);
    display:flex;
    gap:var(--ambattles-space-3);
    justify-content:flex-end;
}

/* ===== FORMS ===== */
.ambattles-form-group {
    margin-bottom:var(--ambattles-space-6);
}

.ambattles-form-label {
    display:block;
    font-weight:var(--ambattles-font-weight-medium);
    margin-bottom:var(--ambattles-space-2);
    color:var(--ambattles-text-primary);
}

.ambattles-form-input,
.ambattles-form-select,
.ambattles-form-textarea {
    width:100%;
    padding:var(--ambattles-space-3) var(--ambattles-space-4);
    border:2px solid var(--ambattles-border);
    border-radius:var(--ambattles-radius-md);
    font-family:var(--ambattles-font-primary);
    font-size:var(--ambattles-font-size-base);
    background:var(--ambattles-surface);
    color:var(--ambattles-text-primary);
    transition:var(--ambattles-transition-colors);
    min-height:44px; /* Touch target */
}

.ambattles-form-input:focus,
.ambattles-form-select:focus,
.ambattles-form-textarea:focus {
    outline:none;
    border-color:var(--ambattles-primary);
    box-shadow:0 0 0 3px rgba(var(--ambattles-primary),0.1);
}

.ambattles-form-textarea {
    min-height:100px;
    resize:vertical;
}

/* Form validation states */
.ambattles-form-input.is-valid {
    border-color:var(--ambattles-success);
}

.ambattles-form-input.is-invalid {
    border-color:var(--ambattles-danger);
}

.ambattles-form-error {
    color:var(--ambattles-danger);
    font-size:var(--ambattles-font-size-sm);
    margin-top:var(--ambattles-space-2);
}

/* ===== TABLES ===== */
.ambattles-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--ambattles-font-size-sm);
}

.ambattles-table th,
.ambattles-table td {
    padding:var(--ambattles-space-3) var(--ambattles-space-4);
    text-align:left;
    border-bottom:1px solid var(--ambattles-border-light);
}

.ambattles-table th {
    font-weight:var(--ambattles-font-weight-semibold);
    background:var(--ambattles-surface-hover);
    position:sticky;
    top:0;
    z-index:1;
}

.ambattles-table-responsive {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* ===== TABS & NAVIGATION ===== */
.ambattles-tabs {
    display:flex;
    border-bottom:1px solid var(--ambattles-border-light);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.ambattles-tabs::-webkit-scrollbar {
    display:none;
}

.ambattles-tab {
    padding:var(--ambattles-space-3) var(--ambattles-space-6);
    border-bottom:2px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    font-weight:var(--ambattles-font-weight-medium);
    color:var(--ambattles-text-secondary);
    transition:var(--ambattles-transition-colors);
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.ambattles-tab:hover {
    color:var(--ambattles-text-primary);
}

.ambattles-tab.active {
    color:var(--ambattles-primary);
    border-bottom-color:var(--ambattles-primary);
}

/* ===== TOASTS & NOTIFICATIONS ===== */
.ambattles-toast-container {
    position:fixed;
    top:var(--ambattles-space-4);
    right:var(--ambattles-space-4);
    z-index:var(--ambattles-z-notification);
    pointer-events:none;
}

.ambattles-toast {
    background:var(--ambattles-surface);
    border:1px solid var(--ambattles-border);
    border-radius:var(--ambattles-radius-lg);
    box-shadow:var(--ambattles-shadow-lg);
    padding:var(--ambattles-space-4);
    margin-bottom:var(--ambattles-space-3);
    pointer-events:auto;
    display:flex;
    align-items:flex-start;
    gap:var(--ambattles-space-3);
    max-width:400px;
    opacity:0;
    transform:translateX(100%);
    transition:all 0.3s ease;
}

.ambattles-toast.show {
    opacity:1;
    transform:translateX(0);
}

.ambattles-toast-icon {
    flex-shrink:0;
    width:20px;
    height:20px;
}

.ambattles-toast-content {
    flex:1;
}

.ambattles-toast-title {
    font-weight:var(--ambattles-font-weight-semibold);
    margin-bottom:var(--ambattles-space-1);
}

.ambattles-toast-message {
    font-size:var(--ambattles-font-size-sm);
    color:var(--ambattles-text-secondary);
}

.ambattles-toast-close {
    background:none;
    border:none;
    cursor:pointer;
    padding:var(--ambattles-space-1);
    border-radius:var(--ambattles-radius-sm);
    opacity:0.7;
    transition:opacity 0.2s;
}

.ambattles-toast-close:hover {
    opacity:1;
}

/* Toast variants */
.ambattles-toast-success {
    border-color:var(--ambattles-success);
}

.ambattles-toast-success .ambattles-toast-icon {
    color:var(--ambattles-success);
}

.ambattles-toast-error {
    border-color:var(--ambattles-danger);
}

.ambattles-toast-error .ambattles-toast-icon {
    color:var(--ambattles-danger);
}

.ambattles-toast-warning {
    border-color:var(--ambattles-warning);
}

.ambattles-toast-warning .ambattles-toast-icon {
    color:var(--ambattles-warning);
}

.ambattles-toast-info {
    border-color:var(--ambattles-info);
}

.ambattles-toast-info .ambattles-toast-icon {
    color:var(--ambattles-toast-info);
}

/* ===== EMPTY STATES ===== */
.ambattles-empty-state {
    text-align:center;
    padding:var(--ambattles-space-12) var(--ambattles-space-6);
}

.ambattles-empty-icon {
    font-size:var(--ambattles-font-size-4xl);
    color:var(--ambattles-text-muted);
    margin-bottom:var(--ambattles-space-4);
}

.ambattles-empty-title {
    font-size:var(--ambattles-font-size-xl);
    font-weight:var(--ambattles-font-weight-semibold);
    color:var(--ambattles-text-primary);
    margin-bottom:var(--ambattles-space-3);
}

.ambattles-empty-description {
    font-size:var(--ambattles-font-size-base);
    color:var(--ambattles-text-secondary);
    margin-bottom:var(--ambattles-space-6);
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
}

.ambattles-empty-action {
    display:inline-flex;
    align-items:center;
    gap:var(--ambattles-space-2);
}

/* ===== PAGINATION ===== */
.ambattles-pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--ambattles-space-2);
    margin-top:var(--ambattles-space-8);
}

.ambattles-pagination-item {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:var(--ambattles-space-2) var(--ambattles-space-3);
    border:1px solid var(--ambattles-border);
    border-radius:var(--ambattles-radius-md);
    background:var(--ambattles-surface);
    color:var(--ambattles-text-primary);
    text-decoration:none;
    transition:var(--ambattles-transition-colors);
    font-weight:var(--ambattles-font-weight-medium);
}

.ambattles-pagination-item:hover {
    background:var(--ambattles-surface-hover);
    border-color:var(--ambattles-primary);
}

.ambattles-pagination-item.active {
    background:var(--ambattles-primary);
    color:white;
    border-color:var(--ambattles-primary);
}

.ambattles-pagination-item.disabled {
    opacity:0.5;
    pointer-events:none;
}

/* ===== BADGES ===== */
.ambattles-badge {
    font-size:var(--ambattles-font-size-xs);
    font-weight:var(--ambattles-font-weight-semibold);
    padding:var(--ambattles-space-1) var(--ambattles-space-2);
    border-radius:var(--ambattles-radius-full);
    display:inline-flex;
    align-items:center;
    gap:var(--ambattles-space-1);
    white-space:nowrap;
}

.ambattles-badge-success {
    background:var(--ambattles-success-lighter);
    color:var(--ambattles-success-dark);
}

.ambattles-badge-danger {
    background:var(--ambattles-danger-lighter);
    color:var(--ambattles-danger-dark);
}

.ambattles-badge-warning {
    background:var(--ambattles-warning-lighter);
    color:var(--ambattles-warning-dark);
}

.ambattles-badge-info {
    background:var(--ambattles-info-lighter);
    color:var(--ambattles-info-dark);
}

/* ===== TYPOGRAPHY ===== */
.ambattles-heading {
    font-family:var(--ambattles-font-heading);
    font-weight:var(--ambattles-font-weight-bold);
    line-height:var(--ambattles-line-height-tight);
    color:var(--ambattles-text-primary);
    margin-bottom:var(--ambattles-space-4);
}

.ambattles-heading-xl { font-size:var(--ambattles-font-size-3xl); }
.ambattles-heading-lg { font-size:var(--ambattles-font-size-2xl); }
.ambattles-heading-md { font-size:var(--ambattles-font-size-xl); }
.ambattles-heading-sm { font-size:var(--ambattles-font-size-lg); }

.ambattles-body {
    font-family:var(--ambattles-font-primary);
    font-size:var(--ambattles-font-size-base);
    line-height:var(--ambattles-line-height-normal);
    color:var(--ambattles-text-primary);
}

/* ===== ACCESSIBILITY & REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce) {
    .ambattles-card,
    .ambattles-btn,
    .ambattles-toast,
    .ambattles-modal-content {
        transition:none !important;
        transform:none !important;
    }

    .ambattles-scroll-x {
        scroll-behavior:auto;
    }
}

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"] {
    --ambattles-background:#0d0f12;
    --ambattles-surface:#1a1a1a;
    --ambattles-surface-hover:#2a2a2a;
    --ambattles-border:#333333;
    --ambattles-border-light:#404040;
    --ambattles-text-primary:#ffffff;
    --ambattles-text-secondary:#cccccc;
    --ambattles-text-muted:#888888;
}


/* modules/amBattles/css/unified_styling.css */


/**
 * amBattles Unified Styling System
 *
 * Consistent styling patterns across all pages,forms,and modals.
 * Implements the design system from badges and charts pages.
 *
 * Features:
 * - Info dropdowns like badges page
 * - Card-based layouts like charts page
 * - Consistent headers and navigation
 * - Responsive design with theme support
 *
 * @package amBattles
 * @copyright 2026 The Arcitech
 */

/* ===== FILTER CONTROLS ===== */

.amb-filter-btn {
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    padding:0.5rem 1rem;
    background:var(--ambattles-bg-secondary);
    color:var(--ambattles-text-primary);
    border:1px solid var(--ambattles-border);
    border-radius:0.375rem;
    cursor:pointer;
    font-size:0.875rem;
    font-weight:500;
    text-decoration:none;
    transition:all 0.2s ease;
    position:relative;
}

.amb-filter-btn:hover {
    background:var(--ambattles-bg-hover);
    border-color:var(--ambattles-border-hover);
    color:var(--ambattles-text-hover);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.amb-filter-btn:active {
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(0,0,0,0.1);
}

.amb-filter-btn:focus {
    outline:none;
    box-shadow:0 0 0 2px var(--ambattles-focus-ring);
}

.amb-filter-btn.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
}

/* ===== Utility Helpers (shared across templates) ===== */
.amb-d-flex {
    display:flex;
}

.amb-flex-wrap {
    flex-wrap:wrap;
}

.amb-items-center {
    align-items:center;
}

.amb-justify-between {
    justify-content:space-between;
}

.amb-justify-center {
    justify-content:center;
}

.amb-text-center {
    text-align:center;
}

.amb-gap-8 {
    gap:8px;
}

.amb-gap-10 {
    gap:10px;
}

.amb-gap-15 {
    gap:15px;
}

.amb-gap-20 {
    gap:20px;
}

.amb-gap-30 {
    gap:30px;
}

.amb-mb-15 {
    margin-bottom:15px;
}

.amb-mb-20 {
    margin-bottom:20px;
}

.amb-ml-10 {
    margin-left:10px;
}

.amb-mr-20 {
    margin-right:20px;
}

.amb-p-10 {
    padding:10px;
}

.amb-p-15 {
    padding:15px;
}

.amb-p-20 {
    padding:20px;
}

.amb-border-radius-5 {
    border-radius:5px;
}

.amb-border-radius-8 {
    border-radius:8px;
}

.amb-bg-f5f5f5 {
    background:#f5f5f5;
}

.amb-bg-f0f0f0 {
    background:#f0f0f0;
}

.amb-color-gold {
    color:#d4a017;
}

.amb-color-brick {
    color:#c0392b;
}

.amb-font-weight-bold {
    font-weight:700;
}

.amb-filter-arrow {
    font-size:0.75rem;
    font-weight:bold;
    transition:transform 0.2s ease;
}

.amb-filter-btn.active .amb-filter-arrow {
    transform:rotate(180deg);
}

/* Filter dropdown containers */
.battle-filter-dropdown {
    display:none;
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:0.375rem;
    margin-top:0.5rem;
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
}

.battle-filter-dropdown .pill-group {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    padding:0.75rem;
}

.filter-option-pill,
.sort-option-pill {
    display:inline-block;
    padding:0.375rem 0.75rem;
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:0.25rem;
    font-size:0.875rem;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.2s ease;
}

.filter-option-pill:hover,
.sort-option-pill:hover {
    background:var(--ambattles-bg-hover);
    color:var(--ambattles-text-hover);
    border-color:var(--ambattles-border-hover);
}

.filter-option-pill.active,
.sort-option-pill.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
    font-weight:600;
}

/* View toggle buttons */
.amb-view-toggle-btn {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.5rem 1rem;
    background:var(--ambattles-bg-secondary);
    color:var(--ambattles-text-primary);
    border:1px solid var(--ambattles-border);
    border-radius:0.375rem;
    cursor:pointer;
    font-size:0.875rem;
    font-weight:500;
    text-decoration:none;
    transition:all 0.2s ease;
}

.amb-view-toggle-btn:hover {
    background:var(--ambattles-bg-hover);
    border-color:var(--ambattles-border-hover);
}

.amb-view-toggle-btn.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
}

/* ===== PAGE STRUCTURE ===== */

.amb-page-wrapper {
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
    min-height:100vh;
    transition:background-color 0.3s ease,color 0.3s ease;
}

/* ===== PAGE NAVIGATION (Tabs) ===== */
.battle-page-navigation {
    margin:0 0 1.25rem 0;
}

.battle-page-navigation .ambattles-tabs {
    display:flex;
    gap:0.35rem;
    align-items:center;
    padding:0.35rem;
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.battle-page-navigation .ambattles-tabs::-webkit-scrollbar {
    display:none;
}

.battle-page-navigation .ambattles-tab {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 0.9rem;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--ambattles-text-secondary);
    text-decoration:none;
    white-space:nowrap;
    font-weight:600;
    font-size:0.9rem;
    transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}

.battle-page-navigation .ambattles-tab:hover {
    background:var(--ambattles-bg-tertiary);
    color:var(--ambattles-text-primary);
}

.battle-page-navigation .ambattles-tab:active {
    transform:translateY(0);
}

.battle-page-navigation .ambattles-tab:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(220,53,69,0.20);
}

.battle-page-navigation .ambattles-tab.active,
.battle-page-navigation .ambattles-tab[aria-current="page"] {
    background:var(--ambattles-primary);
    color:var(--ambattles-text-inverse);
    border-color:var(--ambattles-primary);
    box-shadow:0 6px 16px rgba(220,53,69,0.18);
}

.battle-page-navigation .ambattles-tab.active:hover,
.battle-page-navigation .ambattles-tab[aria-current="page"]:hover {
    background:var(--ambattles-primary-dark);
    border-color:var(--ambattles-primary-dark);
}

.battle-page-navigation .ambattles-tab-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.9;
}

.battle-page-navigation .ambattles-tab-icon svg {
    width:16px;
    height:16px;
}

.battle-page-navigation .ambattles-tab.active .ambattles-tab-icon,
.battle-page-navigation .ambattles-tab[aria-current="page"] .ambattles-tab-icon {
    opacity:1;
}

@media (max-width:768px) {
    .battle-page-navigation .ambattles-tab {
        padding:0.55rem 0.8rem;
        font-size:0.85rem;
    }
}

/* Page Headers */
.amb-page-header {
    background:var(--ambattles-bg-secondary);
    border-bottom:1px solid var(--ambattles-border);
    padding:1.5rem 0;
    margin-bottom:1.25rem;
    transition:background-color 0.3s ease,border-color 0.3s ease;
}

.amb-header-content {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}

.amb-header-left {
    min-width:0;
    flex:1 1 auto;
}

.amb-page-title {
    font-size:2.5rem;
    font-weight:700;
    color:var(--ambattles-text-primary);
    margin:0;
    transition:color 0.3s ease;
}

.amb-page-subtitle {
    font-size:1.1rem;
    color:var(--ambattles-text-secondary);
    margin:0.5rem 0 0 0;
    transition:color 0.3s ease;
}

.amb-header-actions {
    display:flex;
    gap:1rem;
    align-items:center;
    flex:0 0 auto;
    margin-left:auto;
}

/* Breadcrumbs */
.amb-breadcrumbs {
    background:var(--ambattles-bg-tertiary);
    padding:0.75rem 1.5rem;
    border-radius:8px;
    margin-bottom:2rem;
    font-size:0.9rem;
    transition:background-color 0.3s ease;
}

.amb-breadcrumbs.amb-breadcrumbs-compact {
    background:transparent;
    padding:0;
    border-radius:0;
    margin:0.35rem 0 0 0;
    font-size:0.85rem;
}

.amb-breadcrumbs.amb-breadcrumbs-compact i {
    color:var(--ambattles-text-muted);
    margin:0 0.4rem;
}

.amb-breadcrumbs.amb-breadcrumbs-compact a {
    color:var(--ambattles-text-secondary);
}

.amb-breadcrumbs.amb-breadcrumbs-compact a:hover {
    color:var(--ambattles-primary);
    text-decoration:underline;
}

.amb-page-header .amb-breadcrumbs {
    background:transparent;
    padding:0;
    border-radius:0;
    margin:0.35rem 0 0 0;
    font-size:0.85rem;
}

.amb-page-header .amb-breadcrumbs i {
    color:var(--ambattles-text-muted);
    margin:0 0.4rem;
}

.amb-page-header .amb-breadcrumbs a {
    color:var(--ambattles-text-secondary);
}

.amb-page-header .amb-breadcrumbs a:hover {
    color:var(--ambattles-primary);
    text-decoration:underline;
}

.amb-breadcrumbs a {
    color:var(--ambattles-primary);
    text-decoration:none;
    transition:color 0.3s ease;
}

.amb-breadcrumbs a:hover {
    color:var(--ambattles-primary-dark);
    text-decoration:underline;
}

.amb-breadcrumbs .separator {
    color:var(--ambattles-text-muted);
    margin:0 0.5rem;
}

.amb-breadcrumbs .current {
    color:var(--ambattles-text-primary);
    font-weight:600;
}

/* ===== INFO PANELS (Like Badges Page) ===== */

.amb-info-panels-container {
    margin-bottom:2rem;
}

.amb-info-toggle-btn {
    background:var(--ambattles-primary);
    color:white;
    border:none;
    padding:0.75rem 1.5rem;
    border-radius:8px;
    cursor:pointer;
    font-size:0.9rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
    transition:background-color 0.3s ease,transform 0.2s ease;
}

.amb-info-toggle-btn:hover {
    background:var(--ambattles-primary-dark);
    transform:translateY(-1px);
}

.amb-info-toggle-btn i {
    font-size:1rem;
}

/* ===== HEADER ICON ACTION BUTTONS ===== */
.amb-header-icon-btn {
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:12px;
    border:1px solid var(--ambattles-border);
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
    transition:background-color 0.2s ease,border-color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.amb-header-icon-btn:hover {
    background:var(--ambattles-bg-hover);
    border-color:var(--ambattles-border-hover);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,0,0,0.10);
}

.amb-header-icon-btn:active {
    transform:translateY(0);
}

.amb-header-icon-btn:focus {
    outline:none;
    box-shadow:0 0 0 2px var(--ambattles-focus-ring);
}

.amb-header-icon-btn i {
    font-size:18px;
    line-height:1;
}

.amb-header-icon-btn--primary {
    background:var(--ambattles-primary);
    color:var(--ambattles-text-inverse,#ffffff);
    border-color:var(--ambattles-primary);
}

.amb-header-icon-btn--primary:hover {
    background:var(--ambattles-primary-dark);
    border-color:var(--ambattles-primary-dark);
}

/* Make the info-toggle button icon-only when used in a page header */
.amb-page-header .amb-info-toggle-btn.amb-header-icon-btn {
    padding:0;
    gap:0;
    font-size:0;
    border:1px solid var(--ambattles-border);
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
}

.amb-page-header .amb-info-toggle-btn.amb-header-icon-btn:hover {
    background:var(--ambattles-bg-hover);
    border-color:var(--ambattles-border-hover);
}

.amb-page-header .amb-info-toggle-btn.amb-header-icon-btn i {
    font-size:18px;
    color:inherit;
}

.amb-info-panel {
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:12px;
    margin-top:1rem;
    overflow:hidden;
    transition:all 0.3s ease;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.amb-info-panel.amb-display-none {
    max-height:0;
    opacity:0;
    margin-top:0;
    border-width:0;
}

.amb-info-content {
    padding:2rem;
}

.amb-info-section {
    margin-bottom:2rem;
}

.amb-info-section:last-child {
    margin-bottom:0;
}

.amb-info-section h3 {
    color:var(--ambattles-primary);
    font-size:1.3rem;
    font-weight:600;
    margin:0 0 1rem 0;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.amb-info-section h3 i {
    color:var(--ambattles-primary);
}

.amb-info-section p {
    color:var(--ambattles-text-secondary);
    line-height:1.6;
    margin:0 0 1rem 0;
}

.amb-info-section ul {
    margin:1rem 0;
    padding-left:1.5rem;
}

.amb-info-section li {
    color:var(--ambattles-text-secondary);
    margin-bottom:0.5rem;
    line-height:1.5;
}

/* ===== CARDS AND PANELS (Like Charts Page) ===== */

.amb-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem;
    margin-bottom:2rem;
}

.amb-card {
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:12px;
    padding:1.5rem;
    transition:all 0.3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.amb-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    border-color:var(--ambattles-primary-light);
}

.amb-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--ambattles-border-light);
}

.amb-card-title {
    font-size:1.2rem;
    font-weight:600;
    color:var(--ambattles-text-primary);
    margin:0;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.amb-card-title i {
    color:var(--ambattles-primary);
}

.amb-card-actions {
    display:flex;
    gap:0.5rem;
}

.amb-card-content {
    color:var(--ambattles-text-secondary);
}

.amb-card-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:1rem;
    margin-top:1rem;
}

.amb-stat-item {
    text-align:center;
    padding:1rem;
    background:var(--ambattles-bg-tertiary);
    border-radius:8px;
    transition:background-color 0.3s ease;
}

.amb-stat-value {
    font-size:1.8rem;
    font-weight:700;
    color:var(--ambattles-primary);
    display:block;
    margin-bottom:0.25rem;
}

.amb-stat-label {
    font-size:0.85rem;
    color:var(--ambattles-text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
}

/* ===== FILTERS AND CONTROLS ===== */

.amb-filters-bar {
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:12px;
    padding:1.5rem;
    margin-bottom:2rem;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    align-items:center;
    transition:background-color 0.3s ease,border-color 0.3s ease;
}

.amb-filter-group {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    min-width:200px;
}

.amb-filter-label {
    font-size:0.85rem;
    font-weight:600;
    color:var(--ambattles-text-primary);
    text-transform:uppercase;
    letter-spacing:0.5px;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.amb-filter-label i {
    color:var(--ambattles-primary);
}

.amb-filter-controls {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    align-items:center;
}

.amb-filter-select,
.amb-filter-input {
    padding:0.5rem 0.75rem;
    border:1px solid var(--ambattles-border);
    border-radius:6px;
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
    font-size:0.9rem;
    transition:border-color 0.3s ease,background-color 0.3s ease,color 0.3s ease;
}

.amb-filter-select:focus,
.amb-filter-input:focus {
    outline:none;
    border-color:var(--ambattles-primary);
    box-shadow:0 0 0 3px rgba(var(--ambattles-primary-rgb),0.1);
}

/* ===== BUTTONS AND ACTIONS ===== */

.amb-btn {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.75rem 1.5rem;
    border:none;
    border-radius:8px;
    font-size:0.9rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.3s ease;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.amb-btn-primary {
    background:var(--ambattles-primary);
    color:white;
}

.amb-btn-primary:hover {
    background:var(--ambattles-primary-dark);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(var(--ambattles-primary-rgb),0.3);
}

.amb-btn-secondary {
    background:var(--ambattles-bg-secondary);
    color:var(--ambattles-text-primary);
    border:1px solid var(--ambattles-border);
}

.amb-btn-secondary:hover {
    background:var(--ambattles-bg-tertiary);
    border-color:var(--ambattles-primary-light);
}

.amb-btn-info {
    background:var(--ambattles-info);
    color:white;
}

.amb-btn-info:hover {
    background:var(--ambattles-info-dark);
    transform:translateY(-1px);
}

/* ===== TABLES AND LISTS ===== */

.amb-data-table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:2rem;
    background:var(--ambattles-bg-secondary);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.amb-data-table th,
.amb-data-table td {
    padding:1rem;
    text-align:left;
    border-bottom:1px solid var(--ambattles-border);
}

.amb-data-table th {
    background:var(--ambattles-bg-tertiary);
    font-weight:600;
    color:var(--ambattles-text-primary);
    text-transform:uppercase;
    font-size:0.85rem;
    letter-spacing:0.5px;
}

.amb-data-table tr:hover {
    background:var(--ambattles-bg-hover);
}

/* ===== FORMS AND MODALS ===== */

.amb-form {
    background:var(--ambattles-bg-secondary);
    border:1px solid var(--ambattles-border);
    border-radius:12px;
    padding:2rem;
    max-width:600px;
    margin:0 auto;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
}

.amb-form-group {
    margin-bottom:1.5rem;
}

.amb-form-label {
    display:block;
    font-size:0.9rem;
    font-weight:600;
    color:var(--ambattles-text-primary);
    margin-bottom:0.5rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.amb-form-input,
.amb-form-select,
.amb-form-textarea {
    width:100%;
    padding:0.75rem;
    border:1px solid var(--ambattles-border);
    border-radius:6px;
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
    font-size:1rem;
    transition:border-color 0.3s ease,box-shadow 0.3s ease;
}

.amb-form-input:focus,
.amb-form-select:focus,
.amb-form-textarea:focus {
    outline:none;
    border-color:var(--ambattles-primary);
    box-shadow:0 0 0 3px rgba(var(--ambattles-primary-rgb),0.1);
}

.amb-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease,visibility 0.3s ease;
}

.amb-modal.active {
    opacity:1;
    visibility:visible;
}

.amb-modal-content {
    background:var(--ambattles-bg-primary);
    border-radius:12px;
    max-width:90vw;
    max-height:90vh;
    overflow:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    transform:scale(0.9);
    transition:transform 0.3s ease;
}

.amb-modal.active .amb-modal-content {
    transform:scale(1);
}

.amb-modal-header {
    padding:2rem;
    border-bottom:1px solid var(--ambattles-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.amb-modal-title {
    font-size:1.5rem;
    font-weight:600;
    color:var(--ambattles-text-primary);
    margin:0;
}

.amb-modal-close {
    background:none;
    border:none;
    font-size:1.5rem;
    color:var(--ambattles-text-muted);
    cursor:pointer;
    padding:0.5rem;
    border-radius:50%;
    transition:background-color 0.3s ease,color 0.3s ease;
}

.amb-modal-close:hover {
    background:var(--ambattles-bg-hover);
    color:var(--ambattles-text-primary);
}

.amb-modal-body {
    padding:2rem;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width:768px) {
    .amb-page-title {
        font-size:2rem;
    }

    .amb-header-content {
        flex-direction:column;
        text-align:center;
    }

    .amb-filters-bar {
        flex-direction:column;
        gap:1rem;
    }

    .amb-filter-group {
        width:100%;
    }

    .amb-card-grid {
        grid-template-columns:1fr;
        gap:1rem;
    }

    .amb-form {
        margin:1rem;
        padding:1.5rem;
    }
}

/* ===== ANIMATIONS ===== */

@keyframes amb-fade-in {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

.amb-fade-in {
    animation:amb-fade-in 0.3s ease-out;
}

@keyframes amb-slide-down {
    from { max-height:0; opacity:0; }
    to { max-height:500px; opacity:1; }
}

.amb-slide-down {
    animation:amb-slide-down 0.3s ease-out;
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast:high) {
    .amb-card {
        border-width:2px;
    }

    .amb-btn {
        border:2px solid;
    }
}

/* ===== UTILITY CLASSES ===== */

.amb-display-none { display:none !important; }
.amb-text-center { text-align:center; }
.amb-text-left { text-align:left; }
.amb-text-right { text-align:right; }
.amb-mt-1 { margin-top:0.5rem; }
.amb-mt-2 { margin-top:1rem; }
.amb-mb-1 { margin-bottom:0.5rem; }
.amb-mb-2 { margin-bottom:1rem; }
.amb-p-1 { padding:0.5rem; }

/* ===== ACCESSIBILITY ===== */

/* Screen reader only content */
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.sr-only-focusable:focus {
    position:static;
    width:auto;
    height:auto;
    padding:0.5rem;
    margin:0;
    overflow:visible;
    clip:auto;
    white-space:normal;
    background:var(--ambattles-bg-primary);
    color:var(--ambattles-text-primary);
    border:2px solid var(--ambattles-primary);
    z-index:10000;
}
.amb-p-2 { padding:1rem; }

/* modules/amBattles/css/core.css */


/**
 * amBattles Core Stylesheet
 * CSS Variables,Theme Support,and Core Styles
 * @copyright 2025 The Jamroom Network
 */

/* ===== CSS VARIABLES FOR THEME SUPPORT ===== */
:root {
    /* Light Theme (Default) */
    --amb-bg-primary:#ffffff;
    --amb-bg-secondary:#f8f9fa;
    --amb-bg-tertiary:#e9ecef;
    --amb-bg-hover:#e2e6ea;
    --amb-bg-active:#dee2e6;

    --amb-text-primary:#333333;
    --amb-text-secondary:#6c757d;
    --amb-text-muted:#8e9ba7;
    --amb-text-inverse:#ffffff;

    --amb-border:#dee2e6;
    --amb-border-light:#e9ecef;
    --amb-border-dark:#6c757d;

    --amb-shadow:rgba(0,0,0,0.1);
    --amb-shadow-hover:rgba(0,0,0,0.15);
    --amb-shadow-strong:rgba(0,0,0,0.25);

    /* Status Colors (same in both themes) */
    --amb-status-active:#28a745;
    --amb-status-pending:#ffc107;
    --amb-status-upcoming:#17a2b8;
    --amb-status-completed:#6c757d;
    --amb-status-cancelled:#dc3545;

    /* Level Colors (same in both themes) */
    --amb-level-rookie:#6c757d;
    --amb-level-contender:#28a745;
    --amb-level-warrior:#17a2b8;
    --amb-level-champion:#ffc107;
    --amb-level-legend:#dc3545;
    --amb-level-grandmaster:#6f42c1;

    /* Button Colors */
    --amb-btn-primary-bg:#007bff;
    --amb-btn-primary-hover:#0056b3;
    --amb-btn-secondary-bg:#6c757d;
    --amb-btn-secondary-hover:#545b62;
}

/* Dark Theme */
[data-theme="dark"] {
    --amb-bg-primary:#1a1a1a;
    --amb-bg-secondary:#2d2d2d;
    --amb-bg-tertiary:#404040;
    --amb-bg-hover:#454545;
    --amb-bg-active:#4d4d4d;

    --amb-text-primary:#e0e0e0;
    --amb-text-secondary:#b0b0b0;
    --amb-text-muted:#888888;
    --amb-text-inverse:#1a1a1a;

    --amb-border:#404040;
    --amb-border-light:#454545;
    --amb-border-dark:#666666;

    --amb-shadow:rgba(0,0,0,0.3);
    --amb-shadow-hover:rgba(0,0,0,0.4);
    --amb-shadow-strong:rgba(0,0,0,0.5);

    --amb-btn-primary-bg:#0d6efd;
    --amb-btn-primary-hover:#0a58ca;
    --amb-btn-secondary-bg:#6c757d;
    --amb-btn-secondary-hover:#565e64;
}

/* modules/amBattles/css/ui.css */


/**
 * amBattles UI Components Stylesheet
 * Main UI components,battle cards,forms,buttons,and navigation
 * @copyright 2025 The Jamroom Network
 */

/* ===== THEME TOGGLE ===== */
.ambattles-theme-toggle {
    position:fixed;
    bottom:var(--ambattles-space-6);
    right:var(--ambattles-space-6);
    width:60px;
    height:32px;
    background:var(--ambattles-surface);
    border:2px solid var(--ambattles-border);
    border-radius:16px;
    cursor:pointer;
    transition:var(--ambattles-transition-colors);
    z-index:var(--ambattles-z-fixed);
    display:flex;
    align-items:center;
    padding:2px;
    box-shadow:var(--ambattles-shadow-md);
}

.ambattles-theme-toggle:hover {
    border-color:var(--ambattles-primary);
    box-shadow:var(--ambattles-shadow-lg);
}

.ambattles-theme-toggle:focus-visible {
    outline:2px solid var(--ambattles-primary);
    outline-offset:2px;
}

.ambattles-theme-switch {
    width:24px;
    height:24px;
    background:var(--ambattles-primary);
    border-radius:50%;
    transition:transform 0.3s ease,background 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--ambattles-shadow-sm);
}

[data-theme="dark"] .ambattles-theme-switch {
    transform:translateX(28px);
    background:var(--ambattles-gray-600);
}

.ambattles-theme-icon {
    width:14px;
    height:14px;
    transition:opacity 0.3s ease;
    fill:white;
}

.ambattles-theme-icon.sun {
    opacity:1;
}

.ambattles-theme-icon.moon {
    opacity:0;
}

[data-theme="dark"] .ambattles-theme-icon.sun {
    opacity:0;
}

[data-theme="dark"] .ambattles-theme-icon.moon {
    opacity:1;
}

/* ===== BATTLE STATS BAR ===== */
.battle-stats-bar {
    display:flex;
    justify-content:space-around;
    background:var(--amb-bg-secondary);
    padding:15px;
    margin-bottom:20px;
    border-radius:8px;
    box-shadow:0 2px 4px var(--amb-shadow);
}

.stat-item {
    text-align:center;
}

.stat-label {
    display:block;
    font-size:12px;
    color:var(--amb-text-secondary);
    text-transform:uppercase;
    margin-bottom:5px;
}

.stat-value {
    display:block;
    font-size:24px;
    font-weight:bold;
    color:var(--amb-text-primary);
}

.stat-value.level-rookie { color:var(--amb-level-rookie); }
.stat-value.level-contender { color:var(--amb-level-contender); }
.stat-value.level-warrior { color:var(--amb-level-warrior); }
.stat-value.level-champion { color:var(--amb-level-champion); }
.stat-value.level-legend { color:var(--amb-level-legend); }
.stat-value.level-grandmaster { color:var(--amb-level-grandmaster); }

/* ===== BATTLE BROWSER ===== */
.battle-browser-container {
    margin-bottom:30px;
}

.browser-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.view-toggles {
    display:flex;
    gap:10px;
}

.view-toggle {
    padding:8px 12px;
    border:1px solid #ddd;
    background:white;
    cursor:pointer;
    border-radius:4px;
    transition:all 0.3s;
}

.view-toggle.active {
    background:#007bff;
    color:white;
    border-color:#007bff;
}

/* ===== FILTER BAR ===== */
.filter-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:20px;
}

.filter-pills {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.filter-pill {
    padding:4px 8px;
    border-radius:20px;
    border:1px solid var(--amb-btn-primary-bg);
    background:var(--amb-bg-primary);
    color:var(--amb-btn-primary-bg);
    cursor:pointer;
    transition:all 0.3s;
    font-size:14px;
}

.filter-pill.active {
    background:var(--amb-btn-primary-bg);
    color:var(--amb-text-inverse);
}

.filter-pill:hover {
    background:var(--amb-btn-primary-hover);
    color:var(--amb-text-inverse);
    border-color:var(--amb-btn-primary-hover);
}

.filter-search {
    display:flex;
    gap:10px;
    align-items:center;
}

#battle-search {
    padding:2px 2px;
    border:1px solid #ddd;
    border-radius:4px;
    width:250px;
}

/* ===== ADVANCED FILTERS ===== */
.advanced-filters {
    background:#f8f9fa;
    padding:20px;
    border-radius:8px;
    margin-bottom:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
}

.filter-group label {
    display:block;
    margin-bottom:5px;
    font-weight:500;
    color:#495057;
}

.filter-group select {
    width:100%;
    padding:8px;
    border:1px solid #ced4da;
    border-radius:4px;
}

/* ===== BATTLE GRID/LIST ===== */
.battle-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px;
}

.battle-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
}

.battle-header-left {
    display:flex;
    align-items:center;
    gap:8px;
}

.battle-list {
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* ===== BATTLE ITEM ===== */
.battle-item {
    background:white;
    border:1px solid #e9ecef;
    border-radius:8px;
    padding:20px;
    transition:all 0.3s;
    position:relative;
}

.battle-item:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}

.battle-status-indicator {
    position:absolute;
    top:10px;
    right:10px;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    font-weight:500;
}

.status-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}

.battle-status-indicator.active .status-dot {
    background:#28a745;
    animation:pulse 2s infinite;
}

.battle-status-indicator.upcoming .status-dot {
    background:#ffc107;
}

.battle-status-indicator.pending .status-dot {
    background:#17a2b8;
}

.battle-status-indicator.completed .status-dot {
    background:#6c757d;
}

.battle-status-indicator.cancelled .status-dot {
    background:#dc3545;
}

@keyframes pulse {
    0% { opacity:1; }
    50% { opacity:0.5; }
    100% { opacity:1; }
}

/* ===== BATTLE PARTICIPANTS ===== */
.battle-participants {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
}

.participant {
    flex:1;
    text-align:center;
}

.participant-avatar {
    margin-bottom:10px;
}

.participant-avatar img {
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}

.participant-info {
    margin-bottom:10px;
}

.participant-info a {
    font-weight:600;
    color:#333;
    text-decoration:none;
}

.participant-info a:hover {
    color:#007bff;
}

.media-title {
    display:block;
    font-size:12px;
    color:#6c757d;
    margin-top:5px;
}

.participant-votes {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.vote-count {
    font-size:24px;
    font-weight:bold;
    color:#007bff;
}

.vote-label {
    font-size:12px;
    color:#6c757d;
}

.vs-indicator {
    font-weight:bold;
    color:#dc3545;
    font-size:18px;
    padding:0 15px;
}

/* ===== BATTLE INFO ===== */
.battle-info {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    flex-wrap:wrap;
    gap:10px;
}

.battle-timer {
    display:flex;
    align-items:center;
    gap:5px;
    color:#dc3545;
    font-weight:500;
}

.type-badge {
    background:#6f42c1;
    color:white;
    padding:4px 12px;
    border-radius:12px;
    font-size:12px;
}

.battle-stats {
    color:#6c757d;
    font-size:14px;
}

/* ===== BATTLE ACTIONS ===== */
.battle-actions {
    text-align:center;
}

/* ===== TABS ===== */
.battle-tabs {
    margin-top:30px;
}

.tabs {
    display:flex;
    list-style:none;
    padding:0;
    margin:0;
    border-bottom:2px solid #e9ecef;
}

.tabs li {
    margin-right:20px;
}

.tabs a {
    display:block;
    padding:10px 0;
    color:#6c757d;
    text-decoration:none;
    position:relative;
    transition:color 0.3s;
}

.tabs li.active a {
    color:#007bff;
}

.tabs li.active a::after {
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    right:0;
    height:2px;
    background:#007bff;
}

.tab-content {
    display:none;
    padding:20px 0;
}

.tab-content.active {
    display:block;
}

/* ===== SUB TABS ===== */
.sub-tabs {
    margin-bottom:20px;
}

.sub-tabs ul {
    display:flex;
    list-style:none;
    padding:0;
    margin:0;
    gap:15px;
}

.sub-tabs a {
    padding:8px 16px;
    background:#f8f9fa;
    border-radius:4px;
    color:#495057;
    text-decoration:none;
    transition:all 0.3s;
}

.sub-tabs li.active a {
    background:#007bff;
    color:white;
}

/* ===== ARENA GRID ===== */
.arena-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

.arena-item {
    background:white;
    border:1px solid #e9ecef;
    border-radius:8px;
    overflow:hidden;
    transition:all 0.3s;
}

.arena-item:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}

.arena-item-media {
    background:#f8f9fa;
    padding:15px;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.arena-item-info {
    padding:15px;
}

.amb-item-title {
    font-size:16px;
    font-weight:600;
    margin-bottom:5px;
}

.amb-item-artist {
    font-size:14px;
    margin-bottom:10px;
}

.amb-item-genre {
    margin-bottom:10px;
}

.genre-tag {
    display:inline-block;
    background:#e9ecef;
    padding:4px 12px;
    border-radius:12px;
    font-size:12px;
    color:#495057;
}

.amb-item-stats {
    margin-bottom:15px;
    font-size:14px;
}

.auto-accept {
    color:#28a745;
}

.item-actions {
    text-align:center;
}

/* ===== CHALLENGE FORM ===== */
.challenge-form-container {
    max-width:800px;
    margin:0 auto;
    padding:20px;
}

.form-header {
    display:flex;
    align-items:center;
    margin-bottom:20px;
    gap:15px;
}

.challenge-form-content {
    display:flex;
    align-items:flex-start;
    gap:30px;
    margin-bottom:30px;
}

.opponent-section,
.challenger-section {
    flex:1;
}

.vs-divider {
    font-size:24px;
    font-weight:bold;
    color:#dc3545;
    padding-top:50px;
}

.selected-media {
    background:#f8f9fa;
    padding:20px;
    border-radius:8px;
    text-align:center;
}

.media-carousel {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.media-carousel-view {
    flex:1;
    overflow:hidden;
}

.media-select-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:10px;
}

.carousel-nav {
    width:40px;
    height:40px;
    border:1px solid #e9ecef;
    background:#fff;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s ease;
    flex-shrink:0;
}

.carousel-nav:hover {
    background:#f8f9fa;
    border-color:#007bff;
    color:#007bff;
}

.carousel-prev,
.carousel-next {
    font-size:18px;
    color:#666;
}

.media-select-item {
    padding:10px;
    border:2px solid #e9ecef;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.3s;
    text-align:center;
}

.media-select-item:hover {
    border-color:#007bff;
}

.media-select-item.selected {
    border-color:#007bff;
    background:#e7f1ff;
}

.media-thumb {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}

.media-thumb img {
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:4px;
}

.media-thumb span {
    font-size:12px;
    color:#495057;
}

/* ===== FORMS ===== */
.challenge-settings {
    background:#f8f9fa;
    padding:20px;
    border-radius:8px;
}

.amb-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.amb-form-group {
    margin-bottom:20px;
}

.form-group label {
    display:block;
    margin-bottom:5px;
    font-weight:500;
    color:#495057;
}

.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:8px 12px;
    border:1px solid #ced4da;
    border-radius:4px;
}

.amb-form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

.static-field {
    padding:8px 12px;
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:4px;
    color:#495057;
}

/* Challenge Form Buttons */
.amb-btn-back-arena,
.amb-btn-change-media,
.amb-btn-send-challenge {
    padding:8px 16px;
    border:none;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s ease;
    text-decoration:none;
    display:inline-block;
}

.amb-btn-back-arena {
    background:#6c757d;
    color:#fff;
}

.amb-btn-back-arena:hover {
    background:#5a6268;
    transform:translateY(-1px);
}

.amb-btn-change-media {
    background:#6c757d;
    color:#fff;
}

.amb-btn-change-media:hover {
    background:#5a6268;
}

.amb-btn-send-challenge {
    background:#dc3545;
    color:#fff;
}

.amb-btn-send-challenge:hover:not(:disabled) {
    background:#c82333;
    transform:translateY(-1px);
}

.amb-btn-send-challenge:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* ===== BUTTONS ===== */
.amb-btn {
    padding:8px 20px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    transition:all 0.3s;
    font-size:14px;
}

.btn-primary {
    background:var(--amb-btn-primary-bg);
    color:var(--amb-text-inverse);
}

.btn-primary:hover {
    background:var(--amb-btn-primary-hover);
}

.btn-secondary {
    background:var(--amb-btn-secondary-bg);
    color:var(--amb-text-inverse);
}

.btn-secondary:hover {
    background:var(--amb-btn-secondary-hover);
}

.btn:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* ===== CALENDAR ===== */
.battle-calendar-container {
    background:white;
    border:1px solid #e9ecef;
    border-radius:8px;
    padding:20px;
    margin-bottom:30px;
}

.calendar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.calendar-title {
    font-size:20px;
    font-weight:600;
    margin:0;
}

.calendar-nav {
    padding:5px 15px;
    background:#f8f9fa;
    border:1px solid #dee2e6;
    border-radius:4px;
    cursor:pointer;
}

.calendar-grid {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    background:#dee2e6;
    border:1px solid #dee2e6;
}

.calendar-week-header {
    display:contents;
}

.calendar-day-header {
    background:#f8f9fa;
    padding:10px;
    text-align:center;
    font-weight:600;
    font-size:14px;
}

.calendar-days {
    display:contents;
}

.calendar-day {
    background:white;
    min-height:100px;
    padding:5px;
    position:relative;
}

.calendar-day.empty {
    background:#fafafa;
}

.day-number {
    font-weight:600;
    margin-bottom:5px;
}

.day-battles {
    font-size:12px;
}

.calendar-battle {
    background:#e7f1ff;
    padding:2px 5px;
    margin-bottom:2px;
    border-radius:3px;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.calendar-battle:hover {
    background:#cce5ff;
}

.battle-time {
    font-weight:600;
    color:#007bff;
    margin-right:5px;
}

/* ===== RECOMMENDATIONS ===== */
.recommendations-section {
    margin-top:40px;
}

.recommendations-section h3 {
    margin-bottom:20px;
}

/* ===== UTILITIES ===== */
.no-results,
.no-battles,
.no-media {
    text-align:center;
    padding:40px 20px;
    color:#6c757d;
}

.loading-spinner {
    text-align:center;
    padding:40px 20px;
    color:#6c757d;
}

.loading-spinner::before {
    content:'';
    display:inline-block;
    width:20px;
    height:20px;
    border:2px solid #f3f3f3;
    border-top:2px solid #007bff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-right:10px;
}

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

.error {
    text-align:center;
    padding:40px 20px;
    color:#dc3545;
    background:#f8d7da;
    border:1px solid #f5c6cb;
    border-radius:4px;
}

.white-popup {
    background:white;
    padding:20px;
    max-width:900px;
    margin:20px auto;
    border-radius:8px;
    position:relative;
}

/* ===== MY MEDIA LIST ===== */
.jr-my-media-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.am-media-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.media-summary-actions {
    display:flex;
    gap:8px;
}

.hidden {
    display:none;
}

.mt-6 {
    margin-top:6px;
}

.jr-my-media-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 15px;
    border:1px solid #e9ecef;
    border-radius:6px;
    background:#fff;
}

.jr-my-media-thumb img {
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:4px;
}

.jr-my-media-thumb {
    flex:0 0 60px;
    text-align:center;
    margin-right:15px;
    color:#6c757d;
}

.jr-my-media-item-info {
    flex:1;
}

.jr-my-media-item-actions {
    flex:0 0 auto;
}

/* ===== GENERIC JR ITEM LIST ===== */
.jr-item-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.jr-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 15px;
    border:1px solid #e9ecef;
    border-radius:6px;
    background:#fff;
}

/* ===== GENERIC JR BUTTON STYLES ===== */
.jr-button {
    padding:6px 16px;
    border:none;
    border-radius:4px;
    font-size:14px;
    cursor:pointer;
    transition:all 0.3s;
}

.jr-button-positive {
    background:#007bff;
    color:#fff;
}

.jr-button-positive:hover {
    background:#0056b3;
}

.jr-button-negative {
    background:#dc3545;
    color:#fff;
}

.jr-button-negative:hover {
    background:#c82333;
}

/* ===== ARENA LIST VIEW ===== */
.arena-list {
    display:flex !important;
    flex-direction:column;
    gap:15px;
}

.arena-list .arena-item {
    display:flex;
}

.arena-list .arena-item-media {
    width:120px;
    flex:0 0 120px;
}

.arena-list .arena-item-info {
    flex:1;
}

/* ===== LOADING SPINNER FOR BUTTONS ===== */
button.loading {
    position:relative;
    pointer-events:none;
    opacity:0.7;
}

button.loading .spinner {
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid #fff;
    border-top-color:transparent;
    border-radius:50%;
    animation:amb-spin 0.6s linear infinite;
    vertical-align:middle;
}

@keyframes amb-spin {
    to { transform:rotate(360deg); }
}

/* ===== BUTTON STYLES FOR CONSISTENCY ===== */
.btn-toggle-ready {
    padding:6px 12px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:14px;
    transition:all 0.3s ease;
}

.btn-toggle-ready:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

.btn-toggle-ready.loading {
    position:relative;
    color:transparent;
}

.btn-toggle-ready.loading::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:16px;
    height:16px;
    border:2px solid #ffffff;
    border-top:2px solid transparent;
    border-radius:50%;
    animation:amb-spin 1s linear infinite;
}

/* ===== CHALLENGE BUTTON STYLES ===== */
.btn-challenge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 12px;
    background:#007bff;
    color:white;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:14px;
    transition:all 0.3s ease;
}

.btn-challenge:hover {
    background:#0056b3;
}

/* ===== PILL BUTTON STYLES ===== */
.pill-btn {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 12px;
    border-radius:20px;
    font-size:14px;
    transition:all 0.3s ease;
}

.pill-btn.btn-challenge {
    background:#007bff;
    color:white;
}

.pill-btn.btn-challenge:hover {
    background:#0056b3;
}

/* modules/amBattles/css/tooltips.css */


/**
 * amBattles Tooltip System - Informative Style
 * 
 * Professional,accessible tooltip system with automatic positioning,
 * informative content display,and smooth animations.
 * 
 * @package amBattles
 * @copyright 2026 The Arcitech
 */

/* ============================================================================
   TOOLTIP CONTAINER & TRIGGER
   ============================================================================ */

.ambattles-tooltip-trigger {
    position:relative;
    cursor:help;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.ambattles-help-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--ambattles-info);
    color:var(--ambattles-white);
    font-size:12px;
    font-weight:var(--ambattles-font-weight-bold);
    line-height:1;
    cursor:help;
    transition:var(--ambattles-transition-colors);
}

.ambattles-help-icon:hover {
    background:var(--ambattles-info-dark);
    transform:scale(1.1);
}

.ambattles-help-icon::after {
    content:'?';
}

/* ============================================================================
   TOOLTIP POPUP
   ============================================================================ */

.ambattles-tooltip {
    position:absolute;
    z-index:var(--ambattles-z-tooltip);
    max-width:320px;
    padding:var(--ambattles-space-3) var(--ambattles-space-4);
    background:var(--ambattles-white);
    color:var(--ambattles-text-primary);
    font-size:var(--ambattles-font-size-sm);
    line-height:var(--ambattles-line-height-relaxed);
    border:1px solid var(--ambattles-border);
    border-radius:var(--ambattles-radius-lg);
    box-shadow:var(--ambattles-shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity var(--ambattles-duration-base) var(--ambattles-ease-out),
                visibility var(--ambattles-duration-base) var(--ambattles-ease-out),
                transform var(--ambattles-duration-base) var(--ambattles-ease-out);
    pointer-events:none;
    word-wrap:break-word;
}

.ambattles-tooltip.show {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Tooltip Title */
.ambattles-tooltip-title {
    font-weight:var(--ambattles-font-weight-semibold);
    color:var(--ambattles-text-primary);
    margin-bottom:var(--ambattles-space-2);
    font-size:var(--ambattles-font-size-base);
}

/* Tooltip Content */
.ambattles-tooltip-content {
    color:var(--ambattles-text-secondary);
}

.ambattles-tooltip-content ul,
.ambattles-tooltip-list {
    margin:var(--ambattles-space-2) 0;
    padding-left:var(--ambattles-space-4);
}

.ambattles-tooltip-content li {
    margin-bottom:var(--ambattles-space-1);
}

/* Tooltip Arrow */
.ambattles-tooltip::before {
    content:'';
    position:absolute;
    width:0;
    height:0;
    border-style:solid;
}

/* ============================================================================
   TOOLTIP POSITIONS
   ============================================================================ */

/* Top Position (default) */
.ambattles-tooltip.top {
    bottom:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
}

.ambattles-tooltip.top.show {
    transform:translateX(-50%) translateY(0);
}

.ambattles-tooltip.top::before {
    bottom:-6px;
    left:50%;
    margin-left:-6px;
    border-width:6px 6px 0 6px;
    border-color:var(--ambattles-white) transparent transparent transparent;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* Bottom Position */
.ambattles-tooltip.bottom {
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(-8px);
}

.ambattles-tooltip.bottom.show {
    transform:translateX(-50%) translateY(0);
}

.ambattles-tooltip.bottom::before {
    top:-6px;
    left:50%;
    margin-left:-6px;
    border-width:0 6px 6px 6px;
    border-color:transparent transparent var(--ambattles-white) transparent;
    filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Left Position */
.ambattles-tooltip.left {
    right:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(8px);
}

.ambattles-tooltip.left.show {
    transform:translateY(-50%) translateX(0);
}

.ambattles-tooltip.left::before {
    right:-6px;
    top:50%;
    margin-top:-6px;
    border-width:6px 0 6px 6px;
    border-color:transparent transparent transparent var(--ambattles-white);
    filter:drop-shadow(2px 0 2px rgba(0,0,0,0.1));
}

/* Right Position */
.ambattles-tooltip.right {
    left:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(-8px);
}

.ambattles-tooltip.right.show {
    transform:translateY(-50%) translateX(0);
}

.ambattles-tooltip.right::before {
    left:-6px;
    top:50%;
    margin-top:-6px;
    border-width:6px 6px 6px 0;
    border-color:transparent var(--ambattles-white) transparent transparent;
    filter:drop-shadow(-2px 0 2px rgba(0,0,0,0.1));
}

/* ============================================================================
   TOOLTIP VARIANTS
   ============================================================================ */

/* Info Tooltip (default - informative style) */
.ambattles-tooltip.info {
    background:var(--ambattles-white);
    border-color:var(--ambattles-info);
    border-left:4px solid var(--ambattles-info);
}

/* Success Tooltip */
.ambattles-tooltip.success {
    background:var(--ambattles-success-lighter);
    border-color:var(--ambattles-success);
    color:var(--ambattles-success-dark);
}

/* Warning Tooltip */
.ambattles-tooltip.warning {
    background:var(--ambattles-warning-lighter);
    border-color:var(--ambattles-warning);
    color:var(--ambattles-warning-dark);
}

/* Danger Tooltip */
.ambattles-tooltip.danger {
    background:var(--ambattles-danger-lighter);
    border-color:var(--ambattles-danger);
    color:var(--ambattles-danger-dark);
}

/* ============================================================================
   SPECIAL TOOLTIP TYPES
   ============================================================================ */

/* Feature Explanation Tooltip (larger,more detailed) */
.ambattles-tooltip.feature {
    max-width:400px;
    padding:var(--ambattles-space-4) var(--ambattles-space-5);
}

.ambattles-tooltip.feature .ambattles-tooltip-title {
    font-size:var(--ambattles-font-size-md);
    border-bottom:1px solid var(--ambattles-border-light);
    padding-bottom:var(--ambattles-space-2);
    margin-bottom:var(--ambattles-space-3);
}

/* Stat/Metric Tooltip */
.ambattles-tooltip.stat {
    min-width:200px;
}

.ambattles-tooltip-stat-value {
    font-size:var(--ambattles-font-size-xl);
    font-weight:var(--ambattles-font-weight-bold);
    color:var(--ambattles-primary);
    margin:var(--ambattles-space-2) 0;
}

/* ============================================================================
   INLINE HELP TEXT (alternative to tooltips)
   ============================================================================ */

.ambattles-help-text {
    display:block;
    font-size:var(--ambattles-font-size-sm);
    color:var(--ambattles-text-muted);
    margin-top:var(--ambattles-space-1);
    line-height:var(--ambattles-line-height-normal);
}

.ambattles-help-text-inline {
    display:inline-block;
    margin-left:var(--ambattles-space-2);
}

/* ============================================================================
   MOBILE RESPONSIVE TOOLTIPS
   ============================================================================ */

@media (max-width:768px) {
    .ambattles-tooltip {
        max-width:280px;
        font-size:var(--ambattles-font-size-xs);
        padding:var(--ambattles-space-2) var(--ambattles-space-3);
    }
    
    .ambattles-tooltip.feature {
        max-width:calc(100vw - 40px);
        padding:var(--ambattles-space-3) var(--ambattles-space-4);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.ambattles-tooltip-trigger:focus .ambattles-tooltip {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.ambattles-tooltip-trigger[aria-describedby] {
    outline:2px solid var(--ambattles-info-light);
    outline-offset:2px;
}

/* Screen reader only text */
.ambattles-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border-width:0;
}


/* modules/amBattles/css/filter_controls.css */


/* Filter Controls Styles */
/* Extracted from unified_filters.tpl,arena_filters_url.tpl,my_media_filters_url.tpl */
/* Author:The Arcitech 2026 */

/* Filter Controls Container */
.am-filters-controls,
.battle-filters-controls,
.arena-filters-controls,
.my-media-filters-controls,
.pit-filters-controls {
    margin-bottom:20px;
}

.am-filters-controls > div,
.battle-filters-controls > div,
.arena-filters-controls > div,
.my-media-filters-controls > div,
.pit-filters-controls > div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

/* Filter Pills Container */
.am-filters-controls > div > div:first-child,
.battle-filters-controls > div > div:first-child,
.arena-filters-controls > div > div:first-child,
.my-media-filters-controls > div > div:first-child,
.pit-filters-controls > div > div:first-child {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto;
    min-width:300px;
}

/* Battle filters (index) – right side group should stay on one row on desktop */
.battle-filters-controls > div > div:last-child {
    display:flex;
    align-items:center;
    gap:15px;
    flex:0 1 auto;
    flex-wrap:nowrap;
    min-width:0;
}

/* Pill Triggers */
.am-sort-trigger,
.am-filter-trigger,
.am-sort-pill-trigger,
.am-filter-pill-trigger {
    cursor:pointer;
}

/* Advanced Search Wrapper */
.advanced-search-wrapper {
    flex:0 1 auto;
    min-width:280px;
    max-width:400px;
}

/* Battles index:allow quick-search to shrink so it stays inline with filters */
.battle-filters-controls .advanced-search-wrapper {
    min-width:220px;
    max-width:520px;
    flex:1 1 360px;
}

.search-toggle-container {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

.battle-filters-controls .search-toggle-container {
    flex-wrap:nowrap;
    min-width:0;
}

.battle-filters-controls .quick-search-form,
.arena-filters-controls .quick-search-form,
.my-media-filters-controls .quick-search-form,
.pit-filters-controls .quick-search-form {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    flex:1 1 240px;
    min-width:200px;
}

.battle-filters-controls .quick-search-form input[type="text"],
.battle-filters-controls .quick-search-form input[type="search"],
.arena-filters-controls .quick-search-form input[type="text"],
.arena-filters-controls .quick-search-form input[type="search"],
.my-media-filters-controls .quick-search-form input[type="text"],
.my-media-filters-controls .quick-search-form input[type="search"],
.pit-filters-controls .quick-search-form input[type="text"],
.pit-filters-controls .quick-search-form input[type="search"] {
    width:100%;
    min-width:160px;
    height:36px;
    padding:8px 12px;
    border:1px solid var(--ambattles-border,#ddd);
    border-radius:6px;
    background:var(--ambattles-bg-primary,#fff);
    color:var(--ambattles-text-primary,#212529);
    font-size:14px;
    line-height:20px;
}

.battle-filters-controls .quick-search-form input[type="text"]:focus,
.battle-filters-controls .quick-search-form input[type="search"]:focus,
.arena-filters-controls .quick-search-form input[type="text"]:focus,
.arena-filters-controls .quick-search-form input[type="search"]:focus,
.my-media-filters-controls .quick-search-form input[type="text"]:focus,
.my-media-filters-controls .quick-search-form input[type="search"]:focus,
.pit-filters-controls .quick-search-form input[type="text"]:focus,
.pit-filters-controls .quick-search-form input[type="search"]:focus {
    outline:none;
    border-color:var(--ambattles-primary,#dc3545);
    box-shadow:0 0 0 2px rgba(220,53,69,0.15);
}

/* Make Advanced button match other filter pills */
.battle-filters-controls .advanced-search-toggle.amb-filter-btn {
    height:36px;
    padding:8px 16px;
    border-radius:20px;
    border:1px solid var(--ambattles-border,#ddd);
    background:var(--ambattles-bg-secondary,#f8f9fa);
    color:var(--ambattles-text-primary,#212529);
}

.battle-filters-controls .advanced-search-toggle.amb-filter-btn:hover {
    background:var(--ambattles-bg-tertiary,#e9ecef);
    border-color:var(--ambattles-border-dark,#adb5bd);
}

.search-toggle-container a {
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

#am-quick-search {
    flex:1;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
}

.am-advanced-toggle,
.advanced-search-toggle {
    white-space:nowrap;
    padding:8px 12px;
    flex-shrink:0;
}

.am-advanced-toggle svg,
.advanced-search-toggle svg {
    vertical-align:middle;
    margin-right:4px;
}

/* View Toggle Container */
.view-toggle-container {
    display:flex;
    gap:5px;
    flex:0 0 auto;
    margin-left:auto;
}

@media (max-width:1024px) {
    .battle-filters-controls > div {
        align-items:flex-start;
    }
}

@media (max-width:768px) {
    .battle-filters-controls > div > div:last-child {
        flex-wrap:wrap;
    }

    .battle-filters-controls .advanced-search-wrapper {
        min-width:100%;
        max-width:100%;
        flex:1 1 100%;
    }
}

/* Sort Options Container */
#am-sort-options,
#arena_sort_options_container,
#my_media_sort_options_container {
    display:none;
    padding:10px 0;
    border-top:1px solid #ddd;
    margin-top:10px;
}

.am-sort-option {
    display:inline-block;
    margin-right:10px;
}

.am-sort-option.active {
    opacity:0.6;
}

/* Filter Options Containers */
.am-filter-options,
.arena-filter-dropdown,
.my-media-filter-dropdown {
    display:none;
    padding:10px 0;
    border-top:1px solid #ddd;
    margin-top:10px;
}

.am-filter-option {
    display:inline-block;
    margin-right:10px;
    margin-bottom:5px;
}

.am-filter-option.active {
    opacity:0.6;
}

/* Advanced Search Panel */
#am-advanced-search,
#arena_advanced_search_panel,
#my_media_advanced_search_panel,
.advanced-search-panel {
    display:none;
    padding:0;
    background:transparent;
    border-radius:0;
    margin-top:10px;
    box-shadow:none;
}

.advanced-search-panel h3 {
    margin:0 0 15px 0;
    font-size:18px;
    font-weight:600;
    color:#1a1a1a;
}

/* When advanced search is used as a dropdown,match filter option container styling */
.advanced-search-panel.filter_options_container {
    padding:15px;
    background:var(--ambattles-bg-primary,#ffffff);
    border:1px solid var(--ambattles-border,#ddd);
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.advanced-search-panel.filter_options_container h3 {
    font-size:16px;
    color:var(--ambattles-text-primary,#212529);
}

.advanced-search-panel.filter_options_container .search-field-group label {
    color:var(--ambattles-text-secondary,#6c757d);
    font-size:13px;
}

.advanced-search-panel.filter_options_container .form_text,
.advanced-search-panel.filter_options_container .form_select,
.advanced-search-panel.filter_options_container input[type="date"] {
    width:100%;
    height:36px;
    padding:8px 12px;
    border:1px solid var(--ambattles-border,#ddd);
    border-radius:6px;
    background:var(--ambattles-bg-primary,#fff);
    color:var(--ambattles-text-primary,#212529);
}

.advanced-search-panel.filter_options_container .form_text:focus,
.advanced-search-panel.filter_options_container .form_select:focus,
.advanced-search-panel.filter_options_container input[type="date"]:focus {
    outline:none;
    border-color:var(--ambattles-primary,#dc3545);
    box-shadow:0 0 0 2px rgba(220,53,69,0.15);
}

.advanced-search-panel.filter_options_container .form_button {
    border-radius:6px;
    padding:10px 18px;
}

/* Index advanced search:force full-width layout + grid even if utility classes are missing */
#advanced_search_panel {
    width:100%;
    box-sizing:border-box;
}

#advanced_search_panel form {
    width:100%;
}

#advanced_search_panel .amb-d-grid,
#advanced_search_panel .advanced-search-form > div:first-of-type {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:15px;
    width:100%;
}

.advanced-search-panel form > div:first-of-type {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

.search-field-group label {
    display:block;
    margin-bottom:5px;
    font-weight:500;
    color:#333;
}

.search-field-group input,
.search-field-group select {
    width:100%;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
}

.advanced-search-panel form > div:last-child {
    margin-top:20px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.advanced-search-panel .form_button {
    padding:10px 24px;
    border-radius:4px;
    cursor:pointer;
}

.advanced-search-panel .form_button.cancel {
    background:#6c757d;
    border:1px solid #6c757d;
    color:#fff;
}

.advanced-search-panel .form_button:not(.cancel):not(.submit) {
    background:#fff;
    border:1px solid #ddd;
    color:#333;
}

.advanced-search-panel .form_button.submit {
    background:#1a1a1a;
    border:1px solid #1a1a1a;
    color:#fff;
    font-weight:600;
}

.advanced-search-panel .form_button.submit svg {
    vertical-align:middle;
    margin-right:6px;
}

/* Active Filters Display */
#battles_active_filters_display,
.active-filters-row {
    display:none;
    margin:15px 0;
    padding:10px;
    background:#f8f9fa;
    border-radius:5px;
}

#battles_active_filters_tags {
    display:inline-block;
    margin-left:10px;
}

/* Chart Controls */
.chart-controls select {
    display:none;
}

.chart-controls .date-input {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
}

.chart-controls .filter-pill {
    margin-left:6px;
}

#chart-container {
    margin-top:15px;
}

#battle-graph,
#realtime-chart-container {
    width:100%;
    height:400px;
}


/* modules/amBattles/css/unified_filters.css */


/**
 * amBattles Unified Filters CSS
 * Author:The Arcitech 2026
 * Based on amAudio filter styling patterns
 */

/* Filter Controls Container */
.battles-filters-controls {
    width:100%;
    margin-bottom:20px;
}

/* Filter Pills - Trigger Buttons */
.battles_sort_pill_trigger,
.battles_filter_pill_trigger,
.amb-filter-btn,
.amb-sort-pill-trigger,
.amb-filter-pill-trigger {
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.2s ease;
    user-select:none;
    margin-right:8px;
}

.battles_sort_pill_trigger:hover,
.battles_filter_pill_trigger:hover,
.amb-filter-btn:hover,
.amb-sort-pill-trigger:hover,
.amb-filter-pill-trigger:hover {
    background:#e8e8e8;
    border-color:#ccc;
    transform:translateY(-1px);
}

.battles_sort_pill_trigger.active,
.battles_filter_pill_trigger.active,
.amb-filter-btn.active,
.amb-sort-pill-trigger.active,
.amb-filter-pill-trigger.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
}

/* Filter Options Containers */
#battles_sort_options_container,
#sort_options_container,
#status_options_container,
#battle_type_options_container,
#media_type_options_container,
#skill_level_options_container,
#genre_options_container,
.battles_filter_options_container,
.battle-filter-dropdown,
.filter_options_container {
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:15px;
    margin-top:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    display:none;
}

.battle-filter-dropdown.amb-display-none,
.filter_options_container.amb-display-none {
    display:none !important;
}

/* Individual Filter Option Pills */
.sort_option_pill,
.filter_option_pill,
.sort-option-pill,
.filter-option-pill {
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:16px;
    cursor:pointer;
    font-size:13px;
    margin-right:8px;
    margin-bottom:8px;
    transition:all 0.2s ease;
    user-select:none;
}

/* Link wrapper for pills */
a .sort_option_pill,
a .filter_option_pill,
a .sort-option-pill,
a .filter-option-pill {
    text-decoration:none;
    color:#333;
}

.sort_option_pill:hover,
.filter_option_pill:hover,
.sort-option-pill:hover,
.filter-option-pill:hover,
a:hover .sort_option_pill,
a:hover .filter_option_pill,
a:hover .sort-option-pill,
a:hover .filter-option-pill {
    background:#f0f0f0;
    border-color:#999;
    transform:translateY(-1px);
}

.sort_option_pill.active,
.filter_option_pill.active,
.sort-option-pill.active,
.filter-option-pill.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
    cursor:default;
}

/* Pill groups */
.pill-group {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pill-group a {
    text-decoration:none;
}

/* Advanced Search Panel */
#battles_advanced_search_panel {
    background:#f8f9fa;
    border-radius:8px;
    padding:20px;
    margin-top:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

#battles_advanced_search_panel h3 {
    margin:0 0 15px 0;
    font-size:18px;
    font-weight:600;
    color:#1a1a1a;
}

.advanced-search-form .search-field-group {
    margin-bottom:0;
}

.advanced-search-form label {
    display:block;
    margin-bottom:5px;
    font-weight:500;
    color:#333;
    font-size:13px;
}

.advanced-search-form input[type="text"],
.advanced-search-form input[type="number"],
.advanced-search-form select {
    width:100%;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    transition:border-color 0.2s ease;
}

.advanced-search-form input:focus,
.advanced-search-form select:focus {
    outline:none;
    border-color:#1a1a1a;
    box-shadow:0 0 0 2px rgba(26,26,26,0.1);
}

/* View Toggle Buttons */
.view-toggle-container {
    display:flex;
    gap:5px;
}

.battles-view-toggle-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:all 0.2s ease;
    color:#333;
}

.battles-view-toggle-btn:hover {
    background:#f5f5f5;
    border-color:#999;
}

.battles-view-toggle-btn.active {
    background:#1a1a1a;
    color:#ffffff;
    border-color:#1a1a1a;
}

.battles-view-toggle-btn svg {
    width:16px;
    height:16px;
}

.battles-view-toggle-btn span {
    font-size:13px;
}

/* Quick Search Input */
#battles_quick_search {
    flex:1;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    transition:border-color 0.2s ease;
}

#battles_quick_search:focus {
    outline:none;
    border-color:#1a1a1a;
    box-shadow:0 0 0 2px rgba(26,26,26,0.1);
}

/* Active Filters Display */
#battles_active_filters_display {
    background:#f8f9fa;
    border-radius:5px;
    padding:10px 15px;
    margin:15px 0;
}

#battles_active_filters_tags {
    display:inline-flex;
    flex-wrap:wrap;
    gap:8px;
    margin-left:10px;
}

.active-filter-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#007bff;
    color:white;
    padding:5px 12px;
    border-radius:16px;
    font-size:13px;
    text-decoration:none;
    transition:all 0.2s ease;
}

.active-filter-tag:hover {
    background:#0056b3;
    transform:translateY(-1px);
}

/* Search Toggle Container */
.search-toggle-container {
    display:flex;
    gap:8px;
    align-items:center;
}

.battles-advanced-search-toggle {
    white-space:nowrap;
    padding:8px 12px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.battles-advanced-search-toggle svg {
    vertical-align:middle;
}

/* Reset Button */
.btn-reset-battles-filters {
    text-decoration:none;
}

/* Responsive Adjustments */
@media (max-width:768px) {
    .battles-filters-controls > div {
        flex-direction:column;
        align-items:stretch;
    }
    
    .advanced-search-wrapper {
        min-width:100%;
        max-width:100%;
    }
    
    .view-toggle-container {
        width:100%;
        justify-content:center;
    }
    
    .battles-view-toggle-btn span {
        display:inline;
    }
    
    #battles_advanced_search_panel form > div {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .battles_sort_pill_trigger,
    .battles_filter_pill_trigger {
        font-size:12px;
        padding:6px 12px;
    }
    
    .sort_option_pill,
    .filter_option_pill,
    .sort-option-pill,
    .filter-option-pill {
        font-size:12px;
        padding:5px 12px;
    }
    
    .battles-view-toggle-btn {
        padding:6px 10px;
        font-size:12px;
    }
}

/* Analytics-Specific Filters */
.analytics-specific-filters {
    margin-top:15px;
    padding:15px;
    background:#f8f9fa;
    border-radius:8px;
    border:1px solid #e0e0e0;
}

/* Chart Controls */
.chart-controls {
    margin-top:15px;
    padding:15px;
    background:#f8f9fa;
    border-radius:8px;
    border:1px solid #e0e0e0;
}

.chart-controls select,
.chart-controls input {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
}

/* Arena Actions */
.arena-actions {
    margin-top:10px;
    text-align:right;
}

.am-pill-btn {
    display:inline-block;
    padding:8px 16px;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.2s ease;
}



/* modules/amBattles/css/inline_styles_replacement.css */


/**
 * amBattles Inline Styles Replacement
 * 
 * This file contains all CSS rules that replace inline styles found in templates.
 * All class names are prefixed with "amb-" to ensure uniqueness and prevent conflicts.
 * 
 * @copyright 2026 The Arcitech
 */

/* ===== BATTLE CHALLENGE TEMPLATE ===== */

/* Challenge form header title */
.amb-challenge-header-title {
    display:inline-block;
    margin-left:15px;
}

/* Skill pill center alignment */
.amb-skill-pill-center {
    text-align:center;
    margin-top:6px;
}

/* Audio extra margin */
.amb-audio-extra-margin {
    margin-top:6px;
}

/* Media select item cursor */
.amb-media-select-item {
    cursor:pointer;
    border:2px solid #444;
    padding:8px;
    border-radius:6px;
    transition:all 0.2s;
}

.amb-media-select-item:hover {
    border-color:#007bff;
    transform:translateY(-2px);
}

/* Audio meta pills margin */
.amb-audio-meta-pills {
    margin-top:4px;
}

/* Selected media display hidden */
.amb-selected-media-display {
    display:none;
}

/* ===== CHALLENGE FORM MODAL ===== */

/* Debug info banner */
.amb-debug-info-banner {
    background:#10b981;
    color:white;
    padding:10px;
    margin-bottom:10px;
    border-radius:6px;
    text-align:center;
    font-weight:600;
}

/* Media select item cursor important */
.amb-media-select-item-cursor {
    cursor:pointer !important;
}

/* Genre small text */
.amb-genre-small {
    display:block;
    color:#999;
    margin-top:4px;
}

/* No media error banner */
.amb-no-media-error {
    background:#dc3545;
    color:white;
    padding:20px;
    border-radius:8px;
    text-align:center;
}

.amb-no-media-error p {
    margin:0 0 10px;
    font-weight:600;
}

.amb-no-media-error p:last-child {
    margin:0;
    font-size:14px;
}

/* ===== ARENA ITEM GRID ===== */

/* Challenge button container */
.amb-challenge-btn-container {
    position:absolute;
    bottom:8px;
    right:8px;
    z-index:10;
}

/* Challenge icon button */
.amb-challenge-icon-btn {
    padding:8px;
    background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);
    border:none;
    border-radius:50%;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
}

.amb-challenge-icon-btn:hover {
    transform:scale(1.1);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Login button link */
.amb-login-btn-link {
    padding:8px 16px;
    background:rgba(255,255,255,0.9);
    border:none;
    border-radius:6px;
    font-size:12px;
    text-decoration:none;
    color:#333;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    display:inline-block;
}

.amb-login-btn-link:hover {
    background:rgba(255,255,255,1);
    box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

/* No results container */
.amb-no-results-container {
    padding:40px 20px;
    text-align:center;
}

/* No results SVG */
.amb-no-results-svg {
    margin-bottom:16px;
    opacity:0.3;
}

/* No results heading */
.amb-no-results-heading {
    margin:0 0 8px;
    font-size:18px;
    color:#666;
}

/* No results text */
.amb-no-results-text {
    margin:0;
    color:#999;
}

/* ===== ARENA ITEM LIST ===== */

/* Challenge image vertical align */
.amb-challenge-img {
    vertical-align:middle;
}

/* ===== MY MEDIA ITEM LIST/GRID ===== */

/* Battle ready badge gradient */
.amb-battle-ready-badge-ready {
    background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
}

.amb-battle-ready-badge-not-ready {
    background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);
}

/* Pit ready badge gradient */
.amb-pit-ready-badge-ready {
    background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
}

.amb-pit-ready-badge-not-ready {
    background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);
}

/* ===== PIT ITEM GRID ===== */

/* Track image container relative */
.amb-track-image-container {
    position:relative;
}

/* Pit ready badge absolute */
.amb-pit-ready-badge-grid {
    position:absolute;
    top:10px;
    right:10px;
    background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
    border-radius:50%;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,0.4);
    z-index:10;
    border:3px solid white;
}

.amb-pit-ready-badge-grid span {
    font-size:18px;
}

/* Media table display */
.amb-media-table-display {
    display:table;
    width:100%;
    margin-top:1px;
}

.amb-media-table-row {
    display:table-row;
}

.amb-media-table-cell-15 {
    display:table-cell;
    width:15%;
    padding:0;
}

.amb-media-table-cell-80 {
    display:table-cell;
    width:80%;
    vertical-align:middle;
    padding:0;
}

/* Pit grid stats */
.amb-pit-grid-stats {
    display:flex;
    gap:12px;
    padding:8px 12px;
    background:#f8f9fa;
    border-top:1px solid #e0e0e0;
    font-size:11px;
}

.amb-pit-stat-item {
    display:flex;
    align-items:center;
    gap:4px;
}

.amb-pit-stat-item[data-stat="bars"] {
    color:#ffd700;
}

.amb-pit-stat-item[data-stat="bricks"] {
    color:#c0392b;
}

/* Track actions primary */
.amb-track-actions-primary {
    position:absolute;
    bottom:8px;
    right:8px;
    z-index:10;
    display:flex;
    gap:8px;
    align-items:center;
}

/* Pit empty message */
.amb-pit-empty-message {
    padding:20px;
    text-align:center;
    color:#999;
}

/* ===== PIT ITEM LIST ===== */

/* Compact artwork relative */
.amb-compact-artwork {
    position:relative;
}

/* Pit ready badge compact */
.amb-pit-ready-badge-compact {
    position:absolute;
    top:2px;
    right:2px;
    background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
    border-radius:50%;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
    z-index:10;
}

.amb-pit-ready-badge-compact span {
    font-size:12px;
}

/* Compact stat bars */
.amb-compact-stat-bars {
    color:#ffd700;
}

/* Compact stat bricks */
.amb-compact-stat-bricks {
    color:#c0392b;
}

/* ===== ITEM BATTLE LIST/GRID ===== */

/* Image error handler - hide on error */
.amb-img-error-hide {
    display:none;
}

/* Image error handler - hide on error */
.amb-img-error-hide {
    /* Will be hidden by JavaScript on error */
}

/* Mini bar challenger height - use inline style for dynamic values */
/* Note:These need to remain inline as they use Smarty variables */
/* But we can add base styles here */
.mini-bar-challenger,
.mini-bar-opponent {
    transition:height 0.3s ease;
}

.vote-bar-fill.challenger-fill,
.vote-bar-fill.opponent-fill {
    transition:width 0.3s ease;
}

/* ===== MY MEDIA FILTERS ===== */

/* Filter dropdown container hidden */
.amb-filter-dropdown-hidden {
    display:none !important;
}

/* ===== MY MEDIA PAGE / ARENA PAGE ===== */

/* Info panel hidden */
.amb-info-panel-hidden {
    display:none;
}

/* ===== ARENA LIST ===== */

/* Challenge button cursor */
.amb-challenge-btn-cursor {
    cursor:pointer;
    background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);
    color:white;
    border:none;
    padding:12px 24px;
    border-radius:8px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
}

.amb-challenge-btn-cursor:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

/* ===== INDEX TEMPLATE ===== */

/* Info panel hidden */
.amb-info-panel {
    display:none;
}

.amb-info-panel.amb-info-panel-visible {
    display:block;
}

/* ===== MY MEDIA LIST ===== */

/* Media summary flex */
.amb-media-summary-flex {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Media summary actions */
.amb-media-summary-actions {
    display:flex;
    gap:8px;
}

/* ===== FILTER DROPDOWNS ===== */

/* Filter dropdown hidden - controlled by JavaScript */
.amb-filter-dropdown-hidden {
    display:none !important;
}

/* Note:Some inline styles must remain for dynamic values:
 * - Vote bar widths/heights (use Smarty variables)
 * - Display:none for JavaScript-controlled elements (can use class but JS may override)
 */


/* modules/amBattles/css/arena_grid.css */


/**
 * Arena Grid View Styles
 * Styles for arena item grid display
 * @copyright 2026 The Arcitech
 */

/* Arena Grid Container */
.arena-grid-container {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
    padding:20px 0;
}

/* Arena Item Grid Card */
.arena-item-grid-card {
    position:relative;
    background:#ffffff;
    border:1px solid #e9ecef;
    border-radius:12px;
    overflow:hidden;
    transition:all 0.3s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.arena-item-grid-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 14px rgba(0,0,0,0.2);
    border-color:#dc3545;
}

/* Arena Card Artwork */
.arena-card-artwork {
    position:relative;
    width:100%;
    padding-top:100%; /* 1:1 aspect ratio */
    background:#f8f9fa;
    overflow:hidden;
}

.arena-card-artwork img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Battle Ready Badge */
.battle-ready-badge {
    position:absolute;
    top:10px;
    left:10px;
    z-index:5;
}

.battle-ready-badge img {
    width:48px;
    height:48px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Arena Card Info */
.arena-card-info {
    padding:12px;
}

.arena-card-title {
    font-size:16px;
    font-weight:600;
    margin-bottom:6px;
    line-height:1.3;
}

.arena-card-title a {
    color:#333;
    text-decoration:none;
    transition:color 0.2s ease;
}

.arena-card-title a:hover {
    color:#dc3545;
}

.arena-card-artist {
    font-size:14px;
    color:#666;
    margin-bottom:8px;
}

.arena-card-artist a {
    color:#666;
    text-decoration:none;
    transition:color 0.2s ease;
}

.arena-card-artist a:hover {
    color:#dc3545;
}

.arena-card-genre {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#888;
    margin-bottom:8px;
}

.arena-card-genre img {
    width:14px;
    height:14px;
    object-fit:contain;
}

/* Arena Card Stats */
.arena-card-stats {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:#666;
    margin-top:8px;
}

.stat-plays,
.stat-battles {
    display:flex;
    align-items:center;
    gap:4px;
}

.stat-plays svg,
.stat-battles svg {
    width:12px;
    height:12px;
    fill:currentColor;
}

/* Responsive */
@media (max-width:768px) {
    .arena-grid-container {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:15px;
    }
}


/* modules/amBattles/css/arena_items.css */


/* Enhanced Arena List styles */
.arena-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Grid mode overrides */
.arena-list.grid-view{
  flex-direction:row;
  flex-wrap:wrap;
}
.arena-list.grid-view .jr-my-media-item{
  width:calc(16.666% - 20px);
}
@media(max-width:1200px){
  .arena-list.grid-view .jr-my-media-item{width:calc(25% - 20px);} }
@media(max-width:900px){
  .arena-list.grid-view .jr-my-media-item{width:calc(33.333% - 20px);} }
@media(max-width:700px){
  .arena-list.grid-view .jr-my-media-item{width:calc(50% - 20px);} }
@media(max-width:600px){
  .arena-list.grid-view .jr-my-media-item{width:100%;} }

/* Card base styling */
.arena-list .jr-my-media-item{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform .2s,box-shadow .2s;
  display:flex;
  flex-direction:row;
}
/* Grid mode card column layout */
.arena-list.grid-view .jr-my-media-item{flex-direction:column;}

.arena-list .jr-my-media-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
}
.arena-list .jr-my-media-thumb{
  overflow:hidden;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
/* Thumbnail sizing */
.arena-list .jr-my-media-thumb img{
  width:120px;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:12px;}
.arena-list.grid-view .jr-my-media-thumb img{
  width:100%;height:300px;object-fit:contain;object-position:center center;display:block;background:#fff;
}

.arena-list .jr-my-media-item-info{padding:12px 14px;flex:1 1 auto;}
.arena-list.grid-view .jr-my-media-item-info{padding:12px 14px;}
.arena-list .jr-my-media-item-actions{padding:10px 14px 16px;}

.arena-list .jr-my-media-item h4{margin:0 0 6px;font-size:1.1em;}
.arena-list .item-artist a{color:#666;font-size:.9em;}
.arena-list .item-genre .genre-tag{background:#eee;border-radius:4px;padding:2px 6px;font-size:.8em;}
.audio-extra{font-size:.85em;margin-top:4px;color:#555;}

/* Layout tweaks for list view */
.arena-list.list-view .jr-my-media-item{flex-direction:row;align-items:stretch;}
.arena-list.list-view .jr-my-media-thumb{flex:0 0 200px;max-width:200px;border-radius:12px 0 0 12px;overflow:hidden;}
.arena-list.list-view .jr-my-media-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px 0 0 12px;}
.arena-list.list-view .jr-my-media-item-actions{flex:0 0 120px;text-align:center;} 

.audio-meta{margin-top:6px;font-size:.8em;color:#444;line-height:1.4;}
.audio-meta span{display:inline-block;margin-right:6px;} 

.audio-meta .filter-pill,
.audio-plays.filter-pill{
  padding:4px 8px;
  margin:2px;
  border-radius:20px;
  font-size:12px;
}
.audio-meta .filter-pill strong,.audio-plays.filter-pill strong{font-weight:600;margin-right:3px;} 

.pill-btn{display:inline-block;padding:4px 8px;margin:2px;border-radius:20px;background:#f1f1f1;color:#333;border:1px solid #007bff;font-size:12px;cursor:pointer;}
.pill-btn:hover{background:#007bff;color:#fff;} 

/* modules/amBattles/css/my_media_items.css */


/* Enhanced Arena List styles */
.arena-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Grid mode overrides */
.arena-list.grid-view{
  flex-direction:row;
  flex-wrap:wrap;
}
.arena-list.grid-view .jr-my-media-item{
  width:calc(16.666% - 20px);
}
@media(max-width:1200px){
  .arena-list.grid-view .jr-my-media-item{width:calc(25% - 20px);} }
@media(max-width:900px){
  .arena-list.grid-view .jr-my-media-item{width:calc(33.333% - 20px);} }
@media(max-width:700px){
  .arena-list.grid-view .jr-my-media-item{width:calc(50% - 20px);} }
@media(max-width:600px){
  .arena-list.grid-view .jr-my-media-item{width:100%;} }

/* Card base styling */
.arena-list .jr-my-media-item{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform .2s,box-shadow .2s;
  display:flex;
  flex-direction:row;
  overflow:visible;
  position:relative;
}
/* Grid mode card column layout */
.arena-list.grid-view .jr-my-media-item{flex-direction:column;}

.arena-list .jr-my-media-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
}
.arena-list .jr-my-media-thumb{
  overflow:hidden;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
/* Thumbnail sizing */
.arena-list .jr-my-media-thumb img{
  width:120px;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:12px;}
.arena-list.grid-view .jr-my-media-thumb img{
  width:100%;height:300px;object-fit:contain;object-position:center center;display:block;background:#fff;
}

.arena-list .jr-my-media-item-info{padding:12px 14px;flex:1 1 auto;}
.arena-list.grid-view .jr-my-media-item-info{padding:12px 14px;}
.arena-list .jr-my-media-item-actions{padding:10px 14px 16px;}

.arena-list .jr-my-media-item h4{margin:0 0 6px;font-size:1.1em;}
.arena-list .item-artist a{color:#666;font-size:.9em;}
.arena-list .item-genre .genre-tag{background:#eee;border-radius:4px;padding:2px 6px;font-size:.8em;}
.audio-extra{font-size:.85em;margin-top:4px;color:#555;}

/* Layout tweaks for list view */
.arena-list.list-view .jr-my-media-item{flex-direction:row;align-items:stretch;}
.arena-list.list-view .jr-my-media-thumb{flex:0 0 200px;max-width:200px;border-radius:12px 0 0 12px;overflow:hidden;}
.arena-list.list-view .jr-my-media-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px 0 0 12px;}
.arena-list.list-view .jr-my-media-item-actions{flex:0 0 120px;text-align:center;} 

.audio-meta{margin-top:6px;font-size:.8em;color:#444;line-height:1.4;}
.audio-meta span{display:inline-block;margin-right:6px;} 

.audio-meta .filter-pill,
.audio-plays.filter-pill{
  padding:4px 8px;
  margin:2px;
  border-radius:20px;
  font-size:12px;
}
.audio-meta .filter-pill strong,.audio-plays.filter-pill strong{font-weight:600;margin-right:3px;} 

.pill-btn{display:inline-block;padding:4px 8px;margin:2px;border-radius:20px;background:#f1f1f1;color:#333;border:1px solid #007bff;font-size:12px;cursor:pointer;}
.pill-btn:hover{background:#007bff;color:#fff;}

/* Battle Ready Status Badges */
.my-media-battle-status {
    margin:8px 0;
}

.status-badge {
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.status-badge.status-ready {
    background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
    color:#fff;
    box-shadow:0 2px 4px rgba(40,167,69,0.3);
}

.status-badge.status-not-ready {
    background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);
    color:#fff;
    box-shadow:0 2px 4px rgba(108,117,125,0.3);
}

.status-badge.status-in-battle {
    background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);
    color:#fff;
    box-shadow:0 2px 4px rgba(0,123,255,0.3);
    animation:pulse-battle 2s ease-in-out infinite;
}

@keyframes pulse-battle {
    0%,100% { opacity:1; }
    50% { opacity:0.8; }
}

/* Grid View Status Badge Overlay */
.status-badge-overlay {
    position:absolute;
    top:12px;
    left:12px;
    z-index:5;
}

.status-badge-overlay .badge {
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.status-badge-overlay .badge-ready {
    background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
    color:#fff;
}

.status-badge-overlay .badge-not-ready {
    background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);
    color:#fff;
}

.status-badge-overlay .badge-in-battle {
    background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);
    color:#fff;
    animation:pulse-battle 2s ease-in-out infinite;
}

/* Pit Toggle Button */
.amb-pit-toggle-btn {
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:999px;
    cursor:pointer;
    transition:all 0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid transparent;
    background:transparent;
    color:var(--ambattles-danger,#dc3545);
    line-height:1;
}

.amb-pit-toggle-btn.is-ready {
    background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
    border-color:rgba(255,255,255,0.0);
    color:#ffffff;
}

.amb-pit-toggle-btn.not-ready {
    /* No gray background when not ready */
    background:transparent;
    border-color:rgba(220,53,69,0.35);
    color:var(--ambattles-danger,#dc3545);
}

.amb-pit-toggle-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,0,0,0.14);
    border-color:rgba(220,53,69,0.55);
}

.amb-pit-toggle-btn i {
    font-size:16px;
    line-height:1;
}

/* Battle Ready Toggle Button */
.amb-battle-ready-btn {
    color:white;
    border:none;
    padding:8px;
    border-radius:50%;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
}

.amb-battle-ready-btn.is-ready {
    background:linear-gradient(135deg,#28a745 0%,#20c997 100%);
}

.amb-battle-ready-btn:not(.is-ready) {
    background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);
}

.amb-battle-ready-btn:hover {
    transform:scale(1.1);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Track Actions Positioning */
.track-actions-primary {
    position:absolute;
    bottom:8px;
    right:8px;
    z-index:10;
    display:flex;
    gap:8px;
    align-items:center;
}

.track-actions-social {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    height:35px;
}

/* Media Item Layout Utilities */
.amb-media-flex-between {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    line-height:12px;
    font-weight:100;
    height:15px;
    padding:0;
}

.amb-media-actions {
    display:flex;
    gap:6px;
    align-items:center;
    height:35px;
    padding:0;
}

.amb-media-table {
    display:table;
    width:100%;
    margin-top:1px;
}

.amb-media-table-row {
    display:table-row;
}

.amb-media-table-cell {
    display:table-cell;
    padding:0;
}

.amb-media-table-cell-15 {
    width:15%;
}

.amb-media-table-cell-80 {
    width:80%;
    vertical-align:middle;
} 

/* modules/amBattles/css/play_buttons.css */


/**
 * Play Buttons CSS - Interactive Player Controls
 * Modern play button states and animations
 * @author The Arcitech 2026
 */

/* ============================================
   Play Now Button States
   ============================================ */
.play-now-btn {
    position:relative;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.play-now-btn:hover {
    transform:scale(1.1);
}

.play-now-btn:active {
    transform:scale(0.95);
}

/* Playing State */
.play-now-btn.playing {
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% {
        transform:scale(1);
        opacity:1;
    }
    50% {
        transform:scale(1.05);
        opacity:0.8;
    }
}

.play-now-btn.playing svg {
    animation:rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/* ============================================
   Add to Queue Button States
   ============================================ */
.add-to-queue-btn {
    position:relative;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.add-to-queue-btn:hover {
    transform:translateY(-2px);
}

.add-to-queue-btn:active {
    transform:translateY(0);
}

/* Added State */
.add-to-queue-btn.added {
    background:linear-gradient(135deg,#28a745 0%,#20c997 100%) !important;
    animation:checkmark 0.6s ease;
}

@keyframes checkmark {
    0%,100% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.15);
    }
}

.add-to-queue-btn.added svg {
    animation:checkRotate 0.6s ease;
}

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

/* ============================================
   Battle Detail Play Button
   ============================================ */
.am-btn-play-media {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    border:3px solid rgba(250,112,154,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:10;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.am-btn-play-media:hover {
    transform:translate(-50%,-50%) scale(1.1);
    background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
    border-color:white;
    box-shadow:0 12px 30px rgba(250,112,154,0.4);
}

.am-btn-play-media:active {
    transform:translate(-50%,-50%) scale(0.95);
}

.am-btn-play-media svg,
.am-btn-play-media i {
    font-size:32px;
    color:#fa709a;
    transition:all 0.3s ease;
}

.am-btn-play-media:hover svg,
.am-btn-play-media:hover i {
    color:white;
}

/* Playing State */
.am-btn-play-media.playing {
    animation:playingPulse 1.5s ease-in-out infinite;
    background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
    border-color:white;
}

@keyframes playingPulse {
    0%,100% {
        box-shadow:0 8px 20px rgba(250,112,154,0.3);
    }
    50% {
        box-shadow:0 12px 35px rgba(250,112,154,0.6);
    }
}

.am-btn-play-media.playing svg,
.am-btn-play-media.playing i {
    color:white;
    animation:playingSpin 3s linear infinite;
}

@keyframes playingSpin {
    0% {
        transform:rotate(0deg) scale(1);
    }
    50% {
        transform:rotate(180deg) scale(1.1);
    }
    100% {
        transform:rotate(360deg) scale(1);
    }
}

/* ============================================
   Compact Play Button (List View)
   ============================================ */
.compact-play-btn {
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    border:2px solid rgba(250,112,154,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    padding-left:2px;
}

.compact-play-btn:hover {
    background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
    border-color:white;
    transform:scale(1.1);
}

.compact-play-btn svg {
    fill:#fa709a;
    transition:all 0.3s ease;
}

.compact-play-btn:hover svg {
    fill:white;
}

/* ============================================
   Media Play Overlay (Grid View)
   ============================================ */
.media-play-overlay {
    opacity:0;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none;
}

.arena-item-grid-card:hover .media-play-overlay,
.my-media-item-grid-card:hover .media-play-overlay,
.battle-item-grid:hover .media-play-overlay {
    opacity:1;
    pointer-events:all;
}

.media-play-overlay .media-play-btn {
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    border:3px solid rgba(250,112,154,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.media-play-overlay .media-play-btn:hover {
    transform:scale(1.15);
    background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
    border-color:white;
}

.media-play-overlay .media-play-btn svg {
    width:28px;
    height:28px;
    fill:#fa709a;
    transition:all 0.3s ease;
    margin-left:3px;
}

.media-play-overlay .media-play-btn:hover svg {
    fill:white;
}

/* ============================================
   Compact Row Click Feedback
   ============================================ */
.music-compact-row {
    cursor:pointer;
    transition:background-color 0.2s ease;
}

.music-compact-row:active {
    background-color:rgba(250,112,154,0.05);
}

/* ============================================
   Loading State
   ============================================ */
.play-btn-loading {
    pointer-events:none;
    opacity:0.6;
}

.play-btn-loading::after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:inherit;
    border:2px solid transparent;
    border-top-color:#fa709a;
    animation:spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width:768px) {
    .am-btn-play-media {
        width:60px;
        height:60px;
    }
    
    .am-btn-play-media svg,
    .am-btn-play-media i {
        font-size:24px;
    }
    
    .media-play-overlay .media-play-btn {
        width:50px;
        height:50px;
    }
    
    .media-play-overlay .media-play-btn svg {
        width:22px;
        height:22px;
    }
}

@media (max-width:480px) {
    .am-btn-play-media {
        width:50px;
        height:50px;
    }
    
    .am-btn-play-media svg,
    .am-btn-play-media i {
        font-size:20px;
    }
}


/* modules/amBattles/css/universal_challenge_modal.css */


/**
 * Universal Challenge Modal System - amBattles
 * Modern modal styling for challenge creation
 * 
 * @copyright 2026 The Jamroom Network
 */

/* ============================================
   MODAL OVERLAY
   ============================================ */
.jr-universal-challenge-modal {
    display:block !important;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(4px);
    z-index:99999;
    animation:fadeIn 0.2s ease-out;
}

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

/* ============================================
   MODAL CONTENT
   ============================================ */
.jr-universal-challenge-modal .modal-content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#1a1a1a;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    max-width:900px;
    width:90%;
    max-height:90vh;
    overflow:hidden;
    animation:slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity:0;
        transform:translate(-50%,-40%);
    }
    to {
        opacity:1;
        transform:translate(-50%,-50%);
    }
}

/* ============================================
   MODAL HEADER
   ============================================ */
.jr-universal-challenge-modal .modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    background:linear-gradient(135deg,#2a2a2a 0%,#1f1f1f 100%);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.jr-universal-challenge-modal .modal-header h3 {
    margin:0;
    font-size:20px;
    font-weight:600;
    color:#ffffff;
    display:flex;
    align-items:center;
    gap:10px;
}

.jr-universal-challenge-modal .close-btn {
    background:none;
    border:none;
    color:#999;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
    border-radius:6px;
}

.jr-universal-challenge-modal .close-btn:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

/* ============================================
   MODAL BODY
   ============================================ */
.jr-universal-challenge-modal .modal-body {
    padding:24px;
    max-height:calc(90vh - 80px);
    overflow-y:auto;
}

/* Custom scrollbar */
.jr-universal-challenge-modal .modal-body::-webkit-scrollbar {
    width:8px;
}

.jr-universal-challenge-modal .modal-body::-webkit-scrollbar-track {
    background:#1a1a1a;
}

.jr-universal-challenge-modal .modal-body::-webkit-scrollbar-thumb {
    background:#444;
    border-radius:4px;
}

.jr-universal-challenge-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background:#555;
}

/* ============================================
   LOADING STATE
   ============================================ */
.jr-universal-challenge-modal .challenge-loading {
    text-align:center;
    padding:40px 20px;
}

.jr-universal-challenge-modal .challenge-loading .spinner {
    width:50px;
    height:50px;
    margin:0 auto 20px;
    border:4px solid rgba(255,255,255,0.1);
    border-top-color:#6366f1;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

.jr-universal-challenge-modal .challenge-loading p {
    color:#999;
    font-size:16px;
    margin:0;
}

/* ============================================
   ERROR STATE
   ============================================ */
.jr-universal-challenge-modal .challenge-error {
    text-align:center;
    padding:40px 20px;
}

.jr-universal-challenge-modal .challenge-error svg {
    color:#ef4444;
    margin-bottom:20px;
}

.jr-universal-challenge-modal .challenge-error p {
    color:#ccc;
    font-size:16px;
    margin:0 0 20px;
}

/* ============================================
   CHALLENGE FORM STYLING
   ============================================ */
.jr-universal-challenge-modal .challenge-form-content {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:20px;
    margin-bottom:24px;
}

.jr-universal-challenge-modal .opponent-section,
.jr-universal-challenge-modal .challenger-section {
    padding:20px;
    background:rgba(255,255,255,0.05);
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.1);
}

.jr-universal-challenge-modal .opponent-section h3,
.jr-universal-challenge-modal .challenger-section h3 {
    margin:0 0 16px;
    font-size:16px;
    font-weight:600;
    color:#fff;
}

.jr-universal-challenge-modal .vs-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    color:#6366f1;
    background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.2));
    border-radius:50%;
    width:60px;
    height:60px;
    margin:auto 0;
    border:2px solid rgba(99,102,241,0.5);
}

.jr-universal-challenge-modal .selected-media {
    background:rgba(0,0,0,0.3);
    border-radius:8px;
    padding:16px;
    margin-bottom:12px;
}

.jr-universal-challenge-modal .selected-media h4 {
    margin:8px 0;
    color:#fff;
    font-size:14px;
}

.jr-universal-challenge-modal .selected-media img {
    width:100%;
    border-radius:6px;
    margin-bottom:8px;
}

/* Form Groups */
.jr-universal-challenge-modal .form-group {
    margin-bottom:20px;
}

.jr-universal-challenge-modal .form-group label {
    display:block;
    margin-bottom:8px;
    color:#ccc;
    font-size:14px;
    font-weight:500;
}

.jr-universal-challenge-modal .form-group input,
.jr-universal-challenge-modal .form-group select {
    width:100%;
    padding:10px 12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:6px;
    color:#fff;
    font-size:14px;
    transition:all 0.2s ease;
}

.jr-universal-challenge-modal .form-group input:focus,
.jr-universal-challenge-modal .form-group select:focus {
    outline:none;
    border-color:#6366f1;
    background:rgba(255,255,255,0.08);
}

.jr-universal-challenge-modal .static-field {
    padding:10px 12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:6px;
    color:#fff;
    font-size:14px;
}

/* Form Actions */
.jr-universal-challenge-modal .form-actions {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.jr-universal-challenge-modal .btn-send-challenge {
    padding:12px 32px;
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    gap:8px;
}

.jr-universal-challenge-modal .btn-send-challenge:hover:not(:disabled) {
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(99,102,241,0.3);
}

.jr-universal-challenge-modal .btn-send-challenge:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* Small Spinner for Button */
.am-spinner-small {
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.challenge-success-toast,
.am-error-toast {
    position:fixed;
    top:24px;
    right:24px;
    background:#10b981;
    color:#fff;
    padding:16px 20px;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    display:none;
    align-items:center;
    gap:12px;
    z-index:100000;
    animation:slideInRight 0.3s ease-out;
}

.am-error-toast {
    background:#ef4444;
}

@keyframes slideInRight {
    from {
        opacity:0;
        transform:translateX(100px);
    }
    to {
        opacity:1;
        transform:translateX(0);
    }
}

.challenge-success-toast svg,
.am-error-toast svg {
    flex-shrink:0;
}

.challenge-success-toast span,
.am-error-toast span {
    font-size:15px;
    font-weight:500;
}

/* ============================================
   MEDIA CAROUSEL IN MODAL
   ============================================ */
.jr-universal-challenge-modal .media-carousel {
    position:relative;
    overflow:hidden;
}

.jr-universal-challenge-modal .media-carousel-view {
    overflow:hidden;
    width:100%;
}

.jr-universal-challenge-modal .media-select-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px;
    padding:10px;
}

.jr-universal-challenge-modal .media-select-item {
    cursor:pointer !important;
    transition:all 0.2s ease;
    border-radius:8px;
    overflow:hidden;
    background:rgba(255,255,255,0.05);
    border:3px solid rgba(255,255,255,0.2);
    padding:12px;
    position:relative;
}

.jr-universal-challenge-modal .media-select-item:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(99,102,241,0.4);
    border-color:#6366f1;
    background:rgba(99,102,241,0.1);
}

.jr-universal-challenge-modal .media-select-item.selected {
    border:3px solid #10b981 !important;
    background:rgba(16,185,129,0.2) !important;
    box-shadow:0 0 25px rgba(16,185,129,0.6) !important;
}

.jr-universal-challenge-modal .media-select-item.selected::after {
    content:'✓';
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    background:#10b981;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:bold;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.jr-universal-challenge-modal .media-select-item .media-thumb {
    text-align:center;
}

.jr-universal-challenge-modal .media-select-item .media-thumb img {
    width:100%;
    border-radius:6px;
    margin-bottom:8px;
}

.jr-universal-challenge-modal .media-select-item .media-thumb span {
    display:block;
    color:#fff;
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
    line-height:1.4;
}

.jr-universal-challenge-modal .media-select-item .media-thumb small {
    display:block;
    color:#999;
    font-size:11px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width:768px) {
    .jr-universal-challenge-modal .modal-content {
        width:95%;
        max-height:95vh;
    }
    
    .jr-universal-challenge-modal .challenge-form-content {
        grid-template-columns:1fr;
        gap:16px;
    }
    
    .jr-universal-challenge-modal .vs-divider {
        width:100%;
        height:auto;
        padding:12px;
        border-radius:8px;
    }
    
    .jr-universal-challenge-modal .media-select-grid {
        grid-template-columns:repeat(2,1fr);
    }
    
    .challenge-success-toast,
    .am-error-toast {
        right:12px;
        left:12px;
        top:12px;
    }
}

@media (max-width:480px) {
    .jr-universal-challenge-modal .modal-header {
        padding:16px;
    }
    
    .jr-universal-challenge-modal .modal-header h3 {
        font-size:18px;
    }
    
    .jr-universal-challenge-modal .modal-body {
        padding:16px;
    }
    
    .jr-universal-challenge-modal .media-select-grid {
        grid-template-columns:1fr;
    }
    
    .jr-universal-challenge-modal .opponent-list,
    .jr-universal-challenge-modal .media-list {
        grid-template-columns:1fr;
    }
    
    .jr-universal-challenge-modal .opponent-card,
    .jr-universal-challenge-modal .media-card {
        flex-direction:column;
        text-align:center;
    }
}

/* ============================================
   OPPONENT SELECTION
   ============================================ */
.jr-universal-challenge-modal .opponent-selection {
    padding:10px 0;
}

.jr-universal-challenge-modal .opponent-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:15px;
    max-height:500px;
    overflow-y:auto;
    padding:10px;
}

.jr-universal-challenge-modal .opponent-card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:15px;
    transition:all 0.3s ease;
}

.jr-universal-challenge-modal .opponent-card:hover {
    background:rgba(255,255,255,0.08);
    border-color:#6366f1;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(99,102,241,0.2);
}

.jr-universal-challenge-modal .opponent-avatar {
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
    background:rgba(255,255,255,0.1);
}

.jr-universal-challenge-modal .opponent-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-universal-challenge-modal .avatar-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    color:#fff;
    font-size:24px;
    font-weight:700;
}

.jr-universal-challenge-modal .opponent-info {
    flex:1;
    min-width:0;
}

.jr-universal-challenge-modal .opponent-info h4 {
    margin:0 0 5px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jr-universal-challenge-modal .opponent-stats {
    margin:0;
    font-size:13px;
    color:#999;
}

.jr-universal-challenge-modal .btn-select-opponent {
    flex-shrink:0;
    padding:8px 16px;
    font-size:14px;
    white-space:nowrap;
}

/* ============================================
   MEDIA SELECTION
   ============================================ */
.jr-universal-challenge-modal .media-selection {
    padding:10px 0;
}

.jr-universal-challenge-modal .media-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:15px;
    max-height:500px;
    overflow-y:auto;
    padding:10px;
}

.jr-universal-challenge-modal .media-card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:15px;
    transition:all 0.3s ease;
}

.jr-universal-challenge-modal .media-card:hover {
    background:rgba(255,255,255,0.08);
    border-color:#6366f1;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(99,102,241,0.2);
}

.jr-universal-challenge-modal .media-artwork {
    width:80px;
    height:80px;
    border-radius:6px;
    overflow:hidden;
    flex-shrink:0;
    background:rgba(255,255,255,0.1);
}

.jr-universal-challenge-modal .media-artwork img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-universal-challenge-modal .artwork-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    color:rgba(255,255,255,0.8);
}

.jr-universal-challenge-modal .media-info {
    flex:1;
    min-width:0;
}

.jr-universal-challenge-modal .media-info h4 {
    margin:0 0 8px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jr-universal-challenge-modal .media-meta {
    margin:0;
    font-size:13px;
    color:#999;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.jr-universal-challenge-modal .btn-challenge-media {
    flex-shrink:0;
    padding:8px 16px;
    font-size:14px;
    white-space:nowrap;
}

/* ============================================
   SKILL PILLS
   ============================================ */
.am-skill-pill {
    text-align:center;
    margin-top:6px;
    padding:4px 12px;
    background:rgba(99,102,241,0.1);
    border-radius:4px;
    color:#ccc;
    font-size:13px;
}

.am-skill-pill.opponent-skill,
.am-skill-pill.challenger-skill {
    text-align:center;
    margin-top:6px;
}

/* ============================================
   SELECTED MEDIA DISPLAY
   ============================================ */
#selected-media-display {
    display:none;
}

#selected-media-display.active {
    display:block;
}

/* modules/amPlaylist/css/amPlaylist.css */


/* Jamroom Playlist Module CSS */
/* All styles prefixed with amPlaylist- to avoid conflicts */

/* Playlist Add/Edit Box */
.amPlaylist-playlist_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#EEEEEE;
    border:1px solid #999999;
    border-radius:5px;
    padding:12px;
    display:none;
    z-index:10000;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCCCCC;
}

#playlist_message {
    padding-left:5px;
    font-size:12px;
    margin-bottom:6px;
}

.amPlaylist-playlist_name {
    padding:5px;
}

.amPlaylist-playlist_name a {
    text-decoration:underline;
}

.amPlaylist-playlist_count {
    white-space:nowrap;
    font-size:10px;
    padding:0 10px;
    text-align:center;
}

.amPlaylist-playlist_add {
    padding:0 0 5px 0;
}

.amPlaylist-playlist_button {
    width:70px;
    margin:0 2px 5px 0;
}

.amPlaylist-playlist_success {
    border-radius:5px;
    background-color:#CCFF99;
    color:#000000;
}

.amPlaylist-playlist_error {
    border-radius:5px;
    background-color:#FFDD00;
    color:#000000;
}

#playlist_close,
#playlist_prev,
#playlist_next {
    cursor:pointer;
}

/* Playlist List Item Styles - Module-specific prefixes */
.amPlaylist-playlist-item {
    position:relative;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.amPlaylist-playlist-item:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.amPlaylist-playlist-thumb {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:120px;
}

.amPlaylist-playlist-image {
    border-radius:4px;
    transition:opacity 0.2s ease;
}

.amPlaylist-playlist-image:hover {
    opacity:0.9;
}

.amPlaylist-playlist-default-image {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:120px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:4px;
    color:#fff;
}

.amPlaylist-playlist-info {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.amPlaylist-playlist-title-link {
    font-weight:600;
    transition:color 0.2s ease;
}

.amPlaylist-playlist-title-link:hover {
    color:#667eea;
}

.amPlaylist-playlist-meta,
.amPlaylist-playlist-date,
.amPlaylist-playlist-profile {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.9em;
}

.amPlaylist-playlist-count {
    font-weight:600;
    color:#667eea;
}

.amPlaylist-playlist-rating {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
}

.amPlaylist-playlist-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
}

.amPlaylist-playlist-empty {
    padding:40px 20px;
    text-align:center;
    color:#666;
}

/* Responsive Styles */
@media handheld,only screen and (max-width:767px) {
    .amPlaylist-playlist_box {
        position:absolute;
        width:80%;
        right:0;
    }

    .amPlaylist-playlist_button {
        width:50px;
    }

    .amPlaylist-playlist_name {
        font-size:12px;
    }

    .amPlaylist-playlist-thumb {
        min-height:80px;
    }

    .amPlaylist-playlist-default-image {
        height:80px;
    }

    .amPlaylist-playlist-info {
        gap:6px;
    }

    .amPlaylist-playlist-meta,
    .amPlaylist-playlist-date,
    .amPlaylist-playlist-profile {
        font-size:0.85em;
    }
}

/* Accessibility Enhancements */
.amPlaylist-playlist-item:focus-within {
    outline:2px solid #667eea;
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce) {
    .amPlaylist-playlist-item,
    .amPlaylist-playlist-image,
    .amPlaylist-playlist-title-link {
        transition:none;
    }
}

/* -------------------------------------------------
   Discover Page Layout
------------------------------------------------- */
.amPlaylist-playlist-discover-container {
    max-width:1400px;
    margin:0 auto;
    padding:var(--playlist-spacing-lg);
}

.amPlaylist-discover-header {
    text-align:center;
    margin-bottom:var(--playlist-spacing-xl);
}

.amPlaylist-discover-header h1 {
    font-size:var(--playlist-title-size-xlarge);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}

.amPlaylist-discover-subtitle {
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-lg);
}

.amPlaylist-discover-search {
    max-width:600px;
    margin:0 auto;
}

.amPlaylist-search-form {
    display:flex;
    gap:var(--playlist-spacing-sm);
}

.amPlaylist-search-input {
    flex:1;
    padding:var(--playlist-spacing-sm) var(--playlist-spacing-md);
    border-radius:var(--playlist-border-radius);
    border:1px solid var(--playlist-border-color);
    background:var(--playlist-bg-secondary);
    color:var(--playlist-text-primary);
}

.amPlaylist-discover-layout {
    display:grid;
    grid-template-columns:250px 1fr;
    gap:var(--playlist-spacing-xl);
}

.amPlaylist-discover-sidebar {
    position:sticky;
    top:var(--playlist-spacing-lg);
    height:fit-content;
}

.amPlaylist-sidebar-section {
    margin-bottom:var(--playlist-spacing-lg);
}

.amPlaylist-sidebar-section h3 {
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}

.amPlaylist-category-list,
.amPlaylist-browse-list {
    list-style:none;
    padding:0;
    margin:0;
}

.amPlaylist-category-link,
.amPlaylist-browse-link {
    display:flex;
    align-items:center;
    padding:var(--playlist-spacing-sm);
    border-radius:var(--playlist-border-radius-small);
    color:var(--playlist-text-secondary);
    text-decoration:none;
    transition:all var(--playlist-transition-speed);
}

.amPlaylist-category-link:hover,
.amPlaylist-browse-link:hover {
    background:var(--playlist-bg-hover);
    color:var(--playlist-text-primary);
}

.amPlaylist-category-link.active {
    background:var(--playlist-accent-color);
    color:#ffffff;
}

.amPlaylist-category-icon {
    margin-right:var(--playlist-spacing-sm);
}

.amPlaylist-discover-controls {
    display:flex;
    justify-content:flex-end;
    margin-bottom:var(--playlist-spacing-lg);
}

.amPlaylist-sort-controls {
    display:flex;
    align-items:center;
    gap:var(--playlist-spacing-sm);
}

.amPlaylist-playlist-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--playlist-card-width),1fr));
    gap:var(--playlist-card-gap);
}

.amPlaylist-no-playlists {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--playlist-spacing-xl);
    color:var(--playlist-text-secondary);
}

.amPlaylist-discover-pagination {
    margin-top:var(--playlist-spacing-xl);
    text-align:center;
}

@media (max-width:768px) {
    .amPlaylist-discover-layout {
        grid-template-columns:1fr;
    }

    .amPlaylist-discover-sidebar {
        position:static;
    }
}


/* modules/amPlaylist/css/cover_upload_modal.css */


/**
 * Jamroom Playlists - Cover Upload Modal Styles
 * @copyright 2026 The Jamroom Network
 */

/* Modal Overlay */
.playlist-upload-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:fadeIn 0.2s ease;
}

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

.playlist-upload-modal-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(4px);
}

.playlist-upload-modal-content {
    position:relative;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    border-radius:16px;
    width:90%;
    max-width:600px;
    max-height:90vh;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    animation:slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform:translateY(20px);
        opacity:0;
    }
    to {
        transform:translateY(0);
        opacity:1;
    }
}

/* Header */
.playlist-upload-modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 28px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.playlist-upload-modal-header h2 {
    margin:0;
    font-size:22px;
    font-weight:600;
    color:#fff;
}

.modal-close-btn {
    background:transparent;
    border:none;
    color:rgba(255,255,255,0.6);
    cursor:pointer;
    padding:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    transition:all 0.2s ease;
}

.modal-close-btn:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

/* Body */
.playlist-upload-modal-body {
    padding:32px 28px;
}

/* Drop Zone */
.cover-upload-drop-zone {
    border:2px dashed rgba(255,255,255,0.2);
    border-radius:12px;
    padding:48px 24px;
    text-align:center;
    transition:all 0.3s ease;
    background:rgba(255,255,255,0.02);
}

.cover-upload-drop-zone.drag-over {
    border-color:#1DB954;
    background:rgba(29,185,84,0.1);
    transform:scale(1.02);
}

.upload-icon {
    margin:0 auto 16px;
    color:rgba(255,255,255,0.4);
}

.cover-upload-drop-zone h3 {
    margin:0 0 8px;
    font-size:18px;
    font-weight:600;
    color:#fff;
}

.upload-hint {
    margin:12px 0;
    font-size:14px;
    color:rgba(255,255,255,0.5);
}

.btn-browse {
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    color:#fff;
    border:none;
    padding:12px 32px;
    border-radius:24px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
    margin:8px 0 16px;
}

.btn-browse:hover {
    transform:scale(1.05);
    box-shadow:0 8px 24px rgba(29,185,84,0.3);
}

.upload-requirements {
    margin:16px 0 0;
    font-size:12px;
    color:rgba(255,255,255,0.4);
}

/* Preview */
.cover-upload-preview {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    max-width:400px;
    margin:0 auto;
}

.cover-upload-preview img {
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
}

.preview-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s ease;
}

.cover-upload-preview:hover .preview-overlay {
    opacity:1;
}

.btn-change {
    background:rgba(255,255,255,0.95);
    color:#000;
    border:none;
    padding:12px 24px;
    border-radius:24px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all 0.2s ease;
}

.btn-change:hover {
    transform:scale(1.05);
}

.preview-filename {
    margin:12px 0 0;
    font-size:13px;
    color:rgba(255,255,255,0.7);
    text-align:center;
    word-break:break-all;
}

/* Progress */
.cover-upload-progress {
    margin-top:24px;
}

.progress-bar {
    width:100%;
    height:8px;
    background:rgba(255,255,255,0.1);
    border-radius:4px;
    overflow:hidden;
}

.progress-fill {
    height:100%;
    background:linear-gradient(90deg,#1DB954 0%,#1ed760 100%);
    border-radius:4px;
    transition:width 0.3s ease;
    width:0%;
}

.progress-text {
    margin:12px 0 0;
    font-size:14px;
    color:rgba(255,255,255,0.7);
    text-align:center;
}

/* Footer */
.playlist-upload-modal-footer {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:20px 28px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.playlist-upload-modal-footer .btn-secondary,
.playlist-upload-modal-footer .btn-primary {
    padding:10px 24px;
    border-radius:24px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    border:none;
    transition:all 0.2s ease;
}

.playlist-upload-modal-footer .btn-secondary {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

.playlist-upload-modal-footer .btn-secondary:hover {
    background:rgba(255,255,255,0.15);
}

.playlist-upload-modal-footer .btn-primary {
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    color:#fff;
}

.playlist-upload-modal-footer .btn-primary:hover:not(:disabled) {
    transform:scale(1.05);
    box-shadow:0 8px 24px rgba(29,185,84,0.3);
}

.playlist-upload-modal-footer .btn-primary:disabled {
    opacity:0.5;
    cursor:not-allowed;
}

/* Responsive */
@media (max-width:640px) {
    .playlist-upload-modal-content {
        width:95%;
        max-height:95vh;
    }
    
    .playlist-upload-modal-header,
    .playlist-upload-modal-body,
    .playlist-upload-modal-footer {
        padding-left:20px;
        padding-right:20px;
    }
    
    .cover-upload-drop-zone {
        padding:32px 16px;
    }
}


/* modules/amPlaylist/css/amPlaylist_universal_modal.css */


/**
 * Universal Playlist Modal CSS
 * Matches the Comment Modal styling for consistent UX
 * 
 * @copyright 2026 The Jamroom Network
 */

/* Playlist Modal Overlay - matches comment modal */
.playlist_box {
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:600px !important;
    max-width:90vw !important;
    max-height:80vh !important;
    text-align:left !important;
    background:#1a1a1a !important;
    border:none !important;
    border-radius:12px !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    z-index:10000 !important;
    overflow:hidden !important;
    box-shadow:0 8px 32px rgba(0,0,0,0.6) !important;
    animation:fadeInModal 0.2s ease-in !important;
    pointer-events:auto !important;
}

@keyframes fadeInModal {
    from {
        opacity:0;
        transform:translate(-50%,-50%) scale(0.95);
    }
    to {
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
}

/* Add dark overlay behind modal */
.playlist_box::before {
    content:'';
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.85);
    z-index:-1;
    pointer-events:none;
}

/* Message Area */
#playlist_message {
    padding:12px 24px !important;
    margin:0 !important;
    font-size:14px !important;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

#playlist_message.playlist_success {
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%) !important;
    color:white !important;
    border-radius:0 !important;
}

#playlist_message.playlist_error {
    background:linear-gradient(135deg,#dc3545 0%,#ff4757 100%) !important;
    color:white !important;
    border-radius:0 !important;
}

/* Form Container */
.playlist_box #new_playlist_form {
    padding:0 !important;
    overflow-y:auto !important;
    max-height:calc(80vh - 100px) !important;
}

/* Table Styling */
.playlist_box table {
    width:100% !important;
    border-collapse:collapse !important;
}

.playlist_box tr {
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.playlist_box tr:last-child {
    border-bottom:none;
}

/* Playlist Name Cell */
.playlist_name {
    padding:16px 12px !important;
    color:#fff !important;
}

.playlist_name a {
    color:#0064a0 !important;
    text-decoration:none !important;
    font-weight:600 !important;
    font-size:15px !important;
    transition:color 0.2s !important;
}

.playlist_name a:hover {
    color:#0078c0 !important;
    text-decoration:underline !important;
}

/* Track Count */
.playlist_count {
    white-space:nowrap !important;
    font-size:13px !important;
    padding:16px 10px !important;
    text-align:center !important;
    color:#888 !important;
}

/* Add Button Cell */
.playlist_add {
    padding:16px 12px !important;
    text-align:right !important;
}

/* Buttons - Modern Styling */
.playlist_button {
    width:auto !important;
    min-width:80px !important;
    margin:0 !important;
    background:linear-gradient(135deg,#0064a0 0%,#0078c0 100%) !important;
    color:white !important;
    border:none !important;
    padding:8px 16px !important;
    border-radius:8px !important;
    font-weight:600 !important;
    font-size:13px !important;
    cursor:pointer !important;
    transition:all 0.2s !important;
}

.playlist_button:hover {
    transform:translateY(-2px) !important;
    box-shadow:0 4px 12px rgba(0,100,160,0.4) !important;
}

.playlist_button:active {
    transform:translateY(0) !important;
}

.playlist_button:disabled {
    opacity:0.6 !important;
    cursor:not-allowed !important;
    transform:none !important;
}

/* New Playlist Input */
#new_playlist_form input[type="text"] {
    width:100% !important;
    padding:12px 16px !important;
    background:rgba(0,0,0,0.3) !important;
    border:1px solid rgba(255,255,255,0.1) !important;
    border-radius:8px !important;
    color:#fff !important;
    font-family:inherit !important;
    font-size:14px !important;
    transition:all 0.2s !important;
}

#new_playlist_form input[type="text"]:focus {
    outline:none !important;
    border-color:#0064a0 !important;
    background:rgba(0,0,0,0.4) !important;
    box-shadow:0 0 0 3px rgba(0,100,160,0.1) !important;
}

#new_playlist_form input[type="text"].error {
    border-color:#dc3545 !important;
    box-shadow:0 0 0 3px rgba(220,53,69,0.1) !important;
}

#new_playlist_form input[type="text"]::placeholder {
    color:#666 !important;
}

/* New Playlist Section - Now at Top */
.playlist_box tr.new-playlist-row {
    background:rgba(0,100,160,0.05) !important;
}

.playlist_box tr.new-playlist-row td {
    vertical-align:middle !important;
}

/* Divider Between New and Existing */
.playlist_box tr.playlist-divider td {
    background:rgba(0,0,0,0.2) !important;
    border-top:2px solid rgba(255,255,255,0.1) !important;
    border-bottom:1px solid rgba(255,255,255,0.05) !important;
}

/* Bottom Controls */
.playlist_box > div:last-child {
    padding:16px 24px !important;
    border-top:1px solid rgba(255,255,255,0.1) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    background:rgba(0,0,0,0.2) !important;
    position:relative !important;
    z-index:1 !important;
}

/* Close Button - Blue High Visibility */
#playlist_close {
    cursor:pointer !important;
    color:#fff !important;
    transition:all 0.2s !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#0064a0 0%,#0078c0 100%) !important;
    text-decoration:none !important;
    position:relative !important;
    z-index:10000 !important;
    pointer-events:auto !important;
    font-size:24px !important;
    font-weight:700 !important;
    line-height:1 !important;
    box-shadow:0 2px 8px rgba(0,100,160,0.4) !important;
    border:2px solid rgba(255,255,255,0.2) !important;
}

#playlist_close:hover {
    color:#fff !important;
    background:linear-gradient(135deg,#0078c0 0%,#008fe0 100%) !important;
    transform:scale(1.1) !important;
    box-shadow:0 4px 12px rgba(0,100,160,0.6) !important;
    border-color:rgba(255,255,255,0.4) !important;
}

#playlist_close:active {
    transform:scale(0.95) !important;
    box-shadow:0 1px 4px rgba(0,100,160,0.4) !important;
}

/* Ensure close icon is visible and WHITE */
#playlist_close svg,
#playlist_close span,
#playlist_close img,
#playlist_close path,
#playlist_close * {
    color:#fff !important;
    fill:#fff !important;
    stroke:#fff !important;
}

/* Activity Indicator */
.playlist_box .jr_default_indicator {
    margin:0 !important;
    display:inline-block !important;
    vertical-align:middle !important;
}

.playlist_box tr.new-playlist-row .jr_default_indicator {
    display:none !important;
}

.playlist_box tr.new-playlist-row.loading .jr_default_indicator {
    display:inline-block !important;
}

/* Page Navigation */
#playlist_prev,
#playlist_next {
    cursor:pointer !important;
    color:#0064a0 !important;
    transition:all 0.2s !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    height:32px !important;
    border-radius:50% !important;
}

#playlist_prev:hover,
#playlist_next:hover {
    color:#0078c0 !important;
    background:rgba(0,100,160,0.1) !important;
}

/* Pagination Row */
.playlist_box tr:has(#playlist_prev,#playlist_next) td {
    padding:12px !important;
    background:rgba(0,0,0,0.2) !important;
}

/* Loading State */
.playlist_box.loading {
    pointer-events:none;
    opacity:0.7;
}

.playlist_box.loading::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
    border:3px solid rgba(255,255,255,0.1);
    border-top-color:#0064a0;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    z-index:10;
}

@keyframes spin {
    to { transform:translate(-50%,-50%) rotate(360deg); }
}

/* Empty State */
.playlist_box .no-playlists {
    text-align:center;
    padding:40px 20px;
    color:#888;
}

.playlist_box .no-playlists svg {
    width:64px;
    height:64px;
    margin-bottom:16px;
    opacity:0.3;
}

/* Mobile Responsive */
@media (max-width:768px) {
    .playlist_box {
        width:95vw !important;
        max-height:85vh !important;
        border-radius:8px !important;
    }
    
    .playlist_box::after {
        padding:16px 20px !important;
        font-size:18px !important;
    }
    
    #playlist_message {
        padding:10px 20px !important;
        font-size:13px !important;
    }
    
    .playlist_box #new_playlist_form {
        padding:0 !important;
        max-height:calc(85vh - 90px) !important;
    }
    
    .playlist_box tr.new-playlist-row td {
        padding:12px 8px !important;
    }
    
    .playlist_box tr.new-playlist-row td:last-child {
        padding-left:4px !important;
    }
    
    .playlist_box tr.new-playlist-row input[type="submit"] {
        min-width:60px !important;
        padding:6px 10px !important;
        font-size:12px !important;
    }
    
    .playlist_box tr.playlist-divider td {
        padding:10px 0 !important;
        font-size:11px !important;
    }
    
    .playlist_name {
        padding:12px 8px !important;
    }
    
    .playlist_name a {
        font-size:14px !important;
    }
    
    .playlist_count {
        font-size:12px !important;
        padding:12px 6px !important;
    }
    
    .playlist_add {
        padding:12px 8px !important;
    }
    
    .playlist_button {
        min-width:70px !important;
        padding:6px 12px !important;
        font-size:12px !important;
    }
    
    .playlist_box > div:last-child {
        padding:12px 20px !important;
    }
    
    #playlist_close {
        width:48px !important;
        height:48px !important;
        font-size:28px !important;
    }
}

/* Scrollbar Styling */
.playlist_box #new_playlist_form::-webkit-scrollbar {
    width:8px;
}

.playlist_box #new_playlist_form::-webkit-scrollbar-track {
    background:rgba(0,0,0,0.2);
}

.playlist_box #new_playlist_form::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.2);
    border-radius:4px;
}

.playlist_box #new_playlist_form::-webkit-scrollbar-thumb:hover {
    background:rgba(255,255,255,0.3);
}

/* Focus Styles for Accessibility */
.playlist_box *:focus {
    outline:2px solid rgba(0,100,160,0.5) !important;
    outline-offset:2px !important;
}

.playlist_box button:focus,
.playlist_box input:focus,
.playlist_box a:focus {
    outline:2px solid #0064a0 !important;
    outline-offset:2px !important;
}

/* Smooth Transitions */
.playlist_box,
.playlist_box * {
    transition-timing-function:ease-in-out !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast:high) {
    .playlist_box {
        border:2px solid #fff !important;
    }
    
    .playlist_name a {
        text-decoration:underline !important;
    }
    
    .playlist_button {
        border:2px solid #0064a0 !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion:reduce) {
    .playlist_box,
    .playlist_box *,
    @keyframes fadeInModal,
    @keyframes spin {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}


/* modules/amPlaylist/css/design-system.css */


/**
 * jrPlaylist Design System
 * 
 * Comprehensive CSS variable system for easy customization
 * Supports dark/light themes,user density preferences,and accessibility
 * 
 * @copyright 2026 The Jamroom Network
 */

:root {
    /* ============================================================
     * COLOR PALETTE - Admin Configurable
     * ============================================================ */
    --playlist-accent-color:var(--admin-accent-color,#1DB954);
    --playlist-accent-hover:var(--admin-accent-hover,#1ed760);
    --playlist-accent-active:var(--admin-accent-active,#169c46);
    
    --playlist-bg-primary:var(--admin-bg-primary,#121212);
    --playlist-bg-secondary:var(--admin-bg-secondary,#181818);
    --playlist-bg-elevated:var(--admin-bg-elevated,#282828);
    --playlist-bg-hover:var(--admin-bg-hover,#2a2a2a);
    
    --playlist-text-primary:var(--admin-text-primary,#ffffff);
    --playlist-text-secondary:var(--admin-text-secondary,#b3b3b3);
    --playlist-text-tertiary:var(--admin-text-tertiary,#666666);
    
    --playlist-border-color:var(--admin-border-color,#333333);
    --playlist-divider-color:var(--admin-divider-color,#282828);
    
    /* Status Colors */
    --playlist-success-color:#1db954;
    --playlist-warning-color:#ffa500;
    --playlist-error-color:#e22134;
    --playlist-info-color:#3ea6ff;
    
    /* ============================================================
     * TYPOGRAPHY - Admin Configurable
     * ============================================================ */
    --playlist-font-family:var(--admin-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
    --playlist-font-family-mono:"Courier New",Courier,monospace;
    
    /* Font Sizes */
    --playlist-title-size-small:1.125rem;
    --playlist-title-size-medium:1.5rem;
    --playlist-title-size-large:2rem;
    --playlist-title-size-xlarge:2.5rem;
    
    --playlist-body-size:0.875rem;
    --playlist-body-size-large:1rem;
    --playlist-subtitle-size:0.75rem;
    
    /* Font Weights */
    --playlist-font-weight-light:300;
    --playlist-font-weight-normal:400;
    --playlist-font-weight-medium:500;
    --playlist-font-weight-bold:700;
    
    /* Line Heights */
    --playlist-line-height-tight:1.2;
    --playlist-line-height-normal:1.5;
    --playlist-line-height-relaxed:1.8;
    
    /* ============================================================
     * SPACING - User Density Preference
     * ============================================================ */
    --playlist-spacing-unit:8px;
    --playlist-spacing-compact:calc(var(--playlist-spacing-unit) * 0.75);
    --playlist-spacing-comfortable:var(--playlist-spacing-unit);
    --playlist-spacing-spacious:calc(var(--playlist-spacing-unit) * 1.5);
    
    /* Common Spacing Values */
    --playlist-spacing:var(--playlist-spacing-comfortable);
    --playlist-spacing-xs:calc(var(--playlist-spacing) * 0.5);
    --playlist-spacing-sm:calc(var(--playlist-spacing) * 1);
    --playlist-spacing-md:calc(var(--playlist-spacing) * 2);
    --playlist-spacing-lg:calc(var(--playlist-spacing) * 3);
    --playlist-spacing-xl:calc(var(--playlist-spacing) * 4);
    
    /* ============================================================
     * ANIMATION - Admin & User Configurable
     * ============================================================ */
    --playlist-transition-speed-fast:0.15s;
    --playlist-transition-speed-normal:0.3s;
    --playlist-transition-speed-slow:0.5s;
    --playlist-transition-speed:var(--admin-animation-speed,var(--playlist-transition-speed-normal));
    --playlist-transition-easing:cubic-bezier(0.4,0.0,0.2,1);
    --playlist-transition-ease-out:cubic-bezier(0.0,0.0,0.2,1);
    --playlist-transition-ease-in:cubic-bezier(0.4,0.0,1,1);
    
    /* ============================================================
     * PLAYER DIMENSIONS
     * ============================================================ */
    --player-height:90px;
    --player-height-compact:72px;
    --player-height-spotify:90px;
    --player-artwork-size:56px;
    --player-artwork-size-small:40px;
    --player-control-size:32px;
    --player-control-size-large:40px;
    
    /* ============================================================
     * LAYOUT & GRID
     * ============================================================ */
    --playlist-card-width:200px;
    --playlist-card-height:280px;
    --playlist-card-gap:24px;
    --playlist-border-radius:8px;
    --playlist-border-radius-large:12px;
    --playlist-border-radius-small:4px;
    
    /* ============================================================
     * SHADOWS
     * ============================================================ */
    --playlist-shadow-sm:0 2px 4px rgba(0,0,0,0.1);
    --playlist-shadow-md:0 4px 8px rgba(0,0,0,0.2);
    --playlist-shadow-lg:0 8px 16px rgba(0,0,0,0.3);
    --playlist-shadow-xl:0 16px 32px rgba(0,0,0,0.4);
    
    /* ============================================================
     * Z-INDEX LAYERS
     * ============================================================ */
    --playlist-z-base:1;
    --playlist-z-dropdown:1000;
    --playlist-z-sticky:1100;
    --playlist-z-modal-backdrop:1200;
    --playlist-z-modal:1300;
    --playlist-z-player:1400;
    --playlist-z-notification:1500;
}

/* ============================================================
 * DARK THEME (Default)
 * ============================================================ */
.playlist-theme-dark,
body.playlist-theme-dark {
    --playlist-bg-primary:#121212;
    --playlist-bg-secondary:#181818;
    --playlist-bg-elevated:#282828;
    --playlist-bg-hover:#2a2a2a;
    --playlist-text-primary:#ffffff;
    --playlist-text-secondary:#b3b3b3;
    --playlist-text-tertiary:#666666;
    --playlist-border-color:#333333;
    --playlist-divider-color:#282828;
}

/* ============================================================
 * LIGHT THEME
 * ============================================================ */
.playlist-theme-light,
body.playlist-theme-light {
    --playlist-bg-primary:#ffffff;
    --playlist-bg-secondary:#f6f6f6;
    --playlist-bg-elevated:#e8e8e8;
    --playlist-bg-hover:#f0f0f0;
    --playlist-text-primary:#000000;
    --playlist-text-secondary:#666666;
    --playlist-text-tertiary:#999999;
    --playlist-border-color:#dddddd;
    --playlist-divider-color:#eeeeee;
}

/* ============================================================
 * AUTO THEME (System Preference)
 * ============================================================ */
@media (prefers-color-scheme:light) {
    .playlist-theme-auto {
        --playlist-bg-primary:#ffffff;
        --playlist-bg-secondary:#f6f6f6;
        --playlist-bg-elevated:#e8e8e8;
        --playlist-bg-hover:#f0f0f0;
        --playlist-text-primary:#000000;
        --playlist-text-secondary:#666666;
        --playlist-text-tertiary:#999999;
        --playlist-border-color:#dddddd;
        --playlist-divider-color:#eeeeee;
    }
}

@media (prefers-color-scheme:dark) {
    .playlist-theme-auto {
        --playlist-bg-primary:#121212;
        --playlist-bg-secondary:#181818;
        --playlist-bg-elevated:#282828;
        --playlist-bg-hover:#2a2a2a;
        --playlist-text-primary:#ffffff;
        --playlist-text-secondary:#b3b3b3;
        --playlist-text-tertiary:#666666;
        --playlist-border-color:#333333;
        --playlist-divider-color:#282828;
    }
}

/* ============================================================
 * DENSITY MODIFIERS
 * ============================================================ */
.playlist-density-compact {
    --playlist-spacing:var(--playlist-spacing-compact);
    --player-height:var(--player-height-compact);
}

.playlist-density-comfortable {
    --playlist-spacing:var(--playlist-spacing-comfortable);
}

.playlist-density-spacious {
    --playlist-spacing:var(--playlist-spacing-spacious);
}

/* ============================================================
 * REDUCED MOTION SUPPORT (Accessibility)
 * ============================================================ */
@media (prefers-reduced-motion:reduce) {
    .playlist-respect-motion *,
    .playlist-respect-motion *::before,
    .playlist-respect-motion *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ============================================================
 * UTILITY CLASSES
 * ============================================================ */

/* Transitions */
.playlist-transition-fast {
    transition:all var(--playlist-transition-speed-fast) var(--playlist-transition-easing);
}

.playlist-transition-normal {
    transition:all var(--playlist-transition-speed-normal) var(--playlist-transition-easing);
}

.playlist-transition-slow {
    transition:all var(--playlist-transition-speed-slow) var(--playlist-transition-easing);
}

/* Text Utilities */
.playlist-text-primary {
    color:var(--playlist-text-primary);
}

.playlist-text-secondary {
    color:var(--playlist-text-secondary);
}

.playlist-text-tertiary {
    color:var(--playlist-text-tertiary);
}

.playlist-text-accent {
    color:var(--playlist-accent-color);
}

/* Background Utilities */
.playlist-bg-primary {
    background-color:var(--playlist-bg-primary);
}

.playlist-bg-secondary {
    background-color:var(--playlist-bg-secondary);
}

.playlist-bg-elevated {
    background-color:var(--playlist-bg-elevated);
}

/* Border Utilities */
.playlist-border {
    border:1px solid var(--playlist-border-color);
}

.playlist-border-bottom {
    border-bottom:1px solid var(--playlist-divider-color);
}

/* Shadow Utilities */
.playlist-shadow-sm {
    box-shadow:var(--playlist-shadow-sm);
}

.playlist-shadow-md {
    box-shadow:var(--playlist-shadow-md);
}

.playlist-shadow-lg {
    box-shadow:var(--playlist-shadow-lg);
}

/* ============================================================
 * FOCUS STATES (Accessibility)
 * ============================================================ */
.playlist-focus-visible:focus-visible {
    outline:2px solid var(--playlist-accent-color);
    outline-offset:2px;
}

/* ============================================================
 * HOVER EFFECTS
 * ============================================================ */
.playlist-hover-lift {
    transition:transform var(--playlist-transition-speed) var(--playlist-transition-easing),
                box-shadow var(--playlist-transition-speed) var(--playlist-transition-easing);
}

.playlist-hover-lift:hover {
    transform:translateY(-4px);
    box-shadow:var(--playlist-shadow-lg);
}

.playlist-hover-scale {
    transition:transform var(--playlist-transition-speed) var(--playlist-transition-easing);
}

.playlist-hover-scale:hover {
    transform:scale(1.05);
}

.playlist-hover-glow {
    transition:box-shadow var(--playlist-transition-speed) var(--playlist-transition-easing);
}

.playlist-hover-glow:hover {
    box-shadow:0 0 20px rgba(29,185,84,0.5);
}

/* ============================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================ */
@media (max-width:480px) {
    :root {
        --playlist-card-width:160px;
        --playlist-card-gap:16px;
    }
}

@media (max-width:768px) {
    :root {
        --playlist-card-width:180px;
        --player-control-size:28px;
    }
}

@media (min-width:1440px) {
    :root {
        --playlist-card-width:220px;
        --playlist-card-gap:32px;
    }
}


/* modules/amPlaylist/css/mini_player.css */


/**
 * Mini Player Bar & Queue System CSS
 * Sticky footer player with queue management
 * Author:The Arcitech 2025
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --player-height:90px;
    --player-bg:#282828;
    --player-text:#fff;
    --player-text-secondary:#b3b3b3;
    --player-accent:#1db954;
    --player-hover:#1ed760;
    --queue-width:350px;
    --transition-speed:0.3s;
}

/* ============================================
   Mini Player Bar (Sticky Footer)
   ============================================ */
.mini-player {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:var(--player-height);
    background:var(--player-bg);
    color:var(--player-text);
    z-index:9999;
    box-shadow:0 -2px 10px rgba(0,0,0,0.3);
    transform:translateY(100%);
    transition:transform var(--transition-speed) ease;
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:16px;
}

.mini-player.active {
    transform:translateY(0);
}

.mini-player.minimized {
    height:60px;
}

/* Track Info Section */
.mini-player-track {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:180px;
    flex:0 0 30%;
}

.mini-player-artwork {
    width:56px;
    height:56px;
    border-radius:4px;
    overflow:hidden;
    flex-shrink:0;
    background:#404040;
    position:relative;
}

.mini-player-artwork img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-player-artwork.playing::after {
    content:'';
    position:absolute;
    bottom:2px;
    left:2px;
    right:2px;
    height:3px;
    background:var(--player-accent);
    animation:pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { opacity:1; }
    50% { opacity:0.5; }
}

.mini-player-info {
    flex:1;
    min-width:0;
    overflow:hidden;
}

.mini-player-title {
    font-size:14px;
    font-weight:600;
    color:var(--player-text);
    margin:0 0 4px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:color 0.2s ease;
}

.mini-player-title:hover {
    color:var(--player-accent);
}

.mini-player-artist {
    font-size:12px;
    color:var(--player-text-secondary);
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:color 0.2s ease;
}

.mini-player-artist:hover {
    color:var(--player-text);
}

/* Controls Section */
.mini-player-controls {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    max-width:722px;
}

.mini-player-buttons {
    display:flex;
    align-items:center;
    gap:16px;
}

.mini-player-btn {
    background:transparent;
    border:none;
    color:var(--player-text);
    cursor:pointer;
    padding:8px;
    border-radius:50%;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mini-player-btn:hover {
    color:var(--player-text);
    background:rgba(255,255,255,0.1);
}

.mini-player-btn.shuffle,
.mini-player-btn.repeat {
    opacity:0.7;
}

.mini-player-btn.shuffle.active,
.mini-player-btn.repeat.active {
    opacity:1;
    color:var(--player-accent);
}

.mini-player-btn-play {
    width:40px;
    height:40px;
    background:var(--player-text);
    color:var(--player-bg);
    font-size:20px;
}

.mini-player-btn-play:hover {
    background:var(--player-text);
    transform:scale(1.06);
}

/* Progress Bar */
.mini-player-progress {
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
}

.mini-player-time {
    font-size:11px;
    color:var(--player-text-secondary);
    min-width:40px;
}

.mini-player-time.current {
    text-align:right;
}

.mini-player-progress-bar {
    flex:1;
    height:4px;
    background:#404040;
    border-radius:2px;
    cursor:pointer;
    position:relative;
}

.mini-player-progress-bar:hover .mini-player-progress-fill::after {
    opacity:1;
}

.mini-player-progress-fill {
    height:100%;
    background:var(--player-accent);
    border-radius:2px;
    position:relative;
    transition:width 0.1s linear;
}

.mini-player-progress-fill::after {
    content:'';
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:12px;
    height:12px;
    background:var(--player-text);
    border-radius:50%;
    opacity:0;
    transition:opacity 0.2s ease;
}

/* Volume & Queue Section */
.mini-player-extra {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:180px;
    flex:0 0 30%;
    justify-content:flex-end;
}

.mini-player-volume {
    display:flex;
    align-items:center;
    gap:8px;
    max-width:125px;
}

.mini-player-volume-slider {
    flex:1;
    height:4px;
    background:#404040;
    border-radius:2px;
    cursor:pointer;
    position:relative;
}

.mini-player-volume-fill {
    height:100%;
    background:var(--player-text);
    border-radius:2px;
    position:relative;
    transition:width 0.1s ease;
}

.mini-player-volume-slider:hover .mini-player-volume-fill::after {
    opacity:1;
}

.mini-player-volume-fill::after {
    content:'';
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:12px;
    height:12px;
    background:var(--player-text);
    border-radius:50%;
    opacity:0;
    transition:opacity 0.2s ease;
}

/* ============================================
   Queue Panel (Slide-in from Right)
   ============================================ */
.queue-panel {
    position:fixed;
    top:0;
    right:0;
    width:var(--queue-width);
    height:100vh;
    background:#181818;
    color:var(--player-text);
    z-index:10000;
    transform:translateX(100%);
    transition:transform var(--transition-speed) ease;
    display:flex;
    flex-direction:column;
    box-shadow:-2px 0 10px rgba(0,0,0,0.5);
}

.queue-panel.active {
    transform:translateX(0);
}

/* Queue Header */
.queue-header {
    padding:16px;
    border-bottom:1px solid #282828;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.queue-title {
    font-size:16px;
    font-weight:600;
    margin:0;
}

.queue-close {
    background:transparent;
    border:none;
    color:var(--player-text-secondary);
    cursor:pointer;
    font-size:24px;
    padding:4px;
    line-height:1;
    transition:color 0.2s ease;
}

.queue-close:hover {
    color:var(--player-text);
}

/* Queue Content */
.queue-content {
    flex:1;
    overflow-y:auto;
    padding:8px 0;
}

.queue-content::-webkit-scrollbar {
    width:8px;
}

.queue-content::-webkit-scrollbar-track {
    background:transparent;
}

.queue-content::-webkit-scrollbar-thumb {
    background:#404040;
    border-radius:4px;
}

.queue-content::-webkit-scrollbar-thumb:hover {
    background:#535353;
}

/* Now Playing Section */
.queue-section {
    padding:8px 0;
}

.queue-section-title {
    font-size:12px;
    font-weight:600;
    color:var(--player-text-secondary);
    text-transform:uppercase;
    letter-spacing:0.1em;
    padding:8px 16px;
    margin:0;
}

/* Queue Item */
.queue-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 16px;
    cursor:pointer;
    transition:background 0.2s ease;
    position:relative;
}

.queue-item:hover {
    background:rgba(255,255,255,0.1);
}

.queue-item.playing {
    background:rgba(29,185,84,0.1);
}

.queue-item.playing .queue-item-title {
    color:var(--player-accent);
}

.queue-item-artwork {
    width:48px;
    height:48px;
    border-radius:4px;
    overflow:hidden;
    flex-shrink:0;
    background:#404040;
    position:relative;
}

.queue-item-artwork img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.queue-item-artwork .play-indicator {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:16px;
    height:16px;
    color:var(--player-accent);
    display:none;
}

.queue-item.playing .queue-item-artwork .play-indicator {
    display:block;
}

.queue-item-info {
    flex:1;
    min-width:0;
}

.queue-item-title {
    font-size:14px;
    color:var(--player-text);
    margin:0 0 4px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.queue-item-artist {
    font-size:12px;
    color:var(--player-text-secondary);
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.queue-item-remove {
    background:transparent;
    border:none;
    color:var(--player-text-secondary);
    cursor:pointer;
    padding:4px;
    opacity:0;
    transition:all 0.2s ease;
    font-size:18px;
    line-height:1;
}

.queue-item:hover .queue-item-remove {
    opacity:1;
}

.queue-item-remove:hover {
    color:var(--player-text);
}

/* Queue Actions */
.queue-actions {
    padding:16px;
    border-top:1px solid #282828;
    display:flex;
    gap:8px;
}

.queue-action-btn {
    flex:1;
    padding:10px 16px;
    background:transparent;
    border:1px solid #404040;
    color:var(--player-text);
    border-radius:20px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:all 0.2s ease;
}

.queue-action-btn:hover {
    border-color:var(--player-text);
    background:rgba(255,255,255,0.1);
}

/* Queue Empty State */
.queue-empty {
    text-align:center;
    padding:60px 20px;
    color:var(--player-text-secondary);
}

.queue-empty-icon {
    font-size:48px;
    margin-bottom:16px;
    opacity:0.5;
}

.queue-empty-text {
    font-size:14px;
    margin:0;
}

/* ============================================
   Add to Queue Buttons
   ============================================ */
.add-to-queue-btn {
    background:transparent;
    border:1px solid var(--border-color);
    color:var(--text-secondary);
    padding:6px 12px;
    border-radius:4px;
    cursor:pointer;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:all 0.2s ease;
}

.add-to-queue-btn:hover {
    background:var(--background-light);
    border-color:var(--primary-color);
    color:var(--primary-color);
}

.add-to-queue-btn.added {
    background:var(--player-accent);
    border-color:var(--player-accent);
    color:#fff;
}

/* Toast Notification */
.queue-toast {
    position:fixed;
    bottom:calc(var(--player-height) + 20px);
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:#282828;
    color:var(--player-text);
    padding:12px 24px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    z-index:10001;
    opacity:0;
    transition:all 0.3s ease;
    font-size:14px;
}

.queue-toast.show {
    transform:translateX(-50%) translateY(0);
    opacity:1;
}

/* ============================================
   Icons (Using Unicode)
   ============================================ */
.icon-play::before { content:'\25B6'; }
.icon-pause::before { content:'\23F8'; }
.icon-prev::before { content:'\23EE'; }
.icon-next::before { content:'\23ED'; }
.icon-shuffle::before { content:'\1F500'; }
.icon-repeat::before { content:'\1F501'; }
.icon-volume::before { content:'\1F50A'; }
.icon-volume-mute::before { content:'\1F507'; }
.icon-queue::before { content:'\2630'; }
.icon-close::before { content:'\00D7'; }
.icon-add::before { content:'+'; }
.icon-remove::before { content:'\2212'; }

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width:768px) {
    .mini-player {
        padding:0 8px;
        gap:8px;
    }
    
    .mini-player-track {
        flex:0 0 25%;
        min-width:120px;
    }
    
    .mini-player-artwork {
        width:48px;
        height:48px;
    }
    
    .mini-player-controls {
        flex:1;
    }
    
    .mini-player-extra {
        flex:0 0 20%;
        min-width:auto;
    }
    
    .mini-player-volume {
        display:none;
    }
    
    .queue-panel {
        width:100%;
        max-width:var(--queue-width);
    }
    
    .mini-player-btn {
        padding:6px;
    }
    
    .mini-player-buttons {
        gap:8px;
    }
}

@media (max-width:480px) {
    .mini-player {
        height:70px;
    }
    
    :root {
        --player-height:70px;
    }
    
    .mini-player-track {
        flex:0 0 auto;
    }
    
    .mini-player-info {
        display:none;
    }
    
    .mini-player-btn.shuffle,
    .mini-player-btn.repeat {
        display:none;
    }
    
    .mini-player-progress {
        position:absolute;
        top:0;
        left:0;
        right:0;
        padding:0;
    }
    
    .mini-player-time {
        display:none;
    }
    
    .mini-player-progress-bar {
        border-radius:0;
    }
}

/* ============================================
   Animations
   ============================================ */
@keyframes slideUp {
    from {
        transform:translateY(100%);
    }
    to {
        transform:translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform:translateX(100%);
    }
    to {
        transform:translateX(0);
    }
}

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


/* modules/amPlaylist/css/mini_player_inline.css */


/* Enhanced Visual Styles - Glassmorphism & Animations */

/* Mini Player - Glassmorphism Effect */
.mini-player {
    animation:slideUpFadeIn 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes slideUpFadeIn {
    from {
        transform:translateY(100px);
        opacity:0;
    }
    to {
        transform:translateY(0);
        opacity:1;
    }
}

/* Progress Ring Animation */
.progress-ring-fill {
    filter:drop-shadow(0 0 8px rgba(29,185,84,0.6));
}

.player-artwork-wrapper:hover .progress-ring-fill {
    filter:drop-shadow(0 0 12px rgba(29,185,84,0.9));
}

/* Artwork Hover Effect */
.player-artwork {
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.player-artwork:hover {
    transform:translate(-50%,-50%) scale(1.05) !important;
    box-shadow:0 8px 20px rgba(0,0,0,0.6) !important;
}

/* Mini Player - jPlayer button control (only show one at a time) */
#mini_player_container .jp-play {
    display:inline-block !important;
}

#mini_player_container .jp-pause {
    display:none !important;
}

/* When playing,hide play and show pause */
#mini_player_container.jp-state-playing .jp-play {
    display:none !important;
}

#mini_player_container.jp-state-playing .jp-pause {
    display:inline-block !important;
}

#mini_player_container .jp-controls li {
    display:inline-block !important;
    float:none !important;
}

/* Main play/pause button styling - Enhanced with ripple effect */
.button_player {
    display:inline-block;
    vertical-align:middle;
    position:relative;
}

.mini-player-btn-main {
    text-decoration:none;
    outline:none;
    position:relative;
    overflow:hidden;
}

.mini-player-btn-main::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(29,185,84,0.4);
    transform:translate(-50%,-50%);
    transition:width 0.6s,height 0.6s;
}

.mini-player-btn-main:active::before {
    width:100px;
    height:100px;
}

.mini-player-btn-main:hover {
    background:rgba(29,185,84,0.15) !important;
    transform:scale(1.15);
    box-shadow:0 4px 12px rgba(29,185,84,0.3);
}

.mini-player-btn-main:active {
    transform:scale(1.05);
}

.mini-player-btn-main:focus {
    outline:none;
}

/* Queue panel active state - Enhanced */
.queue-panel {
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.queue-panel.active {
    transform:translateX(0) !important;
    animation:slideInRight 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes slideInRight {
    from {
        transform:translateX(100%);
        opacity:0;
    }
    to {
        transform:translateX(0);
        opacity:1;
    }
}

/* Toast show state */
.queue-toast.show {
    opacity:1 !important;
    transform:translateX(-50%) translateY(0) !important;
}

/* Button hover states - Enhanced with ripple */
.mini-player-btn {
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position:relative;
    overflow:hidden;
}

.mini-player-btn::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    transform:translate(-50%,-50%);
    transition:width 0.5s,height 0.5s;
}

.mini-player-btn:active::before {
    width:60px;
    height:60px;
}

.mini-player-btn:hover {
    background:rgba(255,255,255,0.15) !important;
    transform:scale(1.15);
    box-shadow:0 4px 12px rgba(255,255,255,0.1);
}

.mini-player-btn.active {
    color:#1db954 !important;
    background:rgba(29,185,84,0.25) !important;
    box-shadow:0 0 16px rgba(29,185,84,0.4);
}

.mini-player-btn svg {
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition:filter 0.3s ease;
}

.mini-player-btn:hover svg {
    filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

/* Live Waveform container - Enhanced - Dark Theme with Light Blue */
.mini-player-waveform {
    background:linear-gradient(90deg,rgba(135,206,250,0.06) 0%,rgba(135,206,250,0.02) 100%);
    box-shadow:inset 0 0 12px rgba(0,0,0,0.8),0 2px 8px rgba(0,0,0,0.6);
    transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    position:relative;
    border:1px solid rgba(135,206,250,0.15);
    background-color:rgba(12,12,12,0.6);
}

.mini-player-waveform::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(90deg,transparent 0%,rgba(135,206,250,0.05) 50%,transparent 100%);
    animation:waveformShimmer 3s infinite;
    pointer-events:none;
}

@keyframes waveformShimmer {
    0%,100% {
        transform:translateX(-100%);
        opacity:0;
    }
    50% {
        opacity:0.5;
    }
}

.mini-player-waveform canvas {
    filter:drop-shadow(0 0 4px rgba(135,206,250,0.4));
    transition:filter 0.4s ease;
}

.mini-player-waveform:hover {
    box-shadow:inset 0 0 16px rgba(135,206,250,0.25),0 4px 16px rgba(135,206,250,0.2);
    background:linear-gradient(90deg,rgba(135,206,250,0.15) 0%,rgba(135,206,250,0.08) 100%);
    transform:scale(1.02);
    border:1px solid rgba(135,206,250,0.3);
}

.mini-player-waveform:hover canvas {
    filter:drop-shadow(0 0 8px rgba(135,206,250,0.7));
}

/* Progress Waveform container - Enhanced - Transparent */
.progress-waveform-container {
    box-shadow:none;
    transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    border:none;
    position:relative;
    overflow:hidden;
    background:transparent !important;
}

.progress-waveform-container::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:transparent;
    pointer-events:none;
}

.progress-waveform-container:hover {
    box-shadow:none;
    background:transparent !important;
    transform:scaleY(1.05);
    border:none;
}

.progress-waveform-container canvas {
    image-rendering:-moz-crisp-edges;
    image-rendering:-webkit-crisp-edges;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    transition:transform 0.3s ease;
}

.progress-waveform-container:hover canvas {
    transform:scaleY(1.1);
}

/* Queue item styles - Enhanced */
.queue-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    border-radius:6px;
    margin:4px 8px;
    position:relative;
    overflow:hidden;
}

.queue-item::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:3px;
    height:100%;
    background:linear-gradient(180deg,#1db954,#1ed760);
    transform:scaleY(0);
    transition:transform 0.3s ease;
}

.queue-item:hover {
    background:rgba(255,255,255,0.06);
    transform:translateX(4px);
    box-shadow:0 4px 12px rgba(0,0,0,0.6);
}

.queue-item:hover::before {
    transform:scaleY(1);
}

.queue-item.playing {
    background:linear-gradient(90deg,rgba(29,185,84,0.12) 0%,rgba(29,185,84,0.04) 100%);
    border:1px solid rgba(29,185,84,0.25);
    box-shadow:0 2px 12px rgba(29,185,84,0.3);
}

.queue-item.playing::before {
    transform:scaleY(1);
    box-shadow:0 0 8px rgba(29,185,84,0.6);
}

.queue-item-artwork {
    width:48px;
    height:48px;
    border-radius:6px;
    overflow:hidden;
    background:linear-gradient(135deg,#1a1a1a,#0d0d0d);
    flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,0.6);
    transition:all 0.3s ease;
}

.queue-item:hover .queue-item-artwork {
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(0,0,0,0.5);
}

.queue-item-artwork img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s ease;
}

.queue-item:hover .queue-item-artwork img {
    transform:scale(1.1);
}

.queue-item-info {
    flex:1;
    min-width:0;
}

.queue-item-title {
    font-size:14px;
    color:#fff;
    margin:0 0 4px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
    transition:color 0.3s ease;
}

.queue-item:hover .queue-item-title {
    color:#1ed760;
}

.queue-item-artist {
    font-size:12px;
    color:#b3b3b3;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.queue-item-remove {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:50%;
    color:#b3b3b3;
    cursor:pointer;
    padding:6px;
    opacity:0;
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    font-size:16px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.queue-item:hover .queue-item-remove {
    opacity:1;
    transform:rotate(90deg);
}

.queue-item-remove:hover {
    color:#fff;
    background:rgba(220,53,69,0.8);
    border-color:rgba(220,53,69,1);
    transform:rotate(90deg) scale(1.1);
    box-shadow:0 0 12px rgba(220,53,69,0.5);
}

/* Volume Slider - Enhanced */
#volume-slider {
    -webkit-appearance:none;
    appearance:none;
    background:rgba(255,255,255,0.1);
    height:4px;
    border-radius:2px;
    outline:none;
    transition:all 0.3s ease;
}

#volume-slider:hover {
    background:rgba(255,255,255,0.15);
    height:6px;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

#volume-slider::-webkit-slider-thumb:hover {
    transform:scale(1.3);
    box-shadow:0 0 12px rgba(29,185,84,0.6);
    background:#1db954;
}

#volume-slider::-moz-range-thumb {
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    border:none;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

#volume-slider::-moz-range-thumb:hover {
    transform:scale(1.3);
    box-shadow:0 0 12px rgba(29,185,84,0.6);
    background:#1db954;
}

/* Time Display - Enhanced */
.mini-player-time {
    font-family:'Courier New',monospace;
    font-weight:600;
    letter-spacing:0.5px;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
}

/* Add to queue button added state */
.add-to-queue-btn.added {
    background:linear-gradient(135deg,#1db954,#1ed760) !important;
    border-color:#1db954 !important;
    color:#fff !important;
    animation:addedPulse 0.6s ease;
    box-shadow:0 0 20px rgba(29,185,84,0.6);
}

@keyframes addedPulse {
    0%,100% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.1);
    }
}

/* Queue panel header - Enhanced */
.queue-header {
    background:linear-gradient(180deg,rgba(29,185,84,0.1) 0%,transparent 100%);
}

.queue-close-btn {
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.queue-close-btn:hover {
    color:#1db954 !important;
    transform:rotate(90deg) scale(1.2);
}

/* Queue footer buttons - Enhanced */
.queue-clear-btn {
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position:relative;
    overflow:hidden;
}

.queue-clear-btn::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(220,53,69,0.3);
    transform:translate(-50%,-50%);
    transition:width 0.5s,height 0.5s;
}

.queue-clear-btn:hover {
    background:rgba(220,53,69,0.8) !important;
    border-color:#dc3545 !important;
    transform:scale(1.05);
    box-shadow:0 4px 12px rgba(220,53,69,0.4);
}

.queue-clear-btn:active::before {
    width:200px;
    height:200px;
}

/* Loading animation for mini player */
@keyframes pulse {
    0%,100% {
        opacity:1;
    }
    50% {
        opacity:0.6;
    }
}

.mini-player.loading .player-artwork {
    animation:pulse 1.5s ease-in-out infinite;
}


/* modules/amPlaylist/css/activity_feed_items.css */


/* Activity Feed Items CSS */
/* Used in:activity_feed_items.tpl */

.amPlaylist-activity-item {
    display:flex;
    align-items:start;
    gap:12px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
}

.amPlaylist-activity-icon {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--playlist-accent-color,#1DB954);
    border-radius:50%;
    flex-shrink:0;
}

.amPlaylist-icon {
    font-size:1.1rem;
    color:white;
}

.amPlaylist-activity-content {
    flex:1;
}

.amPlaylist-activity-text {
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}

.amPlaylist-activity-time {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-activity {
    text-align:center;
    padding:32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-activity p {
    margin:0;
}


/* modules/amPlaylist/css/category_browser_extracted.css */


/* Extracted from category_browser
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:32px;
    font-weight:700;
    margin-bottom:24px;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    margin-bottom:48px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    padding:24px;
    border-radius:12px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-decoration:none;
    color:white;
    overflow:hidden;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    cursor:pointer;
}

.category-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
}

.category-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.6) 100%);
    z-index:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:16px;
    right:16px;
    font-size:48px;
    opacity:0.3;
    z-index:2;
}

.amPlaylist-material-icons {
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:24px;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    z-index:2;
    font-size:20px;
    font-weight:700;
    margin:0 0 8px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    z-index:2;
    font-size:14px;
    margin:0;
    opacity:0.9;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:48px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:10px 20px;
    background:#282828;
    border-radius:24px;
    text-decoration:none;
    color:white;
    font-size:14px;
    font-weight:600;
    transition:all 0.2s ease;
    border:1px solid transparent;
}

.genre-tag:hover {
    background:#1DB954;
    border-color:#1DB954;
    transform:translateY(-2px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:8px 16px;
    background:#181818;
    border-radius:20px;
    text-decoration:none;
    color:#b3b3b3;
    font-weight:500;
    transition:all 0.2s ease;
}

.tag-item:hover {
    background:#282828;
    color:white;
    transform:scale(1.05);
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:16px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        min-height:140px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:24px;
    }
}





/* modules/amPlaylist/css/category_selector_extracted.css */


/* Extracted from category_selector
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin:20px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         label {
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         select,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input {
    width:100%;
    padding:12px;
    background:#282828;
    border:1px solid #404040;
    border-radius:4px;
    color:white;
    font-size:14px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         select:focus,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input:focus {
    outline:none;
    border-color:#1DB954;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    color:#b3b3b3;
    margin-top:4px;
}





/* modules/amPlaylist/css/collaborator_manager_extracted.css */


/* Extracted from collaborator_manager
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#282828;
    border-radius:8px;
    padding:24px;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    margin:0 0 8px 0;
    font-size:24px;
    font-weight:700;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#b3b3b3;
    margin:0 0 24px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input {
    width:100%;
    padding:12px 16px;
    background:#181818;
    border:1px solid #404040;
    border-radius:4px;
    color:white;
    font-size:14px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input:focus {
    outline:none;
    border-color:#1DB954;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#282828;
    border:1px solid #404040;
    border-radius:4px;
    margin-top:4px;
    max-height:300px;
    overflow-y:auto;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:12px 16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .user-result:hover {
    background:#404040;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:40px;
    height:40px;
    border-radius:50%;
    background:#181818;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h4,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h4 {
    margin:0 0 16px 0;
    font-size:18px;
    font-weight:600;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
    background:#181818;
    border-radius:6px;
    margin-bottom:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    width:100%;
    height:100%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:48px;
    height:48px;
    border-radius:50%;
    background:#1DB954;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:bold;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:600;
    margin-bottom:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    color:#b3b3b3;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:8px 16px;
    background:transparent;
    border:1px solid #404040;
    border-radius:4px;
    color:white;
    cursor:pointer;
    font-size:13px;
}

.remove-collaborator-btn:hover {
    border-color:#f44336;
    color:#f44336;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px;
    text-align:center;
    color:#b3b3b3;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid #404040;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:48px 24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    margin-bottom:16px;
    color:#b3b3b3;
}


/* Extracted from collaborator_manager
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:20px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:20px;
    margin-bottom:20px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    margin:0;
    font-size:1.25rem;
    color:var(--playlist-text-primary,#ffffff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:4px 0 0 0;
}

/* Toggle Switch */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    display:inline-block;
    width:50px;
    height:24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input {
    opacity:0;
    width:0;
    height:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#ccc;
    transition:0.3s;
    border-radius:24px;
}

.slider:before {
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background-color:white;
    transition:0.3s;
    border-radius:50%;
}

input:checked + 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background-color:var(--playlist-accent-color,#1DB954);
}

input:checked + .slider:before {
    transform:translateX(26px);
}

/* Collaborators List */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    transition:background 0.2s;
}

.collaborator-item:hover {
    background:var(--playlist-bg-primary,#121212);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:transparent;
    border:1px solid #ff4444;
    color:#ff4444;
    padding:6px 12px;
    font-size:0.875rem;
    transition:all 0.2s;
}

.collaborator-remove-btn:hover {
    background:#ff4444;
    color:white;
}

/* Activity Feed */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:400px;
    overflow-y:auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:start;
    gap:12px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--playlist-accent-color,#1DB954);
    border-radius:50%;
    flex-shrink:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1.1rem;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* No items states */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* Modal styles */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:24px;
    width:90%;
    max-width:500px;
    max-height:80vh;
    overflow-y:auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin:20px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:12px;
    max-height:300px;
    overflow-y:auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:36px;
    height:36px;
    border-radius:50%;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:20px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#ff4444;
}





/* modules/amPlaylist/css/discover_index_extracted.css */


/* Extracted from discover_index
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1400px;
    margin:0 auto;
    padding:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    margin-bottom:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h1 {
    font-size:var(--playlist-title-size-xlarge);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:600px;
    margin:0 auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
    padding:var(--playlist-spacing-sm) var(--playlist-spacing-md);
    border-radius:var(--playlist-border-radius);
    border:1px solid var(--playlist-border-color);
    background:var(--playlist-bg-secondary);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:250px 1fr;
    gap:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:sticky;
    top:var(--playlist-spacing-lg);
    height:fit-content;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    list-style:none;
    padding:0;
    margin:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    padding:var(--playlist-spacing-sm);
    border-radius:var(--playlist-border-radius-small);
    color:var(--playlist-text-secondary);
    text-decoration:none;
    transition:all var(--playlist-transition-speed);
}

.category-link:hover,
.browse-link:hover {
    background:var(--playlist-bg-hover);
    color:var(--playlist-text-primary);
}

.category-link
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-accent-color);
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-right:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:flex-end;
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--playlist-card-width),1fr));
    gap:var(--playlist-card-gap);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--playlist-spacing-xl);
    color:var(--playlist-text-secondary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-xl);
    text-align:center;
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:1fr;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        position:static;
    }
}





/* modules/amPlaylist/css/discover_list_ajax_extracted.css */


/* Extracted from discover_list_ajax
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:64px 32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-bottom:16px;
    opacity:0.5;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    margin:8px 0;
    font-size:1rem;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    opacity:0.7;
}





/* modules/amPlaylist/css/discover_list_item_extracted.css */


/* Extracted from discover_list_item
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-bg-elevated);
    border-radius:var(--playlist-border-radius);
    overflow:hidden;
    transition:all var(--playlist-transition-speed) var(--playlist-transition-easing);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:block;
    text-decoration:none;
    color:inherit;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    width:100%;
    padding-bottom:100%; /* 1:1 aspect ratio */
    overflow:hidden;
    background:var(--playlist-bg-secondary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--playlist-bg-secondary),var(--playlist-bg-elevated));
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:4rem;
    color:var(--playlist-text-tertiary);
    font-family:'Material Icons',sans-serif;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity var(--playlist-transition-speed);
}

.playlist-card:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--playlist-accent-color);
    color:white;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Material Icons',sans-serif;
    font-size:32px;
    transition:all var(--playlist-transition-speed);
    transform:scale(0.8);
}

.playlist-card:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    transform:scale(1);
}

.play-button:hover {
    background:var(--playlist-accent-hover);
    transform:scale(1.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:var(--playlist-spacing-sm);
    right:var(--playlist-spacing-sm);
    padding:4px 12px;
    border-radius:12px;
    font-size:0.75rem;
    color:white;
    font-weight:var(--playlist-font-weight-medium);
    backdrop-filter:blur(8px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:var(--playlist-body-size-large);
    font-weight:var(--playlist-font-weight-bold);
    margin:0 0 var(--playlist-spacing-xs) 0;
    color:var(--playlist-text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:var(--playlist-body-size);
    color:var(--playlist-text-secondary);
    margin:0 0 var(--playlist-spacing-sm) 0;
    line-height:var(--playlist-line-height-normal);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:var(--playlist-subtitle-size);
    color:var(--playlist-text-secondary);
    margin-bottom:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    color:var(--playlist-text-secondary);
    text-decoration:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a:hover {
    color:var(--playlist-accent-color);
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-wrap:wrap;
    gap:var(--playlist-spacing-sm);
    font-size:var(--playlist-subtitle-size);
    color:var(--playlist-text-tertiary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:14px;
}

/* Hover effects */
.playlist-hover-lift:hover {
    transform:translateY(-4px);
    box-shadow:var(--playlist-shadow-lg);
}

.playlist-hover-scale:hover {
    transform:scale(1.02);
}

.playlist-hover-glow:hover {
    box-shadow:0 0 20px rgba(29,185,84,0.3);
}





/* modules/amPlaylist/css/follow_button_extracted.css */


/* Extracted from follow_button
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:20px;
    font-weight:500;
    transition:all 0.2s;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-accent-color,#1DB954);
    color:white;
    border:2px solid transparent;
}

.follow-btn:hover {
    background:var(--playlist-accent-hover,#1ed760);
    transform:scale(1.05);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:transparent;
    color:var(--playlist-text-primary,#ffffff);
    border:2px solid var(--playlist-text-secondary,#b3b3b3);
}

.following-btn:hover {
    border-color:var(--playlist-accent-color,#1DB954);
    color:var(--playlist-accent-color,#1DB954);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-flex;
    align-items:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    width:16px;
    height:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-left:12px;
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:none;
    color:var(--playlist-accent-color,#1DB954);
    cursor:pointer;
    padding:0;
    text-decoration:underline;
    font-size:0.875rem;
}

.view-followers-link:hover {
    color:var(--playlist-accent-hover,#1ed760);
}

/* Followers Modal */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:12px;
    width:90%;
    max-width:600px;
    max-height:80vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--playlist-bg-secondary,#181818);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    margin:0;
    color:var(--playlist-text-primary,#ffffff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:none;
    color:var(--playlist-text-secondary,#b3b3b3);
    font-size:2rem;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .close-btn:hover {
    color:var(--playlist-text-primary,#ffffff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:20px;
    overflow-y:auto;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    transition:background 0.2s;
}

.follower-card:hover {
    background:var(--playlist-bg-primary,#121212);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
    text-align:center;
    font-weight:500;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#ff4444;
}

/* Missing classes */
.amPlaylist-btn-text {
    font-size:0.875rem;
    font-weight:500;
}

.amPlaylist-follower-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-follower-count-container {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
}





/* modules/amPlaylist/css/following_playlists_extracted.css */


/* Extracted from following_playlists
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1200px;
    margin:0 auto;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    margin-bottom:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:64px;
    color:var(--playlist-accent-color);
    margin-bottom:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h1 {
    font-size:var(--playlist-title-size-xlarge);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--playlist-card-width),1fr));
    gap:var(--playlist-card-gap);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:64px;
    color:var(--playlist-text-tertiary);
    margin-bottom:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    color:var(--playlist-text-primary);
    margin-bottom:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    color:var(--playlist-text-secondary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-xl);
    text-align:center;
}





/* modules/amPlaylist/css/genre_playlists_extracted.css */


/* Extracted from genre_playlists
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1400px;
    margin:0 auto;
    padding:32px 24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    color:var(--playlist-text-secondary,#b3b3b3);
    text-decoration:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a:hover {
    color:var(--playlist-text-primary,#fff);
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin:0 8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:2.5rem;
    font-weight:900;
    margin:0 0 8px 0;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:24px;
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:center;
    padding:32px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:80px 32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-bottom:24px;
    opacity:0.5;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    font-size:1.5rem;
    margin:0 0 12px 0;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    margin:0 0 24px 0;
    font-size:1rem;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-block;
    padding:12px 24px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:500px;
    color:var(--playlist-text-primary,#fff);
    text-decoration:none;
    font-weight:600;
    transition:all 0.2s;
}

.btn-secondary:hover {
    border-color:rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.1);
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:2rem;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:16px;
    }
}





/* modules/amPlaylist/css/index_list_extracted.css */


/* Extracted from index_list
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

.playlist-list-item:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}





/* modules/amPlaylist/css/index_list_view_extracted.css */


/* Extracted from index_list_view
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

.playlist-list-row:hover {
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    transform:translateY(-2px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:120px;
    height:120px;
    border-radius:8px;
    object-fit:cover;
}





/* modules/amPlaylist/css/item_detail_extracted.css */


/* Extracted from item_detail
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

/* Hide profile header and menu */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:none !important;
}

/* Dark Theme to Match Mini Player */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1400px;
    margin:0 auto;
    padding:20px;
    background:#0a0a0a;
    min-height:100vh;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:32px;
    margin-bottom:24px;
    padding:32px;
    background:#1a1a1a;
    border-radius:12px;
    color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,0.6);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:240px;
    height:240px;
    border-radius:8px;
    flex-shrink:0;
    background:#333;
    position:relative;
    overflow:hidden;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    width:100%;
    height:100%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:8px;
    right:8px;
    background:rgba(0,0,0,0.7);
    color:white;
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
    z-index:10;
}

.playlist-cover-edit:hover {
    background:rgba(0,0,0,0.9);
    transform:scale(1.1);
}

/* Ensure all icons are white */
svg {
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    fill:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    stroke:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#0064a0;
    margin-bottom:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:42px;
    font-weight:900;
    margin:0 0 16px 0;
    color:#fff;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#aaa;
    margin-bottom:20px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#666;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:8px;
    margin-bottom:20px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #0064a0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-decoration:none;
    transition:opacity 0.2s;
    font-size:18px;
    font-weight:600;
}

.profile-link:hover {
    opacity:0.8;
}

/* Metadata Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin:16px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:6px 14px;
    border-radius:16px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    display:inline-flex;
    align-items:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(135deg,
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         0%,
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         100%);
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#aaa;
    font-size:13px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:rgba(0,100,160,0.2);
    color:#0064a0;
    padding:4px 12px;
    border-radius:12px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    border:1px solid rgba(0,100,160,0.3);
    transition:all 0.2s;
}

.tag-pill:hover {
    background:rgba(0,100,160,0.3);
    border-color:rgba(0,100,160,0.5);
    transform:translateY(-2px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:18px;
    color:white;
    font-weight:400;
    opacity:0.8;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#0064a0;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:4px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

.btn-action:hover {
    background:#0078c0;
}

.btn-action
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#444;
}

.btn-action.secondary:hover {
    background:#555;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:1fr 380px;
    gap:24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#1a1a1a;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,0.6);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%);
    padding:20px 24px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-radius:12px 12px 0 0;
    border-bottom:2px solid #0064a0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:60px;
    height:60px;
    background:rgba(0,100,160,0.2);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:1px solid rgba(0,100,160,0.3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    opacity:0.9;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#0064a0;
    color:white;
    border:none;
    padding:12px 28px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all 0.2s;
    box-shadow:0 2px 8px rgba(0,100,160,0.3);
}

.btn-play-all:hover {
    background:#0078c0;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,100,160,0.4);
}

.btn-play-all:active {
    transform:translateY(0);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:rgba(255,255,255,0.1);
    color:white;
    border:1px solid rgba(255,255,255,0.2);
    padding:12px 24px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all 0.2s;
}

.btn-shuffle:hover {
    background:rgba(255,255,255,0.15);
    border-color:rgba(255,255,255,0.3);
    transform:translateY(-1px);
}

.btn-shuffle:active {
    transform:translateY(0);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px;
    border-radius:0 0 12px 12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:18px;
    font-weight:700;
    color:#fff;
    margin:0 0 20px 0;
    padding-bottom:16px;
    border-bottom:1px solid #444;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:40px 60px 1fr 150px 100px 80px 100px;
    align-items:center;
    padding:12px 16px;
    border-radius:8px;
    transition:all 0.2s;
    gap:16px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.track-item:hover {
    background:rgba(0,100,160,0.15);
    border-bottom-color:rgba(0,100,160,0.3);
    transform:translateX(4px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    font-weight:600;
    color:#888;
    font-size:14px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:none;
    cursor:pointer;
    color:white;
    transition:transform 0.2s;
    text-align:center;
}

.track-play-icon:hover {
    transform:scale(1.1);
}

.track-item:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:none;
}

.track-item:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:block;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:60px;
    height:60px;
    border-radius:4px;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    min-width:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:600;
    color:#fff;
    margin:0 0 4px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    color:#aaa;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    color:inherit;
    text-decoration:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a:hover {
    color:#0064a0;
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    color:#888;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#444;
    color:#aaa;
    padding:2px 8px;
    border-radius:3px;
    font-size:11px;
    text-transform:capitalize;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    color:#888;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#888;
    font-size:14px;
    text-align:right;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:8px;
    opacity:0;
    transition:opacity 0.2s;
}

.track-item:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:1px solid rgba(255,255,255,0.1);
    padding:8px;
    cursor:pointer;
    color:#888;
    transition:all 0.2s;
    border-radius:6px;
}

.btn-track-action:hover {
    color:#0064a0;
    background:rgba(0,100,160,0.15);
    border-color:rgba(0,100,160,0.3);
    transform:scale(1.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#1a1a1a;
    border-radius:12px;
    padding:24px;
    height:fit-content;
    box-shadow:0 4px 16px rgba(0,0,0,0.6);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:32px;
    background:rgba(255,255,255,0.03);
    border-radius:12px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.06);
    transition:all 0.3s ease;
}

.sidebar-section:hover {
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

.sidebar-section:last-child {
    margin-bottom:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:20px;
    font-weight:800;
    color:#fff;
    margin:0 0 20px 0;
    letter-spacing:-0.01em;
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:12px;
    border-bottom:2px solid rgba(255,255,255,0.1);
}

.sidebar-title::before {
    content:'';
    width:4px;
    height:20px;
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    border-radius:2px;
}

/* Statistics Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(135deg,rgba(0,100,160,0.15) 0%,rgba(0,100,160,0.05) 100%);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,0.02);
    padding:16px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
    transition:all 0.2s ease;
}

.stat-item:hover {
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.1);
    transform:translateY(-2px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,100,160,0.2);
    border-radius:50%;
    flex-shrink:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    color:#0064a0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:20px;
    font-weight:700;
    color:#fff;
    line-height:1.2;
    margin-bottom:2px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:12px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

/* Recommendations Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:60px 20px;
    color:#666;
}

/* Comment Section Enhancements */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:rgba(255,255,255,0.02);
    border-radius:10px;
    padding:16px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,0.05);
    transition:all 0.2s ease;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .comment-wrapper:hover,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .item_comment:hover {
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.08);
    transform:translateX(4px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         form[name*="comment"] {
    background:rgba(255,255,255,0.02);
    border-radius:10px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.05);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         textarea {
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    color:#fff;
    padding:12px;
    width:100%;
    font-family:inherit;
    transition:all 0.2s ease;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         textarea:focus {
    outline:none;
    border-color:#1DB954;
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 0 3px rgba(29,185,84,0.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input[type="submit"],

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         button[type="submit"] {
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    color:#000;
    font-weight:600;
    padding:10px 24px;
    border:none;
    border-radius:500px;
    cursor:pointer;
    transition:all 0.2s ease;
    margin-top:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input[type="submit"]:hover,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         button[type="submit"]:hover {
    transform:scale(1.05);
    box-shadow:0 4px 12px rgba(29,185,84,0.3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:600;
    color:#fff;
    margin-bottom:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:12px;
    color:#888;
    margin-bottom:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:rgba(255,255,255,0.85);
    line-height:1.6;
}

@media (max-width:1024px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:1fr;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
        text-align:center;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:200px;
        height:200px;
        margin:0 auto;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:32px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        justify-content:center;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        justify-content:center;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        justify-content:center;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        justify-content:center;
        flex-wrap:wrap;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
        gap:16px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:100%;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:40px 50px 1fr 60px;
        gap:12px;
        padding:8px 12px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        display:none;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:50px;
        height:50px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
        gap:4px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:1fr;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:95%;
        max-height:90vh;
        overflow-y:auto;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        padding:16px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        padding:16px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        padding:16px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:row;
        justify-content:flex-start;
        padding:16px 20px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
        width:24px;
        height:24px;
    }
}


/* Extracted from item_detail
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    animation:fadeIn 0.2s ease-in;
}

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


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:#1a1a1a;
    border-radius:12px;
    width:90%;
    max-width:500px;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    margin:0;
    color:#fff;
    font-size:24px;
    font-weight:700;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:none;
    color:#888;
    font-size:32px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .close-btn:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:0;
}

/* Timeline Share Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px;
    background:rgba(0,100,160,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:16px;
    font-weight:700;
    color:#fff;
    margin:0 0 16px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:100%;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:100%;
    min-height:80px;
    padding:12px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    resize:vertical;
    transition:all 0.2s;
}

#timeline-share-text:focus {
    outline:none;
    border-color:#0064a0;
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 0 3px rgba(0,100,160,0.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:12px;
    display:flex;
    justify-content:flex-end;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(135deg,#0064a0 0%,#0078c0 100%);
    color:white;
    border:none;
    padding:10px 24px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .form_button:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,100,160,0.4);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:20px;
    text-align:center;
    color:#888;
    font-style:italic;
}

/* Success Message */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    text-align:center;
    animation:successFadeIn 0.3s ease-in;
}

@keyframes successFadeIn {
    from {
        opacity:0;
        transform:scale(0.9);
    }
    to {
        opacity:1;
        transform:scale(1);
    }
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-bottom:20px;
    animation:successCheckmark 0.5s ease-in-out;
}

@keyframes successCheckmark {
    0% {
        transform:scale(0);
        opacity:0;
    }
    50% {
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
        opacity:1;
    }
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    font-size:24px;
    font-weight:700;
    color:#1DB954;
    margin:0 0 8px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    font-size:14px;
    color:#aaa;
    margin:0;
}

/* Share Divider */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:20px 24px;
    text-align:center;
    position:relative;
    background:#1a1a1a;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         span {
    color:#888;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    background:#1a1a1a;
    padding:0 12px;
    position:relative;
    z-index:1;
}

.share-divider::before {
    content:'';
    position:absolute;
    top:50%;
    left:24px;
    right:24px;
    height:1px;
    background:rgba(255,255,255,0.1);
    transform:translateY(-50%);
}

/* Social Share Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:16px;
    justify-content:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:24px 32px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    transition:all 0.2s;
    min-width:120px;
}

.share-option:hover {
    background:rgba(0,100,160,0.2);
    border-color:rgba(0,100,160,0.4);
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(0,0,0,0.3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    width:32px;
    height:32px;
    color:#0064a0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         span {
    font-size:14px;
    font-weight:600;
}





/* modules/amPlaylist/css/item_detail_v2_extracted.css */


/* Extracted from item_detail_v2
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

/* Playlist Focus Page Styles */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:linear-gradient(180deg,rgba(100,149,237,0.15) 0%,rgba(0,0,0,0) 300px);
    min-height:100vh;
    padding:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:flex-end;
    padding:40px 40px 24px;
    gap:24px;
    min-height:340px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:232px;
    height:232px;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    width:100%;
    height:100%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:80px;
    color:white;
    opacity:0.9;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
    color:white;
    text-shadow:0 2px 4px rgba(0,0,0,0.5);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:8px;
    opacity:0.9;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:48px;
    font-weight:900;
    margin:0 0 16px 0;
    line-height:1.2;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:14px;
    margin:12px 0;
    opacity:0.8;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    flex-wrap:wrap;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         img {
    width:24px;
    height:24px;
    border-radius:50%;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:4px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:4px;
    height:4px;
    border-radius:50%;
    background:currentColor;
    opacity:0.7;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px 40px;
    display:flex;
    align-items:center;
    gap:16px;
    background:linear-gradient(rgba(0,0,0,0.1),transparent);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:56px;
    height:56px;
    border-radius:50%;
    background:#1db954;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s;
    box-shadow:0 8px 16px rgba(0,0,0,0.3);
}

.play-all-btn:hover {
    transform:scale(1.05);
    background:#1ed760;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-left:3px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:1px solid rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.9);
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
    transition:all 0.2s;
    font-size:14px;
    font-weight:600;
}

.playlist-action-btn:hover {
    border-color:rgba(255,255,255,0.6);
    transform:scale(1.02);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:0 40px 40px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:50px 1fr 1fr 100px;
    gap:16px;
    padding:8px 16px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    opacity:0.7;
    border-bottom:1px solid rgba(255,255,255,0.1);
    margin-bottom:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:50px 1fr 1fr 100px;
    gap:16px;
    padding:8px 16px;
    border-radius:4px;
    transition:background 0.2s;
    align-items:center;
}

.track-row:hover {
    background:rgba(255,255,255,0.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    opacity:0.7;
}

.track-row:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:none;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    color:white;
}

.track-row:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:block;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:40px;
    height:40px;
    border-radius:4px;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
    min-width:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:500;
    margin:0 0 4px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:14px;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    color:inherit;
    text-decoration:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a:hover {
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:0.7;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:right;
    opacity:0.7;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:8px;
    opacity:0;
    transition:opacity 0.2s;
}

.track-row:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:1;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    opacity:0.7;
    transition:opacity 0.2s;
}

.track-action-btn:hover {
    opacity:1;
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:24px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:200px;
        height:200px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:32px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:50px 1fr 80px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        display:none;
    }
}





/* modules/amPlaylist/css/item_grid_extracted.css */


/* Extracted from item_grid
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

.playlist-grid-item:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(0,0,0,0.15);
}

.playlist-grid-item:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:1;
}





/* modules/amPlaylist/css/item_list_extracted.css */


/* Extracted from item_list
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

.playlist-list-item:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}





/* modules/amPlaylist/css/mini_player_global_extracted.css */


/* Extracted from mini_player_global
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

.mini-player-btn:hover {
    background:rgba(255,255,255,0.1) !important;
    transform:scale(1.1);
}

.mini-player-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:#1db954 !important;
}

.mini-player-btn-main:hover {
    background:rgba(255,255,255,0.15) !important;
    transform:scale(1.15);
}

.mini-player-btn-main:active {
    transform:scale(0.95);
}

#shuffle-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg,
#repeat-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    color:#1db954;
}





/* modules/amPlaylist/css/playlist_focus_page_extracted.css */


/* Extracted from playlist_focus_page
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

/* Focus Page Styles */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1400px;
    margin:0 auto;
    padding:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    padding:60px 40px 40px;
    background:linear-gradient(180deg,rgba(var(--accent-rgb,29,185,84),0.3) 0%,transparent 100%);
    overflow:hidden;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg,rgba(100,149,237,0.1) 0%,rgba(147,51,234,0.1) 100%);
    opacity:0.5;
    z-index:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
    z-index:1;
    display:flex;
    gap:32px;
    align-items:flex-end;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:280px;
    height:280px;
    flex-shrink:0;
    border-radius:12px;
    box-shadow:0 16px 48px rgba(0,0,0,0.8),0 4px 16px rgba(0,0,0,0.4);
    overflow:hidden;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.playlist-cover-large:hover {
    transform:scale(1.02);
    box-shadow:0 20px 60px rgba(0,0,0,0.9),0 8px 24px rgba(0,0,0,0.5);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    bottom:12px;
    right:12px;
    background:rgba(0,0,0,0.8);
    border:2px solid rgba(255,255,255,0.9);
    border-radius:50%;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    transition:all 0.3s ease;
    z-index:10;
}

.playlist-cover-large:hover 
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    opacity:1;
}

.cover-edit-btn-focus:hover {
    background:rgba(29,185,84,0.9);
    border-color:rgba(29,185,84,1);
    transform:scale(1.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    color:#fff;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:100%;
    height:100%;
    object-fit:cover;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
    color:white;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-block;
    padding:4px 12px;
    border-radius:16px;
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:4rem;
    font-weight:900;
    margin:0 0 16px 0;
    text-shadow:0 4px 12px rgba(0,0,0,0.6);
    letter-spacing:-0.02em;
    line-height:1.1;
    background:linear-gradient(135deg,
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         0%,rgba(255,255,255,0.9) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.9rem;
    color:rgba(255,255,255,0.8);
    margin:0 0 20px 0;
    max-width:600px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.875rem;
}

.stat-item
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    cursor:pointer;
}

.stat-item.clickable:hover {
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:8px;
    color:white;
    text-decoration:none;
    font-weight:600;
}

.creator-link:hover {
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:24px;
    height:24px;
    border-radius:50%;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:600;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:rgba(255,255,255,0.7);
}

/* Actions */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:12px;
    align-items:center;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border-radius:500px;
    font-weight:600;
    font-size:0.875rem;
    border:none;
    cursor:pointer;
    transition:all 0.2s;
}

.action-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:var(--playlist-accent-color,#1DB954);
    color:white;
    padding:14px 32px;
    font-size:1rem;
}

.action-btn.primary:hover {
    background:var(--playlist-accent-hover,#1ed760);
    transform:scale(1.04);
}

.action-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:transparent;
    color:var(--playlist-text-primary,#fff);
    border:1px solid rgba(255,255,255,0.3);
}

.action-btn.secondary:hover {
    border-color:rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.1);
}

.action-btn
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:48px;
    height:48px;
    padding:0;
    justify-content:center;
}

/* Content Area */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:24px 40px;
    display:grid;
    grid-template-columns:1fr 320px;
    gap:40px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    min-width:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:sticky;
    top:24px;
    align-self:start;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 24px 0;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1rem;
    font-weight:700;
    margin:0 0 16px 0;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* Collaborators Mini List */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    flex-direction:column;
    gap:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:6px;
    transition:background 0.2s;
}

.collaborator-mini:hover {
    background:rgba(255,255,255,0.1);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    width:32px;
    height:32px;
    border-radius:50%;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:transparent;
    border:none;
    color:var(--playlist-accent-color,#1DB954);
    font-size:0.875rem;
    font-weight:600;
    cursor:pointer;
    padding:8px;
    margin-top:4px;
}

.view-all-btn:hover {
    text-decoration:underline;
}

/* Empty State */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:64px 32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-bottom:16px;
    opacity:0.5;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    margin:0 0 16px 0;
    font-size:1rem;
}

/* Comments Section */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    padding:40px;
    border-top:1px solid rgba(255,255,255,0.1);
    background:linear-gradient(180deg,rgba(0,0,0,0.2) 0%,transparent 100px);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1.75rem;
    font-weight:800;
    margin:0 0 32px 0;
    color:var(--playlist-text-primary,#fff);
    letter-spacing:-0.02em;
    display:flex;
    align-items:center;
    gap:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .section-title::before {
    content:'';
    width:4px;
    height:28px;
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    border-radius:2px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-secondary,#b3b3b3);
    font-weight:400;
}

/* Comment Item Styling */

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    background:rgba(255,255,255,0.03);
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    border:1px solid rgba(255,255,255,0.06);
    transition:all 0.3s ease;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .comment-wrapper:hover,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .item_comment:hover {
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
    transform:translateX(4px);
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         form[name*="comment"] {
    background:rgba(255,255,255,0.03);
    border-radius:12px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.06);
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         textarea {
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    color:#fff;
    padding:16px;
    width:100%;
    font-family:inherit;
    font-size:15px;
    line-height:1.6;
    transition:all 0.3s ease;
    min-height:100px;
    resize:vertical;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         textarea:focus {
    outline:none;
    border-color:#1DB954;
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 0 4px rgba(29,185,84,0.15);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         textarea::placeholder {
    color:rgba(255,255,255,0.4);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input[type="submit"],

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         button[type="submit"] {
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    color:#000;
    font-weight:700;
    padding:12px 32px;
    border:none;
    border-radius:500px;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    margin-top:16px;
    font-size:15px;
    box-shadow:0 4px 12px rgba(29,185,84,0.2);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         input[type="submit"]:hover,

            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         button[type="submit"]:hover {
    transform:scale(1.05);
    box-shadow:0 6px 20px rgba(29,185,84,0.4);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
    font-size:15px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:13px;
    color:rgba(255,255,255,0.5);
    margin-bottom:12px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:rgba(255,255,255,0.9);
    line-height:1.7;
    font-size:14px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:40px;
    background:rgba(255,255,255,0.03);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.06);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    color:rgba(255,255,255,0.7);
    margin:0 0 16px 0;
    font-size:15px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.1);
    color:#fff;
    padding:12px 28px;
    border-radius:500px;
    text-decoration:none;
    font-weight:600;
    transition:all 0.3s ease;
    border:1px solid rgba(255,255,255,0.2);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         .action-btn:hover {
    background:rgba(255,255,255,0.15);
    transform:scale(1.05);
    border-color:rgba(255,255,255,0.3);
}

/* Responsive */
@media (max-width:1024px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:1fr;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        position:relative;
        top:0;
    }
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        flex-direction:column;
        align-items:flex-start;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        width:192px;
        height:192px;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:2rem;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        padding-left:24px;
        padding-right:24px;
    }
}





/* modules/amPlaylist/css/search_results_extracted.css */


/* Extracted from search_results
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1200px;
    margin:0 auto;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    margin-bottom:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h1 {
    font-size:var(--playlist-title-size-large);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:600px;
    margin:0 auto var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    gap:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    flex:1;
    padding:var(--playlist-spacing-sm) var(--playlist-spacing-md);
    border-radius:var(--playlist-border-radius);
    border:1px solid var(--playlist-border-color);
    background:var(--playlist-bg-secondary);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:var(--playlist-spacing-lg);
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--playlist-card-width),1fr));
    gap:var(--playlist-card-gap);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:64px;
    color:var(--playlist-text-tertiary);
    margin-bottom:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    color:var(--playlist-text-primary);
    margin-bottom:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    color:var(--playlist-text-secondary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-xl);
    text-align:center;
}





/* modules/amPlaylist/css/standalone_playlist_extracted.css */


/* Extracted from standalone_playlist
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */

        
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        ,
        
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
        {
            display:none;
        }

    




/* modules/amPlaylist/css/tag_playlists_extracted.css */


/* Extracted from tag_playlists
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1400px;
    margin:0 auto;
    padding:32px 24px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:16px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a {
    color:var(--playlist-text-secondary,#b3b3b3);
    text-decoration:none;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         a:hover {
    color:var(--playlist-text-primary,#fff);
    text-decoration:underline;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin:0 8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:2.5rem;
    font-weight:900;
    margin:0 0 8px 0;
    color:var(--playlist-text-primary,#fff);
    display:flex;
    align-items:center;
    gap:8px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-accent-color,#1DB954);
    font-weight:700;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-size:1rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:24px;
    margin-bottom:32px;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:flex;
    justify-content:center;
    padding:32px 0;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    padding:80px 32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         svg {
    margin-bottom:24px;
    opacity:0.5;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    font-size:1.5rem;
    margin:0 0 12px 0;
    color:var(--playlist-text-primary,#fff);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    margin:0 0 24px 0;
    font-size:1rem;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:inline-block;
    padding:12px 24px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:500px;
    color:var(--playlist-text-primary,#fff);
    text-decoration:none;
    font-weight:600;
    transition:all 0.2s;
}

.btn-secondary:hover {
    border-color:rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.1);
}

@media (max-width:768px) {
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        font-size:2rem;
    }
    
    
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:16px;
    }
}





/* modules/amPlaylist/css/trending_playlists_extracted.css */


/* Extracted from trending_playlists
            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         */


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    max-width:1200px;
    margin:0 auto;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    text-align:center;
    margin-bottom:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:64px;
    color:var(--playlist-accent-color);
    margin-bottom:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h1 {
    font-size:var(--playlist-title-size-xlarge);
    margin-bottom:var(--playlist-spacing-sm);
    color:var(--playlist-text-primary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    color:var(--playlist-text-secondary);
    font-size:var(--playlist-body-size-large);
    margin-bottom:var(--playlist-spacing-lg);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--playlist-card-width),1fr));
    gap:var(--playlist-card-gap);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:relative;
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    position:absolute;
    top:-10px;
    left:-10px;
    width:40px;
    height:40px;
    background:var(--playlist-accent-color);
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:var(--playlist-font-weight-bold);
    font-size:1.25rem;
    z-index:10;
    box-shadow:var(--playlist-shadow-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--playlist-spacing-xl);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    font-family:'Material Icons',sans-serif;
    font-size:64px;
    color:var(--playlist-text-tertiary);
    margin-bottom:var(--playlist-spacing-md);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         h3 {
    color:var(--playlist-text-primary);
    margin-bottom:var(--playlist-spacing-sm);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         p {
    color:var(--playlist-text-secondary);
}


            param($m)
            $prefix = $m.Groups[1].Value
            $selector = $m.Groups[2].Value
            
            # Skip if already prefixed or is a known Jamroom class
            if ($selector -match '^(amPlaylist-|jr|jp-)') {
                return $m.Value
            }
            
            # Prefix with amPlaylist-
            return "$prefix" + "amPlaylist-$selector"
         {
    margin-top:var(--playlist-spacing-xl);
    text-align:center;
}





/* modules/amPlaylist/css/amPlaylist_shared_missing.css */


/* Shared Missing CSS Classes for amPlaylist Templates */
/* This file contains CSS classes used across multiple templates */

/* ============================================
   Activity Feed Classes
   ============================================ */
.amPlaylist-activity-item {
    display:flex;
    align-items:start;
    gap:12px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
}

.amPlaylist-activity-icon {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--playlist-accent-color,#1DB954);
    border-radius:50%;
    flex-shrink:0;
}

.amPlaylist-icon {
    font-size:1.1rem;
    color:white;
}

.amPlaylist-activity-content {
    flex:1;
}

.amPlaylist-activity-text {
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}

.amPlaylist-activity-time {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-activity {
    text-align:center;
    padding:32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-activity p {
    margin:0;
}

/* ============================================
   Collaborator Classes
   ============================================ */
.amPlaylist-collaborator-manager {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:24px;
    color:white;
}

.amPlaylist-manager-header h3 {
    margin:0 0 8px 0;
    font-size:24px;
    font-weight:700;
}

.amPlaylist-subtitle {
    color:#b3b3b3;
    margin:0 0 24px 0;
}

.amPlaylist-add-collaborator-section {
    margin-bottom:32px;
}

.amPlaylist-search-box {
    position:relative;
}

.amPlaylist-search-box input {
    width:100%;
    padding:12px 16px;
    background:#181818;
    border:1px solid #404040;
    border-radius:4px;
    color:white;
    font-size:14px;
}

.amPlaylist-search-box input:focus {
    outline:none;
    border-color:#1DB954;
}

.amPlaylist-search-results {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#282828;
    border:1px solid #404040;
    border-radius:4px;
    margin-top:4px;
    max-height:300px;
    overflow-y:auto;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.amPlaylist-collaborators-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.amPlaylist-collaborators-list h4 {
    margin:0 0 16px 0;
    font-size:18px;
    font-weight:600;
}

.amPlaylist-collaborator-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
}

.amPlaylist-collaborator-avatar {
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
}

.amPlaylist-collaborator-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-default-avatar {
    width:48px;
    height:48px;
    border-radius:50%;
    background:#1DB954;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:bold;
    color:white;
}

.amPlaylist-collaborator-info {
    display:flex;
    align-items:center;
    gap:12px;
}

.amPlaylist-collaborator-details {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.amPlaylist-collaborator-name {
    font-weight:600;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-collaborator-profile {
    font-size:13px;
    color:#b3b3b3;
}

.amPlaylist-collaborator-email {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-collaborator-avatar-placeholder {
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--playlist-bg-secondary,#181818);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--playlist-text-secondary,#b3b3b3);
    font-weight:bold;
}

.amPlaylist-remove-collaborator-btn,
.amPlaylist-collaborator-remove-btn {
    padding:8px 16px;
    background:transparent;
    border:1px solid #404040;
    border-radius:4px;
    color:white;
    cursor:pointer;
    font-size:13px;
}

.amPlaylist-remove-collaborator-btn:hover,
.amPlaylist-collaborator-remove-btn:hover {
    border-color:#f44336;
    color:#f44336;
}

.amPlaylist-no-collaborators {
    text-align:center;
    padding:32px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-activity-feed-section {
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid #404040;
}

.amPlaylist-activity-feed-section h4 {
    margin:0 0 16px 0;
    font-size:18px;
    font-weight:600;
}

.amPlaylist-loading {
    text-align:center;
    padding:48px 24px;
}

.amPlaylist-loading p {
    margin-bottom:16px;
    color:#b3b3b3;
}

.amPlaylist-collaborative-disabled {
    text-align:center;
    padding:20px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-collaborative-mode-section {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:20px;
    margin-bottom:20px;
}

.amPlaylist-section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.amPlaylist-section-header h3 {
    margin:0;
    font-size:1.25rem;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-help-text {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:4px 0 0 0;
}

.amPlaylist-toggle-container {
    display:flex;
    align-items:center;
    gap:12px;
}

.amPlaylist-switch {
    position:relative;
    display:inline-block;
    width:50px;
    height:24px;
}

.amPlaylist-switch input {
    opacity:0;
    width:0;
    height:0;
}

.amPlaylist-slider {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#ccc;
    transition:0.3s;
    border-radius:24px;
}

.amPlaylist-slider:before {
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background-color:white;
    transition:0.3s;
    border-radius:50%;
}

.amPlaylist-switch input:checked + .amPlaylist-slider {
    background-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-switch input:checked + .amPlaylist-slider:before {
    transform:translateX(26px);
}

.amPlaylist-toggle-label {
    font-size:0.875rem;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-collaborators-section {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.amPlaylist-activity-section {
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.amPlaylist-activity-feed {
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:400px;
    overflow-y:auto;
}

/* ============================================
   Category Browser Classes
   ============================================ */
.amPlaylist-category-browser {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-browser-title {
    font-size:32px;
    font-weight:700;
    margin-bottom:24px;
    color:white;
}

.amPlaylist-categories-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    margin-bottom:48px;
}

.amPlaylist-category-card {
    position:relative;
    padding:24px;
    border-radius:12px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-decoration:none;
    color:white;
    overflow:hidden;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    cursor:pointer;
}

.amPlaylist-category-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
}

.amPlaylist-category-icon {
    position:absolute;
    top:16px;
    right:16px;
    font-size:48px;
    opacity:0.3;
    z-index:2;
}

.amPlaylist-category-name {
    position:relative;
    z-index:2;
    font-size:20px;
    font-weight:700;
    margin:0 0 8px 0;
}

.amPlaylist-category-desc {
    position:relative;
    z-index:2;
    font-size:14px;
    margin:0;
    opacity:0.9;
}

.amPlaylist-genres-list {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:48px;
}

.amPlaylist-genre-tag {
    padding:10px 20px;
    background:#282828;
    border-radius:24px;
    text-decoration:none;
    color:white;
    font-size:14px;
    font-weight:600;
    transition:all 0.2s ease;
    border:1px solid transparent;
}

.amPlaylist-genre-tag:hover {
    background:#1DB954;
    border-color:#1DB954;
    transform:translateY(-2px);
}

.amPlaylist-tags-cloud {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
}

.amPlaylist-tag-item {
    padding:8px 16px;
    background:#181818;
    border-radius:20px;
    text-decoration:none;
    color:#b3b3b3;
    font-weight:500;
    transition:all 0.2s ease;
}

.amPlaylist-tag-item:hover {
    background:#282828;
    color:white;
    transform:scale(1.05);
}

.amPlaylist-material-icons {
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:24px;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
}

.amPlaylist-category-selector {
    margin-bottom:20px;
}

/* ============================================
   Media Player Classes
   ============================================ */
.amPlaylist-media-player {
    width:100%;
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:16px;
}

.amPlaylist-amPlaylist_black_overlay_player,
.amPlaylist-amPlaylist_gray_overlay_player,
.amPlaylist-amPlaylist_player_dark {
    width:100%;
}

.amPlaylist-video_container {
    position:relative;
    width:100%;
}

/* ============================================
   Filter & Search Classes
   ============================================ */
.amPlaylist-filter_option_pill {
    display:inline-block;
    padding:6px 12px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:20px;
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
    font-weight:500;
    transition:all 0.2s;
    cursor:pointer;
}

.amPlaylist-filter_option_pill:hover {
    background:var(--playlist-bg-elevated,#282828);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-search-button {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
    transition:background 0.2s;
}

.amPlaylist-search-button:hover {
    background:var(--playlist-accent-hover,#1ed760);
}

.amPlaylist-search-actions {
    display:flex;
    gap:12px;
    align-items:center;
}

.amPlaylist-discover-main {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-no-results {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-results-hint {
    margin-top:16px;
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-results-icon {
    font-size:48px;
    opacity:0.5;
    margin-bottom:16px;
}

/* ============================================
   Follow Button Classes
   ============================================ */
.amPlaylist-follow-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:20px;
    font-weight:500;
    transition:all 0.2s;
    background:var(--playlist-accent-color,#1DB954);
    color:white;
    border:2px solid transparent;
}

.amPlaylist-follow-btn:hover {
    background:var(--playlist-accent-hover,#1ed760);
    transform:scale(1.05);
}

.amPlaylist-following-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:20px;
    font-weight:500;
    transition:all 0.2s;
    background:transparent;
    color:var(--playlist-text-primary,#ffffff);
    border:2px solid var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-following-btn:hover {
    border-color:var(--playlist-accent-color,#1DB954);
    color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-btn-icon {
    display:inline-flex;
    align-items:center;
}

.amPlaylist-btn-icon svg {
    width:16px;
    height:16px;
}

.amPlaylist-btn-text {
    font-size:0.875rem;
    font-weight:500;
}

.amPlaylist-follower-count-container {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:12px;
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-follower-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-view-followers-link {
    background:none;
    border:none;
    color:var(--playlist-accent-color,#1DB954);
    cursor:pointer;
    padding:0;
    text-decoration:underline;
    font-size:0.875rem;
}

.amPlaylist-view-followers-link:hover {
    color:var(--playlist-accent-hover,#1ed760);
}

/* ============================================
   Following Playlists Classes
   ============================================ */
.amPlaylist-playlist-following-container {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-following-header {
    margin-bottom:24px;
}

.amPlaylist-following-icon {
    font-size:32px;
    margin-bottom:8px;
}

.amPlaylist-following-subtitle {
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:8px;
}

.amPlaylist-following-actions {
    margin-top:16px;
}

.amPlaylist-no-following {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-following-icon {
    font-size:48px;
    opacity:0.5;
    margin-bottom:16px;
}

.amPlaylist-following-pagination {
    margin-top:24px;
    text-align:center;
}

/* ============================================
   Genre & Tag Playlists Classes
   ============================================ */
.amPlaylist-genre-playlists-page,
.amPlaylist-tag-playlists-page {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-page-header {
    margin-bottom:32px;
}

.amPlaylist-breadcrumb {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:16px;
}

.amPlaylist-separator {
    margin:0 8px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-current {
    color:var(--playlist-accent-color,#1DB954);
    font-weight:600;
}

.amPlaylist-page-title {
    font-size:32px;
    font-weight:700;
    margin:8px 0;
    color:white;
}

.amPlaylist-page-subtitle {
    font-size:16px;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:8px;
}

.amPlaylist-tag-icon {
    font-size:24px;
    margin-right:8px;
    vertical-align:middle;
}

.amPlaylist-playlists-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:24px;
    margin-top:32px;
}

.amPlaylist-pagination {
    margin-top:32px;
    text-align:center;
}

.amPlaylist-empty-state {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-btn-secondary {
    padding:10px 20px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-btn-secondary:hover {
    border-color:var(--playlist-accent-color,#1DB954);
    color:var(--playlist-accent-color,#1DB954);
}

/* ============================================
   Index & List Classes
   ============================================ */
.amPlaylist-container {
    max-width:1400px;
    margin:0 auto;
    padding:0 24px;
}

.amPlaylist-row {
    display:flex;
    flex-wrap:wrap;
    margin:0 -12px;
}

.amPlaylist-col12 {
    width:100%;
    padding:0 12px;
}

.amPlaylist-col9 {
    width:75%;
    padding:0 12px;
}

.amPlaylist-col3 {
    width:25%;
    padding:0 12px;
}

.amPlaylist-block {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:24px;
    margin-bottom:24px;
}

.amPlaylist-title {
    font-size:24px;
    font-weight:700;
    margin:0 0 16px 0;
    color:white;
}

.amPlaylist-block_content {
    padding:16px 0;
}

.amPlaylist-block_config {
    margin-bottom:16px;
}

.amPlaylist-breadcrumbs {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:16px;
}

.amPlaylist-playlist-filters-controls {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.amPlaylist-sort_pill_trigger,
.amPlaylist-filter_pill_trigger {
    padding:8px 16px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:20px;
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-sort_pill_trigger:hover,
.amPlaylist-filter_pill_trigger:hover {
    background:var(--playlist-bg-elevated,#282828);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-advanced-search-wrapper {
    margin-top:16px;
}

.amPlaylist-search-toggle-container {
    margin-bottom:16px;
}

.amPlaylist-quick-search-form {
    display:flex;
    gap:12px;
    align-items:center;
}

.amPlaylist-advanced-search-toggle {
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-view-toggle-container {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-view-toggle-btn {
    padding:8px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-view-toggle-btn:hover,
.amPlaylist-view-toggle-btn.active {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-sort_option_pill {
    padding:6px 12px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:20px;
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
    display:inline-block;
    margin:4px;
}

.amPlaylist-sort_option_pill:hover {
    background:var(--playlist-bg-elevated,#282828);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-filter_options_container {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.amPlaylist-advanced-search-panel {
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    padding:20px;
    margin-top:16px;
}

.amPlaylist-advanced-search-form {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.amPlaylist-search-field-group {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.amPlaylist-search-field-group label {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-cancel {
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-submit {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    cursor:pointer;
    font-size:0.875rem;
    font-weight:500;
}

.amPlaylist-active-filters-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    flex-wrap:wrap;
}

.amPlaylist-active-filter-tag {
    padding:4px 12px;
    background:var(--playlist-accent-color,#1DB954);
    border-radius:12px;
    color:white;
    font-size:0.75rem;
    font-weight:500;
}

.amPlaylist-body_3 {
    font-size:0.875rem;
}

.amPlaylist-playlist-list-item {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
    transition:background 0.2s;
}

.amPlaylist-playlist-list-item:hover {
    background:var(--playlist-bg-elevated,#282828);
}

.amPlaylist-playlist-list-row {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
}

/* ============================================
   Item Action & Help Classes
   ============================================ */
.amPlaylist-action_item_title {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-p5 {
    padding:5px;
}

.amPlaylist-item {
    margin-bottom:16px;
}

.amPlaylist-item_profile_help {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:20px;
}

.amPlaylist-center {
    text-align:center;
}

.amPlaylist-last {
    margin-bottom:0;
}

.amPlaylist-p10 {
    padding:10px;
}

/* ============================================
   Overlay & Playlist Box
   ============================================ */
.amPlaylist-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s;
}

.amPlaylist-overlay:hover {
    opacity:1;
}

.amPlaylist-playlist_box {
    position:absolute;
    top:100%;
    left:0;
    background:var(--playlist-bg-elevated,#282828);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:8px;
    padding:16px;
    min-width:300px;
    max-height:400px;
    overflow-y:auto;
    z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* ============================================
   Playlist Add Classes
   ============================================ */
.amPlaylist-new-playlist-row {
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--playlist-border-color,#404040);
}

.amPlaylist-playlist-divider {
    height:1px;
    background:var(--playlist-border-color,#404040);
    margin:16px 0;
}

/* ============================================
   Search Results Classes
   ============================================ */
.amPlaylist-playlist-search-container {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-search-header {
    margin-bottom:24px;
}

.amPlaylist-search-term {
    font-size:18px;
    font-weight:600;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:8px;
}

.amPlaylist-search-form-container {
    margin-bottom:24px;
}

.amPlaylist-results-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:16px;
}

.amPlaylist-search-pagination {
    margin-top:24px;
    text-align:center;
}

/* ============================================
   Trending Playlists Classes
   ============================================ */
.amPlaylist-playlist-trending-container {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-trending-header {
    margin-bottom:24px;
}

.amPlaylist-trending-icon {
    font-size:32px;
    margin-bottom:8px;
}

.amPlaylist-trending-subtitle {
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:8px;
}

.amPlaylist-trending-actions {
    margin-top:16px;
}

.amPlaylist-trending-item {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
}

.amPlaylist-trending-rank {
    font-size:24px;
    font-weight:700;
    color:var(--playlist-accent-color,#1DB954);
    min-width:40px;
    text-align:center;
}

.amPlaylist-no-trending {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-no-trending-icon {
    font-size:48px;
    opacity:0.5;
    margin-bottom:16px;
}

.amPlaylist-trending-pagination {
    margin-top:24px;
    text-align:center;
}

/* ============================================
   Music Browser Classes
   ============================================ */
.amPlaylist-music-browser-filters {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:24px;
}

.amPlaylist-filter-section {
    flex:1;
    min-width:200px;
}

.amPlaylist-filter-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.amPlaylist-filter-btn {
    padding:8px 16px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
    transition:all 0.2s;
}

.amPlaylist-filter-btn:hover,
.amPlaylist-filter-btn.active {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-filter-select {
    width:100%;
    padding:8px 12px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
}

.amPlaylist-bpm-range {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-search-btn {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-clear-filters-btn {
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-view-controls {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-view-toggle {
    display:flex;
    gap:4px;
}

.amPlaylist-view-btn {
    padding:8px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
}

.amPlaylist-view-btn.active {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-bulk-actions {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.amPlaylist-bulk-add-btn {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-selection-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-browser-content {
    margin-top:24px;
}

.amPlaylist-loading-indicator {
    text-align:center;
    padding:48px 24px;
}

.amPlaylist-spinner {
    display:inline-block;
    width:40px;
    height:40px;
    border:4px solid var(--playlist-border-color,#404040);
    border-top-color:var(--playlist-accent-color,#1DB954);
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin {
    to { transform:rotate(360deg); }
}

.amPlaylist-pagination-container {
    margin-top:24px;
    text-align:center;
}

.amPlaylist-modal-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.amPlaylist-modal-content {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:12px;
    width:90%;
    max-width:600px;
    max-height:80vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.amPlaylist-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--playlist-bg-secondary,#181818);
}

.amPlaylist-modal-header h3 {
    margin:0;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-modal-close {
    background:none;
    border:none;
    color:var(--playlist-text-secondary,#b3b3b3);
    font-size:2rem;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.amPlaylist-modal-close:hover {
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-modal-body {
    padding:20px;
    overflow-y:auto;
}

.amPlaylist-playlist-selection {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:16px;
}

.amPlaylist-modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:20px;
    border-top:1px solid var(--playlist-bg-secondary,#181818);
}

.amPlaylist-modal-btn {
    padding:10px 20px;
    border-radius:4px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-confirm {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-browser-pagination {
    margin-top:24px;
    text-align:center;
}

.amPlaylist-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

/* ============================================
   Music Browser Items Classes
   ============================================ */
.amPlaylist-music-tracks-container {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}

.amPlaylist-grid-view {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}

.amPlaylist-music-track-item {
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    padding:12px;
    transition:background 0.2s;
}

.amPlaylist-music-track-item:hover {
    background:var(--playlist-bg-elevated,#282828);
}

.amPlaylist-track-artwork {
    width:100%;
    aspect-ratio:1;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:12px;
}

.amPlaylist-no-artwork {
    width:100%;
    aspect-ratio:1;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-play-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s;
}

.amPlaylist-play-overlay:hover {
    opacity:1;
}

.amPlaylist-track-play-btn {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
}

.amPlaylist-track-select {
    margin-right:8px;
}

.amPlaylist-track-checkbox {
    width:18px;
    height:18px;
    cursor:pointer;
}

.amPlaylist-track-info {
    flex:1;
}

.amPlaylist-track-title {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}

.amPlaylist-track-artist {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-track-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.amPlaylist-meta-item {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-track-actions {
    display:flex;
    gap:8px;
    align-items:center;
}

.amPlaylist-action-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-add-to-queue-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-play-now-btn {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-add-to-playlist-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-action-dropdown {
    position:relative;
}

.amPlaylist-more-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
}

.amPlaylist-dropdown-menu {
    position:absolute;
    top:100%;
    right:0;
    background:var(--playlist-bg-elevated,#282828);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    min-width:150px;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.amPlaylist-load-more-container {
    text-align:center;
    margin-top:24px;
}

.amPlaylist-load-more-btn {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-no-tracks-found {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Music Browser Main Classes
   ============================================ */
.amPlaylist-body_1 {
    font-size:1rem;
}

.amPlaylist-border-1px {
    border:1px solid var(--playlist-border-color,#404040);
}

.amPlaylist-capital {
    text-transform:capitalize;
}

.amPlaylist-grid-icon,
.amPlaylist-list-icon {
    width:20px;
    height:20px;
}

.amPlaylist-active {
    background:var(--playlist-accent-color,#1DB954) !important;
    border-color:var(--playlist-accent-color,#1DB954) !important;
    color:white !important;
}

.amPlaylist-active-filters-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-ml5 {
    margin-left:5px;
}

.amPlaylist-br-info {
    margin-bottom:8px;
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Music Search Row Classes
   ============================================ */
.amPlaylist-music-list-item {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
    transition:background 0.2s;
}

.amPlaylist-music-list-item:hover {
    background:var(--playlist-bg-elevated,#282828);
}

.amPlaylist-grid-col {
    width:33.333%;
    padding:0 12px;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
}

@media (max-width:1100px) {
    .amPlaylist-grid-col {
        width:50%;
    }
}

@media (max-width:700px) {
    .amPlaylist-grid-col {
        width:100%;
        display:block;
    }
}

.amPlaylist-grid-item {
    flex-direction:column;
    align-items:stretch;
}

.amPlaylist-grid-item .amPlaylist-music-list-item-image {
    width:100%;
    height:auto;
}

.amPlaylist-grid-item .amPlaylist-music-list-item-header {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.amPlaylist-grid-item .amPlaylist-music-list-item-play {
    align-self:flex-start;
}

.amPlaylist-grid-item .amPlaylist-music-list-item-footer {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.amPlaylist-grid-item .amPlaylist-music-list-item-actions {
    flex-wrap:wrap;
}

.amPlaylist-music-list-item-image {
    width:64px;
    height:64px;
    border-radius:4px;
    overflow:hidden;
    flex-shrink:0;
}

.amPlaylist-img_scale {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-music-list-item-content {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.amPlaylist-music-list-item-header {
    display:flex;
    align-items:center;
    gap:12px;
}

.amPlaylist-music-list-item-main {
    flex:1;
}

.amPlaylist-music-list-item-title {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}

.amPlaylist-music-list-item-artist {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-list-item-play {
    width:40px;
    height:40px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
}

.amPlaylist-music-list-item-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.amPlaylist-music-list-item-tag {
    padding:4px 8px;
    background:var(--playlist-bg-elevated,#282828);
    border-radius:12px;
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-album,
.amPlaylist-genre,
.amPlaylist-mood,
.amPlaylist-type {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-list-item-footer {
    display:flex;
    align-items:center;
    gap:12px;
}

.amPlaylist-music-list-item-actions {
    display:flex;
    gap:8px;
    align-items:center;
}

.amPlaylist-like_button_box {
    display:inline-flex;
    align-items:center;
}

.amPlaylist-like_button_img {
    width:20px;
    height:20px;
}

.amPlaylist-icon-add {
    width:16px;
    height:16px;
}

.amPlaylist-play-next-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-music-list-item-stats {
    display:flex;
    gap:16px;
    align-items:center;
}

.amPlaylist-music-list-item-stat {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-amPlaylist_modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.amPlaylist-simplemodal-close {
    position:absolute;
    top:16px;
    right:16px;
    background:none;
    border:none;
    color:white;
    font-size:24px;
    cursor:pointer;
}

.amPlaylist-music-empty-state {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-empty-icon {
    font-size:64px;
    opacity:0.5;
    margin-bottom:16px;
}

.amPlaylist-music-empty-title {
    font-size:24px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-music-empty-message {
    font-size:0.875rem;
    margin-bottom:24px;
}

.amPlaylist-music-empty-actions {
    display:flex;
    gap:12px;
    justify-content:center;
}

.amPlaylist-music-empty-btn {
    padding:10px 20px;
    border-radius:4px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-music-empty-btn-primary {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    color:white;
}

.amPlaylist-music-empty-btn-secondary {
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    color:var(--playlist-text-primary,#ffffff);
}

/* ============================================
   Playlist Focus Page Classes
   ============================================ */
.amPlaylist-playlist-focus-container {
    padding:0;
    max-width:100%;
}

.amPlaylist-playlist-hero {
    position:relative;
    padding:80px 24px 40px;
    background:linear-gradient(180deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.8) 100%);
    margin-bottom:32px;
}

.amPlaylist-hero-background {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position:center;
    opacity:0.3;
    z-index:0;
}

.amPlaylist-hero-content {
    position:relative;
    z-index:1;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-playlist-cover-large {
    width:232px;
    height:232px;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.amPlaylist-cover-image {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-cover-edit-btn-focus {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.7);
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
}

.amPlaylist-playlist-metadata {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px;
}

.amPlaylist-playlist-badge {
    display:inline-block;
    padding:4px 12px;
    background:rgba(255,255,255,0.1);
    border-radius:4px;
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.amPlaylist-playlist-title {
    font-size:48px;
    font-weight:700;
    margin:0;
    color:white;
}

.amPlaylist-playlist-description {
    font-size:16px;
    color:rgba(255,255,255,0.9);
    margin:8px 0;
}

.amPlaylist-playlist-stats {
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:16px;
}

.amPlaylist-stat-item {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-creator-link {
    color:white;
    text-decoration:none;
    font-weight:500;
}

.amPlaylist-creator-link:hover {
    text-decoration:underline;
}

.amPlaylist-creator-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
}

.amPlaylist-creator-name {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-stat-value {
    font-weight:600;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-stat-label {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-clickable {
    cursor:pointer;
}

.amPlaylist-primary-actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:24px;
}

.amPlaylist-action-btn {
    padding:12px 24px;
    border-radius:4px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-primary {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    color:white;
}

.amPlaylist-primary:hover {
    background:var(--playlist-accent-hover,#1ed760);
}

.amPlaylist-play-btn {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
    transition:transform 0.2s;
}

.amPlaylist-play-btn:hover {
    transform:scale(1.1);
}

.amPlaylist-icon-btn {
    padding:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%;
    color:white;
    cursor:pointer;
}

.amPlaylist-owner-actions {
    display:flex;
    gap:8px;
    margin-left:auto;
}

.amPlaylist-secondary {
    background:transparent;
    border:1px solid rgba(255,255,255,0.3);
    color:white;
}

.amPlaylist-secondary:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-playlist-content {
    max-width:1400px;
    margin:0 auto;
    padding:0 24px;
}

.amPlaylist-track-list-section {
    margin-top:32px;
}

.amPlaylist-section-title {
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-track-list {
    list-style:none;
    padding:0;
    margin:0;
}

.amPlaylist-playlist-sidebar {
    margin-top:32px;
}

.amPlaylist-sidebar-title {
    font-size:18px;
    font-weight:600;
    margin-bottom:16px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-collaborators-mini-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.amPlaylist-collaborator-mini {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-collab-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
}

.amPlaylist-collab-name {
    font-size:0.875rem;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-view-all-btn {
    margin-top:12px;
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-sidebar-empty {
    text-align:center;
    padding:24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-sidebar-loading {
    text-align:center;
    padding:24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-item-detail-features {
    display:flex;
    gap:16px;
    align-items:center;
    margin-top:16px;
}

/* ============================================
   Item Grid Classes
   ============================================ */
.amPlaylist-playlist-grid-container {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:24px;
}

.amPlaylist-playlist-grid-item {
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    overflow:hidden;
    transition:transform 0.2s;
}

.amPlaylist-playlist-grid-item:hover {
    transform:translateY(-4px);
}

.amPlaylist-playlist-grid-cover {
    position:relative;
    width:100%;
    aspect-ratio:1;
    overflow:hidden;
}

.amPlaylist-playlist-grid-image {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-playlist-play-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s;
}

.amPlaylist-playlist-grid-item:hover .amPlaylist-playlist-play-overlay {
    opacity:1;
}

.amPlaylist-playlist-grid-info {
    padding:12px;
}

.amPlaylist-playlist-grid-empty {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Item List Classes
   ============================================ */
.amPlaylist-playlist-list-item {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:6px;
    margin-bottom:8px;
    transition:background 0.2s;
}

.amPlaylist-playlist-list-item:hover {
    background:var(--playlist-bg-elevated,#282828);
}

/* ============================================
   jrEmbed Item List Classes
   ============================================ */
.amPlaylist-page_table {
    width:100%;
    border-collapse:collapse;
}

.amPlaylist-page_table_row {
    border-bottom:1px solid var(--playlist-border-color,#404040);
}

.amPlaylist-page_table_cell {
    padding:12px;
    vertical-align:middle;
}

.amPlaylist-embed_form_button {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

/* ============================================
   Cover Upload Modal Classes
   ============================================ */
.amPlaylist-playlist-upload-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.amPlaylist-playlist-upload-modal-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
}

.amPlaylist-playlist-upload-modal-content {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:12px;
    width:90%;
    max-width:500px;
    max-height:80vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:10001;
}

.amPlaylist-playlist-upload-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--playlist-bg-secondary,#181818);
}

.amPlaylist-modal-close-btn {
    background:none;
    border:none;
    color:var(--playlist-text-secondary,#b3b3b3);
    font-size:2rem;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.amPlaylist-playlist-upload-modal-body {
    padding:20px;
    overflow-y:auto;
}

.amPlaylist-cover-upload-drop-zone {
    border:2px dashed var(--playlist-border-color,#404040);
    border-radius:8px;
    padding:48px 24px;
    text-align:center;
    transition:all 0.2s;
}

.amPlaylist-cover-upload-drop-zone:hover {
    border-color:var(--playlist-accent-color,#1DB954);
    background:var(--playlist-bg-secondary,#181818);
}

.amPlaylist-upload-icon {
    font-size:48px;
    opacity:0.5;
    margin-bottom:16px;
}

.amPlaylist-upload-hint {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:8px;
}

.amPlaylist-btn-browse {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
    margin-top:16px;
}

.amPlaylist-upload-requirements {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:12px;
}

.amPlaylist-cover-upload-preview {
    margin-top:24px;
    text-align:center;
}

.amPlaylist-preview-overlay {
    position:relative;
    display:inline-block;
}

.amPlaylist-btn-change {
    margin-top:12px;
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
}

.amPlaylist-preview-filename {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:8px;
}

.amPlaylist-cover-upload-progress {
    margin-top:16px;
}

.amPlaylist-progress-bar {
    width:100%;
    height:8px;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:4px;
    overflow:hidden;
}

.amPlaylist-progress-fill {
    height:100%;
    background:var(--playlist-accent-color,#1DB954);
    transition:width 0.3s;
}

.amPlaylist-progress-text {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-top:8px;
    text-align:center;
}

.amPlaylist-playlist-upload-modal-footer {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:20px;
    border-top:1px solid var(--playlist-bg-secondary,#181818);
}

.amPlaylist-btn-primary {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-btn-secondary {
    padding:10px 20px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    font-weight:500;
    cursor:pointer;
}

/* ============================================
   Discover List Item Classes
   ============================================ */
.amPlaylist-playlist-card {
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    overflow:hidden;
    transition:transform 0.2s,box-shadow 0.2s;
}

.amPlaylist-playlist-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
}

.amPlaylist-playlist-card-link {
    text-decoration:none;
    color:inherit;
    display:block;
}

.amPlaylist-playlist-cover {
    position:relative;
    width:100%;
    aspect-ratio:1;
    overflow:hidden;
}

.amPlaylist-playlist-cover-placeholder {
    width:100%;
    height:100%;
    background:var(--playlist-bg-elevated,#282828);
    display:flex;
    align-items:center;
    justify-content:center;
}

.amPlaylist-cover-icon {
    font-size:64px;
    opacity:0.5;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-playlist-play-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s;
}

.amPlaylist-playlist-card:hover .amPlaylist-playlist-play-overlay {
    opacity:1;
}

.amPlaylist-play-button {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
    font-size:24px;
}

.amPlaylist-category-badge {
    position:absolute;
    top:12px;
    left:12px;
    padding:4px 12px;
    background:rgba(0,0,0,0.7);
    border-radius:12px;
    font-size:0.75rem;
    font-weight:600;
    color:white;
}

.amPlaylist-playlist-info {
    padding:16px;
}

.amPlaylist-playlist-title {
    font-size:16px;
    font-weight:600;
    margin:0 0 8px 0;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-playlist-description {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:0 0 12px 0;
}

.amPlaylist-playlist-creator {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:12px;
}

.amPlaylist-playlist-creator a {
    color:var(--playlist-text-primary,#ffffff);
    text-decoration:none;
}

.amPlaylist-playlist-creator a:hover {
    text-decoration:underline;
}

.amPlaylist-playlist-stats {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.amPlaylist-stat-item {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-stat-icon {
    font-size:16px;
    opacity:0.7;
}

/* ============================================
   Player Template Classes
   ============================================ */
.amPlaylist-solo_playlist_player {
    width:100%;
}

.amPlaylist-media_blue_monday_player {
    width:100%;
}

.amPlaylist-ml-5 {
    margin-left:5px;
}

.amPlaylist-player-controls-margin-top {
    margin-top:4px;
}

.amPlaylist-controls-width-16 {
    width:16px;
}

.amPlaylist-current-time-separator {
    color:var(--playlist-text-secondary,#b3b3b3);
    margin:0 4px;
}

.amPlaylist-current-time-separator-flashback {
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-current-time-separator-default {
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Mini Player History Classes
   ============================================ */
.amPlaylist-history-item {
    display:flex;
    align-items:center;
    padding:8px 12px;
    background:rgba(255,255,255,0.05);
    border-radius:8px;
    margin-bottom:6px;
    transition:all 0.2s ease;
}

.amPlaylist-history-item:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-history-item-play-next {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    width:32px;
    height:32px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
}

.amPlaylist-history-item-play-next:hover {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-history-item-play {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    width:32px;
    height:32px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
}

.amPlaylist-history-item-play:hover {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

/* ============================================
   Mini Player Global Classes
   ============================================ */
.amPlaylist-eq-waveform-container {
    position:fixed;
    bottom:130px;
    left:50%;
    transform:translateX(-50%);
    width:540px;
    height:50px;
    z-index:10000;
    display:block;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease;
}

.amPlaylist-mini-player {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:120px;
    background:rgba(18,18,18,0.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    color:#fff;
    z-index:9999;
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:16px;
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 -4px 40px rgba(0,0,0,0.8);
}

.amPlaylist-mini-player-track {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:180px;
    flex:0 0 30%;
}

.amPlaylist-player-artwork-wrapper {
    position:relative;
    width:64px;
    height:64px;
}

.amPlaylist-progress-ring {
    position:absolute;
    top:0;
    left:0;
    transform:rotate(-90deg);
}

.amPlaylist-progress-ring-circle {
    stroke:rgba(255,255,255,0.1);
    stroke-width:3;
    fill:transparent;
}

.amPlaylist-progress-ring-fill {
    stroke:url(#progressGradient);
    stroke-width:3;
    fill:transparent;
    stroke-dasharray:182.21 182.21;
    stroke-dashoffset:182.21;
    transition:stroke-dashoffset 0.3s ease,stroke 0.5s ease;
    stroke-linecap:round;
}

.amPlaylist-player-artwork {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    overflow:hidden;
    background:#1a1a1a;
    box-shadow:0 4px 16px rgba(0,0,0,0.8);
}

.amPlaylist-mini-player-info {
    flex:1;
}

.amPlaylist-mini-player-title {
    font-size:14px;
    font-weight:600;
    text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.amPlaylist-mini-player-artist {
    font-size:12px;
    color:#b3b3b3;
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.amPlaylist-mini-player-controls {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    max-width:722px;
    margin:0 auto;
}

.amPlaylist-mini-player-buttons {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.amPlaylist-mini-player-btn {
    background:transparent;
    border:none;
    color:#fff;
    cursor:pointer;
    padding:8px;
    border-radius:50%;
    font-size:16px;
    transition:all 0.2s ease;
}

.amPlaylist-mini-player-btn:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-shuffle {
    font-size:16px;
}

.amPlaylist-mini-player-btn-main {
    font-size:20px;
}

.amPlaylist-repeat {
    font-size:16px;
}

.amPlaylist-mini-player-progress {
    width:100%;
    display:flex;
    align-items:center;
    gap:2px;
    margin-top:-12px;
}

.amPlaylist-mini-player-time {
    font-size:11px;
    color:#b3b3b3;
    min-width:40px;
}

.amPlaylist-current {
    text-align:right;
}

.amPlaylist-progress-waveform-container {
    flex:1;
    height:62px;
    background:transparent;
    border-radius:4px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

.amPlaylist-mini-player-extra {
    display:flex;
    align-items:center;
    gap:6px;
    min-width:180px;
    flex:0 0 40%;
    justify-content:flex-end;
}

.amPlaylist-mini-player-volume {
    display:flex;
    align-items:center;
    gap:8px;
    max-width:125px;
    padding:0 20px;
}

.amPlaylist-queue-panel {
    position:fixed;
    bottom:120px;
    right:0;
    width:400px;
    max-height:60vh;
    background:rgba(18,18,18,0.98);
    backdrop-filter:blur(20px);
    border-left:1px solid rgba(255,255,255,0.08);
    border-top:1px solid rgba(255,255,255,0.08);
    z-index:10000;
    display:flex;
    flex-direction:column;
    box-shadow:-4px 0 40px rgba(0,0,0,0.8);
}

.amPlaylist-queue-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.amPlaylist-queue-close-btn {
    background:transparent;
    border:none;
    color:#fff;
    cursor:pointer;
    padding:8px;
    font-size:18px;
}

.amPlaylist-queue-content {
    flex:1;
    overflow-y:auto;
    padding:16px;
}

.amPlaylist-queue-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:6px;
    margin-bottom:8px;
    transition:background 0.2s;
}

.amPlaylist-queue-item:hover {
    background:rgba(255,255,255,0.05);
}

.amPlaylist-now-playing {
    background:rgba(29,185,84,0.1);
    border:1px solid rgba(29,185,84,0.3);
}

.amPlaylist-queue-item-info {
    flex:1;
    min-width:0;
}

.amPlaylist-queue-footer {
    padding:16px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.amPlaylist-queue-clear-btn {
    width:100%;
    padding:10px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:4px;
    color:#fff;
    cursor:pointer;
    font-weight:500;
}

.amPlaylist-queue-clear-btn:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-speed-menu-title,
.amPlaylist-share-menu-title,
.amPlaylist-sleep-timer-menu-title,
.amPlaylist-crossfade-menu-title {
    font-size:0.875rem;
    font-weight:600;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:8px;
}

.amPlaylist-speed-option,
.amPlaylist-share-option,
.amPlaylist-sleep-timer-option,
.amPlaylist-crossfade-option {
    padding:8px 12px;
    background:transparent;
    border:none;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
    text-align:left;
    width:100%;
    border-radius:4px;
    transition:background 0.2s;
}

.amPlaylist-speed-option:hover,
.amPlaylist-share-option:hover,
.amPlaylist-sleep-timer-option:hover,
.amPlaylist-crossfade-option:hover {
    background:rgba(255,255,255,0.1);
}

/* ============================================
   Item Detail V2 Classes
   ============================================ */
.amPlaylist-playlist-focus-page {
    width:100%;
}

.amPlaylist-playlist-type {
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--playlist-text-secondary,#b3b3b3);
    margin-bottom:8px;
}

.amPlaylist-playlist-meta-dot {
    display:inline-block;
    width:4px;
    height:4px;
    background:var(--playlist-text-secondary,#b3b3b3);
    border-radius:50%;
    margin:0 8px;
    vertical-align:middle;
}

.amPlaylist-play-all-btn {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
    transition:transform 0.2s;
}

.amPlaylist-play-all-btn:hover {
    transform:scale(1.1);
}

.amPlaylist-playlist-action-btn {
    padding:8px 16px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:4px;
    color:white;
    cursor:pointer;
    font-size:0.875rem;
    font-weight:500;
    transition:all 0.2s;
}

.amPlaylist-playlist-action-btn:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-track-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    border-radius:4px;
    transition:background 0.2s;
}

.amPlaylist-track-row:hover {
    background:rgba(255,255,255,0.05);
}

.amPlaylist-track-number {
    width:24px;
    text-align:center;
    color:var(--playlist-text-secondary,#b3b3b3);
    font-size:0.875rem;
}

.amPlaylist-track-details {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.amPlaylist-track-album {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    min-width:150px;
}

.amPlaylist-track-duration {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
    min-width:60px;
    text-align:right;
}

.amPlaylist-track-action-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:4px;
    color:white;
    cursor:pointer;
    font-size:0.75rem;
    transition:all 0.2s;
}

.amPlaylist-track-action-btn:hover {
    background:rgba(255,255,255,0.1);
}

/* ============================================
   Playlist Focus Page Additional Classes
   ============================================ */
.amPlaylist-playlist-focus-container {
    padding:0;
    max-width:100%;
}

.amPlaylist-hero-background {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position:center;
    opacity:0.3;
    z-index:0;
}

.amPlaylist-hero-content {
    position:relative;
    z-index:1;
    max-width:1400px;
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    gap:24px;
    padding:40px 24px;
}

.amPlaylist-playlist-cover-large {
    width:232px;
    height:232px;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    flex-shrink:0;
}

.amPlaylist-cover-image {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-cover-edit-btn-focus {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.7);
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
    transition:background 0.2s;
}

.amPlaylist-cover-edit-btn-focus:hover {
    background:rgba(0,0,0,0.9);
}

.amPlaylist-playlist-badge {
    display:inline-block;
    padding:4px 12px;
    background:rgba(255,255,255,0.1);
    border-radius:4px;
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
}

.amPlaylist-playlist-actions {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-primary-actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:24px;
}

.amPlaylist-icon-btn {
    padding:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%;
    color:white;
    cursor:pointer;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.amPlaylist-icon-btn:hover {
    background:rgba(255,255,255,0.2);
}

.amPlaylist-owner-actions {
    display:flex;
    gap:8px;
    margin-left:auto;
}

.amPlaylist-track-list-section {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-section-title {
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-playlist-sidebar {
    padding:24px;
    max-width:1400px;
    margin:0 auto;
}

.amPlaylist-sidebar-section {
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
    padding:20px;
    margin-bottom:24px;
}

.amPlaylist-sidebar-title {
    font-size:18px;
    font-weight:600;
    margin-bottom:16px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-collaborators-mini-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.amPlaylist-collaborator-mini {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-collab-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
}

.amPlaylist-collab-name {
    font-size:0.875rem;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-view-all-btn {
    margin-top:12px;
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-view-all-btn:hover {
    border-color:var(--playlist-accent-color,#1DB954);
    color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-sidebar-empty {
    text-align:center;
    padding:24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Music Browser Additional Classes
   ============================================ */
.amPlaylist-music-browser-filters {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:24px;
    padding:20px;
    background:var(--playlist-bg-elevated,#282828);
    border-radius:8px;
}

.amPlaylist-filter-section {
    flex:1;
    min-width:200px;
}

.amPlaylist-filter-section h3 {
    font-size:0.875rem;
    font-weight:600;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:12px;
}

.amPlaylist-filter-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.amPlaylist-filter-btn {
    padding:8px 16px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
    transition:all 0.2s;
}

.amPlaylist-filter-btn:hover,
.amPlaylist-filter-btn.amPlaylist-active {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-filter-select {
    width:100%;
    padding:8px 12px;
    background:var(--playlist-bg-secondary,#181818);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    font-size:0.875rem;
    margin-bottom:8px;
}

.amPlaylist-filter-select:focus {
    outline:none;
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-bpm-range {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-search-btn {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-clear-filters-btn {
    padding:8px 16px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-view-controls {
    display:flex;
    align-items:center;
    gap:8px;
}

.amPlaylist-view-toggle {
    display:flex;
    gap:4px;
}

.amPlaylist-view-btn {
    padding:8px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
}

.amPlaylist-view-btn.active {
    background:var(--playlist-accent-color,#1DB954);
    border-color:var(--playlist-accent-color,#1DB954);
}

.amPlaylist-bulk-actions {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.amPlaylist-bulk-add-btn {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-selection-count {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-browser-content {
    margin-top:24px;
}

.amPlaylist-loading-indicator {
    text-align:center;
    padding:48px 24px;
}

.amPlaylist-spinner {
    display:inline-block;
    width:40px;
    height:40px;
    border:4px solid var(--playlist-border-color,#404040);
    border-top-color:var(--playlist-accent-color,#1DB954);
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin {
    to { transform:rotate(360deg); }
}

.amPlaylist-pagination-container {
    margin-top:24px;
    text-align:center;
}

.amPlaylist-browser-pagination {
    margin-top:24px;
    text-align:center;
}

/* ============================================
   Music Browser Items Additional Classes
   ============================================ */
.amPlaylist-music-tracks-container {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}

.amPlaylist-grid-view {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}

.amPlaylist-music-track-item {
    background:var(--playlist-bg-secondary,#181818);
    border-radius:8px;
    padding:12px;
    transition:background 0.2s;
}

.amPlaylist-music-track-item:hover {
    background:var(--playlist-bg-elevated,#282828);
}

.amPlaylist-track-artwork {
    position:relative;
    width:100%;
    aspect-ratio:1;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:12px;
}

.amPlaylist-track-artwork img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-no-artwork {
    width:100%;
    aspect-ratio:1;
    background:var(--playlist-bg-secondary,#181818);
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-play-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.2s;
}

.amPlaylist-music-track-item:hover .amPlaylist-play-overlay {
    opacity:1;
}

.amPlaylist-track-play-btn {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
}

.amPlaylist-track-select {
    position:absolute;
    top:8px;
    left:8px;
    z-index:10;
}

.amPlaylist-track-checkbox {
    width:18px;
    height:18px;
    cursor:pointer;
}

.amPlaylist-track-info {
    flex:1;
}

.amPlaylist-track-title {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
    font-size:0.875rem;
}

.amPlaylist-track-artist {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-track-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.amPlaylist-meta-item {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-track-actions {
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:8px;
}

.amPlaylist-action-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-action-btn:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-add-to-queue-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-play-now-btn {
    padding:8px 16px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-add-to-playlist-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-action-dropdown {
    position:relative;
}

.amPlaylist-more-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
}

.amPlaylist-dropdown-menu {
    position:absolute;
    top:100%;
    right:0;
    background:var(--playlist-bg-elevated,#282828);
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    min-width:150px;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.amPlaylist-load-more-container {
    text-align:center;
    margin-top:24px;
}

.amPlaylist-load-more-btn {
    padding:10px 20px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:4px;
    color:white;
    font-weight:500;
    cursor:pointer;
}

.amPlaylist-no-tracks-found {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

/* ============================================
   Music Search Row Additional Classes
   ============================================ */
.amPlaylist-music-list-item-image {
    width:140px;
    height:140px;
    border-radius:4px;
    overflow:hidden;
    flex-shrink:0;
}

.amPlaylist-img_scale {
    width:100%;
    height:100%;
    object-fit:cover;
}

.amPlaylist-music-list-item-content {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.amPlaylist-music-list-item-header {
    display:flex;
    align-items:center;
    gap:12px;
}

.amPlaylist-music-list-item-main {
    flex:1;
}

.amPlaylist-music-list-item-title {
    font-weight:500;
    color:var(--playlist-text-primary,#ffffff);
    margin-bottom:4px;
}

.amPlaylist-music-list-item-artist {
    font-size:0.875rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-list-item-play {
    width:40px;
    height:40px;
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:pointer;
}

.amPlaylist-music-list-item-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.amPlaylist-music-list-item-tag {
    padding:4px 8px;
    background:var(--playlist-bg-elevated,#282828);
    border-radius:12px;
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-album,
.amPlaylist-genre,
.amPlaylist-mood,
.amPlaylist-type {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-list-item-footer {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
}

.amPlaylist-music-list-item-actions {
    display:flex;
    gap:8px;
    align-items:center;
}

.amPlaylist-like_button_box {
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-like_button_box:hover {
    background:rgba(255,255,255,0.1);
}

.amPlaylist-like_button_img {
    width:18px;
    height:18px;
}

.amPlaylist-icon-add {
    width:16px;
    height:16px;
}

.amPlaylist-play-next-btn {
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    border-radius:4px;
    color:var(--playlist-text-primary,#ffffff);
    cursor:pointer;
    font-size:0.875rem;
}

.amPlaylist-music-list-item-stats {
    display:flex;
    gap:16px;
    align-items:center;
    margin-left:auto;
}

.amPlaylist-music-list-item-stat {
    font-size:0.75rem;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-amPlaylist_modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.amPlaylist-simplemodal-close {
    position:absolute;
    top:16px;
    right:16px;
    background:none;
    border:none;
    color:white;
    font-size:24px;
    cursor:pointer;
}

.amPlaylist-music-empty-state {
    text-align:center;
    padding:48px 24px;
    color:var(--playlist-text-secondary,#b3b3b3);
}

.amPlaylist-music-empty-icon {
    font-size:64px;
    opacity:0.5;
    margin-bottom:16px;
}

.amPlaylist-music-empty-title {
    font-size:24px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--playlist-text-primary,#ffffff);
}

.amPlaylist-music-empty-message {
    font-size:0.875rem;
    margin-bottom:24px;
}

.amPlaylist-music-empty-actions {
    display:flex;
    gap:12px;
    justify-content:center;
}

.amPlaylist-music-empty-btn {
    padding:10px 20px;
    border-radius:4px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s;
}

.amPlaylist-music-empty-btn-primary {
    background:var(--playlist-accent-color,#1DB954);
    border:none;
    color:white;
}

.amPlaylist-music-empty-btn-secondary {
    background:transparent;
    border:1px solid var(--playlist-border-color,#404040);
    color:var(--playlist-text-primary,#ffffff);
}

/* Note:jp_container_{$uniqid} IDs are used by jPlayer library and should remain as-is for compatibility */


/* modules/amVideo/css/module.css */


/*
Combined and refactored styles for the amVideo module.
This file consolidates styles from the legacy HTML5 player and the watch page,
and introduces modern CSS practices like variables for easier theming.
*/

:root {
  --amVideo-primary-color:#e53935;
  --amVideo-background-color:#000;
  --amVideo-text-color:#fff;
  --amVideo-control-bg:rgba(0,0,0,0.62);
  --amVideo-progress-bg:#333;
  --amVideo-progress-buffered:#555;
  --amVideo-border-radius:12px;
  --amVideo-font-family:sans-serif;
}

.amVideo-html5-player {
    position:relative;
    max-width:100%;
    background:var(--amVideo-background-color);
    color:var(--amVideo-text-color);
    border-radius:var(--amVideo-border-radius);
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.2);
    font-family:var(--amVideo-font-family);
}

.amVideo-video {
    width:100%;
    height:auto;
    display:block;
    background:#000;
    aspect-ratio:16/9;
    object-fit:contain;
}

.amVideo-controls {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    background:var(--amVideo-control-bg);
    backdrop-filter:saturate(120%) blur(2px);
    transition:opacity .2s ease;
}

.amVideo-controls button:focus,
.amVideo-controls select:focus,
.amVideo-controls input:focus {
    outline:2px solid #66afe9;
    outline-offset:2px;
}

.amVideo-html5-player:not(.amVideo-controls-visible) .amVideo-controls {
    opacity:0;
    pointer-events:none;
}

.amVideo-html5-player.amVideo-controls-visible .amVideo-controls {
    opacity:1;
}

.amVideo-btn {
    width:35px;
    height:35px;
    border:0;
    background-color:transparent;
    border-radius:6px;
    cursor:pointer;
    box-shadow:none;
    outline:none;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:20px;
}

.amVideo-btn:hover {
    filter:brightness(1.2);
}

.amVideo-btn:active {
    transform:scale(0.98);
}

.amVideo-btn.amVideo-play { background-image:url("../img/icons/play.svg"); }
.amVideo-btn.amVideo-pause { background-image:url("../img/icons/pause.svg"); }
.amVideo-btn.amVideo-mute { background-image:url("../img/icons/volume.svg"); }
.amVideo-btn.amVideo-mute.is-muted { background-image:url("../img/icons/mute.svg"); }
.amVideo-btn.amVideo-fullscreen { background-image:url("../img/icons/fullscreen.svg"); }
.amVideo-btn.amVideo-pip { background-image:url("../img/icons/pip.svg"); }

.amVideo-time {
    color:#ddd;
    font:14px/1.3 var(--amVideo-font-family);
    display:flex;
    gap:6px;
    align-items:center;
}

.amVideo-progress {
    position:relative;
    flex:1;
    height:6px;
    background:var(--amVideo-progress-bg);
    border-radius:3px;
    cursor:pointer;
}

.amVideo-progress .amVideo-buffered {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    background:var(--amVideo-progress-buffered);
    border-radius:3px;
}

.amVideo-progress .amVideo-played {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    background:var(--amVideo-primary-color);
    border-radius:3px;
}

/* Legacy layout utilities (inline style replacements) */
.amVideo-table {
    display:table;
    width:100%;
}

.amVideo-table-95 {
    width:95%;
}

.amVideo-table-row {
    display:table-row;
}

.amVideo-table-cell {
    display:table-cell;
}

.amVideo-cell-5 { width:5%; }
.amVideo-cell-10 { width:10%; }
.amVideo-cell-20 { width:20%; }
.amVideo-cell-35 { width:35%; }
.amVideo-cell-48 { width:48%; }
.amVideo-cell-52 { width:52%; }
.amVideo-cell-65 { width:65%; }
.amVideo-cell-70 { width:70%; }
.amVideo-cell-90 { width:90%; }
.amVideo-cell-100 { width:100%; }

.amVideo-v-middle {
    vertical-align:middle;
}

.amVideo-align-content-center {
    align-content:center;
}

.amVideo-float-right {
    float:right;
}

.amVideo-float-left {
    float:left;
}

.amVideo-hidden {
    display:none;
}

.amVideo-pr-10 { padding-right:10px; }
.amVideo-pr-15 { padding-right:15px; }
.amVideo-pl-5 { padding-left:5px; }
.amVideo-pl-10 { padding-left:10px; }
.amVideo-pl-15 { padding-left:15px; }
.amVideo-pt-10 { padding-top:10px; }
.amVideo-pb-5 { padding-bottom:5px; }
.amVideo-p-10 { padding:10px; }
.amVideo-pb-12 { padding-bottom:12px; }

.amVideo-mt-1 { margin-top:1px; }
.amVideo-mt-3 { margin-top:3px; }
.amVideo-mt-6 { margin-top:6px; }
.amVideo-mt-12 { margin-top:12px; }
.amVideo-mb-2 { margin-bottom:2px; }
.amVideo-ml-6 { margin-left:6px; }
.amVideo-ml-20 { margin-left:20px; }

.amVideo-width-90 { width:90%; }
.amVideo-width-98 { width:98%; }
.amVideo-width-100 { width:100%; }
.amVideo-width-2 { width:2%; }
.amVideo-width-5 { width:5%; }
.amVideo-width-16 { width:16%; }
.amVideo-width-25 { width:25%; }
.amVideo-width-43 { width:43%; }
.amVideo-width-50 { width:50%; }
.amVideo-width-60px { width:60px; }

.amVideo-text-center { text-align:center; }
.amVideo-text-right { text-align:right; }

.amVideo-inline-block { display:inline-block; }
.amVideo-block { display:block; }
.amVideo-width-85 { width:85%; }
.amVideo-width-130 { width:130px; }
.amVideo-line-height-2 { line-height:2; }

.amVideo-text-uppercase {
    text-transform:uppercase;
}

.amVideo-media-height-90 {
    height:90px;
}

.amVideo-img-height-110 {
    height:110px;
}

.amVideo-height-275 {
    height:275px;
}

.amVideo-description-scroll {
    max-width:555px;
    overflow:auto;
    height:75px;
}

.filter_option_pill {
    display:inline-block;
    margin-right:10px;
    margin-bottom:5px;
}

.filter_option_pill.is-disabled {
    opacity:0.6;
    cursor:default;
}

.filter_option_pill.is-clickable {
    cursor:pointer;
}

.amVideo-filter-empty {
    padding:10px;
    color:#999;
    font-style:italic;
}

/* Tooltips */
.amVideo-seek-tooltip,
.amVideo-preview {
    position:absolute;
    bottom:140%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.86);
    color:#fff;
    padding:3px 8px;
    border-radius:6px;
    font-size:11px;
    pointer-events:none;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    z-index:5;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease;
}

.amVideo-progress:hover .amVideo-seek-tooltip,
.amVideo-progress:hover .amVideo-preview {
    opacity:1;
    visibility:visible;
}

.amVideo-preview {
    width:160px;
    height:90px;
    padding:0;
    border:1px solid #444;
}

.amVideo-preview-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Volume */
.amVideo-volume {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:8px;
}

.amVideo-volume-range {
    width:120px;
    height:8px;
}

/* Watch Page & Theater Mode */
.watch-row .col3 { float:right; }

.amVideo-theater-mode .watch-row .col3 { display:none !important; }
.amVideo-theater-mode .watch-row .col9 { width:100% !important; }

.amVideo-html5-player.amVideo-theater {
    max-width:none;
    width:100%;
    border-radius:0 !important;
}

.amVideo-theater-mode .amVideo-html5-player.amVideo-theater {
    position:relative;
    z-index:3;
    width:100% !important;
    max-width:100% !important;
    left:auto;
    right:auto;
    margin:0 !important;
}

.amVideo-theater-mode .amVideo-html5-player.amVideo-theater .amVideo-video {
    height:85vh !important;
    max-height:85vh !important;
    border-radius:0;
}

/* Sidebar Playlist */
.amVideo-pl { display:flex; flex-direction:column; gap:8px; }
.amVideo-pl-item {
    display:flex;
    gap:10px;
    align-items:center;
    padding:6px;
    border-radius:6px;
    background:#0b0b0b;
    color:var(--amVideo-text-color);
    text-decoration:none;
}
.amVideo-pl-item:hover { background:#111; }
.amVideo-pl-item.is-current{ background:#0f172a; }

.amVideo-pl-thumb {
    width:100px;
    height:56px;
    flex-shrink:0;
    border-radius:6px;
    overflow:hidden;
    background:#222;
}
.amVideo-pl-img { width:100%; height:100%; object-fit:cover; }
.amVideo-pl-meta { min-width:0; }
.amVideo-pl-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amVideo-pl-sub { font-size:11px; color:#bbb; }

/* Basic layout utilities */
.amVideo-container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}

.amVideo-row {
    display:flex;
    flex-wrap:wrap;
    margin:0 -15px;
}

/* Slider Template Styles */
.amVideo-debug-overlay {
    position:absolute;
    top:10px;
    left:10px;
    background:rgba(255,0,0,0.9);
    color:white;
    padding:8px;
    font-size:12px;
    z-index:1000;
    border-radius:4px;
}

.amVideo-main-fallback {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    padding:20px;
}

.amVideo-main-fallback-content {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.amVideo-main-fallback-icon {
    font-size:48px;
    margin-bottom:15px;
    opacity:0.8;
}

.amVideo-main-fallback-title {
    margin:0 0 10px 0;
    font-size:24px;
}

.amVideo-main-fallback-text {
    margin:0;
    opacity:0.9;
}

.amVideo-debug-overlay-fixed {
    position:fixed;
    top:80px;
    left:10px;
    background:rgba(0,0,255,0.9);
    color:white;
    padding:8px;
    font-size:12px;
    z-index:1000;
    border-radius:4px;
}

.amVideo-thumbnail-fallback {
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    padding:10px;
}

.amVideo-thumbnail-fallback-add {
    background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%);
}

.amVideo-thumbnail-fallback-upload {
    background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
}

.amVideo-thumbnail-fallback-watch {
    background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
}

.amVideo-thumbnail-fallback-content {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.amVideo-thumbnail-fallback-icon {
    font-size:24px;
    margin-bottom:5px;
}

.amVideo-thumbnail-fallback-text {
    font-size:12px;
}

.amVideo-debug-overlay-right {
    position:fixed;
    top:10px;
    right:10px;
    background:rgba(0,255,0,0.9);
    color:white;
    padding:8px;
    font-size:12px;
    z-index:1000;
    border-radius:4px;
    max-width:300px;
}

.amVideo-debug-overlay-bottom {
    position:fixed;
    bottom:10px;
    right:10px;
    background:rgba(255,165,0,0.9);
    color:white;
    padding:8px;
    font-size:12px;
    z-index:1000;
    border-radius:4px;
    max-width:300px;
}

.amVideo-debug-panel {
    background:#e0e0ff;
    padding:10px;
    margin:5px 0;
    border:1px solid #00c;
    font-family:monospace;
    font-size:11px;
}

.amVideo-debug-panel strong {
    color:#00c;
}

.amVideo-mini-fallback {
    width:100%;
    height:120px;
    background:linear-gradient(135deg,#ff6b6b 0%,#4ecdc4 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    padding:10px;
}

.amVideo-mini-fallback-content {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.amVideo-mini-fallback-icon {
    font-size:24px;
    margin-bottom:5px;
    opacity:0.8;
}

.amVideo-mini-fallback-title {
    font-size:12px;
    font-weight:bold;
}

.amVideo-mini-fallback-text {
    font-size:10px;
    opacity:0.9;
}

.amVideo-interactive-fallback {
    width:100%;
    height:200px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    padding:20px;
    border-radius:8px;
}

.amVideo-interactive-fallback-content {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.amVideo-interactive-fallback-icon {
    font-size:36px;
    margin-bottom:10px;
    opacity:0.8;
}

.amVideo-interactive-fallback-title {
    font-size:16px;
    font-weight:bold;
}

.amVideo-interactive-fallback-text {
    font-size:12px;
    opacity:0.9;
}

.amVideo-error-message {
    padding:20px;
    background:rgb(65,3,3);
    border:2px solid red;
    margin:10px 0;
}

.amVideo-debug-panel-hero {
    background:#f0f0f0;
    padding:15px;
    margin:10px 0;
    border:2px solid #333;
    font-family:monospace;
    font-size:12px;
}

.amVideo-debug-panel-hero strong {
    color:#c00;
}

.amVideo-debug-info {
    background:#d1ecf1;
    padding:10px;
    margin:5px 0;
    border:1px solid #0c5460;
}

.amVideo-quality-menu-hidden {
    display:none;
}

.amVideo-speed-menu-hidden {
    display:none;
}

/* Player Template Styles */
.amVideo-playbtn-relative {
    position:relative;
}

.amVideo-controls-width-55 {
    width:55px;
}

.amVideo-controls-margin-left {
    margin-left:5px;
}

.amVideo-controls-secondary {
    width:16px;
    margin-right:6px;
    margin-left:5px;
}

.amVideo-time-separator {
    float:left;
    font-size:.64em;
    font-style:oblique;
}

.amVideo-time-separator-flashback {
    margin-top:2px;
}

.amVideo-time-separator-default {
    margin-top:-1px;
}

.amVideo-playlist-visible {
    max-height:150px;
    overflow:auto;
}

.amVideo-playlist-hidden {
    display:none;
}

/* Index/Explore Template Styles */
.amVideo-filters-controls {
    margin-bottom:20px;
}

.amVideo-flex-between {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.amVideo-flex-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto;
    min-width:300px;
}

.amVideo-search-wrapper {
    flex:0 1 auto;
    min-width:280px;
    max-width:400px;
}

.amVideo-search-container {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

.amVideo-reset-link {
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.amVideo-view-toggle-container {
    display:flex;
    gap:5px;
    flex:0 0 auto;
    margin-left:auto;
}

.amVideo-hidden-options {
    display:none;
    padding:10px 0;
    border-top:1px solid #ddd;
    margin-top:10px;
}

.amVideo-sort-pill-trigger,
.amVideo-filter-pill-trigger {
    display:inline-block;
    padding:6px 12px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:20px;
    color:#666;
    font-size:13px;
    cursor:pointer;
    transition:all 0.2s ease;
    margin-right:8px;
}

.amVideo-sort-pill-trigger:hover,
.amVideo-filter-pill-trigger:hover {
    background:#e74c3c;
    color:white;
    border-color:#e74c3c;
}

.amVideo-sort-option {
    display:inline-block;
    margin-right:10px;
}

.amVideo-sort-option-disabled {
    opacity:0.6;
    cursor:default;
}

.amVideo-sort-option-pill {
    display:inline-block;
    padding:6px 12px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:20px;
    color:#666;
    font-size:13px;
    margin-right:8px;
    margin-bottom:5px;
}

.amVideo-sort-link {
    text-decoration:none;
    color:inherit;
}

.amVideo-sort-link:hover {
    text-decoration:none;
}

.amVideo-filter-option {
    display:inline-block;
    margin-right:10px;
    margin-bottom:5px;
}

.amVideo-filter-option-pill {
    display:inline-block;
    padding:6px 12px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:20px;
    color:#666;
    font-size:13px;
    margin-right:8px;
    margin-bottom:5px;
}

.amVideo-filter-link {
    text-decoration:none;
    color:inherit;
}

.amVideo-filter-link:hover {
    text-decoration:none;
}

.amVideo-filter-options-container {
    display:none;
    padding:10px 0;
    border-top:1px solid #ddd;
    margin-top:10px;
}

.amVideo-filter-options-container.amVideo-hidden-options {
    display:none;
}

.amVideo-active-filters {
    margin:15px 0;
    padding:10px;
    background:#f8f9fa;
    border-radius:5px;
}

.amVideo-active-filters-content {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.amVideo-active-filters-label {
    font-weight:600;
    color:#333;
}

.amVideo-filter-tag {
    background:#e74c3c;
    color:white;
    padding:4px 12px;
    border-radius:20px;
    font-size:13px;
}

.amVideo-filter-tag-remove {
    color:white;
    margin-left:6px;
    text-decoration:none;
}

.amVideo-video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

.amVideo-video-list {
    display:block;
}

/* Explore Template Styles */
.amVideo-explore-hero {
    position:relative;
    width:100%;
    height:450px;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:30px;
    box-shadow:0 8px 30px rgba(0,0,0,0.2);
    background:#f0f0f0;
    z-index:1;
}

.amVideo-hero-fallback {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.amVideo-hero-fallback-overlay {
    background:rgba(0,0,0,0.3);
    position:relative;
    text-align:center;
}

.amVideo-hero-explore-btn {
    background:#ff0000;
}

/* Embed Template Styles */
.amVideo-embed-not-found {
    color:#fff;
    text-align:center;
    padding:40px;
}

/* Debug Template Styles */
.amVideo-debug-section {
    padding:20px;
    margin-bottom:20px;
    border-radius:8px;
}

.amVideo-debug-warning {
    background:#fff3cd;
    border:2px solid #ffc107;
}

.amVideo-debug-info {
    background:#d1ecf1;
    border:2px solid #0c5460;
}

.amVideo-debug-success {
    background:#d4edda;
    border:2px solid #c3e6cb;
}

.amVideo-debug-section-title {
    margin:0 0 15px 0;
}

.amVideo-debug-warning .amVideo-debug-section-title {
    color:#856404;
}

.amVideo-debug-info .amVideo-debug-section-title {
    color:#0c5460;
}

.amVideo-debug-success .amVideo-debug-section-title {
    color:#155724;
}

.amVideo-debug-content {
    font-family:monospace;
    font-size:13px;
}

.amVideo-debug-table {
    border-collapse:collapse;
    width:100%;
    margin-top:10px;
}

.amVideo-debug-table-header {
    background:#f8f9fa;
}

.amVideo-debug-error {
    background:#f8d7da;
    padding:10px;
    border-radius:5px;
    color:#721c24;
    margin-top:10px;
}

.amVideo-debug-active-cell {
    background:#d4edda;
}

.amVideo-debug-inactive-cell {
    background:#f8d7da;
}

.amVideo-debug-actions {
    padding:20px;
    text-align:center;
}

/* Cards Admin Template Styles */
.amVideo-cards-builder {
    margin-top:12px;
}

.amVideo-cursor-pointer {
    cursor:pointer;
}

/* Explore Template Additional Styles */
.amVideo-section-title {
    font-size:24px;
    font-weight:800;
    margin:0 0 20px 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:10px;
}

.amVideo-section-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:10px;
    box-shadow:0 4px 12px rgba(102,126,234,0.3);
}

.amVideo-section-icon i {
    color:white;
    font-size:18px;
}

.amVideo-section-margin {
    margin-bottom:32px;
}

.amVideo-hover-video {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Column classes */
.amVideo-col3 { width:25%; }
.amVideo-col9 { width:75%; }
.amVideo-col8 { width:66.666%; }
.amVideo-col4 { width:33.333%; }
.amVideo-col12 { width:100%; }

/* Typography classes */
.amVideo-title-list-item {
    font-size:18px;
    font-weight:600;
    margin-bottom:8px;
}

.amVideo-title-list-item a {
    color:#333;
    text-decoration:none;
}

.amVideo-title-list-item a:hover {
    color:#e74c3c;
}

.amVideo-date {
    font-size:14px;
    color:#666;
    margin-bottom:8px;
}

.amVideo-date a {
    color:#666;
    text-decoration:none;
}

.amVideo-date a:hover {
    color:#e74c3c;
}

.amVideo-info-c {
    font-size:14px;
    color:#666;
    margin-bottom:12px;
}

.amVideo-list-item-text {
    font-size:14px;
    color:#333;
    margin-bottom:6px;
}

.amVideo-list-item-text a {
    color:#333;
    text-decoration:none;
}

.amVideo-list-item-text a:hover {
    color:#e74c3c;
}

.amVideo-list-item-text-small {
    font-size:12px;
    color:#999;
}

.amVideo-bottom-baseline {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #eee;
}

/* Button classes */
.amVideo-comment-button {
    display:inline-block;
    margin-right:8px;
}

.amVideo-comment-button a {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#666;
    text-decoration:none;
}

.amVideo-comment-button a:hover {
    color:#e74c3c;
}

.amVideo-like-button-box {
    display:inline-block;
    margin-right:8px;
}

.amVideo-like-button-box a {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#666;
    text-decoration:none;
}

.amVideo-like-button-box a:hover {
    color:#e74c3c;
}

.amVideo-like-button-img {
    vertical-align:middle;
}

.amVideo-more-buttons {
    display:inline-block;
    padding:6px 12px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:4px;
    color:#666;
    font-size:13px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amVideo-more-buttons:hover {
    background:#e74c3c;
    color:white;
    border-color:#e74c3c;
}

/* Form classes */
.amVideo-form-button {
    padding:8px 16px;
    background:#e74c3c;
    color:white;
    border:none;
    border-radius:4px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amVideo-form-button:hover {
    background:#c0392b;
}

.amVideo-form-text {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    width:100%;
}

.amVideo-form-text:focus {
    outline:none;
    border-color:#e74c3c;
}

.amVideo-form-text-search {
    padding:8px 40px 8px 16px;
}

.amVideo-form-select {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    background:white;
}

.amVideo-form-select:focus {
    outline:none;
    border-color:#e74c3c;
}

.amVideo-form-checkbox {
    width:18px;
    height:18px;
    cursor:pointer;
}

.amVideo-list-pager {
    padding:6px 10px;
    font-size:13px;
}

/* Subscribe button */
.amVideo-subscribe-btn {
    padding:10px 24px;
    background:#e74c3c;
    color:white;
    border:none;
    border-radius:24px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
}

.amVideo-subscribe-btn:hover {
    background:#c0392b;
}

.amVideo-subscribe-btn.amVideo-subscribed {
    background:#95a5a6;
}

.amVideo-subscribe-btn.amVideo-subscribed:hover {
    background:#7f8c8d;
}

/* Watch row */
.amVideo-watch-row {
    margin-bottom:20px;
}

.amVideo-item {
    display:inline-block;
}

/* Sale card classes (used in on_sale_slider_row.tpl) */
.amVideo-sale-card {
    background:white;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.amVideo-sale-card:hover {
    transform:translateY(-4px);
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.amVideo-sale-body {
    padding:12px;
}

.amVideo-sale-price {
    font-size:18px;
    font-weight:700;
    color:#e74c3c;
    margin:8px 0;
}

.amVideo-sale-cart {
    width:auto;
    height:auto;
    padding:8px 16px;
    font-size:13px;
}

.amVideo-btn-secondary {
    background:#95a5a6;
}

.amVideo-btn-secondary:hover {
    background:#7f8c8d;
}

/* modules/amVideo/css/amVideo_html5_player.css */


.amVideo-html5-player{position:relative;max-width:100%;background:#000;color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.2)}
.amVideo-video{width:100%;height:auto;display:block;background:#000;aspect-ratio:16/9;object-fit:contain}
.amVideo-html5-player{--amVideo-big-size:76px}
.amVideo-controls{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(0,0,0,.62);backdrop-filter:saturate(120%) blur(2px);transition:opacity .2s ease}
.amVideo-controls button:focus,.amVideo-controls select:focus,.amVideo-controls input:focus{outline:2px solid #66afe9;outline-offset:2px}
.amVideo-controls button:focus-visible,.amVideo-controls select:focus-visible,.amVideo-controls input:focus-visible{outline:3px solid #ffdd57}
.amVideo-html5-player:not(.amVideo-controls-visible) .amVideo-controls{opacity:0;pointer-events:none}
.amVideo-html5-player.amVideo-controls-visible .amVideo-controls{opacity:1}
.amVideo-btn{width:35px;height:35px;border:0;background:#222;border-radius:6px;cursor:pointer;box-shadow:none;outline:none}
.amVideo-btn:focus{outline:none}
.amVideo-btn:hover{filter:brightness(1.1)}
.amVideo-btn:active{transform:scale(0.98)}
.amVideo-btn.amVideo-play{background:#222 url("/modules/amVideo/img/hex_white/play-button.png") no-repeat center center/20px}
.amVideo-btn.amVideo-pause{background:#222 url("/modules/amVideo/img/hex_white/pause-button.png") no-repeat center center/20px}
.amVideo-btn.amVideo-mute{background:#222 url("/modules/amVideo/img/hex_white/volume-icon.png") no-repeat center center/20px}
.amVideo-btn.amVideo-mute.is-muted{background:#222 url("/modules/amVideo/img/hex_white/volume-icon-disabled.png") no-repeat center center/20px}
.amVideo-btn.amVideo-fullscreen{background:#222 url("/modules/amVideo/img/hex_white/full-screen.png") no-repeat center center/20px}
.amVideo-time{color:#ddd;font:14px/1.3 sans-serif;display:flex;gap:6px;align-items:center}
.amVideo-progress{position:relative;flex:1;height:6px;background:#333;border-radius:3px;cursor:pointer}
.amVideo-progress .amVideo-heat{border-radius:3px}
.amVideo-progress .amVideo-buffered{position:absolute;left:0;top:0;height:100%;width:0;background:#555;border-radius:3px}
.amVideo-progress .amVideo-played{position:absolute;left:0;top:0;height:100%;width:0;background:#e53935;border-radius:3px}
.amVideo-progress .amVideo-seek-tooltip{position:absolute;bottom:140%;transform:translateX(-50%);background:rgba(0,0,0,.86);color:#fff;padding:3px 8px;border-radius:6px;font:11px/1 sans-serif;pointer-events:none;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:5;opacity:0;visibility:hidden;transition:opacity .15s ease}
.amVideo-progress:hover .amVideo-seek-tooltip{opacity:1;visibility:visible}
.amVideo-progress .amVideo-seek-tooltip[aria-hidden="true"]{opacity:0;visibility:hidden}
.amVideo-progress .amVideo-seek-tooltip[aria-hidden="false"]{opacity:1;visibility:visible}
.amVideo-progress .amVideo-preview{position:absolute;bottom:150%;left:0;transform:translateX(-50%);width:160px;height:90px;background:#000;border:1px solid #444;border-radius:6px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:6}
.amVideo-progress .amVideo-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.amVideo-progress:hover .amVideo-preview{opacity:1;visibility:visible}
.amVideo-progress .amVideo-preview[aria-hidden="true"]{opacity:0;visibility:hidden}
.amVideo-progress .amVideo-preview[aria-hidden="false"]{opacity:1;visibility:visible}
.amVideo-volume{display:flex;align-items:center;gap:8px;margin-left:8px}
.amVideo-volume-range{width:120px;height:8px;vertical-align:middle}

/* Volume range styling */
.amVideo-volume-range{-webkit-appearance:none;background:#444;border-radius:4px;outline:none}
.amVideo-volume-range::-webkit-slider-runnable-track{height:8px;background:#444;border-radius:4px}
.amVideo-volume-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;margin-top:-4px;cursor:pointer}
.amVideo-volume-range::-moz-range-track{height:8px;background:#444;border-radius:4px}
.amVideo-volume-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;cursor:pointer}
.amVideo-volume-range::-ms-track{height:8px;background:transparent;border-color:transparent;color:transparent}
.amVideo-volume-range::-ms-fill-lower{background:#444;border-radius:4px}
.amVideo-volume-range::-ms-fill-upper{background:#444;border-radius:4px}
.amVideo-volume-range::-ms-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;cursor:pointer}
.amVideo-speed{margin-left:6px}
.amVideo-speed-inline{display:flex;align-items:center;gap:6px}
.amVideo-speed-select{background:#000 !important;color:#fff !important;border:1px solid #444 !important;border-radius:6px;height:35px;box-shadow:none;padding:0 28px 0 34px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.amVideo-speed-input{background:#000;color:#fff;border:1px solid #444;border-radius:6px;height:35px;padding:0 6px;box-shadow:none}
.amVideo-speed-select:focus{outline:none !important;box-shadow:0 0 0 2px rgba(255,255,255,.08);border-color:#666 !important}
.amVideo-speed-select option{background:#000 !important;color:#fff !important}
.amVideo-quality{margin-left:6px}
.amVideo-quality-select{background:#222;color:#fff;border:0;border-radius:6px;height:28px}
.amVideo-captions{margin-left:6px}
.amVideo-captions-select{background:#222;color:#fff;border:0;border-radius:6px;height:28px}
.amVideo-select-icon{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#222;border:0;border-radius:6px;height:35px;min-width:35px;width:35px;padding:0;margin:0;cursor:pointer;box-shadow:none}
/* hide visible text in the closed select across browsers */
.amVideo-select-icon{color:transparent;text-shadow:0 0 0 transparent;font-size:0;line-height:0;-webkit-text-fill-color:transparent;text-indent:-9999px;overflow:hidden}
/* Override hidden text for Speed select so its value shows */
.amVideo-speed-select.amVideo-select-icon{color:#fff !important;text-shadow:none !important;font-size:13px !important;line-height:1.2 !important;-webkit-text-fill-color:#fff !important;text-indent:0 !important;overflow:visible !important}
.amVideo-select-icon::-ms-value{color:transparent}
.amVideo-select-icon::-ms-expand{display:none}
/* restore font size in the dropdown list */
.amVideo-select-icon option{font-size:13px;line-height:1.2;color:#111}
.amVideo-select-icon:focus,.amVideo-select-icon:active{color:transparent;outline:0}
.amVideo-speed,.amVideo-quality,.amVideo-captions{position:relative}
.amVideo-speed:before,.amVideo-quality:before,.amVideo-captions:before{content:"";position:absolute;left:9px;top:8px;width:18px;height:18px;background-repeat:no-repeat;background-size:18px 18px;z-index:2;pointer-events:none}
/* Replace speed text with playback rate png */
.amVideo-speed:before{background:url("/modules/amVideo/img/hex_white/playback-rate-normal.png") no-repeat}
.amVideo-quality:before{background:url("/modules/amVideo/img/hex_white/combobox-arrow-normal.png") no-repeat}    
.amVideo-captions:before{background:url("/modules/amVideo/img/hex_white/info-button.png") no-repeat}

/* Theater mode */
.amVideo-html5-player.amVideo-theater{max-width:none;width:100%}
.amVideo-html5-player.amVideo-theater .amVideo-video{width:100%}

/* Expand to full viewport width even inside constrained columns */
.amVideo-theater-mode .amVideo-html5-player.amVideo-theater{
  position:relative;
  z-index:3;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  border-radius:0;
  box-sizing:border-box;
}
/* Maintain aspect ratio by letting the video scale; cap height for usability */
.amVideo-theater-mode .amVideo-html5-player.amVideo-theater .amVideo-video{
  width:100% !important;
  height:85vh !important;
  max-height:85vh !important;
  object-fit:cover;
  background:#000;
  display:block;
}
/* Keep playlist panel usable in theater */
.amVideo-theater-mode .amVideo-html5-player.amVideo-theater .amVideo-side{height:100%}
.amVideo-html5-player .amVideo-btn.amVideo-theater{background:#222 url("/modules/amVideo/img/hex_white/full-screen.png") no-repeat center center/20px}
.amVideo-html5-player .amVideo-btn.amVideo-pip{background:#222 url("/modules/amVideo/img/hex_white/popup-button.png") no-repeat center center/20px}
.amVideo-fullscreen{margin-left:auto}
.amVideo-big-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--amVideo-big-size);height:var(--amVideo-big-size);border:0;border-radius:50%;background:rgba(0,0,0,0.4) url("/modules/amVideo/img/hex_white/large-play.png") no-repeat center center/42px;opacity:0;transition:opacity .15s ease;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:4}
.amVideo-html5-player:hover .amVideo-big-toggle{opacity:1}
/* Ensure visible when paused (no hover needed) */
.amVideo-html5-player:not(.is-playing) .amVideo-big-toggle{opacity:1}
.amVideo-html5-player.is-playing .amVideo-big-toggle{background-image:url("/modules/amVideo/img/hex_white/pause-button.png")}
.amVideo-big-toggle:focus{outline:2px solid #66afe9;outline-offset:2px}

/* Logo overlay */
.amVideo-logo{position:absolute;width:120px;height:40px;background:url("/modules/amVideo/img/logo.png") no-repeat center center/contain,linear-gradient(transparent,transparent);opacity:.5;pointer-events:none;z-index:4}
.amVideo-logo-top_left{top:10px;left:10px}
.amVideo-logo-top_right{top:10px;right:10px}
.amVideo-logo-bottom_left{bottom:10px;left:10px}
.amVideo-logo-bottom_right{bottom:10px;right:10px}
.amVideo-btn.amVideo-settings{background:#222 url("/modules/amVideo/img/hex_white/cog.png") no-repeat center center/20px}
.amVideo-btn.amVideo-transcript{background:#222 url("/modules/amVideo/img/hex_white/playback-rate-normal.png") no-repeat center center/20px}
/* Share button */
.amVideo-btn.amVideo-share{background:#222 url("/modules/amVideo/img/hex_white/share.png") no-repeat center center/20px}

/* Playlist side panel */
.amVideo-btn.amVideo-playlist{background:#222 url("/modules/amVideo/img/hex_white/playlist-button.png") no-repeat center center/20px}

/* Tooltips above icons/selects */
.amVideo-btn[data-tooltip],.amVideo-select-icon[data-tooltip] { position:relative }
.amVideo-btn[data-tooltip]::after,.amVideo-select-icon[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,-8px);
  background:#000;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font:12px/1 sans-serif;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amVideo-btn[data-tooltip]::before,.amVideo-select-icon[data-tooltip]::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,2px);
  border:6px solid transparent;
  border-top-color:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amVideo-btn[data-tooltip]:hover::after,.amVideo-btn[data-tooltip]:hover::before,
.amVideo-select-icon[data-tooltip]:hover::after,.amVideo-select-icon[data-tooltip]:hover::before {
  opacity:1;
  visibility:visible;
}

/* Wrapper-based tooltip support (for selects on some browsers) */
.amVideo-has-tooltip{position:relative}
.amVideo-has-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,-8px);
  background:#000;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font:12px/1 sans-serif;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amVideo-has-tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,2px);
  border:6px solid transparent;
  border-top-color:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amVideo-has-tooltip:hover::after,.amVideo-has-tooltip:hover::before{opacity:1;visibility:visible}

/* Stronger specificity to keep text white on selects */
.amVideo-html5-player .amVideo-speed .amVideo-speed-select,
.amVideo-html5-player .amVideo-quality .amVideo-quality-select,
.amVideo-html5-player .amVideo-captions .amVideo-captions-select{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:#000 !important;
  border-color:#444 !important;
}
.amVideo-side{position:absolute;right:0;top:0;width:33%;height:100%;background:rgba(10,10,10,.96);border-left:1px solid #333;transform:translateX(100%);transition:transform .2s ease;z-index:1;display:flex;flex-direction:column;pointer-events:none}
.amVideo-html5-player.amVideo-side-open .amVideo-side{transform:translateX(0);z-index:3;pointer-events:auto}
.amVideo-side-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amVideo-side-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amVideo-side-content{flex:1;overflow:auto}

/* Settings panel */
.amVideo-settings-panel{position:absolute;right:10px;bottom:60px;width:260px;max-width:80vw;background:rgba(0,0,0,.96);border:1px solid #333;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.45);color:#fff;z-index:4;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}
.amVideo-settings-panel[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0)}
.amVideo-settings-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amVideo-settings-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amVideo-settings-content{padding:10px}
.amVideo-setting-row{display:flex;align-items:center;gap:8px;font:13px/1.2 sans-serif;margin:6px 0}
.amVideo-settings-reset{margin-top:8px}

/* Settings panel:improve layout for last two controls row */
.amVideo-captions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.amVideo-captions-row > span{min-width:100px;opacity:.9}
.amVideo-captions-row select{height:32px;border:1px solid #444;border-radius:6px;background:#000;color:#fff;padding:2px 8px}
.amVideo-captions-row input[type="color"]{width:32px;height:32px;border:1px solid #333;border-radius:4px;background:#000;padding:0}
.amVideo-transcript-panel .amVideo-transcript-download{margin-left:auto}

/* Settings panel theming to avoid white boxes */
.amVideo-settings-panel select,
.amVideo-settings-panel input[type="text"],
.amVideo-settings-panel .form_text{
  background:#111;
  color:#fff;
  border:1px solid #333;
  border-radius:6px;
  box-shadow:none;
}
.amVideo-settings-panel select:focus,
.amVideo-settings-panel input[type="text"]:focus,
.amVideo-settings-panel .form_text:focus{
  outline:2px solid rgba(102,175,233,.6);
  outline-offset:2px;
  border-color:#555;
}
.amVideo-settings-panel input[type="color"]{
  background:#111;
  border:1px solid #333;
  border-radius:4px;
}
.amVideo-settings-panel .amVideo-settings-reset,
.amVideo-settings-panel .form_button{
  background:#222;
  color:#fff;
  border:1px solid #333;
  border-radius:6px;
}
.amVideo-settings-panel .amVideo-settings-reset:hover,
.amVideo-settings-panel .form_button:hover{ background:#2a2a2a }
.amVideo-settings-panel .amVideo-settings-reset:focus,
.amVideo-settings-panel .form_button:focus{ outline:2px solid rgba(102,175,233,.6); outline-offset:2px }

/* Transcript panel */
.amVideo-transcript-panel{position:absolute;left:10px;right:10px;bottom:60px;max-height:50vh;background:rgba(0,0,0,.96);border:1px solid #333;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.45);color:#fff;z-index:4;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}
.amVideo-transcript-panel[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0)}
.amVideo-transcript-header{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amVideo-transcript-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amVideo-transcript-content{padding:10px;max-height:38vh;overflow:auto;font:13px/1.4 sans-serif}
.amVideo-transcript-line{padding:4px 0;border-bottom:1px solid #222}
.amVideo-transcript-line .amVideo-ts{opacity:.7;margin-right:8px}

/* Playlist items */
.amVideo-pl{display:block}
.amVideo-pl-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #2a2a2a;color:#fff;text-decoration:none}
.amVideo-pl-item:hover{background:#111}
.amVideo-pl-item.is-current{background:#0f172a}
.amVideo-pl-thumb{width:100px;height:56px;flex:0 0 100px;border-radius:6px;overflow:hidden;background:#222;display:block}
.amVideo-pl-img{width:100%;height:100%;object-fit:cover;display:block}
.amVideo-pl-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#333,#222)}
.amVideo-pl-meta{display:flex;flex-direction:column;min-width:0}
.amVideo-pl-title{font:13px/1.3 sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amVideo-pl-sub{font:11px/1.2 sans-serif;color:#bbb;display:flex;gap:6px;align-items:center}
.amVideo-pl-dot{opacity:.75}
.amVideo-pl-empty{padding:12px;color:#bbb;font:12px/1.2 sans-serif}

/* Gestures/Overlays */
.amVideo-brightness{transition:opacity .12s linear}
.amVideo-speed-menu button{min-width:48px}


/* Accessibility:Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .amVideo-html5-player * { transition:none !important; animation:none !important; }
  .amVideo-html5-player .amVideo-controls { backdrop-filter:none; }
}

/* High Contrast support */
@media (prefers-contrast:more) {
  .amVideo-html5-player { border:2px solid #fff; }
  .amVideo-controls { background:#000; }
  .amVideo-progress { background:#111; }
  .amVideo-progress .amVideo-buffered { background:#444; }
  .amVideo-progress .amVideo-played { background:#ffcc00; }
}

@media (forced-colors:active) {
  .amVideo-html5-player,.amVideo-controls,.amVideo-btn,.amVideo-progress { forced-color-adjust:none; }
  .amVideo-progress { background:CanvasText; }
  .amVideo-progress .amVideo-played { background:Highlight; }
}



/* modules/amVideo/css/amVideo_player_enhanced.css */


/* amVideo Enhanced Player Styles */
/* Moved from inline CSS in player_enhanced.tpl */

.amVideo-player-container {
    position:relative;
    width:100%;
    background:#000;
    border-radius:8px;
    overflow:hidden;
}

.amVideo-player {
    width:100%;
    height:auto;
    display:block;
}

.amVideo-player-overlay {
    position:absolute;
    bottom:60px;
    right:10px;
    display:flex;
    gap:10px;
    z-index:10;
}

.amVideo-player-quality-selector,
.amVideo-player-speed-selector {
    position:relative;
}

.amVideo-quality-btn,
.amVideo-speed-btn,
.amVideo-pip-btn,
.amVideo-theatre-btn {
    background:rgba(0,0,0,0.7);
    border:none;
    color:white;
    padding:8px 12px;
    border-radius:4px;
    cursor:pointer;
    font-size:14px;
    transition:background 0.2s ease;
}

.amVideo-quality-btn:hover,
.amVideo-speed-btn:hover,
.amVideo-pip-btn:hover,
.amVideo-theatre-btn:hover {
    background:rgba(0,0,0,0.9);
}

.amVideo-quality-menu,
.amVideo-speed-menu {
    position:absolute;
    bottom:100%;
    right:0;
    background:rgba(0,0,0,0.95);
    border-radius:4px;
    min-width:120px;
    margin-bottom:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.amVideo-quality-option,
.amVideo-speed-option {
    padding:10px 16px;
    color:white;
    cursor:pointer;
    transition:background 0.2s ease;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.amVideo-quality-option:last-child,
.amVideo-speed-option:last-child {
    border-bottom:none;
}

.amVideo-quality-option:hover,
.amVideo-speed-option:hover {
    background:rgba(255,255,255,0.1);
}

.amVideo-speed-option.active {
    background:rgba(231,76,60,0.3);
}

.amVideo-player-container.theatre-mode {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000;
    border-radius:0;
}

.amVideo-player-container.theatre-mode .amVideo-player {
    height:100vh;
    object-fit:contain;
}

/* modules/amVideo/css/amVideo_index.css */


/*
amVideo Index Page Styles
Contains view toggle button styles and responsive layout fixes
*/

/* View toggle button styles */
.view-toggle-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:#fff;
    border:2px solid #ddd;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s ease;
    font-size:14px;
    font-weight:500;
    color:#666;
}

.view-toggle-btn:hover {
    border-color:#e74c3c;
    background:#fff5f5;
    color:#e74c3c;
}

.view-toggle-btn.active {
    background:#e74c3c;
    border-color:#e74c3c;
    color:white;
}

.view-toggle-btn svg {
    flex-shrink:0;
}

/* Responsive layout fixes */
@media (max-width:768px) {
    .video-filters-controls > div {
        flex-direction:column;
        align-items:stretch !important;
    }

    .view-toggle-container {
        width:100%;
        justify-content:center;
    }

    .view-toggle-btn {
        flex:1;
    }
}

/* modules/amVideo/css/page_navigation.css */


/**
 * amVideo Page Navigation CSS - amBattle Style
 * Author:The Arcitech 2026
 * Matches amBattle tab-style navigation
 */

/* Page Navigation Container */
.amVideo-page-navigation {
    margin:0 0 1.25rem 0;
}

.amVideo-page-navigation .ambattles-tabs {
    display:flex;
    gap:0.35rem;
    align-items:center;
    padding:0.35rem;
    background:var(--ambattles-bg-secondary,#f5f5f5);
    border:1px solid var(--ambattles-border,#ddd);
    border-radius:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.amVideo-page-navigation .ambattles-tabs::-webkit-scrollbar {
    display:none;
}

/* Tab Links */
.amVideo-page-navigation .ambattles-tab {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 0.9rem;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--ambattles-text-secondary,#666);
    text-decoration:none;
    white-space:nowrap;
    font-weight:600;
    font-size:0.9rem;
    transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}

.amVideo-page-navigation .ambattles-tab:hover {
    background:var(--ambattles-bg-tertiary,#e8e8e8);
    color:var(--ambattles-text-primary,#333);
}

.amVideo-page-navigation .ambattles-tab:active {
    transform:translateY(0);
}

.amVideo-page-navigation .ambattles-tab:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(220,53,69,0.20);
}

.amVideo-page-navigation .ambattles-tab.active,
.amVideo-page-navigation .ambattles-tab[aria-current="page"] {
    background:var(--ambattles-primary,#dc3545);
    color:var(--ambattles-text-inverse,#ffffff);
    border-color:var(--ambattles-primary,#dc3545);
    box-shadow:0 6px 16px rgba(220,53,69,0.18);
}

.amVideo-page-navigation .ambattles-tab.active:hover,
.amVideo-page-navigation .ambattles-tab[aria-current="page"]:hover {
    background:var(--ambattles-primary-dark,#c82333);
    border-color:var(--ambattles-primary-dark,#c82333);
}

/* Tab Icons */
.amVideo-page-navigation .ambattles-tab-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.9;
}

.amVideo-page-navigation .ambattles-tab-icon svg {
    width:16px;
    height:16px;
}

.amVideo-page-navigation .ambattles-tab.active .ambattles-tab-icon,
.amVideo-page-navigation .ambattles-tab[aria-current="page"] .ambattles-tab-icon {
    opacity:1;
}

/* Responsive */
@media (max-width:768px) {
    .amVideo-page-navigation .ambattles-tab {
        padding:0.55rem 0.8rem;
        font-size:0.85rem;
    }
}

/* Utility Classes */
.ambattles-mb-6 {
    margin-bottom:1.5rem;
}

.ambattles-scroll-x {
    overflow-x:auto;
}

.ambattles-scroll-snap {
    scroll-snap-type:x mandatory;
}

.ambattles-border-bottom {
    border-bottom:1px solid var(--ambattles-border,#ddd);
}

.ambattles-border-light {
    border-color:var(--ambattles-border,#ddd);
}


/* modules/amVideo/css/filters_ambattle_style.css */


/**
 * amVideo Filters CSS - amBattle Style
 * Author:The Arcitech 2026
 * Matches amBattle filter pill styling exactly
 */

/* Filter Controls Container */
.amVideo-filters-controls,
.battle-filters-controls {
    width:100%;
    margin-bottom:20px;
}

.amVideo-filters-controls > div,
.battle-filters-controls > div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.amVideo-flex-between {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.amVideo-flex-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    flex:1 1 auto;
    min-width:300px;
}

/* Filter Pills - Trigger Buttons - Match amBattles exactly */
.amVideo-sort-pill-trigger,
.amVideo-filter-pill-trigger,
.battles_sort_pill_trigger,
.battles_filter_pill_trigger,
.amb-filter-btn,
.amb-sort-pill-trigger,
.amb-filter-pill-trigger,
.sort_pill_trigger,
.filter_pill_trigger,
.sort-pill-trigger,
.filter-pill-trigger {
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.2s ease;
    user-select:none;
    margin-right:8px;
}

.amVideo-sort-pill-trigger:hover,
.amVideo-filter-pill-trigger:hover,
.battles_sort_pill_trigger:hover,
.battles_filter_pill_trigger:hover,
.amb-filter-btn:hover,
.amb-sort-pill-trigger:hover,
.amb-filter-pill-trigger:hover,
.sort_pill_trigger:hover,
.filter_pill_trigger:hover,
.sort-pill-trigger:hover,
.filter-pill-trigger:hover {
    background:#e8e8e8;
    border-color:#ccc;
    transform:translateY(-1px);
}

.amVideo-sort-pill-trigger.active,
.amVideo-filter-pill-trigger.active,
.battles_sort_pill_trigger.active,
.battles_filter_pill_trigger.active,
.amb-filter-btn.active,
.amb-sort-pill-trigger.active,
.amb-filter-pill-trigger.active,
.sort_pill_trigger.active,
.filter_pill_trigger.active,
.sort-pill-trigger.active,
.filter-pill-trigger.active {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
}

/* Filter Options Containers - Match amBattles exactly */
#amVideo-sort-options-container,
#amVideo-category-options-container,
#amVideo-quality-options-container,
#amVideo-duration-options-container,
.amVideo-hidden-options,
.amVideo-filter-options-container,
#battles_sort_options_container,
#sort_options_container,
#status_options_container,
#battle_type_options_container,
#media_type_options_container,
#skill_level_options_container,
#genre_options_container,
.battles_filter_options_container,
.battle-filter-dropdown,
.filter_options_container {
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:15px;
    margin-top:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    display:none;
}

.battle-filter-dropdown.amb-display-none,
.filter_options_container.amb-display-none,
.amVideo-filter-options-container.amb-display-none {
    display:none !important;
}

/* Individual Filter Option Pills - Match amBattles exactly */
.amVideo-sort-option-pill,
.amVideo-filter-option-pill,
.sort_option_pill,
.filter_option_pill,
.sort-option-pill,
.filter-option-pill {
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:16px;
    cursor:pointer;
    font-size:13px;
    margin-right:8px;
    margin-bottom:8px;
    transition:all 0.2s ease;
    user-select:none;
}

/* Link wrapper for pills */
a .amVideo-sort-option-pill,
a .amVideo-filter-option-pill,
a .sort_option_pill,
a .filter_option_pill,
a .sort-option-pill,
a .filter-option-pill {
    text-decoration:none;
    color:#333;
}

.amVideo-sort-option-pill:hover,
.amVideo-filter-option-pill:hover,
.sort_option_pill:hover,
.filter_option_pill:hover,
.sort-option-pill:hover,
.filter-option-pill:hover,
a:hover .amVideo-sort-option-pill,
a:hover .amVideo-filter-option-pill,
a:hover .sort_option_pill,
a:hover .filter_option_pill,
a:hover .sort-option-pill,
a:hover .filter-option-pill {
    background:#f0f0f0;
    border-color:#999;
    transform:translateY(-1px);
}

.amVideo-sort-option-pill.active,
.amVideo-filter-option-pill.active,
.sort_option_pill.active,
.filter_option_pill.active,
.sort-option-pill.active,
.filter-option-pill.active,
.amVideo-sort-option-disabled {
    background:var(--ambattles-selected-bg,#1a1a1a);
    color:var(--ambattles-selected-text,#ffffff);
    border-color:var(--ambattles-selected-border,#1a1a1a);
    cursor:default;
}

/* Pill groups - Match amBattles */
.pill-group {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pill-group a {
    text-decoration:none;
}

/* View Toggle Buttons - Match amBattles exactly */
.amVideo-view-toggle-container,
.view-toggle-container {
    display:flex;
    gap:5px;
    flex:0 0 auto;
}

.view-toggle-btn,
.battles-view-toggle-btn,
.amb-view-toggle-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:all 0.2s ease;
    color:#333;
}

.view-toggle-btn:hover,
.battles-view-toggle-btn:hover,
.amb-view-toggle-btn:hover {
    background:#f5f5f5;
    border-color:#999;
}

.view-toggle-btn.active,
.battles-view-toggle-btn.active,
.amb-view-toggle-btn.active {
    background:#1a1a1a;
    color:#ffffff;
    border-color:#1a1a1a;
}

.view-toggle-btn svg,
.battles-view-toggle-btn svg,
.amb-view-toggle-btn svg {
    width:16px;
    height:16px;
}

.view-toggle-btn span,
.battles-view-toggle-btn span,
.amb-view-toggle-btn span {
    font-size:13px;
}

/* Search Container - Match amBattles */
.amVideo-search-wrapper,
.advanced-search-wrapper {
    flex:0 1 auto;
    min-width:280px;
    max-width:400px;
}

.amVideo-search-container,
.search-toggle-container {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

.amVideo-reset-link {
    text-decoration:none;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Quick search form - Match amBattles */
.quick-search-form {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    flex:1 1 240px;
    min-width:200px;
}

.quick-search-form input[type="text"],
.quick-search-form input[type="search"] {
    width:100%;
    min-width:160px;
    height:36px;
    padding:8px 12px;
    border:1px solid var(--ambattles-border,#ddd);
    border-radius:6px;
    background:var(--ambattles-bg-primary,#fff);
    color:var(--ambattles-text-primary,#212529);
    font-size:14px;
    line-height:20px;
}

.quick-search-form input[type="text"]:focus,
.quick-search-form input[type="search"]:focus {
    outline:none;
    border-color:var(--ambattles-primary,#dc3545);
    box-shadow:0 0 0 2px rgba(220,53,69,0.15);
}

/* Advanced search toggle button - Match amBattles */
.advanced-search-toggle.amb-filter-btn {
    height:36px;
    padding:8px 16px;
    border-radius:20px;
    border:1px solid var(--ambattles-border,#ddd);
    background:var(--ambattles-bg-secondary,#f8f9fa);
    color:var(--ambattles-text-primary,#212529);
    white-space:nowrap;
    flex-shrink:0;
}

.advanced-search-toggle.amb-filter-btn:hover {
    background:var(--ambattles-bg-tertiary,#e9ecef);
    border-color:var(--ambattles-border-dark,#adb5bd);
}

.advanced-search-toggle svg {
    vertical-align:middle;
    margin-right:4px;
}

/* Active Filters Display - Match amBattles */
.amVideo-active-filters,
#battles_active_filters_display,
.active-filters-row,
.active-filters-display {
    background:#f8f9fa;
    border-radius:5px;
    padding:10px 15px;
    margin:15px 0;
}

.amVideo-active-filters-content,
#battles_active_filters_tags {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.amVideo-active-filters-label {
    font-weight:500;
    color:#666;
}

.amVideo-filter-tag,
.active-filter-tag,
.selected-filter-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#007bff;
    color:white;
    padding:5px 12px;
    border-radius:16px;
    font-size:13px;
    text-decoration:none;
    transition:all 0.2s ease;
}

.amVideo-filter-tag:hover,
.active-filter-tag:hover,
.selected-filter-pill:hover {
    background:#0056b3;
    transform:translateY(-1px);
}

.amVideo-filter-tag-remove {
    color:white;
    text-decoration:none;
    font-weight:bold;
    margin-left:4px;
}

.amVideo-filter-tag-remove:hover {
    color:#ffcccc;
}

/* Responsive Adjustments - Match amBattles */
@media (max-width:1024px) {
    .amVideo-filters-controls > div,
    .battle-filters-controls > div {
        align-items:flex-start;
    }
}

@media (max-width:768px) {
    .amVideo-filters-controls > div,
    .battle-filters-controls > div {
        flex-direction:column;
        align-items:stretch;
    }
    
    .amVideo-search-wrapper,
    .advanced-search-wrapper {
        min-width:100%;
        max-width:100%;
        flex:1 1 100%;
    }
    
    .amVideo-view-toggle-container,
    .view-toggle-container {
        width:100%;
        justify-content:center;
    }
    
    .view-toggle-btn span,
    .battles-view-toggle-btn span {
        display:inline;
    }
}

@media (max-width:480px) {
    .amVideo-sort-pill-trigger,
    .amVideo-filter-pill-trigger,
    .battles_sort_pill_trigger,
    .battles_filter_pill_trigger,
    .amb-filter-btn {
        font-size:12px;
        padding:6px 12px;
    }
    
    .amVideo-sort-option-pill,
    .amVideo-filter-option-pill,
    .sort_option_pill,
    .filter_option_pill {
        font-size:12px;
        padding:5px 12px;
    }
    
    .view-toggle-btn,
    .battles-view-toggle-btn {
        padding:6px 10px;
        font-size:12px;
    }
}


/* modules/amVideo/css/pagination_ambattle_style.css */


/**
 * amVideo Pagination CSS - amBattle Style
 * Author:The Arcitech 2026
 * Matches amBattle pagination styling
 */

/* Pagination Container */
.amVideo-list-pager,
.jrCore_list_pager {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:30px 0;
    padding:15px 0;
}

/* Pagination Links */
.amVideo-list-pager a,
.jrCore_list_pager a,
.amVideo-list-pager span,
.jrCore_list_pager span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:8px 12px;
    background:#ffffff;
    border:1px solid #ddd;
    border-radius:8px;
    color:#333;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:all 0.2s ease;
}

.amVideo-list-pager a:hover,
.jrCore_list_pager a:hover {
    background:#f5f5f5;
    border-color:#999;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Active/Current Page */
.amVideo-list-pager span.current,
.jrCore_list_pager span.current,
.amVideo-list-pager a.active,
.jrCore_list_pager a.active {
    background:var(--ambattles-primary,#dc3545);
    color:#ffffff;
    border-color:var(--ambattles-primary,#dc3545);
    box-shadow:0 2px 8px rgba(220,53,69,0.2);
    cursor:default;
}

/* Disabled/Inactive */
.amVideo-list-pager span.disabled,
.jrCore_list_pager span.disabled {
    background:#f5f5f5;
    color:#999;
    border-color:#e0e0e0;
    cursor:not-allowed;
    opacity:0.6;
}

/* Previous/Next Buttons */
.amVideo-list-pager .pager-prev,
.amVideo-list-pager .pager-next,
.jrCore_list_pager .pager-prev,
.jrCore_list_pager .pager-next {
    font-weight:600;
}

/* Page Numbers */
.amVideo-list-pager .pager-page,
.jrCore_list_pager .pager-page {
    min-width:40px;
}

/* Responsive */
@media (max-width:768px) {
    .amVideo-list-pager,
    .jrCore_list_pager {
        flex-wrap:wrap;
        gap:6px;
    }
    
    .amVideo-list-pager a,
    .jrCore_list_pager a,
    .amVideo-list-pager span,
    .jrCore_list_pager span {
        min-width:36px;
        height:36px;
        padding:6px 10px;
        font-size:13px;
    }
}

@media (max-width:480px) {
    .amVideo-list-pager a,
    .jrCore_list_pager a,
    .amVideo-list-pager span,
    .jrCore_list_pager span {
        min-width:32px;
        height:32px;
        padding:4px 8px;
        font-size:12px;
    }
    
    /* Hide page numbers on very small screens,show only prev/next */
    .amVideo-list-pager .pager-page:not(.current),
    .jrCore_list_pager .pager-page:not(.current) {
        display:none;
    }
}


/* modules/amVideo/css/channels.css */


/**
 * amVideo Channels Styles
 * 
 * @copyright 2026 The Jamroom Network / The Arcitech
 */

/* Channel Page Layout */
.channel-page {
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
}

/* Channel Banner */
.channel-banner {
    width:100%;
    height:200px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:20px;
}

.channel-banner img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.default-banner {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

/* Channel Header */
.channel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    border-bottom:1px solid #e0e0e0;
    margin-bottom:20px;
}

.channel-info h1.channel-name {
    font-size:28px;
    font-weight:700;
    margin:0 0 10px 0;
    color:#1a1a1a;
}

.channel-stats {
    display:flex;
    gap:20px;
    color:#666;
    font-size:14px;
}

.channel-stats .stat {
    display:inline-block;
}

/* Subscribe Button */
.subscribe-btn {
    padding:10px 24px;
    font-weight:600;
    border-radius:24px;
    transition:all 0.3s ease;
}

.subscribe-btn:not(.subscribed) {
    background:#ff0000;
    color:white;
    border:none;
}

.subscribe-btn:not(.subscribed):hover {
    background:#cc0000;
}

.subscribe-btn.subscribed {
    background:#e0e0e0;
    color:#606060;
    border:none;
}

.subscribe-btn.subscribed:hover {
    background:#d0d0d0;
}

/* Channel Navigation */
.channel-nav {
    margin-bottom:30px;
}

.nav-tabs {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    gap:20px;
    border-bottom:1px solid #e0e0e0;
}

.nav-tabs li {
    margin:0;
}

.nav-tabs li a {
    display:block;
    padding:12px 20px;
    color:#606060;
    text-decoration:none;
    border-bottom:3px solid transparent;
    transition:all 0.3s ease;
}

.nav-tabs li.active a {
    color:#1a1a1a;
    border-bottom-color:#ff0000;
    font-weight:600;
}

.nav-tabs li a:hover {
    color:#1a1a1a;
}

/* Video Grid */
.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    margin-bottom:30px;
}

.video-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.video-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.video-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.video-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.video-thumbnail .duration {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.8);
    color:white;
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}

.video-info {
    padding:12px;
}

.video-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.video-meta {
    display:flex;
    gap:8px;
    font-size:12px;
    color:#666;
}

/* Channel About */
.channel-about {
    max-width:800px;
    padding:20px;
}

.channel-about h2 {
    font-size:24px;
    margin-bottom:20px;
}

.channel-about .description {
    line-height:1.6;
    margin-bottom:30px;
    color:#333;
}

.channel-details {
    background:#f9f9f9;
    padding:20px;
    border-radius:8px;
}

.detail-item {
    padding:8px 0;
    border-bottom:1px solid #e0e0e0;
}

.detail-item:last-child {
    border-bottom:none;
}

/* No Content State */
.no-content {
    text-align:center;
    padding:60px 20px;
    color:#666;
}

/* Responsive */
@media (max-width:768px) {
    .channel-header {
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
    
    .video-grid {
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
        gap:16px;
    }
    
    .nav-tabs {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}


/* modules/amVideo/css/amVideo_sidebar_channel.css */


.sidebar-channel {
    display:block;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    color:inherit;
    transition:background 0.2s ease;
    margin-bottom:10px;
    border:1px solid #e0e0e0;
}

.sidebar-channel:hover {
    background:#f5f5f5;
    border-color:#ff0000;
}

.sidebar-channel-banner {
    position:relative;
    width:100%;
    height:60px;
    background:#f0f0f0;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:10px;
}

.sidebar-channel-banner img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.no-banner {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white;
    font-size:28px;
}

.sidebar-channel-info h5 {
    margin:0 0 4px 0;
    font-size:15px;
    font-weight:600;
    color:#333;
}

.channel-stats {
    margin:0;
    font-size:13px;
    color:#666;
}


/* modules/amVideo/css/amVideo_channel_subscriptions.css */


.channels-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
    margin-top:30px;
}

.channel-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:transform 0.2s ease;
}

.channel-card:hover {
    transform:translateY(-4px);
}

.channel-banner-small {
    height:100px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

.channel-card-info {
    padding:15px;
}

.channel-card-info h3 {
    margin:0 0 8px 0;
    font-size:16px;
}

.channel-stats {
    font-size:13px;
    color:#666;
    margin:0;
}

.amVideo-channel-subscribe-icon {
    font-size:64px;
    color:#ccc;
}

/* modules/amVideo/css/reels.css */


/**
 * amVideo Reels Styles
 * 
 * Vertical video player optimized for mobile
 * 
 * @copyright 2026 The Jamroom Network / The Arcitech
 */

/* Body */
.reels-body {
    margin:0;
    padding:0;
    overflow:hidden;
    background:#000;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.amVideo-hidden {
    display:none;
}

/* Container */
.reels-container {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#000;
}

/* Reel Item */
.reel-item {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.reel-video {
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Reel Info Overlay */
.reel-info {
    position:absolute;
    bottom:80px;
    left:20px;
    right:80px;
    color:white;
    z-index:10;
}

.creator-info {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.creator-avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid white;
    background:#666;
}

.creator-name {
    color:white;
    font-weight:600;
    text-decoration:none;
    font-size:15px;
}

.follow-btn {
    background:#ff0000;
    border:none;
    color:white;
    padding:6px 16px;
    border-radius:4px;
    font-weight:600;
    cursor:pointer;
    font-size:13px;
    margin-left:8px;
}

.video-description {
    max-height:80px;
    overflow-y:auto;
}

.video-description p {
    margin:0;
    line-height:1.4;
    font-size:14px;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

/* Social Actions Sidebar */
.reel-actions {
    position:absolute;
    right:12px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    gap:20px;
    z-index:10;
}

.action-btn {
    background:rgba(0,0,0,0.4);
    border:none;
    color:white;
    padding:0;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    transition:transform 0.2s ease;
    backdrop-filter:blur(10px);
    border-radius:50%;
    width:48px;
    height:48px;
    justify-content:center;
}

.action-btn:active {
    transform:scale(0.9);
}

.action-btn i {
    font-size:24px;
}

.action-btn.liked i,
.action-btn.saved i {
    color:#ff0000;
}

.action-count {
    font-size:11px;
    font-weight:600;
}

/* Swipe Hints */
.swipe-hint {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:white;
    text-align:center;
    opacity:0.8;
    transition:opacity 0.5s ease;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.swipe-hint-up {
    top:20px;
}

.swipe-hint-down {
    bottom:20px;
}

.swipe-hint i {
    font-size:24px;
    animation:bounce 2s infinite;
}

.swipe-hint span {
    font-size:12px;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

@keyframes bounce {
    0%,100% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-10px);
    }
}

/* Comments Modal */
.comments-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000;
}

.modal-backdrop {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
}

.modal-content {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:white;
    border-radius:16px 16px 0 0;
    max-height:70vh;
    display:flex;
    flex-direction:column;
}

.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px solid #e0e0e0;
}

.modal-header h3 {
    margin:0;
    font-size:18px;
}

.modal-header button {
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:#666;
}

.comments-list {
    flex:1;
    overflow-y:auto;
    padding:20px;
}

.comment-item {
    padding:12px 0;
    border-bottom:1px solid #f0f0f0;
}

.comment-item strong {
    display:block;
    margin-bottom:4px;
}

.comment-item p {
    margin:0;
    color:#333;
    line-height:1.4;
}

.comment-date {
    font-size:11px;
    color:#999;
}

.comment-input {
    display:flex;
    gap:10px;
    padding:16px 20px;
    border-top:1px solid #e0e0e0;
}

.comment-input input {
    flex:1;
    padding:10px 15px;
    border:1px solid #e0e0e0;
    border-radius:24px;
    font-size:14px;
}

.comment-input button {
    background:#ff0000;
    border:none;
    color:white;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Desktop Adjustments */
@media (min-width:769px) {
    .reels-container {
        max-width:500px;
        margin:0 auto;
    }
    
    .reel-video {
        max-height:100vh;
        width:auto;
    }
}

/* Mobile Optimizations */
@media (max-width:768px) {
    .reel-video {
        width:100%;
        height:100%;
    }
}


/* modules/amVideo/css/amVideo_reels_feed.css */


/*
amVideo Reels Feed CSS
Contains feed layout and control styles
*/

.amVideo-reels-feed-container {
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

.amVideo-reels-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.amVideo-reels-header h1 {
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#333;
}

.amVideo-reels-header h1 i {
    margin-right:10px;
    color:#e74c3c;
}

.amVideo-feed-controls {
    display:flex;
    gap:10px;
}

/* Feed Button Styles */
.amVideo-feed-btn {
    padding:10px 20px;
    border:2px solid #e0e0e0;
    background:white;
    border-radius:24px;
    cursor:pointer;
    transition:all 0.2s ease;
    font-size:14px;
    font-weight:500;
    color:#666;
}

.amVideo-feed-btn:hover {
    border-color:#e74c3c;
    background:#fff5f5;
    color:#e74c3c;
}

.amVideo-feed-btn.amVideo-active {
    background:#ff0000;
    color:white;
    border-color:#ff0000;
}

.amVideo-reels-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
}

.amVideo-reel-card {
    text-decoration:none;
    color:inherit;
    display:block;
}

.amVideo-reel-thumbnail {
    position:relative;
    padding-top:177.78%;
    background:#f0f0f0;
    border-radius:12px;
    overflow:hidden;
}

.amVideo-reel-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.amVideo-reel-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:48px;
    color:white;
    opacity:0;
    transition:opacity 0.2s ease;
    z-index:2;
}

.amVideo-reel-card:hover .amVideo-reel-overlay {
    opacity:0.9;
}

.amVideo-reel-stats {
    position:absolute;
    bottom:8px;
    left:8px;
    color:white;
    font-size:12px;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
    z-index:2;
}

.amVideo-reel-info {
    padding:8px 0;
}

.amVideo-reel-info h4 {
    margin:0;
    font-size:14px;
    font-weight:600;
    color:#333;
    line-height:1.4;
}

.amVideo-no-reels {
    text-align:center;
    padding:60px 20px;
    color:#999;
}

.amVideo-no-reels p {
    margin:0;
    font-size:16px;
}

@media (max-width:768px) {
    .amVideo-reels-feed-container {
        padding:10px;
    }

    .amVideo-reels-header {
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .amVideo-reels-grid {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:8px;
    }
}

/* modules/amVideo/css/amVideo_analytics_video.css */


/* amVideo Analytics Video Styles
 * External CSS for analytics_video.tpl template
 * Author:The Arcitech 2026
 */

.video-analytics-header {
    margin-bottom:30px;
}

.video-analytics-header h2 {
    color:#666;
    font-size:18px;
    margin:10px 0;
}

.demographics-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.demo-item {
    display:flex;
    justify-content:space-between;
    padding:10px;
    background:#f9f9f9;
    border-radius:4px;
}

/* modules/amYouTube/css/amYouTube.css */


/* from this tutorial http://www.labnol.org/internet/light-youtube-embeds/27941/ */
.youtube-container {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:600px;
}

.youtube-player {
    display:block;
    width:100%; /* assuming that the video has a 16:9 ratio */
    padding-bottom:56.25%;
    overflow:hidden;
    position:relative;
    height:100%;
    cursor:pointer;
}

img.youtube-thumb {
    bottom:0;
    display:block;
    left:0;
    margin:auto;
    max-width:100%;
    width:100%;
    position:absolute;
    right:0;
    top:0;
    height:auto
}

.youtube-play-button {
    height:51px;
    width:72px;
    left:50%;
    top:50%;
    margin-left:-36px;
    margin-top:-36px;
    position:absolute;
    background:url("http://mediaistream.com/image/img/module/amYouTube/play.png") no-repeat;
}

.youtube-iframe {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border:0;
}


/* modules/jrAction/contrib/mentions/jquery.mentionsInput.css */


.mentions-input-box {
    position:relative;
}

.mentions-input-box textarea {
    width:100%;
    display:block;
    overflow:hidden;
    position:relative;
    outline:0;
    resize:none;
}

.mentions-input-box .mentions-autocomplete-list {
    display:none;
    background-color:#FFFFFF !important;
    color:#000000;
    border:solid 1px #7F7F7F;
    position:absolute;
    padding:5px 5px 0 5px;
    left:4px;
    right:150px;
    margin-top:-1px;
    border-radius:3px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.148438);
    -moz-box-shadow:0 2px 5px rgba(0,0,0,0.148438);
    box-shadow:0 2px 5px rgba(0,0,0,0.148438);
    z-index:50000;
    max-height:200px;
    overflow:scroll;
}

.mentions-input-box .mentions-autocomplete-list ul {
    margin:0;
    padding:0;
}

.mentions-input-box .mentions-autocomplete-list li {
    margin:0;
    width:auto;
    height:34px;
    line-height:34px;
    overflow:hidden;
    cursor:pointer;
    list-style:none;
    white-space:nowrap;
}

.mentions-input-box .mentions-autocomplete-list li:last-child {
    border-radius:5px;
}

.mentions-input-box .mentions-autocomplete-list li > img,
.mentions-input-box .mentions-autocomplete-list li > div.icon {
    width:28px;
    height:28px;
    float:left;
    margin:0 5px 5px 0;
}

.mentions-input-box .mentions-autocomplete-list li em {
    font-weight:bold;
}

.mentions-input-box .mentions-autocomplete-list li:hover,
.mentions-input-box .mentions-autocomplete-list li.active {
}

.mentions-input-box .mentions {
    position:absolute;
    left:1px;
    right:0;
    top:1px;
    bottom:0;
    padding:9px;
    color:#FFFFFF;
    overflow:hidden;
    white-space:pre-wrap;
    word-wrap:break-word;
}

.mentions-input-box .mentions > div {
    color:#FFFFFF;
    white-space:pre-wrap;
    width:100%;
}

.mentions-input-box .mentions > div > strong {
    font-weight:normal;
    background:#D8DFEA;
}

.mentions-input-box .mentions > div > strong > span {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}


/* modules/jrAction/css/jrAction.css */


#action_update {
    padding:5px;
    height:50px;
    width:98%;
}

#action_text_counter {
    position:relative;
    float:left;
    font-size:12px;
    left:146px;
    bottom:24px;
    font-style:italic;
}

#asi {
    display:none;
    vertical-align:middle;
    margin:6px 4px 0 4px;
    border:0;
}

#action_submit {
    margin-top:9px;
}

.action_warning {
    color:#900;
}

.action_exceeded {
    color:#E00;
}

.action_detail {
    padding:1em;
}

.action_item {
    font-size:16px;
    overflow:auto;
}

.action_item_media {
    vertical-align:top;
    padding:0 16px 0 12px;
    cursor:pointer;
}

.action_item_desc {
    font-size:14px;
}

.action_item_title {
    font-size:14px;
    font-weight:bold;
}

.action_item_actions {
    display:inline-block;
    color:#999;
    font-size:12px;
    text-transform:lowercase;
    margin-bottom:12px;
}

.action_item_text {
    font-size:15px;
}

.action_item_shared {
    width:100%;
    background:#F3F3F3;
    padding:12px 0 12px 0;
    margin-top:6px;
}

.action_item_user_img {
    margin:1px;
    float:left;
}

.action_item_holder {
    width:100%;
    border-bottom:1px solid #EEE;
    padding:12px 0;
}

.action_item_holder:hover {
    background:#EEE;
}

.action_item_mention {
    background:#EEE;
    padding:6px;
    border-radius:3px;
    margin-top:6px;
}

.action_item_link {
    display:inline-block;
    width:100%;
    height:100%;
    padding-right:10px;
    box-sizing:border-box;
}

.action_media_thumb {
    display:inline-block;
}

.action_item_content {
    width:100%;
    color:#000;
}

.action_item_content a:hover {
    text-decoration:underline;
}

.action_item_delete {
    position:absolute;
    top:0;
    right:0;
    display:none;
    padding-right:12px;
}

.action_item_share {
    display:inline-block;
    color:#999;
    font-size:12px;
    margin:6px 16px 0 0;
}

.action_item_share:hover {
    color:#000;
}

.action_item_comments {
    display:inline-block;
    font-style:italic;
    padding-left:3px;
    color:#777;
    font-size:12px;
}

.action_item_comments:hover {
    color:#000;
}

.hash_link {
    text-decoration:none;
}

.mention_item {
    margin:0 !important;
    padding:3px !important;
}

#timeline_text_counter {
    font-size:12px;
    font-style:italic;
    padding:1em;
    display:inline-block;
}

/* share modal */
#share_modal {
    display:none;
    height:auto;
    width:600px;
    z-index:100000;
}

#share_modal_box {
    position:relative;
    border-radius:5px;
    display:block;
    padding:15px;
}

#share_modal_box .list_buttons {
    display:none;
}

#share_modal_box .action,#share_modal_box .item {
    max-height:400px;
    overflow:auto;
}

#share_modal_box .action_item_holder:hover {
    background:inherit;
}

#share_modal_close {
    position:absolute;
    bottom:18px;
    right:18px;
}

#share_update {
    height:50px;
    margin:0 0 5px;
    padding:5px;
    width:98%;
}

#share_text_counter {
    font-size:12px;
    font-style:italic;
    display:inline-block;
}

#share_networks {
    position:relative;
    float:right;
    font-size:14px;
    right:0;
    bottom:0;
    font-style:italic;
}

#share_networks img {
    margin:0 3px;
}

#share_submit_indicator {
    display:none;
    vertical-align:middle;
    margin:9px 9px 0 3px;
    border:0;
}

#share_submit {
    margin-top:12px;
}

.share_warning {
    color:#900 !important;
}

.share_exceeded {
    color:#E00 !important;
}

.share_item {
    font-size:16px;
    overflow:auto;
}

.share_item_media {
    vertical-align:top;
    padding:0 16px 0 12px;
    cursor:pointer;
}

.share_item_title {
    font-size:13px;
    font-weight:bold;
}

.share_item_actions {
    color:#999;
    font-size:12px;
    font-style:italic;
    text-transform:lowercase;
}

.share_item_user_img {
    margin:1px;
    float:left;
}

.share_item_holder {
    width:100%;
    border-bottom:1px solid #EEE;
    padding:12px 0 12px 0;
}

.share_item_holder:hover {
    background:#EEE;
}

.share_item_holder_shared {
    width:100%;
    border-bottom:1px solid #EEE;
    background:#F3F3F3;
    padding:12px 0 12px 0;
}

.share_item_desc {
    vertical-align:top;
    font-size:14px;
}

.share_item_desc a {
    color:#000;
}

.share_item_link {
    display:inline-block;
    width:100%;
    height:100%;
    cursor:pointer;
}

.share_media_thumb {
    display:inline-block;
}

.share_item_content {
    width:100%;
    color:#000;
}

.share_item_content a:hover {
    text-decoration:underline;
}

.share_item_delete {
    position:absolute;
    top:0;
    right:0;
    display:none;
    padding-right:12px;
}

.share_item_share {
    display:inline-block;
    color:#999;
    font-size:12px;
    margin:6px 16px 0 0;
}

.share_item_action:hover {
    color:#000;
}

.share_item_comments {
    display:inline-block;
    font-style:italic;
    padding-left:3px;
    color:#777;
    font-size:12px;
}

.share_item_comments:hover {
    color:#000;
}

#quick_action_box {
    position:relative;
}

#quick_action_tab_box {
    padding:0 2px 6px 2px;
    overflow:hidden;
}

.quick_action_tab {
    margin:4px 2px;
    float:left;
    cursor:pointer;
}

#quick_action_title {
    float:right;
    margin-top:22px;
    text-transform:capitalize;
}

#share_item_box {
    padding:1px;
    max-height:400px;
    overflow:auto;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

#shared_item_status {
    position:relative;
    padding:10px 20px;
    vertical-align:middle;
}

#shared_item_status span {
    display:inline-block;
    margin-top:6px;
}

#shared_item_view_button {
    float:right;
}

#action_modal .media_panel .action_info {
    display:none;
}

#action_modal .col8 .action {
    width:100%;
}

#action_modal .action_wrap,#action_modal #comment_wrap {
    padding:0 12px;
}

#action_modal.media .action_wrap {
    padding:12px 12px 0;
}

#action_modal .action_wrap > .action {
    margin:0;
}

#action_modal .item_media.action_text.clearfix .urlscan_card {
    font-size:12px;
}

#action_modal .item_media.action_text.clearfix {
    padding:1em;
    font-size:20px;
}

#action_modal .action {
    margin:0;
    box-shadow:none;
    background:none;
    max-width:none;
}

#action_modal .block {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    min-width:0;
    padding:12px 0;
}

#action_modal.media .item_media {
    box-shadow:none;
}

#action_modal .modal_paging {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#action_modal .action_user_image {
    position:relative;
    top:-10px;
}

#action_modal.media .action_user_image {
    top:0;
}

#action_modal #comment_form_section .item {
    box-shadow:none;
    margin:0;
    border:none;
}

#action_modal.media #comment_form_section .item {
    padding:0;
}

#action_modal #comment_form_section .item.error {
    padding:10px;
}

#action_modal .comment_page_section .item {
    margin:0;
    box-shadow:none;
}

#action_modal .modal_paging .prev {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:50%;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-prev.png') left 48% no-repeat;
    opacity:0;
    transition:opacity 1s ease 0s;
    height:auto;
    width:auto;
}

#action_modal .modal_paging .next {
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    right:0;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-next.png') right 48% no-repeat;
    opacity:0;
    transition:opacity 1s ease 0s;
    height:auto;
    width:auto;
}

#action_modal #gallery_box .close {
    position:absolute;
    right:15px;
    top:15px;
    width:30px;
    height:30px;
    background:url('http://mediaistream.com/image/img/module/jrCore/lightbox2-close.png') 0 0 no-repeat;
    z-index:20;
    cursor:pointer;
}

#action_modal .modal_paging .next:hover,#action_modal .modal_paging .prev:hover {
    opacity:1;
}

#action_modal #gallery_box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#action_modal #comment_box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100vh;
    transition:top 1s ease 0s;
    z-index:21;
}

#action_modal #comment_box.closed {
    top:100vh;
    display:block;
}

#action_modal #comment_box .comment_page_section {

}

#action_modal .comment_close {
    right:10px;
    top:10px;
    position:absolute;
    z-index:20
}

#action_modal #gallery_box .title {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    box-shadow:none !important;
}

#action_modal .title {
    box-shadow:none !important;
    font-size:14px;
    font-weight:normal;
}

#action_modal #gallery_box .title a {
    color:white;
}

#action_modal .comment_page_section .col2 {
    width:10%;
}

#action_modal .comment_page_section .col10 {
    width:90%;
}

#action_modal.media .comment_page_section .col2 {
    width:16.66%;
}

#action_modal.media .comment_page_section .col10 {
    width:83.34%;
}

#action_modal.media .comment_page_section {
    font-size:13px;
}

#action_modal.media {
    height:526px;
    width:100%;
    max-width:1000px;
}

#action_modal.media .block {
    padding:12px;
}

#action_modal .item_media {
    padding:0;
}

#action_modal {
    height:100vh;
    width:600px;
    background:white;
    position:relative;
}

#action_modal .comment_page_section {
    width:auto;
    display:block;
    max-height:none;
    background:none;
}

#action_modal #comment_wrap {

}

#action_modal #comment_form_holder {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0 12px;
}

#action_modal .media_panel {
    width:66%;
    float:left;
}

#action_modal .comment_panel {
    width:34%;
    position:absolute;
    top:12px;
    bottom:1em;
    right:0;
}

@media handheld,only screen and (max-width:767px) {
    #action_modal {
        overflow:auto;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        padding:0;
        margin:0;
        width:auto;
    }

    #action_modal .comment_page_section .col2 {
        float:left;
        width:16.66%;
    }

    #action_modal .comment_page_section .col10 {
        float:left;
        width:83.34%;
    }

    #action_modal #comment_form_section > .item {
        margin:0;
    }

    #action_modal .modal_paging .next,.modal_paging .prev {
        opacity:1;
    }

    #action_modal.media {
        height:100vh;
        width:auto;
        max-width:100%;
    }

    #action_modal #comment_box {
        background:white;
    }

    #action_modal.media .block {
        padding:0;
    }
}

#action_modal .action_info {
    min-height:60px;
    padding:0;
}

#action_modal #scroller {
    overflow:auto;
    height:calc(100vh - 146px);
    width:100%;
}

#action_modal #scroller::-webkit-scrollbar {
    display:none;
}

/* Hide scrollbar for IE and Edge */
#action_modal #scroller {
    scrollbar-width:none; /* Firefox 64 */
}

#action_modal.media #scroller {
    height:calc(100% - 121px);
}



/* modules/jrAnalytics/css/jrAnalytics.css */


#al-user-dashboard .page_table_header {
    font-size:10px !important;
    padding:3px 5px;
}

#al-user-dashboard .page_table_cell {
    padding:3px 5px;
}

#al-new-tag {
    width:500px;
    height:auto;
    background:#FFF;
    padding:10px;
    border-radius:5px;
}

.al-header-info {
    font-size:12px;
}

.al-section-header {
    padding:5px;
    font-weight:bold;
    font-size:16px;
    margin-top:10px;
}

.al-user-os {
    display:block;
    font-size:7px;
    line-height:10px;
    color:#AAA;
}

#al-user-info {
    width:650px;
    height:auto;
    border-radius:5px;
    border:2px solid #000;
    box-shadow:0 0 15px #000;
}

#al-user-info-table .page_table_cell h2 {
    display:inline-block;
    margin-bottom:8px;
}

#al-user-info-table .page_table_cell span {
    display:inline-block;
    width:70px;
    text-align:right;
    margin:2px 6px 0 0;
    font-size:12px !important;
    font-weight:bold !important;
}

#al-graph-modal {
    width:750px;
    height:400px;
    border:2px solid #000;
    box-shadow:0 0 15px #000;
}

.al-bignum div {
    font-size:36px !important;
    line-height:36px !important;
}

.simplemodal-data .page_content {
    margin:0;
}

/* modules/jrAudio/css/jrAudio.css */


/* @title Audio Detail Box */
/* @help This is the box around the Audio Details that is seen on the Update Audio file form. */
.jraudio_detail {
    width:65%;
    padding:10px;
    margin:0 0 12px 3px;
    font-size:14px;
}

.jraudio_detail_left {
    width:10%;
}

/* @title Audio Details */
/* @help This is the text area that contains the information about the Audio File. */
.jraudio_detail_right {
    width:90%;
    text-align:left;
}

/* @title Audio Detail Labels */
/* @help This is the small labels that are shown in the Audio Details box */
.jraudio_title {
    width:100px;
    display:inline-block;
    text-align:right;
}

.jraudio_detail_player {
    display:table;
    width:100%;
}

.jraudio_detail_player_left {
    display:table-cell;
    width:70%;
    padding:5px;
    padding-right:18px;
    vertical-align:top;
}

.jraudio_detail_player_right {
    display:table-cell;
    width:30%;
    padding:5px;
    vertical-align:top;
}

.jraudio_list_detail {
    float:left;
    margin-left:18px;
}

@media handheld,only screen and (max-width:767px) {

    .jraudio_detail_player {
        display:inline;
    }

    .jraudio_detail_player_left {
        display:inline;
        width:100%;
    }

    .jraudio_detail_player_right {
        display:inline;
        width:100%;
    }

    .jraudio_detail_player_right img {
        margin-top:12px;
        width:90%;
    }

    .jraudio_list_detail {
        margin-left:0;
        margin-top:12px;
    }
}


/* modules/jrBatchEdit/css/jrBatchEdit.css */


.batch-edit-label {
    display:inline-block;
    width:250px;
    text-align:right;
}

.batch-edit-input {
    display:inline-block;
    box-sizing:border-box !important;
}

/* modules/jrBirthday/css/jrBirthday.css */


.birthday_share_modal {
    display:none;
    height:auto;
    width:600px;
    z-index:100000;
}

.birthday_share_modal_box {
    position:relative;
    border-radius:5px;
    display:block;
    padding:15px;
}

.birthday_share_modal_close {
    position:absolute;
    bottom:18px;
    right:18px;
}

.birthday_share {
    text-decoration:underline;
}

.birthday_update {
    height:50px;
    margin:0 0 5px;
    padding:5px;
    width:98%;
}

.birthday_share_indicator {
    display:none;
    vertical-align:middle;
    margin:9px 9px 0 3px;
    border:0;
}

.birthday_share {
    cursor:pointer;
}

#birthday_text_counter {
    font-size:12px;
    font-style:italic;
    display:inline-block;
    margin:3px 0 8px 3px;
}

/* modules/jrBlog/css/jrBlog.css */


/* make sure the anchors take into account a fixed header */
a.anchor {
    display:block;
    position:relative;
    top:-100px;
    visibility:hidden;
}

.float-right {
    float:right;
}

.blog_border {
    border-top:1px solid #DDD;
    padding-top:5px;
}

.stat_entry_container {
    padding:10px;
}

/* modules/jrBundle/css/jrBundle.css */


/* Jamroom FoxyCart Bundle module CSS */
.bundle_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#EEEEEE;
    border:1px solid #999999;
    border-radius:5px;
    padding:12px;
    z-index:100;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #ccc;
}

.bundle_item_section {
    border-radius:5px;
    padding:9px;
    background:#DDDDDD;
}

.bundle_item_table {
}

.bundle_section {
    margin-top:12px;
    padding:4px 0;
    background-color:#EEEEEE;
    border-radius:5px;
}

.bundle_drop_section {
    padding:9px;
    background-color:#FFCC00;
    border-radius:5px;
}

.bundle_drop_top {
    margin-top:12px;
}

.bundle_name {
    padding-left:3px;
}

.bundle_table {
    margin-top:6px;
}

.bundle_table th {
    color:#000;
    font-weight:bold;
}

.bundle_count {
    width:10%;
    white-space:nowrap;
    font-size:10px;
    padding:0 12px;
}

#bundle_close,
#bundle_prev,
#bundle_next,
.bundle_cart_image {
    cursor:pointer;
}

.bundle_button {
    width:76px;
}

#bundle_message {
    width:80%;
    padding:6px;
    border-radius:5px;
    margin-bottom:6px;
}

.bundle_only {
    display:inline-block;
    background-color:#ccff99 !important;
    padding:6px;
    color:#000;
    text-align:center;
    font-size:13px;
    font-style:italic;
    margin:0;
    position:absolute;
    top:2px;
    right:0;
    left:2px;
}

/* @title Subscription Icon */
/* @help Shows in payments browser as purchased item image */
.bundle-icon {
    border:0;
    border-radius:0;
    margin:0 auto;
    padding:0;
}

.bundle-item .img_scale {
    margin:1px;
    max-width:64px;
}

.bundle-item {
    font-weight:600;
}

.table-cell.img {
    padding:5px;
    width:66px;
}

.bundle-image .button_player {
    bottom:5px;
    position:absolute;
    right:5px;
    width:25px;
}

.bundle-item-info h3 {
    font-size:14px;
    font-weight:bold;
    margin:10px 0 0;
}

.bundle-item-info {
    font-size:12px;
}

.bundle-image .button_player {
    bottom:5px;
    min-width:25px;
    position:absolute;
    right:5px;
}

.bundle-image {
    position:relative;
}

@media handheld,only screen and (max-width:767px) {
    .bundle_box {
        position:absolute;
        width:80%;
        right:0;
    }
}


/* modules/jrChat/css/jrChat.css */


/* Chat CSS */

html {
    height:100%;
}

body {
    position:relative;
}

#jrchat-room {
    background:#CCCCCC;
    height:100%;
    position:fixed;
    right:0;
    top:0;
    box-sizing:border-box;
    z-index:100000;
    overflow-x:hidden;
}

#jrchat-tabs {
    background:#EEEEEE;
    position:fixed;
    bottom:70px;
    display:table;
    box-sizing:border-box;
    z-index:100000;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}

#jrchat-hidden-tabs {
    display:none;
}

.jrchat-tab {
    cursor:pointer;
}

.jrchat-tab-inset {
    margin:5px;
}

#jrchat-box {
    position:relative;
    width:100%;
    height:100%;
    overflow-x:hidden;
    -ms-overflow-style:none;
}

#jrchat-chat {
    width:100%;
    background:#CCCCCC;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    z-index:100000;
    box-sizing:border-box;
    border-left:1px solid #EEEEEE;
    overflow-x:hidden;
}

#jrchat-title {
    background:#FFFFFF;
    position:absolute;
    top:0;
    right:0;
    width:100%;
    z-index:110000;
    padding:6px 8px 8px 8px;
    box-sizing:border-box;
    box-shadow:0 1px 3px 3px #999999;
}

#jrchat-title img {
    border-radius:3px;
}

#jrchat-title .sprite_icon {
    padding:0;
    margin:0;
}

#jrchat-new-bubble {
    background:#D9FFB3;
    color:#000000;
    font-size:10px;
    line-height:18px;
    position:absolute;
    bottom:-2px;
    left:-2px;
    width:18px;
    height:18px;
    border:1px solid #7F7F7F;
    border-radius:9px;
    text-align:center;
}

#jrchat-available-rooms {
    position:absolute;
    top:58px;
    right:30px;
    width:250px;
    z-index:110000;
    overflow:scroll;
}

#jrchat-no-room-notice {
    width:80%;
    margin:20px auto;
    padding:20px;
    background:#F9F9F9;
    font-size:15px;
    text-align:center;
    border-radius:5px;
}

#jrchat-select-room {
    display:inline-block;
    vertical-align:top;
    margin-bottom:3px;
}

#jrchat-room-box {
    background:#F9F9F9;
    padding:5px;
    border-radius:5px;
    overflow-y:scroll;
    overflow-x:hidden;
}

.jrchat-room-opt {
    position:relative;
    background:#EEEEEE;
    display:block;
    padding:6px 10px;
    font-size:16px;
    margin:5px;
    border-radius:4px;
}

.jrchat-room-dl {
    position:absolute;
    top:3px;
    right:5px;
}

#jrchat-upload-images {
    position:absolute;
    top:8px;
    right:8px;
}

#pm_chat_file .upload_button {
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
}

#jrchat_smiley_button {
    right:48px;
}

.jrChat_upload_button {
    padding:0 !important;
    margin:0 !important;
    cursor:pointer;
}

#chi {
    position:absolute;
    bottom:9px;
    right:15px;
}

#jrchat-upload-images .qq-upload-list {
    display:none !important;
}

.jrchat-config {
    background:#D9FFB3;
    color:#000000;
    font-size:11px;
    line-height:18px;
    position:absolute;
    bottom:-2px;
    left:22px;
    width:18px;
    height:18px;
    border:1px solid #A3BF86;
    border-radius:9px;
    text-align:center;
}

.jrchat-bubble {
    background:#D9FFB3;
    color:#000000;
    font-size:11px;
    line-height:18px;
    position:absolute;
    bottom:-2px;
    left:-2px;
    width:18px;
    height:18px;
    border:1px solid #7F7F7F;
    border-radius:9px;
    text-align:center;
}

#jrchat-load-next-page {
    height:0;
}

#jrchat-room-search {
    width:100%;
    box-sizing:border-box;
}

#jrchat-room-search div {
    width:100%;
    box-sizing:border-box;
    padding-top:8px;
}

#jrchat-search-input {
    display:inline;
    vertical-align:middle;
    padding:3px 4px;
    width:68%;
    margin:0;
}

#jrchat-search-reset {
    position:absolute;
    right:0;
    display:inline;
    vertical-align:middle;
    width:60px;
    margin:0;
}

#jrchat-room-browser {
    background:#FFFFFF;
    padding:0 3px;
    border-radius:5px;
    position:fixed;
    top:63px;
    right:10px;
    width:250px;
    height:300px;
    display:none;
    overflow-y:scroll;
    overflow-x:hidden;
    z-index:110000;
}

#jrchat-messages {
    position:absolute;
    right:0;
    bottom:70px;
    width:100%;
    padding:10px 6px;
    box-sizing:border-box;
    overflow-y:scroll;
    overflow-x:hidden;
}

#jrchat-new-message {
    background:#FFFFFF;
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:70px;
    padding:10px 8px;
    box-sizing:border-box;
    z-index:100;
}

#jrchat-new-message-input {
    font-family:inherit;
    width:60%;
    position:absolute;
    top:9px;
    left:6px;
    right:36px;
    height:52px;
    box-sizing:border-box;
    resize:none;
    font-size:13px;
}

#jrchat-page-limit {
    margin:6px 0;
    padding:8px;
    border-radius:8px;
    font-size:13px;
    color:#000000;
    text-align:center;
}

#jrchat-empty-chat {
    padding:24px;
    background:#FFCC00;
    overflow:hidden;
    border-radius:5px;
    font-size:16px;
    text-align:center;
}

.jrchat-msg {
    position:relative;
    margin:6px 0;
    padding:0;
    border-radius:8px;
    font-size:13px;
}

.jrchat-msg-from {
    padding:9px 12px;
    background:#FFF2BF;
    margin-left:26px;
    overflow:hidden;
}

.jrchat-msg-from .urlscan_card {
    padding:0;
    border:0;
}

.jrchat-msg-to {
    background:#F9F9F9;
    margin-right:26px;
    overflow:hidden;
}

.jrchat-msg-added {
    padding:6px;
    background:#CCFF99;
    margin:0 32px;
    overflow:hidden;
}

.jrchat-msg-removed {
    padding:6px;
    background:#FFCC00;
    margin:0 32px;
    overflow:hidden;
}

.jrchat-msg-img {
    display:table-cell;
    width:2%;
    padding:5px 0 5px 5px;
    vertical-align:top;
}

.jrchat-msg-img img {
    width:40px;
    height:40px;
    border-radius:5px;
}

.jrchat-msg-msg {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    padding:9px 12px 18px 12px;
    word-break:break-word;
    width:98%;
}

.jrchat-msg-byline {
    position:absolute;
    right:5px;
    bottom:0;
    display:block;
    font-size:8px;
    color:#AAAAAA;
}

.jrchat-controls {
    position:absolute;
    top:4px;
    right:5px;
    cursor:pointer;
}

.jrchat-controls .sprite_icon {
    padding:0;
    margin:0;
}

.jrchat-table {
    display:table;
    width:100%;
}

.jrchat-table-row {
    display:table-row;
    width:100%;
}

.jrchat-table-cell {
    display:table-cell;
}

#jrchat-user-settings {
    background:#FFFFFF;
    padding:0 3px;
    border-radius:5px;
    position:fixed;
    top:63px;
    right:10px;
    width:260px;
    height:300px;
    display:none;
    overflow-y:scroll;
    overflow-x:hidden;
}

#jrChat_user_config .element_left {
    width:40% !important;
}
#jrChat_user_config .element_right {
    width:60% !important;
}

#jrchat-user-control {
    background:#FFFFFF;
    padding:0 3px;
    border-radius:5px;
    position:fixed;
    top:63px;
    right:10px;
    width:260px;
    height:300px;
    display:none;
    overflow-y:scroll;
    overflow-x:hidden;
}

.jrchat-overlay {
    opacity:0.3;
}

.jrchat-room-title {
    font-size:16px;
}

#jrchat-new-chat-title {
    width:85%;
}

#jrchat-new-chat-type {
    font-size:12px;
}

#jrchat-user-search {
    margin-top:12px;
    background:#FFFFFF;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    border-radius:5px;
}

#jrchat-user-search-text {
    width:80%;
    box-sizing:border-box;
}
#jrchat-mobile-send{
    float:right;
}

.jrchat-code-box {
    display:block;
    margin:5px 0 3px 0;
    font-family:"Roboto Mono",monospace;
    background:#FFFFFF;
    padding:6px;
    font-size:11px;
    overflow:scroll;
    border-radius:5px;
    word-break:break-all;
}

.jrchat-code-box code {
    margin:0;
    padding:0;
}

.jrchat-typing-img {
    vertical-align:middle;
    height:11px;
    margin:10px 0 0 3px;
}

/* typing indicator */

@-webkit-keyframes ellipsis_animated-toggle {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

@-moz-keyframes ellipsis_animated-toggle {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

@-ms-keyframes ellipsis_animated-toggle {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

@-o-keyframes ellipsis_animated-toggle {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

@keyframes ellipsis_animated-toggle {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

.ellipsis_animated-inner span {

    transform:translateZ(0);
    font-size:24px;
    line-height:14px;
    letter-spacing:2px;

    -webkit-animation-name:ellipsis_animated-toggle;
    -moz-animation-name:ellipsis_animated-toggle;
    -ms-animation-name:ellipsis_animated-toggle;
    -o-animation-name:ellipsis_animated-toggle;
    animation-name:ellipsis_animated-toggle;

    -webkit-animation-duration:800ms;
    -moz-animation-duration:800ms;
    -ms-animation-duration:800ms;
    -o-animation-duration:800ms;
    animation-duration:800ms;

    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    animation-iteration-count:infinite;

    -webkit-animation-timing-function:cubic-bezier(.02,.85,.69,1);
    -moz-animation-timing-function:cubic-bezier(.02,.85,.69,1);
    -ms-animation-timing-function:cubic-bezier(.02,.85,.69,1);
    -o-animation-timing-function:cubic-bezier(.02,.85,.69,1);
    animation-timing-function:cubic-bezier(.02,.85,.69,1);
}

.ellipsis_animated-inner span:nth-child(1) {
    -webkit-animation-delay:-800ms;
    -moz-animation-delay:-800ms;
    -ms-animation-delay:-800ms;
    -o-animation-delay:-800ms;
    animation-delay:-800ms;
}

.ellipsis_animated-inner span:nth-child(2) {
    -webkit-animation-delay:-700ms;
    -moz-animation-delay:-700ms;
    -ms-animation-delay:-700ms;
    -o-animation-delay:-700ms;
    animation-delay:-700ms;
}

.ellipsis_animated-inner span:nth-child(3) {
    -webkit-animation-delay:-600ms;
    -moz-animation-delay:-600ms;
    -ms-animation-delay:-600ms;
    -o-animation-delay:-600ms;
    animation-delay:-600ms;
}


/* modules/jrCombinedVideo/css/jrCombinedVideo.css */


.create_video_box {
    position:inherit;
    text-align:left;
    border:1px solid #999999;
    border-radius:3px;
    padding:6px;
    z-index:100;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCCCCC;
}

.video-choice {
    float:left;
    text-align:center;
    padding:12px;
}

#video-close {
    position:absolute;
    bottom:6px;
    right:6px;
}


/* modules/jrComment/css/jrComment.css */


/* @title Main Comment Indent */
/* @help This controls how far the MAIN LEVEL comments on an item is indented */
.comment-level-0 {
    margin-left:0;
}

/* @title Comment Level 1 */
/* @help This controls how far FIRST LEVEL comment replies on an item are indented */
.comment-level-1 {
    margin-left:25px !important;
}

/* @title Comment Level 2 */
/* @help This controls how far SECOND LEVEL comment replies on an item are indented */
.comment-level-2 {
    margin-left:50px !important;
}

/* @title Comment Level 3 */
/* @help This controls how far THIRD LEVEL comment replies on an item are indented */
.comment-level-3 {
    margin-left:75px !important;
}

/* @title Comment Level 4 */
/* @help This controls how far FOURTH LEVEL comment replies on an item are indented */
.comment-level-4 {
    margin-left:100px !important;
}

/* @title Comment Level 5 */
/* @help This controls how far FIFTH LEVEL comment replies on an item are indented */
.comment-level-5 {
    margin-left:125px !important;
}

/* @title Comment Level 6 */
/* @help This controls how far SIXTH LEVEL comment replies on an item are indented */
.comment-level-6 {
    margin-left:150px !important;
}

/* @title Comment Level 7 */
/* @help This controls how far SEVENTH LEVEL comment replies on an item are indented */
.comment-level-7 {
    margin-left:175px !important;
}

/* @title Comment Level 8 */
/* @help This controls how far EIGHTH LEVEL and HIGHER comment replies on an item are indented */
.comment-level-last {
    margin-left:200px !important;
}

/* @title Comment Reply Tag */
/* @help Controls the text of the "Reply" text shown on a comment when threading is enabled */
.comment-reply {
    display:inline-block;
    margin-top:6px;
    font-size:11px;
    text-transform:uppercase;
}

.jrcomment_upload_attachment {
    margin-top:-32px;
    text-align:right;
    width:100%;
}

.jrcomment_upload_attachment li.qq-upload-success {
    text-align:left;
}

.jrcomment_upload_attachment .qq-uploader {
    float:right;
}

#comment_form_holder .form_editor_holder {
    width:100%;
}

#comment_text {
    box-sizing:border-box;
    height:72px;
    width:100%;
}

/* modules/jrComment/css/jrComment_base.css */


/**
 * jrComment v3 - Base Styles
 * Modern comment system base styles with proper class prefixes
 */

/* Container */
.jrcomment-container {
    max-width:100%;
    margin:20px 0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Header Bar */
.jrcomment-header-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:2px solid #e1e8ed;
    flex-wrap:wrap;
    gap:15px;
}

.jrcomment-title {
    font-size:20px;
    font-weight:600;
    color:#14171a;
    margin:0;
    flex-shrink:0;
    flex-grow:0;
}

/* Controls */
.jrcomment-controls {
    display:flex;
    gap:8px;
    align-items:center;
    margin-left:auto;
    flex-shrink:0;
}

.jrcomment-pill-group {
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
}

/* Add Comment Button Wrapper */
.jrcomment-add-button-wrapper {
    margin:15px 0;
}

.jrcomment-add-comment-trigger {
    transition:all 0.2s ease;
}

.jrcomment-add-comment-trigger:hover {
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.jrcomment-pill {
    padding:8px 15px;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:all 0.2s;
    white-space:nowrap;
}

.jrcomment-icon {
    font-size:14px;
    line-height:1;
}

/* Dropdown Containers */
#comment_sort_options,
#comment_filter_options {
    background:white;
    border:1px solid #e1e8ed;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    z-index:1000;
    min-width:180px;
    margin-top:10px;
    overflow:hidden;
    padding:5px 0;
}

#comment_sort_options a,
#comment_filter_options a {
    text-decoration:none;
    display:block;
}

.jrcomment-dropdown-container {
    position:absolute;
    background:white;
    border:1px solid #e1e8ed;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    z-index:1000;
    min-width:180px;
    margin-top:5px;
    overflow:hidden;
}

.jrcomment-dropdown-item {
    padding:10px 15px;
    cursor:pointer;
    transition:background 0.2s;
    font-size:14px;
    color:#14171a;
}

.jrcomment-dropdown-item:hover {
    background:#f7f9fa;
}

/* Form Holder */
.jrcomment-form-holder {
    margin:20px 0;
}

/* Card Styles */
.jrcomment-card,
.comment-card {
    background:white;
    border:1px solid #e1e8ed;
    border-radius:12px;
    margin-bottom:15px;
    padding:15px;
    transition:all 0.2s;
}

.jrcomment-card:hover,
.comment-card:hover {
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

/* Comment header */
.comment-header {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}

.comment-avatar {
    flex-shrink:0;
}

.comment-avatar-img {
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}

.comment-meta {
    flex:1;
    min-width:0;
}

.comment-author {
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
}

.comment-author-name {
    font-weight:600;
    color:#14171a;
    text-decoration:none;
    font-size:15px;
}

.comment-author-name:hover {
    text-decoration:underline;
}

.comment-author-username {
    color:#657786;
    text-decoration:none;
    font-size:14px;
}

.comment-timestamp {
    font-size:13px;
    color:#657786;
    margin-top:2px;
}

.comment-edited {
    font-style:italic;
    margin-left:4px;
}

/* Comment body */
.comment-body {
    margin-top:12px;
}

.comment-body-text {
    font-size:15px;
    line-height:1.5;
    color:#14171a;
    word-wrap:break-word;
}

.jrcomment-form-card {
    border:2px solid #1da1f2;
}

/* Card Header */
.jrcomment-card-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:12px;
}

.jrcomment-user-info {
    display:flex;
    gap:12px;
    align-items:center;
}

.jrcomment-user-avatar {
    flex-shrink:0;
}

.jrcomment-avatar {
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}

.jrcomment-meta {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.jrcomment-username {
    font-weight:600;
    color:#14171a;
    text-decoration:none;
    font-size:15px;
}

.jrcomment-username:hover {
    text-decoration:underline;
}

.jrcomment-timestamp {
    font-size:13px;
    color:#657786;
}

/* Actions */
.jrcomment-actions,
.comment-actions-menu {
    position:relative;
    margin-left:auto;
}

.jrcomment-action-menu-trigger,
.comment-menu-btn {
    cursor:pointer;
    padding:8px;
    border-radius:50%;
    transition:background 0.2s;
    background:transparent;
    border:none;
    font-size:20px;
    line-height:1;
    color:#657786;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.jrcomment-action-menu-trigger:hover,
.comment-menu-btn:hover {
    background:#f7f9fa;
    color:#14171a;
}

.jrcomment-action-menu,
.comment-actions-dropdown {
    position:absolute;
    top:100%;
    right:0;
    background:white;
    border:1px solid #e1e8ed;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    z-index:100;
    min-width:50px;
    overflow:visible;
    padding:4px;
    display:none; /* Hidden by default */
}

.comment-actions-dropdown[style*="display:flex"],
.comment-actions-dropdown.show {
    display:flex !important;
    flex-direction:column;
    gap:2px;
}

.jrcomment-action-item,
.comment-action-btn {
    padding:0;
    margin:0;
    cursor:pointer;
    transition:all 0.2s;
    font-size:20px;
    line-height:1;
    color:#14171a;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:6px;
    width:44px;
    height:44px;
    flex-shrink:0;
    position:relative;
    text-align:center;
    font-family:Arial,sans-serif;
    overflow:hidden;
    white-space:nowrap;
    text-indent:0;
}

.comment-action-btn:focus {
    outline:2px solid #1da1f2;
    outline-offset:2px;
}

.jrcomment-action-item:hover,
.comment-action-btn:hover {
    background:#f7f9fa;
}

.comment-action-btn.comment-action-danger:hover {
    background:#fee;
    color:#c00;
}

/* Tooltip styling */
.comment-action-btn[title]:hover::after {
    content:attr(title);
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    margin-left:8px;
    padding:6px 12px;
    background:#14171a;
    color:white;
    font-size:13px;
    white-space:nowrap;
    border-radius:6px;
    z-index:1000;
    pointer-events:none;
}

.comment-action-btn[title]:hover::before {
    content:'';
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    margin-left:2px;
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:6px solid #14171a;
    z-index:1000;
    pointer-events:none;
}

/* Card Body */
.jrcomment-card-body {
    margin-top:12px;
}

.jrcomment-text {
    font-size:15px;
    line-height:1.5;
    color:#14171a;
    word-wrap:break-word;
}

/* Form Styles */
.jrcomment-form-content {
    display:flex;
    gap:12px;
}

.jrcomment-form-input-area {
    flex:1;
}

.jrcomment-textarea {
    width:100%;
    min-height:80px;
    padding:12px;
    border:1px solid #ccd6dd;
    border-radius:8px;
    font-size:15px;
    font-family:inherit;
    resize:vertical;
    transition:border-color 0.2s;
}

.jrcomment-textarea:focus {
    outline:none;
    border-color:#1da1f2;
}

.jrcomment-form-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
}

.jrcomment-submit-area {
    display:flex;
    align-items:center;
    gap:10px;
}

/* Buttons */
.jrcomment-button {
    padding:10px 20px;
    border:none;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.jrcomment-button-primary {
    background:#1da1f2;
    color:white;
}

.jrcomment-button-primary:hover {
    background:#1a91da;
}

.jrcomment-button-secondary {
    background:#f7f9fa;
    color:#14171a;
    border:1px solid #e1e8ed;
}

.jrcomment-button-secondary:hover {
    background:#e1e8ed;
}

/* Login Prompt */
.jrcomment-login-prompt {
    text-align:center;
    padding:20px;
}

.jrcomment-login-prompt a {
    color:#1da1f2;
    text-decoration:none;
    font-weight:600;
}

.jrcomment-login-prompt a:hover {
    text-decoration:underline;
}

/* List Section */
.jrcomment-list-section {
    margin-top:20px;
}

/* Threading */
.jrcomment-threaded,
.comment-level-0 { margin-left:0; }
.comment-level-1 { margin-left:40px; border-left:2px solid #e1e8ed; }
.comment-level-2 { margin-left:80px; border-left:2px solid #e1e8ed; }
.comment-level-3 { margin-left:120px; border-left:2px solid #e1e8ed; }
.comment-level-4 { margin-left:160px; border-left:2px solid #e1e8ed; }
.comment-level-5 { margin-left:200px; border-left:2px solid #e1e8ed; }
.comment-level-6 { margin-left:240px; border-left:2px solid #e1e8ed; }
.comment-level-7 { margin-left:280px; border-left:2px solid #e1e8ed; }
.comment-level-last { margin-left:320px; border-left:2px solid #e1e8ed; }

.jrcomment-level-0 { margin-left:0; }
.jrcomment-level-1 { margin-left:40px; }
.jrcomment-level-2 { margin-left:80px; }
.jrcomment-level-3 { margin-left:120px; }
.jrcomment-level-4 { margin-left:160px; }
.jrcomment-level-5 { margin-left:200px; }
.jrcomment-level-6 { margin-left:240px; }
.jrcomment-level-7 { margin-left:280px; }
.jrcomment-level-last { margin-left:320px; }

/* Media Attachments */
.jrcomment-media-attachments,
.comment-media-attachments {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
    margin-top:12px;
}

.comment-single-image,
.comment-image-grid {
    margin-top:12px;
    border-radius:12px;
    overflow:hidden;
}

.comment-single-image img {
    width:100%;
    max-height:400px;
    object-fit:cover;
}

.comment-image-grid {
    display:grid;
    gap:4px;
}

.comment-grid-2 {
    grid-template-columns:repeat(2,1fr);
}

.comment-grid-3 {
    grid-template-columns:repeat(3,1fr);
}

.comment-grid-4 {
    grid-template-columns:repeat(2,1fr);
}

.comment-image-item {
    position:relative;
    overflow:hidden;
    background:#f7f9fa;
}

.comment-image-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.jrcomment-media-thumb {
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    transition:opacity 0.2s;
}

.jrcomment-media-thumb:hover {
    opacity:0.8;
}

/* Pinned and Flagged badges */
.comment-pinned-badge {
    background:#1da1f2;
    color:white;
    padding:4px 10px;
    border-radius:6px;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-bottom:8px;
}

.comment-card.is-flagged {
    border-left:3px solid #ff6b6b;
}

.comment-card.is-pinned {
    background:#f0f8ff;
    border:2px solid #1da1f2;
}

/* Reactions */
.jrcomment-reactions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e1e8ed;
}

.jrcomment-reaction-pill {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    background:#f7f9fa;
    border-radius:12px;
    font-size:13px;
    cursor:pointer;
    transition:background 0.2s;
}

.jrcomment-reaction-pill:hover {
    background:#e1e8ed;
}

.jrcomment-reaction-count {
    font-weight:600;
    color:#657786;
}

.jrcomment-add-reaction-button {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    background:transparent;
    border:1px dashed #ccd6dd;
    border-radius:12px;
    font-size:13px;
    color:#657786;
    cursor:pointer;
    transition:all 0.2s;
}

.jrcomment-add-reaction-button:hover {
    background:#f7f9fa;
    border-color:#1da1f2;
    color:#1da1f2;
}

/* Empty State */
.jrcomment-empty-state {
    text-align:center;
    padding:40px 20px;
    color:#657786;
    font-size:15px;
}

/* Loading State */
.jrcomment-loading {
    text-align:center;
    padding:20px;
    color:#657786;
}

/* Responsive */
@media (max-width:768px) {
    .jrcomment-header-bar {
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:10px;
    }
    
    .jrcomment-title {
        flex:1 1 100%;
        margin-bottom:5px;
    }
    
    .jrcomment-controls {
        flex:1 1 100%;
        margin-left:0;
        justify-content:flex-start;
    }
    
    .jrcomment-pill-group {
        flex-wrap:wrap;
        width:100%;
    }
    
    .jrcomment-pill {
        font-size:12px;
        padding:6px 12px;
    }
    
    .jrcomment-level-1,
    .jrcomment-level-2,
    .jrcomment-level-3,
    .jrcomment-level-4,
    .jrcomment-level-5,
    .jrcomment-level-6,
    .jrcomment-level-7,
    .jrcomment-level-last {
        margin-left:20px;
    }
}

@media (min-width:769px) {
    /* On larger screens,keep pills to the right */
    .jrcomment-controls {
        margin-left:auto;
    }
    
    .jrcomment-title {
        flex-grow:0;
    }
}


/* modules/jrComment/css/jrComment_reactions.css */


/**
 * jrComment v3 - Reactions Styles
 * Emoji reaction system styles
 */

/* Reaction Buttons */
.comment-reactions {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.reaction-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:#f7f9fa;
    border:1px solid #e1e8ed;
    border-radius:16px;
    font-size:14px;
    color:#657786;
    cursor:pointer;
    transition:all 0.2s ease;
    user-select:none;
}

.reaction-btn:hover {
    background:#e8f5fe;
    border-color:#1da1f2;
    transform:scale(1.05);
}

.reaction-btn.active {
    background:#e8f5fe;
    border-color:#1da1f2;
    color:#1da1f2;
}

.reaction-btn.just-reacted {
    animation:reaction-pop 0.3s ease;
}

@keyframes reaction-pop {
    0%,100% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.2);
    }
}

.reaction-emoji {
    font-size:16px;
    line-height:1;
}

.reaction-count {
    font-weight:600;
    font-size:13px;
}

.add-reaction-btn {
    background:transparent;
    border:1px dashed #ccd6dd;
    color:#657786;
}

.add-reaction-btn:hover {
    background:#f7f9fa;
    border-style:solid;
    transform:none;
}

/* Reaction Picker */
.reaction-picker {
    position:absolute;
    bottom:100%;
    left:0;
    margin-bottom:8px;
    background:white;
    border:1px solid #e1e8ed;
    border-radius:32px;
    padding:8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    z-index:1000;
    opacity:0;
    transform:translateY(10px) scale(0.95);
    transition:all 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
    pointer-events:none;
}

.reaction-picker.show {
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.reaction-options {
    display:flex;
    gap:4px;
}

.reaction-option {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.reaction-option:hover {
    background:#e8f5fe;
    transform:scale(1.2);
}

.reaction-option:active {
    transform:scale(1.1);
}

/* Reaction Users Modal */
.reaction-users-modal {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0.9);
    background:white;
    border-radius:16px;
    width:90%;
    max-width:500px;
    max-height:70vh;
    box-shadow:0 8px 32px rgba(0,0,0,0.25);
    z-index:10001;
    opacity:0;
    transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}

.reaction-users-modal.show {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.reaction-modal-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.4);
    z-index:10000;
    opacity:0;
    transition:opacity 0.3s ease;
}

.reaction-modal-overlay.show {
    opacity:1;
}

.reaction-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid #e1e8ed;
}

.reaction-modal-title {
    font-size:20px;
    font-weight:700;
    color:#14171a;
    margin:0;
}

.reaction-modal-close {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:50%;
    font-size:24px;
    color:#657786;
    cursor:pointer;
    transition:all 0.2s;
}

.reaction-modal-close:hover {
    background:#e8f5fe;
    color:#1da1f2;
}

.reaction-modal-body {
    padding:0;
    overflow:hidden;
}

/* Reaction Tabs */
.reaction-tabs {
    display:flex;
    gap:4px;
    padding:16px 20px 0;
    overflow-x:auto;
    scrollbar-width:none;
}

.reaction-tabs::-webkit-scrollbar {
    display:none;
}

.reaction-tab {
    padding:10px 16px;
    background:transparent;
    border:none;
    border-bottom:2px solid transparent;
    color:#657786;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:all 0.2s;
}

.reaction-tab:hover {
    color:#1da1f2;
}

.reaction-tab.active {
    color:#1da1f2;
    border-bottom-color:#1da1f2;
}

.reaction-tab span {
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    background:#e1e8ed;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
}

.reaction-tab.active span {
    background:#e8f5fe;
    color:#1da1f2;
}

/* Reaction User List */
.reaction-user-list {
    padding:16px 20px 20px;
    max-height:400px;
    overflow-y:auto;
}

.reaction-user-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:8px;
    transition:background 0.2s;
}

.reaction-user-item:hover {
    background:#f7f9fa;
}

.reaction-user-avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.reaction-user-name {
    flex:1;
    font-size:15px;
    font-weight:600;
    color:#14171a;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.reaction-user-time {
    font-size:13px;
    color:#657786;
    flex-shrink:0;
}

/* Empty State */
.reaction-user-list:empty::after {
    content:'No reactions yet';
    display:block;
    text-align:center;
    padding:40px 20px;
    color:#657786;
    font-size:15px;
}

/* Mobile Responsive */
@media (max-width:768px) {
    .reaction-users-modal {
        width:95%;
        max-height:80vh;
    }
    
    .reaction-picker {
        left:auto;
        right:0;
    }
    
    .reaction-option {
        width:36px;
        height:36px;
        font-size:20px;
    }
}


/* modules/jrComment/css/jrComment_media.css */


/**
 * Jamroom Comments Module - Media Styles
 * Version 3.0.0
 * Rich media preview and display
 */

/* Media Container */
.comment-media-container {
    margin:var(--comment-spacing-md) 0;
}

/* Image Gallery */
.comment-image-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:var(--comment-spacing-sm);
    margin:var(--comment-spacing-md) 0;
}

.comment-image-item {
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:var(--comment-radius-md);
    cursor:pointer;
}

.comment-image-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--comment-transition);
}

.comment-image-item:hover img {
    transform:scale(1.05);
}

/* Single Image */
.comment-single-image {
    max-width:100%;
    border-radius:var(--comment-radius-md);
    overflow:hidden;
}

.comment-single-image img {
    width:100%;
    height:auto;
    display:block;
}

/* Video Player */
.comment-video-container {
    position:relative;
    width:100%;
    max-width:640px;
    aspect-ratio:16 / 9;
    background:#000;
    border-radius:var(--comment-radius-md);
    overflow:hidden;
}

.comment-video-container video {
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Audio Player */
.comment-audio-container {
    width:100%;
    max-width:400px;
    padding:var(--comment-spacing-md);
    background:var(--comment-bg-hover);
    border-radius:var(--comment-radius-md);
}

.comment-audio-container audio {
    width:100%;
}

/* GIF Container */
.comment-gif-container {
    max-width:400px;
    border-radius:var(--comment-radius-md);
    overflow:hidden;
}

.comment-gif-container img {
    width:100%;
    height:auto;
    display:block;
}

/* File Attachment */
.comment-attachment {
    display:inline-flex;
    align-items:center;
    gap:var(--comment-spacing-sm);
    padding:var(--comment-spacing-sm) var(--comment-spacing-md);
    background:var(--comment-bg-hover);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    text-decoration:none;
    color:var(--comment-text-color);
    transition:var(--comment-transition);
}

.comment-attachment:hover {
    background:var(--comment-bg-color);
    border-color:var(--comment-primary-color);
}

.comment-attachment-icon {
    font-size:1.25rem;
}

.comment-attachment-info {
    display:flex;
    flex-direction:column;
}

.comment-attachment-name {
    font-weight:500;
}

.comment-attachment-size {
    font-size:0.75rem;
    color:var(--comment-text-muted);
}

/* Media Upload */
.comment-media-upload {
    margin-top:var(--comment-spacing-md);
}

.media-upload-area {
    border:2px dashed var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    padding:var(--comment-spacing-xl);
    text-align:center;
    cursor:pointer;
    transition:var(--comment-transition);
}

.media-upload-area:hover,
.media-upload-area.drag-over {
    border-color:var(--comment-primary-color);
    background:rgba(37,99,235,0.05);
}

.media-upload-icon {
    font-size:3rem;
    color:var(--comment-text-muted);
    margin-bottom:var(--comment-spacing-sm);
}

.media-upload-text {
    color:var(--comment-text-color);
    font-weight:500;
}

.media-upload-hint {
    font-size:0.875rem;
    color:var(--comment-text-muted);
    margin-top:var(--comment-spacing-xs);
}

/* Media Preview List */
.media-preview-list {
    display:flex;
    flex-wrap:wrap;
    gap:var(--comment-spacing-sm);
    margin-top:var(--comment-spacing-md);
}

.media-preview-item {
    position:relative;
    width:100px;
    height:100px;
    border-radius:var(--comment-radius-md);
    overflow:hidden;
    border:1px solid var(--comment-border-color);
}

.media-preview-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.media-preview-remove {
    position:absolute;
    top:4px;
    right:4px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(239,68,68,0.9);
    color:white;
    border:none;
    border-radius:50%;
    cursor:pointer;
    opacity:0;
    transition:var(--comment-transition);
}

.media-preview-item:hover .media-preview-remove {
    opacity:1;
}

.media-preview-remove:hover {
    background:var(--comment-danger-color);
    transform:scale(1.1);
}

/* Progress Bar */
.media-upload-progress {
    width:100%;
    height:4px;
    background:var(--comment-border-color);
    border-radius:9999px;
    overflow:hidden;
    margin-top:var(--comment-spacing-sm);
}

.media-upload-progress-bar {
    height:100%;
    background:var(--comment-primary-color);
    transition:width 0.3s ease;
}

/* Lightbox */
.comment-lightbox {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.9);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}

.comment-lightbox.show {
    display:flex;
    animation:lightbox-fade-in 0.2s ease-out;
}

@keyframes lightbox-fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.lightbox-content {
    max-width:90%;
    max-height:90%;
    position:relative;
}

.lightbox-image {
    max-width:100%;
    max-height:90vh;
    object-fit:contain;
}

.lightbox-close {
    position:absolute;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.1);
    color:white;
    border:none;
    border-radius:50%;
    cursor:pointer;
    transition:var(--comment-transition);
}

.lightbox-close:hover {
    background:rgba(255,255,255,0.2);
}

.lightbox-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.1);
    color:white;
    border:none;
    border-radius:50%;
    cursor:pointer;
    transition:var(--comment-transition);
}

.lightbox-nav:hover {
    background:rgba(255,255,255,0.2);
}

.lightbox-prev {
    left:20px;
}

.lightbox-next {
    right:20px;
}

/* Social Embeds */
.comment-embed {
    margin:var(--comment-spacing-md) 0;
    border-radius:var(--comment-radius-md);
    overflow:hidden;
}

.comment-embed iframe {
    max-width:100%;
    border:0;
}

/* GIF Picker */
.gif-picker {
    position:absolute;
    bottom:100%;
    left:0;
    width:320px;
    max-height:400px;
    margin-bottom:0.5rem;
    background:var(--comment-bg-color);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-lg);
    box-shadow:var(--comment-shadow-lg);
    z-index:1000;
    display:none;
    flex-direction:column;
}

.gif-picker.show {
    display:flex;
    animation:gif-picker-slide-up 0.2s ease-out;
}

@keyframes gif-picker-slide-up {
    from {
        opacity:0;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.gif-picker-search {
    padding:var(--comment-spacing-sm);
    border-bottom:1px solid var(--comment-border-color);
}

.gif-picker-search input {
    width:100%;
    padding:var(--comment-spacing-sm);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    font-size:0.875rem;
}

.gif-picker-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--comment-spacing-xs);
    padding:var(--comment-spacing-sm);
    overflow-y:auto;
    max-height:320px;
}

.gif-picker-item {
    aspect-ratio:1;
    border-radius:var(--comment-radius-sm);
    overflow:hidden;
    cursor:pointer;
    transition:var(--comment-transition);
}

.gif-picker-item:hover {
    transform:scale(1.05);
}

.gif-picker-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Mobile Responsive */
@media (max-width:768px) {
    .comment-image-gallery {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    }
    
    .gif-picker {
        width:100%;
        max-width:320px;
    }
    
    .media-preview-item {
        width:80px;
        height:80px;
    }
}


/* modules/jrComment/css/jrComment_moderation.css */


/**
 * Jamroom Comments Module - Moderation Styles
 * Version 3.0.0
 * Moderation interface and tools
 */

/* Moderation Queue */
.comment-moderation-queue {
    margin:var(--comment-spacing-lg) 0;
}

/* Moderation Toolbar */
.moderation-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--comment-spacing-md);
    background:var(--comment-bg-color);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    margin-bottom:var(--comment-spacing-md);
}

.moderation-filters {
    display:flex;
    gap:var(--comment-spacing-sm);
}

.moderation-filter-btn {
    padding:0.5rem 1rem;
    border:1px solid var(--comment-border-color);
    background:transparent;
    border-radius:var(--comment-radius-sm);
    cursor:pointer;
    transition:var(--comment-transition);
}

.moderation-filter-btn:hover {
    background:var(--comment-bg-hover);
}

.moderation-filter-btn.active {
    background:var(--comment-primary-color);
    color:white;
    border-color:var(--comment-primary-color);
}

/* Moderation Actions */
.moderation-actions {
    display:flex;
    gap:var(--comment-spacing-sm);
}

.moderation-btn {
    padding:0.5rem 1rem;
    border:none;
    border-radius:var(--comment-radius-sm);
    cursor:pointer;
    font-weight:500;
    transition:var(--comment-transition);
}

.moderation-btn.approve {
    background:var(--comment-success-color);
    color:white;
}

.moderation-btn.reject {
    background:var(--comment-danger-color);
    color:white;
}

.moderation-btn.flag {
    background:var(--comment-warning-color);
    color:white;
}

.moderation-btn:hover {
    opacity:0.9;
    transform:translateY(-1px);
}

/* Flagged Comment */
.comment-card.flagged {
    border-left:4px solid var(--comment-warning-color);
    background:rgba(245,158,11,0.05);
}

/* Reported Comment */
.comment-card.reported {
    border-left:4px solid var(--comment-danger-color);
    background:rgba(239,68,68,0.05);
}

/* Moderation Badge */
.moderation-badge {
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    padding:0.25rem 0.5rem;
    border-radius:var(--comment-radius-sm);
    font-size:0.75rem;
    font-weight:500;
}

.moderation-badge.pending {
    background:rgba(245,158,11,0.1);
    color:var(--comment-warning-color);
}

.moderation-badge.flagged {
    background:rgba(239,68,68,0.1);
    color:var(--comment-danger-color);
}

.moderation-badge.approved {
    background:rgba(16,185,129,0.1);
    color:var(--comment-success-color);
}

/* Report Modal */
.report-modal {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-width:500px;
    width:90%;
    background:var(--comment-bg-color);
    border-radius:var(--comment-radius-lg);
    box-shadow:var(--comment-shadow-lg);
    z-index:2000;
    display:none;
    flex-direction:column;
}

.report-modal.show {
    display:flex;
    animation:modal-fade-in 0.2s ease-out;
}

.report-modal-header {
    padding:var(--comment-spacing-md);
    border-bottom:1px solid var(--comment-border-color);
}

.report-modal-title {
    font-weight:600;
    font-size:1.125rem;
}

.report-modal-body {
    padding:var(--comment-spacing-md);
}

.report-reasons {
    display:flex;
    flex-direction:column;
    gap:var(--comment-spacing-sm);
}

.report-reason {
    display:flex;
    align-items:center;
    gap:var(--comment-spacing-sm);
    padding:var(--comment-spacing-md);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    cursor:pointer;
    transition:var(--comment-transition);
}

.report-reason:hover {
    background:var(--comment-bg-hover);
}

.report-reason.selected {
    border-color:var(--comment-primary-color);
    background:rgba(37,99,235,0.05);
}

.report-reason-radio {
    width:20px;
    height:20px;
}

.report-reason-label {
    flex:1;
    font-weight:500;
}

.report-description {
    margin-top:var(--comment-spacing-md);
}

.report-description textarea {
    width:100%;
    min-height:100px;
    padding:var(--comment-spacing-md);
    border:1px solid var(--comment-border-color);
    border-radius:var(--comment-radius-md);
    font-family:inherit;
    resize:vertical;
}

.report-modal-footer {
    display:flex;
    justify-content:flex-end;
    gap:var(--comment-spacing-sm);
    padding:var(--comment-spacing-md);
    border-top:1px solid var(--comment-border-color);
}

/* Moderation History */
.moderation-history {
    margin-top:var(--comment-spacing-md);
    padding-top:var(--comment-spacing-md);
    border-top:1px solid var(--comment-border-color);
}

.moderation-history-title {
    font-weight:600;
    margin-bottom:var(--comment-spacing-sm);
}

.moderation-history-item {
    display:flex;
    align-items:center;
    gap:var(--comment-spacing-sm);
    padding:var(--comment-spacing-sm);
    font-size:0.875rem;
    color:var(--comment-text-muted);
}

.moderation-history-icon {
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}

.moderation-history-icon.warn {
    background:rgba(245,158,11,0.1);
    color:var(--comment-warning-color);
}

.moderation-history-icon.danger {
    background:rgba(239,68,68,0.1);
    color:var(--comment-danger-color);
}

/* Bulk Actions */
.bulk-actions-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:var(--comment-spacing-md);
    background:var(--comment-bg-color);
    border-top:1px solid var(--comment-border-color);
    box-shadow:0 -4px 6px -1px rgb(0 0 0 / 0.1);
    z-index:100;
    display:none;
}

.bulk-actions-bar.show {
    display:flex;
    justify-content:space-between;
    align-items:center;
    animation:slide-up 0.2s ease-out;
}

@keyframes slide-up {
    from {
        transform:translateY(100%);
    }
    to {
        transform:translateY(0);
    }
}

.bulk-actions-info {
    font-weight:500;
}

.bulk-actions-buttons {
    display:flex;
    gap:var(--comment-spacing-sm);
}


/* modules/jrComment/css/jrComment_mobile.css */


/**
 * Jamroom Comments Module - Mobile Styles
 * Version 3.0.0
 * Mobile-first responsive design
 */

/* Mobile Breakpoints */
@media (max-width:768px) {
    /* Comment Threading - Reduced indentation on mobile */
    .comment-level-1 {
        margin-left:1rem;
    }
    
    .comment-level-2 {
        margin-left:1.5rem;
    }
    
    .comment-level-3 {
        margin-left:2rem;
    }
    
    .comment-level-4,
    .comment-level-5,
    .comment-level-6,
    .comment-level-7,
    .comment-level-last {
        margin-left:2.5rem;
    }
    
    /* Comment Card */
    .comment-card {
        padding:var(--comment-spacing-sm);
    }
    
    /* Comment Actions */
    .comment-actions {
        flex-wrap:wrap;
    }
    
    .comment-action-btn {
        font-size:0.8125rem;
        padding:0.375rem 0.5rem;
        min-width:44px;
        min-height:44px;
    }
    
    /* Comment Form */
    .comment-textarea {
        font-size:16px; /* Prevents zoom on iOS */
        min-height:80px;
    }
    
    .comment-submit-btn {
        width:100%;
        min-height:44px;
    }
    
    /* Moderation Toolbar */
    .moderation-toolbar {
        flex-direction:column;
        gap:var(--comment-spacing-sm);
    }
    
    .moderation-filters {
        width:100%;
        overflow-x:auto;
    }
    
    .moderation-actions {
        width:100%;
        justify-content:stretch;
    }
    
    .moderation-btn {
        flex:1;
        min-height:44px;
    }
    
    /* Reaction Picker */
    .reaction-picker {
        left:50%;
        transform:translateX(-50%);
    }
    
    /* GIF Picker */
    .gif-picker {
        width:calc(100vw - 2rem);
        max-width:320px;
    }
    
    /* Media Upload */
    .media-upload-area {
        padding:var(--comment-spacing-md);
    }
    
    .media-upload-icon {
        font-size:2rem;
    }
    
    /* Lightbox Navigation */
    .lightbox-nav {
        width:48px;
        height:48px;
    }
    
    .lightbox-prev {
        left:10px;
    }
    
    .lightbox-next {
        right:10px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width:480px) {
    /* Comment Card */
    .comment-card {
        padding:0.75rem;
        font-size:0.9375rem;
    }
    
    /* Comment Header */
    .comment-avatar {
        width:32px;
        height:32px;
    }
    
    .comment-meta {
        font-size:0.8125rem;
    }
    
    /* Hide less important actions on very small screens */
    .comment-action-btn.mobile-hide {
        display:none;
    }
    
    /* Stack actions vertically on very small screens */
    .comment-actions {
        flex-direction:column;
        align-items:stretch;
    }
    
    .comment-action-btn {
        justify-content:center;
    }
}

/* Touch-Friendly Targets */
.touch-target {
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Swipe Gestures */
.comment-card.swipeable {
    position:relative;
    transition:transform 0.2s ease-out;
}

.comment-card.swipe-actions-visible {
    transform:translateX(-80px);
}

.comment-swipe-actions {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:80px;
    display:flex;
    transform:translateX(100%);
}

.comment-swipe-action {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
}

.comment-swipe-action.reply {
    background:var(--comment-primary-color);
    color:white;
}

.comment-swipe-action.delete {
    background:var(--comment-danger-color);
    color:white;
}

/* Pull to Refresh Indicator */
.comment-pull-refresh {
    display:flex;
    justify-content:center;
    padding:var(--comment-spacing-md);
    opacity:0;
    transition:opacity 0.2s;
}

.comment-pull-refresh.visible {
    opacity:1;
}

.pull-refresh-icon {
    width:24px;
    height:24px;
    animation:spin 1s linear infinite;
}

/* Mobile Navigation */
.comment-mobile-nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--comment-bg-color);
    border-top:1px solid var(--comment-border-color);
    padding:var(--comment-spacing-sm);
    display:none;
    z-index:100;
}

@media (max-width:768px) {
    .comment-mobile-nav {
        display:flex;
        justify-content:space-around;
    }
}

.mobile-nav-btn {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.25rem;
    padding:var(--comment-spacing-sm);
    border:none;
    background:transparent;
    color:var(--comment-text-muted);
    font-size:0.75rem;
    cursor:pointer;
    min-width:60px;
}

.mobile-nav-btn.active {
    color:var(--comment-primary-color);
}

.mobile-nav-icon {
    font-size:1.5rem;
}

/* Mobile Modals */
@media (max-width:768px) {
    .reaction-users-modal,
    .report-modal {
        width:100%;
        height:100%;
        max-height:100%;
        border-radius:0;
        transform:translate(-50%,-50%) scale(1);
    }
    
    .reaction-modal-body,
    .report-modal-body {
        flex:1;
        overflow-y:auto;
    }
}

/* Mobile Keyboard Adjustments */
.keyboard-open .comment-form-section {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    border-radius:0;
    z-index:1000;
}

/* Horizontal Scroll Prevention */
body.comment-modal-open {
    overflow:hidden;
    position:fixed;
    width:100%;
}

/* Safe Area Insets (iPhone notch,etc.) */
@supports (padding:env(safe-area-inset-bottom)) {
    .comment-form-section,
    .comment-mobile-nav,
    .bulk-actions-bar {
        padding-bottom:calc(var(--comment-spacing-md) + env(safe-area-inset-bottom));
    }
}

/* Landscape Mode Adjustments */
@media (max-width:768px) and (orientation:landscape) {
    .comment-textarea {
        min-height:60px;
    }
    
    .comment-mobile-nav {
        display:none;
    }
}

/* Reduced Motion on Mobile */
@media (prefers-reduced-motion:reduce) {
    .comment-card.swipeable {
        transition:none;
    }
    
    .pull-refresh-icon {
        animation:none;
    }
}


/* modules/jrComment/css/universal_comment_modal.css */


/**
 * Universal Comment Modal CSS
 * Works with any Jamroom module and skin
 * 
 * @copyright 2026 The Jamroom Network
 */

/* Modal Overlay */
.jr-universal-comment-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    animation:fadeIn 0.2s ease-in;
    overflow-y:auto;
    padding:20px;
}

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

/* Modal Content */
.jr-universal-comment-modal .modal-content {
    background:#1a1a1a;
    border-radius:12px;
    width:100%;
    max-width:800px;
    max-height:90vh;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    margin:auto;
}

/* Modal Header */
.jr-universal-comment-modal .modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    flex-shrink:0;
}

.jr-universal-comment-modal .modal-header h3 {
    margin:0;
    color:#fff;
    font-size:20px;
    font-weight:700;
}

.jr-universal-comment-modal .close-btn {
    background:none;
    border:none;
    color:#888;
    font-size:32px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s;
    flex-shrink:0;
}

.jr-universal-comment-modal .close-btn:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

/* Modal Body */
.jr-universal-comment-modal .modal-body {
    padding:0;
    overflow-y:auto;
    flex:1;
    min-height:0;
}

/* Item Title */
.jr-universal-comment-modal .comment-item-title {
    padding:20px 24px;
    background:rgba(0,100,160,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:16px;
    font-weight:600;
    color:#fff;
}

.jr-universal-comment-modal .comment-item-title-fixed {
    padding:20px 24px;
    background:rgba(0,100,160,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:16px;
    font-weight:600;
    color:#fff;
    position:sticky;
    top:0;
    z-index:10;
}

/* Comment Content Wrapper */
.jr-universal-comment-modal .comment-content-wrapper {
    padding:24px;
}

/* Loading State */
.jr-universal-comment-modal .comment-loading {
    text-align:center;
    padding:60px 20px;
    color:#888;
    font-size:16px;
}

.jr-universal-comment-modal .comment-loading::before {
    content:'';
    display:block;
    width:40px;
    height:40px;
    margin:0 auto 20px;
    border:3px solid rgba(255,255,255,0.1);
    border-top-color:#0064a0;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform:rotate(360deg); }
}

/* Error State */
.jr-universal-comment-modal .comment-error {
    text-align:center;
    padding:60px 20px;
}

.jr-universal-comment-modal .comment-error svg {
    color:#dc3545;
    margin-bottom:20px;
}

.jr-universal-comment-modal .comment-error p {
    color:#aaa;
    font-size:16px;
    margin:0 0 20px 0;
}

.jr-universal-comment-modal .comment-error .form_button {
    background:#0064a0;
    color:white;
    border:none;
    padding:10px 24px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

/* Success Toast */
.jr-universal-comment-modal .comment-success-toast {
    position:sticky;
    top:0;
    background:linear-gradient(135deg,#1DB954 0%,#1ed760 100%);
    color:white;
    padding:12px 20px;
    border-radius:8px;
    margin:16px 24px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 4px 12px rgba(29,185,84,0.3);
    z-index:20;
    animation:slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity:0;
        transform:translateY(-20px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.jr-universal-comment-modal .comment-success-toast svg {
    flex-shrink:0;
}

.jr-universal-comment-modal .comment-success-toast span {
    font-size:14px;
    font-weight:600;
}

/* Comment Form Styling */
.jr-universal-comment-modal .comment-content-wrapper form {
    margin-bottom:30px;
    padding:20px;
    background:rgba(0,0,0,0.2);
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.05);
}

.jr-universal-comment-modal .comment-content-wrapper textarea {
    width:100%;
    min-height:100px;
    padding:12px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    resize:vertical;
    transition:all 0.2s;
}

.jr-universal-comment-modal .comment-content-wrapper textarea:focus {
    outline:none;
    border-color:#0064a0;
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 0 3px rgba(0,100,160,0.1);
}

.jr-universal-comment-modal .comment-content-wrapper button[type="submit"],
.jr-universal-comment-modal .comment-content-wrapper input[type="submit"] {
    background:linear-gradient(135deg,#0064a0 0%,#0078c0 100%);
    color:white;
    border:none;
    padding:10px 24px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
    margin-top:10px;
}

.jr-universal-comment-modal .comment-content-wrapper button[type="submit"]:hover,
.jr-universal-comment-modal .comment-content-wrapper input[type="submit"]:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,100,160,0.4);
}

.jr-universal-comment-modal .comment-content-wrapper button[type="submit"]:disabled,
.jr-universal-comment-modal .comment-content-wrapper input[type="submit"]:disabled {
    opacity:0.6;
    cursor:not-allowed;
    transform:none;
}

/* Comment List */
.jr-universal-comment-modal .comment-content-wrapper .comment_list {
    list-style:none;
    padding:0;
    margin:0;
}

.jr-universal-comment-modal .comment-content-wrapper .comment_item {
    padding:16px;
    margin-bottom:12px;
    background:rgba(255,255,255,0.03);
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.05);
}

.jr-universal-comment-modal .comment-content-wrapper .comment_author {
    font-weight:600;
    color:#0064a0;
    margin-bottom:8px;
}

.jr-universal-comment-modal .comment-content-wrapper .comment_text {
    color:#ddd;
    line-height:1.5;
    margin-bottom:8px;
}

.jr-universal-comment-modal .comment-content-wrapper .comment_date {
    font-size:12px;
    color:#888;
}

/* Empty State */
.jr-universal-comment-modal .no-comments {
    text-align:center;
    padding:40px 20px;
    color:#888;
}

.jr-universal-comment-modal .no-comments svg {
    width:64px;
    height:64px;
    margin-bottom:16px;
    opacity:0.3;
}

/* Mobile Responsive */
@media (max-width:768px) {
    .jr-universal-comment-modal {
        padding:10px;
    }
    
    .jr-universal-comment-modal .modal-content {
        max-width:100%;
        max-height:95vh;
        border-radius:8px;
    }
    
    .jr-universal-comment-modal .modal-header {
        padding:16px 20px;
    }
    
    .jr-universal-comment-modal .modal-header h3 {
        font-size:18px;
    }
    
    .jr-universal-comment-modal .comment-item-title,
    .jr-universal-comment-modal .comment-item-title-fixed {
        padding:16px 20px;
        font-size:14px;
    }
    
    .jr-universal-comment-modal .comment-content-wrapper {
        padding:20px;
    }
    
    .jr-universal-comment-modal .comment-content-wrapper form {
        padding:16px;
    }
    
    .jr-universal-comment-modal .comment-success-toast {
        margin:12px 20px;
        padding:10px 16px;
    }
}

/* Scrollbar Styling */
.jr-universal-comment-modal .modal-body::-webkit-scrollbar {
    width:8px;
}

.jr-universal-comment-modal .modal-body::-webkit-scrollbar-track {
    background:rgba(0,0,0,0.2);
}

.jr-universal-comment-modal .modal-body::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.2);
    border-radius:4px;
}

.jr-universal-comment-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background:rgba(255,255,255,0.3);
}


/* modules/jrCore/contrib/fileuploader/fileuploader.css */


/* Have ideas for improving this CSS for the general community? Submit your changes at:https://github.com/Valums-File-Uploader/file-uploader */
.qq-uploader {
    position:relative;
}

.qq-upload-holder {
    display:inline-block;
}

.qq-upload-button {
    display:inline-block;
    text-align:center;
    line-height:15px;
    background:#880000;
    border-bottom:1px solid #DDDDDD;
    padding-bottom:4px;
    margin-top:-2px !important;
    color:#FFFFFF;
    white-space:nowrap;
}

.qq-upload-button-hover {
    background:#CC0000;
}

.qq-upload-button-focus {
    outline:1px dotted #000000;
}

.qq-upload-drop-area,.qq-upload-extra-drop-area {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:30px;
    z-index:2;
    background:#FF9797;
    text-align:center;
}

.qq-upload-drop-area span {
    display:block;
    position:absolute;
    top:50%;
    width:100%;
    margin-top:-8px;
    font-size:16px;
}

.qq-upload-extra-drop-area {
    position:relative;
    margin-top:50px;
    font-size:16px;
    padding-top:30px;
    height:20px;
    min-height:40px;
}

.qq-upload-drop-area-active {
    background:#FF7171;
}

.qq-upload-list {
    margin:0;
    padding:0;
    list-style:none;
}

.qq-upload-list li {
    width:100%;
    margin:6px 2px;
    padding:9px;
    line-height:15px;
    font-size:13px;
    background-color:#EEEEEE;
    color:#000000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.qq-upload-file,.qq-upload-spinner,.qq-upload-size,.qq-upload-cancel,.qq-upload-failed-text,.qq-upload-finished {
    margin-right:12px;
}

.qq-upload-file {
}

.qq-upload-spinner {
    display:inline-block;
    float:right;
    box-sizing:border-box;
    border-width:2px;
    border-style:solid;
    border-color:hsla(359,0%,0%,0.2);
    border-top-color:#000000;
    border-bottom-color:#000000;
    border-radius:50%;
    width:15px;
    height:15px;
    margin:0 auto;
    animation:spin 0.8s linear infinite;
    -webkit-animation:spin 0.8s linear infinite;
    vertical-align:text-bottom;
}

.qq-upload-finished {
    display:none;
    width:15px;
    height:15px;
    vertical-align:text-bottom;
}

.qq-upload-size,.qq-upload-cancel {
    font-size:12px;
    font-weight:normal;
}

.qq-upload-failed-text {
    display:none;
}

.qq-upload-failed-icon {
    display:none;
    width:15px;
    height:15px;
    vertical-align:text-bottom;
}

.qq-upload-fail .qq-upload-failed-text {
    display:inline;
}

.qq-upload-list li.qq-upload-success {
    margin:6px 2px;
    background-color:#CCFF99;
    color:#000000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.qq-upload-list li.qq-upload-fail {
    margin:6px 2px;
    background-color:#FFCC00;
    color:#000000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.qq-upload-delete {
    display:none;
    float:right;
}

@media handheld,only screen and (max-width:767px) {
    .qq-upload-holder {
        margin-left:6px;
    }
}


/* modules/jrCore/contrib/sweetalert/sweetalert.css */


.sweet-overlay {
    background-color:black;
    background-color:rgba(0,0,0,0.8);
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display:none;
    z-index:10000;
}

.sweet-alert {
    background-color:white;
    width:438px;
    padding:10px 20px 20px 20px;
    text-align:center;
    position:fixed;
    left:50%;
    top:40%;
    margin-left:-236px;
    margin-top:-200px;
    overflow:hidden;
    display:none;
    z-index:99999;
}

@media all and (max-width:540px) {
    .sweet-alert {
        width:auto;
        margin-left:0;
        margin-right:0;
        left:15px !important;
        right:15px;
    }
}

.sweet-alert h2 {
    color:#000000;
    font-size:24px;
    text-align:center;
    font-weight:bold;
    text-transform:capitalize;
    position:relative;
    margin:25px 0 10px 0;
    padding:0;
    line-height:40px;
    display:block;
}

.sweet-alert p {
    color:#444444;
    font-size:16px;
    font-weight:300;
    position:relative;
    text-align:inherit;
    float:none;
    margin:0;
    padding:0;
    line-height:normal;
}

.sweet-alert fieldset {
    border:none;
    position:relative;
}

.sweet-alert .sa-error-container {
    background-color:#F1F1F1;
    margin-left:-17px;
    margin-right:-17px;
    overflow:hidden;
    padding:0 10px;
    max-height:0;
}

.sweet-alert .sa-error-container.show {
    padding:10px 0;
    max-height:100px;
    webkit-transition:padding 0.2s,max-height 0.2s;
    transition:padding 0.25s,max-height 0.25s;
}

.sweet-alert .sa-error-container .icon {
    display:inline-block;
    width:24px;
    height:24px;
    border-radius:50%;
    background-color:#FF9933;
    color:white;
    line-height:24px;
    text-align:center;
    margin-right:3px;
}

.sweet-alert .sa-error-container p {
    display:inline-block;
}

.sweet-alert .sa-input-error {
    position:absolute;
    top:29px;
    right:26px;
    width:20px;
    height:20px;
    opacity:0;
}

.sweet-alert .sa-input-error::before,.sweet-alert .sa-input-error::after {
    content:"";
    width:20px;
    height:6px;
    background-color:#FF9933;
    border-radius:3px;
    position:absolute;
    top:50%;
    margin-top:-4px;
    left:50%;
    margin-left:-9px;
}

.sweet-alert .sa-input-error::before {
}

.sweet-alert .sa-input-error::after {
}

.sweet-alert .sa-input-error.show {
    opacity:1;
}

.sweet-alert input {
    width:100%;
    box-sizing:border-box;
    border-radius:3px;
    border:1px solid #D7D7D7;
    height:43px;
    margin-top:10px;
    margin-bottom:17px;
    font-size:16px;
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.06);
    padding:0 12px;
    display:none;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}

.sweet-alert input:focus {
    outline:none;
}

.sweet-alert input:focus::-moz-placeholder {
    transition:opacity 0.3s 0.03s ease;
    opacity:0.5;
}

.sweet-alert input:focus:-ms-input-placeholder {
    transition:opacity 0.3s 0.03s ease;
    opacity:0.5;
}

.sweet-alert input:focus::-webkit-input-placeholder {
    transition:opacity 0.3s 0.03s ease;
    opacity:0.5;
}

.sweet-alert input::-moz-placeholder {
    color:#BDBDBD;
}

.sweet-alert input::-ms-clear {
    display:none;
}

.sweet-alert input:-ms-input-placeholder {
    color:#BDBDBD;
}

.sweet-alert input::-webkit-input-placeholder {
    color:#BDBDBD;
}

.sweet-alert.show-input input {
    display:block;
}

.sweet-alert .sa-confirm-button-container {
    display:inline-block;
    position:relative;
}

.sweet-alert .la-ball-fall {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-27px;
    margin-top:4px;
    opacity:0;
    visibility:hidden;
}

.sweet-alert button {
    margin:0 10px;
}

.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
    padding-bottom:40px;
}

.sweet-alert .sa-icon {
    width:80px;
    height:80px;
    border:4px solid gray;
    -webkit-border-radius:40px;
    border-radius:50%;
    margin:20px auto;
    padding:0;
    position:relative;
    box-sizing:content-box;
    text-shadow:0 0 3px #000000;
}

.sweet-alert .sa-icon.sa-error {
    border-color:#FF9933;
}

.sweet-alert .sa-icon.sa-error .sa-x-mark {
    position:relative;
    display:block;
}

.sweet-alert .sa-icon.sa-error .sa-line {
    position:absolute;
    height:5px;
    width:47px;
    background-color:#FF9933;
    display:block;
    top:37px;
    border-radius:2px;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
    left:17px;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
    right:16px;
}

.sweet-alert .sa-icon.sa-warning {
    border-color:#FFCC00;
}

.sweet-alert .sa-icon.sa-warning .sa-body {
    position:absolute;
    width:5px;
    height:47px;
    left:50%;
    top:10px;
    -webkit-border-radius:2px;
    border-radius:2px;
    margin-left:-2px;
    background-color:#FFCC00;
}

.sweet-alert .sa-icon.sa-warning .sa-dot {
    position:absolute;
    width:7px;
    height:7px;
    -webkit-border-radius:50%;
    border-radius:50%;
    margin-left:-3px;
    left:50%;
    bottom:10px;
    background-color:#FFCC00;
}

.sweet-alert .sa-icon.sa-info {
    border-color:#C9DAE1;
}

.sweet-alert .sa-icon.sa-info::before {
    content:"";
    position:absolute;
    width:5px;
    height:29px;
    left:50%;
    bottom:17px;
    border-radius:2px;
    margin-left:-2px;
    background-color:#C9DAE1;
}

.sweet-alert .sa-icon.sa-info::after {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-left:-3px;
    top:19px;
    background-color:#C9DAE1;
    left:50%;
}

.sweet-alert .sa-icon.sa-success {
    border-color:#A5DC86;
}

.sweet-alert .sa-icon.sa-success::before,.sweet-alert .sa-icon.sa-success::after {
    content:'';
    -webkit-border-radius:40px;
    border-radius:50%;
    position:absolute;
    width:60px;
    height:120px;
    background:white;
}

.sweet-alert .sa-icon.sa-success::before {
    -webkit-border-radius:120px 0 0 120px;
    border-radius:120px 0 0 120px;
    top:-7px;
    left:-33px;
}

.sweet-alert .sa-icon.sa-success::after {
    -webkit-border-radius:0 120px 120px 0;
    border-radius:0 120px 120px 0;
    top:-11px;
    left:30px;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
    width:80px;
    height:80px;
    border:4px solid rgba(165,220,134,0.2);
    -webkit-border-radius:40px;
    border-radius:50%;
    box-sizing:content-box;
    position:absolute;
    left:-4px;
    top:-4px;
    z-index:2;
}

.sweet-alert .sa-icon.sa-success .sa-fix {
    width:5px;
    height:90px;
    background-color:white;
    position:absolute;
    left:28px;
    top:8px;
    z-index:1;
}

.sweet-alert .sa-icon.sa-success .sa-line {
    height:5px;
    background-color:#A5DC86;
    display:block;
    border-radius:2px;
    position:absolute;
    z-index:2;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
    width:25px;
    left:14px;
    top:46px;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
    width:47px;
    right:8px;
    top:38px;
}

.sweet-alert .sa-icon.sa-custom {
    background-size:contain;
    border-radius:0;
    border:none;
    background-position:center center;
    background-repeat:no-repeat;
}


/* modules/jrCore/contrib/livesearch/jquery.livesearch.css */


#jquery-live-search {
    background:#FFFFFF;
    padding:5px 10px;
    max-height:400px;
    overflow:auto;
    position:absolute;
    z-index:200000;
    border:1px solid #A9A9A9;
    border-width:0 1px 1px 1px;
    -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
    -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
    box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}

#jquery-live-search a {
    color:#000000;
}

/* modules/jrCore/contrib/lightbox/lightbox.css */


/* Preload images */
body:after {
    display:none;
}

.lightboxOverlay {
    position:absolute;
    top:0;
    left:0;
    z-index:999999;
    background-color:black;
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity:0.8;
    display:none;
}

.lightbox {
    position:absolute;
    left:0;
    width:100%;
    z-index:1000000;
    text-align:center;
    line-height:0;
    font-weight:normal;
}

.lightbox .lb-image {
    display:block;
    height:auto;
    max-width:inherit;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
}

.lightbox a img {
    border:none;
}

.lb-outerContainer {
    position:relative;
    background-color:#111;
    *zoom:1;
    width:250px;
    height:250px;
    margin:0 auto;
    border-radius:5px 5px 0 0;
}

.lb-outerContainer:after {
    content:"";
    display:table;
    clear:both;
}

.lb-container {
    padding:4px;
}

.lb-loader {
    position:absolute;
    top:43%;
    left:0;
    height:25%;
    width:100%;
    text-align:center;
    line-height:0;
}

.lb-cancel {
    display:block;
    width:32px;
    height:32px;
    margin:0 auto;
}

.lb-nav {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    pointer-events:none;
}

.lb-container > .nav {
    left:0;
}

.lb-nav a {
    outline:none;
}

.lb-prev,.lb-next {
    font-size:24px;
    font-weight:bold;
    color:#CCC;
    height:100%;
    cursor:pointer;
    display:block;
    vertical-align:middle;
    line-height:50px;
    text-shadow:0 1px 1px #000;
    pointer-events:all;
}

.lb-nav a.lb-prev {
    width:20%;
    left:0;
    float:left;
    padding-left:15px;
    text-align:left;
    opacity:0;
}

.lb-nav a.lb-prev div {
    position:absolute;
    top:45%;
    left:15px;
}

.lb-nav a.lb-prev:hover {
    opacity:1;
    text-decoration:none;
    color:#FFF;
}

.lb-nav a.lb-next {
    width:33%;
    right:0;
    float:right;
    text-align:right;
    padding-right:15px;
    opacity:0;
}

.lb-nav a.lb-next div {
    position:absolute;
    top:45%;
    right:15px;
}

.lb-nav a.lb-next:hover {
    opacity:1;
    text-decoration:none;
    color:#FFF;
}

.lb-dataContainer {
    background:#111;
    margin:0 auto;
    padding-top:5px;
    *zoom:1;
    width:100%;
    border-radius:0 0 5px 5px;
}

.lb-dataContainer:after {
    content:"";
    display:table;
    clear:both;
}

.lb-data {
    padding:0 4px;
    color:#CCC;
}

.lb-data .lb-details {
    padding:0 0 8px 5px;
    width:85%;
    float:left;
    text-align:left;
    line-height:1.1em;
}

.lb-data .lb-caption {
    font-size:13px;
    font-weight:bold;
    line-height:1em;
}

.lb-data .lb-number {
    display:block;
    clear:left;
    font-size:12px;
    color:#999;
}

.lb-data .lb-close {
    font-size:24px;
    color:#CCC;
    float:right;
    line-height:20px;
    text-shadow:0 1px 1px #000;
    margin-right:5px;
    padding-bottom:8px;
}

.lb-data .lb-close:hover {
    cursor:pointer;
    color:#FFF;
}

body.lb-disable-scrolling {
    overflow:hidden;
}


/* modules/jrCore/contrib/select2/css/select2.min.css */


.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);background-image:-o-linear-gradient(top,#fff 50%,#eee 100%);background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF',endColorstr='#FFEEEEEE',GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);background-image:-o-linear-gradient(top,#eee 50%,#ccc 100%);background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE',endColorstr='#FFCCCCCC',GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top,#fff 0%,#eee 50%);background-image:-o-linear-gradient(top,#fff 0%,#eee 50%);background-image:linear-gradient(to bottom,#fff 0%,#eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF',endColorstr='#FFEEEEEE',GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);background-image:-o-linear-gradient(top,#eee 50%,#fff 100%);background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE',endColorstr='#FFFFFFFF',GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}


/* modules/jrCore/css/jrCore.css */


/* Modal Window */
* {
    -webkit-font-smoothing:subpixel-antialiased;
}

/* @title Modal Overlay background */
/* @help Defines the background color used when a modal window is opened */
#simplemodal-overlay {
    background-color:#000;
    cursor:wait;
}

#modal_window {
    display:none;
    overflow:auto;
}

/* @title Modal Update Text */
/* @help Text used for individual update lines in an activity update modal window */
#modal_updates {
    color:#000;
    font-size:12px;
    font-family:monospace;
    padding:8px 16px; 
    overflow:auto;
}

#modal_indicator {
    display:none;
    float:right;
    position:relative;
    top:60px;
    right:20px;
}

.search_area_left {
    padding-bottom:12px !important;
}

.search_area_right {
    padding-bottom:12px !important;
}

.live_search_text {
    resize:none !important;
}

/* File form field */
.jrcore_file_detail {
    position:relative;
    width:76.5%;
    padding:6px 10px !important;
    margin:8px 0 12px 2px !important;
    font-size:12px !important;
    font-variant:normal !important;
    text-transform:none !important;
    border-radius:3px;
}

.jrcore_file_detail_left {
    width:2%;
    vertical-align:middle;
}

.jrcore_file_detail_right {
    width:98%;
    text-align:left;
}

.jrcore_file_title {
    width:60px;
    display:inline-block;
    text-align:right;
    text-transform:lowercase;
    font-variant:small-caps;
}

.at_link a {
    color:#009;
    text-decoration:none;
}

.at_link a:hover {
    text-decoration:underline;
}

/* Admin Menu Accordion */
.accordion {
    margin:0;
    padding-top:10px;
}

.accordion a {
    color:#000;
    text-decoration:none;
}

.accordion a:hover {
    color:#000;
    text-decoration:none;
}

dt {
    padding:12px;
    font-weight:bold;
    cursor:pointer;
}

dt a {
    color:#000;
}

dd {
    padding:3px 0;
    margin:0;
    font-size:12px;
}

#item-holder {
    margin-right:9px;
}

#item-list {
    width:100%;
    display:table;
    margin:9px 0 9px 9px;
    padding:6px;
}

.item-row {
    width:100%;
    display:table-row;
    cursor:pointer;
    height:42px;
    background:#DDD;
}

.item-row-active {
    background:#FFF;
}

.item-row:hover {
    background:#FFF;
}

.item-icon {
    display:table-cell;
    padding:3px;
}

.item-entry {
    width:100%;
    display:table-cell;
    padding:6px;
    font-size:14px;
    color:#000;
    vertical-align:middle;
}

.item-enabled {
    display:table-cell;
    padding-right:6px;
}

.item-disabled {
    display:table-cell;
    color:#000;
    background:#FC0;
    font-size:11px;
    padding:6px;
    border:1px solid #AAA;
    border-radius:4px;
}

.item-active {
    display:table-cell;
    background:#CF9;
    font-size:11px;
    padding:6px;
    border:1px solid #AAA;
    border-radius:4px;
}

#item-work {
    background:#DDD;
    max-width:100%;
}

#error_log {
    font-family:Monaco,"Lucida Console",monospace;
    width:100%;
    padding:6px;
    font-size:10px;
    overflow:auto;
}

#debug_log {
    font-family:Monaco,"Lucida Console",monospace;
    width:100%;
    padding:6px;
    font-size:10px;
    overflow:auto;
    white-space:pre;
}

.ds_browser_item {
    max-height:250px;
    overflow:scroll;
}

/* DataStore Browser */
.ds_browser_key {
    width:425px;
    display:inline-block;
    text-align:right;
    background:#EEE;
    padding:1px 3px;
    border-radius:2px;
    margin-bottom:2px;
    font-size:12px;
    font-weight:bold;
}

.ds_browser_value {
    text-align:left;
    padding-left:3px;
    word-break:break-all;
}

#ds_browser_new_key {
    width:120px;
}

/* Template Editor */
.form_editor_holder {
    text-transform:none;
    width:95%;
    z-index:25000;
    height:100%;
    padding:0;
    margin:0;
}

.form_editor_holder > div {
    min-height:170px;
}

.form_editor_full_width {
    width:100%;
    margin-top:8px;
    margin-bottom:8px;
}

.page_custom {
    max-width:1024px;
    box-sizing:border-box;
}

.form_template {
    text-transform:none;
    box-sizing:border-box;
}

.form_template_editor {
    text-transform:none;
    height:600px;
}

.php_Notice {
}

.php_Warning {
    color:#F90;
}

.php_Fatal,.php_Parse {
    color:#F00;
}

.log-inf {
    text-align:left;
    word-break:break-all;
}

.log-dbg {
    text-align:left;
    word-break:break-all;
    color:#666 !important;
}

.log-min {
    background:#FF9;
    text-align:left;
    word-break:break-all;
}

.log-maj {
    background:#F93;
    text-align:left;
    word-break:break-all;
}

.log-cri {
    background:#F63;
    text-align:left;
    word-break:break-all;
}

.style-box {
    width:80%;
    margin-bottom:6px;
    padding:6px;
    border-left-width:2px;
    border-left-style:solid;
    border-left-color:#DDD;
    font-size:12px;
    float:left;
}

.style-box-hilight {
    border-left-color:#FC0;
}

.style-reset {
    position:absolute;
    top:6px;
    right:32px;
}

.style-input {
    width:175px;
}

.style-select {
    width:185px !important;
}

.style-color {
    width:24px;
    height:16px;
    margin:0 6px;
    border:1px solid #DDD;
    cursor:pointer;
}

.style-label {
    display:inline-block;
    width:120px;
    text-align:right;
    margin:6px;
    padding:0;
}

.CodeMirror {
    background:#FFF;
    padding:6px;
    font-size:12px;
    border:solid 1px #CCC;
    overflow:auto;
}

.fullscreen {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    margin:0;
    padding:0;
    border:0;
    opacity:1;
}

#jqp {
    background:#FAFAFA;
    width:360px;
    padding:6px 2px 2px 6px;
    border:solid 1px #7F7F7F;
    border-radius:2px;
    box-shadow:5px 5px 5px rgba(0,0,0,0.3);
    z-index:10000;
}

#jqp h2 {
    margin:0 0 5px 0;
    font-size:14px;
}

#jqp ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#jqp ul:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

#jqp ul li {
    float:left;
    margin:0 5px 5px 0;
}

#jqp ul li a {
    display:block;
    width:13px;
    height:13px;
    text-decoration:none;
    text-indent:-100000px;
    outline:0;
    border:solid 1px #7F7F7F;
}

#jqp ul li a:hover {
    border-color:#000;
}

.sortable li li {
    list-style:disc;
}

.item_sortable {
    margin:auto;
    padding:0;
    list-style:none outside none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.item_sortable li {
    border:1px solid #BBB;
    list-style:none;
    cursor:move;
    padding:5px 12px 5px 12px;
    margin:5px;
    height:20px;
    font-size:14px;
    overflow:hidden;
}

li.sortable-placeholder {
    border:2px dashed #CCC;
    background:none;
    padding:5px 12px 5px 12px;
    margin:5px;
    height:18px;
}

#diff_result {
    font-family:Monaco,"Lucida Console",monospace;
    width:100%;
    font-size:11px;
    overflow:auto;
    margin:6px 0 18px 0;
}

#diff_table {
    width:100%;
    background-color:#EEE !important;
    border-collapse:collapse;
    border-spacing:1px;
    white-space:pre-line;
    border-width:1px;
    border-style:solid;
    border-color:#DDD;
}

#diff_table td {
    background:#FFF;
    padding:3px 5px;
    color:#000;
    border-bottom:1px solid #F6F6F6;
}

.diff_head {
    width:50%;
    text-align:center;
    font-weight:bold;
    font-size:12px;
    padding:6px;
}

.diff_foot {
    background-color:#EEE;
    text-align:center;
    padding:12px !important;
}

.diff_lno {
    width:3%;
    padding-right:6px !important;
    font-weight:bold;
    text-align:right;
}

.diff_none {
    background:#FFF;
}

.diff_chg {
    background:#FC0 !important;
}

.diff_new {
    background:#CF9 !important;
}

.diff_old {
    background:#CF9 !important;
}

.file_attachment_box {
    width:100%;
    display:block;
    margin-top:20px;
    font-size:13px;
    box-sizing:border-box;
}

.file_attachment {
    position:relative;
    margin-bottom:4px;
}

.file_attachment_image {
    display:inline;
}

.file_attachment_text {
    display:inline;
    margin-left:6px;
}

.fixed-width {
    font-family:monospace;
    white-space:pre-wrap;
    font-size:11px;
}

.widget-template-code {
    font-size:12px;
    padding:8px 20px 10px 20px;
}

.word-break {
    word-break:break-all;
}

.nocursor {
    cursor:unset !important;
}

/* @title Textarea Expand */
/* @help Controls the display of the small Expand arrow to the right of the textarea */
.form_textarea_expand {
    display:none;
    position:absolute;
    bottom:12px;
    margin-left:3px;
}

/* @title Birthday Field Month */
/* @help controls the MONTH selector in a Birthday form field */
.form_date_birthday_month {
    width:120px !important;
}

/* @title Birthday Field Day */
/* @help controls the DAY selector in a Birthday form field */
.form_date_birthday_day {
    width:60px !important;
}

/* @title Birthday Field Year */
/* @help controls the YEAR input field in a Birthday form field */
.form_date_birthday_year {
    width:60px !important;
    margin-left:9px;
    padding:4px 4px 3px 4px;
}

.form_daterange,.form_date,.form_date_time {
    min-width:286px;
}

.form_mobile_label {
    font-size:13px;
    text-transform:capitalize;
    margin-left:6px;
}

.sublabel {
    display:block;
}

.page-table-jumper-page {
    width:65px !important;
}

.page-table-jumper-perpage {
    width:65px !important;
}

.acp-default-img {
    padding:1px;
    margin:1px;
    border:1px solid #DDD;
}

.acp-custom-img {
    padding:1px;
    margin:1px;
    border:1px solid #DDD;
}

.module_icon {
    background-color:#F3F3F3;
    border:1px solid #DDD;
    display:block;
    border-radius:5px;
    padding:2px;
    margin:2px;
    box-shadow:inset 0 0 3px #DDD;
}

.module_icon img {
    margin:0 auto;
    vertical-align:middle;
    transform:scale(0.9);
}

#info_box .item strong {
    display:inline-block;
    width:100px;
    text-align:right;
    margin-right:8px;
    padding:2px 0;
    text-transform:capitalize;
}

.rejected_reason_delete {
    padding:0;
}

.nowrap {
    white-space:nowrap;
}

.no-text-transform {
    text-transform:none !important;
}

.form_icon_button {
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    margin:0;
    padding:0;
    cursor:pointer;
}

.form_button_icon {
    font-weight:normal;
    font-style:normal;
    font-size:20px;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
}

.form_button_menu {
    position:relative;
    display:inline-block;
    vertical-align:middle;
    white-space:nowrap;
}

.form_button_menu_button {
    float:left;
}

.form_button_menu ul {
    position:absolute;
    display:none;
    top:35px;
    left:0;
    z-index:32;
    border:1px solid #D9D9D9;
    background-color:#FFF;
    margin:0;
    padding:0;
}

.form_button_submenu {
    margin:0;
    padding:5px 10px;
    font-size:16px;
    cursor:pointer;
    list-style:none;
}

.form_button_submenu:hover {
    background-color:#FC0;
}

.form_button_menu_ul li {
    list-style:none;
}

.sprite_icon_disabled {
    cursor:not-allowed !important;
    opacity:0.3;
}

.sprite_icon_disabled:hover {
    background:inherit !important;
}

.option_img {
    display:inline-block;
    vertical-align:middle;
    border-radius:50%;
    box-shadow:inset 0 0 2px #999;
}

.fail {
    background-color:#FF7400;
}

.select2 {
    margin:0 4px;
}

.select2-select-width {
    width:76.3% !important;
}

.select2-select-and-text-width {
    width:33% !important;
}

.select2-selection--single {
    background:#FFF url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 99.5% 50%;
    height:30px !important;
    border-color:#CCC !important;
    border-radius:2px !important;
}

.select2-selection__rendered {
    font-size:15px !important;
    color:#000 !important;
    padding-left:5px !important;
    line-height:30px !important;
}

.select2-selection__arrow {
    top:2px !important;
}

.select2-dropdown {
    border-color:#CCC !important;
    border-radius:2px !important;
}

.select2-selection__arrow b {
    display:none;
}

.core-log-iframe {
    box-sizing:border-box;
    border:0;
    width:100%;
    height:270px;
}

.form_date_repeat {
    width:100%;
}

.form_select_and_text_tag {
    display:inline-block;
    min-width:72px;
    text-align:right;
}

.form_select_narrow {
    width:120px !important;
}

.svg_icon {
    display:table;
    box-sizing:border-box;
}

.svg_icon_disabled svg {
    opacity:0.2;
}

input::placeholder,select::placeholder,textarea::placeholder {
    color:#CCC;
}

#jr-ds-item-count {
    position:absolute;
    bottom:12px;
    right:12px;
    padding:10px;
    text-align:center;
    font-size:13px;
}

#jr-ds-item-count span {
    font-weight:bold;
}

.form_select_area_search {
    width:auto !important;
}

.page_tab {
    user-select:none;
}

/* modules/jrCore/css/jrCore_bbcode.css */


#bbcode_help_button {
    text-align:center;
    margin-top:-33px;
}

#bbcode_help_button input {
    float:right;
    position:relative;
    margin:0 6px 0 3px;
}

#bbcode_help {
    width:800px;
    height:600px;
}

/* Mobile */
@media handheld,only screen and (max-width:767px) {
    #bbcode_help {
        width:auto;
    }
}

.bbcode_help_section {
    width:75%;
    background:#FFF;
    border-radius:3px;
    margin-top:12px;
}

.bbcode_left {
    background:#F6F6F6;
    width:50%;
    text-align:right;
    padding:6px;
}

.bbcode_right {
    width:50%;
    padding:6px;
}

.bbcode_quote {
    width:100%;
    padding:12px;
    background-color:#EEE;
    font-size:14px;
    font-style:italic;
    box-sizing:border-box;
    word-break:break-all;
}

.bbcode_quote_user {
    font-size:16px;
    font-weight:bold;
}

.bbcode_code {
    background-color:#EEE;
    width:100%;
}

/* BBCode code syntax Highlighting */

.hljs {
    max-height:400px;
    font-family:Monaco,"Courier New",Courier,monospace;
    display:block;
    overflow:auto;
    padding:10px;
    color:black;
    -webkit-text-size-adjust:none;
    font-size:11px;
    margin:6px 0;
    border-radius:3px;
    white-space:pre-wrap;
    word-break:break-all;
}

.hljs-comment {
    color:#006A00;
}

.hljs-keyword,
.hljs-literal,
.nginx .hljs-title {
    color:#AA0D91;
}

.method,
.hljs-list .hljs-title,
.hljs-tag .hljs-title,
.setting .hljs-value,
.hljs-winutils,
.tex .hljs-command,
.http .hljs-title,
.hljs-request,
.hljs-status,
.hljs-name {
    color:#008;
}

.hljs-envvar,
.tex .hljs-special {
    color:#660;
}

.hljs-string {
    color:#C41A16;
}

.hljs-tag .hljs-value,
.hljs-cdata,
.hljs-filter .hljs-argument,
.hljs-attr_selector,
.apache .hljs-cbracket,
.hljs-date,
.hljs-regexp {
    color:#080;
}

.hljs-sub .hljs-identifier,
.hljs-pi,
.hljs-tag,
.hljs-tag .hljs-keyword,
.hljs-decorator,
.ini .hljs-title,
.hljs-shebang,
.hljs-prompt,
.hljs-hexcolor,
.hljs-rule .hljs-value,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-number,
.css .hljs-function,
.hljs-function .hljs-title,
.coffeescript .hljs-attribute {
    color:#1C00CF;
}

.hljs-class .hljs-title,
.smalltalk .hljs-class,
.hljs-type,
.hljs-typename,
.hljs-tag .hljs-attribute,
.hljs-doctype,
.hljs-class .hljs-id,
.hljs-built_in,
.setting,
.hljs-params,
.clojure .hljs-attribute {
    color:#5C2699;
}

.hljs-variable {
    color:#3F6E74;
}

.css .hljs-tag,
.hljs-rule .hljs-property,
.hljs-pseudo,
.hljs-subst {
    color:#000;
}

.css .hljs-class,
.css .hljs-id {
    color:#9B703F;
}

.hljs-value .hljs-important {
    color:#F70;
    font-weight:bold;
}

.hljs-rule .hljs-keyword {
    color:#C5AF75;
}

.hljs-annotation,
.apache .hljs-sqbracket,
.nginx .hljs-built_in {
    color:#9B859D;
}

.hljs-preprocessor,
.hljs-preprocessor *,
.hljs-pragma {
    color:#643820;
}

.tex .hljs-formula {
    background-color:#EEE;
    font-style:italic;
}

.diff .hljs-header,
.hljs-chunk {
    color:#808080;
    font-weight:bold;
}

.diff .hljs-change {
    background-color:#BCCFF9;
}

.hljs-addition {
    background-color:#BAEEBA;
}

.hljs-deletion {
    background-color:#FFC8BD;
}

.hljs-comment .hljs-doctag {
    font-weight:bold;
}

.method .hljs-id {
    color:#000;
}

/* modules/jrCore/css/jrCore_tinymce.css */


/* @title TinyMCE Editor Body */
/* @help Controls the height of the TinyMCE editor */
#form-editor-body {
    height:100%;
}

.mce-fullscreen {
    z-index:10000 !important;
}

#mce-modal-block.mce-in {
    background:#000;
    opacity:0.8 !important;
}


/* modules/jrCore/css/jrCore_dashboard.css */


.bigtable {
    background:#FFF !important;
}

.bigtable th {
    position:relative;
}

/* @title Dashboard Panel Box */
/* @help When viewing the dashboard this controls the box the numbers appear in */
.bignum {
    background:#333;
    text-align:center;
    font-size:42px !important;
    line-height:42px;
    padding:12px !important;
    height:64px;
    -moz-box-shadow:inset 0 0 8px #000;
    -webkit-box-shadow:inset 0 0 8px #000;
    box-shadow:inset 0 0 8px #000;
    cursor:pointer;
}

/* @title Panel Color 1 */
/* @help Controls the font color for the first column in the dashboard */
.bignum1,.bignum1 a {
    color:#FC0 !important;
}

/* @title Panel Color 2 */
/* @help Controls the font color for the second column in the dashboard */
.bignum2,.bignum2 a {
    color:#F93 !important;
}

/* @title Panel Color 3 */
/* @help Controls the font color for the third column in the dashboard */
.bignum3,.bignum3 a {
    color:#6C6 !important;
}

/* @title Panel Color 4 */
/* @help Controls the font color for the fourth column in the dashboard */
.bignum4,.bignum4 a {
    color:#09F !important;
}

/* @title Panel Color 5 */
/* @help Controls the font color for the fifth column in the dashboard */
.bignum5,.bignum5 a {
    color:#3CC !important;
}

.bignum span {
    display:block;
    font-size:11px !important;
    line-height:13px;
    padding:0;
    margin:8px 0 0 0;
}

.bignum_stat_cell {
    position:relative;
}

.bignum_stat {
    position:absolute;
    top:0;
    right:0;
}

.bigsystem {
    text-align:left;
}

.bigsystem-inf {
    color:#FFF !important;
}

.bigsystem-min {
    background-color:#FC0 !important;
    color:#000 !important;
}

.bigsystem-maj {
    background-color:#F90 !important;
    color:#000 !important;
}

.bigsystem-cri {
    background-color:#F60 !important;
    color:#000 !important;
}

.page_table_fullscreen {
    height:100vh;
    width:100vw;
}

.page_table_fullscreen .bignum span {
    margin-top:30px;
    font-size:15px !important;
}

.page_table_fullscreen .page_table_header {
    height:4vh;
    font-size:24px;
}

.page_table_fullscreen .bignum_stat a {
    display:none;
}

.bigtable_r1.page_table_fullscreen .bignum {
    height:92vh;
    font-size:112px !important;
}

.bigtable_r2.page_table_fullscreen .bignum {
    height:42vh;
    font-size:96px !important;
}

.bigtable_r3.page_table_fullscreen .bignum {
    height:24vh;
    font-size:82px !important;
}

.bigtable_r4.page_table_fullscreen .bignum {
    height:17vh;
    font-size:72px !important;
}

.bigtable_r5.page_table_fullscreen .bignum {
    height:12vh;
    font-size:56px !important;
}


/* modules/jrCore/css/jrCore_mobile_override.css */


@media handheld,only screen and (max-width:767px) {

    .bignum {
        font-size:28px !important;
    }

    .page_table_mobile_container {
        box-sizing:border-box;
        max-width:100vw;
    }

    .page_table_cell_mobile_left {
        width:20%;
        text-align:right !important;
    }

    .page_table_cell_mobile_left input {
        display:none;
    }

    .page_table_cell_mobile_right {
        width:80%;
        text-align:left !important;
    }

    .page_table_cell_mobile_right input[type="button"] {
        box-sizing:border-box;
        width:98%;
    }

    .page_banner_right input,.page_banner_right select {
        float:right;
        clear:both;
        margin:10px;
    }

    .form_daterange,.form_date,.form_date_time {
        min-width:unset;
    }

    .form_editor_holder {
        overflow:unset !important;
    }

    .lb-nav a.lb-next,.lb-nav a.lb-prev {
        opacity:1 !important;
    }

}

/* modules/jrCustomForm/css/jrCustomForm.css */


.form_name_button input {
    text-transform:none !important;
}

.custom-form-embed-width {
    width:95% !important;
}

.form_browser_key {
    width:125px;
    font-weight:bold;
}


/* modules/jrDocs/css/jrDocs.css */


.doc_indent_1 {
    display:inline-block;
    margin:3px 0 3px 0;
}

.doc_indent_2 {
    display:inline-block;
    margin:2px 0 1px 25px;
}

.doc_indent_3 {
    display:inline-block;
    margin:1px 0 0 50px;
}

.doc_content {
    background-color:#FFF;
}

.new_section_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#EEE;
    border:1px solid #DDD;
    border-radius:3px;
    padding:12px;
    display:none;
    z-index:10000;
    overflow:visible;
}

.new_section_button {
    float:right;
    padding:3px 6px;
    text-align:center;
    width:110px;
    font-size:12px;
    opacity:0.2;
    text-transform:capitalize;
    margin-right:12px !important;
}

.new_section_button:hover {
    opacity:1;
}

.new_section_button a {
    text-decoration:none;
}

.new_section_button a:hover {
    text-decoration:none;
}

.section_type {
    display:inline-block;
    padding:1px;
}

.doc_toc {
    background:#FFF;
    margin:12px;
    padding:12px;
    border:1px solid #DDD;
    border-radius:3px;
    color:#000;
}

.doc_toc span {
    display:inline-block;
    margin-left:12px;
    margin-top:5px;
    font-size:14px;
    text-transform:capitalize;
}

.doc_toc a {
    cursor:pointer;
    color:#000;
}

.doc_toc a:hover {
    text-decoration:underline;
}

.doc_toc_list {
    list-style:none outside none;
    margin:0;
    padding:0 10px;
}

.doc_chapter_list {
    font-size:18px;
}

.doc_pager_box {
    margin:0 12px;
}

.doc_pager {
    display:table;
    width:100%;
    background:#FFF;
    font-size:14px;
}

.doc_pager a {
    color:#000;
}

.doc_pager_cell {
    display:table-cell;
    padding:18px 6px;
}

.section_actions {
    position:absolute;
    top:12px;
    right:12px;
    display:none;
}

.section_title {
    display:block;
    margin-bottom:12px;
}

.section_title h2 {
    text-transform:capitalize;
}

.section_text {
    position:relative;
    clear:both;
    overflow:visible;
    font-size:14px;
    padding:16px;
    margin-bottom:12px;
    color:#000;
}

.section_text a {
    text-decoration:underline;
}

.section_warning {
    background:#FFE680;
    color:#000;
    border-radius:3px;
    font-size:14px;
    margin:12px;
    padding:24px;
}

.section_warning a {
    text-decoration:underline;
}

.section_warning div {
    vertical-align:middle;
}

.section_hint {
    background:#EAF6FF;
    border-radius:3px;
    color:#000;
    font-size:14px;
    margin:12px;
    padding:24px;
}

.section_hint a {
    text-decoration:underline;
}

.section_code {
    background:#FFF;
    color:#000;
    padding:0;
    margin:12px 12px 32px 12px;
}

.section_code pre {
    max-width:100%;
    margin:2px;
    padding:2px;
}

.section_caption {
    margin-top:6px;
    display:block;
    font-style:italic;
    font-size:14px;
}

.section_caption a {
    text-decoration:underline;
}

.section_file {
    background-color:#FFF;
    border-radius:3px;
    margin-bottom:12px;
}

.section_function {
    border:2px solid #EEE;
    margin-bottom:0;
    display:table;
    font-size:14px;
    border-radius:3px;
}

.section_header_cell {
    background:#EEE;
    display:table-cell;
    padding:6px 12px;
    font-size:12px;
    text-transform:uppercase;
}

.section_function_cell {
    background:#FFF;
    display:table-cell;
    padding:9px 12px;
    border-bottom:1px solid #EEE;
}

.doc_param_table .form_text {
    width:90%;
}

.section_function_title {
    background:#EAF6FF;
    padding:12px;
    font-size:16px;
    font-family:monospace;
    margin-bottom:0;
    border:2px solid #EEE;
}

.section_function_name {
    background:#EEE;
    padding:12px;
    margin-bottom:0;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}

.section_function_name h2 {
    text-transform:none;
}

.section_function_desc {
    font-size:14px;
    background:#EEE;
    padding:18px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

.doc_function_name {
    display:inline-block;
}

.doc_param_required,
.doc_param {
    display:inline-block;
    margin:3px 0 3px 32px;
}

.section_text pre {
    max-width:100%;
    margin:2px;
    padding:2px;
    background-color:#FFF;
}

.toc_chapter {
    display:inline-block;
    margin:12px 0 0 0;
}

.toc_indent_1 {
    display:inline-block;
    margin:0 0 0 26px;
    font-size:1.2em;
}

.toc_indent_2 {
    display:inline-block;
    margin:0 0 0 52px;
}

.toc_indent_3 {
    display:inline-block;
    margin:2px 0 2px 72px;
    font-weight:normal;
}

ul.ui-sortable .section_text li {
    list-style:disc;
}

.docs_related {
    background-color:#F3F3F3;
    padding:0 2px;
    margin:0 -2px;
    border-radius:3px;
    cursor:pointer;
}

.section_warning .docs_related {
    background-color:#FFE674 !important;
}

.docs_related:hover {
    background:#FFD87C;
}

.doc_tag_options {
    position:absolute;
    top:-5px;
    left:100%;
    min-width:300px;
    padding:10px;
    z-index:150000;
}

.doc_tag_link {
    padding-right:50px;
    white-space:nowrap;
}

.doc_tag_inner {
    background-color:#F3F3F3;
    border-radius:5px;
    border:2px solid #4F6390;
    padding:10px;
}

.doc_pdf {
    float:right;
}

/* modules/jrEmailCourse/css/jrEmailCourse.css */


.jremailcourse .page_table_row.highlight,
.jremailcourse .page_table_row_alt.highlight {
    background-color:#1D9B1D;
}

/* modules/jrEmbed/css/jrEmbed.css */


.mce-floatpanel {
    z-index:500000 !important;
}

/* modules/jrEvent/css/jrEvent.css */


.attendee {
    vertical-align:middle;
}

.nonattendee {
    vertical-align:middle;
}


/* modules/jrEvent/css/calendar.css */


#jrEvent_calendar .php-calendar a:hover {
    opacity:.7;
    filter:Alpha(Opacity=70);
}

#jrEvent_calendar .ecal-container {
    min-width:50%;
}

/* @title Calendar Background Color */
/* @help this is background color for the calendar */
#jrEvent_calendar table.ecal-main {
    width:100%;
    background-color:#FFF;
    table-layout:fixed;
}

#jrEvent_calendar div.ecal-main {
    padding:0;
}

#jrEvent_calendar .ecal-main div {
    padding-left:.5em;
    padding-right:.5em;
}

#jrEvent_calendar .ecal-event-header {
    padding:.5em;
}

#jrEvent_calendar col.ecal-week {
    width:3%;
}

#jrEvent_calendar col.ecal-day {
    width:14%;
}

#jrEvent_calendar .ecal-calendar td,
#jrEvent_calendar .ecal-calendar th {
    border-collapse:collapse;
    vertical-align:text-top;
}

#jrEvent_calendar .ecal-calendar th {
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_date.png") repeat-x scroll 50% 50% #CCC;
    border:1px solid #AAA;
    color:#222;
    font-weight:bold;
}

#jrEvent_calendar .ecal-calendar td {
    padding:0;
    text-align:left;
    height:100px;
}

#jrEvent_calendar .ecal-calendar li {
    margin:4px;
}

#jrEvent_calendar .ecal-main ul {
    list-style-type:none;
    padding:0;
}

#jrEvent_calendar .ecal-calendar li a {
    font-weight:normal !important;
    display:block;
    padding:2px;
    text-decoration:none;
}

#jrEvent_calendar .ecal-date {
    padding:5px 3px;
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_day.png") repeat-x scroll 50% 50% #E6E6E6;
    border:1px solid #D3D3D3;
    color:#555;
    font-weight:normal;
}

#jrEvent_calendar .ecal-today {
    background-image:url("http://mediaistream.com/image/img/module/jrEvent/bg_today.png") !important;
    background-repeat:repeat-x;
    background-position:50% 50%;
    background-color:#FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

#jrEvent_calendar .ecal-shadow {
    opacity:.5;
    filter:Alpha(Opacity=5);
}

#jrEvent_calendar .ecal-event-list li a {
    display:block;
    padding:2px;
    text-decoration:none;
    border-radius:3px;
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_event_item.png") repeat-x scroll 50% 50% #E6E6E6;
    border:1px solid #D3D3D3;
    color:#555;
    font-weight:normal;
    font-family:Verdana,Arial,sans-serif;
    font-size:1.1em;
    overflow:hidden;
}

#jrEvent_calendar .ecal-even-row {
    background:#FFF;
    background-image:none;
}

#jrEvent_calendar .ecal-today .center {
    font-size:0.9em;
    font-weight:bold;
}



/* modules/jrEvent/css/small_calendar.css */


#jrEvent_small_calendar .php-calendar a:hover {
    opacity:.7;
    filter:Alpha(Opacity=70);
}

#jrEvent_small_calendar .ecal-container {
    min-width:50%;
}

#jrEvent_small_calendar table.ecal-main {
    width:100%;
    background-color:#FFF;
}

#jrEvent_small_calendar div.ecal-main {
    padding:0;
}

#jrEvent_small_calendar .ecal-main div {
    padding-left:.5em;
    padding-right:.5em;
}

#jrEvent_small_calendar .ecal-event-header {
    padding:.5em;
}

#jrEvent_small_calendar col.ecal-week {
    width:3%;
}

#jrEvent_small_calendar col.ecal-day {
    width:14%;
}

#jrEvent_small_calendar .ecal-calendar td,
#jrEvent_small_calendar .ecal-calendar th {
    text-align:center;
    border-collapse:collapse;
    vertical-align:text-top;
}

#jrEvent_small_calendar .ecal-calendar th {
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_date.png") repeat-x scroll 50% 50% #CCC;
    border:1px solid #AAA;
    color:#222;
    font-weight:bold;
}

#jrEvent_small_calendar .ecal-calendar td {
    padding:0;
    text-align:center;
}

#jrEvent_small_calendar .ecal-calendar li {
    margin:4px;
}

#jrEvent_small_calendar .ecal-main ul {
    list-style-type:none;
    padding:0;
}

#jrEvent_small_calendar .ecal-calendar li a {
    font-weight:normal !important;
    display:block;
    padding:2px;
    text-decoration:none;
}

#jrEvent_small_calendar .ecal-date {
    padding:5px 3px;
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_day.png") repeat-x scroll 50% 50% #E6E6E6;
    border:1px solid #D3D3D3;
    color:#555;
    font-weight:normal;
}

#jrEvent_small_calendar .has_events {
    background-image:none;
    background-color:#CEFCB1;
    border:1px solid #B1FC9F;
    color:#363636;
}

#jrEvent_small_calendar .ecal-today {
    background:url("http://mediaistream.com/image/img/module/jrEvent/bg_today.png") repeat-x scroll 50% 50% #FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

#jrEvent_small_calendar .ecal-shadow {
    opacity:.5;
    filter:Alpha(Opacity=5);
}

#jrEvent_small_calendar .has_events a {
    display:block;
    font-weight:bold;
}



/* modules/jrFAQ/css/jrFAQ.css */


.nested_list.item_sortable li {
    height:auto;
    overflow:auto;
}

/* modules/jrFollower/css/jrFollower.css */


.follow_button {
    color:#484848;
    text-decoration:none;
    text-transform:capitalize;
    font-weight:bold;
    font-size:14px;
    height:32px;
    padding:0 12px;
    margin:0 2px;
    border-radius:5px;
    vertical-align:middle;
    border:solid 1px #7F7F7F;
}

.follow {
    cursor:pointer;
    background:#FD0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddffaa',endColorstr='#bbee88'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#DFA),to(#BE8)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#DFA,#BE8); /* for firefox 3.6+ */
}

.following {
    cursor:pointer;
    background:#CF9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddffaa',endColorstr='#bbee88'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#DFA),to(#BE8)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#DFA,#BE8); /* for firefox 3.6+ */
}

.follow_pending {
    background:#ADF;
    color:#000;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbeeff',endColorstr='#99ccee'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#BEF),to(#9CE)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#BEF,#9CE); /* for firefox 3.6+ */
}

#follow_indicator {
    display:none;
}

.follower_action {
    position:absolute;
    bottom:28px;
    left:10px;
}

.follower_status {
    position:absolute;
    bottom:28px;
    right:10px;
}


/* modules/jrForum/css/jrForum.css */


#forum_success {
    background-color:#CF9;
    color:#000;
    padding:6px;
    padding-left:12px;
    border-radius:5px;
    border:1px solid #CCC;
    margin:12px;
}

#forum_notice {
    background-color:#FC0;
    color:#000;
    padding:6px;
    padding-left:12px;
    border-radius:5px;
    border:1px solid #CCC;
    margin-bottom:6px;
}

.forum_post_image {
    display:table-cell;
    width:10%;
    padding:6px;
    vertical-align:top;
    text-align:center;
    word-wrap:break-word;
}

.forum_post_text {
    display:table-cell;
    width:90%;
    padding:6px 12px;
    vertical-align:top;
    overflow:auto;
}

.forum_post_count {
    background:#FFF;
    text-align:right;
    float:right;
    font-size:14px;
    border-radius:4px;
    padding:6px 6px 6px 9px;
    margin-right:6px;
}

.forum_post_count_new {
    background-color:#FFF2BF;
    border-color:#FC0;
}

.forum_post_pinned {
    border-style:dotted;
    border-width:2px;
}

.forum_new_post_form {
    font-size:16px;
}

.forum_actions {
    position:absolute;
    top:12px;
    right:12px;
    display:none;
}

.forum_locked {
    margin:12px 0;
    background-color:#FC0;
    border:1px solid #CCC;
    border-radius:4px;
    padding:12px
}

.forum_post_attachment {
    margin:20px 0;
    background-color:#CF9;
    border:1px solid #CCC;
    border-radius:4px;
    padding:6px
}

.forum_follow_box {
    position:inherit;
    width:300px;
    text-align:center;
    background-color:#EEE;
    border:1px solid #999;
    border-radius:5px;
    padding:12px;
    z-index:100;
    overflow:visible;
    box-shadow:0 0 3px #000;
}

.forum_signature {
    display:inline-block;
    color:#999;
    margin-bottom:6px;
}

.forum_signature a {
    color:#999;
}

.forum_signature .bbcode_url {
    color:#999 !important;
}

#forum_solution_box {
    position:inherit;
    width:340px;
    text-align:left;
    background-color:#EEE;
    border:1px solid #999;
    border-radius:5px;
    padding:12px;
    display:none;
    z-index:100;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCC;
}

.section_solution {
    background-color:#FFF;
    width:300px;
    border-radius:5px;
    display:inline-block;
    padding:2px 6px;
    margin:2px 0;
    font-size:18px;
    line-height:18px;
    font-weight:bold;
    cursor:pointer;
}

.section_solution_detail {
    border-radius:5px;
    padding:0 6px;
    margin-bottom:6px;
}

.section_solution_list {
    border-radius:3px;
    display:inline-block;
    padding:2px 6px;
    font-size:12px;
    line-height:12px;
}

.forum_upload_button {
    position:absolute;
    right:100px;
    top:0;
    padding:6px 0 0 0;
    line-height:27px;
}

.forum_upload_button input {
    font-size:16px !important;
}

.jrforum_upload_attachment {
    margin-top:-32px;
    text-align:right;
    width:94%;
}

.jrforum_upload_attachment li.qq-upload-success {
    text-align:left;
}

.jrforum_upload_attachment .qq-uploader {
    float:right;
}

.small_follow_container span {
    margin-top:-3px;
}


/* modules/jrGallery/css/jrGallery.css */


/* Jamroom Gallery Module CSS */
.jr_gallery_row a {
    text-decoration:none;
}

.jr_gallery_row a:hover {
    text-decoration:none;
}

.img-profile {
    position:relative;
}

.gallery_actions {
    position:absolute;
    top:10px;
    right:12px;
    display:none;
}

.gallery_img {
    width:100%;
    margin:0;
    padding:0;
}

.gallery_rating {
    max-width:80px;
    padding-top:4px;
    margin:0 auto;
}

.gallery_lightbox {
    float:left;
    padding-top:12px;
}

.gallery_lightbox a {
    text-decoration:none;
}

.gallery_lightbox a:hover {
    text-decoration:none;
}

.gallery_view_all {
    float:right;
    padding-top:12px;
}

.gallery_view_all a {
    text-decoration:none;
}

.gallery_view_all a:hover {
    text-decoration:none;
}

#gallery_slider_box {
    padding:12px 0 0 0;
    padding-left:16px;
}

#gallery_slider {
}

.gallery_slider_prev {
    float:left;
    margin-right:8px;
    padding-top:14px;
}

.gallery_slider_next {
    float:left;
    margin-left:4px;
    padding-top:14px;
}

.gallery_slider_img {
    float:left;
    margin-right:4px;
}

.gallery_slider_img img {
    border:1px solid #DDDDDD;
}

.gallery_slider_img img:hover {
    border:1px solid #FFCC00 !important;
}

.jrgallery_update_div {
    display:inline-block;
    vertical-align:top;
    padding:12px;
    margin:6px 12px 6px 3px;
    border:1px solid #EEEEEE;
    text-align:center;
}

.jrgallery_update_div:hover {
    background-color:#EEEEEE;
}

.jrgallery_update_image {
    margin:1px 1px 6px 1px;
}

.jrgallery_update_button {
    font-size:10px;
    width:60px;
    margin:2px;
}

.jrgallery_update_button:hover {
    cursor:pointer;
}

@media handheld,only screen and (max-width:767px) {
    .jr_gallery_row {
        width:90%;
    }
}

.jrgallery_image_grid {
    float:left;
    display:inline-block;
    text-align:center;
    width:24%;
    margin:6px 0;
}

#gallery-edit-image {
    max-width:300px;
}

#gallery-save-image {
    display:none;
    width:75%;
    padding:12px;
    margin-bottom:12px;
    color:#000000;
    border-radius:3px;
}

.gallery_image_info {
    text-align:left;
    font-size:0.8em;
}

.gallery_search_found {
    background-color:#FFDD00;
}

.gallery_no_title {
    opacity:0.5;
}

.gallery_filename {
    opacity:0.8;
}

#gallery_title_modal {
    width:440px;
    box-sizing:border-box;
    position:relative;
}

.gallery_update_title,
.gallery_filename {
    display:inline-block;
    max-width:120px;
    overflow:hidden;
    white-space:nowrap;
}

.jrgallery_scroll_box{
    max-height:500px;
    overflow:scroll
}

.gallery_pending_image {
    float:left;
    margin-right:6px;
    vertical-align:middle;
}

/* modules/jrGeo/css/jrGeo.css */


/* Jamroom Geo Location Module CSS */

/* @title Modal Search Update */
/* @help Shows to the user when the search conditions are being updated */
#geo-zip-modal {
    background:#FFF;
    color:#000;
    width:250px;
    height:auto;
    padding:20px;
    border-radius:5px;
    text-align:center;
}

/* @title ZIP Code field */
/* @help This is the ZIP code field on the ZIP code search results page */
#zip-code-input {
    width:30%;
}

/* @title ZIP Radius field */
/* @help This is the ZIP code radius field on the ZIP code search results page */
#zip-code-radius {
    width:25%;
}


/* modules/jrGraph/css/jrGraph.css */


.graph-legend {
    margin:-20px 20px 20px 52px;
}

.graph-legend .legendColorBox {
    width:1%;
}

.graph-legend .legendColorBox > div {
    border-width:0 !important;
    padding:0;
}

.graph-legend .legendLabel {
    width:99%;
    text-align:left;
    padding-left:8px;
}

#graph-modal-container .page_content {
    padding:10px;
}

#graph-modal-container .form_submit_section {
    border-bottom:0 !important;
}

.graph-xyval {
    display:inline-block;
    margin-right:6px;
}

.graph-selector {
    display:inline-block;
    width:100px !important;
}

/* modules/jrGroup/css/jrGroup.css */


#group_button {
    font-size:12px;
    cursor:pointer;
    height:auto;
    padding:0 12px;
    margin:0 2px;
    vertical-align:middle;
}

.group_join {
    background:#FFDD00;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddffaa',endColorstr='#bbee88'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#DDFFAA),to(#BBEE88)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#DDFFAA,#BBEE88); /* for firefox 3.6+ */
}

.group_cancel {
    background:#CCFF99;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddffaa',endColorstr='#bbee88'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#DDFFAA),to(#BBEE88)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#DDFFAA,#BBEE88); /* for firefox 3.6+ */
}

.group_pending {
    background:#AADDFF;
    color:#000000;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbeeff',endColorstr='#99ccee'); /* for IE */
    background:-webkit-gradient(linear,left top,left bottom,from(#BBEEFF),to(#99CCEE)); /* for webkit browsers */
    background:-moz-linear-gradient(top,#BBEEFF,#99CCEE); /* for firefox 3.6+ */
}

.img-0 {
    float:left;
    border:3px solid #FFCC00;
    margin:2px 1px;
}

.img-1 {
    float:left;
    border:3px solid transparent;
    margin:2px 1px;
}

.img-member-list {
    margin:12px 32px 3px 32px;
}


/* modules/jrGroupDiscuss/css/jrGroupDiscuss.css */


/* @title Follow Discussion box */
/* @help Controls the drop down box when "Follow Discussion is clicked */
.discussion_follow_box {
    position:inherit;
    width:340px;
    text-align:left;
    background-color:#EEEEEE;
    border:1px solid #999999;
    border-radius:3px;
    padding:12px;
    z-index:100000;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCCCCC;
}

/* modules/jrImage/css/jrImage.css */


.image_delete {
    position:absolute;
    top:3px;
    right:3px;
}

.image_delete_mobile_label {
    font-size:13px;
    text-transform:capitalize;
    margin-left:5px;
}

.image_delete a {
    text-decoration:none;
}

.image_update_display {
    display:inline-block;
    position:relative;
    margin:3px 0;
}

.form_image_right_container {
    display:block;
}

/* modules/jrLike/css/jrLike.css */


.like_button_box {
    display:inline;
}

.like_button_img {
    vertical-align:middle;
}

.like_count {
    display:inline;
    margin-left:3px;
    font-size:12px;
}

.dislike_button_box {
    display:inline;
}

.dislike_button_img {
    vertical-align:middle;
}

.dislike_count {
    display:inline;
    margin-left:3px;
    font-size:12px;
}

.likers_box {
    position:relative;
    display:none;
    width:558px !important;
    height:320px !important;
    padding-top:0;
    margin:0;
    z-index:10000;
}

.liker_list {
    font-size:12px;
}


/* modules/jrMailer/css/jrMailer.css */


#cp-display-area {
    overflow-x:hidden;
    overflow-y:scroll;
}

/* modules/jrMarket/css/jrMarket.css */


.market_status_section {
    height:18px;
    display:inline-block;
    vertical-align:middle;
    background:#EEE;
    border-radius:3px;
    margin:6px 0 0 0;
    text-align:center;
    color:#000;
}

.market_status_section_stable {
    background:#CF9;
}

.market_status_section_beta {
    background:#FD0;
}

.market_status_section_text {
    text-transform:uppercase;
    position:relative;
    left:2px;
    padding:0 16px;
    color:#000;
    font-size:12px;
}

.changelog {
    width:100%;
    font-size:12px;
    white-space:pre-wrap;
    word-wrap:break-word;
}

.market_jumper {
    width:250px !important;
}

.market-description {
    font-size:12px;
}

.market-version {
    height:14px !important;
    padding:2px 5px 0 5px;
    font-size:10px;
    margin-bottom:6px;
    white-space:nowrap;
}

.market-requires {
    font-size:11px;
}

.changelog_div {
    background-color:#FFF;
    font-family:monospace;
    white-space:pre-wrap
}


/* modules/jrNewsLetter/css/jrNewsLetter.css */


#jrnewsletter-recipients {
    width:73.3%;
    margin-left:4px;
    padding:5px 10px;
    border-radius:3px;
}

#jrnewsletter-recipients #r_count {
    display:inline-block;
    margin:6px 0 0 5px;
    font-size:18px;
    vertical-align:middle;
}

#jrnewsletter-recipients #r_indicator_holder {
    display:inline-block;
    vertical-align:middle;
    margin-top:6px;
}

#jrnewsletter-recipients input {
    float:right;
    vertical-align:middle;
}

#jrnewsletter-filter-recipients {
    width:450px;
    height:500px;
    overflow:auto;
    padding:10px;
}

#filter_view {
    display:none;
}


/* modules/jrOneAll/css/jrOneAll.css */


/* @title Timeline Networks Box */
/* @help Box that holds the Share with Networks entries in Timeline form */
#oneall_timeline_networks {
    display:inline-block;
    width:100%;
    text-align:right;
    padding:0 12px 12px 0;
    font-size:13px;
    box-sizing:border-box;
    text-transform:capitalize;
}

/* @title Timeline Networks Images */
/* @help Images in Share with Networks box */
#oneall_timeline_networks img {
    vertical-align:middle;
    margin:0 3px;
}

/* modules/jrPage/css/jrPage.css */


/* Jamroom Page Module CSS */

/* @title Page Body */
/* @help Defines the font size for the main page body content */
.jrpage_body {
    font-size:16px;
}

.jrpage_body p {
    padding:3px 12px;
}

.page_actions {
    position:absolute;
    top:12px;
    right:12px;
    display:none;
}


/* modules/jrPayPal/css/jrPayPal.css */


/* @title Buy Now Box */
/* @help The price and buy now icon box */
.paypal_buy_now_section {
    display:inline-block;
    background-color:#EEEEEE;
    padding:1px;
}

.paypal_buy_now_section a:hover {
    text-decoration:none !important;
}

/* @title Buy Now Price */
/* @help The price section in the Buy Now Box */
.paypal_buy_now_price {
    position:relative;
    top:2px;
    left:2px;
    padding:0 2px 0 10px;
    padding-top:4px;
    color:#000000;
    font-size:1.2em;
}


/* modules/jrPayment/css/jrPayment.css */


#cart-modal {
    width:100%;
    max-width:700px;
    height:auto;
}

#cart-holder {
    width:100%;
    max-width:680px;
    height:auto;
    display:inline-block;
    background:#DDD;
    padding:10px;
    border-radius:5px;
    z-index:1000;
    overflow:auto;
}

#cart-holder .page_table {
    margin-bottom:0;
}

.cart-section {
    display:inline-block;
    background:#EEE;
    border-radius:3px;
    box-shadow:inset 0 0 2px rgba(0,0,0,.5);
}

.cart-qty {
    text-align:center;
    width:25px;
    padding:0;
    margin:0;
}

.cart-shipping {
    font-size:9px;
}

.cart-price {
    position:relative;
    top:2px;
    left:2px;
    padding:0 10px;
    padding-top:4px;
    color:#000;
    font-size:16px;
    line-height:16px;
}

.cart-icon {
    margin:0;
    padding:0;
    cursor:pointer;
}

.cart-remove-button {
    font-size:11px !important;
    padding:0 5px !important;
}

.payment-icon {
    border:0;
    border-radius:0;
    margin:0 auto;
    padding:0;
}

#payment-view-cart-button {
    padding:0;
    margin:0;
    white-space:nowrap;
}

.payment-checkout-cell span {
    font-size:10px;
    font-weight:bold;
}

.payment-checkout-cell img {
    height:32px;
    cursor:pointer;
}

/* Mobile */
@media handheld,only screen and (max-width:801px) {
    #cart-modal {
        width:100%;
        max-width:300px;
        height:auto;
        margin:0 auto;
    }

    #cart-holder {
        width:100%;
        max-width:280px;
        height:auto;
        margin:0 auto;
    }

    #payment-view-cart-button {
        padding:0;
        margin:0;
    }

}

/* modules/jrPhotoAlbum/css/jrPhotoAlbum.css */


/* Jamroom PhotoAlbum Module CSS */

.photoalbum_lightbox {
    float:left;
    padding-top:12px;
}

.photoalbum_lightbox a {
    text-decoration:none;
}

.photoalbum_lightbox a:hover {
    text-decoration:none;
}

.photoalbum_actions {
    position:absolute;
    top:15px;
    right:18px;
    display:none;
}

.photoalbum_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#EEEEEE;
    border:1px solid #999999;
    border-radius:5px;
    padding:12px;
    display:none;
    z-index:1000001;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCCCCC;
}

.photoalbum_name {
    padding:5px;
}

.photoalbum_name a {
    width:80%;
    text-decoration:underline;
}

.photoalbum_count {
    width:10%;
    white-space:nowrap;
    font-size:10px;
    padding:5px;
}

.photoalbum_button {
    width:70px;
}

.photoalbum_success {
    border-radius:5px;
    background-color:#CCFF99;
    color:#000000;
}

.photoalbum_error {
    border-radius:5px;
    background-color:#FFDD00;
    color:#000000;
}

#photoalbum_close,
#photoalbum_prev,
#photoalbum_next {
    cursor:pointer;
}

@media handheld,only screen and (max-width:767px) {
    .photoalbum_box {
        position:absolute;
        width:80%;
        right:0;
    }

    .photoalbum_button {
        width:50px;
    }

    .photoalbum_name {
        font-size:12px;
    }
}


/* modules/jrPoll/css/jquery.countdown.css */


/* jQuery Countdown styles 2.0.0. */
.is-countdown {
}

.countdown-rtl {
    direction:rtl;
}

.countdown-holding span {
    color:#888888;
}

.countdown-row {
    clear:both;
    width:100%;
    padding:0 2px;
    text-align:center;
}

.countdown-show1 .countdown-section {
    width:98%;
}

.countdown-show2 .countdown-section {
    width:48%;
}

.countdown-show3 .countdown-section {
    width:32.5%;
}

.countdown-show4 .countdown-section {
    width:24.5%;
}

.countdown-show5 .countdown-section {
    width:19.5%;
}

.countdown-show6 .countdown-section {
    width:16.25%;
}

.countdown-show7 .countdown-section {
    width:14%;
}

.countdown-section {
    margin-top:6px;
    display:block;
    float:left;
    font-size:75%;
    font-weight:normal;
    text-align:center;
}

.countdown-amount {
    font-size:100%;
}

.countdown-period {
    display:block;
}

.countdown-descr {
    display:block;
    width:100%;
}


/* modules/jrPoll/css/jrPoll.css */


#poll_error {
    display:none;
    background-color:#FFCC00 !important;
    padding:6px 12px;
    margin-top:6px;
    border-radius:3px;
    font-size:14px;
}

.poll_countdown {
    float:left;
    min-width:250px;
    text-align:center;
    padding:10px 20px 20px 0;
}

.poll_option_update {
    display:inline-block;
    width:99%;
    text-align:center;
    font-weight:bold;
}

.poll_status {
    float:right;
    position:relative;
    cursor:pointer;
}

.poll_open {
    display:inline-block;
    text-align:center;
    padding:8px 12px;
    margin:0;
    border-radius:3px;
    font-size:14px;
    font-weight:bold;
}

.poll_pending {
    display:inline-block;
    text-align:center;
    padding:8px 12px;
    margin:0;
    border-radius:3px;
    font-size:14px;
    font-weight:bold;
}

.poll_closed {
    display:inline-block;
    text-align:center;
    padding:8px 12px;
    margin:0;
    border-radius:3px;
    font-size:14px;
    font-weight:bold;
}

.poll_voted {
    display:inline-block;
    padding:8px 12px;
    margin:0;
    border-radius:3px;
    font-size:14px;
    color:#000000;
}

.poll_winner {
    background-color:#FFFFFF !important;
}

.poll_vote_count {
    font-weight:bold;
    font-size:14px;
}


/* modules/jrPrivateNote/css/jrPrivateNote.css */


/* @title Note Detail Text */
/* @help Controls the individual note reply sections when viewing a Private Note */
.note_text {
    font-size:13px;
    padding:16px;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:#EEEEEE;
}


/* modules/jrProduct/css/jrProduct.css */


.product-tracking-cell {
    position:relative;
}

/* @title Product Carrier */
/* @help The small carrier text shown below the Tracking ID button */
.product-carrier {
    position:absolute;
    bottom:5px;
    left:0;
    right:0;
    font-size:11px;
}


/* modules/jrProfile/css/jrProfile.css */


/* @title Your Profiles Grid */
/* @help Controls the Your Profiles page from the User Menu */
.profile_grid {
    text-align:center;
}

.profile_grid .item {
    display:inline-block;
}

.profile_grid img {
    width:185px;
    height:185px;
}

/* modules/jrRating/css/jrRating.css */


/* Large Rating */
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating {
    background:url('http://mediaistream.com/image/img/module/jrRating/rating_back_16.png') left 0 repeat-x;
}

@media screen and (-webkit-min-device-pixel-ratio:2),screen and (-o-min-device-pixel-ratio:3/2),screen and (min--moz-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2) {
    .star-rating,
    .star-rating a:hover,
    .star-rating a:active,
    .star-rating a:focus,
    .star-rating .current-rating {
        background:url('http://mediaistream.com/image/img/module/jrRating/rating_back_32.png') left 0 repeat-x;
        background-size:16px 48px;
    }
}

.star-rating {
    position:relative;
    width:80px;
    height:16px;
    overflow:hidden;
    list-style:none;
    margin:0;
    padding:0;
    background-position:left top;
}

.star-rating li {
    display:inline;
}

.star-rating a,
.star-rating .current-rating {
    position:absolute;
    top:0;
    left:0;
    height:16px;
    line-height:16px;
    outline:none;
    overflow:hidden;
    border:none;
}

.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus {
    background-position:left bottom;
}

.star-rating a.star1-rating {
    width:20%;
    z-index:6;
}

.star-rating a.star2-rating {
    width:40%;
    z-index:5;
}

.star-rating a.star3-rating {
    width:60%;
    z-index:4;
}

.star-rating a.star4-rating {
    width:80%;
    z-index:3;
}

.star-rating a.star5-rating {
    width:100%;
    z-index:2;
}

.star-rating .current-rating {
    z-index:1;
    background-position:left center;
}



/* modules/jrSearch/css/jrSearch.css */


/* @title Search Text Block */
/* @help Controls the block holding the search field on module index */
.block_search {
    float:right;
    white-space:nowrap;
    text-align:right;
    width:50%;
}

/* @title Search Text Input */
/* @help Format for Text Input search element on module indexes */
.form_text_search {
    width:50%;
}

.jrsearch_reorder_item {
    text-transform:capitalize;
}

#ff-row-display_order .form_button {
    margin-top:4px;
}

/* modules/jrShareThis/css/universal_share_modal.css */


/**
 * Universal Share Modal CSS
 * Works with any Jamroom module and skin
 * 
 * @copyright 2026 The Jamroom Network
 */

/* Modal Overlay */
.jr-universal-share-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    animation:fadeIn 0.2s ease-in;
}

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

/* Modal Content */
.jr-universal-share-modal .modal-content {
    background:#1a1a1a;
    border-radius:12px;
    width:90%;
    max-width:600px;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
}

/* Modal Header */
.jr-universal-share-modal .modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.jr-universal-share-modal .modal-header h3 {
    margin:0;
    color:#fff;
    font-size:24px;
    font-weight:700;
}

.jr-universal-share-modal .close-btn {
    background:none;
    border:none;
    color:#888;
    font-size:32px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s;
}

.jr-universal-share-modal .close-btn:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

/* Modal Body */
.jr-universal-share-modal .modal-body {
    padding:0;
}

/* Timeline Share Section */
.jr-universal-share-modal .timeline-share-section {
    padding:24px;
    background:rgba(0,100,160,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.jr-universal-share-modal .section-title {
    font-size:16px;
    font-weight:700;
    color:#fff;
    margin:0 0 16px 0;
}

.jr-universal-share-modal .timeline-form-container {
    width:100%;
}

.jr-universal-share-modal #universal-share-text {
    width:100%;
    min-height:80px;
    padding:12px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    resize:vertical;
    transition:all 0.2s;
}

.jr-universal-share-modal #universal-share-text:focus {
    outline:none;
    border-color:#0064a0;
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 0 3px rgba(0,100,160,0.1);
}

.jr-universal-share-modal .form-actions {
    margin-top:12px;
    display:flex;
    justify-content:flex-end;
}

.jr-universal-share-modal .form-actions .form_button {
    background:linear-gradient(135deg,#0064a0 0%,#0078c0 100%);
    color:white;
    border:none;
    padding:10px 24px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

.jr-universal-share-modal .form-actions .form_button:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,100,160,0.4);
}

.jr-universal-share-modal .form-actions .form_button:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* Share Divider */
.jr-universal-share-modal .share-divider {
    padding:20px 24px;
    text-align:center;
    position:relative;
    background:#1a1a1a;
}

.jr-universal-share-modal .share-divider span {
    color:#888;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    background:#1a1a1a;
    padding:0 12px;
    position:relative;
    z-index:1;
}

.jr-universal-share-modal .share-divider::before {
    content:'';
    position:absolute;
    top:50%;
    left:24px;
    right:24px;
    height:1px;
    background:rgba(255,255,255,0.1);
    transform:translateY(-50%);
}

/* Social Share Section */
.jr-universal-share-modal .social-share-section {
    padding:24px;
}

.jr-universal-share-modal .share-options {
    display:flex;
    gap:16px;
    justify-content:center;
}

.jr-universal-share-modal .share-option {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:24px 32px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    transition:all 0.2s;
    min-width:120px;
}

.jr-universal-share-modal .share-option:hover {
    background:rgba(0,100,160,0.2);
    border-color:rgba(0,100,160,0.4);
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(0,0,0,0.3);
}

.jr-universal-share-modal .share-option svg {
    width:32px;
    height:32px;
    color:#0064a0;
}

.jr-universal-share-modal .share-option span {
    font-size:14px;
    font-weight:600;
}

/* Success Message */
.jr-universal-share-modal .share-success-message {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    text-align:center;
    animation:successFadeIn 0.3s ease-in;
}

@keyframes successFadeIn {
    from {
        opacity:0;
        transform:scale(0.9);
    }
    to {
        opacity:1;
        transform:scale(1);
    }
}

.jr-universal-share-modal .share-success-message svg {
    margin-bottom:20px;
    animation:successCheckmark 0.5s ease-in-out;
}

@keyframes successCheckmark {
    0% {
        transform:scale(0);
        opacity:0;
    }
    50% {
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
        opacity:1;
    }
}

.jr-universal-share-modal .share-success-message h3 {
    font-size:24px;
    font-weight:700;
    color:#1DB954;
    margin:0 0 8px 0;
}

.jr-universal-share-modal .share-success-message p {
    font-size:14px;
    color:#aaa;
    margin:0;
}

/* Mobile Responsive */
@media (max-width:768px) {
    .jr-universal-share-modal .modal-content {
        width:95%;
        max-height:90vh;
        overflow-y:auto;
    }
    
    .jr-universal-share-modal .timeline-share-section {
        padding:16px;
    }
    
    .jr-universal-share-modal .share-divider {
        padding:16px;
    }
    
    .jr-universal-share-modal .social-share-section {
        padding:16px;
    }
    
    .jr-universal-share-modal .share-options {
        flex-direction:column;
    }
    
    .jr-universal-share-modal .share-option {
        flex-direction:row;
        justify-content:flex-start;
        padding:16px 20px;
        width:100%;
    }
    
    .jr-universal-share-modal .share-option svg {
        width:24px;
        height:24px;
    }
}


/* modules/jrSiteBuilder/css/jrSiteBuilder.css */


.sb-button {
    width:120px;
    text-align:center;
    display:block; 
    padding:6px 12px;
    position:fixed;
    border:1px solid #000000;
    border-radius:3px;
    background-color:#FFCC00;
    color:#000000;
    font-size:15px;
    cursor:pointer;
    z-index:600;
}

.sb-button:hover {
    background:#EEEEEE;
    color:#000000;
}

#sb-edit-button {
    bottom:36px;
    left:36px;
}

#sb-close-button {
    bottom:36px;
    left:36px;
}

#sb-edit-layout {
    bottom:76px;
    left:36px;
}

#sb-page-delete {
    bottom:116px;
    left:36px;
}

#sb-edit-menu {
    bottom:156px;
    left:36px;
}

#sb-doc-menu {
    bottom:196px;
    left:36px;
}

#sb-edit-cp {
    background:#FFFFFF;
    margin:0 auto;
    display:none; 
    padding:12px;
    width:1140px;
    height:600px;
    border-radius:3px;
    overflow-x:hidden;
    overflow-y:auto;
}

#sb-widget-work {
    overflow-y:auto;
    overflow-x:hidden;
}

#sb-widget-work .form_template {
    max-width:839px;
}

#sb-widget-settings {
    display:none; 
}

#sb-layout-section {
    display:none; 
    margin-bottom:12px;
}

.sb-accordion {
    margin:0 12px 0 0;
}

.sb-accordion a {
    color:#000000;
    text-decoration:none;
}

.sb-accordion a:hover {
    color:#000000;
    text-decoration:none;
}

/* @title Widget Container */
/* @help Controls the padding and margin for the Widget Containers */
.sb-widget-col {
    position:relative; 
    padding:6px;
    margin:0;
}

.sb-container-controls {
    position:absolute;
    top:12px;
    right:18px;
}

.sb-widget-new {
    display:none; 
}

.sb-widget-block {
    min-height:50px;
    position:relative;
}

.sb-widget-block-edit {
    padding:6px !important;
}

/* @title Widget Item */
/* @help This class is applied to the holder for each widget in a container */
.sb-widget-content {
    padding:0;
    margin:0;
}

.sb-widget-controls {
    position:absolute;
    top:12px;
    right:12px;
    text-align:right;
    z-index:1000;
}

.sb-widget-controls small {
    display:inline-block; 
    margin-top:2px;
    font-size:11px;
    color:#333333;
}

.sb-widget-hilight {
    border:1px dashed #CCCCCC;
    border-radius:2px;
    margin:5px !important;
    padding:6px 6px 44px 6px;
}

.sb-item-row {
    width:100%;
    display:table-row; 
    cursor:pointer;
    height:34px;
    background:#EEEEEE;
}

.sb-item-row-active.sb-item-row-default,
.sb-item-row-active {
    background:#FFCC00;
}

.sb-item-row-default {
    background:#CCCCCC;
}

.sb-item-row:hover {
    background:#FFCC00;
}

.sb-item-icon {
    display:table-cell; 
    padding:3px;
}

.sb-item-entry {
    width:100%;
    display:table-cell; 
    padding:3px;
    font-size:14px;
    color:#000000;
    vertical-align:middle;
}

.first-col,.second-col,.third-col {
    position:relative;
    font-size:18px;
    font-weight:bold;
}

.sb-cell-widget {
    float:left;
    position:absolute;
    top:6px;
    left:9px;
    font-size:8px;
    font-weight:normal;
    text-transform:uppercase;
    color:#999999;
}

.new-cell {
    background:#D5EFFF;
    margin:3px;
    padding:6px;
    border:1px solid #DDDDDD;
    border-radius:3px;
}

#eventslider {
    margin:25px 30px 6px 30px;
}

#layout-row {
    margin:6px 30px 25px 30px;
}

.saved-row {
    margin:3px 30px 3px 30px;
}

#saved-rows {
    margin-top:16px;
}

.sb-row-button {
    margin:0 auto;
    padding:6px 3px;
    background:#EEEEEE;
    border:1px solid #DDDDDD;
    border-radius:3px;
    font-size:16px;
    text-align:center;
    cursor:pointer;
}

.sb-row-button:hover {
    background:#FFCC00;
}

.col0 {
    display:none; 
}

.sb-menu-entry {
    padding:0 6px;
}

.sb-menu-text a {
    text-decoration:none;
}

.sb-menu-text-new {
    margin:0;
    color:#666666;
    font-size:13px;
    border:0;
    cursor:pointer;
}

.sb-new-click {
    padding:0;
    margin:0;
    text-decoration:none;
}

.sb-menu-delete {
    position:absolute;
    top:0;
    right:3px;
    display:inline-block; 
}

.sb-menu-indent-0 {
    box-sizing:border-box;
    padding:6px;
    font-size:15px;
    width:100%;
    margin-left:0;
}

.sb-menu-indent-1 {
    box-sizing:border-box;
    padding:4px;
    font-size:14px;
    width:90%;
    margin:3px 0 3px 9px;
}

.sb-menu-indent-2 {
    box-sizing:border-box;
    padding:2px;
    font-size:13px;
    width:80%;
    margin:3px 0 3px 18px;
}

.sb-menu-new-indent-0 {
    margin:0 0 3px 9px;
}

.sb-menu-new-indent-1 {
    margin:0 0 3px 18px;
}

.sb-menu-new-indent-2 {
    margin:0 0 3px 27px;
}

.menu-col1 {
    background:#EEEEEE;
    border:1px solid #EEEEEE;
}

.menu-col2 {
    background:#F9F9F9;
    border:1px solid #EEEEEE;
}

.sb-top-menu-entry {
}

.sb-menu-entry {
    background:#EEEEEE;
    padding:6px 9px;
    font-size:15px;
    color:#000000;
    vertical-align:middle;
    margin-top:3px;
    border-radius:2px;
    text-transform:capitalize;
    cursor:move;
}

.sb-menu-entry a {
    cursor:pointer;
}

#sb-new-entry {
    width:85%;
    margin:0;
}

.sb-menu-entry button {
    float:right;
    margin:0;
}

.sb-menu-entry-active {
    background:#FFCC00;
}

.sb-menu-expand-icon {
    display:inline; 
    margin-right:4px;
}

.sb-menu-noexpand {
    display:inline; 
    width:20px;
}

.sb-menu-delete-icon {
    position:absolute;
    right:6px;
    top:6px;
}

.sb-menu-add-button {
    position:absolute;
    right:6px;
    top:6px;
}

.sb-menu-text {
    width:100%;
    box-sizing:border-box;
    border:0;
    border-radius:2px;
    background-color:#FFFFFF;
    padding:3px 6px;
    color:#000000;
}

#menu-entry-holder {
    overflow:auto;
}

.connectedSortable {
    list-style:outside none none;
    min-height:20px;
    padding:0;
    overflow:auto;
}

.sb-add-widget-btn {
    font-size:11px;
    position:absolute;
    right:12px;
    bottom:12px;
}

.sb-mod-container-btn {
    font-size:11px;
    position:absolute;
    left:12px;
    bottom:12px;
}

.sb-container-tabs {
    padding:32px 12px 0 12px;
    margin-bottom:-12px
}

.sb-widget-type-info {
    opacity:0.2;
}

/* browser page icon */
.sb_page_icon {
    width:150px;
    padding:0 0 2px 0;
    margin:0;
    background-color:#E6E6E6;
}

.sb_page_icon-row {
    margin:2px;
}

.sb_page_icon-cell {
    font-size:10px;
    border:1px solid #AAAAAA;
    padding:2px 0;
    margin:1px;
}

#sb-json-message {
    margin:0 4px;
}

/* notifications from web sockets */
.menu_0_link .notifications {
    background:#f8f494 none repeat scroll 0 0;
    border:1px solid #000000;
    border-radius:5px;
    color:#000000;
    opacity:1;
    padding:0 5px;
    position:absolute;
    right:0;
    text-shadow:none;
    top:0;
    transition:opacity 0.3s linear 0s;
}

.menu_0_link .notifications.none {
    opacity:0;
}

/* button audio players in a widget item list =  no disc */
ul.sb-widget-sortable .widget-item .sc_button_player li,
ul.sb-widget-sortable .widget-item .button_player li
{
    list-style:none;
}

/* html content in a widget with a list,show disk */
ul.sb-widget-sortable .widget-item ul li {
    list-style:disc;
}

ul.sb-widget-sortable .qq-upload-list li {
    list-style:none;
}

#menu_editor li {
    list-style:none;
}
#sb-menu-options-form .hljs {
    max-width:none;
}

/* modules/jrSiteBuilder/css/jquery.nouislider.css */



/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
-webkit-touch-callout:none;
-webkit-user-select:none;
-ms-touch-action:none;
-ms-user-select:none;
-moz-user-select:none;
-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.noUi-base {
	width:100%;
	height:100%;
	position:relative;
}
.noUi-origin {
	position:absolute;
	right:0;
	top:0;
	left:0;
	bottom:0;
}
.noUi-handle {
	position:relative;
	z-index:1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
   its values is > 50%. */
	z-index:10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7,which incorrectly
   creates a new context for the origins. */
	*z-index:-1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition:left 0.3s,top 0.3s;
	transition:left 0.3s,top 0.3s;
}
.noUi-state-drag * {
	cursor:inherit !important;
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
	height:18px;
}
.noUi-horizontal .noUi-handle {
	width:34px;
	height:28px;
	left:-17px;
	top:-6px;
}
.noUi-horizontal.noUi-extended {
	padding:0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin  {
	right:-15px;
}
.noUi-vertical {
	width:18px;
}
.noUi-vertical .noUi-handle {
	width:28px;
	height:34px;
	left:-6px;
	top:-17px;
}
.noUi-vertical.noUi-extended {
	padding:15px 0;
}
.noUi-vertical.noUi-extended .noUi-origin  {
	bottom:-15px;
}

/* Styling;
 */
.noUi-background {
	background:#FAFAFA;
	box-shadow:inset 0 1px 1px #f0f0f0;
}
.noUi-connect {
	background:#EEEEEE;
	box-shadow:inset 0 0 3px rgba(51,51,51,0.45);
    -webkit-transition:background 450ms;
	transition:background 450ms;
}
.noUi-origin {
	border-radius:2px;
}
.noUi-target {
	border-radius:4px;
	border:1px solid #D3D3D3;
	box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB;
}
.noUi-target.noUi-connect {
	box-shadow:inset 0 0 3px rgba(51,51,51,0.45),0 3px 6px -5px #BBB;
}

/* Handles and cursors;
 */
.noUi-dragable {
	cursor:w-resize;
}
.noUi-vertical .noUi-dragable {
	cursor:n-resize;
}
.noUi-handle {
	border:1px solid #D9D9D9;
	border-radius:3px;
	background:#FFF;
	cursor:col-resize;
	box-shadow:inset 0 0 1px #FFF,
				inset 0 1px 7px #EBEBEB,
				0 3px 6px -3px #BBB;
}
.noUi-active {
	box-shadow:inset 0 0 1px #FFF,
				inset 0 1px 7px #DDD,
				0 3px 6px -3px #BBB;
}

/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
	content:"";
	display:block;
	position:absolute;
	height:14px;
	width:1px;
	background:#E8E7E6;
	left:14px;
	top:6px;
}
.noUi-handle:after {
	left:17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
	width:14px;
	height:1px;
	left:6px;
	top:14px;
}
.noUi-vertical .noUi-handle:after {
	top:17px;
}

/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
	background:#B8B8B8;
}
[disabled] .noUi-handle {
	cursor:not-allowed;
}


/* modules/jrSmiley/css/jrSmiley.css */


#jrchat_smiley_drawer {
    height:auto;
    position:fixed;
    z-index:99;
    color:#000000;
    background:#FFFFFF;
    display:flex;
    justify-content:center;
    border-radius:5px 5px 0 0;
    right:10px;
    overflow:auto;
    margin:0 auto;
    padding-bottom:8px;
    box-shadow:inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

#jrsmiley-container {
    width:100%;
    padding:10px;
}

#jrsmiley-image-box {
    padding:10px;
    text-align:center;
}

#jrchat_smiley_button {
    position:absolute;
    right:40px;
}

#jrsmiley-category-box {
    width:100%;
    margin-top:10px;
}

.jrsmiley-categories {
    margin:0 auto;
}

.jrsmiley-categories ul {
    margin:0 auto;
    padding:0;
}

.jrsmiley-category {
    background:#EEEEEE;
    color:#000000;
    text-transform:capitalize;
    display:block;
    float:left;
    padding:3px;
    border-radius:3px;
    font-size:13px;
    width:48%;
    margin:3px;
    text-align:center;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    cursor:pointer;
}

.jrsmiley-category a {
    color:#000000;
}

.jrsmiley-category a:hover {
    color:#000000;
}

.smiley_set_bar li.active,
.smiley_set_bar li a:hover {
    color:#FFFFFF;
    background:transparent url("http://mediaistream.com/modules/jrSmiley/img/over.jpg") no-repeat top right;
}

.smiley_icon {
    display:none;
}

.jrsmiley_set_icon img {
    margin:0 1px 3px 1px;
}

.jrsmiley_category {
    background:#999999;
}

.jrsmiley-sets img {
    margin:0 3px 4px 0;
}



/* modules/jrSubscribe/css/jrSubscribe.css */


/* @title Subscription Plan Box */
/* @help The div that holds each subscription plan */
.sub-plan-box {
    min-height:335px;
    padding:8px;
    margin:5px 20px 20px 5px;
    border:1px solid #EDEDED;
    border-radius:8px;
    box-shadow:0 0 2px 0 #000;
}

/* @title Subscription Plan Box Header */
/* @help The header class inside each subscription plan box*/
.sub-header {
    background-color:#EDEDED;
    text-align:center;
    padding:10px;
    font-size:12px;
    font-weight:500;
    text-transform:capitalize;
    white-space:nowrap;
    color:#000;
}

/* @title Subscription Header H2 */
/* @help The subscription header H2 element */
.sub-header h2 {
    color:#000;
}

/* @title Subscription Plan Features */
/* @help The div that holds the features for each subscription plan */
.sub-features {
    font-size:13px;
    padding:10px;
    font-variant:small-caps;
}

.sub-features ul {
    list-style:circle inside url('http://mediaistream.com/image/img/module/jrSubscribe/checkmark_green.png');
    font-variant:normal;
}

.sub-features ul li {
    font-size:14px;
    padding:5px;
    margin-left:-40px;
}

.sub-features li:nth-child(odd) {
    background-color:#EDEDED;
    box-shadow:0 0 1px #999;
    padding:5px;
    color:#000;
}

/* @title Subscription Plan Price */
/* @help The div that holds the price for each subscription plan */
.sub-price {
    text-align:center;
    font-size:13px;
    padding:10px;
}

/* @title Subscription Plan Price H4 */
/* @help The H4 element for the subscription price */
.sub-price h4 {
    font-size:14px;
    font-weight:bold;
}

#sub-price-modal {
    width:300px;
    height:80px;
}

#sub-price-message {
    display:inline-block;
    margin:0 0 10px 5px;
}

#sub-price-text {
    width:150px;
}

@media handheld,only screen and (max-width:767px) {

    .subscription-header h2 {
        font-size:18px;
    }

}



/* modules/jrSupport/css/jrSupport.css */


.jrsupport-entry {
    padding:10px;
    display:table-cell
}

.jrsupport-entry a:hover {
    text-decoration:none !important;
}

.form_button_support {
    width:150px;
}


/* modules/jrTags/css/jrTags.css */


.tag_name_box {
    float:left;
    width:unset;
    background-color:#FFF;
    border-width:1px;
    border-color:#999;
    border-style:solid;
    border-radius:5px;
    padding:3px 6px 6px 6px;
    margin:6px 6px 0 0;
    font-size:12px;
    text-transform:uppercase;
}

.tag_name_box a {
    text-decoration:none;
}

.tag_name_box:hover {
    background-color:#EEE;
}

#tag_holder {
    position:relative;
    margin:0 auto;
    text-align:center;
}

#tag_form_box {
    padding:12px 0 0 3px;
}

#tag_text {
    margin:0;
    width:200px;
}

#tag_submit {
    margin-top:0;
}

#tag_cloud {
    background-color:#DDD;
    color:#000;
    border-radius:5px 5px 0 0; 
}

#tag_cloud:hover {
    background-color:#444;
    color:#FFF;
}

#tag_cloud_button a {
    text-decoration:none;
}

#profile_tag_cloud {
    display:inline-block;
}

.tag_name_box_small {
    float:left;
    background-color:#FFF;
    border-width:1px;
    border-color:#999;
    border-style:solid;
    border-radius:4px;
    padding:2px 5px 2px 5px;
    margin:4px 4px 0 0;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-family:monospace;
}

/* tags hidden by default */
.row_tag_list {
    display:none;
}

.tagit li.tag {
    background:#DDD;
    border:0;
    border-radius:4px;
    padding:3px 6px;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
}

li.tagit-edit-handle {
    width:100%;
}

li input.no-style {
    width:100%;
}

.tagit-edit-handle .no-style {
    font-family:inherit;
}

#tag_message {
    padding:5px 10px;
    display:none;
    border-radius:5px;
}

/* modules/jrTags/contrib/jqcloud/jqcloud.css */


/* fonts */

div.jqcloud {
  font-family:inherit;
  font-size:12px;
  line-height:normal;
}

div.jqcloud a {
  font-size:inherit;
  text-decoration:none;
}

div.jqcloud span.w10 { font-size:550%; }
div.jqcloud span.w9 { font-size:500%; }
div.jqcloud span.w8 { font-size:450%; }
div.jqcloud span.w7 { font-size:400%; }
div.jqcloud span.w6 { font-size:350%; }
div.jqcloud span.w5 { font-size:300%; }
div.jqcloud span.w4 { font-size:250%; }
div.jqcloud span.w3 { font-size:200%; }
div.jqcloud span.w2 { font-size:150%; }
div.jqcloud span.w1 { font-size:100%; }

/* colors */

div.jqcloud { color:#09f; }
div.jqcloud a { color:inherit; }
div.jqcloud a:hover { color:#0df; }
div.jqcloud a:hover { color:#0cf; }
div.jqcloud span.w10 { color:#0cf; }
div.jqcloud span.w9 { color:#0cf; }
div.jqcloud span.w8 { color:#0cf; }
div.jqcloud span.w7 { color:#39d; }
div.jqcloud span.w6 { color:#90c5f0; }
div.jqcloud span.w5 { color:#90a0dd; }
div.jqcloud span.w4 { color:#90c5f0; }
div.jqcloud span.w3 { color:#a0ddff; }
div.jqcloud span.w2 { color:#99ccee; }
div.jqcloud span.w1 { color:#aab5f0; }

/* layout */

div.jqcloud {
  overflow:hidden;
  position:relative;
}

div.jqcloud span { padding:0; }



/* modules/jrTicket/css/jrTicket.css */


.ticket_user_cell {
    padding:16px !important;
    vertical-align:top;
    text-align:center !important;
    word-break:break-all;
}

.ticket_byline {
    font-size:11px;
}

.page_table_row.ticket_status_change,
.page_table_row_alt.ticket_status_change {
    background-color:#EEE;
}

.page_table_row.ticket_status_change .page_table_cell,
.page_table_row_alt.ticket_status_change .page_table_cell {
    font-size:12px;
}

.ticket_update_cell {
    padding:16px !important;
    vertical-align:top;
    font-size:14px !important;
    word-break:break-word;
}

.ticket_text {
    min-width:100%;
    max-width:1100px;
    overflow:auto;
}

.ticket_previous_text {
    background:#EEE;
    border-radius:5px;
    padding:10px;
}

.ticket_update_cell a {
    text-decoration:underline;
}

.ticket_attachment:first-of-type {
    margin-top:30px;
    border-top:1px solid #EEE;
}

.ticket_attachment {
    color:#000;
    padding:10px 0 0 0;
    font-size:13px;
}

.ticket_attachment img {
    margin-right:10px;
}

.ticket_high_priority {
    background-color:#FFE680 !important;
}

.ticket_delete_btn {
    text-align:right;
}

.ticket_follow_box {
    position:inherit;
    width:340px;
    text-align:left;
    background-color:#EEE;
    border:1px solid #999;
    border-radius:5px;
    padding:12px;
    z-index:100;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCC;
}

#ticket_follow_button {
    text-decoration:none;
}

.ticket-browse-icons {
    float:right;
}

.ticket-browse-icons .sprite_icon {
    background:transparent !important;
    border:0;
    cursor:default;
    margin-left:4px;
}

.ticket-browse-icons .sprite_icon:hover {
    background:transparent !important;
    border:0;
    cursor:default;
}

.page_banner_right .sprite_icon {
    margin-left:3px;
}

#ticket-divider {
    display:inline-block;
    margin:0 6px 0 9px;
}

.ticket-slim-header {
    height:0 !important;
    padding:0 !important;
}

.ticket_issue_tracker_notice {
    text-align:left;
}

#ticket_tracker_modal {
    width:auto;
    box-sizing:border-box;
    position:relative;
}

#ticket-tpl-delete {
    display:none;
}

#move-mailboxes {
    width:300px;
    display:none;
    box-sizing:border-box;
    position:relative;
    text-align:center;
}

#move-mailboxes-title {
    display:inline-block;
    margin-bottom:10px;
}

.mailbox-move-button {
    display:inline-block;
    width:80%;
    margin-bottom:10px;
}

@media handheld,only screen and (max-width:767px) {
    .ticket_user_cell {
        padding:2px !important;
    }
}

#ticket_note_box {
    width:750px;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
}

#ticket_note_box .page_content {
    padding:10px;
}

#ticket-notes-modal {
    padding:20px;
}

#ticket-existing-notes {
    padding:10px 5px;
}

.ticket-note-user {
    width:10%;
    padding:0 5px 10px 5px;
    display:table-cell;
    vertical-align:top;
}

.ticket-note-text {
    width:90%;
    display:table-cell;
    vertical-align:top;
    padding:0 0 20px 10px;
}

.ticket-note-sub-text {
    display:inline-block;
    font-size:11px;
    margin-bottom:10px;
}

.ticket-note-user-img {
    width:72px;
}

#ticket-notes-close {
    position:absolute;
    bottom:20px;
    right:20px;
}

#ticket-select-owner {
    background:#EEE;
    width:350px;
    height:auto;
    padding-top:10px;
    border-radius:5px;
}

.ticket-owner-row {
    padding:5px;
    margin:0 10px;
}

.ticket-owner-row img {
    vertical-align:middle;
}

.ticket-owner-row input {
    display:inline-block;
    vertical-align:middle;
    margin-left:5px;
    padding:5px 8px;
}

.ticket-block-sender {
    margin-top:8px;
}

#ticket-note-text {
    box-sizing:border-box;
    height:64px;
    width:100%;
    margin:0;
}

#ticket_follow_drop {
    text-align:center;
    width:220px;
}

.ticket-dbg td {
    background:#E6FFCD;
    border-top:2px solid #CF9;
    border-bottom:2px solid #CF9;
}

.ticket-dbg td:first-child {
    border:2px solid #CF9;
    border-right:0;
    border-radius:5px 0 0 5px;
}

.ticket-dbg td:last-child {
    border:2px solid #CF9;
    border-left:0;
    border-radius:0 5px 5px 0;
}

.ticket-min td {
    background:#FF9;
    border-top:2px solid #D9D982;
    border-bottom:2px solid #D9D982;
}

.ticket-min td:first-child {
    border:2px solid #D9D982;
    border-right:0;
    border-radius:5px 0 0 5px;
}

.ticket-min td:last-child {
    border:2px solid #D9D982;
    border-left:0;
    border-radius:0 5px 5px 0;
}

.ticket-maj td {
    background:#F93;
    border-top:2px solid #D9822B;
    border-bottom:2px solid #D9822B;
}

.ticket-maj td:first-child {
    border:2px solid #D9822B;
    border-right:0;
    border-radius:5px 0 0 5px;
}

.ticket-maj td:last-child {
    border:2px solid #D9822B;
    border-left:0;
    border-radius:0 5px 5px 0;
}

.ticket-cri td {
    background:#F63;
    border-top:2px solid #D9572B;
    border-bottom:2px solid #D9572B;
}

.ticket-cri td:first-child {
    border:2px solid #D9572B;
    border-right:0;
    border-radius:5px 0 0 5px;
}

.ticket-cri td:last-child {
    border:2px solid #D9572B;
    border-left:0;
    border-radius:0 5px 5px 0;
}

#ticket_status_select,
#ticket_staff_select {
    width:140px;
}

.ticket_status_section {
    background:unset !important;
    width:126px !important;
    padding:3px !important;
    margin:0 !important;
    text-align:center;
    font-size:13px !important;
    color:#000;
    border:1px solid #EEE;
    cursor:pointer;
}

.ticket_status_section_open {
    background-color:#FFF !important;
    border-color:#DDD !important;
}

.ticket_status_section_waiting_for_reply {
    background-color:#F93 !important;
    border-color:#D9822B !important;
}

.ticket_status_section_testing {
    background-color:#ADF !important;
    border-color:#91BCD9 !important;
}

.ticket_status_section_followup {
    background-color:#FD0 !important;
    border-color:#D9BC00 !important;
}

.ticket_status_section_needs_call {
    background-color:#DDAFF8 !important;
    border-color:#BC95D3 !important;
}

.ticket_status_section_closed {
    background-color:#EEE !important;
    border-color:#DDD !important;
}

#ticket_status_default_selector_closed {
    height:22px;
    padding:10px 20px 0 20px;
}

.ticket-tag {
    word-break:normal;
    white-space:nowrap;
    width:unset;
    background:#FFF;
    color:#000;
    border:1px solid #DDD;
    border-radius:5px;
    padding:1px 3px 0 3px;
    margin:0 1px 0 0;
    font-size:8px;
    text-transform:uppercase;
    float:left;
}

.ticket-tag a {
    color:#000 !important;
}

.ticket-action-table {
    background-color:transparent !important;
    border-spacing:0 !important;
    margin-bottom:0 !important;
    border-radius:5px;
}

@media handheld,only screen and (max-width:767px),(orientation:portrait) {

    #ticket_tracker_modal {
        width:300px;
    }
}

/* modules/jrTips/css/jrTips.css */


.tour-list {
    margin:24px 0 0 0;
    padding:0;
    padding-top:12px;
}

.tour-stop {
    position:absolute;
    bottom:8px;
    right:10px;
    font-size:9px;
}

.tour-stop a {
    color:#BBBBBB !important;
    text-decoration:none !important;
}

.tour-stop a:hover {
    color:#333333 !important;
    text-decoration:none !important;
}

/* @title Tour popup URLs */
/* @help Controls the font in the Tour modal popups */
.tour-extra {
    position:absolute;
    bottom:8px;
    left:10px;
    margin:2px;
    padding:0;
    list-style:none;
    font-size:13px;
    line-height:20px;
}

.tour-extra a {
    color:#000000;
}

.tour-close {
    display:none;
    margin-top:12px;
}

.tour-img {
    vertical-align:middle;
}


/* modules/jrTracker/css/jrTracker.css */


.tracker_item_key {
    display:inline-block;
    width:95px;
    color:#999;
    text-align:right;
}

.tracker_item_key_small {
    display:inline-block;
    width:60px;
    color:#999;
    text-align:right;
    font-size:10px;
    text-transform:capitalize;
}

.status_section {
    line-height:12px;
    width:110px;
    display:inline-block;
    vertical-align:middle;
    border-radius:3px;
    text-align:center;
    color:#000;
    text-transform:uppercase;
    font-size:10px;
    padding:4px 4px 3px 4px;
    border:1px solid #EEE;
}

.status_section_open {
    background-color:#FFF !important;
    border:1px solid #DDD;
}

.status_section_burner {
    background-color:#EEE !important;
    border:1px solid #666;
}

.status_section_in_progress {
    background-color:#CF9 !important;
    border:1px solid #ADD982;
}

.status_section_pending {
    background-color:#F93 !important;
    border:1px solid #D9822B;
}

.status_section_closed {
    background-color:#EEE !important;
    border:1px solid #DDD;
}

.status_section_testing {
    background-color:#ADF !important;
    border:1px solid #91BCD9;
}

.status_section_release {
    background-color:#FD0 !important;
    border:1px solid #D9BC00;
}

.status_section_postrelease {
    background-color:#DDAFF8 !important;
    border:1px solid #BC95D3;
}

.status_section_releasedelay {
    background-color:#FFF !important;
    border:1px solid #D9BC00;
}

.status_section_completed {
    background-color:#CF9 !important;
    border:1px solid #ADD982;
}

.status_section_delayed {
    background-color:#FFF !important;
    border:1px solid #D9822B;
}

.status_section_blocked {
    background-color:#FFF !important;
    border:1px solid #D9822B;
}

.status_section_private {
    background-color:#FD0 !important;
    border:1px solid #D9BC00;
}

.filter_box {
    float:left;
    background-color:#EEE;
    border-radius:3px;
    padding:6px 12px;
    margin:3px;
    font-size:14px;
}

.filter_box a {
    text-decoration:none;
}

.filter_box:hover {
    background-color:#EEE;
}

.comment_private {
    border:3px solid #FD0 !important;
    border-radius:3px;
}

.status_private {
    height:18px;
    line-height:18px;
    width:60px;
    display:inline-block;
    vertical-align:middle;
    background:#FD0;
    border-radius:3px;
    text-align:center;
    color:#000;
    text-transform:uppercase;
    font-size:12px;
}

.tracker_attachment {
    margin:20px 12px;
    background-color:#EEE;
    border:1px solid #CCC;
    border-radius:4px;
    padding:6px
}

.tracker_follow_box {
    position:inherit;
    width:340px;
    text-align:left;
    background-color:#EEE;
    border:1px solid #999;
    border-radius:5px;
    padding:12px;
    z-index:100;
    overflow:visible;
    box-shadow:3px 3px 3px 3px #CCC;
}

.tracker_vote_section {
    border-top:1px solid #EEE;
    font-size:16px;
    padding:16px 12px;
}

.tracker_vote_button {
    margin-top:12px !important;
}

#tracker-status-sel {
    width:120px;
}

#tracker-resolution {
    width:460px;
    box-sizing:border-box;
    position:relative;
}

#tracker-resolution-txt {
    width:100%;
}

#tracker-select-owner {
    background:#EEE;
    width:350px;
    height:auto;
    padding:20px;
    border-radius:5px;
}

.tracker-owner-row {
    margin:3px 0;
}

.tracker-owner-row img {
    vertical-align:middle;
    width:28px;
    height:28px;
}

.tracker-owner-row input {
    display:inline-block;
    vertical-align:middle;
    margin-left:5px;
    padding:5px 8px;
}

#tracker-report-table {
    margin-top:10px;
}

#tracker-report-modal {
    background:#FFF;
    padding:10px;
    border-radius:4px;
    width:700px;
    height:auto;
}

#tracker_status_select {
    width:150px;
}

#tracker-tpl-delete {
    display:none;
}

.tracker-title-seen {
    font-weight:normal;
}

.tracker-tag {
    width:unset;
    background:#FFF;
    color:#000;
    border:1px solid #DDD;
    border-radius:3px;
    padding:1px 3px 0 3px;
    margin:0 1px 0 0;
    font-size:8px;
    text-transform:uppercase;
}

.tracker-tag a {
    color:#000 !important;
}


/* modules/jrUnitTest/css/jrUnitTest.css */


.ut-table {
    display:table;
    width:100%;
}

.ut-row-func {
    font-weight:bold;
    display:table-row;
    cursor:pointer;
}

.ut-row {
    display:none;
}

.ut-row-s {
    display:table-row;
}

.ut-coverage-box {
    max-height:600px;
    overflow:auto;
}

.ut-line-num {
    display:table-cell;
    opacity:0.5;
    width:5%;
    font-family:"Roboto Mono",monospace;
    padding:1px 3px;
    text-align:center;
}

.ut-cover-line {
    display:table-cell;
    width:95%;
    font-family:"Roboto Mono",monospace;
    padding:1px;
    font-size:12px;
    overflow:auto;
    white-space:pre-wrap;
}

.ut-comment {
    opacity:0.5;
}


/* modules/jrUpimg/css/slider.css */


/*! http://responsiveslides.com v1.32 by @viljamis */

#swrapper {
    padding:26px 0 20px 0;
    margin:0 auto;
}

.upimg_rslides {
    position:relative;
    list-style:none;
    overflow:hidden;
    height:auto;
    padding:0;
    margin:0 auto;
}

.upimg_rslidesli {
    position:absolute;
    display:none;
    height:auto;
    left:0;
    top:0;
    margin:0 auto;
}

.upimg_rslidesli:first-child {
    position:relative;
    display:block;
    float:left;
    margin:0 auto;
}

.upimg_rslidesimg {
    display:block;
    height:auto;
    float:left;
    border:0;
    margin:0 auto;
}

.upimg_rslides {
    margin:0 auto;
}

#slider2 {
    box-shadow:none;
    margin:0 auto;
}

.upimg_rslides_tabs {
    background-color:#EEE;
    list-style:none;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:0;
    font-size:12px;
    margin:0 auto;
    text-align:center;
}

.upimg_rslides_tabs li {
    display:inline;
    float:none;
}

.upimg_rslides_tabs a {
    width:auto;
    line-height:20px;
    padding:3px 5px;
    height:auto;
    background:transparent;
    display:inline;
    color:#000;
}

.upimg_rslides_tabs li:first-child {
    margin-left:0;
}

.upimg_rslides_tabs .upimg_rslides_here a {
    background:#FFF;
    color:#000;
    font-weight:bold;
}

/* Callback example */

.events {
    list-style:none;
}

.callbacks_container {
    margin-bottom:10px;
    position:relative;
    float:left;
    width:100%;
}

.callbacks {
    position:relative;
    list-style:none;
    overflow:hidden;
    width:100%;
    padding:0;
    margin:0;
}

.callbacks li {
    position:absolute;
    width:100%;
    left:0;
    top:0;
}

.callbacks img {
    display:block;
    position:relative;
    z-index:1;
    height:auto;
    width:100%;
    border:0;
}

.callbacks .caption {
    display:block;
    position:absolute;
    z-index:2;
    font-size:18px;
    text-shadow:none;
    color:#FFF;
    background:#000;
    background:rgba(0,0,0,.8);
    left:0;
    right:0;
    bottom:0;
    padding:10px 20px;
    margin:0;
    max-width:none;
    border-top-width:2px;
    border-top-style:solid;
    border-top-color:#EEE;
}

.callbacks_nav {
    position:absolute;
    top:52%;
    left:0;
    opacity:0.5;
    z-index:3;
    text-indent:-9999px;
    overflow:hidden;
    text-decoration:none;
    height:61px;
    width:38px;
    background:transparent url("http://mediaistream.com/image/img/module/jrUpimg/themes.gif") no-repeat left top;
    margin-top:-45px;
}

.callbacks_nav:active {
    opacity:1.0;
}

.callbacks_nav.next {
    left:auto;
    background-position:right top;
    right:0;
}


/* modules/jrUrlScan/css/jrUrlScan.css */


#urlscan_target {
    margin-top:5px;
    padding:5px;
    display:none;
}

#urlscan-player-div {
    display:none;
}

.urlscan_card {
    border:1px solid #EEE;
    border-radius:3px;
    padding:10px;
}

.action .urlscan_card {
    border:none;
    border-radius:0;
    padding:0;
}

.urlscan_card h2 {
    margin:0 0 10px;
}

#urlscan_loading {
    display:block;
    margin:6px auto;
}

.urlscan_card_load {
    display:block;
    background:#EEE;
    padding:4px 8px;
    border-radius:3px;
    cursor:pointer;
    text-decoration:none;
}

/* modules/jrUser/css/jrUser.css */


.online_status_table {
    display:table;
    width:100%;
}

/* @title Online Status Image */
/* @help Cell class for image area in Online Status for an individual User */
.online_status_image {
    display:table-cell;
    width:10%;
    padding:6px;
}

/* @title Online Status User */
/* @help Cell class for user name area in Online Status for an individual User */
.online_status_user {
    display:table-cell;
    width:80%;
    vertical-align:middle;
    padding:2px 6px;
}

/* @title Online Status User Anchor */
/* @help Cell class for user name area in Online Status for an individual User */
.online_status_user a {
    color:#000;
}

/* @title User is Online */
/* @help Class for small ONLINE box that shows when the user is actually online */
.online_status_online {
    background-color:#CF9;
    color:#000;
    display:inline-block;
    width:100%;
    border-radius:2px;
}

/* @title User is Offline */
/* @help Class for small OFFLINE box that shows when the user is not online */
.online_status_offline {
    color:#000;
    display:inline-block;
    width:100%;
    border-radius:2px;
}

/* @title Widget Font Size */
/* @help sets the label font size for the Login and Signup widgets */
.widget-item-widget_login {
    font-size:12px !important;
}

#user-notification-select {
    margin:10px 6px !important;
    width:35% !important;
    text-transform:capitalize;
}

.user_notification_left {
    width:35% !important;
    padding:20px !important;
}

.element_left.user_notification_left.expanded {
    text-align:justify;
}

.user_notification_right {
    width:65% !important;
    padding:20px !important;
}

.user_notification_right span {
    display:block;
}

.user_notification_right input {
    margin:3px 6px 3px 3px;
    vertical-align:bottom;
}

#jrUser_account input[readonly="readonly"] {
    background:inherit;
    color:inherit;
}

.user-delete-modal {
    text-align:center;
    width:290px;
    padding:20px;
}

.user-delete-modal input {
    width:250px;
    display:inline-block;
    margin:10px 20px;
}

.new_login {
    margin:50px auto;
    text-align:center;
    max-width:360px;
    height:auto;
    background:white;
    border-radius:8px;
    padding:2em 0 1em;
    box-shadow:0 0 20px #BBB;
}

.new_login .form_text {
    box-sizing:border-box;
    background:white;
    padding:7px 10px;
    border-radius:8px;
    color:#333;
    width:290px;
    box-shadow:none;
    border:2px solid #AAA;
}

.new_login .form_select {
    box-sizing:border-box;
    padding:7px 10px;
    border-radius:8px;
    color:#333;
    width:290px;
    box-shadow:none;
    border:2px solid #AAA;
}

.form_text_wrap {
    position:relative;
    width:300px;
    margin:6px auto;
}

.form_text_wrap.password {
    margin:10px auto 0;
}

.login_button {
    background:#333 linear-gradient(#444,#222);
    height:40px;
    width:100%;
    border:none;
    cursor:pointer;
    border-radius:10px;
    margin:10px 0;
    color:white;
    font-size:16px;
    max-width:292px;
}

.login_button:disabled {
    opacity:0.6;
}

.new_login h2 {
    display:block;
    margin-bottom:12px;
    color:#333;
}

.login_forgot {
    padding:1em;
    border-top:1px solid #999;
    width:270px;
    margin:auto;
}

.login_forgot a {
    color:#888;
    font-size:16px;
}

.new_login .form_text:focus {
    border:2px solid #333;
}

.new_login .form_submit_section {
    padding:16px;
    background:none;
}

.signup_button {
    background:#EEE linear-gradient(#444,#222);
    color:white;
    padding:12px;
    width:90%;
    border:none;
    border-radius:10px;
    font-size:16px;
    text-transform:capitalize;
    cursor:pointer;
}

.form_text_wrap.left {
    text-align:left;
    padding:12px 0 0;
}

.new_login .page_notice {
    margin:10px;
}

.form_capitalize {
    text-transform:capitalize;
}

#account-tabs-profile-button {
    text-transform:none;
}

.u-view-keys {
    display:none;
}

.index_form .form_text {
    box-sizing:border-box;
    width:100%;
}

.new_login .form_text {
    width:auto;
    min-width:290px;
    height:36px;
}

/* Mobile */
@media handheld,only screen and (max-width:767px) {
    .new_login {
        border-radius:0;
        margin-top:0;
        margin-bottom:0;
    }
}

/* modules/jrVideo/css/module.css */


/*
Combined and refactored styles for the jrVideo module.
This file consolidates styles from the legacy HTML5 player and the watch page,
and introduces modern CSS practices like variables for easier theming.
*/

:root {
  --amv-primary-color:#e53935;
  --amv-background-color:#000;
  --amv-text-color:#fff;
  --amv-control-bg:rgba(0,0,0,0.62);
  --amv-progress-bg:#333;
  --amv-progress-buffered:#555;
  --amv-border-radius:12px;
  --amv-font-family:sans-serif;
}

.amv-html5-player {
    position:relative;
    max-width:100%;
    background:var(--amv-background-color);
    color:var(--amv-text-color);
    border-radius:var(--amv-border-radius);
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.2);
    font-family:var(--amv-font-family);
}

.amv-video {
    width:100%;
    height:auto;
    display:block;
    background:#000;
    aspect-ratio:16/9;
    object-fit:contain;
}

.amv-controls {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    background:var(--amv-control-bg);
    backdrop-filter:saturate(120%) blur(2px);
    transition:opacity .2s ease;
}

.amv-controls button:focus,
.amv-controls select:focus,
.amv-controls input:focus {
    outline:2px solid #66afe9;
    outline-offset:2px;
}

.amv-html5-player:not(.amv-controls-visible) .amv-controls {
    opacity:0;
    pointer-events:none;
}

.amv-html5-player.amv-controls-visible .amv-controls {
    opacity:1;
}

.amv-btn {
    width:35px;
    height:35px;
    border:0;
    background-color:transparent;
    border-radius:6px;
    cursor:pointer;
    box-shadow:none;
    outline:none;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:20px;
}

.amv-btn:hover {
    filter:brightness(1.2);
}

.amv-btn:active {
    transform:scale(0.98);
}

.amv-btn.amv-play { background-image:url("../img/icons/play.svg"); }
.amv-btn.amv-pause { background-image:url("../img/icons/pause.svg"); }
.amv-btn.amv-mute { background-image:url("../img/icons/volume.svg"); }
.amv-btn.amv-mute.is-muted { background-image:url("../img/icons/mute.svg"); }
.amv-btn.amv-fullscreen { background-image:url("../img/icons/fullscreen.svg"); }
.amv-btn.amv-pip { background-image:url("../img/icons/pip.svg"); }

.amv-time {
    color:#ddd;
    font:14px/1.3 var(--amv-font-family);
    display:flex;
    gap:6px;
    align-items:center;
}

.amv-progress {
    position:relative;
    flex:1;
    height:6px;
    background:var(--amv-progress-bg);
    border-radius:3px;
    cursor:pointer;
}

.amv-progress .amv-buffered {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    background:var(--amv-progress-buffered);
    border-radius:3px;
}

.amv-progress .amv-played {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    background:var(--amv-primary-color);
    border-radius:3px;
}

/* Tooltips */
.amv-seek-tooltip,
.amv-preview {
    position:absolute;
    bottom:140%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.86);
    color:#fff;
    padding:3px 8px;
    border-radius:6px;
    font-size:11px;
    pointer-events:none;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    z-index:5;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease;
}

.amv-progress:hover .amv-seek-tooltip,
.amv-progress:hover .amv-preview {
    opacity:1;
    visibility:visible;
}

.amv-preview {
    width:160px;
    height:90px;
    padding:0;
    border:1px solid #444;
}

.amv-preview-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Volume */
.amv-volume {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:8px;
}

.amv-volume-range {
    width:120px;
    height:8px;
}

/* Watch Page & Theater Mode */
.watch-row .col3 { float:right; }

.amv-theater-mode .watch-row .col3 { display:none !important; }
.amv-theater-mode .watch-row .col9 { width:100% !important; }

.amv-html5-player.amv-theater {
    max-width:none;
    width:100%;
    border-radius:0 !important;
}

.amv-theater-mode .amv-html5-player.amv-theater {
    position:relative;
    z-index:3;
    width:100% !important;
    max-width:100% !important;
    left:auto;
    right:auto;
    margin:0 !important;
}

.amv-theater-mode .amv-html5-player.amv-theater .amv-video {
    height:85vh !important;
    max-height:85vh !important;
    border-radius:0;
}

/* Sidebar Playlist */
.amv-pl { display:flex; flex-direction:column; gap:8px; }
.amv-pl-item {
    display:flex;
    gap:10px;
    align-items:center;
    padding:6px;
    border-radius:6px;
    background:#0b0b0b;
    color:var(--amv-text-color);
    text-decoration:none;
}
.amv-pl-item:hover { background:#111; }
.amv-pl-item.is-current{ background:#0f172a; }

.amv-pl-thumb {
    width:100px;
    height:56px;
    flex-shrink:0;
    border-radius:6px;
    overflow:hidden;
    background:#222;
}
.amv-pl-img { width:100%; height:100%; object-fit:cover; }
.amv-pl-meta { min-width:0; }
.amv-pl-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amv-pl-sub { font-size:11px; color:#bbb; }


/* modules/jrVideo/css/jrVideo_html5_player.css */


.amv-html5-player{position:relative;max-width:100%;background:#000;color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.2)}
.amv-video{width:100%;height:auto;display:block;background:#000;aspect-ratio:16/9;object-fit:contain}
.amv-html5-player{--amv-big-size:76px}
.amv-controls{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(0,0,0,.62);backdrop-filter:saturate(120%) blur(2px);transition:opacity .2s ease}
.amv-controls button:focus,.amv-controls select:focus,.amv-controls input:focus{outline:2px solid #66afe9;outline-offset:2px}
.amv-controls button:focus-visible,.amv-controls select:focus-visible,.amv-controls input:focus-visible{outline:3px solid #ffdd57}
.amv-html5-player:not(.amv-controls-visible) .amv-controls{opacity:0;pointer-events:none}
.amv-html5-player.amv-controls-visible .amv-controls{opacity:1}
.amv-btn{width:35px;height:35px;border:0;background:#222;border-radius:6px;cursor:pointer;box-shadow:none;outline:none}
.amv-btn:focus{outline:none}
.amv-btn:hover{filter:brightness(1.1)}
.amv-btn:active{transform:scale(0.98)}
.amv-btn.amv-play{background:#222 url("/modules/jrVideo/img/hex_white/play-button.png") no-repeat center center/20px}
.amv-btn.amv-pause{background:#222 url("/modules/jrVideo/img/hex_white/pause-button.png") no-repeat center center/20px}
.amv-btn.amv-mute{background:#222 url("/modules/jrVideo/img/hex_white/volume-icon.png") no-repeat center center/20px}
.amv-btn.amv-mute.is-muted{background:#222 url("/modules/jrVideo/img/hex_white/volume-icon-disabled.png") no-repeat center center/20px}
.amv-btn.amv-fullscreen{background:#222 url("/modules/jrVideo/img/hex_white/full-screen.png") no-repeat center center/20px}
.amv-time{color:#ddd;font:14px/1.3 sans-serif;display:flex;gap:6px;align-items:center}
.amv-progress{position:relative;flex:1;height:6px;background:#333;border-radius:3px;cursor:pointer}
.amv-progress .amv-heat{border-radius:3px}
.amv-progress .amv-buffered{position:absolute;left:0;top:0;height:100%;width:0;background:#555;border-radius:3px}
.amv-progress .amv-played{position:absolute;left:0;top:0;height:100%;width:0;background:#e53935;border-radius:3px}
.amv-progress .amv-seek-tooltip{position:absolute;bottom:140%;transform:translateX(-50%);background:rgba(0,0,0,.86);color:#fff;padding:3px 8px;border-radius:6px;font:11px/1 sans-serif;pointer-events:none;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:5;opacity:0;visibility:hidden;transition:opacity .15s ease}
.amv-progress:hover .amv-seek-tooltip{opacity:1;visibility:visible}
.amv-progress .amv-seek-tooltip[aria-hidden="true"]{opacity:0;visibility:hidden}
.amv-progress .amv-seek-tooltip[aria-hidden="false"]{opacity:1;visibility:visible}
.amv-progress .amv-preview{position:absolute;bottom:150%;left:0;transform:translateX(-50%);width:160px;height:90px;background:#000;border:1px solid #444;border-radius:6px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:6}
.amv-progress .amv-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.amv-progress:hover .amv-preview{opacity:1;visibility:visible}
.amv-progress .amv-preview[aria-hidden="true"]{opacity:0;visibility:hidden}
.amv-progress .amv-preview[aria-hidden="false"]{opacity:1;visibility:visible}
.amv-volume{display:flex;align-items:center;gap:8px;margin-left:8px}
.amv-volume-range{width:120px;height:8px;vertical-align:middle}

/* Volume range styling */
.amv-volume-range{-webkit-appearance:none;background:#444;border-radius:4px;outline:none}
.amv-volume-range::-webkit-slider-runnable-track{height:8px;background:#444;border-radius:4px}
.amv-volume-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;margin-top:-4px;cursor:pointer}
.amv-volume-range::-moz-range-track{height:8px;background:#444;border-radius:4px}
.amv-volume-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;cursor:pointer}
.amv-volume-range::-ms-track{height:8px;background:transparent;border-color:transparent;color:transparent}
.amv-volume-range::-ms-fill-lower{background:#444;border-radius:4px}
.amv-volume-range::-ms-fill-upper{background:#444;border-radius:4px}
.amv-volume-range::-ms-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #222;cursor:pointer}
.amv-speed{margin-left:6px}
.amv-speed-select{background:#000 !important;color:#fff !important;border:1px solid #444 !important;border-radius:6px;height:35px;box-shadow:none;padding:0 28px 0 34px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.amv-speed-input{background:#000;color:#fff;border:1px solid #444;border-radius:6px;height:35px;padding:0 6px;box-shadow:none}
.amv-speed-select:focus{outline:none !important;box-shadow:0 0 0 2px rgba(255,255,255,.08);border-color:#666 !important}
.amv-speed-select option{background:#000 !important;color:#fff !important}
.amv-quality{margin-left:6px}
.amv-quality-select{background:#222;color:#fff;border:0;border-radius:6px;height:28px}
.amv-captions{margin-left:6px}
.amv-captions-select{background:#222;color:#fff;border:0;border-radius:6px;height:28px}
.amv-select-icon{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#222;border:0;border-radius:6px;height:35px;min-width:35px;width:35px;padding:0;margin:0;cursor:pointer;box-shadow:none}
/* hide visible text in the closed select across browsers */
.amv-select-icon{color:transparent;text-shadow:0 0 0 transparent;font-size:0;line-height:0;-webkit-text-fill-color:transparent;text-indent:-9999px;overflow:hidden}
/* Override hidden text for Speed select so its value shows */
.amv-speed-select.amv-select-icon{color:#fff !important;text-shadow:none !important;font-size:13px !important;line-height:1.2 !important;-webkit-text-fill-color:#fff !important;text-indent:0 !important;overflow:visible !important}
.amv-select-icon::-ms-value{color:transparent}
.amv-select-icon::-ms-expand{display:none}
/* restore font size in the dropdown list */
.amv-select-icon option{font-size:13px;line-height:1.2;color:#111}
.amv-select-icon:focus,.amv-select-icon:active{color:transparent;outline:0}
.amv-speed,.amv-quality,.amv-captions{position:relative}
.amv-speed:before,.amv-quality:before,.amv-captions:before{content:"";position:absolute;left:9px;top:8px;width:18px;height:18px;background-repeat:no-repeat;background-size:18px 18px;z-index:2;pointer-events:none}
/* Replace speed text with playback rate png */
.amv-speed:before{background:url("/modules/jrVideo/img/hex_white/playback-rate-normal.png") no-repeat}
.amv-quality:before{background:url("/modules/jrVideo/img/hex_white/combobox-arrow-normal.png") no-repeat}    
.amv-captions:before{background:url("/modules/jrVideo/img/hex_white/info-button.png") no-repeat}

/* Theater mode */
.amv-html5-player.amv-theater{max-width:none;width:100%}
.amv-html5-player.amv-theater .amv-video{width:100%}

/* Expand to full viewport width even inside constrained columns */
.amv-theater-mode .amv-html5-player.amv-theater{
  position:relative;
  z-index:3;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  border-radius:0;
  box-sizing:border-box;
}
/* Maintain aspect ratio by letting the video scale; cap height for usability */
.amv-theater-mode .amv-html5-player.amv-theater .amv-video{
  width:100% !important;
  height:85vh !important;
  max-height:85vh !important;
  object-fit:cover;
  background:#000;
  display:block;
}
/* Keep playlist panel usable in theater */
.amv-theater-mode .amv-html5-player.amv-theater .amv-side{height:100%}
.amv-html5-player .amv-btn.amv-theater{background:#222 url("/modules/jrVideo/img/hex_white/full-screen.png") no-repeat center center/20px}
.amv-html5-player .amv-btn.amv-pip{background:#222 url("/modules/jrVideo/img/hex_white/popup-button.png") no-repeat center center/20px}
.amv-fullscreen{margin-left:auto}
.amv-big-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--amv-big-size);height:var(--amv-big-size);border:0;border-radius:50%;background:rgba(0,0,0,0.4) url("/modules/jrVideo/img/hex_white/large-play.png") no-repeat center center/42px;opacity:0;transition:opacity .15s ease;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:4}
.amv-html5-player:hover .amv-big-toggle{opacity:1}
/* Ensure visible when paused (no hover needed) */
.amv-html5-player:not(.is-playing) .amv-big-toggle{opacity:1}
.amv-html5-player.is-playing .amv-big-toggle{background-image:url("/modules/jrVideo/img/hex_white/pause-button.png")}
.amv-big-toggle:focus{outline:2px solid #66afe9;outline-offset:2px}

/* Logo overlay */
.amv-logo{position:absolute;width:120px;height:40px;background:url("/modules/jrVideo/img/logo.png") no-repeat center center/contain,linear-gradient(transparent,transparent);opacity:.5;pointer-events:none;z-index:4}
.amv-logo-top_left{top:10px;left:10px}
.amv-logo-top_right{top:10px;right:10px}
.amv-logo-bottom_left{bottom:10px;left:10px}
.amv-logo-bottom_right{bottom:10px;right:10px}
.amv-btn.amv-settings{background:#222 url("/modules/jrVideo/img/hex_white/cog.png") no-repeat center center/20px}
.amv-btn.amv-transcript{background:#222 url("/modules/jrVideo/img/hex_white/playback-rate-normal.png") no-repeat center center/20px}
/* Share button */
.amv-btn.amv-share{background:#222 url("/modules/jrVideo/img/hex_white/share.png") no-repeat center center/20px}

/* Playlist side panel */
.amv-btn.amv-playlist{background:#222 url("/modules/jrVideo/img/hex_white/playlist-button.png") no-repeat center center/20px}

/* Tooltips above icons/selects */
.amv-btn[data-tooltip],.amv-select-icon[data-tooltip] { position:relative }
.amv-btn[data-tooltip]::after,.amv-select-icon[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,-8px);
  background:#000;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font:12px/1 sans-serif;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amv-btn[data-tooltip]::before,.amv-select-icon[data-tooltip]::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,2px);
  border:6px solid transparent;
  border-top-color:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amv-btn[data-tooltip]:hover::after,.amv-btn[data-tooltip]:hover::before,
.amv-select-icon[data-tooltip]:hover::after,.amv-select-icon[data-tooltip]:hover::before {
  opacity:1;
  visibility:visible;
}

/* Wrapper-based tooltip support (for selects on some browsers) */
.amv-has-tooltip{position:relative}
.amv-has-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,-8px);
  background:#000;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font:12px/1 sans-serif;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amv-has-tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,2px);
  border:6px solid transparent;
  border-top-color:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity .15s ease;
}
.amv-has-tooltip:hover::after,.amv-has-tooltip:hover::before{opacity:1;visibility:visible}

/* Stronger specificity to keep text white on selects */
.amv-html5-player .amv-speed .amv-speed-select,
.amv-html5-player .amv-quality .amv-quality-select,
.amv-html5-player .amv-captions .amv-captions-select{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:#000 !important;
  border-color:#444 !important;
}
.amv-side{position:absolute;right:0;top:0;width:33%;height:100%;background:rgba(10,10,10,.96);border-left:1px solid #333;transform:translateX(100%);transition:transform .2s ease;z-index:1;display:flex;flex-direction:column;pointer-events:none}
.amv-html5-player.amv-side-open .amv-side{transform:translateX(0);z-index:3;pointer-events:auto}
.amv-side-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amv-side-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amv-side-content{flex:1;overflow:auto}

/* Settings panel */
.amv-settings-panel{position:absolute;right:10px;bottom:60px;width:260px;max-width:80vw;background:rgba(0,0,0,.96);border:1px solid #333;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.45);color:#fff;z-index:4;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}
.amv-settings-panel[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0)}
.amv-settings-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amv-settings-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amv-settings-content{padding:10px}
.amv-setting-row{display:flex;align-items:center;gap:8px;font:13px/1.2 sans-serif;margin:6px 0}
.amv-settings-reset{margin-top:8px}

/* Settings panel:improve layout for last two controls row */
.amv-captions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.amv-captions-row > span{min-width:100px;opacity:.9}
.amv-captions-row select{height:32px;border:1px solid #444;border-radius:6px;background:#000;color:#fff;padding:2px 8px}
.amv-captions-row input[type="color"]{width:32px;height:32px;border:1px solid #333;border-radius:4px;background:#000;padding:0}
.amv-transcript-panel .amv-transcript-download{margin-left:auto}

/* Settings panel theming to avoid white boxes */
.amv-settings-panel select,
.amv-settings-panel input[type="text"],
.amv-settings-panel .form_text{
  background:#111;
  color:#fff;
  border:1px solid #333;
  border-radius:6px;
  box-shadow:none;
}
.amv-settings-panel select:focus,
.amv-settings-panel input[type="text"]:focus,
.amv-settings-panel .form_text:focus{
  outline:2px solid rgba(102,175,233,.6);
  outline-offset:2px;
  border-color:#555;
}
.amv-settings-panel input[type="color"]{
  background:#111;
  border:1px solid #333;
  border-radius:4px;
}
.amv-settings-panel .amv-settings-reset,
.amv-settings-panel .form_button{
  background:#222;
  color:#fff;
  border:1px solid #333;
  border-radius:6px;
}
.amv-settings-panel .amv-settings-reset:hover,
.amv-settings-panel .form_button:hover{ background:#2a2a2a }
.amv-settings-panel .amv-settings-reset:focus,
.amv-settings-panel .form_button:focus{ outline:2px solid rgba(102,175,233,.6); outline-offset:2px }

/* Transcript panel */
.amv-transcript-panel{position:absolute;left:10px;right:10px;bottom:60px;max-height:50vh;background:rgba(0,0,0,.96);border:1px solid #333;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.45);color:#fff;z-index:4;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}
.amv-transcript-panel[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0)}
.amv-transcript-header{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #333;font:13px/1.2 sans-serif}
.amv-transcript-close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.amv-transcript-content{padding:10px;max-height:38vh;overflow:auto;font:13px/1.4 sans-serif}
.amv-transcript-line{padding:4px 0;border-bottom:1px solid #222}
.amv-transcript-line .amv-ts{opacity:.7;margin-right:8px}

/* Playlist items */
.amv-pl{display:block}
.amv-pl-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #2a2a2a;color:#fff;text-decoration:none}
.amv-pl-item:hover{background:#111}
.amv-pl-item.is-current{background:#0f172a}
.amv-pl-thumb{width:100px;height:56px;flex:0 0 100px;border-radius:6px;overflow:hidden;background:#222;display:block}
.amv-pl-img{width:100%;height:100%;object-fit:cover;display:block}
.amv-pl-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#333,#222)}
.amv-pl-meta{display:flex;flex-direction:column;min-width:0}
.amv-pl-title{font:13px/1.3 sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amv-pl-sub{font:11px/1.2 sans-serif;color:#bbb;display:flex;gap:6px;align-items:center}
.amv-pl-dot{opacity:.75}
.amv-pl-empty{padding:12px;color:#bbb;font:12px/1.2 sans-serif}

/* Gestures/Overlays */
.amv-brightness{transition:opacity .12s linear}
.amv-speed-menu button{min-width:48px}


/* Accessibility:Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .amv-html5-player * { transition:none !important; animation:none !important; }
  .amv-html5-player .amv-controls { backdrop-filter:none; }
}

/* High Contrast support */
@media (prefers-contrast:more) {
  .amv-html5-player { border:2px solid #fff; }
  .amv-controls { background:#000; }
  .amv-progress { background:#111; }
  .amv-progress .amv-buffered { background:#444; }
  .amv-progress .amv-played { background:#ffcc00; }
}

@media (forced-colors:active) {
  .amv-html5-player,.amv-controls,.amv-btn,.amv-progress { forced-color-adjust:none; }
  .amv-progress { background:CanvasText; }
  .amv-progress .amv-played { background:Highlight; }
}



/* modules/jrVideo/css/jrVideo_sliders.css */


/**
 * JR Video Sliders - Complete CSS
 * Combined comprehensive CSS for all video slider types
 * Author:The Arcitech 2026
 * Version:1.0.0
 */

/* ===============================================
   BASE SLIDER VARIABLES AND SHARED STYLES
   =============================================== */

/* Base Slider Variables - Shared across all sliders */
:root {
    --jr-slider-border-radius:8px;
    --jr-slider-shadow:0 4px 12px rgba(0,0,0,0.1);
    --jr-slider-transition:all 0.3s ease;
    --jr-slider-primary:#ff0000;
    --jr-slider-secondary:#667eea;
    --jr-slider-accent:#764ba2;
}

/* Theme Overrides - Shared across all sliders */
.jr-slider-theme-dark {
    --jr-slider-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.jr-slider-theme-light {
    --jr-slider-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.jr-slider-theme-colorful {
    --jr-slider-primary:#ff6b6b;
    --jr-slider-secondary:#4ecdc4;
    --jr-slider-accent:#45b7d1;
}

.jr-slider-theme-minimal {
    --jr-slider-shadow:none;
    --jr-slider-border-radius:4px;
}

/* Slider Sections - Shared across all sliders */
.slider-section {
    margin-bottom:clamp(15px,5vw,40px);
    width:100%;
    box-sizing:border-box;
}

.slider-section-title {
    font-size:clamp(1.2em,4vw,1.8em);
    font-weight:700;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px 0;
    flex-wrap:wrap;
}

.slider-type {
    font-size:clamp(0.6em,2vw,0.8em);
    background:#667eea;
    color:white;
    padding:3px 10px;
    border-radius:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px;
    white-space:nowrap;
}

.slider-description {
    color:#666;
    font-size:clamp(0.85em,2.5vw,1em);
    margin-bottom:clamp(15px,4vw,30px);
    padding:clamp(10px,3vw,20px);
    background:#f8f9fa;
    border-radius:8px;
    border-left:4px solid #667eea;
    width:100%;
    box-sizing:border-box;
}

/* ===============================================
   HERO SLIDER STYLES
   =============================================== */

.jr-slider-hero-container {
    position:relative !important;
    width:100% !important;
    height:450px !important; /* Fixed height for 16:9 aspect ratio at typical widths */
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    box-sizing:border-box;
    transition:var(--jr-slider-transition);
}

.jr-slider-hero-container.js-initialized {
    border:2px solid #00ff00; /* Green border to show JS initialized */
}

.jr-hero-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.5s ease,visibility 0.5s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.jr-hero-slide.active {
    opacity:1;
    visibility:visible;
}

.jr-hero-image-container {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.jr-hero-image-container img,
.jr-hero-image-container .jr-hero-slide-image,
.jr-hero-image-container * img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    max-width:none !important;
    max-height:none !important;
}

.jr-hero-info-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(20px,5vw,40px);
    background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 50%,transparent 100%);
    color:white;
}

.jr-hero-info-overlay h3 {
    font-size:clamp(20px,5vw,32px);
    font-weight:700;
    margin:10px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.jr-hero-play-btn {
    display:inline-block;
    background:var(--jr-slider-primary);
    color:white;
    padding:12px 32px;
    border-radius:24px;
    text-decoration:none;
    font-weight:600;
    margin-top:12px;
    transition:var(--jr-slider-transition);
}

.jr-hero-play-btn:hover {
    background:var(--jr-slider-secondary);
    transform:translateY(-2px);
}

.jr-hero-controls {
    position:absolute;
    bottom:clamp(15px,4vw,25px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:clamp(15px,4vw,25px);
    background:rgba(255,255,255,0.9);
    padding:clamp(10px,3vw,15px) clamp(20px,5vw,30px);
    border-radius:25px;
    backdrop-filter:blur(10px);
    z-index:10;
}

.jr-hero-prev-btn,
.jr-hero-next-btn {
    width:clamp(35px,7vw,45px);
    height:clamp(35px,7vw,45px);
    border-radius:50%;
    border:none;
    background:#f0f0f0;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(16px,3.5vw,20px);
}

.jr-hero-prev-btn:hover,
.jr-hero-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.1);
}

.jr-hero-info {
    font-weight:500;
    color:#333;
    font-size:clamp(14px,3vw,16px);
}

.jr-hero-current-slide {
    font-weight:bold;
    color:var(--jr-slider-primary);
}

.jr-hero-dots {
    position:absolute;
    bottom:clamp(20px,5vw,30px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.jr-hero-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-hero-dot.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-hero-dot:hover {
    background:rgba(255,255,255,0.8);
}

/* ===============================================
   MINI SLIDER STYLES
   =============================================== */

.jr-slider-mini-showcase {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(15px,4vw,25px);
    box-shadow:var(--jr-slider-shadow);
    transition:var(--jr-slider-transition);
}

.jr-slider-mini-showcase:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.jr-slider-mini-showcase h4 {
    font-size:clamp(1.1em,3vw,1.3em);
    font-weight:600;
    margin:0 0 clamp(12px,3vw,18px) 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
}

.jr-mini-slider-container {
    position:relative;
    overflow:hidden;
    border-radius:var(--jr-slider-border-radius);
    background:#f8f9fa;
}

.jr-mini-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    transition:opacity 0.4s ease;
    padding:clamp(12px,3vw,18px);
}

.jr-mini-slide.active {
    opacity:1;
    position:relative;
}

.jr-mini-video-card,
.jr-mini-creator-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    display:flex;
    gap:clamp(12px,3vw,18px);
    align-items:center;
    padding:clamp(12px,3vw,18px);
}

.jr-mini-video-card:hover,
.jr-mini-creator-card:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.jr-mini-thumbnail,
.jr-mini-creator-avatar {
    width:clamp(80px,15vw,120px);
    height:clamp(60px,11vw,90px);
    border-radius:6px;
    overflow:hidden;
    background:#f0f0f0;
    flex-shrink:0;
    position:relative;
}

.jr-mini-thumbnail img,
.jr-mini-creator-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-mini-duration {
    position:absolute;
    bottom:4px;
    right:4px;
    background:rgba(0,0,0,0.8);
    color:white;
    padding:2px 6px;
    border-radius:3px;
    font-size:clamp(10px,2vw,12px);
    font-weight:600;
}

.jr-mini-info,
.jr-mini-creator-info {
    flex:1;
    min-width:0;
}

.jr-mini-info h5,
.jr-mini-creator-info h5 {
    font-size:clamp(14px,3vw,16px);
    font-weight:600;
    margin:0 0 4px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-mini-info p,
.jr-mini-creator-info p {
    font-size:clamp(12px,2.5vw,14px);
    color:#666;
    margin:0 0 6px 0;
    line-height:1.4;
}

.jr-mini-stats,
.jr-mini-creator-stats {
    display:flex;
    gap:12px;
    font-size:clamp(11px,2vw,12px);
    color:#888;
}

.jr-mini-nav {
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    padding:0 clamp(8px,2vw,12px);
    pointer-events:none;
}

.jr-mini-prev-btn,
.jr-mini-next-btn {
    width:clamp(35px,7vw,45px);
    height:clamp(35px,7vw,45px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(14px,3vw,16px);
    pointer-events:all;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.jr-mini-prev-btn:hover,
.jr-mini-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.1);
}

/* ===============================================
   CAROUSEL SLIDER STYLES
   =============================================== */

.jr-slider-carousel-showcase {
    margin:clamp(20px,6vw,40px) 0;
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-carousel-showcase h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-carousel-container {
    position:relative;
    overflow:hidden;
    border-radius:var(--jr-slider-border-radius);
}

.jr-carousel-wrapper {
    display:flex;
    gap:clamp(15px,3vw,20px);
    transition:transform 0.4s ease;
    padding:clamp(15px,3vw,20px);
}

.jr-carousel-item {
    flex:0 0 clamp(250px,22vw,320px);
    transition:var(--jr-slider-transition);
    min-width:0;
}

.jr-carousel-item:hover {
    transform:scale(1.02);
}

.jr-carousel-video-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
}

.jr-carousel-video-card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    transform:translateY(-3px);
}

.jr-carousel-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-carousel-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-carousel-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-carousel-video-card:hover .jr-carousel-play-overlay {
    opacity:1;
}

.jr-carousel-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
}

.jr-carousel-info {
    padding:clamp(15px,3vw,20px);
}

.jr-carousel-title {
    font-size:clamp(15px,3.5vw,18px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-carousel-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-carousel-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(11px,2vw,12px);
    color:#888;
}

.jr-carousel-prev-btn,
.jr-carousel-next-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    z-index:10;
}

.jr-carousel-prev-btn {
    left:clamp(10px,2vw,15px);
}

.jr-carousel-next-btn {
    right:clamp(10px,2vw,15px);
}

.jr-carousel-prev-btn:hover,
.jr-carousel-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:translateY(-50%) scale(1.1);
}

/* ===============================================
   VERTICAL SLIDER STYLES
   =============================================== */

.jr-slider-vertical-container {
    position:relative;
    width:100%;
    height:500px;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    transition:var(--jr-slider-transition);
}

.jr-vertical-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.jr-vertical-slide.active {
    opacity:1;
}

.jr-vertical-video-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
    max-width:400px;
    margin:0 auto;
}

.jr-vertical-video-card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    transform:translateY(-3px);
}

.jr-vertical-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-vertical-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-vertical-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-vertical-video-card:hover .jr-vertical-play-overlay {
    opacity:1;
}

.jr-vertical-info {
    padding:clamp(15px,3vw,20px);
}

.jr-vertical-title {
    font-size:clamp(15px,3.5vw,18px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-vertical-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-vertical-stats {
    font-size:clamp(12px,2vw,13px);
    color:#888;
    margin:0 0 12px 0;
}

.jr-vertical-actions {
    display:flex;
    gap:8px;
    justify-content:center;
}

.jr-vertical-action-btn {
    background:none;
    border:none;
    color:#666;
    font-size:16px;
    padding:8px;
    border-radius:4px;
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-vertical-action-btn:hover {
    background:#f0f0f0;
    color:#333;
}

.jr-vertical-content {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:clamp(20px,5vw,40px);
    color:white;
    text-align:center;
}

.jr-vertical-content h3 {
    font-size:clamp(24px,6vw,36px);
    font-weight:700;
    margin:0 0 16px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.jr-vertical-content p {
    font-size:clamp(16px,4vw,20px);
    margin:0 0 24px 0;
    opacity:0.9;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.jr-vertical-play-btn {
    display:inline-block;
    background:var(--jr-slider-primary);
    color:white;
    padding:14px 36px;
    border-radius:28px;
    text-decoration:none;
    font-weight:600;
    font-size:clamp(16px,3vw,18px);
    transition:var(--jr-slider-transition);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.jr-vertical-play-btn:hover {
    background:var(--jr-slider-secondary);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.4);
}

.jr-vertical-nav-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    z-index:10;
}

.jr-vertical-nav-btn:first-child {
    left:clamp(15px,3vw,25px);
}

.jr-vertical-nav-btn:last-child {
    right:clamp(15px,3vw,25px);
}

.jr-vertical-nav-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:translateY(-50%) scale(1.1);
}

.jr-vertical-indicators {
    position:absolute;
    right:clamp(15px,3vw,25px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.jr-vertical-indicator {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-vertical-indicator.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-vertical-indicator:hover {
    background:rgba(255,255,255,0.8);
}

/* ===============================================
   TABBED SLIDER STYLES
   =============================================== */

.jr-slider-tabbed-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-tabbed-container h3 {
    font-size:clamp(1.4em,3.5vw,1.8em);
    font-weight:600;
    margin:0 0 clamp(20px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-tab-buttons {
    display:flex;
    justify-content:center;
    gap:clamp(5px,2vw,10px);
    margin-bottom:clamp(25px,5vw,35px);
    flex-wrap:wrap;
}

.jr-tab-btn {
    padding:clamp(10px,2.5vw,14px) clamp(20px,4vw,25px);
    background:#f8f9fa;
    border:2px solid #e9ecef;
    border-radius:var(--jr-slider-border-radius);
    color:#666;
    text-decoration:none;
    font-weight:500;
    font-size:clamp(14px,3vw,16px);
    transition:var(--jr-slider-transition);
    cursor:pointer;
    white-space:nowrap;
}

.jr-tab-btn:hover {
    background:#e9ecef;
    border-color:var(--jr-slider-primary);
    color:var(--jr-slider-primary);
}

.jr-tab-btn.active {
    background:var(--jr-slider-primary);
    border-color:var(--jr-slider-primary);
    color:white;
}

.jr-tab-panes {
    position:relative;
    min-height:300px;
}

.jr-tab-pane {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease;
}

.jr-tab-pane.active {
    opacity:1;
    visibility:visible;
    position:relative;
}

.jr-tab-content {
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;
    gap:clamp(20px,4vw,25px) !important;
    /* Debug:temporary background to see if grid is applied */
    background:rgba(255,0,0,0.1) !important;
    padding:10px !important;
    border:2px solid red !important;
}

.jr-tab-video-card {
    background:white !important;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    /* Debug:temporary border to see individual cards */
    border:2px solid blue !important;
    margin:5px !important;
}

.jr-tab-video-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.jr-tab-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-tab-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-tab-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-tab-video-card:hover .jr-tab-play-overlay {
    opacity:1;
}

.jr-tab-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
}

.jr-tab-info {
    padding:clamp(15px,3vw,20px);
}

.jr-tab-title {
    font-size:clamp(16px,3.5vw,19px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-tab-creator {
    font-size:clamp(14px,2.5vw,15px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-tab-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(12px,2vw,13px);
    color:#888;
}

/* ===============================================
   INTERACTIVE SLIDER STYLES
   =============================================== */

.jr-slider-interactive-container {
    position:relative;
    width:100%;
    padding-top:clamp(40%,56.25%,60%);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    transition:var(--jr-slider-transition);
}

.jr-interactive-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.jr-interactive-slide.active {
    opacity:1;
}

.jr-interactive-card {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    width:100%;
    max-width:600px;
    margin:0 auto;
}

.jr-interactive-card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.jr-interactive-main {
    display:flex;
    flex-direction:column;
    gap:clamp(15px,3vw,20px);
    padding:clamp(20px,4vw,25px);
}

.jr-interactive-thumbnail {
    position:relative;
    width:100%;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    background:#f0f0f0;
}

.jr-interactive-thumbnail img {
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
}

.jr-interactive-play-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(60px,12vw,80px);
    height:clamp(60px,12vw,80px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(24px,5vw,32px);
    opacity:0;
    transition:var(--jr-slider-transition);
    border:none;
    cursor:pointer;
}

.jr-interactive-card:hover .jr-interactive-play-btn {
    opacity:1;
}

.jr-interactive-details {
    flex:1;
}

.jr-interactive-title {
    font-size:clamp(20px,4vw,24px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-interactive-creator {
    font-size:clamp(16px,3vw,18px);
    color:#666;
    margin:0 0 12px 0;
}

.jr-interactive-stats {
    margin-bottom:15px;
}

.jr-stat-item {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:clamp(14px,2.5vw,16px);
    color:#888;
}

.jr-stat-item i {
    font-size:clamp(16px,3vw,18px);
}

.jr-interactive-actions {
    display:flex;
    gap:clamp(8px,2vw,12px);
    flex-wrap:wrap;
    margin-top:15px;
}

.jr-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:clamp(8px,2vw,12px) clamp(12px,3vw,16px);
    background:#f8f9fa;
    color:#666;
    text-decoration:none;
    border-radius:20px;
    font-weight:500;
    font-size:clamp(13px,2.5vw,15px);
    transition:var(--jr-slider-transition);
    border:1px solid #e9ecef;
    cursor:pointer;
}

.jr-action-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    border-color:var(--jr-slider-primary);
    transform:translateY(-1px);
}

.jr-action-btn i {
    font-size:clamp(14px,3vw,16px);
}

.jr-interactive-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:clamp(20px,4vw,25px);
    padding:0 clamp(10px,2vw,15px);
}

.jr-interactive-nav-btn {
    width:clamp(45px,9vw,55px);
    height:clamp(45px,9vw,55px);
    border-radius:50%;
    border:none;
    background:#f8f9fa;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(18px,4vw,22px);
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.jr-interactive-nav-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.05);
}

.jr-interactive-dots {
    display:flex;
    gap:8px;
    align-items:center;
}

.jr-interactive-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-interactive-dot.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-interactive-dot:hover {
    background:#bbb;
}

/* ===============================================
   THUMBNAIL STRIP SLIDER STYLES
   =============================================== */

.jr-slider-thumbnail-showcase {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-thumbnail-showcase h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-thumbnail-main-container {
    margin-bottom:clamp(15px,4vw,20px);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.jr-thumbnail-main {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-thumbnail-main img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-thumbnail-main-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(20px,5vw,30px);
    background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);
    color:white;
}

.jr-thumbnail-main-overlay h4 {
    font-size:clamp(20px,5vw,28px);
    font-weight:700;
    margin:0 0 8px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.jr-thumbnail-main-overlay p {
    font-size:clamp(14px,3vw,16px);
    margin:0;
    opacity:0.9;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.jr-thumbnail-strip {
    display:flex;
    gap:clamp(8px,2vw,12px);
    overflow-x:auto;
    padding:clamp(10px,2.5vw,15px);
    scrollbar-width:thin;
    scrollbar-color:#ccc transparent;
}

.jr-thumbnail-strip::-webkit-scrollbar {
    height:4px;
}

.jr-thumbnail-strip::-webkit-scrollbar-track {
    background:#f1f1f1;
    border-radius:2px;
}

.jr-thumbnail-strip::-webkit-scrollbar-thumb {
    background:#ccc;
    border-radius:2px;
}

.jr-thumbnail-strip::-webkit-scrollbar-thumb:hover {
    background:#999;
}

.jr-thumbnail-item {
    flex:0 0 clamp(120px,18vw,160px);
    position:relative;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    opacity:0.7;
}

.jr-thumbnail-item:hover {
    opacity:1;
    transform:scale(1.05);
}

.jr-thumbnail-item.active {
    opacity:1;
    border:3px solid var(--jr-slider-primary);
}

.jr-thumbnail-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ===============================================
   TIMELINE SLIDER STYLES
   =============================================== */

.jr-slider-timeline-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-timeline-container h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-timeline-controls {
    display:flex;
    justify-content:center;
    gap:clamp(10px,2.5vw,15px);
    margin-bottom:clamp(25px,5vw,35px);
    flex-wrap:wrap;
}

.jr-timeline-period {
    padding:clamp(8px,2vw,12px) clamp(16px,4vw,20px);
    background:#f8f9fa;
    border:2px solid #e9ecef;
    border-radius:var(--jr-slider-border-radius);
    color:#666;
    text-decoration:none;
    font-weight:500;
    font-size:clamp(14px,3vw,16px);
    transition:var(--jr-slider-transition);
    cursor:pointer;
}

.jr-timeline-period:hover {
    background:#e9ecef;
    border-color:var(--jr-slider-primary);
    color:var(--jr-slider-primary);
}

.jr-timeline-period.active {
    background:var(--jr-slider-primary);
    border-color:var(--jr-slider-primary);
    color:white;
}

.jr-timeline-items {
    position:relative;
    min-height:400px;
}

.jr-timeline-item {
    position:relative;
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,4vw,25px);
    margin-bottom:clamp(20px,4vw,25px);
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    border-left:4px solid var(--jr-slider-primary);
}

.jr-timeline-card {
    display:flex;
    gap:clamp(15px,3vw,20px);
    align-items:flex-start;
}

.jr-timeline-image {
    flex-shrink:0;
    width:clamp(80px,15vw,120px);
    height:clamp(80px,15vw,120px);
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    background:#f0f0f0;
}

.jr-timeline-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-timeline-info {
    flex:1;
    min-width:0;
}

.jr-timeline-item:hover {
    transform:translateX(5px);
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
}

.jr-timeline-item:before {
    content:'';
    position:absolute;
    left:-12px;
    top:20px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--jr-slider-primary);
}

.jr-timeline-date {
    font-size:clamp(12px,2.5vw,14px);
    color:#888;
    margin-bottom:8px;
    font-weight:500;
}

.jr-timeline-title {
    font-size:clamp(18px,4vw,22px);
    font-weight:600;
    margin:0 0 10px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.jr-timeline-description {
    font-size:clamp(14px,3vw,16px);
    color:#666;
    margin:0 0 12px 0;
    line-height:1.5;
}

.jr-timeline-creator {
    font-size:clamp(13px,2.5vw,14px);
    color:#888;
    margin:0;
}

.jr-timeline-stats {
    display:flex;
    gap:15px;
    font-size:clamp(12px,2vw,13px);
    color:#888;
    margin-top:10px;
}

/* ===============================================
   MASONRY GRID SLIDER STYLES
   =============================================== */

.jr-slider-masonry-container {
    margin-bottom:clamp(20px,5vw,35px);
    background:white;
    border-radius:var(--jr-slider-border-radius);
    padding:clamp(20px,5vw,30px);
    box-shadow:var(--jr-slider-shadow);
}

.jr-slider-masonry-container h3 {
    font-size:clamp(1.3em,3.5vw,1.6em);
    font-weight:600;
    margin:0 0 clamp(15px,4vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.jr-masonry-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:clamp(20px,4vw,25px);
}

.jr-masonry-item {
    background:white;
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:var(--jr-slider-transition);
    animation:jrMasonryFadeIn 0.6s ease forwards;
    opacity:0;
}

.jr-slider-masonry-container.jr-masonry-loaded .jr-masonry-item {
    animation-play-state:running;
}

.jr-masonry-item:hover,
.jr-masonry-item.jr-masonry-hover {
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.jr-masonry-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.jr-masonry-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jr-masonry-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,70px);
    height:clamp(50px,10vw,70px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,4vw,28px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.jr-masonry-item:hover .jr-masonry-play-overlay {
    opacity:1;
}

.jr-masonry-duration {
    position:absolute;
    bottom:clamp(8px,2vw,12px);
    right:clamp(8px,2vw,12px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
}

.jr-masonry-info {
    padding:clamp(15px,3vw,20px);
}

.jr-masonry-title {
    font-size:clamp(16px,3.5vw,19px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-masonry-creator {
    font-size:clamp(14px,2.5vw,15px);
    color:#666;
    margin:0 0 8px 0;
}

.jr-masonry-description {
    font-size:clamp(13px,2.5vw,14px);
    color:#888;
    margin:0 0 10px 0;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.jr-masonry-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(12px,2vw,13px);
    color:#888;
}

@keyframes jrMasonryFadeIn {
    to {
        opacity:1;
        transform:translateY(0);
    }
    from {
        opacity:0;
        transform:translateY(20px);
    }
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

/* Extra large screens */
@media (min-width:1201px) {
    .jr-slider-hero-container {
        height:500px !important; /* Larger height for big screens */
    }
}

/* Large screens */
@media (max-width:1200px) {
    .jr-slider-hero-container {
        height:450px !important; /* Standard height for large screens */
    }

    .jr-carousel-item {
        flex:0 0 clamp(220px,20vw,280px);
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    }
}

/* Medium screens */
@media (max-width:992px) {
    .jr-hero-controls {
        flex-direction:column;
        gap:15px;
    }

    .jr-carousel-item {
        flex:0 0 240px;
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }
}

/* Small screens */
@media (max-width:768px) {
    .jr-slider-hero-container {
        height:300px !important; /* Small screen height */
    }

    .jr-hero-controls {
        flex-direction:column;
        gap:10px;
        padding:10px;
    }

    .jr-hero-prev-btn,
    .jr-hero-next-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-hero-info {
        font-size:14px;
    }

    .jr-mini-nav {
        padding:0 5px;
    }

    .jr-carousel-item {
        flex:0 0 200px;
    }

    .jr-carousel-prev-btn,
    .jr-carousel-next-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-tab-buttons {
        gap:5px;
    }

    .jr-tab-btn {
        padding:8px 16px;
        font-size:14px;
    }

    .jr-tab-content {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:15px;
    }

    .jr-vertical-nav-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-interactive-nav {
        padding:0 5px;
    }

    .jr-interactive-nav-btn {
        width:40px;
        height:40px;
        font-size:16px;
    }

    .jr-timeline-controls {
        gap:8px;
    }

    .jr-timeline-period {
        padding:8px 12px;
        font-size:14px;
    }

    .jr-masonry-grid {
        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
        gap:15px;
    }
}

/* Extra small screens */
@media (max-width:480px) {
    .jr-slider-hero-container {
        margin-bottom:20px;
        height:250px !important; /* Smaller height for mobile */
    }

    .jr-hero-controls {
        padding:8px;
    }

    .jr-hero-prev-btn,
    .jr-hero-next-btn {
        width:35px;
        height:35px;
        font-size:14px;
    }

    .jr-hero-info {
        font-size:12px;
    }

    .jr-hero-dots {
        bottom:15px;
    }

    .jr-hero-dot {
        width:6px;
        height:6px;
    }

    .jr-hero-dot.active {
        width:10px;
        height:10px;
    }

    .jr-mini-slide {
        padding:8px;
    }

    .jr-carousel-item {
        flex:0 0 160px;
    }

    .jr-carousel-prev-btn,
    .jr-carousel-next-btn {
        width:35px;
        height:35px;
        font-size:14px;
    }

    .jr-tab-content {
        grid-template-columns:1fr;
        gap:12px;
    }

    .jr-timeline-item {
        padding:15px;
        margin-bottom:15px;
    }

    .jr-masonry-grid {
        grid-template-columns:1fr;
        gap:12px;
    }
}

/* modules/jrVideo/css/watch.css */


/* jrVideo module Watch view CSS */

/* Preserve rounded corners in player when theater mode is active */
.amv-theater-mode .amv-html5-player.amv-theater { border-radius:12px !important; overflow:hidden; }
.amv-theater-mode .amv-html5-player.amv-theater .amv-video { border-radius:12px; }

/* Default layout:player with sidebar on the right */
.watch-row .col3 { float:right; }

/* Expand main column and hide default sidebar column in theater */
.amv-theater-mode .watch-row .col3 { display:none !important; }
.amv-theater-mode .watch-row .col9 { width:100% !important; }
.amv-theater-mode #video_play .wrap { padding:0 !important; }

/* Comments + Sidebar side-by-side in theater mode */
.comments-with-sidebar { display:block; }
.comments-with-sidebar .comments-content { min-width:0; }
.amv-theater-mode .comments-with-sidebar { display:flex; gap:16px; align-items:flex-start; }
.amv-theater-mode .comments-with-sidebar .comments-content { flex:1 1 auto; }
.amv-theater-mode #watch-sidebar { width:320px; max-width:100%; }
.more_buttons {
  background:#333 linear-gradient(#444,#222);
  height:auto;
  border:none;
  cursor:pointer;
  border-radius:10px;
  margin:3px;
  color:white;
  font-size:12px;
  width:auto;
  padding-right:6px;
  padding-left:6px;
  padding-top:3px;
  padding-bottom:5px;
  vertical-align:middle;
  text-transform:capitalize;
  font-weight:bold;
}


/* Basic sidebar playlist item styles (complements player CSS) */
.amv-pl { display:flex; flex-direction:column; gap:8px; }
.amv-pl-item { display:flex; gap:10px; align-items:center; padding:6px; border-radius:6px; background:#0b0b0b; }
.amv-pl-item:hover { background:#111; }
.amv-pl-thumb { width:100px; height:56px; flex:0 0 100px; border-radius:6px; overflow:hidden; background:#222; display:block; }
.amv-pl-img { width:100%; height:100%; object-fit:cover; display:block; }
.amv-pl-noimg { display:block; width:100%; height:100%; background:linear-gradient(135deg,#333,#222); }
.amv-pl-meta { display:flex; flex-direction:column; min-width:0; }
.amv-pl-title { font:13px/1.3 sans-serif; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amv-pl-sub { font:11px/1.2 sans-serif; color:#bbb; display:flex; gap:6px; align-items:center; }




/* modules/jrVideo/css/explore.css */


/**
 * jrVideo Explore Page Styles
 * Enhanced version with hero slider,mini sliders,and hover preview
 *
 * @copyright 2026 The Jamroom Network / The Arcitech
 */

/* Main Layout */
.explore-main-col {
    padding-right:20px;
}

.explore-sidebar-col {
    padding-left:20px;
}

/* Hero Section */
.explore-hero {
    position:relative;
    width:100%;
    height:450px;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:30px;
    box-shadow:0 8px 30px rgba(0,0,0,0.2);
    background:#f0f0f0;
}

.hero-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
    pointer-events:none;
}

.hero-slide.active {
    opacity:1;
    pointer-events:all;
}

.hero-image-container {
    position:relative;
    width:100%;
    height:100%;
}

.hero-image-container img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-info-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:30px;
    background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 50%,transparent 100%);
    color:white;
}

.featured-badge {
    display:inline-block;
    background:rgba(255,215,0,0.9);
    color:#1a1a1a;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:10px;
}

.hero-title {
    font-size:32px;
    font-weight:700;
    margin:10px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.hero-artist {
    font-size:16px;
    margin:8px 0;
    opacity:0.95;
}

.hero-genre {
    display:inline-block;
    background:rgba(255,255,255,0.2);
    padding:4px 12px;
    border-radius:16px;
    font-size:14px;
    margin:8px 0;
}

.hero-stats {
    display:flex;
    gap:20px;
    margin:12px 0;
    font-size:14px;
}

.hero-play-btn {
    display:inline-block;
    background:#ff0000;
    color:white;
    padding:12px 32px;
    border-radius:24px;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    margin-top:12px;
    transition:all 0.3s ease;
}

.hero-play-btn:hover {
    background:#cc0000;
    transform:scale(1.05);
}

/* Hero Navigation Dots */
.hero-nav-dots {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

.hero-dot {
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:all 0.3s ease;
}

.hero-dot:hover,
.hero-dot.active {
    background:white;
    width:32px;
    border-radius:6px;
}

/* Mini Sliders for Sidebar */
.sidebar-mini-slider {
    margin-bottom:30px;
    background:#f8f9fa;
    border-radius:8px;
    padding:15px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.sidebar-title {
    font-size:16px;
    font-weight:700;
    margin:0 0 15px 0;
    color:#333;
}

.mini-slider-container {
    position:relative;
    height:200px;
    overflow:hidden;
    border-radius:6px;
}

.mini-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.5s ease;
    pointer-events:none;
}

.mini-slide.active {
    opacity:1;
    pointer-events:all;
}

.mini-slide-image {
    position:relative;
    width:100%;
    height:100%;
    border-radius:6px;
    overflow:hidden;
}

.mini-slide-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-slide-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:15px;
    background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,transparent 100%);
    color:white;
}

.mini-badge {
    display:inline-block;
    background:rgba(255,255,255,0.9);
    color:#1a1a1a;
    padding:3px 8px;
    border-radius:12px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:8px;
}

.mini-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 5px 0;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.mini-artist {
    font-size:12px;
    margin:0;
    opacity:0.9;
}

.mini-play-btn {
    position:absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:16px;
    transition:all 0.3s ease;
    opacity:0;
}

.mini-slide:hover .mini-play-btn {
    opacity:1;
    background:#ff0000;
    color:white;
}

.mini-nav {
    display:flex;
    justify-content:space-between;
    margin-top:10px;
}

.mini-nav-btn {
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    border:2px solid #ddd;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
}

.mini-nav-btn:hover {
    background:#ff0000;
    border-color:#ff0000;
    color:white;
}

/* Sidebar Stats */
.sidebar-stats {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.stat-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid #eee;
}

.stat-item:last-child {
    border-bottom:none;
}

.stat-label {
    font-weight:600;
    color:#666;
    font-size:13px;
}

.stat-value {
    font-weight:500;
    color:#333;
    font-size:13px;
    text-align:right;
}

/* Category Pills */
.category-pills {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
    padding:20px 0;
    border-bottom:1px solid #e0e0e0;
}

.pill {
    padding:8px 20px;
    border-radius:24px;
    background:#f0f0f0;
    color:#333;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:all 0.2s ease;
}

.pill:hover {
    background:#e0e0e0;
    color:#000;
}

.pill.active {
    background:#ff0000;
    color:white;
}

/* Videos Section */
.videos-section {
    margin-bottom:40px;
}

.section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.section-header h3 {
    font-size:20px;
    font-weight:700;
    margin:0;
    color:#333;
}

.section-more {
    color:#ff0000;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:color 0.2s ease;
}

.section-more:hover {
    color:#cc0000;
}

.sort-controls select {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:6px;
    background:white;
    font-size:14px;
}

/* Video Grid */
.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
    margin-bottom:20px;
}

.video-card {
    background:white;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    position:relative;
}

.video-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.video-card a {
    text-decoration:none;
    color:inherit;
}

.video-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio */
    background:#f0f0f0;
    overflow:hidden;
}

.video-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform:scale(1.05);
}

.duration {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.85);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}

.video-info {
    padding:12px;
}

.video-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4;
}

.video-channel {
    font-size:13px;
    color:#666;
    margin:0 0 8px 0;
}

.video-meta {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#888;
}

.views,.date {
    display:inline-block;
}

/* Hover Preview Styles */
.hover-preview-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
}

.hover-preview-overlay video {
    width:100%;
    height:100%;
    object-fit:cover;
    border:none;
}

/* Explore Page Wrapper */
.explore-page-wrapper {
    margin-top:40px;
}

/* Explore Sections */
.explore-section {
    margin-bottom:40px;
}

.explore-section-header {
    font-size:24px;
    font-weight:800;
    margin:0 0 20px 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:10px;
}

.section-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.section-icon.new-releases {
    background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);
}

.section-icon.trending {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

.section-icon.comments {
    background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
}

.section-icon i {
    color:white;
    font-size:18px;
}

.explore-content-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.explore-track-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    border:1px solid #e0e0e0;
}

.explore-track-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.explore-card-image-wrap {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio */
    background:#f0f0f0;
    overflow:hidden;
}

.explore-card-image-wrap img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.explore-card-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.3s ease;
}

.explore-track-card:hover .explore-card-overlay {
    opacity:1;
}

.explore-card-play-btn {
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    transition:all 0.3s ease;
}

.explore-card-play-btn:hover {
    background:#ff0000;
    color:white;
    transform:scale(1.1);
}

.explore-card-info {
    padding:15px;
}

.explore-card-title {
    font-size:16px;
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.4;
}

.explore-card-title a {
    text-decoration:none;
    color:inherit;
}

.explore-card-title a:hover {
    color:#ff0000;
}

.explore-card-artist {
    font-size:14px;
    color:#666;
    margin:0 0 5px 0;
}

.comment-count {
    font-size:12px;
    color:#888;
    font-style:italic;
}

/* Quick Lists Section */
.quick-lists-section {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:20px;
    margin:30px 0;
}

.explore-quick-lists-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:20px;
}

.quick-list-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    border:1px solid #e0e0e0;
    transition:all 0.3s ease;
}

.quick-list-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.quick-list-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);
    color:white;
}

.quick-list-title {
    font-size:16px;
    font-weight:600;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.quick-list-more {
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:5px;
    transition:opacity 0.2s ease;
}

.quick-list-more:hover {
    opacity:0.8;
}

.quick-list-items {
    padding:15px 20px;
}

.quick-list-item {
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #f0f0f0;
    transition:background-color 0.2s ease;
}

.quick-list-item:last-child {
    border-bottom:none;
}

.quick-list-item:hover {
    background-color:#f8f9fa;
}

.quick-list-link {
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    width:100%;
}

.quick-list-image {
    width:50px;
    height:50px;
    border-radius:8px;
    margin-right:15px;
    flex-shrink:0;
}

.quick-list-info {
    flex:1;
    min-width:0;
}

.quick-list-video-title {
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
    color:#1a1a1a;
    line-height:1.3;
}

.quick-list-channel {
    font-size:12px;
    color:#666;
    margin-bottom:2px;
}

.quick-list-stat {
    font-size:11px;
    color:#888;
    margin-right:10px;
}

/* Category Cards */
.category-cards-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    margin-top:20px;
}

.category-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    border:1px solid #e0e0e0;
}

.category-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.category-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white;
}

.category-title {
    font-size:16px;
    font-weight:600;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.category-link {
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:5px;
    transition:opacity 0.2s ease;
}

.category-link:hover {
    opacity:0.8;
}

.category-preview {
    padding:15px 20px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.category-video-thumb {
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:1;
}

.category-video-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s ease;
}

.category-video-thumb:hover img {
    transform:scale(1.05);
}

/* Active Filters */
.active-filters-row {
    margin:15px 0;
    padding:10px;
    background:#f8f9fa;
    border-radius:5px;
}

.active-filter-tag {
    background:#e74c3c;
    color:white;
    padding:4px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.active-filter-tag a {
    color:white;
    text-decoration:none;
    font-weight:bold;
    margin-left:6px;
}

.active-filter-tag a:hover {
    opacity:0.8;
}

/* Pagination */
.pagination {
    margin-top:30px;
    text-align:center;
}

.pagination a,
.pagination span {
    display:inline-block;
    padding:8px 12px;
    margin:0 2px;
    border:1px solid #ddd;
    border-radius:4px;
    text-decoration:none;
    color:#666;
    transition:all 0.2s ease;
}

.pagination a:hover,
.pagination .current {
    background:#ff0000;
    color:white;
    border-color:#ff0000;
}

/* No Content */
.no-content {
    text-align:center;
    padding:60px 20px;
    color:#666;
}

.no-content i {
    display:block;
    margin-bottom:20px;
    opacity:0.5;
}

.no-content p {
    font-size:16px;
    margin-bottom:20px;
}

/* Responsive Design */
@media (max-width:1200px) {
    .video-grid {
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
        gap:15px;
    }
}

@media (max-width:768px) {
    .explore-main-col,
    .explore-sidebar-col {
        padding:0;
    }

    .explore-hero {
        height:350px;
        margin-bottom:20px;
    }

    .hero-info-overlay {
        padding:20px;
    }

    .hero-title {
        font-size:24px;
    }

    .hero-play-btn {
        padding:10px 24px;
        font-size:14px;
    }

    .category-pills {
        gap:8px;
    }

    .pill {
        padding:6px 16px;
        font-size:13px;
    }

    .section-header {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .video-grid {
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:12px;
    }

    .explore-section-header {
        font-size:20px;
    }

    .explore-content-grid {
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
        gap:15px;
    }

    .explore-card-play-btn {
        width:50px;
        height:50px;
        font-size:20px;
    }

    .quick-lists-section {
        grid-template-columns:1fr;
        gap:15px;
        margin:20px 0;
    }

    .explore-quick-lists-grid {
        grid-template-columns:1fr;
        gap:15px;
    }

    .quick-list-header {
        padding:12px 15px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .quick-list-items {
        padding:12px 15px;
    }

    .quick-list-item {
        padding:8px 0;
    }

    .quick-list-image {
        width:40px;
        height:40px;
        margin-right:12px;
    }

    .quick-list-video-title {
        font-size:13px;
    }

    .category-cards-grid {
        grid-template-columns:1fr;
        gap:15px;
    }

    .category-header {
        padding:12px 15px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .category-preview {
        grid-template-columns:repeat(4,1fr);
        padding:12px 15px;
    }

    .mini-slider-container {
        height:180px;
    }

    .sidebar-mini-slider {
        padding:12px;
    }
}

/* JR Video Slider System - Themeable and Responsive */

/* Base Slider Variables */
:root {
    --jr-slider-border-radius:8px;
    --jr-slider-shadow:0 4px 12px rgba(0,0,0,0.1);
    --jr-slider-transition:all 0.3s ease;
    --jr-slider-primary:#ff0000;
    --jr-slider-secondary:#667eea;
    --jr-slider-accent:#764ba2;
}

/* Theme Overrides */
.jr-slider-theme-dark {
    --jr-slider-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.jr-slider-theme-light {
    --jr-slider-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.jr-slider-theme-colorful {
    --jr-slider-primary:#ff6b6b;
    --jr-slider-secondary:#4ecdc4;
    --jr-slider-accent:#45b7d1;
}

.jr-slider-theme-minimal {
    --jr-slider-shadow:none;
    --jr-slider-border-radius:4px;
}

/* Sliders Showcase Page Styles */
.sliders-showcase-header {
    text-align:center;
    padding:20px;
    background:linear-gradient(135deg,var(--jr-slider-secondary) 0%,var(--jr-slider-accent) 100%);
    color:white;
    border-radius:var(--jr-slider-border-radius);
    margin-bottom:20px;
    width:100%;
    box-sizing:border-box;
}

.sliders-showcase-header h1 {
    font-size:clamp(1.5em,5vw,2.5em);
    margin:0 0 10px 0;
    font-weight:800;
}

.sliders-showcase-header p {
    font-size:clamp(0.9em,3vw,1.2em);
    margin:0;
    opacity:0.9;
}

.slider-section {
    margin-bottom:clamp(15px,5vw,40px);
    width:100%;
    box-sizing:border-box;
}

.slider-section-title {
    font-size:clamp(1.2em,4vw,1.8em);
    font-weight:700;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px 0;
    flex-wrap:wrap;
}

.slider-type {
    font-size:clamp(0.6em,2vw,0.8em);
    background:#667eea;
    color:white;
    padding:3px 10px;
    border-radius:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px;
    white-space:nowrap;
}

.slider-description {
    color:#666;
    font-size:clamp(0.85em,2.5vw,1em);
    margin-bottom:clamp(15px,4vw,30px);
    padding:clamp(10px,3vw,20px);
    background:#f8f9fa;
    border-radius:8px;
    border-left:4px solid #667eea;
    width:100%;
    box-sizing:border-box;
}

/* JR Hero Slider */
.jr-slider-hero-container {
    position:relative;
    width:100%;
    padding-top:clamp(40%,56.25%,70%); /* Responsive 16:9 with flexibility */
    border-radius:var(--jr-slider-border-radius);
    overflow:hidden;
    margin-bottom:clamp(15px,4vw,30px);
    box-shadow:var(--jr-slider-shadow);
    background:#f0f0f0;
    max-width:100%;
    box-sizing:border-box;
    transition:var(--jr-slider-transition);
}

.jr-hero-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease;
}

.jr-hero-slide.active {
    opacity:1;
}

.jr-hero-image-container {
    position:relative;
    width:100%;
    height:100%;
}

.jr-hero-info-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(20px,5vw,40px);
    background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 50%,transparent 100%);
    color:white;
}

.jr-hero-info-overlay h3 {
    font-size:clamp(20px,5vw,32px);
    font-weight:700;
    margin:10px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.jr-hero-play-btn {
    display:inline-block;
    background:var(--jr-slider-primary);
    color:white;
    padding:12px 32px;
    border-radius:24px;
    text-decoration:none;
    font-weight:600;
    margin-top:12px;
    transition:var(--jr-slider-transition);
}

.jr-hero-play-btn:hover {
    background:var(--jr-slider-secondary);
    transform:translateY(-2px);
}

.jr-hero-controls {
    position:absolute;
    bottom:clamp(15px,4vw,25px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:clamp(15px,4vw,25px);
    background:rgba(255,255,255,0.9);
    padding:clamp(10px,3vw,15px) clamp(20px,5vw,30px);
    border-radius:25px;
    backdrop-filter:blur(10px);
}

.jr-hero-prev-btn,
.jr-hero-next-btn {
    width:clamp(35px,7vw,45px);
    height:clamp(35px,7vw,45px);
    border-radius:50%;
    border:none;
    background:#f0f0f0;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--jr-slider-transition);
    font-size:clamp(16px,3.5vw,20px);
}

.jr-hero-prev-btn:hover,
.jr-hero-next-btn:hover {
    background:var(--jr-slider-primary);
    color:white;
    transform:scale(1.1);
}

.jr-hero-info {
    font-weight:500;
    color:#333;
    font-size:clamp(14px,3vw,16px);
}

.jr-hero-current-slide {
    font-weight:bold;
    color:var(--jr-slider-primary);
}

.jr-hero-dots {
    position:absolute;
    bottom:clamp(20px,5vw,30px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.jr-hero-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:var(--jr-slider-transition);
}

.jr-hero-dot.active {
    background:var(--jr-slider-primary);
    width:12px;
    height:12px;
}

.jr-hero-dot:hover {
    background:rgba(255,255,255,0.8);
}

.slider-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:15px;
    background:rgba(0,0,0,0.8);
    color:white;
}

.slider-control-btn {
    background:rgba(255,255,255,0.2);
    border:none;
    color:white;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s ease;
}

.slider-control-btn:hover {
    background:#ff0000;
}

.slider-info {
    font-weight:500;
}

/* Mini Slider Showcase */
.mini-slider-showcase {
    margin-bottom:30px;
}

.mini-slider-showcase h3 {
    font-size:1.2em;
    font-weight:600;
    margin:0 0 15px 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
}

.mini-slider-showcase h3:before {
    content:"🎬";
    font-size:0.8em;
}

/* Creator Slider Showcase */
.creator-slider-showcase {
    margin:30px 0;
}

/* Category Cards Showcase */
.category-cards-showcase {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    margin:30px 0;
}

/* Hover Preview Showcase */
.hover-preview-showcase {
    margin:30px 0;
    padding:20px;
    background:#f8f9fa;
    border-radius:12px;
}

.hover-preview-showcase h3 {
    font-size:1.4em;
    font-weight:700;
    margin:0 0 20px 0;
    color:#1a1a1a;
    text-align:center;
}

/* Slider Comparison */
.slider-comparison {
    margin:40px 0;
}

.comparison-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.comparison-item {
    background:white;
    border-radius:12px;
    padding:25px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
    border:1px solid #e0e0e0;
    transition:all 0.3s ease;
}

.comparison-item:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.comparison-item h4 {
    font-size:1.3em;
    font-weight:700;
    margin:0 0 15px 0;
    color:#1a1a1a;
    display:flex;
    align-items:center;
    gap:8px;
}

.comparison-item h4:before {
    content:"⚡";
    font-size:0.8em;
}

.comparison-item ul {
    list-style:none;
    padding:0;
    margin:0 0 15px 0;
}

.comparison-item li {
    padding:5px 0;
    color:#555;
    position:relative;
    padding-left:20px;
}

    .comparison-item h4:before {
        content:"";
        margin-right:8px;
    }

    .comparison-item li:before {
        content:"✓";
        color:#28a745;
        font-weight:bold;
        position:absolute;
        left:0;
    }

    .use-case {
        font-style:italic;
        color:#667eea;
        font-weight:600;
        font-size:0.9em;
        border-top:1px solid #eee;
        padding-top:10px;
        margin-top:15px;
    }
}

/* Carousel Sliders */
.carousel-showcase {
    margin:30px 0;
    padding:20px;
    background:#f8f9fa;
    border-radius:12px;
}

.carousel-showcase h3 {
    font-size:1.4em;
    font-weight:700;
    margin:0 0 20px 0;
    color:#1a1a1a;
    text-align:center;
}

.carousel-container {
    position:relative;
    overflow:hidden;
    border-radius:8px;
}

.carousel-wrapper {
    display:flex;
    gap:15px;
    padding:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.carousel-wrapper::-webkit-scrollbar {
    display:none;
}

.carousel-item {
    flex:0 0 280px;
    transition:transform 0.3s ease;
}

.carousel-item:hover {
    transform:scale(1.02);
}

.carousel-video-card {
    background:white;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
}

.carousel-video-card:hover {
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    transform:translateY(-2px);
}

.carousel-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.carousel-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.carousel-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    opacity:0;
    transition:opacity 0.3s ease;
}

.carousel-video-card:hover .carousel-play-overlay {
    opacity:1;
}

.carousel-duration {
    position:absolute;
    bottom:clamp(6px,1.5vw,10px);
    right:clamp(6px,1.5vw,10px);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:2px 6px;
    border-radius:4px;
    font-size:clamp(10px,2.5vw,12px);
    font-weight:600;
}

.carousel-info {
    padding:clamp(10px,2.5vw,15px);
}

.carousel-title {
    font-size:clamp(12px,3vw,14px);
    font-weight:600;
    margin:0 0 6px 0;
    color:#1a1a1a;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.carousel-creator {
    font-size:clamp(11px,2.5vw,13px);
    color:#666;
    margin:0 0 6px 0;
}

.carousel-stats {
    display:flex;
    justify-content:space-between;
    font-size:clamp(10px,2vw,12px);
    color:#888;
}

.carousel-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:clamp(35px,7vw,45px);
    height:clamp(35px,7vw,45px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    z-index:10;
}

.carousel-nav:hover {
    background:#ff0000;
    color:white;
    transform:translateY(-50%) scale(1.1);
}

.carousel-prev {
    left:clamp(8px,2vw,15px);
}

.carousel-next {
    right:clamp(8px,2vw,15px);
}

/* Thumbnail Strip Sliders */
.thumbnail-strip-showcase {
    margin:clamp(20px,6vw,40px) 0;
    padding:clamp(15px,4vw,25px);
    background:#f8f9fa;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.thumbnail-strip-showcase h3 {
    font-size:clamp(1.1em,3.5vw,1.4em);
    font-weight:700;
    margin:0 0 clamp(15px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.thumbnail-strip-container {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    width:100%;
}

.thumbnail-main-image {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.thumbnail-main-image img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumbnail-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(15px,4vw,30px);
    background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 50%,transparent 100%);
    color:white;
}

.thumbnail-overlay h3 {
    font-size:clamp(18px,5vw,24px);
    font-weight:700;
    margin:0 0 8px 0;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

.thumbnail-overlay p {
    font-size:clamp(14px,4vw,16px);
    margin:0;
    opacity:0.9;
}

.thumbnail-strip {
    display:flex;
    gap:clamp(8px,2vw,15px);
    padding:clamp(12px,3vw,20px);
    background:#f8f9fa;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    justify-content:flex-start;
}

.thumbnail-strip::-webkit-scrollbar {
    display:none;
}

.thumbnail-item {
    flex:0 0 clamp(60px,8vw,90px);
    height:clamp(45px,6vw,80px);
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    border:3px solid transparent;
    transition:all 0.3s ease;
    min-width:0;
}

.thumbnail-item:hover,
.thumbnail-item.active {
    border-color:#ff0000;
    transform:scale(1.05);
}

.thumbnail-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Vertical Sliders */
.vertical-slider-showcase {
    margin-bottom:clamp(20px,5vw,40px);
    padding:clamp(15px,4vw,25px);
    background:#f8f9fa;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.vertical-slider-showcase h3 {
    font-size:clamp(1.1em,3vw,1.3em);
    font-weight:600;
    margin:0 0 clamp(12px,3vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.vertical-slider-container {
    height:clamp(350px,50vh,600px);
    overflow:hidden;
    border-radius:12px;
    position:relative;
    width:100%;
}

.vertical-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.5s ease;
    pointer-events:none;
}

.vertical-slide.active {
    opacity:1;
    pointer-events:all;
}

.vertical-video-card {
    height:100%;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    width:100%;
}

.vertical-thumbnail {
    position:relative;
    width:100%;
    flex:1;
    background:#f0f0f0;
    overflow:hidden;
}

.vertical-thumbnail img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.vertical-play-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(50px,10vw,80px);
    height:clamp(50px,10vw,80px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,5vw,30px);
}

.vertical-info {
    padding:clamp(15px,3vw,25px);
    background:white;
}

.vertical-title {
    font-size:clamp(14px,3.5vw,18px);
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.4;
}

.vertical-creator {
    font-size:clamp(12px,2.5vw,14px);
    color:#666;
    margin:0 0 12px 0;
}

.vertical-actions {
    display:flex;
    gap:clamp(10px,2.5vw,15px);
    justify-content:center;
}

.vertical-action-btn {
    width:clamp(35px,8vw,50px);
    height:clamp(35px,8vw,50px);
    border-radius:50%;
    border:none;
    background:#f0f0f0;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:clamp(14px,3vw,18px);
}

.vertical-action-btn:hover {
    background:#ff0000;
    color:white;
    transform:scale(1.1);
}

.vertical-nav {
    position:absolute;
    right:clamp(-50px,-10vw,-70px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:clamp(8px,2vw,15px);
}

.vertical-nav-btn {
    width:clamp(35px,7vw,50px);
    height:clamp(35px,7vw,50px);
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:clamp(14px,3vw,18px);
}

.vertical-nav-btn:hover {
    background:#ff0000;
    color:white;
    transform:scale(1.1);
}

.vertical-indicators {
    display:flex;
    flex-direction:column;
    gap:clamp(6px,1.5vw,10px);
}

.vertical-indicator {
    width:clamp(6px,1.5vw,10px);
    height:clamp(6px,1.5vw,10px);
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:all 0.3s ease;
}

.vertical-indicator.active {
    background:#ff0000;
    width:clamp(8px,2vw,14px);
    height:clamp(8px,2vw,14px);
}

/* Masonry Grid */
.masonry-slider-showcase {
    margin-bottom:clamp(20px,5vw,40px);
    padding:clamp(15px,4vw,25px);
    background:#f8f9fa;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.masonry-slider-showcase h3 {
    font-size:clamp(1.1em,3vw,1.3em);
    font-weight:600;
    margin:0 0 clamp(12px,3vw,20px) 0;
    color:#1a1a1a;
    text-align:center;
}

.masonry-container {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,180px),1fr));
    gap:clamp(12px,2.5vw,18px);
    padding:clamp(15px,4vw,25px);
    background:white;
    border-radius:8px;
    width:100%;
    box-sizing:border-box;
}

.masonry-item {
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:transform 0.3s ease;
    background:white;
}

.masonry-item:hover {
    transform:translateY(-5px);
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.masonry-card {
    height:100%;
    background:white;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.masonry-thumbnail {
    position:relative;
    width:100%;
    padding-top:60%; /* Maintain aspect ratio */
    background:#f0f0f0;
    overflow:hidden;
}

.masonry-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.masonry-overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(35px,8vw,50px);
    height:clamp(35px,8vw,50px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(16px,3.5vw,20px);
    opacity:0;
    transition:opacity 0.3s ease;
}

.masonry-item:hover .masonry-overlay {
    opacity:1;
}

.masonry-info {
    padding:clamp(10px,2vw,15px);
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.masonry-info h4 {
    font-size:clamp(11px,2.5vw,14px);
    font-weight:600;
    margin:0 0 4px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.masonry-info p {
    font-size:clamp(10px,2vw,12px);
    color:#666;
    margin:0;
}

/* Tabbed Sliders */
.tabbed-slider-showcase {
    margin:clamp(20px,6vw,40px) 0;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    width:100%;
    box-sizing:border-box;
}

.tabbed-slider-showcase h3 {
    font-size:clamp(1.1em,3.5vw,1.4em);
    font-weight:700;
    margin:0 0 clamp(15px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.tabbed-header {
    background:#f8f9fa;
    padding:0 clamp(15px,3vw,25px);
    border-bottom:1px solid #e0e0e0;
}

.tab-buttons {
    display:flex;
    gap:0;
    width:100%;
}

.tab-btn {
    flex:1;
    padding:clamp(12px,3vw,18px) clamp(15px,3vw,25px);
    border:none;
    background:transparent;
    color:#666;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s ease;
    border-bottom:3px solid transparent;
    font-size:clamp(13px,2.5vw,16px);
}

.tab-btn:hover,
.tab-btn.active {
    color:#ff0000;
    border-bottom-color:#ff0000;
    background:white;
}

.tab-content {
    padding:clamp(15px,4vw,25px);
}

.tab-pane {
    display:none;
    opacity:0;
    transition:opacity 0.3s ease;
}

.tab-pane.active {
    display:block;
    opacity:1;
}

.tab-slider {
    display:flex;
    gap:clamp(12px,2.5vw,20px);
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:clamp(8px,2vw,15px) 0;
}

.tab-slider::-webkit-scrollbar {
    display:none;
}

.tab-slide {
    flex:0 0 clamp(200px,20vw,280px);
    transition:transform 0.3s ease;
    min-width:0;
}

.tab-slide:hover {
    transform:scale(1.02);
}

.tab-card {
    background:white;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    border:1px solid #e0e0e0;
    width:100%;
}

.tab-image {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.tab-image img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.tab-details {
    padding:clamp(10px,2vw,15px);
}

.tab-details h4 {
    font-size:clamp(12px,2.5vw,15px);
    font-weight:600;
    margin:0 0 5px 0;
    color:#1a1a1a;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.tab-details p {
    font-size:clamp(10px,2vw,12px);
    color:#666;
    margin:0;
}

/* Interactive Sliders */
.interactive-slider-showcase {
    margin:clamp(20px,6vw,40px) 0;
    padding:clamp(15px,4vw,25px);
    background:#f8f9fa;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.interactive-slider-showcase h3 {
    font-size:clamp(1.1em,3.5vw,1.4em);
    font-weight:700;
    margin:0 0 clamp(15px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.interactive-slider {
    position:relative;
    height:clamp(350px,45vh,500px);
    overflow:hidden;
    border-radius:12px;
    background:white;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    width:100%;
}

.interactive-slide {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.5s ease;
    pointer-events:none;
}

.interactive-slide.active {
    opacity:1;
    pointer-events:all;
}

.interactive-card {
    height:100%;
    padding:clamp(20px,5vw,35px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
}

.interactive-main {
    display:flex;
    gap:clamp(20px,4vw,35px);
    align-items:center;
    margin-bottom:clamp(20px,5vw,35px);
    flex-wrap:wrap;
}

.interactive-thumbnail {
    position:relative;
    width:clamp(250px,30vw,350px);
    height:clamp(140px,17vw,200px);
    border-radius:8px;
    overflow:hidden;
    background:#f0f0f0;
    flex-shrink:0;
}

.interactive-thumbnail img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.interactive-play-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(45px,8vw,60px);
    height:clamp(45px,8vw,60px);
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(18px,4vw,24px);
    cursor:pointer;
    transition:all 0.3s ease;
}

.interactive-play-btn:hover {
    background:#ff0000;
    color:white;
    transform:translate(-50%,-50%) scale(1.1);
}

.interactive-details {
    flex:1;
    min-width:200px;
}

.interactive-title {
    font-size:clamp(18px,4.5vw,26px);
    font-weight:700;
    margin:0 0 8px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.interactive-creator {
    font-size:clamp(14px,3vw,16px);
    color:#666;
    margin:0 0 12px 0;
}

.interactive-stats {
    display:flex;
    gap:clamp(15px,3vw,25px);
    margin-bottom:clamp(15px,4vw,25px);
    flex-wrap:wrap;
}

.stat-item {
    display:flex;
    align-items:center;
    gap:5px;
    color:#888;
    font-size:clamp(12px,2.5vw,14px);
}

.interactive-actions {
    display:flex;
    gap:clamp(10px,2vw,15px);
    flex-wrap:wrap;
}

.action-btn {
    display:flex;
    align-items:center;
    gap:6px;
    padding:clamp(8px,2vw,12px) clamp(15px,3vw,25px);
    border:2px solid #e0e0e0;
    border-radius:25px;
    background:white;
    color:#666;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:clamp(12px,2.5vw,14px);
}

.action-btn:hover {
    border-color:#ff0000;
    color:#ff0000;
    transform:translateY(-2px);
}

.action-btn.liked {
    border-color:#ff0000;
    color:#ff0000;
    background:rgba(255,0,0,0.1);
}

.interactive-nav {
    position:absolute;
    bottom:clamp(15px,3vw,25px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:clamp(15px,3vw,25px);
    background:rgba(255,255,255,0.9);
    padding:clamp(8px,2vw,12px) clamp(15px,3vw,25px);
    border-radius:25px;
    backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.interactive-nav-btn {
    width:clamp(30px,6vw,40px);
    height:clamp(30px,6vw,40px);
    border-radius:50%;
    border:none;
    background:#f0f0f0;
    color:#666;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:clamp(14px,3vw,18px);
}

.interactive-nav-btn:hover {
    background:#ff0000;
    color:white;
    transform:scale(1.1);
}

.interactive-dots {
    display:flex;
    gap:clamp(6px,1.5vw,10px);
}

.interactive-dot {
    width:clamp(6px,1.5vw,10px);
    height:clamp(6px,1.5vw,10px);
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
    transition:all 0.3s ease;
}

.interactive-dot.active {
    background:#ff0000;
    width:clamp(8px,2vw,14px);
    height:clamp(8px,2vw,14px);
}

/* Timeline Sliders */
.timeline-slider-showcase {
    margin:clamp(20px,6vw,40px) 0;
    padding:clamp(15px,4vw,25px);
    background:#f8f9fa;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.timeline-slider-showcase h3 {
    font-size:clamp(1.1em,3.5vw,1.4em);
    font-weight:700;
    margin:0 0 clamp(15px,4vw,25px) 0;
    color:#1a1a1a;
    text-align:center;
}

.timeline-controls {
    display:flex;
    justify-content:center;
    gap:clamp(8px,2vw,15px);
    margin-bottom:clamp(20px,5vw,35px);
    flex-wrap:wrap;
}

.timeline-period {
    padding:clamp(6px,1.5vw,10px) clamp(12px,3vw,18px);
    border:2px solid #e0e0e0;
    border-radius:20px;
    background:white;
    color:#666;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:clamp(13px,2.5vw,16px);
}

.timeline-period:hover,
.timeline-period.active {
    border-color:#ff0000;
    color:#ff0000;
    transform:translateY(-2px);
}

.timeline-slider {
    background:white;
    border-radius:8px;
    padding:clamp(20px,5vw,35px);
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    width:100%;
    box-sizing:border-box;
}

.timeline-track {
    position:relative;
    padding-left:clamp(20px,5vw,35px);
}

.timeline-track:before {
    content:'';
    position:absolute;
    left:clamp(10px,2.5vw,18px);
    top:0;
    bottom:0;
    width:2px;
    background:#e0e0e0;
}

.timeline-item {
    position:relative;
    margin-bottom:clamp(20px,5vw,35px);
    padding-left:clamp(30px,7vw,45px);
}

.timeline-item:last-child {
    margin-bottom:0;
}

.timeline-marker {
    position:absolute;
    left:clamp(-15px,-3.5vw,-12px);
    top:clamp(12px,3vw,18px);
    width:clamp(20px,5vw,26px);
    height:clamp(20px,5vw,26px);
    border-radius:50%;
    background:#ff0000;
    border:3px solid white;
    box-shadow:0 0 0 3px #e0e0e0;
}

.timeline-content {
    background:#f8f9fa;
    border-radius:8px;
    padding:clamp(12px,3vw,18px);
    transition:all 0.3s ease;
    cursor:pointer;
}

.timeline-content:hover {
    background:white;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transform:translateX(5px);
}

.timeline-card {
    display:flex;
    gap:clamp(12px,3vw,18px);
    align-items:center;
    flex-wrap:wrap;
}

.timeline-image {
    width:clamp(50px,12vw,70px);
    height:clamp(50px,12vw,70px);
    border-radius:8px;
    overflow:hidden;
    background:#f0f0f0;
    flex-shrink:0;
}

.timeline-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.timeline-info {
    flex:1;
    min-width:150px;
}

.timeline-info h4 {
    font-size:clamp(12px,3vw,15px);
    font-weight:600;
    margin:0 0 4px 0;
    color:#1a1a1a;
    line-height:1.3;
}

.timeline-info p {
    font-size:clamp(11px,2.5vw,13px);
    color:#666;
    margin:0 0 4px 0;
}

.timeline-date {
    font-size:clamp(10px,2vw,12px);
    color:#888;
    font-style:italic;
}

/* Enhanced Responsive Styles */
@media (max-width:1200px) {
    .carousel-item {
        flex:0 0 240px;
    }

    .tab-slide {
        flex:0 0 220px;
    }

    .interactive-main {
        flex-direction:column;
        gap:20px;
    }

    .interactive-thumbnail {
        width:100%;
        height:200px;
    }
}

@media (max-width:768px) {
    .carousel-wrapper {
        padding:15px;
    }

    .carousel-item {
        flex:0 0 200px;
    }

    .vertical-slider-container {
        height:400px;
    }

    .vertical-nav {
        right:-50px;
    }

    .interactive-card {
        padding:20px;
    }

    .interactive-main {
        gap:15px;
    }

    .interactive-actions {
        justify-content:center;
    }

    .timeline-card {
        flex-direction:column;
        text-align:center;
    }

    .timeline-image {
        align-self:center;
    }

    .tab-buttons {
        flex-wrap:wrap;
    }

    .tab-btn {
        flex:1 1 50%;
        min-width:120px;
    }
}

@media (max-width:480px) {
    .carousel-item {
        flex:0 0 160px;
    }

    .thumbnail-strip {
        padding:10px;
    }

    .thumbnail-item {
        flex:0 0 60px;
        height:60px;
    }

    .vertical-slider-container {
        height:350px;
    }

    .interactive-title {
        font-size:20px;
    }

    .interactive-stats {
        flex-direction:column;
        gap:10px;
    }

    .interactive-actions {
        gap:10px;
    }

    .action-btn {
        padding:8px 16px;
        font-size:12px;
    }

    .timeline-info h4 {
        font-size:13px;
    }
}

/* Responsive for Sliders Showcase */
@media (max-width:1200px) {
    .comparison-grid {
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }

    .category-cards-showcase {
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }
}

@media (max-width:768px) {
    .sliders-showcase-header h1 {
        font-size:2em;
    }

    .slider-section-title {
        font-size:1.4em;
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }

    /* showcase-hero-slider now uses padding-top for 16:9 aspect ratio */

    .comparison-grid {
        grid-template-columns:1fr;
    }

    .category-cards-showcase {
        grid-template-columns:1fr;
    }

    .slider-controls {
        flex-direction:column;
        gap:10px;
    }

    .mini-slider-showcase {
        margin-bottom:20px;
    }
}

@media (max-width:480px) {
    .sliders-showcase-header {
        padding:20px;
    }

    .sliders-showcase-header h1 {
        font-size:1.5em;
    }

    /* showcase-hero-slider uses 16:9 aspect ratio */

    .hero-title {
        font-size:24px;
    }

    .comparison-item {
        padding:20px;
    }
}

@media (max-width:480px) {
    .explore-hero {
        height:250px;
    }

    .hero-info-overlay {
        padding:15px;
    }

    .hero-title {
        font-size:20px;
    }

    .video-grid {
        grid-template-columns:1fr;
    }

    .category-pills {
        justify-content:center;
    }

    .active-filters-row {
        padding:8px;
    }

    .active-filter-tag {
        font-size:12px;
        padding:3px 10px;
    }
}    display:flex;
    align-items:center;
    gap:10px;
}

/* Video Grid */
.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
}

.video-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.video-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

.video-card a {
    text-decoration:none;
    color:inherit;
}

.video-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.video-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.video-thumbnail .duration {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.85);
    color:white;
    padding:3px 8px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}

.video-info {
    padding:12px;
}

.video-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4;
}

.video-channel {
    font-size:13px;
    color:#606060;
    margin:0 0 6px 0;
}

.video-meta {
    display:flex;
    gap:8px;
    font-size:12px;
    color:#888;
}

/* Sidebar */
.sidebar-section {
    background:white;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.sidebar-title {
    font-size:16px;
    font-weight:700;
    margin:0 0 15px 0;
    color:#1a1a1a;
}

/* Trending List */
.trending-list {
    display:flex;
    flex-direction:column;
    gap:15px;
}

.trending-item a {
    display:flex;
    gap:12px;
    text-decoration:none;
    color:inherit;
    transition:opacity 0.2s ease;
}

.trending-item a:hover {
    opacity:0.8;
}

.trending-thumbnail {
    position:relative;
    flex-shrink:0;
    width:120px;
    height:68px;
    border-radius:8px;
    overflow:hidden;
    background:#f0f0f0;
}

.trending-thumbnail img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.trending-rank {
    position:absolute;
    top:4px;
    left:4px;
    background:rgba(0,0,0,0.8);
    color:white;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    font-weight:700;
    font-size:14px;
}

.trending-info {
    flex:1;
    min-width:0;
}

.trending-info h5 {
    font-size:13px;
    font-weight:600;
    margin:0 0 4px 0;
    color:#1a1a1a;
}

.trending-info .channel-name {
    font-size:12px;
    color:#606060;
    margin:0 0 4px 0;
}

.trending-info .view-count {
    font-size:11px;
    color:#888;
    margin:0;
}

/* Filter Groups */
.filter-group {
    margin-bottom:20px;
}

.filter-group:last-child {
    margin-bottom:0;
}

.filter-group label {
    display:block;
    font-weight:600;
    margin-bottom:10px;
    color:#333;
}

.filter-options {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.filter-checkbox {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:normal;
    cursor:pointer;
}

.filter-checkbox input[type="radio"],
.filter-checkbox input[type="checkbox"] {
    cursor:pointer;
}

/* No Content State */
.no-content {
    text-align:center;
    padding:80px 20px;
    color:#666;
}

/* Responsive */
@media (max-width:1024px) {
    .explore-main-col {
        padding-right:10px;
    }

    .explore-sidebar {
        padding-left:10px;
    }

    /* Make explore content more responsive */
    .explore-content-grid {
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:18px;
    }

    .explore-quick-lists-grid {
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    }
}

@media (max-width:768px) {
    .explore-main-col,
    .explore-sidebar {
        padding:0;
    }

    .explore-hero {
        height:300px;
    }

    .hero-title {
        font-size:24px;
    }

    .video-grid {
        grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
        gap:12px;
    }

    .category-pills {
        overflow-x:auto;
        flex-wrap:nowrap;
        -webkit-overflow-scrolling:touch;
    }

    /* Sliders Responsive */
    .sliders-showcase-header h1 {
        font-size:2em;
    }

    .slider-section-title {
        font-size:1.4em;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .comparison-grid {
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    }

    .category-cards-showcase {
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    }

    .tab-buttons {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .interactive-main {
        flex-direction:column;
        text-align:center;
    }

    .vertical-slider-container {
        height:350px;
    }

    .carousel-item {
        flex:0 0 200px;
    }

    .timeline-card {
        flex-direction:column;
        text-align:center;
    }

    .masonry-container {
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:12px;
        padding:15px;
    }
}

@media (max-width:576px) {
    .sliders-showcase-header h1 {
        font-size:1.6em;
    }

    .sliders-showcase-header p {
        font-size:1em;
    }

    .comparison-grid {
        grid-template-columns:1fr;
    }

    .category-cards-showcase {
        grid-template-columns:1fr;
    }

    .tab-slide {
        flex:0 0 180px;
    }

    .interactive-title {
        font-size:20px;
    }

    .vertical-slider-container {
        height:300px;
    }

    .carousel-item {
        flex:0 0 160px;
    }

    .thumbnail-item {
        flex:0 0 50px;
        height:50px;
    }

    .masonry-container {
        grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
        gap:10px;
        padding:12px;
    }
}

@media (max-width:480px) {
    .sliders-showcase-header h1 {
        font-size:1.4em;
    }

    .slider-section-title {
        font-size:1.2em;
    }

    .comparison-item {
        padding:15px;
    }

    .interactive-card {
        padding:15px;
    }

    .interactive-title {
        font-size:18px;
    }

    .vertical-info {
        padding:12px;
    }

    .timeline-info h4 {
        font-size:12px;
    }
}


/* modules/jrVideo/css/channels.css */


/**
 * jrVideo Channels Styles
 * 
 * @copyright 2026 The Jamroom Network / The Arcitech
 */

/* Channel Page Layout */
.channel-page {
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
}

/* Channel Banner */
.channel-banner {
    width:100%;
    height:200px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:20px;
}

.channel-banner img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.default-banner {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

/* Channel Header */
.channel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    border-bottom:1px solid #e0e0e0;
    margin-bottom:20px;
}

.channel-info h1.channel-name {
    font-size:28px;
    font-weight:700;
    margin:0 0 10px 0;
    color:#1a1a1a;
}

.channel-stats {
    display:flex;
    gap:20px;
    color:#666;
    font-size:14px;
}

.channel-stats .stat {
    display:inline-block;
}

/* Subscribe Button */
.subscribe-btn {
    padding:10px 24px;
    font-weight:600;
    border-radius:24px;
    transition:all 0.3s ease;
}

.subscribe-btn:not(.subscribed) {
    background:#ff0000;
    color:white;
    border:none;
}

.subscribe-btn:not(.subscribed):hover {
    background:#cc0000;
}

.subscribe-btn.subscribed {
    background:#e0e0e0;
    color:#606060;
    border:none;
}

.subscribe-btn.subscribed:hover {
    background:#d0d0d0;
}

/* Channel Navigation */
.channel-nav {
    margin-bottom:30px;
}

.nav-tabs {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    gap:20px;
    border-bottom:1px solid #e0e0e0;
}

.nav-tabs li {
    margin:0;
}

.nav-tabs li a {
    display:block;
    padding:12px 20px;
    color:#606060;
    text-decoration:none;
    border-bottom:3px solid transparent;
    transition:all 0.3s ease;
}

.nav-tabs li.active a {
    color:#1a1a1a;
    border-bottom-color:#ff0000;
    font-weight:600;
}

.nav-tabs li a:hover {
    color:#1a1a1a;
}

/* Video Grid */
.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    margin-bottom:30px;
}

.video-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    transition:transform 0.2s ease,box-shadow 0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.video-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.video-thumbnail {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#f0f0f0;
    overflow:hidden;
}

.video-thumbnail img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.video-thumbnail .duration {
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.8);
    color:white;
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}

.video-info {
    padding:12px;
}

.video-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 8px 0;
    color:#1a1a1a;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.video-meta {
    display:flex;
    gap:8px;
    font-size:12px;
    color:#666;
}

/* Channel About */
.channel-about {
    max-width:800px;
    padding:20px;
}

.channel-about h2 {
    font-size:24px;
    margin-bottom:20px;
}

.channel-about .description {
    line-height:1.6;
    margin-bottom:30px;
    color:#333;
}

.channel-details {
    background:#f9f9f9;
    padding:20px;
    border-radius:8px;
}

.detail-item {
    padding:8px 0;
    border-bottom:1px solid #e0e0e0;
}

.detail-item:last-child {
    border-bottom:none;
}

/* No Content State */
.no-content {
    text-align:center;
    padding:60px 20px;
    color:#666;
}

/* Responsive */
@media (max-width:768px) {
    .channel-header {
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
    
    .video-grid {
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
        gap:16px;
    }
    
    .nav-tabs {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}


/* modules/jrVideo/css/reels.css */


/**
 * jrVideo Reels Styles
 * 
 * Vertical video player optimized for mobile
 * 
 * @copyright 2026 The Jamroom Network / The Arcitech
 */

/* Body */
.reels-body {
    margin:0;
    padding:0;
    overflow:hidden;
    background:#000;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Container */
.reels-container {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#000;
}

/* Reel Item */
.reel-item {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.reel-video {
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Reel Info Overlay */
.reel-info {
    position:absolute;
    bottom:80px;
    left:20px;
    right:80px;
    color:white;
    z-index:10;
}

.creator-info {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.creator-avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid white;
    background:#666;
}

.creator-name {
    color:white;
    font-weight:600;
    text-decoration:none;
    font-size:15px;
}

.follow-btn {
    background:#ff0000;
    border:none;
    color:white;
    padding:6px 16px;
    border-radius:4px;
    font-weight:600;
    cursor:pointer;
    font-size:13px;
    margin-left:8px;
}

.video-description {
    max-height:80px;
    overflow-y:auto;
}

.video-description p {
    margin:0;
    line-height:1.4;
    font-size:14px;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

/* Social Actions Sidebar */
.reel-actions {
    position:absolute;
    right:12px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    gap:20px;
    z-index:10;
}

.action-btn {
    background:rgba(0,0,0,0.4);
    border:none;
    color:white;
    padding:0;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    transition:transform 0.2s ease;
    backdrop-filter:blur(10px);
    border-radius:50%;
    width:48px;
    height:48px;
    justify-content:center;
}

.action-btn:active {
    transform:scale(0.9);
}

.action-btn i {
    font-size:24px;
}

.action-btn.liked i,
.action-btn.saved i {
    color:#ff0000;
}

.action-count {
    font-size:11px;
    font-weight:600;
}

/* Swipe Hints */
.swipe-hint {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:white;
    text-align:center;
    opacity:0.8;
    transition:opacity 0.5s ease;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.swipe-hint-up {
    top:20px;
}

.swipe-hint-down {
    bottom:20px;
}

.swipe-hint i {
    font-size:24px;
    animation:bounce 2s infinite;
}

.swipe-hint span {
    font-size:12px;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

@keyframes bounce {
    0%,100% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-10px);
    }
}

/* Comments Modal */
.comments-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000;
}

.modal-backdrop {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
}

.modal-content {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:white;
    border-radius:16px 16px 0 0;
    max-height:70vh;
    display:flex;
    flex-direction:column;
}

.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px solid #e0e0e0;
}

.modal-header h3 {
    margin:0;
    font-size:18px;
}

.modal-header button {
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:#666;
}

.comments-list {
    flex:1;
    overflow-y:auto;
    padding:20px;
}

.comment-item {
    padding:12px 0;
    border-bottom:1px solid #f0f0f0;
}

.comment-item strong {
    display:block;
    margin-bottom:4px;
}

.comment-item p {
    margin:0;
    color:#333;
    line-height:1.4;
}

.comment-date {
    font-size:11px;
    color:#999;
}

.comment-input {
    display:flex;
    gap:10px;
    padding:16px 20px;
    border-top:1px solid #e0e0e0;
}

.comment-input input {
    flex:1;
    padding:10px 15px;
    border:1px solid #e0e0e0;
    border-radius:24px;
    font-size:14px;
}

.comment-input button {
    background:#ff0000;
    border:none;
    color:white;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Desktop Adjustments */
@media (min-width:769px) {
    .reels-container {
        max-width:500px;
        margin:0 auto;
    }
    
    .reel-video {
        max-height:100vh;
        width:auto;
    }
}

/* Mobile Optimizations */
@media (max-width:768px) {
    .reel-video {
        width:100%;
        height:100%;
    }
}


/* modules/jrVideoPlayers/css/module.css */




/* modules/jrYouTube/css/jrYouTube.css */


/* from this tutorial http://www.labnol.org/internet/light-youtube-embeds/27941/ */
.youtube-container {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:600px;
}

.youtube-player {
    display:block;
    width:100%; /* assuming that the video has a 16:9 ratio */
    padding-bottom:56.25%;
    overflow:hidden;
    position:relative;
    height:100%;
    cursor:pointer;
}

img.youtube-thumb {
    bottom:0;
    display:block;
    left:0;
    margin:auto;
    max-width:100%;
    width:100%;
    position:absolute;
    right:0;
    top:0;
    height:auto
}

.youtube-play-button {
    height:51px;
    width:72px;
    left:50%;
    top:50%;
    margin-left:-36px;
    margin-top:-36px;
    position:absolute;
    background:url("http://mediaistream.com/image/img/module/jrYouTube/play.png") no-repeat;
}

.youtube-iframe {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border:0;
}

/* modules/misRadio/css/misRadio.css */


/* make sure the anchors take into account a fixed header */
a.anchor {
    display:block;
    position:relative;
    top:-100px;
    visibility:hidden;
}

.float-right {
    float:right;
}

.radio_border {
    border-top:1px solid #DDD;
    padding-top:5px;
}

.stat_entry_container {
    padding:10px;
}

/* skins/mis/css/acp.css */


/* @title Info Log */
/* @help Background color for Informational (INF) Log entries */
.log-inf {
    background-color:transparent;
    text-align:left;
}

/* @title Minor Log */
/* @help Background color for Minor (MIN) Log entries */
.log-min {
    background-color:#FFCC5B;
    text-align:left;
}

/* @title Major Log */
/* @help Background color for Major (MAJ) Log entries */
.log-maj {
    background-color:#F90;
    text-align:left;
}

/* @title Critical Log */
/* @help Background color for Critical (CRI) Log entries */
.log-cri {
    background-color:#F60;
    text-align:left;
}

/* admin menu */
/* admin menu */
/* admin menu */

#item-holder {
    margin-right:12px;
}

dd {
    padding-top:0;
    padding-bottom:9px;
    margin:0;
    font-size:12px;
}

.admin_section_header {
    margin-top:0;
}

/* @title Menu Row */
/* @help The row for the menu list */
.item-entry {
    border-bottom:1px solid #EEE;
    color:#444;
    display:table-cell;
    font-size:14px;
    padding:6px;
    vertical-align:middle;
    width:100%;
}

.item-row {
    background:white none repeat scroll 0 0;
    cursor:pointer;
    display:table-row;
    height:42px;
    width:100%;
}

/* @title Menu Active Row */
/* @help The active row for the menu list */
.item-row-active {
    background-color:rgba(255,255,255,0.05);
}

.item-row:hover {
    background-color:rgba(255,255,255,0.1);
}

/* @title Menu Icon */
/* @help The icon for the menu item */
.item-icon {
    border-bottom:1px solid #EEE;
    display:table-cell;
    padding:3px;
}

.item-enabled {
    border-bottom:1px solid #EEE;
    display:table-cell;
    padding-right:6px;
}

/* @title Module Disabled */
/* @help Contents of Small box to the right of a disabled module */
.item-disabled {
    display:table-cell;
    color:#FFD984;
    background:#FFD984;
    font-size:6px;
    padding:0 6px 4px 2px;
    border:1px solid #FFCC5B;
    border-radius:50%;
}

#item-work {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
}

#item-work .page_content {
    padding:0 !important;
}

/* @title Banner Background */
/* @help The Banner Background is the background color in the small section at the top of pages where the module icon appears */
.page_banner_box {
    background:#F3F3F3;

}

/* @title Page Banner border */
/* @help The Page Banner border is the border around the section at the top of pages where the module icon appears */

.page_banner {
    background:#FAF9F2 linear-gradient(#EEE,#DDD) repeat scroll 0 0;
    margin-bottom:9px;
    color:#666;
}

/* @title Page Banner Icon */
/* @help The Page Banner Icon section is the small section at the top of pages where the module icon appears */
.page_banner_icon {
    width:1%;
    padding:4px 0 4px 8px; 
}

/* @title Page Banner Title */
/* @help The Title section in the page banner */
.page_banner_left {
    text-align:left;
    padding:11px 12px;
    font-size:15px;
    text-transform:uppercase;
    white-space:nowrap;
}

/* @title Page Banner Description */
/* @help The Description section on the right side of the page banner */
.page_banner_right {
    padding:4px;
    text-align:right;
}

.page_banner_right .form_button {
    margin-left:3px;
    vertical-align:middle;
}

.page_banner_right .form_select {
    margin-left:3px;
    height:32px;
    vertical-align:middle;
}

.search_area_right .form_button {
    margin-left:3px;
    vertical-align:middle;
}

.search_area_right .form_text {
    height:50px;
    vertical-align:middle;
}

/* @title Radio Option */
/* @help Format for Radio form field options */
.form_radio_option {
    display:inline;
    padding-right:32px;
}

/* @title Textarea */
/* @help Format for Textarea form input fields */
.form_text,input[type="text"] {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    border:solid 1px #000;
    border-radius:10px;
    color:#000000;
    font-size:14px;
    height:25px;
    line-height:25px;
    margin:0 2px;
    padding:0 4px;
    background-color:#FFFFFF;
}

/* @title Textarea Focus */
/* @help Class applied to a textarea field when the field is selected for input. */
.form_radio {
}

/* @title Radio Option */
/* @help Format for Radio form field options */
.form_radio_option {
    display:inline;
    padding-right:32px;
}

/* @title Textarea Focus */
/* @help Class applied to a textarea field when the field is selected for input. */
textarea:focus {
    border:1px solid #303030;
}

/* @title Checkbox */
/* @help Class applied to a checkbox form field */
.form_checkbox {
    font-size:16px;
    margin:3px;
    border-radius:3px;
}

/* @title Optionlist Text */
/* @help Class applied to the text to the right of an Optionlist entry */
.form_option_list_text {
    font-size:14px;
}

/* @title Disabled */
/* @help Class applied to a form element when it is disabled */
.form_element_disabled {
    border-width:1px;
    border-style:solid;
    border-color:#DDD;
    background-color:#FFF;
    color:#AAA;
}

/* @title Code Mirror */
/* @help Overrides Core CodeMirror class */
.CodeMirror {
    background:#FFF;
    padding:0;
    font-size:12px;
    border-radius:2px;
    margin-left:2px;
}

/* @title Date Input */
/* @help Format for Date Input form elements */
.form_date {
    color:#000;
    font-size:14px;
    height:24px;
    line-height:24px;
    width:15%;
    padding:0 4px; 
    margin:0 2px; 
    background-color:#FFF;
    border-width:1px;
    border-style:solid;
    border-color:#7F7F7F;
    border-radius:2px;
}

.form_date_birthday_year {
    padding:0 4px !important;
}

/* @title Input Focus */
/* @help Class applied to a text input field when the field is selected for input. */
input[type="text"]:focus,select:focus,textarea:focus {
    border:1px solid rgba(255,204,51,0.4);
}

.form_text[disabled="disabled"],.form_text[readonly="readonly"] {
    opacity:0.8;
}

#content .form_text.form_text_search {
    width:60%;
}

#content .form_text {
    width:80%;
}

.live_search_text {
    color:#CCC;
    font-style:italic;
    min-height:25px !important;
}

/* remove Firefox's dotted outlines... */
:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
}

form {
    margin-bottom:0;
}

.element {
}

/* @title Element Left */
/* @help This is the left side of pages and forms where the label and sub-label will appear */
.element_left {
    text-align:right;
    text-transform:capitalize;
    padding:10px 6px 12px 0;
    width:23%;
}

.tool_element_left {
    padding:10px;
}

/* @title Element Right */
/* @help This is the right side of pages and forms where the form elements appear */
.element_right {
    padding:10px 0 10px 0;
    width:77%;
}

.tool_element_right {
    padding:6px;
}

/* @title Element Right URLs */
/* @help This is the color of URLs that might appear on the right side of the form */
.element_right a {
    color:#222;
}

.form_input_left {
    height:30px;
}

.form_input_right {
}

.sublabel {
    font-size:11px;
    text-transform:none;
}

.form_help_button {
    position:absolute;
    top:10px;
    right:6px;
    background:rgba(0,0,0,0) linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)) repeat scroll 0 0;
}

/* @title Form Help */
/* @help This is for the help sections for t
he forms */

.form_help {
    background-color:#EEE;
    margin:0 12px 9px 2px;
    padding:9px;
    box-shadow:inset 0 0 3px #CCC;
    border-radius:2px;
}

/* @title Form Help Drop */
/* @help This is for the help drop down section for the forms */
.form_help_drop {
    background-color:#EEE;
    padding-top:8px;
    width:100%;
}

/* @title Form Help Drop Left */
/* @help This is for the left side help drop down section for the forms */
.form_help_drop_left {
    color:#666;
    font-size:14px;
    padding:10px 20px 20px;
    text-align:left;
    text-transform:none;
    width:95%;
}

/* @title Form Help Drop Right */
/* @help This is for the right side help drop down section for the forms */
.form_help_drop_right {
    width:5%;
    padding:10px 20px 20px 20px;
}

.form_help_default {
    display:inline-block;
    margin-top:12px;
}

/* @title Form Help Small */
/* @help This is for the small help text */
.form_help_small {
    display:inline-block;
    font-size:9px;
    margin-top:12px;
    color:#999;
    font-style:italic;
}

.form_submit_box {
    margin-top:6px;
}

.form_submit_section {
    background:#FAF9F2 linear-gradient(#EEE,#DDD) repeat scroll 0 0;
    padding:10px;
    text-align:center;
}

#form_submit_indicator {
    display:none;
    margin-right:10px;
    vertical-align:middle;
}

.page_notice_drop {
    background:#F3F3F3;
}

/* @title Form Message Box */
/* @help Form messages will be displayed withing the Form Message box */
.page_notice {
    text-align:center;
    padding:10px;
    font-size:14px;
}

/* @title Form Message Text */
/* @help Formats the message text as shown in the Form Message Box */
.form_notice {
    text-align:center;
    padding:10px;
    display:none;
}

/* @title Form Notice */
/* @help Background color of Form Notice messages */
.notice {
    background-color:#ADF !important;
    color:#000;
}

/* @title Form Warning */
/* @help Background color of Form Warning messages */
.warning {
    background-color:#FD0 !important;
    color:#000;
}

/* @title Form Error */
/* @help Background color of Form Error messages */
.error {
    background-color:#FFCC5B !important;
    color:#000;
}

/* @title Form Success */
/* @help Background color of Form Success messages */
.success {
    background-color:#8DD940 !important;
    color:#000;
}

/* @title Field Error */
/* @help Background color of a form field if the contents are in error */
.field-hilight {
    background-color:#FFCC5B !important;
    color:#000 !important;
}

/* @title Select */
/* @help Format for the Select form field. */
.form_select {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    border:1px solid transparent;
    border-radius:2px;
    box-sizing:border-box;
    color:#000000;
    font-size:13px;
    margin:2px;
    padding:3px;
    width:81.2%;
}

/* @title Select Multiple */
/* @help Format for the Select form field when multiple items can be selected. */
.form_select_multiple {
}

.form_select_and_text_select {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    width:35%;
    margin-right:12px;
}

.form_select_and_text_tag {
    text-transform:capitalize;
    margin-right:4px;
}

.form_select_and_text_text {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    width:35.1% !important;
}

/* @title Select Jumper */
/* @help Format for the Select Jumper field used in Page Headers */
.form_select_item_jumper {
    width:250px;
}

.form_admin_search {
    margin:7px 0;
    font-style:italic;
    color:#AAA;
}

/* @title Time Input */
/* @help Class applied to the Time Select Field */
.form_time {
    margin-left:12px;
    width:15%;
    min-width:95px;
}

optgroup {
    font-style:normal;
}

.accordion a {
    color:#F8C574;
    text-decoration:none;
}

.accordion a:hover {
    color:#FFF;
    text-decoration:none;
}

/* @title Form Button */
/* @help Format for Form Buttons */

.form_button:disabled {
    cursor:not-allowed;
}

/* @title Follow Button*/
/* @help Override for border-radius on follow button */

.form_button_disabled {
    opacity:0.5;
}

.form_button_disabled:hover {
    color:#A4A4A4;
    background:#F0F0F0;
}

.form_button a,.form_button_anchor a,.form_button_anchor:hover a {
    text-decoration:none;
}

.sprite_icon_hilighted {
    background-color:#FFCC5B;
}

/* @title Tables */
/* @help This is the HTML table style */
table {
    width:100%;
    border-width:0;
    border-spacing:0;
}

/* @title Table TD */
/* @help This is the TD tag for tables */
td,th {
    padding:0;
}

/* @title Table Links */
/* @help This is the color for URL links in a table */
td a {
    color:#269;
}

#page_notice > a {
    color:#58C;
}

/* @title Page Table */
/* @help This is the page table style */
.page_table {
    border-spacing:1px;
    margin:0 0 16px;
    width:100%;
}

.bigtable {
    border-spacing:3px;
}

/* @title Page Table Header */
/* @help This is the page header table style */
.page_table_header {
    background:#FAF9F2 linear-gradient(#EEE,#DDD) repeat scroll 0 0;
    color:#666;
    font-size:12px;
    padding:8px;
    text-align:center;
    text-transform:uppercase;
    font-weight:normal;
    white-space:nowrap;
}

.page_table_header .sprite_icon {
    background:transparent !important;
    border:0;
}

.page_table_header > a {
    color:#666;
    text-decoration:underline;
}

/* @title Page Table Footer */
/* @help This is the page footer table style */
.page_table_footer {
    background-color:#E8EAEB;
    text-align:center;
    padding:6px;
    font-size:12px;
    text-transform:capitalize;
    color:#000;
    white-space:nowrap;
}

/* @title Page Table Row */
/* @help This is the page row table style */
.page_table_row {
    background-color:#F2F2F2;
}

.page_table_row_alt {
    background-color:#F8F8F8;
}

/* @title Page Table Cell */
/* @help This is the page table cell style */
.page_table_cell {
    padding:5px;
    font-size:13px;
    color:#222;
}

.page_table_cell a {
    color:#222;
}

/* @title Page Table Pager */
/* @help This is the page pagination table style */

/* @title Page Pager Left */
/* @help This is the left pagination cell */
.page_table_pager_left {
    width:25%;
    padding:10px;
}

/* @title Page Pager Center */
/* @help This is the center pagination cell */
.page_table_pager_center {
    text-align:center;
    width:50%;
    padding:5px;
    font-size:11px;
}

/* @title Page Pager Right */
/* @help This is the right pagination cell */
.page_table_pager_right {
    text-align:right;
    width:25%;
    padding:6px;
}

/* @title Page Pager Jumper */
/* @help This is the page selection drop down */
.page_table_jumper {
    width:50px;
}

/* @title Page Notice */
/* @help This is the page notice section */
.page_table_notice {
    text-align:center;
    line-height:32px;
    font-size:14px;
}

/* @title Page Section */
/* @help The Page Section is the small divider that can divide forms into logical groups. */
.page_section_header {
    background:#FAF9F2 linear-gradient(#EEE,#DDD) repeat scroll 0 0;
    color:#666;
    font-size:15px;
    padding:6px 12px;
    text-transform:uppercase;
}

.item-list .page_section_header {
    margin-bottom:9px;
}

dt {
    font-weight:normal;
}

.admin_section_search {
    width:100%;
    padding:6px;
    box-sizing:border-box;
}

.admin_section_search .form_admin_search {
    width:100% !important;
    margin:0;
    padding:0 6px;
    height:32px;
    box-sizing:border-box;
}

/* @title Page Divider */
/* @help The small horizontal line or section that can be used to divide large sections of a page */
.page_divider {
    background-color:#FFF;
    border-bottom:1px solid #DDD;
}

/* @title Page Note */
/* @help If a module has a special &quot;note&quot; that it wants to display,this controls how it looks. */
.page_note {
    background-color:#CF9;
    color:#333;
    font-size:14px;
    margin-bottom:9px;
    margin-top:12px;
    padding:9px;
    text-align:center;
}

/* @title Page Search Hilight */
/* @help For options that support searching and hilighting,this is the background color for text matching. */
.page_search_highlight {
    background-color:#F7DD4F;
}

/* Tab Bar */
/* @title Tab Bar Holder */
/* @help This is the holder for the tab bar */
.page_tab_bar_holder {
    background:#F9F9F9;
    border-bottom:1px solid #DDD;
    padding-top:1px;
    width:100%;
}

.page_tab_bar_spacer {
    background:#FFF;
    height:10px;
}

.page_tab_bar {
    padding-left:9px;
}

/* @title Page Tab */
/* @help This is the tab for the tab bar */
.page_tab {
    background:#FFF;
    border-radius:2px 2px 0 0;
    color:#000;
    cursor:pointer;
    float:left;
    font-size:14px;
    list-style:outside none none;
    margin-left:6px;
    text-align:center;
    text-decoration:none;
    text-transform:capitalize;
    box-shadow:0 0 2px #CCC;
}

/* @title Page Tab Hover */
/* @help This is the tab hover for the tab bar */
.page_tab:hover {
    background:#DDD;
    text-decoration:none;
}

/* @title Page Tab Hover Link */
/* @help This is the tab link hover for the tab bar */
.page_tab:hover a {
    text-decoration:none;
}

.page_tab_active {
    color:#000;
    margin-bottom:0;
}

.page_tab_active:hover {
    border-bottom:0 none;
    color:#DDD;
    text-decoration:none;
}

.page_tab_active:hover a {
    color:#000;
    text-decoration:none;
}

.page_tab.page_tab_active a {
    color:#000;
}

.page_tab_active a:hover {
    color:#666;
}

/* @title Page Tab Link */
/* @help This is the tab URL link for the tab bar */
.page_tab a {
    color:#000;
    display:block;
    padding:7px 12px 6px 12px;
    text-decoration:none;
}

.page_tab_first {
    margin-left:0;
}

.page_tab_last {
}

/* @title Page Tab Active */
/* @help This is the active tab */
.page_tab_hilight {
    background:#FFCC5B;
    color:#000;
}

.page_tab_hilight a {
    color:#000;
}

.page_tab.page_tab_active {
    background:#FFCC5B;
}

/* @title Modal Overlay */
/* @help The background overlay for the Modal window */
#simplemodal-overlay {
    background-color:#000;
    cursor:wait;
}

/* @title Modal Window */
/* @help The Modal window */
#modal_window {
    background-color:#FFF;
    overflow:auto;
    padding:10px;
}

/* @title Modal Updates */
/* @help The Modal window updates */
#modal_updates {
    font-family:"Roboto Mono",Monaco,"Courier New",Courier,monospace;
    color:#000;
    font-size:11px;
    padding:8px;
    margin-left:3px;
    overflow:auto;
}

/* @title Modal Spinner */
/* @help The Modal window loading image */
#modal_indicator {
    right:10px;
}

#wrapper {
    min-height:calc(100vh - 180px);
    position:relative;
}

#content .item-list {
}

#admin_container.container {
    padding:1em;
    background:#F3F3F3;
    border-radius:2px;
}

.page_content #admin_container {
    padding:0;
}

#dashboard_container {
    background:#F3F3F3;
    border-radius:2px;
}

/* @title Site Content */
/* @help This is the main Site Content holder */

#content {
    font-size:1em;
    height:100%;
    margin:0 auto;
    max-width:100%;
    width:100%;
    min-height:calc(100vh - 289px);
    padding:20px 0 1em;
    box-sizing:border-box;
}

#content h2 {
    margin:0;
}

#content .sb-widget-title > h2 {
    font-weight:normal;
    text-transform:uppercase;
}

/* @title block */
/* @help This is the main style for the individual blocks of the page */
.block {
    background-color:transparent;
    padding:12px;
    margin:0 auto;
}

.recommend_box {
    background-color:#EDEDED;
    padding:25px;
    margin:12px;
    border-style:solid;
    border-color:#DDD;
    border-width:1px;
    font-size:16px;
    color:#000;
}

.recommend_box a {
    color:#369;
    text-decoration:none;
}

.recommend_box a:hover {
    color:#333;
    text-decoration:underline;
}

.search_box {
    background-color:white;
    color:#EEE;
    font-size:16px;
    margin:12px;
    padding:25px;
    border:none;
    border-radius:8px;
}

.search_box .form_text {
    vertical-align:middle;
    padding:3px 4px;
}

.search_box .form_button {
    vertical-align:middle;
}

.form_button_icon {
    color:#555;
    font-size:18px !important;
    line-height:31px !important;
}

.form_icon_button {
    background:#FFF linear-gradient(#FFF,#EEE) repeat scroll 0 0;
    width:31px;
    height:31px;
    border:1px solid #CCC;
    border-radius:2px;
    margin-left:3px;
}

/* @title Form Button Hover */
/* @help Format for Form Buttons when the mouse is hovered over the button */
.form_icon_button:hover {
    background-color:#EEE;
    color:#000 !important;
}

.page_content {
    background-color:#F3F3F3;
    color:#444;
}

#content .page_content {
    padding:1em;
}

.page_custom > .container {
    background-color:#F3F3F3;
}

.search_box a {
    text-decoration:none;
}

.search_box a:hover {
    color:#333;
    text-decoration:underline;
}

.container {
    margin:0;
}

.bignum_stat .sprite_icon {
    background:#666 none repeat scroll 0 0;
}

.sb-menu-entry {
    border-radius:2px;
    color:#000;
    cursor:move;
    font-size:15px;
    margin-top:3px;
    padding:6px 9px;
    text-transform:capitalize;
    vertical-align:middle;
}

#modal_window {
    background:#111 none repeat scroll 0 0;
}

.sb-widget-title {
    font-size:16px;
}

.sb-widget-col {
    padding:0 6px;
}

.sb-widget-col.sb-widget-hilight {
    padding:6px 6px 44px;
}

.form_text,.form_textarea,.form_select {
    background:#FFFFFF none repeat scroll 0 0;
    box-shadow:0 1px 2px rgba(0,0,0,0.2) inset,0 0 1px rgba(0,0,0,0.1) inset,0 2px 0 rgba(255,255,255,0.05);
    color:000000;
}

.form_editor_holder {
    width:94%;
    padding-left:2px;
}

.mce-panel {
    border:1px solid #CCC;
    border-radius:2px;
    margin-left:4px;
}

.page_banner_box .page_banner {
    width:100%;
}

.plugin #providers .provider .name {
    color:#AAA;
}

.plugin .footer #branding a span.plugin_title {
    color:#FFF;
}

.plugin .footer #branding a {
    color:#CCC;
}

.simplemodal-container .sb-menu-entry {
    background-color:#555;
}

.sb-row-button {
    color:#666;
}

.black #debug_log {
    color:white;
}

#sb-edit-cp {
    border-radius:8px;
}

.widget-template-code {
    background:rgba(100,150,205,0.1) none repeat scroll 0 0;
}

textarea {
    border:1px solid transparent;
}

#info_box {
    margin-bottom:6px;
}

#info_box .item {
    border:0;
    padding:16px;
    font-size:13px;
}

#info_box .page_table_cell {
    background:white;
    padding:6px;
    font-size:12px;
}

#info_box .module_icon > img {
    border-radius:3px;
}

.page_content textarea {
    min-height:90px;
    width:77%;
}

.page_content .form_textarea {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:14px;
    margin-left:2px;
    width:80.3%;
    min-height:90px;
    padding:3px;
}

.form_textarea {
    border:1px solid rgba(0,0,0,0);
    border-radius:3px;
    height:100px;
}

a.qq-upload-cancel {
    color:black;
}

.center {
    text-align:center;
}

p.waiting {
    padding:12em 0;
}

.acp-default-img {
    border:medium none;
}

.action span.title {
    font-size:18px;
    display:block;
    margin-bottom:5px;
}

.sb-menu-entry a {
    color:white;
    cursor:pointer;
}

#action_text_counter {
    left:125px;
}

#gform .form_textarea {
    color:#FFFFFF;
    padding:13px;
    width:calc(100% - 26px);
}

.jrcore_file_detail {
    width:81.3%;
}

.image_update_display img {
    margin:0 0 10px 2px;
    border-radius:2px;
}

.gldp-default {
    margin:2px 0 0 2px;
    border-radius:2px;
    border-color:#555;
}

#jrUser_account input[readonly="readonly"] {
    background:#555;
    color:#FFF;
    opacity:1;
}

.style-select {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    border:1px solid transparent;
    border-radius:2px;
    box-sizing:border-box;
    background-color:#555;
    color:#EEE;
    font-size:13px;
    margin:2px;
    padding:3px;
}

/* skins/mis/css/base.css */


/* @title Config Block */
/* @help The set of buttons that float to the right,ie. create,delete and modify. */
.block_config {
    float:right;
    margin-left:6px;
    white-space:nowrap;
}

/* @title Image Block */
/* @help The DIV that holds a list image. */
.block_image {
    margin:0 auto;
    padding-right:6px;
}

/* @title Content Block */
/* @help The DIV that holds a lists content. */
.block_content {
    background-color:#FFF;
    padding:0;
    margin:0 auto;
}

/* @title Title */
/* @help This is the Title text */
.title {
    background-color:white;
    vertical-align:middle;
    text-transform:capitalize;
    color:#333;
    padding:12px;
}

.title h1 {
    font-weight:bold;
}

.title-more {
    display:inline-block;
    float:right;
    font-size:12px;
    text-transform:uppercase;
    margin-top:6px;
    color:#AAA;
}

.title-more a {
    color:#AAA;
}

.title-more a:hover {
    color:#000;
    text-decoration:none;
}

/* @title Info Text */
/* @help Styling for info labels. ie. Albums,Genre,Plays etc. */

.info {
    color:#000;
    display:inline;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    text-transform:capitalize;
}

/* @title Info Text Link */
/* @help This is the Info link text */
.info a {
    text-decoration:none;
    color:#58C;
}

/* @title Info Link Hover */
/* @help This is the Info link hover text */
.info a:hover {
    color:#888;
    text-decoration:underline;
}

.info.private {
    color:#000;
}

/* @title Date Text */
/* @help Any date text in your lists. ie. blogs,events etc. */
.info_c {
    color:#000;
    font-size:16px;
}

/* @title Date Link Text */
/* @help Any date text in your lists. ie. blogs,events etc. */
.info_c a {
    color:#58C;
    text-decoration:none;
}

/* @title Date Text */
/* @help Any date text in your lists. ie. blogs,events etc. */
.info_c a:hover {
    text-decoration:underline;
}

.p5 h3 {
    margin:0;
}



/* skins/mis/css/buttons.css */


.bullet-list {background:url("http://mediaistream.com/image/img/skin/mis/bullet_set.png") no-repeat 0 4px; padding-left:14px;}
.bullet-list:hover {background:url("http://mediaistream.com/image/img/skin/mis/bullet_set.png") no-repeat 0 -13px;}

.bullet-toggle {background:url("http://mediaistream.com/image/img/skin/mis/bullet_toggle_set.gif") no-repeat 0 0; padding-left:15px;}
.bullet-toggle:hover {background:url("http://mediaistream.com/image/img/skin/mis/bullet_toggle_set.gif") no-repeat 0 -15px; padding-left:15px;}

.button-play {background:url("http://mediaistream.com/image/img/skin/mis/button_player_set.png") no-repeat 0 0; height:20px; width:20px;}
.button-play:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_player_set.png") no-repeat 0 -20px;}
.button-playing {background:url("http://mediaistream.com/image/img/skin/mis/button_player_set.png") no-repeat 0 -40px; height:20px; width:20px;}

.button-more {background:url("http://mediaistream.com/image/img/skin/mis/button_more_set.png") no-repeat 0 0; height:15px; width:47px; vertical-align:middle;}
.button-more:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_more_set.png") no-repeat 0 -17px;}

.button-toggle {
    background:url("http://mediaistream.com/image/img/skin/mis/button_toggle_set.png") no-repeat 0 0;
    height:12px;
    width:108px;
    margin-left:8px;
    margin-bottom:-10px;
    margin-top:0;
}
.button-toggle:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_toggle_set.png") no-repeat 0 -13px;}

.button-arrow-next {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 0; height:14px; width:25px; padding-left:25px;font-size:12px;}
.button-arrow-next:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 -15px; height:14px; padding-left:25px;font-size:12px;}
.button-arrow-next-off {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 -30px; height:14px; padding-left:25px;font-size:12px;}
.button-arrow-previous {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 -45px; height:14px; padding-left:25px;font-size:12px;}
.button-arrow-previous:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 -60px; height:14px; padding-left:25px;font-size:12px;}
.button-arrow-previous-off {background:url("http://mediaistream.com/image/img/skin/mis/button_arrow_set.png") no-repeat 0 -75px; height:14px; padding-left:25px;font-size:12px;}

.button-fav {background:url("http://mediaistream.com/image/img/skin/mis/button_fav_set.png") no-repeat 0 0; padding-left:22px;}
.button-fav:hover {background:url("http://mediaistream.com/image/img/skin/mis/button_fav_set.png") no-repeat 0 -17px;}



/* skins/mis/css/footer.css */


#footer ul {
    float:left;
    text-align:left;
    margin:0;
    padding:0;
    width:20%;
}

#footer ul li {
    list-style:none;
    line-height:16px;
    font-size:13px;
}

#footer ul li a {
    text-decoration:none;
    color:#AAAAAA;
}

#footer ul li a:hover {
    color:#BA4B0D;
}

#footer-bar {
    color:#999999;
    padding:10px;
    text-align:center;
    background:#111111;
    border-top:1px solid #333333;
    border-right:0;
    border-bottom:0;
    border-left:0;
    margin:0;
    border-radius:0 0 5px 5px;
}

.footer-copy {
    float:left;
    padding-left:16px;
}

.footer-design {
    float:right;
    padding-right:16px;
}

.rss-footer {
    background-image:url("http://mediaistream.com/image/img/skin/mis/rss_sml.png");
    background-repeat:no-repeat;
    background-position:top left;
    padding-left:20px;
}

#footer {
    background:#222222;
    background:-moz-linear-gradient(#111111,#222222);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#111111),to(#222222));
    background:-webkit-linear-gradient(#111111,#222222);
    background:-o-linear-gradient(#111111,#222222);
    background:-ms-linear-gradient(#111111,#222222);
    background:linear-gradient(#111111,#222222);
    vertical-align:middle;
    margin:0 auto;
    font-size:12px;
    color:#CCCCCC;
    padding:10px;
    border-top:0;
    border-right:0;
    border-bottom:1px solid #000000;
    border-left:0;
}

/* @title Footer Links */
/* @help Footer text URL */
#footer a {
    text-transform:capitalize;
    text-decoration:none;
    color:#FFFFFF;
}

/* @title Footer Link Hover */
/* @help Footer text URL hover */
#footer a:hover {
    text-decoration:underline;
}

#footer_content {
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

#footer_logo {
    padding:12px;
    vertical-align:middle;
}

/* @title Footer Text */
/* @help Footer text */
#footer_text {
    text-align:right;
    color:#CCCCCC;
    font-size:14px;
    padding:12px;
}

/* @title Footer Social Networks */
/* @help the social network icons located in the footer */
#footer_sn {
    padding:12px;
    text-align:right;
    vertical-align:middle;
}

.scrollup {
    width:40px;
    height:40px;
    opacity:0.5;
    position:fixed;
    bottom:10px;
    right:65px;
    display:none;
}

.scrollup:hover {
    opacity:1;
}


/* skins/mis/css/grid.css */


/**
 * MIS Skin - Full Screen Responsive Grid System
 * Mobile-first grid with adjustable scalability
 * Author:The Arcitech ©2026
 */

/* CSS Variables for Adjustable Scalability */
:root {
    --grid-container-padding:clamp(10px,2vw,20px);
    --grid-gutter:clamp(8px,1.5vw,16px);
    --grid-max-width:100%;
}

.container {
    margin:0;
    width:100%;
    max-width:100%;
    padding-left:var(--grid-container-padding);
    padding-right:var(--grid-container-padding);
    box-sizing:border-box;
}

.row {
    max-width:var(--grid-max-width);
    width:100%;
    margin:0 auto;
    overflow:hidden;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
}

.row-first {
    padding-top:3px;
}

.row-last {
    padding-bottom:3px;
}

.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12,.col20 {
    float:left;
}

.row .col1 {
    width:8.33%;
}

.row .col2 {
    width:16.66%
}
.row .col20 {
    width:20%
}
.row .col3 {
    width:25%
}

.row .col4 {
    width:33.2%
}

.row .col5 {
    width:41.65%;
}

.row .col6 {
    width:50%;
}

.row .col7 {
    width:58.31%;
}

.row .col8 {
    width:66.66%;
}

.row .col9 {
    width:75%;
}

.row .col10 {
    width:83.33%;
}

.row .col11 {
    width:91.63%;
}

.row .col12 {
    width:100%;
}

.last {
    margin-right:0;
}

.embedded,object,embed {
    max-width:100%;
}


/* skins/mis/css/header.css */


/* @title Header */
/* @help This is the main header section for the site */

#header {
    color:#FFF;
    height:60px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:200;
    background:rgba(18,18,18,0.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 4px 40px rgba(0,0,0,0.8);
    margin:0;
    padding:0;
}

/* @title Header Links */
/* @help Header text URL */
#header a {
    text-transform:capitalize;
    text-decoration:none;
    color:#FFF;
}

#header_content {
    height:100%;
    width:100%;
    margin:0 auto;
    padding:0 10px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}

#header_content > div {
    display:flex !important;
    align-items:center;
}

#header_content > div:first-child {
    flex:0 0 auto;
}

#header_content > div:first-child ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
}

#header_content > div:first-child li {
    display:flex;
    align-items:center;
}

.jlogo {
    position:relative;
    top:0;
    height:30px;
    width:auto;
    max-width:160px;
    transition:opacity 0.3s ease;
}

.jlogo:hover {
    opacity:0.8;
}

#main_logo {
    display:flex;
    align-items:center;
    cursor:pointer;
    padding-right:25px;
}

/* @title Main Menu */
/* @help Main Menu */
#main_menu {
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:right;
    font-size:16px;
    padding-right:12px;
}

#add_to_cart_success {
    float:left;
    position:absolute;
    margin:0 auto;
    background-color:#FFCC5B;
    border:1px solid #999;
    padding:7px;
    font-size:14px;
    border-radius:3px;
}

#search_input {
    color:#DDD;
    font-style:italic;
    text-transform:capitalize;
}

/* @title Wrapper Margin */
/* @help Adjust wrapper margin for taller header */
#wrapper {
    margin-top:60px !important;
    padding-top:0 !important;
}

/* @title Content Wrapper */
/* @help Ensure content appears below fixed header */
#content {
    padding-top:20px;
}

/* @title Menu Padding Reset */
/* @help Remove any unwanted padding from menu area */
.menu_pad {
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width:768px) {
    #header {
        height:56px;
    }
    
    #wrapper {
        margin-top:56px !important;
    }
    
    #header_content {
        padding:0 1em;
    }
    
    .jlogo {
        height:26px;
    }
}

@media (max-width:480px) {
    #header {
        height:52px;
    }
    
    #wrapper {
        margin-top:52px !important;
    }
    
    #header_content {
        padding:0 0.5em;
    }
    
    .jlogo {
        height:24px;
    }
}

/* skins/mis/css/html.css */


/*
* Jamroom Elastic CSS
 * Copyright 2003-2011 by Talldude Networks,LLC.
 * @author Brian Johnson - brian@talldude.net
 */

/* @title Page Background */
/* @help This is the main background for the site */
html {
    background-color:#fff;
    min-height:100vh;
}

/* @title Body */
/* @help This is the main style for the body of the page */
body {
    position:relative;
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	background:#FFFFFF;
    padding:0;
    margin:0;
}

/* @title Text Links */
/* @help Text URL links */
a {
    color:#000000;
    text-decoration:none;
    cursor:pointer;
}

/* @title Text Link Hover */
/* @help Text URL Hover */
a:hover {
    text-decoration:none;
}


.item li {
    list-style:unset;
}

#header li {
    list-style:outside none none;
}


h1,h2,h3 {
    margin:0;
    padding:0;
}

#content h1,#content h2,#content h3 {
    display:inline;
}

#jrchat-room-browser {
    padding:3px;
}

#jrchat-active-title {
    color:#000;
}

.jrchat-msg {
    color:#000;
}


/* skins/mis/css/image.css */


/* @title Image Tag */
/* @help This is the class for the img tag in your HTML */
img {
    border:0;
    vertical-align:middle;
    height:auto;
}

/* @title Image Icon */
/* @help This is the icon image */
.img_icon {
    padding:1px;
    margin-right:12px;
}

/* images (not icons) */
.img_scale {
    width:100%;
}

.img_shadow {
}

.social-img {
    margin-right:12px;
}

.row img {
    display:inline-block;
}

.item-icon > img {
    width:40px;
}

/* @title Image Outline Hover */
/* @help This is the hover color for the small outline around small images that are linked */

.create_img {
    cursor:pointer;
}

.update_img {
    cursor:pointer;
}

.delete_img {
    cursor:pointer;
}


/* skins/mis/css/core_slidebar.css */


#sb-site,.sb-site-container,.sb-slidebar,body,html {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

html.sb-scroll-lock.sb-active:not(.sb-static) {
    overflow:hidden
}

#sb-site,.sb-site-container {
    width:100%;
    min-height:100vh;
    position:relative;
    z-index:1;
}

#sb-site:after,#sb-site:before,.sb-site-container:after,.sb-site-container:before {
    content:' ';
    display:table;
    clear:both
}

.sb-slidebar {
    height:100%;
    overflow-y:auto;
    position:fixed;
    top:0;
    z-index:0;
    display:none;
    background-color:#F5F5F5;
	border:1px solid #111;
	border-radius:0px 10px 0px 10px;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
}

.sb-slidebar,.sb-slidebar * {
    -webkit-transform:translateZ(0px)
}

.sb-menu {
    width:100%;
    margin:0;
    padding:40px 0 0 0;
	border-style:solid 1px;	
	border-color:#000;
}

.sb-slidebar nav {
    margin:0;
    padding:0;
}

.sb-slidebar li {
    margin:0;
    list-style:none;
    font-size:16px;
	font-weight:bold;
    padding:12px;
    color:#000000;
    border-top:1px solid #333;
    border-bottom:1px solid #111;
    text-transform:uppercase;
}

.sb-slidebar li ul {
    margin-left:6px;
    margin-top:6px;
    padding:0;
}
.sb-slidebar li li {
    font-size:14px;
    border-bottom:0;
    padding:6px;
}

.sb-slidebar li a {
    color:#000000;
}

.sb-left {
    left:0
}

.sb-right {
    right:0
}

.sb-slidebar.sb-static,html.sb-static .sb-slidebar {
    position:absolute
}

.sb-slidebar.sb-active {
    display:block
}

.sb-style-overlay {
    z-index:9999
}

.sb-momentum-scrolling {
    -webkit-overflow-scrolling:touch
}

.sb-slidebar {
    width:30%
}

.sb-width-thin {
    width:15%
}

.sb-width-wide {
    width:45%
}

@media (max-width:480px) {
    .sb-slidebar {
        width:50%
    }

    .sb-width-thin {
        width:50%
    }

    .sb-width-wide {
        width:50%
    }
}

@media (min-width:481px) {
    .sb-slidebar {
        width:50%
    }

    .sb-width-thin {
        width:40%
    }

    .sb-width-wide {
        width:50%
    }
}

@media (min-width:768px) {
    .sb-slidebar {
        width:40%
    }

    .sb-width-thin {
        width:25%
    }

    .sb-width-wide {
        width:50%
    }
}

@media (min-width:992px) {
    .sb-slidebar {
        width:30%
    }

    .sb-width-thin {
        width:15%
    }

    .sb-width-wide {
        width:45%
    }
}

@media (min-width:1200px) {
    .sb-slidebar {
        width:20%
    }

    .sb-width-thin {
        width:5%
    }

    .sb-width-wide {
        width:35%
    }
}

#sb-site,.sb-site-container,.sb-slide,.sb-slidebar {
    -webkit-transform:translate(0px);
    -moz-transform:translate(0px);
    -o-transform:translate(0px);
    transform:translate(0px);
    -webkit-transition:-webkit-transform 400ms ease;
    -moz-transition:-moz-transform 400ms ease;
    -o-transition:-o-transform 400ms ease;
    transition:transform 400ms ease;
    -webkit-transition-property:-webkit-transform,left,right;
    -webkit-backface-visibility:hidden
		
}

.sb-hide {
    display:none
}


/* skins/mis/css/list.css */


/* @title List Row */
/* @help The List Row is the row section for ranking lists */
.list_row,.list_col {
    padding:6px;
    background-color:#CCC;
    color:#000;
}

/* @title List Image */
/* @help The List Image is for the images in the ranking list */
.list_image {
    padding:2px;
    background-color:#CCC;
    color:#000;
}

/* @title List Highlight */
/* @help The List Highlight is for the highlighted text in a ranking list */
.list_hl {
    background-color:#FFCC5B;
    color:#000;
}

/* @title List Item */
/* @help The List Item class is for the content in a  ranking list */
.item {
    padding:1px;
}

.item a {
    text-decoration:none;
}

.item a:hover {
    text-decoration:underline;
}

/* @title Blogpost Link Color */
/* @help The color for links users include in their blog posts */
.blogpost p a {
    text-decoration:none;
}

.blogpost p a:hover {
    text-decoration:underline;
}

.add_to_cart_section {
    display:inline-block;
    background:#FFF linear-gradient(#FFF,#EEE) repeat scroll 0 0;
    border-radius:3px;
    box-shadow:inset 0 0 1px rgba(0,0,0,.5);
    margin-left:2px;
}

.add_to_cart_price {
    position:relative;
    top:3px;
    left:2px;
    padding:0 2px;
    padding-top:4px;
    color:#666;
    font-size:16px;
    line-height:16px;
}

.action_buttons .add_to_cart_section {
    vertical-align:top;
    background:#FFF;
    box-shadow:none;
}

.action_buttons .add_to_cart_price {
    top:3px;
    padding:0 2px;
}

.paypal_buy_now_section {
    height:30px;
}

.paypal_buy_now_section img {
    margin-top:3px;
}

.cart-section {
    display:inline-block;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    vertical-align:top;
}

.cart-price {
    position:relative;
    top:2px;
    left:2px;
    padding:0 2px;
    padding-top:4px;
    color:#000;
    font-size:16px;
    line-height:16px;
}

/* skins/mis/css/menu.css */


/* Main menu */

#menu,#menu ul {
    margin:0 !important;
    padding:0 !important;
    list-style:none;
}

#menu {
    float:none;
    line-height:60px;
    margin:0 !important;
    padding:0 !important;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Create two groups:left (pages) and right (user actions) */
#menu {
    gap:0;
}

/* Menu pages on the left - these are the main navigation items */
#menu li.desk:not(.right):not(#feedback):not(#mentions):not(#followers) {
    order:1;
    margin-right:8px;
}

/* Spacer to push right items to the far right */
#menu li.desk:not(.right):not(#feedback):not(#mentions):not(#followers):last-of-type {
    margin-right:auto;
}

/* User actions on the right - these are user-specific items */
#menu li.right,
#menu li.login,
#menu li#feedback,
#menu li#mentions,
#menu li#followers {
    order:2;
    margin-left:4px;
    margin-right:0;
}

/* First right item gets extra left margin to separate from left items */
#menu li.right:first-of-type,
#menu li#followers {
    margin-left:auto;
    padding-left:24px;
    position:relative;
}

/* Optional:Add separator line between left and right groups */
#menu li#followers::before {
    content:'';
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    height:24px;
    width:1px;
    background:rgba(255,255,255,0.2);
}

#menu:before,#menu:after {
    content:"";
    display:table;
}

#menu:after {
    clear:both;
}

#menu {
    zoom:1;
}

#menu li {
    float:none;
    position:relative;
    text-align:left;
    line-height:normal;
}

#menu li:first-child {
    border-right:0 none;
}

#menu a {
    color:#FFF;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    text-decoration:none;
    text-shadow:0 2px 4px rgba(0,0,0,0.3);
    font-weight:500;
    padding:8px 15px;
    border-radius:8px;
    transition:all 0.2s ease;
    white-space:nowrap;
}

#menu a img {
    vertical-align:middle;
}

/* User profile images should be circular */
#menu li.right a img.user-img {
    border-radius:50%;
}

/* Convert black icons to white (except user profile images and logo) */
#menu img:not(.user-img):not(.jlogo) {
    filter:brightness(0) invert(1);
    -webkit-filter:brightness(0) invert(1);
    opacity:0.9;
}

#menu img:not(.user-img):not(.jlogo):hover {
    opacity:1;
}

/* Ensure SVG icons are white */
#menu svg {
    color:#fff !important;
    fill:#fff !important;
}

#menu svg path {
    fill:#fff !important;
}

#menu svg circle,
#menu svg rect,
#menu svg polygon,
#menu svg polyline,
#menu svg line {
    stroke:#fff !important;
    fill:#fff !important;
}

/* Specific styling for jrCore_icon SVGs */
#menu .jr_icon svg,
#menu a svg {
    color:#fff !important;
    fill:#fff !important;
}

#menu .jr_icon svg *,
#menu a svg * {
    fill:#fff !important;
    stroke:#fff !important;
}

/* Force white color on specific icon containers */
#menu li#feedback svg,
#menu li#mentions svg,
#menu li#followers svg,
#menu li#feedback svg *,
#menu li#mentions svg *,
#menu li#followers svg * {
    fill:#fff !important;
    stroke:#fff !important;
    color:#fff !important;
}

/* Ensure icon links have white icons */
#menu li#feedback a,
#menu li#mentions a,
#menu li#followers a {
    color:#fff !important;
}

#menu li#feedback a svg,
#menu li#mentions a svg,
#menu li#followers a svg {
    fill:#fff !important;
    color:#fff !important;
}

/* Override any inline styles on these specific icons */
#menu li.right svg[style],
#menu li.small svg[style],
#menu li.large svg[style] {
    fill:#fff !important;
    color:#fff !important;
}

#menu li.right svg[style] *,
#menu li.small svg[style] *,
#menu li.large svg[style] * {
    fill:#fff !important;
    stroke:#fff !important;
}

/* Ensure all icons in menu links are properly styled */
#menu a:hover img:not(.user-img) {
    filter:brightness(0) invert(1);
    opacity:1;
}

#menu li:hover > a {
    text-decoration:none;
    background:rgba(255,255,255,0.1);
}

#menu li a:hover {
    color:#FFF;
    text-decoration:none;
    background:rgba(255,255,255,0.15);
}

#menu li:hover > ul {
    display:block;
}

/* Sub-menu */

#menu ul {
    background:rgba(18,18,18,0.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,0.8);
    color:#FFF;
    font-size:13px;
    margin:0;
    padding:8px;
    opacity:0;
    position:absolute;
    top:100%;
    margin-top:8px;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    visibility:hidden;
    z-index:99999;
    display:block;
}

#menu li:hover > ul {
    opacity:1;
    visibility:visible;
    margin:0;
}

#menu ul ul {
    top:0;
    left:184px;
    color:#FFF;
    margin:0;
}

#menu ul li {
    float:none;
    min-width:200px;
    display:block;
    border:0;
    box-shadow:none;
    margin:0;
    border-radius:6px;
}

#menu ul li:last-child {
    box-shadow:none;
}

#menu ul a {
    padding:10px 12px;
    display:block;
    white-space:nowrap;
    float:none;
    text-transform:capitalize;
    font-size:13px;
    border-radius:6px;
    transition:all 0.2s ease;
}

#menu ul li:hover {
    background:rgba(255,255,255,0.1);
}

#menu ul li:hover > a {
    background:rgba(255,255,255,0.15);
}

#menu ul li:first-child > a {
    border-radius:3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content:'';
    position:absolute;
    left:5px;
    top:-6px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid rgba(255,255,255,01);
}

#menu ul ul li:first-child a:after {
    left:-5px;
    top:50%;
    margin-top:-6px;
    border-left:0;
    border-bottom:6px solid transparent;
    border-top:6px solid transparent;
    border-right:6px solid rgba(255,255,255,01);
}

#menu ul li:first-child a:hover:after {
    border-bottom-color:rgba(255,255,255,01);
}

#menu ul ul li:first-child a:hover:after {
    border-right-color:rgba(255,255,255,01);
    border-bottom-color:transparent;
}

#menu ul li:last-child > a {
    border-radius:0 0 3px 3px;
}

#menu-trigger {
    visibility:hidden;
}

#menu img {
    width:20px;
}

#menu .user-img {
    border-radius:50%;
    width:20px;
}

/* Cart */
#fc_quantity {
    position:relative;
    top:4px;
    right:8px;
    padding-right:5px;
    color:#FFCC5B;
}

/* iPad */
.no-transition {
    transition:none;
    opacity:1;
    visibility:visible;
    display:none;
}

#menu li:hover > .no-transition {
    display:block;
}

#menu .left {
    float:left;
}

#menu .left span {
    color:#F8C574;
}

/* modal */

/* @title Modal Overlay */
/* @help The background overlay for the Modal window */
#simplemodal-overlay {
    background-color:#000;
    cursor:wait;
}

/* @title Modal Window */
/* @help The Modal window */
#modal_window {
    background-color:#FFF;
    overflow:auto;
    padding:10px;
}

/* @title Modal Spinner */
/* @help The Modal window loading image */
#modal_spinner {
    vertical-align:middle;
    margin-right:8px;
}

.mobile {
    display:none;
}

li#menu_button > a {
    background:transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC") no-repeat scroll center center;
    height:22px;
    width:22px;
    display:block;
}

#menu2 {
    background:#2D3236 none repeat scroll 0 0;
}

nav#menu2,nav#menu2 a {
    font-size:14px !important;
}

.menu_pad {
    height:100%;
    padding:0 !important;
    margin:0 !important;
    display:flex;
    align-items:center;
}

#menu-wrap {
    width:100%;
    margin:0 !important;
    padding:0 !important;
    display:flex;
    align-items:center;
}

#menu_content {
    margin:0 !important;
    padding:0 !important;
}

#menu li span.notifications,
#menu li span.count {
    background:rgba(29,185,84,0.9);
    border-radius:10px;
    color:#fff;
    margin:0 0 0 6px;
    opacity:1;
    padding:2px 6px;
    position:static;
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
    top:0;
    transition:all 0.3s ease;
    font-size:11px;
    font-weight:600;
    box-shadow:0 2px 8px rgba(29,185,84,0.4);
}

#menu li span.count {
    position:absolute;
    top:0px;
    right:0px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(18,18,18,0.98);
}

#menu li {
    position:relative;
}

#menu li span.notifications.none {
    opacity:0;
}

#menu li.right ul li:first-child > a::after {
    right:4px;
    left:auto;
}

#menu li.right ul {
    right:0;
}


#menu li.login ul li:first-child > a::after {
    right:8px;
    left:auto;
}

#menu .desk.right ul ul {
    left:-183px;
    right:auto;
}

#menu li.right ul ul li:first-child a::after {
    right:-6px;
}

#menu button.form_button {
    background:rgba(0,0,0,0) linear-gradient(rgba(100,100,100,0.6),rgba(100,100,100,0.3)) repeat scroll 0 0;
    border:medium none;
    box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 0 0 rgba(0,0,0,0.35),0 2px 4px rgba(0,0,0,0.25);
    color:white;
}

#menu button.form_button:hover {
    background:rgba(0,0,0,0) linear-gradient(rgba(160,160,160,0.6),rgba(160,160,160,0.3)) repeat scroll 0 0;
}

#menu .sprite_icon,.bottom_tab .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    opacity:0.3;
}

#menu .right.small {
    margin:0 6px;
    position:relative;
}

#menu .right.large {
    margin:0 50px 0 6px;
    position:relative;
}

#menu .right .count,.bottom_tab .count {
    background:rgba(200,60,60,1) none repeat scroll 0 0;
    display:none;
    font-size:10px;
    height:15px;
    left:20px;
    line-height:1.3;
    padding:0 4px;
    position:absolute;
    text-align:center;
    top:10px;
}

.bottom_tab .count {
    background:rgba(200,60,60,1) none repeat scroll 0 0;
    display:none;
    font-size:10px;
    height:15px;
    left:40px;
    line-height:1.3;
    padding:0 4px;
    position:absolute;
    text-align:center;
    top:10px;
}

#menu .right.active .sprite_icon,.bottom_tab .active .sprite_icon {
    opacity:1;
}

#menu .right.active .count,.bottom_tab .count {
    display:block;
}


/* skins/mis/css/profile.css */


section#profile_menu {
    min-height:50px;
    width:100%;
}

div#profile_header {
    position:relative;
}

section#profile {
    border-radius:0 0 8px 8px;
    margin:0 auto;
    max-width:1280px;
    min-height:calc(100vh - 285px);
    padding:40px 0 20px;
}

/*
        PROFILE BODY
*/

.wrap {
}

.box {
    clear:both;
    margin:0 0 10px;
    padding:2px;
    position:relative;
}

.sidebar .form_textarea,.textArea textarea {
    height:50px;
    margin:0.2em;
    padding:4px;
    width:95%;
}

#profile .sidebar .form_textarea {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    box-shadow:none;
}

.action_buttons {
    position:absolute;
    right:8px;
    top:8px;
}
.sprite_icon {
    cursor:pointer;
    display:inline-block;
    margin:0;
	width:25px;
}

.sprite_icon:hover {
    cursor:pointer;
}
.textArea .form_textarea {
    height:auto;
    width:88%;
    background:none;
    box-shadow:none;
}

#recommend_string {
    vertical-align:middle;
    padding:3px 4px;
}

.comment > div {
    font-size:14px;
    padding:0;
}

.comment .like_button_box {
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

/*
.action_feedback ul a {
    display:inline-block;
    padding:12px 36px;
}
*/

.comment .like_button_box {
    margin:0;
    padding:0;
}

.comment .time {
    color:#999;
    font-size:12px;
    vertical-align:bottom;
}

.comment_upload {
    float:right;
    padding:5px 0;
}

#comment_image {
    display:table-cell;
    width:5%;
    vertical-align:top;
    padding:10px 10px 10px 0;
}

#comment_image img {
    border-radius:3px;
}

#comment_submit_section {
    float:right;
    padding:10px 0 10px 10px;
    text-align:center;
    vertical-align:top;
}

.action_feedback .error {
    margin:0 22px 0 92px;
    padding:10px;
    border-radius:3px;
}

.loader img {
    position:absolute;
    top:50px;
}

.item_tags {
    display:none;
    margin:1em 0 0;
}



a.comment_button {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUU2REE2OUVBNkIyMTFFNUE4QUFGODAzNDI0MjRCOTEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUU2REE2OURBNkIyMTFFNUE4QUFGODAzNDI0MjRCOTEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDM0ODM3MUY0MzE3MTFFMEI5QTdCNzY0MTdBNTA0MDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDM0ODM3MjA0MzE3MTFFMEI5QTdCNzY0MTdBNTA0MDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz572REQAAABnUlEQVR42sxUTUvDQBDdTTbpRyq9G0qgJeLVg17EfyDiyZN3waP/RhD8A3rw4LkXwd/Q5lCtbXootLSS9LvxTWiWEgxE2oIDG5KdmZe3M/OWB0HAtml8J4C2bbNisXhcKpWudV3fWywWqf6iKAqfz+cj13Wf+v1+tVarMUEOwzAOK5XKuxBCnc1mTFXVVGyITDabZeVy+bZer59h600hh2maj3Co0+lUBqZZZEQARAjjIWRNj3w+fzIejxnn/O81Qw7lZjKZAwkI8zZqBECXy+W3BAy22GqFbdl2A4ga6JueGhhCAqKgQdrZS2oKCGkSEFN+n8vlaPJDZ3x8or2khbFjw+HwWQJ2Op07rJc4IJWBmNN+EjD5ut1uFfk3FCNWgUGr1brs9Xr7UIuByTcty6oWCgU2GAw+G43GBWJ8JUJeM/xwNJlMvqIeiJXImaZpDEJ3Pc+j9w9cEqGsHMc5hRLaUMKvWqY4yo1MrAfglgmPgeQj+gbYue/7bWKaZPFmSkBig26HgDiy32w2r9CsVyo4MUmrc/7vb+wfAQYA1DjOpqcru6kAAAAASUVORK5CYII=") no-repeat scroll 10% center;
    padding:10px 12px 10px 35px;
}

a.share_button {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMyMjMxMkE5QTZCMjExRTVBNzdGRDUwQzRDQUZBREYwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMyMjMxMkFBQTZCMjExRTVBNzdGRDUwQzRDQUZBREYwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzIyMzEyQTdBNkIyMTFFNUE3N0ZENTBDNENBRkFERjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzIyMzEyQThBNkIyMTFFNUE3N0ZENTBDNENBRkFERjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4AQftAAAACgElEQVR42pSTy2tTQRTGJzeTd0LSRCWbPCqYrFRKWxC6F+tKF4Ju3Eu2/gEuXLoU14LYvfpntBuRgtIWi8kiMZikubl5P/y+4R65xkbrgeHO3Dnnd745c0ZXKhVFWywWKhwOK621mc9mM+Xz+ZTf7zdf/uO80+k8sSyrlkgkPoxGI7PnNUutMDrO53M1nU4NjGsmm0wmN2u12nvAroVCIbN3IaBAGQCIgdMCgcBHrqvV6j6gV5ehfwUaB8syYCp1kwyDwSCTJAE9AHTdC7VWKYMSxUAC4ewDYM1xnCzmOfoQgiRrLrQoUL0MI4jH63a7u/1+/zZAGwhcx78MtoMYfvowmAnH43EaNd3P5XKbWH/7DUiH4XC4Wa/XX0LNLbkMOba3DNIZLvQSoAfZbPaO9iqDqkeA7bFl6HgRI5THtW37crPZfKP5gzAou9toNPakfoRyT1SyDBzck16Veg8GAxWLxX4UCoXHmnQ4xtrt9jsGSDOjyY/ZwJh/R7AN0AygOep6HWNHygAhPE2rVCptIeZUR6NRBalPIZnzaSaTeY5sbxFwLPXii0gmk4q+uNWHKM0OhbiwTrlc3opEIqdUqnm0Vqv1LB6PHxWLxV04nrBxpZnltdCZcKyv8OvCzlzYV+6b19Tr9e4xKJ/Pb+BIDtVwLTXiXC7Ifd8TwqDWxjG3ATsRGE2jHg/S6fQLODi4/l8tITfItTQtg5DwBi8GyrYRc+SFGSAWZ9h4zeyiwttv0ug0Hh3wT1B2HzFflmEGiIBD3M6hgEQh15xL+9BYjlQq9QrHVOfBTDyAn6mCwTIEIH3ofeNMQKXnwYxC9FnNq2IZ8r/2B1CgqxT8y34KMABFVbboGmWuxgAAAABJRU5ErkJggg==") no-repeat scroll 10% center;
    margin:0;
    padding:12px 10px 12px 32px;
}

a.tag_button {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE1MzQzQjIyQTgxMDExRTU4NDk3RjdEMUI0N0YzNDFFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE1MzQzQjIzQTgxMDExRTU4NDk3RjdEMUI0N0YzNDFFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTUzNDNCMjBBODEwMTFFNTg0OTdGN0QxQjQ3RjM0MUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTUzNDNCMjFBODEwMTFFNTg0OTdGN0QxQjQ3RjM0MUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz555lWhAAAA9ElEQVR42qzVPQuDMBAG4Fzt4KwUFxdHBf+4f0dQcHFSiCLoIm7XniBUm4+zmsEhCY+55DUCIoo720Pc3J70SNPUOClJEjxWAgCiaRpwHEcEQYBZlgFrhXEco2pbqG+aphWTUgKrZMJU/W3bQtd1QON5nsNPyWcwKtV1XeF5HhL62a5tnr5kHbaVOs+zGIYBxnFUHwoX21oYhkgr9X3fHBsO9r1SYw7PYNZgR1HUX0Go/B1Y1/XrClgUxT6H9IaqquAfrCxL0B7KWfSIKXPIRVWYNtg2VIcZv2UdasKsl8MRtWGs64uQZVl6DrYm5u5fwFuAAQBINnUv6P4z/wAAAABJRU5ErkJggg==") no-repeat scroll 0 center;
    padding:9px 9px 9px 27px;
}



.item.rounded.urlscan_card {
    box-shadow:none;
    margin:0;
    padding:0;
}

.wrap .title {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    color:#444;
    display:block;
    font-size:18px;
    font-weight:bold;
    padding:0;
    text-transform:capitalize;
    vertical-align:top;
    margin-top:-4px;
}

.media_image {
    float:right;
    margin:0 0 0 1em;
    width:50%;
}

.location,.date,.category {
    color:#999;
    display:block;
    font-size:14px;
}

.list-item img {
    width:100%;
}

.col3 .item_media .wrap > p {
    margin:0;
}

.clear {
    clear:both;
}

.double_1,.double_2 {
    float:left;
    width:50%;
}

.triple_2,.triple_3 {
    float:left;
    width:50%;
}

.quads_1 {
    width:66.66%;
    float:left;
}

.quads_2,.quads_3,.quads_4 {
    float:left;
    width:33.33%;
}

.fifths_1,.fifths_2 {
    float:left;
    width:50%;
}

.fifths_3,.fifths_4,.fifths_5 {
    float:left;
    width:33.33%;
}

.single_1 > div,.double_1 > div,.double_2 > div,.triple_1 > div,.triple_2 > div,.triple_3 > div,.fifths_1 > div,.fifths_2 > div,.fifths_3 > div,.fifths_4 > div,.fifths_5 > div,
.quads_1 > div,.quads_2 > div,.quads_3 > div,.quads_4 > div {
    padding:1px;
}

.list-info.full {
    position:absolute;
    background:rgba(0,0,0,0.5);
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:5;
    text-align:center;
}

.list-info.full span {
    font-size:22px;
    color:white;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
    right:0;
    text-align:center;
}

.list-item.quads .list-info span {
    display:block;
    font-size:2em;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    color:white;
}

.list-item.photo.hidden {
    display:none;
}

.profile_hoverimage {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    color:white;
    display:none;
    left:4px;
    line-height:0;
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
}

.profile_image .normal {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
    color:#FFF;
    font-weight:bold;
    padding:7px;
}

.list-info .title {
    font-weight:normal;
}

.list-info.photo > div {
    padding:5px;
}

.head_tab > li {
    border-radius:8px 8px 0 0;
}

#actions_tab > li:last-child {
    border-radius:0 8px 0 0;
}

#actions_tab > li:first-child {
    border-radius:8px 0 0;
}

.action_buttons li {
    list-style:outside none none;
    padding:7px;
}

#actions_tab li.solo {
    border-radius:8px 8px 0 0;
}

.action_buttons ul {
    margin:0;
    padding:0;
}

.box > ul#actions_tab,.box > ul.head_tab {
    height:35px;
    margin:0;
    padding:0;
}

.comment_content {
    display:table-row;
}

.user_image {
    display:table-cell;
    width:10%;
    padding:8px;
}

.comment_page_section {
    background:#FFF none repeat scroll 0 0;
    display:table;
    box-sizing:border-box;
}

.comment {
    border-bottom:1px dotted #CCC;
    display:table-cell;
    padding:5px;
    vertical-align:top;
}

.like_button_box a {
    line-height:22px;
    vertical-align:bottom;
}

.like_button_box a:hover {
    text-decoration:none;
}

.dislike_button_box a {
    line-height:22px;
    vertical-align:bottom;
}

.dislike_button_box a:hover {
    text-decoration:none;
}

.comment > div > a {
    vertical-align:bottom;
}

.comment .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    padding:3px;
}

.player_button {
    display:block;
    height:50px;
    width:50px;
}

.player_button > a {
    background:rgba(0,0,0,0) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEyMXB4IiBoZWlnaHQ9IjEyMXB4IiB2aWV3Qm94PSIwIDAgMTIxIDEyMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMyAoMTE5NzApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlBsYXk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0xIj4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4yMSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIgdHlwZT0ibWF0cml4IiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgICAgICA8ZmVNZXJnZT4KICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPgogICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIj48L2ZlTWVyZ2VOb2RlPgogICAgICAgICAgICA8L2ZlTWVyZ2U+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0iTGFuZHNjYXBlLS0tNi1QbHVzIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI0MC4wMDAwMDAsIC0zNDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJQbGF5IiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjQwLjM0MjEzMywgMzQ2LjMzMzMzMykiPgogICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAyIiBmaWxsLW9wYWNpdHk9IjAuNCIgZmlsbD0iIzAwMDAwMCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY3g9IjYwIiBjeT0iNjAiIHJ4PSI2MCIgcnk9IjYwIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDMuNTAwNDQ3MSw3OC40NjA5MjM5IEM0My40NjQ0MTEsODAuOTM5NTI4NSA0NS42MTA4MDc0LDgyLjkwMDkwODQgNDguNTQ3NzQ0NCw4MS40MjE2NjgxIEw4MC4wOTA1MzcxLDYyLjc3MjE0ODcgQzgyLjU1Nzg3OTUsNjEuMzM4MTc5NyA4Mi41NzcwMjM2LDU3LjI4MTg2OTYgODAuMDc0NzcxNCw1NS44MDk0MiBMNDguODQ3MjkzOSwzNy4zMTk0ODIgQzQ2LjU1MTEyMjcsMzUuOTQ0MzY1NyA0My41MTczMzg5LDM2LjY3NjYyOTMgNDMuNTE3MzM4OSw0MC4xMzc2MjE1IEw0My41MDA0NDcxLDc4LjQ2MDkyMzkgTDQzLjUwMDQ0NzEsNzguNDYwOTIzOSBaIiBpZD0iSW1wb3J0ZWQtTGF5ZXJzIiBmaWxsPSIjRkZGRkZGIiBmaWx0ZXI9InVybCgjZmlsdGVyLTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat scroll center center / contain;
    display:block;
    height:40px;
    margin:auto;
    width:40px;
}

div#list > .item:last-child,
.widget-item-widget_list > .item:last-child {
    margin:0;
    border:medium none;
}

div#list > .item:first-child,
.widget-item-widget_list > .item:first-child {
    margin:0 auto;
}

#list ul li:last-child .item {
    margin:0;
}

#list ul li:first-child .item {
    margin:0;
}

#guestbooks .item:last-child,#guestbooks .item:last-child {
    margin:0;
    border:medium none;
}

.list_item:last-child {
    border:medium none;
    margin:0;
}

#list .item h1 {
    margin:0;
}

#list li .list_item:first-child {
    margin:0 0 1em;
}

#list li:last-child .list_item:first-child {
    margin:0;
}

#list li {
    list-style:none;
}

#list ul.sortable li:last-child .list_item {
    border:medium none;
}

#list > .ui-sortable .list_item {
    border-bottom:1px solid #EEE;
}

.list-info > div {
    padding:5px 15px;
}

.item_media .list-info div > span {
    font-size:1.3em;
}

.blog {
    position:relative;
}

.blog > .media_image {
    float:none;
    margin:0;
    width:100%;
}


.online_status_user h2 {
    margin:0;
}

.list-text {
    border-bottom:1px dashed #333;
    padding:5px 0 3px;
    position:relative;
}
.solo {
    border-radius:8px 8px 0 0;
}

.block_search h3 {
    display:inline;
    font-size:14px;
    margin:0;
    padding:0;
}

.follow_pending {
    background:#333 linear-gradient(#788,#555) repeat scroll 0 0;
    color:white;
}

.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

.clearfix {
    display:inline-block;
}

* html .clearfix {
    height:1%;
}

.clearfix {
    display:block;
}

.small_image {
    width:33.33%;
    float:left;
}

.small_image > div {
    padding:1px;
}

.online_status_online {
    background-color:#CF9;
    color:#000;
    display:inline-block;
    padding:4px;
    width:100%;
}

.online_status_offline {
    background-color:#CF9;
    color:#000;
    display:inline-block;
    padding:4px;
    width:100%;
}

.more > a {
    color:#269;
}

.breadcrumbs > a {
    display:inline-block;
    text-transform:capitalize;
    text-decoration:none;
}

.profile_tab_holder {
    width:100%;
    padding:5px;
    margin:10px;
    border-bottom:1px solid #B8B8B8;
}

.profile_tab {
    float:left;
    min-height:37px;
    margin-bottom:-1px;
}

.profile_tab > a {
    background:#FFF linear-gradient(#FFF,#EEE) repeat scroll 0 0;
    border:1px solid #B8B8B8;
    border-radius:3px 3px 0 0;
    display:inline-block;
    font-weight:bold;
    padding:8px;
    text-transform:capitalize;
    text-decoration:none;
}

a.profile_tab_active {
    background:#FFF linear-gradient(#EEE,#DDD) repeat scroll 0 0;
    margin-bottom:-1px;
    border-bottom:0;
}

.profile_tab > a.profile_tab_active {
    border-bottom:1px solid #D7DADC;
}

.image_nav .form_button {
    padding:5px 10px;
}

.list-item.photo {
    position:relative;
}

.list-item.photo.quads > div > div {
    position:relative;
}

section#profile .page_tab_bar_holder {
    border-bottom:medium none;
}

.middle > div {
    text-align:center;
}

.comment_text {
    display:inline-block;
    color:#000;
    padding:10px 0;
    margin:0 0 10px;
}

#jrEvent_calendar .ecal-calendar th {
    background:#DFDFDF none repeat scroll 0 0;
    border:1px solid #CCC;
    color:#555;
    padding:10px 0;
    text-align:center;
}

#jrEvent_calendar table.ecal-main {
    width:100%;
}

#jrEvent_calendar .ecal-date {
    border:medium none;
    color:#666;
    margin:5px 0 0;
}

#jrEvent_calendar .ecal-shadow {
    opacity:0.3;
}

.ecal-main.ecal-calendar img {
    float:left;
    width:25px;
}

.ecal-event-list li a {
    font-size:11px;
}

#jrEvent_calendar .ecal-even-row {
    background-color:#FFF;
    background-image:none;
}

#jrEvent_calendar .ecal-today .center {
    font-size:0.9em;
    font-weight:bold;
}

#profile_header > .wrap {
    background:white none repeat scroll 0 0;
    border-radius:5px;
    box-shadow:0 0 2px #AAA;
}

div#profile_header > div > a > img {
    display:block;
    margin:auto;
    max-width:1500px;
    position:relative;
    width:100%;
}

.wrap.cat:first-child {
    padding:1em;
}

.wrap.cat {
    padding:0 1em 1em;
}

.faq h3 {
    display:inline;
}

.doc_pager {
    background:#D6D7D9 none repeat scroll 0 0;
    display:table;
    font-size:14px;
    width:100%;
}

.section_text {
    background:#FDFDFF none repeat scroll 0 0;
    color:#666;
    font-size:14px;
    padding:12px;
}

.doc_pager a {
    color:#000;
}

.doc_toc a {
    color:#752545;
    cursor:pointer;
}

.new_section_button > a {
    color:white;
}

.new_section_button {
    padding:5px;
}

.new_section_box {
    background:white none repeat scroll 0 0;
    border:medium none;
    border-radius:4px;
    box-shadow:3px 3px 16px #999;
    display:none;
    overflow:visible;
    padding:12px;
    position:inherit;
    text-align:left;
    width:400px;
    z-index:10000;
}

.section_function_title {
    background:white none repeat scroll 0 0;
    border:2px solid #999;
    font-family:"Roboto Mono",monospace;
    font-size:16px;
    margin:10px 0;
    padding:12px;
}

.section_function {
    border:1px solid #CCC;
    border-radius:3px;
    display:table;
    font-size:14px;
    margin-bottom:0;
}

.section_function_name {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    margin-bottom:0;
    padding:12px;
}

.section_function_cell {
    background:#FFF none repeat scroll 0 0;
    border-bottom:medium none;
    border-top:1px solid #EEE;
    padding:9px 12px;
}

.section_function_desc {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
}

.section_file {
    background:#FFF none repeat scroll 0 0;
    border-radius:3px;
    margin-bottom:12px;
}

.toc_chapter {
    margin:0;
}

.doc_toc_list h1 {
    margin:0;
}

.toc_indent_1 {
    margin:5px 0 0 26px;
}

.forumCrumbs {
    font-size:16px;
    font-weight:normal;
}

.forum_post_pinned {
    border:2px dotted #CCC;
}

.forum_post_count {
    background:#EEE none repeat scroll 0 0;
    margin-right:0;
}

.forum_post_image {
    font-size:11px;
    word-break:keep-all;
    word-wrap:normal;
}

.forum_post_image a {
    word-wrap:break-word;
    word-break:break-all;
}


.playlist_box {
    background-color:#FFF;
    border:medium none;
    border-radius:8px;
    box-shadow:1px 1px 10px #999;
}

.advert {
    float:right;
    margin:46px 0 0;
    width:90px;
}

.bbcode_quote {
    border-radius:3px;
}

div#tag_message {
    margin:1em 0;
    padding:3px;
}


.item_media.action_text.clearfix > p {
    margin:1em;
}

.p5.center.field-hilight > a {
    color:#333;
}

.action_comments {
    position:relative;
    padding:0;
    margin-top:10px;
}

.action_item_detail {
    padding:1em;
    background:#F6F8FC;
    border-radius:5px;
    box-shadow:0 0 2px #BBB;
}

#comment_area .textArea {
    padding:10px 0;
}

#comment_text {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    height:72px;
    width:100%;
    border:1px solid #777;
    border-radius:3px;
    box-sizing:border-box;
}

.detail_section .action_comments {
    display:block;
}

.detail_section .action_feedback {
    padding-top:10px;
}

.detail_section .title {
    font-size:20px;
}

.caption {
    background:#111 none repeat scroll 0 0;
    color:#EEE;
    padding:1em;
}

.tag_name_box {
    background:white none repeat scroll 0 0;
    border:medium none;
    box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 0 0 rgba(0,0,0,0.35),0 2px 4px rgba(0,0,0,0.25);
    margin:6px;
    padding:6px;
}

.item_tags > div {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    margin-bottom:12px;
}

.tag_name_box:hover {
    background:#393E42 none repeat scroll 0 0;
}

.pending {
    padding:1em;
}

.action_comment {
    background:#FFF none repeat scroll 0 0;
    box-shadow:0 0 2px #AAA;
    padding:12px;
}

div#editor-input form > br {
    display:none;
}

section .block_content textarea {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    width:98%;
    padding:6px;
}

#timeline .block {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
}

.item .border {
    border-top:1px solid #EEE;
}

#profile .block .page_content {
    padding:0;
    border-radius:0;
}

#profile .page_content {
    padding:10px 0;
    border-radius:4px 4px 0 0;
}

.timeline_filter {
    background-image:linear-gradient(#FFF,#EEE);
    border-radius:4px;
    box-shadow:0 0 2px #BBB;
    position:absolute;
    right:0;
    top:50px;
}

.timeline_filter > li {
    border-bottom:1px solid #CCC;
    cursor:pointer;
    line-height:2.4em;
    padding:7px 16px;
    text-align:right;
    text-transform:capitalize;
    width:100px;
}

.timeline_filter > li:last-child {
    border:medium none !important;
}

.timeline_filter > li:first-child {
    border-radius:4px 4px 0 0;
}

.timeline_filter > li:last-child {
    border-radius:0 0 4px 4px;
}

.timeline_filter > li a {
    color:#444;
}

.timeline_filter > li:hover {
    background-color:#933;
}

.timeline_filter > li:hover a {
    color:white;
}

.image_stack img {
    box-shadow:1px 1px 5px #000;
}

.list-item.photo.triple {
    float:left;
    width:33.3%;
}

section#profile .col8 .block .block_content {
    clear:both;
}

section#profile .block .title h1 {
    font-size:18px;
    color:#000000;
    font-weight:normal;
    margin:0;
}

.p5.center {
    position:relative;
}

.photoalbum_box {
    background-color:#FFF;
    border:medium none;
    box-shadow:1px 1px 11px 0 #999;
}

.form_button.photoalbum_button {
    padding:7px;
}

.gallery_lightbox {
    padding:0;
}

#group_button {
    border:none;
}

.list-info.full {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0 !important;
}

.box_body {
    border-radius:0 4px 4px;
}

.head_tab > li a,#actions_tab > li a {
    display:block;
    height:21px;
    width:21px;
}

#actions_tab > li,.head_tab > li {
    background-color:#DFDFDF;
    float:left;
    list-style:outside none none;
    padding:9px 8px;
    position:relative;
}

.stat_entry_box > a {
    background:white none repeat scroll 0 0;
    border:1px solid #EEE;
    border-radius:2px;
    display:block;
    line-height:1.6;
    margin:0 0 2px;
    padding:5px 10px;
    text-transform:capitalize;
}

.action .item {
    border:medium none;
}

#profile .page_table {
    background-color:#DDD;
}

.action .middle {
    width:44%;
}

.attending {
    color:#111;
}

#profile .block .page_content {
    box-shadow:none;
}

.header,.details {
    display:table-row;
}

.details > div {
    display:table-cell;
    padding:5px;
    text-align:center;
    width:25%;
}

.header > div {
    display:table-cell;
    padding:5px;
    text-align:center;
    width:25%;
}

.header {
    background-color:#555;
    color:white;
    font-weight:lighter;
}

.details {
    background:white none repeat scroll 0 0;
    color:#000;
    font-weight:bold;
}

.detail_box > .media {
    padding:4px 0 4px 8px;
}

.detail_box {
    margin:1em 0;
}

.detail_box > div {
    background:#F2F2F2 none repeat scroll 0 0;
    border-bottom:1px solid #555;
    border-top:1px solid #777;
    color:#000;
    padding:5px;
}

.detail_box > div > .item {
    color:#000;
}

.detail_section .item.clearfix {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
}

.detail_box .item {
    border-radius:0;
    box-shadow:none;
    margin:5px 0 0;
}

.trigger > span {
    font-weight:bold;
}

.detail_box div:last-child {
    border-bottom:medium none;
}

.lyrics .item,.description .item {
    margin:5px auto 0;
    text-align:left;
}

.trigger {
    cursor:pointer;
    text-align:center;
}

.image {
    margin:0 1em 0 0;
}

.list_buttons > a {
    float:right;
}

.list_buttons > div {
    float:right;
}

.list_item .title {
    display:block;
    font-size:16px;
    font-weight:bold;
    margin:0 0 3px;
}

.list_item .data.clearfix span {
    display:block;
    float:left;
    margin:1em 0 0;
    width:50%;
    color:#999;
}

.list_item .data.clearfix span:last-child {
    text-align:right;
}

.page_nav.clearfix {
    margin-bottom:10px;
}

.author_image {
    float:left;
    height:60px;
    margin:0 15px 5px 0;
    overflow:hidden;
    width:60px;
}

.author {
    color:#999;
    margin:1em 0;
}

.author > span {
    color:#666;
    font-weight:bold;
}

.author .sprite_icon.email {
    float:right;
}

.detail_section .media_text {
    font-size:18px;
    line-height:1.4;
}

.external_image {
    height:200px;
    overflow:hidden;
    max-height:200px;
}

.col4 .external_image {
    height:auto;
}

.col4.last > .box {
    margin:0 0 0 8px;
}

p.waiting {
    background:white none repeat scroll 0 0;
    box-shadow:0 0 2px #AAA;
    margin-top:0;
    padding:12em 0;
}

#profile > .row > .col8.last > div {
    padding:0 0 0 8px;
}

#playlist_message {
    font-size:14px;
    padding:10px;
}

.profile_data.profile {
    bottom:0;
    color:white;
    font-weight:bold;
    left:127px;
    margin:0;
    min-width:300px;
    position:absolute;
    text-shadow:1px 1px #333;
    z-index:1;
}

#profile_header .profile_name {
    bottom:55px;
    color:white;
    font-size:33px;
    font-weight:bold;
    left:135px;
    position:absolute;
    text-shadow:1px 1px 1px #333;
    text-transform:uppercase;
    z-index:1;
}

.profile_data.profile span {
    color:#FD9;
    font-weight:bold;
    text-shadow:none;
}

.profile_data.profile li {
    font-size:24px;
}

.profile_hover {
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
    bottom:0;
    height:40%;
    left:0;
    min-height:150px;
    pointer-events:none;
    position:absolute;
    width:100%;
    z-index:0;
}

.list_item .sprite_icon {
    padding:0;
    margin-left:3px;
}

.form_button,.follow,.following {
    background:#FFF linear-gradient(#FFF,#EEE) repeat scroll 0 0;
    border:1px solid #CCC;
    border-radius:2px;
    box-shadow:none;
    color:#555;
    height:auto;
    margin:0;
    padding:7px 10px;
    text-transform:capitalize;
    vertical-align:middle;
    font-weight:normal;
    font-size:14px;
    cursor:pointer;
}

.upload_button {
    margin-left:2px;
}

.follow,.following {
    font-size:14px;
}

section#profile .comment_upload .form_button {
    border:medium none;
}

.button_player,.sc_button_player {
    float:right;
}

.profile_info {
    bottom:0;
    left:0;
    position:absolute;
    width:100%;
}

.profile_buttons {
    padding:3em 0 0;
    text-align:right;
}

.profile_admin_buttons .sprite_icon {
    padding:2px;
}

.action_table {
    background:white none repeat scroll 0 0;
    border-radius:5px 5px 0 0;
    display:table;
    width:100%;
}

.action_row {
    display:table-row;
}

.action_cell {
    display:table-cell;
    padding:15px 0 0 15px;
    vertical-align:top;
    width:50px;
}

.action_large_cell {
  border-style:solid;
  border-color:#C1C1C1;
	border-width:1px;
  display:table-cell;
    padding:10px;
	border-radius:10px;
}

.action_form_buttons .wrap.clearfix {
    padding:7px 1em;
}

.action .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    padding:0;
}

.head .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    cursor:default;
    float:right;
    padding:0;
    position:relative;
    top:-2px;
}

.head .wrap {
    padding:10px 1em 0;
}

.profile_admin_buttons {
    position:absolute;
    top:0;
    width:100%;
}

.camera .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    margin:0;
    max-width:40px;
    opacity:0.6;
    padding:0;
}

.profile_hoverimage .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    opacity:0.6;
}

.profile_buttons .form_button {
    font-weight:bold;
    font-size:14px;
}

a.camera {
    display:block;
    max-width:180px;
    padding:5px;
    width:100%;
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:2px solid rgba(255,255,255,0);
    transition:all 0.5s ease 0s;
    border-radius:5px;
    color:rgba(0,0,0,0);
    text-decoration:none;
}

a.camera:hover {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    border:2px solid rgba(0,0,0,0.7);
    color:rgba(255,255,255,1);
}

.update_modal {
    background:white none repeat scroll 0 0;
    border-radius:5px;
    display:none;
    text-align:center;
}

.block_recommend input[type="text"] {
    width:70%;
}

.trending > p:first-child {
    margin:0;
}

.profile_information {
    font-size:15px;
    line-height:1.6;
}

.profile_information .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    margin-right:5px;
    padding:0;
}

.bio .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    float:right;
}

a.full_bio {
    color:#68A;
}

.modal {
    margin:auto;
    max-width:650px;
}

.modal .simplemodal-close {
    cursor:pointer;
}

.comment_upload .upload_button {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/camera.png") no-repeat scroll 96% center / contain;
    display:block;
    opacity:0.5;
    text-indent:-99999px;
    width:20px;
    height:20px;
}

.attachment_upload_button #pm_comment_file .qq-uploader {
    top:5px;
}

.file_attachment {
    padding:0 !important;
}

.overlay.bundle_box {
    background-image:linear-gradient(#FFF,#EEE);
    box-shadow:0 0 10px #888;
}

.online_status {
    text-transform:capitalize;
}

.small_image > div:hover {
    opacity:0.8;
}

.new_section_box h3 {
    margin:5px;
}

.overlay.new_section_box {
    width:230px;
}

#timeline .block {
    background:#F6F8FC none repeat scroll 0 0;
    box-shadow:0 0 2px #AAA;
    border-radius:5px;
}

.profile_button.form_button.attendee {
    font-weight:bold;
    height:auto !important;
    padding:11px 15px;
}

.list_item h2 {
    margin:0 0 5px;
}

.follow_buttons {
    float:right;
}

.follow_buttons .sprite_icon {
    margin-left:3px;
}

.follow_buttons.clearfix > a {
    float:right;
}

.profile_button.follow_button {
    float:left;
}

.manage_button.form_button {
    float:right;
}

.list_item .form_help_drop_left {
    padding:0 3em;
    font-size:20px;
}

.list_item .form_help_drop {
    padding:0;
}

.forum_new_post_form .qq-upload-button {
    display:block;
    padding:8px 10px;
    margin:0 !important;
}

.forum_post_text {
    line-height:1.5;
}

.p5.pl10 > h2 {
    color:#933;
}

.list-text .sprite_icon {
    padding:0;
}

.profile_name > h1 {
    font-size:18px;
}

.urlscan_card h2 {
    margin:0 0 1em;
}

.urlscan_card .p10 {
    padding:0 10px;
}

.action .form_help_drop {
    background:#EEE none repeat scroll 0 0;
}

.action .form_help_drop_left {
    font-size:20px;
    padding:5px 25px 10px;
}

.form_help_drop_left p {
    margin:0;
}

.tm a {
    color:#000000;
	text-transform:uppercase;
}

.tm {
    padding:0;
}

.tm > li {
    background:white none repeat scroll 0 0;
    border:1px solid #EEE;
    margin:2px 0;
    padding:5px 10px;
    list-style:none;
}

.list_item.spaced .sprite_icon {
    margin:6px 0;
}

#action_search .form_text {
    width:50%;
}

#action_search.item.p10 {
    border-radius:5px;
    box-shadow:0 0 2px #BBB;
    margin:0 auto 1em;
}

.list_item.bordered {
    margin:0 0 5px;
    padding:0 0 5px;
}

.list_item.bordered:last-child {
    margin:0;
    padding:0;
}

.rating {
    background:white none repeat scroll 0 0;
    border:1px solid #EEE;
    display:none;
    margin:0 0 5px;
    padding:1em 0;
}

.rating > div {
    display:block !important;
    margin:auto;
    width:80px;
}

.sprite_icon.jr {
    padding:0;
}

.mention-modal {
    max-width:550px;
    margin:auto;
}

.follow_data {
    color:#666;
    margin:30px 0 0;
    min-height:120px;
    padding:10px;
}

#basic > li {
    border-bottom:1px solid #EEE;
    padding:5px 20px 5px 5px;
    text-transform:uppercase;
    white-space:nowrap;
}

#basic a {
    padding:0 10px;
    white-space:nowrap;
    width:146px;
}

.arrow-down {
    border-bottom:10px solid #FFF;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    height:0;
    left:12px;
    position:absolute;
    top:-10px;
    width:0;
}

#asi {
    margin-bottom:6px;
}

.action_buttons .sprite_icon {
    cursor:pointer;
}

.margin {
    display:block;
    margin-top:1em;
}

.youtube-container {
    margin:0;
}

#oneall_timeline_networks > a {
    text-decoration:none;
}

#oneall_timeline_networks > span {
    display:none;
}

.form_editor_holder {
    padding:7px 0;
}

.profile_information .sprite_icon {
    cursor:auto;
}

.urlscan_card {
    border:medium none;
    border-radius:3px;
    margin-top:0;
    padding:0;
}

.small_follow_container {
    position:absolute;
    right:0;
    top:6px;
}

.urlscan_card .date {
    text-transform:none;
}

#mention_modal {
    width:500px;
    height:300px;
}

.event_attend_button {
    float:right;
    background:transparent;
    margin:2px 3px 0 6px;
    padding:2px;
    border-radius:3px;
    font-size:13px;
}

.author span.date {
    font-weight:lighter;
}

.sprite_icon.sprite_icon_hilighted {
    background:#FFDC71 none repeat scroll 0 0;
}

.discussion_follow_box {
    background:#FFDC71 none repeat scroll 0 0;
    color:black;
}

#comment_form_section {
    padding:1em;
    box-sizing:border-box;
}

#shareThis {
    padding:1em;
    border-radius:3px;
}

.item_media .wrap > p.no-items:first-child {
    margin:1em 0;
}

.comment_page_section > div {
    display:table;
}

#share_modal_box .action,#share_modal_box .item {
    max-height:400px;
    padding:0;
}

#share_modal_box .item > .wrap {
    padding:0;
}

#share_modal {
    display:none;
    height:400px;
    width:540px;
    z-index:100000;
}

#share_form .button_player {
    display:none;
}

#share_update {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:13px;
}
.shared {
    border-bottom:1px solid #EEE;
    font-size:14px;
    padding:0 6px 10px;
}

.wrap_share {
    padding:1em;
}

.wrap_share_data {
    padding:1em;
    border:1px solid #E3E3E3;
    margin-top:10px;
}

.action_text .wrap {
    background:white;
}

.action_name {
    color:#933;
}

.shared > div {
    display:inline-block;
    margin:0 5px 0 0;
    width:25px;
}

.head .block_search .form_button {
    font-size:13px;
    padding:3px;
    position:relative;
    top:-4px;
}

.head .block_search .form_text {
    height:23px;
}

.profile_images > .profile_name {
    padding:0 5px;
}

.page_nav.clearfix {
    position:relative;
}

.item.item_profile_help {
    margin:12px 0 0;
    clear:both;
}

#profile .block {
    padding:2px 0 0 0;
}

#comment_form_section {
    padding:0;
}

#profile .col9 > div {
    padding:5px;
}

.title {
    border-radius:5px 5px 0 0;
}

.page_banner_box {
    background:white;
}

.page_banner {
    background:white;
}

.form_submit_section {
    background:white;
}

.page_content {
    background-color:#FFF;
}

.page_table_header {
    background:#FAF9F2 linear-gradient(#FFF,#EEE) repeat scroll 0 0;
}
.mis_modal .comment_page_section {
    max-height:376px;
    overflow:auto;
}
.mis_modal {
    background:white none repeat scroll 0 0;
    border-radius:10px;
    height:540px;
    padding:1em;
    width:600px;
}
.simplemodal-close {
    color:white;
    cursor:pointer;
    display:block;
    font-size:28px;
    position:absolute;
    right:0;
    bottom:-37px;
}
.comment_button {
    padding:0 5px;
}
.profile_minimal .profile_info {
    position:relative;
}
.videos > .wrap {
    padding:0 3em;
}

#profile .videos .head {
    border:medium none;
    color:#888;
    font-size:20px;
    padding:30px 0 10px;
}

.videos .list_nav.previous {
    left:-38px;
}

.videos .list_nav.next {
    right:-38px;
}

.list_wrap {
    position:relative;
}

section.detail_box {
    margin:0;
}

.videos {
    padding-bottom:3em;
}

.detail_box .wrap > .row {
    border-bottom:1px solid #ccc;
    padding-bottom:2em;
}

.videos > .wrap > .row:first-child {
    border-top:1px solid #fff;
}
.mis_modal {
    background:white none repeat scroll 0 0;
    border-radius:10px;
    height:540px;
    padding:1em;
    width:800px;
    overflow:scroll;

}

.mis_modal .comment_page_section {
    max-height:376px;
    overflow:scroll;
}

.simplemodal-close {
    color:white;
    cursor:pointer;
    display:block;
    font-size:28px;
    position:absolute;
    right:0;
    bottom:-37px;
}

.mis_modal a {
    color:#58c;
}
.media_poll {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 3px 0px 3px 3px;	
    color:#000;
    overflow:hidden;
	border-radius:5px;
	margin-right:5px;	
	margin-left:5px;	
}
.title_poll_item {
  padding-left:10px;	
  coler:#000000;
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
} 
.poll_choices .item.poll_choice {
    margin:5px;
    padding:0;
}

.poll_countdown {
    float:left;
	width:100%;
    background-color:#ECF0F2;
    margin:0 15px 5px 0;
    border-radius:3px;
}

.action .poll_countdown {
    float:none;
    min-width:150px;
    padding:0;
    text-align:center;
}

.media {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.50) 0px 1px 1px;
    color:#000;
    overflow:hidden;
	border-radius:10px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:15px;
	position:relative;
}
.mediai {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.50) 0px 1px 1px;
    color:#000;
    overflow:hidden;
	border-radius:10px;
	margin-left:5px;
	margin-right:5px;
	position:relative;
}
.media_pad {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.50) 0px 5px 5px;
    color:#000;
    overflow:hidden;
	border-radius:5px;
	padding:5px;	
}
.media_less {
    background:#FFF none repeat scroll 0 0;
	padding:5px;
    color:#000;
    overflow:hidden;
	border-radius:5px;

}
.media_wrap {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
    color:#000;
    overflow:hidden;
	border-radius:10px;
}
.media_bottom {
    background:#FFF none repeat scroll 0 0;
	padding:5px;
    color:#000;
    overflow:hidden;
	border-bottom-color:#D3D2D2;
    border-bottom-style:solid;
}
.media a:hover {
    text-decoration:none;
}

.img_shadows {
    background:white none repeat scroll 0 0;
    border-radius:50%;
    margin-left:-12px;
    padding:2px;
}
.item .like_button_box,.item .dislike_button_box {
    margin:0;
    min-width:30px;
    padding:0 15px 0 0 ;
    text-align:center;
}
.action_feedback > .item {
    border:medium none;
    box-shadow:none;
    margin:0;
    padding:0 0 10px 0;
    text-align:center;
}
.profile_image {
    background:white none repeat scroll 0 0;
    border-radius:50%;
    max-width:100px;
    padding:4px;
    position:relative;
}

.profile_image2 {
    background:white none repeat scroll 0 0;
    border-radius:50%;
    max-width:100px;
    padding:4px;
    position:relative;
}

/* skins/mis/css/profile_menu.css */


/* @title Profile Menu */
/* @help This is full menu on the profiles */
#horizontal .hideshow li a {
    border:medium none;
    padding:0;
    text-align:left;
}

/* @title Menu Banner */
/* @help Background for the menu */
.menu_banner {
    background:white;
    margin:auto;
    max-width:1280px;
    position:relative;
}

#profile_menu {
    z-index:89;
}


ul#horizontal,#horizontal ul {
    margin:0;
    padding:0;

    
}
ul#horizontal,#horizontal ul {
    -ms-overflow-style:none;  /* Internet Explorer 10+ */
    scrollbar-width:none;  /* Firefox */
}
ul#horizontal,#horizontal ul::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}


#horizontal li {
    float:left;
    padding:15px 0 0;
}

#horizontal {
    float:left;
    max-height:50px;
    width:calc(100% - 112px);
    visibility:collapse;

}

/* @title Menu Links*/
/* @help This is full menu on the profiles */
#horizontal a {
    border-left:1px solid #FFF;
    border-right:1px solid #CCC;
    color:#000;
	font-weight:bold;
    display:block;
    font-size:14px;
    padding:3px 27px;
    text-decoration:none;
    transition:border-color 0.218s ease 0s;
}

#horizontal a:link,div.horizontal a:visited {
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}

/* @title Menu Item Hover*/
/* @help Background for menu items */
#horizontal li:hover {
    border-bottom:4px solid rgba(100,130,180,1);
    padding-bottom:5px;
}

#submenu {
    display:none;
}

#horizontal > li:first-child a {
    border-left:medium none;
}

#horizontal > li:last-child a {
    border-right:medium none;
}

#horizontal .active > a {
    color:rgb(100,130,180);
}

.menu_banner ul ul {
    background:white none repeat scroll 0 0;
    box-shadow:2px 2px 8px #999;
    max-height:300px;
    max-width:160px;
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    right:0;
    text-transform:uppercase;
    top:52px;
}

.menu_banner ul#submenu > li {
    border-bottom:1px solid #EEE;
    float:none;
    list-style:outside none none;
    padding:12px 20px 12px 12px;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
}

#submenu > li:hover a {
    color:rgb(100,130,180);
    text-decoration:none;
}

li.hideshow {
    display:none;
    position:relative;
    text-transform:uppercase;
}

/* /////////////////////////////////////////////////////////////////////// */

.profile_minimal_image {
    background:#FFF linear-gradient(#FFF,#EEE) repeat scroll 0 0;
    border-radius:3px;
    box-shadow:0 0 1px #AAA;
    float:left;
    margin:0 5px 0 0;
    padding:3px;
    position:relative;
    left:10px;
    bottom:8px;
    width:30px;
}

.profile_minimal_image > .profile_minimal_info {
    background:white none repeat scroll 0 0;
    border-radius:3px;
    box-shadow:1px 2px 10px #666;
    left:0;
    min-width:310px;
    opacity:0;
    padding:0;
    position:absolute;
    top:54px;
    transition:all 0.2s ease-in-out 0s;
    visibility:collapse;
    z-index:100;
}

.profile_minimal_image > .profile_minimal_info.open {
    opacity:1;
    visibility:visible;
}

.profile_minimal_image > .img_scale {
    border-radius:3px;
    cursor:pointer;
}


.profile_minimal_info .media {
    border-bottom:1px solid #EEE;
    border-radius:3px 3px 0 0;
    box-shadow:none;
    margin:0;
}

.profile_minimal_info > ul {
    max-height:200px;
    overflow:auto;
    padding:0;
}

.profile_minimal_info .box {
    padding:0;
}

.profile_minimal_info .profile_images > img {
    border-radius:3px 3px 0 0;
}

.menu_banner .sprite_icon {
    padding:1px;
}

.menu_banner a {
    text-decoration:none;
}

.menu_banner select {
    margin:1em;
    padding:2px;
}

/* skins/mis/css/timeline.css */


.timeline_wrap {
    padding:2px;
}

.action_item_title {
    font-size:16px;
    display:block;
}

.action_item_desc a {
    color:#999;
}

.action_item_holder {
    border-bottom:1px solid #FFF;
}

.action_feedback > ul {
    margin:0;
    padding:0;
}

.action_submit a {
    background-size:contain;
    display:block;
    height:25px;
    width:25px;
}

.textArea {
    position:relative;
}

.action_user_name > a,.at_link {
    color:#58C;
    font-weight:bold;
}

.action_time {
    color:#B2BCBC;
}

.action_comments .textArea textarea {
    background:#FFF none repeat scroll 0 0;
    border:medium none;
    color:#000;
    font-family:sans-serif;
    font-size:14px;
    height:20px;
    margin:0;
    padding:5px;
    width:95%;
}

div#action_image {
    float:left;
    margin:5px;
    padding:5px;
}

#action_update {
    font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:1px #000;
    border-radius:3px;
    color:#000;
    margin:0 2px;
    min-height:30px;
    padding:5px;
    text-decoration:none;
    width:95%;
}

#action_update:focus {
    border:1px solid rgba(255,204,51,0.4);
}

.action .action_feedback .action_comments {
    margin:0;
}

#quick_action_default_form .form_editor_holder {
    padding:5px 0;
}

#quick_action_default_form .form_editor_holder textarea {
    height:100px;
}

.action_text p {
    padding:0;
    margin:0;
}

.share_wrap {
    padding:10px 10px 0;
}

.action .item_media .col12.last > p:first-child,.action .item_media .col12.last .wrap > p:first-child {
    margin-top:0;
}

.action .p10 > p {
    margin-bottom:0;
}

.item_media .wrap {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
}


.action_item_detail.action_text {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    box-shadow:none;
    padding:1em 0 0;
}

.action_title {
    font-size:20px;
    font-weight:lighter;
}

.detail_section .item .like_button_box,.detail_section .item .dislike_button_box {
    padding:10px 25px;
}

#action_text_counter {
    border-radius:50%;
    bottom:auto;
    display:block;
    float:right;
    font-size:12px;
    font-style:normal;
    font-weight:bold;
    height:27px;
    left:auto;
    line-height:2.25;
    margin:5px 1em 0 0;
    padding:0;
    position:static;
    text-align:center;
    width:27px;
}

#action_text_counter.action_warning {
    background:rgba(255,150,0,1) none repeat scroll 0 0;
    color:white;
}

#action_text_counter.action_exceeded {
    background:#C33 none repeat scroll 0 0;
    color:white;
}

.action_buttons .profile_button.form_button {
    color:#666;
    font-weight:bold;
    height:auto !important;
    padding:11px;
}

.action .action_comments {
    background:#FFF none repeat scroll 0 0;
}

.action .action_comments textarea {
    background:white none repeat scroll 0 0;
    color:#666;
}


/* skins/mis/css/skin.css */


section {
    margin:0;
    position:relative;
    color:#000000;	
}

.pad {
    padding:0 1em;
    position:relative;
}

.actions > ul {
    height:34px;
    margin:0;
    padding:0;
}

#header ul {
    margin:0;
    padding:0;
}

.mis_player ul {
    margin:0;
    padding:0;
}

ul.page_tab_bar {
    margin:0;
}

.profile_info ul {
    margin:0;
    padding:0;
}

.loader {
    vertical-align:top;
}

#tag_submit_indicator {
    margin-bottom:6px;
}

.block_search {
    margin:0 10px 0 0;
    text-align:right;
    white-space:nowrap;
}

#content .box .media .block_search .form_text {
    margin:0;
    width:auto;
}

span.title {
    font-size:14px;
}

#horizontal .hideshow > a:first-child {
    border-right:medium none;
}

.CodeMirror {
    background:#0F1418 none repeat scroll 0 0;
    color:white;
}

.shadow {
    box-shadow:1px 1px 10px #000;
}

h2 {
    font-size:16px;
}

.p5 {
    padding:5px;
}

.p10 {
    padding:10px;
}

.p20 {
    padding:20px;
}

.p5 > h2 {
    margin:0;
}

.p5 h3 {
    margin:0 0 5px;
}

h3 {
    text-align:left;
}

.footer {
    background:#222 none repeat scroll 0 0;
    counter-reset:black;
    min-height:180px;
    width:100%;
}

.widget-item .action {
    background:#FFF;
    padding:1em;
    margin-bottom:1em;
}

.widget-item .action_feedback {
    box-shadow:0 0 2px #BBB;
}

.widget-item .action_feedback .item {
    padding-top:10px;
}

.widget-item-widget_gallery .col3 {
    padding:1px;
    width:24.2%;
}

.image_stack2 {
    left:42px !important;
}

.image_stack1 {
    left:21px !important;
}

.button_player a.jp-play,.button_player a.jp-pause {
    display:none;
}

.box > span {
    color:#444;
    float:none;
    font-size:18px;
    left:45px;
    position:absolute;
    text-transform:capitalize;
    top:7px;
}

.box .block_search .form_text {
    width:77%;
}

.bundle_box {
    background-color:#333;
    background-image:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.6));
    border:medium none;
    box-shadow:1px 0 5px 3px #000;
}

.index {
    position:relative;
    min-height:793px;
    padding:40px 1em 1em;
}

.social h2 {
    color:white;
    font-size:14px;
    font-weight:100;
    letter-spacing:8px;
    text-align:center;
    text-transform:uppercase;
}

.social > li {
    display:inline-block;
    list-style:outside none none;
    width:15%;
}

.social li a {
    background:#666 none repeat scroll 0 0;
    display:block;
    height:50px;
    margin:auto;
    width:50px;
}

.social {
    padding:1em 0;
}

ul.social {
    display:block;
    margin:1em auto;
    min-width:320px;
    width:50%;
}

.social li a.social-facebook {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/social-facebook.png") no-repeat scroll 0 0;
}

.social li a.social-twitter {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/social-twitter.png") no-repeat scroll 0 0;
}

.social li a.social-instagram {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/social-instagram.png") no-repeat scroll 0 0;
}

.social li a.social-linkedin {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/social-linkedin.png") no-repeat scroll 0 0;
}

.social li a.social-youtube {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/social-youtube.png") no-repeat scroll 0 0;
}

.social li a.social-facebook:hover,
.social li a.social-twitter:hover,
.social li a.social-linkedin:hover,
.social li a.social-youtube:hover,
.social li a.social-instagram:hover {
    background-position:0 -50px;
}

.social > div {
    clear:both;
    color:white;
    font-size:11px;
    letter-spacing:4px;
    padding:1em 0 0;
    text-align:center;
    text-transform:uppercase;
}

div.social {
    margin:0 auto 0;
    text-align:center;
}

.down.up > a {
    transform:rotate(180deg);
}

.box .page_nav {
    padding:10px 14px 0;
}

.sb-container-tabs .page_tab_bar_holder {
    border:medium none;
}

.sb-widget-block h1 {
    font-size:20px;
    font-weight:lighter;
}

.sb-container-tabs {
    position:absolute;
    right:5px;
    top:-22px;
    z-index:10;
}

.sb-widget-block .item:first-child {
    margin-top:0;
}

.sb-widget-block .item:last-child {
    margin-bottom:0;
}

.sb-widget-block .list_item:last-child {
    margin-bottom:0;
}

section.login {

}

.index_form .form_text {
    background:white none repeat scroll 0 0;
    border:none;
    border-radius:2px;
    color:#000;
    font-size:16px;
    margin:0 0 1em;
    padding:8px 12px;
    width:92%;
}

.index_form .form_text:focus {
    border:none;
}

.index_form {
    background:#FFF;
    border-radius:10px;
	box-shadow:rgba(0,0,0,0.35) 5px 5px 5px;	
    color:#000;
    margin:auto;
    max-width:350px;
	margin-top:50px;
}

.index_form .wrap {
    padding:20px 25px;
}

.index_features li {
    color:white;
    font-size:20px;
    padding:1em;
}

.index_features li:first-child {
    padding:10px 1em 1em;
}

.index_form a {
    color:white;
}

.index_form {
    color:#000;
}

.row.index_sign_up {
    max-width:840px;
}

.index_sign_up > .wrap {
    padding:12px;
}

.index_form input[type="button"] {
    background:rgba(0,0,0,0) linear-gradient(rgba(100,100,100,0.6),rgba(100,100,100,0.3)) repeat scroll 0 0;
    border:medium none;
    border-radius:4px;
    box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 0 0 rgba(0,0,0,0.35),0 2px 4px rgba(0,0,0,0.25);
    color:white;
    font-size:20px;
    height:auto;
    padding:10px;
    text-transform:capitalize;
    width:100%;
}

.index_form input[type="button"]:hover {
    background:rgba(0,0,0,0) linear-gradient(rgba(160,160,160,0.6),rgba(160,160,160,0.3)) repeat scroll 0 0;
}

.index_form input[type="button"].login,.index_form input[type="button"].login:hover {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    font-size:18px;
    text-align:center;
    cursor:pointer;
    text-transform:none;
}

.index_form .form_notice {
    margin:1em 0;
}

.index_form .form_help_button {
    display:none;
}

.index_form .page_content {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border-radius:0;
    box-shadow:none;
    color:inherit;
    margin:0;
    padding:0;
}

.index_form .element_left {
    display:none;
}

.index_form .element_right {
    padding:0;
    width:100%;
}

.index_form .form_submit_section {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    padding:0;
}

.index_form .form_submit_box {
    padding:15px 0 0 0;
}

.index_form select {
    display:none;
}

.index_form iframe {
    height:200px;
    padding-top:10px;
}

.login .action {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    box-shadow:none;
    color:#000;
}

.login .action_user_name > a {
    color:#000;
}

.login a {
    color:#000;
}

.login .media {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
    color:#CCC;
}

.login .action .item {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
}

.login .action_user_image {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
    box-shadow:none;
}

.login .item_media {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
    color:white;
}

.login .action_comment {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    color:white;
}

.login .shared {
    border-bottom:1px solid rgba(255,255,255,0.3);
}

.login span.title {
    color:#FFF;
}

.login .block {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
}

.index_banner {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    height:150px;
}

.welcome_index {
    background:white url("http://mediaistream.com/image/img/skin/mis/1.jpg") no-repeat fixed center center / cover;
    color:white;
    min-height:720px;
    position:relative;
}
.welcome_indexx {
    background:white url("http://mediaistream.com/image/img/skin/mis/2.jpg") no-repeat fixed center center / cover;
    color:white;
    min-height:720px;
}
.welcome.img_mobile {
    background:white url("http://mediaistream.com/image/img/skin/mis/1_mobile.jpg") no-repeat fixed center center / cover;
}

.welcome h1 {
    font-size:32px;
    font-weight:200;
    letter-spacing:1px;
    margin:10px 0 0 20px;
}

.welcome > h2 {
    color:rgba(255,255,255,0.6);
    font-size:18px;
    font-weight:lighter;
    margin:0;
    text-transform:capitalize;
}


.login .box {
    margin:1em 0 0;
}

.login .box_body {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    box-shadow:none;
}

.login .list_item .data.clearfix span {
    color:#C3C3C3;
    margin:5px 0 0;
}

.login #gallery_tab > a {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAA5nmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE2LTAyLTEyVDExOjQyOjQ5LTA2OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTYtMDMtMjNUMDQ6Mjk6NDctMDU6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOk1ldGFkYXRhRGF0ZT4yMDE2LTAzLTIzVDA0OjI5OjQ3LTA1OjAwPC94bXA6TWV0YWRhdGFEYXRlPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOmU2MTgzYWMzLWNlNjMtZjM0Ny05ZmE4LTYxYzcxMmNiOWVhNTwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDowOERGQUU3OUQxQjAxMUU1QkM4MENDMDAzNEZFMDg4NjwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDowOERGQUU3NkQxQjAxMUU1QkM4MENDMDAzNEZFMDg4Njwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDowOERGQUU3N0QxQjAxMUU1QkM4MENDMDAzNEZFMDg4Njwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjA4REZBRTc5RDFCMDExRTVCQzgwQ0MwMDM0RkUwODg2PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDplNjE4M2FjMy1jZTYzLWYzNDctOWZhOC02MWM3MTJjYjllYTU8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTYtMDMtMjNUMDQ6Mjk6NDctMDU6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICAgICA8cGhvdG9zaG9wOkNvbG9yTW9kZT4zPC9waG90b3Nob3A6Q29sb3JNb2RlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pn+jQO8AAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAohJREFUeNrU1kuMzmcUBvDfoG7RcQmljInLuAwqcUmplgjRlcVklhYVVnZWViQSCzskku5qQ0QizXTVRRM2JRGXNBW3cRtMg7iWuE3dpgvPJ+/8jbCxcJKT837v7XnPOc85/6+uu7vbp5Q+PrH0g7a2tur8D6jHBdzA017OjsR0zMN3sbexHF3Q2tr6BqAiX+K3XCAA7TiNSxiPb9GMr4pzXZiMsejo4UFFxmE4jufl07Es2pt0YT9eYU1A3gGYgcVYhIXoix3YhyFoyMFZ0SaMwWgMwk8F4F78jT+wrQZwAF9XXnYr9nFC1I7fi/XBAZmImdFmTMUKfF8CvMBVrMaP2JiEySWbcRY/43XmnyYUHThYAA/J6xtKmrYnLH9mw2vcydoWrMPOMOVD8hjDcLMEOB/E4XHzJu5nbWBx+ItiPCr7qzI4TOosk3wSdZiTkFxJ2CQ89TiFY5mrw684hE0VgFHx4FoJcC52Tvh/ujhwBS2VSzZgSR6zBc/j3YvUidTMW4BOvMyhkUn4+2QptmY8NaSYhH9SoA1Zu1AC3EvFLkH/mnv5vTJ5OIsz2BVC1GQ7GsM8GauxsAbwLHRbWrBqbS77kEyJnRDblGjcqnbT9qImLmNoCvA8Hn0E0KTYyUWt9OhFZypJPBxbo+voxHwWvsm4Ia0C5qeGRiTMjbhbAnQUXF8fhYdFNz0Zr/bgPwxIR52WllEfmqoBlwCdsbvTHZujc7EgWsqThLIGfDiVPha/4GgV4Hr6S326YVfY05SYlvm6jweJ92ysqoAfTaJ7APwbKrb0UlgXA3oEJxKyh3lMY/IxM/kZk329fnAOZsPVtIXjcf9yqrUqd6N/vY9adZ/9v4r/BwDV4Z1QyN0kAgAAAABJRU5ErkJggg==") no-repeat scroll 0 0 / contain;
    display:block;
    height:21px;
    width:21px;
}

.login #album_tab > a {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAA5nmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE2LTAzLTIwVDIxOjEwOjI3LTA1OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTYtMDMtMjBUMjE6MTA6MzktMDU6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOk1ldGFkYXRhRGF0ZT4yMDE2LTAzLTIwVDIxOjEwOjM5LTA1OjAwPC94bXA6TWV0YWRhdGFEYXRlPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOjNjYzcwN2UyLWM0OTEtMmY0ZS1iYzg2LTBjMjU1ZGRlZWUyYjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDo1NEEyOUZCQ0NGQTkxMUU1OUFENTgwOTc3OTRDQTNGQzwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDo1NEEyOUZCOUNGQTkxMUU1OUFENTgwOTc3OTRDQTNGQzwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDo1NEEyOUZCQUNGQTkxMUU1OUFENTgwOTc3OTRDQTNGQzwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjU0QTI5RkJDQ0ZBOTExRTU5QUQ1ODA5Nzc5NENBM0ZDPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDozY2M3MDdlMi1jNDkxLTJmNGUtYmM4Ni0wYzI1NWRkZWVlMmI8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTYtMDMtMjBUMjE6MTA6MzktMDU6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICAgICA8cGhvdG9zaG9wOkNvbG9yTW9kZT4zPC9waG90b3Nob3A6Q29sb3JNb2RlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PmG1nLcAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAx1JREFUeNq0Vk2IllUUfuaZc+/tIkGWVmpFCyWQchFIfxSRZZsiKKRsM5AQlBgoEoFuppi+JCVMmP0sahO1qEUxM86uiEAIFyYMbSJkjBGUJq/3Pfc7X4ve7+NrfN/Rb+GBFy735zz3PPc557xjvV4Pt9IEAGZmZgYTJEESADA+Pn43yZcAPE9yO8mNAGBmywDOmdmCqn4HYKmeh5kNfE1MTPwHsNrMLIQQDorIAQCbV6+T3AxgB8k3RORiKWVaVY8DuHrd3gb/D8YYZ0Wk0+S8we4RkckQwk8Atq4JQPKBGOMPJJ8ZgeZrKaXdAM7FGH8kubUN4LYY45ckHxrlEVNKU6WUuZTSm2Y2H2P8BsC66wBCCO+RfGoU56WUuVLKJ31RqOpnJB8JIXzwPwCSG0Xk8A38LZnZvJnNAbhQi+E0gEISzrl3YozfA4D3/l2S9w5k6px7uS/Blpt+ambHAfwFAN1ud4Nz7qD3/kMAieSTIvL60JE7nXN7AJySOoLdbc6rqjqhqu/3aahtOed8xMzgvT/ZdI7kCwBO9Sna3pIPS6r6UR1Fn9LxegxV7ZjZhRaAbcNvsKElgLPOuSv12IcQZkMICyR9Te0KgF9aAO5oS7Rh6w2XEACu/saa9rTWIjO7RHJTw/oOVb0dwN9mVuWcnwMwZmaFJFR1nYjsbKH3yiACM/utJcxNzrmjACAiANAFUOoxnHOHSN7XArA4HMEcgD2rNsyWUk5776dIZjM7CeBSLdP1IYT9IjLZRo2ZzQ8AVPVb730HwF0AVkopx3LOHTPrArhWS/EtMzsDoOe9fxTA/WtQf1lVvxqO4GJVVZ977ydTSq+Y2cIQTY/Xwy0kt9xMCamqarov34GKcs4nzOysc25fv3mIyNsisneU+mRmv+acO03V9J+U0qskd4UQvhCRx0IIx0Z0/kdKaS+AlcZ+YGa/55yfJvlwjPHnfrLcpPMzOecXzez8mh3NzBZTSk+UUqb6xe0GtlxK+Tjn/CyA842J1qD/q6p6VFWnnXOvkdwFYBvJ9fUlLgNYrJv+1wD+bEMfu9W/Lf8OABmjbG9fBzJPAAAAAElFTkSuQmCC") no-repeat scroll 0 0 / contain;
    display:block;
    height:21px;
    width:21px;
}

.login #channels_tab > a {
    background:rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAA5nmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE2LTAyLTEwVDE3OjEzOjE1LTA2OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTYtMDMtMjJUMTY6MDY6MzAtMDU6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOk1ldGFkYXRhRGF0ZT4yMDE2LTAzLTIyVDE2OjA2OjMwLTA1OjAwPC94bXA6TWV0YWRhdGFEYXRlPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOjc5ZWRjMDcyLTc0MjAtZjY0Ni04ZWE0LWRhMmRhYTlmYzU2YzwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDpERDQxQjZEQUQwNEIxMUU1QTlEM0JCQ0I3QTlDMTQwNjwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDpERDQxQjZEN0QwNEIxMUU1QTlEM0JCQ0I3QTlDMTQwNjwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDpERDQxQjZEOEQwNEIxMUU1QTlEM0JCQ0I3QTlDMTQwNjwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOkRENDFCNkRBRDA0QjExRTVBOUQzQkJDQjdBOUMxNDA2PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo3OWVkYzA3Mi03NDIwLWY2NDYtOGVhNC1kYTJkYWE5ZmM1NmM8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTYtMDMtMjJUMTY6MDY6MzAtMDU6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICAgICA8cGhvdG9zaG9wOkNvbG9yTW9kZT4zPC9waG90b3Nob3A6Q29sb3JNb2RlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PgIhj5EAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAulJREFUeNq0Vk+LF0cQffOmetpOM3pwCWwg+QriQXIJ3vwCHiRXQ9aAiglJxIt/yB4EUQ9RvBgQD9FDDt5yS06CHyOLXyBoZNLp6f7V5LA9P387mV1WowXDMEzNq3pVr6qnGoYB79MEAJ48+UUAEMAAIL98+dcl7w9eiDH8bK1cEjHV6Ft8KhK575OGkDed81+mFH6y1vxAsgZQAdCTJ09llo+qEqBSVeP9wdNN06x7316MUe/knBSAFp+axFDAb7Zte6VpZN0Y+4UqDhQ8lgucMKpIppTiZs5ZAcB7fz5GvZdzyiQygEXOKcWYb7dt+z0AqCpIXBNhmGJypmyNc/ZRjGFDVRcA4b0/G6Pe7fuUVVPqunzT+/bbsWSq+SsSDwA0sz0o9s/qC2vNgxjDC2vdfZKHvffnu64LgMYxcwAvVPM5Eo/Lc1yBMKsBUgjhU2PsCRGxAEBycI5/56xbJA+Xcl1cTUJVn5P8BMBm6SNyzn1K6Xdr7bNlgL6Pn1vrH5K0OwkSIrtLkOQRAEd2lEQakHI1xrAB4CEBYLHgtTHzd2GkiDHm8pKBc25dVdH3/R/A4kLT2DRSnqqszMHUUs75qEhzK4TuOsA159zp1R4sAKBpZAvgr9uSf8OJFW4BuAFgTVUPAUhTFQFgXcDtCoNhDybjPQL4AEB2zp8pPn/OzMGOzIcZ8GoCjsndhtBtdN2rywDaGQbz9VZNi+0pr6vXEl0oWXOSY65rc6au4ca52ivA8DpQzRVgAFqo1lN/FZGPVVXGvsr+ZMdqZVeVoDrMbJqm6159R/Ijkfb6vgNMsqzGsP9lit45/yNJAdDNqWja6N10P6euAcAgImt7qWiYfDzsA3hMbk51SwbVdgNhAAXJ/k0Hre9jJWLJZeW2MaVsxaG8OAbIU4C7rYrdTEn9kOT8eRBj/M05f4qEBfDZWx3u0uzoZQjd02UAY/BNCF1lrT1O0vyfTaqqOYTuGaBfA0D1vn9b/h0A2gww+ozVJ4YAAAAASUVORK5CYII=") no-repeat scroll 0 0 / contain;
    display:block;
    height:21px;
    width:21px;
}

.login #actions_tab li.solo {
    background:rgba(0,0,0,0.6) none repeat scroll 0 0;
    box-shadow:none;
    padding:7px 8px;
}

.login .list_item .dislike_button_box,.login .list_item .like_button_box {
    min-width:25px;
}

.login .item {
    background:rgba(0,0,0,0.4) none repeat scroll 0 0;
    border:medium none;
    color:#000;
}

.login .mis_player {
    box-shadow:0 0 2px #000;
}

.login .list_item .action_data {
    font-size:12px;
}

.profile_data span {
    color:#999;
    display:block;
    font-size:10px;
    text-transform:uppercase;
}

.profile_data {
    color:rgba(0,100,160,1);
    font-size:18px;
    padding:5px;
	text-align:center;
	padding-right:40px;
}

.profile_data li {
    cursor:pointer;
    float:left;
    width:33.33%;
    list-style:none;
}

.profile_images .profile_image,.item_media .profile_image {
    background:white none repeat scroll 0 0;
    bottom:0;
    box-shadow:none;
    left:10px;
    padding:3px;
    position:absolute;
    width:72px;
    border-radius:50%;
    transform:translateY(50%);
}

.profile_images {
    position:relative;
}
.profile_images {
    position:relative;
}

.profile_name {
    bottom:-42px;
    font-size:12px;
    left:90px;
    position:absolute;
}

.profile_name h1,#content .profile_name h1 {
    display:block;
    margin:0;
}

.profile_image .img_scale {
    border-radius:50%;
}

.trending a {
    color:#933;
    display:block;
    font-weight:bold;
}

.trending span {
    color:#000000;
    font-size:13px;
    font-weight:bold;
}

.head {
    border-bottom:1px solid #F6F6F6;
    color:#000000;
    font-size:14px;
    font-weight:lighter;
    line-height:1.4;
    padding:0 0 5px;
    text-transform:uppercase;
    height:32px;
}

.hash_link {
    color:#58C;
    font-weight:bold;
}

.side_list .follow {
    font-weight:normal;
    height:auto;
    letter-spacing:1px;
    margin:3px 0 0;
    padding:2px 15px;
}

.side_list a {
    color:#777;
    font-weight:bold;
}

.index_group span {
    font-size:14px;
}

.index_group {
    font-size:12px;
    color:#888;
}

.index_group a {
    display:block;
    margin:0 0 2px;
}

.middle {
    position:absolute;
	left:35%;
    top:50%;
    transform:translateY(-50%);
    width:100%;
}

.side_image {
    float:left;
    width:35%;
    margin:0 10px 0 0
}

#site_search .block_search {
    float:none;
    position:static;
    text-align:left;
    width:100%;

}

#site_search h3 {
    margin:0;
    white-space:normal;
}

.box #site_search .block_search > input {
    margin:0;
    width:93%;
}

.return_button {
    font-size:18px;
    font-weight:lighter;
    height:auto;
    padding:1em;
    width:100%;
}

.notify {
    background:rgba(180,50,50,0.8) none repeat scroll 0 0;
    border-radius:50%;
    color:white;
    display:none;
    font-size:11px;
    font-weight:bold;
    height:18px;
    left:15px;
    padding:3px 0 0;
    position:absolute;
    text-align:center;
    top:5px;
    width:22px;
    cursor:pointer;
}

.index textarea#action_update,#profile textarea#action_update.form_textarea {
    background:white none repeat scroll 0 0;
    box-shadow:none;
}

#action_form > span#action_networks {
    padding:22px 0 0;
}

#share_modal .action_feedback > .item {
    display:none;
}

#share_modal .action {
    margin:10px 0 0;
}

#share_modal_box .action {
    max-height:400px;
    overflow:auto;
}

#share_modal {
    height:auto;
}

.action .profile_data li {
    cursor:pointer;
    float:left;
    width:25%;
    list-style:none;
}

.item_media_desc h2 {
    font-size:18px;
    margin:0 0 5px;
}

.profile_images .date {
    float:right;
    margin:8px 15px;
}

.action .profile_name {
    bottom:-30px;
}

.like_details h2 {
    font-size:18px;
    margin:0 0 10px;
}

.border.clearfix {
    border-bottom:1px solid #E1E1E1;
    position:relative;
}

.like_details .wrap > p {
    margin:10px 0;
}

.profile_data .like_button_box {
    margin:0;
}

.profile_data a {
    color:#933;
}

.profile_name a {
    color:#888;
}

.profile_name h1 a {
    color:#444;
}

.media_text > p {
    margin:10px 0 0;
}

.media_text h2 {
    margin:0 0 5px;
}

.attending {
    color:#999;
    display:inline-block;
    margin:10px 0;
}

#action_text_counter {
    bottom:30px;
}

.action_description {
    font-size:14px;
}

.urlscan_block h3 {
    font-size:16px;
    margin:10px 0 4px;
}

.urlscan_snipit_large {
    padding:0;
    border:none;
}

.action .category {
    font-size:12px;
    margin:10px 0 0;
    text-transform:uppercase;
}

.urlscan_snipit_large h3 {
    margin:0 0 5px;
}

.item_media .wrap > p.action_link_text {
    margin:0 0 1em;
}

.border.clearfix.colored {
    background:#ECF0F2 none repeat scroll 0 0;
}

.category > a {
    color:#999;
}

.features {
    background:white none repeat scroll 0 0;
    padding:110px 0;
    position:relative;
}

.features.dark {
    background:#F3F3F3 url("http://mediaistream.com/image/img/skin/mis/2.jpg") no-repeat fixed center center;
    color:white;
    padding:110px 0 60px;
}

.welcome .overlay,.dark .overlay {
    background-color:rgba(100,130,180,0.7);
    height:100%;
    width:100%;
    position:absolute;
    top:0;
}

.down {
    bottom:-30px;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
    width:60px;
    z-index:100;
}

.down > a {
    background:#FFF url("http://mediaistream.com/image/img/skin/mis/down_white.png") no-repeat scroll center center;
    border-radius:50%;
    display:block;
    height:60px;
    width:60px;
}

.features h2 {
    font-size:36px;
    font-weight:lighter;
    margin:0 auto 38px;
    max-width:750px;
    padding:0 20px;
    text-align:center;
}

.col6 {
    position:relative;
}

.feature_text {
    text-align:left;
}

.features .feature_text h2 {
    font-size:36px;
    margin:1em 0 10px;
    padding:0;
    text-align:center;
}

.feature_text p {
    color:#666;
    font-size:16px;
    margin:0;
    text-align:center;
}

.dark .feature_text p {
    color:#EEE;
}

.features .col3 .wrap {
    padding:3px;
}

.features h3 {
    font-size:20px;
    margin:2.5em 0 10px;
    text-align:center;
    font-weight:lighter;
}

.features.dark h2 {
    margin:0 auto 20px;
}

.feature_text.right {
    text-align:right;
}

.features.dark h3 {
    margin:2.4em 0 10px;
    text-align:left;
}

.login .col3:hover .img_scale {
    margin:auto;
    opacity:0.7;
}

.feature_text ul {
    font-size:24px;
    padding:0 2em;
}

.form_button.get_started {
    display:block;
    font-size:20px;
    font-weight:lighter;
    margin:2em auto;
}

.features.final {
    padding:0 0 30px;
}

.hello {
    padding:150px 0 0;
    position:relative;
}

.welcome .col6 .wrap > ul {
    font-size:20px;
    margin:0 2em;
    padding:1em;
}

.welcome .col6 li {
    list-style:outside none disc;
    padding:10px;
}

.action .p10 {
    padding:0 1em;
}

.action .p10 > h2 {
    margin:0;
}

#quick_action_form {
    background:white none repeat scroll 0 0;
    display:none;
}

#quick_action_tab_box {
    border:medium none;
    margin:0;
    overflow:hidden;
    padding:0 0 0 1em;
}

.quick_action_tab {
    cursor:pointer;
    float:left;
    margin:5px 5px 0;
}

.quick_action_tab .sprite_icon {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    border:medium none;
    margin:0;
    padding:5px 7px;
}

#quick_action_title {
    margin-top:10px;
}

#quick_action_box .form_text {
    background:white none repeat scroll 0 0;
    box-shadow:none;
    color:#333;
    display:block;
    width:98%;
}

.item_media_desc span {
    text-transform:uppercase;
}

.urlscan_card span {
    color:#999;
    text-transform:uppercase;
}

.action_form_buttons.clearfix {
    background:#ECF0F2 none repeat scroll 0 0;
}

.list_item.spaced {
    border:medium none;
    margin:0 0 1em;
}

.sprite_icon.email {
}

.list_item {
    box-shadow:0 0 1px #333;
	padding:2px;
    position:relative;

}

ul.sb-widget-sortable .widget-item li {
    list-style:outside none none;
}

.sb-widget-controls {
    right:10px;
    top:10px;
}

.sb-widget-controls .sprite_icon {
    background:none;
    border:medium none;
}

.title.sb-widget-title.head {
    border:medium none;
    color:#444;
    padding:1em;
}

.form_button.sb-menu-add-button {
    padding:0 10px;
}

.sb-menu-delete-icon .sprite_icon {
    padding:2px;
}

#quick_action_box {
    border-radius:5px;
}

#action_form {
    border-bottom:1px solid #F6F6F6;
}

#action_submit,#quick_action_box .upload_button {
    background:#666 none repeat scroll 0 0;
    border:medium none;
    border-radius:3px;
    color:white;
    margin:4px 0;
    padding:6px;
    font-size:12px;;
}

.mentions-autocomplete-list {
    border:0 !important;
}

.action_user_image {
    clear:both;
    float:left;
    width:50px;
}

.action_data {
    left:10px;
    padding:5px 10px;
    position:relative;
}

.action_info {
    background:white none repeat scroll 0 0;
    min-height:50px;
    padding:15px 15px 0 15px;
}

.action_delete {
    float:right;
}

.action_user_image > img {
    border-radius:50%;
    width:100%;
}

.action_feedback .comment_name > a {
    font-weight:bold;
    color:#933;
}

.action {
    background:#FFF none repeat scroll 0 0;
    box-shadow:0 0 2px #AAA;
    border-radius:5px;
    margin:0 0 12px;
    max-width:620px;
}

.action:last-child {
    border:none;
}

.action_detail {
    padding:0;
}

.item_media {
    box-shadow:0 0 2px #CCC;

}

.item_media .action {
    margin:0;
}

.item_media .item {
    margin:0;
}

.item_media .action .wrap {
    background:white none repeat scroll 0 0;
    padding:0;
}

.item_media .action .action_info {
    padding:0 0 15px;
}

.item_media .wrap > p:first-child {
    margin-top:0;
}

.item_media .action {
    box-shadow:none;
    border-radius:0;
}

.item_media .wrap .wrap {
    padding:0;
}

#oneall_timeline_networks {
    float:right;
    padding:12px 1em 0;
    width:50%;
}

#oneall_timeline_networks img {
    margin:0 3px;
    vertical-align:top;
    width:20px;
}

.nowrap {
    white-space:nowrap;
}

.right {
    text-align:right;
}

div.social {
    padding:3em 0 1em;
}

.index_form #jrUser_login #form_submit_indicator {
    margin-bottom:15px;
}

.index_form #oneall_social_login_container_login {
    background:#FFF;
    margin:15px 0 0 0;
    padding:5px 10px;
    border-radius:2px;
    box-shadow:0 1px 2px rgba(0,0,0,0.2) inset,0 0 1px rgba(0,0,0,0.1) inset,0 2px 0 rgba(255,255,255,0.05);
}

.scrollup {
    width:40px;
    height:40px;
    position:fixed;
    bottom:16px;
    right:8px;
    display:none;
    z-index:100000;
}

.scrollup:hover {
    opacity:1;
}

.head .form_text.form_text_search {
    margin:0;
    position:relative;
    right:0;
    top:-4px;
}

.page_wrap {
    padding:0.5em;
}

.page_wrap .col4 > .wrap {
    padding:0.5em;
}

.jrchat-msg-from {
    padding:9px 12px 21px 12px;
}

#jrchat-new-message-input {
    width:70%;
}

#jrchat_smiley_button {
    top:6px;
    margin-right:8px;
}

.table {
    display:table;
    width:100%;
}

.table-row {
    display:table-row;
}

.table-cell {
    display:table-cell;
    vertical-align:middle;
}

.profile_item_list {
    text-align:center;
    padding:0 1em 1em;
    min-height:34px
}

.feature_text ul li {
    list-style:none;
}

.liker_list > .item {
    background-color:#222;
    padding:0 8px 8px 8px;
    margin-top:0;
    margin-bottom:25px;
    border:0;
}

.liker_list > .item a {
    color:#FFCC5B;
    text-decoration:underline;
}

.liker_list > .item a:hover {
    text-decoration:none;
}

.new_login {
    margin-top:100px;
}

.action_create_image {
    height:50px;
    width:50px;
    border-radius:50%;
}


.bottom_tab {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:40px;
    background:white;
    z-index:1000;
    border-top:1px solid #DDD;
}

.bottom_tab a {
    color:white;
}

.bottom_tab .table {
    height:100%;
}

.bottom_tab .table-cell {
    text-align:center;
    position:relative;
}

.bottom_tab .sprite_icon {
    background:none;
    border:none;
}

#header .sprite_icon {
    background:none;
    border:none;
}

.tm .table-cell {
    text-align:center;
}

#sb-site {
    background:#D7DADC;
}

.index_follow_image {
    float:left;
    width:72px;
    margin:0 10px 0 0
}

.index_follow_image img {
    border-radius:50%;
}

/* begin music page css */

.index_chart {
    margin:3px;
	border-radius:10px;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
    color:#000;
}

.index_chart li img {
    max-width:40px;
}

.index_chart .list_item {
    margin:0;
    padding:5px 0;
}

.index_chart .list_item div > span.like_count {
    display:inline;
}

.index_chart .list_item div > span.add_to_cart_price {
    display:none;
}

.index_chart .list_item .col6 > div > div > div {
    padding:2px 5px;
    vertical-align:middle;
}

.chart_buttons div {
    float:right;
}

.slide_info {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    color:#FFFFFF;
    bottom:0;
    position:absolute;
    width:100%;
}



.slide_info .large {
    font-size:34px;
    font-weight:lighter;
    margin:0;
    text-transform:uppercase;
}


.slide_info .wrap {
    padding:3em;
}

.slide_info span {
    color:#ECA81E;
    font-size:14px;
    text-transform:uppercase;
}

.slide_info span.white {
    color:white;
}

.center.register {
    color:#ECA81E;
    font-size:16px;
    padding:1em 0 0;
    text-transform:uppercase;
}
.block_image img {
    width:100%;
	border-radius:8px;
}
.table {
    display:table;
    width:100%;
}

.table-row {
    display:table-row;
}

.table-cell {
    display:table-cell;
    vertical-align:middle;
}

.index_chart .table-cell {
    border-right:1px solid #E5E5E5;
    padding:0 10px;
}

.list_item.odd {
    background:#F9F9F9 none repeat scroll 0 0;
}

.index_chart .image {
    display:block;
    margin:0 auto;
    max-width:30px;
}

.index_chart .button_player {
    display:block;
    margin:auto;
    min-width:40px;
}

.table-cell.large.buttons {
    width:20%;
}


.table-cell.profile-image {
    width:56px;
}

#profile_header .table-cell.profile-image {
    width:100px;
}

.table-cell.chart_buttons:last-child {
    border:medium none;
}

.index_chart .table.center .table-cell {
    border:medium none;
    padding:0;
    width:auto;
}

.index_chart .form_select {
    width:auto;
    border:1px solid rgba(0,0,0,0);
}

.table.center {
    color:#000;
    font-weight:bold;
}

#chartLoader {
    display:block;
    left:0;
    position:absolute;
    top:-7px;
}

#chartLoader > img {
    margin:0 5px;
    max-width:25px;
}


.no-items {
    padding:2em;
    text-align:center;
}

.featured .sprite_icon {
    box-shadow:none;
}

.item .button_player {
    min-width:30px;
}

.index_chart .sc_button_player {
    min-width:30px;
}

.sc_button_player div.jp-interface ul.jp-controls a.jp-pause {
    display:none;
}

.scrollup {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/icon_top.png") no-repeat scroll 0 0;
    bottom:-32px;
    display:block;
    height:40px;
    opacity:0;
    position:fixed;
    right:65px;
    text-indent:-9999px;
    width:40px;
    transition:all 0.5s ease 0s;
}

.scrollup.show {
    opacity:0.5;
    bottom:10px;
}

.scrollup.show:hover {
    opacity:1;
    bottom:10px;
}

.index_chart .jp-type-single .jp-controls img {
    width:40px;
}

.index_chart .button_player div.jp-interface ul.jp-controls li {
    float:none;
}

.index_chart .button_player div.jp-audio ul.jp-controls {
    text-align:center;
}

#content .index_chart {
    box-shadow:none;
}

#content .featured .head {
    padding:0 1em 1em;
}
.audio_index h1 {
    font-weight:lighter;
}

/* end music page css */
/* begin videop page css */
.slides img {
    width:100%;
}



.slides {
    position:relative;
}

.slidesjs-pagination-item a {
    background:rgba(255,255,255,0.5) none repeat scroll 0 0;
    border-radius:50%;
    color:rgba(0,0,0,0);
    display:block;
    height:15px;
    width:15px;
}

.slidesjs-pagination-item {
    display:inline-block;
    height:20px;
    margin:0;
    width:20px;
}

.slidesjs-navigation {
    background:white none repeat scroll 0 0;
    height:40px;
    position:absolute;
    text-indent:-99999px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    z-index:100;
}

.slidesjs-next {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/next.png") repeat scroll 0 0 / contain;
    right:10px;
}

.slidesjs-previous {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/previous.png") repeat scroll 0 0 / contain;
    left:10px;
}

.slidesjs-pagination {
    bottom:15px;
    margin:0;
    padding:0;
    position:absolute;
    text-align:center;
    width:100%;
    z-index:100;
}

.slidesjs-pagination-item a.active {
    background:rgba(255,255,255,0.8) none repeat scroll 0 0;
}



.scrollup {
    width:40px;
    height:40px;
    opacity:0;
    position:fixed;
    bottom:-32px;
    right:65px;
    display:block;
    text-indent:-9999px;
    background:url('http://mediaistream.com/image/img/skin/mis/icon_top.png') no-repeat;
    transition:all 0.5s ease 0s;
    z-index:200;
}

.scrollup.show {
    opacity:0.5;
    bottom:10px;
}

.scrollup:hover {
    opacity:1;
}



h8 {
    text-align:left;
	font-size:18px;
    font-weight:bold;
	text-transform:uppercase;
}
h9 {
    text-align:left;
	font-size:24px;
    font-weight:bold;
	text-transform:uppercase;
}

.box > .block_search > h3 {
    display:inline;
}

.features .button_player div.jp-interface ul.jp-controls li {
    float:none;
}

.index_row .wrap > div {
    height:100%;
}

.index .overlay {
    background:rgba(0,0,0,0.8) none repeat scroll 0 0;
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:10;
}

.logo {
    left:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
}

.logo .jlogo {
    display:block;
    margin:auto;
    max-width:467px;
    width:100%;
}

.index h3 {
    text-align:center;
    margin:0;
}

.index .play {
    margin:3em auto 0;
    text-align:center;
    opacity:0;
}

.play > a {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/play.png") no-repeat scroll 0 0;
    display:block;
    height:25px;
    width:25px;
    margin:1em auto;
}

.down {
    bottom:-30px;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
    width:60px;
    z-index:100;
}

.down > a {
    background:#f3f3f3 url("http://mediaistream.com/image/img/skin/mis/down_white.png") no-repeat scroll center center;
    border-radius:50%;
    display:block;
    height:60px;
    width:60px;
}

.down.up > a {
    transform:rotate(180deg);
}

.features .down > a {
    background:#080808 url("http://mediaistream.com/image/img/skin/mis/down.png") no-repeat scroll center center;
}

.features.dark .down > a {
    background:#F3F3F3 url("http://mediaistream.com/image/img/skin/mis/down_white.png") no-repeat scroll center center;
}

.dark .box_body {
    background:#000 none repeat scroll 0 0;
    border-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,0.15) inset,0 0 0 rgba(0,0,0,0.3) inset,0 2px 0 rgba(255,255,255,0.05);
}

.dark .media {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    box-shadow:none;
}

section.features.dark .wrap {
    margin:0;
    padding:0.5em;
}

section.features.dark .col3 .wrap {
    padding:0.5em;
}

.audio_button > a {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/button_player_play.png") no-repeat scroll 0 0 / contain;
    display:block;
    height:35px;
    width:35px;
}

.audio_button.large a {
    position:static;
    right:0;
    top:0;
    height:75px;
    width:75px;
}
.audio_button_play > a {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/button_player_play.png") no-repeat scroll 0 0 / contain;
    display:block;
    height:75px;
    width:75px;
}

.audio_button_play.large a {
    position:static;
    right:0;
    top:0;
}
.jlogo {
    position:relative;
    top:1px;
}

.index_item .middle .wrap {
    padding:1em;
}

.box_body .box {
    box-shadow:none;
    margin:0;
    padding:0;
}

.box_body .box_body {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    box-shadow:none;
}

.box_body .box_body > .wrap {
    padding:0;
}

.box_body .box_body .media {
    background:rgba(0,0,0,0) none repeat scroll 0 0;
    box-shadow:none;
}

.box_body .box_body .media > .wrap {
    padding:0;
}

.box_body .box_body .media .item_media {
    box-shadow:none;
}

.box_body .box .head_tab {
    display:none;
}

.box .page_nav {
    padding:10px 14px 0;
}

.sb-widget-block h1 {
    font-size:20px;
    font-weight:lighter;
}

.sb-container-tabs {
    position:absolute;
    right:5px;
    top:-22px;
    z-index:10;
}

.sb-widget-block .item:first-child {
    margin-top:0;
}

.sb-widget-block .item:last-child {
    margin-bottom:0;
}

.slides img {
    width:100%;
}

.slides {
    position:relative;
}

.slidesjs-pagination-item a {
    background:rgba(255,255,255,0.5) none repeat scroll 0 0;
    border-radius:50%;
    color:rgba(0,0,0,0);
    display:block;
    height:15px;
    width:15px;
}

.slidesjs-pagination-item {
    display:inline-block;
    height:20px;
    margin:0;
    width:20px;
}

.slidesjs-navigation {
    background:white none repeat scroll 0 0;
    height:40px;
    position:absolute;
    text-indent:-99999px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    z-index:100;
}

.slidesjs-next {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/next.png") repeat scroll 0 0 / contain;
    right:10px;
}

.slidesjs-previous {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/previous.png") repeat scroll 0 0 / contain;
    left:10px;
}

.slidesjs-pagination {
    bottom:15px;
    margin:0;
    padding:0;
    position:absolute;
    text-align:center;
    width:100%;
    z-index:100;
}

.slidesjs-pagination-item a.active {
    background:rgba(255,255,255,0.8) none repeat scroll 0 0;
}

div#footer {
    background:#333333 none repeat scroll 0 0;
    border-top:1px solid #444;
    bottom:0;
    color:#5588cc;
    height:180px;
    margin:auto;
    position:relative;
    text-align:center;
    width:100%;
}

.scrollup {
    width:40px;
    height:40px;
    opacity:0;
    position:fixed;
    bottom:-32px;
    right:65px;
    display:block;
    text-indent:-9999px;
    background:url('http://mediaistream.com/image/img/skin/mis/icon_top.png') no-repeat;
    transition:all 0.5s ease 0s;
    z-index:200;
}

.scrollup.show {
    opacity:0.5;
    bottom:10px;
}

.scrollup:hover {
    opacity:1;
}

.index .head {
    color:#aaa;
    font-size:20px;
    font-weight:600;
    margin:1em 0 0;
}

.index_item > .wrap {
}

.index_item > .wrap > .wrap {
    background:white none repeat scroll 0 0;
    min-height:70px;
}

.index_item h4 {
    color:#000;
    font-size:14px;
    margin:3px 0;
	
}

.index_item span {
    color:#000000;
    font-style:italic;
}

.pane {
    float:left;
    width:33.33%;
}

.pane2 {
    float:left;
	margin-bottom:10px;
	margin-top:10px;
}
.index_list.clearfix > div {
    left:0;
    position:relative;
    transition:left 1s ease 0s;
    width:300%;
	margin-bottom:10px;
}
.index_item {
    float:left;
	width:240px;
	background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 1px 1px;
    color:#000;
    overflow:hidden;
	border-radius:5px;	
	margin-right:5px;
	margin-left:5px;
	margin-bottom:5px;
}
.index_itemb {
    float:left;
    width:16%;
	background:#FFF none repeat scroll 0 0;
    color:#000;
    overflow:hidden;
	border-radius:10px;	
	margin-right:5px;
	margin-left:5px;

}
.index_item_less {
    float:left;
	width:250px;
	background:#FFF none repeat scroll 0 0;
    color:#000;
    overflow:hidden;
	border-radius:5px;	
}
.index_list {
    position:relative;
}

.list_nav {
    background:black none repeat scroll 0 0;
    top:50%;
    display:block;
    height:28px;
    position:absolute;
    transform:translateY(-50%);
    width:40px;
}

.list_nav.previous {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/list_previous.png") no-repeat scroll 0 0 / contain;
    left:10px;
}

.list_nav.next {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/list_next.png") no-repeat scroll 0 0 / contain;
    right:5px;
}

.index_list.clearfix.page_1 > div {
    left:0;
}

.index_list.clearfix.page_2 > div {
    left:-100%;
}

.index_list.clearfix.page_3 > div {
    left:-200%;
}

.index_list.clearfix.page_4 > div {
    left:-300%;
}

.index_list.clearfix.page_5 > div {
    left:-400%;
}

.index_list.clearfix.page_6 > div {
    left:-500%;
}

.index_list.clearfix.page_7 > div {
    left:-600%;
}

.index_list.clearfix.page_8 > div {
    left:-700%;
}

.index_list.clearfix.page_9 > div {
    left:-800%;
}

.index_list.clearfix.page_10 > div {
    left:-900%;
}

.index_list.clearfix.page_11 > div {
    left:-1000%;
}

.index_list.clearfix.page_12 > div {
    left:-1100%;
}

.index_list.clearfix.page_13 > div {
    left:-1200%;
}

.index_list.clearfix.page_14 > div {
    left:-1300%;
}

.index_list.clearfix.page_15 > div {
    left:-1400%;
}

.index_list.clearfix.page_16 > div {
    left:-1500%;
}

.index_list.clearfix.page_17 > div {
    left:-1600%;
}

.index_list.clearfix.page_18 > div {
    left:-1700%;
}

.index_list.clearfix.page_19 > div {
    left:-1800%;
}

.index_list.clearfix.page_20 > div {
    left:-1900%;
}

.index_list.clearfix.page_21 > div {
    left:-2000%;
}

.index_list.clearfix.page_22 > div {
    left:-2100%;
}

.index_list.clearfix.page_23 > div {
    left:-2200%;
}

.index_list.clearfix.page_24 > div {
    left:-2300%;
}

.index_list.clearfix.page_25 > div {
    left:-2400%;
}

.index_list.clearfix.page_26 > div {
    left:-2500%;
}

.index_list.clearfix.page_27 > div {
    left:-2600%;
}

.index_list .col2 > .image,.index_list .col6 .col4 > .image {
    margin-bottom:5px;
    margin-left:1px;
    position:relative;
}

.white {
    background:white;
}

.index_list .col3 > .image.bottom_row,.index_list .col6 .col4 > .image.bottom_row {
    margin-bottom:0;
}

.image {
    position:relative;
}
.hover {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,0.7);
    color:white;
    text-align:center;
    transition:opacity 1s ease 0s;
    opacity:0;
}

.hover:hover {
    opacity:1;
}

.hover .table {
    width:100%;
    height:100%;
}

.hover h4 {
    color:white;
    font-size:16px;
    margin:3px 0;
}

.hover span.video_title {
    color:#ea873c;
    font-weight:bold;
}


.hover:hover {
    opacity:1;
}

.hover .table {
    width:100%;
    height:100%;

}

.hover h4 {
    color:white;
    font-size:16px;
    margin:3px 0;
}

.hover span.video_title {
    color:#ea873c;
    font-weight:bold;
}


.hover_slide {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:transparent;
    color:white;
    text-align:center;
    transition:opacity 1s ease 0s;
    opacity:0;
}

.hover_slide:hover_slide {
    opacity:1;
}

.hover_slide .table {
    width:100%;
    height:100%;
}

.hover_slide h4 {
    color:white;
    font-size:16px;
    margin:3px 0;
}

.hover_slide span.video_title {
    color:#ea873c;
    font-weight:bold;
}
.white.clearfix h4 {
    margin:0 0 3px;
}

.white > a {
    color:#269;
}

.white.clearfix span {
    display:block;
}

.white span {
    color:#000000;
    display:block;
}

.image p {
    font-size:12px;
}

.image span {
    display:block;
    font-style:italic;
}

.index_item .wrap a {
    color:#000;
}

.list_info {
    float:left;
    width:33.33%;
    text-align:center
}

.list_info span {
    font-weight:bold;
}

.list_info span.italic {
    font-size:12px;
    font-weight:normal;
    margin:5px 0 0;
}

.index_item .wrap span a {
    color:#000;
    font-weight:bold;
}

.simplemodal-data h3 a {
    color:#333;
}

.table-cell.mobile > ul {
    padding:0;
}

.table-cell.logo {
    width:8%;
}

.mobile {
    display:none;
}

#header .form_button {
    padding:5px;
}
.index_item_less.full {
    width:auto;
}
.index_item.full {
    width:auto;
}

#content .col6 > h1 {
    font-weight:600;
    margin:0 0 10px;
    text-transform:uppercase;
}

.form_select.cats {
    float:right;
    position:relative;
    top:-2px;
    width:auto;
}

.col6 .block_search {
    width:auto;
}

.col6 .block_search .form_text.form_text_search {
    width:99%;
}

.white .video_title {
    color:#333;
}

.white > a p {
    color:#444;
}

.index .head a {
    color:#888888;
}

.no-items {
    text-align:center;
    width:33.33%;
}

.no-items h1 {
    margin:5em 0;
}

.jrISkin_player ul {
    margin:0;
    padding:0;
}

#footer ul {
    margin:0;
    padding:0;
}

.profile_information ul {
    margin:0;
    padding:0;
}

.audio_row .wrap > div > div > div {
    font-size:18px;
    vertical-align:middle;
	padding-right:5px;
}

.audio_row {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 1px 1px;	
    color:#000;
    overflow:hidden;
	border-radius:10px;
	margin:5px;
	position:relative;
}

.audio_row .img_scale {
}

.audio_row span {
    color:#000000;
    font-size:15px;
}

.features .button_player div.jp-interface ul.jp-controls li {
    float:none;
}

.audio_row .wrap > div {
    height:100%;
}
.img_scale {
  border-radius:10px;
}
.img_scale_item {
  border-radius:10px 10px 0px 0px;
}
.item_padding {
  padding:7px;
}
.title_item {
  coler:#000000;
  font-size:20px;
  font-weight:bold;
  text-transform:capitalize;
}
.title_list_item {
  coler:#000000;
  font-size:16px;
  font-weight:bold;
  text-transform:capitalize;
} 
.list_item_text {
  coler:#000000;
  font-size:14px;
  text-transform:capitalize;
  font-weight:bold;
} 
.list_item_text_small {
  coler:#000000;
  font-size:14px;
  font-weight:normal;

} 
.list_item_text_smaller {
  coler:#000000;
  font-size:12px;
  text-transform:capitalize;

} 
.list_item_text_smaller {
  coler:#000000;
  font-size:10px;

} 
.title_rating_item {
  coler:#000000;
  font-size:18px;
  text-transform:capitalize;
  padding-bottom:10px;
  vertical-align:middle;
} 
.title_list_action {
  coler:#000000;
  font-size:13px;
  text-transform:capitalize;
	
} 

.blog_text {
  coler:#000000;
  font-size:15px;
}
.category_row {
  font-size:18px;
  font-weight:bold;
   background:white;
  margin-bottom:20px;
}
.category_row_buttons {
	float:left;
}
.body_item {
  font-size:16px;
  font-weight:bold;
}
.bacground {
background:#FFFFFF;
}
.percentage_body {
	height:20px;
	border-radius:5px;
    color:#fff!important;
    background-color:#f1f1f1;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
}
.ratings_percentage_body {
	height:15px;
	border-radius:5px;
    color:#fff!important;
    background-color:#f1f1f1;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
}
.percentage_fill {
	height:20px;
	border-radius:10px;
    color:#000!important;
    background-color:#2196F3!important;
}
.ratings_percentage_fill {
	height:15px;
	border-radius:10px;
    color:#000!important;
    background-color:#FFEB66;
}
.percentage_container {
	height:40px;
}
.ratings_percentage_container {
	height:34px;
}
.slider_wrap {
	height:540px;
	width:720px;
	position:absolute;
}
.item_pad {
	padding:5px 10px 10px 10px;
}
.more_buttons {
    background:#333 linear-gradient(#444,#222);
    height:auto;
    border:none;
    cursor:pointer;
    border-radius:10px;
    margin:3px;
    color:white;
    font-size:12px;
    width:auto;
	padding-right:6px;
	padding-left:6px;
	padding-top:3px;
	padding-bottom:5px;
	vertical-align:middle;
	text-transform:capitalize;
	font-weight:bold;
}
.more_buttons_2 {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 3px 3px;	
    color:#000;
	position:relative;    height:auto;
    cursor:pointer;
    border-radius:10px;
    margin:3px;
    color:#000;
    font-size:12px;
    width:auto;
	padding-right:6px;
	padding-left:6px;
	padding-top:3px;
	padding-bottom:5px;
	vertical-align:middle;
	text-transform:capitalize;
	font-weight:bold;
}
.normal {font-weight:normal;}
.capital {text-transform:capitalize;}
.pointer {cursor:pointer;}
.bold {font-weight:bold;}
legend {font-weight:bold;}
img {border:0;}

.m0 {margin:0;} .m5 {margin:5px;} .m10 {margin:10px;} .m15 {margin:15px;} .m20 {margin:20px;} .m30 {margin:30px;}
.mt0 {margin-top:0;} .mt5 {margin-top:5px;} .mt10 {margin-top:10px;} .mt15 {margin-top:15px;} .mt20 {margin-top:20px;} .mt30 {margin-top:30px;}
.mr5 {margin-right:5px;} .mr10 {margin-right:10px;} .mr15 {margin-right:15px;} .mr20 {margin-right:20px;} .mr30 {margin-right:30px;}
.mb0 {margin-bottom:0;} .mb1 {margin-bottom:1px;} .mb5 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb15 {margin-bottom:15px;} .mb20 {margin-bottom:20px;} .mb30 {margin-bottom:30px;}
.ml5 {margin-left:5px;} .ml10 {margin-left:10px;} .ml15 {margin-left:15px;} .ml20 {margin-left:20px;} .ml30 {margin-left:30px;}
.p3 {padding:3px;} .p3-5 {padding:3px 5px;} .p5 {padding:5px;} .p10 {padding:10px;} .pt10 {padding-top:10px;} .pt5 {padding-top:5px;} .pb10 {padding-bottom:10px;} .pt20 {padding-top:20px;} .pb20 {padding-bottom:20px;} .p20 {padding:20px;} .p30 {padding:30px;}.pr5 {padding-right:5px;}.pl5 {padding-left:5px;}

code {background:#E6E6FF; border:1px solid #B2B2FF;}
.test {border:1px solid red;}

.rounded {-moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px;}
.rtl {-moz-border-radius-topleft:6px; -webkit-border-top-left-radius:6px; -khtml-border-radius-topleft:6px; border-top-left-radius:6px;}
.rtr {-moz-border-radius-topright:6px; -webkit-border-top-right-radius:6px; -khtml-border-radius-topright:6px; border-top-right-radius:6px;}
.rbr {-moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; -khtml-border-radius-bottomright:6px; border-bottom-right-radius:6px;}
.rbl {-moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -khtml-border-radius-bottomleft:6px; border-bottom-left-radius:6px;}

.hoverme:hover .showme {display:block;}
.hoverme:hover .hideme {display:none;}
.showme,.hidden {display:none;}

.whitebck {background-color:#FFFFFF;color:#000000;}
.blackbck {background-color:#000000;color:#FFFFFF;}
.darkgraybck {background-color:#333333;color:#FFFFFF;}
.lightgraybck {background-color:#666666;color:#000000;}

/* float clearing for IE6 */
* html .clearfix {height:1%; overflow:visible;}

/* float clearing for IE7 */
*+html .clearfix {min-height:1%;}

/* float clearing for everyone else */
.clearfix:after {clear:both; content:"."; display:block; height:0; visibility:hidden; font-size:0;}

.table_div {display:table;}
.table_div_row {display:table-row;}
.table_div_cell {display:table-cell;}
.section{pad:2px;}
.site{background-color:#FFF;}

/* @title Profile Menu */
/* @help This is the Profile menu */
.profile_menu {
    margin:0;
    background-color:transparent;
    padding:0 12px 6px 12px;
}

/* @title Profile Menu Entry */
/* @help This is the Profile menu entries */
.profile_menu_entry {
    display:inline-block;
    background-color:#333;
    text-transform:uppercase;
    margin-top:3px;
    margin-right:1px;
    padding:5px 5px 5px 5px;
    color:#FFF;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
	border-radius:10px;
}

/* @title Menu Entry Link */
/* @help This is the menu entry URL link */
.profile_menu_entry a {
    color:#FFF;
}

/* @title Menu Link Hover */
/* @help This is the menu entry URL link hover effect */
.profile_menu_entry:hover {
    color:#000;
    background-color:#FFFFFF;
}

/* @title Menu Entry Active */
/* @help This is the menu entry active state */
.profile_menu_entry_active {
    /* background-color:#EEEEEE; */
    background-color:#AAA;
    color:#222;
}
.profile_menu_entry_active:hover {
    background-color:#AAA;
    color:#000;
}
#jr_buy { background:none; right:0px; top:0px; height:40px; width:55px; line-height:3em; padding-right:7px; text-align:right; background:url("http://mediaistream.com/skins/mis/img/buy.png") no-repeat scroll right top transparent; }
#jr_free { background:none; background:url("http://mediaistream.com/skins/mis/img/free.png") no-repeat scroll right top transparent; }
#jr_new { background:none; background:url("http://mediaistream.com/skins/mis/img/new.png") no-repeat scroll right top transparent; }
.block_search {
    float:left;
    white-space:nowrap;
    text-align:left;
    width:50%;
}

/* @title Search Text Input */
/* @help Format for Text Input search element on module indexes */
.form_text_search {
    width:50%;
}
.bottom_baseline {
  position:absolute;
  bottom:0;
  margin-bottom:7px;
}
.date {
    color:#000;
	font-size:14px;
}

.date > a {
    color:#626262;
    text-transform:capitalize;
}
.home_title {
    color:#FFF;
	font-size:36px;
	font-weight:bold;
}
.home_text {
    color:#FFF;
	font-size:24px;
	font-weight:bold;
}
.list_image {
float:left;
width:21%;
border-radius:10px;
}
.list_image_2 {
float:left;
width:27%;
border-radius:10px;
}
.list_image_3 {
float:left;
width:18%;
border-radius:10px;
}
.list_image_4 {
float:left;
width:46%;
border-radius:10px;
}
.list_image_5 {
float:left;
width:35%;
border-radius:10px;
}
.list_profile_image {
float:left;
width:6%;
}
.list_profile_image_2 {
float:left;
width:9%;
}
.list_body {
float:left;
padding-left:5px;
width:78%;
}
.list_body_2 {
float:left;
width:94%;
}
.list_body_5 {
float:left;
width:90%;
}
.list_body_3 {
float:left;
width:72%;
padding-left:5px;	
}
.list_body_6 {
float:left;
width:60%;
padding-left:5px;	
}
.list_body_4 {
float:left;
width:52%;
padding-left:5px;	
}
.list_rows {
float:left;
width:100%;
}
.list_body_p {
float:left;
width:57%;
}
.lists_buttons {
float:left;
width:20%;
}
.list_play {
width:5%;
vertical-align:middle;
float:right;
}
.list_wrap {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 1px 1px;	
    color:#000;
    overflow:hidden;
	border-radius:10px;
	margin:5px;
	position:relative;
}
.list_title {
	font-size:18px;
	text-transform:capitalize;
	color:#000;
}
.list_text {
	font-size:14px;
	color:#000;
}
.list_text_small {
	font-size:12px;
	color:#000;
}
.list_text_smaller {
	font-size:10px;
	color:#000;
}
.list_titleb {
	font-size:20px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_textb {
	font-size:14px;
	color:#000;
}
.list_text_smallb {
	font-size:12px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_text_smallerb {
	font-size:10px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_category {
	font-size:18px;
	font-weight:bold;
    text-transform:capitalize;
	color:#000;
}
.list_categoryb {
	font-size:18px;
	font-weight:bold;
    text-transform:capitalize;
	color:#000;
}




/* skins/mis/css/animations.css */


/*animations*/

/******************
* Bounce in right *
*******************/


.animated {
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

.slow {
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

.slower {
    -webkit-animation-duration:2s;
    animation-duration:2s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

.slowest {
    -webkit-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

/* Added by Andy Meetan */
.delay-250 {
    -webkit-animation-delay:0.25s;
    -moz-animation-delay:0.25s;
    -o-animation-delay:0.25s;
    animation-delay:0.25s;
}

.delay-500 {
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}

.delay-750 {
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
    -o-animation-delay:0.75s;
    animation-delay:0.75s;
}

.delay-1000 {
    -webkit-animation-delay:1.0s;
    -moz-animation-delay:1.0s;
    -o-animation-delay:1.0s;
    animation-delay:1.0s;
}

.delay-1250 {
    -webkit-animation-delay:1.25s;
    -moz-animation-delay:1.25s;
    -o-animation-delay:1.25s;
    animation-delay:1.25s;
}

.delay-1500 {
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay:1.5s;
    animation-delay:1.5s;
}

.delay-1750 {
    -webkit-animation-delay:1.75s;
    -moz-animation-delay:1.75s;
    -o-animation-delay:1.75s;
    animation-delay:1.75s;
}

.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}

.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}

.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}

.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}

.delay-3000 {
    -webkit-animation-delay:3.0s;
    -moz-animation-delay:3.0s;
    -o-animation-delay:3.0s;
    animation-delay:3.0s;
}

.delay-3500 {
    -webkit-animation-delay:3.5s;
    -moz-animation-delay:3.5s;
    -o-animation-delay:3.5s;
    animation-delay:3.5s;
}

.bounceInRight,.bounceInLeft,.bounceInUp,.bounceInDown {
    opacity:0;
    -webkit-transform:translateX(400px);
    transform:translateX(400px);
}

.fadeInRight,.fadeInLeft,.fadeInUp,.fadeInDown {
    opacity:0;
    -webkit-transform:translateX(400px);
    transform:translateX(400px);
}

.flipInX,.flipInY,.rotateIn,.rotateInUpLeft,.rotateInUpRight,.rotateInDownLeft,.rotateDownUpRight,.rollIn {
    opacity:0;
}

.lightSpeedInRight,.lightSpeedInLeft {
    opacity:0;
    -webkit-transform:translateX(400px);
    transform:translateX(400px);
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
    0% {
        opacity:0;
        -webkit-transform:scale(.3);
    }

    50% {
        opacity:1;
        -webkit-transform:scale(1.05);
    }

    70% {
        -webkit-transform:scale(.9);
    }

    100% {
        -webkit-transform:scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity:0;
        transform:scale(.3);
    }

    50% {
        opacity:1;
        transform:scale(1.05);
    }

    70% {
        transform:scale(.9);
    }

    100% {
        transform:scale(1);
    }
}

.bounceIn.go {
    -webkit-animation-name:bounceIn;
    animation-name:bounceIn;
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight {
    0% {
        opacity:0;

        -webkit-transform:translateX(400px);
    }
    60% {

        -webkit-transform:translateX(-30px);
    }
    80% {
        -webkit-transform:translateX(10px);
    }
    100% {
        opacity:1;

        -webkit-transform:translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity:0;

        transform:translateX(400px);
    }
    60% {

        transform:translateX(-30px);
    }
    80% {
        transform:translateX(10px);
    }
    100% {
        opacity:1;

        transform:translateX(0);
    }
}


.bounceInRight.go {
    -webkit-animation-name:bounceInRight;
    animation-name:bounceInRight;
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft {
    0% {
        opacity:0;

        -webkit-transform:translateX(-400px);
    }
    60% {

        -webkit-transform:translateX(30px);
    }
    80% {
        -webkit-transform:translateX(-10px);
    }
    100% {
        opacity:1;

        -webkit-transform:translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity:0;

        transform:translateX(-400px);
    }
    60% {

        transform:translateX(30px);
    }
    80% {
        transform:translateX(-10px);
    }
    100% {
        opacity:1;

        transform:translateX(0);
    }
}

.bounceInLeft.go {
    -webkit-animation-name:bounceInLeft;
    animation-name:bounceInLeft;
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp {
    0% {
        opacity:0;

        -webkit-transform:translateY(400px);
    }
    60% {

        -webkit-transform:translateY(-30px);
    }
    80% {
        -webkit-transform:translateY(10px);
    }
    100% {
        opacity:1;

        -webkit-transform:translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity:0;

        transform:translateY(400px);
    }
    60% {

        transform:translateY(-30px);
    }
    80% {
        transform:translateY(10px);
    }
    100% {
        opacity:1;

        transform:translateY(0);
    }
}

.bounceInUp.go {
    -webkit-animation-name:bounceInUp;
    animation-name:bounceInUp;
}


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown {
    0% {
        opacity:0;

        -webkit-transform:translateY(-400px);
    }
    60% {

        -webkit-transform:translateY(30px);
    }
    80% {
        -webkit-transform:translateY(-10px);
    }
    100% {
        opacity:1;

        -webkit-transform:translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity:0;

        transform:translateY(-400px);
    }
    60% {

        transform:translateY(30px);
    }
    80% {
        transform:translateY(-10px);
    }
    100% {
        opacity:1;

        transform:translateY(0);
    }
}

.bounceInDown.go {
    -webkit-animation-name:bounceInDown;
    animation-name:bounceInDown;
}


/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
        display:block;
    }
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
        display:block;
    }
}

.fadeIn {
    opacity:0;
}

.fadeIn.go {
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn {
    0% {
        -webkit-transform:scale(0.2);
        opacity:0;
    }
    50% {
        -webkit-transform:scale(1.2);

    }
    100% {
        -webkit-transform:scale(1);
        opacity:1;
    }
}

@keyframes growIn {
    0% {
        transform:scale(0.2);
        opacity:0;
    }
    50% {
        transform:scale(1.2);

    }
    100% {
        transform:scale(1);
        opacity:1;
    }
}

.growIn {

    -webkit-transform:scale(0.2);
    transform:scale(0.2);
    opacity:0;
}

.growIn.go {
    -webkit-animation-name:growIn;
    animation-name:growIn;
}

/********
* Shake *
********/
@-webkit-keyframes shake {
    0%,100% {
        -webkit-transform:translateX(0);
    }
    10%,30%,50%,70%,90% {
        -webkit-transform:translateX(-10px);
    }
    20%,40%,60%,80% {
        -webkit-transform:translateX(10px);
    }
}

@keyframes shake {
    0%,100% {
        transform:translateX(0);
    }
    10%,30%,50%,70%,90% {
        transform:translateX(-10px);
    }
    20%,40%,60%,80% {
        transform:translateX(10px);
    }
}

.shake.go {
    -webkit-animation-name:shake;
    animation-name:shake;
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
    0%,100% {
        -webkit-transform:translateX(0);
    }
    10%,30%,50%,70%,90% {
        -webkit-transform:translateY(-10px);
    }
    20%,40%,60%,80% {
        -webkit-transform:translateY(10px);
    }
}

@keyframes shakeUp {
    0%,100% {
        transform:translateY(0);
    }
    10%,30%,50%,70%,90% {
        transform:translateY(-10px);
    }
    20%,40%,60%,80% {
        transform:translateY(10px);
    }
}

.shakeUp.go {
    -webkit-animation-name:shakeUp;
    animation-name:shakeUp;
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft {
    0% {
        opacity:0;
        -webkit-transform:translateX(-400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity:0;
        transform:translateX(-400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}

.fadeInLeft {
    opacity:0;
    -webkit-transform:translateX(-400px);
    transform:translateX(-400px);
}

.fadeInLeft.go {
    -webkit-animation-name:fadeInLeft;
    animation-name:fadeInLeft;
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translateX(400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity:0;
        transform:translateX(400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}

.fadeInRight {
    opacity:0;
    -webkit-transform:translateX(400px);
    transform:translateX(400px);
}

.fadeInRight.go {
    -webkit-animation-name:fadeInRight;
    animation-name:fadeInRight;
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp {
    0% {
        opacity:0;
        -webkit-transform:translateY(400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity:0;
        transform:translateY(400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}

.fadeInUp {
    opacity:0;
    -webkit-transform:translateY(400px);
    transform:translateY(400px);
}

.fadeInUp.go {
    -webkit-animation-name:fadeInUp;
    animation-name:fadeInUp;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown {
    0% {
        opacity:0;
        -webkit-transform:translateY(-400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity:0;
        transform:translateY(-400px);
    }
    50% {
        opacity:0.3;
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}

.fadeInDown {
    opacity:0;
    -webkit-transform:translateY(-400px);
    transform:translateY(-400px);
}

.fadeInDown.go {
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown;
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin:center center;
        -webkit-transform:rotate(-200deg);
        opacity:0;
    }
    100% {
        -webkit-transform-origin:center center;
        -webkit-transform:rotate(0);
        opacity:1;
    }
}

@keyframes rotateIn {
    0% {
        transform-origin:center center;
        transform:rotate(-200deg);
        opacity:0;
    }
    100% {
        transform-origin:center center;
        transform:rotate(0);
        opacity:1;
    }
}

.rotateIn.go {
    -webkit-animation-name:rotateIn;
    animation-name:rotateIn;
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(90deg);
        opacity:0;
    }
    100% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(90deg);
        opacity:0;
    }
    100% {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1;
    }
}

.rotateInUpLeft.go {
    -webkit-animation-name:rotateInUpLeft;
    animation-name:rotateInUpLeft;
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(-90deg);
        opacity:0;
    }
    100% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(-90deg);
        opacity:0;
    }
    100% {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1;
    }
}

.rotateInDownLeft.go {
    -webkit-animation-name:rotateInDownLeft;
    animation-name:rotateInDownLeft;
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(-90deg);
        opacity:0;
    }
    100% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
}

@keyframes rotateInUpRight {
    0% {
        transform-origin:right bottom;
        transform:rotate(-90deg);
        opacity:0;
    }
    100% {
        transform-origin:right bottom;
        transform:rotate(0);
        opacity:1;
    }
}

.rotateInUpRight.go {
    -webkit-animation-name:rotateInUpRight;
    animation-name:rotateInUpRight;
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(90deg);
        opacity:0;
    }
    100% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
}

@keyframes rotateInDownRight {
    0% {
        transform-origin:right bottom;
        transform:rotate(90deg);
        opacity:0;
    }
    100% {
        transform-origin:right bottom;
        transform:rotate(0);
        opacity:1;
    }
}

.rotateInDownRight.go {
    -webkit-animation-name:rotateInDownRight;
    animation-name:rotateInDownRight;
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn {
    0% {
        opacity:0;
        -webkit-transform:translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0px) rotate(0deg);
    }
}

@keyframes rollIn {
    0% {
        opacity:0;
        transform:translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity:1;
        transform:translateX(0px) rotate(0deg);
    }
}

.rollIn.go {
    -webkit-animation-name:rollIn;
    animation-name:rollIn;
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform:skewX(9deg);
    }
    10% {
        -webkit-transform:skewX(-8deg);
    }
    20% {
        -webkit-transform:skewX(7deg);
    }
    30% {
        -webkit-transform:skewX(-6deg);
    }
    40% {
        -webkit-transform:skewX(5deg);
    }
    50% {
        -webkit-transform:skewX(-4deg);
    }
    60% {
        -webkit-transform:skewX(3deg);
    }
    70% {
        -webkit-transform:skewX(-2deg);
    }
    80% {
        -webkit-transform:skewX(1deg);
    }
    90% {
        -webkit-transform:skewX(0deg);
    }
    100% {
        -webkit-transform:skewX(0deg);
    }
}

@keyframes wiggle {
    0% {
        transform:skewX(9deg);
    }
    10% {
        transform:skewX(-8deg);
    }
    20% {
        transform:skewX(7deg);
    }
    30% {
        transform:skewX(-6deg);
    }
    40% {
        transform:skewX(5deg);
    }
    50% {
        transform:skewX(-4deg);
    }
    60% {
        transform:skewX(3deg);
    }
    70% {
        transform:skewX(-2deg);
    }
    80% {
        transform:skewX(1deg);
    }
    90% {
        transform:skewX(0deg);
    }
    100% {
        transform:skewX(0deg);
    }
}

.wiggle.go {
    -webkit-animation-name:wiggle;
    animation-name:wiggle;
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}

/********
* swing *
*********/

@-webkit-keyframes swing {
    20%,40%,60%,80%,100% {
        -webkit-transform-origin:top center;
    }
    20% {
        -webkit-transform:rotate(15deg);
    }
    40% {
        -webkit-transform:rotate(-10deg);
    }
    60% {
        -webkit-transform:rotate(5deg);
    }
    80% {
        -webkit-transform:rotate(-5deg);
    }
    100% {
        -webkit-transform:rotate(0deg);
    }
}

@keyframes swing {
    20% {
        transform:rotate(15deg);
    }
    40% {
        transform:rotate(-10deg);
    }
    60% {
        transform:rotate(5deg);
    }
    80% {
        transform:rotate(-5deg);
    }
    100% {
        transform:rotate(0deg);
    }
}

.swing.go {
    -webkit-transform-origin:top center;
    transform-origin:top center;
    -webkit-animation-name:swing;
    animation-name:swing;
}

/*******
* tada *
********/

@-webkit-keyframes tada {
    0% {
        -webkit-transform:scale(1);
    }
    10%,20% {
        -webkit-transform:scale(0.9) rotate(-3deg);
    }
    30%,50%,70%,90% {
        -webkit-transform:scale(1.1) rotate(3deg);
    }
    40%,60%,80% {
        -webkit-transform:scale(1.1) rotate(-3deg);
    }
    100% {
        -webkit-transform:scale(1) rotate(0);
    }
}

@keyframes tada {
    0% {
        transform:scale(1);
    }
    10%,20% {
        transform:scale(0.9) rotate(-3deg);
    }
    30%,50%,70%,90% {
        transform:scale(1.1) rotate(3deg);
    }
    40%,60%,80% {
        transform:scale(1.1) rotate(-3deg);
    }
    100% {
        transform:scale(1) rotate(0);
    }
}

.tada.go {
    -webkit-animation-name:tada;
    animation-name:tada;
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble {
    0% {
        -webkit-transform:translateX(0%);
    }
    15% {
        -webkit-transform:translateX(-25%) rotate(-5deg);
    }
    30% {
        -webkit-transform:translateX(20%) rotate(3deg);
    }
    45% {
        -webkit-transform:translateX(-15%) rotate(-3deg);
    }
    60% {
        -webkit-transform:translateX(10%) rotate(2deg);
    }
    75% {
        -webkit-transform:translateX(-5%) rotate(-1deg);
    }
    100% {
        -webkit-transform:translateX(0%);
    }
}

@keyframes wobble {
    0% {
        transform:translateX(0%);
    }
    15% {
        transform:translateX(-25%) rotate(-5deg);
    }
    30% {
        transform:translateX(20%) rotate(3deg);
    }
    45% {
        transform:translateX(-15%) rotate(-3deg);
    }
    60% {
        transform:translateX(10%) rotate(2deg);
    }
    75% {
        transform:translateX(-5%) rotate(-1deg);
    }
    100% {
        transform:translateX(0%);
    }
}

.wobble.go {
    -webkit-animation-name:wobble;
    animation-name:wobble;
}

/********
* pulse *
*********/

@-webkit-keyframes pulse {
    0% {
        -webkit-transform:scale(1);
    }
    50% {
        -webkit-transform:scale(1.1);
    }
    100% {
        -webkit-transform:scale(1);
    }
}

@keyframes pulse {
    0% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.1);
    }
    100% {
        transform:scale(1);
    }
}

.pulse.go {
    -webkit-animation-name:pulse;
    animation-name:pulse;
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform:translateX(100%) skewX(-30deg);
        opacity:0;
    }
    60% {
        -webkit-transform:translateX(-20%) skewX(30deg);
        opacity:1;
    }
    80% {
        -webkit-transform:translateX(0%) skewX(-15deg);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
}

@keyframes lightSpeedInRight {
    0% {
        transform:translateX(100%) skewX(-30deg);
        opacity:0;
    }
    60% {
        transform:translateX(-20%) skewX(30deg);
        opacity:1;
    }
    80% {
        transform:translateX(0%) skewX(-15deg);
        opacity:1;
    }
    100% {
        transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
}

.lightSpeedInRight.go {
    -webkit-animation-name:lightSpeedInRight;
    animation-name:lightSpeedInRight;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
}

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform:translateX(-100%) skewX(30deg);
        opacity:0;
    }
    60% {
        -webkit-transform:translateX(20%) skewX(-30deg);
        opacity:1;
    }
    80% {
        -webkit-transform:translateX(0%) skewX(15deg);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
}

@keyframes lightSpeedInLeft {
    0% {
        transform:translateX(-100%) skewX(30deg);
        opacity:0;
    }
    60% {
        transform:translateX(20%) skewX(-30deg);
        opacity:1;
    }
    80% {
        transform:translateX(0%) skewX(15deg);
        opacity:1;
    }
    100% {
        transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
}

.lightSpeedInLeft.go {
    -webkit-animation-name:lightSpeedInLeft;
    animation-name:lightSpeedInLeft;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
}


/*******
* Flip *
*******/
@-webkit-keyframes flip {
    0% {
        -webkit-transform:perspective(400px) rotateY(0);
        -webkit-animation-timing-function:ease-out;
    }
    40% {
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function:ease-out;
    }
    50% {
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function:ease-in;
    }
    80% {
        -webkit-transform:perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function:ease-in;
    }
    100% {
        -webkit-transform:perspective(400px) scale(1);
        -webkit-animation-timing-function:ease-in;
    }
}

@keyframes flip {
    0% {
        transform:perspective(400px) rotateY(0);
        animation-timing-function:ease-out;
    }
    40% {
        transform:perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function:ease-out;
    }
    50% {
        transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function:ease-in;
    }
    80% {
        transform:perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function:ease-in;
    }
    100% {
        transform:perspective(400px) scale(1);
        animation-timing-function:ease-in;
    }
}

.flip.go {
    -webkit-backface-visibility:visible !important;
    -webkit-animation-name:flip;
    backface-visibility:visible !important;
    animation-name:flip;
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform:perspective(400px) rotateX(90deg);
        opacity:0;
    }
    40% {
        -webkit-transform:perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform:perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotateX(0deg);
        opacity:1;
    }
}

@keyframes flipInX {
    0% {
        transform:perspective(400px) rotateX(90deg);
        opacity:0;
    }
    40% {
        transform:perspective(400px) rotateX(-10deg);
    }
    70% {
        transform:perspective(400px) rotateX(10deg);
    }
    100% {
        transform:perspective(400px) rotateX(0deg);
        opacity:1;
    }
}

.flipInX.go {
    -webkit-backface-visibility:visible !important;
    -webkit-animation-name:flipInX;
    backface-visibility:visible !important;
    animation-name:flipInX;
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform:perspective(400px) rotateY(90deg);
        opacity:0;
    }
    40% {
        -webkit-transform:perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform:perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotateY(0deg);
        opacity:1;
    }
}

@keyframes flipInY {
    0% {
        transform:perspective(400px) rotateY(90deg);
        opacity:0;
    }
    40% {
        transform:perspective(400px) rotateY(-10deg);
    }
    70% {
        transform:perspective(400px) rotateY(10deg);
    }
    100% {
        transform:perspective(400px) rotateY(0deg);
        opacity:1;
    }
}

.flipInY.go {
    -webkit-backface-visibility:visible !important;
    -webkit-animation-name:flipInY;
    backface-visibility:visible !important;
    animation-name:flipInY;
}

/*****************
* Out animations *
*****************/


/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform:scale(1);
    }
    25% {
        -webkit-transform:scale(.95);
    }
    50% {
        opacity:1;
        -webkit-transform:scale(1.1);
    }
    100% {
        opacity:0;
        -webkit-transform:scale(.3);
    }
}

@keyframes bounceOut {
    0% {
        transform:scale(1);
    }
    25% {
        transform:scale(.95);
    }
    50% {
        opacity:1;
        transform:scale(1.1);
    }
    100% {
        opacity:0;
        transform:scale(.3);
    }
}

.bounceOut.goAway {
    -webkit-animation-name:bounceOut;
    animation-name:bounceOut;
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform:translateY(0);
    }
    20% {
        opacity:1;
        -webkit-transform:translateY(20px);
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(-2000px);
    }
}

@keyframes bounceOutUp {
    0% {
        transform:translateY(0);
    }
    20% {
        opacity:1;
        transform:translateY(20px);
    }
    100% {
        opacity:0;
        transform:translateY(-2000px);
    }
}

.bounceOutUp.goAway {
    -webkit-animation-name:bounceOutUp;
    animation-name:bounceOutUp;
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform:translateY(0);
    }
    20% {
        opacity:1;
        -webkit-transform:translateY(-20px);
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(2000px);
    }
}

@keyframes bounceOutDown {
    0% {
        transform:translateY(0);
    }
    20% {
        opacity:1;
        transform:translateY(-20px);
    }
    100% {
        opacity:0;
        transform:translateY(2000px);
    }
}

.bounceOutDown.goAway {
    -webkit-animation-name:bounceOutDown;
    animation-name:bounceOutDown;
}


/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform:translateX(0);
    }
    20% {
        opacity:1;
        -webkit-transform:translateX(20px);
    }
    100% {
        opacity:0;
        -webkit-transform:translateX(-2000px);
    }
}

@keyframes bounceOutLeft {
    0% {
        transform:translateX(0);
    }
    20% {
        opacity:1;
        transform:translateX(20px);
    }
    100% {
        opacity:0;
        transform:translateX(-2000px);
    }
}

.bounceOutLeft.goAway {
    -webkit-animation-name:bounceOutLeft;
    animation-name:bounceOutLeft;
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform:translateX(0);
    }
    20% {
        opacity:1;
        -webkit-transform:translateX(-20px);
    }
    100% {
        opacity:0;
        -webkit-transform:translateX(2000px);
    }
}

@keyframes bounceOutRight {
    0% {
        transform:translateX(0);
    }
    20% {
        opacity:1;
        transform:translateX(-20px);
    }
    100% {
        opacity:0;
        transform:translateX(2000px);
    }
}

.bounceOutRight.goAway {
    -webkit-animation-name:bounceOutRight;
    animation-name:bounceOutRight;
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

.fadeOut.goAway {
    -webkit-animation-name:fadeOut;
    animation-name:fadeOut;
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
    0% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(-2000px);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity:1;
        transform:translateY(0);
    }
    100% {
        opacity:0;
        transform:translateY(-2000px);
    }
}

.fadeOutUp.goAway {
    -webkit-animation-name:fadeOutUp;
    animation-name:fadeOutUp;
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
    0% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
    100% {
        opacity:0;
        -webkit-transform:translateY(2000px);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity:1;
        transform:translateY(0);
    }
    100% {
        opacity:0;
        transform:translateY(2000px);
    }
}

.fadeOutDown.goAway {
    -webkit-animation-name:fadeOutDown;
    animation-name:fadeOutDown;
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
    100% {
        opacity:0;
        -webkit-transform:translateX(-2000px);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity:1;
        transform:translateX(0);
    }
    100% {
        opacity:0;
        transform:translateX(-2000px);
    }
}

.fadeOutLeft.goAway {
    -webkit-animation-name:fadeOutLeft;
    animation-name:fadeOutLeft;
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
    0% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
    100% {
        opacity:0;
        -webkit-transform:translateX(2000px);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity:1;
        transform:translateX(0);
    }
    100% {
        opacity:0;
        transform:translateX(2000px);
    }
}

.fadeOutRight.goAway {
    -webkit-animation-name:fadeOutRight;
    animation-name:fadeOutRight;
}

/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform:perspective(400px) rotateX(0deg);
        opacity:1;
    }
    100% {
        -webkit-transform:perspective(400px) rotateX(90deg);
        opacity:0;
    }
}

@keyframes flipOutX {
    0% {
        transform:perspective(400px) rotateX(0deg);
        opacity:1;
    }
    100% {
        transform:perspective(400px) rotateX(90deg);
        opacity:0;
    }
}

.flipOutX.goAway {
    -webkit-animation-name:flipOutX;
    -webkit-backface-visibility:visible !important;
    animation-name:flipOutX;
    backface-visibility:visible !important;
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform:perspective(400px) rotateY(0deg);
        opacity:1;
    }
    100% {
        -webkit-transform:perspective(400px) rotateY(90deg);
        opacity:0;
    }
}

@keyframes flipOutY {
    0% {
        transform:perspective(400px) rotateY(0deg);
        opacity:1;
    }
    100% {
        transform:perspective(400px) rotateY(90deg);
        opacity:0;
    }
}

.flipOutY {
    -webkit-backface-visibility:visible !important;
    -webkit-animation-name:flipOutY;
    backface-visibility:visible !important;
    animation-name:flipOutY;
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
    0% {
        -webkit-transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(100%) skewX(-30deg);
        opacity:0;
    }
}

@keyframes lightSpeedOutRight {
    0% {
        transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
    100% {
        transform:translateX(100%) skewX(-30deg);
        opacity:0;
    }
}

.lightSpeedOutRight.goAway {
    -webkit-animation-name:lightSpeedOutRight;
    animation-name:lightSpeedOutRight;
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}


/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
    0% {
        -webkit-transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(-100%) skewX(30deg);
        opacity:0;
    }
}

@keyframes lightSpeedOutLeft {
    0% {
        transform:translateX(0%) skewX(0deg);
        opacity:1;
    }
    100% {
        transform:translateX(-100%) skewX(30deg);
        opacity:0;
    }
}

.lightSpeedOutLeft.goAway {
    -webkit-animation-name:lightSpeedOutLeft;
    animation-name:lightSpeedOutLeft;
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;

}

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin:center center;
        -webkit-transform:rotate(0);
        opacity:1;
    }
    100% {
        -webkit-transform-origin:center center;
        -webkit-transform:rotate(200deg);
        opacity:0;
    }
}

@keyframes rotateOut {
    0% {
        transform-origin:center center;
        transform:rotate(0);
        opacity:1;
    }
    100% {
        transform-origin:center center;
        transform:rotate(200deg);
        opacity:0;
    }
}

.rotateOut.goAway {
    -webkit-animation-name:rotateOut;
    animation-name:rotateOut;
}


/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
    100% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(-90deg);
        opacity:0;
    }
}

@keyframes rotateOutUpLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1;
    }
    100% {
        -transform-origin:left bottom;
        -transform:rotate(-90deg);
        opacity:0;
    }
}

.rotateOutUpLeft.goAway {
    -webkit-animation-name:rotateOutUpLeft;
    animation-name:rotateOutUpLeft;
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
    100% {
        -webkit-transform-origin:left bottom;
        -webkit-transform:rotate(90deg);
        opacity:0;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1;
    }
    100% {
        transform-origin:left bottom;
        transform:rotate(90deg);
        opacity:0;
    }
}

.rotateOutDownLeft.goAway {
    -webkit-animation-name:rotateOutDownLeft;
    animation-name:rotateOutDownLeft;
}

/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(0);
        opacity:1;
    }
    100% {
        -webkit-transform-origin:right bottom;
        -webkit-transform:rotate(90deg);
        opacity:0;
    }
}

@keyframes rotateOutUpRight {
    0% {
        transform-origin:right bottom;
        transform:rotate(0);
        opacity:1;
    }
    100% {
        transform-origin:right bottom;
        transform:rotate(90deg);
        opacity:0;
    }
}

.rotateOutUpRight.goAway {
    -webkit-animation-name:rotateOutUpRight;
    animation-name:rotateOutUpRight;
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
    0% {
        opacity:1;
        -webkit-transform:translateX(0px) rotate(0deg);
    }
    100% {
        opacity:0;
        -webkit-transform:translateX(100%) rotate(120deg);
    }
}

@keyframes rollOut {
    0% {
        opacity:1;
        transform:translateX(0px) rotate(0deg);
    }
    100% {
        opacity:0;
        transform:translateX(100%) rotate(120deg);
    }
}

.rollOut.goAway {
    -webkit-animation-name:rollOut;
    animation-name:rollOut;
}

/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
    0% {
        opacity:0;
        -webkit-transform:translateY(20px);
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
}

@keyframes fadeInUpShort {
    0% {
        opacity:0;
        transform:translateY(20px);
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}

.fadeInUpShort {
    opacity:0;
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
}

.fadeInUpShort.go {
    -webkit-animation-name:fadeInUpShort;
    animation-name:fadeInUpShort;
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
    0% {
        opacity:0;
        -webkit-transform:translateY(-20px);
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0);
    }
}

@keyframes fadeInDownShort {
    0% {
        opacity:0;
        transform:translateY(-20px);
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}

.fadeInDownShort {
    opacity:0;
    -webkit-transform:translateY(-20px);
    transform:translateY(-20px);
}

.fadeInDownShort.go {
    -webkit-animation-name:fadeInDownShort;
    animation-name:fadeInDownShort;
}

/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
    0% {
        opacity:0;
        -webkit-transform:translateX(20px);
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
}

@keyframes fadeInRightShort {
    0% {
        opacity:0;
        transform:translateX(20px);
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}

.fadeInRightShort {
    opacity:0;
    -webkit-transform:translateX(20px);
    transform:translateX(20px);
}

.fadeInRightShort.go {
    -webkit-animation-name:fadeInRightShort;
    animation-name:fadeInRightShort;
}

/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
    0% {
        opacity:0;
        -webkit-transform:translateX(-20px);
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
    }
}

@keyframes fadeInLeftShort {
    0% {
        opacity:0;
        transform:translateX(-20px);
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}

.fadeInLeftShort {
    opacity:0;
    -webkit-transform:translateX(-20px);
    transform:translateX(-20px);
}

.fadeInLeftShort.go {
    -webkit-animation-name:fadeInLeftShort;
    animation-name:fadeInLeftShort;
}


/* skins/mis/css/animations-ie-fix.css */


.animated {
    opacity:1;
}

/* skins/mis/css/player.css */



.video_container {
    position:relative;
}

.jrVideoPro2_player ul.jp-controls,.jrVideoPro2_player,.jp-control-settings > ul {
    margin:0;
    padding:0;
}

.jrVideoPro2_player .jp-gui.start {
    display:block !important;
    opacity:1 !important;
}

.jrVideoPro2_player .jp-gui {
    bottom:0;
    height:100% !important;
    left:0;
    position:absolute;
    width:100%;
}

.jrVideoPro2_player li {
    float:left;
    list-style:outside none none;
}

.jrVideoPro2_player .jp-video-play {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
}


.jrVideoPro2_player .jp-video-play-icon {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/play_large.png") no-repeat scroll 0 0 / cover ;
    display:block;
    height:30px;
    margin:auto;
    text-indent:-9999px;
    width:30px;
    transition:all 0.3s ease 0s;
}

.jrVideoPro2_player .jp-interface {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    bottom:0;
    height:44px;
    position:absolute;
    width:100%;
}

.jrVideoPro2_player .jp-video-play {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.jrVideoPro2_player .jp-play,
.jrVideoPro2_player .jp-pause,
.jrVideoPro2_player .jp-mute,
.jrVideoPro2_player .jp-unmute,
.jrVideoPro2_player .jp-settings,
.jrVideoPro2_player .jp-restore-screen,
.jrVideoPro2_player .jp-full-screen {
    display:block;
    height:18px;
    margin:0 20px;
    width:18px;
    position:absolute;
}

.jrVideoPro2_player .jp-controls-holder {
}

.jrVideoPro2_player .jp-progress-holder {
    height:8px;
    left:46px;
    padding:6px 0 0;
    position:absolute;
    right:284px;
}

.jrVideoPro2_player .jp-duration {
    color:#CCCCCC;
    font-size:12px;
    font-weight:bold;
    line-height:1.6;
    position:absolute;
    right:240px;
}

.jrVideoPro2_player .jp-full-screen,.jp-restore-screen {
    right:0;
}

.jrVideoPro2_player .jp-seek-bar,.jrVideoPro2_player .jp-play-bar,.jrVideoPro2_player .jp-progress {
    background:rgba(255,255,255,0.1) none repeat scroll 0 0;
    border-radius:0;
    height:7px;
}

.jrVideoPro2_player .jp-play-bar {
    background:#5588cc none repeat scroll 0 0;
}

.jrVideoPro2_player div.jp-video-full div.jp-jplayer {
    top:0;
    left:0;
    position:fixed !important;
    position:relative; /* Rules for IE6 (full-screen) */
    overflow:hidden;
}

.jrVideoPro2_player div.jp-video-full div.jp-gui,
.jrVideoPro2_player .jp-audio.jp-state-full-screen div.jp-gui {
    position:fixed !important;
    position:static; /* Rules for IE6 (full-screen) */
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    z-index:1001; /* 1 layer above the others. */
}

.jrVideoPro2_player .jp-video-full .jp-controls-holder,
.jrVideoPro2_player .jp-audio.jp-state-full-screen .jp-controls-holder {
    margin:auto;
    max-width:1180px;
    position:relative;
}

.jrVideoPro2_player .jp-audio .jp-title {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    color:#fff;
    display:inline !important;
    font-weight:bold;
    left:20px;
    max-width:80%;
    padding:10px;
    position:absolute;
    top:0;
}

.jrVideoPro2_player .jp-playlist {
    bottom:50px;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
}

.jrVideoPro2_player .jp-playlist li {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    border-bottom:1px solid rgba(255,255,255,0.2);
    display:block;
    width:100%;
}

.jrVideoPro2_player .jp-playlist-current a {
    color:rgba(248,197,116,1);
}

.jrVideoPro2_player .jp-playlist div {
}

.jrVideoPro2_player .jp-control-settings {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    border:2px solid rgba(255,255,255,0.5);
    border-radius:8px;
    bottom:42px;
    position:absolute;
    right:10px;
    z-index:500;
}

.jrVideoPro2_player .jp-volume-bar {
    background:#000000 none repeat scroll 0 0;
    cursor:pointer;
    height:8px;
    margin:5px 0;
    overflow:hidden;
    position:absolute;
    right:87px;
    width:116px;
}

.jrVideoPro2_player .jp-volume-bar-value {
    background:#5588cc none repeat scroll 0 0;
    border-radius:0;
    height:8px;
}

.jrVideoPro2_player.audio .jp-settings {
    right:0;
}

.jrVideoPro2_player.audio .jp-mute,.jrVideoPro2_player.audio .jp-unmute {
    right:35px;
}

.jrVideoPro2_player.audio .jp-duration {
    right:95px;
}

.jrVideoPro2_player.audio .jp-volume-bar {
    right:25px;
}

.jrVideoPro2_player.audio .jp-progress-holder {
    right:158px;
}

.jrVideoPro2_player .jp-title {
    color:white;
    display:block !important;
    font-size:28px;
    margin:auto;
    padding:10px 1em;
    position:absolute;
    text-shadow:2px 2px 6px #000;
    width:100%;
}

.jrVideoPro2_player .jp-control-settings span {
    color:white;
}

.button_player div.jp-interface ul.jp-controls a.jp-play,
.button_player div.jp-interface ul.jp-controls a.jp-pause {
    display:none;
    height:30px;
    width:30px;
}


li.jp-playlist-current {
    background:rgba(255,255,255,0.1) none repeat scroll 0 0;
}

.jrVideoPro2_player {
    border-radius:10px;
    box-shadow:0 0 10px #666;
    overflow:hidden;
}

.jrVideoPro2_player .jp-video-play-icon:hover {
    height:65px;;
    width:65px;
}

.jrVideoPro2_player .jp-pause {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/pause.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
}

.jrVideoPro2_player .jp-play {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/play.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
	
}

.jrVideoPro2_player .jp-full-screen {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/fullscreen.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
}

.jrVideoPro2_player .jp-unmute {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/unmute.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
    right:190px;
}

.jrVideoPro2_player .jp-mute {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/mute.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
    right:190px;
}

.jrVideoPro2_player .jp-settings {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/settings.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
    right:35px;
}

.jrVideoPro2_player .jp-restore-screen {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/fullscreen.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
}

.jrVideoPro2_player .jp-video-play-icon.replay {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/replay_large.png") no-repeat scroll 0 0 / contain;
}

.jrVideoPro2_player .jp-play.replay {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/replay.png") no-repeat scroll 0 0 / contain;
    opacity:0.8;
}
.mis_player .jp-gui.start {
    display:block !important;
}

.mis_player .jp-gui {
    bottom:0;
    height:100% !important;
    left:0;
    position:absolute;
    width:100%;
}

.mis_player li {
    float:left;
    list-style:outside none none;
}

.mis_player .jp-video-play {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
}

.mis_player .jp-video-play-icon {
    display:block;
    height:40px;
    margin:auto;
    width:40px;
    text-indent:-9999px;
}

.mis_player .jp-interface {
    background:rgba(0,0,0,0) linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6)) repeat scroll 0 0;
    bottom:0;
    height:60px;
    position:absolute;
    width:100%;
}

.mis_player .jp-video-play {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.mis_player .jp-play,
.mis_player .jp-pause,
.mis_player .jp-mute,
.mis_player .jp-unmute,
.mis_player .jp-video-play-icon,
.mis_player .jp-restore-screen,
.mis_player .jp-full-screen {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/player.png") no-repeat scroll 0 0;
}

.mis_player .jp-pause {
    background-position:0 -221px !important;
}

.mis_player .jp-play,
.mis_player .jp-pause,
.mis_player .jp-mute,
.mis_player .jp-unmute,
.mis_player .jp-settings,
.mis_player .jp-restore-screen,
.mis_player .jp-full-screen {
    display:block;
    height:25px;
    margin:0 20px;
    width:25px;
    position:absolute;
}

.mis_player .jp-play {
    background-position:0 -246px;
}

.mis_player .jp-controls-holder {
    padding:20px 0;
}

.button_player_holder {
    float:right;
    margin-top:16px;
}

.button_player img {
    width:40px;
    height:40px;
}

.sc_button_player img {
    width:40px;
}

.mis_player .jp-progress-holder {
    height:25px;
    left:56px;
    padding:6px 0 0;
    position:absolute;
    right:190px;
}

.mis_player .jp-duration {
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    line-height:1.6em;
    position:absolute;
    right:132px;
}

.mis_player .jp-full-screen,.jp-restore-screen {
    right:0;
}

.mis_player .jp-full-screen {
    background-position:0 -146px;
}

.mis_player .jp-unmute {
    background-position:0 -196px !important;
}

.mis_player .jp-mute {
    background-position:0 -371px !important;
}

.mis_player .jp-mute,.mis_player .jp-unmute {
    right:70px;
}

.mis_player .jp-settings {
    background:rgba(0,0,0,0) url("http://mediaistream.com/image/img/skin/mis/acp.png") repeat scroll 0 0 / contain;
    right:35px;
}

.mis_player .jp-seek-bar,.mis_player .jp-play-bar,.mis_player .jp-progress {
    background:rgba(255,255,255,0.3) none repeat scroll 0 0;
    border-radius:8px;
    height:12px;
}

.mis_player .jp-play-bar {
    background:rgba(0,0,0,0.3) none repeat scroll 0 0;
}

.mis_player div.jp-video-full div.jp-jplayer {
    top:0;
    left:0;
    position:fixed !important;
    position:relative; /* Rules for IE6 (full-screen) */
    overflow:hidden;
}

.mis_player div.jp-video-full div.jp-gui,
.mis_player .jp-audio.jp-state-full-screen div.jp-gui {
    position:fixed !important;
    position:static; /* Rules for IE6 (full-screen) */
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    z-index:1001; /* 1 layer above the others. */
}

.mis_player .jp-restore-screen {
    background-position:0 -172px;
}

.mis_player .jp-video-full .jp-controls-holder,
.mis_player .jp-audio.jp-state-full-screen .jp-controls-holder {
    margin:auto;
    max-width:1280px;
    position:relative;
}

.mis_player .jp-audio .jp-title {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    color:#FFFFFF;
    display:inline !important;
    font-weight:bold;
    left:0;
    max-width:80%;
    padding:10px;
    position:absolute;
    top:0;
}

.mis_player .jp-playlist {
    bottom:50px;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
}

.mis_player .jp-playlist li {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    border-bottom:1px solid rgba(255,255,255,0.2);
    display:block;
    width:100%;
}

.mis_player .jp-playlist-current a {
    color:rgba(248,197,116,1);
}

.mis_player .jp-playlist div {
    padding:7px;
}

.mis_beat_player .jp-type-playlist {
    margin:auto;
    max-width:1140px;
    position:relative;
}

.jp-type-single {
}

.mis_player .jp-control-settings {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    border:2px solid rgba(255,255,255,0.5);
    border-radius:8px;
    bottom:50px;
    padding:6px;
    position:absolute;
    right:10px;
    z-index:500;
}

.mis_player .jp-volume-bar {
    background:rgba(255,255,255,0.5) none repeat scroll 0 0;
    border-radius:8px;
    bottom:44px;
    height:21px;
    overflow:hidden;
    position:absolute;
    right:53px;
    width:100px;
    cursor:pointer;
}

.mis_player .jp-volume-bar-value {
    background:rgba(0,0,0,0.5) none repeat scroll 0 0;
    border-radius:8px;
    height:17px;
    margin:2px;
}

.mis_player.audio .jp-settings {
    right:0;
}

.mis_player.audio .jp-mute,.mis_player.audio .jp-unmute {
    right:35px;
}

.mis_player.audio .jp-duration {
    right:95px;
}

.mis_player.audio .jp-volume-bar {
    right:25px;
}

.mis_player.audio .jp-progress-holder {
    right:158px;
}

.mis_player .jp-video-play-icon.replay {
    background-position:0 -41px;
}

.mis_player .jp-play.replay {
    background-position:0 -321px;
}

.mis_player .jp-title {
    margin:2em;
}

.mis_player .jp-control-settings span {
    color:white;
}

.button_player div.jp-interface ul.jp-controls a.jp-play,
.button_player div.jp-interface ul.jp-controls a.jp-pause {
    display:none;
}

li.jp-playlist-current {
    background:#FFCC66 none repeat scroll 0 0;
}

.mis_player {
    position:relative;
}

.mis_player .jp-playlist-current a {
    color:#FFCC66;
}

.jp-playlist-item {
    color:#EEEEEE;
}

/* Mobile */
@media handheld,only screen and (max-width:767px) {
    .jrVideoPro2_player .jp-duration {
        right:87px;
    }

    .jrVideoPro2_player .jp-progress-holder {
        right:130px;
    }

    .jrVideoPro2_player .jp-volume-bar.desk,.jrVideoPro2_player #mute-unmute,
    .jrVideoPro2_audio .jp-volume-bar.desk,.jrVideoPro2_audio #mute-unmute {
        display:none !important;
    }

    .jrVideoPro2_audio.playlist .jp-title {
        font-size:16px;
    }
    .jrVideoPro2_player .jp-title {
        font-size:17px;
    }

    .jrVideoPro2_audio .jp-progress-holder {
        right:50px;
    }

    .jrVideoPro2_audio .jp-duration {
        right:0;
    }
    .jrVideoPro2_player .jp-video-play-icon {
        height:40px;
        width:40px;
    }
    .jrVideoPro2_player .jp-video-play-icon:hover {
        height:40px;
        width:40px;
    }
}

/* skins/mis/css/override_tablet.css */


/* Tablets */
@media only screen and (max-width:970px) {

    input[type=submit],input[type=reset],input[type=button] {
        -webkit-appearance:none;
    }

    #wrapper {
        font-size:10px;
    }

    .page_tab {
        font-size:14px;
    }

    .desk {
        display:none;
    }

    .mobile {
        display:block;
    }
    #menu > li.right {
        display:block;
    }
    #menu > li {
        display:none;
    }
    #menu > li.desk.right {
        display:none;
    }
    #apps li {
        width:65px;
    }

    #wrapper > section {
        font-size:1.2em;
    }

    .row,#content {
        max-width:970px;
    }

    h1 {
        margin:10px auto;
    }

    .final .footer > a {
        top:-74px;
    }

    .jrform .page_content {
        margin-top:20px;
    }

    .table-cell.logo {
        text-align:center;
        width:80%;
    }

    .table-cell.mobile {
        padding:0 5px;
        width:23px;
    }
    .menu_pad {
        height:100%;
        padding:0 8px;
    }
    #menu > li.right {
        margin:0;
    }
    .table-cell.mobile_size {
        padding:0 5px;
        width:23px;
    }
    .table-cell.logo {
        text-align:center;
        width:93%;
    }
    .index .head {
        padding:0 0 1em 5px;
    }
    #profile .videos .head {
        padding:30px 5px 10px;
    }
    .videos > .wrap {
        padding:0;
    }
}

@media only screen and (max-height:900px) {

    section.index.list {
        padding:90px 0 0;
    }

}


@media only screen and (max-width:1200px) {
    .hover {
        font-size:12px;
    }
    .more {
        margin:1em 0 0;
    }


}

/* skins/mis/css/override_mobile.css */


/* Mobile */
@media handheld,only screen and (max-width:767px) {

    body {
        width:100%;
        min-width:0;
        margin:0;
        padding:0;
        -webkit-text-size-adjust:none;
		background:#FFFFFF;
    }

    h1 {
        font-size:22px;
        font-weight:bold;
    }

    h2 {
        font-size:18px;
    }

    h3 {
        font-size:18px;
		font-weight:bold;
    }

    h4 {
        font-size:11px;
    }

    input[type=submit],input[type=reset],input[type=button] {
        -webkit-appearance:none;
    }

    #mmt {
        background-color:transparent;
        position:relative;
        float:left;
        width:28px;
        height:28px;
        top:5px;
        left:6px;
        z-index:50;
    }

    #main_menu {
        padding:6px;
        text-align:center;
        font-size:14px;
    }

    .row .col1,.row .col2,.row .col3,.row .col4,.row .col5,.row .col6,.row .col7,.row .col8,.row .col9,.row .col10,.row .col11,.row .col12 {
        width:auto;
        float:none;
        margin-left:0;
        margin-right:0;
    }

    .block {
        font-size:12px;
    }

    #item-holder {
        margin-right:0;
    }

    .page_content {
        width:100%;
        margin:0 auto;
    }

    .page_table_header {
        font-size:8px;
    }

    .page_table_cell {
        padding:2px;
        font-size:8px;
    }

    .nowrap {
        white-space:normal;
    }

    .element_left {
        padding:3px;
        font-size:11px;
    }

    .element_right {
        font-size:10px;
        padding:3px;
    }

    .profile_image_element_right img {
        width:190px;
        text-align:center;
    }

    .profile_menu_entry {
        padding:8px;
        margin-bottom:3px;
    }

    .profile_menu {
        padding:0 0 0 5px;
        margin:0;
    }

    .block {
        padding:6px;
        margin:0;
    }

    .form_select_item_jumper {
        width:50%;
    }

    .upload_button {
        font:bold 10px Verdana,sans-serif;
        height:20px;
        padding:6px 6px 0 6px;
        margin:0;
    }

    .create_img {
        height:20px;
        width:20px;
    }

    .update_img {
        height:20px;
        width:20px;
    }

    .delete_img {
        height:20px;
        width:20px;
    }

    .download_img {
        height:20px;
        width:20px;
    }

    /* Tab Bar */
    .page_tab_bar_holder {
        width:100%;
        border-bottom:0;
        padding:0 12px 9px 0;
    }

    .page_tab_bar_spacer {
        height:0;
    }

    .page_tab {
        float:left;
        list-style:none;
        margin:3px 6px 3px 0;
        color:#000000;
        text-transform:capitalize;
        font-size:12px;
        padding:3px;
        text-align:center;
        border-radius:0;
    }

    .page_tab a {
        text-decoration:none;
    }

    .page_tab_first {
        margin-left:0;
    }

    .page_tab_last {
        color:#000000;
    }

    .page_tab_active {
        border:0;
    }

    .info_img {
        display:none;
    }

    .gallery_img {
        width:100%;
    }

    .item {
        padding:6px;
        font-size:12px;
    }
    #menu > li.right {
        margin:0;
    }

    #menu .right img {
        width:26px;
    }

    .table-cell.profile-image {
        width:25%;
        padding:0 5px 0 0;
    }

    #profile_header .profile_name {
        font-size:20px;
    }

    #profile_header .profile_name span {
        font-size:12px;
    }

    .index_list .col4,.index_list .col2 {
        float:left;
        width:8.3%;
    }
	
    .image {
    }
    .index_list.clearfix.c27 > div {
        width:2700%;
    }
    .index_list.clearfix.c21 > div {
        width:2100%;
    }

    .c21 .col6,.c21 .col2 {
        float:left;
        width:14.28%;
    }
	
    .white.clearfix div:last-child {
        display:none;
    }
    .white.clearfix > div:first-child {
        width:100% !important;
    }
    .index .head {
        padding:0 10px 10px;
    }
    section {
        margin:0;
    }
    .pane .row {
        max-width:none;
    }

    .social > li {
        padding:0 5px;
    }
    .sprite_icon {
        margin:3px 0;
    }
    .table-cell.profile-image {
        width:17%;
    }
    .stButton {
        margin-top:10px;
    }
    .detail_box .wrap {
        padding:0 1em;
    }
    #profile .videos .head {
        text-align:center;
    }
    .index_list.clearfix > div {
         left:0;
         position:relative;
         transition:left 1s ease 0s;
         width:1800%;
     }
    .see-all {
        float:none;
    }
    /* Scroll Up Icon */
    .scrollup {
        bottom:10px;
        right:10px;
    }

}

@media handheld,only screen and (max-width:767px) {
    .element_left {
        display:none;
    }
    .element_right {
        font-size:10px;
        padding:0 0 20px;
    }
    .form_help_button {
        top:12px;
        right:0;
        padding:4px 0;
        width:24px;
        text-align:center;
    }
    #content .form_text {
        width:83%;
    }
    #content .form_select {
        width:86%;
    }
    .form_text.form_text_search {
        margin-bottom:10px;
    }
    #error_log {
        width:90vw;
    }
    .col4.last > .box {
        margin:0 0 0 0;
    }
    .form_select_and_text_tag {
        display:none;
    }
    .form_select_and_text_select {
        margin-bottom:10px;
    }
    .form_time {
        margin:2px;
    }
    .form_date {
        width:83%;
        margin-bottom:10px !important;
    }

    .page_content .form_textarea {
        width:83.5%;
    }
    .menu_pad {
        padding:0 1em;
    }

    .form_label {
        display:block;
        padding:2px;
        text-transform:capitalize;
    }
    .form_editor_holder {
        width:308px;
        padding-right:2px;
        overflow:hidden;
    }
	.mis_modal {
    background:white none repeat scroll 0 0;
    border-radius:10px;
    height:540px;
    padding:1em;
    width:90%;
}

.mis_modal .comment_page_section {
    max-height:376px;
    overflow:auto;
}

.simplemodal-close {
    color:white;
    cursor:pointer;
    display:block;
    font-size:28px;
    position:absolute;
    right:0;
    bottom:-37px;
}

.mis_modal a {
    color:#58c;
}
#share_modal .action_feedback > .item {
    display:none;
}

#share_modal .action {
    margin:10px 0 0;
}

#share_modal_box .action {
    max-height:400px;
    overflow:auto;
    max-width:90%;

}

#share_modal {
    height:auto;
}
h9 {
    text-align:left;
	font-size:20px;
    font-weight:bold;
	text-transform:uppercase;
}	
#profile_menu {
    z-index:89;
    background:white;
  overflow:scroll;
  white-space:nowrap;
}
#mobile_profile_menu {
    z-index:89;
    background:white;
  overflow:scroll;
  white-space:nowrap;
}
.profile_menu {
    background:white;
}

ul#horizontal,#horizontal ul {
    margin:0;
    padding:0; 
}
ul#horizontal,#horizontal ul {
    -ms-overflow-style:none;  /* Internet Explorer 10+ */
    scrollbar-width:none;  /* Firefox */
}
ul#horizontal,#horizontal ul::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}


#horizontal li {
    float:left;
    padding:15px 0 0;
}

.index_list.clearfix > div {
	overflow-x:auto;
    background:white;
}
.section {
	float:left;
    background:white;
  overflow:scroll;
	overflow-x:auto;

  white-space:nowrap;
}
.section > div {
	float:left;
    background:white;
		overflow-x:auto;

  overflow:scroll;
  white-space:nowrap;
}
.index_list {
	overflow-x:auto;
    background:white;
}

.index_list ::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}
.index_list.clearfix > div ::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}

.list_nav {
 display:none;
}

.list_nav.previous {
 display:none;

}

.list_nav.next {
 display:none;

}
 .title {
 font-size:12px;
}	
.title_item {
  font-size:16px;
  font-weight:bold;
  color:#000;
}
	
.item_pad {
	padding:5px
}
.audio_row .wrap > div > div > div {
    font-size:18px;
    vertical-align:middle;
	padding-right:5px;
}
.audio_row {
    background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 15px;	
    color:#000;
    overflow:hidden;
	border-radius:10px;
	margin:10px .5;
}

.audio_row .img_scale {
    box-shadow:0 0 2px #333;
}

.audio_row span {
    color:#000000;
    font-size:15px;
}	
.index_item {
    float:left;
	background:#FFF none repeat scroll 0 0;
	box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
    color:#000;
    overflow:hidden;
	border-radius:5px;	
	margin-right:5px;
	margin-left:5px;
}
.index_itemb {
    float:left;
    width:16%;
	background:#FFF none repeat scroll 0 0;
    color:#000;
    overflow:hidden;
	border-radius:10px;	
	margin-right:10px;
	
}
.index_item_less {
    float:left;
	background:#FFF none repeat scroll 0 0;
    color:#000;
    overflow:hidden;
	border-radius:10px;	
	
}
.list_item_text_small {
  coler:#000000;
  font-size:12px;
  font-weight:bold;
  text-transform:capitalize;

} 
.title_rating_item {
  coler:#000000;
  font-size:18px;
  font-weight:bold;
  text-transform:capitalize;
  padding-bottom:10px;
  vertical-align:middle;
} 
.title_list_action {
  coler:#000000;
  font-size:12px;
  font-weight:bold;
  text-transform:capitalize;
	
} 
.title_list_item {
  coler:#000000;
  font-size:16px;
  font-weight:bold;
  text-transform:capitalize;
	
} 
.list_image {
float:left;
width:46%;
border-radius:10px;
}
.list_image_3 {
float:left;
width:35%;
border-radius:10px;
}	
.list_profile_image {
float:left;
width:22%;
}
.list_body {
float:left;
padding-left:5px;
width:51%;
}
.list_body_2 {
float:left;
width:71%;
}
.list_body_3 {
float:left;
width:75%;
}	
.list_buttons {
float:left;
width:20%;
}
.list_play {
width:15%;
}
.list_title {
	font-size:18px;
	text-transform:capitalize;
	color:#000;
}
.list_text {
	font-size:14px;
	color:#000;
}
.list_text_small {
	font-size:12px;
	color:#000;
}
.list_text_smaller {
	font-size:10px;
	color:#000;
}
.list_titleb {
	font-size:20px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_textb {
	font-size:14px;
	color:#000;
}
.list_text_smallb {
	font-size:12px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_text_smallerb {
	font-size:10px;
	font-weight:bold;
	text-transform:capitalize;
	color:#000;
}
.list_category {
	font-size:18px;
	font-weight:bold;
    text-transform:capitalize;
	color:#000;
}
.list_categoryb {
	font-size:18px;
	font-weight:bold;
    text-transform:capitalize;
	color:#000;
}
.date {
    color:#000;
	font-size:12px;
}
    .scroll_list.clearfix > div {
         left:0;
         position:relative;
         transition:left 1s ease 0s;
         width:500%;
     }	
	.index_list.clearfix > div {
	overflow-x:auto;
    background:white;
}

.scroll_list {
	overflow-x:auto;
    background:white;
}

.scroll_list ::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}
.scroll_list.clearfix > div ::webkit-scrollbar {
	height:100px;
    display:none;  /* Safari and Chrome */
}
    .follow_list.clearfix > div {
		float:left;
         left:0;
         transition:left 1s ease 0s;
         width:200%;
     }	
	.follow_list.clearfix > div {
	overflow-x:auto;
    background:white;
}

.follow_list {
	overflow-x:auto;
    background:white;
}

.follow_list ::webkit-scrollbar {
	height:auto;
    display:none;  /* Safari and Chrome */
}
.follow_list.clearfix > div ::webkit-scrollbar {
	height:auto;
    display:none;  /* Safari and Chrome */
}		
}

/* skins/mis/css/slider.css */


/*! http://responsiveslides.com v1.32 by @viljamis */

.slider_content {
    padding:0;
    background-color:#FFF;
    border:1px solid #AAA;
    margin-top:10px;  
    margin-bottom:10px;
    margin-right:10px; 
    margin-left:10px;  
    height:475px; 
}

.slider_caption_text {
    font-size:18px;
    color:#FFFFFF;
}
.slider_caption_text a {
    color:#0099ff;
    text-decoration:none;
}
.slider_caption_text a:hover {
    color:#99CC00;
    text-decoration:none;
}

.swrapper {
    margin:0 auto;
}

.rslides {
    background:#000;
    position:relative;
    list-style:none;
    overflow:hidden;
    width:100%;
    height:100%;
    margin:0 auto;
}

.rslides li {
    position:absolute;
    display:none;
    width:100%;
    height:425px;
    left:0;
    top:0;
    margin:0 auto;
}

.rslides li:first-child {
    position:relative;
    display:block;
    float:left;
    margin:0 auto;
}

.rslides img {
    display:block;
    height:auto;
    float:left;
    width:100%;
    border:0;
    margin:0 auto;
}

h3,h4,pre {
    text-align:left;
    max-width:950px;
}

.rslides {
    margin:0 auto 4px;
}

.rslides_tabs {
    list-style:none;
    background-color:#1A1A1A;
    font-size:15px;
    list-style:none;
    margin:0 auto;
    max-width:950px;
    text-align:center;
    width:100%;
}

.rslides_tabs li {
    display:inline;
    float:none;
    margin:0 auto;
}

.rslides_tabs a {
    width:auto;
    line-height:50px;
    padding:3px 5px;
    height:auto;
    background:transparent;
    display:inline;
    color:#0099ff;
}
.rslides_tabs a:hover {
    color:#99CC00;
    text-decoration:none;
}
.rslides_tabs li:first-child {
    margin-left:0;
}

.rslides_tabs .rslides_here a {
    background:#222;
    color:#FFFFFF;
    font-weight:bold;
    border:1px solid #000;
}

/* Callback example */

h3 {
    line-height:14px;
    font-size:14px;
    font-family:Tahoma,sans-serif;
    text-align:center;
    color:#222;
}

.events {
    list-style:none;
}

.callbacks_container {
    margin-bottom:10px;
    position:relative;
    float:left;
    width:100%;
}

.callbacks {
    position:relative;
    list-style:none;
    overflow:hidden;
    width:100%;
    padding:0;
    margin:0;
}

.callbacks li {
    position:absolute;
    width:100%;
    left:0;
    top:0;
}

.callbacks img {
    display:block;
    position:relative;
    z-index:1;
    height:auto;
    width:100%;
    border:0;
}

.callbacks .caption {
    display:block;
    position:absolute;
    z-index:2;
    font-size:18px;
    text-transform:capitalize;
    text-shadow:none;
    color:#FFF;
    background:#222;
    background:rgba(0,0,0,.8);
    left:0;
    right:0;
    bottom:0;
    margin:0;
    max-width:none;
}

.callbacks_nav {
    position:absolute;
    top:52%;
    left:0;
    opacity:0.7;
    z-index:3;
    text-indent:-9999px;
    overflow:hidden;
    text-decoration:none;
    height:61px;
    width:38px;
    background:transparent url("http://mediaistream.com/image/img/skin/mis/themes.gif") no-repeat left top;
    margin-top:-45px;
}

.callbacks_nav:active {
    opacity:1.0;
}

.callbacks_nav.next {
    left:auto;
    background-position:right top;
    right:0;
}



/* skins/mis/css/flexslider.css */


/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author:Tyler Smith (@mbmufffin)
 */
.slider_container {
    background-color:#FFF;
    padding:10px 10px;
    border:0;
	border-radius:10px;
	margin:1px;
}

.slider { margin:10px 0 10px!important;}
#carousel li {margin-right:5px;}
#carousel img {display:block; opacity:.5; cursor:pointer;}
#carousel img:hover {opacity:1;}
#carousel .flex-active-slide img {opacity:1; cursor:default;}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline:none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin:0; padding:0; list-style:none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin:0; padding:0;}
.flexslider .slides > li {display:none; -webkit-backface-visibility:hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides {width:100%; display:block;}
.flex-pauseplay span {text-transform:capitalize;}

/* Clearfix for the .slides element */
.slides:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
html[xmlns] .slides {display:block;}
* html .slides {height:1%;}

/* No JavaScript Fallback */
/* If you are not using another script,such as Modernizr,make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display:block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin:0 0 10px; background:#FFF; zoom:1;}
.flexslider_less {margin:0 0 10px;}
.flex-viewport {max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease;}
.loading .flex-viewport {max-height:300px;}
.flexslider .slides {zoom:1;}

/* Image Container */
.fleximage {
    padding:0;
    margin:0;
	border-radius:5px;
}
.fleximage img {border-radius:8px; }

.flex-caption-content {
    height:260px;
    overflow:hidden;
    padding:5px;
}
.flex-caption{position:relative; padding:5px; margin:0; color:#FFFFFF;}
.flex-caption h1{color:#769BEC;text-shadow:1px 1px 1px #000;}
.flex-caption .slidetext1{font-family:Tahoma,sans-serif; font-weight:400; display:block; color:#769BEC;text-shadow:1px 1px 1px #000;}
.flex-caption .slidetext2{font-family:Tahoma,sans-serif; font-weight:400; font-size:13px; margin-bottom:35px; display:block;}

.carousel li {margin-right:5px}


/* Direction Nav */
.flex-direction-nav a {width:30px; height:30px; margin:-20px 0 0; display:block; background:url(http://mediaistream.com/image/img/skin/mis/bg_direction_nav.png) no-repeat 0 0; position:absolute; top:50%; cursor:pointer; text-indent:-9999px; opacity:0; -webkit-transition:all .3s ease;}
.flex-direction-nav .flex-next {background-position:100% 0; right:-36px; }
.flex-direction-nav .flex-prev {left:-36px;}
.flexslider:hover .flex-next {opacity:0.8; right:5px;}
.flexslider:hover .flex-prev {opacity:0.8; left:5px;}
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover {opacity:1;}
.flex-direction-nav .disabled {opacity:.3!important; filter:alpha(opacity=30); cursor:default;}

/* Control Nav */
.flex-control-nav {width:100%; position:absolute; bottom:-40px; text-align:center;}
.flex-control-nav li {margin:0 6px; display:inline-block; zoom:1; *display:inline;}
.flex-control-paging li a {width:11px; height:11px; display:block; background:#666; background:rgba(0,0,0,0.5); cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; box-shadow:inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background:#333; background:rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background:#000; background:rgba(0,0,0,0.9); cursor:default; }

.flex-control-thumbs {margin:5px 0 0; position:static; overflow:hidden;}
.flex-control-thumbs li {width:25%; float:left; margin:0;}
.flex-control-thumbs img {width:100%; display:block; opacity:.7; cursor:pointer;}
.flex-control-thumbs img:hover {opacity:1;}
.flex-control-thumbs .active {opacity:1; cursor:default;}

/**** Songs ********/
.SliderSongs {
    max-width:825px;
    background:#FFF;
    box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
    color:#000;
    padding:1px;
    margin:5px 1px 10px 1px;
	border-radius:10px;
}
.SliderSongs:hover {
    background:#E4EAF4;
    box-shadow:rgba(0,0,0,0.35) 0px 5px 5px;
	border-radius:10px;
}
.SliderSongs a{
    color:#000;
}
.SliderSongs a:hover{
    color:#000;
}


/* skins/mis/css/form_element.css */


.form_radio {
}
/* @title Radio Option */
/* @help Format for Radio form field options */
.form_radio_option {
    display:inline;
    padding-right:32px;
}
/* @title Textarea */
/* @help Format for Textarea form input fields */
.form_textarea {
    color:#666;
    font-size:11px;
    width:75%;
    height:100px;
    padding:5px; 
    margin:0 2px; 
    background-color:#FFF;
    border:solid 1px #DEDEDE;
}
/* @title Textarea Focus */
/* @help Class applied to a textarea field when the field is selected for input. */
textarea:focus {
    border:solid 1px #DEDEDE;
    background-color:#F2F2F2;
    color:#222;
}

/* @title Checkbox */
/* @help Class applied to a checkbox form field */
.form_checkbox {
    font-size:16px;
    margin:8px 3px 3px 3px;
}

.form_age_range{
    width:auto;
}


/* skins/mis/css/form_input.css */


/* @title Text Input */
/* @help Format for Text Input form elements */
.form_text {
    color:#000;
    font-size:12px;
    width:75%;
    padding:5px; 
    margin:0 2px; 
    background-color:#FFF;
    border:1px solid #000;
}
/* @title Text Input */
/* @help Format for Text Input form elements */
.form_range {
    color:#000000;
    font-size:14px;
    padding:5px; 
    margin:0 2px; 
    background-color:#FFFFFF;
    border:0;
    vertical-align:middle;
}

/* @title Date Input */
/* @help Format for Date Input form elements */
.form_date {
    color:#666;
    font-size:12px;
    width:240px;
    padding:5px; 
    margin:0 2px; 
    background-color:#FFF;
    border:1px solid #DEDEDE;
    vertical-align:middle;
}
/* @title Input Focus */
/* @help Class applied to a text input field when the field is selected for input. */
input:focus {
    border:1px solid #DEDEDE;
    background-color:#F2F2F2;
    color:#222;
}
.form_text[disabled="disabled"],.form_text[readonly="readonly"] {
    background:#F2F2F2;
    color:#000;
    border:solid 1px #000;
}
.form_text_search {
    width:45%;
}

.live_search_text {
    font-style:italic;
    height:20px;
}


/* skins/mis/css/form_select.css */


/* @title Select */
/* @help Format for the Select form field. */
.form_select {
    vertical-align:middle;
    color:#666;
    font-size:14px;
    width:76%;
    padding:3px; 
    margin:1px; 
    background-color:#FFF;
    border:1px solid #DEDEDE;
}
/* @title Select Multiple */
/* @help Format for the Select form field when multiple items can be selected. */
.form_select_multiple {
}

.form_select_and_text_select {
    width:31%;
    margin-right:20px;
}
.form_select_and_text_text {
    width:30%;
    margin-left:6px;
}

/* @title Select Jumper */
/* @help Format for the Select Jumper field used in Page Headers */
.form_select_item_jumper {
    width:30%;
}

.form_admin_search {
    width:30%;
    font-style:italic;
    color:#666;
}

/* @title Select Focus */
/* @help Class applied to a select field when the field is selected. */
select:focus {
    background-color:#F2F2F2;
    color:#222;
    border:1px solid #DEDEDE;
}

/* @title Time Input */
/* @help Class applied to the Time Select Field */
.form_time {
    margin:0;
    margin-left:20px;
    width:140px;
}

/* skins/mis/css/form_layout.css */


/* remove Firefox's dotted outlines... */
:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
form {
    margin-bottom:0;
}
.element {
}
/* @title Element Left */
/* @help This is the left side of pages and forms where the label and sub-label will appear */
.element_left {
    background-color:transparent;
    text-align:right;
    text-transform:capitalize;
    padding:8px;
    width:25%;
}
/* @title Element Right */
/* @help This is the right side of pages and forms where the form elements appear */
.element_right {
    background-color:transparent;
    padding:6px;
    width:75%;
}
/* @title Element Right URLs */
/* @help This is the color of URLs that might appear on the right side of the form */
.element_right a {
    color:#0099FF;
}

.form_input_left {
    height:30px;
}
.form_input_right {
}
.sublabel {
    font-size:12px;
    text-transform:none;
}

.form_help_button {
    float:right;
}
/* @title Form Help */
/* @help This is for the help sections for the forms */
.form_help {
    background-color:transparent;
    padding:9px;
}
/* @title Form Help Drop */
/* @help This is for the help drop down section for the forms */
.form_help_drop {
    padding-top:8px;
    background-color:#F0F0F0;
    width:100%;
    box-shadow:inset 0 3px 5px #000;
}
/* @title Form Help Drop Left */
/* @help This is for the left side help drop down section for the forms */
.form_help_drop_left {
    width:95%;
    padding:10px 20px 20px 20px;
    font-size:14px;
    text-align:left;
    text-transform:none;
}
/* @title Form Help Drop Right */
/* @help This is for the right side help drop down section for the forms */
.form_help_drop_right {
    width:5%;
    padding:10px 20px 20px 20px;
}
.form_help_default {
    display:inline-block;
    margin-top:12px;
}
/* @title Form Help Small */
/* @help This is for the small help text */
.form_help_small {
    display:inline-block;
    font-size:11px;
    margin-top:12px;
    color:#222;
    font-style:italic;
}

.form_submit_box {
    background-color:transparent;
    padding-top:12px;
}
/* @title Form Submit */
/* @help This is for the form submit section */
.form_submit_section {
    background-color:#FFF;
	border:0;
    padding:10px;
    margin:6px 6px 8px 6px; 
    text-align:center;
}
#form_submit_indicator {
    display:none;
    margin-right:10px;
    vertical-align:middle;
}

.activity-indicator {
    animation:spin 1.5s linear infinite !important;
    border-style:dotted !important;
    border-color:#222222 !important;
}


/* skins/mis/css/form_button.css */


.form_button {
    color:#FFF;
    text-decoration:none;
    text-transform:capitalize;
    font:bold 11px Verdana,sans-serif;
    padding:5px 5px 5px 5px !important;
    margin:1px 1px 1px 1px;
    background:#000;
    border:solid 1px #DEDEDE;
	border-radius:10px;
    cursor:pointer;
}
input.form_button:focus {
    border:1px solid #DEDEDE;
    background-color:#FFF;
    color:#666;
}
.form_button:hover {
    background-color:#FFF;
    color:#000;
}
.form_button_disabled {
    background:#F2F2F2;
    color:#999;
    border:solid 1px #DEDEDE;
}
.form_button_disabled:hover {
    color:#666;
}
.form_button a,.form_button_anchor a,.form_button_anchor:hover a {
    text-decoration:none;
}

.upload_button {
    margin:2px -2px 2px 2px !important;
    min-height:initial;
}

.follow_button {
    color:#0099FF;
    text-decoration:none;
    text-transform:capitalize;
    font-weight:bold;
    font-size:12px;
    line-height:24px;
    height:24px;
    padding:0 6px;
    margin:0 2px;
    vertical-align:middle;
    border:solid 1px #DEDEDE;
}
.follow {
    cursor:pointer;
    color:#0099FF;
    background:#F2F2F2;
    border:1px solid #DEDEDE;
}
.follow:hover {
    cursor:pointer;
    color:#FF6633;
    background:#FFF;
    border:1px solid #DEDEDE;
}
.following {
    cursor:pointer;
    color:#99CC00;
    background:#FFF;
    border:1px solid #DEDEDE;
}
.following:hover {
    cursor:pointer;
    color:#0099FF;
    background:#F2F2F2;
    border:1px solid #DEDEDE;
}
.follow_pending {
    background:#F2F2F2;
    color:#FF6633;
    border:1px solid #DEDEDE;
}
#follow_indicator {
    display:none;
}

.sprite_icon {
	height:15px;
	width:15px;
    display:inline-block;
    cursor:pointer;
    margin:0;
}
.sprite_icon:hover {

}
.sprite_icon_hilighted {
    background:#99CC00;
}

.form_icon_button {
    height:18px;
    vertical-align:top;
    padding:2px 2px 6px 2px !important;
    margin-top:1px !important;
    border:solid 1px #DEDEDE;
}

.form_button_icon {
    font-size:18px;
}


/* skins/mis/css/form_notice.css */


.page_notice_drop {
    background:#FFF;
}
/* @title Form Message Box */
/* @help Form messages will be displayed withing the Form Message box */
.page_notice {
    text-align:center;
    padding:10px;
    margin:12px;
    font-size:14px;
}
/* @title Form Message Text */
/* @help Formats the message text as shown in the Form Message Box */
.form_notice {
    text-align:center;
    padding:10px;
    display:none;
}

/* @title Form Notice */
/* @help Background color of Form Notice messages */
.notice {
    background-color:#EEE;
    color:#222;
    border:1px solid #DEDEDE;
}

/* @title Form Warning */
/* @help Background color of Form Warning messages */
.warning {
    background-color:#BA4B0D;
    color:#000;
    border-radius:4px;
}

/* @title Form Error */
/* @help Background color of Form Error messages */
.error {
    background-color:#9B1C26;
    color:#FFFFFF;
    border-radius:4px;
}

/* @title Form Success */
/* @help Background color of Form Success messages */
.success {
    background-color:#006600;
    color:#CCC;
    border-radius:4px;
}

/* @title Comment Success */
/* @help Background color of Comment Success messages */
.comment_success {
    background-color:#006600;
    color:#CCC;
    padding:6px;
    padding-left:12px;
    border-radius:5px;
    border:1px solid #ccc;
    margin:12px;
}

/* @title Comment Error */
/* @help Background color of Comment Error messages */
.comment_notice {
    background-color:#9B1C26;
    color:#FFFFFF;
    padding:6px;
    padding-left:12px;
    border-radius:5px;
    border:1px solid #ccc;
    margin-bottom:6px;
}
/* @title Field Error */
/* @help Background color of a form field if the contents are in error */
.field-hilight {
    background-color:rgba(255,187,0,0.25);
    color:#222;
}
.qq-upload-list li.qq-upload-success {
    margin:6px 2px;
    background-color:#006600;
    color:#FFFFFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
.qq-upload-list li.qq-upload-fail {
    margin:6px 2px;
    background-color:#CC0000;
    color:#FFFFFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}


/* skins/mis/css/playlist.css */


/* Jamroom 5 Playlist Module CSS */

.playlist_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#FFF;
    border:4px solid #AAA;
    border-radius:0;
    padding:12px;
    white-space:nowrap;
    display:none;
    z-index:10000;
    overflow:visible;
    box-shadow:none;
    color:#000;
}

#playlist_message {
    padding-left:5px;
    font-size:12px
}
.playlist_name {
    padding:5px;
}
.playlist_name a {
    color:#105CBF;
    text-decoration:underline;
}
.playlist_count {
    white-space:nowrap;
    font-size:12px
}
.playlist_button {
    width:70px;
}
.playlist_success {
    border-radius:5px;
    background-color:#006600;
    color:#FFF;
}
.playlist_error {
    border-radius:5px;
    background-color:#CC0000;
    color:#FFF;
}

@media handheld,only screen and (max-width:767px) {
    .playlist_box {
        position:absolute;
        width:80%;
        right:0;
    }
    .playlist_button {
        width:50px;
    }
    .playlist_name {
        font-size:12px;
    }
}



/* skins/mis/css/doc.css */


/*
 * Jamroom 5 ProJam Light CSS
 * Copyright 2003-2011 by Talldude Networks,LLC.
 * @author Brian Johnson - brian@talldude.net
 */

/* @title Item Box */
/* @help This is the item container */
.doc_item {
    background-color:#F0F0F0;
    padding:12px;
    margin:12px auto;
    border-radius:0;
    border:0;
    color:#222;
}
/* @title New Section */
/* @help This is the popup for a new section */
.new_section_box {
    position:inherit;
    width:400px;
    text-align:left;
    background-color:#FFF;
    color:#222;
    border:2px solid #AAA;
    border-radius:0;
    padding:12px;
    display:none;
    z-index:10000;
    overflow:visible;
}
/* @title Table Of Content */
/* @help This is the table of content section */
.doc_toc {
    background:#FFF;
    margin:12px;
    padding:12px;
    border:0;
    border-radius:0;
    color:#000;
}
/* @title Table Of Content Link */
/* @help This is the table of content link text */
.doc_toc a {
    color:#105CBF;
    text-decoration:none;
    cursor:pointer;
}
.doc_toc a:hover {
    color:#99CC00;
    text-decoration:none;
}
/* @title Section Text */
/* @help This is the main text */
.section_text {
    position:relative;
    clear:both;
    overflow:visible;
    padding:12px;
    margin-bottom:12px;
    color:#222;
}

/* @title Warning Section */
/* @help This is the warning section */
.section_warning {
    background:#BA4B0D;
    border:0;
    border-radius:0;
    margin:12px;
    color:#000;
}

/* @title Hint Section */
/* @help This is the hint section */
.section_hint {
    background:#333;
    border:0;
    border-radius:0;
    margin:12px;
    color:#DDD;
}
/* @title File Section */
/* @help This is the file section */
.section_file {
    background-color:#DDD;
    border:1px solid #333;
    border-radius:0;
    margin-bottom:12px;
    color:#000;
}

/* @title Function Section */
/* @help This is the function section */
.section_function {
    background:#DDD;
    margin-bottom:20px;
    display:table;
    width:100%;
    font-size:14px;
    border:1px solid #333;
    border-radius:0;
    color:#000;
}
/* @title Header Cell */
/* @help This is the header cell section */
.section_header_cell {
    background:#333;
    display:table-cell;
    padding:12px;
    color:#CCC;
}
/* @title Function Title */
/* @help This is the function title section */
.section_function_title {
    background:#FFF;
    padding:12px;
    font-family:monospace;
    border:1px solid #333;
    border-radius:0;
    color:#222;
}
.new_section_button {
    text-align:center;
    width:100%;
    opacity:0.2;
    text-transform:capitalize;
    padding:3px 0;
}

.new_section_button:hover {
    opacity:1;
}
.new_section_button a:hover {
    text-decoration:none;
}



/* skins/mis/css/content/global.css */



.upimg_rslides_tabs {background-color:#FFFFFF !important;}
.upimg_rslides_tabs .upimg_rslides_here a {background-color:#FFFFFF !important;}
.callbacks .caption {border-top-color:#FFFFFF !important;color:#FFFFFF !important;}