 body {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    color: #666;
    font-size: 1rem;
}

.form-flex {
  display: flex;
}

/* New CSS for responsive layout change */

@media only screen and (max-width: 790px) {
    .form-flex {
        flex-direction: column; /* Change flex-direction to column for smaller screens */
    }
}


/* New CSS for responsive width change */

@media only screen and (max-width: 790px) {
    .submit-button  {
        width: 100% !important; /* Make the submit button full width on smaller screens */
        max-width: none !important; /* Override the max-width property */
    }
}
  
/* Hide the default dropdown arrow */
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-repeat: no-repeat;
        background-position-x: calc(100% - 15px);
        background-position-y: center;
        /* Style other properties as needed */
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* Style the custom dropdown container */
    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%; /* Adjust width as needed */
    }

    /* Style the options */
    select option:hover {
        background-color: #FF6600;
        color: #fff; /* Change text color to white for better visibility */
    }

/* Unsubscribe section styling */
  
@media (max-width: 1199.98px)
/*.container {
    width: 100%;
    max-width: 100%;
}
  
.container {
    padding-left: 16px;
    padding-right: 16px;
}*/

.t-section {
    margin-bottom: 1.5rem;
}
  
.m-content-text .-head {
    margin-bottom: 1.5rem;
}

@media (min-width: 576px)
.headline.-size-large.-bold {
    font-size: 1.75rem;
}
  
.headline.-size-large.-bold {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.75rem;
}

.m-content-text .-head .headline {
    color: #f60;
    text-transform: uppercase;
}
  
.m-content-text {
    width: 70%; /* Adjust width as needed */
    margin: 0 auto; /* Center the section horizontally */
    text-align: center; /* Center the text inside the section */
}
  
.headline.-size-large.-light {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 1.2;
    font-size: 1.75rem;
}
  
@media (min-width: 576px)
.headline.-size-large.-light {
    font-size: 1.75rem;
}
  
.m-content-text .-copytext {
    font-size: 1.125rem;
}
  
  
/* Form styling */
.form {
    font-family: 'Helveticaneuelt', Tahoma, Arial, Helvetica, Verdana, sans-serif;
    font-size: 18px;
    width: 60%; /* Adjust width as needed */
    margin: 0 auto; /* Center the form horizontally */
}

/* New styles for the form */
.form-group {
        margin-bottom: 20px;
    }

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

.form-control {
        background-color: #fff;
        border: 1px solid #cbcbcb;
        display: block;
        font-family: inherit;
        font-size: 1rem;
        line-height: normal;
        margin: 0;
        min-height: 2.5rem;
        min-width: 100%;
        padding: 0.75rem;
}
  
/* Style the selected option */
.form-control option:hover {
    background-color: #FF6600; /* Orange background color */
    color: #fff; /* Text color */
}

.preferences-section {
    margin-bottom: 30px;
   width: 100%;
}

.section-title {
    color: #FF6600;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

.checkbox-group {
    margin-bottom: 10px;
}
  
#pi_extra_field {
    width: 100%; /* Adjust width as needed */
}

.checkbox-group input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.checkbox-group label {
    display: inline-block;
    vertical-align: middle;
}

.submit-button input[type="submit"] {
    padding: 10px 20px;
    background-color: #FF6600;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.submit-button {
   max-width: 30%;
   margin: 0 auto;
}
  
.submitUnsub {
  background-color: #ff6600 !important;
  }
  
.checkbox-group input[type="checkbox"] {
    /* Hide the default checkbox */
    position: absolute;
    opacity: 0;
}

.checkbox-group label {
    /* Set the position and display for the label */
    position: relative;
    display: inline-block;
}

.checkbox-group label:before {
    /* Define the size and positioning of the checkbox */
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #707070; /* Default border color */
    border-radius: 3px;
    margin-right: 5px;
}

.checkbox-group input[type="checkbox"]:checked + label:before {
    /* Style the custom checkbox when it's checked */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f60"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center;
    background-size: contain;
    border-color: #f60; /* Border color for the checkbox */
}


/* Responsive styling */
@media only screen and (max-width: 790px) {
    .form {
        width: 90%; /* Adjust width for smaller screens */
    }

    .form-control {
        width: calc(100% - 22px);
    }

    .checkbox-group label {
        font-size: 18px;
    }

    .submit-button input[type="submit"] {
        width: 100%;
        margin-right: 0;
    }
}

.unsubscribe-button {
    padding: 10px 20px;
    background-color: #FF6600;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 0px; /* Adjust margin as needed */
}

.email-input {
    width: 100%; /* Adjust width as needed */
}
  
  .form-container {
    width: 60%; /* Adjust width as needed */
    margin: 0 auto; /* Center the container horizontally */
}