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 */
 |