.container{
    margin-top: 10%;
    display: block;
}


.title{
    color: black;
    font-size: 3.5vw;
}

.table {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
    margin-bottom: 3%;
    background-color: white;
}

.table tr {
    border: 0.15vw solid #dee2e6;
}

.table th, .table td {
    padding: 8px;
}

.bts {
    display: flex;
    justify-content: center; /* Center the buttons */
    gap: 1vw; /* Add spacing between buttons */
    width: auto; /* Adjust the container width */
    margin: auto;
    margin-top: 1vw;
    margin-bottom: 11vw;
}

.UPdate, .CKout {
    width: 15vw; /* Let buttons adjust their width based on content */
    padding: 0 1vw; /* Add padding instead of fixed width */
    height: 2.5vw;
    color: black;
    background-color: #FAF3E0;
    border: solid;
    border-color: black;
    border-radius: 0.5vw;
}

.UPdate:hover, .CKout:hover {
    background-color: #ddd;
}

.liv_ul{
    margin-left:38vw;
}

.CKout{
    width: 15vw;
    height: 2.5vw;
    margin-left: 10%;
    color: black;
    background-color:#FAF3E0;
    border: solid;
    border-color: black;
    border-radius: 0.5vw;
}

.CKout:hover{
    background-color: #ddd;
}

/* Mobile styles */
@media (max-width: 768px) {
    .container {
        margin-top: 30vw;
        margin: 2vw;
        margin-bottom: 30vw;
    }

    .liv_ul {
        margin-left: 6vw;
    }

    .title {
        font-size: 6vw;
        text-align: center;
    }

    .table {
        font-size: 3.5vw;
        width: 100%;
        border-collapse: collapse;
    }

    .table tr {
        border: 0.3vw solid #999; /* darker gray borders */
    }

    .table th, .table td {
        padding: 2vw;
        text-align: center;
        border: 0.3vw solid #999; /* make sure cells have border too */
    }

    .table img {
        width: 10vw;
        height: 10vw;
    }

    .bts {
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }

    .CKout{
        margin-left: 0vw;
    }

    .UPdate, .CKout {
        width: 50vw;
        height: 10vw;
        font-size: 4vw;
    }
}

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        margin-top: 15vw;
    }

    .title {
        font-size: 4.5vw;
    }

    .table {
        font-size: 2.5vw;
        width: 100%;
        border-collapse: collapse;
    }

    .table tr {
        border: 0.2vw solid #999;
    }

    .table th, .table td {
        padding: 2vw;
        text-align: center;
        border: 0.2vw solid #999;
    }

    .table img {
        width: 7vw;
        height: 7vw;
    }

    .bts {
        gap: 2vw;
    }

    .UPdate, .CKout {
        width: 30vw;
        height: 6vw;
        font-size: 3vw;
    }
}