.print-hide {
    @media print {display: none;}
}
.header {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding:5px;
    >* {
        display: flex;
        >* {margin: 0 5px;}
    }
    .search {max-width:150px;}
    .buttons {
        >div {
            button {
                display: flex;
                flex-direction: row;
                >i {
                    padding-right: 5px;
                    font-size: 20px;
                }
            }
        }
        &.left {flex: 1;flex-direction: row-reverse;}
        a{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            i {display: inline-block;width:20px;height:20px;font-size: 20px;}
        }

        .columns{
            font-size: 13px;
            li {display:flex;flex-direction: row;label {flex: 1;}}
        }
        
    }
    .limit {width:80px}
    @media print {display: none;}
}
.data {
    overflow-x: auto;
    .hide {display:none;}
    thead {
        th.sortable {
            cursor: pointer;
            padding-right: 22px;
            background-repeat: no-repeat;
            background-position: right center;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGgSURBVHjaYvz//z8DtQBAADExUBEABBBBw/79+8f25s0bA6AP2AmpBQgggoZ9/PhRFYgFPn36pEtIPUAA4ZX89euXKNAgUVC4fvjwgeP3798gAxlxqQcIIJyGAQ1gBRqg+ufPHzAfaBAL0GAuoLgULj0AAYTTsB8/fih//fqVDVkM6FV2oDhOwwACiAlHoAu9e/dO4u/fv+jiDO/fv+cEuo4Xmz6AAGLBJvblyxd5oAs+MzFh2vX9+3cGoLwULy/vTXQ5gABipGaiBQggbC5j+/z5s+WrV68YgQDsO1B8IEUMg6io6E8+Pr5zQO4fZI0AAYQtzH7x8PA84OTkBIcREDMBMTMMc3Bw/APKn0E3CAQAAghrBABd9FBQUPAHepgxMzMzCAkJfQWK/8PmK4AAwpk0gC44D/TKP2Qxbm7u/0Dxa1AuhssAAginYUDX/eTn53/EysoKCVwWFgYBAYFbQPFfuPQABBDe7AQ06DHQgJ+giAAa/IGNje05PvUAAQSOHTwYFPj8r1+/tgImYCYCahkAAoiq6QwggKhaOAIEGABH8NOTGnKEdAAAAABJRU5ErkJggg==');
            &.asc {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVHjaYvz//z8DtQBAADExUBEABBBBw/79+yf+5s2b/UAfyBBSCxBABA37+PHjVCB2+PTp02YglxOfWoAAwmvYr1+/goEGBYPC9cOHD/K/f//eBBRmxaUeIIBwGgY0QBhowNQ/f/6A+UCDBIEGawHF03DpAQggnIb9+PGj++vXr+LIYkCvSgHFM3HpAQggJhyB7vbu3bvEv3//ooszvH//XgnoOhNs+gACiBFLOuMDumDr69evORkZGbF5n0FMTOwCLy9vCrocQAAxUjPRAgQQCxYxns+fPxe9evWKCeoyUAz8R3aZqKjoBz4+vjlA7k9kjQABhC3MvvDw8Bzg5OQEhxEQswAxKwxzcHD8BsrPQjcIBAACCGsEAF10SFBQ8CMTE6o0MzMzg5CQ0Cug+G8glwNdH0AA4UwaQBfMAXoFJTq5ubn/AcXXwlIPuh6AAMJpGNB1n/n5+Q+zskISPAsLC4OAgMAWkDiyMmQ9AAGENzsBDToGNOATKCKABj9gY2M7h55SkDkAAQSOHTwYFOhywDRXCkzALATUMgAEEFXTGUAAUbVwBAgwANOq2SfFT4QDAAAAAElFTkSuQmCC');}
            &.desc {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGhSURBVHjaYvz//z8DtQBAADExUBEABBBBw/79+8f25s0bA6AP2AmpBQgggoZ9/PhRFYgFPn36pEtIPUAA4ZX89euXKNAgUVC4fvjwgeP3798gAxlxqQcIIJyGAQ1gBRqg+ufPHzAfaBAL0GAuoLgULj0AAYTTsB8/fih//fqVDVkM6FV2oDhOwwACiAlHoAu9e/dO4u/fv+jiDO/fv+cEuo4Xmz6AAGLBJvblyxd5oAs+MzFh2vX9+3cGoLwULy/vTXQ5gABipGaiBQggbC4T//z585NXr16xMDKCI+4nEP9FihgGUVHRh3x8fKZA7ldkjQABhC3MXvLw8DRycnKCwwiI2YGYC4Y5ODi+A+WN0Q0CAYAAwhoBQBe1CAoKPkIPM2ZmZgYhIaHLQPHvQC4/uj6AAMKZNIAusAR65ReyGDc39x+geBQsc6DrAQggnIYBXfeMn5+/jZWVFRK4LCwMAgICGUDx57j0AAQQOEDxYB5gLnhy586d/8B0d4CAWgaAACJkGAsw0G1ev379EpiAOQgZBhBAVE1nAAFE1cIRIMAAA78HV0qz7jkAAAAASUVORK5CYII=');}
        }
    }
    .search {
        @media print {
            display: none;
        }
        td {padding: 0;}
        input,select {border: none;}
        .hasSearch {
            background-color: springgreen;
        }
        div {
            position: relative;
        }
    }
    tr.selected {
        background-color: rgba(251, 255, 0, 0.23);
    }
    .menu {
        height: 30px;
        button[disabled] {
            cursor: default;
            opacity: 0;
        }
    
        &:not(.dropdown) {
            width:1px;
            >a {color:#656565;}
            i {
                font-size: 20px;
                display: inline-block;
                height:20px;
                color:inherit;
                transition: color 300ms ease;
            }
            >ul {
                left:0;
                margin: 0;
                padding: 0;
                list-style: none;
                button {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 12px;
                    padding: 3px 5px;
                }
            }
        }
        &.hover {
            position: relative;
            background-color: transparent;
            >a {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            >ul
            {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: absolute;
                width:0;
                opacity: 0;
                z-index: 1;
                overflow: hidden;
                background-color: inherit;
                >li {
                    width:100%;
                    button {
                        padding: 7px 5px;
                        margin: 5px;
                    }
                }
            }
            &:hover {
                background-color: inherit;
                >ul {
                    left: 100%;
                    width:auto;
                    opacity: 1;
                    transition: background-color 300ms ease, left 300ms ease,opacity 300ms ease;
                }
            }
            &.menu {
                li i {width:20px;}
                li i+span {padding-right: 5px;}
            }
            &.inline {
                span {display: none;}
                li i {padding: 0;}
                >ul {
                    display: flex;
                    flex-direction: row-reverse;
                    height:100%;
                }
            }
        }
        &.default {
            >a{display: none;}
            >ul {
                display:flex;
                flex-direction: row;
                height:100%;
                button {
                    margin-right: 5px;
                    i+span {padding-right: 7px;}
                }
            }
        }
        a.edit>i {color:#ffba1e;}
        a.send>i {color:#25b444;}
        a.delete>i {color:#f45858;}
    }
    tr:nth-last-child(-n + 5) {
        .menu:not(.dropdown) ul {bottom: 0;top:initial;}
    }
    tr:nth-last-child(n + 5) {
        .menu:not(.dropdown) ul {top: 0;bottom:initial;}
    }
}
.footer {
    display:flex;
    flex-direction: row;
    padding: 5px;
    font-size: 80%;
    >* {flex: 1;}
    .pagination {
        flex:1;
        >ul {
            float: right;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            list-style: none;
            margin:0;
            padding:0;
            overflow: hidden;
            border-radius: 4px;
            >li {
                margin: 0 3px;
                background-color:#fff;
                &.arrow  {
                    color: #777;
                    font-size: 20px;
                    button {display: flex;flex-direction: row;align-items: center;}
                    i {display:inline-block;height: 15px;}
                }
                &.active {
                    color:#fff !important;
                    background-color:#217cb9;
                }
                button {
                    min-width: 15px;
                    display: block;
                    padding:7px;
                    background-color: transparent;
                    border:none;
                    outline: none;
                    cursor: pointer;
                    text-align: center;
                    &:hover {background-color: rgba(145, 145, 145, 0.089);}
                }
            }
        }
    }
    .info {
        text-align: left;
        padding-top: 5px;
    }
    @media print {display: none;}
}
.progress {
    background-color: #f6f6f6;
}