/* META */
body {
	background-color: #262626 !important;
	color: #888888 !important;
}

span::selection,
.graph::selection {
   background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb	{ background-color: #126898;	}


/* CUSTOM STYLING */
button, .button {
	background: #1f1f1f;
	color: #dedede;
}

button:hover, .button:hover {
	background: #000000;
}


.btn:active,
.btn.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-default {
  color: #d4d4d4;
  background-color: inherit;
  border-color: inherit;
}

.btn-primary,
.btn-primary:focus {
	background-color: #206080;
}

.btn-default.disabled:hover {
	background-color: #444;
}

.btn-default:hover {
	background-color: #000;
}

.btn-primary:hover,
.btn-primary:hover:focus {
	background-color: #164359;
}

.btn-primary:active:hover,
.btn-primary:active:hover:focus,
.btn-default:active:hover {
	background-color: #0d496a;
}

/* APPLY button */
.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:hover:focus {
  color: #ffffff;
}

/* KEYFRAMES / EXPRESSION buttons */

.activeToggle.active:hover,
.activeToggle:active:focus,
.activeToggle.active:focus,
.activeToggle:active.focus,
.activeToggle.active.focus,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.easeDirection.active:focus {
	background-color: #000;
}

#values *:active:hover,
#libraryIORow *:active:hover,
.easeDirection:active:hover,
.activeToggle:active:hover {
	background-color: #000;
}

.easeDirection.active,
.activeToggle.active {
	background-color: inherit;
}

/* GRAPH */
.canvas-wrapper {
	/*background-color: #343434;*/
	background-image: linear-gradient(to right, #1a1a1a 1px, transparent 1px), linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    border-left: 2px solid;
    border-bottom: 1px solid;
}

.thickBorderRight {
	border-right: 2px solid !important;
	border-spacing: 1px;
}
.thinBorderRight {
	border-right: 1px solid !important;
}
.thinBorderLeft {
	border-left: 1px solid !important;
}
.thinBorderTop {
	border-top: 1px solid !important;
}
.thinBorderBottom {
	border-bottom: 1px solid !important;
}

#P0,#P1,#P2,#P3 { background: #ffee00; }

#P0, #P3 {
	border-radius: 0px;
}

#graphPanel-bottom {
	background-color: #262626;
}

#btn_editBezierValues {
	color: white;
}

/* DIVIDER */
#divider {
	color:#5f5f5f;
}

/* LIBRARY */
#library > a {
	color: #666;
}

#library > a > button {
	background: #444;
}

/* Library item hover */
#library > a:hover > canvas {
	/*background: #000;*/
}

/* Selected library item hover */
#library > a.selected:hover > canvas {
	background: #5f5f5f;
}

/* Delete button hover */
#library > a > button:hover {
	/*background: #000;*/
}

/* Active Element */
#library > a.selected,
#library > a:hover > span {
	color: white !important;
}

/* Selected */
#library > a.selected > canvas {
	background: #9e9e9e;
}

/* Click and hold */
#library > a.selected:active > canvas,
#library > a:active:focus > canvas {
	background: #5f5f5f;
}

#library > a.deselected > canvas {
	background: #424242;
}

/* ABOUT AND CONFIG */

/* ABOUT WINDOW */

.blue 		{ color: #126898; font-weight: 400; }
.lightBlue 	{ color: #7ebfe7; }
		.yellow 	{ color: #ffee00; }
.orange 	{ color: #eb590c; }

#aboutPage, #configPage {
	color: white;
	background-color: #7ebfe7;
}

#aboutPage ::selection, #configPage ::selection {
    color: white;
    background-color: rgba(253, 191, 40,0.97);
}

#config-content select {
	color: #424242;
}


#config-content input {
	color: #424242;
}

#config-content .btn-default {
	background-color: #424242;
}

#config-content .btn-default.active {
	background-color: #126898;
}

.btnCloseAbout:hover {
	color: #126898;
}

.stringURL:hover {
	color: #126898;
}

#about-footer {
    background-color: #126898;
}
