/********************************************************************************
--- Slide Toggle ---
*********************************************************************************/
.slide-content { display: none; }
.slide-toggle:not(.button):after { content: "\e911"; font-family: var(--icon-family); margin: 0 0 0 0.333em; font-size:90%;}
.slide-toggle:not(.button).active:after { content: "\e917"; }
.slide-toggle:not(.button).active, .slide-toggle:not(.button).active:after { color: var(--secondary); }
.slide-toggle.button.active {background-color: var(--secondary); color:#fff;}
.slide-toggle.button:after { content: "\e911"; font-family: var(--icon-family); font-size:90%; margin-left:0.333em; }
.slide-toggle.button.active:after { content: "\e917";}

.slide-content-alt { display: none; }
.slide-toggle-alt { margin-left: 1rem; }
.slide-toggle-alt:not(.button):after { content: "\e911"; font-family: var(--icon-family); margin: 0 0 0 0.333em; font-size:90%;}
.slide-toggle-alt:not(.button).active:after { content: "\e917"; }
.slide-toggle-alt:not(.button).active, .slide-toggle:not(.button).active:after { color: var(--secondary); }
.slide-toggle-alt.button.active {background-color: var(--secondary); color:#fff;}
.slide-toggle-alt.button:after { content: "\e911"; font-family: var(--icon-family); font-size:90%; margin-left:0.333em; }
.slide-toggle-alt.button.active:after { content: "\e917";}