@charset "UTF-8";
/*Start: Styles For the TopNavigationbar.jsp */
        /* Start: Style to make the topNavigation bar fixed position */
    .navbar.fixed-top {
    position: fixed; /* Fix the navigation bar */
    top: 0; /* Position it at the top */
    width: 100%; /* Make it full width */
    z-index: 1000; /* Set a higher z-index to ensure it appears above other content */
    background-color: whitesmoke; /* Set background color to blue */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    animation: fadeIn 0.8s ease; /* Apply fade-in animation */
}

        /* Dropdown menu styles */
        .dropdown-menu {
            display: none; /* Hide the dropdown menu by default */
            position: absolute;
            background-color: ghostwhite;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            animation: slideDown 0.3s ease; /* Apply slide-down animation */
        }

        .nav-item:hover .dropdown-menu {
            display: block; /* Show the dropdown menu on hover */
            background-color: whitesmoke;/* Change background color on hover */
        }

        /* Navigation link styles */
        
    /* Navigation link styles with animation */
        /* Animation for navbar fade-in */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Animation for dropdown slide-down */
        @keyframes slideDown {
            from {
                opacity: 1;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
/*End: Styles for the TopNavigationbar.jsp*/

/*Start: STYLES FOR THE WEBFOOTER*/
.WebFooter a{
	text-decoration: none;
}
/*END: STYLES FOR THE WEBFOOTER*/

/*Start: Styles for the Search bars pages */
        /* Add custom styles for the search box */
        header {
            background-color: #f8f9fa; /* Set background color for the header */
            padding: 20px 0; /* Add padding to the header */
        }

        .SearchBox {
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); /* Add a subtle box shadow */
            border-radius: 5px; /* Add border-radius for rounded corners */
        }

        .SearchBox input[type="search"] {
            width: 80%; /* Set the width of the search input */
            padding: 10px; /* Add padding to the search input */
            border: none; /* Remove default border */
            border-radius: 5px; /* Add border-radius for rounded corners */
            outline: none; /* Remove outline on focus */
        }

        .SearchBox i.fa-search {
            font-size: 20px; /* Set the font size of the search icon */
            color: #007bff; /* Set the color of the search icon */
            cursor: pointer; /* Add a pointer cursor for better usability */
        }
/*End: Styles for the Search bars pages */

    /*Start:Styles for the Upload contents options Page*/
        .UploadOptions .card-deck {
            margin-top: 50px;
              
        }

        .UploadOptions .card {
            margin-bottom: 10px;
            
        }

        .UploadOptions .card-img-top {
            max-height: 150px;
            object-fit: cover;
        }
/*End:Styles for the Upload contents options Page*/
        
/*START: Login Form Syles */
       /* Additional Styles for Better UI/UX */
        .form-container {
            margin: auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 5%;
        }

        .form-container b {
            display: block;
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        .form-container label {
            font-size: 0.9em;
        }

        .form-container button {
            width: 100%;
            margin-top: 15px;
        }

        .form-container .forgotPass a {
            color: #007bff;
            text-decoration: none;
        }
/*END: Login Form Styles*/

/*START: REGISTRATION FORM STYLE*/
      /* Custom styles for the registration form */
        #registrationForm {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box-shadow to the form */
            padding: 20px; /* Add some padding for better spacing */
            border-radius: 10px; /* Add border radius for rounded corners */
            margin-top: 5%;
            background-color: #ffffff;
        }
/*END : REGISTRATION FORM STYLES*/



    /*Start:Styles for muted loop autoplay onmouseOver on the videos
        .thumbnail:hover video {
            display: block;
        }*/
        .thumbnail video {
            display: none;
            width: 100%;
        }
/*End:Styles for muted loop autoplay onmouseOver on the videos*/
        
/*START:Styles for the WatchVideo.jsp Page */
        
       /* Add custom styles here */
        .video-frame {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .video-list {
            padding-top: 25px;
        }

        .profile-image {
            width: 50px; /* Adjust the width as needed */
            height: 50px; /* Adjust the height as needed */
            border-radius: 50%; /* Make it circular */
            margin-right: 10px; /* Add some spacing between the image and video title */
        }

        /* Custom styles to prevent collapsing columns on small screens */
        @media (max-width: 767.98px) {
            .col-md-8,
            .col-md-4 {
                margin-bottom: 330px;
            }
        }
      /*Style for the share Icon*/
        .share-icon{
			cursor: pointer;
		}
/* Arrange like and dislike icons horizontally */
.like-dislike-icons {
    display: flex;
    align-items: center;
}

.like-dislike-icon {
    margin-right: 20px; /* Adjust the margin to add space between like and dislike icons */
}

/* Style for the like and dislike buttons */
.like-dislike-icons  {
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease-in-out; /* Add a smooth color transition */
}

/* Style for the like button */
   #likeBtn {
      color: #28a745; /* Green color for thumbs-up icon */
   }


#likeBtn :hover {
    color: #007bff; /* Blue color on hover effect for the likeBtn */
}

/* Style for the dislike button */
#dislikeBtn  {
    color: #dc3545; /* Red color for dislike button */
}

#dislikeBtn :hover {
    color: #007bff; /* Blue color on hover effect for the dislikeBtn */
}

/* Style for the count display */
.like-dislike-count {
    margin-left: 5px;
    background-color:white; /* Adjust the background color */
    color:black; /* Adjust the text color */
    border-radius: 40%;  /* Invalid value, should be a length or 'initial' */
    padding:5px;
    }  
 
         
/*Start:Video container styles*/
    .video-container {
        width: 90%; /* Adjust the width as needed */
        height: 10px; /* Maintain aspect ratio based on width */
        margin: 0 auto; /* Center the video container horizontally */

    }

    /* Add this style to make the video responsive within the container */
    .video-frame {
        width: 100%;
        height: auto;
    }
        /*Add this style to make thumbnail responsiveness within the container*/

        .thumbnail {
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
            .video-container {
                width: 100%;
                height: auto;
            }
        }
   /*End:Video container styles*/    
 /*ENDS:Styles for the WatchVideo.jsp Page */