#personalNoteLabelFilter {
        margin-bottom: @wcfGapMedium;
}

.personalNoteLabelList {
        margin-bottom: @wcfGapMedium;
        
        li:not(:last-child) {
                margin-bottom: @wcfGapTiny;
        }
        
        &~small {
                display: block;
        }
}

#tplPersonalNote {
	#personalNotes {
		display: none;
	}
	
	#personalNotesTabMenu {
		display: none;
	}
}

#messagePersonalNotes {
	.sortableNode {
		cursor: default !important;
	}
	
	.personalNoteCopyButton{
		cursor: pointer;
		float: right;
	}
}

.sidebar fieldset.personalnoteQuota {
	> div {
		text-align: center;
	}
}

.personalnoteUsageBar {
	background-color: @wcfColor;
	border-radius: 5px;
	height: 20px;
	padding: 4px;
	
	.boxShadowNative(~"inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .5)");
	
	> span {
		border-radius: 3px;
		color: transparent;
		display: block;
		height: 100%;
		
		.boxShadowNative(~"inset 0 1px 0 rgba(255, 255, 255, .5)");
		.linearGradient(rgba(165, 223, 65, 1), rgba(165, 223, 65, 1), rgba(76, 169, 22, 1));
	}
	
	&.yellow > span {
		.linearGradient(rgba(254, 207, 35, 1), rgba(254, 207, 35, 1), rgba(253, 146, 21, 1));
	}
	
	&.red > span {
		.linearGradient(rgba(240, 163, 163, 1), rgba(240, 163, 163, 1), rgba(244, 35, 35, 1));
	}
}