/* =========================================================
   DJDOKAN.COM
   CLASSIC DJ MUSIC DOWNLOAD THEME
   Screenshot Based CSS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Amaranth&family=Josefin+Sans:ital,wght@0,400;1,300&display=swap');


/* =========================================================
   BASIC
========================================================= */

html,
body{
    margin:0;
    padding:0;
    background:#fff;
    color:#000;
    font-family:'Josefin Sans',Arial,sans-serif;
    font-size:14px;
    line-height:20px;
}

body *{
    box-sizing:border-box;
}

a,
a:link,
a:visited{
    color:#0000cc;
    text-decoration:none;
    outline:none;
}

a:hover{
    color:#ff0000;
    text-decoration:underline;
}

a img,
:link img,
:visited img{
    border:none;
}

b,
strong{
    font-weight:700;
}

img{
    vertical-align:middle;
    max-width:100%;
}

input,
select{
    padding:3px;
    font-size:14px;
}

textarea{
    font-size:14px;
}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
footer{
    margin:0;
    padding:4px 6px;

    background:#3518c9;
    color:#fff;

    text-align:center;

    font-size:14px;
    font-weight:700;
    line-height:20px;

    border-top:1px solid #28109e;
    border-bottom:1px solid #28109e;

    box-shadow:none;
}

h1 a,
h2 a,
h3 a,
footer a{
    color:#fff;
    text-decoration:none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
footer a:hover{
    color:#fff;
    text-decoration:none;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    background:#ff0000;
    color:#fff;
    padding:4px;
    margin:0;
    text-align:center;
    border:none;
}

.logo a{
    display:block;
    background:#ff0000;
    color:#fff;
    padding:3px;
    font-weight:bold;
}


/* =========================================================
   TOP NAVIGATION
========================================================= */

.navbar{
    background:#fff;
    display:block;
    padding:4px 0 2px;
    margin:0;
    text-align:center;
    border:none;
}

.navbar a{
    display:inline-block;

    color:#000;
    font-weight:bold;

    padding:2px 8px;
    margin:0 2px;

    font-size:12px;
    line-height:18px;

    border-radius:5px;

    background:#dfeaff;

    text-decoration:none;
}

.navbar a:nth-child(1){
    background:linear-gradient(to right,#ffe0e0,#dce8ff);
}

.navbar a:nth-child(2){
    background:#c9f5d0;
}

.navbar a:nth-child(3){
    background:#c8eaff;
}

.navbar a:nth-child(4){
    background:#ffe1bd;
}

.navbar a:hover{
    color:#000;
    text-decoration:none;
    opacity:.85;
}


/* =========================================================
   TOP MESSAGE / NOTICE
========================================================= */

.more{
    background:#fff;
    margin:0;
    padding:0 5px 3px;
    text-align:center;
    font-weight:bold;
    border:none;
}

.more a{
    display:inline-block;

    background:#3518c9;
    color:#fff;

    padding:1px 10px;

    border-radius:12px;

    font-size:14px;
    line-height:20px;

    box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.more a:hover{
    background:#28109e;
    color:#fff;
    text-decoration:none;
}


/* =========================================================
   TICKER
========================================================= */

.ticker-wrap{
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    height:29px;

    padding:0;
    margin:0;

    overflow:hidden;

    background:#3518c9;
    border:none;
}

.ticker-wrap::before{
    display:none;
}

.live-badge{
    display:none;
}

.live-dot{
    display:none;
}

.ticker-content{
    flex:1;
    height:29px;
    overflow:hidden;

    display:block;

    text-align:center;
}

.ticker-track{
    display:inline-block;

    white-space:nowrap;

    color:#fff;

    font-size:13px;
    font-weight:bold;

    line-height:29px;

    padding-left:100%;

    animation:scroll-left 25s linear infinite;
}

@keyframes scroll-left{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-100%);
    }
}


/* =========================================================
   ADS
========================================================= */

.ads{
    background:#fff;

    margin:4px 0;
    padding:3px;

    border-radius:0;

    text-align:center;
}


/* =========================================================
   SEARCH
   Screenshot style / Original rounded design
========================================================= */

.search{
    background:#f8f8f8;

    text-align:center;

    border-bottom:1px solid #ddd;

    padding:10px;

    margin:0 0 7px;
}

#searchtext{
    overflow:hidden;
}

.search input[type="text"]{
    display:inline-block;

    border:1px solid #3616c7;

    border-radius:33px 0 0 33px;

    padding:7px 8px;

    background:#fff;
    color:#999;

    width:auto;

    -webkit-box-shadow:
        inset 1px 1px 5px -2px rgba(0,0,0,.43);

    -moz-box-shadow:
        inset 1px 1px 5px -2px rgba(0,0,0,.43);

    box-shadow:
        inset 1px 1px 5px -2px rgba(0,0,0,.43);

    outline:none;
}

.search input[type="text"]:focus{
    border:1px solid #3616c7;
    color:#999;
    outline:none;
}

.search input[type="submit"]{
    display:inline-block;

    background:#3616c7;

    border:1px solid #3616c7;

    border-radius:0 33px 33px 0;

    padding:7px 9px;

    color:#fff;

    cursor:pointer;

    -webkit-box-shadow:inset 0 -2px #3616c7;
    box-shadow:inset 0 -2px #3616c7;
}

.search input[type="submit"]:hover{
    color:#fff;

    background:#069;

    border:1px solid #069;

    border-radius:0 33px 33px 0;

    cursor:pointer;
}


/* =========================================================
   OLD SEARCH BOX
========================================================= */

.SearchBox{
    background:#eee;
    text-align:center;
    padding:5px;
}

.SearchBox input{
    border:1px solid #000;
    padding:8px;
    width:45%;
}

.SearchBox input:focus{
    border:1px solid red;
    color:red;
    font-weight:700;
    outline:none;
}

.SearchBox input[type="submit"]{
    background-color:#ed461c;
    color:#fff;

    border:1px solid #ff6a00;
    border-radius:4px;

    padding:7px;
    margin-left:10px;

    font-weight:700;
    width:80px;

    cursor:pointer;
}

.SearchBox input[type="submit"]:hover{
    background:#ff6a00;
    color:#000;
    border:1px solid #000;
}

.SearchBtn{
    border:1px solid #000;
    background-color:#ed461c;
    color:#fff;
    border:none;
    border-radius:4px;

    padding:7px;
    margin-left:10px;

    font-weight:500;
    width:55px;

    cursor:pointer;
}


/* =========================================================
   CENTER
========================================================= */

.center{
    margin:4px;
    text-align:center;
}


/* =========================================================
   TOP DOWNLOADS / SORT
========================================================= */

.sort{
    background:#5a5a5a;

    color:#fff;

    text-align:center;

    padding:4px 3px;
    margin:0;

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

    line-height:20px;
}

.sort span{
    display:block;

    padding:0;
    margin:0;

    background:none;
    border:none;

    color:#fff;
    font-weight:bold;
}

.sort a{
    display:inline;

    background:none;
    color:#fff;

    border:none;

    padding:0 7px;
    margin:0;

    font-weight:bold;
}

.sort a:hover{
    background:none;
    color:#fff;
    text-decoration:underline;
}


/* =========================================================
   CATEGORY LIST
   Screenshot Based
========================================================= */

.catRow{
    position:relative;

    background:#fff;

    border-bottom:1px solid #d6d6d6;

    min-height:35px;

    padding:0;

    font-weight:700;

    transition:background .1s ease;
}

.catRow:hover{
    background:#f5f5f5;
}

.catRow a{
    display:block;

    position:relative;

    min-height:35px;

    padding:7px 38px 7px 8px;

    color:#0000cc;

    font-weight:700;

    font-size:13px;

    line-height:20px;

    text-decoration:none;

    overflow:hidden;
}

.catRow a:hover{
    background:#f5f5f5;
    color:#0000cc;
    text-decoration:none;
}


/* =========================================================
   CATEGORY RIGHT GRAY ARROW
========================================================= */

.catRow a:after{
    content:"›";

    position:absolute;

    right:8px;
    top:8px;

    width:17px;
    height:17px;

    background:#888;

    color:#fff;

    border-radius:3px;

    text-align:center;

    line-height:15px;

    font-family:Arial,sans-serif;

    font-size:20px;

    font-weight:bold;
}

.catRow a:hover:after{
    background:#666;
}


/* =========================================================
   NORMAL ROW
========================================================= */

.row{
    position:relative;

    background:#fff;

    border-bottom:1px solid #ddd;

    min-height:35px;

    font-weight:700;
}

.row:nth-of-type(even){
    background:#fff;
}

.row:hover{
    background:#f7f7f7;
}


/* =========================================================
   ODD
========================================================= */

.odd{
    background:#fff;

    border-bottom:1px solid #ddd;

    min-height:35px;

    font-weight:700;
}

.odd:nth-of-type(even){
    background:#fff;
    color:#000;
}

.odd:hover{
    background:#f7f7f7;
}


/* =========================================================
   FILE / FOLDER LIST
========================================================= */

.fl{
    margin:0;
    padding:0;
}

.fl span{
    font-weight:400;
}

.fl .ar{
    color:#d2691e;
    font-style:italic;
}

.fl a{
    display:block;

    padding:7px;

    color:#0000cc;

    border-bottom:1px solid #ddd;
}

.fl a:hover{
    background:#f7f7f7;
    color:#0000cc;
    text-decoration:none;
}

.fl a img{
    border:1px solid #aaa;

    border-radius:3px;

    padding:0;

    margin-right:5px;
}

.fl a div div{
    vertical-align:middle;
    display:table-cell;
}


/* =========================================================
   FEATURED REMIXER / FILE LIST
========================================================= */

.updates{
    background:#fff;

    padding:0;

    border:none;

    border-radius:0;

    box-shadow:none;
}

.updates div{
    border-bottom:1px solid #ddd;

    padding:6px;

    margin:0;

    min-height:72px;

    background:#fff;
}

.updates div:hover{
    background:#f7f7f7;
}

.updates div.about{
    border-bottom:none;

    padding:8px;

    min-height:125px;
}

.updates div h3{
    background:none;

    color:#000;

    text-align:left;

    padding:0;

    font-size:17px;

    font-weight:bold;

    border:none;

    box-shadow:none;
}

.updates div img.about{
    width:125px;
    height:125px;

    margin-right:8px;

    padding:2px;

    border:1px solid #000;

    border-radius:12px;

    float:left;

    margin-top:-3px;
}


/* =========================================================
   IMPORTANT:
   UPDATES / TRENDING ROWS MUST NOT GET CATEGORY ARROWS
========================================================= */

.updates a:after,
.updates li:after,
.updates .row a:after,
.updates .item a:after,
.updates .catRow a:after{
    content:none !important;

    display:none !important;

    width:0 !important;
    height:0 !important;

    background:none !important;
}


/* =========================================================
   FILE THUMBNAILS
========================================================= */

.fl img{
    vertical-align:middle;
}


/* =========================================================
   PATH / BREADCRUMB
========================================================= */

.path{
    background:#dedede;

    padding:4px 7px;

    margin:0;

    font-weight:bold;

    border:1px solid #ccc;

    border-radius:2px;
}

.path a{
    color:#0000cc;
}


/* =========================================================
   TAG / DESCRIPTION
========================================================= */

.tag,
.description{
    background:#fff;

    padding:7px;

    border:1px solid #ddd;

    line-height:1.7;

    margin:1px 0;

    font-size:12px;

    text-align:justify;
}

.links{
    color:#000;
}

.line{
    border-bottom:1px solid #ddd;

    padding:3px;

    margin:0;
}

.gap{
    margin:5px;
}


/* =========================================================
   AZ LIST
========================================================= */

.az{
    text-align:center;

    padding:3px;

    background:#dde7f1;
}

.az a{
    padding:4px 7px;

    margin:2px;

    display:inline-block;

    background:#fff;

    border:1px solid #ccc;

    border-radius:3px;

    text-decoration:none;

    font-weight:700;

    color:#0000cc;
}

.az a:hover{
    background:#3518c9;
    color:#fff;
    text-decoration:none;
}


/* =========================================================
   PAGINATION
========================================================= */

.pages{
    background:#f8f9fa;

    margin:0;

    padding:5px;

    text-align:center;

    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

.page_btn{
    display:inline-block;

    background:#fff;

    padding:3px 7px;

    border:1px solid #caccd1;

    color:#000;

    margin:2px;

    border-radius:3px;

    font-weight:normal;
}

.page_btn_current{
    display:inline-block;

    background:#424242;

    padding:3px 7px;

    border:1px solid #333;

    color:#fff;

    margin:2px;

    border-radius:3px;
}


/* =========================================================
   AUDIO PLAYER
========================================================= */

.audio{
    width:99%;

    height:30px;

    background:#f2f3f5;

    margin:0;

    border:1px solid #ccc;

    border-radius:3px;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.DownloadBtn{
    display:inline-block;

    background:#ff0000;

    color:#fff;

    border:1px solid #000;

    border-radius:3px;

    padding:7px 14px;

    font-weight:bold;

    font-size:13px;

    cursor:pointer;

    transition:all .2s ease;
}

.DownloadBtn:hover{
    background:#cc0000;

    color:#fff;

    border:1px solid #000;

    text-decoration:none;
}


/* =========================================================
   REMOTE PLAYER
========================================================= */

.remotePlayer{
    width:55px;
    height:20px;

    text-transform:capitalize;

    padding:2px 5px;

    cursor:pointer;

    border:none;

    outline:none;

    color:#fff;

    background:#3518c9;

    transform:none;
}

.remotePlayer:hover{
    background:#2200a0;
}


/* =========================================================
   OTHER SERVICES
   Screenshot style
========================================================= */

.links a{
    position:relative;

    display:block;

    min-height:35px;

    padding:7px 38px 7px 8px;

    border-bottom:1px solid #ddd;

    background:#fff;

    color:#0000cc;

    font-weight:700;

    font-size:13px;

    line-height:20px;
}

.links a:hover{
    background:#f5f5f5;

    color:#0000cc;

    text-decoration:none;
}


/* Other Services right arrow */
.links a:after{
    content:"›";

    position:absolute;

    right:8px;
    top:8px;

    width:17px;
    height:17px;

    background:#888;

    color:#fff;

    border-radius:3px;

    text-align:center;

    line-height:15px;

    font-family:Arial,sans-serif;

    font-size:20px;

    font-weight:bold;
}

.links a:hover:after{
    background:#666;
}


/* =========================================================
   ERROR
========================================================= */

.error{
    background:#FFEFEF;

    border:1px solid red;

    margin:5px 3px;

    padding:5px;

    font-weight:700;

    color:red;
}


/* =========================================================
   SHARE ICON
========================================================= */

.shareIcon{
    transition:all .3s ease;
}

.shareIcon:hover{
    border-radius:50%;

    transform:rotate(360deg);
}


/* =========================================================
   FLOATING UPLOAD
========================================================= */

.app-floating-upload{
    position:fixed;

    right:12px;

    bottom:12px;

    z-index:999;
}

.app-floating-upload a{
    display:block;

    background:#3518c9;

    color:#fff;

    padding:8px 12px;

    border-radius:4px;

    font-weight:bold;

    box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.app-floating-upload a:hover{
    background:#2200a0;

    color:#fff;

    text-decoration:none;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#eee;
}

::-webkit-scrollbar-thumb{
    background:#777;
}

::-webkit-scrollbar-corner{
    background:#eee;
}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width:620px){

    html,
    body{
        font-size:14px;
        line-height:20px;
    }

    /* Search */

    .search{
        padding:10px 5px;
        margin-bottom:7px;
    }

    .search input[type="text"]{
        width:65%;

        padding:7px 8px;

        font-size:14px;
    }

    .search input[type="submit"]{
        padding:7px 8px;
        font-size:14px;
    }


    /* Headings */

    h1,
    h2,
    h3{
        font-size:14px;
        padding:4px 6px;
    }


    /* Top buttons */

    .navbar{
        padding:4px 0 2px;
    }

    .navbar a{
        font-size:11px;
        padding:2px 5px;
        margin:1px;
    }


    /* Notice */

    .more a{
        font-size:13px;
        padding:1px 8px;
    }


    /* Ticker */

    .ticker-wrap{
        height:29px;
    }

    .ticker-track{
        font-size:12px;
        line-height:29px;
    }


    /* Sort */

    .sort{
        font-size:13px;
        padding:4px 2px;
    }

    .sort a{
        padding:0 5px;
    }


    /* Category */

    .catRow{
        min-height:35px;
    }

    .catRow a{
        min-height:35px;

        padding:7px 38px 7px 8px;

        font-size:13px;
    }

    .catRow a:after{
        top:8px;
    }


    /* Normal rows */

    .row,
    .odd{
        min-height:35px;
        font-size:14px;
    }


    /* File list */

    .fl a{
        padding:7px 6px;
        font-size:14px;
    }


    /* Updates */

    .updates div{
        min-height:72px;
        padding:6px;
    }


    /* Path */

    .path{
        font-size:13px;
        padding:5px;
    }


    /* Other Services */

    .links a{
        min-height:35px;

        padding:7px 38px 7px 8px;

        font-size:13px;
    }


    /* Download */

    .DownloadBtn{
        padding:8px 15px;
        font-size:14px;
    }
}