/* General CSS */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Caveat:wght@400;700&display=swap');

:root {
    --blue: #77a7f9;
    --blue-hover: #5a95fa;
    --pink: #e59fc5;
    --pink-hover: #ed84bd;
}


.links a:hover {
    text-decoration: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

* {
    box-sizing: border-box;
    font-family: Arial, sans-serif; !important
}

/* General CSS End */


/* Registration Success */
body.registration-success { 
    font-family: Arial, sans-serif; 
    background-color: #f4f4f4; 
    text-align: center; 
    padding-top: 50px; 
} 

.registration-success .container { 
    background-color: white; 
    margin: auto; 
    width: 50%; 
    border: 3px solid #FA913B;
    padding: 10px; 
    border-radius: 8px;
} 

.registration-success h1 { 
    color: #FA913B;     
} 

.registration-success p { 
    font-size: 18px; 
} 

.registration-success a { 
    display: inline-block; 
    margin-top: 20px; 
    padding: 10px 15px; 
    background-color: #F3A462; 
    color: white; 
    text-decoration: none; 
    border-radius: 5px; 
} 

.registration-success a:hover { 
    background-color: #FA913B; 
} 

/* Login and Register CSS */
body.login-page, body.register-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.login, .register {
    background-color: #fff;
    padding: 10px 20px 20px 20px;
    border-radius: 8px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    width: 90%; /* Adjust the width for smaller screens */
    max-width: 400px; /* Limit the maximum width */
    margin: 20px; /* Add some margin for spacing */
}

.register .links a.active {
    border-bottom: 3px var(--pink) solid;
    color: var(--pink);
}

/*.login .links a.active {*/
/*    border-bottom: 3px var(--blue) solid;*/
/*    color: var(--blue);*/
/*}*/

.login .links a.active {
    color: red;
}

.login .error-message {
    text-align: center;
    color: red;
}

.login h1 {
    color: var(--blue);
}

.register h1 {
    color: var(--pink);
}

.login h1, .register h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 0.5px;
}

.login form, .register form {
    display: flex;
    flex-direction: column;
}

input, select {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 10px;
}

.login input:focus {
    border-color: var(--pink);
}

.register input:focus {
    border-color: var(--pink);
}

input[type="submit"] {
    background-color: var(--blue);
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login input[type="submit"]:hover {
    background-color: var(--blue-hover);
}

.login input[type="submit"] {
    background-color: var(--blue);
}

.register input[type="submit"] {
    background-color: var(--pink);
}

.register input[type="submit"]:hover {
    background-color: var(--pink-hover);
}

/* Link styles */
a {
    color: #337ab7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#forgotpassword {
    display: block;
    text-align: right;
    margin-bottom: 10px;
}


.links {
    text-align: center;
    margin-bottom: 20px;
}

.links a {
    margin: 0 10px;
}

label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

label i {
    margin-right: 10px; /* Adjust the spacing between the icon and the input field */
    color: #aaa;
}

.phone-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden; /* Makes the child elements adhere to the border radius */
    margin: 10px;
}

#prefix {
    padding: 10px;
    margin: 0;
    border: none; /* Removes the border inside the container */
    flex: none; /* Prevents the select box from growing */
    background-color: #f9f9f9; /* Different background to distinguish it from the input */
}

#mobile {
    padding: 10px;
    margin: 0;
    border: none; /* Removes the border inside the container */
    flex-grow: 1; /* Allows the input field to take up remaining space */
}

input[type="tel"], input[type="password"], .phone-input-container, input[type="text"], input[type="email"] {
    margin-bottom: 10px;
}

.login input {
    margin: 10px;
}

.forgotPw {
    font-size: 14px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .login, .register {
        width: 90%; /* Adjust the width for smaller screens */
        max-width: 100%; /* Allow the form to take up the full width */
    }
}
/* Login and Register CSS End */


/* Successful Page End */
.success-container {
    background-color: white;
    margin: auto;
    width: 40%;
    border: 3px solid #FA913B;
    padding: 50px;
    border-radius: 8px;
    text-align: center;
}

.success-container h1 {
    color: #FA913B;
}

.success-container a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #F3A462;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.success-container a:hover {
    background-color: #FA913B;
}
/* Successful Page End */


/* Logout Button Style */
.logout-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4BA3FE;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.logout {
    padding: 1% 8%;
}

.logout-button:hover {
    background-color: #3A98F9;
}


a.logout-button:hover {
    text-decoration:none;
}

/* Logout Button Style End */


/* Dashboard General Style */
.content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    max-width: 80%;
}

/* Dashboard title */
.page-title {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text color for dark mode */
    border-bottom: 1px solid #e6e6e6; /* Light gray border */
    border-color: #e6e6e6; /* Light gray border for dark mode */
}

h1.page-title{
    margin: 0;
    padding: 1% 8%;
    font-weight: 500;
    font-size: 19px;
}

/* Dashboard Style End */

span.error-message{
    font-size: 14px;
    color: red;
    margin-left: 20px;
}

/* Logo */
div.logo {
    background-color: #FE8B02 ;
    text-align: center;
    padding: 0;
    box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.2);
}

.logo img{
    width: 20%;
    height: 10vh;
    padding: 0;
}

@media (max-width: 480px) {
    .logo img{
    width: 20%;
    height: 5vh;
    padding: 0;
}
}
/* Logo Style End */

/* Thumbnails */
.thumbnails-item {
    flex: 1; /* Each item takes up equal space */
    text-align: center;
    margin: 40px 20px; /* Adjust margins as needed */
}

.thumbnails-item img{
    border-radius: 5%;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5);
    width: 100%; /* Ensure images don't overflow their containers */
}

.thumbnails-item h4 {
    color: #fff;
}

.thumbnails-container{
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    align-items: center;
    flex-wrap: nowrap;
    width:100%;
}

.dashboard {
    color: white;
}

.two-grid-banner {
  display: flex;
}

.two-grid-banner-item {
  flex: 1; /* Each item will take up an equal amount of space */
  max-width: 50%; /* Maximum width for each item */
  box-sizing: border-box; /* To ensure padding and borders are included in the width */
  padding: 10px; /* Adjust padding as needed */
  margin: 10px 5px;
}

.two-grid-banner-item img {
  width: 100%; /* This will make the image responsive */
  height: auto; /* This will maintain the aspect ratio of the image */
  display: block; /* This will remove any extra space beneath the image */
}

.banner {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center align items if they have different widths */
  margin: 10px 15px;
}

#small-banner {
  height: 500px; /* Set a specific height for the smaller banners */
  width: 100%; /* Maintain aspect ratio */
  margin-bottom: 20px; /* Provide some space between the banners */
}

#large-banner {
  height: 700px; /* Set a specific height for the smaller banners */
  width: 100%; /* Maintain aspect ratio */
  margin-bottom: 20px; /* Provide some space between the banners */
}

/* Tablet styles (adjust breakpoints as needed) */
@media (max-width: 768px) {
    .thumbnails-item {
        margin: 20px 0px -20px; /* Adjust margins for tablets */
    }

    .thumbnails-item img {
        max-width: 80%; /* Reduce thumbnail width for tablets */
    }

    .two-grid-banner-item {
        padding: 5px; /* Adjust padding for tablets */
    }
}

/* Mobile styles (adjust breakpoints as needed) */
@media (max-width: 480px) {
    .thumbnails-item {
        margin: 20px 0px -20px; /* Adjust margins for mobile */
    }

    .thumbnails-item h4 {
        font-size: 1em; /* Reduce font size for mobile */
    }

    .thumbnails-item img {
        max-width: 80%; /* Reduce thumbnail width for mobile */
    }

    .two-grid-banner-item {
        padding: 5px; /* Adjust padding for mobile */
    }
}

/* Verify Code Section */
.verify-section {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 20px;
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.verify-section h1{
    text-align: center;
}

.verify-section label {
  margin-bottom: 0!important;
}

.verify-section input[type="text"] {
    height: 20px;
}

.verify-section input[type="text"],
.verify-section input[type="submit"] {
  flex: 1; /* Each item occupies an equal portion of the available space */
  padding: 5px;
}

.verify-section .form-group {
  display: flex;
  align-items: center;
  justify-content: center; /* Center items horizontally */
  margin: 10px 0;
}

/* Verify Code Section End*/

/* Success Verify Section Style */
.success-verify-container {
    text-align: center;
    margin: 50px auto;
    max-width: 600px;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.success-verify-container h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}

.success-verify-container p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.success-verify-container .login-link {
    display: inline-block;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.success-verify-container .login-link:hover {
    background-color: #0056b3;
}
/* Success Verify Section End*/

/* Add Child Form */

.add-child-form {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f9f9f9;
    margin: 0;
}

.add-child-form .form-container {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.add-child-form h2 {
    color: #5a95fa; /* Use your blue color variable here if available */
    text-align: center;
    margin-bottom: 20px;
}

.add-child-form .form-group {
    margin-bottom: 15px;
}

.add-child-form .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.add-child-form .form-group input[type="text"],
.add-child-form .form-group input[type="date"],
.add-child-form .form-group input[type="file"],
.add-child-form .form-group select {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.add-child-form .form-group input[type="text"]:focus,
.add-child-form .form-group input[type="date"]:focus,
.add-child-form .form-group input[type="file"]:focus,
.add-child-form .form-group select:focus {
    border-color: #5a95fa; /* Add focus color (blue) */
    outline: none;
}

.add-child-form .form-group button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #5a95fa;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-child-form .form-group button:hover {
    background-color: #4b82f3;
}

.add-child-form .form-group input[type="file"] {
    padding: 5px;
}

.add-child-form .form-group select {
    color: #333;
    background-color: #fff;
}


/* Add Child Form Style End*/



/* View Child List Style */

body.view-child-list {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* Header */
.view-child-list .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    padding: 10px 20px;
    background-color: #5a95fa; /* Adjust to match your color */
    color: white;
    border-radius: 10px 10px 0 0;
}

.view-child-list .header h1 {
    font-size: 1.5rem;
}

.view-child-list .back-button {
    font-size: 1.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

/* Children List Container */
.view-child-list .children-list {
    width: 100%;
    max-width: 600px;
    padding: 20px;
}

/* Child Card */
.view-child-list .child-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 15px;
}

.view-child-list .child-info h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.view-child-list .child-info p {
    font-size: 15px
    color: #555;
}

.gender-icon {
    font-size: 1.3em;
    font-weight: bold;
}

span#female {
    color: var(--pink);
}

span#male {
    color: var(--blue);
}

.view-child-list .profile-pic img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Add Child Button */
.view-child-list .add-child-button {
    width: 100%;
    max-width: 600px;
    padding: 15px;
    background-color: #5a95fa;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.view-child-list .add-child-button:hover {
    background-color: #4b82f3;
}

.view-child-list a {
    text-decoration: none;
    color: black;
}


.view-child-list a:hover {
    text-decoration: none;
    color: none;
}


/* View Child List Style End */


/* Child Details Style */

/* Header */
.child-details .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #5a95fa;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
}

.child-details .header h2 {
    font-size: 1.2rem;
}

.child-details .back-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}

/* Profile Card */
.child-details .profile-card {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    position: relative;
}

.child-details .profile-image {
    position: relative;
}

.child-details .profile-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #ddd;
}

.child-details .edit-icon {
    position: absolute;
    bottom: 0;
    right: -10px;
    background-color: #5a95fa;
    color: white;
    border-radius: 50%;
    padding: 5px;
    font-size: 1rem;
}

.child-details .child-age {
    color: #5a95fa;
    font-size: 0.9rem;
}

.child-details .child-name {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 5px 0;
}

.child-details .child-dob {
    color: #555;
    font-size: 0.9rem;
}

.child-details .edit-profile-button {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    color: #5a95fa;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Section Styling */
.child-details .section {
    background-color: white;
    border-radius: 10px;
    margin-top: 20px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.child-details .section h4 {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 10px;
}

/* Vaccine Reminder Section */
.section .vaccine-reminder {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures the border-radius applies to children */
}

.vaccine-reminder h4 {
    background-color: #ffb200; /* Yellow background for header */
    color: #ffffff;
    padding: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
}

.vaccine-info {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-size: 0.9rem;
    color: #777;
    /*background-color: white;*/
}

.vaccine-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.vaccine-item .label {
    color: #b0b0b0;
    font-weight: normal;
}

.vaccine-item .value {
    color: #777;
    font-size: 1rem;
}


.child-details .vaccination-card h4 {
    background-color: #77a7fb;
    color: white;
    padding: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
}

.child-details .vaccine-doses p {
    font-size: 0.9rem;
    color: #5791e4;
}

.child-details .dose-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: black;
    padding: 5px 0;
    border-top: 1px solid #5791e4;
}

.child-details .dose-icon {
    font-size: 1.2rem;
    color: #5791e4;
}

.child-details .growth-chart h4{
    background-color: #02adad;
    color: white;
    padding: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
}

.child-details .growth-info {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: black;
}

.growth-info table {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.growth-info-details {
    font-size: 18px;
    font-weight: 900;
}

.growth-info-details td {
    padding-bottom: 20px;    
}

.child-details .illness h4{
    background-color: #e976a1;
    color: white;
    padding: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
}

.child-details .illness-info {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: black;
}

.child-details a {
    text-decoration: none;
    color: white;
}

.child-details a:hover {
    text-decoration: none;
    color: white;
}

/* Child details style end */

/* Add Growth Record Style */

body.add-growth-record {
    background-color: #f9f9f9;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.add-growth-record h2 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.add-growth-record .form-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
}

.add-growth-record .form-group {
    margin-bottom: 15px;
    position: relative;
}

.add-growth-record label {
    display: block;
    font-weight: bold;
    color: #777;
    margin-bottom: 5px;
}

.add-growth-record input[type="number"],
.add-growth-record select,
.add-growth-record textarea {
    width: 90%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.add-growth-record input[type="number"]::placeholder {
    color: #c0c0c0;
}

.add-growth-record .unit {
    position: absolute;
    right: 10px;
    top: 37px;
    font-size: 0.9rem;
    color: #777;
}

.add-growth-record button[type="submit"] {
    background-color: #5a95fa;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.add-growth-record button[type="submit"]:hover {
    background-color: #4a85e5;
}

/* Growth Records Table */
.add-growth-record h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #5a95fa;
}

.add-growth-record table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
    margin-top: 10px;
}

.add-growth-record th, .add-growth-record td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.add-growth-record th {
    color: #777;
    font-weight: bold;
    font-size: 0.9rem;
}

.add-growth-record td {
    font-size: 1rem;
    color: #333;
}

/* Specific colors for units */
.add-growth-record .weight-unit {
    color: #5a95fa;
}

.add-growth-record .height-unit {
    color: #eca8cd;
}

.add-growth-record .head-circumference-unit {
    color: #50b8a8;
}


/* Add growth record style end */

.child-growth-chart h4 {
    text-align: center;
}

.child-growth-chart .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.child-growth-chart .active a {
    text-decoration: none;
    color: white;
}

.child-growth-chart a:hover {
    text-decoration: none;
}

.child-growth-chart .tablink {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    background-color: #f1f1f1;
    border-radius: 5px;
}
.child-growth-chart .tablink.active {
    background-color: #5a95fa; /* Example active color */
    color: white;
}


.edit-profile-button a {
    color: blue;
}

.edit-profile-button a:hover {
    color: blue;
}

body.edit-profile {
    font-family: Arial, sans-serif;
    background-color: #f0f4f8;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.edit-profile .form-container {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}
.edit-profile h2 {
    text-align: center;
    color: #333;
}
.edit-profile .form-group {
    margin-bottom: 15px;
}
.edit-profile label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}
.edit-profile input[type="text"],
.edit-profile input[type="date"],
.edit-profile .edit-profile input[type="file"],
.edit-profile select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
.edit-profile input[type="text"]:focus,
.edit-profile input[type="date"]:focus,
.edit-profile input[type="file"]:focus,
.edit-profile select:focus {
    outline: none;
    border-color: #5a95fa; /* Matches --babygrow-blue */
    box-shadow: 0 0 5px rgba(90, 149, 250, 0.2);
}
.edit-profile button {
    background-color: #5a95fa;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 12px;
    border: none;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.edit-profile button:hover {
    background-color: #4882e4;
}
.edit-profile .profile-pic {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.edit-profile .profile-pic img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px 0;
}
button.delete {
    background-color: red;
}

button.delete:hover{
    background-color: red;
}

.delete a {
    color: white;
}
.delete a:hover {
    text-decoration: none;
    color: white;
    background-color: red;
}

body.delete-child { 
    font-family: Arial, sans-serif; 
    background-color: #f4f4f4; 
    text-align: center; 
    padding-top: 50px; 
} 
.delete-child .container { 
    background-color: white; 
    margin: auto; 
    width: 75%; 
    border: 3px solid #fa3b3b;
    padding: 10px; 
    border-radius: 8px;
} 

.delete-child h1 { 
    color: #fa3b3b; 
} 

.delete-child p { 
    font-size: 18px; 
} 

.delete-child button { 
    display: inline-block; 
    margin-top: 20px; 
    padding: 10px 15px; 
    background-color: #f36262; 
    color: white; 
    text-decoration: none; 
    border-radius: 5px; 
    width: 200px;
} 

.delete-child button:hover { 
    background-color: #fa3b3b; 
} 

.back button {
    background-color: var(--blue);
}

.back button:hover {
    background-color: var(--blue);
}