@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, button, .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;
}
h1 {
    text-align:center;
    color:#5b6574;
    font-size:24px;
    padding:20px 0 20px 0;
    border-bottom:1px solid #dee0e4;
}

/* Header and Logout */
#header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header-container .header-left, 
#header-container .header-right {
    flex: 1;
}
#logo {
    text-align: center;
}
#logout-link {
    color: #024638;
    font-size: 24px;
    text-decoration: none;
    margin-right: 20px;
    transition: color 0.2s;
    float: right;
}
#logout-link:hover {
    color: #03694f;
}

#notification, #notificationperm {
    background-color:#04AA6D;
    min-width:250px;    
    color:#fff;
    text-align:center;
    border-radius:2px;
    padding:16px;
    visibility:hidden;
    position:fixed;
    z-index:100;
}
#notification.error, #notification .error {
    background-color:#cc3300!IMPORTANT;
}
#container #notification, #container #notificationperm {
    top:auto;
    bottom:30px;
    left:0;
    right:0;
}
#login #notification {
    margin-left:35px;
    top:30px;
    bottom:auto;
    left:auto;
    right:auto;
}
#container #notification.warning, #container #notificationperm.warning {
    position:inherit;
    visibility:visible;
    background-color:#e7bd26!IMPORTANT;
}
#login #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 3s;
    animation:fadein 0.5s, fadeout 0.5s 3s;
}
#container #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:fadein2 0.5s, fadeout2 0.5s 6s;
    animation:fadein2 0.5s, fadeout2 0.5s 6s;
}

/* 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 fadein2 {
    from {
        bottom:0;
        opacity:0;
    }
    to {
        bottom:30px;
        opacity:1;
    }
}

@keyframes fadein2 {
    from {
        bottom:0;
        opacity:0;
    }
    to {
        bottom: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;
    }
}

@-webkit-keyframes fadeout2 {
    from {
        bottom:30px;
        opacity:1;
    }
    to {
        bottom:0;
        opacity:0;
    }
}

@keyframes fadeout2 {
    from {
        bottom:30px;
        opacity:1;
    }
    to {
        bottom:0;
        opacity:0;
    }
}

/*LOGIN*/
#login {
    max-width:400px;
    background-color:#ffffff;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin:10px auto;
}
#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 {
    max-width:1200px;
    margin:50px auto 0 auto;
    padding:50px;
    background:#fff;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.3);
}

#container.thankyou, #container #logo {
    text-align:center;
}
#container #logo img {
    width:260px;
}

#container.thankyou p {
    font-size:1.5em;
    font-weight:bold;
}

#container #delivery {
    padding:20px;
    border:solid 1px #333;
    border-radius:3px;
}
#container #delivery .datatable-header h2 {
    margin-bottom:0;
    padding: 0.5rem 0 1.5rem 0;
}
#container #delivery .datatable-header h2, #container #delivery .datatable-header p {
    text-align:center;
    margin-top:0;
}
#container #delivery .datatable-daterange {
    float:left;
    margin-left:10px;
}
#container #delivery .datatable-sort {
    float:left;
    margin-left:20px;
}
#container #delivery .datatable-daterange #delivery-daterange .header, #container #delivery .datatable-sort #delivery-sortby label {
    font-size:16px;
    font-weight:bold;
}
#container #delivery .datatable-daterange #delivery-daterange .inputs {
    display:inline-block;
    margin-top:10px;
}
#container #delivery .datatable-sort #delivery-sortby select {
    padding:3px;
    margin-top:9px;
}
#container #delivery .dataTables_length {
    margin-top:6px;
    margin-left:10px;
    border-left:solid 1px #ccc;
    padding-left:10px;
}
.container {
    max-width:1200px;
    margin:0 auto;
}

header {
    padding:10px 0;
}

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

.container .title {
    text-align:center;
    margin:0 auto;
}

.dt-buttons {
    float:right!important;
    margin-top:20px;
}
.dt-button {
    background-color:#36a2eb33!important;
    font-family:'open sans';
    font-size:14px!important;
}
#container #delivery th input, #container #delivery th select {
    width:100%;
}
#container #delivery th select {
    padding:2px;
}
::placeholder {
    color:#ddd;
    opacity:1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    color:#ddd;
}
#container #delivery .order_no, #container #delivery .date {
    white-space:nowrap;
}
#container #delivery th .tooltip {
    position:relative;
}
#container #delivery th:hover {
    cursor:default;
}
#container #delivery th .tooltip .tooltiptext {
    visibility:hidden;
    position:absolute;
    background:#00529f;
    border-radius:3px;
    padding:10px;
    text-align:center;
    font-size:12px;
    font-weight:normal;
    top:100%;
    left:50%;
    margin-left:-70px;
    margin-top:10px;
    color:#fff;
}
#container #delivery th .tooltip:hover .tooltiptext {
    visibility:visible;
}
#container #delivery td {
    font-size:14px;
}
#container #delivery td img {
    max-width:50px;
}
#container #delivery #deliverytable {
    width:100%;
}
#container #delivery #deliverytable i {
    font-size:12px;
}
#container #delivery #deliverytable th i {
    font-size:10px;
    margin-left:5px;
}
#container #delivery #deliverytable .order_no i {
    margin-right:10px;
}
#container #delivery #deliverytable .location i {
    margin-left:10px;
}
#container #delivery #deliverytable a {
    color:#636363;
}
#container #delivery #deliverytable a:hover {
    cursor:pointer;
    color:#00529f;
    font-weight:bold;
    text-decoration:none!important;
}
#container #deliverytable img {
    max-width:50px;
}
#container #deliverytable img:hover {
    border:solid 1px #333;
}
@media (max-width:640px) {
    #container #delivery .dt-buttons {
        margin-top:20px;
    }
}

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

.text-success {
    color:#57b60a;
}
.text-warning {
    color:#ff9900;
}
.text-danger {
    color:#d70505;
}
.text-secondary {
    color: inherit;
}