header.output-header{display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;margin-bottom:15px;border-bottom:1px solid #1c252f;padding-bottom:15px}header.output-header h4{margin:0!important}.example-choice .code-toolbar>.toolbar .toolbar-item{display:none}.example-wrapper .example-choice .code-toolbar{opacity:1;pointer-events:none;margin:60px 0 20px}section.savvy-editor-container{padding:20px 0;margin-bottom:25px}button#reset{padding:4px 9px;border:1px solid var(--border-color);background:var(--light-bg);color:#e5e5e5;pointer-events:none;font-size:.833rem;border-radius:2px;font-variation-settings:"wdth" 85;font-weight:600;letter-spacing:-.01em}.editor-wrapper.small-desktop-and-below{display:flex;flex-direction:column;justify-content:space-between;align-items:center}section#example-choice-list{width:100%}.grt pre{margin-bottom:20px}div#output{width:100%;display:flex;align-items:center;justify-content:center;padding-top:50px;overflow:hidden;padding-bottom:0;height:86px;border:1px solid var(--border-color);margin-bottom:12px}.example-choice.selected pre code[class*=language-]{background:transparent}.example-choice.selected .code-toolbar,.example-choice.selected .code-toolbar:hover{opacity:1}.example-choice .code-toolbar{opacity:.4;transition:all .6s;border-radius:0;cursor:pointer}#example-element{height:auto;align-items:center}#example-element>div{background-color:#da1e62;color:#e1e1e1;font-size:20px;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;width:115px;padding:5px 0}#example-element>div:nth-child(2){background-color:#777ca0}#example-element>div:nth-child(3){background-color:#292b2f}#example-element>div:nth-child(5){background-color:#444e6b}#example-element>div:nth-child(4){background-color:#ef6620}.nice-scroll{scrollbar-width:40px;scrollbar-color:#2a3137 #fbfaf8}.example-choice pre{padding:15px!important;margin-bottom:12px!important}.example-choice .code-toolbar:hover{opacity:.78}.nice-scroll{scrollbar-width:auto;scrollbar-color:#2a3137 #fbfaf8}.nice-scroll::-webkit-scrollbar{width:15px}.nice-scroll::-webkit-scrollbar-track{background:#fbfaf8}.nice-scroll::-webkit-scrollbar-thumb{background-color:#2a3137;border:2px solid #fbfaf8}.align-start .element{scroll-snap-align:start}.align-end .element{scroll-snap-align:end}.align-center .element{scroll-snap-align:center}.align-none .element{scroll-snap-align:none}.no-support{text-align:center;padding:5px;width:450px;margin-left:auto;margin-right:auto;background:#ee6620;color:#e1e1e1;font-size:16px}@supports (scroll-snap-type: both mandatory){.no-support{display:none}}.example-wrapper{text-align:center;margin-left:auto;margin-right:auto}.my-container{width:360px;height:360px;margin-left:auto;margin-right:auto;margin-bottom:10px;border:1px solid var(--border-color);overflow:auto;position:relative;-webkit-overflow-scrolling:touch;scroll-snap-type:both mandatory;scroll-snap-points-y:repeat(300px);scroll-snap-points-x:repeat(300px)}.element{width:300px;direction:ltr;height:300px;scroll-snap-stop:normal;color:#fff;font-size:50px;display:flex;justify-content:center;align-items:center;position:relative}.element code{font-size:13px}.element:nth-child(1){background:#1d1e21}.element:nth-child(2){background:#ee6620}.element:nth-child(3){background:#777ba0}.element:nth-child(4){background:#da1e62}.example-wrapper>.selected{margin-bottom:20px;margin-top:70px}@media only screen and (max-width:600px){header.output-header h4{display:none}}.slidecontainer{width:100%;margin-top:0}.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#d3d3d3;outline:none;-webkit-transition:.2s;transition:opacity .2s;margin-bottom:13px}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:var(--btn-bg);cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;background:var(--btn-bg);cursor:pointer}.slidecontainer>p{font-weight:600;font-size:18px;margin-top:10px;margin-bottom:0;font-variation-settings:"wdth" 87.5;color:var(--heading-color)}.flex-container :nth-child(1){background:#1d1e21}.flex-container :nth-child(2){background:#ee6620}.flex-container :nth-child(3){background:#777ba0}.flex-container :nth-child(4){background:#da1e62}.flex-container{font-size:18px;color:#fff;padding:20px;margin-bottom:30px}.flex-container>div{display:flex;align-items:center;justify-content:center;padding:4px 0}.flex-container.two{display:flex}.flex-container.two>div{width:100%}@media(max-width:768px){div#output{height:192px}}