.ºtimebox{
	display: flex;
	position: relative;
	height: var(--control-height-2);
	background: var(--control-background);
	border: 1px solid var(--control-border-color);
	border-radius:  var(--control-border-radius);
	line-height: var(--control-height);
	transition: all .3s ease-in;
}
	.ºtimebox:hover{
		border-color: var(--color-border-hover);
	}		
	.ºtimebox.focus{
		border-color: var(--color-border-focus);
		box-shadow: 0 0 0 3px var(--control-border-hover);
	}
	
	.ºtimebox > *{
		line-height: var(--control-height);
	}
	.ºtimebox > .value{
		box-sizing: content-box;
		padding: 0 2px;
		width: 16px;
		height: 100%;
		background: transparent;
		color: var(--color-text);
		border: 0;
		transition: all .5s ease-in;
	}
		.fontSize1 .ºtimebox > .value{
			width: 17px;
			padding-left: 3px;
		}
		.fontSize2 .ºtimebox > .value{
			width: 19px;
			padding-left: 3px;
		}
		.fontSize3 .ºtimebox > .value{
			width: 22px;
			padding-left: 4px;
		}

		.ºtimebox > .value:first-child{
			padding-left: var(--size-2);
		}
		.ºtimebox > .value:last-child{
			flex: 1;
			padding-right: var(--size-3);
		}
		.ºtimebox > .value.focus{
			color: var(--color-border-focus);
			font-weight: 500;
		}
		.ºtimebox.h3 > .value.hours{
			width: 24px;
		}
			.fontSize1 .ºtimebox.h3 > .value.hours{
				width: 26px;
			}
			.fontSize2 .ºtimebox.h3 > .value.hours{
				width: 29px;
			}
			.fontSize3 .ºtimebox.h3 > .value.hours{
				width: 32px;
			}
		.ºtimebox.h4 > .value.hours{
			width: 32px;
		}
			.fontSize1 .ºtimebox.h4 > .value.hours{
				width: 35px;
			}
			.fontSize2 .ºtimebox.h4 > .value.hours{
				width: 37px;
			}
			.fontSize3 .ºtimebox.h4 > .value.hours{
				width: 40px;
			}				
			
		
	.ºtimebox > .separator{
		display: flex;
		align-items: center;
		padding: 0 1px;
	}
	
	.ºtimebox.disabled,
	.ºtimebox.disabled:hover{
		background: var(--control-disable-bg);
	}
		.ºtimebox.disabled input,
		.ºtimebox.disabled:hover input{
			color: var(--control-disable-color);
		}
	.ºtimebox.no-editable, .no-editable .ºtimebox{
		border: 0;
	}

.ºtimebox.error{
	border-color: var(--control-error-color);
}
	.ºtimebox.error.focus{
		box-shadow: 0 0 0 3px var(--control-error-focus);
	}
	.ºtimebox.error > .value.focus{
		color: var(--control-error-color);
	}
	.ºtimebox.error .error{
		margin-left: auto;
		padding: 0 9px 0 6px;
		color: var(--control-error-color);
		font-size: 18px;
	}
	
.ºtimebox.disabled, .disabled .ºtimebox {
    background: var(--control-disable-bg) !important;
}