body {
    background-color: #FFF1E0;
}

form {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
}

h1 {
    text-align: center;
    margin-bottom: 50px;
}

.account-page-status {
    text-align: center;
    margin-top: 15px;
}

label {
    display: block;
    font-size: 20px;
}

fieldset {
    margin-bottom: 1em;
}
fieldset div {
    text-align: left;
}

fieldset input, fieldset label {
    display: inline;
    width: auto;
    font-size: 0.9em;
}



input, select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;

}

.one-line-container label, .one-line-container input, .one-line-container select {
    display: inline-block;
    width: auto;
}

.one-line-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Adjust as needed for spacing */
}

.one-line-container label {
    flex: 0 0 auto; /* Label maintains its own width */
}

.one-line-container select {
    flex: 0 0 auto; /* Select maintains its own width */
}

.one-line-container input {
    flex: 1 1 auto; /* Input takes the remaining space */
    min-width: 0; /* Allows the input to shrink properly within the container */
}

.subscription-term {
    display: flex;
    align-items: center;  /* Vertically align the items */
    gap: 10px;  /* Adds space between the checkbox and label */
    border-bottom: 4px solid transparent;
}

.subscription-term.highlight {
    border-bottom-color: #9E2F50;
}

.subscription-term input, .subscription-term label {
    display: inline;
    width: auto;
    font-size: 0.9em;
    line-height: 32px;
}

.subscription-term input {
    margin: 0;
    padding: 0;
}


input:focus {
    border: 2px solid #555;
}

button, a.subscription-button {
    display: block;
    width: 100%;
    background-color: #0d7680;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
}

button:hover, a.subscription-button:hover  {
    background-color: #45a049;
}

/* Disabled button styles */
button:disabled, a.subscription-button:disabled {
    background-color: #cccccc; /* Change the background color */
    color: #666666; /* Change the text color */
    cursor: not-allowed; /* Change the cursor to indicate the button is not clickable */
    opacity: 0.6; /* Slightly reduce opacity for a "disabled" effect */
}

/* Optional: Remove the hover effect for disabled buttons */
button:disabled:hover, a.subscription-button:disabled:hover {
    background-color: #cccccc; /* Keep the same background color as when not hovered */
}



a {
    color: #0d7680;
    cursor: pointer;
}
form button {
    display: block;
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    color: white;
    background-color: #0d7680;
    border: 1px solid #0d7680;
    display: block;
    margin: 15px auto;
    padding: 15px 0;
    max-width: 600px;
    font-weight: bold;
    text-decoration: none;
}
form button:hover, form button:active  {
    background-color: transparent;
    color: black;
    border-color:#0d7680;
}
a.action-button {
    display: block;
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    color: #0d7680;
    border: 1px solid #0d7680;
    display: block;
    margin: 15px auto;
    padding: 15px 0;
    width: 50%;
    max-width: 600px;
    font-weight: bold;
    text-decoration: none;
}
a.action-button.highlight {
    color: white;
    background-color: #0d7680;
}
a.action-button.dangerous {
    color: #CC0000;
    background-color: #fff7ef;
    border-color: #CC0000;
}
a:hover {
    color: #555;
}
.terms {
    font-size: 0.9em;
    color: #555555;
}
.error {
    color: #990000;
}

.logged-in-message {
    display: none;
}
.logged-in-message div {
    text-align: center;
}
.logged-in .sign-in-form, .logged-in .logged-out-message {
    display: none;
}
.logged-in .logged-in-message, .logged-in .sign-in-form.show_form, .logged-in .logged-out-message.show_form {
    display: block;
}


.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Aligns items with space between them */
    margin-bottom: 15px;
}

.switch-title {
    margin-right: 10px; /* Adjust as needed */
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #0d7680;
}

input:focus + .slider {
box-shadow: 0 0 1px #0d7680;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.password-rules > *, .password-rules-title, .logged-in-message .password-rules > *, .logged-in-message .password-rules-title {
    text-align: left;
    margin-bottom: 10px;
}

.password-rules div {
    position: relative;
    padding-left: 32px;
    line-height: 24px;
}

/* Change the list item to a tick with a different color when the rule is fulfilled */
.password-rules div.fullfilled {
    color: #78bd6b; /* Change font color */
}

/* Use a pseudo-element to display the tick icon */
.password-rules div::before {
    content: "\2022";
    text-align: center;
    position: absolute;
    left: 0;
    width: 32px;
    line-height: 24px;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20px;
}

.password-rules .fullfilled::before {
    content: ""; /* Unicode for checkmark */
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13'%3E%3Cstyle%3E*%7Bfill:%2378bd6b !important%7D%3C/style%3E%3Cpath d='M5.273 10.08L2.1 7.7l-.8-.6L.1 8.7l.8.6 3.226 2.42-.02.026.807.564.787.59.02-.026.026.02.564-.807.59-.787-.026-.02 6.445-9.207.572-.82-1.64-1.146-.572.82-6.407 9.153z' fill-rule='evenodd'/%3E%3C/svg%3E");

}


.section-block {
    padding: 28px 32px;
    margin-bottom: 16px;
    border-radius: 2px;
    border: 1px solid #e6d9ce;
    background-color: #fff7ef;
    font-family: MetricWeb, sans-serif;
    font-size: 16px;
    line-height: 20px;
    margin: 0 auto 30px auto;
    max-width: 600px;
    position: relative;
}

.section-block h2 {
    margin-bottom: 1em;
}

.section-block div {
    line-height: 1.618em;
}

.section-block__list-container {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc1b7;
}

.section-block__list-container:last-of-type {
    border-bottom-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.section-block__list-container form {
    width: 100%;
}

.logged-in-message div.section-block__label, .logged-in-message label {
    text-align: left;
    font-weight: bold;
    font-size: 1em;
}

.logged-in-message div.section-block__value {
    text-align: left;
    color: #4d4845;
}

.section-block__list-edit, .section-block__list-container.edit .section-block__list-read {
    display: none;
}

.section-block__list-container.edit .section-block__list-edit {
    display: block;
}

.edit-section-link-container {
    position: absolute;
    right: 0;
    top: 0;
}

.section-block >.edit-section-link-container {
    right: 30px;
    top: 30px;
}

.logged-in-message .section-block div, .logged-in-message .section-block h2 {
    text-align: left;
}

input[type="checkbox"] {
    width: auto;
}

.edit-section-link {
    border-bottom: 0;
    position: relative;
    padding-right: 0;
    align-content: center;
    font-family: MetricWeb, sans-serif;
    font-size: 18px;
    line-height: 20px;
    text-decoration-color: #0d7680;
    margin-left: 28px;
}

.edit-section-link:after {
    content: "";
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    background-color: transparent;
    vertical-align: baseline;
    width: 26px;
    height: 26px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><style>*{fill:%230A5E66!important;}</style><path class="st0" d="M12 25l3 3 15-15-3-3-15 15zM11 26l3 3-4 1z"/></svg>');
    top: 59%;
    left: 0;
    transform: translateY(-50%) translateX(-100%);
}

.edit-section-link.unbind-wechat:after, .edit-section-link.unbind-mobile:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="20px" fill="%230A5E66"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>');
}


.edit-section-link.add-name:after, .edit-section-link.add-wechat:after, .edit-section-link.add-email:after, .edit-section-link.add-password:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%230A5E66"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>');
}


.header-container {
    border-bottom: 1px solid #cec6b9;
    margin-bottom: 30px;
}


@media only screen and (max-width: 600px) {
    form {
        width: 100%;
    }
}