.rhythm-container {
  	/*border: 2px dotted red;*/
  	padding: 0px;
}
.track{
  	width: 200px;
  	height: 320px;
	background-color: #2D353C /*#8E8D8E*/ /*rgba(0,0,0,.4)*/;
	border-radius: 5px;
	display: inline-block;
	margin-bottom: 8px;
	margin-right: 5px;
	overflow: hidden;
}
.track-add
{
	width: 200px;
  	height: 320px;
	background-color: #FFF;
	border-radius: 5px;
	display: inline-block;
	margin-bottom: 8px;
	margin-right: 5px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
}
.track-remove
{
	position: absolute;
}
.track-remove button
{
	background-color: #fff;
}
.track-add:hover
{
	opacity: 1.0;
}
.circle-conatiner
{
	/*border: 1px dotted red;*/
	padding-top:10px;
	padding-bottom: 10px;
	/*border-bottom: 1px solid #fff;*/
	position: relative;
}
.circle
{
	border-radius: 100%;
	border: 3px solid #fff;
	width: 180px;
	height: 180px;
	margin: auto;
	position: relative;
}
.circle-play
{
	border-radius: 100%;
	/*border: 3px solid #fff;*/
	width: 180px;
	height: 180px;
	margin: auto;
	position: absolute;
	top: 10px;
	left: 10px;
	pointer-events: none;
}
.circle-animation
{
	border-radius: 100%;
	border: 3px solid #fff;
	width: 180px;
	height: 180px;
	margin: auto;
	position: absolute;
	top: 10px;
	left: 10px;
	pointer-events: none;
}
.beat-play
{
	border-radius: 100%;
	width: 12px;
	height: 12px;
	background-color: #FF1300;
	position: absolute;
	cursor: pointer;
}
.beat
{
	border-radius: 100%;
	width: 10px;
	height: 10px;
	background-color: #fff;
	position: absolute;
	cursor: pointer;
}
.beat-active
{
	width: 12px;
	height: 12px;
	background-color: #FCDB44;
}
.beat-default
{
	border-radius: 100%;
	width: 10px;
	height: 10px;
	/*background-color: red;*/
	position: absolute;
	cursor: pointer;
}
.beat-first
{
	/*background-color: green;*/
}
.beat-select
{
	border-radius: 100%;
	width: 10px;
	height: 10px;
	background-color: #fff;
	position: absolute;
	cursor: pointer;
}
.beat-select-active
{
	background-color: #FCDB44;
}
.polygon-container
{
	position: absolute;
	top: 0px;
	left: 0px;
	pointer-events: none;
}
.options-container
{
	/*width: 200px;
	height: 50px;*/
	position: relative;
}
.instrument-select
{
	border-radius: 0px;
	border-color: #fff;
	border-left: 0px;
	border-right: 0px;
}
.metronome-beat
{
	vertical-align: middle;
}

.track-title
{
	color: #fff;
}

.text-rhythm
{
	color: #FCDB44 !important;
}

.bg-rhythm
{
	background-color: #FCDB44 !important;
}

.btn-rhythm
{
	color: #2D353C;
    background-color: #FCDB44;
    border-color: #FCDB44;
}
.btn-rhythm-inverse-sound
{
	color: #fff;
    background-color: #2D353C;
    border-color: #2D353C;
}

.btn-rhythm-inverse
{
	color: #FCDB44;
    background-color: #2D353C;
    border-color: #2D353C;
}
.btn-rhythm-inverse:hover
{
	color: #FCDB44;

}
.btn-rhythm-inverse:focus
{
	outline:none !important;
	box-shadow: none !important;

}
.btn.active
{
	color: #2D353C;
    background-color: #FCDB44;
}

/*RGB COLOR RHYTHM 			#FCDB44 rgb(252, 219, 68)*/
/*RGB COLOR RHYTHM INVERSE 	#2D353C rgb(45, 53, 60)*/
/*#dee2e6*/

.text-rhythm-inverse
{
	color: #2D353C !important;
}

.bg-rhythm-inverse
{
	background-color: #2D353C !important;
}

.text-rhythm-default
{
	color: #fff !important;
}

.bg-rhythm-default
{
	background-color: #fff !important;
}

.sidebar .nav li a:focus, .sidebar .nav li a:hover:hover
{
	color: #FCDB44 !important;
}

.header .navbar-toggle .icon-bar
{
	background-color: #FCDB44 !important;
}

.pointer-cursor
{
	cursor: pointer;
}

.btn-solo:hover, .btn-mute:hover
{
	color: #FCDB44;
}

.btn-solo:focus, .btn-mute:focus
{
	box-shadow: none;
}
.btn-sound-active i
{
	color: #FCDB44;
}

.bold
{
	font-weight: bold;
}
.semi-bold
{
	font-weight: 600;
}

#rhythm-controls-container
{
	position: relative;
	width: 150px;
	left: 50%;
	transform: translateX(-50%);
	top: -55px;
	text-align: center;
	z-index: 9999;
	/*color: #FCDB44;*/
	/*box-shadow: 1px 2px 4px #fff;*/
}
@media only screen and (max-width: 760px) {
  #rhythm-controls-container { top: -55px; z-index: 0; }
  #rhythm-info-container {margin-top: 40px;}

  #rhythm-controls-container-secondary .rhythm-btn-stop{ left: -22px; }
  #rhythm-controls-container-secondary .rhythm-btn-replay{ left: -22px; }
  #rhythm-controls-container-secondary .rhythm-btn-rhythm-btn-play{ left: -30px; }
}

#rhythm-controls-container-secondary
{
	position: fixed;
	top: 200px;
	z-index: 999;
	text-align: center;
}

/*#rhythm-controls-container.fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin-top: 0px;
    z-index: 9999;
}*/

.form-control
{
	border-color: #2D353C;
	/*background-color: #FCDB44;*/
	background-color: transparent;
	font-weight: 600;
}
.input-number
{
	border: none;
	
}
#rhythm-share-title-input:focus
{
	border: 3px dashed #FCDB44;
	/*outline: #4CAF50 solid 10px;*/
}

/*NAVTAB*/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link
{
	background-color: #2D353C !important;
}
.nav.nav-pills .nav-item .nav-link:focus, .nav.nav-pills .nav-item .nav-link:hover
{
	color: #FCDB44 !important;
}
/*IONRANGESLIDER*/
.irs--round .irs-line
{
	background-color: #2D353C !important;
	cursor: pointer;
}
.irs.irs--round .irs-bar
{
	background: #FCDB44 !important;
	cursor: pointer;
}
.irs.irs--round .irs-handle
{
	border-color: #FCDB44 !important;
	background-color: #2D353C !important;
	cursor: pointer;
}
.irs.irs--round
{
	height: 26px !important;
}
.irs.irs--round .irs-bar, .irs .irs .irs-line
{
	top: 10px !important;
}
.irs.irs--round .irs-handle
{
	top: 3px !important;
}
/*SWITCHERS*/
.switcher label
{
	width: 23px !important;
	height: 11px !important;
}
.switcher label:before{width:23px;height:14px;background:#fff;border:1px solid #d5dbe0}
.switcher label:after{height:12px;width:12px;position:absolute;left:2px;top:1px;background:#2D353C}
.switcher input:checked+label:before{background:#FCDB44;border-color:#FCDB44}
.switcher input:checked+label:after{left:10px}

/*///metronome*/
.custom-control-input[disabled]~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{position:relative;margin-bottom:0;vertical-align:top}.custom-control-label::before{position:absolute;top:.0625rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";background-color:transparent;border:#2D353C solid 1px}
.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#2D353C;background-color:#2D353C;}
.custom-switch .custom-control-input:checked~.custom-control-label::after{background-color:#FCDB44;transform:translateX(.75rem)}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(45,53,60,.25)}
.custom-switch .custom-control-label::after{top:calc(.0625rem + 2px);left:calc(-2.25rem + 2px);width:calc(1rem - 4px);height:calc(1rem - 4px);background-color:#2D353C;border-radius:.5rem;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#2D353C;}


/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FCDB44; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}



/*;
.range-handle
{
	padding-top: 1px;
	top: -8px !important;
	width: 20px !important;
	height: 20px !important;
}

.range-handle > .fa
{

}
*/