/* ======================================================
    pagination.css 
   ====================================================== */

.pagination ul {
    margin-top: 7px;
}

/* Additons for pagination states */
.pagination .stated li{
    display: inline-block !important;
}

.pagination .stated li a{
    position: relative;
    background: transparent !important;
    z-index: 100;
    color: black !important;
    cursor: pointer;
}

/* Hover */
.pagination .stated li:hover a:after{
    position: absolute;
    top: -1px;
    left:0;
    content: '';
    height: 28px;
    width: 100%;
    border-bottom: solid 1px var(--c_paginationbutton_border);
    border-top: solid 1px var(--c_paginationbutton_border);
    background: none !important;
}
.pagination .stated li:first-child:hover a:after{
    left: 2px;
    width: calc(100% - 2px);
}
.pagination .stated li:last-child:hover a:after{
    left: 0;
    width: calc(100% - 2px);
}

/* Active */
.pagination .stated li.active a:after{
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    height: 28px;
    width: 100%;
    border-bottom: solid 1px var(--c_paginationbutton_border);
    border-top: solid 1px var(--c_paginationbutton_border);
    display: inline-block !important;
    
}
.pagination .stated li:first-child.active a:after{
    left: 2px;
    width: calc(100% - 2px);
}
.pagination .stated li:last-child.active a:after{
    width: calc(100% - 2px);
}
.pagination .stated li:only-child.active a:after{
    left: 2px;
    width: calc(100% - 4px);
}
.pagination .stated li.active a {
   color: var(--c_paginationbutton_text) !important;
   font-weight: 600 !important;
}

/* Started */
.pagination li.started{
    position: relative;
    margin: 0 auto;
}

.pagination > ul > li.started:after{
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 29px  #D6EBEF;    
    border-right: solid 33px transparent;
}
.pagination > ul > li.started:last-child:after{
    border-right: solid 30px transparent;
}
.pagination > ul > li.started:first-child:after {
    border-right: solid 32px transparent;
    border-top: solid 28px  #D6EBEF;
    left:1px;
    top: 1px;
}

/* Finished */
.pagination li.finished{    
    background: #D6EBEF; 
}

/* Media Queries */

@media all and (max-width: 1200px) {
    .pagination {
        font-size: 14px !important;
    }
    .pagination ul > li > a {
        padding: 4px 9px;
    }
    .pagination > ul > li.started:after {
        border-right: solid 30px transparent;
    }
    .pagination > ul > li.started:first-child:after {
        border-right: solid 28px transparent;
    }
    .pagination > ul > li.started:last-child:after{
        border-right: solid 26px transparent;
    }
}