header.output-header{display:flex;align-items:center;flex-direction:row;justify-content:space-between;margin-bottom:15px;padding-bottom:15px}header.output-header h4{margin:0}.example-choice>.code-toolbar{margin-bottom:0}.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{border:1px solid var(--border-color);padding:20px;margin-bottom:30px}button#reset{padding:0;border:0;background:none;pointer-events:none;text-align:left;color:var(--text-color);font-variation-settings:"wdth" 87.5;font-family:Noto Sans Hebrew,sans-serif!important;font-weight:600}.editor-wrapper.small-desktop-and-below{display:flex;flex-direction:column;justify-content:space-between;align-items:center}section#example-choice-list{width:100%}div#output{width:100%;display:flex;align-items:center;justify-content:center;padding-top:30px}.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:.6;transition:all .6s;border-radius:0;cursor:pointer}#example-element{text-align:left;width:300px;height:300px;overflow-x:scroll;display:flex;box-sizing:border-box;border:1px solid var(--border-color)}#example-element>div{flex:0 0 300px;width:300px;background-color:#da1e62;color:#e4e4e4;font-size:30px;display:flex;align-items:center;justify-content:center;scroll-snap-align:start}#example-element>div:nth-child(2){background-color:#777ca0}#example-element>div:nth-child(3){background-color:#1d1e21}.nice-scroll{scrollbar-width:40px;scrollbar-color:#2d2d2d #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:#2d2d2d #fbfaf8}.nice-scroll::-webkit-scrollbar{width:15px}.nice-scroll::-webkit-scrollbar-track{background:#fbfaf8}.nice-scroll::-webkit-scrollbar-thumb{background-color:#2d2d2d;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:#e4e4e4;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}.both-mandatory{scroll-snap-type:both mandatory}.both-scroll .wrapper{width:620px;height:100%;display:grid;grid-template-columns:300px 300px;grid-gap:10px;padding:100px 100px 400px}.example-wrapper>p>code{background:none;font-weight:600;color:#1d1e21;font-size:1em}.example-wrapper>p{background:#ede7d8;padding:10px;margin-top:70px;position:relative}.example-wrapper>.selected{margin-bottom:20px;margin-top:70px}@media only screen and (max-width:600px){header.output-header h4{display:none}#example-element{width:240px;height:240px}#example-element>div{flex:0 0 240px;width:240px}.both-scroll .wrapper{width:620px;grid-template-columns:260px 260px;grid-gap:10px;padding:100px 100px 400px}.my-container{width:300px;height:300px;scroll-snap-points-y:repeat(260px);scroll-snap-points-x:repeat(260px)}.element{width:260px;height:260px}}