/* Basic styling */
::-webkit-scrollbar { display: none; }

::selection{
    background: #5951ff;
    color: aliceblue;
}

body { background-color: #1b1f2a; color: #fff; }

.a4 {
  width: 100%;
  max-width: 210mm;
  height: auto;
  min-height: 297mm;
  padding: 15mm;
  border: 2px solid #000;
  background: white;
  margin: auto;
  border-radius: 8px;
  overflow-x: auto;
  box-sizing: border-box;
}

.editable-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #000;
}

.editable-title[contenteditable="true"] {
  border-bottom: 2px dashed #000;
  display: inline-block;
  padding: 5px 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table, th, td { border: 1px solid #000; }
th, td {
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  resize: both;
  overflow: auto;
}

th.remarks-col, td.remarks-col { width: 100px; }

#output { margin-top: 20px; text-align: center; }
input, .form-check-label { color: #fff; }
.form-control, .btn { border-radius: 10px; }
.btn { margin-right: 10px; }
.form-container { max-width: 600px; margin: 0 auto 30px; }

.scroll-animation { scroll-behavior: smooth; }

#previewCanvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid #ccc;
}

#downloadBtn { display: block; margin: 20px auto 0; }

@media (max-width: 992px) {
  .editable-title { font-size: 24px; }
  table, th, td { font-size: 12px; }
  .a4 { max-width: 100%; height: auto; min-height: 210mm; }
}

@media (max-width: 768px) {
  .editable-title { font-size: 22px; }
  table, th, td { font-size: 11px; }
  .a4 { max-width: 100%; height: auto; min-height: 210mm; padding: 8mm; }
}

@media (max-width: 576px) {
  .editable-title { font-size: 20px; }
  table, th, td { font-size: 10px; }
  .a4 { max-width: 100%; height: auto; min-height: 200mm; padding: 6mm; }
}

@media (max-width: 375px) {
  .editable-title { font-size: 18px; }
  table, th, td { font-size: 9px; }
  .a4 { max-width: 100%; height: auto; min-height: 190mm; padding: 2mm; }
}

@media (min-width: 600px) and (max-width: 768px) {
  .a4 { max-width: 90%; height: auto; min-height: 220mm; padding: 8mm; }
}

.underline-slide {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.underline-slide::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 4px;
  width: 0%;
  background-color: #6643b5;
  transition: width 0.3s ease;
}

.underline-slide:hover {
  color: #6643b5;
}

.underline-slide:hover::after {
  width: 100%;
}

/* Hide radio buttons */
input[type="radio"][name="alignment"] {
  display: none;
}

/* Icon styles */
label[for^="align"] {
  cursor: pointer;
  color: #fff;
  transition: color 0.3s ease;
}

/* input[type="radio"]:checked + label {
  color: #6643b5;
} */

body.light-mode label[for^="align"] {
  color: #1d1f28;
}

/* body.light-mode input[type="radio"]:checked + label {
  color: #6643b5;
} */

#alignLeft:checked + label,
#alignCenter:checked + label,
#alignRight:checked + label {
  color: #6643b5;
}