body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 20px;
}

* {
  margin: 0px;
  box-sizing: border-box;
}

.akshar-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: white;
  border-radius: 16px;
  padding: 10px 20px 20px 20px;
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.tier-label-container {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 150px;
}


.tier-label-container p {
  background-color: rgb(220, 220, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  height: 44px;
  font-weight: bold;
}


.timeline {
  background-color: #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  padding: 10px 10px 10px 10px;
  border: 1px solid rgb(201, 201, 201);
  overflow-x: auto;
}

.flex-display {
  display: flex;
  justify-content: space-between;
}

.word-tier {
  height: 44px;
  background-color: #e5e7eb;
  display: flex;
  align-items: center;
}

.grid-timeline ,
.grid-timeline2{
  display: flex;
}

.booth-grid {
  background-color: rgb(186, 182, 245);
  width: 480px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 5px;
  position: relative;
  color: rgb(55, 55, 55);
}

.locked {
  border: 2px solid rgb(12, 116, 14);
  border-radius: 2px;
}

.lock {
  z-index: 1000;
  position: absolute;
  right: 10px;
  top : 5px;

  cursor: pointer;

  background-color: rgb(37, 37, 37);
  padding: 4px 6px;
  border-radius: 20px;
}

.lock-green {
  background-color: "green";
}

.akash-tier {
  background-color: rgb(49, 95, 189);
  width: auto;
  height: 54px;
  display: flex;
}

.akash-cell {
  background-color: rgb(250, 219, 215);
  border: 0.9px solid rgb(87, 87, 87);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.agni-tier {
  background-color: orange;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.agni-cell {
  background-color: rgb(217, 247, 209);
  border: 0.5px solid rgb(101, 68, 68);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vayu-tier {
  background-color: rgb(118, 107, 234);
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.vayu-cell {
  background-color: rgb(207, 252, 247);
  border: 0.5px solid rgb(101, 68, 68);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.jal-tier {
  background-color: rgb(76, 70, 251);
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.jal-cell {
  background-color: rgb(216, 239, 255);
  border: 0.5px solid rgb(101, 68, 68);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.prithvi-tier {
  background-color: rgb(172, 124, 76);
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.prithvi-cell {
  background-color: rgb(233, 231, 231);
  border: 0.5px solid rgb(101, 68, 68);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.adjust-akshar-timeline {
  background-color: #e5e7eb;
  background-color: rgb(247, 169, 169);
  height: 44px;
  display: flex;
  position: relative;
}


.akshardfdfd {
  height: 100%;
  width: 100px;
  background-color: rgb(53, 134, 241);
  border-radius: 4px;
  border: 2px solid rgb(25, 91, 233);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}


.note {
  font-size: 12px;
  font-weight: 300;
  color: rgb(107, 106, 106);
}

.submit-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}


.submit-data {
  background-color: rgb(52, 69, 219);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  width: 150px;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 40px;
}

.submit-data:hover {
  opacity: 0.9;
}



@media (max-width: 640px ) {
  .tier-label-container {
    display: none;
  }

  .akshar-editor {
    padding: 0px;
  }

  .timeline ,
  .word-tier,
  .adjust-akshar-timeline{
    background-color: white;
  }

  body {
    padding: 12px;
  }

  .letters-container {
    order: 4; /* move below timeline */
  }

  .js-timeline {
    order: 2;
  }


  .delete-region {
    display: none;
  }

  .letters-container {
    display: none;
  }

  .select-drag-drop-button {
    display: inline-block;
  }

}

.speed-buttons-container {
  margin-bottom: 10px;
}


.audio-speed-button,
.select-drag-drop-button {
  border: 1px solid rgb(168, 168, 168);
  background-color: rgb(234, 234, 234);
  padding: 10px 16px;
  border-radius: 10px;
  margin-right: 4px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}


.audio-speed-button:hover,
.select-drag-drop-button:hover {
  box-shadow: 0px 0px 5px rgba(132, 132, 132, 0.594);
}


.drag-selected {
  background-color: rgb(71, 71, 230);
  color: rgb(230, 229, 229);
  border-color : rgb(71, 71, 230);
}

.selected-button {
  background-color: black;
  color: rgb(231, 230, 230);
  border: none;
}


.rendered-filename {
  color: rgb(96, 95, 95);
  margin-left: 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}


.cell-label {
  position: absolute;
  left: 4px;
  top: 2px;
  color: black;
}


.submit-data-response {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  height: 16px;
}

.hide-drag {
  .letters-container {
    display: none;
  }

  .delete-region {
    display: none;
  }
}


.show {
  display: flex;
}


/* unlocked = empty */
.cell-lock {
  position: absolute;
  left: 2px;
  bottom: 2px;

  width: 14px;
  height: 14px;

  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  border: none;

  cursor: pointer;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* locked cell */
.cell.locked {
  pointer-events: none;
}

/* allow clicking the lock */
.cell.locked .cell-lock {
  pointer-events: auto;
  background-color: green;
}

/* EXPLICIT tick */
.cell.locked .cell-lock::before {
  content: "✓";
  color: white;
  font-size: 12px;
  line-height: 1;
}


.cell-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;

  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);

  background-color: red;
  
}




/* UI color utility classes — background colors */

.ui-green {
  background-color: #127335;
}

.ui-blue {
  background-color: #3B82F6;
}

.ui-yellow {
  background-color: #ff9900;
}

.ui-red {
 background-color: #da0202;
}



.grid-timeline2{
  .akash-tier,
  .agni-tier,
  .jal-tier,
  .vayu-tier{
    display: none;
  }
}