/*
Gibbon: the flexible, open school platform
Founded by Ross Parker at ICHK Secondary. Built by Ross Parker, Sandra Kuipers and the Gibbon community (https://gibbonedu.org/about/)
Copyright © 2010, Gibbon Foundation
Gibbon™, Gibbon Education Ltd. (Hong Kong)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

----

Theme fundamentals based on Mollio, copyright Daemon Pty Limited 2006, http://www.daemon.com.au
Used under "GNU Creative Commons License", http://creativecommons.org/licenses/GPL/2.0/
*/


/* LINKS */



/* TYPOGRAPHY */
p {
    margin: 0px 0px 15px 0px;
    font-size: 14px;
}
ul,
ol {
    margin: 0 0 1px;
    font-size: 14px;
}
h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
    margin: 20px 0 10px 0;
    color: #444;
    background-color: none;
    padding: 0 0 0 0px;
    text-align: left;
    text-transform: uppercase;
    padding-bottom: 5px;
}
h1:not([class]) {
    font-size: 17pt;
}

h2:not([class]) {
    font-size: 14pt;
}


h3:not([class]) {
    font-size: 13pt;
}
h4:not([class]) {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 11pt;
}
h5:not([class]),
h6:not([class]) {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 11pt;
}

div.blockView h1,
div.blockView h2,
div.blockView h3,
div.blockView h4,
div.blockView h5,
div.blockView h6 {
    border-bottom: 1px solid #ddd;
    text-shadow: none;
}

.highlight {
    color: #e17000;
}
.subdued {
    color: #999;
}
.caption {
    color: #999;
    font-size: 11px;
}
.date {
    font-weight: bold;
    font-size: 82%;
    color: #bbb;
    display: block;
    letter-spacing: 1px;
}
small {
    font-size: 11px;
}

/* LISTS */
ul {
    margin: 5px 0px 5px 45px;
    list-style-type: circle;
}
ol {
    margin: 5px 0px 5px 45px;
}
ol li {
    margin-left: 5px;
    padding-left: 0;
    background: none;
    list-style-type: decimal;
}
li {
    line-height: 130%;
    padding-left: 5px;
    background: none;
}

img.logo {
    margin: 15px 0 6px 0;
}

/* TABLES */
table {
    color: #666;
    font-size: 12px;
    text-shadow: none;
    background-color: #fefefe;
    margin: 0px;
    border: #ccc 1px solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-spacing: 0px;
}
table th {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #ccc;
    background-color: #f3f4f6;
    text-align: left;
}
table .heading td:not(:first-child) {
    border-left: 0px;
}

table tr {
    text-align: center;
}
table td:first-child {
    /* text-align: left; */
    border-left: 0;
}

table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #dfdfdf;
    /* border-left: 1px solid #dfdfdf; */
}

table tr:last-child > td {
    border-bottom: 0;
}

td.right {
    vertical-align: middle !important;
    text-align: right !important;
    font-size: 11px !important;
    padding: 3px !important ;
}
div.right {
    text-align: right !important;
}

table tr:first-child th:first-child {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}
table tr:first-child th:last-child {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}
table tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
table tr:last-child td:last-child {
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ALT TABLE STYLES */
table.noIntBorder {
    background-color: #edf7ff;
}
table.noIntBorder td {
    border: none !important ;
    padding: 5px !important ;
    background-color: #edf7ff;
}
table.noIntBorder td:last-child {
    text-align: left;
}
table.smallIntBorder {
    background-color: #fefefe;
    position: relative;
}
table.smallIntBorder td {
    border-left: none !important ;
    padding: 0.5rem !important ;
}

tr.break td {
    background-color: #eaebec;
}
tr.break h3,
tr.break h4 {
    margin: 0.5rem 0 0.5rem 0 !important;
    padding: 0;
}
tr h3,
tr h4 {
    border: none !important;
}
table.mini td {
    padding: 5px !important ;
}
table.mini tr.head th {
    padding: 5px !important ;
}

table.blank,
table.blank > tbody > tr {
    border: none !important ;
    padding: 0px !important ;
    background: none !important ;
    box-shadow: none !important;
}
table.blank > tbody > tr > td {
    border: none !important ;
    padding: 0px !important ;
    background: none !important ;
}

/* FORMS */

input[type="checkbox"][disabled] {
    opacity: 0.35;
}

button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
    background-color: inherit;
}

button[disabled],
input[disabled],
textarea[disabled] {
    cursor: initial;
    --tw-border-opacity: 0.5;
    --tw-ring-opacity: 0.5;
    --tw-text-opacity: 0.5;
}

/* PAGINATION */

.linkTop {
    text-align: right;
    font-size: 12px;
    margin: 1.0rem 0px 0.5rem 0px;
}

/* IMAGES */
img.user {
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 4px;
    box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.35);
}

a img.resource,
img.resource {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 4px !important;
}

/* jQueryUI Tweaks */
.ui-tabs-nav,
.ui-tabs {
    background: none !important ;
}
.ui-widget-content {
    border: none !important;
}
.ui-tabs-panel {
    border: 1px solid rgb(155, 155, 155) !important;
    background: rgba(255, 255, 255, 0.75) !important;
}
.ui-tabs {
    padding: 0px !important;
}
.ui-tabs-active {
    border: 1px solid rgb(155, 155, 155) !important;
    border-bottom: none !important ;
    background: rgba(255, 255, 255, 1) !important;
}
ul.ui-tabs-nav li.ui-state-default {
    background: rgba(0, 0, 0, 0.04);
}
ul.ui-tabs-nav li.ui-state-default a {
    color: rgba(0, 0, 0, 1);
    outline: none;
}

div.ui-widget-overlay {
    background-image: none;
    background-color: #000 !important ;
    opacity: 0.7;
}
div.ui-dialog {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 85%;
    border-radius: 2px;
}

div.ui-dialog div.ui-dialog-titlebar {
    border-radius: 2px;
    background-image: none;
    background-color: #a88edb !important ;
    border: none;
}

div.ui-dialog button.ui-button {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 85%;
    color: #333;
    border-radius: 2px;
}

div#ui-datepicker-div {
    z-index: 1000 !important;
    width: 220px;
}

/* From WP for tinymce display */
.editor-toolbar .active {
    background-color: #ffffff;
    color: #333;
    padding-bottom: 0.5rem;
    margin-bottom: -1px;
    z-index: 10;
}

a.edButtonPreview,
a.edButtonHTML {
    background-color: #f1f1f1;
    border-color: #dfdfdf #dfdfdf #ccc;
    color: #999;
}
a.edButtonHTML {
    margin-right: 15px;
}
/* a,
#adminmenu a,
a.edButtonPreview,
a.edButtonHTML,
#the-comment-list p.comment-author strong a,
#media-upload a.del-link,
#media-items a.delete,
.plugins a.delete,
.ui-tabs-nav a {
    color: #21759b;
    text-decoration: none;
    color: #c00;
} */

.ui-tooltip,
.arrow:after {
    background: hsl(0 3% 23%) !important;
    border: none !important;
    box-shadow: 1px 1px 2px rgba(25, 25, 25, 0.4) !important;
}
.ui-tooltip {
    padding: 10px 20px !important;
    color: white !important;
    font-size: 12px !important;
}
.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}

ul.ui-tabs-nav {
    font-size: 14px;
    border-radius: 0px !important ;
    background: none !important ;
    border: none !important ;
}

div#tabs {
    border-radius: 0px !important ;
}

.ui-autocomplete,
.ui-autocomplete:hover {
    font-size: 12px;
    border-radius: 0;
    background: rgba(25, 25, 25, 0.9);
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.9);
    color: #fff !important;
}

.ui-autocomplete .ui-menu-item,
.ui-autocomplete .ui-menu-item:hover {
    border: none !important;
    border-radius: 0 !important ;
}

.ui-autocomplete .ui-corner-all,
.ui-autocomplete .ui-corner-all:hover {
    color: #fff !important ;
    background: rgba(25, 25, 25, 0.9) !important;
    border: none !important;
    border-radius: 0 !important ;
}

.ui-autocomplete .ui-corner-all:hover {
    color: #6799cf !important ;
}

.ui-autocomplete .ui-state-focus {
    margin: 0 !important;
    border: none;
}
.ui-state-default_dud {
    border: 1px solid rgb(216, 220, 223);
}

div.ui-datepicker {
    padding: 10px 10px 5px 10px;
    background: none;
    background-color: rgba(25, 25, 25, 0.5) !important;
}
table.ui-datepicker-calendar {
    padding: 3px;
}
table.ui-datepicker-calendar,
table.ui-datepicker-calendar td {
    padding: 0px;
}
table.ui-datepicker-calendar tr:first-child th:first-child {
    padding: 0px;
}
table.ui-datepicker-calendar tr:last-child th:last-child {
    padding: 0px;
}
div.ui-datepicker-header {
    background: none;
    background-color: #96beea !important;
    border-radius: 0px;
    border: none;
}

td.hiddenReveal,
div.hiddenReveal,
tr.hiddenReveal td {
    background: none;
    background-color: #edf7ff !important;
}

/* Timetable styles */
#tt *:not(input),
#ttWrapper *:not(input) {
    box-sizing: content-box;
}

th.ttCalendarBar {
    vertical-align: top;
    width: 100%;
    text-align: right !important;
    background-image: none !important;
}
span.ttSchoolCalendar {
    color: #fff;
    font-weight: bold;
    margin: 0px -2px 0px 5px;
    background-color: rgba(18, 138, 0, 0.85);
    padding: 5px 7px;
    border: 1px solid #555;
}
div.ttSchoolCalendar {
    background-color: rgba(18, 138, 0, 0.85);
    color: #fff;
    font-weight: bold;
}
span.ttPersonalCalendar {
    color: #fff;
    font-weight: bold;
    margin: 0px -2px 0px 5px;
    background-color: rgba(103, 153, 207, 0.9);
    padding: 5px 7px;
    border: 1px solid #555;
}
div.ttPersonalCalendar {
    background-color: rgba(103, 153, 207, 0.9);
    color: #fff;
    font-weight: bold;
}
span.ttSpaceBookingCalendar {
    color: #fff;
    font-weight: bold;
    margin: 0px -2px 0px 5px;
    background-color: rgba(240, 133, 31, 0.9);
    padding: 5px 7px;
    border: 1px solid #555;
}
div.ttSpaceBookingCalendar {
    background-color: rgba(240, 133, 31, 0.9);
    color: #fff;
    font-weight: bold;
}
div.ttClosure {
    border: 1px solid rgb(136, 136, 136);
    background-color: rgb(255, 196, 202);
    color: rgb(255, 0, 0);
    border: 1px solid rgb(136, 136, 136);
}
div.ttGeneric {
    background-color: rgb(238, 238, 238);
    color: rgb(0, 0, 0);
    border: 1px solid rgb(136, 136, 136);
}
div.ttCurrent {
    background-color: rgb(179, 239, 194);
    color: rgb(0, 0, 0);
    border: 1px solid rgb(136, 136, 136);
}
div.ttLesson {
    background-color: rgb(238, 238, 238);
    color: rgb(136, 136, 136);
    border: 1px solid rgb(136, 136, 136);
}
div.ttPeriod {
    color: rgb(0, 0, 0);
    border: 1px solid rgb(136, 136, 136);
    background-color: rgb(150, 190, 234);
}
div.ttPeriodCurrent {
    color: rgb(0, 0, 0);
    border: 1px solid rgb(136, 136, 136);
    background-color: rgb(179, 239, 194);
}

table.chatBox {
    margin-top: 0px;
    padding: 0px;
    margin-bottom: -1px;
    border: 1px solid #333;
    background-color: #f9f9f9;
    border-radius: 0px;
}

table.chatBoxFirst {
    margin-top: 25px;
}

table.chatBox tr td {
    color: #444;
    word-wrap: break-word;
    padding: 1px 4px;
}

.ttToday {
    background: #fefedd;
}

/* TAG CLOUD STYLE */
.tag_cloud {
    padding: 3px;
    text-decoration: none;
}
.tag_cloud:link {
    color: #6799cf;
    text-decoration: none;
}
.tag_cloud:visited {
    color: #1c528c;
    text-decoration: none;
}
.tag_cloud {
    background: none;
}
.tag_cloud:hover {
    background: #1c528c;
    color: #fff;
}

/* RESOURCE UPLOAD SLIDER */
div.resourceAddSlider {
    min-height: 60px;
    border: 1px solid #c0c0c0;
    text-align: center;
    width: 100%;
    margin-top: 5px;
    margin-bottom: -5px;
}

/* Usability tweak to make large data tables like User Permissions easier to read */
table.rowHighlight tr:not(.break):hover td,
table.columnHighlight .hover:not(:first-child) {
    background: #edf7ff !important;
}

/* v15 NEW CLASSES */
.input-box {
    float: right;
    display: table;
    border: 1px solid #b1afaf;
    background-color: #ffffff;
    box-sizing: border-box;
}

.input-box .inline-label {
    display: table-cell;
    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
    word-break: break-all;
}

.input-box .inline-button {
    display: table-cell;
    border-left: 1px solid #b1afaf;
    background: #fafafa;
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
    width: 48px;
    height: 48px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

.input-box ~ .input-box {
    border-top-width: 0px;
}

.input-box-meta {
    float: right;
    line-height: 22px;
}

.floatLeft {
    float: left !important;
}

.floatRight {
    float: right !important;
}

.floatNone {
    float: none !important;
}

.max-upload {
    font-style: italic;
    color: #c00;
    font-size: 11px;
}

.matchHighlight table {
    float: right;
}

.matchHighlight > td {
    border-top: 1px dashed #c00;
    border-bottom: 1px dashed #c00;
}

.matchHighlightText {
    color: #e00;
}

tr.head td {
    font-weight: bold;
    font-size: 110%;
}

.right {
    text-align: right !important;
}

.textCenter {
    text-align: center !important;
}

.ttDates {
    height: 80px;
    width: 8%;
    vertical-align: top;
    font-size: 10px;
}

td.standardWidth {
    position: relative;
}

/* Fixes an odd colspan-related width bug in Chrome */
td.w-full[colspan] {
    width: auto;
}

/* Utility classes - will be part of the larger css refactor soon */
.noMargin {
    margin: 0 !important;
}

.noPadding,
table.smallIntBorder td.noPadding {
    padding: 0 !important;
}

.noBorder {
    border: 0 !important;
}

/* CUSTOM BLOCKS v16 */
.customBlocks .sortHighlight {
    margin-bottom: 5px;
    min-height: 80px;
    line-height: 1.2em;
    width: 100%;
    border: 1px solid #fcd3a1;
    background: #fbf8ee;
    color: #444444;
}

.customBlocks.compact .sortHighlight {
    min-height: 56px !important;
}

.customBlocks .sortHandle {
    width: 2px;
    height: 64px;
    margin: 5px;
    border-color: #c7dae9;
    border-style: dotted;
    border-width: 0px 3px 0px 3px;
    cursor: move;
}

.customBlocks .compact .sortHandle {
    height: 44px !important;
}

.blockPlaceholder {
    color: #ddd;
    font-size: 230%;
    padding: 15px 0 15px 6px;
}

.blockTemplate {
    overflow: hidden;
    background: #edf7ff;
    border: 1px solid #d8dcdf;
    margin: 0 0 5px;
}

.blockTemplate.ui-sortable-helper {
    max-height: 74px !important;
}

.blockInputs input:not([type=submit]):not([type=checkbox]),
.blockInputs select,
.blockInputs textarea:not(.tinymce) {
    background: transparent;
}

.blockInputs input:not([readonly]):not([type=submit]):not([type=checkbox]) {
    border: 1px solid #d2e4f2;
}


.blockInputs .title {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
}

.blockInputs .LV_validation_message {
    background-color: #edf7ff;
}

.blockInputs .LV_invalid_field {
    border-color: #c53030 !important;
}

/* v16 NEW CLASSES */

/* Gibbon Data Table CSS - Will be moved to core.css */
.dataTable .sortable:not(.sorting):hover:after,
.dataTable .sortable.sorting::before,
.dataTable .sortASC:after,
.dataTable .sortDESC:after {
    content: "";
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 30%;
    right: 6px;
}

.dataTable .sortable:not(.sorting):hover:after,
.dataTable .sortable.sorting::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiKDEyMywgMTI5LCAxNDIpIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC41MyAzLjQ3YS43NS43NSAwIDAgMC0xLjA2IDBMNi4yMiA2LjcyYS43NS43NSAwIDAgMCAxLjA2IDEuMDZMMTAgNS4wNmwyLjcyIDIuNzJhLjc1Ljc1IDAgMSAwIDEuMDYtMS4wNmwtMy4yNS0zLjI1Wm0tNC4zMSA5LjgxIDMuMjUgMy4yNWEuNzUuNzUgMCAwIDAgMS4wNiAwbDMuMjUtMy4yNWEuNzUuNzUgMCAxIDAtMS4wNi0xLjA2TDEwIDE0Ljk0bC0yLjcyLTIuNzJhLjc1Ljc1IDAgMCAwLTEuMDYgMS4wNloiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==');
    opacity: 0.4;
}

.dataTable .sortASC:after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiKDEyMywgMTI5LCAxNDIpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNTMgMy40N2EuNzUuNzUgMCAwIDAtMS4wNiAwTDYuMjIgNi43MmEuNzUuNzUgMCAwIDAgMS4wNiAxLjA2TDEwIDUuMDZsMi43MiAyLjcyYS43NS43NSAwIDEgMCAxLjA2LTEuMDZsLTMuMjUtMy4yNVoiICAvPgo8L3N2Zz4=');
}

.dataTable .sortDESC:after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiKDEyMywgMTI5LCAxNDIpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi4yLDEzLjNsMy4yLDMuMmMuMy4zLjguMywxLjEsMGwzLjItMy4yYy4zLS4zLjMtLjgsMC0xLjFzLS44LS4zLTEuMSwwYzAsMCwwLDAsMCwwbC0yLjcsMi43LTIuNy0yLjdjLS4zLS4zLS44LS4zLTEuMSwwLS4zLjMtLjMuNywwLDFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPg==');
}

.dataTable .expandable,
.dataTable .draggable {
    border-right: 0px !important;
    padding: 0px !important;
    overflow: visible;
}

.dataTable .expandable + td {
    padding-left: 4px !important;
    border-left: 0px !important;
}

.dataTable .draggable + td {
    border-left: 0px !important;
}

.dataTable .expander {
    cursor: pointer;
    position: relative;
}

.dataTable .expander:before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiKDEyMywgMTI5LCAxNDIpIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPgo=');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 95%;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0.5;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    transition: transform 0.2s;
    pointer-events: none;
}

.dataTable .expander:hover:before {
    opacity: 1;
}

.dataTable .expander.expanded:before {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.submitted {
    position: relative;
}
.submitted::before {
    content: " ";
    display: inline-flex;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS00Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy44MzYgMi40NzdhLjc1Ljc1IDAgMCAxIC43NS43NXYzLjE4MmEuNzUuNzUgMCAwIDEtLjc1Ljc1aC0zLjE4MmEuNzUuNzUgMCAwIDEgMC0xLjVoMS4zN2wtLjg0LS44NDFhNC41IDQuNSAwIDAgMC03LjA4LjkzMi43NS43NSAwIDAgMS0xLjMtLjc1IDYgNiAwIDAgMSA5LjQ0LTEuMjQybC44NDIuODRWMy4yMjdhLjc1Ljc1IDAgMCAxIC43NS0uNzVabS0uOTExIDcuNUEuNzUuNzUgMCAwIDEgMTMuMTk5IDExYTYgNiAwIDAgMS05LjQ0IDEuMjQxbC0uODQtLjg0djEuMzcxYS43NS43NSAwIDAgMS0xLjUgMFY5LjU5MWEuNzUuNzUgMCAwIDEgLjc1LS43NUg1LjM1YS43NS43NSAwIDAgMSAwIDEuNUgzLjk4bC44NDEuODQxYTQuNSA0LjUgMCAwIDAgNy4wOC0uOTMyLjc1Ljc1IDAgMCAxIDEuMDI1LS4yNzNaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPgo=') no-repeat 0 0;
    background-size: 1.4rem;
    background-position: center center;
    animation: spin 2s infinite linear;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0.60;
}

/* multi-part form: progress indicator classes */
.multiPartForm {
    list-style-type: none;
    margin: 20px 0 30px 0;
    padding: 0;
    overflow: hidden;
    counter-reset: step;
    display: flex;
}

/* step labels */
.multiPartForm .step {
    list-style-type: none;
    color: #444;
    text-transform: uppercase;
    font-size: 12px;
    width: 40px;
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    flex-grow: 1;
}

/* step counter */
.multiPartForm .step:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    line-height: 32px;
    display: block;
    font-size: 16px;
    color: #333;
    background-color: #f4f4f4;
    border-radius: 3px;
    margin: 1px auto 5px auto;
    z-index: 0;
}

/* progress connectors */
.multiPartForm .step:after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #f4f4f4;
    position: absolute;
    left: -50%;
    top: 14px;
    z-index: -1;
    margin: 0 15px;
}

/* connector not needed before the first step */
.multiPartForm .step:first-child:after {
    content: none; 
}
/* active step */
.multiPartForm .step.active:before,
.multiPartForm .step.active:after{
    background-color: #A88EDB;
    color: white;
}

.body-gradient-purple {
    background: linear-gradient(to left top, #402568 2%, #935ee1 65%, #a871ec) no-repeat fixed;
}

.body-gradient-indigo {
    background: radial-gradient(80% 1000px at 20% 500px, #818cf8 0%, #4f46e5 100%) no-repeat fixed ;
}

.body-gradient-blue {
    background: radial-gradient(80% 1000px at 20% 500px, #60a5fa 0%, #2563eb 100%) no-repeat fixed ;
}

.body-gradient-sky {
    background: radial-gradient(80% 1000px at 20% 500px, #7dc7ea 0%, #0ea5e9 100%) no-repeat fixed ;
}

.body-gradient-teal {
    background: radial-gradient(80% 1000px at 20% 500px, #2dd4bf 0%, #0d9488 100%) no-repeat fixed ;
}

.body-gradient-green {
    background: radial-gradient(80% 1000px at 20% 500px, #68D391 0%, #38A169 100%) no-repeat fixed ;
}

.body-gradient-yellow {
    background: radial-gradient(80% 1000px at 20% 500px, #facc15 0%, #f59e0b 100%) no-repeat fixed ;
}

.body-gradient-orange {
    background: radial-gradient(80% 1000px at 20% 500px, #fb923c 0%, #ea580c 100%) no-repeat fixed ;
}

.body-gradient-red {
    background: radial-gradient(80% 1000px at 20% 500px, #e16363 0%, #b91c1c 100%) no-repeat fixed ;
}

.body-gradient-pink {
    background: radial-gradient(80% 1000px at 20% 500px, #F687B3 0%, #D53F8C 100%) no-repeat fixed ;
}

.body-gradient-fuchsia {
    background: radial-gradient(80% 1000px at 20% 500px, #df8aee 0%, #a143aa 100%) no-repeat fixed ;
}

.standardForm:not(.blank) .formRow:not(:last-child)  {
    border-bottom-width: 1px;
}