html, body { padding: 0px; margin: 0px; background-color: #f7f7f7; line-height: 1.42857143; } * { box-sizing: border-box; } .grist-form-container { --icon-Tick: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjYxODMwNjksNC42NzcwMjg0NyBDMTEuNzk2Njc4OSw0LjQ2NjIyNTE3IDEyLjExMjE2NzgsNC40Mzk5MzQ0MyAxMi4zMjI5NzExLDQuNjE4MzA2NDUgQzEyLjUzMzc3NDQsNC43OTY2Nzg0OCAxMi41NjAwNjUyLDUuMTEyMTY3NDEgMTIuMzgxNjkzMSw1LjMyMjk3MDcxIEw2LjUzMDY4ODI3LDEyLjIzNzc5NDYgTDMuNjQ2NDQ2NjEsOS4zNTM1NTI5OCBDMy40NTExODQ0Niw5LjE1ODI5MDg0IDMuNDUxMTg0NDYsOC44NDE3MDgzNSAzLjY0NjQ0NjYxLDguNjQ2NDQ2MiBDMy44NDE3MDg3Niw4LjQ1MTE4NDA2IDQuMTU4MjkxMjQsOC40NTExODQwNiA0LjM1MzU1MzM5LDguNjQ2NDQ2MiBMNi40NjkzMTE3MywxMC43NjIyMDQ1IEwxMS42MTgzMDY5LDQuNjc3MDI4NDcgWiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+); --icon-Minus: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSIyIiB5PSI3LjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxIiByeD0iLjUiLz48L3N2Zz4=); --primary: #16b378; --primary-dark: #009058; --dark-gray: #D9D9D9; --light-gray: #bfbfbf; --light: white; color: #262633; background-color: #f7f7f7; min-height: 100%; width: 100%; padding-top: 52px; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .grist-form-container .grist-form-confirm { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .grist-form { margin: 0px auto; background-color: white; border: 1px solid #E8E8E8; width: 600px; border-radius: 8px; display: flex; flex-direction: column; max-width: calc(100% - 32px); margin-bottom: 16px; padding-top: 20px; --grist-form-padding: 48px; padding-left: var(--grist-form-padding); padding-right: var(--grist-form-padding); } @media screen and (max-width: 600px) { .grist-form-container { padding-top: 20px; } .grist-form { --grist-form-padding: 20px; } } .grist-form > div + div { margin-top: 16px; } .grist-form .grist-section { border-radius: 3px; border: 1px solid #D9D9D9; padding: 16px 24px; padding: 24px; margin-top: 24px; } .grist-form .grist-section > div + div { margin-top: 16px; } .grist-form input[type="text"], .grist-form input[type="date"], .grist-form input[type="datetime-local"], .grist-form input[type="number"] { padding: 4px 8px; border: 1px solid #D9D9D9; border-radius: 3px; outline: none; } .grist-form .grist-field { display: flex; flex-direction: column; } .grist-form .grist-field .grist-field-description { color: #222; font-size: 12px; font-weight: 400; margin-top: 4px; white-space: pre-wrap; font-style: italic; font-weight: 400; line-height: 1.6; } .grist-form .grist-field input[type="text"] { padding: 4px 8px; border-radius: 3px; border: 1px solid #D9D9D9; font-size: 13px; outline-color: #16b378; outline-width: 1px; line-height: inherit; width: 100%; } .grist-form .grist-submit, .grist-form-container button { display: flex; justify-content: center; align-items: center; } .grist-form input[type="submit"], .grist-form-container button { background-color: #16b378; border: 1px solid #16b378; color: white; padding: 10px 24px; border-radius: 4px; font-size: 13px; cursor: pointer; line-height: inherit; } .grist-form input[type="datetime-local"] { width: 100%; line-height: inherit; } .grist-form input[type="date"] { width: 100%; line-height: inherit; } .grist-form input[type="checkbox"] { margin: 0px; } .grist-form .grist-columns { display: grid; grid-template-columns: repeat(var(--grist-columns-count), 1fr); gap: 4px; } .grist-form select { padding: 4px 8px; border-radius: 3px; border: 1px solid #D9D9D9; font-size: 13px; outline-color: #16b378; outline-width: 1px; background: white; line-height: inherit; flex: auto; width: 100%; } .grist-form .grist-choice-list { display: flex; flex-direction: column; gap: 4px; } .grist-form .grist-checkbox { display: flex; align-items: center; gap: 4px; --color: var(--dark-gray); } .grist-form .grist-checkbox:hover { --color: var(--light-gray); } .grist-form input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; padding: 0; flex-shrink: 0; display: inline-block; width: 16px; height: 16px; outline: none !important; --radius: 3px; position: relative; margin: 0; margin-right: 4px; vertical-align: baseline; } .grist-form input[type="checkbox"]:checked:enabled, .grist-form input[type="checkbox"]:indeterminate:enabled { --color: var(--primary); } .grist-form input[type="checkbox"]:disabled { --color: var(--dark-gray); cursor: not-allowed; } .grist-form input[type="checkbox"]::before, .grist-form input[type="checkbox"]::after { content: ''; position: absolute; top: 0; left: 0; height: 16px; width: 16px; box-sizing: border-box; border: 1px solid var(--color, var(--dark-gray)); border-radius: var(--radius); } .grist-form input[type="checkbox"]:checked::before, .grist-form input[type="checkbox"]:disabled::before, .grist-form input[type="checkbox"]:indeterminate::before { background-color: var(--color); } .grist-form input[type="checkbox"]:not(:checked):indeterminate::after { -webkit-mask-image: var(--icon-Minus); } .grist-form input[type="checkbox"]:not(:disabled)::after { background-color: var(--light); } .grist-form input[type="checkbox"]:checked::after, .grist-form input[type="checkbox"]:indeterminate::after { content: ''; position: absolute; height: 16px; width: 16px; -webkit-mask-image: var(--icon-Tick); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-color: var(--light); } .grist-form .grist-submit input[type="submit"]:hover, .grist-form-container button:hover { border-color: var(--primary-dark); background-color: var(--primary-dark); } .grist-power-by { margin-top: 24px; color: var(--dark-text, #494949); font-size: 13px; font-style: normal; font-weight: 600; line-height: 16px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--dark-gray); padding: 10px; margin-left: calc(-1 * var(--grist-form-padding)); margin-right: calc(-1 * var(--grist-form-padding)); } .grist-power-by a { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--dark-text, #494949); text-decoration: none; } .grist-logo { width: 58px; height: 20.416px; flex-shrink: 0; background: url(logo.png); background-position: 0 0; background-size: contain; background-color: transparent; background-repeat: no-repeat; margin-top: 3px; } .grist-question > .grist-label { color: var(--dark, #262633); font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; /* 145.455% */ margin-bottom: 8px; display: block; } /* Markdown reset */ .grist-form h1, .grist-form h2, .grist-form h3, .grist-form h4, .grist-form h5, .grist-form h6 { margin: 4px 0px; font-weight: normal; } .grist-form h1 { font-size: 24px; } .grist-form h2 { font-size: 22px; } .grist-form h3 { font-size: 16px; } .grist-form h4 { font-size: 13px; } .grist-form h5 { font-size: 11px; } .grist-form h6 { font-size: 10px; } .grist-form p { margin: 0px; } .grist-form strong { font-weight: 600; } .grist-form hr { border: 0px; border-top: 1px solid var(--dark-gray); margin: 4px 0px; } .grist-text-left { text-align: left; } .grist-text-right { text-align: right; } .grist-text-center { text-align: center; } .grist-switch { cursor: pointer; display: flex; align-items: center; } .grist-switch input[type='checkbox']::after { content: none; } .grist-switch input[type='checkbox']::before { content: none; } .grist-switch input[type='checkbox'] { position: absolute; } .grist-switch > span { margin-left: 8px; } /* Slider component */ .grist-widget_switch { position: relative; width: 30px; height: 17px; display: inline-block; flex: none; } .grist-switch_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--grist-theme-switch-slider-fg, #ccc); border-radius: 17px; } .grist-switch_slider:hover { box-shadow: 0 0 1px #2196F3; } .grist-switch_circle { position: absolute; cursor: pointer; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: var(--grist-theme-switch-circle-fg, white); border-radius: 17px; } input:checked + .grist-switch_transition > .grist-switch_slider { background-color: var(--primary, #16b378); } input:checked + .grist-switch_transition > .grist-switch_circle { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); } .grist-switch_on > .grist-switch_slider { background-color: var(--grist-actual-cell-color, #2CB0AF); } .grist-switch_on > .grist-switch_circle { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); } .grist-switch_transition > .grist-switch_slider, .grist-switch_transition > .grist-switch_circle { -webkit-transition: .4s; transition: .4s; }