:root {
    --sidebar-width: 48px;
    --toolbar-height: 48px;
    --statusbar-height: 22px;
    --preview-width: 300px;
    --chat-height: 0px;
}
#sidebar {
    float: left;
    width: calc(var(--sidebar-width));
    height: calc(100% - var(--statusbar-height));
    overflow: hidden;
}
#toolbar {
    position: relative;
    float: right;
    width: calc(100% - var(--preview-width) - var(--sidebar-width));
    height: var(--toolbar-height);
}
.tool {
    opacity: 0.7;
    width: 48px;
    height: 36px;
    background-position: center center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    filter: invert(1);
    cursor: pointer;
}
.tool.selected {
    background-color: rgba(255, 255, 255, 0.4);
}
body.dark .tool {
    filter: none;
}
body.dark .tool.selected {
    background-color: rgba(0, 0, 0, 0.8);
}
.seperator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0px;
}
#select_mode {
    background-image: url("../img/select.png");
}
#brush_mode {
    background-image: url("../img/brush.png");
}
#shifter_mode {
    background-image: url("../img/shifter.png");
}
#line_mode {
    background-image: url("../img/line.png");
}
#rectangle_mode {
    background-image: url("../img/rectangle.png");
}
#rectangle_mode.outline {
    background-image: url("../img/rectangle_outline.png");
}
#rectangle_mode.filled {
    background-image: url("../img/rectangle_filled.png");
}
#ellipse_mode {
    background-image: url("../img/ellipse.png");
}
#ellipse_mode.outline {
    background-image: url("../img/ellipse_outline.png");
}
#ellipse_mode.filled {
    background-image: url("../img/ellipse_filled.png");
}
#fill_mode {
    background-image: url("../img/fill.png");
}
#sample_mode {
    background-image: url("../img/sample.png");
}
#sidebar, #toolbar {
    background-color: var(--mid-color);
}
body.dark #sidebar, body.dark #toolbar {
    background-color: var(--dark-mid-color);
}
#current_colors {
    position: relative;
    width: 48px;
    height: 48px;
}
#current_colors > canvas {
    position: absolute;
    border: 1px solid black;
    width: 24px;
    height: 24px;
}
body.dark #current_colors > canvas {
    border: 1px solid white;
}
#fg {
    top: 4px;
    left: 4px;
    background-color: rgb(170, 170, 170);
}
#bg {
    top: 16px;
    right: 4px;
    background-color: rgb(0, 0, 0);
}
#swatches {
    column-gap: 0px;
    column-count: 2;
    width: 48px;
    min-height: 192px;
}
#swatches > div {
    display: inline-block;
    vertical-align: bottom;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    outline: 1px solid transparent;
    cursor: pointer;
}
#swatches > div.selected_fg {
    background-image: url("../img/selected_fg.png");
}
#swatches > div.selected_bg {
    background-image: url("../img/selected_bg.png");
}
#swatches > div.selected_fg.selected_bg {
    background-image: url("../img/selected_fg.png"), url("../img/selected_bg.png");;
}
#viewport {
    float: left;
    width: calc(100% - var(--sidebar-width) -  var(--preview-width) - 1px);
    height: calc(100% - var(--toolbar-height) - var(--statusbar-height) - var(--chat-height) - 1px);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background-color: var(--view-color);
    overflow: auto;
    touch-action: none;
    cursor: -webkit-image-set(url("../img/crosshair.png") 1x, url("../img/crosshair_2x.png") 2x) 15 15, crosshair;
}
#chat {
    width: calc(100% - var(--sidebar-width) -  var(--preview-width));
    height: var(--chat-height);
    max-height: calc(100% - var(--toolbar-height) - var(--statusbar-height));
    overflow: hidden;
    background-color: var(--dark-mid-color);
    position: relative;
}
#chat_resizer {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 8px;
    cursor: ns-resize;
}
#chat_resizer:hover, #chat_resizer.active {
    background-color: rgba(0, 0, 0, 0.3);
}
#user_list {
    float: left;
    background-color: var(--dark-mid-color);
    border-top: 1px solid var(--dark-border-color);
    border-left: 1px solid var(--dark-border-color);
    height: calc(100% - 1px);
    width: calc(150px - 1px);
    overflow-y: hidden;
    overflow-y: scroll;
}
#user_list > div {
    white-space: nowrap;
    color: #aaaaaa;
    font-size: 12px;
    margin: 4px 6px 4px 2px;
    padding-left: 13px;
    background-position: 0px 2px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
}
#user_list > div:hover {
    text-decoration: underline;
    cursor: pointer;
}
#user_list > div.guest:hover {
    text-decoration: none;
    cursor: default;
}
#messages {
    float: left;
    border-top: 1px solid var(--dark-border-color);
    background-color: var(--dark-mid-color);
    width: calc(100% - 1px - 150px);
    overflow-y: scroll;
    height: calc(100% - 28px);
    border-left: 1px solid var(--dark-border-color);
}
#messages a {
    color: #aaaaaa;
    outline: none;
}
#messages > div.welcome {
    display: block;
    text-align: center;
    user-select: text;
}
#messages > div.date {
    display: block;
    text-align: center;
    color: #aaaaaa;
}
#chat_input {
    background-color: var(--dark-mid-color);
    color: white;
    font-size: 12px;
    border: none;
    padding: 0px 8px;
    width: calc(100% - 16px - 1px - 150px);
    height: 27px;
    outline: none;
    border-top: 1px solid var(--dark-border-color);
    border-left: 1px solid var(--dark-border-color);
}
#messages > div {
    display: flex;
    font-size: 12px;
    margin: 4px 6px;
}
#messages > div > div.nick {
    display: inline-block;
    color: #aaaaaa;
}
#messages > div > div.time {
    display: inline-block;
    color: #555555;
    margin-right: 4px;
}
#messages > div > div.text {
    display: inline-block;
    color: white;
    padding-left: 4px;
    word-break: break-all;
    user-select: text;
    flex: 1;
}
body.dark #viewport {
    border-color: var(--dark-border-color);
    background-color: var(--dark-view-color);
}
#preview {
    position: relative;
    float: right;
    width: calc(var(--preview-width) - 1px);
    background-color: var(--mid-color);
    height: calc(100% - var(--statusbar-height));
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    overflow-x: hidden;
    cursor: grab;
}
#preview.grabbing {
    cursor: grabbing;
}
#preview > canvas {
    display: block;
    width: calc(var(--preview-width) - 40px);
    margin: 0px 20px;
    image-rendering: auto !important;
    pointer-events: none;
}
#view_frame {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: absolute;
    pointer-events: none;
}
body.dark #preview {
    background-color: var(--dark-mid-color);
    border-color: var(--dark-border-color);
}
#canvas_container {
    position: relative;
    margin: 0 auto;
}
#canvas_container canvas {
    display: block;
}
#canvas_container > div {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
    width: inherit;
    height: inherit;
}
.hidden {
    display: none !important;
}
#statusbar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: var(--statusbar-height);
    background-color: var(--border-color);
    overflow: hidden;
}
body.dark #statusbar {
    background-color: var(--dark-border-color);
}
#statusbar > div > div {
    height: var(--statusbar-height);
    color: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    line-height: var(--statusbar-height);
    display: inline-block;
}
body.dark #statusbar > div > div {
    color: rgba(255, 255, 255, 0.3);
}
#left_info {
    float: left;
    width: 300px;
}
#left_info > div {
    padding-left: 8px;
    width: 110px;
    cursor: pointer;
}
#mid_info {
    float: left;
    text-align: center;
    width: calc(100% - 630px);
}
#right_info {
    float: right;
    width: 330px;
    text-align: center;
}
#font_name {
    float: left;
    width: 160px;
}
#cursor_position {
    float: left;
    width: 120px;
}
#insert_mode {
    float: right;
    width: 50px;
}
#editing_layer {
    position: relative;
}
#editing_layer > canvas {
    position: absolute;
}
#editing_layer > canvas.border {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
}
#editing_layer > canvas.flashing {
    box-sizing: border-box;
    border: 1px solid white;
    animation: blink 0.3s steps(1, end) infinite;
}
@keyframes blink {
    0% {border-color: rgb(170, 170, 170);} 50% {border-color: black;}
}
#editing_layer > canvas.selection {
    border: 2px solid;
    border-image: url("../img/selection_border.gif") 1 repeat;
    border-image-width: 2px;
    animation: update-cursor 0.3s steps(1, end) infinite;
}
#editing_layer > canvas.selection.operation {
    border-image-source: url("../img/selection_border_operation.gif");
}
@keyframes update-cursor {
    0% {border-color: black;} 50% {border-color: white;}
}
#reference_image {
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.4;
}
#guide.hidden {
    display: none;
}
#guide.guide_column {
    border-right: rgba(100, 100, 100) 1px dashed;
}
#guide.guide_row {
    border-bottom: rgba(100, 100, 100) 1px dashed;
}
#drawing_grid.hidden {
    display: none;
}
#drawing_grid .column {
    border-right: rgba(100, 100, 100) 1px dashed;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
#drawing_grid .row {
    border-bottom: rgba(100, 100, 100) 1px dashed;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#zoom {
    font-size: 30px;
    pointer-events: none;
    position: fixed;
    top: 16px;
    right: 16px;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 1);
    color: white;
    opacity: 0;
}
.fade {
	animation: fade 0.5s ease-out 0.3s both;
}
@keyframes fade {
    0% {opacity: 0.7;} 100% {opacity: 0;}
}
.ghosted {
    opacity: 0.3;
}