div.gryd-grid-outer {
    overflow: hidden;
    margin: var(--gryd-s-3);
    
}

div.gryd-grid-outer-b {
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.grid-buttons {
    z-index: 100;
    position: relative;
}

div.gryd-grid-outer-border {
    border: 0.1em solid #af82f1;
}

div.gryd-grid-outer-width {
    width: 40em;
}

div.gryd-grid {
    margin: 0em;
    padding: 0.1em;
}

div.gryd-f-mono {
    font-family: var(--gryd-ff-monospace);
}

div.open-gryd {
    border-radius: 0 0 2em 2em;
    border: 1px solid var(--bs-purple-gryd);
    background: rgba(175, 130, 241, 0.20) !important;
    min-height: 200px;
}

div.gryd-grid table {
    border: 0.1em solid #af82f1;
    margin: 0em;
    padding: 0em;
    border-collapse: collapse;
    border-spacing: 0;
}

.hours-grid {
    border-collapse: separate !important;
    border: none !important;
}

    .hours-grid tfoot {
        border-style: none;
    }

.hours-grid thead {

}

.hours-grid thead tr {
    height: 4em;
}

    .hours-grid thead tr .head-left {
        border-radius: 2em 0em 0em 0em;
    }

    .hours-grid thead tr .head-right {
        border-radius: 0em 2em 0em 0em;
    }

    .hours-grid thead tr th {
        border: 1px solid var(--bs-purple-gryd);
    }

    .hours-grid tfoot tr td {
        border-radius: 0em 0em 2em 2em;
        background-color: var(--bs-purple-gryd);
        border: 1px solid var(--bs-purple-gryd);
    }

div.gryd-grid table-width {
    width: 40em;
}

div.gryd-grid table tbody tr {
}

div.gryd-grid table tbody tr.heading {
    border-bottom: 0.3em solid #aaa;
}

div.gryd-grid table tbody tr {
    background-color: #fafafa;
    margin: 0em;
}

div.gryd-grid table tbody tr td.money {
    text-align: right;
}

    div.gryd-grid table tfoot tr td.money {
        text-align: right;
    }

div.gryd-grid table tbody tr:hover td {
    background-color: #af82f1;
}

div.gryd-grid table tbody tr:hover td.a-col {
    background-color: #af82f1;
}

div.gryd-grid table tbody tr.a-row:hover {
    background-color: #af82f1;
}

div .gryd-grid table tbody tr.a-row {
    background-color: #333;
}

div .gryd-grid table tbody tr td.a-col {
    background-color: #333;
}

div.gryd-grid table tbody tr a {
    /*color: #ffdb58;*/
    color: #ffac05;
    text-decoration: none;
}

div.gryd-grid table tbody tr a:visited {
    color: #333;
    text-decoration: none;
}

div.gryd-grid table tbody tr td {
    padding-left: 0.4em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-right: 0.4em;
    border: 0.1em solid #af82f1;
    margin: 0em;
}

div.gryd-grid table tbody tr td.curr {
    text-align: right;
}

div.gryd-grid table thead th {
    border-bottom: 0.1em solid #333;
    background-color: #af82f1;
}

div.gryd-grid table thead tr th {
    font-weight: bold;
    padding: 0.2em 0.2em 0em 0.2em;
    color: #000;
    height: 100%;
    vertical-align: top;
    border-bottom: 0.1em solid #333;
    min-width: 4em;
        
}

div.gryd-grid table thead tr th div.grid-buttons {
    background-color: #af82f1;
    vertical-align: top;
    text-align: left;
    position: relative;
    left: 1px;
    top: 0.2em;
    display: inline-block;
    width: 100%;
}

div.gryd-grid table thead tr th div.grid-titles {
    background-color: #af82f1;
    vertical-align: top;
    text-align: left;
    position: relative;
    left: 1px;
    top: 0.2em;
    display: inline-block;
    width: 100%;
}

div.gryd-grid table thead tr th span.title {
    position: relative;
}

div.gryd-grid span.option {
    display: inline-block;
    position: relative;
}

    div.gryd-grid span.option a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.6em;
        height: 1.6em;
        font-size: 0.875em;
        float: left;
        margin-left: 0.125em;
        background-color: #ddd;
        border-radius: 0.2em;
        color: #666;
        border: 0.1em solid #000;
    }

div.gryd-grid table thead tr th span.order {
    display: inline-block;
    position: relative;
}

div.gryd-grid span.option a:hover {
    background-color: #af82f1;
}

div.gryd-grid span.option a.order-0:hover {
    /*background-color: #ffdb58;*/
    background-color: #ffac05;
}

div.gryd-grid span.option a.order-1:hover {
    background-color: #af82f1;
}

div.gryd-grid span.option a.order--1:hover {
    background-color: #ddd;
}

div .gryd-grid span.option a.order-1 {
    /*background-color: #ffdb58;*/
    background-color: #ffac05;
}

div.gryd-grid span.option a.order--1 {
    background-color: #af82f1;
}

div.gryd-grid span.order a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.6em;
    height: 1.6em;
    float: left;
    margin-bottom: 0.125em;
    margin-left: 0.125em;
    background-color: #ddd;
    border-radius: 0.2em;
    font-size: 0.875em;
    color: #666;
    border: 0.1em solid #000;
}

div.gryd-grid span.option a.current {
    /*background-color: #ffdb58;*/
    background-color: #ffac05;
    8;
    color: #666;
}

div.gryd-grid span.filter {
    float: right;
    position: relative;
    background-color: #ddd;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.3em;
    height: 2.3em;
    margin-left: 0.4em;
    border-radius: 0.3em;
}

div.gryd-grid span.filter a {
    width: 100%;
    height: 100%;
    float: left;
    margin-left: 0.1em;
}

div.grid-inactive {
    background-color: #af82f1;
}

div.grid-inactive-list {
    background-color: transparent !important;
}

div.grid-inactive span {
    background-color: #ddd;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
    border: 0.1em solid #000;
    font-size: 0.875em;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    margin: 0.3em 0em 0.3em 0.3em;
}

div.grid-inactive span:hover {
    background-color: #af82f1;
}

div .grid-inactive span a {
    color: #000;
}

div .grid-inactive span a:visited {
    color: #000;
}


.pagination span.p-detail {
    /*float: right;*/
    display: flex;
    text-align: justify-all;
    justify-content: center;
    min-width: 6em;
    font-size: var(--gryd-fs);
    line-height: 2.8em;
    padding-right: 0.5em;
}

.pagination {
    /*height: 3em;*/
    font-color: #333;
    padding: 0em;
    display: block;
    font-size: var(--gryd-fs);
    margin-top: 100px;
}

    .pagination ul {
        margin-top: 0em;
        display: flex;
        padding: 0.5em;
        line-height: var(--gryd-s-3);
        /*float: left;*/
    }

        .pagination ul li {
            list-style: none;
            /*float: left;*/
            display: flex;
            margin: 0em 0.2em 0em 0.2em;
            padding: 0em;
            width: 1.8em;
            height: 1.8em;
            text-align: justify-all;
            justify-content: center;
            align-items: center;
            background-color: #ddd;
            margin-left: 0em;
            position: relative;
            border-radius: 0.2em;
            color: #000;
        }

.page-button {
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    div.pagination ul li {
        width: 1.86em !important;
        height: 1.8em !important;
        font-size: 0.750em !important;
    }
}


.pagination ul li.current {
    background-color: #ffac05;
    /*background-color: #ffdb58;*/
}

    .pagination ul li.current:hover {
        background-color: #ffac05;
        /*background-color: #ffdb58;*/
    }

.pagination ul li:hover {
    background-color: #af82f1;
}

.pagination ul li a {
    text-decoration: none;
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #000;
}

.pagination ul li.current span {
    color: #000;
}

.pagination ul li a:visited {
    color: #000;
}