.wizzywig {
    border-width: 0 0 1px 0;
    font-size: 0.95em;
    outline: 1px solid transparent;
    position: relative;
    z-index: 1;
}
.wizzywig-wrapper:focus {
    background: white;
    z-index: 1;
}
.wizzywig:focus + .wizzywig-border, .wizzywig.focussed + .wizzywig-border, #WizzywigBorder.active {
    outline-color: black;
    background: white;
    box-shadow: 0 0 20px;
    transition-delay: 0 !important;
}
.wizzywig:hover:not(:focus) + .wizzywig-border {
    /*transition: outline-color 1s ease-out;*/
    transition-delay: 1s;
    outline-color: black;
}
.wizzywig-border, #WizzywigBorder {
    outline: 1px solid transparent;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    padding: 10px;
    transition: background-color 0.5s ease-out;
    transition: outline 0.5s ease-out;
    transition: box-shadow 0.5s ease-out;
}
#WizzywigControls {
    position: absolute;
    top: 0; transform: translateY(-150%);
    font-size: 1em;
    border: 1px solid black;
    padding: 10px;
    background: white;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    z-index: 32;
}

 #WizzywigControls > * {
     margin: 0 3px;
 }

    #WizzywigControls i {
        border: none;
        padding: 0;
    }

     #WizzywigControls select, #WizzywigControls select option, #WizzywigControls button {
        background-color: #eeeeee;
        height: 20px;
    }

     #WizzywigControls button.active {
        background-color: #dddddd;
    }

     #WizzywigControls select, #WizzywigControls button {
        border: 1px solid #000000;
    }

     #WizzywigControls select {
        width: auto;
        
    }
 #WizzywigControls:before {
     background-color: white;
     border: 1px solid black;
     width: 20px;
     height: 20px;
     position: absolute;
     content: '';
     top: 100%;
     border-bottom-left-radius: 10000px;
     border-bottom-right-radius: 10000px;
     transform: translate(-1px,-1px);
     border-top: none;
     left: 0;
     
 }