/* Contains generic styles (headings, buttons, links, etc.) for use throughout the site */

/* This is based on Bootstrap 4 styling as the base */

/* NOTE: Recommend using d-print-none  */
@media print {

    .no-print {
        display: none !important;
    }
}

@media screen {

    .no-screen {
        display: none !important;
    }
}

body {
    background-color: #fff !important;
}




/*************************************************
* Colours (primarily for internal CSS reference)
*************************************************/
.primary-standard {
    color: #13634b;
}

.primary-highlight {
    color: #288456;
}

.secondary-standard {
    color: #2a4da5;
}

.secondary-highlight {
    color: #4569c7;
}

.tertiary-standard {
    color: #4a4a4a;
}

.tertiary-highlight {
    color: #656565;
}

.text-payment { 
    color: #283F7F
}






/*************************************************
* Headings
*************************************************/

h1 {
}

h2 {
}

@media (min-width: 1200px) {

    h2.lined {
        text-align: center;
        padding: 0;
        height: 20px;
        margin: 5px 0 50px 0;
        border-bottom: solid 1px #4a4a4a;
    }

        h2.lined span {
            display: inline-block;
            height: 20px;
            margin-top: -20px;
            padding: 0 30px;
            background-color: #fff;
        }
}

@media (max-width: 1199px) {
    h2.lined {
        text-align: center;
        border-bottom: solid 1px #4a4a4a;
        margin: 5px 0 35px 0;
    }
}

h3 {
    font-size: 24px;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    h3 {
        font-size: 20px;
    }
}

h4 {
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 10px;
}




/*************************************************
* General text styling
*************************************************/

p {
    margin-bottom: 10px;
}

.text-tiny,
.text-tiny td,
.text-tiny th {
    font-size: 10px !important;
}

.strikethrough {
    text-decoration: line-through;
}

ol.list-strong > li::marker {
    font-weight: bold;
}

ul.no-indent, ol.no-indent {
    padding-left: 1.2em;
}


/*************************************************
* Text link styling
*************************************************/
    a {
    color: #117B3B;
    transition: color 200ms ease;
}

a:hover,
a:active {
    color: #41937C;
}

.text-white a {
    color: #A6CFBB;
}

a.link-primary {
    color: #117B3B;
}




/*************************************************
* Utility helper classes
*************************************************/

.opacity-0 {
    opacity: 0 !important;
}

.opacity-1 {
    opacity: 0.2 !important;
}

.opacity-2 {
    opacity: 0.4 !important;
}

.opacity-3 {
    opacity: 0.6 !important;
}

.opacity-4 {
    opacity: .8 !important;
}

.opacity-5 {
    opacity: 1 !important;
}


/* NOTE: Recommend using standard Boostrap spacing eg. pt-3 */
.margin-top {
    margin-top: 30px;
}

.margin-bottom {
    margin-bottom: 30px;
}

.padding-top {
    padding-top: 30px;
}

.padding-bottom {
    padding-bottom: 30px;
}

.border-left {
    border-left: solid 1px #ccc;
}

.border-right {
    border-right: solid 1px #ccc;
}

@media (min-width: 768px) {
    .border-left-md {
        border-left: solid 1px #ccc;
    }

    .border-right-md {
        border-right: solid 1px #ccc;
    }
}

.border-agpro {
    border-color: #13634b !important;
}

.row.small-gutters {
    margin-left: -5px;
    margin-right: -5px;
}

    .row.small-gutters [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
    }
    

/* Negative margins (useful for full-width elements) */
.mnx-5 {
    margin-left: -3rem !important;
    margin-right: -3rem !important;
}


/* Create a full-width element (typically used to expand an element inside a container) */
.full-page-width {
    width: calc(100vw - 10px); /* scrollbar? */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}



/* For expandable buttons which change icon */
button:not(.collapsed) .collapsed-show,
a:not(.collapsed) .collapsed-show {
    display: none;
}

button.collapsed .collapsed-hide,
a.collapsed .collapsed-hide {
    display: none;
}



/*************************************************
* Background colours
*************************************************/
.bg-primary {
    background-color: #13634b !important;
}

.bg-primary-light {
    background-color: rgba(56,161,92,0.4) !important;
}

.bg-secondary {
    background-color: #000 !important;
}

.bg-payment {
    background-color: #2a4da5 !important;
}

.bg-upgrade {
    background-color: rgba(209, 217, 241, 0.85) !important;
}





/*************************************************
* Alerts
*************************************************/

.alert {
    line-height: 1.3; /* Tighter line height in all alerts */
}

    .alert p:last-child {
        margin-bottom: 0;
    }

    .alert ul,
    .alert ol {
        padding-left: 15px;
        margin-bottom: 0;
    }


.alert.alert-full {
    display: block;
    margin: 0;
    border-radius: 0;
    border: none;
}

.alert.alert-full.alert-dismissible {
    padding-right: 1.25rem;
}

.alert.alert-sm {
    padding: 5px 8px;
}

.alert-dismissible {
    padding-right: 2.5rem;
}

.alert-dismissible .btn.btn-close {
    position: absolute;
    right: 10px;    
    top: 10px;
}

.alert .icon {    
    width: 30px;
}

.alert .alert-added-by {
    display: inline-block;
    margin-bottom: 3px;
}

@media (min-width: 1200px) {
    .alert .alert-added-by {
        float: right;
        margin-top: 1px;
    }
}

@media (max-width: 767px) {
    .alert {
        padding: 5px 8px;
        font-size: 0.9rem;
    }

    .alert.alert-dismissible {
        padding-right: 1.5rem;
    }

    .alert.alert-dismissible .btn.btn-close {
        right: 0;
        top: 0;
    }
}



/*************************************************
* Images
*************************************************/
img.tiny-logo {
    height: 30px;
    width: auto;
    max-width: 100%;
}

img.small-logo {
    height: 60px;
    width: auto;
    max-width: 100%;
}

img.medium-logo {
    height: 100px;
    width: auto;
    max-width: 100%;
}

img.large-logo {
    height: 200px;
    width: auto;
    max-width: 100%;
}

.portrait-wrapper {
    border: solid 1px #ccc;
    padding: 5px 15px;
    margin: 15px;
    line-height: 1.2;
}

img.img-portrait {
    margin: 0 auto;
    border-radius: 50%;
    display: block;
    max-width: 60%;
    height: auto;
}





/*************************************************
* Buttons
*************************************************/
.btn {
    transition: all ease 200ms;
    border: solid 1px #13634b;
    color: #13634b;
    max-width: 100%;
}

.btn:hover,
.btn:active {
    border-color: #288456;
    color: #288456;
}

.text-white .btn {
    border-color: #ccc;
    color: #ccc;
}

.text-white .btn:hover,
.text-white .btn:active,
.text-white .btn.active {
    border-color: #fff;
    color: #fff;
}


@media (min-width: 1199px) {
    /* Standard button widths; currently desktop only. Maybe extend to mobile after more testing */
    .btn {
        min-width: 185px;
    }

    .btn.btn-sm {
        min-width: 20px;
    }

    .btn.btn-lg {
        min-width: 250px;
    }

    .btn.btn-icon {
        min-width: 36px;
    }

    .btn.btn-sm.btn-icon {
        min-width: 30px;
    }
}

.btn-light {
    background-color: #fff !important;
}

    .btn-light.btn-toggle.active {
        border-color: #13634b !important;
        color: #13634b !important;
    }

    .btn-light:active,
    .btn-light:hover {
        border-color: #288456 !important;
        color: #288456 !important;
    }



.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-dark {
    /* border: none !important; */
}

    .btn.btn-primary,
    .btn.btn-secondary,
    .btn.btn-dark {
        color: #fff !important;
    }

/* Toggle buttons; change opacity */
.btn-toggle {
    transition: all ease 200ms;
    opacity: 0.6;
}

    .btn-toggle:hover {
        opacity: 0.8;
    }

    .btn-toggle.active {
        opacity: 1;
    }


.btn.btn-full {
    width: 100%;
    border-radius: 0;
    text-align: center;
}

.btn.btn-primary {
    border-color: #13634b !important;
    background-color: #13634b !important;
}

    .btn.btn-primary:hover,
    .btn.btn-primary:active {
        border-color: #288456 !important;
        background-color: #288456 !important;
    }

.btn.btn-secondary {
    border-color: #2a4da5 !important;
    background-color: #2a4da5 !important;
}

    .btn.btn-secondary:hover,
    .btn.btn-secondary:active {
        border-color: #4569c7 !important;
        background-color: #4569c7 !important;
    }

a.btn:not([href]),
a.btn:not([href]):hover,
a.btn:not([href]):active,
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
    transition: none !important; /* Some weirdness with loads here */
    border-color: #e0e0e0 !important;
    background-color: #e0e0e0 !important;
    color: #4a4a4a !important;
    cursor: default;
}

/* These buttons intended for use in tables and similar */
.btn.btn-blank {
    border: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Spacing for icons inside buttons, except icons */
.btn:not(.btn-icon) svg.fa-angle-right {
    margin-left: 8px;
}

.btn:not(.btn-icon):not(.btn-sm) svg:not(.fa-angle-right) {
    margin-right: 8px;
}

.btn:focus {
    box-shadow: inset 0 1px 1px rgba(19, 99, 75, 0.1), 0 0 6px rgba(19, 99, 75, 0.5);
}

/* btn-close should always be used with a single icon, typically far fa-times-circle */
.btn-close {
    padding: 0;
    font-size: 20px;
    height: 25px;
    line-height: 25px;
    width: 25px;
    min-width: 25px;
    border: none;
    color: #666;
}

.btn.btn-close svg {
    margin: 0 !important;
}

/* Placeholder for icons before they load; not perfect but substantially better than nothing */
.btn i.far, .btn i.fas, .btn i.fal {
    display: inline-block;
    min-width: 12px;
}


/*************************************************
* Form controls
*************************************************/

input.form-control-inline,
select.form-control-inline {
    vertical-align: middle;
    max-width: 200px;
}

/* Specific fixed width form controls */
input.width-md,
select.width-md {
    max-width: 200px;
}

input.width-sm,
select.width-sm {
    max-width: 100px;
}

input.width-xs,
select.width-xs {
    max-width: 60px;
}

.form-group label,
.form-group span.label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

select[multiple] {
    padding-left: 0px;
}

    select[multiple] option {
        border-left: solid 5px transparent;
    }

        select[multiple] option:checked {
            background: red linear-gradient(0deg, #f6f6f6 0%, #f6f6f6 100%);
            border-left: solid 5px #117B3B;
            color: #333 !important;
            -webkit-text-fill-color: #333 !important;
        }


.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #bbb;
    opacity: 1; /* Firefox */
}

.form-control:focus {
    border-color: #13634b;
    box-shadow: inset 0 1px 1px rgba(19, 99, 75, 0.1), 0 0 12px rgba(19, 99, 75, 0.5);
}

/* Required field styling */
.form-control.required {
    background-color: #fff3cd;
}

span[data-toggle="tooltip"] {
    cursor: pointer;
}

/* Allow for larger tooltips */
.tooltip-inner {
    max-width: 350px;
    width: 350px;
}

input[type="checkbox"] {
    zoom: 1.3;
}

@-moz-document url-prefix() {
    /* Firefox doesn't support ZOOM */
    input[type="checkbox"] {
        transform: scale(1.3);
    }
}

input.scale-lg,
.scale-lg input[type="checkbox"] {
    transform: scale(1.5);
}

.radio-wrapper {
    display: block;
}

    .radio-wrapper label {
        padding: 0 20px 0 5px;
    }

/* Toggle button wrapper */
.btn-group-toggle > .btn > label {
    pointer-events: none;
    margin-bottom: 0;
}

.checkbox-wrapper label {
    padding: 0 20px 0 5px;
}

@media (max-width: 767px) {
    .checkbox-wrapper label {
        display: inline;
    }
}

.form-inline label {
    padding-left: 3px;
    padding-right: 3px;
}

.bootstrap-select .dropdown-toggle {
    border: solid 1px #ced4da;
    background-color: #fff;
}

@media (max-width: 767px) {
    .form-inline .form-control {
        display: inline-block;
        width: auto;
    }
}

.form-control-inline {
    display: inline-block;
    max-width: 350px;
}

.form-inline input.form-control-sm,
.form-inline select.form-control-sm {
    max-width: 140px;
    padding-right: 0;
}


.scroll-wrapper {
    overflow-y: scroll;
    height: 200px;
}

.scroll-wrapper-sm {
    overflow-y: scroll;
    height: 100px;
}

.scroll-wrapper-lg {
    overflow-y: scroll;
    height: 400px;
}

.scroll-wrapper-xl {
    overflow-y: scroll;
    height: 600px;
}

.input-group .btn-icon {
    width: 40px;
    border-color: #ced4da;
}

span[data-val='true'] {
    display: inline-block;
    color: #fff !important;
    background-color: #dc3545;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
}



/*************************************************
* Tables
*************************************************/


.table-sm th,
.table-sm td {
    font-size: 0.8rem;
}

/* Special design which removes the RIGHT border from th and LEFT border from TD */
.table-borderless-th-td th {
    border-right: 0 !important;
}

.table-borderless-th-td td {
    border-left: 0 !important;
}

table.table-spreadsheet tr.sticky th {
    background-color: #fff !important;
    position: sticky;
    top: 72px;
    z-index: 99;
}

/* Use this for rows where we alternate colours in 2s, not 1s */
table.table-spreadsheet tr td {
    padding: 0;
}

table.table-spreadsheet .border-right {
    border-right: solid 5px #117B3B !important;
}

table.table-spreadsheet .border-bottom {
    border-bottom: solid 5px #117B3B !important;
}

table.table-spreadsheet > tbody > tr > td input,
table.table-spreadsheet > tbody > tr > td textarea,
table.table-spreadsheet > tbody > tr > td textarea,
table.table-spreadsheet > tbody > tr > td select,
table.table-spreadsheet > tbody > tr > td select {
    background-color: transparent !important;
    border-radius: 0;
    border: solid 1px #fff;
}

table.table-spreadsheet > tbody > tr:first-child > td input,
table.table-spreadsheet > tbody > tr:first-child > td textarea,
table.table-spreadsheet > tbody > tr:first-child > td textarea,
table.table-spreadsheet > tbody > tr:first-child > td select,
table.table-spreadsheet > tbody > tr:first-child > td select {
    border-top: solid 1px #fff;
}

    table.table-spreadsheet > tbody > tr > td input:disabled,
    table.table-spreadsheet > tbody > tr > td textarea:disabled,
    table.table-spreadsheet > tbody > tr > td textarea:disabled,
    table.table-spreadsheet > tbody > tr > td select:disabled,
    table.table-spreadsheet > tbody > tr > td select:disabled {
        opacity: 0.65;
    }

table.table-double-striped > tbody > tr:nth-child(4n+1) > td,
table.table-double-striped > tbody > tr:nth-child(4n+2) > td {
    background-color: #f6f6f6;
}

.table .tr-pt-cells td {
    padding-top: 15px;
}

.table-vm th,
.table-vm td,
.row-vm th,
.row-vm td,
.cell-vm {
    vertical-align: middle;
}

.table tr td ul,
.table tr th ul,
.table tr td ol,
.table tr th ol {
    padding-left: 5px;
}

/* Reduce the font size without reducing padding */
.table.table-sm-text th, .table.table-sm-text td {
    font-size: 0.8rem;
}

.table .row-clickable {
    cursor: pointer;
    border-left: solid 3px #fff;
}

    .table .row-clickable:hover {
        border-left: solid 3px rgba(56,161,92,0.4);
    }

    .table .row-clickable.active {
        border-left: solid 3px #13634b;
    }

.table .row-clickable .checkbox {
    font-size: 18px;
    line-height: 18px;
    color: #117B3B;
    opacity: 0.25;
}

    .table .row-clickable.active .checkbox {
        opacity: 1;
    }

    table .row-clickable .fa-square {
        color: #888;
    }

    .table .row-clickable .fa-check-square {
        color: #13634b;
    }

    table .row-clickable.active .d-inactive {
        display: none;
    }

    table .row-clickable .d-active {
        display: none;
    }

    .table .row-clickable.active .d-active {
        display: inline;
    }


/*  Sticky columns 
    https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b
    NOTE: If multiple columns, manually set the "left: 100px" etc. for 2nd/3rd etc. columns
*/
@media screen {
    .table .col-sticky {
        position: sticky;
        background-color: #fff;
        left: 0;
        z-index: 150 !important;
    }

    .table.table-striped tr:nth-child(2n+1) td.col-sticky {
        background-color: #f4f4f4;
    }

    table.table-spreadsheet tr.sticky th.col-sticky {
        z-index: 200 !important;
    }

    .table .col-50 {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    .table .col-100 {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .table .col-150 {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .table .col-200 {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }
}


/*************************************************
* Tabs
*************************************************/

/* Basic tab styling */
.nav-tabs {
    border-bottom: solid 1px #13634b;
}

    .nav-tabs .nav-link {
        color: #888;
    }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #13634b;
            border-color: #13634b #13634b #fff;
        }

.agpro-tabs {
    border-bottom: solid 3px #13634b;
    padding-left: 5px;
    padding-right: 5px;
    align-items: stretch;
}
/* override for full-width tab border in a containered tabs */
.agpro-tabs-wrapper {
    border-bottom: solid 3px #13634b;
}

    .agpro-tabs-wrapper .agpro-tabs {
        border-bottom: none;
    }

.agpro-tabs .nav-item {
    padding-right: 1px;
    padding-left: 1px;
    padding-top: 2px;
}

    /* NOTE: Tab 0 means any number*/
    .agpro-tabs .nav-item.tab-0 {
        min-width: 125px;
    }

    .agpro-tabs .nav-item.tab-6 {
        width: 50%;
    }

    .agpro-tabs .nav-item.tab-4 {
        width: 33.33%;
    }

    .agpro-tabs .nav-item .nav-link {
        display: block;
        height: 100%;
        text-align: center;
        padding: 10px 5px;
        background-color: #2F4D3E;
        color: #fff;
        transition: background-color ease 200ms;
    }

        .agpro-tabs .nav-item .nav-link.active {
            color: #fff;
            background-color: #13634b;
            background: #13634b url('/Content/green-chevron-top.png') top center no-repeat;
            background-size: 25px 8px;
        }

@media (max-width: 767px) {
    .agpro-tabs .nav-item .nav-link {
        font-size: 0.8em;
    }
}



/*************************************************
* Breadcrumbs bar and farm select
*************************************************/

.breadcrumbs {    
    height: 64px;
    z-index: 99;
}

.breadcrumbs .divider {
    display: inline-block;
    text-align: center;
    width: 30px;
}

.breadcrumbs .btn-farm-select {
    width: 325px;
    text-align: left;
}

.breadcrumbs .btn-farm-select span {
    display: inline-block;
    width: 285px;
}

/* NOTE: farm select is now used outside the breadcrumbs as a generic control */
.farm-select-generic .btn-farm-select {
    width: 325px;
    text-align: left;
}

    .farm-select-generic .btn-farm-select span {
        display: inline-block;
        width: 265px;
    }

.farm-select .dropdown-menu {
    padding: 5px;
    width: 325px;
    box-shadow: 2px 2px 4px #bbb;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 999;
}

.farm-select .dropdown-menu .inner {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.farm-select .dropdown-menu .td-paid {
    width: 70px;
    text-align: right;
}

.breadcrumbs #btn-show-page-toolbox {
    transition: none !important; /* Let jquery fade handle this */
}


@media (min-width: 768px) {
    /* Sticky on desktop */
    .breadcrumbs {
        position: fixed;
        width: 100%;
    }

    .breadcrumbs-spacer {
        height: 64px;
    }

    .breadcrumbs .farm-select #btn-farm-search {
        min-width: 90px;
    }
}

@media (max-width: 767px) {
    .breadcrumbs {
        line-height: 1.1;
        font-size: 0.9rem;
    }

    .breadcrumbs .breadcrumbs-title {
        width: 150px;
        max-width: 150px;
        padding-right: 10px;
    }

    .breadcrumbs .breadcrumbs-title strong {
        font-weight: normal;
    }

    .breadcrumbs .btn-farm-select {
        min-width: 170px;
        width: calc(100vw - 150px);
    }

        .breadcrumbs .btn-farm-select span {
            height: 20px; /* No overflow */
            display: inline-block;
            max-width: calc(100% - 20px);
            overflow: hidden;
            word-break:break-all;
        }

        .farm-select .dropdown-menu {
            max-width: calc(100vw - 25px);
        }

        .farm-select .dropdown-menu .inner {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }
}