.field-container {
   display: flex;
   margin: 2px 0 20px 0;
   position: relative;
}

.field-container.wrap {
   flex-wrap: wrap;
}

.field-container.nomargin {
   margin: 2px 0 5px 0;
}

.field-container.vertical {
   flex-direction: column;
}

input[type="radio"],
input[type="checkbox"] {
   display: none;
}

.field-icon,
.field-container input[type="text"],
.field-container input[type="email"],
.field-container input[type="password"],
.field-container input[type="date"],
.field-container textarea,
.field-container select,
.false-input {
   font-family: "Outfit";
   color: #444;
   font-size: 1.1rem;
   border: 0 solid #ddd;
   background: #f3f3f3;
   padding: 4px 7px;
   outline: none;
}

.field-icon:before {
   height: 100%;
   display: flex;
   align-items: center;
}

.field-container select.last {
   padding-right: 15px;
   border-radius: 0 15px 15px 0;
}

.field-container select,
.field-container input[type="date"] {
   width: 100%;
   margin-right: 20px;
   border-radius: 0 20px 20px 0;
}

.field-container input[type="text"],
.field-container input[type="email"],
.field-container input[type="password"],
.false-input {
   border-radius: 0 30px 30px 0;
   flex-grow: 1;
}

.inline.field-container input[type="text"],
.inline.field-container input[type="email"],
.inline.field-container input[type="password"],
.inline.field-container input[type="date"] {
   border-radius: 30px 0 0 30px;
   padding-left: 15px;
}

.inline.field-container button {
   margin: 0;
   border-radius: 0 30px 30px 0;
   padding: 2px 0 2px 6px;
}

.field-container input.no-border-radius {
   border-radius: 0 !important;
}

.field-container input:focus,
textarea:focus {
   outline: none;
}

.field-container input[type="text"]::placeholder,
.field-container input[type="email"]::placeholder,
.field-container input[type="password"]::placeholder,
.field-container textarea::placeholder,
.field-container input[type="text"]::-webkit-input-placeholder,
.field-container input[type="email"]::-webkit-input-placeholder,
.field-container input[type="password"]::-webkit-input-placeholder,
.field-container textarea::-webkit-input-placeholder {
   color: #bbb;
}

.field-container.blue input[type="text"]::placeholder,
.field-container.blue input[type="email"]::placeholder,
.field-container.blue input[type="password"]::placeholder,
.field-container.blue textarea::placeholder,
.field-container.blue input[type="text"]::-webkit-input-placeholder,
.field-container.blue input[type="email"]::-webkit-input-placeholder,
.field-container.blue input[type="password"]::-webkit-input-placeholder,
.field-container.blue textarea::-webkit-input-placeholder {
   color: #8c96ae;
}

.field-container textarea {
   flex-grow: 1;
   border-radius: 6px;
   font-family: "Outfit";
   font-size: 1rem;
   border-radius: 0px 8px 8px 0;
   min-height: 90px;
}

.field-container input[type="radio"],
.field-container input[type="checkbox"] {
   display: none;
}

.field-container input[type="radio"] + label,
.field-container input[type="checkbox"] + label {
   background: #f3f3f3;
   padding: 6px 12px 6px 12px;
   border-radius: 30px;
   cursor: pointer;
   margin: 2px 4px;
}

.field-container input[type="radio"] + label:hover,
.field-container input[type="checkbox"] + label:hover {
   color: var(--s-green);
}

.field-container input[type="radio"]:checked + label,
.field-container input[type="checkbox"]:checked + label {
   background: var(--s-green);
   color: #fff;
}

.field-container input[type="radio"]:checked + label:before {
   color: #fff;
}

.standard-checkbox,
.field-container input[type="checkbox"]:checked + label.standard-checkbox,
.standard-checkbox:hover {
   background: none !important;
   border: 1px solid var(--s-primary);
   color: var(--s-primary) !important;
   padding: 4px 10px !important;
   font-size: 0.9rem;
}

.standard-checkbox:before {
   content: "\f096";
   font-family: "icons";
   margin-right: 6px;
}

.radio-bar {
   display: flex;
   flex-wrap: wrap;
}

.radio-bar label {
   margin: 0 !important;
   border-radius: 0 !important;
   background: #fff !important;
   border: 1px solid var(--s-primary) !important;
   border-width: 1px 0;
}

.radio-bar label.first {
   border-radius: 25px 0 0 25px !important;
   border-width: 1px 0 1px 1px;
}

.radio-bar label.last {
   border-radius: 0 25px 25px 0 !important;
   border-width: 1px 1px 1px 0px;
}

.radio-bar input[type="radio"]:checked + label {
   background-color: var(--s-primary) !important;
}

.field-container input[type="checkbox"]:checked + label.standard-checkbox:before {
   content: "\e84c";
}

.field-container button {
   margin-left: 20px;
}

label.field-container-checkbox {
   min-width: 200px;
   display: flex;
   justify-content: flex-start;
}

.field-container-checkbox:before {
   font-family: "icons";
   content: "\f096";
   margin-right: 8px;
   font-size: 1.3rem;
   margin-right: 8px;
   font-weight: 400;
}

input[type="checkbox"]:checked + .field-container-checkbox:before {
   content: "\e84c";
}

.field-container.white input,
.field-container.white .field-icon {
   background: #fff;
}

.field-container.blue input,
.field-container.blue .field-icon {
   background: #e8f0fe;
}

label .active-label {
   display: none;
}

.field-container-label {
   display: block;
   text-align: left;
   font-family: "CeraRound";
   color: var(--s-primary);
   padding: 4px 6px;
}

input[type="checkbox"]:checked + label .active-label {
   display: block;
}

input[type="checkbox"]:checked + label .inactive-label {
   display: none;
}

.field-icon {
   border-radius: 24px 0 0 24px;
   font-size: 1.2rem;
   color: var(--s-secondary);
   text-align: center;
   width: 18px;
}

.field-icon.small-corners {
   border-radius: 8px 0 0 8px;
}

.field-icon.add-new {
   color: #8e7de775;
}

.field-container .validation-fail-notice {
   display: none;
   background: var(--s-red);
   padding: 2px 8px;
   border-radius: 4px;
   color: #fff;
   position: absolute;
   bottom: calc(100% + 9px);
   left: 5px;
   font-size: 1rem;
}

.field-container .validation-fail-notice:after {
   content: " ";
   position: absolute;
   top: 100%; /* At the bottom of the tooltip */
   left: 10%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: var(--s-red) transparent transparent transparent;
}

.field-container.error .validation-fail-notice {
   display: block;
}

.field-container.error .field-icon {
   border: 1px solid var(--s-red);
   border-width: 1px 0 1px 1px;
}

.field-container.error input,
.field-container.error textarea,
.field-container.error select {
   border: 1px solid var(--s-red);
   border-width: 1px 1px 1px 0px;
}

.field-container select:nth-child(3) {
   border-radius: 30px;
   padding-left: 20px;
}

.field-container:hover .field-icon.add-new {
   color: var(--s-purple);
}

.field-icon:before {
   margin: 0px !important;
}

.field-info {
   color: #888;
}

.field-container .delete {
   position: absolute;
   right: 5px;
   top: 3px;
   font-size: 1.2rem;
   color: #888;
   cursor: pointer;
}

.field-container .delete:hover {
   color: var(--s-red);
}

/* Pathway form styles */

.form-text {
   font-weight: 700;
   color: var(--s-primary);
   font-size: 1.3rem;
   font-family: "CeraRound";
   margin-bottom: 12px;
}

.form-text-input {
   border-radius: 4px;
   padding: 8px 12px;
   width: calc(100% - 20px);
   margin: 20px auto;
   border: 1px solid #d0dbec;
   font-family: "Outfit";
   font-size: 1.1rem;
   color: var(--s-primary);
   box-shadow: 2px 1px 5px #b3d0fc;
   text-align: left;
   transition: all 0.3s;
}

.form-text-input.postcode {
   text-transform: uppercase;
}

.form-text-input::placeholder,
.autosuggest-component-input::placeholder {
   font-family: "Outfit";
   text-align: left;
   color: #bbb;
   font-size: 1.1rem;
}

.error .form-text-input {
   border-bottom: 3px solid var(--error);
}

.form-text-input:focus,
.autosuggest-component-input:focus {
   border-bottom-width: 3px;
   border-bottom-color: var(--s-primary);
   border-radius: 4px 4px 0px 0px;
   outline: none;
}

.invalid .form-text-input,
.invalid .form-text-input:focus {
   border-bottom-color: var(--error);
}

.submit-buttons {
   align-items: center;
   display: flex;
   padding: 10px 30px;
}

.list-edit {
   display: none;
}

label.form-question-text {
   display: block;
   text-align: left;
   font-family: "CeraRound";
   font-size: 1.2rem;
   color: var(--s-primary);
}

label.field-container-label {
   display: block;
   text-align: left;
   font-family: "CeraRound";
   font-size: 1rem;
   color: var(--s-secondary);
}

.create-list-edit {
   text-align: left;
}

.placeholder-list {
   position: relative;
}

.loading-overlay-container {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: rgb(240 247 252 / 80%);
   display: flex;
}

.loading-overlay,
.loading-overlay:after {
   border-radius: 50%;
   width: 8em;
   height: 8em;
}
.loading-overlay {
   margin: auto;
   font-size: 10px;
   position: relative;
   z-index: 10;
   text-indent: -9999em;
   border: 0.8em solid rgb(207 220 244);
   border-left: 0.8em solid #9d8fe4;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-animation: scxx-spin 2s infinite linear;
   animation: scxx-spin 2s infinite linear;
}

.toggle-container {
   position: relative;
   transition: transform 0.3s;
   transform: scale(var(--scale, 1)) translateZ(0);
   margin: 5px 10px;
}

.toggle-container.padded {
   margin: 20px 10px;
}

.toggle-container:active {
   --scale: 0.98;
}
.toggle-container input {
   display: none;
}
.toggle-container input + label {
   background: #fff;
   border-radius: 9px;
   padding: 8px 0 8px 20px;
   display: flex;
   align-items: center;
   cursor: pointer;
   position: relative;
   box-shadow: -12px -12px 24px var(--light-shadow, transparent), 3px 3px 12px var(--shadow, transparent);
   transition: box-shadow 0.4s;
   font-family: "Poppins";
   font-weight: "bold";
}
.toggle-container input + label:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: inherit;
   background: #fff;
   opacity: var(--gradient, 0);
   transition: opacity 0.4s;
}
.toggle-container input + label .switch {
   position: relative;
   display: inline-block;
   z-index: 1;
   vertical-align: top;
   height: 22px;
   width: 40px;
   border-radius: 11px;
   background: #eceffc;
}
.toggle-container input + label .switch:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--s-green), #9ee49e);
   opacity: var(--gradient, 0);
   transition: opacity 0.4s;
}
.toggle-container input + label .switch .dot {
   background: #d1d6ee;
   position: absolute;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   left: -1px;
   top: -1px;
   transform: translateX(var(--offset, 0));
   transition: transform 0.4s, box-shadow 0.4s;
   box-shadow: -4px -4px 8px var(--light-shadow-2, transparent), 4px 4px 8px var(--shadow, transparent);
}
.toggle-container input + label .switch .dot:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: inherit;
   background: linear-gradient(160deg, #f1f4ff, #f9faff);
   opacity: var(--gradient, 0);
   transition: opacity 0.4s;
}
.toggle-content {
   line-height: 22px;
   font-size: 18px;
   color: var(--text, #bbb);
   font-weight: 500;
   display: inline-block;
   vertical-align: top;
   z-index: 1;
   position: relative;
   margin-left: 12px;
   flex-grow: 1;
   position: relative;
   padding: 0 20px 0 12px;
   transition: color 0.4s;
}

.toggle-container input:checked + label {
   --offset: 18px;
   --text: var(--s-green);
   --gradient: 1;
   --shadow: rgba(0, 6, 39, 0.1);
   --light-shadow: rgba(255, 255, 255, 0.8);
   --light-shadow-2: rgba(255, 255, 255, 0.1);
}

.toggle-container-description {
   color: #444;
   font-size: 1rem;
}

.toggle-container-enabled {
   color: #ddd;
   font-size: 1rem;
   line-height: 1rem;
   text-align: center;
}

.toggle-container-enabled:before {
   content: "disabled";
}

.toggle-container input:checked + label .toggle-container-enabled {
   color: var(--s-green);
   transition: color 0.4s;
}

.toggle-container input:checked + label .toggle-container-enabled:before {
   content: "enabled";
}

.toggle-container-label {
   text-align: center;
}

.tiles-container {
   background: var(--s-blue-light);
   padding: 30px;
   border-radius: 6px;
}

.tiles-container input {
   display: none;
}

.tiles-container label {
   width: 240px;
   padding: 12px 24px;
   justify-content: space-between;
   min-height: 50px;
   align-items: center;
   background: #fff;
   border-radius: 6px;
   margin: 4px;
   font-family: "CeraRound";
   color: var(--s-primary);
   border: 1px solid #ddd;
   position: relative;
   cursor: pointer;
}

.option-select-tick {
   color: #f2f2f2;
   border: 4px solid #f2f2f2;
   -webkit-border-radius: 50px;
   border-radius: 50px;
   font-size: 1.5rem;
   height: 36px;
   width: 36px;
   margin: 10px auto;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}

.option-select-tick:before {
   font-family: "icons";
   content: "\e80e";
}

.tiles-container input:checked + label,
.tiles-container input:selected + label {
   color: var(--s-green);
   border-color: var(--s-green);
}

.tiles-container input:checked + label:after {
   content: "\e80e";
   font-family: "icons";
   position: absolute;
   bottom: 0px;
   right: 0px;
   color: var(--s-green);
   border: 1px solid var(--s-green);
   border-radius: 11px 0 0 0;
   border-width: 1px 0 0 1px;
   padding: 1px;
}

.field-container input[type="radio"] + label.field-tile {
   border-radius: 6px;
}

.field-tile-icon {
   text-align: center;
   width: 100%;
   display: block;
   font-size: 1.4rem;
}

.field-tile {
   font-family: "CeraRound";
   color: var(--s-secondary);
}

.vertical-checklist {
   display: flex;
   flex-direction: column;
   background: #fafafa;
}

.vertical-checklist label {
   cursor: pointer;
   margin: 8px 10px;
}

.vertical-checklist label:before {
   content: "\f096";
   font-family: "icons";
   margin: 0 8px;
}

.vertical-checklist input:checked + label:before {
   content: "\e84c";
   font-family: "icons";
   margin: 0 8px;
   color: var(--s-green);
}

.vertical-checklist .deselect-all {
   margin: 10px 0;
   color: #7e7e7e;
}