:root {
    --min: 0;
    --val: 5;
    --max: 100;
    --n: 10;
    --primary: #FD8878;
    --white: #fff;

}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

p {
    /*font-size: 14px;*/
    font-size: 16px;
    font-weight: 500;
}

.primary-color {
    color: var(--primary);
    border: 1px solid var(--primary);
}

.bg-primary-section {
    background: #F6F6F6;

}


div#peptide-card p,
div#peptide-card h5,
div#peptide-card small,
div#peptide-card label,
.output-r {
    color: #1A1A1A !important;
}

#peptide-card .btn-check + .btn:hover {
    border: 1px solid #1A1A1A;
}

div#peptide-card h5 {
    font-family: "Cabinet Grotesk", Sans-serif !important;
}


button#calculateDosageBtn {
    font-family: "Cabinet Grotesk", Sans-serif !important;
    background: #FD8878;
    color: white;
    text-transform: uppercase;
}

body button#calculateDosageBtn:hover {
    background: #e3786a;
}

form#calculator label,
form#calculator p,
.row p {
    font-family: "Cabinet Grotesk", Sans-serif !important;
}

form#calculator i.fa-circle-question {
    color: #FD8878;
    border: none;
}

form#calculator i.fa-circle-question:hover {
    color: #FD8878;
    border: none;
    background: transparent;
}
#iframe-container iframe:nth-of-type(2) {
    display: none !important;
}
#calculator .btn-check + .btn.primary-color:hover,
button#calculateDosageBtn:hover,
button#calculateDosageBtn:focus,
button#calculateDosageBtn:focus-visible {
    color: var(--white);
    background: var(--primary);
    border: 1px solid var(--primary);
}

#peptide-card .btn-check:checked + .btn {
    background: #160067;
    border: 1px solid #1A1A1A;
    color: white !important;
}

.btn-outline-light-br {
    border: 1px solid #1A1A1A;

}

.btn-check:checked + .btn,
.btn.active, .btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    color: var(--white);
    background: var(--primary);
    border: 1px solid var(--primary);
}

.tooltip-html {
    font-size: 12px;
    text-align: left;
}

.tooltip-ul {
    font-size: 11px;
    text-align: left;
}

.pep-dose p {
    text-align: left;
}

.pep-dose-icon {
    background: var(--primary);
    color: #fff;
    padding: 8px;
    border-radius: 50%;
}

.dose-how:checked + label .pep-dose-icon {
    background: #fff;
    color: var(--primary);
}

* {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

form#syringe, form#syringe * {
    display: grid;
}


#syringe .js {
    --js: 1;
}

#syringe datalist {
    place-content: center;
}


form#syringe, #syringe option {
    place-items: center;
}

form#syringe {
    --extra: 0;
    --large: 0;
    --not-large: calc(1 - var(--large));
    --small: 0;
    --not-small: calc(1 - var(--small));
    --track-w: min(100vw, 76vw - 2 * 1.75em);
    overflow-x: hidden;
    padding: 0.875em;
    background: hsla(0, 0%, 91%, var(--hl));
    filter: grayScale(calc(1 - var(--hl, 0)));
    transition: 0.35s;
}

@media (min-width: 28.5em) {
    form#syringe {
        --extra: 1;
    }
}

@media (min-width: 320px) {
    form#syringe {
        --large: 1;

    }

    @media (max-width: 420px) {
        form#syringe {
            --track-w: min(93.5em, 80vw - 2 * 1.75em);
            overflow-x: hidden;
        }
    }

    @media (max-width: 220px) {
        form#syringe {
            --small: 1;
            --track-w: min(93.5em, 80vw - 2 * 1.75em);
            overflow-x: hidden;
        }

    }


    #syringe label {
        font-size: 137.5%;
    }

    #syringe [for] {
        font-weight: 700;
    }

    #syringe input {
        width: calc(var(--track-w) + 0.25em);
        /*background: #FFF 0.375em no-repeat;*/
        background: #1A1A1A;
        margin-bottom: 10px;
    }


    #syringe input:focus {
        outline: none;
    }

    input + output {
        --rng: calc(var(--max) - var(--min));
        --pos: calc((var(--val) - var(--min)) / var(--rng) * var(--track-w));
        display: var(--js, none);
        grid-row: 1;
        justify-self: start;
        transform: translate(calc(var(--pos) - 20%));
        counter-reset: val var(--val);
    }

    #syringe datalist {
        --track-u: calc(var(--track-w) / var(--n));
        grid-auto-flow: column;
        width: calc(var(--track-w) + 1px);
        box-shadow: inset 0 1px currentcolor;
        /*background: linear-gradient(90deg, currentcolor 1px, transparent 0) repeat-x;*/
        color: #1A1A1A;

        background-size: calc(var(--track-u) / 2) calc(var(--extra) * .5 * 0.875em);
    }

    #syringe option {
        --m: calc(var(--large));
        width: calc(var(--m) * var(--track-u));
        transform-origin: 50% 0;
        transform: scale(min(1, var(--m)));
        transition: transform 0.35s;
    }

    #syringe option:nth-child(odd) {
        --m: calc(var(--large) + 2 * var(--not-large) * var(--not-small));
    }

    #syringe option:first-child, #syringe option:last-child {
        --m: calc(var(--large) + var(--not-large) * (2 * var(--not-small) + .5 * var(--n) * var(--small)));
    }

    #syringe option.mid {
        --m: calc(var(--large) + var(--not-large) * .5 * var(--n) * var(--small));
    }

    #syringe option::before {
        width: 1px;
        height: 0.875em;
        background: currentcolor;
        content: "";
    }

    .pull-tab {
        position: relative;
        top: -30px;
        right: -255px;
        font-size: 12px;
    }

    .syringe-info {
        font-size: 12px;
        font-style: italic;
        text-align: center;
    }

    .output-r {
        font-size: 12px;
        font-weight: normal !important;
    }
}