/* CSS FILE common for Order portal only. If you want both Order and Admin portals, use global.css */
@import 'variables.css';

*,*:focus,*:hover{
    outline:none;
}

html, body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;    
}

body .container {
    width: 100%;
    padding: 0;
    margin-left: 0;
}

body .body-container .row {
    margin: 0 -15px;
}

body #site-container {
    font-family: "Open Sans Regular", sans-serif;
    color: var(--ppp-dark-grey);
}

body #site-container label {
    color: var(--ppp-black);
    font-family: "Open Sans SemiBold", sans-serif;
    font-weight: normal;
}

body #site-container label.section-header {
    font-family: "Open Sans Bold", sans-serif;
    font-weight: normal;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--ppp-black);
    font-family: "Open Sans Bold", sans-serif;
    font-weight: normal; /* prevent adding a bold status to an already bolded item */
}

/* Links */
a:not(.btn) {
  color: #ed1c24;
}

body a:hover {
    cursor: pointer;
}

body #page-content {
    border: none;
    padding-bottom: 75px;
}

@media (min-width: 768px) {
    body #page-content {
        width: calc(100% - 31rem);
    }
}

.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    font-size: 1.6rem;
    line-height: 1.42857143;
}

@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}

.text-default--16black {
    font-family: Open Sans Regular;
    font-size: 16px;
    color: black;
}

body .page-header {
    display: table;
    padding: 1.5rem 1.5rem 0.5rem 0;
    color: var(--ppp-red);
    table-layout: fixed;
    width: 100%;
    margin-top: 0;
    margin-bottom: 2rem;
    border-bottom: 0.2rem solid #ed1c24;
    font-weight: normal;
/*    border-bottom: none;*/
}

.page-header--black {
    font-family: "Open Sans Bold", sans-serif;
    font-weight: normal;
    color: black;
    font-size: 30px;
}

.page-header--centerd {
    display: block;   
    text-align: center;
}

.warning-text {
    color: var(--ppp-red);
    font-weight: bold;
}

.page-header--no-border {
    border-bottom: none !important;
}

.page-header-tabbed {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #ed1c24;
    padding: 1.5rem 0 0.5rem;
    margin-bottom: 2rem;
    color: #000;
    flex-wrap: wrap;
}

.page-header-tabbed .page-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-header-tabbed .page-header-title {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 24px;
    color: var(--ppp-red);
    font-weight: normal;
}

.page-header-tabbed .tabs-left {
    display: flex;
    gap: 2rem;
}

.page-header-tabbed .tab {
    color: var(--ppp-black);
    font-family: "Open Sans Regular", sans-serif;
    font-size: 1.6rem;
    cursor: pointer;
    padding-bottom: 0.3rem;
}

.page-header-tabbed .tab.active {
    color: var(--ppp-black);
    font-family: "Open Sans SemiBold", sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
}

.page-header-tabbed .tabs-right {
    text-align: right;
}

.page-header-tabbed .tabs-left .tab,
.page-header-tabbed .tabs-left .tab:hover,
.page-header-tabbed .tabs-left .tab:focus,
.page-header-tabbed .tabs-left .tab:visited {
    text-decoration: none;
}

.profit-ytd {
    font-family: "Open Sans SemiBold", sans-serif;
    font-weight: normal;
    text-align: center;
    margin-right: 72px;
}

.profit-ytd-label {
    font-size: 2rem;
    color: var(--ppp-black);
}

.profit-ytd-value {
    color: #1f9d55;
    font-size: 2.4rem;
    font-weight: bold;
}

.header-container .announcement-msg {
    background-color: #ed1c24;
    font-size: 2rem;
    line-height: 20px;
    padding:15px;
    border-bottom: 1px solid white;
}

/*
    Overwrite Active Orders table content's font size styling from the old design
*/
body .activeOrdersWrapper table.dataTable > * {
    font-size: inherit;
}

/*
    Hide the Search Filter from the Active Orders datatable
*/
body .activeOrdersWrapper #activeOrders_filter {
    display: none;
}

body .active-orders .search-input-wrapper{
    margin: 0;
}

body .active-orders .ui-widget-header {
    border: none;
}


body #site-footer {
    font-size: inherit;
    color: white;
    background-color: black;
}


body #site-footer ul li {
    border: none;
    align-self: center;
    min-width: 30rem;
    max-width:45rem;
}

body #site-footer ul {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width:767px) {
    body #site-footer ul {
        flex-direction: column;
    }
    
    body #site-footer ul li:first-child {
        margin-bottom:1rem;
    }
}

body #site-footer a {
    color:white;
    cursor: pointer;
}


body #site-footer a {
    color:white;
    cursor: pointer;
    text-decoration: none;
}

body #site-footer a .site-footer__links__call-container__call {
    width:3.2rem;
    height:3.2rem;
}

body #site-footer a .site-footer__links__email-container__email {
    width:4rem;
    height:4rem;
}

body #site-footer a .site-footer__links__chat-container__chat {
    width:2.75rem;
    height:2.75rem;
    margin-right: 0.75rem;
}

body #site-footer .site-footer__links__call-container {
    margin-right: 2rem;
}

body #site-footer .site-footer__links__email-container {
    margin-right: 3rem;
}

body #site-footer .site-footer__links__chat-container {
    margin-right: 1rem;
}

body h3 {
    line-height: 3.7rem;
    font-size: 2.4rem;
}


body .content-hier {
    color: inherit;
    padding-right: 30px;
    background-color: #e9e8e8;
    font-size: inherit;
    border-color:#e9e8e8;
}


.multiple-files-upload-container .form-group {
    margin: 15px 0px 15px 0px;
}

body .modal .modal-content {
    border-radius: 0.5rem;
    height: 100%;
    display: inline-block;
    padding-bottom: 1rem;
    width: 100%;
}

body .modal .modal-header {
    background: var(--ppp-red);
    border: 0.1rem solid var(--ppp-red);
    background-color:var(--ppp-red);
    color: white;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding-left: 3rem;
    padding-right: 3rem;
    border-radius: 0.5rem 0.5rem 0 0;
}


body .modal .modal-header h3,
body .modal .modal-title {
    color: white;
    font-family: 'Open Sans Regular';
    font-size: 2rem;
    font-weight: normal
}

body .modal .modal-header .close {
    font-family: 'Open Sans Regular';
    font-size: 3rem;
    color:white;
    text-shadow:none;
    opacity: 1;
}

body .modal .modal-footer {
    border: none;
    background-color: white;
    padding:0;
      margin-left: 4rem;
    margin-right: 4rem;
    margin-bottom: 3rem;
} 

body .modal-footer--delete-notifications{
    display: flex; 
    justify-content: space-between;
    align-items: center;
    margin: 0px 20px 10px 20px;
}

body .modal .modal-body{
    padding: 0;    
    margin: 2rem 4rem;
}

body .row {
    margin: 15px 0px 15px 0px;
}

.hoa-list-label {
    margin-top: 2rem;
}

.dual-listbox {
    display: flex;
}

.dual-listbox .arrow-wrapper {
    display: flex;
    align-items: center;
    margin: 0 1rem;
}

.dual-listbox .dropdown-wrapper {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 30%;
    max-height: 22rem;
}

.dual-listbox .dropdown-wrapper > select[multiple], .form-wrapper div > select[size] {
    height: 100%;
}

body .homeowners_source_options { 
    display: flex;
}

body .homeowners_source_options div + div {
    margin-left: 3rem;
}

#ballot_preview,
#api_return_address{
    padding-left:15px
}

.hoa-name-id-wrapper,
.two-inputs-wrapper
{ 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
}

.hoa-name-id-wrapper{
    margin-top: 1rem;
}

.fileupload-seed-record-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
    margin-top: 1rem;
}

.fileupload-seed-record-wrapper .fileuploader-wrapper {
    grid-column-start: 1; 
    grid-column-end: 3;
}

@media only screen and (max-width : 992px) { 
    .hoa-name-id-wrapper,
    .fileupload-seed-record-wrapper{ 
        grid-template-columns: 1fr;
        grid-gap: 1em;
    }
}

.new-community-name-wrapper {
    display: none;
}

body .order-form > :first-child {
    margin-bottom: 30px;
}

body .order-form,
body .order-form .form-actions{
    max-width: 85rem;
    padding-left:0;
    padding-right:0;
}

body .thumbnail.insert{
    border-radius:0;
    border: 0;
    box-shadow: none;
}

body .artwork-wrapper .thumbnail.insert {
    margin-top: 0;
}

body .thumbnail.insert .insert-title{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

body .thumbnail.insert .close {
    font-size: 3rem;
    color: var(--ppp-black);
    opacity: 1;
}

body .thumbnail.insert .radios-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

body .thumbnail.insert .radios-container .ink-color,
body .thumbnail.insert .radios-container .ink-color {
    margin-bottom: 3rem;
}

body .artwork-wrapper .thumbnail.insert .radios-container {
    display: block;
}

body .thumbnail.insert .paper-color-options {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 1rem;
    
}

body .artwork-wrapper .thumbnail.insert .paper-color-options {
    grid-template-columns: auto auto;
}

body .artwork-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

body .artwork-wrapper .preview-wrapper .preview {
    width: 18vw;
    height: 16vw;
    background-color: lightgray;
    padding: 4rem;
    min-width: 24rem;
    min-height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview {
    width: 100%;
    height: 80%;
    background-color: white;
    box-shadow: 10px 10px 10px grey;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.postcard-size-jumbo {
    width: 80%;
    height: 100%;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview .standard-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    font-size: 4rem;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview .standard-type > div {
    width: 100%;
    height: 100%;
    border-right: 1px solid var(--ppp-medium-grey);
    border-top: 1px solid var(--ppp-medium-grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview .large-type {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    font-size: 4rem;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview .large-type > div {
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--ppp-medium-grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.goldenrod {
    background-color: rgb(255,181,1);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.canary {
    background-color: rgb(255,241,126);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.blue {
    background-color: rgb(126,189,235);
}
body .artwork-wrapper .preview-wrapper .preview .paper-preview.green {
    background-color: rgb(152,215,137);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.pink {
    background-color: rgb(241,185,232);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.orchid {
    background-color: rgb(193,161,226); 
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.tan {
    background-color: rgb(179,147,110);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.cherry {
    background-color: rgb(238,104,123);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.gray {
    background-color: rgb(159,178,194);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.ivory {
    background-color: rgb(241,225,159);
}

body .artwork-wrapper .preview-wrapper .preview .paper-preview.salmon {
    background-color: rgb(255,150,122);
}

body .artwork-wrapper .thumbnail.insert .close {
    position: absolute;
    right: 2rem;
    top: 2rem;
}

body .artwork-wrapper #insert-container {
    position: relative;
}

body .order-form .rush-processing .rush-processing__label-description-1 {
    font-weight: normal;
    
}

label.radio {
    color: #6D6E71;
}

.order-form .rush-processing-wrapper .rush-process-info {
    margin-top: 1rem;
}

.order-form .rush-processing-wrapper .rush-process-info {
    margin-top: 0.2rem;
    margin-left: 2.5rem;
}

body .my-account-section.limit-form-height,
.limit-form-height,
body .boxed-content {
    max-width: 85rem;
}

body #page-content .my-account-section.integration-management.limit-form-height {
    max-width: 85rem;
}

body .my-account-section.edit-hoa.limit-form-height {
    max-width: 65rem;
}

body .order-history-section .filters .first-form-wrapper .date-range input, 
body .order-history-section .filters .second-form-wrapper .date-range input{
    width: auto !important;
}

body .order-history-section .filters  .radio-wrapper {
    margin-bottom: 1rem;
}

body .integration-management table td {
    padding: 5px;
}

body .online-voting-radio .description {
    font-family: 'Open Sans Regular';
    color: var(--ppp-dark-grey);
}

body .online-voting-radio input {
    margin-right: 1rem;
    position: relative;
    top: -0.3rem;
}

#selectOnlineVoting .modal-body {
    padding: 0;
    margin: 1rem 2rem;
}
#selectOnlineVoting .modal-body .button-wrapper {
    margin-top: 2rem;
}

.my-account-section .form-horizontal table td,
.my-account-section .form-horizontal table th {
    padding: 5px 10px;
}

.my-account-section .addresses-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 2rem;
}
.my-account-section .addresses-wrapper .address-details {
    padding: 15px;
    width: calc(50% - 20px);
    border: 1px solid #e9e8e8;
    margin: 10px 20px 10px 0;
    display: flex;
    justify-content: space-between;
    max-width: 50rem;
    min-width: 15rem;
}

.my-account-section .addresses-wrapper .address-details.default {
    background-color: #e9e8e8;
}

@media (max-width : 1200px) {
    .my-account-section .addresses-wrapper .address-details {
        flex-direction: column;
    }
}

#save-user #delete-record {
    float: none;
    margin-left: 0;
    margin-top: 0;
    font-size: inherit;
}

body .order-form.envelope-printing,
body .order-form.postcard {
    max-width: 150rem;
}
body .order-form.proof-review {
    max-width: 100%;
}

body .order-form.proof-review .review-wrapper {
    max-width: 110rem;
}

.order-form.inserts {
    max-width: 120rem;
}

body .order-form.crop-address-section,
body .order-form.crop-address-section .form-actions,
body .order-form.pages-per-homeowner,
body .order-form.pages-per-homeowner .form-actions {
    max-width: 100%;
}

body .order-form.pages-per-homeowner .form-actions  {
    margin-bottom: 0;
    padding-bottom: 0;
}

body .order-form.pages-per-homeowner {
    margin-top: 0; 
}

.btn-link#cancel-button {
    color: #ed1c24;
}

.btn-link#review-button {
    margin-right: 1rem;
}

.btn-link#exit-button {
    min-width: auto;
    margin-right: 2rem;
    margin-top: 0.7rem;
}

body .order-form.crop-address-section .letterBackgroundWrapper {
    max-width: 90rem;
    margin: auto;
}

.email-template-container .form-actions {
    background-color: transparent;
    border-top: 0 none;
    margin-top: 30px;
    margin-bottom: 0;
    padding: 0;
}

.email-template-container h4 {
    margin-top: 0px;
}

#return_addresses .expand-row-content {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.users-page-container .grid-view .table.table-with-collapse tbody td div[aria-expanded] ul li > div:first-of-type {
    min-width: 10rem;
}

.error-message-container {
    color: #ed1c24;
    font-weight: 700;
}

.logo-text{ 
    margin-top: 3px;
    width: 26rem;
    margin-left: 1rem;
}

@media (max-width: 767px) {
    .logo-text{ 
        display: none;
    }
}

.data-ballots-container .grid-view .table.table-with-collapse tbody td div[aria-expanded] ul li > div:first-of-type {
    min-width: 13rem;
}

.table.dataTable td.numeric {
    text-align: left;
}

.table .numeric .sign{
    font-size: inherit;
    vertical-align: inherit;
}

.table .numeric .cents {
    font-size: inherit;
    vertical-align: inherit;
    margin-right: auto;
    
}

#insert-container {
    max-width: 65rem;
}


body .my-account-section.client-ledger #search-form .submit-btn {
   float: left;
}

body .modal .modal-body.edit-saved-hoa-details, 
body .modal .modal-body.delete-saved-hoa-details{
    margin: 2rem 4rem;
}

body .my-account-section.edit-ballot-survey#content {
    max-width: 110rem;
}

body label .required-label {
    color: #ed1c24;
}

body .alert-success .with-margin {
    margin-left: 2rem;
}

body .no-wrap {
    white-space: nowrap !important;
}

.order-history-section .filters {
    position: relative;
}

.order-history-section .filters label {
    margin-bottom: 5px;
}

.order-history-section .filters input[type='text'],
.order-history-section .filters input[type='search'],
.order-history-section .filters select {
    width: 25rem !important;
    margin-right: 2rem;
}

.order-history-section .filters select {
    margin-bottom: 1.2rem;
}

.order-history-section .filters #hoaName {
    width: 52.5rem !important;
}

.order-history-section .filters .filters-section {
    margin-bottom: 2rem;
}

.order-history-section .filters .download-btn {
    bottom: -6rem;
    position: absolute;
    z-index: 9;
    font-size: 18px;
    right: 1rem;
}

.order-history-section .grid-view .ui-toolbar label {
    font-weight: normal;
}

.order-history-section .filters .filters-section div {
    display: inline-block;
}    

.order-history-section .filters .date-range .btn {
    top: -0.6rem;
    position: relative;  
}

.order-history-section .grid-view .dataTables_filter {
    display: none;
}

body label.required:after,
.required-label:after {
    content: ' *';
    color: var(--ppp-red);
    font-size: 1.4rem;
    font-family: 'Open Sans Regular';
}

.walk-through-button {
    background: transparent;
    border: transparent;
}

#row_bar {
    text-decoration: underline;
}

.continue-icon {
    position: relative;
    top: 4px;
    left: 5px;
}

/* order menu numbers */
.order-menu {
    counter-reset: menu-counter;
}

/* order menu numbers */
.order-menu > .menu-item::before {
    counter-increment: menu-counter;
    content: counter(menu-counter) ". ";
}

.order-menu .menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.order-menu {
    display: flex;
    /* justify-content: space-between; */
    gap: 50px;
    width: 100%;
    margin-left: 15px;
    padding: 40px 0 5px;
    font-size: 2rem;
    border-bottom: 1px solid red;
}

.order-menu .menu-item:not(.active) {
    color: #231F20;
}

.order-menu .menu-item:hover,
.order-menu .menu-item:focus {
    text-decoration: none;
}

body .order-menu .menu-item.hoa-name {
    color: var(--ppp-red);
    font-weight: bold;
}

.order-menu .menu-item .delete-image {
    width: 25px;
    margin-right: 20px;
}

.order-menu .menu-item .back-arrow {
    width: 25px;
    margin-right: 10px;
}

.select-return-address #api_return_address,
.return_address_display {
    background-color: #e9e8e8;
    padding: 15px;
    max-width: 32rem;
    margin-left: 3rem;
}

.return_address_mailing_info_display {
    background-color: #e9e8e8;
    padding: 15px;
    margin-left: 3rem;
}

.select-return-address #api_return_address_id {
    max-width: 35rem;
}

#pagesperhomeowner .modal-body{
    margin: 2rem;
}

.pages-per-homeowner-wrapper .select-page-number {
    display: flex;
    max-width: 38rem;
}

.pages-per-homeowner-wrapper .select-page-number.sub-radio {
    margin-left: 5rem;
}

.pages-per-homeowner-wrapper .select-page-number  select#pages_per_homeowner {
    max-width: 15rem;
    margin-left: 2rem;
}

.statement-options-wrapper {
    display: flex;
    border-bottom: 1px solid darkgray;
    padding: 1rem 0 4rem;
}

.statement-options-wrapper .select-paper-wrapper {
    margin-bottom: 3rem;
}

.statement-options-wrapper .paper_option_icon_container {
    margin-left: 3rem;
    flex-grow: 1;
    text-align: right;
}

.outer-envelope-wrapper {
    margin: 2rem 4rem;
}

.remit-envelopes-wrapper {
    margin-bottom: 3rem;
}

.pdf-pagination {
    text-align: center;
    margin: 10px;
    font-weight: bold;
    font-size: 20px;
}

.pdf-pagination .pagination-text {
    position: relative;
    top: -5px;
    padding: 0 15px;
}

 .pdf-pagination .disabled i {
    color: lightgray;
}

.outer-envelope-wrapper .pdf-pagination {
    width: 850px;
}

.preview-wrapper {
    margin: 3rem 0;
}

.statementMailingAgreement .statementExample {
    margin: 1rem 3rem;
    font-weight: bold;
}

.statementMailingAgreement .statementInfo {
    font-style: italic;
}

.statementMailingModal  {
    width: 860px;
}

.statementMailingModal .modal-dialog .modal-body {
    max-height: 500px;
    margin: 2.5rem;
}

.statementMailingModal .modal-dialog .modal-footer {
    margin-left: 2.5rem;
}

.statementMailingAgreement .checkbox-wrapper  {
    margin-top: 1rem;
}

.statementMailingAgreement .checkbox-wrapper label {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-left: 5px;
}

html body #site-container .step-header {
    color: var(--ppp-red);
    margin-top: 0;
    font-size: 2rem;
    font-weight: normal;
}
/*--------------------- REVIEW PAGE -------------------------*/
.review-wrapper {
    position: relative;
    max-width: 110rem;
}

.review-wrapper .order-number {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 22px;
}

.review-part table {
    width: 100%;
    border: 3px solid var(--ppp-dark-grey);
}

.review-part {
    margin-bottom: 3rem;
    position: relative;
}

.review-part h4 {
    margin: 0 0 10px;
}

.review-part .edit-button {
    position: absolute;
    right: 2rem;
    top: 2px;
}

.review-part .edit-button.disabled {
    color: lightgray;
}

.review-part table th, 
.review-part table td {
    padding: 5px;
    font-weight: normal;
    text-align: center;
}

.review-part table th {
    background-color: var(--ppp-dark-grey);
    color: white;
    text-transform: capitalize;
    font-size: 100%;
}
.review-part.grid-view .table thead tr th {
    text-transform: capitalize;
    font-size: 100%;
}

.review-part table td .mapped-file {
    margin-left: 2rem;
}

.review-part .proof-info {
    margin-top: 1rem;
    font-size: 15px;
    font-style: italic;
    max-width: 80rem;
}

.review-part .promo_code .promo_code_input{
    max-width: 40rem
}

.review-part .election-wrapper {
    margin-bottom: 2rem;
}

.review-part .election-wrapper h4 {
    margin-top: 0;
}

.review-part .question-wrapper {
    margin-bottom: 2rem;
}

.review-part .question-wrapper h4 {
    margin-top: 0;
}

.review-part .candidates-list {
    margin-top: 1rem;
}

.review-part .ballot-description label {
    text-align: left;
    margin-bottom: 0rem;
}

.review-part .ballot-description {
    background-color: #e9e8e8;
    padding:1.5rem 1.5rem 0;
}

.review-part .ballot-description > div {
    text-align: left;
    margin-bottom: 1.5rem;
}

.review-part.command-menu a {
    margin-right: 2rem;
}

.review-part.command-menu a img {
    margin-right: 5px;
}

.review-wrapper .submit-info {
    padding: 2rem;
    text-align: center;
    background-color: var(--ppp-light-grey);
    margin-bottom: 2rem;
}

.review-wrapper .order-info {
    background-color: var(--ppp-light-grey);
    padding: 2rem;
    display: flex;
    width: 100%;
    margin-bottom: 3rem;
}

.review-wrapper .order-info .title {
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
    margin-right: 1rem;
    color: var(--ppp-black);
}

.review-wrapper .order-info .rush {
    font-family: 'Open Sans';
    color: var(--ppp-red);
}

.review-wrapper .order-info .underlined {
    text-decoration: underline;
}

.review-wrapper .order-info > div:first-child {
    width: 50%;
}

.review-wrapper .order-info > div > div {
    margin-bottom: 0.5rem;
}

.review-wrapper input:not([type='checkbox']), 
.review-wrapper textarea {
    max-width: 80rem;
    display: block;
}

.review-wrapper .order-info .ordered-by {
    display: flex;
}

.review-wrapper .order-info .ordered-by  .title {
    min-width: 10rem;
}

.order-form.review-order,
.order-form.review-order .form-actions,
.order-form.review_order,
.order-form.review_order .form-actions {
    max-width: 110rem;
}

.review-wrapper .proof-review {
    position: relative;
}

.review-wrapper .proof_recipient input {
    display: inline-block;
    width: calc(100% - 4rem) !important;
}

.review-wrapper .proof_recipient .remove_proof {
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    margin-left: 1rem;
}
/*--------------------- END REVIEW PAGE-------------------------*/

/*--------------------- ONLINE VOTING PAGE-------------------------*/

.online-voting-wrapper .online-voting-info {
    margin-bottom: 2rem;
}

.online-voting-wrapper #ballot_preview {
    background-color: #e9e8e8;
    padding: 2rem;
    position: relative;
}

.online-voting-wrapper .ballot-details  {
    margin-left: 4rem;
}

.online-voting-wrapper #ballot_preview .ballot-preview-label {
    font-weight: bold;
}

.online-voting-wrapper .ballot-details h4 {
    font-size: 1.6rem;
}

.online-voting-wrapper #ballot_preview > div {
    margin-bottom: 0.3rem;
}

.online-voting-wrapper #ballot_preview a {
    position: absolute;
    top: 2rem;
    right: 3rem;
}
/*--------------------- END ONLINE VOTING PAGE -------------------------*/
.hidden {
    display: none;
}
/*--------------------- BALLOT PAGES -------------------------*/
.empty-ballots-list {
    text-align: center;
    font-size: 20px;
    margin-top: 18rem;
}

.empty-ballots-list a.btn {
    display: block;
    width: fit-content;
    margin: 25px auto;
}

.empty-ballots-list a.btn.btn-tertiary {
    color: #ed1c24;
}

.ballots-settings-container .email-template-container {
    max-width: 100rem;
}
.ballots-settings-container .email-template-container .original-email-preview {
    background-color: var(--ppp-light-grey);
    padding: 10px 20px;
    margin-bottom: 10px;
}

.ballots-settings-container .email-template-container .custom-list ol li {
    display: inline-block;
    margin: 5px 15px 5px 0;
    font-weight: bold;
    font-family: monospace;
    font-size: 16px;
}

.ballots-settings-container .email-template-container .custom-list ol li::before {content:"{{"; margin-right:3px;}
.ballots-settings-container .email-template-container .custom-list ol li::after {content:"}}";  margin-left:3px;}
.ballots-settings-container .email-template-container .custom-list ol {
    margin-left: 0;
}

.ballots-settings-container .email-template-container .jqte {
    width: 100%;
    margin: 0 0 10px;
}
.ballots-settings-container .email-template-container .jqte_editor{height:250px;max-height:500px;}
.ballots-settings-container .email-template-container .jqte_tool.jqte_tool_1 .jqte_tool_label {height: 22px;}
.original-email-preview .jqte_toolbar  {
    display: none;
}

.ballots-settings-container .email-template-container #email-form input {
    max-width: 80%;
}

.ballots-settings-container .email-template-container #email-form .reset-button {
    margin-right: 15px;
}

.completed-ballots-wrapper .dataTables_wrapper {
    top: -4rem;
    z-index: 0;
}

.completed-ballots-wrapper .fg-toolbar {
    min-height: 6rem;
}

.completed-ballots-wrapper .dataTables_filter {
    display: none;
}

.completed-ballots-wrapper  h4.finalized-header {
    margin-top: 15px;
    padding-top: 2rem;
}

.completed-ballots-wrapper h4 {
    z-index: 2;
    position: relative;
    top: 1rem;
    width: fit-content;
}
/*--------------------- END BALLOT PAGES -------------------------*/
/*--------------------- REPORT PAGE ------------------------------*/

.report-page .results-overview div {
    margin-bottom: 5px;
}

.report-page .results-overview label {
    display: inline-block;
}

.report-page .results-overview {
    background-color: rgb(234, 234, 235);
    padding: 10px 20px;
    max-width: 35rem;
    min-width: 35rem;
}

.question-wrapper  .question-title,
.candidate-wrapper .candidate-title {
    text-align: center;
    padding: 10px;
    color: white;
    background-color: var(--ppp-dark-grey);
    text-transform: uppercase;
    margin-top: 0;
    font-weight: normal;
}

.question-wrapper,
.candidate-wrapper {
    border: 1px solid var(--ppp-dark-grey);
    margin-bottom: 10px;
    background: white;
}

.candidate-wrapper h4 {
    cursor: move;
}

.questions-wrapper .question-wrapper .question-details .question-choices div:before {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid lightgrey;
    display: inline-block;
    margin-right: 1rem;
    top: 3px;
    position: relative;
}

.questions-wrapper .question-wrapper .question-details .question-choices div {
    padding-left: 20px;
}

.questions-wrapper .question-wrapper .question-details .question-choices div.radio:before {
    border-radius: 50%;
}

.questions-wrapper .question-wrapper .question-details {
    padding: 2rem;
    display: flex;
}

.questions-wrapper .question-wrapper .question-details .details {
    flex-grow: 1;
}

.questions-wrapper .question-wrapper .question-details .buttons {
    flex: 0 0 14rem;
}

.candidate-wrapper .candidate-details {
    padding: 0 1rem 1rem;
    display: flex;
}

.candidate-wrapper .candidate-details .image {
    padding: 0 1rem;
    flex: 0 0 12rem;
    margin-right: 1rem;
}

.candidate-wrapper .candidate-details .buttons {
    flex: 0 0 14rem;
}

.candidate-wrapper .candidate-details .details {
    flex-grow: 1;
}

.candidate-wrapper .candidate-details label {
    display: inline-block;
}

.report-page .question-wrapper table {
    margin: 0;
}

.report-page .question-wrapper .ui-toolbar {
    display: none;
}

.report-page .question-wrapper th {
    text-align: center;
}

.report-page .question-wrapper .table-title {
    padding: 10px 15px;
    font-weight: bold;
    margin: 0;
}

.report-page .voters-title {
    margin-top: 40px;
}

.report-page div[class *="toolbar"] {
    font-size: 16px;
}

.report-page .grid-view label {
    font-weight: normal;
}

.report-page .ballot-details-and-buttons {
    display: flex;
    justify-content: space-between;

}

.report-page  .election-chart {
    margin:20px 0; 
}
/*--------------------- END REPORT PAGE -------------------------*/
/*--------------------- BALLOT FORM -----------------------------*/
#ballot_form .panel-title {
    color: #ed1c24;
    font-size: 20px;
    margin: 0;
}

#ballot_form .question-title {
    font-size: 20px;
    margin: 0;
}

#ballot_form .question-wrapper {
    margin-left: 30px;
    margin-bottom: 15px;
}

#ballot_form .question-wrapper label {
    font-weight: normal;
}

#ballot_form .vote-number-wrapper {
    font-weight: bold;
}

#ballot_form .vote-number-wrapper span {
    margin: 0 5px;
}

#ballot_form .email-input {
    max-width: 40rem;
}

#ballot_form .ballot-section {
    margin-top: 15px;
}

#ballot_form .survey-questions-wrapper {
    margin-bottom: 35px;
}

#ballot_form .candidate-input-cell {
    vertical-align: bottom;
}

#ballot_form .candidate-input {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    padding: 0;
    height: auto;
    margin: 0;
}

#ballot_form  #election-form {
    margin-left: 30px;
}

#ballot_form .email-label {
    font-size: 18px;
    margin-bottom: 10px;
}
/*--------------------- END BALLOT FORM -------------------------*/

#save-user-modal .OK {
    margin-bottom:15px;
}

#save-user-modal .ERROR {
    margin-bottom:15px;
    color: #ed1c24;
}

#save-user-modal .modal-body {
    max-height: 50rem;
}

@media (min-width: 1024px) {
    #save-user-modal {
        width: 80rem;
    }
}

#custom-modal .modal-footer,
#custom-modal .modal-body {
    text-align: center;
}

#custom-modal .modal-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

#custom-modal .modal-icon svg {
    width: 5rem;
    height: auto;
    color: var(--ppp-red);
}

#custom-modal .modal-header {
    padding-bottom: 0;
    background: #fff;
    border: 0.1rem solid #fff;
}

#custom-modal .modal-header .close {
    color: #000;
    opacity: 0.6;
    font-size: 2.5rem;
}

#custom-modal .modal-header .close:hover {
    opacity: 1;
}

#custom-modal .modal-footer .btn {
    white-space: normal;
}

#custom-modal .modal-link-container {
    margin-top: 0.5rem;
}

#success-modal .modal-footer,
#success-modal .modal-body,
#deleted-modal .modal-footer,
#deleted-modal .modal-body {
    text-align: center;
}

#success-modal .icon img,
#deleted-modal .icon img {
    width: 5rem;
    margin-bottom: 2rem;
}

.div_content_centered {
    display: flex;
    justify-content: center;
}
#feedback-survey-modal .icon img {
    width: 81px;
    height: 81px;
    margin-bottom: 2rem;
}

.feedback-survey-heading-title {
    color: #ed1c24;
    font-family: "Open Sans", Sans-serif;
    font-size: 34px;
    text-transform: uppercase;
    line-height: 41px;
    letter-spacing: 2px;
}


.feedback-survey-menu .item1nav:before {
    content: "1";
}

.feedback-survey-menu .item2nav:before  {
    content: "2";
}

.feedback-survey-menu .item3nav:before  {
    content: "3";
}

.feedback-survey-menu .item4nav:before {
    content: "4";
}

.feedback-survey-menu .item5nav:before {
    content: "5";
}

.feedback-survey-menu .square.visited {
    color: #ed1c24;
    border-color: #ed1c24;
    cursor: pointer;
}

.feedback-survey-menu .square {
    width: 30px !important;
    height: 30px !important;
    text-align: center;
    padding: 2px 0;
    border: 0;
}

.feedback-survey-menu .square:before {
    font-size: 12px;
    border: 1px solid;
    padding: 6px 11px 6px 11px;
    vertical-align: middle;
    height: 5px;
}

.feedback-survey-menu hr.nav {
    height: 1px;
    border:0;
    border-top: 1px solid #d8d8d8;
    margin: 14px 6px;
    padding: 0;
    width: 75px;
    vertical-align: middle;
}

.feedback-survey-menu {
    display: flex !important;
    justify-content: center;
    margin: 0 auto;
}

.feedback-survey-menu .square.active {
    color: white;
    background-color: #ed1c24;
    border: 0 ;
}

.feedback-survey-menu .square.disabled {
    color: lightgray;
}

.feedback-survey-menu a,
.feedback-survey-menu a:visited,
.feedback-survey-menu a:hover {
    color: #ed1c24;
}

#success-modal,
#deleted-modal {
    max-width: 40rem;
}

#envelope-options .ballot-envelope-wrapper {
    display: flex;
    margin-bottom: 3rem;
}

#envelope-options .ballot-envelope-wrapper .ballot-inputs {
    width: 50%;
    margin-right: 4rem;
}

#envelope-options .ballot-envelope-wrapper .input-wrapper {
    margin-bottom: 2rem;
}

#envelope-options .ballot-envelope-wrapper .ballot-envelope {
    width: 50%;
    min-height: 400px;
    background: #bdbec1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1.5rem 0;
}

@media (max-width: 1260px) {
    #envelope-options .ballot-envelope-wrapper {
        flex-direction: column;
    }
    
    #envelope-options .ballot-envelope-wrapper .ballot-envelope,
    #envelope-options .ballot-envelope-wrapper .ballot-inputs {
        width: 100%;
    }
}

.client-api-key {
    float: right;
    color: #231F20;
    font-size: 1.6rem;
} 

.pdfAPIOrdersWrapper.grid-view .table.table-with-collapse tbody td div[aria-expanded] ul li > div:first-of-type {
    min-width: 13rem;
}

html body .chosen-container {
    font-size: inherit;
}

body .modal.add-edit-modal {
    width: 800px;
    margin-left: -380px;
}

body .modal.add-edit-modal .modal-body {
    margin: 0 2rem;
    max-height: 650px;
}

body .statement-management .email-template-wrapper,
body .statement-management .pay-option-wrapper {
    margin-top: 3rem;
}

body .statement-management .email-template-wrapper #email-template {
    margin-left:2rem;
    margin-top: 0;
}

.red-label {
    color: #ed1c24;
}

.checkbox-label {
    top: 3px;
    position: relative;
    display: inline-block;
    margin-left: 0.7rem;
}

body .statement-management .email-template-wrapper .attach-pdf {
    position: relative;
    display: inline-block;
    top: 3px;
}

body .statement-management .email-template-wrapper .disclaimer {
    margin-left: 2rem;
    margin-top: 0.5rem;
}

form .jqte {
    border: 1px solid #bbb;
    box-shadow: none;
    margin: 0;
    width: 100%;
}

form .jqte_focused {
    box-shadow: none;
}

form .jqte .jqte_editor { 
    font-size: 16px;
}

form .jqte .jqte_tool.jqte_tool_1 .jqte_tool_label {
    height: auto;
}

.checkbox-wrapper .description {
    display: block;
    margin-left: 2.1rem;
}

.password-input .show-password {
    color: #ed1c24;
    position: absolute;
    right: 3rem;
    top: 3.5rem;
    cursor: pointer;
    text-decoration: underline;
    display: none;
}

.election-wrapper .election-form-wrapper {
    border-bottom: 1px solid lightgrey;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    float: left;
    display: none;
}

.election-wrapper.expanded .election-form-wrapper {
    display: block;
}

.election-wrapper .close-button {
    float: right;
    font-size: 3rem;
    position: absolute;
    right: 1.5rem;
    top: 0;
}

.election-wrapper .close-button:hover {
    text-decoration: none;
}

.election-wrapper .step-header:before {
    content: "\f105";
    color: #ed1c24;
    font-family: 'FontAwesome';
    font-size: 2.4rem;
    font-size: 2.4rem;
    margin-right: 1rem;
    position: absolute;
    top: 1.5rem;
    -webkit-transform: translateY(-50%) rotate(0deg);
    -moz-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    -o-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
}

.election-wrapper.expanded .step-header:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.election-wrapper .step-header span {
    padding-left: 2rem;
}

.election-wrapper .step-header {
    cursor: pointer;
}

.question-wrapper .question-form-wrapper {
    border-bottom: 1px solid lightgrey;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    float: left;
    display: none;
}

.question-wrapper.expanded .question-form-wrapper {
    display: block;
}

.question-wrapper .close-button {
    float: right;
    font-size: 3rem;
    position: absolute;
    right: 1.5rem;
    top: 0;
}

.question-wrapper .close-button:hover {
    text-decoration: none;
}

.question-wrapper .step-header:before {
    content: "\f105";
    color: #ed1c24;
    font-family: 'FontAwesome';
    font-size: 2.4rem;
    font-size: 2.4rem;
    margin-right: 1rem;
    position: absolute;
    top: 1.5rem;
    -webkit-transform: translateY(-50%) rotate(0deg);
    -moz-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    -o-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
}

.question-wrapper.expanded .step-header:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.question-wrapper .step-header span {
    padding-left: 2rem;
}

.question-wrapper .step-header {
    cursor: pointer;
}

.question-wrapper input.long,
.question-wrapper select.long {
    width: 928px !important;
}

.multiple-files-upload-container .ui-widget-content .ui-widget-header {
    border: 1px solid var(--ppp-dark-grey)/*{borderColorHeader}*/;
    background: var(--ppp-dark-grey);
    color: white/*{fcHeader}*/;
}

.multiple-files-upload-container .ui-widget-content .ui-button {
    color: black;
    background: white;
    border: 1px solid black;
}

.multiple-files-upload-container .ui-state-default, 
.multiple-files-upload-container .ui-widget-content .ui-state-default, 
.multiple-files-upload-container .ui-widget-header .ui-state-default {
    border-bottom: 1px solid black/*{borderColorDefault}*/;
    background: white;
    font-weight: normal/*{fwDefault}*/;
    color: #555555/*{fcDefault}*/;
}

#selectOnlineVoting .modal-body {
    max-height: 100%;
}

.estimatedCost #pricing-table {
    width: 100%
}

.estimatedCost #pricing-table table.tbl_custom {
    max-width: 100%;
}

.estimatedCost #footer {
    width: 100%;
}

.estimatedCost #pricing-table table.tbl_header_gray {
    border: 1px solid var(--ppp-light-grey);
}

.estimatedCost #footer > div {
    display: inline-block;
    width: 31.5%;
    float: right;
}

.estimatedCost #pricing-table table.tbl_custom th {
    background: var(--ppp-light-grey);
    color: black;
    text-transform: none;
    font-weight: normal;
}

.estimatedCost #pricing-table table.tbl_custom .total-row {
    border: 3px solid red;
}

.estimatedCost #pricing-table table.tbl_custom .total-row th {
    background: red;
    color: white;
}

.estimatedCost .paid,
.estimatedCost .amount_due, 
.estimatedCost .due_date {
    display: none;
}

.pay-open-invoices-amount-total {
    margin-top: -2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    position: absolute;
    right: 15px;
    z-index: 0;
}

.invoices-amount-total--deposit {
    margin-top: 102px;
}

.invoices-amount-selected invoices-amount.amount-selected,
.invoices-amount-selected invoices-amount#amount-selected {
    padding: 0 !important;
}

.invoices-amount .ppp-black-text {
    color: var(--ppp-black) !important;
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
}

.invoices-amount-selected.payment-summary-label {
    text-align: left;
    width: 100%;
    margin-top: 25px;
}

.invoices-amount {
    width: 33rem;
    text-align: center;
    padding: 2.5rem;
    font-weight: bold;
    margin-right: 0;
    margin-left: auto;
    border-top: 0;
}

/* .invoices-amount-above-line {
    border-bottom: 1px solid var(--ppp-dark-grey);
} */

.invoices-amount.deposit-page {
    position: absolute;
    right: 15px;
}

.invoices-amount .amount-due {
    font-size: 2.8rem;
    color: #ed1c24;
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
}

.invoices-amount .deposit-funds {
    color: green;
}

.invoices-amount.deposit-page .deposit-funds {
    font-size: 2.8rem;
}

.invoices-amount .amount-selected {
    color: #ed1c24;
}

.invoices-amount.invoices-amount-selected {
    width: 100%;
}

.with-invoice-amount .page-header {
    margin-bottom: 0;
}

.remap-button {
    position: absolute;
    top: 4rem;
    left: 29rem;
    text-align: center !important;
}

.general-info .uploaded-file-info {
    padding: 1.3rem;
    background-color: var(--ppp-light-grey);
    min-width: 25rem;
    width: fit-content;
    position: relative;
}

.general-info .uploaded-file-info .mapping-remove-file {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ed1c24;
    border-radius: 50%;
    padding: 0 6px;
    color: white;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
}

html body .select-wrapper {
    position: relative;
}

html body .select-wrapper input.edit-option:not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([hidden=""]) {
    width: 90% !important;
    position: absolute;
    border-right: transparent !important;
    height: 3rem;
    top: 0.35em;
    left: 4px;
    border: 0;
    box-shadow: none;
}

html body .select-wrapper .form-group + input.edit-option:not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([hidden=""]) {
    top: 2.6em;
}

table.api_homeowners tbody td:first-child {
    padding-left: 0;
}

table.api_homeowners .checkbox-wrapper {
    top: -0.7rem;
    justify-content: center;
}

.order-form .page-description {
    margin-bottom: 1rem;
}

body #site-container .sub-radio label {
    color: var(--ppp-dark-grey);
}

body .order-form.homeowners_list {
    margin-right: 0;
}
body .order-form.homeowners_list .col-md-12 {
    padding-right: 0;
}

.address-fields-wrapper {
    float: left;
    width: 100%;
}

.online-voting-wrapper {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

body .row.homeowner-list-wrapper {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

body .bank-wrapper {
    margin-top: 0.5rem;
}

body .modal#notificationsModal .modal-body {
    margin: 3rem 1rem;
}

.notification-wrapper {
    border: 2px solid var(--ppp-medium-grey);
    margin: 0 1rem 1rem;
}

.notification-wrapper .notification-title {
    padding: 1rem;
    background-color: var(--ppp-light-grey);
}

.notification-wrapper .notification-body {
    padding: 1rem;
}

.notification-wrapper .notification-time {
    padding: 1rem;
    color: var(--ppp-medium-grey);
}

body table.dataTable thead th div.DataTables_sort_wrapper {
    display: flex;
    align-items: center;
}

body table.dataTable thead th div.DataTables_sort_wrapper span {
    margin-left: 0.5rem;
    position: inherit;
    margin-top: 0px;
}

/** ---------------------- Dotted drop down menu style ----------------------*/
.dotted-dropdown-menu {
    width: fit-content;
}

.dotted-dropdown-menu .dropdown-toggle:after {
    color: #6D6E71;
    content: '\2807';
    font-size: 30px;
    display: inline-block;
    transform: rotate(90deg);
    position: relative;
    top: 8px;
}

.dotted-dropdown-menu .dropdown-menu {
  background: white;
  right: -15px;
  left: auto;
  border: 1px solid #A7A9AC;
  margin-top: 1rem;
  min-width: auto;
  border-radius: 0;
  padding: 10px;
}
.dotted-dropdown-menu .dropdown-menu:before {
  content: "";
  border-left: 1px solid #A7A9AC;
  border-top: 1px solid #A7A9AC;
  display: block;
  height: 1.5rem;
  position: absolute;
  right: 0rem;
  top: -0.9rem;
  width: 1.5rem;
  transform: rotate(45deg);
  right: 1.6rem;
  background: white;
}
.dotted-dropdown-menu .dropdown-menu li + li {
  margin-top: 1rem;
}
.dotted-dropdown-menu .dropdown-menu > li > a {
  color: #6D6E71;
  padding: 0 1rem;
  font-size: 1.6rem;
  min-height: 0;
  margin: 0;
  text-align: left;
  margin-bottom: 0.5rem;
}
.dotted-dropdown-menu .dropdown-menu > li > a:hover,
.dotted-dropdown-menu .dropdown-menu > li > a:focus {
  background: none;
  text-decoration: underline;
}

.dotted-dropdown-menu .dropdown-menu > li > a.disabled {
  color: #bcbec0;
}

/** ---------------------- Hoampage page style ------------------------------*/
.hoampage-page {
    position: relative;
    margin-top: 15px;
}

/*.hoampage-page #upgrade-button,
.hoampage-page #editor-button {
    float: right;
    position: relative;
    top: -55px;
    margin-left: 20px;
}*/

.hoampage-header-wrapper {
    display: flex;
    justify-content: space-between;
}

.hoampage-header-wrapper .buttons-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hoampage-header-wrapper .buttons-wrapper .btn {
    margin-top: 0;
}

.hoampage-page .subscription-status {
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 3px 15px;
    margin-left: 15px;
}

.hoampage-page .subscription-status.active,
.hoampage-page .subscription-status.trial {
    background-color: #e5f6ed;
    color: #00ab50;
}

.hoampage-page .subscription-status.active .bullet,
.hoampage-page .subscription-status.trial .bullet{
    background-color: #00ab50;
}

.hoampage-page .subscription-status {
    background-color: #E4E5E7;
    color: var(--ppp-dark-grey);
    font-weight: normal;
}

.hoampage-page .subscription-status .bullet {
    width: 8px;
    height: 8px;
    background-color: var(--ppp-dark-grey);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.hoampage-details {
    background-color: var(--ppp-light-grey);
    padding: 20px;
    margin-bottom: 30px;
}

.hoampage-details .hoa-details {
    display: flex;
    justify-content: space-between;
    max-width: 90rem;
    margin-bottom: 15px;
}

.hoampage-details .hoa-details .administrator {
    display: flex;
}

.hoampage-details .hoa-details .administrator >div:first-child {
    margin-right: 10px;
}

.hoampage-details .name {
    color: var(--ppp-black);
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

.hoampage-details .name.hoampage-plan {
    margin-bottom: 10px;
    display: flex;
}

.hoampage-details .name img {
    position: relative;
    top: -2px;
    left: 10px;
}

.hoampage-details .name-and-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.hoampage-details .name-and-admin .administrator {
    display: flex;
}

.hoampage-details .name-and-admin .administrator > div:first-child {
    margin-right: 10px;
}

.hoampage-details .name-and-admin .administrator img {
    margin-left: 10px;
    cursor: pointer;
}

.hoampage-details .hoampage-details-item {
    margin-bottom: 15px;
}

.hoampage-details .hoampage-details-item.disabled {
    color: #bcbec0;
}

.hoampage-details .hoampage-details-item.disabled img {
    opacity: 0.5;
}

.hoampage-details .hoampage-details-label  {
    font-weight: bold;
    display: flex;
    align-items: center;
}

.hoampage-details .hoampage-details-label img {
    width: 28px;
    margin-right: 10px;
}

.hoampage-details .hoampage-details-value {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
} 

.hoampage-details .hoampage-details-value.community-plan {
    justify-content: space-between;
    width: fit-content;
}

.hoampage-details .hoampage-details-value.community-plan > div {
    margin-right: 20px;
}

.hoampage-details .hoampage-details-value span {
    white-space: nowrap;
}

.hoampage-details .hoampage-details-value a {
    margin-left: 10px;
    width: auto;
}

.hoampage-page .title {
    margin: 15px 0px 15px;
    font-weight: bold;
    color: var(--ppp-black);
}

.hoampage-page .partial-grid-header .grid-title {
    font-weight: bold;
    color: var(--ppp-black);
    font-size: 16px;
    flex-grow: 1;
    align-items: center;
    display: flex;
}

.hoampage-page .partial-grid-header.demographic .grid-title {
    margin-bottom: 15px;
}

.hoampage-page .btn-tertiary.fa-btn {
    top: 2px;
}

.hoampage-page .grid-view img {
    cursor: pointer;
}

.empty-hoa {
    padding: 40px;
    text-align: center;
    color: var(--ppp-black);
    background-color: var(--ppp-light-grey);
}

.empty-hoa img {
    width: 45px;
    margin-bottom: 15px;
}

.empty-hoa .not-yet {
    font-weight: bold;
    margin-bottom: 15px;
}

.empty-hoa .info {
    max-width: 650px;
    margin: 0 auto 15px;
}

.empty-hoa .btn {
    margin-bottom: 15px;
}

.empty-hoa .btn:hover {
    font-weight: normal;
}

.empty-hoa .btn-tertiary {
    color: var(--ppp-blue);
}

.hoampage-page iframe {
    border: 0;
}

/** ---------------------- Upgrade popup css  -----------------------------*/
.card-wrapper {
    padding: 30px; 
    margin: 20px auto;; 
    border: 1px solid var(--ppp-light-grey);
    box-shadow: 0px 4px 5px rgba(0,0,0,0.1);
}

.card-wrapper--vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card-form-wrapper {
    display: flex;
}
    
.card-form-wrapper .plan-info-wrapper {
    padding: 2rem;
    align-items: center;
    justify-content: center;
    background-color: #F0F0F0;
    margin: 1rem 2rem 1rem 0rem;
    min-width: 30rem;
}
    
.card-form-wrapper .plan-info-wrapper .plan-info-section {       
    width: 100%;
    color: var(--ppp-black);
}  
 
.card-form-wrapper .plan-info-wrapper .plan-info-section:last-child {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}  
 
.card-form-wrapper .plan-info-wrapper .plan-info-section:last-child .plan-info-title {
    height: 100%;
}
               
.card-form-wrapper .plan-info-wrapper .plan-info-section .plan-info-title {
    font-weight: 700;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    white-space: nowrap;
 }

.card-form-wrapper .plan-info-wrapper .plan-info-section .plan-info-price {
    color: var(--ppp-red);
    flex-grow: 1;
    text-align: right;
 }
 
.card-form-wrapper .plan-info-wrapper .plan-info-section .plan-info-price.total-price {
    font-size: 2.5rem;
}


.card-form-wrapper .plan-info-wrapper .plan-info-section hr {
    background-color: white;
}

.card-form-wrapper .plan-info-wrapper .plan-info-section > div {
    margin-bottom: 0.5rem;
}

.card-form-wrapper .plan-info-wrapper .plan-info-section > div.button-wrapper {
    margin-top: 1.5rem;
    font-style: normal;
}

.card-form-wrapper .plan-info-wrapper .plan-info-section .website-name-wrapper{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}
    
.card-form-wrapper .card-form {
    width: 100%;
}

.card-form-wrapper h1 {
    font-size: 2.5rem;
}
            
.card-form-wrapper img {
    max-width: 5rem;
    margin: 3rem auto;
}

body .modal.upgrade-modal {
    width: 940px;
    margin-left: -470px;
}

body .modal.upgrade-modal .modal-body {
    max-height: 550px;
}
/** -------------------------- HOAMPAFE MODAL -----------------------------*/
body .modal.hoampage-modal {
    text-align: center;
}

body .modal.hoampage-modal img {
    width: 45px;
    margin: 15px;
}

body .modal.hoampage-modal .modal-title {
    font-weight: bold;
    font-size: 18px;
    color: var(--ppp-black);
    max-width: 350px;
    margin: 0 auto 15px;
    line-height: 1.42;
}

body .modal.hoampage-modal .modal-inner-body > div {
    margin: 15px 0;
}

body .modal.hoampage-modal .modal-inner-body .date {
    color: var(--ppp-red);
    font-weight: bold;
}

body .modal.hoampage-modal .modal-body {
    margin: 2rem 3rem;
}

body .modal.hoampage-modal .modal-buttons-wrapper {
    margin-top: 20px;
}

body .modal.hoampage-modal .modal-buttons-wrapper a {
    margin-bottom: 15px;
}

body .digital-delivery-info .digital-delivery {
    max-width: 85rem;
}

body .digital-delivery-info .digital-delivery-image {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    align-items: flex-start;
}
    
body .digital-delivery-info .digital-delivery-image img {
    max-width: 36rem;
    width: 100%;
}
    
body .digital-delivery-info {
    display: flex;
}

/* On/off toggle */
.custom-checkbox {
    background: white;
    display: block;
    padding: 0.5rem 0;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    left: -999.9rem;
}

.custom-checkbox input[type="checkbox"] + label {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    min-width: 24.5rem;
    position: relative;
    padding: 0 5rem 0 0;
    display:inline;
    color: var(--ppp-dark-grey);
}

.custom-checkbox input[type="checkbox"] + label.master-label {
    font-weight: 800;
}
.custom-checkbox input[type="checkbox"] + label:before {
    background: var(--ppp-medium-grey);
    border-radius:1rem;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    left: 0;
    top: 50%;
    transition:all 0.3s;
    transform:translate(0,-50%);
    width: 4.5rem;
}

.custom-checkbox input[type="checkbox"] + label:after {
    background: white;
    border-radius:1rem;
    content: "";
    display: block;
    height: 1.4rem;
    position: absolute;
    left: 0.1rem;
    top: 50%;
    transition:all 0.3s;
    transform:translate(0,-50%);
    width: 1.4rem;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
    background:var(--ppp-red);
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
    left: 3rem;
}

.custom-checkbox label.second-label {
    display:inline;
}
/* END: Checkboxes styles used in the forum, group, for sale areas */

.wb__content--cta {
    margin-top: 30px;
    max-width: 730px;
    background-color: #f1f2f2;
    border-radius: 50px;
    padding-top: 20px;
    padding-left: 40px;
}

.upgrCTA__container {
    display: flex;
    justify-content: space-between;
}

.upgrCTA__left-content {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 400px;
}

.upgrCTA__right-image-container {
    display: flex;
    align-items: end;
    justify-content: end;
}
.upgrCTA__right-image {
    min-height: 311px;
    max-height: 300px;
}

.upgrCTA__checked {
    width: 17px;
    margin-right: 12px;
    padding-top: 5px;
    align-self: flex-start;
}

.upgrCTA__list-item {
    font-family: 'Open Sans Regular';
    padding-bottom: 15px;
    color: black;
    display: flex;
}

.upgrCTA__cta-box {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 40px;

    .btn {
        margin: 0px;
    }

    a.upgrCTA__learn-more {
        display: flex;
        text-wrap: nowrap;
    }
}

.upgrCTA__highlight {
    color: #1C75BC;
}

@media (max-width: 1110px) {
    .upgrCTA__container {
        flex-direction: column;
    }

    .upgrCTA__cta-box {
        flex-direction: column;
    }
}

#emailList td[data-attr-column="email_content"] iframe {
    border: 1px solid #6d6e71 !important;
}

#emailList td[data-attr-column="email_content"] {
    min-width: 500px;
}

.tooltip.fade {
    max-width: none;
    white-space: normal;
    text-transform: none;
    overflow: visible !important;
    z-index: 9999;
}

.tooltip {
    font-size: 14px;
    background-color: transparent;
    border-radius: 0.5rem; /* Customize border radius */
    
    position: fixed; /* Ensure tooltip is always visible */
}

.tooltip .tooltip-inner {
    background-color: #fff;
    border: 1px solid #6d6e71;
    color: #6d6e71; /* Customize inner text color */
    padding: 1rem; /* Customize inner padding */
    z-index: 99999;

}

.tooltip.top .tooltip-arrow {
    border-top-color: #333; /* Customize arrow color for top position */
}

.tooltip.right .tooltip-arrow {
    border-right-color: #333; /* Customize arrow color for right position */
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #333; /* Customize arrow color for bottom position */
}

.tooltip.left .tooltip-arrow {
    border-left-color: #333; /* Customize arrow color for left position */
}

.heading__2 {
    color: black !important;
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
}

.heading__2--lightgray {
    color: #6D6E71 !important;
}

.heading__2--red {
    color: var(--ppp-red) !important;
}

.heading__2--disabled {
    color: #6D6E71 !important;
}

.heading__2--disabled:hover {
    cursor: not-allowed;
    text-decoration: none;
}

.heading__3 {
    font-family: 'Open Sans SemiBold';
    font-size: 16px;
}

.subheading {
    font-family: 'Open Sans Regular';
    font-size: 14px;
    color: #656263;
}


a[disabled],
input[disabled],
select[disabled] {
    color: #ccc !important;
}

a[disabled]:hover,
input[disabled]:hover,
select[disabled]:hover {
    cursor: not-allowed;
    text-decoration: none;
}

.heading__2--menu-regular-black {
    color: black !important;
    font-family: 'Open Sans Regular';
}

.heading__2,
.heading__2--menu-regular-black:hover {
    text-decoration: none;
}

.hporders__title {
    color: var(--ppp-red);
}

.hporders__subtitle.active {
    font-weight: bold;
    color: #000000;
}

.hporders__subtitle {
    display: flex;
    gap: 30px;
    font-size: 16px;
    padding-bottom: 10px;
    color: black;
    border-bottom: 2px solid var(--ppp-red);
}

.hporders__subtitle .heading__2:first-child {
    padding-left: 0px;
}

.hporders__subtitle.hporders__subtitle--noborder {
    border-bottom: 0px;
}

body .btn.btn-primary--light {
    background-image: linear-gradient(#fff, #fff);
    color: var(--ppp-red);
    border: 2px solid var(--ppp-red);
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body .btn.btn-primary--light:hover {
    background-color: #fff;
}

.helper__align-content--center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.nav-dropdown.btn-group {
    margin-top: 0px;
    margin-right: 10px;
}

.dropdown-menu {
    margin-top: 20px !important;
    padding: 5px;
    padding-bottom: 10px;
}

.nav-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.60rem 1.5rem !important;
    clear: both;
    font-size: 16px;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none !important;
    min-width: 270px;
}

.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

.text-danger{
    color:#ed1c24 !important;
}
.nav-dropdown .notifications-wrapper {
    width: 41px;
}

img.ballots-icon {
    width: 110px;
}

.payment_status_message_header {
    padding-top: 10px;
}

.ov__results-container {
    margin-bottom: 0px;
    display: flex; 
    justify-content: space-around; 
    gap: 15px;
}

.ov__results-container label {
    cursor: auto;
}
.ov__results-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1200px) {
    /* Fall on separate lines */
    .ov__results-container {
      flex-direction: column;
    }
    .ov__results-box {
      flex: 1;
      width: 100%;
    }
  }

.ov__results-box img {
    height: 40px;
}

.ov__results-box span {
    color: #ED1C24;
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
    font-size: 32px;
    text-align: center;
}

.ov__results-box.ov__results-box--achieved span {
    color: #07a855;
}

.ov__results-box--achieved img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(362%) hue-rotate(90deg) brightness(95%) contrast(93%);
}

.ov__results-box-summary-item {
    display: flex;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
}

.ov__results-box-summary-item label {
    width: 90px;
    margin-right: 20px;
}

.ov__finalize {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ov__finalize img {
    height: 70px;;
}

.sweet-alert button.cancel,
.sweet-alert button.confirm {
    border-radius: 0px;
    font-family: 'Open Sans SemiBold';
    font-weight: normal;
}

.sweet-alert button.cancel {
    background-color: white !important;
    color: #6D6E71;
    border: 1px solid #6D6E71;
}

.sweet-alert button.cancel:hover {
    color: #ED1C24;
    border: 1px solid #ED1C24;
}

.placeholder__cta {
    text-align: center;
}

/* Flatpickr month/year dropdown overrides */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    box-shadow: none !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    background: transparent !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month input.cur-year:focus {
    box-shadow: none;
    outline: none !important;
    box-shadow: none !important;
}

/* Actions Dropdown Component
   A reusable dropdown menu triggered by a "•••" button.
   Used in tables for row actions (View, Edit, Delete, etc.)
   
   HTML Structure:
   <div class="actions-dropdown">
       <button class="actions-dropdown__trigger" type="button">
           <span class="actions-dropdown__dots">•••</span>
       </button>
       <div class="actions-dropdown__menu">
           <div class="actions-dropdown__item"><a href="#">Action 1</a></div>
           <div class="actions-dropdown__item"><a href="#">Action 2</a></div>
       </div>
   </div>
   
   JS Required (toggle .open class on click):
   $(document).on('click', '.actions-dropdown__trigger', function(e) {
       e.stopPropagation();
       var $dropdown = $(this).closest('.actions-dropdown');
       $('.actions-dropdown').not($dropdown).removeClass('open');
       $dropdown.toggleClass('open');
   });
   $(document).on('click', function() {
       $('.actions-dropdown').removeClass('open');
   });
*/
.actions-dropdown {
    position: relative;
    display: inline-block;
}
.actions-dropdown__trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 18px;
    color: #666;
    letter-spacing: 2px;
}
.actions-dropdown__trigger:hover {
    color: #333;
}
.actions-dropdown__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}
.actions-dropdown.open .actions-dropdown__menu {
    display: block;
}
.actions-dropdown__item {
    padding: 0px 16px;
    border-bottom: 1px solid #eee;
}
.actions-dropdown__item:last-child {
    border-bottom: none;
}
.actions-dropdown__item a {
    color: #333;
    text-decoration: none;
    display: block;
    font-size: 14px;
}
.actions-dropdown__item a:hover {
    font-weight: bold;
}