/* Payage 6.04 */

/* Responsive buttons */

div.pg-pay-btn-container {min-width:190px;container-type:inline-size}
button.pg-pay-btn {cursor:pointer;border:1px solid #ccc;border-radius:4px;height:55px;width:100%;
min-width:50px;max-width:750px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;
text-align:center;white-space:nowrap;overflow:hidden}
button.pg-pay-btn img {display:inline-block;vertical-align:middle;margin:0 5px;height:36px;background:transparent;border:none}
button.pg-pay-btn span {vertical-align:middle}
@media (hover:hover) {button.pg-pay-btn:hover {filter: brightness(0.9)}}
@container (max-width:500px) {button.pg-pay-btn {height:45px;font-size:19px} button.pg-pay-btn img {height:32px}}
@container (max-width:400px) {button.pg-pay-btn {height:45px;font-size:18px} button.pg-pay-btn img {height:26px}}
@container (max-width:300px) {button.pg-pay-btn {height:36px;font-size:16px} button.pg-pay-btn img {height:24px}}
@container (max-width:250px) {button.pg-pay-btn {height:35px;font-size:14px} button.pg-pay-btn img {height:22px}}

button.pg-colour-black {background-color:black;border:1px solid black;color:white}
button.pg-colour-white {background-color:white;border:1px solid #ccc;color:black}
button.pg-colour-grey {background-color:#dedede;border:1px solid #ccc;color:black}
button.pg-colour-darkcyan {background-color:darkcyan;border:1px solid #ccc;color:white}
button.pg-colour-lightcyan {background-color:lightcyan;border:1px solid #ccc;color:black}
button.pg-colour-blue {background-color:#1565C0;border:1px solid #ccc;color:white}
button.pg-colour-red {background-color:#e34448;border:1px solid #ccc;color:white}
button.pg-colour-yellow {background-color:#ffc43a;border:1px solid #ccc;color:black}
button.pg-colour-orange {background-color:#f39331;border:1px solid #ccc;color:white}
button.pg-colour-gold {background-color:#C39B00;border:1px solid #ccc;color:white}
button.pg-colour-green {background-color:#215d24;border:1px solid #ccc;color:white}
button.pg-colour-brown {background-color:#844a1f;border:1px solid #ccc;color:white}

/* button layouts */

.pg-btn-inline {display:inline-block;margin:5px;vertical-align:top}
table.pg-btn-tbl td  {padding:5px}

div.pg-btn-table     {display:table;width:100%}
div.pg-btn-row       {display:table-row}
div.pg-btn-left      {display:table-cell;vertical-align:top;width:50%;padding:10px 2% 10px 0;text-align:right}
div.pg-btn-right     {display:table-cell;vertical-align:top;width:50%;padding:10px 0 10px 2%}
@media screen and (max-width:600px) { 
    div.pg-btn-row   {display:block}
	div.pg-btn-left  {display:block;text-align:center;width:100%;padding:10px 0 10px 0}
	div.pg-btn-right {display:block;text-align:center;width:100%;padding:10px 0 10px 0}
}

div.pg-btn-box form  {margin:0;padding:0}
div.pg-btn-box-desc  {font-family:Verdana;font-size:13px;font-weight:normal;background-color:white;padding:4px;margin-bottom:5px}
div.pg-btn-box-outer {display:flex;flex-wrap:wrap;margin-bottom:10px}
div.pg-btn-box-3     {width:calc((100% / 3) - 10px);box-sizing:border-box;margin:10px 5px;padding:7px}
div.pg-btn-box-2     {width:calc((100% / 2) - 10px);box-sizing:border-box;margin:10px 5px;padding:7px}
@media (max-width: 1000px) {
    div.pg-btn-box-3 {width:calc((100% / 2) - 10px)}
}
@media (max-width: 800px) {
    div.pg-btn-box-2 {width:100%}
    div.pg-btn-box-3 {width:100%}
}
div.pg-border       {background-color:#f9f9f9;border:1px solid lightgray;border-radius:3px}
div.pg-btn-box-outer.pg-border div.pg-btn-box {background-color:white}

/* image buttons */

form.pb-form input[type="image"] {border-radius:5px;background:#edeeee;
    background: linear-gradient(to bottom, #fff 0%, #f6f6f6 47%, #ededed 100%);
    transition: box-shadow .28s linear}
form.pb-form input[type="image"]:hover {box-shadow:inset 0px 0px 0px 3px rgb(0 0 0 / 30%)}

/* invoice request page */

.pg-invoice-form {box-sizing:border-box;width:100%;max-width:600px;padding:10px;margin:10px 0;background-color:#f1f1f1;border-radius:3px}
.pg-form {max-width:600px}
.pg-form-row {margin-bottom:0.5em}
.pg-form-btn-row {margin:1em;text-align:center}
.pg-form label {float:left;width:200px;vertical-align:top;margin-top:5px;color:#277ac2}
.pg-form input[type="text"], .pg-form textarea 
    {width:100%;border-radius:3px;vertical-align:middle;box-sizing:border-box;margin:0;
     font-family:monospace,sans-serif;font-size:1em;padding:.4em;border:1px solid #B3B3B3;transition:border-color 0.3s ease 0s}
.pg-form input[type="text"] {height:32px}
.pg-form input:hover, .pg-form textarea:hover, .pg-form input:focus, .pg-form textarea:focus {outline:none;border:1px solid #0079C1}
.pg-form input:read-only, .pg-form textarea:read-only {background-color:#efefef;border:1px solid #B3B3B3}
.pg-form-error {font-size:small;color:#277ac2}

button.pg-btn {background-color:#0079C1;border:none;box-shadow:none;vertical-align:middle;
    padding:0 2em;text-align:center;transition:all .15s;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.33);font-size:1em;color:white;cursor:pointer;-webkit-appearance:none}
button.pg-btn:hover, button.pg-btn:focus {filter:brightness(0.9);border:none;outline:none}
button.pg-btn:disabled, button.pg-btn:disabled:hover {background-color:darkgray;filter:brightness(1);cursor:default}
button.pg-btn-update {padding:0 2em 0 3em}
button.pg-btn-update::after {content: ' ';display:inline-block;margin-left:1em;height:1em;width:.375em}
button.pg-btn-update.pgj-saved::after {
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
}

.pg-invoice-ok {background-color:#E8F5E9;border:1px solid #1B5E20;border-radius:3px;padding:10px;margin:25px 0;text-align:center}
.pg-invoice-no-changes {background-color:#FFEBEE;border:1px solid #E91E63;border-radius:3px;padding:10px;margin:25px 0;text-align:center}

.pg-btn {height:40px;border-radius:3px}  
@media screen and (max-width:600px) {
    .pg-btn {width:100%;margin:2px auto}
}

/* invoices */

.pg-invoice {font-family:Helvetica}
.pg-invoice-hdr {background-color:#009688;color:white;padding:10px;border-radius:6px}
.pg-invoice-hdr h1, .pg-invoice-hdr h2 {color:white}
.pg-right {float:right;text-align:right}
.pg-left  {text-align:left}
.pg-invoice h1 {font-size:3em;font-weight:bold;text-align:center;margin:0}
.pg-invoice h2 {font-size:1.5em;font-weight:bold}
.pg-invoice table {width:100%;border:1px solid #444444;border-collapse:collapse}
.pg-invoice table tr {background-color:#FAFAFA}
.pg-invoice table th {border:1px solid #444444;padding:4px;background-color:#424242;color:white}
.pg-invoice table td {border:1px solid #444444;padding:4px}