body{

background:linear-gradient(135deg,#0f172a,#2563eb);

font-family:Segoe UI;

}

.glass{

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

border:none;

padding:35px;

border-radius:20px;

color:white;

}

#symptomBox{

height:320px;

overflow-y:auto;

border:2px solid rgba(255,255,255,.3);

padding:15px;

border-radius:12px;

display:flex;

flex-wrap:wrap;

gap:10px;

}

.symptom{

background:white;

color:#2563eb;

padding:10px 14px;

border-radius:20px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.symptom:hover{

background:#2563eb;

color:white;

}

#selectedBox{

min-height:80px;

border:2px dashed white;

padding:15px;

border-radius:12px;

display:flex;

flex-wrap:wrap;

gap:10px;

}

.selected{

background:#16a34a;

color:white;

padding:10px 15px;

border-radius:20px;

display:flex;

align-items:center;

gap:10px;

}

.remove{

cursor:pointer;

font-weight:bold;

font-size:20px;

}

#loader{

display:none;

text-align:center;

}

#result{

display:none;

margin-top:25px;

background:white;

color:black;

padding:20px;

border-radius:15px;

text-align:center;

}

.search-box{

height:50px;

font-size:18px;

}

.progress{

height:28px;

margin-top:15px;

}

.progress-bar{

font-size:16px;

font-weight:bold;

}

#symptomBox::-webkit-scrollbar{

width:8px;

}

#symptomBox::-webkit-scrollbar-thumb{

background:white;

border-radius:10px;

}

.symptom{

display:flex;

align-items:center;

justify-content:center;

transition:.25s;

}

.symptom:hover{

transform:scale(1.05);

box-shadow:0 5px 15px rgba(0,0,0,.3);

}

.selected{

animation:pop .25s;

}

@keyframes pop{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}