.hype-energize-table-container {

    margin: 20px 0;

    overflow-x: auto;

    /* background: #fff; */

    /* padding: 20px; */

    /*border-radius: 4px;*/

    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
    padding-top:170px;
    

}

h3 {
    font-family: "Amazing views", Sans-serif;
    color: #fff;
}

table.dataTable {

    width: 100%;

    border-collapse: collapse;

    margin: 0;


    th,
    td {

        padding: 12px 20px!important;

        text-align: left;

        /*border-bottom: 1px solid #e1e1e1;*/

        border: none;

        font-weight: 200;

    }

    th {
        font-weight: 200;
    }
}

.hype-energize-last-updated {

    margin-bottom: 15px;

    font-style: italic;

    color: #666;

    text-align: right;

}



.hype-energize-error {

    padding: 10px;

    margin-bottom: 15px;

    border-left: 4px solid #dc3232;

    /* background: #fff; */

}



.hype-energize-admin-controls {

    margin-bottom: 15px;

    text-align: right;

}



/*#hype-energize-top-users {*/

/*    width: 100%;*/

/*    border-collapse: collapse;*/

/*    margin: 0;*/

/*}*/



/*#hype-energize-top-users th,*/

/*#hype-energize-top-users td {*/

/*    padding: 12px 20px;*/

/*    text-align: left;*/

/*    border-bottom: 1px solid #e1e1e1;*/

/*}*/



/*#hype-energize-top-users th {*/

    /* background-color: #f8f8f8; */

/*    font-weight: 200;*/

/*}*/


.dataTables_wrapper .dataTables_filter input {

    margin-left: 10px;

    padding: 5px 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

    height: 32px;

}



.dataTables_wrapper .dataTables_length select {

    padding: 4px;

    border: 1px solid #ddd;

    border-radius: 4px;

}



.dataTables_wrapper .dataTables_paginate .paginate_button {

    padding: 5px 10px;

    margin-left: 2px;

    border: 1px solid transparent;

    border-radius: 4px;

}



.dataTables_wrapper .dataTables_paginate .paginate_button.current {

    /* background: #f0f0f0; */

    border-color: #ddd;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    background: #f5f5f5;

    border-color: #ddd;

}



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


    .dataTables_wrapper .dataTables_length,

    .dataTables_wrapper .dataTables_filter {

        float: none;

        text-align: left;

        margin-bottom: 10px;

    }



    .dataTables_wrapper .dataTables_filter input {

        width: 100%;

        margin-left: 0;

        margin-top: 5px;

    }
    body #main.site-main:has(.hype-energize-table-container table.dataTable)::before {
        background-image: none;
    }
    body #main.site-main:has(.hype-energize-table-container table.dataTable) {
        .entry-title {
            font-size: 2.5rem;
            padding: 15px;
        }
        .entry-header {
            margin-top: 20px;
        }
    }

}



.hype-energize-last-updated{

    display: none;

}



div.dataTables_filter {

    margin-bottom: 24px;

}



.dataTables_length{

    display: none;

}



.dataTables_filter input[type="search"] {

    margin-left: 0px !important;

    background: #fff!important;

    color:#000!important;

    border-radius: 20px;

    margin-bottom: 4rem;
    float:none;
    max-width :300px;
    padding-left: 40px;

}



/*#hype-energize-top-users th,*/

/*#hype-energize-top-users td {*/

/*    border: none;*/

/*    font-weight: 200;*/

/*}*/

.hype-energize-table-container table.dataTable {

    border: none;

    font-size: 1.5rem;

    position:relative;

    thead ,tbody td.name{
        font-family: "Amazing views", Sans-serif;
    }
    thead th.sorting::before{
        top: 10px;
        right: -5px;
    }
    thead th.sorting::after {
        right: -5px;
    }

    td {
        box-shadow: none !important;
    }
    tbody tr{
        background: linear-gradient(90deg, black 80%, #33343e 100%);
        border-bottom: 25px solid black;
    }
    tbody .percent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: "Digital 7", Sans-serif;
        font-size: 2rem;
        gap: 10px;
    }
    tbody .percent progress[value]{
        box-shadow: 0px 1px 3px rgb(255 255 255 / 35%);
        height: 12px;
        border: 3px solid #000;
        border-radius: 8px;
        -webkit-appearance: none;
        appearance: none;
    }
    progress[value]::-webkit-progress-value {
        background: linear-gradient(90deg, #018472 0%, #7BD966 100%);
        border-radius: 6px;
    }
    progress[value]::-webkit-progress-bar {
        background: #000;
        border-radius: 8px;
    }

}
.hype-energize-table-container table.dataTable::before{
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(https://hypeplay.ro/wp-content/uploads/2025/06/Corner-Frame.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -12px;
    left: 0px;
}

#main.site-main:has(.hype-energize-table-container table.dataTable) {
    position: relative;
    .entry-header {
        background-image: url(https://hypeplay.ro/wp-content/uploads/2025/06/Title-Frame.svg);
        background-repeat: no-repeat;
        width: fit-content;
        padding: 15px;
        background-size: contain;
        margin-bottom:0;
    }
    .entry-title{
        font-weight: 400;
        font-size: 3.5rem;
        letter-spacing: 2px;
        padding: 25px;
        margin-bottom:0;
        font-family: "Amazing views", Sans-serif;
        color: #fff;
    }

}
#main.site-main:has(.hype-energize-table-container table.dataTable)::before{
    content: '';
    display: block;
    width: 40%;
    height: 100%;
    background-image: url(https://hypeplay.ro/wp-content/uploads/2025/06/Game-Frame.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -20px;
    right: -10px;
    z-index: -1;
}

body .dataTables_filter {
    float:none!important;
    text-align: left!important;
    
    label{
        position:relative;
    }
    label::before {
        content: '';
        width: 20px;
        height: 20px;
        display: block;
        background-image: url(https://hypeplay.ro/wp-content/uploads/2025/06/magnifying-glass.svg);
        position: absolute;
        top: -2px;
        left: 10px;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
    }

    input[type="search"]::placeholder {
        color: #000;
        font-weight: 600;
    }
}

.dataTables_wrapper .bottom{
    margin-top:30px;
}

.dataTables_paginate .paginate_button:not(.current):hover {
    color: #000!important;
}

.dataTables_wrapper{
    padding-right: 2%;
}

.dataTables_wrapper .top {
    display:none;
}

.dataTables_wrapper .bottom {
    display: none;
}

table.dataTable thead th,
table.dataTable tfoot th{
    font-weight: normal!important;
}