/* NOTE: ALL CODE WITHING THIS PROJECT WAS WRITTEN BY WEPERCH TECHNOLOGIES LTD FOR ASSISTANCE CONTACT info@weperch.com */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin:0px;
  font-family: 'Inter', sans-serif;     
}
body{
height: 100vh;
}
:root,
[data-bs-theme=light]{
  --golden-Yellow: rgb(106, 6, 107);
  --bs-hover: #dadada;
  --purple: #7f417d;
  --grey:rgb(240, 240, 240);
  --dark-grey:rgb(152, 152, 152);
  --red:rgb(207, 16, 16);      
  --bg-purple-gradient: {
    background-image: linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -moz-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -webkit-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -ms-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  }
}

:root,
[data-bs-theme=dark]{
  --golden-Yellow: rgb(106, 6, 107);
  --bs-hover: #3a3842;
  --purple: #7f417d;
  --grey:rgb(240, 240, 240);
  --dark-grey:rgb(152, 152, 152);
  --red:rgb(207, 16, 16);      
  --bg-purple-gradient: {
    background-image: linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -moz-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -webkit-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
    background-image: -ms-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  }
}
/* DEFAULT COLORS  */
/* rgb(255, 72, 0) */
.bg-navy-blue{  background-color: rgb(15, 33, 58);}
.bg-dark-grey{ background-color: rgb(17, 17, 17);}
/* .bg-golden-yellow { background:rgb(255, 150, 0);} */
.bg-golden-yellow { background:rgb(106, 6, 107); color: whitesmoke;}

.bg-orange{ background-color: #7f417d;}
.bg-white{ background: rgb(255, 255, 255);}
.bg-red{ background-color: red; color:whitesmoke}
.bg-shadow{ box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.25);}
.border-rd-17px {border-radius: 17px;}
.bg-purple-gradient {
  background-image: linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  background-image: -moz-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  background-image: -webkit-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  background-image: -ms-linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
}
img{
  object-fit: contain;
  height:100%;
}
input:focus, input:hover{
  outline: none;
  border: none;
} 

/* FOR THHE VERIFICATION TAG  */
@font-face {
font-family: 'icomoon';
src:  url('fonts/verified/icomoon.eot?hzxd4d');
src:  url('fonts/verified/icomoon.eot?hzxd4d#iefix') format('embedded-opentype'),
  url('fonts/verified/icomoon.ttf?hzxd4d') format('truetype'),
  url('fonts/verified/icomoon.woff?hzxd4d') format('woff'),
  url('fonts/verified/icomoon.svg?hzxd4d#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}


/* font for library Icon  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/Library/icomoon.eot?nqc0kc');
  src:  url('fonts/Library/icomoon.eot?nqc0kc#iefix') format('embedded-opentype'),
    url('fonts/Library/icomoon.ttf?nqc0kc') format('truetype'),
    url('fonts/Library/icomoon.woff?nqc0kc') format('woff'),
    url('fonts/Library/icomoon.svg?nqc0kc#icomoon') format('svg');
  
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* font for dashboardm mic-mute and camera-off icon  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/dashboard/icomoon.eot?bn106u');
  src:  url('fonts/dashboard/icomoon.eot?bn106u#iefix') format('embedded-opentype'),
    url('fonts/dashboard/icomoon.ttf?bn106u') format('truetype'),
    url('fonts/dashboard/icomoon.woff?bn106u') format('woff'),
    url('fonts/dashboard/icomoon.svg?bn106u#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/* font for directory and podcast icons  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/fonts2/icomoon.eot?s3j4jc');
  src:  url('fonts/fonts2/icomoon.eot?s3j4jc#iefix') format('embedded-opentype'),
    url('fonts/fonts2/icomoon.ttf?s3j4jc') format('truetype'),
    url('fonts/fonts2/icomoon.woff?s3j4jc') format('woff'),
    url('fonts/fonts2/icomoon.svg?s3j4jc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* For chat bubble  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/chat/icomoon.eot?b5lwsx');
  src:  url('fonts/chat/icomoon.eot?b5lwsx#iefix') format('embedded-opentype'),
    url('fonts/chat/icomoon.ttf?b5lwsx') format('truetype'),
    url('fonts/chat/icomoon.woff?b5lwsx') format('woff'),
    url('fonts/chat/icomoon.svg?b5lwsx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* For Link / Invite Icon */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/share-link/icomoon.eot?fcpn1g');
  src:  url('fonts/share-link/icomoon.eot?fcpn1g#iefix') format('embedded-opentype'),
    url('fonts/share-link/icomoon.ttf?fcpn1g') format('truetype'),
    url('fonts/share-link/icomoon.woff?fcpn1g') format('woff'),
    url('fonts/share-link/icomoon.svg?fcpn1g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* .active_itemFor Screen share icon  */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/screen-share/icomoon.eot?df30at');
  src:  url('fonts/screen-share/icomoon.eot?df30at#iefix') format('embedded-opentype'),
    url('fonts/screen-share/icomoon.ttf?df30at') format('truetype'),
    url('fonts/screen-share/icomoon.woff?df30at') format('woff'),
    url('fonts/screen-share/icomoon.svg?df30at#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Icons for Panels on dashboard  */
@font-face {
font-family: 'icomoon';
src:  url('fonts/dashboard_panels/fonts/icomoon.eot?nqyy9k');
src:  url('fonts/dashboard_panels/fonts/icomoon.eot?nqyy9k#iefix') format('embedded-opentype'),
  url('fonts/dashboard_panels/fonts/icomoon.ttf?nqyy9k') format('truetype'),
  url('fonts/dashboard_panels/fonts/icomoon.woff?nqyy9k') format('woff'),
  url('fonts/dashboard_panels/fonts/icomoon.svg?nqyy9k#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

/* SECOND SET OF DASHBOARD ICONS  */
@font-face {
font-family: 'icomoon';
src:  url('fonts/dashboard_panels_subset/fonts/icomoon.eot?5kq7ip');
src:  url('fonts/dashboard_panels_subset/fonts/icomoon.eot?5kq7ip#iefix') format('embedded-opentype'),
  url('fonts/dashboard_panels_subset/fonts/icomoon.ttf?5kq7ip') format('truetype'),
  url('fonts/dashboard_panels_subset/fonts/icomoon.woff?5kq7ip') format('woff'),
  url('fonts/dashboard_panels_subset/fonts/icomoon.svg?5kq7ip#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mic:before {
  content: "\e91e";
}
.icon-folder:before {
  content: "\e92f";
}
.icon-search:before {
  content: "\e986";
}  
.icon-Library:before {
  content: "\e920";
}
.icon-bxs_dashboard_icon:before {
  content: "\e900";
}
.icon-bubbles2:before {
  content: "\e96d";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-display:before {
  content: "\e956";
}
.icon-mic_mute:before {
  content: "\e901";
}
.icon-camera_video_off_icon:before {
  content: "\e902";
}

.icon-result_test_tube_research_icon:before {
  content: "\e900";
}
.icon-class_education_learning_lecture_student_icon:before {
  content: "\e901";
}
.icon-education_test_exam_school_student_icon:before {
  content: "\e902";
}
.icon-passed_exam_test_examination_result_icon-1:before {
  content: "\e903";
}
.icon-passed_exam_test_examination_result_icon:before {
  content: "\e904";
}
.icon-puzzle_piece_icon:before {
  content: "\e905";
}
.icon-puzzle_icon:before {
  content: "\e906";
}
.icon-component_concept_modeling_problem_puzzle_icon:before {
  content: "\e907";
}
.icon-class_education_learning_lecture_student_icon{
/* color: red; */
font-weight: 1000;
}
.icon-newspaper:before {
  content: "\e904";
}
.icon-bubbles3:before {
  content: "\e96f";
}
.icon-equalizer:before {
  content: "\e992";
}
::-webkit-scrollbar{
  background-color: transparent;
  opacity: 0;
  width: 6px;
  z-index: 657;
  border-radius: 30px;
}
/* ::-webkit-scrollbar:hover{
  width: 5px;
} */


[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-verified-symbol-icon {
display: flex;
align-self: center;
justify-self: center;
width: 1.0517578125em;
}

/* .icon-verified-symbol-icon .path1:before {
content: "\e900";
color: rgb(16, 166, 74);
}
.icon-verified-symbol-icon .path2:before {
content: "\e901";
margin-left: -1.0517578125em;
color: rgb(255, 255, 255);
} */

::-webkit-scrollbar-thumb{
  background-color: rgba(146, 145, 145, 0.61);
  width: 5px;
  border-radius: 30px;
  /* filter: opacity(0); */
}
.topNavbar {
  width: 100%;
  height: 70px;
  top:0;
  z-index: 99953;
  border-radius: 0px 0px 30px 30px;
  margin: auto;

}

.left-navigation-bar{
  background-color: var(--bs-body-bg);
  left: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  width: 20%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  z-index: 9999999;
  transition: ease-in-out 200ms;
  user-select: none;
  scrollbar-width: 3px; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.left-navigation-bar::-webkit-scrollbar {
 /* Chrome, Safari, Opera */
 display: none;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: 657 !important;
  height: 20px !important;
  width: 6px !important;
  border-radius: 30px !important;
}
.left-navigation-bar:hover::-webkit-scrollbar {
  display: flex;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: 657 !important;
  height: 20px !important;
  width: 6px !important;
  border-radius: 30px !important;
}


/* .left-navigation-bar:hover{
width:100px;
} */

.left-navigation-bar a{
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
  /* width: 40px; */
  /* height: 40px; */
}

.left-navigation-bar a:hover{
  background-color: #a8a8a82a;
  border-radius: 15px;
}


.right-navigation-bar{
  background-color: var(--bs-body-bg);
  right: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-around; */
  padding: 10px;
  width: 20%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  /* z-index: 999999; */
  transition: ease-in-out 200ms;
  user-select: none;
  scrollbar-width: 3px; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.right-navigation-bar::-webkit-scrollbar {
 /* Chrome, Safari, Opera */
 display: none;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: 657 !important;
  height: 20px !important;
  width: 6px !important;
  border-radius: 30px !important;
}
.right-navigation-bar:hover::-webkit-scrollbar {
  display: block;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: 657 !important;
  height: 20px !important;
  width: 6px !important;
  border-radius: 30px !important;
}


/* .right-navigation-bar:hover{
width:100px;
} */

.right-navigation-bar a{
  text-decoration: none;
  color: inherit;
  /* width: 40px; */
  /* height: 40px; */
}


.announcementWidget{
  display: flex; 
  flex-direction: column;  
  width: 100%;
}

.announcementWidget span{
  color: var(--bs-heading-color);
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 2px solid var(--bs-bg-header);
  margin-bottom: 15px;
}




.navbar-contents, .navbar_content_bottom{
  padding:0px;
  margin: 20px;
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navbar-logo_container{
  /* height:10%; */
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: start;
  background-color: var(--bs-bg-header);
  border: 1px solid var(--bs-border-color);
  border-radius: 15px;
}
.navbar-contents{
  height: 80%;
}
.navbar_content_bottom{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-contents ul, .navbar_content_bottom ul{
  display: flex;
  /* padding-left: 10px; */
  flex-direction: column;
  /* align-items: center; */
  list-style-type:none;
  justify-content: space-evenly;
  height: 100%;
}
.navbar-contents .navbar_item:not(.active_item){
  display: flex;
  align-items: center;
  flex-direction: row;
  /* justify-content: center; */
  /* background-color: rgba(236, 236, 236, 0.38); */
  /* color:#4a4a4a; */
  width: 100%;
  /* height: 70px; */
  padding: 10px;
  /* background-color: red; */
  cursor: pointer;
  transition: ease-in-out 200ms;
  text-align: center;
}

.navbar-contents .navbar_item:not(.active_item):hover{
  
}
.no_content_message{
display: flex;
user-select: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100px;
color:grey;
}
.no_content_message .icon{
font-size: 30px;
}
/* .navbar-contents .navbar_item:not(.active_item):hover{
  border-right:15px solid rgb(255, 150, 0);
  transition: ease 200ms;
} */

/* .active_item {
  cursor: pointer;
  border-right:15px solid #7f417d;
  transition: ease-in-out 200ms;
  background-color: rgba(236, 236, 236, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  width: 100%;
  height: 70px;
  text-align: center;
}
.active_item:hover{
  background-image:linear-gradient( 21deg, rgb(127,65,125) 0%, rgb(61,31,60) 99%);
  border-right:0px solid #7f417d;
  color:white;
} */

.nav_tool_tip{
  text-align: left;
  position: sticky;
  /* margin-left: 300px; */
  width:200px;
  padding-left: 10px;
  display: none;
  transition: ease-in-out 500ms;
  color: black;
  /* background-color: white; */
  border-radius: 25px;
}

.navbar_item:hover  .nav_tool_tip{
  /* width:200px; */
  /* display: flex; */
  /* margin:auto; */
}
.icon{
/* color:red; */
font-size:22px;
}

.navbar_item {
/* overflow: hidden; */
}

.navbar_item img{
height: 36%;
width: 36%;
/* filter: grayscale(100%); */
}

.topNavbar button {
display: none;
/* visibility: hidden; */
}

searchBar{
width: 40%;
}
footer{
display:flex;
/* height: 50px; */
text-align: center;
padding-bottom: 20px;
/* align-items: center; */
justify-content: center;
}
.stack-bars, .stack-bars .fa, .navbar .stack-bars{
/* display: none; */
visibility: hidden;
}
/* RESPONSIVNESS  */
@media screen and (max-width:240px),(max-width:360px),(max-width:480px),(max-width:720px),(max-width:1080px){
.left-navigation-bar{
  width:0px;
  content-visibility: hidden;
}
.right-navigation-bar{
  width: 0;
  content-visibility: hidden;
}
.topNavbar{
  position: fixed;
}
.left-navigation-bar-open{
  width: 30%;
  content-visibility: visible;
  border-right: 2px solid var(--bs-bg-header);
}

.search-container{
  width: 60px !important;
  margin-left: 0 !important;
}

.notify-container{
  width: 350px !important;
}

.scholar_main .left_side {
  width: 100%;
  margin: auto;
  /* margin-left: 20%; */
  /* background-color: red; */
}

.dash_upload{
  width: 100% !important;
}
.navName{
  display: flex;
  margin-left: 0 !important;
}

.navbar-contents .navbar_item:not(.active_item){
  justify-content: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar-contents ul, .navbar_content_bottom ul {
  display: flex
;
   padding-left: 0;
}
.search-input{
  display: none;
}

personal_info{
  display: none;
}
.navbar-brand-item{
  display: none !important;
}
.navbar-logo_container {
  height: 10%;
  /* width: 70%; */
  display: flex
;
  align-items: center;
  padding: 10px;
  justify-content: center;
  background-color: var(--bs-bg-header);
  border: 1px solid var(--bs-border-color);
  border-radius: 15px;
}
.navbar-logo_container a{
  margin-bottom: 0;
}
course_details{
  display: none;
  content-visibility: hidden;
}

.topNavbar button{
  display: block;
}
.stack-bars,.stack-bars .fa, .navbar .stack-bars{
  display: block;
  visibility: visible;
  transition:ease-in-out 200ms;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
  padding: 10px;
  margin-left: 10px;
}

.marginLeft-70{
  margin-left: 70px;
}

.stack-bars:before {
  content: "\f0c9"; }

.marginLeft-70:before {
  content: "\f00d";
}
.main_dashboard{
  margin-top: 70px;

  display: block;
  width: 100%;
  height: fit-content;

}
.CN_dashboard{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.data_box{
  width: 114px;
  height: 15px;
}

/* FOR LIBRARY RESPONSIVENESS  */
searchBar{
  width: 80%;
}
.library_main books_container .header, .library_main .externalLinks .header{
  width:90%;
}
.library_main books_container ul, .library_main .externalLinks{

  width: 90%;
  justify-content: space-between;
}
.modal_container .modalMain{
  width: 90%;
  height: 90%;
  border-radius: 10px;
}
.modal_container .search_panel .find_page{
  width: 0px;
}


.modal_container .search_panel .Search{
transition: ease-in-out 300ms;
-webkit-transition: ease-in-out 300ms;
}
.modal_container .search_panel .Search_input{
  width:100px;
}

.modal_container .search_panel .Search:focus{
  border-bottom:1px solid;
}

.modal_container .modal_footer{
  justify-content: space-between;
  align-items: center;
}

.modal_container .pagination{
  justify-content: space-between;
  width: 20%;
}

.modal_container .pagination .prev{
  padding-left:0px;
}

.modal_container .search_panel{
  margin-right: 0px;
  display: flex;
  width: fit-content;
  align-items: flex-end;
  justify-content: flex-end;
}

.search{
  transition:ease-in 100ms;
}
.show_search_Icon:before {
    content: "\f002";
     
}

.close_search_Icon:before {
  content: "\f00d"; 
}
.close_search_Icon{
  transform: rotate(-90deg);
}



/* RESPONSIVENESS FOR DIRECTORY  */
.main_directory{
  flex-direction: column;
  width: 90%;
}

.main_directory .accounts_container{
  position: absolute;
  margin-left: -10% !important;
  width: 95%;
  margin: auto;
  transition: ease-in-out 200ms;
  
}

.main_directory .accounts_container .accounts_box{
  width: 100%;
}

.main_directory .divider{
  width: 80%;
  margin:0px;
  margin-top: 20px;
  background-color: rgb(117, 117, 117);
  height: 1px;
}

.main_directory .spaces_container{
  padding: 0px;
  transition: ease-in-out 200ms;
  margin-left: -14%;
  z-index: 9999999;
  background-color: var(--bs-bg-header);
}

.main_directory .closed_spaces_container, .main_directory .closed_accounts_container{
  height: 0px;
  content-visibility: hidden;
}

/* .main_directory .spaces_main{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
} */

.main_directory .spaces_main .space{
  margin-top: 10px;
  padding-top: 0px;
}

.main_directory .spaces_main .space .image_container{
  width: 100px;
  height: 100px;
}
.main_directory .spaces_main .space .title{
  font-size: 14px;
  overflow: hidden;
}
.main_directory .spaces_main .space .participants{
  font-size: 13px;
}

.main_directory .spaces_main .space .participants .img{
  display: none;
}

.main_directory_body .bottom_navbar{
  position: sticky;
  position: -webkit-sticky;
  height: 50px;
  padding: 2px;
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  transition: ease-in-out 200ms;
}

.main_directory_body .release_spaces{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  bottom: 0;
  cursor: pointer;
  position: fixed;
  user-select: none;
  margin-bottom: 0px;
  width: 100%;
  color: var(--bs-text-color);
  background-color: var(--bs-bg-header);
  z-index: 9999999;
}


/* .main_directory_body{
  display: flex;
  flex-direction: column;
} */


/* .main_directory_body .release_scholars{
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  top: 10;
} */

}

.edit-cover {
margin-top: 25%;
margin-left: 90%;
font-size: 20px;
height: fit-content;
padding: 6px;
color: whitesmoke;
border: 2px solid whitesmoke;
border-radius: 5px;
position: sticky;

}


.form-label svg{
width: 20px;
}
span svg{
width: 20px;
}

/* CSS rules for all mobile screens */
@media (max-width: 767px) {
/* Your styles for mobile screens go here */
.edit-cover {
  margin-top: 45%;
  margin-left: 90%;
  font-size: 20px;
  height: fit-content;
  padding: 6px;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 5px;
  position: sticky;
  
}
.notify-container{
  width: 750px !important;
}
}

@media (max-width: 450px) {
  .notify-container{
    width: 1150px !important;
  }
}

/* Media query for larger screens */
@media (min-width: 768px) {
.edit-cover {
  margin-top: 25%;
  margin-left: 90%;
  font-size: 20px;
  height: fit-content;
  padding: 6px;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 5px;
  position: sticky;
  
}
}

.edit {
display: flex;
justify-content: space-between;
}

.edit-button {
background-color: var(--purple);
color: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
width: 70px;
height: 30px;
border-radius: 10px;
cursor: pointer;
}

.bg-dark {
bottom: 0;
}
.Preview_image {
width: 100px;
height: 100px;
margin: auto;
}


/* MODAL */
.modal{
/* display: none;
position: fixed;
align-items: center;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0,0.4);
backdrop-filter: blur(3px);
animation-name: fadeIn;
animation-duration: 0.4s; */
}
/* MODAL1 */
/* .modal-content{
display: flex;
flex-direction: column;
position: fixed;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #fefefe;
border-radius: 20px;
width: 80%;
max-width: 800px;
height: 450px;
margin: 10%;
animation-name: slideIn;
animation-duration: 0.4s;
} */
.bkclose{
color: red;
font-size: 28px;
font-weight: bold;
}
.bkclose:hover,
.bkclose:focus {
color: #7f417d;
text-decoration: none;
cursor: pointer;
}
.pdclose{
color: red;
font-size: 28px;
font-weight: bold;
}
.pdclose:hover,
.pdclose:focus {
color: #7f417d;
text-decoration: none;
cursor: pointer;
}
.tutclose{
color: red;
font-size: 28px;
font-weight: bold;
}
.tutclose:hover,
.tutclose:focus {
color: #7f417d;
text-decoration: none;
cursor: pointer;
}

.close_btn {
display: flex;
justify-content: flex-end;
align-items: center;
justify-self: flex-end;
float: right;
padding-right: 20px;
width: 100%;
align-self: flex-end;
/* margin-right: 22px; */
/* margin-top: 6px; */
/* margin-bottom: 16px; */
}
.warning_bx {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.warning_bx span{
color: rgb(212, 22, 22);
font-size: 70px;
}
.bx_content .header_p{
align-items: center;
font-size: 25px;
color: var(--text-color);
margin: auto;
}
.bx_content {
display: flex;
flex-direction: column;
/* align-self: center;
justify-self: center; */
justify-content: space-around;
height: 90%;
width: 85%;
max-height: 500px;
/* margin-left: 35%; */
}
.Upload_form {
display: flex;
flex-direction: column;
width: 50%;
justify-content: space-around;
}

.upload_container {
display: flex;
align-self: center;
width: 100%;
height: 80%;
border-radius: inherit;
overflow-y: scroll;
}
.PodcastUpload_container {
display: flex;
justify-content: center;
width: 100%;
height: 80%;
border-radius: inherit;
overflow-y: scroll;
}

.left_uploadBook{
display: flex;
flex-direction: column;
}
.left_uploadPublication{
display: flex;
flex-direction: column;
}
.uploadPodcast {
display: flex;
flex-direction: column;
}
.book_upload {
display: flex;
flex-direction: column;
width: 100%;
padding: 7px;
}
.podcast_upload {
display: flex;
flex-direction: column;
width: 90%;
padding: 7px;
}
.submitBook {
background-color: var(--bs-body-bg);
border-radius: 25px;
text-align: center;
padding: 12px;
color: var(--bs-heading-color);
font-weight: bold;
width: 60%;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submitBook:hover {
background-color: blueviolet;
color: whitesmoke;
}
.submitPodcast {
background-color: var(--bs-body-bg);
border-radius: 25px;
text-align: center;
padding: 12px;
color: var(--bs-heading-color);
font-weight: bold;
width: 60%;
margin: auto;
margin-bottom: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submitPodcast:hover {
background-color: blueviolet;
color: whitesmoke;
}
.submitPodcastM {
visibility: hidden;
}
.upload_warning{
margin-top: -35%;
margin-left: -2%;
width: 20%;
position: relative;
background-color: var(--bs-red);
color: whitesmoke;
padding: 6px;
border-radius: 12px;
animation: slideAndDisappear 10s ease forwards;
}

@keyframes slideAndDisappear {
0% {
  transform: translateX(0);
  opacity: 1;
}
80% {
  transform: translateX(200px);
  opacity: 1;
  margin-right: 5%;
}
100% {
  transform: translateX(200px);
  opacity: 0;
}
0%, 100% {
  transform: translateX(0);
  opacity: 0;
}
}

.book_preview{
display: none;
flex-direction: column;
margin: auto;
}
.Preview_image {
width: 80%;
margin: auto;
}

.navName {
  font-size:15px; 
  font-weight:600; 
  padding: 3px;
  margin-left: 6px;
}
.action-table {
  display: flex;
  margin-top: 12px;
  padding-bottom: 50% !important;
}

.notification_container {
  height: 85%;
  overflow-y: scroll;
}
.notification_container li {
  position: relative;
  list-style-type: none;
  padding: 5px;
  text-align: center;
}
.notification_container li::after {
  content: ''; 
  position: absolute;
  bottom: 0;
  left: 50%; 
  transform: translateX(-50%);
  width: 80%;
  height: 2px; 
  background-color: rgba(53, 52, 52, 0.205);
}
.notification_container .no-notification {
  padding-top: 20px;
  font-size: 30px;
  text-align: center;
  border: none;
}

.chat_container{
  display: none;
}

.degree {
  border-bottom: 1px solid #4a4a4a4f;
  padding: 10px 0 10px 0;
  margin: 2%;
}

.degree .degree_title {
  font-size: 1.4rem;
}

/* CSS rules for all mobile screens */
@media (max-width: 767px) {
  /* Your styles for mobile screens go here */
  .edit-cover {
    margin-top: 45%;
    margin-left: 90%;
    font-size: 20px;
    height: fit-content;
    padding: 6px;
    color: whitesmoke;
    border: 2px solid whitesmoke;
    border-radius: 5px;
    position: sticky;
    
  }
  
  footer{
    display:flex;
    flex-direction: column;
    height: 50px;
    text-align: center;
    padding: 20px;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    margin-bottom: 50px;
    }
  
    .upload_container {
      display: flex;
      flex-direction: column;
      align-self: center;
      width: 100%;
      height: 80%;
      border-radius: inherit;
      overflow-y: scroll;
      }
  
    .book_upload {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 7px;
      }

    .edit-cover{
        position: sticky;
        margin-top: 25%;
      }
  }

  @media (max-width: 580px) {
    .edit-cover{
      position: sticky;
      margin-top: 36%;
    }
  }

  @media (max-width: 400px) {
    .edit-cover{
      position: sticky;
      margin-top: 53%;
      padding: 6px;
    }
  }

  .notify-container{
		display: flex;
		justify-content: space-between;
		padding: 0px 10px 0px 10px;
		width: 25%;
		align-items: center;
	}
	.marginLeft-70:before {
        content: "\f00d";
		margin-right: 10px;
    }
	.stack-bars{
		margin-right: 20px;
	}

  .solar--widget-3-line-duotone {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2.5 6.5a4 4 0 1 1 8 0a4 4 0 0 1-8 0Zm11 11a4 4 0 1 1 8 0a4 4 0 0 1-8 0Z' opacity='0.5'/%3E%3Cpath d='M21.5 6.5a4 4 0 1 0-8 0a4 4 0 0 0 8 0Zm-11 11a4 4 0 1 0-8 0a4 4 0 0 0 8 0Z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .solar--feed-broken {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' d='M20.965 7c-.078-1.872-.328-3.02-1.137-3.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172S3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-3'/%3E%3Cpath d='M6 12c0-1.414 0-2.121.44-2.56C6.878 9 7.585 9 9 9h6c1.414 0 2.121 0 2.56.44c.44.439.44 1.146.44 2.56v4c0 1.414 0 2.121-.44 2.56c-.439.44-1.146.44-2.56.44H9c-1.414 0-2.121 0-2.56-.44C6 18.122 6 17.415 6 16z'/%3E%3Cpath stroke-linecap='round' d='M7 6h5'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .solar--library-line-duotone {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M19.562 7a2.132 2.132 0 0 0-2.1-2.5H6.538a2.132 2.132 0 0 0-2.1 2.5M17.5 4.5c.028-.26.043-.389.043-.496a2 2 0 0 0-1.787-1.993C15.65 2 15.52 2 15.26 2H8.74c-.26 0-.391 0-.497.011a2 2 0 0 0-1.787 1.993c0 .107.014.237.043.496' opacity='0.5'/%3E%3Cpath stroke-linecap='round' d='M15 18H9'/%3E%3Cpath d='M2.384 13.793c-.447-3.164-.67-4.745.278-5.77C3.61 7 5.298 7 8.672 7h6.656c3.374 0 5.062 0 6.01 1.024s.724 2.605.278 5.769l-.422 3c-.35 2.48-.525 3.721-1.422 4.464s-2.22.743-4.867.743h-5.81c-2.646 0-3.97 0-4.867-.743s-1.072-1.983-1.422-4.464z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .ix--workspaces {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M320 277.333V448H64V277.333zm-42.667 64H192v64h85.333zm-128 0h-42.666v64h42.666zm320-170.666v170.666h-128v-42.666h85.334v-64h-85.334V256h-42.667v-21.333H256V256h-42.667v-85.333zM320 64v85.333h-42.667V128H192v106.666H64V64zm-170.667 64h-42.666v64h42.666z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .codicon--file-symlink-directory {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7.71 3h6.79l.51.5v10l-.5.5h-13l-.5-.5v-11l.5-.5h5l.35.15zm6.28 10v-1.51l.01-4v-1.5H7.7l-.86.86l-.35.15H2v6zm-6.5-8h6.5l.01-.99H7.5l-.36-.15l-.85-.85H2v3h4.28l.86-.86zm2.29 4.07L8.42 7.7l.74-.69l2.22 2.22v.71l-2.29 2.21l-.7-.72l1.4-1.35H8.42a2 2 0 0 0-1.35.61A1.8 1.8 0 0 0 6.54 12h-1a2.76 2.76 0 0 1 .81-2a3 3 0 0 1 2-.93z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .cib--google-podcasts {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M2 12.906a2 2 0 0 0-2 2v2.172c0 2.667 4 2.667 4 0v-2.172a2 2 0 0 0-2-2m28 0a2 2 0 0 0-2 2v2.172c0 2.667 4 2.667 4 0v-2.172a2 2 0 0 0-2-2M8.906 19.453a2 2 0 0 0-2 2v2.172c0 2.667 4 2.667 4 0v-2.156c0-1.109-.891-2-2-2zm0-13.094a2 2 0 0 0-2 2v7.146c0 2.667 4 2.667 4 0V8.349c0-1.109-.891-2-2-2zm14.188 0c-1.109 0-2 .896-2 2v2.188c0 2.667 4 2.667 4 0V8.359a2 2 0 0 0-2-2M16 0a2 2 0 0 0-2 2v2.172c0 2.667 4 2.667 4 0V2a2 2 0 0 0-2-2m0 25.813a2 2 0 0 0-2 2v2.188c-.01 2.667 3.99 2.682 4 .016v-2.188c0-1.094-.896-2-2-2zm7.094-11.282c-1.109 0-2 .906-2 2v7.109c0 2.667 4 2.667 4 0v-7.109a2 2 0 0 0-2-2M16 8.172c-1.104 0-2 .906-2 2v11.641c0 2.667 4 2.667 4 0V10.188c0-1.109-.896-2-2-2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .mdi--cast-tutorial {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3H3a2 2 0 0 0-2 2v3h2V5h18v14h-7v2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M1 18v3h3a3 3 0 0 0-3-3m0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7m0-4v2a9 9 0 0 1 9 9h2c0-6.08-4.93-11-11-11m10 1.09v2L14.5 15l3.5-1.91v-2L14.5 13zM14.5 6L9 9l5.5 3L20 9z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .proicons--video {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Crect width='13.5' height='12' x='2.75' y='6' rx='3.5'/%3E%3Cpath d='m16.25 9.74l3.554-1.77a1 1 0 0 1 1.446.895v6.268a1 1 0 0 1-1.447.895l-3.553-1.773z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .solar--settings-bold {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083M12.5 15c1.67 0 3.023-1.343 3.023-3S14.169 9 12.5 9s-3.023 1.343-3.023 3s1.354 3 3.023 3' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .mingcute--notification-line {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M5 9a7 7 0 0 1 14 0v3.764l1.822 3.644A1.1 1.1 0 0 1 19.838 18h-3.964a4.002 4.002 0 0 1-7.748 0H4.162a1.1 1.1 0 0 1-.984-1.592L5 12.764zm5.268 9a2 2 0 0 0 3.464 0zM12 4a5 5 0 0 0-5 5v3.764a2 2 0 0 1-.211.894L5.619 16h12.763l-1.17-2.342a2 2 0 0 1-.212-.894V9a5 5 0 0 0-5-5'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .lucide--messages-square {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zm4 0h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .lets-icons--home {
    display: inline-block;
    width: 29px;
    height: 29px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12.76c0-1.358 0-2.037.274-2.634c.275-.597.79-1.038 1.821-1.922l1-.857C9.96 5.75 10.89 4.95 12 4.95s2.041.799 3.905 2.396l1 .857c1.03.884 1.546 1.325 1.82 1.922c.275.597.275 1.276.275 2.634V17c0 1.886 0 2.828-.586 3.414S16.886 21 15 21H9c-1.886 0-2.828 0-3.414-.586S5 18.886 5 17z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.5 21v-5a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v5'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .raphael--arrowdown {
    display: inline-block;
    width: 15px;
    height: 15px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .solar--share-linear {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z'/%3E%3Cpath stroke-linecap='round' d='M14 6.5L9 10m5 7.5L9 14'/%3E%3Cpath d='M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent-mdl2--follow-user {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='m2042 1600l-365 365l-90-90l211-211h-646v-128h646l-211-211l90-90zm-691-198q-39-86-99-155t-137-119t-164-77t-183-27q-88 0-170 23t-153 64t-129 100t-100 130t-65 153t-23 170H0q0-117 35-229t101-207t157-169t203-113q-56-36-100-83t-76-103t-47-118t-17-130q0-106 40-199t109-163T568 40T768 0t199 40t163 109t110 163t40 200q0 137-63 248t-177 186q72 27 136 67t118 92t98 114t76 131zM384 512q0 80 30 149t82 122t122 83t150 30q79 0 149-30t122-82t83-122t30-150q0-79-30-149t-82-122t-123-83t-149-30q-80 0-149 30t-122 82t-83 123t-30 149'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }


  .solar--download-bold-duotone {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 16v-1c0-2.828 0-4.242-.879-5.12C20.242 9 18.828 9 16 9H8c-2.829 0-4.243 0-5.122.88C2 10.757 2 12.17 2 14.997V16c0 2.829 0 4.243.879 5.122C3.757 22 5.172 22 8 22h8c2.828 0 4.243 0 5.121-.878C22 20.242 22 18.829 22 16' opacity='0.5'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1.25a.75.75 0 0 0-.75.75v10.973l-1.68-1.961a.75.75 0 1 0-1.14.976l3 3.5a.75.75 0 0 0 1.14 0l3-3.5a.75.75 0 1 0-1.14-.976l-1.68 1.96V2a.75.75 0 0 0-.75-.75' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .ri--admin-fill {
    display: inline-block;
    width: 28px;
    height: 28px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 14v8H4a8 8 0 0 1 8-8m0-1c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6m9 4h1v5h-8v-5h1v-1a3 3 0 1 1 6 0zm-2 0v-1a1 1 0 1 0-2 0v1z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* Container styling */
.search-container {
  display: flex;
  align-items: center;
  background-color: var(--bs-body-bg);
  border-radius: 15px;
  /* padding: 2px; */
  width: 300px;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-left: 12%;
}

.search-container:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Input field */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  padding: 0.5rem;
  color: var(--bs-dropdown-link-color);
}

/* Button styling */
.search-button {
  display: flex;
  background: none;
  border: none;
  font-size: 0.2rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s ease;
}

.search-button:hover {
  color: #6b728091;
}

.library-section{
  width: 80%;
  margin-left: 20%;
}

.notify-container #home, #chats, #notifications {
  cursor: pointer;
  background: var(--bs-border-color);
  border-radius: 50%;
  padding: 6px;
  height: 35px;
  width: 35px;
  display: flex
;
  align-items: center;
  justify-content: center;
}



.notify-container #home:hover, #chats:hover, #notifications:hover {
   background: #a8a8a875;
}


/* Loader Styles */
#custom-loader {
  position: fixed;
  inset: 0;
  background-color: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-logo img {
  /* width: 170px; */
  height: 170px;
  /* border-radius: 50%; */
  object-fit: cover;
}
@media screen and (max-width: 240px), (max-width: 360px), (max-width: 480px), (max-width: 720px), (max-width: 1080px) {
  .loader-logo img {
    /* width: 170px; */
    height: 90px;
    /* border-radius: 50%; */
    object-fit: cover;
  }
}

.loader-footer {
  position: absolute;
  bottom: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--bs-header-color);
  font-family: 'Inter', sans-serif;
}
.loader-logo {
  margin-bottom:80px;
}

.loader-footer strong {
  display: block;
  color: rgb(255, 150, 0);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Hide class */
#custom-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Hide search input on mobile */
@media (max-width: 1080px) {
  .search-modal .search-input {
    display: flex;
  }
}

/* Search Modal Styles */
.search-modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.26);
  /* z-index: 9999; */
}

.search-modal-content {
  background-color: var(--bs-bg-header);
  margin: auto;
  margin-top: -3%;
  padding: 6px;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
}

.close-search {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close-search:hover {
  color: #000;
}

.search-modal input[type="text"] {
  width: calc(100% - 80px);
  padding: 10px;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.search-modal button {
  /* position: absolute; */
  padding: 10px 10px;
  border: none;
  background: blueviolet;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  /* margin-top: -42px; */
  /* margin-left: 58%; */
}
.search-modal-content form{
  display: flex;
}


.unread{
  background: #ce08ff46;
}

*{
    transition: all 0.6s;
}

html {
    height: 100%;
}

body{
    font-family: 'Lato', sans-serif;
    color: #888;
    margin: 0;
}

#main{
    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.fof{
	  display: table-cell;
	  vertical-align: middle;
}

.fof h1{
	  font-size: 50px;
	  display: inline-block;
	  padding-right: 12px;
	  animation: type .5s alternate infinite;
      -webkit-animation: type .5s alternate infinite;
}

@keyframes type{
	  from{box-shadow: inset -3px 0px 0px #888;}
	  to{box-shadow: inset -3px 0px 0px transparent;}
}