body {
    padding: 24px;
    margin: 0;
    background-color: #faf8ff ;
    display: flex;
    height: 100%;
    min-height: 100vh;
    justify-content: center;
    font-family: "Inter";
}
.content{
    align-self: center;
}
h1{
    color: #131b2e;
    margin-bottom: .5rem;
    letter-spacing: -.025rem;
    font-size: 2.25rem;
    line-height: 2.5rem;  
}

header p{
    color: #434655;
}
h2{
    font-size: 20px;              
    line-height: 1.25;            
    font-weight: 700;             
    color: #131b2e;     
}
.cardComponent{
    position: relative;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: .75rem;
    box-shadow: 0px 12px 32px rgba(19, 27, 46, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15); 
    transition: all 0.3s ease;
}
.cardComponent:hover {
    box-shadow: 0px 16px 40px rgba(19, 27, 46, 0.1);
}
.editForm {
    position: absolute;
    min-width: 300px;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: .75rem;
    box-shadow: 0px 12px 32px rgba(19, 27, 46, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15); 
    transition: all 0.3s ease;
}
.editFormInputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.input {
    display: flex;
    gap: .25rem;
    flex-direction: column;
}
.buttons {
    justify-self: center;
    align-self: center;
    display: flex;
    gap: 1rem;
}
.button {
    width: 4.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    /* /* border: .1rem solid #003ea8; */
    /* background-color: #ae0010;
    color: white; */
    color: #410002;
    background-color: #ffdad6;
}
.saveButton{
    background-color: #003ea8;
    color: white;
}
.topFlex{
    display: flex;
    flex-direction: row;
    /* border: .1rem solid red; */
    justify-content: space-between;
    align-items: start;
    align-content: start;
}
.topButtons{
    display: flex;
    gap: 1rem;
}
.cardContent{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    gap: 1rem;
}
.checkboxDiv {
    padding-top: .25rem;
}
.checkbox label{
    cursor: pointer;
    display: flex;
    align-self: center;
}
.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* hide input (sr-only equivalent) */
.checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* box */
.checkbox-box {
  width: 24px;
  height: 24px;
  border-radius: 6px; /* rounded-md */
  border: 1px solid #2563eb;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* icon */
.check-icon {
  color: white;
  font-size: 14px;
  transform: scale(0);
  transition: transform 0.2s ease;
}
/* ✅ peer replacement */
.checkbox-input:checked + .checkbox-box {
  background-color: #2563eb;
  border-color: transparent;
}

.checkbox-input:checked + .checkbox-box .check-icon {
  transform: scale(1);
}

button {
    background: none;
    border: 0;
}
.delete{
    padding: .5rem .5rem;
    border-radius: .5rem;
    transition: background-color 0.2s ease;
    color: #ae0010;
}
.delete:hover{
    background-color: rgba(174, 0, 16, 0.1);
}
.description {
    line-height: 1.625;
    color: #434655;
}
span.material-symbols-outlined {
    font-size: 16px;
    /* color: red; */
}
.priorityDiv{
    padding-top: .5rem;
}
.priority{
    color: #410002;
    background-color: #ffdad6;
    padding: .25rem .75rem;
    font: bold;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* gap-1 */
}
.dateDiv{
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-top: 0.1rem solid rgba(195, 198, 215, 0.1);    
}
.dateInfo {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: #434655;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.dot{
    font-size: 0.75rem;
    line-height: 1rem;
}
.dueDate{
    font-weight: 500;
}
.countDown{
    color: #9d4300;
    font-weight: 600;
}
ul{
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-top: .5rem;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    margin: 0;
}
li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px; 
}
li.work{
    background-color: #dbe1ff;
    color: #003ea8;
}
li.urgent{
    background-color: #ffdbca;
    color: #783200;
}
.listEnd{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #c3c6d7;
}
.end{
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: .2em;
    font-weight: bold;
}
.dash{
    height: 1px;
    flex: 1 1 0%;
    background-color: #c3c6d7;
}
.status {
    padding: .25rem .75rem;
    background-color: #e2e7ff;
    color: #434655;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* gap-1 */
}
.done {
    background-color: Green;
    color: white;
}
.progressBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .25rem;
    /* border-top: .5rem solid green; */
    border-radius: .75rem;
}
.progressBar,.finish{
    border-top: .5rem solid green;  
}
.progressBar,.finish{
    border-top: .5rem solid green;  
}


.hidden {
    display: none;
}