.dw-canvas-container {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* Add spacing between widgets */
}
.dw-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.dw-brush-size-menu  {
    position: absolute;
    background-color: var(--ff-formbgcolor) !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    margin-top: 1.2rem;
    left: 2px;
    z-index: 3;
    top: 30px;
}
.dw-size-option {
    background-color: var(--ff-field-bgcolor) !important;   
}
.dw-size-option:hover {
    background-color: var(--ff-primary-50) !important;
}
.dw-toolbar {
    margin-top: 1rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dw-toolbar span {
    user-select: none;
}
.dw-toolbar-icon {
    height: auto !important;
    padding: 0.15rem .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 40px; /* Adjust height as needed */
    width: 40px;
    border: 1px solid var(--ff-field-border);
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--ff-field-bgcolor);
}
.dw-toolbar-icon svg, .dw-toolbar-icon i {
    width: 24px;
    height: 24px;
}
.dw-toolbar-icon {
    width: 40px;
    height: 40px !important;
}
.dw-toolbar-icon .dw-circle-icon {
    font-size: 12px !important;
    width: 12px;
    height: 12px;
}
.dw-toolbar-icon:hover {
    /* opacity: 0.7; */
}
.dw-toolbar-icon.dw-icon-selected {
    background-color: #d1d5db;
}
.dw-bg-white {
    background-color: white;
}
.dw-p-unset {
    padding: 0;
}
.dw-flex {
    display: flex;
    align-items: center;
}
.dw-mr-half {
    margin-right: 0.5rem;
}
.dw-mr-1 {
    margin-right: 1rem;
}
.dw-mr-2 {
    margin-right: 2rem;
}
.dw-input-color {
    width: 24px;
    height: 24px;
}
.dw-relative {
    position: relative;
}
.dw-p-2 {
    padding: 0.5rem;
}
.dw-p-4 {
    padding: 0.5rem;
}
.dw-hover-bg-gray-200:hover {
    background-color: #e5e7eb;
}
.dw-rounded {
    border-radius: 0.375rem;
}
.dw-bg-gray-300 {
    background-color: #d1d5db;
}
.dw-absolute {
    position: absolute;
}
.dw-shadow-md {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.dw-rounded-lg {
    border-radius: 0.5rem;
}
.dw-mt-2 {
    margin-top: 0.5rem;
}
.dw-hidden {
    display: none;
}
.dw-block {
    display: block;
}
.dw-w-full {
    width: 100%;
}
.dw-border {
    border: 1px solid #d1d5db;
}
.dw-cursor-pointer {
    cursor: pointer;
}

.dw-toggle:hover {
    background: none !important;
}
.dw-main:hover {
    /* background-color: #e5e7eb !important; */
}

.dw-main {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dw-main.dw-brush {
    margin-left: -8px;
    margin-right: 1rem;
}
.dw-main.dw-eraser {
    margin-right: -8px;
}
.dw-main.dw-active {
    border-radius: 50%;
    background-color: var(--ff-primary-700) !important;
    padding: 4px;
}
.dw-brush-path,.dw-eraser-path{
    fill: var(--ff-gray-900) !important;
}
.dw-path {
    fill: var(--ff-gray-900) !important;
}

.dw-active .dw-brush-path, .dw-active .dw-eraser-path{
    fill: white !important;
}
.dw-clear{
    width: auto;
    padding: 2px 15px;
}
.dw-undo svg, .dw-redo svg{
    height: 15px !important;
    width: 15px !important;

}
.dw-width-auto{
    width: auto;
}   
.dw-brush-size-toggle {
    padding: 0.15rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dw-brush-arrow {
    width: 10px !important;
    height: 10px !important;
}
.dw-brush-size-menu {
    width: 100px;
}


.dw-brush-size-menu span {
    display: flex;
    align-items: center;  /* Vertically center */
    justify-content: center; /* Horizontally center */
    gap: 8px; /* Space between icon and number */
}

.dw-brush-size-menu i {
    display: flex;
    align-items: center; /* Ensures the icon itself is centered */
}
.dw-spliter {
    color: gray;
}

.dw-color-picker-wrapper {
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dw-color-picker-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        red, yellow, lime, cyan, blue, magenta, red
    );
    padding: 5px;
    box-sizing: border-box;
}

.dw-input-color {
    position: relative;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
}

.dw-input-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.dw-input-color::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.ff-form .dw-canvas-container {
    border: .15em dashed var(--ff-field-border);
    background-color: #ffffff;
}

.ff-form .dw-canvas-container:focus-within {
    border-style: solid;
    border-color: var(--ff-primary-700);
  }