.alert {
   padding: 20px;
   background-color: rgb(166,20,20, .6);
   backdrop-filter: blur(2.5px);
   color: white;
   margin-bottom: 15px;
   text-align: center;
}

.alert.controls {
   background-color: black;
}

.closebtn {
   top:100px;
   margin-left: 15px;
   color: white;
   font-weight: bold;
   float: right;
   font-size: 22px;
   line-height: 20px;
   cursor: pointer;
   transition: 0.3s;
}

.closebtn:hover {
   color: rgb(48, 48, 48); 
}

#progress {
   height: 50px;
   width: 50px;
   border-radius: 50%;
   border: 2px solid #212121;
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 105;
}

#progress-value {
   height: 90%;
   width: 90%;
   background-color: #212121;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0px;
}

.right-col {
   position: fixed;
   bottom: 0px;
   left: 230px;
   z-index: 105;
   transition: left 0.3s ease, bottom 0.3s ease;
   border-radius: 50%;
   background-color: #212121;
   display: flex;
}

@media (max-width: 768px) {
   .right-col {
      left: 30px;
      bottom: -5px;
   }
}

#icon {
   width: 50px;
   height: auto;
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
}

#icon:hover {
   transform: scale(1.2);
}

#navbar {
   list-style-type: none;
   margin-top: -15px;
   padding: 0;
   background: rgb(24, 24, 24, .7);
   backdrop-filter: blur(2.5px);
   font-size: 0;
   list-style-type: none;
   top: 0;
   z-index:300;
}

.nav {
   display: inline-block;
}
  
.selectButton {
   background: rgba(24, 24, 24, 0.00);
   color: white;
   border: none;
   display: inline-block;
   text-align: center;
   padding: 16px 20px;
   text-decoration: none;
   font-size: initial;
   cursor: pointer;
   z-index:300;
}

.selectButton:hover {
   border: none;
   background-color: #252525;
   color: white;
}

.selected {
   background: rgb(158, 158, 158);
   backdrop-filter: blur(2.5px);
   color: black;
   border: none;
   display: inline-block;
   padding: 0px 0px;
   text-decoration: none;
   font-size: initial;
   cursor: pointer;
}

.search-bar {
   display: inline-block;
}

input[type=text] {
   outline: none;
   width: 130px;
   float:top;
   box-sizing: border-box;
   border: 2px solid darkgrey;
   font-size: 16px;
   background-color: #ccc;
   background-image: url('https://img.icons8.com/material-outlined/24/000000/search--v1.png');
   background-position: 10px 10px; 
   background-repeat: no-repeat;
   padding: 12px 20px 12px 48px;
   transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
   width: 100%;
}

h4 {
   padding-top: 15px;
   padding-bottom: 15px;
   text-align: center;
}

.selectedButton {
   background: rgb(158, 158, 158);
   backdrop-filter: blur(2.5px);
   color: black;
   border: none;
   display: inline-block;
   text-align: center;
   padding: 16px 20px;
   text-decoration: none;
   font-size: initial;
   cursor: pointer;
}

.selectedButton:hover {
   background-color: #aaaaaa;
   color: black;
}