/* Add your CSS styles here */
@import url('https://fonts.googleapis.com/css2?family=Vibur&display=swap');

form.login-form {
    max-width: 400px;
    margin: 0 auto;
}

.profile{
    max-width: 100% !important;
    margin: 0 auto;
}


.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.g-recaptcha {
    margin-top: 10px;
}

input[type="submit"] {
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #ddd; /* Add a 1px solid border with a light gray color */
  border-radius: 5px; /* Add a slight border radius for a rounded appearance */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
  background-color: #FFF;
}

main {
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 5px;
  background-color: #f8f9fa; /* Add a light gray background color */
}

footer {
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 0px;
  background-color: #444; /* Add a light gray background color */
}

footer .container {
	text-align: center;
	color: #FFF;
	background-color: #444;
	border: 0px;
	box-shadow: 0 0 0px #000;
}

header{
	display:unset;
	}

.tooltip-inner {
    background-color: #dc3545 !important;
    color: #fff ;
}

.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #dc3545 !important;
}

.badge-purple {
    color: #fff;
    background-color: #9400D3;
}

.btn-outline-purple {
    color: #9400D3 !important;
    border-color: #9400D3 !important;
}

.btn-outline-purple:not(:disabled):not(.disabled).active, .btn-outline-purple:not(:disabled):not(.disabled):active, .show>.btn-outline-purple.dropdown-toggle {
    color: #fff !important;
    background-color: #9400D3;
    border-color: #9400D3;
}

.btn-outline-purple:hover {
    color: #FFF !important;
    background-color: #9400D3;
    border-color: #9400D3;
}

.btn-purple {
    color: #FFF !important;
	background-color: #9400D3 !important;
    border-color: #9400D3 !important;
}

.btn-purple:not(:disabled):not(.disabled).active, .btn-outline-purple:not(:disabled):not(.disabled):active, .show>.btn-outline-purple.dropdown-toggle {
    color: #fff !important;
    background-color: #9400D3;
    border-color: #9400D3;
}

.btn-purple:hover {
    color: #FFF !important;
    background-color: #7800ac !important;
    border-color: #7800ac !important;
}

.btn .image-wrapper {
    display: inline-block;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.btn:hover .image-wrapper {
    transform: scale(1.25); /* Increase the scale to 150% on hover */
}

.btn:hover .image-wrapper img {
    animation: spin 4s linear infinite; /* Add a rotation animation on hover */
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}



/*--------- Red Pagination ---------*/
.red-pagination .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.red-pagination .pagination.pg-blue .page-item.active .page-link:hover {
    background-color: #dc3545;
}
.red-pagination .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: #dc3545;
    color: #fff;
}
.red-pagination .pagination .page-item .page-link {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: .9rem;
    color: black;
}
.red-pagination .pagination .page-item.active .page-link{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.red-pagination .page-link{
  border:none!important;
}
.red-pagination .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0;
}



/*--------- Purple Pagination ---------*/
.purple-pagination .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.purple-pagination .pagination.pg-blue .page-item.active .page-link:hover {
    background-color: #952bbb;
}
.purple-pagination .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: #952bbb;
    color: #fff;
}
.purple-pagination .pagination .page-item .page-link {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: .9rem;
    color: black;
}
.purple-pagination .pagination .page-item.active .page-link{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.purple-pagination .page-link{
  border:none!important;
}
.purple-pagination .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0;
}

.hrdivider {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

.hrdivider span {
  position: absolute;
  top: -11px;
  background: #fff;
  padding: 0 20px;
  font-weight: bold;
  font-size: 16px;
}

/*-- Sign Styles --*/
 .sign {
	 font-family: "Vibur", cursive !important;
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
}
 .sign span {
	 font-size: 1.75rem;
	 text-align: center;
	 line-height: 1;
	 color: #dc3545;
	 animation: neon 0.08s ease-in-out infinite alternate;
}
/*-- Animation Keyframes --*/
/*-- Animation Keyframes --*/
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(220, 53, 69, 0.92), 0 0 30px rgba(220, 53, 69, 0.34), 0 0 12px rgba(220, 53, 69, 0.52), 0 0 21px rgba(220, 53, 69, 0.92), 0 0 34px rgba(220, 53, 69, 0.78), 0 0 54px rgba(220, 53, 69, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(235, 56, 70, 0.98), 0 0 30px rgba(230, 51, 65, 0.42), 0 0 12px rgba(240, 61, 75, 0.58), 0 0 22px rgba(225, 46, 60, 0.84), 0 0 38px rgba(230, 51, 65, 0.88), 0 0 60px rgba(220, 53, 69, 1);
  }
}

/* Add the scroll-in animation when the items become visible */
.navbar-brand.animate-scroll-in {
  animation: scrollInAnimation 1.5s ease-in-out;
}

.navbar-brand.animate-scroll-out {
  animation: scrollOutAnimation 0.5s ease-in-out;
}

@keyframes scrollInAnimation {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scrollOutAnimation {
  from {
    opacity: 1;
    transform: translateX(0px);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

#searchUser{
	width:120px;
	transition:width .5s ease;
	}
#searchUser:focus{width:250px;}

<style>
  .input-group {
    position: relative;
  }

  #search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none; /* Hide initially */
    background-color: #fff; /* Ensure dropdown has background */
    border: 1px solid rgba(0, 0, 0, 0.15); /* Border styling */
    border-radius: 0.25rem; /* Rounded corners */
  }

  #search-results.show {
    display: block;
  }

  .dropdown-item-container {
    max-height: 200px; /* Optional: limit height */
    overflow-y: auto;  /* Optional: add scroll for overflow */
  }

  .dropdown-item {
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
	color: #FFF !important;
    background-color: #007bff !important;
  }

  .dropdown-item img {
    margin-right: 10px;
  }

  .dropdown-item-text {
    padding: 0.5rem 1rem;
  }
</style>