:root {
    --titleFontsize: "24px";
    --titleAlign: "left";
    --titlePadding: "10px";
    --titleBackgroundcolor: "#DEDDDD";
    --titleBordercolor: "#000000";
    --titleTextcolor: "#000000";
    --titleFontweight: "bold";
    --hideBordertop:"1px";
    
    --containerBackgroundcolor: "#FFFFFF";
    --containerSeparatorcolor: "#8B8B8B";
    --containerBordercolor: "#8B8B8B";
    --containerBoxpadding: "10px";
    --containerGap: "10px";
    --containerTipcolor: "#00000";
    --containerFieldheight:"35px";

    --optdispWidth: "200px";
    --optdispAlignment: "left";
    --optdispFontsize: "14px";
    --optdispTextcolor: "#000000";
    --optdispFontweight: "bold";
    --optdispPlacement: "left";

    --optvalsFontsize: "12px";
    --optvalsIconsize:"10px";
    --optvalsTextcolor: "#000000";
    --optvalsFieldwidth:"175px";
    --optvalsLeftPadding:"0px";
    --optvalsFontweight: "normal";
    --optvalsImagewidth:"50";
    --optvalsImageheight:"50";
    --optvalsImageshape:"square";

    --swatchWidth: "50px";
    --swatchHeight: "50px";
    --swatchUnselectedcolor: "#D1D1D1";
    --swatchSelectedcolor: "#00000";
  
    --buttonUnselectedtext: "#000000";
    --buttonUnselectedborder: "#000000";
    --buttonUnselectedbackground: "#FFFFFF";
    --buttonSelectedtext: "#FFFFFF";
    --buttonSelectedborder: "#000000";
    --buttonSelectedbackground: "#000000";
    --buttonBorderradius: "5";
    --buttonPadding: "10";
    --buttonSpacing: "5";

    --radioScale: "1.7";
    --radioRightmargin: "10";
    --radioLeftmargin: "15";
    --radioTopbottom: "15";
    --radioColumnwidth: "100";

    --lookupNumberwidthOne: "100px";
    --lookupDropwidthOne: "75px";
    --lookupNumberwidthTwo: "100px";
    --lookupDropwidthTwo: "75px";

    --totalBackgroundcolor: "#4682de";
    --totalBordercolor: "#8B8B8B";

    --totalTextfontsize:"30px";
    --totalTextcolor: "#FFFFFF";
    --totalTextfontweight:"bold";
    --totalDiscountfontsize:"30px";
    --totalDiscountfontweight:"bold";
    --totalDiscountRegularPricecolor:"#000000";
    --totalDiscountPricecolor:"#FFFFFF";
    --totalDiscountSavingscolor:"#19fda9";
    --totalDiscountOptsetDiscountcolor:"#fff80f";

    
    --totalAmountfontsize:"30px";
    --totalAmountcolor: "#FFFFFF";
    --totalAmountfontweight:"bold";
   
    --totalSufixfontsize:"30px";
    --totalSufixcolor: "#FFFFFF";
    --totalSufixfontweight:"normal";

    --quantityButtonsmargin: "3px";
    --quantityTextcolor:  "#CED4DA";
    --quantityButtoncolor: "#f4f4f4";
    --quantityBorderwidth: "1px";
    --quantityBordercolor:  "#d7dbdb";
    --quantityBorderradius:  "3px";
    --quantityHovercolor: "#000000";
    --quantityHovertextcolor:  "#FFFFFF";
    --quantitytHoverbordercolor: "#000000";

    --addtocartFontfamily: "";
    --addtocartFontsize: "24";
    --addtocartFontweight:"bold";
    --addtocartTextcolor: "#000000";
    --addtocartButtoncolor:"Red";
    --addtocartBorderwidth:"1";
    --addtocartBordercolor: "#000000";
    --addtocartBorderradius:"5";
    --addtocartButtonheight: "40";
    --addtocartHovercolor: "#FFFFF";
    --addtocartHovertextcolor:"#000000";


    --saveTextcolor: "#FFFFFF";
    --saveBackgroundcolor: "#4682de";
    --saveBordercolor: "#4682de";
    --saveBorderwidth: "1px";

    --cancelTextcolor: "#000000";
    --cancelBackgroundcolor: "#dedede";
    --cancelBordercolor: "#dedede";
    --cancelBorderwidth: "1px";
  }

/*-- Title Style */
.optionTitle {
    font-size: var(--titleFontsize);
    text-align: var(--titleAlign);
    padding-left: var(--titlePadding);
    padding-right: var(--titlePadding);
    padding-top: var(--titlePadding);
    padding-bottom: var(--titlePadding);
    background-color: var(--titleBackgroundcolor);
    border: 1px solid var(--titleBordercolor);
    color: var(--titleTextcolor);
    font-weight: var(--titleFontweight);
    line-height: var(--titleFontsize);

}

.optionTitle:empty {
    display: none;
}

/*-- Container Style */
.product-custom-option{
    border-right: 1px solid var(--containerBordercolor);
    border-left: 1px solid var(--containerBordercolor);
    border-bottom: 1px solid var(--containerBordercolor);
    border-top: var(--hideBordertop) solid var(--containerBordercolor);
    padding-left: var(--containerBoxpadding);
    padding-right: var(--containerBoxpadding);
    padding-top: var(--containerBoxpadding);
    padding-bottom: var(--containerBoxpadding);
    background: var(--containerBackgroundcolor);
}

/* Container Box Style */ 
.optionHolder {
    background: var(--containerBackgroundcolor);
}

/* Container Box Seperator Style */ 
hr.containerSeparator {
    background-color: var(--containerSeparatorcolor);
    margin-top: calc(var(--containerGap) / 2);
    margin-bottom:  calc(var(--containerGap) / 2);
    width: 100%;
}

.arrow-icon{
    position: absolute;
    right: 5px;
    top: 11px;
    font-size: 23px;
    /* transform: rotate(89deg); */
    cursor: default;
    width: var(--optvalsIconsize);
}

.option-list-frame {
    display: var(--optdispPlacementdisplay);
    margin:0px !important;
}

.option-name-display{
    font-weight: 700;
    font-size: 17px;
    display: inline-flex;
    padding-top: var(--optdispPlacementpadding);
    padding-bottom: var(--optdispPlacementpadding);
   /* width: var(--optdispWidth);*/
    width: 100%;
    justify-content: var(--optdispAlignment);
    word-break: break-word;
    margin-top: 8px;
    position:relative;
}

.option-label{
    margin-right: 10px;
    display: inline-flex;
    width: var(--optdispWidth);
    line-height: initial;
    font-size: var(--optdispFontsize);
    color:var(--optdispTextcolor);
    font-weight:var(--optdispFontweight);
    padding-top: var(--optdispPlacementpadding);
    padding-bottom: var(--optdispPlacementpadding);
    justify-content: var(--optdispAlignment);
    min-width:60px;
    /*height: 38px;*/
}

.lookup {
    width:100%;
}


.opc-product-option-item {
    display: block;
}


/* SWATCH STYLES */

.option-type-swatch {
    position: relative;
    display: var(--optdispPlacementdisplay); /*inline-block;*/
    margin-left:  calc(var(--optdispPlacementpadding)*2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.option-type-radio .inlinePrice {
    width: 20%;
    font-size: var(--optvalsFontsize) !important;
    line-height: 1.3;
    text-align: right;
}

.option-type-radio .inlineDiscount {
    width: 35%;
    padding-left: 25px;
    font-size: var(--optvalsFontsize) !important;
    line-height: 1.3;
    text-align: left;
    color: #2a793e;
}

.option-type-dropdown-content .inlinePrice {
    flex:1;
    font-size: var(--optvalsFontsize) !important;
    line-height: 1.3;
    text-align: right;
    padding-right:40px;
}
.option-type-dropdown-content .inlineDiscount {
    flex:1;
    font-size: var(--optvalsFontsize) !important;
    line-height: 1.3;
    text-align: left;
    color: #2a793e;
}

.swatch-input-holder {
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;  
    line-height: 0px;
    border: 1px solid var(--swatchUnselectedcolor);
    border-radius: 6px;
    display: inline-flex;
    position: relative;
}
.swatch-input-holder .swatch-input {
    margin-right: 0px;
    display:none;
}
.swatch-input-holder label{
    margin-bottom:0px;
}

.swatch-input-holder .swatch-color {
    width: var(--swatchWidth);
    height: var(--swatchHeight);
    cursor: pointer; 
    line-height: initial;
}

.swatch-input-holder .swatch-image {
    width: var(--swatchWidth);
    height: var(--swatchHeight);
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;  
    background-size: cover;
}

.swatch-input-holder .round {
    border-radius: var(--swatchHeight);
    border: 1px solid white;
}

.swatch-input-holder .square {
    border-radius: 6px;
    border: 1px solid white;;
}
  
.swatch-input-holder input[type="radio"]:checked + label {
    border: 3px solid var(--swatchSelectedcolor);
}

.swatch-input-holder input[type="checkbox"]:checked + label {
    border: 3px solid var(--swatchSelectedcolor);
}

label.swatch.swatch-color.disabled {
    opacity: 0.5;
}
label.swatch.swatch-color.disabled:hover {
    cursor: default;
}
label.swatch.swatch-image.disabled {
    opacity: 0.5;
}
label.swatch.swatch-image.disabled:hover {
    cursor: default;
}



/* SWATCH TOOLTIP */
  
  /* Tooltip text */
  .swatch-input-holder .tooltiptext {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s;
    background-color: black;
    width: 100px;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    font-size:10px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 115%;
    left: 50%;
    margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
    line-height: initial;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .swatch-input-holder:hover .tooltiptext {
      opacity: 1;
      visibility: initial;
  }
  
  .swatch-input-holder  .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }



  /* Price holder */
.priceholder {
    font-size: 13px;
    font-weight: 400;
    display: inline-flex;
    margin-left: auto;
    padding-left: 10px;
    justify-content: end;
    line-height: initial;
    text-align: end;
    min-width:125px;
    /*padding-bottom: 10px;*/
    /*height: 38px;*/
}

@media screen and (max-width: 450px) {
    .priceholder {
        flex-direction: column !important;
    }
  }
  
.priceLabel {
    width: auto;
    min-width: 75px;
    padding-left: 5px;
    text-align: right;
}

.priceLabel:empty {
    display: none;
  }


/* RADIO STYLES */

.radio-input-holder {
    display: inline-flex;
    min-width: var(--radioColumnwidth);
    margin-top: calc( var(--radioTopbottom)/2);
    margin-bottom: calc( var(--radioTopbottom)/2);
  
}

.radio-input-holder input {
    margin-top: 2px;
}

.product-custom-option .radio-input-holder input {
    /*-webkit-appearance: button !important;*/
    height: 12px !important;
    cursor: pointer;
}

.radio-input-holder label {
    font-weight: var(--optvalsFontweight) !important;
    font-size: var(--optvalsFontsize) !important;
    color: var(--optvalsTextcolor) !important;
    height: var(--optvalsFontsize) !important;
    cursor: pointer;
    padding-right: var(--radioLeftmargin);
}

.radio-input-holder .inline-discount-label {
  width: 33%;
}


input[type=checkbox][disabled] {
    cursor: default;
}

input[type=checkbox][disabled] + label {
    cursor: default;
}

.radio-input-holder input[type=checkbox], input[type=radio] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(var(--radioScale) ); /* IE */
    -moz-transform: scale(var(--radioScale) ); /* FF */
    -webkit-transform: scale(var(--radioScale) ); /* Safari and Chrome */
    -o-transform: scale(var(--radioScale) ); /* Opera */
    transform: scale(var(--radioScale) );
    margin-right: var(--radioRightmargin) ;
}



/* BUTTON STYLES */

 .button-ui-listing{
    display: contents;
    list-style-type: none;
 }
 
 .button-input {
    margin-right:var(--buttonSpacing) !important;
    display:none !important;
 }

 .button-input-holder {
    margin-right: var(--buttonSpacing) !important;
    padding-top: 7px;
    padding-bottom: 7px;
 }

 .option-type-button {
    position: relative;
    display: var(--optdispPlacementdisplay);
    margin-left:  calc(var(--optdispPlacementpadding)*2);   
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
 }

  .button-input-holder label{
    list-style: none;
    background-color: var(--buttonUnselectedbackground);
    border: 1px solid  var(--buttonUnselectedborder);
    color:  var(--buttonUnselectedtext);
    padding-left: var(--buttonPadding);
    padding-right: var(--buttonPadding);
    padding-top:3px;
    min-width: 55px;
    min-height: 36px;
    text-align: center;
    border-radius:  var(--buttonBorderradius);
    vertical-align: middle;
    cursor: pointer;
    z-index: 90;
    line-height: 1.8em;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  
   .button-input-holder input[type="radio"]:checked + label {
    list-style: none;
    background-color: var(--buttonSelectedbackground);
    border: 1px solid var(--buttonSelectedborder);
    color: var(--buttonSelectedtext);
    padding-left: var(--buttonPadding);
    padding-right: var(--buttonPadding);
    min-width: 55px;
    line-height: normal;
    line-height: inherit;
  }
  
  .button-input-holder input[type="checkbox"]:checked + label {
    list-style: none;
    background-color: var(--buttonSelectedbackground);
    border: 1px solid var(--buttonSelectedborder);
    color: var(--buttonSelectedtext);
    padding-left: var(--buttonPadding);
    padding-right: var(--buttonPadding);
    min-width: 55px;
    line-height: normal;
    line-height: inherit;
  }
  

label.button-label.disabled {
    background-color: #e8e8e8;
    border-color: #bebebe;
    color: #b2b2b2;
    cursor: default;
}
 .button-label {
    line-height:1.3;
 }




 .option-error-msg-label {
    color: #121212;
    font-size: 11px;
    font-style: italic;
    font-weight: 500;
    /*height: 18px !important;*/
    display: block !important;
 }


 /* TEXT FIELD STYLES */

 .option-type-text input {
    height: 35px;
}


/* DROPDOWN STYLES */

.dropdown-img-view {
    height: var(--swatchHeight);
    width: var(--swatchWidth);
    margin-right: 10px;

}

.dropdown-color-view {
    height: var(--swatchHeight);
    width: var(--swatchWidth);
    margin-right: 10px;
    display: block;
}

.option-type-dropdown {
    position: relative;
    display: var(--optdispPlacementdisplay); /*inline-block;*/
    margin-left:  calc(var(--optdispPlacementpadding)*2);
}







/* Price Container Styles */

.option-price-label{
    background: var(--totalBackgroundcolor);
    padding: 10px;
    display: flex;
}
.option-price-container {
    border: 1px solid var(--totalBordercolor);
}

.addition-price-holder {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}


.addition-price-value-holder {
    display: inline-flex;
    text-align: center;
}


.addition-price-label{
    font-size:var(--totalTextfontsize);
    color:var(--totalTextcolor);
    font-weight:var(--totalTextfontweight);
    display: inline-flex;
    align-items: center;
}

.price-prefix  {
    color: var(--totalAmountcolor);
    font-weight: var(--totalAmountfontweight);
    margin-left: 16px;
    font-size: var(--totalAmountfontsize);
}


.price-suffix{
    color: var(--totalSufixcolor);
    font-weight: var(--totalSufixfontweight);
    margin-left: 10px;
    font-size: var(--totalSufixfontsize);
}





.addition-price-value{
    color: var(--totalAmountcolor);
    font-weight: var(--totalAmountfontweight);
    font-size: var(--totalAmountfontsize);
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -20px;
}

.addition-price-value.strike{

    /*
    color: var(--totalDiscountRegularPricecolor);
    text-decoration:  line-through;
    font-size: calc(var(--totalDiscountfontsize) - 4px);
    font-weight:var(--totalDiscountfontweight);
    padding-right: 10px
*/

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        flex-wrap: nowrap;

}



.addition-price-option-discounted-price {
    color: var(--totalDiscountRegularPricecolor);
    font-size: calc(var(--totalDiscountfontsize) * 0.6);
    line-height: initial;
    text-decoration: line-through;

}


.addition-price-extra-discount {
    font-size: calc(var(--totalDiscountfontsize) * 0.5);
    line-height: initial;
    color: var(--totalDiscountOptsetDiscountcolor);
    
}
.addition-price-option-discount{
    font-size: calc(var(--totalDiscountfontsize) * 0.5);
    line-height: initial;
    color: var(--totalDiscountOptsetDiscountcolor);
}



.addition-price-discount-price {
    color: var(--totalDiscountPricecolor);
    font-weight:var(--totalDiscountfontweight);
    font-size: var(--totalDiscountfontsize);
    padding-right: 10px
}

.addition-price-discount-message {
    color: var(--totalDiscountSavingscolor);
    display: block;
    text-align: center;
}

.addition-price-discount-prefix{
    white-space: pre;

}

.addition-price-discount-savings{
    font-weight: 900;
    white-space: pre;
}

.addition-price-discount-postfix{
    white-space: pre;
}



@media (min-width:1000px) {
    .addition-price-discount-message {
        display: inline-flex !important;
        vertical-align: text-top;
    }
    .addition-price-value-holder {
        display: inline-flex !important;
        align-items: center;
    }

    .addition-price-holder {
        flex-direction: row !important;
    }
}






.helpText{
    font-size: smaller;
    display: block;
    justify-content: var(--optdispAlignment);
  }


.minimal {
    background-image: 
    linear-gradient(45deg,  transparent 50%, gray 50%, gray calc(50% + 1px), transparent calc(50% + 2px)), 
    linear-gradient(-45deg, transparent 50%, gray 50%, gray calc(50% + 1px), transparent calc(50% + 2px));
        background-position: calc(100% - 1em ) calc(50%), calc(100% - 1em + 6px) calc(50%), calc(100% - 2em) 60%;
        background-size: 7px 6px, 6px 6.2px, 1px 29px;
        background-repeat: no-repeat;  
}



@keyframes addtocart_spinner {
    to {transform: rotate(360deg);}
}
    
.addtocart_spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: addtocart_spinner .6s linear infinite;
}

.addtocart_spinner {
    padding-right: 25px;
}

.addtocart_sticky {
    position: fixed;
    bottom: 28px;
    width: 50%;
    padding-right: 54px;
    z-index: 99;
}


.loader:empty {
    display:initial !important;
}


.circle-loader {
    margin-bottom: 0em;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-left-color: #5cb85c;
    animation: loader-spin 0.5s infinite linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
}
.load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: #5cb85c;
    transition: border 500ms ease-out;
}
.checkmark {
    display: none;
}
.checkmark.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
    opacity: 1;
    height: 0.75em;
    width: 0.35em;
    transform-origin: left top;
    border-right: 3px solid #5cb85c;
    border-top: 3px solid #5cb85c;
    content: '';
    left: 0.21em;
    top: 0.72em;
    position: absolute;
}
@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
   }
    100% {
        transform: rotate(360deg);
   }
}
@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
   }
    20% {
        height: 0;
        width: 0.35em;
        opacity: 1;
   }
    40% {
        height: .75e;
        width: 0.35em;
        opacity: 1;
   }
    100% {
        height:.75e0m;
        width: 0.35em;
        opacity: 1;
   }
}












:focus-visible {
    outline: 0px solid rgba(var(--color-foreground),0.5) !important;
    outline-offset: 0rem !important;
    box-shadow: 0 0 0 0 rgb(var(--color-background)),0 0 0.2rem 2px rgba(var(--color-foreground),0.1) !important;
}

/* Dropdown style */
.dropbtn {
    color: var(--optvalsTextcolor);
    font-weight:var(--optvalsFontweight);
    font-size: var(--optvalsFontsize);
    background-color: #fff;
    padding: 6px;
    width: var(--optvalsFieldwidth);
    border: none;
    cursor: default;
    margin-left: var(--optvalsLeftPadding);
    height:var(--containerFieldheight);
    border: 1px solid #CED4DA;    
    border-radius: 2px;
    padding-bottom: 4px;

}

/* over ride default drop down to match custom */
.product-custom-option select {
    -webkit-appearance: none !important;
    font-weight:var(--optvalsFontweight) !important;
    font-size: var(--optvalsFontsize) !important;
    color: var(--optvalsTextcolor) !important;

}

/* over ride default drop down to match custom */
.product-custom-option input {
/*    -webkit-appearance: none !important;*/
    font-weight:var(--optvalsFontweight) !important;
    font-size: var(--optvalsFontsize) !important;
    color: var(--optvalsTextcolor) !important;
    height:var(--containerFieldheight);
}


/* Lookup Options */
.option-type-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width:  var(--optvalsFieldwidth);
    max-width:  calc(var(--optvalsFieldwidth)*1.35);
    box-shadow: 0px 8px 16px 
        0px rgba(0, 0, 0, 0.2);
    z-index: 2;
    border: 1px solid #767676;
    margin-top: 35px;
    margin-left: var(--optvalsLeftPadding) !important;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.option-type-dropdown-content .tab-view {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropdown-label {
    flex: 1;
    text-align: left;
}

.option-type-dropdown-content .tab-view:hover {
    background-color: #f1f1f1
}

.option-type-dropdown:hover .dropbtn {
    background-color: #fff;
}

.option-dropdown-number{
    display: inline;
    margin-bottom: 10px;
}

.option-number-input{
    margin-right: 10px;
    display: block;
    width: var(--optvalsFieldwidth);
    padding: 0.6rem 0.25rem 0.6rem 0.75rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-bottom: 10px;
    display: inline-flex !important;
    padding-top: var(--optdispPlacementpadding);
    padding-bottom: var(--optdispPlacementpadding);
    justify-content: var(--optdispAlignment);
    height:var(--containerFieldheight);
}

.option-number-input.inputOne{
    width:var(--lookupNumberwidthOne);
    height:var(--containerFieldheight);
}

.option-number-input.inputTwo{
    width:var(--lookupNumberwidthTwo);
    height:var(--containerFieldheight);
}


.option-dropdown-input{
    padding: 0.35rem 2.25rem 0.7rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-bottom: 10px;
    display: inline-flex;
    padding-top: var(--optdispPlacementpadding);
    padding-bottom: var(--optdispPlacementpadding);
    justify-content: var(--optdispAlignment);
    background-color: white;
    height:var(--containerFieldheight);
}

.option-dropdown-input.inputOne{
    width:var(--lookupDropwidthOne);
    height:var(--containerFieldheight);
}

.option-dropdown-input.inputTwo{
    width:var(--lookupDropwidthTwo);
    height:var(--containerFieldheight);
}

.steppedHolder {
    display:inline-flex;
}

.option-stepped-input {
    margin-right: 0px !important;
    background-color: #F6F8F7 !important;
    border-top:1px solid #CED4DA;
    border-bottom:1px solid #CED4DA;
    border-left:1px solid #CED4DA;
    border-right:1px solid #CED4DA;
    text-align: center;
    margin-bottom: 10px;
    height: 35px !important;
    width: 100%;
}

.minusStep {
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    background-color: #CED4DA !important;
    border: 1px solid #CED4DA !important;
    width: 60px;
    height: 35px !important;
    margin-bottom: 10px;
}

.minusStep button:focus {
    outline:0;
}

.minusStep:hover {
    background-color: black !important;;
    color: white !important;
    cursor: pointer;
}

input[type="button"].minusStep {
    font-size: 19px !important;
    vertical-align: bottom;
    line-height: initial;
    padding: 0px;
}

.plusStep {
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    background-color: #CED4DA !important;
    border: 1px solid #CED4DA !important;
    width: 60px;
    height: 35px !important;
    margin-bottom: 10px;
}
.plusStep:hover {
    background-color: black !important;;
    color: white !important;
    cursor: pointer;
  }

input[type="button"].plusStep {
    font-size: 19px !important;
    vertical-align: bottom;
    line-height: initial;
    padding: 0px;
  }

.plusStep button:focus {
    outline:0;
}

.errorMsgCss{
    color: red;
    margin-top: -10px;
    margin-bottom: 10px;
}

.selected-dropdown-view{
    /*background: #f1f1f1;*/
    background:   #1E90FF
}

.tooltip-icon {
   display: inline-block;
   width:20px;
   vertical-align: text-top;
 
  }

 
.tooltip-icon .tooltip-icon-text {
/*Version 1*/
    visibility: hidden; 
    max-width: 400px;
    min-width: auto;
    width: max-content;
    padding: 10px;
    font-weight: 200;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    z-index: 1;
    border: 2px solid black;
    box-shadow: 1px 4px 5px 0px rgb(0 0 0 / 20%);
    margin-top: 13px;
    text-align: left;
    z-index:9;

    position: absolute;
    right:105%;
    display: inline-block;
    transform: translateY(calc(-50% + -5px));


    /* Version 2 */
    /*
    position: absolute;
    right:417px;
    transform: translate(1%,-47%);

    */

    /* transform: translate(-150%,-32px); */
    /* display: inline-flex;*/


}
@media (max-width:400px) {
    .tooltip-icon .tooltip-icon-text {
        max-width: 340px;
    }
}

@media (max-width:989px) {
    
    .tooltip-icon .tooltip-icon-text {
       /* left: calc(var(--containerBoxpadding) + 13px) !important;*/
        transform: translateY(calc(-100% + -22px)) !important;
        left:0px
    }

    .tooltip-icon .tooltip-icon-text:after{
        top: calc(100% + 12px) !important;
        border-top-color: #ffffff !important;
        border-left-color: transparent !important;
        border-width: 10px !important;
        margin-top: -13px !important;
    }
    
    .tooltip-icon .tooltip-icon-text:before{
        top: calc(100% + 12px) !important;
        border-top-color: #000000 !important;
        border-left-color: transparent !important;
        border-width: 10px !important;
        margin-top: -10px !important;
    }

    .tooltip-icon .tooltip-icon-text:after,   .tooltip-icon .tooltip-icon-text:before {
        left: 7px !important;
    }
 
}



.tooltip-icon .tooltip-icon-text:after,   .tooltip-icon .tooltip-icon-text:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tooltip-icon .tooltip-icon-text:after{
    border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
}

.tooltip-icon .tooltip-icon-text:before{
    border-color: rgba(0, 0, 0, 0);
	border-left-color: #000000;
	border-width: 14px;
	margin-top: -14px;
}

.tooltip-icon:hover .tooltip-icon-text {
    visibility: visible!important;
}


.tooltipTextWrapper{
      max-width: 400px !important;
      min-width: auto;
}


.addToCartCustomButton{
    color: var(--addtocartTextcolor);
    font-weight:  var(--addtocartFontweight);
    width: 100%;
    font-size:  var(--addtocartFontsize);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: var(--addtocartButtonheight) !important;
    font-family: var(--addtocartFontfamily) ;
    padding: 0.9rem 3rem 1.1rem;
    text-decoration: none;
    border: var(--addtocartBorderwidth) solid var(--addtocartBordercolor);
    border-radius: var(--addtocartBorderradius);
    background-color: var(--addtocartButtoncolor);
    box-shadow:  var(--addtocartShadow);
    min-width: 12rem;
    min-height: 4.5rem;
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    margin-top:10px;
    padding: 20px;
}



.addToCartCustomButton:disabled{
    background-color:#C6C6C6;
    border:#C6C6C6; 
}
.addToCartCustomButton:hover:disabled{
    background-color:#C6C6C6;
    border: #C6C6C6;
    color: var(--addtocartTextcolor);
    cursor: initial;
}

.addToCartCustomButtonPrice {
    padding-left: 28px;
}

.addToCartCustomButton:hover{
    color: var(--addtocartHovertextcolor);
    background-color: var(--addtocartHovercolor);
    border: var(--addtocartBorderwidth) solid var(--addtocartHoverbordercolor);
}

.product-error-msg-label{
    color: red;
}

.custom-loading{
    position: absolute;
    top: 0;
    left: 0;
}

.required-validation-msg{
    color: red;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    position: fixed;
    -webkit-animation: spin 1s linear infinite;  /* Safari */
    animation: spin 1s linear infinite; 
  }

.my-custom-spinner-loading .spinner {
    -webkit-animation: none !important;
    animation: none !important;
}


.text-input {
    width: 100% !important;
}

.paragraph-input {
    width: 100% !important;
    height:50px;
}

.email-input {
    width: 100% !important;
}

.number-input {
    width: 100% !important;
}


  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


.popup-loader {
    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.spinner-button {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: 10px;
   -webkit-animation: spin .75s linear infinite;
    animation: spin .75s linear infinite;

}



/* Shake Add to Cart button */
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
  
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
  
  .apply-shake {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  }


/* Instruction Styling */
.instruction-formula {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    white-space: pre;
}



/* Quantity Styling */

.opc-quantity-primary-holder {
    display:var(--quantityHide);
}

.opc-quantity-holder {
  /*  color: var(--quantityTextcolor);*/
}
.opc-quantity-holder .opc-quantity input {
    border: var(--quantityBorderwidth)px solid var(--quantityBordercolor);
}
    
.opc-quantity {
    margin-left: var(--quantityButtonsmargin);
    margin-right: var(--quantityButtonsmargin);
 }
 
 /* it will support chrome and firefox */
 .opc-quantity input[type=number]::-webkit-inner-spin-button,
 .opc-quantity input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance: none;
 }
 
 .opc-quantity-holder input {
    width:55px;
    padding:.5em;
    text-align:center;
    border-left: var(--quantityNoborder) solid var(--quantityBordercolor);  
    border-right: var(--quantityNoborder) solid var(--quantityBordercolor); 
    border-top: var(--quantityBorderwidth) solid var(--quantityBordercolor);
    border-bottom: var(--quantityBorderwidth) solid var(--quantityBordercolor);
    border-radius: 3px;
    margin-bottom: 10px;
 }
 
 .opc-quantity-holder .add1 {
   /* border-left:none;*/
    cursor: pointer;
    background-color: var(--quantityButtoncolor);
    border: var(--quantityBorderwidth) solid var(--quantityBordercolor);
    border-radius: var(--quantityBorderradius);
    color: var(--quantityTextcolor);
    width:35px;
 }

 .opc-quantity-holder .add1:disabled {
    color: #d7dbdb !important;
    cursor: initial;
    background-color: #f4f4f4 !important;
 }

 .opc-quantity-holder .minus1:disabled {
    color: #d7dbdb !important;
    cursor: initial;
    background-color: #f4f4f4 !important;
 }

 .opc-quantity-holder .minus1 {
    /*border-right:none;*/
    cursor: pointer;
    background-color: var(--quantityButtoncolor);
    border: var(--quantityBorderwidth) solid var(--quantityBordercolor);
    border-radius: var(--quantityBorderradius);
    color: var(--quantityTextcolor);
    width:35px;
 }

 .opc-quantity-holder .add1:hover:not([disabled]), .opc-quantity-holder .minus1:hover:not([disabled]) {
    background-color: var(--quantityHovercolor);
    color: var( --quantityHovertextcolor) !important;
    border: var(--quantityBorderwidth) solid var(--quantitytHoverbordercolor);
 }

 
.opc-quantity:disabled {
    background-color: #f4f4f4;
} 




/* DISCOUNT Styling */

.original-price {
    color: var(--discountRegularPricecolor);
    
}

.original-price.strike {
    color: var(--discountRegularPricecolor);
    text-decoration:  line-through;
}
.discounted-price {
    color: var(--discountSavingscolor);
    font-weight:900;

}

.discount-prefix { 
    color: var(--discountPricecolor);

}

.discount-postfix {
    color: var(--discountPricecolor);

}

.discount-savings {
    color: var(--discountPricecolor);
}


/* Date Styleing */

.fallbackDatePicker select {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height:var(--containerFieldheight);
    color:var(--optdispTextcolor);
    border: 1px solid #CED4DA;
}

.fallbackDatePicker label {
    font-size: 15px;
}

.option-type-date input{
    border: 1px solid #CED4DA;
    padding-left: 10px;
    padding-right: 10px;
}