/* ---------Top Nav Container ----------- */
.topnavcontainer{
  
	background: #F8F8F8;
	position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;

  font-family: 'IBM Plex Sans', sans-serif;
}

/* ----- Top Nav Container Link ------------------*/
.link-animation {
  padding-bottom: 0;
  margin-bottom: 0;
  
}

/* ------Top Nav Container Links Animation -------*/
.link-animation::after{
  margin-top:0.5rem;
	white-space: pre;
	content: ' ';
	display: block;
	font-size: 0.3rem;
	
	background-image: linear-gradient(270deg, #21D4FD 0%, #B721FF 24%);

	width: 0%;
	transition: all ease-in-out 250ms;
}

.link-animation:hover::after{
	width: 100%; 
}
.link-animation:focus::after{
	width: 100%; 
}
/* ------------------------------------------------ */

/* ----------------------------------------------- */
.navbar .navbar-nav .nav-item {
  color: black;
}

/*------Empty-----*/
.empty{

  	height: 25px;
  	width: 100%;
    
}

/* ------------ */

/* ------------SideBar----------- */
button:focus {outline:0;}
#sidebardropbutton{border-width: 0; padding:0; background: #F8F8F8;}
#sidebar {
	position: fixed;
  	top: 0pc;
  	left: 0;
  	z-index: 2;
  	width: 100%;

  	font-family: 'IBM Plex Sans', sans-serif;
}

.wrapper {
    display: flex;
    min-width: 100vw;
    width: 100%;
    align-items: stretch;
}

#sidebar, #sidebarback {
    min-width: 175px;
    max-width: 175px;
    min-height: 80vh;
}

#sidebar, #sidebarback {
    margin-left: -175px;
}
#sidebar.active, #sidebarback.active {
    margin-left: 0;
}

#sidebar {

    /* background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); */
    background:  #1e2229; 
   /*background-image: linear-gradient( 181.2deg,  rgba(181,239,249,1) 10.5%, rgba(254,254,254,1) 86.8% ); */
    transition: all 0.3s;
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: bold;
    color: #fff;
    overflow-y: auto;
    
    bottom: 0;
    scrollbar-width: thin;
  
}

/* ------------If using drop down pop up in side bar----------- */
.dropdown-menu{
  font-size: smaller;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
/* ----------------------- */

/* ------------List Items in Top Part Of Side Bar----------- */
/*-----------Main Category Buttons------------*/
.list-category-button {
  display: block; border-radius: 10px;
  margin: 5px;padding: 10px;
  
  transition: 0.5s;
  background-size: 200% auto;
  
  text-align: center; font-size: smaller; font-weight: bold;color: rgb(232, 182, 255);
  
}
.list-category-button{background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%);}
.list-category-button:hover, .list-category-button:focus, .list-category-button:active
{background-image: linear-gradient(to right, #9733EE 75%, #DA22FF 26%, #9733EE 0%); color: rgb(232, 182, 255);}

/*------------Individual List of Tags After Their Category Buttons----*/
.list-tags > li >a{
  /*display: block;*/
  text-decoration: none; /* This removes bullet points */
  color: inherit;
  transition: all 0.3s;
  padding-left: 10px;padding-top: 5px;padding-bottom: 5px;
}

.list-tags > li >a:hover, .list-tags > li >a:focus, .list-tags > li >a:active, .list-tags > li >a[aria-expanded="true"]{
  color: #B721FF;
}
.list-tags > li >a:visited {/*color: #fd9d51;*//*color:#66bb6a;*//*color:#e0163f;*/color:inherit;}

#toplist a, #toplist a:hover, #toplist a:focus {
    color: inherit;
    text-decoration: none; /* This removes bullet points */
    transition: all 0.3s;
}

#toplist{padding-bottom: 20 px;}


#toplist li a {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
 
  display: block;
}

#toplist li:hover {
  background: #81889;
}

#toplist li a:hover {
  color: #B721FF;
}
#toplist li a:focus {
  color: #B721FF;
}

#toplist li.active > a, a[aria-expanded="true"] {
  color: #fff;
  background: #81889;
}


/* -----------Side Bar Text Spacing and Alignment------------ */
#sidebar .sidebar-header {
  margin-left: 0px;
	padding-left: 0;
  margin-top: 23px;
  margin-bottom: 10px;
   
  text-align: center;
  min-height: 30px;

}
#sidebarsearch{ margin-top:0px; width: 100%; font-size: x-small; height: 30px; border-radius: 10px}
#sidebarsearch:focus{outline: none; }

#sidebar .sidebar-header .container-fluid .form-control{
	font-size: xx-small;
}

/*---------Custom Search Bar-------------*/
    .searchbar{
    margin-bottom: auto;
    margin-top: auto;
  
    background-color: #353b48;
    border-radius: 10px;
    
    }

    .search_input{
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color:transparent;
    transition: width 0.4s linear;
    }

    .searchbar:hover > .search_input{
    padding: 0 10px;
    width: 125px;
    caret-color: #B721FF;
    transition: width 0.4s linear;
    }

    .searchbar:hover > .search_icon{
    background: white;
    color: #B721FF;
    }


  /* @media (max-width: 1366px){*/
        .searchbar > .search_input {
        padding: 0 10px;
        width: 125px;
        caret-color: #B721FF;
        transition: width 0.4s linear;
       
      }
    /*}*/

  /* @media (max-width: 1366px){*/
    .searchbar > .search_icon{
    background: white;
    color: #B721FF;
    }
  /*}*/
  
    .search_icon{
    height: 30px;
    width: 30px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color:white;
    }

  .fabutton {
  background: none;
  padding: 0px;
  border: none;
}
/* ------------------------------ -------------------*/



/* ----------------- Divider Line ! -------------------*/

#sidebar ul.components {
	
    border-bottom: 1px solid #818896;
   
    padding-bottom: 0;
}

/* ------------------------------ -------------------*/



#bottomlist {
    padding: 10px;
    
    display: block;
    
    text-align: center;
}

#bottomlist li a {
     color: #fff; 
}
#bottomlist li a:hover {
    /* color: #B721FF; */
}

#bottomlist a::after{
	white-space: pre;
	content: ' ';
	display: block;
	font-size: 0.3em;
	 
	
	background-image: linear-gradient(270deg, #21D4FD 0%, #B721FF 24%);


	bottom: 0;

	width: 0%;
	transition: all ease-in-out 250ms;
}

#bottomlist a:hover::after{
	width: 100%; 
}
#bottomlist a:focus::after{
	width: 100%; 
}


/* ----------------------------------------------- */

/* ------------Body Main & Page Content----------- */
#body-main {
  text-align: center;
  min-width: 75vw;
  background: transparent;
  
}

.pagecontent {
  
  text-align: center;
  
}

.alert {
  margin:0;
}

/* ----------------------------------------------- */

/* ------------Login Signup & Profile Pages----------- */

/* for signup page*/
/* for profile page*/

.content-form_update {
  background: #ffffff;
  padding: 10px 10px;

  /*border: 1px solid #dddddd;
  border-radius: 3px;*/
  
  width: 95%;
  margin: 0 auto;
  /* margin-top: 3rem !important; */

  }


  /* for profile pics */
  .account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
  object-position: cover;
}

.article-img {
  height: 65px;
  width: 65px;
 
  object-position: cover;
}

.article-img-small {
  height: 50px;
  width: 50px;
  object-position: cover;
}

.article-thumnail {
  
  object-position: cover;
}


.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3;
  text-align: left;
}

.article-metadata a:hover, .article-metadata a:focus {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-heading {
  font-size: 2.5rem;
}

/* ----------------------------------------------- */

.form-text ul{
  list-style: none;
}