/* Contains specific AgPro site styling for specific pages or UI elements */


/*************************************************
* Content block; make sure footer is never too high
*************************************************/

@media (min-width: 768px) {
    /* Fullscreen minus header minus footer */
    #view-wrapper {
        min-height: calc(100vh - 72px - 121px);
    }
}

footer {
    min-height: 121px;
}

@media (max-width: 767px) {
    footer {
        min-height: 140px;
    }
}





/*************************************************
* Ajax overlay
*************************************************/
.ajax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(100,100,100,0.25);
}

    .ajax-overlay img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -48px;
        margin-left: -48px;
        height: 96px;
        width: 96px;
    }



/*************************************************
* Test codes
*************************************************/
.test-codes {
    padding: 0;
}

    .test-codes li {
        list-style-type: none;
        padding: 3px 15px 3px 0;
        display: inline-block;
    }

    .test-codes label {
        padding-left: 5px;
        padding-right: 25px;
    }



/*************************************************
* Phone numbers
*************************************************/    

/* When displayed in a table, put each phone number of a different row */
.table .phone {
    display: block;
}

/* Misc random styling */
.phone {
    white-space: nowrap;
}



/* Standard BG status */
.sample-status.status-new-sample {
}

.sample-status.status-sample-received,
.sample-status.status-scheduled {
    color: rgb(80, 160, 200);
}

.sample-status.status-analysis-complete,
.sample-status.status-recommendations-complete {
    /*background-color: rgba(56,161,92,0.4);*/
    color: #117B3B;
}



/*************************************************
* Header and menu navigation
*************************************************/    

/* Dev site highlight logo in purple */
.body-dev .navbar-brand,
.body-dev .login-brand {
    background: #cc42ce !important;
}

/* We'll just style desktop vs mobile completely separately for ease */
@media (min-width: 992px) {

    .navbar {
        height: 72px;
    }

    .navbar .navbar-brand img {
        height: 44px;
        width: auto;
    }

    .navbar .navbar-brand.navbar-flag img {
        height: 30px;
    }

    .navbar .navbar-nav > .nav-item {
        height: 72px;
        width: 100px;
    }  

    .navbar .navbar-nav > .nav-item .nav-link {
        height: 72px;
        width: 100px;
        font-size: 13px;
        line-height: 15px;
        text-align: center;
        color: #fff;
        padding-top: 5px;
    }

        .navbar .navbar-nav > .nav-item .nav-link .menu-text {
            display: flex;
            height: 36px;
            align-items: center;
            justify-content: center;
        }

        .navbar .navbar-nav > .nav-item .nav-link .menu-icon {
            display: block;
            height: 24px;
            line-height: 24px;
            height: 24px;
            color: #13634b;
        }

            .navbar .navbar-nav > .nav-item .nav-link .menu-icon svg {
                width: 20px;
                height: 20px;
                font-size: 20px;
                color: #13634b;
            }

        .navbar .navbar-nav > .nav-item .nav-link:hover,
        .navbar .navbar-nav > .nav-item .nav-link:active,
        .navbar .navbar-nav > .nav-item.show .nav-link {
            background-color: #13634b;
        }

            .navbar .navbar-nav > .nav-item .nav-link:hover .menu-icon svg,
            .navbar .navbar-nav > .nav-item .nav-link:active .menu-icon svg,
            .navbar .navbar-nav > .nav-item.show .nav-link .menu-icon svg {
                color: #fff;
            }

        .navbar .megamenu {
            position: static
        }

            .navbar .megamenu .dropdown-menu {
                background: rgba(19, 99, 75, 0.95);
                border-radius: 0;
                margin-top: 0;
                border: none;
                width: 100%;
                justify-content: center;
                padding: 0;
                align-items: center;
                min-height: 64px;
            }

            .navbar .megamenu.megamenu-right .dropdown-menu {
                justify-content: end;
            }

                .navbar .megamenu .dropdown-menu.show {
                    display: flex;
                }

                .navbar .megamenu .dropdown-menu .dropdown-item {
                    display: block;
                    height: 64px;
                    width: 120px;
                    text-align: center;
                    font-size: 13px;
                    line-height: 15px;
                    padding: 0 10px;
                    white-space: normal;
                    color: #fff;
                    background: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: solid 1px transparent;
                }

                .navbar .megamenu .dropdown-menu .dropdown-item[disabled] {
                    color: #aaa !important;
                    background-color: none !important;
                    border: none !important;
                    cursor: pointer;
                }

                    .navbar .megamenu .dropdown-menu .dropdown-item:hover,
                    .navbar .megamenu .dropdown-menu .dropdown-item:active {
                        background-color: #13634b;
                        border: solid 1px #fff;
                    }

} /* End desktop nav styling */


  /* Small desktop */
  @media (min-width: 992px) and (max-width: 1159px) {
    .navbar .navbar-nav > .nav-item {
        width: 75px;
    }

        .navbar .navbar-nav > .nav-item .nav-link {
            width: 75px;
            padding-left: 3px;
            padding-right: 3px;
            font-size: 11px;
        }
  }

  /* Medium desktop */
@media (min-width: 1160px) and (max-width: 1299px) {
    .navbar .navbar-nav > .nav-item {
        width: 90px;
    }

        .navbar .navbar-nav > .nav-item .nav-link {
            width: 90px;
        }
}

/* Mobile and tablet nav styling */
@media (max-width: 991px) {

    .navbar {
        padding: 0;
        justify-content: left;
    }

    .navbar .navbar-brand {
        padding: 6px 12px;
    }

        .navbar .navbar-brand img {
            height: 36px;
            width: auto;
        }

        .navbar .navbar-brand.navbar-flag img {
            height: 26px;
        }

        .navbar .navbar-toggler {
            background: none;
            border: none !important;
            padding: 0;
            margin: 6px 12px;
            line-height: 36px;
            font-size: 26px;
            color: #fff;
        }


        .navbar .navbar-collapse {
            padding: 0 10px;
            background-color: #13634b;
            color: #fff;
        }

        .navbar .navbar-nav > .nav-item {
            font-size: 14px;
            line-height: 20px;
            border-bottom: solid 1px #aaa;
        }

        .navbar .navbar-nav > .nav-item .nav-link {
            color: #fff !important;
        }

        .navbar .navbar-nav > .nav-item.nov-profile,
        .navbar .navbar-nav > .nav-item.dropdown.show {
            border-bottom: none;
        }


        .navbar .navbar-nav > .nav-item .nav-link .menu-icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 18px;
            margin-right: 10px;
            text-align: center;
        }


        .navbar .navbar-nav .dropdown-menu {
            padding: 0 0 10px 25px;
            background: none !important;
            border-radius: 0 !important;
            border: none;
            border-bottom: solid 1px #aaa;
        }

        .navbar .navbar-nav .dropdown-menu .dropdown-item {
            font-size: 14px;
            line-height: 20px;
            background: none !important;
            color: #fff;
        }

} /* End mobile nav styling */



/*************************************************
* Scrollspy Navbar (used on some pages, usually wizards)
*************************************************/    

.navbar .nav .nav-link,
.navbar .nav .nav-link-padding {
    display: block;
    padding: 0.5rem 1rem;
}

.navbar-scrollspy {
    top: 73px;
    z-index: 990; /*needs to be beneath the main menu*/
}

    .navbar-scrollspy.navbar-pseco {
        top: 0;
    }

    .navbar-scrollspy .nav {
        margin: 0 auto;
    }

        .navbar-scrollspy .nav .nav-item {
            padding: 0;
            /*border-right: solid 1px #ddd;*/
            border-right: none;
        }

            .navbar-scrollspy .nav .nav-item .nav-link {
                color: #444;
            }

                .navbar-scrollspy .nav .nav-item .nav-link.disabled {
                    color: #aaa;
                }

                .navbar-scrollspy .nav .nav-item .nav-link.active {
                    color: #117B3B;
                    border-bottom: solid 2px #117B3B;
                }

.bg-secondary.scroll-active {
    background-color: #ff0000 !important;
}




/*************************************************
* Credit Card (and other?) Payments, including Stripe
*************************************************/    

#card-errors {
}

.credit-card-panel {
    max-width: 500px;
    margin: 0 auto;
}

.credit-card-panel .credit-card-element {
    border: solid 1px #ced4da;
    background-color: #fff;
    padding: 4px 8px;
    border-radius: .25rem;
}

.agpro-payment-wrapper .InputContainer .InputElement {
    padding-left: 5px !important;
}

.card-medium-logo {
    display: block;
    width: auto;
    max-height: 45px;
}

.stripe-inline-logo {
    margin-left: 10px;
    display: inline-block;
    width: auto;
    max-height: 25px;
}

.stripe-mini-logo {
    display: block;
    width: auto;
    max-height: 30px;
}

.card-payment .nav-tabs {
    padding-left: 0;
}

    .card-payment .nav-tabs .nav-item .nav-link {
        height: 45px;
        border: none !important;
    }




/*************************************************
* Home Dashboard
*************************************************/    

#dashboard .dashboard-link {
    background-color: #000;
    margin: 1px;
    text-decoration: none !important;
    text-align: center;
}

    #dashboard .dashboard-link p {
        text-align: center;
        font-size: 20px !important;
        color: #fff;
        padding: 10px;
        margin: 0;
        text-decoration: none !important;
    }

    #dashboard .dashboard-link.disabled,
    #dashboard .dashboard-link.disabled:hover {
        background-color: #aaa !important;
        opacity: 0.6;
    }




/*************************************************
* Login / Registration
*************************************************/

#login-wrapper {
    /* 100vh - header - footer */
    min-height: calc(100vh - 72px - 121px);
    background: #000 url('/Content/Canva-Seedling-in-a-Pot-1024x683.jpg') center center no-repeat;
    background-size: cover;
}

@media (max-width: 767px) {
    #login-wrapper {
        min-height: calc(100vh - 49px - 140px);
        padding: 10px 0;
    }
}


#login-wrapper #upgrade-wrapper {
    display: block;
    width: 100%;    
}

#plan-wrapper .plan-point {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

#plan-wrapper .plan-point p {
    line-height: 1.2;
}

#plan-wrapper .plan-point svg {
    display: block;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    margin-right: 15px;
    color: #117B3B;
}

#plan-wrapper .plan-advisor .plan-point svg {
    color: #2a4da5;
}

#plan-wrapper .text-payment .plan-point svg {
    color: #2a4da5;
}


#upgrade-wrapper svg {
    display: block;
    font-size: 30px;
    line-height: 40px;
    height: 40px;
    margin-right: 15px;
}


/* Some background colour overrides to add slight transparency */
#login-wrapper .card.bg-dark {
    border: solid 1px #666;
    background-color: rgba(40,40,40,0.85) !important;
}

#plan-wrapper .card {
    background: none !important;
}

#login-wrapper .card.bg-dark .bg-light {
}


    #plan-wrapper .card-body {
        padding-bottom: 5px;
    }

    #plan-wrapper .card .card-body,
    #plan-wrapper .card .card-footer {
        background-color: rgba(255,255,255,0.85);
    }

    #plan-wrapper .card .card-header.bg-primary {
        background-color: rgba(19, 99, 75, 0.85) !important;
    }

    #plan-wrapper .card .card-header.bg-secondary {
        background-color: rgba(42, 77, 165, 0.85) !important;
    }


/*************************************************
* Sample Results and Advice Report Styling
*************************************************/
.bg-sample {
    background-color: #999999;
    color: #fff;
}

.bg-sample-QUICKSOIL,
.bg-sample-SOIL {
    background-color: #FFC000;
    color: #000;
}

.bg-sample-WATER {
    background-color: #B4C6E7;
    color: #fff;
}

.bg-sample-SAP {
    background-color: #B3FD61;
    color: #000;
}

.bg-sample-DTIS {
    background-color: #117B3B;
    color: #fff;
}

.bg-sample-LIVESTOCK {
    background-color: #fff3cd;
    color: #000;
}

.header-rec {
    padding: 35px 100px;
    background-size: cover;
}

.header-bg-sample-WATER {
    background: #fff url('/Content/bg-water.jpg') no-repeat center center;
}

.header-bg-sample-SAP,
.header-bg-sample-DTIS,
.header-bg-sample-MATRIXSCIENCES {
    background: #fff url('/Content/bg-sap.jpg') no-repeat center center;
}

.header-bg-sample-QUICKSOIL,
.header-bg-sample-SOIL,
.header-bg-sample-CMP {
    background: #fff url('/Content/bg-soil.jpg') no-repeat center center;
}

.header-bg-sample-OIL {
    background: #fff url('/Content/bg-oils.jpg') no-repeat center center;
}

.header-bg-sample-BIOLOGY {
    background: #fff url('/Content/bg-biology.jpg') no-repeat center center;
}

.header-bg-sample-LIVESTOCK {
    background: #fff url('/Content/bg-livestock.jpg') no-repeat center center;
}

.header-bg-sample {
}

    .header-bg-sample img {
        margin: 0 auto;
        display: block;
        max-height: 100px;
        width: auto;
        max-width: 80%;
        margin-top: 25px;
    }

table th.products-header {
    padding: 10px;
    text-align: center;
}

table td.products-spacer {
    padding: 10px;
}

table th.chart-head {
    position: relative;
}

    table th.chart-head span {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        line-height: 20px;
    }

table td.chart-cell {
    position: relative;
    min-width: 250px;
    background: rgb(255,255,255);
}

/* Recommendation comments */
.form-group.recs-specific {
    margin-top: 10px;
    border-top: solid 1px #ccc;
    padding-top: 10px;
}

    .form-group.recs-specific .col-form-label {
        font-weight: bold;
    }

/* Grouping products together (by tank) */
tr.bg-grouping-A {
    background-color: #ffffee;
}

tr.bg-grouping-B {
    background-color: #eeffee;
}

tr.bg-grouping-C {
    background-color: #eeffff;
}

tr.bg-grouping-D {
    background-color: #eeeeff;
}

tr.bg-grouping-E {
    background-color: #ffeeff;
}

img.accreditation {
    display: inline-block;
    width: auto;
    height: 25px;
}

    img.accreditation.accreditation-aspac {
        height: 18px;
    }

.contact-signature .signature-wrapper {
    height: 100px;
}

.contact-signature img {
    max-height: 100px;
}

.sample-results-header {
    line-height: 1.2;
}

span.test-element {
    display: inline-block;
    width: 60px;
    overflow: hidden;
    vertical-align: middle;
}

/* Microbial table formatting */
.table-micro-guidelines p {
    display: inline;
    margin: 0;
}

/* Appears below the number result */
span.result-type {
    display: block;
    margin-top: -4px;
}


/* Rec request quote login panel */
.request-quote-wrapper {
    background: #000 url('/Content/Canva-Seedling-in-a-Pot-1024x683.jpg') center center no-repeat;
    background-size: cover;
}

    .request-quote-wrapper .card {
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
        background-color: rgba(40,40,40,0.85) !important;
    }




/*************************************************
* Optimal Level Charts
*************************************************/

table td.chart-cell span.chart-line {
    display: block;
    height: 25px;
    background-color: #bbb;
    border: solid 1px #eee;
    opacity: 0.7;
    transition: all ease 200ms;
}

.sample-results-wrapper-japan table td.chart-cell span.chart-line {
    border: 0;
}

table td.chart-cell span.chart-line:hover {
    opacity: 1;
}

/* Custom report formatting to remove OLs for certain report types */
.sample-results-body.soil_no_ols .display-optimals,
.sample-results-body.soil_biology_no_ols .display-optimals,
.sample-results-body.sap_no_ols .display-optimals,
.sample-results-body.oil .display-optimals,
.sample-results-body.water_no_ols .display-optimals,
.sample-results-body.dt_no_ols .display-optimals,
.sample-results-body.symbio .display-optimals,
.sample-results-body.symbio_guidelines .display-optimals,
.sample-results-body.eurofins .display-optimals,
.sample-results-body.eurofins .display-extraction {
    display: none !important;
}

@media (min-width: 1200px) {
    .sample-results-body.soil_no_ols .display-extraction,
    .sample-results-body.soil_biology_no_ols .display-extraction,
    .sample-results-body.sap_no_ols .display-extraction,
    .sample-results-body.oil .display-extraction,
    .sample-results-body.water_no_ols .display-extraction,
    .sample-results-body.dt_no_ols .display-extraction,
    .sample-results-body.symbio .display-extraction,
    .sample-results-body.symbio_guidelines .display-extraction,
    .sample-results-body.eurofins .display-extraction {
        width: 350px;
        padding-left: 200px;
    }
}


/* OL ranges vary from item to item */
table td.chart-cell-optimal-generic {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 42%, #afd9be 42%, #afd9be 58%, rgba(240,240,240,1) 58%);
}

/* Background is hidden for  comparison charts */
table tr.agpro-row-comparison td.chart-cell-optimal-generic {
    background: linear-gradient(90deg, rgba(240,240,240,0) 0%, rgba(240,240,240,0) 42%, #afd9be 42%, #afd9be 58%, rgba(240,240,240,0) 58%);
}

/* Livestock has a grey background instead of green for "optimal", and uses 40% to 60% (the bar width is calculated differently to hort samples) */
table tr.agpro-row-livestock td.chart-cell-optimal-generic {
    background: linear-gradient(90deg, rgba(240,240,240,0) 0%, rgba(240,240,240,0) 40%, #eee 40%, #eee 60%, rgba(240,240,240,0) 60%);
}


/* 2020-10-22 changed from blue -> aqua -> green -> orange -> red to red -> orange -> green -> orange -> red */
/* Eventually we'll probably want to look at sample-specific colours*/
/* 2020-12-02 removed yellow, replaced with orange */
table td.chart-cell span.chart-line.chart-line-very-low {
    background-color: rgba(255, 63, 53, 0.9); /* red */
    /* background-color: rgba(102, 71, 255, 0.9);  blue */
}

table td.chart-cell span.chart-line.chart-line-low {
    background-color: rgba(255, 149, 28, 0.9);
    /* background-color: rgba(119, 191, 255, 0.9); */
}

table td.chart-cell span.chart-line.chart-line-medium-low {
    background-color: rgba(255, 149, 28, 0.9);
    /* background-color: rgba(255, 251, 33, 0.9); */
    /*background-color: rgba(127, 255, 231, 0.9); */
}

table td.chart-cell span.chart-line.chart-line-acceptable,
table td.chart-cell span.chart-line.chart-line-suits-most-crops,
table td.chart-cell span.chart-line.chart-line-suitable,
table td.chart-cell span.chart-line.chart-line-optimal,
table td.chart-cell span.chart-line.chart-line-optimal-low,
table td.chart-cell span.chart-line.chart-line-optimal-high,
table td.chart-cell span.chart-line.chart-line-optimal-high-potential-to-corrode,
table td.chart-cell span.chart-line.chart-line-optimal-high-potential-to-scale {
    background-color: rgba(109, 255, 76, 0.9);
}

table td.chart-cell span.chart-line.chart-line-medium-high,
table td.chart-cell span.chart-line.chart-line-high-salinity {
    background-color: rgba(255, 149, 28, 0.9);
    /*background-color: rgba(255, 251, 33, 0.9); */
}

table td.chart-cell span.chart-line.chart-line-high,
table td.chart-cell span.chart-line.chart-line-slight-potential-to-corrode,
table td.chart-cell span.chart-line.chart-line-slight-potential-to-scale {
    background-color: rgba(255, 149, 28, 0.9);
}


table td.chart-cell span.chart-line.chart-line-very-high {
    background-color: rgba(255, 63, 53, 0.9);
}

/* For water samples, we change the colour scheme to indicate that lower is (almost?) always better 
    This includes overrides for the generic terms (Low, Optimal etc.) as well as broad rules for the specific test types (hardness, EC etc.)
*/

.sample-results-body.water table td.chart-cell-optimal-generic,
.sample-results-body.water table td.chart-cell.ec,
.sample-results-body.water table td.chart-cell.hardness,
.sample-results-body.water table td.chart-cell.lsi {
    /*background: linear-gradient(90deg, #afd9be 0%, #afd9be 30%, rgba(240,240,240,1) 58%, rgba(240,240,240,1) 58%); */
    background: rgba(240,240,240,1);
}


.sample-results-body.water table td.chart-cell span.chart-line.chart-line-very-low {
    background-color: rgba(109, 255, 76, 0.9); /* Low = green for water */
}

.sample-results-body.water table td.chart-cell span.chart-line.chart-line-low,
table td.chart-cell span.chart-line.chart-line-soft,
table td.chart-cell span.chart-line.chart-line-irrigation-class-1 {
    background-color: rgba(109, 255, 76, 0.9);
}

.sample-results-body.water table td.chart-cell span.chart-line.chart-line-medium-low,
table td.chart-cell span.chart-line.chart-line-mod-soft,
table td.chart-cell span.chart-line.chart-line-irrigation-class-2 {
    background-color: rgba(149, 245, 66, 0.9);
}

.sample-results-body.water table td.chart-cell span.chart-line.chart-line-optimal,
table td.chart-cell span.chart-line.chart-line-irrigation-class-3 {
    background-color: rgba(169, 225, 66, 0.9);
}

.sample-results-body.water table td.chart-cell span.chart-line.chart-line-medium-high,
table td.chart-cell span.chart-line.chart-line-slightly-hard,
table td.chart-cell span.chart-line.chart-line-high-salinity,
table td.chart-cell span.chart-line.chart-line-irrigation-class-4 {
    background-color: rgba(255, 149, 28, 0.9);
}

.sample-results-body.water table td.chart-cell span.chart-line.chart-line-high,
table td.chart-cell span.chart-line.chart-line-hard {
    background-color: rgba(255, 149, 28, 0.9);
}


.sample-results-body.water table td.chart-cell span.chart-line.chart-line-very-high,
table td.chart-cell span.chart-line.chart-line-very-high-salinity,
table td.chart-cell span.chart-line.chart-line-very-hard,
table td.chart-cell span.chart-line.chart-line-irrigation-class-5 {
    background-color: rgba(255, 63, 53, 0.9);
}




/*************************************************
* Special block for EC
*************************************************/

.ec-wrapper .ec-inner {
    background-color: #f7f7f7;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    height: 100%;
}

    .ec-wrapper .ec-inner img {
        display: none;
    }

    .ec-wrapper .ec-inner.active img {
        display: block;
        z-index: 99;
        pointer-events: none;
        position: absolute;
        top: -4px;
        left: 50%;
        margin-left: -5px;
    }

    .ec-wrapper .ec-inner.active {
        border: solid 1px #474747;
    }




/*************************************************
* Special block for Hardness
*************************************************/

.table th.chart-head-hardness {
    padding: 0;
}

    .table th.chart-head-hardness div.hardness {
        line-height: 14px;
        padding: 14px 5px;
        display: block;
        float: left;
        width: 20%;
        text-align: center;
    }




/*************************************************
* Nutrient Balancing Chart (elemental recs)
*************************************************/

/* Bar charts for nutrient balancing */
th.th-nutrient-title {
    width: 11%;
}

th.th-livestock-nutrient-title {
    width: 18%;
}

/* Now we support different numbers of columns */
th.th-nutrient-fixed-15 {
    width: 5.56%;
    text-align: center;
}

th.th-nutrient-fixed-14 {
    width: 5.93%;
    text-align: center;
}

.legend {
    display: inline-block;
    margin-right: 10px;
}

    .legend .inner {
        display: inline-block;
        width: 25px;
    }

.legend-required .inner {
    background-color: #cccccc;
}

.legend-applied .inner {
    background-color: #aaffaa;
}

.legend-excess .inner {
    background-color: #ffccaa;
}

th.nutrient-excess {
    background-color: #ffccaa;
}





/*************************************************
* Cation Chart Styling (Chart.js)
*************************************************/

.chart-area-cations {
    margin: 0 auto;
    max-width: 250px;
}

.chart-area-livestock  {
    margin: 0 auto;
    min-width: 300px;
    width: 600px;
    max-width: 100%;
}

.chart-legend-agpro {
    margin-bottom: 10px;
}

    .chart-legend-agpro .chart-legend-inner {
        display: block;
        position: relative;
        min-width: 150px;
    }

    .chart-legend-agpro .chart-legend-colour {
        display: inline-block;
        width: 25px;
        height: 10px;
        background-color: #000;
        border-radius: 5px;
    }

    /* NOTE: These are just hard-coded for now, possibly make it dynamic in the future */
    .chart-legend-agpro #colour-0 {
        background-color: #FFD36D;
    }

    .chart-legend-agpro #colour-1 {
        background-color: #FF8263;
    }

    .chart-legend-agpro #colour-2 {
        background-color: #D5FF89;
    }

    .chart-legend-agpro #colour-3 {
        background-color: #D1FFDB;
    }

    .chart-legend-agpro #colour-4 {
        background-color: #f4ccfc;
    }

    .chart-legend-agpro #colour-5 {
        background-color:#d9d9d9 
    }

    .chart-legend-agpro .chart-legend-text {
        line-height: 15px;
        font-size: 12px;
    }

        .chart-legend-agpro .chart-legend-text i {
            position: absolute;
            right: 0;
            top: 5px;
            font-style: normal;
        }




/*************************************************
* Trendline chart / legend styling
*************************************************/

#trendline-outer {
    position: relative;
}

.chart-wrapper-line {
    min-height: 200px;
}

    .chart-wrapper-line .agpro-legend {
        list-style: none;
    }

        .chart-wrapper-line .agpro-legend li {
            cursor: pointer;
            font-size: 10px;
            padding: 2px 5px;
            margin: 2px;
            border: solid 2px #117B3B;
            transition: ease all 200ms;
        }

            .chart-wrapper-line .agpro-legend li.hidden {
                border-color: #fff !important;
            }





/*************************************************
* AgPro Expandable List Table
*************************************************/

table.table-samples > tbody > tr:nth-child(4n + 1) {
    background-color: #f9f9f9;
}

table tr.accordion-toggle {
    cursor: pointer;
}

    table tr.accordion-toggle:hover {
        background-color: #eee !important;
    }

/* NOTE: Made this a bit more generic, 'cause the style is great */
table > tbody > tr.agpro-row,
table > tbody > tr.agpro-row {
    border-left: solid 5px #ddd;
}

    /* In progress = light blue */
    table > tbody > tr.agpro-row.status-sample-received,
    table > tbody > tr.agpro-row.status-scheduled,
    table > tbody > tr.agpro-row.status-progress {
        border-left: solid 5px rgb(80, 160, 200);
    }

    /* Complete = agpro green */
    table > tbody > tr.agpro-row.status-analysis-complete,
    table > tbody > tr.agpro-row.status-recommendations-complete,
    table > tbody > tr.agpro-row.status-complete {
        border-left: solid 5px #13634b;
    }

    /* Paid services = payment blue */
    table > tbody > tr.agpro-row.status-data,
    table > tbody > tr.agpro-row.status-paid {
        border-left: solid 5px #2a4da5;
    }

    table > tbody > tr.agpro-row-details {
        border-left: solid 5px #eee;
    }

    table > tbody > tr.agpro-row-details.status-sample-received,
    table > tbody > tr.agpro-row-details.status-scheduled,
    table > tbody > tr.agpro-row-details.status-progress  {
        border-left: solid 5px rgba(119, 191, 255, 0.4);
    }

    table > tbody > tr.agpro-row-details.status-analysis-complete,
    table > tbody > tr.agpro-row-details.status-recommendations-complete,
    table > tbody > tr.agpro-row-details.status-complete {
        border-left: solid 5px rgba(56,161,92,0.4);
    }

        table > tbody > tr.agpro-row-details.status-data,
        table > tbody > tr.agpro-row-details.status-paid {
            border-left: solid 5px rgba(119, 191, 255, 0.4);
        }

        table > tbody > tr.agpro-row-details .inner {
            border-bottom: solid 1px #eee;
        }

        table > tbody > tr.agpro-row-details.status-sample-received .inner,
        table > tbody > tr.agpro-row-details.status-scheduled .inner,
        table > tbody > tr.agpro-row-details.status-progress .inner {
            border-bottom: solid 1px rgba(119, 191, 255, 0.4);
        }

        table > tbody > tr.agpro-row-details.status-analysis-complete .inner,
        table > tbody > tr.agpro-row-details.status-recommendations-complete .inner,
        table > tbody > tr.agpro-row-details.status-complete .inner {
            border-bottom: solid 1px rgba(56,161,92,0.4);
        }

        table > tbody > tr.agpro-row-details.status-data .inner,
        table > tbody > tr.agpro-row-details.status-paid .inner {
            border-bottom: solid 1px rgba(119, 191, 255, 0.4);
        }

@media (max-width: 767px) {
    table > tbody > tr.agpro-row-details .inner {
        border-right: none !important;
        padding: 0;
        max-width: calc(100vw - 40px);
        overflow-x: scroll;
    }
}

/* Simple label indicating the farm has subscribed to AgPro Data */
.label-agpro-data img {
    display: inline-block;
    height: 20px;
    width: 20px;
}

table > tbody > tr.agpro-row-details .inner {
    position: relative;
}

    table > tbody > tr.agpro-row-details .inner .btn-close {
        position: absolute;
        top: 5px;
        right: 5px;
        min-width: 25px;
        width: 25px;
    }



/*************************************************
* AgPro Comparison Report (based on Expandable List Table)
*************************************************/
    /* Note we currently only support up to 5 samples, maybe expand in the future? Palette from https://coolors.co/palettes/trending */
    table > tbody > tr.agpro-row.agpro-row-comparison-0 {
        border-left: solid 5px rgba(346, 70, 94, 1);
        background-color: rgba(346, 70, 94, 0.1);
    }

table > tbody > tr.agpro-row.agpro-row-comparison-1 {
    border-left: solid 5px rgba(255, 209, 102, 1);
    background-color: rgba(255, 209, 102, 0.1);
}

table > tbody > tr.agpro-row.agpro-row-comparison-2 {
    border-left: solid 5px rgba(6, 214, 160, 1);
    background-color: rgba(6, 214, 160, 0.1);
}

table > tbody > tr.agpro-row.agpro-row-comparison-3 {
    border-left: solid 5px rgba(17, 138, 178, 1);
    background-color: rgba(17, 138, 178, 0.1);
}

table > tbody > tr.agpro-row.agpro-row-comparison-4 {
    border-left: solid 5px rgba(7, 59, 76, 1);
    background-color: rgba(7, 59, 76, 0.1);
}

table > tbody > tr.row-spacer,
table > tbody > tr.row-spacer td.chart-cell-optimal-generic {
    background: #fff;
}

table.table-livestock-comparison > tbody > tr.row-spacer,
table.table-livestock-comparison > tbody > tr.row-spacer td.chart-cell-optimal-generic {
    background: transparent !important;
}

/*************************************************
* AgPro Livestock Comparison Report (based on the main comparison report)
*************************************************/
    .livestock-comparison-display-0 {
        border-left: solid 5px rgba(346, 70, 94, 1);
        background-color: rgba(346, 70, 94, 0.1);
    }

.livestock-comparison-display-1 {
    border-left: solid 5px rgba(255, 209, 102, 1);
    background-color: rgba(255, 209, 102, 0.1);
}

.livestock-comparison-display-2 {
    border-left: solid 5px rgba(6, 214, 160, 1);
    background-color: rgba(6, 214, 160, 0.1);
}

.livestock-comparison-display-3 {
    border-left: solid 5px rgba(17, 138, 178, 1);
    background-color: rgba(17, 138, 178, 0.1);
}

.livestock-comparison-display-4 {
    border-left: solid 5px rgba(7, 59, 76, 1);
    background-color: rgba(7, 59, 76, 0.1);
}








/*************************************************
* Recommendations Edit Wizard and linked controls
*************************************************/

.recs-copy-scroll {
    height: 250px;
    overflow-y: scroll;
}

.sample-rec-row {
    cursor: pointer;
    transition: all ease 100ms;
}

    .sample-rec-row.selected {
        background-color: #117B3B !important;
        color: #fff !important;
    }

.product-line-item {
    transition: all ease 200ms;
}

    .product-line-item.unsaved {
        background-color: #fff3cd !important;
    }

.soil-balance-wrapper {
}

    .soil-balance-wrapper h4 {
        padding-bottom: 10px;
        border-bottom: solid 1px #cacaca;
    }


.rec-results-wrapper .soil-balance-wrapper, .rec-results-wrapper .soil-balance-wrapper .cation-chart-wrapper {
    padding: 0 !important;
}

/* Recommendations livestock (vet prescriptions) page */
.individual-animals-wrapper {
    max-height: 300px;
    overflow-y: scroll;
}





/*************************************************
* Action / Tools hover panel
*************************************************/

@media (max-width: 1509px) {
    .tools-panel {
        background-color: rgba(0,0,0,0.85);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
    }

    .tools-panel .mt-1, 
    .tools-panel .mt-2 {
        margin-top: 0 !important;
    }

        .tools-panel .tools-block {
            display: inline-block;
            color: #fff;
        }

            .tools-panel .tools-block small {
                display: none;
            }

            .tools-panel .btn-close {
                display: none;
            }

            .tools-panel .form-control {
                display: inline;
                max-width: 200px;
            }
}

@media (min-width: 1510px) {
    .tools-panel {
        line-height: 1.2;
        position: fixed;
        right: 5px;
        top: 40%;
        width: 200px;
        padding: 10px;
        border: solid 1px #ccc;
        background-color: #fafafa;
        transition: all ease 0;
        box-shadow: 2px 2px 4px #bbb;
        border-radius: .25rem;
    }

    .tools-panel .d-inline,
    .tools-panel .d-inline-block {
        display: block !important; /* Override for large screen toolbox */
        margin-left: 0 !important;
    }    

        .tools-panel .btn {
            width: 100%;
            margin-top: 3px;
        }

    .tools-panel .btn-close {
        position: absolute;
        top: 3px;
        right: 8px;
        border: none !important;
        background: none !important;
        color: #13634b;
        font-size: 20px;
        width: 30px;
        line-height: 30px;
    }   


}

#page-toolbox.hiding {
    animation-name: toolbox-hiding;
    animation-timing-function: ease;
    animation-duration: 500ms;
    animation-iteration-count: 1;
} 

#page-toolbox.showing {

    animation-name: toolbox-hiding;
    animation-timing-function: ease;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: reverse;
}

@keyframes toolbox-hiding {
    0% {
        transform: translateY(0) translateX(0) scale(1);
    }

    100% {
        transform: translateY(calc(-1 * (50vh - 100px))) translateX(60px) scale(0.3);
    }
}




/* Japan specific styling for tables and the like */
/* NOTE: This has all been removed in favour of the results-japan.css custom styling.
    Leave it in here for reference, but we'll probably never use this?
.blr-white {
    border-left: solid 1px #fff !important;
    border-right: solid 1px #fff !important;
}

.sample-results-wrapper-japan table tr.border-bottom-japan th, table tr.border-bottom th {
    border-bottom: 3px double #888;
}

.sample-results-wrapper-japan table tr.border-top-japan td, table tr.border-top th {
    border-top: 3px double #888;
}

table.table-bordered-double {
    border-collapse: collapse;
}

    table.table-bordered-double td, table.table-bordered-double th {
        border: 3px double black;
    }

    table.table-bordered-double tr:first-child td, table.table-bordered-double tr:first-child th {
        border-top: 0;
    }

    table.table-bordered-double tr td:first-child, table.table-bordered-double tr th:first-child {
        border-left: 0;
    }

    table.table-bordered-double tr:last-child td, table.table-bordered-double tr:last-child th {
        border-bottom: 0;
    }

    table.table-bordered-double tr td:last-child, table.table-bordered-double tr th:last-child {
        border-right: 0;
    }

table tr.bb-double th, table tr.bb-double td {
    border-bottom: 3px double #888;
}

table tr th.bl-double, table tr td.bl-double {
    border-left: 3px double #888;
}

table tr th.br-double, table tr td.br-double {
    border-right: 3px double #888;
}

table tr.bt-double th, table tr.bt-double td {
    border-top: 3px double #888;
}

table tr.bb-single th, table tr.bb-single td {
    border-bottom: 1px solid #888;
}

table tr th.bl-single, table tr td.bl-single {
    border-left: 1px solid #888;
}

table tr th.br-single, table tr td.br-single {
    border-right: 1px solid #888;
}

table tr.bt-single th, table tr.bt-single td {
    border-top: 1px solid #888;
}
.sample-results-wrapper-japan table tr.bb-japan th, .sample-results-wrapper-japan table tr.bb-japan td {
    border-bottom: 3px double #888;
}

.sample-results-wrapper-japan table tr th.bl-japan, .sample-results-wrapper-japan table tr td.bl-japan {
    border-left: 3px double #888;
}

.sample-results-wrapper-japan table tr th.br-japan, .sample-results-wrapper-japan table tr td.br-japan {
    border-right: 3px double #888;
}

.sample-results-wrapper-japan table tr.bt-japan th, .sample-results-wrapper-japan table tr.bt-japan td {
    border-top: 3px double #888;
}
*/




/*************************************************
* New Sample Submission
*************************************************/

/* Japan sample request form */
.japan-sample-request .label > i {
    /* New plan, hide these numbers */
    display: none;
    font-weight: bold;
    font-size: 18px;
}

/* New sample request revamp */
.btn-test-icon {
    height: 100px;
    border: solid 3px #ccc;
    border-radius: 10px;
    transition: all ease 200ms;
    background-color: transparent;
    position: relative;
    color: #888;
}

    .btn-test-icon:hover, .btn-test-icon:active {
        color: #888;
        text-decoration: none;
        background-color: #fff;
    }

    .btn-test-icon > span {
        display: block;
    }

    .btn-test-icon.active {
        background-color: #fff;
        border-color: #117B3B;
        color: #117B3B;
    }

.lab-wrapper-hortus .btn-test-icon.active {
    border-color: #E67325;
    color: #E67325;
}

.lab-wrapper {
    background-color: transparent;
    cursor: pointer;
    transition: all ease 200ms;
    opacity: 0.5;
}

    .lab-wrapper:hover, .lab-wrapper:active {
        background-color: #fff;
    }

    .lab-wrapper.active {
        background-color: #fff;
        opacity: 1;
    }

    .lab-wrapper .logo-wrapper {
        width: 90%;
        max-width: 250px;
        height: 150px;
        margin: 0 auto;
    }

    .lab-wrapper.active .logo-wrapper {
    }

@media (max-width: 767px) {
    .lab-wrapper {
        font-size: 0.7em;
    }

        .lab-wrapper .logo-wrapper {
            height: 100px;
        }
}




/*************************************************
* New Sample Submission for LIVESTOCK (Neogen, Rocky Repro)
*************************************************/

/* Alternate row border colours... including the header */
.table-livestock > tbody > tr:nth-child(4n+2), .table-livestock > tbody > tr:nth-child(4n+3) {
    border-left: solid 3px #117B3B;
}

.table-livestock > tbody > tr:nth-child(4n+3) {
    border-bottom: solid 3px #117b3B;
    background-color: #e3ede7;
}

.table-livestock > tbody > tr:nth-child(4n+4), .table-livestock > tbody > tr:nth-child(4n+1) {
    border-left: solid 3px rgb(255, 149, 28);
}

.table-livestock > tbody > tr:nth-child(4n+1) {
    border-bottom: solid 3px rgb(255,149,28);
    background-color: rgb(246, 232, 216);
}

.table-livestock > tbody > tr:first-child {
    background: #fff;
    border-left: solid 3px #fff;
    border-bottom: none;
}

.td-neogen-test {
    width: 200px;
}





/*************************************************
* Livestock Manage
*************************************************/

.livestock-wrapper {
    height: calc(100vh - 450px);
    overflow-y: scroll;
}

.livestock-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.livestock-wrapper .livestock-row.selected {
    background-color: rgba(255, 149, 28, 0.9);
}

.livestock-edit {
    font-size: 0.75rem;
}

.bg-sire {
    padding: 3px 10px;
    background: #F1F5FF;
}

.bg-dam {
    padding: 3px 10px;
    background: #FFF1FE;
}

/*
.bg-recip {
    padding: 3px 10px;
    background: #fafff1;
}
*/



/*************************************************
* Livestock Manage
*************************************************/
.btn-livestock-select {
}

    .btn-livestock-select.active {
        color: #117B3B;
        font-weight: bold;
    }

    /* temporary styling - removed the map entirely */
    #animal-select {
    }

    #animal-select .inner {
        max-height: 400px;
        overflow-y: auto;
        transition: all ease 200ms;
    }

    #animal-select .inner.inner-short {
        max-height: 150px;
    }

    #animal-select .livestock-row .selected {
        font-weight: bold;
    }



/*************************************************
* Subscriptions
*************************************************/

.card.card-subscription {
    border: none;
    background: #f0f0f0;
}

    .card.card-subscription.card-ceres-tag {
        background: #292D50;
    }

    .card.card-subscription .card-header {
        background-color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
    }

    .card.card-subscription.card-ceres-tag .card-header {
        background: #02072F;
    }

    .card.card-subscription .card-header img {
        display: inline-block;
        height: 35px;
        width: auto;
    }

    .card.card-subscription.card-ceres-tag .card-header img:first-child {
        height: 30px;
        margin-top: 2px;
    }

    .card.card-subscription .card-body {
        padding: 10px 20px;
    }

    .card.card-subscription.card-ceres-tag .card-body {
        color: #fff;
    }

    .card.card-subscription .card-body h3 {
        border-bottom: solid 1px #aaa;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .card.card-subscription .card-body input.form-control-lg {
        padding-left: 5px;
        padding-right: 5px;
    }

    .card.card-subscription .card-body h2 {
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: bold;
    }

        .card.card-subscription .card-body h2 small {
            font-size: 12px;
        }

    .card.card-subscription .card-body p {
        margin-bottom: 0;
    }

    .card.card-subscription .card-body .price-block {
        height: 85px;
    }

    .card.card-subscription .card-body .subscribe-block {
        height: 115px;
    }

        .card.card-subscription .card-body .subscribe-block small {
            display: block;
            line-height: 1.2;
        }

    .card.card-subscription .card-body .btn {
        margin: 5px auto;
        padding: 4px 15px;
        font-weight: bold;
        width: 250px;
        max-width: 90%;
    }




/*************************************************
* Dashboard tasks module (custom carousel / slider)
*************************************************/

.slider-wrapper > .btn {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    border-color: #666;
    color: #666;
    /*
    border: none;
    background-color: #666;
    color: #fff;
    */
}

.slider-wrapper > #scroll-left {
    left: -50px;
}

.slider-wrapper > #scroll-right {
    right: -50px;
}

@media (max-width: 767px) {
    .slider-wrapper > .btn {
        display: none;
    }
}

/* Firefox */
.slider-wrapper .slider-scroll {
    scrollbar-width: thin;
    scrollbar-color: #666 #eee;
}

    /* Webkit */
    .slider-wrapper .slider-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .slider-wrapper .slider-scroll::-webkit-scrollbar-track {
        background-color: #eee;
    }

    .slider-wrapper .slider-scroll::-webkit-scrollbar-thumb {
        background-color: #666;
        border-radius: 4px;
    }

#slider-tasks {
    height: 325px;
}


.task {
    position: relative;
    display: block;
    width: 300px;
    height: 300px;
    margin-right: 15px;
    border: solid 1px #ccc;
    background-color: #fafafa;
    transition: all ease 200ms;
    box-shadow: 2px 2px 4px #bbb;
    border-radius: .25rem;
}

.task:hover,
.task:active {
    border-color: #13634b;
    background-color: #fff;
}

.task a.task-link {
    padding: 15px;
    display: block;
}

.task a.task-link:hover,
.task a.task-link:active {
    text-decoration: none;
}


.task .task-icon-wrapper {
    height: 80px;
}

.task .task-icon-wrapper img.task-image {
    margin-top: 10px;
    width: 60px;
    height: 60px;
    display: block;
}

    .task .task-icon-wrapper span.task-icon {
        display: inline-block;
        width: 60px;
        height: 60px;
        font-size: 35px;
        line-height: 60px;
        background-color: #117B3B;
        color: #fff;
        border-radius: 30px;
    }

.task .task-text-wrapper {
    height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.task .btn-options {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none !important;
    background: none !important;
    color: #13634b;
    font-size: 20px;
    width: 30px;
    line-height: 30px;
}

.task .task-action-wrapper {
    height: 50px;
}

.task .task-action-wrapper .btn {
    height: 50px;
    /*
    border: none !important;
    border-top: solid 1px #ccc !important;
    */
    color: #13634b;
    background-color: #fff;
}

.task .task-action-wrapper .btn:disabled {
}

.task .dropdown-menu svg {
    width: 20px;
}

.modal .modal-task-action-icon {
    font-size: 30px;
}

/* Size tweaks for mobile */
@media (max-width: 767px) {

    #slider-tasks {
        height: 250px;
    }

    .task {
        width: 225px;
        height: 225px;
    }

    .task a.task-link {
        padding: 5px;
    }

        .task .task-icon-wrapper {
            height: 50px;
        }

            .task .task-icon-wrapper img.task-image {
                margin-top: 5px;
                width: 40px;
                height: 40px;
            }

            .task .task-icon-wrapper span.task-icon {
                width: 40px;
                height: 40px;
                font-size: 30px;
                line-height: 40px;
                border-radius: 20px;
            }

        .task .task-text-wrapper {
            height: 125px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.1;
            font-size: 14px;
        }

        .task .task-action-wrapper {
            height: 40px;
        }

            .task .task-action-wrapper .btn {
                height: 40px;
            }
}


/* Colour overrides for a paid plan */
.task.task-paid {
    color: #2a4da5;
}

    .task.task-paid a.task-link {
        color: #2a4da5 !important;
    }

.task.task-paid .task-icon-wrapper span.task-icon {
    background-color: #2a4da5;
}





/*************************************************
* Dashboard notifications
*************************************************/
/* Mostly mobile styling tweaks */
@media (max-width: 767px) {
    .notification {
        padding: 5px 10px;
    }

    .notification .notification-title {
        display: block;
        font-size: 80%;
    }

    .all-notifications a {
        display: block;
    }
}

@media (min-width: 768px) {
    .notification .notification-added-by {
        float: right;
    }
}




/*************************************************
* Dashboard quick links
*************************************************/

.quick-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 150px;
    height: 150px;
    padding: 15px;
    border: solid 1px #ccc;
    background-color: #fafafa;
    text-align: center;
    box-shadow: 2px 2px 4px #bbb;
    transition: all ease 200ms;
    /*border-radius: .25rem;*/
    border-radius: 50%;
}

.quick-link:hover, 
.quick-link:active {
    border: solid 1px #13634b;
    background-color: #fff;
    text-decoration: none;
}

.quick-link-icon {
    height: 60px;
    line-height: 60px;
    font-size: 40px;
}

.quick-link-text {
    line-height: 1.2;
}

/* Change size depending on screen size? */
@media (max-width: 767px) {
    .quick-link {
        width: 100px;
        height: 100px;
        font-size: 12px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

        .quick-link .quick-link-icon {
            height: 40px;
            line-height: 40px;
            font-size: 30px;
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    .quick-link {
        width: 100px;
        height: 100px;
        font-size: 12px;
    }

    .quick-link .quick-link-icon {
        height: 40px;
        line-height: 40px;
        font-size: 30px;
    }
}




/*************************************************
* Dashboard (misc controls)
*************************************************/

.dashboard .agpro-promo {
    width: 336px;
    min-width: 336px;
    max-width: 336px;
}

.dashboard-connect {
    border-radius: 0.25rem;
    min-height: 280px;    
    padding-top: 20px;
}






/*************************************************
* Connect to an Advisor (Consultant Group)
*************************************************/

.consultant-group {
    width: 155px;
    height: 155px;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all ease 200ms;
    border: solid 3px #13634b;
    /*border-bottom: solid 10px #000; */
    line-height: 1.1;
    background-color: #000;
    opacity: 0.6;
    text-align: center;
    box-shadow: 3px 3px 8px #888;
}

    .consultant-group a {
        width: 149px;
        height: 149px;
        position: relative;
        display: block;
        padding: 5px;
        color: #fff !important;
        text-decoration: none;
    }

    .consultant-group img {
    }

    .consultant-group span.tick {
        position: absolute;
        opacity: 0;
        transition: all ease 200ms;
        top: 0;
        right: 10px;
        color: #fff;
        font-size: 30px;
    }

    .consultant-group.selected {
        opacity: 1;
        border-color: #13634b;
    }

    .consultant-group.selected span.tick {
        opacity: 1;
    }

        .consultant-group:hover img, .consultant-group.selected img {
            opacity: 1;
        }


.table-request-access {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .consultant-group {
        width: 125px;
        height: 125px;
        margin-right: 5px;
        margin-left: 5px;
    }

        .consultant-group a {
            width: 119px;
            height: 119px;
        }

        .consultant-group img {
            width: 60px;
            height: 60px;
        }

        .consultant-group span.tick {
            font-size: 20px;
        }

}




/* Report styling for FARM comparative sap reports */
.table-farm-comparative .result-farm-cell {
    text-align: center;
    border: solid 1px #aaa;
    color: #fff;
}

.table-farm-comparative .result-farm-cell-very-low {
    background-color: rgba(255, 63, 53, 0.9); /* red */
    /* background-color: rgba(102, 71, 255, 0.9);  blue */
}

.table-farm-comparative .result-farm-cell-low {
    background-color: rgba(255, 149, 28, 0.9);
    /* background-color: rgba(119, 191, 255, 0.9); */
}

.table-farm-comparative .result-farm-cell-medium-low {
    background-color: rgba(255, 149, 28, 0.9);
    /* background-color: rgba(255, 251, 33, 0.9); */
    /*background-color: rgba(127, 255, 231, 0.9); */
}

.table-farm-comparative .result-farm-cell-acceptable,
.table-farm-comparative .result-farm-cell-suits-most-crops,
.table-farm-comparative .result-farm-cell-suitable,
.table-farm-comparative .result-farm-cell-optimal,
.table-farm-comparative .result-farm-cell-optimal-low,
.table-farm-comparative .result-farm-cell-optimal-high {
    background-color: rgba(89, 180, 56, 0.9);
}

.table-farm-comparative .result-farm-cell-medium-high,
.table-farm-comparative .result-farm-cell-high-salinity {
    background-color: rgba(255, 149, 28, 0.9);
    /*background-color: rgba(255, 251, 33, 0.9); */
}

.table-farm-comparative .result-farm-cell-high {
    background-color: rgba(255, 149, 28, 0.9);
}


.table-farm-comparative .result-farm-cell-very-high {
    background-color: rgba(255, 63, 53, 0.9);
}





/* Report colour overrides for calculation specific (eg. lower is better or higher is better) */
table td.chart-cell span.calculation-comment {
    position: absolute;
    right: 15px;
    top: 3px;
    line-height: 25px;
    color: #333 !important;
    z-index: 99;
}

table td.chart-cell span.chart-line.chart-calculation-CappedLow.chart-line-very-low,
table td.chart-cell span.chart-line.chart-calculation-CappedLow.chart-line-low,
table td.chart-cell span.chart-line.chart-calculation-CappedLow.chart-line-optimal {
    background-color: rgba(109, 255, 76, 0.9);
}

table td.chart-cell span.chart-line.chart-calculation-CappedLow.chart-line-high {
    background-color: rgba(255, 149, 28, 0.9);
}

table td.chart-cell span.chart-line.chart-calculation-CappedLow.chart-line-very-high {
    background-color: rgba(255, 63, 53, 0.9); /* red */
}


table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-very-low {
    background-color: rgba(255, 63, 53, 0.9); /* red */
}

table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-low {
    background-color: rgba(255, 149, 28, 0.9);
}

table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-optimal,
table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-medium-high,
table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-high,
table td.chart-cell span.chart-line.chart-calculation-CappedHigh.chart-line-very-high {
    background-color: rgba(109, 255, 76, 0.9);
}




/* Lab manager blocks */
/* Livestock index charts */
.chart-legend-agpro .chart-legend-colour {
    display: inline-block;
    width: 25px;
    height: 10px;
    background-color: #000;
    border-radius: 5px;
}

.chart-legend-agpro .test-classification-fertility .chart-legend-colour {
    background-color: #66c8ff; 
}

.chart-legend-agpro .test-classification-genomics .chart-legend-colour {
    background-color: #ca91e6;
}

.chart-legend-agpro .test-classification-growth .chart-legend-colour {
    background-color: #a0e426;
}

.chart-legend-agpro .test-classification-behaviour .chart-legend-colour {
    background-color: #fdf148;
}

.chart-legend-agpro .test-classification-carcass .chart-legend-colour {
    background-color: #ffab00;
}


.chart-legend-agpro thead a {
    color: #000 !important;
}

.chart-legend-agpro thead tr {
    border-left: solid 15px #fff;
}

.chart-legend-agpro .test-header-fertility,
.chart-legend-agpro .test-row-fertility {
    border-left: solid 15px #66c8ff;
}

.chart-legend-agpro .test-header-genomics,
.chart-legend-agpro .test-row-genomics {
    border-left: solid 15px #ca91e6;
}

.chart-legend-agpro .test-header-growth,
.chart-legend-agpro .test-row-growth {
    border-left: solid 15px #a0e426;
}

.chart-legend-agpro .test-header-behaviour,
.chart-legend-agpro .test-row-behaviour {
    border-left: solid 15px #fdf148;
}

.chart-legend-agpro .test-header-carcass,
.chart-legend-agpro .test-row-carcass {
    border-left: solid 15px #ffab00;
}





/*************************************************************
* Livestock traits count / star rating block
*************************************************************/
.traits-total {
    display: block;
    width: 200px;
    height: 160px;
    background-color: #C8C3C3;
    color: #fff;
    margin-bottom: 10px;
}

.traits-total h4 {
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
}

.traits-total .traits-stars {
    text-align: center;
    font-size: 23px;
}

    .traits-total.traits-count-lowest {
        background-color: #C8C3C3;
    }
    .traits-total.traits-count-low {
        background-color: #FF5757;
    }
    .traits-total.traits-count-medium {
        background-color: #FDB351;
    }
    .traits-total.traits-count-high {
        background-color: #7ED957;
    }
    .traits-total.traits-count-highest {
        background-color: #008037;
    }


.traits-total .table tr td {
    padding: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

.traits-total .traits-count {
    position: relative;
    width: 35px;
    text-align: center;
    font-size: 23px;
    line-height: 23px;
}

.traits-total .trait-name {
    font-size: 14px;
}

.traits-total .traits-count span {
    display: block;
    position: absolute;
    left: 0;
    top: 8px;
    line-height: 16px;
    font-size: 12px;
    width: 35px;
    text-align: center;
    color: #000 !important;
    z-index: 20;
}


@media (max-width: 575px) {
    .traits-total {
        margin-left: 1px;
        margin-right: 1px;
        width: 150px;
    }

        .traits-total h4 {
            padding-top: 5px;
            padding-bottom: 5px;
            line-height: 1.2;
            font-size: 12px;
        }

        .traits-total .traits-stars {
            font-size: 18px;
        }

        .traits-total .traits-count {
            width: 30px;
            font-size: 22px;
            line-height: 22px;
        }

        .traits-total .trait-name {
            font-size: 12px;
            line-height: 22px;
        }

        .traits-total .traits-count span {
            top: 8px;
            line-height: 14px;
            width: 30px;
        }
}


/*************************************************************
* Livestock report and sale card - additional styling
*************************************************************/

img.img-livestock-header {
    max-height: 300px;
}

.card-writing {
    margin-bottom: 0;
    border-bottom: dashed 1px #999;
    line-height: 40px;
}


.livestock-index-chart-cell {
    margin-top: 10px;
    position: relative;
    display: block;
    height: 35px;
    margin: 0 auto;
    background: linear-gradient(90deg, rgba(255, 63, 53, 0.9) 0%, rgba(255, 149, 28, 0.9) 33%, rgb(255, 236, 28, 0.9) 66%, rgba(109, 255, 76, 0.9) 100%);
}

    .livestock-index-chart-cell .divider {
        position: absolute;
        color: #000;
        font-size: 26px;
        line-height: 35px;
        border-right: solid 3px #000;
        padding-right: 5px;
        bottom: 0;
    }


h3.livestock-report-title {
    line-height: 35px;
    margin-bottom: 0;
}

.livestock-report-bar {
    max-width: 325px;
}

.livestock-report-bar h3 {
    padding-left: 10px;
    display: inline-block;
    line-height: 35px;
    margin-bottom: 0;
}

    .livestock-report-bar .livestock-score-explanation {
        display: inline-block;
        float: right;
        height: 35px;
        line-height: 35px;
    }




    @media (max-width: 767px) {
        .livestock-pedigree-wrapper {
            overflow-x: scroll;
        }
    }


    .livestock-catalogue-item:nth-child(2n+1) {
        background-color: #fcfcfc;
    }

.livestock-catalogue-item .livestock-index-chart-cell {
    width: 100%;
    height: 25px;
}

    .livestock-catalogue-item .livestock-index-chart-cell .divider {
        font-size: 20px;
        line-height: 25px;
    }


.livestock-catalogue-item .livestock-index-score {
    text-align: center !important;
}

.livestock-catalogue-item .livestock-score-explanation {
    display: none !important;
}

.livestock-catalogue-item .chart-area-livestock {
    min-width: 200px;
}

.livestock-catalogue-item .catalogue-chart-wrapper {
    max-width: 300px;
    margin: 0 auto;
}

.livestock-catalogue-item .img-batch-item {
    display: block;
    max-height: 250px;
    margin: 0 auto;
}


.livestock-card .livestock-description {
    font-size: 0.8rem;
}

.livestock-card .livestock-index-score {
    text-align: center !important;
}

.livestock-card .livestock-score-explanation {
    text-align: center !important;
}

.livestock-card .img-livestock {
    max-height: 200px;
}

.livestock-card .traits-total {
    display: inline-block;
    vertical-align: top;
}





/*************************************************************
* Sample Type Select (control for sample submission page)
*************************************************************/
.sample-type-select {
    width: 175px;
    height: 175px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.sample-type-select p.sample-type-title {
    line-height: 23px;
    min-height: 60px;
    height: 60px;
}

.sample-type-select p.sample-type-price {
    font-size: 0.9rem;
    text-align: center;
}

.sample-type-select s { /* strikethrough */
    font-size: 0.8rem;
}

/* Different colours for sample types */
.sample-type-select,
.sample-type-small {
    background-color: #f3f3f3;
}

.sample-type-soil {
    background-color: #e9cea8;
}

.sample-type-quicksoil {
    background-color: #e9cea8;
}

.sample-type-sap {
    background-color: #D7F4B7;
}

.sample-type-produce {
    background-color: #f1bdbb;
}

.sample-type-water {
    background-color: #B4C6E7;
}

.sample-type-dtis,
.sample-type-drytissue,
.sample-type-dry-tissue {
    background-color: #a4d0b3;
}

.sample-type-livestock {
    background-color: #fff3cd;
}

.btn.btn-icon.btn-select-new {
    width: 175px;
    height: 175px;
    font-size: 60px;
    text-align:center;
}

.sample-type-select .btn.btn-close {
    margin-right: -5px;
    margin-top: -2px;
}

.sample-type-select input[type=text] {
    background: rgba(255,255,255,0.5);
}


.sample-type-select .btn.btn-select {
    min-width: 175px;
    width: 175px;
    line-height: 1.2;
}

.sample-type-select .btn.btn-select p.sample-type-title {
    height: 95px;
    line-height: 1.2;
}

.sample-type-select .btn.btn-select:first-child {
    height: 145px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sample-type-select .btn.btn-more-info {
    padding: 0 10px;
    height: 30px;
    line-height: 25px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 0.8rem;
}

.sample-type-small {
    width: 225px;
    height: 50px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.sample-type-small .btn {
    display: inline-block;
    margin: 0;
}

.sample-type-small .btn.btn-select {
    padding: 2px 10px;
    line-height: 1.2;
    min-width: 185px;
    width: 185px;
    font-size: 0.8rem;
    height: 50px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sample-type-small .btn.btn-icon {
    line-height: 35px;
    height: 50px;
    min-width: 40px;
    width: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


@media (max-width: 767px) {

    /* Mobile specific styling to reduce the buttom sizes */
    .sample-type-select {
        width: 125px;
        height: 125px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .sample-type-select.sample-type-item {
        width: 150px;
        height: 140px;
    }

        .sample-type-select p.sample-type-title {
            min-height: 48px;
            height: 32px;
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 0;
        }

        .sample-type-select p.sample-type-title br {
        }

        .btn.btn-icon.btn-select-new {
            width: 125px;
            height: 125px;
        }

    .sample-type-select .btn.btn-select {
        min-width: 125px;
        width: 125px;
        padding: 3px;
        display: block;
    }

    .sample-type-select .btn.btn-select p.sample-type-title {
        height: 64px;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 0;
    }

    .sample-type-select p.sample-type-price {
        font-size: 12px;
        margin-bottom: 0;
    }

    .sample-type-select .btn.btn-select:first-child {
        height: 100px;
    }

    .sample-type-select .btn.btn-more-info {
        height: 25px;
        line-height: 18px;
    }

    .sample-type-small {
        width: 160px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .sample-type-small .btn.btn-select {
        padding: 2px 5px;
        min-width: 120px;
        width: 120px;
        font-size: 12px;
    }

    .sample-type-small p {
        margin-bottom: 0;
    }
}


/* Border style for PDF certificates 
    https://codepen.io/MyXoToD/pen/VaazQq
    (May need some work, positioning is kinda borked when we apply it to the PDFShift renderer)
*/
.pdf-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    padding: 5px;
    border: 2px solid #b78846;
    height: 950px;
}

    .pdf-box:before, .pdf-box:after {
        content: "•";
        position: absolute;
        width: 14px;
        height: 14px;
        font-size: 14px;
        color: #b78846;
        border: 2px solid #b78846;
        line-height: 12px;
        top: 5px;
        text-align: center;
    }

    .pdf-box:before {
        left: 5px;
    }

    .pdf-box:after {
        right: 5px;
    }

    .pdf-box .pdf-box-inner {
        height: 935px;
        position: relative;
        border: 2px solid #b78846;
        padding: 30px;
    }

        .pdf-box .pdf-box-inner:before, .pdf-box .pdf-box-inner:after {
            content: "•";
            position: absolute;
            width: 14px;
            height: 14px;
            font-size: 14px;
            color: #b78846;
            border: 2px solid #b78846;
            line-height: 12px;
            bottom: -2px;
            text-align: center;
        }

        .pdf-box .pdf-box-inner:before {
            left: -2px;
        }

        .pdf-box .pdf-box-inner:after {
            right: -2px;
        }