.main_content.dashboard_part {
    padding: 0 !important;
}

.reg {
    --reg-brand: #00849b;
    --reg-brand-dark: #056274;
    --reg-brand-soft: #e8f5f8;
    --reg-accent: #710f1c;
    --reg-ink: #1f2a44;
    --reg-muted: #6b7a90;
    --reg-line: #e0e7ef;
    --reg-danger: #d20001;
    --reg-ok: #2e8b57;
    --reg-radius: 14px;
    --reg-shadow: 0 2px 4px rgba(31, 42, 68, .04), 0 12px 28px rgba(31, 42, 68, .07);

    padding: 18px 18px 0;
    color: var(--reg-ink);
    background: linear-gradient(180deg, #f2f7f9 0, #eaf0f5 420px, #eaf0f5 100%);
    min-height: 100vh;
}

    /* the layout paints every span red and bold */
    .reg span {
        color: inherit;
        font-weight: inherit;
    }

    .reg a {
        color: var(--reg-brand) !important;
    }

    .reg h1, .reg h2, .reg h3, .reg h4, .reg h5 {
        margin: 0;
        color: inherit;
    }

    /* The shell styles its top navigation with bare ul / li / li a selectors:
       40px tall and clipped, floated left, centred, uppercase and white. Those
       also land on the list bootstrap-multiselect builds for the activities.
       Put them back to something a dropdown can live with. */
    .reg ul {
        height: auto;
        overflow: visible;
        list-style: none;
    }

    .reg li {
        float: none;
    }

        .reg li a {
            display: block;
            padding: 4px 8px;
            text-align: start;
            text-transform: none;
            font-size: 13px;
            font-weight: 400;
        }

/* -- banner --------------------------------------------------------------- */

.reg-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    margin: 0 auto 18px;
    max-width: 1100px;
    border-radius: var(--reg-radius);
    background: linear-gradient(120deg, var(--reg-brand-dark) 0%, var(--reg-brand) 58%, #16a3ba 100%);
    box-shadow: var(--reg-shadow);
    color: #fff;
}

    /* the crest, large and very faint, bleeding off the trailing edge */
    .reg-hero::after {
        content: "";
        position: absolute;
        inset-inline-end: -30px;
        top: -40px;
        width: 210px;
        height: 210px;
        background: url(../assets/img/Fujairah_Coat_of_Arms.png) no-repeat center / contain;
        opacity: .12;
        filter: grayscale(1) brightness(4);
        pointer-events: none;
    }

.reg-hero-logo {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

    .reg-hero-logo img {
        width: 34px;
        height: auto;
    }

.reg-hero-txt {
    flex: 1 1 auto;
    min-width: 0;
}

    .reg-hero-txt h1 {
        font-size: 21px;
        font-weight: 700;
        letter-spacing: .2px;
        color: #fff;
    }

    .reg-hero-txt p {
        margin: 2px 0 0;
        font-size: 13px;
        color: rgba(255, 255, 255, .82);
    }

/* completion meter, filled by registration.js as required fields are answered */
.reg-meter {
    flex: 0 0 auto;
    width: 210px;
    text-align: center;
}

.reg-meter-bar {
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.reg-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: #ffffff;
    transition: width .35s ease;
}

.reg-meter-txt {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
    /* "2 / 15" is a fraction, not a sentence; right to left would read it back
       to front because the slash takes the paragraph's direction */
    direction: ltr;
    unicode-bidi: isolate;
}

/* -- returned message ----------------------------------------------------- */

.reg-flash {
    max-width: 1100px;
    margin: 0 auto 14px;
    padding: 10px 16px;
    border-radius: 10px;
    border-inline-start: 4px solid var(--reg-ok);
    background: #eef8f1;
    color: #1d6b3f;
    font-size: 14px;
    font-weight: 600;
}

/* -- steps ---------------------------------------------------------------- */

.reg-steps {
    max-width: 1100px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--reg-line);
    border-radius: var(--reg-radius);
    box-shadow: var(--reg-shadow);
}

/* one marker per step, built by registration.js from the steps themselves */
.reg-mark {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 2px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
    color: var(--reg-muted);
    transition: color .2s ease;
}

    .reg-mark[disabled] {
        cursor: default;
        opacity: .65;
    }

    /* the rail between one marker and the next */
    .reg-mark::before {
        content: "";
        position: absolute;
        top: 15px;
        inset-inline-start: calc(-50% + 17px);
        width: calc(100% - 34px);
        height: 2px;
        background: var(--reg-line);
    }

    .reg-mark:first-child::before {
        display: none;
    }

.reg-mark-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--reg-muted) !important;
    background: #fff;
    border: 2px solid var(--reg-line);
    transition: all .22s ease;
}

.reg-mark-txt {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit !important;
}

/* the step being filled in */
.reg-mark.is-current {
    color: var(--reg-brand);
}

    .reg-mark.is-current .reg-mark-dot {
        color: #fff !important;
        background: var(--reg-brand);
        border-color: var(--reg-brand);
        box-shadow: 0 0 0 4px rgba(0, 132, 155, .15);
    }

/* a step whose required answers are all in */
.reg-mark.is-done {
    color: var(--reg-ok);
}

    .reg-mark.is-done .reg-mark-dot {
        color: #fff !important;
        background: var(--reg-ok);
        border-color: var(--reg-ok);
        font-size: 0;
    }

        .reg-mark.is-done .reg-mark-dot::after {
            content: "\2713";
            font-size: 15px;
            line-height: 1;
        }

.reg-mark.is-done::before,
.reg-mark.is-current::before {
    background: var(--reg-brand);
}

/* only the step in hand is on screen; the rest stay in the form, posting */
.reg-step {
    display: none;
}

    .reg-step.is-on {
        display: block;
        animation: reg-step-in .22s ease both;
    }

@keyframes reg-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -- columns -------------------------------------------------------------- */

.reg-cols {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 18px;
    align-items: start;
}

.reg-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* -- card ----------------------------------------------------------------- */

/* No overflow clipping here: the activity list drops out of the bottom of the
   licence card, and hiding the overflow cut it off. The header rounds its own
   top corners instead of relying on the card to crop them. */
.reg-card {
    background: #fff;
    border: 1px solid var(--reg-line);
    border-radius: var(--reg-radius);
    box-shadow: var(--reg-shadow);
}

.reg-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--reg-line);
    border-radius: var(--reg-radius) var(--reg-radius) 0 0;
    background: linear-gradient(180deg, #fbfdfe, #f4f8fa);
}

    .reg-card-head i {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        font-size: 14px;
        color: var(--reg-brand);
        background: var(--reg-brand-soft);
    }

    .reg-card-head h2 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--reg-accent);
    }

.reg-card-note {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--reg-muted);
}

.reg-card-body {
    padding: 16px 18px 18px;
}

/* -- fields --------------------------------------------------------------- */

.reg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 13px 14px;
}

    /* a field that should never share its row */
    .reg-grid .reg-wide {
        grid-column: 1 / -1;
    }

.reg-field {
    min-width: 0;
}

.reg-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--reg-muted);
    line-height: 1.35;
}

.reg-req {
    color: var(--reg-danger) !important;
    font-weight: 700 !important;
}

.reg-hint {
    color: var(--reg-muted) !important;
    font-weight: 400 !important;
    font-size: 11.5px;
}

.reg .form-control,
.reg .reg-input {
    width: 100%;
    height: auto;
    padding: 8px 11px;
    font-size: 14px;
    color: var(--reg-ink);
    background: #fff;
    border: 1px solid var(--reg-line);
    border-radius: 9px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .reg .form-control:focus,
    .reg .reg-input:focus {
        outline: 0;
        border-color: var(--reg-brand);
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .16);
    }

    .reg select.form-control {
        /* keep the native arrow, just stop Chrome shrinking the box */
        height: 38px;
        padding-block: 0;
    }

    .reg textarea.form-control {
        min-height: 72px;
        resize: vertical;
    }

    .reg .form-control::placeholder {
        color: #aab6c6;
    }

/* prefilled from UAE Pass, cannot be edited here */
.reg .form-control[readonly] {
    background: #f4f7fa;
    color: var(--reg-muted);
    cursor: not-allowed;
}

.reg-locked {
    display: inline-block;
    margin-inline-start: 5px;
    font-size: 11px;
    color: var(--reg-muted) !important;
    font-weight: 400 !important;
}

/* a field the save check rejected */
.reg .reg-invalid,
.reg .reg-invalid:focus {
    border-color: var(--reg-danger);
    background: #fff7f7;
    box-shadow: 0 0 0 3px rgba(210, 0, 1, .10);
}

.reg-err {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--reg-danger) !important;
    line-height: 1.35;
}

    .reg-err.is-on {
        display: block;
    }

/* The date pickers wrap their input in an input-group.

   assets/css/style.css:12784 gives every .input-group in the portal
   "z-index: 999999", which with bootstrap's "position: relative" makes each one
   a stacking context far above flatpickr's calendar at 99999. The calendar then
   opens *behind* the next date field down the form. Undone here for this page;
   the rule itself is left alone because it reaches every screen. */
.reg .input-group {
    position: relative;
    display: block;
    z-index: auto;
}

/* flatpickr hangs its calendar off <body>, so this one cannot be scoped to
   .reg. It only loads on the two registration pages. The extra "body" is there
   to out-specify flatpickr's own .flatpickr-calendar rule, which the shell
   loads after this file; the value clears every z-index in style.css. */
body .flatpickr-calendar {
    z-index: 100000000;
}

    .reg .input-group .form-control {
        padding-inline-end: 34px;
    }

.reg .date-icon {
    position: absolute;
    inset-inline-end: 1px;
    top: 1px;
    bottom: 1px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--reg-brand);
    cursor: pointer;
    background: transparent;
    border: 0;
}

/* flatpickr replaces the input with an altInput clone, keep it looking the same */
.reg input.form-control.flatpickr-input,
.reg .flatpickr-input ~ input.form-control {
    width: 100%;
}

/* -- attachments ---------------------------------------------------------- */

.reg-upload {
    padding: 13px;
    border: 1px dashed #b9d7de;
    border-radius: 11px;
    background: #f7fcfd;
}

.reg-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 10px;
    align-items: end;
}

.reg .reg-file input[type=file] {
    display: block;
    width: 100%;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--reg-muted);
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--reg-line);
    border-radius: 9px;
}

    /* the chooser's own button, so it does not look like 1998 next to the rest */
    .reg .reg-file input[type=file]::-webkit-file-upload-button {
        margin-inline-end: 10px;
        padding: 5px 12px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--reg-brand);
        background: var(--reg-brand-soft);
        border: 1px solid #cfe7ec;
        border-radius: 7px;
        cursor: pointer;
    }

    .reg .reg-file input[type=file]::file-selector-button {
        margin-inline-end: 10px;
        padding: 5px 12px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--reg-brand);
        background: var(--reg-brand-soft);
        border: 1px solid #cfe7ec;
        border-radius: 7px;
        cursor: pointer;
    }

    .reg .reg-file input[type=file]:focus {
        outline: 0;
        border-color: var(--reg-brand);
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .16);
    }

/* a document type that already has a file picked */
.reg-upload select option:disabled {
    color: #b3bfcd;
}

.reg-table-wrap {
    margin-top: 13px;
    border: 1px solid var(--reg-line);
    border-radius: 11px;
    overflow: auto;
}

.reg-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

    .reg-table th {
        padding: 9px 12px;
        text-align: start;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--reg-muted);
        background: #f6f9fb;
        border-bottom: 1px solid var(--reg-line);
        white-space: nowrap;
    }

    .reg-table td {
        padding: 9px 12px;
        border-top: 1px solid #f0f4f8;
        vertical-align: middle;
        color: var(--reg-ink);
    }

    .reg-table tbody tr:hover td {
        background: #fafcfd;
    }

.reg-table-empty {
    text-align: center;
    color: var(--reg-muted);
    font-size: 12.5px;
    padding: 16px 12px !important;
}

.reg-size {
    color: var(--reg-muted) !important;
    font-size: 11.5px;
    white-space: nowrap;
}

.reg-iconbtn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    border: 1px solid var(--reg-line);
    border-radius: 8px;
    background: #fff;
    color: var(--reg-muted);
    cursor: pointer;
    transition: all .15s ease;
}

    .reg-iconbtn:hover {
        color: var(--reg-brand);
        border-color: var(--reg-brand);
        background: var(--reg-brand-soft);
    }

.reg-iconbtn-danger:hover {
    color: var(--reg-danger);
    border-color: #f3c3c3;
    background: #fdf2f2;
}

/* -- rating --------------------------------------------------------------- */

.reg-rate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.reg-rate-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 6px;
    border: 1px solid var(--reg-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all .18s ease;
}

    .reg-rate-opt i {
        font-size: 26px;
        line-height: 1;
        color: #c3ccd8;
        transition: color .18s ease, transform .18s ease;
    }

    .reg-rate-opt span {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--reg-muted) !important;
    }

    .reg-rate-opt:hover {
        border-color: #cfdae6;
        transform: translateY(-2px);
    }

        .reg-rate-opt:hover i {
            transform: scale(1.08);
        }

    .reg-rate-opt.is-on {
        border-color: currentColor;
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .10);
    }

        .reg-rate-opt.is-on i,
        .reg-rate-opt.is-on span {
            color: inherit !important;
        }

.reg-rate-happy.is-on {
    color: #2e8b57;
    background: #f1faf4;
}

.reg-rate-neutral.is-on {
    color: #b98900;
    background: #fdf8ea;
}

.reg-rate-sad.is-on {
    color: #d0342c;
    background: #fdf3f2;
}

/* -- buttons and action bar ----------------------------------------------- */

.reg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
}

    .reg-btn:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .22);
    }

.reg-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--reg-brand-dark), var(--reg-brand));
    box-shadow: 0 6px 16px rgba(0, 132, 155, .26);
}

    .reg-btn-primary:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 9px 20px rgba(0, 132, 155, .32);
    }

.reg-btn-ghost {
    color: var(--reg-ink);
    background: #fff;
    border-color: var(--reg-line);
}

    .reg-btn-ghost:hover {
        border-color: var(--reg-brand);
        color: var(--reg-brand);
        background: var(--reg-brand-soft);
    }

.reg-btn-lg {
    padding: 11px 30px;
    font-size: 14.5px;
}

/* -- posting -------------------------------------------------------------- */

.reg-btn[disabled],
.reg-btn.is-busy {
    opacity: .8;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* the tick on Submit is swapped for this while the form is on its way */
.reg-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reg-spin .7s linear infinite;
}

@keyframes reg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Covers the whole page, shell included, so nothing can be clicked twice.
   Outside .reg, so it cannot use the tokens; above the date picker at
   100000000 and every z-index in style.css. */
.reg-veil {
    position: fixed;
    top: 0;
    inset-inline: 0;
    bottom: 0;
    z-index: 100000001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 34, 45, .45);
}

.reg-veil-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

    .reg-veil-box .reg-spin {
        width: 24px;
        height: 24px;
        border-width: 3px;
        border-color: rgba(0, 132, 155, .22);
        border-top-color: #00849b;
    }

.reg-btn-soft {
    color: var(--reg-brand);
    background: var(--reg-brand-soft);
    border-color: #cfe7ec;
}

    .reg-btn-soft:hover {
        background: #daeef2;
        border-color: var(--reg-brand);
    }

.reg-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-width: 1100px;
    margin: 18px auto 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--reg-line);
    border-bottom: 0;
    border-radius: var(--reg-radius) var(--reg-radius) 0 0;
    box-shadow: 0 -6px 20px rgba(31, 42, 68, .07);
}

.reg-actions {
    justify-content: flex-start;
}

/* pushes Clear and Next / Submit to the trailing edge */
.reg-actions-gap {
    flex: 1 1 auto;
}

/* Font Awesome arrows do not mirror themselves */
.reg[dir=rtl] .reg-flip {
    transform: scaleX(-1);
}

.reg-actions-note {
    flex: 1 1 200px;
    font-size: 12.5px;
    color: var(--reg-muted) !important;
    text-align: start;
}

/* -- company: activities and supervisors ---------------------------------- */

/* bootstrap-multiselect renders a button plus a dropdown */
.reg .btn-group {
    display: block;
    width: 100%;
}

    .reg .btn-group > .btn.multiselect {
        width: 100%;
        overflow: hidden;
        text-align: start;
        padding: 8px 11px;
        font-size: 14px;
        color: var(--reg-ink);
        background: #fff;
        border: 1px solid var(--reg-line);
        border-radius: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .reg .btn-group > .btn.multiselect:hover {
            border-color: var(--reg-brand);
        }

    .reg .btn-group .dropdown-menu {
        width: 100%;
        max-height: 260px;
        overflow-y: auto;
        border: 1px solid var(--reg-line);
        border-radius: 11px;
        box-shadow: var(--reg-shadow);
        padding: 6px;
    }

    .reg .btn-group .dropdown-menu.show {
        height: auto;
    }

.reg .multiselect-container > li > a {
    color: var(--reg-ink) !important;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 13px;
}

    .reg .multiselect-container > li > a:hover {
        background: var(--reg-brand-soft);
    }

.reg .multiselect-container > li {
    float: none;
    list-style: none;
}

.reg input.form-control.multiselect-search {
    width: 100%;
}

.reg .multiselect-selected-text {
    color: var(--reg-ink);
    font-weight: 400 !important;
}

/* -- file preview modal --------------------------------------------------- */

.reg-modal .modal-content {
    border: 0;
    border-radius: var(--reg-radius);
    background: #fff;
    overflow: hidden;
}

.reg-modal .modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--reg-line);
}

.reg-modal .modal-body {
    padding: 0;
    max-height: 76vh;
    overflow: auto;
    background: #f6f9fb;
}

    .reg-modal .modal-body img,
    .reg-modal .modal-body embed {
        display: block;
        width: 100%;
    }

.reg-modal .modal-foot {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--reg-line);
}

/* -- narrow screens ------------------------------------------------------- */

@media (max-width: 991px) {
    .reg-hero {
        flex-wrap: wrap;
    }

    .reg-meter {
        width: 100%;
        text-align: start;
    }
}

@media (max-width: 767px) {
    .reg {
        padding: 12px 12px 0;
    }

    .reg-cols {
        grid-template-columns: 1fr;
    }

    /* four markers with their names will not fit a phone, so only the step
       being filled in keeps its name */
    .reg-steps {
        padding: 12px 10px;
        gap: 2px;
    }

    .reg-mark-txt {
        display: none;
        font-size: 11.5px;
    }

    .reg-mark.is-current .reg-mark-txt {
        display: block;
    }

    .reg-mark.is-current {
        flex: 2 1 0;
    }

    .reg-hero {
        padding: 14px 16px;
    }

        .reg-hero-txt h1 {
            font-size: 18px;
        }

    .reg-upload-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .reg-rate {
        gap: 8px;
    }

        .reg-rate-opt {
            padding: 10px 4px;
        }

            .reg-rate-opt i {
                font-size: 22px;
            }

    .reg-actions {
        padding: 10px 12px;
    }

    .reg-actions-note {
        flex-basis: 100%;
        text-align: center;
    }

    .reg-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reg-btn, .reg-rate-opt, .reg-rate-opt i, .reg-meter-fill, .reg-iconbtn {
        transition: none;
    }

        .reg-btn:hover, .reg-rate-opt:hover {
            transform: none;
        }

    /* slowed rather than stopped: it is the only sign the form is posting */
    .reg-spin {
        animation-duration: 1.8s;
    }

    .reg-step.is-on {
        animation: none;
    }

    .reg-mark, .reg-mark-dot {
        transition: none;
    }
}