/* line 1, app/assets/stylesheets/chat_gpt.scss */
#ai_test .Polaris-FormLayout__Item {
margin-left: 0px;
margin-left: 8px;
}
/* line 7, app/assets/stylesheets/chat_gpt.scss */
#open_ai ul {
list-style-type: none;
padding-left: 0;
list-style-position: inside;
counter-reset: step-counter;
}
/* line 12, app/assets/stylesheets/chat_gpt.scss */
#open_ai ul > li {
margin-bottom: 1.5rem;
counter-increment: step-counter;
}
/* line 15, app/assets/stylesheets/chat_gpt.scss */
#open_ai ul > li:before {
content: counter(step-counter) ". ";
}
/* line 18, app/assets/stylesheets/chat_gpt.scss */
#open_ai ul > li:first-of-type {
margin-top: 1.5rem;
}
/* line 1, app/assets/stylesheets/home.scss */
.ai_list {
counter-reset: step-counter;
}
/* line 3, app/assets/stylesheets/home.scss */
.ai_list > li {
counter-increment: step-counter;
}
/* line 5, app/assets/stylesheets/home.scss */
.ai_list > li:before {
content: counter(step-counter) ". ";
}
/* line 8, app/assets/stylesheets/home.scss */
.ai_list > li:first-of-type {
margin-top: 1.5rem;
}
/* line 14, app/assets/stylesheets/home.scss */
#open_ai_video {
margin-top: 1.5rem;
}
/* line 16, app/assets/stylesheets/home.scss */
#open_ai_video > video {
height: 100%;
width: 100%;
}
/* line 22, app/assets/stylesheets/home.scss */
#try_it_out_link {
font-size: large;
color: #000;
}
/* line 28, app/assets/stylesheets/home.scss */
.open_ai_editor > textarea {
width: 100%;
height: 200px;
margin-bottom: 1.5rem;
padding: 1em 1em;
}
/* line 36, app/assets/stylesheets/home.scss */
.spinner {
padding-top: 80px;
position: absolute;
padding-left: 28%;
}
/* line 42, app/assets/stylesheets/home.scss */
#react_small_spinner {
position: absolute;
display: none;
top: 0px;
z-index: 999;
}
/* line 49, app/assets/stylesheets/home.scss */
.try_it_out {
font-size: large;
margin-bottom: 1.5rem;
}
/* line 54, app/assets/stylesheets/home.scss */
#chat_gpt_button .shake_icon {
float: right;
margin-left: 8px;
font-size: 22px;
}
/* line 60, app/assets/stylesheets/home.scss */
#react_home .react_banner {
width: 98%;
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/products.scss */
.errors-dropdown {
top: 20px;
z-index: 1;
width: auto;
min-width: 100px;
max-width: 100px;
display: none;
position: absolute;
background: #fff;
border: 1px solid #92d275;
box-shadow: 0 0 7px 1px #92d275;
}
/* line 14, app/assets/stylesheets/products.scss */
.errors-dropdown h5 {
font-size: 1rem;
width: 100%;
padding: 10px 12px;
margin-bottom: 0;
font-weight: 400;
border-bottom: 1px solid #ddd;
}
/* line 23, app/assets/stylesheets/products.scss */
.errors-dropdown .not-error {
color: #fe60a1;
text-align: center;
cursor: pointer;
}
/* line 29, app/assets/stylesheets/products.scss */
.errors-dropdown ul {
padding: 0;
margin: 0;
}
/* line 33, app/assets/stylesheets/products.scss */
.errors-dropdown li {
list-style: none;
padding: 8px 10px 10px;
font-weight: 400;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
/* line 42, app/assets/stylesheets/products.scss */
.errors-dropdown li:hover {
background: linear-gradient(45deg, #19d9b4, #92d275 90%);
color: #fff;
}
/* line 46, app/assets/stylesheets/products.scss */
.errors-dropdown hr {
margin: 0;
}
/* line 49, app/assets/stylesheets/products.scss */
.errors-dropdown a.div,
.errors-dropdown div {
margin: 0;
padding: 8px 10px 10px;
font-size: .75rem;
}
/* line 56, app/assets/stylesheets/products.scss */
.error-grammar {
cursor: pointer;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 2px;
background: #f2dcdc;
position: relative;
}
/* line 66, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h1 {
font-size: large;
}
/* line 69, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h2 {
font-size: larger;
}
/* line 72, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h3 {
font-size: medium;
}
/* line 75, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h4 {
font-size: small;
}
/* line 78, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h5 {
font-size: smaller;
}
/* line 81, app/assets/stylesheets/products.scss */
.translation_app div > div.note-editor.note-frame h6 {
font-size: smaller;
}
/* line 86, app/assets/stylesheets/products.scss */
.translation_app .Polaris-Connected__Item--primary {
z-index: unset !important;
}
/* line 89, app/assets/stylesheets/products.scss */
.translation_app .Polaris-Connected__Item {
z-index: inherit !important;
}
/* line 94, app/assets/stylesheets/products.scss */
.page_button {
border-width: 3px !important;
border-color: #F3982D !important;
margin-right: 30px !important;
}
/* line 100, app/assets/stylesheets/products.scss */
.interface_button {
margin-right: 30px !important;
}
/* line 104, app/assets/stylesheets/products.scss */
.hyperlink_int {
text-decoration: none;
}
/* line 108, app/assets/stylesheets/products.scss */
a.hyperlink_int {
color: #2E2F30;
}
/* line 110, app/assets/stylesheets/products.scss */
a.hyperlink_int:visited {
color: #2E2F30;
}
/* line 115, app/assets/stylesheets/products.scss */
.object_title {
font-weight: bold;
font-size: large;
}
/* line 119, app/assets/stylesheets/products.scss */
.interface_check_mark {
list-style: none !important;
}
/* line 121, app/assets/stylesheets/products.scss */
.interface_check_mark ::before {
content: "✔";
padding-right: 8px;
color: #3ec133;
}
/* line 128, app/assets/stylesheets/products.scss */
.layout {
margin-top: auto;
margin-left: auto;
margin-bottom: 2rem;
}
/* line 134, app/assets/stylesheets/products.scss */
.btn-custom-save {
background-color: #388161;
color: white;
width: 70px;
height: 37px;
border-radius: 5px;
border: 1px solid #869093;
margin-top: -7px;
cursor: pointer;
}
/* line 145, app/assets/stylesheets/products.scss */
.btn-custom-save:hover {
background-color: #317355;
}
/* line 149, app/assets/stylesheets/products.scss */
.theme_save_btn {
background-color: #388161;
color: white;
width: 70px;
height: 37px;
border-radius: 5px;
border: 1px solid #869093;
top: 10px;
cursor: pointer;
}
/* line 160, app/assets/stylesheets/products.scss */
.theme_save_btn:hover {
background-color: #317355;
}
/* line 164, app/assets/stylesheets/products.scss */
.theme_select {
min-width: 27rem;
border-radius: 5px;
padding: 7px;
}
/* line 170, app/assets/stylesheets/products.scss */
.theme_textarea {
padding-left: 0.6rem !important;
}
/* line 174, app/assets/stylesheets/products.scss */
.save_btn_lower {
position: relative;
left: 7px;
}
/* line 179, app/assets/stylesheets/products.scss */
#product_save_top {
position: relative;
right: 70px;
bottom: 45px;
}
/* line 185, app/assets/stylesheets/products.scss */
.credits {
margin-left: 2rem;
margin-top: 2rem;
padding: 3rem;
}
/* line 191, app/assets/stylesheets/products.scss */
.google_icon_div {
position: relative;
display: inline-block;
float: left;
margin-left: -20px;
width: 25px;
height: 25px;
top: 20px;
cursor: pointer;
}
/* line 202, app/assets/stylesheets/products.scss */
.google_icon_page {
margin-right: 14px;
margin-top: 16px;
}
/* line 208, app/assets/stylesheets/products.scss */
#temporal_icon {
margin-left: -35px;
margin-top: 15px;
}
/* line 213, app/assets/stylesheets/products.scss */
#temporal_icon_spellcheck {
margin-left: -35px;
padding-top: 15px;
}
/* line 218, app/assets/stylesheets/products.scss */
.spellchecker_icon_div {
position: relative;
float: left;
margin-left: -25px;
margin-top: 30px;
width: 25px;
height: 25px;
top: 20px;
cursor: pointer;
}
/* line 229, app/assets/stylesheets/products.scss */
#temporal_icon_question {
margin-left: -35px;
}
/* line 233, app/assets/stylesheets/products.scss */
.question_icon_div {
position: relative;
float: right;
margin-left: -25px;
width: 25px;
height: 25px;
cursor: pointer;
}
/* line 242, app/assets/stylesheets/products.scss */
.question_icon_div--top-spacing {
margin-top: 20px;
}
/* line 246, app/assets/stylesheets/products.scss */
#color_credits {
background-color: #f9f9f9;
}
/* line 250, app/assets/stylesheets/products.scss */
.interface_list {
display: flex;
justify-content: space-between;
margin-top: 10px;
flex-wrap: wrap;
margin-left: -5px;
}
/* line 258, app/assets/stylesheets/products.scss */
.buttons_wrapper {
margin-bottom: 25px;
}
/* line 262, app/assets/stylesheets/products.scss */
#credits_count {
display: inline;
}
/* line 266, app/assets/stylesheets/products.scss */
#credits_title {
margin-top: 10px;
margin-bottom: 60px;
}
/* line 271, app/assets/stylesheets/products.scss */
.google_icon_div .price_tooltip {
position: absolute;
visibility: hidden;
width: 80px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
display: inline-flex;
z-index: 30;
left: 20px;
opacity: 0;
transition: opacity 0.3s;
}
@media (max-width: 1200px) {
/* line 287, app/assets/stylesheets/products.scss */
.google_icon_div .price_tooltip {
position: absolute;
z-index: 30;
left: 5px;
top: -70px;
}
}
/* line 296, app/assets/stylesheets/products.scss */
.spellchecker_icon_div .spellchecker_tooltip {
position: absolute;
visibility: hidden;
width: 80px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
display: inline-flex;
z-index: 30;
left: 20px;
opacity: 0;
transition: opacity 0.3s;
}
@media (max-width: 1200px) {
/* line 296, app/assets/stylesheets/products.scss */
.spellchecker_icon_div .spellchecker_tooltip {
position: absolute;
z-index: 30;
left: 5px;
top: -70px;
}
}
/* line 318, app/assets/stylesheets/products.scss */
.question_icon_div .question_tooltip {
position: absolute;
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
display: inline-flex;
z-index: 30;
margin-left: 22px;
opacity: 0;
transition: opacity 0.3s;
}
@media (max-width: 1200px) {
/* line 318, app/assets/stylesheets/products.scss */
.question_icon_div .question_tooltip {
position: absolute;
z-index: 30;
left: 5px;
top: -70px;
}
}
/* line 340, app/assets/stylesheets/products.scss */
.google_icon_div:hover .price_tooltip {
visibility: visible;
opacity: 1;
}
/* line 345, app/assets/stylesheets/products.scss */
.spellchecker_icon_div:hover .spellchecker_tooltip {
visibility: visible;
opacity: 1;
}
/* line 350, app/assets/stylesheets/products.scss */
.question_icon_div:hover .question_tooltip {
visibility: visible;
opacity: 1;
}
/* line 355, app/assets/stylesheets/products.scss */
#popup_color {
background-color: rgba(39, 40, 39, 0.8);
}
/* line 359, app/assets/stylesheets/products.scss */
#panel {
display: none;
}
/* line 363, app/assets/stylesheets/products.scss */
#panelBtn {
display: none;
}
/* line 367, app/assets/stylesheets/products.scss */
#panelLink {
display: none;
}
/* line 372, app/assets/stylesheets/products.scss */
#text_color {
color: white;
z-index: 999999;
}
/* line 377, app/assets/stylesheets/products.scss */
.save-btn-bottom {
margin-top: 10px;
background-color: #388161;
color: white;
}
/* line 383, app/assets/stylesheets/products.scss */
.buy_now {
width: 150px;
}
/* line 387, app/assets/stylesheets/products.scss */
.credits_price {
margin-left: 4%;
margin-bottom: 2%;
}
/* line 392, app/assets/stylesheets/products.scss */
.home_text {
line-height: 2;
font-size: 15px;
}
/* line 397, app/assets/stylesheets/products.scss */
.home_header {
line-height: 3;
font-weight: 700;
font-size: 18px;
}
/* line 403, app/assets/stylesheets/products.scss */
.navSave {
display: flex;
justify-content: flex-end;
}
/* line 408, app/assets/stylesheets/products.scss */
#titleCredits {
position: absolute;
margin-top: -47px;
}
/* line 413, app/assets/stylesheets/products.scss */
#pricingLink {
margin-left: 15px;
font-size: 13px;
}
/* line 418, app/assets/stylesheets/products.scss */
#menuTitle {
margin-top: 35px;
}
/* line 422, app/assets/stylesheets/products.scss */
.linksList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* line 427, app/assets/stylesheets/products.scss */
.linksList .translationsLink {
margin-bottom: 20px;
}
/* line 431, app/assets/stylesheets/products.scss */
.linksList .primaryLink {
width: 100%;
margin-bottom: 20px;
}
/* line 436, app/assets/stylesheets/products.scss */
.linksList .primaryBox {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
/* line 442, app/assets/stylesheets/products.scss */
.linksList .primaryBox .google_icon_div {
position: absolute;
left: -15px;
display: inline-block;
width: 25px;
height: 25px;
bottom: 5px;
cursor: pointer;
}
/* line 453, app/assets/stylesheets/products.scss */
.linksList .Polaris-FormLayout__Item {
margin-left: 0;
}
@media screen and (min-width: 600px) {
/* line 458, app/assets/stylesheets/products.scss */
.linksList .translationsLink {
width: calc(50% - 20px);
}
}
/* line 464, app/assets/stylesheets/products.scss */
.linkTextfield {
flex: 1;
}
/* line 468, app/assets/stylesheets/products.scss */
.linkHeading {
font-size: 18px;
font-weight: 700;
}
/* line 473, app/assets/stylesheets/products.scss */
.exampleLink {
float: right;
width: 20px;
height: 20px;
margin-left: 10px;
margin-top: 20px;
cursor: pointer;
}
/* line 482, app/assets/stylesheets/products.scss */
.exampleLocale {
display: flex;
}
/* line 485, app/assets/stylesheets/products.scss */
.loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 30vh;
}
/* line 491, app/assets/stylesheets/products.scss */
.waviy {
position: relative;
}
/* line 494, app/assets/stylesheets/products.scss */
.waviy span {
position: relative;
display: inline-block;
font-size: 40px;
color: black;
text-transform: uppercase;
animation: flip 2s infinite;
animation-delay: calc(.2s * var(--i));
}
@keyframes flip {
0%, 80% {
transform: rotateY(360deg);
}
}
/* line 509, app/assets/stylesheets/products.scss */
#navigation_values {
padding: 6px;
}
/* line 513, app/assets/stylesheets/products.scss */
.translations-content {
max-width: 130rem;
margin-left: 2rem;
}
/* line 518, app/assets/stylesheets/products.scss */
#objectDropdown {
margin-bottom: 15px;
}
/* ⚠️ px, NOT rem, AND THAT IS THE WHOLE POINT OF THIS BLOCK.
These four values were authored against Polaris 6's `html{font-size:62.5%}`,
where 1.3rem is 13px and 2rem is 20px. Polaris 12 sets the root back to 100%,
so on every page that loads it the badge rendered at 20.8px with 4.8px/12.8px
padding — which is why 29 views each carried
`.main_app .text_new_item { font-size: 13px !important; }` to force the font
back. Those overrides only ever fixed the FONT: the padding and the radius
stayed 1.6x on all 40 Polaris 12 pages and nobody noticed.
Pinned in px, the badge is the same on every page whatever the root is, and
the 29 overrides are gone with Polaris 6. */
/* line 532, app/assets/stylesheets/products.scss */
.text_new_item {
padding: 3px 8px;
background: #AEE9D1FF;
border-radius: 20px;
font-size: 13px;
}
/* line 539, app/assets/stylesheets/products.scss */
.new-added-btn {
display: contents;
}
/* line 543, app/assets/stylesheets/products.scss */
.interface_list_right {
justify-content: right;
}
/* line 547, app/assets/stylesheets/products.scss */
.displayed_center {
text-align: center;
}
/* line 551, app/assets/stylesheets/products.scss */
.displayed_right {
float: right;
}
/* line 555, app/assets/stylesheets/products.scss */
.sub_button {
display: flex;
justify-content: center;
}
/* line 560, app/assets/stylesheets/products.scss */
.description {
height: 35vh;
}
/* line 565, app/assets/stylesheets/products.scss */
.change_plan button:focus {
border: none !important;
}
/* line 568, app/assets/stylesheets/products.scss */
#cancel {
background-color: red;
}
/* line 572, app/assets/stylesheets/products.scss */
.sub_plan {
border-color: #F3982D;
box-shadow: 0 0 10px #F3982D !important;
}
/* line 577, app/assets/stylesheets/products.scss */
.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
/* line 586, app/assets/stylesheets/products.scss */
.balance {
padding-bottom: 2rem;
}
/* line 590, app/assets/stylesheets/products.scss */
.overview {
padding-top: 1rem;
}
/* line 594, app/assets/stylesheets/products.scss */
.text_pricing {
margin-left: 2rem;
}
/* line 598, app/assets/stylesheets/products.scss */
.one-half {
width: calc(50% - 20px);
}
/* line 601, app/assets/stylesheets/products.scss */
.help_text {
font-size: 1.5rem;
}
/* line 605, app/assets/stylesheets/products.scss */
.help_card {
margin: 10px 0 40px 0;
}
/* line 609, app/assets/stylesheets/products.scss */
.title_inst {
font-size: 2.5rem !important;
margin-bottom: 2px;
}
/* line 614, app/assets/stylesheets/products.scss */
.main-billing-info {
grid-column-gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 20px;
}
/* line 621, app/assets/stylesheets/products.scss */
#add_credits {
display: none;
}
/* line 625, app/assets/stylesheets/products.scss */
#input_credit {
width: 200px;
}
/* line 629, app/assets/stylesheets/products.scss */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
/* line 634, app/assets/stylesheets/products.scss */
.description_credits {
height: 9vh;
}
/* line 638, app/assets/stylesheets/products.scss */
.lower-form {
padding-top: 40px;
}
/* line 642, app/assets/stylesheets/products.scss */
.one-third-form {
display: grid;
gap: 15px;
}
@media (min-width: 1500px) {
/* line 642, app/assets/stylesheets/products.scss */
.one-third-form {
grid-template-columns: repeat(5, 1fr);
}
}
/* line 650, app/assets/stylesheets/products.scss */
.form-refactored {
padding-top: 10px;
}
/* line 654, app/assets/stylesheets/products.scss */
.Locale-heading {
font-size: 1.9rem;
display: flex;
flex-flow: column;
padding-left: 20px;
}
/* line 661, app/assets/stylesheets/products.scss */
#PolarisTextFieldLabel {
font-size: medium;
}
/* line 665, app/assets/stylesheets/products.scss */
.locale-name {
margin-top: 10px !important;
}
/* line 669, app/assets/stylesheets/products.scss */
.dropbtn {
min-width: 130px;
text-decoration: none;
background-color: white;
border: 1px solid gray;
border-radius: 3px;
margin: 5px;
color: black;
padding: 10px 12px 10px 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
/* line 683, app/assets/stylesheets/products.scss */
.dropdown {
position: relative;
display: inline-block;
z-index: 99;
}
/* line 689, app/assets/stylesheets/products.scss */
.dropdown-content {
width: calc(100% - 10px);
margin-left: 5px;
border-radius: 3px;
overflow: hidden;
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* line 700, app/assets/stylesheets/products.scss */
.dropdown-content a {
color: black;
padding: 4px 4px 4px 4px;
text-decoration: none;
display: block;
}
/* line 707, app/assets/stylesheets/products.scss */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* line 709, app/assets/stylesheets/products.scss */
.dropdown:hover .dropdown-content {
display: block;
}
/* line 713, app/assets/stylesheets/products.scss */
.arrow {
border: 1px solid gray;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
float: right;
}
/* line 721, app/assets/stylesheets/products.scss */
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* line 726, app/assets/stylesheets/products.scss */
#search_form {
padding-top: 10px;
}
/* line 730, app/assets/stylesheets/products.scss */
.imageInfo {
max-width: 98%;
margin-top: 30px;
}
/* line 735, app/assets/stylesheets/products.scss */
.main_home {
width: 98%;
border-radius: 5px;
background-color: var(--p-surface);
box-shadow: 1px 5px 10px #f0f0f0;
outline: 0.1rem solid transparent;
}
/* line 742, app/assets/stylesheets/products.scss */
.inner_list_element {
border-left: 0.3rem solid transparent;
display: flex;
align-items: center;
text-align: left;
padding: 2.5rem 1rem 2.5rem;
background-color: #f8f8f8;
border-bottom: 0.1rem solid #f0f0f0;
border-right: 0.1rem solid #f0f0f0;
}
/* line 752, app/assets/stylesheets/products.scss */
.list {
list-style-type: none;
padding-left: 0;
list-style-position: inside;
}
/* line 757, app/assets/stylesheets/products.scss */
.list li {
margin-bottom: 1.5rem;
}
/* line 760, app/assets/stylesheets/products.scss */
.list_decimal {
list-style-type: decimal;
}
/* line 763, app/assets/stylesheets/products.scss */
.step_content {
display: inline-block;
max-width: 95%;
}
/* line 767, app/assets/stylesheets/products.scss */
.active_element {
border-right: none !important;
border-left-color: #E49244;
background-color: white !important;
}
/* line 772, app/assets/stylesheets/products.scss */
.text_element {
width: 70%;
display: flex;
flex-direction: column;
padding: 2.5rem 3rem;
}
/* line 778, app/assets/stylesheets/products.scss */
.inner_next_step ul {
padding-left: 0;
}
/* line 781, app/assets/stylesheets/products.scss */
.guide_link {
color: #E49244;
margin-top: 10px;
display: inline-flex;
}
/* line 786, app/assets/stylesheets/products.scss */
.link_steps {
display: flex;
justify-content: space-between;
margin-top: auto;
}
/* line 791, app/assets/stylesheets/products.scss */
.link_step {
display: inline-flex;
color: #E49244;
cursor: pointer;
}
/* line 796, app/assets/stylesheets/products.scss */
.next_step {
margin-left: auto;
}
/* line 799, app/assets/stylesheets/products.scss */
.dot {
height: 25px;
width: 25px;
background-color: #E49244;
border-radius: 50%;
display: inline-block;
}
/* line 806, app/assets/stylesheets/products.scss */
.font_bold {
font-weight: bold;
}
/* line 809, app/assets/stylesheets/products.scss */
.font_control_shift {
font-size: 20px;
font-weight: bold;
}
/* line 813, app/assets/stylesheets/products.scss */
.steps {
font-weight: 400;
color: #666565;
}
/* line 817, app/assets/stylesheets/products.scss */
.title_setup {
padding: 2rem;
border-bottom: 0.1rem solid #f0f0f0;
}
/* line 821, app/assets/stylesheets/products.scss */
.opacity {
opacity: 0.5;
}
/* line 824, app/assets/stylesheets/products.scss */
.main_element {
padding-top: 15px;
display: flex;
}
/* line 828, app/assets/stylesheets/products.scss */
.list_element {
width: 30%;
display: flex;
flex-direction: column;
}
/* line 833, app/assets/stylesheets/products.scss */
.description_dot {
padding-top: 4%;
}
/* line 836, app/assets/stylesheets/products.scss */
.description_step {
padding-left: 10px;
}
/* line 840, app/assets/stylesheets/products.scss */
.faq-question {
position: relative;
}
/* line 844, app/assets/stylesheets/products.scss */
.plus-minus-btn {
padding-top: 10px;
color: black;
background: white;
width: 12px;
height: 12px;
border: 0;
font-size: 1.5em;
position: relative;
margin-right: 10px;
}
/* line 856, app/assets/stylesheets/products.scss */
.faq-question:hover {
background-color: lightgrey;
transition: all 0.3s ease-out;
}
/* line 859, app/assets/stylesheets/products.scss */
.faq-question:hover .plus-minus-btn {
background-color: lightgrey;
transition: all 0.3s ease-out;
}
/* line 865, app/assets/stylesheets/products.scss */
.faq-question:after {
opacity: 1;
transition: all 0.3s ease;
}
/* line 870, app/assets/stylesheets/products.scss */
.faq-answer {
opacity: 0;
max-height: 0;
overflow-y: hidden;
transition: all 0.2s ease;
margin-bottom: 5px;
margin-left: 15px;
}
/* line 879, app/assets/stylesheets/products.scss */
.plus-minus-btn::before {
position: absolute;
content: "";
transition: 300ms;
background: black;
width: 12px;
height: 2px;
right: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* line 892, app/assets/stylesheets/products.scss */
.plus-minus-btn::after {
display: block;
position: absolute;
content: "";
width: 2px;
height: 12px;
background: black;
transition: 0.2s ease;
right: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* line 906, app/assets/stylesheets/products.scss */
.faqopen .plus-minus-btn::after {
transform: rotate(90deg);
opacity: 0;
top: 5%;
}
/* line 912, app/assets/stylesheets/products.scss */
.faqopen .faq-answer {
opacity: 1;
max-height: 1000px;
transition: all 0.2s ease;
}
/* line 918, app/assets/stylesheets/products.scss */
.question-header {
cursor: pointer;
line-height: 3;
font-weight: 600;
font-size: 15px;
margin-left: 15px;
}
/* line 926, app/assets/stylesheets/products.scss */
.faq-setup {
font-size: 25px;
}
/* line 930, app/assets/stylesheets/products.scss */
.Polaris-TextField .input {
flex: 1;
}
/* line 934, app/assets/stylesheets/products.scss */
#spinner7 {
padding-bottom: 5px;
}
/* line 938, app/assets/stylesheets/products.scss */
.open-ai-label {
display: none;
margin-top: -16px;
}
/* line 943, app/assets/stylesheets/products.scss */
.open-ai-ico {
cursor: pointer;
height: 24px;
width: 24px;
background-image: url(/assets/open-ai-ico-f7dbd40623c3d7fabd1b6908bd379050f8bb4a691e29203663c4acafa785887b.png);
background-size: 24px;
border-radius: 12px 12px 12px 12px;
}
/* line 952, app/assets/stylesheets/products.scss */
.open-ai-description {
color: #F3982D;
}
/* line 956, app/assets/stylesheets/products.scss */
.open-ai-spinner {
display: none;
display: inline-block !important;
position: absolute;
margin-left: 6px;
margin-top: 2px;
}
/* line 964, app/assets/stylesheets/products.scss */
.open-ai-ico:hover {
opacity: 0.7;
}
/* line 968, app/assets/stylesheets/products.scss */
.temporal_label {
font-weight: bold;
padding-bottom: 12px;
}
/* line 19, app/assets/stylesheets/review_invitation.scss */
:root {
--review-invitation-bottom: 10px;
--review-invitation-left: 5px;
}
/* line 30, app/assets/stylesheets/review_invitation.scss */
#review-invitation {
position: fixed;
bottom: var(--review-invitation-bottom, 10px);
left: var(--review-invitation-left, 5px);
z-index: 400;
}
/* line 41, app/assets/stylesheets/review_invitation.scss */
.review-invitation__ask {
border: none;
cursor: pointer;
display: block;
padding: 0;
background: none;
}
/* line 48, app/assets/stylesheets/review_invitation.scss */
.review-invitation__ask:disabled {
cursor: default;
opacity: 0.6;
}
/* line 56, app/assets/stylesheets/review_invitation.scss */
.review-invitation__ask:focus-visible {
outline: 2px solid #005bd3;
outline-offset: 2px;
border-radius: 8px;
}
/* line 8, app/assets/stylesheets/translation_grid.scss */
.translation-grid-note-truncate {
display: inline-block;
max-width: min(300px, 100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
/* line 46, app/assets/stylesheets/translation_progress.scss */
.translation-progress-table .Polaris-DataTable__Cell:first-child {
position: sticky;
left: 0;
z-index: 2;
background-color: var(--p-color-bg-surface);
}
/* line 61, app/assets/stylesheets/translation_progress.scss */
.translation-progress-table .Polaris-DataTable__Cell--header:first-child {
z-index: 3;
}
/* line 69, app/assets/stylesheets/translation_progress.scss */
.translation-progress-table .Polaris-DataTable__Cell:first-child::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background-color: var(--p-color-border-secondary);
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.instruction_step {
font-size: 20px;
display: inherit;
margin-top: 7px;
padding: 7px;
}
.Polaris-Heading {
font-weight: 400 !important;
font-size: 2rem !important;
}
#main_buttons_group{
margin: 1rem;
padding: 1%;
display: flex;
flex-wrap: wrap;
}
.main_button{
text-decoration: none;
background-color: white;
border: 1px solid gray;
border-radius: 3px;
margin: 5px;
color: black;
padding: 7px 7px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.main_button:hover{
background: #F6F6F7FF;
}
.selected_button{
outline: none;
background-color: #fafbfb;
color: gray;
}
.google_iframe{
display: none;
visibility: hidden;
}
.main_app{
background-color: rgb(246, 246, 247);
color: rgb(32, 34, 35);
--p-background:rgba(246, 246, 247, 1);
--p-background-hovered:rgba(241, 242, 243, 1);
--p-background-pressed:rgba(237, 238, 239, 1);
--p-background-selected:rgba(237, 238, 239, 1);
--p-surface:rgba(255, 255, 255, 1);
--p-surface-neutral:rgba(228, 229, 231, 1);
--p-surface-neutral-hovered:rgba(219, 221, 223, 1);
--p-surface-neutral-pressed:rgba(201, 204, 208, 1);
--p-surface-neutral-disabled:rgba(241, 242, 243, 1);
--p-surface-neutral-subdued:rgba(246, 246, 247, 1);
--p-surface-subdued:rgba(250, 251, 251, 1);
--p-surface-disabled:rgba(250, 251, 251, 1);
--p-surface-hovered:rgba(246, 246, 247, 1);
--p-surface-pressed:rgba(241, 242, 243, 1);
--p-surface-depressed:rgba(237, 238, 239, 1);
--p-backdrop:rgba(0, 0, 0, 0.5);
--p-overlay:rgba(255, 255, 255, 0.5);
--p-shadow-from-dim-light:rgba(0, 0, 0, 0.2);
--p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05);
--p-shadow-from-direct-light:rgba(0, 0, 0, 0.15);
--p-hint-from-direct-light:rgba(0, 0, 0, 0.15);
--p-surface-search-field:rgba(241, 242, 243, 1);
--p-border:rgba(140, 145, 150, 1);
--p-border-neutral-subdued:rgba(186, 191, 195, 1);
--p-border-hovered:rgba(153, 158, 164, 1);
--p-border-disabled:rgba(210, 213, 216, 1);
--p-border-subdued:rgba(201, 204, 207, 1);
--p-border-depressed:rgba(87, 89, 89, 1);
--p-border-shadow:rgba(174, 180, 185, 1);
--p-border-shadow-subdued:rgba(186, 191, 196, 1);
--p-divider:rgba(225, 227, 229, 1);
--p-icon:rgba(92, 95, 98, 1);
--p-icon-hovered:rgba(26, 28, 29, 1);
--p-icon-pressed:rgba(68, 71, 74, 1);
--p-icon-disabled:rgba(186, 190, 195, 1);
--p-icon-subdued:rgba(140, 145, 150, 1);
--p-text:rgba(32, 34, 35, 1);
--p-text-disabled:rgba(140, 145, 150, 1);
--p-text-subdued:rgba(109, 113, 117, 1);
--p-interactive:rgba(44, 110, 203, 1);
--p-interactive-disabled:rgba(189, 193, 204, 1);
--p-interactive-hovered:rgba(31, 81, 153, 1);
--p-interactive-pressed:rgba(16, 50, 98, 1);
--p-focused:rgba(69, 143, 255, 1);
--p-surface-selected:rgba(242, 247, 254, 1);
--p-surface-selected-hovered:rgba(237, 244, 254, 1);
--p-surface-selected-pressed:rgba(229, 239, 253, 1);
--p-icon-on-interactive:rgba(255, 255, 255, 1);
--p-text-on-interactive:rgba(255, 255, 255, 1);
--p-action-secondary:rgba(255, 255, 255, 1);
--p-action-secondary-disabled:rgba(255, 255, 255, 1);
--p-action-secondary-hovered:rgba(246, 246, 247, 1);
--p-action-secondary-pressed:rgba(241, 242, 243, 1);
--p-action-secondary-depressed:rgba(109, 113, 117, 1);
--p-action-primary:rgba(0, 128, 96, 1);
--p-action-primary-disabled:rgba(241, 241, 241, 1);
--p-action-primary-hovered:rgba(0, 110, 82, 1);
--p-action-primary-pressed:rgba(0, 94, 70, 1);
--p-action-primary-depressed:rgba(0, 61, 44, 1);
--p-icon-on-primary:rgba(255, 255, 255, 1);
--p-text-on-primary:rgba(255, 255, 255, 1);
--p-text-primary:rgba(0, 123, 92, 1);
--p-text-primary-hovered:rgba(0, 108, 80, 1);
--p-text-primary-pressed:rgba(0, 92, 68, 1);
--p-surface-primary-selected:rgba(241, 248, 245, 1);
--p-surface-primary-selected-hovered:rgba(179, 208, 195, 1);
--p-surface-primary-selected-pressed:rgba(162, 188, 176, 1);
--p-border-critical:rgba(253, 87, 73, 1);
--p-border-critical-subdued:rgba(224, 179, 178, 1);
--p-border-critical-disabled:rgba(255, 167, 163, 1);
--p-icon-critical:rgba(215, 44, 13, 1);
--p-surface-critical:rgba(254, 211, 209, 1);
--p-surface-critical-subdued:rgba(255, 244, 244, 1);
--p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1);
--p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1);
--p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1);
--p-text-critical:rgba(215, 44, 13, 1);
--p-action-critical:rgba(216, 44, 13, 1);
--p-action-critical-disabled:rgba(241, 241, 241, 1);
--p-action-critical-hovered:rgba(188, 34, 0, 1);
--p-action-critical-pressed:rgba(162, 27, 0, 1);
--p-action-critical-depressed:rgba(108, 15, 0, 1);
--p-icon-on-critical:rgba(255, 255, 255, 1);
--p-text-on-critical:rgba(255, 255, 255, 1);
--p-interactive-critical:rgba(216, 44, 13, 1);
--p-interactive-critical-disabled:rgba(253, 147, 141, 1);
--p-interactive-critical-hovered:rgba(205, 41, 12, 1);
--p-interactive-critical-pressed:rgba(103, 15, 3, 1);
--p-border-warning:rgba(185, 137, 0, 1);
--p-border-warning-subdued:rgba(225, 184, 120, 1);
--p-icon-warning:rgba(185, 137, 0, 1);
--p-surface-warning:rgba(255, 215, 157, 1);
--p-surface-warning-subdued:rgba(255, 245, 234, 1);
--p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1);
--p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1);
--p-text-warning:rgba(145, 106, 0, 1);
--p-border-highlight:rgba(68, 157, 167, 1);
--p-border-highlight-subdued:rgba(152, 198, 205, 1);
--p-icon-highlight:rgba(0, 160, 172, 1);
--p-surface-highlight:rgba(164, 232, 242, 1);
--p-surface-highlight-subdued:rgba(235, 249, 252, 1);
--p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1);
--p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1);
--p-text-highlight:rgba(52, 124, 132, 1);
--p-border-success:rgba(0, 164, 124, 1);
--p-border-success-subdued:rgba(149, 201, 180, 1);
--p-icon-success:rgba(0, 127, 95, 1);
--p-surface-success:rgba(174, 233, 209, 1);
--p-surface-success-subdued:rgba(241, 248, 245, 1);
--p-surface-success-subdued-hovered:rgba(236, 246, 241, 1);
--p-surface-success-subdued-pressed:rgba(226, 241, 234, 1);
--p-text-success:rgba(0, 128, 96, 1);
--p-decorative-one-icon:rgba(126, 87, 0, 1);
--p-decorative-one-surface:rgba(255, 201, 107, 1);
--p-decorative-one-text:rgba(61, 40, 0, 1);
--p-decorative-two-icon:rgba(175, 41, 78, 1);
--p-decorative-two-surface:rgba(255, 196, 176, 1);
--p-decorative-two-text:rgba(73, 11, 28, 1);
--p-decorative-three-icon:rgba(0, 109, 65, 1);
--p-decorative-three-surface:rgba(146, 230, 181, 1);
--p-decorative-three-text:rgba(0, 47, 25, 1);
--p-decorative-four-icon:rgba(0, 106, 104, 1);
--p-decorative-four-surface:rgba(145, 224, 214, 1);
--p-decorative-four-text:rgba(0, 45, 45, 1);
--p-decorative-five-icon:rgba(174, 43, 76, 1);
--p-decorative-five-surface:rgba(253, 201, 208, 1);
--p-decorative-five-text:rgba(79, 14, 31, 1);
--p-border-radius-base:0.4rem;
--p-border-radius-wide:0.8rem;
--p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light);
--p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light);
--p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light);
--p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light);
--p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05);
--p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2);
--p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15);
--p-override-none:none;
--p-override-transparent:transparent;
--p-override-one:1;
--p-override-visible:visible;
--p-override-zero:0;
--p-override-loading-z-index:514;
--p-button-font-weight:500; --p-non-null-content:'';
--p-choice-size:2rem;
--p-icon-size:1rem;
--p-choice-margin:0.1rem;
--p-control-border-width:0.2rem;
--p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued);
--p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued);
--p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued);
--p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued);
--p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued);
--p-badge-mix-blend-mode:luminosity;
--p-thin-border-subdued:0.1rem solid var(--p-border-subdued);
--p-text-field-spinner-offset:0.2rem;
--p-text-field-focus-ring-offset:-0.4rem;
--p-text-field-focus-ring-border-radius:0.7rem;
--p-button-group-item-spacing:-0.1rem;
--p-duration-1-0-0:100ms;
--p-duration-1-5-0:150ms;
--p-ease-in:cubic-bezier(0.5, 0.1, 1, 1);
--p-ease:cubic-bezier(0.4, 0.22, 0.28, 1);
--p-range-slider-thumb-size-base:1.6rem;
--p-range-slider-thumb-size-active:2.4rem;
--p-range-slider-thumb-scale:1.5;
--p-badge-font-weight:400;
--p-frame-offset:0px;
}
.Polaris-Labelled__LabelWrapper {
margin-top: 20px !important;
}
#react_banner {
width: 98%;
padding-left: 30px;
padding-bottom: 10px;
}
/* ─────────────────────────────────────────────────────────────────────────
App Bridge's bottom-inset spacer, moved out of the layout.
⚠️ THIS IS 100% OF THE MEASURED CLS ON THE EMBEDDED PAGES, AND NONE OF IT
IS OURS. App Bridge adopts a CONSTRUCTED stylesheet (verified in the bundle
served 2026-09-28, and visible in DevTools under #adopted-style-sheets):
:root { --shopify-safe-area-inset-bottom: 0px; }
body::after { content: ''; display: block;
height: var(--shopify-safe-area-inset-bottom); }
…then sets that variable from the host's `safeAreaInsets.bottom` and
SUBSCRIBES to changes. During load the admin pushes it 0 -> 66px -> 0 (the
clearance for its bottom chrome, the Sidekick bar), so the spacer is a
66px in-flow block that appears, is pushed down as our content lays out
above it, and then stops generating a box.
Measured with an in-page probe, both shifts attributed to `::after` whose
parentElement is `body`:
[cls] 0.02264 from {y:0, h:66} to {y:133, h:66} <- our content lays out
[cls] 0.07031 from {y:133, h:66} to {0,0,0,0} <- inset returns to 0
---------------
0.09295 == the CLS App Bridge reported for that document, exactly.
⚠️ IT ONLY RECORDS WHEN THE SERVER IS SLOW. Six runs, no overlap:
TTFB 196 / 213 / 246 ms -> CLS 0; TTFB 603 / 632 / 668 ms -> 0.084-0.093.
The spacer is created before exists (App Bridge is the first script,
as App Store 2.2.3 requires), so it must move once content arrives; whether
that is RECORDED depends on the browser laying out in between. Production
sits at CLS 0.01 because its TTFB is ~200ms — this bites a cold dyno or a
slow Shopify response, i.e. exactly the big-store case.
THE FIX keeps the clearance and removes the movable box: padding grows the
page by the same amount, and padding cannot be attributed a layout shift
because nothing sits below it to move.
⚠️ THE PADDING IS ON `#translation-app`, NOT ON , AND THAT IS A
BROWSER FINDING, NOT A PREFERENCE. On the Heroku test app on 2026-09-28 the
`body::after` half measured CLS 0, so the neutralising rule demonstrably
reaches the page — but `body { padding-bottom }` did NOT produce the
clearance, while the same declaration on `#translation-app` did. The owner
verified both in the admin iframe. The mechanism is NOT established; if you
work it out, record it here rather than re-litigating the placement.
⚠️ AND `#translation-app` IS LOAD-BEARING BY ACCIDENT. `embedded_app.html.erb`
writes it as ``. HTML5 ignores the self-closing
slash on a non-void element, so that parses as an OPEN tag and the div ends
up wrapping everything down to `` — which is the only reason padding
on it clears the whole page. It has no React mount, no other CSS rule and no
JS reference; nothing else in the app uses it.
So "tidying" that tag to `` moves the
padding onto an EMPTY div and the clearance silently disappears. A request
spec pins the nesting for exactly that reason.
⚠️ `!important` IS LOAD-BEARING. `document.adoptedStyleSheets` sort AFTER
every author stylesheet, so without it App Bridge's rule wins and this is a
silent no-op. A request spec pins it.
⚠️ IF SHOPIFY FIXES THIS UPSTREAM, DELETE BOTH RULES. Should they switch to
padding themselves, ours would double the clearance — visible as a gap at
the bottom of every page, not silent. Reported to Shopify; revisit when
App Bridge stops emitting the transient 66px.
───────────────────────────────────────────────────────────────────────── */
#translation-app {
padding-bottom: var(--shopify-safe-area-inset-bottom, 0px);
}
body::after {
content: none !important;
}