.tm-bg-primary-dark {
    margin-right: 40px;
}

/* Keep profile page content stretched so footer stays at viewport bottom. */
#profilePage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#profilePage > .content,
#profilePage #home {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#profilePage #profileInfo {
    flex: 1;
}

#profilePage .tm-footer {
    margin-top: auto !important;
}

.tm-bg-primary-dark {
    margin-right: 40px;
}

/* Increase the clickable area */
.custom-control {
    display: flex;
    align-items: center;
}

.custom-control-label {
    cursor: pointer;
    margin-bottom: 0;
}

/* Adjust the switch appearance */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745; /* Change this color to match the green color in the image */
    border-color: #28a745; /* Change this color to match the green color in the image */
}

.custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(1.5rem); /* Adjust this value to position the switch correctly */
}

.custom-control-label::before {
    height: 1.5rem; /* Adjust the height to match the switch size in the image */
    width: 3rem; /* Adjust the width to match the switch size in the image */
    border-radius: 1.5rem; /* Adjust the border-radius to make it a perfect circle */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-control-label::after {
    top: 0.25rem; /* Adjust the top position to center the switch */
    width: 1.5rem; /* Adjust the width to match the switch size in the image */
    height: 1.5rem; /* Adjust the height to match the switch size in the image */
    border-radius: 50%; /* Make the switch a perfect circle */
    transition: transform 0.15s ease-in-out;
}

.custom-control-label::after {
    position: inherit;
}

.custom-control {
    padding-left: 0;
}

.form-group {
    margin-bottom: 15px;
    margin-right: 10px;
    justify-content: space-between;
}

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

.custommodal {
    width: 800px;
    max-width: 800px; 
    margin: 30px auto; 
}

/* Custom modal width */
.custom-modal-width {
    max-width: 550px; /* Adjust the width as needed */
}

/* Custom modal header */
.custom-modal-header {
    padding: 1.5rem 1rem; /* Increase the padding to make the title bar larger */
    background-color: #444;    /* Optional: Change the background color */
    color: #fff; /* Optional: Change the text color */
}

.custom-switch-container {
    padding-bottom: 15px;
}

.w-full {
    background-color: #00BCD4;
    height: 100%;
}

.foruminfo {
    padding-right: 20px;
    padding-left: 20px;
}

.detailsbox{
    border-radius: 0.5rem;
    padding: 1.5rem !important;
    width: 33%;
    max-height: 650px;
    min-width: 550px;
}

.PublicSwitches{
    width: 100%;
    display: flex;
}

.profileLink {
    display: block; /* Ensure the links are displayed as block elements */
    margin-bottom: 10px; /* Add margin to create space between the buttons */
    padding: 10px; /* Add padding for better spacing */
    padding: 1.5rem !important;
}

.p-6 {
    padding: 1.5rem;
}


.rounded-2xl {
    border-radius: 1rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.w-full {
    width: 100%;
}

.border-b {
    color: #343a40;
    font-weight: bold;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(11 151 17);
}

.emailField {
    width: 500px;
}

.phoneField {
    width: 228px;
}

.userInfo {
    min-height: 260px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.font-semibold {
    font-weight: 600;
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-600{
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.font-medium {
    font-weight: 500;
}

.form-group label {
    color: white;
    margin-bottom: 10px;
  }

.authenticator-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.authenticator-action-group {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.authenticator-action-group-right {
    justify-content: flex-end;
}

.authenticator-action-btn {
    margin: 0 !important;
    flex: 1;
    white-space: normal;
    word-break: break-word;
    font-size: 0.82rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    line-height: 1.2;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.gap-4 {
    gap: 1rem;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid {
    display: grid;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem* calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem* var(--tw-space-y-reverse));
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.goaldetails{
    background-color: #00BCD4;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: white;
    margin-bottom: 10px;
}

.pmenthistory {
    background-color: gray;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: black;
    margin-bottom: 30px;    
}

.forumdetails{
    color: white;
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: #3F51B5;
}

.goaldetails{
    color: white;
}

.userinfo{
    color: white;
}

.usersname{
    max-width: 270px;
}

.subdetails{
    margin-left: 10px;
}

.paymentMethod {
    justify-content: center;
}

/* Make the second modal appear above the first */
#refreshChartModal {
    z-index: 1061; /* Default Bootstrap modal is 1050–1060 */
}

.row.plandetails {
    display: flex;
    justify-content: space-between;
    margin-left: 1px;
    margin-right: 1px;
}


.payment-info {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Adjust spacing between label and value as needed */
}

/* Ensure the second modal's backdrop is behind it but still above the first */
#refreshChartModal + .modal-backdrop {
    z-index: 1060;
}

.address{
    max-width: 270px;
}

.modal-body {
    background-color: #333;
    color: #fff;
}

.modal-header {
    background-color: #444;
    color: #fff;
}
.addressrow{
    display: flex;
    justify-content: space-between;
    margin-left: 1px;
}
.settings {
    flex-grow: 1; /* Allows settings to take up the remaining space */
    min-width: 0; /* Prevents unwanted overflow */
    padding-bottom: 20px;
}

.editButtons {
    gap: 10px; /* Spacing between buttons */
    flex-shrink: 0; /* Prevents buttons from shrinking */
    width: 195px; /* Ensures buttons take up a fixed width */
    align-content: center;
}

.editbutton{
    width: 195px;
    display: inline-block;
    text-align: center;
    white-space: normal;
    height: auto;
    min-height: 35px;
    line-height: 1.2;
    padding-top: 8px;
    padding-bottom: 8px;
    word-break: break-word;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

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

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

.form-group.col-md-3 {
    width: 23%;
}

#billingAddressFields {
    margin-top: 20px;
}

.userEmail{
    display: flex;
    justify-content: space-between; 
    margin-left: 1px;
}

.justify-between{
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
    border-bottom: inset;
}

.accountSettings {
    display: flex;
    justify-content: center;
    align-items: center; /* Aligns items vertically */
    width: 100%; /* Ensures it takes full container width */
}

ul.space-y-2.text-gray-700 {
    padding-left: 10px;
}

.profilePublicSwitches{
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
    padding-left: 30px;
}

.row {
    justify-content: center;
}

@media (max-width: 800px) {
    .detailsbox {
        min-width: 400px;
      }
    
      .editbutton {
        width: 170px;
      }
    
      .editButtons {
        width: 150px;
      }
    
      .accountSettings {
        padding-right: 20px;
      }
    
      .p-6 {
        padding-top: 10px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 10px;
      }
    
      .userInfo {
        padding-left: 10px;
      }
    
      .forumdetails {
        padding-left: 10px;
      }
    
      .pmenthistory {
        margin-right: 10px;
        margin-left: 10px;
      }
      h3.mt-6.text-lg.font-medium.text-gray-800 {
        margin-left: 10px;
     }
    .custommodal {
        width: 550px;
        max-width: 750px; 
        margin: 30px auto; 
    }

    .address-row {
        flex-wrap: wrap;
    }

    .row {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px; 
        justify-content: center;
    }
    .row.address-row {
        justify-content: left;
    }
    .emailField {
        max-width: 500px;
        }
    }


@media (max-width: 550px) {
.detailsbox {
    min-width: 400px;
  }

    .authenticator-action-group {
        flex-basis: 100%;
    }

    .authenticator-action-group-right {
        justify-content: flex-start;
    }

  .editbutton {
    width: 170px;
  }

  .editButtons {
    width: 150px;
  }

  .accountSettings {
    padding-right: 20px;
  }

  .p-6 {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
  }

  .userInfo {
    padding-left: 10px;
  }

  .forumdetails {
    padding-left: 10px;
  }

  .pmenthistory {
    margin-right: 10px;
    margin-left: 10px;
  }
  h3.mt-6.text-lg.font-medium.text-gray-800 {
    margin-left: 10px;
 }
    .custommodal {
    width: 400px;
    max-width: 550px; 
    margin: 30px auto; 
    }

    .address-row {
        flex-wrap: wrap;
    }

    .row {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px; 
        justify-content: center;
    }
    .row.address-row {
        justify-content: left;
    }
    .emailField {
        width: 370px;
    }
}