body{
    margin:0;
    padding:0;
    background:#f3f3f3;
    font-family:sans-serif;
}

#kp-toolbar{
    position:sticky;
    top:0;
    background:#222;
    padding:10px;
    z-index:9999;
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}

#kp-toolbar button{
    padding:4px 6px;
    margin-right:3px;
    cursor:pointer;
}

#kp-toolbar button:hover{
    cursor:pointer;
    background:#cbc5f7;
}

#kp-editor{
    width:90%;
    min-height:120vh;

    margin:20px auto;
    padding:20px;

    background:#efd4f7;

    border-radius:10px;

    box-shadow:0 0 10px rgba(3,3,3,0.15);

    outline:none;

    font-size:18px;

    line-height:1.5;

    font-family:'Tiro Devanagari Sanskrit', serif;
    caret-color: black;
    position: relative;
    z-index: 1;
}



#kp-toolbar label{

    color:white;

    font-size:14px;

    margin-left:10px;
}


#kp-toolbar select,
#kp-toolbar input[type="color"]{

    height:27px;

    border-radius:3px;

    border:none;

    padding:4px;

    cursor:pointer;
}

#kp-board-container{
    position: relative;
    width: 100%;
    
}

.kp-floating-text{
    position: absolute;
    min-width: 30px;
    min-height: 25px;
    top:100px;
    left:200px;
    padding: 3px;
    border: 1px dashed #b7b7fb;
    background: #b7b7fb;
    cursor: move;
    line-height:1.5;
    z-index: 20;
}


.kp-resize-handle{
    position: absolute;
    width: 14px;
    height: 14px;
    right: -7px;
    bottom: -7px;
    cursor: se-resize;
    background: ##f1f1f1;
    border-radius: 50%;
}

#kp-context-menu{
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #777;
    z-index: 9999;
    min-width: 120px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#kp-context-menu div{
    padding: 8px 12px;
    cursor: pointer;
}

#kp-context-menu div:hover{
    background: #eee;
}

.kp-shape{
    position: absolute;
    width: 140px;
    height: 100px;
    top: 120px;
    left: 120px;
    background: transparent;
    border: 3px solid #000;
    z-index: 20;
    box-sizing: border-box;
}

.kp-circle{
    border-radius: 50%;
}

.kp-capture-box{
    position: absolute;
    border: 2px dashed #000;
    background: rgba(0,0,255,0.08);
    z-index: 9999;
    box-sizing: border-box;
}

#kp-capture-menu{
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #777;
    z-index: 99999;
    min-width: 140px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#kp-capture-menu div{
    padding: 8px 12px;
    cursor: pointer;
}

#kp-capture-menu div:hover{
    background: #eee;
}

.kp-table-wrapper{
    position: absolute;
    top: 140px;
    left: 140px;
    background: #fff;
    z-index: 20;
    padding: 8px;
    box-sizing: border-box;
}

.kp-table{
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}

.kp-table td{
    border: 1px solid #000;
    min-width: 35px;
    height: 35px;
    padding: 3px;
    vertical-align:middle;
}


/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  background-color: #ebfb09;
  color: #000000;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
  width: 130px;
  
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.kp-image-object{
    position: absolute;
    top: 150px;
    left: 150px;
    width: 240px;
    height: 180px;
    z-index: 20;
    box-sizing: border-box;
    overflow: visible;
}

.kp-image-object img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

@media print{

    body *{
        visibility: hidden;
    }

    #kp-board-container,
    #kp-board-container *{
        visibility: visible;
    }

    #kp-board-container{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .kp-resize-handle,
    #kp-context-menu,
    #kp-capture-menu{
        display: none !important;
    }
}

.kp-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.kp-popup-content{
    background:#fff;
    width:400px;
    max-width:90%;
    padding:20px;
    border-radius:10px;
}

#kp-wordgrid-words{
    width:100%;
    height:200px;
    margin-top:10px;
    padding:10px;
    box-sizing:border-box;
}

.kp-grid-options{
    display:flex;
    gap:10px;
    margin-top:15px;
    align-items:center;
}

.kp-grid-options input{
    width:70px;
}

.kp-popup-buttons{
    margin-top:20px;
    display:flex;
    gap:10px;
}

.kp-word-grid{
    border-collapse:collapse;
    width:auto !important;
    width:100%
}

.kp-word-grid td{
    min-width:45px;
    height:20px;
    padding:2px;
    border:1px dotted #b7b7fb;
    text-align:center;
    vertical-align:middle;
    font-size:20px;
    font-weight:bold;
}

.kp-wordgrid-wrapper{
    display:inline-block;
    border:3px solid #8e81ee;
        
}

.kp-wordbank-wrapper{
    min-width:100px;
    max-width:450px;
    padding:4px;
    background:#e29c9c;

    display:grid;
    grid-template-columns:repeat(4, auto);
    grid-gap:5px;
    
    
}

.kp-wordbank-wrapper .kp-bank-word:first-child{
    grid-column:1 / span 4;
    text-align:center;
    font-weight:bold;
}


.kp-bank-word{
    padding:2px 2px;
    border:2px solid #777;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    font-size:20px;
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
    line-height:22px;
}