.loginRegisterHeader{
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
  }
  .welcomeHeader{
      color:#47823D;
  }
  .contactInfo{
      padding-right: 5px;
      color: #47823D;
  }
   .registerLine{
      margin-top:10px;
      border-bottom: 1px solid grey;
      margin-bottom:5px;
   }
.username-display{
    color:#47823D;
}

#userDropdown {
    position: absolute;
    width: 300px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More modern box shadow */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    top:10%; /* Adjust position as needed */
    right: 20px; /* Adjust position as needed */
    z-index: 99;
}

#userDropdown .myProfile {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.2em; /* Larger font size */
}

#userDropdown .userGreeting {
    color: green;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#userDropdown .userGreeting .userIcon {
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    background-color:#47823D;
    color: white;
    padding: 10px;
    margin-right: 10px;
}

.editable {
    border: none;
    border-bottom: 1px dashed #ccc;
    background: none;
    padding: 3px;
    width:110px;
    outline:none;
    border:none;
}
.emailInput{
    border: none;
    outline: none;
    width:150px;
}


.editBtn, .saveBtn, .cancelBtn {
    background-color: #4CAF50;
    color: white;
    padding:4px;
    border: none;
    cursor: pointer;

}

.editBtn:hover, .saveBtn:hover, .cancelBtn:hover {
    background-color: #45a049;
}

.hidden {
    display: none;
}

#userDropdown .logOutBtn{
    background-color:#47823D;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px; /* Rounded button */
    transition: background-color 0.3s ease; /* Smooth transition */
    width: 100%; /* Full width button */
}

#userDropdown .logOutBtn:hover {
    background-color: #3b3370; /* Darker shade on hover */
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.centerContainer{
    display: flex;
    justify-content: center;
    align-items: center;

}


.new-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    width: 383px;
    height: 500px;
    text-align: center;
    
}

.new-logo img {
    width: 80px;
    margin-bottom: 20px;
}

.new-register-form {
    margin-top: 20px;
    border: 0.73px solid #47823D;
    padding: 20px;
    border-radius: 10.6px;
}

.new-register-form h2 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: left;
}

.new-input-group {
    margin-bottom: 20px;
    text-align: left;
}

.new-input-group label {
    display: block;
    margin-bottom: 5px;
}

.new-input-group input {
    width: 100%;
    padding: 10px;
    border: 0.73px solid #565A5C;
    border-radius: 4px;
    outline: none;
}

.new-button {
    background: #47823d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.new-button:hover {
    background: #45a049;
}

.new-register-form p {
    margin: 20px 0;
    color: #565A5C;
    font-family: Inter;
    font-size: 14.52px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: left;
}

.new-register-form span {
    color: #47823d;
    font-family: Inter;
    font-size: 14.52px;
    font-weight: 600;
    line-height: 19.6px;
}

.iti {
    display: block !important;
    top: 5px;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
}

.iti input, .iti input[type=text], .iti input[type=tel] {
    margin-top: 5px !important;
}

.new-needHelp {
    text-align: left;
}

.new-help {
    color: #47823d;
    text-decoration: none;
}

.new-help span {
    color: #565A5C;
}

.new-help:hover {
    text-decoration: underline;
}

.new-hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.new-footerlogin {
    margin-top: 20px;
    text-align: left;
}

.haveAnAccount {
    text-align: left;
    padding: 10px;
    margin-top: 10px;
}

.new-footerlogin a {
    color: #000000;
    text-decoration: none;
    margin: 0 10px;
}

.new-footerlogin a:hover {
    text-decoration: underline;
}

@media (max-width:768px) {
    .new-container {
        padding: 10px;
    }

    .new-logo img {
        width: 100px;
    }

    .new-register-form h2 {
        font-size: 20px;
    }

    .new-button {
        padding: 10px;
    }
}

h5 {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-top: 15px;
}

h5:before,
h5:after {
    content: '';
    height: 1px;
    background-color: #D9D9D9;
}



.new-signin-form h2 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: left;
}

.new-input-group {
    margin-bottom: 20px;
    text-align: left;
}

.new-input-group label {
    display: block;
    margin-bottom: 5px;
}

.new-input-group input {
    width: 100%;
    padding: 10px;
    border: 0.73px solid #565A5C;
    border-radius: 4px;
    outline: none;
}

.new-button {
    background: #47823d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.new-button:hover {
    background: #45a049;
}

.new-signin-form p {
    margin: 20px 0;
    color: #565A5C;
    font-family: Inter;
    font-size: 14.52px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: left;
}

.new-signin-form span {
    color: #47823d;
    font-family: Inter;
    font-size: 14.52px;
    font-weight: 600;
    line-height: 19.6px;
}

.new-signin-form form {
    border: 0.73px solid #EAEAEB;
    padding: 20px;
    border-radius: 10.16px;
}

.new-needHelp {
    text-align: left;
}

.new-help {
    color: #47823d;
    text-decoration: none;
}

.new-help span {
    color: #565A5C;
}

.new-help:hover {
    text-decoration: underline;
}

.new-hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.new-h4 {
    color: #565A5C;
}

.new-h4 span {
    padding-top: 0;
    text-align: center;
    background: white;
}

.new-h4+* {
    border-top: 0.73px solid #565A5C;
    padding-top: 20px;
    margin-top: -10px;
}

.new-footerlogin {
    margin-top: 20px;
}

.new-footerlogin a {
    color: #000000;
    text-decoration: none;
    margin: 0 10px;
}

.new-footerlogin a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    body {
        margin-top: 0px;
    }

    .new-container {
        padding: 20px;
        height: 480px;
        margin-top: 0px;
    }

    .new-logo img {
        width:80px;
    }

    .new-signin-form h2 {
        font-size: 20px;
    }

    .new-button {
        padding: 10px;
    }
}