html {
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    supported by Chrome and Opera */
}
body{
    color: #000000;
    
    @font-face {
        font-family: Segoe UI;
        src: url(fonts/SEGOEUI.ttf);
    }
    @font-face {
        font-family: Segoe UI Light;
        src: url(fonts/SEGOEUILT.ttf);
    }
}
.upcoming{
    width: 120px;
    height: 120px;
    background-size: cover;
    border-radius: 5px;
    margin: 5px;
    display:inline-block;
}
.upcomingOverlay{
    background: rgba(0,0,0,0.6);width: 100%;height: 100%;border-radius: 5px;text-align: center;display: none;
}
.deletebt{
    padding: 8px 10px 0px 0px;font-size: 12px;color: #fff;border-radius: 6px;margin: auto;cursor: pointer;display: inline-block; width: 100%;text-align: right;
}
.usebt{
    padding: 2px 8px 2px 8px;font-size: 11px;color: #fff;border-radius: 6px;text-align: center;margin: auto;cursor: pointer;display: inline-block; border: 1px #fff solid;margin: auto;
}
.tagFamily{
    color: #fff;margin: auto;text-align: center;font-size: 14px;height: 56px;
}
/*---------- 
The Snackbar 
-----------*/

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 120px; /* Set a default minimum width */
    background-color: #3273dc; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 10px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    right: 30px; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
    border-radius: 50px;
    font-size: 12px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* ScrollBar Styles */


.scrollbar
{
    height: 260px;
    margin-top: 20px;
    overflow-y: scroll;
}

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #FFFFFF;
    border-radius: 50px;
}

#style-3::-webkit-scrollbar
{
    width: 5px;
    background-color: #FFFFFF;
    border-radius: 50px;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border-radius: 50px;
}


/* Downloading Gradient border animation */

.blue-border{
    --borderWidth: 5px;
    position: relative;
}
.gradient-border {
    --borderWidth: 5px;
    position: relative;
}
.blue-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: #eee;
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}
.gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}


@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
