figcaption {
    font-style: italic;
}

.underline {
    border-bottom: 1px solid black;
}






/* PAGINATION FROM DESIGN (II) */

.pagination-container-3 {
    border-radius: 5px;
    max-width: max-content;
    float: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pagination-number-3 {
    font-size: 20px;
    color: #5288dd;
    padding: 10px;
    min-width: 20px;
    text-align: center;
    margin: 0px;
    float: left;
    
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.pagination-number-disabled-3{
    color: gray;
}

.pagination-number-3:not(.pagination-current-3):not(.pagination-space-3):not(.pagination-number-disabled-3):hover{
    background-color: lightgray;
    color: #082671;
    cursor: pointer;
}

.pagination-current-3{
    color: white;
    background-color: #027eff;
    border: 1px solid  #027eff;
}

/* borders */

.pagination-number-3:first-child{
    border-left: 1px solid lightgray;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination-number-3:last-child{
    border-right: 1px solid lightgray;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pagination-number-3:not(:last-child){
    border-right: 1px solid lightgray;
}



/* PAGINATION FROM DESIGN (I) */

.pagination-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 1em 2em auto auto;
    font-size: 20px;
    width: fit-content;
}


.pagination-number-background-2 {
    background-color: #1d2935;
    padding: 12px 0px 12px 0px;
    vertical-align: middle;
}


.pagination-container-2 .pagination-number-2 {
    text-align: center;
    background-color: #1d2935;
    color: white;
    vertical-align: middle;
    padding: 8px 16px;
    cursor: pointer;
}


.pagination-container-2 .pagination-arrow-2 {
    text-align: center;
    background-color: #1d2935;
    color: white;
    vertical-align: middle;
    padding: 8px 14px 8px 14px;
    cursor: pointer;
}

.margin-left-4px {
    margin-left: 4px;
}

.margin-right-4px {
    margin-right: 4px;
}

.pagination-container-2 .pagination-current-2 {
    color: white;
    background-color: #4bb14e;
}

.pagination-container-2 .pagination-number-2:hover:not(.pagination-current-2):not(.pagination-space-2) {
    color: black;
    background-color: #dcdedd;
}

.pagination-container-2 .pagination-arrow-2:hover:not(.pagination-current-2):not(.pagination-space-2) {
    color: black;
    background-color: #dcdedd;
}






/* PAGINATION FREE HANDED */

.pagination-container-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 1em 2em auto auto;
    font-size: 20px;
    width: fit-content;
}

.pagination-container-1>.pagination-number-1 {
    min-width: 1em;
    text-align: center;
    padding: 4px 10px;
    border-radius: 6px;

    /* 
        NOTE: "cursor: pointer" is the default cursor for links 
        (my <a> tag don't have href attr set, which doesn't make it a link)
    */
    cursor: pointer;
}


.pagination-container-1>.pagination-current-1 {
    color: white;
    background-color: lightskyblue;
}

.pagination-container-1>.pagination-number-1:hover:not(.pagination-current-1):not(.pagination-space-1) {
    color: white;
    background-color: gray;
}