.jp-related-posts-i2 {
margin-top: 1.5rem;
}
.jp-related-posts-i2__list {
--hgap: 1rem;
display: flex;
flex-wrap: wrap;
column-gap: var(--hgap);
row-gap: 2rem;
margin: 0;
padding: 0;
list-style-type: none;
}
.jp-related-posts-i2__post {
display: flex;
flex-direction: column; flex-basis: calc(( 100% - var(--hgap) ) / 2);
} .jp-related-posts-i2__post:nth-last-child(n+3):first-child,
.jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * { flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
}
.jp-related-posts-i2__post:nth-last-child(4):first-child,
.jp-related-posts-i2__post:nth-last-child(4):first-child ~ * { flex-basis: calc(( 100% - var(--hgap) ) / 2);
}
.jp-related-posts-i2__post-link {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
width: 100%;
margin-bottom: 1rem;
line-height: 1.2;
}
.jp-related-posts-i2__post-link:focus-visible {
outline-offset: 2px;
}
.jp-related-posts-i2__post-img {
order: -1;
max-width: 100%;
}
.jp-related-posts-i2__post-defs {
margin: 0;
list-style-type: unset;
} .jp-related-posts-i2__post-defs dt {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.jp-related-posts-i2__post-defs dd {
margin: 0;
} .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list {
display: block;
}
.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post {
margin-bottom: 2rem;
} @media only screen and (max-width: 640px) {
.jp-related-posts-i2__list {
display: block;
}
.jp-related-posts-i2__post {
margin-bottom: 2rem;
}
} #jp-relatedposts {
display: none;
padding-top: 1em;
margin: 1em 0;
position: relative;
clear: both;
}
.jp-relatedposts::after {
content: "";
display: block;
clear: both;
} #jp-relatedposts h3.jp-relatedposts-headline {
margin: 0 0 1em 0;
display: inline-block;
float: left;
font-size: 9pt;
font-weight: 700;
font-family: inherit;
}
#jp-relatedposts h3.jp-relatedposts-headline em::before {
content: "";
display: block;
width: 100%;
min-width: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 1em;
}
#jp-relatedposts h3.jp-relatedposts-headline em {
font-style: normal;
font-weight: 700;
} #jp-relatedposts .jp-relatedposts-items {
clear: left;
}
#jp-relatedposts .jp-relatedposts-items-visual {
margin-right: -20px;
} #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
float: left;
width: 33%;
margin: 0 0 1em; box-sizing: border-box;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
padding-right: 20px;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
clear: both;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
text-decoration: underline;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
} #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title,
#jp-relatedposts .jp-relatedposts-items p,
#jp-relatedposts .jp-relatedposts-items time {
font-size: 14px;
line-height: 20px;
margin: 0;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
position: relative;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
border-bottom: 0;
}
#jp-relatedposts .jp-relatedposts-items p,
#jp-relatedposts .jp-relatedposts-items time {
margin-bottom: 0;
}
#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
text-transform: none;
margin: 0;
font-family: inherit;
display: block;
max-width: 100%;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
font-size: inherit;
font-weight: 400;
text-decoration: none;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
text-decoration: underline;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span {
display: block;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span {
height: auto;
max-width: 100%;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
opacity: 0.6;
} .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
display: none;
} #jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt {
display: none;
} #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
overflow: hidden;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
margin-bottom: 1em;
} #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
clear: both;
width: 100%;
}
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img {
float: left;
overflow: hidden;
max-width: 33%;
margin-right: 3%;
}
#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
display: inline-block;
max-width: 63%;
} @media only screen and (max-width: 640px) {
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
width: 50%;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
clear: left;
}
#jp-relatedposts .jp-relatedposts-items-visual {
margin-right: 20px;
}
}
@media only screen and (max-width: 320px) {
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
width: 100%;
clear: both;
margin: 0 0 1em;
}
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img,
#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
float: none;
max-width: 100%;
margin-right: 0;
}
} @media print {
.jp-relatedposts {
display: none !important;
}
}#wp_invoice_process_wait {
margin: 0;
float: left;
}
.wp_invoice_business_name {
font-weight: bold;
}
.wp_invoice_business_phone {
font-style: italic;
}
.wpi_left_col,
.wpi_right_col {
float: left;
width: 425px;
}
.wpi_left_col {
margin-right: 15px;
}
div.invoice_top_message  {
margin-bottom: 10px;
}
div.wpi_payment_form  {
}
div.wpi_payment_form  ul.wpi_inline_fields  li {
display: inline;
}
div.wpi_payment_form  ul.wpi_inline_fields  li label {
width: auto;
float: none;
}
div.wpi_payment_form  ul.wpi_checkout_block{
float: left;
margin-bottom: 10px;
margin-top: 17px;
padding: 0;
margin-left: 0px;
width: 100%;
}
div.wpi_payment_form ul,
div.wpi_payment_form ol {
margin:0;
padding:0;
}
table.invoice_history .time {
min-width: 120px;
}
div.wpi_payment_form div.partial_payments input[type=radio] {
float: left;
margin:5px 0 0 0;
padding:0;
}
div.wpi_payment_form div.partial_payments label {
width: auto;
margin-left: 5px;
margin-right: 0px;
}
div.wpi_payment_form div.partial_payments  #my_amount{
position: relative;
left: 3px;
}
div.wpi_payment_form  li {
min-height: 2em;
list-style: none;
}
div.wpi_payment_form  li.section_title {
border-top: 1px dotted #E0E0E0;
font-size: 1.5em;
padding: 16px 0 0;
clear: both;
}
div.wpi_payment_form  li span.validation {
color: #624343;
font-size: 0.8em;
padding-left: 9px;
}
.wp_invoice_select_payment_method label {
float: left;
position: relative;
width: 140px;
}
div.wpi_payment_form  .online_payment_form_wrapper li label {
float: left;
position: relative;
width: 140px;
}
div.wpi_payment_form  select,
div.wpi_payment_form  .text-input {
margin: 3px 0;
padding: 3px;
}
div.wpi_payment_form  .paypal_button {
margin-top: 15px;
}
div.wpi_payment_form  .text-input.wpi_error,
div.wpi_payment_form  .input_field.wpi_error {
border: 1px solid #AE1C1C !important;
}
div.wpi_payment_form  input.wpi_checkout_input_error{
background: none repeat scroll 0 0 #F9EBEB;
border: 1px solid #961C1C;
}
div.wpi_payment_form  input.wpi_checkout_process_payment {
box-shadow: 0 0 13px #A3A1A1;
clear: both;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
margin: 14px 8px 9px 132px;
padding: 5px 16px;
}
div.wpi_payment_form  .total_price  {
font-size: 1.3em;
position: relative;
top: -8px;
}
div.wpi_payment_form  .total_price  {
color: #565555;
font-size: 1.4em;
font-weight: bold;
position: relative;
top: -9px;
left: 3px;
}
div.wpi_payment_form  .wpi_checkout_payment_response  {
display:none;
background: none repeat scroll 0 0 #FFFDEE;
border: 1px solid #CDC5C5;
clear: both;
height: 41px;
margin-left: 130px;
padding: 9px;
width: 219px;
}
form.wpi_checkout {
width: 100%;
}
form.wpi_checkout ul.wpi_checkout_block,
div.wpi_checkout_payment_box ul.wpi_checkout_block {
float: left;
margin-bottom: 10px;
margin-top: 17px;
padding: 0;
margin-left: 0px;
width: 100%;
}
form.wpi_checkout li,
div.wpi_checkout_payment_box li {
min-height: 2em;
list-style: none;
clear:both;
}
form.wpi_checkout li.section_title,
div.wpi_checkout_payment_box li.section_title {
border-top: 1px dotted #E0E0E0;
font-size: 1.5em;
padding: 16px 0 0;
clear: both;
}
form.wpi_checkout li span.validation {
color: #624343;
font-size: 0.8em;
padding-left: 9px;
}
form.wpi_checkout li label,
div.wpi_checkout_payment_box li label {
float: left;
position: relative;
top: 6px;
width: 140px;
}
form.wpi_checkout .text-input,
div.wpi_checkout_payment_box select {
color: #3E3E3E;
margin: 3px 0;
padding: 3px;
width: 230px;
}
form.wpi_checkout .text-input.small {
width: 68px;
}
form.wpi_checkout input.wpi_checkout_input_error{
background: none repeat scroll 0 0 #F9EBEB;
border: 1px solid #961C1C;
}
form.wpi_checkout input.wpi_checkout_process_payment {
box-shadow: 0 0 13px #A3A1A1;
clear: both;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
margin: 14px 8px 9px 132px;
padding: 5px 16px;
}
form.wpi_checkout .total_price  {
font-size: 1.3em;
position: relative;
top: -8px;
}
form.wpi_checkout .total_price  {
color: #565555;
font-size: 1.4em;
font-weight: bold;
position: relative;
top: -9px;
left: 3px;
}
form.wpi_checkout .wpi_checkout_payment_response  {
display:none;
background: none repeat scroll 0 0 #FFFDEE;
border: 1px solid #CDC5C5;
clear: both;
margin-left: 130px;
padding: 9px;
width: 219px;
}
small.notice {
font-size: 0.7em;
}