.navbar {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        top: 95%;
    }
}

.nav-item.active {
    background-color: #05baf2;
    border-radius: 0.25rem;
}


/*Sidebar*/

.sidebar {
    height: 100%;
    top: 30px;
    width: 0;
    position: fixed;
    z-index: 2;
    left: 0;
    background-color: #8E44AD;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 6px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s;
}

.sidebar span {
    padding: 6px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #17202A;
}

.sidebar .closebtn {
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 36px;
    margin-left: 50px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    /*background-color: #f9f9f9;*/
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /*padding: 12px 16px;*/
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Dark Mode Button */

.floats {
position: fixed;
width: 60px;
height: 60px;
bottom: 5px;
left: 40px;
z-index: 1;
}

.switch input {
display: none; /* Hide the default checkbox */
}

.switch {
display: inline-block;
width: 60px; /* Width of the switch */
height: 30px; /* Height of the switch */
margin: 4px;
transform: translateY(50%);
position: relative;
}

.slider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 30px;
box-shadow: 0 0 0 2px #a2a2a2, 0 0 4px #a2a2a2; /* Shadow for the slider */
cursor: pointer;
border: 4px solid transparent;
overflow: hidden;
transition: 0.2s;
background-color: #080808; /* Background color of the slider */
}

.slider:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f1f1f1; /* Background color for the unselected state */
    border-radius: 30px;
    transform: translateX(-30px); /* Positioning for the unselected state */
    transition: 0.2s; /* Smooth transition */
}

input:checked + .slider:before {
transform: translateX(30px); /* Positioning for the selected state */
background-color: SteelBlue; /* Background color for the selected state */
}

input:checked + .slider {
box-shadow: 0 0 0 2px SteelBlue, 0 0 8px SteelBlue; /* Shadow for the selected state */
}

/* Optional: Add a transition for the whole switch */
.switch {
transition: all 0.3s ease; /* Smooth transition for the switch */
}

/* Optional: Additional styles for hover effects */
.slider:hover {
box-shadow: 0 0 0 2px #a2a2a2, 0 0 10px #a2a2a2; /* Subtle hover shadow */
}


.snowflake {
    color: #C0C0C0;
    font-size: 2em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px)
    }

    50% {
        transform: translateX(80px)
    }

    100% {
        transform: translateX(0px)
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: -5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration: 10s,3s;
    -webkit-animation-timing-function: linear,ease-in-out;
    -webkit-animation-iteration-count: infinite,infinite;
    -webkit-animation-play-state: running,running;
    animation-name: snowflakes-fall,snowflakes-shake;
    animation-duration: 10s,3s;
    animation-timing-function: linear,ease-in-out;
    animation-iteration-count: infinite,infinite;
    animation-play-state: running,running
}

.snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s,0s;
    animation-delay: 0s,0s
}

.snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s,1s;
    animation-delay: 1s,1s
}

.snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 6s,.5s;
    animation-delay: 6s,.5s
}

.snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 4s,2s;
    animation-delay: 4s,2s
}

.snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 2s,2s;
    animation-delay: 2s,2s
}

.snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 8s,3s;
    animation-delay: 8s,3s
}

.snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 6s,2s;
    animation-delay: 6s,2s
}

.snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 2.5s,1s;
    animation-delay: 2.5s,1s
}

.snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 1s,0s;
    animation-delay: 1s,0s
}

.snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 3s,1.5s;
    animation-delay: 3s,1.5s
}

.notification-badge {
    position: relative;
    top: -8px;
    right: 5px;
    font-size: 0.7em; /* Adjust the font size as needed */
    background-color: red;
    color: white;
    padding: 1px 4px; /* Adjust the padding as needed */
    border-radius: 3px;
}

.nav-link.dropdown-toggle::after {
    display: none; /* Hide the default dropdown arrow */
}

.custom-dropdown-menu {
    background-color: #e673dc;
    /* Add any other styles you want to apply */
}

/* Change the background color of selected/highlighted item */
.custom-dropdown-menu .dropdown-item:hover,
.custom-dropdown-menu .dropdown-item:active {
    background-color: #e673dc; /* Change this to your desired color */
}

.new-notification {
    position: relative;
}

.notification-label {
    position: absolute;
    top: 50%;
    left: -10px; /* Adjust the positioning as needed */
    transform: translateY(-50%);
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.7em; /* Adjust the font size as needed */
    font-weight: bold;
}