*{
    box-sizing: border-box;
}

/**Default Styles**/
h1,h2,h3,h4,p{
margin:0;
}

/*
h1,h2,h3,h4,p{
margin:0;
width:fit-content;
}*/

label{
font-size:15px;
}

/** Scroll **/

/*
.roundscroll::-webkit-scrollbar{
width:10px;
}


.roundscroll::-webkit-scrollbar-thumb{
background:var(--scrollthumb);
border-radius:10px;
cursor:pointer;
}*/

body{
}



/** Positions **/

.relative{
position:relative;
}

.fixed{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}

.absolute{
position:absolute;
}

.sticky{
position:sticky;
}

.scroll{
overflow:auto;
overscroll-behavior: contain;
}

.thin-scroll{
scrollbar-width: thin;
}


.auto{
margin:auto;
}

.auto-left{
margin-left:auto;
}

.auto-right{
margin-right:auto;
}

.auto-top{
margin-top:auto;
}

.auto-bottom{
margin-bottom:auto;
}


/**Width & Height**/
.w100{
width:100%;
}

.h100{
height:100%;
}


/** Flex box **/

.flex{
display:flex;
flex-wrap:wrap;
}

.nowrap{
flex-wrap:nowrap;
}

.gap-1{
gap:1px;	
}
.gap-2{
gap:2px;	
}

.gap-5{
gap:5px;
}

.gap, .gap-10{
gap:10px;
}

.gap-15{
gap:15px;
}

.gap-20{
gap:20px;
}
.gap-30{
gap:30px;
}
.gap-40{
gap:40px;
}

.auto-left{
margin-left:auto;
}

.space-between{
justify-content:space-between;
}

.space-even{
justify-content:space-evenly;
}

.column{
flex-direction:column;
}

.center{
justify-content:center;
}

.column-top{
align-items:start;
}

.column-center{
align-items:center;
}

.column{
align-items:unset;
justify-content:unset;	
}

.column.center{
align-items:center;
}

.column.column-center{
justify-content:center;
}

.column.column-bottom{
justify-content:flex-end;
}

.column.left{
align-items:flex-start;
}

.left{
	justify-content:flex-start;
}
.right{
	justify-content:flex-end;
}

.top{
align-items:flex-start;
}

.bottom{
	align-items:flex-end;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-1 {
    flex: 1;
}


.wrap{
flex-wrap:wrap;
}

.one-line, .one-line *{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; 
}




/** Text & Appearances **/

.weight-500{
font-weight:500;
}

.medium-text{
font-size:15px;
}

.small-text, .app a.small-text, .app button.small-text, .app input.small-text, .app textarea.small-text{
    font-size: 14px;
}

.smaller-text{
    font-size: 13px;
}

.text-center{
text-align:center;
}

.semi-bold{
font-weight:600;
}

.light-text{
opacity:.8;
}

.lighter-text{
opacity:.6;
}

.shadow{
	box-shadow:0 0 3px var(--shadowcolor);
	-webkit-box-shadow:0 0 3px var(--shadowcolor);
}





/**Buttons & Links ***/

.app .rect{
width:100%;
min-height:60px;
}

.app a{
color:var(--buttoncolor);
text-decoration:none;
cursor:pointer;
}

.color-inherit, a.color-inherit{
color:inherit;
}

button, a.button{
border:0;
background:transparent;
}

.app button, .app .button{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
border-radius:10px ;
cursor:pointer;
}

.app .btn-small{
height:20px;
width:20px;
font-size:18px;
color:inherit;
}

.app .btn-medium{
height:35px;
width:35px;
font-size:30px;
color:inherit;
}

.app button{
border:none;
box-shadow: 0;
font-family: Poppins, Arial, sans-serif; 
cursor:pointer;
padding:10px;
}

.app .btn-oval{
border-radius:50%;
}

.app .btn-outline{
border:1px solid;
}


.app .btn-primary{
color:var(--buttoncolor);
font-weight:600;
}

.app .btn-secondary{
color:inherit;
}

.app .btn-outline.btn-primary{
border:1px solid var(--darkgrey);
color:var(--buttoncolor);
}

.app .btn-fill.btn-primary{
background:var(--buttoncolor);
color:var(--buttontextcolor);
}

.app .btn-fill.btn-secondary{
background:var(--darkgrey);
color:var(--textcolor);
}

.app .btn-secondary:hover{
background:var(--darkgrey);
}

.app button:hover, .app .button:hover{
scale:1.05;
}


select{
width:100%;
padding:10px;
height:50px;
background: var(--selectbackgroudcolor);
border-radius:10px;
border:0;
font-family: Poppins, Arial, sans-serif; 
font-weight:500;
color: var(--selecttextcolor);
}

select:focus{
outline:1px solid var(--selectbackgroundcolortext);
}


.app button, .app .button, .app select, .app .no-select *, .app .cards, .app .item, .app a, .app i, .app form *{
-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */	
								  outline:0;
	
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	
}


/** Forms & Inputs **/

.app form{
width:100%;
}

.app form input, form input[type=file]{
    width: 100%;
    font-ssize: 16px;
    padding: 12px 15px;
    border-radius: 8px;
    margin-top:5px;
	font-size:14px;
	color:var(--textcolor);
    border:1px solid var(--inputbordercolor);
	background:var(--inputbackgroundcolor);
}

.app form input[disabled]{
background:var(--grey);
}

.app form .password-field{
	padding-right:40px;
}

.app .file-container{
    border:1px solid var(--inputbordercolor);	
}


.app form input:focus{
outline: 1px solid var(--buttoncolor);
border:1px solid transparent;
}

.app form #filegroup label{
    margin-top:5px;	
}

.app form input[type=file]{
padding: 1px;	
width:180px;
}

.password-input{
    position:relative;
}

.password-visible-icon{
    position:absolute;
    top: 50%;
    right:10px;
    cursor: pointer;
	font-size:25px;
}





/** Lists **/


/** Cards **/


.card_list{	
row-gap:20px;
}

.card_list .label{
margin-left:auto;
opacity:.8;
margin-right:2.5px;
}



.list{
display:flex;
width:100%;
flex-direction:column;
row-gap:25px;
column-gap:20px;
}

.list .item{
width:100%;
float:left;
cursor:pointer;
}


.cards a, .item a, .list a{
color:inherit;
}


.cards a{
display:flex;
flex-direction:column;
height:100%;
padding:30px 20px 20px 20px;
}

.cards{
background:var(--cardbackgroundcolor);
border-radius:30px;
min-height:135px;
cursor:pointer;
width:100%;
}


.cards .action{
padding:10px 0px;
margin-top:auto;
width:fit-content;
}

.cards .subtitle, .cards:hover .action{
display:inline-block;
padding:10px 20px;
border-radius:30px;
}

.cards:hover .action{
background:var(--whitecolor);
color:#212121;
}

.loaded .cards:hover .action:before{
content:'Open ';
}


.cards:hover, .list .item:hover{
scale:1.02;
}

.list.card .item .extension{
font-size:35px;
}

.list .item.pdf .image{
background:var(--pdfbackgroundcolor);
color:var(--pdfbackgroundcolortext);
}

.list .item.pdf .extension:after{
content: "\f63e";
font-family: bootstrap-icons !important;
}


.list .item.doc .image, .list .item.docx .image{
background:var(--wordbackgroundcolor);
color:var(--wordbackgroundcolortext);
}

.list .item.doc .extension:after, .list .item.docx .extension:after{
content: "\f38d";
font-family: bootstrap-icons !important;
}


.list .item.ppt .image, .list .item.pptx .image{
background:var(--pptbackgroundcolor);	
color:var(--pptbackgroundcolortext);
}


.list .item.ppt .extension:after, .list .item.pptx .extension:after{
content: "\f381";
font-family: bootstrap-icons !important;
}

.list .item.excel .image{
background:var(--excelbackgroundcolor);	
color:var(--excelbackgroundcolortext);
}

.list .item.excel .extension:after{
content: "\f368";
font-family: bootstrap-icons !important;
}


.list .item.youtube .image{
background:var(--youtubebackgroundcolor);
color:var(--youtubebackgroundcolortext);
}

.list .item.youtube .extension:after, .list .item.youtube img:after{
content: "\f62b";
font-family: bootstrap-icons !important;
}

.list .item.youtube .iconholder:before, .list .item.youtube .iconholder:after{
position:absolute;
top:calc(50% - 15px);
left:calc(50% - 10px);
font-size:20px;
color:#fff;
}


.list.card .item.youtube .iconholder:before, .list.card .item.youtube .iconholder:after{
top:calc(50% - 25px);
left:calc(50% - 15px);
}


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

.list.card .item.youtube .iconholder{
width:52px;
height:52px;
}

.list.card .item.youtube .iconholder:after{
font-size:35px;
top:calc(50% - 25px);
left:calc(50% - 15px);
}


.list .item.youtube .iconholder:after{
font-size:20px;
content: "\F4F4";
font-family: bootstrap-icons !important;
}


.list .item.photo .image{
background:var(--photobackgroundcolor);	
color:var(--photobackgroundcolortext);
}

.list .item.photo .extension:after{
content: "\f39b";
font-family: bootstrap-icons !important;
}


.list .item.link .image{
background:var(--linkbackgroundcolor);	
color:var(--linkbackgroundcolortext);
}

.list .item.link .extension:after{
content: "\f470";
font-family: bootstrap-icons !important;
}

.list .item a{
display:flex;
width:100%;
gap:15px;
}

.list .title, .list .label, .list .description {
    width: 100%;
}

.list .item .label span {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



.searchcontainer .list .item .label span {
    -webkit-line-clamp: 1;
}



.list.small .item .label span{
	font-size:15px;
}

.list.small .item .description span{
	font-size:12px;
}

.list .item .description span {
    font-size: 12px;
    opacity: .8;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.list .item .imgholder{
background-size:cover;background-repeat:no-repeat;background-position:center;
}

.list .item .imgholder.thumb{
background-size:cover;background-repeat:no-repeat;background-position:center;-webkit-filter:blur(3px);filter: blur(3px);-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);
}

.list .item .image {
    font-size: 25px;
    background: var(--grey);
    border-radius: 5px;
    height: 80px;
    width: 100px;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
}

.list .item .image img{
border-radius: 5px;
}

.list .item .image .imgholder, .list .item .image img, .list .item .image .iconholder{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}

.list .item .image img:not(.placeholder){
width:100%;
height:100%;
object-fit:cover;
}

.list.small .item .image {
    width: 70px;
    height: 50px;
}


.list.small .item .image .extension{
font-size:20px;
}

.list.small.thumbnail .item .title {
    width: calc(100% - 85px);
}

.list.thumbnail .item .title {
    width: calc(100% - 115px);
}


/**Horizontal Cards List**/

.list.card .item a{
width:100%;
flex-direction:column;
gap:10px;
}

.list.card .item .image{
width:100%;
height:150px;
}
.list.card .item .title{
width:100%;
}


/**File Preview List */

.filepreview.list .item .label span{
    -webkit-line-clamp: 1;
}

.filepreview.list .item .image img.placeholder{
max-width:50%;	
}

.filepreview.list .item {
    margin: 0;
    border: 1px solid var(--darkgrey);
    width: auto;
	width:100%;
    padding: 10px 10px;
    line-height: 1;
    border-radius: 10px;
}

.filepreview.list .item .image {
    width: 30px;
    height: 30px;
    object-fit: cover;
	font-size:15px;
    backaground: #eee;
}

.filepreview.list .item .title {
    gap:5px;
}







/** Toast **/


.toastcontainer{

    position: fixed;
    top: 20px;
    right:15px;
    max-height:calc(100vh - 100px);
	width:90%;
	margin:auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
	z-index:999;
	
	
}

.toast{
	width:100%;
	max-width:100%;
	min-height:60px;
    border-radius: 12px;
	padding:10px;
    background: var(--backgroundcolor);
	color: var(--textcolor);
	box-shadow:0 0 3px var(--shadowcolor);
	-webkit-box-shadow:0 0 3px var(--shadowcolor);
    border-left: 6px solid var(--buttoncolor);
    overflow: hidden;
    transform: translateX(calc(100% + 50px));
}
.toast.toast_active{
    transform: translateX(0%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast .toast-content{
    display: flex;
    align-items: center;
	gap:10px;
}

.toast-content .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 26px;
    background-color: var(--buttoncolor);
	color: var(--buttontextcolor);
    font-size: 20px;
    border-radius: 50%;
}

.msgerror .check{
    background-color: var(--errorcolor);
	color: var(--secondarycolor);	
}

.msgerror.toast{
 border-left: 6px solid  var(--errorcolor);	
}


.toast-content .message{
    display: flex;
    flex-direction: column;
	width:calc(90% - 30px);
}
.message .text{
    font-weight: 400;
	font-size:14px;
}
.message .text.text-1{
    font-weight: 600;
}

.message .text.text-2{
	font-size: 12px;
}

.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
}
.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--buttoncolor);
}

.msgerror.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--errorcolor);	
}

.progress.active:before{
    animation: progress 5s linear forwards;
}

@keyframes progress {
    100%{
        right: 100%;
    }
}

.toast.toast_active ~ bustton{
    pointer-events: none;
}





/** THEME CHECKBOX **/

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox-label {
  background-color: var(--primarygrey);
  color: var(--blackcolor);
  width: 70px;
  height: 33px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  scale:.85;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox-label .ball {
  background-color: var(--ballcolor);
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 5px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}



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

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


.checkbox-label {
	color: #121212;
}

}


.checkbox:checked + .checkbox-label .ball {
  transform: translateX(44px);
}





/** MODAL **/

.modal-container{
position:fixed;
top:0;
z-index:999;
left:0;
right:0;
bottom:0;
}

.modal{
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background:#fff;
width:400px;
max-width:90%;
height:300px;
margin:auto;
}






/** Amimations */


.inactive:before{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background: var(--backgroundcolor);
opacity:.5!important;	
z-index:1;
}

button .loader{
border-color:var(--buttontextcolor);
border-right-color: transparent;
border-bottom-color: transparent;
}

.loader, .inactive:after, .bgloader:after{
	content: "";
	width: 20px;
	height: 20px;
	border:solid 2px var(--darkestgrey);
	border-radius: 50%;
	border-right-color: transparent;
	border-bottom-color: transparent;
	 -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         1.0s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
    transition: all 0.5s ease-in;
    animation-name:             rotate; 
    animation-duration:         1.0s; 
    animation-iteration-count:  infinite;
    animation-timing-function: linear; 
}


.inactive:after{
content: "";
position:absolute;
display:flex;
margin:auto;
top:calc(50% - 10px);
left:calc(50% - 10px);
opacity:.5;
}

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

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

.progress{
	
	
}

/** Progress Bar **/

.progressbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index: 9999;
  overflow:hidden;
}
.progressbar:before {
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  background:var(--primarycolortint2);
  animation:box-1 2100ms cubic-bezier(0.65,0.81,0.73,0.4) infinite;
}
.progressbar:after {
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  background:var(--primarycolortint2);
  animation:box-2 2100ms cubic-bezier(0.16,0.84,0.44,1) infinite;
  animation-delay:1150ms;
}
@keyframes box-1 {
  0% {
    left:-35%;
    right:100%;
  }
  60%,100% {
    left:100%;
    right:-90%;
  }
}
@keyframes box-2 {
  0% {
    left:-200%;
    right:100%;
  }
  60%,100% {
    left:107%;
    right:-8%;
  }
}





/** MEIDA QUERIES **/


/**Tablets**/


@media only screen and (min-width: 768px){
	
.toastcontainer{
	width:300px;
}	
	
.list{
flex-direction:row;
column-gap:4%;
row-gap:50px;
}

.list .item{
width:48%;
}	
	
	
}


body:has(.overlay, .is-modal-active) {
overflow:hidden;
}	



@media only screen and (max-width: 767px){

.app .m_hide{
display:none!important;
}

body:has(.m-overlay) {
overflow:hidden;
}

}



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

body:has(.t-overlay) {
overflow:hidden;
}


}


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

.dw-50{
width:50%!important;
}	
.dw-60{
width:60%!important;
}
.dw-80{
width:80%!important;
}	
	
.list{
flex-direction:row;
column-gap:2%;
row-gap:50px;
}

.list .item{
width:32%
}


.list.card{
flex-direction:row;
column-gap:2%;
row-gap:40px;
}

.list.card .item{
width:23.25%;
}

.cards{
width:47%;
}

.card_list{
column-gap:6%;	
row-gap:30px;
}

/*
.toast{
width:30%;
right:2.5%;
left:unset;
}*/


.d_hide{
display:none!important;
}	


}




.hide{
display:none!important;
}

.visible{
display:flex!important;
}

/** Skeleton **/

.skeleton{
position:relative!important;
}
  

.skeleton ::placeholder{
	color:transparent;
}

.skeleton ::-ms-input-placeholder{
	color:transparent;
}

.skeleton *{
	pointer-events:none;
}


.skeleton{
overflow:hidden!important;
}

.skeleton input:-webkit-autofill,
.skeleton input:-webkit-autofill:hover,
.skeleton input:-webkit-autofill:focus,
.skeleton textarea:-webkit-autofill,
.skeleton textarea:-webkit-autofill:hover,
.skeleton textarea:-webkit-autofill:focus,
.skeleton select:-webkit-autofill,
.skeleton select:-webkit-autofill:hover,
.skeleton select:-webkit-autofill:focus {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color:transparent!important;
-webkit-box-shadow: none;
}

.skeleton input[type=file]{
background:transparent!important;
color:transparent!important;	
}

.skeleton.list span, .skeleton.card_list span, .skeleton.list h1, .skeleton.card_list h1, .skeleton.list h2, .skeleton.card_list h2, .skeleton.list h3, .skeleton.card_list h3, .skeleton.list h4, .skeleton.card_list h4{
border-radius:10px;
overflow: hidden!important;
display: -webkit-box!important;
-webkit-line-clamp: 1!important;
-webkit-box-orient: vertical;
width:unset;
}

.skeleton.list span, .skeleton.list h4{
width:100%!important;
}


.skeleton .cards .subtitle, .skeleton span i{
color:transparent!important;
}


.skeleton h1, .skeleton input[type="file"]::file-selector-button, .skeleton .upload-text-div, .skeleton p, .skeleton label, .app .skeleton button, .skeleton form input, .skeleton textareaa, .skeleton h3,.skeleton h4, .skeleton .secondarybutton, form.skeleton select, .skeleton form i, .skeleton .icon, .skeleton.menubar i, .skeleton h2, .skeleton span, .skeleton.list .item .image, .skeleton .sortcontainer .item, .skeleton.sortcontainer .item, .skeleton .rect{
background:var(--darkgrey)!important;
border:0!important;
color:transparent!important;
border-radius:10px!important;
}

.skeleton.list .iconholder{
background:transparent!important;
}

.skeleton.list *:after{
content: ""!important;
}

.skeleton .sortcontainer .item, .skeleton.sortcontainer .item{
border-radius:15px!important;
}

.skeleton .profileplaceholder{
background:var(--darkgrey)!important;
color:transparent!important;	
}

.skeleton .transparent, .skeleton .transparent.profileplaceholder{
background:transparent!important;
}

.skeleton form i{
border-radius:5px!important;
}

.skeleton a{
color:transparent!important;
}

.skeleton .extension i{
display:none!important;
}

.skeleton span a{
background:transparent!important;
}

.skeleton:after{
content:'';
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
max-height:100%;
background: var(--shimmercolor);
animation: shimmer 2s infinite linear;
}

@keyframes shimmer{
  from {transform: translateX(-200%);}
  to {transform: translateX(200%);}
}


.skeleton .leftbar .item.active{
background:rgba(255,255,255,1)!important;
}

.skeleton .rightbar .item.active{
color:rgba(255,255,255,1)!important;
}

.skeleton .cards:hover .action{
background:unset!important;
color:unset!important;
}

.skeleton .cards:hover .action{
padding:10px 0px!important;
border-radius: 0px!important;
}

.skeleton.cards:hover .action:before{
content:unset!important;
}