Argon Web Builder | Drag & Drop Online Editor by Creative Tim

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Argon Web Builder | Drag & Drop Online Editor by Creative Tim</title> <meta name="description" content=""> <meta property="og:type" content="product"> <meta property="og:title" content="Argon Web Builder | Drag & Drop Online Editor by Creative Tim"> <meta property="og:description" content="A powerful online tool for Bootstrap pages. It comes with a huge number of components and sections built by Creative Tim."> <meta property="og:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/argon/argon-thumbnail-facebook-og.jpg"> <meta property="og:url" content="https://app.creative-tim.com/editor"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Argon Web Builder | Drag & Drop Online Editor by Creative Tim"> <meta name="twitter:description" content="A powerful online tool for Bootstrap pages. It comes with a huge number of components and sections built by Creative Tim."> <meta name="twitter:image:src" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/argon/argon-thumbnail-facebook-og.jpg"> <link rel="icon" type="image/png" sizes="16x16" href="/argon/static/img/favicon.png"> <link rel="canonical" href="https://app.creative-tim.com/editor"> <link rel="stylesheet" href="/vendor/codemirror/codemirror.css"> <link rel="stylesheet" href="/vendor/codemirror/addon/lint/lint.css"> <link rel="stylesheet" href="/vendor/codemirror/material.css"> <link rel="stylesheet" href="/static/build/css/b7p-ct-editor.ca5f6b5a.css"> <link rel="stylesheet" href="/vendor/icons/css/fontello.css?v=h7b"> <link rel="stylesheet" href="/vendor/color-picker/colorpicker.min.css"> <link rel="stylesheet" id="custom-font-url"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46172202-23"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-46172202-23'); </script> </head> <body class=" editor editor--hide-y"> <div class="overlay overlay--full" id="overlay--full"></div> <div class="overlay overlay--main" id="overlay--main"></div> <div class="container-fluid"> <div class="main__menu d-flex"> <div class="ml-auto"> <a href="/preview?project=1e048cta4dbd13255db38f1dd9e9669f8cf5da55&page=index.html&screen=top" class="btn btn-link track-click" id="external-preview" target="_blank" rel="nofollow noopener" data-page="index.html" data-label="preview"> Preview in a new tab <i class="icon-link-ext"></i> </a> <a href="/export/1e048cta4dbd13255db38f1dd9e9669f8cf5da55" class="btn btn-primary track-click" id="export-project" target="_blank" rel="nofollow noopener" data-label="export"> Export project </a> </div> </div> <div class="row"> <aside class="components-menu bg-primary shadow"> <div class="components-menu__logo border-bottom" id="components-menu__logo"> <a class="navbar-brand mr-0" href="/"> <img src="/external/creativetim/img/brand/white.png" alt="Argon Design System logo" class="logo"> </a> </div> <div class="components-menu__user-name border-bottom pl-2 py-1"> <span>Have an account?</span> <span><a href="/login" class="text-secondary">Sign in »</a></span> <button class="mt-2 mb-1 btn btn-danger track-click unlock-all-items" data-label="unlock-premium-bottom"> <i class="icon-heart"></i> Create Account </button> </div> <ul class="nav components-menu__nav" id="components-menu__nav"> <li class="nav-item cc-menu d-none"> <h5 class="components-menu__header mt-1">PRIVATE</h5> </li> <li class="nav-item components-menu__category cc-menu d-none mb-1"> <a class="nav-link" data-category="custom-components">Components</a> </li> <li class="nav-item"> <h5 class="components-menu__header mt-1 mb-2">BLOCKS</h5> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="headers">Headers</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="features">Features</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="blogs">Blogs</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="teams">Teams</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="projects">Projects</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="pricing">Pricing</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="testimonials">Testimonials</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="contact-us">Contact Us</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="tables">Tables</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="accordion">Accordion</a> </li> <li class="nav-item components-menu__category"> <a class="nav-link" data-category="footers">Footers</a> </li> </ul> <div class="components-menu__theme-customizer border-top text-center customizer__pro--desc max-width" id="components-menu__theme-customizer"> <button class="btn btn-outline-secondary track-click" id="open-theme-customizer" data-label="change-styles"> <i class="icon-brush"></i> Change Styles </button> </div> </aside> <div class="components-preview" id="components-preview"></div> <main class="main main-browser col overflow-x" id="main"> <div class="alert alert-danger my-1" id="outdated-browser" role="alert" style="display: none;"> Sorry, we don't support your browser yet. To have the best experience on your computer, please use up-to-date browser <a href="https://www.google.com/chrome/" target="_blank" rel="noopener nofollow">Google Chrome</a> / <a href="https://www.mozilla.org/" target="_blank" rel="noopener nofollow">Firefox</a> / <a href="https://www.microsoft.com/pl-pl/windows/microsoft-edge" target="_blank" rel="noopener nofollow">Microsoft Edge</a> / <a href="https://www.apple.com/safari/" target="_blank" rel="noopener nofollow">Safari</a>. </div> <div class="browser browser--desktop" data-mockup="main"> <div class="browser__wrapper"> <div class="address-bar border d-flex justify-content-between"> <div class="address-bar__dots mr-auto"> <span></span> <span></span> <span></span> </div> <div class="address-bar__page border rounded dropdown "> <a class="address-bar__page--url text-truncate track-click" data-label="address-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/static/img/loading.gif" alt="Loading..." class="address-bar__page--loading"/> <span>index.html</span> <i class="icon-down-dir"></i> </a> <div class="dropdown-menu"> <a class="dropdown-item page-item border-bottom" data-page="index.html">index.html <span class="dropdown-edit"> <i class="icon-docs page-duplicate" title="Duplicate page"></i> </span> </a> <div class="dropdown-menu__pages"> </div> <div class="dropdown-new dropdown-new__template border-bottom d-none"> <input type="text" class="dropdown-menu__new-input" placeholder="output filename..."/> <a class="text-primary page-save-changes">Save</a> </div> <div class="mt-1 text-center"> <a class="dropdown-item page-action__add"><i class="icon-list-add"></i> Add a page</a> <a class="dropdown-item page-action__cancel d-none">cancel</a> </div> </div> </div> <div class="address-bar__media ml-auto"> <button class="browser__change-device track-click active" data-label="preview-desktop" data-device="desktop" data-mockup="main" title="Desktop 1366px"><i class="icon-desktop"></i></button> <button class="browser__change-device track-click" data-label="preview-tablet" data-device="tablet" data-mockup="main" title="Tablet 778px"><i class="icon-tablet"></i></button> <button class="browser__change-device track-click" data-label="preview-mobile" data-device="mobile" data-mockup="main" title="Mobile 360px"><i class="icon-mobile"></i></button> </div> </div> <div class="browser__container border border-top-0"> <div class="browser__content"> <iframe title="Edited page content" frameBorder="0" width="100%" src="/preview?project=1e048cta4dbd13255db38f1dd9e9669f8cf5da55&page=index.html&screen=main" id="iframe-main"></iframe> </div> </div> </div> </div> </main> <div class="theme-panel customizer__options"> <div class="theme-panel__container"> <div class="card w-100 shadow rounded-lg mb-2"> <h5 class="card-header bg-primary text-white">General</h5> <div class="card-body px-0 py-1"> <div class="customizer__error d-none alert alert-danger mx-1"> <button type="button" class="close"> <span aria-hidden="true">×</span> </button> <span class="customizer__error--message"></span> </div> <div class="accordion bg-secondary rounded" id="accordion-general"> <h5 class="mb-0 border-bottom" id="heading-general1"> <a class="btn text-left" data-toggle="collapse" data-target="#collapse-general1" aria-expanded="true" aria-controls="collapse-general1"> Body </a> </h5> <div id="collapse-general1" class="collapse show mt-2" aria-labelledby="heading-general1" data-parent="#accordion-general" style=""> <div class="form-group col-12"> <label data-default="$white" for="clone-variable-body-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-body-bg" id="clone-variable-body-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$body-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-700" for="clone-variable-body-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-body-color" id="clone-variable-body-color" placeholder="Text color" value="#525f7f" data-computed="#525f7f" data-variable="$body-color" data-default="$gray-700" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> </div> <h5 class="mb-0 border-bottom" id="heading-general2"> <a class="btn text-left collapsed" data-toggle="collapse" data-target="#collapse-general2" aria-expanded="false" aria-controls="collapse-general2"> Links </a> </h5> <div id="collapse-general2" class="collapse mt-2" aria-labelledby="heading-general2" data-parent="#accordion-general" style=""> <div class="form-group col-12"> <label data-default="$primary" for="clone-variable-link-color"> Link color </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-link-color" id="clone-variable-link-color" placeholder="Link color" value="#5e72e4" data-computed="#5e72e4" data-variable="$link-color" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="clone-variable-link-decoration"> Link decoration </label> <select class="form-control form-control-sm variable-link-decoration" id="clone-variable-link-decoration" data-variable="$link-decoration" data-default="none" data-computed="none"> <option value="none" selected>none</option> <option value="underline" >underline</option> <option value="overline" >overline</option> <option value="line-through" >line-through</option> </select> </div> <div class="form-group col-12"> <label data-default="darken($link-color, 15%)" for="clone-variable-link-hover-color"> Hover link color </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-link-hover-color" id="clone-variable-link-hover-color" placeholder="Hover link color" value="#233dd2" data-computed="#233dd2" data-variable="$link-hover-color" data-default="darken($link-color, 15%)" title="CSS value: #233dd2" > <i class="element-color__open-picker" style="background-color: #233dd2;"></i> </div> </div> </div> <h5 class="mb-0" id="heading-general3"> <a class="btn text-left collapsed" data-toggle="collapse" data-target="#collapse-general3" aria-expanded="false" aria-controls="collapse-general3"> Borders </a> </h5> <div id="collapse-general3" class="collapse mt-2" aria-labelledby="heading-general3" data-parent="#accordion-general" style=""> <div class="form-group col-12"> <label data-default="$gray-200" for="clone-variable-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-border-color" id="clone-variable-border-color" placeholder="Border color" value="#e9ecef" data-computed="#e9ecef" data-variable="$border-color" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".0625rem" for="clone-variable-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control form-control-sm element-size__input variable-border-width" id="clone-variable-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$border-width" data-default=".0625rem" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="clone-variable-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control form-control-sm element-size__input variable-border-radius" id="clone-variable-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$border-radius" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> </div> </div> </div> <div class="card w-100 shadow rounded-lg mb-2"> <h5 class="card-header bg-primary text-white">Typography</h5> <div class="card-body px-0 pt-2 pb-1"> <div class="form-group col-12"> <label data-default="'Open Sans', sans-serif" for="clone-variable-font-family-base"> Font family base </label> <div class="element-font"> <input type="text" class="form-control form-control-sm element-font__input variable-font-family-base" id="clone-variable-font-family-base" placeholder="Font family base" value=""Open Sans", sans-serif" data-computed=""Open Sans", sans-serif" data-variable="$font-family-base" data-default="'Open Sans', sans-serif" title="CSS value: "Open Sans", sans-serif" > <i class="element-size__icon icon-font"></i> </div> </div> </div> </div> <div class="card w-100 shadow rounded-lg"> <h5 class="card-header bg-primary text-white">Colors</h5> <div class="card-body px-0 pt-2 pb-1"> <div class="form-group form-color-simple col-12"> <label data-default="#5e72e4" for="clone-variable-primary"> Primary </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-primary" id="clone-variable-primary" placeholder="Primary" value="#5e72e4" data-computed="#5e72e4" data-variable="$primary" data-default="#5e72e4" title="CSS value: #5e72e4" disabled> <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group form-color-simple col-12"> <label data-default="$teal" for="clone-variable-info"> Info </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-info" id="clone-variable-info" placeholder="Info" value="#11cdef" data-computed="#11cdef" data-variable="$info" data-default="$teal" title="CSS value: #11cdef" disabled> <i class="element-color__open-picker" style="background-color: #11cdef;"></i> </div> </div> <div class="form-group form-color-simple col-12"> <label data-default="$green" for="clone-variable-success"> Success </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-success" id="clone-variable-success" placeholder="Success" value="#2dce89" data-computed="#2dce89" data-variable="$success" data-default="$green" title="CSS value: #2dce89" disabled> <i class="element-color__open-picker" style="background-color: #2dce89;"></i> </div> </div> <div class="form-group form-color-simple col-12"> <label data-default="$red" for="clone-variable-danger"> Danger </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-danger" id="clone-variable-danger" placeholder="Danger" value="#f5365c" data-computed="#f5365c" data-variable="$danger" data-default="$red" title="CSS value: #f5365c" disabled> <i class="element-color__open-picker" style="background-color: #f5365c;"></i> </div> </div> <div class="form-group form-color-simple col-12"> <label data-default="$orange" for="clone-variable-warning"> Warning </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-warning" id="clone-variable-warning" placeholder="Warning" value="#fb6340" data-computed="#fb6340" data-variable="$warning" data-default="$orange" title="CSS value: #fb6340" disabled> <i class="element-color__open-picker" style="background-color: #fb6340;"></i> </div> </div> <div class="form-group form-color-simple col-12"> <label data-default="#172b4d" for="clone-variable-default"> Default </label> <div class="element-color"> <input type="text" class="form-control form-control-sm element-color__input variable-default" id="clone-variable-default" placeholder="Default" value="#172b4d" data-computed="#172b4d" data-variable="$default" data-default="#172b4d" title="CSS value: #172b4d" disabled> <i class="element-color__open-picker" style="background-color: #172b4d;"></i> </div> </div> </div> </div> </div> </div> </div> </div> <div class="paypal"> <div class="paypal__content"> <div class="paypal__spinner"></div> <h4 class="text-2xl font-semibold">Redirecting to PayPal</h4> </div> </div> <div class="popper popper-color-picker rounded shadow" id="popper-color-picker"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#defined-colors" role="tab" aria-controls="home" aria-selected="true">Defined colors</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#custom-colors" role="tab" aria-controls="custom" aria-selected="false">Custom</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="defined-colors" role="tabpanel" aria-labelledby="defined-colors-tab"> <div class="popper-color-picker__colors border-bottom mt-2"></div> <div class="popper-color-picker__preview shadow-sm my-2"> </div> <div class="text-center pt-2 border-top"> <button class="btn btn-primary save-button">Save color</button> <button class="btn btn-link close-button">cancel</button> </div> </div> <div class="tab-pane " id="custom-colors" role="tabpanel" aria-labelledby="custom-colors-tab"> <div class="row mt-2"> <div class="col-6 popper-color-picker__selector" id="popper-color-picker__selector"></div> <div class="col-6 pl-0"> <input type="text" class="form-control" placeholder="Hex value" value="#FFFFFF" id="hex-value"> <div class="form-row mt-1 popper-color-picker__rgba" id="popper-color-picker__rgba"> <div class="form-group col-3 text-center pr-0"> <label for="" class="small text-muted">R</label> <input type="text" class="form-control" placeholder="" maxlength="3"> </div> <div class="form-group col-3 text-center pr-0"> <label for="" class="small text-muted">G</label> <input type="text" class="form-control" placeholder="" maxlength="3"> </div> <div class="form-group col-3 text-center pr-0"> <label for="" class="small text-muted">B</label> <input type="text" class="form-control" placeholder="" maxlength="3"> </div> <div class="form-group col-3 text-center"> <label for="" class="small text-muted">A</label> <input type="text" class="form-control" placeholder="" maxlength="3"> </div> </div> </div> </div> <div class="popper-color-picker__preview mt-1 shadow-sm">   </div> <div class="mt-2 pt-2 border-top text-center"> <button class="btn btn-primary save-button">Save color</button> <button class="btn btn-link close-button">cancel</button> </div> </div> </div> <div class="popper__arrow" x-arrow></div> </div> <div class="popper popper-size-picker rounded shadow" id="popper-size-picker"> <h5 class="pt-1 pb-2 mb-2 border-bottom"><i class="icon-resize-full"></i> Custom value</h5> <div id="custom-variable" class="col-10 input-group show" data-parent="#size-accordion"> <input type="text" class="form-control" id="popper-size-picker__value" placeholder="Custom value" value="1"> <div class="input-group-append"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle bg-dark" type="button" data-toggle="dropdown"> none </button> <div class="dropdown-menu"> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Relative to the font-size of the root element. For most browsers it has a default value of 16px.">rem</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Relative to the font-size of the element.">em</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Pixels are not very practical in creating scalable layouts.">px</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Relative to the parent element.">%</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Relative to 1% of the width of the viewport.">vw</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Relative to 1% of the height of the viewport.">vh</a> <a class="dropdown-item change-unit" href="#" data-toggle="tooltip" data-placement="right" title="Select if you don't need any unit or you're using advanced input like calc() with multi variable expression.">-- none --</a> </div> </div> </div> </div> <div class="mt-2 pt-2 border-top text-center"> <button class="btn btn-primary save-button">Save size</button> <button class="btn btn-link close-button">cancel</button> </div> <div class="popper__arrow" x-arrow></div> </div> <div class="popper popper-transition-picker rounded shadow" id="popper-transition-picker"> <h5 class="mb-2 pb-0"><i class="icon-to-end"></i> Custom transition</h5> <form> <div class="row pt-1 border-top"> <div class="form-group col-6"> <label>Property</label> <input type="text" class="form-control" id="popper-transition-picker__property"> </div> <div class="form-group col-6"> <label>Function</label> <select class="form-control" id="popper-transition-picker__function"> <option value="ease" selected>ease (slow start, then fast, then end slowly)</option> <option value="linear">linear (the same speed from start to end)</option> <option value="ease-in">ease-in (a slow start)</option> <option value="ease-out">ease-out (a slow end)</option> <option value="ease-in-out">ease-in-out (a slow start and end)</option> </select> </div> <div class="form-group col-6"> <label>Duration</label> <input type="text" class="form-control" id="popper-transition-picker__duration"> </div> <div class="form-group col-6"> <label>Delay</label> <input type="text" class="form-control" id="popper-transition-picker__delay"> </div> </div> </form> <div class="input-group mt-0 py-2 border-top border-bottom text-center"> <div class="input-group-prepend"> <span class="input-group-text bg-light">result</span> </div> <input type="text" class="form-control" id="popper-transition-picker__value" placeholder="CSS transition"> </div> <div class="mt-2 text-center"> <button class="btn btn-primary save-button">Save transition</button> <button class="btn btn-link close-button">cancel</button> </div> <div class="popper__arrow" x-arrow></div> </div> <div class="popper popper-shadow-picker rounded shadow" id="popper-shadow-picker"> <h5 class="mb-2 pb-0"><i class="icon-squares"></i> Custom box shadow</h5> <form> <div class="row pt-1 border-top"> <div class="form-group col-6"> <label>Placement</label> <select class="form-control" id="popper-shadow-picker__placement"> <option value="outset" selected>Outer shadow</option> <option value="inset">Inner shadow</option> </select> </div> <div class="form-group col-6"> <label>Shadow color</label> <input type="text" class="form-control" id="popper-shadow-picker__color"> </div> <div class="form-group col-6"> <label data-toggle="tooltip" title="This value is required to update CSS result.">Horizontal length*</label> <input type="text" class="form-control" id="popper-shadow-picker__horizontal"> </div> <div class="form-group col-6"> <label data-toggle="tooltip" title="This value is required to update CSS result.">Vertical length*</label> <input type="text" class="form-control" id="popper-shadow-picker__vertical"> </div> <div class="form-group col-6"> <label>Blur radius</label> <input type="text" class="form-control" id="popper-shadow-picker__blur"> </div> <div class="form-group col-6"> <label>Spread radius</label> <input type="text" class="form-control" id="popper-shadow-picker__spread"> </div> </div> </form> <div class="mt-1 p-2"> <div class="w-75 px-2" id="popper-shadow-picker__preview"><small>Here is a preview of the shadow</small></div> </div> <div class="input-group mt-0 py-2 border-top border-bottom text-center"> <div class="input-group-prepend"> <span class="input-group-text bg-light">result</span> </div> <input type="text" class="form-control" id="popper-shadow-picker__value" placeholder="CSS box-shadow"> </div> <div class="mt-2 text-center"> <button class="btn btn-primary save-button">Save box shadow</button> <button class="btn btn-link close-button">cancel</button> </div> <div class="popper__arrow" x-arrow></div> </div> <div class="popper popper-font-picker rounded shadow" id="popper-font-picker"> <div class="row pb-2 border-bottom"> <div class="col-7"> <h5 class="pt-1"><i class="icon-font"></i> Custom font</h5> </div> <div class="col-5 pl-0"> <input type="text" class="form-control" id="popper-font-picker__search" placeholder="Search Google Fonts" autocomplete="off"> <ul class="dropdown-menu dropdown-menu-right mr-1 shadow" id="popper-font-picker__fonts"></ul> </div> </div> <div class="row bg-white"> <div class="col p-3"> <div id="popper-font-picker__quote"> <h4 class="mb-2">Russ Hanneman's wisdom</h4> <p class="mb-0"> It鈥檚 not about how much you earn but what you鈥檙e worth. And who鈥檚 worth the most? Companies that lose money. </p> </div> </div> </div> <div class="row py-2 border-top border-bottom"> <div class="col-7"> <div class="input-group text-center"> <div class="input-group-prepend"> <span class="input-group-text bg-light">font<br>family</span> </div> <textarea class="form-control" id="popper-font-picker__value" placeholder="CSS font-family" rows="5"></textarea> </div> </div> <div class="col-5 popper-font-picker__options"> <input type="hidden" id="popper-font-picker__font-family"> <label class="font-weight-bold">Include variants:</label><br> <div id="popper-font-picker__variants"></div> <label class="font-weight-bold mt-1">Languages:</label> <div id="popper-font-picker__languages"></div> </div> </div> <div class="mt-2 text-center"> <button class="btn btn-primary save-button">Save font</button> <button class="btn btn-link close-button">cancel</button> </div> <div class="popper__arrow" x-arrow></div> </div> <div class="bs-modal" id="bs-modal--theme"> <div class="overlay overlay--modal"></div> <div class="bs-modal__body rounded"> <div class="bs-modal__header rounded-top border-bottom shadow-sm"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="bs-modal--theme-close"> close <span aria-hidden="true">×</span> </button> <h3 class="mb-2"> Argon Styles <small>(<a href="#" class="track-click" id="open-theme-customizer-help" data-label="theme-help" data-toggle="modal" data-target="#bs-modal--theme__help">help</a>)</small> <div class="bs-modal__search ml-2 d-none d-md-inline-block" id="theme-customizer-search-container"> <div class="input-group input-group-sm"> <input id="theme-customizer-search" type="search" class="form-control form-control-sm" placeholder="Search for Argon variables"> <div class="input-group-append"> <a href="#" class="input-group-text" id="theme-customizer-search-btn"> <i class="icon-search" title="Search"></i> </a> </div> <div class="dropdown-menu" id="theme-customizer-results"></div> </div> </div> </h3> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link track-click active" href="/editor/theme/general" data-category="general" data-label="tc_menu: general">General</a> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: typography" role="button" aria-haspopup="true" aria-expanded="false" href="#">Typography</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/typography/fonts" data-parent="typography" data-category="fonts" data-label="tc_menu: typography/fonts">Fonts</a> <a class="dropdown-item track-click" href="/editor/theme/typography/headings" data-parent="typography" data-category="headings" data-label="tc_menu: typography/headings">Headings</a> <a class="dropdown-item track-click" href="/editor/theme/typography/text-utilities" data-parent="typography" data-category="text-utilities" data-label="tc_menu: typography/text-utilities">Text utilities</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: colors" role="button" aria-haspopup="true" aria-expanded="false" href="#">Colors</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/colors/theme-colors" data-parent="colors" data-category="theme-colors" data-label="tc_menu: colors/theme-colors">Theme colors</a> <a class="dropdown-item track-click" href="/editor/theme/colors/brand-colors" data-parent="colors" data-category="brand-colors" data-label="tc_menu: colors/brand-colors">Brand colors</a> <a class="dropdown-item track-click" href="/editor/theme/colors/action-colors" data-parent="colors" data-category="action-colors" data-label="tc_menu: colors/action-colors">Action colors</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: buttons" role="button" aria-haspopup="true" aria-expanded="false" href="#">Buttons</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/buttons/buttons" data-parent="buttons" data-category="buttons" data-label="tc_menu: buttons/buttons">Buttons</a> <a class="dropdown-item track-click" href="/editor/theme/buttons/dropdowns" data-parent="buttons" data-category="dropdowns" data-label="tc_menu: buttons/dropdowns">Dropdowns</a> <a class="dropdown-item track-click" href="/editor/theme/buttons/close-button" data-parent="buttons" data-category="close-button" data-label="tc_menu: buttons/close-button">Close button</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: navigation" role="button" aria-haspopup="true" aria-expanded="false" href="#">Navigation</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/navigation/navbar" data-parent="navigation" data-category="navbar" data-label="tc_menu: navigation/navbar">Navbar (header)</a> <a class="dropdown-item track-click" href="/editor/theme/navigation/nav-pills" data-parent="navigation" data-category="nav-pills" data-label="tc_menu: navigation/nav-pills">Nav pills</a> <a class="dropdown-item track-click" href="/editor/theme/navigation/breadcrumb" data-parent="navigation" data-category="breadcrumb" data-label="tc_menu: navigation/breadcrumb">Breadcrumb</a> <a class="dropdown-item track-click" href="/editor/theme/navigation/pagination" data-parent="navigation" data-category="pagination" data-label="tc_menu: navigation/pagination">Pagination</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: containers" role="button" aria-haspopup="true" aria-expanded="false" href="#">Containers</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/containers/cards" data-parent="containers" data-category="cards" data-label="tc_menu: containers/cards">Cards</a> <a class="dropdown-item track-click" href="/editor/theme/containers/carousel" data-parent="containers" data-category="carousel" data-label="tc_menu: containers/carousel">Carousel</a> <a class="dropdown-item track-click" href="/editor/theme/containers/list-group" data-parent="containers" data-category="list-group" data-label="tc_menu: containers/list-group">List group</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: forms" role="button" aria-haspopup="true" aria-expanded="false" href="#">Forms</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/forms/labels" data-parent="forms" data-category="labels" data-label="tc_menu: forms/labels">Labels</a> <a class="dropdown-item track-click" href="/editor/theme/forms/inputs" data-parent="forms" data-category="inputs" data-label="tc_menu: forms/inputs">Inputs</a> <a class="dropdown-item track-click" href="/editor/theme/forms/form-buttons" data-parent="forms" data-category="form-buttons" data-label="tc_menu: forms/form-buttons">Buttons</a> <a class="dropdown-item track-click" href="/editor/theme/forms/validation" data-parent="forms" data-category="validation" data-label="tc_menu: forms/validation">Validation</a> <a class="dropdown-item track-click" href="/editor/theme/forms/groups" data-parent="forms" data-category="groups" data-label="tc_menu: forms/groups">Groups</a> <a class="dropdown-item track-click" href="/editor/theme/forms/custom-controls" data-parent="forms" data-category="custom-controls" data-label="tc_menu: forms/custom-controls">Custom controls</a> <a class="dropdown-item track-click" href="/editor/theme/forms/custom-select" data-parent="forms" data-category="custom-select" data-label="tc_menu: forms/custom-select">Custom select</a> <a class="dropdown-item track-click" href="/editor/theme/forms/custom-file" data-parent="forms" data-category="custom-file" data-label="tc_menu: forms/custom-file">Custom file</a> <a class="dropdown-item track-click" href="/editor/theme/forms/custom-range" data-parent="forms" data-category="custom-range" data-label="tc_menu: forms/custom-range">Custom range</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click " href="/editor/theme/tables" data-category="tables" data-label="tc_menu: tables">Tables</a> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: dialogs" role="button" aria-haspopup="true" aria-expanded="false" href="#">Dialogs</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/dialogs/alerts" data-parent="dialogs" data-category="alerts" data-label="tc_menu: dialogs/alerts">Alerts & Badges</a> <a class="dropdown-item track-click" href="/editor/theme/dialogs/modals" data-parent="dialogs" data-category="modals" data-label="tc_menu: dialogs/modals">Modals</a> <a class="dropdown-item track-click" href="/editor/theme/dialogs/tooltips" data-parent="dialogs" data-category="tooltips" data-label="tc_menu: dialogs/tooltips">Tooltips</a> <a class="dropdown-item track-click" href="/editor/theme/dialogs/popovers" data-parent="dialogs" data-category="popovers" data-label="tc_menu: dialogs/popovers">Popovers</a> <a class="dropdown-item track-click" href="/editor/theme/dialogs/toasts" data-parent="dialogs" data-category="toasts" data-label="tc_menu: dialogs/toasts">Toasts</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click dropdown-toggle " data-toggle="dropdown" data-label="tc_menu: misc" role="button" aria-haspopup="true" aria-expanded="false" href="#">Misc</a> <div class="dropdown-menu"> <a class="dropdown-item track-click" href="/editor/theme/misc/spinners" data-parent="misc" data-category="spinners" data-label="tc_menu: misc/spinners">Spinners</a> <a class="dropdown-item track-click" href="/editor/theme/misc/progress-bar" data-parent="misc" data-category="progress-bar" data-label="tc_menu: misc/progress-bar">Progress bars</a> <a class="dropdown-item track-click" href="/editor/theme/misc/icons" data-parent="misc" data-category="icons" data-label="tc_menu: misc/icons">Icons</a> <a class="dropdown-item track-click" href="/editor/theme/misc/image-thumbnails" data-parent="misc" data-category="image-thumbnails" data-label="tc_menu: misc/image-thumbnails">Image thumbnails</a> <a class="dropdown-item track-click" href="/editor/theme/misc/figures" data-parent="misc" data-category="figures" data-label="tc_menu: misc/figures">Figures</a> <a class="dropdown-item track-click" href="/editor/theme/misc/horizontal-rule" data-parent="misc" data-category="horizontal-rule" data-label="tc_menu: misc/horizontal-rule">Horizontal rule</a> <a class="dropdown-item track-click" href="/editor/theme/misc/inline-list" data-parent="misc" data-category="inline-list" data-label="tc_menu: misc/inline-list">Inline list</a> <a class="dropdown-item track-click" href="/editor/theme/misc/grid" data-parent="misc" data-category="grid" data-label="tc_menu: misc/grid">Grid</a> <a class="dropdown-item track-click" href="/editor/theme/misc/color-tools" data-parent="misc" data-category="color-tools" data-label="tc_menu: misc/color-tools">Color tools</a> <a class="dropdown-item track-click" href="/editor/theme/misc/printing" data-parent="misc" data-category="printing" data-label="tc_menu: misc/printing">Printing</a> <a class="dropdown-item track-click" href="/editor/theme/misc/z-index" data-parent="misc" data-category="z-index" data-label="tc_menu: misc/z-index">Z-index</a> </div> </li> <li class="nav-item"> <a class="nav-link track-click" href="/editor/theme/custom-css" data-category="custom-css" data-label="tc_menu: custom-css">Custom CSS</a> </li> </ul> </div> <div class="bs-modal__content"> <div class="container-fluid h-100"> <div class="row customizer"> <div class="col-12 col-lg-3 col-xxl-2 rounded-bottom customizer__options"> <div class="customizer__error alert alert-danger d-none"> <button type="button" class="close"> <span aria-hidden="true">×</span> </button> <span class="customizer__error--message"></span> </div> <div class="customizer__breadcrumb border-bottom" id="customizer__breadcrumb"> <h5></h5> </div> <div id="settings-general" class="customizer__form show pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Body</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-body-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-body-bg" id="variable-body-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$body-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-700" for="variable-body-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-body-color" id="variable-body-color" placeholder="Text color" value="#525f7f" data-computed="#525f7f" data-variable="$body-color" data-default="$gray-700" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-spacer"> Spacer size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spacer" id="variable-spacer" placeholder="Spacer size" value="1rem" data-computed="1rem" data-variable="$spacer" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Links</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$primary" for="variable-link-color"> Link color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-link-color" id="variable-link-color" placeholder="Link color" value="#5e72e4" data-computed="#5e72e4" data-variable="$link-color" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-link-decoration"> Link decoration </label> <select class="form-control variable-link-decoration" id="variable-link-decoration" data-variable="$link-decoration" data-default="none" data-computed="none"> <option value="none" selected>none</option> <option value="underline" >underline</option> <option value="overline" >overline</option> <option value="line-through" >line-through</option> </select> </div> <div class="form-group col-12"> <label data-default="darken($link-color, 15%)" for="variable-link-hover-color"> Hover link color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-link-hover-color" id="variable-link-hover-color" placeholder="Hover link color" value="#233dd2" data-computed="#233dd2" data-variable="$link-hover-color" data-default="darken($link-color, 15%)" title="CSS value: #233dd2" > <i class="element-color__open-picker" style="background-color: #233dd2;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-link-hover-decoration"> Hover link decoration </label> <select class="form-control variable-link-hover-decoration" id="variable-link-hover-decoration" data-variable="$link-hover-decoration" data-default="none" data-computed="none"> <option value="none" selected>none</option> <option value="underline" >underline</option> <option value="overline" >overline</option> <option value="line-through" >line-through</option> </select> </div> <div class="form-group col-12"> <label data-default="15%" for="variable-emphasized-link-hover-darken-percentage"> Hover link emphasized darken percentage </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-emphasized-link-hover-darken-percentage" id="variable-emphasized-link-hover-darken-percentage" placeholder="Hover link emphasized darken percentage" value="15%" data-computed="15%" data-variable="$emphasized-link-hover-darken-percentage" data-default="15%" title="CSS value: 15%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Components</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$primary" for="variable-component-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-active-bg" id="variable-component-active-bg" placeholder="Active background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$component-active-bg" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$white" for="variable-component-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-active-color" id="variable-component-active-color" placeholder="Active text color" value="#fff" data-computed="#fff" data-variable="$component-active-color" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Shapes</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="1.5" for="variable-shape-height-base"> Height base </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-shape-height-base" id="variable-shape-height-base" placeholder="Height base" value="1.5" data-computed="1.5" data-variable="$shape-height-base" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5" for="variable-shape-height-sm"> Height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-shape-height-sm" id="variable-shape-height-sm" placeholder="Height small" value="1.5" data-computed="1.5" data-variable="$shape-height-sm" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5" for="variable-shape-height-lg"> Height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-shape-height-lg" id="variable-shape-height-lg" placeholder="Height large" value="1.5" data-computed="1.5" data-variable="$shape-height-lg" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5" for="variable-shape-height-xl"> Height extra large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-shape-height-xl" id="variable-shape-height-xl" placeholder="Height extra large" value="1.5" data-computed="1.5" data-variable="$shape-height-xl" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Borders</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-border-color" id="variable-border-color" placeholder="Border color" value="#e9ecef" data-computed="#e9ecef" data-variable="$border-color" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".0625rem" for="variable-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-border-width" id="variable-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$border-width" data-default=".0625rem" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-6">Appearance</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="6"> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="true"> Enable rounded </label> <div class="col-6 pr-0 variable-enable-rounded" id="variable-enable-rounded"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-rounded-yes" id="option-variable-enable-rounded-yes" type="radio" name="option-variable-enable-rounded" value="true" data-variable="$enable-rounded" data-default="true" data-computed="true" checked> <label class="form-check-label" for="option-variable-enable-rounded-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-rounded-no" id="option-variable-enable-rounded-no" type="radio" name="option-variable-enable-rounded" value="false" data-variable="$enable-rounded" data-default="true" data-computed="true" > <label class="form-check-label" for="option-variable-enable-rounded-no"> No </label> </div> </div> </div> </div> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="true"> Enable transitions </label> <div class="col-6 pr-0 variable-enable-transitions" id="variable-enable-transitions"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-transitions-yes" id="option-variable-enable-transitions-yes" type="radio" name="option-variable-enable-transitions" value="true" data-variable="$enable-transitions" data-default="true" data-computed="true" checked> <label class="form-check-label" for="option-variable-enable-transitions-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-transitions-no" id="option-variable-enable-transitions-no" type="radio" name="option-variable-enable-transitions" value="false" data-variable="$enable-transitions" data-default="true" data-computed="true" > <label class="form-check-label" for="option-variable-enable-transitions-no"> No </label> </div> </div> </div> </div> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="true"> Enable shadows </label> <div class="col-6 pr-0 variable-enable-shadows" id="variable-enable-shadows"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-shadows-yes" id="option-variable-enable-shadows-yes" type="radio" name="option-variable-enable-shadows" value="true" data-variable="$enable-shadows" data-default="true" data-computed="true" checked> <label class="form-check-label" for="option-variable-enable-shadows-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-shadows-no" id="option-variable-enable-shadows-no" type="radio" name="option-variable-enable-shadows" value="false" data-variable="$enable-shadows" data-default="true" data-computed="true" > <label class="form-check-label" for="option-variable-enable-shadows-no"> No </label> </div> </div> </div> </div> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="false"> Enable gradients </label> <div class="col-6 pr-0 variable-enable-gradients" id="variable-enable-gradients"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-gradients-yes" id="option-variable-enable-gradients-yes" type="radio" name="option-variable-enable-gradients" value="true" data-variable="$enable-gradients" data-default="false" data-computed="false" > <label class="form-check-label" for="option-variable-enable-gradients-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-gradients-no" id="option-variable-enable-gradients-no" type="radio" name="option-variable-enable-gradients" value="false" data-variable="$enable-gradients" data-default="false" data-computed="false" checked> <label class="form-check-label" for="option-variable-enable-gradients-no"> No </label> </div> </div> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-7">Rounded corners</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="7"> <div class="form-group col-12"> <label data-default=".25rem" for="variable-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-border-radius" id="variable-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$border-radius" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".2rem" for="variable-border-radius-sm"> Border radius small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-border-radius-sm" id="variable-border-radius-sm" placeholder="Border radius small" value="0.2rem" data-computed="0.2rem" data-variable="$border-radius-sm" data-default=".2rem" title="CSS value: 0.2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".3rem" for="variable-border-radius-lg"> Border radius large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-border-radius-lg" id="variable-border-radius-lg" placeholder="Border radius large" value="0.3rem" data-computed="0.3rem" data-variable="$border-radius-lg" data-default=".3rem" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".35rem" for="variable-border-radius-xl"> Border radius extra large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-border-radius-xl" id="variable-border-radius-xl" placeholder="Border radius extra large" value="0.35rem" data-computed="0.35rem" data-variable="$border-radius-xl" data-default=".35rem" title="CSS value: 0.35rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="50rem" for="variable-rounded-pill"> Rounded pill </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-rounded-pill" id="variable-rounded-pill" placeholder="Rounded pill" value="50rem" data-computed="50rem" data-variable="$rounded-pill" data-default="50rem" title="CSS value: 50rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-8">Shadows</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="8"> <div class="form-group col-12"> <label data-default="0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07)" for="variable-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-box-shadow" id="variable-box-shadow" placeholder="Box shadow" value="0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" data-computed="0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" data-variable="$box-shadow" data-default="0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07)" title="CSS value: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 .125rem .25rem rgba($black, .075)" for="variable-box-shadow-sm"> Box shadow small </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-box-shadow-sm" id="variable-box-shadow-sm" placeholder="Box shadow small" value="0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)" data-computed="0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)" data-variable="$box-shadow-sm" data-default="0 .125rem .25rem rgba($black, .075)" title="CSS value: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 1rem 3rem rgba($black, .175)" for="variable-box-shadow-lg"> Box shadow large </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-box-shadow-lg" id="variable-box-shadow-lg" placeholder="Box shadow large" value="0 1rem 3rem rgba(0, 0, 0, 0.175)" data-computed="0 1rem 3rem rgba(0, 0, 0, 0.175)" data-variable="$box-shadow-lg" data-default="0 1rem 3rem rgba($black, .175)" title="CSS value: 0 1rem 3rem rgba(0, 0, 0, 0.175)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-9">Transitions</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="9"> <div class="form-group col-12"> <label data-default="all .15s ease" for="variable-transition-base"> Transition base </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-transition-base" id="variable-transition-base" placeholder="Transition base" value="all 0.15s ease" data-computed="all 0.15s ease" data-variable="$transition-base" data-default="all .15s ease" title="CSS value: all 0.15s ease" > <i class="element-size__icon icon-to-end"></i> </div> </div> <div class="form-group col-12"> <label data-default="opacity .15s linear" for="variable-transition-fade"> Transition fade </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-transition-fade" id="variable-transition-fade" placeholder="Transition fade" value="opacity 0.15s linear" data-computed="opacity 0.15s linear" data-variable="$transition-fade" data-default="opacity .15s linear" title="CSS value: opacity 0.15s linear" > <i class="element-size__icon icon-to-end"></i> </div> </div> <div class="form-group col-12"> <label data-default="height .35s ease" for="variable-transition-collapse"> Transition collapse </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-transition-collapse" id="variable-transition-collapse" placeholder="Transition collapse" value="height 0.35s ease" data-computed="height 0.35s ease" data-variable="$transition-collapse" data-default="height .35s ease" title="CSS value: height 0.35s ease" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-fonts" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Fonts</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="'Open Sans', sans-serif" for="variable-font-family-base"> Font family base </label> <div class="element-font"> <input type="text" class="form-control element-font__input variable-font-family-base" id="variable-font-family-base" placeholder="Font family base" value=""Open Sans", sans-serif" data-computed=""Open Sans", sans-serif" data-variable="$font-family-base" data-default="'Open Sans', sans-serif" title="CSS value: "Open Sans", sans-serif" > <i class="element-size__icon icon-font"></i> </div> </div> <div class="form-group col-12"> <label data-default="'Open Sans', sans-serif" for="variable-font-family-alt"> Font family alt </label> <div class="element-font"> <input type="text" class="form-control element-font__input variable-font-family-alt" id="variable-font-family-alt" placeholder="Font family alt" value=""Open Sans", sans-serif" data-computed=""Open Sans", sans-serif" data-variable="$font-family-alt" data-default="'Open Sans', sans-serif" title="CSS value: "Open Sans", sans-serif" > <i class="element-size__icon icon-font"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$font-weight-normal" for="variable-font-weight-base"> Font weight base </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-weight-base" id="variable-font-weight-base" placeholder="Font weight base" value="400" data-computed="400" data-variable="$font-weight-base" data-default="$font-weight-normal" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="300" for="variable-font-weight-light"> Font weight light </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-weight-light" id="variable-font-weight-light" placeholder="Font weight light" value="300" data-computed="300" data-variable="$font-weight-light" data-default="300" title="CSS value: 300" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="400" for="variable-font-weight-normal"> Font weight normal </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-weight-normal" id="variable-font-weight-normal" placeholder="Font weight normal" value="400" data-computed="400" data-variable="$font-weight-normal" data-default="400" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="600" for="variable-font-weight-bold"> Font weight bold </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-weight-bold" id="variable-font-weight-bold" placeholder="Font weight bold" value="600" data-computed="600" data-variable="$font-weight-bold" data-default="600" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="700" for="variable-font-weight-extra-bold"> Font weight extra bold </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-weight-extra-bold" id="variable-font-weight-extra-bold" placeholder="Font weight extra bold" value="700" data-computed="700" data-variable="$font-weight-extra-bold" data-default="700" title="CSS value: 700" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-font-size-base"> Font size base </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-size-base" id="variable-font-size-base" placeholder="Font size base" value="1rem" data-computed="1rem" data-variable="$font-size-base" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($font-size-base * .75)" for="variable-font-size-xs"> Font size extra small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-size-xs" id="variable-font-size-xs" placeholder="Font size extra small" value="0.75rem" data-computed="0.75rem" data-variable="$font-size-xs" data-default="($font-size-base * .75)" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($font-size-base * .875)" for="variable-font-size-sm"> Font size small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-size-sm" id="variable-font-size-sm" placeholder="Font size small" value="0.875rem" data-computed="0.875rem" data-variable="$font-size-sm" data-default="($font-size-base * .875)" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($font-size-base * 1.25)" for="variable-font-size-lg"> Font size large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-size-lg" id="variable-font-size-lg" placeholder="Font size large" value="1.25rem" data-computed="1.25rem" data-variable="$font-size-lg" data-default="($font-size-base * 1.25)" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($font-size-base * 1.5)" for="variable-font-size-xl"> Font size xl </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-font-size-xl" id="variable-font-size-xl" placeholder="Font size xl" value="1.5rem" data-computed="1.5rem" data-variable="$font-size-xl" data-default="($font-size-base * 1.5)" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1.5" for="variable-line-height-base"> Line height base </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-line-height-base" id="variable-line-height-base" placeholder="Line height base" value="1.5" data-computed="1.5" data-variable="$line-height-base" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5" for="variable-line-height-sm"> Line height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-line-height-sm" id="variable-line-height-sm" placeholder="Line height small" value="1.5" data-computed="1.5" data-variable="$line-height-sm" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5" for="variable-line-height-lg"> Line height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-line-height-lg" id="variable-line-height-lg" placeholder="Line height large" value="1.5" data-computed="1.5" data-variable="$line-height-lg" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-headings" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Headings</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="inherit" for="variable-headings-font-family"> Font family </label> <div class="element-font"> <input type="text" class="form-control element-font__input variable-headings-font-family" id="variable-headings-font-family" placeholder="Font family" value="inherit" data-computed="inherit" data-variable="$headings-font-family" data-default="inherit" title="CSS value: inherit" > <i class="element-size__icon icon-font"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-normal" for="variable-headings-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-headings-font-weight" id="variable-headings-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$headings-font-weight" data-default="$font-weight-normal" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-800" for="variable-headings-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-headings-color" id="variable-headings-color" placeholder="Text color" value="#32325d" data-computed="#32325d" data-variable="$headings-color" data-default="$gray-800" title="CSS value: #32325d" > <i class="element-color__open-picker" style="background-color: #32325d;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$font-size-base * 2.5" for="variable-h1-font-size"> H1 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h1-font-size" id="variable-h1-font-size" placeholder="H1 font size" value="2.5rem" data-computed="2.5rem" data-variable="$h1-font-size" data-default="$font-size-base * 2.5" title="CSS value: 2.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-base * 2" for="variable-h2-font-size"> H2 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h2-font-size" id="variable-h2-font-size" placeholder="H2 font size" value="2rem" data-computed="2rem" data-variable="$h2-font-size" data-default="$font-size-base * 2" title="CSS value: 2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-base * 1.75" for="variable-h3-font-size"> H3 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h3-font-size" id="variable-h3-font-size" placeholder="H3 font size" value="1.75rem" data-computed="1.75rem" data-variable="$h3-font-size" data-default="$font-size-base * 1.75" title="CSS value: 1.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-base * 1.5" for="variable-h4-font-size"> H4 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h4-font-size" id="variable-h4-font-size" placeholder="H4 font size" value="1.5rem" data-computed="1.5rem" data-variable="$h4-font-size" data-default="$font-size-base * 1.5" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-base * 1.25" for="variable-h5-font-size"> H5 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h5-font-size" id="variable-h5-font-size" placeholder="H5 font size" value="1.25rem" data-computed="1.25rem" data-variable="$h5-font-size" data-default="$font-size-base * 1.25" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-base" for="variable-h6-font-size"> H6 font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-h6-font-size" id="variable-h6-font-size" placeholder="H6 font size" value="1rem" data-computed="1rem" data-variable="$h6-font-size" data-default="$font-size-base" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1.5" for="variable-headings-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-headings-line-height" id="variable-headings-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$headings-line-height" data-default="1.5" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($spacer / 2)" for="variable-headings-margin-bottom"> Margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-headings-margin-bottom" id="variable-headings-margin-bottom" placeholder="Margin bottom" value="0.5rem" data-computed="0.5rem" data-variable="$headings-margin-bottom" data-default="($spacer / 2)" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Display headings</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="3.3rem" for="variable-display1-size"> Display1 size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display1-size" id="variable-display1-size" placeholder="Display1 size" value="3.3rem" data-computed="3.3rem" data-variable="$display1-size" data-default="3.3rem" title="CSS value: 3.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="2.75rem" for="variable-display2-size"> Display2 size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display2-size" id="variable-display2-size" placeholder="Display2 size" value="2.75rem" data-computed="2.75rem" data-variable="$display2-size" data-default="2.75rem" title="CSS value: 2.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="2.1875rem" for="variable-display3-size"> Display3 size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display3-size" id="variable-display3-size" placeholder="Display3 size" value="2.1875rem" data-computed="2.1875rem" data-variable="$display3-size" data-default="2.1875rem" title="CSS value: 2.1875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.6275rem" for="variable-display4-size"> Display4 size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display4-size" id="variable-display4-size" placeholder="Display4 size" value="1.6275rem" data-computed="1.6275rem" data-variable="$display4-size" data-default="1.6275rem" title="CSS value: 1.6275rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-display1-weight"> Display1 weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display1-weight" id="variable-display1-weight" placeholder="Display1 weight" value="600" data-computed="600" data-variable="$display1-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-display2-weight"> Display2 weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display2-weight" id="variable-display2-weight" placeholder="Display2 weight" value="600" data-computed="600" data-variable="$display2-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-display3-weight"> Display3 weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display3-weight" id="variable-display3-weight" placeholder="Display3 weight" value="600" data-computed="600" data-variable="$display3-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-display4-weight"> Display4 weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display4-weight" id="variable-display4-weight" placeholder="Display4 weight" value="600" data-computed="600" data-variable="$display4-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$headings-line-height" for="variable-display-line-height"> Display line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-display-line-height" id="variable-display-line-height" placeholder="Display line height" value="1.5" data-computed="1.5" data-variable="$display-line-height" data-default="$headings-line-height" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Heading: .heading class</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default=".95rem" for="variable-heading-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-font-size" id="variable-heading-font-size" placeholder="Font size" value="0.95rem" data-computed="0.95rem" data-variable="$heading-font-size" data-default=".95rem" title="CSS value: 0.95rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$headings-font-weight" for="variable-heading-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-font-weight" id="variable-heading-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$heading-font-weight" data-default="$headings-font-weight" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-heading-text-transform"> Text transform </label> <select class="form-control variable-heading-text-transform" id="variable-heading-text-transform" data-variable="$heading-text-transform" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Heading: .heading-title class</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="1.375rem" for="variable-heading-title-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-title-font-size" id="variable-heading-title-font-size" placeholder="Font size" value="1.375rem" data-computed="1.375rem" data-variable="$heading-title-font-size" data-default="1.375rem" title="CSS value: 1.375rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-heading-title-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-title-font-weight" id="variable-heading-title-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$heading-title-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-heading-title-text-transform"> Text transform </label> <select class="form-control variable-heading-title-text-transform" id="variable-heading-title-text-transform" data-variable="$heading-title-text-transform" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Heading: .heading-section class</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="1.375rem" for="variable-heading-section-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-section-font-size" id="variable-heading-section-font-size" placeholder="Font size" value="1.375rem" data-computed="1.375rem" data-variable="$heading-section-font-size" data-default="1.375rem" title="CSS value: 1.375rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-heading-section-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-heading-section-font-weight" id="variable-heading-section-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$heading-section-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-heading-section-text-transform"> Text transform </label> <select class="form-control variable-heading-section-text-transform" id="variable-heading-section-text-transform" data-variable="$heading-section-text-transform" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-text-utilities" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Text utilities</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="80%" for="variable-small-font-size"> Small font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-small-font-size" id="variable-small-font-size" placeholder="Small font size" value="80%" data-computed="80%" data-variable="$small-font-size" data-default="80%" title="CSS value: 80%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-text-muted"> Text muted </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-text-muted" id="variable-text-muted" placeholder="Text muted" value="#8898aa" data-computed="#8898aa" data-variable="$text-muted" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Paragraph</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="1rem" for="variable-paragraph-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-paragraph-font-size" id="variable-paragraph-font-size" placeholder="Font size" value="1rem" data-computed="1rem" data-variable="$paragraph-font-size" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="300" for="variable-paragraph-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-paragraph-font-weight" id="variable-paragraph-font-weight" placeholder="Font weight" value="300" data-computed="300" data-variable="$paragraph-font-weight" data-default="300" title="CSS value: 300" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-paragraph-margin-bottom"> Margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-paragraph-margin-bottom" id="variable-paragraph-margin-bottom" placeholder="Margin bottom" value="1rem" data-computed="1rem" data-variable="$paragraph-margin-bottom" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Lead paragraph</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="($paragraph-font-size * 1.25)" for="variable-lead-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-lead-font-size" id="variable-lead-font-size" placeholder="Font size" value="1.25rem" data-computed="1.25rem" data-variable="$lead-font-size" data-default="($paragraph-font-size * 1.25)" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="300" for="variable-lead-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-lead-font-weight" id="variable-lead-font-weight" placeholder="Font weight" value="300" data-computed="300" data-variable="$lead-font-weight" data-default="300" title="CSS value: 300" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Blockquote</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="($font-size-base * 1.25)" for="variable-blockquote-font-size"> Footer font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-blockquote-font-size" id="variable-blockquote-font-size" placeholder="Footer font size" value="1.25rem" data-computed="1.25rem" data-variable="$blockquote-font-size" data-default="($font-size-base * 1.25)" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-blockquote-small-color"> Footer text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-blockquote-small-color" id="variable-blockquote-small-color" placeholder="Footer text color" value="#8898aa" data-computed="#8898aa" data-variable="$blockquote-small-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Marked text</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="#fcf8e3" for="variable-mark-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-mark-bg" id="variable-mark-bg" placeholder="Background color" value="#fcf8e3" data-computed="#fcf8e3" data-variable="$mark-bg" data-default="#fcf8e3" title="CSS value: #fcf8e3" > <i class="element-color__open-picker" style="background-color: #fcf8e3;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".2em" for="variable-mark-padding"> Padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-mark-padding" id="variable-mark-padding" placeholder="Padding" value="0.2em" data-computed="0.2em" data-variable="$mark-padding" data-default=".2em" title="CSS value: 0.2em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-6">Description list term</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="6"> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-dt-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-dt-font-weight" id="variable-dt-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$dt-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-7">Computer code</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="7"> <div class="form-group col-12"> <label data-default="$pink" for="variable-code-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-code-color" id="variable-code-color" placeholder="Text color" value="#f3a4b5" data-computed="#f3a4b5" data-variable="$code-color" data-default="$pink" title="CSS value: #f3a4b5" > <i class="element-color__open-picker" style="background-color: #f3a4b5;"></i> </div> </div> <div class="form-group col-12"> <label data-default="87.5%" for="variable-code-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-code-font-size" id="variable-code-font-size" placeholder="Font size" value="87.5%" data-computed="87.5%" data-variable="$code-font-size" data-default="87.5%" title="CSS value: 87.5%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-8">Preformatted text</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="8"> <div class="form-group col-12"> <label data-default="$gray-900" for="variable-pre-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pre-color" id="variable-pre-color" placeholder="Text color" value="#212529" data-computed="#212529" data-variable="$pre-color" data-default="$gray-900" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="340px" for="variable-pre-scrollable-max-height"> Scrollable max height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-pre-scrollable-max-height" id="variable-pre-scrollable-max-height" placeholder="Scrollable max height" value="340px" data-computed="340px" data-variable="$pre-scrollable-max-height" data-default="340px" title="CSS value: 340px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-9">Keyboard input</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="9"> <div class="form-group col-12"> <label data-default="$gray-900" for="variable-kbd-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-kbd-bg" id="variable-kbd-bg" placeholder="Background color" value="#212529" data-computed="#212529" data-variable="$kbd-bg" data-default="$gray-900" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$white" for="variable-kbd-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-kbd-color" id="variable-kbd-color" placeholder="Text color" value="#fff" data-computed="#fff" data-variable="$kbd-color" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$code-font-size" for="variable-kbd-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-kbd-font-size" id="variable-kbd-font-size" placeholder="Font size" value="87.5%" data-computed="87.5%" data-variable="$kbd-font-size" data-default="$code-font-size" title="CSS value: 87.5%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-nested-kbd-font-weight"> Nested kbd font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-nested-kbd-font-weight" id="variable-nested-kbd-font-weight" placeholder="Nested kbd font weight" value="600" data-computed="600" data-variable="$nested-kbd-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="9"> <div class="form-group col-12"> <label data-default=".2rem" for="variable-kbd-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-kbd-padding-y" id="variable-kbd-padding-y" placeholder="Padding y (vertical)" value="0.2rem" data-computed="0.2rem" data-variable="$kbd-padding-y" data-default=".2rem" title="CSS value: 0.2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".4rem" for="variable-kbd-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-kbd-padding-x" id="variable-kbd-padding-x" placeholder="Padding x (horizontal)" value="0.4rem" data-computed="0.4rem" data-variable="$kbd-padding-x" data-default=".4rem" title="CSS value: 0.4rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="9"> <div class="form-group col-12"> <label data-default="inset 0 -.1rem 0 rgba($black, .25)" for="variable-kbd-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-kbd-box-shadow" id="variable-kbd-box-shadow" placeholder="Box shadow" value="inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)" data-computed="inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)" data-variable="$kbd-box-shadow" data-default="inset 0 -.1rem 0 rgba($black, .25)" title="CSS value: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-theme-colors" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Theme colors</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="#5e72e4" for="variable-primary"> Primary </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-primary" id="variable-primary" placeholder="Primary" value="#5e72e4" data-computed="#5e72e4" data-variable="$primary" data-default="#5e72e4" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$teal" for="variable-info"> Info </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-info" id="variable-info" placeholder="Info" value="#11cdef" data-computed="#11cdef" data-variable="$info" data-default="$teal" title="CSS value: #11cdef" > <i class="element-color__open-picker" style="background-color: #11cdef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$green" for="variable-success"> Success </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-success" id="variable-success" placeholder="Success" value="#2dce89" data-computed="#2dce89" data-variable="$success" data-default="$green" title="CSS value: #2dce89" > <i class="element-color__open-picker" style="background-color: #2dce89;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$red" for="variable-danger"> Danger </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-danger" id="variable-danger" placeholder="Danger" value="#f5365c" data-computed="#f5365c" data-variable="$danger" data-default="$red" title="CSS value: #f5365c" > <i class="element-color__open-picker" style="background-color: #f5365c;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$orange" for="variable-warning"> Warning </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-warning" id="variable-warning" placeholder="Warning" value="#fb6340" data-computed="#fb6340" data-variable="$warning" data-default="$orange" title="CSS value: #fb6340" > <i class="element-color__open-picker" style="background-color: #fb6340;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#172b4d" for="variable-default"> Default </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-default" id="variable-default" placeholder="Default" value="#172b4d" data-computed="#172b4d" data-variable="$default" data-default="#172b4d" title="CSS value: #172b4d" > <i class="element-color__open-picker" style="background-color: #172b4d;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#f4f5f7" for="variable-secondary"> Secondary </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-secondary" id="variable-secondary" placeholder="Secondary" value="#f4f5f7" data-computed="#f4f5f7" data-variable="$secondary" data-default="#f4f5f7" title="CSS value: #f4f5f7" > <i class="element-color__open-picker" style="background-color: #f4f5f7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-500" for="variable-light"> Light </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-light" id="variable-light" placeholder="Light" value="#adb5bd" data-computed="#adb5bd" data-variable="$light" data-default="$gray-500" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-900" for="variable-dark"> Dark </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dark" id="variable-dark" placeholder="Dark" value="#212529" data-computed="#212529" data-variable="$dark" data-default="$gray-900" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($gray-900, 15%)" for="variable-darker"> Darker </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-darker" id="variable-darker" placeholder="Darker" value="black" data-computed="black" data-variable="$darker" data-default="darken($gray-900, 15%)" title="CSS value: black" > <i class="element-color__open-picker" style="background-color: black;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">General colors</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="#fff" for="variable-white"> White </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-white" id="variable-white" placeholder="White" value="#fff" data-computed="#fff" data-variable="$white" data-default="#fff" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#f8f9fa" for="variable-gray-100"> Gray-100 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-100" id="variable-gray-100" placeholder="Gray-100" value="#f6f9fc" data-computed="#f6f9fc" data-variable="$gray-100" data-default="#f8f9fa" title="CSS value: #f6f9fc" > <i class="element-color__open-picker" style="background-color: #f6f9fc;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#e9ecef" for="variable-gray-200"> Gray-200 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-200" id="variable-gray-200" placeholder="Gray-200" value="#e9ecef" data-computed="#e9ecef" data-variable="$gray-200" data-default="#e9ecef" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#dee2e6" for="variable-gray-300"> Gray-300 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-300" id="variable-gray-300" placeholder="Gray-300" value="#dee2e6" data-computed="#dee2e6" data-variable="$gray-300" data-default="#dee2e6" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#ced4da" for="variable-gray-400"> Gray-400 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-400" id="variable-gray-400" placeholder="Gray-400" value="#ced4da" data-computed="#ced4da" data-variable="$gray-400" data-default="#ced4da" title="CSS value: #ced4da" > <i class="element-color__open-picker" style="background-color: #ced4da;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#adb5bd" for="variable-gray-500"> Gray-500 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-500" id="variable-gray-500" placeholder="Gray-500" value="#adb5bd" data-computed="#adb5bd" data-variable="$gray-500" data-default="#adb5bd" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#8898aa" for="variable-gray-600"> Gray-600 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-600" id="variable-gray-600" placeholder="Gray-600" value="#8898aa" data-computed="#8898aa" data-variable="$gray-600" data-default="#8898aa" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#525f7f" for="variable-gray-700"> Gray-700 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-700" id="variable-gray-700" placeholder="Gray-700" value="#525f7f" data-computed="#525f7f" data-variable="$gray-700" data-default="#525f7f" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#32325d" for="variable-gray-800"> Gray-800 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-800" id="variable-gray-800" placeholder="Gray-800" value="#32325d" data-computed="#32325d" data-variable="$gray-800" data-default="#32325d" title="CSS value: #32325d" > <i class="element-color__open-picker" style="background-color: #32325d;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#212529" for="variable-gray-900"> Gray-900 </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-gray-900" id="variable-gray-900" placeholder="Gray-900" value="#212529" data-computed="#212529" data-variable="$gray-900" data-default="#212529" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#000" for="variable-black"> Black </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-black" id="variable-black" placeholder="Black" value="#000" data-computed="#000" data-variable="$black" data-default="#000" title="CSS value: #000" > <i class="element-color__open-picker" style="background-color: #000;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#5e72e4" for="variable-blue"> Blue </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-blue" id="variable-blue" placeholder="Blue" value="#5e72e4" data-computed="#5e72e4" data-variable="$blue" data-default="#5e72e4" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#5603ad" for="variable-indigo"> Indigo </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-indigo" id="variable-indigo" placeholder="Indigo" value="#5603ad" data-computed="#5603ad" data-variable="$indigo" data-default="#5603ad" title="CSS value: #5603ad" > <i class="element-color__open-picker" style="background-color: #5603ad;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#8965e0" for="variable-purple"> Purple </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-purple" id="variable-purple" placeholder="Purple" value="#8965e0" data-computed="#8965e0" data-variable="$purple" data-default="#8965e0" title="CSS value: #8965e0" > <i class="element-color__open-picker" style="background-color: #8965e0;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#f3a4b5" for="variable-pink"> Pink </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pink" id="variable-pink" placeholder="Pink" value="#f3a4b5" data-computed="#f3a4b5" data-variable="$pink" data-default="#f3a4b5" title="CSS value: #f3a4b5" > <i class="element-color__open-picker" style="background-color: #f3a4b5;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#f5365c" for="variable-red"> Red </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-red" id="variable-red" placeholder="Red" value="#f5365c" data-computed="#f5365c" data-variable="$red" data-default="#f5365c" title="CSS value: #f5365c" > <i class="element-color__open-picker" style="background-color: #f5365c;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#fb6340" for="variable-orange"> Orange </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-orange" id="variable-orange" placeholder="Orange" value="#fb6340" data-computed="#fb6340" data-variable="$orange" data-default="#fb6340" title="CSS value: #fb6340" > <i class="element-color__open-picker" style="background-color: #fb6340;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#ffd600" for="variable-yellow"> Yellow </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-yellow" id="variable-yellow" placeholder="Yellow" value="#ffd600" data-computed="#ffd600" data-variable="$yellow" data-default="#ffd600" title="CSS value: #ffd600" > <i class="element-color__open-picker" style="background-color: #ffd600;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#2dce89" for="variable-green"> Green </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-green" id="variable-green" placeholder="Green" value="#2dce89" data-computed="#2dce89" data-variable="$green" data-default="#2dce89" title="CSS value: #2dce89" > <i class="element-color__open-picker" style="background-color: #2dce89;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#11cdef" for="variable-teal"> Teal </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-teal" id="variable-teal" placeholder="Teal" value="#11cdef" data-computed="#11cdef" data-variable="$teal" data-default="#11cdef" title="CSS value: #11cdef" > <i class="element-color__open-picker" style="background-color: #11cdef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#2bffc6" for="variable-cyan"> Cyan </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-cyan" id="variable-cyan" placeholder="Cyan" value="#2bffc6" data-computed="#2bffc6" data-variable="$cyan" data-default="#2bffc6" title="CSS value: #2bffc6" > <i class="element-color__open-picker" style="background-color: #2bffc6;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-brand-colors" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Brand colors</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="#3b5999" for="variable-facebook"> Facebook </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-facebook" id="variable-facebook" placeholder="Facebook" value="#3b5999" data-computed="#3b5999" data-variable="$facebook" data-default="#3b5999" title="CSS value: #3b5999" > <i class="element-color__open-picker" style="background-color: #3b5999;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#1da1f2" for="variable-twitter"> Twitter </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-twitter" id="variable-twitter" placeholder="Twitter" value="#1da1f2" data-computed="#1da1f2" data-variable="$twitter" data-default="#1da1f2" title="CSS value: #1da1f2" > <i class="element-color__open-picker" style="background-color: #1da1f2;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#e4405f" for="variable-instagram"> Instagram </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-instagram" id="variable-instagram" placeholder="Instagram" value="#e4405f" data-computed="#e4405f" data-variable="$instagram" data-default="#e4405f" title="CSS value: #e4405f" > <i class="element-color__open-picker" style="background-color: #e4405f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#222222" for="variable-github"> Github </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-github" id="variable-github" placeholder="Github" value="#222222" data-computed="#222222" data-variable="$github" data-default="#222222" title="CSS value: #222222" > <i class="element-color__open-picker" style="background-color: #222222;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#bd081c" for="variable-pinterest"> Pinterest </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pinterest" id="variable-pinterest" placeholder="Pinterest" value="#bd081c" data-computed="#bd081c" data-variable="$pinterest" data-default="#bd081c" title="CSS value: #bd081c" > <i class="element-color__open-picker" style="background-color: #bd081c;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#cd201f" for="variable-youtube"> YouTube </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-youtube" id="variable-youtube" placeholder="YouTube" value="#cd201f" data-computed="#cd201f" data-variable="$youtube" data-default="#cd201f" title="CSS value: #cd201f" > <i class="element-color__open-picker" style="background-color: #cd201f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#1AB7EA" for="variable-vimeo"> Vimeo </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-vimeo" id="variable-vimeo" placeholder="Vimeo" value="#1AB7EA" data-computed="#1AB7EA" data-variable="$vimeo" data-default="#1AB7EA" title="CSS value: #1AB7EA" > <i class="element-color__open-picker" style="background-color: #1AB7EA;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#3aaf85" for="variable-slack"> Slack </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-slack" id="variable-slack" placeholder="Slack" value="#3aaf85" data-computed="#3aaf85" data-variable="$slack" data-default="#3aaf85" title="CSS value: #3aaf85" > <i class="element-color__open-picker" style="background-color: #3aaf85;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#ea4c89" for="variable-dribbble"> Dribbble </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dribbble" id="variable-dribbble" placeholder="Dribbble" value="#ea4c89" data-computed="#ea4c89" data-variable="$dribbble" data-default="#ea4c89" title="CSS value: #ea4c89" > <i class="element-color__open-picker" style="background-color: #ea4c89;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#1769ff" for="variable-behance"> Behance </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-behance" id="variable-behance" placeholder="Behance" value="#1769ff" data-computed="#1769ff" data-variable="$behance" data-default="#1769ff" title="CSS value: #1769ff" > <i class="element-color__open-picker" style="background-color: #1769ff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#ff4500" for="variable-reddit"> Reddit </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-reddit" id="variable-reddit" placeholder="Reddit" value="#ff4500" data-computed="#ff4500" data-variable="$reddit" data-default="#ff4500" title="CSS value: #ff4500" > <i class="element-color__open-picker" style="background-color: #ff4500;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#35465c" for="variable-tumblr"> Tumblr </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-tumblr" id="variable-tumblr" placeholder="Tumblr" value="#35465c" data-computed="#35465c" data-variable="$tumblr" data-default="#35465c" title="CSS value: #35465c" > <i class="element-color__open-picker" style="background-color: #35465c;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#0077B5" for="variable-linkedin"> LinkedIn </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-linkedin" id="variable-linkedin" placeholder="LinkedIn" value="#0077B5" data-computed="#0077B5" data-variable="$linkedin" data-default="#0077B5" title="CSS value: #0077B5" > <i class="element-color__open-picker" style="background-color: #0077B5;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="darken($facebook, 5%)" for="variable-facebook-states"> Facebook states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-facebook-states" id="variable-facebook-states" placeholder="Facebook states" value="#344e87" data-computed="#344e87" data-variable="$facebook-states" data-default="darken($facebook, 5%)" title="CSS value: #344e87" > <i class="element-color__open-picker" style="background-color: #344e87;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($twitter, 5%)" for="variable-twitter-states"> Twitter states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-twitter-states" id="variable-twitter-states" placeholder="Twitter states" value="#0d95e8" data-computed="#0d95e8" data-variable="$twitter-states" data-default="darken($twitter, 5%)" title="CSS value: #0d95e8" > <i class="element-color__open-picker" style="background-color: #0d95e8;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($instagram, 6%)" for="variable-instagram-states"> Instagram states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-instagram-states" id="variable-instagram-states" placeholder="Instagram states" value="#e02549" data-computed="#e02549" data-variable="$instagram-states" data-default="darken($instagram, 6%)" title="CSS value: #e02549" > <i class="element-color__open-picker" style="background-color: #e02549;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($linkedin, 5%)" for="variable-linkedin-states"> LinkedIn states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-linkedin-states" id="variable-linkedin-states" placeholder="LinkedIn states" value="#00669c" data-computed="#00669c" data-variable="$linkedin-states" data-default="darken($linkedin, 5%)" title="CSS value: #00669c" > <i class="element-color__open-picker" style="background-color: #00669c;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($pinterest, 6%)" for="variable-pinterest-states"> Pinterest states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pinterest-states" id="variable-pinterest-states" placeholder="Pinterest states" value="#a00718" data-computed="#a00718" data-variable="$pinterest-states" data-default="darken($pinterest, 6%)" title="CSS value: #a00718" > <i class="element-color__open-picker" style="background-color: #a00718;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($youtube, 6%)" for="variable-youtube-states"> YouTube states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-youtube-states" id="variable-youtube-states" placeholder="YouTube states" value="#b21c1b" data-computed="#b21c1b" data-variable="$youtube-states" data-default="darken($youtube, 6%)" title="CSS value: #b21c1b" > <i class="element-color__open-picker" style="background-color: #b21c1b;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($slack, 6%)" for="variable-slack-states"> Slack states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-slack-states" id="variable-slack-states" placeholder="Slack states" value="#329874" data-computed="#329874" data-variable="$slack-states" data-default="darken($slack, 6%)" title="CSS value: #329874" > <i class="element-color__open-picker" style="background-color: #329874;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($dribbble, 6%)" for="variable-dribbble-states"> Dribbble states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dribbble-states" id="variable-dribbble-states" placeholder="Dribbble states" value="#e73177" data-computed="#e73177" data-variable="$dribbble-states" data-default="darken($dribbble, 6%)" title="CSS value: #e73177" > <i class="element-color__open-picker" style="background-color: #e73177;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($github, 6%)" for="variable-github-states"> GitHub states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-github-states" id="variable-github-states" placeholder="GitHub states" value="#131313" data-computed="#131313" data-variable="$github-states" data-default="darken($github, 6%)" title="CSS value: #131313" > <i class="element-color__open-picker" style="background-color: #131313;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($reddit, 6%)" for="variable-reddit-states"> Reddit states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-reddit-states" id="variable-reddit-states" placeholder="Reddit states" value="#e03d00" data-computed="#e03d00" data-variable="$reddit-states" data-default="darken($reddit, 6%)" title="CSS value: #e03d00" > <i class="element-color__open-picker" style="background-color: #e03d00;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($tumblr, 6%)" for="variable-tumblr-states"> Tumblr states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-tumblr-states" id="variable-tumblr-states" placeholder="Tumblr states" value="#2a3749" data-computed="#2a3749" data-variable="$tumblr-states" data-default="darken($tumblr, 6%)" title="CSS value: #2a3749" > <i class="element-color__open-picker" style="background-color: #2a3749;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($behance, 6%)" for="variable-behance-states"> Behance states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-behance-states" id="variable-behance-states" placeholder="Behance states" value="#0057f7" data-computed="#0057f7" data-variable="$behance-states" data-default="darken($behance, 6%)" title="CSS value: #0057f7" > <i class="element-color__open-picker" style="background-color: #0057f7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($vimeo, 6%)" for="variable-vimeo-states"> Vimeo states </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-vimeo-states" id="variable-vimeo-states" placeholder="Vimeo states" value="#13a3d2" data-computed="#13a3d2" data-variable="$vimeo-states" data-default="darken($vimeo, 6%)" title="CSS value: #13a3d2" > <i class="element-color__open-picker" style="background-color: #13a3d2;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-action-colors" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Action colors</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$yellow" for="variable-favorite-color"> Favorite color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-favorite-color" id="variable-favorite-color" placeholder="Favorite color" value="#ffd600" data-computed="#ffd600" data-variable="$favorite-color" data-default="$yellow" title="CSS value: #ffd600" > <i class="element-color__open-picker" style="background-color: #ffd600;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$blue" for="variable-like-color"> Like color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-like-color" id="variable-like-color" placeholder="Like color" value="#5e72e4" data-computed="#5e72e4" data-variable="$like-color" data-default="$blue" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$red" for="variable-love-color"> Love color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-love-color" id="variable-love-color" placeholder="Love color" value="#f5365c" data-computed="#f5365c" data-variable="$love-color" data-default="$red" title="CSS value: #f5365c" > <i class="element-color__open-picker" style="background-color: #f5365c;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-buttons" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Buttons</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label> Font size </label> <p class="element-note">To change the font size of the buttons and maintain consistency, please go to <a href="#" data-search-category="form-buttons" data-search-variable="$input-btn-font-size">$input-btn-font-size</a> and change its value.</p> </div> <div class="form-group col-12"> <label data-default="600" for="variable-btn-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-font-weight" id="variable-btn-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$btn-font-weight" data-default="600" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-btn-text-transform"> Text transform </label> <select class="form-control variable-btn-text-transform" id="variable-btn-text-transform" data-variable="$btn-text-transform" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> <div class="form-group col-12"> <label data-default=".025em" for="variable-btn-letter-spacing"> Letter spacing </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-letter-spacing" id="variable-btn-letter-spacing" placeholder="Letter spacing" value="0.025em" data-computed="0.025em" data-variable="$btn-letter-spacing" data-default=".025em" title="CSS value: 0.025em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-line-height" for="variable-btn-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-line-height" id="variable-btn-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$btn-line-height" data-default="$input-btn-line-height" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-padding-y" for="variable-btn-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-y" id="variable-btn-padding-y" placeholder="Padding y (vertical)" value="0.625rem" data-computed="0.625rem" data-variable="$btn-padding-y" data-default="$input-btn-padding-y" title="CSS value: 0.625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x" for="variable-btn-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-x" id="variable-btn-padding-x" placeholder="Padding x (horizontal)" value="1.25rem" data-computed="1.25rem" data-variable="$btn-padding-x" data-default="$input-btn-padding-x" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-border-width" for="variable-btn-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-border-width" id="variable-btn-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$btn-border-width" data-default="$input-btn-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-radius" for="variable-btn-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-border-radius" id="variable-btn-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$btn-border-radius" data-default="$input-border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-focus-width" for="variable-btn-focus-width"> Focus width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-focus-width" id="variable-btn-focus-width" placeholder="Focus width" value="$input-btn-focus-width" data-computed="$input-btn-focus-width" data-variable="$btn-focus-width" data-default="$input-btn-focus-width" title="CSS value: $input-btn-focus-width" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)" for="variable-btn-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-btn-box-shadow" id="variable-btn-box-shadow" placeholder="Box shadow" value="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-computed="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-variable="$btn-box-shadow" data-default="0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)" title="CSS value: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)" for="variable-btn-hover-box-shadow"> Hover box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-btn-hover-box-shadow" id="variable-btn-hover-box-shadow" placeholder="Hover box shadow" value="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-computed="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-variable="$btn-hover-box-shadow" data-default="0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)" title="CSS value: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="$btn-hover-box-shadow" for="variable-btn-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-btn-focus-box-shadow" id="variable-btn-focus-box-shadow" placeholder="Focus box shadow" value="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-computed="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-variable="$btn-focus-box-shadow" data-default="$btn-hover-box-shadow" title="CSS value: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-btn-active-box-shadow"> Active box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-btn-active-box-shadow" id="variable-btn-active-box-shadow" placeholder="Active box shadow" value="none" data-computed="none" data-variable="$btn-active-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".65" for="variable-btn-disabled-opacity"> Disabled opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-disabled-opacity" id="variable-btn-disabled-opacity" placeholder="Disabled opacity" value="0.65" data-computed="0.65" data-variable="$btn-disabled-opacity" data-default=".65" title="CSS value: 0.65" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-btn-link-disabled-color"> Disabled btn-link color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-btn-link-disabled-color" id="variable-btn-link-disabled-color" placeholder="Disabled btn-link color" value="#8898aa" data-computed="#8898aa" data-variable="$btn-link-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$transition-base" for="variable-btn-transition"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-btn-transition" id="variable-btn-transition" placeholder="Transition" value="all 0.15s ease" data-computed="all 0.15s ease" data-variable="$btn-transition" data-default="$transition-base" title="CSS value: all 0.15s ease" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".5rem" for="variable-btn-block-spacing-y"> Button block margin top </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-block-spacing-y" id="variable-btn-block-spacing-y" placeholder="Button block margin top" value="0.5rem" data-computed="0.5rem" data-variable="$btn-block-spacing-y" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Small buttons</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$input-btn-font-size-sm" for="variable-btn-font-size-sm"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-font-size-sm" id="variable-btn-font-size-sm" placeholder="Font size" value="0.75rem" data-computed="0.75rem" data-variable="$btn-font-size-sm" data-default="$input-btn-font-size-sm" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-line-height-sm" for="variable-btn-line-height-sm"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-line-height-sm" id="variable-btn-line-height-sm" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$btn-line-height-sm" data-default="$input-btn-line-height-sm" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-y-sm" for="variable-btn-padding-y-sm"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-y-sm" id="variable-btn-padding-y-sm" placeholder="Padding y (vertical)" value="0.25rem" data-computed="0.25rem" data-variable="$btn-padding-y-sm" data-default="$input-btn-padding-y-sm" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x-sm" for="variable-btn-padding-x-sm"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-x-sm" id="variable-btn-padding-x-sm" placeholder="Padding x (horizontal)" value="0.5rem" data-computed="0.5rem" data-variable="$btn-padding-x-sm" data-default="$input-btn-padding-x-sm" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-radius" for="variable-btn-border-radius-sm"> Border radius sm </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-border-radius-sm" id="variable-btn-border-radius-sm" placeholder="Border radius sm" value="0.25rem" data-computed="0.25rem" data-variable="$btn-border-radius-sm" data-default="$input-border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Large buttons</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label> Font size </label> <p class="element-note">Large buttons use the same font-size as regular buttons.</p> </div> <div class="form-group col-12"> <label data-default="$input-btn-line-height-lg" for="variable-btn-line-height-lg"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-line-height-lg" id="variable-btn-line-height-lg" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$btn-line-height-lg" data-default="$input-btn-line-height-lg" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-y-lg" for="variable-btn-padding-y-lg"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-y-lg" id="variable-btn-padding-y-lg" placeholder="Padding y (vertical)" value="0.875rem" data-computed="0.875rem" data-variable="$btn-padding-y-lg" data-default="$input-btn-padding-y-lg" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x-lg" for="variable-btn-padding-x-lg"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-padding-x-lg" id="variable-btn-padding-x-lg" placeholder="Padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$btn-padding-x-lg" data-default="$input-btn-padding-x-lg" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-radius-lg" for="variable-btn-border-radius-lg"> Border radius lg </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-btn-border-radius-lg" id="variable-btn-border-radius-lg" placeholder="Border radius lg" value="0.3rem" data-computed="0.3rem" data-variable="$btn-border-radius-lg" data-default="$input-border-radius-lg" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-dropdowns" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Dropdowns</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-dropdown-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-bg" id="variable-dropdown-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$dropdown-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-dropdown-divider-bg"> Divider color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-divider-bg" id="variable-dropdown-divider-bg" placeholder="Divider color" value="#e9ecef" data-computed="#e9ecef" data-variable="$dropdown-divider-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="0" for="variable-dropdown-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-dropdown-border-width" id="variable-dropdown-border-width" placeholder="Border width" value="0" data-computed="0" data-variable="$dropdown-border-width" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-lg" for="variable-dropdown-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-dropdown-border-radius" id="variable-dropdown-border-radius" placeholder="Border radius" value="0.3rem" data-computed="0.3rem" data-variable="$dropdown-border-radius" data-default="$border-radius-lg" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($black, .15)" for="variable-dropdown-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-border-color" id="variable-dropdown-border-color" placeholder="Border color" value="rgba(0, 0, 0, 0.15)" data-computed="rgba(0, 0, 0, 0.15)" data-variable="$dropdown-border-color" data-default="rgba($black, .15)" title="CSS value: rgba(0, 0, 0, 0.15)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.15);"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)" for="variable-dropdown-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-dropdown-box-shadow" id="variable-dropdown-box-shadow" placeholder="Box shadow" value="0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1)" data-computed="0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1)" data-variable="$dropdown-box-shadow" data-default="0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)" title="CSS value: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".5rem" for="variable-dropdown-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-dropdown-padding-y" id="variable-dropdown-padding-y" placeholder="Padding y (vertical)" value="0.5rem" data-computed="0.5rem" data-variable="$dropdown-padding-y" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Dropdown links</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$gray-900" for="variable-dropdown-link-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-link-color" id="variable-dropdown-link-color" placeholder="Text color" value="#212529" data-computed="#212529" data-variable="$dropdown-link-color" data-default="$gray-900" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-dropdown-link-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-link-disabled-color" id="variable-dropdown-link-disabled-color" placeholder="Disabled text color" value="#8898aa" data-computed="#8898aa" data-variable="$dropdown-link-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($gray-900, 5%)" for="variable-dropdown-link-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-link-hover-color" id="variable-dropdown-link-hover-color" placeholder="Hover text color" value="#16181b" data-computed="#16181b" data-variable="$dropdown-link-hover-color" data-default="darken($gray-900, 5%)" title="CSS value: #16181b" > <i class="element-color__open-picker" style="background-color: #16181b;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-dropdown-link-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-link-active-bg" id="variable-dropdown-link-active-bg" placeholder="Active background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$dropdown-link-active-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-color" for="variable-dropdown-link-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-dropdown-link-active-color" id="variable-dropdown-link-active-color" placeholder="Active text color" value="#fff" data-computed="#fff" data-variable="$dropdown-link-active-color" data-default="$component-active-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Caret</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="true"> Enable caret </label> <div class="col-6 pr-0 variable-enable-caret" id="variable-enable-caret"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-caret-yes" id="option-variable-enable-caret-yes" type="radio" name="option-variable-enable-caret" value="true" data-variable="$enable-caret" data-default="true" data-computed="true" checked> <label class="form-check-label" for="option-variable-enable-caret-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-caret-no" id="option-variable-enable-caret-no" type="radio" name="option-variable-enable-caret" value="false" data-variable="$enable-caret" data-default="true" data-computed="true" > <label class="form-check-label" for="option-variable-enable-caret-no"> No </label> </div> </div> </div> </div> <div class="form-group col-12"> <label data-default=".3em" for="variable-caret-width"> Caret width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-caret-width" id="variable-caret-width" placeholder="Caret width" value="0.3em" data-computed="0.3em" data-variable="$caret-width" data-default=".3em" title="CSS value: 0.3em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-close-button" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Close button</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba(0, 0, 0, .6)" for="variable-close-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-close-color" id="variable-close-color" placeholder="Text color" value="rgba(0, 0, 0, 0.6)" data-computed="rgba(0, 0, 0, 0.6)" data-variable="$close-color" data-default="rgba(0, 0, 0, .6)" title="CSS value: rgba(0, 0, 0, 0.6)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.6);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-close-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-close-bg" id="variable-close-bg" placeholder="Background color" value="transparent" data-computed="transparent" data-variable="$close-bg" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba(0, 0, 0, .9)" for="variable-close-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-close-hover-color" id="variable-close-hover-color" placeholder="Hover text color" value="rgba(0, 0, 0, 0.9)" data-computed="rgba(0, 0, 0, 0.9)" data-variable="$close-hover-color" data-default="rgba(0, 0, 0, .9)" title="CSS value: rgba(0, 0, 0, 0.9)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.9);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-close-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-close-hover-bg" id="variable-close-hover-bg" placeholder="Hover background color" value="transparent" data-computed="transparent" data-variable="$close-hover-bg" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="none" for="variable-close-text-shadow"> Text shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-close-text-shadow" id="variable-close-text-shadow" placeholder="Text shadow" value="none" data-computed="none" data-variable="$close-text-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-close-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-close-font-weight" id="variable-close-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$close-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-navbar" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Navbar</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-navbar-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-padding-y" id="variable-navbar-padding-y" placeholder="Padding y (vertical)" value="1rem" data-computed="1rem" data-variable="$navbar-padding-y" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-navbar-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-padding-x" id="variable-navbar-padding-x" placeholder="Padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$navbar-padding-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Navbar links</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$font-family-alt" for="variable-navbar-nav-link-font-family"> Font family </label> <div class="element-font"> <input type="text" class="form-control element-font__input variable-navbar-nav-link-font-family" id="variable-navbar-nav-link-font-family" placeholder="Font family" value=""Open Sans", sans-serif" data-computed=""Open Sans", sans-serif" data-variable="$navbar-nav-link-font-family" data-default="$font-family-alt" title="CSS value: "Open Sans", sans-serif" > <i class="element-size__icon icon-font"></i> </div> </div> <div class="form-group col-12"> <label data-default=".9rem" for="variable-navbar-nav-link-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-font-size" id="variable-navbar-nav-link-font-size" placeholder="Font size" value="0.9rem" data-computed="0.9rem" data-variable="$navbar-nav-link-font-size" data-default=".9rem" title="CSS value: 0.9rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="400" for="variable-navbar-nav-link-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-font-weight" id="variable-navbar-nav-link-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$navbar-nav-link-font-weight" data-default="400" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-navbar-nav-link-text-transform"> Text transform </label> <select class="form-control variable-navbar-nav-link-text-transform" id="variable-navbar-nav-link-text-transform" data-variable="$navbar-nav-link-text-transform" data-default="none" data-computed="normal"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" >uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> <div class="form-group col-12"> <label data-default="0" for="variable-navbar-nav-link-letter-spacing"> Letter spacing </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-letter-spacing" id="variable-navbar-nav-link-letter-spacing" placeholder="Letter spacing" value="0" data-computed="0" data-variable="$navbar-nav-link-letter-spacing" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-navbar-nav-link-padding-y"> Link padding y </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-padding-y" id="variable-navbar-nav-link-padding-y" placeholder="Link padding y" value="1rem" data-computed="1rem" data-variable="$navbar-nav-link-padding-y" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-navbar-nav-link-padding-x"> Link padding x </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-padding-x" id="variable-navbar-nav-link-padding-x" placeholder="Link padding x" value="1rem" data-computed="1rem" data-variable="$navbar-nav-link-padding-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-navbar-nav-link-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-nav-link-border-radius" id="variable-navbar-nav-link-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$navbar-nav-link-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="all .15s linear" for="variable-navbar-transition"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-navbar-transition" id="variable-navbar-transition" placeholder="Transition" value="all 0.15s linear" data-computed="all 0.15s linear" data-variable="$navbar-transition" data-default="all .15s linear" title="CSS value: all 0.15s linear" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Navbar Toggler</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$font-size-lg" for="variable-navbar-toggler-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-toggler-font-size" id="variable-navbar-toggler-font-size" placeholder="Font size" value="1.25rem" data-computed="1.25rem" data-variable="$navbar-toggler-font-size" data-default="$font-size-lg" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$btn-border-radius" for="variable-navbar-toggler-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-toggler-border-radius" id="variable-navbar-toggler-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$navbar-toggler-border-radius" data-default="$btn-border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-navbar-toggler-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-toggler-padding-y" id="variable-navbar-toggler-padding-y" placeholder="Padding y (vertical)" value="0.25rem" data-computed="0.25rem" data-variable="$navbar-toggler-padding-y" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-navbar-toggler-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-navbar-toggler-padding-x" id="variable-navbar-toggler-padding-x" placeholder="Padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$navbar-toggler-padding-x" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Navbar - Dark version</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="rgba($white, .95)" for="variable-navbar-dark-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-color" id="variable-navbar-dark-color" placeholder="Text color" value="rgba(255, 255, 255, 0.95)" data-computed="rgba(255, 255, 255, 0.95)" data-variable="$navbar-dark-color" data-default="rgba($white, .95)" title="CSS value: rgba(255, 255, 255, 0.95)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.95);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($white, .65)" for="variable-navbar-dark-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-hover-color" id="variable-navbar-dark-hover-color" placeholder="Hover text color" value="rgba(255, 255, 255, 0.65)" data-computed="rgba(255, 255, 255, 0.65)" data-variable="$navbar-dark-hover-color" data-default="rgba($white, .65)" title="CSS value: rgba(255, 255, 255, 0.65)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.65);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($white, .65)" for="variable-navbar-dark-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-active-color" id="variable-navbar-dark-active-color" placeholder="Active text color" value="rgba(255, 255, 255, 0.65)" data-computed="rgba(255, 255, 255, 0.65)" data-variable="$navbar-dark-active-color" data-default="rgba($white, .65)" title="CSS value: rgba(255, 255, 255, 0.65)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.65);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($white, .25)" for="variable-navbar-dark-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-disabled-color" id="variable-navbar-dark-disabled-color" placeholder="Disabled text color" value="rgba(255, 255, 255, 0.25)" data-computed="rgba(255, 255, 255, 0.25)" data-variable="$navbar-dark-disabled-color" data-default="rgba($white, .25)" title="CSS value: rgba(255, 255, 255, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.25);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-navbar-dark-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-bg" id="variable-navbar-dark-bg" placeholder="Background color" value="transparent" data-computed="transparent" data-variable="$navbar-dark-bg" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(255, 255, 255, .1)" for="variable-navbar-dark-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-hover-bg" id="variable-navbar-dark-hover-bg" placeholder="Hover background color" value="rgba(255, 255, 255, 0.1)" data-computed="rgba(255, 255, 255, 0.1)" data-variable="$navbar-dark-hover-bg" data-default="rgba(255, 255, 255, .1)" title="CSS value: rgba(255, 255, 255, 0.1)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.1);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(255, 255, 255, .1)" for="variable-navbar-dark-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-active-bg" id="variable-navbar-dark-active-bg" placeholder="Active background color" value="rgba(255, 255, 255, 0.1)" data-computed="rgba(255, 255, 255, 0.1)" data-variable="$navbar-dark-active-bg" data-default="rgba(255, 255, 255, .1)" title="CSS value: rgba(255, 255, 255, 0.1)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.1);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-navbar-dark-toggler-border-color"> Toggler border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-toggler-border-color" id="variable-navbar-dark-toggler-border-color" placeholder="Toggler border color" value="transparent" data-computed="transparent" data-variable="$navbar-dark-toggler-border-color" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23")" for="variable-navbar-dark-toggler-icon-bg"> Toggler background icon </label> <input type="text" class="form-control variable-navbar-dark-toggler-icon-bg" id="variable-navbar-dark-toggler-icon-bg" placeholder="Toggler background icon" value="url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")" data-computed="url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")" data-variable="$navbar-dark-toggler-icon-bg" data-default="str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")" > </div> <div class="form-group col-12"> <label data-default="$navbar-dark-active-color" for="variable-navbar-dark-brand-color"> Brand color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-brand-color" id="variable-navbar-dark-brand-color" placeholder="Brand color" value="rgba(255, 255, 255, 0.65)" data-computed="rgba(255, 255, 255, 0.65)" data-variable="$navbar-dark-brand-color" data-default="$navbar-dark-active-color" title="CSS value: rgba(255, 255, 255, 0.65)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.65);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$navbar-dark-active-color" for="variable-navbar-dark-brand-hover-color"> Brand hover color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-dark-brand-hover-color" id="variable-navbar-dark-brand-hover-color" placeholder="Brand hover color" value="rgba(255, 255, 255, 0.65)" data-computed="rgba(255, 255, 255, 0.65)" data-variable="$navbar-dark-brand-hover-color" data-default="$navbar-dark-active-color" title="CSS value: rgba(255, 255, 255, 0.65)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.65);"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Navbar - Light version</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="rgba($black, .5)" for="variable-navbar-light-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-color" id="variable-navbar-light-color" placeholder="Text color" value="rgba(0, 0, 0, 0.5)" data-computed="rgba(0, 0, 0, 0.5)" data-variable="$navbar-light-color" data-default="rgba($black, .5)" title="CSS value: rgba(0, 0, 0, 0.5)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.5);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($black, .7)" for="variable-navbar-light-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-hover-color" id="variable-navbar-light-hover-color" placeholder="Hover text color" value="rgba(0, 0, 0, 0.7)" data-computed="rgba(0, 0, 0, 0.7)" data-variable="$navbar-light-hover-color" data-default="rgba($black, .7)" title="CSS value: rgba(0, 0, 0, 0.7)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.7);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($black, .9)" for="variable-navbar-light-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-active-color" id="variable-navbar-light-active-color" placeholder="Active text color" value="rgba(0, 0, 0, 0.9)" data-computed="rgba(0, 0, 0, 0.9)" data-variable="$navbar-light-active-color" data-default="rgba($black, .9)" title="CSS value: rgba(0, 0, 0, 0.9)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.9);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($black, .3)" for="variable-navbar-light-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-disabled-color" id="variable-navbar-light-disabled-color" placeholder="Disabled text color" value="rgba(0, 0, 0, 0.3)" data-computed="rgba(0, 0, 0, 0.3)" data-variable="$navbar-light-disabled-color" data-default="rgba($black, .3)" title="CSS value: rgba(0, 0, 0, 0.3)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.3);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-navbar-light-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-bg" id="variable-navbar-light-bg" placeholder="Background color" value="transparent" data-computed="transparent" data-variable="$navbar-light-bg" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(0, 0, 0, .1)" for="variable-navbar-light-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-hover-bg" id="variable-navbar-light-hover-bg" placeholder="Hover background color" value="rgba(0, 0, 0, 0.1)" data-computed="rgba(0, 0, 0, 0.1)" data-variable="$navbar-light-hover-bg" data-default="rgba(0, 0, 0, .1)" title="CSS value: rgba(0, 0, 0, 0.1)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.1);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(0, 0, 0, .1)" for="variable-navbar-light-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-active-bg" id="variable-navbar-light-active-bg" placeholder="Active background color" value="rgba(0, 0, 0, 0.1)" data-computed="rgba(0, 0, 0, 0.1)" data-variable="$navbar-light-active-bg" data-default="rgba(0, 0, 0, .1)" title="CSS value: rgba(0, 0, 0, 0.1)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.1);"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-navbar-light-toggler-border-color"> Toggler border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-toggler-border-color" id="variable-navbar-light-toggler-border-color" placeholder="Toggler border color" value="transparent" data-computed="transparent" data-variable="$navbar-light-toggler-border-color" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$navbar-light-active-color" for="variable-navbar-light-brand-color"> Brand color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-brand-color" id="variable-navbar-light-brand-color" placeholder="Brand color" value="rgba(0, 0, 0, 0.9)" data-computed="rgba(0, 0, 0, 0.9)" data-variable="$navbar-light-brand-color" data-default="$navbar-light-active-color" title="CSS value: rgba(0, 0, 0, 0.9)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.9);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$navbar-light-active-color" for="variable-navbar-light-brand-hover-color"> Brand hover color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-navbar-light-brand-hover-color" id="variable-navbar-light-brand-hover-color" placeholder="Brand hover color" value="rgba(0, 0, 0, 0.9)" data-computed="rgba(0, 0, 0, 0.9)" data-variable="$navbar-light-brand-hover-color" data-default="$navbar-light-active-color" title="CSS value: rgba(0, 0, 0, 0.9)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.9);"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-nav-pills" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Nav pills</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-nav-pills-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-nav-pills-bg" id="variable-nav-pills-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$nav-pills-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$primary" for="variable-nav-pills-link-color"> Link text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-nav-pills-link-color" id="variable-nav-pills-link-color" placeholder="Link text color" value="#5e72e4" data-computed="#5e72e4" data-variable="$nav-pills-link-color" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="darken($primary, 5%)" for="variable-nav-pills-link-hover-color"> Hover Link text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-nav-pills-link-hover-color" id="variable-nav-pills-link-hover-color" placeholder="Hover Link text color" value="#485fe0" data-computed="#485fe0" data-variable="$nav-pills-link-hover-color" data-default="darken($primary, 5%)" title="CSS value: #485fe0" > <i class="element-color__open-picker" style="background-color: #485fe0;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$primary" for="variable-nav-pills-link-active-bg"> Active link background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-nav-pills-link-active-bg" id="variable-nav-pills-link-active-bg" placeholder="Active link background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$nav-pills-link-active-bg" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="color-yiq($primary)" for="variable-nav-pills-link-active-color"> Active link text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-nav-pills-link-active-color" id="variable-nav-pills-link-active-color" placeholder="Active link text color" value="#fff" data-computed="#fff" data-variable="$nav-pills-link-active-color" data-default="color-yiq($primary)" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-nav-pills-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-nav-pills-border-radius" id="variable-nav-pills-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$nav-pills-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$btn-box-shadow" for="variable-nav-pills-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-nav-pills-box-shadow" id="variable-nav-pills-box-shadow" placeholder="Box shadow" value="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-computed="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-variable="$nav-pills-box-shadow" data-default="$btn-box-shadow" title="CSS value: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".75rem" for="variable-nav-pills-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-nav-pills-padding-y" id="variable-nav-pills-padding-y" placeholder="Padding y (vertical)" value="0.75rem" data-computed="0.75rem" data-variable="$nav-pills-padding-y" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-nav-pills-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-nav-pills-padding-x" id="variable-nav-pills-padding-x" placeholder="Padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$nav-pills-padding-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-nav-pills-space-x"> Padding between tabs (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-nav-pills-space-x" id="variable-nav-pills-space-x" placeholder="Padding between tabs (horizontal)" value="1rem" data-computed="1rem" data-variable="$nav-pills-space-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-breadcrumb" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Breadcrumb</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-breadcrumb-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-breadcrumb-bg" id="variable-breadcrumb-bg" placeholder="Background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$breadcrumb-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-breadcrumb-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-breadcrumb-active-color" id="variable-breadcrumb-active-color" placeholder="Active text color" value="#8898aa" data-computed="#8898aa" data-variable="$breadcrumb-active-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="quote("/")" for="variable-breadcrumb-divider"> Divider </label> <input type="text" class="form-control variable-breadcrumb-divider" id="variable-breadcrumb-divider" placeholder="Divider" value="/" data-computed="/" data-variable="$breadcrumb-divider" data-default="quote("/")" title="CSS value: /" > </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-breadcrumb-divider-color"> Divider color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-breadcrumb-divider-color" id="variable-breadcrumb-divider-color" placeholder="Divider color" value="#8898aa" data-computed="#8898aa" data-variable="$breadcrumb-divider-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".75rem" for="variable-breadcrumb-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-breadcrumb-padding-y" id="variable-breadcrumb-padding-y" placeholder="Padding y (vertical)" value="0.75rem" data-computed="0.75rem" data-variable="$breadcrumb-padding-y" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-breadcrumb-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-breadcrumb-padding-x" id="variable-breadcrumb-padding-x" placeholder="Padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$breadcrumb-padding-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5rem" for="variable-breadcrumb-item-padding"> Items padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-breadcrumb-item-padding" id="variable-breadcrumb-item-padding" placeholder="Items padding x (horizontal)" value="0.5rem" data-computed="0.5rem" data-variable="$breadcrumb-item-padding" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-breadcrumb-margin-bottom"> Margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-breadcrumb-margin-bottom" id="variable-breadcrumb-margin-bottom" placeholder="Margin bottom" value="1rem" data-computed="1rem" data-variable="$breadcrumb-margin-bottom" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-breadcrumb-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-breadcrumb-border-radius" id="variable-breadcrumb-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$breadcrumb-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-pagination" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Pagination</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-pagination-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-bg" id="variable-pagination-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$pagination-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-pagination-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-color" id="variable-pagination-color" placeholder="Text color" value="#8898aa" data-computed="#8898aa" data-variable="$pagination-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-pagination-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-border-color" id="variable-pagination-border-color" placeholder="Border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$pagination-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-pagination-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-pagination-border-width" id="variable-pagination-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$pagination-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-pagination-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-hover-bg" id="variable-pagination-hover-bg" placeholder="Hover background color" value="#dee2e6" data-computed="#dee2e6" data-variable="$pagination-hover-bg" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-pagination-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-hover-color" id="variable-pagination-hover-color" placeholder="Hover text color" value="#8898aa" data-computed="#8898aa" data-variable="$pagination-hover-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-pagination-hover-border-color"> Hover border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-hover-border-color" id="variable-pagination-hover-border-color" placeholder="Hover border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$pagination-hover-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-pagination-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-active-bg" id="variable-pagination-active-bg" placeholder="Active background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$pagination-active-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-color" for="variable-pagination-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-active-color" id="variable-pagination-active-color" placeholder="Active text color" value="#fff" data-computed="#fff" data-variable="$pagination-active-color" data-default="$component-active-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$pagination-active-bg" for="variable-pagination-active-border-color"> Active border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-active-border-color" id="variable-pagination-active-border-color" placeholder="Active border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$pagination-active-border-color" data-default="$pagination-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$btn-hover-box-shadow" for="variable-pagination-active-box-shadow"> Active box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-pagination-active-box-shadow" id="variable-pagination-active-box-shadow" placeholder="Active box shadow" value="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-computed="0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" data-variable="$pagination-active-box-shadow" data-default="$btn-hover-box-shadow" title="CSS value: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-pagination-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-disabled-bg" id="variable-pagination-disabled-bg" placeholder="Disabled background color" value="#fff" data-computed="#fff" data-variable="$pagination-disabled-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-pagination-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-disabled-color" id="variable-pagination-disabled-color" placeholder="Disabled text color" value="#8898aa" data-computed="#8898aa" data-variable="$pagination-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-pagination-disabled-border-color"> Disabled border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-pagination-disabled-border-color" id="variable-pagination-disabled-border-color" placeholder="Disabled border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$pagination-disabled-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-focus-box-shadow" for="variable-pagination-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-pagination-focus-box-shadow" id="variable-pagination-focus-box-shadow" placeholder="Focus box shadow" value="$input-btn-focus-box-shadow" data-computed="$input-btn-focus-box-shadow" data-variable="$pagination-focus-box-shadow" data-default="$input-btn-focus-box-shadow" title="CSS value: $input-btn-focus-box-shadow" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-pagination-focus-outline"> Focus outline </label> <input type="text" class="form-control variable-pagination-focus-outline" id="variable-pagination-focus-outline" placeholder="Focus outline" value="0" data-computed="0" data-variable="$pagination-focus-outline" data-default="0" title="CSS value: 0" > </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-cards" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Cards</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-card-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-card-bg" id="variable-card-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$card-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$box-shadow" for="variable-card-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-card-box-shadow" id="variable-card-box-shadow" placeholder="Box shadow" value="0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" data-computed="0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" data-variable="$card-box-shadow" data-default="$box-shadow" title="CSS value: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba($black, .05)" for="variable-card-border-color"> Border color (used when shadows are disabled) </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-card-border-color" id="variable-card-border-color" placeholder="Border color (used when shadows are disabled)" value="rgba(0, 0, 0, 0.05)" data-computed="rgba(0, 0, 0, 0.05)" data-variable="$card-border-color" data-default="rgba($black, .05)" title="CSS value: rgba(0, 0, 0, 0.05)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.05);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-card-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-border-width" id="variable-card-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$card-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-card-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-border-radius" id="variable-card-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$card-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="calc(#{$card-border-radius} - #{$card-border-width})" for="variable-card-inner-border-radius"> Inner border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-inner-border-radius" id="variable-card-inner-border-radius" placeholder="Inner border radius" value="calc(0.25rem - 0.0625rem)" data-computed="calc(0.25rem - 0.0625rem)" data-variable="$card-inner-border-radius" data-default="calc(#{$card-border-radius} - #{$card-border-width})" title="CSS value: calc(0.25rem - 0.0625rem)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-card-spacer-y"> Spacer y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-spacer-y" id="variable-card-spacer-y" placeholder="Spacer y (vertical)" value="1.25rem" data-computed="1.25rem" data-variable="$card-spacer-y" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5rem" for="variable-card-spacer-x"> Spacer x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-spacer-x" id="variable-card-spacer-x" placeholder="Spacer x (horizontal)" value="1.5rem" data-computed="1.5rem" data-variable="$card-spacer-x" data-default="1.5rem" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-card-img-overlay-padding"> Image overlay padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-img-overlay-padding" id="variable-card-img-overlay-padding" placeholder="Image overlay padding" value="1.25rem" data-computed="1.25rem" data-variable="$card-img-overlay-padding" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Full background cards</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="330px" for="variable-card-background-height"> Background height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-background-height" id="variable-card-background-height" placeholder="Background height" value="330px" data-computed="330px" data-variable="$card-background-height" data-default="330px" title="CSS value: 330px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="380px" for="variable-card-background-height-sm"> Background height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-background-height-sm" id="variable-card-background-height-sm" placeholder="Background height small" value="380px" data-computed="380px" data-variable="$card-background-height-sm" data-default="380px" title="CSS value: 380px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="550px" for="variable-card-background-height-lg"> Background height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-background-height-lg" id="variable-card-background-height-lg" placeholder="Background height large" value="550px" data-computed="550px" data-variable="$card-background-height-lg" data-default="550px" title="CSS value: 550px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="10px" for="variable-margin-bottom"> Text margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-margin-bottom" id="variable-margin-bottom" placeholder="Text margin bottom" value="10px" data-computed="10px" data-variable="$margin-bottom" data-default="10px" title="CSS value: 10px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="30px" for="variable-margin-lg-vertical"> Card margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-margin-lg-vertical" id="variable-margin-lg-vertical" placeholder="Card margin bottom" value="30px" data-computed="30px" data-variable="$margin-lg-vertical" data-default="30px" title="CSS value: 30px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Card deck</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="($grid-gutter-width / 2)" for="variable-card-group-margin"> Group margin </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-group-margin" id="variable-card-group-margin" placeholder="Group margin" value="($grid-gutter-width / 2)" data-computed="($grid-gutter-width / 2)" data-variable="$card-group-margin" data-default="($grid-gutter-width / 2)" title="CSS value: ($grid-gutter-width / 2)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$card-group-margin" for="variable-card-deck-margin"> Card margin </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-deck-margin" id="variable-card-deck-margin" placeholder="Card margin" value="$card-group-margin" data-computed="$card-group-margin" data-variable="$card-deck-margin" data-default="$card-group-margin" title="CSS value: $card-group-margin" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Card columns</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="3" for="variable-card-columns-count"> Columns count </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-columns-count" id="variable-card-columns-count" placeholder="Columns count" value="3" data-computed="3" data-variable="$card-columns-count" data-default="3" title="CSS value: 3" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-card-columns-gap"> Columns gap </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-columns-gap" id="variable-card-columns-gap" placeholder="Columns gap" value="1.25rem" data-computed="1.25rem" data-variable="$card-columns-gap" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$card-spacer-y" for="variable-card-columns-margin"> Columns margin vertical </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-card-columns-margin" id="variable-card-columns-margin" placeholder="Columns margin vertical" value="1.25rem" data-computed="1.25rem" data-variable="$card-columns-margin" data-default="$card-spacer-y" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Rotating card</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="cubic-bezier(0.34, 1.45, 0.7, 1)" for="variable-transition-bezier-rotating-card"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-transition-bezier-rotating-card" id="variable-transition-bezier-rotating-card" placeholder="Transition" value="cubic-bezier(0.34, 1.45, 0.7, 1)" data-computed="cubic-bezier(0.34, 1.45, 0.7, 1)" data-variable="$transition-bezier-rotating-card" data-default="cubic-bezier(0.34, 1.45, 0.7, 1)" title="CSS value: cubic-bezier(0.34, 1.45, 0.7, 1)" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-carousel" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Carousel</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-carousel-caption-color"> Caption description text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-carousel-caption-color" id="variable-carousel-caption-color" placeholder="Caption description text color" value="#fff" data-computed="#fff" data-variable="$carousel-caption-color" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="70%" for="variable-carousel-caption-width"> Caption width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-caption-width" id="variable-carousel-caption-width" placeholder="Caption width" value="70%" data-computed="70%" data-variable="$carousel-caption-width" data-default="70%" title="CSS value: 70%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-carousel-control-color"> Control color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-carousel-control-color" id="variable-carousel-control-color" placeholder="Control color" value="#fff" data-computed="#fff" data-variable="$carousel-control-color" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="15%" for="variable-carousel-control-width"> Control width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-control-width" id="variable-carousel-control-width" placeholder="Control width" value="15%" data-computed="15%" data-variable="$carousel-control-width" data-default="15%" title="CSS value: 15%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5" for="variable-carousel-control-opacity"> Control opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-control-opacity" id="variable-carousel-control-opacity" placeholder="Control opacity" value="0.5" data-computed="0.5" data-variable="$carousel-control-opacity" data-default=".5" title="CSS value: 0.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".9" for="variable-carousel-control-hover-opacity"> Control hover opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-control-hover-opacity" id="variable-carousel-control-hover-opacity" placeholder="Control hover opacity" value="0.9" data-computed="0.9" data-variable="$carousel-control-hover-opacity" data-default=".9" title="CSS value: 0.9" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="opacity .15s ease" for="variable-carousel-control-transition"> Control transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-carousel-control-transition" id="variable-carousel-control-transition" placeholder="Control transition" value="opacity 0.15s ease" data-computed="opacity 0.15s ease" data-variable="$carousel-control-transition" data-default="opacity .15s ease" title="CSS value: opacity 0.15s ease" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23")" for="variable-carousel-control-prev-icon-bg"> Previous icon background </label> <input type="text" class="form-control variable-carousel-control-prev-icon-bg" id="variable-carousel-control-prev-icon-bg" placeholder="Previous icon background" value="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>")" data-computed="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>")" data-variable="$carousel-control-prev-icon-bg" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>")" > </div> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23")" for="variable-carousel-control-next-icon-bg"> Next icon background </label> <input type="text" class="form-control variable-carousel-control-next-icon-bg" id="variable-carousel-control-next-icon-bg" placeholder="Next icon background" value="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>")" data-computed="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>")" data-variable="$carousel-control-next-icon-bg" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>")" > </div> <div class="form-group col-12"> <label data-default="20px" for="variable-carousel-control-icon-width"> Icon width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-control-icon-width" id="variable-carousel-control-icon-width" placeholder="Icon width" value="20px" data-computed="20px" data-variable="$carousel-control-icon-width" data-default="20px" title="CSS value: 20px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="30px" for="variable-carousel-indicator-width"> Indicator width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-indicator-width" id="variable-carousel-indicator-width" placeholder="Indicator width" value="30px" data-computed="30px" data-variable="$carousel-indicator-width" data-default="30px" title="CSS value: 30px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="3px" for="variable-carousel-indicator-height"> Indicator height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-indicator-height" id="variable-carousel-indicator-height" placeholder="Indicator height" value="3px" data-computed="3px" data-variable="$carousel-indicator-height" data-default="3px" title="CSS value: 3px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="10px" for="variable-carousel-indicator-hit-area-height"> Indicator hit area height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-indicator-hit-area-height" id="variable-carousel-indicator-hit-area-height" placeholder="Indicator hit area height" value="10px" data-computed="10px" data-variable="$carousel-indicator-hit-area-height" data-default="10px" title="CSS value: 10px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="3px" for="variable-carousel-indicator-spacer"> Indicator spacer </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-indicator-spacer" id="variable-carousel-indicator-spacer" placeholder="Indicator spacer" value="3px" data-computed="3px" data-variable="$carousel-indicator-spacer" data-default="3px" title="CSS value: 3px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$white" for="variable-carousel-indicator-active-bg"> Active indicator background </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-carousel-indicator-active-bg" id="variable-carousel-indicator-active-bg" placeholder="Active indicator background" value="#fff" data-computed="#fff" data-variable="$carousel-indicator-active-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="opacity .6s ease" for="variable-carousel-indicator-transition"> Indicator transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-carousel-indicator-transition" id="variable-carousel-indicator-transition" placeholder="Indicator transition" value="opacity 0.6s ease" data-computed="opacity 0.6s ease" data-variable="$carousel-indicator-transition" data-default="opacity .6s ease" title="CSS value: opacity 0.6s ease" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="transform $carousel-transition-duration ease-in-out" for="variable-carousel-transition"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-carousel-transition" id="variable-carousel-transition" placeholder="Transition" value="transform $carousel-transition-duration ease-in-out" data-computed="transform $carousel-transition-duration ease-in-out" data-variable="$carousel-transition" data-default="transform $carousel-transition-duration ease-in-out" title="CSS value: transform $carousel-transition-duration ease-in-out" > <i class="element-size__icon icon-to-end"></i> </div> </div> <div class="form-group col-12"> <label data-default=".6s" for="variable-carousel-transition-duration"> Transition duration </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-carousel-transition-duration" id="variable-carousel-transition-duration" placeholder="Transition duration" value="0.6s" data-computed="0.6s" data-variable="$carousel-transition-duration" data-default=".6s" title="CSS value: 0.6s" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-list-group" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">List group</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-list-group-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-bg" id="variable-list-group-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$list-group-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-100" for="variable-list-group-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-hover-bg" id="variable-list-group-hover-bg" placeholder="Hover background color" value="#f6f9fc" data-computed="#f6f9fc" data-variable="$list-group-hover-bg" data-default="$gray-100" title="CSS value: #f6f9fc" > <i class="element-color__open-picker" style="background-color: #f6f9fc;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$border-color" for="variable-list-group-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-border-color" id="variable-list-group-border-color" placeholder="Border color" value="#e9ecef" data-computed="#e9ecef" data-variable="$list-group-border-color" data-default="$border-color" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-list-group-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-list-group-border-width" id="variable-list-group-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$list-group-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-list-group-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-list-group-border-radius" id="variable-list-group-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$list-group-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-list-group-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-active-bg" id="variable-list-group-active-bg" placeholder="Active background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$list-group-active-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-color" for="variable-list-group-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-active-color" id="variable-list-group-active-color" placeholder="Active text color" value="#fff" data-computed="#fff" data-variable="$list-group-active-color" data-default="$component-active-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$list-group-active-bg" for="variable-list-group-active-border-color"> Active border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-active-border-color" id="variable-list-group-active-border-color" placeholder="Active border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$list-group-active-border-color" data-default="$list-group-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$list-group-bg" for="variable-list-group-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-disabled-bg" id="variable-list-group-disabled-bg" placeholder="Disabled background color" value="#fff" data-computed="#fff" data-variable="$list-group-disabled-bg" data-default="$list-group-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-list-group-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-disabled-color" id="variable-list-group-disabled-color" placeholder="Disabled text color" value="#8898aa" data-computed="#8898aa" data-variable="$list-group-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">List group items</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="1rem" for="variable-list-group-item-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-list-group-item-padding-y" id="variable-list-group-item-padding-y" placeholder="Padding y (vertical)" value="1rem" data-computed="1rem" data-variable="$list-group-item-padding-y" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-list-group-item-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-list-group-item-padding-x" id="variable-list-group-item-padding-x" placeholder="Padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$list-group-item-padding-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">List group actionable items</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$gray-700" for="variable-list-group-action-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-action-color" id="variable-list-group-action-color" placeholder="Text color" value="#525f7f" data-computed="#525f7f" data-variable="$list-group-action-color" data-default="$gray-700" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$list-group-action-color" for="variable-list-group-action-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-action-hover-color" id="variable-list-group-action-hover-color" placeholder="Hover text color" value="#525f7f" data-computed="#525f7f" data-variable="$list-group-action-hover-color" data-default="$list-group-action-color" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-list-group-action-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-action-active-bg" id="variable-list-group-action-active-bg" placeholder="Active background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$list-group-action-active-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$list-group-action-color" for="variable-list-group-action-active-color"> Active text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-list-group-action-active-color" id="variable-list-group-action-active-color" placeholder="Active text color" value="#525f7f" data-computed="#525f7f" data-variable="$list-group-action-active-color" data-default="$list-group-action-color" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-labels" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Labels</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".5rem" for="variable-label-margin-bottom"> Margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-label-margin-bottom" id="variable-label-margin-bottom" placeholder="Margin bottom" value="0.5rem" data-computed="0.5rem" data-variable="$label-margin-bottom" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-custom-control-label-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-label-disabled-color" id="variable-custom-control-label-disabled-color" placeholder="Disabled text color" value="#8898aa" data-computed="#8898aa" data-variable="$custom-control-label-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-inputs" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Inputs</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-input-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-bg" id="variable-input-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$input-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-input-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-color" id="variable-input-color" placeholder="Text color" value="#8898aa" data-computed="#8898aa" data-variable="$input-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-500" for="variable-input-placeholder-color"> Placeholder text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-placeholder-color" id="variable-input-placeholder-color" placeholder="Placeholder text color" value="#adb5bd" data-computed="#adb5bd" data-variable="$input-placeholder-color" data-default="$gray-500" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-500" for="variable-input-focus-placeholder-color"> Placeholder focus color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-focus-placeholder-color" id="variable-input-focus-placeholder-color" placeholder="Placeholder focus color" value="#adb5bd" data-computed="#adb5bd" data-variable="$input-focus-placeholder-color" data-default="$gray-500" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-input-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-disabled-bg" id="variable-input-disabled-bg" placeholder="Disabled background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$input-disabled-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="#EDF0F5" for="variable-input-muted-bg"> Muted background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-muted-bg" id="variable-input-muted-bg" placeholder="Muted background color" value="#EDF0F5" data-computed="#EDF0F5" data-variable="$input-muted-bg" data-default="#EDF0F5" title="CSS value: #EDF0F5" > <i class="element-color__open-picker" style="background-color: #EDF0F5;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$body-color" for="variable-input-plaintext-color"> Plaintext "input" text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-plaintext-color" id="variable-input-plaintext-color" placeholder="Plaintext "input" text color" value="#525f7f" data-computed="#525f7f" data-variable="$input-plaintext-color" data-default="$body-color" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="#cad1d7" for="variable-input-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-border-color" id="variable-input-border-color" placeholder="Border color" value="#cad1d7" data-computed="#cad1d7" data-variable="$input-border-color" data-default="#cad1d7" title="CSS value: #cad1d7" > <i class="element-color__open-picker" style="background-color: #cad1d7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-border-width" for="variable-input-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-border-width" id="variable-input-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$input-border-width" data-default="$input-btn-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="($input-border-width * 2)" for="variable-input-height-border"> Border height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-height-border" id="variable-input-height-border" placeholder="Border height" value="2px" data-computed="2px" data-variable="$input-height-border" data-default="($input-border-width * 2)" title="CSS value: 2px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-input-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-border-radius" id="variable-input-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$input-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-sm" for="variable-input-border-radius-sm"> Border radius small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-border-radius-sm" id="variable-input-border-radius-sm" placeholder="Border radius small" value="0.2rem" data-computed="0.2rem" data-variable="$input-border-radius-sm" data-default="$border-radius-sm" title="CSS value: 0.2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-lg" for="variable-input-border-radius-lg"> Border radius large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-border-radius-lg" id="variable-input-border-radius-lg" placeholder="Border radius large" value="0.3rem" data-computed="0.3rem" data-variable="$input-border-radius-lg" data-default="$border-radius-lg" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-xl" for="variable-input-border-radius-xl"> Border radius xl </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-border-radius-xl" id="variable-input-border-radius-xl" placeholder="Border radius xl" value="0.35rem" data-computed="0.35rem" data-variable="$input-border-radius-xl" data-default="$border-radius-xl" title="CSS value: 0.35rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="none" for="variable-input-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-input-box-shadow" id="variable-input-box-shadow" placeholder="Box shadow" value="none" data-computed="none" data-variable="$input-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-input-focus-bg"> Focus background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-focus-bg" id="variable-input-focus-bg" placeholder="Focus background color" value="#fff" data-computed="#fff" data-variable="$input-focus-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-input-focus-width"> Focus width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-focus-width" id="variable-input-focus-width" placeholder="Focus width" value="0" data-computed="0" data-variable="$input-focus-width" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-color" for="variable-input-focus-color"> Focus color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-focus-color" id="variable-input-focus-color" placeholder="Focus color" value="#8898aa" data-computed="#8898aa" data-variable="$input-focus-color" data-default="$input-color" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(50,151,211,.25)" for="variable-input-focus-border-color"> Focus border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-focus-border-color" id="variable-input-focus-border-color" placeholder="Focus border color" value="rgba(50, 151, 211, 0.25)" data-computed="rgba(50, 151, 211, 0.25)" data-variable="$input-focus-border-color" data-default="rgba(50,151,211,.25)" title="CSS value: rgba(50, 151, 211, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(50, 151, 211, 0.25);"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-input-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-input-focus-box-shadow" id="variable-input-focus-box-shadow" placeholder="Focus box shadow" value="none" data-computed="none" data-variable="$input-focus-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02)" for="variable-input-alternative-box-shadow"> Alternative box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-input-alternative-box-shadow" id="variable-input-alternative-box-shadow" placeholder="Alternative box shadow" value="0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02)" data-computed="0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02)" data-variable="$input-alternative-box-shadow" data-default="0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02)" title="CSS value: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)" for="variable-input-focus-alternative-box-shadow"> Alternative focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-input-focus-alternative-box-shadow" id="variable-input-focus-alternative-box-shadow" placeholder="Alternative focus box shadow" value="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-computed="0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" data-variable="$input-focus-alternative-box-shadow" data-default="0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)" title="CSS value: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label> Transition </label> <p class="element-note">To change the transition of the inputs and maintain consistency, please go to <a href="#" data-search-category="general" data-search-variable="$transition-base">$transition-base</a> and change its value.</p> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label> Font size </label> <p class="element-note">To change the font size of the inputs and maintain consistency, please go to <a href="#" data-search-category="form-buttons" data-search-variable="$input-btn-font-size">$input-btn-font-size</a> and change its value.</p> </div> <div class="form-group col-12"> <label data-default="$input-btn-font-size-sm" for="variable-input-font-size-sm"> Font size small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-font-size-sm" id="variable-input-font-size-sm" placeholder="Font size small" value="0.75rem" data-computed="0.75rem" data-variable="$input-font-size-sm" data-default="$input-btn-font-size-sm" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-font-size-lg" for="variable-input-font-size-lg"> Font size large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-font-size-lg" id="variable-input-font-size-lg" placeholder="Font size large" value="0.875rem" data-computed="0.875rem" data-variable="$input-font-size-lg" data-default="$input-btn-font-size-lg" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$font-weight-base" for="variable-input-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-font-weight" id="variable-input-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$input-font-weight" data-default="$font-weight-base" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-padding-y" for="variable-input-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-y" id="variable-input-padding-y" placeholder="Padding y (vertical)" value="0.625rem" data-computed="0.625rem" data-variable="$input-padding-y" data-default="$input-btn-padding-y" title="CSS value: 0.625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x" for="variable-input-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-x" id="variable-input-padding-x" placeholder="Padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$input-padding-x" data-default="$input-btn-padding-x" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-padding-y-sm" for="variable-input-padding-y-sm"> Padding y small (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-y-sm" id="variable-input-padding-y-sm" placeholder="Padding y small (vertical)" value="0.25rem" data-computed="0.25rem" data-variable="$input-padding-y-sm" data-default="$input-btn-padding-y-sm" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x-sm" for="variable-input-padding-x-sm"> Padding x small (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-x-sm" id="variable-input-padding-x-sm" placeholder="Padding x small (horizontal)" value="0.5rem" data-computed="0.5rem" data-variable="$input-padding-x-sm" data-default="$input-btn-padding-x-sm" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-padding-y-lg" for="variable-input-padding-y-lg"> Padding y large (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-y-lg" id="variable-input-padding-y-lg" placeholder="Padding y large (vertical)" value="0.875rem" data-computed="0.875rem" data-variable="$input-padding-y-lg" data-default="$input-btn-padding-y-lg" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x-lg" for="variable-input-padding-x-lg"> Padding x large (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-padding-x-lg" id="variable-input-padding-x-lg" placeholder="Padding x large (horizontal)" value="1rem" data-computed="1rem" data-variable="$input-padding-x-lg" data-default="$input-btn-padding-x-lg" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-line-height" for="variable-input-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-line-height" id="variable-input-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$input-line-height" data-default="$input-btn-line-height" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-line-height-sm" for="variable-input-line-height-sm"> Line height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-line-height-sm" id="variable-input-line-height-sm" placeholder="Line height small" value="1.5" data-computed="1.5" data-variable="$input-line-height-sm" data-default="$input-btn-line-height-sm" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-line-height-lg" for="variable-input-line-height-lg"> Line height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-line-height-lg" id="variable-input-line-height-lg" placeholder="Line height large" value="1.5" data-computed="1.5" data-variable="$input-line-height-lg" data-default="$input-btn-line-height-lg" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border})" for="variable-input-height"> Height </label> <input type="text" class="form-control variable-input-height" id="variable-input-height" placeholder="Height" value="calc(1.5em + 1.25rem + 2px)" data-computed="calc(1.5em + 1.25rem + 2px)" data-variable="$input-height" data-default="calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border})" title="CSS value: calc(1.5em + 1.25rem + 2px)" > </div> <div class="form-group col-12"> <label data-default="calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border})" for="variable-input-height-sm"> Height small </label> <input type="text" class="form-control variable-input-height-sm" id="variable-input-height-sm" placeholder="Height small" value="calc(1.5em + 0.5rem + 2px)" data-computed="calc(1.5em + 0.5rem + 2px)" data-variable="$input-height-sm" data-default="calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border})" title="CSS value: calc(1.5em + 0.5rem + 2px)" > </div> <div class="form-group col-12"> <label data-default="calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border})" for="variable-input-height-lg"> Height large </label> <input type="text" class="form-control variable-input-height-lg" id="variable-input-height-lg" placeholder="Height large" value="calc(1.5em + 1.75rem + 2px)" data-computed="calc(1.5em + 1.75rem + 2px)" data-variable="$input-height-lg" data-default="calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border})" title="CSS value: calc(1.5em + 1.75rem + 2px)" > </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Checkboxes and radios</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default=".3rem" for="variable-form-check-input-margin-y"> Margin top </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-form-check-input-margin-y" id="variable-form-check-input-margin-y" placeholder="Margin top" value="0.3rem" data-computed="0.3rem" data-variable="$form-check-input-margin-y" data-default=".3rem" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-form-check-input-gutter"> Space for indicator </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-form-check-input-gutter" id="variable-form-check-input-gutter" placeholder="Space for indicator" value="1.25rem" data-computed="1.25rem" data-variable="$form-check-input-gutter" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-form-check-input-margin-x"> Indicator margin right if .form-inline </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-form-check-input-margin-x" id="variable-form-check-input-margin-x" placeholder="Indicator margin right if .form-inline" value="0.25rem" data-computed="0.25rem" data-variable="$form-check-input-margin-x" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-form-buttons" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Buttons</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".875rem" for="variable-input-btn-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-font-size" id="variable-input-btn-font-size" placeholder="Font size" value="0.875rem" data-computed="0.875rem" data-variable="$input-btn-font-size" data-default=".875rem" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-input-btn-font-size-sm"> Font size small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-font-size-sm" id="variable-input-btn-font-size-sm" placeholder="Font size small" value="0.75rem" data-computed="0.75rem" data-variable="$input-btn-font-size-sm" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".875rem" for="variable-input-btn-font-size-lg"> Font size large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-font-size-lg" id="variable-input-btn-font-size-lg" placeholder="Font size large" value="0.875rem" data-computed="0.875rem" data-variable="$input-btn-font-size-lg" data-default=".875rem" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1px" for="variable-input-btn-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-border-width" id="variable-input-btn-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$input-btn-border-width" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-input-btn-focus-width"> Focus width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-focus-width" id="variable-input-btn-focus-width" placeholder="Focus width" value="0" data-computed="0" data-variable="$input-btn-focus-width" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($component-active-bg, 1)" for="variable-input-btn-focus-color"> Focus color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-btn-focus-color" id="variable-input-btn-focus-color" placeholder="Focus color" value="#5e72e4" data-computed="#5e72e4" data-variable="$input-btn-focus-color" data-default="rgba($component-active-bg, 1)" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-input-btn-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-input-btn-focus-box-shadow" id="variable-input-btn-focus-box-shadow" placeholder="Focus box shadow" value="none" data-computed="none" data-variable="$input-btn-focus-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".625rem" for="variable-input-btn-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-y" id="variable-input-btn-padding-y" placeholder="Padding y (vertical)" value="0.625rem" data-computed="0.625rem" data-variable="$input-btn-padding-y" data-default=".625rem" title="CSS value: 0.625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-input-btn-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-x" id="variable-input-btn-padding-x" placeholder="Padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$input-btn-padding-x" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".25rem" for="variable-input-btn-padding-y-sm"> Padding y small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-y-sm" id="variable-input-btn-padding-y-sm" placeholder="Padding y small" value="0.25rem" data-computed="0.25rem" data-variable="$input-btn-padding-y-sm" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5rem" for="variable-input-btn-padding-x-sm"> Padding x small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-x-sm" id="variable-input-btn-padding-x-sm" placeholder="Padding x small" value="0.5rem" data-computed="0.5rem" data-variable="$input-btn-padding-x-sm" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".875rem" for="variable-input-btn-padding-y-lg"> Padding y large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-y-lg" id="variable-input-btn-padding-y-lg" placeholder="Padding y large" value="0.875rem" data-computed="0.875rem" data-variable="$input-btn-padding-y-lg" data-default=".875rem" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-input-btn-padding-x-lg"> Padding x large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-padding-x-lg" id="variable-input-btn-padding-x-lg" placeholder="Padding x large" value="1rem" data-computed="1rem" data-variable="$input-btn-padding-x-lg" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$shape-height-base" for="variable-input-btn-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-line-height" id="variable-input-btn-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$input-btn-line-height" data-default="$shape-height-base" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$shape-height-sm" for="variable-input-btn-line-height-sm"> Line height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-line-height-sm" id="variable-input-btn-line-height-sm" placeholder="Line height small" value="1.5" data-computed="1.5" data-variable="$input-btn-line-height-sm" data-default="$shape-height-sm" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$shape-height-lg" for="variable-input-btn-line-height-lg"> Line height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-input-btn-line-height-lg" id="variable-input-btn-line-height-lg" placeholder="Line height large" value="1.5" data-computed="1.5" data-variable="$input-btn-line-height-lg" data-default="$shape-height-lg" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-validation" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Validation</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="lighten($success, 15%)" for="variable-form-feedback-valid-bg"> Valid icon background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-form-feedback-valid-bg" id="variable-form-feedback-valid-bg" placeholder="Valid icon background color" value="#69deac" data-computed="#69deac" data-variable="$form-feedback-valid-bg" data-default="lighten($success, 15%)" title="CSS value: #69deac" > <i class="element-color__open-picker" style="background-color: #69deac;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$success" for="variable-form-feedback-valid-color"> Valid text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-form-feedback-valid-color" id="variable-form-feedback-valid-color" placeholder="Valid text color" value="#2dce89" data-computed="#2dce89" data-variable="$form-feedback-valid-color" data-default="$success" title="CSS value: #2dce89" > <i class="element-color__open-picker" style="background-color: #2dce89;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="lighten($warning, 15%)" for="variable-form-feedback-invalid-bg"> Invalid icon background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-form-feedback-invalid-bg" id="variable-form-feedback-invalid-bg" placeholder="Invalid icon background color" value="#fda08b" data-computed="#fda08b" data-variable="$form-feedback-invalid-bg" data-default="lighten($warning, 15%)" title="CSS value: #fda08b" > <i class="element-color__open-picker" style="background-color: #fda08b;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$danger" for="variable-form-feedback-invalid-color"> Invalid text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-form-feedback-invalid-color" id="variable-form-feedback-invalid-color" placeholder="Invalid text color" value="#fb6340" data-computed="#fb6340" data-variable="$form-feedback-invalid-color" data-default="$danger" title="CSS value: #fb6340" > <i class="element-color__open-picker" style="background-color: #fb6340;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-groups" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Input groups</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-bg" for="variable-input-group-addon-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-bg" id="variable-input-group-addon-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$input-group-addon-bg" data-default="$input-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-placeholder-color" for="variable-input-group-addon-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-color" id="variable-input-group-addon-color" placeholder="Text color" value="#adb5bd" data-computed="#adb5bd" data-variable="$input-group-addon-color" data-default="$input-placeholder-color" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-color" for="variable-input-group-addon-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-border-color" id="variable-input-group-addon-border-color" placeholder="Border color" value="#cad1d7" data-computed="#cad1d7" data-variable="$input-group-addon-border-color" data-default="$input-border-color" title="CSS value: #cad1d7" > <i class="element-color__open-picker" style="background-color: #cad1d7;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-focus-color" for="variable-input-group-addon-focus-color"> Focus color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-focus-color" id="variable-input-group-addon-focus-color" placeholder="Focus color" value="#8898aa" data-computed="#8898aa" data-variable="$input-group-addon-focus-color" data-default="$input-focus-color" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-focus-bg" for="variable-input-group-addon-focus-bg"> Focus background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-focus-bg" id="variable-input-group-addon-focus-bg" placeholder="Focus background color" value="#fff" data-computed="#fff" data-variable="$input-group-addon-focus-bg" data-default="$input-focus-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-focus-border-color" for="variable-input-group-addon-focus-border-color"> Focus border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-input-group-addon-focus-border-color" id="variable-input-group-addon-focus-border-color" placeholder="Focus border color" value="rgba(50, 151, 211, 0.25)" data-computed="rgba(50, 151, 211, 0.25)" data-variable="$input-group-addon-focus-border-color" data-default="$input-focus-border-color" title="CSS value: rgba(50, 151, 211, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(50, 151, 211, 0.25);"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-form-group-margin-bottom"> Group margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-form-group-margin-bottom" id="variable-form-group-margin-bottom" placeholder="Group margin bottom" value="1rem" data-computed="1rem" data-variable="$form-group-margin-bottom" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-form-text-margin-top"> Help text margin top </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-form-text-margin-top" id="variable-form-text-margin-top" placeholder="Help text margin top" value="0.25rem" data-computed="0.25rem" data-variable="$form-text-margin-top" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-custom-controls" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Custom controls</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-custom-control-indicator-size"> Indicator size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-control-indicator-size" id="variable-custom-control-indicator-size" placeholder="Indicator size" value="1.25rem" data-computed="1.25rem" data-variable="$custom-control-indicator-size" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="50% 50%" for="variable-custom-control-indicator-bg-size"> Indicator icon size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-control-indicator-bg-size" id="variable-custom-control-indicator-bg-size" placeholder="Indicator icon size" value="50% 50%" data-computed="50% 50%" data-variable="$custom-control-indicator-bg-size" data-default="50% 50%" title="CSS value: 50% 50%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-bg" for="variable-custom-control-indicator-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-bg" id="variable-custom-control-indicator-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$custom-control-indicator-bg" data-default="$input-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-custom-control-indicator-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-control-indicator-box-shadow" id="variable-custom-control-indicator-box-shadow" placeholder="Box shadow" value="none" data-computed="none" data-variable="$custom-control-indicator-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-border-color" for="variable-custom-control-indicator-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-border-color" id="variable-custom-control-indicator-border-color" placeholder="Border color" value="#cad1d7" data-computed="#cad1d7" data-variable="$custom-control-indicator-border-color" data-default="$input-border-color" title="CSS value: #cad1d7" > <i class="element-color__open-picker" style="background-color: #cad1d7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="1px" for="variable-custom-control-indicator-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-control-indicator-border-width" id="variable-custom-control-indicator-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$custom-control-indicator-border-width" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-custom-control-indicator-checked-bg"> Checked background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-checked-bg" id="variable-custom-control-indicator-checked-bg" placeholder="Checked background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-control-indicator-checked-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-color" for="variable-custom-control-indicator-checked-color"> Checked icon color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-checked-color" id="variable-custom-control-indicator-checked-color" placeholder="Checked icon color" value="#fff" data-computed="#fff" data-variable="$custom-control-indicator-checked-color" data-default="$component-active-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-control-indicator-box-shadow" for="variable-custom-control-indicator-checked-box-shadow"> Checked box shadow </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-checked-box-shadow" id="variable-custom-control-indicator-checked-box-shadow" placeholder="Checked box shadow" value="none" data-computed="none" data-variable="$custom-control-indicator-checked-box-shadow" data-default="$custom-control-indicator-box-shadow" title="CSS value: none" > <i class="element-color__open-picker" style="background-color: none;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-border-color" for="variable-custom-control-indicator-checked-border-color"> Checked border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-checked-border-color" id="variable-custom-control-indicator-checked-border-color" placeholder="Checked border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-control-indicator-checked-border-color" data-default="$component-active-border-color" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-custom-control-indicator-active-bg"> Clicked background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-active-bg" id="variable-custom-control-indicator-active-bg" placeholder="Clicked background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-control-indicator-active-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-color" for="variable-custom-control-indicator-active-color"> Clicked icon color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-active-color" id="variable-custom-control-indicator-active-color" placeholder="Clicked icon color" value="#fff" data-computed="#fff" data-variable="$custom-control-indicator-active-color" data-default="$component-active-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-control-indicator-box-shadow" for="variable-custom-control-indicator-active-box-shadow"> Clicked box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-control-indicator-active-box-shadow" id="variable-custom-control-indicator-active-box-shadow" placeholder="Clicked box shadow" value="none" data-computed="none" data-variable="$custom-control-indicator-active-box-shadow" data-default="$custom-control-indicator-box-shadow" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-border-color" for="variable-custom-control-indicator-active-border-color"> Clicked border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-active-border-color" id="variable-custom-control-indicator-active-border-color" placeholder="Clicked border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-control-indicator-active-border-color" data-default="$component-active-border-color" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-focus-box-shadow" for="variable-custom-control-indicator-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-control-indicator-focus-box-shadow" id="variable-custom-control-indicator-focus-box-shadow" placeholder="Focus box shadow" value="none" data-computed="none" data-variable="$custom-control-indicator-focus-box-shadow" data-default="$input-btn-focus-box-shadow" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-focus-border-color" for="variable-custom-control-indicator-focus-border-color"> Focus border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-focus-border-color" id="variable-custom-control-indicator-focus-border-color" placeholder="Focus border color" value="rgba(50, 151, 211, 0.25)" data-computed="rgba(50, 151, 211, 0.25)" data-variable="$custom-control-indicator-focus-border-color" data-default="$input-focus-border-color" title="CSS value: rgba(50, 151, 211, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(50, 151, 211, 0.25);"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-custom-control-indicator-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-disabled-bg" id="variable-custom-control-indicator-disabled-bg" placeholder="Disabled background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$custom-control-indicator-disabled-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($primary, .5)" for="variable-custom-control-indicator-checked-disabled-bg"> Disabled checked bg </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-control-indicator-checked-disabled-bg" id="variable-custom-control-indicator-checked-disabled-bg" placeholder="Disabled checked bg" value="rgba(94, 114, 228, 0.5)" data-computed="rgba(94, 114, 228, 0.5)" data-variable="$custom-control-indicator-checked-disabled-bg" data-default="rgba($primary, .5)" title="CSS value: rgba(94, 114, 228, 0.5)" > <i class="element-color__open-picker" style="background-color: rgba(94, 114, 228, 0.5);"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out" for="variable-custom-forms-transition"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-custom-forms-transition" id="variable-custom-forms-transition" placeholder="Transition" value="background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out" data-computed="background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out" data-variable="$custom-forms-transition" data-default="background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out" title="CSS value: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-custom-control-spacer-x"> Indicator margin right if .custom-control-inline </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-control-spacer-x" id="variable-custom-control-spacer-x" placeholder="Indicator margin right if .custom-control-inline" value="1rem" data-computed="1rem" data-variable="$custom-control-spacer-x" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Custom radio</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="50%" for="variable-custom-radio-indicator-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-radio-indicator-border-radius" id="variable-custom-radio-indicator-border-radius" placeholder="Border radius" value="50%" data-computed="50%" data-variable="$custom-radio-indicator-border-radius" data-default="50%" title="CSS value: 50%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23")" for="variable-custom-radio-indicator-icon-checked"> Checked icon </label> <input type="text" class="form-control variable-custom-radio-indicator-icon-checked" id="variable-custom-radio-indicator-icon-checked" placeholder="Checked icon" value="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>")" data-computed="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>")" data-variable="$custom-radio-indicator-icon-checked" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>")" > </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Custom toggle</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-custom-toggle-slider-bg"> Slider background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-toggle-slider-bg" id="variable-custom-toggle-slider-bg" placeholder="Slider background color" value="#ddd" data-computed="#ddd" data-variable="$custom-toggle-slider-bg" data-default="$gray-200" title="CSS value: #ddd" > <i class="element-color__open-picker" style="background-color: #ddd;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$primary" for="variable-custom-toggle-checked-bg"> Checked background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-toggle-checked-bg" id="variable-custom-toggle-checked-bg" placeholder="Checked background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-toggle-checked-bg" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-400" for="variable-custom-toggle-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-toggle-border-color" id="variable-custom-toggle-border-color" placeholder="Border color" value="#ced4da" data-computed="#ced4da" data-variable="$custom-toggle-border-color" data-default="$gray-400" title="CSS value: #ced4da" > <i class="element-color__open-picker" style="background-color: #ced4da;"></i> </div> </div> <div class="form-group col-12"> <label data-default="52px" for="variable-custom-toggle-width"> Width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-toggle-width" id="variable-custom-toggle-width" placeholder="Width" value="52px" data-computed="52px" data-variable="$custom-toggle-width" data-default="52px" title="CSS value: 52px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Custom checkbox</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="$border-radius-sm" for="variable-custom-checkbox-indicator-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-checkbox-indicator-border-radius" id="variable-custom-checkbox-indicator-border-radius" placeholder="Border radius" value="0.2rem" data-computed="0.2rem" data-variable="$custom-checkbox-indicator-border-radius" data-default="$border-radius-sm" title="CSS value: 0.2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23")" for="variable-custom-checkbox-indicator-icon-checked"> Checked icon </label> <input type="text" class="form-control variable-custom-checkbox-indicator-icon-checked" id="variable-custom-checkbox-indicator-icon-checked" placeholder="Checked icon" value="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23")" data-computed="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23")" data-variable="$custom-checkbox-indicator-icon-checked" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23")" > </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Indeterminate custom checkbox</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-custom-checkbox-indicator-indeterminate-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-checkbox-indicator-indeterminate-bg" id="variable-custom-checkbox-indicator-indeterminate-bg" placeholder="Background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-checkbox-indicator-indeterminate-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-checkbox-indicator-indeterminate-bg" for="variable-custom-checkbox-indicator-indeterminate-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-checkbox-indicator-indeterminate-border-color" id="variable-custom-checkbox-indicator-indeterminate-border-color" placeholder="Border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-checkbox-indicator-indeterminate-border-color" data-default="$custom-checkbox-indicator-indeterminate-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="none" for="variable-custom-checkbox-indicator-indeterminate-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-checkbox-indicator-indeterminate-box-shadow" id="variable-custom-checkbox-indicator-indeterminate-box-shadow" placeholder="Box shadow" value="none" data-computed="none" data-variable="$custom-checkbox-indicator-indeterminate-box-shadow" data-default="none" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23")" for="variable-custom-checkbox-indicator-icon-indeterminate"> Icon </label> <input type="text" class="form-control variable-custom-checkbox-indicator-icon-indeterminate" id="variable-custom-checkbox-indicator-icon-indeterminate" placeholder="Icon" value="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#fff' d='M0 2h4'/></svg>")" data-computed="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#fff' d='M0 2h4'/></svg>")" data-variable="$custom-checkbox-indicator-icon-indeterminate" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#fff' d='M0 2h4'/></svg>")" > </div> <div class="form-group col-12"> <label data-default="$custom-control-indicator-checked-color" for="variable-custom-checkbox-indicator-indeterminate-color"> Icon color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-checkbox-indicator-indeterminate-color" id="variable-custom-checkbox-indicator-indeterminate-color" placeholder="Icon color" value="#fff" data-computed="#fff" data-variable="$custom-checkbox-indicator-indeterminate-color" data-default="$custom-control-indicator-checked-color" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-6">Indicators color helpers</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="6"> <div class="form-group col-12"> <label data-default="$primary" for="variable-component-active-border-color"> Active border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-active-border-color" id="variable-component-active-border-color" placeholder="Active border color" value="#5e72e4" data-computed="#5e72e4" data-variable="$component-active-border-color" data-default="$primary" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-component-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-hover-bg" id="variable-component-hover-bg" placeholder="Hover background color" value="#dee2e6" data-computed="#dee2e6" data-variable="$component-hover-bg" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-component-hover-color"> Hover text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-hover-color" id="variable-component-hover-color" placeholder="Hover text color" value="#dee2e6" data-computed="#dee2e6" data-variable="$component-hover-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-component-hover-border-color"> Hover border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-component-hover-border-color" id="variable-component-hover-border-color" placeholder="Hover border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$component-hover-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-custom-select" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Custom select</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-bg" for="variable-custom-select-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-bg" id="variable-custom-select-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$custom-select-bg" data-default="$input-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size" for="variable-custom-select-background"> Background position </label> <input type="text" class="form-control variable-custom-select-background" id="variable-custom-select-background" placeholder="Background position" value="$custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size" data-computed="$custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size" data-variable="$custom-select-background" data-default="$custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size" title="CSS value: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size" > </div> <div class="form-group col-12"> <label data-default="$input-color" for="variable-custom-select-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-color" id="variable-custom-select-color" placeholder="Text color" value="#8898aa" data-computed="#8898aa" data-variable="$custom-select-color" data-default="$input-color" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-font-weight" for="variable-custom-select-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-font-weight" id="variable-custom-select-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$custom-select-font-weight" data-default="$input-font-weight" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-custom-select-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-disabled-bg" id="variable-custom-select-disabled-bg" placeholder="Disabled background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$custom-select-disabled-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-custom-select-disabled-color"> Disabled text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-disabled-color" id="variable-custom-select-disabled-color" placeholder="Disabled text color" value="#8898aa" data-computed="#8898aa" data-variable="$custom-select-disabled-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-border-color" for="variable-custom-select-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-border-color" id="variable-custom-select-border-color" placeholder="Border color" value="#cad1d7" data-computed="#cad1d7" data-variable="$custom-select-border-color" data-default="$input-border-color" title="CSS value: #cad1d7" > <i class="element-color__open-picker" style="background-color: #cad1d7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-width" for="variable-custom-select-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-border-width" id="variable-custom-select-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$custom-select-border-width" data-default="$input-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-custom-select-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-border-radius" id="variable-custom-select-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$custom-select-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="inset 0 1px 2px rgba($black, .075)" for="variable-custom-select-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-select-box-shadow" id="variable-custom-select-box-shadow" placeholder="Box shadow" value="inset 0 1px 2px rgba(0, 0, 0, 0.075)" data-computed="inset 0 1px 2px rgba(0, 0, 0, 0.075)" data-variable="$custom-select-box-shadow" data-default="inset 0 1px 2px rgba($black, .075)" title="CSS value: inset 0 1px 2px rgba(0, 0, 0, 0.075)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-focus-border-color" for="variable-custom-select-focus-border-color"> Focus border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-focus-border-color" id="variable-custom-select-focus-border-color" placeholder="Focus border color" value="rgba(50, 151, 211, 0.25)" data-computed="rgba(50, 151, 211, 0.25)" data-variable="$custom-select-focus-border-color" data-default="$input-focus-border-color" title="CSS value: rgba(50, 151, 211, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(50, 151, 211, 0.25);"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5)" for="variable-custom-select-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-select-focus-box-shadow" id="variable-custom-select-focus-box-shadow" placeholder="Focus box shadow" value="0 0 0 0 #5e72e4" data-computed="0 0 0 0 #5e72e4" data-variable="$custom-select-focus-box-shadow" data-default="0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5)" title="CSS value: 0 0 0 0 #5e72e4" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-focus-width" for="variable-custom-select-focus-width"> Focus width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-focus-width" id="variable-custom-select-focus-width" placeholder="Focus width" value="$input-focus-width" data-computed="$input-focus-width" data-variable="$custom-select-focus-width" data-default="$input-focus-width" title="CSS value: $input-focus-width" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-btn-padding-y" for="variable-custom-select-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-y" id="variable-custom-select-padding-y" placeholder="Padding y (vertical)" value="0.625rem" data-computed="0.625rem" data-variable="$custom-select-padding-y" data-default="$input-btn-padding-y" title="CSS value: 0.625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-padding-x" for="variable-custom-select-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-x" id="variable-custom-select-padding-x" placeholder="Padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$custom-select-padding-x" data-default="$input-btn-padding-x" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height" for="variable-custom-select-height"> Height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-height" id="variable-custom-select-height" placeholder="Height" value="calc(1.5em + 1.25rem + 2px)" data-computed="calc(1.5em + 1.25rem + 2px)" data-variable="$custom-select-height" data-default="$input-height" title="CSS value: calc(1.5em + 1.25rem + 2px)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-line-height" for="variable-custom-select-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-line-height" id="variable-custom-select-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$custom-select-line-height" data-default="$input-line-height" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding" for="variable-custom-select-feedback-icon-padding-right"> Feedback icon padding right </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-feedback-icon-padding-right" id="variable-custom-select-feedback-icon-padding-right" placeholder="Feedback icon padding right" value="calc(0.75em + 2.6875rem)" data-computed="calc(0.75em + 2.6875rem)" data-variable="$custom-select-feedback-icon-padding-right" data-default="$input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding" title="CSS value: calc(0.75em + 2.6875rem)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="center right ($custom-select-padding-x + $custom-select-indicator-padding)" for="variable-custom-select-feedback-icon-position"> Feedback icon position </label> <input type="text" class="form-control variable-custom-select-feedback-icon-position" id="variable-custom-select-feedback-icon-position" placeholder="Feedback icon position" value="center right 1.75rem" data-computed="center right 1.75rem" data-variable="$custom-select-feedback-icon-position" data-default="center right ($custom-select-padding-x + $custom-select-indicator-padding)" title="CSS value: center right 1.75rem" > </div> <div class="form-group col-12"> <label data-default="($input-height-inner / 2) ($input-height-inner / 2)" for="variable-custom-select-feedback-icon-size"> Feedback icon size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-feedback-icon-size" id="variable-custom-select-feedback-icon-size" placeholder="Feedback icon size" value="calc(0.75em + 0.625rem) calc(0.75em + 0.625rem)" data-computed="calc(0.75em + 0.625rem) calc(0.75em + 0.625rem)" data-variable="$custom-select-feedback-icon-size" data-default="($input-height-inner / 2) ($input-height-inner / 2)" title="CSS value: calc(0.75em + 0.625rem) calc(0.75em + 0.625rem)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Indicator</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23")" for="variable-custom-select-indicator"> Indicator </label> <input type="text" class="form-control variable-custom-select-indicator" id="variable-custom-select-indicator" placeholder="Indicator" value="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#32325d' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>")" data-computed="url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#32325d' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>")" data-variable="$custom-select-indicator" data-default="str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23")" title="CSS value: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#32325d' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>")" > </div> <div class="form-group col-12"> <label data-default="$gray-800" for="variable-custom-select-indicator-color"> Indicator color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-select-indicator-color" id="variable-custom-select-indicator-color" placeholder="Indicator color" value="#32325d" data-computed="#32325d" data-variable="$custom-select-indicator-color" data-default="$gray-800" title="CSS value: #32325d" > <i class="element-color__open-picker" style="background-color: #32325d;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height" for="variable-custom-select-indicator-padding"> Indicator padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-indicator-padding" id="variable-custom-select-indicator-padding" placeholder="Indicator padding" value="$input-height" data-computed="$input-height" data-variable="$custom-select-indicator-padding" data-default="$input-height" title="CSS value: $input-height" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="8px 10px" for="variable-custom-select-bg-size"> Indicator icon size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-bg-size" id="variable-custom-select-bg-size" placeholder="Indicator icon size" value="8px 10px" data-computed="8px 10px" data-variable="$custom-select-bg-size" data-default="8px 10px" title="CSS value: 8px 10px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Sizes</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$input-btn-font-size-sm" for="variable-custom-select-font-size-sm"> Font size small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-font-size-sm" id="variable-custom-select-font-size-sm" placeholder="Font size small" value="0.75rem" data-computed="0.75rem" data-variable="$custom-select-font-size-sm" data-default="$input-btn-font-size-sm" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-font-size-lg" for="variable-custom-select-font-size-lg"> Font size large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-font-size-lg" id="variable-custom-select-font-size-lg" placeholder="Font size large" value="0.875rem" data-computed="0.875rem" data-variable="$custom-select-font-size-lg" data-default="$input-btn-font-size-lg" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$input-padding-x-sm" for="variable-custom-select-padding-x-sm"> Padding x (horizontal) small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-x-sm" id="variable-custom-select-padding-x-sm" placeholder="Padding x (horizontal) small" value="0.5rem" data-computed="0.5rem" data-variable="$custom-select-padding-x-sm" data-default="$input-padding-x-sm" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-padding-y-sm" for="variable-custom-select-padding-y-sm"> Padding y (vertical) small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-y-sm" id="variable-custom-select-padding-y-sm" placeholder="Padding y (vertical) small" value="0.25rem" data-computed="0.25rem" data-variable="$custom-select-padding-y-sm" data-default="$input-padding-y-sm" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height-sm" for="variable-custom-select-height-sm"> Height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-height-sm" id="variable-custom-select-height-sm" placeholder="Height small" value="calc(1.5em + 0.5rem + 2px)" data-computed="calc(1.5em + 0.5rem + 2px)" data-variable="$custom-select-height-sm" data-default="$input-height-sm" title="CSS value: calc(1.5em + 0.5rem + 2px)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$input-padding-x-lg" for="variable-custom-select-padding-x-lg"> Padding x (horizontal) large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-x-lg" id="variable-custom-select-padding-x-lg" placeholder="Padding x (horizontal) large" value="1rem" data-computed="1rem" data-variable="$custom-select-padding-x-lg" data-default="$input-padding-x-lg" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-padding-y-lg" for="variable-custom-select-padding-y-lg"> Padding y (vertical) large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-padding-y-lg" id="variable-custom-select-padding-y-lg" placeholder="Padding y (vertical) large" value="0.875rem" data-computed="0.875rem" data-variable="$custom-select-padding-y-lg" data-default="$input-padding-y-lg" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height-lg" for="variable-custom-select-height-lg"> Height large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-select-height-lg" id="variable-custom-select-height-lg" placeholder="Height large" value="calc(1.5em + 1.75rem + 2px)" data-computed="calc(1.5em + 1.75rem + 2px)" data-variable="$custom-select-height-lg" data-default="$input-height-lg" title="CSS value: calc(1.5em + 1.75rem + 2px)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-custom-file" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Custom file</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-bg" for="variable-custom-file-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-bg" id="variable-custom-file-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$custom-file-bg" data-default="$input-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-color" for="variable-custom-file-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-color" id="variable-custom-file-color" placeholder="Text color" value="#8898aa" data-computed="#8898aa" data-variable="$custom-file-color" data-default="$input-color" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-font-weight" for="variable-custom-file-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-font-weight" id="variable-custom-file-font-weight" placeholder="Font weight" value="400" data-computed="400" data-variable="$custom-file-font-weight" data-default="$input-font-weight" title="CSS value: 400" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-group-addon-bg" for="variable-custom-file-button-bg"> Button background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-button-bg" id="variable-custom-file-button-bg" placeholder="Button background color" value="#fff" data-computed="#fff" data-variable="$custom-file-button-bg" data-default="$input-group-addon-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-file-color" for="variable-custom-file-button-color"> Button text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-button-color" id="variable-custom-file-button-color" placeholder="Button text color" value="#8898aa" data-computed="#8898aa" data-variable="$custom-file-button-color" data-default="$custom-file-color" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-padding-y" for="variable-custom-file-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-padding-y" id="variable-custom-file-padding-y" placeholder="Padding y (vertical)" value="0.625rem" data-computed="0.625rem" data-variable="$custom-file-padding-y" data-default="$input-padding-y" title="CSS value: 0.625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-padding-x" for="variable-custom-file-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-padding-x" id="variable-custom-file-padding-x" placeholder="Padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$custom-file-padding-x" data-default="$input-padding-x" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height" for="variable-custom-file-height"> Height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-height" id="variable-custom-file-height" placeholder="Height" value="calc(1.5em + 1.25rem + 2px)" data-computed="calc(1.5em + 1.25rem + 2px)" data-variable="$custom-file-height" data-default="$input-height" title="CSS value: calc(1.5em + 1.25rem + 2px)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-height-inner" for="variable-custom-file-height-inner"> Inner height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-height-inner" id="variable-custom-file-height-inner" placeholder="Inner height" value="calc(1.5em + 1.25rem)" data-computed="calc(1.5em + 1.25rem)" data-variable="$custom-file-height-inner" data-default="$input-height-inner" title="CSS value: calc(1.5em + 1.25rem)" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-line-height" for="variable-custom-file-line-height"> Line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-line-height" id="variable-custom-file-line-height" placeholder="Line height" value="1.5" data-computed="1.5" data-variable="$custom-file-line-height" data-default="$input-line-height" title="CSS value: 1.5" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-border-color" for="variable-custom-file-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-border-color" id="variable-custom-file-border-color" placeholder="Border color" value="#cad1d7" data-computed="#cad1d7" data-variable="$custom-file-border-color" data-default="$input-border-color" title="CSS value: #cad1d7" > <i class="element-color__open-picker" style="background-color: #cad1d7;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-btn-border-width" for="variable-custom-file-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-border-width" id="variable-custom-file-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$custom-file-border-width" data-default="$input-btn-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-border-radius" for="variable-custom-file-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-file-border-radius" id="variable-custom-file-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$custom-file-border-radius" data-default="$input-border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-box-shadow" for="variable-custom-file-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-file-box-shadow" id="variable-custom-file-box-shadow" placeholder="Box shadow" value="none" data-computed="none" data-variable="$custom-file-box-shadow" data-default="$input-box-shadow" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-focus-border-color" for="variable-custom-file-focus-border-color"> Focus border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-focus-border-color" id="variable-custom-file-focus-border-color" placeholder="Focus border color" value="rgba(50, 151, 211, 0.25)" data-computed="rgba(50, 151, 211, 0.25)" data-variable="$custom-file-focus-border-color" data-default="$input-focus-border-color" title="CSS value: rgba(50, 151, 211, 0.25)" > <i class="element-color__open-picker" style="background-color: rgba(50, 151, 211, 0.25);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$input-focus-box-shadow" for="variable-custom-file-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-file-focus-box-shadow" id="variable-custom-file-focus-box-shadow" placeholder="Focus box shadow" value="none" data-computed="none" data-variable="$custom-file-focus-box-shadow" data-default="$input-focus-box-shadow" title="CSS value: none" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$input-disabled-bg" for="variable-custom-file-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-file-disabled-bg" id="variable-custom-file-disabled-bg" placeholder="Disabled background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$custom-file-disabled-bg" data-default="$input-disabled-bg" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-custom-range" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Custom range</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="100%" for="variable-custom-range-track-width"> Width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-track-width" id="variable-custom-range-track-width" placeholder="Width" value="100%" data-computed="100%" data-variable="$custom-range-track-width" data-default="100%" title="CSS value: 100%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5rem" for="variable-custom-range-track-height"> Height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-track-height" id="variable-custom-range-track-height" placeholder="Height" value="0.5rem" data-computed="0.5rem" data-variable="$custom-range-track-height" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-custom-range-track-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-range-track-bg" id="variable-custom-range-track-bg" placeholder="Background color" value="#dee2e6" data-computed="#dee2e6" data-variable="$custom-range-track-bg" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-custom-range-track-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-track-border-radius" id="variable-custom-range-track-border-radius" placeholder="Border radius" value="1rem" data-computed="1rem" data-variable="$custom-range-track-border-radius" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="pointer" for="variable-custom-range-track-cursor"> Cursor </label> <select class="form-control variable-custom-range-track-cursor" id="variable-custom-range-track-cursor" data-variable="$custom-range-track-cursor" data-default="pointer" data-computed="pointer"> <option value="pointer" selected>pointer</option> </select> </div> <div class="form-group col-12"> <label data-default="inset 0 .25rem .25rem rgba($black, .1)" for="variable-custom-range-track-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-range-track-box-shadow" id="variable-custom-range-track-box-shadow" placeholder="Box shadow" value="inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1)" data-computed="inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1)" data-variable="$custom-range-track-box-shadow" data-default="inset 0 .25rem .25rem rgba($black, .1)" title="CSS value: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Thumb</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="1rem" for="variable-custom-range-thumb-width"> Width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-thumb-width" id="variable-custom-range-thumb-width" placeholder="Width" value="1rem" data-computed="1rem" data-variable="$custom-range-thumb-width" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$custom-range-thumb-width" for="variable-custom-range-thumb-height"> Height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-thumb-height" id="variable-custom-range-thumb-height" placeholder="Height" value="1rem" data-computed="1rem" data-variable="$custom-range-thumb-height" data-default="$custom-range-thumb-width" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$component-active-bg" for="variable-custom-range-thumb-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-range-thumb-bg" id="variable-custom-range-thumb-bg" placeholder="Background color" value="#5e72e4" data-computed="#5e72e4" data-variable="$custom-range-thumb-bg" data-default="$component-active-bg" title="CSS value: #5e72e4" > <i class="element-color__open-picker" style="background-color: #5e72e4;"></i> </div> </div> <div class="form-group col-12"> <label data-default="lighten($component-active-bg, 35%)" for="variable-custom-range-thumb-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-range-thumb-active-bg" id="variable-custom-range-thumb-active-bg" placeholder="Active background color" value="#f7f8fe" data-computed="#f7f8fe" data-variable="$custom-range-thumb-active-bg" data-default="lighten($component-active-bg, 35%)" title="CSS value: #f7f8fe" > <i class="element-color__open-picker" style="background-color: #f7f8fe;"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-custom-range-thumb-border"> Border </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-thumb-border" id="variable-custom-range-thumb-border" placeholder="Border" value="0" data-computed="0" data-variable="$custom-range-thumb-border" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-custom-range-thumb-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-custom-range-thumb-border-radius" id="variable-custom-range-thumb-border-radius" placeholder="Border radius" value="1rem" data-computed="1rem" data-variable="$custom-range-thumb-border-radius" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="0 .1rem .25rem rgba($black, .1)" for="variable-custom-range-thumb-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-range-thumb-box-shadow" id="variable-custom-range-thumb-box-shadow" placeholder="Box shadow" value="0 0.1rem 0.25rem rgba(0, 0, 0, 0.1)" data-computed="0 0.1rem 0.25rem rgba(0, 0, 0, 0.1)" data-variable="$custom-range-thumb-box-shadow" data-default="0 .1rem .25rem rgba($black, .1)" title="CSS value: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 0 0 1px $body-bg, $input-focus-box-shadow" for="variable-custom-range-thumb-focus-box-shadow"> Focus box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-custom-range-thumb-focus-box-shadow" id="variable-custom-range-thumb-focus-box-shadow" placeholder="Focus box shadow" value="0 0 0 1px #fff, none" data-computed="0 0 0 1px #fff, none" data-variable="$custom-range-thumb-focus-box-shadow" data-default="0 0 0 1px $body-bg, $input-focus-box-shadow" title="CSS value: 0 0 0 1px #fff, none" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-500" for="variable-custom-range-thumb-disabled-bg"> Disabled background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-custom-range-thumb-disabled-bg" id="variable-custom-range-thumb-disabled-bg" placeholder="Disabled background color" value="#adb5bd" data-computed="#adb5bd" data-variable="$custom-range-thumb-disabled-bg" data-default="$gray-500" title="CSS value: #adb5bd" > <i class="element-color__open-picker" style="background-color: #adb5bd;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-tables" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Tables</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".8125rem" for="variable-table-body-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-body-font-size" id="variable-table-body-font-size" placeholder="Font size" value="0.8125rem" data-computed="0.8125rem" data-variable="$table-body-font-size" data-default=".8125rem" title="CSS value: 0.8125rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-table-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-bg" id="variable-table-bg" placeholder="Background color" value="transparent" data-computed="transparent" data-variable="$table-bg" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-100" for="variable-table-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-hover-bg" id="variable-table-hover-bg" placeholder="Hover background color" value="rgba(0, 0, 0, 0.075)" data-computed="rgba(0, 0, 0, 0.075)" data-variable="$table-hover-bg" data-default="$gray-100" title="CSS value: rgba(0, 0, 0, 0.075)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.075);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$table-hover-bg" for="variable-table-active-bg"> Active background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-active-bg" id="variable-table-active-bg" placeholder="Active background color" value="rgba(0, 0, 0, 0.075)" data-computed="rgba(0, 0, 0, 0.075)" data-variable="$table-active-bg" data-default="$table-hover-bg" title="CSS value: rgba(0, 0, 0, 0.075)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.075);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($gray-100, .3)" for="variable-table-accent-bg"> Accent background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-accent-bg" id="variable-table-accent-bg" placeholder="Accent background color" value="rgba(0, 0, 0, 0.05)" data-computed="rgba(0, 0, 0, 0.05)" data-variable="$table-accent-bg" data-default="rgba($gray-100, .3)" title="CSS value: rgba(0, 0, 0, 0.05)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.05);"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-table-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-border-color" id="variable-table-border-color" placeholder="Border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$table-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-table-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-border-width" id="variable-table-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$table-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-table-cell-padding"> Cell padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-cell-padding" id="variable-table-cell-padding" placeholder="Cell padding" value="1rem" data-computed="1rem" data-variable="$table-cell-padding" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5rem" for="variable-table-cell-padding-sm"> Cell padding small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-cell-padding-sm" id="variable-table-cell-padding-sm" placeholder="Cell padding small" value="0.3rem" data-computed="0.3rem" data-variable="$table-cell-padding-sm" data-default=".5rem" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$text-muted" for="variable-table-caption-color"> Caption text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-caption-color" id="variable-table-caption-color" placeholder="Caption text color" value="#8898aa" data-computed="#8898aa" data-variable="$table-caption-color" data-default="$text-muted" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Table head</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-table-head-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-head-bg" id="variable-table-head-bg" placeholder="Background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$table-head-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-700" for="variable-table-head-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-head-color" id="variable-table-head-color" placeholder="Text color" value="#525f7f" data-computed="#525f7f" data-variable="$table-head-color" data-default="$gray-700" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-table-head-spacer-y"> Spacer y (vertical) </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-head-spacer-y" id="variable-table-head-spacer-y" placeholder="Spacer y (vertical)" value="0.75rem" data-computed="0.75rem" data-variable="$table-head-spacer-y" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-color__open-picker" style="background-color: 0.75rem;"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default=".65rem" for="variable-table-head-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-head-font-size" id="variable-table-head-font-size" placeholder="Font size" value="0.65rem" data-computed="0.65rem" data-variable="$table-head-font-size" data-default=".65rem" title="CSS value: 0.65rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-table-head-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-head-font-weight" id="variable-table-head-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$table-head-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-table-head-text-transform"> Text transform </label> <select class="form-control variable-table-head-text-transform" id="variable-table-head-text-transform" data-variable="$table-head-text-transform" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> <div class="form-group col-12"> <label data-default="1px" for="variable-table-head-letter-spacing"> Letter spacing </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-table-head-letter-spacing" id="variable-table-head-letter-spacing" placeholder="Letter spacing" value="1px" data-computed="1px" data-variable="$table-head-letter-spacing" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Tables - Dark version</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default="$default" for="variable-table-dark-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-bg" id="variable-table-dark-bg" placeholder="Background color" value="#212529" data-computed="#212529" data-variable="$table-dark-bg" data-default="$default" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$body-bg" for="variable-table-dark-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-color" id="variable-table-dark-color" placeholder="Text color" value="#fff" data-computed="#fff" data-variable="$table-dark-color" data-default="$body-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($white, .075)" for="variable-table-dark-hover-bg"> Hover background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-hover-bg" id="variable-table-dark-hover-bg" placeholder="Hover background color" value="rgba(255, 255, 255, 0.075)" data-computed="rgba(255, 255, 255, 0.075)" data-variable="$table-dark-hover-bg" data-default="rgba($white, .075)" title="CSS value: rgba(255, 255, 255, 0.075)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.075);"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba($white, .05)" for="variable-table-dark-accent-bg"> Accent background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-accent-bg" id="variable-table-dark-accent-bg" placeholder="Accent background color" value="rgba(255, 255, 255, 0.05)" data-computed="rgba(255, 255, 255, 0.05)" data-variable="$table-dark-accent-bg" data-default="rgba($white, .05)" title="CSS value: rgba(255, 255, 255, 0.05)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.05);"></i> </div> </div> <div class="form-group col-12"> <label data-default="lighten($default, 7.5%)" for="variable-table-dark-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-border-color" id="variable-table-dark-border-color" placeholder="Border color" value="#32383e" data-computed="#32383e" data-variable="$table-dark-border-color" data-default="lighten($default, 7.5%)" title="CSS value: #32383e" > <i class="element-color__open-picker" style="background-color: #32383e;"></i> </div> </div> <div class="form-group col-12"> <label data-default="lighten($default, 4%)" for="variable-table-dark-head-bg"> Head background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-head-bg" id="variable-table-dark-head-bg" placeholder="Head background color" value="#1c345d" data-computed="#1c345d" data-variable="$table-dark-head-bg" data-default="lighten($default, 4%)" title="CSS value: #1c345d" > <i class="element-color__open-picker" style="background-color: #1c345d;"></i> </div> </div> <div class="form-group col-12"> <label data-default="lighten($default, 35%)" for="variable-table-dark-head-color"> Head text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-table-dark-head-color" id="variable-table-dark-head-color" placeholder="Head text color" value="#4d7bca" data-computed="#4d7bca" data-variable="$table-dark-head-color" data-default="lighten($default, 35%)" title="CSS value: #4d7bca" > <i class="element-color__open-picker" style="background-color: #4d7bca;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-alerts" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Alerts</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-alert-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-padding-y" id="variable-alert-padding-y" placeholder="Padding y (vertical)" value="1rem" data-computed="1rem" data-variable="$alert-padding-y" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.5rem" for="variable-alert-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-padding-x" id="variable-alert-padding-x" placeholder="Padding x (horizontal)" value="1.5rem" data-computed="1.5rem" data-variable="$alert-padding-x" data-default="1.5rem" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-alert-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-border-radius" id="variable-alert-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$alert-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1rem" for="variable-alert-margin-bottom"> Margin bottom </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-margin-bottom" id="variable-alert-margin-bottom" placeholder="Margin bottom" value="1rem" data-computed="1rem" data-variable="$alert-margin-bottom" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-alert-link-font-weight"> Link font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-link-font-weight" id="variable-alert-link-font-weight" placeholder="Link font weight" value="600" data-computed="600" data-variable="$alert-link-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="-2" for="variable-alert-bg-level"> Background color level </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-bg-level" id="variable-alert-bg-level" placeholder="Background color level" value="-2" data-computed="-2" data-variable="$alert-bg-level" data-default="-2" title="CSS value: -2" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="-2" for="variable-alert-border-level"> Border color level </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-border-level" id="variable-alert-border-level" placeholder="Border color level" value="-2" data-computed="-2" data-variable="$alert-border-level" data-default="-2" title="CSS value: -2" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-alert-color-level"> Text color level </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-alert-color-level" id="variable-alert-color-level" placeholder="Text color level" value="0" data-computed="0" data-variable="$alert-color-level" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Badges</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="66%" for="variable-badge-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-font-size" id="variable-badge-font-size" placeholder="Font size" value="66%" data-computed="66%" data-variable="$badge-font-size" data-default="66%" title="CSS value: 66%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-weight-bold" for="variable-badge-font-weight"> Font weight </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-font-weight" id="variable-badge-font-weight" placeholder="Font weight" value="600" data-computed="600" data-variable="$badge-font-weight" data-default="$font-weight-bold" title="CSS value: 600" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="uppercase" for="variable-badge-text-transfom"> Text transfom </label> <select class="form-control variable-badge-text-transfom" id="variable-badge-text-transfom" data-variable="$badge-text-transfom" data-default="uppercase" data-computed="uppercase"> <option value="none" >none</option> <option value="capitalize" >capitalize</option> <option value="uppercase" selected>uppercase</option> <option value="lowercase" >lowercase</option> </select> </div> <div class="form-group col-12"> <label data-default=".35rem" for="variable-badge-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-padding-y" id="variable-badge-padding-y" placeholder="Padding y (vertical)" value="0.35rem" data-computed="0.35rem" data-variable="$badge-padding-y" data-default=".35rem" title="CSS value: 0.35rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".375rem" for="variable-badge-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-padding-x" id="variable-badge-padding-x" placeholder="Padding x (horizontal)" value="0.375rem" data-computed="0.375rem" data-variable="$badge-padding-x" data-default=".375rem" title="CSS value: 0.375rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-badge-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-border-radius" id="variable-badge-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$badge-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default=".875em" for="variable-badge-pill-padding-x"> Pill padding x </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-pill-padding-x" id="variable-badge-pill-padding-x" placeholder="Pill padding x" value="0.875em" data-computed="0.875em" data-variable="$badge-pill-padding-x" data-default=".875em" title="CSS value: 0.875em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="10rem" for="variable-badge-pill-border-radius"> Pill border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-badge-pill-border-radius" id="variable-badge-pill-border-radius" placeholder="Pill border radius" value="10rem" data-computed="10rem" data-variable="$badge-pill-border-radius" data-default="10rem" title="CSS value: 10rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-modals" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Modal content</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-modal-content-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-modal-content-bg" id="variable-modal-content-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$modal-content-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="1px" for="variable-modal-content-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-content-border-width" id="variable-modal-content-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$modal-content-border-width" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-lg" for="variable-modal-content-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-content-border-radius" id="variable-modal-content-border-radius" placeholder="Border radius" value="0.3rem" data-computed="0.3rem" data-variable="$modal-content-border-radius" data-default="$border-radius-lg" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)" for="variable-modal-content-box-shadow-xs"> Box shadow (extra small) </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-modal-content-box-shadow-xs" id="variable-modal-content-box-shadow-xs" placeholder="Box shadow (extra small)" value="0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" data-computed="0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" data-variable="$modal-content-box-shadow-xs" data-default="0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)" title="CSS value: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" > <i class="element-size__icon icon-squares"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)" for="variable-modal-content-box-shadow-sm-up"> Box shadow (small and up) </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-modal-content-box-shadow-sm-up" id="variable-modal-content-box-shadow-sm-up" placeholder="Box shadow (small and up)" value="0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" data-computed="0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" data-variable="$modal-content-box-shadow-sm-up" data-default="0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)" title="CSS value: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-2">Modal backdrop</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="2"> <div class="form-group col-12"> <label data-default="$black" for="variable-modal-backdrop-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-modal-backdrop-bg" id="variable-modal-backdrop-bg" placeholder="Background color" value="#000" data-computed="#000" data-variable="$modal-backdrop-bg" data-default="$black" title="CSS value: #000" > <i class="element-color__open-picker" style="background-color: #000;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".16" for="variable-modal-backdrop-opacity"> Opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-backdrop-opacity" id="variable-modal-backdrop-opacity" placeholder="Opacity" value="0.16" data-computed="0.16" data-variable="$modal-backdrop-opacity" data-default=".16" title="CSS value: 0.16" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-3">Modal dialog</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="3"> <div class="form-group col-12"> <label data-default=".5rem" for="variable-modal-dialog-margin"> Margin (for extra small devices) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-dialog-margin" id="variable-modal-dialog-margin" placeholder="Margin (for extra small devices)" value="0.5rem" data-computed="0.5rem" data-variable="$modal-dialog-margin" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.75rem" for="variable-modal-dialog-margin-y-sm-up"> Vertical margin (small and up) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-dialog-margin-y-sm-up" id="variable-modal-dialog-margin-y-sm-up" placeholder="Vertical margin (small and up)" value="1.75rem" data-computed="1.75rem" data-variable="$modal-dialog-margin-y-sm-up" data-default="1.75rem" title="CSS value: 1.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-4">Modal header</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="4"> <div class="form-group col-12"> <label data-default="1.1" for="variable-modal-title-line-height"> Title line height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-title-line-height" id="variable-modal-title-line-height" placeholder="Title line height" value="1.1" data-computed="1.1" data-variable="$modal-title-line-height" data-default="1.1" title="CSS value: 1.1" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-modal-header-padding-y"> Header padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-header-padding-y" id="variable-modal-header-padding-y" placeholder="Header padding y (vertical)" value="1rem" data-computed="1rem" data-variable="$modal-header-padding-y" data-default="1.25rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-modal-header-padding-x"> Header padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-header-padding-x" id="variable-modal-header-padding-x" placeholder="Header padding x (horizontal)" value="1rem" data-computed="1rem" data-variable="$modal-header-padding-x" data-default="1.25rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-modal-header-border-color"> Header border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-modal-header-border-color" id="variable-modal-header-border-color" placeholder="Header border color" value="#e9ecef" data-computed="#e9ecef" data-variable="$modal-header-border-color" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$modal-content-border-width" for="variable-modal-header-border-width"> Header border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-header-border-width" id="variable-modal-header-border-width" placeholder="Header border width" value="1px" data-computed="1px" data-variable="$modal-header-border-width" data-default="$modal-content-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-5">Modal body</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="5"> <div class="form-group col-12"> <label data-default="1.5rem" for="variable-modal-inner-padding"> Padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-inner-padding" id="variable-modal-inner-padding" placeholder="Padding" value="1.5rem" data-computed="1.5rem" data-variable="$modal-inner-padding" data-default="1.5rem" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-6">Modal footer</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="6"> <div class="form-group col-12"> <label data-default="$modal-header-border-color" for="variable-modal-footer-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-modal-footer-border-color" id="variable-modal-footer-border-color" placeholder="Border color" value="#e9ecef" data-computed="#e9ecef" data-variable="$modal-footer-border-color" data-default="$modal-header-border-color" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$modal-header-border-width" for="variable-modal-footer-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-footer-border-width" id="variable-modal-footer-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$modal-footer-border-width" data-default="$modal-header-border-width" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <h5 class="text-center mt-2 mb-0 header-7">Sizes & utils</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="7"> <div class="form-group col-12"> <label data-default="380px" for="variable-modal-sm"> Modal small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-sm" id="variable-modal-sm" placeholder="Modal small" value="380px" data-computed="380px" data-variable="$modal-sm" data-default="380px" title="CSS value: 380px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="500px" for="variable-modal-md"> Modal medium </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-md" id="variable-modal-md" placeholder="Modal medium" value="500px" data-computed="500px" data-variable="$modal-md" data-default="500px" title="CSS value: 500px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="800px" for="variable-modal-lg"> Modal large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-lg" id="variable-modal-lg" placeholder="Modal large" value="800px" data-computed="800px" data-variable="$modal-lg" data-default="800px" title="CSS value: 800px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1140px" for="variable-modal-xl"> Modal extra large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-modal-xl" id="variable-modal-xl" placeholder="Modal extra large" value="1140px" data-computed="1140px" data-variable="$modal-xl" data-default="1140px" title="CSS value: 1140px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="7"> <div class="form-group col-12"> <label data-default="translate(0, -50px)" for="variable-modal-fade-transform"> Fade transform </label> <input type="text" class="form-control variable-modal-fade-transform" id="variable-modal-fade-transform" placeholder="Fade transform" value="translate(0, -50px)" data-computed="translate(0, -50px)" data-variable="$modal-fade-transform" data-default="translate(0, -50px)" title="CSS value: translate(0, -50px)" > </div> <div class="form-group col-12"> <label data-default="none" for="variable-modal-show-transform"> Show transform </label> <input type="text" class="form-control variable-modal-show-transform" id="variable-modal-show-transform" placeholder="Show transform" value="none" data-computed="none" data-variable="$modal-show-transform" data-default="none" title="CSS value: none" > </div> <div class="form-group col-12"> <label data-default="transform .3s ease-out" for="variable-modal-transition"> Transition </label> <div class="element-transition"> <input type="text" class="form-control element-transition__input variable-modal-transition" id="variable-modal-transition" placeholder="Transition" value="transform 0.3s ease-out" data-computed="transform 0.3s ease-out" data-variable="$modal-transition" data-default="transform .3s ease-out" title="CSS value: transform 0.3s ease-out" > <i class="element-size__icon icon-to-end"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-tooltips" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Tooltips</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$black" for="variable-tooltip-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-tooltip-bg" id="variable-tooltip-bg" placeholder="Background color" value="#000" data-computed="#000" data-variable="$tooltip-bg" data-default="$black" title="CSS value: #000" > <i class="element-color__open-picker" style="background-color: #000;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".9" for="variable-tooltip-opacity"> Opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-opacity" id="variable-tooltip-opacity" placeholder="Opacity" value="0.9" data-computed="0.9" data-variable="$tooltip-opacity" data-default=".9" title="CSS value: 0.9" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$white" for="variable-tooltip-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-tooltip-color" id="variable-tooltip-color" placeholder="Text color" value="#fff" data-computed="#fff" data-variable="$tooltip-color" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-sm" for="variable-tooltip-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-font-size" id="variable-tooltip-font-size" placeholder="Font size" value="0.875rem" data-computed="0.875rem" data-variable="$tooltip-font-size" data-default="$font-size-sm" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-tooltip-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-border-radius" id="variable-tooltip-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$tooltip-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="200px" for="variable-tooltip-max-width"> Max width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-max-width" id="variable-tooltip-max-width" placeholder="Max width" value="200px" data-computed="200px" data-variable="$tooltip-max-width" data-default="200px" title="CSS value: 200px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-tooltip-padding-y"> Padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-padding-y" id="variable-tooltip-padding-y" placeholder="Padding y (vertical)" value="0.25rem" data-computed="0.25rem" data-variable="$tooltip-padding-y" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".5rem" for="variable-tooltip-padding-x"> Padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-padding-x" id="variable-tooltip-padding-x" placeholder="Padding x (horizontal)" value="0.5rem" data-computed="0.5rem" data-variable="$tooltip-padding-x" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0" for="variable-tooltip-margin"> Margin </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-margin" id="variable-tooltip-margin" placeholder="Margin" value="0" data-computed="0" data-variable="$tooltip-margin" data-default="0" title="CSS value: 0" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$tooltip-bg" for="variable-tooltip-arrow-color"> Arrow color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-tooltip-arrow-color" id="variable-tooltip-arrow-color" placeholder="Arrow color" value="#000" data-computed="#000" data-variable="$tooltip-arrow-color" data-default="$tooltip-bg" title="CSS value: #000" > <i class="element-color__open-picker" style="background-color: #000;"></i> </div> </div> <div class="form-group col-12"> <label data-default=".8rem" for="variable-tooltip-arrow-width"> Arrow width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-arrow-width" id="variable-tooltip-arrow-width" placeholder="Arrow width" value="0.8rem" data-computed="0.8rem" data-variable="$tooltip-arrow-width" data-default=".8rem" title="CSS value: 0.8rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".4rem" for="variable-tooltip-arrow-height"> Arrow height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-tooltip-arrow-height" id="variable-tooltip-arrow-height" placeholder="Arrow height" value="0.4rem" data-computed="0.4rem" data-variable="$tooltip-arrow-height" data-default=".4rem" title="CSS value: 0.4rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-popovers" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Popovers</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$white" for="variable-popover-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-bg" id="variable-popover-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$popover-bg" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$body-color" for="variable-popover-body-color"> Text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-body-color" id="variable-popover-body-color" placeholder="Text color" value="#525f7f" data-computed="#525f7f" data-variable="$popover-body-color" data-default="$body-color" title="CSS value: #525f7f" > <i class="element-color__open-picker" style="background-color: #525f7f;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$popover-bg" for="variable-popover-header-bg"> Header background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-header-bg" id="variable-popover-header-bg" placeholder="Header background color" value="#fff" data-computed="#fff" data-variable="$popover-header-bg" data-default="$popover-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$headings-color" for="variable-popover-header-color"> Header text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-header-color" id="variable-popover-header-color" placeholder="Header text color" value="#32325d" data-computed="#32325d" data-variable="$popover-header-color" data-default="$headings-color" title="CSS value: #32325d" > <i class="element-color__open-picker" style="background-color: #32325d;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$font-size-sm" for="variable-popover-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-font-size" id="variable-popover-font-size" placeholder="Font size" value="0.875rem" data-computed="0.875rem" data-variable="$popover-font-size" data-default="$font-size-sm" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba($black, .05)" for="variable-popover-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-border-color" id="variable-popover-border-color" placeholder="Border color" value="rgba(0, 0, 0, 0.05)" data-computed="rgba(0, 0, 0, 0.05)" data-variable="$popover-border-color" data-default="rgba($black, .05)" title="CSS value: rgba(0, 0, 0, 0.05)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.05);"></i> </div> </div> <div class="form-group col-12"> <label data-default="1px" for="variable-popover-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-border-width" id="variable-popover-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$popover-border-width" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius-lg" for="variable-popover-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-border-radius" id="variable-popover-border-radius" placeholder="Border radius" value="0.3rem" data-computed="0.3rem" data-variable="$popover-border-radius" data-default="$border-radius-lg" title="CSS value: 0.3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0px .5rem 2rem 0px rgba($black, .2)" for="variable-popover-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-popover-box-shadow" id="variable-popover-box-shadow" placeholder="Box shadow" value="0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.2)" data-computed="0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.2)" data-variable="$popover-box-shadow" data-default="0px .5rem 2rem 0px rgba($black, .2)" title="CSS value: 0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.2)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="276px" for="variable-popover-max-width"> Max width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-max-width" id="variable-popover-max-width" placeholder="Max width" value="276px" data-computed="276px" data-variable="$popover-max-width" data-default="276px" title="CSS value: 276px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-popover-header-padding-y"> Header padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-header-padding-y" id="variable-popover-header-padding-y" placeholder="Header padding y (vertical)" value="0.75rem" data-computed="0.75rem" data-variable="$popover-header-padding-y" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-popover-header-padding-x"> Header padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-header-padding-x" id="variable-popover-header-padding-x" placeholder="Header padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$popover-header-padding-x" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$popover-header-padding-y" for="variable-popover-body-padding-y"> Body padding y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-body-padding-y" id="variable-popover-body-padding-y" placeholder="Body padding y (vertical)" value="0.75rem" data-computed="0.75rem" data-variable="$popover-body-padding-y" data-default="$popover-header-padding-y" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$popover-header-padding-x" for="variable-popover-body-padding-x"> Body padding x (horizontal) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-body-padding-x" id="variable-popover-body-padding-x" placeholder="Body padding x (horizontal)" value="0.75rem" data-computed="0.75rem" data-variable="$popover-body-padding-x" data-default="$popover-header-padding-x" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1.5rem" for="variable-popover-arrow-width"> Arrow width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-arrow-width" id="variable-popover-arrow-width" placeholder="Arrow width" value="1.5rem" data-computed="1.5rem" data-variable="$popover-arrow-width" data-default="1.5rem" title="CSS value: 1.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".75rem" for="variable-popover-arrow-height"> Arrow height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-popover-arrow-height" id="variable-popover-arrow-height" placeholder="Arrow height" value="0.75rem" data-computed="0.75rem" data-variable="$popover-arrow-height" data-default=".75rem" title="CSS value: 0.75rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$popover-bg" for="variable-popover-arrow-color"> Arrow color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-arrow-color" id="variable-popover-arrow-color" placeholder="Arrow color" value="#fff" data-computed="#fff" data-variable="$popover-arrow-color" data-default="$popover-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="transparent" for="variable-popover-arrow-outer-color"> Arrow outer color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-popover-arrow-outer-color" id="variable-popover-arrow-outer-color" placeholder="Arrow outer color" value="transparent" data-computed="transparent" data-variable="$popover-arrow-outer-color" data-default="transparent" title="CSS value: transparent" > <i class="element-color__open-picker" style="background-color: transparent;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-toasts" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Toasts</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba($white, .85)" for="variable-toast-background-color"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-toast-background-color" id="variable-toast-background-color" placeholder="Background color" value="rgba(255, 255, 255, 0.85)" data-computed="rgba(255, 255, 255, 0.85)" data-variable="$toast-background-color" data-default="rgba($white, .85)" title="CSS value: rgba(255, 255, 255, 0.85)" > <i class="element-color__open-picker" style="background-color: rgba(255, 255, 255, 0.85);"></i> </div> </div> <div class="form-group col-12"> <label data-default="350px" for="variable-toast-max-width"> Max width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-toast-max-width" id="variable-toast-max-width" placeholder="Max width" value="350px" data-computed="350px" data-variable="$toast-max-width" data-default="350px" title="CSS value: 350px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".875rem" for="variable-toast-font-size"> Font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-toast-font-size" id="variable-toast-font-size" placeholder="Font size" value="0.875rem" data-computed="0.875rem" data-variable="$toast-font-size" data-default=".875rem" title="CSS value: 0.875rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1px" for="variable-toast-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-toast-border-width" id="variable-toast-border-width" placeholder="Border width" value="1px" data-computed="1px" data-variable="$toast-border-width" data-default="1px" title="CSS value: 1px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-toast-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-toast-border-radius" id="variable-toast-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$toast-border-radius" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-toast-header-color"> Header text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-toast-header-color" id="variable-toast-header-color" placeholder="Header text color" value="#8898aa" data-computed="#8898aa" data-variable="$toast-header-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="rgba(0, 0, 0, .05)" for="variable-toast-header-border-color"> Header border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-toast-header-border-color" id="variable-toast-header-border-color" placeholder="Header border color" value="rgba(0, 0, 0, 0.05)" data-computed="rgba(0, 0, 0, 0.05)" data-variable="$toast-header-border-color" data-default="rgba(0, 0, 0, .05)" title="CSS value: rgba(0, 0, 0, 0.05)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.05);"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-spinners" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Spinners</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="2rem" for="variable-spinner-width"> Width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-width" id="variable-spinner-width" placeholder="Width" value="2rem" data-computed="2rem" data-variable="$spinner-width" data-default="2rem" title="CSS value: 2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$spinner-width" for="variable-spinner-height"> Height </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-height" id="variable-spinner-height" placeholder="Height" value="2rem" data-computed="2rem" data-variable="$spinner-height" data-default="$spinner-width" title="CSS value: 2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25em" for="variable-spinner-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-border-width" id="variable-spinner-border-width" placeholder="Border width" value="0.25em" data-computed="0.25em" data-variable="$spinner-border-width" data-default=".25em" title="CSS value: 0.25em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1rem" for="variable-spinner-width-sm"> Width small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-width-sm" id="variable-spinner-width-sm" placeholder="Width small" value="1rem" data-computed="1rem" data-variable="$spinner-width-sm" data-default="1rem" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$spinner-width-sm" for="variable-spinner-height-sm"> Height small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-height-sm" id="variable-spinner-height-sm" placeholder="Height small" value="1rem" data-computed="1rem" data-variable="$spinner-height-sm" data-default="$spinner-width-sm" title="CSS value: 1rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".2em" for="variable-spinner-border-width-sm"> Border width small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-spinner-border-width-sm" id="variable-spinner-border-width-sm" placeholder="Border width small" value="0.2em" data-computed="0.2em" data-variable="$spinner-border-width-sm" data-default=".2em" title="CSS value: 0.2em" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-progress-bar" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Progress bar</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-200" for="variable-progress-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-progress-bg" id="variable-progress-bg" placeholder="Background color" value="#e9ecef" data-computed="#e9ecef" data-variable="$progress-bg" data-default="$gray-200" title="CSS value: #e9ecef" > <i class="element-color__open-picker" style="background-color: #e9ecef;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-icons" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Icons</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="3rem" for="variable-icon-size"> Normal </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-icon-size" id="variable-icon-size" placeholder="Normal" value="3rem" data-computed="3rem" data-variable="$icon-size" data-default="3rem" title="CSS value: 3rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1.25rem" for="variable-icon-size-xs"> Extra small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-icon-size-xs" id="variable-icon-size-xs" placeholder="Extra small" value="1.25rem" data-computed="1.25rem" data-variable="$icon-size-xs" data-default="1.25rem" title="CSS value: 1.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="2rem" for="variable-icon-size-sm"> Small </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-icon-size-sm" id="variable-icon-size-sm" placeholder="Small" value="2rem" data-computed="2rem" data-variable="$icon-size-sm" data-default="2rem" title="CSS value: 2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="4rem" for="variable-icon-size-lg"> Large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-icon-size-lg" id="variable-icon-size-lg" placeholder="Large" value="4rem" data-computed="4rem" data-variable="$icon-size-lg" data-default="4rem" title="CSS value: 4rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="5rem" for="variable-icon-size-xl"> Extra large </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-icon-size-xl" id="variable-icon-size-xl" placeholder="Extra large" value="5rem" data-computed="5rem" data-variable="$icon-size-xl" data-default="5rem" title="CSS value: 5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-image-thumbnails" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Image thumbnails</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$body-bg" for="variable-thumbnail-bg"> Background color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-thumbnail-bg" id="variable-thumbnail-bg" placeholder="Background color" value="#fff" data-computed="#fff" data-variable="$thumbnail-bg" data-default="$body-bg" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-300" for="variable-thumbnail-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-thumbnail-border-color" id="variable-thumbnail-border-color" placeholder="Border color" value="#dee2e6" data-computed="#dee2e6" data-variable="$thumbnail-border-color" data-default="$gray-300" title="CSS value: #dee2e6" > <i class="element-color__open-picker" style="background-color: #dee2e6;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-thumbnail-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-thumbnail-border-width" id="variable-thumbnail-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$thumbnail-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-radius" for="variable-thumbnail-border-radius"> Border radius </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-thumbnail-border-radius" id="variable-thumbnail-border-radius" placeholder="Border radius" value="0.25rem" data-computed="0.25rem" data-variable="$thumbnail-border-radius" data-default="$border-radius" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default=".25rem" for="variable-thumbnail-padding"> Padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-thumbnail-padding" id="variable-thumbnail-padding" placeholder="Padding" value="0.25rem" data-computed="0.25rem" data-variable="$thumbnail-padding" data-default=".25rem" title="CSS value: 0.25rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="0 1px 2px rgba($black, .075)" for="variable-thumbnail-box-shadow"> Box shadow </label> <div class="element-shadow"> <input type="text" class="form-control element-shadow__input variable-thumbnail-box-shadow" id="variable-thumbnail-box-shadow" placeholder="Box shadow" value="0 1px 2px rgba(0, 0, 0, 0.075)" data-computed="0 1px 2px rgba(0, 0, 0, 0.075)" data-variable="$thumbnail-box-shadow" data-default="0 1px 2px rgba($black, .075)" title="CSS value: 0 1px 2px rgba(0, 0, 0, 0.075)" > <i class="element-size__icon icon-squares"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-figures" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Figures</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="$gray-600" for="variable-figure-caption-color"> Caption text color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-figure-caption-color" id="variable-figure-caption-color" placeholder="Caption text color" value="#8898aa" data-computed="#8898aa" data-variable="$figure-caption-color" data-default="$gray-600" title="CSS value: #8898aa" > <i class="element-color__open-picker" style="background-color: #8898aa;"></i> </div> </div> <div class="form-group col-12"> <label data-default="90%" for="variable-figure-caption-font-size"> Caption font size </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-figure-caption-font-size" id="variable-figure-caption-font-size" placeholder="Caption font size" value="90%" data-computed="90%" data-variable="$figure-caption-font-size" data-default="90%" title="CSS value: 90%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-horizontal-rule" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Horizontal rule</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="rgba($black, .1)" for="variable-hr-border-color"> Border color </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-hr-border-color" id="variable-hr-border-color" placeholder="Border color" value="rgba(0, 0, 0, 0.1)" data-computed="rgba(0, 0, 0, 0.1)" data-variable="$hr-border-color" data-default="rgba($black, .1)" title="CSS value: rgba(0, 0, 0, 0.1)" > <i class="element-color__open-picker" style="background-color: rgba(0, 0, 0, 0.1);"></i> </div> </div> <div class="form-group col-12"> <label data-default="$border-width" for="variable-hr-border-width"> Border width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-hr-border-width" id="variable-hr-border-width" placeholder="Border width" value="0.0625rem" data-computed="0.0625rem" data-variable="$hr-border-width" data-default="$border-width" title="CSS value: 0.0625rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$spacer * 2" for="variable-hr-margin-y"> Margin y (vertical) </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-hr-margin-y" id="variable-hr-margin-y" placeholder="Margin y (vertical)" value="2rem" data-computed="2rem" data-variable="$hr-margin-y" data-default="$spacer * 2" title="CSS value: 2rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-inline-list" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Inline list</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".5rem" for="variable-list-inline-padding"> Horizontal padding </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-list-inline-padding" id="variable-list-inline-padding" placeholder="Horizontal padding" value="0.5rem" data-computed="0.5rem" data-variable="$list-inline-padding" data-default=".5rem" title="CSS value: 0.5rem" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-grid" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Grid</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="30px" for="variable-grid-gutter-width"> Gutter width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-grid-gutter-width" id="variable-grid-gutter-width" placeholder="Gutter width" value="30px" data-computed="30px" data-variable="$grid-gutter-width" data-default="30px" title="CSS value: 30px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-color-tools" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Color tools</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default=".6" for="variable-translucent-color-opacity"> Translucent color opacity </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-translucent-color-opacity" id="variable-translucent-color-opacity" placeholder="Translucent color opacity" value="0.6" data-computed="0.6" data-variable="$translucent-color-opacity" data-default=".6" title="CSS value: 0.6" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="8%" for="variable-theme-color-interval"> Theme color interval </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-theme-color-interval" id="variable-theme-color-interval" placeholder="Theme color interval" value="8%" data-computed="8%" data-variable="$theme-color-interval" data-default="8%" title="CSS value: 8%" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="200" for="variable-yiq-contrasted-threshold"> YIQ contrasted threshold </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-yiq-contrasted-threshold" id="variable-yiq-contrasted-threshold" placeholder="YIQ contrasted threshold" value="200" data-computed="200" data-variable="$yiq-contrasted-threshold" data-default="200" title="CSS value: 200" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="$gray-900" for="variable-yiq-text-dark"> YIQ text dark </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-yiq-text-dark" id="variable-yiq-text-dark" placeholder="YIQ text dark" value="#212529" data-computed="#212529" data-variable="$yiq-text-dark" data-default="$gray-900" title="CSS value: #212529" > <i class="element-color__open-picker" style="background-color: #212529;"></i> </div> </div> <div class="form-group col-12"> <label data-default="$white" for="variable-yiq-text-light"> YIQ text light </label> <div class="element-color"> <input type="text" class="form-control element-color__input variable-yiq-text-light" id="variable-yiq-text-light" placeholder="YIQ text light" value="#fff" data-computed="#fff" data-variable="$yiq-text-light" data-default="$white" title="CSS value: #fff" > <i class="element-color__open-picker" style="background-color: #fff;"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-printing" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Printing</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12 pr-0"> <div class="row"> <label class="col-6 pr-0" data-default="true"> Enable print styles </label> <div class="col-6 pr-0 variable-enable-print-styles" id="variable-enable-print-styles"> <div class="form-check form-check-inline mr-2"> <input class="form-check-input option-variable-enable-print-styles-yes" id="option-variable-enable-print-styles-yes" type="radio" name="option-variable-enable-print-styles" value="true" data-variable="$enable-print-styles" data-default="true" data-computed="true" checked> <label class="form-check-label" for="option-variable-enable-print-styles-yes"> Yes </label> </div> <div class="form-check form-check-inline mr-0"> <input class="form-check-input option-variable-enable-print-styles-no" id="option-variable-enable-print-styles-no" type="radio" name="option-variable-enable-print-styles" value="false" data-variable="$enable-print-styles" data-default="true" data-computed="true" > <label class="form-check-label" for="option-variable-enable-print-styles-no"> No </label> </div> </div> </div> </div> <div class="form-group col-12"> <label data-default="a3" for="variable-print-page-size"> Page size </label> <input type="text" class="form-control variable-print-page-size" id="variable-print-page-size" placeholder="Page size" value="a3" data-computed="a3" data-variable="$print-page-size" data-default="a3" title="CSS value: a3" > </div> <div class="form-group col-12"> <label data-default="map-get($grid-breakpoints, "lg")" for="variable-print-body-min-width"> Body min width </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-print-body-min-width" id="variable-print-body-min-width" placeholder="Body min width" value="992px" data-computed="992px" data-variable="$print-body-min-width" data-default="map-get($grid-breakpoints, "lg")" title="CSS value: 992px" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-z-index" class="customizer__form pro" data-was-open="0"> <h5 class="text-center mt-2 mb-0 header-1">Z-index</h5> <hr class="mt-2 mb-3"/> <div class="row px-2 container-variable" data-header-id="1"> <div class="form-group col-12"> <label data-default="1000" for="variable-zindex-dropdown"> z-index dropdown </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-dropdown" id="variable-zindex-dropdown" placeholder="z-index dropdown" value="1000" data-computed="1000" data-variable="$zindex-dropdown" data-default="1000" title="CSS value: 1000" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1020" for="variable-zindex-sticky"> z-index sticky </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-sticky" id="variable-zindex-sticky" placeholder="z-index sticky" value="1020" data-computed="1020" data-variable="$zindex-sticky" data-default="1020" title="CSS value: 1020" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1030" for="variable-zindex-fixed"> z-index fixed </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-fixed" id="variable-zindex-fixed" placeholder="z-index fixed" value="1030" data-computed="1030" data-variable="$zindex-fixed" data-default="1030" title="CSS value: 1030" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1050" for="variable-zindex-modal"> z-index modal </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-modal" id="variable-zindex-modal" placeholder="z-index modal" value="1050" data-computed="1050" data-variable="$zindex-modal" data-default="1050" title="CSS value: 1050" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1040" for="variable-zindex-modal-backdrop"> z-index modal backdrop </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-modal-backdrop" id="variable-zindex-modal-backdrop" placeholder="z-index modal backdrop" value="1040" data-computed="1040" data-variable="$zindex-modal-backdrop" data-default="1040" title="CSS value: 1040" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1060" for="variable-zindex-popover"> z-index popover </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-popover" id="variable-zindex-popover" placeholder="z-index popover" value="1060" data-computed="1060" data-variable="$zindex-popover" data-default="1060" title="CSS value: 1060" > <i class="element-size__icon icon-resize-full"></i> </div> </div> <div class="form-group col-12"> <label data-default="1070" for="variable-zindex-tooltip"> z-index tooltip </label> <div class="element-size"> <input type="text" class="form-control element-size__input variable-zindex-tooltip" id="variable-zindex-tooltip" placeholder="z-index tooltip" value="1070" data-computed="1070" data-variable="$zindex-tooltip" data-default="1070" title="CSS value: 1070" > <i class="element-size__icon icon-resize-full"></i> </div> </div> </div> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> <div id="settings-custom-css" class="customizer__form" data-was-open="0" style="height: 95%;"> <h5 class="text-center mt-2 mb-0 position-relative">Custom CSS   <button id="settings-custom-css-save" class="btn btn-sm btn-outline-primary position-absolute" style="right: 0;">save</button></h5> <hr class="mt-2 mb-0"/> <textarea id="settings-custom-css-editor">/** * 1. This is a valid SCSS file. * 2. You can use CSS and SCSS here. * 3. Custom CSS must be saved manually. **/ .your-class {}</textarea> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> </div> <div class="col-12 col-lg-9 col-xxl-10 d-none d-md-flex flex-column modal-browser" data-scaled-open="0"> <div class="browser browser--desktop" data-mockup="theme"> <div class="browser__wrapper"> <div class="address-bar border d-flex justify-content-between"> <div class="address-bar__dots mr-auto"> <span></span> <span></span> <span></span> </div> <div class="address-bar__page border rounded dropdown "> <a class="address-bar__page--url text-truncate track-click" data-label="address-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/static/img/loading.gif" alt="Loading..." class="address-bar__page--loading"/> <span>index.html</span> <i class="icon-down-dir"></i> </a> <div class="dropdown-menu"> <a class="dropdown-item page-item border-bottom address-bar__page--system" data-page="__argon-ui.html">__argon-ui.html</a> <a class="dropdown-item page-item border-bottom" data-page="index.html">index.html <span class="dropdown-edit"> <i class="icon-docs page-duplicate" title="Duplicate page"></i> </span> </a> <div class="dropdown-menu__pages"> </div> <div class="dropdown-new dropdown-new__template border-bottom d-none"> <input type="text" class="dropdown-menu__new-input" placeholder="output filename..."/> <a class="text-primary page-save-changes">Save</a> </div> <div class="mt-1 text-center"> <a class="dropdown-item page-action__add"><i class="icon-list-add"></i> Add a page</a> <a class="dropdown-item page-action__cancel d-none">cancel</a> </div> </div> </div> <div class="address-bar__media ml-auto"> <button class="browser__change-device track-click active" data-label="preview-desktop" data-device="desktop" data-mockup="theme" title="Desktop 1366px"><i class="icon-desktop"></i></button> <button class="browser__change-device track-click" data-label="preview-tablet" data-device="tablet" data-mockup="theme" title="Tablet 778px"><i class="icon-tablet"></i></button> <button class="browser__change-device track-click" data-label="preview-mobile" data-device="mobile" data-mockup="theme" title="Mobile 360px"><i class="icon-mobile"></i></button> </div> </div> <div class="browser__container border border-top-0"> <div class="browser__content"> <iframe title="Edited page content" frameBorder="0" width="100%" src="/preview?project=1e048cta4dbd13255db38f1dd9e9669f8cf5da55&page=index.html&screen=theme" id="iframe-theme"></iframe> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="bs-modal--theme__help" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content text-center"> <div class="modal-header text-white bg-primary"> <h4 class="mb-0">Help</h4> <div class="ml-auto"> <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> <div class="modal-body p-3 pb-4"> <h4 class="mb-3">This is Argon 1.0.2 <img src="/static/img/logos/sass.svg" style="height: 30px;"/> compiler.</h4> <p class="border-top mt-3 pt-3"> You can use CSS values or Bootstrap/Argon variables. Just like in .scss files. </p> <img class="w-50 mx-auto border" data-src="/static/img/manual/values.gif" alt=""/> <p class="border-top mt-3 pt-3"> We'll show you a variable name and it's default value on label hover. Click on the label to restore input to the default value. </p> <img class="w-50 mx-auto border" data-src="/static/img/manual/default.gif" alt=""/> <p class="border-top mt-3 pt-3"> Instead of writing values by hand you can use pickers specially prepared for colors, sizes, shadows, transitions and fonts. </p> <img class="w-75 mx-auto border" data-src="/static/img/manual/pickers.gif" alt=""/> <p class="border-top mt-3 pt-3"> Theme Customizer has two preview modes. One is for your pages (eg. index.html) and the second one is for the current category's Argon UI components. </p> <img class="w-75 mx-auto border" data-src="/static/img/manual/preview.gif" alt=""/> <h4 class="mt-4 mb-1">Easy? <a href="#" data-dismiss="modal">Close help and start creating</a>.</h4> </div> </div> </div> </div> <div class="bs-modal" id="bs-modal--content"> <div class="overlay overlay--modal"></div> <div class="bs-modal__body rounded shadow-sm bg-light"> <div class="bs-modal__header rounded-top border-bottom shadow-sm"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="bs-modal--content-close"> close <span aria-hidden="true">×</span> </button> <h3 class="mb-2">Component content</h3> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#" data-category="form">Visual Content</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-category="custom-html">Custom HTML</a> </li> </ul> </div> <div class="bs-modal__content"> <div class="container-fluid h-100"> <div class="row customizer"> <div class="col-12 col-lg-3 col-xxl-2 rounded-bottom customizer__options px-3 overflow-auto"> <div class="customizer__error alert alert-danger d-none"> <button type="button" class="close"> <span aria-hidden="true">×</span> </button> <span class="customizer__error--message"></span> </div> <div id="settings-form" class="customizer__form show"></div> <div id="settings-custom-html" class="code-editor__options customizer__form pro"> <h5 class="text-center mt-3 mb-0">Basic elements</h5> <hr class="mt-2 mb-3 pb-1"> <ul class="list-unstyled"> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<h1>Heading 1</h1>"> <i class="icon-header"></i> <span>Heading</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi suscipit nisi obcaecati quia pariatur enim.</p>"> <i class="icon-paragraph"></i> <span>Paragraph</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam eaque quia sapiente, suscipit natus architecto!</p>"> <i class="icon-text-height"></i> <span>Lead text</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<img src="placeholder/pictures/bg_16-9.svg?primary=007bff" alt="" class="img-fluid">"> <i class="icon-picture"></i> <span>Image</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> </div>"> <i class="icon-video"></i> <span>Video</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<a href="#">Link</a>"> <i class="icon-link"></i> <span>Link</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<a href="#" class="btn btn-primary">Primary button</a>"> <i class="icon-iphone-home"></i> <span>Button</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<hr />"> <i class="icon-divide-outline"></i> <span>Divider</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="my-5"></div>"> <i class="icon-resize-vertical"></i> <span>Spacer</span> </button> </li> </ul> <h5 class="text-center mt-3 mb-0">Containers & grid</h5> <hr class="mt-2 mb-3 pb-1"> <ul class="list-unstyled"> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="container"> </div>"> <i class="icon-squares"></i> <span>Container</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> </div>"> <i class="icon-squares"></i> <span>Row</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12"> Single column </div> </div>"> <i class="icon-squares"></i> <span>Single column</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-md-6"> Col 1 </div> <div class="col-12 col-md-6"> Col 2 </div> </div>"> <i class="icon-squares"></i> <span>Two columns</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-md-4"> Col 1 </div> <div class="col-12 col-md-4"> Col 2 </div> <div class="col-12 col-md-4"> Col 3 </div> </div>"> <i class="icon-squares"></i> <span>Three Columns</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-md-6 col-lg-3"> Col 1 </div> <div class="col-12 col-md-6 col-lg-3"> Col 2 </div> <div class="col-12 col-md-6 col-lg-3"> Col 3 </div> <div class="col-12 col-md-6 col-lg-3"> Col 4 </div> </div>"> <i class="icon-squares"></i> <span>Four Columns</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-lg-6"> Col 1 </div> <div class="col-12 col-lg-6"> Col 2 </div> </div>"> <i class="icon-squares"></i> <span>Layout 50, 50</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-lg-4"> Col 1 </div> <div class="col-12 col-lg-8"> Col 2 </div> </div>"> <i class="icon-squares"></i> <span>Layout 33, 66</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="row"> <div class="col-12 col-lg-8"> Col 1 </div> <div class="col-12 col-lg-4"> Col 2 </div> </div>"> <i class="icon-squares"></i> <span>Layout 66, 33</span> </button> </li> </ul> <h5 class="text-center mt-3 mb-0">Forms</h5> <hr class="mt-2 mb-3 pb-1"> <ul class="list-unstyled"> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<form> <div class="form-group"> <label>Email address</label> <input type="email" class="form-control" placeholder="Enter email"> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" placeholder="Password"> </div> <div class="custom-control custom-checkbox mb-3"> <input class="custom-control-input" id="customCheck2" type="checkbox"> <label class="custom-control-label" for="customCheck2"> <span>Check me out</span> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>"> <i class="icon-wpforms"></i> <span>Form</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<form class="form-inline"> <label class="sr-only">Email address</label> <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email"> <label class="sr-only">Password</label> <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Password"> <div class="custom-control custom-checkbox mb-2 mr-sm-2"> <input class="custom-control-input" id="customCheck3" type="checkbox"> <label class="custom-control-label" for="customCheck3"> <span>Remember me</span> </label> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form>"> <i class="icon-wpforms"></i> <span>Inline form</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="form-group"> <label>Text input</label> <input type="text" class="form-control" placeholder="Enter text"> </div>"> <i class="icon-font"></i> <span>Input</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="form-group"> <label>Example textarea</label> <textarea class="form-control" rows="3"></textarea> </div>"> <i class="icon-doc-text"></i> <span>Textarea</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<form> <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default"> <option disabled>Single Option</option> <option value="2">Foobar</option> <option value="3">Is great</option> <option value="4">Pick one</option> </select> </form>"> <i class="icon-arrow-combo"></i> <span>Select</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="custom-control custom-checkbox mb-3"> <input class="custom-control-input" id="customCheck1" type="checkbox"> <label class="custom-control-label" for="customCheck1"> <span>Default checkbox</span> </label> </div>"> <i class="icon-check"></i> <span>Checkbox</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="custom-control custom-radio mb-3"> <input name="custom-radio-1" class="custom-control-input" id="customRadio2" checked type="radio"> <label class="custom-control-label" for="customRadio2"> <span>Default radio</span> </label> </div>"> <i class="icon-dot-circled"></i> <span>Radio</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<button class="btn btn-primary">Primary button</button>"> <i class="icon-iphone-home"></i> <span>Button</span> </button> </li> </ul> <h5 class="text-center mt-3 mb-0">Utils</h5> <hr class="mt-2 mb-3 pb-1"> <ul class="list-unstyled"> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>"> <i class="icon-attention-circled"></i> <span>Alert</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<span class="badge badge-primary">Primary</span>"> <i class="icon-id-badge"></i> <span>Badge</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="card" style="width: 18rem;"> <img src="placeholder/pictures/bg_16-9.svg?primary=007bff" class="card-img-top" alt=""> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>"> <i class="icon-address-card-o"></i> <span>Card</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="placeholder/pictures/bg_16-9.svg?primary=007bff" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img src="placeholder/pictures/bg_16-9.svg?primary=007bff" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> <img src="placeholder/pictures/bg_16-9.svg?primary=007bff" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>"> <i class="icon-picture-1"></i> <span>Carousel</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>"> <i class="icon-arrow-combo"></i> <span>Dropdown</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-default">Modal</button> <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true"> <div class="modal-dialog modal- modal-dialog-centered modal-" role="document"> <div class="modal-content"> <div class="modal-header"> <h6 class="modal-title" id="modal-title-default">Type your modal title</h6> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">脳</span> </button> </div> <div class="modal-body"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-link ml-auto" data-dismiss="modal">Close</button> </div> </div> </div> </div>"> <i class="icon-address-card-o"></i> <span>Modal</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="progress-wrapper"> <div class="progress-info"> <div class="progress-label"> <span>Primary</span> </div> <div class="progress-percentage"> <span class="text-primary">60%</span> </div> </div> <div class="progress"> <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </div>"> <i class="icon-progress-2"></i> <span>Progress</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="autohide"> <div class="toast-header"> <img src="placeholder/pictures/bg_16-9.svg?primary=007bff" class="rounded mr-2" alt="..."> <strong class="mr-auto">Creative Tim</strong> <small>11 mins ago</small> <button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div>"> <i class="icon-address-card-o"></i> <span>Toast</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div>"> <i class="icon-spinner"></i> <span>Spinner</span> </button> </li> </ul> <h5 class="text-center mt-3 mb-0">Navigation</h5> <hr class="mt-2 mb-3 pb-1"> <ul class="list-unstyled"> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-4"> <div class="container"> <a class="navbar-brand" href="javascript:;">Primary Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-primary"> <div class="navbar-collapse-header"> <div class="row"> <div class="col-6 collapse-brand"> <a href="./index.html"> <img src="./assets/img/brand/blue.png"> </a> </div> <div class="col-6 collapse-close"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation"> <span></span> <span></span> </button> </div> </div> </div> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item"> <a class="nav-link" href="javascript:;">Discover <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:;">Profile</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="javascript:;" id="navbar-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-primary_dropdown_1"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Something else here</a> </div> </li> </ul> </div> </div> </nav>"> <i class="icon-menu"></i> <span>Navbar</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>"> <i class="icon-menu"></i> <span>Horizontal nav</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>"> <i class="icon-menu"></i> <span>Vertical nav</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="nav-wrapper"> <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-text" role="tablist"> <li class="nav-item"> <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="false">Messages</a> </li> </ul> </div> <div class="card shadow"> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab"> <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p> <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p> </div> <div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab"> <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> <div class="tab-pane fade" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab"> <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p> </div> </div> </div> </div>"> <i class="icon-menu"></i> <span>Tabs</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="nav-wrapper"> <ul class="nav nav-pills nav-pills-primary" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#link11" role="tablist"> Profile </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link12" role="tablist"> Settings </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link13" role="tablist"> Options </a> </li> </ul> </div> <div class="card card-plain"> <div class="tab-content tab-space"> <div class="tab-pane fade active show" id="link11"> <p class="description">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. <br /> Dramatically visualize customer directed convergence without revolutionary ROI.</p> </div> <div class="tab-pane fade" id="link12"> <p class="description">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. <br />Dramatically maintain clicks-and-mortar solutions without functional solutions.</p> </div> <div class="tab-pane fade" id="link13"> <p class="description">Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. <br />Dynamically innovate resource-leveling customer service for state of the art customer service.</p> </div> </div> </div>"> <i class="icon-menu"></i> <span>Pills</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav>"> <i class="icon-menu"></i> <span>Breadcrumb</span> </button> </li> <li> <button class="btn btn-link" data-toggle="manual" data-placement="bottom" data-title="Copied! Paste it into the editor." data-snippet="<div class="pagination-container justify-content-center"> <ul class="pagination pagination-primary"> <li class="page-item"> <a class="page-link" href="javascript:;" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span> </a> </li> <li class="page-item"> <a class="page-link" href="javascript:;">1</a> </li> <li class="page-item"> <a class="page-link" href="javascript:;">2</a> </li> <li class="page-item active"> <a class="page-link" href="javascript:;">3</a> </li> <li class="page-item"> <a class="page-link" href="javascript:;">4</a> </li> <li class="page-item"> <a class="page-link" href="javascript:;">5</a> </li> <li class="page-item"> <a class="page-link" href="javascript:;" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> </li> </ul> </div>"> <i class="icon-menu"></i> <span>Pagination</span> </button> </li> </ul> <div class="customizer__pro"> <div class="overlay overlay--show"></div> <div class="customizer__pro--desc text-center justify-content-center align-self-center w-100"> <h3>Hi there!</h3> <p>You must have a full account to use all features.</p> <a href="/purchase" class="unlock-all-items btn btn-danger"><i class="icon-heart-empty"></i> Create Account</a> </div> </div> </div> </div> <div class="col-12 col-lg-9 col-xxl-10 d-none d-md-flex flex-column modal-browser" data-scaled-open="0"> <div class="d-none mb-3 code-editor__wrapper size-md"> <div class="code-editor__head text-right mb-1"> <div class="code-editor__size float-left mt-1"> <button class="btn btn-sm btn-link" data-size="xs">xs</button> <button class="btn btn-sm btn-link active" data-size="md">md</button> <button class="btn btn-sm btn-link" data-size="lg">lg</button> </div> <button class="code-editor--restore btn btn-sm btn-link mr-1"> <span class="text-muted">restore original</span> </button> <button type="button" class="code-editor--save save-single btn btn-sm btn-outline-primary">save component globally</button> <div class="btn-group save-group d-none"> <button type="button" class="code-editor--save btn btn-sm btn-outline-primary">save component globally</button> <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu px-2 py-2"> <p class="text-muted small"> By default custom components are saved <strong>globally</strong> (it is the same object). </p> <p class="text-muted small"> If you want to create a new object with its own content, please use <strong>save as new component</strong>. </p> <div class="dropdown-divider"></div> <div class="dropdown-item px-0"> <button class="w-100 code-editor--save-copy btn btn-sm btn-primary">save as new component</button> </div> </div> </div> </div> <div class="code-editor"> <textarea id="code-editor__textarea"></textarea> </div> </div> <div class="browser browser--desktop" data-mockup="content"> <div class="browser__wrapper"> <div class="address-bar border d-flex justify-content-between"> <div class="address-bar__dots mr-auto"> <span></span> <span></span> <span></span> </div> <div class="address-bar__page border rounded dropdown d-none"> <a class="address-bar__page--url text-truncate track-click" data-label="address-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/static/img/loading.gif" alt="Loading..." class="address-bar__page--loading"/> <span>index.html</span> <i class="icon-down-dir"></i> </a> <div class="dropdown-menu"> <a class="dropdown-item page-item border-bottom" data-page="index.html">index.html <span class="dropdown-edit"> <i class="icon-docs page-duplicate" title="Duplicate page"></i> </span> </a> <div class="dropdown-menu__pages"> </div> <div class="dropdown-new dropdown-new__template border-bottom d-none"> <input type="text" class="dropdown-menu__new-input" placeholder="output filename..."/> <a class="text-primary page-save-changes">Save</a> </div> <div class="mt-1 text-center"> <a class="dropdown-item page-action__add"><i class="icon-list-add"></i> Add a page</a> <a class="dropdown-item page-action__cancel d-none">cancel</a> </div> </div> </div> <div class="address-bar__media ml-auto"> <button class="browser__change-device track-click active" data-label="preview-desktop" data-device="desktop" data-mockup="content" title="Desktop 1366px"><i class="icon-desktop"></i></button> <button class="browser__change-device track-click" data-label="preview-tablet" data-device="tablet" data-mockup="content" title="Tablet 778px"><i class="icon-tablet"></i></button> <button class="browser__change-device track-click" data-label="preview-mobile" data-device="mobile" data-mockup="content" title="Mobile 360px"><i class="icon-mobile"></i></button> </div> </div> <div class="browser__container border border-top-0"> <div class="browser__content"> <iframe title="Edited page content" frameBorder="0" width="100%" src="/preview?project=1e048cta4dbd13255db38f1dd9e9669f8cf5da55&page=index.html&screen=content" id="iframe-content"></iframe> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal" tabindex="-1" role="dialog" id="modal-old-revision"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Can't save new version.</h5> </div> <div class="modal-body"> <p>There is a newer version or session on the server. Please reload the editor to resolve.</p> <p class="mb-0"><strong>Hint:</strong> In 9 cases out of 10 it is caused by opening the same project in multiple browser windows.</p> </div> <div class="modal-footer justify-content-center py-2"> <button type="button" class="btn btn-primary my-1" onclick="top.location.reload();return false;">Click to reload and resolve</button> </div> </div> </div> </div> <div class="modal fade" tabindex="-1" role="dialog" id="modal-purchase"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="purchase modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <form action="/purchase" method="post" id="account-form"> <h3 class="text-center my-3 pb-1"><span class="d-inline-block border-bottom border-primary" style="border-width: 2px !important; padding-bottom: .8rem;">    Purchase Argon Web Builder    </span></h3> <h5 class="h5 border-0 text-center mb-3">Limited time <span class="text-danger">50% discount.</span></h5> <div class="text-center mb-2 pb-1 h5" id="billing-type"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="billing" id="billing-monthly" value="monthly" data-price="14" checked> <label class="form-check-label" for="billing-monthly">  1 month <span class="mx-1" style="text-decoration: line-through; font-size: 1.2rem">$29</span> <span class="mr-1 p-1 badge badge-warning" style="font-size: 1.2rem;">$14</span> </label> </div> <div class="form-check form-check-inline mt-2 mt-lg-0"> <input class="form-check-input" type="radio" name="billing" id="billing-quarterly" value="quarterly" data-price="44"> <label class="form-check-label" for="billing-quarterly">  3 months <span class="mx-1" style="text-decoration: line-through; font-size: 1.2rem">$89</span> <span class="mr-1 p-1 badge badge-warning" style="font-size: 1.2rem;">$44</span> </label> </div> <div class="form-check form-check-inline mt-2 mt-lg-0"> <input class="form-check-input" type="radio" name="billing" id="billing-annual" value="annual" data-price="124"> <label class="form-check-label" for="billing-annual">  Annual <span class="mx-1" style="text-decoration: line-through; font-size: 1.2rem">$249</span> <span class="p-1 badge badge-warning" style="font-size: 1.2rem;">$124</span><br> </label> </div> </div> <div class="mb-2 text-center text-muted small bonus-info"> <p class="mb-1">The selected plan includes all customization features, full sources, sharable previews, and unlimited projects.</p> <div class="d-none d-lg-block"> <p class="mb-0 bonus-monthly">A monthly subscription is best for those who are currently planning only one project.</p> <p class="mb-0 bonus-quarterly d-none">A quarterly subscription is best for those who are currently planning only one project.</p> <p class="mb-0 bonus-annual d-none">An annual subscription is best for those who create several projects per year.</p> </div> </div> <div class="row align-items-center mt-1 mb-1 pt-2 px-md-3 pb-3"> <div class="col-xl-10 mx-auto"> <div class="shadow rounded border-top p-3"> <div class="form-group"> <label for="account-email">Your e-mail</label> <input type="email" name="email" class="form-control" id="account-email" placeholder="E-mail" value="" autocomplete="new-account"> </div> <div class="form-group"> <label for="account-password">Choose a password</label> <input type="password" name="password" class="form-control" id="account-password" placeholder="Password" autocomplete="new-password"> </div> <div class="form-group mb-2 pb-1"> <label>Choose a payment method <small class="d-block d-md-inline">(Click one of the options below)</small></label> <div class="row purchase__methods tailwind mt-1"> <div class="col-lg-6 method-column"> <a href="#" data-method="stripe" class="active"> <img src="/static/img/logos/cards.png" height="24" alt="Pay with card" /> <br /> <small>Pay with card</small> </a> </div> <div class="col-lg-6 method-column"> <a href="#" data-method="paypal"> <img src="/static/img/logos/paypal.png" height="24" alt="Pay with PayPal" /> <br /> <small>Pay with PayPal™</small> </a> </div> </div> </div> <div class="text-center"> <button class="btn btn-lg btn-block rounded btn-primary mb-2 buy-license copy-monthly" type="submit"><img src="/static/img/loading.gif" alt="Loading..." class="d-none float-left mt-1" width="16" height="16"/> Buy now $14</button> <button class="btn btn-lg btn-primary rounded mb-2 buy-license copy-quarterly d-none" type="submit"><img src="/static/img/loading.gif" alt="Loading..." class="d-none float-left mt-1" width="16" height="16"/> Buy now $44</button> <button class="btn btn-lg btn-primary rounded mb-2 buy-license copy-annual d-none" type="submit"><img src="/static/img/loading.gif" alt="Loading..." class="d-none float-left mt-1" width="16" height="16"/> Buy now $124</button> <div class="form-check"> <input type="checkbox" class="form-check-input" id="terms-accept" name="terms" value="1" /> <label class="form-check-label purchase__terms" for="terms-accept"> I agree to the <a href="/argon/static/files/terms-of-use.pdf" target="_blank" rel="noopener">terms of use</a> and <a href="/argon/static/files/privacy-policy.pdf" target="_blank" rel="noopener">privacy policy</a> <small>You must agree before submitting.</small> </label> </div> </div> </div> </div> </div> </form> </div> </div> </div> </div>  <script src="/external/creativetim/js/core/jquery.min.js"></script> <script src="/external/creativetim/js/core/popper.min.js"></script> <script src="/external/creativetim/js/core/bootstrap.min.js"></script> <script src="/external/creativetim/js/plugins/perfect-scrollbar.jquery.min.js"></script> <script src="/external/creativetim/js/plugins/bootstrap-switch.js"></script> <script src="/external/creativetim/js/plugins/nouislider.min.js"></script> <script src="/external/creativetim/js/plugins/glide.js"></script> <script src="/external/creativetim/js/plugins/moment.min.js"></script> <script src="/external/creativetim/js/plugins/choices.min.js"></script> <script src="/external/creativetim/js/plugins/datetimepicker.js"></script> <script src="/external/creativetim/js/plugins/jasny-bootstrap.min.js"></script> <script src="/external/creativetim/js/plugins/headroom.min.js"></script> <script src="/external/creativetim/js/argon-design-system.min.js?v=1.0.2"></script> <script src="/vendor/codemirror/codemirror.js"></script> <script src="/vendor/codemirror/closebrackets.js"></script> <script src="/vendor/codemirror/css.js"></script> <script src="/vendor/codemirror/sass.js"></script> <script src="/vendor/codemirror/xml.js"></script> <script src="/vendor/codemirror/javascript.js"></script> <script src="/vendor/codemirror/htmlmixed.js"></script> <script src="/vendor/codemirror/jsx.js"></script> <script src="/vendor/codemirror/addon/lint/lint.js"></script> <script src="/vendor/codemirror/addon/lint/html-lint.js"></script> <script src="/vendor/codemirror/addon/lint/css-lint.js"></script> <script src="/vendor/codemirror/addon/lint/javascript-lint.js"></script> <script src="/vendor/codemirror/htmlhint.js"></script> <script src="/vendor/codemirror/jshint.js"></script> <script src="/vendor/codemirror/csslint.js"></script> <script src="/components/nu/fc12c7e1-60ba-4706-be0f-a9f19841c205?version=1623225591"></script> <script> $('#modal-frontend-lib-select').modal('show'); var ua = window.navigator.userAgent; var isIE = ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0; if (isIE) { var alert = document.getElementById('outdated-browser'); alert.style.display = "block"; } var project = {"session_id":"1e048cta4dbd13255db38f1dd9e9669f8cf5da55","variables":[],"fonts":[],"pages":[],"custom_css":[],"frontend_lib_version":"argon\/1.0.2","next_revision_theme":1,"next_revision_pages":1,"next_revision_custom_css":1,"previewHash":null}; var theme_customizer_variables = {"$body-bg":{"default":"$white","computed":"#fff"},"$body-color":{"default":"$gray-700","computed":"#525f7f"},"$spacer":{"default":"1rem","computed":"1rem"},"$link-color":{"default":"$primary","computed":"#5e72e4"},"$link-decoration":{"default":"none","computed":"none"},"$link-hover-color":{"default":"darken($link-color, 15%)","computed":"#233dd2"},"$link-hover-decoration":{"default":"none","computed":"none"},"$emphasized-link-hover-darken-percentage":{"default":"15%","computed":"15%"},"$component-active-bg":{"default":"$primary","computed":"#5e72e4"},"$component-active-color":{"default":"$white","computed":"#fff"},"$shape-height-base":{"default":"1.5","computed":"1.5"},"$shape-height-sm":{"default":"1.5","computed":"1.5"},"$shape-height-lg":{"default":"1.5","computed":"1.5"},"$shape-height-xl":{"default":"1.5","computed":"1.5"},"$border-color":{"default":"$gray-200","computed":"#e9ecef"},"$border-width":{"default":".0625rem","computed":"0.0625rem"},"$enable-rounded":{"default":true,"computed":"true"},"$enable-transitions":{"default":true,"computed":"true"},"$enable-shadows":{"default":true,"computed":"true"},"$enable-gradients":{"default":false,"computed":"false"},"$border-radius":{"default":".25rem","computed":"0.25rem"},"$border-radius-sm":{"default":".2rem","computed":"0.2rem"},"$border-radius-lg":{"default":".3rem","computed":"0.3rem"},"$border-radius-xl":{"default":".35rem","computed":"0.35rem"},"$rounded-pill":{"default":"50rem","computed":"50rem"},"$box-shadow":{"default":"0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07)","computed":"0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)"},"$box-shadow-sm":{"default":"0 .125rem .25rem rgba($black, .075)","computed":"0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)"},"$box-shadow-lg":{"default":"0 1rem 3rem rgba($black, .175)","computed":"0 1rem 3rem rgba(0, 0, 0, 0.175)"},"$transition-base":{"default":"all .15s ease","computed":"all 0.15s ease"},"$transition-fade":{"default":"opacity .15s linear","computed":"opacity 0.15s linear"},"$transition-collapse":{"default":"height .35s ease","computed":"height 0.35s ease"},"$font-family-base":{"default":"'Open Sans', sans-serif","computed":"\"Open Sans\", sans-serif"},"$font-family-alt":{"default":"'Open Sans', sans-serif","computed":"\"Open Sans\", sans-serif"},"$font-weight-base":{"default":"$font-weight-normal","computed":"400"},"$font-weight-light":{"default":"300","computed":"300"},"$font-weight-normal":{"default":"400","computed":"400"},"$font-weight-bold":{"default":"600","computed":"600"},"$font-weight-extra-bold":{"default":"700","computed":"700"},"$font-size-base":{"default":"1rem","computed":"1rem"},"$font-size-xs":{"default":"($font-size-base * .75)","computed":"0.75rem"},"$font-size-sm":{"default":"($font-size-base * .875)","computed":"0.875rem"},"$font-size-lg":{"default":"($font-size-base * 1.25)","computed":"1.25rem"},"$font-size-xl":{"default":"($font-size-base * 1.5)","computed":"1.5rem"},"$line-height-base":{"default":"1.5","computed":"1.5"},"$line-height-sm":{"default":"1.5","computed":"1.5"},"$line-height-lg":{"default":"1.5","computed":"1.5"},"$headings-font-family":{"default":"inherit","computed":"inherit"},"$headings-font-weight":{"default":"$font-weight-normal","computed":"400"},"$headings-color":{"default":"$gray-800","computed":"#32325d"},"$h1-font-size":{"default":"$font-size-base * 2.5","computed":"2.5rem"},"$h2-font-size":{"default":"$font-size-base * 2","computed":"2rem"},"$h3-font-size":{"default":"$font-size-base * 1.75","computed":"1.75rem"},"$h4-font-size":{"default":"$font-size-base * 1.5","computed":"1.5rem"},"$h5-font-size":{"default":"$font-size-base * 1.25","computed":"1.25rem"},"$h6-font-size":{"default":"$font-size-base","computed":"1rem"},"$headings-line-height":{"default":"1.5","computed":"1.5"},"$headings-margin-bottom":{"default":"($spacer \/ 2)","computed":"0.5rem"},"$display1-size":{"default":"3.3rem","computed":"3.3rem"},"$display2-size":{"default":"2.75rem","computed":"2.75rem"},"$display3-size":{"default":"2.1875rem","computed":"2.1875rem"},"$display4-size":{"default":"1.6275rem","computed":"1.6275rem"},"$display1-weight":{"default":"$font-weight-bold","computed":"600"},"$display2-weight":{"default":"$font-weight-bold","computed":"600"},"$display3-weight":{"default":"$font-weight-bold","computed":"600"},"$display4-weight":{"default":"$font-weight-bold","computed":"600"},"$display-line-height":{"default":"$headings-line-height","computed":"1.5"},"$heading-letter-spacing":{"default":".025em","computed":"0.025em"},"$heading-font-size":{"default":".95rem","computed":"0.95rem"},"$heading-font-weight":{"default":"$headings-font-weight","computed":"400"},"$heading-text-transform":{"default":"uppercase","computed":"uppercase"},"$heading-title-letter-spacing":{"default":".025em","computed":"0.025em"},"$heading-title-font-size":{"default":"1.375rem","computed":"1.375rem"},"$heading-title-font-weight":{"default":"$font-weight-bold","computed":"600"},"$heading-title-text-transform":{"default":"uppercase","computed":"uppercase"},"$heading-section-letter-spacing":{"default":".025em","computed":"0.025em"},"$heading-section-font-size":{"default":"1.375rem","computed":"1.375rem"},"$heading-section-font-weight":{"default":"$font-weight-bold","computed":"600"},"$heading-section-text-transform":{"default":"uppercase","computed":"uppercase"},"$small-font-size":{"default":"80%","computed":"80%"},"$text-muted":{"default":"$gray-600","computed":"#8898aa"},"$paragraph-font-size":{"default":"1rem","computed":"1rem"},"$paragraph-font-weight":{"default":"300","computed":"300"},"$paragraph-line-height":{"default":"1.7","computed":"1.7"},"$paragraph-margin-bottom":{"default":"1rem","computed":"1rem"},"$lead-font-size":{"default":"($paragraph-font-size * 1.25)","computed":"1.25rem"},"$lead-font-weight":{"default":"300","computed":"300"},"$blockquote-font-size":{"default":"($font-size-base * 1.25)","computed":"1.25rem"},"$blockquote-small-color":{"default":"$gray-600","computed":"#8898aa"},"$mark-bg":{"default":"#fcf8e3","computed":"#fcf8e3"},"$mark-padding":{"default":".2em","computed":"0.2em"},"$dt-font-weight":{"default":"$font-weight-bold","computed":"600"},"$code-color":{"default":"$pink","computed":"#f3a4b5"},"$code-font-size":{"default":"87.5%","computed":"87.5%"},"$pre-color":{"default":"$gray-900","computed":"#212529"},"$pre-scrollable-max-height":{"default":"340px","computed":"340px"},"$kbd-bg":{"default":"$gray-900","computed":"#212529"},"$kbd-color":{"default":"$white","computed":"#fff"},"$kbd-font-size":{"default":"$code-font-size","computed":"87.5%"},"$nested-kbd-font-weight":{"default":"$font-weight-bold","computed":"600"},"$kbd-padding-y":{"default":".2rem","computed":"0.2rem"},"$kbd-padding-x":{"default":".4rem","computed":"0.4rem"},"$kbd-box-shadow":{"default":"inset 0 -.1rem 0 rgba($black, .25)","computed":"inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)"},"$primary":{"default":"#5e72e4","computed":"#5e72e4"},"$info":{"default":"$teal","computed":"#11cdef"},"$success":{"default":"$green","computed":"#2dce89"},"$danger":{"default":"$red","computed":"#f5365c"},"$warning":{"default":"$orange","computed":"#fb6340"},"$default":{"default":"#172b4d","computed":"#172b4d"},"$secondary":{"default":"#f4f5f7","computed":"#f4f5f7"},"$light":{"default":"$gray-500","computed":"#adb5bd"},"$dark":{"default":"$gray-900","computed":"#212529"},"$darker":{"default":"darken($gray-900, 15%)","computed":"black"},"$white":{"default":"#fff","computed":"#fff"},"$gray-100":{"default":"#f8f9fa","computed":"#f6f9fc"},"$gray-200":{"default":"#e9ecef","computed":"#e9ecef"},"$gray-300":{"default":"#dee2e6","computed":"#dee2e6"},"$gray-400":{"default":"#ced4da","computed":"#ced4da"},"$gray-500":{"default":"#adb5bd","computed":"#adb5bd"},"$gray-600":{"default":"#8898aa","computed":"#8898aa"},"$gray-700":{"default":"#525f7f","computed":"#525f7f"},"$gray-800":{"default":"#32325d","computed":"#32325d"},"$gray-900":{"default":"#212529","computed":"#212529"},"$black":{"default":"#000","computed":"#000"},"$blue":{"default":"#5e72e4","computed":"#5e72e4"},"$indigo":{"default":"#5603ad","computed":"#5603ad"},"$purple":{"default":"#8965e0","computed":"#8965e0"},"$pink":{"default":"#f3a4b5","computed":"#f3a4b5"},"$red":{"default":"#f5365c","computed":"#f5365c"},"$orange":{"default":"#fb6340","computed":"#fb6340"},"$yellow":{"default":"#ffd600","computed":"#ffd600"},"$green":{"default":"#2dce89","computed":"#2dce89"},"$teal":{"default":"#11cdef","computed":"#11cdef"},"$cyan":{"default":"#2bffc6","computed":"#2bffc6"},"$facebook":{"default":"#3b5999","computed":"#3b5999"},"$twitter":{"default":"#1da1f2","computed":"#1da1f2"},"$instagram":{"default":"#e4405f","computed":"#e4405f"},"$github":{"default":"#222222","computed":"#222222"},"$pinterest":{"default":"#bd081c","computed":"#bd081c"},"$youtube":{"default":"#cd201f","computed":"#cd201f"},"$vimeo":{"default":"#1AB7EA","computed":"#1AB7EA"},"$slack":{"default":"#3aaf85","computed":"#3aaf85"},"$dribbble":{"default":"#ea4c89","computed":"#ea4c89"},"$behance":{"default":"#1769ff","computed":"#1769ff"},"$reddit":{"default":"#ff4500","computed":"#ff4500"},"$tumblr":{"default":"#35465c","computed":"#35465c"},"$linkedin":{"default":"#0077B5","computed":"#0077B5"},"$facebook-states":{"default":"darken($facebook, 5%)","computed":"#344e87"},"$twitter-states":{"default":"darken($twitter, 5%)","computed":"#0d95e8"},"$instagram-states":{"default":"darken($instagram, 6%)","computed":"#e02549"},"$linkedin-states":{"default":"darken($linkedin, 5%)","computed":"#00669c"},"$pinterest-states":{"default":"darken($pinterest, 6%)","computed":"#a00718"},"$youtube-states":{"default":"darken($youtube, 6%)","computed":"#b21c1b"},"$slack-states":{"default":"darken($slack, 6%)","computed":"#329874"},"$dribbble-states":{"default":"darken($dribbble, 6%)","computed":"#e73177"},"$github-states":{"default":"darken($github, 6%)","computed":"#131313"},"$reddit-states":{"default":"darken($reddit, 6%)","computed":"#e03d00"},"$tumblr-states":{"default":"darken($tumblr, 6%)","computed":"#2a3749"},"$behance-states":{"default":"darken($behance, 6%)","computed":"#0057f7"},"$vimeo-states":{"default":"darken($vimeo, 6%)","computed":"#13a3d2"},"$favorite-color":{"default":"$yellow","computed":"#ffd600"},"$like-color":{"default":"$blue","computed":"#5e72e4"},"$love-color":{"default":"$red","computed":"#f5365c"},"$btn-font-weight":{"default":"600","computed":"600"},"$btn-text-transform":{"default":"uppercase","computed":"uppercase"},"$btn-letter-spacing":{"default":".025em","computed":"0.025em"},"$btn-line-height":{"default":"$input-btn-line-height","computed":"1.5"},"$btn-padding-y":{"default":"$input-btn-padding-y","computed":"0.625rem"},"$btn-padding-x":{"default":"$input-btn-padding-x","computed":"1.25rem"},"$btn-border-width":{"default":"$input-btn-border-width","computed":"1px"},"$btn-border-radius":{"default":"$input-border-radius","computed":"0.25rem"},"$btn-focus-width":{"default":"$input-btn-focus-width","computed":"$input-btn-focus-width"},"$btn-box-shadow":{"default":"0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)","computed":"0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)"},"$btn-hover-box-shadow":{"default":"0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)","computed":"0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"},"$btn-focus-box-shadow":{"default":"$btn-hover-box-shadow","computed":"0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"},"$btn-active-box-shadow":{"default":"none","computed":"none"},"$btn-disabled-opacity":{"default":".65","computed":"0.65"},"$btn-link-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$btn-transition":{"default":"$transition-base","computed":"all 0.15s ease"},"$btn-block-spacing-y":{"default":".5rem","computed":"0.5rem"},"$btn-font-size-sm":{"default":"$input-btn-font-size-sm","computed":"0.75rem"},"$btn-line-height-sm":{"default":"$input-btn-line-height-sm","computed":"1.5"},"$btn-padding-y-sm":{"default":"$input-btn-padding-y-sm","computed":"0.25rem"},"$btn-padding-x-sm":{"default":"$input-btn-padding-x-sm","computed":"0.5rem"},"$btn-border-radius-sm":{"default":"$input-border-radius","computed":"0.25rem"},"$btn-line-height-lg":{"default":"$input-btn-line-height-lg","computed":"1.5"},"$btn-padding-y-lg":{"default":"$input-btn-padding-y-lg","computed":"0.875rem"},"$btn-padding-x-lg":{"default":"$input-btn-padding-x-lg","computed":"1rem"},"$btn-border-radius-lg":{"default":"$input-border-radius-lg","computed":"0.3rem"},"$dropdown-bg":{"default":"$white","computed":"#fff"},"$dropdown-divider-bg":{"default":"$gray-200","computed":"#e9ecef"},"$dropdown-border-width":{"default":"0","computed":"0"},"$dropdown-border-radius":{"default":"$border-radius-lg","computed":"0.3rem"},"$dropdown-border-color":{"default":"rgba($black, .15)","computed":"rgba(0, 0, 0, 0.15)"},"$dropdown-box-shadow":{"default":"0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)","computed":"0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1)"},"$dropdown-padding-y":{"default":".5rem","computed":"0.5rem"},"$dropdown-link-color":{"default":"$gray-900","computed":"#212529"},"$dropdown-link-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$dropdown-link-hover-color":{"default":"darken($gray-900, 5%)","computed":"#16181b"},"$dropdown-link-active-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$dropdown-link-active-color":{"default":"$component-active-color","computed":"#fff"},"$enable-caret":{"default":true,"computed":"true"},"$caret-width":{"default":".3em","computed":"0.3em"},"$close-color":{"default":"rgba(0, 0, 0, .6)","computed":"rgba(0, 0, 0, 0.6)"},"$close-bg":{"default":"transparent","computed":"transparent"},"$close-hover-color":{"default":"rgba(0, 0, 0, .9)","computed":"rgba(0, 0, 0, 0.9)"},"$close-hover-bg":{"default":"transparent","computed":"transparent"},"$close-text-shadow":{"default":"none","computed":"none"},"$close-font-weight":{"default":"$font-weight-bold","computed":"600"},"$navbar-padding-y":{"default":"1rem","computed":"1rem"},"$navbar-padding-x":{"default":"1rem","computed":"1rem"},"$navbar-nav-link-font-family":{"default":"$font-family-alt","computed":"\"Open Sans\", sans-serif"},"$navbar-nav-link-font-size":{"default":".9rem","computed":"0.9rem"},"$navbar-nav-link-font-weight":{"default":"400","computed":"400"},"$navbar-nav-link-text-transform":{"default":"none","computed":"normal"},"$navbar-nav-link-letter-spacing":{"default":"0","computed":"0"},"$navbar-nav-link-padding-y":{"default":"1rem","computed":"1rem"},"$navbar-nav-link-padding-x":{"default":"1rem","computed":"1rem"},"$navbar-nav-link-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$navbar-transition":{"default":"all .15s linear","computed":"all 0.15s linear"},"$navbar-toggler-font-size":{"default":"$font-size-lg","computed":"1.25rem"},"$navbar-toggler-border-radius":{"default":"$btn-border-radius","computed":"0.25rem"},"$navbar-toggler-padding-y":{"default":".25rem","computed":"0.25rem"},"$navbar-toggler-padding-x":{"default":".75rem","computed":"0.75rem"},"$navbar-dark-color":{"default":"rgba($white, .95)","computed":"rgba(255, 255, 255, 0.95)"},"$navbar-dark-hover-color":{"default":"rgba($white, .65)","computed":"rgba(255, 255, 255, 0.65)"},"$navbar-dark-active-color":{"default":"rgba($white, .65)","computed":"rgba(255, 255, 255, 0.65)"},"$navbar-dark-disabled-color":{"default":"rgba($white, .25)","computed":"rgba(255, 255, 255, 0.25)"},"$navbar-dark-bg":{"default":"transparent","computed":"transparent"},"$navbar-dark-hover-bg":{"default":"rgba(255, 255, 255, .1)","computed":"rgba(255, 255, 255, 0.1)"},"$navbar-dark-active-bg":{"default":"rgba(255, 255, 255, .1)","computed":"rgba(255, 255, 255, 0.1)"},"$navbar-dark-toggler-border-color":{"default":"transparent","computed":"transparent"},"$navbar-dark-toggler-icon-bg":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http:\/\/www.w3.org\/2000\/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http:\/\/www.w3.org\/2000\/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'\/%3e%3c\/svg%3e\")"},"$navbar-dark-brand-color":{"default":"$navbar-dark-active-color","computed":"rgba(255, 255, 255, 0.65)"},"$navbar-dark-brand-hover-color":{"default":"$navbar-dark-active-color","computed":"rgba(255, 255, 255, 0.65)"},"$navbar-light-color":{"default":"rgba($black, .5)","computed":"rgba(0, 0, 0, 0.5)"},"$navbar-light-hover-color":{"default":"rgba($black, .7)","computed":"rgba(0, 0, 0, 0.7)"},"$navbar-light-active-color":{"default":"rgba($black, .9)","computed":"rgba(0, 0, 0, 0.9)"},"$navbar-light-disabled-color":{"default":"rgba($black, .3)","computed":"rgba(0, 0, 0, 0.3)"},"$navbar-light-bg":{"default":"transparent","computed":"transparent"},"$navbar-light-hover-bg":{"default":"rgba(0, 0, 0, .1)","computed":"rgba(0, 0, 0, 0.1)"},"$navbar-light-active-bg":{"default":"rgba(0, 0, 0, .1)","computed":"rgba(0, 0, 0, 0.1)"},"$navbar-light-toggler-border-color":{"default":"transparent","computed":"transparent"},"$navbar-light-brand-color":{"default":"$navbar-light-active-color","computed":"rgba(0, 0, 0, 0.9)"},"$navbar-light-brand-hover-color":{"default":"$navbar-light-active-color","computed":"rgba(0, 0, 0, 0.9)"},"$nav-pills-bg":{"default":"$white","computed":"#fff"},"$nav-pills-link-color":{"default":"$primary","computed":"#5e72e4"},"$nav-pills-link-hover-color":{"default":"darken($primary, 5%)","computed":"#485fe0"},"$nav-pills-link-active-bg":{"default":"$primary","computed":"#5e72e4"},"$nav-pills-link-active-color":{"default":"color-yiq($primary)","computed":"#fff"},"$nav-pills-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$nav-pills-box-shadow":{"default":"$btn-box-shadow","computed":"0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)"},"$nav-pills-padding-y":{"default":".75rem","computed":"0.75rem"},"$nav-pills-padding-x":{"default":"1rem","computed":"1rem"},"$nav-pills-space-x":{"default":"1rem","computed":"1rem"},"$breadcrumb-bg":{"default":"$gray-200","computed":"#e9ecef"},"$breadcrumb-active-color":{"default":"$gray-600","computed":"#8898aa"},"$breadcrumb-divider":{"default":"quote(\"\/\")","computed":"\/"},"$breadcrumb-divider-color":{"default":"$gray-600","computed":"#8898aa"},"$breadcrumb-padding-y":{"default":".75rem","computed":"0.75rem"},"$breadcrumb-padding-x":{"default":"1rem","computed":"1rem"},"$breadcrumb-item-padding":{"default":".5rem","computed":"0.5rem"},"$breadcrumb-margin-bottom":{"default":"1rem","computed":"1rem"},"$breadcrumb-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$pagination-bg":{"default":"$white","computed":"#fff"},"$pagination-color":{"default":"$gray-600","computed":"#8898aa"},"$pagination-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$pagination-border-width":{"default":"$border-width","computed":"0.0625rem"},"$pagination-hover-bg":{"default":"$gray-300","computed":"#dee2e6"},"$pagination-hover-color":{"default":"$gray-600","computed":"#8898aa"},"$pagination-hover-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$pagination-active-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$pagination-active-color":{"default":"$component-active-color","computed":"#fff"},"$pagination-active-border-color":{"default":"$pagination-active-bg","computed":"#5e72e4"},"$pagination-active-box-shadow":{"default":"$btn-hover-box-shadow","computed":"0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"},"$pagination-disabled-bg":{"default":"$white","computed":"#fff"},"$pagination-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$pagination-disabled-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$pagination-focus-box-shadow":{"default":"$input-btn-focus-box-shadow","computed":"$input-btn-focus-box-shadow"},"$pagination-focus-outline":{"default":"0","computed":"0"},"$card-bg":{"default":"$white","computed":"#fff"},"$card-box-shadow":{"default":"$box-shadow","computed":"0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07)"},"$card-border-color":{"default":"rgba($black, .05)","computed":"rgba(0, 0, 0, 0.05)"},"$card-border-width":{"default":"$border-width","computed":"0.0625rem"},"$card-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$card-inner-border-radius":{"default":"calc(#{$card-border-radius} - #{$card-border-width})","computed":"calc(0.25rem - 0.0625rem)"},"$card-spacer-y":{"default":"1.25rem","computed":"1.25rem"},"$card-spacer-x":{"default":"1.5rem","computed":"1.5rem"},"$card-img-overlay-padding":{"default":"1.25rem","computed":"1.25rem"},"$card-background-height":{"default":"330px","computed":"330px"},"$card-background-height-sm":{"default":"380px","computed":"380px"},"$card-background-height-lg":{"default":"550px","computed":"550px"},"$margin-bottom":{"default":"10px","computed":"10px"},"$margin-lg-vertical":{"default":"30px","computed":"30px"},"$card-group-margin":{"default":"($grid-gutter-width \/ 2)","computed":"($grid-gutter-width \/ 2)"},"$card-deck-margin":{"default":"$card-group-margin","computed":"$card-group-margin"},"$card-columns-count":{"default":"3","computed":"3"},"$card-columns-gap":{"default":"1.25rem","computed":"1.25rem"},"$card-columns-margin":{"default":"$card-spacer-y","computed":"1.25rem"},"$transition-bezier-rotating-card":{"default":"cubic-bezier(0.34, 1.45, 0.7, 1)","computed":"cubic-bezier(0.34, 1.45, 0.7, 1)"},"$carousel-caption-color":{"default":"$white","computed":"#fff"},"$carousel-caption-width":{"default":"70%","computed":"70%"},"$carousel-control-color":{"default":"$white","computed":"#fff"},"$carousel-control-width":{"default":"15%","computed":"15%"},"$carousel-control-opacity":{"default":".5","computed":"0.5"},"$carousel-control-hover-opacity":{"default":".9","computed":"0.9"},"$carousel-control-transition":{"default":"opacity .15s ease","computed":"opacity 0.15s ease"},"$carousel-control-prev-icon-bg":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'\/><\/svg>\")"},"$carousel-control-next-icon-bg":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'\/><\/svg>\")"},"$carousel-control-icon-width":{"default":"20px","computed":"20px"},"$carousel-indicator-width":{"default":"30px","computed":"30px"},"$carousel-indicator-height":{"default":"3px","computed":"3px"},"$carousel-indicator-hit-area-height":{"default":"10px","computed":"10px"},"$carousel-indicator-spacer":{"default":"3px","computed":"3px"},"$carousel-indicator-active-bg":{"default":"$white","computed":"#fff"},"$carousel-indicator-transition":{"default":"opacity .6s ease","computed":"opacity 0.6s ease"},"$carousel-transition":{"default":"transform $carousel-transition-duration ease-in-out","computed":"transform $carousel-transition-duration ease-in-out"},"$carousel-transition-duration":{"default":".6s","computed":"0.6s"},"$list-group-bg":{"default":"$white","computed":"#fff"},"$list-group-hover-bg":{"default":"$gray-100","computed":"#f6f9fc"},"$list-group-border-color":{"default":"$border-color","computed":"#e9ecef"},"$list-group-border-width":{"default":"$border-width","computed":"0.0625rem"},"$list-group-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$list-group-active-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$list-group-active-color":{"default":"$component-active-color","computed":"#fff"},"$list-group-active-border-color":{"default":"$list-group-active-bg","computed":"#5e72e4"},"$list-group-disabled-bg":{"default":"$list-group-bg","computed":"#fff"},"$list-group-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$list-group-item-padding-y":{"default":"1rem","computed":"1rem"},"$list-group-item-padding-x":{"default":"1rem","computed":"1rem"},"$list-group-action-color":{"default":"$gray-700","computed":"#525f7f"},"$list-group-action-hover-color":{"default":"$list-group-action-color","computed":"#525f7f"},"$list-group-action-active-bg":{"default":"$gray-200","computed":"#e9ecef"},"$list-group-action-active-color":{"default":"$list-group-action-color","computed":"#525f7f"},"$label-margin-bottom":{"default":".5rem","computed":"0.5rem"},"$custom-control-label-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$input-bg":{"default":"$white","computed":"#fff"},"$input-color":{"default":"$gray-600","computed":"#8898aa"},"$input-placeholder-color":{"default":"$gray-500","computed":"#adb5bd"},"$input-focus-placeholder-color":{"default":"$gray-500","computed":"#adb5bd"},"$input-disabled-bg":{"default":"$gray-200","computed":"#e9ecef"},"$input-muted-bg":{"default":"#EDF0F5","computed":"#EDF0F5"},"$input-plaintext-color":{"default":"$body-color","computed":"#525f7f"},"$input-border-color":{"default":"#cad1d7","computed":"#cad1d7"},"$input-border-width":{"default":"$input-btn-border-width","computed":"1px"},"$input-height-border":{"default":"($input-border-width * 2)","computed":"2px"},"$input-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$input-border-radius-sm":{"default":"$border-radius-sm","computed":"0.2rem"},"$input-border-radius-lg":{"default":"$border-radius-lg","computed":"0.3rem"},"$input-border-radius-xl":{"default":"$border-radius-xl","computed":"0.35rem"},"$input-box-shadow":{"default":"none","computed":"none"},"$input-focus-bg":{"default":"$white","computed":"#fff"},"$input-focus-width":{"default":"0","computed":"0"},"$input-focus-color":{"default":"$input-color","computed":"#8898aa"},"$input-focus-border-color":{"default":"rgba(50,151,211,.25)","computed":"rgba(50, 151, 211, 0.25)"},"$input-focus-box-shadow":{"default":"none","computed":"none"},"$input-alternative-box-shadow":{"default":"0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02)","computed":"0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02)"},"$input-focus-alternative-box-shadow":{"default":"0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)","computed":"0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)"},"$input-font-size-sm":{"default":"$input-btn-font-size-sm","computed":"0.75rem"},"$input-font-size-lg":{"default":"$input-btn-font-size-lg","computed":"0.875rem"},"$input-font-weight":{"default":"$font-weight-base","computed":"400"},"$input-padding-y":{"default":"$input-btn-padding-y","computed":"0.625rem"},"$input-padding-x":{"default":"$input-btn-padding-x","computed":"0.75rem"},"$input-padding-y-sm":{"default":"$input-btn-padding-y-sm","computed":"0.25rem"},"$input-padding-x-sm":{"default":"$input-btn-padding-x-sm","computed":"0.5rem"},"$input-padding-y-lg":{"default":"$input-btn-padding-y-lg","computed":"0.875rem"},"$input-padding-x-lg":{"default":"$input-btn-padding-x-lg","computed":"1rem"},"$input-line-height":{"default":"$input-btn-line-height","computed":"1.5"},"$input-line-height-sm":{"default":"$input-btn-line-height-sm","computed":"1.5"},"$input-line-height-lg":{"default":"$input-btn-line-height-lg","computed":"1.5"},"$input-height":{"default":"calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border})","computed":"calc(1.5em + 1.25rem + 2px)"},"$input-height-sm":{"default":"calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border})","computed":"calc(1.5em + 0.5rem + 2px)"},"$input-height-lg":{"default":"calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border})","computed":"calc(1.5em + 1.75rem + 2px)"},"$form-check-input-margin-y":{"default":".3rem","computed":"0.3rem"},"$form-check-input-gutter":{"default":"1.25rem","computed":"1.25rem"},"$form-check-input-margin-x":{"default":".25rem","computed":"0.25rem"},"$input-btn-font-size":{"default":".875rem","computed":"0.875rem"},"$input-btn-font-size-sm":{"default":".75rem","computed":"0.75rem"},"$input-btn-font-size-lg":{"default":".875rem","computed":"0.875rem"},"$input-btn-border-width":{"default":"1px","computed":"1px"},"$input-btn-focus-width":{"default":"0","computed":"0"},"$input-btn-focus-color":{"default":"rgba($component-active-bg, 1)","computed":"#5e72e4"},"$input-btn-focus-box-shadow":{"default":"none","computed":"none"},"$input-btn-padding-y":{"default":".625rem","computed":"0.625rem"},"$input-btn-padding-x":{"default":".75rem","computed":"0.75rem"},"$input-btn-padding-y-sm":{"default":".25rem","computed":"0.25rem"},"$input-btn-padding-x-sm":{"default":".5rem","computed":"0.5rem"},"$input-btn-padding-y-lg":{"default":".875rem","computed":"0.875rem"},"$input-btn-padding-x-lg":{"default":"1rem","computed":"1rem"},"$input-btn-line-height":{"default":"$shape-height-base","computed":"1.5"},"$input-btn-line-height-sm":{"default":"$shape-height-sm","computed":"1.5"},"$input-btn-line-height-lg":{"default":"$shape-height-lg","computed":"1.5"},"$form-feedback-valid-bg":{"default":"lighten($success, 15%)","computed":"#69deac"},"$form-feedback-valid-color":{"default":"$success","computed":"#2dce89"},"$form-feedback-invalid-bg":{"default":"lighten($warning, 15%)","computed":"#fda08b"},"$form-feedback-invalid-color":{"default":"$danger","computed":"#fb6340"},"$input-group-addon-bg":{"default":"$input-bg","computed":"#fff"},"$input-group-addon-color":{"default":"$input-placeholder-color","computed":"#adb5bd"},"$input-group-addon-border-color":{"default":"$input-border-color","computed":"#cad1d7"},"$input-group-addon-focus-color":{"default":"$input-focus-color","computed":"#8898aa"},"$input-group-addon-focus-bg":{"default":"$input-focus-bg","computed":"#fff"},"$input-group-addon-focus-border-color":{"default":"$input-focus-border-color","computed":"rgba(50, 151, 211, 0.25)"},"$form-group-margin-bottom":{"default":"1rem","computed":"1rem"},"$form-text-margin-top":{"default":".25rem","computed":"0.25rem"},"$custom-control-indicator-size":{"default":"1.25rem","computed":"1.25rem"},"$custom-control-indicator-bg-size":{"default":"50% 50%","computed":"50% 50%"},"$custom-control-indicator-bg":{"default":"$input-bg","computed":"#fff"},"$custom-control-indicator-box-shadow":{"default":"none","computed":"none"},"$custom-control-indicator-border-color":{"default":"$input-border-color","computed":"#cad1d7"},"$custom-control-indicator-border-width":{"default":"1px","computed":"1px"},"$custom-control-indicator-checked-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$custom-control-indicator-checked-color":{"default":"$component-active-color","computed":"#fff"},"$custom-control-indicator-checked-box-shadow":{"default":"$custom-control-indicator-box-shadow","computed":"none"},"$custom-control-indicator-checked-border-color":{"default":"$component-active-border-color","computed":"#5e72e4"},"$custom-control-indicator-active-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$custom-control-indicator-active-color":{"default":"$component-active-color","computed":"#fff"},"$custom-control-indicator-active-box-shadow":{"default":"$custom-control-indicator-box-shadow","computed":"none"},"$custom-control-indicator-active-border-color":{"default":"$component-active-border-color","computed":"#5e72e4"},"$custom-control-indicator-focus-box-shadow":{"default":"$input-btn-focus-box-shadow","computed":"none"},"$custom-control-indicator-focus-border-color":{"default":"$input-focus-border-color","computed":"rgba(50, 151, 211, 0.25)"},"$custom-control-indicator-disabled-bg":{"default":"$gray-200","computed":"#e9ecef"},"$custom-control-indicator-checked-disabled-bg":{"default":"rgba($primary, .5)","computed":"rgba(94, 114, 228, 0.5)"},"$custom-forms-transition":{"default":"background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out","computed":"background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"},"$custom-control-spacer-x":{"default":"1rem","computed":"1rem"},"$custom-radio-indicator-border-radius":{"default":"50%","computed":"50%"},"$custom-radio-indicator-icon-checked":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'\/><\/svg>\")"},"$custom-toggle-slider-bg":{"default":"$gray-200","computed":"#ddd"},"$custom-toggle-checked-bg":{"default":"$primary","computed":"#5e72e4"},"$custom-toggle-border-color":{"default":"$gray-400","computed":"#ced4da"},"$custom-toggle-width":{"default":"52px","computed":"52px"},"$custom-checkbox-indicator-border-radius":{"default":"$border-radius-sm","computed":"0.2rem"},"$custom-checkbox-indicator-icon-checked":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")"},"$custom-checkbox-indicator-indeterminate-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$custom-checkbox-indicator-indeterminate-border-color":{"default":"$custom-checkbox-indicator-indeterminate-bg","computed":"#5e72e4"},"$custom-checkbox-indicator-indeterminate-box-shadow":{"default":"none","computed":"none"},"$custom-checkbox-indicator-icon-indeterminate":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#fff' d='M0 2h4'\/><\/svg>\")"},"$custom-checkbox-indicator-indeterminate-color":{"default":"$custom-control-indicator-checked-color","computed":"#fff"},"$component-active-border-color":{"default":"$primary","computed":"#5e72e4"},"$component-hover-bg":{"default":"$gray-300","computed":"#dee2e6"},"$component-hover-color":{"default":"$gray-300","computed":"#dee2e6"},"$component-hover-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$custom-select-bg":{"default":"$input-bg","computed":"#fff"},"$custom-select-background":{"default":"$custom-select-indicator no-repeat right $custom-select-padding-x center \/ $custom-select-bg-size","computed":"$custom-select-indicator no-repeat right $custom-select-padding-x center \/ $custom-select-bg-size"},"$custom-select-color":{"default":"$input-color","computed":"#8898aa"},"$custom-select-font-weight":{"default":"$input-font-weight","computed":"400"},"$custom-select-disabled-bg":{"default":"$gray-200","computed":"#e9ecef"},"$custom-select-disabled-color":{"default":"$gray-600","computed":"#8898aa"},"$custom-select-border-color":{"default":"$input-border-color","computed":"#cad1d7"},"$custom-select-border-width":{"default":"$input-border-width","computed":"1px"},"$custom-select-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$custom-select-box-shadow":{"default":"inset 0 1px 2px rgba($black, .075)","computed":"inset 0 1px 2px rgba(0, 0, 0, 0.075)"},"$custom-select-focus-border-color":{"default":"$input-focus-border-color","computed":"rgba(50, 151, 211, 0.25)"},"$custom-select-focus-box-shadow":{"default":"0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5)","computed":"0 0 0 0 #5e72e4"},"$custom-select-focus-width":{"default":"$input-focus-width","computed":"$input-focus-width"},"$custom-select-padding-y":{"default":"$input-btn-padding-y","computed":"0.625rem"},"$custom-select-padding-x":{"default":"$input-btn-padding-x","computed":"0.75rem"},"$custom-select-height":{"default":"$input-height","computed":"calc(1.5em + 1.25rem + 2px)"},"$custom-select-line-height":{"default":"$input-line-height","computed":"1.5"},"$custom-select-feedback-icon-padding-right":{"default":"$input-height-inner * 3 \/ 4 + $custom-select-padding-x + $custom-select-indicator-padding","computed":"calc(0.75em + 2.6875rem)"},"$custom-select-feedback-icon-position":{"default":"center right ($custom-select-padding-x + $custom-select-indicator-padding)","computed":"center right 1.75rem"},"$custom-select-feedback-icon-size":{"default":"($input-height-inner \/ 2) ($input-height-inner \/ 2)","computed":"calc(0.75em + 0.625rem) calc(0.75em + 0.625rem)"},"$custom-select-indicator":{"default":"str-replace(url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'\/%3e%3c\/svg%3e\"), \"#\", \"%23\")","computed":"url(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#32325d' d='M2 0L0 2h4zm0 5L0 3h4z'\/><\/svg>\")"},"$custom-select-indicator-color":{"default":"$gray-800","computed":"#32325d"},"$custom-select-indicator-padding":{"default":"$input-height","computed":"$input-height"},"$custom-select-bg-size":{"default":"8px 10px","computed":"8px 10px"},"$custom-select-font-size-sm":{"default":"$input-btn-font-size-sm","computed":"0.75rem"},"$custom-select-font-size-lg":{"default":"$input-btn-font-size-lg","computed":"0.875rem"},"$custom-select-padding-x-sm":{"default":"$input-padding-x-sm","computed":"0.5rem"},"$custom-select-padding-y-sm":{"default":"$input-padding-y-sm","computed":"0.25rem"},"$custom-select-height-sm":{"default":"$input-height-sm","computed":"calc(1.5em + 0.5rem + 2px)"},"$custom-select-padding-x-lg":{"default":"$input-padding-x-lg","computed":"1rem"},"$custom-select-padding-y-lg":{"default":"$input-padding-y-lg","computed":"0.875rem"},"$custom-select-height-lg":{"default":"$input-height-lg","computed":"calc(1.5em + 1.75rem + 2px)"},"$custom-file-bg":{"default":"$input-bg","computed":"#fff"},"$custom-file-color":{"default":"$input-color","computed":"#8898aa"},"$custom-file-font-weight":{"default":"$input-font-weight","computed":"400"},"$custom-file-button-bg":{"default":"$input-group-addon-bg","computed":"#fff"},"$custom-file-button-color":{"default":"$custom-file-color","computed":"#8898aa"},"$custom-file-padding-y":{"default":"$input-padding-y","computed":"0.625rem"},"$custom-file-padding-x":{"default":"$input-padding-x","computed":"0.75rem"},"$custom-file-height":{"default":"$input-height","computed":"calc(1.5em + 1.25rem + 2px)"},"$custom-file-height-inner":{"default":"$input-height-inner","computed":"calc(1.5em + 1.25rem)"},"$custom-file-line-height":{"default":"$input-line-height","computed":"1.5"},"$custom-file-border-color":{"default":"$input-border-color","computed":"#cad1d7"},"$custom-file-border-width":{"default":"$input-btn-border-width","computed":"1px"},"$custom-file-border-radius":{"default":"$input-border-radius","computed":"0.25rem"},"$custom-file-box-shadow":{"default":"$input-box-shadow","computed":"none"},"$custom-file-focus-border-color":{"default":"$input-focus-border-color","computed":"rgba(50, 151, 211, 0.25)"},"$custom-file-focus-box-shadow":{"default":"$input-focus-box-shadow","computed":"none"},"$custom-file-disabled-bg":{"default":"$input-disabled-bg","computed":"#e9ecef"},"$custom-range-track-width":{"default":"100%","computed":"100%"},"$custom-range-track-height":{"default":".5rem","computed":"0.5rem"},"$custom-range-track-bg":{"default":"$gray-300","computed":"#dee2e6"},"$custom-range-track-border-radius":{"default":"1rem","computed":"1rem"},"$custom-range-track-cursor":{"default":"pointer","computed":"pointer"},"$custom-range-track-box-shadow":{"default":"inset 0 .25rem .25rem rgba($black, .1)","computed":"inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1)"},"$custom-range-thumb-width":{"default":"1rem","computed":"1rem"},"$custom-range-thumb-height":{"default":"$custom-range-thumb-width","computed":"1rem"},"$custom-range-thumb-bg":{"default":"$component-active-bg","computed":"#5e72e4"},"$custom-range-thumb-active-bg":{"default":"lighten($component-active-bg, 35%)","computed":"#f7f8fe"},"$custom-range-thumb-border":{"default":"0","computed":"0"},"$custom-range-thumb-border-radius":{"default":"1rem","computed":"1rem"},"$custom-range-thumb-box-shadow":{"default":"0 .1rem .25rem rgba($black, .1)","computed":"0 0.1rem 0.25rem rgba(0, 0, 0, 0.1)"},"$custom-range-thumb-focus-box-shadow":{"default":"0 0 0 1px $body-bg, $input-focus-box-shadow","computed":"0 0 0 1px #fff, none"},"$custom-range-thumb-disabled-bg":{"default":"$gray-500","computed":"#adb5bd"},"$table-body-font-size":{"default":".8125rem","computed":"0.8125rem"},"$table-bg":{"default":"transparent","computed":"transparent"},"$table-hover-bg":{"default":"$gray-100","computed":"rgba(0, 0, 0, 0.075)"},"$table-active-bg":{"default":"$table-hover-bg","computed":"rgba(0, 0, 0, 0.075)"},"$table-accent-bg":{"default":"rgba($gray-100, .3)","computed":"rgba(0, 0, 0, 0.05)"},"$table-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$table-border-width":{"default":"$border-width","computed":"0.0625rem"},"$table-cell-padding":{"default":"1rem","computed":"1rem"},"$table-cell-padding-sm":{"default":".5rem","computed":"0.3rem"},"$table-caption-color":{"default":"$text-muted","computed":"#8898aa"},"$table-head-bg":{"default":"$gray-200","computed":"#e9ecef"},"$table-head-color":{"default":"$gray-700","computed":"#525f7f"},"$table-head-spacer-y":{"default":".75rem","computed":"0.75rem"},"$table-head-font-size":{"default":".65rem","computed":"0.65rem"},"$table-head-font-weight":{"default":"$font-weight-bold","computed":"600"},"$table-head-text-transform":{"default":"uppercase","computed":"uppercase"},"$table-head-letter-spacing":{"default":"1px","computed":"1px"},"$table-dark-bg":{"default":"$default","computed":"#212529"},"$table-dark-color":{"default":"$body-bg","computed":"#fff"},"$table-dark-hover-bg":{"default":"rgba($white, .075)","computed":"rgba(255, 255, 255, 0.075)"},"$table-dark-accent-bg":{"default":"rgba($white, .05)","computed":"rgba(255, 255, 255, 0.05)"},"$table-dark-border-color":{"default":"lighten($default, 7.5%)","computed":"#32383e"},"$table-dark-head-bg":{"default":"lighten($default, 4%)","computed":"#1c345d"},"$table-dark-head-color":{"default":"lighten($default, 35%)","computed":"#4d7bca"},"$alert-padding-y":{"default":"1rem","computed":"1rem"},"$alert-padding-x":{"default":"1.5rem","computed":"1.5rem"},"$alert-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$alert-margin-bottom":{"default":"1rem","computed":"1rem"},"$alert-link-font-weight":{"default":"$font-weight-bold","computed":"600"},"$alert-bg-level":{"default":"-2","computed":"-2"},"$alert-border-level":{"default":"-2","computed":"-2"},"$alert-color-level":{"default":"0","computed":"0"},"$badge-font-size":{"default":"66%","computed":"66%"},"$badge-font-weight":{"default":"$font-weight-bold","computed":"600"},"$badge-text-transfom":{"default":"uppercase","computed":"uppercase"},"$badge-padding-y":{"default":".35rem","computed":"0.35rem"},"$badge-padding-x":{"default":".375rem","computed":"0.375rem"},"$badge-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$badge-pill-padding-x":{"default":".875em","computed":"0.875em"},"$badge-pill-border-radius":{"default":"10rem","computed":"10rem"},"$modal-content-bg":{"default":"$white","computed":"#fff"},"$modal-content-border-width":{"default":"1px","computed":"1px"},"$modal-content-border-radius":{"default":"$border-radius-lg","computed":"0.3rem"},"$modal-content-box-shadow-xs":{"default":"0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)","computed":"0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)"},"$modal-content-box-shadow-sm-up":{"default":"0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17)","computed":"0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17)"},"$modal-backdrop-bg":{"default":"$black","computed":"#000"},"$modal-backdrop-opacity":{"default":".16","computed":"0.16"},"$modal-dialog-margin":{"default":".5rem","computed":"0.5rem"},"$modal-dialog-margin-y-sm-up":{"default":"1.75rem","computed":"1.75rem"},"$modal-title-line-height":{"default":"1.1","computed":"1.1"},"$modal-header-padding-y":{"default":"1.25rem","computed":"1rem"},"$modal-header-padding-x":{"default":"1.25rem","computed":"1rem"},"$modal-header-border-color":{"default":"$gray-200","computed":"#e9ecef"},"$modal-header-border-width":{"default":"$modal-content-border-width","computed":"1px"},"$modal-inner-padding":{"default":"1.5rem","computed":"1.5rem"},"$modal-footer-border-color":{"default":"$modal-header-border-color","computed":"#e9ecef"},"$modal-footer-border-width":{"default":"$modal-header-border-width","computed":"1px"},"$modal-sm":{"default":"380px","computed":"380px"},"$modal-md":{"default":"500px","computed":"500px"},"$modal-lg":{"default":"800px","computed":"800px"},"$modal-xl":{"default":"1140px","computed":"1140px"},"$modal-fade-transform":{"default":"translate(0, -50px)","computed":"translate(0, -50px)"},"$modal-show-transform":{"default":"none","computed":"none"},"$modal-transition":{"default":"transform .3s ease-out","computed":"transform 0.3s ease-out"},"$tooltip-bg":{"default":"$black","computed":"#000"},"$tooltip-opacity":{"default":".9","computed":"0.9"},"$tooltip-color":{"default":"$white","computed":"#fff"},"$tooltip-font-size":{"default":"$font-size-sm","computed":"0.875rem"},"$tooltip-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$tooltip-max-width":{"default":"200px","computed":"200px"},"$tooltip-padding-y":{"default":".25rem","computed":"0.25rem"},"$tooltip-padding-x":{"default":".5rem","computed":"0.5rem"},"$tooltip-margin":{"default":"0","computed":"0"},"$tooltip-arrow-color":{"default":"$tooltip-bg","computed":"#000"},"$tooltip-arrow-width":{"default":".8rem","computed":"0.8rem"},"$tooltip-arrow-height":{"default":".4rem","computed":"0.4rem"},"$popover-bg":{"default":"$white","computed":"#fff"},"$popover-body-color":{"default":"$body-color","computed":"#525f7f"},"$popover-header-bg":{"default":"$popover-bg","computed":"#fff"},"$popover-header-color":{"default":"$headings-color","computed":"#32325d"},"$popover-font-size":{"default":"$font-size-sm","computed":"0.875rem"},"$popover-border-color":{"default":"rgba($black, .05)","computed":"rgba(0, 0, 0, 0.05)"},"$popover-border-width":{"default":"1px","computed":"1px"},"$popover-border-radius":{"default":"$border-radius-lg","computed":"0.3rem"},"$popover-box-shadow":{"default":"0px .5rem 2rem 0px rgba($black, .2)","computed":"0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.2)"},"$popover-max-width":{"default":"276px","computed":"276px"},"$popover-header-padding-y":{"default":".75rem","computed":"0.75rem"},"$popover-header-padding-x":{"default":".75rem","computed":"0.75rem"},"$popover-body-padding-y":{"default":"$popover-header-padding-y","computed":"0.75rem"},"$popover-body-padding-x":{"default":"$popover-header-padding-x","computed":"0.75rem"},"$popover-arrow-width":{"default":"1.5rem","computed":"1.5rem"},"$popover-arrow-height":{"default":".75rem","computed":"0.75rem"},"$popover-arrow-color":{"default":"$popover-bg","computed":"#fff"},"$popover-arrow-outer-color":{"default":"transparent","computed":"transparent"},"$toast-background-color":{"default":"rgba($white, .85)","computed":"rgba(255, 255, 255, 0.85)"},"$toast-max-width":{"default":"350px","computed":"350px"},"$toast-font-size":{"default":".875rem","computed":"0.875rem"},"$toast-border-width":{"default":"1px","computed":"1px"},"$toast-border-radius":{"default":".25rem","computed":"0.25rem"},"$toast-header-color":{"default":"$gray-600","computed":"#8898aa"},"$toast-header-border-color":{"default":"rgba(0, 0, 0, .05)","computed":"rgba(0, 0, 0, 0.05)"},"$spinner-width":{"default":"2rem","computed":"2rem"},"$spinner-height":{"default":"$spinner-width","computed":"2rem"},"$spinner-border-width":{"default":".25em","computed":"0.25em"},"$spinner-width-sm":{"default":"1rem","computed":"1rem"},"$spinner-height-sm":{"default":"$spinner-width-sm","computed":"1rem"},"$spinner-border-width-sm":{"default":".2em","computed":"0.2em"},"$progress-bg":{"default":"$gray-200","computed":"#e9ecef"},"$icon-size":{"default":"3rem","computed":"3rem"},"$icon-size-xs":{"default":"1.25rem","computed":"1.25rem"},"$icon-size-sm":{"default":"2rem","computed":"2rem"},"$icon-size-lg":{"default":"4rem","computed":"4rem"},"$icon-size-xl":{"default":"5rem","computed":"5rem"},"$thumbnail-bg":{"default":"$body-bg","computed":"#fff"},"$thumbnail-border-color":{"default":"$gray-300","computed":"#dee2e6"},"$thumbnail-border-width":{"default":"$border-width","computed":"0.0625rem"},"$thumbnail-border-radius":{"default":"$border-radius","computed":"0.25rem"},"$thumbnail-padding":{"default":".25rem","computed":"0.25rem"},"$thumbnail-box-shadow":{"default":"0 1px 2px rgba($black, .075)","computed":"0 1px 2px rgba(0, 0, 0, 0.075)"},"$figure-caption-color":{"default":"$gray-600","computed":"#8898aa"},"$figure-caption-font-size":{"default":"90%","computed":"90%"},"$hr-border-color":{"default":"rgba($black, .1)","computed":"rgba(0, 0, 0, 0.1)"},"$hr-border-width":{"default":"$border-width","computed":"0.0625rem"},"$hr-margin-y":{"default":"$spacer * 2","computed":"2rem"},"$list-inline-padding":{"default":".5rem","computed":"0.5rem"},"$grid-gutter-width":{"default":"30px","computed":"30px"},"$translucent-color-opacity":{"default":".6","computed":"0.6"},"$theme-color-interval":{"default":"8%","computed":"8%"},"$yiq-contrasted-threshold":{"default":"200","computed":"200"},"$yiq-text-dark":{"default":"$gray-900","computed":"#212529"},"$yiq-text-light":{"default":"$white","computed":"#fff"},"$enable-print-styles":{"default":true,"computed":"true"},"$print-page-size":{"default":"a3","computed":"a3"},"$print-body-min-width":{"default":"map-get($grid-breakpoints, \"lg\")","computed":"992px"},"$zindex-dropdown":{"default":"1000","computed":"1000"},"$zindex-sticky":{"default":"1020","computed":"1020"},"$zindex-fixed":{"default":"1030","computed":"1030"},"$zindex-modal":{"default":"1050","computed":"1050"},"$zindex-modal-backdrop":{"default":"1040","computed":"1040"},"$zindex-popover":{"default":"1060","computed":"1060"},"$zindex-tooltip":{"default":"1070","computed":"1070"}}; var library_ui_page = '__argon-ui.html'; var index_page = 'index.html'; var c_limits = { category: 3 }; </script> <script src="/static/build/runtime.1b16522e.js" defer></script><script src="/static/build/js/editor.23c1c67d.js" defer></script> <script src="/vendor/color-picker/colorpicker.min.js"></script> <script src="https://js.stripe.com/v3/"></script> <script> var stripe_publishable_key = 'pk_live_nmgMlxxspPYyD9m6pvHbiMkT00LvwKgsDv'; </script> </body> </html>

CINXE.COM

Argon Web Builder | Drag & Drop Online Editor by Creative Tim