@font-face {
    font-family:open sans;
    src:url(../fonts/opensans-400.woff2) format('woff2'),
        url(../fonts/opensans-400.woff) format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
body, input, select, .ui-widget {
    font-family:open sans,helvetica neue,Helvetica,Arial,sans-serif!important;
    line-height:1.5;
    color:#636363;
    font-size:14px;
}
body {
    background:#F7F7F7;
}
.clear {
    clear:both;
}
.hide {
    display:none;
}
.hidden {
    visibility:hidden;
    height:1px;
}

#loading {
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:2;
}
#loading img {
    position:absolute;
    top:20%;
    left:40%;
    border:solid 2px #333;
}

#notification, #notificationperm {
    background-color:#04AA6D;
    min-width:250px;    
    color:#fff;
    text-align:center;
    border-radius:2px;
    padding:16px;
}
#notification {
    visibility:hidden;
    position:fixed;
    z-index:1;
    top:30px;
}
#notification.error, #notificationperm.error {
    background-color:#cc3300!IMPORTANT;
}
#container #notification {
    right:2%;
}
#login #notification {
    margin-left:35px;
}
#notificationperm {
    margin-bottom:10px;
}
#notificationperm a {
    color:#fff;
}
#notification.show {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
}
#notification.showperm {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s;
    animation:fadein 0.5s;
}

/* Animations to fade the notification in and out */
@-webkit-keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

@keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

.ui-datepicker .ui-widget-header, .ui-datepicker .ui-state-default {
    background:#bcecff;
}
.ui-datepicker .ui-datepicker-today .ui-state-default {
    background:#ffd025;
    color:#000;
}

#tabs, .bestsellers {
    background:none;
    border:0;
}
#tabs ul, .bestsellers ul {
    padding-left:0;
    background:none;
    border:0;
}
#tabs li, .bestsellers li {
    float:left;
    display:inline-block;
    list-style:none;
    padding:10px;
    border:0;
    background:none;
}
#tabs li a, .bestsellers li a {
    color:inherit;
    text-decoration:none;
}

#login {
    max-width:400px;
    background-color:#ffffff;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin:30px auto 10px auto;
}
#login h1 {
    text-align:center;
    color:#5b6574;
    font-size:24px;
    padding:20px 0 20px 0;
    border-bottom:1px solid #dee0e4;
}
#login form {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:20px;
}
#login form label {
    display:flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    background-color: #024638;
    color:#ffffff;
}
#login form input[type="password"], #login form input[type="text"] {
    width:310px;
    height:50px;
    border:1px solid #dee0e4;
    margin-bottom:20px;
    padding:0 15px;
}
#login form input[type="submit"] {
    width:100%;
    padding:15px;
    margin-top:20px;
    background-color: #024638;
    border:0;
    cursor:pointer;
    font-weight:bold;
    color:#ffffff;
    transition:background-color 0.2s;
}
#login form input[type="submit"]:hover {
    background-color:#009b7b;
    transition:background-color 0.2s;
}
#login form input[type="submit"].disabled, #login form input[type="submit"].disabled:hover {
    background-color:#ccc!important;
    color:#d70505!important;
    cursor:initial;
}

#login-extra-link {
    margin:20px 0;
    text-align:center;
}
#login-extra-link a {
    color:#636363;
}
#login-extra-link a:hover {
    font-weight:bold;
}
#login.reset p {
    padding:0 10px;
    margin:0;
    text-align:center;
}
#login.reset .show-passwords {
    font-style:italic;
    font-size:12px;
}
#login.reset .show-passwords:hover {
    cursor:default;
}
#login.reset .password-help strong {
    display:inline-block;
    margin-bottom:10px;
}
#login.reset .password-help ul {
    margin:0;
}
#login.reset .g-recaptcha {
    margin-top:15px;
}
#login.reset input:disabled {
    background-color:#eee;
}
#login.reset input:disabled:hover {
    cursor:not-allowed;
    background-color:#eee;
}
#login.reset #notificationperm {
    position:initial;
    visibility:visible;
    margin-top:10px;
}
#login.reset #notificationperm.error {
    background-color:#cc3300!IMPORTANT;
}
#login.reset.confirmation #notificationperm a {
    color:#fff;
    font-weight:bold;
}

#container, .container {
    max-width:1200px;
    margin:0 auto;
    .title {
        text-align: center;
        margin: 0
    }
}

#header a {
    text-decoration:none;
    color:#636363;
}
#header a:hover {
    color:#000;
}
#header .subtitle {
    margin-top:0;
    font-style:italic;
}
#header {
    h1 {
        font-size: 20px;
    }
}

#top-menu {
    float:right;
    font-size:14px;
    font-weight:normal;
    margin-block-start:0.67em;
}
#top-menu span, #top-menu a {
    padding:5px 10px;
    margin-left:10px;
    color:#fff;
    border-radius:3px;
}
#top-menu i {
    margin-right:10px;
}
#top-menu a {
    background:#024638;
    border: solid 1px #024638;
    text-decoration:none;
}
#top-menu a:hover {
    cursor:pointer;
    background:#009b7b;
    font-weight:bold;
}
#top-menu span#logout {
    background:#333;
    border:solid 1px #333;
}
#top-menu span#logout:hover {
    cursor:pointer;
    background:#000;
    font-weight:bold;
}

#filters #customer_address {
    max-width:600px;
}
#filters #filterbtn {
    width:100%;
    margin-top:10px;
    color:#fff;
    background:#024638;
    border:solid 1px #024638;
    border-radius:3px;
}
#filters #filterbtn:hover {
    cursor:pointer;
    background:#009b7b;
    font-weight:bold;
}

#summary {
    display:flex;
    gap:10px;
}
#summary .summary-box {
    width:100%;
    padding:10px;
    text-align:center;
    border:solid 1px #333;
    border-radius:3px;
}
#summary .summary-box p.header {
    font-size:1.5em;
    font-weight:bold;
    margin:0 0 0.5em 0;
}
#summary .summary-box p.header span {
    font-weight:normal;
    font-size:14px;
}
#summary .summary-box p.overall {
    font-weight:bold;
}
#summary .summary-box img {
    max-width:60px;
    width:100%;
    margin:0 auto;
    display:block;
}
#summary .summary-box img.summary-logo {
    max-width:200px;
    margin-bottom:10px;
}
#summary .summary-box img.summary-logo[src="/images/logo-store-23.jpg"] {
    max-width:120px;
}
#summary .summary-box img.summary-logo[src="/images/logo-store-39.jpg"] {
    max-width:150px;
}
#summary .summary-box .fa-solid {
    color:#fff;
    margin-right:10px;
}
#summary .summary-box .red .fa-solid, #summary .summary-box .green .fa-solid, #summary .summary-box .neutral .fa-solid {
    margin-left:2px;
    margin-right:3px;
}
#summary .summary-box .red .fa-solid {
    color:#ff0000;
}
#summary .summary-box .green .fa-solid {
    color:#008000;
}
#summary .summary-box .sites {
    display:flex;
    gap:1%;
}
#summary .summary-box .sites .site {
    width:100%;
}
#summary #today {
    background:#8962E1;
    color:#fff;
}
#summary #week {
    background:#ff6384;
    color:#fff;
}
#summary #month {
    background:#4bc0c0;
    color:#fff;
}
#summary #year {
    background:#f98f35;
    color:#fff;
}
@media (min-width:901px) {
    #summary .flex-break {
        display:none;
    }
}
@media (max-width:900px) {
    #summary {
        flex-wrap:wrap;
    }
    #summary .summary-box {
        width:46%;
    }
    #summary .flex-break {
        flex-basis:100%;
        height:0;
    }
}
@media (max-width:720px) {
    #summary .summary-box {
        width:100%;
    }
}

#order-graphs {
    display:none;
    margin-top:30px;
    background:#fff;
    border:solid 1px #333;
    border-radius:3px;
    padding:20px 0;
}
#order-graphs #tabs {
    padding:0 20px;
}
#order-graphs #tabs ul {
    border-bottom:solid 1px #ddd;
}
#order-graphs #tabs li {
    font-size:1.3em;
}
#order-graphs #tabs li.ui-state-hover {
    border-top:solid 2px #000;
    padding-top:8px;
    background:#f9f9f9;
}
#order-graphs #tabs li.ui-state-active {
    border-top:solid 2px #d12e26;
    padding-top:8px;
    background:#eee;
    color:inherit;
}
#order-graphs #tabs i {
    margin-right:10px;
}
#order-graphs canvas {
    padding:0;
}

#sales-data, #users {
    margin-top:30px;
    background:#fff;
    padding:20px;
    border:solid 1px #333;
    border-radius:3px;
}
#sales-data .datatable-header h2 {
    margin-bottom:0;
}
#sales-data .datatable-header h2, #sales-data .datatable-header p {
    text-align:center;
    margin-top:0;
}
#sales-data .datatable-daterange {
    float:left;
    margin-left:10px;
}
#sales-data .datatable-sort {
    float:left;
    margin-left:20px;
}
#sales-data .datatable-daterange #sales-daterange .header, #sales-data .datatable-sort #sales-sortby label {
    font-size:16px;
    font-weight:bold;
}
#sales-data .datatable-daterange #sales-daterange .inputs {
    display:inline-block;
    margin-top:10px;
}
#sales-data .datatable-sort #sales-sortby select {
    padding:3px;
    margin-top:9px;
}
#sales-data .dataTables_length {
    margin-top:6px;
    margin-left:10px;
    border-left:solid 1px #ccc;
    padding-left:10px;
}
.dt-buttons {
    float:right!important;
    margin-top:20px;
}
.dt-button {
    background-color:#36a2eb33!important;
    font-family:'open sans';
    font-size:14px!important;
}
#sales-data th input, #sales-data th select,
#users th input {
    width:100%;
}
#sales-data th select {
    padding:2px;
}
::placeholder {
    color:#ddd;
    opacity:1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    color:#ddd;
}
/*#sales-data th:not(:last-child),
#sales-data td:not(:last-child),*/
#sales-data .order_no, #sales-data .order_date {
    white-space:nowrap;
}
#sales-data td, #users td {
    font-size:14px;
}
#sales-data td img {
    max-width:50px;
}
#sales-data #salestable, #users #userstable {
    width:100%;
}
#sales-data #salestable i, #users #userstable i {
    margin-left:10px;
}
#users #userstable a {
    color:#1e3050;
}
#users #userstable a:hover {
    color:#000;
}
#sales-data #salestable i:hover {
    cursor:pointer;
    color:#d12e26;
}
@media (max-width:640px) {
    #sales-data .dt-buttons {
        margin-top:20px;
    }
}

#products {
    gap:20px;
    display:none;
}
#products .bestsellers {
    flex:1 1 0px;
    background:#fff;
    padding:0 10px;
    margin-top:30px;
    border:solid 1px #333;
    border-radius:3px;
}
#products .bestsellers ul {
    border-bottom:solid 1px #eee;
}
#products .bestsellers li {
    border-left:0!important;
    border-right:0!important;
}
#products .bestsellers li:not(.ui-state-active) {
    border:0;
    padding-top:2px;
    background:0;
}
#products .bestsellers li.ui-state-hover {
    border-top:solid 2px #000;
    padding-top:0;
    background:#f9f9f9;
}
#products .bestsellers li.ui-state-active {
    background:#eee;
}
#products .bestsellers li.jangro.ui-state-active {
    border-top:solid 2px #00529f;
}
#products .bestsellers li.savills.ui-state-active {
    border-top:solid 2px #ffdf00;
}
#products .bestsellers li a {
    color:#636363!important;
}
#products .bestsellers .ui-tabs-panel {
    padding:0;
}
#products .bestsellers .product {
    display:flex;
    gap:20px;
    margin-bottom:10px;
    padding:10px;
    border-bottom:solid 1px #ddd;
}
#products .bestsellers .product:last-child {
    border-bottom:0;
}
#products .bestsellers .product-row.prev_year {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;
}
#products .bestsellers .product-row.prev_year .product {
    flex-direction:column;
    flex-basis:100%;
    flex:1;
    text-align:center;
    margin:10px 0;
    border-bottom:0;
}
#products .bestsellers .product .fa-solid {
    margin-right:5px;
}
#products .bestsellers h2 {
    text-align:center;
    margin-bottom:0;
}
#products .bestsellers .header {
    text-align:center;
    margin-top:0;
}
#products .bestsellers .product p {
    margin:0;
}
#products .bestsellers .product img {
    max-width:50px;
    max-height:50px;
    border:solid 1px #ddd;
    padding:5px;
}
#products .bestsellers .product .sku {
    font-weight:bold;
}
#products .bestsellers .product .title {
    font-style:italic;
}
#products .bestsellers .product a {
    text-decoration:none;
}

@media (min-width:901px) {
    #products .flex-break {
        display:none;
    }
}
@media (max-width:900px) {
    #products {
        flex-wrap:wrap;
    }
    #products .bestsellers {
        width:46%;
    }
    #products .flex-break {
        flex-basis:100%;
        height:0;
    }
}
@media (max-width:720px) {
    #products .bestsellers {
        width:100%;
    }
}

#users p {
    margin-top:0;
}
#users .flexbox {
    display:flex;
    margin-bottom:20px;
}
#users .flexbox div {
    flex-grow:1;
}
#users .flexbox div label {
    display:inline-block;
    margin-bottom:5px;
    font-weight:bold;
}
#users .flexbox div label span {
    font-weight:normal;
}
#users .flexbox div select {
    padding:2px;
}
#users #buttons {
    margin-top:20px;
    display:flex;
    gap:10px;
}
#users #buttons input, #users #buttons a {
    width:50%;
    padding:5px 10px;
    color:#fff;
    border-radius:3px;
    flex-grow:1;
}
#users #buttons input {
    background:#024638;
    border:solid 1px #024638;
}
#users #buttons a {
    display:inline-block;
    background:#333;
    border:solid 1px #333;
    text-decoration:none;
    text-align:center;
}
#users #buttons input:hover, #users #buttons a:hover {
    cursor:pointer;
    font-weight:bold;
}
#users #buttons input:hover {    
    background:#00529f;
}
#users #buttons a:hover {    
    background:#000;
}
#users #editpasswordform {
    border-top:solid 1px #ddd;
    padding-top:30px;
    margin-top:30px;
}

#copyright {
    margin:20px 0;
    text-align:center;
}

img.logo {
    margin: 0 auto;
    display: block;
    max-width: 260px;
}