/* Remove default bullets */
            ul, #myUL {
            list-style-type: none;
            background-size: 24px;
            width: 100%;
             outline: none;
            font-size: 18px;
            background-color: rgb(255, 255, 255,0.30);
            }

            /* Remove margins and padding from the parent ul */
            #myUL {
           /* background-color: rgb(255, 255, 255,0.45);*/
            background-size: 24px;
            width: 90%;
            padding: 10px 10px 10px 10px;
            outline: none;
            font-size: 18px;
            border-radius: 5px;
            /*border: 1px solid #afafaf;*/
            position: relative;
             bottom: 0;
             margin: auto;
            }

            /* Style the caret/arrow */
            .caret {
            cursor: pointer;
            user-select: none; /* Prevent text selection */
            color:#333233;
            font-size: 16px;
            padding: 8px 8px 8px 8px;
            font-family: Gilroy, Verdana, Geneva, Tahoma, sans-serif;
            padding: 8px 8px 8px 8px;
            }
            

            .caret_li a{
                text-decoration: none;
              cursor: pointer;
              user-select: none; /* Prevent text selection */
              color:#2c2c2c;
              font-size: 14px;
              padding: 10px 10px 10px 10px;
              border-top-right-radius: 25px;
              font-family: Gilroy, Verdana, Geneva, Tahoma, sans-serif;
            }
            

            .caret:hover{
                background-color: #911b4b;
                color:white;
                 padding: 10px 10px 10px 10px;
                  border-top-right-radius: 25px;
            }

             .caret_li a:hover{
                background-color: #911b4b;
                color:white;
               padding: 10px 10px 10px 10px;
            }
           

            /* Create the caret/arrow with a unicode, and style it */
            .caret::before {
            content: "\25B6";
            color: rgb(138, 136, 136);
            display: inline-block;
            margin-right: 6px;
            padding: 8px 8px 8px 8px;
            }

            .caret::before:hover{
                 color: white;
                padding: 8px 8px 8px 8px;
            }

            /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
            .caret-down::before {
            transform: rotate(90deg);
            padding: 8px 8px 8px 8px;
            }

            /* Hide the nested list */
            .nested {
            display: none;
            }

            /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
            .active {
            display: block;
            
        }