@import url(https://fonts.googleapis.com/css?family=Poiret+One|Lobster|Anton|Shadows+Into+Light|Open+Sans|Roboto|Orbitron|Oswald|Raleway|Montserrat|Roboto+Slab|Indie+Flower|Fjalla+One|Bree+Serif|Pacifico|Abril+Fatface);
body {
    background: #e8ebf3;
    font: 400 16px 'Poppins', sans-serif;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.poiret{font-family:Poiret One;}
.lobster{font-family:lobster;}
.anton{font-family:Anton;}
.Shadows{font-family:'Shadows Into Light';}
.open{font-family:open sans;}
.roboto{font-family:roboto;}
.slabo{font-family:"Orbitron";}
.oswald{font-family:Oswald;}
.raleway{font-family:raleway;}
.Montserrat{font-family:Montserrat;}
.roboto2{font-family:roboto slab;}
.indie{font-family:indie flower;}
.fjalla{font-family:fjalla one;}
.bree{font-family:bree serif;}
.pacifico{font-family:pacifico;}
.abril{font-family:'Abril Fatface';font-size:16px;}

.text-number {
    font-size:80px;
    margin-bottom:0;
    overflow:auto;
    margin-top:0;
    height:140px;
}

.text-animate {
    font-size:42px;
    margin-bottom:0;
    overflow:auto;
}

.button-one {
    background: #319ded;
    color: white;
    font-weight: 600;
}

button.submit {
    background: #319ded;
    color: white;
    font-weight: 600;
    margin: 0px 7px;
}

.button-one:hover, button.submit:hover{
    color: #ffffff;
    background: #8dccfc;
}

.button-two, .button-four {
    background: #1ea89e;
    color: white;
    font-weight: 600;
}

.button-two:hover{
    color: #1ea89e;
    background: #a5d0cd;
}

.button-three {
    background: #da4f42;
    color: white;
    font-weight: 600;
}

.button-three:hover{
    color: #da4f42;
    background: #eaaea9;
}

.button-four:hover{
    color: white;
    background: #a5d0cd;
}

.button-five {
    background: #b9b9b9;
    color: white;
    font-weight: 500;
    border-radius: 50px;
}

.button-five:hover{
    color: #b9b9b9;
    background: #ffffff;
}

.button-disable {
    background: #b9b9b9;
    color: white;
    font-weight: 500;
    border: 2px solid #a3a3a3 !important;
    border-radius: 50px;
}

.button-disable:hover{
    color: #b9b9b9;
    background: #ffffff;
    border: none !important;
}

.button-one:active, .button-one:focus, .button-two:active, .button-two:focus, .button-three:active, .button-three:focus, .button-four:active, .button-four:focus , .button-five:active, .button-five:focus, .button-disable:active, .button-disable:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #eef;
    margin: 5px 0;
    border-radius: 5px;
    width: 100%;
}

/* .todo-text {
    flex: 8;
    font-size: 16px;
    color: #444;
    text-align: justify;
    margin: 2%;
} */

.todo-buttons {
    flex: 4;
    display: flex;
    gap: 5px; /* Memberi jarak antara tombol */
    justify-content: center;
}

.todo-text {
    display: flex;
    /* align-items: center; */
    margin: 2%;
}

.todo-number {
    width: 30px; /* Lebar tetap agar sejajar */
    text-align: center;
    font-weight: bold;
    background: #309be9;
    padding: 5px;
    border-radius: 5px;
    color: white;
    height: fit-content;
}

.todo-content {
    flex: 1;
    padding-left: 10px; /* Jarak antara nomor dan teks */
    word-wrap: break-word; /* Pastikan teks panjang tetap rapi */
    text-align: justify;
    padding: 5px 14px;
    max-width: 100%;
}

/* Agar responsif di layar kecil */
@media (max-width: 600px) {
    .todo-item {
        flex-direction: column;
        text-align: center;
    }

    .todo-buttons {
        flex-direction: row;
        justify-content: center;
        margin-top: 5px;
    }
}

.modal {
    display: none;
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 45vw;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-buttons {
    display: flex;
    justify-content: right;
    /* justify-content: space-between; */
}

input {
    width: 80%;
    padding: 8px;
    margin: 10px 0;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    background: #eef;
    margin: 5px 0;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.completed {
    text-decoration: line-through;
    color: gray;
}

button.edit {
    /* background: #f0ad4e; */
    background: #f0ad4e;
    color: white;
    font-weight: 600;
}

button.edit:hover{
    color: #fcac3d;
    background: #fbd8a8;
    border: solid 1px #f0ad4e;
}

button.complete {
    background: #1ea89e;
    color: white;
    font-weight: 600;
}

button.complete:hover{
    color: #1ea89e;
    background: #a5d0cd;
    border: solid 1px #1ea89e;
}

button.delete {
    background: #da4f42;
    color: white;
    font-weight: 600;
}

button.cancel {
    background: #da4f42;
    color: white;
    font-weight: 600;
    margin: 0px 7px;
}

button.delete:hover, button.cancel:hover{
    color: #da4f42;
    background: #eaaea9;
    border: solid 1px #da4f42;
}