:root {
     --primary: #32b321;
     --secondary: #7a7e82;
     --tertiary: #13512d;
     --white: #fff;
     --black: #303030;
     --shadow: 0 0 0 0.2rem rgb(0 0 0 / 25%);
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    display: none;
}

/* PRIMARY */
 .list-panel a,
.btn, .markdown-container a,
.radio-button-strip label span,
.composite-address-input .postcode-input,
.address-results label:hover, .dialog-panel h3,
.btn.call-to-action:hover,
.radio-button-strip label span.call-to-action:hover,
.composite-address-input .selected-address-summary .dayNum,
h1 .alt, h2 .alt, h3 .alt, h4 .alt, h5 .alt,
.custom-calendar .custom-calendar-nav .custom-calendar-nav-date .month h2,
button.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn.btn-primary:hover,
.markdown-container a.btn-primary:hover,
.radio-button-strip label span.btn-primary:hover {
     color: var(--primary);
}

.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: var(--shadow);
}

.card.hover:hover {
    background-color: var(--primary);
}

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

 .landing-root .list-panel.yellow,
.landing-root .list-panel,
.btn:hover,
.markdown-container a:hover,
.radio-button-strip label span:hover,
.skip-capacity, .radio-button-strip label [type=radio]:checked+span,
.radio-button-strip label [type=radio]:active+span,
.radio-button-strip label [type=radio]:focus+span, body .custom-calendar table.calendar-table td.isSelectable,
.customcheck:checked~.customcheck-o,
.customcheck-label:hover>.customcheck-o,
.btn.call-to-action, .radio-button-strip label span.call-to-action,
.landing-root .list-panel a:hover,
.navbar,
.full-page-overlay .dialog-container .dialog-title,
.highlight,
#postcode-form .list-panel.yellow,
.radio-button-strip label [type=radio]:checked+span:hover,
.radio-button-strip label [type=radio]:active+span:hover,
.radio-button-strip label [type=radio]:focus+span:hover,
button.btn.btn-primary,
a.btn.btn-primary,
.success-block,
.btn.btn-primary,
.markdown-container a.btn-primary,
.radio-button-strip label span.btn-primary,
#header-bottom, 
#footer-bottom,
#menu, 
.home-blocks .card,
.home-blocks .tile,
.progress-header ul.breadcrumb li.current:after,
.header-block,
.progress-header {
     background-color: var(--primary);
}
 .btn, .markdown-container a,
.radio-button-strip label span,
.border-left,
.customcheck:checked~.customcheck-o,
.customcheck-o,
table.table th.sortable:hover,
.landing-root .panel-sign-in .list-panel a,
.landing-root .panel-sign-in .list-panel a:hover,
body .custom-calendar table.calendar-table td,
#footer-top, #header-top,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover {
     border-color: var(--primary);
}
/* SECONDARY */
 .custom-calendar table.calendar-table td.isSelectable:hover {
     background-color: var(--secondary);
}
 .custom-calendar table.calendar-table td.isSelectable:hover {
     border-color: var(--secondary);
}
/* TERTIARY */
 body .custom-calendar table.calendar-table td.today {
     background-color: var(--tertiary);
}
 body .custom-calendar table.calendar-table td.today {
     border-color: var(--tertiary);
}

/* WHITE */
 .landing-root .list-panel h3,
.landing-root .list-panel p,
.skip-capacity, .customcheck~.customcheck-o .fa-check,
#postcode-form .list-panel.yellow,
#postcode-form .list-panel.yellow h1,
#postcode-form .list-panel.yellow h2,
#postcode-form .list-panel.yellow h3,
#postcode-form .list-panel.yellow h4,
#postcode-form .list-panel.yellow h5,
#postcode-form .list-panel.yellow h6,
.progress-header h1,
ul.breadcrumb li a,
ul.breadcrumb li,
.progress-header span,
body .custom-calendar table.calendar-table td.today,
.custom-calendar table.calendar-table td.isSelectable:hover  {
     color: var(--white);
}
 .landing-root .list-panel a,
.btn.call-to-action:hover,
.radio-button-strip label span.call-to-action:hover,
.landing-root .panel-sign-in .list-panel, a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
.markdown-container a.btn-primary:hover,
.radio-button-strip label span.btn-primary:hover {
     background-color: var(--white);
}
 .landing-root .list-panel a, .landing-root .list-panel a:hover {
     border-color: var(--white);
}
.home-blocks .tile,
.home-blocks .tile h1,
.home-blocks .tile h2,
.home-blocks .tile h3,
.home-blocks .tile h4,
.home-blocks .tile h5,
.home-blocks .tile h6 {
    color: var(--white);
    border-radius: 10px;
}

/* BLACK */
 .panel-sign-in .panel-text,
.panel-sign-in .list-panel h3,
.panel-sign-in .list-panel p,
.wheely-bins {
     color: var(--black);
}

/* FONT */
body, h1, h2, h3, h4, div, span, li, ul, button, input, textarea, a, select, label {
    font-family: Calibri, sans-serif;
}

/*POSTCODE DIALOGUE BOX*/
.dialog-panel {
    max-height:min(80vh,500px);
    overflow: hidden scroll;
}

/*PRODUCT GRID STYLE*/
.list-panel .flex-col.flex-expand {
    flex: 1 1 200px;
}

.list-panel.flex-row {
    flex-wrap: wrap;
    row-gap: 1rem;
}


.dialog-panel {
    position: fixed;
    top: 5%;
    margin-top: 0;
}

#date-form .col-12 > h2 {
    text-align: center;
    font-size: 45px;
}

#date-form .container .col-12 > h2:after {
    font-family: 'Font Awesome 5 Free';
    content: '\f0d1';
    margin-left: 20px;
    display: inline-block;
}

#date-form input#CollectionDate ~ .container .col-12 > h2:after {
    transform: scale(-1,1);
}

#date-form input#CollectionDate ~ .container tr > td.month > h2 {
    color: red;
}

#date-form input#CollectionDate ~ .container tr > td.prev .btn {
    color: red;
    border-color: red;
}

#date-form input#CollectionDate ~ .container tr > td.prev .btn:hover {
    color: white;
    background-color: red;
}

#date-form input#CollectionDate ~ .container tr > td.next .btn {
    color: red;
    border-color: red;
}

#date-form input#CollectionDate ~ .container tr > td.next .btn:hover {
    color: white;
    background-color: red;
}

#date-form input#CollectionDate ~ .container tr > td:not(.otherMonth) {
    border-color: red;
}

#date-form input#CollectionDate ~ .container tr > td.isSelectable {
    background-color: red;
}

#date-form input#CollectionDate ~ .container tr > td.isSelectable:hover {
    background-color: #7a7e82;
}

#date-form input#CollectionDate ~ .container tr > td.today {
    background-color: #9d0000;
}

#product-form > div:nth-child(10) > div > div.col-lg-7 > div.list-panel > table > tbody > tr:nth-child(1) > td.align-right > button {
    color: white;
    text-indent: -43px;
}

#product-form > div:nth-child(10) > div > div.col-lg-7 > div.list-panel > table > tbody > tr:nth-child(1) > td.align-right > button::after {
    content: "Add to basket";
    color: var(--primary);
}

#product-form > div:nth-child(10) > div > div.col-lg-7 > div.list-panel > table > tbody > tr:nth-child(1) > td.align-right > button:hover {
    color: var(--primary);
}

#product-form > div:nth-child(10) > div > div.col-lg-7 > div.list-panel > table > tbody > tr:nth-child(1) > td.align-right > button:hover::after {
    color: white;
}

#review-form .dialog-container {
    position: absolute;
    left: 25%;
    top: 100px;
}