.drawing-question-options {
    display: none;
}

.line-option-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 600px;
}

.line-options .line-style
{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 4px solid transparent;
    float: left;
    margin-right: 8px;
    cursor: pointer;
    opacity: 0.5;
    margin-bottom: 4px;
}

.line-options .line-style.active
{
    border-color: #555555;
    background-image: url('/_images/check.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 1;
}

.line-options .line-style.tool-select {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

.line-options .line-style.line-width
{
    background-color: #cccccc;
    height: 30px;
    border-radius: 4px;
    opacity: 0.5;
}

.line-options {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.line-options .label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #566875;
    font-size: 0.9em;
    text-transform: uppercase;
}

.line-style-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

svg.svg-answer
{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom right;
    border-radius: 4px;
    box-shadow: 1px 1px 8px #ccc;
}

svg.svg-answer.blank-canvas
{
    background-color: #fdfdfd;
}


svg.svg-answer .line
{
    fill: none;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    stroke-linecap: round;
}


svg.svg-answer .line.white { stroke: #ffffff; }
svg.svg-answer .line.black { stroke: #000000; }
svg.svg-answer .line.red { stroke: #ff0000; }
svg.svg-answer .line.green { stroke: #00ff00; }
svg.svg-answer .line.blue { stroke: #0000ff; }
svg.svg-answer .line.orange { stroke: #ff8800; }

.line-options .line-style.line-color-white { background-color: #ffffff; border-color: #dddddd; }
.line-options .line-style.line-color-white.active { background-color: #ffffff; border-color: #0088ff; }
.line-options .line-style.line-color-black { background-color: #000000; }
.line-options .line-style.line-color-red { background-color: #ff0000; }
.line-options .line-style.line-color-green { background-color: #00ff00; }
.line-options .line-style.line-color-blue { background-color: #0000ff; }
.line-options .line-style.line-color-orange { background-color: #ff8800; }


svg.svg-answer .line.fine { stroke-width: 1px; }
svg.svg-answer .line.normal-width { stroke-width: 3px; }
svg.svg-answer .line.wide { stroke-width: 6px; }
svg.svg-answer .line.widest { stroke-width: 15px; }

.line-options .line-style.line-width-fine { width: 20px; }
.line-options .line-style.line-width-normal-width { width: 40px; }
.line-options .line-style.line-width-wide { width: 60px; }
.line-options .line-style.line-width-widest { width: 90px; }

@media (max-width: 600px) {
    .line-option-container {
        flex-direction: column;
        gap: 15px;
    }

    .drawing-question-options button.cta {
        width: 100%;
        margin: 5px 0 !important;
    }
}