body {
    margin: 0;
    padding: 0;
}

    body ::-webkit-scrollbar {
        width: 0px; /* Width of the vertical scrollbar */
        height: 0px; /* Height of the horizontal scrollbar */
    }


.required-large {
    border: 0.1rem solid var(--colorred) !important;
}

.required {
    border: 0.1rem solid var(--colorred) !important;
}

.main{
    height:auto;
    width:100%;
    display: grid;
    grid-template-rows: 6rem auto auto;
    gap: 0.5rem;
    padding: 0.5rem;
}

.input-calendar {
    background: url(../../svg/calendar_input.svg) 98% no-repeat;
    background-size: 1.7rem 1.7rem;
}

.input-mail {
    background: url(../../svg/at_input.svg) 98% no-repeat;
    background-size: 1.7rem 1.7rem;
}

.input-phone {
    background: url(../../svg/phone_input.svg) 98% no-repeat;
    background-size: 1.7rem 1.7rem;
}

@media screen and (min-width: 1690px) {
    .main-title {
        display: grid;
        grid-template-columns: auto 25rem;
        font-family: var(--fuenteLight);
        font-size: 1.5rem;
        color: var(--color2);
        height: 3rem;
    }

    .main-title-button {
        order: 0;
    }

    .main-title-search {
        display: grid;
        grid-template-columns: auto 2.5rem;
        order: 1;
    }

    .main-title-button-search {
        height: 2.5rem;
        width: 2.5rem;
        border: 0.1rem solid var(--color1);
        cursor: pointer;
        background: var(--color4E) url(../svg/search-button.svg);
        background-size: 1.5rem;
        background-position: 0.4rem 0.4rem;
        background-repeat: no-repeat;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .main-title-search-text {
        height: 2.5rem;
        width: 100%;
        border: 0.1rem solid var(--color1);
        font-size: 0.8rem;
        padding-left: 0.8rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }

        .main-title-search-text:hover {
            box-shadow: rgba(--color4) 0px 1px 4px;
        }

        .main-title-search-text::-webkit-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text::-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-ms-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

    .image-search {
        background: var(--colorWhite) url(../../svg/search.svg) 97% no-repeat;
        background-size: 1.7rem 1.7rem;
    }

    .main-body {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        height: max-content;
        width: 100%;
    }

        .main-body div span {
            font-family: var(--fuenteLight);
            font-size: 1rem;
            color: var(--colorGray);
        }

    .main-body-1 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 1;
    }

    .main-body-2 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 2;
    }

    .main-body-3 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 3;
    }

    .main-body-4 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 4;
    }

    .info-text {
        height: 3rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

    .info-text-large {
        height: 18rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

        .info-text:hover,
        .info-text:focus,
        .info-text-large:hover,
        .info-text-large:focus {
            border: 0.1rem solid var(--color1);
        }

    .info-text::-webkit-input-placeholder,
    .info-text-large::-webkit-input-placeholder {
        color: var(--colorPwd);
    }

    .info-text:-moz-placeholder,
    .info-text-large:-moz-placeholder {
        color: var(--colorPwd);
    }

    .info-text::-moz-placeholder,
    .info-text-large::-moz-placeholder {
        color: var(--colorPwd);
    }

    .info-text:-ms-input-placeholder,
    .info-text-large:-ms-input-placeholder {
        color: var(--colorPwd);
    }

    .info-wbutton {
        display: grid;
        grid-template-columns: auto 3rem;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 6;
    }

    .info-ImageUpload {
        height: 3rem;
        width: 3rem;
        border: 0.1rem solid var(--color2E);
        cursor: pointer;
        background: transparent url(../svg/arrow-to-top.svg);
        background-size: 2.5rem;
        background-position: 0.2rem 0.2rem;
        background-repeat: no-repeat;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .info_btn {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: max-content;
        grid-column-start: span 6;
    }

    .info-btn-save {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorgreen);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorgreen);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-save:hover {
            background-color: var(--colorgreen);
            color: var(--colorWhite);
        }

        .info-btn-update {
            height: 2.5rem;
            width: 7rem;
            background-color: var(--colorWhite);
            border: 0.1rem solid var(--colororange);
            cursor: pointer;
            font-family: var(--fuenteLight);
            font-size: 0.8rem;
            text-align: center;
            text-decoration: none;
            color: var(--colororange);
            border-radius: 0.2rem;
            -webkit-transition: 0.25s;
            transition: 0.25s;
        }

            .info-btn-update:hover {
                background-color: var(--colororange);
                color: var(--colorWhite);
            }

            .info-btn-cancel {
                height: 2.5rem;
                width: 7rem;
                background-color: var(--colorWhite);
                border: 0.1rem solid var(--colorred);
                cursor: pointer;
                font-family: var(--fuenteLight);
                font-size: 0.8rem;
                text-align: center;
                text-decoration: none;
                color: var(--colorred);
                border-radius: 0.2rem;
                -webkit-transition: 0.25s;
                transition: 0.25s;
            }

                .info-btn-cancel:hover {
                    background-color: var(--colorred);
                    color: var(--colorWhite);
                }


    .btnNew {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        height: 2.5rem;
        width: 10rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/add-square.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.5rem 1.5rem;
        background-position: 0.9rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }

    .btnKits {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        height: 2.5rem;
        width: 12rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/qr.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.5rem 1.5rem;
        background-position: 0.9rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }
}

/* Schermi Desktop o Portatili */
@media screen and (min-width: 1280px) and (max-width: 1689px) {
    .main-title {
        display: grid;
        grid-template-columns: auto 25rem;
        font-family: var(--fuenteLight);
        font-size: 1.5rem;
        color: var(--color2);
        padding: 0.3rem 0 0 1rem;
        height: 3rem;
    }

    .main-title-button {
        order: 0;
    }

    .main-title-search {
        display: grid;
        grid-template-columns: auto 2.5rem;
        order: 1;
    }

    .main-title-button-search {
        height: 2.5rem;
        width: 2.5rem;
        border: 0.1rem solid var(--color1);
        cursor: pointer;
        background: var(--color4E) url(../svg/search-button.svg);
        background-size: 1.5rem;
        background-position: 0.4rem 0.4rem;
        background-repeat: no-repeat;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .main-title-search-text {
        height: 2.5rem;
        width: 100%;
        border: 0.1rem solid var(--color1);
        font-size: 0.8rem;
        padding-left: 0.8rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }

        .main-title-search-text:hover {
            box-shadow: rgba(--color4) 0px 1px 4px;
        }

        .main-title-search-text::-webkit-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text::-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-ms-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

    .image-search {
        background: var(--colorWhite) url(../../svg/search.svg) 97% no-repeat;
        background-size: 1.7rem 1.7rem;
    }


    .main-body {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        height: max-content;
        width: 100%;
    }

        .main-body div span {
            font-family: var(--fuenteLight);
            font-size: 1rem;
            color: var(--colorGray);
        }

    .main-body-1 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 1;
    }

    .main-body-2 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 2;
    }

    .main-body-3 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 3;
    }

    .main-body-4 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 4;
    }

    .info-text {
        height: 3rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

    .info-text-large {
        height: 18rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

        .info-text:hover,
        .info-text:focus,
        .info-text-large:hover,
        .info-text-large:focus {
            border: 0.1rem solid var(--color1);
        }

        .info-text::-webkit-input-placeholder,
        .info-text-large::-webkit-input-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-moz-placeholder,
        .info-text-large:-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text::-moz-placeholder,
        .info-text-large::-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-ms-input-placeholder,
        .info-text-large:-ms-input-placeholder {
            color: var(--colorPwd);
        }

    .info-wbutton {
        display: grid;
        grid-template-columns: auto 3rem;
        gap: 0.3rem;
    }

    .info-ImageUpload {
        height: 3rem;
        width: 3rem;
        border: 0.1rem solid var(--color2E);
        cursor: pointer;
        background: transparent url(../svg/arrow-to-top.svg);
        background-size: 2.5rem;
        background-position: 0.2rem 0.2rem;
        background-repeat: no-repeat;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .info_btn {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: max-content;
        grid-column-start: span 6;
    }

    .info-btn-save {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorgreen);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorgreen);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-save:hover {
            background-color: var(--colorgreen);
            color: var(--colorWhite);
        }

    .info-btn-update {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colororange);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colororange);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-update:hover {
            background-color: var(--colororange);
            color: var(--colorWhite);
        }

    .info-btn-cancel {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorred);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorred);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-cancel:hover {
            background-color: var(--colorred);
            color: var(--colorWhite);
        }


    .btnNew {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        height: 2.5rem;
        width: 10rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/add-square.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.5rem 1.5rem;
        background-position: 0.9rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }

    .btnKits {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        height: 2.5rem;
        width: 12rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/qr.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.5rem 1.5rem;
        background-position: 0.9rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }
}

/* Tablet in modalità horizontal */
@media screen and (min-width: 737px) and (max-width: 1279px) {
    .main-title {
        display: grid;
        grid-template-rows: 3rem 3rem;
        font-family: var(--fuenteLight);
        font-size: 1.3rem;
        color: var(--color2);
        padding: 0.5rem 0 0 0.9rem;
        height: 6rem;
    }

    .main-title-button {
        order: 1;
    }

    .main-title-search {
        display: grid;
        grid-template-columns: auto 2.5rem;
        order: 0;
    }

    .main-title-button-search {
        height: 2.5rem;
        width: 2.5rem;
        border: 0.1rem solid var(--color1);
        cursor: pointer;
        background: var(--color4E) url(../svg/search-button.svg);
        background-size: 1.5rem;
        background-position: 0.4rem 0.4rem;
        background-repeat: no-repeat;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .main-title-search-text {
        height: 2.5rem;
        width: 100%;
        border: 0.1rem solid var(--color1);
        font-size: 0.8rem;
        padding-left: 0.8rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }

        .main-title-search-text:hover {
            box-shadow: rgba(--color4) 0px 1px 4px;
        }

        .main-title-search-text::-webkit-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text::-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-ms-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

    .image-search {
        background: var(--colorWhite) url(../../svg/search.svg) 97% no-repeat;
        background-size: 1.7rem 1.7rem;
    }


    .main-body {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        height: max-content;
        width: 100%;
    }

        .main-body div span {
            font-family: var(--fuenteLight);
            font-size: 1rem;
            color: var(--colorGray);
        }

    .main-body-1 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 1;
    }

    .main-body-2 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 2;
    }

    .main-body-3 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 3;
    }

    .main-body-4 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 4;
    }

    .info-text {
        height: 3rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

    .info-text-large {
        height: 18rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

        .info-text:hover,
        .info-text:focus,
        .info-text-large:hover,
        .info-text-large:focus {
            border: 0.1rem solid var(--color1);
        }

        .info-text::-webkit-input-placeholder,
        .info-text-large::-webkit-input-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-moz-placeholder,
        .info-text-large:-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text::-moz-placeholder,
        .info-text-large::-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-ms-input-placeholder,
        .info-text-large:-ms-input-placeholder {
            color: var(--colorPwd);
        }

    .info-wbutton {
        display: grid;
        grid-template-columns: auto 2rem;
        gap: 0.3rem;
    }

    .info-ImageUpload {
        height: 2rem;
        width: 2rem;
        border: 0.1rem solid var(--color2E);
        cursor: pointer;
        background: transparent url(../svg/arrow-to-top.svg);
        background-size: 1.5rem;
        background-position: 0.2rem 0.2rem;
        background-repeat: no-repeat;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .info_btn {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: max-content;
        grid-column-start: span 6;
    }

    .info-btn-save {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorgreen);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorgreen);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-save:hover {
            background-color: var(--colorgreen);
            color: var(--colorWhite);
        }

    .info-btn-update {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colororange);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colororange);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-update:hover {
            background-color: var(--colororange);
            color: var(--colorWhite);
        }

    .info-btn-cancel {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorred);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorred);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-cancel:hover {
            background-color: var(--colorred);
            color: var(--colorWhite);
        }


    .btnNew {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 8rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/add-square.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }

    .btnKits {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 9rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/qr.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }
    }
}

/* Tablet in modalità verticale */
@media screen and (min-width: 481px) and (max-width: 736px) {
    .main-title {
        display: grid;
        grid-template-rows: 3rem 3rem;
        font-family: var(--fuenteLight);
        font-size: 1.3rem;
        color: var(--color2);
        padding: 0.5rem 0 0 0.9rem;
        height: 6rem;
    }

    .main-title-button {
        order: 1;
    }

    .main-title-search {
        display: grid;
        grid-template-columns: auto 2.5rem;
        order: 0;
    }

    .main-title-button-search {
        height: 2.5rem;
        width: 2.5rem;
        border: 0.1rem solid var(--color1);
        cursor: pointer;
        background: var(--color4E) url(../svg/search-button.svg);
        background-size: 1.5rem;
        background-position: 0.4rem 0.4rem;
        background-repeat: no-repeat;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .main-title-search-text {
        height: 2.5rem;
        width: 100%;
        border: 0.1rem solid var(--color1);
        font-size: 0.8rem;
        padding-left: 0.8rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }

        .main-title-search-text:hover {
            box-shadow: rgba(--color4) 0px 1px 4px;
        }

        .main-title-search-text::-webkit-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text::-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-ms-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

    .image-search {
        background: var(--colorWhite) url(../../svg/search.svg) 97% no-repeat;
        background-size: 1.7rem 1.7rem;
    }


    .main-body {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        height: max-content;
        width: 100%;
    }

        .main-body div span {
            font-family: var(--fuenteLight);
            font-size: 1rem;
            color: var(--colorGray);
        }

    .main-body-1 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 1;
    }

    .main-body-2 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 2;
    }

    .main-body-3 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 3;
    }

    .main-body-4 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: calc(100dv / 6);
        grid-column-start: span 4;
    }

    .info-text {
        height: 3rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

    .info-text-large {
        height: 18rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

        .info-text:hover,
        .info-text:focus,
        .info-text-large:hover,
        .info-text-large:focus {
            border: 0.1rem solid var(--color1);
        }

        .info-text::-webkit-input-placeholder,
        .info-text-large::-webkit-input-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-moz-placeholder,
        .info-text-large:-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text::-moz-placeholder,
        .info-text-large::-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-ms-input-placeholder,
        .info-text-large:-ms-input-placeholder {
            color: var(--colorPwd);
        }

    .info-wbutton {
        display: grid;
        grid-template-columns: auto 2rem;
        gap: 0.3rem;
    }

    .info-ImageUpload {
        height: 2rem;
        width: 2rem;
        border: 0.1rem solid var(--color2E);
        cursor: pointer;
        background: transparent url(../svg/arrow-to-top.svg);
        background-size: 1.5rem;
        background-position: 0.2rem 0.2rem;
        background-repeat: no-repeat;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .info_btn {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: max-content;
        grid-column-start: span 6;
    }

    .info-btn-save {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorgreen);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorgreen);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-save:hover {
            background-color: var(--colorgreen);
            color: var(--colorWhite);
        }

    .info-btn-update {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colororange);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colororange);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-update:hover {
            background-color: var(--colororange);
            color: var(--colorWhite);
        }

    .info-btn-cancel {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorred);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        text-decoration: none;
        color: var(--colorred);
        border-radius: 0.2rem;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }

        .info-btn-cancel:hover {
            background-color: var(--colorred);
            color: var(--colorWhite);
        }


    .btnNew {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 8rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/add-square.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }

    .btnKits {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 9rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/qr.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }
}

/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {
    .main-title {
        display: grid;
        grid-template-rows: 3rem 3rem;
        font-family: var(--fuenteLight);
        font-size: 1.3rem;
        color: var(--color2);
        padding: 0.5rem 0 0 0.9rem;
        height: 6rem;
    }

    .main-title-button {
        order: 1;
    }

    .main-title-search {
        display: grid;
        grid-template-columns: auto 2.5rem;
        order: 0;
    }

    .main-title-button-search {
        height: 2.5rem;
        width: 2.5rem;
        border: 0.1rem solid var(--color1);
        cursor: pointer;
        background: var(--color4E) url(../svg/search-button.svg);
        background-size: 1.5rem;
        background-position: 0.4rem 0.4rem;
        background-repeat: no-repeat;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .main-title-search-text {
        height: 2.5rem;
        width: 100%;
        border: 0.1rem solid var(--color1);
        font-size: 0.8rem;
        padding-left: 0.8rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
    }

        .main-title-search-text:hover {
            box-shadow: rgba(--color4) 0px 1px 4px;
        }

        .main-title-search-text::-webkit-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text::-moz-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

        .main-title-search-text:-ms-input-placeholder {
            color: var(--color1D);
            font-size: 0.8rem;
        }

    .image-search {
        background: var(--colorWhite) url(../../svg/search.svg) 97% no-repeat;
        background-size: 1.7rem 1.7rem;
    }


    .main-body {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0.3rem;
        padding: 0.5rem;
        height: max-content;
        width: 100%;
    }

        .main-body div span {
            font-family: var(--fuenteLight);
            font-size: 0.8rem;
            color: var(--colorGray);
        }

    .main-body-1,
    .main-body-2,
    .main-body-3,
    .main-body-4 {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: 100%;
    }

    .info-text {
        height: 2rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.6rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

    .info-text-large {
        height: 15rem;
        width: 100%;
        border: 0.1rem solid var(--color2E);
        font-size: 0.8rem;
        padding-left: 0.7rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
    }

        .info-text:hover,
        .info-text:focus,
        .info-text-large:hover,
        .info-text-large:focus {
            border: 0.1rem solid var(--color1);
        }

        .info-text::-webkit-input-placeholder,
        .info-text-large::-webkit-input-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-moz-placeholder,
        .info-text-large:-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text::-moz-placeholder,
        .info-text-large::-moz-placeholder {
            color: var(--colorPwd);
        }

        .info-text:-ms-input-placeholder,
        .info-text-large:-ms-input-placeholder {
            color: var(--colorPwd);
        }

    .info-wbutton {
        display: grid;
        grid-template-columns: auto 2rem;
        gap: 0.3rem;
    }

    .info-ImageUpload {
        height: 2.5rem;
        width: 2rem;
        border: 0.1rem solid var(--color2E);
        cursor: pointer;
        background: transparent url(../svg/arrow-to-top.svg);
        background-size: 1.5rem;
        background-position: 0.2rem 0.2rem;
        background-repeat: no-repeat;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .info_btn {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: max-content;
    }

    .info-btn-save {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorgreen);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        color: var(--colorgreen);
        border-radius: 0.2rem;
    }

    .info-btn-update {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colororange);
        cursor: pointer;
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        color: var(--colororange);
        border-radius: 0.2rem;
    }

    .info-btn-cancel {
        height: 2.5rem;
        width: 7rem;
        background-color: var(--colorWhite);
        border: 0.1rem solid var(--colorred);
        font-family: var(--fuenteLight);
        font-size: 0.8rem;
        text-align: center;
        color: var(--colorred);
        border-radius: 0.2rem;
    }


    .btnNew {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 8rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/add-square.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }

    .btnKits {
        display: inline-block;
        background-color: var(--color4);
        color: var(--colorWhite);
        font-family: var(--fuenteLight);
        font-size: 0.7rem;
        height: 2.2rem;
        width: 9rem;
        cursor: pointer;
        padding-left: 2rem;
        border-radius: 0.5rem;
        background-image: url('../svg/qr.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 1.3rem 1.3rem;
        background-position: 0.7rem 50%;
        border-style: none;
        border-color: inherit;
        border-width: medium;
    }
}