.UIComponentDetail_UIComponentExample__Ex_f7{align-items:flex-start;padding:24px;flex-wrap:nowrap;margin:0 auto;width:100%;gap:16px;max-width:1600px;position:relative}@media(max-width:1600px){.UIComponentDetail_UIComponentExample__Ex_f7{padding:24px;flex-direction:column;flex-wrap:wrap;width:calc(100vw - 320px)}}@media(max-width:991px){.UIComponentDetail_UIComponentExample__Ex_f7{width:calc(100vw - 40px)}}@media(max-width:700px){.UIComponentDetail_UIComponentExample__Ex_f7{width:calc(100vw - 32px);padding:0}}.UIComponentDetail_FullWrapper___KMP9{overflow:hidden;width:100%}.UIComponentDetail_FullWrapper__NextPageButton__9atlO{margin-left:auto;box-shadow:none;-webkit-box-shadow:none}.UIComponentDetail_FullWrapper__NextPageButton__9atlO:hover{box-shadow:none;-webkit-box-shadow:none}@media(max-width:991px){.UIComponentDetail_FullWrapper___KMP9{padding:0}}.UIComponentDetail_EditButton__RbUge{height:40px}.UIComponentDetail_EditButton__RbUge,.UIComponentDetail_EditButton__RbUge:hover,.UIComponentDetail_ViewDesignButton__xT86w{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.UIComponentDetail_ViewDesignButton__xT86w{height:40px;background-color:#f4f6f9;color:#303651!important;border:1px solid #e6e8f0;padding:0 16px;font-size:14px!important;transition:all .2s ease-in-out;gap:4px}.UIComponentDetail_ViewDesignButton__xT86w img{height:20px}.UIComponentDetail_ViewDesignButton__xT86w:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;color:#605dff;border:1px solid #605dff;background-color:#f5f4ff}.UIComponentDetail_Header__qdwsb{width:100%}@media(max-width:500px){.UIComponentDetail_Header__qdwsb{flex-direction:column;gap:16px}}.UIComponentDetail_Header__TitleWrapper__P9Dmk{margin-right:auto}.UIComponentDetail_Header__Title__YCZct{font-size:18px;line-height:29px;color:#1c2035!important;margin:0}.UIComponentDetail_Header__Line__EZCk1{background-color:#c7cbd8;width:1px;height:36px}@media(max-width:700px){.UIComponentDetail_Header__Line__EZCk1{display:none}}.UIComponentDetail_Header__RightWrapper__bZQI2{margin-left:auto}.UIComponentDetail_Header__ResourceGroupIcon__5epoI{filter:invert(49%) sepia(87%) saturate(896%) hue-rotate(189deg) brightness(82%) contrast(85%)}.UIComponentDetail_Header__ResourceGroupName__7xp4S{color:#4581c5!important;font-size:14px!important;margin:0}@media(max-width:991px){.UIComponentDetail_Header__NavigationWrapper__miQIm{gap:4px!important}}.UIComponentDetail_Header__BackButton__CxEf4{color:#1c2035!important;min-width:60px!important;width:60px!important;max-width:60px!important}.UIComponentDetail_Header__ComponentOrderName___TN7T{color:#1c2035!important;font-size:14px;width:50px}.UIComponentDetail_Header__NavigationButton__yA2D0{padding:12px;background-color:#f6faff;border-radius:50%;transition:all .3s ease;border:1px solid transparent;width:48px;height:48px}.UIComponentDetail_Header__NavigationButton__yA2D0:hover{background-color:#e5f1ff;border:1px solid #605dff}.UIComponentDetail_Header__NavigationButton--deactive__x9w_w{opacity:.5!important}.UIComponentDetail_Header__NavigationButton--deactive__x9w_w,.UIComponentDetail_Header__NavigationButton--deactive__x9w_w:hover{border:1px solid #e6e8f0!important;background-color:#f6faff!important}.UIComponentDetail_BackButtonModal__3EpJX{color:#4a516d!important;padding:8px}@media(max-width:991px){.UIComponentDetail_BackButtonModal__3EpJX{min-width:150px}}.UIComponentDetail_SandboxPreview__H_nV0{width:100%;height:75vh;border:0;border-radius:4px;overflow:hidden}@media(max-width:991px){.UIComponentDetail_SandboxPreview__H_nV0{height:80vh}}.UIComponentDetail_SandboxEditor__xKcl9{display:none;width:100%;height:80vh;border:0;border-radius:4px;overflow:hidden}@media(max-width:991px){.UIComponentDetail_SandboxEditor__xKcl9{display:block}}.UIComponentDetail_CheatsheetImage__YNQ2h{width:100%;max-height:75vh}.InteractiveTutorialsCode_Code__Wrapper__piWUs{background-color:#1c2035;border-radius:8px;min-height:400px;position:relative;z-index:0;flex-wrap:nowrap!important;height:100%;max-height:800px}.InteractiveTutorialsCode_WindowLabel__bKeq4{position:relative;background-color:#f5f4ff;border:1px solid #a4a1ff;width:96px;height:32px;border-radius:8px;margin-left:-4px;margin-top:-16px}.InteractiveTutorialsCode_WindowLabel__Icon__RaCzN{position:absolute;top:-16px;left:-16px;width:40px;height:40px}.InteractiveTutorialsCode_WindowLabel__Label__Onbj0{font-size:14px;margin:0}.InteractiveTutorialsCode_Topbar__JGkbq{position:relative;border-radius:8px 8px 0 0;display:flex;align-items:center;width:100%;padding:16px;background-color:rgba(96,93,255,.1)}.InteractiveTutorialsCode_CodeButtons__IvsDr{display:flex;justify-content:flex-start}.InteractiveTutorialsCode_Copy__PQBw7{border-radius:8px;border:0;color:#fff!important;background-color:transparent!important;outline:none;cursor:pointer;transition:all .75s;border:1px solid #fff!important;height:40px;width:auto;max-width:auto;min-width:auto;padding:0 16px;margin-left:auto}.InteractiveTutorialsCode_Copy__PQBw7:hover{color:#fff;background-color:transparent;border:1px solid hsla(0,0%,100%,.5)}@media(max-width:700px){.InteractiveTutorialsCode_Copy__PQBw7{width:48px}.InteractiveTutorialsCode_Copy__PQBw7 span{display:none}}.InteractiveTutorialsCode_Option__S3tHV{background-color:none;margin-right:8px;border-radius:8px;width:auto;background-color:rgba(96,93,255,0);transition:all .3s ease-in-out;display:flex;justify-content:center;align-items:center;height:40px;cursor:pointer}.InteractiveTutorialsCode_Option__S3tHV:hover{background-color:rgba(96,93,255,.15)}.InteractiveTutorialsCode_Option--active__AOCHp{background-color:rgba(96,93,255,.2)}.InteractiveTutorialsCode_Option--active__AOCHp span{color:#5da8ff!important}.InteractiveTutorialsCode_Option__Title__vAh_H{padding:8px;font-size:14px!important;color:#fff!important;font-weight:600;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media(max-width:500px){.InteractiveTutorialsCode_Option__Title__vAh_H{font-size:12px!important}}.InteractiveTutorialsCode_Code__Topbar__ToFA7{display:flex!important;align-items:center!important;justify-content:space-between!important}.InteractiveTutorialsCode_Code__KMVRt{background-color:#1c2035!important;padding:20px 16px;z-index:100;font-size:14px!important}@media(max-width:991px){.InteractiveTutorialsCode_Code__KMVRt{font-size:14px!important}}@media(max-width:700px){.InteractiveTutorialsCode_Code__KMVRt{font-size:13px!important}}.InteractiveTutorialsCode_Code--no-padding-top__CmcvS{padding-top:0;border-radius:0 0 16px 16px}.InteractiveTutorialsCode_Code__KMVRt pre{margin:0;white-space:pre-line}.InteractiveTutorialsCode_Code__KMVRt{padding:0 16px 16px;font-size:16px;width:100%;height:100%;overflow:auto}.InteractiveTutorialsCode_Code__KMVRt::-webkit-scrollbar{width:10px;margin-top:auto}.InteractiveTutorialsCode_Code__KMVRt::-webkit-scrollbar-track{background:#061c2e;border-radius:6px}.InteractiveTutorialsCode_Code__KMVRt::-webkit-scrollbar-thumb{background:#a4a1ff;border-radius:5px}.InteractiveTutorialsCode_Code__KMVRt::-webkit-scrollbar-thumb:hover{background:#545b60}.InteractiveTutorialsCode_Button__Rkm6x{background-color:#f4f4f4;position:relative;overflow:visible;display:flex;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-align:center;text-shadow:1px 1px 0 #fff;white-space:nowrap;cursor:pointer;color:#24292e!important;outline:none;background-color:#ececec;background-image:linear-gradient(#f4f4f4,#ececec);-moz-background-clip:padding;background-clip:padding-box;border-radius:.2em}.InteractiveTutorialsCode_Button__Rkm6x svg{height:16px}.InteractiveTutorialsCode_Button__Rkm6x a{border-bottom:none!important}.InteractiveTutorialsCode_TextField__AAePK{color:#fff;font-family:Manrope;letter-spacing:.5px;font-size:14px;outline:none;padding:.5rem;border:1px double transparent;border-radius:8px;background-image:linear-gradient(#303651,#303651),linear-gradient(90deg,#697089,#697089);background-origin:border-box;background-clip:padding-box,border-box;transition:all .2s ease-in-out;margin:4px 0;font-weight:500}.InteractiveTutorialsCode_TextField--error__f9O2j{background-image:linear-gradient(#303651,#303651),linear-gradient(90deg,#fe7b5e,#fe7b5e)!important}.InteractiveTutorialsCode_TextField--success__eu9TH{background-image:linear-gradient(#303651,#303651),linear-gradient(90deg,#28a435,#28a435)!important}.InteractiveTutorialsCode_TextField__AAePK:focus{background-image:linear-gradient(#303651,#303651),linear-gradient(90deg,#7fbaff,#827fff 35%,#be84f8)}.InteractiveTutorialsCode_TextField__AAePK::placeholder{color:#697089;font-weight:400;font-size:14px}.UIComponentPlayground_TipMessageWrapper__XaMdq{border:1px solid #605dff;border-radius:8px;padding:0 32px 0 16px;margin-bottom:16px;width:auto}.UIComponentPlayground_TipMessageWrapper__Icon__Nj2oG{margin-right:16px}.UIComponentPlayground_ContentWrapper__ozVu1{gap:32px;width:100%}@media(max-width:1600px){.UIComponentPlayground_ContentWrapper__ozVu1{max-width:100%;width:100%;flex-direction:column}}.UIComponentPlayground_FirstRow__Uy08e{max-width:780px;width:100%;gap:24px}@media(max-width:1600px){.UIComponentPlayground_FirstRow__Uy08e{max-width:100%;width:100%}}@media(max-width:700px){.UIComponentPlayground_FirstRow__Uy08e{padding-right:8px}}.UIComponentPlayground_Presentation__q8gLp{max-width:760px;width:100%;max-height:1000px;min-height:600px;padding:0;border-radius:8px;background-color:#fff;border:1px solid #e6e8f0;font-size:16px}@media(max-width:1600px){.UIComponentPlayground_Presentation__q8gLp{max-width:100%}}@media(max-width:700px){.UIComponentPlayground_Presentation__q8gLp{padding:0}}.UIComponentPlayground_Resizable__XvMe9{margin:auto;max-width:760px;width:100%;min-width:300px;max-height:950px;min-height:400px;border:2px solid #a4a1ff;border-radius:8px;resize:both;overflow:hidden;padding:0}@media(max-width:1600px){.UIComponentPlayground_Resizable__XvMe9{max-width:100%}}@media(max-width:700px){.UIComponentPlayground_Resizable__XvMe9{padding:0}}.UIComponentPlayground_IFrame__uNfA9{min-height:730px;height:100%}.UIComponentPlayground_SecondRow__6m76L{max-width:780px;width:100%;gap:16px;min-height:740px;max-height:740px}@media(max-width:1600px){.UIComponentPlayground_SecondRow__6m76L{max-width:100%;width:100%}}@media(max-width:700px){.UIComponentPlayground_SecondRow__6m76L{padding-right:8px}}.PopupTimer_PopupTimer__UPIuQ{display:flex;width:100%;padding:0;margin-top:24px}@media(max-width:700px){.PopupTimer_PopupTimer__UPIuQ{margin-top:16px}}.PopupTimer_PopupTimer__CountDown__ummpR{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:0;width:100%;background-color:rgba(96,93,255,.1);border-radius:4px}@media(max-width:700px){.PopupTimer_PopupTimer__CountDown__ummpR{min-width:auto;gap:4px}}.PopupTimer_PopupTimer__CountWrapper__1TVj7{display:flex;justify-content:center;align-items:center;padding:0;min-width:88px;min-height:36px;gap:4px;border:1px solid #e6e5ff}@media(max-width:700px){.PopupTimer_PopupTimer__CountWrapper__1TVj7{min-width:auto}}.PopupTimer_PopupTimer__CountWrapper__Count__uWW0D{font-size:16px;font-weight:700;margin:0;color:#605dff;line-height:36px;min-width:22px}@media(max-width:700px){.PopupTimer_PopupTimer__CountWrapper__Count__uWW0D{min-width:auto}}@media(max-width:500px){.PopupTimer_PopupTimer__CountWrapper__Count__uWW0D{font-size:16px}}.PopupTimer_PopupTimer__CountWrapper__IntervalKey___IgKa{color:#605dff;font-weight:500;font-size:12px;letter-spacing:.5px;margin:0}@media(max-width:700px){.PopupTimer_PopupTimer__CountWrapper__IntervalKey___IgKa{font-size:11px}}