.xcontainer {
   position: absolute;
}

.canvas {
   background: #0FF;
}

.canvascontainer {
   background: rgba(129, 180, 180, 0.2);

}

#lxxxarge-container {
   width: 80vw;
   /*1100px;*/
   height: 75vh;
   /*800px; */
   overflow: hidden;
}

.largecontainer {
   width: 100%;
   /*80vw;*/
   /*1100px;*/
   height: 100%;
   /*75vh; */
   /*800px; */
   overflow: hidden;
}

#sxxcroll-container {
   /*width:  calc(75vw); /*calc(100% - 22px); 95vw   /*1000px;*/
   height: calc(70vh);
   /* - 60px); /*22px); 80vh /*600px */
   overflow: auto;
   margin: 2px;
   background-color: rgb(244, 242, 242);
   border: 1px solid rgb(209, 237, 249);
}

.scrollcontainer {
   /*width:  calc(75vw); /*calc(100% - 22px); 95vw   /*1000px;*/

   height: calc(70vh);
   /* - 60px); /*22px); 80vh /*600px */
   overflow: auto;
   margin: 2px;
   background-color: rgb(244, 242, 242);
   border: 1px solid rgb(209, 237, 249);
}

xbody {
   /* margin bottom by footer height */
   margin-bottom: 160px;
}

body {
   margin: 0;
   padding: 0;
   overflow: auto;
   /*hidden; */
   background-color: white;
}

header {
   position: sticky;
   top: 0;
   background-color: #555;
   color: rgb(25, 146, 150);
   padding: 0;
   /* 10px 16px;*/
   z-index: 1000;
}

xxxcontent {
   height: 2000px;
   /* To create scrollable content */
   padding: 20px;
}



.xfooter {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
   background: #F37A1D;
   border-top: 3px solid #F37A1D;
}

.form-input {
   /* mod of form-select */
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
   -moz-padding-start: calc(0.75rem - 3px);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   background-color: rgb(241, 241, 194);
   /*#fff; */
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
   border: 1px solid #ced4da;
   border-radius: 0.375rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

tkItem {
   width: 50px;
}

.tkBtn {
  /* background-color: #9cd5e2;
   color:#dc3545; */
   border: none;
   padding: 2px 4px;
   cursor: alias;
   font-size: 75%;
   border-radius: 0;
}


/*from js */
/* Additional CSS for UI improvements */
.grid-background {
   background-image:
      linear-gradient(to right, #f0f0f0 1px, transparent 1px),
      linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
   background-size: 20px 20px;
}

.xtooltip {
   position: relative;
   display: inline-block;
}

.xtooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: white;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.3s;
}

.xtooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}



.property-input {
   width: 100%;
   padding: 2px 4px;
   border: 1px solid #ccc;
   border-radius: 3px;
}

.property-input:focus {
   border-color: #007bff;
   outline: none;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.property-input.error {
   border-color: #dc3545;
   background-color: #f8d7da;
}

.drag-preview {
   opacity: 0.7;
   transform: scale(0.8);
}

.context-menu {
   position: absolute;
   background: white;
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: 5px 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   display: none;
}

.context-menu-item {
   padding: 8px 16px;
   cursor: pointer;
   border: none;
   background: none;
   width: 100%;
   text-align: left;
}

.context-menu-item:hover {
   background-color: #f0f0f0;
}

.zoom-controls {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 100;
}

.zoom-btn {
   background: white;
   border: 1px solid #ccc;
   padding: 5px 10px;
   margin: 2px;
   cursor: pointer;
   border-radius: 3px;
}

.zoom-btn:hover {
   background: #f0f0f0;
}

.validation-error {
   color: #dc3545;
   font-size: 12px;
   margin-top: 2px;
}