:root {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

*,
::before,
::after {
    box-sizing: inherit;
}

@media all and (orientation: portrait) {
    .app_container {
        /* transition: 2s; */
        display: none;
    }

    .divRotate {
        position: fixed;
        display: flex;
        justify-content: center;
        background: whitesmoke;
        background-image: url('../img/drumset01.png');
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center;
        width: 100%;
        height: 100%;
    }

    .divRotate>span {
        font-size: clamp(40px, 6vw, 80px);
        position: absolute;
        top: 10%;
        font-family: Arial, Helvetica, sans-serif;
    }

}

@media all and (orientation: landscape) {
    .app_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: 120px 0 0 0;
        background-color: whitesmoke;
        width: 98%;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 20px;
    }

    .divRotate {
        display: none;
    }
}

body {
    margin: 0;
    padding: 0;
    /* background-color: rgb(41, 41, 41); */
    background: rgb(223, 222, 222);
    color: black;
    position: relative;
    display: flex;
    justify-content: center;

}


canvas {
    display: block;
    /* margin-top: 50px; */
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    background: whitesmoke;
}

.speedControlDiv {
    display: flex;
    justify-content: center;
}

.btnContainer {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    width: 1700px;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    padding: 10px;
}


.songButton {
    touch-action: pan-x pan-y;
    width: 830px;
    height: 80px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 30px;
    transition: 0.3s;
    color: black;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    padding-left: 30px;
}

.songDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 1700px;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    /* margin-top: 25px; */
    padding: 10px 5px;
}

.text-Lable-big {
    display: block;
    width: 1700px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 40px;
    /* margin: 20px 0 20px 0; */
}

/* .bar-number{
    text-align: left;
    position: absolute;
    top: 90px;
    font-size: 50px;
} */

.navigation-app {
    position: fixed;
    z-index: 100;
    top: 0px;
    display: flex;
    justify-content: space-between;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 28px;
    width: 100%;
    padding: 15px;
    background-color: whitesmoke;
    box-shadow: 0 0px 5px gray;
    border-color: transparent;
    padding: 15px 50px;
}

.logo_drummer {
    width: 90px;
    margin: 10px 0;
    opacity: 0.9;

}

.logo_drummer_animation {
    animation: rotateLogo 0.5s linear infinite;
    /* Анимация */
}

@keyframes rotateLogo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.logo-div {
    display: flex;
    align-items: center;
}

.site-title {
    padding: 0;
    margin: 0;
    font-size: 60px;
    pointer-events: none;
    color: #293133;
}


.navigation-app>ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    padding-inline-start: 0px;
}

.navigation-app>ul>li {
    list-style: none;
    /* margin-left: 10px; */

}

.navigation-app>ul>li>a {
    text-decoration: none;
    color: black;
    /* border: 1px solid gray; */
    /* border-radius: 20px; */
    width: auto;
    padding: 0 20px;
    height: 60px;
    font-size: 26px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    transition: 0.3s;
    margin: 0 5px;
}

.navigation-app>ul>li>a:visited {
    color: black;
}

.navigation-app>ul>li>a:hover {
    /* border: 1px solid gray; */
    box-shadow: 0 0px 10px #d35d57c9;
    padding: 0 30px;
    /* border-radius: 20px; */
    transition: 0.3s;
}



.speedButton {
    touch-action: pan-x pan-y;
    width: 160px;
    height: 80px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    transition: 0.3s;
    color: black;
}

.saveButton {
    touch-action: pan-x pan-y;
    width: 100%;
    height: 80px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 30px;
    transition: 0.3s;
    color: black;
}

.openLoaderButton {
    touch-action: pan-x pan-y;
    width: 815px;
    height: 80px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 30px;
    transition: 0.3s;
    color: black;
}


.canvasDiv {
    position: relative;
}

.cursor-div {
    position: absolute;
    /* width: 450px; */
    width: 100px;
    /* width: 5px; */
    height: 200px;
    /* background: rgba(18, 122, 219, 0.2); */
    background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, rgba(99, 178, 252, 0.2) 50%, rgba(250, 250, 250, 0) 100%);
    top: 150px;
    left: 350px;
    /* left: 350px; */
}

.cursor-div-good-visible {
    background: rgba(18, 122, 219, 0.2);
    width: 75px;
}

.moveControlDiv {
    display: flex;
    position: absolute;
    width: 1700px;
    height: 500px;
    /* background: #a8636363; */
    justify-content: space-between;
    top: 0;
}

.moveBtn {
    width: 20%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    border: 0;
    border-radius: 10px;
}

.moveBtn:hover {
    border: 0;
    /* background: rgba(195, 223, 193, 0.205); */
    box-shadow: none;
}


#site_title {
    font-size: 38px;
}




.buttonApp {
    touch-action: pan-x pan-y;
    width: 160px;
    height: 80px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 26px;
    transition: 0.3s;
    color: black;
}

.buttonApp:active {
    background-color: #d35d5783;
}

button:hover {
    /* background-color: rgb(218, 218, 218); */
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}

button:focus {
    outline: none;
}


.simplify-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m20.1 8.1l4.243 4.243M30 4v6zm9.9 4.1l-4.243 4.243zM44 18h-6zm-4.1 9.9l-4.243-4.243zM30 32v-6zm-9.9-4.1l4.243-4.243zM16 18h6zm13.586.414L5.544 42.456'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28%;
}


.simplify-btn-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m20.1 8.1l4.243 4.243M30 4v6zm9.9 4.1l-4.243 4.243zM44 18h-6zm-4.1 9.9l-4.243-4.243zM30 32v-6zm-9.9-4.1l4.243-4.243zM16 18h6zm13.586.414L5.544 42.456'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28%;
    background-color: rgba(144, 238, 144, 0.635);
}


.close-help-btn {
    width: 60px;
    height: 60px;
    background: #d35d57c9;
    font-size: 30px;
    padding: 10px;
}


.resetTimeLine {
    /* background-image: url(img/bi--arrow-counterclockwise.svg); */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="currentColor"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914a.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z" /><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466" /></g></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24%;
}



.minus-switcher {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.2 9.64L19.7.15a.835.835 0 0 1 1.2.259a.92.92 0 0 1-.278 1.25l-13.9 8.77c-.209.132-.481.066-.612-.149s-.075-.5.127-.642zm16.6-5.07l-15 6.5a.497.497 0 0 0-.254.618c.085.246.337.374.567.289l15.3-5.68c.454-.168.69-.707.523-1.19s-.673-.726-1.12-.533z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 11c0-1.57 2.49-2.93 6.11-3.58L5.09 8.94a13 13 0 0 0-.525.178c-.932.339-1.62.719-2.05 1.09c-.435.374-.516.648-.516.799s.081.424.516.799c.432.371 1.12.751 2.05 1.09c1.86.674 4.48 1.11 7.44 1.11c2.95 0 5.58-.437 7.44-1.11c.932-.339 1.62-.719 2.05-1.09c.435-.374.516-.648.516-.799s-.081-.424-.516-.799c-.432-.371-1.12-.751-2.05-1.09l-.053-.02l1.42-.49c1.38.669 2.2 1.5 2.2 2.4v9c0 2.21-4.92 4-11 4s-11-1.79-11-4v-9zm21 1.67c-.504.398-1.18.762-2 1.08v2.5a.5.5 0 0 1-1 0v-2.16c-1.16.348-2.52.611-4 .764v2.65a.5.5 0 0 1-1 0v-2.57a30 30 0 0 1-4 0v2.57a.5.5 0 0 1-1 0v-2.65c-1.48-.153-2.84-.416-4-.764v2.16a.5.5 0 0 1-1 0v-2.5c-.818-.315-1.5-.678-2-1.08V20c0 .151.081.424.516.799c.432.371 1.12.751 2.05 1.09c1.86.674 4.48 1.11 7.44 1.11c2.95 0 5.58-.437 7.44-1.11c.932-.339 1.62-.719 2.05-1.09c.435-.374.516-.648.516-.799v-7.33z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    background-color: whitesmoke;
}

.minus-switcher-off {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.2 9.64l13.5-9.49a0.835 0.835 0 0 1 1.2 0.259a0.92 0.92 0 0 1-0.278 1.25l-13.9 8.77c-0.209 0.132-0.481 0.066-0.612-0.149s-0.075-0.5 0.127-0.642l-0.037 0.002zm16.637-5.072l-15 6.5a0.497 0.497 0 0 0-0.254 0.618c0.085 0.246 0.337 0.374 0.567 0.289l15.3-5.68c0.454-0.168 0.69-0.707 0.523-1.19s-0.673-0.726-1.12-0.533l-0.016-0.004z' fill='%23000'/%3E%3Cpath clip-rule='evenodd' d='m1 11c0-1.57 2.49-2.93 6.11-3.58l-2.02 1.52a13 13 0 0 0-0.525 0.178c-0.932 0.339-1.62 0.719-2.05 1.09c-0.435 0.374-0.516 0.648-0.516 0.799s0.081 0.424 0.516 0.799c0.432 0.371 1.12 0.751 2.05 1.09c1.86 0.674 4.48 1.11 7.44 1.11c2.95 0 5.58-0.437 7.44-1.11c0.932-0.339 1.62-0.719 2.05-1.09c0.435-0.374 0.516-0.648 0.516-0.799s-0.081-0.424-0.516-0.799c-0.432-0.371-1.12-0.751-2.05-1.09l-0.053-0.02 1.42-0.49c1.38 0.669 2.2 1.5 2.2 2.4l0 9c0 2.21-4.92 4-11 4s-11-1.79-11-4l0-9l-0.012-0.008zm21.012 1.678c-0.504 0.398-1.18 0.762-2 1.08l0 2.5a0.5 0.5 0 0 1-1 0l0-2.16c-1.16 0.348-2.52 0.611-4 0.764l0 2.65a0.5 0.5 0 0 1-1 0l0-2.57a30 30 0 0 1-4 0l0 2.57a0.5 0.5 0 0 1-1 0l0-2.65c-1.48-0.153-2.84-0.416-4-0.764l0 2.16a0.5 0.5 0 0 1-1 0l0-2.5c-0.818-0.315-1.5-0.678-2-1.08l0 7.322c0 0.151 0.081 0.424 0.516 0.799c0.432 0.371 1.12 0.751 2.05 1.09c1.86 0.674 4.48 1.11 7.44 1.11c2.95 0 5.58-0.437 7.44-1.11c0.932-0.339 1.62-0.719 2.05-1.09c0.435-0.374 0.516-0.648 0.516-0.799l0-7.33l-0.012 0.008z' fill-rule='evenodd' fill='%23000'/%3E%3Cline x1='3' y1='3' x2='21' y2='21' stroke='%23ff0000' stroke-width='2' fill='none'/%3E%3Cline x1='3' y1='21' x2='21' y2='3' stroke='%23ff0000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    /* background-color: #d35d5783; */
    background-color: whitesmoke;
}

.metronome-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M64.458 228.867c-.428 2.167 1.007 3.91 3.226 3.893l121.557-.938c2.21-.017 3.68-1.794 3.284-3.97l-11.838-64.913c-.397-2.175-1.626-2.393-2.747-.487l-9.156 15.582c-1.12 1.907-1.71 5.207-1.313 7.388l4.915 27.03c.395 2.175-1.072 3.937-3.288 3.937H88.611c-2.211 0-3.659-1.755-3.233-3.92L114.85 62.533l28.44-.49l11.786 44.43c.567 2.139 2.01 2.386 3.236.535l8.392-12.67c1.22-1.843 1.73-5.058 1.139-7.185l-9.596-34.5c-1.184-4.257-5.735-7.677-10.138-7.638l-39.391.349c-4.415.039-8.688 3.584-9.544 7.912z'/%3E%3Cpath d='M118.116 198.935c-1.182 1.865-.347 3.377 1.867 3.377h12.392c2.214 0 4.968-1.524 6.143-3.39l64.55-102.463c1.18-1.871 3.906-3.697 6.076-4.074l9.581-1.667c2.177-.379 4.492-2.38 5.178-4.496l4.772-14.69c.683-2.104-.063-5.034-1.677-6.555L215.53 54.173c-1.609-1.517-4.482-1.862-6.4-.78l-11.799 6.655c-1.925 1.086-3.626 3.754-3.799 5.954l-.938 11.967c-.173 2.202-1.27 5.498-2.453 7.363l-72.026 113.603z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26%;
    background-color: whitesmoke;
}

.metronome-btn-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M64.458 228.867c-.428 2.167 1.007 3.91 3.226 3.893l121.557-.938c2.21-.017 3.68-1.794 3.284-3.97l-11.838-64.913c-.397-2.175-1.626-2.393-2.747-.487l-9.156 15.582c-1.12 1.907-1.71 5.207-1.313 7.388l4.915 27.03c.395 2.175-1.072 3.937-3.288 3.937H88.611c-2.211 0-3.659-1.755-3.233-3.92L114.85 62.533l28.44-.49l11.786 44.43c.567 2.139 2.01 2.386 3.236.535l8.392-12.67c1.22-1.843 1.73-5.058 1.139-7.185l-9.596-34.5c-1.184-4.257-5.735-7.677-10.138-7.638l-39.391.349c-4.415.039-8.688 3.584-9.544 7.912z'/%3E%3Cpath d='M118.116 198.935c-1.182 1.865-.347 3.377 1.867 3.377h12.392c2.214 0 4.968-1.524 6.143-3.39l64.55-102.463c1.18-1.871 3.906-3.697 6.076-4.074l9.581-1.667c2.177-.379 4.492-2.38 5.178-4.496l4.772-14.69c.683-2.104-.063-5.034-1.677-6.555L215.53 54.173c-1.609-1.517-4.482-1.862-6.4-.78l-11.799 6.655c-1.925 1.086-3.626 3.754-3.799 5.954l-.938 11.967c-.173 2.202-1.27 5.498-2.453 7.363l-72.026 113.603z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26%;
    background-color: rgba(144, 238, 144, 0.635);
}





.scrollRight {
    /* background-image: url(img/bi--arrow-right.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m16 400l240-144L16 112zm240 0l240-144l-240-144z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24%;
}


.scrollLeft {
    /* background-image: url(img/bi--arrow-left.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M496 400L256 256l240-144zm-240 0L16 256l240-144z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24%;
}



.loadOpen {
    /* background-image: url(img/material-symbols-light--download.svg); */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.577l-3.539-3.538l.708-.72L11.5 13.65V5h1v8.65l2.33-2.33l.709.719zM6.616 19q-.691 0-1.153-.462T5 17.384v-2.423h1v2.423q0 .231.192.424t.423.192h10.77q.23 0 .423-.192t.192-.424v-2.423h1v2.423q0 .691-.462 1.153T17.384 19z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35%;
}

.showSettingsBtnClass {
    width: 60px;
    height: 60px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    transition: 0.3s;
    color: black;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10.135 21l-.362-2.892q-.479-.145-1.035-.454q-.557-.31-.947-.664l-2.668 1.135l-1.865-3.25l2.306-1.739q-.045-.27-.073-.558q-.03-.288-.03-.559q0-.252.03-.53q.028-.278.073-.626L3.258 9.126l1.865-3.212L7.771 7.03q.448-.373.97-.673q.52-.3 1.013-.464L10.134 3h3.732l.361 2.912q.575.202 1.016.463t.909.654l2.725-1.115l1.865 3.211l-2.382 1.796q.082.31.092.569t.01.51q0 .233-.02.491q-.019.259-.088.626l2.344 1.758l-1.865 3.25l-2.681-1.154q-.467.393-.94.673t-.985.445L13.866 21zM11 20h1.956l.369-2.708q.756-.2 1.36-.549q.606-.349 1.232-.956l2.495 1.063l.994-1.7l-2.189-1.644q.125-.427.166-.786q.04-.358.04-.72q0-.38-.04-.72t-.166-.747l2.227-1.683l-.994-1.7l-2.552 1.07q-.454-.499-1.193-.935q-.74-.435-1.4-.577L13 4h-1.994l-.312 2.689q-.756.161-1.39.52q-.633.358-1.26.985L5.55 7.15l-.994 1.7l2.169 1.62q-.125.336-.175.73t-.05.82q0 .38.05.755t.156.73l-2.15 1.645l.994 1.7l2.475-1.05q.589.594 1.222.953q.634.359 1.428.559zm.973-5.5q1.046 0 1.773-.727T14.473 12t-.727-1.773t-1.773-.727q-1.052 0-1.776.727T9.473 12t.724 1.773t1.776.727M12 12" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px;
}

.showSettingsBtnClassActive {
    width: 60px;
    height: 60px;
    /* padding: 5px; */
    background: rgba(144, 238, 144, 0.635);
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    transition: 0.3s;
    color: black;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10.135 21l-.362-2.892q-.479-.145-1.035-.454q-.557-.31-.947-.664l-2.668 1.135l-1.865-3.25l2.306-1.739q-.045-.27-.073-.558q-.03-.288-.03-.559q0-.252.03-.53q.028-.278.073-.626L3.258 9.126l1.865-3.212L7.771 7.03q.448-.373.97-.673q.52-.3 1.013-.464L10.134 3h3.732l.361 2.912q.575.202 1.016.463t.909.654l2.725-1.115l1.865 3.211l-2.382 1.796q.082.31.092.569t.01.51q0 .233-.02.491q-.019.259-.088.626l2.344 1.758l-1.865 3.25l-2.681-1.154q-.467.393-.94.673t-.985.445L13.866 21zM11 20h1.956l.369-2.708q.756-.2 1.36-.549q.606-.349 1.232-.956l2.495 1.063l.994-1.7l-2.189-1.644q.125-.427.166-.786q.04-.358.04-.72q0-.38-.04-.72t-.166-.747l2.227-1.683l-.994-1.7l-2.552 1.07q-.454-.499-1.193-.935q-.74-.435-1.4-.577L13 4h-1.994l-.312 2.689q-.756.161-1.39.52q-.633.358-1.26.985L5.55 7.15l-.994 1.7l2.169 1.62q-.125.336-.175.73t-.05.82q0 .38.05.755t.156.73l-2.15 1.645l.994 1.7l2.475-1.05q.589.594 1.222.953q.634.359 1.428.559zm.973-5.5q1.046 0 1.773-.727T14.473 12t-.727-1.773t-1.773-.727q-1.052 0-1.776.727T9.473 12t.724 1.773t1.776.727M12 12" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px;
}

.showGameModeBtnClass {
    width: 60px;
    height: 60px;
    /* padding: 5px; */
    background: whitesmoke;
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    transition: 0.3s;
    color: black;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M17 4c.763 0 1.394.434 1.856.89c.481.473.922 1.109 1.314 1.81c.787 1.406 1.472 3.243 1.925 5.058c.45 1.801.699 3.682.54 5.161C22.475 18.404 21.71 20 20 20c-1.476 0-2.652-.76-3.614-1.531l-.351-.289l-.492-.415l-.444-.368C14.08 16.572 13.175 16 12 16s-2.08.572-3.099 1.397l-.444.368l-.492.415l-.35.289C6.651 19.24 5.475 20 4 20c-1.711 0-2.476-1.596-2.635-3.081c-.158-1.48.09-3.36.54-5.161c.453-1.815 1.138-3.652 1.925-5.059c.392-.7.833-1.336 1.314-1.81C5.606 4.434 6.237 4 7 4c.515 0 1.018.123 1.513.27l.592.181q.148.046.295.087c.865.248 1.75.462 2.6.462s1.735-.214 2.6-.462l.885-.267C15.983 4.124 16.49 4 17 4m0 2c-.383 0-.783.116-1.171.243l-.458.151l-.221.068c-.885.252-2 .538-3.15.538s-2.265-.286-3.15-.538l-.22-.068l-.459-.151C7.783 6.115 7.383 6 7 6c-.418.078-.793.585-1.076 1.055l-.158.275l-.19.346c-.682 1.218-1.31 2.88-1.73 4.567c-.395 1.576-.587 3.086-.514 4.21l.026.293l.02.176l.03.208c.069.401.218.87.592.87c.812 0 1.49-.404 2.333-1.074l.403-.328l.76-.636l.344-.28C8.904 14.839 10.235 14 12 14s3.096.84 4.16 1.682l.345.28l.76.636l.402.328C18.51 17.596 19.187 18 20 18c.34 0 .494-.387.571-.759l.038-.218l.037-.317c.123-1.146-.067-2.765-.491-4.463c-.386-1.546-.946-3.072-1.562-4.254l-.359-.66l-.158-.273C17.793 6.585 17.418 6.078 17 6M8.5 8a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m7 0a1 1 0 0 1 .993.883L16.5 9v.5h.5a1 1 0 0 1 .117 1.993L17 11.5h-.5v.5a1 1 0 0 1-1.993.117L14.5 12v-.5H14a1 1 0 0 1-.117-1.993L14 9.5h.5V9a1 1 0 0 1 1-1m-7 2a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px;
}

.showGameModeBtnClassActive {
    width: 60px;
    height: 60px;
    /* padding: 5px; */
    background: rgba(144, 238, 144, 0.635);
    margin: 5px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    transition: 0.3s;
    color: black;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M17 4c.763 0 1.394.434 1.856.89c.481.473.922 1.109 1.314 1.81c.787 1.406 1.472 3.243 1.925 5.058c.45 1.801.699 3.682.54 5.161C22.475 18.404 21.71 20 20 20c-1.476 0-2.652-.76-3.614-1.531l-.351-.289l-.492-.415l-.444-.368C14.08 16.572 13.175 16 12 16s-2.08.572-3.099 1.397l-.444.368l-.492.415l-.35.289C6.651 19.24 5.475 20 4 20c-1.711 0-2.476-1.596-2.635-3.081c-.158-1.48.09-3.36.54-5.161c.453-1.815 1.138-3.652 1.925-5.059c.392-.7.833-1.336 1.314-1.81C5.606 4.434 6.237 4 7 4c.515 0 1.018.123 1.513.27l.592.181q.148.046.295.087c.865.248 1.75.462 2.6.462s1.735-.214 2.6-.462l.885-.267C15.983 4.124 16.49 4 17 4m0 2c-.383 0-.783.116-1.171.243l-.458.151l-.221.068c-.885.252-2 .538-3.15.538s-2.265-.286-3.15-.538l-.22-.068l-.459-.151C7.783 6.115 7.383 6 7 6c-.418.078-.793.585-1.076 1.055l-.158.275l-.19.346c-.682 1.218-1.31 2.88-1.73 4.567c-.395 1.576-.587 3.086-.514 4.21l.026.293l.02.176l.03.208c.069.401.218.87.592.87c.812 0 1.49-.404 2.333-1.074l.403-.328l.76-.636l.344-.28C8.904 14.839 10.235 14 12 14s3.096.84 4.16 1.682l.345.28l.76.636l.402.328C18.51 17.596 19.187 18 20 18c.34 0 .494-.387.571-.759l.038-.218l.037-.317c.123-1.146-.067-2.765-.491-4.463c-.386-1.546-.946-3.072-1.562-4.254l-.359-.66l-.158-.273C17.793 6.585 17.418 6.078 17 6M8.5 8a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m7 0a1 1 0 0 1 .993.883L16.5 9v.5h.5a1 1 0 0 1 .117 1.993L17 11.5h-.5v.5a1 1 0 0 1-1.993.117L14.5 12v-.5H14a1 1 0 0 1-.117-1.993L14 9.5h.5V9a1 1 0 0 1 1-1m-7 2a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px;
}

.hideCursorClass {
    /* background-image: url(img/lets-icons--view-hide-light.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M12 20h-1a2 2 0 0 1-2-2a2 2 0 0 1-2 2H6m7-12h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7m-8 0H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1m1-4h1a2 2 0 0 1 2 2a2 2 0 0 1 2-2h1M9 6v12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    background-color: whitesmoke;
    position: relative;
}

.cursorSpan {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 28px;
}


.button_app_nav {
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin: 0 0 0 5px;
    font-size: 16px;
    border: 1px solid gray;
    background-color: whitesmoke;
    transition: 0.2s;
    color: transparent;
}

.set_favorite_btn {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path fill="currentColor" d="M27.19 34a2.2 2.2 0 0 1-1.24-.38l-7.46-5a.22.22 0 0 0-.25 0l-7.46 5a2.22 2.22 0 0 1-3.38-2.41l2.45-8.64a.23.23 0 0 0-.08-.24l-7.06-5.55a2.22 2.22 0 0 1 1.29-4l9-.34a.23.23 0 0 0 .2-.15l3.1-8.43a2.22 2.22 0 0 1 4.17 0l3.1 8.43a.23.23 0 0 0 .2.15l9 .34a2.22 2.22 0 0 1 1.29 4L27 22.33a.22.22 0 0 0-.08.24l2.45 8.64A2.23 2.23 0 0 1 27.19 34m-8.82-7.42a2.2 2.2 0 0 1 1.23.42l7.46 5a.22.22 0 0 0 .34-.25l-2.45-8.64a2.21 2.21 0 0 1 .77-2.35l7.06-5.55a.22.22 0 0 0-.13-.4l-9-.34a2.22 2.22 0 0 1-2-1.46l-3.1-8.43a.22.22 0 0 0-.42 0L15.06 13a2.22 2.22 0 0 1-2 1.46l-9 .34a.22.22 0 0 0-.13.4L11 20.76a2.22 2.22 0 0 1 .77 2.35l-2.44 8.64a.21.21 0 0 0 .08.24a.2.2 0 0 0 .26 0l7.46-5a2.2 2.2 0 0 1 1.23-.37Z" class="clr-i-outline clr-i-outline-path-1" /><path fill="none" d="M0 0h36v36H0z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    /* border-color: transparent; */
    transition: 0s;
    margin: 0 0 0 10px;
    /* box-shadow: inset 0 0px 20px #ecb85eb5; */
}



.set_favorite_btn_active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="Goldenrod" d="M7.948.779a.5.5 0 0 0-.896 0L5.005 4.926l-4.577.665a.5.5 0 0 0-.277.853l3.312 3.228l-.782 4.559a.5.5 0 0 0 .725.527L7.5 12.605l4.094 2.153a.5.5 0 0 0 .725-.527l-.782-4.56l3.312-3.227a.5.5 0 0 0-.277-.853l-4.577-.665z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    /* border-color: transparent; */
    transition: 0s;
    margin: 0 0 0 10px;
    /* box-shadow: inset 0 0px 20px #ecb85eb5; */
}


.lessonButtonFavorite {
    width: 45%;
    text-align: start;
    padding: 20px;
    margin: 10px;
}


.metronome_sound_btn {
    display: flex;
    justify-content: end;
    align-items: start;
    padding: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M64.458 228.867c-.428 2.167 1.007 3.91 3.226 3.893l121.557-.938c2.21-.017 3.68-1.794 3.284-3.97l-11.838-64.913c-.397-2.175-1.626-2.393-2.747-.487l-9.156 15.582c-1.12 1.907-1.71 5.207-1.313 7.388l4.915 27.03c.395 2.175-1.072 3.937-3.288 3.937H88.611c-2.211 0-3.659-1.755-3.233-3.92L114.85 62.533l28.44-.49l11.786 44.43c.567 2.139 2.01 2.386 3.236.535l8.392-12.67c1.22-1.843 1.73-5.058 1.139-7.185l-9.596-34.5c-1.184-4.257-5.735-7.677-10.138-7.638l-39.391.349c-4.415.039-8.688 3.584-9.544 7.912z'/%3E%3Cpath d='M118.116 198.935c-1.182 1.865-.347 3.377 1.867 3.377h12.392c2.214 0 4.968-1.524 6.143-3.39l64.55-102.463c1.18-1.871 3.906-3.697 6.076-4.074l9.581-1.667c2.177-.379 4.492-2.38 5.178-4.496l4.772-14.69c.683-2.104-.063-5.034-1.677-6.555L215.53 54.173c-1.609-1.517-4.482-1.862-6.4-.78l-11.799 6.655c-1.925 1.086-3.626 3.754-3.799 5.954l-.938 11.967c-.173 2.202-1.27 5.498-2.453 7.363l-72.026 113.603z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
}

.concert-btn {
    display: flex;
    justify-content: end;
    align-items: start;
    padding: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M9 6.75a3 3 0 1 0 6 0a3 3 0 0 0-6 0m-1.5 9a4.5 4.5 0 1 1 9 0z'/%3E%3Cpath d='M6 9V6.75a6 6 0 1 1 12 0v1.5m4.437 13.069A1.5 1.5 0 0 1 21 23.25H3a1.5 1.5 0 0 1-1.437-1.931l1.35-4.5A1.5 1.5 0 0 1 4.35 15.75h15.3a1.5 1.5 0 0 1 1.437 1.069z'/%3E%3Cpath d='M5.25 19.5c0 .398.237.78.659 1.06S6.903 21 7.5 21s1.169-.158 1.591-.44c.422-.28.659-.662.659-1.06s-.237-.78-.659-1.06S8.097 18 7.5 18s-1.169.158-1.591.44c-.422.28-.659.662-.659 1.06m9 0c0 .197.058.392.171.574s.28.347.488.487c.209.139.457.25.73.325s.566.114.861.114s.588-.039.861-.114s.521-.186.73-.325c.209-.14.375-.305.488-.487s.171-.377.171-.574s-.058-.392-.171-.574a1.6 1.6 0 0 0-.488-.487a2.5 2.5 0 0 0-.73-.325c-.273-.075-.565-.114-.861-.114s-.588.039-.861.114a2.5 2.5 0 0 0-.73.325a1.6 1.6 0 0 0-.488.487a1.1 1.1 0 0 0-.171.574M21 7.5a2.25 2.25 0 0 1-2.25 2.25A.75.75 0 0 1 18 9V5.25h.75A2.25 2.25 0 0 1 21 7.5m-18 0a2.25 2.25 0 0 0 2.25 2.25A.75.75 0 0 0 6 9V5.25h-.75A2.25 2.25 0 0 0 3 7.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
}

.hihat_part_btn {
    width: 475px;
}



.metronome_sound_span {
    display: block;
    font-size: 28px;
}




/* Стили для контейнера кнопок избранного, если нужны */
#favoriteContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 1700px;
    /* border-radius: 10px;
    box-shadow: 0 0px 5px gray; */
    /* margin-top: 25px; */
    padding: 10px 5px;
}

/* Стили для самой кнопки избранного */
.lessonButtonFavorite {
    position: relative;
    /* Важно для позиционирования крестика */
    display: flex;
    /* Чтобы текст и крестик были в ряд */
    justify-content: space-between;
    /* Распределить пространство */
    align-items: center;
    /* Выровнять по центру по вертикали */
    padding: 8px 20px;
    padding-right: 30px;
    /* Отступ справа для крестика */
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    /* Предотвратить перенос текста */
    overflow: hidden;
    /* Скрыть возможный избыток */
    text-overflow: ellipsis;
    /* Добавить многоточие, если текст длинный */
    min-width: 820px;
    /* Минимальная ширина, чтобы кнопки не были слишком узкими */
}

/* Стили для текста внутри кнопки (необязательно, но может быть полезно) */
.favorite-button-text {
    /*flex-grow: 1; /* Чтобы текст занимал всю доступную ширину */
    margin-right: 5px;
    /* Небольшой отступ от крестика */
}


/* Стили для крестика */
.favorite-delete-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background-color: gray;
    border-radius: 8%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
    transition: 0.3s;
}

.favorite-delete-btn:hover {
    background-color: rgb(233, 63, 63);
    transition: 0.3s;
}




.text_label {
    display: block;
    width: 500px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    margin: 0 0 10px 0;
    overflow: hidden;
    white-space: nowrap;
}

.song-label-container {
    display: flex;
    width: 1700px;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px 0;
}

#clock {
    font-family: Arial, Helvetica, sans-serif;

    font-size: 32px;
    font-family: Arial, Helvetica, sans-serif;
}

.song-name {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
}

.selectInputsDiv {
    display: flex;
    justify-content: space-evenly;
    margin: 25px;
}

.selectInputsDiv_incide {
    margin: 0 15px 0 15px;
}

.simple-notification {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    font-size: 28px;
    top: 5px;
    left: 5px;
    padding: 10px;
}

.simple-notification-speed {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    font-size: 28px;
    top: 5px;
    right: 5px;
    padding: 10px;
}

.simple-notification-minus {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    font-size: 28px;
    top: 5px;
    right: 44%;
    padding: 10px;
}


.div_for_metronome_select {
    position: relative;
    display: flex;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px;
}

.label_for_metronome_app_select {
    width: 100%;
    position: absolute;
    top: 6px;
    text-align: center;
    font-size: 16px;
    pointer-events: none;
    pointer-events: none;
}


.select_app {
    font-family: Arial, Helvetica, sans-serif;
    color: transparent;
    width: 160px;
    height: 80px;
    font-size: 28px;
    appearance: none;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: whitesmoke;
    outline: none;
    transition: 0.3s;
    text-align: center;
}


.select_app:hover {
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}

.select_app option {
    color: black;
}

.label_for_metronome {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 28px;
    pointer-events: none;
}

.textArea {
    overflow: hidden;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: whitesmoke;
    width: 500px;
    height: 50px;
    font-size: 26px;
    color: black;
}

.inputAppFile[type=file] {
    overflow: hidden;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: whitesmoke;
    width: 500px;
    height: 50px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}


.inputAppFile[type=file]::file-selector-button {
    height: 50px;
    border: none;
    border-radius: 4px;
    background-color: rgba(144, 238, 144, 0.635);
    margin-top: 0px;
    transition: 0.3s;
    color: black;
    font-size: 26px;
    outline: none;
}


.inputAppFile[type=file]:hover {
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}


.startStopBtn {
    background: rgba(144, 238, 144, 0.867);
    width: 280px;
    height: 80px;
    /* background-image: url(img/ic--baseline-play-arrow.svg); */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
}


.startStopBtnChangeBackImg {
    /* background-image: url(img/ic--baseline-stop.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 19V5h4v14zm-8 0V5h4v14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
}

.material-symbols--pause {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 19V5h4v14zm-8 0V5h4v14z'/%3E%3C/svg%3E");
}

.stop-reset-pos-Btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M143.47 64v163.52L416 64v384L143.47 284.48V448H96V64z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22%;
}

.metronome-switch-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}

.metronome-switch-btn-div {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M64.458 228.867c-.428 2.167 1.007 3.91 3.226 3.893l121.557-.938c2.21-.017 3.68-1.794 3.284-3.97l-11.838-64.913c-.397-2.175-1.626-2.393-2.747-.487l-9.156 15.582c-1.12 1.907-1.71 5.207-1.313 7.388l4.915 27.03c.395 2.175-1.072 3.937-3.288 3.937H88.611c-2.211 0-3.659-1.755-3.233-3.92L114.85 62.533l28.44-.49l11.786 44.43c.567 2.139 2.01 2.386 3.236.535l8.392-12.67c1.22-1.843 1.73-5.058 1.139-7.185l-9.596-34.5c-1.184-4.257-5.735-7.677-10.138-7.638l-39.391.349c-4.415.039-8.688 3.584-9.544 7.912z'/%3E%3Cpath d='M118.116 198.935c-1.182 1.865-.347 3.377 1.867 3.377h12.392c2.214 0 4.968-1.524 6.143-3.39l64.55-102.463c1.18-1.871 3.906-3.697 6.076-4.074l9.581-1.667c2.177-.379 4.492-2.38 5.178-4.496l4.772-14.69c.683-2.104-.063-5.034-1.677-6.555L215.53 54.173c-1.609-1.517-4.482-1.862-6.4-.78l-11.799 6.655c-1.925 1.086-3.626 3.754-3.799 5.954l-.938 11.967c-.173 2.202-1.27 5.498-2.453 7.363l-72.026 113.603z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 29%;
}

.metronome-switch-btn-lbl {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 28px;
    text-align: center;
}


.zoom-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M24 19h-3v-3h-2v3h-3v2h3v3h2v-3h3z'/%3E%3Cpath fill='%23000' d='m31 29.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L29.586 31zM20 26a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M4 8H2V4a2 2 0 0 1 2-2h4v2H4zm22 0h-2V4h-4V2h4a2 2 0 0 1 2 2zM12 2h4v2h-4zM8 26H4a2 2 0 0 1-2-2v-4h2v4h4zM2 12h2v4H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-size: 25%;
}

.zoom-btn-on {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16 19h8v2h-8z'/%3E%3Cpath fill='%23000' d='m31 29.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L29.586 31zM20 26a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M4 8H2V4a2 2 0 0 1 2-2h4v2H4zm22 0h-2V4h-4V2h4a2 2 0 0 1 2 2zM12 2h4v2h-4zM8 26H4a2 2 0 0 1-2-2v-4h2v4h4zM2 12h2v4H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-size: 25%;
}

.zoom-control-btn {
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m31 29.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L29.586 31zM20 26a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M8 26H4a2 2 0 0 1-2-2v-4h2v4h4zM2 12h2v4H2zm24-4h-2V4h-4V2h4a2 2 0 0 1 2 2zM12 2h4v2h-4zM4 8H2V4a2 2 0 0 1 2-2h4v2H4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-size: 25%;
    justify-content: flex-end;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
}

.play-rate-switcher-btn {
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911c-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-size: 24%;
    justify-content: flex-end;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
}




.show-grid-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h13a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v3h5V4zM3 19a2 2 0 0 0 2 2h3v-5H3zm5-9H3v5h5zm10 11a2 2 0 0 0 2-2v-3h-5v5zm2-11h-5v5h5zm0-4a2 2 0 0 0-2-2h-3v5h5zM9 4v5h5V4zm0 17h5v-5H9zm5-11H9v5h5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26%;
}

.show-grid-btn-off {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m.79 2.46l.71-.71L22.25 22.5l-.71.71l-1.78-1.78c-.49.36-1.1.57-1.76.57H5a3 3 0 0 1-3-3V6c0-.66.21-1.27.57-1.76zM5 3h13a3 3 0 0 1 3 3v13l-.09.74l-.91-.9V16h-2.84l-1-1H20v-5h-5v3.84l-1-1V10h-2.84l-1-1H14V4H9v3.84l-1-1V4H5.16l-.9-.91zM3 6v3h4.34L3.29 4.96C3.11 5.26 3 5.62 3 6m6 9h4.34L9 10.66zm6 6h3c.38 0 .74-.11 1.04-.29L15 16.66zM3 19a2 2 0 0 0 2 2h3v-5H3zm5-9H3v5h5zm12-4a2 2 0 0 0-2-2h-3v5h5zM9 21h5v-5H9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26%;
}

#iPlayDrumsHref {
    border: 1px solid gray;
    border-radius: 5px;
}

#coursesHref {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8 8'%3E%3Cpath fill='%23293133' d='M0 3h1v4m1-1V4h4v2M0 3l4-2l4 2l-4 2'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    margin: 0 5px;
    color: transparent;
}

#videoHref {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23293133' d='M8.001 4h8v1.997h2V4A2 2 0 0 1 20 6v12a2 2 0 0 1-1.999 2v-2.003h-2V20h-8v-2.003h-2V20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h.001v1.997h2zM10 15l4.5-3L10 9zm8.001.997v-3h-2v3zm0-5v-3h-2v3zm-10 5v-3h-2v3zm0-5v-3h-2v3z'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    margin: 0 5px;
    color: transparent;
}

#helpBtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 14 14'%3E%3Cpath fill='%23293133' fill-rule='evenodd' d='M12 10.75h-.25v1.75H12a.75.75 0 0 1 0 1.5H3.625a2.375 2.375 0 0 1-2.375-2.375V2.25A2.25 2.25 0 0 1 3.5 0h7a2.25 2.25 0 0 1 2.25 2.25V10a.75.75 0 0 1-.75.75m-8.375 0h6.625v1.75H3.625a.875.875 0 0 1 0-1.75m3.546-7.921a.875.875 0 0 0-1.046.858a.625.625 0 1 1-1.25 0a2.125 2.125 0 1 1 2.75 2.031a.625.625 0 0 1-1.25-.031v-.5c0-.345.28-.625.625-.625a.875.875 0 0 0 .17-1.733ZM7 8.884a.875.875 0 1 1 0-1.75a.875.875 0 0 1 0 1.75' clip-rule='evenodd'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    margin: 0 5px;
    color: transparent;
}


#favoriteHref {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 36 36'%3E%3Cpath fill='%23293133' d='M34 16.78a2.22 2.22 0 0 0-1.29-4l-9-.34a.23.23 0 0 1-.2-.15l-3.11-8.4a2.22 2.22 0 0 0-4.17 0l-3.1 8.43a.23.23 0 0 1-.2.15l-9 .34a2.22 2.22 0 0 0-1.29 4l7.06 5.55a.23.23 0 0 1 .08.24l-2.43 8.61a2.22 2.22 0 0 0 3.38 2.45l7.46-5a.22.22 0 0 1 .25 0l7.46 5a2.2 2.2 0 0 0 2.55 0a2.2 2.2 0 0 0 .83-2.4l-2.45-8.64a.22.22 0 0 1 .08-.24Z' class='clr-i-solid clr-i-solid-path-1'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    margin: 0 5px;
    color: transparent;
}



#vkBtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(590 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-590 -8910)' fill='none'/%3E%3Cpath d='M24.762,7.717c.165-.557,0-.967-.793-.967H21.344a1.127,1.127,0,0,0-1.141.744,21.989,21.989,0,0,1-3.226,5.369c-.61.61-.891.806-1.225.806-.165,0-.419-.2-.419-.753v-5.2c0-.668-.187-.967-.74-.967H10.468a.633.633,0,0,0-.668.6c0,.633.945.78,1.043,2.562v3.867c0,.847-.151,1-.486,1-.891,0-3.057-3.27-4.34-7.013C5.759,7.044,5.5,6.75,4.832,6.75H2.208c-.749,0-.9.352-.9.744,0,.7.891,4.148,4.148,8.711,2.17,3.114,5.226,4.8,8.007,4.8,1.671,0,1.876-.374,1.876-1.02,0-2.976-.151-3.257.686-3.257.388,0,1.056.2,2.615,1.7,1.782,1.782,2.076,2.58,3.074,2.58h2.624c.749,0,1.127-.374.909-1.114-.5-1.555-3.872-4.754-4.023-4.968-.388-.5-.276-.722,0-1.167,0,0,3.208-4.513,3.538-6.042Z' transform='translate(-588.308 -8908.879)' fill='%23293133'/%3E%3C/g%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    margin: 0 5px;
}

#vkBtn>a {
    color: transparent;
    width: 60px;
}

#vkBtn>a:hover {
    color: transparent;
    width: 60px;
}


#tgBtn {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23293133" class="bi bi-telegram" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" /></svg>');
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    margin: 0 5px;
}

#tgBtn>a {
    color: transparent;
    width: 60px;
}

#tgBtn>a:hover {
    color: transparent;
    width: 60px;
}


#donate-me {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.726 13.02L14 16H9v-1h4.065a.5.5 0 0 0 .416-.777l-.888-1.332A2 2 0 0 0 10.93 12H3a1 1 0 0 0-1 1v6a2 2 0 0 0 2 2h9.639a3 3 0 0 0 2.258-1.024L22 13l-1.452-.484a3 3 0 0 0-2.822.504m1.532-5.63c.451-.465.73-1.108.73-1.818s-.279-1.353-.73-1.818A2.45 2.45 0 0 0 17.494 3S16.25 2.997 15 4.286C13.75 2.997 12.506 3 12.506 3a2.45 2.45 0 0 0-1.764.753c-.451.466-.73 1.108-.73 1.818s.279 1.354.73 1.818L15 12z'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    /* border: none; */
    border: 1px solid gray;
    border-radius: 5px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

#donate-me>a {
    color: transparent;
}

.bxs--donate-heart {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.726 13.02L14 16H9v-1h4.065a.5.5 0 0 0 .416-.777l-.888-1.332A2 2 0 0 0 10.93 12H3a1 1 0 0 0-1 1v6a2 2 0 0 0 2 2h9.639a3 3 0 0 0 2.258-1.024L22 13l-1.452-.484a3 3 0 0 0-2.822.504m1.532-5.63c.451-.465.73-1.108.73-1.818s-.279-1.353-.73-1.818A2.45 2.45 0 0 0 17.494 3S16.25 2.997 15 4.286C13.75 2.997 12.506 3 12.506 3a2.45 2.45 0 0 0-1.764.753c-.451.466-.73 1.108-.73 1.818s.279 1.354.73 1.818L15 12z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.footerDiv {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: column;
    align-items: center;
    margin: 150px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 1px solid gray;
    width: 100%;
}

.otvetstvennost {
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}

.loader {
    position: absolute;
    margin: 0 auto;
    top: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 70px;
    color: rgb(255, 0, 0);
    animation-name: load;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-color: whitesmoke;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    padding: 30px 80px;
    z-index: 90;
}

.settingsDiv {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    gap: 0px;
    margin: 0 0 20px 0;
    width: 1700px;
    height: auto;
    top: 15%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    background-color: whitesmoke;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    padding: 10px;
    justify-content: space-between;
}

.settingsDiv>div>input {
    height: 80px;
    width: 160px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 34px;
    border-width: 1px;
    border-radius: 5px;
    padding: 0 0 0 10px;
    margin: 5px;
}

.settingsDiv>div>span {
    font-size: 30px;
    margin: 5px;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.volume-control-div {

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.volume-control-lbl {
    display: inline-block;
    width: 100%;
    position: absolute;
    text-align: center;
    pointer-events: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12.253 19.4L7.99 15.782a1 1 0 0 0-.647-.238H4.75a2 2 0 0 1-2-2v-3.086a2 2 0 0 1 2-2h2.594a1 1 0 0 0 .647-.238l4.262-3.62a1 1 0 0 1 1.647.762V18.64a1 1 0 0 1-1.647.762Z'/%3E%3Cpath stroke-linecap='round' d='M16.664 8.542c.48.35.88.854 1.158 1.462c.277.607.424 1.295.424 1.996c0 .7-.147 1.39-.424 1.996c-.278.607-.677 1.112-1.158 1.462M18.7 6.424c.775.565 1.42 1.378 1.867 2.357c.447.978.683 2.089.683 3.219s-.236 2.24-.683 3.22c-.448.978-1.092 1.791-1.867 2.356'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 7% 50%;
    background-size: 11%;
}




.volume-control[type='range'] {
    width: 330px;
    height: 80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: whitesmoke;
    transition: 0.3s;
    margin: 0 5px;
}

.volume-control[type='range']:hover {
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d5778;
    transition: 0.3s;
}

.volume-control[type='range']::-webkit-slider-thumb {
    background: #d35d57ab;
    border-radius: 5px;
    cursor: pointer;
    width: 30px;
    height: 80px;
    -webkit-appearance: none;
    margin-top: 0px;
}


.volume-control:focus {
    outline: none;
}

.position-input {
    position: absolute;
    width: 1680px;
    height: 80px;
    margin: 0;
    left: 10px;
    bottom: 35px;
}

.position-input>input[type='range'] {
    width: inherit;
}

.bar-number {
    display: inline-block;
    width: 100%;
    position: absolute;
    text-align: center;
    pointer-events: none;
    font-size: 46px;
}

.callSongLoading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 90%;
    height: 200px;
    left: 5%;
    top: 2%;
    border: 1px solid lightgrey;
    border-radius: 10px;
    z-index: 80;
    background-color: rgba(144, 238, 144, 0.635);
}

.callSongLoading>span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
}

.callSongLoading-close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    width: 200px;
    height: 80px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    background: rgba(255, 0, 0, 0.267);
}

.alphabit-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 44px;
    margin: 20px 0 20px 0;
    padding: 0 10px;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    width: 1700px;
    height: 110px;
    justify-content: space-between;
    align-items: center;
}

.alphabit-list>li {
    margin: 0 8px;
}

.alphabit-list>li>a {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 75px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0px 10px #cfcfcfc9;
    color: gray;
    transition: 0.3s;
}

.alphabit-list>li>a:hover {
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
    border-radius: 5px;
}

.alphabit-list-ru {
    margin: 0 0 20px 0;
}

.goTopBtn {
    position: fixed;
    width: 140px;
    height: 70px;
    border: 1px solid gray;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    background: rgba(144, 238, 144, 0.635);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26%;
    right: 10px;
    bottom: 10px;
    opacity: 0;
    z-index: 90;
    transition: 0.5s;
}

/* #iPlayDrumsHref{
    font-size: 25px;
} */

.dNone {
    display: none;
}

.active {
    background-color: rgba(144, 238, 144, 0.635);
}

@keyframes load {
    0% {
        color: red;

    }

    25% {
        color: rgb(255, 162, 0);

    }

    50% {
        color: rgb(62, 149, 42);

    }

    75% {
        color: rgb(0, 17, 128);
    }

    100% {
        color: red;
    }
}


/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 120;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    background: rgba(184, 184, 184, 0.795);
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    background: whitesmoke;
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    color: black;
}

.modal-content>ol>li {
    position: relative;
    margin: 30px 10px;
    line-height: 1.5;
}

.modal-content>ul>li {
    position: relative;
    margin: 30px 10px;
    line-height: 1.5;
}

.modal-content>h3 {
    text-align: center;
    margin: 50px 0 50px 0;
    font-weight: normal;
    font-size: 32px;
}

.modal-content>ol>li>span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url('https://ca04654.tw1.ru/test/img/DrumTiles02.png');
    position: relative;
    top: 15px;
    margin: 0 5px 0 0;
}

.impotant {
    display: inline-block;
    width: max-content;
    background-color: rgba(245, 113, 113, 0.635);
    font-size: 32px;
    padding: 10px;

}

/* The Close Button */
.close {
    position: absolute;
    color: #ff0000;
    float: right;
    font-size: 40px;
    font-weight: bold;
    right: 50px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* чекбокс */
.check-not-show {
    margin-top: 10px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="checkbox"] {
    accent-color: hwb(113 64% 0%);
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

/* чекбокс */

/* лого внутри инструкции */
.logoInSetup {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoInSetup>h2 {
    font-size: 40px;
}

.logoInSetup>img {
    width: 65px;
    margin: 30px 0 0 0;
    opacity: 0.9;

}


.hot-key-span {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    background: whitesmoke !important;
    top: 0 !important;
    text-align: center;
    width: 50px;
    height: 50px;

}

.a-menu:hover {
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}

.a-menu {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: black;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px 15px;
    transition: 0.3s;
}

.a-menu:visited {
    color: black;
}

.a-menu-container {
    width: 100%;
    display: flex;
    justify-content: end;
}

/* лого внутри инструкции */


/* kuki */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 1000;
    border-top: 1px solid #ccc;
}

.cookie-consent p {
    margin: 0;
}

.cookie-consent button {
    margin: 5px;
    padding: 5px 10px;
    border: none;
    background-color: #4CAF50;
    /* Зеленый */
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

.cookie-consent button:hover {
    opacity: 0.8;
}

.hidden {
    display: none;
}



/* === Контейнер для статистики попаданий === */
.stats-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 1700px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0px 5px gray;
    background: whitesmoke;
    margin: 0 auto 10px auto;
    /* центрирование + отступ снизу */
    flex-wrap: wrap;
    gap: 15px;
}


/* === Модальное окно назначения MIDI === */
.midi-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.midi-modal-content {
    background-color: whitesmoke;
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    font-family: Arial, sans-serif;
    position: relative;
}

.midi-modal-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.midi-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

.midi-modal-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.midi-assignment-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.midi-assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.midi-assignment-item:hover {
    background: rgba(147, 197, 253, 0.3);
}

.midi-assignment-item.active {
    background: rgba(144, 238, 144, 0.4);
    border: 2px solid #4ade80;
}

.midi-assignment-drum {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.midi-assignment-icon {
    width: 36px;
    height: 36px;
    background-image: url('img/DrumTiles02.png');
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.midi-assignment-note {
    font-size: 14px;
    color: #666;
    background: rgba(0, 0, 0, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}

.midi-assignment-note.waiting {
    background: #fbbf24;
    color: #000;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.midi-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.midi-modal-btn {
    padding: 8px 20px;
    border: 1px solid gray;
    border-radius: 6px;
    background: whitesmoke;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.midi-modal-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.midi-modal-btn.primary {
    background: rgba(147, 197, 253, 0.635);
    font-weight: 500;
}

.midi-modal-btn.primary:hover {
    background: rgba(147, 197, 253, 0.9);
}

.midi-modal-btn.danger {
    background: rgba(248, 113, 113, 0.635);
}

.midi-modal-btn.danger:hover {
    background: rgba(248, 113, 113, 0.9);
}

.midi-modal-status {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    min-height: 20px;
}

/* Два слота для нот */
.midi-assignment-note {
    font-size: 12px;
    color: #666;
    background: rgba(0, 0, 0, 0.08);
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 48px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.midi-assignment-note.slot-1 {
    border-left: 3px solid #4ade80;
}

.midi-assignment-note.slot-2 {
    border-left: 3px solid #93c5fd;
}

.midi-assignment-note:hover {
    background: rgba(147, 197, 253, 0.3);
}

.midi-assignment-note.waiting {
    background: #fbbf24;
    color: #000;
    font-weight: 500;
    animation: pulse 1s infinite;
}

.midi-assignment-note:empty::after {
    content: "+";
    color: #999;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}


/* === Добавьте в <style> или CSS-файл === */

/* Анимация для MIDI-фидбека */
@keyframes hit-flash {
    0% {
        border: none;
        border-radius: 50%;
    }

    50% {
        /* border: 3px solid #ff4757; */
        border-radius: 50%;
        box-shadow: 0 0 15px rgb(255, 0, 0);
    }

    100% {
        border: none;
        border-radius: 50%;
    }
}

.hit-flash {
    animation: hit-flash 60ms linear;
}



/* colors */
.color_yellow {
    background-color: #ecb85eb5;
}

.color_green {
    background-color: rgba(111, 214, 111, 0.611);
}

.color_red {
    background-color: #d35d57ab;
}

.color_blue {
    background-color: #2967ad8e;
}

.color_violet {
    background-color: rgba(171, 36, 121, 0.705);
}

.color_gray {
    background-color: rgb(158, 158, 158);
}






@media (min-width: 800px) and (max-width: 1200px) {
    .app_container {
        zoom: 60%;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .app_container {
        zoom: 70%;
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .app_container {
        zoom: 80%;
    }
}

@media (min-width: 1601px)and (max-width: 1980px) {
    .app_container {
        zoom: 90%;
    }
}

@media (min-width: 1981px) {
    .app_container {
        zoom: 100%;
    }
}



/* 🎛️ Панель фильтров — в стиле DrumSong */
/* .songs-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: whitesmoke;
  border-radius: 10px;
  box-shadow: 0 0px 5px gray;
  margin: 10px 0;
  border: 1px solid gray;
  font-family: Arial, Helvetica, sans-serif;
  width: 1700px;
} */

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group label {
    font-weight: normal;
    color: black;
    font-size: 26px;
    white-space: nowrap;
}

/* 🔍 Поле поиска */
.filter-input {
    padding: 0 15px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
    height: 80px;
    width: 400px;
    background: whitesmoke;
    color: black;
    transition: 0.3s;
    margin: 0 5px;

}

.filter-input:focus {
    outline: none;
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}

.filter-input::placeholder {
    color: #666;
}

/* ✕ Кнопка очистки поиска */
.filter-btn {
    background: whitesmoke;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 28px;
    color: black;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.filter-btn:hover {
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
    background: #d35d5783;
}

.filter-btn:active {
    background-color: #d35d5783;
}

/* 🎚️ Фильтры сложности */
.difficulty-filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.diff-btn {
    width: 112px;
    height: 80px;
    background: whitesmoke;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 26px;
    font-weight: normal;
    color: black;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 5px;
}

.diff-btn:hover {
    border: 1px solid gray;
    box-shadow: 0 0px 10px #d35d57c9;
    transition: 0.3s;
}

.diff-btn.active {
    background: rgba(144, 238, 144, 0.635);
    border: 1px solid gray;
}

#clearSearch {
    height: 80px;
    width: 80px;
    background-color: #d35d57ab;
    margin-right: 5px;
}

.diff-btn[data-diff="2"].active {
    background: rgba(111, 214, 111, 0.611);
}

.diff-btn[data-diff="3"].active {
    background: #ecb85eb5;
}

.diff-btn[data-diff="4"].active {
    background: #d35d57ab;
}

.diff-btn[data-diff="1"].active {
    background: #2967ad8e;
}

/* 📊 Статистика */
.filter-stats {
    font-size: 36px;
    color: black;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.filter-stats span {
    font-weight: normal;
}

/* 🎵 Кнопки песен — скрытие/подсветка */
.songButton.filtered-out {
    display: none !important;
}

.songButton.highlighted {
    animation: pulse 0.3s ease;
    box-shadow: 0 0px 10px #3498db;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}