body {
  max-width: 1400px;
  margin: 0 auto;
  margin: 0px auto 0;
  color: var(--dark-text-color);   /* default text is Charcoal #333, not browser black */
}


dt,dd {
    margin:0;
    padding:0;
}
li {
    list-style: none;
}

/*links*/
a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
}

  a:focus, a:hover {
    text-decoration: underline;
  }




.breadcrumb {
  padding: 4rem 3%;
  font-size: 1.5rem;
}

  .breadcrumb > ul {
    margin: 0;
    padding: 0;
  }

    .breadcrumb > ul li {
      display: inline-block;
    }

      .breadcrumb > ul li > * {
        display: inline-block;
        margin: 0 .5rem;
      }




/*headers*/
h1, h2 {
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

h3, h4, h5, h6, .h7 {
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.darkBackground h1,
.darkBackground h2,
.darkBackground h3,
.darkBackground h4,
.darkBackground h5,
.darkBackground h6,
.darkBackground div,
.darkBackground span,
.darkBackground p,
.darkBackground p1,
.darkBackground p2,
.darkBackground p3,
.darkBackground p4,
.darkBackground p5,
.darkBackground p6,
.darkBackground p7 {
  color: #fff;
}

h1 { /* Homepage Top Carousel (Featured Promo) */
  font-size: 4.8rem;
  line-height: 1.2;
}

.product-details-page h1,
.category-page h1,
.manufacturerPageWrapper h1,
.search-page .page-body h1 { /* Product Detail Page & Category Page h1 */
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 3.2rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
}

.p1 { /* About Cokesbury (Intro Copy) */
  font-size: 2.0rem;
  line-height: 1.5;
}

.p2 { /* About Cokesbury (Timeline stats) */
  font-size: 1.8rem;
}

.p3 { /* Standard Body Copy Size */
  font-size: 1.6rem;
}

.p4 { /* Price Large (product detail page) */
  font-size: 3.2rem;
  line-height: 1.3;
  font-weight: 600;
}

.p5 { /* Strikethrough Price Large (product detail page) */
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--tertiary-color-3);
  text-decoration: line-through;
}

.p6 { /* Price Small */
  font-size: 2.4rem;
  line-height: 1.4;
}

.p7 { /* Strikethrough Price Small / Timestamp (Reviews) */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  text-decoration: line-through;
}

.p8 { /* Input directions */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  font-style: italic;
  margin-top: 1rem;
}

.p9 { /* special notes */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  margin-top: 1rem;
}

h2 { /* Homepage Top Carousel (Company Quote) */
  font-style: italic;
  font-size: 4.4rem;
  line-height: 1.25;
}

h3 { /* Page Titles */
  font-size: 3.6rem;
  line-height: 1.3;
}

h4 { /* Promo Quotes, Promo Headlines */
  font-size: 3.2rem;
  letter-spacing: -.08rem;
  line-height: 1.3;
}

h5 { /* Section Headers, Product Detail Page Titles, Search Results Title */
  font-size: 2.8rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}

.h7 { /* Section Headers, Product Detail Page Titles, Search Results Title */
  font-size: 2.2rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
  color: var(--tertiary-color-3);
}

/*secondary headers — s1, s3, s7 retired 2026-07 (no usage in views, JS, or authored content)*/
.s2 {
  margin-top: 0;
  margin-bottom: 2.0rem;
  font-weight: 600;
}

.s4,
.s5,
.s6 {
  margin-top: 0;
  margin-bottom: 2.0rem;
  font-weight: 700;
}

.s2 { /* Name of Author (Hero promo quotes) */
  font-family: var(--secondary-font);
  font-size: 3.6rem;
  line-height: 1.25;
}

.s4 { /* Promo Description Header */
  font-size: 2.4rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.s5 { /* Section Headers Large */
  font-size: 2.4rem;
  line-height: 1.5;
}

.s6 { /* Section Headers Small */
  font-size: 1.6rem;
  line-height: 1.4;
  text-transform: uppercase;
}

blockquote {
  border-left: 0.3rem solid #d1d1d1;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}

  blockquote *:last-child {
    margin-bottom: 0;
  }

code {
  background: #f4f5f6;
  border-radius: .4rem;
  font-size: 86%;
  margin: 0 .2rem;
  padding: .2rem .5rem;
  white-space: nowrap;
}

pre {
  background: #f4f5f6;
  border-left: 0.3rem solid #9b4dca;
  overflow-y: hidden;
}

  pre > code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
  }

hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 8rem 0;
  position: relative;
}

  hr.noIcon {
    margin: 2rem 0;
  }

  hr:after {
    content: url('/Themes/Cokesbury/Content/images/cokesbury_divider_line_icon.svg');
    padding: 0 15px;
    background-color: #fff;
    position: absolute;
    top: -34px;
    left: calc(50% - 42px);
    max-width: 67px;
  }

  hr.alt1:after {
    content: url('/Themes/Cokesbury/Content/images/flame_divider_line_icon.svg');
  }

  hr.noIcon:after {
    content: none;
  }



/*#endregion*/

.darkBackground h1,
.darkBackground h2,
.darkBackground h3,
.darkBackground h4,
.darkBackground h5,
.darkBackground h6 {
  color: #fff;
}
.darkBackground a,
.darkBackground span,
.darkBackground l1,
.darkBackground l2,
.darkBackground l3,
.darkBackground l4,
.darkBackground l5,
.darkBackground l6,
.darkBackground l7 {
  color: #fff;
}

.l1 { /* Product Detail Page */
  font-size: 2rem;
  color: var(--link-color);
}


/* l2, l6, l7 retired 2026-07 (no usage in views, JS, or authored content) */

.l3 { /* Left Rail Link Navigation for Help and Contact Pages */
  font-size: 1.8rem;
  color: var(--link-color);
}

.l4 { /* Product Title Links */
  color: #333;
  font-size: 1.6rem;
  font-weight: 600;
}

.l5 { /* Product Title Links */
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.l8 {
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
}

.l9 { /* Product Detail Take a look */
  font-size: 1.8rem;
  color: var(--link-color);
  font-weight: 600;
  text-transform: uppercase;
}

















#small-search-box-form .search-box-text {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  border: 1px solid #d1d1d1;
  box-shadow: none;
  box-sizing: inherit;
  width: 100%;
  position: relative;
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
}

.search-box-button {
  display: none !important;
}

.searchBoxIcon {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 1;
}

/*#region Form Elements ******************************************************************************************************************************************************************************/

.linkStyling, input[type='button'].linkStyling, input[type='submit'].linkStyling, button.linkStyling {
  background-color: initial;
  border: 1px solid var(--link-color);
  border-radius: 2px;
  color: var(--link-color);
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  font-weight: normal;
  height: auto;
  width: auto;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: .5rem 2rem .5rem 2rem;
  margin: 1rem;
}

  input[type='button'].linkStyling:focus, input[type='button'].linkStyling:hover, input[type='submit'].linkStyling:focus, input[type='submit'].linkStyling:hover, button.linkStyling:focus, button.linkStyling:hover {
    text-decoration: underline;
    background-color: initial;
    border-color: none;
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
  }

label {
  font-size: 1.6rem;
  color: #333;
  font-weight: 700;
  display: inline-block;
  margin-right: 1.5rem;
}


/* radio buttons and checkbox */
.largeFormWrapper label.customInputWrapper {
    width: 30px;
    height: 30px;
}

label.customInputWrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height: 1rem;
    display: inline-block;
}
    label.customInputWrapper.selectableRadioWrapper {
        line-height: normal;
    }

    .customInputWrapper.disabled {
        opacity: .4;
    }

/* Hide the browser's default checkbox */
label.customInputWrapper input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
}

    .checkmark.radio {
        border-radius: 50%;
    }

.largeFormWrapper .checkmark {
    width: 30px;
    height: 30px;
}

label.customInputWrapper:hover input ~ .checkmark {
    background-color: #eee;
}

label.customInputWrapper.facet-selected:hover .checkmark,
label.customInputWrapper.facet-selected .checkmark,
label.customInputWrapper:hover input:checked ~ .checkmark,
label.customInputWrapper input:checked ~ .checkmark {
    background-color: var(--main-color);
}

label.customInputWrapper .checkmark:after {
    content: '';
    position: absolute;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    
}

label.customInputWrapper.facet-selected .checkmark:after,
label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_sm.svg');
    max-width: 14px;
}

.largeFormWrapper label.customInputWrapper.facet-selected .checkmark:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_lg.svg');
    max-width: 22px;
}

.radioButton {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow: 0;
}

label.customInputWrapper:hover:not(.selectableRadioWrapper) input ~ .radioButton {
    background-color: #eee;
}
label.customInputWrapper.selectableRadioWrapper:hover input ~ .radioButton {
    border-color: var(--tertiary-color-3);
}

label.customInputWrapper .radioButton:after {
    content: '';
    color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.largeFormWrapper .radioButton,
.radioButton.large {
    width: 30px;
    height: 30px;
}

    .largeFormWrapper .radioButton:after,
    .radioButton.large:after {
        width: 30px;
        height: 30px;
    }


.selectableRadioWrapper {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 1rem;
}
    .selectableRadioWrapper:hover {
        border: 1px solid var(--tertiary-color-3);
    }
/* Show the circle when selected */
label.customInputWrapper .radioButton.checked:after,
label.customInputWrapper input:checked ~ .radioButton:after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--main-color);
}

.largeFormWrapper label.customInputWrapper .radioButton.checked:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .radioButton:after,
label.customInputWrapper .radioButton.large.checked:after,
label.customInputWrapper input:checked ~ .radioButton.large:after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--main-color);
}

span.checkboxLabelText {
    margin: 0;
    vertical-align: top;
}

/* paging */

.pager {
    border-top: 1px solid #ccc;
    padding: 2rem 0 0 2rem;
}
.k-pager-wrap,
.pager {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
}

    .k-pager-numbers,
    .pager ul {
        margin: 0;
        padding: 0 1rem;
    }

    .k-pager-numbers li,
    .pager li {
        display: inline-block;
        padding: 0 1rem;
        font-size: 2rem;
        text-align: center;
        font-weight: 700;
        line-height: 5rem;
    }

        .k-pager-numbers li.k-current-page {
            display: none;
        }

.k-pager-nav.k-state-disabled {
    opacity: .2;
}

.k-pager-nav {
    padding: 1.6rem 1rem;
}
.pager li {
    vertical-align:middle;
}

.pager li a,
.pager li span {
    background-color: transparent;
    background-image: none;
    border: none;
    min-width: unset;
    height: auto;
    padding: 0;
    display: inline;
}

.pager li a:hover,
.pager li a:focus {
    background-color: transparent;
    border-color: transparent;
}

.k-i-arrow-end-left,
.pager li.first-page a {
    transform: rotate(90deg);
    width: 1.4rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg');
    display: block;
    font-size: 0;
}

.k-i-arrow-60-left,
.pager li.previous-page a {
    transform: rotate(90deg);
    width: 2rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    display: block;
    font-size: 0;
}

.k-i-arrow-60-right,
.pager li.next-page a {
    transform: rotate(-90deg);
    width: 2rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    display: block;
    font-size: 0;
}

.k-i-arrow-end-right,
.pager li.last-page a {
    transform: rotate(-90deg);
    width: 1.4rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg');
    display: block;
    font-size: 0;
}

/* select styling is owned by atoms.css (theme arrow + padding); k-* are Kendo leftovers */
.k-dropdown,
.k-multiselect {
    padding-right: 6rem;
    position: relative;
}

.k-dropdown,
.k-multiselect {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    transition: all 0.3s ease;
    outline: none;
}

.k-dropdown .k-icon,
.k-multiselect .k-icon {
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    position: absolute;
    right: 1.4rem;
    height: 2rem;
    width: 2rem;
    top: 1.4rem;
}

.k-pager-sizes {
    display: flex;
    line-height: 5rem;
    margin-left: 4rem;
}

    .k-pager-sizes .k-dropdown {
        margin-right: 1rem;
    }

.k-pager-info {
    margin-left: auto;
    line-height: 5rem;
}

/* DataTables pager for the storefront grids that replaced the kendo grids -
   mirrors the .k-pager-* rules above */
.cokesbury-dt .dt-container .dt-layout-row:not(.dt-layout-table) {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.cokesbury-dt .dt-layout-cell {
    display: flex;
    align-items: center;
}

    .cokesbury-dt .dt-layout-cell.dt-layout-end {
        margin-left: auto;
    }

.cokesbury-dt .dt-paging {
    padding: 0 1rem;
    flex-shrink: 0;
}

    .cokesbury-dt .dt-paging nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

.cokesbury-dt button.dt-paging-button {
    display: inline-block;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 1rem;
    font-size: 2rem;
    font-family: inherit;
    color: inherit;
    text-align: center;
    font-weight: 700;
    line-height: 5rem;
    min-width: unset;
    height: auto;
    cursor: pointer;
    vertical-align: middle;
}

    .cokesbury-dt button.dt-paging-button.current {
        text-decoration: underline;
    }

    .cokesbury-dt button.dt-paging-button.disabled {
        opacity: .2;
        cursor: default;
    }

    .cokesbury-dt .dt-nav-icon {
        display: inline-block;
        width: 2rem;
        height: 1.6rem;
        background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
        vertical-align: middle;
        font-size: 0;
    }

    .cokesbury-dt .dt-nav-first,
    .cokesbury-dt .dt-nav-previous {
        transform: rotate(90deg);
    }

    .cokesbury-dt .dt-nav-next,
    .cokesbury-dt .dt-nav-last {
        transform: rotate(-90deg);
    }

    .cokesbury-dt .dt-nav-first,
    .cokesbury-dt .dt-nav-last {
        width: 1.4rem;
    }

.cokesbury-dt .dt-length {
    display: flex;
    align-items: center;
    line-height: 5rem;
    margin-left: 4rem;
}

    .cokesbury-dt .dt-length select {
        margin-right: 1rem;
        padding-right: 3rem;
        width: auto;
        /* room for the value + the theme dropdown arrow — at its intrinsic width
           the arrow overlaps the number (fits the 3-digit "100" option too) */
        min-width: 8rem;
    }

    .cokesbury-dt .dt-length label {
        white-space: nowrap;
    }

.cokesbury-dt button.dt-refresh {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 1rem;
    font-size: 2.4rem;
    line-height: 5rem;
    min-width: unset;
    height: auto;
    color: inherit;
    cursor: pointer;
}

.cokesbury-dt .dt-info {
    line-height: 5rem;
}

/* sort indicators for the grids that allow sorting (participant admin) */
.cokesbury-dt th.dt-orderable-asc,
.cokesbury-dt th.dt-orderable-desc {
    cursor: pointer;
}

.cokesbury-dt th.dt-ordering-asc .dt-column-order:after {
    content: "\25B2";
    font-size: 1.2rem;
    color: #ff6358;
    padding-left: .5rem;
}

.cokesbury-dt th.dt-ordering-desc .dt-column-order:after {
    content: "\25BC";
    font-size: 1.2rem;
    color: #ff6358;
    padding-left: .5rem;
}

/* end paging */
/* radio buttons and checkbox */
.largeFormWrapper label.customInputWrapper {
    width: 30px;
    height: 30px;
}

label.customInputWrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height: 1rem;
    display: inline-block;
}
    label.customInputWrapper.selectableRadioWrapper {
        line-height: normal;
    }

    .customInputWrapper.disabled {
        opacity: .4;
    }

/* Hide the browser's default checkbox */
label.customInputWrapper input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
}

    .checkmark.radio {
        border-radius: 50%;
    }

.largeFormWrapper .checkmark {
    width: 30px;
    height: 30px;
}

label.customInputWrapper:hover input ~ .checkmark {
    background-color: #eee;
}

label.customInputWrapper.facet-selected:hover .checkmark,
label.customInputWrapper.facet-selected .checkmark,
label.customInputWrapper:hover input:checked ~ .checkmark,
label.customInputWrapper input:checked ~ .checkmark {
    background-color: var(--main-color);
}

label.customInputWrapper .checkmark:after {
    content: '';
    position: absolute;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    
}

label.customInputWrapper.facet-selected .checkmark:after,
label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_sm.svg');
    max-width: 14px;
}

.largeFormWrapper label.customInputWrapper.facet-selected .checkmark:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_lg.svg');
    max-width: 22px;
}

.radioButton {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow: 0;
}

label.customInputWrapper:hover:not(.selectableRadioWrapper) input ~ .radioButton {
    background-color: #eee;
}
label.customInputWrapper.selectableRadioWrapper:hover input ~ .radioButton {
    border-color: var(--tertiary-color-3);
}

label.customInputWrapper .radioButton:after {
    content: '';
    color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.largeFormWrapper .radioButton,
.radioButton.large {
    width: 30px;
    height: 30px;
}

    .largeFormWrapper .radioButton:after,
    .radioButton.large:after {
        width: 30px;
        height: 30px;
    }


.selectableRadioWrapper {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 1rem;
}
    .selectableRadioWrapper:hover {
        border: 1px solid var(--tertiary-color-3);
    }
/* Show the circle when selected */
label.customInputWrapper .radioButton.checked:after,
label.customInputWrapper input:checked ~ .radioButton:after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--main-color);
}

.largeFormWrapper label.customInputWrapper .radioButton.checked:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .radioButton:after,
label.customInputWrapper .radioButton.large.checked:after,
label.customInputWrapper input:checked ~ .radioButton.large:after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--main-color);
}

span.checkboxLabelText {
    margin: 0;
    vertical-align: top;
}

.login-page,
.password-recovery-page {
    padding-top: 3rem;
}

.focusedLargeForm .fieldset,
.focusedLargeForm .page-title,
.focusedLargeForm .buttons,
.focusedLargeForm.address-edit-page {
    max-width: 600px;
    margin: 0 auto;
}

    /* the address add/edit pages host the two-column layout (MyAccount.css) -
       release the shared 600px measure there only; login/password-recovery
       keep it */
    .focusedLargeForm.address-edit-page,
    .focusedLargeForm.address-edit-page .fieldset,
    .focusedLargeForm.address-edit-page .page-title,
    .focusedLargeForm.address-edit-page .buttons {
        max-width: none;
    }

/* (redundant .password-recovery-page .fieldset !important measure removed - both
   recovery pages carry focusedLargeForm, whose shared 600px rule governs) */

.password-recovery-page .result {
    font-size: 1.6rem;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
}

.centeredStackedFormFields {
    text-align: center;
}

    .centeredStackedFormFields .inputs { /* registration form radio buttons */
        width: 40%;
        text-align: center;
        display: inline-block;
    }

    .centeredStackedFormFields .checkboxLabelText {
        display: block;
    }

    .centeredStackedFormFields label {
        margin: 0 0 1rem;
    }



.segmentedControl {
    border: 2px solid var(--main-color);
    border-radius: 5px;
    color: var(--main-color);
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    height: 60px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    margin: 2rem 0;
    transition: all 0.3s ease;
    display: flex;
    width: 536px;
}
    .segmentedControl:hover {
        color: var(--main-color-darken);
    }
    .segmentedControl > div {
        width: 50%;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .segmentedControl > div.firstButton {
        border-radius: 4px 0 0 4px;
    }
    .segmentedControl > div.secondButton {
        border-radius: 0 4px 4px 0;
    }
    .segmentedControl > div.active {
        background: var(--main-color);
        color:#fff;
    }



.fullWidthStackedForm .inputs {
    width: 100%;
    margin: 2rem 0;
    /* the stock .inputs base centers inline content — stacked F1 labels sit left */
    text-align: left;
}
.fullWidthStackedForm label {
    margin-bottom: .3rem;
    /* inline-block, not block: the required asterisk sits BESIDE the label (style
       guide F1) and the 100%-width field still wraps to its own line below. The
       margin-right:0 undoes the global label margin (Cokesbury.css) that pushed
       the asterisk away from the label text. */
    display: inline-block;
    margin-right: 0;
}
/* radios/checkboxes stay their natural size — a 100%-wide native radio pushes its
   label off the row wherever one still renders (gender, radio/checkbox customer
   attributes) */
.fullWidthStackedForm input:not([type='radio']):not([type='checkbox']),
.fullWidthStackedForm select {
    width: 100%;
}

/* the required asterisk hugs the label (the global .required carries a -8px
   sibling-offset hack that misplaces it in stacked forms) */
.fullWidthStackedForm .required {
    margin: 0 3px 0 0;
}

.fullWidthStackedForm .multiInputLine select {
    width: auto;
}

/* login/register */

    .external-authentication .title {
        font-size: 1.6rem;
        color: var(--tertiary-color-3);
        font-style: italic;
        margin-top: 1rem;
    }

    /* the plugin's stylesheet sizes this at the PNG's natural 150x23 and loads after
       the theme head CSS - the extra specificity here wins; 1.3x keeps the logo ratio */
    .external-authentication .facebook-btn {
        width: 195px;
        height: 30px;
        background-size: 100% 100%;
    }

.login-page .new-wrapper > .buttons {
    margin: 3rem 0 6rem 0;
}

/* required asterisk hugs the label (style guide F1): undo the global label
   margin-right, the fixed 110px label width (the asterisk sits at the box edge,
   not the text), and the .required -8px sibling-offset hack for the login form */
.login-page .returning-wrapper label {
    margin-right: 0;
    width: auto;
}

.login-page .returning-wrapper .required {
    margin: 0 3px 0 0;
}

/* same F1 treatment for the create-account form; the :not keeps the checkbox/radio
   wrapper labels (account type, newsletter) at their global gap */
.registration-page .inputs > label:not(.customInputWrapper) {
    margin-right: 0;
}

.registration-page .required {
    margin: 0 3px 0 0;
}

/* and the password recovery / reset forms, and the multi-factor verification form
   (it reuses .login-page but sits outside .returning-wrapper) */
.password-recovery-page .inputs > label,
.provider-verification .inputs > label {
    margin-right: 0;
}

.password-recovery-page .required,
.provider-verification .required {
    margin: 0 3px 0 0;
}

    /* asterisk sits between the label and the help icon - give the icon its own gap */
    .registration-page .required + .helpIcon {
        margin-left: .6rem;
    }

/* email-wishlist form: F1 — left-aligned stacked labels (the stock .inputs base
   in styles.css centers inline content, which shoved the label/asterisk pair
   into the middle of the column), asterisk hugging the label */
.email-a-friend-page .inputs {
    text-align: left;
}

.email-a-friend-page .inputs > label {
    margin-right: 0;
}

.email-a-friend-page .inputs .required {
    margin: 0 3px 0 0;
}

/* …and the My Account forms (Phase 2f): Info / Change Password / gift card
   balance keep their side-label desktop layout, but the required asterisk
   moves out of its old after-the-input position (where it wrapped under the
   field once the inputs stack on phones) to hug the label, F1-style */
.account-page .inputs > label:first-of-type {
    margin-right: 0;
}

.account-page .inputs .required {
    margin: 0 3px 0 0;
}

    /* (dead .loginBtn--facebook rules removed - the live control is the plugin's
       .facebook-btn anchor, sized above) */


            
/*#region NOTIFICATIONS & POPUPS ******************************************************************************************************************************************************************************/

.bar-notification-container {
    width: 800px;
    left: 50%;
    transform: translateX(-50%);
    top: 5%;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: fixed;
    z-index: 16777262;
    -webkit-box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.3);
    box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    padding: 4rem;
    text-align: center;
    max-width: 60vw;
}

    .bar-notification-container.success,
    .bar-notification-container.error,
    .bar-notification-container.warning {
        top: 10%;
        visibility: visible;
        opacity: 1;
    }

    .bar-notification-container .successMessage,
    .bar-notification-container .warningMessage,
    .bar-notification-container .errorMessage {
        display: none;
    }

    .bar-notification-container.success .successMessage {
        color: var(--success-green-color);
        display: block;
    }

    .bar-notification-container.warning .warningMessage {
        color: var(--warning-yellow-color);
        display: block;
    }

    .bar-notification-container.error .errorMessage {
        color: var(--error-red-color);
        display: block;
    }

    .bar-notification-container .icon {
        display: block;
        width: 8rem;
        height: 8rem;
        max-width: 8rem;
        max-height: 8rem;
        margin: 0 auto 1rem;
        border: 2px solid;
        border-radius: 50%;
    }

    .bar-notification-container.success .icon {
        border-color: var(--success-green-color);
        color: var(--success-green-color); /* svg strokes/fills use currentColor */
        padding: 1.4rem;
    }

    .bar-notification-container.warning .icon {
        border-color: var(--warning-yellow-color);
        color: var(--warning-yellow-color);
        padding: 1.2rem;
    }

    .bar-notification-container.error .icon {
        border-color: var(--error-red-color);
        color: var(--error-red-color);
        padding: 2rem;
    }

    .bar-notification-container.success .icon svg {
        padding-top: .7rem;
    }


    .bar-notification-container .content {
        margin: 0 0 2rem;
        padding: 1rem 0 0;
        color: #666;
        font-size: 2rem;
    }

    .bar-notification-container .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        margin: 7px;
        background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x.svg');
        opacity: 0.3;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 50% 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        /* .close is a real <button> for keyboard access; undo atoms' bare-button skin */
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 0;
    }

        .bar-notification-container .close:hover {
            opacity: 0.8;
            transition: all 0.3s ease;
            box-shadow: none;
            background-color: transparent;
        }

    .bar-notification-container .button {
        font-size: 1.8rem;
        padding: 1rem 2rem;
        width: auto;
        min-width: unset;
        margin: 0 1rem;
    }

.notificationOverlay {
    display: none;
    transition: all 0.3s ease;
}

    .notificationOverlay.active {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        z-index: 16777259;
        background: #000;
        opacity: .2;
        width: 100%;
        height: 100%;
        display: block;
    }

/* Inline message cards (persistent page copy or server-side error blocks rather than
   action results - the notification card handles those); the circled exclamation
   mirrors the card's warning icon. .message-warning is a card by default (the class
   had no other styling); .message-error is a site-wide legacy class (plain centered
   red text), so error blocks opt in by adding .messageCard beside it. */
.message-warning,
.message-error.messageCard {
    overflow: hidden; /* contain the floated icon */
    margin: 1.5rem 0;
    padding: 1.2rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: var(--element-border-radius);
    color: var(--warning-yellow-color);
}

.message-error.messageCard {
    color: var(--error-red-color);
    /* undo the legacy .message-error text treatment */
    text-align: left;
    font-size: 1.6rem;
}

    /* MVC renders the validation-summary div even when there is nothing to say -
       no bordered box around nothing */
    .message-error.messageCard.validation-summary-valid {
        display: none;
    }

    .message-error.messageCard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .message-warning::before,
    .message-error.messageCard::before {
        content: "!";
        float: left;
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 1.2rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 2rem; /* icon height minus the 2px borders */
        text-align: center;
    }

/* the cancel-shipment control (renewals _RenewalDetails + supply autoship edit) */
#js-link-autoship-cancel {
    margin: 1rem 0;
}

/* Saved-card expired state + inline edit controls (TsysCreditCard PaymentInfo
   component). Global because the component renders on checkout, autoship edit,
   renewals, and subscription management; .js-expired-cc is the class the account
   pages' scripts emit for the same state. */
.cc-expired,
.js-expired-cc {
    color: var(--error-red-color);
    font-weight: bold;
    font-style: normal;
}

#js-cc-edit-buttons {
    text-align: right;
    margin-top: 1rem;
}

    #js-cc-edit-buttons button {
        margin-left: 1rem;
    }

/* Field-scoped validation messages hug their field, so they read left-aligned like the
   field's own label (span. prefix outranks styles.css's centered legacy rule). */
span.field-validation-error {
    text-align: left;
}

/* Two form groups sharing one line (payment forms' Expiration + CVV). Global for the
   same reason as above — checkout doesn't load MyAccount.css, where this used to live;
   .fullWidthStackedForm .multiInputLine select (width:auto) releases the stacked-form
   100% width so the selects stay compact. */
.multiInputLine {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .multiInputLine .ExpirationYears {
        width: 100%;
    }

        /* wide enough for the MM / YYYY placeholders beside the chevron */
        .multiInputLine .ExpirationYears select {
            min-width: 10rem;
        }

        .multiInputLine .ExpirationYears select#ExpirationYear {
            min-width: 11rem;
        }

        .multiInputLine .ExpirationYears > div {
            display: flex;
            max-width: 50rem;
        }

            .multiInputLine .ExpirationYears > div > span {
                margin-right: 2rem;
            }

    .multiInputLine .securityCode {
        margin-left: auto;
        width: auto;
        min-width: 25%;
    }

/* #region Sticky totals rails ************************************************************************************************************************/

/* One sticky system for every desktop side rail: the shipment-edit pages
   (calendars / supply subscriptions / curriculum / bulletins share the
   #orderTotalsForm flex child via managesubs-page), the one-page checkout
   (same id), the cart, the supply autoship edit page, the pay-your-bill account
   panel (.rightSideFlexContainer) and the statements account-summary panel
   (.divStatementsAccountSummaryWrapper). Everything about it lives HERE - do
   not re-add per-page copies:
   - top offset clears the fixed header via --fixed-header-height, which
     public.common.js measures on load/resize (admin bar and breakpoints vary it);
     matches the legacy myAccount.js mobile-pinning convention of header + gap.
   - align-self releases the flex stretch (a stretched item has no room to stick).
   - NO transition on top: transitioning top on a position:sticky element breaks
     Chrome's sticky offset resolution (the used value freezes at the interpolation
     start and the rail never leaves normal flow).
   - The legacy DESKTOP scroll-pinners in cart.js and public.onepagecheckout.js are
     retired (their per-scroll offset() math fought this); MOBILE pinning there and
     in myAccount.js is untouched, and the phone tier unsticks these rails in
     mediaqueries.css (767 block). */
.managesubs-page #orderTotalsForm,
.html-checkout-page #orderTotalsForm,
.html-shopping-cart-page .divShoppingCartWrapper > .CartStickyRight,
.update-automatic-shipment .divCheckOutPageWrapper > .CartStickyRight,
.payYourBillWrapper > .rightSideFlexContainer,
.divStatementsWrapper > .divStatementsAccountSummaryWrapper {
    position: sticky;
    top: calc(var(--fixed-header-height, 0px) + 1rem);
    align-self: flex-start;
}

/* the header hides on scroll-down (.nav-up, Header.css top:-185px) - the rails
   ride up with it; same pattern as the mobile pinned bar in mediaqueries.css */
:root:has(.divHeaderWrapper.nav-up) .managesubs-page #orderTotalsForm,
html.html-checkout-page:has(.divHeaderWrapper.nav-up) #orderTotalsForm,
html.html-shopping-cart-page:has(.divHeaderWrapper.nav-up) .divShoppingCartWrapper > .CartStickyRight,
:root:has(.divHeaderWrapper.nav-up) .update-automatic-shipment .divCheckOutPageWrapper > .CartStickyRight,
:root:has(.divHeaderWrapper.nav-up) .payYourBillWrapper > .rightSideFlexContainer,
:root:has(.divHeaderWrapper.nav-up) .divStatementsWrapper > .divStatementsAccountSummaryWrapper {
    top: 1rem;
}

/* BaseStructure's overflow-x:hidden on #main promotes overflow-y to auto, making
   #main a non-scrolling scroll container that sticky can never engage against -
   release the clip only where the rails live */
.master-wrapper-content:has(.managesubs-page),
.master-wrapper-content:has(.update-automatic-shipment),
.master-wrapper-content:has(.payYourBillWrapper),
.master-wrapper-content:has(.divStatementsWrapper),
.html-checkout-page .master-wrapper-content,
.html-shopping-cart-page .master-wrapper-content {
    overflow-x: visible;
}

/* #endregion */

/* save-for-future checkbox line (payment forms): the sentence is a flex item -
   release min-content sizing so it wraps at the column edge instead of overflowing */
.SaveForFutureCardWrapper {
    max-width: 100%;
}

    .SaveForFutureCardWrapper .p2 {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
    }




/* #region Help Icon **********************************************************************************************************************************************************************************/

.helpIcon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('/Themes/Cokesbury/Content/images/helpIcon.svg') center center var(--main-color) no-repeat;
    background-size: 10px 10px;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
}

/* #endregion Help Icon *******************************************************************************************************************************************************************************/
/* #region jQuery Modal ******************************************************************************************************************************************************************************/

.ui-dialog .divButtonWrapper {
    text-align: center;
    margin-top: 2rem;
}

.ui-dialog .button-1,
.ui-dialog .button-2 {
    max-width: 240px;
    width: 100%;
}

.ui-widget-overlay {
    background: #000;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    -moz-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    -webkit-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    -o-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
}

    .ui-widget-overlay.ui-front {
        opacity: .5;
        visibility: visible;
        width: 100%;
        height: 100%;
        -moz-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        -webkit-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        -o-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    }


.divMainVideo iframe {
    width: 50vw;
    height: calc(50vw * .5625);
}

.ui-dialog .ui-dialog-content {
    padding: 4rem 4rem 3rem;
}

    .ui-dialog .ui-dialog-content.seeInsideModal {
        padding: 4rem;
    }

.ui-widget-content.ProductDetailVideoPopup {
    color: #333;
    z-index: 103;
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
    box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
}

.ui-dialog {
    max-width: 780px;
    border: 1px solid #ddd;
    box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.3);
    overflow: hidden;
    background-color: #fff;
    border-radius: 5px;
    padding: 0;
    font: normal 14px Arial, Helvetica, sans-serif;
}

.ui-dialog-titlebar {
    background-color: #dedede !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 5px 5px 0 0;
    padding: 10px 60px 10px 12px !important;
    position: relative !important;
}

.ui-dialog-title {
    color: #333 !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    display: block;
}

.ui-dialog-titlebar-close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    opacity: 0.6;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ui-dialog-titlebar-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08) !important;
}

.ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog-titlebar-close .ui-icon {
    position: relative;
    top: 10px;
    left: 10px;
}

.ui-dialog-titlebar-close:hover .ui-button-icon,
.ui-dialog-titlebar-close:hover .ui-icon {
    top: 10px;
    left: 10px;
}

.ui-dialog-content {
    padding: 15px;
    line-height: 20px;
    background-color: #fff !important;
    padding: 15px 15px 20px 15px !important;
    color: var(--gray-color);
    min-height: 200px;
}

.ui-dialog-content .page {
    min-height: 0;
}

.ui-dialog-content .page-title {
    min-height: 0;
    margin: 0 0 15px;
    padding: 0px 10px 10px 10px;
    text-align: center;
}

.ui-dialog-content .page-title h1 {
    font-size: 24px;
    line-height: 30px;
}

.ui-dialog-content .back-in-stock-subscription-page {
    text-align: center;
}

/* dialog button pane — strip jQuery UI widget chrome so our button classes show through */
.ui-dialog .ui-dialog-buttonpane {
    background: transparent;
    border-top: 1px solid #ddd;
    padding: 12px 16px;
    margin: 0;
    text-align: right;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ui-dialog .ui-dialog-buttonpane button.button-1,
.ui-dialog .ui-dialog-buttonpane button.button-2 {
    /* strip jQuery UI button widget styles */
    all: unset;
    display: inline-block;
    cursor: pointer;
    /* shared button base */
    padding: 1rem 2.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: var(--element-border-radius, 0);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.ui-dialog .ui-dialog-buttonpane button.button-1 {
    background: var(--main-action-color, #ffb32c);
    border: 2px solid var(--main-action-color, #ffb32c);
    color: var(--dark-text-color);   /* dark on gold: 7.06:1 */
}

.ui-dialog .ui-dialog-buttonpane button.button-1:hover,
.ui-dialog .ui-dialog-buttonpane button.button-1:focus {
    background: var(--main-action-color-darker, #de910a);
    border-color: var(--main-action-color-darker, #de910a);
    color: var(--dark-text-color);
}

.ui-dialog .ui-dialog-buttonpane button.button-2 {
    background: transparent;
    border: 2px solid #999;
    color: #555;
}

.ui-dialog .ui-dialog-buttonpane button.button-2:hover,
.ui-dialog .ui-dialog-buttonpane button.button-2:focus {
    background: #eee;
    border-color: #777;
    color: #333;
}


/* #region product detail video strip Modal ******************************************************************************************************************************************************************************/

.divVideoStrip {
    display: inline-block;
    padding: 0 1rem;
    font-size: 1.4rem;
    max-width: 180px;
    vertical-align: top;
    max-height: calc(50vw * .5625);
    overflow-y: auto;
}

.divVideoStripThumbnail {
    padding-bottom: 1rem;
    position: relative;
}

    .divVideoStripThumbnail img {
        border: 1px solid #eee;
        -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
        box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
    }

        .divVideoStripThumbnail img:hover {
            border: 1px solid #ccc;
            -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
            -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
            box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
        }

.divMainVideo {
    display: inline-block;
}





/* browser reject modal */
.Reject.bar-notification {
    max-width: 80rem !important;
}

    .Reject.bar-notification .close > a {
        text-decoration: none;
        width: 4rem;
        height: 4rem;
        display: block;
    }

    .Reject.bar-notification ul {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

        .Reject.bar-notification ul li {
            padding: 0 2rem;
        }

            .Reject.bar-notification ul li a {
                font-size: 1.6rem;
                white-space: nowrap;
            }

    .Reject.bar-notification .jr_icon {
        display: block;
        width: 100px;
        height: 100px;
        background-size: contain;
        margin: 0 auto;
    }

    .Reject.bar-notification #jr_firefox .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/firefox.png");
    }

    .Reject.bar-notification #jr_msedge .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/edge.png");
    }

    .Reject.bar-notification #jr_chrome .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/chrome.png");
    }

    .Reject.bar-notification #jr_safari .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/safari.png");
    }




/* 767px jQuery UI dialog tweaks centralized in mediaqueries.css */
/* #region jQuery Modal ******************************************************************************************************************************************************************************/

.ui-dialog .divButtonWrapper {
    text-align: center;
    margin-top: 2rem;
}

.ui-widget-overlay {
    background: #000;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    -moz-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    -webkit-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    -o-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
}

    .ui-widget-overlay.ui-front {
        opacity: .5;
        visibility: visible;
        width: 100%;
        height: 100%;
        -moz-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        -webkit-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        -o-transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
        transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    }


.divMainVideo iframe {
    width: 50vw;
    height: calc(50vw * .5625);
}

.ui-dialog .ui-dialog-content {
    padding: 4rem 4rem 3rem;
}

    .ui-dialog .ui-dialog-content.seeInsideModal {
        padding: 4rem;
    }

.ui-widget-content.ProductDetailVideoPopup {
    color: #333;
    z-index: 103;
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
    box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0;
}

.ui-button .ui-icon.ui-icon-closethick {
    background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x.svg') no-repeat center;
    background-position: 0 0;
    display: block;
    width: 24px;
    height: 24px;
}

    .ui-button .ui-icon.ui-icon-closethick:hover {
        background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x_hover.svg') no-repeat center;
        background-position: 0 0;
        display: block;
        width: 24px;
        height: 24px;
    }

.ui-dialog .ui-dialog-titlebar-close {
    border: none;
    margin: 0;
    background: transparent;
    padding: 0;
    top: 1.4rem;
    right: 1rem;
    z-index: 1;
    box-shadow: none;
    min-width: 0;
    font-size: 0;
}

    .ui-dialog .ui-dialog-titlebar-close:hover {
        box-shadow: none;
    }


/* #region product detail video strip Modal ******************************************************************************************************************************************************************************/

.divVideoStrip {
    display: inline-block;
    padding: 0 1rem;
    font-size: 1.4rem;
    max-width: 180px;
    vertical-align: top;
    max-height: calc(50vw * .5625);
    overflow-y: auto;
}

.divVideoStripThumbnail {
    padding-bottom: 1rem;
    position: relative;
}

    .divVideoStripThumbnail img {
        border: 1px solid #eee;
        -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
        box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
    }

        .divVideoStripThumbnail img:hover {
            border: 1px solid #ccc;
            -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
            -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
            box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
        }

.divMainVideo {
    display: inline-block;
}





/* browser reject modal */
.Reject.bar-notification {
    max-width: 80rem !important;
}

    .Reject.bar-notification .close > a {
        text-decoration: none;
        width: 4rem;
        height: 4rem;
        display: block;
    }

    .Reject.bar-notification ul {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

        .Reject.bar-notification ul li {
            padding: 0 2rem;
        }

            .Reject.bar-notification ul li a {
                font-size: 1.6rem;
                white-space: nowrap;
            }

    .Reject.bar-notification .jr_icon {
        display: block;
        width: 100px;
        height: 100px;
        background-size: contain;
        margin: 0 auto;
    }

    .Reject.bar-notification #jr_firefox .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/firefox.png");
    }

    .Reject.bar-notification #jr_msedge .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/edge.png");
    }

    .Reject.bar-notification #jr_chrome .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/chrome.png");
    }

    .Reject.bar-notification #jr_safari .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/safari.png");
    }




div.floating-cart {
    box-sizing: border-box;
    position: absolute;
    opacity: .9;
}

    div.floating-cart img {
        max-width: 100%;
        max-height: 100%;
    }

    div.floating-cart.moveToCart {
        width: 30px !important;
        height: 45px !important;
        -webkit-transition: all 800ms ease-in-out;
        -moz-transition: all 800ms ease-in-out;
        -ms-transition: all 800ms ease-in-out;
        -o-transition: all 800ms ease-in-out;
        transition: all 800ms ease-in-out;
        z-index: 1111;
        opacity: .6;
    }

body.MakeFloatingCart div.floating-cart.moveToCart {
    width: 20px !important;
    height: 30px !important;
    box-shadow: 0px 5px 31px -1px rgba(0, 0, 0, 0);
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    opacity: 0;
}

#topcartlink.jiggle {
    animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    transform: rotate(0deg);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-iteration-count: 1;
}

@keyframes shake { /* used on minicart */
    10% {
        transform: translate3d(2px, 0, 0) rotate(7deg);
    }

    30% {
        transform: translate3d(-1px, 0, 0) rotate(-4deg);
    }

    40%, 60% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    50%, 80% {
        transform: translate3d(0, 0, 0) rotate(1deg);
    }
}