*,
*:before,
*:after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-tap-highlight-color: transparent;
}
em {
font-style: italic;
}
ol,
ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before,
blockquote:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
body {
width: 100%;
height: 100%;
}
a,
a img,
a:before,
a:after {
transition-duration: .25s;
color: inherit;
}
button {
cursor: pointer;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
input {
border: none;
border-radius: 0;
background: none;
outline: none;
resize: none;
position: relative;
padding: 0;
}
textarea:disabled,
input:disabled,
select:disabled {
background: rgba(0, 0, 0, 0.05);
}
*:focus {
outline: 0;
} body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: rgba(0, 0, 0, 0.75);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body strong {
font-weight: 700;
} .button {
border: none;
border-radius: 6px;
font-family: 'Roboto', sans-serif;
color: #000;
height: 50px;
display: inline-block;
padding: 0 20px;
cursor: pointer;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
background-color: #EEE;
text-decoration: none;
}
#paybar .button {
color: #EEE;
} body {
background-color: #FFF;
}
.row {
width: 100%;
float: right;
position: relative;
}
.row .inner {
width: 80%;
max-width: 800px;
position: relative;
margin: 0px auto;
} #header {
background-color: #FFF;
text-align: center;
}
#header .inner {
padding: 30px 0 50px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.75);
overflow: hidden;
}
@media (max-width: 480px) {
#header .inner {
padding: 50px 0 43px;
}
}
#header .inner img {
height: auto;
max-width: 100%;
float: left; }
@media (max-width: 900px) {
#header .inner img {
height: auto;
margin-bottom: 15px;
}
}
#header .inner .intro h1 {
font-size: 32px;
line-height: 1.2;
margin-bottom: 14px;
font-weight: 900;
}
@media (max-width: 900px) {
#header .inner .intro h1 {
font-size: 22px;
}
}
@media (max-width: 900px) {
#header .inner .intro h1 {
font-size: 22px;
}
}
#header .inner .current_status span {
display: inline-block;
padding: 5px 12px;
background-color: #EEE;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
background-color: #000;
color: #FFF;
margin-bottom: 15px;
} #intro .inner { }
#intro .inner .column {
width: 50%;
float: left;
}
#intro .inner #fromto_info.column {
width: 70%;
}
#intro .inner #invoice_info.column {
width: 30%;
}
#total_due.invoice_info {
background-color: #000;
color: #FFF;
padding: 10px 20px;
font-size: 22px;
font-weight: 800;
max-width: max-content;
text-align: right;
margin-left: auto;
clear: both;
margin-bottom: 0;
}
#intro .inner .column:last-of-type {
text-align: right;
}
@media (max-width: 480px) {
#intro .inner .column {
width: 100%;
text-align: left;
display: block;
}
#intro .inner .column:last-of-type { width: 100%;
text-align: right; }
}
#intro .inner .column .invoice_info {
font-size: 16px;
margin-bottom: 8px;
}
#intro .inner .column #deposit_total.invoice_info {
margin-top: 10px;
}
#intro .inner .column #deposit_total.invoice_info,
#intro .inner .column #total_due.invoice_info {
background-color: #EEE;
padding: 10px 20px;
font-size: 22px;
font-weight: 800;
width: 100%;
float: right;
clear: both;
margin-bottom: 0;
}
#intro .inner .column #total_due.invoice_info {
background-color: #000;
color: #FFF;
}
@media (max-width: 480px) {
#intro .inner .column #deposit_total.invoice_info,
#intro .inner .column #total_due.invoice_info {
width: 100%;
clear: both;
display: block;
}
}
#intro .inner .column span.info {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
width: 100%;
display: block;
}
#intro .inner .column h2 {
width: 100%;
float: left;
font-size: 16px;
font-weight: 800;
}
#intro .inner .column h2 span {
font-weight: 200;
font-size: .7em;
text-transform: uppercase;
}
#intro .inner .column h2.client_to {
margin-top: 26px;
}
#intro .inner .column h3 {
font-size: 18px;
}
#intro .inner .column ul li:first-of-type {
font-weight: 400;
color: #ffffff;
}
#intro .inner .column a {
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
color: #ffffff;
font-weight: 400;
} .title h2 {
padding: 8px 0px;
border-bottom: 1px solid #EEE;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 8px;
}
.invoice .title { margin-bottom: 11px;
overflow: hidden; }
.invoice .title h2 {
display: inline-block;
padding: 8px 16px;
font-size: 12px;
margin-bottom: 8px;
}
.invoice .unit {
height: 19px;
position: absolute;
top: -1px;
padding: 0 8px;
margin-left: 10px;
border-radius: 9.5px;
background-color: rgba(255, 255, 255, 0.75);
font-size: 10px;
line-height: 20px;
color: #4086b0;
}  #items {
margin-bottom: 29px;
}
#items .title {
margin-bottom: 7px;
}
#items .items .item {
display: flex;
justify-content: space-between;
padding-top: 21px;
}
#items .items .item.sub_item {
margin: 0 10px 20px 10px;
}
#items .items .item .column {
flex: 1;
}
#items .items .item .column:first-of-type {
flex: 3;
}
#items .items .item .column:not(:first-of-type) {
text-align: right;
}
#items .items .item .column h3 {
width: 100%;
float: left;
padding-bottom: 8px;
padding: 20px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
line-height: 1;
font-weight: 800;
border-right: none;
background: #000;
color: #FFF;
}
#items .items .item .column h4 {
font-weight: 700;
}
#items .items .item .column p {
font-size: 12px;
}
#items .items .item .column .content ul {
list-style-type: disc;
list-style-position: inside;
margin-left: 15px;
}
#items .items .item .column .content ol {
list-style-type: decimal;
list-style-position: inside;
margin-left: 15px;
}
#items .items .item .column .content ul ul,
#items .items .item .column .content ol ul {
list-style-type: circle;
list-style-position: inside;
margin-left: 15px;
}
#items .items .item .column .content ol ol,
#items .items .item .column .content ul ol {
list-style-type: lower-latin;
list-style-position: inside;
margin-left: 15px;
}
#items .items .item .column .content ol ol ol,
#items .items .item .column .content ul ol {
list-style-type: lower-roman;
list-style-position: inside;
margin-left: 15px;
} #totals {
margin-bottom: 79px;
}
@media (max-width: 480px) {
#totals {
margin-bottom: 49px;
}
}
.invoice .title h2,
#totals .items {
width: 40%;
float: right;
}
@media (max-width: 480px) {
.invoice .title h2,
#totals .items {
width: 100%;
float: none;
}
}
#totals .items .item {
padding: 0px 0 12px 0;
font-size: 16px;
}
#totals .items #line_balance.item {
background-color: #000;
color: #FFF;
padding: 20px 0px;
}
#totals .items .item h3 {
float: left;
padding-left: 16px;
text-transform: uppercase; font-size: 12px;
padding-top: 3px; }
#totals .items .item .total {
float: right;
padding-right: 16px;
font-weight: 800;
} #notes {
padding-bottom: 170px;
}
@media (max-width: 480px) {
#notes {
padding-bottom: 120px;
}
}
#notes .item {
margin-bottom: 24px;
}
@media (max-width: 480px) {
#notes .item {
margin-bottom: 42px;
}
}
#notes .item .header {
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#notes .item .header h3 {
float: left;
padding: 0 17px 8px 0;
margin-bottom: -1px;
border-bottom: 1px solid rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
} #paybar {
width: 100%;
position: fixed;
bottom: 0;
left: 0; line-height: 50px;
color: #000000;
background: rgba(251, 251, 251, 0.95);
}
#paybar .inner {
padding: 25px 0;
}
#paybar .inner .button {
float: right;
background-color: #67a4e3;
margin-left: 15px;
}
@media (max-width: 480px) {
#paybar .inner span {
display: none;
}
#paybar .inner .button {
width: 100%;
text-align: center;
}
} .panel {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 101;
overflow: scroll;
background-color: #ffffff;
color: rgba(0, 0, 0, 0.75);
animation-fill-mode: both;
animation-duration: .5s;
}
.panel.closed {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
.panel.closing {
animation-name: slide-out;
}
.panel.opening {
animation-name: slide-in;
}
.panel .close {
width: 25px;
height: 25px;
position: absolute;
top: 19px;
right: 19px;
z-index: 20;
}
.panel .close:hover {
opacity: 0.5;
}
.panel .close svg {
height: 100%;
fill: #000000;
}
.panel .inner {
width: 80%;
max-width: 600px;
margin: 0px auto;
padding: 92px 0 100px;
}
.panel .inner h2 {
font-size: 32px;
line-height: 1.2;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.panel .inner h2 {
font-size: 22px;
}
}
@media (max-width: 900px) {
.panel .inner h2 {
font-size: 22px;
}
}
.panel .inner h3 {
font-size: 26px;
line-height: 1.1;
margin-bottom: 10px;
}
@media (max-width: 900px) {
.panel .inner h3 {
font-size: 18px;
}
}
@media (max-width: 900px) {
.panel .inner h3 {
font-size: 18px;
}
}
.panel .inner p {
margin-bottom: 18px;
}
.panel .inner input[type="text"],
.panel .inner input[type="input"],
.panel .inner input[type="email"] {
float: left;
padding: 16px 0 3px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
max-width: 300px
}
.panel .inner input[type="text"].half,
.panel .inner input[type="input"].half,
.panel .inner input[type="email"].half {
width: 50%;
}
@media (max-width: 480px) {
.panel .inner input[type="text"].half,
.panel .inner input[type="input"].half,
.panel .inner input[type="email"].half {
width: 100%;
}
}
.panel .inner input[type="text"].whole,
.panel .inner input[type="input"].whole,
.panel .inner input[type="email"].whole {
width: 100%;
}
.panel .inner .toggle {
border-radius: 4px;
background: #2373be;
color: #fff;
display: inline-block;
text-align: center;
height: 100%;
width: 100%;
box-sizing: border-box;
border: none;
vertical-align: top;
cursor: pointer;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 750;
padding: 13px;
margin-bottom: 10px;
text-decoration: none;
}
.panel .inner .single_payment_option .toggle {
zoom: 2;
}
.panel .inner .toggle.inactive {
border-color: rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.25);
}
.panel .inner .button {
margin: 25px 0px;
background-color: rgba(0, 0, 0, 0.75);
color: #FFF;
}
.panel .inner .paytypes {
position: relative;
}
.panel .inner .paytypes .paytype {
animation-fill-mode: both;
animation-duration: .25s;
}
.panel .inner .paytypes .paytype.inactive {
animation-name: fade-out;
position: absolute;
}
.panel .inner .paytypes .paytype.active {
animation-name: fade-in;
animation-delay: .25s;
position: relative;
float: left;
} @keyframes fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes slide-in {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes slide-out {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
} .history {
width: 100%;
float: left;
margin-bottom: 100px;
} .history article {
width: 100%;
float: left;
position: relative;
padding: 0 0 49px 125px;
}
.history article {
padding-top: 6px;
padding-bottom: 12px;
}
.history article.si_history_update {
opacity: .35;
}
.history article.si_history_update:hover {
opacity: 1.0;
}
.history article:last-of-type {
padding-bottom: 0;
} .history article:before {
width: 9px;
height: 9px;
position: absolute;
top: 15px;
left: 96px;
content: '';
background-color: #ebebeb;
border-radius: 50%;
} .history article:not(:last-of-type):after {
width: 1px;
height: 100%;
position: absolute;
top: 16px;
left: 100px;
content: '';
background-color: #ebebeb;
} .history article .posted {
height: 20px;
position: absolute;
top: 9px;
right: calc(100% - 75px);
padding: 0 5px;
background-color: #67a4e3;
border-radius: 3px;
font-size: 12px;
line-height: 20px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
text-align: center;
white-space: nowrap;
}
.history article .posted:after {
width: 0;
height: 0;
position: absolute;
top: 5px;
right: -6px;
content: '';
border-style: solid;
border-width: 5px 0 5px 6px;
border-color: transparent transparent transparent #67a4e3;
} .column_desc h3 small {
font-weight: 100;
font-size: .8em;
}
.panel .inner span.label_wrap {
display: none;
}
.panel .inner textarea,
.panel .inner input[type="date"] {
float: left;
position: relative;
margin: 10px 0px;
border-bottom: 1px solid #ececec;
width: auto;
padding: 16px 0 3px 0;
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
clear: both;
}
.panel .inner textarea {
width: 80%;
}
.panel .inner input[type="file"] {
margin: 20px 0px;
}
.panel .inner select {
float: left;
position: relative;
margin: 10px 0px;
padding: 16px 0 3px 0;
width: auto;
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
}
.panel .inner .paytype p.description {
margin: 10px 0px;
}
.panel .inner select#sa_billing_zone,
.panel .inner select#sa_credit_cc_expiration_month {
width: 40%;
}
.panel .inner select {
margin: 25px 20px 25px 0;
}
.panel .inner #sa_credit_cc_cvv {
width: 20%;
margin-top: 5px;
}
.panel .inner #sa_credit_cc_cvv[size="5"] {
width: 50%;
}
.row.toggles {
margin-bottom: 20px;
}
a.payment_option.toggle.active {
background: #404040;
color: #fff;
}
.payment_option .process_label .si_payment_button {
background: #2373be;
color: #fff;
width: 100%;
}
a.payment_option.toggle.active .process_label .si_payment_button {
background: #404040;
}
#paybar .inner a.decline_estimate {
float: right;
margin-left: 25px;
color: inherit;
}
#paybar .inner a#print_to_pdf_button {
height: 40px;
width: 40px;
float: right;
margin: 8px 0 0 20px;
}
#paybar .inner a#print_to_pdf_button:hover svg {
opacity: 0.5;
}
#payment #stripe_pop_form.button {
float: none;
padding: 0;
margin-top: 0px;
margin-left: 10px;
height: auto;
}
.messages {
display: block;
min-height: 20px;
}
.sa-message {
width: auto;
padding: 2px 14px;
display: block;
margin-bottom: 40px;
background-color: #f3f3f3;
border-radius: 5px; font-size: 14px;
font-weight: 600;
line-height: 28px;
text-transform: uppercase;
}
.inner .sa-message:last-of-type {
margin-bottom: 75px;
}
.sa-message.error {
border: 3px solid rgb(255, 255, 255);
}
#header .sa-message {
background-color: #64a2e5;
border-radius: 15px;
color: #fff;
}
#save_signature_via_ajax {
display: inline-block;
padding: 0 12px;
margin-bottom: 60px;
background-color: #4086b0;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 900;
line-height: 30px;
text-transform: uppercase;
color: #4086b0;
}
body>.service_fee_message {
display: none !important;
} .cloak {
display: none
}
.spinner {
background: url(//vualaa.com/wp-content/plugins/sprout-invoices-pro/resources/front-end/img/spinner.gif) no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
display: none;
float: right;
opacity: 0.7;
filter: alpha(opacity=70);
width: 20px;
height: 20px;
margin: 2px 5px 0;
}
.si_inline_spinner {
float: none;
margin: 0 5px -6px;
}
@media print,
(-o-min-device-pixel-ratio: 5 / 4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.spinner {
background-image: url(//vualaa.com/wp-content/plugins/sprout-invoices-pro/resources/front-end/img/spinner-2x.gif);
}
}
b {
font-weight: bold;
}
.clearfix {
overflow: auto;
} .line_item_comments {
margin: 20px 0;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-top: 2px rgba(255, 255, 255, 0.2) solid;
}
#items .items .item .line_item_comments {
margin-left: 40px;
border-top: 2px rgba(255, 255, 255, 0.2) solid;
background-color: rgba(255, 255, 255, 0.3);
}
.li_comments_toggle {
float: left;
padding-right: 5px;
margin-top: 33px;
margin-left: -30px;
fill: #aaa;
}
#items .items .item .li_comments_toggle {
margin-left: 0px;
}
.li_comments_toggle.has_comments {
fill: #FF5B4D;
}
.line_item_comments .comment_meta.vcard {
float: left;
margin: 10px 10px 10px 0px;
}
.line_item_comments .comment {
display: block;
margin-bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.line_item_comments .comment.highlight {
background-color: #E5E5E5;
padding-left: 15px;
}
.line_item_comments span.comment_date {
float: right;
color: #363B3F;
font-size: 8px;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
padding: 5px 10px; background-color: rgba(255, 255, 255, 0.2);
white-space: nowrap;
}
.line_item_comment_wrap {
width: 100%;
}
.line_item_comment_wrap textarea {
width: 80%;
height: 5em;
padding: 1em;
border: 1px solid #AAA;
}
.line_item_comment_wrap .submit.button {
float: left;
clear: both;
margin: 10px 10px 0px 0px;
}
.dashicons-format-chat:after {
content: 'asdf';
}
.paytypes .sa-checkbox {
float: left;
clear: both;
width: 100%;
}
.paytypes .sa-form-field-radio {
float: left;
clear: both;
margin-bottom: 10px;
}
.paytypes span.sa-form-field-radio.clearfix {
display: block;
width: 100%;
}
.paytypes a.cim_delete_card {
display: inline-flex;
align-self: center;
position: relative;
height: 1em;
width: 1em;
}
.paytypes a.cim_delete_card svg {
height: 1em;
width: 1em;
bottom: -0.125em;
position: absolute;
}
.paytypes .row.description {
margin-top: 30px;
padding-top: 30px;
border-top: 1px #ececec solid;
}
.paytypes .row.description {
margin-top: 50px;
padding: 30px 0 15px 0;
border-top: 1px #ececec solid;
text-transform: uppercasel
}
.paytypes .row.description>p {
font-weight: 500;
}
.paytypes input#si_payment_amount_input_option {
float: none;
display: inline-block;
}
.paytypes input#si_payment_amount_input_option {
float: none;
display: inline-block;
}
.paytypes #modify_invoice_start_date_wrap select {
float: none;
} #header_attachments_info {
padding: 0;
padding-top: 0em;
background-color: inherit;
width: 100%;
margin: 2em 0;
}
#header_attachments_info .attachments_info h2 {
font-size: 1.2em;
font-weight: 800;
padding-bottom: 7px;
}
#si_pp_payment_amount .si_pp_option_wrap {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 1.5em;
cursor: pointer;
font-size: 17px;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#si_pp_payment_amount span.payment_amount {
font-size: 1.5em;
font-weight: 800;
}
#si_pp_payment_amount span.payment_desc,
#si_pp_payment_amount span.more_payment_desc {
display: block;
font-size: .7em;
text-transform: uppercase;
}
#si_pp_payment_amount span.more_payment_desc {
font-style: italic;
font-weight: inherit;
opacity: .5;
}
#si_pp_payment_amount .si_pp_option_wrap #modify_deposit_amount_input {
border: 1px solid #d2d2d2;
margin: 5px;
padding-left: 10px;
} #si_pp_payment_amount .si_pp_option_wrap .radiobtn {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
margin-top: .8em;
} #si_pp_payment_amount .si_pp_option_wrap:hover .radiobtn {
background-color: #ccc;
} #si_pp_payment_amount .radiobtn.selected {
background-color: #4086b0;
} #si_pp_payment_amount .radiobtn:after {
content: "";
position: absolute;
display: none;
} #si_pp_payment_amount .radiobtn.selected:after {
display: block;
} #si_pp_payment_amount .radiobtn:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
} #header #title {
float: right;
text-align: right;
}
#intro #client_info {
margin: 20px 0;
width: 50%;
float: left;
}
.row.content {
margin-bottom: 50px;
}
.row.content p {
font-size: inherit;
margin-bottom: 10px;
}
.history_message {
text-align: center;
}
.history_message a {
border-radius: 2px;
display: inline-block;
padding: 5px 20px;
background-color: #EEE;
font-weight: 200;
color: #000;
opacity: 1;
}
.history_message a:hover {
opacity: 1;
} a.button.edit_shipping_button {
height: auto;
background-color: #EEE;
color: #000 !important;
}
#edit_shipping_checkout_wrap {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #fbfbfb;
}
#edit_shipping_checkout_wrap legend {
padding: 8px 0px;
border-bottom: 1px solid #EEE;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 18px;
}
#edit_shipping_checkout_wrap .sa-form-aligned input,
#edit_shipping_checkout_wrap .sa-form-aligned textarea,
#edit_shipping_checkout_wrap .sa-form-aligned select,
#edit_shipping_checkout_wrap .sa-form-aligned .sa-help-inline,
#edit_shipping_checkout_wrap .sa-form-message-inline {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
#edit_shipping_checkout_wrap .sa-form-aligned textarea {
vertical-align: top;
} #edit_shipping_checkout_wrap .sa-form-aligned .sa-control-group {
margin-bottom: 0.5em;
}
#edit_shipping_checkout_wrap .sa-form-aligned .sa-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
#edit_shipping_checkout_wrap .sa-form-aligned .sa-controls {
margin: 1.5em 0 0 10em;
}
#edit_shipping_checkout_wrap textarea,
#edit_shipping_checkout_wrap input {
padding: .2em .5em;
border: 1px solid #AAA;
}
#edit_shipping_checkout_wrap textarea {
width: 80%;
height: 5em;
}
#edit_shipping_checkout_wrap .button {
float: right;
}
#edit_shipping_checkout_wrap #shipping_address_fields {
margin-bottom: 30px;
}
#doc_address_info {
width: 45%;
float: left;
margin-top: 45px;
}
#doc_address_info .dt_heading {
font-weight: 400;
}#invoice .from_to_title span{
display: block !important;
font-weight: 800 !important;
font-size: 15px !important;
margin-bottom: -5px !important;
}
#invoice .from_to_title{
font-weight: 400 !important;
margin-bottom: -3px !important;
}
#invoice .vcard:first-of-type{
margin-bottom: 20px !important;
}   .history_message{
display: none !important;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-tap-highlight-color: transparent; }
ol,
ul {
list-style: none; }
blockquote {
quotes: none; }
blockquote:before,
blockquote:after {
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
html,
body {
width: 100%;
height: 100%; }
a,
a img,
a:before,
a:after {
transition-duration: .25s;
color: inherit; }
button {
cursor: pointer; }
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; }
video::-webkit-media-controls-start-playback-button {
display: none !important; }
input {
border: none;
border-radius: 0;
background: none;
outline: none;
resize: none;
position: relative;
padding: 0; }
textarea:disabled,
input:disabled,
select:disabled {
background: rgba(0,0,0,0.05);
}
*:focus {
outline: 0; } body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: rgba(0, 0, 0, 0.75);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body strong {
font-weight: 700; } .button {
border: none;
border-radius: 6px;
font-family: 'Roboto', sans-serif;
color: #000;
height: 50px;
display: inline-block;
padding: 0 20px;
cursor: pointer;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
background-color: #EEE;
text-decoration: none;
}
#paybar .button {
color: #EEE;
} body {
background-color: #FFF;
}
.row {
width: 100%;
float: right;
position: relative;
}
.row .inner {
width: 80%;
max-width: 800px;
position: relative;
margin: 0px auto; } #header {
background-color: #FFF;
text-align: center;
}
#header .inner {
padding: 30px 0 50px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.75);
overflow: hidden;
}
@media (max-width: 480px) {
#header .inner {
padding: 50px 0 43px; } }
#header .inner img {
height: 5vw;
max-width: 100%;
float: left; }
@media (max-width: 900px) {
#header .inner img {
height: 20vw;
margin-bottom: 15px; } }
#header .inner .intro h1 {
font-size: 32px;
line-height: 1.2;
margin-bottom: 14px;
font-weight: 900;
}
@media (max-width: 900px) {
#header .inner .intro h1 {
font-size: 22px; } }
@media (max-width: 900px) {
#header .inner .intro h1 {
font-size: 22px; } }
#header .inner .current_status span {
display: inline-block;
padding: 5px 12px;
background-color: #EEE;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
background-color: #000;
color: #FFF;
margin-bottom: 15px;
} #intro .inner { }
#intro .inner .column {
width: 50%;
float: left; }
#intro .inner #fromto_info.column {
width: 70%;
}
#intro .inner #invoice_info.column {
width: 30%;
}
#intro .inner .column:last-of-type {
text-align: right; }
@media (max-width: 480px) {
#intro .inner .column {
width: 100%;
text-align: left;
display: block;
}
#intro .inner .column:last-of-type { width: 100%;
text-align: right; } }
#intro .inner .column .invoice_info {
font-size: 16px;
margin-bottom: 8px;
}
#intro .inner .column #deposit_total.invoice_info {
margin-top: 10px;
}
#intro .inner .column #deposit_total.invoice_info,
#intro .inner .column #total_due.invoice_info {
background-color: #EEE;
padding: 10px 20px;
font-size: 22px;
font-weight: 800;
width: 100%;
float: right;
clear: both;
margin-bottom: 0;
}
#intro .inner .column #total_due.invoice_info {
background-color: #000;
color: #FFF;
}
@media (max-width: 480px) {
#intro .inner .column #deposit_total.invoice_info,
#intro .inner .column #total_due.invoice_info {
min-width: 300px;
width: 100%;
clear: both;
display: block;
}
}
#intro .inner .column span.info {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
width: 100%;
display: block;
}
#intro .inner .column h2 {
width: 100%;
float: left;
font-size: 16px;
font-weight: 800;
}
#intro .inner .column h2 span {
font-weight: 200;
font-size: .7em;
text-transform: uppercase;
}
#intro .inner .column h2.client_to {
margin-top: 26px;
}
#intro .inner .column h3 {
font-size: 18px;
}
#intro .inner .column ul li:first-of-type {
font-weight: 400;
color: #ffffff; }
#intro .inner .column a {
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
color: #ffffff;
font-weight: 400; } .title h2 {
padding: 8px 0px;
border-bottom: 1px solid #EEE;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 8px;
}
.invoice .title { margin-bottom: 11px;
overflow: hidden; }
.invoice .title h2 {
display: inline-block;
padding: 8px 16px;
font-size: 12px;
margin-bottom: 8px;
}
.invoice .unit {
height: 19px;
position: absolute;
top: -1px;
padding: 0 8px;
margin-left: 10px;
border-radius: 9.5px;
background-color: rgba(255, 255, 255, 0.75);
font-size: 10px;
line-height: 20px;
color: #4086b0; }  #items {
margin: 30px 0;
}
#items .title {
margin-bottom: 0px;
}
#items .items .item {
display: flex;
justify-content: space-between; }
#items .items .item.sub_item {
margin: 0 10px 20px 10px; }
#items .items .item .column {
flex: 1; }
#items .items .item .column:first-of-type {
flex: 3; }
#items .items .item .column:not(:first-of-type) {
text-align: right; }
#items .items .item .column h3 {
width: 100%;
float: left;
padding: 20px;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: none;
line-height: 1;
font-weight: 800;
background: #000;
color: #FFF;
}
#items .items .item .column h4 {
font-weight: 700; }
#items .items .item .column .content {
font-size: 16px;
padding: 20px;
}
#items .items .item .column .content ul { 
list-style-type: disc; 
list-style-position: outside;
margin-left: 15px;
}
#items .items .item .column .content ol { 
list-style-type: decimal; 
list-style-position: outside;
margin-left: 15px;
}
#items .items .item .column .content ul ul, #items .items .item .column .content ol ul { 
list-style-type: circle; 
list-style-position: outside; 
margin-left: 15px; 
}
#items .items .item .column .content ol ol, #items .items .item .column .content ul ol { 
list-style-type: lower-latin; 
list-style-position: outside; 
margin-left: 15px; 
} #totals {
margin-bottom: 79px; }
@media (max-width: 480px) {
#totals {
margin-bottom: 49px; } }
.invoice .title h2,
#totals .items {
width: 40%;
float: right;
}
@media (max-width: 480px) {
.invoice .title h2,
#totals .items {
width: 100%;
float: none;
}
}
#totals .items .item {
padding: 0px 0 12px 0;
font-size: 16px;
}
#totals .items #line_balance.item {
background-color: #000;
color: #FFF;
padding: 20px 0px;
}
#totals .items .item h3 {
float: left;
padding-left: 16px;
text-transform: uppercase; font-size: 12px;
padding-top: 3px; }
#totals .items .item .total {
float: right;
padding-right: 16px;
font-weight: 800;
} #notes {
padding-bottom: 170px; }
@media (max-width: 480px) {
#notes {
padding-bottom: 120px; } }
#notes .item {
margin-bottom: 24px; }
@media (max-width: 480px) {
#notes .item {
margin-bottom: 42px; } }
#notes .item .header {
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#notes .item .header h3 {
float: left;
padding: 0 17px 8px 0;
margin-bottom: -1px;
border-bottom: 1px solid rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75); } #paybar {
width: 100%;
position: fixed;
bottom: 0;
left: 0; line-height: 50px;
color: #000000;
background: rgba(251, 251, 251, 0.95);
}
#paybar .inner {
padding: 25px 0; }
#paybar .inner .button {
float: right;
background-color: #67a4e3;
margin-left: 15px;
}
@media (max-width: 480px) {
#paybar .inner span {
display: none; }
#paybar .inner .button {
width: 100%;
text-align: center; } } .panel {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 101;
overflow: scroll;
background-color: #ffffff;
color: rgba(0, 0, 0, 0.75);
animation-fill-mode: both;
animation-duration: .5s; }
.panel.closed {
visibility: hidden;
transform: translate3d(0, 100%, 0); }
.panel.closing {
animation-name: slide-out; }
.panel.opening {
animation-name: slide-in; }
.panel .close {
width: 25px;
height: 25px;
position: absolute;
top: 19px;
right: 19px;
z-index: 20; }
.panel .close:hover {
opacity: 0.5; }
.panel .close svg {
height: 100%;
fill: #000000; }
.panel .inner {
width: 80%;
max-width: 600px;
margin: 0px auto;
padding: 92px 0 100px; }
.panel .inner h2 {
font-size: 32px;
line-height: 1.2;
margin-bottom: 14px; }
@media (max-width: 900px) {
.panel .inner h2 {
font-size: 22px; } }
@media (max-width: 900px) {
.panel .inner h2 {
font-size: 22px; } }
.panel .inner h3 {
font-size: 26px;
line-height: 1.1;
margin-bottom: 10px; }
@media (max-width: 900px) {
.panel .inner h3 {
font-size: 18px; } }
@media (max-width: 900px) {
.panel .inner h3 {
font-size: 18px; } }
.panel .inner p {
margin-bottom: 18px; }
.panel .inner input[type="text"],
.panel .inner input[type="input"],
.panel .inner input[type="email"] {
float: left;
padding: 16px 0 3px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
max-width: 300px }
.panel .inner input[type="text"].half,
.panel .inner input[type="input"].half,
.panel .inner input[type="email"].half {
width: 50%; }
@media (max-width: 480px) {
.panel .inner input[type="text"].half,,
.panel .inner input[type="input"].half
.panel .inner input[type="email"].half {
width: 100%; } }
.panel .inner input[type="text"].whole,,
.panel .inner input[type="input"].whole
.panel .inner input[type="email"].whole {
width: 100%; }
.panel .inner .toggle {
height: 30px;
float: left;
padding: 0 15px;
margin-right: 5px;
border: 1px solid rgba(0, 0, 0, 0.75);
border-radius: 15px;
font-size: 12px;
line-height: 28px;
color: rgba(0, 0, 0, 0.75);
transition-duration: 0.25s;
zoom: 1.3;
text-decoration: none;
}
.panel .inner .single_payment_option .toggle {
zoom: 2;
}
.panel .inner .toggle.inactive {
border-color: rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.25); }
.panel .inner .button {
margin: 25px 0px;
background-color: rgba(0, 0, 0, 0.75);
color: #FFF;
}
.panel .inner .paytypes {
position: relative; }
.panel .inner .paytypes .paytype {
animation-fill-mode: both;
animation-duration: .25s; }
.panel .inner .paytypes .paytype.inactive {
animation-name: fade-out;
position: absolute; }
.panel .inner .paytypes .paytype.active {
animation-name: fade-in;
animation-delay: .25s;
position: relative;
float: left; } @keyframes fade-in {
from {
opacity: 0;
visibility: hidden; }
to {
opacity: 1;
visibility: visible; } }
@keyframes fade-out {
0% {
opacity: 1;
visibility: visible; }
100% {
opacity: 0;
visibility: hidden; } }
@keyframes slide-in {
0% {
transform: translate3d(0, 100%, 0); }
100% {
transform: translate3d(0, 0, 0); } }
@keyframes slide-out {
0% {
transform: translate3d(0, 0, 0); }
100% {
transform: translate3d(0, 100%, 0); } } .history {
width: 100%;
float: left;
margin-bottom: 100px; } .history article {
width: 100%;
float: left;
position: relative;
padding: 0 0 49px 125px; }
.history article {
padding-top: 6px;
padding-bottom: 12px; }
.history article.si_history_update {
opacity: .35;
}
.history article.si_history_update:hover {
opacity: 1.0;
}
.history article:last-of-type {
padding-bottom: 0; } .history article:before {
width: 9px;
height: 9px;
position: absolute;
top: 15px;
left: 96px;
content: '';
background-color: #ebebeb;
border-radius: 50%; } .history article:not(:last-of-type):after {
width: 1px;
height: 100%;
position: absolute;
top: 16px;
left: 100px;
content: '';
background-color: #ebebeb; } .history article .posted {
height: 20px;
position: absolute;
top: 9px;
right: calc(100% - 75px);
padding: 0 5px;
background-color: #67a4e3;
border-radius: 3px;
font-size: 12px;
line-height: 20px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
text-align: center;
white-space: nowrap;
}
.history article .posted:after {
width: 0;
height: 0;
position: absolute;
top: 5px;
right: -6px;
content: '';
border-style: solid;
border-width: 5px 0 5px 6px;
border-color: transparent transparent transparent #67a4e3;
} .column_desc h3 small {
font-weight: 100;
font-size: .8em;
}
.panel .inner span.label_wrap {
display: none;
}
.panel .inner textarea,
.panel .inner input[type="date"] {
float: left;
position: relative;
margin: 10px 0px;
border-bottom: 1px solid #ececec;
width: auto;
padding: 16px 0 3px 0;
font-size: 14px;
color: rgba(0,0,0,0.75);
clear: both;
}
.panel .inner textarea {
width: 80%;
}
.panel .inner input[type="file"] {
margin: 20px 0px;
}
.panel .inner select {
float: left;
position: relative;
margin: 10px 0px;
padding: 16px 0 3px 0;
width: auto;
font-size: 14px;
color: rgba(0,0,0,0.75);
}
.panel .inner .paytype p.description {
margin: 10px 0px;
}
.panel .inner select#sa_billing_zone,
.panel .inner select#sa_credit_cc_expiration_month {
width: 40%;
}
.panel .inner select {
margin: 25px 20px 25px 0;
}
.panel .inner #sa_credit_cc_cvv {
width: 20%;
margin-top: 5px;
}
.panel .inner #sa_credit_cc_cvv[size="5"] {
width: 50%;
}
.row.toggles {
margin-bottom: 20px;
}
a.payment_option.toggle.active {
background: rgba(0,0,0,0.75);
color: rgb(255, 255, 255);
}
#paybar .inner a.decline_estimate {
float: right;
margin-left: 25px;
color: inherit;
}
#paybar .inner a#print_to_pdf_button {
height: 40px;
width: 40px;
float: right;
margin: 8px 0 0 20px;
}
#paybar .inner a#print_to_pdf_button:hover svg {
opacity: 0.5;
}
#payment #stripe_pop_form.button {
float: none;
padding: 0;
margin-top: 0px;
margin-left: 10px;
height: auto;
}
.messages {
display: block;
min-height: 20px;
}
.sa-message {
width: auto;
padding: 2px 14px;
display: block;
margin-bottom: 40px;
background-color: #f3f3f3;
border-radius: 5px; font-size: 14px;
font-weight: 600;
line-height: 28px;
text-transform: uppercase;
}
.inner .sa-message:last-of-type {
margin-bottom: 75px;
}
.sa-message.error {
border: 3px solid rgb(255, 255, 255);
}
#header .sa-message {
background-color: #64a2e5;
border-radius: 15px;
color: #fff;
}
#save_signature_via_ajax {
display: inline-block;
padding: 0 12px;
margin-bottom: 60px;
background-color: #4086b0;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 900;
line-height: 30px;
text-transform: uppercase;
color: #4086b0;
}
body > .service_fee_message { display: none !important; } .cloak {
display: none
}
.spinner {
background: url(//resources/front-end/img/spinner.gif) no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
display: none;
float: right;
opacity: 0.7;
filter: alpha(opacity=70);
width: 20px;
height: 20px;
margin: 2px 5px 0;
}
.si_inline_spinner {
float: none;
margin: 0 5px -6px;
}
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
.spinner {
background-image: url(//vualaa.com/resources/front-end/img/spinner-2x.gif);
}
}
b {font-weight: bold;}
.clearfix {
overflow: auto;
} .line_item_comments {
margin: 20px 0;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-top: 2px rgba(255, 255, 255, 0.2) solid;
}
#items .items .item .line_item_comments {
margin-left: 40px;
border-top: 2px rgba(255, 255, 255, 0.2) solid;
background-color: rgba(255, 255, 255, 0.3);
}
.li_comments_toggle {
float: left;
padding-right: 5px;
margin-top: 33px;
margin-left: -30px;
fill: #aaa;
}
#items .items .item .li_comments_toggle {
margin-left: 0px;
}
.li_comments_toggle.has_comments {
fill: #FF5B4D;
}
.line_item_comments .comment_meta.vcard {
float: left;
margin: 10px 10px 10px 0px;
}
.line_item_comments .comment {
display: block;
margin-bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.line_item_comments .comment.highlight {
background-color: #E5E5E5;
padding-left: 15px;
}
.line_item_comments span.comment_date {
float: right;
color: #363B3F;
font-size: 8px;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
padding: 5px 10px; background-color: rgba(255, 255, 255, 0.2);
white-space: nowrap;
}
.line_item_comment_wrap {
width: 100%;
}
.line_item_comment_wrap textarea {
width: 80%;
height: 5em;
padding: 1em;
border: 1px solid #AAA;
}
.line_item_comment_wrap .submit.button {
float: left;
clear: both;
margin: 10px 10px 0px 0px;
}
.dashicons-format-chat:after {
content: 'asdf'; 
}
.paytypes .sa-checkbox {
float: left;
clear: both;
width: 100%;
}
.paytypes .sa-form-field-radio {
float: left;
clear: both;
margin-bottom: 10px;
}
.paytypes span.sa-form-field-radio.clearfix {
display: block;
width: 100%;
}
.paytypes a.cim_delete_card {
display: inline-flex;
align-self: center;
position: relative;
height: 1em;
width: 1em;
}
.paytypes a.cim_delete_card svg {
height: 1em;
width: 1em;
bottom: -0.125em;
position: absolute;
}
.paytypes .row.description {
margin-top: 30px;
padding-top: 30px;
border-top: 1px #ececec solid;
}
.paytypes .row.description {
margin-top: 50px;
padding: 30px 0 15px 0;
border-top: 1px #ececec solid;
text-transform: uppercasel
}
.paytypes .row.description > p {
font-weight: 500;
}
.paytypes input#si_payment_amount_input_option {
float: none;
display: inline-block;
}
.paytypes input#si_payment_amount_input_option {
float: none;
display: inline-block;
}
.paytypes #modify_invoice_start_date_wrap select {
float: none;
} #header_attachments_info {
padding: 0;
padding-top: 0em;
background-color: inherit;
width: 100%;
margin: 2em 0;
}
#header_attachments_info .attachments_info h2 {
font-size: 1.2em;
font-weight: 800;
padding-bottom: 7px;
}
#si_pp_payment_amount .si_pp_option_wrap {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 1.5em;
cursor: pointer;
font-size: 17px;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#si_pp_payment_amount span.payment_amount {
font-size: 1.5em;
font-weight: 800;
}
#si_pp_payment_amount span.payment_desc,
#si_pp_payment_amount span.more_payment_desc {
display: block;
font-size: .7em;
text-transform: uppercase;
}
#si_pp_payment_amount span.more_payment_desc {
font-style: italic;
font-weight: inherit;
opacity: .5;
}
#si_pp_payment_amount .si_pp_option_wrap #modify_deposit_amount_input {
border: 1px solid #d2d2d2;
margin: 5px;
padding-left: 10px;
} #si_pp_payment_amount .si_pp_option_wrap .radiobtn{
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
margin-top: .8em;
} #si_pp_payment_amount .si_pp_option_wrap:hover .radiobtn {
background-color: #ccc;
} #si_pp_payment_amount .radiobtn.selected {
background-color: #4086b0;
} #si_pp_payment_amount .radiobtn:after {
content: "";
position: absolute;
display: none;
} #si_pp_payment_amount .radiobtn.selected:after {
display: block;
} #si_pp_payment_amount .radiobtn:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
} #header #title {
float: right;
text-align: right;
}
#intro #client_info {
margin: 0px 0;
width: 50%;
float: left;
}
.row.content {
margin-bottom: 50px;
}
.row.content p {
font-size: inherit;
margin-bottom: 10px;
}
.history_message {
text-align: center;
}
.history_message a {
border-radius: 2px;
display: inline-block;
padding: 5px 20px;
background-color: #EEE;
font-weight: 200;
color: #000;
opacity: 1;
}
.history_message a:hover {
opacity: 1;
} a.button.edit_shipping_button {
height: auto;
background-color: #EEE;
color: #000 !important;
}
#edit_shipping_checkout_wrap {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #fbfbfb;
}
#edit_shipping_checkout_wrap legend {
padding: 8px 0px;
border-bottom: 1px solid #EEE;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 18px;
}
#edit_shipping_checkout_wrap .sa-form-aligned input,
#edit_shipping_checkout_wrap .sa-form-aligned textarea,
#edit_shipping_checkout_wrap .sa-form-aligned select,
#edit_shipping_checkout_wrap .sa-form-aligned .sa-help-inline,
#edit_shipping_checkout_wrap .sa-form-message-inline {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
#edit_shipping_checkout_wrap .sa-form-aligned textarea {
vertical-align: top;
} #edit_shipping_checkout_wrap .sa-form-aligned .sa-control-group {
margin-bottom: 0.5em;
}
#edit_shipping_checkout_wrap .sa-form-aligned .sa-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
#edit_shipping_checkout_wrap .sa-form-aligned .sa-controls {
margin: 1.5em 0 0 10em;
}
#edit_shipping_checkout_wrap textarea,
#edit_shipping_checkout_wrap input {
padding: .2em .5em;
border: 1px solid #AAA;
}
#edit_shipping_checkout_wrap textarea {
width: 80%;
height: 5em;
}
#edit_shipping_checkout_wrap .button {
float: right;
}
#edit_shipping_checkout_wrap #shipping_address_fields {
margin-bottom: 30px;
}
#doc_address_info {
width: 45%;
float: left;
margin-top: 45px;
}
#doc_address_info .dt_heading {
font-weight: 400;
}