@import 'variables.css';

html {
    height: 100vh;
}

body .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

body { 
    font-family: 'Open Sans Regular'
}

input {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

h1 {
    font-size: 38.5px;
    margin: 10px 0;
}

#site-header {
    padding:20px 20px 5px 20px;
}

#site-header,
.active-orders,
.mailing-order {
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

#site-header a{
    color: white;
    text-decoration: none;
}

#site-header a:hover{
    color: gray;
}

#site-footer {
    font-size: x-small;
    color: #999;
    text-align: center;
    padding:1px;
}

#site-footer ul {
    margin:10px;
}

#site-footer ul li {
    text-transform:capitalize;
    display:inline;
    border-left:1px solid #999;
    padding-left:7px;
    padding-right:3px;
}

#site-footer ul li:first-child {
    border-left-style:none;
    padding-left:5px;
}


#page-content {
    border-right:1px solid black;
    background:white;
    padding: 0 40px 40px;
    position: relative;
    width: 100%;
}

.breadcrumb
 {
    width: calc(100% + 80px);
    margin-left: -40px;
}

.header-hier-1{
    font-size: 26px;
    margin: auto;
    text-align: center;
    padding: 10px;
}

.header-hier-2{
    font-size: 20px;
}

.header-hier-3{
    font-size: 18px;
    color: blue;
}

.content-hier{
    font-size: 14px;
    color: black;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    font-family: 'Open Sans Regular';
    color: var(--ppp-medium-grey);
}

input:-moz-placeholder,
textarea:-moz-placeholder { 
    font-family: 'Open Sans Regular';
    color: var(--ppp-medium-grey);
}

input::-moz-placeholder,
textarea::-moz-placeholder {   
    font-family: 'Open Sans Regular';
    color: var(--ppp-medium-grey);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {  
    font-family: 'Open Sans Regular';
    color: var(--ppp-medium-grey);
}

.btn-large{
    padding:10px 15px;
    font-size: 14px;
    margin:20px;
    font-weight: normal;
}

#ajaxLodingIndicator div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    z-index: 999;
    border: none;
    border-radius: 0;
    width: 150px;
    height: 120px;
    margin-left: -75px;
    animation: none;
    background: url('/_/img/loading-indicator-v2.gif') center center no-repeat;
    background-size: contain;
}

#ajaxLodingIndicator div::after {
    content: "Loading...";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -10px;
    text-align: center;
    color: #ed1c24;
    font-size: 14px;
    letter-spacing: 2px;
}

#ajaxLodingIndicator {
    position: fixed;
    display: none;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,.2);
    z-index: 998;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader */

.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* End Loader */

/******************************************************************************************/
/* ribbon style */

.ribbon-wrapper {
    position: relative;
    top: -125px;
}
.ribbon-front {
    background-color: #ed1c24;	
    height: 60px;
    position: relative;
    z-index: 2;
}


.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style:solid;
    height:0px;
    width:0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    top: 60px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
    border-color: transparent #a70e14 transparent transparent;
}

.ribbon-edge-topleft {
    top: -10px;
    border-width: 10px 20px 0 0;
}
.ribbon-edge-bottomleft {
    border-width: 0 20px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
    right: 0px;
    border-color: transparent transparent transparent #a70e14;
}

.ribbon-edge-topright {
    top: -10px;
    border-width: 10px 0 0 20px;
}
.ribbon-edge-bottomright {
    border-width: 0 0 0px 20px;
}

.ribbon-back-left {
    position: absolute;
    top: -10px;
    left: 0px;
    width: 0px;
    height: 60px;
    z-index: 0;
}

.ribbon-back-right {
    position: absolute;
    top: -10px;
    right: 0px;
    width: 0px;
    height: 60px;
    z-index: 0;
}

.ribbon-wrapper.small-ribbon {
    top: -95px;
    margin-bottom: 20px;
}

.small-ribbon .ribbon-front {
    height: 40px;
}

.small-ribbon .ribbon-front h3 {
    top: 1px;
}

.item-wrap {    
    margin-bottom: -80px;
}

.item-wrap img {
    padding: 20px;
    width: 100%;
    max-height: 280px;
}

.item-wrap h3 {
    text-align: center;
    font-weight: lighter;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    top: 9px;
}

.item-wrap p {
    text-align: center;
    position: relative;
    color: #fff;
    top: -10px;
}

.gradientBlueFullWidth,
.gradientBlue {
    position: relative;
}

.gradientBlue::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #2d20ff 100%);
    opacity: 0.8;
}

.gradientBlueFullWidth::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #2d20ff 100%);
    opacity: 0.8;
}

.button-online-solutions {
    text-decoration: none;
    display: inline-block;
    background: red;
    width: 100%;
    height: 54px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.button-online-solutions span {
    position: relative;
    top:50%;
    transform:translateY(-50%);
    display: block;
    font-size: 28px;
}

.button-online-solutions:hover {
    text-decoration: none;
    color: #fff;
}

.contact-button {
    color: #fff;
    background: #303192;
    height: 40px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 3px;
    display: inline-block;
    padding: 20px;
    margin-right: 40px;
    width: 200px;
}

.contact-button:hover {
    text-decoration: none;
    color: #fff;
}

.contact-button span {
    position: relative;
    top:50%;
    transform:translateY(-50%); 
    display: block;
}

.manage-online-voting-image {
    max-width: 300px;
    margin: 20px auto;
}

.manage-online-voting {
    color: #fff;
    background: #303192;
    padding: 10px;
    height: 50px;
    text-align: center;
    font-size: 2.3rem;
    width: 310px;
    display: inline-block;
    margin: 5px;
    
}

.manage-online-voting:hover {
    text-decoration: none;
    color: #fff;
}

.welcomeMsg {
    color: #ed1c24; 
    font-size:38px;
    text-transform:uppercase;
}

.searchHeader,
.ordersHeader {
    color: var(--ppp-red);
    font-weight:bold;
    text-align: center;
}

/* Online Solutions New Section */
.online-solutions-section .item-wrap {
    margin: 0 0 10px;
    padding: 70px 10px 10px;
    background: white;
    position: relative;
    height: 100%;
}

.online-solutions-section a:hover {
    text-decoration: none;
}

.online-solutions-section .item-header {
    background: red;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 60px;
}

.online-solutions-section .item-header h3 {
    top: unset;
}

.online-solutions-section .iteam-body {
    text-align: center;
}

.online-solutions-section .price {
    font-size: 36px;
    color: var(--ppp-red);
}
.online-solutions-section .sub-title {
    color: var(--ppp-red);
}
.online-solutions-section .item-wrap > .item-link {
    background: #303192;
    display: table;
    table-layout: fixed;
    height: 100%;
    padding: 20px 0 50px;
    width: 100%;
    position: relative;
    text-decoration: none;
}

/* hamburger menu 1 */

#nav-icon {
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    float: right;
    border: none;
    background: none;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 7px;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 9px;
}

#nav-icon span:nth-child(3) {
  top: 18px;
}

#nav-icon.open span:nth-child(1) {
  top: 14px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon.open span:nth-child(3) {
  top: 14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#nav-icon {
        display: none;
}

.logo {
    
}

.iframeWrapper {
    height: 700px;
    background: #e9e8e8;
}

.space-line {
    padding: 15px;
}

.hide.in {
    display: block !important;
}

.form-actions .first-button {
    text-align: right;
}
.form-actions .second-button {
    text-align: center;
}
.form-actions .third-button {
    text-align: left;
}
/*==========  Media Queries  ==========*/

@media only screen and (max-width : 1359px) { 
    .contact-button {
        display: block;
        margin: 10px auto;
    }
}
@media (min-width : 1200px) and (max-width : 1500px) { 
    .manage-online-voting {
        font-size: 2rem;
    }
}
@media only screen and (max-width : 768px) { 
    body {
        padding-left: 0;
        padding-right: 0;
    }
    
    .iframeWrapper {
        height: auto;
    }
}

@media only screen and (max-width : 992px) { 
    .form-actions .first-button,
    .form-actions .second-button,
    .form-actions .third-button {
        text-align: center;
    }
}
@media only screen and (max-width : 1000px) {
    .welcomeMsg { font-size: 5vw; display: block; height: 50px; }
    .header a { 
        display: block;
        text-align: center;
        font-size: 18px;
    }
    .space-line {
        display: none;
    }
    #nav-icon {
        display: block;
    }
}



@media only screen and (max-width : 480px) {
    #page-content { padding: 0 20px; }
    #site-header { padding: 20px 10px 0; }
    .item-wrap h3 { font-size: 5vw; }
    .button-online-solutions span { font-size: 5vw; }
}

@media (min-width : 1200px) and (max-width : 1600px) {
    .item-wrap h3 { font-size: 1.3vw; }
}

@media only screen and (min-width : 1400px) {
    .mailing-order { width: calc(100% - 550px); }
}

@media (min-width : 992px) and (max-width : 1200px) {
    .mailing-order { width: 50%; }
    .col-md-6 .ribbon-wrapper { top: -110px; }
}

@media (min-width : 1200px) and (max-width : 1400px) {
    .mailing-order { width: 60%; }
    .ribbon-wrapper { top: -110px; }
}

.activeOrdersWrapper table.dataTable > * {
    font-size: 12px;
}

.activeOrdersWrapper table td.hoaName,
.activeOrdersWrapper table td.product {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*==========  FORMS LAYOUT  ==========*/
.form-wrapper div > label {
    font-weight: bold;
    font-size: 16px;
}

.form-wrapper div > textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 10px;
}
.form-wrapper div > input:not([type="checkbox"]),
.form-wrapper div > select {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    font-size: 16px;
    margin-bottom: 10px;
}

.form-wrapper div > select[multiple], 
.form-wrapper div > select[size] {
    height: auto;
}

.form-wrapper .group-action-buttons {
    text-align: center
}

.form-wrapper .group-action-buttons .btn {
    min-width: 150px;
    margin: 0 10px;
}

body #site-container .form-wrapper .error {
    font-weight: bold;
    color: #ed1c24;
}

.form-wrapper option:disabled {
    color: lightgrey;
}

.hr-wrapper hr {
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    border: 0;
    content: "";
    display: block;
    height: 1px;
    width: 100%;
}

/*==========  END FORMS LAYOUT  ==========*/

/*==========  DUAL LISTBOX  ==========*/
.dual-listbox.force-height > div {
    height: 300px;
}

.dual-listbox.force-height .action-buttons {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
/*==========  END DUAL LISTBOX  ==========*/

/*==========  FA CUSTOM ICONS ==========*/
.fa-icon__green {
    color: green;
}
.fa-icon__red {
    color: #ed1c24;
}
/*==========  END DUAL LISTBOX  ==========*/

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

.row.display-flex [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.modal#placeUsMailOrder {
    width: 700px;
    margin: 0 auto;
    margin-left: -300px;
}
#placeUsMailOrder .modal-dialog {
    max-width: unset;
}
#placeUsMailOrder .modal-body {
    height: 180px;
    overflow-y: hidden;
}
#placeUsMailOrder .ribbon-front {
    height: 40px;
}
#placeUsMailOrder .ribbon-wrapper {
    top: -90px;
}
#placeUsMailOrder .item-wrap h3 {
    font-size: 1.8rem;
    top: unset;
}

body .checkbox-wrapper input {
    display: inline-block;
}

html body .checkbox-wrapper label.checkbox {
    display: inline-block;
    position: relative;
    top: 0.3rem;
    font-weight: normal;
}

body .checkbox-wrapper.simple-label label {
    display: inline-block;
    color: black;
    position: relative;
    top: 0.3rem;
    font-weight: normal;
}

.ui-state-default .ui-icon {
    filter: brightness(2.5);
}

.ui-icon.ui-icon-circle-arrow-w,
.ui-icon.ui-icon-circle-arrow-e {
    filter: brightness(1);
}

.capitalize {
    text-transform:capitalize;
}

.ellipsis {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;    
}

/* CertiSendr tracking badges */
.certisendr-tracking-summary {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}
.certisendr-tracking-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
}
.certisendr-tracking-badge--neutral { background: #eef0f2; color: #414850; }
.certisendr-tracking-badge--progress { background: #e8f1fb; color: #1c5085; }
.certisendr-tracking-badge--success { background: #e2f3e9; color: #21613d; }
.certisendr-tracking-badge--warning { background: #fff1d6; color: #78500b; }
.certisendr-tracking-badge--error { background: #fce8e8; color: #962f2f; }

/* Order details header and actions */
body .review-wrapper .page-header.order-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.order-details-header > h3 {
    margin: 0;
}
.order-details-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.order-details-menu {
    position: relative;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
}
.order-details-menu > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    background: #fff;
    color: #414850;
}
.order-details-menu > summary::-webkit-details-marker {
    display: none;
}
.order-details-menu > summary:focus-visible {
    outline: 2px solid #1c5085;
    outline-offset: 2px;
}
.order-details-menu__links {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    min-width: 200px;
    width: max-content;
    max-width: calc(100vw - 48px);
    max-height: 65vh;
    overflow-y: auto;
    padding: 6px 0;
    margin-top: 4px;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.order-details-menu__links > a {
    display: block;
    padding: 8px 14px;
    color: #333;
    text-decoration: none;
}
.order-details-menu__links > a:hover,
.order-details-menu__links > a:focus {
    background: #eef0f2;
    text-decoration: none;
}

/* Order navigation and optional Proof of Service download */
.order-details-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 20px;
}
.order-details-navigation a.order-details-pos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #59636d;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    text-decoration: none;
}
.order-details-navigation a.order-details-pos:hover,
.order-details-navigation a.order-details-pos:focus {
    color: #303942;
    text-decoration: underline;
}
.order-details-navigation a.order-details-pos:focus-visible {
    outline: 2px solid #59636d;
    outline-offset: 3px;
}
@media (max-width: 600px) {
    .order-details-navigation {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Leave room for order and tracking statuses across all Active Orders rows. */
body .activeOrdersWrapper #activeOrders > tbody > tr > td {
    height: 80px;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
    vertical-align: middle;
}

body .activeOrdersWrapper #activeOrders td.status {
    min-width: 220px;
}
#activeOrders .certisendr-tracking-summary {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Digital delivery row actions stay visible outside the scrolling table. */
#cdd-addresses .cdd-actions .actions-dropdown__menu {
    position: fixed;
    right: auto;
    bottom: auto;
    min-width: 180px;
    z-index: 1050;
}
#cdd-addresses .cdd-action-disabled {
    display: block;
    padding: 8px 16px;
    color: #888;
    cursor: not-allowed;
}
#cdd-addresses .cdd-actions .actions-dropdown__item {
    padding: 0;
}
#cdd-addresses .cdd-actions .actions-dropdown__item > a,
#cdd-addresses .cdd-actions .cdd-action-disabled {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
    white-space: nowrap;
}

#cdd-addresses .cdd-actions-column {
    text-align: right;
}
#cdd-addresses .cdd-actions .actions-dropdown__menu {
    text-align: left;
}
#cdd-addresses th.cdd-actions-column .DataTables_sort_wrapper {
    justify-content: flex-end;
}