@import url('https://fonts.googleapis.com/css2?family=Taviraj:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

html {
  height: 100%;
  width: 100%;
}
html, body {
	margin: 0;
	font-family: 'Outfit', sans-serif;
}
.product-name {
	font-family: "Taviraj", serif;
}
h1.highlight, p.highlight, span.highlight {
	border-bottom: 4px solid;
	background-color: rgba(255, 255, 0, 0.5); /* yellow with 50% opacity */
	padding: 0 4px;
}
h3 {
	font-size: 1em;
	margin-bottom: 4px;
}
h4 {
	margin-top: 0;
	margin-bottom: 4px;
}
p.footnote {
	opacity: 0.5;
	font-style: italic;
	font-size: 0.9em;
}
textarea {
	width: 100%;
	box-sizing: border-box;
}
a {
	text-decoration: none;
	border-bottom: 1px solid;
	color: #0081A4;
}
.site-inputs button {
	transition: all 0.2s ease-in-out;
}
.site-inputs button:not(:disabled):hover {
	background-color: #0081A4;
	color: white;
  cursor: pointer;
}
.site-inputs button.primary {
	background-color: #0081A4;
	color: white;
	width: 100%;
	padding: 12px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	font-size: 1.1em;
}
.site-inputs button.primary:disabled {
	background-color: #999;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
}
.site-inputs button.primary:not(:disabled):hover {
	background-color: #00546B;
}
table {
    border-collapse: collapse;
    width: 100%;
}
table th, table td {
    border: 1px solid #666;
    padding: 8px;
}
table th {
    background-color: #f2f2f2;
    text-align: left;
}

.section {
	margin: 0;
	padding: 12px 20px;
}
.section .container {
	max-width: 800px;
	margin: 0 auto;
	
}
.section.header {
	background: linear-gradient(to bottom right, #FFFCC2 0%, #AAF6DA 50%, #9CD5FF 100%);
	text-align: center;
	color: #0081A4;
}
.section.header h2 {
	font-size: 0.8em;
	margin-bottom: 0;
}
.section.header h1 {
	margin: 0;
}
.section.header p {
	margin-top: 0.5em;
}
.section.info {
	background-color: #FFF;
	font-size: 0.8em;
	opacity: 0.75;
}
.section.info .how-it-works-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 30px;
}
.section.info ol {
	padding-left: 1em;
}
.section.info .how-it-works-steps p {
	margin-top: 0px;
}
@media (max-width: 600px) {
	.section.info .how-it-works-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* FOOTER SECTION */
.section.footer {
	opacity: 0.8;
	text-align: center;
	padding-bottom: 40px;
}
.section.footer p {
	margin: 8px;
}
/* MAIN SECTION */
.section.main {
	background-color: #C9EAF3;
	padding: 20px;
}
.section.main p {
	margin: 0;
}
.section.main .container {
	padding: 0;
	border-radius: 8px;
	background-color: white;
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 40px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.section.main .container .header {
	color: #0081A4;
	padding: 10px;
	border-bottom: 1px solid #DDD;
}
.section.main .container .header h2 {
	margin: 0;
	padding: 3px 20px;
}
.section.main .container .content {
	background-color: #EFF6F6;
	padding: 16px 32px;
}
.section.main .site-inputs input,
.section.main .site-inputs select,
.section.main .site-inputs button,
.section.main .site-inputs textarea {
	padding: 8px;
	font-size: 1em;
	border-radius: 4px;
	border: 1px solid #999;
	font-family: 'Outfit', sans-serif;
}
.section.main .site-inputs input[type=color] {
	padding: initial;
}
.section.main .site-inputs input::placeholder,
.section.main .site-inputs textarea::placeholder {
	opacity: 0.5;
}
.section.main .site-inputs button {
	margin-top: 4px;
	margin-bottom: 4px;
}
.section.main .site-inputs input,
.section.main .site-inputs select {
	margin: 4px;
}

/* 1. CREATE FORM */
.section.main .container.create-form .content {
	padding: 32px;
}
#questions-editor {
	padding-bottom: 20px;
}
#questions-editor .item {
	display: flex;
	column-gap: 10px;
	margin-bottom: 20px;
}
#questions-editor .item .order {
	position: relative;
	top: 1.7em;
	opacity: 0.4;
}
#questions-editor .item .box {
	border-radius: 8px;
	background: white;
	flex: 1;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
#questions-editor .item .box .box-head,
#questions-editor .item .box .box-body {
	padding: 16px;
}
#questions-editor .item .box .box-head {
	border-bottom: 1px solid #DDD;
	display: flex;
	column-gap: 12px;
}
#questions-editor .item .box .box-head .label {
	flex: 1;
}
#questions-editor .item .box input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}
#questions-editor .item .box .box-body .label {
	opacity: 0.8;
	font-size: 0.9em;
	padding-left: 0.2em;
}
#questions-editor .item .actions {
	display: grid;
}
#questions-editor .item .actions button {
	background-color: transparent;
	border: none;
}
#questions-editor .item .actions button:not(:disabled):hover {
	color: #0081A4;
}
#questions-editor .add-button-wrapper {
	margin-left: 38px;
	margin-right: 40px;
}

/* 2. CREATE GOOGLE FORM */
.section.main .container.create-google-form hr {
	margin-top: 16px;
}
.section.main .container.create-google-form .additional-info {
	display: flex;
	column-gap: 20px;
	font-size: 0.9em;
}
.section.main .container.create-google-form table {
	width: initial;
	background-color: white;
	font-size: 0.9em;
	margin: 16px 0;
}

/* 3. ADD DATA LINKS */
.section.main .container.add-links .content {
	padding-bottom: 40px;
}
.section.main .container.add-links .data-link-extractor,
.section.main .container.add-links .data-links-table {
	background: white;
	padding: 16px;
	border-radius: 8px;
	margin-top: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.section.main .container.add-links .data-link-extractor p {
	margin: 4px 0;
}
.section.main .container.add-links .data-link-extractor .columns {
	display: flex;
	column-gap: 20px;
}
.section.main .container.add-links .data-link-extractor .columns > div {
	flex: 1;
}
.section.main .container.add-links .data-link-extractor #gform-analysis-output {
	border: 1px solid #DDD;
	padding: 8px;
	background: #EEE;
	word-break: break-word;
	border-radius: 2px;
	color: #666;
}
.section.main .container.add-links .data-link-extractor #gform-analysis-output table td:nth-child(3),
.section.main .container.add-links .data-link-extractor #gform-analysis-output table th:nth-child(3) {
  opacity: 0.5;
}
.section.main .container.add-links .data-link-extractor #gform-analysis-output table td:nth-child(3) {
	font-size: 0.8em;
}
button#button-auto-form-action {
	width: initial;
}

.section.main .container.add-links .data-links-table input {
	width: 100%;
	box-sizing: border-box;
}
.section.main .container.add-links .data-links-table table button {
	margin-left: 8px;
	width: initial;
}

.input-and-button {
		display: flex;
}
.input-and-button input[type="text"] {
	flex: 1;
	width: initial;
}
.input-and-button button {
	margin-left: 8px;
	width: initial;
}

/* 4. PREVIEW, STYLE, & EXPORT */
.container.preview-style-export .form-preview-wrapper,
.container.preview-style-export .style-options,
.container.preview-style-export .redirect-url,
.container.preview-style-export .export {
	background: white;
	padding: 16px;
	border-radius: 8px;
	margin-top: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	overflow: auto;
	margin: 16px 0;
	margin-bottom: 24px;
}
#form-warnings {
	color: red;
}
.form-preview-wrapper {
	font-family: initial;
}
.container.preview-style-export .style-options {
	padding: 0;
}
.container.preview-style-export .style-options .content {
	background-color: white;
	padding: 16px;
}
.container.preview-style-export .style-options p {
	padding-top: 16px;
}
.container.preview-style-export .style-options input[type="radio"]:not(:last-child) {
	padding-right: 16px;
}
.container.preview-style-export pre {
	border: 1px solid;
	border-radius: 4px;
	padding: 4px;
	background: #EEE;
	overflow: auto;
}
.container.preview-style-export .site-inputs input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}