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

.app{
width:100%;
min-height:100%;
display: flex;
}


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

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

.menus i {
    font-size: 20px;
	opacity:.6;
}

header .title{
font-size: 18px;
}


.menus {
    margin-left: auto;
    margin-right: -1%;
}

.main{
width: 100%;	
padding:0 0 2.5% 0;
}

.main{
padding: 0 5% 30px 5%;
}


header{
padding: 1% 3%
}

header h1{
font-size:18px;
}


/** Generative AI **/

form{
width:100%;
position:relative;
margin:0;
}


.searchcontainer h1{
font-size:22px;
text-align:center;
margin:0;
margin-bottom:22px;
}


.searchcontainer{
width:100%;
margin:auto;
}

.dropdown{
background:var(--secondarycolor);
border-radius:10px;
top: calc(100% + 0px);
left: 0;
z-index:999;
overflow: auto;
overscroll-behavior: contain;
max-height:300px;
right: 0;
position:absolute;
border: 1px solid rgba(0, 0, 0, 0.045);
box-shadow: 0 0 30px 0px #eee;
}

.dropdown .list{
flex-direction:column;
gap:0;	
}

.dropdown .list .item{
margin:0;	
border-top:1px solid var(--lightgrey);
padding:10px 20px;
border-radius:0;
}

.dropdown .list .item:first-child{
border-top:0;
}	

.dropdown .list .item:last-child{
border-bottom:0;
}	

.dropdown .list .item, .dropdown .list .item span{
width:100%;
}

.searchcontainer .search{
border-radius:10px;
width:100%;
font-family: inherit;
resize:none;
border:0;  
outline:0;  
height: 50px;
padding:15px 63px 0 15px;
margin-bottom:50px;
max-height:400px;
}

.searchcontainer .search:focus{
outline:none;
border:0;
}


.searchcontainer form{
border-radius:10px;
height:40px;	
width:100%;
padding:25px;
resize:none;
height:auto;
padding:0;
border:1px solid var(--darkgrey);
min-height: 90px;
border-radius: 10px;
}



.searchcontainer.searching form, .searchcontainer.searching .search:focus{
border-radius: 10px 10px 0px 0px;
}

.searchcontainer .dropdown{
max-height:200px;
border-radius: 0px 0px 10px 10px;
box-shadow: none;
border:1px solid rgba(0,0,0,0.15);
border:1px solid rgba(0,0,0,0.18);
border-top: 0;
}


.searchcontainer button.active{
color: var(--secondarycolor);
border: 0;
background:var(--primarycolor);	
}


.searchcontainer .loader{
    position: absolute;
    right: 25;
    bottom: 15;
}

.searchcontainer button, .searchcontainer .upload{
    position: absolute;
	width:auto;
    color: rgba(0, 0, 0, 0.3);
    border: 0.1px solid rgba(0, 0, 0, 0.06);
    background: var(--linecolor);
    right: 15;
	bottom:8;
    padding: 8px 10px;
    border-radius: 10px;
	cursor:pointer;
    margin:0;
}

.searchcontainer .upload{
left:15px;
right:unset;
background:transparent;
color: var(--primarycolor);
border:1px solid rgba(0, 0, 0, 0.2);
}

.searchcontainer .filepreview{
position:absolute;
left:65px;
right:65px;
bottom:8;	
width:unset;
}

.searchcontainer .filepreview .item{

    margin: 0;
    padding: 1.5px 10px;
    border: 1px solid #eee;
    width: auto;
	max-width:300px;
    border-radius: 10px;
}

.searchcontainer .upload i{
transform: rotate(30deg);
}
.searchcontainer button i{
font-size:16px;	
}

.searchcontainer form:focus-within {
border:1px solid var(--darkergrey);
}

.suggestions .item{
border:1px solid var(--darkgrey);
padding:5px 15px;
border-radius:15px;	
text-align: center;
cursor:pointer;
}

.suggestions .item:hover{
border:1px solid var(--darkergrey);

}

.suggestions{
font-size:12px;
margin:25px 0 0 0;
}

.suggestions .title{
margin-bottom:10px;
}

.item_container{
row-gap: 10px;
column-gap: 20px;	
}


.dynamic_1{
animation:dynamic1;	
}

.dynamic_2{
animation:dynamic2;	
}

.dynamic_3{
animation:dynamic3;	
}

.dynamic_1, .dynamic_2, .dynamic_3{
overflow:hidden;	
white-space: nowrap;
display:inline-block;
position:relative;
animation-duration:15s;
animation-timing-function: steps(25,end);
animation-iteration-count:infinite;
}


.dynamic_1::after, .dynamic_2::after, .dynamic_3::after{
	content: "|";
	position: absolute;
	right:0;
	animation: caret infinite;
	animation-duration: 1s;
	animation-timing-function; steps(1, end);
}


.hero .dynamic_1::after, .hero .dynamic_2::after, .hero .dynamic_3::after{
	content: "";
}

.searchcontainer img{
height: 20px;
    width: 20px;
    left: 15px;	
}


@keyframes dynamic3{
  0%, 66.6666%, 100%{
    width:0;
  }	

  73.3333%, 93.3333%{
    width:100%;
  }	  
	
}

@keyframes dynamic2{
	0%, 33.3333%, 66.6666%, 100%{
		width:0;
	}
	39.9999%, 59.9999%{
		width:100%;
	}
	
}

@keyframes dynamic1{
	0%, 33.3333%, 100%{
		width:0;
	}
    6.6666%, 26.6666%{
		width:100%;
	}
	
}

@keyframes caret{
	
   50%, 100%{
		opacity:0;
	}

	100%{
	opacity:1;
	}
}
.type_loader {
    text-align: center;
	padding:5% 0;
}
.type_loader span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: black;
    border-radius: 20px;
    animation: type_loader 0.8s infinite alternate;
}
.type_loader span:nth-of-type(2) {
    animation-delay: 0.2s;
}
.type_loader span:nth-of-type(3) {
    animation-delay: 0.6s;
}
@keyframes type_loader {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}



.rightbar{
width:100%;
}



.page_quiz.app{
height:100%;	
align-items: stretch;
}

.page_quiz header{
background: #fff;
z-index:1;
position:sticky;
top:0;
}

.pasge_quiz .main{
overscroll-behavior: contain;
overflow:auto;
}

.page_quiz .leftbar{
justify-content:unset;
width:80vw;
}

.page_quiz .rightbar{
width:100vw;
overflow-x:auto;
}



.page_quiz .leftbar{
padding: 1%;
z-index:3;
border-radius:0;
border:0;
background:var(--primarycolor);
color:var(--secondarycolor);
top:0;
}



.page_quiz .leftbar .active{
background:var(--primarycolor);
color:var(--secondarycolor);
border-radius:10px;	
}

.page_quiz .leftbar .active{
background:var(--secondarycolor);
color:var(--primarycolor);
border-radius:15px;	
}

.page_quiz .leftbar a{
color:var(--secondarycolor);
}

.page_quiz .rightbar .bi-list, .page_quiz .rightbar .bi-stars{
font-size: 25px;
}

.bi-chevron-left{
font-size:18px;	
}

.page_quiz .header{
padding: 5% 10px;
}

@media only screen and (max-width: 767px){
body:has(.app.toggleSidebar), .app.toggleSidebar.page_quiz{
overflow-y:hidden;
}

body:has(.app.page_quiz){
overscroll-behavior: contain;
}

}



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

.page_quiz .header{
padding: 2% 10px;
}

.page_quiz .rightbar{
overflow:unset;	
}
	
.searchcontainer h1{
font-size:25px;
}

}




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

	
.page_quiz.app{
height:unset;	
overflow-x: unset;
justify-content: flex-end;
}

.page_quiz .leftbar{
width:23%;
margin:0;
position:fixed;
top:0;
left:0;
bottom:0;
}
		
	
.main{
padding: 0 5% 30px 5%;
}	

header{
padding: 0 5%;	
}


.app {
flex-direction: row;
}

.quiz_home{
flex-direction:column;
}




.page_quiz .rightbar{
width:77%;
}

.searchcontainer{
padding:0;
}
.searchcontainer h1 {
font-size:30px;;	
}	
}