.controls {
    background-color: var(--control);
    z-index: 11;
    position: absolute;
    right: 0;
    bottom: 0em;
    height: auto;
    width: 1.4em;
    border-top-left-radius: .4em;

    /*background-image: url(../img/interface/tools/RGRBurstWhite.png);*/
    /*Begin Colorzilla---------------------------*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9b4e95+0,9b4e95+0,683564+100 */
    background: linear-gradient(to bottom, #b36bad 0%, #ad52a5 0%, #893282 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*End Colorzilla-----------------------------*/

    box-shadow: -.01em 0em .3em rgba(32, 32, 32, 0.8);
}
#debug {
    font-size: .25em;
    position:absolute;
    top:0;
    left:0;
    background-color:var(--ghostWhite60);
    padding:1em;
    height:2em;
    width:12em;
    z-index: 10000000;
    display:none;
}
.toolLogo {
    position: relative;
    height: .8em;
    width: .8em;
    margin: .2em;
    opacity: 1;
    border-radius: .2em;
    cursor: pointer;
    background-color: var(--clearBack);
    background-image: url(../img/interface/toolIcons/logo.png);
    background-size: 160% auto;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    border: .1em solid transparent;
    cursor: pointer;
}

.toolLogo:hover {
    background-color: var(--clearBack);

    border: .1em solid #fff;
    background-image: url(../img/interface/toolIcons/logoInv.png);

}

.toolLogo:focus {
    background-image: url(../img/interface/toolIcons/logoInv.png);
    background-color: var(--clearBack);
    border: .1em solid #fff;
}

.tool {
    position: relative;
    height: .8em;
    width: .8em;
    background-image: url(../img/interface/playAud.svg);
    background-repeat: no-repeat;
    background-size: 130% auto;
    background-position: center center;
    border: .1em solid transparent;
    transition: border-color 0.2s ease;
    border-radius: .2em;
    margin: .2em;
    display: none;
    cursor: pointer;
}

.tool:hover {
    
    border: .1em solid #fff;
}

.tool:focus {   
    border: .1em solid #fff;
}

.controls .toolTip {
    position: absolute;
    z-index: 3;
    top: -.5em;
    right: -.7em;
    color: var(--textWhite);
    font-size: .2em;
    display: block;
    box-shadow: none;
    padding-right: 1em;
    text-align: center;
    display: block;
    width: 12em;
    opacity: 0;
    transition: all .5s 0s;
    line-height: 1.5em;
}
.controls .vidBub .toolTip span {
    line-height: 1.6em;

}
.controls .tool:focus .toolTip {
    transition: all .5s 1s;
    opacity: 1;
}

.controls .tool:focus .toolTip {
    transition: all .5s 1s;
    opacity: 1;
}

.controls .toolLogo:focus .toolTip {
    transition: all .5s 1s;
    opacity: 1;
}

.toolTip span {
    position: absolute;
    right: 0;
    color: var(--textWhite);
    background-color: var(--control);
    display: block;
    width: auto;
    border: solid .2em var(--textWhite);
    border-radius: .2em;
    padding: .2em;
}

.tool.disabled  {
    cursor:not-allowed;
    opacity:.4;
    border: .1em solid transparent;
}
.tool.disabled:hover  {
    border: .1em solid transparent;
}
.tool.delete {

    background-image: url(../img/interface/toolIcons/delete.png);
    margin-top: .4em;
}
.tool.delete:hover, .tool.delete:focus {
    background-image: url(../img/interface/toolIcons/deleteInv.png);

}
.tool.undo {
    background-image: url(../img/interface/toolIcons/undo.png);
}

.tool.vowelColor {
    background-size: 180% auto;
    background-image: url(../img/interface/toolIcons/vowelRed.png);
}
.tool.vowelColor:hover, .tool.vowelColor:focus {
    background-image: url(../img/interface/toolIcons/vowelRedInv.png);
}

.tool.vowelColor.vowelBlack {
    background-image: url(../img/interface/toolIcons/vowelBlack.png );
}

.tool.vowelColor.vowelBlack:hover,.tool.vowelColor.vowelBlack:focus {
    background-image: url(../img/interface/toolIcons/vowelBlackInv.png );

}

.tool.clear {
    background-size: 180% auto;
    background-image: url(../img/interface/toolIcons/eraser.png);
}

.tool.clear:hover, .tool.clear:focus {
    background-image: url(../img/interface/toolIcons/eraserInv.png);
}

.tool.video {
    background-image: url(../img/interface/toolIcons/video.png);
}
.tool.video.vidBub {
    background-color:var(--clearBack);
    font-size:.84em;
    box-shadow: none;
}

.tool.video.vidBub:hover {
    background-color: var(--ghostWhite60);
    border: .1em solid #fff;
}

.tool.video.vidBub:focus {
    background-color: var(--ghostWhite80);
    border: .1em solid #fff;
}
.tool.video:hover, .tool.video:focus {
    background-image: url(../img/interface/toolIcons/videoInv.png);
}
.tool.resize {
    background-size: 160% auto;
    background-image: url(../img/interface/toolIcons/resize.png);
    margin-bottom: .6em;
}
.tool.resize:hover, .tool.resize:focus {
    background-image: url(../img/interface/toolIcons/resizeInv.png);

}

.tool.resizeOff {
    background-image: url(../img/interface/toolIcons/resizeOff.png);
    margin-bottom: .6em;
}

.tool.resizeOff:hover, .tool.resizeOff:focus {
    background-image: url(../img/interface/toolIcons/resizeOffInv.png);

}

.tool.ai {
    background-size: 130% auto;
    background-image: url(../img/interface/toolIcons/ai.png);
}

.tool.ai:hover, .tool.ai:focus {
    background-image: url(../img/interface/toolIcons/aiInv.png);

}