/* Milligram overrides */
:root {
    /* The following are official CakePHP colors */
    --color-cakephp-red: #d33c43;
    --color-cakephp-gray: #404041;
    --color-cakephp-blue: #2f85ae;
    --color-cakephp-lightblue: #34bdd7;

    /* These are additional colors */
    --color-lightgray: #606c76;
    --color-white: #fff;

    --color-main-bg: #f5f7fa;
    --color-links: var(--color-cakephp-blue);
    --color-links-active: #2a6496;
    --color-headings: light-dark(#363637,#cfcfcf);

    --color-message-success-bg: #e3fcec;
    --color-message-success-text: #1f9d55;
    --color-message-success-border: #51d88a;

    --color-message-warning-bg: #fffabc;
    --color-message-warning-text: #8d7b00;
    --color-message-warning-border: #d3b800;

    --color-message-error-bg: #fcebea;
    --color-message-error-text: #cc1f1a;
    --color-message-error-border: #ef5753;

    --color-message-info-bg: #eff8ff;
    --color-message-info-text: #2779bd;
    --color-message-info-border: #6cb2eb;
}

.l {text-align:left;}
.c {text-align:center;}
.r {text-align:right;}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--color-cakephp-red);
    border-color: var(--color-cakephp-red);
}

body {
 font-family: "Open Sans", Helvetica, Arial, sans-serif;
 font-weight: 400;
 background: light-dark(var(--color-main-bg),#333);
 color: light-dark(var(--color-lightgray),white);
}

#cssmode {cursor:pointer;width:20px;}

.top-nav-links,
.side-nav,
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--color-headings);
}
h1 { font-size:20px; margin-bottom:15px; }

hr { margin:15px 0; }

a {
    color: var(--color-links);
    transition: color 0.2s linear;
}

a:hover,
a:focus,
a:active {
    color: var(--color-links-active);
    transition: color 0.2s ease-out;
    text-shadow: 1px 1px 2px #ccc;
}

label {font-size:unset;font-weight:normal;}

.side-nav a,
.top-nav-links a,

.actions a {
    color: var(--color-lightgray);
}
th a {color:white;}

.side-nav a:hover,
.side-nav a:focus,
.actions a:hover,
.actions a:focus {
    color: var(--color-links-active);
}

/* Utility */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Main */
.content {
    padding: 2rem;
    background: var(--color-white);
    border-radius: 0.4rem;
    /* Thanks Stripe */
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
        0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
form {
    margin: 0;
}
.actions a {
    font-weight: bold;
    padding: 0 0.4rem;
}
.actions a:first-child {
    padding-left: 0;
}
th {
    white-space: nowrap;
}
.nw {white-space: nowrap;}

td, th {
 border-bottom: 0.1rem solid light-dark(#e1e1e1,black);
 padding: 0.5rem;
 font-size:1.2rem;
}

/* Nav bar */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 1rem 1rem;
    margin: 0 auto;
}
.top-nav-title a {
    font-size: 2.4rem;
    color: var(--color-cakephp-red);
}
.top-nav-title span {
    color: var(--color-cakephp-gray);
}
.top-nav-links a {
    margin: 0 0.5rem;
}
.top-nav-links a:hover {
 color:var(--color-links-active);
 text-shadow: 1px 1px 2px #ccc;
}
.top-nav-title a,
.top-nav-links a {
    font-weight: bold;
}
.side-nav-item {
    display: block;
    padding: 0.5rem 0;
}

/* View action */
.view.content .text {
    margin-top: 1.2rem;
}
.related {
    margin-top: 2rem;
}

/* Flash messages */
.message {
    padding: .5rem 1rem;
    background: var(--color-message-info-bg);
    color: var(--color-message-info-text);
    border-color: var(--color-message-info-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 1rem;
    cursor: pointer;
}
.message.hidden {
    display: none;
}
.message.success {
    background: var(--color-message-success-bg);
    color: var(--color-message-success-text);
    border-color: var(--color-message-success-border);
}
.message.warning {
    background: var(--color-message-warning-bg);
    color: var(--color-message-warning-text);
    border-color: var(--color-message-warning-border);
}
.message.error {
    background: var(--color-message-error-bg);
    color: var(--color-message-error-text);
    border-color: var(--color-message-error-border);
}

/* Forms */
.input.radio,
.input.checkbox,
.input.multicheckbox {
    margin-bottom: 2.0rem;
}
.input.radio input,
.input.checkbox input,
.input.multicheckbox input {
    margin: 0;
}
.input.radio label,
.input.checkbox label,
.input.multicheckbox label {
    margin: 0;
    display: flex;
    align-items: center;
}
.input.radio label > input,
.input.checkbox label > input,
.input.multicheckbox label > input {
    margin-right: 1.0rem;
}
input[type='color'] {
    max-width: 4rem;
    padding: 0.3rem .5rem 0.3rem;
}

/* Paginator */
.paginator {
    text-align: right;
}
.paginator p {
    margin-bottom: 0;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    /* margin: 0 0 1rem 0; */
    padding: 0;
}
.pagination li {
    display: inline-block;
    /* margin: 0.25em; */
    text-align: center;
    margin-bottom:0px;
}
.pagination a {
    color: var(--color-cakephp-blue);
    display: inline-block;
    font-size: 1.25rem;
    /* line-height: 3rem; */
    min-width: 3rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: background .3s,color .3s;
}
.pagination li.active a,
.pagination a:hover {
    text-decoration: underline;
}
.pagination .disabled a {
    cursor: not-allowed;
    color: var(--color-lightgray);
    text-decoration: none;
}
.first a,
.prev a,
.next a,
.last a {
    padding: 0 .75rem;
}
.disabled a:hover {
    background: initial;
    color: initial;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

/* Error in non debug mode */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.main .container {
 max-width:none;
}

.col_main {margin-left:210px;border:1px solid light-dark(#ddd,#777);border-radius:5px;}
.col_header {border-top-left-radius:5px;border-top-right-radius:5px;background-color:light-dark(#eee,#555);padding-left:4px;}

#multi_stars {cursor:not-allowed;}
#multi_stars.active {border:1px solid black;background-color:light-dark(white,gray);border-radius:3px;cursor:pointer;}

table.orders {border-spacing:2px;}
table.orders th {
 background-color: gray;
 color:white;
 font-size: 12px;
 font-weight: bold;
 padding: 0px 4px;
 border:none;
 border-radius:2px;
}
table.orders td {
 padding:1px;
 font-size:11px;
}
table.orders tr.selected td {background-color:light-dark(#f0f0ff,#6e6e6e);}
table.orders td.star {font-size:20px;cursor:pointer;padding:0px;}
.star-0 {color:#aaa;text-shadow:none;}
.star-1 {color:orange;/* text-shadow:0px 0px 1px black; */}
.star-2 {color:black;text-shadow:none;}
.star-3 {color:#11f400;text-shadow:none;}
.star-4 {color:#00b6ff;text-shadow:none;}
.star-5 {color:red;text-shadow:none;}

.icon-payment img {width:14px;padding:0px;}
.icon-shipping img {width:14px;}
.icon-invoice {font-weight:bold;color:white;}
.icon-payment, .icon-shipping, .icon-invoice {background-color:lightgray;border-radius:3px;padding:1px;margin-top:2px;width:16px;height:16px;line-height:14px;display:inline-block;text-align:center;font-size:14px;vertical-align:bottom;}
.icon-payment.s1 { background-color:#f7692a; }
.icon-shipping.s1 { background-color:#0053ff; }
.icon-payment.s2,
.icon-shipping.s2,
.icon-invoice.s2 { background-color:#00a563; }

.icon-payment.paid {background-color:green;}
.icon-payment.cod {background-color:orange;}
.icon-payment.partial {background-color:hotpink;}
.icon-payment.unpaid {}
.icon-payment.overpaid {background-color:blueviolet;}

.icon-shipping.unshipped {}
.icon-shipping.shipped {background-color:blue;}
.icon-shipping.shipped-more {background-color:cyan;}
.icon-shipping.delivered {background-color:green;}
.icon-shipping.stale {background-color:orange;}

.col_header .icon {vertical-align:center;}

.status_button {color:white;padding:0px 5px;text-align:center;display:inline-block;border-radius:10px;}

.status_list {font-size:12px;}
.status_list span { padding:0px 1px;margin-right:3px; }
.status_list div { margin-bottom:3px; cursor:pointer; }
.status_list a {display:block;margin-bottom:3px;}
.status_list a.star {display:inline-block;font-size:20px;}
.status_list a.star .selected {text-decoration:underline;}
.status_list a.email {color:white;background-color:black;border-radius:4px;display:inline-block;padding:0 3px;font-weight:bold;}
.status_list a.email img {width:20px;margin-bottom:-2px;}

.status_list a.icon,
.status_list a.wariant24h {display:inline-block;}
.status_list a.icon > span { padding:1px; }
.status_list a.icon.active > span { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1); }
.status_list a.active.wariant24h { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1); }

#dialog_stars span {font-size:32px;cursor:pointer;border:1px solid #ddd;padding:0px 4px;border-radius:4px;}

.frame {
 background-color:light-dark(white,#555);
 border-radius:5px;
 box-shadow: 1px 1px 5px 1px light-dark(gray,black);
 padding:0px 10px 4px 10px;
}
.frame > .title {
 margin-left:-10px;
 margin-right:-10px;
 margin-bottom:3px;
 border-radius:5px 5px 0px 0px;
 padding-left:4px;
 color:light-dark(black,white);
 background-color:light-dark(#ddd,#333);
 position:relative;
}
.frame > .title > .btn { padding:0 5px; position:absolute;right:0px;top:0px;cursor:pointer; }
.frame > .title > .btn:hover { color: var(--color-links-active); }
.frame.informacje {position:relative;}
.frame.informacje .tag-sat{position:absolute;bottom:2px;left:2px;width:20px;height:20px;padding:0;}

table.sm tr td,table.sm tr th,tr td.sm { font-size:9px; }
table.products {border-spacing:3px;}
table.products td, table.products th {border-bottom:2px solid #ccc;}
table.products td {padding:8px;}
table.products th {padding:3px; color:#333; text-transform: capitalize; font-size:0.9em; }
table.products td.total { border-top:2px solid black; border-bottom:none; font-weight:bold; }
table.products tr.zero td {text-decoration: line-through;}
div.zero {text-decoration: line-through;color:lightgray;}
table.order-history tr td { font-size:9px; }
table.order-history tr th { font-size:9px; }
table.order-payments span.paid-exact {font-weight:bold; color:#00CF00;}
table.order-payments span.paid-less {font-weight:bold; color:#FF9F9F;}
table.order-payments span.paid-more {font-weight:bold; color:#007FFF;}
table.order-payments span.paid-not {font-weight:bold; color:#FF0000;}
.payment-amount {font-size:15px;}

table {margin:0px;}
table tr td.clean {border:none;}

table.clean {}
table.clean tr {}
table.clean tr.sep td { border-top:1px solid gray; }
table.clean tr th {padding:4px;border:none;}
table.clean tr td {padding:4px;border:none;}
table tr td.prompt {color:light-dark(black,white);font-size:0.8em;text-align:right;}

table.order_billing_address .diff {background-color:light-dark(#ffffe0,#a6a67a);}
table.order_billing_address .has_nip {background-color:orange;}

table.framed {border-spacing:0;border-collapse:collapse;}
table.framed tr td {border:1px solid light-dark(#555,#AAA); padding:3px;}
table.framed tr th {border-bottom:1px solid light-dark(#555,#AAA); padding:0px 3px;}

td.data span.data {cursor:pointer;}
td.data img {width:12px;height:12px;margin-left:3px;}

#dialog_shipment div.paczki {border:1px solid #dddddd; border-radius:10px; background-color:#f7f7f7; }
#dialog_shipment div.paczki input {background-color:white;}
#dialog_shipment button { color:#7298db; background-color:white; border-color:#7298db; }
#dialog_shipment button:hover { color:white; background-color:#7298db; }

#dialog_satisfaction .face img {width:40%;margin:3%;cursor:pointer;}
.noclose .ui-dialog-titlebar-close { display:none; }

span.light {color:lightgray;}

div.input label { display:inline-block; margin:0px;font-size:12px; }
input, select, textarea
{
 margin-bottom: 0;
}
select {width:auto;}
textarea {display:block;height:unset;}
div.textarea {margin-bottom:3px;}
input.tiny { width:30px; }
input.smaller { width:40px; }
input.small { width:60px; }
input.med { width:80px; }
input.wide { width:100px; }
input.wider { width:120px; }
input.big { width:150px; }
input.bigger { width:180px; }
input.huge { width:250px; }

.button, button {margin-bottom:0;padding:0 1em;}
button.small {padding:4px;line-height:normal;height:auto;}
button.transparent {background-color:transparent;border-color:#d1d1d1;color:#d1d1d1;}
button.blue {background-color:#4574cc;border-color:#4574cc;}

#mail_form input,
#mail_form textarea {margin-bottom:3px;}

div.email .header {padding:0px 5px;border-radius:4px 4px 0 0;background-color:#f8f8f8;margin-bottom:2px;position:relative;}
div.mail-sent .body {background-color:#eaf8fc;}
div.mail-received .body {background-color:#fcf1d9;}
div.email .header div {display:inline-block;}
div.email .header .date {font-size:0.7em;font-weight:bold;}
div.email .header .address {font-size:0.8em;font-weight:bold;margin-right:1em;}
div.email .header .subject {font-size:0.9em;margin-left:2px;color:black;font-weight:bold;margin-right:1em;}
div.email .header .prompt {font-size:0.7em;margin-right:0.3em;}
div.email .header .user {display:block;float:right; font-size:0.7em;}
div.email {margin:0px -7px;color:var(--color-lightgray);}
div.email .body {padding-left:10px;padding-right:4px;margin-bottom:6px;border-radius:0 0 7px 7px;}

table.mails-list tr.mail-received td {background-color:#EEFFFF;}
table.mails-list tr.mail-sent td {background-color:#EEEEFF;}
table.mails-list tr.mail-tosend td {background-color:#FFFFEE;}
table.mails-list tr td {color:black;}

#read_mail {position:absolute;right:0px;top:-5px;}
.read-mail {cursor:pointer;color:white;background-color:red;border-radius:3px;font-size:10px;padding:1px 2px;}
div.email .header .reader {background-color:#10994a;color:white;font-size:10px;padding:0 2px;}
div.email .header .time {font-size:8px;}

.u-klienta {background-color:yellow;color:red;border:1px solid black;border-radius:2px;font-weight:bold;}
span.u-klienta-status {border-radius:2px;padding:0px 2px;font-weight:bold;color:black;}

div.changelog {font-size:8px;color:gray;margin-top:4px;line-height: 9px;}

.wariant24h {background-color:#473d7d;color:white;border-radius:3px;padding:0 2px;}
.outlet {background-color:#e23939;color:white;border-radius:3px;padding:0 2px;}

.filters .labeled { display:inline-block;position:relative; }
.filters .labeled label { position:absolute;left:10px;top:-5px;font-size:8px;background-color:light-dark(var(--color-main-bg), #333); }

table.sales_report tr.brands td {font-size:0.7em;color:light-dark(#555,#aaa);background-color:light-dark(#eee,#111);padding:1px;}

@media screen and (max-width: 640px) {
    /* Fix milligram not having a responsive column system */
    .row .column[class*='column-'] {
        flex: 0 0 100%;
        max-width: 100%
    }
    .top-nav {
        margin: 0 auto;
    }
    .side-nav {
        margin-bottom: 1rem;
    }
    .heading {
        margin-bottom: 1rem;
    }
    .side-nav-item {
        display: inline;
        margin: 0 1.5rem 0 0;
    }
    .asc:after {
        content: " \2192";
    }
    .desc:after {
        content: " \2190";
    }
}