.w-100 {
    width:100%;
}

.flex-box {
    display:flex;
    width:100%;
}

.flex-box.end {
    justify-content:end;
}

    .flex-box.centered {
        align-items: center;
    }


.flex-box.fit-width {
    width:fit-content;
}


    .flex-box.p-6 {
        padding:6px;
    }

.flex-box.faded {
    color:gray;
}


.flex-box.small {
    font-size: 12px;
}


.user-dashboard-list-item {
    width: 100%;
    height: fit-content;
   
    /*border-bottom: var(--border);*/
    padding:15px;
    cursor:pointer;
    text-decoration:none;
}

.user-dashboard-list-item:hover {
    background-color: var(--transparency-small);
}

    .user-dashboard-container {
        width: 100%;        
        min-height: 100%;
    }

    .user-dashboard-row {
        width: 100%;
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .user-dashboard-card.no-border > .user-dashboard-card-body {
        border: none !important;
    }
    .user-dashboard-card {
        min-height: 350px;
        min-width: 250px;
        width: 100%;
        height: 100%;
        position: relative;
    }


    .user-dashboard-card-body {
        border: var(--border);
        /*border-radius: 10px;*/
        width: 100%;
        height: 100%;
    }


    .user-dashboard-card-content {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        height: calc(100% - 65px);
        /* padding: 10px;*/
    }

        .user-dashboard-card-content.scrollbars {
            max-height: 280px;
        }


    .user-dashboard-card-header {
        align-items: center;
        border-bottom: var(--border);
        padding: 10px;
    }

        .user-dashboard-card-header span {
            font-size: 16px;
            vertical-align: middle;
        }

        .user-dashboard-card-header a {
            font-size: 14px;
            vertical-align: middle;
            float: right;
            padding-right: 5px;
            color: dodgerblue;
        }



            .user-dashboard-card-header a:hover {
            }



        .user-dashboard-card-header i {
            font-size: 16px;
            line-height: 25px;
            vertical-align: middle;
        }

        .user-dashboard-card-header p {
            font-size: 12px;
            padding-left: 2px;
            color: gray;
        }

    .user-dashboard-card-loading {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .user-dashboard-card-nodata {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        color: indianred;
    }

    .user-dashboard-card.big {
        grid-column: span 2;
        grid-row: span 2;
    }


    @media only screen and (max-width: 800px) {
        .user-dashboard-row {
            grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        }

        .user-dashboard-card.big {
            grid-column: span 2;
            min-height: 50vh;
        }
    }

    @media only screen and (max-width: 600px) {
        .user-dashboard-row {
            grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        }

        .user-dashboard-card.big {
            grid-column: span 1;
            min-height: 50vh;
        }
    }


    .user-dashboard-leaderboard-ranking {
        display: flex;
        padding: 6px;
        padding-right: 12px;
        width: fit-content;
        position: relative;
    }

    .user-dashboard-leaderboard-ranking-icon {
        font-size: 35px;
        color: white;
    }

    .user-dashboard-leaderboard-ranking-icon-label {
        font-size: 12px;
        position: absolute;
        left: -2px;
        top: -6px;
        color: black;
        font-weight: bold;
        width: 100%;
        height: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        font-family: monospace;
    }

    .relative {
        position: relative;
    }

    .gold-medal {
        color: darkgoldenrod;
    }

    .silver-medal {
        color: #d7d7d7;
    }

    .bronze-medal {
        color: #cd7f32;
    }



    .user-leaderboard-container {
        width: 100%;
        min-height: 100%;
        height: 100%;
        display: flex;
    }

.dash-invite-buttons {
    
}


.dash-invite-buttons i {
    font-size:25px;
}

#dashboard-map {
    width: 100%;
    height: 100%;
}