.table.sortable
{
    background: #4CAF50;
}

.table.sortable #table-sortable-top-wrapper
{
    /* 
        Inline elements always have white spaces between them - this hack removes them 
        I could opt-in and remove this hack and fuck w/ the font size instead
        but iirc that was a pain to work with so yeah
    */
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    margin: 0 auto;
    color: white;
}

#table-sortable-searchform
{
    /* Margin left is used to align the search form to the right, this only works when using flexboxes */
    margin-left: auto;
}

#table-sortable-entryperpageform-actual select
{
    display: inline-block;

    /*  Because the default sizing mode is not the same as the mode used by input elems causing the sizes to differ */
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    padding: 5px;

    /* Hack to forcibly remove user agent CSS */
    -webkit-padding-start: 5px;
    -webkit-padding-after: 5px;
    -webkit-padding-before: 5px;
    -webkit-padding-end: 5px;
    -moz-padding-start: 5px;
    -moz-padding-after: 5px;
    -moz-padding-before: 5px;
    -moz-padding-end: 5px;
    margin: 0;
    border: none;
    min-height: 20px;
    /* Select elements have a size which depends on the... font size */
    font-size: 14px;
    background: #4CAF50;
    color: white;
}

.table.sortable #table-sortable-searchform-actual input
{
    display: inline-block;
    padding: 10px;

    /* Hack to forcibly remove user agent CSS */
    -webkit-padding-start: 5px;
    -webkit-padding-after: 5px;
    -webkit-padding-before: 5px;
    -webkit-padding-end: 5px;
    -moz-padding-start: 5px;
    -moz-padding-after: 5px;
    -moz-padding-before: 5px;
    -moz-padding-end: 5px;
    margin: 0;
    border: none;
    min-height: 20px;

    /* Select elements have a size which depends on the... font size */
    font-size: 14px;
    background: #4CAF50;
    color: white;
}

.table.sortable #table-sortable-searchform-actual input:focus                           { outline: none; }
.table.sortable #table-sortable-entryperpageform-actual select:focus                    { outline: none; }

.table.sortable #table-sortable-searchform-actual input::placeholder                    { color: white; }
.table.sortable #table-sortable-searchform-actual input::-webkit-input-placeholder      { color: white; }
.table.sortable #table-sortable-searchform-actual input::-moz-placeholder               { color: white; }
.table.sortable #table-sortable-searchform-actual input::-ms-input-placeholder          { color: white; }

.table.sortable #table-sortable-actual-table-wrapper
{
    overflow-x: auto;
    overflow-y: hidden;
}

.table.sortable #table-sortable-actual-table
{
    /* Draw this after drawing the top header - makes sure the table header casts a shadow on the top header (which holds a search form and other crap) */
    position: relative;
    z-index: 1;
    width: 100%;
    font-family: "Raleway";
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
}

.table.sortable #table-sortable-actual-table > thead
{
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.table.sortable #table-sortable-actual-table > thead > tr, .table.sortable #table-sortable-actual-table > tbody > tr
{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.table.sortable #table-sortable-actual-table > thead > tr > th
{
    font-size: 90%;
    text-align: left;
    padding: 1%;
    cursor: pointer;
    transition: 0.5s background-color, 0.5s color;
    -webkit-transition: 0.5s background-color, 0.5s color;
    -moz-transition: 0.5s background-color, 0.5s color;
    -ms-transition: 0.5s background-color, 0.5s color;
    -o-transition: 0.5s background-color, 0.5s color;
}

.table.sortable #table-sortable-actual-table > thead > tr > th:hover
{
    background-color: #4CAF50;
    color: white;
}

.table.sortable #table-sortable-actual-table > thead > tr > th i
{
    font-size: 125%;
}

.table.sortable #table-sortable-actual-table > tbody > tr
{
    transition: 0.5s background-color;
    -webkit-transition: 0.5s background-color;
    -moz-transition: 0.5s background-color;
    -ms-transition: 0.5s background-color;
    -o-transition: 0.5s background-color;
}

.table.sortable #table-sortable-actual-table > tbody > tr:nth-child(even)
{
    background: rgb(242, 242, 242);
}

.table.sortable #table-sortable-actual-table > tbody > tr:hover
{
    background: rgb(221, 221, 221);
    cursor: default;
}

.table.sortable #table-sortable-actual-table > tbody > tr > td
{
    padding: 5px;
}

.management-btns-wrapper
{
    min-width: 100px;
}

.table.sortable #table-sortable-actual-table > thead > tr > th, .table.sortable #table-sortable-actual-table > tbody > tr > td
{
    white-space: nowrap;
}

.table.sortable .table-sortable-btn
{
    font-size: 125%;
    opacity: 0.5;
    transition: 0.5s opacity, 0.5s text-shadow;
    -webkit-transition: 0.5s opacity, 0.5s text-shadow;
    -moz-transition: 0.5s opacity, 0.5s text-shadow;
    -ms-transition: 0.5s opacity, 0.5s text-shadow;
    -o-transition: 0.5s opacity, 0.5s text-shadow;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
    filter: alpha(opacity=50); /* IE 5-7 */
}

.table.sortable .table-sortable-btn:hover
{
    opacity: 1.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
    filter: alpha(opacity=100); /* IE 5-7 */
}

.table.sortable .table-sortable-btn-solid
{
    font-family: "Arial";
    font-weight: bold;
    font-size: 80%;
    padding: 3px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: white;
    text-decoration: none;
    transition: 0.5s background-color;
    -webkit-transition: 0.5s background-color;
    -moz-transition: 0.5s background-color;
    -ms-transition: 0.5s background-color;
    -o-transition: 0.5s background-color;
}

.table.sortable .table-sortable-btn.success                         { color: green; }
.table.sortable .table-sortable-btn.success:hover	                { background: transparent !important; text-shadow: 0 0 1px green; }
.table.sortable .table-sortable-btn.warning                         { color: orange;  }
.table.sortable .table-sortable-btn.warning:hover                   { background: transparent !important; text-shadow: 0 0 3px orange; }
.table.sortable .table-sortable-btn.danger                          { color: red; }
.table.sortable .table-sortable-btn.danger:hover                    { background: transparent !important; text-shadow: 0 0 1px red; }
.table.sortable .table-sortable-btn.info                            { color: blue; }
.table.sortable .table-sortable-btn.info:hover                      { background: transparent !important; text-shadow: 0 0 1px blue; }

.table.sortable .table-sortable-btn.no-access                       { color: red; cursor: not-allowed; }
.table.sortable .table-sortable-btn.no-access:hover                 { background: transparent !important; text-shadow: 0 0 1px red; }

.table.sortable .table-sortable-btn-solid.success                   { background-color: green !important; }
.table.sortable .table-sortable-btn-solid.success:hover             { background-color: darkgreen !important; }
.table.sortable .table-sortable-btn-solid.warning                   { background-color: orange !important; }
.table.sortable .table-sortable-btn-solid.warning:hover             { background-color: darkorange !important; }
.table.sortable .table-sortable-btn-solid.danger                    { background-color: red !important; }
.table.sortable .table-sortable-btn-solid.danger:hover              { background-color: darkred !important; }
.table.sortable .table-sortable-btn-solid.no-access                 { background-color: darkred !important; cursor: not-allowed; }

/*
    PAGINATION CODE 
*/ 
.pagination-outer-wrapper
{
    font-size: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagination-outer-wrapper a
{
    display: inline-block;
    font-family: Arial;
    font-size: medium;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    color: #636b6f;
    border: 1px solid #ddd;
    transition: 0.5s background-color, 0.5s color, 0.5s border;
    -webkit-transition: 0.5s background-color, 0.5s color, 0.5s border;
    -moz-transition: 0.5s background-color, 0.5s color, 0.5s border;
    -ms-transition: 0.5s background-color, 0.5s color, 0.5s border;
    -o-transition: 0.5s background-color, 0.5s color, 0.5s border;
}

.pagination-outer-wrapper a.dots
{
    cursor: not-allowed;
}

.pagination-outer-wrapper a:hover:not(.active):not(.dots)
{
    color: white;
    border: 1px solid #4CAF50;
    background-color: #4CAF50;
}

.pagination-outer-wrapper a:first-child 
{
    border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
}

.pagination-outer-wrapper a:last-child 
{
    border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
}

.pagination-outer-wrapper > .active
{
    font-weight: bold;
    color: white;
    border: 1px solid #4CAF50;
    background-color: #4CAF50;
}

.select-all-btn
{
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 0.75%;
    border: none;
    cursor: pointer;
    background: transparent;
    color: white;
    transition: 0.5s background-color;
    -webkit-transition: 0.5s background-color;
    -moz-transition: 0.5s background-color;
    -ms-transition: 0.5s background-color;
    -o-transition: 0.5s background-color;
}

.select-all-btn.success                 { background: green !important; }
.select-all-btn.success:hover           { background: darkgreen !important; }
.select-all-btn.warning                 { background: orange !important; }
.select-all-btn.warning:hover           { background: orangered !important; }
.select-all-btn.danger                  { background: red !important; }
.select-all-btn.danger:hover            { background: darkred !important; }

.select-all-btn:focus
{
    outline: none;
}

.text-ellipsis-col
{
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}