:root {
    /* colors */
    --clr-gray-dark: #001108;
    --clr-gray-lt: #CEC2C2;
    --clr-gray-ltr: #99A09C;
    --clr-gray-ltx: #CCCFCE;
    --clr-grey-40: #66706B;
    --clr-gray-30: #D9DBDA;
    --clr-gray-semi-dark: #808E87;
    --clr-gray-border: #DCDCDC;
    --cl-gray-sl: #646E66;
    --cl-gray-tb: #99A09C;
    --clr-gray-border-input: #E6E7E6;

    --clr-green-dark: #011D0E;
    --clr-green-regular: #1A3124;
    --clr-green-border: #04AE51;
    --clr-green-ltr: #334139;
    --clr-green-tx: #1A2921;
    --clr-green-fill: #292D32;
    --clr-green-fill-drk: #01190C;
    --cl-green-fill-lt: #E6F7EE;
    --clr-green-fill-ltr: #67776E;
    --clr-green-fill-ltx: #EFF6F2;
    --clr-green-fill-neutral: #8BB9A0;
    --clr-green-success: #2DAC8F;

    --clr-red-dark: #EE3037;
    --clr-red-lt: #ED6557;
    --clr-red-lte: #d8c2bf;
    --clr-red-ltr: #fbf3f4;
    --clr-red-ltx: #FAF4E1;
    --clr-red-dgr: #FDEBEB;

    --clr-neutral-light: #ffffff;
    --clr-neutral-dark: #000000;
    --clr-neutral-ltr: #FAFAFA;
    --clr-neutral-lte: #fff3f4;
    --clr-neutral-lt: #FAFAFA;
    --clr-neutral-ter: #F2F3F3;
    --clr-brown-fill: #372C2C;
    --clr-orange-drk: #DC711F;

    /* font family */
    --ff-primary: 'Inter', sans-serif;

    /* font size */
 
    --fs-100: 1.0rem;
    --fs-200: 1.2rem;
    --fs-300: 1.4rem;
    --fs-400: 1.6rem;
    --fs-450: 1.8rem;
    --fs-500: 2.0rem;
    --fs-600: 2.2rem;
    --fs-700: 2.4rem;
    --fs-800: 3.2rem;
    --fs-900: 4.0rem;

    /* font weight */
    --fw-extra-bold: 700;
    --fw-bold: 600;
    --fw-semi-bold: 500;
    --fw-regular: 400;
    --fw-thin: 200;

    /* line height */
    --line-height-100: 1;
    --line-height-150: 1.5;
    --line-height-200: 2;
    --line-height-250: 2.5;

    /* spacing */
    --space-2: 0.2rem;
    --space-4: 0.4rem;
    --space-8: 0.8rem;
    --space-12: 1.2rem;
    --space-16: 1.6rem;
    --space-18: 1.8rem;
    --space-20: 2.0rem;
    --space-24: 2.4rem;
    --space-28: 2.8rem;
    --space-32: 3.2rem;
    --space-48: 4.8rem;
    --space-64: 6.4rem;
    --space-80: 8.0rem;
    --space-96: 9.6rem;
    --space-124: 12.4rem;
    --space-128: 12.8rem;
    --space-160: 16.0rem;
    --space-180: 18.0rem;
    --space-200: 20.0rem;
    --space-260: 26.0rem;

    --border-8: 0.8rem;
    --border-12: 1.2rem;
    --border-16: 1.6rem;
    --border-20: 2.0rem;
}

.h-100p {
    height: 100%;
}

.h-20 {
    height: 20rem;
}

.h-50 {
    height: 50rem
}

.w-100p {
    width: 100%;
}

.p-2 {
    padding: 0px var(--space-12);
}

.m-t-20 {
    margin-top: var(--space-20) !important;
}

.m-t-96 {
    margin-top: var(--space-96) !important;
}

.btn {
    font-size: var(--fs-400);
    font-weight: 700;
    padding: var(--space-12) var(--space-24);
    align-items: center;
    border-radius: var(--space-12);
    border: 0.5px var(--clr-red-ltr) solid;
    cursor: pointer;
    line-height: 20px;
    background: var(--clr-neutral-dark);
    color: var(--clr-neutral-light);
    text-wrap: nowrap;
}

.btn.primary {
    color: var(--clr-neutral-light);
    background: var(--clr-red-dark);
}

.btn:hover {
    background-color: var(--clr-red-lt);
}

.btn.btn-text {
    background: transparent;
    color: inherit;
    border: none;
}

.btn.btn-text:hover {
    background-color: var(--clr-red-ltr);
}

.btn.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: var(--clr-neutral-light); */
    background: var(--clr-gray-dark);
}

.btn.btn-icon svg {
    width: var(--space-16);
    height: var(--space-16);
    fill: currentColor;
    fill: var(--clr-neutral-light);

}

.grid {
    display: grid;
    column-gap: var(--space-24);
    row-gap: var(--space-48);
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid .form-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.grid-span-1 {
    grid-column: span 1;
}

.grid-span-2 {
    grid-column: span 2;
}

.grid-span-end {
    grid-column: 1/-1;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-gap-12 {
    gap: var(--space-12);
}

.flex-gap-8 {
    gap: var(--space-8);
}

.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: var(--space-48);
}

.step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease;
}

.step:not(:last-child) .step--icon::after {
    content: "";
    position: absolute;
    border: 1px var(--clr-gray-ltr) dashed;
    transform: translateY(-50%);
    overflow: hidden;
    width: 100%;
    cursor: auto;
}

.steps .step:first-child .step--icon::after {
    left: 85px;
    width: 45rem;
}

.steps .step:nth-child(2n) .step--icon::after {
    left: 105px;
    width: 47rem;
}

.steps .step:last-child .step--icon::after {
    overflow: hidden;
}

.steps .step:last-child {
    padding-left: 20px;
    cursor: pointer;
}

.step--icon {
    display: flex;
    width: 42px;
    height: 42px;
    border: 0.5px solid #000;
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-600);
    align-self: center;
}

.step.active .step--icon {
    border: 0.5px solid var(--clr-green-border);
}

.step--text {
    color: var(--clr-gray-dark);
    text-align: center;
    font-size: var(--fs-400);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
}

.form-control {
    margin-top: var(--space-48);
}

.form-control label {
    display: block;
    margin: 10px;
    font-size: var(--fs-400);
    font-weight: var(--fw-regular);
    color: var(--clr-green-regular);
}

.form-control input {
    width: 100%;
    border-radius: var(--border-16);
    border: 0.5px var(--clr-gray-lt) solid;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    padding-left: var(--space-48);
}

.form-control select {
    width: 100%;
    border-radius: var(--border-16);
    border: 0.5px var(--clr-gray-lt) solid;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    padding-left: var(--space-8);
}

.form-control textarea {
    border-radius: 8px;
    border: 1px solid var(--clr-gray-30);
    /* background: var(--clr-neutral-ltr); */
    background-color: var(--clr-neutral-light);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 10px;
}

.form-control svg {
    position: absolute;
    top: var(--space-12);
    left: var(--space-12);
}

.form-control-group {
    position: relative;
    margin-top: var(--space-4);
}


.form-control input::placeholder {
    position: absolute;
    color: var(--clr-gray-lt);
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
    line-height: var(--line-height-200);
    word-wrap: break-word;
    text-transform: capitalize;
}

input::placeholder {
    font-family: var(--ff-primary);
    color: var(--cl-gray-sl);
}

.form-control input:focus {
    border-color: var(--clr-red-lt);
    border-width: 1px;
}

input[type="radio"] {
    background-color: var(--clr-neutral-light);
    margin: 0;
    font: inherit;
    width: var(--space-16);
    height: var(--space-16);
    border: 0.15em solid currentColor;
    border-radius: 50%;
    accent-color: var(--clr-red-dark);
}

table {
    border-collapse: collapse;
    width: 100%;
}

table thead tr,
table tbody tr {
    border-bottom: 1px solid var(--clr-gray-border);
}

table thead tr th {
    text-align: left;
    color: var(--clr-gray-dark);
    font-size: var(--fs-500);
    font-style: normal;
    font-weight: var(--fw-semi-bold);
    line-height: var(--line-height-150);
    padding: var(--space-8) 0;
}


table tbody tr td {
    padding: var(--space-12) 0;
    color: var(--clr-gray-dark);
    font-size: var(--fs-300);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-100);
}

tbody .status {
    border-radius: var(--border-20);
    padding: var(--space-4) var(--space-12);
    text-align: center;
    font-size: var(--fs-300);
    font-style: normal;
    font-weight: var(--fw-semi-bold);
    line-height: var(--line-height-100);
}

tbody .status-danger {
    background: var(--clr-red-dgr);
    color: var(--clr-red-dark);
}

tbody .status-pending {
    background: var(--clr-red-ltx);
    color: var(--clr-orange-drk);
}

tbody .status-success {
    background: var(--cl-green-fill-lt);
    color: var(--clr-green-success);
}

.main--empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: var(--space-200);
}

.main--empty span {
    color: var(--clr-gray-semi-dark);
    text-align: center;
    font-size: var(--fs-500);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
}

.main--empty a {
    color: var(--clr-red-dark);
    text-align: center;
    font-size: var(--fs-500);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
    text-decoration-line: underline;
}

.main--empty a:link,
.main--empty a:visited {
    text-decoration: underline;
}

.main--empty a:hover,
.main--empty a:active {
    text-decoration-line: underline;
    color: var(--clr-red-lt);
}

.manual-form--title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-64);
}

.manual-form--title h1 {
    color: var(--clr-gray-dark);
    font-size: var(--fs-700);
    font-style: normal;
    font-weight: var(--fw-bold);
    line-height: var(--line-height-200);
}

.manual-form--title p {
    color: var(--clr-green-ltr);
    text-align: center;
    font-size: var(--fs-400);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-100);
}

.manual-form--container {
    margin-top: var(--space-64);
}

.manual-form--container .form-control {
    margin-top: 0 !important;
}

.manual-form--container h2 {
    color: var(--clr-gray-dark);
    font-size: var(--fs-600);
    font-style: normal;
    font-weight: var(--fw-semi-bold);
    line-height: var(--line-height-150);
    margin-bottom: var(--space-32);
}

.manual-form--container .form-control label {
    margin: 0 !important;
}

.manual-form--container .form-control input {
    border-radius: 4px;
    border: 1px solid var(--clr-gray-ltx);
    box-shadow: 0px 1px 2px 0px rgba(230, 231, 230, 0.05);
    padding: 12px;
}

.manual-form--container .form-control textarea {
    border-radius: 4px;
}

.manual-form--container .form-control select {
    border-radius: 4px;
    border: 1px solid var(--clr-gray-ltx);
    box-shadow: 0px 1px 2px 0px rgba(230, 231, 230, 0.05);
    padding: 12px;
}

.manual-form--container .form-control input::placeholder {
    color: var(--clr-gray-lt);
    font-size: var(--fs-300);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-100);
}

.manual-form--container .form-control--input.radio-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--space-32);
    justify-items: center;
    align-items: center;
    height: var(--space-48);
}

.manual-form--container .controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--space-64);
}

.manual-form--container .upload-wrapper {
    border-radius: 12px;
    border: 1px dashed var(--clr-gray-ltx);
    background: var(--clr-neutral-ter);
    /* height: var(--space-128); */
    height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
}

.manual-form--container .upload-wrapper .upload-icon svg {
    position: inherit;
    width: var(--space-48);
    height: var(--space-48);
}

.manual-form--container .upload-wrapper .upload-text span:first-child {
    color: var(--clr-red-dark);
    font-size: var(--fs-400);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
}

.manual-form--container .upload-wrapper .upload-text span:last-child {
    color: var(--clr-grey-40);
    font-size: var(--fs-400);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
}

.manual-form--container .upload-wrapper .upload-supported span {
    color: var(--clr-grey-40);
    font-size: var(--fs-300);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--line-height-150);
}

.manual-form--container .controls .btn-back {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
}

.manual-form--container .controls .btn-back span {
    color: var(--clr-red-dark);
}