.expander {
            margin: 0;
            padding: 0;
            /*border: 2px solid hsl(0deg 0% 52%);*/
            border-radius: 7px;
            
        }
        
        .expander h2 {
            margin: 0;
            padding: 0;
        }
        
    
        .expander > * + * {
           /* border-top: 1px solid hsl(0deg 0% 52%);*/
        }
        
        .expander-trigger {
            /*background: #98a2a5;*/
            color: #99124d;
            display: block;
            font-weight: bold;
            font-size: 1rem;
            width: 100%;
            margin: 0;
            padding: 10px;
            position: relative;
            text-align: left;
            outline: none;
        }

        .expander-title {
            display: block;
            pointer-events: none;
           /*  border: transparent 2px solid;  */
            border-radius: 5px;
            padding: 0.25em;
            outline: none;
        }
      
        .expander-trigger:focus,
        .expander-trigger:hover {
            background: #98a2a5;
            text-shadow: 1px  0px 0px rgb(240, 240, 240);
        }

      
        .expander-trigger:focus {
              outline: 4px solid transparent;  
        }
        
        .expander > *:first-child .expander-trigger,
        .expander > *:first-child {
            border-radius: 5px 5px 0 0;
        }
        
        .expander > *:last-child .expander-trigger,
        .expander > *:last-child {
            border-radius: 0 0 5px 5px;
        }
       
        button {
            border-style: none;
        }
        
        .expander button::-moz-focus-inner {
            border: 0;
        }
        
        
       
        .expander-trigger:focus .expander-title {
            border-color: hsl(0, 0%, 7%);
            /* border-color: hsl(216deg 94% 43%);*/
            color:#99124d;
        }
        
        .expander-icon {
            border: solid currentcolor;
            border-width: 0 2px 2px 0;
            height: 0.5rem;
            pointer-events: none;
            position: absolute;
            right: 2em;
            top: 50%;
            transform: translateY(-60%) rotate(45deg);
            width: 0.5rem;
        }
        
        .expander-trigger:focus .expander-icon,
        .expander-trigger:hover .expander-icon {
            border-color: #99124d;
            text-shadow: 2px  0px 0px rgb(240, 240, 240);
        }
        
        .expander-trigger[aria-expanded="true"] .expander-icon {
            transform: translateY(-50%) rotate(-135deg);
        }
        
        .expander-panel {
            margin: 0;
            padding: 15px;
            line-height: 1.7em;
        /* padding: 1em 1.5em;  */
        }
        
        /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
        .expander-panel[hidden] {
            display: none;
        }
        
        .expander div.tab:focus {
            background-color: #6e659a;
            /* outline: 2px solid #8cc63f; */
            outline: 3px solid #467310;
        }
   
        .expander div.tab {
            background: #6e659a;
            border: 1px solid #fff;
            color: #fff;
            padding: 3px 6px;
        }
        .tablist div.tab.active {
            font-weight: bold;
        }
        .expander-panel .inactive {
            display: none;
        }