#trLB 																	{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 10000; overflow: auto; }
#trLB-box 															{ box-sizing: border-box; font-size: 10px; background-color: #fff; border: 1px solid #e0e0e0; }
#trLB-title															{ box-sizing: border-box; padding: 16px 48px 16px 16px; font-size: 2em; background-color: #f2f2f2; border-bottom: 1px solid #e0e0e0; color: #444; white-space: nowrap; overflow: hidden; height: 48px; -ms-text-overflow: ellipsis; text-overflow: ellipsis; }
#trLB-content														{ box-sizing: border-box; padding: 16px; color: #000; position: relative; overflow: auto; min-width: 208px; font-size: 1.3em; }
#trLB-buttons														{ box-sizing: border-box; padding: 8px; text-align: right; background-color: #f2f2f2; border-top: 1px solid #e0e0e0; white-space: nowrap; }
.trLB-button 														{ box-sizing: border-box; padding: 8px 16px; text-align: center; margin: 0; border: 4px solid #68d; background-color: #68d; font-size: 15px; color: #fff; cursor: pointer; line-height: 1em; }
.trLB-button+.trLB-button 							{ margin-left: 4px; }
.trLB-button.trLB-button-block					{ display: block; margin: 0; }
.trLB-button.trLB-button-block
	+ .trLB-button-block									{ margin-top: 4px; }
.trLB-button:hover											{ background-color: #79e; }
.trLB-button.trLB-button-success 				{ border: 4px solid #5b4; background-color: #5b4; }
.trLB-button.trLB-button-success:hover	{ background-color: #6c5; }
.trLB-button.trLB-button-cancel 				{ border: 4px solid #e84; background-color: #e84; }
.trLB-button.trLB-button-cancel:hover		{ background-color: #f95; }
#trLB-close															{ position: absolute; top: 8px; right: 8px; width: 31px; height: 31px; display: table-cell; padding: 0; vertical-align: middle; text-align: center; font-size: 15px; background-color: #D22; border-color: #D22; color: #fff; line-height: 0.6em; z-index: 10004; }
#trLB-content #trLB-close								{ position: relative; top: -8px; right: -8px; float: right; }
#trLB-close:hover												{ background-color: #E33; }

/* center layout === */
.trLB-center														{ text-align: center; }
.trLB-center:before											{ content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
.trLB-center #trLB-wrap 								{ display: inline-block; position: relative; z-index: 10002; text-align: left; vertical-align: middle; max-width: 50%; max-height: 100%; }
/* === center layout */

/* right layout === */
#trLB.trLB-right  											{ overflow: visible; }
.trLB-right #trLB-wrap 									{ position: absolute; z-index: 10002; top: 0; right: 0; bottom: 0; max-width: 50%; }
.trLB-right #trLB-box 									{ position: relative; height: 100%; }
.trLB-right #trLB-title 								{ position: absolute; z-index: 10003; left: 0; right: 0; top: 0%; }
.trLB-right #trLB-buttons								{ position: absolute; z-index: 10003; left: 0; right: 0; bottom: 0%; }
.trLB-right #trLB-content								{ overflow: auto; height: 100%; }
.trLB-right.trLB-has-title
	#trLB-box															{ padding-top: 48px; }
.trLB-right.trLB-has-buttons
	#trLB-box															{ padding-bottom: 56px; }
/* === right layout */

.trLB-error #trLB-box 									{ background-color: #fdd; border-color: #c77; }
.trLB-error #trLB-title,
.trLB-error #trLB-buttons								{ background-color: #e88; color: #fff; border-color: #c77; }

.trLB-success #trLB-box 								{ background-color: #dfd; border-color: #7b7; }
.trLB-success #trLB-title,
.trLB-success #trLB-buttons							{ background-color: #8c8; color: #fff; border-color: #7b7; }

#trLB-modal {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10001;
	background-color: rgba(0,0,0,0);
	-webkit-transition: background-color 800ms; 
	 -o-transition: background-color 800ms; 
	 transition: background-color 800ms;  
}
#trLB.trLB-ready #trLB-modal {
	background-color: rgba(0,0,0,0.9);
}

/* center animation === */
.trLB-center {
	perspective: 1000px;
}
.trLB-center #trLB-wrap {
	-webkit-transform: translateY(100%) scaleY(0); 
	-ms-transform: translateY(100%) scaleY(0); 
	-o-transform: translateY(100%) scaleY(0); 
	transform: translateY(100%) scaleY(0);
	-webkit-transition: all 800ms cubic-bezier(.3, .7, .1, 1); 
	-o-transition: all 800ms cubic-bezier(.3, .7, .1, 1); 
	transition: all 800ms cubic-bezier(.3, .7, .1, 1);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	opacity: 0;
}
.trLB-center.trLB-ready #trLB-wrap {
	-webkit-transform: translateY(0) scaleY(1); 
	-ms-transform: translateY(0) scaleY(1); 
	-o-transform: translateY(0) scaleY(1); 
	transform: translateY(0) scaleY(1);
	opacity: 1; 
}
.trLB-center #trLB-box {
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 800ms cubic-bezier(.3, .7, .1, 1); 
	-o-transition: -o-transform 800ms cubic-bezier(.3, .7, .1, 1); 
	transition: transform 800ms cubic-bezier(.3, .7, .1, 1);
	transform: rotateX(-120deg);
	transform-origin: 50% 0;
}
.trLB-center.trLB-ready #trLB-box {
	transform: rotateX(0deg);
	outline: 1px solid transparent;
}
/* === center animation */

/* right animation === */
.trLB-right {
	perspective: 1000px;
}
.trLB-right #trLB-wrap {
	-webkit-transition: all 800ms cubic-bezier(.3, .7, .1, 1); 
	-o-transition: all 800ms cubic-bezier(.3, .7, .1, 1); 
	transition: all 800ms cubic-bezier(.3, .7, .1, 1);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	opacity: 0;
}
.trLB-right.trLB-ready #trLB-wrap {
	opacity: 1; 
}
.trLB-right #trLB-box {
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 800ms cubic-bezier(.3, .7, .1, 1); 
	-o-transition: -o-transform 800ms cubic-bezier(.3, .7, .1, 1); 
	transition: transform 800ms cubic-bezier(.3, .7, .1, 1);
	transform: rotateY(-140deg);
	transform-origin: 100% 0%;
}
.trLB-right.trLB-ready #trLB-box {
	transform: rotateY(0deg);
	outline: 1px solid transparent;
}
/* === right animation */