.component-container{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#352c54,#000000b3),radial-gradient(ellipse at bottom,#962d5c,#000)!important}.component-container .component-header-container{display:flex;justify-content:center;width:100%;background-color:#0f172a;transition:background .25s linear}.component-container .component-header-container .component-header{display:flex;flex-direction:column;max-width:80%;color:#919fb4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";padding:25px 0;width:80%}.component-container .component-header-container .component-header .sub-title{font-weight:600;font-size:1.25rem;color:#d33680}.component-container .component-header-container .component-header .title{color:#fff;font-size:2.25rem;font-weight:800}.component-container .component-header-container .component-header p{margin-bottom:15px;max-width:750px}.component-container .component-header-container .component-header p:last-child{margin-bottom:2em}.component-container .component-header-container .component-header .options{display:flex;margin-top:20px;margin-bottom:5px}.component-container .component-header-container .component-header .options .option{display:flex;flex-direction:column;align-items:center;margin-right:35px}.component-container .component-header-container .component-header .options .option.active,.component-container .component-header-container .component-header .options .option:focus,.component-container .component-header-container .component-header .options .option:hover,.component-container .component-header-container .component-header .options .option:active{cursor:pointer;color:#d33680}.component-container .component-header-container .component-header .options .option .option-icon{font-weight:300}.component-container .component-header-container .component-header .options .option .option-label{margin-top:15px;font-size:.875rem}.component-container .component-preview-container{display:flex;width:100%;height:100%;padding:50px 0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:3em 3em}.component-container .component-preview-container .component-preview{flex:1;max-width:50%;display:flex;justify-content:center;align-items:center;padding:15px 15px 15px 60px}.component-container .component-preview-container .component-preview .component-bg-light{display:flex;min-width:-moz-fit-content;min-width:fit-content;padding:18px;background-color:#f7fafcfa;border-radius:10px}.component-container .component-preview-container .component-code-container{flex:1;max-width:50%;display:flex;justify-content:center;align-items:center;padding:15px}.component-container .component-preview-container .component-code-container .code-highlight{z-index:10;display:flex;align-items:center;border:1px solid #232222;background-color:#23241f;padding:30px 0;border-radius:10px;position:relative;min-width:565px}.component-container .component-preview-container .component-code-container .code-highlight .v-code-block{width:100%}.component-container .component-preview-container .component-code-container .code-highlight .tabs{display:flex;position:absolute;top:0;left:0;height:33px;width:100%;background-color:#232222;border-radius:10px 10px 0 0}.component-container .component-preview-container .component-code-container .code-highlight .tabs .tab{display:flex;align-items:center;text-align:center;justify-content:center;height:100%;width:150px;font-size:.875rem;font-weight:600;color:#adacac;transition:color 115ms linear}.component-container .component-preview-container .component-code-container .code-highlight .tabs .tab:hover{cursor:pointer;color:#d33680}.component-container .component-preview-container .component-code-container .code-highlight .tabs .tab.active{color:#d33680;border-bottom:1px solid #d33680}.component-container .component-preview-container .component-code-container .code-highlight .dots{display:flex;position:absolute;height:10px;top:10px;right:10px}.component-container .component-preview-container .component-code-container .code-highlight .dots .dot{height:10px;width:10px;margin-left:13px;border-radius:50%;background-color:#adacac;transition:background 115ms linear}.component-container .component-preview-container .component-code-container .code-highlight .dots .dot:hover{background-color:#b02667}.component-container .component-preview-container .component-code-container .code-highlight code{border-top:1px solid #232222;border-bottom:1px solid #232222}.component-container .component-preview-container .component-code-container .code-highlight:hover .btn-copy-code{visibility:visible;opacity:1}.component-container .component-preview-container .component-code-container .code-highlight .btn-copy-code{z-index:20;visibility:hidden;opacity:0;transition:all 75ms ease-in;color:#d33680;border:1px solid #d33680;background-color:#b3306d26;padding:10px 25px;border-radius:15px;position:absolute;bottom:51px;right:26px}