/* Transaction Entry Modal */ .is-mobile .remove-row { margin: 11px 4px 11px 0 !important; } .is-mobile input[type='number'] { padding: 8px 14px; height: auto; font-size: 17px; } .is-mobile button { margin: 5px 0; } /* Dashboard Tutorial */ .ledger-tutorial-tooltip { background: var(--background-secondary) !important; color: var(--text-normal); } .ledger-tutorial-tooltip a[role='button'] { background: var(--interactive-accent); color: var(--text-on-accent); border: none; border-radius: 4px; outline: none; box-shadow: none; text-shadow: none; } /* Settings Page */ .ledger-input-error { border-color: var(--text-error) !important; } .ledger-donation { width: 70%; margin: 0 auto; text-align: center; } .ledger-donate-button { margin: 10px; } /* Chartist Legend Plugin */ .ct-legend { position: relative; text-align: center; /* Position of the group, use either left or right */ z-index: 10; } .ct-legend li { display: inline; /* Make the legend in one row */ text-align: center; position: relative; padding-left: 23px; margin-right: 20px; margin-top: 3px; list-style-type: none; /* Hide the default bullet */ } .ct-legend li:before { width: 15px; /* How big is the color */ height: 15px; /* How big is the color */ position: absolute; left: 0; content: ''; border: 3px solid transparent; border-radius: 2px; } .ct-legend.ct-legend-inside { position: absolute; top: 0; right: 0; } /* These colors must be matched with the series-a, series-b, etc. from below. */ .ct-series-0:before { background-color: #d70206; } .ct-series-1:before { background-color: #f05b4f; } .ct-series-2:before { background-color: #f4c63d; } .ct-series-3:before { background-color: #d17905; } .ct-series-4:before { background-color: #453d3f; } .ct-series-5:before { background-color: #59922b; } .ct-series-6:before { background-color: #0544d3; } .ct-series-7:before { background-color: #6b0392; } .ct-series-8:before { background-color: #f05b4f; } .ct-series-9:before { background-color: #dda458; } .ct-series-10:before { background-color: #eacf7d; } .ct-series-11:before { background-color: #86797d; } .ct-series-12:before { background-color: #b2c326; } .ct-series-13:before { background-color: #6188e2; } .ct-series-14:before { background-color: #a748ca; } /* Chartist Stylesheet */ .ct-double-octave:after, .ct-major-eleventh:after, .ct-major-second:after, .ct-major-seventh:after, .ct-major-sixth:after, .ct-major-tenth:after, .ct-major-third:after, .ct-major-twelfth:after, .ct-minor-second:after, .ct-minor-seventh:after, .ct-minor-sixth:after, .ct-minor-third:after, .ct-octave:after, .ct-perfect-fifth:after, .ct-perfect-fourth:after, .ct-square:after { content: ''; clear: both; } .ct-label { fill: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4); font-size: 0.75rem; line-height: 1; } .ct-grid-background, .ct-line { fill: none; } .ct-chart-bar .ct-label, .ct-chart-line .ct-label { display: block; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .ct-chart-donut .ct-label, .ct-chart-pie .ct-label { dominant-baseline: central; } .ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; } .ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; } .ct-label.ct-vertical.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; text-align: right; text-anchor: end; } .ct-label.ct-vertical.ct-end { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; } .ct-chart-bar .ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-anchor: start; } .ct-chart-bar .ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-anchor: start; } .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; } .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; } .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; text-align: right; text-anchor: end; } .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: end; } .ct-grid { stroke: rgba(0, 0, 0, 0.2); stroke-width: 1px; stroke-dasharray: 2px; } .ct-point { stroke-width: 10px; stroke-linecap: round; } .ct-line { stroke-width: 4px; } .ct-area { stroke: none; fill-opacity: 0.1; } .ct-bar { fill: none; stroke-width: 10px; } .ct-slice-donut { fill: none; stroke-width: 60px; } .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut { stroke: #d70206; } .ct-series-a .ct-area, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-slice-pie { fill: #d70206; } .ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut { stroke: #f05b4f; } .ct-series-b .ct-area, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-slice-pie { fill: #f05b4f; } .ct-series-c .ct-bar, .ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-slice-donut { stroke: #f4c63d; } .ct-series-c .ct-area, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-slice-pie { fill: #f4c63d; } .ct-series-d .ct-bar, .ct-series-d .ct-line, .ct-series-d .ct-point, .ct-series-d .ct-slice-donut { stroke: #d17905; } .ct-series-d .ct-area, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-slice-pie { fill: #d17905; } .ct-series-e .ct-bar, .ct-series-e .ct-line, .ct-series-e .ct-point, .ct-series-e .ct-slice-donut { stroke: #453d3f; } .ct-series-e .ct-area, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-slice-pie { fill: #453d3f; } .ct-series-f .ct-bar, .ct-series-f .ct-line, .ct-series-f .ct-point, .ct-series-f .ct-slice-donut { stroke: #59922b; } .ct-series-f .ct-area, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-slice-pie { fill: #59922b; } .ct-series-g .ct-bar, .ct-series-g .ct-line, .ct-series-g .ct-point, .ct-series-g .ct-slice-donut { stroke: #0544d3; } .ct-series-g .ct-area, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-slice-pie { fill: #0544d3; } .ct-series-h .ct-bar, .ct-series-h .ct-line, .ct-series-h .ct-point, .ct-series-h .ct-slice-donut { stroke: #6b0392; } .ct-series-h .ct-area, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-slice-pie { fill: #6b0392; } .ct-series-i .ct-bar, .ct-series-i .ct-line, .ct-series-i .ct-point, .ct-series-i .ct-slice-donut { stroke: #f05b4f; } .ct-series-i .ct-area, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-slice-pie { fill: #f05b4f; } .ct-series-j .ct-bar, .ct-series-j .ct-line, .ct-series-j .ct-point, .ct-series-j .ct-slice-donut { stroke: #dda458; } .ct-series-j .ct-area, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-slice-pie { fill: #dda458; } .ct-series-k .ct-bar, .ct-series-k .ct-line, .ct-series-k .ct-point, .ct-series-k .ct-slice-donut { stroke: #eacf7d; } .ct-series-k .ct-area, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-slice-pie { fill: #eacf7d; } .ct-series-l .ct-bar, .ct-series-l .ct-line, .ct-series-l .ct-point, .ct-series-l .ct-slice-donut { stroke: #86797d; } .ct-series-l .ct-area, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-slice-pie { fill: #86797d; } .ct-series-m .ct-bar, .ct-series-m .ct-line, .ct-series-m .ct-point, .ct-series-m .ct-slice-donut { stroke: #b2c326; } .ct-series-m .ct-area, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-slice-pie { fill: #b2c326; } .ct-series-n .ct-bar, .ct-series-n .ct-line, .ct-series-n .ct-point, .ct-series-n .ct-slice-donut { stroke: #6188e2; } .ct-series-n .ct-area, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-slice-pie { fill: #6188e2; } .ct-series-o .ct-bar, .ct-series-o .ct-line, .ct-series-o .ct-point, .ct-series-o .ct-slice-donut { stroke: #a748ca; } .ct-series-o .ct-area, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-slice-pie { fill: #a748ca; } .ct-square { display: block; position: relative; width: 100%; } .ct-square:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 100%; } .ct-square:after { display: table; } .ct-square > svg { display: block; position: absolute; top: 0; left: 0; } .ct-minor-second { display: block; position: relative; width: 100%; } .ct-minor-second:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 93.75%; } .ct-minor-second:after { display: table; } .ct-minor-second > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-second { display: block; position: relative; width: 100%; } .ct-major-second:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 88.8888888889%; } .ct-major-second:after { display: table; } .ct-major-second > svg { display: block; position: absolute; top: 0; left: 0; } .ct-minor-third { display: block; position: relative; width: 100%; } .ct-minor-third:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 83.3333333333%; } .ct-minor-third:after { display: table; } .ct-minor-third > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-third { display: block; position: relative; width: 100%; } .ct-major-third:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 80%; } .ct-major-third:after { display: table; } .ct-major-third > svg { display: block; position: absolute; top: 0; left: 0; } .ct-perfect-fourth { display: block; position: relative; width: 100%; } .ct-perfect-fourth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 75%; } .ct-perfect-fourth:after { display: table; } .ct-perfect-fourth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-perfect-fifth { display: block; position: relative; width: 100%; } .ct-perfect-fifth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 66.6666666667%; } .ct-perfect-fifth:after { display: table; } .ct-perfect-fifth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-minor-sixth { display: block; position: relative; width: 100%; } .ct-minor-sixth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 62.5%; } .ct-minor-sixth:after { display: table; } .ct-minor-sixth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-golden-section { display: block; position: relative; width: 100%; } .ct-golden-section:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 61.804697157%; } .ct-golden-section:after { content: ''; display: table; clear: both; } .ct-golden-section > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-sixth { display: block; position: relative; width: 100%; } .ct-major-sixth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 60%; } .ct-major-sixth:after { display: table; } .ct-major-sixth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-minor-seventh { display: block; position: relative; width: 100%; } .ct-minor-seventh:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 56.25%; } .ct-minor-seventh:after { display: table; } .ct-minor-seventh > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-seventh { display: block; position: relative; width: 100%; } .ct-major-seventh:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 53.3333333333%; } .ct-major-seventh:after { display: table; } .ct-major-seventh > svg { display: block; position: absolute; top: 0; left: 0; } .ct-octave { display: block; position: relative; width: 100%; } .ct-octave:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 50%; } .ct-octave:after { display: table; } .ct-octave > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-tenth { display: block; position: relative; width: 100%; } .ct-major-tenth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 40%; } .ct-major-tenth:after { display: table; } .ct-major-tenth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-eleventh { display: block; position: relative; width: 100%; } .ct-major-eleventh:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 37.5%; } .ct-major-eleventh:after { display: table; } .ct-major-eleventh > svg { display: block; position: absolute; top: 0; left: 0; } .ct-major-twelfth { display: block; position: relative; width: 100%; } .ct-major-twelfth:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 33.3333333333%; } .ct-major-twelfth:after { display: table; } .ct-major-twelfth > svg { display: block; position: absolute; top: 0; left: 0; } .ct-double-octave { display: block; position: relative; width: 100%; } .ct-double-octave:before { display: block; float: left; content: ''; width: 0; height: 0; padding-bottom: 25%; } .ct-double-octave:after { display: table; } .ct-double-octave > svg { display: block; position: absolute; top: 0; left: 0; } /* Intro.js */ .introjs-overlay { position: absolute; -webkit-box-sizing: content-box; box-sizing: content-box; z-index: 999999; opacity: 0; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-showElement { z-index: 9999999 !important; } tr.introjs-showElement > td { z-index: 9999999 !important; position: relative; } tr.introjs-showElement > th { z-index: 9999999 !important; position: relative; } .introjs-disableInteraction { z-index: 99999999 !important; position: absolute; background-color: #fff; opacity: 0; } .introjs-relativePosition { position: relative; } .introjs-helperLayer { -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; z-index: 9999998; border-radius: 4px; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-helperLayer * { -webkit-box-sizing: content-box; box-sizing: content-box; } .introjs-helperLayer :before { -webkit-box-sizing: content-box; box-sizing: content-box; } .introjs-helperLayer :after { -webkit-box-sizing: content-box; box-sizing: content-box; } .introjs-tooltipReferenceLayer { font-family: 'Helvetica Neue', Inter, ui-sans-serif, 'Apple Color Emoji', Helvetica, Arial, sans-serif; -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; visibility: hidden; z-index: 100000000; background-color: transparent; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-tooltipReferenceLayer * { font-family: 'Helvetica Neue', Inter, ui-sans-serif, 'Apple Color Emoji', Helvetica, Arial, sans-serif; } .introjs-helperNumberLayer { font-family: 'Helvetica Neue', Inter, ui-sans-serif, 'Apple Color Emoji', Helvetica, Arial, sans-serif; color: #9e9e9e; text-align: center; padding-top: 10px; padding-bottom: 10px; } .introjs-arrow { border: 5px solid transparent; content: ''; position: absolute; } .introjs-arrow.top { top: -10px; left: 10px; border-bottom-color: #fff; } .introjs-arrow.top-right { top: -10px; right: 10px; border-bottom-color: #fff; } .introjs-arrow.top-middle { top: -10px; left: 50%; margin-left: -5px; border-bottom-color: #fff; } .introjs-arrow.right { right: -10px; top: 10px; border-left-color: #fff; } .introjs-arrow.right-bottom { bottom: 10px; right: -10px; border-left-color: #fff; } .introjs-arrow.bottom { bottom: -10px; left: 10px; border-top-color: #fff; } .introjs-arrow.bottom-right { bottom: -10px; right: 10px; border-top-color: #fff; } .introjs-arrow.bottom-middle { bottom: -10px; left: 50%; margin-left: -5px; border-top-color: #fff; } .introjs-arrow.left { left: -10px; top: 10px; border-right-color: #fff; } .introjs-arrow.left-bottom { left: -10px; bottom: 10px; border-right-color: #fff; } .introjs-tooltip { -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; visibility: visible; background-color: #fff; min-width: 250px; max-width: 300px; border-radius: 5px; -webkit-box-shadow: 0 3px 30px rgba(33, 33, 33, 0.3); box-shadow: 0 3px 30px rgba(33, 33, 33, 0.3); -webkit-transition: opacity 0.1s ease-out; -o-transition: opacity 0.1s ease-out; transition: opacity 0.1s ease-out; } .introjs-tooltiptext { padding: 20px; } .introjs-tooltip-title { font-size: 18px; margin: 0; padding: 0; font-weight: 700; float: left; line-height: 32px; } .introjs-tooltip-header { padding-left: 20px; padding-right: 20px; padding-top: 10px; } .introjs-tooltip-header:after { content: '.'; visibility: hidden; display: block; height: 0; clear: both; } .introjs-tooltipbuttons { border-top: 1px solid #e0e0e0; padding: 10px; text-align: right; white-space: nowrap; } .introjs-tooltipbuttons:after { content: ''; visibility: hidden; display: block; height: 0; clear: both; } .introjs-button { -webkit-box-sizing: content-box; box-sizing: content-box; position: relative; overflow: visible; display: inline-block; padding: 0.5rem 1rem; border: 1px solid #bdbdbd; text-decoration: none; text-shadow: 1px 1px 0 #fff; font-size: 14px; color: #424242; white-space: nowrap; cursor: pointer; outline: 0; background-color: #f4f4f4; border-radius: 0.2em; zoom: 1; } .introjs-button:hover { outline: 0; text-decoration: none; border-color: #9e9e9e; background-color: #e0e0e0; color: #212121; } .introjs-button:focus { outline: 0; text-decoration: none; background-color: #eee; -webkit-box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.5); box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.5); border: 1px solid #616161; color: #212121; } .introjs-button:active { outline: 0; text-decoration: none; background-color: #e0e0e0; border-color: #9e9e9e; color: #212121; } .introjs-button::-moz-focus-inner { padding: 0; border: 0; } .introjs-skipbutton { -webkit-box-sizing: content-box; box-sizing: content-box; color: #616161; float: right; font-size: 20px; cursor: pointer; font-weight: 700; line-height: 1; text-align: center; padding: 7px 10px; } .introjs-skipbutton:focus, .introjs-skipbutton:hover { color: #212121; outline: 0; text-decoration: none; } .introjs-prevbutton { float: left; } .introjs-nextbutton { float: right; } .introjs-disabled { color: #9e9e9e; border-color: #bdbdbd; -webkit-box-shadow: none; box-shadow: none; cursor: default; background-color: #f4f4f4; background-image: none; text-decoration: none; } .introjs-disabled:focus, .introjs-disabled:hover { color: #9e9e9e; border-color: #bdbdbd; -webkit-box-shadow: none; box-shadow: none; cursor: default; background-color: #f4f4f4; background-image: none; text-decoration: none; } .introjs-hidden { display: none; } .introjs-bullets { text-align: center; padding-top: 10px; padding-bottom: 10px; } .introjs-bullets ul { -webkit-box-sizing: content-box; box-sizing: content-box; clear: both; margin: 0 auto 0; padding: 0; display: inline-block; } .introjs-bullets ul li { -webkit-box-sizing: content-box; box-sizing: content-box; list-style: none; float: left; margin: 0 2px; } .introjs-bullets ul li a { -webkit-transition: width 0.1s ease-in; -o-transition: width 0.1s ease-in; transition: width 0.1s ease-in; -webkit-box-sizing: content-box; box-sizing: content-box; display: block; width: 6px; height: 6px; background: #ccc; border-radius: 10px; text-decoration: none; cursor: pointer; } .introjs-bullets ul li a:focus, .introjs-bullets ul li a:hover { width: 15px; background: #999; text-decoration: none; outline: 0; } .introjs-bullets ul li a.active { width: 15px; background: #999; } .introjs-progress { -webkit-box-sizing: content-box; box-sizing: content-box; overflow: hidden; height: 10px; margin: 10px; border-radius: 4px; background-color: #e0e0e0; } .introjs-progressbar { -webkit-box-sizing: content-box; box-sizing: content-box; float: left; width: 0%; height: 100%; font-size: 10px; line-height: 10px; text-align: center; background-color: #08c; } .introjsFloatingElement { position: absolute; height: 0; width: 0; left: 50%; top: 50%; } .introjs-fixedTooltip { position: fixed; } .introjs-hint { -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; background: 0 0; width: 20px; height: 15px; cursor: pointer; } .introjs-hint:focus { border: 0; outline: 0; } .introjs-hint:hover > .introjs-hint-pulse { background-color: rgba(60, 60, 60, 0.57); } .introjs-hidehint { display: none; } .introjs-fixedhint { position: fixed; } @-webkit-keyframes introjspulse { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { -webkit-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0 0 0 10px transparent; box-shadow: 0 0 0 10px transparent; } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 transparent; } } @keyframes introjspulse { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { -webkit-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0 0 0 10px transparent; box-shadow: 0 0 0 10px transparent; } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 transparent; } } .introjs-hint-pulse { -webkit-box-sizing: content-box; box-sizing: content-box; width: 15px; height: 15px; border-radius: 30px; background-color: rgba(136, 136, 136, 0.24); z-index: 10; position: absolute; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-animation: introjspulse 2s infinite; animation: introjspulse 2s infinite; } .introjs-hint-no-anim .introjs-hint-pulse { -webkit-animation: none; animation: none; } .introjs-hint-dot { -webkit-box-sizing: content-box; box-sizing: content-box; background: 0 0; border-radius: 60px; height: 50px; width: 50px; position: absolute; top: -18px; left: -18px; z-index: 1; opacity: 0; }