/* 888888ba   888888ba   .88888.   888888ba  888888ba   .88888.  dP   dP   dP 888888ba  
/* 88    `8b  88    `8b d8'   `8b  88    `8b 88    `8b d8'   `8b 88   88   88 88    `8b 
/* 88     88 a88aaaa8P' 88     88 a88aaaa8P' 88     88 88     88 88  .8P  .8P 88     88 
/* 88     88  88   `8b. 88     88  88        88     88 88     88 88  d8'  d8' 88     88 
/* 88    .8P  88     88 Y8.   .8P  88        88    .8P Y8.   .8P 88.d8P8.d8P  88     88 
/* 8888888P   dP     dP  `8888P'   dP        8888888P   `8888P'  8888' Y88'   dP     dP 
/* ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
/*                                                                                       */

/* Connect dropdown to input */
input.dropdown {
  margin-bottom: 0px !important;
}

/* Display dropdown if input is focused */
input.dropdown:focus ~ ul {
  display: block !important;
}



/* The unordered lists default state */
input.dropdown ~ ul {
    position: relative;
    z-index: 9999;
    list-style: none;
    margin: 0;
    margin-top: -5px; /*clips the input box slightly to give the appearence that the two are seamlessly connected*/
    padding: 10px;
    overflow: auto;
    display: none; /*Default to display none*/
    /* -------------------------------------------------------------------------- */
    
    /* Customize */
    
    background-color: white;
    border: 1px solid silver;
    font-size: 2rem;
    

    

}



/* Hovering over the list */
ul.dropdown li:hover {
  background: gainsboro;
}

/* ul.dropdown li::before {
 
    font-size: 12px;
    font-family: var(--icon_font-fontawesome);
    display: inline-block; 
    right: 1rem; 
    top: 50%; 
    margin-right:10px;
    content: "\f107";
    color: rgb(66, 66, 64);
   
    transform: translateY(-50%);
} */