.radius-10 {
	border-radius: 10px;
}

.border-4 {
	--bs-border-width: 4px;
}

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


.border-total-driver {
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-total-driver-rgb), var(--bs-border-opacity)) !important;
}

.border-time-driven {
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-time-driven-rgb), var(--bs-border-opacity)) !important;
}

.border-n-mse {
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-n-mse-rgb), var(--bs-border-opacity)) !important;
}

.border-karolinska {
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-karolinska-rgb), var(--bs-border-opacity)) !important;
}

.border-color-new {
	--bs-total-driver-rgb: 51, 153, 255;
	--bs-time-driven-rgb: 255, 51, 31;
	--bs-n-mse-rgb: 255, 178, 61;
	--bs-karolinska-rgb: 51, 255, 51;
}


.bg-gradient-total-driver {
	background: linear-gradient(to right, #99CCFF, #0066CC) !important;
}

.bg-gradient-n-mse {
	background: linear-gradient(to right, #FFC366, #FF9A00) !important
}

.bg-gradient-time-driven {
	background: linear-gradient(to right, #FF9999, #CC0000) !important
}

.bg-gradient-karolinska {
	background: linear-gradient(to right, #66FF66, #00CC00) 
}

.widgets-icons-2 {
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ededed;
	font-size: 27px;
	border-radius: 10px
}

.custom-table td {
	font-size: 20px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
}

.custom-container{
	max-width: 90%;
}

.custom-card {
	border-radius: 20px;
	margin-bottom: 1rem;
}

.custom-chart {
	height: 45.00vh; 
    max-height: 500px;
}

.sidebar-dark-theme .nav-treeview>.nav-item.custom-sidebar>.nav-link.active {
    color: white;
	background-color: black;
}

/* Custom Style for NEW WEB APP */
/* Per WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; /* Larghezza della scrollbar */
    height: 8px; /* Altezza della scrollbar per lo scroll orizzontale */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* Colore semi-trasparente della scrollbar */
    border-radius: 10px; /* Angoli arrotondati */
    transition: background-color 0.3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Colore più scuro quando si passa sopra */
}

::-webkit-scrollbar-track {
    background-color: transparent; /* Sfondo trasparente */
}

::-webkit-scrollbar-button {
    display: none; /* Nasconde le frecce della scrollbar */
}

/* Per Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
    overflow-y:hidden;
    background-color: #000408;
    color: white; /* Colore bianco per il testo */
	font-family: 'Inter', sans-serif;
}

/* Struttura generale per le pagine guest */
.guest-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Evita scroll esterno indesiderato */
}

/* Header delle pagine guest */
.guest-header {
    width: 100%;
    padding: 8px;
    text-align: start;
    box-sizing: border-box;
}

/* Contenuto principale che riempie lo spazio rimanente */
.guest-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow-y: auto; /* Abilita scrolling se necessario */
    box-sizing: border-box;
}

/* --- AppMain Layout --- */
#main {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Occupa l'intera altezza della viewport */
    overflow-x: hidden; /* Impedisce il doppio scroll sulla pagina */
}

/* Row che contiene il pulsante hamburger */
#row_open_sidebar, #row_close_sidebar {
    width: 100%; /* Occupa tutta la larghezza */
    flex-shrink: 0; /* Evita che venga schiacciato */
}

#row_main {
    display: flex; /* Allinea sidebar e contenuto principale */
    width: 100vw; /* Occupa tutta la larghezza dello schermo */
    height: 100vh; /* Occupa tutta l'altezza dello schermo */
}

#sidebarOverlay {
    flex-grow: 1; /* Prende tutta l'altezza rimanente */
    width: 100%;
    overflow-y: auto; /* Abilita lo scroll interno */
    max-height: calc(100vh - 50px);
}

/* Sidebar mobile (inizialmente nascosta fuori dallo schermo) */
#mobileSidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000408;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1050; /* Assicura che sia sopra gli altri elementi */
    display: flex;
    flex-direction: column; /* I figli saranno distribuiti in colonna */
}

/* Quando la classe show è presente, la sidebar viene spostata a 0 */
#mobileSidebar.show {
    transform: translateX(0) !important;
}

/* Sidebar fissa a 230px */
#col_body_sidebar {
    width: 230px;
    height: 100%; /* Altezza uguale al parent */
    overflow-y: auto;
}

#col_body_main {
    flex-grow: 1; /* Occupa tutto lo spazio disponibile */
    height: 100%; /* Altezza uguale al parent */
}

#row_header_title {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

#dropdownMenuFirst {
    height: 40px;
    width: 160px;
    border-radius: 50px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    font-size: 16px; 
    border: none;
    text-transform: uppercase;
}

#dropdownMenuHeader {
    width: 32px; 
    height: 32px;
    border-radius: 50%; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    font-size: 14px; 
    border: none;
}

.appMain-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Evita scroll esterno indesiderato */
}

.appMain-header {
    width: 100%;
    padding: 8px;
    text-align: start;
    box-sizing: border-box;
}

.appMain-content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow-y: auto; /* Abilita scrolling se necessario */
    box-sizing: border-box;
    justify-content: start; /* Occupa tutto lo spazio */
    align-items: stretch; /* Occupa tutto lo spazio */
}

.appMain-body {
    padding-inline: 6px;
    display: flex; /* Usa il layout flessibile */
    flex-grow: 1;  /* Occupare tutto lo spazio disponibile */
    flex-direction: column; /* Organizza gli elementi in colonna */
    width: 100%; /* Assicurati che occupi tutta la larghezza disponibile */
}

/* --- AppMain Sidebar --- */
.appMain-sidebar {
    position: fixed;
    width: 200px;
    color: white;
    transform: translateX(0%);
    transition: transform 0.3s ease;
}

.sidebar-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Abilita lo scroll se il contenuto è troppo grande */
    border-radius: 15px;
}

.sidenav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.sidebar-item {
    height: 48px;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    border-radius: 15px;
}

.sidebar-item.active {
    background-color: #FFFFFF24;
}

.sidebar-item-content {
    display: flex;
    align-items: center;
    gap: 10px; /* Distanza tra icona e testo */
    padding-inline: 13px;
    width: 100%;
}

.parent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* --- Sidebar Overlay --- */
.appMain-sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.appMain-sidebar-overlay .sidebar-container {
    padding: 10px;
    background-color: #ffffff10;
}

/* --- Stile per il bottone hamburger --- */
.hamburger-menu {
    display: none; /* Nascondilo di default */
    width: 100%;
    background-color: #000408;
    color: white;
    padding-inline-start: 10px;
    text-align: left;
    font-size: 24px;
    border: none;
    cursor: pointer;
}

/* Pulsante hamburger su mobile */
#openSidebarBtn {
    font-size: 24px;
    cursor: pointer;
}

.research-dashboard-content {
    display: flex; /* Disposizione in orizzontale */
    justify-content: space-between; /* Distanza tra gli elementi */
    align-items: stretch; /* Gli elementi si allungano per occupare tutta l'altezza */
    gap: 20px; /* Distanza tra gli elementi */
    border-radius: 15px;
    height: 87vh; /* Imposta l'altezza di fleets-dashboard-content per coprire l'intera altezza della finestra */
    overflow: hidden;
}

.licenses-content {
    display: flex; /* Disposizione in orizzontale */
    justify-content: space-between; /* Distanza tra gli elementi */
    align-items: stretch; /* Gli elementi si allungano per occupare tutta l'altezza */
    gap: 20px; /* Distanza tra gli elementi */
    border-radius: 15px;
    height: 87vh; /* Imposta l'altezza di fleets-dashboard-content per coprire l'intera altezza della finestra */
    overflow: hidden;
}

.oraigo-home-content {
    display: flex; /* Disposizione in orizzontale */
    justify-content: space-between; /* Distanza tra gli elementi */
    align-items: stretch; /* Gli elementi si allungano per occupare tutta l'altezza */
    gap: 20px; /* Distanza tra gli elementi */
    border-radius: 15px;
    height: 87vh; /* Imposta l'altezza di fleets-dashboard-content per coprire l'intera altezza della finestra */
    overflow: hidden;
}

.table>:not(caption)>*>*{
    background-color: transparent;
}


.table-striped>tbody>tr:nth-of-type(odd){
    background-color: #ffffff2e;
}

.table-striped>tbody>tr:nth-of-type(even)>td {
    background-color: transparent;
}

#sessionsTable {
    border-collapse: collapse; /* Unifica i bordi */
}

#sessionsTable th, #sessionsTable td {
    border: none; /* Rimuove i bordi tra le celle */
}

#sessionsTable thead {
    border-bottom: none; /* Rimuove il bordo tra l'header e il corpo */
}

#sessionsTable thead th {
    padding-top: 25px;
    color: #FFFFFF99;
}

#sessionsTable tbody tr {
    height: 60px;
}

#sessionsTable thead th:first-child,
#sessionsTable tbody td:first-child {
    padding-left: 75px;
}

#sessionsTable tbody td {
    vertical-align: middle;
}

#licensesTable {
    border-collapse: collapse; /* Unifica i bordi */
}

#licensesTable th, #licensesTable td {
    border: none; /* Rimuove i bordi tra le celle */
}

#licensesTable thead {
    border-bottom: none; /* Rimuove il bordo tra l'header e il corpo */
}

#licensesTable thead th {
    padding-top: 25px;
    color: #FFFFFF99;
}

#licensesTable tbody tr {
    height: 60px;
}

#licensesTable thead th:first-child,
#licensesTable tbody td:first-child {
    padding-left: 75px;
}


#licensesTable tbody td {
    vertical-align: middle;
}

.licence-status-activated {
    color: #05FF05 !important;
}

.licence-status-ready {
    color: #FF9F0A !important;
}

.licence-status-activated, 
.licence-status-ready {
    text-transform: capitalize !important;
}

.sort-btn-custom{
    width: 24px;
    height: 24px;
    font-size: 10px;
    border-radius: 50%;
    color: white;
    background-color: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

/* Row Metadata: contiene due colonne */
.row-metadata {
    display: flex;
    flex: 0;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Colonna Misurazioni */
.col-measure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.row-internal-value {
    display: flex;
    align-items: baseline;
    gap: 10px; /* Spazio tra il titolo e il valore */
}

.dropdown-icon-custom {
    display: inline-block;
    width: 10px; /* Imposta la larghezza */
    height: 10px; /* Imposta l'altezza */
    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=\'%23ffffff\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'m2 5 6 6 6-6\'/%3e%3c/svg%3e');
    background-size: cover; /* Imposta il dimensionamento dell'immagine */
    margin-left: 8px; /* Per separare l'icona dal testo */
}

.custom-dropdown {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Sfondo bianco con opacità 20% */
    color: white !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    width: auto; /* Permette la larghezza automatica in base al contenuto */
    box-sizing: border-box; /* Include il padding nella larghezza totale */
}

/* Cambia colore al passaggio del mouse */
.custom-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Rimuove l'ombra al focus */
.custom-dropdown:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.dropdown-menu {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px; /* Raggio dei bordi del menu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombra personalizzata */
}

/* Modifica il colore di sfondo e del testo quando si passa sopra l'elemento */
.dropdown-menu .dropdown-item:hover {
    background-color: #00000091; /* Colore di sfondo al passaggio del mouse */
    color: white; /* Colore del testo */
}

/* Colonna Selezione */
.col-pick {
    display: flex;
    padding-top: 10px;
    gap: 10px; /* Spaziatura tra i dropdown */
}

/* Row Chart: occupa tutto lo spazio disponibile */
.row-chart {
    flex-grow: 1; /* Occupa tutto lo spazio rimanente */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stile per ogni box interno dentro widget-box */
.widget-item {
    width: 100%; /* Occupa tutta la larghezza del padre */
    /* background-color: rgba(255, 255, 255, 0.1);  Colore di sfondo con trasparenza */
    color: white;
    font-size: 16px;
    text-align: center; /* Testo centrato orizzontalmente */
    display: flex;
    justify-content: center;
    align-items: center; /* Testo centrato verticalmente */
    padding: 10px; /* Spazio interno per evitare che il testo sia troppo attaccato ai bordi */
    margin-bottom: 10px; /* Spazio tra i widget */
    border-radius: 16px; /* Angoli arrotondati */
}

.trend-box-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap; /* Consente ai box di andare a capo quando necessario */
    gap: 10px; /* Distanza tra i box */
}

.trend-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 130px;
    height: 130px;
    border-radius: 15px;
    overflow: hidden; /* Evita che l'immagine fuoriesca */
    box-sizing: border-box;
    align-items: center;
}

/* Contenitore dell'immagine */
.trend-image-container {
    width: 100%;
    height: 50%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
}

/* Immagine che occupa metà del box */
.trend-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adatta l'immagine mantenendo il rapporto */
}

/* Contenuto testuale nella parte inferiore */
.trend-content {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding-inline: 10px;
}

/* Titolo */
.trend-title {
    font-size: 11px;
    font-weight: normal;
    color: white;
    text-align: center;
}

.trend-info {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribuisce gli elementi tra l'inizio e la fine */
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.trend-right {
    display: flex;
    align-items: center;
    gap: 5px; /* Distanza tra l'icona e il numero */
}

/* Cerchio sovrapposto */
.trend-circle {
    display:flex; 
    align-items: center; 
    justify-content:center; 
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    top: 35%;
    left: 35%;
    transform: translateX(-30px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background-color: #1b1e21; 
    border-style:solid;
    border-width: 1px; 
    border-color: #494b4d;
}

.rewards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 10px;
}

.reward-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

.reward-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.reward-text-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;  /* Direzione verticale */
    color: white;
}

.reward-text {
    flex-grow: 1;
    margin-left: 15px;
    color: white;
    font-size: 16px;
    text-align: start;
}

.reward-time {
    flex-grow: 1;
    margin-left: 15px;
    font-size: 14px;
    text-align: start;
    color: #FFFFFF99;
    background-color: transparent;
}

.reward-value {
    font-size: 16px;
    color: white;
    text-align: right;
}

.chart-container {
    position: relative;
    width: 100%;
    max-height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center;
}

#fleetsPieChart {
    width: 100%;
    height: auto; /* Mantiene il rapporto 1:1 */
    max-width: 280px; /* Evita di ingrandire troppo */
    max-height: 280px; /* Mantiene il rapporto */
}

.chart-legend {
    display: flex;
    flex-direction: column; /* Disporre la legenda verticalmente */
    justify-content: flex-start;
    align-items: flex-start;
}

.legend-circle {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    display: inline-block;
}

/* --- Mobile (schermi piccoli) --- */
@media (max-width: 480px) {

    .guest-content {
        justify-content: stretch; /* Occupa tutto lo spazio */
        align-items: stretch; /* Occupa tutto lo spazio */
    }

    .login-form-container, .register-form-container {
        width: 100%;
        padding-bottom: 50px;
    }
}

/* --- Desktop (schermi larghi) --- */
@media (min-width: 481px) {
    .guest-content {
        justify-content: center; /* Centra orizzontalmente */
        align-items: center; /* Centra verticalmente */
    }

    .login-form-container, .register-form-container {
        width: 400px; /* Mantiene una larghezza fissa per un aspetto migliore */
    }
}

/* Nasconde la sidebar su schermi piccoli */
@media (max-width: 767.98px) {
    #col_body_sidebar {
        display: none; /* Nasconde la sidebar */
    }
    #col_body_main {
        width: 100%; /* Contenuto principale occupa tutta la larghezza */
    }
}

@media (max-width: 1200px){
    #col_body_sidebar {
        min-width: 230px;
    }
    #col_body_main {
        width: calc(100% - 230px); /* Occupa lo spazio rimanente */
    }

    .fleets-dashboard-content {
        flex-grow: 1;  /* Disposizione in verticale */
        overflow-y: auto; /* Permette lo scroll verticale se necessario */
    }

    .main-box,
    .widget-box {
        width: 100%; /* Gli elementi si allargano per occupare tutta la larghezza disponibile */
        margin-bottom: 20px; /* Distanza tra gli elementi */
    }

    .row-chart{
        width: 100%;
        max-width: 100%;
        padding-top: 35px;
        height: calc(100vh - 400px);
    }

    .line-chart-container-base{
        width: 100%; 
        height: 70%;
        display: flex; 
        justify-content: center;
    }

    .chart-container-base {
        width: 100%;
        max-width: 100%;
        height: 260px;
        overflow-x:scroll;
    }

    .chart-container-body {
        width: 100%;
        height: 235px;
        overflow-x:scroll;
    }
}

@media (min-width: 1201px){
    #col_body_sidebar {
        min-width: 230px;
    }
    .fleets-dashboard-content {
        display: flex; /* Disposizione in orizzontale */
        justify-content: space-between; /* Distanza tra gli elementi */
        align-items: stretch; /* Gli elementi si allungano per occupare tutta l'altezza */
        gap: 20px; /* Distanza tra gli elementi */
        height: 87vh; /* Imposta l'altezza di fleets-dashboard-content per coprire l'intera altezza della finestra */
        overflow: hidden;
    }

    .main-box {
        flex-grow: 1; /* La main-box si espande per occupare lo spazio disponibile */
        overflow: hidden;
    }

    .widget-box {
        width: 420px; /* Larghezza fissa per il widget-box */
        max-height: 100%; /* Limita l'altezza al contenitore */
        overflow-y: auto; /* Se il contenuto è troppo lungo, diventa scrollabile */
    }

    .line-chart-container-base{
        width: 100%; 
        height: 70%;
        display: flex; 
        justify-content: center;
    }
    

    .row-chart{
        padding-top: 35px;
        width: 90%;
        max-width: 90%;
        
    }
    
    .chart-container-base {
        width: 400px;
        max-width: 400px;
        height: 250px;
        overflow-x: scroll;
    }

    .chart-container-body {
        width: 200%;
        overflow-x:scroll; 
        height:225px;
    }
}

/* --- Desktop (schermi larghi) --- */
@media (min-width: 1537px) {
    .content-container {
        padding-inline: 100px!important;
    }

    #col_body_main {
        margin-right: 100px !important;
        padding-right: 100px !important; /* Applica padding-inline per schermi più grandi */
    }
}

.page-header {
    height: 60px;
    width: 100%;
    color: white;
    display: flex;
    padding: 0 20px;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left img {
    max-height: 25px;
    margin-right: 10px; /* Distanza tra l'immagine e la scritta */
}

.header-left span {
    font-size: 14px;
    color: white;
}

.content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Se la sidebar è collassata */
.main-content.collapsed {
    margin-left: 80px;
}

.full-height-container {
    flex: 1; /* Espande il contenitore per riempire il main-content */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* Aggiungiamo una classe per gestire il layout con i box nella dashboard */
.full-height-container.main-layout {
    justify-content: flex-start; /* Allinea a sinistra i box */
    align-items: flex-start; /* Allinea a sinistra */
    gap: 20px; /* Distanza tra i due box */
    margin-top: 5px;
}

.legend-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.60);
}

.page-footer {
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 10px;
}


/* Aggiungi questa sezione alla fine del tuo file customStyle.css */
input:-webkit-autofill {
    background-color: #FFFFFF24 !important;
    color: #FFFFFF99 !important;
    border-color: #FF5733 !important;
}

input:-webkit-autofill:focus {
    background-color: #FFFFFF24 !important;
    color: #FFFFFF99 !important;
    border-color: #FF5733 !important;
}

.form-group {
    margin-bottom: 15px; /* Aggiunge spazio tra gli elementi del form */
}

.form-group input:focus {
	color: #FFFFFF99;
    background-color: #FFFFFF24; /* Colore di sfondo al focus */
    border-color: #FF5733; /* Colore del bordo */
    outline: none; /* Rimuove il bordo predefinito */
}

.custom-input {
	padding: 15px;
    border-radius: 16px; 
	border: none;
	box-shadow: none;
    background-color: #FFFFFF24 ;/* Colore di sfondo con visibilità al 14% */
    color: #FFFFFF99; /* Colore del testo bianco */
}

.custom-input::placeholder {
    color: #FFFFFF99; /* Colore del placeholder con visibilità al 60% */
}

.custom-btn {
    border-radius: 25px; /* Angoli arrotondati */
    border: none; /* Rimuove il bordo */
    background-color: #999999; /* Colore di sfondo */
    color: #000000; /* Colore del testo */
    padding: 10px; /* Aggiunge un po' di spazio interno (opzionale) */
    text-align: center; /* Allinea il testo al centro */
}

/* Modifica il colore quando il bottone è in hover */
.custom-btn:hover {
    background-color: #888888; /* Colore di sfondo quando hover */
    color: #000000; /* Colore del testo quando hover */
}

.custom-or-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Spazio tra il testo e le linee */
    width: 100%;
}

.custom-or-text {
    color: #FFFFFF99;
    margin: 0;
    white-space: nowrap; /* Evita che il testo vada a capo */
}

.custom-line {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    height: 1px;
    background-color: #FFFFFF99; /* Stesso colore del testo */
}