.center {
    margin: auto;
    background-color: #323232;
}

.synth-container {
    background: url(../images/synth-base-panel-lite.5.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100%;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas: 'play-container' 'audio-controls';
    width: 1400px;
    height: 800px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: auto;
}
/* Container */
.play-container {
    /*margin: auto;*/
    margin-left: 0px;
    background-size: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 200px auto 250px;
    grid-template-areas: 'vol-panel blocknav right-panel' 'vol-panel audio-container right-panel';
    border: 5px;
    text-align: center;
}

/* Container-Items */
.vol-panel {
    margin-top: 100px;
    grid-area: vol-panel;
    float: left;
}

.blocknav {
    grid-area: blocknav;
    margin-top: 100px;
}

.space {
    grid-area: space;
}

.right-panel {
    margin-top: 100px;
    grid-area: right-panel;
    /*float: right;
    align-content: center;*/
}

.audio-container {
    display: grid;
    grid-template-areas: 'audio audio audio audio audio audio' 'presetcode presetcode presetcode presetcode presetcode presetcode' 'footer footer footer footer footer footer';
    grid-gap: 5px;
    width: 100%;
}


/* Slice-Controls*/
.slice-controls {
    display: grid;
    justify-content: center;
    grid-template-areas: 'slice slice slice';
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    /*align-items: center;*/
}

/* Audio-Controls*/
.audio-controls {
    display: grid;
    justify-content: center;
    grid-template-areas: 'Names Preset effect delay' 'prevslice play rectone nextslice' 'muteBTN eqBTN metronome other';
    grid-template-columns: 150px 150px 150px 150px;
    grid-gap: 5px;
    align-items: center;
}


/* Grid-Items */
.audio-volume {
    grid-area: audio-volume;
}

.audio {
    grid-area: audio;
}

.blockinfo {
   margin:auto;
    background: #FDFF83;
    width: 65%;
    box-shadow: inset 0px 4px 4px rgb(0, 0, 0);
    border-radius: 5px;
    color: #000000;
}

.moreinfo {
    grid-area: moreinfo;
}

.eqbase {
    grid-area: eqbase;
}

.presetcode {
    grid-area: presetcode;
}

.grid-container > div {
    /*background-color: #000000;
        text-align: center;
        padding: 2px 0;
        font-size: 16px;*/
}

#powerswitch {
    background: url(../images/PowerSwitch.svg) no-repeat;
    background-size: 250px 135px;
    height: 150px;
    width: 100%;
}

#killtoggle {
    height: 54px;
    margin-top: 50px;
}


/*Block Info*/
#stringtype {
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

#blockTB {
    height: 20px;
    width: 600px;
    margin-left: 0px;
    margin-top: 5px;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

#blocksTB {
    margin-top: 5px;
    margin-left: 0px;
    margin-top: 5px;
    text-align: center;
    /*width: auto;
    height: auto;*/
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

#testTB {
    height: 20px;
    width: 500px;
    margin-left: 0px;
    margin-top: 5px;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

#clipTB {
    height: 20px;
    width: 500px;
    margin-left: 0px;
    margin-top: 5px;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}


#searchTB {
    /*text-align: center;
    height: 20px;
    width: auto;
    margin-left: 0px;
    margin-top: 10px;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 14px;*/
    text-align: center;
    width: auto;
    height: auto;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

/*Player Controls*/
#playtoneseq {
    background-image: url(../images/BAplayer/playbutton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}

#playallheights {
    background-image: url(../images/BAplayer/playallbtn.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}

#muteBTN {
    background-image: url(../images/BAplayer/pausebutton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}

#record {
    background-image: url(../images/BAplayer/recordbtn.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}

#cancel {
    background-image: url(../images/BAplayer/stoprecordbtn.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}



#prevslicebutton {
    background-image: url(../images/blocknav/backbutton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}

    #prevslicebutton:hover {
    }

#clickthrubutton {
    background-image: url(../images/blocknav/nextbutton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    border: none;
    background-color: transparent;
}


#wholeString {
    background: url(../images/notes/wholeBtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 140px;
    height: 60px;
    border: none;
}

    #wholeString:hover {
        background: url(../images/notes/wholeBtn-hvr.svg) no-repeat top left;
        background-size: contain;
        display: inline-block;
        width: 140px;
        height: 60px;
        border: none;
    }

#halfString {
    background: url(../images/notes/halfBtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 140px;
    height: 60px;
    border: none;
}

    #halfString:hover {
        background: url(../images/notes/halfBtn-hvr.svg) no-repeat top left;
        background-size: contain;
        display: inline-block;
        width: 140px;
        height: 60px;
        border: none;
    }

#quarterString {
    background: url(../images/notes/quarterBtn.svg) no-repeat top left;
    background-size: contain;
    width: 140px;
    height: 60px;
    border: none;
}

    #quarterString:hover {
        background: url(../images/notes/quarterBtn-hvr.svg) no-repeat top left;
        background-size: contain;
        width: 140px;
        height: 60px;
        border: none;
    }

#eighthString {
    background: url(../images/notes/eighthBtn.svg) no-repeat top left;
    background-size: contain;
    width: 140px;
    height: 60px;
    border: none;
}

    #eighthString:hover {
        background: url(../images/notes/eighthBtn-hvr.svg) no-repeat top left;
        background-size: contain;
        width: 140px;
        height: 60px;
        border: none;
    }


#minus100kbtn {
    background: url(../images/blocknav/minus100Kbtn.svg) no-repeat top left;
    background-size: contain;
    width: 70px;
    height: 30px;
    border: none;
}

#minus10kbtn {
    background: url(../images/blocknav/minus10Kbtn.svg) no-repeat top left;
    background-size: contain;
    width: 70px;
    height: 30px;
    border: none;
}

#minus1kbtn {
    background: url(../images/blocknav/minus1Kbtn.svg) no-repeat top left;
    background-size: contain;
    width: 70px;
    height: 30px;
    border: none;
}

#minus100btn {
    background: url(../images/blocknav/minus100btn.svg) no-repeat top left;
    background-size: contain;
    width: 70px;
    height: 30px;
    border: none;
}

#minus10btn {
    background: url(../images/blocknav/minus10btn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#prevbtn {
    background: url(../images/blocknav/prevbtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#plus100kbtn {
    background: url(../images/blocknav/plus100Kbtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#plus10kbtn {
    background: url(../images/blocknav/plus10Kbtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#plus1kbtn {
    background: url(../images/blocknav/plus1Kbtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#plus100btn {
    background: url(../images/blocknav/plus100btn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#plus10btn {
    background: url(../images/blocknav/plus10btn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

#nextbtn {
    background: url(../images/blocknav/nextbtn.svg) no-repeat top left;
    background-size: contain;
    display: inline-block;
    width: 70px;
    height: 30px;
    border: none;
}

select {
    height: 20px;
    width: 150px;
    margin-left: 0px;
    margin-top: 5px;
    background: #FDFF83;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

input[type=text] {
    background: #FDFF83;
    /*border-radius: 4px;
    text-align: center;
    width: 100px;
    height: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.11em;
    color: #000000;*/
}

button:hover {
    /*background: url(../images/button-bkg-hover.svg) no-repeat top left;*/
    /*background-image: url('../images/button-bkg-hover.svg');*/
    /*background-size: contain;*/
    /*display: inline-block;*/
    /*width: 70px;*/
    /*height: 50px;*/
    /*border: none;*/
}
/*
	CODE MIRROR
*/
.CodeMirror {
    border: 2px solid #777;
    height: auto;
}

.CodeMirror-focused {
    border: 2px solid #22DBC0;
}

.cm-s-default .cm-property {
    color: #3833ED !important;
}

.cm-s-default .cm-string {
    color: #7F33ED;
}

.cm-s-default .cm-number {
    color: #f5871f;
}

.Error {
    border-color: red;
}