/*
 * Loading Image
 */

.sk-fading-circle {
  margin: 50px auto;
  width: 80px;
  height: 80px;
  position: relative;
}      

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}      

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg); 
}

.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg); 
}

.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s; 
}

.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s; 
}

.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; 
}

.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s; 
}

.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s; 
}

.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s; 
}

.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s; 
}

.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}      

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}      

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

.counter {
  position: relative;
  top: 101px;
  width: 25px;
  font-size: x-large;
  cursor: default;  
  overflow: hidden;
  margin: 0px auto;
}

.timer {
  height: 25px;
  float: left;
}

.timer-val-container {
  float: left;
}

.seconds-single { 
  animation: count-10 10s steps(10, end) infinite;
}

.timer-val {
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

@keyframes count-10 {
  to { transform: translateY(-250px); }
}

@-webkit-keyframes count-10 {
  to { transform: translateY(-250px); }
}

table.shorts {
	margin: 2px 3px;
	padding: 2px 3px;
	border: 1px solid #fafafa;
	border-collapse: collapse;
	font-size: x-small
}

td.k {
	text-align: center;
	padding: 2px 5px;
	margin: 2px 5px;
	border: 1px solid #cccccc;
}

td.d {
	padding: 2px 5px;
	margin: 2px 5px;
	border: 1px solid #cccccc;
}

th.d {
	padding: 2px 5px;
	margin: 2px 5px;
	border: 1px solid #cccccc;
}

th.cxx,th.cxz,th.cxb,th.cxs,th.cxv,td.cxx,td.cxz,td.cxb,td.cxs,td.cxv {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	border: 1px solid #cccccc;
	vertical-align: middle;
}

td.cxx,td.cxz,td.cxb,td.cxs,td.cxv {
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	background: #fefefe;
	padding: 1px;
}

td.cxy {
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	border: 1px solid #cccccc;
	vertical-align: middle;
	text-align: right;
	background: #fefefe;
	padding: 1px;
}

input[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 100%;
	height: 100%;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cxc {
	left: 0px;
	top: 0px;
	margin-left: 5px;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
}

.json-key {
  color: #606;
}
.json-value {
  color: navy;
}
.json-string {
  color: #080;
}

div.CanvasXpressCode {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	cursor: move;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	margin: 2px 3px;
	padding: 2px 3px;
	position: absolute;
	white-space: nowrap;
}

img.CanvasXpressCode {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: default;
	float: right;
	margin: 2px 8px 0px 0px !important;
	padding-bottom: 5px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

img.CanvasXpressCode {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressCode:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

pre.CanvasXpressCode {
	text-align: left;
	padding: inherit;
	margin: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	word-break: inherit;
	word-wrap: inherit;
	background-color: inherit;
	border: none;
	border-radius: inherit;
}

div.CanvasXpressCodeContainer {
	background-color: rgba(245, 245, 245, 0.95);
	box-sizing: content-box;
	clear: both;
	max-height: 500px;
	max-width: 600px;
	overflow: auto;
}

div.CanvasXpressCodeContent {
	background-color: rgba(245, 245, 245, 0.95);
	box-sizing: content-box;
	margin: 2px 3px;
	padding: 2px 3px;
}

pre.CanvasXpressCodeContent {
	background-color: rgba(245, 245, 245, 0.95);
	border: none;
	margin: 0px;
	padding: 10px;
	white-space: pre;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	word-break: inherit;
	word-wrap: inherit;
	border-radius: inherit;
}
/*
 * Carousel
 */

div.CanvasXpressCarouselScene {
  position: relative;
  margin: 0;
}

div.CanvasXpressCarousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;	
}

span.CanvasXpressCarousel {
  padding : 1px;
  position: absolute;
  border: 1px solid rgb(51, 122, 183);
  border-radius: 2px;
  line-height: 10px;
  cursor: pointer;
}

div.CanvasXpressCarouselCell {
  position: absolute;
  transition: transform 1s, opacity 1s;
  background-color: rgba(245, 245, 245, 0.95);
  border: 1px solid rgb(51, 122, 183);
  border-radius: 5px;
  backface-visibility : hidden;
}

div.CanvasXpressCarouselCell:nth-child(1) { 
	transform: rotateY(  0deg) translateZ(288px); 
}
div.CanvasXpressCarouselCell:nth-child(2) { 
	transform: rotateY( 40deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(3) { 
	transform: rotateY( 80deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(4) { 
	transform: rotateY(120deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(5) { 
	transform: rotateY(160deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(6) { 
	transform: rotateY(200deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(7) { 
	transform: rotateY(240deg) translateZ(288px); 
}
div.CanvasXpressCarouselCell:nth-child(8) { 
	transform: rotateY(280deg) translateZ(288px);
}
div.CanvasXpressCarouselCell:nth-child(9) {
	transform: rotateY(320deg) translateZ(288px); 
}

img.CanvasXpressCarousel:hover {
  -webkit-transform: scale(1.8, 1.8);
  -ms-transform: scale(1.8, 1.8);
  transform: scale(1.8, 1.8);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
  box-shadow: 10px 10px 5px #888888;
  z-index: 2;
  position: relative;
  cursor: pointer; 
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  margin : 0px !important;
}

/*
 * CanvasXpressBin
 */
div.CanvasXpressBin {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	box-sizing: content-box;
	cursor: move;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	margin: 2px 3px;
	padding: 2px 3px 5px 3px;
	position: absolute;
	white-space: nowrap;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

img.CanvasXpressBin {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: default;
	float: right;
	margin: 2px 3px 0px 0px !important;
	padding-bottom: 5px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

img.CanvasXpressBin {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressBin:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}


div.CanvasXpressBinContainer {
	background-color: rgba(245, 245, 245, 0.95);
	box-sizing: content-box;
	clear: both;
	text-align: left;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressBinNameContainer {
	background-color: rgba(245, 245, 245, 0.95);
  border: 1px solid rgb(51, 122, 183);
  border-radius: 5px;
  box-sizing: content-box;
	clear: both;
	max-height: 400px;
	margin: 8px;
	overflow-y: auto;
	padding: 5px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

input.CanvasXpressBin {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgb(51, 122, 183);
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	padding-left: 3px;
	border-radius: 5px;
	margin: 3px;
}

table.CanvasXpressBinTable {
	border: collapse;
	line-height: 20px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	padding-left: 3px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

span.CanvasXpressBin {
	font: bold 12px arial, tahoma, sans-serif;
	margin-left: 5px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

img.CanvasXpressBin::selection,span.CanvasXpressBin::selection {
	background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  color: rgb(0, 0, 0);
  margin: 0px !important;
}

/*
 * CanvasXpressDataExplorer
 */
div.CanvasXpressDataExplorerPanel {
  -webkit-transition: all 0.5s ease;  
  -moz-transition: all 0.5s ease;  
  -o-transition: all 0.5s ease;  
  -ms-transition: all 0.5s ease;  
  transition: all 0.5s ease;
  max-height : 0;
  overflow: hidden;
  cursor: default;
}

div.CanvasXpressDataExplorerPanelOpen {
  -webkit-transition: all 0.5s ease;  
  -moz-transition: all 0.5s ease;  
  -o-transition: all 0.5s ease;  
  -ms-transition: all 0.5s ease;  
  transition: all 0.5s ease;
  cursor: default;
  height: auto;
  max-height: 1000px;
  overflow: hidden;
}

hr.CanvasXpressDataExplorer {
	border: 0;
	background-color: rgb(51, 122, 183);
	height: 1px;
	margin: 1px -3px 1px !important;
}

img.CanvasXpressDataExplorerActive {
  background: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	border: 1px dashed rgb(255, 0, 0) !important;
	border-radius: 5px;
	cursor: pointer;
	margin: 3px !important;
	padding: 3px;
}

img.CanvasXpressDataExplorer {
  background: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  border: 1px solid rgb(51, 122, 183) !important;
  border-radius: 5px;
  cursor: pointer;
  margin: 3px !important;
  padding: 3px;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
}

img.CanvasXpressDataExplorer:hover,
img.CanvasXpressDataExplorer3:hover
img.CanvasXpressDataExplorer4:hover
{
  background: rgba(0,0,0,0) !important;
	border: 1px solid rgb(51, 122, 183) !important;
  border-radius: 5px;
  cursor: pointer;
  margin: 3px !important;
  padding: 3px;
  -webkit-transform: scale(1.8, 1.8);
  -ms-transform: scale(1.8, 1.8);
  transform: scale(1.8, 1.8);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
  box-shadow: 10px 10px 5px #888888 !important;
  z-index: 2;
  position: relative; 
}

img.CanvasXpressDataExplorer2,
img.CanvasXpressDataExplorer4
{
  background: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  border: 0px none !important;
  border-radius: 0px;
  cursor: pointer;
  margin: 3px !important;
  padding: 0px;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
}

img.CanvasXpressDataExplorer2:hover {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  border-radius: 5px;
  cursor: pointer;
  margin: 4px !important;
  padding: 4px;
  -webkit-transform: scale(1.8, 1.8);
  -ms-transform: scale(1.8, 1.8);
  transform: scale(1.8, 1.8);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
  box-shadow: 10px 10px 5px #888888 !important;
  z-index: 2;
  position: relative; 
}

img.CanvasXpressDataExplorer3 {
  background: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  border: 1px solid rgb(51, 122, 183) !important;
  border-radius: 5px;
  cursor: pointer;
  margin: 12px 3px 3px 3px !important;
  padding: 3px;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; /* Safari */
}

div.CanvasXpressDataExplorerActive {
	border: 1px dashed rgb(255, 0, 0);
	border-radius: 5px;
	box-sizing: content-box;
	font: normal 12px arial, tahoma, sans-serif;
	margin: 3px;
	padding: 3px;
	white-space: normal;
}

div.CanvasXpressDataExplorer {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 2px;
	box-sizing: content-box;
	font: normal 12px arial, tahoma, sans-serif;
	margin: 3px;
	padding: 3px;
	white-space: normal;
}

img.CanvasXpressDataExplorerMask {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px !important;
	width: 100%;
	height: 20px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}

span.CanvasXpressDataExplorerNumeric,
span.CanvasXpressDataExplorerString,
span.CanvasXpressDataExplorerUnique
 {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	cursor: move;
	font: normal 12px arial, tahoma, sans-serif;
	margin: 3px;
	padding: 3px;
	word-wrap: normal;
	display: inline-block;
	text-align: start;
	max-width: 150px;
	overflow: hidden;
	position: relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

span.CanvasXpressDataExplorerString {
	color: rgb(255, 0, 0);
}

span.CanvasXpressDataExplorerUnique {
	color: rgb(0, 0, 255);
}

span.CanvasXpressDataExplorer {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	cursor: pointer;
	font: bold 12px arial, tahoma, sans-serif;
	line-height: 380%;
	padding: 6px 29px;
	margin-left: -4px;
}

br::selection,
hr.CanvasXpressDataExplorer::selection,
img.CanvasXpressDataExplorerActive::selection,
img.CanvasXpressDataExplorer::selection,
div.CanvasXpressDataExplorerActive::selection,
div.CanvasXpressDataExplorer::selection,
img.CanvasXpressDataExplorerMask::selection,
span.CanvasXpressDataExplorerNumeric::selection,
span.CanvasXpressDataExplorerString::selection,
span.CanvasXpressDataExplorerUnique::selection,
span.CanvasXpressDataExplorer::selection
	{
	background: rgba(0, 0, 0, 0);
	color: rgb(0, 0, 0);
}

/*
 * CanvasXpressDrag
 */
div.CanvasXpressDrag {
	opacity: 0.75;
	box-sizing: content-box;
	filter: alpha(opacity = 75);
	background-color: rgba(245, 245, 245, 0.95);
	position: absolute;
}

div.CanvasXpressDragLayout {
  opacity: 0.65;
  box-sizing: content-box;
  filter: alpha(opacity = 65);
  background-color: rgba(51, 122, 183, 0.65);
  position: absolute;
}

div.CanvasXpressTooltip {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	box-sizing: content-box;
	cursor: move;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	margin: 2px 3px;
	overflow: hidden;
	padding: 5px 6px;
	position: absolute;
	white-space: nowrap;
	text-align: left;
}

div.CanvasXpressTooltipArrowLeft {
  position: absolute;
  height: 0;
  width: 0;
  background: rgba(245, 245, 245, 0.95);
  border: 1px solid rgb(51, 122, 183);
  z-index: 1;
}

div.CanvasXpressTooltipArrowLeft:after, div.CanvasXpressTooltipArrowLeft:before {
  border: solid transparent;
  right: 0px;
  content: " ";
  position: absolute;
  pointer-events: none;
}

div.CanvasXpressTooltipArrowLeft:after {
  border-color: rgba(245, 245, 245, 0);
  border-right-color: rgb(245, 245, 245);
  border-width: 8px;
  margin-top: -8px;
}

div.CanvasXpressTooltipArrowLeft:before {
  border-color: rgba(51, 122, 183, 0);
  border-right-color: rgb(51, 122, 183);
  border-width: 9px;
  margin-top: -9px;
}

img.CanvasXpressTooltip {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: default;
	float: right;
	margin: 2px 3px 0px 0px !important;
	padding-bottom: 2px;
	cursor: default;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

img.CanvasXpressTooltip {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressTooltip:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

span.CanvasXpressTooltip {
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	cursor: move;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	margin: 2px 3px;
	max-height: 800px;
	overflow: hidden;
	padding: 5px 6px;
	position: absolute;
	white-space: nowrap;
	text-align: left;
	z-index: 1;
}

div.CanvasXpressMousePosition {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  cursor: move;
  color: rgb(34, 34, 34);
  font: normal 12px arial, tahoma, sans-serif;
  position: absolute;
  white-space: nowrap;
  text-align: left;
  z-index: 1;	
}

img.CanvasXpressMousePosition {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  cursor: default;
  margin: 0px !important;
  padding: 0px !important;
  position: relative;
  left: -13px;
  top: -13px;
  cursor: default;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;	
}

span.CanvasXpressMousePosition {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  cursor: move;
  color: rgb(34, 34, 34);
  font: normal 12px arial, tahoma, sans-serif;
  position: absolute;
  left: 4px;
  top: -20px;
  white-space: nowrap;
  text-align: left;
  z-index: 1;   
}

div.CanvasXpressCanvasResizer { /*
   * background-image: url(data:image/gif;base64,R0lGODlhNgA3APMAAP///wCQ/3jD/hyc/g6W/tjt/lS0/tzv/sTk/kiv/orL/gAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAANgA3AAAEzBDISau9OOvNu/9gKI5kaZ4lkhBEgqCnws6EApMITb93uOqsRC8EpA1Bxdnx8wMKl51ckXcsGFiGAkamsy0LA9pAe1EFqRbBYCAYXXUGk4DWJhZN4dlAlMSLRW80cSVzM3UgB3ksAwcnamwkB28GjVCWl5iZmpucnZ4cj4eWoRqFLKJHpgSoFIoEe5ausBeyl7UYqqw9uaVrukOkn8LDxMXGx8ibwY6+JLxydCO3JdMg1dJ/Is+E0SPLcs3Jnt/F28XXw+jC5uXh4u89EQAh+QQJCgAAACwAAAAANgA3AAAEzhDISau9OOvNu/9gKI5kaZ5oqhYGQRiFWhaD6w6xLLa2a+iiXg8YEtqIIF7vh/QcarbB4YJIuBKIpuTAM0wtCqNiJBgMBCaE0ZUFCXpoknWdCEFvpfURdCcM8noEIW82cSNzRnWDZoYjamttWhphQmOSHFVXkZecnZ6foKFujJdlZxqELo1AqQSrFH1/TbEZtLM9shetrzK7qKSSpryixMXGx8jJyifCKc1kcMzRIrYl1Xy4J9cfvibdIs/MwMue4cffxtvE6qLoxubk8ScRACH5BAkKAAAALAAAAAA2ADcAAATOEMhJq7046827/2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwyZKxhqhgJJeSQVdraBNFSsVUVPHsEAzJrEtnJNSELXRN2bKcwjw19f0QG7PjA7B2EGfn+FhoeIiYoSCAk1CQiLFQpoChlUQwhuBJEWcXkpjm4JF3w9P5tvFqZsLKkEF58/omiksXiZm52SlGKWkhONj7vAxcbHyMkTmCjMcDygRNAjrCfVaqcm11zTJrIjzt64yojhxd/G28XqwOjG5uTxJhEAIfkECQoAAAAsAAAAADYANwAABM0QyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7/i8qmCoGQoacT8FZ4AXbFopfTwEBhhnQ4w2j0GRkgQYiEOLPI6ZUkgHZwd6EweLBqSlq6ytricICTUJCKwKkgojgiMIlwS1VEYlspcJIZAkvjXHlcnKIZokxJLG0KAlvZfAebeMuUi7FbGz2z/Rq8jozavn7Nev8CsRACH5BAkKAAAALAAAAAA2ADcAAATLEMhJq7046827/2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwzJNCmPzheUyJuKijVrZ2cTlrg1LwjcO5HFyeoJeyM9U++mfE6v2+/4PD6O5F/YWiqAGWdIhRiHP4kWg0ONGH4/kXqUlZaXmJlMBQY1BgVuUicFZ6AhjyOdPAQGQF0mqzauYbCxBFdqJao8rVeiGQgJNQkIFwdnB0MKsQrGqgbJPwi2BMV5wrYJetQ129x62LHaedO21nnLq82VwcPnIhEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7/g8Po7kX9haKoAZZ0iFGIc/iRaDQ40Yfj+RepSVlpeYAAgJNQkIlgo8NQqUCKI2nzNSIpynBAkzaiCuNl9BIbQ1tl0hraewbrIfpq6pbqsioaKkFwUGNQYFSJudxhUFZ9KUz6IGlbTfrpXcPN6UB2cHlgfcBuqZKBEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7yJEopZA4CsKPDUKfxIIgjZ+P3EWe4gECYtqFo82P2cXlTWXQReOiJE5bFqHj4qiUhmBgoSFho59rrKztLVMBQY1BgWzBWe8UUsiuYIGTpMglSaYIcpfnSHEPMYzyB8HZwdrqSMHxAbath2MsqO0zLLorua05OLvJxEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhfohELYHQuGBDgIJXU0Q5CKqtOXsdP0otITHjfTtiW2lnE37StXUwFNaSScXaGZvm4r0jU1RWV1hhTIWJiouMjVcFBjUGBY4WBWw1A5RDT3sTkVQGnGYYaUOYPaVip3MXoDyiP3k3GAeoAwdRnRoHoAa5lcHCw8TFxscduyjKIrOeRKRAbSe3I9Um1yHOJ9sjzCbfyInhwt3E2cPo5dHF5OLvJREAOwAAAAAAAAAAAA==);
   * background-position: 50% 50%;
   * background-repeat: no-repeat;
   */
	
}

div.CanvasXpressCanvasResizerClose {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAOCAYAAAD9lDaoAAAAcUlEQVR42mM8e/bsfwYCgBGkSE9PD6eCS5cuIRSxsrIy/P79Gy4J42MoAgGQBDIbRRFMNwzATMVQhGwNVjehm/T582cwfevWLfxu+vTpO8Pt29ew++7Hjx8MvLy8mIpgAKTg/38WOB+uiGCIE1JAXUUA5WZpcWW3WYkAAAAASUVORK5CYII=);
}

div.CanvasXpressCanvasResizerloading1 {
	box-sizing: content-box;
	background-image:
		url(data:image/gif;base64, );
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div.CanvasXpressCanvasResizerloading2 {
	box-sizing: content-box;
	background-image:
		url(data:image/gif;base64, );
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/**********/
/* Motion */
/**********/

div.CanvasXpressMotion {
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
}

img.CanvasXpressMotion {
  margin: 0px !important;
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
}

div.CanvasXpressMotionContainer {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAOCAYAAADuQ3ZcAAAAF0lEQVR42mNkAAJGNOLChQv/cRNYdAAA0dgUqRX/AM0AAAAASUVORK5CYII=);
	background-repeat: repeat-x;
}

div.CanvasXpressMotionCurrent {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVR42mNkgIIDBw78ZyACODg4MCLzGWGa7e3tidHPcPDgQRRDGEGaTc0tidIMA6dPHocbAjZAV9eQJAMuXz5PZQM0NA1IMuDG9QuoBqioqJBkwJ07d1ANkJRWJ8mA509vUtkAUVFFkgx4/fo+qgG8fHIkGfD50yMqGgAiQIaws4oTpfnn75eoSRnGoCgzUQIoNgAAbjRcEcsB8BEAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	float: left;
	height: 14px;
	position: relative;
	width: 14px;
	z-index: 1000002;
}

div.CanvasXpressMotionRange {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAOCAYAAADuQ3ZcAAAAFklEQVR42mNkAAJGNMKxcdd/3AQWHQAD/g7xOirtNAAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	float: left;
	height: 14px;
	left: 0px;
	top: -1px;
	position: relative;
	z-index: 1000001;
}

/**********/
/* Marker */
/**********/

div.CanvasXpressMarker {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	color: rgb(34, 34, 34);
	cursor: move;
	font: normal 12px arial, tahoma, sans-serif;
	height: 340px;
	width: 286px;
	left: 0px;
	line-height: 100%;
	position: absolute;
	top: 0px;
	padding: 2px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

/***********/
/* Toolbar */
/***********/

div.CanvasXpressToolbar {

}

div.CanvasXpressToolbar img.CanvasXpressToolbarImage:first-child {
	margin-left: 13px !important;
}

div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
  transition: all 0.3s;
	-moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover {
	margin: 0 7px;	
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

div.CanvasXpressToolbar img.CanvasXpressToolbarImage:hover + img.CanvasXpressToolbarImage {
	margin: 0 6px;  
  transform: scale(1.1);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

div.CanvasXpressToolbar img.CanvasXpressToolbarImage {
  background: rgba(0,0,0,0) !important;
	border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
  cursor: pointer;
  float: right;
  margin: 4px 4px 0px 0px;
  padding-top: 4px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}

/**************/
/* Data Table */
/**************/

div.CanvasXpressDataTable {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	clear: both;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	overflow: hidden;
	position: absolute;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataTableToolbar {
	box-sizing: content-box;
	border: 0px;
	border-radius: 5px 5px 0px 0px;
	background-color: rgba(245, 245, 245, 0.95);
	color: rgb(34, 34, 34);
	cursor: move;
	font: normal 12px arial, tahoma, sans-serif;
	height: 32px;
	left: 0px;
	line-height: 100%;
	position: absolute;
	top: 0px;
	padding: 2px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

img.CanvasXpressDataTableToolbarImage {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: pointer;
	float: right;
	margin: 2px 7px 0px 0px !important;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

img.CanvasXpressDataTableToolbarImage {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressDataTableToolbarImage:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

div.CanvasXpressDataTableContainer {
	box-sizing: content-box;
	border-radius: 0px 0px 5px 5px;
	color: rgb(34, 34, 34);
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	left: 0px;
	line-height: 100%;
	position: absolute;
	top: 32px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataTableVertical {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	right: 4px;
	top: 0px;
	width: 32px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataTableHorizontal {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	bottom: 8px;
	height: 32px;
	left: 32px;
	overflow-x: auto;
	overflow-y: hidden;
	position: absolute;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataTableResizer {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAR0lEQVR42pXPQQoAIAhEUb25nrwyKIpMndkJz8VnAtbGGMGqSqWHhW3pw4lFhBnBYYOHvw0/7DZE+GnI8NVQwbuhimcDgu3uM5KV++8QfCcAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	cursor: se-resize;
	bottom: 4px;
	height: 15px;
	position: absolute;
	opacity: 0.95;
	right: 0px;
	width: 15px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

table.CanvasXpressDataTable {
	border: 0px;
	border-spacing: 1px;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	left: 1px;
	line-height: 20px;
	position: absolute;
  opacity: 0.95;
  table-layout: fixed;
	top: 1px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataTableMask {
	box-sizing: content-box;
	border: 0px;
	left: 32px;
	position: absolute;
	top: 0px;
	overflow: hidden;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

th.CanvasXpressTableCellHead {
  background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));
	border: 1px solid #ccc;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
  opacity: 0.95;
  padding: 2px;
	text-align: left;
	vertical-align: middle;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

th.CanvasXpressTableCellHeadActive {
  background: linear-gradient(rgb(243, 253, 255), rgb(217,232,251));
	border: 1px solid #ccc;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
  opacity: 0.95;
  padding: 2px;
	text-align: left;
	vertical-align: middle;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

a.CanvasXpressTableCellHead {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAVElEQVR42mNkAIL/QMAIBAwkAsZRzaOah5BmEBunYjQLUDSDaGW3Dpw23d1VgWIAVpuxGYCuEaef0Q3AphFvgMEMwKWRYGgTioVBFM+jmkc1U1UzAAG5nB8y5eufAAAAAElFTkSuQmCC) no-repeat left center;
	cursor: pointer;
	display: none;
	height: 20px;
	position: absolute;
	opacity: 0.95;
	right: 4px;
	white-space: normal;
	width: 14px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

a.CanvasXpressTableCellHeadActive {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAVElEQVR42mNkAIL/QMAIBAwkAsZRzaOah5BmEBunYjQLUDSDaGW3Dpw23d1VgWIAVpuxGYCuEaef0Q3AphFvgMEMwKWRYGgTioVBFM+jmkc1U1UzAAG5nB8y5eufAAAAAElFTkSuQmCC) no-repeat left center;
	cursor: pointer;
	display: block;
	height: 20px;
	position: absolute;
  opacity: 0.95;
  right: 4px;
	white-space: normal;
	width: 14px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

td.CanvasXpressTableCell {
  border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
	padding: 2px;
  vertical-align: middle;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

td.CanvasXpressTableCellActive {
	background-color: #dfe8f9;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
	padding: 2px;
  opacity: 0.95;
  vertical-align: middle;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressTableCell {
	box-sizing: content-box;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
	margin: 2px 2px 1px 5px;
	overflow: hidden;
	position: relative;
  text-overflow: ellipsis;
	white-space: nowrap;
}

div.CanvasXpressTableCellSortAsc {
	box-sizing: content-box;
	background:
		url(data:image/gif;base64,R0lGODlhDQAFAIcAAGGQzUD/QOPu+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAEALAAAAAANAAUAAAgbAAMIDABgoEGDABIeRJhQ4cKGEA8KmEiRosGAADs=)
		no-repeat right 7px;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
	margin: 2px 2px 1px 5px;
	overflow: hidden;
  position: relative;
  white-space: nowrap;
}

div.CanvasXpressTableCellSortDesc {
	box-sizing: content-box;
	background:
		url(data:image/gif;base64,R0lGODlhDQAFAIcAAGGQzUD/QOPu+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAEALAAAAAANAAUAAAgeAAUAGEgQgIAACBEKLHgwYcKFBh1KFNhQosOKEgMCADs=)
		no-repeat right 7px;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 20px;
	margin: 2px 2px 1px 5px;
	overflow: hidden;
  position: relative;
  white-space: nowrap;
}

/****************/
/* Configurator */
/****************/
div.CanvasXpressConfigurator {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	border-radius: 5px;
	border: 1px solid rgb(51, 122, 183);
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	opacity: 0.95;
	line-height: 24px;
	text-align : left;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

span.CanvasXpressConfigurator {
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

textarea.CanvasXpressConfigurator {
	background-color: rgba(245, 245, 245, 0.95);
	border-radius: 5px;
	border: 1px solid rgb(51, 122, 183);
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
}

img.CanvasXpressConfigurator {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: default;
	float: right;
	margin: 0px 0px 0px 5px !important;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

img.CanvasXpressConfigurator {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressConfigurator:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

select.CanvasXpressConfigurator {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgb(51, 122, 183);
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	padding-left: 3px;
}

input.CanvasXpressConfigurator {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgb(51, 122, 183);
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	padding-left: 3px;
}

div.CanvasXpressConfiguratorOptions {
	box-sizing: content-box;
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	height: 100px;
	margin-top: 8px;
	overflow: auto;
	width: 180px;
}

div.CanvasXpressConfiguratorFilter {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	border-radius: 5px;
	border: 1px solid rgb(51, 122, 183);
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
}

select.CanvasXpressConfiguratorFilter {
	border: 1px solid rgb(51, 122, 183);
	font: normal 12px arial, tahoma, sans-serif;
}

input.CanvasXpressConfiguratorFilter {
	border: 1px solid rgb(51, 122, 183);
	font: normal 12px arial, tahoma, sans-serif;
}

div.CanvasXpressConfiguratorExample {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	border-radius: 5px;
	border: 1px solid rgb(51, 122, 183);
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
}

span.CanvasXpressConfiguratorExample {
	cursor: default;
	font: bold 14px arial, tahoma, sans-serif;
	line-height: 18px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressConfiguratorExampleContent {
	overflow: 'auto'
}

div.CanvasXpressConfiguratorColor {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 18px;
}

div.CanvasXpressConfiguratorColorMain {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALUAAABlCAIAAACEDzXRAAAKQ0lEQVR42u2d23IjKwxFBeRh5v8/9uQlzXlI2gGELoCEm6pxubp6PI69WoV3C20uIQPAH4A/AH/p41/pDcTxP4BPGDtq3vYJGPpv8craeRdo/fyTI8ZhHnodOGgcV/3rnx8QI0SABO2xfAbiCfVR8Wj+CD8jenbRJNyGOxLoAaH1iLu4EUEHAv1+MsQ4zLE4AiIOcpibv4u9OET6+cP4ASnJ1JH4/G60A9km+GbBxLlpKAkADoR2JnaBrvWD/x1GCZn9EYLEHqVfI6Efx0D7E9tDF/rBSJ54l8FqTUse0J+EvxPrdK0fD4aOLXQi7zyGxMaRvvWjjH2U8o9I44OKnf+wyCpHoR/Phk6d/COq8481YrNI3/qR2B+kMl1Fl6J8o/JrU/GEA6HdiB2ha/0YBVx7rFwNHAj9JuIl6EI/qKyJug4Yvg7xA0QEpB8nQe8itoQu9EOT8M3mTsqUSUzykH6cBO1PbA9d91+ShDzV9xrtcgW21IT6L0yfcS90FKCdw+wS6Q9ISWjVfLTVVT2mdiPGGRduFKWm7dBStWlLmI0j/QExdgp7gT5qCu2BLKiLqtc94hI7PB8auQP4KuyIvSJ960fUqXWcd2F48Khr1bHSj2dDp/afmg7tMrFxpG/9mHMFuqrH3spFw0s0Bgr9OAzamdgFutaPpMuqo6WVEXWJdSL14xhof2J76MKfS2yXWGOVB1WXXGOVdxFSx587CXoLsTE0689RH7VW4RMLeKI9wPpzz4XeS2wDzdbXR52AWStjwiSAA6HdiB2h1f6cqT0whzzuzz0LejuxATTy90Xt40v7CzdGRvKS4O/zQ0AiXaRW5x/dv4vS4A/a308LYR5pFquRRvlHIrKWoCj5woCVId4eR/KPNDjURg2tdEC7rSQN5B9DYR70X5YivVxft7AyrOvrD4V2JnaBJurr+qpemLEywlRhT6qvPx16C7ExdK0fSjcj0maAzsqgBt7rfIxGP46B9iT2gi70I842bNj0U4wd/WAG/L5VP3p0W4iNoYv6Oh6eoJmSMW5laIzF8iT1TtgeV9RZoZ7QvdEUzsQu0CP+HOMKDFoZvDFg6s89CNqf2B5a4e8Hts84W0pgeohBtspBXYp8H3Tk/H23MBtHuvbn5mp7dlU9TUkP+XNJMabzHdCIbnuYDSItzZ+bdgUWrAwNPhwInRxw1/wXuYGj+4vo7flboRpjEQ6EjgojYK9/K04NFfNTauEBypXQWQLAfqQoHl9CfvpQ6C3ExtC9/q2YW2u6X1JWzfsYFPKX3L99LrQ/sT10XR+jKh+UN2AxlDOyXfLQaxxf/fkvT4d2JnaBZv258M6h4IFu2Em7/sezoLcQG0Mjfy6xrqLnVBLGWHw1i69WP5LCCn0TNEL3DLNXpCV/n5oo5jAVLY5Em6i8Pwm6uSNuCrNxpNX+nDira20qqyZriv384xhoZ2IX6Lr/wg8eiwpXYGQqPEgjsBrX+er3X46B9ie2h6bX/4i6IfcLS2mIY++7TfoCuLj6hwgN89CwBJ3Gx8rOVsn0kQ48tDS/4X1L8SzMb3BbkGdtwsD05AbP9YOU8xui+uljZei/P/3qx2HQbsSO0Ar/lveHLZYCVK4GeN1P5N+eAb2R2Aya9ueUY+8dlhLtdhWvgfEfz4AeGf9hR2wcaeTPpacvRdzLTx8J/Qq1Ij995PrJ3/mp0p8LO5YyF0s215g/9yxoZ2IXaLo+FiwtgTlvIAznp4+G3khsBk3Pf5mYvqOwMqZnNnw3i9cRDoT2JPaCZuvreskDuXkHxfQMvfbBgdBbiI2hC/3QLCg6lESZZkrfJ7nSj3gWNEMcRkYJsf5L0BXENBl1WV8/aquMLM9/eSJ0UtxZmFGGg4MigZ75ovHnvsOcUX09zRbzjCrU/K/Rev0gT2i2vu4cZrNI1+sH2e49Yb3lRC6e9fSS9ETohjj7hdkx0rQ/57/rxIrhBQdCv494Hlrtz1lo30Qjz1z+cRh02ndTNIMm1j8NxtmePs+76i+/esJHrH/6dGh/YntoRf9l2RtQWgJXzY4bdtbqx0OhnYldoHv7I79jf4+rOGGaRWr14yToLcTG0Ky/v32rjAsdX9S5vgI4ENqT2Asa7Z/9vq0yStiGNNVHkOe/RGmqwBQ0jEDHFpoJ85BLN+jPaRoHGWl2/2yx3msxVRHjZ0Td4GfV/Bf9bCM1dBiBfrHeJ1HR6dKEedDf5yPdBLilp/efC3Ribb1VxlUHGQe8iTb0598+Hdqf2B6a3b9SOerezsoIBWaJ3IBn1fp0j4PeQmwMzc5/idLK3UZWRkmKX2zA4Vc/DoPeSGwGrdvfY24RpKmVjrLuCQdCuxE7Qkv64TZ3Z44dVPrxUOh3EK9C1/lHGpz7ZzpVsYTF7K8Hyj+Ogd5FbAk9uL9H9LIyYg821sjo13gYtD+xPbRU/9Ds/b1sZTTIr5OStMGHA6GdiV2gUf2UmQcfJdUbXOoe6HoN1A0b2uQD4EBosXJqQTwKnXvXAEX+oZlfGaS9ewetDGCLeV1exH4e9Mr+2TDpv2iggYFW+LdBsTbngv/yUroGH0jleEX7MOgtxMbQ7PzKoMuajKyM8pYIiB194HnQzsQu0Gp/LvpulVHylsgK/TgG2p/YHrqXf6T3bJUBhfxFWUDPg95CbAytm/+ycasM9WOxWu0PnTniLWE2iLRi/4Z3bJXRvY76s0+Arl93I3aMNOHPBce2PdSkL7Kpnwe9l9gGutCPoFgkUtytXAGbex0vKCznSOs00o+ToLcQG0N/QErCrG6jrTIynVUDwo896vCzssPrNnAYtD+xPfR9fwmKeu/CVhm5OAn1STPkvhxBW1KXjeP60Y/DoJ2JXaAL/RCPy+PXc80L9d7OV294dVPbC/fb4EDoLcTG0IV+TCDrrIxMHIFg512BWj9OgvYk9oK+9SMoZG55q/JMiGS40/sLjacu28T3MVfd0Aha+u3QJXr+0Q//MBtHutaPQOzh3H0RBoZS5OJ/MjqJ9x2vQb7qgSuvX0StH0+FLptzrvTDh9gl0oV+iAbi2lAsqNmbK3yBAyLNdbRzW8Y6Btqf2B76A2IURE2zZY16KGfZlwqofJSL4feABka+xCNX+ekx0LuILaFr/Zit7s4ZA7y5Qg2sDr/t4zDodxCvQt/6occctDKGriMPzH85D9qN2BG61g/QwcLSVDSGl78C6LePY6A3EptBf0BKcjWWH/GqyJqoxKnMufEVBLJxAJwJ7U9sDH3fX0CxnIB4orMyuilTyRh6g+0bfDgQ2p/YHrrQD+jV6qb/SdRrMit8TRWwyEabxgFwJrQnsQt0rR+LR3VqFNiGHRBv73ge9EZiM+haPyicuRcVmIxzAMTMl9wfi3sGtBuxF3ShH92C29yJTteU+ohbRrZk3Qe9hdgY+tYPnOqanA+mTN33ZGKE06HQbsQu0LV+MF8+94rU5dK8B8/KyJaI+6D9ie2hC/3Q12QnSnYLn5p9P/6d0D7EltAh5wz/Hv8exON/LUjHOuz5CksAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	box-sizing: content-box;
	border: none;
	font: normal 12px arial, tahoma, sans-serif;
	float: left;
	cursor: crosshair;
}

div.CanvasXpressConfiguratorColorExtra {
	box-sizing: content-box;
	background-image:
		url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
	background-repeat: no-repeat;
	border: none;
	font: normal 12px arial, tahoma, sans-serif;
	cursor: crosshair;
	overflow: hidden;
}

div.accordionHead {
	box-sizing: content-box;
	margin-top: 2px;
	height: 24px;
	overflow: hidden;
	float: left;
	cursor: pointer;
	vertical-align: middle;
	text-align: left;
	display: table-cell;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.accordionContent {
	box-sizing: content-box;
	overflow: auto;
}

div.hoverable:hover {
	box-sizing: content-box;
	background-color: #dfe8f6;
}

div.CanvasXpressContainer {
	box-sizing: content-box;
	position: relative;
	float: left;
	transition: all 1s linear;
}

div.CanvasXpressContainerNT {
	box-sizing: content-box;
	position: relative;
	float: left;
}

div.CanvasXpressHandlerVerticalOpen {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAANklEQVR42mNkIBIwgoi0tLT/IHrWrFmMyJLI4igKkRWjizGi60YHMI1YrUJXhKEQn3sxFOICAH1yHAgCw6JnAAAAAElFTkSuQmCC);
	position: relative;
	float: left;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div.CanvasXpressHandlerVerticalClose {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAAN0lEQVR42mNkIBIwogukpaX9B9GzZs1ixKkQpggGkBUz4lKErpgRXRFMAl0MRRDdXcjijAxEAgClNhwIDjZ11QAAAABJRU5ErkJggg==);
	position: relative;
	float: left;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div.CanvasXpressHandlerHorizontalOpen {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAAMElEQVR42mNkwAMYQURaWtp/ED1r1ixGnJLoCuAMbApQjEFXQJwkTmPxOgivV3ABAClDIAsKqUy5AAAAAElFTkSuQmCC);
	position: relative;
	float: left;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div.CanvasXpressHandlerHorizontalClose {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAAL0lEQVR42mNkwAMY0QXS0tL+g+hZs2YxMmKTwJBEl4Abi02COEm8xhJ0EEGvoAMAyTQgC6MMiAUAAAAASUVORK5CYII=);
	position: relative;
	float: left;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div.CanvasXpressWrapper {
	box-sizing: content-box;
	position: relative;
	float: left;
	line-height: 100%;
}

/***************/
/* Data Filter */
/***************/
div.CanvasXpressDataFilter {
	box-sizing: content-box;
	color: rgb(34, 34, 34);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataFilterToolbar {
	box-sizing: content-box;
  background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));
	border: 1px solid rgb(51, 122, 183);
	border-radius: 4px;
	color: rgb(34, 34, 34);
	cursor: move;
	font: normal 12px arial, tahoma, sans-serif;
	height: 32px;
	left: 0px;
	line-height: 100%;
	margin: 0px;
	padding: 2px;
	position: absolute;
	opacity: 0.95;
	top: 0px;
}

span.CanvasXpressDataFilterToolbarText {
	font: normal 12px arial, tahoma, sans-serif;
	left: 8px;
	line-height: 100%;
	position: relative;
	top: 9px;
}

img.CanvasXpressDataFilterToolbarImage {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: pointer;
	margin: 4px 4px 0px 0px !important;
  float: right;
}

img.CanvasXpressDataFilterToolbarImage {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressDataFilterToolbarImage:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

span.CanvasXpressDataFilterText {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: -3px;
	font: normal 12px arial, tahoma, sans-serif;
	left: 8px;
	line-height: 100%;
	position: relative;
	top: 9px;
}

span.CanvasXpressDataFilterTextActive {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVR42mNkoBAwjhqAMOA/EBCtCQiwGoAkjhOA7MFqADGGoGvGGga4DMGmGWcgohuCSzNOA5ANwacZrwFIhuBVM4gS0oAZAAD1oisRsByngAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: -3px;
	font: normal 12px arial, tahoma, sans-serif;
	left: 8px;
	line-height: 100%;
	position: relative;
	top: 9px;
}

div.CanvasXpressDataFilterContainer {
	box-sizing: content-box;
	border: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 38px;
}

input[type=checkbox].CanvasXpressCheckbox {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

input[type=checkbox].CanvasXpressDataFilterContainerItem {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

input[type=checkbox].CanvasXpressDataFilterContainerItemSelected {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

input[type=checkbox].CanvasXpressCheckbox+label.CanvasXpressCheckboxLabel
	{
	padding-left: 18px;
	height: 13px;
	display: inline-block;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font: normal 12px arial, tahoma, sans-serif;
	vertical-align: middle;
	margin: 2px;
	cursor: pointer;
}

input[type=checkbox].CanvasXpressDataFilterContainerItem+label.CanvasXpressCheckboxLabel
	{
	padding-left: 18px;
	height: 13px;
	display: inline-block;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font: normal 12px arial, tahoma, sans-serif;
	vertical-align: middle;
	margin: 2px;
	cursor: pointer;
}

input[type=checkbox].CanvasXpressDataFilterContainerItemSelected+label.CanvasXpressCheckboxLabel
	{
	padding-left: 18px;
	height: 13px;
	display: inline-block;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font: normal 12px arial, tahoma, sans-serif;
	vertical-align: middle;
	margin: 2px;
	cursor: pointer;
}

input[type=checkbox].CanvasXpressCheckbox:checked+label.CanvasXpressCheckboxLabel
	{
	background-position: 0 -13px;
}

input[type=checkbox].CanvasXpressDataFilterContainerItemSelected:checked+label.CanvasXpressCheckboxLabel
	{
	background-position: 0 -13px;
}

label.CanvasXpressCheckboxLabel {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAA0CAYAAABRnrIZAAACXElEQVR42uWUT2iSYRzHv+8Sm3O2aYSMBJU8jOqyRhc1ELGCBZuH/mCYB7WiY4XQNTpKdAtmuoMJwuogDUYHUSMlIoajSx2EKXMLOvhvW0OU94n3ffPd1uvr+3Zc+x1e3ufh+Tzv+zy/D18KfyqXy5FSqYR6vY6/S6vVwmKxwOFwUMyYfSQSCWI2m2Gz2SiIVD6fJ+VyGV6vl6KYLygUCtjtdlFgP9jpdEDFYjESCAQkgV4x66lwOExCoZBsiFn/X0LRaJQEg8F/u71MJkOYgdPplASz2SyhaZozIh6PE4PBMBBkNq9Wq/D5fBS/KJ1Ok0qlglqtJgB0Oh2MRiNcLteee0wdUmGffd4mp9UU/OfVFH/lg5q7Vm+Tq0vbmDMrEb6kofjmDoJuv2+Q73Uab66ocOakqj/09FOLTGqHcGtylPq4/osEsrt4cE6Jh9MaflMB9PhDkyxVupg1KbC5Q2Njh2Dx8jD0YyPiEFPzq03y/GuXfX9hVeKaRXPg10WFXdnYIvPfuoi4tIKzHglhrVar6HkKhQIEwk5NX5S6BxRXvoAX1u2+Lgn0KpV6C7a5fv892dDCQoSD7vjuyoZex19xkMfjkQ0lk0kOmnV7ZUPvUgkOmpm5KRtaXl4EK+zUBadsaLWYBS/s2LhJEmg1KxAIqzo+IQrstn/gSAv7snQMTMLOTXBhIylsa2gYvYR9cpZm5ySFfVQEegmr7rbZOYGwsfUTYBLWNtrAGtGhl7A39E1+I4Gwkc0R9EvYxs89qK+w+c449iesqX2w2eLC6k+BSdj7OmGjD4GwvwHoyQhLMetK1QAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	white-space: nowrap;
}

div.CanvasXpressDataFilterContainerMaskNoOverflow {
	box-sizing: content-box;
	border: 1px solid #d0d0d0;
	margin: 5px;
	overflow: hidden;
}

div.CanvasXpressDataFilterContainerMask {
	box-sizing: content-box;
	border: 1px solid #d0d0d0;
	margin: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
}

div.CanvasXpressDataFilterContainerItem {
	box-sizing: content-box;
	color: #4181ba;
	height: 15px;
	padding: 1px 0px 0px 1px;
	overflow: hidden;
	white-space: nowrap;
}

div.CanvasXpressDataFilterContainerItemSelected {
	box-sizing: content-box;
	background-color: #dfe8f6;
	color: #4181ba;
	height: 15px;
	padding: 1px 0px 0px 1px;
	overflow: hidden;
	white-space: nowrap;
}

div.CanvasXpressDataFilterContainerHoverable {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	margin: 2px;
	margin-bottom: 4px;
}

div.CanvasXpressDataFilterContainerHoverable:hover {
	box-sizing: content-box;
	background-color: #dfe8f6;
}

div.CanvasXpressDataFilterContainerNumeric {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAOCAYAAADuQ3ZcAAAAF0lEQVR42mNkAAJGNOLChQv/cRNYdAAA0dgUqRX/AM0AAAAASUVORK5CYII=);
	background-repeat: repeat-x;
	clear: both;
	height: 14px;
	margin: 2px;
}

div.CanvasXpressDataFilterContainerMin {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVR42mNkgIIDBw78ZyACODg4MCLzGWGa7e3tidHPcPDgQRRDGEGaTc0tidIMA6dPHocbAjZAV9eQJAMuXz5PZQM0NA1IMuDG9QuoBqioqJBkwJ07d1ANkJRWJ8mA509vUtkAUVFFkgx4/fo+qgG8fHIkGfD50yMqGgAiQIaws4oTpfnn75eoSRnGoCgzUQIoNgAAbjRcEcsB8BEAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	float: left;
	height: 14px;
	position: relative;
	width: 14px;
	z-index: 10002;
}

div.CanvasXpressDataFilterContainerMax {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVR42mNkgIIDBw78ZyACODg4MCLzGWGa7e3tidHPcPDgQRRDGEGaTc0tidIMA6dPHocbAjZAV9eQJAMuXz5PZQM0NA1IMuDG9QuoBqioqJBkwJ07d1ANkJRWJ8mA509vUtkAUVFFkgx4/fo+qgG8fHIkGfD50yMqGgAiQIaws4oTpfnn75eoSRnGoCgzUQIoNgAAbjRcEcsB8BEAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	float: left;
	height: 14px;
	position: relative;
	width: 14px;
	z-index: 10002;
}

div.CanvasXpressDataFilterContainerRange {
	box-sizing: content-box;
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAOCAYAAADuQ3ZcAAAAFklEQVR42mNkAAJGNMKxcdd/3AQWHQAD/g7xOirtNAAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	float: left;
	height: 14px;
	left: 0px;
	position: relative;
	z-index: 10001;
}

input.CanvasXpressDataFilterContainerMinValue {
	border: 1px solid rgba(245, 245, 245, 0.95);
	color: rgb(51, 122, 183);
	float: left;
	font: normal 12px arial, tahoma, sans-serif;
	margin-bottom: 2px;
	margin-left: 1px;
	line-height: 100%;
	width: 40px;
}

input.CanvasXpressDataFilterContainerMaxValue {
	border: 1px solid rgba(245, 245, 245, 0.95);
	color: rgb(51, 122, 183);
	float: right;
	font: normal 12px arial, tahoma, sans-serif;
	margin-bottom: 2px;
	margin-right: 1px;
	line-height: 100%;
	text-align: right;
	width: 40px;
}

div.CanvasXpressDataFilterContainerScaleNone {
	box-sizing: content-box;
	background-image:
		url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

div.CanvasXpressDataFilterContainerScaleLinearLog {
	box-sizing: content-box;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAcElEQVR42mNkoDFgpIsFa9eu/R8cHEyqZf+JcSDdLWAC4n8kWgDS8xeXZRg+ALFBNC4+AR+AxAqBuB9KT0CxgBCNxwJsbDA9zC0gIQ6ItwCmGxufbAuQUtR/ZBMIBBFRAK8muliAI3ioYwE1AM0tAAB/xqIRdKGeOwAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

div.CanvasXpressDataFilterContainerScaleLogLinear {
	box-sizing: content-box;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAdElEQVR42mNkoDFgpJcF/0m1bO3atf+Dg4MJ6qG7BUxA/I9EC5iA7L+4LMPmAxC7EIgn4ODj9AFIDJkPkke3gBCN1QJsbBg9/C2AyVUCcQe1LEBOAO1AXIGWIMiygAGLBdh8RjIgpIkuFhCjjmwLKAY0twAAISOOEQIlMUAAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

select.CanvasXpressDataFilterContainerString {
	background-color: rgba(255, 255, 255, 0.95);
	font: normal 12px arial, tahoma, sans-serif;
	margin-left: 3px;
	margin-bottom: 3px;
}

div.CanvasXpressDataFilterHead {
	box-sizing: content-box;
  background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));
	border: 1px solid rgb(51, 122, 183);
	border-radius: 4px;
	color: rgb(34, 34, 34);
	cursor: pointer;
	float: left;
	height: 30px;
	margin-top: 2px;
	overflow: hidden;
	opacity: 0.95;
	padding: 2px;
	text-align: left;
	vertical-align: middle;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataFilterHeadActive {
	box-sizing: content-box;
  background: linear-gradient(rgb(243, 253, 255), rgb(217,232,251));
	border: 1px solid rgb(51, 122, 183);
	border-radius: 4px 4px 0px 0px;
	color: rgb(34, 34, 34);
	cursor: pointer;
	float: left;
	height: 30px;
	margin-top: 2px;
	overflow: hidden;
	opacity: 0.95;
	padding: 2px;
	text-align: left;
	vertical-align: middle;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

div.CanvasXpressDataFilterContent {
  box-sizing: content-box;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgb(51, 122, 183);
  border-radius: 0px 0px 4px 4px;
  border-top: 0px;
  color: rgb(51, 122, 183);
  font: normal 12px arial, tahoma, sans-serif;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 2px;
}

/**
 * Scrollbars
 */

/* All scrollbar buttons*/

div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-button,
div.CanvasXpressDataTableVertical::-webkit-scrollbar-button,
div.CanvasXpressDataFilterContent::-webkit-scrollbar-button,
div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-button,
div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-button,
div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
select.CanvasXpressConfigurator::-webkit-scrollbar-button,
div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
select.CanvasXpressRemote::-webkit-scrollbar-button,
div.CanvasXpressBinNameContainer::-webkit-scrollbar-button
	{
	width: 3px;
	height: 3px;
}

/* Tracks can be of two different colors */

div.CanvasXpressDataFilterContent::-webkit-scrollbar-track,
div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-track,
div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-track,
select.CanvasXpressConfigurator::-webkit-scrollbar-track,
select.CanvasXpressRemote::-webkit-scrollbar-track
	{
	background-color: #FFFFFF;
}

div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-track, 
div.CanvasXpressDataTableVertical::-webkit-scrollbar-track,
div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
div.CanvasXpressBinNameContainer::-webkit-scrollbar-track
	{
	background-color: #F5F5F5;
}

/* All tracks -hovers */

div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-track:hover,
div.CanvasXpressDataTableVertical::-webkit-scrollbar-track:hover,
div.CanvasXpressDataFilterContent::-webkit-scrollbar-track:hover,
div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-track:hover,
div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-track:hover,
div.CanvasXpressDataExplorer::-webkit-scrollbar-track:hover,
select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
select.CanvasXpressRemote::-webkit-scrollbar-track:hover,
div.CanvasXpressBinNameContainer::-webkit-scrollbar-track:hover
	{
	background-color: #BEBEBE;
	border-radius: 6px;
}

/* scrollbar background could be of two different colors but match the style tracks above */

div.CanvasXpressDataFilterContent::-webkit-scrollbar,
div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar,
div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar,
select.CanvasXpressConfigurator::-webkit-scrollbar,
select.CanvasXpressRemote::-webkit-scrollbar
	{
	width: 6px;
	height: 6px;
	background-color: #FFFFFF;
}

div.CanvasXpressDataTableHorizontal::-webkit-scrollbar,
div.CanvasXpressDataTableVertical::-webkit-scrollbar,
div.CanvasXpressDataExplorer::-webkit-scrollbar,
div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
div.CanvasXpressBinNameContainer::-webkit-scrollbar
	{
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

/* All tracks thumbs */

div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-thumb,
div.CanvasXpressDataTableVertical::-webkit-scrollbar-thumb,
div.CanvasXpressDataFilterContent::-webkit-scrollbar-thumb,
div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-thumb,
div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-thumb,
div.CanvasXpressDataExplorer::-webkit-scrollbar-thumb,
select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
select.CanvasXpressRemote::-webkit-scrollbar-thumb,
div.CanvasXpressBinNameContainer::-webkit-scrollbar-thumb
	{
	background-color: #337AB7;
	border-radius: 3px;
	border: none;
}

div.CanvasXpressDataFilter::selection,
div.CanvasXpressDataFilterToolbar::selection
	{
	background: rgba(0, 0, 0, 0);
	color: rgb(34, 34, 34);
}

div.CanvasXpressDataFilterContainerItem::selection {
	background: rgba(0, 0, 0, 0);
	color: #4181ba;
}

/********/
/* Menu */
/********/

div.CanvasXpressLink {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	background-image:
		url(data:image/gif;base64,R0lGODlh+gABAIcAAOLj4/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAAD6AAEAAAgfAAMIHEiwoMGBAAQcXMiwocOHECNKnEixosWLGCMGBAA7);
	background-repeat: repeat-y;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 3px;
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 100%;
	margin: 0px;
	opacity: 0.95;
	padding: 0px;
	position: absolute;
	-moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
}

div.CanvasXpressTabMenuConfigurator {
	box-sizing: content-box;
	position: relative;
}

input.CanvasXpressTabMenuConfigurator {
	display: none;
}

input:not(:checked).CanvasXpressTabMenuConfigurator+section.CanvasXpressTabMenuConfigurator>div.CanvasXpressTabMenuConfigurator {
	display: none;
}

section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator
	{
	float: left;
}

section.CanvasXpressTabMenuConfigurator>div.CanvasXpressTabMenuConfigurator
	{
	float: right;
	width: 100%;
	margin: 22 0 0 -100%;
}

section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label.CanvasXpressTabMenuConfigurator
	{
	cursor: pointer;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}

section.CanvasXpressTabMenuConfigurator>div.CanvasXpressTabMenuConfigurator
	{
	box-sizing: border-box;
	padding: 0.5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator
	{
	box-sizing: border-box;
	margin: 0;
	padding: 0.5px;
	overflow: hidden;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 100%;
}

section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label.CanvasXpressTabMenuConfigurator
	{
	display: block;
	padding: 5px;
	border: 1px solid #ddd;
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background: #fff;
}

input:first-child.CanvasXpressTabMenuConfigurator+section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator
	{
	padding-left: 0;
}

section.CanvasXpressTabMenuConfigurator>div.CanvasXpressTabMenuConfigurator
	{
	position: relative;
	z-index: 1;
}

input:checked.CanvasXpressTabMenuConfigurator+section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator
	{
	position: relative;
	z-index: 2;
}

div.CanvasXpressMenu {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	border: 1px solid rgb(51, 122, 183);
	border-radius: 3px;
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	opacity: 0.95;
	-moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
}

ul.CanvasXpressList {
	background: transparent;
	border: 0px none;
	cursor: default;
	list-style: none;
	margin: 0px;
	overflow: hidden;
	padding: 2px;
}

li.CanvasXpressListItemSep {
	cursor: default;
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	font-size: 1px;
	height: 100%;
	line-height: 1px;
	list-style: none;
	margin: 0px;
	padding: 1px;
	width: 100%;
	white-space: nowrap;
}

input.CanvasXpressListItem {
	cursor: default;
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 100%;
	list-style: none;
	margin: 0px;
	padding: 1px;
	white-space: nowrap;
}

div.CanvasXpressListItem {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
}

li.CanvasXpressListItem {
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 1px 0px;
	cursor: default;
  display: block;
  font: normal 12px arial, tahoma, sans-serif;
  height: 100%;
  line-height: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  white-space: nowrap;
}

li.CanvasXpressListItemActive {
  background: linear-gradient(rgb(243, 253, 255), rgb(217,232,251));
  border-color: rgb(170, 204, 246);
	border-style: solid;
	border-width: 1px 0px;
	cursor: default;
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	height: 100%;
	line-height: 100%;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	white-space: nowrap;
}

li.CanvasXpressListItemScrollTop {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAARUlEQVR42mNkQAMXL178z0Ah0NfXZ0Tmo3BAFkhLS+M1IDw8kmHlyuV41Tx9+hTFIjiDWAtggBSLGMmxgFSLGKkRB4QAAILWJXgE49MrAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border: 0px;
	cursor: pointer;
	height: 9px;
	line-height: 9px;
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

li.CanvasXpressListItemScrollTopActive {
	background-color: rgb(219, 236, 244);
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAbUlEQVR42mNkQAOHb/38z0AhsFVjZ0Tmo3BAFmjIsOHULMLJwKDs1sFwd1cFw5vvuC258eQXikWMyBYoSOC2QIYXYgEMgCx68hm3RQ9eICxihFkgzI/bAk0xVAuQLbr+CrdFbz9CLGKkRhwQAgBYqyubRxy5uAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border: 1px;
	border-color: rgb(170, 204, 246);
	border-style: solid;
	cursor: pointer;
	height: 9px;
	line-height: 9px;
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

li.CanvasXpressListItemScrollBottom {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAASUlEQVR42mO8ePHifwYaA0YQAbJIWloar8Lw8EgMsZUrl+PV8/TpUwZ9fX1GRpgAqRYRawHcJ6RaRIoFGJbALCIcyvgBsgUgAACiryV42XltywAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border: 0px;
	cursor: pointer;
	height: 9px;
	line-height: 9px;
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

li.CanvasXpressListItemScrollBottomActive {
	background-color: rgb(219, 236, 244);
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAcklEQVR42mM8fOvnfwYaA0YQAbJImJ8NpyJNMQYGZbcODPG7uyoYrr/Cbfjbj78YbNXYGRlhAiCLFCRwWyTDi2oRyIInn3Fb8OAFxAK4T5At0pDBbZEIJ8QikAVvvuO24MYThAUYlsAsIjPo4QDZAhAAAK/AK5vjVTSgAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border: 1px;
	border-color: rgb(170, 204, 246);
	border-style: solid;
	cursor: pointer;
	height: 9px;
	line-height: 9px;
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

li.CanvasXpressListItemScrollSearch {
	border-color: rgb(170, 204, 246);
	border-style: solid;
	border-width: 1px;
	width: 100%;
}

input.CanvasXpressListItemScrollSearch {
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
	margin: 3px;
	outline-style: none;
	outline-width: 0px;
	padding-left: 5px;
	width: 93%;
}

a.CanvasXpressListItemA {
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0px 1px;
	color: rgb(34, 34, 34);
	cursor: pointer;
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
  margin: 0px;
  outline-style: none;
	outline-width: 0px;
  padding: 3px 3px 3px 38px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}

a.CanvasXpressListItemAActive {
	border-color: rgb(170, 204, 246);
	border-style: solid;
	border-width: 0px 1px;
	color: rgb(34, 34, 34);
  cursor: pointer;
  display: block;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
  margin: 0px;
  outline-style: none;
	outline-width: 0px;
	padding: 3px 3px 3px 38px;
	position: relative;
	text-decoration: none !important;
	white-space: nowrap;
}

a.CanvasXpressListItemAArrow {
	background:
		url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=)
		no-repeat scroll right 50% transparent;
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0px 1px;
  color: rgb(34, 34, 34);
	cursor: pointer;
  display: block;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
  margin: 0px;
  outline-style: none;
	outline-width: 0px;
	padding: 3px 3px 3px 38px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}

a.CanvasXpressListItemAArrowActive {
	background:
		url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=)
		no-repeat scroll right 50% transparent;
	border-color: rgb(170, 204, 246);
	border-style: solid;
	border-width: 0px 1px;
	color: rgb(34, 34, 34);
  cursor: pointer;
  display: block;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
	margin: 0px;
	outline-style: none;
	outline-width: 0px;
	padding: 3px 3px 3px 38px;
	position: relative;
	text-decoration: none !important;
	white-space: nowrap;
}

img.CanvasXpressListIcon {
	background-position: center;
	border: 0px none !important;
	color: rgb(34, 34, 34);
	cursor: pointer;
	font: normal 12px arial, tahoma, sans-serif;
	height: 24px;
	line-height: 24px;
	list-style: none;
	left: 3px;
	margin: 0px !important;
	padding: 0px;
	position: absolute;
	top: 3px;
	vertical-align: top;
	width: 24px;
	white-space: nowrap;
	background: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
}

span.CanvasXpressListItemText {
	color: rgb(34, 34, 34);
	cursor: pointer;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
	margin-right: 10px;
	white-space: nowrap;
}

input.CanvasXpressListItemText {
	color: rgb(34, 34, 34);
	cursor: pointer;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
	white-space: nowrap;
}

span.CanvasXpressListItemTextShort {
	color: rgb(34, 34, 34);
	cursor: pointer;
	float: right;
	font: italic 9px arial, tahoma, sans-serif;
	line-height: 24px;
	list-style: none;
	margin-left: 10px;
	white-space: nowrap;
}

span.CanvasXpressListItemTextSep {
	background-color: rgb(224, 224, 224);
	border-bottom: 1px solid;
	border-bottom-color: rgb(255, 255, 255);
	cursor: default;
	display: block;
	font: normal 12px arial, tahoma, sans-serif;
	font-size: 1px;
	line-height: 1px;
	list-style: none;
	margin: 2px 3px;
	overflow: hidden;
	white-space: nowrap;
}

table.CanvasXpressListItemTable {
	border: collapse;
	line-height: 20px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	padding-left: 3px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

img.CanvasXpressToolbarHelp {
  background: rgba(0,0,0,0) !important;
  border: 0px none !important;
  box-shadow: 0 0 0px rgba(0,0,0,0) !important;
	cursor: default;
	float: right;
	margin: 0px 0px 0px 2px !important;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

img.CanvasXpressToolbarHelp {
  transition: all 0.3s;
    -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

img.CanvasXpressToolbarHelp:hover {
    margin: 0 7px;  
  transform: scale(1.2);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,0.7)));
}

div.CanvasXpressToolbarHelp {
	box-sizing: content-box;
	background-color: rgba(245, 245, 245, 0.95);
	border-radius: 5px;
	border: 1px solid rgb(51, 122, 183);
	box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

p.CanvasXpressToolbarHelp {
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	margin: 0px;
	padding: 5px 5px 5px 20px;
}


div.CanvasXpressForm {
	box-sizing: content-box;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px;
	background-color: rgba(245, 245, 245, 0.95);
	color: rgb(34, 34, 34);
	cursor: move;
	font: normal 12px arial, tahoma, sans-serif;
	margin: 8px;
	padding: 8px;
	position: absolute;
	white-space: nowrap;
}

input.CanvasXpressFormButton {
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px 5px 5px 5px;
	color: rgb(34, 34, 34);
	cursor: pointer;
	float: left;
	height: 22px;
	margin-top: 2px;
	overflow: hidden;
	padding: 2px;
	vertical-align: middle;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

input.CanvasXpressFormButtonActive {
	background-color: rgba(245, 245, 245, 0.95);
	background-image:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mN89fnvf0aSiBvPf9GaAABVL3D5nF6uqAAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	border: 1px solid rgb(51, 122, 183);
	border-radius: 5px 5px 0px 0px;
	color: rgb(34, 34, 34);
	cursor: pointer;
	float: left;
	height: 22px;
	margin-top: 2px;
	overflow: hidden;
	opacity: 0.95;
	padding: 2px;
	vertical-align: middle;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
}

input.CanvasXpressFormText {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgb(51, 122, 183);
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	padding-left: 3px;
}

form.CanvasXpressFormForm {
	background-color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgb(51, 122, 183);
	color: rgb(34, 34, 34);
	cursor: default;
	font: normal 12px arial, tahoma, sans-serif;
	line-height: 24px;
	margin: 8px;
	overflow: auto;
	padding-left: 3px;
}

/*
 * CanvasXpress
 */
canvas.CanvasXpress {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
	-ms-user-select: none;
	transition: all 1s linear;
}

canvas.CanvasXpress:hover { /*border: 1px solid #23527c;*/
	border: 1px solid rgba(35, 82, 124, 0.2);
	border-radius: 6px;
	margin: -1px;
}

canvas.CanvasXpressUpload {
	border: 1px solid rgba(35, 82, 124, 0.2);
	border-radius: 6px;
	margin: -1px;
    background-image: url(https://canvasxpress.org/images/upload.png);
	background-size: contain;
	background-repeat: no-repeat;
}

canvas.CanvasXpress::selection {
	background: rgba(0, 0, 0, 0);
	color: rgb(0, 0, 0);
}

/*
 * full-screen-warning-container
 */
#full-screen-warning-container {
	background-color: transparent !important;
	opacity: 0.4 !important;
}

#full-screen-warning-container[fade-warning-out] {
	transition-property: opacity !important;
	transition-duration: 1ms !important;
	opacity: 0.0 !important;
}

#full-screen-warning-message {
	padding: 15px !important;
}

.full-screen-description {
	font-size: 100% !important;
}

#full-screen-domain-text {
	font-size: 100% !important;
	font-weight: bold !important;
}

.full-screen-approval-button,#full-screen-remember-decision {
	font-size: 100% !important;
}

@media (min-width: 300px) {
  div.CanvasXpressBin {
    transform: scale(0.5);
  }
}
@media (min-width: 450px) {
  div.CanvasXpressBin {
    transform: scale(0.75);
  }
}
@media (min-width: 600px) {
  div.CanvasXpressBin {
    transform: scale(1);
  }
}

/* Genie Effect */

.genie {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.genie .genie-step {
  background-repeat: no-repeat;
  background-image: inherit;
  position: absolute;
}
.genie.genie-expand .genie-step {
  -moz-transition: background-position 800ms ease-in-out;
  -webkit-transition: background-position 800ms ease-in-out;
  -o-transition: background-position 800ms ease-in-out;
  -ms-transition: background-position 800ms ease-in-out;
  transition: background-position 800ms ease-in-out;
}
.genie.genie-collapse .genie-step {
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.genie.genie-collapse.change-pace .genie-step {
  -moz-transition: background-position 800ms ease-in-out;
  -webkit-transition: background-position 800ms ease-in-out;
  -o-transition: background-position 800ms ease-in-out;
  -ms-transition: background-position 800ms ease-in-out;
  transition: background-position 800ms ease-in-out;
}
.genie.genie-expand.change-pace .genie-step {
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

/* Magic Effects */

@charset "UTF-8";
/*
Magic - Ver 1.3.0 - https://minimamente.com
Licensed under the MIT license
Copyright (c) 2018 Christian Pucci
*/
.magictime {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.puffIn {
  -webkit-animation-name: puffIn;
          animation-name: puffIn;
}
@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.puffOut {
  -webkit-animation-name: puffOut;
          animation-name: puffOut;
}
@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}
@keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}
.vanishIn {
  -webkit-animation-name: vanishIn;
          animation-name: vanishIn;
}
@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(90px);
            filter: blur(90px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(90px);
            filter: blur(90px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.vanishOut {
  -webkit-animation-name: vanishOut;
          animation-name: vanishOut;
}
@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.boingInUp {
  -webkit-animation-name: boingInUp;
          animation-name: boingInUp;
}
@-webkit-keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
            transform: perspective(800px) rotateX(-90deg);
  }
  
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
            transform: perspective(800px) rotateX(50deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
            transform: perspective(800px) rotateX(-90deg);
  }
  
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
            transform: perspective(800px) rotateX(50deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.boingOutDown {
  -webkit-animation-name: boingOutDown;
          animation-name: boingOutDown;
}
@-webkit-keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
            transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  
  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
            transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
            transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
@keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
            transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  
  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
            transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
            transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
.foolishIn {
  -webkit-animation-name: foolishIn;
          animation-name: foolishIn;
}
@-webkit-keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
            transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
            transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }
}
.foolishOut {
  -webkit-animation-name: foolishOut;
          animation-name: foolishOut;
}
@-webkit-keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
            transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
            transform: scale(0, 0) rotate(0deg);
  }
}
@keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
            transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
            transform: scale(0, 0) rotate(0deg);
  }
}
.holeIn {
  -webkit-animation-name: holeIn;
          animation-name: holeIn;
}
@-webkit-keyframes holeIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(360deg);
            transform: scale(0, 0) rotateY(360deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }
}
@keyframes holeIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(360deg);
            transform: scale(0, 0) rotateY(360deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }
}
.holeOut {
  -webkit-animation-name: holeOut;
          animation-name: holeOut;
}
@-webkit-keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
            transform: scale(0, 0) rotateY(180deg);
  }
}
@keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
            transform: scale(0, 0) rotateY(180deg);
  }
}
.swashIn {
  -webkit-animation-name: swashIn;
          animation-name: swashIn;
}
@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.swashOut {
  -webkit-animation-name: swashOut;
          animation-name: swashOut;
}
@-webkit-keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
@keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
.bombLeftOut {
  -webkit-animation-name: bombLeftOut;
          animation-name: bombLeftOut;
}
@-webkit-keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.bombRightOut {
  -webkit-animation-name: bombRightOut;
          animation-name: bombRightOut;
}
@-webkit-keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.magic {
  -webkit-animation-name: magic;
          animation-name: magic;
}
@-webkit-keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
            transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
            transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
            transform: scale(0, 0) rotate(270deg);
  }
}
@keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
            transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
            transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
            transform: scale(0, 0) rotate(270deg);
  }
}
.swap {
  -webkit-animation-name: swap;
          animation-name: swap;
}
@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}
.twisterInDown {
  -webkit-animation-name: twisterInDown;
          animation-name: twisterInDown;
}
@-webkit-keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
            transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
            transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
.twisterInUp {
  -webkit-animation-name: twisterInUp;
          animation-name: twisterInUp;
}
@-webkit-keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
            transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
@keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
            transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
.spaceInDown {
  -webkit-animation-name: spaceInDown;
          animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInLeft {
  -webkit-animation-name: spaceInLeft;
          animation-name: spaceInLeft;
}
@-webkit-keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInRight {
  -webkit-animation-name: spaceInRight;
          animation-name: spaceInRight;
}
@-webkit-keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInUp {
  -webkit-animation-name: spaceInUp;
          animation-name: spaceInUp;
}
@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceOutDown {
  -webkit-animation-name: spaceOutDown;
          animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }
}
@keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }
}
.spaceOutLeft {
  -webkit-animation-name: spaceOutLeft;
          animation-name: spaceOutLeft;
}
@-webkit-keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }
}
.spaceOutRight {
  -webkit-animation-name: spaceOutRight;
          animation-name: spaceOutRight;
}
@-webkit-keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }
}
.spaceOutUp {
  -webkit-animation-name: spaceOutUp;
          animation-name: spaceOutUp;
}
@-webkit-keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }
}
.perspectiveDown {
  -webkit-animation-name: perspectiveDown;
          animation-name: perspectiveDown;
}
@-webkit-keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }
}
@keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }
}
.perspectiveDownReturn {
  -webkit-animation-name: perspectiveDownReturn;
          animation-name: perspectiveDownReturn;
}
@-webkit-keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.perspectiveLeft {
  -webkit-animation-name: perspectiveLeft;
          animation-name: perspectiveLeft;
}
@-webkit-keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }
}
@keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }
}
.perspectiveLeftReturn {
  -webkit-animation-name: perspectiveLeftReturn;
          animation-name: perspectiveLeftReturn;
}
@-webkit-keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveRight {
  -webkit-animation-name: perspectiveRight;
          animation-name: perspectiveRight;
}
@-webkit-keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }
}
@keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }
}
.perspectiveRightReturn {
  -webkit-animation-name: perspectiveRightReturn;
          animation-name: perspectiveRightReturn;
}
@-webkit-keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveUp {
  -webkit-animation-name: perspectiveUp;
          animation-name: perspectiveUp;
}
@-webkit-keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }
}
@keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }
}
.perspectiveUpReturn {
  -webkit-animation-name: perspectiveUpReturn;
          animation-name: perspectiveUpReturn;
}
@-webkit-keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.rotateDown {
  -webkit-animation-name: rotateDown;
          animation-name: rotateDown;
}
@-webkit-keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
            transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
            transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
.rotateLeft {
  -webkit-animation-name: rotateLeft;
          animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
            transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
            transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
            transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
            transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
.rotateRight {
  -webkit-animation-name: rotateRight;
          animation-name: rotateRight;
}
@-webkit-keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
            transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
            transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
            transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
            transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}

.rotateUp {
  -webkit-animation-name: rotateUp;
          animation-name: rotateUp;
}
@-webkit-keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
            transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
            transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
.slideDown {
  -webkit-animation-name: slideDown;
          animation-name: slideDown;
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.slideDownReturn {
  -webkit-animation-name: slideDownReturn;
          animation-name: slideDownReturn;
}
@-webkit-keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
.slideLeft {
  -webkit-animation-name: slideLeft;
          animation-name: slideLeft;
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.slideLeftReturn {
  -webkit-animation-name: slideLeftReturn;
          animation-name: slideLeftReturn;
}
@-webkit-keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
          transform: translateX(0%);
  }
}
.slideRight {
  -webkit-animation-name: slideRight;
          animation-name: slideRight;
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.slideRightReturn {
  -webkit-animation-name: slideRightReturn;
          animation-name: slideRightReturn;
}
@-webkit-keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
.slideUp {
  -webkit-animation-name: slideUp;
          animation-name: slideUp;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
.slideUpReturn {
  -webkit-animation-name: slideUpReturn;
          animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
.openDownLeft {
  -webkit-animation-name: openDownLeft;
          animation-name: openDownLeft;
}
@-webkit-keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openDownLeftReturn {
  -webkit-animation-name: openDownLeftReturn;
          animation-name: openDownLeftReturn;
}
@-webkit-keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openDownRight {
  -webkit-animation-name: openDownRight;
          animation-name: openDownRight;
}
@-webkit-keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}

.openDownRightReturn {
  -webkit-animation-name: openDownRightReturn;
          animation-name: openDownRightReturn;
}
@-webkit-keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openUpLeft {
  -webkit-animation-name: openUpLeft;
          animation-name: openUpLeft;
}
@-webkit-keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpLeftReturn {
  -webkit-animation-name: openUpLeftReturn;
          animation-name: openUpLeftReturn;
}
@-webkit-keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openUpRight {
  -webkit-animation-name: openUpRight;
          animation-name: openUpRight;
}
@-webkit-keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpRightReturn {
  -webkit-animation-name: openUpRightReturn;
          animation-name: openUpRightReturn;
}
@-webkit-keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openDownLeftOut {
  -webkit-animation-name: openDownLeftOut;
          animation-name: openDownLeftOut;
}
@-webkit-keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openDownRightOut {
  -webkit-animation-name: openDownRightOut;
          animation-name: openDownRightOut;
}
@-webkit-keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpLeftOut {
  -webkit-animation-name: openUpLeftOut;
          animation-name: openUpLeftOut;
}
@-webkit-keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpRightOut {
  -webkit-animation-name: openUpRightOut;
          animation-name: openUpRightOut;
}
@-webkit-keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.tinDownIn {
  -webkit-animation-name: tinDownIn;
          animation-name: tinDownIn;
}
@-webkit-keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
.tinDownOut {
  -webkit-animation-name: tinDownOut;
          animation-name: tinDownOut;
}
@-webkit-keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }
}
@keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }
}
.tinLeftIn {
  -webkit-animation-name: tinLeftIn;
          animation-name: tinLeftIn;
}
@-webkit-keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
.tinLeftOut {
  -webkit-animation-name: tinLeftOut;
          animation-name: tinLeftOut;
}
@-webkit-keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }
}
@keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }
}
.tinRightIn {
  -webkit-animation-name: tinRightIn;
          animation-name: tinRightIn;
}
@-webkit-keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
.tinRightOut {
  -webkit-animation-name: tinRightOut;
          animation-name: tinRightOut;
}
@-webkit-keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }
}
@keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }
}
.tinUpIn {
  -webkit-animation-name: tinUpIn;
          animation-name: tinUpIn;
}
@-webkit-keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
.tinUpOut {
  -webkit-animation-name: tinUpOut;
          animation-name: tinUpOut;
}
@-webkit-keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }
}
@keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }
}


