/* = DASHBOARD
================================================ */
#pedalboard {
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

#pedalboard-dashboard {
    background:#111 url(../img/background.jpg) repeat;
    background-size: auto 1200px;
    position: absolute;
    top: 45px;
    left: 0;
    bottom: 45px;
    right: 0;
}

#pedalboard-dashboard.dev_api:after {
    content: "DEV API enabled";
    color: #555;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 50px;
}

#zoom-controllers {
    position:absolute;
    right:0px;
    top:0px;
    z-index:10;
}
#zoom-controllers > span {
    display: inline-block;
    background: transparent;
    cursor:pointer;
    display:block;
    float:left;
    height:45px;
    width:45px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:24px;
    transition: all 0.33s;
    opacity: 0.66;
    margin: 0;
    padding: 0;
}
#zoom-controllers > span:hover,
#zoom-controllers > span:active {
    background-color:#000;
    opacity: 1;
}
#zoom-controllers > span:first-child {
    background-image:url(../img/icn-zoom-out.png);
}
#zoom-controllers > span:last-child {
    background-image:url(../img/icn-zoom-in.png);
}


/* Pedalboard Info - Header */
#pedalboard-info {
    height:100%;
    position: absolute;
    left:45px;
    right: 90px;
    margin:0;
    padding:0;
    display: inline-block;
}

#pedalboard-info > h1 {
    max-width: calc(100% - 720px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pedalboard-info .title {
    color:#fff;
    cursor:pointer;
    display:block;
    float:left;
    height:36px;
    font-size:18px;
    font-weight:bold;
    line-height:2;
    margin-right:10px;
    overflow:hidden;
    position:relative;
}


#pedalboard-info .favorite {
    background:url(../img/icn-favorite-off.png) no-repeat center center;
    cursor:pointer;
    float:left;
    height:36px;
    width:36px;
}

#pedalboard-info .favorite.selected {
    background:url(../img/icn-favorite-on.png) no-repeat center center;
}

#pedalboard-info .settings {
    background:url(../img/icn-settings.png) no-repeat center center;
    cursor:pointer;
    float:left;
    height:36px;
    width:36px;
}

#pedalboard-info .settings.selected {
    background-color:#444;
}

#pedalboard-info .settings a,
#pedalboard-info .favorite a {
    display:block;
    height:36px;
    text-align:center;
    width:36px;
}

#pedalboard-info .actions {
    font-weight:bold;
    position:absolute;
    right:0;
    top:0;
    text-align:right;
}

#pedalboard-info .actions > button {
    margin-top:-25px;
}

#pedalboard-info .actions .separator {
    border-left:1px dotted #444;
    display:inline-block;
    height:100%;
    margin:0 6px;
}

/* Pedalboard Settings Window */
#pedalboard-settings {
    background:#444;
    bottom:46px;
    left:0;
    padding:10px;
    position:absolute;
    right:0;
    top:36px;
    z-index:2;
}

#pedalboard-settings h1 {
    color:#fff;
    font-size:24px;
    line-height:1;
    text-shadow:0 1px 3px #000;
}

/* Share Pedalboard */

/*#pedalboard-sharing {
    height:36px;
    position:absolute;
    right:0;
    top:0;
}

#pedalboard-sharing .button {
    background:#222 url(../img/icn-share.png) no-repeat center center;
    cursor:pointer;
    height:36px;
    width:64px;
}
*/
#pedalboard-sharing .button:hover, #pedalboard-sharing .button.selected {
    background-color:#444;
}

#pedalboard-sharing-popup {
    background:#444;
    bottom:0;
    padding:10px;
    position:absolute;
    left:0;
    right:0;
    top:36px;
    z-index:3;
}

#pedalboard-sharing-popup h1 {
    color:#fff;
    font-size:18px;
    margin:0 0 10px 0;
    padding:0;
    text-shadow:0 1px 0 #000;
}

#pedalboard-sharing-popup label {
    color:#fff;
    float:left;
    font-size:11px;
    font-weight:bold;
    height:30px;
    line-height:2.9;
    margin-bottom:10px;
    text-align:left;
    text-shadow:0 1px 2px #000;
    text-transform:uppercase;
    width:85px;
}

#pedalboard-sharing-popup textarea {
    height:150px;
    margin-bottom:10px;
}

#pedalboard-sharing-popup .item-list {
    color:#fff;
    font-size:11px;
    font-weight:bold;
    list-style:none;
    margin:6px 0 10px 84px;
    padding:0;
}

#pedalboard-sharing-popup .item-list .item {
    background:#2b2b2b;
    display:block;
    float:left;
    height:18px;
    padding:3px 9px;
}

#pedalboard-sharing-popup .submit {
    text-align:right;
}




/* = CONNECTORS
================================================ */

/* AUDIO */

.mod-audio-output .mod-output-jack {
    background-image: url(../img/audio-jack-nconnect.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 128px !important;
    height: 56px;
    cursor: pointer;
    top: 0;
}
.mod-audio-output.output-connected .mod-output-jack {
    background-image: url(../img/audio-jack.png);
    background-size: 50%;
    background-position: 100% 100%;
    height: 70px;
}
.mod-audio-output .mod-output-jack.jack-connecting {
    background-image: url(../img/audio-jack.png);
    background-size: 100%;
    height: 56px;
}

.mod-audio-output {
    background-image: url(../img/audio-output.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 87px;
    height: 56px;
    left: 0px;
    z-index: 90;
}
.mod-audio-output.output-connecting {
    background-image: url(../img/audio-output-connected.png);
}
.mod-audio-output.output-connected {
    background-image: url(../img/audio-output-connected.png);
}


.mod-audio-input .mod-output-jack {
    width: 128px !important;
    height: 56px;
    cursor: pointer;
}

.mod-audio-input {
    background-image: url(../img/audio-input.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    position: absolute;
    width: 88px;
    height: 56px;
    right: 0px;
    z-index: 90;
}
.mod-audio-input.input-connecting {
    background-image: url(../img/audio-input-connecting.png);
}
.mod-audio-input.input-connecting-highlight {
    background-image: url(../img/audio-input-connecting-highlight.png);
}
.mod-audio-input.input-connected:not(.expanded) {
    background-image: url(../img/audio-input-connected.png);
}
.mod-audio-input.input-connected.input-connecting-highlight {
    background-image: url(../img/audio-input-connected-highlight.png);
}
.mod-audio-input .mod-output-jack.jack-connecting {
    background-image: url(../img/audio-jack.png);
}

/* MIDI */


.mod-midi-output .mod-output-jack {
    background-image: url(../img/midi-jack-nconnect.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 78px !important;
    height: 56px;
    cursor: pointer;
}
.mod-midi-output.output-connected .mod-output-jack {
    background-image: url(../img/midi-jack.png);
    background-size: 50%;
    background-position: 100% 100%;
    height: 70px;
}
.mod-midi-output .mod-output-jack.jack-connecting {
    background-image: url(../img/midi-jack.png);
    background-size: 100%;
    height: 56px;
}

.mod-midi-output {
    background-image: url(../img/midi-output.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 78px;
    height: 56px;
    left: 0px;
    z-index: 90;
}
.mod-midi-output.output-connecting {
    background-image: url(../img/midi-output-connected.png);
}
.mod-midi-output.output-connected {
    background-image: url(../img/midi-output-connected.png);
}


.mod-midi-input .mod-output-jack {
    width: 78px !important;
    height: 56px;
    cursor: pointer;
}

.mod-midi-input {
    background-image: url(../img/midi-input.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    position: absolute;
    width: 76px;
    height: 56px;
    right: 0px;
    z-index: 90;
}
.mod-midi-input.input-connecting {
    background-image: url(../img/midi-input-connecting.png);
}
.mod-midi-input.input-connecting-highlight {
    background-image: url(../img/midi-input-connecting-highlight.png);
}
.mod-midi-input.input-connected:not(.expanded) {
    background-image: url(../img/midi-input-connected.png);
}
.mod-midi-input.input-connected.input-connecting-highlight {
    background-image: url(../img/midi-input-connected-highlight.png);
}
.mod-midi-input .mod-output-jack.jack-connecting {
    background-image: url(../img/midi-jack.png);
}


/* CV */


.mod-cv-output .mod-output-jack {
    background-image: url(../img/cv-jack-nconnect.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 80px !important;
    height: 56px;
    cursor: pointer;
    top: 0;
}
.mod-cv-output.output-connected .mod-output-jack {
    background-image: url(../img/cv-jack.png);
    background-size: 50%;
    background-position: 100% 100%;
    height: 70px;
}
.mod-cv-output .mod-output-jack.jack-connecting {
    background-image: url(../img/cv-jack.png);
    background-size: 100%;
    height: 56px;
}

.mod-cv-output {
    background-image: url(../img/cv-output.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 80px;
    height: 56px;
    left: 0px;
    z-index: 90;
}
.mod-cv-output.output-connecting {
    background-image: url(../img/cv-output-connected.png);
}
.mod-cv-output.output-connected {
    background-image: url(../img/cv-output-connected.png);
}


.mod-cv-input .mod-output-jack {
    width: 80px !important;
    height: 56px;
    cursor: pointer;
}

.mod-cv-input {
    background-image: url(../img/cv-input.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    position: absolute;
    width: 80px;
    height: 56px;
    right: 0px;
    z-index: 90;
}
.mod-cv-input.input-connecting {
    background-image: url(../img/cv-input-connecting.png);
}
.mod-cv-input.input-connecting-highlight {
    background-image: url(../img/cv-input-connecting-highlight.png);
}
.mod-cv-input.input-connected:not(.expanded) {
    background-image: url(../img/cv-input-connected.png);
}
.mod-cv-input.input-connected.input-connecting-highlight {
    background-image: url(../img/cv-input-connected-highlight.png);
}
.mod-cv-input .mod-output-jack.jack-connecting {
    background-image: url(../img/cv-jack.png);
}


/* = PEDAL - dragging dummy icon
================================================ */
.pedal.dummy {
    padding-top: 16px;
}

/* = PEDAL - JACK
================================================ */
.pedal .jack-connected {
    height:20px;
    position:absolute;
    width:100px;
    z-index:-1;
}

.pedal .pedal-input .mod-input .jack-connected {
    left:0 !important;
    position:absolute;
    top:4px !important;
}


/* = CABLE
================================================ */
svg .shadow {
    fill: none;
    stroke: rgba(0,0,0,0.66);
    stroke-width: 10;
    z-index: -1;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}
svg .cable {
    fill: none;
    stroke: #81009A;
    stroke-width: 7;
    z-index: 0;
}
svg .light {
    fill: none;
    stroke: #B248B4;
    stroke-width: 1.5;
    z-index: 1;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.mod-midi svg .shadow {
    stroke: rgba(0,0,0,0.66);
}
.mod-midi svg .cable {
    stroke: #00546C;
}
.mod-midi svg .light {
    stroke: #00A3C4;
}

.mod-cv svg .shadow {
    stroke: rgba(0,0,0,0.66);
}
.mod-cv svg .cable {
    stroke: #B86743;
}
.mod-cv svg .light {
    stroke: #E48E67;
}

svg .connecting-shadow { fill: none; stroke: #077; stroke-width: 10; z-index: 1000; }
svg .connecting-cable { fill: none; stroke: #0AA; stroke-width: 8; z-index: 1000; }
svg .connecting-light { fill: none; stroke: #6FF; stroke-width: 1; z-index: 1001; -webkit-transform: translateY(2px); transform: translateY(2px); }


/* = PEDALBOARD - ADDRESSING
================================================ */
.pedalboard-addressing {
    background:#444;
    bottom:0px;
    color:white;
    left:0;
    overflow:hidden;
    position:absolute;
    right:0;
    top:36px;
    z-index:1000;
}

.pedalboard-addressing header {
    margin:0 0 9px 0;
}

.pedalboard-addressing h1 {
    color:#fff;
    display:inline-block;
    font-size:24px;
}

.pedalboard-addressing .actuators {
    bottom:47px;
    left:0;
    overflow:auto;
    position:fixed;
    top:37px;
    width:200px;
}

.pedalboard-addressing .actuators a {
    color:white;
    display:block;
    padding:3px 9px;
    text-decoration:none;
}

.pedalboard-addressing .actuators ul {
    list-style:none;
    margin:0;
    padding:0;
}

.pedalboard-addressing .actuators ul li.title {
    background:#222;
    font-weight:bold;
    padding:3px 9px;
    text-transform:uppercase;
}

.pedalboard-addressing .actuators ul li {
    background:#333;
    cursor:pointer;
    line-height:2;
    margin-bottom:1px;
    padding:0;
}

.pedalboard-addressing .actuators ul li.selected {
    background:#444;
}

.pedalboard-addressing .parameters {
    background:#444;
    bottom:0;
    left:200px;
    overflow:auto;
    position:absolute;
    right:0;
    top:1px;
}

.pedalboard-addressing .parameters .actuator {
    border-color:#333;
    border-style:solid;
    border-width:0 0 2px 0;
    margin-bottom:27px;
}

.pedalboard-addressing .parameters .save {
    margin-bottom:310px;
}

.pedalboard-addressing .parameters th {
    font-size:11px;
    text-transform:uppercase;
}

.pedalboard-addressing .parameters th,
.pedalboard-addressing .parameters td {
    border-color:#333;
    padding:6px 27px;
}

.pedalboard-addressing .parameters th.order,
.pedalboard-addressing .parameters td.order {
    padding:6px;
    text-align:center;
    width:30px;
}

.pedalboard-addressing .parameters th.parameter,
.pedalboard-addressing .parameters td.parameter {
    width:100%;
}

.pedalboard-addressing .parameters th.move,
.pedalboard-addressing .parameters td.move {
    padding:6px 0;
    text-align:right;
    width:24px;
}

.pedalboard-addressing .parameters th.remove,
.pedalboard-addressing .parameters td.remove {
    padding:6px 0;
    text-align:right;
    width:24px;
}

.pedalboard-addressing .parameters td.move span {
    background-image:url(../img/move.png);
    background-position:left center;
    background-repeat:no-repeat;
    cursor:pointer;
    display:block;
    height:22px;
    margin:-1px 6px 0 0;
    width:24px;
}

.pedalboard-addressing .parameters td.remove:hover span {
    background-position:right center;
}

.pedalboard-addressing .parameters td.remove span {
    background-image:url(../img/icn-remove-bank.png);
    background-position:left center;
    background-repeat:no-repeat;
    cursor:pointer;
    display:block;
    height:22px;
    margin:-1px 6px 0 0;
    width:24px;
}

.pedalboard-addressing .parameters td.move:hover span {
    background-position:right center;
}


/* SAVE POP-UP */
.save-popup {
    background:rgba(0,0,0,.75);
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0;
    z-index:1001;
}

.save-popup .box {
    background:white;
    left:50%;
    margin:-150px -168px;
    padding:18px;
    position:absolute;
    top:50%;
    width:300px;
}

.save-popup h1 {
    font-size:18px;
    line-height:1;
    margin:0 0 18px 0;
    padding:0;
    text-transform:uppercase;
}


.save-popup .actions {
    border-color:#ddd;
    border-style:solid;
    border-width:1px 0 0 0;
    margin:9px 0 0 0;
    padding:18px 0 0 0;
    text-align:right;
}

.save-popup:not(#midi-ports-window) label {
    display:inline-block;
    float:left;
    line-height:2;
    width:96px;
}

.save-popup input[type="text"] {
    width:190px;
}


#midi-ports-window .mod-box {
    width:500px;
    margin:-150px -280px;
}
#midi-ports-list {
    width:500px;
}
#midi-ports-window input {
    vertical-align:text-top;
    margin-right:3px;
}


#registration-form.mod-box {
    width:329px;
}

#registration-form.mod-box label {
    width:125px;
}

#registration-form.mod-box select {
    width:204px;
}
#registration-form .error {
    background:#f2dede;
    border:1px solid #eed3d7;
    color:#b94a48;
    margin-bottom:18px;
    padding:9px;
}

/* SHARE WINDOW */
.close-window {
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
}

#share-window .box {
    margin-left: -200px;
    top: 200px;
    width: 400px;
}

#share-window form {
	margin: 0 !important;
}

#share-window  #record-rec {
	border-radius: 50% !important;
    padding: 0 !important;
}
#record-rec u {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 16px auto;
    display: block;
    background: #d43f3a;
    border: 4px solid white;
}
#share-window span.btn {
	text-align: center;
	color: white;
	font-size: 40px;
	line-height: 50px;
	padding-top: 15px;
	margin: 15px auto;
	display: block;
	width: 75px;
	height: 75px;
}
#share-window  .btn-large {
    width:60%;
    margin:5px auto 0 auto;
    text-align: left;
    white-space: normal;
}
#share-window  .btn-large img{
    height: 20px;
    float: right;
}
#share-window .fb {
    background-color: #3b5998 !important;
    border-color: transparent !important;
}
#share-window .tw {
    background-color: #55acee !important;
    color: white;
}
#share-window .tooltip {
    transition: opacity 500ms;
}
#share-window .btn-group {
    width: 100%;
}
#share-window input.share-url {
    margin: 30px auto;
    display: block;
    width: 100% ;
    border: 1px solid #e1e1e1;
    padding-left: 5px;
}
#share-window input.share-url::selection {
    background-color: #883996;
    color: white;
}
#share-window h3 {
    text-align: center;
    margin-bottom: 1em;
}

#share-window .form-control {
	width: 585px;
}

#share-window .form-control input {
	width: 100%;
}

.save-popup#share-window label {
	width: 585px;
}

#share-window .record #record-rec.recording {
    background-color: red;
	border-radius: 50px !important;
}

#share-window .textcenter{
	width: 100%;
    float: left;
	margin: auto;
}
#share-window-wrapper {
	height: 415px;
}
#share-window-bottom {
	border-top: 1px solid #ddd;
	display: block;
	width: 100%;
	padding-top: 10px;
}

/*
#share-window-bottom label {
	background: url("../img/facebook-menu-sprite.png") no-repeat top right;
	height: 36px;
	width: 210px;
	padding-top: 3px;
	margin-bottom: -6px;
}

#share-window-bottom input {
	vertical-align: baseline;
}
*/

#fb-authorization-container {
    float: left;
    position: relative;
    height: 30px;
    width: 280px;
}
#fb-authorization-container iframe {
    border: 0;
    width: 280px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

#share-window img.loading {
    height: 66px;
    left: 50%;
    margin: -33px 0 0 -33px;
    position: relative;
    top: 50%;
}

#share-window img.screenshot {
    background-color: #292929;
}









/* MOD LIST */


.mod-list {
    padding: 0;
    margin: 0;
}
.mod-list-item {
    padding: 0;
    margin: 0;
    list-style: none;
}
.mod-list-item:nth-child(even) {
    background: #eee;
}
.mod-list-item:nth-child(odd) {
    background: #fff;
}





/* MOD BUTTON */

.mod-button {
    transition: all 0.3s;
    padding: 0.2em 0.5em;
    display: inline-block;
    color: white;
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}
.mod-button:hover {

}
.mod-button-bar {
    box-sizing: border-box;
}

.mod-button,
.mod-button-bar {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222));
    background: -webkit-linear-gradient(top, #333333 0%,#222222 100%);
    background: linear-gradient(to bottom, #333333 0%,#222222 100%);
    transition: background 0.3s;
}

.mod-button:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#444444));
    background: -webkit-linear-gradient(top, #555555 0%,#444444 100%);
    background: linear-gradient(to bottom, #555555 0%,#444444 100%);
}

.mod-light .mod-button {
/*
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
*/
    background: transparent;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
    color: #666;
}
.mod-light .mod-button:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.66);
    color: #000;
}
.mod-light .mod-button .mod-icon {
    opacity: 0.5;
    transition: opacity 0.3s;
}

.mod-light .mod-button:hover .mod-icon {
    opacity: 1;
}

.mod-button.mod-confirm,
.mod-button.mod-confirm:hover {
    opacity: 1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}





/* MOD POPOUT */

.mod-popout {

}
.mod-popout .mod-popout-anchor {
    position: absolute;
    background-repeat: no-repeat;
}
.mod-popout .mod-popout-container {
    background: #111;
    border: 1px solid #AA0088;
}

.mod-popout.mod-anchor-n {

}
.mod-popout.mod-anchor-e {

}
.mod-popout.mod-anchor-s {

}
.mod-popout.mod-anchor-w {

}
.mod-popout.mod-anchor-ne {

}
.mod-popout.mod-anchor-se {

}
.mod-popout.mod-anchor-sw {

}
.mod-popout.mod-anchor-nw {

}


.mod-popout.mod-anchor-n .mod-popout-anchor {
    background-position: 50% 0;
    background-image: url(../img/mod-popout-anchor-top.png);

}
.mod-popout.mod-anchor-e .mod-popout-anchor {
    background-position: 100% 50%;
    background-image: url(../img/mod-popout-anchor-right.png);
}
.mod-popout.mod-anchor-s .mod-popout-anchor {
    background-position: 50% 100%;
    background-image: url(../img/mod-popout-anchor-bottom.png);
}
.mod-popout.mod-anchor-w .mod-popout-anchor {
    background-position: 0 50%;
    background-image: url(../img/mod-popout-anchor-left.png);
}
.mod-popout.mod-anchor-ne .mod-popout-anchor {
    background-position: 100% 0;
    background-image: url(../img/mod-popout-anchor-right.png);
}
.mod-popout.mod-anchor-se .mod-popout-anchor {
    background-position: 100% 100%;
    background-image: url(../img/mod-popout-anchor-right.png);
}
.mod-popout.mod-anchor-sw .mod-popout-anchor {
    background-position: 0 100%;
    background-image: url(../img/mod-popout-anchor-left.png);
}
.mod-popout.mod-anchor-nw .mod-popout-anchor {
    background-position: 0 0;
    background-image: url(../img/mod-popout-anchor-left.png);
}


.mod-popout.mod-anchor-n .mod-popout-content {
    border-top-width: 1px;
    margin-top: 10px;
}
.mod-popout.mod-anchor-e .mod-popout-content {
    border-right-width: 1px;
    margin-right: 10px;
}
.mod-popout.mod-anchor-s .mod-popout-content {
    border-bottom-width: 1px;
    margin-bottom: 10px;
}
.mod-popout.mod-anchor-w .mod-popout-content {
    border-left-width: 1px;
    margin-left: 10px;
}
.mod-popout.mod-anchor-ne .mod-popout-content {
    border-right-width: 1px;
    margin-right: 10px;
}
.mod-popout.mod-anchor-se .mod-popout-content {
    border-right-width: 1px;
    margin-right: 10px;
}
.mod-popout.mod-anchor-sw .mod-popout-content {
    border-left-width: 1px;
    margin-left: 10px;
}
.mod-popout.mod-anchor-nw .mod-popout-content {
    border-left-width: 1px;
    margin-left: 10px;
}


/* MOD ICON */
/* icon definitions in img/icons/icons.css */

.mod-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    opacity: 0.8;
}





.mod-confirm .mod-icon {
    background-image: url(../img/icons/36/confirm.png) !important;
}




.preset-manager {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    transition: all 0.3s;
/*
    pointer-events: none;
    touch-callout: none;
    user-select: none;
    user-drag: none;
    -webkit-pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
*/
}

.preset-manager.active {
    background: rgba(0, 0, 0, 0.5);
/*
    pointer-events: auto;
    touch-callout: auto;
    user-select: auto;
    user-drag: auto;
    -webkit-pointer-events: auto;
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -webkit-user-drag: auto;
*/
}

.preset-manager .preset-manager-entry {
    background: none;
    border: none;
    color: white;

    opacity: 0.33;

    font-family: 'Ek Mukta', sans-serif;
    font-weight: 100;

    font-size: 32px;
    line-height: 48px;
    height: 48px;

    box-sizing: border-box;

    box-shadow: none !important;
    text-shadow: 0 2px 5px black;

    transition: all 0.3s;

    padding: 0;
    margin: 0;

    outline: 0;

    width: auto;
/*
    pointer-events: none;
    touch-callout: none;
    user-select: none;
    user-drag: none;
    -webkit-pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
*/
}
.preset-manager.active .preset-manager-entry {
    opacity: 1;
/*
    pointer-events: auto;
    touch-callout: auto;
    user-select: auto;
    user-drag: auto;
    -webkit-pointer-events: auto;
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -webkit-user-drag: auto;
*/
}

.preset-manager > .mod-button-bind {
    margin: 3px;
}

.preset-manager .preset-manager-container {
    overflow: hidden;
    transition: opacity 0.3s;
    display: none;
    opacity: 0;
    position: absolute;
    top: 48px;
    box-shadow: 0 4px 10px black;
}
.preset-manager.active .preset-manager-container {
    opacity: 1;
    display: block;
}


.preset-manager .mod-button-bar .mod-button {
    width: 50%;
    text-align: center;
}

.preset-manager .mod-list {
    max-height: 400px;
    overflow-y: scroll;
}
.preset-manager .mod-list .mod-list-item {
    height: 50px;
    position: relative;
    transition: height 0.3s;
    overflow: hidden;
}
.preset-manager .mod-list .mod-list-item:hover {
    background: #ddd;
}
.preset-manager .mod-list .preset-manager-preset-name {
    font-size: 1.2em;
    height: 50px;
    line-height: 50px;
    margin-right: 168px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 5px;
    box-sizing: border-box;
}
.preset-manager .mod-list .mod-list-item.editing .preset-manager-preset-name {
    opacity: 0;
}

.preset-manager .mod-list .preset-manager-preset-entry {
    display: none;
    font-size: 1.2em;
    height: 50px;
    line-height: 50px;
    border: none;
    padding: 0 5px;
    box-sizing: border-box;
    box-shadow: none;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.preset-manager .mod-list .mod-list-item.editing .preset-manager-preset-entry {
    display: block;
}


.preset-manager .mod-list .preset-manager-preset-bindstate {
    display: inline-block;
}

.preset-manager .mod-list .mod-button {
    position: absolute;
    top: 3px;
}
.preset-manager .mod-list .mod-button.mod-button-remove {
    right: 58px;
}
.preset-manager .mod-list .mod-button.mod-button-bind {
    right: 3px;
}
.preset-manager .mod-list .mod-button.mod-button-edit {
    right: 113px;
}

/* = PEDALBOARD - SNAPSHOTS
================================================ */
#pedal-presets-list {
    background-color: inherit;
}
#pedal-presets-list-input::selection {
    background: #883996 !important;
    color: white !important;
}

@media only screen and (max-width: 1280px) {
    #plugins-library .count {
        display: none;
    }
}