/* CSS to create a clear button inside textarea */

.txtacont {
    position: relative;
}
.txtacont textarea {
    width: 100%; height: 100%;
    box-sizing: border-box;
}
.txtacont input.clrbtn {
    top: 0; right: 0;
    position: absolute;
    border: 1px solid rgb(255,36,36);
    border-radius: 4px;
    padding: 4px;
    background-color: rgb(255, 235, 59)
    opacity: 0.33;
}

.txtacont input.accent {
    bottom: 0; left: 0;
    position: relative;
    border: 1px solid rgb(255,36,36);
    border-radius: 4px;
    padding: 5px 6px;
    background-color: rgb(255, 235, 59)
    opacity: 0.85;
}

.txtacont input.accext {
    bottom: 0; left: 0;
    position: relative;
    border: 1px solid rgb(255,36,36);
    border-radius: 4px;
    padding: 5px 8px;
    background-color: rgb(255, 235, 59)
    opacity: 0.85;
}


/*  placement of accent buttons  */
@media only screen and (max-width: 599px) { 
    input.accentlr { display: none; }
    input.accentud { font-size: 1.0em; }
    div.buttonslr  { display: none; }
    div.buttonsud  { display: inline; }
}
@media only screen and (min-width: 600px) { 
    input.accentlr { font-size: 1.0em; }
    input.accentud { display: none; }
    div.buttonslr  { display: inline; }
    div.buttonsud  { display: none; }
}