.ui-exporting {
	display: inline-block;
	
	position: relative;

	color: var(--gray-800);

	font-size: 1.0rem;
}


.ui-exporting > .ui-exporting-icon {
	width: 3.5em;
	height: 3.5em;
	
	border-radius: 50%;
 
    cursor: pointer;
    
    transition: background-color .15s ease-in-out;
    
    /*
    z-index: 1;
	*/
}
.ui-exporting > .ui-exporting-icon:hover {
	background: var(--gray-300);
}
.ui-exporting > .ui-exporting-icon:focus {
	background: var(--gray-300);
}

.ui-exporting > .ui-exporting-icon:before {
	display: inline-block;
  
  	/*
  	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
  	*/
  	
	font-family: 'Icons';

	font-style: normal;
	font-weight: normal;

	text-decoration: inherit;
	text-align: center;
	speak: none;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	        
	background: none !important;
	
	
	color: var(--gray-600);

	font-size: 2.2em;

	content: '\f0ea';
	/*
    content: '\f15c';
	*/
}
.ui-exporting > .ui-exporting-icon:focus:before {
	color: var(--gray-700);
}


.ui-exporting-list {
	display: none;

	position: absolute;
	bottom: 0;
	right: -0.4rem;
	
	transform: translateY(100%);
	
	padding: 0.7rem 0;
	
	font-size: 1.0rem;
	
	background: #ffffff;
	
	border: 0.667px solid #c5c5c5;
	border-radius: 8px;

	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);


	z-index: 9999;
	/*
	display: none;
	
	position: absolute;
	bottom: 0;
	left: 0;
	
	min-width: 100%;
	
	background: #ffffff;
	
	border: 0.667px solid #c5c5c5;
	
	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);

	
	transform: translateY(100%);

	overflow: hidden;

	z-index: 9999;
	*/
}
.ui-exporting-list.-show {
	display: block;
}

/*
.ui-exporting-option
*/
.ui-exporting-list > * {
	display: flex;
    justify-content: start;
    align-items: center;
	
	padding: 0 0.9rem;
	
	width: 8.7rem;
	height: 3rem;

	font-size: 1.3rem;
	
	color: var(--gray-700);
	
	cursor: pointer;
}
.ui-exporting-list > *:hover {
	background: var(--gray-200);
}
.ui-exporting-list > *:after {
	font-weight: 400;
}
.ui-exporting-list > *:before {
	display: inline-block;
  
	/*
	font-family: 'Font Awesome 5 Free';
  	font-weight: 400;
  	*/

	font-family: 'outline-icons';
	
	font-style: normal;
	font-weight: normal;

	text-decoration: inherit;
	text-align: center;
	speak: none;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	        
	background: none !important;
	
	
	margin-right: 0.9rem;
	
	color: var(--gray-600);
	
	font-size: 1.8rem;
}


.ui-exporting-option-pdf:before {
	content: '\f1c1';
}
.ui-exporting-option-pdf:after {
	content: 'PDF';
}


.ui-exporting-option-png:before {
	content: '\f1c4';
}
.ui-exporting-option-png:after {
	content: 'PNG';
}


.ui-exporting-option-excel:before {
	content: '\f1c3';
}
.ui-exporting-option-excel:after {
	content: 'EXCEL';
}


.ui-exporting-option-csv:before {
	content: '\f15c';
}
.ui-exporting-option-csv:after {
	content: 'CSV';
}



.ui-exporting-spinner {
	display: inline-block;
	position: absolute;
	/*
	left: 0;
	top: 0;
	*/
	
	left: -0.15em;
	top: -0.15em;

	/*
	font-size: 1.0em;
	*/
	/*
	z-index: 2;
	*/
	/*
	width: 80px;
	height: 80px;
	*/

	pointer-events: none;
}
.ui-exporting-spinner div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 3.8em;
	height: 3.8em;
	/*
	margin: 8px;
	*/
	/*
	border: 0.4em solid var(--gray-400);
	*/
	border-width: 0.4em;
	border-style: solid;
	/*
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	*/
	border-radius: 50%;

	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	
	border-top-color: var(--gray-400);
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	/*
	border-color: var(--gray-400) transparent transparent transparent;
	*/
}
.ui-exporting-spinner div:nth-child(1) {
	animation-delay: -0.45s;
}
.ui-exporting-spinner div:nth-child(2) {
	animation-delay: -0.3s;
}
.ui-exporting-spinner div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}