/**
 * CSS for SVG icons across the site
 */

/* hide icon definitions (loaded right after body tag) */
body > svg { display: none; }

/**
 * Icons as SVG element (<svg>)
 */
.col-icon { 
	display: inline-block; 
	width: 1em; 
	height: 1em;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dark-gray-sidebar .col-icon, .red-sidebar .col-icon { fill: #fff; }

/**
 * Icons as background image (of some other element like <i>)
 */
.col-icon-bg, .ui-icon { 
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block; 
	width: 1em; 
	height: 1em; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: middle;
}
.col-icon-plus { background-image: url(images/SVG/plus-square.svg); }
.col-icon-minus { background-image: url(images/SVG/minus-square.svg); }
.col-icon-lock { background-image: url(images/SVG/lock.svg); }
.col-icon-block-u { background-image: url(images/SVG/block-u.svg); }

/* dataTables */
.sorting .col-icon-bg { background-image: url(images/SVG/unsorted.svg); }
.sorting_asc .col-icon-bg { background-image: url(images/SVG/sort-up.svg); }
.sorting_desc .col-icon-bg { background-image: url(images/SVG/sort-down.svg); }
.dataTables_paginate [class*="previous"] .col-icon-bg { background-image: url(images/SVG/angle-left.svg); }
.dataTables_paginate [class*="next"] .col-icon-bg { background-image: url(images/SVG/angle-right.svg); }

/* datepicker */
.ui-icon { cursor: pointer; }
.ui-icon-circle-triangle-w { background-image: url(images/SVG/chevron-left.svg); }
.ui-icon-circle-triangle-e { background-image: url(images/SVG/chevron-right.svg); }

/**
 * Other icon formatting
 */
.col-icon-small { width: .9em; height: .9em; }
.col-icon-medium { width: 1.3em; height: 1.3em; }
.col-icon-large { width: 2em; height: 2em; }
.col-icon-white { fill: #fff;}
.col-icon-left { margin-left: 0; margin-right: 5px; }
.col-icon-right { margin-left: 5px; margin-right: 0; }

/**
 * Animations
 */
.col-icon-spin { 
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-ms-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}