*, *:before, *:after {
    /*Materialize sets this to 100, it was causeing stacking errors with our subrows and drilldownns so we overload it here.*/
    z-index: auto;
}

html {
    /* overload the materialize line height so elements under 15 px have there subrow shrink perfectly to them*/
    line-height: 0;
    word-break: break-word;
    word-wrap: break-word;
}

b, strong {
    font-weight: 700;
}

/* 
Opt headline and subheadline elements get replaces with h1,h2,h3 tags so we need to overload the browser default styles
so they render like the divs do in the editor.
*/
h1.h1, h2.h2, h3.h3 {
    margin: 0;
    padding: 0;
}

/* Make the body (and opt-container in preview) have min height of 100vh so that the page background will stretch the height of the window for smaller pages. */
body:not( ._isInOPTEditor ),
body:not( ._isInOPTEditor ) .opt-container {
    min-height: 100vh;
}

/* OPV3-2680 - Body needs to be position relative so that the page background container will properly stretch the full length of the page.  */
body,
.opt-container,
/* OPV3-1283 - Needed to make the container appear on top of the color background, because the color background has opacity which takes it out of the stacking context. */
.container {
    position: relative;
}

.row .col,
[opt-id] .row .sub-col {
    position: relative;
}


.row .col {
    /* Overloading the default left and right padding of materialize */
    padding: 0;
    /* Overloading the min-height of 1px for columns so that if the row is empty the columns do not occupy space */
    min-height: 0;
}

/*
 * Ontraport's materialize overload file
 */

.container.full-width {
    width: 100%;
    min-width: 100%;
}

.container .row {
    display: flex;
    margin-bottom: 0;
    /* Overload the negative margin set by materialize */
    margin-left: 0;
    margin-right: 0;

    position: relative;
}

.container.full-height .row{
    flex-grow: 1;
}

/* blocks with viewport height */
.container.match-viewport {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body:not( ._isInOPTEditor ) .container.match-viewport {
    min-height: 100vh;
}


.opt-container--include-logo::after {
    width: 296px;
    height: 115px;
    background: url("https://app.ontraport.com/images/logo_branding.svg") no-repeat;
    position: absolute;
    content: ' ';
    bottom: -125px;
    left: 50%;
    margin-left: -148px;
}

/* gives white banner for logo, change this to padding if we want a transparent logo */
.opt-container--include-logo{
    margin-bottom: 135px;
}

.block__style {
    position: relative;
}

/*subgrid liquid layout*/

.col__style {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    position: relative;
}

.el__style {
    position: relative;
    padding: 0 5px;
    margin: 5px 0;
}

.container .col .col__style--top {
    justify-content: flex-start;
}

.container .col .col__style--center {
    justify-content: center;
}

.container .col .col__style--bottom {
    justify-content: flex-end;
}

.col .sub-row .sub-col {
    width: auto;
    margin-left: initial;
    flex-basis: 100%;
}

.col.sub--liquid .sub-row .sub-col.sub-col--liquid-override {
    /*
    this is a special case class for elements that don't have explicit width
    and rely on width 100% and the width of their container. ( slideshows, videos)
    */
    width: 100%;
}


/* on block level? need to apply to zindex settings */
[opt-type="block-v3"] {
    position: relative;
}

/*materializecss overloads -------------------------------------------------------------------------------*/


/*Subgrid, we need to add these styles because we don't want a "col" and "sub-col" class on the same element,
 *it will confuse the editor.
 */
.sub-row {
    display: flex;

    /*
        IE11 has an issue with children flex parents taking up the entire height of the parent when don't have the content for it
        don't let the row grow
    */
    flex: 0 0 auto;
}
.sub-row .sub-col {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    position: relative;
    margin-left: auto;
    left: auto;
    right: auto;
    padding: 0px;
    max-width: 100%;
}

.sub-row .sub-col:first-child{
    padding-left:0;
}
.sub-row .sub-col:last-child{
    padding-right:0;
}

/* Icon default size override */
.opt-element.material-icons {
    font-size: 32px;
}

i.opt-element {
    cursor: default;
}

.block-align--top .col__style {
    justify-content: flex-start;
}

.block-align--middle .col__style {
    justify-content: center;
}

.block-align--middle .sub-row,
.col__style--center .sub-row {
    align-items: center;
}

.block-align--bottom .col__style {
    justify-content: flex-end;
}

.block-align--bottom .sub-row,
.col__style--bottom .sub-row{
    align-items: flex-end;
}

[data-block-viewport-display="mobile"] {
    display: none;
}



/* Hover transition easing. Not on the :hover pseudo-class, or it only
   transitions when hover is added, not when its removed. Inputs require
   some extra care here because of how the different kinds are implemented.
   We're also taking care not to clobber the existing materialize transitions. */
i.opt-element,
.opt-button,
.opt-button__text-container>div,
.opt-video,
.opt-input input,
.opt-input input:not(.browser-default),
.opt-input select,
.opt-input .dropdown-content li,
.opt-input .select-wrapper,
.opt-input textarea,
.input-field>label {
    transition:
            color 0.3s ease-in-out,
            background-color 0.3s ease-in-out,
            border-color 0.3s ease-in-out,
            box-shadow 0.3s ease-in-out,
            transform 0.3s ease-in-out;
}

@media ( max-width: 600px ) {
    .container {
        width: 100%;
    }

    .container .row {
        display: block;
    }

    /* This is the default block spacing style. This must be !important to override the inlined styles. */
    .opt-row .block__style {
        padding: 20px !important;
    }

    [data-block-viewport-display="mobile"] {
        display: block;
    }

    [data-block-viewport-display="desktop"] {
        display: none;
    }

    /* subgrid greater than 7 cols wrap */
    .sub-row {
        flex-wrap: nowrap;
    }
    .sub-row.flex-wrap{
        flex-wrap: wrap;
    }

    /* match viewport with content max height specific styles */
    .match-viewport.full-height .row,
    .match-viewport.full-height .col {
        display: flex;
    }

    .match-viewport.full-height .row {
        flex-direction: column;
    }

    .match-viewport.full-height .col {
        flex-grow: 1;
    }

    .match-viewport.full-height .col__style {
        width: 100%;
    }

    .match-viewport.full-height.block-align--middle .col {
        align-items: center;
    }

    .match-viewport.full-height.block-align--top .col {
        align-items: flex-start;
    }

    .match-viewport.full-height.block-align--bottom .col {
        align-items: flex-end;
    }

    /*
        - Turn off sticky columns for mobile -
        We don't want the functionality of sticky columns in mobile, so we
        set the position from 'fixed' back to 'relative', so they layout flows like non-sticky.
        We also reset the height and width so the layout is normal.
        We need to use !important to override the inlined styles.
    */
    .opt-container .opt-sticky-column {
        position: relative !important;
        width: inherit !important;
    }
    .opt-sticky-column-placeholder {
        height: inherit !important;
    }

}

/* COUNTDOWN TIMER -------------------------------------------------------------------------------------------------- */
ontraport-countdown {
   width: 100%;
   display: block;
   padding: 1em;
}

.countdown-timer__count-down-container {
    display: block;
    padding: 10px 0;
}

.countdown-timer__header {
    max-width: 100%;
    margin-bottom: 1em;
}

.countdown-timer__count-down-list {
    list-style: none;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.countdown-timer__count-down-list li {
    text-align: center;
    width: auto;
    margin-left: 0;
    left: auto;
    right: auto;
    flex: 1;
}

/* depending on the font style they select, this kills off that margin */
.countdown-timer__unit,
.countdown-timer__label {
    margin-bottom: 0;
    display: inline;
    white-space: nowrap;
    margin: 0 6px;
}

@media ( max-width: 600px ) {
    .countdown-timer__count-down-list li {
        padding: 15px 0;
    }
}

/* END COUNTDOWN TIMER ---------------------------------------------------------------------------------------------- */


/* STICKY BLOCKS ---------------------------------------------------------------------------------------------------- */

.opt-container .pinned,
.opt-container .pin-fixed-bottom  {
    position: fixed !important;
    width: 100%;
    z-index: 1000;
}

.opt-container .opt-sticky-block.pinned,
.opt-container .opt-sticky-block.pin-fixed-bottom {
    /* center the sticky block if the page size is less that 100% */
    left: 50%;
    transform: translate(-50%, 0%);
}

.opt-container .pin-fixed-bottom {
    bottom: 0;
}

.pin-top, .pin-bottom, .pin-fixed-bottom {
    z-index: 1000;
}

.opt-sticky-block {
    /* If the sticky block has a display delay on it we want to ease the user's eyes into the sticky block. It's like a hotub. */
    transition: opacity .5s ease-in;
}

/* Used for toggling visibility of sticky blocks on small screens with soft-keyboards. ONTRA-19247 */
.opt-sticky-block--hidden {
    display: none;
}

/* END STICKY BLOCKS ------------------------------------------------------------------------------------------------ */

/* IMAGE ELEMENT ---------------------------------------------------------------------------------------------------- */
.img-container {
    display: inline-block;
    box-sizing: content-box;
    line-height: 0;
    /* Making the image inline-block, cause space to added to the bottom of the image. The space is a by product inline-block
       text so the 'hang down' of letters like y and g have space to exist. Adding this vertical-align property fixes it.
     */
    vertical-align: top;
    /* Hide overflow so border radius cuts off image */
    overflow: hidden;
}

.img-container .hover-img,
.img-container:hover .hover-img[src] + .img {
    display: none;
}

.img-container:hover .hover-img[src],
.img-container .img {
    display: initial;
    opacity: 1;
    transition: opacity .5s ease-in;
}

.opt-lazy-img {
    position: relative;
}

img.responsive-img.opt-lazy-img__img {
    /*
        NOTE: don't set a height or width of 0, edge44 doesn't like that when it comes to observing if the element
        is in the current viewport. The reason we set the height to 1px is because the remaining height will be compensated
        for by the padding bottom set in opt_editor_v3, in the _setUpLazyLoadingImages function. This function uses padding bottom
        to make sure the placeholder image's aspect ratio matches the image being loaded in.
    */
    height: 1px;
    visibility: hidden;
    opacity: 0;

    /* Need to align to top for in order for sub 4px images to not be cutoff by the img container's overflow: hidden. */
    vertical-align: top;
}

.opt-lazy-img__placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.img-container[data-img-max-height] img:not(.opt-lazy-img__img) {
    /* 
      If an image element has the max height attribute set, and the image is fully loaded (doesn't have lazy load class),
      force the width to auto so that it doesn't get distorted by the max height. Use important to override the inlined width
      set from lazy loading.
    */
    width: auto !important;
}

/* END IMAGE ELEMENT ------------------------------------------------------------------------------------------------ */

/* PARALLAX --------------------------------------------------------------------------------------------------------- */

.parallax-container {
    position: relative;
    height: auto;
    /* 
     * Override materialize overflow hidden style so that block overflow is visible (which is default).
     * This is necessary so that dropdowns aren't cutoff inside parallax blocks.
     * Instead we add overflow hidden to the actual parallax image wrapper (just has class .parallax)
    */
    overflow: visible;
}

/*
    Start parallax content context stack
    To make sure the row content in [opt-id="block-background"] appears above the parallax'd media,
    set its z-index higher than the rule below
*/
.parallax-container > [opt-id="block-background"] {
    z-index: 1;
    position: relative;
}

.opt-row.parallax-container .parallax {
    z-index: 0;
    /* Hide overflow here instead of container so entire block doesn't have overflow cutoff. */
    overflow: hidden;
}

body:not(._isInOPTEditor) .opt-row.parallax-container .block__style {
    /*kill background styles set by the editor */
    background: none !important;
    background-color: transparent !important;
}

.parallax img {
    width: 100%;
    opacity: 1;
    transition: opacity .3s ease-in;
}

.parallax .parallax-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.parallax video,
.parallax iframe {
    opacity: 1;
    transition: opacity .3s ease-in;

    position: absolute;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.parallax--fixed {
    position: fixed;
}

.parallax-container .parallax--fixed img {
    display:block;
}

/*
    materialize.css .parallax-container .parallax img rule has opacity: 0
    Need this rule to make the parallax image visible
 */
.parallax-container .parallax img.parallax-image--show {
    opacity: 1;
}

.parallax video + .video-background-overlay {
    /* Magic number to make the overlay align totally over the video */
    top: -24px;
}

/* END PARALLAX ----------------------------------------------------------------------------------------------------- */

/* IMAGE BACKGROUND ------------------------------------------------------------------------------------------------- */

.image-background-color {
    /* Set this z-index so that the image background appears above this background color element */
    z-index: -1;
}

.js-opt-bg-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* The bg overlay can block column drag events so we let the pointer events pass through it. Name space to the col__style
       if this ends up causing problems.
    */
    pointer-events: none;
}

/* If background image has parallax container class, the user selected fixed so make the background container fixed. */
.js-opt-bg-img.opt-page-background.parallax-container {
    position: fixed;
    /* Force repeat to be removed and background size to be cover so the fixed background behaves properly */
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* END IMAGE BACKGROUND --------------------------------------------------------------------------------------------- */

/* BACKGROUND VIDEO ------------------------------------------------------------------------------------------------- */

.video-background-overlay {
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.video-background-overlay.video-background-overlay--normal {
    opacity: 0;
}

.video-background-overlay.video-background-overlay--dark {
    opacity: .25;
}

.video-background-overlay.video-background-overlay--very-dark {
    opacity: .5;
}

.video-background-wrapper {
    position: relative;
}

.video-background-content {
    position: relative;
}

.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    background-size: cover;
    background-position: center center;
}

.video-background-container iframe,
.video-background-container video {
    width: 100%;
}

.video-background-container iframe {
    height: 100%;
}

/* embeds should already be good to go and don't need extra tweaking */
.video-background-container.video-background--no-transform iframe,
.video-background-container.video-background--no-transform video {
    transform: none;
}

/* END BACKGROUND VIDEO --------------------------------------------------------------------------------------------- */


/* DROP SHADOWS  ------------------------------------------------------------------------------------------------- */

.z-depth-00,
.z-depth-00--hover:hover {
    filter: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.z-depth-10,
.z-depth-10--hover:hover {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 8px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 8px 2px rgba(0, 0, 0, 0.08);
}
.z-depth-20,
.z-depth-20--hover:hover {
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 2px rgba(0, 0, 0, 0.08);

}
.z-depth-30,
.z-depth-30--hover:hover {
    -webkit-box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 2px rgba(0, 0, 0, 0.08);
}
.z-depth-40,
.z-depth-40--hover:hover {
    -webkit-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12), 0px 12px 20px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12), 0px 12px 20px 2px rgba(0, 0, 0, 0.08);

}
.z-depth-50,
.z-depth-50--hover:hover {
    -webkit-box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08);
}

/* END O DROP SHADOWS  ------------------------------------------------------------------------------------------------- */


/* "BORDER ARROW"  ------------------------------------------------------------------------------------------------- */


.border-arrow--bottom {

    position: absolute;

    /* bottom needs to be 1/2 of the width of the height */
    bottom: -2em;
    left: 50%;

    width: 4em;
    height: 4em;

     /*put the element at the flip and rotate the element to point down */
    transform: translateX( -50% ) rotate( -135deg);

    /* chop the top of the element off, creating a triangle */
    clip-path: polygon(0% 100%, 0 0, 100% 0);


    /* this needs to be appended to the color style */
    background: inherit;

    background-image: none;


    border-color: inherit;

}





/* END OF "BORDER ARROW"  ------------------------------------------------------------------------------------------------- */

/* VIDEO ELEMENT -------------------------------------------------------------------------------------------------- */
.opt-element.opt-video .video-background-container {
    position: relative;
}
/* END VIDEO ELEMENT -------------------------------------------------------------------------------------------------- */

/* DIVIDER -------------------------------------------------------------------------------------------------- */
.divider.divider {
    width: 100%;
    height: auto;
    background-color: transparent;

    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.divider .divider_left_border,
.divider .divider_right_border {
    border-top: 2px solid #000;
    width: 100%;
}


/* Centered Positioning */
.divider .divider_left_border {
    order: 1;
}
.divider .divider_right_border {
    order: 3;
}
.divider i[opt-type="icon"],
.divider > a,
.divider .divider_text {
    order: 2;
}


.divider[data-adornment-position="left"] .divider_left_border {
    display: none;
}
.divider[data-adornment-position="left"] .divider_right_border {
    order: 2;
}
.divider[data-adornment-position="left"] i[opt-type="icon"],
.divider[data-adornment-position="left"] > a,
.divider[data-adornment-position="left"] .divider_text {
    order: 1;
}


.divider[data-adornment-position="right"] .divider_left_border {
    order: 1;
}
.divider[data-adornment-position="right"] .divider_right_border {
    display: none;
}
.divider[data-adornment-position="right"] i[opt-type="icon"],
.divider[data-adornment-position="right"] > a,
.divider[data-adornment-position="right"] .divider_text {
    order: 2;
}

.divider i[opt-type="icon"],
.divider .divider_text,
.divider[data-divider-style="plain"] .divider_right_border {
    display: none;
}
.divider[data-divider-style="icon"] i[opt-type="icon"],
.divider[data-divider-style="text"] .divider_text {
    display: inline-block;
    flex: none;
}

.divider i[opt-type="icon"] {
    /* Override the initial value of the icon when it's first added to the page */
    font-size: 20px;
}

/* END DIVIDER -------------------------------------------------------------------------------------------------- */

/** BUTTON
-------------------------------------------------------------------------------------------------- */
.opt-button--noscript {
    width: 100%;
    height: 3em;
    text-transform: uppercase;
}
.opt-container .opt-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-transform: none;
    height: auto;
    padding: 15px 20px;
    cursor: pointer;
    max-width: 100%;
}

.opt-container .opt-button[opt-button-type="image"],
.opt-container .opt-button[opt-button-width="label"] {
    display: inline-flex;
    width: auto;
}

/* Remove the underline style of anchors */
.opt-container .opt-button:hover {
    text-decoration: none;
}

.opt-container .opt-button i {
    line-height: 1;
}

.opt-button i[opt-type="icon"] {
    margin-right: 5px;
}

.opt-button[opt-button-icon-display="right"] {
    flex-direction: row-reverse;
}

.opt-button[opt-button-icon-display="right"] i[opt-type="icon"] {
    margin-left: 5px;
}

.opt-button[opt-button-icon-display="top"] {
    flex-direction: column;
}

.opt-button[opt-button-icon-display="top"] i[opt-type="icon"] {
    margin-bottom: 5px;
}

.opt-button[opt-button-icon-display="bottom"] {
    flex-direction: column-reverse;
}

.opt-button[opt-button-icon-display="bottom"] i[opt-type="icon"] {
    margin-top: 5px;
}

.opt-button[opt-button-icon-display="none"] i[opt-type="icon"] {
    display: none;
}

.opt-button[opt-button-type="text"] .responsive-img,
.opt-button[opt-button-type="image"] .opt-button__text-container,
.opt-button[opt-button-type="image"] i {
    display: none;
}

/* Override padding and background color set by hook when button type is set to image */
.opt-button[opt-button-type="image"],
.opt-button[opt-button-type="image"]:hover {
    padding: 0 !important;
    background-color: transparent !important;
}

.opt-button .opt-button__text-container {
    text-align: center;
}

/* END BUTTON
-------------------------------------------------------------------------------------------------- */

/** PAYPAL BUTTON
-------------------------------------------------------------------------------------------------- */

.opt-button--paypal[opt-paypal-text-position="none"] .opt-button__text-container {
    display: none;
}

.opt-button--paypal[opt-paypal-text-position="left"] .opt-button__text-container {
    padding-right: 5px;
}

.opt-button--paypal[opt-paypal-text-position="right"] {
    flex-direction: row-reverse;
}

.opt-button--paypal[opt-paypal-text-position="right"] .opt-button__text-container {
    padding-left: 5px;
}

.opt-button--paypal[opt-paypal-text-position="top"] {
    flex-direction: column;
}

.opt-button--paypal[opt-paypal-text-position="top"] .opt-button__text-container {
    padding-bottom: 5px;
}

.opt-button--paypal[opt-paypal-text-position="bottom"] {
    flex-direction: column-reverse;
}

.opt-button--paypal[opt-paypal-text-position="bottom"] .opt-button__text-container {
    padding-top: 5px;
}

/* END PAYPAL BUTTON
----------------------------------------------------------------------------------------------------------------- */

/** PAYPAL STANDARD BUTTONS
-------------------------------------------------------------------------------------------------- */

.opt-paypal-standard {
    display: flex;
    justify-content: center;
}

/* END PAYPAL STANDARD BUTTONS

/* SOCIAL SHARING ----------------------------------------------------------------------------------------------- */

.social-flavor {
    display: inline-block;
    /* ignore white space between the social-flavor inline-block elements. */
    font-size: 0;
}

.social-flavor .opt-social__link {
    display: inline-block;
    margin: 0 5px 5px 0;
}

.social-flavor:last-child .opt-social__link {
    margin: 0;
}
/* END SOCIAL SHARING ------------------------------------------------------------------------------------------ */

/* SLIDE SHOW -------------------------------------------------------------------------------------------------- */
.opt-element.slider .slides{
    background-color: initial;
    height: 100%;
}
.slide__style {
    height: 100%;

    /*
        Sometimes the .slide__style is in between a background underlay and its caption, which are both position absolute,
        and the .slide__style gets hidden behind the underlay. Need to set .slide__style to position relative
        so that it'll be in the same stacking context as the others, so that it'll appear on top of the underlay.
     */
    position: relative;
}

.slider .slides li .caption {
    /* position caption text over video slides */
    z-index: 1;
}

.slider .caption .el__style {
    display: inline-block;
}

.slider .indicators {
    bottom: 20px;
    z-index: 2;
}

.slider__arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    background: rgba( 0,0,0,0.2);
    width: 40px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.slider__arrow i {
    flex-shrink: 0;
}

.slider__arrow--right {
    right: 0;
}



/* END SLIDE SHOW ------------------------------------------------------------------------------------------- */


/* LIST ------------------------------------------------------------------------------------------- */

.opt-text-wrapper ul,
.opt-text-wrapper ol {
    margin: 0;
    padding-left: 40px; /* DEFAULT BROWSER PADDING */
}

.opt-text-wrapper ul {
    list-style-type: initial;
}

.opt-text-wrapper ul > li {
    list-style-type: inherit;
}

/* END LIST ------------------------------------------------------------------------------------------- */

/* We want text to render with new lines and such in the canvas preview */
.opt-text-wrapper {
    white-space: pre-wrap;
}

/* But something weird about CKEditor that removes the whitespace and new lines when editing text in Editor */
.opt-text-wrapper.cke_editable {
    white-space: initial;
}

/* Removing the margin from the bookending <p> because we have padding styles that can do that. */
.opt-text-wrapper > p:first-of-type {
    margin-top: 0;
}
.opt-text-wrapper > p:last-of-type {
    margin-bottom: 0;
}

.opt-text-wrapper a {
    color: var( --primary-color );
}

.opt-text-wrapper a:hover {
    text-decoration: underline;
}

/* INPUT ------------------------------------------------------------------------------------------- */
.opt-input {
    display: flex;
    position: relative;
    width: 100%;
}

.opt-input[opt-input-icon-display="none"] i[opt-type="icon"] {
    display: none;
}

.opt-input[opt-input-icon-display="outside_left"] i[opt-type="icon"] {
    position: relative;
    top: 10px;
}

.opt-input[opt-input-icon-display="inside_left"] i[opt-type="icon"] {
    position: absolute;
    z-index: 1;
}

.opt-input .opt-input__container {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: flex-start;
    margin-bottom: 0;
}

.opt-input[opt-input-style="custom"] .opt-input__container {
    margin-top: 0;
}

.opt-input select {
    height: auto;
    padding: 0;
}

.opt-input .opt-input__container .opt-input__field {
    margin: 0;
}

.opt-input[opt-input-style="custom"] input,
.opt-input[opt-input-style="custom"] select,
.opt-input[opt-input-style="custom"] textarea {
    width: 100%;
}

.opt-input[opt-input-type="rich_text"] label,
.opt-input[opt-input-style="custom"] label {
    position: static;
    height: auto;
    width: 100%;
}

.opt-input.opt-input[opt-input-type="rich_text"] label,
.opt-input.opt-input[opt-input-style="custom"] label {
    transform: none;
}

.opt-input[opt-input-style="custom"][opt-input-label-position="left"] .opt-input__container {
    flex-direction: row-reverse;
}

.opt-input[opt-input-style="custom"][opt-input-label-position="top"] .opt-input__container {
    flex-direction: column-reverse;
}

.opt-input[opt-input-style="custom"][opt-input-label-position="bottom"] .opt-input__container {
    flex-direction: column;
}

.opt-input[opt-input-style="custom"][opt-input-label-alignment="right"] label {
    text-align: right;
}

.opt-input[opt-input-style="custom"][opt-input-label-alignment="center"] label {
    text-align: center;
}

.opt-input[opt-input-style="custom"][opt-input-alignment="right"] input,
.opt-input[opt-input-style="custom"][opt-input-alignment="right"] select,
.opt-input[opt-input-style="custom"][opt-input-alignment="right"] textarea {
    text-align: right;
}

.opt-input[opt-input-style="custom"][opt-input-alignment="center"] input,
.opt-input[opt-input-style="custom"][opt-input-alignment="center"] select,
.opt-input[opt-input-style="custom"][opt-input-alignment="center"] textarea {
    text-align: center;
}

.opt-input[opt-input-style="custom"] textarea {
    height: auto;
    resize: vertical;
}

.opt-input .select-wrapper {
    width: 100%;
    position: relative;
}

.opt-input[opt-input-type="rich_text"] .opt-input__container{
    width: 100%; 
    flex-direction: column-reverse; 
}

.opt-input[opt-input-type="check"] i[opt-type="icon"] {
    display: none;
}

.opt-input[opt-input-type="check"] [type="checkbox"] + span {
    height: auto;
    vertical-align: top;
}

.opt-input[opt-input-style="default"] [type="checkbox"] + span {
    min-height: 18px;
}

.opt-input[opt-input-style="filled"] [type="checkbox"] + span {
    min-height: 20px;
}

.opt-input[opt-input-style="basic"] [type="checkbox"] {
    position: static;
    opacity: 1;
    pointer-events: all;
    margin-top: 1px;
}

.opt-input[opt-input-style="basic"] [type="checkbox"] + span:before,
.opt-input[opt-input-style="basic"] [type="checkbox"] + span:after {
    display: none;
}

.opt-input[opt-input-type="check"][opt-input-style="basic"] label {
    display: flex;
}

.opt-input[opt-input-type="check"][opt-input-style="basic"][opt-input-checkbox-label-position="left"] label {
    flex-direction: row-reverse;
}
/* Override checked checkbox styles so Safari/iPhoneXR doesnt freakout ONTRA-21340 */
[type=checkbox]:checked + span:not(.lever):before {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
    left: 2px;
}

/*
    Much to my dismay, this seems like the most straight forward stop-gap to fix ONTRA-18563. For some reason,
    the open animation (which uses anime JS) would break on external monitors. Forcing transform to none
    essentially short circuits the animation, which prevents this strange rendering issue.
    *Update - this issue came up again in ONTRA-21122. Seems to be a known materialize issue https://github.com/Dogfalo/materialize/issues/6236
*/
.opt-input .dropdown-content {
    transform: none !important;
    backface-visibility: hidden;
}

.opt-input .dropdown-content li > a,
.opt-input .dropdown-content li > span {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.opt-input.opt-input--dropdown[opt-input-style="custom"] input.select-dropdown {
    border: 0;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* ONTRA-27974 - In Safari, when focusing on a drilldown input that is readonly and has user-select:none,
        the page jump scrolls to the top of the page. We are selecting the readonly inputs and turning this
        style back to 'auto' to prevent this page jump from happening when selecting a dropdown item.
*/
.select-wrapper input.select-dropdown[readonly="true"] {
    -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

/* Overload overflow hidden from opt border because menu needs to be visible */
.opt-input.opt-input--dropdown .select-wrapper.opt-border {
    overflow: visible;
}

.opt-input.opt-input--dropdown .select-dropdown.opt-dropdown-border,
.opt-input[opt-input-type="list"] .opt-input__field.opt-border {
    overflow: auto;
}

.opt-input .select-wrapper .caret {
    z-index: 1;
    pointer-events: none;
}

.opt-input .opt-input__field:focus,
.opt-text-wrapper:focus  {
    outline: none;
}

/* Override materialize's style that makes disabled and readonly inputs have dotted bottom borders */
.opt-input[opt-input-style="default"]:not([opt-input-type="file"]) .opt-input__field:disabled,
.opt-input[opt-input-style="default"]:not([opt-input-type="file"]) .opt-input__field[readonly],
.opt-input[opt-input-style="default"][opt-input-type="file"] .opt-input__container {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.opt-input .opt-date-time__icon {
    display: block;
    position: absolute;
    right: 5px;
    top: calc( 50% - 12px );
}

.opt-input .opt-date-time__icon--x,
.opt-input.opt-date-time__picker--open .opt-date-time__icon--calendar {
    display: none;
}

.opt-input.opt-date-time__picker--open .opt-date-time__icon--x {
    display: block;
}

.opt-date-time-field.opt-date-time-field {
    /*
        In firefox, the disabled property captures the click event so that it is not emitted.
        Make pointer events none so that the click will propagate.
    */
    pointer-events: none;
    /* Make sure text does not go behind icon */
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*IOS user agent styles input:disable w/ a .4 opacity, overload it here*/
input.opt-date-time-field:disabled{
    opacity: 1; 
}

/* ------- FILE FIELD INPUTS ---------------- */

.opt-input[opt-input-type=file] i[opt-type=icon] {
    position: absolute;
    right: 0;
    bottom: 6px;
}

.opt-input[opt-input-style="default"][opt-input-type="file"] .opt-input__container {
    padding-bottom: 4px;;
}

.opt-input[opt-input-style="default"][opt-input-type="file"] .opt-input__field {
    border: 0;
}

.opt-file-input__btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    order: 3;
}
/* Make the text button max 40% width when showing a text button.  Makes sure the button text doesn't overflow. (Button and input have 60/40 split) */
[opt-input-type="file"][opt-toggle-icon-button-display="button"]:not(.opt-file-input__download-active) .opt-file-input__btn-wrapper {
    width: 40%;
}

.opt-input[opt-input-type=file] .opt-file-input__upload-btn {
    word-break: break-word;
}

[opt-input-type="file"] .opt-input__field {
    cursor: pointer;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.opt-input__container .opt-file-input_wrapper {
    display: flex;
    width: 100%;

    /* Override for legacy styles */
    padding-right: 0 !important;
}

/* When we want to display just the icon and hide the button*/
[opt-input-type="file"][opt-toggle-icon-button-display="icon"] i[opt-type="icon"] {
    display: block;
    z-index: 1;
    cursor: pointer;
}

[opt-input-type="file"][opt-toggle-icon-button-display="icon"] .upload-button-container,
[opt-input-type="file"][opt-toggle-icon-button-display="button"] i.opt-file-input__upload-btn {
    display: none;
}

/* When want to display just the button and hide the icon*/
[opt-input-type="file"][opt-toggle-icon-button-display="button"] .upload-button-container{
    display: block;
    width: 100%;
}

/* Padding on the input to make room for buttons inside the input. */
[opt-input-type="file"] .opt-input__field {
    padding-right: 3rem !important;
}
[opt-input-type="file"].opt-file-input__download-active .opt-input__field,
[opt-input-type="file"][opt-toggle-icon-button-display="icon"].opt-file-input__remove-active .opt-input__field {
    padding-right: 5rem !important;
}

/* Margin between upload button group and the input.
    Don't show when download active because that shows inside the input.
    Make the input max 60% width when showing a text button.  Makes sure the button text doesn't overflow.
    (Button and input have 60/40 split)
 */
[opt-input-type="file"][opt-toggle-icon-button-display="button"]:not(.opt-file-input__download-active) .opt-input__field {
    margin-right: 4px;
    width: 60%;
}

[opt-input-type="file"][opt-toggle-icon-button-display="button"] i[opt-type="icon"] {
    display: none;
}

.opt-input[opt-input-type="file"] .opf-error {
    margin-left: 0;
    order: 2;
    align-items: center;
    display: flex;
}

/* Moves the error icon to not be over buttons in the input. */
.opt-input[opt-input-type="file"] .opf-error i {
    transform: translateX(-2rem);
}
.opt-input[opt-input-type="file"].opt-file-input__download-active .opf-error i,
[opt-input-type="file"][opt-toggle-icon-button-display="icon"].opt-file-input__remove-active .opf-error i {
    transform: translateX(-5rem);
}

.opt-input[opt-input-style="default"][opt-input-type="file"] .opf-error i {
    margin: 0;
    position: relative;
}

.opt-input[opt-input-style="custom"][opt-input-type="file"] .opf-error i {
    margin: 0 0 0 -30px;
    top: 0 !important;
    position: relative;
}

/* delete button right positioning is set by TP input_v3 hook */
.opt-file-input__download-btn,
.opt-file-input__delete-btn {
    display: none;
    z-index: 1;
    line-height: 1 !important;
    position: absolute;
    right: 0;
}

/* This is overridden in the TP input_v3 hook, but this is a fallback and legacy fix. */
.opt-file-input__delete-btn {
    right: 2.5rem;
    font-size: 1.5rem;
}

.opt-file-input__download-btn i {
    font-size: 32px;
}

.opt-file-input__delete-btn i {
    font-size: inherit !important;
}

/* Default close button position when not prefill. */
[opt-input-type="file"][opt-toggle-icon-button-display="button"]:not(.opt-file-input__download-active) .opt-file-input__delete-btn {
    left: -28px;
    right: initial !important;
}

.opt-file-input__download-active .opt-file-input__upload-btn {
    display: none !important;
}
.opt-file-input__download-active .opt-file-input__download-btn,
.opt-file-input__remove-active .opt-file-input__delete-btn {
    display: block;
}
/* We apply padding to make room for the upload icon - this icon is hidden for download active so we need to remove the padding */
.opt-file-input__download-active .opt-file-input_wrapper {
    padding-right: 0 !important;
}

/* Drag n drop styles */
.opt-element.opt-file-input__drag-state::before {
    content: 'Drop files here';
    background-color: rgba(255,255,255,.15);
    color: var(--primary-color);
    position: absolute;
    left: 0; width: 100%;
    top: 0; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

/* END INPUT ------------------------------------------------------------------------------------------- */


/* MATERIALIZE CHECKBOX VALIDATION STYLES -------------------------------------------------------------- */
[opt-input-type='check'] .opf-error {
    display: block;
    position: absolute;
    right: 0;
    top: -3px;
    width: 100%;
}

[opt-input-type='check'] .opf-error i {
    display: block;
    margin-top: 3px;
}
/*  END MATERIALIZE CHECKBOX VALIDATION STYLES --------------------------------------------------------- */

/* CUSTOM INPUT VALIDATION ----------------------------------------------------------------------------- */
[opt-input-style='custom'] .opf-error i,
[opt-input-style='custom'] .opf-error__message {
    position: absolute;
    margin: 0 .35em 0 0;
}

[opt-input-style='custom'] .opf-error:hover .opf-error__message {
    min-height: initial;
}
/* END CUSTOM INPUT VALIDATION ------------------------------------------------------------------------- */


/* CUSTOM HTML ----------------------------------------------------------------------------------------- */
.opt-custom-html {
    line-height: initial;
}
.opt-custom-html ul li {
    list-style-type: initial;
}
/* END CUSTOM HTML ------------------------------------------------------------------------------------- */

/* ONTRAPAGES FORM VALIDATION -------------------------------------------------------------------------- */

/* default error state */
.opf-error {
    opacity: 0;
    transition: opacity .3s linear;
    cursor: pointer;
    color: #c31c00;
    z-index: 1;
    margin-left: -30px;
}

.opf-error.opf-error--no-max-height:hover .opf-error__message {
    max-height: 0;
}

.opf-error:hover {
    z-index: 2;
}

.opf-error__message {
    display: flex;
    align-items: center;
    background-color: #c31c00;
    width: 100%;
    left: 0;
    position: absolute;
    overflow: hidden;
    line-height: 1.4em;
    font-size: .85em;
    font-weight: bold;
    min-height: 0;
    max-height: 0;
    transition: max-height .2s linear, min-height .2s linear;
    border-radius: 3px;
    color: white;
    height: auto;
    pointer-events: none;
    /* Give message a z-index so it will appear above the values in a dropdown */
    z-index: 1;
}

.opf-error:hover .opf-error__message {
    min-height: calc(100% - 1px);
}

.opf-error__message-padding {
    padding: .75em 1em;
    max-width: 90%;
    display: block;
}

.opf-error i {
    margin: .35em .35em 0 0;
    position: absolute;
    right: 0;
    transition: color .3s linear;
    /* Give icon a z-index so it appears above the dropdown */
    z-index: 1;
    color: #c31c00;
}

.opf-error:hover i {
    color: white;
}

/* tooltip message error state */
.opf-error:hover .opf-error__message--tooltip + i {
    color: unset;
}

.opf-error__message--tooltip {
    position: absolute;
    bottom: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;

    background-color: #c31c00;
    color: white;
    opacity: 0;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-bottom: 5px;
    transition: opacity .3s ease-in-out;
}

.opf-error__message--tooltip .opf-error__message-padding {
    max-width: unset;
}

.opf-error:hover .opf-error__message--tooltip {
    opacity: 1;
}

.opf-error__message--tooltip .opf-error__pointer {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-100%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c31c00;
}

/* Default style dropdowns need top 0 to make it stick to the top of the select wrapper */
[opt-input-style="default"].opt-input--dropdown .opf-error i,
[opt-input-style="default"].opt-input--dropdown .opf-error .opf-error__message {
    top: 0;
}

/* END ONTRAPAGES FORM VALIDATION ---------------------------------------------------------------------- */

/* ORDER BUMP --------------------------------------------------------------------------------------- */

.opt-order-bump {
    display: flex;
    flex-direction: column;
}

.opt-order-bump[opt-ob-checkbox-position="middle"] .opt-order-bump__header,
.opt-order-bump[opt-ob-checkbox-position="bottom"] .opt-order-bump__header {
    order: 1;
}

.opt-order-bump[opt-ob-checkbox-position="middle"] .opt-order-bump__checkbox-container,
.opt-order-bump[opt-ob-checkbox-position="bottom"] .opt-order-bump__body {
    order: 2;
}

.opt-order-bump[opt-ob-checkbox-position="middle"] .opt-order-bump__body,
.opt-order-bump[opt-ob-checkbox-position="bottom"] .opt-order-bump__checkbox-container {
    order: 3;
}

.opt-order-bump.opt-order-bump__quantity-next-to-checkbox .opt-input__container {
    align-items: center;
}

.opt-order-bump .opt-order-bump__checkbox-container .opt-order-bump__quantity {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.opt-order-bump .opt-order-bump__checkbox-container .opt-order-bump__quantity-input {
    margin-left: 5px;
}

.opt-order-bump .opt-order-bump__body {
    display: flex;
}

.opt-order-bump[opt-ob-image-position="none"] .opt-order-bump__img-container {
    display: none;
}

.opt-order-bump[opt-ob-image-position="left"] .opt-order-bump__body {
    flex-direction: row-reverse;
}

.opt-order-bump[opt-ob-image-position="above"] .opt-order-bump__body {
    flex-direction: column-reverse;
}

.opt-order-bump[opt-ob-image-position="below"] .opt-order-bump__body {
    flex-direction: column;
}

.opt-order-bump[opt-ob-image-position="left"] .opt-order-bump__body-text,
.opt-order-bump[opt-ob-image-position="left"] .opt-order-bump__img-container,
.opt-order-bump[opt-ob-image-position="right"] .opt-order-bump__body-text,
.opt-order-bump[opt-ob-image-position="right"] .opt-order-bump__img-container {
    width: 50%;
    box-sizing: border-box;
}

.opt-order-bump[opt-ob-image-position="left"] .opt-order-bump__img-container {
    text-align: left;
}

.opt-order-bump[opt-ob-image-position="right"] .opt-order-bump__img-container {
    text-align: right;
}

.opt-order-bump i[opt-type="icon"] {
    display: none;
}

.opt-order-bump[opt-ob-icon-display="left"] .opt-order-bump__checkbox-container > i[opt-type="icon"],
.opt-order-bump[opt-ob-icon-display="right"] .opt-input__container > i[opt-type="icon"] {
    display: block;
    top: 0;
}

.opt-order-bump .opt-order-bump__quantity-label {
    display: block;
    margin: 5px 0;
}

.opt-order-bump .opt-order-bump__quantity-input {
    width: 70px;
    max-width: 100%;
    border-style: solid;
    border-width: 1px;
}
.opt-order-bump__quantity {
    /* Quantity is either next to the optin checkbox or on the bottom */
    order: 4;
}

/* END ORDER BUMP ---------------------------------------------------------------------- */

/* RECAPTCHA ----------------------------------------------------------------------------------------------------- */
.opt-recaptcha {
    display: inline-block;
}

.opt-recaptcha--error {
    border: 1px solid #c31c00;
}
/* END RECAPTCHA ----------------------------------------------------------------------------------------------------- */

/* ORDER SUMMARY --------------------------------------------------------------------------------------- */

ontraport-order-summary {
    display: flex;
    flex-direction: column;
    width: 100%;
}

ontraport-order-summary .display-none {
    display: none !important;
}
ontraport-order-summary .ussr-grid-wrapper {
    width: 100%;
}
ontraport-order-summary .grid th {
    text-transform: capitalize;

    /* prevent quanity from wrapping into 2 lines */
    white-space: nowrap;
}
ontraport-order-summary tr {
    /*overloading materializes default table style*/
    border-bottom: 0px solid transparent;
}
.ontraport_gridrow--spacer td{
    border-style: none !important;
}
ontraport-order-summary label {
    color: inherit;
}

ontraport-order-summary  td,
ontraport-order-summary  th {
    /* negate the materialize default style */
    padding: 0;
}

ontraport-order-summary  .ontraport_gridcell__content {
    display: inline-block;
    width: 100%;
}

ontraport-order-summary .position-relative {
    position: relative;
}

ontraport-order-summary .display-flex {
    display: flex;
}

.ontraport_gridcell_trial {
    margin-bottom: 1em;
}

.ontraport_grid th:first-child, .ontraport_grid td:first-child {
    width: 33%;
}

.ontraport_grid.grid th:last-child,
.ontraport_grid.grid td:last-child {
    text-align: right;
}


.ontraport_gridrow--spacer td{
    padding: 0 !important;
}

.ussr-component-grid-body th,
.ussr-component-grid-body td {
    border-radius:  0;
}

.grid-summary tr:first-child td,
.ontraport_grid thead th,
.ussr-component-grid-body tr:first-child td {
    border-top-style: none !important;
}

.grid-summary tr td,
.ontraport_grid thead th,
.ussr-component-grid-body .ontraport_gridrowtd-border:last-child{
    border-bottom-style: none !important;
}

.grid-summary tr td:first-child,
.ontraport_grid thead th:first-child,
.ussr-component-grid-body tr td:first-child{
    border-left-style: none !important;
}

.grid-summary tr td:last-child,
.ontraport_grid thead th:last-child,
.ussr-component-grid-body tr td:last-child{
    border-right-style: none !important;
}

.grid-summary {
    width: 67%;
    margin: 0 0 0 auto;
}
.grid-summary td:nth-child(2){
    text-align: right;
}

.grid-summary select {
    display: initial;
}

.ontraport_gridcell__label{
    display: none;
}

/* Force the total to not wrap, which will prevent the label from taking up unneccesary extra space */
ontraport-order-summary .grid-summary-grandtotal td:last-child {
    white-space: nowrap;
}

/* Order summary number input */
ontraport-order-summary input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
}

ontraport-order-summary input[type=number] {
    min-width: 2em;
    -moz-appearance: textfield;
}

.ussr-component-gridcell-input-number-spinner-wrapper {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1em;
}

ontraport-order-summary [data-modelattr="price"] {
    text-align: right;
}

ontraport-order-summary [data-modelattr="quantity"]{
    /* force chrome and ff to render the quantity  exactly the same.
       The order summary can at most have 6 columns ( ITEM, QTY, PRICE,	TRIAL, TAXABLE, TODAY'S TOTAL )
       10% gives the quantity a reasonable amount of space while not crowding others that need more.
    */
    width: 10%;
}

[data-modelattr="quantity"] .ontraport_gridcell__content {
    display: flex;
}

.ussr-component-gridcell-input-number-spinner-btn-up,
.ussr-component-gridcell-input-number-spinner-btn-down {
    display: flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.ussr-component-gridcell-input-number-spinner-btn-up:before {
    content: "<";
    transform: rotate(90deg);
}

.ussr-component-gridcell-input-number-spinner-btn-down:before {
    content: ">";
    transform: rotate(90deg);
}

ontraport-order-summary .grid-summary-coupon--error {
    display: flex;
    align-items: center;
    text-align: left;
}

ontraport-order-summary .ontraport_gridcell_price__payment_plan_title {
    margin-bottom: -14px;
}
ontraport-order-summary .ontraport_gridcell_price__title {
    display: none;
}
/* if we have a trial show the price labels */
ontraport-order-summary .ontraport_gridcell_price--has-trial .ontraport_gridcell_price__title {
    display: block;
}
/* hide the label that says plural 'payment plans' since we are going to show the singular label 'payment plan' instead */
ontraport-order-summary .ontraport_gridcell_price--has-trial .ontraport_gridcell_price__payment_plan_title {
    display: none;
}
/* relative to above rule -> show the singular 'payment plan' label instead */
ontraport-order-summary .ontraport_gridcell_price--has-trial .ontraport_gridcell_price__payment_plan_title--singular {
    display: block;
}

ontraport-order-summary .ontraport_gridcell_charge_later__title {
    margin-top: 1em;
}


ontraport-order-summary .ontraport_grid_offer__taxjar-error-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left !important;
}

ontraport-order-summary .ontraport_grid_offer__taxjar-error-message { 
    color: #f61f0d !important;
    text-align: right !important;
}
/* ORDER SUMMARY -- responsive / mobile */
@media (max-width: 850px) {

    ontraport-order-summary[responsive] .ontraport_grid thead {
        display:none
    }

    ontraport-order-summary[responsive] .ussr-component-grid-body tr {
        display: block;
        width: 100%;
    }

    ontraport-order-summary[responsive] .ussr-component-grid-body td {
        display: flex;
        width: 100%;
        text-align: right;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        padding-left: 0;
        padding-right: 0;
        padding: 0 !important;
        height: auto;

    }

    ontraport-order-summary[responsive] .ontraport_gridcell__label {
        display: inline-block;
        padding: 0 .6em 0 0;
        width: 30%;
        float: left;
        text-align: left;
        vertical-align: top;
        text-transform: capitalize;
    }

    ontraport-order-summary[responsive] td[data-modelattr="price"] .ontraport_gridcell_trial {
        margin-bottom: 1em;
    }

    .ontraport_gridcell__content {
        text-align: right;
        justify-content: flex-end;
    }

    ontraport-order-summary[responsive] td:empty, ontraport-order-summary[responsive] th:empty {
        display: none!important
    }

    ontraport-order-summary[responsive] .moonray-form-paymentplandisplay-wrapper td {
        border-style: none;
        padding-top: .25em;
        padding-bottom: .25em;
        text-align: left
    }

    ontraport-order-summary[responsive] .moonray-form-paymentplandisplay-wrapper tr:first-of-type>td:first-of-type {
        width: 100%;
        padding-bottom: .5em
    }

    ontraport-order-summary[responsive] .grid-summary tr,
    ontraport-order-summary[responsive] .moonray-form-paymentplandisplay-wrapper tr,
    ontraport-order-summary[responsive] .moonray-form-paymentplandisplay-wrapperv td {
        border-top-style: none
    }

    ontraport-order-summary[responsive] input[type=number] {
        text-align: right;
        max-width: 6em;
        box-sizing: border-box
    }

    ontraport-order-summary[responsive] .ussr-component-grid-row.product .ussr-component-gridcell-input-number-spinner-wrapper {
        margin-top: 0
    }

    ontraport-order-summary tfoot td[colspan]+td[colspan] {
        border-style: none
    }

    ontraport-order-summary[responsive] .grid-summary {
        width: initial;
        float: none;
    }

    ontraport-order-summary[responsive] .grid-summary td:first-of-type {
        padding-left: 0;
        text-align: left;
    }

    ontraport-order-summary[responsive] .grid-summary td:last-of-type {
        padding-right: 0;
        text-align: right;
    }
     ontraport-order-summary .grid-summary_coupon-input__check-submit {
        right: 24px;
    }
}

/* END ORDER SUMMARY ----------------------------------------------------------------------------------- */

/* PAYMENT INFO ---------------------------------------------------------------------------------------- */

.payment-info {
    min-height: 100px;
    width: 100%;
}
.payment-info--idle {
    opacity: 1
}

.payment-ino__error-msg{
    display: none;
}
.payment-info--error .payment-ino__error-msg{
    display:block;
    color: red;
    margin-top: 3em;
}


.payment-info--fetching {
    opacity: .7;
}

.payment-info.payment-info--fetching tr.payment-info__progress {
    display: table-row;
}

.payment-info tr.payment-info__progress {
    display: none;
}

.payment-info__progress td {
    border-bottom: 1px solid #f5f5f5;
}

.payment-info table {
    width: 100%;
    min-height: 3em
}

.payment-info tr.ontraport__gridrow--spacer td{
   padding: 0;
}

.payment-info .ontraport__gridrow td {
    white-space: nowrap;
    vertical-align: top;
}

/* Allow the product name field to wrap incase we get super long product names */
.payment-info .ontraport__gridrow td:first-child {
    white-space: normal;
}

.payment-info .payment-info__header-row th::first-letter,
.payment-info .ontraport_gridcell__label::first-letter,
.payment-info .ontraport_gridcell__content::first-letter {
    text-transform: capitalize;
}

.payment-info th, .payment-info td{
    padding: 0;
    border-radius: 0;
}

.payment-info .ontraport_gridcell__content {
    display: inline-block;
    width: 100%;
}

.payment-info tr {
    /*overloading materializes default table style*/
    border-bottom: 0px solid transparent;
}

.ontraport__gridrow--empty {
    font-style: italic;
}

.payment-info th {
    /*
       Browsers bold th by default, we add font style to the tr around them. This allows the th
       to inherit the font-weight applied to the tr
    */
    font-weight: inherit;
}

/* payment-info -- responsive / mobile */
@media (max-width: 850px) {

    .payment-info .payment-info__header-row {
        display: none;
    }

    .payment-info tr {
        display: block;
        width: 100%;
    }

    .payment-info thead th:first-child {
        display: block;
    }

    .payment-info .ontraport_gridcell__label {
        display: inline-block;
        padding: 0 .6em 0 0;
        width: 60%;
        float: left;
        text-align: left;
        vertical-align: top;
        text-transform: capitalize;
    }
    .payment-info td {
        display: flex;
        width: 100%;
        text-align: right;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        padding-left: 0;
        padding-right: 0;
        height: auto;

    }

    .payment-info .ontraport__gridrow--empty .ontraport_gridcell__content{
        text-align: left;
    }
}
/* END PAYMENT INFO ------------------------------------------------------------------------------------ */



/* ORDER FORMs ----------------------------------------------------------------------------------------- */
.moonrayUILockerOverlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba( 0,0,0,.2);
    z-index: 999999999;
}
.moonrayUILockerMessage {
    position: fixed;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    top: 50%;
    left: 50%;
    background: white;
    width: 50%;
    max-width: 300px;
    min-height: 86px;
    padding: 24px 20px 16px 20px;
    transform: translate( -50%, -50%);
    z-index: 1000000000;
    box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.4 );
    border-radius: 14px;
    line-height: 1.2rem;
}

.moonrayUILockerMessage .title {
    margin-bottom: 28px;
}

.moonrayUILockerMessage .message {
    padding-bottom: 8px;
}
.moonrayUILockerMessage .message:empty {
    display: none;
}

.moonrayUILockerMessage i.close-button {
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 20px;
    cursor: pointer;
    color: #bdbdbd;
}

.moonrayUILockerMessage__action-button:empty {
    display: none !important;
}

.moonrayUILockerMessage__action-button {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 6px 12px;
    line-height: 20px;
    margin: 0 auto;
    display: block;
    width: fit-content;
}

.moonrayUILockerMessage .progress {
    margin: 0 0 -1px 0;
    height: 8px;
    border-radius: 4px;
    width: 100%;
}

.moonrayUILockerMessage .progress .indeterminate:before,
.moonrayUILockerMessage .progress .indeterminate:after,
.moonrayUILockerMessage .progress .determinate {
    border-radius: 4px;
}

.moonrayUILockerMessage .progress:has( > .determinate ) {
    width: calc( 100% - 34px);
}
.moonrayUILockerMessage .progress .determinate:after {
    content: attr(data-text);
    position: fixed;
    bottom: 31px;
    right: 20px;
}

.grid-summary-coupon--error,
/* Aggressively load up on weight to beat out the .dark-color-text theme */
.moonrayUILockerMessage.theme--error.theme--error.theme--error.theme--error .message {
    color: #F61F0D;
}

.moonrayUILockerMessage.theme--error .progress .determinate {
    background-color: #F61F0D !important;
}

@media (max-width: 600px) {
    .moonrayUILockerMessage {
        width: 90%;
        height: 250px;
    }

}

.moonrayUILockerMessage-closebutton-false i {
    visibility: hidden;
}

/* Coupons -----------------------------------------------*/
.grid-summary_coupon-input__check-submit {
    /*Using flex and negative margin to position the input checkmark button.  Legecy markup dependancy make it risky to move things in the dom*/
    cursor: pointer;
    display: block;
    width: 32px;
    z-index: 100;
    border-radius: 3px;
    color:#777;
    margin-top: 6px;
    margin-right: 5px;
    overflow: hidden;
 }

.grid-summary-coupon-input input.grid-summary_coupon-input__input {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 2em 0 1em;
    box-sizing: border-box;
    margin-right: -36px;
}

.grid-summary-coupon-input input.grid-summary-coupon-input--error {
    border: 1px solid #c31c00;
    box-shadow: 0 1px 0 0 #c31c00;
}

/*
 Stop gap to hide the shipping section when there is no shipping set to prevent the flash of the shipping setting and drilldown being rendered and then removed.
 @TODO: Remove this style and refactor grid to just not add the element until it is needed (or at least add it styled as hidden until needed)
 */
ontraport-order-summary[shipping="[]"] .grid-summary-shipping-selector {
    display: none;
}

/* Smart form specific styles, if a smart form is put in a v3 page.  */

.moonray-form .ontraport_grid_offer__coupon-input {
    div {
        border: 1px solid #9E9E9E;
        border-radius: 2px;
        height: 32px;
        display: flex;
        align-items: center;
    }
   div input,
   div input:hover {
       border: none;
   }
}
    

/* END ORDER FORMs ------------------------------------------------------------------------------------- */


/* SHIPPING FIELDS ------------------------------------------------------------------------------------- */
.opt-shipping-input {
    display: none;
}
.opt-shipping-input--show,
/*If there isnt a shipping toggle then we add the show class to the body and show all the shipping inputs all the time*/
.opt-shipping-input--show .opt-shipping-input {
    display: block;
}
/* END SHIPPING FIELDS --------------------------------------------------------------------------------- */

/* NAVBAR ----------------------------------------------------------------------------------- */
.opt-navigation-sidebar-template {
    display: none;
}

.opt-navigation-menu {
    display: flex;
    justify-content: flex-start;
}

.opt-navigation-menu__menu-button {
    display: none;
    border: 0;
    padding: 0;
    position: relative;

    /* Add size so this is an actual click target */
    width: 30px;
    height: 25px;
    background: transparent;
}

/* Override materialize default */
.opt-navigation-menu__menu-button:focus {
    background-color: transparent;
}

.opt-navigation-menu__menu-button-icon,
.opt-navigation-menu__menu-button-icon::before,
.opt-navigation-menu__menu-button-icon::after {
    display: block;
    position: absolute;
    height: 5px;
    width: 30px;
    top: 10px;

    /* don't allow the span to be clicked on, only the <a> */
    pointer-events: none;
}

.opt-navigation-menu__menu-button-icon::before {
    content: '';
    margin-top: -20px;
    background-color: inherit;
}

.opt-navigation-menu__menu-button-icon::after {
    content: '';
    margin-top: 0px;
    background-color: inherit;
}

.opt-navigation-menu.opt-navigation-menu--force-hamburger,
.opt-navigation-menu.opt-navigation-menu--force-hamburger-no-resize {
    display: flex;
    overflow: hidden;
    max-width: 30px;
    /* Override any potential inlined element positioning */
    justify-content: flex-start !important;
}
.opt-navigation-menu.opt-navigation-menu--force-hamburger .opt-navigation-menu__main-menu-links,
.opt-navigation-menu.opt-navigation-menu--force-hamburger-no-resize .opt-navigation-menu__main-menu-links {
    opacity: 0;
    pointer-events: none;
    margin: 0;
    margin-left: -30px;
    /* Shrink the element to be the size of the icon */
    height: 25px;
    /* When hamburger is forced, make sure the hidden horizontal nav doesn't have width */
    max-width: 30px;
}
.opt-navigation-menu.opt-navigation-menu--force-hamburger .opt-navigation-menu__menu-button,
.opt-navigation-menu.opt-navigation-menu--force-hamburger-no-resize .opt-navigation-menu__menu-button {
    display: block;
}

.opt-navigation-menu.opt-navigation-menu--force-hamburger.opt-navigation-menu--hamburger-align-center,
.opt-navigation-menu.opt-navigation-menu--force-hamburger-no-resize.opt-navigation-menu--hamburger-align-center {
    margin-left: auto;
    margin-right: auto;
}

.opt-navigation-menu.opt-navigation-menu--force-hamburger.opt-navigation-menu--hamburger-align-right,
.opt-navigation-menu.opt-navigation-menu--force-hamburger-no-resize.opt-navigation-menu--hamburger-align-right {
    margin-left: auto;
    margin-right: 0;
}

.opt-navigation-menu__main-menu-links {
    margin: 0;
}

.opt-navigation-menu__main-menu-links .opt-navigation-menu__main-menu-link-wrapper {
    display: inline-block;
}

.opt-navigation-menu__main-menu-link,
.opt-navigation-menu__sub-menu-link {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    position: relative;
    transition: background-color .3s ease-in-out;
}

.opt-navigation-menu__menu-hover-wrapper {
    position: relative;
}

i.opt-element.opt-navigation-menu__menu-item-icon {
    cursor: pointer;
}

/* Desktop & sidebar subnavigation hide styles */
.opt-navigation-menu__sub-menu-links {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition-property: max-height , opacity, margin-top;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Desktop subnavigation position style */
.opt-navigation-menu .opt-navigation-menu__sub-menu-links {
    position: absolute;
    z-index: 99999;
    max-width: 500px;
    margin-top: 10px;
    overflow: hidden;
}

/* Desktop specific subnavigation reveal styles */
.opt-navigation-menu .opt-navigation-menu__menu-hover-wrapper:hover .opt-navigation-menu__sub-menu-links {
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
}

/* Sidebar specific subnavigation hide styles */
.opt-navigation-sidebar .opt-navigation-menu__sub-menu-links {
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    transition-duration: 350ms;
}

/* Sidebar specific subnavigation reveal styles */
.opt-navigation-sidebar__show-subnav .opt-navigation-menu__sub-menu-links,
.opt-navigation-menu__submenu--open .opt-navigation-menu__sub-menu-links {
    max-height: 100vh;
    opacity: 1;
    pointer-events: auto;
}

.opt-navigation-menu__has-submenu .opt-navigation-menu__main-menu-link .opt-navigation-menu__link-text-wrapper {
    position: relative;
    padding-right: 20px;
}

.opt-navigation-menu__subnav-carat-target {
    display: none;
}

.opt-navigation-menu__subnav-carat {
    display: block;
    width: 12px;
    transition: transform .35s ease-in-out;
}

.opt-navigation-menu__has-submenu > a .opt-navigation-menu__subnav-carat-target {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
    /* This border is necessary for the wrapper click area, because the carat is made by rotated boxes inside
    that would normally extend past this wrapper */
    border-top: 5px solid transparent;
}

.opt-navigation-menu__has-submenu > a .opt-navigation-menu__subnav-carat {
    background-color: #000;
}

.opt-navigation-menu__submenu--open .opt-navigation-menu__subnav-carat,
.opt-navigation-menu .opt-navigation-menu__menu-hover-wrapper:hover .opt-navigation-menu__subnav-carat {
    transform: rotate(180deg);
}

.opt-navigation-menu__has-submenu .opt-navigation-menu__subnav-carat::before {
    content: ' ';
    position: absolute;
    right: 5px;
    width: 8px;
    height: 2px;
    background-color: inherit;
    transform: rotate( 45deg );
}

.opt-navigation-menu__has-submenu .opt-navigation-menu__subnav-carat::after {
    content: ' ';
    position: absolute;
    right: 0;
    width: 8px;
    height: 2px;
    background-color: inherit;
    transform: rotate( -45deg );
}

/* If we always show the sidebar subnav, we don't need the arrow visible */
.opt-navigation-sidebar__show-subnav .opt-navigation-menu__main-menu-link .opt-navigation-menu__subnav-carat-target {
    display: none;
}

.opt-navigation-sidebar {
    position: fixed;
    left: -350px;
    width: 300px;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    /* @TODO: figure out how best to manage z-indices */
    z-index: 100;
    overflow-y: auto;
    box-shadow: 0px 24px 28px 3px rgba(0,0,0,0.14), 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 9px 36px 8px rgba(0,0,0,0.12);
    transition: left .25s ease-in-out;
}

.opt-navigation-sidebar--open {
    left: 0px;
}

body[opt-navigation-always-show="true"] .opt-navigation-sidebar {
    box-shadow: none;
    border-right: 2px solid var(--light-color);
}

.opt-navigation-sidebar__inner-wrapper {
    position: relative;
    /* Make sure the inner wrapper stretches so that the background will also stretch */
    min-height: 100%;
}

.opt-navigation-sidebar__nav-wrapper ul {
    margin: 0;
}

.opt-navigation-menu__icon {
    display: none;
}
.opt-navigation-sidebar__show-logo .opt-navigation-menu__icon {
    display: flex;
}

.opt-navigation-menu__icon img {
    max-width: 100%;
    z-index: 1;
}

body[opt-navigation-always-show="true"] {
    margin-left: 300px !important;
}

.opt-navigation-menu__type--text .opt-navigation-menu__menu-item-icon,
.opt-navigation-menu__type--icon .opt-navigation-menu__link-text,
.opt-navigation-menu__type--icon .opt-navigation-menu__link-sub-text {
    display: none;
}

.opt-navigation-menu__link-text,
.opt-navigation-menu__link-sub-text,
.opt-navigation-menu__menu-item-icon,
.opt-navigation-menu__main-menu-link {
    transition: color .3s ease-in-out;
    transition-property: color, border-color, background-color;
}

.opt-navigation-menu__link-text-wrapper {
    overflow: hidden;
}

.opt-navigation-menu__link-text,
.opt-navigation-menu__link-sub-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opt-navigation-sidebar__nav-wrapper .opt-navigation-menu__link-text, 
.opt-navigation-sidebar__nav-wrapper .opt-navigation-menu__link-sub-text {
    white-space: normal;
}

.opt-navigation-sidebar .opt-navigation-menu__link-text-wrapper {
    /* Override any text-align setting - we only ever want left align for sidebar */
    text-align: left !important;
    /* Give text wrapper in sidebar 100% width so that the carat is pinned to the right */
    width: 100%;
}

.opt-navigation-sidebar .js-opt-bg-img {
    /* Prevent sidebar bg underlay from appearing above the content (since it is higher in the DOM) */
    z-index: -1;
}

/* Hide the sub-text wrapper if it is empty so that the padding doesn't affect the layout*/
.opt-navigation-menu__link-sub-text:empty {
    display: none;
}

.opt-navigation-sidebar-overlay::before {
    content: ' ';
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 9999;
    -webkit-animation: fadeIn 0.3s;
	animation: fadeIn 0.3s;
}

/* Make sure the sidebars are above the overlay */
.opt-navigation-sidebars {
    z-index: 99999;
    position: relative;
}

@keyframes fadeIn
{
	from { opacity: 0.4; }
	to { opacity: 1; }
}

.opt-navigation-sidebar__custom-html-above-logo,
.opt-navigation-sidebar__custom-html-above-nav,
.opt-navigation-sidebar__custom-html-below-nav {
    z-index: 1;
    position: relative;
    line-height: initial;
}

/* Sticky blocks when navigation sidebar is fixed needs to be pushed over the width of the sidebar nav */
body[opt-navigation-always-show="true"] .opt-container .opt-row.pinned,
body[opt-navigation-always-show="true"] .opt-container .opt-row.pin-fixed-bottom  {
    width: calc( 100% - 300px ) !important;
}
/* 
   Overload the stickblocks translation. Since the sticky block width is reduced we have to adjust its position, 
   sticky blocks center via setting a left: % then translating back. The translation needs to be adjusted to accomidate for the width reduction above.
*/
body[opt-navigation-always-show="true"] .opt-container .opt-sticky-block.pinned,
body[opt-navigation-always-show="true"] .opt-container .opt-sticky-block.pin-fixed-bottom {
    transform: translate( calc(-50% + 150px) );
}



/* END NAVBAR ----------------------------------------------------------------------------------- */

/* DISPLAY SETTINGS */

/* The weight of this selector needs to beat [data-block-viewport-display="mobile"] or conditional blocks on mobile get shown */
.conditions__display_time_seconds--hidden.conditions__display_time_seconds--hidden {
    display: none;
}

/* LOADING ANIMATION ----------------------------------------------------------------------------------- */
.progress-wrapper {
    display: flex;
    height: 100%;
    min-height: 3.6em;
    align-items: center;
    justify-content: space-between;
    margin: 0 5%;
}

.progress {
    width: 22%;
    height: 10px;
    background-color:  #eeeeee;
}

.progress .indeterminate {
    background-color: #f5f5f5;
}
.progress .indeterminate:before {
    animation: indeterminate 1.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
    animation: indeterminate-short 1.1scubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation-delay: .65s;
}

/* loading -- responsive / mobile */
@media (max-width: 850px) {
    .progress-wrapper {
        width: 100%;
    }
    .progress-wrapper .progress{
        width: 100%;
    }
    .progress-wrapper .progress:not(:first-child){
        display: none;
    }
}

/* Reactions ----------------------------------------------------------------------------------- */
.opt-reaction {
    display: inline-flex;
    align-items: center;
}

.opt-reaction .opt-reaction__total-records {
    margin-left: 5px;
}

.opt-reaction .opt-reaction__text-container {
    padding: 8px 15px;
}

.opt-reaction[data-reaction-state="selected"] .opt-reaction__selected-text {
    display: flex;
}
.opt-reaction .opt-reaction__unselected-text {
    display: none;
}
.opt-reaction .opt-reaction__hover-text {
    display: none;
}
.opt-reaction:not([data-reaction-state="selected"]) .opt-reaction__selected-text {
    display: none;
}
.opt-reaction:not([data-reaction-state="selected"]) .opt-reaction__unselected-text {
    display: flex;
    cursor: pointer;
}
.opt-reaction:not([data-reaction-state="selected"]):hover .opt-reaction__unselected-text {
    display: none;
}
.opt-reaction:not([data-reaction-state="selected"]):hover .opt-reaction__hover-text {
    display: flex;

}

.opt-reaction  .opt-reaction__icon,
.opt-reaction .opt-reaction__text-container {
    cursor: pointer;
}


.opt-reaction .opt-reaction__text-container {
    display: none;
}
.opt-reaction[data-reaction-type="text"] .opt-reaction__text-container {
    display: flex;
}
.opt-reaction[data-reaction-type="text"] .opt-reaction__icon {
    display: none;
}


.opt-reaction .opt-reaction__total-records {
    display: none;
}

.opt-reaction[data-reaction-count="1"] .opt-reaction__total-records {
    display: flex;;
}

/* Search ----------------------------------------------------------------------------------- */
i[opt-type="search_clear"]{
    position: absolute;
    z-index: 1;
    cursor: pointer; 
}

i.display-none[opt-type="search_clear"] {
    display: none; 
}

/* CC input element 
 * overflow:  forces the first child's margin to not collapse out of the parent element wrapper. This allows us to get an
 * accurate height for the inputs iframe during publishing. Use hidden so there is no chance of seeing a scrollbar.
 */
.op-credit-card-inputs {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    container-type: inline-size; 
    container-name: op-credit-card-inputs-container;
}

.op-credit-card-inputs .el__style[class*="payment_name"] {
    flex: 1 1 100%;
}
.op-credit-card-inputs .el__style[class*="payment_number"] {
    flex: 1 1 75%;
}
.op-credit-card-inputs .el__style[class*="payment_code"] {
    flex: 1 1 25%;
}
.op-credit-card-inputs .el__style[class*="payment_expire_month"],
.op-credit-card-inputs .el__style[class*="payment_expire_year"] {
    flex: 1 1 50%;
}