.visible-hidden {
    visibility: hidden;
}

:root {
    --color-primary: #134A8B;
    --color-secondary: #a5b3d4;
    --color-gray: #dde6f3;
    --color-light-gray: #f3f6fb;
    --color-white: white;
    --color-black: #3e3743;
    --color-input-hover: rgba(165, 179, 212, 0.6);
    --color-input-focus: rgba(26, 37, 86, 0.45);
    --color-input-error: rgba(255, 94, 31, 0.6);
    --color-input-warning: rgba(166, 145, 54, 0.6);
    --color-input-success: rgba(23, 125, 23, 0.45);
    --color-input-disabled: #dde6f3;
    --font-family: Roboto, Montserrat, sans-serif;
    --font-persian: Yekan, Lalezar, cursive;
    --font-proxima: proxima-soft, Proxima Soft, Proxima Nova Soft, Helvetica, Arial, sans-serif;
}

/* __[ STYLE ]__ */
*,
*::before,
*::after {
    box-sizing: border-box;
    transition: 0.2s ease all;
}

.pagination {
    width: auto !important;
    height: 60px;
    border-radius: 9px;
    overflow: hidden;
}

.pagination,
.pagination__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.pagination__list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 350;
    height: 50px;
    border-radius: 9px;
    margin: 0 9px;
    overflow: hidden;
}

.pagination__item {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    font-size: 1.1rem;
}

.pagination__item>button,
.pagination__button {
    border: none;
    outline: none;
    stroke: none;
    box-shadow: none;
    cursor: pointer;
    border-radius: 9px;
    background: var(--color-gray);
}

.pagination__item>button:hover,
.pagination__button:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
}

.pagination__item>button {
    width: 45px;
    height: 45px;
}

.pagination__item>button[data-level=target] {
    background: var(--color-primary);
    color: var(--color-light-gray);
}

.pagination--move-prev {
    -webkit-animation: pagination-move-prev 0.5s ease both;
    animation: pagination-move-prev 0.5s ease both;
}

.pagination--move-next {
    -webkit-animation: pagination-move-next 0.5s ease both;
    animation: pagination-move-next 0.5s ease both;
}

.pagination--move-top {
    -webkit-animation: pagination-move-top 0.5s ease both;
    animation: pagination-move-top 0.5s ease both;
}

.pagination__button {
    width: 35px;
    height: 35px;
}

@-webkit-keyframes pagination-move-prev {

    from,
    0% {
        transform: translateX(25px);
    }

    50% {
        transform: translateX(-5px);
    }

    to,
    100% {
        transform: translateX(0px);
    }
}

@keyframes pagination-move-prev {

    from,
    0% {
        transform: translateX(25px);
    }

    50% {
        transform: translateX(-5px);
    }

    to,
    100% {
        transform: translateX(0px);
    }
}

@-webkit-keyframes pagination-move-next {

    from,
    0% {
        transform: translateX(-25px);
    }

    50% {
        transform: translateX(5px);
    }

    to,
    100% {
        transform: translateX(0px);
    }
}

@keyframes pagination-move-next {

    from,
    0% {
        transform: translateX(-25px);
    }

    50% {
        transform: translateX(5px);
    }

    to,
    100% {
        transform: translateX(0px);
    }
}

@-webkit-keyframes pagination-move-top {

    from,
    0% {
        transform: translateY(-25px);
    }

    50% {
        transform: translateY(10px);
    }

    to,
    100% {
        transform: translateY(0px);
    }
}

@keyframes pagination-move-top {

    from,
    0% {
        transform: translateY(-25px);
    }

    50% {
        transform: translateY(10px);
    }

    to,
    100% {
        transform: translateY(0px);
    }
}

@media only screen and (max-width:768px) {
    .pagination__item {
        width: 35px;
        height: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
        font-size: 1.1rem;
    }

    .pagination__item>button,
    .pagination__button {
        margin: 3px;
        border: none;
        outline: none;
        stroke: none;
        box-shadow: none;
        cursor: pointer;
        border-radius: 9px;
        background: var(--color-gray);
    }

}