.qti-dir {
    padding: 6px;
}

.qti-dir-container {
    position:relative;
    background-color:parent;
}

.qti-dir-canvas {
    border: solid 2px black;
    cursor: crosshair;
    float: left;
    background-color: white;
}

.qti-dir-colors {
    margin:0;
    padding:0;
    float: left;
}
.qti-dir-colors li {
    height: 20px;
    width: 20px;
    display: block;
    cursor: pointer;
}
.qti-dir-colors li.selected{
    height: 18px;
    width: 18px;
    display: block;
    border: solid 1px #eee;
}
.qti-dir-label{
    float: left;
}

.qti-dir-canvas-container
{
    height:auto;
    overflow:hidden;
}

.qti-dir-canvas-toolbar
{
    min-height: 430px;
    overflow: hidden;
    width: 100px;
    float:left;
}

div.qti-dir-canvas-area
{
    float:none;
    overflow: auto;
    min-height: 430px;
}
/* Canvas Tools */
.qti-dir-crayon { height: 15px; margin-bottom:2px; border: none; display: block; outline: none;}
.qti-dir-sm  { background: url(images/canvas/crayon-short.png) right no-repeat; width: 50px; margin-left: 50px;}
.qti-dir-smb { background: url(images/canvas/crayon-short-black.png) right no-repeat;   margin-top:3px; width: 50px; margin-left: 50px;}
.qti-dir-lg  { background: url(images/canvas/crayon-long.png) right no-repeat; width: 85px; margin-left: 15px;}
.qti-dir-lgb { background: url(images/canvas/crayon-long-black.png) right no-repeat;   margin-top:3px; width: 85px; margin-left: 15px;}
.qti-dir-on.qti-dir-eraser  { height:30px; background: url(images/canvas/tool-eraser-off.png) right no-repeat; margin:5px 0; }
.qti-dir-off.qti-dir-eraser { height:30px; background: url(images/canvas/tool-eraser.png) right no-repeat; margin:5px 0; }
.qti-dir-ruler { transform: scale(0.95); left:-12px; position:relative; height:55px; width:100px; background: url(images/canvas/tool-ruler.png) right no-repeat;}
.qti-dir-on.qti-dir-size-huge  { float:right; height:30px; width:30px; background: url(images/canvas/tool-size-4.png) right no-repeat;  margin-top:15px; border: none; outline: none; }
.qti-dir-on.qti-dir-size-large  { float:right; height:30px; width:25px; background: url(images/canvas/tool-size-3.png) right no-repeat;  margin-top:18px; border: none; outline: none;}
.qti-dir-on.qti-dir-size-normal  { float:right; height:30px; width:20px; background: url(images/canvas/tool-size-2.png) right no-repeat;  margin-top:19px;  border: none; outline: none;}
.qti-dir-on.qti-dir-size-small  { float:right; height:30px; width:15px; background: url(images/canvas/tool-size-1.png) right no-repeat;  margin:20px 8px 0 0;  border: none; outline: none;}
.qti-dir-off.qti-dir-size-huge { float:right; height:30px; width:30px; background: url(images/canvas/tool-size-4o.png) right no-repeat;  margin-top:15px; border: none; outline: none;}
.qti-dir-off.qti-dir-size-large { float:right; height:30px; width:25px; background: url(images/canvas/tool-size-3o.png) right no-repeat;  margin-top:18px; border: none; outline: none;}
.qti-dir-off.qti-dir-size-normal { float:right; height:30px; width:20px; background: url(images/canvas/tool-size-2o.png) right no-repeat;  margin-top:19px;  border: none; outline: none;}
.qti-dir-off.qti-dir-size-small { float:right; height:30px; width:15px; background: url(images/canvas/tool-size-1o.png) right no-repeat;  margin:20px 8px 0 0;  border: none;  outline: none;}
.qti-dir-export { float:right }
.qti-dir-btngrp {
    width:100%;
    display:inline-block;
    overflow: auto;
    white-space: nowrap;
    margin:0px auto;
}
button:focus-visible {
    outline: 4px solid #C85100;
}
.qti-dir-on:focus-visible,
.qti-dir-off:focus-visible {
    position: relative;
    z-index: 10;
    outline: 4px solid #C85100;
}
.qti-dir-undo:focus-visible,
.qti-dir-clear:focus-visible {
    outline: revert;
    outline-offset: revert;
}
@media (max-width: 768px) {
    .qti-dir {
        width: 500px;
    }
}
/* Local Variables: */
/* tab-width: 4 */
/* End: */