/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* On screens that are 992px or less, set the background color to blue */
body {
	font-family: 'Montserrat', sans-serif !important;
}

.myTab .nav {
	background-color: #283046;
}

.myTab .nav-link {
	background-color: #313749;
	border-bottom: 1px solid aqua;
	color: aqua !important;
	margin: 5px !important;
	border-right: 2px solid #283046;
	border-left: 2px solid #283046;

}

.myTab .nav-link {
	background-color: #313749;
	border-bottom: 1px solid aqua;
	color: aqua !important;
	margin: 5px !important;
	border-right: 2px solid #283046;
	border-left: 2px solid #283046;

}

.myTab .nav-link:hover {
	background-color: aqua;
	border-bottom: 1px solid aqua;
	color: #283046 !important;
	margin: 5px !important;
	border-right: 2px solid #283046;
	border-left: 2px solid #283046;

}


.myTab .nav-link:hover h4 {
	color: #283046;
}

@media (min-width: 1200px) {
	.centerdesktop {
		justify-content: center !important;
	}
}

.color-1:hover i {
	color: #d63384;
	/* Colore predefinito dell'icona */
}

.color-2:hover i {
	color: #ff9f43;
	/* Colore predefinito dell'icona */
}

.color-3:hover i {
	color: #28c76f;
	/* Colore predefinito dell'icona */
}

.color-4:hover i {
	color: #00cfe8;
	/* Colore predefinito dell'icona */
}



.btn-primary {
  color: #fff;
  background-color: #830051 !important;
  border-color: #830051 !important;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #66003F !important;
  border-color: #66003F !important;
}

.myButton {
  color: #fff;
  background-color: #830051 !important;
  border-color: #830051 !important;
}
.myButton:hover {
  color: #fff !important;
  background-color: #66003F !important;
  border-color: #66003F !important;
}

.myLabel {
    color: #830051 !important;
}

.breadcrumb-item.active, .breadcrumb-item.active a  {
    color: #6f6b7d !important;
}

.breadcrumb-item{
    color: #830051 !important;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(72.47deg, #830051 22.16%, rgba(131, 0, 81, 0.7) 76.47%);
    box-shadow: 0px 2px 6px 0px rgba(131, 0, 81, 0.48);
    color: #fff !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #66003F;
  background-color: rgba(131, 0, 81, 0.08);
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #830051 !important;
}

.mySelectMJ:focus {
  border-color: #830051 !important;
  outline: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(131, 0, 81, 0.3);
}

/* cambio stile del li.active > a.page-link */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link {
  background-color: #830051 !important;
  border-color:     #830051 !important;
  color:            #ffffff !important;
}

/* (opzionale) hover sul bottone attivo, se serve un effetto diverso */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link:hover {
  background-color: #66003F !important;
  border-color:     #66003F !important;
}

.card.card-border-shadow-primary {
  border-bottom-color: rgba(131, 0, 81, 0.8);
}

.card.card-border-shadow-primary::after {
  border-bottom-color: rgba(131, 0, 81, 0.8);
}
.card.card-border-shadow-primary:hover::after {
  border-bottom-color: #830051;
}

.bg-label-primary {
  background-color: #eae8fd !important;
  color: #830051 !important;
}

#DataTables_Table_0_filter .form-control:focus,
.dataTables_wrapper .dataTables_filter .form-control:focus {
  /* cambia il bordo */
  border-color: #830051 !important;
  /* (opzionale) aggiunge un ombra come in Bootstrap */
  box-shadow: 0 0 0 0.125rem rgba(131, 0, 81, .25) !important;
}

.form-control:focus {
  color: #6f6b7d;
  background-color: #fff;
  border-color: #830051;
  outline: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: #830051 !important;
  box-shadow:   0 0 0 0.125rem rgba(131, 0, 81, .25) !important;
  outline:      none;
}

/* 1) BOX “CHIUSO” (mostra l’item selezionato) */
select.form-select.select2,
select.form-select.select2:focus {
  /* Select2 nasconde il <select>, ma rimane utile come “hook” */
}
select.form-select.select2 + 
span.select2-container--default.select2-container 
  .select2-selection--single {
  background-color: #830051 !important;
  border: 1px solid #830051 !important;
}

/* 1) Stato “selezionato” (radio checked): sfondo sfumato + icona rossa */
.btn-check:checked + .btn-outline-primary {
  background-color: rgba(131, 0, 81, 0.25) !important;
  border-color:     #6e0041               !important;
  color:            #6e0041               !important;
}
.btn-check:checked + .btn-outline-primary i {
  color: #6e0041 !important;
}

/* 2) Stato “premuto” (mouse down) sul label */
.btn-outline-primary:active {
  background-color: rgba(131, 0, 81, 0.15) !important;
  border-color:     #6e0041                !important;
  color:            #6e0041                !important;
}
.btn-outline-primary:active i {
  color: #6e0041 !important;
}

/* 3) Hover/focus generico */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  border-color: #830051 !important;
  color:        #830051 !important;
}

.btn-outline-primary {
  border-color: #830051 !important;
  color:        #830051 !important;
}