.music-note-container ul {
    padding-left: 10px;
    width: 100%;
}

.music-note-container ul li,
#screenshot .dialog-section ul li {
    list-style: none;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 14px;
}

.music-note-container ul li img {
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 7px;
    margin-right: 5px;
    margin-left: 10px;
}

.music-note-container ul li span:hover {
    background-color: lightgray;
}

#screenshot .dialog-section ul li {
    padding: 10px;
}

.music-note-container ul li span,
#screenshot .dialog-section ul li span {
    padding: 5px 10px;
    display: block;
    width: 100%;
}

.music-note-list ul {
    display: none;
    margin-bottom: 0;
}

#music-note .dialog-section {
    text-align: left;
    padding: 5px;
}

.music-dialog-container {
    max-height: 300px;
    overflow: auto;
    width: 400px;

}

@media(max-width:940px) {
    .music-dialog-container {
        max-height: 200px !important;
    }
}


.music-note-list .fa-caret-down {
    position: absolute;
    right: 5px;
    top: 10px;
    font-size: 21px;
}

.music-note-list li {
    position: relative;
}

.music-note-list ul.active {
    display: block !important;
}

.music-note-list ul.invisible {
    display: none;
}


.toolbar.toolbar-elements,
.toolbar-properties {
    top: 35px !important;
}

.toolbar-properties {
    right: 19px;
}

.toolbar-left.btn,
.toolbar-right.btn {
    padding: 0 !important;
    height: 20px !important;
    line-height: initial;
    width: 20px !important;
    min-width: 20px !important;
    cursor: pointer;
    margin-left: 10px;
}

.toolbar-right.btn {
    margin-left: 0;
    margin-top: -20px;
    float: right;
    margin-right: 10px;
}

#clipboard-ta {
    display: none;
}

.left_100_nve {
    left: -100px;
    transition: 1s;
}

.header-right {
    display: none;
}


/* .toolbar-inner-left {
    box-shadow: 0 0 30px 1px rgb(0 0 0 / 15%);
    border: 1px solid #000;
    border-radius: 5px;
    pointer-events: none!important;
}

.toolbar-elements.in {
    width: 100%;
    box-shadow:none !important;
    border:none !important;
    border-radius: 0 !important;
} */


.shapes-container.open,
.music-dialog-container.open,
.zones-container.open,
.screen-shot-dialog-container.open {
    opacity: 1 !important;
    left: 100px;
    z-index: 9999;
    pointer-events: all;
    top: 10px
}

.color-container.open,
.text-styles-container.open,
.text-align-container.open,
.layout-container.open,
.text-settings-container.open,
.object-options-container.open {
    opacity: 1 !important;
    right: 100px;
    z-index: 9999;
    pointer-events: all;
    top: 10px
}

.tools-dialogs-left,
.tools-dialogs-right {
    position: relative;
}


@media (max-height: 500px) and (min-width: 580px) {
    .toolbar-elements.in {
        overflow-x: hidden;
        /* overflow-y: auto; */
        max-height: 80%;
        /* -webkit-overflow-scrolling:touch; */

    }

    /* .toolbar-properties.in{
        overflow-x: scroll;
        max-height: 70%;
        -webkit-overflow-scrolling: touch;
    } */

    .toolbar-properties.in {
        overflow-x: hidden;
        /* overflow-y: hidden; */
        /* overflow-y: auto; */
        -webkit-overflow-scrolling: touch;

        /* -webkit-overflow-scrolling: auto; */
        max-height: 70%;

    }

    .toolbar-elements.in {
        /* left: 38px; */
    }

    .toolbar-right.btn {
        /* margin-top: 20px; */
    }

    #space {
        height: calc(100% - 75px) !important;
        border-top: 1px solid black;
    }

    .toolbar-properties.in {
        /* top:75px !important; */
    }

    .toolbar-bars-right .btn.toolbar-right {
        /* top: 62px !important; */
    }

}

.toolbar-elements.in::-webkit-scrollbar {
    /* display: none; */
}

.toolbar-elements.in {
    padding: 0 6px;
}

/* .toolbar-elements.in .icon,
.toolbar-elements.in .btn.btn-icon-labeled,
.toolbar-elements.in .btn.btn-icon-labeled .icon-label {
    width: 70px;
} */

/* .toolbar-properties.in::-webkit-scrollbar {
    display: none;
} */
/* 
.toolbar-elements.in {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */

/* .toolbar-properties.in {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */

.toolbar-bars {
    position: relative;
}

.toolbar-bars .toolbar-left {
    /* position: absolute; */
}


#space {
    /* height: calc(100% - 25px) !important; */
}


.custom-img img {
    /* height: auto;
     width: 30%; */
    /* height: auto;
     width: auto;
     max-width: 300px;
     max-height: 150px;
     object-fit: contain; */


}


@media (max-height: 500px) and (min-width: 580px) {
    #space {
        height: calc(100% - 75px) !important;
    }

}

.toolbar-bars,
.toolbar-bars-right {
    position: relative;
}

.toolbar-bars .btn.toolbar-left {
    position: absolute;
    z-index: 99999;
    top: 8px;
}

.toolbar-bars-right .btn.toolbar-right {
    position: absolute;
    z-index: 99999;
    top: 28px;
    right: 10px;
}

@media (max-height: 500px) and (min-width: 580px) {
    #space {
        /* height: calc(100% - 75px)!important; */
    }

}

#space {
    height: 100% !important;
}


.toolbar-elements.in {
    background-color: white;
}

.hide {
    /* display: none !important; */
}


.audio-over-lay {
    /* height: 100%;
    position: absolute;
    width: 100%;
    background-color:transparent;
    z-index: 9999; */
}



.toolbar.toolbar-properties {
    display: none;
}

#screenshot .dialog-section {
    padding: 0 !important;
}

#screenshot .dialog-section ul {
    margin: 0;
    padding: 0;
}

@media (max-height: 500px) and (min-width: 580px) {
    p.guide-text {
        font-size: 13px;
    }
}




.toolbar-elements::-webkit-scrollbar,
.toolbar-properties::-webkit-scrollbar {
    width: 5px;
}

.toolbar-elements::-webkit-scrollbar-thumb,
.toolbar-properties::-webkit-scrollbar-thumb {
   background: gray;
}