:root{
    --brand-07:#f32d9b;
}
.rlr-navigation .navigation-body .navigation-link {
    font-size: 1.125rem;
    font-weight: 400;
    padding: .5rem;
}

.rlr-footer {
    padding-bottom: var(--spacing-3);
    background-color: #fefff1; /*#faebd7 =>#fefff1*/
    border-top: black 1px solid;
}
.navigation.fixed-top {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 19998;
    border-bottom: red 1px dashed;
    background-color:#fffefc;
}



/*paging*/
.docs-date {
}

.custom-select {
    display: inline-block;
    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 4\ 5\'%3E%3Cpath\ fill=\'%23333\'\ d=\'M2\ 0L0\ 2h4zm0\ 5L0\ 3h4z\'/%3E%3C/svg%3E) no-repeat right center;
    -webkit-background-size: 8px 10px;
    background-size: 8px 10px
}

.separator {
    margin-top: 2px;
    margin-bottom: 3px;
}


.mydatagrid {
    width: 98%;
    border: solid 2px black;
    min-width: 95%;
}

.header {
    background-color: #333;
    color: White;
    border: none 0px transparent;
    height: 25px;
    text-align: center;
}

.rows {
    background-color: #fff;
    color: #000;
    min-height: 25px;
    text-align: left;
    border: none 0px transparent;
}

    .rows:hover {
        background-color: #020a14;
        color: #e9f211;
        text-align: left;
    }

.selectedrow {
    color: #f21136;
    font-weight: bold;
    text-align: left;
}

.mydatagrid a /** FOR THE PAGING ICONS? **/ {
    background-color: Transparent;
    padding: 5px 5px 5px 5px;
    color: #f21136;
    text-decoration: none;
    font-weight: bold;
}

    .mydatagrid a:hover /** FOR THE PAGING ICONS? HOVER STYLES**/ {
        background-color: #000;
        color: #fbef05;
    }

.mydatagrid span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
    background-color: #c9c9c9;
    color: #000;
    padding: 5px 5px 5px 5px;
}

.pager {
    color: #f21136;
    height: 30px;
    text-align: left;
}

.mydatagrid td {
    padding: 5px;
}

.mydatagrid th {
    padding: 5px;
}



.pagination {
    display: table;
    padding-left: 10px;
    border-radius: 4px;
    margin: 20px auto;
}

    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 5px;
        margin: 5px;
        color: #5a6f7c;
        text-decoration: none;
        background-color: #fff;
        border-radius: 4px;
        min-width: 40px;
        min-height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #eaeff5;
        -webkit-box-shadow: 0 2px 10px 0 #d8dde6;
        box-shadow: 0 2px 10px 0 #d8dde6;
    }

        .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .pagination > li > a:focus, .pagination > li > a:hover {
            z-index: 2;
            color: #fff;
            cursor: pointer;
            background-color: #ff4e00;
            border-color: #ff4e00;
        }

    .pagination li:first-child a, .pagination li:last-child a {
        background: #35434e;
        border: 1px solid #35434e;
        border-radius: 4px;
        color: #fff;
    }

    .page-item{
        /**/
    }
        .page-item .active {
            z-index: 2;
            color: #fff;
            cursor: pointer;
            background-color: #ff4e00;
            border-color: #ff4e00;
        }