body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.form-horizontal h4 {
    display: none;
}

.huge {
    font-size: 34px;
}

.panel-green {
    border-color: #5cb85c;
}

    .panel-green > .panel-heading {
        border-color: #5cb85c;
        color: white;
        background-color: #5cb85c;
    }

    .panel-green > a {
        color: #5cb85c;
    }

        .panel-green > a:hover {
            color: #3d8b3d;
        }

.panel-red {
    border-color: #d9534f;
}

    .panel-red > .panel-heading {
        border-color: #d9534f;
        color: white;
        background-color: #d9534f;
    }

    .panel-red > a {
        color: #d9534f;
    }

        .panel-red > a:hover {
            color: #b52b27;
        }

.panel-yellow {
    border-color: #f0ad4e;
}

    .panel-yellow > .panel-heading {
        border-color: #f0ad4e;
        color: white;
        background-color: #f0ad4e;
    }

    .panel-yellow > a {
        color: #f0ad4e;
    }

        .panel-yellow > a:hover {
            color: #df8a13;
        }


.pill.selected {
    background-color:#d35858;
    color:#fff;
}

.pill {
    margin-right: 5px;
    margin-top: 5px;
}

.supplier-container .well {
    background-color: #ffffff;
    box-shadow: 2px 2px #888888;
}

.supplier-container select.supplierBulk {
    padding: 5px;
    margin-top: 15px;
    border: 0px #FFF solid;
}

.supplier-container .alert-info {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.supplier-container .btn-sm {
    margin-top: -2px;
}

.supplier-container .selecterButtons{
    margin-top: 20px;
    color: #FFFFFF;
}

    .supplier-container .selecterButtons a, .supplier-container .selecterButtons span{
        color: #FFFFFF;
        margin: 0px 5px;
        text-decoration: none;
    }

    .white{
        color: #FFFFFF;
    }

.pc-input {
    padding-top: 20px;
    padding-bottom: 20px;
}

.datePicker {
    padding: 4px 5px;
}

.datePickerBtn{
    margin-top: -5px;
    margin-left: 15px;
}

.dateToLabel {
    margin-left: 15px;
}

.MainTableHeader th {
    background-color: #BFD626;
    color: #FFF;
    text-align: center;
}

.toggle {
    width: 50% !important;
    margin-left: 25%;
}

.tankNameTd span{
    font-weight: bold;
    margin-top: 5px;
    float:right;
    width: 100%;
}

.PricingZone {
    background-color: #FFFFFF;
}

    .PricingZone td, .PricingZone th {
        border: 0px #FFFFFF solid !important;
    }

.pricingprod-input {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 45px;
}

.PricingZone td.filler, .PricingZone th.filler {
    background-color: #FFFFFF;
}

.smallPrice{
    font-size: 12px;
    text-align: center;
    width: 100%;
    float: left;
}


.PricingzoneHead {
    color: #FFF;
    text-decoration: none;
    background-color: #346701;
    float: left;
    width: 100%;
    padding-left: 15px;
    padding-bottom: 5px;
}

    .PricingzoneHead:hover, .PricingzoneHead:visited, .PricingzoneHead:focus {
        color: #FFF;
        text-decoration: none;
    }

.PricingProduct{
    margin-bottom: 15px;
}

.phoneScriptMessage{
    color: red;
    font-weight: bold;
    margin-top: 10px;
    margin-right: 15px;
}










/* Customize the label (the container) */
.checkcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkcontainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pill-disabled{
    background-color: #e2e2e2;
    position:relative;
}
.pill-disabled:after {
    background-color: red;
    color:white;
    content:"DISABLED";
    font-size:8px;
    position: absolute;
    top:0;
    right:0;
    padding:0 2px;
}

.pill-excluded {
    background-color: #e2e2e2;
    position: relative;
}

    .pill-excluded:before {
        background-color: blue;
        color: white;
        content: "EXCLUDED";
        font-size: 8px;
        position: absolute;
        top: 0;
        left: 0;
        right:auto;
        padding: 0 2px;
    }
/*===== what3words Custom Styling =====*/
/*what3words Font - Needed to match brand*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@600&display=swap');

.what3words-input {
    padding-left: 1.75rem !important;
}

.what3words-placeholder {
    position: absolute;
    bottom: 0.6rem;
    left: 0.75rem;
    font-size: 16px;
    font-weight: bold;
    color: #E11F26;
}

.btn-what3words {
    background: #E11F26;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.btn-what3words {
    font-family: 'Source Sans 3', sans-serif;
    background: #E11F26;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    padding: 0 1.5rem;
    max-width: 450px;
    width: 100%;
}

    .btn-what3words:hover, .btn-what3words:focus:not(:focus-visible) {
        background: white;
        color: #E11F26;
        outline: 2px solid #E11F26;
    }

.what3words-divider {
    max-width: 450px;
}

    .what3words-divider p {
        font-size: 16px;
        color: #bbbfc6;
    }

    .what3words-divider::before,
    .what3words-divider::after {
        content: '';
        width: 100%;
        min-height: 1px;
        background: #bbbfc6;
    }

@media only screen and (min-width: 1200px) {
    .what3words-input {
        min-width: 450px;
    }

    .btn-what3words {
        max-width: 250px;
    }
}