@font-face {
    font-family: 'Instacart Contrast SubHead Regular';
    src: url('../fonts/Instacart_Contrast_Subhead-Regular.ttf')  format('truetype')
}

@font-face {
    font-family: 'Instacart Contrast Text Bold';
    src: url('../fonts/Instacart_Contrast_Text-Bold.ttf')  format('truetype')
}

.turkey-cooking-time-calculator {
    background-color: #FAF1E5;
    padding: 50px;
    margin: 40px 0;
    color: #003D29;
}

@media(max-width: 575px) {
    .turkey-cooking-time-calculator {
        padding: 25px 30px;
        max-width: 95vw;
        width: calc(100vw - 40px);
        margin-left: -15px;
    }
}

.turkey-cooking-time-calculator .wrap {
    margin-bottom: 40px;
}

.turkey-cooking-time-calculator h2 {
    font-family: 'Instacart Contrast SubHead Regular';
    font-weight: 700;
    padding: 0;
    margin: 0 0 40px;
    color: inherit;
}

.turkey-cooking-time-calculator h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: inherit;
}

.turkey-cooking-time-calculator label {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    color: inherit;
}

/* reset inputs */
.turkey-cooking-time-calculator input,
.turkey-cooking-time-calculator select,
.turkey-cooking-time-calculator option {
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -moz-appearance: textfield;
    box-shadow: none;
    color: inherit;
}


.turkey-cooking-time-calculator input::-webkit-outer-spin-button,
.turkey-cooking-time-calculator input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


.turkey-cooking-time-calculator input,
.turkey-cooking-time-calculator select,
.turkey-cooking-time-calculator option {
    border-radius: 8px;
    min-height: 60px;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: none;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: #003D29;
}

.turkey-cooking-time-calculator input:focus,
.turkey-cooking-time-calculator select:focus-within,
.turkey-cooking-time-calculator option {
    outline: 3px solid rgb(16,16,16);
}
.turkey-cooking-time-calculator select:focus-within,
.turkey-cooking-time-calculator option:hover,
.turkey-cooking-time-calculator option:focus {
    background-color: #F1E0C8;

}

.turkey-cooking-time-calculator option:checked {
    box-shadow: 0 0 10px 100px #F1E0C8 inset;

}


.turkey-cooking-time-calculator input:focus {
    background-color: #BCCDC7;
}

.turkey-cooking-time-calculator input.error {
    outline: 3px solid #FF7F11;
    color: #FF7F11;
    background-color: #FFC69D;
}

.turkey-cooking-time-calculator select option {
    font-family: 'Eina01', sans-serif;
}

.turkey-cooking-time-calculator .calculate-btn {
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    position: relative;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    font-family: 'Eina01';
    background: #003D29;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 36px;
    min-height: 70px;
    width: 100%;
    transition: all ease .3s;
}

.turkey-cooking-time-calculator button.calculate-btn:disabled {
    background-color: lightgrey;
    cursor:not-allowed;
    outline: 0;
}

.turkey-cooking-time-calculator #weightError {
    position: absolute;
    margin-top: 4px;
    color: #FF7009;
    font-weight: 400;
    font-size: 16px;
    opacity: 0;
}
.turkey-cooking-time-calculator #weightError.show {
    opacity: 1;
}


.turkey-cooking-time-calculator button:not(:disabled):hover,
.turkey-cooking-time-calculator button:not(:disabled):focus {
    background: #FAF1E5;
    color: #003D29;
    outline: 3px solid rgb(16,16,16);
}

.turkey-cooking-time-calculator select#weightUnit {
    margin-left: 20px;
    width: 112px;
}

.turkey-cooking-time-calculator .field {
    display: flex;
}

.turkey-cooking-time-calculator .cooking-time {
    background-color: #9DDE9D;
    /* min-height: 293px; */
    min-height: 363px;
    border-radius: 18px;
    width: 100%;
    margin: 40px 0;
    padding: 35px 35px 0 35px;
    position: relative;
}



.turkey-cooking-time-calculator p.ct-label,
.turkey-cooking-time-calculator p.ct-result {
    position: relative;
    z-index: 5;
    font-weight: 600;
    font-size: 18px;
}

.turkey-cooking-time-calculator p.ct-label {
    font-weight: 700;
}

.turkey-cooking-time-calculator p.ct-result {
    font-family: "Instacart Contrast Text Bold";
    font-weight: 600;
    font-size: 36px;
    line-height: 1.1;
    opacity: 0;
    transition: opacity ease .5s;
}

.turkey-cooking-time-calculator p span.temperature {
    display: block;
    margin: 15px 0;
    font-size: 18px;
    font-family: Eina01;
}

.turkey-cooking-time-calculator p.ct-result.visible {
    opacity: 1;
}

.turkey-cooking-time-calculator .cooking-time img {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 95%;
    height: auto;
    max-height: 68%;
    width: auto;
}



.turkey-cooking-time-calculator .disclaimer p {
    text-align: center;
    font-size: 14px;
    color: #003D29;
}

.turkey-cooking-time-calculator .disclaimer p a {
    font-weight: 600;
    color: #003D29;
    text-decoration: none;
}

.turkey-cooking-time-calculator .disclaimer img {
    display: block;
    width: 160px;
    height: auto;
    padding: 0 10px;
    margin: 40px auto 0;
}

.turkey-cooking-time-calculator .invisible {
    position: absolute;
    opacity: 0;
}


table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border-radius: 18px;
    border: 3px solid #FAF1E5;
    margin: 30px 0;
}

table thead td {
    background-color: #FAF1E5;
    font-weight: 600;
    font-size: 20px;
    padding: 20px;
}

table td {
    padding: 10px;
    border: 3px solid #FAF1E5;
    width: 50%;
}

table.two-cols td {
    width: 50%;
}

table.four-cols td {
    width: 25%;
}

table.four-cols thead td:first-of-type {
    border-right: 3px solid #E2AF6B30;
}

table p {
    margin: 0;
}