.mycustomcontainer {
  position: relative;
}

#canvas_cont {

}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc; /* Optional, helps visualize */
}
  .mycustomcontainer{

    span {
        padding: 5px;
      }
      
      .flex {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      .col {
        flex-direction: column;
        justify-content: center;
      }
      
  #draggables_cont {
    width: 800px!important;
    display: flex!important;
    justify-content: center!important;
    gap: 10px!important;
    margin-bottom: 10px!important;
  }
  
  .draggable {
    width: 100px!important;
    height: 100px!important;
    border: 3px dotted #eee!important;
  }
  
  #canvas_cont {
    align-items: center!important;
    
  }
  
  #canvas {
    background: #ccc!important;
    margin: 0!important;
  }
  .canvas-container-wrapper {
    position: relative!important;
    width: 600!important; /* Match canvas width */
    height: 388!important; /* Match canvas height */
}

.ruler {
    position: absolute;
    box-sizing: border-box;
    background-image: repeating-linear-gradient(
        to right,
        #ccc 0,
        #ccc 1px,
        transparent 1px,
        transparent 3.78px /* 3.78px is roughly 1mm at 96 DPI */
    );
}

.top-ruler {
    top: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Adjust height as needed */
    background-position: 0 100%!important; /* Align markings to the bottom of the ruler */
    border-bottom: 1px solid #ccc!important;
}

.right-ruler {
    top: 0!important;
    right: 0!important;
    width: 20px!important; /* Adjust width as needed */
    height: 100%!important;
    background-image: repeating-linear-gradient(
        to bottom,
        #ccc 0,
        #ccc 1px,
        transparent 1px,
        transparent 3.78px
    )!important;
    background-position: 100% 0; /* Align markings to the left of the ruler */
    border-bottom: 1px solid #ccc!important;
}
.custom-checkbox-container {
    display: flex!important;
    gap: 10px!important;
    margin-top: 10px!important;
}

.custom-checkbox-input {
    display: none!important; /* Hide the default checkbox */
}

.custom-checkbox-label {
    display: block!important;
    width: 35px!important;
    height: 35px!important;
    line-height: 35px!important;
    text-align: center!important;
    border: 1px solid #ccc!important;
    cursor: pointer!important;
    border-radius: 5px!important;
    background-color: #f0f0f0!important;
    transition: background-color 0.2s!important;
}

.custom-checkbox-label i {
    font-size: 16px!important;
    color: #555!important;
}

/* Style for when the checkbox is checked */
.custom-checkbox-input:checked + .custom-checkbox-label {
    background-color: #007bff!important;
    border-color: #007bff!important;
}

.custom-checkbox-input:checked + .custom-checkbox-label i {
    color: #fff!important;
}
#canvas {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Target the canvas container as well, as it might be the source of the offset */
#canvas_cont {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
}