:root {
     --primary: #0070bf;
     --secondary: #7a7e82;
     --tertiary: #13512d;
     --white: #fff;
     --black: #303030;
     --shadow: 0 0 0 0.2rem rgb(0 0 0 / 25%);
	 --transparent: transparent;
}
/* Postcode Error Message */
#postcode-form ~ .dialog-panel .dialog-content p {
    display: none !important;
}
#postcode-form ~ .dialog-panel .dialog-content .align-center {
    display: none;
}
#postcode-form ~ .dialog-panel .dialog-content:before {
    content:"We don't seem to have your postcode in our system at this time but we are adding new postcodes on a daily basis. Please call us on 0333 121 1056 or email info@bookskipsonline.co.uk with your requirements and we will come back to you with a quote.";
}

/* 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,
.progress-header h1,
ul.breadcrumb li a,
ul.breadcrumb li,
.progress-header span {
     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,
.header-block {
     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,
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);
}
/* BLACK */
 .panel-sign-in .panel-text,
.panel-sign-in .list-panel h3,
.panel-sign-in .list-panel p,
.wheely-bins {
     color: var(--black);
}

/* TRANSPARENT */
.progress-header ul.breadcrumb li.current:after,
.progress-header {
     background-color: var(--transparent);
}

/* 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;
}

.list-panel {
    border-radius: 14px;
}

/*CONTAINER*/
.container {
    width: 92%;
    max-width: 1300px;
}

/*PROGRESS HEADER*/
.progress-header {
background-color: #F2F2F2;
}

/*HOME PANELS*/
.landing-root .home-panel {
    flex-grow: 1;
}