.nav a:hover {
    color: #fff;
}

a {
    text-decoration: none;
}

.fade-in-from-left-short {
    color: inherit;
    text-decoration: none;
}

.link-top {
    /*background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), radial-gradient(circle closest-side, #fff, #fff);*/
    background: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), linear-gradient( to right, #fff, #fff );
    background-size: 100% 3px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

    .link-top:hover {
        background-size: 0 3px, 100% 3px;
        color: #fff;
    }

.form-control {
    height: 50px;
}

.form-control:disabled {
    background-color: #fff;
}

.text-white-subtle {
    color: #ddd;
}

/*.nav-link.link-light {
    color: #ddd !important;
}

    .nav-link.link-light:hover, .nav-link.link-light:focus {
        color: #fff !important;
    }*/

/*** Custom table start ***/
.table-wrap {
    overflow-x: scroll;
}

.table {
    min-width: 1000px !important;
    width: 100%;
    -webkit-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
}

    .table thead th, .table thead td {
        border: none;
        padding: 30px;
    }

    .table thead tr {
        background: #fff;
        border-bottom: 4px solid #eceffa;
    }

    .table tbody tr {
        margin-bottom: 10px;
        border-bottom: 4px solid #f8f9fd;
    }

        .table tbody tr:last-child {
            border-bottom: 0;
        }

    .table tbody th, .table tbody td {
        border: none;
        padding: 30px;
        /*font-size: 14px;*/
        background: #fff;
        vertical-align: middle;
    }

        .table tbody td.status span {
            position: relative;
            border-radius: 30px;
            padding: 4px 10px 4px 25px;
        }

            .table tbody td.status span:after {
                position: absolute;
                top: 9px;
                left: 10px;
                width: 10px;
                height: 10px;
                content: '';
                border-radius: 50%;
            }

        .table tbody td.status .active {
            background: #cff6dd;
            color: #1fa750;
        }

            .table tbody td.status .active:after {
                background: #23bd5a;
            }

        .table tbody td.status .waiting {
            background: #fdf5dd;
            color: #cfa00c;
        }

            .table tbody td.status .waiting:after {
                background: #f2be1d;
            }

        .table tbody td .img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .table tbody td .email span {
            display: block;
        }

            .table tbody td .email span:last-child {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.3);
            }

        .table tbody td .close span {
            font-size: 12px;
            color: #dc3545;
        }

/*.checkbox-wrap {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/

/* Hide the browser's default checkbox */
/*.checkbox-wrap input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }*/

/* Create a custom checkbox */
/*.checkmark {
    position: absolute;
    top: 0;
    left: 0;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
        content: "\f0c8";
        font-family: "FontAwesome";
        position: absolute;
        color: rgba(0, 0, 0, 0.1);
        font-size: 20px;
        margin-top: -14px;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

@media (prefers-reduced-motion: reduce) {
    .checkmark:after {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
}*/

/* Show the checkmark when checked */
/*.checkbox-wrap input:checked ~ .checkmark:after {
    display: block;
    content: "\f14a";
    font-family: "FontAwesome";
    color: rgba(0, 0, 0, 0.2);
}*/

/* Style the checkmark/indicator */
/*.checkbox-primary {
    color: #40bfc1;
}

    .checkbox-primary input:checked ~ .checkmark:after {
        color: #40bfc1;
    }*/

/*** Custom table end ***/

.text-shadow-sm {
    text-shadow: 2px 2px 2px #000;
}

.text-shadow-none {
    text-shadow: 0 0;
}

.invert {
    filter: invert(100);
}

/* button hover start */

/*button {
    position: relative;
    appearance: none;
    padding: 1em 2em;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
}

    button span {
        position: relative;
        pointer-events: none;
    }

    button::before {
        --size: 0;
        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, #0952ff, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
    }

    button:hover::before {
        --size: 400px;
    }*/


/* Custom ul li start */

/* links */
.nfl a, .mlb a, .nhl a, .pga a {
    text-decoration: none;
    transition: color 0.2s ease-out;
}

/* wrapper */
.wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto 100px auto;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* lists */
.row ul {
    margin: 0;
    padding: 0;
}

    .row ul li {
        margin: 0;
        font-size: 16px;
        font-weight: normal;
        list-style: none;
        display: inline-block;
        width: 20%;
        box-sizing: border-box;

        @media only screen and (max-width:767px) and (min-width:480px) {
            font-size:13px;
        }

        @media only screen and (max-width:479px) {
            font-size:13px;
        }
    }

.title ul li {
    padding: 15px 13px;
}

.row ul li {
    padding: 5px 10px;
}

/* rows */
/*.row {
    padding: 20px 0;
    height: 30px;
    position: relative;*/
    /*overflow: hidden;*/
    /*transition: all 0.2s ease-out;
    border-top: 1px solid darken($light-bg, 100%);
}

    .row:hover {
        background-color: lighten($dark-bg, 10%);
        height: 65px;

        @media only screen and (max-width : 767px) {
            height:85px;
        }

        @media only screen and (max-width : 359px) {
            height:105px;
        }
    }*/

.title {
    padding: 25px 0 5px 0;
    height: 45px;
    font-size: 0;
    background-color: $light-bg;
    border-left: 3px solid lighten($light-bg, 100%);
}

    .title:hover {
        height: 45px;
        background-color: $light-bg;
        border-left: 3px solid lighten($light-bg, 100%);
    }

.title-hide {
    @media only screen and (max-width:767px) {
        display:none;
    }
}

.nfl {
    border-left: 3px solid darken($blue, 30%);
}

    .nfl:hover {
        border-left: 3px solid $blue;
    }

.mlb {
    border-left: 3px solid darken($green, 30%);
}

    .mlb:hover {
        border-left: 3px solid $green;
    }

.nhl {
    border-left: 3px solid darken($yellow, 30%)
}

    .nhl:hover {
        border-left: 3px solid $yellow;
    }

.pga {
    border-left: 3px solid darken($orange, 30%);
}

    .pga:hover {
        border-left: 3px solid $orange;
    }

/* row one - fadeIn */
.row-fadeIn-wrapper {
    opacity: 0;
    font-size: 0;
    height: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease-out;
    animation: fadeIn 0.4s ease-out 2s 1 alternate;
    animation-fill-mode: forwards;
}

    .row-fadeIn-wrapper:hover {
        height: 35px;

        @media only screen and (max-width : 767px) {
            height:55px;
        }

        @media only screen and (max-width : 359px) {
            height:75px;
        }
    }

.fadeIn {
    padding: 20px 0;
    font-size: 0;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}

    .fadeIn:hover {
        background-color: lighten($dark-bg, 10%);
    }

/* row two - fadeOut */
.row-fadeOut-wrapper {
    font-size: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease-out;
    animation: fadeOut 0.4s ease-out 8s 1 alternate;
    animation-fill-mode: forwards;
    opacity: 1;
    height: 65px;
}

    .row-fadeOut-wrapper:hover {
        height: 100px;
    }

/* update content */
.update-row {
    animation: update 0.5s ease-out 12s 1 alternate;
}

.update1 {
    position: absolute;
    top: 25px;
    display: inline-block;
    opacity: 1;
    animation: update1 1s ease-out 12s 1 alternate;
    animation-fill-mode: forwards;
}

.update2 {
    position: absolute;
    top: 25px;
    display: inline-block;
    opacity: 0;
    animation: update2 4s ease-out 13s 1 alternate;
    animation-fill-mode: forwards;
}

/* more content */
ul.more-content li {
    position: relative;
    top: 22px;
    font-size: 13px;
    margin: 0;
    padding: 10px 13px;
    display: block;
    height: 50px;
    width: 100%;

    @media only screen and (max-width:767px) {
        font-size:11px;
    }
}

/* keyframe animations */
@keyframes fadeIn {
    from {
        background: $light-bg;
        opacity: 0;
        padding: 0;
    }

    to {
        background: darken($light-bg,80%);
        opacity: 1;
        padding: 0 0 65px 0;
    }
}

@keyframes fadeOut {
    from {
        background: darken($light-bg,80%);
        opacity: 1;
        height: 65px;
    }

    to {
        background: $light-bg;
        opacity: 0;
        height: 0;
    }
}

@keyframes update {
    0% {
        background: darken($light-bg,80%);
    }

    50% {
        background: $light-bg;
    }

    100% {
        background: darken($light-bg,80%);
    }
}

@keyframes update1 {
    0% {
        opacity: 0;
    }

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}