export const css: ":root {\n  /* fonts */\n  --font-inter: Inter;\n  --font-roboto: Roboto;\n\n  /* font sizes */\n  --font-size-sm: 11px;\n  --font-size-base: 12px;\n\n  /* Colors */\n  --color-white: #fff;\n\n  /* Colors */\n  --color1: #457eff;\n  --color-indigo-200: rgba(69, 126, 255, 0.07);\n\n  /* Colors */\n  --color-gray-100: #e9edfa;\n  --color: #96a2be;\n  --color-gray-300: #3f4c5a;\n\n  /* Gaps */\n  --gap-sm: 2px;\n  --gap-md: 7px;\n  --gap-lg: 12px;\n\n  /* Paddings */\n  --padding-xs: 4px;\n  --padding-sm: 8px;\n  --padding-md: 16px;\n  --padding-lg: 20px;\n\n  /* border radiuses */\n  --br-xs: 0.5px;\n  --br-sm: 2px;\n  --br-md: 4px;\n  --br-lg: 6px;\n}\n\nbody {\n  margin: 0;\n  line-height: normal;\n}\n.logo-icon,\n.text-icon {\n  position: relative;\n  width: 24.12px;\n  height: 24.13px;\n  flex-shrink: 0;\n}\n.text-icon {\n  width: 50.63px;\n  height: 14.83px;\n}\n.header-div,\n.logo-div {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n}\n.logo-div {\n  flex-direction: row;\n  padding: 10px var(--padding-md);\n  align-items: center;\n  gap: 5px;\n}\n.header-div {\n  border-top: 0 solid var(--color-gray-100);\n  border-right: 0 solid var(--color-gray-100);\n  border-bottom: 0.7px solid var(--color-gray-100);\n  border-left: 0 solid var(--color-gray-100);\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.have-you-structured {\n  font-weight: 600;\n}\n.have-you-structured-your-code {\n  margin-block-start: 0;\n  margin-block-end: 0;\n}\n.learn-how {\n  color: var(--color1);\n}\n.its-recommended-to-structure {\n  margin: 0;\n}\n.text-div {\n  flex: 1;\n  position: relative;\n  line-height: 19px;\n  display: inline-block;\n}\n.tips-div {\n  border-radius: var(--br-lg);\n  background-color: var(--color-gray-100);\n  width: 228px;\n  display: flex;\n  flex-direction: row;\n  padding: var(--padding-sm);\n  box-sizing: border-box;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.subtitle-div,\n.title-div {\n  align-self: stretch;\n  position: relative;\n  display: inline-block;\n}\n.title-div {\n  line-height: 22px;\n  font-weight: 600;\n}\n.subtitle-div {\n  font-size: var(--font-size-base);\n  line-height: 19px;\n  color: var(--color-gray-300);\n}\n.instructions-div,\n.top-div {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.instructions-div {\n  width: 228px;\n  font-size: 14px;\n  color: var(--color2);\n}\n.top-div {\n  align-self: stretch;\n  gap: 10px;\n}\n.select-all-div {\n  position: relative;\n  letter-spacing: -0.02em;\n  text-transform: uppercase;\n  font-weight: 500;\n  display: inline-block;\n  cursor: pointer;\n}\n.controls-div {\n  align-self: stretch;\n  border-top: 0 solid var(--color-gray-100);\n  border-right: 0 solid var(--color-gray-100);\n  border-bottom: 0.7px solid var(--color-gray-100);\n  border-left: 0 solid var(--color-gray-100);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  padding: 0 0 var(--padding-sm);\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: var(--gap-lg);\n}\n.expand-icon {\n  position: relative;\n  border-radius: var(--br-xs);\n  width: 6px;\n  height: 4px;\n  flex-shrink: 0;\n}\n.expand-div {\n  align-self: stretch;\n  width: 12px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  padding: var(--padding-sm) var(--padding-xs) var(--padding-xs);\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: flex-start;\n}\n.checkbox-indeterminate-icon {\n  position: relative;\n  border-radius: var(--br-sm);\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n.text-b {\n  position: relative;\n  display: inline-block;\n  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #626f8a;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.component-div {\n  align-self: stretch;\n  border-radius: var(--br-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  padding: var(--padding-xs) 0px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--gap-md);\n  color: #626F8A;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: auto;\n}\n\n.component-container {\n  width: 100%;\n  flex-direction: column;\n}\n.child {\n  margin-left: 24px;\n}\n.component-div:hover,\n.group-div8:hover {\n  background-color: var(--color-indigo-200);\n}\n.text-div1 {\n  position: relative;\n  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #626f8a;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  display: inline-block;\n}\n.checkbox-unticked-div {\n  position: relative;\n  border-radius: var(--br-sm);\n  background-color: var(--color-white);\n  border: 1px solid var(--color);\n  box-sizing: border-box;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n.group-div2,\n.group-div3 {\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n\n.group-div3 {\n  align-self: stretch;\n  display: flex;\n  padding: 0 0 0 var(--padding-lg);\n  box-sizing: border-box;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.group-div2 {\n  flex: 1;\n  max-height: 350px;\n  overflow-y: scroll;\n}\n.group-div1,\n.group-div2,\n.group-div6 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.group-div1 {\n  width: 227px;\n  flex-direction: row;\n}\n.group-div6 {\n  align-self: stretch;\n  flex-direction: column;\n  padding: 0 0 0 var(--padding-lg);\n  box-sizing: border-box;\n}\n.expand-icon2 {\n  position: relative;\n  border-radius: var(--br-xs);\n  width: 3.67px;\n  height: 5px;\n  flex-shrink: 0;\n}\n.component-div2,\n.group-div8 {\n  display: flex;\n  justify-content: flex-start;\n}\n.component-div2 {\n  align-self: stretch;\n  border-radius: var(--br-md);\n  overflow: hidden;\n  flex-direction: row;\n  padding: var(--padding-xs) var(--padding-sm);\n  box-sizing: border-box;\n  align-items: center;\n  gap: var(--gap-md);\n}\n.group-div8 {\n  flex: 1;\n  border-radius: var(--br-sm);\n  flex-direction: column;\n  align-items: flex-start;\n}\n.group-div {\n  gap: 6px;\n  text-align: left;\n  font-size: var(--font-size-base);\n  font-family: var(--font-roboto);\n}\n.body-div,\n.bottom-div,\n.group-div {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.bottom-div {\n  align-self: stretch;\n  gap: 8px;\n  text-align: right;\n  font-size: var(--font-size-sm);\n  color: var(--color1);\n  font-family: var(--font-inter);\n}\n.body-div {\n  width: 228px;\n  gap: 16px;\n}\n.icon {\n  position: relative;\n  width: 17.3px;\n  height: 17.31px;\n  flex-shrink: 0;\n}\n.export-to-locofy-plugin {\n  position: relative;\n  font-weight: 600;\n  display: inline-block;\n}\n\n\n.addon-div,\n.button-div {\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n}\n.button-div {\n  border-radius: var(--br-lg);\n  background-color: var(--color1);\n  width: 228px;\n  flex-direction: row;\n  padding: 12px 24px;\n  gap: 5.85px;\n  text-align: center;\n  color: var(--color-white);\n  font-family: var(--font-inter);\n  cursor: pointer;\n}\n.button-div:hover {\n  background: #3d6cd7;\n}";