.page-title {
    margin: 10px 0px 36px 0px;
}

.page-title-name {
    padding-top: 10px;
    font-family: Inter;
    font-size: 42px;
    white-space: nowrap;
}

.page-title-action > div {
    width: 35px;
    height: 35px;
    margin-left: 30px;
}
.page-title-action img {
    _height: 36px;
}

.page-table {
    _border: dashed 1px red;
    margin: 0 0 0 0;
    position: relative;
    padding-bottom: 100px;
    box-sizing: border-box;
    font-family: Inter;
    font-size: 14px;
}

.page-table-container {
    _border: dashed 1px red;
    margin: 0 0 0 0;
    position: relative;
    padding-bottom: 80px;
    box-sizing: border-box;
    font-family: Gilroy;
    font-size: 14px;
}

/* FILTER */
.page-table-filter {

}

.page-table-filter .search {
    width: 253px;
}
.filter-input label {
    font-size: 14px;
    font-weight: normal;
    color: #828589;
    padding-left: 19px;
}
.filter-input.is-focused label {
    color: var(--color-active) !important;
}
.filter-input input {
    padding-left: 18px;
    outline: none;
}
.filter-input label:after {
    bottom: 12px;
    background-color: var(--color-active);
}

.filter-input .mdl-textfield__label__icon {
    position: absolute;
    right: 15px;
    top: 18px;
}
.filter-input .mdl-textfield__label__icon img {
    width: 18px;
    height: 18px;
}


.filter-search input {
    padding-right: 38px;
}

.page-table-applied-filter > div {
    display: inline-block;
    padding: 10px 15px 10px 15px;
    margin: 0 10px 7px 0;
    border-radius: 20px;
    background-color: #e3e4ea;
    color: var(--text-primary);
}
.page-table-applied-filter > div > img{
    cursor: pointer;
}

.filter-date, .filter-enum, .filter-dictionary {
    display: inline-block;
    color: var(--text-primary);
    padding-left: 17px;
}

.page-table-actions {
    padding-top: 20px;
    display: inline-block;
    float: right;
    padding-left: 17px;
}

.table-pagination a {
    cursor: pointer;
    width: 39px;
    height: 39px;
    padding-top: 7px;
    display: inline-block;
    text-align: center;
}

.table-pagination a.disabled {
    -webkit-filter: grayscale(200%);
    -moz-filter: grayscale(200%);
    -ms-filter: grayscale(200%);
    -o-filter: grayscale(200%);
    filter: grayscale(200%);
    cursor: auto;
}
.table-pagination a.current {
    border-radius: 100%;
    border: solid 2px #8bbb2b;
    background-color: #fff;
    cursor: default;
    color: rgb(33, 37, 41);
}

.table-length {
    color: #0366d6;
}
.table-length select {
    color: #0366d6;
    cursor: pointer;
}
.table-length select:focus-visible {
    outline: none;
}


/* DATA */
.page-table-data {
    _border: dashed 1px green;
    min-height: 60vh;
    _min-height: calc(100vh - 305px);
    _margin: 0 0 0 -15px;
}

.page-table-data table thead th, .page-table-data table thead td {
    border-bottom: 0; 
}
.page-table-data table  {
    _border-bottom: 0; 
    border-bottom: 1px solid var(--text-gray) !important;
}


.page-table-data th {
    color: var(--text-primary);
}
.page-table-data td {
    color: var(--text-black);
}


/* FOOTER */
.page-table-footer {
    _border: dashed 1px green;
    margin: 0 0 0 -10px;
    border-top: 1px solid var(--text-gray);
    width: 100%;
    width: calc(100vw - 140px);
    position: absolute;
    padding-top: 7px;
    _position: fixed;
    bottom: 0;
    height: 56px;
    display: flex;
    justify-content: space-between;
}

.page-table-footer .left {
}

.page-table-footer .footer-right {
    white-space: nowrap;
}
.page-table-footer .footer-right div {
    display: inline-block;
    padding: 0 10px 0 10px;
}

.table-length select {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 5px;
    padding-right: 2px;
    text-overflow: '';
}
.table-length select::-ms-expand {
    display: none !important;
}




.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}