/*
=======================================
COLORI
=======================================
*/

:root {
  --primary-color: #B9177E;
  --secondary-color: black;
  --third-color:#ffff;
  --fourth-color:#EBEBEB;
  --fifth-color:#960559;
  --sfondo:white;
  --span-color: black;
  --head-table-bck: #B9177E;
  --head-table-font: white;
  --input-table: white;
  --sfondo-back: white;
  --border-color: lightgrey;
  --bg-dash: #B9177E;
  --img-mod: url('../images/mod-underline.png');
  --img-mod-pieno: url('../images/mod-pieno.png');
  --del-mod: url('../images/del-underline.png');
  --del-mod-pieno: url('../images/del-pieno.png');
  --upl-up: url('../images/upload-up.png');
  --upl-arrow: url('../images/upload-arrow.png');
  --upl-pieno: url('../images/upload-pieno.png');
  --phone: url('../images/phone.png');
  --phone-rot: url('../images/phone-rot.png');
}

.dark-mode {
  --primary-color: #B9177E;
  --secondary-color: white;
  --third-color:#2b2b2b;
  --fourth-color:#343434;
  --fifth-color:#960559;
  --sfondo:black;
  --span-color: #ccc;
  --head-table-bck: #B9177E;
  --head-table-font: white;
  --input-table: #595959;
  --sfondo-back: #2b2b2b;
  --border-color: #454545;
  --bg-dash: #454545;
  --img-mod: url('../images/mod-underline-w.png');
  --img-mod-pieno: url('../images/mod-pieno-w.png');
  --del-mod: url('../images/del-underline-w.png');
  --del-mod-pieno: url('../images/del-pieno-w.png');
  --upl-up: url('../images/upload-up-w.png');
  --upl-arrow: url('../images/upload-arrow-w.png');
  --upl-pieno: url('../images/upload-pieno-w.png');
  --phone: url('../images/phone-w.png');
  --phone-rot: url('../images/phone-rot-w.png');
}



/*
=======================================
TIPOGRAFIA
=======================================
*/

body{
  color: var(--secondary-color);
  background-color: var(--sfondo-back);
}

h1,h2,h3,h4,h5,h6, .btn-secondary{
  font-family: 'Pathway Gothic One', sans-serif;
}

h1{
  color: var(--primary-color);
}

label, .vis{
  font-size:1.3em;
  color:var(--secondary-color);
  font-family: 'Pathway Gothic One', sans-serif;
}


select option {
  background-color: var(--sfondo-back);
  color: var(--secondary-color);
}

input:focus, select:focus{
  color: var(--secondary-color) !important;
}

a{
  text-decoration:none;
  color:var(--secondary-color);
}

a:hover{
  transition:0.3s;
  color:var(--primary-color);
}

th{
  color: var(--head-table-font);
}

.error{
  font-weight:bold;
  color:var(--primary-color);
}

.footer:hover{
  transition:0.3s;
  color:var(--primary-color);
  background-color: var(--fourth-color);
}

a.nav-link:hover{
  transition:0.3s;
  color:var(--fifth-color)!important;
  background-color: var(--third-color);
}

.nav-link{
    color: var(--secondary-color);
}

.table{
  color: var(--secondary-color);
  border-color: #454545;
}

thead{
  background:  -webkit-linear-gradient(45deg,  #80456a, var(--fifth-color));
  background:  -moz-linear-gradient(45deg,  #80456a, var(--fifth-color));
  background:  -ms-linear-gradient(45deg,  #80456a, var(--fifth-color));
  background:  -o-linear-gradient(45deg,  #80456a, var(--fifth-color));
  background:  linear-gradient(45deg,  #80456a, var(--fifth-color));
}

.form-content{
  background-color: var(--border-color);
}

.input-control{
  border-color: var(--border-color);
  background-color: var(--input-table) !important;
}

.phone{
  background-image: var(--phone);
  display: inline-flex;
  height: 60px;
  width: 60px;
  background-size: 60px 60px;
  background-repeat: no-repeat;
}

.phone-rot{
  background-image: var(--phone-rot);
  display: inline-flex;
  height: 60px;
  width: 60px;
  background-size: 60px 60px;
  background-repeat: no-repeat;
}

.inputphone{
  text-align: center;
}

.inputcheck{
  margin-left: 1rem;
}

.labelcheck{
  margin-right: 1rem;
}
/*
=======================================
COMPONENTI
=======================================
*/


.modal-content{
  background-color: var(--sfondo);
}

.ord-group{
    width: 300px !important;
}

.divider{
    border-top: 1px solid white;
    margin-bottom: 1rem;
}

.filter-content{
  padding:0;
  border:1px solid var(--border-color);
  background-color: var(--fourth-color);
}

.tabella{
  padding:0;
  border:1px solid var(--border-color);
}

.card{
  border: none;
  background-color: transparent;
}

.form-check-input{
  height: 2rem !important;
  width: 4rem !important;
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25);
  color: grey;
}

.form-check-input:checked {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

.form-check-input:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus:not(:checked) {
  border-color: var(--primary-color);
}

.form-check-input:not(:disabled):active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.sfondo{
  background-image:  -webkit-linear-gradient(transparent,  var(--sfondo), var(--sfondo)), url('../images/sfondo-login.jpg');
  background-image:  -moz-linear-gradient(transparent,  var(--sfondo), var(--sfondo)), url('../images/sfondo-login.jpg');
  background-image:  -ms-linear-gradient(transparent,  var(--sfondo), var(--sfondo)), url('../images/sfondo-login.jpg');
  background-image:  -o-linear-gradient(transparent,  var(--sfondo), var(--sfondo)), url('../images/sfondo-login.jpg');
  background-image:  linear-gradient(transparent,  var(--sfondo), var(--sfondo)), url('../images/sfondo-login.jpg');
}

.btn-slam{
  background-color:var(--fifth-color);
  text-transform:uppercase;
  color:white;
  font-family: 'Pathway Gothic One', sans-serif;
  border-radius: 0.3rem;
}

.form-control{
  background-color: transparent;
  color: var(--secondary-color);
}

.form-control:focus {
    color: white;
    background-color: transparent;
    border-color: #ced4da;
    box-shadow: none;
}

.bg-turismo-lucca{
  background-color:var(--border-color);
}

.bg-turismo-lucca-4{
  background-color:var(--fourth-color);
}

.bg-turismo-lucca-5{
  background-color:var(--fifth-color);
  color: white;
}

.btn-slam-secondary{
  border-radius:0;
  background-color:var(--primary-color);
  text-transform:uppercase;
  color:white;
  font-family: 'Pathway Gothic One', sans-serif;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--fifth-color) !important;
    background-color: var(--third-color);
    text-transform: uppercase;
    font-family: 'Pathway Gothic One', sans-serif;
    border-left: 10px solid var(--fifth-color);
}

.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    text-transform: uppercase;
    font-family: 'Pathway Gothic One', sans-serif;
}

.searchbar-turismo{
  box-shadow:none;
  border-color: var(--border-color);
}

#elimina, #modifica{
  cursor: pointer;
  opacity: 0.75;
}

#elimina:hover, #modifica:hover{
  opacity: 1;
}

.form-control-interno{
  background-color: var(--fourth-color);
  border-radius:30px;
  border:0;
}

.form-select-custom{
  background-color: var(--primary-color);
  color:white;
  border-radius:30px;
  border:0;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
}

#galleria{
    text-align: center;
    width: 100%;
    height: 30vh;
}

.immagine{
    display: inline-block;
    width: 22%;
    margin: 10px 1%;
    cursor: pointer;
}

.immagine:hover{
    border-style: solid;
    border-color: red;
}

.preview{
    width: 100%;
}

.select__mem{
  border-style: solid;
  border-color: red;
}

.password{
  border-right-width: 0;
}

.vis{
  border: 0;
  border-bottom: 1px solid var(--span-color);
  background-color: transparent;
  border-bottom-left-radius: 0;
}

.eye{
  color: var(--primary-color) !important;
}

.msgerror{
  color: red;
}

.page-item.active .page-link{
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: white !important;
}
.page-item button, .page-item p{
	color: var(--primary-color) !important;
	border-bottom-right-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-radius: 25px !important;
	margin: 5px;
}

/*
=======================================
ANIMAZIONI
=======================================
*/

#typeEmailX {
    font: 26px/26px 'Pathway Gothic One', sans-serif;
    color: var(--primary-color);
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#typePasswordX {
    font: 26px/26px 'Pathway Gothic One', sans-serif;
    color: var(--primary-color);
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
    border-bottom-right-radius: 0;
}

.effect-16, .effect-17, .effect-18 {
    border: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--span-color);
    background-color: transparent;
}
.effect-16 ~ label {
    position: absolute;
    left: 0;
    width: 90%;
    top: 9px;
    color: var(--secondary-color);
    transition: 0.3s;
    z-index: 1;
    letter-spacing: 0.5px;
    text-align: left;
}
.effect-16 ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: 0.4s;
}
.effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border, .effect-16:not(:placeholder-shown) ~ label {
    width: 100%;
    transition: 0.4s;
}
.effect-16 ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: 0.4s;

}
input:focus {
  outline: 0;
}
.effect-16:focus ~ label, .has-content.effect-16 ~ label, .effect-16:not(:placeholder-shown) ~ label {
    top: -16px;
    font-size: 18px;
    color: var(--primary-color);
    transition: 0.3s;
}
.input-box {
  padding:50px 0px;
}
.col-3 {
    float: left;
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}

input[type="file"] {
    display: none;
}

.uploadimg {
  background-image: var(--upl-up);
  background-size: 100px 100px;
  height: 30px;
  width: 100px;
  background-repeat: no-repeat;
}

.uploadimg2{
  background-image: var(--upl-arrow);
  background-size: 45px 63px;
  height: 100px;
  width: 50px;
  margin-left: 28px;
  background-repeat: no-repeat;
  position: relative;
  animation-name: movearrow;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

@keyframes movearrow {
  0%   {bottom:0px; top:0px;}
  50% {bottom:10px; top:10px;}
  100% {bottom:0px; top:0px;}
}

.loadimg{
  height: 110px;
  width: 100px;
}

.loadimg:hover div{
  background-image: none;
}


.loadimg:hover .uploadimg{
  background-image: var(--upl-pieno);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.loadimg:hover .uploadimg2{
  background-size: 0px 0px;
  height: 0px;
  width: 0px;
}

.imgloaded{
  float: left;
  height: 600px;
  width: 300px;
  background-size: 300px 600px;
  background-repeat: no-repeat;
}

.autimgloaded{
  float: left;
  height: 200px;
  width: 200px;
  background-size: 200px 200px;
  background-repeat: no-repeat;
}


.modimage{
  float: right;
  background-image: var(--img-mod);
  height: 40px;
  width: 40px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
}

.delimage{
  float: right;
  background-image: var(--del-mod);
  height: 40px;
  width: 40px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  margin-top: 10px;
  background-color: transparent;
  border: none;
}

.modimage:hover{
  background-image: var(--img-mod-pieno);
}

.delimage:hover{
  background-image: var(--del-mod-pieno);
}

/*
=======================================
TABELLA
=======================================
*/

.gang-name{
    border-bottom: 2px solid var(--border-color);
}
.sign{
  cursor:pointer;
  background-image: url('../images/destra-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.sign:hover{
  cursor:pointer;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  margin-right: 10px;
  background-image: url('../images/destra-pieno.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

td {
    padding-right:10px;
    padding-left:10px;
}

.row-detail{
  display: none;
}

.detail{
  cursor:pointer;
  background-color: var(--border-color);
  border-bottom: 2px solid var(--sfondo-back);
}

.modify{
  cursor:pointer;
  background-image: url('../images/mod-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.modify:hover{
  cursor:pointer;
  background-image: url('../images/mod-pieno.png');
}

.delete{
  cursor:pointer;
  background-image: url('../images/del-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.delete:hover{
  cursor:pointer;
  background-image: url('../images/del-pieno.png');
}

.add{
  cursor:pointer;
  background-image: url('../images/piu-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.add:hover{
  cursor:pointer;
  background-image: url('../images/piu-pieno.png');
}


.approv{
  cursor:pointer;
  background-image: url('../images/check-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.approv:hover{
  cursor:pointer;
  background-image: url('../images/check-pieno.png');
}

.n-approv{
  cursor:pointer;
  background-image: url('../images/x-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.n-approv:hover{
  cursor:pointer;
  background-image: url('../images/x-pieno.png');
}

.lente{
  cursor:pointer;
  background-image: url('../images/lente-underline.png');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  content: ' ';
  display:inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.lente:hover{
  cursor:pointer;
  background-image: url('../images/lente-pieno.png');
}

.row-gang{
  cursor: pointer;
}