.darkmode-toggle { margin: 0px; padding: 8px; width: 100%; min-width: 64px; background: var(--wdtTertiaryColor); position: relative; }
.darkmode-toggle:hover { background: var(--wdtTertiaryColor); }
.darkmode-toggle span { font-size: 0; display: flex; align-items: center; 
    z-index: 2; position: relative; justify-content: space-between; }
.darkmode-toggle.disable_darkmode { background: var(--wdtBodyBGColor); }
.darkmode-toggle span:after, 
.darkmode-toggle span:before { content: ""; position: relative; mask-repeat: no-repeat; 
    -webkit-mask-repeat: no-repeat; display: block; width: 14px; height: 14px; background-color: var(--wdtAccentTxtColor); 
    transition: var(--wdtBaseTransition); }
.darkmode-toggle span:before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' xml:space='preserve'%3E%3Cpath d='M10,5.4c-2.5,0-4.6,2.1-4.6,4.6c0,2.5,2.1,4.6,4.6,4.6c2.5,0,4.6-2.1,4.6-4.6C14.6,7.5,12.5,5.4,10,5.4z'/%3E%3Cpath d='M10,3.8c0.4,0,0.8-0.3,0.8-0.8V0.8C10.8,0.3,10.4,0,10,0C9.6,0,9.2,0.3,9.2,0.8v2.3C9.2,3.5,9.6,3.8,10,3.8z'/%3E%3Cpath d='M10,16.2c-0.4,0-0.8,0.3-0.8,0.8v2.3c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.3C10.8,16.5,10.4,16.2,10,16.2z'/%3E%3Cpath d='M19.2,9.2h-2.3c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2.3c0.4,0,0.8-0.3,0.8-0.8C20,9.6,19.7,9.2,19.2,9.2z'/%3E%3Cpath d='M3.8,10c0-0.4-0.3-0.8-0.8-0.8H0.8C0.3,9.2,0,9.6,0,10c0,0.4,0.3,0.8,0.8,0.8h2.3C3.5,10.8,3.8,10.4,3.8,10z'/%3E%3Cpath d='M14.9,5.9c0.2,0,0.4-0.1,0.5-0.2L17.1,4c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0l-1.6,1.6c-0.3,0.3-0.3,0.8,0,1.1 C14.5,5.8,14.7,5.9,14.9,5.9z'/%3E%3Cpath d='M4.6,14.4L2.9,16c-0.3,0.3-0.3,0.8,0,1.1c0.2,0.2,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.6-1.6c0.3-0.3,0.3-0.8,0-1.1 C5.3,14.1,4.9,14.1,4.6,14.4z'/%3E%3Cpath d='M15.4,14.4c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.6,1.6c0.2,0.2,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2 c0.3-0.3,0.3-0.8,0-1.1L15.4,14.4z'/%3E%3Cpath d='M4.6,5.6c0.2,0.2,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1L4,2.9c-0.3-0.3-0.8-0.3-1.1,0 C2.6,3.2,2.6,3.7,2.9,4L4.6,5.6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' xml:space='preserve'%3E%3Cpath d='M10,5.4c-2.5,0-4.6,2.1-4.6,4.6c0,2.5,2.1,4.6,4.6,4.6c2.5,0,4.6-2.1,4.6-4.6C14.6,7.5,12.5,5.4,10,5.4z'/%3E%3Cpath d='M10,3.8c0.4,0,0.8-0.3,0.8-0.8V0.8C10.8,0.3,10.4,0,10,0C9.6,0,9.2,0.3,9.2,0.8v2.3C9.2,3.5,9.6,3.8,10,3.8z'/%3E%3Cpath d='M10,16.2c-0.4,0-0.8,0.3-0.8,0.8v2.3c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.3C10.8,16.5,10.4,16.2,10,16.2z'/%3E%3Cpath d='M19.2,9.2h-2.3c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2.3c0.4,0,0.8-0.3,0.8-0.8C20,9.6,19.7,9.2,19.2,9.2z'/%3E%3Cpath d='M3.8,10c0-0.4-0.3-0.8-0.8-0.8H0.8C0.3,9.2,0,9.6,0,10c0,0.4,0.3,0.8,0.8,0.8h2.3C3.5,10.8,3.8,10.4,3.8,10z'/%3E%3Cpath d='M14.9,5.9c0.2,0,0.4-0.1,0.5-0.2L17.1,4c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0l-1.6,1.6c-0.3,0.3-0.3,0.8,0,1.1 C14.5,5.8,14.7,5.9,14.9,5.9z'/%3E%3Cpath d='M4.6,14.4L2.9,16c-0.3,0.3-0.3,0.8,0,1.1c0.2,0.2,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.6-1.6c0.3-0.3,0.3-0.8,0-1.1 C5.3,14.1,4.9,14.1,4.6,14.4z'/%3E%3Cpath d='M15.4,14.4c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.6,1.6c0.2,0.2,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2 c0.3-0.3,0.3-0.8,0-1.1L15.4,14.4z'/%3E%3Cpath d='M4.6,5.6c0.2,0.2,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1L4,2.9c-0.3-0.3-0.8-0.3-1.1,0 C2.6,3.2,2.6,3.7,2.9,4L4.6,5.6z'/%3E%3C/svg%3E"); left: 2px; }
.darkmode-toggle span:after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' xml:space='preserve'%3E%3Cpath d='M17.7,12.1c-4.2,0-7.6-3.4-7.6-7.6c0-1.7,0.5-3.2,1.5-4.4C11.1,0,10.6,0,10.1,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10.1,10 c5,0,9.1-3.5,9.9-8.2C19.3,12,18.5,12.1,17.7,12.1L17.7,12.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' xml:space='preserve'%3E%3Cpath d='M17.7,12.1c-4.2,0-7.6-3.4-7.6-7.6c0-1.7,0.5-3.2,1.5-4.4C11.1,0,10.6,0,10.1,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10.1,10 c5,0,9.1-3.5,9.9-8.2C19.3,12,18.5,12.1,17.7,12.1L17.7,12.1z'/%3E%3C/svg%3E"); /* right: 2px; */ }
.darkmode-toggle:before { content: ""; position: absolute; width: 24px; height: 24px; border-radius: var(--wdtRadius_Full); 
    background: var(--wdtPrimaryColor); left: 5px; transition: var(--wdt-Ad-Transition); z-index: 1; display: block; 
    top: 0; bottom: 0; margin: auto; }
.darkmode-toggle.disable_darkmode:before { transform: translateX(31px); }
.darkmode-toggle span:hover:before { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
/* .darkmode-toggle span:hover:after { opacity: 0.5; } */

/* .wdt-dark-bg .darkmode-toggle { background: var(--wdtPrimaryColor); }
.wdt-dark-bg .darkmode-toggle span:after, 
.wdt-dark-bg .darkmode-toggle span:before { background: var(--wdtAccentTxtColor); }

.wdt-dark-bg .darkmode-toggle:before { background: var(--wdtTertiaryColor); } */