.showcase-component{margin-bottom:2rem}.showcase-component .showcase-header-left{max-width:70%}.showcase-component .showcase-header-right .nav-pills{background-color:#f0f2f5;border-radius:.5rem;padding:.25rem}.showcase-component .showcase-header-right .nav-link{border-radius:.375rem;padding:.5rem 1rem;font-size:.875rem;color:#6c757d;transition:all .2s ease-in-out;display:flex;align-items:center}.showcase-component .showcase-header-right .nav-link i{font-size:.875rem}.showcase-component .showcase-header-right .nav-link.active{background-color:#fff;color:#6c757d;box-shadow:0 1px 3px #0000001a}.showcase-component .showcase-header-right .nav-link:not(.active):hover{background-color:#ffffffb3;color:#495057}.showcase-component .copy-btn{transition:all .2s ease;z-index:10}.showcase-component .copy-btn:hover{background-color:#0000001a}.showcase-component .copy-btn:active{transform:scale(.95)}@keyframes copy-success{0%{background-color:#0000001a}50%{background-color:#19875433}to{background-color:#0000001a}}.showcase-component .copy-success{animation:copy-success 1s ease}.showcase-component .preview-pane{padding:1.5rem;border-radius:.375rem;background-color:#fff}.showcase-component .code-pane{position:relative;border-radius:.375rem;background-color:#f8f9fa}.showcase-component pre{margin:0;border-radius:.375rem;overflow-x:auto}.showcase-component .card{border:1px solid rgba(0,0,0,.125);border-radius:.375rem}.showcase-component .card-header{background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}.showcase-component .nav-tabs .nav-link{border:none;color:#6c757d}.showcase-component .nav-tabs .nav-link.active{color:#212529;background-color:transparent;border-bottom:2px solid #0d6efd}@media (max-width: 768px){.showcase-component .d-flex.justify-content-between{flex-direction:column;align-items:flex-start!important}.showcase-component .showcase-header-left{max-width:100%;margin-bottom:1rem}.showcase-component .showcase-header-right{width:100%}.showcase-component .copy-btn{padding:.25rem .5rem}}