@import url("./variables.css");@import url("./features.css");.pricing___module { container-name:pricing___module; container-type:inline-size; .tiered-features-con{ .why-item{ .price{ display:inline-block; margin-bottom:var(--gutter); font-size:var(--fontSize); font-weight:bold; } } } .pricing-calculator{ display:block; h1{ font-family:var(--fontFamilyBody); font-size:var(--fontSizeH2); line-height:1.5; font-weight:bold; margin:0 0 var(--gutter-quarter); color:var(--fontColor); .accent{border-bottom:4px var(--brandColor) solid;} } .sub{color:var(--gray);margin:0 0 var(--gutter-double);font-size:var(--fontSizeH4);line-height:1.5;} .card{ background:var(--white); border:1px solid var(--accentBackgroundColor); border-radius:var(--inputBorderRadius); padding:var(--gutter-double); margin-bottom:var(--gutter); box-shadow:2px 2px 10px 1px color-mix(in srgb, var(--shadowColor) 6%, transparent); &.optional{ h2{ position:relative; &:before{ border-radius:5px; font-weight:normal; content:'Optional'; font-size:var(--fontSizeSmall); color:var(--warningFontColor); border:1px var(--warningFontColor) solid; line-height:var(--gutter); padding:0px var(--gutter-quarter); visibility:visible; position:absolute; left:0; top:calc(var(--gutter) * -1); } } } h2{ font-size:var(--fontSizeH3); margin:0 0 var(--gutter-quarter); display:flex; align-items:center; } p.desc{color:var(--gray);} &.base-card{ background:var(--accentBackgroundColor); border-color:var(--accentBackgroundColor); .card-total{border-top:none;margin-top:0;padding-top:0;} } &.grand-card{ border:2px solid var(--brandColor); .card-total{ border-top:none; margin-top:0; padding-top:0; display:flex; align-items:center; .lbl{font-size:var(--fontSizeH4);color:var(--fontColor);} .val{font-size:var(--fontSizeH2);} } } } .card-total{ display:flex;justify-content:space-between;align-items:baseline; margin-top:var(--gutter);padding-top:var(--gutter-half);border-top:1px solid var(--accentBackgroundColor); .lbl{font-size:var(--fontSizeSmall);color:var(--gray);font-weight:bold;} .val{font-size:var(--fontSizeH4);font-weight:bold;color:var(--brandColor);} } label{ font-size:var(--fontSizeSmall); font-weight:bold; display:block; margin-bottom:var(--gutter-quarter); color:var(--fontColor); } input[type=number]{ width:100%; height:var(--inputHeight); padding:0 var(--gutter-half); border:1px solid var(--inputBorderColor); border-radius:var(--inputBorderRadius); background:var(--inputBackgroundColor); color:var(--fontColor); font-family:var(--fontFamilyBody); font-size:var(--fontSize); &:focus{border-color:var(--brandColor);} } select{ height:var(--inputHeight); padding:0 var(--gutter-half); border:1px solid var(--inputBorderColor); border-radius:var(--inputBorderRadius); background:var(--inputBackgroundColor); color:var(--fontColor); font-family:var(--fontFamilyBody); font-size:var(--fontSize); } .connector-row{ display:flex;gap:var(--gutter-half);align-items:center;margin-bottom:var(--gutter-quarter);flex-wrap:nowrap;justify-content:space-between; border-bottom:1px var(--lightGray) dashed; padding-bottom:var(--gutter-quarter); .img{ flex:0 0 var(--gutter-double); background-size:contain; background-position:center; box-shadow:0px 0px 1px 1px var(--gray); border:3px transparent solid; border-radius:50%; background-repeat:no-repeat; display:block; width:var(--gutter-double); height:var(--gutter-double); @container pricing___module (max-width:700px){ display:none; } } select{ flex:1 1 160px; min-width:0px; font-size:var(--fontSizeSmall); } .qty-input{font-size:var(--fontSizeSmall); flex:0 0 var(--gutter-double);text-align:right;padding:0 var(--gutter-quarter);} button{ flex:0 0 auto; background:none;border:none;color:var(--errorFontColor);cursor:pointer; font-size:18px;line-height:1; min-width:0px; padding:0px; &:hover{opacity:0.5;} } } .add-btn{ --btnFontColor:var(--primaryButtonBackgroundColor); display:inline-block; background:transparent; color:var(--btnFontColor); border:1px dashed var(--btnFontColor); border-radius:var(--playfulBorderRadius); height:var(--inputHeight); line-height:var(--inputHeight); padding:0 var(--gutter); font-family:var(--fontFamilyBody); font-size:var(--fontSizeSmall); font-weight:bold; cursor:pointer; transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); &:hover{opacity:0.5;} } .hint{color:var(--gray);font-size:var(--fontSizeVerySmall);margin-top:var(--gutter-quarter);} .badge{ display:inline-block;background:var(--accentBackgroundColor);color:var(--positiveColor); font-size:var(--fontSizeVerySmall);font-weight:bold; padding:2px var(--gutter-half);border-radius:20px;margin-left:var(--gutter-quarter); text-wrap:nowrap; } .cta{ --btnFontColor:var(--primaryButtonTextColor); display:block;text-align:center;background:var(--primaryButtonBackgroundColor); color:var(--btnFontColor);text-decoration:none; height:var(--inputHeight);line-height:var(--inputHeight); border-radius:var(--playfulBorderRadius);font-weight:bold;font-size:var(--fontSizeSmall); margin-top:var(--gutter);border:1px var(--primaryButtonBackgroundColor) solid; transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); &:hover{opacity:0.5;} } .note{font-size:var(--fontSizeVerySmall);color:var(--gray);margin-top:var(--gutter);line-height:var(--lineHeight);} }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/pricing.css_False_HTML_32608030153 5 Aug 03:49:18Z */