*{
	
	--Font: 'Calibri', sans-serif;
	--Size: 14px;
	--Background: #f1f1f1; 
	--Color: #6d6f70;	
		
	--LoginBackground: transparent;
	--LoginBackgroundImage: url(../images/login.png);
	
	--LoginFormBackground: #ffffff;
	
	--ContainerBackground: #ffffff;

	--HeaderTextColor: #9a47cf;
	--HeaderBackground: transparent;
	--HeaderButtonColor: #9a47cf;
	--HeaderButtonColorHover: #75349e;
	--HeaderButtonBackground: transparent;
	
	--TopBackground: #ffffff;
	
	--CardBackground: #f1f1f1;
	--CardMoveColor: #9a47cf;
	--CardMoveHoverColor: #75349e;
	--CardTitleColor: #9a47cf;
	--CardColor: #b64ff7; 

	--SelectorLabelColor: #e05faf;
	--SelectorInputColor: #6d6f70;
	--SelectorInputBackground: #ffffff;

	--MenuLabelColor: #cccccc; 
	--MenuButtonColor: #ffffff;
	--MenuButtonBackground: #9a47cf; 
	--MenuButtonHoverColor: #ffffff;
	--MenuButtonHoverBackground: #75349e; 

	--MovimentiBackground: #f1f1f1;
	--MovimentiLabelColor: #6d6f70;
	--MovimentiBorderStyle: 1px solid #f1f1f1;
	--MovimentiIconColor: #6d6f70;
	--MovimentiHoverBorderStyle: 1px solid #9a47cf;
	--MovimentiPercColor: #9a47cf; 
	
	--MovimentiAddColor: #6d6f70;
	--MovimentiAddBackground: #f1f1f1;
	--MovimentiAddBorderStyle: 1px solid #f1f1f1;
	
	--PulsantiButtonColor: #ffffff;
	--PulsantiButtonBackground: #9a47cf; 
	--PulsantiButtonHoverColor: #ffffff;
	--PulsantiButtonHoverBackground: #75349e; 
	
	--TabButtonColor: #6d6f70;
	--TabButtonBackground: transparent; 
	--TabButtonHoverColor: #cccccc;
	--TabButtonHoverBackground: #ffffff; 
	--TabSelectedColor: #9a47cf;
	--TabSelectedBackground: #ffffff;

	--FormInputPlaceholder: #6d6f70;
	--FormInputColor: #6d6f70;
	--FormInputBackground: #f1f1f1; 
	--FormButtonColor: #ffffff;
	--FormButtonBackground: #b64ff7; 
	--FormButtonHoverColor: #ffffff;
	--FormButtonHoverBackground: #9a47cf; 
	--FormRequiredBackground: #f5dadd; 
	--FormRequiredBorder: 1px solid #ff0000;
	
	--FormToggleOnColor: #b64ff7;
	--FormToggleOffColor: #6d6f70; 
	
	
	--ModalTextColor: #ffffff;
	--ModalAlertColor: #e05faf;
	--ModalTextSize: 24px;
	--ModalDettColor: #ffffff;
	--ModalDettSize: 16px;
	--ModalContentBackground: transparent; 
	--ModalButtonSize: 20px;
	--ModalButtonColor: #ffffff;
	--ModalButtonBackground: #b64ff7; 
	--ModalButtonBorder: none;
	--ModalButtonHoverColor: #ffffff;
	--ModalButtonHoverBackground: #9a47cf; 
	--ModalButtonHoverBorder: none;
	--ModalYesBackground: #91c48b; 
	--ModalYesHoverBackground: #749e6f; 
	--ModalNoBackground: #cc9191; 
	--ModalNoHoverBackground: #9e6f6f; 
	--ModalEditBackground: #91c48b; 
	--ModalEditHoverBackground: #749e6f;
	--ModalCopyBackground: #b4dae0; 
	--ModalCopyHoverBackground: #8eb8bf;	
	--ModalDelBackground: #cc9191; 
	--ModalDelHoverBackground: #9e6f6f; 

}

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	border-collapse: collapse;
}
*:focus {outline: none;}

html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	background-color: var(--Background);
	color: var(--Color);	
	font-family: var(--Font); 
	font-size: var(--Size);
	border-collapse: collapse;
	-webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
body.login{
	background-color: var(--LoginBackground);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 250px auto;
}

::-ms-clear {display: none;}
::-webkit-search-cancel-button {-webkit-appearance: none;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--FormInputColor);
    box-shadow: inset 0 0 20px 20px var(--FormInputBackground);
}

::-webkit-input-placeholder {color: var(--FormInputPlaceholder);}
::-moz-placeholder {color: var(--FormInputPlaceholder);}
:-ms-input-placeholder {color: var(--FormInputPlaceholder);}
:-moz-placeholder {color: var(--FormInputPlaceholder);}

.container{}
.container-fluid{
	margin: 0px;
	padding: 0px;
}

.row{
	margin: 0px;
	padding: 0px;
}
[class*="col-"]{padding: 0px;}

.text-center{text-align: center;}
.text-right{text-align: right;}

.icon-prev{margin-right: 10px;}
.icon-next{margin-left: 10px;}

.prevent-select {
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 
}

.alert{margin-bottom: 0px;}
.alert svg{margin-right: 10px;}

.color-green{color: #006600;} 
.color-red{color: #ff0000;} 
.color-grey{color: #6d6f70;} 

.box-shadow{
	-webkit-box-shadow: 5px 5px 10px -4px #6d6f70; 
	box-shadow: 5px 5px 10px -4px #6d6f70;
}

input[type='date']::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* STRUTTURA */

#login{
	margin: 0px auto;
	position: relative;
	width:360px;
	height: 100%;
	padding: 20px;
	overflow: hidden;
	background-color: var(--LoginBackground); 
}	

#container{
	margin: 0px auto;
	position: relative;
	width: 360px;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--ContainerBackground); 
}	

#header{
	position: relative;
	width: 100%;
	background: var(--HeaderBackground);
	padding: 10px;
}

#menu{
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: none;
	overflow-y: auto;
	background-image: url(../images/home.png);
	background-position: center bottom 10px;
	background-repeat: no-repeat;
	background-size: 250px;
}

#top{
	position: relative;
	width: 100%;
	padding: 10px;
}

#tab{
	position: relative;
	width: 100%;
	padding: 10px 0px 10px 0px;
}

#content{
	position: relative;
	width: 100%;
}

#lista{
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: none;
	overflow-y: auto;
}

#pulsanti{
	position: relative;
	width: 100%;
	padding: 10px;
}

/* HEADER */

div.header-logo{}
div.header-logo img{height: 40px;}

div.header-title{line-height: 40px;font-size: 20px;color: var(--HeaderTextColor);padding: 0px 10px 0px 10px;}
div.header-title svg.fa-prev{margin-right: 10px;}
div.header-title svg.fa-next{margin-left: 10px;}

div.header-button{display: block-inline;}
div.header-button button{border: none;width: 40px;height: 40px;background: var(--HeaderButtonBackground);color: var(--HeaderButtonColor);font-size: 18px;font-weight: bold;}
div.header-button button:hover{color: var(--HeaderButtonColorHover);}

/* TOP */

div.top-element{background: var(--CardBackground);margin-bottom: 4px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding: 10px;}
div.top-element:last-child{margin-bottom: 0px;}

/* CARD */

.card-move{text-align: center;height: 90px;line-height: 90px;cursor: pointer;background: var(--CardBackground);}
.card-move svg{color: var(--CardMoveColor);}
.card-move:hover svg{color: var(--CardMoveHoverColor);}
.card-info{padding: 10px;}
.card-title{line-height: 30px;font-size: 16px;text-align: center;color: var(--CardTitleColor);}
.card-label{line-height: 30px;font-size: 12px;text-align: center;}
.card-label svg{line-height:inherit;margin-right: 10px;}
.card-importo{line-height:20px;font-size: 18px;text-align: center;}

/* SELECTOR */

.selector-element{width: 100%;cursor: pointer;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display: flex;flex-direction: row;}
.selector-mid{display: inline-block;width: 33%;text-align: center;cursor: pointer;}
.selector-div{display: inline-block;width: 20px;text-align: center;height: 40px;line-height: 40px;border: none;}
.selector-label{width: 100%;height: 20px;line-height: 20px;font-size: 11px;font-weight: bold;text-align: center;border: none;color: var(--SelectorLabelColor);}
.selector-element select{width: 100%;height: 20px;line-height: 20px;background: none;color: var(--SelectorInputColor);text-align: center;appearance: none;font-size: 14px;border: none;}

/* PULSANTI */

div.pulsanti-button{display: block-inline;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
div.pulsanti-button button{border: none;width: 100%;height: 50px;color: var(--PulsantiButtonColor);background: var(--PulsantiButtonBackground);font-size: 18px;font-weight: bold;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
div.pulsanti-button button:hover{color: var(--PulsantiButtonHoverColor);background: var(--PulsantiButtonHoverBackground);}

/* TAB */

div.tab{padding: 5px;}
div.tab button.tab-button{width: 100%;line-height: 18px;background: var(--TabButtonBackground);color: var(--TabButtonColor);border: none;font-size: 12px;}
div.tab button.tab-button:hover{background: var(--TabButtonHoverBackground);color: var(--TabButtonHoverColor);}
div.tab button.tab-button svg{font-size: 16px;}
div.tab button.tab-selected,
div.tab button.tab-selected:hover{background: var(--TabSelectedBackground);color: var(--TabSelectedColor);font-weight: bold;}

/* MENU */

div.menu-content{padding: 10px;}

div.menu-label{width: 100%;line-height: 30px;margin-bottom: 10px;color: var(--MenuLabelColor);}

div.menu-button{margin-bottom: 5px;}
div.menu-button:last-child{margin-bottom: 0px;}
div.menu-button button{display: flex;flex-direction: row;align-items: flex-start;width: 100%;height: 50px;background: var(--MenuButtonBackground);color: var(--MenuButtonColor);border: none;text-align: left;padding: 0px 10px 0px 10px;margin-bottom: 5px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
div.menu-button button:hover{background: var(--MenuButtonHoverBackground);color: var(--MenuButtonHoverColor);}
div.menu-button button:last-child{margin-bottom: 0px;}
div.menu-button button div.btn-icon{width: 50px;height: 50px;line-height: 50px;font-size: 20px;text-align: center;}
div.menu-button button div.btn-text{width: 100%;height: 50px;line-height: 50px;font-size: 16px;padding: 0px 10px 0px 10px;}

/* MOVIMENTI */

.movimenti-lista{padding:10px;}

.movimenti-label{line-height: 40px;height: 40px;font-size: 12px;color: var(--MovimentiLabelColor);}

.movimenti-info{margin-bottom:4px;display: flex;background: var(--MovimentiBackground);padding: 0px 10px 0px 10px;border: var(--MovimentiBorderStyle);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;cursor:pointer;}
.movimenti-info:last-child{margin-bottom: 0px;}
.movimenti-info:hover{border: var(--MovimentiHoverBorderStyle);}

.movimenti-info .info-icon{
	height: 60px;
	padding-top: 20px;
	min-width: 30px;
	text-align: center;
}
.movimenti-info .info-icon svg{
	height: 20px;
	line-height: 20px;
	color: var(--MovimentiIconColor);
}

.movimenti-info .info-spesa{width: 100%;padding: 10px;}
.movimenti-info .info-spesa .spesa-categoria{height: 16px;line-height: 16px;font-size: 14px;font-weight: bold;overflow: hidden;}
.movimenti-info .info-spesa .spesa-dettaglio{height: 12px;line-height: 12px;font-size: 11px;overflow: hidden;}
.movimenti-info .info-spesa .no-note{color: #cccccc;}
.movimenti-info .info-importo{min-width: 120px;line-height: 60px;text-align: right;padding: 0px 10px 0px 10px;font-size: 14px;}
.movimenti-info .info-budget{}
.movimenti-info .info-tag{padding: 0px 10px 0px 10px;color: var(--MovimentiIconColor);}
.movimenti-info .info-full{width: 100%;line-height: 60px;padding: 0px 10px 0px 10px;font-size: 14px;font-weight: bold;}

.movimenti-info .info-percentuale{width: 100px;line-height: 60px;text-align: center;font-size: 12px;color: var(--MovimentiPercColor);}

.movimenti-add{text-align: center;line-height: 60px;font-size: 18px;cursor: pointer;background: var(--MovimentiAddBackground);color: var(--MovimentiAddColor);border: var(--MovimentiAddBorderStyle);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;} 
.movimenti-add span{text-transform: uppercase;padding:0px 10px 0px 10px;} 
.movimenti-add svg{}
.movimenti-add:hover{border: var(--MovimentiHoverBorderStyle);}

.movimenti-categorie{padding: 0px 10px 0px 10px;margin-bottom: 10px;}
.movimenti-categorie:last-child{margin-bottom: 0px;}

/* FORM */

.form-login{width: 100%;width: 100%;padding: 20px;background-color: var(--LoginFormBackground);-webkit-box-shadow: 5px 5px 10px -4px #000000; box-shadow: 5px 5px 10px -4px #000000;} 
.form-movimenti{width: 100%;width: 100%;}

.form-logo{text-align:center;padding: 30px 0px 30px 0px;}
.form-body{padding: 10px;padding-bottom: 0px;}

.form-element-group{margin-bottom: 10px;}
.form-element-group:last-child{margin-bottom: 0px;}

.form-element{width: 100%;height: 50px;padding: 0px 20px 0px 20px;background-color: var(--FormInputBackground);cursor: pointer;margin-bottom: 4px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.form-element select{width: 100%;height: 100%;background: none;border: none;color: var(--FormInputColor);}
.form-element input{width: 100%;height: 100%;background: none;border: none;color: var(--FormInputColor);}
.form-element:last-child{margin-bottom: 0px;}

.form-string{width: 100%;line-height: 40px;height: 40px;font-size: 12px;}

.form-message{width: 100%;height: 40px;}

.form-button{width: 100%;height: 50px;background-color: var(--FormButtonBackground);margin-bottom: 4px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.form-button:last-child{margin-bottom: 0px;}
.form-button:hover{background-color: var(--FormButtonHoverBackground);}
.form-button button{width: 100%;height: 50px;padding: 0px 10px 0px 10px;background: transparent;border: none;color: var(--FormButtonColor);}
.form-button button:hover{color: var(--FormButtonHoverColor);}
.form-button .icon-prev{margin-right: 10px;}
.form-button .icon-next{margin-left: 10px;}

.form-required{border: var(--FormRequiredBorder);background: var(--FormRequiredBackground);}

.form-disabled input{color: #cccccc;}

/* MODAL */

.modal-backdrop{--bs-backdrop-zindex: 1050; --bs-backdrop-bg: #2d2d2d; --bs-backdrop-opacity: 0.90;}

.modal-content{height:100%;padding:10px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border:none;background-color: var(--ModalContentBackground);}

.modal-text{font-size: var(--ModalTextSize);color: var(--ModalTextColor);margin-bottom: 20px;}

.modal-img{text-align: center;margin-bottom: 10px;}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           }
.modal-img img{width: 150px;}
.modal-msg{font-size: var(--ModalTextSize);color: var(--ModalAlertColor);text-align: center;}

.modal-txt{font-size: var(--ModalTextSize);color: var(--ModalAlertColor);}
.modal-dett{font-size: var(--ModalDettSize);color: var(--ModalDettColor);margin-bottom: 20px;}

.modal-action{margin-bottom: 20px;}

.modal-button{width: 100%;height: 50px;background-color: var(--ModalButtonBackground);margin-bottom: 4px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;} 
.modal-button:last-child{margin-bottom: 0px;}
.modal-button:hover{background-color: var(--ModalButtonHoverBackground);}

.modal-button-yes{background-color: var(--ModalYesBackground);}
.modal-button-yes:hover{background-color: var(--ModalYesHoverBackground);}

.modal-button-no{background-color: var(--ModalNoBackground);}
.modal-button-no:hover{background-color: var(--ModalNoHoverBackground);}

.modal-button-edit{background-color: var(--ModalEditBackground);}
.modal-button-edit:hover{background-color: var(--ModalEditHoverBackground);}

.modal-button-copy{background-color: var(--ModalCopyBackground);}
.modal-button-copy:hover{background-color: var(--ModalCopyHoverBackground);}

.modal-button-del{background-color: var(--ModalDelBackground);}
.modal-button-del:hover{background-color: var(--ModalDelHoverBackground);}

.modal-button button{width: 100%;height: 50px;padding: 0px 20px 0px 20px;background: transparent;border: none;color: var(--ModalButtonColor);text-align: left;}
.modal-button button svg{font-size: 16px;}
.modal-button .icon-prev{margin-right: 10px;}
.modal-button .icon-next{margin-left: 10px;}

@media (max-width: 768px) { 
		
	#login{width: 100%;align-items: start;}
	#container{width: 100%;}
	
}