#memberoverview-section
{
    margin: 10%;
}

#memberoverview-section > #gallery-lines
{
    position: relative;
}

#memberoverview-section > #gallery-lines > #orange-single
{
    display: block;
    position: absolute;
    z-index: -1;
    left: 34.825vw;
    bottom: -9.56vh;
    height: 10.93vh;
}

/* Default font settings */
#memberoverview-section > article > h1
{
    letter-spacing: 0.025em;
    color: rgb(78, 183, 71);
}

#member-overview-wrapper
{
    letter-spacing: -1em;
}

@media only screen and (max-width: 750px)
{
    #member-overview-wrapper > #memberoverview-alphabet-pagination
    {
        display: none;
    }

    #memberoverview-table
    {
        width: 100%;
    }
}

@media only screen and (min-width: 750px)
{
    #member-overview-wrapper > #memberoverview-alphabet-pagination
    {
        display: inline-block;
    }

    #memberoverview-table
    {
        width: 90%;
    }
}

#member-overview-wrapper > #memberoverview-alphabet-pagination
{
    vertical-align: top;
    letter-spacing: normal;
    width: 10%;
    min-width: 60px;
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner
{
    position: relative;
    z-index: 1;
    margin-left: auto;
    width: 60px;
    background: rgb(243, 243, 244);
    border-radius: 2.5px;
    -webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner > .single-letter
{
    position: relative;
    z-index: 1;
    font-family: "DIN Next LT Pro Black";
    font-size: 32px;
    height: 60px;
    width: 60px;
    background: transparent;
    border: none;
    line-height: 60px;
    font-style: italic;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    color: rgb(219, 220, 223);
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner > .single-letter:hover
{
    color: rgb(78, 183, 71);
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner > .single-letter:focus
{
    outline: none;
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner > .single-letter.active
{
    color: rgb(78, 183, 71);
}

#member-overview-wrapper > #memberoverview-alphabet-pagination > #inner > .single-letter.active:after
{
    position: absolute;
    content: "";
    left: -10px;
    top: 5px;
    z-index: -1;
    height: 50px;
    width: 95%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: white;
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

#memberoverview-table
{
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    font-family: "DIN Next LT Pro";
    font-size: 20px;
    color: rgb(60, 70, 80);
    border-collapse: collapse;
    border-spacing: 0px;
}

#memberoverview-table th
{
    text-align: left;
    font-family: "DIN Next LT Pro";
    text-transform: uppercase;
    font-size: 12.5px;
    color: rgb(160, 165, 170);
    border-bottom: 2.5px solid rgb(245, 245, 245);
}

#memberoverview-table td
{
    white-space: nowrap;
    border-bottom: 1px solid rgb(245, 245, 245);
}

#memberoverview-table th, #memberoverview-table td
{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 17.5px;
    padding-bottom: 17.5px;
}

#memberoverview-table tbody tr
{
    cursor: pointer;
}

#memberoverview-table tbody tr td
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

#memberoverview-table tbody tr td:nth-child(1)
{
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

#memberoverview-table tbody tr td:not(:nth-child(1))
{
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

/* VIEW DETAILS BTNS */
.view-details-btns
{
    width: 195px;   
    white-space: nowrap;
}

.view-details-btns > .rounded-btn,
.view-details-btns > .view-details-btn
{
    display: inline-block;
    vertical-align: middle;
}

.view-details-btns > .rounded-btn
{
    display: inline-block;
    color: white;
    background-color: rgb(11, 24, 39);
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    height: 30px;
    width: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.view-details-btns > .rounded-btn > i
{
    line-height: 30px;
}

.view-details-btns > .rounded-btn:hover
{
    background: rgb(78, 183, 71);
    opacity: 1.0;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.view-details-btns > .view-details-btn
{
    height: 30px;
    margin-left: 1.5em;
}

.view-details-btns > .view-details-btn > img
{
    display: block;
    height: 90%;
    margin-top: 5%;
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}

.alphabet
{
    display: none;
}

.alphabet-group
{
    font-family: "DIN Next LT Pro";
    font-size: 60px;
    color: rgb(78, 183, 71);
    font-weight: 900;
    text-align: right;
    font-style: italic;
    text-transform: uppercase;
}

.memberoverview-table-actual-wrapper
{
    overflow-x: auto;

    /* Hack which fixes the broken scrollbar behavior */
    position: relative;
    right: -20px;
    padding-right: 20px;
}

/*
    WONT WORK ON FIREFOX
*/
.memberoverview-table-actual-wrapper::-webkit-scrollbar 
{
    height: 10px;
}

.memberoverview-table-actual-wrapper::-webkit-scrollbar-track 
{
    background: transparent;
}

.memberoverview-table-actual-wrapper::-webkit-scrollbar-thumb 
{
    background: rgb(78, 183, 71);
    border-radius: 5px;
}

.memberoverview-letter
{
    text-align: right;
    margin-bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.memberoverview-letter:first-of-type
{
    margin-top: 40px;
}

.memberoverview-letter:not(:first-of-type)
{
    margin-top: 70px;
}

table.dataTable.no-footer
{
    border: none;
}