:root{
--ffamily: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
			   
}

body{
margin:0;
background:var(--backgroundcolor); 
color:var(--textcolor);
font-family: var(--ffamily);
    line-height: 1.5;
}

.app input, select{
font-family: var(--ffamily);
}






.app{
--header-height: 80px;
--medium-header-height: 70px;
--small-header-height: 60px;
}

.selectcontainer{
padding:8%;
gap:15px;
}

.rightbar header .navigationBack{
margin-left:-8px;
}

.app{
width:100%;
min-height:100%;
display:flex;
flex-direction: column-reverse;
justify-content: flex-end;
}

.profileplaceholder{
font-size:20px;
}

header .userhead.single .user *:not(a, .profileplaceholder, img){
	display:none;
}

header .userhead.single .guest, header .userhead.single:has(.guest){
	display:none;
}


header .guest .label{
width:100%;	
}


header .guest .profileplaceholder {
display:none;
}

#editprofile_section .bio-description{
display:none;
}

.profileplaceholder{
height:55px;
width:55px;
cursor:pointer;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background: var(--buttoncolor);
color: var(--buttontextcolor);
}


.userhead.small .profileplaceholder{
height:35px;
width:35px;
}


.userhead.medium .profileplaceholder{
height:40px;
width:40px;
}

header .userhead .user .label{
	max-width:calc(100% - 65px);
}

header .userhead .user .label{
	max-width:calc(100% - 65px);
}

.profileplaceholder:has(img){
background:transparent;
}

.profile h3{
font-weight:500;
}

#editprofile_section .profile #editprofile_section .profileplaceholder:before, .profile .profileplaceholder img:before{
content: "";
position:absolute;
background:rgba(0,0,0,0.3);
border-radius:50%;
top:0;
bottom:0;
left:0;
right:0;
}

#editprofile_section .profile .profileplaceholder:after, #editprofile_section .profile .profileplaceholder img:after{
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
font-size:40px;
content: "\F220";
color:#fff;
font-family: bootstrap-icons !important;
}

.profileplaceholder img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;	
}

.profile .profileplaceholder{
width: 120px;
    height: 120px;
	border-radius:50%;
	font-size:30px;
}

.app .leftbar{
padding:20px 0;
}

.app .leftbar .item:hover{
background: var(--hovercolor);
}

.app .leftbar .item.active{
background:var(--activecolor);
color:var(--activetextcolor);
}

.app .rightbar{
width:100%;
position:relative;
padding:0 5%;
max-width:100%;
padding:0;
}


.app .select{
position:relative;
min-width: 200px;
border: 1px solid rgba(0,0,0,0.1);
border-radius:10px;
padding: 10px 20px;
font-weight: 500;
}

.main {
padding: 2% 5%;
width:100%;
}

.item{
cursor:pointer;
}



/** Dropdown **/


.searchcontainer .dropdown{
width: 100%;
top:0;
background:var(--backgroundcolor);
position:absolute;
display:none;
border-radius:20px;
z-index:1;
}

.searchcontainer .dropdown .container{
padding:3% 0;
}

.searchcontainer .dropdown .list{
gap:25px;
flex-direction:column;
}

.sortcontainer.tags  .item{
border: 1px solid var(--darkgrey);	
width:auto;
min-width: 100px;
padding:5px 10px;
}

.sortcontainer.tags .item:hover{
border: 1px solid var(--darkestgrey);	
}


.searchcontainer .dropdown .list .item{
width:100%;
}

.searchcontainer .dropdown .list .item:hover{
scale:1.01;
}


.app .searchcontainer{
background:var(--backgroundcolor);
position:relative;
}


.app .searchcontainer:focus-within .dropdown, .app .searchcontainer .dropdown:hover, .app .searchcontainer:has(.clear-search:hover) .dropdown, .app .searchcontainer:has(form .searchfilter:hover) .dropdown, .app .searchcontainer:has(form .clear-filter:hover) .dropdown{
display:block;
}

.app .searchcontainer form{
background:var(--grey);
padding:0 15px;
border-radius: 20px;
margin:0;
height: 48px;
z-index:2;
position:relative;
}


.app .searcsh_toggled .searchcontainer form{
    margin: 3% 2%;
}

.app .searchcontainer input{
background:transparent;
width:100%;
height:100%;
padding: 0 5px;
border:0;
margin:0;
}


.app .searchcontainer input:focus{
outline:none;
}


 .app .searchcontainer .searchfilter{
	font-size: 14px;
    background: var(--grey);
    border-radius: 40px;
    padding: 5px 10px;
	display:none;
 }

 .app .searchcontainer .searchfilter span:first-child{
	max-width:60px;
 }


.app .searchcontainer.filtered .searchfilter{
	display:flex;
}

.app .searchcontainer .searchfilter i{
    position: unset;
	display:block;
 }

.app .searchcontainer  a.searchBack{
padding:0;
top: calc(50% - 15px);
}

.app .searchcontainer .bi-arrow-left-short{
font-size:30px;
}

.app .circled-icon{
display:block;
left:unset;
right:10;	
top: calc(50% - 10px);
background:#eee;
border-radius:50%;
font-size: 18px;
width: 20px;
height: 20px;
text-align:center;
}

.app .searchcontainer .bi-search{
opacity:.8;
left:15;
font-size: 15px;
padding:0 15px 0 10px;
}

.menus{
margin-left:auto;
}



.inputerror{
border:1px solid var(--errorcolor);	
}




.sortcontainer{
	display:flex;
}

.sortcontainer .item{
padding:5px 12px;
width:auto;
font-size:13px;
text-align:center;
border-radius:15px;
color:inherit;
}

.sortcontainer.displaythumb{
margin-bottom:10px;
}

.displaythumb .item{
font-size:16px;	
border-radius:0;
padding:5px 0;
}

.app .rightbar .displaythumb .item.active{
background:transparent;
color:inherit;
border-bottom:2px solid var(--buttoncolor);
}

.upload.items{
width:100%;
}


.app .leftbar .navigationBack{
color:var(--whitecolor);
padding:10px 15px;
border-radius:10px;
background:var(--light);
}





.menubar{
display:none;	
}


header{
padding: 0 3%;
height:var(--header-height);
}

header.small{
height:var(--small-header-height);
}

header.medium{
height:var(--medium-header-height);
}

.w50{
width:50%;	
}



.list .item.upload .iconholder, .list .item.download .iconholder{
background:rgba(0,0,0,0.3);
width:35px;
height:35px;
border-radius:50%;
margin:auto;
}


.list .item.upload .iconholder:after, 
.list .item.download .iconholder:after{
position:absolute;
font-family: bootstrap-icons !important;
top:calc(50% - 15px);
left:calc(50% - 10px);	
font-size:20px;
color:#fff;
}


.list.small .item.upload .iconholder,  .list.small .item.download .iconholder{
width:30px;
height:30px;
}

.list.small .item.download .iconholder:after, .list.small .item.upload .iconholder:after{
font-size:15px;
top:calc(50% - 7.5px);
left:calc(50% - 7.5px);
}


.list.card .item.upload .iconholder, .list.card .item.download .iconholder{
width:50px;
height:50px;
}



.list .item.upload .iconholder:after{
content: "\F148";
}

.list .item.download .iconholder:after{
content: "\f128";
}


.list .item.downloading .iconholder:after, .list .item.uploading .iconholder:after{
content:"\f62a";	
}

.list .item.upload .extension:after, .list .item.download .extension:after{
content: "";
}



.list .item .download-svg{
display:none;
}

.list .item.downloading .download-svg, .list .item.uploading .download-svg{
display:block;
}



.list .item .download-svg{
--stroke-dasharray: 408.46px;
--stroke-dashoffset: 400.2908px;
}

/*
circumference = 2 × π × radius

offset = circumference × ((100 - progress)/100) 

stroke-dasharray: 2 × 3.14 × 70 = 439.6

stroke-dashoffset: 439.6 × ((100 - 75)/100) = 109.9
*/


.rotate {
	-webkit-animation: rotation 1.2s infinite linear;
	animation: rotation 1.2s infinite linear;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}

.uploadcontainer{
position:fixed;
right:0;
bottom:0;
left:0;
top:0;
background:var(--backgroundcolor);
color: var(--textcolor);
border-radius:5px;
}


.uploadcontainer .uploaditems .item{	
padding: 5px 15px;
font-size: 15px;
border-radius: 30px;
width: unset;
margin: 0;

cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.uploadcontainer .uploaditems .item i{
font-size:14px;
}


.empty p{
border-left:8px solid var(--buttoncolor);
padding: 0 10px;
}


.file-container {
    position: relative;
    gap: 5px;
    height: 150px;
    border-radius: 10px;
    background: var(--inputbackgroundcolor);
    border: 1px solid var(--inputbordercolor);
    cursor: pointer;
	margin:0;
}


.uploadactions{
position:sticky;
bottom:0;
right:0;
left:0;
background:var(--backgroundcolor);
padding:2% 5%;
height:80px;
}


.app .button.floating{
position:fixed;
bottom:2.5%;
right:3%;
width:120px;	
    border-radius: 30px;
    font-size: 25px;
    height: 55px;
padding:0;
}


.app input[type="file"]::file-selector-button {
    padding: 5px;
    border: none!important;
    bborder-right: solid 1px rgb(227, 214, 227);
    outline: none!important;
    background-color: transparent;
    color: var(--secondarycolortext);
}

.upload-text-div{
height:60px;
padding:3% 7%;
padding-right:15px;
border-bottom:1px solid var(--darkgrey);
}

.uploadcontainer form{
margin:0;
height:calc(100% - 60px);
}

.uploadcontainer form .container{
padding:5% 5%;
}

.uploadcontainer section{
height:100%;
gap:0;
position:relative;
padding:0;
}

.heading{
flex: 1 1 0%;
font-size: 18px;
max-width:70%;
}

.heading h2{
font-weight:500;
font-size:17px;
}

/*
.list .tag{
width:100%;
margin-bottom: -2%;
}*/


.item.full{
height:unset;
width:100%;
}





.bi-play-btn, .bi-file-image, .bi-file-earmark-text, .bi-link-45deg, .bi-list-nested{
font-size:20px;
}

.blur{
filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   background:var(--greyscalebackground);
}


.floatingicon{
position:absolute;	
top:0;
right:38%;
top:75%;
cursor:pointer;
display:flex;
align-.items:center;
justify-content:center;
}

.floatingicon.top{
top:30%;
right:33%;
}

header .menus i{
font-size:18px;
}

.cards:nth-child(1){
background:var(--cardbluebackground);
}

.cards:nth-child(2){
background: var(--cardredbackground);
}

.cards:nth-child(3){
background: var(--cardpurplebackground);
}

.cards:nth-child(4){
background: var(--cardgreenbackground);
}


.cards .subtitle{
color:var(--whitecolor);
}

.cards:nth-child(1) .subtitle{
background:var(--cardbluedarkbackground);
}

.cards:nth-child(2) .subtitle{
background:var(--cardreddarkbackground);
}

.cards:nth-child(3)  .subtitle{
background: var(--cardpurpledarkbackground);
}

.cards:nth-child(4)  .subtitle{
background: var(--cardgreendarkbackground);;
}


label{
font-weight:500;
}



.uploadcontainer h3{
margin:0
}


.cards h2{
margin:10px 0;
}

h2{
margin:0;
font-size:20px;
height:fit-content;
}



.app .item.active{
color:var(--activeitemtextcolor);
background:var(--activeitemcolor);
}


.term{
width:100%;
}

.formmessage{
width:100%;
}


form .error{
padding:0 10px;
box-sizing:border-box;
border-left:5px solid var(--errorcolor)!important;
margin:10px 0 0 0;
font-size:14px;
border-radius:5px;
}

.message div{
padding:0 10px;
border-left:5px solid var(--buttoncolor)!important;
border-radius:5px;
margin:10px 0;
}

.app .searchcontainer form .clear-search{
display:none;
}

.app .searchcontainer.searched form .clear-search{
display:flex;
}

.app .searchcontainer.searched .dropdown .container .filtercontainer, .app .searchcontainer.filtered .dropdown .container .filtercontainer, .app .searchcontainer.searching .dropdown .container .list, .app .searchcontainer.searching .dropdown .container .filtercontainer{
display:none;	
}

.app .searchcontainer.searching .dropdown .container{
min-height:100%;	
}


.app .searchcontainer .dropdown .container{
overflow:unset;
width:90%;
margin:0 auto;
}

.app .searchcontainer .dropdown .container:has(.empty){
margin:auto;
}

.app .searchcontainer .dropdown.bgloader:after{
content:unset;
}

.app .searchcontainer.searching .dropdown.bgloader:after{
content: "";
position:absolute;
display:flex;
margin:auto;
bottom:2%;
left:calc(50% - 10px);
color:var(--buttoncolor);
}



@media only screen and (max-width: 991px){
	
.app .searchcontainer{
justify-content:unset;
}

.app .search_toggled .searchcontainer .dropdown{
display:flex!important;
margin:0;
}


.app header.search_toggled .searchcontainer{
height:100%;
padding:2% 0 0 0;
}

/*
.app .search_toggled .searchcontainer form, .app .search_toggled .searchcontainer .dropdown{
padding:0 2%;
}*/

.app .search_toggled .searchcontainer form, .app .search_toggled .dropdown{
margin:auto;
width:96%;
}

header.search_toggled{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	height:unset;
    z-index: 9999;
    background: var(--backgroundcolor);
    align-items: flex-start;
	max-height:unset;
	padding:0
}

header.search_toggled .menus{
height:100%;
display:inline-block;
}


header.search_toggled .searchcontainer .dropdown{
width:100%;
position: unset;
max-height: unset;
border: 0;
box-shadow: none;
}
	
	
.app header.search_toggled .menus{
width:100%;
}

.app header.search_toggled .menus{
width:100%;
}


.app header.search_toggled .heading, .app header.search_toggled .menus button, .app header.search_toggled .menus a.button:not(.searchBack){
display:none;
}

.app header.search_toggled .searchcontainer{
display:flex!important;
}

.app .searchcontainer.searching .dropdown{
padding-top:0;
}


}




@media only screen and (min-width: 768px) and (max-width: 991px){
.app .t_hide{
display:none!important;
}	
}





@media only screen and (min-width: 768px){
	
.searchcontainer .dropdown .container{
padding:2% 0;
}

.app .searchcontainer .dropdown .container{
width:95%;
}

.app .searchcontainer:focus-within, .app .searchcontainer:has(.dropdown:hover){
	box-shadow:0 0 3px var(--shadowcolor);
	-webkit-box-shadow:0 0 3px var(--shadowcolor);
	z-index:1;
}

header{
padding: 0 2.5%;
}


.main {
padding: 1% 2.5%;
}


.auth .main, .dsashboard .main{
width:75%;
}

.sidebar {
margin: 1% 0;
}

.app .leftbar .sortcontainer .item{
padding:10px;
width:70%;
margin:0;
min-width:unset;
border-radius:10px;
}



.app .leftbar{
position:sticky;
top:0;
height:100%;
}



.upload-text-div{
padding:0 5%;
padding-right:15px;
}

.uploadcontainer form .container{
padding:3% 5%;
}


.app.resources .rightbar{
float:left;
width:30%;
width:77%;
}


.app.resources .leftbar{
position:sticky;
top:0;
height:100%;
}


.app.resources .leftbar{
background:var(--sidebarcolor);
color:var(--sidebartextcolor);
float:left;
display:flex;
flex-direction: column;
paddisng:5% 0;
width:60px;	
padding:1% 0 0 0;
float:left;
}



.app.resources .checkbox-label .ball {
        background-color: #121212;
}


.app.resources .rightbar{
width:calc(100% - 60px);
}

.app.resources.container{
display:inline-block;
}

.app.resources .leftbar .item{
display:inline-block;
}

.app.resources .theme{
scale: .7;
margin-left: -7;	
}

.uploadcontainer{
right:2.5%;
width:45%;
left:unset;
top:unset;
height:65%;
bottom:2.5%;


}


.resources.app{
flex-direction:row;
}	

.app.resources .leftbar{
height:100vh;
}

.onboard .main{
width:60%;
margin:auto;
}


}

@media only screen and (min-width: 992px){

.app{
flex-direction:row;
}	

.searchcontainer .dropdown .list{
flex-direction:column;
row-gap:25px;
}

.onboard .main{
width:55%;
margin:auto;
}

.app .searchcontainer{
width:650px;
border-radius: 20px;
max-width:80%;
margin-right:15px;
}

.app .searchcontainer .dropdown .container{
overflow:auto;
}

.app .searchcontainer .dropdown .container{
width:100%;
padding:3% 3%;
}

.searchcontainer .dropdown {
padding-top: 48px;
}

.searchcontainer .dropdown .container{
max-height:calc(100vh - var(--header-height) - 15px - 10px);
}

.app .searchcontainer form:focus-within, .app .searchcontainer.filtered form{
 background:transparent;	
 border:1px solid var(--buttoncolor);
}

.app .searchcontainer.searching .dropdown.bgloader:after{
bottom:unset;
top:calc(65% - 10px);
}

.app .searchcontainer.searching .dropdown .container{
min-height:70px;
}

.app .search_toggled .searchcontainer form{
margin:0;
}

.auth .main{
width:60%;
}

/*
.dashboard .main{
width:80%;
}*/


header{
padding: 0 2.5%;
}


.main {
padding: 1% 2.5%;
}

.auth .main{
padding:3%;
}

.upload-text-div{
padding:3% 5%;
padding-right:15px;
}

.uploadcontainer form .container{
padding:3% 5%;
}


.back{
position:absolute;
top:2%;
width:100%;
}




.app .leftbar{
background:var(--sidebarcolor);
color:var(--sidebartextcolor);
width:23%;
padding:5% 0;
padding:1% 0;
min-height:100%;
display:flex;
float:left;
height:100vh;
}

.profile .rightbar{
padding:0;
}

.bi-filter{
font-size:30px;	
}

.app .rightbar{
float:left;
width:30%;
width:77%;
padding:0;
}

.app.resources .leftbar{
width:60px;	
}

.app.resources .rightbar{
width:calc(100% - 60px);
}

.uploadcontainer{
width:30%;
}

}



.pwa_install img{
border-radius:3px;
width:60px;
height:60px;	
}

.pwa_install h1{
font-size:18px;
font-weight:550;
margin:0;
}

.pwa_install .label{
border-radius:3px;
width:calc(100% - 75px);
}