/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Colors
-------------------------------------------------- */
:root {
    --primary: #678189;
    --primary-rgb: 103, 129, 137;
    --primary-dark: #45565b;
    --primary-very-dark: #2a373b;
    --primary-very-dark-rgb: 42, 55, 59;
    --primary-light: #9fb3b9;
    --primary-very-light: #c0cbce;
    --primary-ultra-light: #dce6e8;
    --secondary: #2f6a9c;
    --secondary-rgb: 47, 106, 156;
    --secondary-dark: #16466f;
    --secondary-light: #5d93c1;
    --tertiary: #dc3545;
    --tertiary-light: #db6470;
    --bluish-grey: #b8bcbd;
    --white: #fff;
    --ultra-light-grey: #f5f5f5;
    --very-light-grey: #ddd;
    --light-grey: #b9b9b9;
    --grey: #aaa;
    --dark-grey: #666;
    --very-dark-grey: #222;
    --black: #000;
    --error: #ed3e40;
    --error-dark: #c22c2e;
}

/* Focus Outlining
-------------------------------------------------- */
.no-focus-outline *:focus {
    outline: none;
}

/* Button Overrides
-------------------------------------------------- */

.btn-primary {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover {
        color: var(--white);
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

    .btn-primary:focus, .btn-primary.focus {
        color: var(--white);
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.5);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: var(--white);
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: var(--white);
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.5);
        }

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

    .btn-outline-primary:hover {
        color: var(--white);
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.5);
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: var(--primary);
        background-color: transparent;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: var(--white);
        background-color: var(--primary);
        border-color: var(--primary);
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.5);
        }

.btn-primary-dark {
    color: var(--white);
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

    .btn-primary-dark:focus, .btn-primary-dark.focus, .btn-primary-dark:not(:disabled):not(.disabled):active:focus, .btn-primary-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-primary-dark.dropdown-toggle:focus {
        color: var(--white);
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-very-dark), 0.5);
    }

    .btn-primary-dark:not(:disabled):not(.disabled):active, .btn-primary-dark:not(:disabled):not(.disabled).active, .show > .btn-primary-dark.dropdown-toggle, .btn-primary-dark:hover {
        color: var(--white);
        background-color: var(--primary-very-dark);
        border-color: var(--primary-very-dark);
    }

.btn-group-toggle * {
    cursor: pointer;
}

/* Dropdown Overrides
-------------------------------------------------- */
.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Text Overrides
-------------------------------------------------- */
.text-muted {
    color: var(--dark-grey) !important;
}

a {
    color: var(--secondary);
    overflow-wrap: break-word;
}
a:hover {
    color: var(--secondary-dark);
}

.text-primary {
    color: var(--primary) !important;
}

/* Display overrides
-------------------------------------------------- */
.d-flex-weak {
    display: flex; /* Not !important*/
}

/* Fancybox Overrides
-------------------------------------------------- */

.fancybox-container {
    /* Use viewport rather than percent because of collapsible right col*/
    height: 100vh;
    width: 100vw;
}

/* General Elements
-------------------------------------------------- */
html {
    /* To allow hiding overflow on body */
    width: 100%;
    /*overflow: auto; can't use this because it stops overflow:hidden working on body (which is needed to stop scrolling on modal open)
    /* --------------- */
}

body {
    background-color: var(--primary-very-light);
    color: var(--black);
    font-family: 'Work Sans', sans-serif;
    border-top: 5px solid #dc3545; /* Default to "error, environment unknown" indicator bar */
    
    /* To hide overflowing content which makes the page look weird */
    width: 100%;
    /*overflow-x: hidden; can't use this because can't set html to overflow:auto (see above for why)*/
    /* ---------------- */
}

    body.not-production {
        border-top: 5px solid #b883de;
    }

    body.production {
        border-top: none;
    }

hr {
    border-top-color: var(--primary);

}

.cursor-pointer {
    cursor: pointer;
}

.cursor-help {
    cursor: help;
}

.content-plate {
    background-color: var(--white);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), 4px 4px rgba(0,0,0,0.1);
    padding: 25px 30px 25px 30px;
    border-radius: 3px;
}

    .content-plate h4 {
        margin-bottom: 10px;
    }

.underline-dotted {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.scroll-shadows {
    background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
    /* Note if this isn't working, make sure child elements don't have a solid background colour that is blocking it */
}

.scroll-shadows-primary {
    background: linear-gradient(var(--primary-dark) 33%, rgba(105,16,201, 0)), linear-gradient(rgba(105,16,201, 0), var(--primary-dark) 66%) 0 100%, radial-gradient(farthest-side at 33% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)), radial-gradient(farthest-side at 33% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
    background-color: var(--primary-dark);
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 150% 132px, 200% 132px, 150% 44px, 200% 44px;
    /* Note this shadow is bigger than normal scroll shadows */
}



/* Headings
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--primary-dark);
}

h2, .h2 {
    font-size: 2.1rem;
}
h3, .h3 {
    font-size: 1.7rem;
}
h4, .h4 {
    font-size: 1.35rem;
}
h5, .h5 {
    font-size: 1.15rem;
}

/* Spacing
-------------------------------------------------- */


/* ASP Defaults
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .1);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}


/* General Form Styles
-------------------------------------------------- */
.validation-summary ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.form-bg-darker {
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    border-radius: 5px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--primary);
    background-color: var(--primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--primary-ultra-light);
    border-color: var(--primary-ultra-light);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--primary-very-light);
}



/* Tables
-------------------------------------------------- */
table tr:first-of-type td {
    border-top: none;
}

th {
    font-weight: normal;
}

.table thead th {
    border-bottom: 1px solid #dee2e6; /* change the 2px border to 1px */
}

table.table-small-text tr:not(.table-footer) td {
    font-size: 0.85rem;
}

.table-thin td, .table-thin th {
    padding-top: 6px;
    padding-bottom: 6px;
}

table.table-header-no-wrap th {
    white-space: nowrap;
}

.table-header {
    color: var(--white);
    background-color: var(--primary-dark);
}

.table-subheader {
    color: var(--white);
    background-color: var(--primary);
}

.table-subheader-disabled {
    color: var(--grey);
}

.table-data {
    background-color: var(--white);
}

.table-data-clickable {
    transition: background-color 0.1s, color 0.1s;
}

.table-data-clickable:hover {
    cursor: pointer;
    background-color: var(--primary-ultra-light);
    /*color: var(--white);*/
}

.table-data-clicked {
    cursor: pointer;
    background-color: var(--primary-light);
    /*color: var(--white);*/
}

    .table-data-clicked:hover {
        background-color: var(--primary-light);
        opacity: 0.8;
    }

.table-data-disabled {
    color: var(--grey);
}

.table-footer {
    background-color: var(--primary-ultra-light);
}

.table-offset-right td:last-child:not(:first-child) {
    padding-left: 40px;
    text-align: right;
}

.table-data-greyed {
    background-color: var(--bluish-grey);
}

/* To use this, append a div with this class to table */
.table-disabled-loading {
    /* Parent table must be positioned! */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
}

/* Cards
-------------------------------------------------- */
.card {
    border: none; /*Remove the default border*/
}

.card-dark, .card-header-dark, .card-body-dark {
    background-color: var(--primary-very-dark);
    color: var(--white);
}

.card-dark *, .card-header-dark *, .card-body-dark * {
    color: var(--white);
}

.card-body-special {
    /*font-size: 0.8rem;*/
    line-height: 1.3rem;
}
.card-body-special p {
    margin-bottom: 0.6rem;
}

/* Images
-------------------------------------------------- */
.img-fit-cover {
    /* Makes the img fill it's container */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Pagination
-------------------------------------------------- */
.page-link {
    background-color: var(--primary-dark);
    color: var(--white);
}
    .page-link:hover {
        background-color: var(--primary);
        color: var(--white);
    }
    .page-link:focus {
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.5);
    }
.page-item.active .page-link {
    background-color: var(--primary-very-dark);
    border-color: var(--white);
}

/* Positioning and Rotation
-------------------------------------------------- */
.transform-smooth {
    /* Apply this class to add transition to transform */
    transition: transform 0.4s;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Loading Spinner
-------------------------------------------------- */
.loader {
    height: 28px;
    width: 28px;
    color: var(--primary-very-dark);
    position: relative;
    border: 4px solid;
    border-radius: 50%;
    border-right-color: transparent;
    animation: rotate 1s linear infinite;
    margin: 0 auto;
}

    /*.loader::after {
        content: '';
        width: 4px;
        height: 4px;
        background: var(--primary-very-dark);
        border-radius: 50%;
        position: absolute;
        top: -1px;
        left: 16.5px;
    }*/

    .loader.loader-lg {
        height: 56px;
        width: 56px;
    }

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* When using, remember to position: relative the parent! */
.loader-container-center {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Site Error Modal
-------------------------------------------------- */
#error-modal-icon {
    position: absolute;
    font-size: 12vh;
    opacity: 0.15;
    bottom: 50%;
    right: 33%;
    transform: translate(50%, 50%);
    color: var(--primary-dark);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom of footer height (plus a bit extra for padding between content and footer) */
    margin-bottom: 80px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 50px;
    box-sizing: border-box; /* Supposed to prevent border from adding extra height, but not working (i think because it is position absolute) */
    line-height: 50px; /* Centers the text vertically. If you add a border, subtract its thickness from here to prevent scrollbar on body */
    background-color: var(--primary-very-dark);
    color: var(--primary-light);
}

    .footer a {
        color: var(--secondary-light);
    }


/* Site Header
-------------------------------------------------- */
#site-header-nav {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 15px;
}

#site-header-nav .navbar-brand img {
    max-height: 40px;
    padding-bottom: 5px;
}

#site-header-nav a {
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--primary-dark);
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    transition: background-color ease 0.1s, color ease 0.1s;
    letter-spacing: -1px;
    word-spacing: -1px;
    border-radius: 3px;
}

#site-header-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#site-header-nav li a:hover {
    background-color: var(--primary);
    color: var(--white);
}

#site-header-nav .dropdown-menu a {
    border-radius: 0;
}

.dropdown-menu {
    overflow: hidden;
}

#navbar-logo-only {
    padding: 20px;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
    background-color: var(--white);
    border-bottom: 2px solid var(--primary);
}

#navbar-logo-only img {
    max-height: 40px;
}

#account-dropdown {
    display: flex;
    align-items: center;
}

#nav-organisation {
    font-size: 0.75rem;
    text-align: right;
    line-height: 1.1;
}

#account-icon {
    font-size: 1.5rem;
}

.dropdown-menu {
    padding: 0;
}

a.dropdown-item:first-child {
    padding-top: 8px !important;
}

a.dropdown-item:last-child {
    padding-bottom: 8px !important;
}

#account-icon:after {
    margin-left: 6px;
}

/* Right Column Mobile Styles
---------------------------------------------------- */
@media (max-width: 991px) {
    aside.collapse-right-col {
        position: absolute; /* Set to fixed to fix horizontal scrolling when collapsed, but you can't scroll vertically on it when it doesnt fit */
        right: 0;
        top: 0;
        transform: translateX(100%);
        height: 100%;
        padding-top: 2rem;
        background-color: var(--primary-very-light);
        /*transition: transform 0.3s;*/
        z-index: 2;
    }

        aside.collapse-right-col .collapse-right-col-btn {
            background-color: var(--primary);
            width: 40px;
            height: 150px;
            content: "";
            position: fixed; /* should be same as above */
            left: -40px;
            top: 94px;
            display: block;
            border-right: 0;
            border-radius: 8px 0 0 8px;
            cursor: pointer;
            color: var(--primary-very-light);
            font-size: 2rem;
            padding-left: 9px;
            padding-top: 5px;
            box-shadow: 0 4px var(--primary-dark);
        }

            aside.collapse-right-col .collapse-right-col-btn i {
                transition: transform 0.3s;
            }

        aside.collapse-right-col.collapse-right-col-expanded {
            transform: translateX(0);
        }

            aside.collapse-right-col.collapse-right-col-expanded .collapse-right-col-btn i {
                transform: rotate(180deg);
            }

        aside.collapse-right-col:before {
            content: '';
            background-color: rgba(0,0,0,0);
            width: 0;
            height: 0;
            position: fixed;
            top: 0;
            left: -200%;
            transition: background-color 0.3s;
        }

        aside.collapse-right-col.collapse-right-col-expanded:before {
            content: '';
            background-color: rgba(0,0,0,0.5);
            width: 200%;
            height: 100%;
            position: fixed;
            top: 0;
            left: -200%;
        }

    /* Code for transitioning between hidden and shown */
    /* Note: cannot just display: none on the aside itself because the button is within it. */
        aside.collapse-right-col:not(.collapse-right-col-expanded) {
            width: 0 !important;
            padding: 0 !important;
        }
        aside.collapse-right-col:not(.collapse-right-col-expanded) > *:not(.collapse-right-col-btn) {
            display: none !important;
        }
}

/* Login Page
---------------------------------------------------- */
/* Home Page
---------------------------------------------------- */
#specials-carousel .card {
    /*Border same colour as backround colour*/
    border: 3px solid rgba(0,0,0,0);
    background-color: var(--primary-dark);
}

#specials-carousel .mobile-overlay {
    /*position: absolute; Set this in html if there is an image, otherwise don't set it */
    bottom: 0;
    width: 100%;
    padding: 15px;
    padding-bottom: 25px;
    background-color: rgba(var(--primary-very-dark-rgb), 0.7);
    cursor: pointer;
}

#specials-carousel .img-parent {
    overflow: hidden;
}

#specials-carousel .carousel-img {
    height: 50vh;
    width: auto;
    /*max-width: 100%; removed to prevent img squeezing*/
    max-height: 50vh;
}

@media (max-width: 767px) { /* md size */
    #specials-carousel .carousel-img {
    }
}

@media (min-width: 768px) { /* md size */
    #specials-carousel .carousel-img {
        width: auto;
        /*height: 100%; breaks it for some reason*/
        max-height: 350px; /* Same as .special-text-container */
    }
}

#specials-carousel .carousel-control-prev,
#specials-carousel .carousel-control-next {
    width: 8%;
    padding: 5px;
    z-index: initial; /*Stop icons overlaying the right column expandamatron*/
}
#specials-carousel .carousel-control-next {
    justify-content: flex-end;
}
#specials-carousel .carousel-control-prev {
    justify-content: flex-start;
}

#specials-carousel .carousel-indicators {
    z-index: 1;
}

.special-modal .modal-content {
    background-color: var(--primary-very-dark);
}

.special-modal * {
    color: var(--white);
}

.special-modal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.special-modal .close {
    color: var(--white);
    text-shadow: none;
}

.special-text-container {
    max-height: 350px; /* Same as .carousel-img */
    overflow-y: auto;
}

/* Purchase Order Manager
---------------------------------------------------- */
#purchase-order-manager-table td {
    vertical-align: middle;
}

#purchase-order-manager-table .unsubmitted-row .btn:not(:last-child) {
    margin-right: 0.25rem;
}

/* View Purchase Order
---------------------------------------------------- */
.purchase-order-summary-header p {
    margin-bottom: 0;
}

#purchase-order-summary-header-table {
    background-color: var(--white);
}

.order-header-title {
    background-color: var(--primary-dark);
    margin-left: 15px;
    margin-right: -15px;
    padding: 10px;
    padding-left: 15px;
}

    .order-header-title h5 {
        margin: 0;
        font-size: 1.05rem;
        color: var(--white);
    }

.order-header-text {
    margin-left: 15px;
    margin-right: -15px;
    padding: 10px 15px;
}

#purchase-order-summary-products-table {
    position: relative; /* For the loading div to work*/
}

#purchase-order-summary-products-table thead {
    white-space: nowrap;
}

#purchase-order-summary-products-table #function-btn-container {
    display: flex;
    justify-content: flex-end;
}

    #purchase-order-summary-products-table #function-btn-container button {
        border-radius: 0;
        padding: 10px 15px;
    }

    #purchase-order-summary-products-table #function-loader-container {
        padding: 10px 15px;
    }

@media (min-width: 576px) { /* sm size */
    .order-header-title, .order-header-text {
        border-top: 2px solid var(--white);
    }

    .order-header-title {
        padding-left: 1.4rem;
    }

    .order-header-title-first, .order-header-text-first {
        border: none;
        padding-top: 17px;
    }
}

#confirm-submit-modal .confirm-submit-static {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

#confirm-submit-modal .confirm-submit-static button {
    position: absolute;
    top: 15px;
    right: 15px;
}

#confirm-submit-modal .confirm-submit-scrollable {
    max-height: 80vh;
    overflow: auto;
}

/* Add New Product
-------------------------------------------------- */
.add-new-product-scrollable {
    min-height: 60vh;
    max-height: 80vh;
    overflow: auto;
    /* Here down is for scroll indicator shadows */
    background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}

.add-new-product-scrollable .table-data-scrollable:not(:hover) {
    /* Otherwise the white background will block scroll shadow */
    background-color: rgba(255,255,255,0);
}

.add-new-product-static {
    margin-top: 15px;
}

.add-new-product-form-group {
    background-color: var(--ultra-light-grey);
    padding: 15px;
    border-radius: 0.25rem;
    border: 2px solid var(--primary-ultra-light);
}

.anp-option-container {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#anp-input-group {

}

#anp-list-group {
    max-height: 70%;
    overflow: auto;
}

.anp-instructions-group {
    flex-grow: 1; /* If input/list is small, fill remaining space*/
    flex-shrink: 1; /* If input/list is big, don't shrink below content size*/
    max-height: 60vh;
    overflow: auto;
}

.anp-table {
    margin: 0;
    border-radius: 0.25rem 0.25rem 0 0;
    overflow: hidden;
}

.anp-table .table-data {
    background-color: rgba(255,255,255,0);
}

.anp-table-data-clickable {
    transition: background-color 0.1s;
}

.anp-table tr.anp-table-data-clickable:hover, 
.anp-table tr.anp-table-data-clicked {
    background-color: var(--primary-very-light);
    cursor: pointer;
}

#anp-table label {
    margin: 0;
    display: block;
    cursor: pointer;
}

#anp-table input {
    /*display: none;*/
}

#summary-tables-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#anp-options-summary-group table td:first-child {
    text-align: right;
    font-weight: bold;
    color: var(--primary-dark);
    /*white-space: nowrap;*/
}

#anp-options-summary-group table td.anp-option-value {
    /*width: 99%; /* Make this column take all empty space */
    width: 55%; /* This makes option *name* column have max width of 45% */
}

#anp-options-summary-group table .edit-icon {
    opacity: 0;
    transition: opacity 0.1s;
    color: var(--primary);
}
    #anp-options-summary-group table tr:hover .edit-icon {
        opacity: 1;
    }

#anp-options-summary-group {
    /*Make options table scroll when too big (so totals always visible)*/
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

#anp-options-summary-group #txt-btn-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#anp-totals-group {
    flex-grow: 0;
}

.anp-summary-scrollable {
    /* Here down is for scroll indicator shadows */
    background: /* Shadow covers */ linear-gradient(var(--ultra-light-grey) 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), var(--ultra-light-grey) 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background: /* Shadow covers */ linear-gradient(var(--ultra-light-grey) 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), var(--ultra-light-grey) 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 99.9%;
    background-repeat: no-repeat;
    background-color: var(--ultra-light-grey);
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}

#submit-loader-container {
    align-self: center;
    margin: 0 15px;
}

/* Purchase Order History
-------------------------------------------------- */
#purchase-order-history-results .btn {
    font-size: inherit;
}

#purchase-order-history-results td:first-child {
    vertical-align: middle;
}

/* General News Styles
-------------------------------------------------- */
.news-list p {
    text-align: justify;
}

.news-img-thumb {
    max-height: 100px; /* Leave this for browsers that dont support calc() or min()*/
    max-height: calc(min(18vw, 100px));
    width: auto;
    margin: 0 10px 10px 0;
    box-sizing: content-box;
    vertical-align: bottom;
    border-radius: 2px;
}

.news-heading {
    color: var(--secondary);
}

.news-heading-urgent {
    color: var(--error);
}

.news-heading-date {
    color: var(--dark-grey);
}

.news-item-container {
    background-color: var(--white);
    padding: 1.8rem;
    border-radius: 3px;
    margin-bottom: 1rem;
    /* box-shadow: 1px 1px 8px rgba(0,0,0,0.1); */
    box-shadow: 4px 4px var(--primary-ultra-light), 1px 1px 8px rgba(0,0,0,0.1);
}

    .news-item-container *:last-child {
        margin-bottom: 0;
    }

#pagination-nav ul {
    flex-wrap: wrap; /* Wrap pagination when screen is too small */
}

.newsletter-item {
    background-color: var(--white);
    padding: 1rem 1rem;
    border-radius: 3px;
    display: flex;
    margin-bottom: 0.6rem;
    transition: background-color 0.2s;
    align-items: center;
    position: relative;
}

    .newsletter-item:hover {
        background-color: var(--very-light-grey);
    }

    .newsletter-item i {
        font-size: 2rem;
        margin-right: 1rem;
        color: var(--dark-grey);
        text-decoration: none;
    }

    .newsletter-item .newspaper-icon {
        position: absolute;
    }

    .newsletter-item .download-icon {
        opacity: 0;
    }

    .newsletter-item .newspaper-icon, .newsletter-item .download-icon {
        transition: opacity 0.2s;
    }
        
    .newsletter-item:hover .newspaper-icon {
        opacity: 0;
    }

    .newsletter-item:hover .download-icon {
        opacity: 1;
    }

    .newsletter-item span {
        line-height: 2rem; /* Same as icon font size */
    }

.newsletter-link:hover {
    text-decoration: none;
}

/* Summaries
-------------------------------------------------- */
.summary-card table {
    border: none;
    width: 100%;
}
.summary-card table tr td:nth-child(even) {
    text-align: end;
}

.summary-card hr {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-top-color: rgba(0,0,0,0.15);
}

/* View Invoice
--------------------------------------------------*/
#view-invoice-summary-header {
    padding-top: 25px;
    margin: 15px 0 1rem 0;
}

    #view-invoice-summary-header p:first-child {
        margin-bottom: 0.5rem;
        line-height: 1rem;
    }

    #view-invoice-summary-header p:not(:first-child) {
        color: var(--dark-grey);
        margin: 0;
    }

#view-invoice-summary-header-inner {
    margin-top: -25px; /*Give this negative margin to counteract first row of children's top margin*/
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
}

    #view-invoice-summary-header-inner div:not(.row) {
        margin-top: 25px;
    }

#view-invoice-totals-table td {
    padding: 0.5rem 0.75rem; /*Less vertical padding, default horizontal padding*/
}

    #view-invoice-totals-table td:first-child {
        font-weight: 700;
    }

#view-invoice-comment-container p {
    white-space: pre-line;
}

.comment { /* These comment styles also used in View Purchase Order */
    background-color: var(--white);
    border-radius: 10px;
    padding: 15px 5px;
    margin: 0;
}

    .comment .comment-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--dark-grey);
        font-size: 0.85rem;
        padding: 0 30px;
    }

        .comment .comment-left i {
            font-size: 2.5rem;
            color: var(--grey);
            margin-bottom: 10px;
        }

        .comment .comment-left span:last-child {
            color: var(--grey);
        }

    .comment .comment-right {
        padding-left: 0;
    }

        .comment .comment-right p {
            white-space: pre-line;
        }

    .comment-reply {
        margin-left: calc(3rem + 5vw);
    }

    .comment.disabled, .comment.disabled i {
        background-color: var(--very-light-grey);
        color: var(--grey);
    }


/* Invoice Item List Modal
-------------------------------------------------- */
#options-container {
    min-height: 60vh;
    max-height: 80vh;
    overflow: auto;
}

#options-table {
    margin: 0;
    border-radius: 0.25rem 0.25rem 0 0;
    overflow: hidden;
}

    #options-table tbody tr {
        background-color: transparent;
    }

    #options-table td:first-child {
        text-align: right;
        font-weight: bold;
        color: var(--primary-dark);
    }

    #options-table td.option-value {
        width: 55%; /* This makes option *name* column have max width of 45% */
    }

/* Price Lists and Order Forms
-------------------------------------------------- */
.collapsible-row {
    cursor: pointer;
}

.collapsible-row-expanded .collapsible-row-icon {
    transform: rotate(180deg);
}

.collapsible-row-icon {
    float: right;
    line-height: 1.5;
    transition: transform 0.2s;
    position: relative; /*To stop changing of row height as icon changes rotation*/
}

/* Account Details
-------------------------------------------------- */
.account-page .content-plate {
    height: 100%;
}

.account-details-table {
    width: 100%;
}

    .account-details-table td {
        vertical-align: top;
        font-size: 0.85rem;
        /*padding: 10px 20px;*/
        padding: 10px 0;
    }

        .account-details-table td:first-child {
            font-weight: bold;
            padding-right: 30px;
            text-align: right;
            white-space: nowrap;
        }

        .account-details-table td:last-child {
            width: 99%; /*Make first column as small and far left as possible*/
        }

    .account-details-table tr {
        border-bottom: 1px solid var(--grey);
    }

        .account-details-table tr:last-child {
            border-bottom: none;
        }

#account-products-table td:last-child {
    width: 99%; /*Make first column as small as possible*/
}

#account-products-table .custom-checkbox {
    padding: 0;
    min-height: 1rem;
}

#account-products-table .custom-checkbox .custom-control-label::before,
#account-products-table .custom-checkbox .custom-control-label::after {
    left: 0;
    top: 0.15rem;
}

.notification-badge {
    padding: 5px 8px;
    border: solid 1px black;
    border-radius: 4px;
}

    .notification-badge.badge-none {
        border-color: transparent;
        background-color: var(--very-light-grey);
    }

    .notification-badge.badge-email {
        color: #326d32;
        border-color: transparent;
        background-color: #bbdebb;
    }

    .notification-badge.badge-sms {
        color: #1d65a2;
        border-color: transparent;
        background-color: #bad1e4;
    }

/* View Product
-------------------------------------------------- */
.product-img-thumb {
    max-height: 100px; /* Leave this for browsers that dont support calc() or min()*/
    max-height: calc(min(18vw, 100px));
    width: auto;
    margin: 0 10px 10px 0;
    /* border: solid 2px var(--white); */
    box-sizing: content-box;
    vertical-align: bottom;
    border-radius: 2px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15), 3px 3px rgba(0,0,0,0.15);
}

/* Contact Us
-------------------------------------------------- */
.contact {
    border-radius: 20px;
    overflow: hidden;
}

.contact-icon-container-container {
    margin-top: 20px;
}

.contact-icon-container {
    background-color: var(--white);
    width: 100%;
    cursor: pointer;
    padding: 12px 0;
    margin-top: -10px;
}

    .contact-icon-container:hover {
        background-color: var(--very-light-grey);
    }

    .contact-icon-container.contact-icon-container-active {
        position: absolute;
    }

        .contact-icon-container.contact-icon-container-active .contact-icon-text{
            display: inline;
            font-size: 0.95rem;
        }

        .contact-icon-container.contact-icon-container-active .contact-icon {
            
        }

.contact-icon {
    color: var(--dark-grey);
    font-size: 1.2rem;
}

.contact-icon-text {
    display: none;
    word-break: break-all;
    color: var(--dark-grey);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Only when we boost Weather Box */
.wb-boost #anp-list-group {
    /* show roughly ~2.5 rows before scroll; tweak the +px to taste */
    min-height: 150px;
}

@media (max-width: 576px) {
    .wb-boost #anp-list-group {
        max-height: 300px;
    }
}