.back-orange-esp-bar{
    background-color: rgba(255, 131, 0, 0.6);
}

.progress-orange-esp-bar{
    background-color: rgba(255, 131, 0, 1);
}

.black-font-bold-esp{
    font-weight: 700;
    font-size: 16px;
    color: #202020;
}

.black-font-table {
    font-weight: 500;
    font-size: 18px;
    color: #202020;
}

.black-font-semibold{
    font-weight: 600;
    font-size: 14px;
    color: #202020;
}

.black-font-semibold-title{
    font-weight: 600;
    font-size: 20px;
    color: #202020;
}

.yellow-price{
    font-weight: 700;
    font-size: 24px;
    color: #FF8300;
}

.yellow-pref{
    font-weight:700;
    font-size: 14px;
    color: #FF8300;
}

.font-light-gray{
    font-weight: 400;
    font-size: 14px;
    color: #CFCFCF;
}

.btn-circle{
    border-radius: 50%;
    border: 1px solid #656565;
    font-size: 20px;
    padding: 1px;
    text-align: center;
    width: 35px;
    height: 35px;
    background-color: white;
}

.counter-box{
    border:1px solid #CFCFCF;
    display:inline-block;
    width: 50px;
    text-align: center;
    border-radius: 12px;
}

.black-price{
    font-weight: 600;
    font-size: 18px;
    color: #202020;
}

.green-font-prod{
    font-weight: 500;
    font-size: 16px;
    color: #00B731;
}

.black-font-time{
    font-weight: 500;
    font-size: 14px;
    color: #202020;
}

.yellow-font-prod{
    font-weight: 500;
    font-size: 16px;
    color: #FFAA00;
}

.btn-add-to-cart{
    margin: 0 auto;
    width: 90%;
    display: block;
    height: 45px;
    border-radius: 22px;
    background-color: #FF8300;
    color:white;
    font-family: Arial;
    font-size: 16px;
    background-image: linear-gradient(to right, #FFAA00 , #FF8300);
    border: none;
}

.gray-font{
    font-weight: 400;
    font-size: 16px;
    color: #656565 !important;
}

.black-font-big{
    font-weight: 600;
    font-size: 30px;
    color: #202020;
}

.gray-btn{
    height: 36px;
    color: #656565;
    font-weight: 500;
    font-size: 16px;
    padding: 5px;
    border: 1px solid #656565;
    border-radius: 20px;
}

.yellow-btn{
    height: 36px;
    color: #FF8300;
    font-weight: 500;
    font-size: 16px;
    padding: 5px;
    border: 1px solid #FF8300;
    border-radius: 20px;
}

.color-back-purple {
    background-color: #490E67 !important;
}

.color-back-login {
    background-color: #F5F5F5 !important;
}

.font-wellcome{
    font-weight: 500;
    font-size: 24px;
    color: var(--text-color-dark);
}

.font-purple-login{
    font-weight: 400;
    font-size: 16px;
    color: #490E67;
}

.loginsize {
    width: 500px;
    height: 500px;
    border-radius:12px;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

.color-back-white{
    background-color: #FFFFFF;
}
.color-back-marelli{
    background-color: #FFD300 !important;
    box-shadow: none !important;
}

.round-border-form{
    border-radius: 6px;
}

.btn-login{
    background-color: var(--project-base-color);
    height: 50px;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    border: none;
}

.containerLog {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    padding-top: 0px;
    margin-top: 0px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.containerLog input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmarkLog {
    position: absolute;
    top: 4px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #CFCFCF;
    border: none;
    border-radius: 0px;
}

/* On mouse-over, add a grey background color */
.containerLog:hover input ~ .checkmarkLog {
    background-color: #ccc;
}

/* When the checkbox is checked, add a orange background */
.containerLog input:checked ~ .checkmarkLog {
    background-color: var(--project-base-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkLog:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerLog input:checked ~ .checkmarkLog:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerLog .checkmarkLog:after {
    left: 5px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn-recover-psw{
    border:none;
    color: var(--grey);
    background-color: white;
    text-decoration: underline;
}

.font-support{
    font-weight: 400;
    font-size: 14px;
    text-decoration: underline;
}

.placeholder-prod{
    border: 3px dashed #AEAEAE;
    border-radius: 6px;
    width: 460px;
    height: 250px;
}

.font-title-placeholder{
    font-weight: 600;
    font-size: 16px;
    color: #656565;
}

.font-subtitle-placeholder{
    font-weight: 400;
    font-size: 14px;
    color: #AEAEAE;
    padding-left: 20px;
    padding-right: 20px;
}

.black-title{
    font-weight: 600;
    font-size: 20px;
    color: #202020;
}

.cnt-purple{
    font-weight: 600;
    font-size: 40px;
    color: #840088;
}

.gray-text{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.color-font-orange{
    font-weight: 600;
    font-size: 12px;
    color: #FF8300;
}

.title-table-gray{
    font-weight: 400;
    font-size: 14px;
    color: #CFCFCF;
}

.black-font-table{
    font-weight: 500;
    font-size: 18px;
    color: #202020;
}

.color-font-dark-gray{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.btn-search-plate{
    font-weight: 500;
    font-size: 14px;
    color: #840088;
    background-color: white;
    border: 1px solid #840088;
    border-radius: 20px;
}

.black-font-info-tecniche{
    font-weight:500;
    font-size: 14px;
    color: #202020;
}

.prezzo-barrato{
    font-weight: 500;
    font-size: 14px;
    text-decoration: line-through;
    color: #AEAEAE;
}

.btn-detail{
    font-weight: 500;
    font-size: 16px;
    color: #AEAEAE;
    background-color: white;
    border: 1px solid #AEAEAE;
    border-radius: 20px;
}

.color-font-purple{
    font-weight: 500;
    font-size: 16px;
    color: #840088;
}

.color-gray-support{
    font-weight: 500;
    font-size: 16px;
    color: #656565;
}

.color-black-support{
    font-weight: 600;
    font-size: 16px;
    color: #202020;
}

.color-status-dark-gray{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.color-font-black{
    font-weight: 500;
    font-size: 18px;
    color: #202020;
}

.first-col-table{
    font-weight: 500;
    font-size: 18px;
    color: #202020;
}

.color-font-price{
    font-weight: 600;
    font-size: 14px;
    color: #202020;
}

.color-status-dark-gray{
    font-weight: 600;
    font-size: 14px;
    color: #656565;
}

.color-status-purple{
    font-weight: 600;
    font-size: 14px;
    color: #840088;
}

.color-status-yellow{
    font-weight: 600;
    font-size: 14px;
    color: #FF8300;
}

.color-status-light-gray{
    font-weight: 600;
    font-size: 14px;
    color: #CFCFCF;
}

.font-produttore{
    font-weight: 500;
    font-size: 16px;
    color: #202020;
}

.font-codice{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.subtitle-font-prod{
    font-weight: 400;
    font-size: 14px;
    color: #202020;
}

.font-promo-table{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.color-font-grey-promo{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.font-promo{
    font-weight: 500;
    font-size: 16px;
    color: #656565;
}

.font-filter{
    font-weight: 500;
    font-size: 14px;
    color: #202020;
}

.font-filter-link{
    font-weight: 500;
    font-size: 14px;
    color: #202020;
    text-decoration: underline;
}

.font-reso{
    font-weight: 600;
    font-size: 16px;
    color: #202020;
}

.font-reso-purple{
    font-weight: 600;
    font-size: 20px;
    color: #840088;
}

.color-btn-purple-resi{
    font-weight: 500;
    font-size: 16px;
    color: white;
    background-color: #840088;
    height: 40px;
    border-radius: 20px;
}

.color-btn-purple-resi:hover, .color-btn-purple:hover {
    color: white;
    background-color: #490E67;
}

.font-reso-table{
    font-weight: 400;
    font-size: 14px;
    color: #656565;
}

.color-font-yellow{
    font-weight: 600;
    font-size: 20px;
    color: #FF8300;
}

.btn-download-pdf{
    font-weight: 500;
    font-size: 14px;
    color: #840088;
    background-color: white;
    border-radius: 14px;
    height: 30px;
    border: 2px solid #840088;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-send-email-reso{
    font-weight: 400;
    font-size: 14px;
    color: white;
    background-color: #840088;
    border-radius: 14px;
    height: 30px;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-concludi-reso{
    font-weight: 500;
    font-size: 16px;
    color: white;
    background-color: #AEAEAE;
    border-radius: 18px;
    height: 40px;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

hr{
    border-top-color: #CFCFCF;
}

.font-reso-note{
    font-weight: 400;
    font-size: 14px;
    color: #202020;
}

.btn-download-doc{
    font-weight: 500;
    font-size: 16px;
    color: #656565;
    background-color: white;
    border-radius: 18px;
    height: 40px;
    border: 1px solid #656565;
}

.color-annulla{
    color: #AEAEAE;
    background-color: white;
    border: 1px solid #AEAEAE;
    border-radius: 18px;
}

.color-purple{
    color: white;
    background-color: #840088;
    border: none;
    border-radius: 18px;
}

.doc-link{
    padding: 5px;
}

.font-footer-menu{
    font-weight:400;
    font-size: 11px;
    color: #CFCFCF;
}

.font-link-footer-menu {
    font-weight:400;
    font-size: 11px;
    color: #CFCFCF;
    text-decoration: underline;
}

.helpM:hover{
    color: white !important;
}

.percentuale-verde{
    font-weight: 600;
    color: #00B731;
    font-size: 12px;
}

.percentuale-gialla{
    font-weight: 600;
    color: #FFAA00;
    font-size: 12px;
}

.red-border{
    border: 2px solid red !important;
    border-radius: 4px;
}

.purple-border{
    border: 2px solid #840088 !important;
    border-radius: 4px;
}

.orange-border{
    border: 2px solid #FF8300 !important;
    border-radius: 4px;
}

.black-info {
    font-weight:500;
    color:  black;
    font-size: 14px;
}

@media (min-width: 300px) {
    .banner-dashboard {
        height: 220px;
    }
}

@media (min-width: 500px) {
    .banner-dashboard {
        height: 320px;
    }
}

@media (min-width: 768px) {
    .banner-dashboard {
        height: 190px;
    }
}

@media (min-width: 992px) {
    .banner-dashboard {
        height: 200px;
    }
}

@media (min-width: 1100px) {
    .banner-dashboard {
        height: 220px;
    }
}

@media (min-width: 1300px) {
    .banner-dashboard {
        height: 240px;
    }
}


@media (min-width: 1600px) {
    .banner-dashboard {
        height: 280px;
    }
}

@media (min-width: 300px) {
    .placeholder-resi {
        width: 200px;
        padding-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .placeholder-resi {
        width: 400px;
        padding-bottom: 40px;
    }
}

.qty_container{
    background-color: #F8F8F8;
    border: 1px solid #CFCFCF;
    border-radius: 16px;
    width: 80%;
}

.btn-ddt {
    background-color: white;
    color: #840088;
    border: 1px solid #840088;
    border-radius: 6px;
    font-family: Arial;
    font-weight: 600;
    font-size: 14px;
}

.btn-ddt:hover{
    color: #840088;
    background-color: #F0F0F0;
}

.price_detail_container{
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CFCFCF;
    border-radius: 16px;
    width: 100px;
}

.color-font-gray-support{
    font-weight: 400;
    font-size: 12px;
    color: #AEAEAE;
}

.color-icon-yellow{
    color: #FFD300;
}

.marelli-color-blue{
    color: #133370;
}

.custom-hover:hover{
    color: black;
}

.text-bold{
    font-weight: 700;
}

.btn-counter-white{
    background-color: white;
    height: 40px;
    color: var(--project-base-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700 !important;
    border: none;
}

.btn-action-table{
    background-color: transparent;
    color: var(--project-base-color);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
}

.btn-action-table:hover{
    color: var(--project-base-color);
}

.box-status-table{
    width: 16px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    float: left;
    margin-top: 4px;
    margin-right: 6px;
}

.status-active{
    background-color: #04A39C;
}
.status-expired{
    background-color: #FF2F60;
}

.color-btn-outlined-grey {
    background-color: var(--white);
    color: #5C5E5E;
    font-size: 14px;
    /*padding: 10px;*/
    border-radius: 6px;
    border-color: #5C5E5E;
    border-width: 2px;
}

.color-btn-outlined-blue {
    background-color: var(--white);
    color: #133370;
    font-size: 14px;
    /*padding: 10px;*/
    border-radius: 6px;
    border-color: #133370;
    border-width: 2px;
}

.marelli-radio {
    width: 16px;
    height: 16px;
    accent-color: #133370;
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

.color-btn-red {
    background-color: #FF2F60;
    color: #FFFFFF;
    font-size: 14px;
    /*padding: 10px;*/
    border-radius: 6px;
    border-color: #FFFFFF;
    border-width: 2px;
}

.drop-zone {
    width: 100%;
    height: 100px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    color: #AEAEAE;
    background-color: #F5F5F5;
    border: 1px solid #CFCFCF;
    border-radius: 6px;
}

.drop-zone--over {
    border-style: solid;
}

.drop-zone__input {
    display: none !important;
}

.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

.drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
}

#qrious {
    max-width: 170px;
    max-height: 170px;
}