body,
.bg-body{background-color: #e9ecef !important;}



.main{margin: 4vh 10vh 10vh 10vh;}
.row{margin-top: 3vh;}

.center{text-align: center;}
.j-center{justify-content: center;}
.end{text-align: end;}
.j-end{justify-content: end;}

.flex{display: flex;}
.align-center{align-items: center;}
.align-end{align-items: end;}
.hidden{visibility: hidden;}

.flex-baseline{display: flex; align-items: baseline;}

.btn{width: auto;}

#btn-elimina-tutto{width: 12%; padding: 12px 0 0 0;}

.main .filter{width: 100%; margin: 3vh 0;}
.main .filter input{
    width: 60vh; 
    margin-right: 2vh;
    border: 1px solid #bebdbd;
}
.main .filter .div-btn{width: 100%;}

#form-total-row select{border-radius: 0.2rem; padding: 2px 5px;}

/*=============== COLORI PERSONALI ===================*/
.bg-one{background-color: var(--accent-color); color: white;}
.bg-one-hv:hover{background-color: var(--accent-color); color: white;}

.bg-two{background-color: #0fa957; color: white;}
.bg-two-hv:hover{background-color: #148d4c; color: white;}

.bg-three{background-color: #007bff; color: white;}
.bg-three-hv:hover{background-color: #0056b3; color: white;}

.bg-back{background-color: #626262; color: white;}
.bg-back-hv:hover{background-color: #585858; color: white;}

.button-icon{border: none; background-color: #e9ecef;}
#button-icon{border: none; background-color: #e9ecef; color: #333; margin-right: 7px;}

.button-icon:hover{background-color: #e9ecef;}
.icon{margin: 7px; color: #333;}
.icon:hover{color: #333;}

.color-base{color: #333;}
.color-base-hv:hover{color: #181818;}

.color-one{color: #008000;}
.color-two{color: var(--accent-color);}
.color-three{color: cornflowerblue;}
.color-three-vh:hover{color: rgb(74, 117, 198);}



/*=============== LARGHEZZA COLONNE ===================*/
.row-10{width: 10%;} .row-20{width: 20%;} .row-30{width: 30%;}
.row-40{width: 40%;} .row-50{width: 50%;} .row-60{width: 60%;}
.row-70{width: 70%;} .row-80{width: 80%;} .row-90{width: 90%;}





/*=============== ALERT / PAGINATE ===================*/
#alert{
    position: fixed; 
    top: 90%; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    background-color: #7bdeb6;
   } #alert a{font-size: 12px;}



 /* Imposta il div inizialmente invisibile */
 .gradual-view {
    opacity: 0; /* Partiamo da invisibile */
    transition: opacity 0.5s ease-in-out; /* Imposta la durata della transizione */
  }

  /* Quando viene aggiunta la classe "visible", il div diventa visibile */
  .gradual-view.visible {
    opacity: 1; /* Rende il div visibile */
  }




.paginate a{
    margin: 3px; 
    width: 30px;
    height: 30px;
    background-color: #007bff;
    color: white;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}






/* Style del banner */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Arial', sans-serif;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#cookie-banner.show {
    display: block;
    opacity: 1;
}
#cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
#cookie-banner button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
#cookie-banner button:hover {
    background-color: #45a049;
}
#cookie-banner .decline {
    background-color: #f44336;
}
#cookie-banner .decline:hover {
    background-color: #d32f2f;
}

/* Responsiveness */
@media (max-width: 600px) {
    #cookie-banner {
        width: 80%;
        padding: 15px;
    }
}





/*=============== MODALE PULSANTE CONTATTI MENU ===================*/
#btn-menu{
    border: none; 
    color: white;
    border-radius: 0.2rem;
    background-color: var(--accent-color);
}
#btn-menu:hover{background-color: var(--accent-color);}
#modal-contatti-container{width: 100%;}
#modal-contatti-img{width: 200px; margin-right: 20px;}
.modal-body #doctors{padding: 0;}

.img-fluid{max-width: 100%; height: 100%;}


@media all and (max-width: 800px){
    #modal-contatti-img{display: none;}
}


/*=============== FORM MODALE ===================*/
.modal{margin-top: 8%;}
.form-modal{display: contents; margin: 7px;}

.modal-content {background-color: #e2e6e8;}
.modal .modal-header{border-bottom: 2px solid white;}
.modal label{margin-top: 15px; padding-left: 17px;}
.modal span{margin-left: 20px; padding-top: 20px; color: #333;}
.modal textarea{margin: 10px 20px 0 20px;}
.modal input,
.modal select{
    margin: 5px 5px 0 17px; 
    padding: 5px;
    width: 90%;
}


#floatingInput{
    margin: 5px 5px 0 0 !important; 
    width: 100% !important;
}






/*=============== FORM CREATE MAX ===================*/
.form-create {
    position: relative;
    padding: 3% 5%;
    border-radius: 0.2rem;
    background-color: #c8c8c8;
}

.form-create form span{padding: 5px;}

.form-create .cont-input{display: ruby;}

.form-create .cont-input div {
    margin: 20px;
    display: flex;
    width: 30%;
}

.form-create form label{
    background-color: #626262;
    color: white;
    width: 43%;
    border: none;
}

#div-btn button,
#div-btn a{margin: 15px; width: 10%;}








/*=============== TABELLE ===================*/
table{width: 100%;}
.table-custom th{
    padding: 10px 5px;
    border-bottom: 2px solid var(--accent-color);
}

.table-custom tbody tr:hover,
.table-custom tr:hover .button-icon,
.table-custom tr:hover #button-icon{background-color: lightgray;}
.table-custom td{padding: 7px 5px;}

.table-custom #table-clienti,
.table-custom #table-movimenti,
.table-custom #table-report_movimenti{
    height: 2.5rem;
    box-shadow: 0 .2rem 0.5rem rgba(0, 0, 0, .10) !important;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}






.table-classic th{
    border: 1px solid rgb(198, 192, 192);
    padding: 10px 0 10px 8px;
    font-size: 14px;
    color: white;
    background-color: #e9ecef;
    border-bottom: 2px solid var(--accent-color);
    color: #333;
}



.table-classic tr{
    height: 2.2rem;
    box-shadow: 0 .09rem 0.2rem rgba(0, 0, 0, .10) !important;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}
.table-classic td{padding-left: 8px;}

.table-classic tr:hover{background-color: #cccccc;}
.table-classic tr:hover .button-icon{background-color: #cccccc;}

.table-hv tr:hover{background-color: lightgray;}




/*================ PAGE INDEX ===============*/
.cont-login{
    height: 100%;
    display: flex;
    justify-content: center;
}

.cont-login .div-login{ 
    width: 50vh;  
    text-align: center;
}


.modal-login{margin-top: 8%;}

.modal-login input{padding: 10px;}

.modal-login .modal-content a button{
    position: absolute;
    top: 10px;
    right: 10px;   
}

.modal-login-err{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -20%);
    z-index: 999;
    width: 70vh;
}

.modal-login-err .modal-content{
    border-radius: 1rem;
    padding: 2%;
}

@media all and (max-width: 1150px){
    #navmenu ul{text-align: center;}
}

@media all and (max-width: 750px){
    .main{margin: 0;}
}



/*================ PAGE ADMIN/DASH ===============*/

.services{background-color: #cdcdcd;}







/*================ HOME ===============*/
.main-home .form-select,
.main-home .form-control{border: 1px solid #bebdbd;}
.form-home-insert,
.form-home-dettaglio{margin: 4% 0;}

.main-home form{background-color: #e9ecef; padding: 3%; margin-top: 3vh;}
.main-home-dettaglio select{width: 40vh; margin-right: 15px;}
.main-home form #submit {margin-right: 20px;}

#div-row{
    width: 100%;
    height: 2px;
    background-color: rgba(205, 0, 0, 0.25);
    opacity: 8;
}


.form-home-insert form .cont-form,
.form-home-dettaglio form .cont-form{
    width: 35vh;
    margin:2vh;
}






@media all and (max-width: 1000px){
    .form-home-insert form{display: block;}
    .form-home-insert form .cont-form{width: 90%;}
}








/*=============== DASHBOARD ===================*/
.main-dashboard{margin-top: 10vh;}
.main-dashboard  .filter .div-btn span{
    box-shadow: 0 .9rem 0.9rem rgba(171, 149, 149, .6);
    border-radius: 0.3rem; 
    padding: 5px 20px;
    letter-spacing: 0.09rem;
}


.main-dashboard .tables .table-sx{margin-right: 5vh;}

.width-report_movimenti-cognome{width: 12%;}
.width-report_movimenti-nome{width: 12%;}
.width-report_movimenti-saldo{width: 10%;}
.width-report_movimenti-add{width: 5%;}
.width-report_movimenti-azioni{width: 5%;}


.width-movimenti_dash-time_stamp{width: 6%;}
.width-movimenti_dash-id_cliente{width: 12%;}
.width-movimenti_dash-importo{width: 6%;}
.width-movimenti_dash-movimento{width: 10%;}



@media all and (max-width: 1150px){
    .main-dashboard .row .tables{display: block;}
    .main-dashboard .row .tables div{width: 100%; margin-bottom: 7%;}
}


@media all and (max-width: 800px){
    .main-dashboard .filter{display: block;}
    .main-dashboard .filter .input-filter{width: 100%; margin: 15px 5px;}
    .width-report_movimenti-saldo i,
    .width-report_movimenti-azioni{display: none;}
    
}


@media all and (max-width: 500px){
    .width-report_movimenti-saldo i,
    .width-report_movimenti-azioni{display: none;}
    
}



/*=============== CASSA ===================*/
/* Contenitore principale */
.main-cassa .container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-between;
}

/* Colonne */
.main-cassa .column {
    flex: 1 1 45%;
    margin: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}



/* Link incolonnato */
.main-cassa .column a {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    color: #007bff;
}

.main-cassa .column a:hover {color: #0056b3;}

/* Tabella */
.main-cassa table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.main-cassa table th {
    border: 1px solid #ddd;
    padding: 10px;
    background-color: lightgray;
    text-align: center;
}

.main-cassa table td {
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.main-cassa .width-cassa-azioni,
.main-cassa .total-table{text-align: center;}

.main-cassa .total-table td{padding: 10px !important;}
.main-cassa .total-table:hover {background-color: white;}

.main-cassa table tbody form .button-icon{background-color: white;}

.main-cassa table tbody tr:hover form .button-icon{background-color:lightgray}
.main-cassa table tbody tr:hover{background-color: lightgray;}

.width-cassa-etichetta{text-align: left !important;}



/* Blocco centrale per il totale */
.main-cassa .total span {
    font-size: 17px;
    font-weight: 500;
    color: white;
    padding: 8px 30px;
    border-radius: 6px;
    margin-bottom: 10px;
}


.div-operatori{
    margin-top: 20px;
    width: 60%;
}

.width-cassa_chiusura-time_stamp{width: 25%;}
.width-cassa_chiusura-operatore{width: 25%;}
.width-cassa_chiusura-importo{width: 25%;}

.table-operatore .table-custom td .button-icon{background-color: #e9ecef;}



/* Stili responsive */
@media all and (max-width: 1250px){
    .main-cassa {margin: 4vh 0;}
    .main-cassa .container {padding: 20px 0;}
    .div-operatori{width: 80%;}
}

@media all and (max-width: 990px){
    .main-cassa .container{display: block;}
}


@media (max-width: 768px) {
    .div-operatori{width: 100%;}
    .main-cassa .column {flex: 1 1 100%; margin-bottom: 20px;}
    .main-cassa .four-column-table {width: 100%;}
    .main-cassa .total {max-width: 100%;}
}


/*================ CLIENTI ===============*/
.width-clienti-cognome{width: 11%;}
.width-clienti-nome{width: 11%;}
.width-clienti-user_online{width: 11%;}
.width-clienti-email{width: 15%;}
.width-clienti-telefono{width: 10%;}
.width-clienti-id_azienda{width: 15%;}
.width-clienti-note{width: 15%;}
.width-clienti-azioni{width: 8%;}



@media all and (max-width: 800px){
    .main-home .filter{display: block;}
    .main-home .filter .input-filter{width: 100%; margin: 15px 5px;}
    .main-home .div-table{margin: 0 5px;}
    #table-clienti td{padding: 0;}
}







/*================ MOVIMENTI ===============*/
.width-movimenti-time_stamp{width: 12%;}
.width-movimenti-importo{width: 8%;}
.width-movimenti-id_cliente{width: 11%;}
.width-movimenti-id_tipo_movimento{width: 12%;}

@media all and (max-width: 800px){
    .main-movimenti .filter{display: block;}
    .main-movimenti .filter .input-filter{width: 100%; margin: 15px 5px;}
    .main-movimenti .div-table{margin: 0 5px;}
    .main-movimenti .table-custom td{padding: 0;}
}





/*================ REPORT-MOVIMENTI ===============*/

.report-movimenti{margin: 2% 7% 0 7%;}


/*Larghezza colonne*/
.report_movimenti-data{width: 10%;}
.report_movimenti-ora{width: 7%;}
.report_movimenti-movimento{width: 15%;}
.report_movimenti-dare{width: 13%;}
.report_movimenti-azione{width: 15%;}



@media all and (max-width:1150px){
    .main-movimenti .row{padding: 0 5vh;}
    .report-movimenti{margin: 2% 0 0 0 ;}

    .report_movimenti-data{width: 12%;}
    .report_movimenti-ora{width: 8%;}
    .report_movimenti-movimento{width: 15%;}
    .report_movimenti-dare{width: 8%;}
    .report_movimenti-azione{width: 12%;}

}






/*=============== PROFILO AZIENDE ===================*/
.main-aziende .doctors{padding-top: 10px;}
.main-aziende .doctors .team-member{padding: 5vh 10vh;}
.main-aziende .doctors .cont-btn{margin-top: 3vh;}




/*=============== FOOTER ===================*/
.footer .support{width: 17%; padding-top: 30px;}
.footer .link{padding: 40px 30px;}
.footer .social{padding: 30px 0 0 50px;}



@media all and (max-width:1000px){
    .footer .support,
    .footer .social{display: none;}
    .footer .link{padding: 30px 10px 0 10px;}
}