/*================================================================================
	Item Name: Robust - Responsive Admin Theme
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label {
    margin-top: 1rem;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            z-index: 2;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

    .pager li {
        display: inline;
    }

        .pager li > a,
        .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
        }

            .pager li > a:hover,
            .pager li > a:focus {
                text-decoration: none;
                background-color: #eee;
            }

    .pager .next > a,
    .pager .next > span {
        float: right;
    }

    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }

    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
    }

#body_login {
    background: linear-gradient(270deg, #ff00cc, #3333ff, #ff9900, #00ffcc);
    animation: gradientBG 15s ease infinite;
}

/* Nền động */
.music-theme {
    background: linear-gradient(270deg, #ff00cc, #3333ff, #ff9900, #00ffcc,#260F43);
    background-size: 800% 800%;
    animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-card {
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    color: white;
}

.login-title {
    font-family: 'Arial', sans-serif;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 15px #ff00ff;
}

.music-input {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

    .music-input::placeholder {
        color: #ccc;
    }

.btn-music {
    background: linear-gradient(90deg, #ff33cc, #ffcc00, #00ffcc);
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(255, 165, 0, 0.3);
    transition: transform 0.3s;
}

    .btn-music:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(255, 165, 0, 0.5);
    }

.music-link {
    color: #00ffcc;
    text-decoration: underline;
}

/* Button styling for music theme */
.btn-primary {
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8, #845ef7);
    background-size: 300% 300%;
    border: none;
    border-radius: 50px;
    padding: 5px 5px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(132, 94, 247, 0.3);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: gradientAnimation 4s ease infinite;
}

    /* Button hover effect */
    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(132, 94, 247, 0.5);
    }

    /* Icon inside button */
    .btn-primary i {
        margin-right: 8px;
        font-size: 1.2rem;
    }

    /* Button click effect */
    .btn-primary:active {
        transform: scale(0.95);
    }

/* Gradient animation for music vibes */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Row adjustments for centering */
.row {
    display: flex;
    justify-content: center;
    align-items: center;
}




/* Tạo màu sắc riêng cho từng nút */


.btn-add {
    background-color: #28a745; /* Xanh lá */
    border-color: #28a745;
    border-radius: 50px;
    padding: 5px 5px;
}

.btn-add-music {
    background-color: #ffc107; /* Vàng */
    border-color: #ffc107;
    color: #000; /* Đổi màu chữ nếu cần */
    border-radius: 50px;
    padding: 5px 5px;
}

.btn-add-image {
    background-color: #dc3545; /* Đỏ */
    border-color: #dc3545;
    border-radius: 50px;
    padding: 5px 5px;
}