.gap-2 {
    gap: 0.5rem;
}
.form-control {
    --placeholder: var(--mpf-input-bg);
    background-color: var(--mpf-input-bg);
    border: var(--bs-border-width) solid var(--mpf-input-border-color);
    border-radius: 4px;
}
.form-control::placeholder {
    color: var(--mpf-input-bg);
}
.form-control:focus,
.form-select:focus{
    
    background-color:var(--mpf-input-focus-bg);
}

.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	display: block;
	width: 100%;
	padding: .375rem 2.25rem .375rem .75rem;
	-moz-padding-start: calc(0.75rem - 3px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	background-color: var(--mpf-input-bg);
	background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
	border: var(--bs-border-width) solid var(--mpf-input-border-color);
	border-radius: 10px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form-floating .form-control,
.form-floating .form-select{
    color: var(--black-000);
    font-weight: 500;
    font-family: var(--nunito-sans);
    font-size:18px;
}
.form-control-select .icon-wrapper {
    background-image: linear-gradient(to right, transparent, var(--mpf-input-bg) 40%);
}
.form-floating {
    --bs-border-width: var(--mpf-input-border-width);
    position: relative;
}
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.form-floating > .form-control__grounded {
    padding-block: 1.125rem !important;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3.6rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding: 1rem .75rem;
}
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{
    background-color: transparent;
}
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgba(var(--mpf-label-color-rgb,--body-color-rgb),.65);
}
.form-floating.form-control-select .icon-wrapper {
    background: var(--mpf-input-bg);
}
.form-floating.form-control-select select:focus + .icon-wrapper {
    background: var(--mpf-input-focus-bg);
}
.form-floating textarea.form-control {
    min-height: 150px;
}
.form-check-input{
    background-color: var(--mpf-input-bg);
    border-color:var(--mpf-input-border-color);
    margin-top:.4em;
}
.form-check-input:checked{
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus,
.form-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-transparent);
}
form,
.form-wrapper {
    --mpf-white: #fff;
    --mpf-gray: #f7f7f8;
    --mpf-input-bg: #eef5ff;
    --mpf-input-color: currentcolor;
    --mpf-input-focus-color: var(--black-000);
    --mpf-input-focus-bg: var(--mpf-white);
    --mpf-input-border-color: var(--blue);
    --mpf-input-border-width: 1px;
    --mpf-input-focus-box-shadow: 0 0 0 0.2rem var(--green-600-transparent);
    --mpf-input-focus-border-color: var(--green-600);
    --mpf-label-color: #717778;
}
.form-container-dark :is(form, .form-wrapper) {
    --mpf-input-color: #fff;
    --mpf-gray: #717778;
    --mpf-input-bg: rgba(var(--primary-rgb), 0.4);
    --mpf-label-color: #fff;
    --mpf-label-color-rgb: 255, 255, 255;
    --mpf-label-focus-color: #fff;
    --mpf-input-focus-color: #fff;
    --mpf-input-focus-bg: rgba(var(--primary-rgb), 0.4);
}
.form-container-light :is(form, .form-wrapper) {
    --mpf-input-color: var(--dark-blue);
    --mpf-gray: #717778;
    --mpf-input-bg: rgba(255,255,255,.8);
    --mpf-label-color: #717778;
    --mpf-label-color-rgb: var(--dark-blue-rgb);
    --mpf-label-focus-color: var(--secondary);
    --mpf-input-focus-color: var(--dark-blue);
    --mpf-input-focus-bg: rgba(255,255,255,1);
}
:is(.form, .form-wrapper) label {
    color: var(--mpf-label-color);
}
:is(form, .form-wrapper) .form-floating .form-control {
    color: var(--mpf-input-color);
}
:is(form, .form-wrapper) .form-floating .form-control:focus {
    color: var(--mpf-input-focus-color);
}
:is(form, .form-wrapper) .form-floating > :is(.form-control-plaintext, .form-control:focus) ~ label{
    color: var(--mpf-label-focus-color, var(--mpf-label-color));
}
.form-floating > .form-control__grounded {
    padding-block: 1.125rem;
}
.form-floating {
    margin-bottom: 1ch;
}
.input-btn {
    border-radius: 10px;
    border: 1px solid transparent;
}
.input-btn > * {
    grid-row: 1;
}
.input-btn > .form-floating {
    margin-bottom: 0;
}
.input-btn button {
    background-color: var(--mpf-input-bg);
    transition: none;
    border:unset;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    grid-column: 2;
    position: relative;
    z-index: 1;
    padding: calc(20px - 1rem) 20px;
    font-size: 2rem;
}

.input-btn .form-control {
    border: unset;
    border-right: unset;
}
.input-btn:focus-within {
    border-color: var(--mpf-input-focus-border-color);
    box-shadow: var(--mpf-input-focus-box-shadow);
}
.input-btn:focus-within input,
.input-btn:focus-within button {
    background-color: var(--mpf-input-focus-bg);
    border: unset;
}
.input-btn button.btn:hover {
    background-color: var(--mpf-input-bg);
}
.input-btn button.btn:hover,
.input-btn button.btn:not(.btn-border):hover:focus,
.input-btn:focus-within button:focus,
.input-btn:focus-within .form-control:focus {
    box-shadow: unset;
}
[data-file-input],
[data-file-output] > output,
[data-file-upload="right"] [data-file-btn] > label{
    background-color: var(--mpf-input-bg);
    border: 1px solid transparent;
}
[data-file-upload="right"] > [data-file-output] > output,
[data-file-input] {
    border-radius: 10px;
}
[data-file-upload="right"] > [data-file-output] > output {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[data-file-upload="right"] > [data-file-btn] > label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
[data-file-btn] > label:hover {
    background-color: var(--green-100);
    color: var(--mpf-input-bg);
}