/* FONT  */
[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
    font-style: regular;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Fortune';
    src: url('../fonts/Fortune/Fortune.otf') format('otf'), url('../fonts/Fortune/Fortune.woff') format('woff'), url('../fonts/Fortune/Fortune.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/* overflow: hidden; Impedisce lo scroll della pagina */

body {
    font-family: var(--font-paragraphs);
    font-weight: normal;
    line-height: 1.3;
    margin: 0;
}

.cursive-custom-font {
    font-family: 'Fortune', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
}

button {
    cursor: pointer;
    p
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: relative;
    right: -5px;
}

::-webkit-scrollbar-track {
    background: #e9ecef33;
    border-radius: 5px;
    position: relative;
    right: -5px;
}

::-webkit-scrollbar-thumb {
    background: #000A;
    border-radius: 5px;
    position: relative;
    right: -5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000A;
}

/* FINE SCROLLBAR */

* {
    /* margin: 0;
    padding: 0; */
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

.disabled {
    opacity: .5;
    pointer-events: none;
}

.logo-img {
    width: 96px;
    max-width: 100%;
    height: auto;
}

#logo-small {
    width: 23px;
}

@media (min-width: 1024px) {
    .logo-img {
        width: 90px;
    }

    .mw-d50 {
        max-width: 50% !important;
    }
}

#ones-container {
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    position: relative;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-auto {
    overflow: auto;
}

#ones-screen {
    flex: 1;
    overflow: auto;
    padding: 0.5rem;
    padding: 0rem 1rem 1rem 1rem;
}

.w-25 {
    width: 25% !important;
}

.w-33 {
    width: 33% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.z-0 {
    z-index: 0 !important;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}
.top-50 {
    top: 50%;
}

.bottom-0 {
    bottom: 0;
}

.start-0 {
    left: 0;
}

.end-0 {
    right: 0;
}

.top-100 {
    top: 100%;
}

.bottom-100 {
    bottom: 100%;
}

.start-100 {
    left: 100%;
}

.end-100 {
    right: 100%;
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.translate-middle-y {
    transform: translate(0%, -50%) !important;
}

.text-white {
    color: var(--white);
}

.text-black {
    color: var(--black);
}

.text-danger {
    color: var(--red);
}

.text-decoration-underlined {
    text-decoration: underline;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

/* POCKET ALERT */

.no-style-list {
    list-style: none;
}

#pocket-alert {
    position: fixed;
    top: 20px;
    right: -50%;
    width: 50%;
    max-width: 400px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px var(--black);
    color: var(--white);
    font-family: Arial, sans-serif;
    transition: right 0.5s ease-in-out;
    z-index: 9999;
}

#pocket-alert .pocket-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

#pocket-alert .pocket-content {
    font-size: 14px;
}

#pocket-alert.warning {
    background-color: var(--orange);
}

#pocket-alert.error {
    background-color: var(--red);
}

#pocket-alert.success {
    background-color: var(--green);
}

#pocket-alert.info {
    background-color: var(--light-blue);
}

#pocket-alert.show {
    right: 20px;
}

/* INPUT  */
.form-control {
    padding: .2rem .3rem;
    border: 1px solid black;
}

.input-default {
    border: transparent;
    width: 50%;
}

.input-default-bg-black {
    background-color: var(--black);
    color: var(--white);
}

.input-default-bg-white {
    background-color: var(--white);
    color: var(--black);
}

.input-transparent {

    border: none;
    outline: none;
}

.input-transparent:hover,
.input-transparent:focus {
    border: none;
    outline: none;
}

label {
    color: var(--black);
}

label.form-check-label-subuser {
    color: var(--black);
    border: 1px solid var(--orange);
    border-radius: 5px;
}

label.form-check-label-subuser.label-radio-checked {
    background-color: var(--orange);
}

.label-wrapped {
    white-space: inherit;
}

.normal-space {
    white-space: normal;
}

.input-fill-width {
    width: 100%;
    flex: 1;
    min-width: 0;
}


.container-member-input {
    position: relative;
}

.input-member {
    background-color: var(--white);
    color: var(--white);
    border: 1px solid var(--white);
    border-bottom: 1px solid var(--orange);
}


.checkbox-label {
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

/* .circle-checkbox{
    padding: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
} */

.circle-checkbox-input {
    width: 20px;
    height: 20px;
    padding: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray);
    cursor: pointer;
    background-color: var(--white);
}

.circle-checkbox-input:checked {
    background-color: var(--orange);
    border-color: var(--gray);
}

.checkbox-default {
    width: 35px;
    height: 20px;
    appearance: none;
    border: 2px solid var(--light-grey);
    cursor: pointer;
}

.square-checkbox-default-small {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--gray);
    cursor: pointer;
}

.square-checkbox-default-med {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 2px solid var(--black);
    cursor: pointer;
}

.square-checkbox-default:checked {
    background-color: var(--blue);
    border-color: var(--gray);
}

.square-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--gray);
    cursor: pointer;
    margin-right: 10px;
}

.square-checkbox:checked {
    appearance: inherit;
    background-color: var(--blue);
    border-color: var(--gray);
}

/* COMMONS */
.text-nowrap {
    white-space: nowrap;
}

.opacity {
    opacity: 1;
}

.no-opacity {
    opacity: 0;
}

.no-min-width {
    min-width: 0px;
}

/* FONT WEIGHT */

.fw-normal {
    font-weight: normal;
}

.fw-bold {
    font-weight: bold;
}

.fw-light {
    font-weight: 200;
}

/* FONT SIZE */

.fs-paragraph {
    font-size: var(--fs-paragraph);
}

.fs-title {
    font-size: var(--fs-title);
}

.fs-title-m {
    font-size: var(--fs-title-m);
}

/* WIDTH HEIGHT */

.h-40 {
    height: 40vh;
}

/* MAX / MIN WIDTH / HEIGHT */
.w-205 {
    width: 2.5rem;
}

.w-40-perc {
    width: 30%;
    min-width: 30%;
}

.mw-100 {
    max-width: 100%;
}

.mw-60 {
    max-width: 60%;
}

.mw-50 {
    max-width: 50%;
}

.mw-40 {
    max-width: 40%;
}

.mw-30 {
    max-width: 30%;
}

.mw-20 {
    max-width: 20%;
}

.minh-90 {
    min-height: 90%;
}

.minh-60 {
    min-height: 60%;
}

.minw-80 {
    min-width: 80%;
}

.minw-60 {
    min-width: 60%;
}

.minw-50 {
    min-width: 50%;
}

.minw-45 {
    min-width: 45%;
}

.minw-40 {
    min-width: 4cap;
}

.minw-20 {
    min-width: 20%;
}

.minw-10 {
    min-width: 10%;
}

.minw-60 {
    min-width: 60%;
}

/* FLEX */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* Effetto fade-in */
.fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}

/* Effetto fade-out */
.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Definizione animazione */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Stile input */
/* .search-input {
    width: 100%;
    max-width: 300px;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
} */


.flex-row {
    flex-direction: row;
}

.justify-content-start {
    justify-content: start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-stretch {
    justify-content: stretch;
}

.align-items-start {
    align-items: start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.align-items-stretch {
    align-items: stretch;
}

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

.center-flex {
    align-items: center;
    justify-content: center;
}

.flex-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BTN */
.btn-link {
    color: var(--orange);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 0 #000;
    text-decoration: underline;
}

.btn-link:focus-visible {
    color: var(--orange);
}

.btn-link:hover {
    color: var(--red-home);
}

.btn-primary {
    background-color: var(--orange);
    color: var(--white);
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    font-size: 1.3rem;
    border: 1px solid var(--orange);

}

.btn-primary-w-auto {
    background-color: var(--orange);
    color: var(--white);
    text-align: center;
    padding: 0.5rem;
    font-size: 1.3rem;
    border: 1px solid var(--orange);

}

.btn-secondary {
    background-color: var(--ocher);
    color: var(--white);
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    font-size: 1.3rem;
    border: 1px solid var(--ocher);
}

.btn-mod-save {
    background-color: var(--orange);
    text-align: center;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid var(--orange);
}

.btn-mod-save-purple {
    background-color: var(--purple);
    color: var(--white);
    text-align: center;
    padding: .6rem 1.3rem;
    font-size: .8rem;
    font-weight: bold;
    border: 1px solid var(--purple);
}

.btn-allega {
    font-size: 1rem;
    background-color: var(--ocher);
    border: 1px solid var(--ocher);
    padding: 0 .5rem;
}

.btn-search {
    background-color: var(--ocher);
    padding: 0.5rem;
    border: 1px solid var(--ocher);
}

.btn-add {
    background-color: var(--orange);
    color: var(--white);
    border-radius: 50%;
    padding: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.btn-transparent {
    background-color: transparent;
    border: transparent;
    cursor: pointer;
}


/* ALIGN  */
.center,
.text-center {
    text-align: center;
}

.left,
.text-left,
.text-start {
    text-align: left;
}

.right,
.text-right,
.text-end {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.align-end {
    align-items: end;
}

.small-text,
.small {
    font-size: var(--fs-small);
}

.smaller-text,
.smaller {
    font-size: var(--fs-smaller);
}

.f-07 {
    font-size: .7rem;
}

.tiny-small-text {
    font-size: var(--fs-tiny-small);
}

.tiny-text {
    font-size: var(--fs-tiny);
}

.line-height-05 {
    line-height: .5rem;
}

.lh-1 {
    line-height: 1;
}


.user-big {
    font-size: 3rem;
}

.icon-med {
    font-size: 1.5rem;
}

.icon-med-l {
    font-size: 2rem;
}

.icon-med-xl {
    font-size: 2.5rem;
}




.icon-big {
    font-size: 3rem;
}

.icon-big-m {
    font-size: 3.5rem;
}

.icon-big-xl {
    font-size: 5rem;
}

/* COLORS & ROOT */

:root {
    --gap: 10px;
    --font-paragraphs: "Poppins", sans-serif;
    --font-title: "Poppins", sans-serif;
    --text-over-site-color: #ffffff;
    --text-over-site-color-op: #ffffffAA;
    --menu-text-transform: inherit;
    --menu-letter-spacing: normal;
    --menu-font-weight: normal;
    --menu-font-size: 1rem;
    --ocher: #85878B;
    --grey: #888888;
    --orange: #F97930;
    --yellow: #FBB631;
    --purple: #9C1560;
    --light-purple: #ff1d8e;
    --dark-gray: #535252;
    --gray: #878787;
    --light-grey: #a3a3a3;
    --light-grey-user: #E1E2E4;
    --black: #231F20;
    --blue: #0E3692;
    --light-blue: #2286A9;
    --white: #ffff;

    --orange-home: #F4A465;
    --light-orange: #f5ceaf;
    --red-home: #EB6A4B;
    --yellow-home: #FECE60;
    --blue-home: #5d5fac;
    --grey-home: #C6C6C6;
    --pink-home: #EF6D9B;
    --light-blue-home: #0CBBF0;
    --green-home: #84B061;

    --fs-title: 1.5rem;
    --fs-title-m: 2rem;
    --fs-paragraph: 1rem;
    --fs-small: .8rem;
    --fs-smaller: .7rem;
    --fs-tiny-small: .6rem;
    --fs-tiny: .5rem;
    --fs-tiny-s: .3rem;
    --red: red;
    --green: #4E8F2B;
    --pink: rgb(240, 64, 210);
    --fucsia: #e40071;
    --light-pink: #E2BBCF;
    --cal-pink: #fbb4ef;
    --cal-green: #7dd34f;
    --cal-light-blue: #63d6ff;
    --cal-yellow: #fbc04f;
    --gradient: rgb(245, 127, 49);
    --gradient2: linear-gradient(90deg, rgba(245, 127, 49, 1) 22%, rgba(172, 36, 87, 1) 64%);

    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
}



.text-gradient {
    background: var(--gradient2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* .gradient-seno {
    background: linear-gradient(to bottom,
    #F97930 40%,
    #A12262 60%  );
} */


.bg-gradient-seno {
    background: rgb(249, 121, 48);
    background: linear-gradient(90deg, rgba(249, 126, 45, 1) 61%, rgba(161, 34, 98, 1) 89%);
}

.bg-red {
    background-color: var(--red);
}

.bg-green {
    background-color: var(--green);
}

.bg-fucsia {
    background-color: var(--fucsia);
}

.bg-pink {
    background-color: var(--pink);
}

.cal-pink {
    background-color: var(--cal-pink);
}

.cal-green {
    background-color: var(--cal-green);
}

.cal-light-blue {
    background-color: var(--cal-light-blue);
}

.cal-yellow {
    background-color: var(--cal-yellow);
}

.bg-ocher {
    background-color: var(--ocher);
}

.bg-orange,
.bg-primary {
    background-color: var(--orange);
}



.bg-yellow {
    background-color: var(--yellow);
}

.bg-purple {
    background-color: var(--purple);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-light-pink {
    background-color: var(--light-pink);
}

.bg-light-gray,.bg-light-grey {
    background-color: var(--light-grey-user);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-white {
    background-color: var(--white);
}

.bg-black {
    background-color: var(--black);
}

.bg-light-orange {
    background-color: var(--light-orange);
}

.bg-orange-home {
    background-color: var(--orange-home);
}

.bg-red-home {
    background-color: var(--red-home);
}

.bg-yellow-home {
    background-color: var(--yellow-home);
}

.bg-grey-home {
    background-color: var(--grey-home);
}

.bg-blue-home {
    background-color: var(--blue-home);
}

.bg-pink-home {
    background-color: var(--pink-home);
}

.bg-light-blue-home {
    background-color: var(--light-blue-home);
}
.text-light-blue-home {
    color: var(--light-blue-home);
}

.bg-green-home {
    background-color: var(--green-home);
}

.text-primary,
.text-orange {
    color: var(--orange);
}

.purple-text,
.text-purple,
.text-secondary {
    color: var(--purple);
}

.white-text {
    color: var(--white);
}

.text-dark,
.text-black {
    color: var(--black);
}

.text-danger {
    color: var(--red);
}

.text-success,
.text-green {
    color: var(--green);
}

.text-fucsia {
    color: var(--fucsia);
}

.text-light-blue {
    color: var(--light-blue);
}

.text-blue {
    color: var(--blue);
}

.text-transparent {
    color: transparent;
}

.text-light-gray,.text-light-grey {
    color: var(--light-grey-user);
}

.hide-input {
    display: none;
}

.bg-gray,
.bg-grey {
    background-color: var(--gray);
}

.bg-transparent {
    background-color: transparent;
}

/* LOGIN */

.psw-forgot {
    font-size: 0.7rem;
    color: var(--orange);
}

.psw-forgot-link {
    text-decoration: none;
    color: var(--orange);
}

.logo-title .user-big {
    background-color: var(--gradient);
    background-color: var(--gradient2);
}

.info-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: .5rem;
    text-align: end;
}

/* FORM REGISTER */
.no-list {
    list-style: none;
    padding-left: 0;
}

.no-list li::before {
    content: "- ";
    font-weight: bold;
}

.register-form-border {
    border-bottom: var(--gray) 2px Dotted;
}

.register-form-border-white {
    border-bottom: var(--gray) 2px Dotted;
}

/* MENU CONTAINER */
.search-input {
    width: 90%;
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.search-list-item {
    transition: all 0.3s ease-in-out;
}

.search-list-item:hover {
    background-color: var(--orange);
    color: white;
}

.options-container {
    width: 100%;
}

.option {
    font-weight: bold;
}

.text-under-menu {
    font-size: var(--fs-tiny);
    font-weight: bold;
    margin-top: .1rem;
}

.icon-allega {
    position: absolute;
    left: .1rem;
    color: var(--white);
}

.link-privacy {
    font-size: var(--fs-small);
}

/* AREA PERSONALE */

.is-my-account {
    background-color: var(--orange);
    color: var(--white);
    margin-top: 2rem;
}

.icon-top-absolute {
    position: absolute;
    top: -100%;
}

.crown-amm {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    color: var(--orange);
}

.add-member-form {
    background-color: var(--white);
    min-height: 100%;
    padding: .8rem;
}

.start-line {
    position: absolute;
    color: var(--orange);
    bottom: 0;
    font-size: .5rem;
    left: -1px;
    transform: translateY(45%);
}

.end-line {
    position: absolute;
    color: var(--orange);
    bottom: 0;
    font-size: .5rem;
    right: -1px;
    transform: translateY(45%);
}


/* HOMEPAGE */
/* Stile generale del menu */
.menu-dropdown {
    position: absolute;
    top: 100%;
    margin-top: 18px;
    left: 0px;
    width: 300px;
    background: var(--white);
    color: var(--black);
    z-index: 10000;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: auto;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Singola voce del menu */
.menu-item {
    display: flex;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3sease;
    justify-content: start;
}

.menu-item i {
    margin-right: 10px;
    font-size: 18px;
}


.menu-item:hover {
    background: var(--orange);
    color: var(--white);
}

.text-homepage {
    position: absolute;
    width: 100%;
    bottom: .1rem;
    color: var(--black);
    text-transform: uppercase;
    font-size: var(--fs-tiny);
    text-align: center;
}

.pop-notifica {
    position: absolute;
    background-color: var(--purple);
    width: 15px;
    height: 15px;
    left: 50%;
    top: 20%;
    border-radius: 50%;
}

.form-container-end {
    /*  position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding-right: 2rem; */
    width: 100%;
}



.input-container-tm {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.styled-input-tm {
    width: 100%;
    padding: .6rem;
    font-size: 1.2rem;
    /* Testo grande */
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid var(--white);
    background-color: var(--white);
    border-bottom: 2px solid var(--orange);
    text-align: center;
    outline: none;
}

.styled-input-tm::placeholder {
    color: var(--black);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

.placholder-black::placeholder {
    color: var(--black);
}

.styled-input-tm:focus {
    border-color: #ff6600;
}


/* .custom-checkbox {
    position: relative;
    cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 1px solid var(--black);
    background-color: var(--white);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: background-color 0.3s ease-in-out, border-color 0.3s;
}

.custom-checkbox input:checked + .checkmark {
    background-color: var(--orange);
    border-color: black;
} */

.form-check-input {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/* ORDINI  */
.ord-list-single {
    font-size: var(--fs-small);
}

.dettaglio-ordine {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    font-size: var(--fs-paragraph);
    font-weight: bold;
}

.icona-ordine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 300px;
}



/* LE MIE MACCHINE */

.container-qr-code {
    height: 100%;
}

.btn-qr {
    padding: .5rem;
    background-color: var(--grey);
    color: var(--white);
    border-radius: 10px;
    border: 1px solid var(--grey);
}

.spezzettato {
    width: 200px;
    height: 200px;
    background: var(--white);
    position: relative;

    /* Maschera per spezzettare i bordi */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M5,0 H25 V5 H5 Z M35,0 H55 V5 H35 Z M75,0 H95 V5 H75 Z M95,5 H100 V25 H95 Z M95,35 H100 V55 H95 Z M95,75 H100 V95 H95 Z M95,95 H75 V100 H95 Z M55,95 H35 V100 H55 Z M25,95 H5 V100 H25 Z M0,95 H5 V75 H0 Z M0,55 H5 V35 H0 Z M0,25 H5 V5 H0 Z" fill="white"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M5,0 H25 V5 H5 Z M35,0 H55 V5 H35 Z M75,0 H95 V5 H75 Z M95,5 H100 V25 H95 Z M95,35 H100 V55 H95 Z M95,75 H100 V95 H95 Z M95,95 H75 V100 H95 Z M55,95 H35 V100 H55 Z M25,95 H5 V100 H25 Z M0,95 H5 V75 H0 Z M0,55 H5 V35 H0 Z M0,25 H5 V5 H0 Z" fill="white"/></svg>');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.id-dettaglio {
    position: absolute;
    width: 65%;
    right: -.5rem;
}

.macc-id {
    background-color: var(--orange);
    font-weight: bold;
}

.macc img {
    width: 100%;
    max-width: 100%;
}

/* .trash-macc {
    position: absolute;
    top: .5rem;
    right: .5rem;
} */

.camera-macc {
    position: absolute;
    bottom: 0;
    right: 0;
}

.dettaglio-mcc-content {
    color: var(--black);
}

/* CONSUMABILI */
.number-cart {
    position: absolute;
    background-color: var(--orange);
    width: .5rem;
    height: .5rem;
    padding: .5rem;
    top: -.5rem;
    left: calc(50% - .5rem);
    font-size: .6rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.total-container {
    display: flex;
    justify-content: end;
}

.container-altri-prod {
    display: flex;
    justify-content: end;
    align-items: end;
}

.btn-altri-prodotti {
    color: var(--white);
    text-align: center;
    width: 100%;
    padding: 1rem;
    border: var(--orange) 1px solid;
    font-size: .7rem;
    font-weight: bold;
    border: 1px solid var(--orange);
}

.btn-termina-paga {
    color: var(--white);
    text-align: center;
    width: 100%;
    padding: 1rem;
    font-size: .7rem;
    font-weight: bold;
    border: 1px solid var(--orange);
}

.flying-cart-riep {
    position: absolute;
    top: -1rem;
    left: .5rem;
}

.asst-textarea textarea {
    border-radius: 10px;
    border: 1px solid var(--gray);
}

.btn-rich-action {
    color: var(--white);
    text-align: center;
    width: 100%;
    padding: .8rem;
    font-size: .9rem;
}
.btn-send-rich {
    border: 1px solid var(--purple);
}

.btn-cancel-rich {
    border: 1px solid var(--orange);
}

.btn-edit-rich {
    border: 1px solid var(--grey);
}

.macc-id-absolute {
    position: absolute;
    top: 20%;
    right: 0;
    width: 50%;
    background-color: var(--orange);
    color: var(--white);
    font-weight: bold;
}

/* ASSITENZA MANUTENZIONE */

.fumetto {
    position: absolute;
    bottom: 0;
    right: 1rem;
}

.area-allegato {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--purple);
    background-color: var(--light-pink);
}

.btn-prev {
    background-color: var(--white);
    color: var(--black);
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    border: var(--orange) 1px solid;
    font-size: .5rem;
    font-weight: bold;
    border: 1px solid var(--orange);
}

.btn-richiesta-annullata {
    background-color: var(--red);
    color: var(--white);
    text-align: center;
    max-width: 80%;
    width: 100%;
    padding: 0.5rem;
    border: var(--white) 1px solid;
    font-weight: bold;
    border: 1px solid var(--orange);
}

.btn-elimina-account {
    background-color: var(--red);
    color: var(--white);
    text-align: center;
    padding: 0.5rem;
    border: var(--white) 1px solid;
    font-weight: bold;
    border: 1px solid var(--orange);
}

/* .fatt-tot {
    position: absolute;
    right: .5rem;
    bottom: 1rem;
} */


/* CORSI */
.number-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--white);
    width: fit-content;
}

.number-input input {
    width: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: none;
    color: var(--white);
    padding: 10px 5px;
    outline: none;
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
}

.number-input button {
    background: var(--white);
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    color: var(--black);
    border-radius: 0px 0px 0px 0px !important;
}

.number-input button:disabled {
    color: var(--gray);
    cursor: not-allowed;
}

.number-input-black {
    display: flex;
    align-items: center;
    width: fit-content;
    background: var(--black);
}

.number-input-black input {
    width: 45px;
    text-align: center;
    font-size: var(--fs-paragraph);
    border: none;
    background: var(--light-pink);
    color: var(--black);
    padding: .4rem .8rem;
    outline: none;
    border-left: 1px solid var(--black);
    border-right: 1px solid var(--black);
}

.number-input-black button {
    background: var(--black);
    border: 1px solid var(--black);
    padding: .4rem .8rem;
    font-size: var(--fs-paragraph);
    cursor: pointer;
    color: var(--white);
    border-radius: 3px;
}

.number-input-black button:disabled {
    color: var(--gray);
    cursor: not-allowed;
}

.fatture-checkbox {
    appearance: none;
    width: 15px;
    height: 15px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.fatture-checkbox:checked::after {
    content: "✔";
    /* Simbolo di spunta */
    font-size: 1rem;
    color: var(--orange);
    /* La "V" è trasparente */
    display: flex;
}

.qrcode-checkbox {
    appearance: none;
    width: 15px;
    height: 15px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.qrcode-checkbox:checked::after {
    content: "✔";
    color: var(--orange);
    display: flex;
}


.corsi-post-msg {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
}

.btn-invio-spesa {
    padding: 1rem;
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    font-size: var(--fs-title);
}

.flying-bag {
    position: absolute;
    top: -210%;
    left: -65%;
}

/* BOXES */
.adaptive-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
}

.container-boxes .box-general {
    margin-top: 1rem;
}

.box-general {
    position: relative;
}

.content-container-box {
    display: flex;
    align-items: end;
    width: 100%;
    font-size: var(--fs-small);
}

.center-content-box {
    margin-left: 1.5rem;
}

.box-general {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--orange);
    padding: .6rem;
    cursor: pointer;
}

.box-general:hover {
    background-color: var(--orange);
    color: var(--black);
}

.box-selected {
    background-color: var(--orange);
    color: var(--black);
}

.title-box,
.content-box,
.content-box-end {
    font-size: var(--fs-paragraph);
}

/* .content-box,.content-box-end{
    margin-top: .2rem;
} */

.home-icon-container {
    max-width: 80px;
}

/* LOADER */

#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    cursor: crosshair;
    background: #333;
    top: 0;
}

#loader-qr {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    cursor: crosshair;
    background: #333;
    top: 0;
}

#loader.active,
#loader-qr.active {
    opacity: 0.5;
    visibility: visible;
}

#error-qr {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    cursor: crosshair;
    background: var(--red);
    top: 0;
}

#error.active,
#error-qr.active {
    opacity: .7;
    visibility: visible;
}

.loader-icon {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
}

.loader-icon:before {
    display: block;
    width: auto;
    height: auto;
    margin: 0px;
    box-sizing: content-box;
    border: 0px solid var(--orange);
    border-color: var(--orange) transparent var(--orange) transparent;
    animation: loader-icon 3.7s infinite;
    font-size: 100px;
    color: #fff;
}

@keyframes loader-icon {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

/* POPUP */
.ones-popup {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

#ones-popup {
    z-index: 10001;
}

.ones-popup-background {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0007;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}


/* FROM BOOTSTRAP */

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}



.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-6 {
    margin-top: 4rem !important;
}

.mt-7 {
    margin-top: 5rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem !important;
    }

    .fs-2 {
        font-size: 2rem !important;
    }

    .fs-3 {
        font-size: 1.75rem !important;
    }

    .fs-4 {
        font-size: 1.5rem !important;
    }
}

.rounded {
    border-radius: var(--bs-border-radius) !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.rounded-1 {
    border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
    border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
    border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4 {
    border-radius: var(--bs-border-radius-xl) !important;
}

.rounded-5 {
    border-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-pill {
    border-radius: 50rem !important
}

.rounded-circle {
    border-radius: 50% !important;
}

.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-1 {
    border-width: 1px !important
}

.border-2 {
    border-width: 2px !important
}

.border-3 {
    border-width: 3px !important
}

.border-4 {
    border-width: 4px !important
}

.border-5 {
    border-width: 5px !important
}

.border-0 {
    border: 0 !important;
}

.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-top-0 {
    border-top: 0 !important;
}

.border-end {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end-0 {
    border-right: 0 !important;
}

.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-start {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-start-0 {
    border-left: 0 !important;
}

.border-orange {
    border-color: var(--orange) !important;
}

.border-blue {
    border-color: var(--blue) !important;
}

.border-red {
    border-color: var(--red) !important;
}

.border-green {
    border-color: var(--green) !important;
}

.border-light-blue {
    border-color: var(--light-blue-home) !important;
}

.border-yellow {
    border-color: var(--yellow) !important;
}

.border-white {
    border-color: var(--white) !important;
}

.border-gray {
    border-color: var(--gray) !important;
}

.border-ocher {
    border-color: var(--ocher) !important;
}

.border-purple {
    border-color: var(--purple) !important;
}

.border-pink {
    border-color: var(--pink-home) !important;
}

.border-black {
    border-color: var(--black) !important;
}

.border-transparent {
    border-color: transparent !important;
}

/* BORDERS */
.border-bottom-dotted {
    border-bottom: 2px dotted !important;
}

.border-bottom-dashed {
    border-bottom: 2px dashed !important;
}

/* ASPECT RATIO */

.aspect-ratio-1 {
    aspect-ratio: 1;
}

/* CUSTOM */

.menu-icon-max-width {
    max-width: 150px;
}

#searchBoxResults {
    z-index: 10000 !important;
}

/* MEDIA QUERY SIZES */

@media (min-width: 768px) {

    .w-md-25 {
        width: 25% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }
}

/* IMAGES PREVIEWS */
.preview {
    width: 96px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #000A;
    margin: 0px 10px;
    padding: 8px;
    position: relative;
}

.preview-delete-button::before {
    content: 'x';
    position: absolute;
    width: 18px;
    height: 18px;
    right: 0px;
    top: 1px;
    z-index: 10;
    display: block;
    border-radius: 20px;
    color: black;
    font-weight: bold;
    text-align: center;
    font-size: 13px;
    background-color: white;
    border: 1px solid black;
}

/*FORM ERRORS*/

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 0.875em;
    color: #dc3545
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: rgba(220, 53, 69, .9);
    border-radius: .25rem
}

.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip,
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip {
    display: block
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25)
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: #dc3545
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: 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 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}

.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25)
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
    border-color: #dc3545
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
    background-color: #dc3545
}

.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25)
}

.was-validated .form-check-input:invalid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
    color: #dc3545
}

.form-check-inline .form-check-input~.invalid-feedback {
    margin-left: .5em
}

.was-validated .input-group .form-control:invalid,
.input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
    z-index: 2
}

.was-validated .input-group .form-control:invalid:focus,
.input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {
    z-index: 3
}