body {
}


.txtInstInfo {
    font-size:1.2em;
    word-wrap:normal;
width:550px;
height:200px;
font-style:italic;
color:#333333;

}

.HeaderLogin {

color:#3333aa;
cursor:pointer;
}


.garbage {
vertical-align:middle;
margin-left:3em;
height:20px;
}


.ppTable {
    display: table;
}

.ppTableRow {
    display: table-row;
}

.ppTableHeading {
    display: table-header-group;
}

.ppTableBody {
    display: table-row-group;
}

.ppTableFoot {
    display: table-footer-group;
}

.ppTableCell, .rTableHead {
    display: table-cell;
}

.ppTableInput {
    display: table;
    width: 100%;
    color: #004400;
    background-color: #fafafa;
    font-weight: 400;
    font-size: 1em;
    border: 1px solid #e1e1e1;
    padding: 0.5em;
    border-radius: 8px;
}

.ppTableOutput {
    display: table;
    width: 100%;
    color: #004400;
    background-color: #fafafa;
    font-weight: 400;
    font-size: 1em;
    border:1px solid #e1e1e1;
    padding: 0.5em;
    border-radius: 8px;
}


.ppTableOutputHeading {
    display: table;
    width: 100%;
    color: #004400;
  
    font-size: 1.2em;
    margin-top:.2em;
    margin-bottom:.3em;

}

.paTable {
    display: block;
    width: 100%;
}

.paTableHeading, .paTableBody, .paTableFoot, .paTableRow {
    clear: both;
}

.paTableHead, .paTableFoot {
    background-color:#eeeeee;
    font-weight: bold;
}

.paTableCell, .paTableHead {

    float: left;
    overflow: hidden;
    padding: 3px;
    
}

.paTable:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.Split50DivLeft {
    display: inline-block;
    width: 50%;
    padding-right: 20px;
    vertical-align: top;
}

.Split50DivRight {
    display: inline-block;
    width: 49%;
    
    vertical-align: top;
}

.ytaspectratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    margin-bottom:1em;
}


.div2Column {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

@media only screen and (max-width:768px) {


    .Split50DivLeft {
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }

    .Split50DivRight {
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }




    .div2Column {
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }

}


    .imgMini {
        max-width: 60px;
        float: left;
    }





    .SysexFileUpload {
        all: unset;
        color: #004400;
        background-color: #f3f3f3;
        font-weight: 400;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline;
        overflow: hidden;
        padding: .3em .5em .3em .5em;
        border-radius: 8px;
    }

        .SysexFileUpload:hover {
            background-color: #dfffdf;
            color: #004400;
        }






    .SysexDropdown {
        color: #333333;
        background-color: #f3f3f3;
        font-size: 1em;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline;
        overflow: hidden;
        padding: .3em .5em .3em .5em;
        border-radius: 8px;
        border: 1px solid #666666;
    }

    .SysexTextSmall {
        padding: .1em;
        color: #777777;
        font-size: .8em;
    }

    .SysexDropdownSmall {
        color: #777777;
        background-color: #fafafa;
        font-size: .8em;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline;
        overflow: hidden;
        padding: .1em;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
    }

    .SysexButton {
        color: #333333;
        background-color: #f3f3f3;
        font-size: 1em;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: .3em .5em .3em .5em;
        border-radius: 8px;
        border: 1px solid #c3c3c3;
    }

        .SysexButton:hover {
            background-color: #dfffdf;
            color: #004400;
        }

    .SysexButtonSmall {
        color: #777777;
        background-color: #fafafa;
        font-size: .8em;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline;
        overflow: hidden;
        padding: .2em .4em .2em .4em;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
    }

    .SysexButtonColored {
    }

    .SysexDumpWindow {
        font-family: monospace;
        color: #bb2200;
        padding: 12px;
        font-size: 1.0em;
        word-wrap: hyphenate;
        width: 100%;
        height: 200px;
        white-space: pre-wrap;
    }

    .SysexInfoWindow {
        font-family: monospace;
        color: #007700;
        padding: 12px;
        font-size: 1.0em;
        word-wrap: hyphenate;
        width: 500px;
        height: 1em;
        white-space: pre-wrap;
    }

    .txtInstPatches {
        width: 700px;
        height: 700px;
        color: #333333;
    }

    .divLike {
        color: #777777;
        font-size: .9em;
        display: inline;
        vertical-align: top;
        margin-right: 3px;
    }

    .divLikeHide {
        color: #777777;
        font-size: .9em;
        display: none;
        vertical-align: top;
        margin-right: 3px;
    }



    .divDownloads {
        color: #777777;
        font-size: .9em;
        display: inline;
        vertical-align: top;
        margin-right: 5px;
    }

    .divDownloadsHide {
        color: #777777;
        font-size: .9em;
        display: none;
        vertical-align: top;
        margin-right: 5px;
    }



    .imgDownload {
        margin-bottom: 3px;
        margin-right: 3px;
    }

    .imgDownloadRight {
        float: right;
        margin-top: .1em;
        margin-left: .9em;
        width: 40px;
    }

    .imgLike {
        margin-bottom: 3px;
        margin-right: 3px;
        width: 15px;
    }

    .imgLikeButton {
        margin-top: 4px;
        float: right;
        width: 40px;
    }

    .imgLikeButtonDetails {
        margin-left:30px;
        float: right;
        width: 40px;
    }

    .divvintage {
        display: inline-block;
        width: 100%;
    }

    .imgvintageleft {
        float: left;
        margin: 0px 16px 6px 0px;
    }

    .divUserEditProfileImage {
        float: right;
        display: inline;
        width: 300px;
        border: 1px solid #cccccc;
        background-color: white;
        padding: 30px;
        margin-left: 20px;
    }

    .userEditTopControls {
        float: right;
    }

    .uploadimagefile {
        all: unset;
        color: #004400;
        background-color: #efffef;
        font-weight: 400;
        font-size: .8em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.1em;
        border-radius: 2px;
    }

        .uploadimagefile:hover {
            background-color: #dfffdf;
            color: #004400;
        }


    .uploadimagefileNew {
        all: unset;
        width: 100%;
        color: #004400;
        background-color: #efffef;
        font-weight: 400;
        font-size: .8em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.1em;
        border-radius: 2px;
    }

        .uploadimagefileNew:hover {
            background-color: #dfffdf;
            color: #004400;
        }


    .UserHeadline {
        font-size: 1em;
        width: 500px;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }

    .UserSummary {
        font-size: 1em;
        width: 500px;
        height: 300px;
        clear: both;
    }

    .imgProfile {
    }


    .PresetTable {
        display: inline-table;
        border-top: 1px solid #dddddd;
    }

    .PresetTableRow {
        display: table-row;
    }

    .PresetFormType {
        font-size: .9em;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }


    .PresetFormName {
        font-size: .9em;
        width: 500px;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }


    .PresetFormDescription {
        font-size: .9em;
        color: #777777;
        width: 500px;
        clear: both;
        padding: 3px;
        border-radius: 3px;
        border: 1px solid #cccccc;
    }


    .PresetFormDescriptionLong {
        font-size: .9em;
        color: #333333;
        width: 500px;
        clear: both;
        height: 6em;
        padding: 6px;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }


    @media screen and (max-width: 768px) {

        .userEditTopControls {
            float: left;
        }

        .divUserEditProfileImage {
            float: right;
            display: inline;
            width: 50%;
            border: 1px solid #cccccc;
            background-color: white;
            padding: 8px;
            margin-left: 8px;
        }

        .imgProfile {
            width: 100%;
        }

        .img-responsive-left {
            float: left;
        }

        .UserHeadline {
            font-size: 1em;
            width: 100%;
            clear: both;
            border-radius: 6px;
            border: 1px solid #cccccc;
        }

        .UserSummary {
            font-size: 1em;
            width: 100%;
            height: 300px;
            clear: both;
        }

        .uploadimagefile {
            all: unset;
            color: #004400;
            background-color: #efffef;
            font-weight: 400;
            font-size: .8em;
            width: 80%;
            /* 20px */
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            padding: 0.1em;
            border-radius: 2px;
        }


        .PresetTable {
            width: 100%;
            display: inline-table;
            border-top: 1px solid #dddddd;
        }

        .PresetTableRow {
            display: table-row;
        }

        .PresetFormType {
            font-size: .9em;
            clear: both;
            border-radius: 6px;
            border: 1px solid #cccccc;
        }


        .PresetFormName {
            font-size: .9em;
            width: 100%;
            clear: both;
            border-radius: 6px;
            border: 1px solid #cccccc;
        }


        .PresetFormDescription {
            font-size: .9em;
            color: #777777;
            width: 100%;
            clear: both;
            padding: 3px;
            border-radius: 3px;
            border: 1px solid #cccccc;
        }


        .PresetFormDescriptionLong {
            font-size: .9em;
            color: #333333;
            width: 100%;
            clear: both;
            height: 6em;
            padding: 3px;
            border-radius: 3px;
            border: 1px solid #cccccc;
        }
    }


    .affiliatelink {
        font-size: .9em;
        color: #118822;
    }

        .affiliatelink a {
            color: #22cc33;
        }


    .PresetList ul {
        margin-bottom: 8px;
        padding: 8px;
    }

    .PresetList li {
        border-top: 1px solid #eaeaea;
        border-left: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        padding: 4px;
        line-height: .9em;
        display: inline-block;
        width: 100%;
        font-size: .9em;
        color: #aaaaaa;
        background-color: #fcfcfc;
        margin: 2px;
        padding: 8px;
    }

    .subtitle {
        color: #444444;
        font-size: .9em;
    }

    .header-userinfo {
        color: #444444;
        font-size: .9em;
        line-height: 1.2em;
    }


    .divWavetableInfo {
        padding: 12px;
        background-color: #fafafa;
        border-radius: 8px;
        border: 1px solid #bbbbbb;
        margin-top: 4px;
        margin-bottom: 12px;
    }


    .divWavetableCurrentSlot {
        color: #555555;
        background-color: #fafafa;
        font-size: 1em;
        /* 20px */
        display: inline;
        overflow: hidden;
        border: 0px solid #fafafa;
    }

    .ddlWavetableDest {
        margin-left: 1em;
        color: #333333;
        background-color: #f3f3f3;
        font-weight: 700;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline;
        overflow: hidden;
        padding: .3em .5em .3em .5em;
        border-radius: 8px;
        border: 1px solid #666666;
    }


    .btnWavetableSave {
        margin-left: 1em;
        color: #333333;
        background-color: #e3e3e3;
        font-weight: 700;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: .3em .5em .3em .5em;
        border-radius: 8px;
        border: 1px solid #666666;
    }



    .MIDICCTable {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
    }

        .MIDICCTable td {
            display: table-cell;
            font-size: .9em;
            border-bottom: 1px solid #dddddd;
            padding: 6px;
            vertical-align: top;
            margin-top: 16px;
        }


    .PresetTableColumn {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
    }


    .PresetTableColumnImage {
        display: table-cell;
        font-size: .9em;
        line-height: 1.2em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        padding-top: 9px;
        vertical-align: top;
        margin-top: 16px;
        width: 140px;
    }

    .PresetTableColumnInstrument {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
    }

    .PresetTableColumnInstrumentMobile {
        display: none;
        font-size: .9em;
        vertical-align: top;
    }

    .PresetTableColumnType {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
    }

    .PresetTableColumnPatchInfo {
        display: table-cell;
        font-size: .9em;
        line-height: 1.5em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
    }


    .PresetTableColumnPatchDetails {
        display: table-cell;
        font-size: .9em;
        line-height: 1.5em;
        width:100%;
        padding: 3px;
        vertical-align: top;
        
    }



    .liAccountMobile {
        display: none;
        list-style: none;
    }



.downloadbtn {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 60%;
    opacity: 0.9;
}

.downloadagainbtn {
    background-color: #aCAFa0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 60%;
    opacity: 0.9;
}



    @media screen and (max-width: 768px) {



        .downloadbtn {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

        .downloadagainbtn {
            background-color: #aCAFa0;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }



        .liAccountMobile {
            display: block;
        }


        .PresetTableColumnImage {
            display: none;
            font-size: .9em;
            border-bottom: 1px solid #dddddd;
            padding: 6px;
            vertical-align: top;
            margin-top: 16px;
        }




        .PresetTableColumnInstrument {
            display: none;
            font-size: .9em;
            border-bottom: 1px solid #dddddd;
            padding: 6px;
            vertical-align: top;
            margin-top: 16px;
        }




        .PresetTableColumnPatchInfo {
            display: table-cell;
            font-size: .9em;
            border-bottom: 1px solid #dddddd;
            padding: 6px;
            vertical-align: top;
            margin-top: 16px;
        }


        .PresetTableColumnInstrumentMobile {
            display: inline;
            font-size: .9em;
            vertical-align: top;
        }
    }






    .PresetTableColumnHeader {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 6px;
        vertical-align: top;
        margin-top: 16px;
        background-color: #f3f3f3;
    }

    .PresetTableColumnDualSpan {
        display: table-cell;
        font-size: .9em;
        border-bottom: 1px solid #dddddd;
        padding: 3px;
    }




    .savepresetsbutton {
        all: unset;
        color: #f1f6f5;
        background-color: #199cc3;
        font-weight: 700;
        font-size: .8em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.225em 0.75em;
        border-radius: 5px;
        margin: .2em 0 .4em 0;
    }

        .savepresetsbutton:hover {
            background-color: #29ace3;
            color: #f1f6f5;
        }


    .savechangesbutton {
        all: unset;
        color: #f1f6f5;
        background-color: #19931c;
        font-weight: 700;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.625em 1.25em;
        border-radius: 10px;
    }

        .savechangesbutton:hover {
            background-color: #29b32c;
            color: #f1f6f5;
        }

    .forgotbuttonsmall {
        all: unset;
        float: right;
        color: #777777;
        background-color: #fafafa;
        font-weight: 400;
        font-size: .6em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0px 6px 0px 6px;
        border-radius: 2px;
        border: 1px solid #eeeeee;
    }

        .forgotbuttonsmall:hover {
            background-color: #e3e3e3;
            color: #777777;
        }


    .forgotbuttonsmallfullpage {
        all: unset;
        color: #777777;
        background-color: #fafafa;
        font-weight: 400;
        font-size: .6em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0px 6px 0px 6px;
        border-radius: 2px;
        border: 1px solid #eeeeee;
    }

        .forgotbuttonsmallfullpage:hover {
            background-color: #e3e3e3;
            color: #777777;
        }




    .logoutbuttonsmall {
        all: unset;
        color: #777777;
        background-color: #fafafa;
        font-weight: 400;
        font-size: .6em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0px 6px 0px 6px;
        border-radius: 2px;
        border: 1px solid #eeeeee;
        margin-right: 12px;
    }

        .logoutbuttonsmall:hover {
            background-color: #e3e3e3;
            color: #777777;
        }



    .resendverification {
        all: unset;
        display: none;
        color: #777777;
        background-color: #fafafa;
        font-weight: 400;
        font-size: .6em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
        padding: 0px 6px 0px 6px;
        border-radius: 2px;
        border: 1px solid #eeeeee;
    }

        .resendverification:hover {
            background-color: #e3e3e3;
            color: #777777;
        }

    .savebuttonsmall {
        all: unset;
        color: #f1f6f5;
        background-color: #19931c;
        font-weight: 700;
        font-size: .8em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.123em .8em;
        border-radius: 2px;
    }

        .savebuttonsmall:hover {
            background-color: #29b32c;
            color: #f1f6f5;
        }







    /*** Presets Search Filter and Buttons ***/
    .searchbox {
        background: #fafafa; /* Fallback color for non-css3 browsers */
        /* Gradients */
        display: flex;
        float: left;
        border: 1px solid #e3e3e3;
        font-size: .9em;
        margin: 4px;
        padding: 3px;
        width: 200px;
        /* Rounded Corners */
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        /* Shadows */
    }

    .searchbutton {
        background: #cccccc; /* Fallback color for non-css3 browsers */
        /* Gradients */
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        float: left;
        border: 0;
        border: 1px solid #d3d3d3;
        font-size: .8em;
        margin: 4px;
        padding: 3px;
        width: 80px;
        /* Rounded Corners */
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(245,245,245)));
        background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(245,245,245) 100%);
        /* Shadows */
    }


    /*** USER IS FOCUSED ON TEXT BOX ***/
    .searchbox:focus {
        outline: none;
        background: #fafafa; /* Fallback color for non-css3 browsers */
        /* Gradients */
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(245,245,245)));
        background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(245,245,245) 100%);
    }







    .textSmall {
        font-size: .8em;
        color: #777777;
    }





    .uploadnowbtn {
        color: white;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 50%;
        opacity: 0.9;
        padding: 14px 20px;
        background-color: #298ce3;
    }

    .presetuploadbutton {
        color: #f1f5f6;
        background-color: #298ce3;
        font-weight: 700;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.625em 1.25em;
        border-radius: 10px;
    }

        .presetuploadbutton:hover {
            background-color: #399cf3;
            color: #f1f5f6;
        }



    .preseteditbutton {
        color: #f6f5f1;
        background-color: #5cc329;
        font-weight: 700;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.625em 1.25em;
        border-radius: 10px;
    }

        .preseteditbutton:hover {
            background-color: #9cf339;
            color: #f1f5f6;
        }

    .tableComparison {
        padding: 8px;
        border: 1px solid #d3d3d3;
    }

        .tableComparison td {
            padding: 8px;
            border: 1px solid #d3d3d3;
            vertical-align: top;
        }

    .UserPasswordRed {
        font-size: 1em;
        color: #ff0000;
        width: 200px;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }

    .UserPassword {
        font-size: 1em;
        color: #333333;
        width: 200px;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }

    .UserPasswordBasic {
        font-size: 1em;
        color: #333333;
        width: 200px;
        clear: both;
        border-radius: 6px;
        border: 1px solid #cccccc;
    }






    .dropdownUpload {
        width: 50%;
        font-size: 1em;
        /* 20px */
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.625em 1.25em;
        /* 10px 20px */
    }



    @media screen and (max-width: 768px) {


        .dropdownUpload {
            width: 100%;
            font-size: 1em;
            /* 20px */
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            padding: 0.5em .5em;
            /* 10px 20px */
        }
    }

    .gridStyle {
        font-size: .9em;
        width: 100%;
        color: #999999;
    }