.clickable-row {
	cursor: pointer;
}

.feedback-box {
	width: 560px;
}

/*
We set the element we are applying our loading mask to relative  
*/
.loading-mask {
	z-index: 99999;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;

	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

/*
    Because we set .loading-mask relative, we can span our ::before  
    element over the whole parent element  
    */
.loading-mask::before {
	content: '';
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.25);
}

/*
    Spin animation for .loading-mask::after  
    */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

/*
    The loading throbber is a single spinning element with three  
    visible borders and a border-radius of 50%.  
    Instead of a border we could also use a font-icon or any  
    image using the content attribute.  
    */
.loading-mask::after {
	content: "";
	position: fixed;
	border-width: 3px;
	border-style: solid;
	border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	top: calc(50% - 12px);
	left: calc(50% - 12px);
	animation: 2s linear 0s normal none infinite running spin;
	filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}

table tfoot.header {
	display: table-header-group;
}