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

body {
   font-family: "Poppins", sans-serif;
   background-color: #e7e7e7;
   color: #24265d;
}

.container {
   margin-top: 70px;
   padding: 10px;
   background-color: #ffffff;
}
input,
select,
textarea {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   font-size: 14px;
   color: #24265d;
   background-color: #fff;
   transition: all 0.2s ease;
   font-family: "Poppins", sans-serif;
}

input:focus,
select:focus,
textarea:focus {
   outline: none;
   border-color: #a7b3c7;
   box-shadow: 0 0 0 1px rgba(36, 38, 93, 0.1);
}
button,
.btn {
   cursor: pointer;
   font-family: "Poppins", sans-serif;
   border-radius: 5px;
   transition: all 0.3s ease;
}
.hidden {
   display: none;
}

.page-title {
   color: #24265d;
   font-size: 30px;
}
.status-success {
   background-color: #dcfce7;
   color: #166534;
   border: 1px solid #bbf7d0;
}

.status-error {
   background-color: #fee2e2;
   color: #b91c1c;
   border: 1px solid #fecaca;
}
.form-group {
   margin-bottom: 20px;
   width: 100%;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   color: #475569;
   font-weight: 500;
}
.flex {
   display: flex;
}

.flex-column {
   display: flex;
   flex-direction: column;
}

.justify-center {
   justify-content: center;
}

.align-center {
   align-items: center;
}

.gap-10 {
   gap: 10px;
}

.gap-20 {
   gap: 20px;
}