:root {
    --bianco: #FAFAFA;
    --nero: #101010;

    /*sfondo base*/
    --base-back: #efefef;
    --base-text: #101010;

    /*colori menu*/
    --m-normalback: #398ece;
    --m-normaltext: var(--bianco);
    --m-openback: #194d74;
    --m-opentext: var(--bianco);
    --m-activeback: #679ec7;
    --m-activetext: var(--bianco);
    --mop-normalback: #ffcc00;
    --mop-normaltext: #1f4e71;
    --mop-openback: #ffbb00;
    --mop-opentext: #1f4e71;
    --mop-activeback: #ffec9f;
    --mop-activetext: #1f4e71;
    --filter-back: rgba(0,150,255,0.3);

    /*classi particolari*/
    --special-back: #3f5b79;
    --special-text: var(--bianco);
    --sfo-back: var(--bianco);
    --color2-text: #152332;
}

/************************************************************************/
/*                            Navbar (Menu)                             */
/************************************************************************/

@media (min-width: 1250px) {
    #bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

@media (max-width: 767px) {
    #principalBar > div > ul > li > a {
        font-size: 16px;
    }

    .navbar-default .navbar-brand {
        height: 48px;
        padding: 5px 0 5px 5px;
    }
}

@media (min-width: 768px) {
    #principalBar > div > ul > li > a {
        font-size: 16px;
        height: 80px;
    }

    .navbar-default .navbar-brand {
        height: 80px;
    }

    .navbar-nav > li > a{
        line-height: 60px; /* 50% height + font-size */
    }

    .navbar-default .navbar-nav.navbar-right {
        margin-right: 0px;
    }
}

.navbar-static-top {
    border: 0px;
    margin-bottom: 0px;
}

.far, .fas, .fal, .fab, .fa {
    font-size: 20px;
}

li > a > far, li > a > span.fas, li > a > span.fal, li > a > span.fab, li > a > span.fa {
    font-size: 30px;
}

.fa-power-off {
    font-size: 20px !important;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus {
    background-color:transparent;
    border-color: var(--m-normaltext);
    margin-top: 20px;
    margin-bottom: 20px;
    height: 40px;
}

.navbar-default {
	padding: 0 !important;
}

.nav > li > a {
    padding: 10px 15px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--m-normaltext);
}

.navbar-header,
.navbar-default .navbar-collapse,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus {
    color: var(--m-normaltext);
    background: var(--m-normalback);
    border-color: var(--m-normalback);
    vertical-align: middle;
 }

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-brand:hover {
    color: var(--m-activetext);
    background: var(--m-activeback);
    border-color: var(--m-activeback);
    vertical-align: middle;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--m-activetext);
    background: var(--m-activeback);
 }

.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:focus {
    color: var(--m-opentext);
    background: var(--m-openback);
    border-color: var(--m-openback);
    vertical-align: middle;
}

.navbar-default .navbar-nav > .show > .dropdown-menu {
    background-color: var(--m-openback);
    border-color: var(--m-openback);
    padding: 2px 0;
}

.navbar-default .navbar-nav > .show > .dropdown-menu > li > a,
.navbar-default .navbar-nav > .show > .dropdown-menu > li > a:focus,
.dropdown-menu > li > a,
.dropdown-menu > li > a:focus {
    color: var(--m-opentext);
    background: var(--m-openback);
    margin: 4px 2;
}

.navbar-default .navbar-nav > .show > .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:hover {
    color: var(--m-activetext);
    background: var(--m-activeback);
}

.navbar-default .navbar-nav > .show > .dropdown-menu > .active > a,
.navbar-default .navbar-nav > .show > .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav > .show > .dropdown-menu > .active > a:focus {
    color: var(--m-activetext);
    background: var(--m-activeback);
    margin: 4px 2px;
}

.navbar-default .navbar-nav.navbar-right > li > a,
.navbar-default .navbar-nav.navbar-right > li > a:focus {
    color: var(--mop-normaltext);
    background: var(--mop-normalback);
    border-color: var(--mop-normalback);
    vertical-align: middle;
 }

.navbar-default .navbar-nav.navbar-right > li > a:hover {
    color: var(--mop-activetext);
    background: var(--mop-activeback);
    border-color: var(--mop-activeback);
    vertical-align: middle;
}

.navbar-default .navbar-nav.navbar-right > .active > a, 
.navbar-default .navbar-nav.navbar-right > .active > a:hover, 
.navbar-default .navbar-nav.navbar-right > .active > a:focus {
    color: var(--mop-activetext);
    background: var(--mop-activeback);
 }

.navbar-default .navbar-nav.navbar-right > .show > a,
.navbar-default .navbar-nav.navbar-right > .show > a:focus {
    color: var(--mop-opentext);
    background: var(--mop-openback);
    border-color: var(--mop-openback);
    vertical-align: middle;
}

.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu {
    background-color: var(--mop-openback);
    border-color: var(--mop-openback);
    padding: 2px 0;
}

.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > li > a,
.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > li > a:focus,
.dropdown-menu > li > a,
.dropdown-menu > li > a:focus {
    color: var(--mop-opentext);
    background: var(--mop-openback);
    margin: 4px 2;
}

.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:hover {
    color: var(--mop-activetext);
    background: var(--mop-activeback);
}

.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > .active > a,
.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav.navbar-right > .show > .dropdown-menu > .active > a:focus {
    color: var(--mop-activetext);
    background: var(--mop-activeback);
    margin: 4px 2px;
}


/************************************************************************/
/*                            FINE Navbar (Menu)                        */
/************************************************************************/

.fas.fa-lightbulb {
    color: yellowgreen;
	font-size: 30px;
}
.far.fa-lightbulb {
	font-size: 30px;
}
.far.fa-eye-slash {
	font-size: 30px;
}
.fa-trash-alt {
    color: #e7003f;
	font-size: 30px;
}

.prezzo{
	font-size: 2vh;
}


@font-face {
    font-family: Avenir;
    src: url("../font/AvenirLTStd-Light.otf") format("opentype");
}

html,.fullscreen {display: flex;height: 100%;margin: 0;padding: 0;width: 100%;background: #fff;}
.container {margin: auto;text-align: center;}
.title {font-size: 3rem;}
img{margin:0 auto;}

/*viola : #926faf */


.btn-lg {
	width: 65%;
}

.body {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	background: #f0f0f0;
}

.bodyCom {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	background: #f0f0f0;
	color: black;
}

b, strong {
    font-weight: bold !important;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #fafafa;
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenavCustom {
  padding: 0px !important;
  text-decoration: none;
  font-size: unset !important;
  color: black !important;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: white;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.sidenavHeader {
	background-color: #8e72ac; /* old #a58dba; */
	color: white;
	padding-top: 60px;
}

.sidenavBody {
	color: #3b3b3a;
}

.notification {
  text-decoration: none;
  padding: 0px 37px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}


.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}

.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index: 1;
}

.firstNav {
	background-color: #fafafa;
	color: #3b3b3a;
	width: 100%;
	padding-top: 2vh;
}

.secondNav {
	background-color: #eaeae9;
	color: #b8b8b7;
	width: 90%;
}

.secondNavCart {
	background-color: #eaeae9;
	color: #b8b8b7;
	width: 90%;
}

.iconFirstNav {
	display: inline-block;
	color: #3b3b3a;
	font-size: 150%;
}

.iconSecondNav {
	display: inline-block;
	font-size: 130%;
}

.nav-link {
	color: #b8b8b7;
}

.nav-link:hover {
	color: #303030; /* old #686867*/
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #303030; /* old #686867*/
    background-color: transparent;
	border-bottom: 3px solid;
    border-color: transparent transparent #68bbda !important; /* old #afda02*/
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active:hover {
    color: #303030; /* old #686867*/
    background-color: transparent;
	border-bottom: 3px solid;
    border-color: transparent transparent #68bbda !important; /* old #afda02*/
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	border-bottom: 3px solid;
    border-color: transparent transparent #68bbda !important; /* old #afda02*/
}

.tabActive {
	color: #68bbda; /* old #afda02*/
}

.tabActive:hover {
	color: #68bbda; /* old #afda02*/
}

#trophyIcon {
	font-size: 300%;
}

.borderBottom {
	border-bottom: 1px solid grey;
}

.borderBottomSep {
	border-bottom: 3px solid green;
}

.schedaCliente {
	background-color: #fafafa;
}

.circleViola {
	width: 9vh;
	height: 9vh;
	margin: 1vh;
	background-color: #8e72ac; /* old #a88dbe*/
	border-radius: 50%;
	color: #fafafa;
}

.listCliente > .circleViola {
	margin: 0 !important;
}

.circleViola > span {
	font-size: 5vh;
}

.circleVerde {
	width: 9vh;
	height: 9vh;
	margin: 1vh;
	background-color: #68bbda; /* old #afda02*/
	border-radius: 50%;
	color: #fafafa;
}

.circleVerde > span {
	font-size: 5vh;
}

.circleVerde > a > span {
	font-size: 5vh;
	color: white;
}

.circleRosso {
	width: 9vh;
	height: 9vh;
	margin: 1vh;
	background-color: #ff7062; /* old #f55354*/
	border-radius: 50%;
	color: #fafafa;
}

.filterField {
	color: white !important; 
	background-color: transparent; 
	border: 0;
	font-size: 1.3rem !important;
}

.filterField:focus {
	color: white !important; 
	background-color: transparent; 
	border: 0;
	font-size: 1.3rem !important;
}

.filterField::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
  font-size: 1.3rem !important;
}

.circleRosso > span {
	font-size: 5vh;
}

.noMargin {
	margin-bottom: 0px !important;
}

#addRowCart {
	font-size: 4vh;
}


.deleteRow {
	color: #ff7062; /* old #f55354*/
}

.infoTooltip {
	border: 0;
}

.btn-maps {
	border: 0;
	height: 100%;
    width: 100%;
    background-color: transparent;
    font-size: 5vh;
    color: white;
}

.btn-maps:active {
	border: 0;
}

.btn-maps:focus {
	outline: 0px;
}

.importantCom {
	color: #ff7062; /* old #f55354*/
}

.allegato {
	color: #ff7062 !important; /* old #f55354*/
	font-size: 5vh;
}

.unclickable {
	pointer-events: none; 
}

.noPadding {
	padding: 0px !important;
}

.antePdf {
	font-size: 8vh;
	color: #ff7062; /* old #f55354*/
}

.noteCarrello {
	color: white !important;
}

.greyOrder{
	color: grey;
}

.greenOrder {
	color: #68bbda; /* old #afda02*/
}


.OrderRed{
	color: red;
}


.select2-results__option--selectable {
    color: black;
}


#allOrdersButton {
	background-color: #8e72ac !important;
}

#newOrderButton {
	background-color: #68bbda !important;
}

#myOrderButton {
	background-color: #21357b !important;
}

.myAddress {
	font-size: 130%;
}

.user_card {
	/*
	height: 450px;
	width: 350px;
	*/
	margin-top: auto;
	margin-bottom: auto;
	background: #68bbda; /* old #85ab71*/
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;

}
.brand_logo_container {
	/*
	position: absolute;
	height: 170px;
	width: 170px;
	top: -75px;
	border-radius: 50%;
	background: #21357b; /* old #186056*/
	padding: 10px;
	text-align: center;
	position: absolute;
}
.brand_logo {
	/*
	height: 150px;
	border-radius: 50%;
	border: 2px solid white;
	*/
	width: 80%;
}
.form_container {
	margin-top: 100px;
}
.login_btn {
	width: 100%;
	background: #21357b !important; /* old #186056*/
	color: white !important;
}
.login_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}

.btn_witt {
	background: #21357b !important; /* old #186056*/
	color: white !important;
}
.btn_witt:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #21357b !important; /* old #186056*/
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #c0392b !important;
}

#bar {
	width: 100%;
}

.sub>li>a {
	padding-top: 0px;
	padding-bottom: 0px;
}

.right {
	padding-right: 0;
}

.btn {
	padding: 1vh;
	font-weight: 900;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: unset;
}

.btn-danger {
    color: #fff;
    background-color: #ff7062 !important;
}

.btn-primary {
    color: #fff;
    background-color: #68bbda !important;
}

.btn-paga {
    color: #68bbda;
    background-color: #fff !important;
	border: 1vh solid #68bbda;
	font-size: 2.7vh !important;
}

.btn-paga:hover {
    color: #68bbda;
    background-color: #fff !important;
	border: 1vh solid #68bbda;
	font-size: 2.7vh !important;
}

.btn-success {
    color: #fff;
    /*background-color: #68bbda !important;*/
}

.bigOne {
	width: 80%;
	height: 90%;
	font-size: 2.5vh;
	line-height: 2.6vh;
}
.btn-dati {
	color: white;
	background-color: #7ba5b1;
	border-color: #7ba5b1;
}

.btn-dati:hover {
	color: white;
	background-color: #269aaf;
	border-color: #269aaf;
}

.modal-content {
	color: black;
}

.modal-header {
	background-color: #21357b !important; /* old #186056*/
	color: #ffffff !important;
}

.modal-header > div {
    font-size: 3vh;
    line-height: 3.1vh;
    font-weight: 500;
}

.fuwi {
	width: 100%;
}

.whiteContainer {
	width: 95%; 
	background-color: white; 
	color: #615e66; 
	font-size: 4vh;
}

.title {
	width: 98%;
	background-color: #bec8cb;
}

.titleIcon {
	color: #fafafa;
}

.tableContainer {
	width: 98%;
	background-color: transparent;
	font-size: 2vh;
}

.overflow {
	overflow: auto;
}

.middleVer {
	vertical-align: middle;
}

.editButton {
	font-size: 150%;
	color: #68bbda; /* old #afda02*/
}

.editButton:hover {
    color: #68bbda; /* old #afda02*/
    text-decoration: none;
}

.deleteButton {
	font-size: 150%;
	color: #ff7062 !important; /* old #dc3545*/
	cursor: pointer;
}

.modifyButton {
	font-size: 150%;
	color: var(--m-normalback) !important;
	cursor: pointer;
}

.generalButton {
	font-size: 150%;
	color: black !important;
	cursor: pointer;
}

.mapsButton {
	font-size: 150%;
	color: #dc4c3f;
}

.mapsButton:hover {
    color: #dc4c3f;
    text-decoration: none;
}

.noteButton {
	font-size: 150%;
	color: #d8af1b;
}

.noteButton:hover {
    color: #d8af1b;
    text-decoration: none;
}

.duplicaButton {
	font-size: 150%;
	color: #000000;
}

.duplicaButton:hover {
    color: #000000;
    text-decoration: none;
}

.modButton {
	font-size: 150%;
	color: #000000;
}

.modButton:hover {
    color: #000000;
    text-decoration: none;
}

.eyeButton {
	font-size: 150%;
	color: blue;
}

.eyeButton:hover {
    color: blue;
    text-decoration: none;
}

.revisionsButton {
	font-size: 150%;
	color: blue;
}

.revisionsButton:hover {
    color: blue;
    text-decoration: none;
}

.saveButton {
	color: blue;
}

.saveButton:hover {
    color: blue;
    text-decoration: none;
}

.martop {
	margin-top: 1vh;
}

.martop3 {
	margin-top: 3vh;
}

.martop5 {
	margin-top: 5vh;
}

.btnRound {
	border-radius: 1.5vh;
}

.btnObiettivi {
	/*text-transform: lowercase;*/
	background-color: #9e8abe;
	color: white;
	letter-spacing: 1px;
}

.btnOrdina {
	/*text-transform: lowercase;*/
	background-color: #9e8abe;
	color: white;
	letter-spacing: 1px;
}

.inputModal {
	border-left: 0px;
}

.myClass2 {
	width: 150px !important;
	height: 75px !important;
}

#pending2Label > .labelPercentage {
	color: white;
}

.addCliente {
	background-color: #303030; /* old #686867*/
	color: white !important;
	font-size: 4vh;
}

.addCliente > a {
	background-color: #303030; /* old #686867*/
	color: white !important;
	font-size: 4vh;
}

.searchCliente {
	background-color: #68bbda; /* old #afda02*/
	color: white;
	font-size: 4vh;
}

.listCliente {
	background-color: #fafafa;
	color: #303030; /* old #686867*/
	font-size: 3vh;
	border-bottom: 1px solid grey;
	padding: 2vh;
}

.listProdotto {
	background-color: #ffffff;
	color: #303030; /* old #686867*/
	font-size: 3vh;
	border-bottom: 1px solid grey;
}

.listVolantino {
	background-color: #fafafa;
	color: #303030; /* old #686867*/
	font-size: 3vh;
	border-bottom: 1px solid grey;
}

.listMessaggi {
	background-color: #fafafa;
	color: #303030; /* old #686867*/
	font-size: 3vh;
	border-bottom: 1px solid grey;
	height: 15vh;
}

.messaggioBox {
	display: block; /* Fallback for non-webkit */
	display: -webkit-box;
	height: 100%;
	margin: 0 auto;
	line-height: 5vh;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notRead {
	font-weight: bold;
}

.scadenzaVolantino {
	color: #ff7062; /* old #cb90a1*/
}


@media (min-width: 992px) {
    #bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
	
	.navbar-right .dropdown-menu {
		right: 0;
		left: auto;
	}
}

.filtriContainer {
	flex-direction: row;
	font-size: 2vh !important;
}

.mobileCol {
	flex-direction: row;
}

.containerTab {
	width: 80%;
}


@media only screen and (max-width: 320px) {
	/* mobile XS*/
	.filtriContainer {
		flex-direction: column;
		font-size: 2vh;
	}
	
	.mobileCol {
		flex-direction: column;
	}
	
	.containerTab {
		width: 100%;
	}
	
	.spaceMenu {
		display: none;
	}
	
	.brand_logo_container {
		top: -5.5vh;
	}
}

@media only screen and (min-width: 321px) and (max-width: 374px) {
	/* mobile S*/
	.filtriContainer {
		flex-direction: column;
		font-size: 2vh;
	}
	.mobileCol {
		flex-direction: column;
	}
	
	.containerTab {
		width: 100%;
	}
	
	.spaceMenu {
		display: none;
	}
	
	.brand_logo_container {
		top: -5.5vh;
	}
}

@media only screen and (min-width: 375px) and (max-width: 425px) {
	/* mobile M*/
	.filtriContainer {
		flex-direction: column;
		font-size: 2vh;
	}
	.mobileCol {
		flex-direction: column;
	}
	
	.containerTab {
		width: 100%;
	}
	
	.spaceMenu {
		display: none;
	}
	
	.brand_logo_container {
		top: -6.5vh;
	}
}

@media only screen and (min-width: 426px) and (max-width: 767px) {
	/* Mobile L*/
	.filtriContainer {
		flex-direction: column;
		font-size: 2vh;
	}
	.mobileCol {
		flex-direction: column;
	}
	
	.containerTab {
		width: 100%;
	}
	
	.spaceMenu {
		display: none;
	}
	
	.brand_logo_container {
		top: -7.5vh;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	/* Tablet*/
	.filtriContainer {
		flex-direction: column;
		font-size: 2vh;
	}
	.mobileCol {
		flex-direction: column;
	}
	
	.user_card {
		padding: 9vh;
	}
	
	.brand_logo_container {
		top: -8.5vh;
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
	/* Laptop*/
	.brand_logo_container {
		top: -4.5vh;
	}
}

@media only screen and (min-width: 1440px) {
	/* Laptop L*/
	.brand_logo_container {
		top: -4.5vh;
	}
}