.create-wrapper {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    height: calc(100vh - 56px);
    overflow: hidden;
}
.create-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background-color: var(--container-primary-color);
}
.create-size-area {
    flex: 1 1 auto;
    min-height: 0;
}
.create-basic-board {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--container-secondary-color);
}
.create-canvas-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    border: 2px solid var(--btn-bd-color);
    overflow: hidden;
}
.create-canvas-container {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    box-shadow: 4px 4px 12px var(--shadow-color);
}
.tab-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.tab-pane.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
#canvas-content > .d-flex.flex-column.gap-3,
#properties-content > .d-flex.flex-column.gap-3 {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#canvas-content hr.divider + div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sidebar-left, .sidebar-right, .sidebar-bottom {
    flex: 0 0 auto;
}

.sidebar-right-nav {
    /*padding: 0.7rem 0;*/
    flex: 1 1 auto;
    z-index: 1045;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.layer-list-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 2px solid var(--btn-bd-color);
}
.layer-table-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow: scroll;
    background-color: var(--btn-bg-color);
}
.table-button-area {
    flex: 0 0 auto;
    background-color: var(--btn-bg-color);
}
.create-input-container input {
    border-radius: var(--btn-size);
    background-color: var(--btn-bg-color);
    border: 2px solid var(--btn-bd-color);
    color: var(--font-color);
}
.create-input-container input::placeholder,
.create-input-container input[readonly] {
    color: var(--placeholder-color);
}
.create-input-container input:hover,
.create-input-container input:focus,
.create-input-container input:active {
    background-color: var(--btn-bg-hover-color);
    color: var(--font-color);
    border-color: var(--btn-bd-color);
    outline: none;
    box-shadow: none;
}
.create-input-container input[readonly]:hover,
.create-input-container input[readonly]:focus,
.create-input-container input[readonly]:active {
    border-radius: var(--btn-size);
    background-color: var(--btn-bg-color);
    border: 2px solid var(--btn-bd-color);
    color: var(--placeholder-color);
    cursor: default;
}
.color-picker {
    color: transparent !important;
    border-radius: var(--btn-size);
    width: 100%;
    height: 40px;
    padding: 0;
    border: 2px solid var(--btn-bd-color);
}
.color-picker:hover {
    cursor: pointer !important;
}
#canvasColorInput {
    height: 40px;
}
.clr-dark {
    background: var(--btn-bg-color);
    box-shadow: 4px 4px 12px var(--shadow-color);
    z-index: 9999;
}
.clr-dark input.clr-color {
    background-color: var(--btn-bg-color);
    border: 2px solid var(--btn-bd-color);
    color: var(--font-color);
}
.clr-dark input.clr-color:focus,
.clr-dark input.clr-color:hover {
    cursor: text;
    border: 2px solid var(--btn-bd-color);
    background-color: var(--bg-hover-color);
    color: var(--font-color);
}
#clr-color-preview.clr-preview {
    border: 0;
}
#createLayerTable thead th {
    display: none;
}
#createLayerTable tbody td {
    height: 20px;
    font-size: 0.75rem;
    padding: 0.3rem !important;
}
#createLayerTable tbody td:first-child {
    width: 30px;
}
.drag-handle {
    cursor: grab !important;
}
.drag-handle:active,
.drag-handle:focus {
    cursor: grabbing !important;
}
.table-row-dragging {
    opacity: 0 !important;
    background-color: transparent !important;
    border: none !important;
    pointer-events: none;
}
.table-row-dragging td {
    background-color: transparent !important;
    border: none !important;
    color: transparent !important;
}
.btn-sm-no-bg {
    /*margin: 2px 2px;*/
    background-color: transparent;
    color: var(--font-color);
    border: 0;
}
.text-label {
	color: var(--font-color);
}