body{
	background: #eee;
	
}

@media (max-width: 576px) {
  .text-sm {
    font-size: 0.875rem;
  }
}
@media (min-width: 992px) {
  .text-lg {
    font-size: 1.25rem;
  }
}
@media (max-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
}
@media (max-width: 576px) {
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}



#side_nav{
	background: #E8E8E8;
	min-width: 250px;
	max-width: 250px;
	transition: all 0.2s;
}
.content{
	min-height: 100vh;
	width: 100%;
}
hr.h-color{
	background: #eee;
}
.sidebar li.active{
	background: #eee;
	border-radius: 8px;
}
.sidebar li.active a, .sidebar li.active a:hover{
	color: #000;
	
}
.sidebar li a{
	color: #fff;
}
button .close-btn  {
  padding-right: 1.5rem !important;
}
@media(max-width:1900px){
	#side_nav{
		margin-left: -450px;
		position: absolute;
		min-height: 100vh;
		z-index: 1;
		
	}
	#side_nav.active{
		margin-left: 0;
	}
}
@media (max-width: 576px) {
  .text-sm {
    font-size: 0.875rem;
  }
}
@media (min-width: 992px) {
  .text-lg {
    font-size: 1.25rem;
  }
}
@media (max-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
}
@media (max-width: 576px) {
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.close-btn {
  background-color: #f44336; /* Set the background color */
  border: none; /* Remove the border */
  color: white; /* Set the text color */
  padding: 8px 16px; /* Add some padding */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove the underline */
  display: inline-block; /* Make it inline */
  font-size: 16px; /* Set the font size */
  margin: 4px 2px; /* Add some margin */
  cursor: pointer; /* Add a cursor on hover */
  border-radius: 4px; /* Add a rounded border */
}
@media (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

.close-btn:hover {
  background-color: #ff6666; /* Change the background color on hover */
}

.d-block {
  display: block !important;
}
/*
@media screen and (min-width: 992px) and (max-width: 1199px) {
.d-md-none {
  display: none !important;
}
}
*/


/* No CSS code is necessary for the navbar-expand-lg class. The class will automatically apply the appropriate styles for a responsive navbar in Bootstrap 5. */

/* However, you may want to add custom styles for the navbar, such as background color, text color, font size, etc. You can do this by targeting the appropriate CSS classes, such as .navbar, .navbar-brand, .navbar-nav, and .nav-link. */

.navbar {
  background-color: #f8f9fa; /* Set the background color */
  font-size: 16px; /* Set the font size */
}

.navbar-brand {
  font-weight: bold; /* Set the font weight */
}

.navbar-nav {
  margin-left: auto; /* Align the navbar items to the right */
}

.nav-link {
  color: #212529; /* Set the text color */
  font-weight: bold; /* Set the font weight */
}

.nav-link:hover {
  color: #007bff; /* Change the text color on hover */
}

.navbar-expand-lg {
  flex-wrap: nowrap;
}

.navbar-expand-lg .navbar-collapse {
  overflow-x: auto;
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.navbar-expand-lg .navbar-nav {
  flex-direction: row;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  
  .navbar-expand-lg .navbar-nav {
    flex-direction: column;
  }
  
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: static;
  }
}



.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M1 1h14M1 8h14M1 15h14'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 575.98px) {
  .navbar-light .navbar-nav .show > .nav-link,
  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.show,
  .navbar-light .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 0.9);
  }
}









	.card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-img-top {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}


.card-header {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header h5 {
  margin-bottom: 0;
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
		.text-center {
  text-align: center !important;
}
		@media (min-width: 768px) {
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
			
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  
}
			
}
		@media (min-width: 992px) {
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
			.col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  
}
}
		@media (min-width: 1200px) {
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
			.col-xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  
}
}
		@media (min-width: 576px) {
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}


.mb-3 {
  margin-bottom: 2rem;
}		
		

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
	.vidlenth{
	   width: 50%;
	}
}
.rounded-circle {
  border-radius: 50%;
}

.text-white {
  color: #fff;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}
.col-sm-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.text-warning {
  color: #ffc107;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-4 {
  margin-top: 1rem !important;
}
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: #f8f9fa;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
}


@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
	.col-sm-4 {
    flex: 0 0 auto;
  width: 33.333333%;
  max-width: 33.333333%;
  }
}

@media (max-width: 575.98px) {
  .col-xs-6 {
    flex: 0 0 auto;
    width: 50%;
  }
	.col-xs-4 {
   flex: 0 0 auto;
  width: 33.333333%;
  max-width: 33.333333%;
  }
}