@import url('./installation.css');

@keyframes headmobile {
    0% { background-position: 50% 0% }
    50% { background-position: 51% 100% }
    100% { background-position: 50% 0% }
}

body {
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo {
    width: 50px !important;
}

.head-mobile {
    width: 95%;
    padding: 10px;
    background-color: #fff;
    border-radius: 30px;
    position: fixed;
    margin: auto;
    top: 5px;
    left: 5px;
    z-index: 1000;
    box-shadow: 0.9px 0.7px 2.2px rgba(0, 0, 0, 0.02),
        2.1px 1.7px 5.3px rgba(0, 0, 0, 0.028),
        4px 3.3px 10px rgba(0, 0, 0, 0.035),
        7.1px 5.8px 17.9px rgba(0, 0, 0, 0.042),
        13.4px 10.9px 33.4px rgba(0, 0, 0, 0.05),
        32px 26px 80px rgba(0, 0, 0, 0.07);
    background: linear-gradient(185deg, #ffffff, #c9eeff);
    background-size: 400% 400%;
    animation: headmobile 6s ease infinite;
}

.head-mobile table {
    width: 100%;
}

.head-mobile table td:nth-child(2) {
    text-align: right;
    font-family: InterB;
}

.container-person {
    width: 90%;
    margin-top: 40px;
    padding: 10px;
}

.container-person .item {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 8px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.container-person .item table {
    width: 100%;
    border-collapse: collapse;
}

.container-person .item table th,
.container-person .item table td {
    text-align: left;
    padding: 5px;
    font-size: 12px;
}

.container-person .item table tr:last-child {
    border-top: 1px dashed #2b2d2e;
    text-align: right;
    font-size: 11px;
}

.scrolling-container {
    width: 100%;
    height: calc(100vh - 130px);
    overflow-y: auto;
    margin-top: 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    padding: 10px;
    list-style: none;
}

.pagination .page-item {
    margin: 0 5px;
}

.pagination .page-item a {
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #f0f0f0;
}

.pagination .page-item.active a {
    background-color: #000;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .head-mobile {
        padding: 10px 5px;
    }

    .container-person .item table th,
    .container-person .item table td {
        font-size: 10px;
    }
}