body{
background-color:#E5E5E5;
font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:14px;
color:#333131;
padding:0px;
margin:0 auto;
max-width:900px;
}
h1{
font-size:30px;
}
h2{
font-size:20px;
}
a{
color:#333131;
text-decoration:none;
}
a:hover{
color:#228B22;
text-decoration:none;
}

input[type=search]{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:100%;
background-color:#fff;
border:solid 1px #d2d6de;
padding:9px 10px 9px 32px;
width:80%;
border-radius:4px;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
}

input[type=search]:focus{
width:80%;
background-color:#ffffff;
border-color:#d2d6de;
-webkit-box-shadow:0 0 0px rgba(109,207,246,.5);
-moz-box-shadow:0 0 0px rgba(109,207,246,.5);
box-shadow:0 0 0px rgba(109,207,246,.5);
}

input:-moz-placeholder{
color:#999;
}

input:-webkit-input-placeholder{
color:#999;
}

input{
display:inline-block;
padding:6px;
text-decoration:none;
max-width:90%;
}

textarea{
display:inline-block;
padding:8px 8px;
border:1px solid #333131;
background-color:#fff;
width:300px;
height:60px;
color:#999;
}

input[type="text"]{
display:inline-block;
padding:8px 8px;
border:1px solid #333131;
background-color:#fff;
width:60%;
color:#999;
}


input[type="submit"]{
display:inline-block;
background-color:#333131;
border:1px solid #333131;
border-radius:0px 3px 3px 0px;
padding:8px 8px;
color:#fff;
cursor:pointer;
}


input[type="submit"]:hover{
color:#fff;
background-color:#313033;
border:1px solid #313033;
cursor:pointer;
}

img{
border:none;
margin:0.5px;
vertical-align:middle;
}


p, li{
margin:0 0 10px;
}


h1, h2, h3, p{
margin:0 0 1px 0;
padding:0;
}


ul, ol{
margin-top:0;
margin-bottom:5px;
margin-left:10px;
padding:0;
}


hr{
color:#999999;
height:1px;
}
table{
padding:2px;
}

#search{
background-color:#fff;
text-align:center;
padding:10px;
}

#head{
background-color:#fff;
color:#000;
border-bottom:5px solid #333131;
display:block;
padding:14px 10px;
font-size:10px;
}


#head a{
color:#262525;
display:block;
}


#down-link a{
margin:0px;
padding:8px 9px;
font-size:12px;
color:#333131;
background-color:#fff;
border:1px solid #333131;
display:inline-block;
border-radius:8px;
}


#down-link a:hover{
color:#fff;
background-color:#228B22;
}


#navigation-top{
display:none;
}


#footer{
background-color:#333131;
color:#F0F8FF;
padding:35px 20px;
border-top:3px solid #F0F8FF;
}


#footer a{
font-weight:bold;
color:#F0F8FF;
}


#footer a:hover{
text-decoration:underline;
}

.notification{
background-color:#FFFDC2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:10px 0;padding:10px;
}

.wrapper{
display:block;
background-color:#fff;
border:1px solid #fff;
}

.title-menu{
font-size:16px;
border-bottom:4px solid #333131;
padding:15px 8px;
background-color:#fff;
margin:15px 4px 5px;
font-weight:bold;
}

.title-blue{
font-size:16px;
border-top:3px solid #333131;
border-radius:3px;
border-bottom:1px solid #333131;
border-right:1px solid #333131;
border-left:1px solid #333131;
padding:8px;
background-color:#fff;
margin:4px 4px 0px 4px;
}

.menulist{
font-size:14px;
border:1px solid #f4f4f4;
padding:5px;
background-color:#fff;
margin:2px 4px;
border-radius:0px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
}

.menulist img{
background-color:#FFFFFF;
border:1px solid #CCCCCC;
padding:2px;
height:45px;
width:45px;
padding:3px;
border-radius:5px;
border:1px solid #e5e5e5;
}

.content{
font-size:14px;
border:1px solid #f4f4f4;
padding:5px;
background-color:#fff;
margin:2px 4px;
border-radius:0px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
}

.content img{
background-color:#FFFFFF;
border:1px solid #CCCCCC;
padding:2px;
height:100px;
width:100px;
padding:3px;
border-radius:5px;
border:1px solid #e5e5e5;
}

.informasi{
background-color:#DC143C;
color:#fff;
border:1px solid #00acd6;
padding:10px;
margin:4px;
font-size:13px;
}

.pageku{
background-color:#ffffff;
margin:5px 5px 10px;
padding:10px;
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.1);
}

.breadcrumb{
font-size:12px;
}

.btn-download{
background-color:#f4f4f4;
color:#666;
text-align:center;
border:1px solid #ddd;
display:inline-block;
border-radius:3px;
min-width:78px;
position:relative;
padding:10px 4px;
margin:2px 1px;
font-size:12px;
}

.btn-download:hover{
background-color:#f4f4f4;
color:#444;
border-color:#aaa;
}

.btn-download:active,.btn-download:focus{
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);
-moz-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);
}

.btn-download.badge{
position:absolute;
top:-3px;
right:-10px;
font-size:10px;
font-weight:400;
}

/* Track Page Specific Styles */
.track-page-wrapper {
    display: block;
    background-color: #fff;
    border: 1px solid #fff;
}

.track-main-content {
    margin-bottom: 15px;
}

.track-sidebar {
    margin-bottom: 15px;
}

/* Desktop Layout - Side by Side */
@media screen and (min-width: 768px) {
    .track-page-wrapper {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    
    .track-main-content {
        flex: 1;
        width: 65%;
        margin-bottom: 0;
    }
    
    .track-sidebar {
        width: 35%;
        flex-shrink: 0;
        margin-bottom: 0;
    }
}

/* Track Content Styles */
.thumb2 {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 5px;
    height: 200px;
    width: 200px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    object-fit: cover;
}

.track-content table {
    width: 100%;
    margin: 15px 0;
    border-collapse: collapse;
}

.track-content table tr td {
    padding: 8px 5px;
    border-bottom: 1px solid #f0f0f0;
}

.track-content table tr:last-child td {
    border-bottom: none;
}

.track-content textarea {
    width: 90%;
    height: 60px;
    margin: 5px 0;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
}

/* Sidebar Specific Styles */
.track-sidebar .menulist {
    margin: 8px 0;
}

.track-sidebar .menulist img {
    height: 40px;
    width: 40px;
}

.track-sidebar .btn-load {
    margin-top: 15px;
    display: block;
    text-align: center;
}

/* Existing responsive styles */
@media screen and (min-width:640px){
.menu-home{display:inline-block;width:65%;}
.menu-sidebar{display:inline-block;width:35%;vertical-align:top;}
.title-menu{margin:5px 4px 5px;}
.wrapper{padding:0px 5px 10px;}
}

.list-group{
margin:5px;
}

.list-group-item{
position:relative;
display:block;
padding:10px 15px;
margin-bottom:-1px;
background-color:#fff;
border:1px solid #ddd;
}

.list-group-item:first-child{
border-top-left-radius:4px;
border-top-right-radius:4px;
}

.list-group-item:last-child{
margin-bottom:0;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}

a.list-group-item,button.list-group-item{
color:#333131;
}

a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{
color:#333;
}

a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{
color:#228B22;
text-decoration:none;
background-color:#f5f5f5;
}

.btn-load{
margin:8px 5px 0px;
display:block;
background-color:#fff;
border:1px solid #ddd;
padding:8px 14px;
}

.btn-load:hover{
background-color:#eee;
border:1px solid #ddd;
}

.notifin{
color:#F0F8FF;
background-color:#333131;
border:1px solid #333131;
border-radius:3px;
padding:10px;
margin:4px;
font-size:13px;
}

.btn-cloud{
margin:5px;
padding:4px 20px;
font-size:13px;
color:#333131;
background-color:#fff;
border:1px solid #333131;
display:inline-block;
border-radius:8px;
}

.btn-cloud:hover{
color:#fff;
background-color:#228B22;
}
.bubble 
{
position: relative;
width: auto;
height: auto;
padding: 7px;
margin: 5px;
color: #000;
background: #fff;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
border: #000 solid 1px;
}

.bubble:after 
{
content: "";
position: absolute;
border-style: solid;
border-width: 0 6px 5px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -4px;
left: 11px;
}

.bubble:before 
{
content: "";
position: absolute;
border-style: solid;
border-width: 0 7px 6px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
top: -6px;
left: 10px;
}
amp-img {
    background-color: gray;
    border: 1px solid black;
}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
    .track-main-content,
    .track-sidebar {
        width: 100% !important;
    }
    
    input[type="text"] {
        width: 70% !important;
    }
    
    .menulist td:first-child {
        width: 20% !important;
    }
    
    .content textarea {
        width: 95% !important;
    }
}
/* Album Related Styles */
.album-info {
    background: linear-gradient(135deg, #f9f9f9 0%, #e9e9e9 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.album-info strong {
    color: #333131;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.album-info small {
    color: #666;
    font-size: 12px;
}

/* Separator between sections */
.track-sidebar div[style*="border-top"] {
    margin: 20px 0;
    border-top: 2px solid #333131 !important;
}

/* Ensure sidebar doesn't get too crowded */
.track-sidebar .menulist {
    margin: 6px 0;
}

.track-sidebar .menulist img {
    height: 35px;
    width: 35px;
}

.track-sidebar .btn-load {
    margin: 10px 0;
    padding: 6px 12px;
    font-size: 12px;
}

/* Mobile optimization for sidebar */
@media screen and (max-width: 767px) {
    .album-info {
        padding: 10px;
        margin: 10px 0;
    }
    
    .track-sidebar .menulist {
        margin: 8px 0;
    }
}

/* Hover effects for better UX */
.album-info:hover {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    transition: background 0.3s ease;
}
/* Search Page Specific Styles */
.search-results .menulist {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.search-results .menulist:hover {
    border-left-color: #228B22;
    background-color: #f9f9f9;
    transform: translateX(5px);
}

.results-info {
    border: 1px solid #d4edda;
    color: #155724;
}

.pagination a:hover {
    background-color: #333131 !important;
    color: white !important;
}

.no-results {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
}

.empty-search {
    background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
}

/* Responsive Search Form */
@media screen and (max-width: 767px) {
    input[type="text"] {
        width: 70% !important;
    }
    
    .pagination {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .pagination a, 
    .pagination span {
        margin: 2px !important;
        padding: 6px 8px !important;
        font-size: 12px;
    }
}

/* Search Suggestions */
.empty-search ul li a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.empty-search ul li a:hover {
    color: #333131 !important;
    text-decoration: underline;
}