.loading-form .form-link {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 1.5s ease;
}

    .loading-form .form-link.error {
        opacity: 1;
    }

.toolbar-clipboard {
    height: 12px !important;
}

.loading-form {
    text-align: center;
}

    .loading-form svg {
        width: 32px;
        height: 32px;
    }

        .loading-form svg #circle {
            stroke: var(--lt-blue);
            stroke-dasharray: 314;
            stroke-dashoffset: 1000;
            stroke-width: 6;
            transform-origin: 50px 50px 0;
            transition: all 1s;
            animation: spin 3s linear infinite;
        }

@keyframes spin {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: 66;
    }

    50% {
        transform: rotate(540deg);
        stroke-dashoffset: 314;
    }

    100% {
        transform: rotate(1080deg);
        stroke-dashoffset: 66;
    }
}

.form-widget .form-complete {
    max-width: 700px;
    margin: auto;
}

    .form-widget .form-complete svg {
        fill: var(--green);
        height: auto;
        width: 3rem;
        flex-shrink: 0;
    }

    .form-widget .form-complete .heading {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
    }

        .form-widget .form-complete .heading * {
            margin: 0;
        }

.crm-form {
    --cell-width: 304px;
    --row-gutter: 20px;
    --cpc-content-inline-padding: 2rem;
    min-height: 300px;
    width: 100%;
    margin: auto;
}

    .crm-form .content {
        margin-bottom: 3rem;
    }

    .crm-form:has(.responsiveCell:nth-child(1):not(.emptyCell)) {
        max-width: calc(var(--cell-width) + var(--row-gutter) + var(--cpc-content-inline-padding));
    }

    .crm-form:has(.responsiveCell:nth-child(2):not(.emptyCell)) {
        max-width: calc((var(--cell-width) * 2) + var(--row-gutter) + var(--cpc-content-inline-padding));
    }

    .crm-form:has(.responsiveCell:nth-child(3):not(.emptyCell)) {
        max-width: calc((var(--cell-width) * 3) + var(--row-gutter) * 2 + var(--cpc-content-inline-padding));
    }

    .crm-form * {
        font-family: inherit !important;
    }

    .crm-form .mainDiv {
        float: unset !important;
        height: auto !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }

    .crm-form #clickdimensionsForm {
        height: auto !important;
        width: 100%;
        max-width: unset;
    }

    .crm-form .responsiveRow {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--row-gutter);
    }

    .crm-form .emptyCell {
        display: none;
    }
    /* Set width of single form field */
    .crm-form .responsiveCell {
        min-width: unset !important;
        width: unset !important;
        flex-basis: var(--cell-width);
        flex-grow: 1;
        padding: 0;
        margin-block: 9px;
    }

    .crm-form .responsiveCellSize1:first-child:nth-last-child(1) {
        min-width: unset;
        width: 100%;
    }
    /* Remove "display: table-cell;" styling */
    .crm-form .responsiveCell div.alignTop,
    .crm-form .responsiveCell div.alignBottom {
        display: block
    }
    /* Conform to width of parent */
    .crm-form *:is(.minSize1, .maxSize1, .minSize3, .maxSize3) {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        height: auto !important;
        display: block !important;
    }
    /* Style field labels */
    .crm-form .responsiveCell span {
        font-family: 'Trade Gothic' !important;
        font-size: 1rem !important;
        margin-bottom: 4px;
    }

.dark-theme-text .form-widget[data-inherit-theme="True"] .crm-form .responsiveCell span:not(.requiredStar) {
    color: white !important;
}

.cpc-content .crm-form .clickdform :is(input[type='text'], textarea, select) {
    border: 2px solid var(--lt-grey) !important;
    background-color: #f9f9f9;
    padding: 6px !important;
    font-size: 1rem !important;
    font-family: 'Trade Gothic' !important;
}

.bg-lt-grey .form-widget[data-inherit-theme="True"] .crm-form .clickdform :is(input[type='text'], textarea, select) {
    background-color: white;
    border-color: #f9f9f9;
}

.crm-form .responsiveRow:has(#btnSubmit) {
    margin-top: 24px;
    display: flex;
    justify-content: end;
}

.crm-form .responsiveRow .responsiveCell:has(#btnSubmit) {
    margin-bottom: 0;
}

.crm-form .responsiveCell:has(#gcaptcha) {
    flex-grow: 0;
}

.crm-form #gcaptcha {
    transform: unset !important;
}

    .crm-form #gcaptcha > div {
        width: 100%;
    }

.crm-form .buttonContainer {
    margin-right: unset !important;
}

.crm-form #btnSubmit {
    --padding-block: 11px;
    --padding-inline: 26px;
    --icon-size: 1.5rem;
    --gap: 5px;
    margin: 0;
    padding: var(--padding-block) var(--padding-inline);
    padding-right: calc(var(--padding-inline) + var(--icon-size) + var(--gap));
    border: none;
    border-radius: 0px;
    background-color: var(--lt-blue);
    background-image: url(/portals/0/library/Icons/primary-cta/primary-cta-white.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--padding-inline) + var(--gap));
    background-size: var(--icon-size);
    color: white !important;
    font-weight: bold;
    font-size: 1.3rem !important;
    font-family: inherit !important;
    text-transform: uppercase;
    cursor: pointer;
}

    .crm-form #btnSubmit:hover,
    .crm-form #btnSubmit:focus {
        background-color: var(--orange);
    }

.dark-theme-text .form-widget[data-inherit-theme="True"] .crm-form .responsiveRow:has(.dropError) ~ .responsiveRow #btnSubmit {
    filter: brightness(0.5) contrast(2);
}

/* QapTcha Styling */
.crm-form .responsiveRow:has(.QapTcha) {
    justify-content: end;
}

.crm-form .responsiveCellSize1:has(.QapTcha) {
    flex-grow: 0;
    margin-bottom: 0;
}

.crm-form .QapTcha {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: var(--cell-width);
    gap: 1rem 6px;
    align-items: center;
    justify-content: end;
}

    .crm-form .QapTcha #bgSlider {
        float: unset;
        width: 100%;
        background-color: #F9F9F9;
        border: 2px solid #e5e5e5;
        background-image: unset !important;
        border-radius: 120px;
        height: 12px;
        position: relative;
    }

    .crm-form .QapTcha #TxtStatus {
        font-size: 1rem;
        margin: 2px 0 0;
    }

    .crm-form .QapTcha #Icons {
        float: unset;
        margin: 0;
    }

    .crm-form .QapTcha #Slider {
        position: absolute !important;
        display: flex;
        justify-content: space-between;
        background-image: url(/portals/0/library/icons/chevron-right/chevron-right.svg);
        background-color: var(--dk-blue);
        border-radius: 20px;
        padding: 0 2px;
        height: 32px;
        width: auto;
        aspect-ratio: 1/1;
        transform: translateY(-50%);
        top: 50% !important;
    }

        .crm-form .QapTcha #Slider:hover,
        .crm-form .QapTcha #Slider:focus {
            background-color: var(--orange);
        }

        .crm-form .QapTcha #Slider::after {
            content: "";
            background-image: url(/portals/0/library/icons/chevron-right/chevron-right.svg);
            background-repeat: no-repeat;
            background-size: 27%;
            background-position: 47%;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
        }

    .crm-form .QapTcha:has(.dropSuccess) #Slider {
        background-color: var(--green);
    }

.dark-theme-text .form-widget[data-inherit-theme="True"] .crm-form .QapTcha .dropError {
    color: #ff7474;
}

.crm-form .QapTcha .dropSuccess {
    color: var(--green);
}

.crm-form.responsiveRow:has(.dropError) ~ .responsiveRow #btnSubmit {
    background-color: #C6C7C7;
    cursor: unset;
}

.form-widget .privacy-message * {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 5rem;
}

/* styling for input[type="checkbox"] */
.crm-form .responsiveRow:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
}

.crm-form .responsiveCell:has(input[type="checkbox"]) {
    width: 100%;
    min-width: unset;
    margin: 0;
}

    .crm-form .responsiveCell:has(input[type="checkbox"]) div {
        display: flex;
        align-items: start;
        gap: 10px;
        width: unset;
        min-width: unset;
    }

.crm-form input[type="checkbox"] {
    margin: 0;
    margin-top: 4px;
    float: unset;
}

    .crm-form input[type="checkbox"] ~ span {
        line-height: 1.5
    }

.crm-form .responsiveCell:has(input[type="checkbox"]) div[style*="alignTop"], .clear {
    display: none !important;
}

.crm-form .responsiveRow:has(input[type="checkbox"]) + .responsiveRow:not(:has(input[type="checkbox"])) {
    margin-top: 24px;
}

/* Styling for field group labels (rows with no input fields) */
.crm-form .responsiveRow:not(:has(input, textarea, select)) .responsiveCell {
    margin-bottom: 0;
}

.crm-form .responsiveRow:not(:has(input, textarea, select)) + .responsiveRow {
    margin-top: 4px;
}
