.fx-wrapper{
  height:100%;
  border-radius:0.1vw;
  box-shadow: 0.2vw 0.2vw 0.3vw rgba(0,0,0,0.4);
  box-sizing:border-box;
  position:relative;

}
.fx-wrapper-title{
  position:relative;
  padding-left:0.6vw;
  background:rgba(0,0,0,0.1);
  color:white;
  font-size:1vw;
  line-spacing:1vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:2vw;
  text-shadow:0.0vw 0.0vw 0.2vw rgba(0,0,0,0.9);
}

.fx-loading-container{
  position: absolute;
  top:0;
  left:0;
  display:none;
  z-index:5;
  width:100%;
  height:100%;
}
.fx-loading{
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.7);
  color:white;
  display:flex;
  align-items: center;
  justify-content:center;
}

.btn-fx-del{
  background:#111;
  color:#ccc;
  border:0;
  width:25%;
  height:100%;
  z-index:3;
}
.fx-wrapper-inner{
  height:6.3vw;
}





.fx-unit{
	height:8vw;
	
  /*

  background:linear-gradient(90deg, #666 0%, #aaa 3%, #ddd 4%, #ffffff 5%, #ddd 6%,  #ccc 94%, #fff 95%, #ddd 96%, #aaa 97%, #666 100%);
  */
  background:#ccc;
  border-radius:0.1vw;
  padding:0 6%;
  position:relative;
}

.button-bypass{
  background:linear-gradient(180deg, #ffffff 0%, #fefefe 5%, #fefefe 95%, #ffffff 100%);
  padding:0.3vw;
  border-radius:0.1vw;
  font-size:0.9vw;
  width:2vw;
  position:absolute;
  bottom:0.4vw;
  right:0;
  text-align:center;
  cursor:pointer;
}

.fx-gradient{
  background:yellow;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 3%, rgba(255,255,255,0.5) 5%, rgba(255,255,255,0.5) 6%, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, rgba(255,255,255,0.55) 94%, rgba(255,255,255,0.55) 95%, rgba(0,0,0,0.1) 97%, rgba(0,0,0,0.9) 100%);
  opacity:0.6;
}

.fx-gradient-2{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  background:linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.1) 100%);
}

.fx-unit > .fx-inner {
  width:100%;
  height:100%;
}

.fx-unit > .control-row {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;
  font-size:0.9vw;
  z-index:2;
  position:relative;
  height:100%;
}
.fx-unit > .control-row > .knob-container{
  width:45%;
  text-align: center;
  padding-top:4%;
}

.fx-unit > .control-row > .knob-container > .knob-outer {
  display:inline-block;

}

.fx-unit > .control-row > .knob-container > .knob-outer {
  display:inline-block;
  position:relative;
  width:2.4vw;
  height:2.4vw;
  border-radius:50%;  
  /*background:linear-gradient(#b5b5b5,#F9F8F7);*/
  background:linear-gradient(#313537, #222);
  top:0.2vw;
  margin-top:0.05vw;
  margin-bottom:0.05vw;
}

.fx-unit > .control-row > .knob-container >.knob-outer > .knob-main {
  position:absolute;
  left:0.2vw;
  top:0.2vw;
  bottom:0.2vw;
  right:0.2vw;
  border-radius:50%;
  background:linear-gradient(90deg,#dde4e8, #dde4e8 10%, #c7cfd3 20%, #7e858a 30%, #82898f 31%, #edf1fc 32%, #edf1fc 34%, #edf1fc 66%, #82898f 67%, #7e858a 68%, #c7cfd3 75%, #dde4e8 80%);

  backface-visibility:hidden;
  box-shadow: 0px 0px .18vw .12vw rgba(0,0,0,0.20);
  /*transition:1.5s;*/
  transform: rotate(-135deg);
  /*transform: rotate(0deg);*/
}

.fx-unit > .control-row >.knob-container > .knob-outer > .knob-main:before {
  display:block;
  content:"";
  width:10%;
  height:0.8vw;
  background:#15b6fd;
  /*margin:0 auto;*/
  left:46%;
  position:absolute;
  opacity:1;
  box-shadow:0 .25vw .1vw rgba(0,0,0,0.4) inset;
}

.fx-unit-distortion{
  background:#E27A3F;
  background:#da5900;
  background:#b14802;
}

.fx-unit-chorus{
	background:#EFC94C;
  background:#e20177;
  background:#a20059;
}

.fx-unit-delay{
  background:#334D5C;
  background:#004358;
}

.fx-unit-phaser{
  background:#45B29D;
  background:#1F8A70;
  background:#650f14;
}

.fx-unit-filter{
  background:#666;
  background:#3d2f59;
}

.fx-unit-wah{
  background:#DF5A49;
  background:#789d2d;
  background:#5d7a22;
}

/*Generic Rack*/
.instrument-wrapper{	
	display:flex;
	width:100%;
	margin-top:0.0vw;
}
.wrapper-label{
	color:white;
	font-weight:bold;
	font-size:1.2vw;
	margin-bottom:0.1vw;
	width:99%;
	padding:2px 0px;
	border-bottom:0.1vw solid #ccc;
	margin-bottom:0.5vw;
}
.instrument-side-label{
	position:absolute;top:47%;background:rgba(200,200,200,1);color:black;padding:0.1vw;width:8vw;transform: rotate(270deg);
}
.instrument-side-label:after{
	background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-1.4deg);
  transform-origin: 100%;
  z-index: -1;    
}

/*Rack Main (inside of rack mounts)*/
.instrument-wrapper > .rack-main{
	background:#aaa;
	background:linear-gradient(to right, #666 0%,  #444 10%, #555 40%, #444 70%, #666 100%);
	background:linear-gradient(to right, #3a4149 0%, #737c85 100%);
	display:flex;
	width:94%;
	padding:0.5%;
	border-top:0.1vw solid #777;
	border-bottom:0.1vw solid #333;
	box-sizing:border-box;
}

/*End Generic Rack*/



/*Rack Mounts*/
.instrument-wrapper > .rack-mount{
	background:#474747;
	width:3%;
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	border:0.1vw solid #111;
	box-sizing:border-box;
}
.instrument-wrapper > .rack-mount.rack-mount-l{
	background:linear-gradient(to right, #222 0%, #474747 5%, #474747 92%, #8b8b8b 95%, #222 100% );
	
}
.instrument-wrapper > .rack-mount.rack-mount-r{
	background:linear-gradient(to left, #111 0%, #474747 5%, #474747 92%, #8b8b8b 95%, #111 100% );
}
.instrument-wrapper > .rack-mount > .rack-screw-hole{
	background:#111;
	height:0.9vw;
	width:65%;
	border-radius:30%;
	position:absolute;
}
.instrument-wrapper > .rack-mount > .rack-screw{
	width:40%;
	padding-top:40%;
	height:auto;
	border-radius:50%;
	position: absolute;
	background:linear-gradient(to right, #797979 0%, #5c5c5c 38%, #5c5c5c 43%, #2e2e2e 45%, #2e2e2e 51%, #2e2e2e 54%, #5c5c5c 55%, #6c6c6c 65%, #797979 100%);
	box-shadow: 0.1vw 0.0vw 0.4vw rgba(0,0,0,0.9);
}
.instrument-wrapper > .rack-mount > .rack-screw.screw-top{
	margin-top:-0.1vw;
}
.instrument-wrapper > .rack-mount > .rack-screw.screw-bottom{
	margin-bottom:-0.1vw;
}
.instrument-wrapper > .rack-mount.rack-mount-l > .rack-screw{
	margin-left:-0.1vw;
}
.instrument-wrapper > .rack-mount.rack-mount-r > .rack-screw{
	margin-left:0.1vw;
}

.instrument-wrapper > .rack-mount > .screw-top{
	top:0.5vw;
}
.instrument-wrapper > .rack-mount > .screw-bottom{
	bottom:0.5vw;
}

/*End Rack Mounts*/



/*Pattern select section*/
.instrument-wrapper > .rack-main > .pattern-select-container{
	width:11%;
}
.instrument-wrapper > .rack-main > .pattern-select-container > .pattern-select-bg{
	background:rgba(0,0,0,0.2);
	padding:0.3vw;
	border-radius:1%;
	border:0.2vw solid #888;
	box-sizing:border-box;
}
/*End pattern select section*/



/* Instrument Section*/
.instrument-wrapper > .rack-main > .instrument-container{
	position: relative;
	width:60%;
	margin-left:1%;
	box-sizing:border-box;
	border-radius:0.2vw;
}
/* EndInstrument Section*/



/* FX Section */
.instrument-wrapper > .rack-main > .fx-container{
	width:18%;
	margin-left:1%;
}
.instrument-wrapper > .rack-main > .fx-container > .insert-fx-container{
	display:flex;
	justify-content:space-between;
}
.instrument-wrapper > .rack-main > .fx-container > .insert-fx-container > .insert-fx{
	background:linear-gradient(to bottom, #000 0%, #111 10%, #222 50%, #111 90%, #000 100%);
	border:0.1vw solid #111;
	border-radius:0.2vw;
	width:48%;
	height:10vw;
	position:relative;
}
.instrument-wrapper > .rack-main > .fx-container > .insert-fx-container > .insert-fx > .no-fx{
	position:absolute;
	background:rgba(255,255,255,0.1);
	border-radius:0%;
	padding:15%;
	top:50%;
	left:50%;
	line-height:1;
	transform:translate(-50%, -50%);
	font-size:2.0vw;
	cursor: pointer;
}
/*End FX Section*/



/* MIX Section*/
.instrument-wrapper > .rack-main > .mix-container{
	width:8%;
	margin-left:1%;
}
.mix-container > .volume-container{
	width:2.0vw;
	height:10vw;
	position:relative;
	left:0.0vw;
}
.mix-container > .volume-container > .slider-outer{
	background:#2a2a2a;
	background: linear-gradient(to right, #1a1a1a 0%, #2a2a2a 6%, #2a2a2a 94%, #1a1a1a 100%);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	z-index:1;
}
.mix-container > .volume-container > .slider-inner{
	position:absolute;
	width:100%;
	left:50%;
	transform:translateX(-50%);
	background: linear-gradient(to right, #2a2a2a 0%, #4a4a4a 6%, #4a4a4a 94%, #2a2a2a 100%);
	z-index:2;
	bottom:0;
}
.mix-container > .volume-container > .slider-knob{
	background:linear-gradient(to bottom, #666 0%, #3f3e3c 10%, #aaa 39%, #666 47%, red 48%, red 55%, #666 56%, #343434 61%, #141519 90%, #0f1012 100%);
	background:linear-gradient(to bottom, #666 0%, #777 10%, #aaa 39%, #666 47%, #eee 48%, #eee 55%, #666 56%, #aaa 61%, #777 90%, #666 100%);
	height:10%;
	position:absolute;
	bottom:0;
	width:2.2vw;
	left:-0.1vw;
	z-index:3;
	box-shadow:0.0vw 0.2vw 0.5vw rgba(0,0,0,0.5);
	border-radius:0.2vw;
}

.mix-container > .channel-meter-outer{
	width:1vw;
	height:10vw;
	background:#111;
	background:linear-gradient(to bottom, #6dcbff 0%, #4b88ac 10%, #135075 80%, #111 100%);
	margin-left:0.2vw;
	display:inline-block;
	margin-left:0.3vw;
	position:relative;
	display:none;
}
.mix-container > .channel-meter-outer > .channel-meter-inner{
	background:rgba(0,0,0,0.7);
	position:absolute;
	top:0;
	/*height:100%;*/
	bottom:0;
	width:100%;	
	/*display:none;*/
	/*border-bottom:0.5vh solid rgba(255,255,255,0.7);*/
}


.mute-highlight{
	background:#a23436 !important;
}
.solo-highlight{
	background:green !important;
}
/*End Mix Section*/
#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}
.mixer-channel-meter{
	
}
#piano_roll_grid{
    position: absolute;
    top: 0;
    z-index: 1;
}
#piano_roll_notes{
    position: absolute;
    top: 0;
    z-index: 10;
}
#piano_roll_overlay{
    position: absolute;
    top:0;
    z-index:11;
}
.piano-roll-container{
    position:absolute;
    top:64px;
    left:250px;
    width:672px;
    background:#ccc;
    border:4px solid #ccc;
    border-radius:2px;
    box-shadow:0px 0px 10px rgba(0,0,0,1);
}
.piano-roll-grid-container{
	position:relative;
}
.btn-pr-modifier{
	width:90%;
	margin: 0 auto;
	margin-bottom:4px;
}
.piano-roll-header{
    z-index:11;
    width:100%;
    height:30px;
    position:absolute;
    background:#ccc;
    color:black;
    padding-bottom:2px;
}

.piano-roll-sub-container{
    margin-top:29px;
}

.piano-roll-title-container{
    padding-top:2px;
    padding-left:2px;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/*vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body{
	height:100%;
	width:100% !important;
	overflow:hidden;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently not supported by any browser */

}
body{
	background:#fefefe;
	font-family: verdana, sans-serif;
	font-size:1vw;
}
.height-100{
	height:100%;
}
.height-50{
	height:50%;
}
.flex{
	display:flex;
}
.hide{
	display:none;
}
.loading-container{
	color:white;
	width:100%;
	height:100%;
	background:#333;
	position:absolute;
	z-index:100;
	text-align:center;
}
#loading-text{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	color:#000;

}
.loading-bar-background{
	background:#666;
	width:30%;
	height:6%;
	position:absolute;
	top:10%;
	left:50%;
	transform:translate(-50%, -50%);
}
.loading-bar-inner{
	opacity:0.9;
	height:100%;
	width:0%;
	background:white;
}
.main-container{
	position:relative;
	left:50%;
	transform:translatex(-50%);
	background:transparent;
	height:100vh;
	width:98vw;
}
.screen-container{
	height:calc(100vh - 8vw);
}
.top-bar{
	display:flex;
	background:#ccc;
	padding:0.5%;
	height:4%;
}
.top-bar2{
	display:flex;
	background:#444;
	padding: 0.5%;
	height:4%;
	position:relative;
	align-items:center;
}
.btn{
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}
.btn-transport{
	overflow:hidden;
	position:relative;
	width:6.2vw;
	height:100%;
	background:#eee;
	margin-right:0.3%;
}

.transport-spacing{
	margin-right:2.0vw;
}

.file-reader-input{
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	display:block;
	background:red;
	height:100%;
	width:100%;
	opacity:0;
	cursor:pointer;
}

.btn-transport-active{
	background:#0fb4e7 !important;
	color:white;
}
.btn-tab{
	background:#111;
	height:100%;
	width:8vw;
	color:#ccc;
	text-align: center;
	margin-right:0.3%;
}
#main-instrument-area{
	background:#666;
}

.btn-pattern-select-old{
	display:inline-block;
	background:#efefef;
	border-radius:2px;
	width:22%;
	padding-top:22%;
	box-sizing: border-box;
	position:relative;
	margin-right:2.5%;
	margin-bottom:2%;
	font-weight:bold;
	color:#666;
}
.btn-pattern-select > span{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	text-align:center;
	width:100%;
}

.btn-pattern-select{
	width:25%;
	padding-top:25%;
	background:#efefef;
	position: relative;
	display:inline-block;
	border-left:0.1vw solid #333;
	border-bottom:0.1vw solid #333;
	box-sizing:border-box;
}

.btn-bank-select{
	background:#aaa;
	color:white;
}


.btn-pattern-waiting{
	background:#bbb;
}
.btn-pattern-on{
	background:#0fb4e7 !important;
	color:#fff !important;
	box-shadow:0.0vw 0.0vw 0.7vw rgba(30,150,255,0.6);
}
.btn-bank-select.btn-pattern-on{
	/*background:#444;	*/
}

.screen-container{
	height:89%;
	overflow-y:auto;
}


#pr-window{
	position:absolute;
	width:70%;
	height:60vh;
	background:#ccc;
	left:17%;
	top:50%;
	transform:translateY(-50%);
	/*box-shadow:0.0vw 0.0vw 1.5vw rgba(0,0,0,0.4);*/
	border:2px solid #111;
	display:none;
}

#pr-title{
	height:6%;
	background:#333;
	color:white;
	padding:0.3vw;
}

#pr-main{
	padding:0.5vw;
	height:90%;
	width:100%;
}


/*FX Selector*/
#fx-selector-overlay{
	background:rgba(0,0,0,0.8);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
}
#fx-selector{
	z-index:2;
	width:30%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
	background:linear-gradient(to bottom, #777 0%, #fff 3%, #edf1fc 5%, #aaa 96%, #ccc 97%, #aaa 98%,  #333 100%);
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	left:50%;
	border-radius:0.4vw;
	padding:1vw;
}
#fx-selector > div{
	/*
	height:45%;
	display:flex;
	justify-content:space-between;
	margin-bottom:1vw;
	*/
}
.fx-selector-option{
	background:#111;
	background:linear-gradient(to bottom, #666 0%, #444 5%, #333 10%, #333 90%, #444 95%, #222 100%);
	color:white;
	width:48%;
	/*height:100%;*/ 
	height: 6vh;
	margin-bottom:1vw;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.4vw;
}



.tooltip{
    left:0;
    position: relative;    
}
.tooltip:after{
	opacity:0;
	transition:0s;
	content:'';
	font-weight:normal;
}
.tooltip:hover:after{
	transition-delay:0.5s;
	opacity:1;
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 0.1vw;
    bottom: 70%;
    color: #fff;
    content: attr(data-tooltip);
    left: 50%;
    padding: 0.2vw;
    position: absolute;
    z-index: 1;
    min-width:100%;
    max-width: 250%;
    font-weight:normal;
    font-size:0.9vw;
    text-align:center;
}
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    opacity:0;
}


#dark-overlay{
	background:rgba(0,0,0,0.8);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
}

#save-box{
	z-index:2;
	width:25%;
	height:16%;
	background:linear-gradient(to bottom, #777 0%, #fff 3%, #edf1fc 5%, #aaa 96%, #ccc 97%, #aaa 98%,  #333 100%);
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	left:50%;
	border-radius:0.4vw;
	padding:1vw;
	color:#555;
}

#save-box label{
	font-size:1vw;
}
#save-box h1{
	padding-bottom:0.4vw;
	color:#666;
	font-size:1.4vw;
	border-bottom:1px solid #666;
	margin-bottom:0.5vw;
}
#save-box h1 span{
	color:#999;font-size:1vw;
	display:none;
}
#save-box input{
	margin-top:0.4vw;
	width:96%;
	height:1.8vw;
	padding:0 2%;
	border-radius:0vw;
	border:0;
}
#save-box > #save-buttons{
	position: absolute;
	bottom:8%;
	right:3.7%;
}
#save-box > #save-buttons button{
	border:0;
	height:1.8vw;
	width:4vw;
}
#save-box > #save-buttons > #btn-save{
	background:#0fb4e7;
	color:white;
}

.midi-learn-overlay{
	position:relative;
	background:rgba(255,0,0,0.3);
	width:100%;
	height:100%;
	border-radius:5px;
	z-index:100;
	box-sizing:border-box;
}

.midi-learn-overlay-active{
	border:0.2vw solid red;	
	box-shadow:0.0vw 0.0vw 1.0vw rgba(0,0,0,0.8);
}


.am2-logo-container{
	height:60%;
	position:absolute;
	right:0;
	display:flex;
}

.am2-logo-container > img{
	height:100%;
	display:inline-block;
	margin-right:1vw;
}

.am2-logo-container > .social-share-container{
	height:100%;
}
.am2-logo-container > .social-share-container a{
	height:100%;
	margin-right:0.5vw;
}
.am2-logo-container > .social-share-container a > img{
	
	height:100%;
}

.buy-button{
	background:#0fb4e7;
	/*background:#de3236;*/
	color:#fff;
}

.notification{
	background: #ddd;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.9);
	color:#111;
	padding:32px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	min-width:400px;
}

.notification > #notification-text{
	padding-bottom:64px;
}

.notification > .notification-button-container{
	position:absolute;
	bottom:0;
	right:0;
	padding:32px;
}
.notification > .notification-button-container > button{
	margin-top:16px;
	padding:8px;
	width:64px;
	background:white;
	border:1px solid #666;
	box-shadow: 1px 1px 1px #666;
}
.notification > .notification-button-container > button:hover {
	outline: 2px solid #0fb4e7;
	background: #eee;
}

.notification > .notification-button-container > .notification-confirm{
	/*outline:1px solid #0fb4e7;*/
}