/*TOPMENU STARTS*/
center {
    display: none;
}

.topmenu {
    position: relative;
    height: 48px;
    background-color: #333;
}

    .topmenu .back, .topmenu .user-menu, .topmenu .league-menu {
        position: absolute;
        left: 2%;
        color: white;
        top: 50%;
        transform: translateY(-50%);
    }

    .topmenu .leaguedropdown {
        margin-left: 90px;
    }

    .topmenu .user-menu {
        right: 2%;
        left: auto;
    }

    .topmenu .league-menu {
        color: inherit;
    }

.league-menu .league-dropdown {
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    background-color: #333;
    font-weight: bold;
    width: 180px;
    height: 26px;
    margin-top: 2px;
    box-shadow: 0 0 10px grey;
    border: 2px solid white;
    text-indent: 5px;
    display: inline-block;
    cursor: pointer;
}

.topmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center
}

.topmenu li {
    display: inline-block;
    border-right: 1px solid #bbb;
}

    .topmenu li:last-child {
        border-right: none;
    }

    .topmenu li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        /* Change the link color to #111 (black) on hover */
        .topmenu li a:hover {
            background-color: #111;
        }

.active {
    background-color: #4CAF50;
}

.logout {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.logo {
    display: inline-block;
    left: 1%;
}

a:focus, a:hover {
    color: inherit;
}

.hamburger-menu {
    display: none;
}

@media only screen and (max-width: 850px) {
    .logo {
        display: inline-block;
        vertical-align: top;
    }

    .back, .topmenu {
        display: none;
    }

    .hamburger-menu {
        display: block;
        background-color: #333;
        position: relative;
    }

        .hamburger-menu .normalUl {
            margin: 0;
            padding: 0 0 0 40px;
            /*overflow: hidden;*/
            background-color: #333;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: calc(100% - 150px);
        }

        .hamburger-menu .user-menu {
            position: static;
            display: block;
            width: 100%;
            background-color: #333;
            height: 40px;
            text-align: center;
            padding: 10px 0;
            transform: none;
        }

        .hamburger-menu .normalUl li {
            display: inline-block;
            border-right: 1px solid #bbb;
        }

            .hamburger-menu .normalUl li:last-child {
                border-right: none;
            }

            .hamburger-menu .normalUl li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

        /* Change the link color to #111 (black) on hover */
        .hamburger-menu li a:hover {
            background-color: #111;
        }

        .hamburger-menu .leaguedropdown {
            display: inline-block;
            margin-top: -5px;
        }

    #menu__toggle {
        opacity: 0;
        float: right;
    }

    .menu__btn {
        float: right;
    }

    #menu__toggle:checked + .menu__btn > span {
        transform: rotate(45deg);
    }

        #menu__toggle:checked + .menu__btn > span::before {
            top: 0;
            transform: rotate(0deg);
        }

        #menu__toggle:checked + .menu__btn > span::after {
            top: 0;
            transform: rotate(90deg);
        }

    #menu__toggle:checked ~ .menu__box {
        right: 0 !important;
    }

    .menu__btn {
        position: absolute;
        top: 22px;
        right: 12px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        z-index: 1;
    }

        .menu__btn > span,
        .menu__btn > span::before,
        .menu__btn > span::after {
            display: block;
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transition-duration: .25s;
        }

            .menu__btn > span::before {
                content: '';
                top: -8px;
            }

            .menu__btn > span::after {
                content: '';
                top: 8px;
            }

    .menu__box {
        display: block;
        position: fixed;
        top: 48px;
        right: -150%;
        width: 300px;
        margin: 0;
        padding: 0 0;
        list-style: none;
        background-color: #333;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        transition-duration: .25s;
        z-index: 2;
    }

    .menu__item {
        display: block;
        padding: 12px 24px;
        color: #fff;
        /*font-family: 'Roboto', sans-serif;
        font-size: 20px;*/
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
    }

        .menu__item:hover {
            background-color: #CFD8DC;
        }
}

.showmicro {
    display: none;
}

.hidemicro {
    display: block;
}

@media only screen and (max-width: 300px) {

    .showmicro{
        display:block !important;
    }
    .hidemicro{
        display:none !important;
    }
}





    /*TOPMENU ENDS*/

    body {
        height: 100vh;
        margin: 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: snow;
        background-image: linear-gradient(19deg, #123 0%, #FEDCBA 100%);
        margin: 0px;
        padding: 0px;
    }

    h1, h2, h3, h4 {
        font-weight: bold;
    }

    table {
        box-shadow: 0 0 10px grey;
        border-collapse: collapse;
        border-radius: 1em;
        overflow: hidden;
    }

    thead {
        color: white;
    }

        thead tr {
            background-color: #333;
        }

    tbody tr:nth-child(even) {
        background: #f5f5f5
    }

    tbody tr:nth-child(odd) {
        background: #eaeaea
    }



.notification {
    /* circle shape, size and position */
    position: absolute;
    right: -0.7em;
    top: 0.1em;
    min-width: 1.8em; /* or width, explained below. */
    height: 1.8em;
    border-radius: 0.8em; /* or 50%, explained below. */
    border: 0.05em solid white;
    background-color: red;
    /* number size and position */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: white;
}

.hamburger-menu .notification{
    left: 36px;
    right: auto;
}

a:focus {
    outline: none !important;
    outline-offset: 0 !important;
}