.snipets {
        background: #1e2124;
        width: 35em;
        border-left: 2px solid #634928;
      }
      .snipets__input{
        flex-grow: 1;
        background: transparent;
        border: none;
        color: #c3c4c4;
        outline: none;
        font-size: 1.2em;
        margin-left: 0.5em;
      }
      .snipets__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.5em 0 0.5em 0;
      }
      .snipets__triangle {
        margin-top: 0.35em;
        border: 0.35em solid transparent;
        border-top: 0.35em solid #999;
        margin-right: 0.5em;
        transition: border 0.3s ease;
      }
      
      .snipets_active .snipets__triangle {
        margin-top: 0;
        border: 0.35em solid transparent;
        border-bottom: 0.35em solid #999;
        margin-right: 0.5em;
      }
      
      .snipets__ul {
        list-style: none;
        color: #c5c5c6;
        padding: 0;
        margin: 0;
        border-bottom: 2px solid #634928;
        overflow-y: scroll;
      }
      .snipets__li-header {
        padding: 0.5em; 
      }

      .snipets__text {
        padding: 0.5em;
      }
      .snipets__li:hover {
        background: #465260; 
      }
      .snipets__text {
        display: none;
        border-bottom: 2px solid black;
      }
      .snipets__li_active .snipets__text {
        display: block; 
      }
      .red-span {
        color: red;
      }
      .snipets__ul {
        display: none;
        max-height: 25em;
      }
      
      .snipets_active .snipets__ul {
        display: block;
      }