822 lines
		
	
	
		
			20 KiB
		
	
	
	
		
			CSS
		
	
	
			
		
		
	
	
			822 lines
		
	
	
		
			20 KiB
		
	
	
	
		
			CSS
		
	
	
/*  THEME COLORs
 | 
						|
========================================================================== */
 | 
						|
/* Looks good on chrome default color profile */
 | 
						|
/* looks good in sRGB but washed up on chrome default 
 | 
						|
$color-primary:						#826bb0;
 | 
						|
$color-success:						#31cb55;
 | 
						|
$color-info:						#5e93ec;
 | 
						|
$color-warning:						#eec559;
 | 
						|
$color-danger:						#dc4b92;
 | 
						|
$color-fusion:						darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
 | 
						|
/*  Color Polarity
 | 
						|
========================================================================== */
 | 
						|
/*  PAINTBUCKET MIXER
 | 
						|
========================================================================== */
 | 
						|
/* the grays */
 | 
						|
/* the sapphires */
 | 
						|
/* the emeralds */
 | 
						|
/* the amethyths */
 | 
						|
/* the topaz */
 | 
						|
/* the rubies */
 | 
						|
/* the graphites */
 | 
						|
/*  Define universal border difition (div outlines, etc)
 | 
						|
========================================================================== */
 | 
						|
/*  MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
 | 
						|
========================================================================== */
 | 
						|
/* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
 | 
						|
/* bootstrap reference xs: 0,  sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
 | 
						|
/* global var used for spacing*/
 | 
						|
/* Uniform Padding variable */
 | 
						|
/* Heads up! This is a global scoped variable - changing may impact the whole template */
 | 
						|
/*   BOOTSTRAP OVERRIDES (bootstrap variables)
 | 
						|
========================================================================== */
 | 
						|
/* usage: theme-colors("primary"); */
 | 
						|
/* forms */
 | 
						|
/*$input-height:							calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
 | 
						|
/* links */
 | 
						|
/* checkbox */
 | 
						|
/*$custom-file-height-inner:				calc(2.25rem - 1px);*/
 | 
						|
/* not part of bootstrap variable */
 | 
						|
/* custom checkbox */
 | 
						|
/* custom range */
 | 
						|
/* select */
 | 
						|
/* badge */
 | 
						|
/* cards */
 | 
						|
/*border radius*/
 | 
						|
/* alert */
 | 
						|
/* toast */
 | 
						|
/* breadcrumb */
 | 
						|
/* input button */
 | 
						|
/* nav link */
 | 
						|
/* nav, tabs, pills */
 | 
						|
/* tables */
 | 
						|
/* dropdowns */
 | 
						|
/* dropdowns sizes */
 | 
						|
/* popovers */
 | 
						|
/* tooltips */
 | 
						|
/* modal */
 | 
						|
/* reference guide
 | 
						|
http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
 | 
						|
8px = 0.5rem
 | 
						|
9px = 0.5625rem
 | 
						|
10px = 0.625rem
 | 
						|
11px = 0.6875rem
 | 
						|
12px = 0.75rem
 | 
						|
13px = 0.8125rem
 | 
						|
14px = 0.875rem
 | 
						|
15px = 0.9375rem
 | 
						|
16px = 1rem (base)
 | 
						|
17px = 1.0625rem
 | 
						|
18px = 1.125rem
 | 
						|
19px = 1.1875rem
 | 
						|
20px = 1.25rem
 | 
						|
21px = 1.3125rem
 | 
						|
22px = 1.375rem
 | 
						|
24px = 1.5rem
 | 
						|
25px = 1.5625rem
 | 
						|
26px = 1.625rem
 | 
						|
28px = 1.75rem
 | 
						|
30px = 1.875rem
 | 
						|
32px = 2rem
 | 
						|
34px = 2.125rem
 | 
						|
36px = 2.25rem
 | 
						|
38px = 2.375rem
 | 
						|
40px = 2.5rem
 | 
						|
*/
 | 
						|
/* Fonts */
 | 
						|
/* carousel */
 | 
						|
/*  BASE VARS
 | 
						|
========================================================================== */
 | 
						|
/* font vars below will auto change to rem values using function rem($value)*/
 | 
						|
/* 11px   */
 | 
						|
/* 12px   */
 | 
						|
/* 12.5px */
 | 
						|
/* 14px   */
 | 
						|
/* 15px   */
 | 
						|
/* 16px   */
 | 
						|
/* 28px   */
 | 
						|
/*  Font Family
 | 
						|
========================================================================== */
 | 
						|
/*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
 | 
						|
/*  ANIMATIONS
 | 
						|
========================================================================== */
 | 
						|
/* this addresses all animation related to nav hide to nav minify */
 | 
						|
/*  Z-INDEX declearation
 | 
						|
========================================================================== */
 | 
						|
/* we adjust bootstrap z-index to be higher than our higest z-index*/
 | 
						|
/*  CUSTOM ICON PREFIX 
 | 
						|
========================================================================== */
 | 
						|
/*  PRINT CSS (landscape or portrait)
 | 
						|
========================================================================== */
 | 
						|
/* landscape or portrait */
 | 
						|
/* auto, letter */
 | 
						|
/*  Common Element Variables
 | 
						|
========================================================================== */
 | 
						|
/* Z-index decleartion "birds eye view"
 | 
						|
========================================================================== */
 | 
						|
/*  Components
 | 
						|
========================================================================== */
 | 
						|
/*  PAGE HEADER STUFF
 | 
						|
========================================================================== */
 | 
						|
/* colors */
 | 
						|
/* height */
 | 
						|
/* logo */
 | 
						|
/* try not to go beywond the width of $main_nav_width value */
 | 
						|
/* you may need to change this depending on your logo design */
 | 
						|
/* adjust this as you see fit : left, right, center */
 | 
						|
/* icon font size (not button) */
 | 
						|
/* search input box */
 | 
						|
/* suggestion: #ccced0*/
 | 
						|
/* btn */
 | 
						|
/* dropdown: app list */
 | 
						|
/* badge */
 | 
						|
/* COMPONENTS & MODS */
 | 
						|
/*  NAVIGATION STUFF
 | 
						|
 | 
						|
Guide:
 | 
						|
 | 
						|
aside.page-sidebar ($nav-width, $nav-background)
 | 
						|
	.page-logo
 | 
						|
	.primary-nav
 | 
						|
		.info-card
 | 
						|
		ul.nav-menu
 | 
						|
			li
 | 
						|
				a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
 | 
						|
					icon 
 | 
						|
					span
 | 
						|
					collapse-sign 
 | 
						|
					
 | 
						|
				ul.nav-menu-sub-one  
 | 
						|
					li
 | 
						|
						a ($nav-level-1... $nav-sub-link-height)
 | 
						|
							span
 | 
						|
							collapse-sign
 | 
						|
 | 
						|
						ul.nav-menu-sub-two
 | 
						|
							li
 | 
						|
								a ($nav-level-2... $nav-sub-link-height)
 | 
						|
									span
 | 
						|
 | 
						|
		p.nav-title ($nav-title-*...)
 | 
						|
 | 
						|
 | 
						|
========================================================================== */
 | 
						|
/* main navigation */
 | 
						|
/* left panel */
 | 
						|
/* nav parent level-0 */
 | 
						|
/* nav icon sizes */
 | 
						|
/* badge default */
 | 
						|
/* all child */
 | 
						|
/* nav title */
 | 
						|
/* nav Minify */
 | 
						|
/* when the menu pops on hover */
 | 
						|
/* navigation Width */
 | 
						|
/* partial visibility of the menu */
 | 
						|
/* top navigation */
 | 
						|
/* nav Info Card (appears below the logo) */
 | 
						|
/* width is auto */
 | 
						|
/* nav DL labels for all child */
 | 
						|
/* will be pulled to left as a negative value */
 | 
						|
/*   MISC Settings
 | 
						|
========================================================================== */
 | 
						|
/* List Table */
 | 
						|
/*   PAGE SETTINGS
 | 
						|
========================================================================== */
 | 
						|
/*   PAGE BREADCRUMB 
 | 
						|
========================================================================== */
 | 
						|
/*   PAGE COMPONENT PANELS 
 | 
						|
========================================================================== */
 | 
						|
/*   PAGE COMPONENT PROGRESSBARS 
 | 
						|
========================================================================== */
 | 
						|
/*   PAGE COMPONENT MESSENGER 
 | 
						|
========================================================================== */
 | 
						|
/*   FOOTER
 | 
						|
========================================================================== */
 | 
						|
/*   GLOBALS
 | 
						|
========================================================================== */
 | 
						|
/* ACCESSIBILITIES */
 | 
						|
/*// Container ratio
 | 
						|
$ct-container-ratio: (1/1.618) !default;
 | 
						|
 | 
						|
// Text styles for labels
 | 
						|
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
 | 
						|
$ct-text-size: 0.75rem !default;
 | 
						|
$ct-text-align: flex-start !default;
 | 
						|
$ct-text-justify: flex-start !default;
 | 
						|
$ct-text-line-height: 1;
 | 
						|
 | 
						|
// Grid styles
 | 
						|
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
 | 
						|
$ct-grid-dasharray: 2px !default;
 | 
						|
$ct-grid-width: 1px !default;
 | 
						|
$ct-grid-background-fill: none !default;
 | 
						|
 | 
						|
// Line chart properties
 | 
						|
$ct-line-width: 4px !default;
 | 
						|
$ct-line-dasharray: false !default;
 | 
						|
 | 
						|
// Line chart point, can be either round or square
 | 
						|
$ct-point-shape: round !default;
 | 
						|
// Area fill transparency between 0 and 1
 | 
						|
$ct-area-opacity: 0.1 !default;
 | 
						|
 | 
						|
// Bar chart bar width
 | 
						|
$ct-bar-width: 10px !default;
 | 
						|
 | 
						|
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
 | 
						|
$ct-donut-width: 60px !default;
 | 
						|
*/
 | 
						|
.ct-label {
 | 
						|
  fill: rgba(0, 0, 0, 0.4);
 | 
						|
  color: rgba(0, 0, 0, 0.4);
 | 
						|
  font-size: 0.75rem;
 | 
						|
  line-height: 1; }
 | 
						|
 | 
						|
.ct-chart-line .ct-label,
 | 
						|
.ct-chart-bar .ct-label {
 | 
						|
  display: block;
 | 
						|
  display: -webkit-box;
 | 
						|
  display: -ms-flexbox;
 | 
						|
  display: flex; }
 | 
						|
 | 
						|
.ct-chart-pie .ct-label,
 | 
						|
.ct-chart-donut .ct-label {
 | 
						|
  dominant-baseline: central; }
 | 
						|
 | 
						|
.ct-label.ct-horizontal.ct-start {
 | 
						|
  -webkit-box-align: flex-end;
 | 
						|
  -ms-flex-align: flex-end;
 | 
						|
  align-items: flex-end;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-label.ct-horizontal.ct-end {
 | 
						|
  -webkit-box-align: flex-start;
 | 
						|
  -ms-flex-align: flex-start;
 | 
						|
  align-items: flex-start;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-label.ct-vertical.ct-start {
 | 
						|
  -webkit-box-align: flex-end;
 | 
						|
  -ms-flex-align: flex-end;
 | 
						|
  align-items: flex-end;
 | 
						|
  -webkit-box-pack: flex-end;
 | 
						|
  -ms-flex-pack: flex-end;
 | 
						|
  justify-content: flex-end;
 | 
						|
  text-align: right;
 | 
						|
  text-anchor: end; }
 | 
						|
 | 
						|
.ct-label.ct-vertical.ct-end {
 | 
						|
  -webkit-box-align: flex-end;
 | 
						|
  -ms-flex-align: flex-end;
 | 
						|
  align-items: flex-end;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-chart-bar .ct-label.ct-horizontal.ct-start {
 | 
						|
  -webkit-box-align: flex-end;
 | 
						|
  -ms-flex-align: flex-end;
 | 
						|
  align-items: flex-end;
 | 
						|
  -webkit-box-pack: center;
 | 
						|
  -ms-flex-pack: center;
 | 
						|
  justify-content: center;
 | 
						|
  text-align: center;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
 | 
						|
  -webkit-box-align: flex-start;
 | 
						|
  -ms-flex-align: flex-start;
 | 
						|
  align-items: flex-start;
 | 
						|
  -webkit-box-pack: center;
 | 
						|
  -ms-flex-pack: center;
 | 
						|
  justify-content: center;
 | 
						|
  text-align: center;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
 | 
						|
  -webkit-box-align: flex-end;
 | 
						|
  -ms-flex-align: flex-end;
 | 
						|
  align-items: flex-end;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
 | 
						|
  -webkit-box-align: flex-start;
 | 
						|
  -ms-flex-align: flex-start;
 | 
						|
  align-items: flex-start;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: start; }
 | 
						|
 | 
						|
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
 | 
						|
  -webkit-box-align: center;
 | 
						|
  -ms-flex-align: center;
 | 
						|
  align-items: center;
 | 
						|
  -webkit-box-pack: flex-end;
 | 
						|
  -ms-flex-pack: flex-end;
 | 
						|
  justify-content: flex-end;
 | 
						|
  text-align: right;
 | 
						|
  text-anchor: end; }
 | 
						|
 | 
						|
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
 | 
						|
  -webkit-box-align: center;
 | 
						|
  -ms-flex-align: center;
 | 
						|
  align-items: center;
 | 
						|
  -webkit-box-pack: flex-start;
 | 
						|
  -ms-flex-pack: flex-start;
 | 
						|
  justify-content: flex-start;
 | 
						|
  text-align: left;
 | 
						|
  text-anchor: end; }
 | 
						|
 | 
						|
.ct-grid {
 | 
						|
  stroke: rgba(0, 0, 0, 0.2);
 | 
						|
  stroke-width: 1px;
 | 
						|
  stroke-dasharray: 2px; }
 | 
						|
 | 
						|
.ct-grid-background {
 | 
						|
  fill: none; }
 | 
						|
 | 
						|
.ct-point {
 | 
						|
  stroke-width: 7px;
 | 
						|
  stroke-linecap: round; }
 | 
						|
 | 
						|
.ct-line {
 | 
						|
  fill: none;
 | 
						|
  stroke-width: 4px; }
 | 
						|
 | 
						|
.ct-area {
 | 
						|
  stroke: none;
 | 
						|
  fill-opacity: 0.1; }
 | 
						|
 | 
						|
.ct-bar {
 | 
						|
  fill: none;
 | 
						|
  stroke-width: 10px; }
 | 
						|
 | 
						|
.ct-slice-donut {
 | 
						|
  fill: none;
 | 
						|
  stroke-width: 60px; }
 | 
						|
 | 
						|
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
 | 
						|
  stroke: #2164b3; }
 | 
						|
 | 
						|
.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
 | 
						|
  fill: #2164b3; }
 | 
						|
 | 
						|
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
 | 
						|
  stroke: #B82132; }
 | 
						|
 | 
						|
.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
 | 
						|
  fill: #B82132; }
 | 
						|
 | 
						|
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
 | 
						|
  stroke: #ffc241; }
 | 
						|
 | 
						|
.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area {
 | 
						|
  fill: #ffc241; }
 | 
						|
 | 
						|
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
 | 
						|
  stroke: #2196F3; }
 | 
						|
 | 
						|
.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area {
 | 
						|
  fill: #2196F3; }
 | 
						|
 | 
						|
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
 | 
						|
  stroke: #505050; }
 | 
						|
 | 
						|
.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area {
 | 
						|
  fill: #505050; }
 | 
						|
 | 
						|
.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
 | 
						|
  stroke: #22c55e; }
 | 
						|
 | 
						|
.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area {
 | 
						|
  fill: #22c55e; }
 | 
						|
 | 
						|
.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
 | 
						|
  stroke: #2196F3; }
 | 
						|
 | 
						|
.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area {
 | 
						|
  fill: #2196F3; }
 | 
						|
 | 
						|
.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
 | 
						|
  stroke: #563d7c; }
 | 
						|
 | 
						|
.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area {
 | 
						|
  fill: #563d7c; }
 | 
						|
 | 
						|
.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
 | 
						|
  stroke: #fe9ecb; }
 | 
						|
 | 
						|
.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area {
 | 
						|
  fill: #fe9ecb; }
 | 
						|
 | 
						|
.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
 | 
						|
  stroke: #ffdb8e; }
 | 
						|
 | 
						|
.ct-series-j .ct-slice-pie, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-area {
 | 
						|
  fill: #ffdb8e; }
 | 
						|
 | 
						|
.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
 | 
						|
  stroke: #ce0262; }
 | 
						|
 | 
						|
.ct-series-k .ct-slice-pie, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-area {
 | 
						|
  fill: #ce0262; }
 | 
						|
 | 
						|
.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
 | 
						|
  stroke: dimgray; }
 | 
						|
 | 
						|
.ct-series-l .ct-slice-pie, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-area {
 | 
						|
  fill: dimgray; }
 | 
						|
 | 
						|
.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
 | 
						|
  stroke: #37e2d0; }
 | 
						|
 | 
						|
.ct-series-m .ct-slice-pie, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-area {
 | 
						|
  fill: #37e2d0; }
 | 
						|
 | 
						|
.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
 | 
						|
  stroke: #51adf6; }
 | 
						|
 | 
						|
.ct-series-n .ct-slice-pie, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-area {
 | 
						|
  fill: #51adf6; }
 | 
						|
 | 
						|
.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
 | 
						|
  stroke: #2164b3; }
 | 
						|
 | 
						|
.ct-series-o .ct-slice-pie, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-area {
 | 
						|
  fill: #2164b3; }
 | 
						|
 | 
						|
.ct-square {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-square:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 100%; }
 | 
						|
  .ct-square:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-square > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-minor-second {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-minor-second:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 93.75%; }
 | 
						|
  .ct-minor-second:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-minor-second > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-second {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-second:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 88.88889%; }
 | 
						|
  .ct-major-second:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-second > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-minor-third {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-minor-third:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 83.33333%; }
 | 
						|
  .ct-minor-third:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-minor-third > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-third {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-third:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 80%; }
 | 
						|
  .ct-major-third:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-third > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-perfect-fourth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-perfect-fourth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 75%; }
 | 
						|
  .ct-perfect-fourth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-perfect-fourth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-perfect-fifth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-perfect-fifth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 66.66667%; }
 | 
						|
  .ct-perfect-fifth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-perfect-fifth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-minor-sixth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-minor-sixth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 62.5%; }
 | 
						|
  .ct-minor-sixth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-minor-sixth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-golden-section {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-golden-section:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 61.8047%; }
 | 
						|
  .ct-golden-section:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-golden-section > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-sixth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-sixth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 60%; }
 | 
						|
  .ct-major-sixth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-sixth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-minor-seventh {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-minor-seventh:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 56.25%; }
 | 
						|
  .ct-minor-seventh:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-minor-seventh > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-seventh {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-seventh:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 53.33333%; }
 | 
						|
  .ct-major-seventh:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-seventh > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-octave {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-octave:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 50%; }
 | 
						|
  .ct-octave:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-octave > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-tenth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-tenth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 40%; }
 | 
						|
  .ct-major-tenth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-tenth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-eleventh {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-eleventh:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 37.5%; }
 | 
						|
  .ct-major-eleventh:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-eleventh > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-major-twelfth {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-major-twelfth:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 33.33333%; }
 | 
						|
  .ct-major-twelfth:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-major-twelfth > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
.ct-double-octave {
 | 
						|
  display: block;
 | 
						|
  position: relative;
 | 
						|
  width: 100%; }
 | 
						|
  .ct-double-octave:before {
 | 
						|
    display: block;
 | 
						|
    float: left;
 | 
						|
    content: "";
 | 
						|
    width: 0;
 | 
						|
    height: 0;
 | 
						|
    padding-bottom: 25%; }
 | 
						|
  .ct-double-octave:after {
 | 
						|
    content: "";
 | 
						|
    display: table;
 | 
						|
    clear: both; }
 | 
						|
  .ct-double-octave > svg {
 | 
						|
    display: block;
 | 
						|
    position: absolute;
 | 
						|
    top: 0;
 | 
						|
    left: 0; }
 | 
						|
 | 
						|
/*# sourceMappingURL=chartist.css.map */
 |