@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

body {
    font-family: Poppins;
    height: 100vh;
    padding: 0;
    margin: 0;
}

#content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#logo {
    width: 80%;
    max-width: 900px;
}

#fixedSection {
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 1em 0;
}

#scrollableSection {
    flex-grow: 1;
    overflow: auto;
}

input, button {
    font-family: Poppins;
}

.sd-radio label, .sd-checkbox label {
    cursor: pointer;
}

.sd-question, .sd-question__content, .sd-input {
    cursor: pointer;
}


.sd-navigation__complete-btn {
    background: #ffffff;
    color: black;
}

.sd-btn--action:hover {
    background: #ffaa04;
    color: black;
}

.sd-checkbox .sd-item__control-label {
    /*text-align: justify;*/
}

.custom_loader_dots {
    width: 83px;
    height: 83px;
    position: relative;
}

.custom_loader_dots {
    display: flex;
    gap: 8px;
}

    .custom_loader_dots::before,
    .custom_loader_dots::after {
        content: '';
        width: 27.666666666666668px;
        height: 27.666666666666668px;
        border-radius: 50%;
        background-color: #57bfc9;
        animation: custom_bounce 0.4615384615384615s infinite alternate ease-in-out;
    }

    .custom_loader_dots::before {
        animation-duration: 0.4615384615384615s;
    }

    .custom_loader_dots::after {
        animation-duration: 0.4615384615384615s;
        animation-delay: 0.23076923076923075s;
    }

@keyframes custom_bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(41.5px);
    }
}

.surveyElement span.description 
{
    font-size: 90%;
    color: #57bfc9;
}

.surveyElement .sd-panel__header .sd-title span
{
	font-size: 16pt;
}

.surveyElement .sd-checkbox__decorator, .surveyElement .sd-radio__decorator 
{
    border: solid 2px #2eacb4;
}

.surveyElement .sd-input.sd-text
{
    border: solid 2px #2eacb4;
}

.surveyElement .sd-comment__content 
{
	border: solid 2px #2eacb4;
	margin-bottom: 1em;
}

.surveyElement .sd-signaturepad
{
    border: solid 2px #2eacb4;
}

.surveyElement .sd-matrix__label .sd-radio__decorator {
    cursor: pointer;
}

.surveyElement .sd-panel__header {
	padding-top: 1em !important;
	padding-bottom: 0em !important;
}

.surveyElement .sd-element--nested-with-borders > .sd-element__header--location-top:after, .sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after 
{
	position:static;
}

.surveyElement .sd-element__content.sd-panel__content 
{
	padding-top: 1em;
}

.surveyElement .sd-question__header 
{
	padding-bottom: 0;
	padding-top: 0.5em;
}




.surveyElement {
	padding: 1em;
	background: white;
}

.surveyElement .sd-panel {
	border-radius: 0px;
}

.surveyElement .sd-row {
	margin-top: 4px !important;
}

	.surveyElement .sd-row:first-of-type {
		margin-top: 0 !important;
	}

.surveyElement .sd-body {
	padding: 4px;
}

.surveyElement .sd-footer {
	padding: 4px 0px 0px 0px !important;
}

.surveyElement .sd-completedpage:before {
	height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) !important;
}

.surveyElement .sd-title {
	padding-left: 0;
	padding-right: 0;
}

.surveyElement .sd-input.sd-input--readonly 
{
    background: #def0f8;
    cursor:default;
}

.surveyElement .sd-question--html .sd-html 
{
    cursor: default !important;
}

.surveyElement .sd-title.sd-element__title--readonly span.sv-string-viewer {
    cursor: default;
}
/* html "questions" */
.surveyElement .sd-html {
    padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
    padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
}

.surveyElement .sd-html > [data-type="centred"] {
    text-align: center;
}

/* Prevent checkboxes with focus obscurring the tick */
.surveyElement .sd-checkbox--checked .sd-checkbox__control:focus + .sd-item__decorator 
{
    background: var(--sjs-primary-backcolor, var(--primary, #19b394));
}

/* Prevent checkboxes with focus obscurring the tick */
.surveyElement .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
    fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff)) !important;
}